/*
Theme Name: 24HTYSO Sports
Theme URI: https://www.24htyso.com/
Author: 24HTYSO
Description: V4 professional Vietnamese football sports media UI for SEO, automation, football data, league hubs, team hubs, and mobile-first experience.
Version: 1.4.0
Text Domain: htyso-sports
*/

:root{
  --navy:#061527;
  --navy-2:#0b2442;
  --blue:#123b67;
  --green:#19c66a;
  --green-2:#0f9f52;
  --mint:#e8fff2;
  --bg:#f3f7fb;
  --surface:#ffffff;
  --surface-2:#f8fbff;
  --text:#102033;
  --muted:#65758b;
  --border:#dde7f2;
  --warning:#f59e0b;
  --danger:#ef4444;
  --radius:18px;
  --radius-lg:28px;
  --shadow:0 18px 45px rgba(6,21,39,.10);
  --shadow-soft:0 10px 28px rgba(6,21,39,.07);
  --container:1200px;
}
*{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 0%,rgba(25,198,106,.08),transparent 28%),
    radial-gradient(circle at 90% 10%,rgba(18,59,103,.10),transparent 24%),
    var(--bg);
  line-height:1.65;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--green-2)}
p{margin:0 0 1rem}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .78rem;color:#071527;letter-spacing:-.025em}
h1{font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-.055em}
h2{font-size:clamp(1.35rem,3vw,2.15rem)}
h3{font-size:1.12rem}
table{border-collapse:collapse;width:100%}
button,input,select,textarea{font:inherit}
.htyso-container{width:min(var(--container),calc(100% - 34px));margin-inline:auto}
.screen-reader-text{position:absolute;left:-9999px}

/* Header */
.htyso-site-header{position:sticky;top:0;z-index:1000;background:rgba(6,21,39,.96);backdrop-filter:blur(16px);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.htyso-topbar{background:#04101f;color:#b8c7da;font-size:.82rem;border-bottom:1px solid rgba(255,255,255,.06)}
.htyso-topbar .htyso-container{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:7px 0}
.htyso-live-dot{display:inline-block;width:8px;height:8px;border-radius:999px;background:var(--green);box-shadow:0 0 0 4px rgba(25,198,106,.15);margin-right:7px}
.htyso-brand-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0}
.htyso-logo{display:flex;align-items:center;gap:11px;font-weight:950;letter-spacing:-.045em;font-size:1.55rem;color:#fff}
.htyso-logo:hover{color:#fff}
.htyso-logo-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--green),#7df2b2);color:#062016;font-weight:950;box-shadow:0 10px 26px rgba(25,198,106,.25)}
.htyso-tagline{display:block;color:#9fb0c5;font-size:.78rem;font-weight:650;letter-spacing:0;margin-top:-2px}
.htyso-menu-toggle{display:none;border:0;background:var(--green);color:#062016;border-radius:14px;padding:10px 14px;font-weight:950;align-items:center;gap:8px}
.htyso-menu-icon{width:18px;height:14px;display:inline-grid;gap:4px}
.htyso-menu-icon span{height:2px;background:#062016;border-radius:999px}
.htyso-nav-wrap{display:flex;align-items:center;gap:16px}
.htyso-menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.htyso-menu li{position:relative}
.htyso-menu a{display:block;padding:11px 13px;border-radius:13px;color:#e7eef7;font-weight:820;font-size:.94rem}
.htyso-menu a:hover,.htyso-menu .current-menu-item>a{background:rgba(255,255,255,.09);color:#fff}
.htyso-menu .sub-menu{display:none;position:absolute;left:0;top:100%;min-width:230px;background:#fff;color:var(--text);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:8px;list-style:none;margin:0}
.htyso-menu li:hover>.sub-menu{display:block}
.htyso-menu .sub-menu a{color:var(--text);padding:10px 12px}
.htyso-menu .sub-menu a:hover{background:var(--mint);color:var(--green-2)}
.htyso-main{padding:24px 0 56px}

/* Breaking ticker */
.htyso-ticker{background:#fff;border:1px solid var(--border);border-radius:999px;box-shadow:var(--shadow-soft);overflow:hidden;margin-bottom:20px;display:flex;align-items:center}
.htyso-ticker-label{background:linear-gradient(135deg,var(--green),#6ee7a8);color:#052014;font-weight:950;padding:10px 16px;white-space:nowrap}
.htyso-ticker-track{overflow:hidden;white-space:nowrap;flex:1}
.htyso-ticker-items{display:inline-flex;gap:28px;animation:htysoMarquee 36s linear infinite;padding:10px 18px}
.htyso-ticker:hover .htyso-ticker-items{animation-play-state:paused}
.htyso-ticker a{color:#18334f;font-weight:750}
@keyframes htysoMarquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Hero */
.htyso-hero-pro{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr);gap:22px;margin-bottom:22px}
.htyso-hero-lead{min-height:450px;position:relative;overflow:hidden;border-radius:var(--radius-lg);background:linear-gradient(135deg,#061527 0%,#0d3157 52%,#0a6c49 100%);color:#fff;box-shadow:var(--shadow);display:flex;align-items:end;padding:34px}
.htyso-hero-lead:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 18%,rgba(25,198,106,.38),transparent 34%),linear-gradient(0deg,rgba(0,0,0,.50),rgba(0,0,0,.05))}
.htyso-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34}
.htyso-hero-content{position:relative;z-index:2;max-width:760px}
.htyso-pill{display:inline-flex;align-items:center;gap:7px;background:rgba(25,198,106,.16);color:#c9ffdd;border:1px solid rgba(25,198,106,.35);border-radius:999px;padding:7px 12px;font-size:.77rem;font-weight:950;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.htyso-hero-lead h1{color:#fff;margin-bottom:12px}
.htyso-hero-lead p{color:#dce8f7;font-size:1.07rem;max-width:680px}
.htyso-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.htyso-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:11px 16px;font-weight:900;border:1px solid transparent}
.htyso-btn-primary{background:var(--green);color:#062016}
.htyso-btn-dark{background:#0d223b;color:#fff;border-color:rgba(255,255,255,.12)}
.htyso-btn-light{background:#fff;color:#0b2442;border-color:var(--border)}
.htyso-hero-stack{display:grid;gap:16px}
.htyso-score-card,.htyso-mini-card,.htyso-card,.htyso-section,.htyso-data-box,.htyso-topic-card,.htyso-filter-card,.htyso-faq-box,.htyso-related-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-soft)}
.htyso-score-card{padding:18px;background:linear-gradient(180deg,#fff,#f8fbff)}
.htyso-score-card span,.htyso-mini-card span{font-size:.76rem;color:var(--green-2);font-weight:950;text-transform:uppercase;letter-spacing:.055em}
.htyso-score-card h3,.htyso-mini-card h3{margin:.42rem 0 .35rem}
.htyso-score-line{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:12px;border-radius:14px;background:#f2f7fd}
.htyso-score-line strong{font-size:1.12rem}
.htyso-mini-card{padding:18px}
.htyso-mini-card p{color:var(--muted);font-size:.94rem}

/* Layout + cards */
.htyso-section{padding:22px;margin-bottom:22px}
.htyso-section-header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.htyso-section-header h2{margin:0}
.htyso-section-sub{color:var(--muted);margin-top:-8px}
.htyso-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.htyso-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.htyso-two-col{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:24px;align-items:start}
.htyso-card{overflow:hidden;transition:transform .18s ease, box-shadow .18s ease}
.htyso-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.htyso-card-thumb{aspect-ratio:16/10;background:linear-gradient(135deg,#0d3157,#0a6c49);overflow:hidden}
.htyso-card-thumb img{width:100%;height:100%;object-fit:cover}
.htyso-card-body{padding:18px}
.htyso-card-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--muted);font-size:.82rem;margin-bottom:10px}
.htyso-category{color:var(--green-2);font-weight:950}
.htyso-card h3{font-size:1.12rem;letter-spacing:-.02em}
.htyso-card p{color:var(--muted);font-size:.95rem}
.htyso-sidebar{display:grid;gap:18px;align-content:start}
.htyso-ad-slot{display:grid;place-items:center;min-height:96px;border:1px dashed #aec0d6;border-radius:16px;background:#eef5fc;color:#6f829a;font-weight:900;margin:22px 0;text-align:center}

/* Topic / league cards */
.htyso-topic-card{padding:18px;position:relative;overflow:hidden}
.htyso-topic-card:after{content:"";position:absolute;right:-28px;top:-28px;width:90px;height:90px;border-radius:50%;background:rgba(25,198,106,.10)}
.htyso-topic-card strong{display:block;color:#071527;font-size:1.08rem;margin-bottom:6px}
.htyso-topic-card p{color:var(--muted);font-size:.94rem;margin-bottom:12px}
.htyso-topic-card a{font-weight:900;color:var(--green-2)}

/* Page / article */
.htyso-page-header{background:linear-gradient(135deg,#061527,#0d3157 62%,#0a6c49);color:#fff;border-radius:var(--radius-lg);padding:34px;margin-bottom:24px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.htyso-page-header:after{content:"";position:absolute;right:-80px;top:-80px;width:230px;height:230px;border-radius:50%;background:rgba(25,198,106,.16)}
.htyso-page-header h1{color:#fff}
.htyso-page-header p{color:#cddbed;max-width:780px}
.htyso-breadcrumb{font-size:.86rem;color:#8ba1ba;margin-bottom:13px}
.htyso-breadcrumb a{color:#d4e2f2}
.htyso-content-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px;align-items:start}
.htyso-article{background:#fff;border:1px solid var(--border);border-radius:24px;padding:clamp(20px,4vw,40px);box-shadow:var(--shadow)}
.htyso-entry-meta{color:var(--muted);font-size:.9rem;margin-bottom:18px;display:flex;flex-wrap:wrap;gap:10px}
.htyso-summary{font-size:1.08rem;color:#334155;background:#f6fafc;border-left:4px solid var(--green);padding:14px 16px;border-radius:12px;margin-bottom:20px}
.htyso-article-content{font-size:1.055rem}
.htyso-article-content p{margin-bottom:1.05rem}
.htyso-article-content h2{margin-top:1.85rem;padding-top:.2rem}
.htyso-article-content a{text-decoration:underline;text-decoration-color:rgba(25,198,106,.55);text-underline-offset:3px}
.htyso-toc{background:#f7fbff;border:1px solid var(--border);border-radius:16px;padding:16px;margin:18px 0}
.htyso-toc strong{display:block;margin-bottom:8px}
.htyso-toc a{display:block;color:#28445f;padding:6px 0;border-bottom:1px solid #edf2f7}
.htyso-match-info{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;background:linear-gradient(135deg,#061527,#0d3157);border-radius:18px;padding:18px;color:#fff;margin:18px 0}
.htyso-match-info strong{font-size:1.05rem;text-align:center}
.htyso-match-vs{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--green);color:#062016;font-weight:950}
.htyso-faq-box,.htyso-related-box{padding:20px;margin-top:22px}
.htyso-faq-item{border-top:1px solid var(--border);padding:13px 0}
.htyso-faq-item:first-of-type{border-top:0}
.htyso-faq-item strong{display:block;margin-bottom:5px}
.htyso-related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.htyso-source-note{background:#f4f8fb;border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin-top:20px;color:#46566b}

/* Data center */
.htyso-data-shell{display:grid;grid-template-columns:280px minmax(0,1fr);gap:22px;align-items:start}
.htyso-data-nav{position:sticky;top:104px;background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-soft);padding:12px}
.htyso-data-nav a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 13px;border-radius:14px;font-weight:900;color:#1b344e}
.htyso-data-nav a:hover,.htyso-data-nav a.is-active{background:var(--mint);color:var(--green-2)}
.htyso-filter-card{padding:16px;margin-bottom:16px}
.htyso-filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end}
.htyso-field label{display:block;font-size:.78rem;font-weight:950;color:#496078;text-transform:uppercase;letter-spacing:.045em;margin-bottom:5px}
.htyso-field input,.htyso-field select{width:100%;border:1px solid var(--border);border-radius:12px;padding:10px 11px;background:#fff;color:var(--text)}
.htyso-filter-actions{display:flex;gap:8px;flex-wrap:wrap}
.htyso-data-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.htyso-data-tabs a{border:1px solid var(--border);background:#fff;border-radius:999px;padding:9px 13px;font-weight:900;color:#243d58}
.htyso-data-tabs a:hover,.htyso-data-tabs a.is-active{background:#0d3157;color:#fff;border-color:#0d3157}
.htyso-data-box{padding:18px;margin-bottom:18px;overflow:hidden}
.htyso-data-box h2{font-size:1.25rem;margin-bottom:14px}
.htyso-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px;border:1px solid var(--border)}
.htyso-data-table{min-width:760px;background:#fff;font-size:.92rem}
.htyso-data-table th{background:#0d3157;color:#fff;text-align:left;padding:12px 10px;white-space:nowrap}
.htyso-data-table td{padding:11px 10px;border-bottom:1px solid #eef2f7;white-space:nowrap}
.htyso-data-table tr:nth-child(even) td{background:#fafcff}
.htyso-data-table a{color:#0b7a4a;font-weight:900}
.htyso-last-updated,.htyso-fallback{color:var(--muted);font-size:.9rem;margin-top:10px}
.htyso-date-group{margin:18px 0 10px;color:#0d3157;border-left:4px solid var(--green);padding-left:10px}

/* Team / league hubs */
.htyso-hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px}
.htyso-hub-stat{background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:var(--shadow-soft)}
.htyso-hub-stat span{color:var(--muted);font-size:.82rem;font-weight:850}
.htyso-hub-stat strong{display:block;font-size:1.9rem;color:#071527}
.htyso-noindex-note{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:14px;padding:12px 14px;margin-bottom:18px}

/* Footer */
.htyso-footer{background:#06111f;color:#c5d3e2;margin-top:44px;padding:38px 0}
.htyso-footer a{color:#dcedff}
.htyso-footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr .8fr;gap:24px}
.htyso-footer h2,.htyso-footer h3{color:#fff}

/* Mobile */
@media (max-width:1080px){
  .htyso-hero-pro,.htyso-two-col,.htyso-content-wrap,.htyso-data-shell{grid-template-columns:1fr}
  .htyso-data-nav{position:static;display:flex;overflow:auto;gap:8px}
  .htyso-data-nav a{white-space:nowrap}
  .htyso-sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .htyso-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .htyso-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  body{font-size:15px}
  .htyso-container{width:min(100% - 24px,var(--container))}
  .htyso-topbar{display:none}
  .htyso-brand-row{padding:12px 0}
  .htyso-logo{font-size:1.26rem}
  .htyso-logo-mark{width:38px;height:38px}
  .htyso-menu-toggle{display:inline-flex}
  .htyso-nav-wrap{position:fixed;inset:66px 12px auto 12px;background:#061527;border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:var(--shadow);display:none;padding:12px;max-height:calc(100vh - 88px);overflow:auto}
  body.htyso-menu-open .htyso-nav-wrap{display:block}
  .htyso-menu{display:block}
  .htyso-menu a{padding:13px 12px;border-radius:12px}
  .htyso-menu .sub-menu{position:static;display:block;background:rgba(255,255,255,.06);box-shadow:none;border:0;border-radius:12px;margin:4px 0 10px 10px}
  .htyso-menu .sub-menu a{color:#dce8f6}
  .htyso-main{padding-top:16px}
  .htyso-ticker{border-radius:16px;align-items:stretch}
  .htyso-ticker-label{display:grid;place-items:center;padding:10px 12px}
  .htyso-ticker-items{animation-duration:42s}
  .htyso-hero-lead{min-height:360px;padding:24px;border-radius:22px}
  .htyso-hero-actions{gap:8px}
  .htyso-btn{padding:10px 13px}
  .htyso-grid,.htyso-grid-4,.htyso-sidebar,.htyso-footer-grid,.htyso-related-grid,.htyso-hub-grid{grid-template-columns:1fr}
  .htyso-section,.htyso-data-box{padding:16px}
  .htyso-section-header{align-items:flex-start;flex-direction:column}
  .htyso-page-header{padding:24px;border-radius:22px}
  .htyso-article{padding:20px;border-radius:20px}
  .htyso-filter-grid{grid-template-columns:1fr}
  .htyso-filter-actions .htyso-btn{width:100%}
  .htyso-match-info{grid-template-columns:1fr;gap:8px;text-align:center}
  .htyso-match-vs{margin:auto}
  .htyso-data-table{font-size:.86rem;min-width:680px}
  .htyso-data-table th,.htyso-data-table td{padding:10px 9px}
}
@media (max-width:480px){
  .htyso-container{width:min(100% - 18px,var(--container))}
  .htyso-hero-lead{min-height:320px;padding:19px}
  .htyso-score-card,.htyso-mini-card,.htyso-card-body{padding:15px}
  .htyso-ad-slot{min-height:76px}
  .htyso-data-tabs{overflow:auto;flex-wrap:nowrap;padding-bottom:3px}
  .htyso-data-tabs a{white-space:nowrap}
}


/* V4.2 filter, ads and category page maintenance fixes */
.htyso-filter-card{
  max-width:100%;
  overflow:hidden;
}
.htyso-filter-actions .htyso-btn{
  min-height:44px;
  white-space:nowrap;
  line-height:1.2;
  border-radius:12px;
}
.htyso-field input,
.htyso-field select{
  min-height:46px;
  line-height:1.2;
  max-width:100%;
}
.htyso-pagination{
  margin-top:22px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.htyso-pagination .page-numbers{
  display:inline-flex;
  min-width:38px;
  min-height:38px;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  font-weight:900;
}
.htyso-pagination .current{
  background:var(--green);
  color:#062016;
  border-color:var(--green);
}
.htyso-ad-slot:empty{
  display:none;
}
@media (max-width: 768px){
  .htyso-filter-card{
    padding:14px;
    border-radius:18px;
  }
  .htyso-filter-grid{
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
    align-items:end;
  }
  .htyso-filter-actions{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    width:100%;
  }
  .htyso-filter-actions .htyso-btn{
    width:100%;
    padding:11px 12px;
    font-size:.95rem;
  }
}
@media (max-width: 480px){
  .htyso-filter-grid{
    grid-template-columns:1fr !important;
  }
  .htyso-filter-actions{
    grid-template-columns:1fr 1fr;
  }
}