/* ===========================================================
   1. LOGO LOADER (page-load sequence, admin toggle)
   =========================================================== */
#loader{
  position:fixed; inset:0; z-index:9999;
  background:var(--ink-900);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
#loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
#loader::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(111,196,74,.18), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 64px);
}
.loader-mark{
  position:relative;
  width:128px; height:128px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  animation:loaderPulse 1.8s var(--ease) infinite;
}
.loader-mark img{ width:96px; height:96px; object-fit:contain; animation:loaderSpinIn 1s var(--ease) both; }
.loader-mark::after{
  content:"";
  position:absolute; inset:-10px;
  border-radius:50%;
  border:2px solid rgba(111,196,74,.4);
  border-top-color:var(--lime-400);
  animation:loaderRing 1s linear infinite;
}
@keyframes loaderSpinIn{ from{ opacity:0; transform:scale(.6) rotate(-25deg);} to{ opacity:1; transform:scale(1) rotate(0);} }
@keyframes loaderRing{ to{ transform:rotate(360deg); } }
@keyframes loaderPulse{ 0%,100%{ filter:drop-shadow(0 0 0 rgba(111,196,74,.0)); } 50%{ filter:drop-shadow(0 0 28px rgba(111,196,74,.45)); } }
.loader-text{
  margin-top:26px;
  font-family:var(--font-data);
  letter-spacing:.3em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--lime-300);
  opacity:.9;
}
.loader-bar{
  margin-top:16px;
  width:180px; height:3px;
  background:rgba(255,255,255,.15);
  border-radius:3px;
  overflow:hidden;
}
.loader-bar span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--lime-400),var(--gold-500));
  animation:loaderFill 1.4s var(--ease) forwards .15s;
}
@keyframes loaderFill{ to{ width:100%; } }

/* ===========================================================
   2. WELCOME POPUP (first-visit, admin toggle)
   =========================================================== */
#popupOverlay{
  position:fixed; inset:0; z-index:9000;
  background:rgba(8,28,17,.72);
  backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s var(--ease);
}
#popupOverlay.is-open{ opacity:1; visibility:visible; }
.popup-card{
  position:relative;
  width:100%; max-width:460px;
  background:var(--paper);
  border-radius:var(--radius-l);
  overflow:hidden;
  box-shadow:var(--shadow-pop);
  transform:scale(.92) translateY(16px);
  transition:transform .4s var(--ease);
}
#popupOverlay.is-open .popup-card{ transform:scale(1) translateY(0); }
.popup-close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:36px; height:36px; border-radius:50%;
  background:rgba(11,61,36,.55);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  transition:background .2s;
}
.popup-close:hover{ background:rgba(11,61,36,.85); }
.popup-bg{
  display:block; width:100%;
  aspect-ratio:3/2.8;
  position:relative;
  cursor:pointer;
  overflow:hidden;
}
.popup-bg-gradient{
  position:absolute; inset:0;
  background:
    linear-gradient(160deg, #0F4A2C 0%, #0B3D24 50%, #081C11 100%);
}
.popup-bg-pattern{
  position:absolute; inset:0;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(111,196,74,.22) 0%, transparent 70%),
    radial-gradient(circle at 80% 80%, rgba(31,122,61,.3) 0%, transparent 50%);
}
.popup-pitch-lines{ position:absolute; inset:0; opacity:.1; pointer-events:none; }
.popup-logo-center{
  position:absolute; top:24px; left:50%; transform:translateX(-50%);
  width:90px; height:90px;
  background:rgba(255,255,255,.15); border-radius:50%;
  backdrop-filter:blur(10px);
  border:2px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center;
  padding:10px;
  box-shadow:0 0 0 6px rgba(111,196,74,.12), 0 8px 30px rgba(0,0,0,.3);
}
.popup-logo-center img{ width:100%; height:100%; object-fit:contain; }
.popup-bg-content{
  position:absolute; left:0; right:0; bottom:0;
  padding:22px 24px 28px;
  background:linear-gradient(0deg, rgba(8,28,16,.98) 0%, rgba(8,28,16,.85) 60%, transparent 100%);
  color:#fff;
}
.popup-bg-content .tag{
  font-family:var(--font-data);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--lime-400); display:flex; align-items:center; gap:8px;
  margin-bottom:10px;
}
.popup-bg-content .tag::before{ content:""; width:20px; height:1.5px; background:var(--lime-400); display:inline-block; }
.popup-bg-content h3{
  font-family:var(--font-head); font-weight:800;
  font-size:22px; line-height:1.2; color:#fff;
}
.popup-bg-content p{
  font-size:13px; color:rgba(255,255,255,.72); margin-top:8px; line-height:1.55;
}
.popup-bg-content .popup-cta{
  margin-top:16px;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--lime-400); color:var(--ink-900);
  font-family:var(--font-head); font-weight:700; font-size:13.5px;
  padding:11px 22px; border-radius:100px;
  pointer-events:none;
  box-shadow:0 6px 20px rgba(111,196,74,.35);
}
.popup-foot{
  padding:14px 22px 18px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  background:var(--paper);
  border-top:1px solid var(--line);
}
.popup-check{
  display:flex; align-items:center; gap:9px;
  font-size:13px; color:var(--text-600); cursor:pointer;
}
.popup-check input{ width:16px; height:16px; accent-color:var(--green-700); cursor:pointer; }
.popup-foot button.text-close{
  font-size:13px; font-weight:600; color:var(--text-600);
  padding:6px 14px; border-radius:20px;
  border:1px solid var(--line);
  transition:background .2s, color .2s;
}
.popup-foot button.text-close:hover{ background:var(--chalk-100); color:var(--ink-900); }
.popup-bg-content{
  position:absolute; left:0; right:0; bottom:0; padding:26px 26px 24px;
  color:#fff;
}
.popup-bg-content .tag{
  font-family:var(--font-data);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--lime-300);
}
.popup-bg-content h3{
  font-family:var(--font-head); font-weight:800;
  font-size:26px; line-height:1.15; margin-top:8px;
}
.popup-bg-content p{
  font-size:13.5px; color:rgba(255,255,255,.82); margin-top:8px; line-height:1.5;
}
.popup-bg-content .btn{ margin-top:16px; pointer-events:none; }
.popup-foot{
  padding:14px 22px 20px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  background:var(--paper);
}
.popup-check{
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--text-600);
}
.popup-check input{ width:16px; height:16px; accent-color:var(--green-700); }
.popup-foot button.text-close{
  font-size:13px; font-weight:600; color:var(--text-600);
  text-decoration:underline; text-underline-offset:3px;
}

/* ===========================================================
   3. COOKIE CONSENT BANNER (admin toggle)
   =========================================================== */
#cookieBanner{
  position:fixed; left:18px; right:18px; bottom:18px; z-index:8500;
  max-width:680px; margin:0 auto;
  background:var(--ink-900);
  color:#fff;
  border-radius:var(--radius-m);
  padding:20px 22px;
  box-shadow:var(--shadow-pop);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  transform:translateY(140%);
  transition:transform .5s var(--ease);
}
#cookieBanner.is-shown{ transform:translateY(0); }
#cookieBanner .cookie-ico{
  width:40px; height:40px; flex:0 0 auto;
  border-radius:50%;
  background:rgba(111,196,74,.18);
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
}
#cookieBanner .cookie-text{ flex:1 1 260px; font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.85); }
#cookieBanner .cookie-text b{ color:#fff; }
#cookieBanner .cookie-actions{ display:flex; gap:10px; flex:0 0 auto; margin-left:auto; }
#cookieBanner .btn{ padding:11px 20px; font-size:13.5px; }
@media (max-width:560px){
  #cookieBanner{ flex-direction:column; align-items:flex-start; }
  #cookieBanner .cookie-actions{ width:100%; margin-left:0; }
  #cookieBanner .cookie-actions .btn{ flex:1; }
}

/* ===========================================================
   4. HEADER / MAIN MENU
   =========================================================== */
#siteHeader{
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding:14px 0;
  transition:background-color .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
