/*
Theme Name: VeboTV Child
Author: Rae
Template: flatsome
Version: 2.0.1
Text Domain: vebotv-child
*/

:root {
  /* Backgrounds */
  --vebo-bg: #070606;
  --vebo-bg-white: #0F0B09;
  --vebo-surface: #15100D;
  --vebo-surface-soft: #1C130F;
  --vebo-surface-hover: #261710;

  /* Borders */
  --vebo-border: #3A2216;
  --vebo-border-strong: #5B2D13;

  /* Brand - VEBO Orange / Gold */
  --vebo-green: #F05A00;
  --vebo-green-light: #FF7200;
  --vebo-green-bright: #FFAB12;
  --vebo-green-dark: #CC3C00;
  --vebo-green-deep: #9E2A00;
  --vebo-green-night: #5B1800;

  /* Semantic */
  --vebo-red: #EF4444;
  --vebo-red-soft: #FCA5A5;
  --vebo-ok: #22C55E;

  /* Typography — cream / white on dark */
  --vebo-ink: #FFF7EA;
  --vebo-text: #F1E8DE;
  --vebo-text-soft: #D3C3B7;
  --vebo-text-muted: #9E8D82;

  /* Footer */
  --vebo-footer-text: #FFF7EA;
  --vebo-footer-muted: #B7A69A;
  --vebo-footer-link: #FFAB12;

  /* Alpha */
  --vebo-green-05: rgba(240, 90, 0, 0.06);
  --vebo-green-10: rgba(240, 90, 0, 0.10);
  --vebo-green-15: rgba(255, 122, 0, 0.15);
  --vebo-green-20: rgba(255, 171, 18, 0.20);

  /* Gradients */
  --vebo-gradient-brand: linear-gradient(135deg, #FFD45A 0%, #FFAB12 30%, #FF7200 62%, #D94300 100%);
  --vebo-gradient-brand-soft: linear-gradient(135deg, #FFE17A 0%, #FFB82E 45%, #FF7A00 100%);
  --vebo-gradient-bg: linear-gradient(180deg, #0B0806 0%, #050404 100%);
  --vebo-gradient-bg: linear-gradient(180deg, #0B0806 0%, #050404 100%);
  --vebo-gradient-card: linear-gradient(160deg, #1A110D 0%, #0D0907 100%);
  --vebo-gradient-footer: linear-gradient(180deg, #120B08 0%, #050404 100%);

  /* Shadows */
  --vebo-shadow: 0 10px 28px rgba(0, 0, 0, 0.52);
  --vebo-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.38);
  --vebo-glow: 0 0 0 3px rgba(255, 122, 0, 0.22);
}

/* ==========================================================================
   BASE
   ========================================================================== */

html { scroll-behavior: smooth; }

body {
  background: var(--vebo-gradient-bg);
  color: var(--vebo-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.65;
}

::selection {
  background: var(--vebo-green-bright);
  color: #1A0900;
}

/* ==========================================================================
   LINKS — global + content (tránh đen / xám mờ)
   ========================================================================== */

a {
  color: var(--vebo-green);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a:hover,
a:focus {
  color: var(--vebo-green-dark);
}

a:visited {
  color: var(--vebo-green-dark);
}

/* Link trong bài — đậm, gạch chân mờ, dễ thấy trên nền trắng */
.entry-content a,
.entry-content p a,
.entry-content li a,
.home-content a,
.page-content a,
main p a,
main li a,
article .entry-content a {
  color: var(--vebo-green) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(255, 122, 0, 0.42) !important;
  text-underline-offset: 3px;
  background: transparent !important;
}

.entry-content a:hover,
.home-content a:hover,
.page-content a:hover,
main p a:hover,
main li a:hover {
  color: var(--vebo-green-deep) !important;
  text-decoration-color: var(--vebo-green-deep) !important;
}

/* Title / card links — không gạch chân */
.entry-title a,
.page-title a,
.post-title a,
.box-text a,
.box-blog-post a,
.box-blog-post .post-title a {
  color: var(--vebo-ink) !important;
  text-decoration: none !important;
  font-weight: 750 !important;
}

.entry-title a:hover,
.post-title a:hover,
.box-blog-post a:hover {
  color: var(--vebo-green) !important;
}

/* ==========================================================================
   HEADER & NAV
   ========================================================================== */

#header,
.header-main {
  background: var(--vebo-bg-white) !important;
  border-bottom: 1px solid var(--vebo-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.26);
}

.ux-menu-link__link,
.ux-menu-link__link .ux-menu-link__text {
  color: var(--vebo-ink) !important;
  font-weight: 650;
  transition: color 0.25s ease;
}

.ux-menu-link__link:hover,
.ux-menu-link__link:hover .ux-menu-link__text {
  color: var(--vebo-green) !important;
  text-shadow: none;
}

.ux-menu-link__link::before {
  content: "⚽";
  display: inline-block;
  margin-right: 7px;
  font-size: 0.85em;
  transition: transform 0.35s ease;
}

.ux-menu-link__link:hover::before {
  transform: rotate(360deg) scale(1.15);
}

.nav-dropdown,
.nav-dropdown-default {
  background: var(--vebo-bg-white) !important;
  border: 1px solid var(--vebo-border) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.42) !important;
}

.nav-dropdown li a {
  color: var(--vebo-text) !important;
  text-decoration: none !important;
}

.nav-dropdown li a:hover {
  color: var(--vebo-green-dark) !important;
  background: var(--vebo-green-05) !important;
}

/* ==========================================================================
   BUTTONS — giữ màu riêng, không bị rule a đè
   ========================================================================== */

.auth-group,
.auth-buttons,
.mobile-nav-btns {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.auth-group a,
.btn,
.mobile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  height: 38px;
  padding: 0 22px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none !important;
  letter-spacing: 0.7px;
  transition: all 0.25s ease;
}

/* Login outline — orange/gold */
.auth-group .btn-login,
.btn-login,
.mobile-btn-login {
  color: var(--vebo-green) !important;
  background: transparent !important;
  border: 2px solid var(--vebo-green) !important;
}

.auth-group .btn-login:hover,
.btn-login:hover,
.mobile-btn-login:hover {
  color: #1A0900 !important;
  background: var(--vebo-green) !important;
  transform: translateY(-2px);
  box-shadow: var(--vebo-shadow-sm);
}

/* Register solid — orange/gold */
.auth-group .btn-register,
.btn-register,
.mobile-btn-register {
  color: #1A0900 !important;
  background: var(--vebo-gradient-brand) !important;
  border: none !important;
  box-shadow: var(--vebo-shadow-sm);
}

.auth-group .btn-register:hover,
.btn-register:hover,
.mobile-btn-register:hover {
  color: #1A0900 !important;
  background: var(--vebo-gradient-brand-soft) !important;
  transform: translateY(-2px);
  box-shadow: var(--vebo-shadow);
}

/* ==========================================================================
   CONTENT / CARDS
   ========================================================================== */

.entry-content,
.blog-single .entry-content,
article .entry-content,
.page-content {
  color: var(--vebo-text);
}

.entry-content p,
.entry-content li,
.home-content p,
main p {
  color: var(--vebo-text) !important;
}

.entry-content strong,
.entry-content b {
  color: var(--vebo-ink) !important;
}

.home-content {
  height: 700px;
  padding: 20px;
  overflow-y: auto;
  background: var(--vebo-surface);
  border: 1px solid var(--vebo-border);
  border-radius: 14px;
  box-shadow: var(--vebo-shadow-sm);
}

.box.box-normal.box-text-bottom.box-blog-post.has-hover {
  position: relative;
  overflow: hidden;
  padding: 10px !important;
  background: var(--vebo-gradient-card);
  border: 1px solid var(--vebo-border);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.box.box-normal.box-text-bottom.box-blog-post.has-hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--vebo-gradient-brand);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.box.box-normal.box-text-bottom.box-blog-post.has-hover:hover {
  border-color: var(--vebo-green-light);
  transform: translateY(-4px);
  box-shadow: var(--vebo-shadow);
}

.box.box-normal.box-text-bottom.box-blog-post.has-hover:hover::before {
  opacity: 1;
}

/* Meta */
.entry-meta,
.entry-meta span,
.entry-meta a,
.post-meta {
  color: var(--vebo-text-muted) !important;
}

.entry-meta a:hover {
  color: var(--vebo-green) !important;
}

/* ==========================================================================
   SCROLLBAR
   ========================================================================== */

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--vebo-surface-soft); }
::-webkit-scrollbar-thumb {
  background: var(--vebo-gradient-brand);
  border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover { background: var(--vebo-green-light); }

/* ==========================================================================
   TABLES
   ========================================================================== */

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--vebo-surface);
  border: 1px solid var(--vebo-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--vebo-shadow-sm);
}

table thead th {
  color: #1A0900;
  background: var(--vebo-gradient-brand);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 15px 22px !important;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 2px solid var(--vebo-green-dark);
}

table thead th:last-child { border-right: none; }

table tbody td {
  color: var(--vebo-text);
  background: transparent;
  padding: 15px 22px !important;
  line-height: 1.6;
  border: none;
  border-right: 1px solid var(--vebo-border);
  border-bottom: 1px solid var(--vebo-border);
}

table tbody tr:nth-child(even) td { background: var(--vebo-surface-soft); }
table tbody td:last-child { border-right: none; }
table tbody tr:last-child td { border-bottom: none; }

table tbody tr:hover td {
  background: var(--vebo-green-05);
  color: var(--vebo-ink);
}

table td a {
  color: var(--vebo-green) !important;
  text-decoration: none;
  font-weight: 700;
}

table td a:hover {
  color: var(--vebo-green-dark) !important;
  text-decoration: underline;
}

/* ==========================================================================
   SECTION TITLES
   ========================================================================== */

.section-title,
.section-title-normal,
.section-title-bold-center,
.section-title-main,
.section-title-normal span {
  border-bottom: 0 !important;
}

.section-title-main::after,
.section-title-normal::after,
.section-title-normal span::after {
  content: none !important;
  display: none !important;
}

.section-title,
.section-title-bold-center {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 14px 0 22px;
  padding: 0 !important;
}

.section-title-bold-center b {
  flex: 1;
  max-width: 180px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--vebo-green-20), var(--vebo-green-light)) !important;
}

.section-title-bold-center b:last-child {
  background: linear-gradient(to left, transparent, var(--vebo-green-20), var(--vebo-green-light)) !important;
}

.section-title-main {
  margin: 0 !important;
  padding: 0 15px !important;
  color: var(--vebo-green-dark) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  text-align: center;
  text-shadow: none !important;
}

.section-title-bold-center:hover .section-title-main {
  color: var(--vebo-green) !important;
}

/* ==========================================================================
   HEADINGS
   ========================================================================== */

main h1:not(.section-title-main),
.entry-content h1,
.page-title,
.entry-title {
  margin: 0 0 18px;
  padding: 0 !important;
  color: var(--vebo-green-deep) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: 27px !important;
  font-weight: 850 !important;
  line-height: 1.3 !important;
}

main h1:not(.section-title-main)::after,
.entry-content h1::after,
.page-title::after,
.entry-title::after {
  content: none !important;
  display: none !important;
}

main h2:not(.section-title-main),
.entry-content h2 {
  width: 100%;
  margin: 20px 0 13px;
  padding: 11px 16px !important;
  color: #1A0900 !important;
  background: var(--vebo-gradient-brand) !important;
  border: 0 !important;
  border-radius: 8px;
  box-shadow: var(--vebo-shadow-sm);
  font-size: 19px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-shadow: none !important;
}

/* H2 có link bên trong — chữ trắng */
main h2 a,
.entry-content h2 a {
  color: #1A0900 !important;
  text-decoration: none !important;
}

main h2 a:hover,
.entry-content h2 a:hover {
  color: #FFF0CC !important;
  text-decoration: underline !important;
}

main h3,
.entry-content h3 {
  margin: 17px 0 10px;
  padding: 8px 12px !important;
  color: var(--vebo-green-dark) !important;
  background: var(--vebo-green-05) !important;
  border: 0 !important;
  border-left: 3px solid var(--vebo-green) !important;
  border-radius: 0 6px 6px 0;
  font-size: 16px !important;
  font-weight: 750 !important;
  text-shadow: none !important;
}

/* ==========================================================================
   SIDEBAR / WIDGETS
   ========================================================================== */

#secondary,
.widget-area,
.widget {
  color: var(--vebo-text);
}

.widget {
  background: var(--vebo-surface);
  border: 1px solid var(--vebo-border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  box-shadow: var(--vebo-shadow-sm);
}

.widget-title,
.widget h2,
.widget h3,
.widget .widget-title {
  color: var(--vebo-green-dark) !important;
  background: var(--vebo-green-05) !important;
  border: 1px solid var(--vebo-green-15) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.widget a,
.widget ul li a,
.widget_recent_entries a,
#secondary a {
  color: var(--vebo-green) !important;
  text-decoration: none !important;
  font-weight: 600;
}

.widget a:hover,
#secondary a:hover {
  color: var(--vebo-green-deep) !important;
  text-decoration: underline !important;
}

.widget ul li,
.widget p,
.widget span {
  color: var(--vebo-text-soft) !important;
}

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */

.rankmath-breadcrumb-wrapper,
.custom-rankmath-breadcrumb {
  background: var(--vebo-green-05) !important;
  border-bottom: 1px solid var(--vebo-green-20) !important;
  padding: 9px 0 !important;
}

.rank-math-breadcrumb a {
  color: var(--vebo-green) !important;
  font-weight: 600;
  text-decoration: none !important;
}

.rank-math-breadcrumb a:hover {
  color: var(--vebo-green-dark) !important;
  text-decoration: underline !important;
}

.rank-math-breadcrumb .separator { color: var(--vebo-green-light) !important; }
.rank-math-breadcrumb .last { color: var(--vebo-text-muted) !important; }

.home .rankmath-breadcrumb-wrapper,
.front-page .rankmath-breadcrumb-wrapper,
.home .custom-rankmath-breadcrumb,
.front-page .custom-rankmath-breadcrumb {
  display: none !important;
}

/* ==========================================================================
   BLOCKQUOTE / MEDIA / COMMENTS
   ========================================================================== */

blockquote {
  margin: 0 0 1.25em;
  padding: 12px 20px;
  color: var(--vebo-text-soft);
  background: var(--vebo-green-05);
  border-left: 3px solid var(--vebo-green);
  border-radius: 0 8px 8px 0;
  font-size: 1.12em;
  font-style: italic;
}

.entry-content img { border-radius: 10px; }

.wp-caption-text,
.entry-content figcaption {
  color: var(--vebo-text-muted) !important;
}

#comments,
.comment-respond,
.comment-inner {
  color: var(--vebo-text);
}

#comments a {
  color: var(--vebo-green) !important;
}

