/* ========================================================================= SỬA LỖI — các lỗi kỹ thuật phát hiện khi kiểm tra bản WordPress. File này nạp CUỐI CÙNG, sau cả responsive.css, để ghi đè được các breakpoint. Mọi CSS port từ bản thiết kế đã duyệt được giữ NGUYÊN VẸN trong các file gốc, mọi thay đổi đều tập trung ở đây kèm lý do, để sau này dễ đối chiếu với bản duyệt. KHÔNG dùng file này để đổi thiết kế — chỉ sửa lỗi. ========================================================================= */ /* ------------------------------------------------------------------------- 1. KHỐI "CÂU CHUYỆN" TRÀN KHỎI KHUNG TRÊN MÀN HÌNH HẸP Lỗi: .story dùng grid-template-columns: 1fr (không phải minmax(0, 1fr)), nên chiều rộng tối thiểu của cột bằng min-content. Nút "Xem câu chuyện của chúng tôi" có white-space: nowrap và rộng 319px; cộng padding hai bên 48px thành 367px. Khối panel chỉ rộng 320px ở màn 360px và 350px ở màn 390px, nên phần chữ bị tràn ra ngoài rồi bị .panel--overflow cắt mất. Cách sửa: khoá chiều rộng tối thiểu của cột về 0 và cho phép chữ trên nút xuống dòng khi màn hình quá hẹp. Trên màn rộng không có gì thay đổi. ------------------------------------------------------------------------- */ @media (max-width: 1024px) { .story { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 420px) { .story__text .btn { width: 100%; white-space: normal; padding-inline: 20px; } } /* ------------------------------------------------------------------------- 2. NÚT DÀI TRONG CÁC KHỐI HẸP KHÁC Cùng nguyên nhân với mục 1: white-space: nowrap trên .btn có thể đẩy rộng khối cha. Áp dụng cho các nút đứng một mình trong khối hẹp. ------------------------------------------------------------------------- */ @media (max-width: 420px) { .gallery-head .btn, .cta-strip__actions .btn, .article__footer .btn, .empty-state__actions .btn { white-space: normal; text-align: center; } .cta-strip__actions, .empty-state__actions { width: 100%; } .cta-strip__actions .btn, .empty-state__actions .btn { flex: 1 1 100%; } } /* ------------------------------------------------------------------------- 2b. LÁ TRANG TRÍ THÒ RA NGOÀI KHỐI Lỗi: ở khối "Vì sao khách nhớ vị?", lá trái đặt left: -22px và lá phải đặt right: -36px; top: -34px nên chìa hẳn ra ngoài khối bo góc, phần chìa ra nằm trên nền giấy trông như bị cắt dở. Khối này lại không có overflow: hidden nên không có gì che phần thừa. Cách sửa: kéo lá về sát mép trong của khối, bật overflow: hidden để phần vượt ra bị cắt theo đúng đường bo góc, rồi làm mờ dần mép lá bằng mask để chỗ tiếp giáp mềm lại thay vì đứt gãy. ------------------------------------------------------------------------- */ .section-why .panel { overflow: hidden; } .section-why .leaf--left { left: 0; top: 10px; /* Mờ dần về phía mép trái của khối. */ -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .55) 34%, #000 72%); mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .55) 34%, #000 72%); opacity: .92; } .section-why .leaf--right { right: 0; top: 0; /* Mờ dần về phía mép phải và mép trên. */ -webkit-mask-image: linear-gradient(to left, transparent 0, rgba(0, 0, 0, .5) 26%, #000 62%), linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .5) 22%, #000 58%); mask-image: linear-gradient(to left, transparent 0, rgba(0, 0, 0, .5) 26%, #000 62%), linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .5) 22%, #000 58%); -webkit-mask-composite: source-in; mask-composite: intersect; opacity: .92; } /* ------------------------------------------------------------------------- 2c. LÁ TRANG TRÍ CHE CHỮ Ở KHỐI "ĐẶT HÀNG NHANH" Lỗi: .leaf--sprig và .leaf--corner đặt z-index: 4, cao hơn z-index: 3 của khối .order, nên nhánh lá nằm đè lên dòng chữ viết tay "Đặt ngay bánh mì Quảng Bình!" và làm khuất chữ. Cách sửa: hạ lá xuống dưới lớp nội dung, đồng thời làm mềm mép lá. Khối này đã có overflow: hidden nên không cần thêm. ------------------------------------------------------------------------- */ .section-order .leaf--sprig, .section-order .leaf--corner { z-index: 1; } .section-order .leaf--sprig { bottom: 0; -webkit-mask-image: linear-gradient(to top, transparent 0, rgba(0, 0, 0, .5) 20%, #000 56%); mask-image: linear-gradient(to top, transparent 0, rgba(0, 0, 0, .5) 20%, #000 56%); opacity: .9; } .section-order .leaf--corner { left: 0; bottom: 0; -webkit-mask-image: linear-gradient(to top right, transparent 0, rgba(0, 0, 0, .5) 26%, #000 64%); mask-image: linear-gradient(to top right, transparent 0, rgba(0, 0, 0, .5) 26%, #000 64%); opacity: .9; } /* ------------------------------------------------------------------------- 2d. CHUYỂN TIẾP TỪ HERO XUỐNG KHỐI "MÓN NGON ĐẶC TRƯNG" Vấn đề: ảnh hero kết thúc bằng một đường cắt ngang thẳng băng, trong khi mockup gốc cho ảnh tan dần rồi hoà vào nền khối bên dưới. Ba nguyên nhân: 1. Lớp gradient phủ đáy hero chỉ cao 132px và dừng ở 96% độ đục, nên 30px cuối vẫn còn thấy ảnh rồi bị cắt phựt. 2. Mép giấy rách chỉ cao 26px với biên độ khoảng 5px trên bề ngang 1320px, mắt thường gần như không nhận ra. 3. Đáy hero phủ màu nền khối (#f8f4ef) chạy hết bề ngang, nhưng khối bên dưới chỉ rộng 1280px và bo góc — hai dải ngoài khối lộ màu nền giấy (#f2eae0) đậm hơn, tạo thành vệt gãy ở hai bên. Cách sửa: kéo dài vùng tan của ảnh, cho nó đục hẳn trước khi chạm đáy; dựng lại mép rách với biên độ lớn hơn và đường cong mềm; thêm một dải nền chạy hết bề ngang ở đầu khối để chỗ tiếp giáp liền một mạch, rồi mới chuyển dần về màu nền giấy. ------------------------------------------------------------------------- */ /* 1. Ảnh tan dần trên quãng dài hơn và đục hẳn ở đáy. */ .hero::after { height: 240px; background: linear-gradient( to bottom, rgba(248, 244, 239, 0) 0%, rgba(248, 244, 239, .18) 26%, rgba(248, 244, 239, .48) 50%, rgba(248, 244, 239, .78) 70%, rgba(248, 244, 239, .95) 85%, rgba(248, 244, 239, 1) 94%, rgba(248, 244, 239, 1) 100% ); } /* 2. Mép giấy rách cao hơn, nằm đè lên ranh giới nên không còn thấy đường cắt. */ .hero::before { height: 46px; bottom: -2px; left: -1%; right: -1%; } /* 3. Dải nền chạy hết bề ngang ở đầu khối, nối liền với đáy hero. */ .section-dishes { position: relative; isolation: isolate; } .section-dishes::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 150px; z-index: -1; pointer-events: none; background: linear-gradient( to bottom, #f8f4ef 0%, #f8f4ef 34%, rgba(245, 239, 231, .55) 68%, rgba(242, 234, 224, 0) 100% ); } /* Khối bo góc nhích lên một chút để không hở đường kẻ ở chỗ nối. */ .section-dishes .panel { margin-top: -1px; } /* ------------------------------------------------------------------------- 2e. NỐI LIỀN THANH HEADER VỚI NỘI DUNG Ở CÁC TRANG TRONG Vấn đề: ở trang chủ, thanh header trắng nổi trên ảnh hero nên tách bạch rất rõ. Sang trang trong thì khác hẳn — thanh header vẫn trắng (#fcfaf7) nhưng bên dưới nó là một dải sáng chạy hết bề ngang (do khối tiêu đề phủ lớp gradient trắng 90% ở phần trên). Hai mảng sáng cùng tông, một mảng bo góc rộng 1280px, một mảng vuông chạy hết 1320px, xếp chồng lên nhau thành ra rời rạc như hai mảnh chắp vá, lại còn thêm đường kẻ viền dưới khối tiêu đề. Cách sửa: coi cả vùng header + khối tiêu đề là MỘT mảng nền kem liền mạch, để thanh header trắng nổi trên đó đúng như cách nó nổi trên ảnh hero ở trang chủ. Bỏ lớp gradient trắng và đường viền, thay bằng một dải chuyển dần từ nền kem về nền giấy. Áp dụng cho mọi trang trong: chuyên mục, bài viết, trang tĩnh, tìm kiếm, 404. ------------------------------------------------------------------------- */ .site-header--solid { background: var(--c-cream); padding-bottom: 12px; } .site-header--solid + main > .page-hero, .page-hero { /* Cùng nền với header, rồi tan dần về nền giấy của phần nội dung bên dưới. */ background: linear-gradient( 180deg, var(--c-cream) 0%, var(--c-cream) 52%, rgba(247, 240, 231, .72) 80%, rgba(242, 234, 224, 0) 100% ); border-bottom: 0; padding-top: 20px; } /* * Vệt sáng rất nhạt ngay dưới thanh header, tạo cảm giác thanh header đổ bóng * xuống nền chứ không phải dán đè lên. Nhẹ thôi, không được thành đường kẻ. */ .site-header--solid::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; pointer-events: none; background: linear-gradient( 180deg, rgba(120, 80, 50, .045), rgba(120, 80, 50, 0) ); } .site-header--solid { position: relative; } /* Khối tiêu đề và phần nội dung bên dưới không còn khe hở. */ .page-hero + .content-section { padding-top: 26px; } /* ------------------------------------------------------------------------- 3. LƯỚI KHÔNG CO ĐƯỢC DƯỚI MIN-CONTENT Phòng ngừa đúng nguyên nhân ở mục 1 cho các lưới còn lại: tiêu đề bài dài hoặc một từ rất dài (đường dẫn, mã đơn) có thể đẩy rộng cả cột. ------------------------------------------------------------------------- */ .dish-grid, .archive-grid, .why-grid, .gallery-grid, .content-layout, .info-grid, .result { min-width: 0; } .card, .card__body, .result > div, .why-item, .story__text { min-width: 0; } /* Từ quá dài (đường dẫn dán vào bài) tự ngắt thay vì đẩy vỡ khung. */ .card__title, .result__title, .page-hero__title, .article__body .prose, .mini-post__title, .widget__list a { overflow-wrap: break-word; word-break: break-word; }