/* ========================================================================== FROGA — điều hướng khổ hẹp và thanh mua dính đáy ========================================================================== ĐÂY LÀ TỆP DUY NHẤT TRONG DỰ ÁN ĐƯỢC PHÉP DÙNG @media. `site.css` cố ý không có điểm ngắt nào: bộ thiết kế co giãn bằng clamp() và auto-fit, nên thêm @media vào đó là phá cách dàn của thiết kế. Nhưng menu điện thoại thì không co giãn được — nó là một cách dàn KHÁC hẳn, không phải cùng một cách dàn thu nhỏ. Vì vậy tách riêng ra đây, và chỉ ở đây. Vì sao phải làm: đo ở khổ 375px, thanh menu rộng 655px nằm trong khung 345px — thừa 310px bị cắt mất. Nút "Mua ngay" nằm ở toạ độ x=670, tức lệch khỏi mép phải hơn 320px. Khách dùng điện thoại KHÔNG NHÌN THẤY nút mua, cũng không thấy Tham vọng / Về Froga / Liên hệ, mà chẳng có dấu hiệu nào cho biết là cuộn ngang được. ========================================================================== */ /* -------------------------------------------------------------------------- NÚT BA VẠCH — khối cũ ở đây là MÃ CHẾT, đã gỡ 06/09/2026 -------------------------------------------------------------------------- Khối cũ viết cho `.x-menu` / `.x-menu-vach` / `.x-nav` / `.x-mua`, mà đầu trang thật KHÔNG hề mang những lớp đó — nó dùng `#froga-ham` và `#froga-nav[data-mo]`. Quét cả theme không thấy một thẻ nào mang lớp x-*. Nghĩa là: cả khối luật lẫn đoạn JS trong functions.php đi kèm nó đều không bao giờ khớp, im lặng không báo gì. Hậu quả đo được ở 430px: bấm nút thì menu vẫn mở (nhờ onclick viết thẳng trong thẻ) nhưng ba vạch không biến thành dấu X, và `aria-label` vẫn là "Mở menu" cả khi menu đang mở — người dùng trình đọc màn hình nghe ngược hẳn. Luật dàn menu thả xuống đã có sẵn trong thiet-ke.css (`@media (max-width: 1023px)`) và chạy đúng — không dựng lại ở đây. Chỉ giữ phần hoạt ảnh dấu X, bám vào `aria-expanded` mà JS trong functions.php nay đặt thật. */ #froga-ham > span { transition: transform .2s ease, opacity .2s ease; } /* 6.5px = nửa khoảng cách tâm–tâm giữa hai vạch (vạch dày 2.5px, cách nhau 4px). */ #froga-ham[aria-expanded="true"] > span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } #froga-ham[aria-expanded="true"] > span:nth-child(2) { opacity: 0; } #froga-ham[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mục "đang xem" trên thanh ngang (desktop/tablet) — 08/09/2026 chuyển từ inline style (theme.mjs) sang class, để có chỗ bám riêng khi làm lại menu điện thoại dưới đây mà không đụng dáng gạch chân này. */ #froga-nav a.froga-nav-dang-o { color: #175A2B; border-bottom: 2.5px solid #23773C; padding-bottom: 2px; } /* 07/09/2026: menu thả xuống trên điện thoại từng bung ra thành MỘT HÀNG NGANG cắt chữ, vì kiểu inline `flex-direction:row;flex-wrap:nowrap;overflow-x:auto` trong bản vẽ đè lên luật xếp dọc của thiet-ke.css (inline thắng stylesheet không !important). Lộ rõ khi menu lên 8 mục. */ @media (max-width: 1023px) { #froga-nav[data-mo="1"] { flex-direction: column !important; flex-wrap: wrap !important; overflow: visible !important; } /* 08/09/2026, anh: "làm phần menu sổ ra ở bản mobile tinh tế hơn" — bản cũ là dãy chữ canh giữa trần trụi trên nền trong suốt, mỗi mục cách đều bằng gap, mục đang xem chỉ có một gạch chân mỏng. Làm lại thành khối thẻ nổi: nền trắng, góc dưới bo tròn, đổ bóng nhẹ tách khỏi thanh đầu trang; mỗi mục là một hàng dàn trái + mũi tên phải kiểu menu ứng dụng, mục đang xem tô nền xanh nhạt thay cho gạch chân (rõ hơn, không còn "gạch chân lạc lõng" giữa một khối chữ đều nhau). */ #froga-nav[data-mo="1"] { gap: 2px !important; background: #FFFFFF; border-top: none !important; border-radius: 0 0 18px 18px; box-shadow: 0 14px 28px rgba(23, 90, 43, .12); padding: 8px 10px 12px !important; } #froga-nav[data-mo="1"] a { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; width: 100%; box-sizing: border-box; padding: 13px 14px !important; border-radius: 11px; border-bottom: none !important; color: #1E3B27; } #froga-nav[data-mo="1"] a::after { content: '\203A'; color: #B9CDB4; font-size: 19px; line-height: 1; } #froga-nav[data-mo="1"] a.froga-nav-dang-o { background: #E9F3E7; color: #175A2B; } #froga-nav[data-mo="1"] a.froga-nav-dang-o::after { color: #23773C; } /* Hai mục phụ Đại lý · Liên hệ — chỉ có trong menu thả điện thoại. Thanh ngang desktop vẫn đúng năm mục như anh Mừng chốt 14/09/2026; xem chú thích dài ở bảng MUC trong theme.mjs trước khi đụng vào. */ #froga-nav[data-mo="1"] a.froga-nav-phu { font-size: 14.5px; color: #4A5A47; } /* Vạch ngăn tách nhóm chính với nhóm phụ: cùng một menu nhưng khác vai — năm mục trên là đường đi của người mua, hai mục dưới là của đối tác và người cần gọi. */ #froga-nav[data-mo="1"] a.froga-nav-phu-dau { margin-top: 7px !important; border-top: 1px solid #EDE6D6 !important; padding-top: 15px !important; border-radius: 0 11px 11px 11px; } } /* Ngoài menu thả: hai mục phụ không được lộ ra thanh ngang. Đặt NGOÀI @media để mọi khổ không phải menu thả đều ẩn, kể cả màn rộng. */ #froga-nav a.froga-nav-phu { display: none; } @media (max-width: 1023px) { #froga-nav[data-mo="1"] a.froga-nav-phu { display: flex !important; } } /* Màn 1024–1180px: tám mục vừa khít, bớt khoảng cách kẻo mục cuối trôi khỏi thanh. */ @media (min-width: 1024px) and (max-width: 1180px) { #froga-nav { gap: 10px !important; font-size: 13.5px !important; } } @media (max-width: 400px) { /* Khổ hẹp nhất: nhường chỗ cho nút mua, chữ FROGA cạnh logo là thứ bỏ được. */ .x-mua { padding: 9px 14px !important; } } /* ========================================================================== Thanh mua dính đáy — chỉ ở trang một sản phẩm, khổ điện thoại ========================================================================== Trang sản phẩm dài; cuộn tới phần thành phần, hướng dẫn, tab thông số là nút "Thêm vào giỏ hàng" đã trôi mất từ lâu. Trên điện thoại đó là lúc khách quyết định mua — mà không có nút nào trong tầm ngón tay. ========================================================================== */ .froga-thanh-mua { display: none; } @media (max-width: 1024px) { body.single-product .froga-thanh-mua { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; align-items: center; gap: 12px; padding: 10px clamp(12px, 4vw, 20px); padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); /* Đục hẳn, đừng .97: chữ và ảnh cuộn phía dưới hiện mờ mờ qua thanh, đọc ra thành vết bẩn chứ không phải hiệu ứng. Không được gì khi trong suốt. */ background: #FFFFFF; border-top: 1px solid #E4DDC9; box-shadow: 0 -6px 20px rgba(30, 59, 39, .10); } .froga-thanh-mua .froga-tm-gia { flex: 1 1 auto; min-width: 0; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 20px; color: #23773C; line-height: 1.15; } .froga-thanh-mua .froga-tm-gia del { display: none; } /* 07/09/2026: hàng giảm giá in giá gạch thành dòng riêng, thanh cao gấp đôi; thanh chốt chỉ cần giá bán */ .froga-thanh-mua .froga-tm-ten { display: block; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 12px; color: #5F6B58; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .froga-thanh-mua a.button { flex: none; font-size: 15px !important; padding: 12px 22px !important; } /* Chừa chỗ cho thanh, kẻo nó đè lên phần cuối trang. */ body.single-product { padding-bottom: 76px; } /* Chú ếch nổi đứng đúng chỗ thanh mua — đẩy nó lên trên. */ body.single-product .mascot-noi { bottom: 84px !important; } } /* ========================================================================== Chú ếch nổi ở khổ hẹp ========================================================================== Chú ếch và bong bóng thoại là trang trí, nhưng ở khổ 375px chúng phủ lên phần chữ thật (đo được: bong bóng che khối "90% · 3 KHÔNG · BỘ 3"). Giữ chú ếch cho vui, bỏ bong bóng — nội dung quan trọng hơn. ========================================================================== */ @media (max-width: 720px) { .mascot-noi [data-bong] { display: none !important; } .mascot-noi [data-keu] img, .mascot-noi img { width: 62px !important; height: auto !important; } /* Sau khi đảo ảnh lên trước ở phần đầu trang, hai nút bấm rơi xuống gần đáy màn hình — đúng chỗ chú ếch đứng. Ếch lùi sát góc và không nhận cú bấm, để nút vẫn bấm trúng dù ngón tay chạm vào phần chồng lên nhau. */ .mascot-noi { right: 4px !important; opacity: .92; pointer-events: none !important; } .mascot-noi a, .mascot-noi button { pointer-events: auto; } } /* ========================================================================== Giỏ hàng ở khổ điện thoại — chữa kiểu vỡ dòng bậc thang ========================================================================== WooCommerce khổ hẹp đổi bảng thành từng khối và ép `text-align: right` cho mọi ô. Tên sản phẩm dài hơn một dòng thì mỗi dòng lại canh phải, nhìn ra hình bậc thang lệch dần. Nhãn cho xuống dòng riêng, tên canh trái. ========================================================================== */ @media (max-width: 768px) { .froga-woo table.cart td.product-name { text-align: left !important; } .froga-woo table.cart td.product-name::before { display: block; float: none !important; margin-bottom: 4px; font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase; color: #5F6B58; } .froga-woo table.cart td.product-name a { line-height: 1.35; } } /* ========================================================================== Khổ điện thoại — kéo phần quyết định mua lên trên nếp gấp ========================================================================== Đo trên khổ 375px: phần đầu trang chủ chiếm trọn màn hình đầu tiên bằng chữ, ảnh sản phẩm nằm dưới nếp gấp; ở trang sản phẩm thì ảnh cao gần 900px đẩy giá và nút mua xuống tận đáy. Ở khổ rộng cả hai đều ổn, nên chỉ sửa riêng khổ hẹp — đúng nguyên tắc PC và điện thoại tách bạch. ========================================================================== */ @media (max-width: 720px) { /* Đầu trang chủ, khổ điện thoại: ẢNH LÊN TRƯỚC CHỮ. Ở khổ rộng hai cột nằm cạnh nhau nên khách thấy cả hai cùng lúc; xuống khổ hẹp chúng xếp chồng, và bản thiết kế xếp chữ trước — đo được: hộp sản phẩm bắt đầu ở 708px, tức là dưới nếp gấp của mọi điện thoại. Đảo thứ tự bằng `order` chứ không đụng vào HTML, và chỉ đảo ở khổ này. */ #top > div:last-child { align-items: start; } #top > div:last-child > div:first-child { order: 2; } #top > div:last-child > div:last-child { order: 1; margin-bottom: 18px; } #top > div:last-child > div:last-child img:first-of-type { max-height: 30vh; width: auto; margin: 0 auto; display: block; } /* Chữ nhỏ lại một nhịp, khoảng cách bớt. Đích rất cụ thể: hai nút bấm phải nằm TRÊN 812px — chiều cao màn hình iPhone hay gặp nhất. Đo lại sau mỗi lần chỉnh, đừng chỉnh mò. */ #top h1 { font-size: 34px !important; line-height: 1.12 !important; margin-bottom: 12px !important; } #top p { font-size: 15.5px !important; line-height: 1.5 !important; margin-bottom: 18px !important; } #top .x1, #top .x2 { padding: 12px 20px !important; font-size: 15px !important; } #top > div:last-child > div:last-child { margin-bottom: 10px; } /* Trang sản phẩm: ảnh cao tối đa nửa màn hình, phần còn lại nhường cho giá và nút mua. object-fit giữ nguyên tỉ lệ, không bóp méo hộp sản phẩm. */ .froga-woo div.product .woocommerce-product-gallery__wrapper img { max-height: 46vh !important; width: auto !important; margin: 0 auto !important; object-fit: contain !important; } .froga-woo div.product .flex-viewport { max-height: 46vh !important; } /* Dải tin cậy: hai cột thay vì một, để không kéo dài thành năm dòng. PHẢI là minmax(0,1fr) chứ không phải 1fr: mặc định ô lưới không co nhỏ hơn nội dung của nó, nên với 1fr thì cả dải rộng hơn màn hình và hai lời hứa bên phải bị cắt cụt ngoài mép. */ .froga-dai-tin-cay { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } /* !important: cùng độ ưu tiên với luật gốc trong ban-hang.css, ai nạp sau thắng — thứ tự nạp giữa hai add_action() cùng mức ưu tiên không chắc chắn, đo được ban-hang.css thắng nên chữ không đổi cỡ nếu thiếu !important. */ .froga-lh-bt { width: 36px !important; height: 36px !important; } .froga-lh-bt svg { width: 18px !important; height: 18px !important; } .froga-lh-chu strong { font-size: 13px; } .froga-lh-chu em { font-size: 11.5px; } /* Dải chữ chạy ngang "Bảo hộ thương hiệu" — 08/09/2026, anh: "cỡ chữ ở bản mobile hơi to". 14.5px/13px là cỡ desktop; ở điện thoại cả câu dài chạy hết bề ngang chậm và nặng, thu nhỏ + bớt đệm cho gọn hơn. BẪY đã gặp: chữ `span.` (không phải `.`) trong hai luật dưới — bảng "nâng cỡ chữ nhỏ" ở dưới (`[style*="font-size:13px"] → 14px`) khớp đúng span dấu chấm (inline có sẵn `font-size:13px`), độ ưu tiên bằng luật class trần nên ai đứng SAU tệp thắng — bảng đó đứng sau nên đè mất, dù padding của luật này vẫn ăn (không cùng thuộc tính). Thêm `span` phía trước để độ ưu tiên CAO HƠN attribute selector, thắng chắc bất kể thứ tự. */ span.froga-dai-bh-chu { font-size: 12px !important; } span.froga-dai-bh-cham { font-size: 11px !important; padding: 0 16px !important; } } @media (max-width: 400px) { /* Máy hẹp nhất: xếp một cột — hai cột ở đây thì chữ vỡ dòng giữa từ. */ .froga-dai-tin-cay { grid-template-columns: minmax(0, 1fr); } } /* ------------------------------------------------------------------ * * Khối bấm mở (
) * * Dùng cho điều khoản chính sách và các bảng tra dài — thứ người ta tra khi * cần chứ không đọc tuần tự. Xem build/gap-khoi.mjs để biết gập cái gì và vì * sao KHÔNG gập thân bài viết. * * Dấu +/− vẽ bằng CSS chứ không dùng ký tự: ở nhiều máy Android, dấu − của * phông hệ thống cao hơn dấu + nên hai trạng thái nhảy chỗ. * ------------------------------------------------------------------ */ .froga-gap > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; } .froga-gap > summary::-webkit-details-marker { display: none; } .froga-gap > summary h2 { margin: 0 !important; } .froga-gap > summary:focus-visible { outline: 2px solid #23773C; outline-offset: 4px; border-radius: 8px; } .froga-gap-dau { flex: none; position: relative; width: 26px; height: 26px; border-radius: 7px; background: #E7F2E4; border: 1px solid #BBD9B9; } .froga-gap-dau::before, .froga-gap-dau::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2.5px; margin: -1.25px 0 0 -5.5px; border-radius: 2px; background: #23773C; transition: transform .18s ease; } .froga-gap-dau::after { transform: rotate(90deg); } .froga-gap[open] .froga-gap-dau { background: #1A582C; border-color: #1A582C; } .froga-gap[open] .froga-gap-dau::before, .froga-gap[open] .froga-gap-dau::after { background: #FCC232; } .froga-gap[open] .froga-gap-dau::after { transform: rotate(0deg); } .froga-gap-than { padding-top: 14px; } @media (prefers-reduced-motion: reduce) { .froga-gap-dau::before, .froga-gap-dau::after { transition: none; } } /* Nhãn nhỏ + tiêu đề đi cùng nhau trong nút bấm mở. */ .froga-gap-tieu-de { display: block; min-width: 0; } /* ========================================================================== DẢI VUỐT NGANG — thay cho lưới xếp chồng ở khổ điện thoại ========================================================================== Đo 05/09/2026: trang chủ ở 430px cao 13.401px, trong đó 11 trên 12 khối là lưới xếp chồng dọc. Trang chủ officialfinish.vn ở cùng khổ chỉ 4.995px — họ đổi lưới thành dải vuốt ngang, nên điện thoại chỉ dài hơn máy tính 1,2 lần thay vì 1,7 lần. ⚠️ ĐỪNG dùng `data-rail` của bộ thiết kế cho mọi lưới: luật của nó kèm `[data-rail] img { height:148px !important }` — đúng cho thẻ sản phẩm, nhưng áp lên dải quà tặng (ảnh 40px) là phóng ảnh to gấp ba. Lớp dưới đây chỉ lo phần cuộn ngang, không đụng tới ảnh. ========================================================================== */ .froga-quet { display: none; } @media (max-width: 700px) { .froga-truot { display: flex !important; /* PHẢI ép cả `flex-direction`. Khối bảy thẻ sản phẩm ở trang Về Froga có sẵn `flex-direction:column` viết thẳng trong thuộc tính style — luật ngoài không ghi đè được, nên nó vẫn xếp dọc và `scrollWidth` bằng `clientWidth`: dải vuốt trông như đã bật mà thật ra không. */ flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px !important; padding-bottom: 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; /* Cho thẻ đầu và cuối thở ra sát mép màn hình, đúng kiểu dải vuốt. */ margin-inline: calc(clamp(16px, 4vw, 24px) * -1); padding-inline: clamp(16px, 4vw, 24px); } .froga-truot::-webkit-scrollbar { display: none; } .froga-truot > * { flex: 0 0 78% !important; scroll-snap-align: start; min-width: 0; } /* Thẻ nhỏ (quà tặng, biểu tượng): hai cái một màn cho đỡ phải vuốt lâu. */ .froga-truot--hep > * { flex: 0 0 44% !important; } /* Thẻ NGANG (ảnh trái, chữ phải): 78% là chữ vỡ mỗi dòng hai từ. */ .froga-truot--rong > * { flex: 0 0 92% !important; } /* Hàng tiêu đề "chữ to + chú thích" phải xuống dòng ở khổ hẹp, kẻo tiêu đề bị bóp còn ba dòng mỗi dòng một từ. */ .froga-hang-tieu-de { flex-wrap: wrap !important; } .froga-quet { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: #5F6B58; } } /* -------------------------------------------------------------------------- Gập một cái LƯỚI (froga-gap-luoi) — nút bấm phải TỰ có hình dáng -------------------------------------------------------------------------- Khác với gập cả khối (nút bấm là chính cái

, tự to và rõ), gập lưới chỉ có một dòng chữ ngắn. Đo 05/09/2026 ở khổ 430px: nút "Xem đủ 9 món quà tặng kèm" cao **28px** — dưới ngưỡng chạm 44px — và chữ thì xám đậm nằm trên nền xanh đậm, gần như không đọc được, vì nó thừa hưởng màu của khối cha. -------------------------------------------------------------------------- */ .froga-gap-luoi > summary { min-height: 48px; padding: 10px 16px; border: 1px solid #E4DDC9; border-radius: 12px; font-weight: 700; font-size: 15px; color: #1E3B27; background: #FFFFFF; } .froga-gap-luoi[open] > summary { margin-bottom: 4px; } /* Đặt trên dải nền tối thì đảo màu, kẻo chữ chìm hẳn vào nền. */ .froga-gap-luoi--toi > summary { border-color: rgba(255, 255, 255, 0.34); background: rgba(255, 255, 255, 0.10); color: #FFFFFF; } /* ========================================================================== CANH ĐỀU KHỐI DẪN — một bề rộng cho cả site ========================================================================== Bản thiết kế 12 dùng 13 giá trị `max-width` khác nhau cho cùng một loại khối dẫn (480 → 900px), nên đọc dọc trang thì không khối nào thẳng hàng với khối nào. Anh Mừng 05/09/2026: "cần phải canh đều khối theo chiều ngang trang." 640px ≈ 80 ký tự một dòng — đúng ngưỡng trên của khoảng đọc được (60–80), và cũng là giá trị bản thiết kế dùng nhiều nhất. Kéo rộng hết khung 1.180px thì ra 147 ký tự một dòng: khối trông đều mà không ai đọc nổi. ========================================================================== */ :root { --froga-doan: 640px; } /* `text-wrap: balance` chia đều số chữ mỗi dòng, hết cảnh "dài, dài, cụt". Nó chỉ ăn với khối ngắn (Chrome bỏ qua khối trên ~6 dòng) nên an toàn cho đoạn dẫn, và KHÔNG dùng cho thân bài. Chỉ dùng được vì `build/nhip-chu.mjs` đã dán các từ ghép bằng khoảng trắng không ngắt: thử `balance` trước khi có nó thì nó chữa ba chỗ và bẻ đôi "thế giới", "bất kỳ" ở ba chỗ khác. */ .froga-dan { text-wrap: balance; } @media (max-width: 700px) { /* Khổ hẹp thì bề rộng khung đã quyết định, đừng để 640px chặn thêm. */ :root { --froga-doan: 100%; } } /* Khối dẫn đầu mục: canh giữa cho thẳng hàng suốt trang. Hàng nhãn nhỏ bên trong có chỗ dùng `display:flex` (khối) thay vì `inline-flex`, mà khối thì `text-align:center` không kéo ra giữa được — phải ép `justify-content`. Đặt lên `> div` là an toàn: div không phải flex thì thuộc tính này vô hại. */ .froga-dan-giua > div { justify-content: center; } /* ========================================================================== THU GỌN BẰNG CHIỀU CAO — cho khối mà
không gập trọn được ========================================================================== Đo 05/09/2026: 10 trên 12 khối đang gập có

nằm sâu trong thẻ nền, nên
chỉ giấu được cột chữ, còn ảnh và lưới vẫn hiện — khối "đã gập" vẫn cao 1.180px. Cách này kẹp thẳng chiều cao cả khối nên khối nào cũng ăn, và KHÔNG phải đụng vào một thẻ nào của bản thiết kế. Mờ dần bằng `mask-image` chứ không phủ một lớp gradient màu: khối nền kem, nền trắng hay nền xanh đậm đều đúng, khỏi phải đoán màu nền từng khối. ========================================================================== */ /* Khai ở :root, KHÔNG chỉ trong @media. Trước 05/09/2026 nó chỉ có trong khối ≤700px, nên ở khổ máy tính biến rỗng và hai bên rơi về hai mức dự phòng KHÁC NHAU: CSS kẹp 320px còn JS lấy ngưỡng 420px. Khối cao 320–510px vì thế không được thu gọn dù kẹp lại vẫn tiết kiệm chỗ. */ :root { --froga-cao-gon: 320px; } .froga-gon-boc { position: relative; } .froga-thu-gon[data-gon-dong] { max-height: var(--froga-cao-gon, 320px); overflow: hidden; -webkit-mask-image: linear-gradient(#000 62%, transparent 100%); mask-image: linear-gradient(#000 62%, transparent 100%); } .froga-nut-gon { display: block; /* Đừng để nút đè lên phần nội dung mờ dần: ở khối công cụ tính tiết kiệm nó rơi đúng lên thanh trượt, bấm nút là trượt nhầm. */ margin: 10px auto 0; cursor: pointer; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 14px; color: #23773C; background: #FFFFFF; border: 1.5px solid #BBD9B9; border-radius: 999px; padding: 11px 24px; min-height: 44px; box-shadow: 0 2px 10px rgba(30, 59, 39, .08); } .froga-nut-gon:hover { background: #E7F2E4; } .froga-nut-gon::after { content: ' ▾'; } .froga-gon-boc[data-mo] .froga-nut-gon::after { content: ' ▴'; } /* 320px ≈ một phần ba màn hình máy tính: đủ thấy tiêu đề, nhãn và vài dòng đầu để biết khối nói gì, chưa đủ để chiếm chỗ. Đo 05/09/2026: để 420px thì riêng trang Cẩm nang dài thêm 1.300px so với mức này. */ @media (max-width: 700px) { :root { --froga-cao-gon: 300px; } } /* ========================================================================== LƯỢT LÀM LẠI BẢN ĐIỆN THOẠI — 06/09/2026 ========================================================================== Anh Mừng: "bản mobile tôi chưa ưng lắm, check và làm lại." Đo lại bằng Chrome THẬT ở khổ 430×932 (do-dac/chup-mobile.py và do-dac/soi.py) chứ không nhìn khung xem trong ứng dụng — khung đó có lúc trả innerWidth = 0 và không cuộn thật, đo ra số vô nghĩa. ⚠️ Hai cái bẫy đã cắn phải trong lượt này, ghi lại kẻo lần sau mất công: 1. `Page.captureScreenshot` với `captureBeyondViewport` ép trình duyệt dàn lại trang ở một khung nhìn cao bất thường. Thư viện ảnh sản phẩm (flexslider) tính lại theo khung giả đó và ra ảnh chính chỉ 170px — trong khi đo ở đúng 430×932 thì nó là 396px, hoàn toàn bình thường. Suýt đi "sửa" một thứ không hỏng. 2. `html{scroll-behavior:smooth}` ở thiet-ke.css làm mọi lệnh cuộn chạy hoạt ảnh; ảnh chụp bắt giữa chừng nên ra khung trắng trơn giữa trang. Cũng suýt thành "lỗi khoảng trống lớn". Kết luận đã kiểm: KHÔNG trang nào tràn ngang thật (scrollWidth = 430 khắp nơi) và KHÔNG có khoảng trống dọc nào. Những gì sửa dưới đây là chuyện khác: chữ nhỏ, nút khó bấm, khối cuộn không ai biết là cuộn được, và vài chỗ lệch nhau trông thiếu chỉn chu. ========================================================================== */ @media (max-width: 700px) { /* ---------------------------------------------------------------------- 1. SÀN CỠ CHỮ ---------------------------------------------------------------------- Đếm được 32 nút chữ dưới 14px ở trang chủ và 61 ở /cam-nang/, thấp nhất 11px ("BẮT ĐẦU TẠI ĐÂY", tên chuyên mục). Trên màn hình cầm tay, 11px là nheo mắt. Cỡ chữ nằm trong thuộc tính `style` của từng thẻ (bản thiết kế sinh ra thế), nên luật ngoài phải `!important` mới đè được. Đổi ở bộ dựng thì đổi cả khổ máy tính — mà ở đó 11px là cố ý, nhãn nhỏ chữ hoa giãn chữ là một nét nhận diện. Vì vậy chỉ nâng trong khổ hẹp. Nâng đúng một bậc rưỡi, không nâng vống: chữ vẫn ra chữ phụ, chỉ là đọc được. Cặp `11px`/`11.5px` không đụng nhau vì chuỗi khớp có kèm "px". ---------------------------------------------------------------------- */ /* 10px và 10.5px thêm 06/09/2026 lượt 6: viên nhãn số lượng trên chín thẻ quà tặng ("1 cái", "Bộ 7 cái") viết 10.5px — cỡ nhỏ nhất còn sót lại toàn site, lượt đầu bỏ sót vì bảng này liệt kê từng cỡ một. */ [style*="font-size:10px"] { font-size: 12px !important; } [style*="font-size:10.5px"] { font-size: 12px !important; } [style*="font-size:11px"] { font-size: 12.5px !important; } [style*="font-size:11.5px"] { font-size: 12.5px !important; } [style*="font-size:12px"] { font-size: 13px !important; } [style*="font-size:12.5px"] { font-size: 13.5px !important; } [style*="font-size:13px"] { font-size: 14px !important; } [style*="font-size:13.5px"] { font-size: 14px !important; } /* ---------------------------------------------------------------------- 2. VÙNG CHẠM 44px ---------------------------------------------------------------------- Lớp `.froga-cham-nho` do theme-src/mobile.php gắn lúc chạy cho những liên kết HÀNH ĐỘNG đứng riêng mà cao dưới 44px — xem ghi chú trong tệp đó về việc vì sao phải đo lúc chạy chứ không gắn sẵn trong khuôn. ---------------------------------------------------------------------- */ .froga-cham-nho { display: inline-flex; align-items: center; min-height: 44px; } /* Hàng liên kết chân trang: năm mục cao 18px nằm sát nhau. Cho mỗi mục một khoảng đệm dọc và giãn hàng ra, kẻo bấm "Đổi trả" lại trúng "Bảo hành". */ footer div[style*="flex-wrap:wrap"] { gap: 4px 18px !important; } /* ---------------------------------------------------------------------- 3. DÒNG NHẮC CUỘN NGANG — canh cùng mép với mọi thứ khác ---------------------------------------------------------------------- Đo được các khối nội dung ở mép trái 17px, riêng `.froga-quet` và hàng tiêu đề ở 24px. Lệch 7px thì không ai gọi tên được, nhưng đọc dọc trang thì thấy "có cái gì đó không thẳng". ---------------------------------------------------------------------- */ .froga-quet, .froga-hang-tieu-de { margin-left: 0; padding-left: 0; } .froga-quet--tu-dong { margin-top: 4px; } /* ---------------------------------------------------------------------- 4. CẶP NÚT PHẢI BẰNG NHAU ---------------------------------------------------------------------- Đo ở trang chủ: "Khám phá sản phẩm" 185×44 và "Từ Việt Nam ra toàn cầu" 239×54 — xếp chồng nhau mà lệch cả bề ngang lẫn chiều cao. Ở trang sản phẩm: "Thêm vào giỏ hàng" 197×44 và "Mua ngay" 126×42. Hai nút cạnh nhau mà không bằng nhau thì trông như chưa làm xong. ---------------------------------------------------------------------- */ /* `align-items` phải có !important: thẻ bọc mang sẵn `align-items:center` viết thẳng trong thuộc tính style, mà kiểu nội tuyến thì luật ngoài không có !important sẽ thua. Đo được: hai nút cao bằng nhau (52px) mà bề ngang vẫn 185 và 239 vì cột flex chưa kéo giãn. */ .froga-nut-doi { display: flex; flex-direction: column; gap: 10px; align-items: stretch !important; } .froga-nut-doi > a { /* KHÔNG dùng `width:100%`: hai nút có `padding:14px 30px` viết thẳng trong thuộc tính style, mà hộp mặc định là content-box — 100% + 60px đệm cho ra 456px, tràn khỏi màn 430px. Đo được đúng vậy ở lượt đầu. `align-items:stretch` của khung cha đã lo phần bằng nhau rồi; việc còn lại chỉ là đổi cách tính hộp và ép cùng một chiều cao. */ box-sizing: border-box; width: auto; min-height: 52px; padding-top: 0 !important; padding-bottom: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; text-align: center; white-space: normal; } /* Hai nút mua ở trang sản phẩm: xếp CHỒNG, mỗi nút rộng hết khung. Để cạnh nhau thì mỗi nút chỉ còn 171px, và "Thêm vào giỏ hàng" vỡ hai dòng nên cao 60px trong khi "Mua ngay" cao 48px — hai nút cạnh nhau mà lệch hẳn một khấc. Xếp chồng thì cả hai một dòng chữ, cùng chiều cao. */ .froga-woo form.cart { align-items: stretch !important; } .froga-woo form.cart button.single_add_to_cart_button, .froga-woo form.cart .froga-mua-ngay, .froga-woo form.cart a.froga-mua-ngay { box-sizing: border-box; flex: 1 1 100% !important; min-width: 0; min-height: 52px !important; padding-top: 0 !important; padding-bottom: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; white-space: normal; } /* ---------------------------------------------------------------------- 5. CHÚ ẾCH NỔI — tắt ở khổ điện thoại ---------------------------------------------------------------------- Nó là thẻ `position:fixed` 68×78 đậu vĩnh viễn ở góc phải dưới. Trên màn 430px, đo được nó đè đúng lên khối "Bộ 3 · một chu trình rửa hoàn chỉnh" ở đầu trang chủ; cuộn tiếp thì nó đè lên thứ khác — một thứ trang trí che nội dung suốt cả phiên. Bong bóng thoại đã bỏ từ 04/09 cũng vì lý do y hệt; đây là bước tiếp. Chú ếch vẫn còn nguyên ở khổ máy tính, nơi có chỗ cho nó đứng. MUỐN BẬT LẠI: xoá đúng khối này. ---------------------------------------------------------------------- */ .mascot-noi { display: none !important; } } /* ========================================================================== LƯỢT 2 — ba chỗ bố cục còn giữ nguyên cách dàn của máy tính ========================================================================== Đo 06/09/2026 ở 430×932 bằng do-dac/soi.py. ========================================================================== */ @media (max-width: 700px) { /* 1. Ảnh hộp sản phẩm bị cắt cụt đầu và chân. Bộ thiết kế có luật `[data-rail] img { height:148px !important }` — hợp với thẻ ảnh ngang, nhưng ô ảnh của thẻ sản phẩm cao 250px, nên ảnh bị ép xuống 148px với object-fit:cover: hộp mất đỉnh, mất đáy, lại chừa hơn 100px nền kem trống bên dưới. Đo được ở cả ba thẻ "Bộ ba chủ lực". */ [data-rail] div[style*="height:250px"] img, [data-rail] div[style*="height:240px"] img { height: 100% !important; object-fit: contain !important; } /* 2. Bốn thẻ "vấn đề → Froga" ở trang chủ giữ nguyên lưới hai cột: mỗi cột còn 198px, chữ vỡ vụn. Xuống một cột, và đổi vạch ngăn từ dọc sang ngang cho đúng hướng đọc mới. */ #van-de div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; } #van-de div[style*="border-right:1px solid #E4DDC9"] { border-right: 0 !important; border-bottom: 1px solid #E4DDC9; } /* 3. Hai lưới của bản máy tính còn nguyên ở khổ hẹp. • Ba thẻ "Cam kết 3 KHÔNG" khai `auto 1fr auto` — ba cột — nhưng bên trong chỉ có HAI ô, nên cột thứ ba rỗng vẫn ăn 22px khe cộng phần chia của nó: cột chữ tụt còn 132px. Bỏ cột thừa, giữ hai cột thật (số tròn bên trái, chữ bên phải). • Khối "Đơn vị chủ quản" là `
` khai cứng `1fr 1fr`, ở 430px cho hai cột 215px. Xuống một cột. Bám vào chính chuỗi trong thuộc tính style vì hai khối này không có id hay lớp nào để gọi tên. */ div[style*="grid-template-columns:auto 1fr auto"] { grid-template-columns: auto 1fr !important; } section[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; gap: 28px !important; } } /* ========================================================================== LƯỢT 3 — dải kêu gọi cuối trang bị tràn khỏi màn hình ========================================================================== Đo 06/09/2026: ở /cam-nang/, nút "Xem sản phẩm" nằm tới x=477 trong khung 430px và KHÔNG có khối cuộn nào bọc nó — tức là bấm không tới được. Dải này là một hàng flex `justify-content:space-between` không cho xuống dòng: cột chữ bên trái giữ chỗ, cụm nút bên phải bị đẩy ra ngoài. Ở khổ điện thoại thì hàng "chữ một bên, nút một bên" luôn phải xuống dòng. ========================================================================== */ @media (max-width: 700px) { section div[style*="justify-content:space-between"] { flex-wrap: wrap !important; } /* Cụm nút xuống dòng rồi thì cho nó rộng hết khung, đừng để hai nút dính nhau lệch bên phải. */ section div[style*="justify-content:space-between"] > div[style*="flex:none"] { flex: 1 1 100% !important; } } /* ========================================================================== LƯỢT 4 — nhãn ô nhập ở đường mua, và ảnh quà tặng ========================================================================== Đo 06/09/2026: nhãn các ô nhập trên trang Thanh toán và Giỏ hàng (HỌ VÀ TÊN, SỐ ĐIỆN THOẠI, ĐỊA CHỈ…) đặt 10,5px — cỡ chữ NHỎ NHẤT toàn site, mà lại nằm đúng bước khách đang gõ thông tin để trả tiền. Trên màn hình cầm tay, đọc nhãn ô nhập là việc bắt buộc chứ không phải trang trí. Nhãn in hoa có giãn chữ 1,1px vốn là dấu nhận biết chung với web áo trùm; giữ nguyên kiểu, chỉ nâng cỡ ở khổ hẹp. ========================================================================== */ @media (max-width: 700px) { .froga-woo #customer_details .form-row > label, .froga-woo .woocommerce-shipping-fields .form-row > label, .froga-woo .froga-nhan, .froga-tam-tinh .froga-nhan, .froga-woo table.cart td.product-name::before, .froga-woo table.shop_table td::before { font-size: 12.5px !important; letter-spacing: 0.9px; } } /* ========================================================================== LƯỢT 5 — trang Cửa hàng không được là một dải vuốt ========================================================================== Đo 06/09/2026 ở 430px: cả 8 sản phẩm nằm trong MỘT dải cuộn ngang (scrollWidth 2.505px, mỗi thẻ `flex: 0 0 76%` = 303px). Mỗi màn hình thấy 1,3 thẻ, muốn xem hết phải quẹt bảy lần. Dải vuốt hợp với khối "ba món nổi bật" ở trang chủ — nơi khách chỉ liếc qua. Trang Cửa hàng thì ngược lại: đó là chỗ người ta vào để xem HẾT. Trên trang này, cuộn dọc là đúng việc. Ô ảnh hạ từ 240px xuống 200px: một cột thì tám thẻ đã dài 4.600px, bớt được 320px mà ảnh vẫn to hơn hẳn lúc nằm trong dải vuốt. Chỉ đụng trang Cửa hàng và trang danh mục — các dải vuốt khác giữ nguyên. ========================================================================== */ @media (max-width: 700px) { .post-type-archive-product [data-rail], .tax-product_cat [data-rail] { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; overflow-x: visible !important; margin-inline: 0 !important; padding-inline: 0 !important; } .post-type-archive-product [data-rail] > *, .tax-product_cat [data-rail] > * { flex: none !important; } /* Dòng nhắc "Quẹt ngang" của bản thiết kế: không còn gì để quẹt nữa. */ .post-type-archive-product [data-quet], .tax-product_cat [data-quet] { display: none !important; } .post-type-archive-product [data-rail] div[style*="height:240px"], .tax-product_cat [data-rail] div[style*="height:240px"] { height: 168px !important; } /* Thẻ hẹp ~190px thì phải gọn lại: bỏ tên tiếng Anh và câu mô tả, giữ nhãn vai trò, tên, giá và nút mua — bốn thứ người lướt danh mục cần để chọn. Phần còn lại đã có đủ ở trang sản phẩm. Hai khối này không có lớp riêng nên bám vào chính chuỗi kiểu của chúng. */ .post-type-archive-product [data-nhom] div[style*="font-size:13px;font-weight:700;color:#5F6B58"], .tax-product_cat [data-nhom] div[style*="font-size:13px;font-weight:700;color:#5F6B58"], .post-type-archive-product [data-nhom] div[style*="font-size:14.5px;line-height:1.55"], .tax-product_cat [data-nhom] div[style*="font-size:14.5px;line-height:1.55"] { display: none !important; } /* Hàng giá + nút: xếp dọc cho vừa cột hẹp, nút rộng hết thẻ. */ .post-type-archive-product [data-nhom] div[style*="margin-top:auto"], .tax-product_cat [data-nhom] div[style*="margin-top:auto"] { flex-direction: column; align-items: stretch !important; gap: 8px !important; } .post-type-archive-product [data-nhom] .froga-the-nut, .tax-product_cat [data-nhom] .froga-the-nut { width: 100%; justify-content: center; } } /* ========================================================================== LƯỢT 6 — soi lại bằng ảnh chụp thật, 06/09/2026 ========================================================================== */ /* -------------------------------------------------------------------------- 1. Đoạn dẫn CĂN GIỮA xuống 4–6 dòng thì các dòng dài ngắn so le -------------------------------------------------------------------------- Bản thiết kế bọc mỗi đoạn dẫn trong `div[style*="text-align:center"]` với `max-width:var(--froga-doan)`. Ở khổ máy tính đoạn đó gọn hai dòng nên căn giữa đẹp; ở 430px nó dài 4–6 dòng, dòng cuối còn trơ ra một hai chữ. KHÔNG đổi sang căn trái: căn trái dưới một tiêu đề căn giữa nhìn lệch hẳn. `text-wrap: balance` để trình duyệt tự chia cho các dòng gần đều nhau — đúng thứ cần, và trình duyệt cũ không hiểu thì rơi về cách ngắt như cũ, không hỏng gì. */ @media (max-width: 700px) { div[style*="text-align:center"] > h1, div[style*="text-align:center"] > h2, div[style*="text-align:center"] > h3, div[style*="text-align:center"] > p { text-wrap: balance; } } /* -------------------------------------------------------------------------- 2. Thẻ NẰM NGANG ở dải "Khi bạn cần nhiều hơn" cắt nát ảnh sản phẩm -------------------------------------------------------------------------- Thẻ dựng `display:flex` với cột ảnh `width:clamp(120px,34%,220px)` và `object-fit:cover`. Ở 430px cột ảnh chỉ còn 120px mà thẻ cao ~700px vì chữ xuống nhiều dòng — ảnh hộp sản phẩm bị xén còn một dải dọc, đọc không ra là hộp gì. Đo được 06/09/2026: ảnh hiện 120×700. Ở khổ hẹp xếp dọc lại: ảnh nằm trên, cao vừa phải, `contain` để thấy trọn hộp. Bám vào `.froga-truot--rong` (lớp của dự án, ổn định) chứ đừng bám `.x6` — đó là lớp do bộ thiết kế sinh, mỗi lần giao bộ mới là đổi. */ @media (max-width: 700px) { .froga-truot--rong > div[style*="display:flex"] { flex-direction: column !important; } .froga-truot--rong > div[style*="display:flex"] > div[style*="flex:none"] { width: auto !important; height: 190px !important; } .froga-truot--rong > div[style*="display:flex"] > div[style*="flex:none"] > img { object-fit: contain !important; /* border-box vì ảnh mang `height:100%` viết thẳng trong thẻ: để content-box thì 10px đệm CỘNG THÊM vào 190px, ảnh cao 210 tràn khỏi ô. Đo được đúng 210px ở lượt trước. */ box-sizing: border-box; padding: 10px; } } /* -------------------------------------------------------------------------- 3. Ảnh thẻ sản phẩm trang Cửa hàng: `cover` xén mất đầu chai -------------------------------------------------------------------------- Ô ảnh ở khổ hẹp chỉ còn cao 168px mà ảnh chụp sản phẩm là ảnh dọc, nên `cover` cắt mất nắp chai và phần trên hộp — thấy rõ ở thẻ Kitchen Care và Laundry Care. Nền ô đã là màu kem của bộ nhận diện nên `contain` không để lại viền lạ. */ @media (max-width: 700px) { .post-type-archive-product [data-rail] div[style*="height:240px"] > img { object-fit: contain !important; padding: 8px; } } /* -------------------------------------------------------------------------- 4. Đường dẫn phân cấp của WooCommerce 11,5px -------------------------------------------------------------------------- `nav.woocommerce-breadcrumb` do WooCommerce in ra, không mang style viết thẳng trong thẻ — nên bảng sàn cỡ chữ ở trên (bám theo chuỗi `style*=`) không với tới. Đây là chỗ chữ nhỏ nhất còn lại trên trang một sản phẩm. */ @media (max-width: 700px) { .froga-woo nav.woocommerce-breadcrumb, .froga-woo nav.woocommerce-breadcrumb a { font-size: 12px !important; } /* Soi 06/09/2026: bốn mắt xích in hoa giãn 1,1px chiếm HAI dòng 60px ngay đầu trang sản phẩm. Một dòng, cắt "…" ở cuối, giãn chữ vừa phải. */ .froga-woo nav.woocommerce-breadcrumb { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .5px; line-height: 1.6; margin-bottom: 14px; } } /* Nút "Giỏ hàng" vàng ở đầu trang (06/09/2026). hover.css gộp luật :hover của mọi khuôn theo tên lớp, mà lớp .x1 ở trang giỏ hàng là một nút KHÁC (xanh) và luật ấy nằm cuối tệp nên thắng — rê chuột vào nút vàng thành xanh chữ trắng, còn xe đẩy vẫn nâu. Chốt riêng theo href, không thuộc @media. */ header a.x1[href="/gio-hang/"]:hover { background: #F5B920 !important; color: #4A3505 !important; } /* ========================================================================== Soát bản điện thoại 06/09/2026 (tối) — 16 trang chụp thật ở 430px ========================================================================== Mỗi luật dưới đây ứng với một lỗi NHÌN THẤY trên ảnh chụp, ghi kèm. Phần không cần @media nằm cuối woo.css cùng ngày. ========================================================================== */ @media (max-width: 700px) { /* 1. Dải ba bước Giỏ hàng · Thanh toán · Hoàn tất: ba mục to, gãy hai hàng. Gọn lại, một hàng. */ .froga-buoc { flex-wrap: nowrap; gap: 6px 12px; margin-bottom: 18px; } .froga-buoc li { gap: 6px; } .froga-buoc-so { width: 20px; height: 20px; font-size: 11px; } .froga-buoc-ten { font-size: 10.5px; letter-spacing: .5px; white-space: nowrap; } /* 2. Đường dẫn phân cấp giỏ / thanh toán: nhỏ hơn một chút cho vừa dòng. */ .froga-duong-mua { font-size: 11px; letter-spacing: .6px; } .froga-duong-mua a::after { margin: 0 6px; } /* 3. Bảng đơn ở trang thanh toán: các hàng tbody là block nên bảng CO lại còn ~60% bề rộng, trong khi tfoot vẫn giăng hết; nhãn "Thành tiền" dính vào số. Cho bảng, tbody, tfoot cùng rộng 100%; mỗi hàng tổng là một hàng flex nhãn trái - số phải. */ .froga-woo table.froga-bang-don, .froga-woo table.froga-bang-don tbody, .froga-woo table.froga-bang-don tfoot { display: block; width: 100%; } .froga-woo table.froga-bang-don tbody td { gap: 12px; } .froga-woo table.froga-bang-don tbody td::before { flex: none; } .froga-woo table.froga-bang-don tbody td > *:not(:first-child) { margin-left: 6px; } .froga-woo table.froga-bang-don tbody td.product-total { text-align: right; } .froga-woo table.froga-bang-don tfoot tr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid #F0EADA; } .froga-woo table.froga-bang-don tfoot tr:first-child { border-top: 0; } .froga-woo table.froga-bang-don tfoot th, .froga-woo table.froga-bang-don tfoot td { display: block; padding: 0 !important; border: 0 !important; } .froga-woo table.froga-bang-don tfoot td { text-align: right; } .froga-woo table.froga-bang-don tfoot tr.froga-vat-hang { display: block; } .froga-woo table.froga-bang-don tfoot .order-total th, .froga-woo table.froga-bang-don tfoot .order-total td { border-top: 0 !important; padding-top: 0 !important; } .froga-woo table.froga-bang-don tfoot tr.order-total { border-top: 2px solid #E4DDC9; padding-top: 14px; } .froga-woo table.froga-bang-don tbody td { justify-content: flex-start; } .froga-woo table.froga-bang-don tbody td::before { margin-right: auto; } /* 4. Nhãn cách thanh toán in hoa giãn chữ gãy hai dòng ("THANH TOÁN KHI NHẬN HÀNG (COD)"). Chữ thường, cỡ đọc được. */ .froga-woo ul.wc_payment_methods li.wc_payment_method label { text-transform: none; letter-spacing: 0; font-size: 14.5px !important; } /* 5. Tra cứu đơn: hai ô Mã đơn / Email đứng cạnh nhau, chữ gợi ý bị cắt ("Tìm thấy trong em"). Xếp dọc. */ .froga-woo form.track_order .form-row-first, .froga-woo form.track_order .form-row-last { width: 100%; float: none; } /* 6. Thẻ "Dùng thế nào" ở trang sản phẩm: ảnh gốc chỉ 200px (có vòng cung xanh vẽ sẵn ở mép phải) bị kéo ngang 396×190 rồi cắt — vừa nhoè vừa lộ một vệt cong xanh. Xếp ngang: ảnh vuông 96px bên trái, số + chữ bên phải, ảnh không bị phóng. */ .froga-buoc-dung { display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto 1fr; column-gap: 14px; align-items: start; padding: 14px 16px 14px 14px; border-radius: 4px 4px 14px 14px; } .froga-buoc-dung img { grid-row: 1 / 3; width: 96px; height: 96px; border-radius: 12px; } .froga-buoc-dung .froga-buoc-so { margin: 0 0 6px; width: 30px; height: 30px; font-size: 13.5px; } .froga-buoc-dung .froga-buoc-chu { padding: 0; font-size: 14.5px; } /* Thẻ không ảnh (Kitchen Care, Laundry Care): số + chữ xếp ngang, không chừa cột ảnh trống bên trái (thấy 06/09/2026 khuya). */ .froga-buoc-dung.froga-buoc-khong-anh { display: flex; gap: 12px; align-items: flex-start; } .froga-buoc-dung.froga-buoc-khong-anh .froga-buoc-so { margin: 0; flex: none; } /* Ba viên ở thẻ sản phẩm trang chủ (froga-vien-sp): thẻ rộng 257px, ba viên 13.5px tổng 315–382px nên luôn rớt hai hàng (anh Mừng chỉ 07/09/2026). Ép một hàng: chữ 10.5px, đệm hẹp. !important vì mobile.php ghi lại style lúc chạy. */ .froga-vien-sp { flex-wrap: nowrap !important; gap: 4px !important; } .froga-vien-sp .froga-vien { white-space: nowrap; flex: 0 1 auto; min-width: 0; font-size: 10.5px !important; padding: 4px 6px !important; } /* Bài liên quan (bài cẩm nang): liên kết đứng riêng được mobile.php nâng lên 44px (inline-flex), mũi tên ::before đặt absolute ở đỉnh nên lệch lên trên chữ (thấy 06/09/2026 khuya). Cho li thành flex, mũi tên là mục flex canh giữa. */ .froga-lien-quan li { display: flex; align-items: center; padding-left: 0; } .froga-lien-quan li::before { position: static; margin-right: 8px; flex: none; } /* 7. Chân trang: hàng liên kết chính sách có mục cao 44px (froga-cham-nho) xen mục cao 18px nên "Điều khoản" tụt xuống so với các mục còn lại. Cho cả hàng cùng một chiều cao chạm. */ footer div[style*="flex-wrap:wrap"] { align-items: center; row-gap: 0 !important; } footer div[style*="flex-wrap:wrap"] a { display: inline-flex; align-items: center; min-height: 44px; } /* 8b. Trang 404: hàng ba liên kết cuối lệch nhau vì mục cao 44px xen mục 18px. */ .error404 div:has(> a[href="/huong-dan/"]) { align-items: center; } .error404 div:has(> a[href="/huong-dan/"]) a { display: inline-flex; align-items: center; min-height: 44px; } /* 8. Trang chủ: dưới thẻ combo là 80px trống trước "Khác biệt của Froga" (padding-bottom 24 + margin-top 56) — thừa ở khổ hẹp. */ #san-pham { padding-bottom: 8px !important; } #khac-biet { margin-top: 24px !important; } /* 10. Anh Mừng 06/09/2026 tối: ba viên "Hoả tốc 2h · Miễn phí giao · Đổi trả" ở trang sản phẩm phải MỘT dòng cả trên điện thoại (trước chỉ ép ở máy tính). Cột chữ rộng ~356px: chữ 10px, đệm 4px, khe 5px, ba viên chia đều, không bao giờ xuống dòng. */ .froga-woo .froga-tin-cay-sp { flex-wrap: nowrap !important; gap: 5px; } /* flex 1 1 auto chứ không phải 1 1 0: chia đều ba phần thì viên "Miễn phí giao toàn quốc" (dài nhất) bị cắt chữ — đo 114px/viên, viên giữa tràn. */ .froga-woo .froga-tin-cay-sp span { flex: 1 1 auto; min-width: 0; font-size: 10px; letter-spacing: 0; padding: 5px 5px; } /* 11. Cảnh đường nhảy ở đầu trang Hành trình: SVG co theo bề rộng (396px ≈ 0,7 cỡ vẽ) nên chữ trong cảnh phải đặt to hơn để ra ≥ 12px thật. */ .froga-ht-ten { font-size: 21px; } .froga-ht-phu { font-size: 16px; } .froga-ht-so { font-size: 18px; } .froga-ht-dao { font-size: 14.5px; } .froga-ht-canh { width: min(100%, 400px); } /* Bốn thẻ bậc thang ở khổ hẹp xếp dọc, không còn là bậc thang: bỏ min-height theo bậc (186/228/270/312px) và ô 104px chừa cho con ếch trên mỗi cột. */ /* Chọn theo lớp gắn lúc build (hanh-trinh.mjs), KHÔNG theo [style*=...]: mobile.php sửa style lúc chạy nên chuỗi trong thuộc tính bị trình duyệt ghi lại có khoảng trắng và rgb(), bản đầu bắt bằng [style*="border-top:8px solid"] trượt ở điện thoại thật dù đo bằng CDP thấy ăn. */ #thang-bac .froga-bac-the { min-height: 0 !important; } #thang-bac .froga-bac-ech { min-height: 0 !important; } /* 9. Bản đánh giá sao Woo đặt cạnh giá to ở trang sản phẩm: giữ dòng riêng. */ .froga-woo div.product .woocommerce-product-rating { margin-bottom: 8px; } } /* Ba viên ở thẻ sản phẩm trang chủ, khổ rộng: thẻ 330px, ba viên Daily Salt ở 12.5px/đệm 11px tổng 360px nên rớt hàng. Một hàng cho cả ba thẻ (07/09/2026). */ @media (min-width: 701px) { /* chỉ khổ rộng, kẻo đè luật 10.5px của khổ hẹp ở trên */ .froga-vien-sp { flex-wrap: nowrap !important; gap: 6px !important; } .froga-vien-sp .froga-vien { white-space: nowrap; flex: 0 1 auto; min-width: 0; font-size: 12px !important; padding: 5px 9px !important; } /* !important: style trong thẻ thắng lớp */ } /* Huy hiệu số món trên nút Giỏ hàng: bản vẽ để place-items:center mà không có display:grid, nên span là inline, height 20px không ăn và chữ số lệch khỏi tâm vòng tròn (anh Mừng chỉ sáng 07/09/2026). display:none trong style vẫn thắng khi giỏ trống; khi có hàng, PHP và các script bỏ display đi thì luật này ăn. */ [data-so-gio] { display: grid; line-height: 1; box-sizing: border-box; } /* Logo tròn bị cắt chữ FROGA (anh Mừng báo 07/09/2026, trang Về Froga). Nguyên nhân: border-radius trên chính có đệm thì phần ảnh bị cắt theo VÒNG TRÒN TRONG (bán kính trừ đệm) nội tiếp ô nội dung, nên hai góc dưới (chữ FROGA) luôn văng ra ngoài dù đệm bao nhiêu. clip-path cắt theo hộp ngoài, ảnh nằm gọn trong ô nội dung không bị đụng. Mất bóng đổ (clip-path cắt luôn bóng), chấp nhận. */ img[style*="border-radius:50%"][style*="padding"] { border-radius: 0 !important; clip-path: circle(50% at 50% 50%); } /* Anh Mừng 07/09/2026: hai nút Giỏ hàng / Mua ngay trên đầu trang điện thoại "hơi lớn". Kiểu nội tuyến (14–15px, đệm 9–10px) là cỡ desktop; ở 430px thu về 13px, đệm 7–8px, nút menu 38px. */ @media (max-width: 700px) { /* .froga-cham-nho ép min-height 44px và hàng đầu trang kéo nút cao bằng logo (60px). 40px là đủ chạm. */ header a.x1, header a.x2, header #froga-ham { min-height: 40px !important; height: 40px !important; align-self: center !important; box-sizing: border-box !important; } header a.x1 { font-size: 13px !important; padding: 0 11px !important; gap: 6px !important; border-radius: 10px !important; } header a.x2 { font-size: 13px !important; padding: 0 14px !important; display: inline-flex !important; align-items: center !important; border-radius: 10px !important; box-shadow: none !important; } header a.x1 svg { width: 16px; height: 16px; } #froga-ham { width: 38px !important; height: 38px !important; } } /* ========================================================================== Cỡ chữ điện thoại (07/09/2026, anh Mừng: "size chữ bản mobile hơi lớn, check toàn web") Đo ở 430px: tiêu đề trang 29–34px, tiêu đề khối 19–26px, tên thẻ 20px, giá 21–22px, số liệu 25–26px, thân bài 16–17,5px. Đích: tiêu đề trang 25–29, khối 17–20, tên thẻ 16–17, giá 17–18, thân bài 15–16. Cỡ clamp() do sang.mjs hạ cận dưới; cỡ px cố định viết trong thẻ thì hạ ở đây theo bảng ×0,85 (thẻ inline chỉ thua !important). ========================================================================== */ @media (max-width: 700px) { [style*="font-size:26px"] { font-size: 22px !important; } [style*="font-size:25px"] { font-size: 21px !important; } [style*="font-size:24px"] { font-size: 20.5px !important; } [style*="font-size:23px"] { font-size: 19.5px !important; } [style*="font-size:22px"] { font-size: 19px !important; } [style*="font-size:21px"] { font-size: 18px !important; } [style*="font-size:20px"] { font-size: 17px !important; } [style*="font-size:19px"] { font-size: 16.5px !important; } [style*="font-size:18.5px"] { font-size: 16px !important; } [style*="font-size:18px"] { font-size: 15.5px !important; } [style*="font-size:17.5px"] { font-size: 16px !important; } [style*="font-size:17px"] { font-size: 15.5px !important; } /* lớp WooCommerce và lớp viết tay */ .froga-woo h1.product_title { font-size: 23px !important; } .froga-woo h2 { font-size: 19px !important; } .froga-woo h3 { font-size: 17px !important; } .froga-woo .summary .price bdi, .froga-woo .summary .price .woocommerce-Price-amount { font-size: 21px !important; } .froga-woo ul.products li.product .price .woocommerce-Price-amount, .froga-woo ul.products li.product .price bdi { font-size: 17px !important; } .froga-woo ul.products li.product .woocommerce-loop-product__title { font-size: 16px !important; } body #top h1 { font-size: 28px !important; } /* bản vẽ có #top h1{34px!important} ở ≤720px */ .froga-the-gia, .froga-the-gia .woocommerce-Price-amount, .froga-the-gia bdi { font-size: 17px !important; } /* giá trên thẻ trang chủ */ .froga-woo .summary .price, .froga-woo .summary .price span, .froga-woo .summary .price bdi { font-size: 21px !important; } .froga-so-dem { font-size: 20px !important; } .froga-dt-ten { font-size: 15.5px !important; } .froga-thanh-chot-so, .froga-tt-tong-so { font-size: 18px !important; } .froga-woo .button, .froga-kh-nut, .froga-dl-nut--chinh, .froga-thanh-chot-nut { font-size: 15px !important; } } /* 08/09/2026: dải chữ chạy ngang "Bảo hộ thương hiệu" — hoạt ảnh cuộn dùng `@keyframes frogaChayNguyenTac`. Ban đầu chỉ khai trong