/* ==========================================================================
   FOOTER — black / orange / gold
   ========================================================================== */

#footer {
  background: var(--vebo-gradient-footer) !important;
  border-top: 3px solid var(--vebo-green-light);
  color: var(--vebo-footer-text);
}

#footer a {
  color: var(--vebo-footer-link) !important;
  text-decoration: none !important;
}

#footer a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

#footer p,
#footer span,
#footer li {
  color: var(--vebo-footer-muted);
}

.footer-info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 25px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.payment-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 30px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.payment-title {
  margin: 0;
  color: var(--vebo-green-bright);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.payment-list {
  display: flex;
  align-items: center;
  gap: 10px;
}

.payment-item {
  width: 75px;
  height: 42px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  transition: all 0.25s ease;
}

.payment-item:hover {
  border-color: var(--vebo-green-bright);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.payment-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.features-section {
  display: flex;
  flex: 1;
  justify-content: space-around;
  padding-left: 10px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.feature-item:first-child { border-left: none; }

.feature-icon {
  width: 32px;
  height: 32px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vebo-green-bright);
  background: rgba(255, 171, 18, 0.12);
  border-radius: 8px;
}

.feature-icon svg { width: 100%; height: 100%; }

.feature-content h4 {
  margin: 0;
  color: var(--vebo-green-bright);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.feature-content p {
  margin: 3px 0 0;
  color: var(--vebo-footer-muted);
  font-size: 11px;
}

.copyright-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 25px;
  background: rgba(0, 0, 0, 0.25);
}

.age-warning {
  display: flex;
  align-items: center;
  gap: 10px;
}

.age-badge {
  padding: 6px 10px;
  color: var(--vebo-red-soft);
  background: rgba(220, 38, 38, 0.18);
  border: 1px solid rgba(220, 38, 38, 0.55);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 800;
}

.age-text p {
  margin: 0;
  color: var(--vebo-footer-muted);
  font-size: 12px;
  line-height: 1.4;
}

.copyright-center {
  flex: 1;
  text-align: center;
  color: var(--vebo-footer-muted);
  font-size: 13px;
}

.license-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 171, 18, 0.10);
  border: 1px solid var(--vebo-green-bright);
  border-radius: 20px;
}

