*{ margin:0; padding:0; box-sizing:border-box; } html{ /* overflow-y:scroll (instead of auto) + scrollbar-gutter:stable keeps the scrollbar track always rendered, so it never disappears/reflows when the fixed corridor overlay (#canvas, #intro-top/bottom) is active. */ overflow-y:scroll; scrollbar-gutter:stable; } html, body{ width:100%; height:100%; overflow-x:hidden; background:#ffffff; font-family:"Be Vietnam Pro",sans-serif; } h1{ font-family:'Lost Vietnam', serif; font-size:clamp(3rem, 8vw, 8rem); } a{ color:#c75739; } /* ========================= NAVBAR ========================= */ #navbar{ position:absolute; top:5px; left:0; width:100%; display:flex; justify-content:space-around; align-items:center; z-index:1000; transition:background-color .3s ease, padding .3s ease; } #navbar a{ font-family:'Lost Vietnam'; font-size:2rem; color:#C75739; text-decoration:none; } #navbar a:hover{ text-decoration:underline; } #nav-middle{ display:flex; justify-content:center; align-items:center; } #nav-logo{ width:100px; height:auto; display:block; } #nav-home{ display:none; } #navbar.scrolled{ position:fixed; top:0; background:#C75739; padding:7px 0; } #navbar.scrolled a{ color:white; } #navbar.scrolled #nav-logo{ display:none; } #navbar.scrolled #nav-home{ display:block; } /* ========================= SECTION 1: HERO ========================= */ .hero{ position:relative; height:100vh; } .hero img{ width:100%; height:100%; object-fit:cover; } .hero-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; color:white; text-align:center; text-shadow:2px 2px 4px #000000; } .hero-overlay p{ font-size:1.5rem; } .hero-overlay i{ font-size:clamp(.85rem, 1.8vw, 1.1rem); } /* ========================= SECTION 2: MAIN CONTENT (hành lang 3D) Chiếm nguyên 1 màn hình trong luồng cuộn trang, để trình duyệt biết chỗ này "tồn tại" và cuộn tới/qua được. Nội dung thật bên trong (#canvas, #intro-top/bottom, #modal, #rotate-overlay) đều position:fixed, luôn phủ kín viewport bất kể vị trí cuộn -> phải tự ẩn/hiện bằng class "corridor-active" trên (xem phần RESPONSIVE/VISIBILITY bên dưới). ========================= */ #main-content{ position:relative; height:100vh; } /* ========================= THREE.JS ========================= */ :root{ /* Chừa chỗ cho nav (trên) và scrollbar (phải) trên desktop, để canvas không vẽ đè lên hai khu vực đó. Trên tablet/mobile navbar thấp hơn nên giảm bớt. */ --nav-gap:100px; --scrollbar-gap:16px; } #canvas{ position:fixed; top:var(--nav-gap); left:0; right:var(--scrollbar-gap); bottom:0; z-index:1; transition:opacity .4s ease; } /* ========================= HIỆN/ẨN HÀNH LANG THEO SECTION ĐANG XEM body.corridor-active được JS bật/tắt bằng IntersectionObserver khi #main-content vào/ra khỏi khung nhìn. ========================= */ body:not(.corridor-active) #canvas{ opacity:0; pointer-events:none; } /* ========================= PYRAMID TEXT Hai khoảng trống hình tam giác (đỉnh hướng lên) ở giữa màn hình: một nhỏ phía trên (gần điểm hội tụ của hành lang), một lớn phía dưới. ========================= */ #intro-top{ position:fixed; left:50%; transform:translateX(-50%); display:flex; justify-content:center; pointer-events:none; /* để không chặn kéo/lăn chuột trong hành lang phía dưới chữ */ z-index:10; opacity:1; } #intro-bottom{ position:fixed; left:50%; transform:translateX(-50%); display:flex; justify-content:center; pointer-events:none; z-index:10; opacity:1; } #intro-top{ /* neo theo --nav-gap để luôn nằm dưới navbar, bất kể chiều cao màn hình */ top:calc(var(--nav-gap) + 16px); } #intro-bottom{ bottom:4vh; } .pyramid-text{ width:min(900px,90vw); margin:0 auto; display:flex; flex-direction:column; align-items:center; } .pyramid-line{ font-weight: 400; letter-spacing: 0.02em; text-align:center; /* nhân thêm --font-scale để nút đổi cỡ chữ cũng tác động lên chữ trong hành lang (được JS render vào #introTop/#introBottom) */ font-size:calc(var(--line-fs) * var(--font-scale)); line-height:var(--line-lh); white-space:nowrap; margin:0 auto; } /* Khối nhỏ, phía trên */ .pyramid-text--top{ width:min(42vw,460px); --line-fs: clamp(13px,1vw,17px); --line-lh: 1.7; } /* Khối lớn, phía dưới */ .pyramid-text--bottom{ width:min(48vw,560px); --line-fs: clamp(12px,1vw,15px); --line-lh: 1.85; } /* ========================= MODAL ========================= */ #modal{ position:fixed; inset:0; display:none; justify-content:center; align-items:center; z-index:1500; } #modal.active{ display:flex; } /* ========================= BACKDROP ========================= */ #modal-backdrop{ position:absolute; inset:0; backdrop-filter:blur(12px); background:rgba(255,255,255,.35); } /* ========================= IMAGE ========================= */ #modal-content{ position:relative; z-index:2; } #modal-image{ max-width:80vw; max-height:80vh; object-fit:contain; display:block; } /* ========================= MODAL NAV (nút back/next) ========================= */ .modal-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:52px; height:52px; border:none; border-radius:50%; background:rgba(255,255,255,.85); color:#111; font-size:26px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s ease, transform .2s ease; } .modal-nav:hover{ background:rgba(255,255,255,1); transform:translateY(-50%) scale(1.08); } #modal-prev{ left:24px; } #modal-next{ right:24px; } @media(max-width:600px){ .modal-nav{ width:42px; height:42px; font-size:20px; } #modal-prev{ left:10px; } #modal-next{ right:10px; } } /* ========================= SECTION NAV BUTTONS (mũi tên lên/xuống) Ẩn trên desktop (đã có chuột/trackpad + scrollbar); chỉ hiện trên tablet/iPad để thay thế cho việc cuộn/kéo bằng tay. ========================= */ .section-nav{ position:fixed; right:20px; bottom:30px; z-index:1200; display:none; flex-direction:column; gap:12px; } .section-nav button{ width:52px; height:52px; border:none; border-radius:50%; background:rgba(199,87,57,.9); color:#fff; font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.2); } .section-nav button:disabled{ opacity:.4; cursor:default; } @media (max-width:1024px){ .section-nav{ display:flex; } } /* ========================= CREDITS ========================= */ .credits{ min-height:auto; display:flex; justify-content:center; align-items:center; padding:80px 40px; } .message{ max-width:900px; width:100%; padding:60px; background:white; border:none; border-radius:20px; box-shadow:0 5px 20px rgba(0,0,0,.08); font-size:1.4rem; } /* ========================= ACCESSIBILITY TOOLBOX ========================= */ .toolbox{ position:fixed; top:120px; left:30px; z-index:9999; display:flex; gap:12px; } .toolbox button{ width:48px; height:48px; border:none; background:none; padding:0; cursor:pointer; } .toolbox img{ width:100%; height:100%; display:block; } /* resize chữ (chỉ áp dụng cho khối có class .detail-text, xem hero-overlay / .message trong HTML) */ :root{ --font-scale:1; } body.font-big{ --font-scale:1.25; } body.font-small{ --font-scale:.8; } /* Scale each block relative to its OWN base size (instead of flattening every block to one fixed size, which is what made "big" look smaller than the default hero/message text before). h1 is intentionally left out so the hero title doesn't shrink. */ /* .hero-overlay p is intentionally left out of --font-scale (kept at a fixed 1.5rem, declared once above) so the hero intro text doesn't shrink/grow with the accessibility toggle, same as h1. */ .message{ font-size:calc(var(--message-fs,1.4rem)); } /* ========================= RESPONSIVE - Desktop: mặc định (style ở trên) - Tablet: ≤1024px - Mobile đứng: ≤600px và orientation:portrait (bị #rotate-overlay che thay vì hiển thị chữ) - Mobile ngang: orientation:landscape và chiều cao rất thấp (điện thoại xoay ngang) ========================= */ /* ---------- TABLET (≤1024px) ---------- */ @media (max-width:1024px){ :root{ --nav-gap:80px; --scrollbar-gap:0px; } #intro-top{ top:calc(var(--nav-gap) + 12px); } #intro-bottom{ bottom:3vh; } .pyramid-text--top{ width:56vw; --line-fs: clamp(11px,1.5vw,14px); } .pyramid-text--bottom{ width:68vw; --line-fs: clamp(11px,1.6vw,13px); --line-lh: 1.8; } .pyramid-line{ white-space:normal; } .message{ padding:40px; --message-fs:1.1rem; } } /* ---------- MOBILE ĐỨNG (≤600px, portrait) ---------- */ /* Thực tế bị #rotate-overlay che kín (xem bên dưới), giữ style này làm phương án dự phòng */ @media (max-width:600px) and (orientation:portrait){ .pyramid-text--top{ width:82vw; --line-fs: 12px; } .pyramid-text--bottom{ width:92vw; --line-fs: 13px; --line-lh: 1.6; } .pyramid-line{ white-space:normal; } .message{ padding:28px; --message-fs:1rem; } .toolbox{ top:auto; bottom:20px; left:20px; } } /* ---------- MOBILE NGANG (điện thoại xoay ngang: rộng nhưng rất thấp) ---------- */ @media (orientation:landscape) and (max-height:500px){ :root{ --nav-gap:56px; } #intro-top{ top:0.5vh; } #intro-bottom{ bottom:1vh; } .pyramid-text--top{ width:46vw; --line-fs: clamp(9px,1.7vh,12px); --line-lh: 1.3; } .pyramid-text--bottom{ width:54vw; --line-fs: clamp(9px,1.7vh,12px); --line-lh: 1.35; } .pyramid-line{ white-space:normal; } } /* ========================= ROTATE OVERLAY Chặn màn hình trên điện thoại/tablet nhỏ khi đang cầm dọc, NHƯNG chỉ khi người dùng đã cuộn tới Section 2 (hành lang) — Section 1/3 vẫn xem bình thường ở chế độ dọc. ========================= */ #rotate-overlay{ position:fixed; inset:0; z-index:2000; display:none; /* mặc định ẩn, chỉ hiện trong media query bên dưới */ flex-direction:column; align-items:center; justify-content:center; gap:16px; background:#ffffff; text-align:center; padding:32px; } #rotate-icon{ font-size:42px; animation:rotate-hint 1.6s ease-in-out infinite; } #rotate-overlay p{ font-size:15px; line-height:1.6; color:#333; max-width:280px; } @keyframes rotate-hint{ 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(90deg); } } /* Chỉ chặn trên màn hình nhỏ khi đang portrait VÀ đang ở Section 2 */ @media (max-width:820px) and (orientation:portrait){ body.corridor-active #rotate-overlay{ display:flex; } #canvas, #intro-top, #intro-bottom{ display:none; } }