/* ══════════════════════════════════════════════════════════════════ BOTTOM NAVIGATION (MOBILE) — Views/Shared/Components/BottomNav ------------------------------------------------------------------ - CHỈ hiện < 768px. Tablet/desktop đã có header + menu nên ẩn hẳn. - Cố định đáy màn hình; vuốt LÊN thì tạm ẩn, vuốt XUỐNG hiện lại (class .is-hidden do wwwroot/js/common/bottom-nav.js gắn/bỏ). - Layout nào nhúng thanh này thì thêm class "has-bottom-nav" vào . Class đó lo 3 việc: chừa chỗ cuối trang, nhả các footer cố định ra khỏi đáy màn hình, và trỏ --ms-footer-h sang chiều cao thanh nav (xem khối "Nhường đáy màn hình" bên dưới). - CSS tự chứa (màu hardcode, không dùng token của theme) vì thanh này dùng chung cho mọi layout, mỗi layout nạp một bộ CSS khác nhau. ══════════════════════════════════════════════════════════════════ */ :root { /* CHIỀU CAO NHÌN THẤY của thanh = phần thật sự CHE nội dung tài liệu. Chỉ 2 chỗ dùng con số này: body padding-bottom và --ms-footer-h — cả hai đều đo theo vùng cuộn (documentElement.clientHeight), tức ĐÃ TRỪ thanh cuộn ngang. TUYỆT ĐỐI KHÔNG cộng --vne-bottom-nav-inset vào đây: thanh cuộn ngang nằm NGOÀI vùng cuộn nên nó không che nội dung. Cộng vào là body chừa dư đúng ngần ấy -> lộ dải trống ở đáy trang. Giá trị TĨNH, JS không bao giờ ghi: chiều cao thanh đã chốt cứng ở .vne-bottom-nav. */ --vne-bottom-nav-h: calc(60px + env(safe-area-inset-bottom, 0px)); /* Chiều cao THANH CUỘN NGANG của trang (bottom-nav.js đo và ghi vào; 0px nếu trang không tràn). Trang nào tràn ngang thì thanh cuộn ngang chiếm dải đáy khung nhìn, mà 'bottom: 0' lại tính theo window.innerHeight — con số CÓ tính dải đó — nên phần đáy thanh nav bị nằm sau thanh cuộn. Cách xử lý: KHÔNG nhấc thanh lên (nhấc lên là hở một dải trống dưới thanh), mà NỚI THÊM đúng ngần ấy vào chiều cao + padding-bottom: nền thanh phủ liền hết dải đó, còn icon và chữ bị padding đẩy lên trên thanh cuộn nên vẫn thấy đủ. */ --vne-bottom-nav-inset: 0px; } .vne-bottom-nav { display: none; } @media (max-width: 767.98px) { .vne-bottom-nav { display: block; position: fixed; left: 0; right: 0; bottom: 0; /* Dưới footer modal (#modal-footer, z-index 999999) nhưng trên nội dung trang */ z-index: 1030; background-color: #fff; border-top: 1px solid #e5e7eb; box-shadow: 0 -2px 10px rgba(15, 23, 42, .08); /* Chiều cao GÁN CỨNG: thanh luôn đúng 60px bất kể font của từng layout cao thấp khác nhau (+ safe-area iPhone). An toàn vì dòng nhãn đã bỏ overflow và bị cấm co, nên chốt chiều cao không thể cắt chữ như bản đầu. Cộng thêm inset để NỀN thanh phủ liền xuống hết dải thanh cuộn ngang — chỉ hộp thanh to ra, còn khoảng chừa của tài liệu vẫn là --vne-bottom-nav-h. */ box-sizing: border-box; height: calc(var(--vne-bottom-nav-h) + var(--vne-bottom-nav-inset)); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--vne-bottom-nav-inset)); transform: translateY(0); transition: transform .25s ease; } /* Tạm ẩn khi người dùng vuốt lên xem thêm nội dung. 100% + 28px, KHÔNG phải 115%: nhãn "Miễn phí" nhô lên 9px TRÊN viền thanh, mà 115% của thanh cao 60px đúng bằng 69px = 60 + 9 -> dư 0px, lệch nửa pixel là badge lòi ra. 28px cho dư 19px. */ .vne-bottom-nav.is-hidden { transform: translateY(calc(100% + 28px)); } .vne-bottom-nav__list { display: flex; height: 100%; align-items: stretch; justify-content: space-around; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* display:flex (thay vì list-item) để hộp inline lạc trong

— do khoảng trắng Razor sinh ra — không cộng thêm chiều cao ngoài dự tính vào thanh nav. */ .vne-bottom-nav__item { display: flex; flex: 1 1 0; min-width: 0; margin: 0 !important; padding: 0 !important; list-style: none !important; } .vne-bottom-nav__link { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px; /* height: 100% để ô ăn theo CONTENT BOX của thanh — tức phần đã trừ padding-bottom (dải thanh cuộn ngang) — nhờ vậy icon và chữ luôn nằm TRÊN dải đó, không cách nào bị cúp. LƯU Ý: dòng nhãn cố ý KHÔNG có overflow/text-overflow — đó là cơ chế duy nhất có thể làm chữ đã dàn đúng bị cắt mất. Nhãn dài nhất là "Hồ sơ tín nhiệm" (~81px), chỉ có ở trạng thái 3 và 4 mục (ô hẹp nhất ~90px); trạng thái 5 mục đổi nhãn thành "TrustProfile" (~66px) nên vừa ô 72-75px. */ flex: 1 1 auto; height: 100%; color: #4b5563; text-decoration: none !important; font-family: inherit; -webkit-tap-highlight-color: transparent; transition: color .15s ease; } .vne-bottom-nav__link:hover, .vne-bottom-nav__link:focus { color: #004065; text-decoration: none !important; } .vne-bottom-nav__icon { display: flex; /* flex-shrink: 0 — tuyệt đối không cho flexbox bóp icon/nhãn theo chiều dọc */ flex: 0 0 auto; align-items: center; justify-content: center; width: 34px; height: 26px; border-radius: 999px; transition: background-color .15s ease; } .vne-bottom-nav__icon > svg { width: 22px; height: 22px; display: block; } .vne-bottom-nav__label { flex: 0 0 auto; /* Chốt lại 3 thuộc tính DI TRUYỀN có thể làm chữ không được vẽ mà vẫn chiếm chỗ (nên đo số liệu vẫn thấy "bình thường"): trang cha đặt -webkit-text-fill-color trong suốt, opacity 0, hay visibility hidden thì thanh nav không bị ảnh hưởng nữa. */ -webkit-text-fill-color: currentColor; opacity: 1; visibility: visible; font-size: 11px; /* 1.35 (khong phai 1.2): tiếng Việt có dấu chồng (ồ, ệ, ấ) ăn cao hơn dòng chữ thường */ line-height: 1.35; font-weight: 500; text-align: center; white-space: nowrap; } /* ── Tab đang được chọn ────────────────────────────────────────── */ .vne-bottom-nav__link.is-active { color: #004065; } .vne-bottom-nav__link.is-active .vne-bottom-nav__icon { background-color: #e6eef3; } .vne-bottom-nav__link.is-active .vne-bottom-nav__label { font-weight: 700; } /* ── Nhãn phụ "Miễn phí" ───────────────────────────────────────── */ .vne-bottom-nav__badge { position: absolute; /* Nhãn nhô LÊN quá viền trên của thanh (đúng như mockup) thay vì nằm gọn bên trong. Nằm bên trong thì phải nới padding-top của riêng ô có nhãn, mà align-items:stretch kéo theo cả 5 ô cao lên — thanh của khách sẽ cao hơn thanh của người đã đăng nhập. */ top: -9px; left: 50%; transform: translateX(-30%); padding: 1px 6px; border-radius: 999px; background-color: #2563eb; color: #fff; font-size: 9px; font-weight: 700; line-height: 1.4; white-space: nowrap; pointer-events: none; } /* ══ Nhường đáy màn hình cho thanh nav ══════════════════════════ Trên mobile chỉ được có MỘT thứ dán đáy khung nhìn. Toàn bộ footer dùng chung của dự án đều position:fixed bottom-0 (_Footer, _FooterDashboard, _FooterDoanhNghiep — class "position-fixed bottom-0"; _FooterTailwind — #tp-footer-tw), nên ở mobile ta nhả chúng về dòng chảy bình thường cuối trang. Nội dung footer còn nguyên (kể cả nút mở modal footer), chỉ cần cuộn tới. */ body.has-bottom-nav { /* KHÔNG cộng env() lần hai — nó đã nằm trong --vne-bottom-nav-h. */ padding-bottom: var(--vne-bottom-nav-h); } body.has-bottom-nav footer.position-fixed.bottom-0, body.has-bottom-nav #tp-footer-tw { position: static !important; bottom: auto !important; z-index: 1 !important; } /* Các thanh dính đáy của trang (VD .ms-summary ở màn chứng chỉ) tự nhấc lên bằng --ms-footer-h — vốn đo theo chiều cao footer cố định. Ở mobile footer đã hết cố định, thứ che đáy khung nhìn giờ là thanh nav, nên trỏ biến sang chiều cao thanh nav để chúng không bị nav đè. */ body.has-bottom-nav { --ms-footer-h: var(--vne-bottom-nav-h); } } /* Máy nhỏ (<=360px): rút cỡ chữ để 5 mục vẫn vừa 1 hàng */ @media (max-width: 360px) { .vne-bottom-nav__label { font-size: 10px; } .vne-bottom-nav__link { padding-left: 0; padding-right: 0; } }