/* * Mobile polish — phone-only corrections layered on top of the theme. * * Everything in this file lives inside a max-width media query, so the desktop * layout is untouched. Loaded last in header.php so it wins on load order * without needing !important for anything but the theme's own !important rules. */ /* ========================================================================== 1. Header: let the two-row mobile topbar size itself -------------------------------------------------------------------------- .topbar-mobile-inner is a grid whose search field spans a second row, but editcss.css pinned the header to a hard 55px. The search row therefore painted *outside* the header box and covered whatever sat directly below it — on the homepage that is the price marquee ("Giảm 20% khi mua tại website"), which was 100% hidden behind the search pill on every phone. ========================================================================== */ @media (max-width: 991px) { .header-inner, .topbar-mobile, .topbar-mobile-inner { height: auto !important; } /* * .noam-search already carries margin-top: 8px, so the grid needs no row * gap of its own. Trimmed padding keeps the two-row header at ~109px — * the same screen real estate the old one-row header was already painting * over, so revealing the marquee costs nothing above the fold. */ .topbar-mobile { padding: 6px 0 !important; } .topbar-mobile-inner { row-gap: 0; padding-top: 2px; padding-bottom: 0; } /* * Explicit placement. The cart button used to auto-flow onto a third grid * row below the header (0px wide, ~50px below the fold) because the search * row spans 1/-1. The bottom nav already carries "Giỏ hàng", so the topbar * keeps the 34px column as a spacer that balances the menu button. */ .topbar-mobile-inner .topbar-menu-toggle { grid-column: 1; grid-row: 1; } .topbar-mobile-inner .topbar-logo { grid-column: 2; grid-row: 1; } .topbar-mobile .noam-search { grid-column: 1 / -1; grid-row: 2; } .topbar-mobile-inner .topbar-button { display: none !important; } /* The glyph is now on a real button; drop the decorative pseudo-element. */ .topbar-mobile-inner::before { content: none !important; } .topbar-mobile-inner .topbar-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 40px; margin: 0; padding: 0; border: 0; background: transparent; color: #222222; font-size: 17px; line-height: 1; cursor: pointer; } /* * A whole family of hard-coded top offsets existed only to clear the * overflowing search row, and every one of them is now dead space: * * #section-breadcrumb 105px (<=445) / 122px (500-900) * #section-cart 81px / .title-section-cart 126px * #section-order 81px / 135px * #section-complete 81px * #profile 81px * .title-section-cart h1 117px (<=480) <- stacked on top of the 81px * * The cart was paying 81 + 32 + 117 = 230px before the word "Giỏ hàng" * appeared. With the header sizing itself, ordinary spacing is enough. */ #section-breadcrumb, #section-cart, #section-order, #section-complete, #profile { margin-top: 14px !important; } .title-section-cart, .title-section-cart h1 { margin-top: 0 !important; } } /* ========================================================================== 2. Floating buttons: one assistant per screen -------------------------------------------------------------------------- Measured at 375px: .contact-fixed [308,685,45,45] against .noam-chat [313,670,50,50] — a 40x35px collision, the fox covering most of the Zalo button. They are also the same offer twice: the bottom nav's "Tư vấn" item (#button-contact) opens the very same Zalo/phone list as the floating #button-contact-2. So on any page that has the bottom nav, the floating copy goes away and the fox is the only thing floating. The PDP is the exception — it swaps the bottom nav for the buy bar, so the floating launcher is the only Zalo tap on the highest-intent page. Keep it there, on the opposite side from the fox, so neither one lands on the full-width "Thêm vào giỏ" / "Mua ngay" buttons. ========================================================================== */ @media (max-width: 991px) { .contact-fixed { display: none; } body:has(#noamStickyBuy) .contact-fixed { display: block; left: 12px; right: auto !important; bottom: 92px !important; } /* The buy bar lifts .noam-chat to 150px; keep its opposite number level. */ body.noam-has-sticky-buy .contact-fixed { bottom: 150px !important; } } /* * Tablet gap: the bottom nav appears at <=991px but chat-widget.css only lifts * the launcher clear of it at <=767px, so between those two widths the fox sat * on top of "Tài khoản" and "Danh mục" (measured 121x49px of overlap at 768). * * Addressed by id: chat-widget.css is injected by the widget in the footer, so * it loads after this file and would win a tie on a bare .noam-chat selector. */ @media (min-width: 768px) and (max-width: 991px) { #noam-chat { bottom: 92px; } } /* ========================================================================== 3. Chat teaser: off on phones -------------------------------------------------------------------------- The bubble is absolutely positioned inside the 50px-wide launcher wrapper, so shrink-to-fit collapsed it to min-content — it rendered ~82px wide and 185px tall (one word per line) directly on top of a product card. The width bug is fixed in chat-widget.css; on phones the bubble is suppressed anyway because a 230px nag over a 375px grid costs more than it earns. ========================================================================== */ @media (max-width: 767px) { #noam-chat-teaser { display: none !important; } } /* ========================================================================== 4. PDP: one bottom bar, not two -------------------------------------------------------------------------- .noam-sticky-buy (price + Thêm vào giỏ + Mua ngay) and the legacy #product-cart-mobile-footer are both fixed to the bottom. The legacy bar is 72px tall but stacks a 24px icon over a label that wraps to two lines, so the cart icon spills ~11px above the bar and floats over the page. Whichever bar you saw depended on scroll position. Keep the new one; the mid-page range is covered by the inline .noam-product-actions buttons. ========================================================================== */ @media (max-width: 991px) { section.product-detail-group-mobile#product-cart-mobile-footer { display: none !important; } } /* ========================================================================== 5. Cart: stop clipping the "Đặt hàng" button -------------------------------------------------------------------------- #product-cart-mobile-footer is fixed to bottom:0 with height:106px, but its contents measure 121px — the primary checkout CTA sat 23px below the fold with its bottom edge unreachable. ========================================================================== */ @media (max-width: 991px) { #product-cart-mobile-footer { height: auto !important; padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important; box-shadow: 0 -6px 22px rgba(17, 31, 60, .14) !important; } #product-cart-mobile-footer .cart-mobile-bottom .cart-button-buy input { margin-top: 4px; margin-bottom: 0; padding-top: 12px; padding-bottom: 12px; border-radius: 10px; font-weight: 700; } /* * The bar is ~137px tall, so the chat launcher at bottom:92px landed on top * of the order total — the fox covered the one number the customer is * checking before they tap "Đặt hàng". The PDP's buy bar already lifts the * launcher this way; the cart bar needs the same. Scoped away from the PDP * copy of this id, which section 4 hides. */ body:has(#product-cart-mobile-footer:not(.product-detail-group-mobile)) .noam-chat { bottom: 150px; } } /* ========================================================================== 6. Bottom nav: drop the backdrop blur -------------------------------------------------------------------------- The category drawer is re-parented to in header.php, which is the real fix for it opening as a 72px sliver. This is the matching cleanup: backdrop-filter makes .menu-mobile a containing block for any position:fixed descendant, which is the trap that broke the drawer in the first place. The bar's background is already 96% opaque white, so an 18px blur behind it does no visible work while still costing a compositor layer on phones. ========================================================================== */ @media (max-width: 991px) { #section-menu-bottom .menu-mobile { backdrop-filter: none; -webkit-backdrop-filter: none; background: #ffffff; } } /* ========================================================================== 7. Overlays: get the floating buttons out of the way -------------------------------------------------------------------------- .noam-chat sits at z-index 1100, above the offcanvas (1045) and Bootstrap modals (1055), so the fox floated on top of the open category drawer and the login modal. The codebase already relies on :has() (campaign-autumn.css). ========================================================================== */ @media (max-width: 991px) { body:has(.offcanvas.show) .noam-chat, body:has(.offcanvas.show) .contact-fixed, body:has(.modal.show) .noam-chat, body:has(.modal.show) .contact-fixed { display: none !important; } } /* ========================================================================== 8. Listing: give the sort pills a real tap target -------------------------------------------------------------------------- 31px tall in a horizontal scroller — under the 44px touch guidance and noticeably fiddly at the top of the results list. ========================================================================== */ @media (max-width: 767px) { .noam-sort-pill { min-height: 40px; display: inline-flex; align-items: center; } } /* ========================================================================== 9. Product card: stop the discount badge eating the quick-view tap -------------------------------------------------------------------------- tethys-features.css drops .noam-pcard-quick-add to position:static under @media (hover:none), on the assumption that it would then flow below the image. It is a child of the media wrapper, so it flows to the *top* of the card instead and lands underneath the absolutely positioned "-20%" badge: measured [9,377,106,40] for the button against [19,379,48,22] for the badge. Put the pill back where the design puts it, and make the badge — which is decorative — stop intercepting taps meant for anything behind it. On phones the pill is dropped entirely instead. The magnifier button in the card's action stack already carries .noam-quick-view and opens the same sheet, so the pill is a second copy of one action — and a full-width navy bar across every image in a 2-up grid is exactly the density customers called out. One labelled action per card, not two. Tablets keep the pill; there is room for it there. ========================================================================== */ @media (max-width: 991px) { .noam-pcard-quick-add { position: absolute; margin-top: 0; } .noam-pcard-off { pointer-events: none; } } @media (max-width: 767px) { .noam-pcard-quick-add { display: none; } } /* ========================================================================== 10. Footer: put the gutters back on phones -------------------------------------------------------------------------- home-polish.css sets `#section-footer .container { padding: 0 !important }` with no media query, which also beats the `@media (max-width: 420px) .container { padding: 0 16px }` gutter. On desktop the footer columns carry their own padding so it never showed; stacked on a phone every line — the tagline, the link lists, the address — runs flush into both screen edges. ========================================================================== */ @media (max-width: 991px) { #section-footer .container { padding-left: 16px !important; padding-right: 16px !important; } }