.license-icon {
  width: 24px;
  height: 24px;
  color: var(--vebo-green-bright);
}

.license-text strong {
  color: #FFAB12;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.license-text span {
  color: var(--vebo-footer-muted);
  font-size: 10px;
}

/* ==========================================================================
   UTILITY
   ========================================================================== */

.archive-page-header .page-title,
.absolute-footer {
  display: none !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (min-width: 768px) {
  #row-1144801631 div[class*="col"] {
    border-right: 1px solid var(--vebo-green-20);
    padding-right: 20px;
  }
  #row-1144801631 div[class*="col"]:last-child {
    border-right: none;
  }
}

@media (max-width: 1024px) {
  .footer-info-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .payment-group {
    width: 100%;
    padding-right: 0;
    padding-bottom: 20px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .features-section {
    width: 100%;
    flex-wrap: wrap;
    gap: 20px;
    padding-left: 0;
  }

  .feature-item {
    flex: 1 1 calc(50% - 20px);
    padding: 10px 0;
    border-left: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
}

@media (max-width: 768px) {
  .auth-group a, .btn, .mobile-btn {
    height: 34px;
    padding: 0 16px;
    font-size: 11px;
  }

  .copyright-bar {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .age-warning,
  .license-badge {
    justify-content: center;
  }

  .copyright-center { order: -1; }

  .section-title-main { font-size: 16px !important; }

  main h1:not(.section-title-main),
  .entry-content h1,
  .page-title,
  .entry-title {
    font-size: 22px !important;
  }

  main h2:not(.section-title-main),
  .entry-content h2 {
    font-size: 17px !important;
  }

  main h3,
  .entry-content h3 {
    font-size: 15px !important;
  }

  .section-title-bold-center b { max-width: 70px; }
}

@media (max-width: 480px) {
  .section-title-main {
    font-size: 14px !important;
    padding: 0 10px !important;
  }

  main h1:not(.section-title-main),
  .entry-content h1,
  .page-title,
  .entry-title {
    font-size: 20px !important;
  }

  main h2:not(.section-title-main),
  .entry-content h2 {
    font-size: 16px !important;
    padding: 9px 12px !important;
  }

  main h3,
  .entry-content h3 {
    font-size: 14px !important;
    padding: 7px 10px !important;
  }

  .feature-item { flex: 1 1 100%; }
  .payment-item { width: 60px; height: 34px; }
}

/* ==========================================================================
   SPECIAL EFFECTS (giữ class cũ)
   ========================================================================== */

.gold-glow { box-shadow: var(--vebo-glow); }

.gold-glow-strong {
  box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.28),
              0 10px 30px rgba(240, 90, 0, 0.22);
}

.gold-underline {
  position: relative;
  display: inline-block;
}

.gold-underline::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--vebo-gradient-brand);
  transition: width 0.3s ease;
}

