/* KCThanhHoa TopBanner Smooth Slider 202606030205 Chuyển từ display none/block sang trượt mượt bằng transform. */ .topbar-promo-banner-wrap--slider { overflow:hidden !important; } .kc-top-banner-slider { position:relative !important; display:block !important; width:100% !important; overflow:hidden !important; background:transparent !important; } .kc-top-banner-slider-track { display:flex !important; width:100% !important; will-change:transform !important; transform:translate3d(0,0,0); transition:transform 900ms cubic-bezier(.22,.61,.36,1) !important; } .kc-top-banner-slider .home-banner-slide, .kc-top-banner-slider .kc-top-banner-slide { display:block !important; flex:0 0 100% !important; width:100% !important; min-width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; opacity:1 !important; transform:none !important; } .kc-top-banner-slider .home-banner-slide a, .kc-top-banner-slider .kc-top-banner-slide a { display:block !important; width:100% !important; } .kc-top-banner-slider img { display:block !important; width:100% !important; max-width:100% !important; height:auto !important; object-fit:var(--kc-top-banner-fit, fill) !important; backface-visibility:hidden !important; transform:translateZ(0) !important; } /* Ẩn tuyệt đối nút trái/phải và chấm */ .topbar-promo-banner-wrap--slider .banner-btn, .topbar-promo-banner-wrap--slider .home-banner-dots, .topbar-promo-banner-wrap--slider .home-banner-dot, .topbar-promo-banner-wrap--slider .slick-arrow, .topbar-promo-banner-wrap--slider .slick-dots, .topbar-promo-banner-wrap--slider .swiper-button-prev, .topbar-promo-banner-wrap--slider .swiper-button-next, .topbar-promo-banner-wrap--slider .swiper-pagination { display:none !important; } /* Không hiện lại slider cũ trong thân trang chủ */ .home-banner-stage { display:none !important; } /* KCThanhHoa 11/06/2026 - FIX đúng vị trí anh chỉ:
Các rule dùng ID để thắng các CSS chung .home-banner-slide img đang fix 96px ở theme-customizer.css. */ .topbar-promo-banner-wrap--slider { --kc-top-banner-height:144px; --kc-top-banner-mobile-height:96px; --kc-top-banner-radius:0px; --kc-top-banner-fit:fill; height:var(--kc-top-banner-height) !important; min-height:var(--kc-top-banner-height) !important; max-height:var(--kc-top-banner-height) !important; } #kcTopBannerSlider, #kcTopBannerSlider.kc-top-banner-slider, .topbar-promo-banner-wrap--slider #kcTopBannerSlider { height:var(--kc-top-banner-height) !important; min-height:var(--kc-top-banner-height) !important; max-height:var(--kc-top-banner-height) !important; border-radius:var(--kc-top-banner-radius) !important; overflow:hidden !important; } #kcTopBannerSlider .kc-top-banner-slider-track, #kcTopBannerSlider .home-banner-slide, #kcTopBannerSlider .kc-top-banner-slide, #kcTopBannerSlider .home-banner-slide > a, #kcTopBannerSlider .kc-top-banner-slide > a { height:100% !important; min-height:100% !important; max-height:100% !important; } #kcTopBannerSlider .home-banner-slide img, #kcTopBannerSlider .kc-top-banner-slide img, .topbar-promo-banner-wrap--slider #kcTopBannerSlider img { width:100% !important; height:100% !important; min-height:100% !important; max-height:100% !important; object-fit:var(--kc-top-banner-fit) !important; object-position:center center !important; } @media (max-width: 768px) { .topbar-promo-banner-wrap--slider { height:var(--kc-top-banner-mobile-height) !important; min-height:var(--kc-top-banner-mobile-height) !important; max-height:var(--kc-top-banner-mobile-height) !important; } #kcTopBannerSlider, #kcTopBannerSlider.kc-top-banner-slider, .topbar-promo-banner-wrap--slider #kcTopBannerSlider { height:var(--kc-top-banner-mobile-height) !important; min-height:var(--kc-top-banner-mobile-height) !important; max-height:var(--kc-top-banner-mobile-height) !important; } } /* KCThanhHoa 11/06/2026 - FIX hở trắng dưới chân khi tăng chiều cao slider. Ép toàn bộ khung -> track -> slide -> a -> img cao 100% theo #kcTopBannerSlider. */ .topbar-promo-banner-wrap--slider, .topbar-promo-banner-wrap--slider > .site-shell, #kcTopBannerSlider, #kcTopBannerSlider.kc-top-banner-slider { height:var(--kc-top-banner-height,144px) !important; min-height:var(--kc-top-banner-height,144px) !important; max-height:var(--kc-top-banner-height,144px) !important; overflow:hidden !important; background:transparent !important; line-height:0 !important; } #kcTopBannerSlider .kc-top-banner-slider-track { height:100% !important; min-height:100% !important; max-height:100% !important; align-items:stretch !important; } #kcTopBannerSlider article.home-banner-slide, #kcTopBannerSlider article.kc-top-banner-slide, #kcTopBannerSlider .home-banner-slide, #kcTopBannerSlider .kc-top-banner-slide, #kcTopBannerSlider .home-banner-slide > a, #kcTopBannerSlider .kc-top-banner-slide > a { height:100% !important; min-height:100% !important; max-height:100% !important; display:block !important; overflow:hidden !important; line-height:0 !important; } #kcTopBannerSlider img, #kcTopBannerSlider .home-banner-slide img, #kcTopBannerSlider .kc-top-banner-slide img { display:block !important; width:100% !important; height:100% !important; min-height:100% !important; max-height:100% !important; object-fit:var(--kc-top-banner-fit, fill) !important; object-position:var(--kc-top-banner-object-position, center center) !important; vertical-align:top !important; margin:0 !important; padding:0 !important; border:0 !important; } @media (max-width:768px) { .topbar-promo-banner-wrap--slider, .topbar-promo-banner-wrap--slider > .site-shell, #kcTopBannerSlider, #kcTopBannerSlider.kc-top-banner-slider { height:var(--kc-top-banner-mobile-height,96px) !important; min-height:var(--kc-top-banner-mobile-height,96px) !important; max-height:var(--kc-top-banner-mobile-height,96px) !important; } } /* KCThanhHoa 11/06/2026 - banner chữ không cắt không hở: dùng fill cho #kcTopBannerSlider để không bị trắng chân và không bị ngoạm mất dòng chữ dưới. */ .topbar-promo-banner-wrap--slider #kcTopBannerSlider img, #kcTopBannerSlider img, #kcTopBannerSlider .home-banner-slide img, #kcTopBannerSlider .kc-top-banner-slide img { width:100% !important; height:100% !important; min-height:100% !important; max-height:100% !important; object-fit:var(--kc-top-banner-fit, fill) !important; object-position:center center !important; } /* KCThanhHoa 11/06/2026 - triệt khe hở trắng 1-2px dưới banner top */ .topbar-promo-banner-wrap--slider, .topbar-promo-banner-wrap--slider > .site-shell, .topbar-promo-banner-wrap--slider #kcTopBannerSlider, .topbar-promo-banner-wrap--slider #kcTopBannerSlider .kc-top-banner-slider-track, .topbar-promo-banner-wrap--slider #kcTopBannerSlider article, .topbar-promo-banner-wrap--slider #kcTopBannerSlider a { margin-bottom:0 !important; padding-bottom:0 !important; border-bottom:0 !important; line-height:0 !important; font-size:0 !important; overflow:hidden !important; background:transparent !important; } .topbar-promo-banner-wrap--slider #kcTopBannerSlider img { height:calc(var(--kc-top-banner-height,144px) + 2px) !important; min-height:calc(var(--kc-top-banner-height,144px) + 2px) !important; max-height:calc(var(--kc-top-banner-height,144px) + 2px) !important; margin-top:-1px !important; display:block !important; vertical-align:top !important; } @media (max-width:768px) { .topbar-promo-banner-wrap--slider #kcTopBannerSlider img { height:calc(var(--kc-top-banner-mobile-height,96px) + 2px) !important; min-height:calc(var(--kc-top-banner-mobile-height,96px) + 2px) !important; max-height:calc(var(--kc-top-banner-mobile-height,96px) + 2px) !important; } } /* KCThanhHoa 11/06/2026 - FIX slider trượt sang vùng rỗng: Không để rule chiều cao/overflow làm mất flex width của slide. */ #kcTopBannerSlider .kc-top-banner-slider-track { display:flex !important; flex-wrap:nowrap !important; width:100% !important; min-width:100% !important; overflow:visible !important; transform:translate3d(0,0,0); } #kcTopBannerSlider article.home-banner-slide, #kcTopBannerSlider article.kc-top-banner-slide, #kcTopBannerSlider .home-banner-slide, #kcTopBannerSlider .kc-top-banner-slide { flex:0 0 100% !important; flex-basis:100% !important; flex-shrink:0 !important; flex-grow:0 !important; width:100% !important; min-width:100% !important; max-width:100% !important; display:block !important; position:relative !important; } #kcTopBannerSlider .home-banner-slide > a, #kcTopBannerSlider .kc-top-banner-slide > a { width:100% !important; min-width:100% !important; max-width:100% !important; display:block !important; } /* ======================================================================== V33 - RESPONSIVE TOP BANNER: KHÔNG MÉO ẢNH TRÊN TABLET / MOBILE 21/08/2026 ------------------------------------------------------------------------ Desktop giữ cấu hình hiện có. <=1024px: ảnh thật luôn CONTAIN đúng tỷ lệ; nền mờ dùng chính ảnh banner để khung vẫn lớn, hiện đại, không tạo cảm giác một dải ảnh bé giữa nền trắng. ======================================================================== */ @media (max-width:1024px){ .topbar-promo-banner-wrap--slider, .topbar-promo-banner-wrap--slider > .site-shell, #kcTopBannerSlider, #kcTopBannerSlider.kc-top-banner-slider{ height:clamp(112px,14vw,132px) !important; min-height:clamp(112px,14vw,132px) !important; max-height:clamp(112px,14vw,132px) !important; background:#eef3f8 !important; } #kcTopBannerSlider .kc-top-banner-slider-track, #kcTopBannerSlider article.home-banner-slide, #kcTopBannerSlider article.kc-top-banner-slide, #kcTopBannerSlider .home-banner-slide, #kcTopBannerSlider .kc-top-banner-slide, #kcTopBannerSlider .home-banner-slide > a, #kcTopBannerSlider .kc-top-banner-slide > a{ height:100% !important; min-height:100% !important; max-height:100% !important; } #kcTopBannerSlider article.home-banner-slide, #kcTopBannerSlider article.kc-top-banner-slide{ position:relative !important; isolation:isolate !important; background:#eef3f8 !important; } /* Backdrop mờ từ chính banner: chỉ để làm đầy khung, ảnh thật bên trên không crop. */ #kcTopBannerSlider article.home-banner-slide::before, #kcTopBannerSlider article.kc-top-banner-slide::before{ content:""; position:absolute; inset:-10px; z-index:0; background-image:var(--kc-mobile-banner-bg, none); background-position:center center; background-size:cover; background-repeat:no-repeat; filter:blur(13px) saturate(.92); transform:scale(1.08); opacity:.30; pointer-events:none; } #kcTopBannerSlider .home-banner-slide > a, #kcTopBannerSlider .kc-top-banner-slide > a{ position:relative !important; z-index:1 !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:6px 8px !important; box-sizing:border-box !important; background:rgba(255,255,255,.10) !important; } .topbar-promo-banner-wrap--slider #kcTopBannerSlider img, #kcTopBannerSlider img, #kcTopBannerSlider .home-banner-slide img, #kcTopBannerSlider .kc-top-banner-slide img{ position:relative !important; z-index:2 !important; width:100% !important; height:100% !important; min-height:0 !important; max-height:100% !important; object-fit:contain !important; object-position:center center !important; margin:0 !important; padding:0 !important; border:0 !important; filter:none !important; transform:none !important; } } @media (max-width:768px){ .topbar-promo-banner-wrap--slider, .topbar-promo-banner-wrap--slider > .site-shell, #kcTopBannerSlider, #kcTopBannerSlider.kc-top-banner-slider{ height:clamp(108px,30vw,124px) !important; min-height:clamp(108px,30vw,124px) !important; max-height:clamp(108px,30vw,124px) !important; } .topbar-promo-banner-wrap--slider{ padding:0 !important; border-bottom:0 !important; } .topbar-promo-banner-wrap--slider > .site-shell{ padding-left:8px !important; padding-right:8px !important; } #kcTopBannerSlider{ border-radius:10px !important; box-shadow:0 4px 14px rgba(15,45,78,.10) !important; } #kcTopBannerSlider .home-banner-slide > a, #kcTopBannerSlider .kc-top-banner-slide > a{ padding:7px 8px !important; } } @media (max-width:420px){ .topbar-promo-banner-wrap--slider, .topbar-promo-banner-wrap--slider > .site-shell, #kcTopBannerSlider, #kcTopBannerSlider.kc-top-banner-slider{ height:108px !important; min-height:108px !important; max-height:108px !important; } } /* ======================================================================== V40 - MOBILE TOP SLIDER FROM tblLogo.MobileSlider FOR ALL PUBLIC PAGES - 22/08/2026 ------------------------------------------------------------------------ - Desktop slider cũ không thay đổi. - Khi có ảnh MobileSlider: toàn bộ trang public dùng Slider Mobi ở <=768px. - Trang chủ và Trang trong dùng chung đúng một nguồn tblLogo.MobileSlider. - Ảnh Mobi dùng khung vuông 1:1, thumb nhỏ 320/480/640 để giảm tải mạng. ======================================================================== */ .topbar-promo-banner-wrap--mobile-slider { display:none !important; } @media (max-width:768px){ .topbar-promo-banner-wrap--slider.kc-top-banner-desktop-only { display:none !important; } .topbar-promo-banner-wrap--mobile-slider { display:block !important; width:100% !important; margin:0 !important; padding:0 !important; overflow:hidden !important; background:transparent !important; line-height:0 !important; } .topbar-promo-banner-wrap--mobile-slider > .site-shell { width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; } #kcMobileTopBannerSlider, #kcMobileTopBannerSlider.kc-mobile-top-banner-slider { display:block !important; width:100% !important; height:auto !important; min-height:0 !important; max-height:none !important; aspect-ratio:1 / 1 !important; overflow:hidden !important; border-radius:0 !important; background:#eef3f8 !important; box-shadow:none !important; } #kcMobileTopBannerSlider .kc-top-banner-slider-track, #kcMobileTopBannerSlider .home-banner-slide, #kcMobileTopBannerSlider .kc-top-banner-slide, #kcMobileTopBannerSlider .home-banner-slide > a, #kcMobileTopBannerSlider .kc-top-banner-slide > a { height:100% !important; min-height:100% !important; max-height:100% !important; } #kcMobileTopBannerSlider .home-banner-slide, #kcMobileTopBannerSlider .kc-top-banner-slide { flex:0 0 100% !important; width:100% !important; min-width:100% !important; max-width:100% !important; padding:0 !important; margin:0 !important; overflow:hidden !important; background:#eef3f8 !important; } #kcMobileTopBannerSlider .home-banner-slide > a, #kcMobileTopBannerSlider .kc-top-banner-slide > a { display:block !important; width:100% !important; padding:0 !important; margin:0 !important; } #kcMobileTopBannerSlider img, #kcMobileTopBannerSlider .home-banner-slide img, #kcMobileTopBannerSlider .kc-top-banner-slide img { display:block !important; width:100% !important; height:100% !important; min-height:100% !important; max-height:100% !important; margin:0 !important; padding:0 !important; border:0 !important; object-fit:cover !important; object-position:center center !important; transform:none !important; filter:none !important; } } @media (min-width:769px){ .topbar-promo-banner-wrap--mobile-slider { display:none !important; } }