/* Trang mở đầu: lưới ô đỏ, đường kẻ kem vẽ lần lượt, logo hiện ra, ô chữ rớt chồng lớp, nút tròn vào trang chủ. Thiết kế gốc 1920 × 1080. */
:root { --red: #CC3731; --cream: #FDFBEF; --ink: #17140F; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--red); overflow: hidden; }
html, body, .gc {  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='440 340 400 400'%3E%3Cg stroke='%2317140F' stroke-width='11' fill='none' stroke-linecap='round' stroke-linejoin='round' transform='rotate%28-45 500 372%29'%3E%3Cpath d='M500 372L408 556L460 640H540L592 556Z'/%3E%3Cpath d='M500 380V500'/%3E%3Ccircle cx='500' cy='525' r='24'/%3E%3Crect x='440' y='652' width='120' height='50' rx='14'/%3E%3C/g%3E%3C/svg%3E") 6 3, default; }
a, button, .ld-ex, .lg-hit {  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='440 340 400 400'%3E%3Cg stroke='%2317140F' stroke-width='11' fill='none' stroke-linecap='round' stroke-linejoin='round' transform='rotate%28-45 500 372%29'%3E%3Cpath d='M500 372L408 556L460 640H540L592 556Z'/%3E%3Cpath d='M500 380V500'/%3E%3Ccircle cx='500' cy='525' r='24'/%3E%3Crect x='440' y='652' width='120' height='50' rx='14'/%3E%3C/g%3E%3Ccircle cx='500' cy='372' r='30' fill='%23E51D27'/%3E%3C/svg%3E") 6 3, pointer; }
.ld.dark, .ld.dark .gc, .ld.dark .ld-stage {  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='440 340 400 400'%3E%3Cg stroke='%23FFFFFF' stroke-width='11' fill='none' stroke-linecap='round' stroke-linejoin='round' transform='rotate%28-45 500 372%29'%3E%3Cpath d='M500 372L408 556L460 640H540L592 556Z'/%3E%3Cpath d='M500 380V500'/%3E%3Ccircle cx='500' cy='525' r='24'/%3E%3Crect x='440' y='652' width='120' height='50' rx='14'/%3E%3C/g%3E%3C/svg%3E") 6 3, default; }
.ld.dark a, .ld.dark button, .ld.dark .ld-ex, .ld.dark .lg-hit {  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='440 340 400 400'%3E%3Cg stroke='%23FFFFFF' stroke-width='11' fill='none' stroke-linecap='round' stroke-linejoin='round' transform='rotate%28-45 500 372%29'%3E%3Cpath d='M500 372L408 556L460 640H540L592 556Z'/%3E%3Cpath d='M500 380V500'/%3E%3Ccircle cx='500' cy='525' r='24'/%3E%3Crect x='440' y='652' width='120' height='50' rx='14'/%3E%3C/g%3E%3Ccircle cx='500' cy='372' r='30' fill='%23E51D27'/%3E%3C/svg%3E") 6 3, pointer; }
.ld { position: fixed; inset: 0; overflow: hidden; background: var(--red); }
.ld-stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; margin: -540px 0 0 -960px; transform: scale(var(--k, 1)) translate(var(--px, 0px), var(--py, 0px)); transform-origin: 50% 50%; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
/* đường kẻ kem */
/* đường kẻ kem mảnh, vẽ lần lượt (hai nhịp: ngang quét sang phải, dọc quét xuống) */
.ln { position: absolute; background: var(--cream); animation: ln-h 1s cubic-bezier(.65, 0, .25, 1) calc(var(--i) * .11s + .25s) both; }
.ln.v { animation-name: ln-v; }
@keyframes ln-h { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ln-v { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.ln-x { position: absolute; background: var(--cream); opacity: 0; animation: x-in .3s ease 2.6s both; } @keyframes x-in { to { opacity: 1; } }
/* logo: mỗi ô chữ là một mảnh cắt chính xác từ bản PDF */
.lg { position: absolute; background-size: 100% 100%; opacity: 0; animation: lg-in .9s cubic-bezier(.2, 1.4, .4, 1) calc(2.9s + var(--i) * .16s) both; pointer-events: none; }
@keyframes lg-in { from { opacity: 0; transform: translateY(-70px) scale(1.06); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
/* ô chữ: bình thường trống, rê chuột vào thì đổi màu và chữ rớt xuống các cạnh, các góc */
.gc { position: absolute; overflow: hidden; background: transparent; transition: background-color .3s; }
.gc.on { background: var(--hb, var(--cream)); }
.gl { position: absolute; left: 0; top: 0; line-height: 1; white-space: nowrap; color: var(--hc, var(--ink)); opacity: 0; will-change: transform; pointer-events: none; user-select: none; }
/* nút vào: nhỏ, tinh giản */
/* chuyển trang: vòng kem loe ra từ nút */
.ld-wipe { position: fixed; inset: 0; background: var(--cream); clip-path: circle(0 at 50% 50%); transition: clip-path .95s cubic-bezier(.6, 0, .2, 1); pointer-events: none; z-index: 5; }
.ld-wipe.on { clip-path: circle(150% at var(--wx, 50%) var(--wy, 50%)); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .ln, .lg, .ld-go, .ld-lb { animation: none; opacity: 1; transform: none; } .ld-wipe { transition: none; } }

/* rê chuột vào logo: cả trang chuyển đen và mờ xuống, chỉ nổi nút đỏ Khám phá ở giữa logo */
.lg { z-index: 5; }
.ld-dark { position: absolute; left: -1500px; top: -1500px; width: 4920px; height: 4080px; background: #17140F; opacity: 0; pointer-events: none; transition: opacity .55s ease; z-index: 6; } .ld.dark .ld-dark { opacity: .92; }
.ln, .ln-x { z-index: 4; }
.lg-hit { position: absolute; z-index: 7; cursor: inherit; }
.ld-ex { position: absolute; z-index: 8; width: 230px; height: 68px; border-radius: 999px !important; background: #CC3731; color: var(--cream); border: 1px solid var(--cream); display: flex; align-items: center; justify-content: center; gap: 14px; text-decoration: none; font: 700 22px 'Roboto Flex', Arial, sans-serif; letter-spacing: .02em; opacity: 0; transform: translateY(16px) scale(.92); pointer-events: none; transition: opacity .35s ease .1s, transform .45s cubic-bezier(.3, 1.5, .4, 1) .1s, background-color .25s, color .25s; }
.ld.dark .ld-ex { opacity: 1; transform: none; pointer-events: auto; }
.ld-ex svg { width: 28px; height: 28px; } .ld-ex .ar { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s cubic-bezier(.3, 1.6, .4, 1); }
.ld-ex:hover, .ld-ex:focus-visible { background: var(--cream); color: #CC3731; border-color: var(--cream); outline: 0; } .ld-ex:hover .ar, .ld-ex:focus-visible .ar { transform: translateX(6px); }
.ld-ex:focus-visible { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .ln-x { animation: none; opacity: 1; } .ld-dark, .ld-ex { transition: none; } }