/* Ẩn thanh menu cũ trên mobile để nhường chỗ cho Bottom Nav */ @media (max-width: 600px) { .nav-links, .menu-toggle { display: none !important; } .navbar { flex-direction: row !important; /* Xếp ngang trên màn hình vừa */ justify-content: space-between !important; align-items: center !important; padding: 15px 25px !important; } .auth-nav { margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; flex-direction: row !important; max-height: 100px !important; opacity: 1 !important; align-items: center !important; justify-content: flex-end !important; width: auto !important; gap: 15px !important; } } /* Khi màn hình quá nhỏ (điện thoại dọc), tự động rớt xuống 2 hàng và căn giữa */ @media (max-width: 550px) { .navbar { flex-direction: column !important; justify-content: center !important; gap: 15px; } .auth-nav { justify-content: center !important; width: 100% !important; } /* Làm nhỏ nút Nâng cấp và Đăng nhập trên mobile theo yêu cầu */ .btn-upgrade { display: flex !important; justify-content: center; align-items: center; border-radius: 20px !important; padding: 6px 14px !important; /* Làm nhỏ padding */ font-size: 0.85rem !important; /* Chữ nhỏ lại */ width: auto; height: auto; } .btn-upgrade span { display: inline; margin-left: 5px; } .btn-login { padding: 6px 14px !important; font-size: 0.85rem !important; } } /* ========================================== iOS 26 CLEAR GLASS FLOATING NAV (DRAGGABLE) ========================================== */ .ios26-nav-wrapper { display: none; /* Mặc định ẩn trên Desktop */ } @media (max-width: 600px) { .ios26-nav-wrapper { display: block; /* Hiện trên Mobile */ position: fixed; /* Tăng độ cao so với đáy theo yêu cầu (từ 15px lên 25px) */ bottom: calc(25px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: 92%; max-width: 450px; z-index: 9999; } .ios26-nav { display: flex; justify-content: space-between; align-items: center; /* Chỉnh lại padding đồng đều cả 4 cạnh để khoảng cách từ Cục kính tới viền trái/phải bằng đúng khoảng cách tới viền trên/dưới */ padding: clamp(6px, 1.5vw, 8px); border-radius: 100px; /* Bo cong tuyệt đối */ position: relative; touch-action: none; /* QUAN TRỌNG: Ngăn cuộn trang để có thể vuốt cục kính */ -webkit-user-drag: none; /* Ngăn trình duyệt kéo thẻ A */ user-select: none; /* Đổ bóng toàn bộ thanh nav (Đặt ở thẻ cha để không bị mất khi thẻ con dùng mask cắt lỗ) */ box-shadow: 0 0 16px rgba(0, 0, 0, 0.2), 0 10px 30px rgba(0, 0, 0, 0.25); /* Trạng thái bị ấn xuống (Scale nhún nhẹ toàn bộ Nav) */ transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s; } .ios26-nav-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 100px; background: rgba(255, 255, 255, 0.85); /* Trắng đục hơn giống ảnh của bạn */ backdrop-filter: blur(35px) saturate(200%); -webkit-backdrop-filter: blur(35px) saturate(200%); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.05) 100%); z-index: -1; box-sizing: border-box; /* Chuyển viền và bóng từ thẻ cha xuống đây để bị cắt chung với mask */ border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1); } .ios26-nav.nav-pressed { transform: scale(0.96); /* Nhún lại 4% */ } .active-indicator { position: absolute; top: 50%; left: 0; transform: translate(0, -50%); border-radius: 100px; opacity: 0; /* Ẩn mặc định để chống giật (FOUC) khi JS chưa load xong */ /* TRẠNG THÁI BÌNH THƯỜNG (Ảnh 2 - App Store): Pill nổi nhẹ, dễ nhìn */ background: transparent; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 0 10px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.5); z-index: 1; transition: transform 0.4s cubic-bezier(0.25, 1, 0.3, 1.2), width 0.4s, height 0.4s, background 0.3s, border 0.3s, box-shadow 0.3s, opacity 0.3s; } /* TRẠNG THÁI KÉO (Ảnh 1 - Kính lúp iOS Loupe): Phóng to, trong suốt, viền trắng, bóng đổ mạnh */ .active-indicator.loupe-mode { background: transparent; /* Kính hoàn toàn trong suốt để nhìn xuyên thấu xuống tận cùng */ backdrop-filter: none; /* Bỏ làm mờ để kính trong vắt */ -webkit-backdrop-filter: none; border: 1.5px solid rgba(255, 255, 255, 0.95); /* Viền trắng liền mạch, mượt mà */ /* Bóng đổ mạnh xuống dưới để tách hẳn ra khỏi thanh nav */ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), inset 0 4px 8px rgba(255, 255, 255, 0.6), inset 0 -2px 4px rgba(255, 255, 255, 0.3); } .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; -webkit-user-drag: none; /* Ngăn trình duyệt kéo thẻ A */ color: #1c1c1e; /* Màu xám đen chuẩn Apple (tương đương ảnh) */ /* Chữ xám nhạt cho nút chưa chọn */ font-size: clamp(0.35rem, 2vw, 0.45rem); /* CHỮ CỰC NHỎ (MICRO TYPOGRAPHY) */ font-weight: 700; width: 60px; height: clamp(48px, 14vw, 62px); /* Tăng chiều cao lên một xíu theo yêu cầu */ border-radius: 25px; transition: all 0.3s ease; position: relative; z-index: 2; /* Nằm trên indicator để click được */ flex: 1; min-width: 0; } .nav-item i { font-size: clamp(1rem, 4vw, 1.25rem); margin-bottom: 4px; transition: transform 0.3s ease; } /* KHI NAV-ITEM ACTIVE THÌ ĐỔI MÀU TEXT/ICON DO CỤC INDICATOR CHẠY TỚI ĐÂY RỒI */ .nav-item.active { /* Icon và chữ lấy theo màu chủ đạo của trang */ background: transparent; /* KHÔNG CÓ BACKGROUND VÌ ĐÃ CÓ INDICATOR TRƯỢT TỚI */ border: none; box-shadow: none; } /* CHỈ PHÓNG TO KHI NAV ĐÃ ĐƯỢC JS XỬ LÝ (CHỐNG CHỚP LÚC MỚI LOAD) */ .ios26-nav.nav-ready .nav-item.active i { transform: translateY(-2px) scale(1.15); } }