#siteHeader .header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
#siteHeader.is-scrolled{
  background:rgba(11,61,36,.92);
  backdrop-filter:blur(10px);
  padding:9px 0;
  box-shadow:0 8px 30px rgba(0,0,0,.18);
}
.brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.brand img{ width:42px; height:42px; object-fit:contain; transition:width .3s,height .3s; }
#siteHeader.is-scrolled .brand img{ width:36px; height:36px; }
.brand .brand-text{ display:flex; flex-direction:column; line-height:1.15; white-space:nowrap; }
.brand .brand-text strong{ font-family:var(--font-head); font-weight:800; font-size:14px; color:#fff; letter-spacing:.01em; white-space:nowrap; }
.brand .brand-text span{ font-family:var(--font-data); font-size:10px; letter-spacing:.14em; color:var(--lime-300); text-transform:uppercase; white-space:nowrap; }
@media (max-width:1240px){ .brand .brand-text{ display:none; } }

.main-nav{ display:flex; align-items:center; gap:2px; }
/* An toàn kép: nếu bất kỳ nguồn nào (plugin, custom menu HTML...) render thêm
   <ul> bọc quanh <li>, đảm bảo <ul> đó vẫn kế thừa flex layout ngang thay vì
   rơi về display:block mặc định của trình duyệt (gây menu xếp dọc, đè nội dung). */
.main-nav > ul{ display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; width:100%; }
/* Tắt bullet marker (•) mặc định của trình duyệt cho <li> — áp dụng TRỰC TIẾP
   lên <li> (không chỉ trên <ul> cha), vì khi menu KHÔNG có <ul> bao ngoài
   (trường hợp fallback dùng chưa gán Menu trong wp-admin), <li> là con trực
   tiếp của <nav> và vẫn giữ display:list-item mặc định của trình duyệt nếu
   không bị tắt riêng — gây ra dấu chấm xấu phía sau mỗi mục menu. */
.main-nav > li,
.main-nav .menu-item{ list-style:none; }
.main-nav a{
  font-family:var(--font-head); font-weight:600; font-size:14px;
  color:rgba(255,255,255,.82);
  padding:10px 14px; border-radius:100px;
  transition:background-color .2s, color .2s;
  white-space:nowrap;
}
.main-nav a:hover{ background:rgba(255,255,255,.1); color:#fff; }
.main-nav a.is-active{ background:var(--lime-400); color:var(--ink-900); }

.header-cta{ display:flex; align-items:center; gap:10px; position:relative; z-index:800; }
.header-cta .btn{ padding:11px 20px; font-size:13.5px; }

.nav-toggle{
  display:none;
  width:42px; height:42px; border-radius:10px;
  background:rgba(255,255,255,.1);
  color:#fff; font-size:20px;
  align-items:center; justify-content:center;
}
#navToggle{ display:none; padding:0; width:42px; height:42px; border-radius:10px; }

@media (max-width:1080px){
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(320px,84vw); height:100vh;
    background:var(--ink-900); flex-direction:column; align-items:stretch;
    padding:90px 22px 30px; gap:4px;
    transform:translateX(100%); transition:transform .4s var(--ease);
    overflow-y:auto; z-index:700;
    box-shadow:-8px 0 32px rgba(0,0,0,.3);
  }
  .main-nav > ul{ flex-direction:column; align-items:stretch; gap:4px; width:100%; }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav a{ padding:13px 16px; font-size:15px; display:block; }
  #navToggle{ display:flex; align-items:center; justify-content:center; }
}
@media (max-width:480px){
  .header-cta .btn-primary{ padding:11px 14px; font-size:12.5px; }
}
.nav-scrim{
  display:none; position:fixed; inset:0; z-index:690;
  background:rgba(8,20,13,.55);
}
.nav-scrim.is-open{ display:block; }

/* ===========================================================
   5. LEFT SIDE PROGRESS RAIL — redesigned
   =========================================================== */
#sideRail{
  position:fixed; left:18px; top:50%; transform:translateY(-50%);
  z-index:600;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:0;
  padding:10px 0;
}
.rail-line{
  position:absolute; left:9px; top:16px; bottom:16px; width:2px;
  background:rgba(11,61,36,.1);
  border-radius:2px;
  z-index:0;
}
.rail-line span{
  position:absolute; left:0; top:0; width:100%;
  background:linear-gradient(180deg, var(--lime-400), var(--green-600));
  border-radius:2px;
  transition:height .2s linear;
}
.rail-item{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:0;
  padding:5px 0;
  cursor:pointer;
  group:true;
}
.rail-dot-wrap{
  width:20px; height:20px; display:flex; align-items:center; justify-content:center;
  flex:0 0 auto; position:relative;
}
.rail-dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(11,61,36,.2);
  border:none;
  transition:all .3s var(--ease);
  flex:0 0 auto;
}
.rail-item.is-active .rail-dot{
  width:12px; height:12px;
  background:var(--lime-400);
  box-shadow:0 0 0 3px rgba(111,196,74,.25), 0 0 12px rgba(111,196,74,.4);
}
.rail-item:hover .rail-dot{
  background:var(--green-600);
  width:10px; height:10px;
}
.rail-label{
  font-family:var(--font-body); font-size:11.5px; font-weight:500;
  color:var(--text-500);
  opacity:0; transform:translateX(-4px) scale(.96);
  transition:opacity .22s var(--ease), transform .22s var(--ease), color .22s;
  white-space:nowrap;
  pointer-events:none;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);
  padding:4px 10px; border-radius:20px;
  box-shadow:0 2px 12px rgba(11,61,36,.12);
  margin-left:8px;
  border:1px solid rgba(11,61,36,.06);
}
.rail-item.is-active .rail-label{
  color:var(--ink-900); font-weight:700;
  background:var(--paper);
  border-color:rgba(111,196,74,.3);
}
#sideRail:hover .rail-label{ opacity:1; transform:translateX(0) scale(1); }
#sideRail:hover .rail-item.is-active .rail-label{ color:var(--green-700); }
@media (max-width:1280px){ #sideRail{ display:none; } }

/* ===========================================================
   6. FLOATING ACTION BUTTON - redesigned vertical pill
   =========================================================== */
#fabStack{
  position:fixed; right:20px; bottom:88px; z-index:750;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.fab-items-wrap{
  display:flex; flex-direction:column; gap:8px; align-items:flex-end;
  opacity:0; transform:translateY(12px) scale(.95);
  pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
#fabStack.is-open .fab-items-wrap{
  opacity:1; transform:translateY(0) scale(1); pointer-events:auto;
}
.fab-item{
  display:flex; align-items:center; gap:10px;
}
.fab-tag{
  font-family:var(--font-body); font-weight:600; font-size:12.5px;
  color:var(--ink-900); background:#fff;
  padding:7px 13px; border-radius:20px; white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,0,0,.14), 0 1px 4px rgba(0,0,0,.08);
}
.fab-btn{
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:#fff; flex:0 0 auto;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  transition:transform .2s var(--ease), box-shadow .2s;
}
.fab-btn:hover{ transform:scale(1.1); box-shadow:0 10px 26px rgba(0,0,0,.28); }
.fab-btn.fab-form{ background:linear-gradient(135deg,#1F7A3D,#0B3D24); }
.fab-btn.fab-call{ background:linear-gradient(135deg,#25B063,#1a9050); }
.fab-btn.fab-zalo{ background:linear-gradient(135deg,#006af5,#0055cc); }

/* Main toggle - vertical pill design */
.fab-main-wrap{
  display:flex; align-items:center; justify-content:flex-end;
}
.fab-main{
  position:relative;
  width:56px; height:56px; border-radius:50%;
  background:var(--lime-400); color:var(--ink-900);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(111,196,74,.5), 0 2px 8px rgba(0,0,0,.15);
  transition:transform .35s var(--ease), background .25s, box-shadow .25s;
  cursor:pointer; border:none;
}
.fab-main-icon{
  font-size:22px; font-weight:700; line-height:1;
  transition:transform .35s var(--ease);
  display:flex; align-items:center; justify-content:center;
}
.fab-main::before{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:2px solid rgba(111,196,74,.4);
  animation:fabPing 2s ease-out infinite;
}
@keyframes fabPing{ 0%{ transform:scale(.92); opacity:.9;} 100%{ transform:scale(1.4); opacity:0;} }
#fabStack.is-open .fab-main{ background:var(--ink-900); color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.3); }
#fabStack.is-open .fab-main::before{ display:none; }
#fabStack.is-open .fab-main-icon{ transform:rotate(45deg); }

/* ===========================================================
   7. BACK TO TOP
   =========================================================== */
#backToTop{
  position:fixed; right:20px; bottom:24px; z-index:740;
  width:42px; height:42px; border-radius:50%;
  background:var(--ink-900); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
#backToTop.is-shown{ opacity:1; visibility:visible; transform:translateY(0); }
#backToTop:hover{ background:var(--green-700); transform:translateY(-2px) !important; }
#backToTop svg{ width:16px; height:16px; }
@media (max-width:640px){
  #fabStack{ right:14px; bottom:76px; }
  #backToTop{ right:14px; bottom:16px; width:38px; height:38px; }
}

/* ===========================================================
   8. CONTACT MODAL (form)
   =========================================================== */
#formModalOverlay{
  position:fixed; inset:0; z-index:9100;
  background:rgba(8,28,17,.72);
  backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s var(--ease);
}
#formModalOverlay.is-open{ opacity:1; visibility:visible; }
.form-card{
  width:100%; max-width:480px;
  background:var(--paper);
  border-radius:var(--radius-l);
  padding:34px 32px;
  position:relative;
  transform:scale(.94) translateY(14px);
  transition:transform .35s var(--ease);
  max-height:88vh; overflow-y:auto;
}
#formModalOverlay.is-open .form-card{ transform:scale(1) translateY(0); }
.form-card .popup-close{ position:absolute; top:14px; right:14px; background:var(--chalk-100); color:var(--ink-900); }
.form-card .popup-close:hover{ background:var(--line); }
.form-card .eyebrow{ margin-bottom:6px; }
.form-card h3{ font-family:var(--font-head); font-weight:800; font-size:24px; color:var(--ink-900); margin-bottom:6px; }
.form-card p.lead{ font-size:14px; color:var(--text-600); margin-bottom:22px; }
.form-field{ margin-bottom:14px; }
.form-field label{ display:block; font-size:12.5px; font-weight:600; color:var(--text-600); margin-bottom:6px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:12px 14px; border-radius:10px;
  border:1.5px solid var(--line); background:var(--chalk-50);
  font-family:var(--font-body); font-size:14px; color:var(--text-900);
  transition:border-color .2s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color:var(--green-600); outline:none; }
.form-card .btn{ width:100%; margin-top:6px; padding:14px; }
.form-success{ display:none; text-align:center; padding:20px 0; }
.form-success.is-shown{ display:block; }
.form-success .ico{ width:60px; height:60px; border-radius:50%; background:var(--chalk-100); color:var(--green-700); font-size:28px; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.form-success h4{ font-family:var(--font-head); font-size:19px; margin-bottom:8px; }
.form-success p{ font-size:14px; color:var(--text-600); }

/* ===========================================================
   9. HERO / SLIDE BANNER
   =========================================================== */
#trangchu{ position:relative; }
.hero-slider{
  position:relative;
  height:100vh; min-height:640px; max-height:980px;
  overflow:hidden;
  background:var(--ink-900);
}
.hero-slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity 1s var(--ease), visibility 1s var(--ease);
}
.hero-slide.is-active{ opacity:1; visibility:visible; z-index:2; }
.hero-slide .slide-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
}
.hero-slide:nth-child(1) .slide-bg{ background:
  linear-gradient(180deg, rgba(11,61,36,.55) 0%, rgba(8,30,18,.92) 100%),
  radial-gradient(ellipse 60% 50% at 75% 30%, rgba(111,196,74,.35), transparent),
  linear-gradient(125deg, #123F26 0%, #0B3D24 55%, #081C11 100%);
}
.hero-slide:nth-child(2) .slide-bg{ background:
  linear-gradient(180deg, rgba(11,61,36,.5) 0%, rgba(8,30,18,.92) 100%),
  radial-gradient(ellipse 55% 50% at 25% 35%, rgba(255,199,44,.22), transparent),
  linear-gradient(125deg, #0F4A2C 0%, #0B3D24 60%, #081C11 100%);
}
.hero-slide:nth-child(3) .slide-bg{ background:
  linear-gradient(180deg, rgba(11,61,36,.5) 0%, rgba(8,30,18,.92) 100%),
  radial-gradient(ellipse 55% 50% at 80% 70%, rgba(111,196,74,.3), transparent),
  linear-gradient(125deg, #1F7A3D 0%, #0B3D24 55%, #081C11 100%);
}
.hero-pitch-art{
  position:absolute; inset:0; opacity:.5;
  pointer-events:none;
}
.floodlight{
  position:absolute; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(111,196,74,.28), transparent 65%);
  filter:blur(10px);
  animation:floodFlicker 6s ease-in-out infinite;
}
.floodlight.fl1{ top:-160px; right:-80px; }
.floodlight.fl2{ bottom:-200px; left:-120px; animation-delay:2s; }
@keyframes floodFlicker{ 0%,100%{ opacity:.7;} 50%{ opacity:1;} }

.hero-content{
  position:relative; z-index:3;
  height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:80px;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-data); font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--lime-300);
  opacity:0; transform:translateY(14px);
}
.hero-eyebrow::before{ content:"●"; color:var(--gold-500); font-size:8px; }
.hero-content h1{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(40px,7vw,84px);
  line-height:.96;
  letter-spacing:.01em;
  color:#fff;
  margin-top:18px;
  max-width:780px;
  opacity:0; transform:translateY(20px);
}
.hero-content h1 em{ font-style:normal; color:var(--lime-400); }
.hero-content .hero-sub{
  margin-top:20px;
  font-size:17px; line-height:1.6;
  color:rgba(255,255,255,.78);
  max-width:520px;
  opacity:0; transform:translateY(20px);
}
.hero-actions{
  margin-top:34px;
  display:flex; gap:14px; flex-wrap:wrap;
  opacity:0; transform:translateY(20px);
}
.hero-slide.is-active .hero-eyebrow,
.hero-slide.is-active .hero-content h1,
.hero-slide.is-active .hero-sub,
.hero-slide.is-active .hero-actions{
  opacity:1; transform:translateY(0);
  transition:opacity .8s var(--ease) .25s, transform .8s var(--ease) .25s;
}
.hero-slide.is-active .hero-content h1{ transition-delay:.35s; }
.hero-slide.is-active .hero-sub{ transition-delay:.5s; }
.hero-slide.is-active .hero-actions{ transition-delay:.65s; }

.hero-stats{
  position:relative; z-index:3;
  display:flex; gap:0; flex-wrap:wrap;
  margin-top:56px;
}
.hero-stats .stat{
  padding:14px 28px 14px 0; margin-right:28px;
  border-right:1px solid rgba(255,255,255,.18);
}
.hero-stats .stat:last-child{ border-right:none; }
.hero-stats .stat b{
  display:block; font-family:var(--font-data); font-weight:600; font-size:30px; color:#fff;
}
.hero-stats .stat span{ font-size:12.5px; color:rgba(255,255,255,.6); letter-spacing:.03em; }

.hero-dots{
  position:absolute; left:0; right:0; bottom:32px; z-index:4;
  display:flex; justify-content:center; align-items:center; gap:8px;
}
.hero-dots button{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.35);
  border:none; padding:0;
  transition:background .3s var(--ease), width .3s var(--ease), border-radius .3s var(--ease);
  cursor:pointer;
  flex:0 0 auto;
}
.hero-dots button.is-active{
  background:var(--lime-400);
  width:28px; border-radius:4px;
  box-shadow:0 0 8px rgba(111,196,74,.5);
}
.hero-arrows{
  position:absolute; right:24px; bottom:24px; z-index:4;
  display:flex; gap:10px; align-items:center;
}
@media (max-width:780px){ .hero-arrows{ display:none; } }
.hero-arrow{
  width:40px; height:40px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.35); color:#fff;
  background:rgba(0,0,0,.18); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; font-size:18px;
  transition:background .2s, border-color .2s, transform .2s;
}
.hero-arrow:hover{
  background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.7);
  transform:scale(1.08);
}

@media (max-width:640px){
  .hero-slider{ height:92vh; min-height:560px; }
  .hero-stats{ display:none; }
}

/* ===========================================================
   10. NEXT MATCH (countdown + vé)
   =========================================================== */
.match-strip{
  background:linear-gradient(125deg,var(--ink-900),var(--ink-800));
  position:relative;
  overflow:hidden;
}
.match-strip::before{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 80px);
}
.match-card{
  position:relative; z-index:1;
  display:grid; grid-template-columns:auto 1fr auto; gap:32px; align-items:center;
  padding:48px 0;
}
.match-meta{ color:rgba(255,255,255,.7); }
.match-meta .eyebrow{ color:var(--lime-300); }
.match-meta .eyebrow::before{ background:var(--lime-300); }
.match-meta .comp{ margin-top:10px; font-family:var(--font-head); font-weight:700; font-size:15px; color:#fff; }
.match-meta .where{ margin-top:6px; font-size:13.5px; }

.match-teams{
  display:flex; align-items:center; justify-content:center; gap:28px;
}
.match-team{ display:flex; flex-direction:column; align-items:center; gap:10px; width:140px; text-align:center; }
.team-crest{
  width:64px; height:64px; border-radius:50%;
  background:var(--paper); display:flex; align-items:center; justify-content:center;
  padding:8px;
}
.team-crest img{ width:100%; height:100%; object-fit:contain; }
.team-crest.placeholder{ background:rgba(255,255,255,.08); color:#fff; font-family:var(--font-data); font-weight:600; font-size:20px; }
.match-team span{ font-family:var(--font-head); font-weight:700; font-size:13.5px; color:#fff; }

.match-vs{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.match-vs .vs-label{ font-family:var(--font-display); font-size:22px; color:var(--lime-400); }
.countdown{ display:flex; gap:8px; }
.countdown div{
  display:flex; flex-direction:column; align-items:center;
  background:rgba(255,255,255,.08); border-radius:8px; padding:8px 10px; min-width:50px;
}
.countdown b{ font-family:var(--font-data); font-size:19px; color:#fff; }
.countdown span{ font-size:9.5px; letter-spacing:.08em; color:rgba(255,255,255,.55); text-transform:uppercase; margin-top:2px; }

.match-action{ display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.match-action .kickoff{ font-family:var(--font-data); font-size:20px; color:#fff; }
.match-action .date{ font-size:12.5px; color:rgba(255,255,255,.6); }

@media (max-width:920px){
  .match-card{ grid-template-columns:1fr; text-align:center; gap:20px; padding:36px 0; }
  .match-teams{ gap:18px; }
  .match-team{ width:110px; }
  .match-action{ align-items:center; }
}

/* ===========================================================
   11. KẾT QUẢ CÁC TRẬN ĐẤU
   =========================================================== */
.results-rail{
  display:flex; gap:16px; overflow-x:auto; padding-bottom:8px;
  scroll-snap-type:x proximity;
  margin:0 -24px; padding-left:24px; padding-right:24px;
}
.results-rail::-webkit-scrollbar{ height:6px; }
.results-rail::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }
.result-card{
  scroll-snap-align:start;
  flex:0 0 auto; width:270px;
  background:var(--paper); border-radius:var(--radius-m);
  padding:22px;
  box-shadow:var(--shadow-card);
  border:1px solid var(--line);
}
.result-card .rc-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.result-card .rc-comp{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-500); font-family:var(--font-data); }
.result-card .rc-date{ font-size:11px; color:var(--text-500); }
.rc-row{ display:flex; align-items:center; justify-content:space-between; padding:6px 0; }
.rc-row .rc-team{ display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:700; font-size:13.5px; }
.rc-row .rc-crest{ width:28px; height:28px; border-radius:50%; background:var(--chalk-100); display:flex; align-items:center; justify-content:center; font-family:var(--font-data); font-size:10.5px; font-weight:600; color:var(--green-700); flex:0 0 auto; overflow:hidden; }
.rc-row .rc-crest img{ width:100%; height:100%; object-fit:contain; padding:3px; }
.rc-row .rc-score{ font-family:var(--font-data); font-size:18px; font-weight:600; }
.rc-row.is-win .rc-score{ color:var(--green-700); }
.result-card .rc-foot{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); display:flex; justify-content:space-between; align-items:center; }
.result-tag{ font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:100px; letter-spacing:.04em; }
.result-tag.win{ background:#E7F6E2; color:var(--green-700); }
.result-tag.draw{ background:#FFF4D6; color:#9A7000; }
.result-tag.loss{ background:#FBE7E5; color:#B3392F; }

/* ===========================================================
   12. BẢNG XẾP HẠNG (scoreboard table)
   =========================================================== */
.standings-wrap{
  background:var(--paper); border-radius:var(--radius-l);
  border:1px solid var(--line); overflow:hidden; box-shadow:var(--shadow-card);
}
.standings-head{
  background:var(--ink-900); color:#fff;
  padding:18px 24px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.standings-head .sh-title{ font-family:var(--font-head); font-weight:700; font-size:15px; }
.standings-head .sh-sub{ font-family:var(--font-data); font-size:11.5px; color:var(--lime-300); letter-spacing:.05em; }
table.standings{ width:100%; border-collapse:collapse; }
table.standings thead th{
  font-family:var(--font-data); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-500); text-align:center; padding:14px 8px; border-bottom:1px solid var(--line);
}
table.standings thead th:first-child, table.standings thead th:nth-child(2){ text-align:left; }
table.standings tbody td{
  text-align:center; padding:13px 8px; font-family:var(--font-data); font-size:13.5px;
  border-bottom:1px solid var(--chalk-100);
}
table.standings tbody tr:last-child td{ border-bottom:none; }
table.standings tbody tr.is-us{ background:rgba(111,196,74,.08); }
table.standings tbody tr:hover{ background:var(--chalk-50); }
.std-rank{ font-weight:600; color:var(--text-500); width:34px; }
.std-team{ display:flex; align-items:center; gap:10px; text-align:left !important; font-family:var(--font-head); font-weight:700; font-size:13.5px; color:var(--ink-900); white-space:nowrap; }
.std-crest{ width:26px; height:26px; border-radius:50%; background:var(--chalk-100); flex:0 0 auto; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.std-crest img{ width:100%; height:100%; object-fit:contain; padding:2px; }
.std-pts{ font-weight:700; color:var(--green-700); font-size:14.5px; }
.std-form{ display:flex; gap:3px; justify-content:center; }
.std-form span{ width:18px; height:18px; border-radius:4px; font-size:9.5px; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-data); }
.std-form .w{ background:var(--green-600); } .std-form .d{ background:#D8A300; } .std-form .l{ background:#C24536; }
@media (max-width:780px){
  table.standings{ font-size:12px; }
  table.standings thead th:nth-child(n+6), table.standings tbody td:nth-child(n+6){ display:none; }
  .std-form{ display:none; }
}

/* ===========================================================
   13. GIỚI THIỆU VỀ CLB
   =========================================================== */
.about-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center;
}
.about-visual{ position:relative; }
.about-visual-frame{
  position:relative; border-radius:var(--radius-l); overflow:hidden;
  aspect-ratio:4/4.6;
  background:
    linear-gradient(180deg, transparent 50%, rgba(11,61,36,.85)),
    radial-gradient(ellipse 60% 50% at 70% 20%, rgba(111,196,74,.4), transparent),
    linear-gradient(135deg,#1F7A3D,#0B3D24 70%);
}
.about-visual-frame .pitch-art{ position:absolute; inset:0; opacity:.25; }
.about-visual-frame .vf-caption{
  position:absolute; left:0; right:0; bottom:0; padding:26px;
  color:#fff;
}
.vf-caption b{ font-family:var(--font-head); font-size:18px; display:block; }
.vf-caption span{ font-size:12.5px; color:rgba(255,255,255,.7); }
.about-badge{
  position:absolute; top:-22px; right:-22px;
  width:108px; height:108px; border-radius:50%;
  background:var(--paper); box-shadow:var(--shadow-card);
  display:flex; align-items:center; justify-content:center; padding:14px;
}
.about-badge img{ width:100%; height:100%; object-fit:contain; }
@media (max-width:580px){ .about-badge{ width:80px;height:80px; top:-14px; right:-14px; padding:10px; } }

.about-copy .section-head{ margin-bottom:28px; }
.about-list{ display:flex; flex-direction:column; gap:18px; margin-top:30px; }
.about-list li{ display:flex; gap:16px; align-items:flex-start; }
.about-list .ico{
  width:44px; height:44px; border-radius:12px; flex:0 0 auto;
  background:var(--chalk-100); color:var(--green-700);
  display:flex; align-items:center; justify-content:center; font-size:19px;
}
.about-list h4{ font-family:var(--font-head); font-weight:700; font-size:15px; color:var(--ink-900); }
.about-list p{ margin-top:3px; font-size:13.5px; color:var(--text-600); line-height:1.55; }
.about-copy .btn{ margin-top:30px; }

@media (max-width:920px){
  .about-grid{ grid-template-columns:1fr; gap:44px; }
  .about-visual{ max-width:380px; margin:0 auto; }
}

/* ===========================================================
   14. ĐỘI HÌNH CHÍNH
   =========================================================== */
.squad-tabs{ display:flex; gap:8px; margin-bottom:40px; flex-wrap:wrap; }
.squad-tab{
  font-family:var(--font-head); font-weight:700; font-size:13.5px;
  padding:10px 20px; border-radius:100px; border:1.5px solid var(--line);
  color:var(--text-600); transition:all .2s;
}
.squad-tab.is-active{ background:var(--ink-900); border-color:var(--ink-900); color:#fff; }
.squad-tab:hover:not(.is-active){ border-color:var(--green-600); color:var(--green-700); }

.squad-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
@media (max-width:980px){ .squad-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .squad-grid{ grid-template-columns:1fr 1fr; gap:14px; } }

.player-card{
  background:var(--paper); border-radius:var(--radius-m); overflow:hidden;
  border:1px solid var(--line); transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.player-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); }
.player-photo{
  position:relative; aspect-ratio:3/3.4;
  background:linear-gradient(155deg,#15512F,#0B3D24);
  display:flex; align-items:flex-end; justify-content:center;
  overflow:hidden;
}
.player-photo .silhouette{ width:62%; opacity:.92; }
.player-photo .jersey-num{
  position:absolute; top:12px; left:12px;
  font-family:var(--font-display); font-size:30px; color:rgba(255,255,255,.85);
  text-shadow:0 2px 8px rgba(0,0,0,.3);
}
.player-photo .pos-tag{
  position:absolute; top:14px; right:14px;
  font-family:var(--font-data); font-size:10.5px; font-weight:600;
  background:var(--lime-400); color:var(--ink-900);
  padding:3px 9px; border-radius:100px; letter-spacing:.04em;
}
.player-info{ padding:14px 16px 18px; }
.player-info .p-name{ font-family:var(--font-head); font-weight:700; font-size:14.5px; color:var(--ink-900); }
.player-info .p-role{ font-size:11.5px; color:var(--text-500); margin-top:2px; }
.squad-foot{ text-align:center; margin-top:40px; }

/* ===========================================================
   15. TIN TỨC
   =========================================================== */
.news-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:24px; }
.news-card{
  background:var(--paper); border-radius:var(--radius-m); overflow:hidden;
  border:1px solid var(--line); transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  display:flex; flex-direction:column;
}
.news-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-card); }
.news-card.is-feature{ grid-row:span 2; }
.news-thumb{
  aspect-ratio:16/10; position:relative; overflow:hidden;
  background:linear-gradient(140deg,#1F7A3D,#0B3D24);
}
.news-card.is-feature .news-thumb{ aspect-ratio:16/12; }
.news-thumb .pitch-art{ position:absolute; inset:0; opacity:.3; }
.news-thumb .n-cat{
  position:absolute; top:14px; left:14px;
  font-family:var(--font-data); font-size:10.5px; font-weight:600; letter-spacing:.05em;
  background:var(--lime-400); color:var(--ink-900); padding:4px 11px; border-radius:100px; text-transform:uppercase;
}
.news-body{ padding:18px 20px 22px; flex:1; display:flex; flex-direction:column; }
.news-card.is-feature .news-body{ padding:24px 26px 28px; }
.news-date{ font-size:11.5px; color:var(--text-500); font-family:var(--font-data); letter-spacing:.03em; }
.news-body h3{ font-family:var(--font-head); font-weight:700; font-size:16.5px; line-height:1.3; margin-top:8px; color:var(--ink-900); }
.news-card.is-feature .news-body h3{ font-size:22px; }
.news-body p{ font-size:13px; color:var(--text-600); margin-top:8px; line-height:1.55; }
.news-link{ margin-top:auto; padding-top:14px; font-family:var(--font-head); font-weight:700; font-size:12.5px; color:var(--green-700); display:inline-flex; align-items:center; gap:5px; }
@media (max-width:980px){
  .news-grid{ grid-template-columns:1fr 1fr; }
  .news-card.is-feature{ grid-column:span 2; grid-row:auto; }
}
@media (max-width:640px){
  .news-grid{ grid-template-columns:1fr; }
  .news-card.is-feature{ grid-column:auto; }
}

/* ===========================================================
   16. HÌNH ẢNH (gallery)
   =========================================================== */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:140px;
  gap:12px;
}
.gallery-item{
  position:relative; border-radius:var(--radius-s); overflow:hidden;
  background:linear-gradient(150deg,#1F7A3D,#0B3D24);
  cursor:pointer;
}
.gallery-item:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.gallery-item:nth-child(4){ grid-row:span 2; }
.gallery-item .pitch-art{ position:absolute; inset:0; opacity:.28; }
.gallery-item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.45), transparent 45%);
  opacity:0; transition:opacity .25s;
}
.gallery-item:hover::after{ opacity:1; }
.gallery-item .g-zoom{
  position:absolute; right:10px; bottom:10px; z-index:2;
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.18);
  backdrop-filter:blur(4px); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:14px; opacity:0; transform:scale(.8); transition:all .25s;
}
.gallery-item:hover .g-zoom{ opacity:1; transform:scale(1); }
@media (max-width:780px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:120px; }
  .gallery-item:nth-child(1){ grid-column:span 2; grid-row:span 2; }
  .gallery-item:nth-child(4){ grid-row:span 1; }
}

/* ===========================================================
   17. VIDEO
   =========================================================== */
.video-feature{
  position:relative; border-radius:var(--radius-l); overflow:hidden;
  aspect-ratio:16/8; margin-bottom:24px;
  background:linear-gradient(135deg,#15512F,#081C11);
  display:flex; align-items:center; justify-content:center;
}
.video-feature .pitch-art{ position:absolute; inset:0; opacity:.25; }
.play-btn{
  position:relative; z-index:2;
  width:78px; height:78px; border-radius:50%;
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px);
  border:1.5px solid rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:26px;
  transition:transform .3s var(--ease), background .3s;
}
.play-btn:hover{ transform:scale(1.08); background:var(--lime-400); color:var(--ink-900); }
.video-feature .v-caption{ position:absolute; left:26px; bottom:22px; z-index:2; color:#fff; }
.video-feature .v-caption .tag{ font-family:var(--font-data); font-size:11px; letter-spacing:.1em; color:var(--lime-300); text-transform:uppercase; }
.video-feature .v-caption h3{ font-family:var(--font-head); font-weight:800; font-size:22px; margin-top:6px; }

.video-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.video-thumb{
  position:relative; border-radius:var(--radius-m); overflow:hidden;
  aspect-ratio:16/10; background:linear-gradient(150deg,#1F7A3D,#0B3D24);
  cursor:pointer;
}
.video-thumb .pitch-art{ position:absolute; inset:0; opacity:.3; }
.video-thumb .mini-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.video-thumb .mini-play span{
  width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.2); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px;
  transition:transform .25s, background .25s;
}
.video-thumb:hover .mini-play span{ background:var(--lime-400); color:var(--ink-900); transform:scale(1.1); }
.video-thumb .v-dur{ position:absolute; right:10px; bottom:10px; font-family:var(--font-data); font-size:11px; color:#fff; background:rgba(0,0,0,.5); padding:2px 8px; border-radius:5px; }
.video-thumb .v-title{ position:absolute; left:14px; bottom:12px; right:50px; color:#fff; font-family:var(--font-head); font-weight:700; font-size:13px; }
@media (max-width:780px){ .video-row{ grid-template-columns:1fr; } }

/* ===========================================================
   18. SẢN PHẨM LƯU NIỆM
   =========================================================== */
.shop-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:980px){ .shop-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .shop-grid{ gap:14px; } }
.product-card{
  background:var(--paper); border-radius:var(--radius-m); overflow:hidden;
  border:1px solid var(--line); transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.product-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-card); }
.product-thumb{
  aspect-ratio:1/1; position:relative;
  background:linear-gradient(150deg,var(--chalk-100),var(--chalk-50));
  display:flex; align-items:center; justify-content:center;
}
.product-thumb img{ width:58%; object-fit:contain; filter:drop-shadow(0 10px 14px rgba(11,61,36,.18)); }
.product-thumb .p-badge{
  position:absolute; top:12px; left:12px;
  background:var(--gold-500); color:var(--ink-900);
  font-family:var(--font-data); font-size:10px; font-weight:700; letter-spacing:.04em;
  padding:3px 9px; border-radius:100px; text-transform:uppercase;
}
.product-info{ padding:16px 18px 20px; }
.product-info .pi-cat{ font-size:11px; color:var(--text-500); text-transform:uppercase; letter-spacing:.05em; font-family:var(--font-data); }
.product-info h4{ font-family:var(--font-head); font-weight:700; font-size:14.5px; margin-top:5px; color:var(--ink-900); }
.product-info .pi-price{ margin-top:10px; display:flex; align-items:center; justify-content:space-between; }
.pi-price b{ font-family:var(--font-data); font-size:17px; color:var(--green-700); }
.pi-cart{
  width:36px; height:36px; border-radius:50%; background:var(--chalk-100); color:var(--ink-900);
  display:flex; align-items:center; justify-content:center; font-size:15px;
  transition:background .2s, color .2s;
}
.pi-cart:hover{ background:var(--lime-400); }

/* ===========================================================
   19. NHÀ TÀI TRỢ
   =========================================================== */
.sponsor-tier{ margin-bottom:36px; }
.sponsor-tier:last-child{ margin-bottom:0; }
.sponsor-tier .tier-label{
  font-family:var(--font-data); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-500); margin-bottom:18px; text-align:center;
}
.sponsor-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; }
.sponsor-logo{
  display:flex; align-items:center; justify-content:center;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-m);
  color:var(--text-500); font-family:var(--font-head); font-weight:700;
  transition:border-color .2s, color .2s, transform .2s;
}
.sponsor-tier.gold .sponsor-logo{ width:200px; height:90px; font-size:17px; }
.sponsor-tier.silver .sponsor-logo{ width:160px; height:74px; font-size:14px; }
.sponsor-tier.bronze .sponsor-logo{ width:130px; height:60px; font-size:12px; }
.sponsor-logo:hover{ border-color:var(--green-600); color:var(--green-700); transform:translateY(-3px); }
.sponsor-cta{ text-align:center; margin-top:40px; }
.sponsor-cta p{ font-size:13.5px; color:var(--text-600); margin-bottom:16px; }

