/* =============================================================
   modern-2026.css - 2ded.com New Design System
   Theme: Dark Wine Red (inspired by articles.2ded.com/ether-fi.php)
   Version: 2026.2
   Path: /home4/evotron/public_html/2ded.com/articles/modern-2026.css
   ============================================================= */

/* =============================================================
   COLOR TOKENS
   --bg-page      : wine red page background
   --bg-content   : dark content area
   --bg-card      : dark card surface
   --bg-card-alt  : slightly lighter card
   --accent       : red/gold headline accent
   --accent2      : purple (step numbers, badges)
   --text-primary : white
   --text-secondary: light gray
   --text-muted   : muted gray
   --border       : subtle dark border
   ============================================================= */

/* =============================================================
   RESET & BASE
   ============================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: #8B0020;
  font-family: "Sarabun", Arial, sans-serif;
  color: #e0e0e0;
  font-size: 15px;
  line-height: 1.7;
}

/* =============================================================
   TOPBAR
   ============================================================= */
.new-topbar {
  background: #0d0d0d;
  border-bottom: 1px solid #2a0a0a;
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 52px;
  position: sticky;
  top: 0;
  z-index: 1000;
  gap: 16px;
}
.new-logo {
  font-size: 22px;
  font-weight: 700;
  color: #f0f0f0;
  letter-spacing: -1px;
  text-decoration: none;
  flex-shrink: 0;
}
.new-logo em  { color: #E24B4A; font-style: normal; }
.new-logo sub {
  font-size: 11px;
  color: #555;
  font-weight: 400;
  vertical-align: baseline;
  margin-left: 1px;
}

/* nav-menu - รายการหลัก */
.new-nav { display: flex; flex: 1; overflow: visible; }
.nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}
.nav-menu > li { position: relative; }
.nav-menu > li > a {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px 11px;
  font-size: 12px;
  color: #aaa;
  text-decoration: none;
  border-radius: 5px;
  white-space: nowrap;
  height: 52px;
  border-bottom: 2px solid transparent;
}
.nav-menu > li > a:hover       { color: #f0f0f0; background: #1a0a0a; }
.nav-menu > li > a.act         { color: #E24B4A; border-bottom-color: #E24B4A; background: transparent; }
.nav-menu > li > a .ti         { font-size: 11px; opacity: 0.6; }

/* dropdown */
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: #111;
  border: 1px solid #2a2a2a;
  border-top: 2px solid #E24B4A;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  list-style: none;
  padding: 6px 0;
  z-index: 2000;
}
.has-dropdown:hover .nav-dropdown { display: block; }
.nav-dropdown li a {
  display: block;
  padding: 7px 16px;
  font-size: 12px;
  color: #aaa;
  text-decoration: none;
  white-space: nowrap;
}
.nav-dropdown li a:hover { color: #E24B4A; background: #1a0808; }
.nav-divider { height: 1px; background: #2a2a2a; margin: 5px 0; }

.new-topbar-cta { display: flex; gap: 6px; flex-shrink: 0; }
.btn-live {
  background: #E24B4A;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
}
.btn-live:hover  { background: #c03535; color: #fff; }
.btn-movie {
  background: #185FA5;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
}
.btn-movie:hover { background: #0e4578; color: #fff; }

/* =============================================================
   BANNER ZONES
   ============================================================= */
.zone-banner {
  padding: 10px 20px;
  background: #0d0d0d;
  border-bottom: 1px solid #1a0808;
  text-align: center;
}
.zone-banner img { max-width: 100%; height: auto; display: inline-block; }

.art-inline-banner {
  margin: 20px 0;
  text-align: center;
  padding: 10px;
  background: #141414;
  border-radius: 8px;
  border: 1px solid #2a2a2a;
}
.art-inline-banner img { max-width: 100%; height: auto; }

/* =============================================================
   BREADCRUMB
   ============================================================= */
.new-breadcrumb {
  background: #0d0d0d;
  border-bottom: 1px solid #1a0808;
  padding: 8px 20px;
  font-size: 12px;
  color: #555;
  display: flex;
  align-items: center;
  gap: 5px;
}
.new-breadcrumb a        { color: #777; text-decoration: none; }
.new-breadcrumb a:hover  { color: #E24B4A; }
.new-breadcrumb .sep     { color: #333; }
.new-breadcrumb .cur     { color: #aaa; }

/* =============================================================
   PAGE LAYOUT
   ============================================================= */

/* wrapper ที่ทำ gradient border รอบเนื้อหา */
.new-page-outer {
  background: #8B0020;
  padding: 3px;                          /* ความหนาของ border gradient */
  background: linear-gradient(
    to bottom,
    #6b0018 0%,
    #E24B4A 30%,
    #E24B4A 70%,
    #6b0018 100%
  );
  max-width: 1200px;
  margin: 0 auto;
}

.new-page-wrap {
  display: flex;
  gap: 0;
  background: #111;       /* พื้นหลังเนื้อหา ปิดทับ gradient ด้านใน */
}
.new-article-col {
  flex: 1;
  min-width: 0;
  background: #111;
  padding: 24px 28px;
  border-right: 1px solid #1e1e1e;
}
.new-sidebar-col {
  width: 220px;
  flex-shrink: 0;
  background: #0d0d0d;
  padding: 16px;
}

/* =============================================================
   ARTICLE - Category Badge & Meta
   ============================================================= */
.art-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #E24B4A;
  background: #2a0808;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
  border: 1px solid #5a1515;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.art-h1 {
  font-size: 24px;
  font-weight: 700;
  color: #f0f0f0;
  line-height: 1.4;
  margin-bottom: 10px;
}
.art-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #1e1e1e;
  font-size: 12px;
  color: #555;
}
.art-meta span { display: flex; align-items: center; gap: 4px; }
.art-meta .ok  { color: #3dba6e; }

/* =============================================================
   ARTICLE - Body Content
   ============================================================= */
.art-intro {
  font-size: 14px;
  color: #bbb;
  line-height: 1.85;
  margin-bottom: 22px;
  padding: 14px 16px;
  background: #161616;
  border-radius: 8px;
  border-left: 3px solid #E24B4A;
}

.art-h2 {
  font-size: 17px;
  font-weight: 700;
  color: #E24B4A;
  margin: 24px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #2a0808;
  display: flex;
  align-items: center;
  gap: 8px;
}
.art-h2::before {
  content: "";
  width: 4px;
  height: 20px;
  background: #E24B4A;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}

.art-h3 { font-size: 15px; font-weight: 700; color: #d0d0d0; margin: 20px 0 10px; }
.art-h4 { font-size: 14px; font-weight: 700; color: #c0c0c0; margin: 18px 0 8px; }
.art-h5 { font-size: 14px; font-weight: 600; color: #aaa; margin: 16px 0 8px; }
.art-h6 { font-size: 13px; font-weight: 600; color: #E24B4A; margin: 14px 0 6px; }

.art-p { font-size: 14px; color: #aaa; line-height: 1.9; margin-bottom: 14px; }
.art-p a        { color: #7bafd4; text-decoration: underline; }
.art-p a:hover  { color: #E24B4A; }
.art-p strong   { color: #e8e8e8; }

.art-img-wrap { margin: 16px 0; text-align: center; }
.art-img-wrap img          { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid #2a2a2a; }
.art-img-wrap .img-caption { font-size: 11px; color: #555; margin-top: 6px; }

/* =============================================================
   FEATURE GRID
   ============================================================= */
.feat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.feat-card {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.feat-icon {
  width: 36px;
  height: 36px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.feat-icon.r { background: #2a0808; color: #E24B4A; }
.feat-icon.b { background: #0a1a2e; color: #5b9bd5; }
.feat-icon.g { background: #0a1a0a; color: #3dba6e; }
.feat-icon.a { background: #1a1200; color: #d4a017; }
.feat-title  { font-size: 13px; font-weight: 700; color: #e0e0e0; margin-bottom: 3px; }
.feat-desc   { font-size: 12px; color: #777; line-height: 1.6; }

/* =============================================================
   INFO TABLE
   ============================================================= */
.info-tbl {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 13px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #2a2a2a;
}
.info-tbl thead tr              { background: #1a1a1a; }
.info-tbl th {
  padding: 9px 12px;
  text-align: left;
  font-weight: 600;
  color: #777;
  border-bottom: 1px solid #2a2a2a;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.info-tbl td                    { padding: 9px 12px; border-bottom: 1px solid #1a1a1a; color: #aaa; }
.info-tbl tr:last-child td      { border-bottom: none; }
.info-tbl tr:hover td           { background: #161616; }
.info-tbl td:first-child        { color: #e0e0e0; font-weight: 600; width: 36%; }

/* =============================================================
   SPONSOR LIST
   ============================================================= */
.sponsor-list { list-style: none; margin-bottom: 16px; }
.sponsor-list li {
  padding: 6px 0;
  border-bottom: 1px solid #1a1a1a;
  font-size: 13px;
  color: #aaa;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sponsor-list li::before  { content: "\2014"; font-size: 12px; color: #E24B4A; }
.sponsor-list li:last-child { border-bottom: none; }

/* =============================================================
   CTA BOX
   ============================================================= */
.cta-box {
  background: #1a0808;
  border: 1px solid #5a1515;
  border-radius: 10px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0;
}
.cta-icon {
  width: 48px;
  height: 48px;
  background: #2a0808;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #E24B4A;
  flex-shrink: 0;
}
.cta-title  { font-size: 14px; font-weight: 700; color: #f0f0f0; margin-bottom: 3px; }
.cta-sub    { font-size: 12px; color: #777; }
.cta-btn {
  background: #E24B4A;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 7px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-block;
}
.cta-btn:hover { background: #c03535; color: #fff; }

/* =============================================================
   STEP LIST
   ============================================================= */
.step-list { margin-bottom: 20px; }
.step-item {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #1a1a1a;
}
.step-item:last-child { border-bottom: none; }
.step-num {
  width: 30px;
  height: 30px;
  background: #4a1a8a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  margin-top: 1px;
  border: none;
}
.step-title { font-size: 13px; font-weight: 700; color: #e0e0e0; margin-bottom: 3px; }
.step-desc  { font-size: 12px; color: #777; line-height: 1.6; }

/* =============================================================
   TAG LIST (SEO)
   ============================================================= */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #1e1e1e;
}
.tag {
  font-size: 11px;
  color: #777;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  padding: 4px 10px;
  border-radius: 20px;
  text-decoration: none;
  display: inline-block;
}
.tag:hover { color: #E24B4A; border-color: #5a1515; background: #2a0808; }

/* =============================================================
   SIDEBAR
   ============================================================= */
.sb-section  { margin-bottom: 20px; }
.sb-title {
  font-size: 11px;
  font-weight: 700;
  color: #e0e0e0;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #2a2a2a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sb-banner-slot {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
  text-align: center;
}
.sb-banner-slot img { max-width: 100%; height: auto; display: block; }

.sb-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 0;
  font-size: 12px;
  color: #888;
  text-decoration: none;
  border-bottom: 1px solid #1a1a1a;
}
.sb-link:last-child  { border-bottom: none; }
.sb-link:hover       { color: #E24B4A; }
.sb-link::before     { content: "\203A"; color: #E24B4A; font-weight: 700; font-size: 14px; }

.sb-rel-item {
  display: flex;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #1a1a1a;
  cursor: pointer;
  text-decoration: none;
}
.sb-rel-item:last-child   { border-bottom: none; }
.sb-rel-title             { font-size: 12px; color: #888; line-height: 1.4; margin-bottom: 2px; }
.sb-rel-title:hover       { color: #E24B4A; }
.sb-rel-meta              { font-size: 10px; color: #444; }

/* =============================================================
   FOOTER - Base (dark theme)
   ============================================================= */
.new-footer { background: #111; border-top: none; margin-top: 0; }

/* =============================================================
   FOOTER - Top (4 column)
   ============================================================= */
.footer-top {
  padding: 32px 24px 24px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 28px;
  border-bottom: 1px solid #2a2a2a;
  background: #111;
}
.ft-logo-wrap {
  font-size: 22px;
  font-weight: 700;
  color: #f0f0f0;
  letter-spacing: -1px;
  margin-bottom: 10px;
}
.ft-logo-wrap em { color: #E24B4A; font-style: normal; }
.ft-desc {
  font-size: 12px;
  color: #aaa;
  line-height: 1.85;
  margin-bottom: 16px;
}
.ft-social { display: flex; gap: 8px; }
.ft-social-btn {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #aaa;
  text-decoration: none;
  background: #1a1a1a;
}
.ft-social-btn:hover { border-color: #E24B4A; color: #E24B4A; background: #2a0d0d; }

.ft-col-title {
  font-size: 11px;
  font-weight: 700;
  color: #f0f0f0;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #2a2a2a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ft-link { display: block; font-size: 12px; color: #aaa; text-decoration: none; padding: 4px 0; line-height: 1.6; }
.ft-link:hover { color: #E24B4A; }

/* =============================================================
   FOOTER - Mid (4 column links)
   ============================================================= */
.footer-mid {
  padding: 20px 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  border-bottom: 1px solid #2a2a2a;
  background: #0d0d0d;
}
.fm-sec-title {
  font-size: 11px;
  font-weight: 700;
  color: #f0f0f0;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-bottom: 6px;
  border-bottom: 1px solid #2a2a2a;
}
.fm-link { display: block; font-size: 12px; color: #888; padding: 3px 0; text-decoration: none; line-height: 1.7; }
.fm-link:hover { color: #E24B4A; }

/* =============================================================
   FOOTER - Partner Cards
   ============================================================= */
.footer-partner { padding: 18px 24px; border-bottom: 1px solid #2a2a2a; background: #111; }
.fp-title { font-size: 12px; font-weight: 700; color: #f0f0f0; margin-bottom: 14px; }
.fp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.fp-card {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.fp-card:hover  { border-color: #E24B4A; background: #2a0d0d; }
.fp-icon {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.fp-icon.r { background: #2a0d0d; color: #E24B4A; }
.fp-icon.b { background: #0a1a2e; color: #5b9bd5; }
.fp-icon.g { background: #0e1a0a; color: #3dba6e; }
.fp-name   { font-size: 13px; font-weight: 700; color: #e0e0e0; }
.fp-sub    { font-size: 11px; color: #555; }

/* =============================================================
   FOOTER - SEO Content Tabs
   ============================================================= */
.footer-seo  { padding: 20px 24px; border-bottom: 1px solid #2a2a2a; background: #0d0d0d; }
.fs-title    { font-size: 12px; font-weight: 700; color: #f0f0f0; margin-bottom: 12px; }
.fs-tabs     { display: flex; gap: 5px; margin-bottom: 16px; flex-wrap: wrap; }
.fs-tab {
  font-size: 12px;
  color: #888;
  background: #1a1a1a;
  border: 1px solid #333;
  padding: 5px 14px;
  border-radius: 20px;
  cursor: pointer;
  text-decoration: none;
}
.fs-tab.act  { background: #2a0808; color: #E24B4A; border-color: #5a1515; font-weight: 600; }
.fs-tab:hover { color: #E24B4A; border-color: #5a1515; }
.fs-content  { font-size: 12px; color: #888; line-height: 1.9; columns: 2; gap: 28px; }
.fs-content p { break-inside: avoid; margin-bottom: 10px; }
.fs-content a { color: #7bafd4; text-decoration: underline; }
.fs-content a:hover { color: #E24B4A; }

/* =============================================================
   FOOTER - Sitemap Chips
   ============================================================= */
.footer-sitemap { padding: 16px 24px; border-bottom: 1px solid #2a2a2a; background: #111; }
.fmap-title     { font-size: 12px; font-weight: 700; color: #f0f0f0; margin-bottom: 12px; }
.fmap-row       { display: flex; flex-wrap: wrap; gap: 5px; }
.fmap-chip {
  font-size: 11px;
  color: #888;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  padding: 4px 10px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
}
.fmap-chip:hover { color: #E24B4A; border-color: #5a1515; background: #2a0d0d; }

/* =============================================================
   FOOTER - Copyright Bar
   gradient เชื่อม content area (#111) กับ page background (#8B0020)
   ============================================================= */
.footer-bar {
  background: linear-gradient(to bottom, #111 0%, #3a0a12 60%, #6b0018 100%);
  padding: 32px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.fb-copy-box { display: contents; }
.fb-copy {
  font-size: 13px;
  color: #ddd;
  font-weight: 400;
  letter-spacing: 0.2px;
  line-height: 1.6;
}
.fb-disclaimer {
  font-size: 11px;
  color: #aaa;
  line-height: 1.7;
  max-width: 660px;
}
.fb-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}
.fb-lnk {
  font-size: 11px;
  color: #ffaaaa;
  text-decoration: none;
}
.fb-lnk:hover { color: #fff; text-decoration: underline; }
.fb-lnk.highlight { color: #fff; font-weight: 500; }
.fb-lnk.highlight:hover { color: #ffd0d0; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 768px) {
  .new-topbar       { padding: 0 12px; height: 48px; }
  .nav-menu         { display: none; }
  .new-page-wrap    { flex-direction: column; }
  .new-sidebar-col  { width: 100%; border-top: 1px solid #1e1e1e; }
  .new-article-col  { padding: 16px; }
  .footer-top,
  .footer-mid       { grid-template-columns: 1fr 1fr; }
  .feat-grid        { grid-template-columns: 1fr; }
  .fp-grid          { grid-template-columns: 1fr; }
  .fs-content       { columns: 1; }
}
@media (max-width: 480px) {
  .footer-top,
  .footer-mid { grid-template-columns: 1fr; }
}

/* =============================================================
   ODDS TABLE - หน้าอัตราต่อรอง (soccer/อัตราต่อรอง)
   ============================================================= */
.odds-wrap { overflow-x: auto; margin-bottom: 24px; }

.odds-tbl {
  width: 100%; border-collapse: collapse;
  font-size: 12px; font-family: "Sarabun", Arial, sans-serif;
}
.odds-tbl th {
  background: #2a2a2a; color: #ccc;
  padding: 7px 8px; text-align: center;
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.3px; white-space: nowrap;
  border-bottom: 2px solid #E24B4A;
}
.odds-tbl td {
  padding: 6px 8px; text-align: center;
  font-size: 12px; border-bottom: 1px solid #1e1e1e;
  white-space: nowrap;
}
.row-a td { background: #161616; }
.row-b td { background: #111; }

.odds-date-row td {
  background: #0a0a0a !important;
  border-top: 2px solid #111;
  border-bottom: 2px solid #E24B4A;
}
.odds-date-txt { font-size: 13px; font-weight: 700; color: #FFD700; letter-spacing: 1px; }

.odds-league-row td { background: #E24B4A !important; padding: 5px 10px; }
.odds-league-league { font-size: 12px; font-weight: 700; color: #FFF085; }
.odds-league-match  { font-size: 11px; color: #fff; opacity: 0.85; }

.col-time      { color: #7bafd4; font-weight: 600; }
.col-home      { color: #e0e0e0; text-align: left !important; padding-left: 10px !important; }
.col-away      { color: #e0e0e0; text-align: left !important; padding-left: 10px !important; }
.col-score     { color: #f0f0f0; font-weight: 700; }
.col-hdc-open  { color: #97C459; }
.col-odds-open { color: #E2994B; }

.hdc-up   { background: #1a3a0a !important; color: #97C459 !important; font-weight: 700; }
.hdc-down { background: #3a0a0a !important; color: #fff !important; font-weight: 700; }
.hdc-side { background: #0a0a3a !important; color: #fff !important; font-weight: 700; }
.hdc-same { color: #7bafd4; }

.th-time  { width: 7%; }
.th-home  { width: 22%; }
.th-hdc   { width: 6%; }
.th-away  { width: 22%; }
.th-odds  { width: 13%; }
.th-score { width: 6%; }

/* =============================================================
   EPISODE BUTTONS - หน้าดูหนัง play.php
   ============================================================= */
.ep-section { margin-bottom: 20px; }

.ep-label {
  font-size: 11px; font-weight: 700; color: #aaa;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 10px; display: flex; align-items: center; gap: 5px;
}

.ep-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  overflow: hidden;
}

.ep-btn {
  font-size: 12px;
  color: #888;
  background: #1a1a1a;
  padding: 7px 14px;
  text-decoration: none;
  border-right: 1px solid #2a2a2a;
  border-bottom: 1px solid #2a2a2a;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.ep-btn:last-child  { border-right: none; }
.ep-btn:hover       { color: #E24B4A; background: #2a0808; }
.ep-btn.active      { background: #E24B4A; color: #fff; font-weight: 600; }

.ep-current {
  font-size: 12px; font-weight: 600;
  color: #E24B4A; background: #2a0808;
  padding: 2px 10px; border-radius: 4px;
  border: 1px solid #5a1515;
}
.ep-sep { color: #333; padding: 0 2px; user-select: none; }

/* =============================================================
   FLASHSCORE TABLE - หน้าหลัก (main/index.php)
   ============================================================= */
.flash-tbl { width:100%; border-collapse:collapse; font-size:12px; }
.flash-tbl td { padding:5px 8px; border-bottom:1px solid #1a1a1a; }
.flash-league td { background:#E24B4A !important; padding:5px 10px; }
.flash-league-name { font-size:12px; font-weight:700; color:#fff; }
.flash-row-a td { background:#161616; }
.flash-row-b td { background:#111; }
.flash-time   { color:#7bafd4; font-weight:600; text-align:center; width:12%; }
.flash-status { text-align:center; width:6%; }
.flash-home   { color:#e0e0e0; text-align:right; width:33%; padding-right:8px !important; }
.flash-score  { color:#f0f0f0; font-weight:700; text-align:center; width:10%; }
.flash-away   { color:#e0e0e0; text-align:left; width:33%; padding-left:8px !important; }

/* =============================================================
   PREDICT TABLE - ทีเด็ดบอล (main/index.php)
   ============================================================= */
.predict-tbl { width:100%; border-collapse:collapse; font-size:12px; }
.predict-tbl th {
  background:#2a2a2a; color:#ccc; padding:7px 8px;
  font-size:11px; text-align:center; border-bottom:2px solid #E24B4A;
}
.predict-tbl td { padding:6px 8px; border-bottom:1px solid #1a1a1a; text-align:center; }
.predict-row-a td { background:#161616; }
.predict-row-b td { background:#111; }
.tip-home { color:#E24B4A; font-weight:700; }
.tip-draw { color:#888; font-weight:700; }
.tip-away { color:#7bafd4; font-weight:700; }

/* =============================================================
   ETHER.FI CASH CARD - หน้า ether-fi.php
   ============================================================= */
.etherfi-tag-list { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 20px; }
.etherfi-tag { font-size:12px; background:#1a1a1a; border:1px solid #2a2a2a; border-radius:20px; padding:4px 12px; color:#aaa; }

.etherfi-feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:16px 0; }
.etherfi-feature-card { background:#1a1a1a; border:1px solid #2a2a2a; border-radius:10px; padding:18px; }
.etherfi-feature-card h4 { font-size:14px; font-weight:600; margin:0 0 6px; color:#f0f0f0; }
.etherfi-feature-card p  { font-size:13px; margin:0; color:#aaa; line-height:1.6; }

.etherfi-mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:16px 0; }
.etherfi-mode-box  { border-radius:10px; padding:20px; }
.etherfi-mode-tag  { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px; }
.etherfi-mode-box h4 { font-size:14px; font-weight:600; margin:0 0 8px; }
.etherfi-mode-box p  { font-size:13px; margin:0 0 8px; line-height:1.6; }
.etherfi-tokens { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.etherfi-token  { font-size:11px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); border-radius:5px; padding:3px 9px; color:#fff; font-family:monospace; }

.etherfi-cb-table { width:100%; border-collapse:collapse; margin:14px 0; font-size:13px; border-radius:10px; overflow:hidden; border:1px solid #2a2a2a; }
.etherfi-cb-table th { text-align:left; padding:10px 14px; background:#2a2a2a; font-weight:600; font-size:12px; color:#f0f0f0; border-bottom:1px solid #333; }
.etherfi-cb-table td { padding:9px 14px; border-bottom:1px solid #222; color:#ccc; background:#161616; }
.etherfi-cb-table tr:nth-child(even) td { background:#111; }
.etherfi-cb-table tr:last-child td { border-bottom:none; }
.etherfi-cb-rate { font-weight:700; color:#7c3aed; }

.etherfi-tier-wrap { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:16px 0; }
.etherfi-tier-card { border-radius:10px; padding:16px 12px; border:1px solid #2a2a2a; background:#1a1a1a; text-align:center; position:relative; }
.etherfi-tier-card.featured { border:2px solid #7c3aed; }
.etherfi-tier-badge { font-size:10px; font-weight:700; background:#7c3aed; color:#fff; border-radius:20px; padding:2px 10px; position:absolute; top:-10px; left:50%; transform:translateX(-50%); white-space:nowrap; }
.etherfi-tier-name   { font-size:14px; font-weight:700; color:#f0f0f0; margin-bottom:3px; }
.etherfi-tier-req    { font-size:10px; color:#666; margin-bottom:10px; line-height:1.5; }
.etherfi-tier-cb     { font-size:24px; font-weight:700; color:#7c3aed; }
.etherfi-tier-cb-lbl { font-size:10px; color:#666; margin-bottom:10px; }
.etherfi-tier-info   { font-size:11px; color:#888; margin-bottom:2px; }
.etherfi-tier-info strong { color:#ccc; }

.etherfi-point-earn { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0; }
.etherfi-pe-item { background:#1a1a1a; border:1px solid #2a2a2a; border-radius:8px; padding:14px; text-align:center; }
.etherfi-pe-pts  { font-size:20px; font-weight:700; color:#7c3aed; }
.etherfi-pe-label { font-size:11px; color:#888; margin-top:4px; line-height:1.5; }

.etherfi-steps { margin:16px 0; }
.etherfi-step  { display:flex; gap:16px; margin-bottom:12px; align-items:flex-start; background:#1a1a1a; border-radius:10px; padding:14px 16px; border:1px solid #2a2a2a; }
.etherfi-step-num { min-width:34px; height:34px; border-radius:50%; background:#7c3aed; color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; margin-top:2px; }
.etherfi-step-body h5 { font-size:14px; font-weight:600; margin:0 0 4px; color:#f0f0f0; }
.etherfi-step-body p  { font-size:13px; line-height:1.65; margin:0; color:#aaa; }

.etherfi-kyc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0; }
.etherfi-kyc-item { background:#1a1a1a; border-radius:8px; padding:14px; text-align:center; border:1px solid #2a2a2a; }
.etherfi-kyc-emoji { font-size:26px; margin-bottom:6px; }
.etherfi-kyc-item h6 { font-size:12px; font-weight:600; margin:0 0 4px; color:#e0e0e0; text-transform:none; letter-spacing:0; }
.etherfi-kyc-item p  { font-size:11px; margin:0; color:#888; }

.etherfi-perks-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin:14px 0; }
.etherfi-perk { display:flex; gap:10px; padding:12px; background:#1a1a1a; border-radius:8px; border:1px solid #2a2a2a; align-items:flex-start; }
.etherfi-perk-emoji { font-size:18px; flex-shrink:0; }
.etherfi-perk h6 { font-size:12px; font-weight:600; margin:0 0 3px; color:#e0e0e0; text-transform:none; letter-spacing:0; }
.etherfi-perk p  { font-size:12px; margin:0; line-height:1.5; color:#888; }

.etherfi-pros-cons { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:14px 0; }
.etherfi-pros { background:#0a1a0a; border:1px solid #1a4a1a; border-radius:10px; padding:18px; }
.etherfi-cons { background:#1a0a0a; border:1px solid #4a1a1a; border-radius:10px; padding:18px; }
.etherfi-pros h5 { color:#3dba6e; font-size:14px; font-weight:700; margin:0 0 10px; }
.etherfi-cons h5 { color:#E24B4A; font-size:14px; font-weight:700; margin:0 0 10px; }
.etherfi-pc-item { display:flex; gap:7px; margin-bottom:7px; font-size:13px; color:#aaa; line-height:1.55; }

.etherfi-alert { background:#1a1200; border:1px solid #4a3a00; border-radius:8px; padding:12px 16px; margin:14px 0; }
.etherfi-alert p { font-size:13px; color:#d4a017; margin:0; line-height:1.65; }

@media(max-width:600px){
  .etherfi-tier-wrap { grid-template-columns:repeat(2,1fr); }
  .etherfi-mode-grid, .etherfi-pros-cons { grid-template-columns:1fr; }
  .etherfi-kyc-grid, .etherfi-point-earn { grid-template-columns:1fr; }
}

/* =============================================================
   CONTACT FORM - หน้าติดต่อเรา (contact-us.php)
   ============================================================= */
.contact-wrap { margin-bottom: 24px; }

.contact-header { margin-bottom: 20px; }

.contact-msg {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 600; margin: 12px 0;
}
.contact-msg-ok  { background: #0a1a0a; border: 1px solid #1a4a1a; color: #3dba6e; }
.contact-msg-err { background: #1a0a0a; border: 1px solid #4a1a1a; color: #E24B4A; }

.form-group { margin-bottom: 16px; }

.form-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: #ccc;
  margin-bottom: 6px;
}
.form-label .req { color: #E24B4A; }

.form-input,
.form-textarea,
select.form-input {
  width: 100%;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 7px;
  padding: 9px 14px;
  font-size: 13px;
  color: #e0e0e0;
  font-family: "Sarabun", Arial, sans-serif;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.form-input:focus,
.form-textarea:focus,
select.form-input:focus {
  outline: none;
  border-color: #FFD700;
  background: #2A1515;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}
}
.form-input::placeholder,
.form-textarea::placeholder { color: #444; }

.form-textarea { resize: vertical; min-height: 120px; }

select.form-input option { background: #1a1a1a; color: #e0e0e0; }

.form-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #E24B4A; color: #fff;
  font-size: 14px; font-weight: 600;
  padding: 10px 28px; border-radius: 8px;
  border: none; cursor: pointer;
  font-family: "Sarabun", Arial, sans-serif;
  transition: background 0.15s;
}
.form-btn:hover { background: #c03535; }


/* =============================================================
   MOVIE GRID - หน้าดูหนังออนไลน์ (movies/index.php)
   ============================================================= */
.movies-section { margin-bottom: 32px; }

.section-hdr {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px; padding-bottom: 10px;
  border-bottom: 2px solid #2a0808;
}
.section-hdr i { font-size: 20px; color: #E24B4A; }
.section-hdr h2 {
  font-size: 16px; font-weight: 700; color: #f0f0f0;
  margin: 0; padding: 0; border: none;
}
.section-hdr h2::before { display: none; }

.movie-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.movie-card {
  text-decoration: none;
  display: flex; flex-direction: column;
  background: #1a1a1a; border: 1px solid #2a2a2a;
  border-radius: 8px; overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.movie-card:hover { border-color: #E24B4A; transform: translateY(-3px); }

.movie-poster { position: relative; aspect-ratio: 3/4; overflow: hidden; }
.movie-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.movie-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s;
}
.movie-overlay i { font-size: 40px; color: #fff; }
.movie-card:hover .movie-overlay { opacity: 1; }

.movie-info { padding: 8px 10px; }
.movie-title {
  font-size: 12px; font-weight: 600; color: #e0e0e0;
  line-height: 1.4; margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.movie-meta { font-size: 11px; color: #555; }

.movie-banner { text-align: center; margin: 16px 0; }
.movie-banner img { max-width: 100%; height: auto; border-radius: 6px; }

.movie-intro { font-size: 13px; color: #888; line-height: 1.85; margin-bottom: 20px; }

@media (max-width: 768px) {
  .movie-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .movie-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}


/* =============================================================
   LIVE STREAM TABLE - หน้าถ่ายทอดสดบอล (live/index.php)
   ============================================================= */
.live-tbl { width:100%; border-collapse:collapse; font-size:13px; }
.live-tbl td { padding:6px 10px; border-bottom:1px solid #1a1a1a; }

.live-match-hdr td {
  background: #1e1e1e !important;
  color: #f0f0f0;
  font-size: 13px;
  padding: 8px 12px;
  border-left: 3px solid #E24B4A;
}
.live-match-hdr i { color: #E24B4A; margin-right: 6px; }
.live-vs { color: #E24B4A; font-weight: 700; margin: 0 6px; }

.live-links-row td {
  background: #161616 !important;
  padding: 8px 12px 12px;
}
.live-link-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: #7bafd4; text-decoration: none;
  background: #1a1a2a; border: 1px solid #2a2a3a;
  padding: 4px 10px; border-radius: 5px; margin: 3px;
}
.live-link-btn:hover { color: #E24B4A; border-color: #5a1515; background: #2a0808; }
.live-link-btn img { width: 16px; height: 16px; }

.live-nodata {
  text-align: center; padding: 40px 20px !important;
  color: #555; font-size: 16px; line-height: 2;
}

.live-banner-row td { padding: 10px 0 !important; text-align: center; }