.gold-underline:hover::after { width: 100%; }

.btn-gold-shine {
  position: relative;
  overflow: hidden;
}

.btn-gold-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
}

.btn-gold-shine:hover::before { left: 130%; }
/* ==========================================================================
   FIX FOOTER — gold links on dark
   ========================================================================== */

#footer,
#footer .footer-wrapper,
#footer .absolute-footer,
#footer .footer-widgets,
#footer .row,
#footer .col,
#footer .col-inner,
#footer .container,
#footer .ux-block-wrapper,
#footer .block-content {
  color: #FFF7EA !important;
}

/* Đoạn mô tả bên trái */
#footer p,
#footer .col-inner p,
#footer .text,
#footer .ux-text,
#footer span:not(.payment-title):not(.age-badge) {
  color: #D3C3B7 !important;
  opacity: 1 !important;
}

/* Tiêu đề cột: KHO DỮ LIỆU / PHÁP LÝ... */
#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer .widget-title,
#footer .section-title-main,
#footer strong {
  color: #FFAB12 !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}

/* LINK menu footer — gold on dark */
#footer a,
#footer .widget a,
#footer ul li a,
#footer .menu a,
#footer .footer-nav a,
#footer .col-inner a,
#footer .ux-menu a,
#footer .ux-menu-link,
#footer .ux-menu-link__link,
#footer .ux-menu-link__text {
  color: #FFAB12 !important;
  opacity: 1 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

