/* ============================================= Mobile Bottom Navigation Bar ============================================= */ /* ===== Global: Prevent horizontal scrolling on ALL pages ===== This file is loaded on every page, so these rules guarantee the page always stays full-width and cannot be swiped left/right on mobile. */ html, body { width: 100%; max-width: 100%; overflow-x: hidden; overflow-x: clip; overscroll-behavior-x: none; } /* Hide on desktop */ .mobile-bottom-nav { display: none; } /* The search panel
is appended straight to by mobile-bottom-nav.js on EVERY page load, regardless of viewport width (the button that opens it is only reachable on mobile, but the panel markup itself still exists in the DOM everywhere) — hide it by default so it never renders as stray block content on desktop; the mobile media query below switches it back to a real display value before toggling visibility via .is-open. */ .mobile-search-panel { display: none; } /* Show only on mobile */ @media (max-width: 767px) { /* Hide the top header nav links on mobile to prevent wrapping */ .custom-header__nav, .crystal-header__nav, .anniv-header__nav { display: none !important; } /* Make top header compact on mobile */ .custom-header { padding: 8px 15px !important; flex-direction: row !important; /* flex-start (thay vì space-between mặc định) + gap để logo và link "Liên hệ" (chèn kế logo — xem custom-header.js) nằm sát cạnh nhau ở đầu thanh, không bị đẩy dạt ra 2 đầu đối diện. */ justify-content: flex-start !important; gap: 12px !important; } .crystal-header { height: 50px !important; padding: 0 15px !important; } .anniv-header { height: 50px !important; padding: 0 15px !important; } /* Add bottom padding to body so content is not hidden behind nav. NOTE: padding-bottom is set to 0 so no white gap appears below the footer. The footer itself gets extra bottom padding (see below) so its dark background extends down behind the fixed bottom nav. */ body { padding-bottom: 0; padding-top: 50px; } /* Extend footer backgrounds down behind the fixed bottom nav so there is no white gap below the footer on mobile. */ .vt-footer { padding-bottom: calc(1rem + 64px); } .sk-footer { padding-bottom: calc(20px + 64px); } .crystal-footer { padding-bottom: calc(20px + 64px); } .anniv-footer { padding-bottom: calc(20px + 64px); } /* Prevent hero section from overlapping the fixed header on mobile */ .s-mv { margin-top: 0 !important; padding-top: 0; min-height: auto; } .s-mv__img { top: 0 !important; position: static !important; width: 100% !important; margin-inline: auto; } .s-mv__logo { margin-top: 2rem; } .cvArea__link--top { top: calc(2rem + 50px) !important; } /* ===== Bottom Navigation Bar ===== */ /* NOTE: style.css has `body > * { position: relative; z-index: 1; }` which has HIGHER specificity than `.mobile-bottom-nav` and would override `position: fixed`. We must use `!important` on position so the nav stays fixed and always on top of page content. */ .mobile-bottom-nav { display: block !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 2147483647 !important; /* Create an isolated stacking context so no page content (e.g. .s-about with overflow/transform children, .s-echo, .s-voice) can ever paint on top of the nav. */ isolation: isolate; /* Promote to its own compositor layer above page content */ transform: translate3d(0, 0, 0) !important; -webkit-transform: translate3d(0, 0, 0) !important; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: #ffffff; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12); border-top: 1px solid #e5e5e5; font-family: "Noto Serif JP", serif; pointer-events: auto !important; } /* Override body > * { position:relative; z-index:1 } for the nav specifically */ body > .mobile-bottom-nav { position: fixed !important; z-index: 2147483647 !important; } /* Prevent .cvArea from blocking the bottom nav on mobile */ /* .cvArea is a fixed full-screen overlay (z-index 99) on the homepage. Its children () keep pointer-events:auto by default because pointer-events is NOT inherited, so taps can be swallowed by it. */ .cvArea, .cvArea * { pointer-events: none !important; } .cvArea__link--bottom { bottom: calc(2rem + 64px) !important; } /* Ensure all nav interactive elements are always clickable */ .mobile-bottom-nav__list, .mobile-bottom-nav__item, .mobile-bottom-nav__link, .mobile-bottom-nav__dropdown, .mobile-bottom-nav__dropdown-item { pointer-events: auto !important; } /* Prevent .pop_banner from blocking the bottom nav on mobile */ .pop_banner { bottom: calc(10px + 64px) !important; z-index: 2147483646 !important; pointer-events: none !important; } /* Prevent .s-about (images + absolutely-positioned texts) from swallowing taps on the bottom nav when scrolled into view. Keep z-index:1 (same as other body > * children) so the section stays above the fixed-noise overlays (z-index:0 on mobile) while still remaining far below the fixed bottom nav (z-index:2147483647). */ .s-about { z-index: 1 !important; pointer-events: none !important; } .s-about * { pointer-events: none !important; } /* Re-enable pointer events for the "Tìm hiểu thêm về chúng tôi" link so it remains clickable on mobile. */ .s-about__cta, .s-about__cta * { pointer-events: auto !important; } /* Prevent .s-mv (hero section with absolutely-positioned images and links) from swallowing taps on the bottom nav when scrolled back to the top of the page. */ .s-mv, .s-mv * { pointer-events: none !important; } .mobile-bottom-nav__list { display: flex; justify-content: space-around; align-items: center; list-style: none; margin: 0; padding: 6px 0; height: 64px; box-sizing: border-box; /* offsetParent cho .mobile-bottom-nav__thread bên dưới — để left/top đo được của thread tính đúng theo toạ độ trong