:root { /* Màu của phòng lọc ảnh: nền tối trung tính để mắt không bị màn hình kéo lệch khi nhìn ảnh. Một màu nhấn duy nhất, màu vàng ấm của khung được chọn — cùng nghĩa với việc phần mềm này làm. */ --nen: #0E1013; --mat: #171A1E; --mat-2: #1E2228; --vien: #292E35; --chu: #EAE8E5; --mo: #8E9297; --sang: #E4B363; --sang-mo:#3A2F1C; --duoc: #7FB77E; --rong: 1060px; --bo: 10px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--nen); color: var(--chu); font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans", Arial, sans-serif; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } .khung { width: 100%; max-width: var(--rong); margin: 0 auto; padding: 0 24px; } h1, h2, h3 { line-height: 1.2; text-wrap: balance; margin: 0; letter-spacing: -0.02em; } h1 { font-size: clamp(34px, 5.4vw, 56px); font-weight: 700; } h2 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 650; } h3 { font-size: 19px; font-weight: 650; } p { margin: 0; } a { color: var(--sang); } .nhan { font-size: 12.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--mo); font-weight: 600; } /* ---------- Thanh trên ---------- */ header { border-bottom: 1px solid var(--vien); position: sticky; top: 0; z-index: 10; background: rgba(14, 16, 19, 0.86); backdrop-filter: blur(10px); } header .khung { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 62px; } .ten { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; } .ten span { color: var(--sang); } /* ---------- Mở đầu ---------- */ .mo-dau { padding: 72px 0 64px; } .mo-dau .doi { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } @media (max-width: 860px) { .mo-dau .doi { grid-template-columns: 1fr; gap: 40px; } } .mo-dau h1 { margin-bottom: 20px; } .dan { font-size: 19px; color: var(--mo); max-width: 46ch; } .dan strong { color: var(--chu); font-weight: 600; } .nut-hang { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .nut { display: inline-block; padding: 13px 24px; border-radius: var(--bo); font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; font-family: inherit; transition: background .14s, border-color .14s, color .14s; } .nut-chinh { background: var(--sang); color: #1A1408; } .nut-chinh:hover { background: #EFC077; } .nut-phu { background: transparent; color: var(--chu); border-color: var(--vien); } .nut-phu:hover { border-color: var(--mo); } .nut:focus-visible, a:focus-visible, input:focus-visible, button:focus-visible { outline: 2px solid var(--sang); outline-offset: 2px; } /* ---------- Lưới tiếp xúc: hình duy nhất trên trang, và nó vẽ bằng CSS ---------- Cố ý KHÔNG có ảnh thật nào. Ảnh cưới trong máy là ảnh của khách hàng thật, và một trang bán hàng không phải chỗ để chúng xuất hiện. Lưới này mô tả đúng việc phần mềm làm: phần lớn khung mờ đi, vài khung được chọn sáng lên. */ .luoi { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; padding: 18px; background: var(--mat); border: 1px solid var(--vien); border-radius: 14px; } .o { aspect-ratio: 3 / 2; border-radius: 4px; background: var(--mat-2); } .o.chon { background: var(--sang-mo); box-shadow: inset 0 0 0 1.5px var(--sang); position: relative; } .o.chon::after { content: ""; position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(140deg, rgba(228,179,99,.16), transparent 62%); } .luoi-chu { margin-top: 14px; display: flex; justify-content: space-between; font-size: 13.5px; color: var(--mo); font-variant-numeric: tabular-nums; } .luoi-chu b { color: var(--sang); font-weight: 650; } /* ---------- Khối chung ---------- */ section { padding: 68px 0; border-top: 1px solid var(--vien); } .dau-muc { max-width: 62ch; margin-bottom: 38px; } .dau-muc .nhan { display: block; margin-bottom: 12px; } .dau-muc p { color: var(--mo); margin-top: 14px; } .ba { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 820px) { .ba { grid-template-columns: 1fr; } } .the { background: var(--mat); border: 1px solid var(--vien); border-radius: 14px; padding: 26px; } .the h3 { margin-bottom: 10px; } .the p { color: var(--mo); font-size: 15.5px; } .so { font-variant-numeric: tabular-nums; color: var(--sang); font-weight: 700; font-size: 14px; letter-spacing: .06em; margin-bottom: 14px; } /* ---------- Điều không làm ---------- */ .khong { background: var(--mat); border: 1px solid var(--vien); border-left: 3px solid var(--duoc); border-radius: 12px; padding: 26px 28px; } .khong ul { margin: 16px 0 0; padding-left: 20px; color: var(--mo); } .khong li { margin-bottom: 9px; } .khong li b { color: var(--chu); font-weight: 600; } /* ---------- Bảng giá ---------- */ .goi { position: relative; display: flex; flex-direction: column; } .goi.nen-chon { border-color: var(--sang); } .the-nhan { position: absolute; top: -11px; left: 26px; background: var(--sang); color: #1A1408; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; } .gia { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin: 6px 0 2px; } .gia small { font-size: 17px; font-weight: 500; color: var(--mo); letter-spacing: 0; } .moi-thang { font-size: 14px; color: var(--mo); font-variant-numeric: tabular-nums; } .goi ul { list-style: none; margin: 20px 0 0; padding: 0; font-size: 15.5px; color: var(--mo); } .goi li { padding-left: 22px; position: relative; margin-bottom: 8px; } .goi li::before { content: "✓"; position: absolute; left: 0; color: var(--duoc); font-weight: 700; } .goi .nut { margin-top: 22px; text-align: center; width: 100%; } /* ---------- Ô mua ---------- */ .mua { margin-top: 34px; background: var(--mat); border: 1px solid var(--vien); border-radius: 14px; padding: 28px; } .mua label { display: block; font-weight: 600; margin-bottom: 8px; } .mua .goi-y { color: var(--mo); font-size: 14.5px; margin-bottom: 18px; } .hang-nhap { display: flex; gap: 12px; flex-wrap: wrap; } input[type=email] { flex: 1 1 280px; min-width: 0; background: var(--nen); color: var(--chu); border: 1px solid var(--vien); border-radius: var(--bo); padding: 13px 15px; font-size: 16px; font-family: inherit; } input[type=email]::placeholder { color: #666B71; } #bao { margin-top: 16px; font-size: 15px; border-radius: var(--bo); padding: 12px 15px; display: none; } #bao.hien { display: block; } #bao.loi { background: #2A1A1A; border: 1px solid #5A3434; color: #F0C0C0; } #bao.cho { background: var(--mat-2); border: 1px solid var(--vien); color: var(--mo); } /* ---------- Hỏi đáp ---------- */ details { border-bottom: 1px solid var(--vien); padding: 18px 0; } details:first-of-type { border-top: 1px solid var(--vien); } summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; } summary::-webkit-details-marker { display: none; } summary::after { content: "+"; color: var(--sang); font-size: 22px; font-weight: 400; flex-shrink: 0; } details[open] summary::after { content: "−"; } details p { color: var(--mo); margin-top: 12px; max-width: 74ch; font-size: 16px; } /* ---------- Chân trang ---------- */ footer { border-top: 1px solid var(--vien); padding: 36px 0 56px; color: var(--mo); font-size: 14.5px; } footer .khung { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ---------- Lớp thay cho thuộc tính style= ---------- Không phải để gọn mắt. CSP của trang là `style-src 'self'`, và chỉ thị đó chặn cả `style="..."` lẫn thẻ