/*
Theme Name:  ThemeSanBong
Theme URI:   https://sanbong.com
Author:      SanBong Team
Author URI:  https://sanbong.com
Description: Theme bóng đá chuyên nghiệp – Tin tức, kết quả, lịch thi đấu, bảng xếp hạng. Powered by TailwindCSS.
Version:     1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: theme-sanbong
Tags:        sports, football, soccer, news, responsive, dark-mode
*/

/* =========================================================
   ThemeSanBong – Custom CSS (supplement to Tailwind CDN)
   Mọi utility class dùng Tailwind trực tiếp trong template.
   File này chỉ chứa các style không thể làm bằng Tailwind.
   ========================================================= */

/* ── Base ─────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #e53e3e; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #c53030; }

/* ── Header: nền đen + menu xanh ──────────────────────────── */
#site-header {
    background-color: #000000 !important;
    border-bottom-color: #1f2937 !important;
}
/* Màu link menu top-level — inline style set màu gốc, CSS này xử lý hover */
#primary-nav .nav-menu-link:hover {
    color: #3db810 !important;
}

.header-search-icon { display: flex; align-items: center; justify-content: center; background: #1f2937; border-radius: 50%; width: 40px; height: 40px; color: #9ca3af; transition: all 0.2s ease; }
.header-search-icon:hover { background: #374151; color: #fff; }

/* ── Footer: nền đen + tiêu đề xanh lá ───────────────────── */
#site-footer {
    background-color: #000000 !important;
}
#site-footer h3 {
    color: #2a930d !important;
}


.footer-col-menu-wrapper ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.footer-col-menu-wrapper ul li a {
    display: flex;
    align-items: center;
    color: #d1d5db; /* gray-300 */
    font-size: 15px;
    transition: color 0.2s ease;
}
.footer-col-menu-wrapper ul li a::before {
    content: "›";
    color: #2a930d;
    font-size: 1.5rem;
    margin-right: 0.75rem;
    line-height: 1;
    transform: translateY(-1px);
    transition: transform 0.2s ease;
}
.footer-col-menu-wrapper ul li a:hover {
    color: #ffffff;
}
.footer-col-menu-wrapper ul li a:hover::before {
    transform: translate(4px, -1px);
}

/* ── WordPress Nav Menu – Desktop ─────────────────────────── */
/* WP wraps items in <li class="menu-item"> */
#primary-nav .menu {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0; padding: 0;
}
#primary-nav .menu-item > a {
    display: block;
    padding: 6px 14px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #60a5fa;
    border-bottom: 2.5px solid transparent;
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease;
    white-space: nowrap;
}
#primary-nav .menu-item > a:hover {
    color: #93c5fd;
}
#primary-nav .current-menu-item > a,
#primary-nav .current-menu-ancestor > a,
#primary-nav .current_page_item > a {
    color: #93c5fd;
    border-bottom-color: #60a5fa;
}
/* Dropdown */
#primary-nav .menu-item {
    position: relative;
}
#primary-nav .sub-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 180px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    padding: 6px;
    list-style: none;
    z-index: 100;
}
#primary-nav .menu-item:hover > .sub-menu {
    display: block;
}
#primary-nav .sub-menu .menu-item > a {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    border-bottom: none;
    font-size: 0.875rem;
    color: #374151;
}
#primary-nav .sub-menu .menu-item > a:hover {
    background: #fff5f5;
    color: #e53e3e;
}
#primary-nav .sub-menu .menu-item > a.is-current,
#primary-nav .sub-menu .current-menu-item > a {
    background: #fff5f5;
    color: #e53e3e;
    font-weight: 600;
}

/* ── WordPress Nav Menu – Mobile ──────────────────────────── */
#mobile-nav .menu {
    list-style: none;
    margin: 0; padding: 0;
}
#mobile-nav .menu-item > a {
    display: block;
    padding: 10px 12px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
