:root{ /* Georgia bị loại khỏi stack: font này thiếu glyph ghép sẵn cho nguyên âm hai dấu của tiếng Việt (ề, ố, ữ) nên ghép dấu rời, hiển thị sai. */ --serif:"Palatino Linotype",Charter,Constantia,Cambria,"Times New Roman",serif; --sans:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --bg:#F1F4F0; --bg-alt:#E6EBE3; --ink:#1B2030; --ink-soft:#4B5266; --ink-faint:#7A8092; --accent:#C97A1E; --accent-ink:#5C3609; --accent-soft:#F3DDB8; --accent-text:#5C3609; --teal:#2F8F7D; --teal-soft:#D9EEE9; --danger:#B3261E; --danger-soft:#FBE5E3; --card:#FFFFFF; --border:rgba(27,32,48,0.13); --border-strong:rgba(27,32,48,0.24); --shadow:0 20px 50px -30px rgba(27,32,48,0.35); --anh-loc:none; } @media (prefers-color-scheme: dark){ :root{ --bg:#12152A; --bg-alt:#191D36; --ink:#ECEAE3; --ink-soft:#B7BBD1; --ink-faint:#8489A3; --accent:#E8A33D; --accent-ink:#2A1B05; --accent-soft:#3A2A10; --accent-text:#E8A33D; --teal:#4FD1BA; --teal-soft:#16332E; --danger:#F2B8B5; --danger-soft:#3A1B19; --card:#191D36; --border:rgba(236,234,227,0.14); --border-strong:rgba(236,234,227,0.28); --shadow:0 20px 50px -28px rgba(0,0,0,0.6); --anh-loc:brightness(.86) saturate(.95); } } :root[data-theme="dark"]{ --bg:#12152A; --bg-alt:#191D36; --ink:#ECEAE3; --ink-soft:#B7BBD1; --ink-faint:#8489A3; --accent:#E8A33D; --accent-ink:#2A1B05; --accent-soft:#3A2A10; --accent-text:#E8A33D; --teal:#4FD1BA; --teal-soft:#16332E; --danger:#F2B8B5; --danger-soft:#3A1B19; --card:#191D36; --border:rgba(236,234,227,0.14); --border-strong:rgba(236,234,227,0.28); --shadow:0 20px 50px -28px rgba(0,0,0,0.6); --anh-loc:brightness(.86) saturate(.95); } :root[data-theme="light"]{ --bg:#F1F4F0; --bg-alt:#E6EBE3; --ink:#1B2030; --ink-soft:#4B5266; --ink-faint:#7A8092; --accent:#C97A1E; --accent-ink:#5C3609; --accent-soft:#F3DDB8; --accent-text:#5C3609; --teal:#2F8F7D; --teal-soft:#D9EEE9; --danger:#B3261E; --danger-soft:#FBE5E3; --card:#FFFFFF; --border:rgba(27,32,48,0.13); --border-strong:rgba(27,32,48,0.24); --shadow:0 20px 50px -30px rgba(27,32,48,0.35); --anh-loc:none; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.18; text-wrap:balance; margin:0; color:var(--ink); } h1{ font-size:clamp(2rem,4.4vw,3.2rem); letter-spacing:-.01em; } h2{ font-size:clamp(1.5rem,2.9vw,2.2rem); } h3{ font-size:1.2rem; } h4{ font-size:1.02rem; } p{ margin:0; color:var(--ink-soft); } a{ color:var(--accent-text); } .wrap{ max-width:1080px; margin:0 auto; padding-inline:22px; } .wrap-narrow{ max-width:760px; margin:0 auto; padding-inline:22px; } .stack{ display:flex; flex-direction:column; } .gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; } .gap-24{ gap:24px; } .gap-32{ gap:32px; } .center{ text-align:center; } .mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-40{margin-top:40px;} [hidden]{ display:none !important; } .eyebrow{ display:inline-flex; align-items:center; gap:.5em; font-size:.71rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--accent-text); background:var(--accent-soft); border-radius:999px; padding:.4em .9em; align-self:flex-start; } .eyebrow.teal{ color:var(--teal); background:var(--teal-soft); } .btn{ appearance:none; border:none; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; justify-content:center; gap:.5em; border-radius:11px; font-weight:700; text-decoration:none; transition:transform .15s ease, background .15s ease, opacity .15s ease; } .btn:focus-visible{ outline:3px solid var(--teal); outline-offset:2px; } .btn:disabled{ opacity:.55; cursor:not-allowed; } .btn-primary{ background:var(--accent); color:var(--accent-ink); padding:.85em 1.5em; font-size:.98rem; } .btn-primary:hover:not(:disabled){ transform:translateY(-1px); } .btn-ghost{ background:transparent; color:var(--ink); padding:.7em 1.2em; border:1px solid var(--border-strong); font-size:.92rem; } .btn-ghost:hover:not(:disabled){ background:var(--bg-alt); } .btn-quiet{ background:none; border:none; color:var(--ink-faint); font-family:inherit; font-size:.87rem; cursor:pointer; padding:0; text-decoration:underline; } .btn-block{ width:100%; } .btn-lg{ padding:1em 1.9em; font-size:1.05rem; } /* ---------- khung chung ---------- */ header.site{ position:sticky; top:0; z-index:40; border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); } .nav-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding-block:13px; } .brand{ display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:700; font-size:1.08rem; cursor:pointer; background:none; border:none; color:var(--ink); } .brand .mark{ width:30px; height:30px; border-radius:8px; flex:none; display:block; } .nav-right{ display:flex; align-items:center; gap:10px; } .nav-user{ font-size:.85rem; color:var(--ink-faint); } @media (max-width:600px){ .nav-user{ display:none; } } .view{ padding-block:clamp(36px,6vw,72px); } footer.site{ border-top:1px solid var(--border); padding-block:32px; margin-top:40px; } .foot-legal{ font-size:.77rem; color:var(--ink-faint); line-height:1.6; max-width:70ch; } .card{ background:var(--card); border:1px solid var(--border); border-radius:20px; padding:clamp(22px,3vw,32px); box-shadow:var(--shadow); } .card-flat{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px; } /* ---------- landing ---------- */ .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; } @media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:36px; } } .lede{ font-size:1.08rem; max-width:52ch; } /* Dòng thứ hạng trong hộp kết quả mẫu. Đặt ở đây thay vì thành một đoạn riêng dưới .lede: đoạn riêng tốn 77px và đẩy nút bấm xuống dưới nếp gấp. */ .mk-hang{ font-size:.78rem; line-height:1.4; color:var(--accent-text); font-weight:600; margin-top:6px; } .trust-row{ display:flex; flex-wrap:wrap; gap:18px; } .trust-item{ display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--ink-soft); } .trust-item .dot{ width:6px; height:6px; border-radius:50%; background:var(--teal); flex:none; } .iq-eq{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .ie-cell{ border:1px solid var(--border); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:6px; } .ie-cell .tag{ font-family:var(--serif); font-size:1.45rem; font-weight:700; color:var(--teal); line-height:1; } .ie-cell p{ font-size:.84rem; } .fine{ font-size:.84rem; color:var(--ink-faint); } /* ---------- onboarding ---------- */ .onb-dots{ display:flex; gap:7px; justify-content:center; } .onb-dot{ width:7px; height:7px; border-radius:50%; background:var(--border-strong); transition:background .2s ease, width .2s ease; } .onb-dot.on{ background:var(--accent); width:22px; border-radius:4px; } .onb-art{ display:grid; place-items:center; padding-block:14px; } .onb-art svg{ width:min(230px,60vw); height:auto; } /* ---------- form ---------- */ .field{ display:flex; flex-direction:column; gap:6px; } .field label{ font-size:.85rem; font-weight:700; color:var(--ink); } .field input, .field select{ font-family:inherit; font-size:1rem; color:var(--ink); background:var(--bg); border:1px solid var(--border-strong); border-radius:11px; padding:.75em .9em; width:100%; } .field input:focus-visible, .field select:focus-visible{ outline:3px solid var(--teal); outline-offset:1px; } .field .hint{ font-size:.78rem; color:var(--ink-faint); } .form-err{ background:var(--danger-soft); color:var(--danger); border-radius:10px; padding:.7em .9em; font-size:.87rem; } .form-ok{ background:var(--teal-soft); color:var(--teal); border-radius:10px; padding:.7em .9em; font-size:.87rem; } .switch-line{ font-size:.88rem; color:var(--ink-faint); text-align:center; } /* ---------- quiz ---------- */ .quiz-shell{ max-width:720px; margin-inline:auto; background:var(--card); border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow); overflow:hidden; } .quiz-bar{ height:5px; background:var(--bg-alt); } .quiz-bar span{ display:block; height:100%; width:0; background:var(--teal); transition:width .3s ease; } .quiz-body{ padding:clamp(22px,4vw,38px); } .q-top{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:10px; } .quiz-step{ font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); } .q-part{ font-size:.73rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--teal); background:var(--teal-soft); border-radius:999px; padding:.3em .8em; } .quiz-q{ font-family:var(--serif); font-size:clamp(1.18rem,2.4vw,1.48rem); line-height:1.35; margin-top:12px; text-wrap:balance; color:var(--ink); } .quiz-axis{ margin-top:8px; font-size:.79rem; color:var(--teal); font-weight:700; } .opts{ margin-top:22px; display:flex; flex-direction:column; gap:9px; } .opt{ appearance:none; font-family:inherit; font-size:.95rem; text-align:left; cursor:pointer; background:var(--bg); color:var(--ink); border:1px solid var(--border); border-radius:11px; padding:.85em 1.1em; transition:border-color .15s ease, background .15s ease; } .opt:hover{ border-color:var(--teal); background:var(--teal-soft); } .opt:focus-visible{ outline:3px solid var(--teal); outline-offset:2px; } .matrix-wrap{ margin-top:20px; display:flex; justify-content:center; } .matrix-wrap svg{ width:210px; max-width:100%; height:auto; } .opts-grid{ margin-top:18px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .opt-shape{ background:var(--bg); border:1px solid var(--border); border-radius:11px; padding:10px; cursor:pointer; transition:border-color .15s ease, background .15s ease; } .opt-shape:hover{ border-color:var(--teal); background:var(--teal-soft); } .opt-shape:focus-visible{ outline:3px solid var(--teal); outline-offset:2px; } .opt-shape svg{ width:100%; height:auto; display:block; } .quiz-note{ margin-top:20px; font-size:.8rem; color:var(--ink-faint); } /* ---------- hồ sơ / báo cáo ---------- */ /* Cột ảnh phải có kích thước XÁC ĐỊNH (minmax hai đầu đều là độ dài), không được để auto. Trước đây cột này là auto và bên trong đặt width:100% — với hình SVG thì viewBox cho kích thước nội tại ngay nên vẫn ra đúng, nhưng ảnh raster chỉ có kích thước sau khi tải xong. Đo thật lúc còn auto: lần vẽ đầu cột sập còn 2px (cả hàng thành 940px + 2px) rồi mới bung ra 360px khi ảnh về — cả phần đầu hồ sơ giật một nhịp ngay trước mắt người đọc. */ .profile-head{ display:grid; grid-template-columns:1fr minmax(240px,360px); gap:28px; align-items:center; } @media (max-width:760px){ .profile-head{ grid-template-columns:1fr; } } .profile-head svg{ width:100%; max-width:360px; height:auto; } /* ---------- thẻ hình mẫu ---------- Chân dung minh hoạ cho kiểu người. Ảnh raster duy nhất trong trang, nên khác mọi hình SVG khác ở chỗ nó KHÔNG tự đổi theo màu nền — nền tranh là sáng, đặt nguyên lên nền tối thì thành một ô đèn giữa trang. --anh-loc dịu lại đúng chừng đó, và đặt trong biến chứ không viết thẳng để nó theo cả bốn tổ hợp chủ đề (theo máy / chọn tay × sáng / tối). */ .kieu-anh{ width:100%; max-width:360px; } /* aspect-ratio giữ sẵn đúng chỗ cao bằng 3/4 bề ngang ngay từ lần vẽ đầu, không chờ ảnh tải. Thiếu nó thì ô ảnh cao 0 rồi bung ra, đẩy toàn bộ hồ sơ nhảy xuống — hai thuộc tính width/height trên thẻ img cũng làm việc này, nhưng chỉ khi CSS không đè lên, mà width:100% ở ngay dòng dưới thì đè đúng vào đó. */ .kieu-anh img{ display:block; width:100%; height:auto; aspect-ratio:4/3; border-radius:14px; border:1px solid var(--border); filter:var(--anh-loc); } /* Thẻ đầy đủ trên trang hồ sơ mẫu: hình bên trái, tên kiểu bên phải. Ảnh ở đây hẹp hơn trong hồ sơ thật, vì hai trang dùng hai khung khác nhau: hồ sơ thật nằm trong .wrap (1080px) nên cột chữ còn ~580px, còn trang mẫu nằm trong .wrap-narrow (760px). Để nguyên 360px như bên kia thì cột chữ chỉ còn 262px — đo thật — và "Người Phân Tích Thầm Lặng" vỡ thành bốn dòng. 280px chia lại thành 280 + 342, tên dài nhất gói gọn hai dòng. Tiêu đề cũng hạ một nấc so với đầu hồ sơ: 2.6rem là cỡ dành cho tiêu đề trang, đặt trong một thẻ hẹp thì nó lấn hết phần còn lại. */ .the-kieu{ display:grid; grid-template-columns:280px 1fr; gap:28px; align-items:center; } .the-kieu .kieu-anh{ max-width:280px; } .the-kieu .type-name{ font-size:clamp(1.5rem,3vw,2.05rem); } @media (max-width:760px){ .the-kieu{ grid-template-columns:1fr; } .the-kieu .kieu-anh{ max-width:360px; } } .type-name{ font-family:var(--serif); font-size:clamp(1.7rem,3.6vw,2.6rem); line-height:1.1; } .type-line{ margin-top:10px; font-size:1.02rem; max-width:56ch; } .meta-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; } .chip{ font-size:.79rem; font-weight:700; color:var(--ink-soft); background:var(--bg-alt); border:1px solid var(--border); border-radius:999px; padding:.35em .85em; } .chip b{ color:var(--ink); font-variant-numeric:tabular-nums; } .axis-list{ display:flex; flex-direction:column; gap:13px; } .axis-row{ display:grid; grid-template-columns:130px 1fr 46px; gap:12px; align-items:center; font-size:.88rem; } @media (max-width:560px){ .axis-row{ grid-template-columns:110px 1fr 42px; font-size:.83rem; } } .axis-track{ display:block; height:9px; background:var(--bg-alt); border-radius:999px; overflow:hidden; } /* display:block bắt buộc — đây là thẻ span, mà width/height không áp dụng cho phần tử inline nên thiếu dòng này thanh điểm là 0x0 và vô hình. */ .axis-fill{ display:block; height:100%; background:var(--teal); border-radius:999px; } .axis-num{ text-align:right; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); } /* ---------- thứ hạng phần trăm ---------- Đặt ngay dưới phần đầu hồ sơ vì đây là câu người ta tò mò nhất ngay khi vừa nhìn xong điểm: "vậy mình đứng ở đâu so với người khác?". */ .xep-hang{ border-color:var(--teal); } .xh-lon{ font:600 clamp(1.2rem,3.2vw,1.7rem)/1.3 var(--serif); color:var(--ink); margin:10px 0 6px; } .xh-lon b{ color:var(--teal); } .xh-tuoi{ font-size:.95rem; color:var(--ink-soft); } .xh-tuoi b{ color:var(--ink); } /* ---------- trang hồ sơ mẫu ---------- */ .bang-mau{ background:var(--card); border:1px solid var(--border); border-radius:18px; padding:clamp(20px,3vw,30px); } .bang-mau h1{ font-size:clamp(1.5rem,3.6vw,2.1rem); margin:12px 0 10px; } .bang-mau p{ font-size:.97rem; } /* CTA lặp lại ở đầu và cuối: trang này rất dài, ai đọc hết mà phải cuộn ngược lên mới tìm được nút là mất đúng người đã tin nhất. */ .cta-mau{ background:var(--accent-soft); border-radius:18px; text-align:center; padding:clamp(24px,4vw,34px) clamp(18px,3vw,28px); margin-top:24px; } .cta-mau .cm-nho{ font:700 .74rem/1.3 var(--sans); letter-spacing:.09em; text-transform:uppercase; color:var(--accent-text); margin-bottom:8px; } .cta-mau h3{ font-size:clamp(1.25rem,3vw,1.7rem); margin-bottom:8px; color:var(--accent-ink); } .cta-mau .cm-phu{ font-size:.92rem; color:var(--accent-ink); opacity:.82; margin-bottom:18px; } .cta-mau .btn{ min-height:54px; font-size:1.05rem; } @media (max-width:520px){ .cta-mau .btn{ width:100%; } } /* Nhấn mạnh cụm "hồ sơ mẫu" trong phần mở đầu — người đọc lướt nhanh vẫn bắt được, thay vì phải đọc hết đoạn mới biết đây không phải kết quả của mình. */ .bang-mau .danh-dau{ background:var(--accent-soft); color:var(--accent-ink); padding:1px 6px; border-radius:5px; } /* Thanh CTA bám đáy suốt trang hồ sơ mẫu. bottom đặt bằng JS (chuaChoThanh) chứ không cứng ở đây: khi thanh xin phép theo dõi cũng đang hiện thì thanh này phải ngồi lên trên nó. */ .thanh-mau{ position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--card); border-top:1px solid var(--border); box-shadow:0 -6px 24px -14px rgba(0,0,0,.3); padding:10px 20px calc(10px + env(safe-area-inset-bottom)); } .tm-trong{ max-width:1080px; margin:0 auto; display:flex; align-items:center; gap:14px; } .tm-nhan{ font:700 .68rem/1 var(--sans); letter-spacing:.09em; text-transform:uppercase; color:var(--accent-text); background:var(--accent-soft); padding:6px 10px; border-radius:20px; flex:none; } .tm-chu{ font-size:.88rem; color:var(--ink-soft); flex:1 1 auto; min-width:0; } .thanh-mau .btn{ flex:none; min-height:46px; } @media (max-width:640px){ .tm-chu{ display:none; } /* màn hẹp: giữ nhãn và nút, bỏ câu giải thích */ .thanh-mau .btn{ flex:1; } } /* Phần trăm cạnh tên trục: xuống dòng riêng, cỡ nhỏ, không tranh chỗ với tên. :empty ẩn đi để lúc chưa nạp xong không để lại khoảng trống nhấp nháy. */ .axis-hang{ display:block; font-size:.72rem; font-weight:400; line-height:1.3; color:var(--ink-faint); } .axis-hang:empty{ display:none; } .axis-num.locked{ color:var(--ink-faint); filter:blur(4px); user-select:none; } .toc-card{ padding-block:22px; } .toc-card > summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; } .toc-card > summary::-webkit-details-marker{ display:none; } .toc-card > summary::after{ content:"⌄"; font-size:1.5rem; line-height:1; color:var(--ink-faint); flex:none; transition:transform .2s ease; } .toc-card[open] > summary::after{ transform:rotate(180deg); } .toc-card > summary .toc-h{ font-family:var(--serif); font-size:1.2rem; font-weight:600; } .toc-card > summary:hover .toc-h{ color:var(--accent-text); } .toc-card > summary .stack{ align-items:flex-start; } .toc{ display:flex; flex-direction:column; gap:0; } .toc-part{ border-top:1px solid var(--border); padding-block:16px; } .toc-part:first-child{ border-top:none; } .toc-part-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; } .toc-part-title{ font-family:var(--serif); font-size:1.08rem; font-weight:700; } .toc-part-meta{ font-size:.78rem; color:var(--ink-faint); } .toc-items{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; } .toc-items li{ display:flex; align-items:baseline; gap:9px; font-size:.9rem; color:var(--ink-soft); } .toc-items .n{ font-size:.76rem; color:var(--ink-faint); font-variant-numeric:tabular-nums; min-width:1.8em; } .toc-items .lock{ font-size:.72rem; color:var(--accent-text); background:var(--accent-soft); border-radius:5px; padding:.1em .45em; white-space:nowrap; } .toc-items .open{ font-size:.72rem; color:var(--teal); background:var(--teal-soft); border-radius:5px; padding:.1em .45em; white-space:nowrap; } .rep-part{ margin-top:44px; } .rep-part-head{ display:flex; align-items:baseline; gap:12px; padding-bottom:10px; border-bottom:2px solid var(--ink); } .rep-part-num{ font-family:var(--serif); font-size:1.5rem; color:var(--accent-text); } .rep-item{ padding-block:20px; border-bottom:1px solid var(--border); } .rep-item h4{ display:flex; gap:10px; align-items:baseline; } .rep-item h4 .n{ font-size:.8rem; color:var(--ink-faint); font-variant-numeric:tabular-nums; flex:none; } .rep-item p{ margin-top:8px; font-size:.95rem; max-width:66ch; } .rep-item .score-note{ margin-top:10px; font-size:.83rem; color:var(--teal); font-weight:700; } .rep-locked .teaser{ color:var(--ink-faint); } .rep-locked .cut{ color:var(--ink-faint); } .unlock-inline{ margin-top:10px; display:inline-flex; align-items:center; gap:6px; font-size:.87rem; font-weight:700; color:var(--accent-text); background:none; border:none; cursor:pointer; padding:0; font-family:inherit; } .unlock-inline:hover{ text-decoration:underline; } /* ---------- paywall ---------- */ .paywall{ position:relative; margin-top:34px; border:2px solid var(--accent); border-radius:22px; padding:clamp(24px,4vw,40px); background:var(--card); box-shadow:var(--shadow); } .paywall::before{ content:""; position:absolute; left:0; right:0; top:-90px; height:90px; pointer-events:none; background:linear-gradient(to bottom, transparent, var(--bg)); } .pw-count{ font-family:var(--serif); font-size:clamp(1.4rem,3vw,2.05rem); line-height:1.2; text-wrap:balance; } .pw-sub{ margin-top:12px; font-size:.98rem; max-width:58ch; } .pw-bullets{ list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:11px; } @media (max-width:640px){ .pw-bullets{ grid-template-columns:1fr; } } .pw-bullets li{ display:flex; gap:9px; font-size:.91rem; color:var(--ink-soft); } .pw-bullets li::before{ content:"✓"; color:var(--teal); font-weight:700; flex:none; } .plans{ display:grid; grid-template-columns:1fr 1.35fr; gap:16px; margin-top:26px; align-items:start; } @media (max-width:720px){ .plans{ grid-template-columns:1fr; } } .plan{ border:1px solid var(--border); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:10px; background:var(--bg); } .plan.best{ border:2px solid var(--accent); background:var(--card); padding:24px; } /* Trên trang chủ hai gói đặt ngang hàng: cùng cột, cùng đệm, cùng cỡ chữ giá. Nhấn mạnh gói đôi bằng viền và ruy băng thay vì bằng kích thước. */ .plans-equal{ grid-template-columns:1fr 1fr; align-items:stretch; } @media (max-width:720px){ .plans-equal{ grid-template-columns:1fr; } } .plans-equal .plan{ padding:24px; } /* Cụ thể hơn .plan.best .pprice, vốn đứng sau trong file nên sẽ thắng nếu không chỉ rõ. */ .plans-equal .plan .pprice, .plans-equal .plan.best .pprice{ font-size:2rem; } .plans-equal .plan .pnote{ flex:1; } .plans-equal .plan .btn{ margin-top:auto; } .plan .pname{ font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); } .plan.best .pname{ color:var(--accent-text); } .plan .pprice{ font-family:var(--serif); font-size:1.7rem; font-variant-numeric:tabular-nums; line-height:1; } .plan.best .pprice{ font-size:2.4rem; } .plan .pnote{ font-size:.86rem; color:var(--ink-soft); } .plan .pstrike{ font-size:.86rem; color:var(--ink-faint); text-decoration:line-through; } .ribbon{ align-self:flex-start; font-size:.67rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent); border-radius:6px; padding:.34em .7em; } /* ---------- thanh toán ---------- */ .pay-grid{ display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:start; } @media (max-width:620px){ .pay-grid{ grid-template-columns:1fr; justify-items:center; text-align:center; } } .demo-flag{ display:inline-block; font-size:.69rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-text); background:var(--accent-soft); border-radius:6px; padding:.42em .8em; line-height:1.4; } .qr-plate{ background:#FFFFFF; border-radius:14px; padding:14px; border:1px solid rgba(27,32,48,.16); line-height:0; } .qr-plate svg{ width:180px; max-width:100%; height:auto; display:block; } .pay-meta{ margin:14px 0 0; display:flex; flex-direction:column; gap:8px; font-size:.88rem; width:100%; } .pay-meta > div{ display:flex; justify-content:space-between; gap:14px; border-bottom:1px dotted var(--border); padding-bottom:7px; } .pay-meta > div:last-child{ border-bottom:none; padding-bottom:0; } .pay-meta dt{ color:var(--ink-faint); } .pay-meta dd{ margin:0; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; } /* ---------- các mục giới thiệu ở trang chủ ---------- */ .band{ background:var(--bg-alt); } .section-head{ max-width:62ch; } .section-head p{ margin-top:14px; font-size:1.02rem; } .table-scroll{ overflow-x:auto; border-radius:16px; border:1px solid var(--border); box-shadow:var(--shadow); margin-top:30px; } table.compare{ width:100%; border-collapse:collapse; min-width:620px; background:var(--card); } table.compare th, table.compare td{ padding:15px 17px; text-align:left; border-bottom:1px solid var(--border); font-size:.93rem; vertical-align:top; } table.compare thead th{ font-family:var(--serif); font-size:1.02rem; font-weight:700; background:var(--bg-alt); } table.compare th:first-child, table.compare td:first-child{ color:var(--ink-faint); font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; white-space:nowrap; } table.compare td.free{ color:var(--ink-faint); } table.compare td.paid{ color:var(--ink); font-weight:600; } table.compare th.paid-col{ color:var(--accent-text); } table.compare tbody tr:last-child td{ border-bottom:none; } .alt-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.55fr); gap:16px; margin-top:32px; align-items:start; } @media (max-width:980px){ .alt-grid{ grid-template-columns:1fr 1fr; } .alt-card.featured{ grid-column:1 / -1; } } @media (max-width:560px){ .alt-grid{ grid-template-columns:1fr; } } .alt-card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:21px; display:flex; flex-direction:column; gap:10px; } .alt-card .price{ font-size:1.28rem; font-weight:700; font-variant-numeric:tabular-nums; } .alt-card .name{ font-size:.85rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-faint); } .alt-card .note{ font-size:.86rem; color:var(--ink-soft); } .alt-card.featured{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--shadow); padding:clamp(23px,3vw,30px); gap:12px; } .alt-card.featured .name{ color:var(--accent-text); font-size:.9rem; letter-spacing:.05em; } .alt-card.featured .price{ font-family:var(--serif); font-size:clamp(1.9rem,3.3vw,2.6rem); line-height:1.05; } .alt-card.featured .note{ font-size:.94rem; color:var(--ink); } .alt-ribbon{ align-self:flex-start; font-size:.67rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent); border-radius:6px; padding:.34em .7em; } .alt-wins{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; } .alt-wins li{ display:flex; gap:9px; font-size:.87rem; color:var(--ink-soft); } .alt-wins li::before{ content:"✓"; color:var(--teal); font-weight:700; flex:none; } /* ---------- "bài test trả lời được gì" ---------- */ .qa-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:34px; } @media (max-width:1000px){ .qa-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:600px){ .qa-grid{ grid-template-columns:1fr; } } .qa-card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:11px; transition:border-color .18s ease, transform .18s ease; } .qa-card:hover{ border-color:var(--accent); transform:translateY(-2px); } .qa-q{ font-family:var(--serif); font-size:1.09rem; line-height:1.32; color:var(--ink); font-weight:600; text-wrap:balance; } .qa-a{ font-size:.88rem; color:var(--ink-soft); flex:1; } .qa-src{ font-size:.71rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--teal); display:flex; align-items:center; gap:6px; } .qa-src::before{ content:"→"; font-size:.9rem; } .qa-card.paid .qa-src{ color:var(--accent-text); } .qa-card.free .qa-src::before{ content:"✓"; } .contents-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:17px; margin-top:34px; } @media (max-width:860px){ .contents-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .contents-grid{ grid-template-columns:1fr; } } .content-card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:21px; } .content-card .num{ font-family:var(--serif); font-size:1.55rem; color:var(--teal); } .content-card h3{ margin-top:9px; font-size:1.03rem; } .content-card p{ margin-top:8px; font-size:.89rem; } .content-card .cnt{ margin-top:10px; font-size:.76rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); } .science-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:start; } @media (max-width:900px){ .science-grid{ grid-template-columns:1fr; gap:26px; } } .badge-list{ display:flex; flex-direction:column; gap:13px; margin-top:24px; } .badge{ display:flex; gap:14px; align-items:flex-start; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px 18px; } .badge .ico{ width:33px; height:33px; flex:none; border-radius:9px; background:var(--teal-soft); color:var(--teal); display:grid; place-items:center; font-size:1rem; } .badge p{ font-size:.86rem; margin-top:4px; } .disclaimer-box{ background:var(--card); border:1px dashed var(--border-strong); border-radius:14px; padding:21px; font-size:.86rem; color:var(--ink-faint); font-style:italic; } .faq-item{ border-bottom:1px solid var(--border); padding-block:17px; } .faq-item summary{ cursor:pointer; font-weight:700; font-size:1.01rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary::after{ content:"+"; font-size:1.4rem; color:var(--ink-faint); font-weight:400; transition:transform .2s ease; } .faq-item[open] summary::after{ transform:rotate(45deg); } .faq-item p{ margin-top:11px; font-size:.93rem; max-width:65ch; } .final-cta{ background:var(--ink); border-radius:26px; padding:clamp(34px,6vw,60px); text-align:center; } .final-cta h2{ color:var(--bg); } .final-cta p{ color:color-mix(in srgb, var(--bg) 75%, transparent); margin-top:13px; max-width:56ch; margin-inline:auto; } /* thanh điểm chạy dần từ 0 lên đúng điểm của người dùng */ .axis-fill{ width:0; transition:width .9s cubic-bezier(.22,.9,.3,1); } @media (prefers-reduced-motion: reduce){ .axis-fill{ transition:none; } } .axis-row{ cursor:default; } /* mục lục bấm được */ .toc-items li{ cursor:pointer; border-radius:7px; padding:2px 5px; margin-inline:-5px; transition:background .15s ease; } .toc-items li:hover{ background:var(--bg-alt); } .toc-items li .title{ text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:3px; } .rep-item:target, .rep-item.flash{ background:var(--teal-soft); border-radius:12px; padding-inline:14px; margin-inline:-14px; } .paywall{ transition:box-shadow .5s ease; scroll-margin-top:80px; } .paywall.flash{ box-shadow:0 0 0 5px var(--accent-soft), var(--shadow); } .rep-item{ transition:background .5s ease; scroll-margin-top:80px; } /* ---------- tương thích hai người ---------- */ .compat-hero{ display:grid; grid-template-columns:1fr auto 1fr; gap:22px; align-items:center; } @media (max-width:700px){ .compat-hero{ grid-template-columns:1fr; text-align:center; } } .compat-person{ display:flex; flex-direction:column; gap:4px; } .compat-person .who{ font-family:var(--serif); font-size:1.25rem; } .compat-person .ty{ font-size:.85rem; color:var(--ink-faint); } .compat-score{ display:grid; place-items:center; width:120px; height:120px; border-radius:50%; background:var(--teal-soft); border:3px solid var(--teal); margin-inline:auto; } .compat-score b{ font-family:var(--serif); font-size:2.1rem; color:var(--teal); line-height:1; } .compat-score span{ font-size:.7rem; color:var(--ink-faint); letter-spacing:.06em; text-transform:uppercase; } .dual-list{ display:flex; flex-direction:column; gap:14px; } .dual-row{ display:grid; grid-template-columns:120px 1fr 1fr 46px; gap:10px; align-items:center; font-size:.85rem; } @media (max-width:620px){ .dual-row{ grid-template-columns:96px 1fr 1fr 40px; font-size:.79rem; } } .dual-bar{ height:9px; border-radius:999px; background:var(--bg-alt); overflow:hidden; } .dual-bar i{ display:block; height:100%; border-radius:999px; } .dual-bar.a i{ background:var(--teal); } .dual-bar.b i{ background:var(--accent); } .dual-legend{ display:flex; gap:16px; flex-wrap:wrap; font-size:.82rem; color:var(--ink-faint); } .dual-legend b{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; } .upsell{ border:2px solid var(--teal); } .upsell-buy{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; border-top:1px solid var(--border); padding-top:20px; } .upsell-price{ font-family:var(--serif); font-size:2.1rem; line-height:1; font-variant-numeric:tabular-nums; } @media (max-width:520px){ .upsell-buy{ flex-direction:column; align-items:stretch; } .upsell-buy .btn{ width:100%; } } .invite-box{ background:var(--bg-alt); border:1px dashed var(--border-strong); border-radius:14px; padding:18px; } .invite-link{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.82rem; word-break:break-all; color:var(--ink); background:var(--card); border:1px solid var(--border); border-radius:9px; padding:10px 12px; display:block; } /* ---------- thanh xin đồng ý theo dõi ---------- */ /* Gọn hết mức: một dòng chữ và hai nút nhỏ, nép góc trái dưới. Đây là câu hỏi phụ, không nên chiếm chỗ như một thông báo quan trọng. */ /* Thanh xin phép. Bản cũ là một thẻ nhỏ nép ở góc trái dưới, chữ .79rem, nút .8rem. Đo được: 17 người nhìn thấy nó, 0 người bấm — không phải họ từ chối, họ lờ hẳn đi. Bản này trải hết chiều ngang, chữ to hơn, nút to hơn, và có viền trên màu nhấn để mắt bắt được. Vẫn KHÔNG chặn nội dung phía sau: che màn hình để ép bấm là đổi một con số đẹp lấy một trải nghiệm tệ. */ .consent-bar{ position:fixed; left:0; right:0; bottom:0; z-index:70; background:var(--card); border-top:3px solid var(--accent); box-shadow:0 -8px 30px -12px rgba(0,0,0,.28); padding:16px 22px calc(16px + env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; } .consent-bar .noi-dung{ flex:1 1 460px; max-width:640px; min-width:0; } .consent-bar p{ font-size:.94rem; line-height:1.5; margin:0; } .consent-bar p b{ color:var(--ink); } .consent-bar .acts{ display:flex; gap:10px; flex:none; } .consent-bar .acts .btn{ padding:.72em 1.5em; font-size:.94rem; border-radius:10px; min-height:48px; } .btn-sm{ padding:.45em .9em; font-size:.8rem; border-radius:8px; } @media (max-width:640px){ .consent-bar{ padding:14px 16px calc(14px + env(safe-area-inset-bottom)); gap:12px; } .consent-bar .noi-dung{ flex:1 1 100%; } .consent-bar .acts{ width:100%; } /* Trên điện thoại hai nút chia đôi bề ngang — vùng chạm đủ lớn để không phải nhắm, đó là nửa lý do bản cũ bị bỏ qua. */ .consent-bar .acts .btn{ flex:1; } } /* ---------- ô đồng ý trong form ---------- */ .check-row{ display:flex; gap:11px; align-items:flex-start; } .check-row input[type="checkbox"]{ width:19px; height:19px; margin:2px 0 0; flex:none; accent-color:var(--accent); cursor:pointer; } .check-row label{ font-size:.87rem; font-weight:400; color:var(--ink-soft); line-height:1.55; cursor:pointer; } .check-row a{ color:var(--accent-text); } /* ---------- trang chính sách ---------- */ .legal h2{ margin-top:36px; font-size:1.35rem; } .legal h3{ margin-top:24px; font-size:1.03rem; } .legal p, .legal li{ font-size:.94rem; max-width:70ch; } .legal p{ margin-top:11px; } .legal ul{ margin:11px 0 0; padding-left:20px; } .legal li{ margin-top:7px; color:var(--ink-soft); } .legal .updated{ font-size:.82rem; color:var(--ink-faint); } .legal table{ width:100%; border-collapse:collapse; margin-top:14px; font-size:.9rem; } .legal table th, .legal table td{ text-align:left; padding:11px 13px; border-bottom:1px solid var(--border); vertical-align:top; } .legal table th{ font-weight:700; background:var(--bg-alt); } .btn-danger{ background:var(--danger); color:var(--card); padding:.8em 1.4em; font-size:.94rem; } .btn-danger:hover:not(:disabled){ transform:translateY(-1px); } .foot-links{ display:flex; gap:18px; flex-wrap:wrap; font-size:.83rem; } .foot-links button{ background:none; border:none; padding:0; font-family:inherit; font-size:inherit; color:var(--accent-text); cursor:pointer; text-decoration:underline; } /* ---------- trang quản trị ---------- */ .stat-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:24px; } @media (max-width:900px){ .stat-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:520px){ .stat-grid{ grid-template-columns:1fr; } } .stat{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:5px; } .stat-label{ font-size:.74rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); } .stat-value{ font-family:var(--serif); font-size:1.7rem; line-height:1.1; font-variant-numeric:tabular-nums; } .stat-sub{ font-size:.78rem; color:var(--ink-faint); } .chart{ display:flex; align-items:flex-end; gap:3px; height:150px; padding-bottom:18px; border-bottom:1px solid var(--border); } /* max-width quan trọng: những ngày chưa có dữ liệu vẫn được vẽ, nhưng nếu không chặn bề rộng thì lúc mới có vài ngày, flex sẽ thổi mỗi cột to bằng nửa khung. */ .bar{ flex:1 1 0; max-width:34px; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; position:relative; } .bar-fill{ width:100%; background:var(--teal); border-radius:3px 3px 0 0; } /* Ngày không có lượt xem: một vạch mờ sát đáy, để thấy trục ngày vẫn liên tục. */ .bar-fill.trong{ height:2px !important; background:var(--border); border-radius:0; } .bar-lab{ position:absolute; bottom:-16px; font-size:.63rem; color:var(--ink-faint); font-variant-numeric:tabular-nums; white-space:nowrap; } /* Số ngay trên đầu cột. Chỉ có thuộc tính title thì phải rê chuột mới thấy, mà trang quản trị chủ yếu mở trên điện thoại — nơi không có chuột. */ .bar-so{ font-size:.6rem; line-height:1.2; color:var(--ink-soft); font-weight:700; font-variant-numeric:tabular-nums; margin-bottom:2px; } /* Dưới 26px thì con số không còn chỗ, ẩn đi cho khỏi chồng lên nhau — bảng số bên dưới biểu đồ vẫn cho đọc chính xác. */ @media (max-width:560px){ .bar-so{ display:none; } } .bang-mo{ cursor:pointer; font-size:.87rem; font-weight:700; color:var(--accent-text); } .cuon-ngang{ overflow-x:auto; max-height:340px; overflow-y:auto; } .admin-tbl{ width:100%; border-collapse:collapse; font-size:.85rem; } .admin-tbl th, .admin-tbl td{ text-align:left; padding:6px 10px; border-bottom:1px solid var(--border); } .admin-tbl th{ position:sticky; top:0; background:var(--card); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); } .admin-tbl td.p, .admin-tbl th.p{ text-align:right; font-variant-numeric:tabular-nums; } .admin-tbl td.tang{ color:var(--teal); } .admin-tbl td.giam{ color:var(--danger); } .admin-user{ border-top:1px solid var(--border); } .admin-user:first-child{ border-top:none; } .admin-user > summary{ cursor:pointer; list-style:none; padding:13px 0; display:grid; grid-template-columns:1.1fr 1.3fr auto; gap:14px; align-items:baseline; } .admin-user > summary::-webkit-details-marker{ display:none; } .admin-user > summary:hover .au-name{ color:var(--accent-text); } @media (max-width:760px){ .admin-user > summary{ grid-template-columns:1fr; gap:3px; } } .au-name{ font-weight:700; font-size:.95rem; } .au-mail{ font-size:.85rem; color:var(--ink-soft); word-break:break-all; } .au-meta{ font-size:.8rem; color:var(--ink-faint); white-space:nowrap; } .au-body{ padding:4px 0 18px; } /* Khối công cụ gửi thư giờ có hai hàng (chọn hồ sơ + giai đoạn, rồi các nút), nên xếp dọc; từng hàng bên trong mới xếp ngang. */ .mail-tools{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; } .mail-hang{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; } .mail-hang label{ font-size:.8rem; font-weight:700; color:var(--ink-soft); } .mail-hang select{ font:inherit; font-size:.85rem; padding:5px 9px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--ink); max-width:230px; } .mail-kq{ font-size:.8rem; } .pill{ font-size:.72rem; font-weight:700; border-radius:5px; padding:.18em .5em; white-space:nowrap; } .pill.ok{ color:var(--teal); background:var(--teal-soft); } .pill.wait{ color:var(--accent-text); background:var(--accent-soft); } .mono{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.82rem; } /* ---------- bản in / xuất PDF ---------- Trang hứa "báo cáo PDF tải về vĩnh viễn". Thay vì dựng bộ sinh PDF phía server (cần thêm thư viện và build step), dùng chính chức năng In sang PDF của trình duyệt — kết quả là file PDF thật, mở được ở mọi nơi. Phần CSS này quyết định bản in trông ra sao, nên nó chính là bố cục của file PDF. */ @media print{ header.site, footer.site, .consent-bar, .thanh-mo, .toast, .paywall, .upsell, .rep-locked, .toc-card, .btn, .btn-quiet, .unlock-inline, #coupleCard, .retake-card, .lan-chon{ display:none !important; } body{ background:#FFFFFF; color:#000000; font-size:11.5pt; } .view{ padding:0 !important; } .wrap{ max-width:none; padding:0; } .card{ box-shadow:none; border:none; padding:0; break-inside:avoid; } .profile-head{ grid-template-columns:1fr auto; gap:18px; } .profile-head svg{ max-width:220px; } /* Bỏ lọc làm dịu khi in: giấy luôn trắng, không có chuyện chói nền tối, mà nhiều máy in lại bỏ qua filter nên để đó chỉ tạo chênh lệch giữa bản xem và bản in. Ép in cả màu, thiếu dòng này thì trình duyệt in ra ô trắng. */ .kieu-anh{ max-width:220px; break-inside:avoid; } .kieu-anh img{ filter:none !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; } .the-kieu{ grid-template-columns:auto 1fr; gap:18px; } /* Mỗi phần bắt đầu ở trang mới, tiêu đề không bị mồ côi cuối trang */ .rep-part{ break-before:page; margin-top:0; } .rep-part:first-of-type{ break-before:auto; } .rep-part-head{ break-after:avoid; } .rep-item{ break-inside:avoid; padding-block:10px; } .rep-item p{ max-width:none; } .axis-list{ break-inside:avoid; } .axis-fill{ background:#555555 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; } .axis-track{ background:#DDDDDD !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; } /* Hình lục giác phải giữ được nét khi in: bỏ màu thì nó thành một khối xám đặc, mất hẳn ý nghĩa. Đổi sang thang xám in được thay vì tô màu thương hiệu. */ .khoi-hinh{ break-inside:avoid; } .luc-giac { max-width:320px; -webkit-print-color-adjust:exact; print-color-adjust:exact; } .lg-toi{ fill:#555555 !important; fill-opacity:.3 !important; stroke:#333333 !important; } .lg-cham{ fill:#333333 !important; } .lg-tb { fill:none !important; stroke:#999999 !important; } .lg-vong, .lg-nan{ stroke:#CCCCCC !important; } .lg-nhan{ fill:#333333 !important; } .axis-tb{ background:#333333 !important; box-shadow:0 0 0 1.5px #FFFFFF !important; } a[href]::after{ content:""; } /* đừng in URL sau mỗi liên kết */ .print-only{ display:block !important; } } .print-only{ display:none; } /* ---------- giữ chỗ để không xô lệch bố cục (CLS) ---------- Trang này dựng toàn bộ nội dung bằng JS, nên trong HTML gốc
rỗng hoàn toàn. Trình duyệt vẽ header rồi đặt footer ngay dưới nó ở y≈115, tới khi app.js chạy xong thì footer bị đẩy xuống y≈5193 — dịch hơn 5000px. Máy nhanh thì cú dịch xảy ra trước lần vẽ đầu nên không thấy; máy chậm hoặc mạng yếu thì thấy rõ, và đó là điểm CLS tệ mà Clarity báo. Giữ sẵn chiều cao bằng một màn hình: footer khởi đầu đã nằm dưới vùng nhìn, nên khi nội dung đổ vào, phần dịch chuyển nằm ngoài màn hình và không tính vào CLS. */ #app{ min-height:calc(100vh - 96px); } /* Thanh điều hướng bên phải cũng do JS đổ vào. Giữ sẵn chiều cao một hàng nút để header không co giãn. */ #navRight{ min-height:44px; display:flex; align-items:center; justify-content:flex-end; } /* ---------- hộp kết quả mẫu ở màn hình đầu ---------- Thay cho bốn dòng lợi ích từng đứng ở đây. Bốn dòng đó tốn 225px chiều cao và 260 ký tự, đẩy nút bấm xuống 730px — tức là dưới nếp gấp trên điện thoại thật, nơi vùng nhìn thấy chỉ còn 650–700px sau khi trừ thanh địa chỉ. Một biểu đồ nói cùng nội dung trong một cái liếc, và trả lời đúng câu hỏi của người mới vào: "tôi sẽ nhận được cái gì?". Bốn dòng kia chuyển xuống ngay dưới, không mất đi. */ .mau-kq{ border:1px solid var(--border); border-radius:14px; padding:12px 14px; background:var(--bg-alt); display:flex; align-items:center; gap:12px; } .mau-kq svg{ flex:none; width:100px; height:100px; } .mk-phai{ min-width:0; } .mk-nhan{ font:700 .68rem/1.2 var(--sans); letter-spacing:.07em; text-transform:uppercase; color:var(--teal); margin:0 0 7px; } .mk-diem{ display:flex; flex-direction:column; gap:2px; font-size:.82rem; line-height:1.45; color:var(--ink-soft); } .mk-diem b{ color:var(--ink); font-variant-numeric:tabular-nums; } @media (max-width:420px){ .mau-kq{ gap:8px; padding:10px; } .mau-kq svg{ width:84px; height:84px; } .mk-diem{ font-size:.78rem; } } /* ---------- "bạn nhận được gì" ---------- */ .nhan-duoc{ list-style:none; padding:0; margin:22px 0 4px; display:flex; flex-direction:column; gap:11px; } .nhan-duoc li{ display:flex; gap:11px; align-items:flex-start; font-size:1rem; line-height:1.5; color:var(--ink-soft); } .nhan-duoc b{ color:var(--ink); } .nd-ico{ color:var(--teal); font-size:.72rem; line-height:1.9; flex:none; } /* Khi bốn dòng này đứng riêng một dải (không còn chen trong cột hero), màn rộng xếp hai cột cho đỡ hụt hẫng; màn hẹp vẫn một cột. */ .nd-hang{ margin:0; } @media (min-width:760px){ .nd-hang{ display:grid; grid-template-columns:1fr 1fr; gap:14px 34px; } } /* Danh sách này nằm TRONG .hero-grid — cùng một section với hero, để hai khối không sinh ra khoảng trắng 144px (72px đệm dưới + 72px đệm trên). Vì thế nó là một ô của lưới hai cột, phải cho trải hết cả hàng. */ .hero-grid > .nd-hang{ grid-column:1 / -1; } /* ---------- phần "Về bản thân bạn" ---------- */ .vbt-top{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; } .vbt-chuong{ font-size:.74rem; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-faint); display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; } .vbt-chuong b{ color:var(--accent-text); font-weight:700; } .vbt-phu{ text-transform:none; letter-spacing:0; font-size:.8rem; } .vbt-con{ font-size:.78rem; color:var(--ink-faint); white-space:nowrap; } .vbt-hoi{ font-size:1.32rem; line-height:1.32; margin:0; } .vbt-dan{ font-size:.92rem; color:var(--ink-soft); margin:10px 0 0; } /* Lựa chọn dạng thẻ: nhãn đậm + một dòng giải thích, để chọn không phải đoán. */ .lua-chon-list{ display:flex; flex-direction:column; gap:10px; margin-top:20px; } .lua-chon{ display:block; width:100%; text-align:left; cursor:pointer; background:var(--card); border:1.5px solid var(--border); border-radius:12px; padding:14px 16px; font:inherit; color:inherit; transition:border-color .12s, background .12s, transform .06s; } .lua-chon:hover{ border-color:var(--accent); background:var(--bg-alt); } .lua-chon:active{ transform:scale(.995); } .lc-nhan{ display:block; font-weight:700; font-size:1rem; color:var(--ink); } .lc-phu{ display:block; font-size:.86rem; color:var(--ink-faint); margin-top:3px; } /* ---------- chặng nghỉ ---------- */ .chang-nghi{ text-align:center; } .cn-art{ max-width:300px; margin:0 auto 6px; } .cn-art svg{ width:100%; height:auto; display:block; } .cn-tieu{ font-size:1.42rem; line-height:1.3; max-width:22ch; margin-inline:auto; } .cn-than{ font-size:.98rem; color:var(--ink-soft); max-width:46ch; margin-inline:auto; } .cn-nut{ display:flex; flex-direction:column; align-items:center; gap:10px; } .chang-nghi.kieu-hoc{ background:var(--bg-alt); } /* ---------- thẻ nhịp trong bài làm ---------- */ .q-nhip{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; background:var(--bg-alt); border:1px solid var(--border); border-radius:10px; padding:9px 13px; margin:14px 0 4px; } .qn-loi{ font-size:.88rem; font-weight:600; color:var(--accent-text); } .qn-so{ font-size:.82rem; color:var(--ink-faint); font-variant-numeric:tabular-nums; white-space:nowrap; } .qn-so b{ color:var(--ink); } /* Nhãn phụ cạnh tên trường trong form */ .lb-phu{ font-weight:400; color:var(--ink-faint); font-size:.85em; } /* ---------- mốc nghỉ giữa bài ---------- */ .moc-giua{ text-align:left; } .moc-giua h2{ font-size:1.35rem; line-height:1.35; } .moc-giua .axis-list{ max-width:520px; } /* ---------- khối "Bài này đo gì?" gập lại dưới bài làm ---------- */ .quiz-info{ max-width:640px; margin:28px auto 0; } .quiz-info > summary{ cursor:pointer; list-style:none; font-size:.88rem; color:var(--ink-faint); padding:9px 0; text-align:center; } .quiz-info > summary::-webkit-details-marker{ display:none; } .quiz-info > summary:hover{ color:var(--accent-text); } .quiz-info .qi-body{ border:1px solid var(--border); border-radius:12px; padding:16px 18px; background:var(--bg-alt); } .quiz-info .qi-body p{ font-size:.88rem; color:var(--ink-soft); margin:0 0 10px; } .quiz-info .qi-body p:last-child{ margin-bottom:0; } /* ---------- bảng phễu trong trang quản trị ---------- */ table.admin-tbl{ width:100%; border-collapse:collapse; min-width:520px; } table.admin-tbl th, table.admin-tbl td{ text-align:left; padding:9px 12px; border-bottom:1px solid var(--border); font-size:.88rem; vertical-align:middle; } table.admin-tbl th{ font-weight:700; background:var(--bg-alt); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); } table.admin-tbl tr:last-child td{ border-bottom:none; } /* Thanh trực quan: dài theo tỉ lệ còn lại so với bước đầu. Là nên bắt buộc display:block, không thì width không ăn — đúng lỗi từng gặp ở .axis-fill. */ .pheu-thanh{ display:block; height:10px; border-radius:5px; background:var(--teal); min-width:2px; } .lan-chon{ border:1px solid var(--border); background:var(--bg); } .lan-chon select{ max-width:420px; } .retake-card{ border:1px solid var(--border); } .retake-row{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; } @media (max-width:560px){ .retake-row{ flex-direction:column; align-items:stretch; } .retake-row .btn{ width:100%; } } .profile-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; } .toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:.8em 1.3em; border-radius:11px; font-size:.9rem; font-weight:600; z-index:80; box-shadow:var(--shadow); max-width:90vw; } .spinner{ width:16px; height:16px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; display:inline-block; animation:spin .7s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } } /* ---------- nhấn mạnh cụm bán hàng chính ở trang chủ ---------- Người lướt trang đích chỉ dừng mắt vài chỗ. Cụm này là lời hứa khác biệt duy nhất so với mọi bài trắc nghiệm miễn phí khác, nên nó phải là một trong số đó. */ .nhan-manh{ background:linear-gradient(180deg, transparent 58%, var(--accent-soft) 58%); color:var(--ink); padding:0 2px; font-weight:700; } /* ---------- bộ lọc khoảng ngày của phễu ---------- */ .pheu-loc{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .pheu-loc select, .pheu-loc input[type="date"]{ font-family:inherit; font-size:.9rem; color:var(--ink); background:var(--bg); border:1px solid var(--border-strong); border-radius:9px; padding:.45em .6em; } .pheu-loc #pheuTuChon{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; } /* ---------- trang mở khoá ---------- Ba gói xếp ngang hàng, CÙNG bề rộng và cùng chiều cao. Gói 99k nổi lên bằng viền, nền và cỡ chữ giá chứ không bằng cách chiếm nhiều cột hơn — cột rộng khác nhau khiến mắt so giá bị lệch, và gói rẻ nhất trông như bị giấu đi. */ .cac-goi{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; align-items:stretch; } @media (max-width:820px){ .cac-goi{ grid-template-columns:1fr; } } .the-goi{ position:relative; display:flex; flex-direction:column; gap:9px; text-align:left; border:1px solid var(--border); border-radius:16px; padding:20px 18px; background:var(--bg); font-family:inherit; color:var(--ink); cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; } .the-goi:hover{ border-color:var(--ink-faint); } .the-goi .pnote{ flex:1; } .the-goi .the-gia{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; } /* Thẻ không có ruy băng vẫn phải chừa đúng chừng ấy chỗ, nếu không tên gói và giá của ba thẻ lệch nhau vài pixel và mắt so giá bị chệch. Dùng chính .ribbon rồi ẩn đi — đặt số cứng ở đây là để nó lệch ngay lần đầu ai đó sửa .ribbon. */ .ribbon-trong{ visibility:hidden; } /* Các quy tắc .pname/.pprice/.pnote/.pstrike ở trên chỉ ăn trong .plan. Thẻ ở trang mở khoá là .the-goi nên phải nhắc lại, không thì chữ rơi về mặc định của trình duyệt và giá 39k trông nhỏ như chú thích. */ .the-goi .pname{ font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); } .the-goi .pprice{ font-family:var(--serif); font-size:1.7rem; font-variant-numeric:tabular-nums; line-height:1; } .the-goi .pnote{ font-size:.86rem; color:var(--ink-soft); font-weight:400; } .the-goi .pstrike{ font-size:.86rem; color:var(--ink-faint); text-decoration:line-through; } /* Gói được nhấn: to hơn một bậc và có nền riêng. */ .the-goi-nhan{ border:2px solid var(--accent); background:var(--card); padding:22px 20px; } .the-goi-nhan .pprice{ font-size:2.4rem; } .the-goi-nhan .pname{ color:var(--accent-text); } /* Thẻ đang chọn — dấu tích ở góc và viền đậm. */ .the-goi .the-dau{ position:absolute; top:12px; right:12px; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; background:var(--accent); color:var(--accent-ink); opacity:0; transform:scale(.6); transition:opacity .15s ease, transform .15s ease; } .the-goi.dang-chon{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .the-goi.dang-chon .the-dau{ opacity:1; transform:scale(1); } /* Số tài khoản và nội dung chuyển khoản bấm để chép. */ .chep{ cursor:pointer; border-bottom:1px dashed var(--ink-faint); } .chep:hover{ border-bottom-style:solid; } .kh-qr .qr-plate svg{ width:240px; } /* ---------- thanh mở khoá bám đáy trang hồ sơ ---------- Dùng chung dáng với .thanh-mau ở trang hồ sơ mẫu; bottom đặt bằng JS (chuaChoThanh) vì có thể còn thanh khác nằm dưới. */ .thanh-mo{ position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--card); border-top:1px solid var(--border); box-shadow:0 -6px 24px -14px rgba(0,0,0,.3); padding:10px 20px calc(10px + env(safe-area-inset-bottom)); } .thanh-mo .tm-nhan{ background:var(--accent); color:var(--accent-ink); } .thanh-mo .btn{ flex:none; min-height:46px; } @media (max-width:640px){ .thanh-mo .tm-chu{ display:none; } .thanh-mo .btn{ flex:1; } } /* ---------- màn hình "bài này của ai" ---------- Dùng lại đúng thẻ .the-goi của trang mở khoá: hai lựa chọn, ngang hàng nhau. */ .cac-goi-2{ grid-template-columns:1fr 1fr; } @media (max-width:560px){ .cac-goi-2{ grid-template-columns:1fr; } } .nl-ten{ font-family:var(--serif); font-size:1.25rem; line-height:1.2; } /* ---------- hình lục giác sáu trục ---------- Toạ độ trong SVG là hệ 0–100 nên mọi độ dày nét cũng tính theo hệ đó: 0.4 ở đây là mảnh, không phải 0.4px. */ .khoi-hinh .hinh-boc{ display:flex; justify-content:center; } .luc-giac{ width:100%; max-width:440px; height:auto; } .lg-vong{ fill:none; stroke:var(--border); stroke-width:.4; } .lg-nan { stroke:var(--border); stroke-width:.35; } .lg-tb { fill:var(--ink-faint); fill-opacity:.14; stroke:var(--ink-faint); stroke-width:.5; stroke-dasharray:2 1.6; } .lg-toi { fill:var(--accent); fill-opacity:.28; stroke:var(--accent); stroke-width:1; stroke-linejoin:round; } .lg-cham{ fill:var(--accent); } .lg-nhan{ font-family:var(--sans); font-size:4.2px; font-weight:700; fill:var(--ink-soft); dominant-baseline:middle; } .chu-thich{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap; font-size:.82rem; color:var(--ink-soft); } .ct-o{ display:inline-flex; align-items:center; gap:7px; } .ct-o.ct-an{ display:none; } .ct-o i{ width:14px; height:10px; border-radius:3px; flex:none; } .ct-toi{ background:var(--accent); opacity:.55; border:1px solid var(--accent); } .ct-tb { background:var(--ink-faint); opacity:.22; border:1px dashed var(--ink-faint); } /* Vạch trung bình cắm lên từng thanh điểm — so được ngay trên chính thanh đó, không phải liếc sang chỗ khác. */ .axis-track{ position:relative; } .axis-tb{ position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:var(--ink-soft); box-shadow:0 0 0 1.5px var(--card); border-radius:1px; pointer-events:none; } /* ---------- hình xen giữa các phần hồ sơ ---------- Đặt giữa dòng chảy 60 mục chữ, nên phải khác hẳn thẻ nội dung về mặt thị giác — nền khác, viền mảnh — nếu không mắt lướt qua mà không dừng lại. */ .hinh-xen{ margin:30px 0; background:var(--bg-alt); border:1px solid var(--border); } @media print{ .hinh-xen{ break-inside:avoid; } } /* hai cột IQ / EQ */ .hx-doi{ display:flex; gap:28px; align-items:flex-end; justify-content:center; } .hx-cot{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:1 1 0; max-width:190px; } .hx-so{ font-family:var(--serif); font-size:1.9rem; line-height:1; font-variant-numeric:tabular-nums; } .hx-thanh{ display:block; width:52px; height:120px; border-radius:9px; background:var(--border); overflow:hidden; position:relative; } .hx-thanh > span{ position:absolute; left:0; right:0; bottom:0; display:block; background:var(--accent); border-radius:9px; } .hx-thanh.hx-teal > span{ background:var(--teal); } .hx-ten{ font-size:.84rem; text-align:center; color:var(--ink-soft); line-height:1.35; } .hx-ten small{ font-size:.74rem; color:var(--ink-faint); } /* hai thanh ngang: trục cao nhất và thấp nhất */ .hx-truc{ display:flex; flex-direction:column; gap:12px; } .hx-hang{ display:grid; grid-template-columns:minmax(88px,26%) 1fr auto; gap:12px; align-items:center; } .hx-nhan{ font-size:.86rem; color:var(--ink-soft); } .hx-line{ height:14px; border-radius:7px; background:var(--border); overflow:hidden; } .hx-fill{ display:block; height:100%; border-radius:7px; background:var(--accent); } .hx-fill.hx-mo{ background:var(--ink-faint); opacity:.55; } .hx-num{ font-variant-numeric:tabular-nums; font-weight:700; font-size:.92rem; min-width:2.2em; text-align:right; } .hx-khoang{ text-align:center; font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-text); font-weight:700; } /* lưới ô đúng/sai của phần suy luận */ .sl-luoi{ display:flex; flex-wrap:wrap; gap:9px; } .sl-o{ width:30px; height:30px; border-radius:8px; background:var(--border); border:1px solid var(--border-strong); } .sl-o.sl-dung{ background:var(--teal); border-color:var(--teal); } @media (max-width:520px){ .hx-doi{ gap:16px; } .hx-thanh{ width:42px; } .hx-hang{ grid-template-columns:minmax(74px,32%) 1fr auto; gap:9px; } } /* ---------- ba khối giá bằng nhau ---------- Gói 99k là gói muốn bán, nên nó phải thắng bằng NHẤN MẠNH chứ không bằng kích thước: cùng bề ngang với hai gói kia, nhưng viền đậm, ruy băng, giá to hơn và nút đặc màu. Trước đây gói 149k nằm riêng một khối rộng bằng cả hàng nên mắt đi tới nó trước — bán nhầm gói. */ /* 2×2, KHÔNG phải bốn khối một hàng. Đã thử bốn cột ở 1385px: .wrap bị chặn bề ngang nên mỗi ô chỉ còn 247px, chữ mô tả vỡ thành mười mấy dòng, nút "Mở khoá toàn bộ" xuống hai dòng và ô "Một phần" chừa một khoảng trống lớn ở giữa. Bốn cột không bao giờ đủ chỗ với lượng chữ này, nên không để lại nhánh đó cho ai đó tưởng nó dùng được ở màn rộng hơn. */ .plans-ba{ grid-template-columns:repeat(2, 1fr); align-items:stretch; } @media (max-width:640px){ .plans-ba{ grid-template-columns:1fr; } } .plans-ba .plan{ padding:22px; } .plans-ba .plan .pnote{ flex:1; } /* đẩy nút xuống chân, các nút thẳng hàng */ .plans-ba .plan .btn{ margin-top:auto; } /* Hai luật này phải theo đúng thứ tự: luật chung trước, luật của gói nổi sau. Cùng độ cụ thể (0,3,0) nên cái đứng sau thắng — viết ngược lại thì giá 99k không to hơn hai gói kia chút nào, đúng lỗi vừa mắc. */ .plans-ba .plan .pprice{ font-size:1.8rem; } .plans-ba .plan-noi{ border-width:2px; box-shadow:var(--shadow); } .plans-ba .plan-noi .pprice{ font-size:2.6rem; } /* gói hai người và gói ba: xanh, nhưng nút viền để không tranh với nút chính */ .plans-ba .plan-ba{ border-color:var(--teal); } .plans-ba .plan-ba .pname{ color:var(--teal); } .plans-ba .plan-doi{ border-color:var(--teal); } .plans-ba .plan-doi .pname{ color:var(--teal); } .ribbon.rib-teal{ background:var(--teal); color:var(--card); } .btn.nut-doi{ border-color:var(--teal); color:var(--teal); } .btn.nut-doi:hover{ background:var(--teal); color:var(--card); } /* Trên màn hẹp ba khối xếp dọc, nên gói muốn bán phải lên TRÊN CÙNG — 88% khách vào bằng điện thoại, và ở đó thứ tự dọc chính là thứ tự ưu tiên. */ @media (max-width:640px){ .plans-ba{ display:flex; flex-direction:column; } .plans-ba .plan-noi{ order:-1; } } /* ---------- khối "email này đã có hồ sơ" ---------- */ .khoi-cu{ border:2px solid var(--teal); background:var(--card); transition:box-shadow .5s ease; scroll-margin-top:80px; } .khoi-cu.flash{ box-shadow:0 0 0 5px color-mix(in srgb, var(--teal) 26%, transparent), var(--shadow); } .khoi-cu h3{ font-family:var(--serif); font-size:clamp(1.15rem,2.6vw,1.5rem); line-height:1.25; } .khoi-cu-nut{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .cu-bao{ flex:1 1 240px; min-width:0; } /* ---------- bậc thang sáu trục ---------- */ .bt-bang{ display:flex; flex-direction:column; gap:10px; } .bt-hang{ display:grid; grid-template-columns:auto minmax(84px,24%) 1fr auto; gap:10px; align-items:center; } .bt-thu{ width:22px; height:22px; border-radius:50%; background:var(--border); font:700 .72rem/22px var(--sans); text-align:center; color:var(--ink-soft); } .bt-hang:first-child .bt-thu{ background:var(--accent); color:var(--accent-ink); } .bt-ten{ font-size:.86rem; color:var(--ink-soft); } .bt-line{ height:13px; border-radius:7px; background:var(--border); overflow:hidden; } .bt-fill{ display:block; height:100%; border-radius:7px; background:var(--teal); } .bt-fill.bt-iq{ background:var(--accent); } .bt-num{ font-variant-numeric:tabular-nums; font-weight:700; font-size:.9rem; min-width:2.2em; text-align:right; } /* ---------- thời gian làm bài ---------- */ .tg-truc{ position:relative; padding-bottom:34px; } .tg-line{ position:relative; height:13px; border-radius:7px; background:var(--border); } .tg-fill{ position:absolute; left:0; top:0; bottom:0; border-radius:7px; background:var(--accent); } .tg-moc{ position:absolute; top:-6px; bottom:-6px; width:2px; background:var(--ink); opacity:.5; } .tg-nhan{ position:relative; height:0; } .tg-nhan span{ position:absolute; top:9px; transform:translateX(-50%); white-space:nowrap; font-size:.72rem; color:var(--ink-faint); } .tg-nhan .tg-ban{ color:var(--accent-text); font-weight:700; } .tg-nhan .tg-tb{ top:24px; } @media (max-width:520px){ .bt-hang{ grid-template-columns:auto minmax(70px,30%) 1fr auto; gap:8px; } .bt-ten{ font-size:.8rem; } } /* ---------- mục mổ xẻ phần suy luận ---------- */ .giai-suy-luan{ margin-top:-14px; } /* dính liền lưới đúng sai ở trên */ .giai-suy-luan .sl-nhan{ font-size:.7rem; font-weight:700; letter-spacing:.04em; color:var(--accent-text); background:var(--accent-soft); border-radius:5px; padding:.16em .45em; white-space:nowrap; } .giai-suy-luan table.compare td{ vertical-align:top; } .giai-suy-luan.rep-locked{ position:relative; } /* ---------- mục khoá kín (từ mục 37 trở đi) ---------- Một dòng gọn thay vì một thẻ có câu đọc thử và nút riêng. Ba chục mục cuối vì thế đọc ra như một danh sách niêm phong — vừa không lộ chữ nào, vừa rút ngắn trang đi hàng nghìn pixel, nên bảng giá không còn bị chôn ở giữa. */ /* Hàng khoá bấm được, nên phải TRÔNG như bấm được. Lề trong đặt sẵn chứ không thêm lúc rê chuột — thêm lúc đó thì cả ba chục hàng nhích ngang một nhịp mỗi lần con trỏ đi qua. */ .rep-item.rep-kin{ padding:11px 10px; margin-inline:-10px; border-bottom:1px dashed var(--border); cursor:pointer; border-radius:8px; transition:background .15s ease; } .rep-item.rep-kin:hover{ background:var(--bg-alt); } .rep-item.rep-kin:focus-visible{ background:var(--bg-alt); outline:2px solid var(--accent); outline-offset:-2px; } .rep-item.rep-kin h4{ display:flex; align-items:center; gap:10px; margin:0; font-size:.95rem; font-weight:500; color:var(--ink-faint); } .rep-item.rep-kin .n{ opacity:.65; } .rep-item.rep-kin .kin-o{ margin-left:auto; font-size:.85rem; opacity:.5; flex:none; } .rep-item.rep-kin::after{ content:none; } @media print{ .rep-item.rep-kin{ break-inside:avoid; } } /* Link chính sách ở chân trang là thẻ chứ không còn là