/* ==========================================================================
   7M SPORTS MOBILE & RESPONSIVE STYLESHEET
   ========================================================================== */

/* Default Desktop: Hide Mobile Bottom Nav and Mobile Card Container */
.sevenm-mobile-bottom-nav {
  display: none;
}

.sevenm-mobile-card-container {
  display: none;
}

@media screen and (max-width: 992px) {
  .sevenm-float-banner {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  html,
  body {
    max-width: 100vw;
    overflow-x: clip;
  }

  .sevenm-container {
    padding: 0 8px;
    max-width: 100%;
  }

  /* 1. Header & Top Bar Mobile */
  .sevenm-top-bar {
    display: none; /* Hide desktop top utility on mobile */
  }

  .sevenm-main-header {
    padding: 8px 0;
  }

  .sevenm-header-ad,
  .sevenm-header-ad-slot,
  .sevenm-ad-placeholder {
    display: none !important; /* Hide header ads completely on mobile */
  }

  .sevenm-mobile-aff-btn {
    display: none !important; /* Hide mobile header affiliate ad button as requested */
  }

  .sevenm-brand-text {
    font-size: 20px;
  }

  .sevenm-mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }

  .sevenm-mobile-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    z-index: 100000;
  }

  .sevenm-mobile-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--sevenm-primary, #008855);
    border-radius: 2px;
    transition: all 0.25s ease-in-out;
  }

  .sevenm-mobile-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .sevenm-mobile-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .sevenm-mobile-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* 2. Topbar Nav Mobile (Thanh Menu Môn Thể Thao & Trang Hệ Thống Cuộn Mượt, Chữ Đầy Đủ) */
  .sevenm-main-nav {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    background: var(--sevenm-primary-dark, #005a37) !important;
    padding: 0 !important;
    margin: 0 !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: none !important;
    z-index: 100 !important;
    overflow: hidden !important;
  }

  .sevenm-main-nav .sevenm-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: hidden !important;
  }

  .sevenm-nav-list {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 0 4px !important;
    margin: 0 !important;
    list-style: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important; /* Firefox */
  }

  .sevenm-nav-list::-webkit-scrollbar {
    display: none !important; /* Chrome / Safari */
    width: 0 !important;
    height: 0 !important;
  }

  .sevenm-nav-item {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-sizing: border-box !important;
  }

  .sevenm-nav-item:last-child {
    border-right: none !important;
  }

  .sevenm-nav-item > a,
  .sevenm-nav-main-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 42px !important;
    padding: 0 13px !important;
    box-sizing: border-box !important;
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    gap: 6px !important;
    border-bottom: 3px solid transparent !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    position: relative !important;
  }

  .sevenm-nav-item.active > a,
  .sevenm-nav-item.active .sevenm-nav-main-link,
  .sevenm-nav-item.current-menu-item > a,
  .sevenm-nav-item.current_page_item > a,
  .sevenm-nav-item.current-menu-ancestor > a {
    background: var(--sevenm-primary, #008855) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border-bottom-color: #ffeb3b !important;
  }

  .sevenm-sport-icon {
    font-size: 14px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: inherit !important;
  }

  .sevenm-nav-svg {
    width: 15px !important;
    height: 15px !important;
    stroke: currentColor !important;
    flex-shrink: 0 !important;
  }

  .sevenm-sport-emoji {
    font-size: 13px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
  }

  .sevenm-sport-name {
    display: inline-block !important;
    font-size: 12.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    color: inherit !important;
    font-weight: 700 !important;
  }

  .sevenm-live-counter {
    font-size: 9px !important;
    line-height: 1 !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffeb3b !important;
    font-weight: 800 !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
  }

  .sevenm-live-counter:empty,
  .sevenm-live-counter[data-count="0"] {
    display: none !important;
  }

  .sevenm-arrow,
  .sevenm-dropdown-submenu,
  .sevenm-nav-actions,
  .sevenm-nav-backdrop,
  .sevenm-mobile-toggle {
    display: none !important;
  }

  body[data-theme="dark"] .sevenm-main-nav,
  body.dark-mode .sevenm-main-nav {
    background: #0b1523 !important;
    border-bottom: 1px solid #1e293b !important;
  }

  body[data-theme="dark"] .sevenm-nav-item,
  body.dark-mode .sevenm-nav-item {
    border-right-color: rgba(255, 255, 255, 0.06) !important;
  }

  body[data-theme="dark"] .sevenm-nav-item > a,
  body.dark-mode .sevenm-nav-item > a {
    color: #cbd5e1 !important;
  }

  body[data-theme="dark"] .sevenm-nav-item.active > a,
  body.dark-mode .sevenm-nav-item.active > a {
    background: #1e293b !important;
    color: #38bdf8 !important;
    border-bottom-color: #38bdf8 !important;
  }

  /* 3. Sub-Navigation Bar on Mobile: Evenly Distributed Flex (Khít đều toàn màn hình) */
  .sevenm-subnav-bar {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    background: #ffffff;
    border-bottom: 2px solid var(--sevenm-primary, #008855);
    box-shadow: none !important;
  }

  .sevenm-subnav-bar .sevenm-container {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .sevenm-subnav-left {
    display: flex !important;
    width: 100% !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  .sevenm-current-sport-tag {
    display: none !important; /* Ẩn tag tên môn thể thao theo yêu cầu */
  }

  .sevenm-subview-tab-list {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .sevenm-subview-item {
    flex: 1 1 0% !important;
    display: flex !important;
    text-align: center !important;
  }

  .sevenm-subview-item a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 7px 2px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    color: #475569 !important;
    border-bottom: 2.5px solid transparent !important;
    gap: 2px;
  }

  .sevenm-subview-badge {
    font-size: 12px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  .sevenm-subview-name {
    font-size: 10.5px !important;
    white-space: nowrap !important;
  }

  .sevenm-subview-item.active a {
    color: var(--sevenm-primary, #008855) !important;
    border-bottom-color: var(--sevenm-primary, #008855) !important;
    background: #f0fdf4 !important;
  }

  body[data-theme="dark"] .sevenm-subnav-bar,
  body.dark-mode .sevenm-subnav-bar {
    background: #111c2e !important;
    border-bottom-color: var(--sevenm-primary, #38bdf8) !important;
  }

  body[data-theme="dark"] .sevenm-subview-item a,
  body.dark-mode .sevenm-subview-item a {
    color: #94a3b8 !important;
  }

  body[data-theme="dark"] .sevenm-subview-item.active a,
  body.dark-mode .sevenm-subview-item.active a {
    color: var(--sevenm-primary-light, #38bdf8) !important;
    border-bottom-color: var(--sevenm-primary, #38bdf8) !important;
    background: #1e293b !important;
  }

  .sevenm-subnav-search {
    display: none !important;
  }

  .sevenm-sports-search {
    display: none !important;
  }

  /* 4. Filter Bar Mobile */
  .sevenm-filter-bar {
    --sevenm-filter-height: 30px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px 10px;
  }

  .sevenm-filter-left {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 2px;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .sevenm-status-tabs {
    flex-wrap: nowrap;
    flex-shrink: 0;
  }

  .sevenm-tab-btn {
    padding: 0 8px;
    font-size: 11px;
    flex-shrink: 0;
  }

  .sevenm-btn-filter-league {
    padding: 0 10px;
    font-size: 11.5px;
    flex-shrink: 0;
  }

  .sevenm-filter-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px solid #f1f5f9;
  }

  .sevenm-filter-date-picker {
    padding: 0 6px;
  }

  .sevenm-filter-date-picker input[type="date"] {
    font-size: 11px;
    max-width: 105px;
  }

  .sevenm-sort-btn {
    padding: 0 8px;
    font-size: 11px;
  }

  .sevenm-bookmaker-select label {
    font-size: 11px;
  }

  .sevenm-bookmaker-select select {
    padding: 0 20px 0 6px;
    font-size: 11px;
  }

  /* 5. Mobile Match Items: Card View on Home & Live score pages */
  body.home .sevenm-desktop-table-container,
  body.front-page .sevenm-desktop-table-container,
  body.page-template-page-live .sevenm-desktop-table-container,
  #sevenm-football-wrapper .sevenm-desktop-table-container {
    display: none !important;
  }

  /* Show Data Tables on Sub-Pages (Results, Fixtures, Standings, Odds 2in1) on Mobile */
  .page-template-page-results .sevenm-desktop-table-container,
  .page-template-page-fixtures .sevenm-desktop-table-container,
  .page-template-page-standings .sevenm-desktop-table-container,
  .page-template-page-odds .sevenm-desktop-table-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .page-template-page-results .sevenm-match-table-wrapper,
  .page-template-page-fixtures .sevenm-match-table-wrapper,
  .page-template-page-standings .sevenm-match-table-wrapper,
  .page-template-page-odds .sevenm-match-table-wrapper {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--sevenm-radius-box, 5px) !important;
    box-shadow: none !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }

  /* Hide redundant mobile card view on odds page so full 2in1 table is displayed */
  #sevenm-odds-mobile-list {
    display: none !important;
  }

  /* Sub-Page Data Tables Mobile Compact Styles */
  .sevenm-results-table,
  .sevenm-fixtures-table,
  .sevenm-standings-table,
  .sevenm-odds-2in1-table {
    width: 100% !important;
    font-size: 11px !important;
    border-collapse: collapse !important;
  }

  .sevenm-results-table th,
  .sevenm-fixtures-table th,
  .sevenm-standings-table th,
  .sevenm-odds-2in1-table th {
    padding: 6px 4px !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  .sevenm-results-table td,
  .sevenm-fixtures-table td,
  .sevenm-standings-table td,
  .sevenm-odds-2in1-table td {
    padding: 6px 4px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
  }

  .sevenm-results-table .sevenm-team-logo,
  .sevenm-fixtures-table .sevenm-team-logo,
  .sevenm-standings-table .sevenm-team-logo,
  .sevenm-odds-2in1-table .sevenm-team-logo {
    width: 14px !important;
    height: 14px !important;
    vertical-align: middle !important;
    margin: 0 2px !important;
  }

  .sevenm-results-table .sevenm-team-name,
  .sevenm-fixtures-table .sevenm-team-name,
  .sevenm-odds-2in1-table .sevenm-team-name {
    font-size: 11px !important;
    max-width: 95px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }

  .sevenm-standings-table .td-team-name strong {
    font-size: 11.5px !important;
    max-width: 110px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }

  .sevenm-results-table .sevenm-league-tag,
  .sevenm-fixtures-table .sevenm-league-tag,
  .sevenm-odds-2in1-table .sevenm-league-tag {
    font-size: 9.5px !important;
    padding: 2px 4px !important;
    max-width: 70px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
  }

  .sevenm-results-table .sevenm-score-val {
    font-size: 13px !important;
    font-weight: bold !important;
  }

  .sevenm-btn-h2h {
    padding: 2px 6px !important;
    font-size: 10px !important;
    border-radius: 3px !important;
  }

  .sevenm-odds-2in1-table .sevenm-thead-row th {
    font-size: 10.5px !important;
    padding: 5px 3px !important;
  }

  .sevenm-odds-2in1-table .sevenm-thead-sub th {
    font-size: 9.5px !important;
    padding: 4px 2px !important;
  }

  .sevenm-odds-2in1-table .td-odd-val {
    font-size: 10.5px !important;
    padding: 5px 3px !important;
  }

  .sevenm-odds-2in1-table .td-odd-line {
    font-size: 11px !important;
    padding: 5px 3px !important;
  }

  .sevenm-rank-badge {
    width: 18px !important;
    height: 18px !important;
    font-size: 10.5px !important;
    line-height: 18px !important;
  }

  .sevenm-mobile-card-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 16px;
    box-sizing: border-box !important;
  }

  body.home .sevenm-match-table-wrapper,
  body.front-page .sevenm-match-table-wrapper,
  body.page-template-page-live .sevenm-match-table-wrapper {
    max-width: 100% !important;
    overflow: hidden !important;
    margin-bottom: 12px;
    border: none !important;
    background: transparent !important;
  }

  /* Polish Mobile Match Card */
  .sevenm-mobile-match-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 3.5px solid #cbd5e1;
    border-radius: var(--sevenm-radius-box, 5px);
    padding: 8px 10px;
    margin-bottom: 0;
    box-shadow: none;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
  }

  .sevenm-mobile-match-card:hover {
    background-color: #f8fafc;
  }

  /* Live & Pinned Card Highlights */
  .sevenm-mobile-match-card.sevenm-mcard-live,
  .sevenm-mobile-match-card[data-is-live="1"] {
    border-left: 3.5px solid #e60000 !important;
    background: #fffafa !important;
    box-shadow: none !important;
  }

  .sevenm-mobile-match-card.sevenm-mcard-pinned {
    border-left: 3.5px solid #f59e0b !important;
    background: #fffdf5 !important;
    box-shadow: none !important;
  }

  /* Card Header: League & Match Time/Status */
  .sevenm-mcard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 6px;
    border-bottom: 1px dashed #f1f5f9;
    margin-bottom: 6px;
  }

  .sevenm-mcard-league {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 65%;
    overflow: hidden;
  }

  .sevenm-mcard-pin-btn {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    cursor: pointer;
    flex-shrink: 0;
  }

  .sevenm-mcard-pin-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
  }

  .sevenm-mcard-pin-btn.pinned {
    color: #f59e0b !important;
  }

  .sevenm-mcard-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
  }

  .sevenm-mcard-lname {
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sevenm-mcard-status-box {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }

  .sevenm-mcard-time {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
  }

  /* Card Body: Home Team - Score - Away Team on a SINGLE ROW */
  .sevenm-mcard-body {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px;
    padding: 6px 0 !important;
    width: 100%;
    box-sizing: border-box;
  }

  /* Home Team (Left, align right towards score) */
  .sevenm-mcard-team-row:first-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    gap: 4px;
  }

  .sevenm-mcard-team-row:first-child .sevenm-mcard-tinfo {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px;
    min-width: 0 !important;
    width: 100%;
    overflow: hidden;
  }

  .sevenm-mcard-team-row:first-child .sevenm-mcard-tname {
    text-align: right;
  }

  .sevenm-mcard-team-row:first-child .sevenm-team-logo {
    order: 2;
  }

  .sevenm-mcard-team-row:first-child .sevenm-mcard-tname {
    order: 1;
  }

  .sevenm-mcard-team-row:first-child .sevenm-card-red {
    order: 0;
  }

  /* Away Team (Right, align left away from score) */
  .sevenm-mcard-team-row:last-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    gap: 4px;
  }

  .sevenm-mcard-team-row:last-child .sevenm-mcard-tinfo {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px;
    min-width: 0 !important;
    width: 100%;
    overflow: hidden;
  }

  .sevenm-mcard-team-row:last-child .sevenm-mcard-tname {
    text-align: left;
  }

  /* Center Score Box: Placed between Home & Away */
  .sevenm-mcard-team-row:first-child .sevenm-mcard-tscore {
    order: 3;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a;
    min-width: 18px;
    padding-left: 4px;
    flex-shrink: 0;
  }

  /* Add hyphen separator after home score */
  .sevenm-mcard-team-row:first-child .sevenm-mcard-tscore::after {
    content: "-";
    font-size: 13px;
    font-weight: 700;
    color: #94a3b8;
    margin-left: 4px;
  }

  .sevenm-mcard-team-row:last-child .sevenm-mcard-tscore {
    order: -1;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a;
    min-width: 18px;
    padding-right: 4px;
    flex-shrink: 0;
  }

  .sevenm-mcard-tinfo .sevenm-team-logo {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: contain;
  }

  .sevenm-mcard-tname {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sevenm-mcard-live .sevenm-mcard-tscore strong {
    color: #e60000 !important;
  }

  /* Card Footer: Odds, HT, Corners */
  .sevenm-mcard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 6px;
    border-top: 1px dashed #f1f5f9;
    margin-top: 2px;
  }

  .sevenm-mcard-odds {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 10px;
    color: #64748b;
  }

  .sevenm-odds-tag,
  .sevenm-ht-tag,
  .sevenm-corner-tag {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: 500;
    color: #475569;
    white-space: nowrap;
  }

  .sevenm-odds-tag strong {
    color: var(--sevenm-primary, #008855);
    font-weight: 700;
  }

  .sevenm-mcard-action {
    color: #94a3b8;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .sevenm-mcard-action .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
  }

  /* Dark mode adaptations for mobile match card */
  body[data-theme="dark"] .sevenm-mobile-match-card,
  body.dark-mode .sevenm-mobile-match-card {
    background-color: #162235 !important;
    border-color: #1e293b !important;
    border-left-color: #334155 !important;
  }

  body[data-theme="dark"] .sevenm-mobile-match-card.sevenm-mcard-live,
  body[data-theme="dark"] .sevenm-mobile-match-card[data-is-live="1"],
  body.dark-mode .sevenm-mobile-match-card.sevenm-mcard-live {
    background-color: rgba(65, 18, 18, 0.45) !important;
    border-left-color: #ff3333 !important;
  }

  body[data-theme="dark"] .sevenm-mobile-match-card.sevenm-mcard-pinned,
  body.dark-mode .sevenm-mobile-match-card.sevenm-mcard-pinned {
    background-color: #1f271b !important;
    border-left-color: #f59e0b !important;
  }

  body[data-theme="dark"] .sevenm-mcard-header,
  body[data-theme="dark"] .sevenm-mcard-footer,
  body.dark-mode .sevenm-mcard-header,
  body.dark-mode .sevenm-mcard-footer {
    border-color: #1e293b !important;
  }

  body[data-theme="dark"] .sevenm-mcard-tname,
  body.dark-mode .sevenm-mcard-tname {
    color: #f1f5f9 !important;
  }

  body[data-theme="dark"] .sevenm-mcard-tscore,
  body.dark-mode .sevenm-mcard-tscore {
    color: #ffffff !important;
  }

  body[data-theme="dark"] .sevenm-mcard-lname,
  body.dark-mode .sevenm-mcard-lname {
    color: #94a3b8 !important;
  }

  body[data-theme="dark"] .sevenm-odds-tag,
  body[data-theme="dark"] .sevenm-ht-tag,
  body[data-theme="dark"] .sevenm-corner-tag,
  body.dark-mode .sevenm-odds-tag,
  body.dark-mode .sevenm-ht-tag,
  body.dark-mode .sevenm-corner-tag {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
  }

  /* Basketball, Tennis & Volleyball Mobile Cards */
  #sevenm-basketball-wrapper .sevenm-desktop-table-container,
  #sevenm-tennis-wrapper .sevenm-desktop-table-container,
  #sevenm-volleyball-wrapper .sevenm-desktop-table-container {
    display: none !important;
  }

  .sevenm-mcard-basket .sevenm-mcard-team-row,
  .sevenm-mcard-tennis .sevenm-mcard-team-row,
  .sevenm-mcard-volleyball .sevenm-mcard-team-row {
    padding: 3px 0;
    font-size: 12.5px;
  }

  .sevenm-mcard-basket .sevenm-mcard-footer,
  .sevenm-mcard-tennis .sevenm-mcard-footer,
  .sevenm-mcard-volleyball .sevenm-mcard-footer {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
  }

  /* Date nav bar on mobile */
  .sevenm-date-nav-bar {
    padding: 6px 8px;
    margin: 8px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sevenm-date-tabs {
    flex-wrap: nowrap;
    gap: 4px;
  }

  .sevenm-date-tab {
    padding: 3px 6px;
    font-size: 10px;
    flex-shrink: 0;
  }

  /* 6. Mobile Sticky Bottom Navigation */
  .sevenm-mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 52px;
    background: #ffffff;
    border-top: 1px solid #d0d7de;
    box-shadow: none !important;
    z-index: 9000;
    justify-content: space-around;
    align-items: center;
  }

  .sevenm-mobile-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 10px;
    text-decoration: none;
    flex: 1;
    height: 100%;
  }

  .sevenm-mobile-bottom-nav a .dashicons {
    font-size: 20px;
    height: 20px;
    margin-bottom: 2px;
  }

  .sevenm-mobile-bottom-nav a.active {
    color: var(--sevenm-primary, #008855);
    font-weight: bold;
  }

  /* 7. Modals on Mobile (No Broken Frame, Compact Fit) */
  .sevenm-modal-dialog {
    width: 96% !important;
    max-width: 96% !important;
    max-height: 92vh !important;
    margin: 8px auto !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  .sevenm-modal-header {
    padding: 8px 12px !important;
  }

  .sevenm-modal-title {
    font-size: 13.5px !important;
  }

  .sevenm-modal-close {
    font-size: 22px !important;
    padding: 0 4px !important;
  }

  .sevenm-modal-body {
    padding: 8px 6px !important;
    overflow-x: hidden !important;
  }

  /* Scoreboard Card in Detail Modal */
  .sevenm-detail-scoreboard {
    padding: 10px 4px !important;
    margin-bottom: 8px !important;
    border-radius: 6px !important;
    gap: 4px !important;
  }

  .sevenm-detail-scoreboard .sevenm-detail-logo {
    width: 36px !important;
    height: 36px !important;
  }

  .sevenm-detail-scoreboard h4 {
    font-size: 11.5px !important;
    margin: 3px 0 2px 0 !important;
    max-width: 95px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .sevenm-badge-venue {
    font-size: 9px !important;
    padding: 1px 4px !important;
  }

  .sevenm-detail-league {
    font-size: 10px !important;
  }

  .sevenm-detail-score {
    font-size: 20px !important;
    letter-spacing: 1px !important;
    margin: 2px 0 !important;
  }

  #detail-status-badge {
    font-size: 9.5px !important;
    padding: 1px 6px !important;
  }

  /* Detail Tabs */
  .sevenm-detail-tabs {
    gap: 4px !important;
    margin-bottom: 8px !important;
    border-bottom-width: 2px !important;
  }

  .sevenm-detail-tab-btn {
    padding: 6px 8px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    flex: 1 !important;
    text-align: center !important;
  }

  /* Tab Pane & Table Structure */
  .sevenm-detail-tab-pane {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .sevenm-detail-table {
    width: 100% !important;
    table-layout: fixed !important;
    font-size: 10px !important;
    border-collapse: collapse !important;
  }

  .sevenm-detail-table th {
    padding: 5px 2px !important;
    font-size: 9.5px !important;
    background: #f0f2f5 !important;
    text-align: center !important;
    white-space: nowrap !important;
    border-bottom: 1px solid #ddd !important;
  }

  .sevenm-detail-table td {
    padding: 5px 2px !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    border-bottom: 1px solid #eee !important;
  }

  /* HIDE LEAGUE COLUMN ON MOBILE */
  .sevenm-detail-table .col-detail-league,
  .sevenm-detail-table th.col-detail-league,
  .sevenm-detail-table td.col-detail-league,
  #pane-h2h .sevenm-detail-table th:nth-child(2),
  #pane-h2h .sevenm-detail-table td:nth-child(2) {
    display: none !important;
  }

  /* Compact Columns for H2H Table */
  .sevenm-detail-table .col-detail-date {
    width: 48px !important;
    font-size: 8.5px !important;
    color: #666 !important;
    text-align: center !important;
    white-space: nowrap !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
  }

  .sevenm-detail-table .col-detail-home {
    text-align: right !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 10px !important;
    padding-right: 2px !important;
  }

  .sevenm-detail-table .col-detail-away {
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 10px !important;
    padding-left: 2px !important;
  }

  .sevenm-detail-table .sevenm-team-logo {
    width: 12px !important;
    height: 12px !important;
    vertical-align: middle !important;
    margin: 0 1px !important;
    display: inline-block !important;
  }

  .sevenm-detail-table .col-detail-score {
    width: 34px !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: 10.5px !important;
    font-weight: bold !important;
  }

  .sevenm-detail-table .col-detail-ht {
    width: 26px !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: 9px !important;
    color: #777 !important;
  }

  .sevenm-detail-table .col-detail-odds {
    width: 36px !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: 9px !important;
  }

  /* Odds Table in pane-odds */
  #pane-odds .sevenm-detail-table {
    table-layout: auto !important;
  }

  #pane-odds .sevenm-detail-table th,
  #pane-odds .sevenm-detail-table td {
    font-size: 9px !important;
    padding: 4px 2px !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  #pane-odds .sevenm-detail-table td:first-child {
    font-weight: bold !important;
    text-align: left !important;
  }

  .sevenm-league-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }

  /* 8. Mobile Vietnamese News List Layout (Compact Fit) */
  .sevenm-category-header-box {
    padding: 12px 14px;
    margin-bottom: 10px;
    border-radius: 6px;
  }

  .sevenm-category-title {
    font-size: 16px;
  }

  .sevenm-cat-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
  }

  .sevenm-cat-icon .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
  }

  .sevenm-cat-badge-count {
    font-size: 10.5px;
    padding: 2px 8px;
  }

  .sevenm-subcat-tabs {
    margin-top: 8px;
    padding-top: 8px;
    gap: 6px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .sevenm-subcat-tabs::-webkit-scrollbar {
    display: none;
  }

  .sevenm-subcat-tab {
    font-size: 11.5px;
    padding: 4px 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .sevenm-news-layout-wrapper {
    margin-top: 8px;
  }

  .sevenm-news-main-container,
  .sevenm-single-main-container {
    padding: 12px 14px;
    border-radius: 6px;
  }

  .sevenm-article-title {
    font-size: 19px;
    line-height: 1.35;
    margin-bottom: 10px;
  }

  .sevenm-article-meta-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 10px;
  }

  .sevenm-article-body {
    font-size: 15px;
    line-height: 1.7;
  }

  .sevenm-sidebar {
    width: 100%;
    margin-top: 12px;
    gap: 12px;
  }

  .sevenm-news-item {
    gap: 10px;
    padding: 10px 0;
    align-items: stretch;
  }

  .sevenm-news-thumb-wrap {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    height: 76px;
    aspect-ratio: auto;
    border-radius: 4px;
  }

  .sevenm-news-placeholder {
    min-height: 76px;
  }

  .placeholder-icon {
    font-size: 18px;
  }

  .placeholder-brand {
    font-size: 9px;
  }

  .sevenm-news-info {
    justify-content: flex-start;
  }

  .sevenm-news-cat-badge {
    font-size: 9.5px;
    padding: 1px 5px;
    margin-bottom: 3px;
  }

  .sevenm-news-title {
    font-size: 13.5px;
    line-height: 1.35;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .sevenm-news-excerpt {
    display: none; /* Hide excerpt on mobile for clean & compact news feed */
  }

  .sevenm-news-meta {
    font-size: 10.5px;
    gap: 6px;
    margin-top: auto;
  }

  .sevenm-news-meta-item .dashicons {
    font-size: 11px;
    width: 11px;
    height: 11px;
  }

  .sevenm-btn-loadmore {
    width: 100%;
    padding: 9px 16px;
    font-size: 13px;
  }

  /* 2-Column Latest News Module Mobile: Strictly Image Left, Title Right */
  .sevenm-latest-news-section {
    padding: 12px 14px;
    margin: 12px 0;
  }

  .sevenm-module-header {
    padding-bottom: 8px;
    margin-bottom: 10px;
  }

  .sevenm-module-title {
    font-size: 13.5px;
  }

  .sevenm-latest-news-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .sevenm-grid-news-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
  }

  .sevenm-grid-news-card:last-child {
    border-bottom: none;
  }

  .sevenm-grid-news-thumb-wrap {
    width: 95px;
    min-width: 95px;
    max-width: 95px;
    height: 68px;
    border-radius: 4px;
  }

  .sevenm-grid-news-body {
    min-height: 68px;
  }

  .sevenm-grid-news-title {
    font-size: 12.5px;
    line-height: 1.35;
    margin-bottom: 3px;
  }

  .sevenm-grid-news-cat {
    font-size: 9.5px;
    margin-bottom: 2px;
  }

  .sevenm-grid-news-meta {
    font-size: 10.5px;
  }

  /* 18. Content Images Mobile Centering & Responsiveness */
  .alignleft,
  .alignright,
  figure.alignleft,
  figure.alignright,
  img.alignleft,
  img.alignright {
    float: none !important;
    display: block !important;
    margin: 14px auto !important;
    text-align: center !important;
    max-width: 100% !important;
  }

  .wp-caption {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .entry-content,
  .sevenm-article-body {
    font-size: 15px;
    line-height: 1.75;
  }
}

/* 19. Extra Small Screens (<= 480px): Maximum compact card readability & zero page break */
@media screen and (max-width: 480px) {
  .sevenm-container {
    padding: 0 4px;
  }

  .sevenm-mobile-match-card {
    padding: 7px 8px !important;
  }

  .sevenm-mcard-lname {
    font-size: 10.5px !important;
    max-width: 140px !important;
  }

  .sevenm-mcard-time {
    font-size: 10px !important;
  }

  .sevenm-mcard-tname {
    font-size: 11px !important;
  }

  .sevenm-mcard-team-row:first-child .sevenm-mcard-tscore,
  .sevenm-mcard-team-row:last-child .sevenm-mcard-tscore {
    font-size: 13.5px !important;
  }

  .sevenm-odds-tag,
  .sevenm-ht-tag,
  .sevenm-corner-tag {
    font-size: 9px !important;
    padding: 1px 3px !important;
  }

  .sevenm-subview-item a {
    padding: 6px 1px !important;
    font-size: 10px !important;
  }

  .sevenm-subview-badge {
    font-size: 11px !important;
  }

  .sevenm-subview-name {
    font-size: 9.5px !important;
  }
}



