/* Port NGUYÊN biểu định kiểu của `design-mockups/web-v2/index.html` (D60 bản chuẩn). Nạp SAU `styles.css` nên nó thắng ở những chỗ hai bên cùng nói. Vì sao một tệp riêng, không trộn vào `styles.css`: 1. **Cherry-pick từng luật đã hỏng một lần, 2026-09-09.** Tôi trích bằng regex phẳng, thứ không hiểu `@media`, nên luật mobile lọt vào và THẮNG: màn mở ra một cột với nút tràn ngang. Giữ nguyên tệp thì cascade và media query giữ đúng thứ tự tác giả. 2. Lần port sau còn dán nguyên được, và chỗ nào lệch khỏi mockup thì lộ ra ở diff của tệp này chứ không lẫn vào 42 KB kia. Khối `:root` của mockup đã BỎ: token và bí danh nằm ở `styles.css`, một nguồn duy nhất. */ /* ══════════════════════════════════════════════════════════════════════ BẢNG MÀU · một accent xanh lá, dùng cho cả chrome lẫn nghĩa "khớp". Trước đây "khớp" là #4ade80 trên nền mực. Nay accent thương hiệu CHÍNH LÀ màu khớp: đọc đúng = màu của sản phẩm. "khác" là hổ phách, "sót/thừa" là xám, và cả bốn hạng vẫn có ICON riêng (docx/09 §9.1) nên không hạng nào chỉ phân biệt bằng màu. HÌNH KHỐI · một hệ bo góc, có luật: ảnh và thẻ 16px · nút và ô nhập 12px · chip và huy hiệu bo tròn hết. Không có bán kính thứ tư. ══════════════════════════════════════════════════════════════════════ */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--nen); color:var(--muc); font-family:'Archivo',system-ui,'Segoe UI',sans-serif; font-size:16px; line-height:1.6; font-variation-settings:"wdth" 100; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit} button{font:inherit;cursor:pointer} :focus-visible{outline:2.5px solid var(--xanh);outline-offset:3px;border-radius:6px} .goi :focus-visible,.long :focus-visible{outline-color:var(--chanh)} .han{font-family:'Noto Sans SC','Microsoft YaHei',sans-serif} .khung{max-width:var(--do-rong);margin:0 auto;padding:0 40px} .ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} /* ── nút ─────────────────────────────────────────────────────────── */ .nut{display:inline-flex;align-items:center;gap:9px;border:1px solid transparent; border-radius:var(--r-dk);padding:12px 20px;font-weight:600;font-size:15px; letter-spacing:-.005em;white-space:nowrap;text-decoration:none; transition:background .18s var(--nhip),transform .12s var(--nhip),border-color .18s} .nut-chinh{background:var(--xanh);color:#fff} .nut-chinh:hover{background:var(--xanh-dam)} .nut-vien{background:#fff;color:var(--muc);border-color:var(--vien-dam)} .nut-vien:hover{border-color:var(--muc);background:var(--nen-dai)} .nut:active{transform:translateY(1px)} .dau-chrome{width:18px;height:18px;flex:none;display:block} /* ── mào đầu ─────────────────────────────────────────────────────── */ .mao{position:sticky;top:0;z-index:40;background:#fffffffa; border-bottom:1px solid var(--vien)} .mao .khung{height:68px;display:flex;align-items:center;gap:32px} .thuong-hieu{display:flex;align-items:center;gap:12px;flex:none;min-width:0} .hieu{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700; font-size:17px;letter-spacing:-.02em;flex:none} .logo-shadow{display:block;width:30px;height:30px;border-radius:9px;flex:none} /* Tài sản do Hán Ngữ Bắc Kinh cung cấp, không lấy từ bundle LanguageShadow tham chiếu. */ .dau-nguon{display:flex;align-items:center;gap:8px;padding-left:12px;border-left:1px solid var(--vien-dam); color:var(--muc-2);min-width:0} .logo-hsk{display:block;width:50px;height:auto;flex:none} .nguon-chu{display:grid;gap:1px;font-size:10.5px;line-height:1.18;letter-spacing:.005em;white-space:nowrap} .nguon-chu strong{font-size:11px;color:var(--muc);font-weight:650} .mao nav{display:flex;gap:4px;margin-right:auto} .mao nav a{padding:8px 12px;border-radius:999px;font-size:14.5px;font-weight:500; color:var(--muc-2);text-decoration:none;transition:background .16s,color .16s} .mao nav a:hover{background:var(--nen-dai);color:var(--muc)} .mao .phai{display:flex;align-items:center;gap:10px;flex:none} .mao .phai .dnhap{font-size:14.5px;font-weight:600;text-decoration:none;padding:8px 6px} /* ── màn mở ──────────────────────────────────────────────────────── */ .mo{padding:76px 0 8px} .mo .khung{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center} .mo h1{margin:0 0 18px;font-size:clamp(30px,3vw,40px);line-height:1.12; letter-spacing:-.035em;font-weight:700;font-variation-settings:"wdth" 96} .mo h1 em{font-style:normal;color:var(--xanh)} .mo p.dan{margin:0 0 30px;font-size:18.5px;line-height:1.55;color:var(--muc-2);max-width:30em} .mo .cua{display:flex;gap:12px;flex-wrap:wrap} /* khung sản phẩm bên phải: KHÔNG phải ảnh chụp giả, mà là chính các thành phần dock được dựng bằng DOM, y như trang thật đang chạy công cụ thật. */ .san{border:1px solid var(--vien);border-radius:20px;background:#fff;overflow:hidden; box-shadow:0 1px 2px #101a1208,0 18px 44px -18px #101a1226} .san .khe{aspect-ratio:16/9;position:relative;background:#0d1310;overflow:hidden} .san .khe img{width:100%;height:100%;object-fit:cover;opacity:.82} .san .khe .chay{position:absolute;left:0;bottom:0;height:3px;background:var(--chanh);width:38%} .dock{padding:18px 20px 16px;border-top:1px solid var(--vien)} .dock .py{font-size:13.5px;letter-spacing:.055em;color:var(--muc-3);margin-bottom:5px} .dock .hz{font-size:26px;line-height:1.36;letter-spacing:.02em;font-weight:400} .dock .vn{font-size:14.5px;color:var(--muc-2);margin-top:5px} .hang{display:flex;gap:7px;padding:12px 20px 18px;flex-wrap:wrap;align-items:center} .dk{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--vien-dam); background:#fff;border-radius:999px;padding:8px 13px;font-size:13px;font-weight:500; color:var(--muc);transition:border-color .16s,background .16s} .dk:hover{border-color:var(--muc);background:var(--nen-dai)} .dk.thu{background:var(--muc);color:#fff;border-color:var(--muc)} .dk.thu .ico{color:var(--chanh)} .dk.mo{opacity:.55} .hang .dk{cursor:default} .hang .dk:hover{border-color:var(--vien-dam);background:#fff} /* ── dải tìm kiếm (cấu trúc lấy từ Dribbble: tab · ô lớn · chip) ──── */ .tim{padding:56px 0 12px} .o-tim{display:flex;align-items:center;gap:10px;height:58px;padding:0 8px 0 22px; background:var(--nen-dai);border:1.5px solid transparent;border-radius:var(--r-dk); transition:border-color .18s,background .18s} .o-tim:focus-within{background:#fff;border-color:var(--xanh)} .o-tim input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:16px; color:var(--muc);outline:none} .o-tim input::placeholder{color:var(--muc-3);opacity:1} .o-tim .di{width:42px;height:42px;border-radius:10px;border:0;background:var(--xanh);color:#fff; display:grid;place-items:center;transition:background .18s} .o-tim .di:hover{background:var(--xanh-dam)} .chip-hang{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap} .chip-hang b{font-size:13.5px;font-weight:600;color:var(--muc-2);margin-right:2px} .chip{border:1px solid var(--vien-dam);background:#fff;border-radius:999px;padding:6px 14px; font-size:13.5px;color:var(--muc-2);text-decoration:none;transition:border-color .16s,color .16s} .chip:hover{border-color:var(--xanh);color:var(--xanh)} /* ── lưới thẻ video ──────────────────────────────────────────────── */ .luoi{padding:30px 0 76px} .luoi .dau-luoi{display:flex;align-items:baseline;justify-content:space-between;gap:12px 20px; margin-bottom:18px;flex-wrap:wrap} .luoi h2{margin:0;font-size:20px;letter-spacing:-.02em} .mau-cb{display:inline-flex;align-items:center;gap:7px;border:1px dashed var(--vien-dam); border-radius:999px;padding:5px 13px;font-size:12.5px;color:var(--muc-2);background:#fff} .the-hang{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 26px} .the{text-decoration:none;display:block} .the .anh{position:relative;aspect-ratio:4/3;border-radius:var(--r-anh);overflow:hidden; background:linear-gradient(150deg,var(--nen-sau),var(--xanh-100)); transition:transform .28s var(--nhip),box-shadow .28s var(--nhip)} .the:hover .anh{transform:translateY(-4px);box-shadow:0 20px 34px -18px #101a1240} .the .anh img{width:100%;height:100%;object-fit:cover} .the .anh::after{content:"";position:absolute;inset:auto 0 0;height:46%;pointer-events:none; background:linear-gradient(to top,#0d130fa8,#0d130f00)} .the .cap{position:absolute;left:10px;right:10px;bottom:10px;padding:9px 12px;z-index:1; border-radius:11px;background:#fffffff7; box-shadow:0 2px 10px #0d130f2e} .the .cap .hz{font-size:16px;line-height:1.3} .the .thoi{position:absolute;top:10px;right:10px;background:#101a12d9;color:#fff; border-radius:999px;padding:3px 9px;font-size:11.5px;font-weight:600;letter-spacing:.02em} .the .duoi{display:flex;align-items:center;gap:9px;margin-top:11px} .the .duoi .ten{font-size:14.5px;font-weight:600;letter-spacing:-.01em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .the .duoi .so{margin-left:auto;font-size:12.5px;color:var(--muc-3);white-space:nowrap;flex:none} /* ── dải đối chiếu (nền xanh nhạt, khác họ bố cục với lưới) ───────── */ .doi{background:var(--nen-dai);border-top:1px solid var(--vien);border-bottom:1px solid var(--vien); padding:78px 0} .doi .khung{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center} .doi h2{margin:0 0 14px;font-size:clamp(28px,3vw,38px);line-height:1.12;letter-spacing:-.03em; text-wrap:balance} .doi p{margin:0 0 22px;font-size:17px;color:var(--muc-2);max-width:30em} .chugiai{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--muc-2)} .chugiai span{display:inline-flex;align-items:center;gap:7px} .chugiai .ico{width:16px;height:16px;stroke-width:2} .bang-doi{background:#fff;border:1px solid var(--vien);border-radius:20px;padding:26px 28px; box-shadow:0 20px 40px -26px #101a1233} .bang-doi .nghe{font-size:13px;color:var(--muc-3);margin-bottom:14px} .toks{display:flex;flex-wrap:wrap;gap:10px 14px} .tok{padding-bottom:7px;border-bottom:2.5px solid var(--vien-dam);min-width:44px} .tok .h{font-size:26px;line-height:1.25;display:flex;align-items:center;gap:5px} .tok .p{font-size:12px;letter-spacing:.04em;color:var(--muc-3);margin-top:3px} .tok.khop{border-bottom-color:var(--xanh)} .tok.khac{border-bottom-color:var(--ho-phach)} .tok.khac .h,.tok.khac .p{color:var(--ho-phach)} .tok.sot{border-bottom-color:var(--xam-sot);border-bottom-style:dashed} .tok.sot .h,.tok.sot .p{color:var(--xam-sot)} .tok .ico{width:15px;height:15px;stroke-width:2.4} .bang-doi .may{margin-top:20px;padding-top:16px;border-top:1px solid var(--vien); font-size:14px;color:var(--muc-2)} .bang-doi .may b{font-weight:600;color:var(--muc)} /* ── lồng tiếng lại: dải tối, vì đây là chỗ nói về XEM PHIM ───────── */ .long{background:#0d1310;color:#fff;padding:84px 0} .long .khung{display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;align-items:center} .long h2{margin:0 0 16px;font-size:clamp(27px,2.7vw,35px);line-height:1.14;letter-spacing:-.03em; text-wrap:balance} .long h2 em{font-style:normal;color:var(--chanh)} .long p{margin:0 0 26px;font-size:17px;line-height:1.6;color:#ffffffc4;max-width:30em} .long .cua{display:flex;gap:10px;flex-wrap:wrap} .long .cua .dk{background:#ffffff12;border-color:#ffffff2e;color:#fff} .long .cua .dk:hover{background:#ffffff1f;border-color:#ffffff5c} .long .cua .dk.sang{background:var(--chanh);border-color:var(--chanh);color:var(--muc)} /* dòng thời gian phụ đề: mỗi câu là một mốc, câu đã đọc thì tiếng gốc tắt */ .thoi-do{border-left:1px solid #ffffff29;padding-left:0} .thoi-do .cau{position:relative;padding:15px 0 15px 30px;border-bottom:1px solid #ffffff14} .thoi-do .cau:last-child{border-bottom:0} .thoi-do .cau::before{content:"";position:absolute;left:-5px;top:24px;width:9px;height:9px; border-radius:50%;background:#0d1310;border:1.5px solid #ffffff45} .thoi-do .cau.doc::before{background:var(--chanh);border-color:var(--chanh)} .thoi-do .gio{font-size:12px;color:#ffffff70;letter-spacing:.04em} .thoi-do .hz{font-size:21px;line-height:1.4;margin:3px 0 2px} .thoi-do .nhan{display:inline-flex;align-items:center;gap:6px;margin-top:8px; border-radius:999px;padding:3px 11px;font-size:12px;font-weight:600; background:#ffffff14;color:#ffffffbd} .thoi-do .cau.doc .nhan{background:var(--chanh);color:var(--muc)} .thoi-do .nhan .ico{width:13px;height:13px;stroke-width:2.4} /* ── ba nơi dùng được (2 cột, không phải ba thẻ bằng nhau) ────────── */ .noi{padding:78px 0} .noi .khung{display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:center} .noi h2{margin:0 0 12px;font-size:clamp(26px,2.6vw,34px);letter-spacing:-.03em;line-height:1.15; text-wrap:balance} .noi p{margin:0;color:var(--muc-2);font-size:16.5px;max-width:26em} .noi ul{list-style:none;margin:0;padding:0} .noi li{display:flex;gap:20px;align-items:flex-start;padding:20px 0;border-top:1px solid var(--vien)} .noi li:last-child{border-bottom:1px solid var(--vien)} .noi li .bieu{width:44px;height:44px;flex:none;border-radius:12px;background:var(--nen-dai); display:grid;place-items:center} .noi li .bieu svg{width:24px;height:24px} .noi li h3{margin:0 0 3px;font-size:16px;letter-spacing:-.01em} .noi li p{font-size:14.5px;line-height:1.6} /* ── nâng cấp thành viên ─────────────────────────────────────────── */ .goi{background:var(--muc);color:#fff;padding:80px 0} .goi .khung{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start} .goi h2{margin:0 0 26px;font-size:clamp(28px,3vw,38px);letter-spacing:-.03em;line-height:1.14; text-wrap:balance} .goi h2 em{font-style:normal;color:var(--chanh)} .co-het{margin:0 0 22px;font-size:15.5px;line-height:1.7;color:#ffffffc2;max-width:34em} .khac-biet{border:1px solid #ffffff2e;border-radius:16px;padding:20px 22px;background:#ffffff0d} .kq-dau{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px} .kq-dau h3{margin:0;font-size:16px;letter-spacing:-.01em} .kq-mau{font-size:12px;color:#ffffff8f;border:1px dashed #ffffff3d;border-radius:999px;padding:2px 9px} .kq-tom{display:flex;align-items:baseline;gap:10px;margin-bottom:12px} .kq-tom b{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--chanh)} .kq-tom span{font-size:13px;color:#ffffff9e} .kq-chu{display:flex;gap:8px;flex-wrap:wrap} .kq-chu span{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:52px; border:1px solid #ffffff2e;border-radius:10px;padding:8px 6px 7px;cursor:help} .kq-chu b{font-size:19px;font-weight:500;line-height:1.1} .kq-chu i{font-size:10px;font-style:normal;color:#ffffff8f} .kq-chu u{font-size:11px;text-decoration:none;color:#ffffffc4} .kq-chu [data-bac="tot"]{border-color:var(--chanh)} .kq-chu [data-bac="kha"]{border-color:#e3a008} .kq-chu [data-bac="kem"]{border-color:#f87171} .kq-chu [data-bac="khong-nghe"]{border-style:dashed;opacity:.55} .kq-giai{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:#ffffff9e} .the-goi{background:#ffffff0f;border:1px solid #ffffff26;border-radius:20px;padding:8px} .muc-goi{display:flex;align-items:center;gap:16px;width:100%;text-align:left;padding:16px 18px; border:1.5px solid transparent;border-radius:14px;background:transparent;color:#fff; transition:background .18s,border-color .18s} .muc-goi:hover{background:#ffffff12} .muc-goi[aria-pressed="true"]{border-color:var(--chanh);background:#ffffff14} .muc-goi .ky{font-size:15px;font-weight:600} .muc-goi .tien{margin-left:auto;font-size:19px;font-weight:700;letter-spacing:-.02em;white-space:nowrap} .nhan-pho{display:inline-block;margin-left:8px;background:var(--chanh);color:var(--muc); border-radius:999px;padding:2px 9px;font-size:11px;font-weight:700;letter-spacing:.01em; vertical-align:2px} .goi .nut-mua{width:100%;justify-content:center;margin-top:10px;background:var(--chanh); color:var(--muc);border:0} .goi .nut-mua:hover:not([disabled]){background:#b3e63c} .goi .nut-mua[disabled]{background:#ffffff1c;color:#ffffff8f;cursor:not-allowed} .muc-goi .tien b{display:block;font-size:12px;font-weight:400;color:#ffffff8f; letter-spacing:0;margin-top:2px;text-align:right} .goi .ghi{margin:14px 2px 0;font-size:13.5px;line-height:1.65;color:#ffffffa8} /* ── hỏi đáp ─────────────────────────────────────────────────────── */ .hoi{padding:78px 0} .hoi h2{margin:0 0 22px;font-size:clamp(26px,2.6vw,34px);letter-spacing:-.03em} .hoi details{border-top:1px solid var(--vien)} .hoi details:last-of-type{border-bottom:1px solid var(--vien)} .hoi summary{list-style:none;cursor:pointer;padding:20px 0;font-size:17px;font-weight:600; letter-spacing:-.015em;display:flex;align-items:center;gap:16px} .hoi summary::-webkit-details-marker{display:none} .hoi summary .ico{margin-left:auto;transition:transform .22s var(--nhip);color:var(--muc-3)} .hoi details[open] summary .ico{transform:rotate(45deg)} .hoi details p{margin:0 0 22px;max-width:62ch;color:var(--muc-2);font-size:15.5px} /* ── chân trang: trung tâm offline là nơi người học có thể hành động tiếp ────────── */ .chan{background:#0d1310;color:#fff;padding:62px 0 24px} .chan .khung{font-size:14px} .chan-tren{display:grid;grid-template-columns:1.05fr .72fr 1.48fr;gap:52px} .chan h2{margin:0;font-size:16px;line-height:1.35;letter-spacing:-.01em;color:#fff} .chan a{color:#ffffffbf;text-decoration:none;transition:color .16s var(--nhip)} .chan a:hover{color:var(--chanh)} .chan :focus-visible{outline-color:var(--chanh)} .chan-thuong-hieu{max-width:28rem} .chan-logo{display:block;width:92px;margin-bottom:17px} .chan-logo img{width:100%;height:auto} .chan-thuong-hieu p{margin:10px 0 15px;line-height:1.65;color:#ffffffa8} .chan-ve-trung-tam{font-weight:600;color:var(--chanh)!important} .chan-cot{display:flex;flex-direction:column;align-items:flex-start;gap:9px} .chan-cot h2{margin-bottom:5px} .chan-lien-he{min-width:0} .chan-gio{margin:7px 0 19px;color:var(--chanh);font-weight:600} .chan-co-so{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} .chan-co-so p{display:grid;gap:4px;margin:0;color:#ffffffa8;line-height:1.55} .chan-co-so strong{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.045em} .chan-lien-ket{display:flex;align-items:center;gap:19px;flex-wrap:wrap;margin-top:22px} .chan-lien-ket a{font-weight:600} .chan-lien-ket .chan-hotline{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px; background:var(--chanh);border-radius:var(--r-dk);color:var(--muc)} .chan-lien-ket .chan-hotline:hover{color:var(--muc);background:#b3e63c} .chan-day{display:flex;gap:12px 22px;flex-wrap:wrap;margin-top:48px;padding-top:19px; border-top:1px solid #ffffff24;color:#ffffff80;font-size:13px} /* ── thu hẹp ─────────────────────────────────────────────────────── */ @media (max-width:1080px){ .the-hang{grid-template-columns:repeat(3,1fr)} } @media (max-width:880px){ .khung{padding:0 20px} .long .khung{grid-template-columns:1fr;gap:34px} .long{padding:52px 0} .mao nav{display:none} /* M1: ba thứ trong mào đầu không vừa một dòng 430px, nút chính bị cắt mất chữ. Bỏ nhãn dài và bỏ biểu tượng, giữ đúng một lối đi chính. */ .mao .phai .nut-chinh .nhan-dai{display:none} .mao .phai .nut-chinh{padding:10px 16px} .mao .phai .nut-chinh .dau-chrome{display:none} .mao .khung{gap:14px;height:60px} /* M2: tiêu đề lưới và nhãn "danh mục mẫu" cùng một dòng thì cả hai cùng gãy chữ. */ .luoi .dau-luoi{flex-direction:column;align-items:flex-start} /* M3: ảnh 4:3 một cột làm trang dài gấp đôi, đổi sang 16:9 cho hẹp. */ .the .anh{aspect-ratio:16/9} .mo{padding:40px 0 0} .mo .khung,.doi .khung,.noi .khung,.goi .khung{grid-template-columns:1fr;gap:36px} .chan-tren{grid-template-columns:1fr 1fr;gap:38px 28px} .chan-lien-he{grid-column:1/-1} .the-hang{grid-template-columns:repeat(2,1fr);gap:26px 16px} .mo h1{font-size:34px} .mo p.dan{font-size:17px} .o-tim{height:52px;padding-left:16px} .doi,.noi,.goi,.hoi{padding:52px 0} } @media (max-width:520px){ .mao .khung{gap:8px} .thuong-hieu{gap:8px} .hieu{gap:8px;font-size:16px} .dau-nguon{gap:0;padding-left:8px} .dau-nguon .nguon-chu{display:none} .dau-nguon .logo-hsk{width:42px} .mao .phai{gap:4px} .mao .phai .dnhap{padding:8px 4px} .the-hang{grid-template-columns:1fr} .mo .cua{flex-direction:column;align-items:stretch} .mo .cua .nut{justify-content:center} .chan{padding:48px 0 22px} .chan-tren{grid-template-columns:1fr;gap:34px} .chan-lien-he{grid-column:auto} .chan-co-so{grid-template-columns:1fr;gap:15px} .chan-day{margin-top:36px;flex-direction:column;gap:3px} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;transition-duration:.001ms!important} } /* ══════════════════════════════════════════════════════════════════════════════════ DELTA — chỗ bản THẬT lệch khỏi mockup, và vì sao ══════════════════════════════════════════════════════════════════════════════════ Mọi thứ TRÊN dòng này là port nguyên xi từ `design-mockups/web-v2/index.html`. Mọi thứ DƯỚI dòng này là của bản thật, không có trong mockup. Tách ra để lần port sau còn dán đè được phần trên mà không mất phần dưới. ══════════════════════════════════════════════════════════════════════════════════ */ /* ── thẻ giá là LIÊN KẾT, không phải nút chọn ──────────────────────────────────── Mockup dựng ba `