#mobile-nav .menu-item > a:hover,
#mobile-nav .current-menu-item > a {
    background: #fff5f5;
    color: #e53e3e;
}
#mobile-nav .sub-menu {
    padding-left: 12px;
    border-left: 2px solid #fecaca;
    margin: 4px 0 4px 12px;
    list-style: none;
}
#mobile-nav .sub-menu .menu-item > a {
    font-size: 0.85rem;
    color: #6b7280;
}

/* ── WordPress alignments ─────────────────────────────────── */
.alignleft   { float: left;  margin: 0 1.5rem 1rem 0; }
.alignright  { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin: 0 auto 1rem; }
.alignwide   { margin-left: -2rem; margin-right: -2rem; }
.alignfull   { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); }

.wp-caption      { max-width: 100%; }
.wp-caption-text { font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem; }

/* ── Card hover lift ─────────────────────────────────────── */
.card-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(22, 163, 74, 0.18);
}

/* ── Custom logo size control ────────────────────────────── */
.custom-logo { max-height: 56px; width: auto; object-fit: contain; }

/* ── WP search form style ────────────────────────────────── */
.search-form { display: flex; gap: 8px; }
.search-form label { flex: 1; }
.search-form .search-field {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color .2s;
    background: #f9fafb;
    color: #111827;
}
.search-form .search-field:focus {
    border-color: #e53e3e;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(229,62,62,.12);
}
.search-form .search-submit {
    padding: 10px 18px;
    background: #e53e3e;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background .2s, transform .15s;
    white-space: nowrap;
}
.search-form .search-submit:hover {
    filter: brightness(.9);
    transform: translateY(-1px);
}

