/* ========================================================================== 7. DỰ ÁN ĐÃ TRIỂN KHAI — bức tường dự án chạy theo cuộn (js/showcase.js) Bố cục & thông số theo section "Dự án thành công" của ledinhtuan.com: thẻ 16:9, mỗi hàng 4 ô (máy tính thấy rõ 3), khoảng cách 20/24px, khung viền 2px + đệm 6px, phối cảnh 1000px, lớp phủ mờ ở mép trên. Mỗi ô là ảnh chụp thật trong khung trắng; tên đối tác nằm trong nhãn nhỏ chỉ hiện khi rê chuột. ========================================================================== */ /* Section quan trọng nhất trang → nền SÁNG cùng tone "Sky Luxury" của cả site (ivory #F5F8FF → xanh trời rất nhạt), điểm thêm hai vệt periwinkle / cyan mờ để có chiều sâu mà không rực, không xám. Toàn bộ nền là gradient TĨNH trong --sc-grad để .pw__fade vẽ lại được y hệt (không lộ vệt khác màu ở mép tường). overflow: clip (không phải hidden) để thanh hạng mục sticky bên trong vẫn hoạt động. */ .showcase-sec { position: relative; isolation: isolate; overflow: clip; padding-bottom: clamp(36px, 5vw, 64px); --sc-grad: radial-gradient(60% 34% at 6% 8%, rgb(162 196 254 / .34), transparent 70%), radial-gradient(46% 30% at 96% 36%, rgb(20 216 230 / .1), transparent 70%), radial-gradient(70% 36% at 50% 100%, rgb(162 196 254 / .42), transparent 70%), linear-gradient(180deg, #F5F8FF 0%, #EEF4FF 34%, #E4EDFE 68%, #D9E6FD 100%); /* màn: tối rất nhẹ ở hai mép (vignette navy 6 %) cho có chiều sâu, giữa vẫn sáng */ --sc-scrim: radial-gradient(115% 75% at 50% 45%, transparent 55%, rgb(12 22 51 / .07) 100%); background: var(--sc-grad); } .showcase-sec__scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--sc-scrim); } .showcase-sec .sec-head { margin-bottom: 0; } .showcase { position: relative; } /* ---------- Một bức tường ---------- */ /* đáy chừa thêm chỗ cho quãng tường dịch xuống khi đã dựng thẳng (40px mobile · 150px desktop) để hàng cuối không bị cắt */ .pw { position: relative; overflow: hidden; perspective: 1000px; padding-block: 24px 64px; } @media (min-width: 768px) { .pw { padding-block: 96px 180px; } } @media (min-width: 1280px) { .pw { padding-top: 168px; } } .pw:first-child { padding-top: clamp(56px, 7vw, 110px); } /* Lớp phủ mép trên mỗi bức tường: vẽ lại chính nền section (màn + gradient) căn đúng vị trí (JS đặt --sec-h / --fade-y), rồi mask cho tan dần xuống dưới → thẻ ở mép trên chìm vào nền mà không lộ đường cắt hay vệt khác màu. Độ đục tổng do JS đặt theo tiến độ dựng thẳng (1 → 0). */ .pw__fade { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 200px; pointer-events: none; background: var(--sc-scrim), var(--sc-grad); background-repeat: no-repeat; background-size: 100% var(--sec-h, 100%); background-position: 0 var(--fade-y, 0); -webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .78) 22%, rgb(0 0 0 / .48) 50%, rgb(0 0 0 / .2) 75%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .78) 22%, rgb(0 0 0 / .48) 50%, rgb(0 0 0 / .2) 75%, transparent 100%); } .pw__fade--2 { height: 110px; -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / .8) 0%, rgb(0 0 0 / .4) 50%, transparent 100%); mask-image: linear-gradient(180deg, rgb(0 0 0 / .8) 0%, rgb(0 0 0 / .4) 50%, transparent 100%); } @media (min-width: 768px) { .pw__fade { height: 256px; } .pw__fade--2 { height: 128px; } } @media (min-width: 1024px) { .pw__fade { height: 320px; } .pw__fade--2 { height: 160px; } } .pw__head { position: relative; z-index: 3; max-width: 860px; margin-inline: auto; padding: 80px var(--gutter); display: grid; justify-items: center; gap: 14px; text-align: center; } .pw:first-child .pw__head { padding-top: 24px; } @media (min-width: 768px) { .pw__head, .pw:first-child .pw__head { padding-block: 0; } } /* Lưu ý hiệu năng: KHÔNG dùng backdrop-filter trong section này — nền phía sau trượt liên tục nên trình duyệt phải làm mờ lại mỗi khung (đo: p95 33 ms → 17 ms khi bỏ). Dùng nền gần đặc thay thế. */ /* min-width: 0 — phần tử [data-fit] (nowrap) trong grid nếu không có sẽ giãn theo chuỗi chữ và đẩy rộng cả trang trên điện thoại */ .pw__title { display: block; justify-self: stretch; min-width: 0; max-width: 100%; font-size: clamp(2.25rem, 4.4vw, 3.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -.045em; color: var(--ink); } /* (KHÔNG text-shadow cho tiêu đề: chữ tách từng từ bằng data-split, bóng sẽ bị cắt thành ô vuông) */ .pw__desc { width: 100%; max-width: 860px; font-size: 15px; color: var(--ink-2); text-align-last: center; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* Bức tường nghiêng: JS đặt transform / opacity theo cuộn */ .pw__wall { position: relative; z-index: 1; opacity: .3; backface-visibility: hidden; } .pw.is-live .pw__wall, .pw.is-live .pw__row { will-change: transform; } .pw__line { margin-bottom: 20px; } .pw__row { --g: 20px; display: flex; gap: var(--g); padding-inline: var(--gutter); } .pw__row--rev { flex-direction: row-reverse; } @media (min-width: 768px) { .pw__line { margin-bottom: 24px; } .pw__row { --g: 24px; } } /* nhãn hàng (Kênh & Content: cá nhân / doanh nghiệp) — đứng yên, nằm cùng phía với mép neo của hàng */ .pw__label { display: flex; margin: 0 0 12px; padding-inline: var(--gutter); } .pw__line--rev .pw__label { justify-content: flex-end; } .pw__label span { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--ink); background: rgb(255 255 255 / .72); border: 1px solid rgb(255 255 255 / .95); box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / .05), 0 12px 28px -16px rgb(var(--shadow-rgb) / .4); } .pw__label span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grad-btn-hover); } /* ---------- Thẻ ---------- */ /* Mỗi hàng 4 ô. Bề rộng ô theo khung hàng (100% = hàng trừ lề 2 bên): máy tính thấy rõ 3 ô, ô thứ 4 ló ở mép · tablet 2 ô · điện thoại 1 ô + ô sau ló ra. Thẻ = ảnh chụp trong khung trắng, không chữ đè lên ảnh (như ledinhtuan.com). */ .pw-card { --cw: 82%; --lift: -20px; --r: 16px; --pad: 0px; --bw: 1.5px; /* Viền đơn, mảnh, màu xanh nhạt hài hoà tone site (không gradient, không khối lệch) — theo ảnh mẫu người dùng gửi. */ position: relative; flex: none; width: var(--cw); aspect-ratio: 16 / 9; border-radius: var(--r); transition: transform .55s cubic-bezier(.3, 1.45, .55, 1); } @media (min-width: 640px) { .pw-card { --cw: calc((100% - var(--g)) / 2); --r: 22px; --pad: 0px; --bw: 1.75px; } } @media (min-width: 1024px) { .pw-card { --cw: calc((100% - 2 * var(--g)) / 3); --r: 24px; } } @media (hover: none), (prefers-reduced-motion: reduce) { .pw-card { --lift: -5px; } } .pw-card:hover, .pw-card:focus-within { transform: translate3d(0, var(--lift), 0); } /* vùng bấm phủ cả ô: (có link) ·