/* P15 externalized static header CSS */ /* Header wow mini top lấy màu từ Quản lý Giao Diện */ .header-wow-mini-top{ background: var(--w11-topbar-bg) !important; color: var(--w11-topbar-text) !important; } .header-wow-mini-top, .header-wow-mini-top i, .header-wow-mini-top a{ color: var(--w11-topbar-text) !important; } .header-wow-mini-top a:hover, .header-wow-mini-top a:hover i{ color: var(--w11-topbar-hover) !important; } /* Header wow top + sticky lấy toàn bộ màu/height/menu/logo/search từ Quản lý Giao Diện */ .header-wow-top.header-wow-top-active{ background: var(--header-wow-top-bg) !important; height: var(--header-wow-top-height) !important; min-height: var(--header-wow-top-height) !important; } .header-wow-top .row, .header-wow .h-logo, .header-wow-top-list{ height: var(--header-wow-top-height) !important; min-height: var(--header-wow-top-height) !important; } .header-wow .h-logo img{ height: min(var(--header-wow-logo-height), 160px) !important; max-height: min(var(--header-wow-logo-height), 160px) !important; } .header-wow-logo-filter-white{filter: brightness(0) invert(1) !important;} .header-wow-logo-filter-black{filter: brightness(0) !important;} .header-wow-logo-filter-grayscale{filter: grayscale(1) !important;} .header-wow-logo-filter-none{filter: none !important;} .header-wow-top-list > a, .header-menu-dropdown-toggle, .header-wow-top-list i, .header-menu-dropdown-toggle i{ color: var(--header-wow-top-text) !important; } .header-wow-top-list > a:hover, .header-wow-top-list > a:hover i, .header-menu-dropdown:hover .header-menu-dropdown-toggle, .header-menu-dropdown:hover .header-menu-dropdown-toggle i{ color: var(--header-wow-top-hover) !important; } .header-menu-dropdown-list, .appWrapper-Header-menu{ background: var(--header-wow-top-dropdown-bg) !important; } .header-menu-dropdown-list .dropdown-item:hover, .header-more-link:hover{ background: var(--header-wow-top-dropdown-item-bg) !important; color: var(--header-wow-top-hover) !important; } .header-wow-sticky, .header-wow-sticky.header-wow-sticky-active{ background: var(--header-wow-sticky-bg) !important; height: var(--header-wow-sticky-height) !important; min-height: var(--header-wow-sticky-height) !important; } .header-wow-sticky > .container, .header-wow-sticky .row, .header-wow-sticky-list{ background: transparent !important; } .header-wow-sticky .row, .header-wow-sticky-list{ height: var(--header-wow-sticky-height) !important; min-height: var(--header-wow-sticky-height) !important; } .header-wow-sticky-search{ max-width: var(--header-wow-sticky-search-width) !important; } .header-wow-sticky-list a, .header-wow-sticky-list i, .toolbar-link-profile a, .toolbar-link-profile i{ color: var(--header-wow-sticky-text) !important; } .header-wow-sticky-list a:hover, .header-wow-sticky-list a:hover i, .toolbar-link-profile a:hover, .toolbar-link-profile a:hover i{ color: var(--header-wow-sticky-hover) !important; } .toolbar-link a, .header-wow-sticky-search-action{ background: var(--header-wow-sticky-button-bg) !important; color: #fff !important; } .toolbar-link-profile a{ background: transparent !important; } /* Quản lý Giao Diện: màu thành phần chung frontend */ html, body, .w11-pro-main{ background: var(--alo-ui-body-bg) !important; color: var(--alo-ui-text-color) !important; } a{color:var(--alo-ui-link-color);} a:hover{color:var(--alo-ui-hover-text-color);} .w11-pro-main h1,.w11-pro-main h2,.w11-pro-main h3,.w11-pro-main h4, .section-title,.block-title,.wt-section-title,.wt-page-title,.wt-detail-title,.wt-shop-title{ color: var(--alo-ui-section-title-color) !important; } .text-muted,.small.text-muted,.wt-muted,.wt-shop-muted,.wt-detail-muted,.w2-muted, .wt-listing-card__meta,.wt-shop-pro-card__meta,.w2-commerce-listing-meta{ color: var(--alo-ui-muted-text-color) !important; } .card,.modal-content,.dropdown-menu,.wt-detail-section,.wt-detail-side-card,.wt-shop-side-card, .wt-shop-content-card,.wt-shop-pro-card,.wt-listing-card,.w2-commerce-listing-card, .w2-commerce-category-card,.w2-service-item,.w11-alogiare-category-card{ background-color: var(--alo-ui-surface-bg) !important; } section,.w2-section,.wt-section,.home-section,.front-section{ background-color: var(--alo-ui-section-bg); } .badge,.badge-soft,.wt-badge,.w2-badge,.listing-badge,.shop-badge{ background: var(--alo-ui-badge-bg) !important; color: var(--alo-ui-badge-text-color) !important; } input:not([type=color]):not([type=checkbox]):not([type=radio]), select, textarea, .form-control,.form-select,.header-wow-sticky-search input,.w2-commerce-search input{ background-color: var(--alo-ui-input-bg) !important; border-color: var(--alo-ui-input-border-color) !important; color: var(--alo-ui-text-color) !important; } input:not([type=color]):focus, select:focus, textarea:focus, .form-control:focus, .form-select:focus{ border-color: var(--alo-ui-input-focus-color) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--alo-ui-input-focus-color) 16%, transparent) !important; } .header-wow-sticky-search,.header-wow-sticky-search input,.w2-commerce-search,.w2-commerce-search input, .search-form,.search-form input{ background: var(--alo-ui-search-bg) !important; color: var(--alo-ui-search-text-color) !important; border-color: var(--alo-ui-search-border-color) !important; } .header-wow-sticky-search input::placeholder,.w2-commerce-search input::placeholder{color:var(--alo-ui-muted-text-color)!important;} .bi:not(.text-white), .fa:not(.text-white), .fas:not(.text-white), .far:not(.text-white), .icon:not(.text-white){ color: var(--alo-ui-global-icon-color); } .icon-box,.wt-icon-box,.w2-icon-box,.feature-icon{ background: var(--alo-ui-global-icon-bg) !important; color: var(--alo-ui-global-icon-color) !important; } hr,.dropdown-divider,.border-top,.border-bottom,.card,.modal-content, .wt-detail-section,.wt-shop-content-card,.wt-shop-side-card,.wt-listing-card{ border-color: var(--alo-ui-divider-color) !important; } .alert:not(.alert-danger):not(.alert-success):not(.alert-primary):not(.alert-info){ background: var(--alo-ui-alert-bg) !important; color: var(--alo-ui-alert-text-color) !important; border-color: var(--alo-ui-alert-bg) !important; } .alogiare-categories{ --alogiare-cat-section-bg: var(--alo-ui-category-section-bg) !important; --alogiare-cat-bg: var(--alo-ui-category-icon-bg) !important; --alo-cat-bg: var(--alo-ui-category-icon-bg) !important; --alogiare-cat-icon-color: var(--alo-ui-category-icon-color) !important; background: var(--alo-ui-category-section-bg) !important; } .alogiare-cat-thumb{ background: var(--alo-ui-category-icon-bg) !important; color: var(--alo-ui-category-icon-color) !important; } .alogiare-cat-thumb i, .alogiare-cat-svg, .alogiare-cat-svg svg{ color: var(--alo-ui-category-icon-color) !important; fill: currentColor !important; stroke: currentColor !important; } .alogiare-cat-svg svg *:not([fill="none"]){fill:currentColor!important;} .alogiare-cat-svg svg *:not([stroke="none"]){stroke:currentColor!important;} .alogiare-cat-svg svg [fill="none"]{fill:none!important;} /* ALO category icon integrity: các path dùng màu nền là phần khoét/cửa kính của SVG, không được global recolor biến thành một khối đặc. Màu vẫn lấy từ Admin/style preset. */ .alogiare-cat-svg svg [fill^="var(--alo-cat-bg"], .alogiare-cat-svg svg [fill^="var(--alogiare-cat-bg"]{ fill:var(--alo-ui-category-icon-bg,var(--alogiare-cat-bg,#fff1f2))!important; } .alogiare-cat-svg svg [stroke^="var(--alo-cat-bg"], .alogiare-cat-svg svg [stroke^="var(--alogiare-cat-bg"]{ stroke:var(--alo-ui-category-icon-bg,var(--alogiare-cat-bg,#fff1f2))!important; } /* ALO CATEGORY ICON CORE V2: một nguồn màu duy nhất cho icon danh mục. Style mẫu sẽ đổ giá trị vào --alo-ui-category-icon-*; Admin vẫn có thể chỉnh riêng 2 màu này tại Quản lý giao diện > Màu thành phần chung frontend. */ .alogiare-taxonomy-card-icon, .ctcat-cat__icon, .w11-alogiare-category-icon, .w2-commerce-category-icon, .w2-service-icon, .wt-seo-category-icon{ background: var(--alo-ui-category-icon-bg, #fff1f2) !important; color: var(--alo-ui-category-icon-color, #ef4444) !important; } .alogiare-taxonomy-card-icon i, .alogiare-taxonomy-card-icon i:before, .ctcat-cat__icon i, .ctcat-cat__icon i:before, .w11-alogiare-category-icon i, .w11-alogiare-category-icon i:before, .w2-commerce-category-icon i, .w2-commerce-category-icon i:before, .w2-service-icon i, .w2-service-icon i:before, .wt-seo-category-icon i, .wt-seo-category-icon i:before{ color: var(--alo-ui-category-icon-color, #ef4444) !important; } .alogiare-cat-text{ color: var(--alo-ui-category-text-color) !important; } .alogiare-cat-link:hover .alogiare-cat-text{ color: var(--alo-ui-category-hover-color) !important; } .alogiare-category-swiper .alogiare-nav-btn{ background: var(--alo-ui-category-nav-bg) !important; color: var(--alo-ui-category-nav-color) !important; } .w2-commerce-category-card, .w2-service-item, .w2-shop-card, .w2-commerce-listing-card, .wt-listing-card, .wt-seo-category-card, .wt-shop-pro-card, .wt-shop-content-card, .wt-shop-side-card, .wt-detail-section, .wt-detail-side-card, .w11-alogiare-category-card{ border-color: var(--alo-ui-card-border-color) !important; } .w2-commerce-category-card:hover, .w2-service-item:hover, .w2-shop-card:hover, .w2-commerce-listing-card:hover, .wt-listing-card:hover, .wt-seo-category-card:hover, .wt-shop-pro-card:hover, .w11-alogiare-category-card:hover{ border-color: var(--alo-ui-card-hover-border-color) !important; } .wt-listing-card__call, .wt-detail-btn-call, .wt-shop-call, .w2-commerce-listing-foot a:first-child, .w2-commerce-search button, .ua-submit--sticky button{ background: var(--alo-ui-primary-button-bg) !important; color: var(--alo-ui-primary-button-text-color) !important; border-color: var(--alo-ui-primary-button-bg) !important; } /* PATCH V8: nhóm nền đồng bộ trong admin: kính lúp + vị trí + đăng tin miễn phí + xem shop. */ .alogiare-search-btn, .alogiare-location-current, .header-wow-sticky-list a.header-wow-sticky-add, .dtx-card__shop-corner, .ctcat-item__shop-cta{ background: var(--alo-ui-cta-button-bg) !important; background-image: none !important; color: var(--alo-ui-cta-button-text-color) !important; border-color: color-mix(in srgb, var(--alo-ui-cta-button-bg) 76%, white) !important; } .alogiare-search-btn:hover, .alogiare-location-current:hover, .header-wow-sticky-list a.header-wow-sticky-add:hover, .dtx-card__shop-corner:hover, .ctcat-item__shop-cta:hover{ background: var(--alo-ui-cta-button-hover-bg) !important; border-color: var(--alo-ui-cta-button-hover-bg) !important; color: var(--alo-ui-cta-button-text-color) !important; } .alogiare-location-current i, .header-wow-sticky-list a.header-wow-sticky-add i, .dtx-card__shop-corner i, .ctcat-item__shop-cta i{ color: var(--alo-ui-cta-button-text-color) !important; } .alogiare-search-btn i{color:#111827!important;} /* CTA nổi bật: các nút từng bị hard-code màu cam như Đăng tin miễn phí, Tìm giá rẻ, Gửi nhu cầu ngay. */ .toolbar-link a, .header-wow-sticky-search-action, .agr-home-search button, .agr-lead-submit, .booking-form button[type=submit], .alogiare-booking-form button[type=submit], .alo-lead-form button[type=submit], a[href*="dang-tin"].btn, .btn-post-free, .post-free-btn, .gx-hotline, .wt-shop-call{ background: var(--alo-ui-cta-button-bg) !important; background-image: none !important; color: var(--alo-ui-cta-button-text-color) !important; border-color: var(--alo-ui-cta-button-bg) !important; box-shadow: 0 12px 25px color-mix(in srgb, var(--alo-ui-cta-button-bg) 24%, transparent) !important; } .toolbar-link a:hover, .header-wow-sticky-search-action:hover, .agr-home-search button:hover, .agr-lead-submit:hover, .booking-form button[type=submit]:hover, .alogiare-booking-form button[type=submit]:hover, .alo-lead-form button[type=submit]:hover, a[href*="dang-tin"].btn:hover, .btn-post-free:hover, .post-free-btn:hover, .gx-hotline:hover, .wt-shop-call:hover{ background: var(--alo-ui-cta-button-hover-bg) !important; background-image: none !important; border-color: var(--alo-ui-cta-button-hover-bg) !important; color: var(--alo-ui-cta-button-text-color) !important; } .dtx-card__kind, .ctcat-list .ctcat-item__kind, .ctcat-item__badge, .listing-category-badge, .service-category-badge, .w2-commerce-pill, .agr-home-hero__badge{ background: var(--alo-ui-cta-badge-bg) !important; background-image: none !important; color: var(--alo-ui-cta-badge-text-color) !important; border-color: color-mix(in srgb, var(--alo-ui-cta-badge-bg) 72%, white) !important; } .dtx-card__kind i, .ctcat-list .ctcat-item__kind i, .agr-home-hero__badge i{ color: var(--alo-ui-cta-badge-text-color) !important; } .agr-lead-form__head{ background: linear-gradient(135deg, var(--alo-ui-link-color), var(--alo-ui-primary-button-hover-bg)) !important; color: #fff !important; } .agr-lead-form__head span{ background: color-mix(in srgb, var(--alo-ui-cta-button-bg) 72%, white) !important; color: var(--alo-ui-cta-button-text-color) !important; } /* PATCH V8: Xem Shop dùng chung nhóm màu nút đồng bộ nổi bật với kính lúp, vị trí và Đăng tin miễn phí. */ .dtx-card__shop-corner, .ctcat-item__shop-cta, .dtx-card a:has(> span):where([class*="shop"]), .dtx-card a[href*="/shop"]{ background: var(--alo-ui-cta-button-bg) !important; background-image: none !important; color: var(--alo-ui-cta-button-text-color) !important; border-color: color-mix(in srgb, var(--alo-ui-cta-button-bg) 72%, white) !important; box-shadow: 0 10px 22px color-mix(in srgb, var(--alo-ui-cta-button-bg) 22%, transparent) !important; } .dtx-card__shop-corner:hover, .ctcat-item__shop-cta:hover, .dtx-card a:has(> span):where([class*="shop"]):hover, .dtx-card a[href*="/shop"]:hover{ background: var(--alo-ui-cta-button-hover-bg) !important; border-color: var(--alo-ui-cta-button-hover-bg) !important; color: var(--alo-ui-cta-button-text-color) !important; } .wt-listing-card__more, .wt-shop-more, .w2-commerce-listing-foot a:last-child{ background: var(--alo-ui-secondary-button-bg) !important; color: var(--alo-ui-secondary-button-text-color) !important; border-color: var(--alo-ui-secondary-button-bg) !important; } .wt-listing-card__call:hover, .wt-detail-btn-call:hover, .wt-shop-call:hover, .w2-commerce-listing-foot a:first-child:hover, .w2-commerce-search button:hover, .ua-submit--sticky button:hover{ background: var(--alo-ui-primary-button-hover-bg) !important; border-color: var(--alo-ui-primary-button-hover-bg) !important; } .wt-listing-card__more:hover, .wt-shop-more:hover, .w2-commerce-listing-foot a:last-child:hover{ background: var(--alo-ui-secondary-button-hover-bg) !important; border-color: var(--alo-ui-secondary-button-hover-bg) !important; } .btn-outline-primary,.btn-outline-danger,.btn-outline-secondary{ border-color: var(--alo-ui-outline-button-border-color) !important; color: var(--alo-ui-outline-button-text-color) !important; } .mobile-bottom-bar,.mobile-fixed-bar,.bottom-mobile-nav,.mobile-toolbar,.w11-mobile-bar{ background: var(--alo-ui-mobile-bar-bg) !important; color: var(--alo-ui-mobile-bar-text-color) !important; border-color: var(--alo-ui-divider-color) !important; } .mobile-bottom-bar a,.mobile-fixed-bar a,.bottom-mobile-nav a,.mobile-toolbar a,.w11-mobile-bar a{ color: var(--alo-ui-mobile-bar-text-color) !important; } .mobile-bottom-bar a.active,.mobile-fixed-bar a.active,.bottom-mobile-nav a.active,.mobile-toolbar a.active,.w11-mobile-bar a.active, .mobile-bottom-bar a:hover,.mobile-fixed-bar a:hover,.bottom-mobile-nav a:hover,.mobile-toolbar a:hover,.w11-mobile-bar a:hover{ color: var(--alo-ui-mobile-bar-active-color) !important; } /* PATCH V3: nút trong lưới sản phẩm/tin đăng ăn theo màu chủ đạo, không ăn theo CTA vàng/cam. */ .ctcat-list .ctcat-item__conversion--step5 a[data-track="listing_list_primary_cta"], .dtx-card__conversion--step5 a[data-track="listing_grid_primary_cta"], .dtx-card .btn, .ctcat-list .ctcat-item .btn, .listing-grid .btn-primary, .listing-card .btn-primary, .wt-listing-card__call, .w2-commerce-listing-foot a:first-child{ background: var(--alo-ui-primary-button-bg) !important; background-image: none !important; color: var(--alo-ui-primary-button-text-color) !important; border-color: var(--alo-ui-primary-button-bg) !important; box-shadow: 0 8px 18px color-mix(in srgb, var(--alo-ui-primary-button-bg) 22%, transparent) !important; } .ctcat-list .ctcat-item__conversion--step5 a[data-track="listing_list_primary_cta"]:hover, .dtx-card__conversion--step5 a[data-track="listing_grid_primary_cta"]:hover, .dtx-card .btn:hover, .ctcat-list .ctcat-item .btn:hover, .listing-grid .btn-primary:hover, .listing-card .btn-primary:hover, .wt-listing-card__call:hover, .w2-commerce-listing-foot a:first-child:hover{ background: var(--alo-ui-primary-button-hover-bg) !important; border-color: var(--alo-ui-primary-button-hover-bg) !important; color: var(--alo-ui-primary-button-text-color) !important; } .dtx-card__kind, .ctcat-list .ctcat-item__kind, .ctcat-item__badge, .listing-category-badge, .service-category-badge, .w2-commerce-pill{ background: var(--alo-ui-primary-button-bg) !important; background-image: none !important; color: var(--alo-ui-primary-button-text-color) !important; border-color: color-mix(in srgb, var(--alo-ui-primary-button-bg) 72%, white) !important; } .dtx-card__kind i, .ctcat-list .ctcat-item__kind i, .ctcat-item__badge i, .listing-category-badge i, .service-category-badge i{ color: var(--alo-ui-primary-button-text-color) !important; } /* PATCH V3: sửa dropdown đăng nhập/đăng ký bị ăn màu CTA do selector .toolbar-link a quá rộng. */ .toolbar-link-profile .alogiare-account-menu{ background: var(--alo-ui-surface-bg) !important; border: 1px solid var(--alo-ui-divider-color) !important; box-shadow: 0 22px 55px color-mix(in srgb, var(--alo-ui-shadow-color) 18%, transparent) !important; padding: 12px !important; border-radius: 18px !important; overflow: visible !important; } .toolbar-link-profile .alogiare-account-menu:before{ background: var(--alo-ui-surface-bg) !important; border-left-color: var(--alo-ui-divider-color) !important; border-top-color: var(--alo-ui-divider-color) !important; } .toolbar-link-profile .alogiare-account-menu-title{ color: var(--alo-ui-muted-text-color) !important; background: transparent !important; border-bottom: 1px solid var(--alo-ui-divider-color) !important; } .toolbar-link-profile .alogiare-account-menu a, .toolbar-link-profile .alogiare-account-logout-btn{ background: transparent !important; background-image: none !important; color: var(--alo-ui-text-color) !important; border: 0 !important; box-shadow: none !important; width: 100% !important; justify-content: initial !important; border-radius: 14px !important; min-height: 56px !important; } .toolbar-link-profile .alogiare-account-menu a:hover, .toolbar-link-profile .alogiare-account-logout-btn:hover{ background: var(--alo-ui-global-icon-bg) !important; color: var(--alo-ui-link-color) !important; transform: none !important; } .toolbar-link-profile .alogiare-account-menu a i, .toolbar-link-profile .alogiare-account-logout-btn i{ background: var(--alo-ui-global-icon-bg) !important; color: var(--alo-ui-global-icon-color) !important; border: 1px solid color-mix(in srgb, var(--alo-ui-global-icon-color) 16%, transparent) !important; box-shadow: none !important; } .toolbar-link-profile .alogiare-account-menu a span, .toolbar-link-profile .alogiare-account-menu a b, .toolbar-link-profile .alogiare-account-logout-btn span{ color: var(--alo-ui-text-color) !important; } .toolbar-link-profile .alogiare-account-menu a small, .toolbar-link-profile .alogiare-account-logout-btn small{ color: var(--alo-ui-muted-text-color) !important; } .header-wow-sticky-list .alogiare-account-toggle{ background: color-mix(in srgb, var(--header-wow-sticky-bg) 18%, white) !important; color: var(--header-wow-sticky-text) !important; border-color: color-mix(in srgb, var(--header-wow-sticky-text) 28%, transparent) !important; } .header-wow-sticky-list .alogiare-account-toggle i, .header-wow-sticky-list .alogiare-account-toggle b, .header-wow-sticky-list .alogiare-account-toggle span{ color: var(--header-wow-sticky-text) !important; } .header-wow-sticky-list .alogiare-account-toggle:hover{ background: color-mix(in srgb, var(--header-wow-sticky-text) 18%, transparent) !important; } /* PATCH V3: khi chọn style preset, hai thanh logo và thanh tìm kiếm dùng cùng màu chủ đạo. */ .header-wow-top.header-wow-top-active, .header-wow-sticky, .header-wow-sticky.header-wow-sticky-active{ background-color: var(--header-wow-top-bg) !important; } /* ALO UI PRO LAYER: làm màu toàn site hài hòa hơn, không bị nhạt rời rạc */ .w11-pro-main, main.w11-pro-main{ background: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--alo-ui-link-color) 6%, transparent), transparent 30%), var(--alo-ui-body-bg) !important; } .home-section, .front-section, .w2-section, .wt-section{ border-radius: 18px; } .w2-commerce-category-card, .w2-service-item, .w2-shop-card, .w2-commerce-listing-card, .wt-listing-card, .wt-seo-category-card, .wt-shop-pro-card, .wt-shop-content-card, .wt-shop-side-card, .wt-detail-section, .wt-detail-side-card, .w11-alogiare-category-card, .card:not(.admin-card):not(.shadow-none){ border-radius: 16px; box-shadow: 0 10px 28px color-mix(in srgb, var(--alo-ui-shadow-color) 7%, transparent) !important; } .w2-commerce-category-card:hover, .w2-service-item:hover, .w2-shop-card:hover, .w2-commerce-listing-card:hover, .wt-listing-card:hover, .wt-seo-category-card:hover, .wt-shop-pro-card:hover, .w11-alogiare-category-card:hover{ box-shadow: 0 16px 36px color-mix(in srgb, var(--alo-ui-shadow-color) 10%, transparent) !important; transform: translateY(-1px); } .wt-listing-card__call, .wt-detail-btn-call, .wt-shop-call, .w2-commerce-listing-foot a:first-child, .w2-commerce-search button, .ua-submit--sticky button, .btn-primary, .btn-danger{ box-shadow: 0 8px 18px color-mix(in srgb, var(--alo-ui-primary-button-bg) 22%, transparent) !important; } .badge,.badge-soft,.wt-badge,.w2-badge,.listing-badge,.shop-badge{ border: 1px solid color-mix(in srgb, var(--alo-ui-badge-text-color) 12%, transparent) !important; } @supports not (color: color-mix(in srgb, #000 50%, #fff)){ .w11-pro-main, main.w11-pro-main{background:var(--alo-ui-body-bg)!important;} } /* Admin color controls: topbar + navbar + footer, tách riêng từng nhóm */ .w11-topbar{ background: var(--w11-topbar-bg) !important; color: var(--w11-topbar-text) !important; } .w11-topbar__left, .w11-topbar a, .w11-topbar i{ color: var(--w11-topbar-text) !important; } .w11-topbar a:hover, .w11-topbar a:hover i{ color: var(--w11-topbar-hover) !important; } .w11-mainbar, .w11-navline{ background: var(--w11-nav-bg) !important; } .w11-brand, .w11-brand__text strong, .w11-brand__text small, .w11-nav-links a, .w11-nav-category, .w11-nav-hot{ color: var(--w11-nav-text) !important; } .w11-nav-links a:hover, .w11-nav-category:hover, .w11-brand:hover .w11-brand__text strong{ color: var(--w11-nav-hover) !important; } .w11-pro-footer{ background: var(--w11-footer-bg) !important; color: var(--w11-footer-text) !important; } .w11-footer-col p, .w11-footer-col a, .w11-footer-contact span, .w11-footer-bottom{ color: var(--w11-footer-text) !important; } .w11-footer-col h3, .w11-footer-brand h3{ color: var(--w11-footer-heading) !important; } .w11-footer-col a:hover, .w11-footer-contact a:hover, .w11-footer-contact a:hover i{ color: var(--w11-footer-hover) !important; } /* ALO UI SYNC CONTAINER FIX: đồng bộ width 1280px trang chủ / danh mục / chi tiết / shop / footer */ .w11-pro-container, .container-main, .front-container, .wt-container, .wt-market-container, .wt-detail-container, .wt-page-container, .w2-commerce-container, .gx-container, .site-container, .page-container, main.w11-pro-main > .container, main.w11-pro-main .container:not(.container-fluid) { width: min(1280px, calc(100% - 32px)) !important; max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* Shop đang có padding riêng làm khung nhìn lệch so với trang chủ */ .wt-shop-container { padding-left: 0 !important; padding-right: 0 !important; } /* Header desktop: nền full, phần ruột header-wow-top + header-wow-sticky đồng bộ container 1280px */ @media (min-width: 992px) { .header-wow-mini-top > .container, .header-wow-mini-inner, .header-wow-top > .container, .header-wow-sticky > .container { width: min(1280px, calc(100% - 32px)) !important; max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } .header-wow-top, .header-wow-sticky, .header-wow-mini-top { width: 100% !important; max-width: none !important; } } @media (max-width: 991.98px) { .w11-pro-container, .container-main, .front-container, .wt-container, .wt-market-container, .wt-detail-container, .wt-page-container, .w2-commerce-container, .gx-container, .site-container, .page-container, main.w11-pro-main > .container, main.w11-pro-main .container:not(.container-fluid) { width: 100% !important; max-width: 100% !important; padding-left: 8px !important; padding-right: 8px !important; } .wt-shop-container { padding-left: 8px !important; padding-right: 8px !important; } } /* V6: HERO/BANNER SLIDER FULL MÀN HÌNH - Header/menu + các khối nội dung vẫn 1280px. - Riêng slider/banner trang chủ được kéo full viewport theo chiều ngang. - Form gửi nhu cầu vẫn bám khung trái, không bị phình toàn màn hình. */ @media (min-width: 992px) { .kc-css-268160.kc_row { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; overflow: hidden !important; box-sizing: border-box !important; } .kc-css-268160.kc_row > .kc-row-container.kc-container, .kc-css-268160.kc_row > .kc-row-container.alogiare-booking-oldstyle-container { width: min(1280px, calc(100% - 32px)) !important; max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; overflow: visible !important; } .kc-css-268160.kc_row .kc-wrap-columns { overflow: visible !important; } .kc-css-268160.kc_row .kc-css-698619, .kc-css-268160.kc_row .home_slider, .kc-css-268160.kc_row .alogiare-old-slider-box { overflow: visible !important; } .kc-css-268160.kc_row .kc-css-698619 { margin-right: calc((1280px - 100vw) / 2) !important; max-width: none !important; } .kc-css-268160.kc_row .home_slider .kc-css-19381, .kc-css-268160.kc_row .home_slider .kc-carousel-images, .kc-css-268160.kc_row .home_slider .owl-carousel-images, .kc-css-268160.kc_row .home_slider .dc_home_slider, .kc-css-268160.kc_row .home_slider .owl-wrapper-outer, .kc-css-268160.kc_row .home_slider .owl-stage-outer, .kc-css-268160.kc_row .home_slider .owl-stage, .kc-css-268160.kc_row .home_slider .item, .kc-css-268160.kc_row .alogiare-old-booking-swiper, .kc-css-268160.kc_row .alogiare-old-booking-swiper .swiper-wrapper, .kc-css-268160.kc_row .alogiare-old-booking-swiper .swiper-slide { width: 100% !important; max-width: none !important; } .kc-css-268160.kc_row .home_slider .item img, .kc-css-268160.kc_row .home_slider .item img[data-lazy-src], .kc-css-268160.kc_row .alogiare-old-booking-swiper img { width: 100% !important; max-width: none !important; height: 100% !important; object-fit: cover !important; display: block !important; } } @media (max-width: 991.98px) { .kc-css-268160.kc_row, .kc-css-268160.kc_row > .kc-row-container.kc-container, .kc-css-268160.kc_row > .kc-row-container.alogiare-booking-oldstyle-container, .kc-css-268160.kc_row .kc-css-698619, .kc-css-268160.kc_row .home_slider, .kc-css-268160.kc_row .alogiare-old-slider-box { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } } .w11-auth-page{padding:42px 0 56px;background:linear-gradient(180deg,#f8fafc 0%,#fff 72%)} .w11-auth-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,460px);gap:24px;align-items:stretch;background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:28px;box-shadow:var(--w11-shadow-medium);overflow:hidden} .w11-auth-card__intro{padding:42px;background:linear-gradient(135deg,var(--w11-primary),var(--w11-primary-dark));color:#fff;display:flex;flex-direction:column;justify-content:center} .w11-auth-card__intro h1{font-size:32px;line-height:1.16;margin:14px 0 12px;font-weight:900}.w11-auth-card__intro p{font-size:16px;line-height:1.65;margin:0;opacity:.92}.w11-auth-badge{display:inline-flex;align-items:center;gap:8px;width:max-content;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:8px 12px;font-weight:800}.w11-auth-form{padding:34px;display:flex;flex-direction:column;gap:12px}.w11-auth-form label{font-weight:800;color:#0f172a}.w11-auth-form input[type=text],.w11-auth-form input[type=password]{height:48px;border:1px solid #dbe3ef;border-radius:14px;padding:0 14px;outline:none;background:#f8fafc}.w11-auth-form input:focus{border-color:var(--w11-primary);box-shadow:0 0 0 4px rgba(239,35,60,.10);background:#fff}.w11-auth-form button{height:50px;border:0;border-radius:16px;background:var(--w11-primary);color:#fff;font-weight:900;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:6px}.w11-auth-check{display:flex!important;align-items:center;gap:8px;font-weight:600!important;color:#475569!important}.w11-auth-alert{background:#fff1f2;border:1px solid #fecdd3;color:#be123c;border-radius:14px;padding:10px 12px;font-weight:700}.w11-auth-switch{margin:8px 0 0;text-align:center;color:#64748b}.w11-auth-switch a{font-weight:900;color:var(--w11-primary);text-decoration:none} @media(max-width:768px){.w11-auth-page{padding:22px 0 36px}.w11-auth-card{grid-template-columns:1fr;border-radius:22px}.w11-auth-card__intro{padding:26px}.w11-auth-card__intro h1{font-size:24px}.w11-auth-form{padding:24px}} /* SHOP SEO STEP 1: link cloud, FAQ, related shop blocks */ .wt-shop-seo-links, .wt-shop-seo-intro, .wt-shop-faq { margin-top: 22px; } .wt-shop-link-cloud { display:flex; flex-wrap:wrap; gap:10px; } .wt-shop-link-cloud a { display:inline-flex; align-items:center; gap:6px; padding:9px 12px; border:1px solid rgba(15,23,42,.10); border-radius:999px; background:#fff; color:#0f172a; font-size:14px; font-weight:700; text-decoration:none; box-shadow:0 8px 22px rgba(15,23,42,.05); } .wt-shop-link-cloud a:hover { transform:translateY(-1px); box-shadow:0 10px 26px rgba(15,23,42,.09); } .wt-shop-link-cloud small { color:#64748b; font-size:12px; font-weight:600; } .wt-shop-faq details { border:1px solid rgba(15,23,42,.10); border-radius:14px; background:#fff; padding:12px 14px; margin-top:10px; } .wt-shop-faq summary { cursor:pointer; font-weight:800; color:#0f172a; } .wt-shop-faq p { margin:10px 0 0; color:#475569; } .wt-shop-related-list { display:grid; gap:10px; } .wt-shop-related-list a { display:flex; align-items:center; gap:10px; padding:10px; border-radius:14px; background:#f8fafc; text-decoration:none; color:#0f172a; } .wt-shop-related-list img { width:42px; height:42px; border-radius:12px; object-fit:cover; background:#fff; } .wt-shop-related-list strong { display:block; font-size:14px; line-height:1.25; } .wt-shop-related-list small { display:block; color:#64748b; font-size:12px; margin-top:2px; } /* PATCH V4: khóa màu card/listing theo màu chủ đạo, tách khỏi CTA cam/vàng. */ .ctcat-list .ctcat-item__conversion--step5 a[data-track="listing_list_primary_cta"], .dtx-card__conversion--step5 a[data-track="listing_grid_primary_cta"], .ctcat-list .ctcat-item__conversion--step5 a:first-child, .dtx-card__conversion--step5 a:first-child, .listing-grid .btn-primary, .listing-card .btn-primary, .wt-listing-card__call, .w2-commerce-listing-foot a:first-child{ background: var(--alo-ui-link-color) !important; background-image: none !important; border-color: var(--alo-ui-link-color) !important; color: #fff !important; box-shadow: 0 8px 18px color-mix(in srgb, var(--alo-ui-link-color) 22%, transparent) !important; } .ctcat-list .ctcat-item__conversion--step5 a[data-track="listing_list_primary_cta"]:hover, .dtx-card__conversion--step5 a[data-track="listing_grid_primary_cta"]:hover, .ctcat-list .ctcat-item__conversion--step5 a:first-child:hover, .dtx-card__conversion--step5 a:first-child:hover, .listing-grid .btn-primary:hover, .listing-card .btn-primary:hover, .wt-listing-card__call:hover, .w2-commerce-listing-foot a:first-child:hover{ background: var(--alo-ui-primary-button-hover-bg) !important; border-color: var(--alo-ui-primary-button-hover-bg) !important; color: #fff !important; } .ctcat-list .ctcat-item__kind, .dtx-card__kind, .ctcat-list .ctcat-item--product .ctcat-item__kind, .ctcat-list .ctcat-item--service .ctcat-item__kind, .ctcat-list .ctcat-item--transport .ctcat-item__kind, .ctcat-list .ctcat-item--deal .ctcat-item__kind, .ctcat-list .ctcat-item--used .ctcat-item__kind, .ctcat-list .ctcat-item--property .ctcat-item__kind, .dtx-card--product .dtx-card__kind, .dtx-card--service .dtx-card__kind, .dtx-card--transport .dtx-card__kind, .dtx-card--deal .dtx-card__kind, .dtx-card--used .dtx-card__kind, .dtx-card--property .dtx-card__kind{ background: var(--alo-ui-link-color) !important; background-image: none !important; color: #fff !important; border-color: color-mix(in srgb, var(--alo-ui-link-color) 72%, white) !important; } .ctcat-list .ctcat-item__kind i, .dtx-card__kind i{ color: #fff !important; } .dtx-card__shop-corner, .ctcat-item__shop-cta{ background: var(--alo-ui-cta-button-bg) !important; color: var(--alo-ui-cta-button-text-color) !important; border-color: var(--alo-ui-cta-button-bg) !important; }