/* ===========================================================
   20. FOOTER
   =========================================================== */
footer{
  background:var(--ink-900); color:rgba(255,255,255,.7);
  position:relative; overflow:hidden;
}
footer::before{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 90px);
}
.footer-top{ position:relative; padding:72px 0 48px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.footer-brand .brand{ margin-bottom:16px; }
.footer-brand .brand img{ width:44px; height:44px; }
.footer-brand p{ font-size:13.5px; line-height:1.65; max-width:300px; color:rgba(255,255,255,.6); }
.footer-social{ display:flex; gap:10px; margin-top:20px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; font-size:15px;
  transition:background .2s, transform .2s;
}
.footer-social a:hover{ background:var(--lime-400); color:var(--ink-900); transform:translateY(-3px); }
.footer-col h5{ font-family:var(--font-head); font-weight:700; font-size:13.5px; color:#fff; letter-spacing:.03em; text-transform:uppercase; margin-bottom:18px; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:13.5px; color:rgba(255,255,255,.65); transition:color .2s; }
.footer-col a:hover{ color:var(--lime-300); }
.footer-col .contact-line{ display:flex; gap:10px; font-size:13.5px; color:rgba(255,255,255,.65); align-items:flex-start; }
.footer-col .contact-line span:first-child{ flex:0 0 auto; }
@media (max-width:920px){
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:580px){
  .footer-top{ grid-template-columns:1fr; padding:56px 0 32px; gap:32px; }
}
.footer-bottom{
  position:relative;
  border-top:1px solid rgba(255,255,255,.1);
  padding:22px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-size:12.5px; color:rgba(255,255,255,.5);
}
.footer-bottom .fb-links{ display:flex; gap:18px; flex-wrap:wrap; }
.footer-bottom a:hover{ color:#fff; }

/* ===========================================================
   21. ADMIN SETTINGS PANEL (demo control)
   =========================================================== */
#adminPanel{
  position:fixed; left:18px; bottom:18px; z-index:9500;
  background:var(--paper); border-radius:var(--radius-m); box-shadow:var(--shadow-pop);
  width:280px; max-width:88vw;
  font-family:var(--font-body);
  overflow:hidden;
  transform:translateY(calc(100% + 18px));
  transition:transform .35s var(--ease);
}
#adminPanel.is-open{ transform:translateY(0); }
.admin-head{
  background:var(--ink-900); color:#fff; padding:14px 18px;
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--font-head); font-weight:700; font-size:13px;
}
.admin-head button{ color:rgba(255,255,255,.7); font-size:16px; }
.admin-body{ padding:16px 18px; display:flex; flex-direction:column; gap:14px; }
.admin-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.admin-row span{ font-size:13px; color:var(--text-900); }
.admin-row small{ display:block; font-size:11px; color:var(--text-500); margin-top:2px; }
.switch{ position:relative; width:42px; height:24px; flex:0 0 auto; }
.switch input{ opacity:0; width:0; height:0; }
.switch .slider{ position:absolute; inset:0; background:var(--line); border-radius:100px; transition:.25s; cursor:pointer; }
.switch .slider::before{ content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.25s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.switch input:checked + .slider{ background:var(--green-600); }
.switch input:checked + .slider::before{ transform:translateX(18px); }
#adminToggleBtn{
  position:fixed; left:18px; bottom:18px; z-index:9499;
  width:46px; height:46px; border-radius:50%;
  background:var(--ink-900); color:var(--lime-400);
  display:flex; align-items:center; justify-content:center; font-size:18px;
  box-shadow:0 8px 22px rgba(0,0,0,.25);
}
#adminToggleBtn.is-hidden{ display:none; }


/* ========================================================
   RESULT SLIDE SECTION
   ======================================================== */
.rs-viewport{
  overflow:hidden; width:100%;
  position:relative;
}
.rs-track{
  display:flex; gap:16px;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.rs-card{
  flex:0 0 calc(33.33% - 11px);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px; padding:22px;
  backdrop-filter:blur(4px);
  transition:background .25s, border-color .25s, transform .25s;
}
.rs-card:hover{
  background:rgba(255,255,255,.11);
  border-color:rgba(111,196,74,.3);
  transform:translateY(-3px);
}
@media(max-width:980px){ .rs-card{ flex:0 0 calc(50% - 8px); } }
@media(max-width:600px){ .rs-card{ flex:0 0 calc(100%); } }

.rs-card-top{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.rs-comp{ font-family:var(--font-data); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.rs-date{ font-size:11px; color:rgba(255,255,255,.4); }

.rs-teams{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.rs-team{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  width:80px; text-align:center;
}
.rs-team span{ font-size:11.5px; color:rgba(255,255,255,.75); font-family:var(--font-head); font-weight:600; line-height:1.3; }
.rs-crest{
  width:44px; height:44px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.rs-crest.rs-logo{ background:rgba(255,255,255,.95); padding:4px; }
.rs-crest.rs-logo img{ width:100%; height:100%; object-fit:contain; }
.rs-crest.rs-abbr{
  background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.2);
  font-family:var(--font-data); font-weight:700; font-size:12px; color:rgba(255,255,255,.8);
}

.rs-score-box{
  display:flex; align-items:center; gap:4px;
  flex:0 0 auto;
}
.rs-score{
  font-family:var(--font-display); font-size:34px; line-height:1;
  color:rgba(255,255,255,.9);
  min-width:28px; text-align:center;
}
.rs-score.win{ color:var(--lime-400); }
.rs-score.loss{ color:#FC6060; }
.rs-score.draw{ color:#FFC72C; }
.rs-dash{ font-size:18px; color:rgba(255,255,255,.25); font-weight:300; }

.rs-foot{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:18px; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
}
.rs-tag{
  font-family:var(--font-data); font-size:10.5px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  padding:4px 12px; border-radius:100px;
}
.rs-tag.win{ background:rgba(111,196,74,.2); color:var(--lime-300); border:1px solid rgba(111,196,74,.3); }
.rs-tag.draw{ background:rgba(255,199,44,.15); color:#FFC72C; border:1px solid rgba(255,199,44,.25); }
.rs-tag.loss{ background:rgba(252,96,96,.15); color:#FC6060; border:1px solid rgba(252,96,96,.25); }
.rs-venue{ font-size:11.5px; color:rgba(255,255,255,.4); }

.rs-arrow{
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff;
  border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, border-color .2s, transform .2s;
  cursor:pointer;
}
.rs-arrow:hover{ background:rgba(111,196,74,.25); border-color:var(--lime-400); transform:scale(1.05); }
.rs-arrow:disabled{ opacity:.3; cursor:default; }

#rsDots button{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.25); border:none; cursor:pointer;
  transition:background .3s, width .3s, border-radius .3s;
}
#rsDots button.is-active{
  background:var(--lime-400); width:24px; border-radius:4px;
}

/* ========================================================
   POPUP redesign - background overlay nền gradient SVG sân
   ======================================================== */
.popup-card{
  position:relative;
  width:100%; max-width:420px;
  background:var(--paper);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 32px 80px rgba(0,0,0,.45);
  transform:scale(.92) translateY(16px);
  transition:transform .4s var(--ease);
}
#popupOverlay.is-open .popup-card{ transform:scale(1) translateY(0); }
.popup-close{
  position:absolute; top:14px; right:14px; z-index:10;
  width:34px; height:34px; border-radius:50%;
  background:rgba(0,0,0,.35); backdrop-filter:blur(6px);
  color:#fff; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.2);
  transition:background .2s;
  cursor:pointer;
}
.popup-close:hover{ background:rgba(0,0,0,.6); }


/* ---- TRAINING SECTION ---- */
.training-step{
  display:flex; gap:0; position:relative;
}
.ts-left{
  display:flex; flex-direction:column; align-items:center; gap:0;
  flex:0 0 80px; padding-top:4px;
}
.ts-age{
  font-family:var(--font-data); font-size:11px; font-weight:700;
  color:var(--lime-400); letter-spacing:.06em; white-space:nowrap;
  background:rgba(111,196,74,.12); border:1px solid rgba(111,196,74,.25);
  padding:3px 9px; border-radius:20px; text-align:center;
}
.ts-line{
  width:2px; flex:1; min-height:40px;
  background:rgba(255,255,255,.12);
  margin-top:8px; border-radius:2px;
}
.training-step.is-last .ts-line{ display:none; }
.ts-body{
  padding:0 0 32px 20px;
}
.ts-body h4{
  font-family:var(--font-head); font-weight:700; font-size:15px;
  color:#fff; margin-bottom:5px;
}
.ts-body p{ font-size:13px; color:rgba(255,255,255,.55); line-height:1.6; }

.train-card{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:14px; padding:20px;
  transition:background .25s, border-color .25s, transform .25s;
}
.train-card:hover{
  background:rgba(111,196,74,.1); border-color:rgba(111,196,74,.3);
  transform:translateY(-3px);
}
.train-icon{ font-size:24px; margin-bottom:10px; }
.train-card h4{ font-family:var(--font-head); font-weight:700; font-size:14px; color:#fff; margin-bottom:6px; }
.train-card p{ font-size:12.5px; color:rgba(255,255,255,.55); line-height:1.55; }

/* ---- DEV TIMELINE ---- */
.dev-timeline{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  position:relative;
}
.dev-timeline::before{
  content:""; position:absolute; top:44px; left:10%; right:10%; height:2px;
  background:linear-gradient(90deg,var(--lime-400),var(--green-600));
}
.dev-step{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0 12px;
  position:relative;
}
.dev-num{
  width:48px; height:48px; border-radius:50%;
  background:var(--lime-400); color:var(--ink-900);
  font-family:var(--font-data); font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px; position:relative; z-index:1;
  box-shadow:0 0 0 6px var(--chalk-50), 0 0 0 8px rgba(111,196,74,.2);
}
.dev-body{ display:flex; flex-direction:column; align-items:center; }
.dev-icon{ font-size:24px; margin-bottom:8px; }
.dev-body h4{ font-family:var(--font-head); font-weight:700; font-size:13.5px; color:var(--ink-900); margin-bottom:6px; }
.dev-body p{ font-size:12px; color:var(--text-600); line-height:1.55; }
@media(max-width:900px){
  .dev-timeline{ grid-template-columns:1fr 1fr; gap:24px; }
  .dev-timeline::before{ display:none; }
  .dev-num{ box-shadow:none; }
}
@media(max-width:600px){ .dev-timeline{ grid-template-columns:1fr; } }

/* ---- ACHIEVE CARD ---- */
.achieve-card{
  background:var(--ink-900); border-radius:16px; padding:28px 20px;
  text-align:center;
  transition:transform .25s;
}
.achieve-card:hover{ transform:translateY(-4px); }
.achieve-card b{
  display:block; font-family:var(--font-display); font-size:42px;
  color:var(--lime-400); line-height:1; margin-bottom:10px;
}
.achieve-card span{ font-size:13px; color:rgba(255,255,255,.65); line-height:1.4; }
@media(max-width:780px){ .achieve-card b{ font-size:34px; } }

/* ---- PARTNER ROW ---- */
.partner-row{
  display:flex; gap:16px; align-items:flex-start;
  padding:16px;
  border-radius:12px; border:1px solid var(--line);
  background:var(--chalk-50);
  transition:border-color .2s, background .2s;
}
.partner-row:hover{ border-color:var(--green-600); background:var(--chalk-100); }
.partner-flag{ font-size:28px; flex:0 0 auto; margin-top:2px; }
.partner-row strong{ font-family:var(--font-head); font-weight:700; font-size:14px; color:var(--ink-900); display:block; margin-bottom:4px; }
.partner-row p{ font-size:12.5px; color:var(--text-600); line-height:1.5; margin:0; }

/* ---- COOP HIGHLIGHT ---- */
.coop-highlight{
  background:var(--chalk-50); border:1px solid var(--line);
  border-radius:16px; padding:28px;
  transition:transform .25s, box-shadow .25s;
}
.coop-highlight:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(11,61,36,.1); }
.coop-highlight h4{ font-family:var(--font-head); font-weight:700; font-size:17px; color:var(--ink-900); margin-bottom:8px; }
.coop-highlight p{ font-size:13.5px; color:var(--text-600); line-height:1.6; }

/* ---- RESPONSIVE for training/about grids ---- */
@media(max-width:900px){
  #daotao .container > div,
  #hopta .container > div{ grid-template-columns:1fr !important; gap:40px !important; }
  .achieve-card{ padding:20px 16px; }
  [style*="grid-template-columns:repeat(4,1fr)"]{ grid-template-columns:repeat(2,1fr) !important; }
}
@media(max-width:580px){
  [style*="grid-template-columns:repeat(4,1fr)"]{ grid-template-columns:1fr 1fr !important; }
}




/* ---- COACH CARDS ---- */
.coach-card{
  background:var(--paper); border-radius:18px; overflow:hidden;
  border:1px solid var(--line);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.coach-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); }
.coach-photo{
  position:relative; aspect-ratio:1/1;
  background:linear-gradient(150deg,#1F7A3D,#0B3D24);
  background-size:cover; background-position:top center;
}
.coach-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(11,61,36,.85) 0%, transparent 50%);
}
.coach-badge{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:var(--font-data); font-size:10px; font-weight:700; letter-spacing:.05em;
  background:var(--lime-400); color:var(--ink-900);
  padding:4px 10px; border-radius:100px; text-transform:uppercase;
}
.coach-social{
  position:absolute; bottom:12px; right:12px; z-index:2;
  display:flex; gap:6px;
}
.coach-social a{
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.18); backdrop-filter:blur(4px);
  color:#fff; font-size:12px;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.coach-social a:hover{ background:var(--lime-400); color:var(--ink-900); }
.coach-info{ padding:18px 20px 22px; }
.coach-info .c-name{ font-family:var(--font-head); font-weight:700; font-size:16px; color:var(--ink-900); }
.coach-info .c-role{ font-size:12px; color:var(--green-700); font-weight:600; margin-top:3px; }
.coach-info .c-desc{ font-size:12.5px; color:var(--text-600); margin-top:10px; line-height:1.55; }
.coach-info .c-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
.coach-info .c-tags span{
  font-size:10.5px; background:var(--chalk-100); color:var(--text-600);
  padding:3px 9px; border-radius:100px; border:1px solid var(--line);
}

/* ---- FACILITIES ---- */
.facility-card{
  position:relative; border-radius:18px; overflow:hidden;
  background:linear-gradient(150deg,#1F7A3D,#0B3D24);
  aspect-ratio:4/5;
}
.facility-card .fc-bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.facility-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(8,28,16,.95) 0%, rgba(8,28,16,.3) 55%, transparent 100%);
}
.facility-card .fc-content{
  position:absolute; left:0; right:0; bottom:0; padding:24px;
  color:#fff; z-index:2;
}
.facility-card .fc-tag{
  font-family:var(--font-data); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--lime-300); margin-bottom:8px; display:block;
}
.facility-card h4{ font-family:var(--font-head); font-weight:800; font-size:19px; line-height:1.2; }
.facility-card .fc-meta{ display:flex; gap:14px; margin-top:12px; flex-wrap:wrap; }
.facility-card .fc-meta span{ font-size:11.5px; color:rgba(255,255,255,.75); display:flex; align-items:center; gap:5px; }

/* ---- PRICING TABLE ---- */
.price-card{
  background:var(--paper); border-radius:20px; padding:32px 28px;
  border:1.5px solid var(--line);
  display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  position:relative;
}
.price-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); }
.price-card.is-popular{
  border-color:var(--lime-400);
  box-shadow:0 16px 48px rgba(111,196,74,.18);
}
.price-popular-tag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--lime-400); color:var(--ink-900);
  font-family:var(--font-head); font-weight:700; font-size:11.5px;
  padding:6px 18px; border-radius:100px; white-space:nowrap;
}
.price-card .pc-name{ font-family:var(--font-head); font-weight:700; font-size:18px; color:var(--ink-900); }
.price-card .pc-sub{ font-size:12.5px; color:var(--text-500); margin-top:4px; }
.price-card .pc-amount{ margin-top:20px; display:flex; align-items:baseline; gap:6px; }
.price-card .pc-amount b{ font-family:var(--font-display); font-size:38px; color:var(--ink-900); }
.price-card .pc-amount span{ font-size:13px; color:var(--text-500); }
.price-card .pc-list{ margin-top:24px; display:flex; flex-direction:column; gap:12px; flex:1; }
.price-card .pc-list li{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--text-600); list-style:none; }
.price-card .pc-list li::before{ content:"✓"; color:var(--green-700); font-weight:700; flex:0 0 auto; }
.price-card .btn{ margin-top:26px; width:100%; }

