/* 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);
}


/* =========================================================
   FIX 16/05/2026 - TranhPhongThuy: nền tổng thể toàn website
   - Lấy màu từ tblConfig.SiteBackgroundColor thông qua biến --site-bg.
   - Có !important để thắng các CSS cũ đang đặt nền trắng.
   - Anh vẫn có thể đổi thủ công trong tblConfig bằng mã màu hoặc linear-gradient(...).
   ========================================================= */
html,
body {
    min-height: 100% !important;
    background: var(--site-bg, linear-gradient(180deg,#fff1c2 0%,#ffedd5 38%,#fed7aa 72%,#fee2e2 100%)) !important;
    background-image: var(--site-bg, linear-gradient(180deg,#fff1c2 0%,#ffedd5 38%,#fed7aa 72%,#fee2e2 100%)) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at top left, rgba(250,204,21,.28), transparent 36%),
        radial-gradient(circle at top right, rgba(220,38,38,.16), transparent 34%),
        radial-gradient(circle at bottom center, rgba(249,115,22,.18), transparent 42%);
}

main.site-shell.page-with-sidebars,
.home-layout-stage,
.content-center,
.topbar-promo-banner-wrap,
.site-header-sticky + main,
.footer-main {
    background-color: transparent !important;
}

/* Làm vùng nội dung chính có nền kem nhẹ để nhìn rõ trên nền Cam/Vàng/Đỏ */
.content-center > section,
.content-center > article,
.home-zone-rich,
.home-media-section,
.home-ecommerce-section,
.page-hero,
.article-content,
.list-item-modern,
.ecommerce-product-card,
.home-ecommerce-card,
.document-card,
.menu-bottom-wrap,
.sidebar-left,
.sidebar-right,
.home-sidebar {
    background-color: rgba(255,255,255,.92) !important;
}