/* ── Sidebar Widget Cards ─────────────────────────────────── */
.sb-widget {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

/* Tiêu đề widget – viền đỏ bên trái */
.sb-widget-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .95rem;
    font-weight: 700;
    color: #111827;
    padding: .85rem 1.1rem;
    margin: 0;
    border-bottom: 1px solid #f3f4f6;
    background: #fff;
}
.sb-title-bar {
    display: inline-block;
    width: 4px;
    height: 1.05rem;
    background: #dc2626;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Nội dung bên trong widget */
.sb-widget ul {
    list-style: none;
    margin: 0; padding: 0;
}
.sb-widget ul li {
    border-bottom: 1px solid #f9fafb;
}
.sb-widget ul li:last-child { border-bottom: none; }
.sb-widget ul li a {
    display: block;
    padding: .65rem 1.1rem;
    font-size: .85rem;
    color: #374151;
    font-weight: 500;
    transition: color .15s, background .15s;
    line-height: 1.45;
}
.sb-widget ul li a:hover {
    color: #dc2626;
    background: #fff5f5;
}

/* Widget search form */
.sb-widget .search-form,
.sb-widget .widget-content { padding: .85rem 1.1rem; }

/* Widget text / HTML */
.sb-widget .textwidget { padding: .85rem 1.1rem; font-size: .875rem; color: #374151; line-height: 1.7; }

/* Recent Posts – có ảnh */
.sb-widget .widget_recent_entries ul li a { color: #1f2937; font-weight: 600; }
.sb-widget .widget_recent_entries ul li .post-date { font-size: .75rem; color: #9ca3af; display: block; margin-top: 2px; }

/* Tag cloud */
.sb-widget .tagcloud { padding: .85rem 1.1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.sb-widget .tagcloud a {
    display: inline-block; padding: .25rem .7rem;
    background: #f3f4f6; color: #374151; border-radius: 999px;
    font-size: .8rem !important; font-weight: 500;
    transition: background .15s, color .15s;
}
.sb-widget .tagcloud a:hover { background: #dc2626; color: #fff; }

/* Categories widget – count */
.sb-widget .widget_categories ul li {
    display: flex; align-items: center; justify-content: space-between;
}
.sb-widget .widget_categories .post-count {
    font-size: .75rem; color: #9ca3af;
    background: #f3f4f6; border-radius: 999px;
    padding: 1px 8px; margin-right: 1.1rem;
}

/* Archives widget */
.sb-widget select {
    width: 100%; margin: .85rem 1.1rem; width: calc(100% - 2.2rem);
    padding: .5rem .75rem; border: 1.5px solid #e5e7eb; border-radius: 6px;
    font-size: .875rem; color: #374151; outline: none;
}
.sb-widget select:focus { border-color: #dc2626; }

/* ── Ranked List Widget (Mới nhất & Xem nhiều) ───────────────── */
.sb-ranked-list {
    list-style: none;
    margin: 0; padding: 0;
}
.sb-ranked-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem 1.1rem;
    border-bottom: 1px solid #f9fafb;
    transition: background .15s;
}
.sb-ranked-item:last-child { border-bottom: none; }
.sb-ranked-item:hover { background: #fafafa; }

/* Hình tròn số thứ tự */
.sb-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

/* Tiêu đề bài viết trong ranked list */
.sb-ranked-title {
    font-size: .84rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s;
}
.sb-ranked-title:hover { color: #dc2626; }

/* Khi không có bài */
.sb-no-posts {
    padding: .85rem 1.1rem;
    font-size: .85rem;
    color: #9ca3af;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   ROW: Bảng xếp hạng (bxh-section)
   ══════════════════════════════════════════════════════════════ */
.bxh-section {
    padding: 2.5rem 0;
    background: #ffffff;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

.bxh-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Tiêu đề */
.bxh-heading {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: #111827;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 1.5rem;
    padding-left: .75rem;
    border-left: 4px solid #dc2626;
}

.bxh-heading-accent {
    font-size: 1.2rem;
    margin-left: .25rem;
}

/* Grid: 4 cột → 2 hàng tự nhiên */
.bxh-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .85rem;
}

@media (max-width: 900px) {
    .bxh-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .bxh-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
}

/* Card mỗi giải đấu – dùng CSS variable --c cho màu riêng mỗi card */
.bxh-card {
    --c: #6366f1; /* default, sẽ bị override bởi nth-child */
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1.1rem;
    background: #F1F5F9;
    border: 1px solid var(--c);
    border-radius: 10px;
    text-decoration: none;
    color: #1f2937;
    font-weight: 600;
    font-size: .9rem;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease, color .18s ease;
    position: relative;
    overflow: hidden;
}

/* Thanh accent trái theo màu riêng */
.bxh-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--c);
    border-radius: 10px 0 0 10px;
    opacity: 0;
    transition: opacity .18s ease;
}

.bxh-card:hover {
    border-color: var(--c);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--c) 25%, transparent);
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--c) 8%, white);
    color: var(--c);
}

.bxh-card:hover::before { opacity: 1; }

/* ── Màu riêng từng giải (theo thứ tự trong grid) ── */
/* 1 – Ngoại hạng Anh   : tím-xanh */
.bxh-grid .bxh-card:nth-child(1) { --c: #6366f1; }
/* 2 – Champions League : xanh dương đậm */
.bxh-grid .bxh-card:nth-child(2) { --c: #2563eb; }
/* 3 – Europa League    : cam */
.bxh-grid .bxh-card:nth-child(3) { --c: #ea580c; }
/* 4 – La Liga          : đỏ */
.bxh-grid .bxh-card:nth-child(4) { --c: #dc2626; }
/* 5 – Serie A          : xanh lá */
.bxh-grid .bxh-card:nth-child(5) { --c: #16a34a; }
/* 6 – Bundesliga       : đỏ tối */
.bxh-grid .bxh-card:nth-child(6) { --c: #9333ea; }
/* 7 – Ligue 1          : xanh ngọc */
.bxh-grid .bxh-card:nth-child(7) { --c: #0891b2; }
/* 8 – V-League         : vàng-hổ phách */
.bxh-grid .bxh-card:nth-child(8) { --c: #d97706; }

.bxh-card-icon {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}

.bxh-card-name {
    flex: 1;
    line-height: 1.35;
}

.bxh-card-arrow {
    font-size: .85rem;
    color: #9ca3af;
    transition: color .18s ease, transform .18s ease;
    flex-shrink: 0;
}

.bxh-card:hover .bxh-card-arrow {
    color: var(--c);
    transform: translateX(3px);
}