/* Ổn định layout khi tải trang (CLS) và làm chuyển động mượt. Nạp sau cùng trong của _Layout / _LayoutForHome / _TemplateDR. */ /* Ảnh slider giờ có width/height thật in trong HTML (ImageSizeService). Thuộc tính height của thẻ img là một "presentational hint" tương đương height: 1080px — nếu để nguyên, ảnh đặt width:100% sẽ bị kéo méo. height:auto trả lại tỉ lệ đúng, và trình duyệt vẫn dùng cặp width/height để chừa sẵn chỗ trước khi ảnh về → nội dung bên dưới không bị đẩy xuống. */ .carousel-inner .item img, .carousel-inner .item-img img { width: 100%; height: auto; } /* Ảnh lazyload chưa có src thì chiều cao = 0 rồi bung ra khi ảnh về. Với các ảnh chưa khai báo được kích thước, giữ nguyên chỗ bằng nền xám nhạt thay vì để trống. */ img.lazyload:not([width]) { background-color: #f2f4f6; } /* Chuyển động: ưu tiên transform/opacity (chạy trên compositor, không gây reflow từng khung hình). */ .owl-carousel .owl-stage { will-change: transform; backface-visibility: hidden; } .owl-carousel .owl-item img { transform: translateZ(0); /* tránh rung viền ảnh khi stage đang trượt */ } /* Tôn trọng cài đặt "giảm chuyển động" của hệ điều hành. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }