/*
 * P17 - Frontend system sync
 * 1) Master Banner OFF => hide the whole visual slot/wrapper, not only banner content.
 * 2) All neutral/interface icons follow the single Admin global icon color.
 * Loaded after navbar/category/page CSS so legacy hard-coded reds cannot win.
 */

:root{
    /* Legacy components (mega menu/mobile/category cards) used this undefined token. */
    --alo-ui-primary-color:var(--alo-ui-global-icon-color,#0f766e);

    /* Category icon system now follows the same global icon tokens selected in Admin. */
    --alo-ui-category-icon-color:var(--alo-ui-global-icon-color,#0f766e);
    --alo-ui-category-icon-bg:var(--alo-ui-global-icon-bg,#ecfdf5);
    --alogiare-cat-icon-color:var(--alo-ui-global-icon-color,#0f766e);
    --alogiare-cat-bg:var(--alo-ui-global-icon-bg,#ecfdf5);
    --alo-cat-bg:var(--alo-ui-global-icon-bg,#ecfdf5);
}

/* =========================
   BANNER MASTER SWITCH
   ========================= */
body.alo-banners-disabled :is(
    .alogiare-banner-wrap,
    .front-banner,
    .ctcat-top-ad,
    .ctcat-inline-ad,
    .ctcat-sidebar-ad,
    .ctcat-adsense-slot,
    .alo-category-bottom-banner,
    .wt-shop-directory-top-ad,
    .wt-shop-directory-inline-ad,
    .wt-shop-directory-sidebar-ad,
    .wt-shop-directory-bottom-ad,
    .ct5-detail-banner,
    .ct5-detail-banner-top,
    .ct5-detail-banner-mobile-fallback,
    .ct5-shop-banner,
    .ct5-shop-banner-top,
    .ct5-shop-banner-bottom,
    .ct5-shop-sidebar-banner-card,
    .dtx-banner,
    .dtx-adbox
){
    display:none!important;
    min-height:0!important;
    height:0!important;
    max-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    box-shadow:none!important;
    overflow:hidden!important;
}

/* Generic cards that are only ad containers: remove card shell too. */
body.alo-banners-disabled :is(.ct5-ad-card,.wt-detail-side-card,.wt-shop-side-card):has(.front-banner){
    display:none!important;
    min-height:0!important;
    height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
}

/* =========================
   GLOBAL ICON COLOR SYSTEM
   ========================= */
body.w11-pro-site{
    --alo-frontend-icon-color:var(--alo-ui-global-icon-color,var(--alo-theme-primary,#0f766e));
    --alo-frontend-icon-bg:var(--alo-ui-global-icon-bg,color-mix(in srgb,var(--alo-frontend-icon-color) 10%,white));
}

/* Neutral Bootstrap icons inherit the Admin icon color by default. */
body.w11-pro-site i.bi{
    color:var(--alo-frontend-icon-color)!important;
}

/* Icons inside real buttons/brand links keep button text/brand contrast. */
body.w11-pro-site :is(
    button,.btn,[role="button"],
    .ct5-btn,.w11-call-btn,.header-wow-top-link,.header-wow-sticky-button,
    .floating-contact-item,.mobile-bottom-menu-item,
    .alo-v24-lead-btn,.industry-template__button,.portfolio-contact__actions a,
    .ct5-social-row a,.ct5-side-actions a,.wt-detail-contact-actions a,
    .taxi-shop-cta,.taxi-shop-contact-action,.vpd-cta,.xe-shop-cta
) i.bi{
    color:inherit!important;
}

/* Brand/social/semantic states are intentionally not recolored. */
body.w11-pro-site :is(
    .text-danger,.text-success,.text-warning,.text-info,
    .alert,.badge,.toast,.validation-error,.is-invalid,.is-valid,
    .listing-badge--featured,.listing-badge--vip,.status-badge,
    .facebook,.messenger,.zalo,.youtube,.tiktok,.instagram
) i.bi{color:inherit!important;}

/* Themeable icon chips/cards: force the global Admin color even when nested in links. */
body.w11-pro-site :is(
    .alogiare-mega-taxonomy__icon,
    .alogiare-mega-category,
    .alogiare-taxonomy-card-icon,
    .ctcat-cat__icon,
    .w11-alogiare-category-icon,
    .w2-commerce-category-icon,
    .w2-service-icon,
    .wt-seo-category-icon,
    .alo-home1-category__icon,
    .alo-home1-service-card__fallback,
    .alo-home2-type-card__icon,
    .alo-home2-category-card__icon,
    .alo-home3-top-item__icon,
    .lse4-intent-icon
) i,
body.w11-pro-site :is(
    .alogiare-mega-taxonomy__icon,
    .alogiare-mega-category,
    .alogiare-taxonomy-card-icon,
    .ctcat-cat__icon,
    .w11-alogiare-category-icon,
    .w2-commerce-category-icon,
    .w2-service-icon,
    .wt-seo-category-icon,
    .alo-home1-category__icon,
    .alo-home1-service-card__fallback,
    .alo-home2-type-card__icon,
    .alo-home2-category-card__icon,
    .alo-home3-top-item__icon,
    .lse4-intent-icon
) i:before{
    color:var(--alo-frontend-icon-color)!important;
}

body.w11-pro-site :is(
    .alogiare-mega-taxonomy__icon,
    .alogiare-mega-category i,
    .alogiare-taxonomy-card-icon,
    .ctcat-cat__icon,
    .w11-alogiare-category-icon,
    .w2-commerce-category-icon,
    .w2-service-icon,
    .wt-seo-category-icon,
    .alo-home1-category__icon,
    .alo-home1-service-card__fallback,
    .alo-home2-type-card__icon,
    .alo-home2-category-card__icon,
    .alo-home3-top-item__icon,
    .lse4-intent-icon
){
    color:var(--alo-frontend-icon-color)!important;
    background-color:var(--alo-frontend-icon-bg)!important;
    border-color:color-mix(in srgb,var(--alo-frontend-icon-color) 16%,transparent)!important;
}

/* Category SVG image assets are rendered as a mask so their red/orange source paint no longer leaks through. */
.alo-theme-icon-mask{
    display:inline-block;
    width:1.35em;
    height:1.35em;
    flex:0 0 auto;
    background:currentColor!important;
    color:var(--alo-frontend-icon-color,var(--alo-ui-global-icon-color,#0f766e))!important;
    -webkit-mask-image:var(--alo-theme-icon-url);
    mask-image:var(--alo-theme-icon-url);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:contain;
    mask-size:contain;
}

body.w11-pro-site :is(
    .alogiare-taxonomy-card-icon,
    .ctcat-cat__icon,
    .w11-alogiare-category-icon,
    .w2-commerce-category-icon,
    .w2-service-icon,
    .wt-seo-category-icon,
    .alo-home1-category__icon,
    .alo-home1-service-card__fallback,
    .alo-home2-type-card__icon,
    .alo-home2-category-card__icon,
    .alo-home3-top-item__icon
) .alo-theme-icon-mask{
    color:var(--alo-frontend-icon-color)!important;
}

/* Mega-menu from the screenshot: remove final hard-coded red palette. */
body.w11-pro-site .alogiare-mega-taxonomy__icon,
body.w11-pro-site .alogiare-mega-category i{
    color:var(--alo-frontend-icon-color)!important;
    background:var(--alo-frontend-icon-bg)!important;
    border-color:color-mix(in srgb,var(--alo-frontend-icon-color) 16%,transparent)!important;
}
body.w11-pro-site .alogiare-mega-search__box>i{
    color:var(--alo-frontend-icon-color)!important;
}
body.w11-pro-site .alogiare-mega-taxonomy:hover,
body.w11-pro-site .alogiare-mega-taxonomy.is-active,
body.w11-pro-site .alogiare-mega-category:hover,
body.w11-pro-site .alogiare-mega-category:focus{
    color:var(--alo-ui-link-color,var(--alo-frontend-icon-color))!important;
    border-color:color-mix(in srgb,var(--alo-frontend-icon-color) 26%,transparent)!important;
}


/* ================================================================
   P17.1 - TRUE GLOBAL FRONTEND ICON THEME
   Mọi icon giao diện/trung tính phải lấy màu duy nhất từ Admin:
   ui_global_icon_color + ui_global_icon_bg.
   Chỉ brand social / trạng thái / CTA tương phản được phép giữ màu riêng.
   ================================================================ */
body.w11-pro-site{
    --alo-frontend-icon-color:var(--alo-ui-global-icon-color,var(--alo-theme-primary,#0f766e));
    --alo-frontend-icon-bg:var(--alo-ui-global-icon-bg,color-mix(in srgb,var(--alo-frontend-icon-color) 10%,white));
    --alo-ui-category-icon-color:var(--alo-frontend-icon-color)!important;
    --alo-ui-category-icon-bg:var(--alo-frontend-icon-bg)!important;
}

/* Các hộp/icon chip đang tồn tại trên Home, danh mục, tỉnh/xã, shop, listing,
   footer, mobile drawer, popup danh mục và trang liên hệ. */
body.w11-pro-site :is(
    .alo-clean-hero-card__icon,
    .alo-clean-category__icon,
    .alo-clean-location__icon,
    .alo-home1-category__icon,
    .alo-home1-service-card__fallback,
    .alo-home2-action-card__icon,
    .alo-home2-type-card__icon,
    .alo-home2-category-card__icon,
    .alo-home3-category-item__icon,
    .alo-home3-top-item__icon,
    .alogiare-taxonomy-card-icon,
    .alogiare-taxonomy-deal-icon,
    .alogiare-mega-taxonomy__icon,
    .alogiare-mega-category i,
    .w11-alogiare-category-icon,
    .w11-category-card>span,
    .ctcat-cat__icon,
    .dtx-subcat__icon,
    .w2-commerce-category-icon,
    .w2-service-icon,
    .wt-seo-category-icon,
    .p3-category-tile i,
    .lse4-intent-icon,
    .alogiare-bottom-taxonomy__icon,
    .w11-mobile-panel__link-icon,
    .alo-support-icon,
    .alo-unified-location-icon,
    .loc-icon,
    .dtf-pro-title-icon,
    .dtf-pro-section-icon,
    .route-time-icon,
    .hb-icon-head,
    .hb-home-icon-slider-section
){
    color:var(--alo-frontend-icon-color)!important;
}

body.w11-pro-site :is(
    .alo-clean-hero-card__icon,
    .alo-clean-category__icon,
    .alo-clean-location__icon,
    .alo-home1-category__icon,
    .alo-home1-service-card__fallback,
    .alo-home2-action-card__icon,
    .alo-home2-type-card__icon,
    .alo-home2-category-card__icon,
    .alo-home3-category-item__icon,
    .alo-home3-top-item__icon,
    .alogiare-taxonomy-card-icon,
    .alogiare-taxonomy-deal-icon,
    .alogiare-mega-taxonomy__icon,
    .alogiare-mega-category i,
    .w11-alogiare-category-icon,
    .w11-category-card>span,
    .ctcat-cat__icon,
    .dtx-subcat__icon,
    .w2-commerce-category-icon,
    .w2-service-icon,
    .wt-seo-category-icon,
    .p3-category-tile i,
    .lse4-intent-icon,
    .alogiare-bottom-taxonomy__icon,
    .w11-mobile-panel__link-icon,
    .alo-support-icon,
    .alo-unified-location-icon,
    .loc-icon,
    .dtf-pro-section-icon,
    .route-time-icon,
    .hb-icon-head
){
    background-color:var(--alo-frontend-icon-bg)!important;
    background-image:none!important;
    border-color:color-mix(in srgb,var(--alo-frontend-icon-color) 16%,transparent)!important;
}

/* Icon font / SVG currentColor nằm trong các hộp trên luôn theo màu Admin. */
body.w11-pro-site :is(
    .alo-clean-hero-card__icon,
    .alo-clean-category__icon,
    .alo-clean-location__icon,
    .alo-home1-category__icon,
    .alo-home1-service-card__fallback,
    .alo-home2-action-card__icon,
    .alo-home2-type-card__icon,
    .alo-home2-category-card__icon,
    .alo-home3-category-item__icon,
    .alo-home3-top-item__icon,
    .alogiare-taxonomy-card-icon,
    .alogiare-taxonomy-deal-icon,
    .alogiare-mega-taxonomy__icon,
    .alogiare-mega-category,
    .w11-alogiare-category-icon,
    .w11-category-card,
    .ctcat-cat__icon,
    .dtx-subcat__icon,
    .w2-commerce-category-icon,
    .w2-service-icon,
    .wt-seo-category-icon,
    .p3-category-tile,
    .lse4-intent-icon,
    .alogiare-bottom-taxonomy__icon,
    .w11-mobile-panel__link-icon,
    .alo-support-icon,
    .alo-unified-location-icon,
    .loc-icon,
    .dtf-pro-title-icon,
    .dtf-pro-section-icon,
    .route-time-icon,
    .hb-icon-head
) :is(i,svg,path){
    color:var(--alo-frontend-icon-color)!important;
}
body.w11-pro-site :is(
    .alo-clean-hero-card__icon,
    .alo-clean-category__icon,
    .alo-clean-location__icon,
    .alogiare-taxonomy-card-icon,
    .ctcat-cat__icon,
    .dtx-subcat__icon,
    .w11-alogiare-category-icon,
    .alogiare-bottom-taxonomy__icon,
    .w11-mobile-panel__link-icon,
    .alo-support-icon,
    .alo-unified-location-icon,
    .loc-icon
) svg [fill]:not([fill="none"]){fill:currentColor!important;}
body.w11-pro-site :is(
    .alo-clean-hero-card__icon,
    .alo-clean-category__icon,
    .alo-clean-location__icon,
    .alogiare-taxonomy-card-icon,
    .ctcat-cat__icon,
    .dtx-subcat__icon,
    .w11-alogiare-category-icon,
    .alogiare-bottom-taxonomy__icon,
    .w11-mobile-panel__link-icon,
    .alo-support-icon,
    .alo-unified-location-icon,
    .loc-icon
) svg [stroke]:not([stroke="none"]){stroke:currentColor!important;}

/* Các icon giao diện Bootstrap còn lại: links/menu/filter/breadcrumb/meta đều theo theme.
   CTA/social/status đã được trả về inherit ở các rule exception phía trên. */
body.w11-pro-site :is(
    main,#main-content,.w11-pro-main,
    .header-wow,.alogiare-mobile-app-header,.w11-mobile-panel,
    footer,.dt-footer,.alogiare-bottom-sheet
) i.bi{
    color:var(--alo-frontend-icon-color)!important;
}
body.w11-pro-site :is(
    main,#main-content,.w11-pro-main,
    .header-wow,.alogiare-mobile-app-header,.w11-mobile-panel,
    footer,.dt-footer,.alogiare-bottom-sheet
) :is(
    button,.btn,[role="button"],
    .floating-contact-item,.mobile-bottom-menu-item,
    .alo-v24-lead-btn,.industry-template__button,
    .ct5-btn,.w11-call-btn,.header-wow-sticky-button,
    .ct5-social-row a,.ct5-side-actions a,
    .facebook,.messenger,.zalo,.youtube,.tiktok,.instagram,
    .text-danger,.text-success,.text-warning,.text-info,
    .alert,.badge,.status-badge,.listing-badge--featured,.listing-badge--vip
) i.bi{color:inherit!important;}

/* Old red literals on menu/category arrows/icons are neutralized without changing text prices/errors. */
body.w11-pro-site .alogiare-bottom-category-grid i,
body.w11-pro-site .dtx-view-icons i,
body.w11-pro-site .ctcat-filterbar i,
body.w11-pro-site .ctcat-title-row i,
body.w11-pro-site .alo-clean-heading>a i,
body.w11-pro-site .alo-clean-category__arrow,
body.w11-pro-site .alo-clean-location__arrow{
    color:var(--alo-frontend-icon-color)!important;
}

/* Mask SVG category assets always uses the chosen Admin color. */
body.w11-pro-site .alo-theme-icon-mask{
    color:var(--alo-frontend-icon-color)!important;
    background-color:currentColor!important;
}

/* =====================================================================
   P17.2 — DESKTOP HEADER NAV COLOR ISOLATION
   Header navigation is intentionally separated from the global icon theme.
   Default state: icon + label = white.
   Hover/focus state: icon + label = Admin global hover text color.
   This rule also neutralizes current/active page coloring until hover.
   ===================================================================== */
@media (min-width: 992px){
    body.w11-pro-site .header-wow .header-wow-top-list > a,
    body.w11-pro-site .header-wow .header-wow-top-list > a:link,
    body.w11-pro-site .header-wow .header-wow-top-list > a:visited,
    body.w11-pro-site .header-wow .header-wow-top-list > a.active,
    body.w11-pro-site .header-wow .header-wow-top-list > a.is-active,
    body.w11-pro-site .header-wow .header-wow-top-list > a[aria-current="page"],
    body.w11-pro-site .header-wow .header-menu-dropdown-toggle,
    body.w11-pro-site .header-wow .header-menu-dropdown-toggle[aria-expanded="true"]{
        color:#fff !important;
    }

    body.w11-pro-site .header-wow .header-wow-top-list > a i,
    body.w11-pro-site .header-wow .header-wow-top-list > a span,
    body.w11-pro-site .header-wow .header-wow-top-list > a svg,
    body.w11-pro-site .header-wow .header-menu-dropdown-toggle i,
    body.w11-pro-site .header-wow .header-menu-dropdown-toggle span,
    body.w11-pro-site .header-wow .header-menu-dropdown-toggle svg{
        color:#fff !important;
        fill:currentColor !important;
        stroke:currentColor;
        transition:color .16s ease, fill .16s ease, stroke .16s ease;
    }

    body.w11-pro-site .header-wow .header-wow-top-list > a:hover,
    body.w11-pro-site .header-wow .header-wow-top-list > a:focus-visible,
    body.w11-pro-site .header-wow .header-menu-dropdown:hover > .header-menu-dropdown-toggle,
    body.w11-pro-site .header-wow .header-menu-dropdown-toggle:hover,
    body.w11-pro-site .header-wow .header-menu-dropdown-toggle:focus-visible{
        color:var(--alo-ui-hover-text-color,#FFC107) !important;
    }

    body.w11-pro-site .header-wow .header-wow-top-list > a:hover i,
    body.w11-pro-site .header-wow .header-wow-top-list > a:hover span,
    body.w11-pro-site .header-wow .header-wow-top-list > a:hover svg,
    body.w11-pro-site .header-wow .header-wow-top-list > a:focus-visible i,
    body.w11-pro-site .header-wow .header-wow-top-list > a:focus-visible span,
    body.w11-pro-site .header-wow .header-wow-top-list > a:focus-visible svg,
    body.w11-pro-site .header-wow .header-menu-dropdown:hover > .header-menu-dropdown-toggle i,
    body.w11-pro-site .header-wow .header-menu-dropdown:hover > .header-menu-dropdown-toggle span,
    body.w11-pro-site .header-wow .header-menu-dropdown:hover > .header-menu-dropdown-toggle svg,
    body.w11-pro-site .header-wow .header-menu-dropdown-toggle:hover i,
    body.w11-pro-site .header-wow .header-menu-dropdown-toggle:hover span,
    body.w11-pro-site .header-wow .header-menu-dropdown-toggle:hover svg,
    body.w11-pro-site .header-wow .header-menu-dropdown-toggle:focus-visible i,
    body.w11-pro-site .header-wow .header-menu-dropdown-toggle:focus-visible span,
    body.w11-pro-site .header-wow .header-menu-dropdown-toggle:focus-visible svg{
        color:var(--alo-ui-hover-text-color,#FFC107) !important;
        fill:currentColor !important;
        stroke:currentColor;
    }

    /* Do not let the global neutral-icon theme recolor header-nav glyphs. */
    body.w11-pro-site .header-wow .header-wow-top-list .bi,
    body.w11-pro-site .header-wow .header-menu-dropdown-toggle .bi{
        color:inherit !important;
    }
}

/* =====================================================================
   P17.2B — HEADER NAV HARD ISOLATION
   Fix: global P17.1 i.bi rule still consumed --alo-frontend-icon-color.
   Scope the theme token locally on each desktop nav item so icon font and
   its ::before glyph resolve to the same color as the label.
   ===================================================================== */
@media (min-width: 992px){
    body.w11-pro-site .header-wow .header-wow-top-list > a,
    body.w11-pro-site .header-wow .header-menu-dropdown-toggle{
        --alo-frontend-icon-color:#fff;
        --alo-ui-global-icon-color:#fff;
        color:#fff!important;
    }

    body.w11-pro-site .header-wow .header-wow-top-list > a:hover,
    body.w11-pro-site .header-wow .header-wow-top-list > a:focus-visible,
    body.w11-pro-site .header-wow .header-menu-dropdown:hover > .header-menu-dropdown-toggle,
    body.w11-pro-site .header-wow .header-menu-dropdown-toggle:hover,
    body.w11-pro-site .header-wow .header-menu-dropdown-toggle:focus-visible{
        --alo-frontend-icon-color:var(--alo-ui-hover-text-color,#FFC107);
        --alo-ui-global-icon-color:var(--alo-ui-hover-text-color,#FFC107);
        color:var(--alo-ui-hover-text-color,#FFC107)!important;
    }

    body.w11-pro-site .header-wow .header-wow-top-list > a > i.bi,
    body.w11-pro-site .header-wow .header-menu-dropdown-toggle > i.bi,
    body.w11-pro-site .header-wow .header-wow-top-list > a > i.bi::before,
    body.w11-pro-site .header-wow .header-wow-top-list > a > i.bi:before,
    body.w11-pro-site .header-wow .header-menu-dropdown-toggle > i.bi::before,
    body.w11-pro-site .header-wow .header-menu-dropdown-toggle > i.bi:before{
        color:currentColor!important;
    }

    body.w11-pro-site .header-wow .header-wow-top-list > a:hover > i.bi,
    body.w11-pro-site .header-wow .header-wow-top-list > a:hover > i.bi::before,
    body.w11-pro-site .header-wow .header-wow-top-list > a:focus-visible > i.bi,
    body.w11-pro-site .header-wow .header-wow-top-list > a:focus-visible > i.bi::before,
    body.w11-pro-site .header-wow .header-menu-dropdown:hover > .header-menu-dropdown-toggle > i.bi,
    body.w11-pro-site .header-wow .header-menu-dropdown:hover > .header-menu-dropdown-toggle > i.bi::before,
    body.w11-pro-site .header-wow .header-menu-dropdown-toggle:hover > i.bi,
    body.w11-pro-site .header-wow .header-menu-dropdown-toggle:hover > i.bi::before,
    body.w11-pro-site .header-wow .header-menu-dropdown-toggle:focus-visible > i.bi,
    body.w11-pro-site .header-wow .header-menu-dropdown-toggle:focus-visible > i.bi::before{
        color:var(--alo-ui-hover-text-color,#FFC107)!important;
    }
}