/* ══════════════════════════════════════════════════════════════════ 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, ẨN các footer cố định ở mobile, 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(62px + 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 #dbe3ea; box-shadow: 0 -6px 20px rgba(0, 64, 101, .10); /* Chiều cao GÁN CỨNG: thanh luôn đúng 62px 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 62px chỉ được 71.3px, vừa khít 62 + 9 -> dư 0.3px, lệch nửa pixel là badge lòi ra. 28px cho dư 19px, và dư đó KHÔNG đổi khi chiều cao thanh đổi (100% co giãn theo hộp). */ .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%; /* Mục CHƯA chọn: #222222. Mục ĐANG chọn đổi sang màu thương hiệu #2f5368 — xem .vne-bottom-nav__link.is-active bên dưới. Độ đậm thì mọi mục như nhau (500). Icon SVG vẽ bằng stroke="currentColor" và ảnh khiên vẽ bằng background-color: currentColor, nên cả icon lẫn chữ đều tự ăn màu của mục. */ color: #222222; text-decoration: none !important; font-family: inherit; -webkit-tap-highlight-color: transparent; transition: color .18s ease; } /* VẠCH CHỈ DẤU ở mép trên — thay cho nền nhạt sau icon (PO yêu cầu bỏ nền). Vạch dày, bám sát viền trên, bung ra khi mục được chọn: dấu hiệu mạnh và dứt khoát, không làm bẩn vùng icon. */ .vne-bottom-nav__link::before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 3px; /* Không bo góc (PO chốt): vạch vuông góc, ăn khớp với viền trên của thanh. #2f5368 = màu thương hiệu chính của dự án (--Brand__Primary__Main trong css/common/obra-design-tokens.css, cũng là --vne-color-primary-main). Ghi thẳng mã màu chứ không dùng biến: file token đó KHÔNG được nạp ở layout nào chứa bottom nav. */ background-color: #2f5368; transform: translateX(-50%); transition: width .22s ease; pointer-events: none; } .vne-bottom-nav__link.is-active::before { width: 30px; } /* Hover/focus KHÔNG đổi màu — giữ mọi mục đồng nhất như trên. */ .vne-bottom-nav__link:hover, .vne-bottom-nav__link:focus { 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: 28px; height: 28px; transition: transform .18s ease; } .vne-bottom-nav__icon > svg { width: 24px; height: 24px; display: block; } /* Icon Khám phá là ẢNH khiên VNE của dự án. Dùng làm MASK (không phải thẻ ) để nó ăn màu currentColor y như các icon SVG — nhờ vậy vẫn đổi màu giữa chọn/không chọn thay vì cứng một màu. Ảnh 290x331 RGBA có kênh alpha nên dùng trực tiếp làm mask được; contain giữ tỉ lệ. */ .vne-bottom-nav__img { display: block; width: 24px; height: 24px; /* Mặc định KHÔNG tô: trình duyệt nào không hiểu mask thì sẽ bỏ qua cả khối @supports dưới, và cái span này chỉ là ô trống — thay vì hiện thành một ô vuông navy đặc. */ background-color: transparent; -webkit-mask: url('../../images/vne/trust-mark/vne-shield-light.png') no-repeat center; mask: url('../../images/vne/trust-mark/vne-shield-light.png') no-repeat center; -webkit-mask-size: contain; mask-size: contain; } @supports (mask-size: contain) or (-webkit-mask-size: contain) { .vne-bottom-nav__img { background-color: currentColor; } } /* Phản hồi khi chạm: icon lún nhẹ, cho cảm giác bấm thật */ .vne-bottom-nav__link:active .vne-bottom-nav__icon { transform: scale(.9); } .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; letter-spacing: .1px; text-align: center; white-space: nowrap; } /* ── Tab đang được chọn ────────────────────────────────────────── */ /* Mục ĐANG CHỌN: đổi màu sang #2f5368 (thương hiệu) cho cả icon và chữ — currentColor lo việc đó. KHÔNG đổi độ đậm (mọi mục đều 500), KHÔNG phóng icon, KHÔNG nền nhạt sau icon. Dấu hiệu còn lại là vạch trên — xem .vne-bottom-nav__link.is-active::before. */ .vne-bottom-nav__link.is-active { color: #2f5368; } /* ── 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: #1d4ed8; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .2px; box-shadow: 0 2px 6px rgba(29, 78, 216, .35); 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, và thứ đó là thanh nav. 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 ẨN HẲN chúng: hai dải chồng nhau ở đáy vừa rối vừa trùng chức năng điều hướng với thanh nav. Các link pháp lý trong footer vẫn tới được từ menu "Trung tâm trợ giúp" ở header. Vẫn giữ padding-bottom cho body: chỗ trống đó dành cho thanh nav. */ 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 { display: none !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; } }