/* ======================================================================
   UNIFIED PUBLIC FOOTER - V30 THEME-MATCHED READABILITY AUTHORITY (25/08/2026)
   Scope: #siteFooter only. No Admin, header, menu, body or module impact.
   Purpose: identical typography/contrast on Home, category and article pages,
            regardless of HomeLayout/theme CSS loaded earlier or inside views.
   ====================================================================== */

html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable{
    --footer-unified-bg:#0b2035;
    --footer-unified-bg-2:#102b45;
    --footer-unified-card:rgba(255,255,255,.065);
    --footer-unified-card-border:rgba(255,255,255,.14);
    --footer-unified-title:#ffffff;
    --footer-unified-text:#edf4fb;
    --footer-unified-muted:#d5e3ef;
    --footer-unified-link:#ffe08a;
    --footer-unified-link-hover:#ffffff;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:28px 0 22px !important;
    background:linear-gradient(135deg,var(--footer-unified-bg) 0%,var(--footer-unified-bg-2) 100%) !important;
    background-color:var(--footer-unified-bg) !important;
    color:var(--footer-unified-text) !important;
    border-top:3px solid rgba(255,224,138,.72) !important;
    box-shadow:0 -8px 30px rgba(3,15,27,.10) !important;
    font-family:Arial,"Helvetica Neue",Helvetica,sans-serif !important;
    font-size:14px !important;
    font-weight:400 !important;
    line-height:1.65 !important;
    letter-spacing:0 !important;
    text-shadow:none !important;
    filter:none !important;
    opacity:1 !important;
    isolation:isolate;
}


/* ======================================================================
   V30 - FOOTER COLOR FOLLOWS EACH LAYOUT'S MAIN HORIZONTAL MENU
   The shared footer keeps one typography/readability system, but its paint
   now follows the actual menu identity of each HomeLayout on Home/category/article.
   ====================================================================== */

