/* ============================================================================= * custom.css — override template Munchbox cho 1Ngon * Nạp SAU style.css + responsive.css trong VHead.php nên thắng về thứ tự. * Chỉ để dành cho các chỉnh sửa dùng chung nhiều trang; style riêng của 1 trang * thì để trong view của trang đó. * ========================================================================== */ /* ---- Giảm khoảng trắng giữa các section ---- * Template gốc dùng padding 80px trên/dưới cho mỗi section, xếp chồng nhiều * section liên tiếp thành khoảng trống ~160px. Rút lại còn 45px. */ .section-padding { padding: 45px 0; } .section-padding-top { padding-top: 45px; } .section-padding-bottom { padding-bottom: 45px; } /* Mobile: 2 section liền nhau vẫn cách 90px (45 + 45) -> còn 40px */ @media (max-width: 767px) { .section-padding { padding: 20px 0; } .section-padding-top { padding-top: 20px; } .section-padding-bottom { padding-bottom: 20px; } } /* Tiêu đề section: 20px -> 15px */ .section-header-left, .section-header-right, .section-header { padding-bottom: 15px; } /* ---- Footer ---- */ .footer-top.section-padding { padding: 35px 0; } footer.section-padding { padding: 45px 0; } /* ---- Giỏ hàng trên header (VHeaderCart.php) ---- * Template làm cho tên món tiếng Anh ngắn: hộp 225-250px, tên 1 dòng (nowrap). * Tên món tiếng Việt dài bị cắt + đè lên nút xoá, giá "620,000 đ" rớt chữ "đ" * xuống dòng -> nới hộp, cho tên xuống dòng, giá luôn 1 dòng. * (<= 576px template đã cho hộp rộng 100% nên không đụng.) */ @media (min-width: 577px) { .cart-dropdown .cart-detail-box, .cart-dropdown:hover > .cart-detail-box { width: 320px; } } .cart-dropdown .cart-detail-box .card .card-body .cat-product-box .cat-product .cat-name { flex: 1 1 auto; min-width: 0; white-space: normal; } .cart-dropdown .cart-detail-box .cat-product .cat-name a p { line-height: 1.4; margin-bottom: 4px; } .cart-dropdown .cart-detail-box .cat-product .delete-btn { flex: none; margin: 0 10px; } .cart-dropdown .cart-detail-box .cat-product .price { flex: none; white-space: nowrap; } /* ---- Logo 1Ngon trên header (VHeader.php), thay logo chữ MUNCHBOX 106x30 của template ---- * assets/img/logo-1ngon.jpg 264x100 (2,5x cho màn hình nét, thu nhỏ từ application/views/images/1ngon.jpeg * 393x149 nặng 564KB) hiển thị cao 40px; bỏ transform: scale(1.3) template dùng để phóng logo nhỏ. */ .header .logo img.logo-1ngon { width: auto; height: 40px; max-width: none; transform: none; } @media (min-width: 768px) { /* logo sát trái (template căn giữa trong khung 150-160px / 115px), địa chỉ cửa hàng theo ngay sau */ .header .logo { flex: 0 0 auto; max-width: none; justify-content: flex-start; margin-right: 24px; } .header .logo img.logo-1ngon { height: 44px; } } @media (max-width: 767px) { .header .logo img.logo-1ngon { height: 34px; } } /* ---- Địa chỉ cửa hàng trên header (VHeader.php .shop-address, thay ô chọn địa chỉ "Brooklyn, NY" của template) ---- * Link Google Maps: bỏ mũi tên ▾ (template vẽ bằng span.address:before/:after), địa chỉ dài thì cắt "…". */ .header .shop-address span.address:before, .header .shop-address span.address:after { display: none; } .header .search-form a.shop-address { max-width: 100%; } .header .search-form a.shop-address span.address { min-width: 0; padding-right: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; } .header .shop-address:hover span.address { text-decoration: underline; } @media (min-width: 768px) and (max-width: 991px) { /* tablet: ô địa chỉ chỉ còn ~100px ("62/6 Ngu…") -> chỉ hiện icon ghim (rê chuột: title có địa chỉ đầy đủ), * cột địa chỉ col-md-auto, ô tìm món col-md lấy phần còn lại (VHeader.php) */ .header .search-form a.shop-address span.address { display: none; } .header .search-form a.shop-address span.icon { margin-right: 0; } } @media (max-width: 767px) { /* 1 dòng gọn cao 36px dưới hàng logo; template: 2 thanh "Brooklyn, NY" + "Brooklyn, NY 10041 / Sort / Filter", * .main-sec (khoảng đệm dưới header cố định) cao 190px -> hàng logo 53px + dòng địa chỉ 36px */ .header .mobile-address .shop-address { gap: 6px; height: 36px; padding: 0 15px; border-top: 1px solid #f1f1f4; font-size: 13px; color: #ff0018; } .header .mobile-address .shop-address i { font-size: 14px; } .header .mobile-address .shop-address span.address { padding: 0; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; } .main-sec { height: 89px; } } /* ---- Khối tài khoản trên header (VHeaderUser.php) ---- * Template dùng ảnh đại diện mẫu 30px (user-1.png) -> thay bằng icon cùng cỡ. * "Đăng nhập" (chưa đăng nhập) không có menu nên bỏ mũi tên template vẽ bằng span:before/:after. */ .header .user-details .header-user-icon { font-size: 30px; line-height: 1; } .header .right-side .user-details > a.header-login > span { padding-right: 0; } .header .user-details > a.header-login > span:before, .header .user-details > a.header-login > span:after { display: none; } /* menu tài khoản chỉ còn 2 mục (Đơn đã đặt, Món đã lưu): template để ul inline-table (co theo chữ) + li 50% / 33% * (<= 576px) -> 2 nhãn ngắn làm ul co lại, "Món đã lưu" rớt dòng. ul chiếm hết bề ngang hộp, các mục căn giữa */ .header .user-details .user-dropdown ul { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; } /* ---- Chuông thông báo trên header (VHeaderNotify.php): đánh giá đơn gần nhất ---- * Template: hộp 225-250px chỉ mở khi hover -> nới rộng, và giữ mở khi đang gõ góp ý * (focus-within) để lệch chuột ra ngoài không làm mất ô đang gõ. Template ẩn chuông trên mobile. */ @media (min-width: 768px) { .notification-btn .notification-dropdown, .notification-btn:hover > .notification-dropdown { width: 300px; } .notification-btn:focus-within > .notification-dropdown { opacity: 1; visibility: visible; left: auto; right: 0; width: 300px; } } .notification-dropdown .product-detail .img-box img { width: 50px; height: 50px; object-fit: cover; } .notification-dropdown .product-detail .product-about { min-width: 0; } .notification-dropdown .rating-box textarea { height: auto; padding: 8px 10px; font-size: 13px; margin-bottom: 8px; } .notification-dropdown .notify-empty { padding: 15px; text-align: center; font-size: 13px; } /* sao: DOM 5 -> 1 + row-reverse => hover 1 sao tô luôn các sao bên trái (màu .text-yellow / .text-dark-white) */ .order-rating-stars { display: flex; flex-direction: row-reverse; justify-content: center; margin: 4px 0 10px; } .order-rating-stars button { border: 0; background: none; padding: 0 3px; font-size: 22px; line-height: 1; color: #00000059; cursor: pointer; } .order-rating-stars button.on { color: #fcb71b; } .order-rating-stars:hover button { color: #00000059; } .order-rating-stars:hover button:hover, .order-rating-stars:hover button:hover ~ button { color: #fcb71b; } /* ---- Sao đánh giá món bấm được (rating_widget() trong helpers/rating_helper.php) ---- * Lúc thường hiện điểm trung bình (có nửa sao). Rê chuột: mọi sao về hình sao đầy (\f005 của Font Awesome, * kể cả fa-star-half-alt) rồi tô vàng sao đang trỏ + các sao bên trái (DOM 5 -> 1 + row-reverse). */ .rate-widget, .product-box .product-caption .product-details .rate-widget { display: inline-flex; align-items: center; white-space: nowrap; vertical-align: middle; } /* thẻ món: template ép mọi span trong .product-details thành display:block -> mất row-reverse, sao bị đảo chiều */ .rate-widget .rate-stars, .product-box .product-caption .product-details .rate-widget .rate-stars { display: inline-flex; flex-direction: row-reverse; } .rate-widget button { border: 0; background: none; padding: 0 1px; font-size: inherit; line-height: 1; cursor: pointer; } .rate-widget .rate-stars:hover button i { color: #00000059; } .rate-widget .rate-stars:hover button i::before { content: "\f005"; } .rate-widget .rate-stars button:hover i, .rate-widget .rate-stars button:hover ~ button i { color: #fcb71b; } /* ---- Thông báo ngắn (showToast() trong common33.js) ---- */ #site_toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 2000; max-width: 90%; padding: 10px 18px; border-radius: 20px; background: rgba(0, 0, 0, .85); color: #fff; font-size: 14px; text-align: center; opacity: 0; visibility: hidden; transition: opacity .2s; } #site_toast.show { opacity: 1; visibility: visible; } /* ---- Thẻ món (product-box): tên dài thì cắt "…" để nhãn điểm đánh giá (.tags, VHome.php) luôn hiện. * Template để tên món không co lại (min-width auto) nên đẩy nhãn ra ngoài vùng hiển thị. */ .product-box .product-caption .title-box { gap: 8px; } .product-box .product-caption .title-box .product-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .product-box .product-caption .title-box .tags { flex: none; } /* ---- Nút trái tim "Lưu món" (VSaveHeart.php) ---- * Giống span.circle-tag của template (tròn trắng 36px). Trên thẻ món nằm góc phải trên ảnh, * z-index để nổi trên .overlay (lớp phủ kín ảnh của template ở trang chủ). */ .save-heart { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); } .save-heart img { width: 20px; height: 20px; } .product-box .product-img > .save-heart { position: absolute; top: 10px; right: 10px; z-index: 2; } /* bản có chữ ("Lưu món" / "Đã lưu") ở tiêu đề trang chi tiết món */ .save-heart.save-heart-label { width: auto; height: 30px; padding: 0 12px 0 9px; border: 1px solid #ddd; border-radius: 15px; box-shadow: none; font-size: 13px; font-weight: 500; color: #2a2a2a; vertical-align: middle; } .save-heart.save-heart-label img { width: 16px; height: 16px; } .save-heart.save-heart-label.saved { border-color: #f1b0a9; color: #c03a2b; } .restaurent-details .product-review .save-heart-label { margin-right: 10px; } /* ---- Luồng đặt hàng: giỏ hàng (VCheckOut.php) + thông tin giao hàng (VConfirm.php) ---- * Khung chung: section.final-order.co-page > .main-box (nội dung) + .co-summary (tổng tiền). */ .co-page .header-title { font-size: 22px; } .co-summary { position: sticky; top: 80px; } /* header cố định cao ~62px */ .co-summary h5 { font-size: 16px; } .co-summary-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; } .co-summary-total { font-size: 16px; font-weight: 700; border-top: 1px solid #eee; margin: 6px 0 15px; padding-top: 10px; } .co-continue { display: block; text-align: center; margin-top: 15px; font-size: 13px; } .co-empty i { font-size: 40px; color: #ccc; margin-bottom: 15px; } @media (max-width: 991px) { .co-summary { position: static; margin-top: 20px; } } /* ---- Thẻ món dùng chung (VProductCard.php): Món đã lưu (VSaved.php) + kết quả tìm món (VSearch.php) ---- */ .pc-card .product-img > a > img { height: 180px; object-fit: cover; } /* chỉ ảnh món, không đụng ảnh trái tim */ .pc-card .product-footer { padding: 0 10px 10px; } /* món chưa có lượt chấm vẫn giữ chỗ dòng "N đánh giá" để nút "Đặt mua" các thẻ cùng hàng thẳng nhau */ .pc-card .product-details .rating .rate-count { line-height: 20px; min-height: 20px; } /* ---- Ô tìm món (VHeader.php; modal #search-box trên mobile ở VFooter.php) + gợi ý khi gõ (VSearchSuggest.php) ---- * Header: khung thả xuống sát dưới ô tìm (ô nằm trong .search-box padding 10px), màn hình thấp thì cuộn. * Modal mobile: khung nằm tĩnh trong .modal-body (.search-suggest-static). * Màu chữ đặt ở .ss-item / .ss-all để thắng a:hover (#bc2634) của template. */ .search-suggest { display: none; position: absolute; top: calc(100% - 8px); left: 10px; right: 10px; z-index: 30; max-height: 420px; max-height: min(420px, calc(100vh - 90px)); overflow-y: auto; background: #fff; border: 1px solid #e6e6eb; border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); } .search-suggest.show { display: block; } /* header 768-1199px: ô tìm chỉ còn ~140-300px -> khung rộng tối thiểu 320px (lấn sang phải). Cột ô tìm và cột icon bên phải * cùng z-index 1 của template, cột phải nằm sau nên sẽ đè lên phần lấn -> nâng cột ô tìm lên khi đang gõ */ .header .search-form .search-suggest { min-width: 320px; } .header .main-search.mainNavCol:focus-within { z-index: 2; } .search-suggest.search-suggest-static { position: static; max-height: none; border-width: 1px 0; border-radius: 0; box-shadow: none; } .search-suggest .ss-item { display: flex; align-items: center; gap: 10px; padding: 7px 12px; color: #000000de; transition: background .15s; } .search-suggest .ss-item img { flex: none; width: 40px; height: 40px; border-radius: 4px; object-fit: cover; background: #f4f4f4; } .search-suggest .ss-name { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.35; } .search-suggest .ss-price { flex: none; font-size: 13px; color: #6b6b83; white-space: nowrap; } .search-suggest .ss-all { display: block; padding: 10px 12px; border-top: 1px solid #f1f1f4; font-size: 13px; font-weight: 600; color: #ff0018; transition: background .15s; } .search-suggest .ss-all i { margin-right: 6px; } .search-suggest .ss-empty { padding: 12px; font-size: 13px; color: #6b6b83; } .search-suggest a:hover, .search-suggest a.active { background: #f5f5f7; text-decoration: none; } /* trang kết quả (VSearch.php): từ khoá gợi ý khi không tìm thấy món nào */ .sr-hints { margin: 0 0 15px; } .sr-hints a { display: inline-block; margin: 0 3px 8px; padding: 4px 12px; border: 1px solid #e3e3e8; border-radius: 16px; background: #fff; color: #2a2a2a; font-size: 13px; } .sr-hints a:hover { border-color: #ff0018; color: #ff0018; text-decoration: none; } /* ---- Menu "Danh mục" trên header (mega menu, VHeader.php) ---- * Template viết hoa chữ đầu mỗi từ (capitalize) -> "Gà Ta Nướng": tiếng Việt để nguyên. * Mỗi mục cao 36px nhờ line-height 36px: tên dài xuống dòng (992-1199px) thì dòng 2 trông như 1 mục riêng * -> line-height 20px + padding 8px (vẫn 36px cho mục 1 dòng). Icon: template ép .parent-megamenu i 22px trên mobile. * Ảnh trái (720x480) phủ kín ô gần vuông, không méo. */ .parent-megamenu .megamenu .menu-style ul li { text-transform: none; line-height: 20px; padding: 8px 0; } .parent-megamenu .megamenu .menu-style ul li a i { width: 16px; margin-right: 4px; font-size: 14px; color: #ff0018; } /* icon cột Liên hệ */ .parent-megamenu .megamenu .mm-photo img { object-fit: cover; } /* ---- Mobile: menu Danh mục / tài khoản / giỏ hàng mở thành lớp phủ, template cho cao 100vh ---- * Lớp phủ bắt đầu dưới hàng logo (53px, đo ở 360-767px) nên thò xuống dưới màn hình 53px; trên điện thoại thật * 100vh còn gồm cả phần bị thanh địa chỉ / thanh công cụ trình duyệt che -> dòng cuối ("Fanpage Facebook", * nút Thanh toán của giỏ nhiều món) không cuộn tới được. Cao đúng phần màn hình còn lại (dvh: trừ thanh công cụ * đang hiện; trình duyệt cũ dùng dòng vh), menu tài khoản / giỏ cuộn được, cuộn trong menu không kéo trang phía sau. */ @media (max-width: 767px) { .parent-megamenu .megamenu { height: calc(100vh - 53px); height: calc(100dvh - 53px); overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); } } @media (max-width: 576px) { .user-dropdown, .cart-dropdown .cart-detail-box { height: calc(100vh - 53px); height: calc(100dvh - 53px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); } } /* đang mở 1 trong 3 lớp phủ trên: tạm ẩn 3 nút nổi đè lên nội dung menu (Xem khuyến mãi .bubble, Xem Facebook .fb, * Zalo #linkzalo — VLayout.php). :has() — trình duyệt cũ không hiểu thì nút vẫn hiện như trước */ @media (max-width: 767px) { body:has(.megamenu.show, .user-dropdown.show, .cart-detail-box.show) :is(.bubble, .fb, #linkzalo) { display: none; } } /* ---- Trang loại món (VProductType.php): hàng chip chuyển nhanh giữa các loại món ---- */ .pt-types { display: flex; flex-wrap: wrap; gap: 8px; margin: -5px 0 20px; } .pt-types a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border: 1px solid #e3e3e8; border-radius: 18px; background: #fff; color: #2a2a2a; font-size: 13px; font-weight: 500; } .pt-types a span { min-width: 20px; padding: 0 6px; border-radius: 10px; background: #f1f1f4; color: #6b6b83; font-size: 11px; line-height: 18px; text-align: center; } .pt-types a:hover { border-color: #ff0018; color: #ff0018; text-decoration: none; } .pt-types a.active { border-color: #ff0018; background: #ff0018; color: #fff; } .pt-types a.active span { background: rgba(255, 255, 255, .25); color: #fff; } /* ---- Trang thông tin "Về 1Ngon": VNews.php (Giới thiệu, Khuyến mãi, Giao hàng, Tin tức) + VMenu.php (Bảng giá) ---- * Khung chung: section.co-page > đường dẫn .info-breadcrumb + cột trái (khung trắng, tiêu đề .info-head) * + cột phải VInfoSidebar.php (menu Về 1Ngon, Tin khác, khung đặt món; đứng yên khi cuộn ở >= 992px). */ .info-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 15px; font-size: 13px; color: #6b6b83; } .info-breadcrumb a { color: #6b6b83; } .info-breadcrumb a:hover { color: #ff0018; text-decoration: none; } .info-breadcrumb i { font-size: 11px; color: #b5b5c3; } .info-breadcrumb span { color: #000000de; font-weight: 500; } .info-head { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid #f1f1f4; } .info-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #fff0f1; color: #ff0018; font-size: 21px; } .info-kicker { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #ff0018; } .info-title { margin: 0; font-size: 26px; line-height: 1.3; font-weight: 700; color: #000000de; } .info-side { padding: 20px 22px; margin-bottom: 20px; } .info-side-title { padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid #f1f1f4; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #000000de; } .info-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; font-size: 14px; color: #3d3d4e; } .info-nav a i { width: 18px; text-align: center; color: #b5b5c3; } .info-nav a:hover { background: #f8f8fa; color: #ff0018; text-decoration: none; } .info-nav .active a { background: #fff0f1; color: #ff0018; font-weight: 600; } .info-nav .active a i { color: #ff0018; } .info-other li + li { border-top: 1px solid #f4f4f7; } .info-other a { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 14px; line-height: 1.4; color: #000000de; } .info-other a:hover { color: #ff0018; text-decoration: none; } .info-other img, .info-other-icon { flex: none; width: 64px; height: 48px; border-radius: 6px; object-fit: cover; } .info-other-icon { display: inline-flex; align-items: center; justify-content: center; background: #f4f4f7; font-size: 18px; color: #b5b5c3; } .info-cta { padding: 22px; border-radius: 6px; background: linear-gradient(135deg, #ff0018, #c40012); text-align: center; color: #fff; } .info-cta h6 { margin-bottom: 6px; font-size: 17px; font-weight: 700; color: #fff; } .info-cta p { margin-bottom: 14px; font-size: 13px; color: rgba(255, 255, 255, .85); } .info-cta .btn-first { border-color: #fff; background: #fff; color: #ff0018; } .info-cta .btn-first:hover { background: transparent; color: #fff; } .info-cta-phone { display: block; margin-top: 12px; font-size: 14px; font-weight: 600; color: #fff; } .info-cta-phone:hover { color: #fff; text-decoration: underline; } @media (min-width: 992px) { .info-sidebar { position: sticky; top: 80px; } /* header cố định cao ~62px */ } @media (max-width: 767px) { .info-head { gap: 12px; } .info-icon { width: 44px; height: 44px; font-size: 18px; } .info-title { font-size: 21px; } }