#footer a:hover,
#footer .widget a:hover,
#footer ul li a:hover,
#footer .menu a:hover,
#footer .ux-menu-link__link:hover,
#footer .ux-menu-link__link:hover .ux-menu-link__text {
  color: #FFFFFF !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Icon bóng / bullet */
#footer li::before,
#footer .ux-menu-link__link::before,
#footer i,
#footer svg {
  color: #FFAB12 !important;
  opacity: 1 !important;
  fill: #FFAB12 !important;
}

/* Gạch ngăn list */
#footer ul li,
#footer .menu li {
  border-color: rgba(255, 171, 18, 0.18) !important;
}

#footer hr,
#footer .is-divider {
  background: rgba(255, 171, 18, 0.20) !important;
  border-color: rgba(255, 171, 18, 0.20) !important;
}

/* Dòng bullet ⚡ bên trái */
#footer li,
#footer .bullet,
#footer .featured-box {
  color: #D3C3B7 !important;
}
đổi tone màu css theo màu logo. viết lại css

/* ==========================================================================
   VEBO TV — FLATSOME READY STYLE
   ========================================================================== */

:root {
  --primary-color: #F05A00 !important;
  --fs-color-primary: #F05A00 !important;
  --fs-color-secondary: #FFAB12 !important;
  --fs-color-success: #22C55E !important;
  --fs-color-alert: #EF4444 !important;
}

/* Main site background */
html,
body,
#wrapper,
#main,
.page-wrapper,
.blog-wrapper,
.archive-page-header {
  background: var(--vebo-gradient-bg) !important;
  color: var(--vebo-text) !important;
}

/* Header */
#header,
#header .header-wrapper,
#header .header-main,
#header .header-bg-container,
#header .header-bg-color {
  background: #080605 !important;
}

#header .header-top {
  background: #100A07 !important;
  border-bottom: 1px solid rgba(255,171,18,.12) !important;
}

#header .header-main {
  min-height: 80px !important;
  border-bottom: 1px solid rgba(240,90,0,.28) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.40) !important;
}

#header .header-inner {
  min-height: 80px !important;
}

/* Wide VEBO logo */
#header #logo img,
#header .logo img {
  width: auto !important;
  max-width: 305px !important;
  max-height: 62px !important;
  object-fit: contain !important;
}

/* Main nav */
#header .header-nav-main > li {
  margin: 0 2px !important;
}

#header .header-nav-main > li > a,
#header .nav > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 80px;
  padding: 0 12px !important;
  color: #FFF4E8 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
  text-transform: uppercase;
  text-decoration: none !important;
  background: transparent !important;
}

#header .header-nav-main > li > a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 16px;
  height: 2px;
  background: linear-gradient(90deg, #F05A00, #FFAB12);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
}

#header .header-nav-main > li:hover > a,
#header .header-nav-main > li.active > a,
#header .header-nav-main > li.current-menu-item > a {
  color: #FFB82E !important;
}

#header .header-nav-main > li:hover > a::after,
#header .header-nav-main > li.active > a::after,
#header .header-nav-main > li.current-menu-item > a::after {
  transform: scaleX(1);
}

/* Dropdown */
#header .nav-dropdown {
  padding: 8px !important;
  background: #130C09 !important;
  border: 1px solid #3A2216 !important;
  border-top: 2px solid #F05A00 !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.55) !important;
}

#header .nav-dropdown > li > a {
  padding: 10px 12px !important;
  color: #F3E7DB !important;
  border: 0 !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
}

#header .nav-dropdown > li > a:hover {
  color: #1A0900 !important;
  background: linear-gradient(135deg, #FFAB12, #FF7200) !important;
}

/* Search/menu icons */
#header .icon-search,
#header .icon-menu,
#header .icon-user,
#header .nav-icon a,
#header .header-button a {
  color: #FFF7EA !important;
}

#header .nav-icon a:hover,
#header .header-button a:hover {
  color: #FFAB12 !important;
}

/* HTML 1 — login/register */
#header .vebo-header-auth,
.vebo-header-auth {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

#header .vebo-header-auth a,
.vebo-header-auth a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 20px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: all .22s ease !important;
}

#header .vebo-header-auth .vebo-login,
.vebo-header-auth .vebo-login {
  color: #FFAB12 !important;
  background: #0A0705 !important;
  border: 1px solid #F05A00 !important;
}

