/* Khuyên dùng: Chuyển dòng @import này thành thẻ trong HTML */ @import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"); * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Thêm cho Firefox trên Mac */ box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; background-color: #1F1F26; overflow: hidden; } .desktop { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; align-items: center; justify-content: center; background-color: #1F1F26; } .overlap-group { position: relative; width: 100%; height: 100%; overflow: hidden; } /* BG */ .BG { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; /* Đảm bảo video không tràn ra ngoài */ } .video-BG { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform-origin: center; opacity: 0; will-change: transform, opacity; transform: scale(0.2) rotate(-15deg); animation: scaleAndRotate 0.35s ease-out forwards; } @keyframes scaleAndRotate { 0% { transform: scale(0.2) rotate(-15deg); opacity: 0; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } /* TEXT CENTER */ .text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: min(1.125rem, 2%); padding: min(23.4375rem, 5%) min(6.25rem, 2%) min(20.75rem, 4%); z-index: 3; opacity: 0; transform: translateY(30px); animation: fadeSlide 1s ease-in-out forwards, fadeOut 1s ease-in-out 15s forwards; } .text .FULL-PRODUCTION { font-family: var(--bold-font-family, sans-serif); /* Thêm fallback font đề phòng mất biến */ font-weight: var(--bold-font-weight, bold); font-size: clamp(3rem, calc(7vw + 1rem), 6rem); color: #c6c6c6; text-align: center; letter-spacing: var(--bold-letter-spacing); line-height: var(--bold-line-height); } .center-mask-wrapper { overflow: hidden; position: relative; width: 100%; height: 2rem; } @keyframes fadeSlide { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-30px); } } .frame { display: flex; align-items: center; justify-content: center; gap: 0.1875rem; } .play-icon { width: 0.5rem; height: 0.5rem; } .PLAY-THE-REEL { font-family: var(--display-md-medium-font-family, sans-serif); font-size: var(--display-md-medium-font-size, 1rem); font-weight: var(--display-md-medium-font-weight, 500); color: #f3bb00; } /* TOP ICONS */ .icon { position: absolute; top: 0.625rem; left: 0; width: 100%; padding: 0 1.375rem; display: flex; justify-content: space-between; align-items: center; z-index: 4; } .ellipse, .div { width: 0.6875rem; height: 0.6875rem; background-color: #c6c6c6; border-radius: 50%; flex-shrink: 0; } /* COORDINATES */ .ta { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0 1.3125rem; display: flex; align-items: center; justify-content: space-between; z-index: 4; pointer-events: none; } .coord-mask-wrapper { overflow: hidden; position: relative; display: inline-block; clip-path: inset(100% 0 0 0); animation: revealMask 1.5s ease-in-out forwards; } .text-wrapper { font-family: var(--display-sm-semibold-font-family, sans-serif); font-weight: var(--display-sm-semibold-font-weight, 600); font-size: var(--display-sm-semibold-font-size, 0.875rem); color: #f3bb00; text-align: center; opacity: 0; transform: translateY(30px); animation: fadeSlide 0.35s ease-in-out forwards; white-space: nowrap; } @keyframes revealMask { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } } /* Media Queries */ /* Tablet (Đã xóa việc resize video không cần thiết) */ /* Mobile */ @media (max-width: 48rem) { .ta { padding: 0 1rem; } .text .FULL-PRODUCTION { font-size: clamp(1.5rem, calc(5vw + 1rem), 4rem); /* Tăng min size lên chút cho dễ đọc */ } } /* Small mobile */ @media (max-width: 30rem) { .text .FULL-PRODUCTION { font-size: clamp(1.2rem, calc(5vw + 1rem), 4rem); } }