/* ============================================================================= BỐ CỤC ỨNG DỤNG — vỏ trang, menu bên trái, module bán hàng, thanh báo giá neo đáy, và phần thanh toán. Mọi kích thước bám theo thang trong base.css (chữ 14px, nút cao 40px). Nét xanh #31a8ff chỉ xuất hiện ở ĐƯỜNG VIỀN và CHỮ NHẤN — mỗi màn hình chỉ vài nét, đủ để nhận ra màu của web mà không lấn tông tối chủ đạo. ========================================================================== */ /* ---------------------------------------------------------------- VỎ TRANG */ .thanh-tieu-de { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 62px; /* chừa chỗ cho nút nổi ở góc trái */ background: rgba(16, 18, 22, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--vien); } /* Vệt xanh mảnh chạy hết chân thanh tiêu đề — nét nhận diện đầu tiên của web */ .thanh-tieu-de::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, rgba(49, 168, 255, 0), var(--xanh) 22%, rgba(49, 168, 255, .25) 60%, rgba(49, 168, 255, 0)); } .thanh-tieu-de .ten-shop { font-size: 16px; font-weight: 800; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .thanh-tieu-de .ten-shop .cham-xanh { color: var(--xanh); } .khung-noi-dung { max-width: 1120px; margin: 0 auto; padding: 20px 18px calc(var(--cao-thanh-day) + 24px); } .khung-noi-dung.khong-thanh-day { padding-bottom: 36px; } /* Nút nổi chuyển module — góc trên bên trái, trên mọi thứ khác. Viền xanh mảnh sẵn có, sáng hẳn lên khi rê chuột. */ .nut-noi { position: fixed; top: 10px; left: 12px; z-index: 70; width: 40px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: var(--bo); background: var(--the-2); border: 1px solid rgba(49, 168, 255, .45); box-shadow: var(--bong-noi); /* Cùng nhịp .3s với chuyển động trượt của khung menu, để nút và mép khung đi tới đích cùng lúc thay vì nút chạy trước một nhịp. */ transition: background .18s, border-color .18s, left .3s ease; } .nut-noi:hover { background: var(--the-3); border-color: var(--xanh); } /* Bồng bềnh như phao nổi trên mặt nước gợn sóng: nhấp nhô 3 giây (khoảng hai nhịp sóng, lên xuống kèm lắc rất nhẹ và bóng đổ co giãn theo độ cao), rồi đứng im 2 giây, rồi lặp lại mãi. Một vòng 5 giây, 3 giây đầu = 60%. Hiệu ứng đặt ở lớp bọc riêng chứ KHÔNG dùng transform trực tiếp trên .nut-noi để không đụng vào transition left khi nút trượt vào khung menu. */ .nut-noi { animation: bong-benh 5s ease-in-out infinite; } /* Menu đang mở thì nút thành dấu X — lúc đó nó là nút đóng, đứng yên cho chắc tay bấm, không bồng bềnh nữa. */ .nut-noi.menu-dang-mo { animation: none; } @keyframes bong-benh { 0% { transform: translateY(0) rotate(0deg); box-shadow: var(--bong-noi); } 7.5% { transform: translateY(-5px) rotate(-2.2deg); box-shadow: 0 14px 30px rgba(0, 0, 0, .58); } 15% { transform: translateY(-6.5px) rotate(-1deg); box-shadow: 0 16px 34px rgba(0, 0, 0, .6); } 22.5%{ transform: translateY(-2px) rotate(1.6deg); box-shadow: 0 10px 24px rgba(0, 0, 0, .52); } 30% { transform: translateY(2.5px) rotate(2.2deg); box-shadow: 0 5px 16px rgba(0, 0, 0, .46); } 37.5%{ transform: translateY(1px) rotate(1deg); box-shadow: 0 7px 19px rgba(0, 0, 0, .48); } 45% { transform: translateY(-4px) rotate(-1.6deg); box-shadow: 0 13px 28px rgba(0, 0, 0, .56); } 52.5%{ transform: translateY(-2px) rotate(-.6deg); box-shadow: 0 10px 24px rgba(0, 0, 0, .52); } 60% { transform: translateY(0) rotate(0deg); box-shadow: var(--bong-noi); } 100% { transform: translateY(0) rotate(0deg); box-shadow: var(--bong-noi); } } @media (prefers-reduced-motion: reduce) { .nut-noi { animation: none; } } /* Menu đang mở: nút hoá thành dấu X đóng khung, đồng thời trượt sang nằm SÁT MÉP PHẢI bên trong khung menu — vẫn nguyên độ cao cũ. Con số 264px và 80vw phải khớp với chiều rộng .menu-trai bên dưới. */ .nut-noi.menu-dang-mo { left: calc(min(80vw, 264px) - 52px); border-color: var(--vien-sang); } .nut-noi.menu-dang-mo:hover { border-color: var(--do); } .nut-noi .vach { width: 17px; height: 2px; border-radius: 2px; background: var(--chu); transition: transform .22s, opacity .18s; } .nut-noi[aria-expanded="true"] .vach:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nut-noi[aria-expanded="true"] .vach:nth-child(2) { opacity: 0; } .nut-noi[aria-expanded="true"] .vach:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ------------------------------------------------------------- MENU BÊN TRÁI */ .lop-phu { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .6); opacity: 0; visibility: hidden; transition: opacity .22s, visibility .22s; } .lop-phu.mo { opacity: 1; visibility: visible; } .menu-trai { position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; width: min(80vw, 264px); display: flex; flex-direction: column; background: var(--nen-sau); border-right: 1px solid var(--vien); box-shadow: var(--bong-modal); transform: translateX(-100%); transition: transform .3s ease; } .menu-trai.mo { transform: translateX(0); } .menu-trai .menu-dau { padding: 16px 16px 13px; border-bottom: 1px solid var(--vien); /* Vệt xanh ngắn dưới tên shop trong menu */ box-shadow: inset 0 -1px 0 0 transparent; position: relative; } .menu-trai .menu-dau::after { content: ""; position: absolute; left: 16px; bottom: -1px; width: 42px; height: 2px; border-radius: 1px; background: var(--xanh); } .menu-trai .menu-dau .nhan { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--chu-mo); margin-bottom: 3px; } .menu-trai .menu-dau .ten { font-size: 14px; font-weight: 700; } .menu-trai .danh-sach { flex: 1; overflow-y: auto; padding: 10px 8px; } .muc-menu { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 9px 11px; margin-bottom: 2px; border-radius: var(--bo); text-align: left; font-size: 13.5px; font-weight: 500; color: var(--chu-diu); transition: background .16s, color .16s; } .muc-menu:hover { background: var(--the-2); color: var(--chu); } /* Module đang xem — gạch xanh dọc bên trái, đúng kiểu điểm nhấn của web */ .muc-menu.dang-xem { background: var(--the-2); color: var(--chu); font-weight: 600; box-shadow: inset 2px 0 0 var(--xanh); } .muc-menu .bieu-tuong { flex: 0 0 auto; width: 18px; text-align: center; font-size: 13px; opacity: .85; } .muc-menu.dang-xem .bieu-tuong { color: var(--xanh); opacity: 1; } .menu-trai .menu-day { padding: 11px 16px 14px; border-top: 1px solid var(--vien); font-size: 11.5px; color: var(--chu-mo); } /* ------------------------------------------------------- MÀN HÌNH ĐANG NÂNG CẤP */ .man-nang-cap { max-width: 480px; margin: 7vh auto; padding: 32px 24px; text-align: center; background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo-the); box-shadow: var(--bong); } .man-nang-cap .hinh { font-size: 30px; line-height: 1; margin-bottom: 12px; } .man-nang-cap h2 { font-size: 17px; margin-bottom: 8px; } .man-nang-cap p { color: var(--chu-diu); font-size: 13px; margin-bottom: 0; } /* ------------------------------------------------------------ MODULE BÁN HÀNG */ .gioi-thieu { margin-bottom: 18px; } .gioi-thieu h2 { font-size: 20px; margin-bottom: 5px; } /* Gạch xanh ngắn dưới tiêu đề module */ .gioi-thieu h2::after { content: ""; display: block; width: 34px; height: 2px; margin-top: 7px; border-radius: 1px; background: var(--xanh); } .gioi-thieu p { color: var(--chu-diu); font-size: 13px; margin-bottom: 0; } .bang-uu-dai { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 167, 46, .1); border: 1px solid rgba(255, 167, 46, .34); color: var(--cam); font-weight: 600; font-size: 12.5px; } .luoi-sanpham { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; } .the-sanpham { position: relative; display: flex; flex-direction: column; padding: 14px 16px 15px; /* Nền thẻ: xanh đậm ở sát đáy rồi nhạt dần lên. Sản phẩm CHƯA chọn vừa nhạt hơn vừa THẤP hơn — mảng xanh chỉ cao 28px, đúng một nửa mức cũ, nên nó dừng lại quãng giữa nút "Chọn sản phẩm này". Sản phẩm ĐÃ chọn mới hiện đủ độ đậm và dâng lên tới 64px; nhìn lướt qua là biết ngay mình đã lấy những món nào. */ background: linear-gradient(to top, rgba(20, 115, 230, .43) 0, rgba(20, 115, 230, .25) 11px, rgba(20, 115, 230, 0) 28px), var(--the); transition: border-color .18s, transform .18s, box-shadow .18s, background .25s; border: 1px solid var(--vien); border-radius: var(--bo-the); box-shadow: var(--bong); transition: border-color .18s, transform .18s, box-shadow .18s; overflow: hidden; /* Bấm vào bất kỳ khoảng trống nào trong khung cũng là chọn/bỏ chọn sản phẩm */ cursor: pointer; -webkit-tap-highlight-color: transparent; } /* HIỆU ỨNG VÀO MODULE — mỗi thẻ trôi lên từ đúng mép dưới của chính nó (translateY(100%) = trọn một chiều cao thẻ) về vị trí thật. Chỉ chạy khi mới vào module, không chạy lại mỗi lần bấm chọn sản phẩm (xem phần 03). Đường cong cubic-bezier đi nhanh lúc đầu rồi chậm dần về cuối — cảm giác mượt và có đà, khác hẳn kiểu chạy đều tay của ease thường. */ .the-sanpham.cho-troi-len { opacity: 0; transform: translateY(100%); } .the-sanpham.dang-troi-len { opacity: 1; transform: translateY(0); transition: transform 2s cubic-bezier(.16, 1, .3, 1), opacity 1.1s ease-out; } /* Người dùng đã tắt hiệu ứng chuyển động trong hệ điều hành thì hiện thẳng */ @media (prefers-reduced-motion: reduce) { .the-sanpham.cho-troi-len { opacity: 1; transform: none; } } /* Vệt xanh mảnh ở mép trên mỗi thẻ — mờ lúc thường, sáng hẳn khi được chọn */ .the-sanpham::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--xanh), rgba(49, 168, 255, 0) 70%); opacity: .28; transition: opacity .18s; } .the-sanpham:hover { transform: translateY(-1px); box-shadow: var(--bong-noi); } .the-sanpham:hover::before { opacity: .6; } /* Thẻ ĐÃ CHỌN: mảng xanh dâng cao hơn hẳn thẻ chưa chọn — tắt ở 64px thay vì 55px, tức là vừa chớm dưới dòng "Giảm N% chỉ còn" (15px chừa đáy + 40px nút + 12px giãn dưới dòng giá = 67px). Đổi padding đáy, chiều cao nút hay khoảng giãn của dòng giá thì phải tính lại con số này. */ .the-sanpham.da-chon { border-color: var(--xanh); background: linear-gradient(to top, rgba(20, 115, 230, .95) 0, rgba(20, 115, 230, .55) 26px, rgba(20, 115, 230, 0) 64px), var(--the); } .the-sanpham.da-chon::before { opacity: 1; } /* ĐẦU THẺ — ảnh đại diện vuông bên trái, tên và nút xem chi tiết bên phải. Ảnh giữ tỉ lệ 1:1 và không co lại dưới 64px, nên dù tên sản phẩm dài mấy thì khung ảnh vẫn vuông vức. */ .the-sanpham .dau-the { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 4px; } .the-sanpham .than-dau { flex: 1 1 auto; min-width: 0; } .the-sanpham .anh-dai-dien { flex: 0 0 auto; width: 84px; aspect-ratio: 1 / 1; margin: 0; border-radius: 10px; overflow: hidden; background: var(--the-2); border: 1px solid var(--vien); } .the-sanpham .anh-dai-dien img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Khung rỗng lúc chưa có ảnh: nhạt hẳn đi để không tranh chỗ với chữ, nhưng vẫn chiếm đúng khoảng trống mà ảnh thật sẽ chiếm. */ .the-sanpham .anh-dai-dien.trong { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .022) 0 6px, rgba(255, 255, 255, 0) 6px 12px), var(--the-2); border-style: dashed; border-color: var(--vien-sang); opacity: .5; } /* Số thứ tự đóng khung, đứng ngay trước tên trên CÙNG MỘT DÒNG. Dùng inline-flex nên tên dài tự xuống dòng quanh nó như một chữ cái đầu. */ /* Số thứ tự dán SÁT góc trên bên trái của thẻ, không chừa một li khoảng cách, và nằm ĐÈ LÊN ảnh đại diện. Vì nó ra khỏi luồng văn bản nên tên sản phẩm chỉ còn mỗi chữ, giãn dòng đều tăm tắp dù dài bao nhiêu dòng. · góc trên-trái bo 13px = bán kính thẻ 14px trừ 1px viền, nên nó ôm khít đường cong của thẻ thay vì nhô ra ngoài; · pointer-events:none để cú bấm xuyên qua nó xuống thẻ — bấm vào số vẫn là chọn sản phẩm, y như bấm vào chỗ trống của thẻ; · z-index 3 để nằm trên cả ảnh lẫn vệt xanh mép trên, nhưng KHÔNG cản ảnh bồng bềnh phía dưới. */ .the-sanpham .so-tt { position: absolute; top: 0; left: 0; z-index: 3; pointer-events: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 13px 0 10px 0; background: linear-gradient(160deg, var(--xanh-dam), #0d4d9e); border: 0; box-shadow: 2px 2px 10px rgba(0, 0, 0, .5); color: #fff; font-size: 15px; font-weight: 800; line-height: 1; } .the-sanpham.da-chon .so-tt { background: linear-gradient(160deg, #4fb8ff, var(--xanh-dam)); border-color: rgba(255, 255, 255, .3); } @media (max-width: 560px) { .the-sanpham .anh-dai-dien { width: 72px; } } .the-sanpham .ten-sanpham { font-size: 13.5px; font-weight: 600; line-height: 1.45; margin: 0 0 12px; flex: 1; } .the-sanpham .nut-chi-tiet { margin-bottom: 10px; } /* Dòng giá: giá gốc → phần trăm giảm → "chỉ còn" → giá chốt, tất cả trên MỘT hàng, xuống dòng mềm khi thẻ hẹp. */ /* margin-top:auto đẩy CẢ CỤM giá + nút chọn xuống sát đáy thẻ. Các thẻ trong lưới cao bằng nhau nhưng tên sản phẩm dài ngắn khác nhau; không có dòng này thì khoảng trống thừa dồn xuống dưới nút, nút trôi lên giữa thẻ và mảng xanh (vốn tính từ đáy thẻ) không còn khớp với nó nữa. */ .the-sanpham .hang-gia { margin-top: auto; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 7px; margin-bottom: 12px; } /* Giá gốc: màu cam, hơi mờ, nhỏ hơn giá chốt, KHÔNG gạch ngang */ .the-sanpham .gia-goc { font-size: 12.5px; font-weight: 600; color: var(--cam); } .the-sanpham .phan-tram { font-size: 12.5px; font-weight: 700; color: var(--la-dam-net); } .the-sanpham .chi-con { font-size: 12.5px; color: var(--chu-diu); } .the-sanpham .gia-chot { font-size: 19px; font-weight: 800; color: var(--xanh); } /* Nút "Chọn sản phẩm này" lúc chưa chọn — nền ĐẶC để nút nổi hẳn lên trên mảng gradient xanh của thẻ, không bị màu nền ám vào; chữ dùng đúng màu xanh của web. */ .nut-chua-chon { position: relative; /* nằm trên lớp nền của thẻ */ background: var(--the-2); border-color: var(--vien-sang); color: var(--xanh); } .nut-chua-chon:hover:not(:disabled) { background: var(--the-3); border-color: var(--xanh); } /* Nút "Chọn tất cả" — khung riêng ở sát mép trái thanh báo giá, có ô tích. Sáng lên (viền và chữ xanh, ô tích xanh đặc) khi đang chọn đủ mọi sản phẩm. */ .nut-chon-tat-ca { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 13px; border-radius: var(--bo); border: 1px solid var(--vien-sang); background: var(--the-2); color: var(--chu-diu); font-size: 13px; font-weight: 600; transition: .16s; } .nut-chon-tat-ca .o-tich { width: 17px; height: 17px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid var(--vien-sang); background: var(--nen-sau); font-size: 12px; font-weight: 800; line-height: 1; color: transparent; } .nut-chon-tat-ca:hover { border-color: var(--xanh); color: var(--chu); } /* Chưa tích hết thì chữ "Chọn tất cả" nhún nhảy đúng nhịp với nút Mua hàng đứng cạnh — hai lời mời ở cùng một thanh thì phải đập cùng một nhịp, lệch nhau sẽ thành rối mắt. Tích hết rồi thì thôi, không mời nữa. */ .nut-chon-tat-ca:not(.sang) .chu { display: inline-block; transform-origin: center; will-change: transform; animation: nhun-nhay-mua-hang 1.9s ease-in-out infinite; } .nut-chon-tat-ca.sang { border-color: var(--xanh); background: var(--xanh-nen); color: var(--xanh); box-shadow: 0 0 0 1px var(--xanh), 0 0 14px rgba(49, 168, 255, .28); } .nut-chon-tat-ca.sang .o-tich { background: var(--xanh); border-color: var(--xanh); color: #fff; } /* -------------------------------- THÔNG BÁO MỨC GIẢM GIÁ (giữa màn hình) */ .thong-bao-giam { position: fixed; left: 50%; top: 50%; z-index: 480; padding: 16px 30px; border-radius: 999px; background: var(--la); color: #fff; font-size: 21px; font-weight: 800; letter-spacing: .3px; white-space: nowrap; box-shadow: 0 10px 34px rgba(45, 157, 95, .5); pointer-events: none; /* Nhảy xổ ra TO GẤP 1,6 LẦN → thu về cỡ thật thật nhanh → đứng im khoảng một giây → trôi xuống đáy rồi tan. Cú bung đầu tiên phải lớn thì mắt mới bắt được ngay giữa lúc đang nhìn chỗ khác trong trang. */ animation: thong-bao-giam 2.55s cubic-bezier(.22, 1, .36, 1) forwards; } @keyframes thong-bao-giam { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } 8% { opacity: 1; transform: translate(-50%, -50%) scale(1.6); } 16% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 55% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, 46vh) scale(.9); } } @media (max-width: 560px) { .thong-bao-giam { font-size: 18px; padding: 13px 24px; } } @media (prefers-reduced-motion: reduce) { .thong-bao-giam { animation-duration: 2.55s; } } /* -------------------------------------------------- THANH BÁO GIÁ NEO ĐÁY */ .thanh-bao-gia { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 11px 18px; padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px)); background: rgba(22, 25, 30, .97); backdrop-filter: blur(12px); border-top: 1px solid var(--vien-sang); box-shadow: 0 -6px 22px rgba(0, 0, 0, .45); } /* Vệt xanh mảnh ở mép trên thanh — nét nhấn cuối cùng của màn hình bán hàng */ .thanh-bao-gia::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, rgba(49, 168, 255, 0), var(--xanh) 30%, rgba(49, 168, 255, .2) 70%, rgba(49, 168, 255, 0)); } /* Các ô số liệu dồn hết sang PHẢI để "Số tiền cuối cùng" nằm ngay cạnh nút Mua hàng — mắt đọc số rồi bấm luôn, không phải quét ngang cả màn hình. */ .thanh-bao-gia .so-lieu { display: flex; flex: 1 1 300px; flex-wrap: wrap; justify-content: flex-end; text-align: right; gap: 4px 20px; min-width: 0; } .thanh-bao-gia .o-so-lieu { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; } .thanh-bao-gia .nhan { font-size: 10.5px; color: var(--chu-mo); white-space: nowrap; } .thanh-bao-gia .tri { font-size: 13.5px; font-weight: 600; white-space: nowrap; } .thanh-bao-gia .tri.tong { color: var(--xanh); font-weight: 700; } .thanh-bao-gia .tri.giam { color: var(--la); } .thanh-bao-gia .tri.chot { font-size: 19px; font-weight: 800; color: var(--do); } .nut-mua-hang { flex: 0 0 auto; min-height: 42px; padding: 0 22px; font-size: 14px; font-weight: 700; } /* Nút đang bấm được thì nhún nhảy tuần hoàn để kéo mắt về phía chốt đơn: phóng to rồi thu về thật nhanh (khoảng 1/4 giây), đứng im hơn một giây, rồi lặp lại mãi. Nút đang bị khoá thì đứng yên — nhảy múa một nút không bấm được chỉ làm khách bực. */ .nut-mua-hang:not(:disabled) { animation: nhun-nhay-mua-hang 1.9s ease-in-out infinite; transform-origin: center; will-change: transform; } /* Nhịp: nảy ĐÚNG MỘT CÁI (kèm nghiêng nhẹ và quầng đỏ loang ra cho mắt bắt được ngay cả khi nút chiếm trọn bề ngang màn hình điện thoại), rồi đứng im hơn một giây, rồi lặp lại mãi. Trước đây nảy hai cái liền nhau — nhìn lâu mỏi mắt. */ @keyframes nhun-nhay-mua-hang { 0% { transform: scale(1) rotate(0deg); box-shadow: 0 0 0 0 rgba(229, 83, 75, .55); } 7% { transform: scale(1.16) rotate(-1.6deg); box-shadow: 0 0 0 7px rgba(229, 83, 75, .28); } 15% { transform: scale(1) rotate(0deg); box-shadow: 0 0 0 11px rgba(229, 83, 75, 0); } 100% { transform: scale(1) rotate(0deg); box-shadow: 0 0 0 0 rgba(229, 83, 75, 0); } } /* MÀN HÌNH HẸP — xếp lại thành hai tầng thay vì chen nhau trên một dòng: tầng trên : khối số liệu, trải hết bề ngang, căn phải tầng dưới : [ Chọn tất cả ] [ Mua hàng ] — luôn NGANG HÀNG nhau Khối số liệu được kéo lên đầu bằng order:-1 (trong HTML nó đứng sau nút Chọn tất cả), nên hai nút giữ đúng thứ tự trái–phải mà không phải đổi HTML. */ @media (max-width: 560px) { .thanh-bao-gia { gap: 8px 9px; } .thanh-bao-gia .so-lieu { order: -1; flex: 1 1 100%; gap: 2px 14px; justify-content: flex-end; } .nut-chon-tat-ca { flex: 0 1 auto; min-height: 42px; padding: 7px 12px; font-size: 12.5px; } .nut-mua-hang { flex: 1 1 0; min-width: 0; padding: 0 12px; } } /* ------------------------------------------- BẢNG TỔNG KẾT ĐƠN TRONG MODAL */ .tom-tat-don { margin-bottom: 16px; border: 1px solid var(--vien); border-radius: var(--bo); overflow: hidden; } .tom-tat-don .dong-sp { display: flex; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--vien); background: var(--the-2); font-size: 13px; } .tom-tat-don .dong-sp .ten { flex: 1; } .tom-tat-don .dong-sp .gia { white-space: nowrap; font-weight: 600; color: var(--chu-diu); } .tom-tat-don .dong-tong { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; font-size: 13px; background: var(--nen-sau); } .tom-tat-don .dong-tong + .dong-tong { border-top: 1px solid var(--vien); } .tom-tat-don .dong-tong .nhan { color: var(--chu-diu); } /* Dòng chốt tiền — viền trái xanh, số tiền màu cam */ .tom-tat-don .dong-tong.chot { align-items: baseline; background: var(--the-3); box-shadow: inset 2px 0 0 var(--xanh); } .tom-tat-don .dong-tong.chot .nhan { color: var(--chu); font-weight: 700; } .tom-tat-don .dong-tong.chot .tri { font-size: 17px; font-weight: 800; color: var(--cam); } /* --------------------------------------------------- MODAL THANH TOÁN / QR */ .khung-qr { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; margin-bottom: 14px; background: #fff; border: 1px solid var(--vien-sang); border-radius: var(--bo); } .khung-qr.trong { background: var(--the-2); border-style: dashed; } .khung-qr img { width: min(210px, 62vw); height: auto; aspect-ratio: 1 / 1; object-fit: contain; } .khung-qr .dang-tai { display: flex; align-items: center; justify-content: center; width: min(210px, 62vw); min-height: 96px; padding: 8px; font-size: 12.5px; text-align: center; color: var(--chu-diu); } .khung-qr .ghi-chu-qr { margin: 0; font-size: 12px; font-weight: 600; color: #444; text-align: center; } .bang-ck { border: 1px solid var(--vien); border-radius: var(--bo); overflow: hidden; margin-bottom: 4px; } .dong-ck { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; background: var(--the-2); } .dong-ck + .dong-ck { border-top: 1px solid var(--vien); } .dong-ck .noi-dung-dong { flex: 1 1 180px; min-width: 0; } .dong-ck .nhan { display: block; font-size: 10.5px; color: var(--chu-mo); } .dong-ck .tri { font-size: 13.5px; font-weight: 600; word-break: break-word; } .dong-ck .tri.tien { color: var(--cam); font-size: 15px; font-weight: 800; } .nut-sao-chep.da-chep { background: var(--la); border-color: var(--la); color: #fff; } .nut-tai-qr { width: 100%; margin-bottom: 14px; } .loi-nhe { margin: 10px 0 0; padding: 9px 11px; border-radius: var(--bo); background: rgba(229, 83, 75, .1); border-left: 2px solid var(--do); color: var(--do); font-size: 12.5px; } .huong-dan-ck { margin: 12px 0 0; font-size: 12.5px; color: var(--chu-diu); } .huong-dan-ck strong { color: var(--chu); } /* --------------------------------------------------------- TRANG NỘI DUNG */ .noi-dung-van-ban { font-size: 13.5px; } .noi-dung-van-ban h3 { margin-top: 16px; font-size: 14px; } .noi-dung-van-ban p:last-child { margin-bottom: 0; } /* ========================================================================== MÔ TẢ CHI TIẾT SẢN PHẨM (bảng phụ "Chi tiết sản phẩm") Mỗi khối là một thẻ riêng, trôi từ PHẢI qua TRÁI, lần lượt từ trên xuống. Độ trễ do JS gắn thẳng vào style (animation-delay) nên toàn bộ khối tự chạy hết ngay khi bảng mở — khách KHÔNG phải cuộn xuống mới thấy khối bên dưới. Nhịp trôi lấy theo tốc độ chung của web: đường cong cubic-bezier(.16,1,.3,1) giống hiệu ứng thẻ sản phẩm, chỉ ngắn hơn cho hợp không gian một bảng phụ. ========================================================================== */ .mo-ta-sp { font-size: 13.5px; overflow: hidden; } .troi-ngang { animation: troi-tu-phai .85s cubic-bezier(.16, 1, .3, 1) both; } @keyframes troi-tu-phai { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: translateX(0); } } /* Người dùng đã tắt hiệu ứng chuyển động trong hệ điều hành thì hiện thẳng */ @media (prefers-reduced-motion: reduce) { .troi-ngang { animation: none; opacity: 1; transform: none; } } /* ------------------------------------------------------- ĐỈNH: TÊN VÀ GIÁ */ .mo-ta-dinh { padding-bottom: 13px; margin-bottom: 15px; border-bottom: 1px solid var(--vien); } .mo-ta-dinh h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--chu); } .mo-ta-dinh .hang-gia { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0; } .mo-ta-dinh .gia-goc { font-size: 13px; font-weight: 600; color: var(--cam); } .mo-ta-dinh .phan-tram { font-size: 13px; font-weight: 700; color: var(--la-dam-net); } .mo-ta-dinh .chi-con { font-size: 12.5px; color: var(--chu-diu); } .mo-ta-dinh .gia-chot { font-size: 21px; font-weight: 800; color: var(--xanh); } /* --------------------------------------------------------- KHỐI NỘI DUNG */ .khoi-mo-ta { margin-bottom: 13px; padding: 13px 15px; border: 1px solid var(--vien); border-radius: var(--bo-the); background: var(--the-2); } .khoi-mo-ta:last-child { margin-bottom: 0; } .khoi-mo-ta h4 { margin: 0 0 9px; font-size: 13.5px; font-weight: 700; letter-spacing: .2px; color: var(--xanh); } .khoi-mo-ta p { margin: 0; font-size: 13.5px; line-height: 1.72; color: var(--chu-diu); } .khoi-mo-ta p + ul { margin-top: 9px; } .khoi-mo-ta strong { color: var(--chu); font-weight: 700; } .khoi-mo-ta em { color: var(--chu); font-style: italic; } .khoi-mo-ta ul { margin: 0; padding: 0; list-style: none; } .khoi-mo-ta li { position: relative; padding: 8px 0 8px 2px; font-size: 13.5px; line-height: 1.7; color: var(--chu-diu); border-top: 1px solid rgba(255, 255, 255, .045); } .khoi-mo-ta li:first-child { border-top: 0; padding-top: 0; } .khoi-mo-ta li:last-child { padding-bottom: 0; } /* Khẩu hiệu mở đầu — chữ to hơn, viền xanh bên trái, tông sáng nhất khối */ .khoi-khau-hieu { border-color: var(--xanh-mo); border-left: 3px solid var(--xanh); background: linear-gradient(100deg, var(--xanh-nen), rgba(49, 168, 255, 0) 70%), var(--the-2); } .khoi-khau-hieu p { font-size: 14.5px; font-weight: 600; line-height: 1.7; color: var(--chu); } /* Dải nhấn giữa bài — nền xanh nhạt, dùng để chốt một ý bán hàng */ .khoi-noi-bat { border-color: var(--xanh-mo); background: var(--xanh-nen); } .khoi-noi-bat p { color: var(--chu); font-weight: 500; } /* Đoạn văn thường — bỏ khung cho đỡ rối, chỉ chừa khoảng thở */ .khoi-doan { border: 0; background: transparent; padding: 2px 3px; margin-bottom: 15px; } /* Khối cam kết cuối bài — tông xanh lá, tách hẳn khỏi phần quảng bá phía trên */ .khoi-cam-ket { border-color: rgba(45, 157, 95, .4); background: linear-gradient(180deg, rgba(45, 157, 95, .13), rgba(45, 157, 95, .05)); } .khoi-cam-ket h4 { color: var(--la-dam-net); } .khoi-cam-ket li { border-top-color: rgba(45, 157, 95, .18); } @media (max-width: 560px) { .khoi-mo-ta { padding: 12px 13px; } .mo-ta-dinh .gia-chot { font-size: 19px; } } /* ========================================================================== KHU QUÀ TẶNG — cuối module "Trọn bộ sản phẩm VIP cho Lightroom, Photoshop và Thiết kế" ========================================================================== */ /* Nút mời xuống quà, đặt ngay dưới dòng "Chọn càng nhiều càng rẻ…" */ .nut-toi-qua-tang { margin-top: 11px; border-color: rgba(45, 157, 95, .55); background: linear-gradient(180deg, rgba(45, 157, 95, .2), rgba(45, 157, 95, .09)); color: var(--la-dam-net); font-weight: 700; } .nut-toi-qua-tang:hover { border-color: var(--la-dam-net); background: rgba(45, 157, 95, .28); } .khu-qua-tang { margin-top: 22px; padding: 18px 16px 16px; border: 1px solid rgba(45, 157, 95, .34); border-radius: var(--bo-the); background: linear-gradient(180deg, rgba(45, 157, 95, .12), rgba(45, 157, 95, .04)); text-align: center; /* Lúc nhảy múa dòng chữ phóng to 1,7 lần; cắt bớt phần tràn ở đây để trang KHÔNG bao giờ sinh thanh cuộn ngang trên điện thoại. */ overflow: hidden; } .dong-qua-tang { display: inline-block; max-width: 100%; margin: 0 auto 14px; font-size: 14px; font-weight: 700; line-height: 1.6; color: var(--la-dam-net); transform-origin: center; will-change: transform; } /* Nhảy đúng 5 lần rồi đứng im hẳn: phóng to 1,7 lần rồi thu về thật nhanh, nghỉ nửa giây, lặp lại. animation-iteration-count là 5 nên hết lượt là thôi. */ .dong-qua-tang.nhay-qua-tang { animation: nhay-dong-qua-tang .75s ease-in-out 5 both; } @keyframes nhay-dong-qua-tang { 0% { transform: scale(1); } 13% { transform: scale(1.7); } 33% { transform: scale(1); } 100% { transform: scale(1); } } .hang-nut-qua { display: grid; gap: 9px; max-width: 460px; margin: 0 auto; } .nut-qua { justify-content: flex-start; gap: 10px; text-align: left; min-height: 44px; } .nut-qua .bieu-tuong { font-size: 16px; flex: 0 0 auto; } .nut-qua .chu { flex: 1; min-width: 0; } /* Nút cuộn lên đầu — tông xanh của web, khác hẳn ba nút quà bên trên */ .nut-len-dau { max-width: 460px; margin: 14px auto 0; border-color: var(--xanh); background: var(--xanh-nen); color: var(--xanh); font-weight: 700; } .nut-len-dau:hover { background: rgba(49, 168, 255, .2); } @media (prefers-reduced-motion: reduce) { .dong-qua-tang.nhay-qua-tang { animation: none; } } @media (max-width: 560px) { .dong-qua-tang { font-size: 13.5px; } } /* Khối "Lưu ý trước khi mua" — tông cam cảnh báo, tách hẳn khỏi lời quảng bá để khách không lướt qua mất điều kiện dùng được sản phẩm. */ .khoi-luu-y { border-color: rgba(255, 167, 46, .42); border-left: 3px solid var(--cam); background: linear-gradient(180deg, rgba(255, 167, 46, .13), rgba(255, 167, 46, .05)); } .khoi-luu-y h4 { color: var(--cam); } .khoi-luu-y li { border-top-color: rgba(255, 167, 46, .2); } /* Nút "Liên hệ Zalo" ở đáy bảng Đặc quyền — là thẻ mở sang Zalo nên phải tự dựng lại dáng nút cho khớp với các nút