/** * CLS (Cumulative Layout Shift) Fixes for KingShop.vn * Priority: Critical - Load first in * Created: 2025-12-23 */ /* 1. Reserve space for logo container */ .kNzuLy { position: relative; min-height: 26px; } /* 2. Reserve space for product images */ .product-card .image-container, .sc-651a3ef7-3, .product-image-wrapper { position: relative; aspect-ratio: 1 / 1; background-color: #f5f5f5; overflow: hidden; } .product-card .image-container img, .sc-651a3ef7-3 img, .product-image-wrapper img { position: absolute; width: 100%; height: 100%; object-fit: contain; } /* 3. Reserve space for main slider/carousel before Slick initializes */ .slick-slider:not(.slick-initialized), .sc-f04b01ef-0:not(.slick-initialized) { min-height: 350px; } @media (max-width: 768px) { .slick-slider:not(.slick-initialized), .sc-f04b01ef-0:not(.slick-initialized) { min-height: 180px; } } /* 4. Prevent header layout shift */ .kLbmdF { min-height: 60px; } @media (min-width: 1200px) { .kLbmdF { min-height: 70px; } } /* 5. Reserve space for banner images */ .banner-container, .sc-cd91ee6c-2 { position: relative; width: 100%; } .banner-container::after, .sc-cd91ee6c-2::after { content: ""; display: block; padding-bottom: 4%; /* 1200x48 ratio */ } @media (max-width: 768px) { .banner-container::after, .sc-cd91ee6c-2::after { padding-bottom: 12.2%; /* 819x100 ratio */ } } /* 6. Font display optimization */ @font-face { font-family: '__Roboto_1978c1'; font-display: swap; src: local('Roboto'); } @font-face { font-family: '__Roboto_Fallback_1978c1'; font-display: swap; src: local('Roboto'), local('Arial'), local('sans-serif'); } /* 7. Lazy loaded images placeholder */ img[loading="lazy"] { background-color: #f0f0f0; } /* 8. Bottom nav bar space reservation (mobile) */ @media (max-width: 1200px) { .kjfPGQ { min-height: 65px; } } /* 9. Zalo/Messenger floating buttons - fixed size */ .fZjext img, .sc-9286cf17-2 img { width: 40px; height: 40px; } /* 10. Search form fixed height */ .eikgGk { min-height: 35px; } @media (max-width: 1199px) { .eikgGk { min-height: 30px; } } /* ===== COMPONENT-SPECIFIC CLS FIXES ===== */ /* 11. Product card image container (home, category pages) */ .etjVzc, .sc-651a3ef7-5 { position: relative; aspect-ratio: 1 / 1; background-color: #f5f5f5; overflow: hidden; } /* 12. Category/Brand banner containers */ .dqjMix, .sc-d723f3fa-2 { position: relative; } .dqjMix::after, .sc-d723f3fa-2::after { content: ""; display: block; padding-bottom: 50%; /* Banner aspect ratio */ } /* 13. Main slider on home page */ .KaTNK { position: relative; aspect-ratio: 16 / 9; overflow: hidden; } .KaTNK img { width: 100%; height: 100%; object-fit: cover; } /* 14. Sponsor/advertisement banners */ .chTpgw, .sc-884caad3-1 { position: relative; aspect-ratio: 1 / 1; overflow: hidden; } /* 15. Category section banner */ .hsaoUY, .sc-a4cf8d17-1 { position: relative; } .jqFYaP, .sc-a4cf8d17-2 { position: relative; aspect-ratio: 2 / 1; } /* 16. Product detail main image */ .bpsBOq, .sc-fa560020-1 { position: relative; aspect-ratio: 1 / 1; background-color: #f5f5f5; max-height: 380px; overflow: hidden; } /* 17. Product detail thumbnail gallery */ .cA-dGYK, .sc-fa560020-3 { position: relative; aspect-ratio: 1 / 1; background-color: #f5f5f5; } /* 18. Breadcrumb home icon */ .cckzvy, .sc-6b4e2d4e-2 { position: relative; width: 16px; height: 16px; } /* 19. Category navigation icons on home page */ .eqHNFr, .sc-23a69a1d-3 { width: 33px; height: 33px; } /* 20. Flash sale and product section sliders */ .slider-1:not(.slick-initialized), .sc-cff1aa76-2:not(.slick-initialized) { min-height: 280px; overflow: hidden; } @media (max-width: 768px) { .slider-1:not(.slick-initialized), .sc-cff1aa76-2:not(.slick-initialized) { min-height: 220px; } }