/* Tùy biến giao diện động theo tblConfig / LangID */
body{background:var(--site-bg);}
.topbar.topbar-upgraded,.brand-row.brand-row-search,.main-menu-wrap{background:var(--header-bg);color:var(--header-text);}
.topbar.topbar-upgraded a,.brand-row.brand-row-search a,.main-menu-wrap a,.brand-meta h1,.brand-meta p{color:var(--header-text);}
.btn-modern,.home-zone-rich-link,.home-banner-badge{background:var(--primary-color);border-color:var(--primary-color);color:#fff;}
.btn-ghost:hover,.topbar-action.zalo-action,.hero-top-logos-kicker,.home-zone-rich-icon{color:var(--accent-color);}
.footer-main{background:var(--footer-bg);color:var(--footer-text);}
.footer-main a,.footer-main h3,.footer-main .footer-box,.footer-main .footer-box div{color:var(--footer-text);}
.home-layout-stage{display:flex;flex-direction:column;gap:22px;}
body.theme-ocean .home-banner-overlay,body.theme-ocean .hero-top-logos,body.theme-ocean .home-zone-rich{background:linear-gradient(135deg, rgba(2,132,199,.12), rgba(59,130,246,.08));}
body.theme-emerald .home-banner-overlay,body.theme-emerald .hero-top-logos,body.theme-emerald .home-zone-rich{background:linear-gradient(135deg, rgba(16,185,129,.12), rgba(34,197,94,.08));}
body.theme-sunset .home-banner-overlay,body.theme-sunset .hero-top-logos,body.theme-sunset .home-zone-rich{background:linear-gradient(135deg, rgba(249,115,22,.14), rgba(244,63,94,.08));}
body.theme-royal .home-banner-overlay,body.theme-royal .hero-top-logos,body.theme-royal .home-zone-rich{background:linear-gradient(135deg, rgba(99,102,241,.14), rgba(168,85,247,.08));}
body.home-layout-magazine .hero-top-logos,body.home-layout-magazine .home-zone-rich{border-radius:22px;box-shadow:0 20px 45px rgba(15,23,42,.08);}
body.home-layout-cards .home-layout-stage{gap:18px;}
body.home-layout-cards .hero-top-logos,body.home-layout-cards .home-zone-rich,body.home-layout-cards .home-banner-stage{background:#fff;border-radius:24px;box-shadow:0 16px 40px rgba(15,23,42,.08);padding:18px;overflow:hidden;}
body.home-layout-editorial .hero-top-logos{border-left:8px solid var(--accent-color);border-radius:0 22px 22px 0;background:#fff;padding:28px;}
body.home-layout-editorial .home-zone-rich{background:#fff;border-radius:0;border-top:4px solid var(--primary-color);box-shadow:none;}
body.home-layout-editorial .home-zone-rich-head{border-bottom:1px solid rgba(15,23,42,.08);padding-bottom:16px;margin-bottom:16px;}
body.home-layout-showcase .home-banner-stage{margin-top:8px;}
body.home-layout-showcase .hero-top-logos{border-radius:30px;box-shadow:0 24px 60px rgba(15,23,42,.10);padding:26px;}
body.home-layout-showcase .home-zone-rich{border-radius:26px;background:#fff;box-shadow:0 22px 55px rgba(15,23,42,.10);}


/* Header top strip: logo + company + search */
.header-top-strip,
.brand-row.brand-row-search,
.brand-row.brand-row-search .brand-meta h1,
.brand-row.brand-row-search .brand-meta p,
.brand-row.brand-row-search a {
    background: var(--header-top-bg) !important;
    color: var(--header-top-text) !important;
}

.brand-row.brand-row-search .brand-search-form,
.brand-row.brand-row-search .brand-search-input-wrap {
    background: transparent !important;
}

.brand-row.brand-row-search .brand-search-input-wrap input {
    background: #ffffff !important;
    color: #111827 !important;
}

.brand-row.brand-row-search .brand-search-input-wrap button {
    background: var(--primary-color) !important;
    color: #ffffff !important;
}

/* Zalo hotline */
.zalo-hotline,
.topbar-action.zalo-action {
    background: var(--zalo-bg) !important;
    color: var(--zalo-text) !important;
    border-color: transparent !important;
}

.zalo-hotline *,
.topbar-action.zalo-action *,
.topbar-action.zalo-action a {
    color: var(--zalo-text) !important;
}

/* Language switch */
.header-lang,
.language-switch-link,
.header-lang .btn-ghost {
    background: var(--lang-bg) !important;
    color: var(--lang-text) !important;
    border-color: transparent !important;
}

.header-lang .btn-ghost,
.header-lang .btn-ghost:hover,
.header-lang .btn-ghost:focus,
.language-switch-link {
    color: var(--lang-text) !important;
}

.topbar-right-tools.header-lang {
    padding: 8px 10px;
    border-radius: 14px;
}

/* Keep the long header strips themed */
.topbar.topbar-upgraded.header-language-zone {
    background: var(--header-bg) !important;
    color: var(--header-text) !important;
}


/* Home body logo/company info block */
.hero-top-logos-copy {
    background: var(--home-logo-info-bg) !important;
    color: var(--home-logo-info-text) !important;
    border-radius: 22px !important;
    padding: 24px 28px !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .12);
}

.hero-top-logos-copy .hero-top-logos-kicker,
.hero-top-logos-copy h1,
.hero-top-logos-copy p,
.hero-top-logos-copy a,
.hero-top-logos-copy * {
    color: var(--home-logo-info-text) !important;
}

.hero-top-logos-copy .hero-top-logos-kicker {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.14) !important;
    margin-bottom: 14px;
    font-weight: 700;
    letter-spacing: .04em;
}


/* Hero gradient / text */
.hero-top-logos-inner {
    background: var(--hero-bg) !important;
    background-size: cover;
    background-repeat: no-repeat;
    transition: all .35s ease;
}

.hero-top-logos-copy,
.hero-top-logos-copy h1,
.hero-top-logos-copy p,
.hero-top-logos-copy span,
.hero-top-logos-copy a {
    color: var(--hero-text) !important;
}
/* ===== FIX HERO GRADIENT ===== */
.hero-top-logos-inner {
    background: var(--hero-bg) !important;
    background-image: var(--hero-bg) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

    /* XÓA background cũ nếu có */
    .hero-top-logos-inner::before,
    .hero-top-logos-inner::after {
        display: none !important;
        background: none !important;
    }

/* TEXT */
.hero-top-logos-copy,
.hero-top-logos-copy h1,
.hero-top-logos-copy p,
.hero-top-logos-copy span {
    color: var(--hero-text) !important;
}

/* Menu ngang + menu dọc theo tblConfig / LangID */
.main-menu-wrap,
.main-menu-wrap .menu,
.main-menu-wrap ul,
.main-menu-wrap li,
.main-menu-wrap .sf-menu,
.main-menu-wrap .sf-menu > li,
.main-menu-wrap .sf-menu > li > a,
.main-menu-wrap .menu a,
.main-menu-wrap .sf-menu li ul,
.main-menu-wrap .sf-menu li ul li,
.main-menu-wrap .sf-menu li ul li a {
    background: var(--top-menu-bg) !important;
    color: var(--top-menu-text) !important;
}

.main-menu-wrap .sf-menu li:hover > a,
.main-menu-wrap .sf-menu li.sfHover > a,
.main-menu-wrap .menu li:hover > a,
.main-menu-wrap .menu li.active > a,
.main-menu-wrap .menu a:hover,
.main-menu-wrap .sf-menu li ul li a:hover {
    color: var(--top-menu-text) !important;
    filter: brightness(1.08);
}

.sidebar-left .menu,
.sidebar-right .menu,
.sidebar-left ul,
.sidebar-right ul,
.sidebar-left li,
.sidebar-right li,
.sidebar-left a,
.sidebar-right a,
.sidebar-left .sf-menu,
.sidebar-right .sf-menu,
.sidebar-left .sf-menu li ul,
.sidebar-right .sf-menu li ul,
.sidebar-left .menu-root,
.sidebar-right .menu-root,
.sidebar-left .menu-root li,
.sidebar-right .menu-root li,
.sidebar-left .menu-root a,
.sidebar-right .menu-root a {
    background: var(--side-menu-bg) !important;
    color: var(--side-menu-text) !important;
}

.sidebar-left .menu a:hover,
.sidebar-right .menu a:hover,
.sidebar-left .sf-menu li:hover > a,
.sidebar-right .sf-menu li:hover > a,
.sidebar-left .menu-root a:hover,
.sidebar-right .menu-root a:hover {
    color: var(--side-menu-text) !important;
    filter: brightness(1.08);
}


/* =========================================================
   MAIN TOP MENU - UPPERCASE COMPACT FIX (10/07/2026)
   Scope: ONLY horizontal top menu inside .main-menu-wrap.
   Does not affect sidebar/menu-bottom/home sidebar menus.
   ========================================================= */
@media (min-width: 861px){
  .main-menu-wrap .main-menu-shell{
    width:100% !important;
    max-width:100% !important;
    padding-left:6px !important;
    padding-right:6px !important;
    gap:4px !important;
    justify-content:flex-start !important;
  }

  .main-menu-wrap .primary-menu-host{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
  }

  .main-menu-wrap .primary-menu-host > .menu-root{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:1px !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .main-menu-wrap .menu-root > li{
    flex:0 0 auto !important;
    margin:0 !important;
    padding:0 !important;
  }

  .main-menu-wrap .menu-root > li > a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    min-height:40px !important;
    padding:8px 7px !important;
    border-radius:6px !important;
    font-family:Arial, Helvetica, sans-serif !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.1 !important;
    letter-spacing:0 !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
  }

  .main-menu-wrap .menu-root > li > a .menu-label,
  .main-menu-wrap .menu-root > li > a span{
    text-transform:uppercase !important;
    font-family:Arial, Helvetica, sans-serif !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
  }

  .main-menu-wrap .menu-icon-badge{
    width:15px !important;
    min-width:15px !important;
    height:15px !important;
    flex:0 0 15px !important;
    margin:0 1px 0 0 !important;
    padding:0 !important;
    font-size:9px !important;
    box-shadow:none !important;
  }

  .main-menu-wrap .menu-icon-badge i{
    font-size:9px !important;
    line-height:1 !important;
  }

  .main-menu-wrap .menu-arrow{
    margin-left:2px !important;
    font-size:9px !important;
  }

  .main-menu-wrap .menu-sub{
    min-width:230px !important;
  }

  .main-menu-wrap .menu-sub a{
    justify-content:flex-start !important;
    padding:9px 10px !important;
    min-height:34px !important;
    font-size:12px !important;
    text-transform:uppercase !important;
  }
}

@media (min-width: 1200px){
  .main-menu-wrap .menu-root > li > a{
    font-size:12.5px !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
  .main-menu-wrap .menu-root > li > a .menu-label,
  .main-menu-wrap .menu-root > li > a span{
    font-size:12.5px !important;
  }
}



/* Modern Portal owns its own menu palette.
   Do not let generic tblConfig menu paint cover the Modern bar gradient. */
body.home-layout-modern .main-menu-wrap .menu,
body.home-layout-modern .main-menu-wrap > .site-shell,
body.home-layout-modern .main-menu-wrap .primary-menu-host,
body.home-layout-modern .main-menu-wrap .menu-root,
body.home-layout-modern .main-menu-wrap .menu-root > li,
body.home-layout-modern .main-menu-wrap .menu-root > li > a{
  background:transparent !important;
  background-image:none !important;
}