/* ---- SCHEDULE TABLE ---- */
.schedule-row{
  display:grid; grid-template-columns:90px 1fr auto auto 110px;
  align-items:center; gap:16px;
  padding:16px 20px; border-radius:12px;
  background:var(--paper); border:1px solid var(--line);
  transition:border-color .2s, background .2s;
}
.schedule-row:hover{ border-color:var(--green-600); background:var(--chalk-50); }
.schedule-row + .schedule-row{ margin-top:10px; }
.sr-date{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.sr-date b{ font-family:var(--font-display); font-size:22px; color:var(--ink-900); line-height:1; }
.sr-date span{ font-size:10.5px; color:var(--text-500); text-transform:uppercase; letter-spacing:.04em; margin-top:2px; }
.sr-info .sr-comp{ font-size:11px; color:var(--text-500); text-transform:uppercase; letter-spacing:.05em; font-family:var(--font-data); }
.sr-info .sr-match{ font-family:var(--font-head); font-weight:700; font-size:14.5px; color:var(--ink-900); margin-top:3px; }
.sr-info .sr-venue{ font-size:12px; color:var(--text-500); margin-top:2px; }
.sr-time{ font-family:var(--font-data); font-size:14px; color:var(--text-600); white-space:nowrap; }
.sr-status{
  font-size:10.5px; font-weight:700; padding:5px 12px; border-radius:100px;
  text-align:center; white-space:nowrap; letter-spacing:.03em; text-transform:uppercase;
}
.sr-status.upcoming{ background:rgba(111,196,74,.12); color:var(--green-700); }
.sr-status.away{ background:rgba(255,199,44,.15); color:#9A7000; }
@media(max-width:780px){
  .schedule-row{ grid-template-columns:70px 1fr; grid-template-rows:auto auto; gap:10px 14px; }
  .sr-time, .sr-status{ grid-column:2; }
}

/* ---- FAQ ACCORDION ---- */
.faq-item{
  border-bottom:1px solid var(--line);
}
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 4px; cursor:pointer;
  font-family:var(--font-head); font-weight:700; font-size:15px; color:var(--ink-900);
}
.faq-q .faq-plus{
  width:28px; height:28px; border-radius:50%; flex:0 0 auto;
  background:var(--chalk-100); color:var(--ink-900);
  display:flex; align-items:center; justify-content:center; font-size:16px;
  transition:transform .3s var(--ease), background .3s;
}
.faq-item.is-open .faq-q .faq-plus{ background:var(--lime-400); transform:rotate(45deg); }
.faq-a{
  max-height:0; overflow:hidden;
  transition:max-height .35s var(--ease);
}
.faq-a-inner{ padding:0 4px 20px; font-size:13.5px; color:var(--text-600); line-height:1.65; }
.faq-item.is-open .faq-a{ max-height:300px; }

/* ---- CONTACT MAP SECTION ---- */
.contact-map-wrap{
  border-radius:18px; overflow:hidden; border:1px solid var(--line);
  height:380px; position:relative;
  background:linear-gradient(150deg,#E8F5E0,#F7F9F4);
}
.contact-map-pin{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-100%);
  display:flex; flex-direction:column; align-items:center;
}
.contact-map-pin .pin-dot{
  width:46px; height:46px; border-radius:50% 50% 50% 0;
  background:var(--green-700); transform:rotate(-45deg);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(11,61,36,.3);
}
.contact-map-pin .pin-dot span{ transform:rotate(45deg); font-size:18px; }
.contact-info-card{
  background:var(--paper); border-radius:16px; padding:24px;
  border:1px solid var(--line);
}
.contact-info-card + .contact-info-card{ margin-top:14px; }
.contact-info-card h5{ font-family:var(--font-head); font-weight:700; font-size:14px; color:var(--ink-900); margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.contact-info-card p{ font-size:13px; color:var(--text-600); line-height:1.6; }


/* ---- FACILITY SLIDE ---- */
.fc-viewport{ overflow:hidden; width:100%; }
.fc-track{
  display:flex; gap:22px;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.fc-slide{ flex:0 0 calc(33.33% - 15px); }
@media(max-width:980px){ .fc-slide{ flex:0 0 calc(50% - 11px); } }
@media(max-width:600px){ .fc-slide{ flex:0 0 100%; } }

.facility-card{ transition:transform .3s var(--ease); }
.facility-card:hover{ transform:translateY(-5px); }
.facility-card:hover .fc-bg{ transform:scale(1.05); }
.fc-bg{ transition:transform .4s var(--ease); }

.fc-zoom{
  position:absolute; top:14px; right:14px; z-index:3;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.18); backdrop-filter:blur(4px);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:14px; opacity:0; transform:scale(.8);
  transition:opacity .25s, transform .25s, background .2s;
}
.facility-card:hover .fc-zoom{ opacity:1; transform:scale(1); }
.fc-zoom:hover{ background:var(--lime-400); color:var(--ink-900); }

#fcDots button{
  width:8px; height:8px; border-radius:50%;
  background:rgba(11,61,36,.2); border:none; cursor:pointer;
  transition:background .3s, width .3s, border-radius .3s;
}
#fcDots button.is-active{
  background:var(--green-700); width:24px; border-radius:4px;
}

