/*
Theme Name: WemeSports
Theme URI: https://wemesports.com/
Author: WemeSports
Description: Theme riêng cho Sân Bóng Weme Sports — phong cách CLB chuyên nghiệp, sân bóng dưới đèn đêm. Tối ưu SEO local + Google Maps, mobile-first, nhanh trên 4G.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: wemesports
*/

:root{
  --pitch:#101C15; --pitch-2:#182920; --turf:#1B4527; --turf-line:#2A6238;
  --chalk:#F1F5EE; --chalk-dim:#BFC9BE; --sage:#8B9A8C;
  --flood:#F0C24E; --flood-soft:#F6D98A;
  --hair:rgba(241,245,238,.16); --hair-2:rgba(241,245,238,.09);
  --maxw:1160px;
  --disp:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI","SF Pro Text","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--pitch);color:var(--chalk);font-family:var(--body);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;letter-spacing:.1px}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--disp);font-weight:800;font-stretch:condensed;
  text-transform:uppercase;line-height:.98;text-wrap:balance;margin:0;letter-spacing:.2px}
.eyebrow{font-family:var(--disp);font-weight:700;font-stretch:condensed;text-transform:uppercase;
  letter-spacing:.28em;font-size:13px;color:var(--flood)}
.fill{color:var(--flood)}
.tnum{font-variant-numeric:tabular-nums}
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--disp);font-weight:700;
  font-stretch:condensed;text-transform:uppercase;letter-spacing:.06em;font-size:16px;
  padding:15px 26px;border-radius:4px;border:1px solid transparent;cursor:pointer;transition:.18s ease}
.btn-primary{background:var(--flood);color:#20160A}
.btn-primary:hover{background:var(--flood-soft);box-shadow:0 8px 34px rgba(240,194,78,.32);transform:translateY(-1px)}
.btn-ghost{background:rgba(241,245,238,.05);color:var(--chalk);border-color:var(--hair)}
.btn-ghost:hover{border-color:var(--chalk);background:rgba(241,245,238,.10)}
header.site{position:sticky;top:0;z-index:50;background:rgba(16,28,21,.86);
  backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--hair-2)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:800;
  font-stretch:condensed;text-transform:uppercase;letter-spacing:.14em;font-size:20px;color:var(--chalk)}
.brand img{height:34px;width:auto}
.crest{width:30px;height:30px;border:2px solid var(--flood);border-radius:50%;position:relative;flex:0 0 auto}
.crest::before{content:"";position:absolute;inset:6px;border:1px solid var(--flood);border-radius:50%}
.crest::after{content:"";position:absolute;left:50%;top:2px;bottom:2px;width:1px;background:var(--flood);transform:translateX(-.5px)}
.navlinks{display:flex;gap:26px;align-items:center}
.navlinks a{font-family:var(--disp);font-weight:600;font-stretch:condensed;text-transform:uppercase;
  letter-spacing:.08em;font-size:14.5px;color:var(--chalk-dim);transition:.15s}
.navlinks a:hover{color:var(--flood)}
.navlinks ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
@media(max-width:860px){.navlinks{display:none}}
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--hair-2);background:#0C160F}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;z-index:0}
.pitch-bg{position:absolute;inset:0;z-index:1;background:
  radial-gradient(120% 90% at 85% -10%, rgba(240,194,78,.18), transparent 52%),
  linear-gradient(90deg, rgba(9,16,11,.97) 0%, rgba(9,16,11,.92) 40%, rgba(9,16,11,.62) 70%, rgba(9,16,11,.3) 100%),
  linear-gradient(0deg, rgba(9,16,11,.8), transparent 55%)}
.hero .hero-inner{opacity:1;transform:none}
.hero h1{text-shadow:0 2px 30px rgba(0,0,0,.6)}
.hero .eyebrow,.hero .lead,.hero .trust{text-shadow:0 1px 14px rgba(0,0,0,.55)}
.pitch-lines{position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:1}
.pitch-lines .circle{position:absolute;right:-90px;top:50%;transform:translateY(-50%);
  width:420px;height:420px;border:1.5px solid rgba(241,245,238,.14);border-radius:50%}
