/* ============================================================ Smooth collapse/expand cho các khối bị ẩn khi scroll bảng (.hide-scroll-title / -filter-bar / -collapse-expand / -label) Trạng thái do JS điều khiển qua class trên : .hs-animating -> đang chạy animation (bật transition cho scrollBody) .hs-collapsed -> đang thu gọn (max-height 0 + fade) .hs-collapsed-done -> animation thu gọn đã xong -> display:none để không còn chiếm gap/khoảng trắng của flex/grid Thời lượng phải khớp HS_DURATION trong datatable-global-fix.js ============================================================ */ :root { --hs-duration: 300ms; --hs-ease: cubic-bezier(0.22, 0.61, 0.36, 1); } .hide-scroll-title, .hide-scroll-filter-bar, .hide-scroll-collapse-expand, .hide-scroll-label { /* MỌI thuộc tính ảnh hưởng chiều cao phải dùng CHUNG --hs-duration và --hs-ease với height của .dataTables_scrollBody. Chỉ cần một cái lệch duration/easing là tổng chiều cao header không còn khớp delta đã cộng vào bảng -> mép dưới (tfoot) trôi rồi bật lại. KHÔNG dùng transform ở đây: nó dịch phần tử NGOÀI dòng chảy layout nên bảng không bù lại được. opacity thì an toàn (không chiếm chỗ). */ transition: max-height var(--hs-duration) var(--hs-ease), opacity var(--hs-duration) var(--hs-ease), margin-top var(--hs-duration) var(--hs-ease), margin-bottom var(--hs-duration) var(--hs-ease), padding-top var(--hs-duration) var(--hs-ease), padding-bottom var(--hs-duration) var(--hs-ease); /* Tránh repaint tốn kém trên mobile trong lúc animate */ backface-visibility: hidden; } body.hs-animating .hide-scroll-title, body.hs-animating .hide-scroll-filter-bar, body.hs-animating .hide-scroll-collapse-expand, body.hs-animating .hide-scroll-label { will-change: max-height, opacity; } body.hs-collapsed .hide-scroll-title, body.hs-collapsed .hide-scroll-filter-bar, body.hs-collapsed .hide-scroll-collapse-expand, body.hs-collapsed .hide-scroll-label { max-height: 0 !important; opacity: 0; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border-top-width: 0 !important; border-bottom-width: 0 !important; overflow: hidden !important; pointer-events: none; } body.hs-collapsed-done .hide-scroll-title, body.hs-collapsed-done .hide-scroll-filter-bar, body.hs-collapsed-done .hide-scroll-collapse-expand, body.hs-collapsed-done .hide-scroll-label { display: none !important; } /* Chiều cao vùng cuộn của DataTable. Height được set bằng ĐÚNG delta chiều cao header (xem hsApplyDeltaHeight): mép TRÊN dịch lên bao nhiêu thì bảng cao thêm đúng bấy nhiêu. Bắt buộc dùng CHUNG --hs-duration và --hs-ease với khối header, và không có delay: hai đầu chạy cùng pha nên mép DƯỚI (tfoot / pagination) đứng yên tuyệt đối. Lệch duration hoặc easing là tfoot trôi rồi bật lại. */ body.hs-animating .dataTables_scrollBody { transition: height var(--hs-duration) var(--hs-ease), max-height var(--hs-duration) var(--hs-ease); will-change: height; } /* transfer.php mobile: .transfer-filters-parent .hide-scroll-title dùng display:contents (nó chỉ là wrapper, con của nó mới là ô filter thật). display:contents không sinh box nên max-height/opacity vô nghĩa, và trước đây .hide() (inline) thua !important nên khối này VỐN KHÔNG bị ẩn khi scroll. Giữ nguyên hành vi cũ — không để rule collapse mới ẩn nhầm. */ @media (max-width: 992px) { body.hs-collapsed .transfer-filters-parent .hide-scroll-title, body.hs-collapsed-done .transfer-filters-parent .hide-scroll-title { display: contents !important; max-height: none !important; opacity: 1; transform: none; pointer-events: auto; } } @media (prefers-reduced-motion: reduce) { .hide-scroll-title, .hide-scroll-filter-bar, .hide-scroll-collapse-expand, .hide-scroll-label, body.hs-animating .dataTables_scrollBody { transition: none !important; } }