/*
Theme Name: VNBóngĐá Data Theme
Theme URI: https://vnbongda.net/
Author: vnbongda.net
Description: Theme WordPress dữ liệu bóng đá responsive dành cho vnbongda.net, tối ưu cho plugin Bóng Đá Data Core.
Version: 1.1.0
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: bong-da-data-theme
*/

:root {
  --bddt-navy: #071827;
  --bddt-green: #18d875;
  --bddt-red: #ff3d4f;
  --bddt-yellow: #ffc857;
  --bddt-text: #17212b;
  --bddt-muted: #6f7c88;
  --bddt-bg: #f4f7f9;
  --bddt-line: #e5ebef;
  --bddt-white: #fff;
  --bddt-radius: 14px;
  --bddt-shell: 1440px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--bddt-text); background: var(--bddt-bg); font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: #0b7841; }
button, input, select, textarea { font: inherit; }
.screen-reader-text { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.bddt-shell { width: min(var(--bddt-shell), calc(100% - 32px)); margin-inline: auto; }

.bddt-topline { color: #c4d2dc; background: #03111d; font-size: 11px; }
.bddt-topline-inner { display: flex; min-height: 31px; align-items: center; justify-content: space-between; gap: 20px; }
.bddt-topline strong { color: var(--bddt-green); }
.bddt-header { position: sticky; z-index: 100; top: 0; color: #fff; background: var(--bddt-navy); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.bddt-header-inner { display: flex; min-height: 68px; align-items: center; gap: 26px; }
.bddt-brand { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; color: #fff; font-weight: 900; text-decoration: none; }
.bddt-brand img { display: block; max-width: 190px; max-height: 44px; object-fit: contain; }
.bddt-brand-mark { flex: 0 0 42px; width: 42px !important; height: 42px !important; }
.bddt-brand-word { color: #fff; font-size: 21px; font-weight: 950; letter-spacing: -.7px; line-height: 1; white-space: nowrap; }
.bddt-brand-word b { color: var(--bddt-green); font: inherit; }
.bddt-brand-word em { margin-left: 2px; color: var(--bddt-green); font-size: .72em; font-style: normal; letter-spacing: 0; }
.bddt-main-nav { min-width: 0; flex: 1; }
.bddt-main-nav ul { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.bddt-main-nav a { display: block; padding: 12px 11px; color: #d9e4eb; border-radius: 9px; font-size: 13px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.bddt-main-nav a:hover, .bddt-main-nav .current-menu-item > a { color: var(--bddt-navy); background: var(--bddt-green); }
.bddt-header-search { display: flex; flex: 0 0 210px; align-items: center; overflow: hidden; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; }
.bddt-header-search input { min-width: 0; width: 100%; height: 38px; padding: 0 4px 0 12px; color: #fff; background: transparent; border: 0; outline: 0; font-size: 12px; }
.bddt-header-search input::placeholder { color: #9babb7; }
.bddt-header-search button { width: 40px; height: 38px; color: var(--bddt-green); background: transparent; border: 0; cursor: pointer; }
.bddt-menu-toggle { display: none; width: 42px; height: 42px; color: #fff; background: rgba(255,255,255,.08); border: 0; border-radius: 9px; font-size: 20px; }

.bddt-main { min-height: 62vh; }
.bddt-data-page-title { margin: 0 0 14px; padding: 20px 22px; color: #fff; background: linear-gradient(135deg,var(--bddt-navy),#154259); border-radius: var(--bddt-radius); }
.bddt-data-page-title h1 { margin: 0; color: #fff; font-size: clamp(25px,4vw,38px); }
.bddt-data-page-title p { margin: 5px 0 0; color: #c6d5de; font-size: 13px; }
.bddt-page-shell { width: min(980px, calc(100% - 32px)); margin: 30px auto; }
.bddt-page-card, .bddt-archive-main, .bddt-single-article { background: #fff; border: 1px solid var(--bddt-line); border-radius: var(--bddt-radius); box-shadow: 0 8px 25px rgba(8,33,49,.05); }
.bddt-page-card { padding: clamp(20px,4vw,42px); }
.bddt-page-card h1 { margin-top: 0; font-size: clamp(28px,4vw,44px); }

.bddt-content-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 24px; align-items: start; width: min(1180px, calc(100% - 32px)); margin: 30px auto; }
.bddt-content-sidebar { position: sticky; top: 92px; }
.bddt-archive-main { overflow: hidden; }
.bddt-archive-header { padding: 24px 25px 18px; border-bottom: 1px solid var(--bddt-line); }
.bddt-archive-header span { color: #0b7841; font-size: 11px; font-weight: 850; text-transform: uppercase; }
.bddt-archive-header h1 { margin: 4px 0 0; font-size: clamp(28px,4vw,42px); line-height: 1.15; }
.bddt-post-list { padding: 6px 22px; }
.bddt-post-card { display: grid; grid-template-columns: 245px minmax(0,1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--bddt-line); }
.bddt-post-thumb { display: block; overflow: hidden; align-self: start; background: #e7ecef; border-radius: 11px; }
.bddt-post-thumb img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform .25s; }
.bddt-post-thumb:hover img { transform: scale(1.035); }
.bddt-post-card-body { min-width: 0; align-self: center; }
.bddt-post-category { color: #0b7841; font-size: 10px; font-weight: 850; text-transform: uppercase; }
.bddt-post-card h2 { margin: 6px 0; font-size: clamp(18px,2.1vw,24px); line-height: 1.3; }
.bddt-post-card h2 a { color: var(--bddt-text); text-decoration: none; }
.bddt-post-card h2 a:hover { color: #0b7841; }
.bddt-post-card p { margin: 0; color: var(--bddt-muted); font-size: 13px; line-height: 1.65; }
.bddt-load-more-wrap { padding: 20px; text-align: center; }
.bddt-load-more { min-width: 170px; min-height: 44px; padding: 10px 22px; color: var(--bddt-navy); background: var(--bddt-green); border: 0; border-radius: 10px; font-weight: 850; cursor: pointer; }
.bddt-load-more:disabled { opacity: .55; cursor: wait; }

.bddt-single-article { overflow: hidden; }
.bddt-single-header { padding: clamp(22px,5vw,45px) clamp(20px,5vw,54px) 22px; }
.bddt-single-cats { color: #0b7841; font-size: 11px; font-weight: 850; text-transform: uppercase; }
.bddt-single-header h1 { margin: 8px 0 12px; font-size: clamp(31px,5vw,52px); line-height: 1.16; letter-spacing: -.8px; }
.bddt-single-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--bddt-muted); font-size: 12px; }
.bddt-single-featured img { display: block; width: 100%; max-height: 590px; object-fit: cover; }
.bddt-entry-content { padding: clamp(24px,5vw,54px); font-size: 17px; line-height: 1.78; text-align: justify; overflow-wrap: break-word; }
.bddt-entry-content > *:first-child { margin-top: 0; }
.bddt-entry-content h2 { margin: 1.6em 0 .55em; color: #10202c; font-size: clamp(26px,3.5vw,34px); line-height: 1.28; text-align: left; }
.bddt-entry-content h3 { margin: 1.45em 0 .5em; color: #142b39; font-size: clamp(22px,3vw,28px); line-height: 1.32; text-align: left; }
.bddt-entry-content h4 { margin: 1.3em 0 .45em; font-size: 20px; text-align: left; }
.bddt-entry-content ul, .bddt-entry-content ol { display: block !important; margin: 1em 0 1.3em !important; padding-left: 1.6em !important; list-style-position: outside !important; }
.bddt-entry-content ul { list-style-type: disc !important; }
.bddt-entry-content ol { list-style-type: decimal !important; }
.bddt-entry-content li { display: list-item !important; margin: .38em 0; padding-left: .25em; }
.bddt-entry-content li::marker { color: #0b7841; font-weight: 800; }
.bddt-entry-content img, .bddt-entry-content figure { display: block; max-width: 100%; margin-right: auto !important; margin-left: auto !important; }
.bddt-entry-content figure img { margin: 0 auto !important; }
.bddt-entry-content figcaption { margin-top: 7px; color: var(--bddt-muted); font-size: 12px; text-align: center; }
.bddt-entry-content blockquote { margin: 1.4em 0; padding: 16px 20px; background: #effaf4; border-left: 4px solid var(--bddt-green); border-radius: 0 10px 10px 0; font-style: italic; }
.bddt-entry-content table { width: 100%; border-collapse: collapse; text-align: left; }
.bddt-entry-content th, .bddt-entry-content td { padding: 9px; border: 1px solid var(--bddt-line); }
.bddt-entry-content iframe, .bddt-entry-content video { max-width: 100%; }
.bddt-post-tags { padding: 0 clamp(24px,5vw,54px) 34px; }
.bddt-post-tags a { display: inline-block; margin: 3px; padding: 6px 10px; color: #45535e; background: #eef2f4; border-radius: 20px; font-size: 11px; text-decoration: none; }

.bddt-footer { margin-top: 40px; color: #afbfca; background: #03111d; }
.bddt-footer-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding: 42px 0; }
.bddt-footer h3 { margin: 0 0 11px; color: #fff; font-size: 18px; }
.bddt-footer-brand { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 7px; text-decoration: none; }
.bddt-footer-brand .bddt-brand-mark { flex-basis: 34px; width: 34px !important; height: 34px !important; }
.bddt-footer-brand .bddt-brand-word { font-size: 18px; }
.bddt-footer h4 { margin: 0 0 10px; color: var(--bddt-green); font-size: 12px; text-transform: uppercase; }
.bddt-footer p, .bddt-footer li { font-size: 12px; line-height: 1.7; }
.bddt-footer ul { margin: 0; padding: 0; list-style: none; }
.bddt-footer a { color: #c8d5dc; text-decoration: none; }
.bddt-footer-bottom { padding: 14px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 11px; }
.bddt-mobile-nav { display: none; }
.bddt-not-found { padding: 70px 20px; text-align: center; }
.bddt-not-found h1 { font-size: 64px; margin: 0; }

@media (max-width: 1100px) {
  .bddt-header-search { display: none; }
  .bddt-main-nav a { padding-inline: 8px; font-size: 12px; }
  .bddt-content-layout { grid-template-columns: minmax(0,1fr) 285px; }
}

@media (max-width: 820px) {
  body { padding-bottom: 61px; }
  .bddt-shell { width: min(100% - 20px, 760px); }
  .bddt-topline { display: none; }
  .bddt-header-inner { min-height: 58px; }
  .bddt-brand { gap: 7px; }
  .bddt-brand-mark { flex-basis: 35px; width: 35px !important; height: 35px !important; }
  .bddt-brand-word { font-size: 17px; }
  .bddt-menu-toggle { display: block; margin-left: auto; }
  .bddt-main-nav { position: absolute; display: none; top: 58px; right: 10px; left: 10px; padding: 10px; background: #0b2131; border-radius: 0 0 12px 12px; box-shadow: 0 15px 25px rgba(0,0,0,.22); }
  .bddt-main-nav.is-open { display: block; }
  .bddt-main-nav ul { display: block; }
  .bddt-main-nav a { padding: 11px 12px; }
  .bddt-content-layout { display: block; width: min(100% - 20px,760px); margin-top: 14px; }
  .bddt-content-sidebar { position: static; margin-top: 16px; }
  .bddt-post-card { grid-template-columns: 150px minmax(0,1fr); gap: 14px; }
  .bddt-post-card p { display: none; }
  .bddt-single-header h1 { font-size: 34px; }
  .bddt-entry-content { font-size: 16.5px; line-height: 1.75; }
  .bddt-footer { margin-top: 25px; }
  .bddt-footer-top { grid-template-columns: 1fr; gap: 20px; padding: 30px 0; }
  .bddt-mobile-nav { position: fixed; z-index: 110; display: grid; right: 0; bottom: 0; left: 0; grid-template-columns: repeat(4,1fr); min-height: 58px; padding-bottom: env(safe-area-inset-bottom); background: #071827; box-shadow: 0 -5px 18px rgba(0,0,0,.16); }
  .bddt-mobile-nav a { display: flex; align-items: center; justify-content: center; flex-direction: column; color: #c5d2da; font-size: 10px; font-weight: 750; text-decoration: none; }
  .bddt-mobile-nav a span { color: var(--bddt-green); font-size: 18px; line-height: 1.1; }
}

@media (max-width: 540px) {
  .bddt-post-list { padding-inline: 13px; }
  .bddt-post-card { grid-template-columns: 112px minmax(0,1fr); gap: 11px; padding: 13px 0; }
  .bddt-post-card h2 { margin: 4px 0; font-size: 15px; }
  .bddt-post-category { font-size: 8px; }
  .bddt-single-header { padding: 20px 18px; }
  .bddt-single-header h1 { font-size: 29px; letter-spacing: -.3px; }
  .bddt-entry-content { padding: 24px 18px; text-align: left; }
  .bddt-entry-content p { text-align: justify; }
}