#header .vebo-header-auth .vebo-login:hover,
.vebo-header-auth .vebo-login:hover {
  color: #1A0900 !important;
  background: #FFAB12 !important;
  border-color: #FFAB12 !important;
  box-shadow: 0 7px 20px rgba(255,171,18,.20) !important;
  transform: translateY(-1px);
}

#header .vebo-header-auth .vebo-register,
.vebo-header-auth .vebo-register {
  color: #1A0900 !important;
  background: linear-gradient(135deg, #FFD45A 0%, #FFAB12 38%, #FF7200 100%) !important;
  border: 1px solid #FF8A00 !important;
  box-shadow: 0 7px 20px rgba(240,90,0,.20) !important;
}

#header .vebo-header-auth .vebo-register:hover,
.vebo-header-auth .vebo-register:hover {
  color: #000 !important;
  background: linear-gradient(135deg, #FFE17A 0%, #FFB82E 45%, #FF7A00 100%) !important;
  border-color: #FFAB12 !important;
  box-shadow: 0 9px 24px rgba(255,122,0,.28) !important;
  transform: translateY(-1px);
}

/* Flatsome native buttons */
.primary,
.button.primary,
button.primary,
input[type="submit"],
input[type="button"] {
  color: #1A0900 !important;
  background: var(--vebo-gradient-brand) !important;
  border-color: #F05A00 !important;
}

.secondary,
.button.secondary {
  color: #1A0900 !important;
  background: #FFAB12 !important;
  border-color: #FFAB12 !important;
}

/* Forms */
input,
textarea,
select {
  color: var(--vebo-text) !important;
  background: #130C09 !important;
  border-color: #3A2216 !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #F05A00 !important;
  box-shadow: 0 0 0 3px rgba(240,90,0,.16) !important;
}

::placeholder {
  color: #9E8D82 !important;
  opacity: 1 !important;
}

/* Hide parent footer — VEBO footer is rendered below */
#footer,
.absolute-footer {
  display: none !important;
}

/* VEBO Footer */
.vebo-site-footer {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #D8C9BD;
  background:
    radial-gradient(circle at 10% 0%, rgba(240,90,0,.12), transparent 30%),
    radial-gradient(circle at 90% 10%, rgba(255,171,18,.08), transparent 25%),
    linear-gradient(180deg, #120B08 0%, #050404 100%);
  border-top: 2px solid #F05A00;
}

.vebo-footer-main {
  max-width: 1170px;
  margin: 0 auto;
  padding: 48px 20px 32px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 38px;
}

.vebo-footer-brand img {
  display: block;
  width: auto;
  max-width: 285px;
  max-height: 74px;
  margin: 0 0 18px;
  object-fit: contain;
}

.vebo-footer-brand p {
  margin: 0 0 16px;
  color: #B7A69A !important;
  font-size: 13px;
  line-height: 1.75;
}

.vebo-footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  color: #FFB82E;
  background: rgba(240,90,0,.08);
  border: 1px solid rgba(255,171,18,.24);
  border-radius: 7px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .35px;
}

.vebo-footer-col h4 {
  position: relative;
  margin: 0 0 19px !important;
  padding: 0 0 11px !important;
  color: #FFF7EA !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.vebo-footer-col h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #F05A00, #FFAB12);
}

.vebo-footer-links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.vebo-footer-links li {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.vebo-footer-links a {
  position: relative;
  display: block;
  padding: 7px 0 7px 15px;
  color: #C1B1A5 !important;
  font-size: 13px;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color .2s ease, transform .2s ease;
}

.vebo-footer-links a::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 6px;
  color: #FF8A00;
  font-weight: 900;
}

.vebo-footer-links a:hover {
  color: #FFB82E !important;
  transform: translateX(3px);
}

.vebo-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.22);
}