#fcLightbox.is-open{ display:flex !important; }

/* ---- TESTIMONIAL SLIDE ---- */
.tc-viewport{
  overflow:hidden; width:100%;
}
.tc-track{
  display:flex; gap:22px;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.tc-slide{
  flex:0 0 calc(33.33% - 15px);
}
@media(max-width:980px){ .tc-slide{ flex:0 0 calc(50% - 11px); } }
@media(max-width:600px){ .tc-slide{ flex:0 0 100%; } }

/* ---- SQUAD TEAM TABS ---- */
.squad-team-tab{
  display:flex; align-items:center; gap:12px;
  padding:14px 20px; border-radius:14px;
  border:1.5px solid var(--line);
  background:var(--paper);
  cursor:pointer;
  transition:all .25s var(--ease);
  text-align:left;
}
.squad-team-tab:hover{
  border-color:var(--green-600);
  background:var(--chalk-50);
}
.squad-team-tab.is-active{
  background:var(--ink-900);
  border-color:var(--ink-900);
  box-shadow:0 8px 24px rgba(11,61,36,.2);
}
.stt-badge{
  font-family:var(--font-data); font-weight:700; font-size:11px;
  letter-spacing:.06em;
  background:rgba(111,196,74,.12); color:var(--green-700);
  border:1px solid rgba(111,196,74,.25);
  padding:4px 10px; border-radius:8px; white-space:nowrap;
  transition:background .25s, color .25s;
}
.squad-team-tab.is-active .stt-badge{
  background:var(--lime-400); color:var(--ink-900); border-color:transparent;
}
.stt-label{
  font-family:var(--font-head); font-weight:700; font-size:14.5px;
  color:var(--ink-900); display:block;
  transition:color .25s;
}
.squad-team-tab.is-active .stt-label{ color:#fff; }
.stt-sub{
  font-size:11px; color:var(--text-500); display:block; margin-top:2px;
  transition:color .25s;
}
.squad-team-tab.is-active .stt-sub{ color:rgba(255,255,255,.6); }

/* ---- COUNTDOWN GIÂY ---- */
#countdownEls div{
  min-width:52px;
}
#cdSecs{ color:var(--lime-400) !important; }

/* ---- MATCH STARTED STATE ---- */
#matchTicketBtn.match-live{
  background:linear-gradient(135deg,#c0392b,#e74c3c);
  animation:livePulse 2s ease-in-out infinite;
}
@keyframes livePulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(231,76,60,.4); }
  50%{ box-shadow:0 0 0 8px rgba(231,76,60,0); }
}

/* ---- TESTIMONIALS ---- */
.testimonial-card{
  background:var(--paper); border-radius:16px; padding:28px;
  border:1px solid var(--line);
  display:flex; flex-direction:column; gap:16px;
  transition:transform .25s var(--ease), box-shadow .25s;
}
.testimonial-card:hover{ transform:translateY(-5px); box-shadow:0 16px 40px rgba(11,61,36,.1); }
.tc-stars{ color:var(--gold-500); font-size:16px; letter-spacing:2px; }
.tc-text{
  font-size:14px; line-height:1.7; color:var(--text-600);
  font-style:italic; flex:1;
  position:relative;
}
.tc-text::before{
  content:'"';
  font-family:Georgia, serif; font-size:60px; line-height:0;
  position:absolute; top:20px; left:-8px;
  color:var(--lime-400); opacity:.3;
}
.tc-author{
  display:flex; align-items:center; gap:12px;
  padding-top:16px; border-top:1px solid var(--line);
}
.tc-avatar{
  width:42px; height:42px; border-radius:50%; flex:0 0 auto;
  background:var(--chalk-100); color:var(--green-700);
  font-family:var(--font-head); font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.tc-author strong{ font-family:var(--font-head); font-size:13.5px; color:var(--ink-900); display:block; margin-bottom:3px; }
.tc-author span{ font-size:11.5px; color:var(--text-500); }
@media(max-width:900px){
  [style*="grid-template-columns:repeat(3,1fr)"]:has(.testimonial-card){ grid-template-columns:1fr !important; }
}
@media(max-width:780px){
  div:has(>.testimonial-card){ grid-template-columns:1fr !important; }
}

/* ---- GENERAL responsive for new sections ---- */
@media(max-width:900px){
  #daotao .container > div[style*="grid-template-columns:1fr 1fr"],
  #hopta .container > div[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
    gap:40px !important;
  }
}
@media(max-width:640px){
  .cta-section-badges{ flex-direction:column; align-items:center; }
}