.pitch-lines .spot{position:absolute;right:110px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;background:rgba(241,245,238,.3);border-radius:50%}
.pitch-lines .mid{position:absolute;right:120px;top:0;bottom:0;width:1.5px;background:rgba(241,245,238,.1)}
.hero-inner{position:relative;z-index:2;padding:92px 0 78px;display:grid;gap:26px;max-width:820px}
h1{font-size:clamp(44px,8.2vw,104px)}
.hero p.lead{font-size:clamp(17px,2.2vw,21px);color:#DCE4DA;max-width:60ch;margin:0}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.trust{display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin-top:20px;
  padding-top:22px;border-top:1px solid var(--hair);color:#DCE4DA;font-size:14.5px}
.trust b{color:var(--chalk)}
.stars{color:var(--flood);letter-spacing:2px}
.board{background:var(--turf);border-top:1px solid var(--turf-line);border-bottom:1px solid var(--turf-line)}
.board .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:26px 18px;text-align:center;border-left:1px solid rgba(241,245,238,.12)}
.stat:first-child{border-left:0}
.stat .n{font-family:var(--disp);font-weight:800;font-stretch:condensed;font-size:40px;color:var(--flood);line-height:1;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.stat .l{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#E4EBE1;margin-top:8px}
@media(max-width:640px){.board .wrap{grid-template-columns:repeat(2,1fr)}.stat:nth-child(odd){border-left:0}}
section.blk{padding:84px 0}
.sec-head{display:flex;flex-direction:column;gap:12px;margin-bottom:44px;max-width:720px}
h2{font-size:clamp(30px,4.6vw,52px)}
.sec-head p{color:var(--chalk-dim);margin:0;font-size:17px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair-2);
  border:1px solid var(--hair-2);border-radius:8px;overflow:hidden}
@media(max-width:820px){.grid3{grid-template-columns:1fr}}
.cell{background:var(--pitch-2);padding:30px 26px;display:flex;flex-direction:column;gap:10px;min-height:172px;transition:.18s}
.cell:hover{background:#1E3227}
.cell .ico{width:34px;height:34px;color:var(--flood)}
.cell h3{font-size:22px;letter-spacing:.4px}
.cell p{margin:0;color:var(--chalk-dim);font-size:15.5px;line-height:1.55}
.price-card{border:1px solid var(--hair);border-radius:10px;overflow:hidden;background:var(--pitch-2)}
.tabs{display:flex;border-bottom:1px solid var(--hair)}
.tab{flex:1;padding:16px;text-align:center;font-family:var(--disp);font-weight:700;font-stretch:condensed;
  text-transform:uppercase;letter-spacing:.08em;font-size:16px;color:var(--chalk-dim);cursor:pointer;
  background:transparent;border:0;border-bottom:2px solid transparent;transition:.15s}
.tab.active{color:#20160A;background:var(--flood);border-color:var(--flood)}
.ptable{width:100%;border-collapse:collapse}
.ptable th,.ptable td{padding:15px 24px;text-align:left;border-bottom:1px solid var(--hair-2);font-size:15.5px}
.ptable th{font-family:var(--disp);font-stretch:condensed;text-transform:uppercase;letter-spacing:.1em;
  font-size:13px;color:var(--sage);font-weight:700}
.ptable td:last-child,.ptable th:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ptable tr.gold td{color:var(--flood-soft)}
.ptable .price{font-family:var(--disp);font-stretch:condensed;font-weight:700;font-size:20px;color:var(--flood)}
.price-body{display:none}.price-body.active{display:block}
.pnote{padding:16px 24px;color:var(--sage);font-size:13.5px;border-top:1px solid var(--hair-2)}
.fill-tag{display:inline-block;background:rgba(240,194,78,.16);color:var(--flood);
  border:1px dashed rgba(240,194,78,.5);border-radius:4px;padding:1px 8px;font-size:13px}
.rain{background:linear-gradient(120deg,var(--turf),#12301D);border:1px solid var(--turf-line);
  border-radius:12px;padding:38px 34px;display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start}
@media(max-width:640px){.rain{grid-template-columns:1fr;padding:28px 22px}}
.rain .badge{width:56px;height:56px;color:var(--flood)}
.rain h3{font-size:26px;margin-bottom:10px}
.rain p{margin:0;color:#DCE4DA}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.chip{border:1px solid var(--hair);border-radius:999px;padding:11px 18px;font-size:14.5px;color:var(--chalk-dim);background:rgba(241,245,238,.03)}
.chip b{color:var(--flood);font-variant-numeric:tabular-nums}
.mapbox{border:1px solid var(--hair);border-radius:12px;overflow:hidden;min-height:320px;background:var(--pitch-2)}
.mapbox iframe{width:100%;height:360px;border:0;display:block}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:820px){.gal{grid-template-columns:repeat(2,1fr)}}
.shot{aspect-ratio:4/3;border:1px solid var(--hair-2);border-radius:8px;overflow:hidden;background:#16231B;position:relative}
.shot img{width:100%;height:100%;object-fit:cover;transition:.4s}
.shot:hover img{transform:scale(1.06)}
.rev{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;
  border:1px solid var(--hair);border-radius:12px;padding:34px;background:var(--pitch-2)}
@media(max-width:640px){.rev{grid-template-columns:1fr;text-align:center}}
.rev .big{font-family:var(--disp);font-stretch:condensed;font-weight:800;font-size:74px;color:var(--flood);line-height:.9}
.rev .stars-lg{font-size:22px;color:var(--flood);letter-spacing:3px}
.faq{border-top:1px solid var(--hair)}
details{border-bottom:1px solid var(--hair)}
summary{list-style:none;cursor:pointer;padding:22px 4px;display:flex;justify-content:space-between;gap:20px;
  align-items:center;font-family:var(--disp);font-stretch:condensed;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;font-size:19px}
summary::-webkit-details-marker{display:none}
summary .pm{color:var(--flood);font-size:26px;font-family:var(--body);transition:.2s;flex:0 0 auto}
details[open] summary .pm{transform:rotate(45deg)}
details .ans{padding:0 4px 24px;color:var(--chalk-dim);max-width:80ch}
footer.site{background:#0A140D;border-top:1px solid var(--hair);padding:64px 0 30px;margin-top:20px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
@media(max-width:820px){.fgrid{grid-template-columns:1fr;gap:30px}}
.nap{font-style:normal;color:var(--chalk-dim);line-height:1.9}
.nap b{color:var(--chalk);display:block;font-family:var(--disp);font-stretch:condensed;text-transform:uppercase;
  letter-spacing:.1em;font-size:18px;margin-bottom:10px}
.frow{display:flex;gap:9px;align-items:flex-start;margin-top:4px}
.frow svg{width:17px;height:17px;color:var(--flood);flex:0 0 auto;margin-top:4px}
.fhead{font-family:var(--disp);font-stretch:condensed;text-transform:uppercase;letter-spacing:.14em;
  font-size:13px;color:var(--sage);margin-bottom:16px}
.fcol a{display:block;color:var(--chalk-dim);padding:6px 0;font-size:15px}
.fcol a:hover{color:var(--flood)}
.copy{border-top:1px solid var(--hair-2);margin-top:44px;padding-top:22px;color:var(--sage);font-size:13px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.page-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--hair-2);padding:76px 0 54px;background:#0C160F}
.page-hero .pitch-bg{background:radial-gradient(120% 90% at 82% -10%, rgba(240,194,78,.16), transparent 55%),linear-gradient(180deg,#12211A,#0C160F)}
.page-hero .wrap{position:relative;z-index:2}
.page-body{padding:56px 0 40px}
.page-body .wrap{max-width:820px}
.page-body h2{font-size:clamp(26px,4vw,40px);margin:38px 0 16px}
.page-body h3{font-size:22px;margin:26px 0 10px}
.page-body p,.page-body li{color:var(--chalk-dim);font-size:16.5px}
.page-body ul{padding-left:20px}
.page-body a{color:var(--flood);text-decoration:underline;text-underline-offset:3px}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
:focus-visible{outline:2px solid var(--flood);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:12px;z-index:100;background:var(--flood);color:#000;padding:10px 16px;border-radius:4px}
/* Giải đã tổ chức */
.tour-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0}
@media(max-width:700px){.tour-grid{grid-template-columns:repeat(2,1fr)}}
.tour-card{border:1px solid var(--hair-2);border-radius:10px;overflow:hidden;background:var(--pitch-2)}
.tour-card .ph{aspect-ratio:4/3;overflow:hidden;background:#16231b}
.tour-card .ph img{width:100%;height:100%;object-fit:cover;display:block}
.tour-card .cap{padding:12px 14px;font-size:14px;color:var(--chalk-dim)}
.tour-card .cap b{display:block;color:var(--chalk);font-family:var(--disp);font-stretch:condensed;text-transform:uppercase;letter-spacing:.03em;font-size:15px;margin-bottom:3px}
/* Dải uy tín trang chủ */
.cred{background:var(--pitch-2);border-top:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2)}
.cred .wrap{padding:26px 24px;display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:center;text-align:center}
.cred .txt{color:var(--chalk-dim);font-size:15.5px;max-width:640px}
.cred .txt b{color:var(--flood)}
.cred .thumbs{display:flex;gap:8px}
.cred .thumbs img{width:74px;height:56px;object-fit:cover;border-radius:6px;border:1px solid var(--hair-2)}
@media(max-width:600px){.cred .thumbs{display:none}}
/* ===== v2 sections: b2b + portfolio video + academy ===== */
.b2b{background:linear-gradient(120deg,#12301D,#0E2214);border-top:1px solid var(--turf-line);border-bottom:1px solid var(--turf-line)}
.b2b-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.b2b-grid h2{margin-top:12px}
.b2b .benefits{list-style:none;padding:0;margin:22px 0 24px;display:grid;gap:12px}
.b2b .benefits li{position:relative;padding-left:32px;color:var(--chalk)}
.b2b .benefits li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:rgba(240,194,78,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0C24E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}
.b2b-card{background:rgba(9,16,11,.4);border:1px solid var(--hair);border-radius:14px;padding:30px}
.b2b-card .k{font-family:var(--disp);font-stretch:condensed;font-weight:800;font-size:52px;color:var(--flood);line-height:1}
.b2b-card .kl{color:var(--chalk-dim);font-size:14px;margin-bottom:20px}
.b2b-card .fhead{font-family:var(--disp);font-stretch:condensed;text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--sage);margin-bottom:14px}
.partner-row{display:flex;flex-wrap:wrap;gap:10px}
.partner{border:1px dashed var(--hair);border-radius:8px;padding:12px 16px;font-size:13px;color:var(--sage);background:rgba(241,245,238,.02)}
.editnote{color:var(--sage);font-size:13px;margin-top:14px}
.editnote b,.tag2{display:inline-block;background:rgba(240,194,78,.14);color:var(--flood);border:1px dashed rgba(240,194,78,.5);border-radius:4px;padding:1px 8px;font-size:13px}
.video-wrap{margin-top:18px;border:1px solid var(--hair);border-radius:14px;overflow:hidden;position:relative;background:#0d1610}
.video-wrap.ph16{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;text-align:center;padding:20px}
.video-wrap iframe{width:100%;aspect-ratio:16/9;display:block;border:0}
.video-wrap .play{width:74px;height:74px;border-radius:50%;background:var(--flood);display:flex;align-items:center;justify-content:center}
.video-wrap .play::before{content:"";border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent #20160A;margin-left:5px}
.video-wrap .vt{color:var(--sage);font-size:14px;max-width:44ch}
.aca{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.aca-card{border:1px solid var(--hair);border-radius:14px;overflow:hidden;background:var(--pitch-2)}
.aca-card .ph{aspect-ratio:16/9;overflow:hidden;background:#16231b}
.aca-card .ph img{width:100%;height:100%;object-fit:cover}
.aca-card .bd{padding:24px 26px}
.aca-card .tag{display:inline-block;background:rgba(240,194,78,.16);color:var(--flood);font-family:var(--disp);font-stretch:condensed;text-transform:uppercase;letter-spacing:.1em;font-size:12px;padding:4px 12px;border-radius:999px;margin-bottom:12px}
.aca-card h3{font-size:24px;margin-bottom:10px}
.aca-card ul{margin:12px 0 0;padding-left:18px;color:var(--chalk-dim);font-size:15px}
.aca-card li{margin:5px 0}
.aca-fee{margin-top:14px;font-size:15px;color:var(--chalk)}
.aca-fee b{color:var(--flood)}
@media(max-width:860px){.b2b-grid{grid-template-columns:1fr;gap:32px}}
@media(max-width:760px){.aca{grid-template-columns:1fr}}


/* ===== SEO/AEO: khối trả lời nhanh + bảng dữ kiện (đầu trang con) =====
   Dùng đúng bảng màu tối của giao diện: nền sân, chữ phấn, viền vàng đèn. */
.tra-loi-nhanh{font-size:1.02rem;line-height:1.7;font-weight:500;color:var(--chalk);background:var(--pitch-2);border-left:4px solid var(--flood);border-radius:0 12px 12px 0;padding:16px 18px;margin:0 0 22px}
.bang-du-kien{width:100%;border-collapse:collapse;margin:0 0 28px;font-size:.95rem;border:1px solid var(--hair);border-radius:12px;overflow:hidden;background:var(--pitch-2)}
.bang-du-kien caption{caption-side:top;text-align:left;font-weight:800;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--flood);padding:0 0 10px}
.bang-du-kien th,.bang-du-kien td{padding:11px 16px;border-bottom:1px solid var(--hair-2);text-align:left;vertical-align:top}
.bang-du-kien th{width:38%;font-weight:700;color:var(--sage);background:rgba(241,245,238,.03);white-space:nowrap}
.bang-du-kien td{color:var(--chalk)}
.bang-du-kien tr:last-child th,.bang-du-kien tr:last-child td{border-bottom:0}
@media(max-width:560px){.bang-du-kien th,.bang-du-kien td{display:block;width:auto;white-space:normal}.bang-du-kien th{border-bottom:0;padding-bottom:2px;background:none}.bang-du-kien td{padding-top:0}}

/* Hỏi đáp riêng của từng trang con — gập mở, hợp giao diện tối. */
.hoi-dap-trang{margin:0 0 28px;border:1px solid var(--hair);border-radius:12px;overflow:hidden;background:var(--pitch-2)}
.hd-muc{border-bottom:1px solid var(--hair-2)}
.hd-muc:last-child{border-bottom:0}
.hd-muc summary{cursor:pointer;padding:13px 16px;font-weight:700;color:var(--chalk);list-style:none;position:relative;padding-right:42px}
.hd-muc summary::-webkit-details-marker{display:none}
.hd-muc summary::after{content:'+';position:absolute;right:16px;top:11px;font-size:1.25rem;font-weight:800;color:var(--flood);line-height:1}
.hd-muc[open] summary::after{content:'–'}
.hd-muc summary:hover{background:rgba(241,245,238,.04)}
.hd-muc p{margin:0;padding:0 16px 14px;color:var(--chalk-dim);line-height:1.65}

/* Lịch sân trống hôm nay — lưới và MÀU giống hệt app đặt sân. */
.lich-trong{border:1px solid var(--flood);border-radius:14px;background:var(--pitch-2);padding:14px 16px;margin:0 0 24px}
.lt-dau{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.lt-dau b{color:var(--flood);font-size:.95rem;letter-spacing:.02em;text-transform:uppercase}
.lt-nhip{font-size:.72rem;color:var(--sage)}
.lt-than{overflow-x:auto}
.lt-luoi{width:100%;border-collapse:separate;border-spacing:4px;table-layout:fixed;min-width:340px}
.lt-luoi th{font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--sage);padding:2px 0;text-align:center}
.lt-luoi .lt-c-gio{width:52px;text-align:left;color:var(--chalk);font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.lt-luoi .lt-nhom{color:var(--flood);background:rgba(240,194,78,.09);border-radius:8px 8px 0 0;font-size:.66rem}
.lt-luoi th.lt-c7{background:rgba(240,194,78,.05)}   /* chỉ tô nền nhóm ở HÀNG TIÊU ĐỀ — tô cả ô sẽ đè mất màu loại trận */
.lt-luoi td{padding:9px 2px;text-align:center;font-size:.7rem;font-weight:700;border-radius:9px;line-height:1.15}
.lt-trong{color:#7fe3a3;border:1px dashed rgba(34,197,94,.5);background:rgba(34,197,94,.06)}
.lt-tu{color:#0b1f12;background:linear-gradient(180deg,#22c55e,#15803d);border:1px solid rgba(34,197,94,.5)}
.lt-cap{color:#04121e;background:linear-gradient(180deg,#38bdf8,#0369a1);border:1px solid rgba(56,189,248,.5)}
.lt-codinh{color:#1a0e00;background:linear-gradient(180deg,#fb923c,#c2410c);border:1px solid rgba(251,146,60,.5)}
.lt-xong{color:var(--sage);background:rgba(241,245,238,.07);border:1px solid var(--hair-2)}
.lt-o7{font-size:.68rem}
.lt-het-ngay{color:var(--sage);font-size:.88rem;padding:6px 0}
.lt-chu{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:10px;font-size:.7rem;color:var(--sage)}
.lt-ky{width:11px;height:11px;border-radius:3px;display:inline-block;margin-left:9px}
.lt-chu .lt-ky:first-child{margin-left:0}
.lt-k-trong{border:1px dashed rgba(34,197,94,.6);background:rgba(34,197,94,.1)}
.lt-k-tu{background:#22c55e}.lt-k-cap{background:#38bdf8}.lt-k-codinh{background:#fb923c}
.lt-k-xong{background:rgba(241,245,238,.12);border:1px solid var(--hair-2)}
.lt-nut-hang{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.lt-nut{display:inline-block;font-weight:800;font-size:.84rem;color:var(--pitch);background:var(--flood);border-radius:999px;padding:9px 17px;text-decoration:none}
.lt-nut:hover{background:var(--flood-soft)}
.lt-nut-phu{background:transparent;color:var(--flood);border:1px solid var(--flood)}
.lt-nut-phu:hover{background:rgba(240,194,78,.12)}
.lt-cach-cai{margin-top:10px;font-size:.74rem;line-height:1.6;color:var(--sage)}
.lt-cach-cai b{color:var(--chalk-dim)}
.lt-buoc{display:block}
@media(max-width:430px){.lt-luoi{min-width:0;border-spacing:3px}.lt-luoi td{font-size:.56rem;padding:8px 0}.lt-luoi th{font-size:.56rem}.lt-luoi .lt-c-gio{width:36px;font-size:.62rem}.lich-trong{padding:12px 10px}.lt-nut{font-size:.78rem;padding:8px 14px}}

/* ===== Khối liên kết nội bộ (trang chủ + trang con) ===== */
.wms-lien-ket{margin:32px 0 8px;padding:20px;border:1px solid #e2e8f0;border-radius:16px;background:#f8fafc}
.wms-lien-ket h2{margin:0 0 14px;font-size:1.05rem;font-weight:800;color:#0f172a;letter-spacing:-.01em}
.wms-lien-ket h3{margin:0 0 6px;font-size:.72rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#16a34a}
.wms-lien-ket ul{margin:0;padding:0;list-style:none}
.wms-lien-ket li{margin:0 0 6px}
.wms-lien-ket a{color:#0f172a;text-decoration:none;font-size:.95rem;line-height:1.5;
  border-bottom:1px solid #cbd5e1;padding-bottom:1px}
.wms-lien-ket a:hover{color:#16a34a;border-bottom-color:#16a34a}
.wms-lk-luoi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px}
.wms-lk-con{background:#f0fdf4;border-color:#bbf7d0}
@media(max-width:640px){.wms-lk-luoi{grid-template-columns:1fr;gap:16px}}

/* ===== Trận đã đá tại sân (video do các đội quay) ===== */
.wms-video{margin:32px 0}
.wms-video h2{margin:0 0 6px;font-size:1.15rem;font-weight:800;color:#0f172a}
.wms-video-mo-ta{margin:0 0 16px;color:#475569;font-size:.95rem;line-height:1.6}
.wms-video-luoi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.wms-video-o{margin:0}
.wms-video-khung{position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden;background:#0f172a}
.wms-video-khung iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.wms-video-o figcaption{margin-top:8px;font-size:.88rem;font-weight:700;color:#0f172a;line-height:1.4}
.wms-video-kenh{display:block;margin-top:2px;font-size:.75rem;font-weight:600;color:#64748b}
.wms-video-cta{margin:18px 0 0;font-size:.95rem;color:#334155}
.wms-video-cta a{color:#16a34a;font-weight:700}
@media(max-width:900px){.wms-video-luoi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.wms-video-luoi{grid-template-columns:1fr}}

/* ===== Dãy nút kênh liên hệ cố định bên phải ===== */
.wms-cot-nut{
  position:fixed;right:12px;top:50%;transform:translateY(-50%);
  z-index:9990;display:flex;flex-direction:column;gap:10px;
}
.wms-nut{
  display:flex;align-items:center;justify-content:flex-end;
  height:46px;width:46px;padding:0;overflow:hidden;
  border-radius:23px;background:var(--mau);color:#fff;text-decoration:none;
  box-shadow:0 6px 18px -6px rgba(15,23,42,.45);
  transition:width .22s ease;white-space:nowrap;
}
.wms-nut-bt{
  width:46px;height:46px;flex:0 0 46px;
  display:flex;align-items:center;justify-content:center;
}
.wms-nut-bt svg{width:22px;height:22px;display:block}
/* PHẢI THU VỀ 0 CHIỀU RỘNG, KHÔNG CHỈ LÀM MỜ.
   Lỗi bản trước: nhãn chỉ đặt opacity:0 nên VẪN CHIẾM CHỖ trong hàng flex.
   Nút rộng 46px + căn phải + overflow:hidden ⇒ nhãn ẩn đẩy biểu tượng văng
   sang trái 97px, ra ngoài khung rồi bị cắt. Nhìn ra thì nút chỉ còn cái tròn
   màu trơn, mà kiểu dáng tính ra vẫn "trắng, hiện, đúng cỡ" nên rất dễ tưởng
   là lỗi phông chữ. */
.wms-nut-chu{
  font-size:13px;font-weight:700;opacity:0;
  max-width:0;overflow:hidden;padding-right:0;
  transition:opacity .18s ease,max-width .22s ease,padding .22s ease;
}
/* Rê chuột -> trượt ra chữ. Chỉ làm trên thiết bị CÓ chuột thật: trên cảm ứng
   trạng thái hover bị kẹt lại sau khi chạm, nút sẽ nở ra rồi không thu lại. */
@media (hover:hover) and (pointer:fine){
  .wms-nut:hover{width:auto}
  .wms-nut:hover .wms-nut-chu{opacity:1;max-width:220px;padding-right:16px}
}
.wms-nut:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media(max-width:768px){
  .wms-cot-nut{right:8px;gap:8px}
  .wms-nut,.wms-nut-bt{height:40px;width:40px;flex-basis:40px}
  .wms-nut-bt svg{width:19px;height:19px}
  .wms-nut{border-radius:20px}
  .wms-nut-bt{font-size:17px}
}
/* Màn rất thấp (điện thoại nằm ngang): dãy nút dễ che nội dung -> ẩn bớt. */
@media(max-height:420px){ .wms-cot-nut{display:none} }


/* ==========================================================================
   GIAO DIỆN SÁNG — khối lật màu, nối ở CUỐI style.css (04/09/2026)
   Bản cũ là nền sân đêm: nền #101C15, chữ phấn, điểm nhấn vàng đèn. Nhìn
   sang nhưng nặng, và mọi thứ đều VIẾT HOA nên trang lúc nào cũng như đang
   hét. Khối này lật sang nền trắng, chữ đậm, một màu nhấn duy nhất.

   VÌ SAO CHỈ CẦN NỐI THÊM, KHÔNG SỬA BẢN CŨ:
   theme khai màu qua biến (--pitch, --chalk, --flood...) và gần như mọi luật
   đều dùng biến. Định nghĩa lại :root ở cuối file là toàn bộ giao diện đổi
   theo, phần còn lại chỉ vá vài chỗ trót ghi mã màu cứng. Muốn quay về bản
   tối thì xoá đúng khối này, không mất gì.

   ĐỔI MÀU NHẤN VÀNG → XANH: vàng #F0C24E nằm trên nền tối thì rõ, đặt lên
   nền trắng thì chữ vàng gần như không đọc được (tỉ lệ tương phản ~1.7:1,
   chuẩn tối thiểu là 4.5:1). Nên --flood thành xanh sân cỏ, còn vàng giữ
   lại đúng một chỗ đắt giá nhất: nút bấm chính, chữ đen trên nền vàng.

   SỬA LUÔN MỘT LỖI ĐANG SỐNG: .wms-video h2 và .wms-lien-ket là khối nền
   sáng chữ #0f172a, trước nay nằm trên nền tối nên chữ đen trên nền đen,
   gần như vô hình. Nền sáng làm chúng đúng ngay.
   ========================================================================== */

:root{
  --pitch:#FFFFFF;          /* nền trang */
  --pitch-2:#F6F8F5;        /* nền thẻ, bảng */
  --turf:#EDF5EF;           /* dải số liệu */
  --turf-line:#D3E4D8;
  --chalk:#16231B;          /* chữ chính */
  --chalk-dim:#55635A;      /* chữ phụ */
  --sage:#5F6D64;           /* chữ mờ — #7C8A80 chỉ đạt 3.39:1 trên nền trắng, dưới chuẩn 4.5 */
  --flood:#157F3C;          /* màu nhấn: xanh sân cỏ */
  --flood-soft:#1B9648;
  --vang:#F0C24E;           /* vàng thương hiệu, chỉ dùng cho nút chính */
  --vang-dam:#F6D98A;
  --hair:rgba(22,35,27,.15);
  --hair-2:rgba(22,35,27,.08);
}

/* ---- Bớt hét: chỉ h1 và nhãn nhỏ còn viết hoa ---- */
h2,h3{text-transform:none;font-weight:700;line-height:1.15;letter-spacing:-.2px}
summary{text-transform:none;letter-spacing:0;font-weight:700}
.nap b,.tour-card .cap b{text-transform:none;letter-spacing:0}
h1{font-size:clamp(40px,7vw,88px);letter-spacing:-.5px}
section.blk{padding:64px 0}
.sec-head{margin-bottom:34px}

body{background:var(--pitch);color:var(--chalk)}

/* ---- Nút ---- */
.btn-primary{background:var(--vang);color:#20160A}
.btn-primary:hover{background:var(--vang-dam);box-shadow:0 6px 20px rgba(22,35,27,.14)}
.btn-ghost{background:#fff;color:var(--chalk);border-color:var(--hair)}
.btn-ghost:hover{background:#F1F5F2;border-color:var(--chalk)}

/* ---- Thanh điều hướng ---- */
header.site{background:rgba(255,255,255,.88);border-bottom:1px solid var(--hair-2)}
.brand{letter-spacing:.08em}

/* ---- Hero: ảnh mờ hẳn đi, chữ đen, nền trắng ngả xanh ---- */
.hero,.page-hero{background:#F4F8F5;border-bottom:1px solid var(--hair-2)}
.hero-photo{opacity:.16}
.pitch-bg{background:
  linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 45%, rgba(255,255,255,.62) 100%)}
.page-hero .pitch-bg{background:linear-gradient(180deg,#FFFFFF,#F1F6F2)}
.hero h1,.hero .eyebrow,.hero .lead,.hero .trust{text-shadow:none}
.hero p.lead{color:var(--chalk-dim)}
/* LỖI CÓ SẴN, không phải do đổi màu: thẻ này mang cả hai lớp .wrap và
   .hero-inner. Hai luật cùng hạng 0-1-0, mà .hero-inner{padding:92px 0 78px}
   nằm sau .wrap{padding:0 24px} nên viết tắt padding xoá luôn 24px hai bên.
   Trên điện thoại chữ hero dán sát mép màn, dòng nhãn trên cùng bị cắt cụt.
   Ghi rõ đệm ngang là hết. */
.hero-inner{padding:74px 24px 62px}
/* Dãy nút kênh nổi bên phải đè lên chữ hero ở màn hẹp — chừa chỗ cho nó */
@media(max-width:768px){ .hero-inner{padding-right:62px} }
.trust{color:var(--chalk-dim);border-top:1px solid var(--hair)}
.trust b{color:var(--chalk)}
.stars,.rev .stars-lg{color:#9C6A08}   /* vàng nhạt hơn chỉ đạt ~2.2:1 trên nền trắng */
/* Vạch sân trang trí: trước là vạch trắng trên nền tối, giờ phải là vạch tối */
.pitch-lines{opacity:.5}
.pitch-lines .circle{border-color:rgba(22,35,27,.10)}
.pitch-lines .spot{background:rgba(22,35,27,.22)}
.pitch-lines .mid{background:rgba(22,35,27,.08)}

/* ---- Dải số liệu ---- */
.board{background:var(--turf)}
.stat{border-left:1px solid var(--turf-line)}
.stat .n{color:var(--flood);text-shadow:none}
.stat .l{color:var(--chalk-dim)}

/* ---- Thẻ, bảng giá, hộp ---- */
.cell:hover{background:#EEF3EF}
.tab.active{background:var(--flood);color:#fff;border-color:var(--flood)}
.ptable .price{color:var(--flood)}
.ptable tr.gold td{color:var(--chalk)}
.ptable tr.gold .price{color:#8A5F06}
.fill-tag,.tag2,.editnote b,.aca-card .tag{
  background:rgba(21,127,60,.10);color:var(--flood);border-color:rgba(21,127,60,.35)}
.chip{background:#fff}
.chip b{color:var(--flood)}
.rain{background:#EDF5EF;border:1px solid var(--turf-line)}
.rain p{color:var(--chalk-dim)}
.mapbox,.price-card,.rev,.aca-card,.tour-card,.video-wrap{background:#fff;border-color:var(--hair)}
.shot,.tour-card .ph,.aca-card .ph{background:#EDF1EE;border-color:var(--hair-2)}
.cred{background:var(--pitch-2)}
.cred .txt b{color:var(--flood)}
.rev .big{color:var(--flood)}
.aca-fee b{color:#8A5F06}

/* ---- Khối doanh nghiệp: bỏ chuyển sắc, để phẳng ---- */
.b2b{background:#EDF5EF;border-top:1px solid var(--turf-line);border-bottom:1px solid var(--turf-line)}
.b2b-card{background:#fff;border:1px solid var(--hair)}
.b2b-card .k{color:var(--flood)}
.b2b .benefits li::before{background:rgba(21,127,60,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23157F3C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}
.partner{background:#fff;color:var(--chalk-dim);border-color:var(--hair)}
.video-wrap .play{background:var(--vang)}
.video-wrap .vt{color:var(--chalk-dim)}

/* ---- Hỏi đáp ---- */
summary .pm{color:var(--flood)}
details .ans{color:var(--chalk-dim)}

/* ---- Chân trang ---- */
footer.site{background:#F1F5F2;border-top:1px solid var(--hair)}
.fcol a{color:var(--chalk-dim)}
.fcol a:hover{color:var(--flood)}
.frow svg{color:var(--flood)}

/* ---- Trang con ---- */
.page-body p,.page-body li{color:var(--chalk-dim)}
.page-body a{color:var(--flood)}
.skip:focus{background:var(--flood);color:#fff}
:focus-visible{outline-color:var(--flood)}

/* ---- Các khối SEO đã viết theo nền sáng: trả về đúng màu nhấn xanh ---- */
.tra-loi-nhanh{background:#EDF5EF;border-left-color:var(--flood);color:var(--chalk)}
.bang-du-kien,.hoi-dap-trang{background:#fff}
.bang-du-kien caption{color:var(--flood)}
.bang-du-kien th{background:var(--pitch-2);color:var(--chalk-dim)}

/* ==========================================================================
   WIDGET "LỊCH SÂN TRỐNG" — viết riêng cho nền tối nên phải vá tay
   (CSS của nó nằm trong functions.php, không nằm ở style.css).
   Đã quét toàn bộ stylesheet để lấy đúng danh sách, không vá mò.
   ========================================================================== */

/* Nút chính bị chính luật .page-body a của khối này đè mất chữ
   (.page-body a hạng 0-1-1 > .lt-nut hạng 0-1-0) → nêu đích danh, thắng lại. */
.page-body .lt-nut,.lt-nut{color:#fff;background:var(--flood)}
.page-body .lt-nut-phu,.lt-nut-phu{background:#fff;color:var(--flood);border:1px solid var(--flood)}
.lt-nut-phu:hover{background:rgba(21,127,60,.08)}
.lt-nut:hover{background:var(--flood-soft)}

/* Ô "Trống": chữ xanh bạc hà #7fe3a3 chỉ đọc được trên nền đen */
.lt-trong{color:#12703A;border:1px dashed rgba(21,127,60,.45);background:rgba(21,127,60,.06)}
.lt-k-trong{border:1px dashed rgba(21,127,60,.5);background:rgba(21,127,60,.10)}
.lt-xong{color:var(--sage);background:#F1F3F1;border:1px solid var(--hair-2)}
.lt-k-xong{background:#E6E9E7}
.lt-luoi .lt-nhom{color:var(--flood);background:rgba(21,127,60,.09)}
.lt-luoi th.lt-c7{background:rgba(21,127,60,.05)}

/* Hỏi đáp trang con: nền di chuột trước là trắng mờ, trên nền trắng thì mất hút */
.hd-muc summary:hover{background:#F2F5F2}

/* Khối liên kết nội bộ: giữ chữ đậm như thiết kế gốc, xanh khi rê chuột,
   nếu không cả hộp toàn một sắc xanh nhìn phẳng lì. */
.page-body .wms-lien-ket a{color:var(--chalk)}
.page-body .wms-lien-ket a:hover{color:var(--flood)}

/* Thanh trên đục thêm chút cho khỏi lẫn khi cuộn qua ảnh tối */
header.site{background:rgba(255,255,255,.94);box-shadow:0 1px 0 rgba(22,35,27,.06)}

/* Nhãn "Sân 7 (cả sân)" là chữ xanh trên chính nền xanh 9% → đậm thêm cho đủ 4.5:1 */
.lt-luoi .lt-nhom{color:#0F6132}

/* Nhãn [ĐIỀN…] còn thiếu chút tương phản (4.44 so với chuẩn 4.5) */
.fill-tag,.tag2,.editnote b,.aca-card .tag{color:#116234}

/* Xanh #16a34a sot lai tu cac khoi SEO chi dat 3.3:1 tren nen trang —
   gom het ve mau nhan chung #157F3C (5.08:1). Sao danh gia cung dam them
   vi no nam tren nen hero hoi nga xanh chu khong phai trang thuan. */
.wms-lien-ket h3,.wms-video-cta a{color:var(--flood)}
.wms-lien-ket a:hover{color:var(--flood);border-bottom-color:var(--flood)}
.stars{color:#8A5F06}