.vebo-footer-bottom-inner {
  max-width: 1170px;
  margin: 0 auto;
  min-height: 64px;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.vebo-footer-copy {
  margin: 0;
  color: #91847B !important;
  font-size: 12px;
}

.vebo-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.vebo-footer-legal a {
  color: #B7A69A !important;
  font-size: 12px;
  text-decoration: none !important;
}

.vebo-footer-legal a:hover {
  color: #FFB82E !important;
}

/* Responsive */
@media (max-width: 849px) {
  #header .header-main,
  #header .header-inner {
    min-height: 64px !important;
  }

  #header #logo img,
  #header .logo img {
    max-width: 205px !important;
    max-height: 50px !important;
  }

  #header .mobile-nav > li > a,
  #header .nav-icon a {
    color: #FFF7EA !important;
  }

  .off-canvas .sidebar-menu,
  .mfp-content .mobile-sidebar-levels-2 {
    background: #0B0705 !important;
  }

  .off-canvas .nav-sidebar > li > a,
  .off-canvas .nav-sidebar li a {
    color: #F4E8DE !important;
  }

  .off-canvas .nav-sidebar > li > a:hover,
  .off-canvas .nav-sidebar li.current-menu-item > a {
    color: #FFB82E !important;
  }

  .vebo-footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 30px 24px;
    padding-top: 36px;
  }
}

@media (max-width: 549px) {
  #header .vebo-header-auth a,
  .vebo-header-auth a {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 13px !important;
    font-size: 10px !important;
  }

  .vebo-footer-main {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 32px 18px 26px;
  }

  .vebo-footer-bottom-inner {
    align-items: flex-start;
    flex-direction: column;
    padding: 18px;
  }
}

/* ==========================================================================
   VEBOTV — UX BUILDER FOOTER
   Footer content lives in UX Blocks > "Footer - VeboTV"
   ========================================================================== */
#footer,
.absolute-footer {
  display: none !important;
}

.vebo-footer-ux-slot {
  background: #050403;
  border-top: 2px solid #F05A00;
}

.vebo-footer-ux-slot .section {
  margin: 0 !important;
}

.vebo-footer-ux-slot .vebo-ux-footer-section {
  background:
    radial-gradient(circle at 12% 0%, rgba(240,90,0,.12), transparent 30%),
    radial-gradient(circle at 90% 10%, rgba(255,171,18,.07), transparent 24%),
    linear-gradient(180deg, #120B08 0%, #070504 100%) !important;
}

.vebo-footer-ux-slot h4 {
  position: relative;
  margin: 0 0 17px !important;
  padding: 0 0 10px !important;
  color: #FFF7EA !important;
  background: none !important;
  border: 0 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: .5px;
}

.vebo-footer-ux-slot h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #F05A00, #FFAB12);
}

.vebo-footer-ux-slot p {
  color: #BDAA9D !important;
  font-size: 15px;
  line-height: 1.75;
}

.vebo-footer-ux-slot strong {
  color: #FFB82E !important;
}

.vebo-footer-ux-slot .ux-menu-link__link,
.vebo-footer-ux-slot .ux-menu-link__text {
  color: #C7B6AA !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.vebo-footer-ux-slot .ux-menu-link__link::before {
  content: "›";
  margin-right: 7px;
  color: #FF8A00;
  font-weight: 900;
}

.vebo-footer-ux-slot .ux-menu-link__link:hover,
.vebo-footer-ux-slot .ux-menu-link__link:hover .ux-menu-link__text {
  color: #FFB82E !important;
}

.vebo-footer-ux-slot .vebo-ux-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
}

.vebo-footer-ux-slot .vebo-footer-copy p {
  margin-bottom: 0 !important;
  color: #91847B !important;
  font-size: 13px !important;
}

@media (max-width: 549px) {
  .vebo-footer-ux-slot .vebo-ux-footer-section {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .vebo-footer-ux-slot .vebo-footer-legal {
    text-align: left !important;
  }
}

/* VEBO FOOTER FONT SIZE FIX */
.vebo-footer-ux-slot .ux-menu-link__link {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  line-height: 1.55 !important;
}

.vebo-footer-ux-slot .vebo-footer-about p {
  font-size: 15px !important;
  line-height: 1.8 !important;
}

.vebo-footer-ux-slot .vebo-footer-about strong {
  font-size: 14px !important;
}

.vebo-footer-ux-slot .vebo-footer-legal .ux-menu-link__text {
  font-size: 13px !important;
}

@media (max-width: 849px) {
  .vebo-footer-ux-slot h4 {
    font-size: 15px !important;
  }

  .vebo-footer-ux-slot p,
  .vebo-footer-ux-slot .ux-menu-link__link,
  .vebo-footer-ux-slot .ux-menu-link__text {
    font-size: 14px !important;
  }
}