/* ---- Popup content bg fix (content area below popup image) ---- */
.popup-bg-content .tag{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-data); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--lime-400); margin-bottom:10px;
}
.popup-bg-content .tag::before{
  content:""; width:18px; height:1.5px; background:var(--lime-400); display:inline-block; flex:0 0 auto;
}

/* ---- Match strip fix (remove old standalone CSS if duplicate) ---- */

/* ---- SPONSOR SLIDER ---- */
.sponsor-slider-wrap{
  overflow:hidden; margin:0 -24px;
  padding:20px 0;
  position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.sponsor-track{
  display:flex; gap:20px; align-items:center;
  width:max-content;
  animation:sponsorScroll 28s linear infinite;
}
.sponsor-track:hover{ animation-play-state:paused; }
.s-logo{
  flex:0 0 auto;
  min-width:160px; height:70px;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-m);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:700; font-size:13px;
  color:var(--text-600); padding:0 22px;
  white-space:nowrap;
  transition:border-color .2s, color .2s, transform .2s;
}
.s-logo:hover{ border-color:var(--green-600); color:var(--green-700); transform:translateY(-2px); }
@keyframes sponsorScroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
.sponsor-cta{ text-align:center; margin-top:36px; }
.sponsor-cta p{ font-size:13.5px; color:var(--text-600); margin-bottom:16px; }

