/* ============================================================================ EXA Website — Hero (Home) : ghim điểm giao của video vào giao điểm 2 divider Dán vào: Page settings (Home) → Custom code → Inside tag, bọc trong ---------------------------------------------------------------------------- Nguyên lý: - Điểm giao (vanishing point) của video nằm cố định tại 49.609% ngang / 59.722% dọc so với KHUNG 16:9 của video (đo trực tiếp từ file mp4 1280x720 → toạ độ 635 / 430 px). - Thay vì dùng object-fit: cover + transform "chỉnh tay" (cách hiện tại), ta đặt khung video 16:9 rồi dời nó bằng translate(-49.609%, -59.722%) kể từ điểm giao 2 divider. Nhờ vậy điểm giao LUÔN trùng, không phụ thuộc chiều rộng / chiều cao viewport hay tỉ lệ video. - --video-w chỉ quyết định video to hay nhỏ (không ảnh hưởng độ khớp); công thức max() bên dưới đảm bảo video luôn phủ kín section. ========================================================================== */ .section_header30 { /* Toạ độ điểm giao BÊN TRONG video (đo từ file video, đừng đổi) */ --vid-fx: 49.609%; --vid-fy: 59.722%; /* Toạ độ giao điểm 2 divider — phải khớp với .grid-dot.is-center và .home-hero-horizontal-line ở từng breakpoint */ --cross-x: 50%; /* divider dọc = tâm container */ --cross-y: 59.4595svh; /* = hàng 2.2fr / (2.2fr + 1px + 1.5fr) */ /* Bề rộng hiển thị của video (chỉ ảnh hưởng độ lớn, không ảnh hưởng canh) */ --video-w: max(calc(var(--cross-x) * 2.12), calc((100% - var(--cross-x)) * 2.09), calc(var(--cross-y) * 3.13), calc((100svh - var(--cross-y)) * 4.64)); } @media screen and (max-width: 991px) { .section_header30 { --cross-x: calc(5% + 40.1rem); /* = padding-global (5%) + .div-block left */ --cross-y: 38.85rem; /* = .home-hero-horizontal-line top */ } } @media screen and (max-width: 767px) { .section_header30 { --cross-x: calc(5% + 30rem); } } @media screen and (max-width: 479px) { .section_header30 { --cross-x: calc(5% + 19rem); } } /* ---- Khung video ---- */ .section_header30 .header30_background-image { position: absolute; inset: auto; left: var(--cross-x); top: var(--cross-y); width: var(--video-w); height: auto; aspect-ratio: 16 / 9; transform: translate(calc(-1 * var(--vid-fx)), calc(-1 * var(--vid-fy))); transform-origin: 0 0; overflow: visible; } /* ---- Ghi đè CSS mặc định của Webflow background-video ---- */ .section_header30 .header30_background-image>video { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; object-fit: fill; /* khung đã đúng 16:9 nên không bị méo */ }