/* Default / Magazine / configured layouts: inherit the same tblConfig menu paint. */
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable{
    --footer-unified-bg:var(--top-menu-bg,#0f2d5c);
    --footer-unified-bg-2:var(--top-menu-bg,#1d4ed8);
    --footer-unified-title:var(--top-menu-text,#ffffff);
    --footer-unified-text:var(--top-menu-text,#ffffff);
}
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable{
    background:var(--top-menu-bg,linear-gradient(90deg,#0f2d5c 0%,#1d4ed8 52%,#38bdf8 100%)) !important;
    background-color:#0f2d5c !important;
}

/* Trang tin: use the configured horizontal-menu color consistently on all pages. */
html body:not(.admin-body).home-layout-news #siteFooter.footer-main.footer-unified-readable{
    background:var(--top-menu-bg,linear-gradient(90deg,#0f2d5c 0%,#1d4ed8 52%,#38bdf8 100%)) !important;
    background-color:#0f2d5c !important;
    --footer-unified-title:var(--top-menu-text,#ffffff);
    --footer-unified-text:var(--top-menu-text,#ffffff);
    --footer-unified-muted:#e8f2ff;
    --footer-unified-link:#fff0a6;
    --footer-unified-link-hover:#ffffff;
}

/* Giáo dục: same paint authority as the Education horizontal menu. */
html body:not(.admin-body).home-layout-education #siteFooter.footer-main.footer-unified-readable{
    background:var(--top-menu-bg,linear-gradient(90deg,#0f2d5c 0%,#1d4ed8 52%,#38bdf8 100%)) !important;
    background-color:#0f2d5c !important;
    --footer-unified-title:var(--top-menu-text,#ffffff);
    --footer-unified-text:var(--top-menu-text,#ffffff);
    --footer-unified-muted:#eaf3ff;
    --footer-unified-link:#fff0a6;
    --footer-unified-link-hover:#ffffff;
}

/* Modern Portal: exact blue/cyan/teal family used by #mainNavigation. */
html body:not(.admin-body).home-layout-modern #siteFooter.footer-main.footer-unified-readable{
    background:#155fd0 !important;
    background-image:linear-gradient(100deg,#1554c6 0%,#1279dc 42%,#10a9d4 72%,#20b99d 100%) !important;
    --footer-unified-title:#ffffff;
    --footer-unified-text:#f5fbff;
    --footer-unified-muted:#e0f6fb;
    --footer-unified-link:#fff0a6;
    --footer-unified-link-hover:#ffffff;
    border-top-color:rgba(242,184,75,.92) !important;
}

/* Vận tải đường sắt: exact blue/cyan/teal family used by #mainNavigation. */
html body:not(.admin-body).home-layout-transport #siteFooter.footer-main.footer-unified-readable{
    background:#103d78 !important;
    background-image:linear-gradient(100deg,#103d78 0%,#1268b9 47%,#10a2b6 75%,#16877f 100%) !important;
    --footer-unified-title:#ffffff;
    --footer-unified-text:#f4fbff;
    --footer-unified-muted:#dceff7;
    --footer-unified-link:#ffe49b;
    --footer-unified-link-hover:#ffffff;
    border-top-color:#f0a23c !important;
}

/* Cơ khí đúc: graphite/steel + brass, matching the horizontal menu. */
html body:not(.admin-body).home-layout-mechanical #siteFooter.footer-main.footer-unified-readable,
html body:not(.admin-body).mechanical-theme-active #siteFooter.footer-main.footer-unified-readable{
    background:#202a30 !important;
    background-image:linear-gradient(100deg,#1f292e 0%,#34434a 55%,#5f4a26 100%) !important;
    --footer-unified-title:#ffffff;
    --footer-unified-text:#f5f7f8;
    --footer-unified-muted:#e0e5e7;
    --footer-unified-link:#ffd993;
    --footer-unified-link-hover:#ffffff;
    border-top-color:#d79a35 !important;
}

/* Tranh/Vật phẩm Phong Thủy: burgundy/orange/gold, matching #mainNavigation. */
html body:not(.admin-body).home-layout-fengshui #siteFooter.footer-main.footer-unified-readable,
html body:not(.admin-body).fengshui-theme-active #siteFooter.footer-main.footer-unified-readable{
    background:#4b0c1a !important;
    background-image:linear-gradient(102deg,#4b0c1a 0%,#711426 25%,#9d202d 51%,#d04a22 76%,#e0a51e 100%) !important;
    --footer-unified-title:#fffdf5;
    --footer-unified-text:#fff8e9;
    --footer-unified-muted:#f9e8cf;
    --footer-unified-link:#ffe69b;
    --footer-unified-link-hover:#ffffff;
    border-top-color:#dfa62b !important;
}

html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable > .site-shell.footer-cols{
    width:min(1280px,100%) !important;
    max-width:1280px !important;
    margin:0 auto !important;
    padding-left:16px !important;
    padding-right:16px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1.15fr) minmax(220px,.8fr) minmax(0,1.05fr) !important;
    gap:18px !important;
    align-items:stretch !important;
    color:var(--footer-unified-text) !important;
}

html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable .footer-box{
    min-width:0 !important;
    margin:0 !important;
    padding:20px !important;
    background:var(--footer-unified-card) !important;
    background-image:none !important;
    color:var(--footer-unified-text) !important;
    border:1px solid var(--footer-unified-card-border) !important;
    border-radius:14px !important;
    box-shadow:none !important;
    text-shadow:none !important;
    filter:none !important;
    opacity:1 !important;
    overflow-wrap:anywhere;
}

/* Headings/titles: one type scale and always bright. */
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable h1,
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable h2,
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable h3,
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable h4,
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable h5,
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable h6,
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable .footer-title{
    margin-top:0 !important;
    margin-bottom:10px !important;
    color:var(--footer-unified-title) !important;
    -webkit-text-fill-color:var(--footer-unified-title) !important;
    font-family:Arial,"Helvetica Neue",Helvetica,sans-serif !important;
    font-size:17px !important;
    font-weight:700 !important;
    line-height:1.4 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    text-shadow:none !important;
    opacity:1 !important;
}

/* Plain footer text. This intentionally overrides copied Word/HTML color styles. */
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable p,
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable div:not(.footer-logo-item):not(.footer-logo-grid),
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable span,
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable li,
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable address,
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable small,
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable strong,
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable b,
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable em,
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable font{
    color:var(--footer-unified-text) !important;
    -webkit-text-fill-color:var(--footer-unified-text) !important;
    font-family:Arial,"Helvetica Neue",Helvetica,sans-serif !important;
    line-height:1.65 !important;
    text-shadow:none !important;
    opacity:1 !important;
    filter:none !important;
}

html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable p{
    margin:0 0 8px !important;
}
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable p:last-child{
    margin-bottom:0 !important;
}

/* Links must never merge into the dark footer background. */
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable a,
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable a:link,
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable a:visited{
    color:var(--footer-unified-link) !important;
    -webkit-text-fill-color:var(--footer-unified-link) !important;
    font-family:Arial,"Helvetica Neue",Helvetica,sans-serif !important;
    font-weight:600 !important;
    text-decoration:none !important;
    text-shadow:none !important;
    opacity:1 !important;
    filter:none !important;
}
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable a:hover,
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable a:focus-visible{
    color:var(--footer-unified-link-hover) !important;
    -webkit-text-fill-color:var(--footer-unified-link-hover) !important;
    text-decoration:underline !important;
    text-decoration-thickness:1px !important;
    text-underline-offset:3px !important;
    outline:none !important;
}

html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable i,
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable .fa,
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable .fa-solid,
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable .fa-regular{
    color:var(--footer-unified-link) !important;
    -webkit-text-fill-color:var(--footer-unified-link) !important;
    opacity:1 !important;
}

/* Customer quick links: clear touch targets, same on every page. */
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable .customer-quick-links{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    margin-top:14px !important;
}
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable .customer-quick-links a{
    display:inline-flex !important;
    align-items:center !important;
    gap:7px !important;
    min-height:36px !important;
    padding:7px 10px !important;
    border:1px solid rgba(255,224,138,.34) !important;
    border-radius:9px !important;
    background:rgba(255,255,255,.055) !important;
}
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable .customer-quick-links a:hover,
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable .customer-quick-links a:focus-visible{
    background:rgba(255,255,255,.12) !important;
}

/* Footer partner logos need a neutral light card so dark/transparent logos remain visible. */
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable .footer-logo-grid{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(105px,1fr)) !important;
    gap:10px !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
}
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable .footer-logo-item,
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable a.footer-logo-item{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:82px !important;
    padding:10px !important;
    background:#ffffff !important;
    border:1px solid rgba(255,255,255,.35) !important;
    border-radius:10px !important;
    box-shadow:none !important;
    overflow:hidden !important;
}
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable .footer-logo-item img{
    display:block !important;
    width:auto !important;
    max-width:100% !important;
    max-height:64px !important;
    height:auto !important;
    object-fit:contain !important;
    opacity:1 !important;
    filter:none !important;
}

html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable hr{
    border:0 !important;
    border-top:1px solid rgba(255,255,255,.18) !important;
    margin:12px 0 !important;
}

/* Strip visual pollution from legacy/copied rich HTML without removing its content. */
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable [style*="background"],
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable [bgcolor]{
    background-color:transparent !important;
    background-image:none !important;
}
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable table,
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable td,
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable th{
    color:var(--footer-unified-text) !important;
    -webkit-text-fill-color:var(--footer-unified-text) !important;
    border-color:rgba(255,255,255,.20) !important;
}

@media (max-width:900px){
    html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable{
        padding-top:20px !important;
        padding-bottom:18px !important;
    }
    
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable > .site-shell.footer-cols{
        grid-template-columns:1fr 1fr !important;
        gap:12px !important;
        padding-left:10px !important;
        padding-right:10px !important;
    }
    html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable .footer-box:last-child{
        grid-column:1 / -1 !important;
    }
}

@media (max-width:620px){
    html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable{
        width:100% !important;
        max-width:100% !important;
        padding:14px 0 !important;
        font-size:13.5px !important;
    }
    
html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable > .site-shell.footer-cols{
        width:100% !important;
        max-width:100% !important;
        grid-template-columns:1fr !important;
        gap:9px !important;
        padding-left:8px !important;
        padding-right:8px !important;
    }
    html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable .footer-box,
    html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable .footer-box:last-child{
        grid-column:auto !important;
        padding:14px !important;
        border-radius:10px !important;
    }
    html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable h1,
    html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable h2,
    html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable h3,
    html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable h4,
    html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable .footer-title{
        font-size:16px !important;
        margin-bottom:8px !important;
    }
    html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable .customer-quick-links{
        display:grid !important;
        grid-template-columns:1fr !important;
    }
    html body:not(.admin-body) #siteFooter.footer-main.footer-unified-readable .customer-quick-links a{
        width:100% !important;
        justify-content:flex-start !important;
    }
}

/* ======================================================================
   V31 - HARD READABILITY FIX FOR DEFAULT / NEWS / EDUCATION FOOTERS
   25/08/2026
   Root cause in V30: footer text inherited --top-menu-text. Old tblConfig
   records can contain dark TopMenuTextColor, producing dark text on a dark
   menu-matched footer. Background still follows the horizontal menu, but
   footer foreground is now an independent high-contrast palette.
   Scope is only #siteFooter on the three requested layouts.
   ====================================================================== */

/* Default layout is normalized to "magazine" by _Layout.cshtml. Keep aliases
   as defensive compatibility for older data/config variants. */
html body:not(.admin-body):is(.home-layout-magazine,.home-layout-default) #siteFooter.footer-main.footer-unified-readable,
html body:not(.admin-body).home-layout-news #siteFooter.footer-main.footer-unified-readable,
html body:not(.admin-body).home-layout-education #siteFooter.footer-main.footer-unified-readable{
    --footer-unified-title:#ffffff !important;
    --footer-unified-text:#f8fbff !important;
    --footer-unified-muted:#e5eef8 !important;
    --footer-unified-link:#ffe79a !important;
    --footer-unified-link-hover:#ffffff !important;
    color:#f8fbff !important;
    -webkit-text-fill-color:#f8fbff !important;
}

/* Cover rich HTML copied into tblConfig.Footer as well as normal footer markup.
   Do not target logo images/SVG paint; only text-bearing HTML elements. */
html body:not(.admin-body):is(.home-layout-magazine,.home-layout-default) #siteFooter.footer-main.footer-unified-readable :is(
    p,div,span,li,address,small,strong,b,em,font,label,section,article,aside,
    table,thead,tbody,tfoot,tr,td,th,caption,blockquote,figcaption,code
),
html body:not(.admin-body).home-layout-news #siteFooter.footer-main.footer-unified-readable :is(
    p,div,span,li,address,small,strong,b,em,font,label,section,article,aside,
    table,thead,tbody,tfoot,tr,td,th,caption,blockquote,figcaption,code
),
html body:not(.admin-body).home-layout-education #siteFooter.footer-main.footer-unified-readable :is(
    p,div,span,li,address,small,strong,b,em,font,label,section,article,aside,
    table,thead,tbody,tfoot,tr,td,th,caption,blockquote,figcaption,code
){
    color:#f8fbff !important;
    -webkit-text-fill-color:#f8fbff !important;
    text-shadow:none !important;
    opacity:1 !important;
    filter:none !important;
}

/* Heading authority - always pure white on these dark menu-colored footers. */
html body:not(.admin-body):is(.home-layout-magazine,.home-layout-default) #siteFooter.footer-main.footer-unified-readable :is(h1,h2,h3,h4,h5,h6,.footer-title),
html body:not(.admin-body).home-layout-news #siteFooter.footer-main.footer-unified-readable :is(h1,h2,h3,h4,h5,h6,.footer-title),
html body:not(.admin-body).home-layout-education #siteFooter.footer-main.footer-unified-readable :is(h1,h2,h3,h4,h5,h6,.footer-title){
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    opacity:1 !important;
}

/* Links remain visually distinct without becoming dark. */
html body:not(.admin-body):is(.home-layout-magazine,.home-layout-default) #siteFooter.footer-main.footer-unified-readable a,
html body:not(.admin-body).home-layout-news #siteFooter.footer-main.footer-unified-readable a,
html body:not(.admin-body).home-layout-education #siteFooter.footer-main.footer-unified-readable a{
    color:#ffe79a !important;
    -webkit-text-fill-color:#ffe79a !important;
    opacity:1 !important;
}
html body:not(.admin-body):is(.home-layout-magazine,.home-layout-default) #siteFooter.footer-main.footer-unified-readable a:hover,
html body:not(.admin-body):is(.home-layout-magazine,.home-layout-default) #siteFooter.footer-main.footer-unified-readable a:focus-visible,
html body:not(.admin-body).home-layout-news #siteFooter.footer-main.footer-unified-readable a:hover,
html body:not(.admin-body).home-layout-news #siteFooter.footer-main.footer-unified-readable a:focus-visible,
html body:not(.admin-body).home-layout-education #siteFooter.footer-main.footer-unified-readable a:hover,
html body:not(.admin-body).home-layout-education #siteFooter.footer-main.footer-unified-readable a:focus-visible{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
}

/* Prevent old inline background colors from creating dark-on-dark islands in
   rich Footer HTML. Preserve purpose-built footer cards/logo surfaces. */
html body:not(.admin-body):is(.home-layout-magazine,.home-layout-default) #siteFooter.footer-main.footer-unified-readable .footer-box :is(p,span,font,strong,b,em,td,th,div):not(.footer-logo-item):not(.footer-logo-grid),
html body:not(.admin-body).home-layout-news #siteFooter.footer-main.footer-unified-readable .footer-box :is(p,span,font,strong,b,em,td,th,div):not(.footer-logo-item):not(.footer-logo-grid),
html body:not(.admin-body).home-layout-education #siteFooter.footer-main.footer-unified-readable .footer-box :is(p,span,font,strong,b,em,td,th,div):not(.footer-logo-item):not(.footer-logo-grid){
    border-color:rgba(255,255,255,.16) !important;
}