/* ---- GALLERY LIGHTBOX open state ---- */
#galleryLightbox.is-open{ display:flex !important; }
#videoModal.is-open{ display:flex !important; }

/* ---- VIDEO overlay fix ---- */
.video-feature{ cursor:pointer; }
.video-thumb{ cursor:pointer; }

/* ---- SQUAD TAB FILTER ---- */
.player-card.is-hidden{ display:none; }

/* ---- FOOTER FORM inputs placeholder color ---- */
#footerContactForm input::placeholder,
#footerContactForm textarea::placeholder{ color:rgba(255,255,255,.4); }
#footerContactForm input:focus,
#footerContactForm textarea:focus{
  outline:none;
  border-color:rgba(111,196,74,.5) !important;
  background:rgba(255,255,255,.1) !important;
}

/* ---- RAIL redesign dot wrap ---- */
.rail-dot-wrap{ width:20px; height:20px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }

/* ---- FOOTER grid mobile ---- */
@media(max-width:1100px){
  .container.footer-top{ grid-template-columns:1fr 1fr !important; }
}
@media(max-width:580px){
  .container.footer-top{ grid-template-columns:1fr !important; }
}

/* ---- SEARCH OVERLAY ---- */
#searchToggleBtn{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background .2s}
#searchToggleBtn:hover{background:rgba(255,255,255,.2)}
#searchOverlay{position:fixed;inset:0;z-index:9300;background:rgba(8,28,17,.92);backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;padding:100px 24px 40px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
#searchOverlay.is-open{opacity:1;visibility:visible}
.search-close{position:absolute;top:24px;right:24px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.2);cursor:pointer}
.search-box{width:100%;max-width:680px;position:relative}
.search-box input{width:100%;padding:20px 56px 20px 24px;border-radius:100px;border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#fff;font-family:var(--font-body);font-size:18px;transition:border-color .25s}
.search-box input::placeholder{color:rgba(255,255,255,.4)}
.search-box input:focus{outline:none;border-color:var(--lime-400);background:rgba(255,255,255,.1)}
.search-box .search-ico{position:absolute;right:22px;top:50%;transform:translateY(-50%);color:var(--lime-400);pointer-events:none}
.search-results{width:100%;max-width:680px;margin-top:28px;display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow-y:auto}
.search-result-item{display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 18px;cursor:pointer;transition:background .2s,transform .2s;text-decoration:none;color:inherit}
.search-result-item:hover{background:rgba(111,196,74,.12);border-color:rgba(111,196,74,.35);transform:translateX(4px)}
.sr-ico{width:40px;height:40px;border-radius:10px;flex:0 0 auto;background:rgba(111,196,74,.15);color:var(--lime-400);display:flex;align-items:center;justify-content:center;font-size:17px}
.sr-text{flex:1}
.sr-title{font-family:var(--font-head);font-weight:700;font-size:14.5px;color:#fff;display:block}
.sr-cat{font-size:11.5px;color:rgba(255,255,255,.5);display:block;margin-top:2px}
.sr-arrow{color:rgba(255,255,255,.3);font-size:18px;margin-left:auto}
.search-no-result,.search-hint{text-align:center;color:rgba(255,255,255,.5);font-size:14px;padding:30px 0;width:100%;max-width:680px}
.search-quicklinks{width:100%;max-width:680px;margin-top:32px}
.search-quicklinks h6{font-family:var(--font-data);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:14px;text-align:center}
.sq-tags{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.sq-tags button{padding:9px 18px;border-radius:100px;border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.75);font-size:13px;transition:background .2s,border-color .2s;cursor:pointer}
.sq-tags button:hover{background:rgba(111,196,74,.15);border-color:var(--lime-400);color:#fff}

/* ---- PERSON DETAIL MODAL ---- */
.player-card,.coach-card{cursor:pointer}
#personModalOverlay{position:fixed;inset:0;z-index:9400;background:rgba(8,28,17,.78);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
#personModalOverlay.is-open{opacity:1;visibility:visible}
.person-modal{position:relative;width:100%;max-width:780px;max-height:88vh;overflow-y:auto;background:var(--paper);border-radius:24px;box-shadow:var(--shadow-pop);transform:scale(.93) translateY(20px);transition:transform .4s;display:grid;grid-template-columns:300px 1fr;overflow:hidden}
#personModalOverlay.is-open .person-modal{transform:scale(1) translateY(0)}
@media(max-width:680px){.person-modal{grid-template-columns:1fr;max-height:92vh}}
.person-modal-close{position:absolute;top:16px;right:16px;z-index:5;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);color:#fff;font-size:17px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;transition:background .2s}
.person-modal-close:hover{background:rgba(0,0,0,.65)}
.person-modal-photo{position:relative;min-height:280px;background-size:cover;background-position:top center;background-color:var(--ink-900)}
.person-modal-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(11,61,36,.5) 100%)}
.pm-jersey{position:absolute;top:16px;left:16px;z-index:2;font-family:var(--font-display);font-size:34px;color:rgba(255,255,255,.9)}
.pm-postag{position:absolute;top:18px;right:60px;z-index:2;font-family:var(--font-data);font-size:11px;font-weight:600;background:var(--lime-400);color:var(--ink-900);padding:4px 11px;border-radius:100px}
.person-modal-body{padding:32px 32px 36px;overflow-y:auto}
.pm-team-tag{display:inline-block;font-family:var(--font-data);font-size:11px;font-weight:700;color:var(--green-700);background:rgba(111,196,74,.12);border:1px solid rgba(111,196,74,.25);padding:4px 12px;border-radius:100px;margin-bottom:14px}
.person-modal-body h3{font-family:var(--font-head);font-weight:800;font-size:26px;color:var(--ink-900);line-height:1.1}
.pm-role{font-size:14px;color:var(--green-700);font-weight:600;margin-top:6px}
.pm-stats-row{display:flex;gap:24px;margin-top:22px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);flex-wrap:wrap}
.pm-stat b{font-family:var(--font-display);font-size:24px;color:var(--ink-900);display:block;line-height:1}
.pm-stat span{font-size:11px;color:var(--text-500);text-transform:uppercase;letter-spacing:.04em;margin-top:4px;display:block}
.pm-bio{font-size:14px;color:var(--text-600);line-height:1.7;margin-top:20px}
.pm-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.pm-tags span{font-size:11.5px;background:var(--chalk-100);color:var(--text-600);padding:5px 12px;border-radius:100px;border:1px solid var(--line)}
.pm-social{display:flex;gap:10px;margin-top:22px}
.pm-social a{width:38px;height:38px;border-radius:50%;background:var(--chalk-100);color:var(--ink-900);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:background .2s;text-decoration:none}
.pm-social a:hover{background:var(--lime-400)}

/* ---- MISC FIXES ---- */
.player-card.is-hidden{display:none!important}
#fcLightbox.is-open,#videoModal.is-open,#galleryLightbox.is-open{display:flex!important}
.search-quicklinks h6{margin:0 0 14px}

/* ===========================================================
   PAGE BANNER — dùng chung cho các trang con
   =========================================================== */
.page-banner{
  position:relative; overflow:hidden;
  background:linear-gradient(150deg,var(--ink-800) 0%,var(--ink-900) 60%,#081C11 100%);
  padding:150px 0 64px;
}
.page-banner-bg{ position:absolute; inset:0; opacity:.5; pointer-events:none; }
.page-banner-inner{ position:relative; z-index:1; }
.page-breadcrumb{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-size:13px; color:rgba(255,255,255,.55);
  margin-bottom:18px;
}
.page-breadcrumb a{ color:rgba(255,255,255,.75); transition:color .2s; }
.page-breadcrumb a:hover{ color:var(--lime-400); }
.page-breadcrumb .sep{ color:rgba(255,255,255,.3); }
.page-breadcrumb .current{ color:var(--lime-300); font-weight:600; }
.page-banner h1{
  font-family:var(--font-head); font-weight:800; font-size:clamp(32px,5vw,52px);
  color:#fff; margin-top:10px; line-height:1.1; letter-spacing:-.01em;
}
.page-banner-desc{
  font-size:16px; color:rgba(255,255,255,.68); margin-top:16px;
  max-width:640px; line-height:1.65;
}
@media(max-width:640px){ .page-banner{ padding:120px 0 48px; } }

/* ===========================================================
   FULL LIST GRIDS (trang riêng — không giới hạn số lượng)
   =========================================================== */
.full-list-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:14px; margin-bottom:32px;
}
.full-list-count{ font-size:13.5px; color:var(--text-500); }

/* Pagination (tin tức) */
.page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px;
  border:1px solid var(--line); color:var(--text-600);
  font-family:var(--font-data); font-size:13px; margin:0 3px;
  transition:background .2s,border-color .2s,color .2s;
}
.page-numbers:hover{ border-color:var(--green-600); color:var(--green-700); }
.page-numbers.current{ background:var(--ink-900); border-color:var(--ink-900); color:#fff; }
.page-numbers.dots{ border:none; }