/* ========================================================================== phat-dark · GIAO DIỆN — thành phần dùng chung + từng trang. Mọi con số chép từ style nội tuyến trong 7 file .dc.html. Muốn đổi một số, mở file thiết kế gốc đối chiếu trước. ========================================================================== */ /* ---------- 1 · Khung trang + mảng cam mờ trôi nền ---------- */ .pd .pd-trang { position: relative; background: var(--ground); min-height: 100vh; } .pd .pd-nen { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .pd .pd-blob { position: absolute; } .pd .pd-blob--a { background: var(--o-500); } .pd .pd-blob--b { background: var(--o-700); } /* Thang 5 bậc */ .pd .pd-nen--thang { opacity: .6; } .pd .pd-nen--thang .pd-blob--a { top: -160px; right: -120px; width: 520px; height: 520px; filter: blur(90px); opacity: .5; animation: morphA 18s ease-in-out infinite, drift 26s ease-in-out infinite; } .pd .pd-nen--thang .pd-blob--b { bottom: -200px; left: -160px; width: 420px; height: 420px; filter: blur(90px); opacity: .5; animation: morphB 22s ease-in-out infinite; } /* Tự chấm */ .pd .pd-nen--tu-cham { opacity: .55; } .pd .pd-nen--tu-cham .pd-blob--a { top: -180px; left: 40%; width: 520px; height: 520px; filter: blur(100px); opacity: .45; animation: morphA 20s ease-in-out infinite, drift 30s ease-in-out infinite; } .pd .pd-nen--tu-cham .pd-blob--b { bottom: -200px; left: -160px; width: 420px; height: 420px; filter: blur(90px); opacity: .5; animation: morphB 24s ease-in-out infinite; } /* Blog (dùng lại cho 404, đăng ký, trang thường, lưu trữ) */ .pd .pd-nen--blog { opacity: .5; } .pd .pd-nen--blog .pd-blob--a { top: -160px; right: -140px; width: 480px; height: 480px; filter: blur(95px); opacity: .45; animation: morphA 19s ease-in-out infinite, drift 28s ease-in-out infinite; } .pd .pd-nen--blog .pd-blob--b { bottom: -220px; left: -120px; width: 420px; height: 420px; filter: blur(90px); opacity: .5; animation: morphB 23s ease-in-out infinite; } /* Bài viết */ .pd .pd-nen--bai { opacity: .4; } .pd .pd-nen--bai .pd-blob--a { top: -180px; right: -140px; width: 460px; height: 460px; filter: blur(100px); opacity: .4; animation: morphA 21s ease-in-out infinite; } .pd .pd-nen--bai .pd-blob--b { bottom: -220px; left: -140px; width: 400px; height: 400px; filter: blur(90px); opacity: .45; animation: morphB 25s ease-in-out infinite; } /* Về tôi */ .pd .pd-nen--ve-toi { opacity: .55; } .pd .pd-nen--ve-toi .pd-blob--a { top: -160px; right: -120px; width: 500px; height: 500px; filter: blur(95px); opacity: .45; animation: morphA 18s ease-in-out infinite, drift 27s ease-in-out infinite; } .pd .pd-nen--ve-toi .pd-blob--b { bottom: -200px; left: -150px; width: 420px; height: 420px; filter: blur(90px); opacity: .5; animation: morphB 23s ease-in-out infinite; } /* ---------- 2 · Thanh điều hướng (dính trên đầu) ---------- */ .pd .pd-nav { position: sticky; top: 12px; z-index: 20; max-width: 1120px; width: calc(100% - 48px); margin: 16px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 14px 12px 18px; background: var(--color-neutral-900); border: 1px solid var(--color-neutral-700); border-radius: 999px; box-shadow: var(--shadow-lg); } body.admin-bar.pd .pd-nav { top: 44px; } .pd .pd-nav__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--color-bg); } .pd .pd-nav__brand:hover { color: var(--color-bg); } /* vòng 7: logo mới (nhan_dien/logo-moi/C) là ảnh — cao cố định, rộng theo tỉ lệ file (không méo). ≤480px trong đổi sang icon.svg vuông. Bỏ đốm chữ P morphA cũ. */ .pd .pd-nav__brand img { display: block; height: 40px; width: auto; } .pd .pd-nav__links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .pd .pd-nav__link { padding: 9px 14px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; background: transparent; color: var(--color-neutral-200); transition: background .2s, color .2s; } .pd .pd-nav__link[aria-current="page"] { background: var(--color-neutral-800); color: var(--o-300); } .pd .pd-nav__link:hover { background: var(--o-500); color: var(--o-900); } .pd .pd-nav__cta { margin-left: 6px; padding: 11px 20px; border-radius: 999px; background: var(--o-grad); color: var(--o-900); font-weight: 700; font-size: 15px; text-decoration: none; transition: transform .2s, box-shadow .2s; } .pd .pd-nav__cta:hover { color: var(--o-900); transform: translateY(-2px); box-shadow: var(--o-glow); } /* Dải chứa các mục: màn rộng thì "trong suốt" với bố cục (y như bản thiết kế) */ .pd .pd-nav__cuon { display: contents; } /* Vòng 14 lượt 2: "Bỏ qua, vào thẳng nội dung" cuộn
lên mép màn → chừa đáy thanh dính (top 12 + cao đo 67,3–72,3 theo cỡ chữ = tới 84,3) + 4px dư */ .pd #noi-dung { scroll-margin-top: 88px; } /* ≤640px (vá vòng 2 theo P3): gọn 1 dòng, cao ≤64px — logo | dải mục cuộn ngang | nút chính. Bản cũ gãy 3 dòng, cao 173px ở 375 và 218px ở 320 (25–34% màn), bo 999px thành hình thấu kính. Mọi mục bấm cao 44px. Nút chính đứng NGOÀI dải cuộn nên luôn hiện trọn. Vòng 14 lượt 2: mở tới 712px — bố cục màn rộng cần 660,1px cho thanh có nút (khổ ≥ 708,1), nên 641–708 gãy 2 hàng thấu kính 127px; +4px dư. Deck đổi cùng mốc trong trinh-chieu.css. */ @media (max-width: 712px) { .pd #noi-dung { scroll-margin-top: 66px; } /* top 8 + cao 58 */ .pd .pd-nav { width: calc(100% - 24px); margin-top: 12px; top: 8px; flex-wrap: nowrap; gap: 8px; padding: 6px 6px 6px 10px; } .pd .pd-nav__brand { flex: none; gap: 8px; min-height: 44px; min-width: 44px; justify-content: center; } .pd .pd-nav__links { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; gap: 6px; } .pd .pd-nav__cuon { display: flex; gap: 2px; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .pd .pd-nav__cuon::-webkit-scrollbar { display: none; } /* mờ mép khi còn mục bị khuất (phat.js gắn lớp theo vị trí cuộn) */ .pd .pd-nav__cuon.is-con-phai { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); } .pd .pd-nav__cuon.is-con-trai { -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px); mask-image: linear-gradient(90deg, transparent, #000 22px); } .pd .pd-nav__cuon.is-con-trai.is-con-phai { -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent); } .pd .pd-nav__link { flex: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; font-size: 14px; white-space: nowrap; } .pd .pd-nav__cuon .pd-nav__link:focus-visible { outline-offset: -3px; } .pd .pd-nav__cta { flex: none; margin-left: 0; min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; font-size: 14px; white-space: nowrap; } } /* Vòng 14 (phương án A, J4 đo 14/09): dải cuộn quá hẹp cắt chữ mục sát nút → khổ không đủ chỗ cho logo + 3 mục + nút trên 1 hàng thì xuống 2 hàng: hàng 1 logo + nút, hàng 2 các mục chia đều, không cuộn. 1 hàng cần 584,1px (logo đủ, ≥481px) + 4px dư → khổ ≥613 mới đủ. Bo 28px = bo nút 22 + đệm 6 (không thấu kính). Thanh không nút (Tự chấm, bài viết): dải đứng cạnh logo như cũ, thiếu chỗ thì flex-wrap tự đẩy xuống hàng 2. Trang chủ (deck, 2 mục) có ngưỡng riêng trong trinh-chieu.css. Số đo: _qc/phat-dark/vong-14/. */ @media (max-width: 612px) { /* lượt 2: đích neo chừa thanh 2 hàng (top 8 + cao 106). Thanh không nút tự xuống hàng nên CSS không biết đang 1 hay 2 hàng → lấy mức 2 hàng cho mọi trang (1 hàng thì dư 48px, không che). h2 mục lục bài: đáy thanh + 12 (thêm "main" để thắng luật 96px gốc nằm phía dưới file) */ .pd #noi-dung { scroll-margin-top: 114px; } .pd main .pd-prose h2 { scroll-margin-top: 126px; } .pd .pd-nav:not(.pd-nav--deck) { flex-wrap: wrap; row-gap: 4px; border-radius: 28px; } .pd .pd-nav:not(.pd-nav--deck) .pd-nav__links { display: contents; } .pd .pd-nav:not(.pd-nav--deck) .pd-nav__cuon { order: 2; flex: 1 0 100%; } .pd .pd-nav:not(.pd-nav--deck) .pd-nav__cuon .pd-nav__link { flex: 1 1 0; justify-content: center; } .pd .pd-nav:not(.pd-nav--deck) .pd-nav__cuon:only-child { flex: 0 1 auto; margin-left: auto; } .pd .pd-nav:not(.pd-nav--deck) .pd-nav__cuon:only-child .pd-nav__link { flex: none; } } /* Vòng 22 (Anh Phát 23/09 — cùng vá với trinh-chieu.css): thanh KHÔNG nút (bài viết, "Trang chủ" ghép thêm từ vòng 21 bỏ deck) đo được gãy 2 hàng ở 320–352px dù ≥360px đã đủ 1 hàng (mục "chia đều hàng 2" ở trên chỉ áp khi CÓ nút — trang không nút dựa vào flex-wrap tự nhiên của .pd-nav, thiếu ~24–40px ở khổ hẹp nhất). Ép nowrap + thu đệm/cỡ chữ thêm một nấc, không đụng thanh có nút (612px vẫn theo luật cũ, chưa đo thấy lỗi). */ /* Vòng 23 (Anh Phát lượt 2 — cùng vá với trinh-chieu.css): logo lệch lề y hệt thanh trang chủ, cùng gốc (khoảng trống ẩn trong ảnh icon). Cùng con số 8px→2px, đo lại thấy lề trái/phải xích lại gần nhau đáng kể (còn lệch ~4px do bên phải là CHỮ "Blog" chứ không phải khối đặc như nút CTA — glyph tự nhiên không phủ kín tới mép, đây là giới hạn vật lý của chữ, không cố nặn cho khít tuyệt đối vì sẽ phải đụng padding riêng của .pd-nav__link cuối cùng, rủi ro hơn lợi). */ /* Vòng 24 (23/09, Anh Phát báo ảnh chụp thật — trang bị tràn ngang ở /blog/): gốc là .pd-nav__cuon còn giữ `flex: 1 0 100%` (flex-shrink 0, flex-basis 100%) từ luật ≤612px (dòng 111, đúng khi cuon đứng một mình ở HÀNG 2). Luật ≤495px ép cả thanh về 1 HÀNG (nowrap !important) nhưng không reset flex-basis của cuon → trình duyệt vẫn đòi cho cuon 100% bề ngang trong khi giờ nó phải chia hàng với logo+nút, đẩy .pd-nav (không có overflow:hidden) tràn 139px ra ngoài khung nhìn, kéo theo CẢ TRANG cuộn ngang (đo Playwright 390px: docScrollWidth 519 / clientWidth 380 trên /blog/ VÀ /thang-5-bac/ — không phải riêng mục đang chọn, bất kỳ trang nào có đủ logo+nút "Tự chấm bậc"+3 mục đều dính; /tu-cham/ thoát vì tự ẩn nút khi đang đứng đúng trang đó, tổng bề ngang nhỏ hơn ngưỡng vỡ). Sửa: cho cuon được CO LẠI cùng hàng (flex-shrink:1, flex-basis:auto) — logo và nút vẫn `flex:none` (dòng 83/96) nên giữ nguyên cỡ, phần dư ít thì dải mục tự cuộn ngang nội bộ (overflow-x:auto + mép mờ đã có sẵn dòng 90–93), không tràn ra ngoài .pd-nav nữa. */ @media (max-width: 495px) { .pd .pd-nav:not(.pd-nav--deck) { flex-wrap: nowrap !important; gap: 4px; width: calc(100% - 16px); padding: 6px 6px 6px 2px; } .pd .pd-nav:not(.pd-nav--deck) .pd-nav__brand { gap: 4px; } .pd .pd-nav:not(.pd-nav--deck) .pd-nav__cuon { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; gap: 2px; } .pd .pd-nav:not(.pd-nav--deck) .pd-nav__link { padding: 0 6px; font-size: 13px; } .pd .pd-nav:not(.pd-nav--deck) .pd-nav__cta { margin-left: 0; padding: 0 9px; font-size: 13px; } } /* ---------- 3 · Khung chữ, xuất hiện, nhãn, tiêu đề ---------- */ .pd .pd-khung { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 0 24px; text-wrap: pretty; } .pd .pd-khung--860 { max-width: 860px; } .pd .pd-reveal { animation: reveal .8s cubic-bezier(.2,.7,.3,1) both; } /* Việc 6 / B2 (WP3 đặc tả `danh_gia_2309/DE_XUAT_NANG_CAP_TRAI_NGHIEM.md`): hiện dần cho ĐÚNG 6 loại khối thân bài khi cuộn tới — figure, .pd-net, .pd-ss, .pd-luong, .pd-cau-mau, blockquote. KHÔNG áp cho p/li/h2 (đọc đoạn văn hiện dần từng khối là tật AI, làm chậm việc đọc). 340ms — ngắn hơn hẳn .pd-reveal (800ms, giữ nguyên cho khối đầu trang .pd-bv-dau, không đụng ở đây). 🔴 Bẫy `nen.css` dòng ~290 (`prefers-reduced-motion: reduce` huỷ transition toàn cục nhưng KHÔNG khôi phục opacity:0): lớp .pd-b2-cho CHỈ được JS gắn khi KHÔNG bật giảm chuyển động (xem phat.js), và CHỈ có hiệu lực dưới html.js — tắt JS thì lớp không tồn tại, khối hiện đủ ngay từ đầu. */ /* :not(.pd-b2-hien) — JS KHÔNG bao giờ gỡ .pd-b2-cho, chỉ THÊM .pd-b2-hien khi vào khung nhìn, nên luật ẩn tự vô hiệu ngay khi thêm lớp hiện (không tranh chấp độ ưu tiên giữa 2 lớp cùng tồn tại). */ html.js .pd-prose figure.pd-b2-cho:not(.pd-b2-hien), html.js .pd-prose .pd-net.pd-b2-cho:not(.pd-b2-hien), html.js .pd-prose .pd-ss.pd-b2-cho:not(.pd-b2-hien), html.js .pd-prose .pd-luong.pd-b2-cho:not(.pd-b2-hien), html.js .pd-prose .pd-cau-mau.pd-b2-cho:not(.pd-b2-hien), html.js .pd-prose blockquote.pd-b2-cho:not(.pd-b2-hien) { opacity: 0; transform: translateY(12px); } .pd-prose figure.pd-b2-cho, .pd-prose .pd-net.pd-b2-cho, .pd-prose .pd-ss.pd-b2-cho, .pd-prose .pd-luong.pd-b2-cho, .pd-prose .pd-cau-mau.pd-b2-cho, .pd-prose blockquote.pd-b2-cho { transition: opacity .34s cubic-bezier(.2,.7,.3,1), transform .34s cubic-bezier(.2,.7,.3,1); } /* Việc 3 (24/09/2026): hiện lần lượt các hàng bậc (.pd-hang màn 3 trang chủ · .pd-th-bac /thang-5-bac/) khi khối vào khung nhìn — CSS + IntersectionObserver thuần, không thư viện ngoài (thay bac-stagger.js/vendor/motion.mjs cũ, chưa từng chạy được — xem hienDanHangBac() trong phat.js). Cùng khuôn itNhun/html.js/:not() đã dùng ở B2/B4 trên: JS CHỈ gắn .pd-hb-cho khi KHÔNG bật giảm chuyển động; JS lỗi hoặc tắt thì lớp không tồn tại, hàng hiện đủ ngay từ đầu. Chỉ transform + opacity — KHÔNG đụng .pd-hang__so (44px/64px) hay max-height:760px của màn 3. Trễ từng hàng (~70ms) đặt bằng JS qua transition-delay (số hàng đổi theo trang, không hợp để khai cứng :nth-child như B4). Cần độ ưu tiên (0,3,0)+ để THẮNG `.pd .pd-hang { transition: transform .18s, border-color .18s }` của trinh-chieu.css (nạp SAU giao-dien.css) — phat.js tự gỡ .pd-hb-cho sau khi hiệu ứng xong để trả lại đúng transition hover gốc 0,18s, không đọng lại vĩnh viễn. */ html.js .pd .pd-hang.pd-hb-cho:not(.pd-hb-hien), html.js .pd .pd-th-bac.pd-hb-cho:not(.pd-hb-hien) { opacity: 0; transform: translateY(12px); } .pd .pd-hang.pd-hb-cho, .pd .pd-th-bac.pd-hb-cho { transition: opacity .42s cubic-bezier(.2,.7,.3,1), transform .42s cubic-bezier(.2,.7,.3,1); } .pd .pd-kicker { align-self: flex-start; padding: 8px 16px; border-radius: 999px; background: var(--o-800); border: 1px solid var(--o-600); color: var(--o-200); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .pd .pd-grad-chu { background: var(--o-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .pd .pd-h1 { font-family: var(--font-heading); line-height: 1.18; margin: 0; } .pd .pd-h1--thang { font-size: clamp(36px, 5.2vw, 60px); max-width: 20ch; } .pd .pd-h1--tu-cham { font-size: clamp(34px, 5vw, 56px); max-width: 22ch; } .pd .pd-h1--blog { font-size: clamp(34px, 5vw, 58px); max-width: 24ch; } .pd .pd-h1--ve-toi { font-size: clamp(34px, 5vw, 58px); max-width: 22ch; } .pd .pd-lede { margin: 0; line-height: 1.6; color: var(--color-neutral-300); } .pd .pd-lede--19 { font-size: 19px; max-width: 56ch; } .pd .pd-lede--18 { font-size: 18px; max-width: 56ch; } .pd .pd-lede--58 { max-width: 58ch; } .pd .pd-nhan-muc { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-400); font-weight: 700; margin-bottom: 12px; } .pd .pd-nhan-muc--14 { margin-bottom: 14px; } .pd .pd-hang-nut { display: flex; gap: 12px; flex-wrap: wrap; } /* Đầu trang thường (Tự chấm, Blog, 404, Đăng ký) */ .pd .pd-dau { display: flex; flex-direction: column; } .pd .pd-dau--tu-cham { padding: 64px 0 40px; gap: 20px; } .pd .pd-dau--blog { padding: 64px 0 36px; gap: 18px; } .pd .pd-dau--hep { padding: 64px 0 40px; gap: 20px; } /* ---------- 4 · Nút ---------- */ .pd .pd-nut, .pd .pd-nut-vien, .pd .pd-nut-toi, .pd .pd-nut-toi-vien { display: inline-block; border-radius: 999px; font-family: var(--font-body); font-weight: 700; text-decoration: none; cursor: pointer; } .pd .pd-nut { border: none; background: var(--o-grad); color: var(--o-900); padding: 15px 26px; font-size: 16px; transition: transform .2s, box-shadow .2s; } .pd .pd-nut:hover { color: var(--o-900); } .pd .pd-nut--15 { padding: 15px 26px; font-size: 16px; } .pd .pd-nut--16 { padding: 16px 28px; font-size: 17px; } .pd .pd-nut--16b { padding: 16px 26px; font-size: 16px; } .pd .pd-nut--14 { padding: 14px 24px; font-size: 16px; } .pd .pd-nut--13 { padding: 13px 22px; font-size: 15px; } .pd .pd-nut--12 { padding: 12px 20px; font-size: 15px; } .pd .pd-nut--sang { box-shadow: var(--o-glow); } .pd .pd-nut--nang3:hover { transform: translateY(-3px); } .pd .pd-nut--nang2:hover { transform: translateY(-2px); box-shadow: var(--o-glow); } .pd .pd-nut-vien { background: transparent; border: 2px solid var(--o-500); color: var(--o-300); padding: 15px 26px; font-size: 16px; } .pd .pd-nut-vien:hover { color: var(--o-300); } .pd .pd-nut-vien--15 { padding: 15px 26px; font-size: 16px; } .pd .pd-nut-vien--16 { padding: 16px 28px; font-size: 17px; } .pd .pd-nut-vien--16b { padding: 16px 26px; font-size: 16px; } .pd .pd-nut-vien--14 { padding: 14px 24px; font-size: 16px; } .pd .pd-nut-vien--13 { padding: 13px 24px; font-size: 15px; } .pd .pd-nut-vien--o4 { border-color: var(--o-400); } .pd .pd-nut-vien--doi { transition: background .2s, color .2s; } .pd .pd-nut-vien--doi:hover { background: var(--o-500); color: var(--o-900); } .pd .pd-nut-vien--o4.pd-nut-vien--doi:hover { background: var(--o-400); } .pd .pd-nut-toi { border: none; background: var(--o-900); color: var(--o-200); padding: 15px 26px; font-size: 16px; } .pd .pd-nut-toi:hover { color: var(--o-200); } .pd .pd-nut-toi-vien { background: transparent; border: 2px solid var(--o-900); color: var(--o-900); padding: 15px 26px; font-size: 16px; } .pd .pd-nut-toi-vien:hover { color: var(--o-900); } /* đang gửi (phat.js khoá nút) */ .pd .pd-nut:disabled, .pd .pd-nut-vien:disabled { opacity: .55; cursor: progress; transform: none; box-shadow: none; } .pd .pd-nut-vien:disabled:hover { background: transparent; color: var(--o-300); } /* ---------- 5 · Chân trang ---------- */ .pd .pd-chan { margin-top: 40px; border-top: 1px solid var(--color-neutral-800); padding: 44px 0 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 36px 40px; } .pd .pd-chan__cot { display: flex; flex-direction: column; gap: 12px; } .pd .pd-chan__cot--dau { gap: 14px; max-width: 34ch; } .pd .pd-chan__cot--cuoi { gap: 14px; } .pd .pd-chan__brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--color-bg); } .pd .pd-chan__brand:hover { color: var(--color-bg); } /* vòng 7: cùng logo với thanh điều hướng (logo.svg 269,66×64 → cao 38px) */ .pd .pd-chan__brand img { display: block; height: 38px; width: auto; } .pd .pd-chan__p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-neutral-400); } .pd .pd-chan__nhan { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--color-neutral-500); } .pd .pd-chan__lk { font-size: 15px; text-decoration: none; color: var(--color-neutral-300); } .pd .pd-chan__lk:hover { color: var(--o-400); } .pd .pd-chan__muc { font-size: 15px; color: var(--color-neutral-400); } .pd .pd-chan__nut { align-self: flex-start; } .pd .pd-chan__day { grid-column: 1 / -1; border-top: 1px solid var(--color-neutral-800); padding-top: 22px; display: flex; gap: 14px 26px; flex-wrap: wrap; justify-content: space-between; font-size: 14px; color: var(--color-neutral-500); } /* vòng 7: dòng ghi nhận AI (phap_ly/nhan-noi-dung-ai.md 2.2) — dòng riêng, cùng cỡ chữ dải cuối */ .pd .pd-chan__ai { flex-basis: 100%; } /* ---------- 6 · Khung ảnh giữ chỗ (thay ) ---------- Chưa có ảnh: chỉ còn lớp trang trí (cam đậm, sọc mờ, quầng sáng góc) — không in chữ nội bộ (vá vòng 3). */ .pd .pd-anh { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--o-800); } .pd .pd-anh__img { width: 100%; height: 100%; object-fit: cover; } .pd .pd-anh__cho { position: absolute; inset: 0; } .pd .pd-anh__cho, .pd .pd-hinh__khung { background: radial-gradient(120% 90% at 100% 0%, rgba(255, 138, 43, .22), transparent 60%), radial-gradient(70% 60% at 0% 100%, rgba(22, 20, 15, .35), transparent 70%), repeating-linear-gradient(135deg, rgba(255, 190, 133, .09) 0 1px, transparent 1px 11px), var(--o-800); } /* Nhãn ảnh AI (vá vòng 5 — Luật AI 134/2025, NĐ 142/2026 Đ.18, phap_ly/nhan-noi-dung-ai.md 2.3):
NGAY DƯỚI ảnh, cỡ chữ chú thích của site (13px), không đè lên ảnh, không mờ. Chữ --color-neutral-200 #eee7db: 15,6:1 trên nền trang #16140f · 11,3:1 trên thẻ #2e2b25. */ .pd .pd-anh__ai { display: block; margin: 0; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: normal; color: var(--color-neutral-200); } /* khung cũ (Blog, màn 7) cao cố định: ảnh co lại nhường chỗ cho dòng nhãn nằm dưới, trong khung */ .pd .pd-anh--co-nhan { display: flex; flex-direction: column; margin: 0; background: var(--ground); } .pd .pd-anh--co-nhan > .pd-anh__img { flex: 1 1 0; min-height: 0; } /* lề trái 18px: khung bo góc 28px (màn 7, bài nổi bật Blog) — chữ không chạm phần góc bị cắt */ .pd .pd-anh--co-nhan > .pd-anh__ai { flex: none; padding: 6px 18px; background: var(--ground); } /* Ảnh AI 11/09: thẻ Blog cắt ảnh 16:9 còn ~2,4:1 (mất ~27% chiều cao). Hai ảnh có mặt Anh để đầu gần mép trên — cắt giữa là mất tóc/đỉnh đầu → neo lên trên, mặt nằm trọn trong khung (đo: _qc/phat-dark/vong-5/sau-anh-that/chi-tiet). */ .pd [data-anh="blog-02"] > .pd-anh__img { object-position: 50% 12%; } /* Vòng 8 (mặt v2 12/09): blog-05 đỉnh tóc ~7 %, cằm ~56 % → 10 % giữ trọn tóc + cằm ở thẻ hẹp nhất (1024px, còn 52 % cao). banner-bai-tru (thẻ Blog + thẻ trang chủ 3:1): đỉnh tóc ~20 %, cằm ~54 % — cắt giữa (24–76 %) cụt tóc → neo 35 % (còn thấy từ ~17 %). */ .pd [data-anh="blog-05"] > .pd-anh__img { object-position: 50% 10%; } .pd [data-anh="banner-bai-tru"] > .pd-anh__img { object-position: 50% 35%; } /* ---------- 6b · Khung ảnh minh hoạ vòng 5 (khối phat/hinh) ---------- Mỗi khung đọc một file cố định trong assets/img, tỉ lệ cố định, ảnh phủ kín (cover). Chưa có file: khung trang trí cùng tông khung cũ (nền trên), gắn data-spot nên rê chuột vẫn có đốm cam — đốm nằm trên nền khung, dưới ảnh. Nhãn AI là figcaption dưới khung. */ .pd .pd-hinh { margin: 0; min-width: 0; } .pd .pd-hinh__khung { position: relative; overflow: hidden; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); } .pd .pd-hinh__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pd .pd-hinh > .pd-anh__ai { margin-top: 8px; } /* bac — trong thẻ bậc (Thang 5 bậc): màn hẹp là dải 2:1 trên đầu thẻ; ≥900px là cột trái 1:1 */ .pd .pd-hinh--bac { grid-column: 1 / -1; width: 100%; max-width: 460px; } .pd .pd-hinh--bac .pd-hinh__khung { aspect-ratio: 2 / 1; border-radius: var(--radius-md); } .pd .pd-th-bac.is-chon .pd-anh__ai { color: var(--o-900); } /* thẻ đổ cam: mực tối ≥ 5,66:1 */ /* cột 1:1 ở ≥900px: xem mục THANG 5 BẬC (phải đứng sau luật lưới gốc của .pd-th-bac) */ /* dau — cạnh tiêu đề (Tự chấm, Đăng ký, 404): màn hẹp là dải 2:1 dưới lời dẫn; ≥760px cột phải 1:1 */ .pd .pd-dau-hinh { display: grid; grid-template-columns: minmax(0, 1fr); } .pd .pd-hinh--dau { width: 100%; max-width: 460px; margin: -16px 0 36px; } .pd .pd-hinh--dau .pd-hinh__khung { aspect-ratio: 2 / 1; } @media (min-width: 760px) { .pd .pd-dau-hinh { grid-template-columns: minmax(0, 1fr) 232px; column-gap: 40px; align-items: end; } .pd .pd-hinh--dau { margin: 0 0 40px; max-width: none; } .pd .pd-hinh--dau .pd-hinh__khung { aspect-ratio: 1 / 1; } } /* tc · vt — khung blob chân dung (trang chủ màn 1, Về tôi): 4:3; nhãn nằm ngoài blob, canh giữa */ .pd .pd-hinh--tc .pd-hinh__khung, .pd .pd-hinh--vt .pd-hinh__khung { aspect-ratio: 4 / 3; } .pd .pd-hinh--tc > .pd-anh__ai, .pd .pd-hinh--vt > .pd-anh__ai { text-align: center; } /* banner — đầu bài viết (khối phat/bai-banner, vòng 6): ảnh gốc 16:9; màn hẹp giữ 16:9, ≥760px cắt 12:5. Chuẩn vùng an toàn + cỡ xuất: BRAIN_KENH/02_CHUAN_BANNER_BAI_VIET.md */ .pd .pd-hinh--banner { margin: 0 0 48px; } .pd .pd-hinh--banner .pd-hinh__khung { aspect-ratio: 16 / 9; } @media (min-width: 760px) { .pd .pd-hinh--banner .pd-hinh__khung { aspect-ratio: 12 / 5; } } /* ---------- 7 · Chip chữ P (tác giả) ---------- */ .pd .pd-chip-p { width: 38px; height: 38px; flex: none; background: var(--o-grad); color: var(--o-900); display: grid; place-items: center; font-family: var(--font-heading); font-size: 17px; animation: morphA 14s ease-in-out infinite; } /* ---------- 8 · Khối cam đậm kêu gọi (Thang, Blog, Về tôi) ---------- */ .pd .pd-keu { position: relative; overflow: hidden; background: var(--o-800); border: 1px solid var(--o-600); border-radius: var(--radius-lg); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); align-items: center; } .pd .pd-keu__blob { position: absolute; background: var(--o-500); filter: blur(50px); } .pd .pd-keu__trong { position: relative; } .pd .pd-keu__t { font-family: var(--font-heading); line-height: 1.22; } .pd .pd-keu__p { margin: 0; font-size: 17px; color: var(--o-200); } /* ========================================================================== THANG 5 BẬC ========================================================================== */ .pd .pd-th-dau { padding: 72px 0 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 40px; align-items: end; } .pd .pd-th-dau__trai { display: flex; flex-direction: column; gap: 22px; } .pd .pd-th-cua-ban { background: var(--color-neutral-900); border: 1px solid var(--color-neutral-700); border-radius: var(--radius-lg); padding: 26px 28px; } .pd .pd-th-cua-ban__k { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--o-400); font-weight: 700; margin-bottom: 12px; } .pd .pd-th-cua-ban__t { font-family: var(--font-heading); font-size: 30px; line-height: 1.24; margin-bottom: 8px; } .pd .pd-th-cua-ban__p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--color-neutral-400); } .pd .pd-th-ds { display: flex; flex-direction: column; gap: 18px; margin-bottom: 88px; } .pd .pd-th-bac { position: relative; overflow: hidden; background: var(--color-neutral-900); border: 2px solid var(--color-neutral-700); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 26px 40px; color: var(--color-bg); } .pd .pd-th-bac__trai { display: flex; flex-direction: column; gap: 14px; } .pd .pd-th-bac__dau { display: flex; align-items: center; gap: 16px; } /* vá 23/09/2026 (Anh Phát chốt, khớp cỡ số đã dùng ở màn 3 trang chủ .pd-hang__so): mặc định (≤480px) là cỡ MOBILE 64px — hộp giãn theo cùng "buffer +32px" đã dùng ở .pd-hang bên trinh-chieu.css để số không chạm mép (64+32=96px). Khổ ≥481px bị ghi đè xuống 44px ngay dưới (đặt SAU để thắng cascade — bài học vòng 24/09 trang chủ: luật cũ không điều kiện nằm sau sẽ đè media query mới). Số là aria-hidden (trang trí, "Bậc N" đã có ở .pd-th-bac__k) nên phóng to không ảnh hưởng a11y. */ .pd .pd-th-bac__so { width: 96px; height: 96px; flex: none; background: var(--o-grad); color: var(--o-900); display: grid; place-items: center; font-family: var(--font-heading); font-size: 64px; font-variant-numeric: tabular-nums; animation: morphA 16s ease-in-out infinite; } @media (min-width: 481px) { .pd .pd-th-bac__so { width: 76px; height: 76px; font-size: 44px; } } .pd .pd-th-bac__k { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--o-400); font-weight: 700; } .pd .pd-th-bac__t { font-family: var(--font-heading); font-size: clamp(24px, 3vw, 32px); margin: 4px 0 0; line-height: 1.24; color: var(--color-bg); } .pd .pd-th-bac__p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--color-neutral-300); } .pd .pd-th-bac__hang { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; } .pd .pd-th-bac__tt { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; padding: 7px 13px; border-radius: 999px; background: var(--color-neutral-800); color: var(--color-neutral-300); } .pd .pd-th-bac.is-co-bai .pd-th-bac__tt { background: var(--o-600); color: var(--o-900); } .pd .pd-th-bac__nut { cursor: pointer; font-family: var(--font-body); font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--color-neutral-600); background: transparent; color: var(--color-neutral-200); transition: background .2s, color .2s; } .pd .pd-th-bac__nut:hover { background: var(--o-500); color: var(--o-900); border-color: var(--o-500); } .pd .pd-th-bac__phai { display: flex; flex-direction: column; gap: 18px; } .pd .pd-th-bac__k2 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--o-400); font-weight: 700; margin-bottom: 6px; } .pd .pd-th-bac__p2 { margin: 0; font-size: 16px; line-height: 1.6; color: var(--color-neutral-300); } .pd .pd-th-bac__lk { font-weight: 700; font-size: 15px; color: var(--o-400); } .pd .pd-th-bac__lk:hover { color: var(--o-400); } /* bậc đã chọn: đổ cam, mực tối */ .pd .pd-th-bac.is-chon { background: var(--o-grad); border-color: var(--o-300); color: var(--o-900); } .pd .pd-th-bac.is-chon .pd-th-bac__t, .pd .pd-th-bac.is-chon .pd-th-bac__p, .pd .pd-th-bac.is-chon .pd-th-bac__p2, .pd .pd-th-bac.is-chon .pd-th-bac__lk, .pd .pd-th-bac.is-chon .pd-th-bac__lk:hover { color: var(--o-900); } /* --o-800 trên cam chỉ 3,34:1 ở đầu sẫm của chuyển sắc → --o-900 (≥ 5,66:1) — vá vòng 3 */ .pd .pd-th-bac.is-chon .pd-th-bac__k, .pd .pd-th-bac.is-chon .pd-th-bac__k2 { color: var(--o-900); } .pd .pd-th-bac.is-chon .pd-th-bac__so { background: var(--o-900); color: var(--o-200); } .pd .pd-th-bac.is-chon .pd-th-bac__tt { background: var(--o-900); color: var(--o-200); } .pd .pd-th-bac.is-chon .pd-th-bac__nut { border-color: var(--o-900); color: var(--o-900); } .pd .pd-th-bac.is-chon .pd-th-bac__nut:hover { background: var(--o-500); color: var(--o-900); border-color: var(--o-500); } /* vòng 5: ảnh bậc (khối phat/hinh kiểu "bac", CSS mục 6b) — ≥900px thành cột trái 1:1 */ @media (min-width: 900px) { .pd .pd-th-bac { grid-template-columns: 216px minmax(0, 1fr) minmax(0, 1fr); gap: 26px 36px; } .pd .pd-hinh--bac { grid-column: auto; align-self: center; max-width: none; } .pd .pd-hinh--bac .pd-hinh__khung { aspect-ratio: 1 / 1; } } .pd .pd-th-noi { background: var(--color-neutral-900); border: 1px solid var(--color-neutral-700); border-radius: var(--radius-lg); padding: clamp(26px, 3.2vw, 44px); margin-bottom: 88px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 28px 44px; align-items: center; } .pd .pd-th-noi__lon { margin: 0; font-family: var(--font-heading); font-size: clamp(22px, 2.8vw, 30px); line-height: 1.34; } .pd .pd-th-noi__p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--color-neutral-300); } .pd .pd-keu--thang { padding: clamp(28px, 3.4vw, 46px); margin-bottom: 72px; gap: 28px 44px; } .pd .pd-keu--thang .pd-keu__blob { bottom: -90px; right: -70px; width: 280px; height: 280px; opacity: .4; animation: morphB 15s ease-in-out infinite; } .pd .pd-keu--thang .pd-keu__t { font-size: clamp(26px, 3.2vw, 36px); margin: 0 0 14px; } .pd .pd-keu--thang .pd-keu__p { line-height: 1.65; } .pd .pd-keu--thang .pd-hang-nut { gap: 14px; } /* ========================================================================== TỰ CHẤM ========================================================================== */ .pd .pd-tc-bai-cham { margin-bottom: 32px; } .pd .pd-tc-tien { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; } .pd .pd-tc-tien__ray { flex: 1; height: 8px; border-radius: 999px; background: var(--color-neutral-800); overflow: hidden; } .pd .pd-tc-tien__thanh { height: 100%; width: 0; background: var(--o-grad-flat); border-radius: 999px; transition: width .35s ease; } .pd .pd-tc-tien__chu { font-size: 14px; font-weight: 700; color: var(--o-300); white-space: nowrap; } .pd .pd-tc-cau-ds { display: flex; flex-direction: column; gap: 18px; } .pd .pd-tc-cau { background: var(--color-neutral-900); border: 1px solid var(--color-neutral-700); border-radius: var(--radius-lg); padding: clamp(22px, 2.6vw, 32px); } .pd .pd-tc-cau.is-xong { border-color: var(--o-600); } .pd .pd-tc-cau__dau { display: flex; gap: 14px; align-items: baseline; margin-bottom: 18px; } .pd .pd-tc-cau__so { font-family: var(--font-heading); font-size: 15px; color: var(--o-400); } .pd .pd-tc-cau__t { font-family: var(--font-heading); font-size: clamp(19px, 2.2vw, 24px); margin: 0; line-height: 1.36; } .pd .pd-tc-chon-ds { display: flex; flex-direction: column; gap: 10px; } .pd .pd-tc-chon { appearance: none; cursor: pointer; text-align: left; font-family: var(--font-body); font-size: 16px; line-height: 1.5; padding: 15px 18px; border-radius: var(--radius-md); border: 2px solid var(--color-neutral-700); background: transparent; color: var(--color-neutral-200); display: flex; gap: 14px; align-items: center; transition: border-color .2s, background .2s, transform .15s; } .pd .pd-tc-chon:hover { border-color: var(--o-500); transform: translateX(4px); } .pd .pd-tc-chon__cham { width: 22px; height: 22px; flex: none; border-radius: 999px; border: 2px solid var(--color-neutral-600); background: transparent; } .pd .pd-tc-chon.is-chon { background: var(--o-800); border-color: var(--o-500); color: var(--color-bg); } .pd .pd-tc-chon.is-chon .pd-tc-chon__cham { border-color: var(--o-400); background: var(--o-500); } .pd .pd-tc-kq { position: relative; overflow: hidden; background: var(--o-grad); color: var(--o-900); border-radius: var(--radius-lg); padding: clamp(26px, 3.2vw, 44px); margin-bottom: 24px; } .pd .pd-tc-kq__trong { position: relative; display: flex; flex-direction: column; gap: 22px; } .pd .pd-tc-kq__k { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--o-900); margin-bottom: 8px; } .pd .pd-tc-kq__t { font-family: var(--font-heading); font-size: clamp(30px, 4.4vw, 46px); line-height: 1.18; } .pd .pd-tc-kq__luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 24px; } .pd .pd-tc-kq__p { margin: 0; font-size: 17px; line-height: 1.6; } .pd .pd-tc-kq .pd-nut-toi { transition: transform .2s; } .pd .pd-tc-kq .pd-nut-toi:hover { transform: translateY(-3px); } .pd .pd-tc-lai { cursor: pointer; font-family: var(--font-body); padding: 15px 22px; border-radius: 999px; border: none; background: transparent; color: var(--o-900); font-weight: 700; font-size: 16px; text-decoration: underline; } /* vá vòng 5 (P3 🟡5): ở màn hẹp nút phụ "Báo tôi khi có báo cáo đầy đủ" gãy 2 dòng nên trông to hơn nút chính. Không đổi chữ (chữ của J3/Anh) → hạ nút phụ thành liên kết gạch chân cùng kiểu "Làm lại": vùng bấm vẫn ≥44px, xuống dòng cũng không phình thành khối lớn. */ @media (max-width: 560px) { .pd .pd-tc-kq .pd-nut-toi-vien { display: inline-flex; align-items: center; min-height: 44px; border-color: transparent; padding: 4px 2px; font-size: 15px; line-height: 1.35; text-decoration: underline; text-underline-offset: 3px; } } .pd .pd-tc-ghi { margin: 0 0 72px; font-size: 15px; line-height: 1.6; color: var(--color-neutral-400); } .pd .pd-tc-con { margin: 0 0 72px; font-size: 16px; line-height: 1.6; color: var(--color-neutral-400); } /* ========================================================================== BLOG ========================================================================== */ .pd .pd-bl-loc { margin-bottom: 36px; display: flex; flex-direction: column; gap: 18px; } .pd .pd-bl-loc__ds { display: flex; gap: 10px; flex-wrap: wrap; } .pd .pd-bl-chip { cursor: pointer; font-family: var(--font-body); font-size: 15px; font-weight: 700; padding: 10px 18px; border-radius: 999px; border: 2px solid var(--color-neutral-700); background: transparent; color: var(--color-neutral-200); transition: border-color .2s, transform .15s; } .pd .pd-bl-chip:hover { border-color: var(--o-500); transform: translateY(-2px); } .pd .pd-bl-chip.is-chon { background: var(--o-grad); border-color: var(--o-300); color: var(--o-900); } .pd .pd-bl-chip--cd { font-weight: 600; border-width: 1px; color: var(--color-neutral-300); } .pd .pd-bl-chip--cd.is-chon { background: var(--o-800); border-color: var(--o-500); color: var(--o-200); } .pd .pd-bl-chip.is-chon:hover { border-color: var(--o-500); } .pd .pd-bl-noi { margin-bottom: 40px; } .pd .pd-bl-noi .pd-nhan-muc { margin-bottom: 14px; } .pd .pd-bl-noi__the { text-decoration: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 0; background: var(--color-neutral-900); border: 1px solid var(--o-600); border-radius: var(--radius-lg); overflow: hidden; transition: transform .2s, box-shadow .2s; } .pd .pd-bl-noi__the:hover { transform: translateY(-6px); box-shadow: 0 22px 54px rgba(0, 0, 0, .55); } .pd .pd-bl-noi__anh { min-height: 260px; position: relative; } .pd .pd-bl-noi__anh .pd-anh { position: absolute; inset: 0; } .pd .pd-bl-noi__than { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; justify-content: center; } .pd .pd-bl-noi__t { font-family: var(--font-heading); font-size: clamp(24px, 3.2vw, 34px); line-height: 1.24; margin: 0; color: var(--color-bg); } .pd .pd-bl-noi__d { margin: 0; font-size: 16px; line-height: 1.65; color: var(--color-neutral-300); } .pd .pd-bl-noi__go { font-weight: 700; font-size: 15px; color: var(--o-400); } .pd .pd-bl-ds { margin-bottom: 32px; } .pd .pd-bl-ds__dau { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; } .pd .pd-bl-ds__t { font-family: var(--font-heading); font-size: clamp(22px, 2.6vw, 28px); margin: 0; } .pd .pd-bl-ds__dem { font-size: 15px; color: var(--color-neutral-400); } .pd .pd-bl-ds__luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; } .pd .pd-bl-the { text-decoration: none; background: var(--color-neutral-900); border: 1px solid var(--color-neutral-700); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, border-color .2s; } .pd .pd-bl-the.is-san { border-color: var(--o-600); } /* 2 hiệu ứng rê chuột (nhấc + viền cam) như các thẻ khác — bỏ bóng đổ thứ 3 (vá vòng 2) */ .pd .pd-bl-the:hover { transform: translateY(-6px); border-color: var(--o-500); } .pd .pd-bl-the__anh { height: 172px; position: relative; background: var(--ground); } .pd .pd-bl-the__so { position: absolute; top: 14px; left: 14px; width: 40px; height: 40px; background: var(--color-neutral-800); color: var(--o-300); display: grid; place-items: center; font-family: var(--font-heading); font-size: 16px; animation: morphA 15s ease-in-out infinite; } .pd .pd-bl-the.is-san .pd-bl-the__so { background: var(--o-grad); color: var(--o-900); } .pd .pd-bl-the__than { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .pd .pd-bl-the__meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .pd .pd-bl-the__bac { padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--color-neutral-800); color: var(--color-neutral-200); } .pd .pd-bl-the.is-san .pd-bl-the__bac, .pd .pd-bl-noi .pd-bl-the__bac, .pd .pd-bl-the__bac.is-san { background: var(--o-grad); color: var(--o-900); } .pd .pd-bl-the__cd { font-size: 13px; color: var(--o-300); font-weight: 600; } .pd .pd-bl-the__doc { font-size: 13px; color: var(--color-neutral-400); } .pd .pd-bl-the__t { font-family: var(--font-heading); font-size: 22px; line-height: 1.34; margin: 0; color: var(--color-bg); } .pd .pd-bl-the__d { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-neutral-300); } .pd .pd-bl-the__go { margin-top: auto; font-weight: 700; font-size: 15px; color: var(--o-400); } .pd .pd-bl-trong { background: var(--color-neutral-900); border: 1px dashed var(--color-neutral-600); border-radius: var(--radius-lg); padding: 40px 32px; text-align: center; } .pd .pd-bl-trong__t { margin: 0 0 8px; font-family: var(--font-heading); font-size: 22px; } .pd .pd-bl-trong__d { margin: 0 0 20px; font-size: 16px; color: var(--color-neutral-300); } .pd .pd-bl-trong .pd-nut-vien--13 { padding: 13px 22px; } .pd .pd-keu--blog { padding: clamp(26px, 3.2vw, 44px); margin-bottom: 72px; gap: 26px 44px; } .pd .pd-keu--blog .pd-keu__blob { top: -80px; left: -60px; width: 260px; height: 260px; opacity: .35; animation: morphA 16s ease-in-out infinite; } .pd .pd-keu--blog .pd-keu__t { font-size: clamp(24px, 3vw, 34px); margin: 0 0 12px; } .pd .pd-keu--blog .pd-keu__p { line-height: 1.6; } /* ========================================================================== BÀI VIẾT ========================================================================== */ .pd .pd-bv-dau { padding: 56px 0 40px; max-width: 760px; display: flex; flex-direction: column; gap: 20px; } .pd .pd-bv-dau__vet { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; } .pd .pd-bv-dau__vet a { font-weight: 600; } .pd .pd-bv-dau__gach { color: var(--color-neutral-600); } .pd .pd-bv-dau__cd { color: var(--color-neutral-400); } .pd .pd-bv-dau__meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .pd .pd-bv-dau__doc { font-size: 14px; color: var(--color-neutral-400); } .pd .pd-bv-dau__t { font-family: var(--font-heading); font-size: clamp(34px, 4.8vw, 56px); line-height: 1.18; margin: 0; } .pd .pd-bv-dau__lede { margin: 0; font-size: 20px; line-height: 1.6; color: var(--color-neutral-200); } .pd .pd-bv-dau__tg { display: flex; align-items: center; gap: 12px; padding-top: 6px; font-size: 15px; color: var(--color-neutral-400); } /* vá 22/09/2026 (Anh Phát xem ảnh site sống, khoanh đỏ cột lề): auto-fit + hai cột minmax(280px,1fr) BẰNG NHAU làm cột lề ("Trong bài này" + khối CTA) rộng ngang cột chính, ép cột chính (câu trích, sơ đồ, đoạn văn) hẹp lại khó đọc — đo thật ở 1440px: mỗi cột ~536px trong khi cột chính chỉ cần tối đa 720px và cột lề (mục lục 4 mục + 1 khối CTA nhỏ) không cần tới nửa trang. Đổi: dưới 860px xếp DỌC (lề xuống dưới bài, đọc trên khổ hẹp/tablet dễ hơn cố nhét 2 cột hẹp) — từ 860px cột chính lấy phần lớn (đủ chạm mốc max-width 720px của nó ở 1120px container), cột lề cố định 280–340px. */ .pd .pd-bv-luoi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: start; } @media (min-width: 860px) { .pd .pd-bv-luoi { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 48px; } } .pd .pd-bv-than { max-width: 720px; display: flex; flex-direction: column; gap: 34px; min-width: 0; } /* Việc 7 / B1 (danh_gia_2309/DE_XUAT_NANG_CAP_TRAI_NGHIEM.md): thanh tiến độ đọc trang bài viết. Lớp RIÊNG (không tái dùng thẳng .pd-deck__tien của trang chủ) dù cùng ngôn ngữ thị giác (cùng gradient var(--o-grad-flat)) — hành vi khác hẳn: deck dùng width+transition cho 9 nấc rời rạc, thanh này bám cuộn LIÊN TỤC 1:1 bằng transform:scaleX (gate 14 Hallmark cấm animate width; scaleX chạy GPU, không giật). KHÔNG transition — có là vạch trễ theo ngón tay, đúng thứ spec cấm. z-index 19 (dưới nav 20) — thực tế không chồng vì nav sticky dừng ở top:12px, thanh nằm hẳn 0-3px. Vẫn hiện dưới reduced-motion — đây là CHỈ BÁO TRẠNG THÁI, không phải hiệu ứng trang trí (không có bẫy nen.css:263-268 vì vốn không có transition/animation nào để bị huỷ). */ .pd .pd-bv-tien { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 19; pointer-events: none; } .pd .pd-bv-tien__thanh { height: 100%; width: 100%; background: var(--o-grad-flat); transform: scaleX(0); transform-origin: left; } /* Nội dung bài (rich text) — dựng theo nhịp của bản thiết kế: H2 cách khối trước 34px, mọi thứ trong một mục cách nhau 14px. */ .pd .pd-prose { color: var(--color-neutral-300); } .pd .pd-prose > * { margin-block: 0; } .pd .pd-prose > * + * { margin-top: 14px; } .pd .pd-prose > h2, .pd .pd-prose > blockquote, .pd .pd-prose > .pd-apvao, .pd .pd-prose > .wp-block-group, .pd .pd-prose > figure { margin-top: 34px; } .pd .pd-prose > :first-child { margin-top: 0; } .pd .pd-prose h2 { font-family: var(--font-heading); font-size: clamp(24px, 3vw, 32px); line-height: 1.28; color: var(--color-bg); scroll-margin-top: 96px; } .pd .pd-prose h3 { font-family: var(--font-heading); font-size: 22px; line-height: 1.34; color: var(--color-bg); } .pd .pd-prose p, .pd .pd-prose li { font-size: 17px; line-height: 1.7; } .pd .pd-prose strong { color: var(--color-bg); } .pd .pd-prose ul, .pd .pd-prose ol { padding-left: 1.3em; } .pd .pd-prose img { border-radius: var(--radius-md); height: auto; } .pd .pd-prose .pd-cho { border: 1px dashed var(--color-neutral-600); border-radius: var(--radius-md); padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; } .pd .pd-prose .pd-cho__nhan { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--o-300); } .pd .pd-prose .pd-cho__ghi { font-size: 15px; line-height: 1.6; color: var(--color-neutral-400); } /* Câu trích — khối cam, viền trái 6px; đứng trên làm nhãn */ .pd .pd-prose blockquote { margin-inline: 0; background: var(--o-800); border: 1px solid var(--o-600); border-left: 6px solid var(--o-500); border-radius: var(--radius-md); padding: 26px 28px; display: flex; flex-direction: column; color: var(--color-bg); } .pd .pd-prose blockquote cite { order: -1; font-style: normal; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--o-300); font-weight: 700; margin-bottom: 10px; } .pd .pd-prose blockquote p { margin: 0; font-family: var(--font-heading); font-size: clamp(20px, 2.4vw, 26px); line-height: 1.38; } .pd .pd-prose blockquote p + p { margin-top: 10px; } /* "Áp vào việc của bạn" — thẻ các bước đánh số 01, 02… */ .pd .pd-prose .pd-apvao { background: var(--color-neutral-900); border: 1px solid var(--color-neutral-700); border-radius: var(--radius-lg); padding: 28px; } .pd .pd-prose .pd-apvao > * { margin-block: 0; } .pd .pd-prose .pd-apvao h2 { font-size: 24px; line-height: 1.22; margin: 0 0 16px; } .pd .pd-prose ol.pd-buoc { list-style: none; padding: 0; margin: 0; counter-reset: buoc; display: flex; flex-direction: column; gap: 12px; } /* số đặt tuyệt đối thay cho lưới 2 cột: mục có + chữ trần (bài trụ bước 04) thành 3 ô lưới và chữ rơi vào cột số 30px — đo được ở vá vòng 3 */ .pd .pd-prose ol.pd-buoc > li { counter-increment: buoc; position: relative; padding-left: 44px; font-size: 16px; line-height: 1.6; color: var(--color-neutral-200); } .pd .pd-prose ol.pd-buoc > li::before { content: counter(buoc, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--font-heading); font-size: 15px; line-height: 1.55; color: var(--o-400); padding-top: 2px; } /* ---------- Thành phần bài trụ (vá vòng 3): chữ bản V3 chuyển sang khuôn tối ---------- Map: nhãn đầu bài → .pd-nhan-bai · dek → .pd-dek · bìa SVG → .pd-bia · [Mẫu — chờ Anh thay] → .pd-mau · bút dạ quang → .pd-hl · ghi chú lề → .pd-le · mục 01–04 → h2.pd-muc (+ số ở mục lục) · khối câu mẫu → .pd-cau-mau · bảng Trước/Sau → .pd-ss · sơ đồ hai luồng → .pd-luong · dải nền mực + khối "Áp vào việc" → .pd-cam-dam (cam đậm như khối kêu gọi) · ghi nhớ nhanh → .pd-apvao Tương phản (đo vòng 3): chữ trên --o-800 dùng --o-100/--o-200/--o-300 = 9,35/7,83/6,40:1. */ .pd .pd-prose > .pd-bia, .pd .pd-prose > .pd-ss, .pd .pd-prose > .pd-cam-dam, .pd .pd-prose > .pd-apdung-nhan, .pd .pd-prose > .pd-mau { margin-top: 34px; } .pd .pd-prose > h2 + .pd-ss, .pd .pd-prose > h2 + .pd-mau, .pd .pd-prose > .pd-dek + .pd-bia { margin-top: 20px; } .pd .pd-prose > .pd-nhan-bai + .pd-dek { margin-top: 8px; } .pd .pd-prose .pd-nhan-bai { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--o-300); } .pd .pd-prose .pd-dek { font-size: 19px; line-height: 1.6; color: var(--color-neutral-200); padding-left: 16px; border-left: 3px solid var(--o-500); } .pd .pd-prose .pd-bia { border: 1px solid var(--color-neutral-700); border-top: 2px solid var(--o-500); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-neutral-900); } .pd .pd-prose .pd-bia svg { display: block; width: 100%; max-width: 100%; height: auto; } /* chặn SVG phóng to (S1 đo trên máy chủ 11/09): SVG trong thân bài không bao giờ rộng hơn cột; icon trong thân bài còn mang sẵn width/height="22" nên thiếu CSS vẫn đúng cỡ */ .pd .pd-prose svg { max-width: 100%; } /* nhãn biên tập — cố ý khác hẳn chữ bài (chữ đơn cách, viền đứt), phải hiện rõ tới khi Anh thay */ .pd .pd-prose .pd-mau { border: 1px dashed var(--o-400); border-left: 4px solid var(--o-400); border-radius: var(--radius-md); padding: 12px 16px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--o-300); } .pd .pd-prose .pd-mau__phu { display: block; margin-top: 6px; font-family: var(--font-body); font-size: 15px; line-height: 1.6; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--color-neutral-300); } .pd .pd-prose .pd-mau--dong { display: block; width: fit-content; margin: 0 0 4px; padding: 2px 8px; border-left-width: 1px; border-radius: 6px; font-size: 11px; } .pd .pd-prose .pd-mau--the { display: inline-block; margin: 0 8px 0 0; padding: 0 6px; border-left-width: 1px; border-radius: 6px; font-size: 11px; line-height: 1.7; white-space: nowrap; vertical-align: baseline; } /* bút dạ quang — nền cam trong suốt sau chữ, xuống dòng không vỡ nền */ .pd .pd-prose .pd-hl { background: rgba(255, 138, 43, .18); color: var(--o-100); font-weight: 600; padding: .06em .3em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .pd .pd-prose .pd-le { padding: 2px 0 2px 16px; border-left: 2px solid var(--color-neutral-700); font-size: 15px; line-height: 1.65; color: var(--color-neutral-400); } .pd .pd-prose .pd-le__k { display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--o-300); } .pd .pd-prose .pd-le b { font-weight: 600; color: var(--color-bg); } /* mục 01–04: số Bitter cam đứng trên tiêu đề, cùng kiểu số của thẻ bước */ .pd .pd-prose .pd-muc__so { display: block; margin-bottom: 4px; font-size: 15px; line-height: 1.4; color: var(--o-400); } .pd .pd-prose .pd-cau-mau { background: var(--color-neutral-900); border: 1px solid var(--o-600); border-radius: var(--radius-md); padding: 22px 24px; } .pd .pd-prose .pd-cau-mau > * { margin: 0; } .pd .pd-prose .pd-cau-mau__k { margin-bottom: 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--o-300); } .pd .pd-prose .pd-cau-mau__q { font-size: 17px; line-height: 1.65; font-weight: 600; color: var(--color-bg); } .pd .pd-prose .pd-cau-mau__lam { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--color-neutral-700); } .pd .pd-prose .pd-cau-mau__ok { flex: 1 1 12rem; min-height: 1.5em; font-size: 14px; line-height: 1.5; color: var(--color-neutral-300); } /* nút chép chỉ chạy khi có JS — tắt JS thì ẩn, câu vẫn bôi đen chép tay được */ html:not(.js) .pd [data-chep] { display: none; } .pd .pd-prose .pd-ss { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; } .pd .pd-prose .pd-ss__the { background: var(--color-neutral-900); border: 1px solid var(--color-neutral-700); border-top: 3px solid var(--color-neutral-600); border-radius: var(--radius-md); padding: 22px; transition: transform .2s, border-color .2s; } .pd .pd-prose .pd-ss__the:hover { transform: translateY(-4px); border-color: var(--o-500); } .pd .pd-prose .pd-ss__the--sau { background: var(--o-800); border-color: var(--o-600); border-top-color: var(--o-400); } .pd .pd-prose .pd-ss__k { margin: 0 0 14px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--color-neutral-300); } .pd .pd-prose .pd-ss__the--sau .pd-ss__k { color: var(--o-300); } .pd .pd-prose .pd-ss dl { margin: 0; } .pd .pd-prose .pd-ss dt { margin-bottom: 2px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--color-neutral-400); } .pd .pd-prose .pd-ss__the--sau dt { color: var(--o-200); } .pd .pd-prose .pd-ss dd { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--color-neutral-700); font-size: 16px; line-height: 1.55; color: var(--color-bg); } .pd .pd-prose .pd-ss__the--sau dd { border-bottom-color: var(--o-600); } .pd .pd-prose .pd-ss dd:last-of-type { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .pd .pd-prose .pd-luong { background: var(--color-neutral-900); border: 1px solid var(--color-neutral-700); border-top: 2px solid var(--o-500); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 22px; } .pd .pd-prose .pd-luong__lan + .pd-luong__lan { border-top: 1px solid var(--color-neutral-700); padding-top: 22px; } .pd .pd-prose .pd-luong__k { margin: 0 0 14px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--color-neutral-300); } .pd .pd-prose .pd-luong__lan--hoi .pd-luong__k { color: var(--o-300); } .pd .pd-prose .pd-luong__buoc { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 14px; } .pd .pd-prose .pd-luong__nut { position: relative; display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--color-bg); } .pd .pd-prose .pd-luong__nut svg { width: 22px; height: 22px; flex: none; color: var(--color-neutral-400); } .pd .pd-prose .pd-luong__lan--hoi .pd-luong__nut svg { color: var(--o-400); } /* mũi tên nằm TRONG bước sau (không tuyệt đối) — xuống dòng thì dòng mới mở bằng "→ …", không treo ngoài lề */ .pd .pd-prose .pd-luong__nut + .pd-luong__nut::before { content: "→"; content: "→" / ""; color: var(--color-neutral-500); } .pd .pd-prose .pd-luong__do { margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--color-neutral-700); } .pd .pd-prose .pd-luong__thanh { display: flex; height: 12px; background: var(--color-neutral-800); border-radius: 6px; overflow: hidden; } .pd .pd-prose .pd-luong__doan { height: 100%; width: var(--p, 0%); transform-origin: left; } .pd .pd-prose .pd-luong__doan--sua { background: var(--color-neutral-400); } .pd .pd-prose .pd-luong__doan--hoi { background: var(--o-500); } /* B4 (danh_gia_2309/DE_XUAT_NANG_CAP_TRAI_NGHIEM.md mục B4): thanh chạy scaleX(0→1) khi vào khung nhìn — bề ngang cuối (`width: var(--p)`) giữ nguyên, KHÔNG animate width (gate 14 Hallmark). Trạng thái ẩn CHỈ gắn dưới html.js, đúng khuôn .pd-b2-cho ở trên (dòng ~148): tắt JS thì `.pd-b4-cho` không tồn tại trong CSS này nên thanh hiện đủ 100% --p ngay, không phải chờ; bật giảm chuyển động thì phat.js không bao giờ gắn lớp .pd-b4-cho (xem thanhSoSanh() trong phat.js) nên luật dưới đây cũng không có cơ hội áp — cùng cơ chế "khoá kép" như B2. */ html.js .pd-prose .pd-luong__doan.pd-b4-cho:not(.pd-b4-hien) { transform: scaleX(0); } .pd-prose .pd-luong__doan.pd-b4-cho { transition: transform .52s cubic-bezier(.2,.7,.3,1); } /* đoạn thứ 2 trong cùng 1 .pd-luong__thanh (ví dụ "Bảo nó hỏi": --hoi rồi --sua) trễ 120ms để mắt đọc đoạn dài trước rồi mới thấy đoạn ngắn chạy tới. */ .pd-prose .pd-luong__doan.pd-b4-cho:nth-child(2) { transition-delay: .12s; } .pd .pd-prose .pd-luong__so { display: block; margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--color-neutral-300); } .pd .pd-prose .pd-luong__chu { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--color-neutral-400); padding-left: 12px; border-left: 2px solid var(--o-500); } /* cam đậm: dải "Dán câu này" + khối "Áp vào việc của bạn" */ .pd .pd-prose .pd-cam-dam { background: var(--o-800); border: 1px solid var(--o-600); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 14px; } .pd .pd-prose .pd-cam-dam > * { margin: 0; } .pd .pd-prose .pd-cam-dam p { color: var(--o-100); } .pd .pd-prose .pd-cam-dam .pd-cau-mau p { color: var(--color-bg); } .pd .pd-prose .pd-cam-dam .pd-cau-mau .pd-cau-mau__k { color: var(--o-300); } .pd .pd-prose .pd-cam-dam .pd-cau-mau .pd-cau-mau__ok { color: var(--color-neutral-300); } .pd .pd-prose .pd-dai__sau { font-size: 15px; padding-left: 12px; border-left: 2px solid var(--o-400); } .pd .pd-prose .pd-cam-dam .pd-dai__sau { color: var(--o-200); } .pd .pd-prose .pd-apdung__k { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; } .pd .pd-prose .pd-cam-dam .pd-apdung__k { color: var(--o-300); } .pd .pd-prose .pd-apdung__nut { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 4px; } .pd .pd-prose .pd-cam-dam .pd-apdung__phu { font-size: 14px; line-height: 1.55; color: var(--o-200); } .pd .pd-prose .pd-cam-dam .pd-apdung__ky { display: flex; align-items: center; gap: 12px; font-family: var(--font-heading); font-size: 18px; color: var(--o-100); } .pd .pd-prose .pd-apdung__them { margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--o-600); } .pd .pd-prose .pd-apdung__them h3 { margin: 0 0 8px; font-size: 20px; } .pd .pd-prose .pd-apdung-nhan { background: var(--color-neutral-900); border: 1px solid var(--color-neutral-700); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 10px; } .pd .pd-prose .pd-apdung-nhan > * { margin: 0; } .pd .pd-prose .pd-apdung-nhan h3 { font-size: 20px; } .pd .pd-prose .pd-ghi-nho .pd-apvao__k { margin: 0 0 16px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--o-300); } .pd .pd-bv-tiep { position: relative; overflow: hidden; background: var(--color-neutral-900); border: 1px solid var(--o-600); border-radius: var(--radius-lg); padding: 30px; display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; transition: border-color .2s; } .pd .pd-bv-tiep__t { font-family: var(--font-heading); font-size: 24px; margin: 0; } .pd .pd-bv-tiep__d { margin: 0; font-size: 16px; line-height: 1.65; color: var(--color-neutral-300); } /* vòng 9 (mọi bài đều có banner): dải ảnh 3:1 tràn mép trên khối, như thẻ bài trang chủ màn 5; khối đã overflow:hidden + bo góc */ .pd .pd-bv-tiep__anh { margin: -30px -30px 4px; } .pd .pd-bv-tiep__anh .pd-anh { height: auto; } .pd .pd-bv-tiep__anh .pd-anh__img { display: block; height: auto; aspect-ratio: 3 / 1; flex: none; } /* B5 (danh_gia_2309/DE_XUAT_NANG_CAP_TRAI_NGHIEM.md mục B5): bộ ba huy hiệu bậc + đọc N phút + tên bài — cùng ngôn ngữ thị giác với thẻ .pd-bl-the (Blog), thu nhỏ đúng khổ thẻ này. */ .pd .pd-bv-tiep__meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .pd .pd-bv-tiep__bac { padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--o-grad); color: var(--o-900); } .pd .pd-bv-tiep__doc { font-size: 13px; color: var(--color-neutral-400); } .pd .pd-bv-tiep__ten { font-family: var(--font-heading); font-size: 20px; line-height: 1.32; margin: 0; color: var(--color-bg); } /* Rê chuột lên CẢ THẺ: ảnh phóng nhẹ + viền sáng cam — .pd-anh đã overflow:hidden sẵn nên ảnh phóng không tràn mép. Chỉ bật ở thiết bị có con trỏ thật (hover:hover) — cảm ứng chạm vào sẽ kẹt ở trạng thái phóng nếu không giới hạn (đúng bẫy den-roi.js dòng 93 đã né). */ @media (hover: hover) { .pd .pd-bv-tiep__anh .pd-anh__img { transition: transform .4s ease-out; } .pd .pd-bv-tiep:hover { border-color: var(--o-500); } .pd .pd-bv-tiep:hover .pd-bv-tiep__anh .pd-anh__img { transform: scale(1.03); } } /* "Bài này làm thế nào" — chân mọi bài (vòng 7, khối phat/bai-lam-the-nao; chữ: phap_ly/nhan-noi-dung-ai.md 2.1). Ghi chú, không phải khối kêu gọi: thẻ tối viền trái cam như thẻ lý do màn 7. Chữ --color-neutral-300 trên --color-neutral-900 ≈ 9:1 — rõ, không mờ (NĐ 142/2026 cấm làm mờ ghi nhận AI). */ .pd .pd-bv-cach { background: var(--color-neutral-900); border: 1px solid var(--color-neutral-700); border-left: 4px solid var(--o-500); border-radius: var(--radius-md); padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; } .pd .pd-bv-cach:last-child { margin-bottom: 40px; } .pd .pd-bv-cach__t { font-family: var(--font-heading); font-size: 19px; line-height: 1.35; margin: 0; color: var(--color-bg); } .pd .pd-bv-cach__p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--color-neutral-300); } /* Tranh nét giữa thân bài (vòng 7, khối phat/tranh-net; chuẩn BRAIN_KENH/04_MINH_HOA_NET_BAI_VIET.md). Thẻ giấy kem 4:3 phủ đúng bề rộng cột chữ (không tràn), bo 16px như ảnh thân bài. Nền kem #f3e7d3 (màu giấy của chính tranh) giữ chỗ lúc ảnh tải lười → không lộ lỗ tối. Chú thích + nhãn AI 13px ngay dưới hình. Chưa có file ảnh thì khối in rỗng → không có gì ở đây. */ .pd .pd-prose > .pd-net { margin-block: 34px; } .pd .pd-net__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #f3e7d3; border-radius: var(--radius-md); box-shadow: 0 14px 34px rgba(0, 0, 0, .35); } .pd .pd-net__chu { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; } .pd .pd-net__ghi { font-size: 15px; line-height: 1.6; color: var(--color-neutral-300); } .pd .pd-bv-le { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; } .pd .pd-bv-ml { background: var(--color-neutral-900); border: 1px solid var(--color-neutral-700); border-radius: var(--radius-lg); padding: 24px; } .pd .pd-bv-ml__ds { display: flex; flex-direction: column; gap: 10px; } .pd .pd-bv-ml__ds a { font-size: 15px; line-height: 1.45; font-weight: 600; text-decoration: none; /* Việc 7 B3(b): viền trái 2px chờ sẵn TRONG SUỐT + bù trừ padding/margin — mục đang đọc chỉ đổi màu/hiện viền tại chỗ, chữ không nhích ngang. */ border-left: 2px solid transparent; padding-left: 8px; margin-left: -8px; transition: color .16s linear, border-color .16s linear; } /* mục lục có số 01–04 (h2 bắt đầu bằng số — xem phat_khoi_muc_luc) */ .pd .pd-bv-ml__ds a:has(.pd-bv-ml__so) { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: baseline; align-content: center; } .pd .pd-bv-ml__so { font-family: var(--font-heading); font-size: 13px; color: var(--color-neutral-400); } /* Việc 7 B3(b): mục đang đọc — gắn bằng JS (phat.js, IntersectionObserver trên h2[id]). */ .pd .pd-bv-ml__ds a[aria-current="true"] { color: var(--o-400); border-left-color: var(--o-400); } /* 24/09 DS v2: accent 3,91:1 < AA → o-400 6,89:1 */ .pd .pd-bv-mo { background: var(--o-800); border: 1px solid var(--o-600); border-radius: var(--radius-lg); padding: 24px; } .pd .pd-bv-mo__t { font-family: var(--font-heading); font-size: 19px; line-height: 1.36; margin-bottom: 10px; } .pd .pd-bv-mo__p { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--o-200); } /* Việc 7 B3(d): mục lục gập, đưa lên sát banner ở màn <860px (khớp breakpoint 2 cột thật của .pd-bv-luoi, dòng 607) — khuôn dựng bằng JS (phat.js, mucLucDiDong: chuyển hẳn node .pd-bv-ml vào đây, không nhân bản). Ở ≥860px khối .pd-bv-ml-gap không tồn tại (JS trả node về aside như cũ). */ .pd .pd-bv-ml-gap { margin: 0 0 20px; border: 1px solid var(--color-neutral-700); border-radius: var(--radius-lg); background: var(--color-neutral-900); overflow: clip; } .pd .pd-bv-ml-gap summary { cursor: pointer; list-style: none; font-family: var(--font-heading); font-size: 15px; font-weight: 600; padding: 14px 16px; } .pd .pd-bv-ml-gap summary::-webkit-details-marker { display: none; } .pd .pd-bv-ml-gap summary::after { content: "\25BE"; float: right; } .pd .pd-bv-ml-gap[open] summary::after { content: "\25B4"; } .pd .pd-bv-ml-gap .pd-bv-ml { border: none; border-top: 1px solid var(--color-neutral-700); border-radius: 0; padding: 16px; } .pd .pd-bv-ml-gap .pd-nhan-muc { display: none; } /* ========================================================================== VỀ TÔI ========================================================================== */ .pd .pd-vt-dau { padding: 64px 0 72px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 52px; align-items: center; } .pd .pd-vt-dau__trai { display: flex; flex-direction: column; gap: 22px; } .pd .pd-vt-dau__lede { font-size: 19px; max-width: 54ch; } .pd .pd-tacgia { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--color-neutral-400); } .pd .pd-tacgia__cham { width: 10px; height: 10px; border-radius: 999px; background: var(--o-500); } .pd .pd-tacgia strong { color: var(--color-bg); } /* Chân dung trong khung blob — dùng chung trang chủ + Về tôi */ .pd .pd-chan-dung { position: relative; } .pd .pd-chan-dung__nen { position: absolute; inset: 0; background: var(--o-grad); animation: morphB 16s ease-in-out infinite; } .pd .pd-chan-dung__khung { position: relative; overflow: hidden; animation: morphA 20s ease-in-out infinite; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); } /* vòng 5: cỡ ảnh do .pd-hinh__img lo (khung 4:3 cố định) — ở đây chỉ còn bộ lọc màu cũ */ .pd .pd-chan-dung img { filter: saturate(.9) contrast(1.02) brightness(.96); } .pd .pd-chan-dung--vt { padding: 18px; } .pd .pd-chan-dung--vt .pd-chan-dung__nen { animation-duration: 17s; } .pd .pd-chan-dung--vt .pd-chan-dung__khung { animation-duration: 21s; } .pd .pd-vt-muc { margin-bottom: 96px; } .pd .pd-vt-h2 { font-family: var(--font-heading); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.2; margin: 0; } .pd .pd-vt-muc > .pd-vt-h2 { margin: 0 0 28px; } .pd .pd-vt-lydo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px; } .pd .pd-vt-lydo__the { background: var(--color-neutral-900); border: 1px solid var(--color-neutral-700); border-top: 5px solid var(--o-500); border-radius: var(--radius-lg); padding: 28px 26px; display: flex; flex-direction: column; gap: 12px; } .pd .pd-so-tron { width: 40px; height: 40px; background: var(--o-grad); color: var(--o-900); display: grid; place-items: center; font-family: var(--font-heading); font-size: 16px; animation: morphA 15s ease-in-out infinite; } .pd .pd-vt-lydo__t { font-family: var(--font-heading); font-size: 20px; line-height: 1.32; } .pd .pd-vt-lydo__p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--color-neutral-300); } .pd .pd-vt-sau__dau { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; } .pd .pd-vt-sau__phu { font-size: 16px; color: var(--color-neutral-300); max-width: 46ch; } .pd .pd-vt-sau { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px; } .pd .pd-vt-sau__the { background: var(--color-neutral-900); border: 1px solid var(--color-neutral-700); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, border-color .2s; } .pd .pd-vt-sau__the:hover { transform: translateY(-6px); border-color: var(--o-500); } .pd .pd-vt-sau__anh { height: 170px; } .pd .pd-vt-sau__than { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; } .pd .pd-vt-sau__t { font-family: var(--font-heading); font-size: 18px; line-height: 1.36; } .pd .pd-vt-sau__p { font-size: 15px; line-height: 1.55; color: var(--color-neutral-300); } .pd .pd-vt-sau__ai { font-size: 13px; font-weight: 700; color: var(--o-300); margin-top: 4px; } .pd .pd-vt-noi { background: var(--color-neutral-900); border: 1px solid var(--color-neutral-700); border-radius: var(--radius-lg); padding: clamp(26px, 3.2vw, 44px); margin-bottom: 96px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 30px 44px; } .pd .pd-vt-noi__t { font-family: var(--font-heading); font-size: clamp(24px, 3vw, 34px); margin: 0 0 14px; line-height: 1.24; } .pd .pd-vt-noi__p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--color-neutral-300); } .pd .pd-vt-noi__k { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--o-400); font-weight: 700; margin-bottom: 14px; } .pd .pd-vt-cd { display: flex; flex-direction: column; gap: 12px; } .pd .pd-vt-cd__dong { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: baseline; } .pd .pd-vt-cd__so { font-family: var(--font-heading); font-size: 15px; color: var(--o-400); } .pd .pd-vt-cd__chu { font-size: 16px; line-height: 1.5; } .pd .pd-vt-cd__phu { color: var(--color-neutral-400); } .pd .pd-keu--vt { padding: clamp(28px, 3.4vw, 46px); margin-bottom: 72px; gap: 28px 44px; } .pd .pd-keu--vt .pd-keu__blob { bottom: -90px; right: -60px; width: 280px; height: 280px; opacity: .4; animation: morphB 16s ease-in-out infinite; } .pd .pd-keu--vt .pd-keu__t { font-size: clamp(26px, 3.2vw, 36px); margin: 0 0 14px; } .pd .pd-keu--vt .pd-keu__p { line-height: 1.65; } .pd .pd-keu__cot { position: relative; display: flex; flex-direction: column; gap: 12px; } /* nút kênh liên hệ (in từ du-lieu.json "lien_he") đứng trên nút chính */ .pd .pd-keu__cot > .pd-nut, .pd .pd-keu__cot > .pd-nut-vien { align-self: flex-start; } /* ========================================================================== 404 · ĐĂNG KÝ · TRANG THƯỜNG ========================================================================== */ .pd .pd-van { max-width: 760px; margin-bottom: 72px; display: flex; flex-direction: column; gap: 14px; } .pd .pd-van > * { margin: 0; } .pd .pd-van h2 { font-family: var(--font-heading); font-size: clamp(24px, 3vw, 32px); line-height: 1.28; margin-top: 20px; } .pd .pd-van > h2:first-child { margin-top: 0; } .pd .pd-van p { font-size: 17px; line-height: 1.7; color: var(--color-neutral-300); } .pd .pd-loi-di { list-style: none; padding: 0; margin: 6px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 16px; } .pd .pd-loi-di a { display: flex; flex-direction: column; gap: 8px; height: 100%; text-decoration: none; background: var(--color-neutral-900); border: 1px solid var(--color-neutral-700); border-radius: var(--radius-lg); padding: 22px; transition: transform .2s, border-color .2s; } .pd .pd-loi-di a:hover { transform: translateY(-6px); border-color: var(--o-500); } .pd .pd-loi-di b { font-family: var(--font-heading); font-size: 19px; line-height: 1.3; color: var(--color-bg); } .pd .pd-loi-di span { font-size: 14px; line-height: 1.55; color: var(--color-neutral-300); } .pd .pd-dk { display: flex; flex-direction: column; gap: 12px; background: var(--color-neutral-900); border: 1px solid var(--color-neutral-700); border-radius: var(--radius-lg); padding: clamp(22px, 2.6vw, 32px); margin: 6px 0; } .pd .pd-dk > * { margin: 0; } .pd .pd-dk__l { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--o-400); font-weight: 700; } .pd .pd-dk .input { min-height: 48px; font-size: 16px; padding-inline: 18px; } .pd .pd-dk__ghi { font-size: 14px; line-height: 1.6; color: var(--color-neutral-400); } .pd .pd-bay { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .pd .pd-bao { border-radius: var(--radius-md); padding: 20px 22px; } .pd .pd-bao p { margin: 0; font-size: 16px; line-height: 1.6; } .pd .pd-bao p + p { margin-top: 8px; } .pd .pd-bao--ok { background: var(--o-800); border: 1px solid var(--o-600); color: var(--o-100); } .pd .pd-bao--loi { border: 1px dashed var(--o-400); color: var(--o-200); } .pd .pd-trang-thuong__t { font-family: var(--font-heading); font-size: clamp(34px, 5vw, 56px); line-height: 1.18; margin: 0; max-width: 22ch; } .pd .pd-trang-thuong__than { max-width: 760px; margin-bottom: 72px; } /* ========================================================================== VÙNG BẤM ≥ 44px (vá vòng 2 #15) — chỉ ở màn hẹp / màn cảm ứng. Cỡ chữ và cỡ nút nhìn thấy giữ nguyên; phần nới thêm là khoảng đệm vô hình. Màn rộng dùng chuột: giữ đúng nhịp bản thiết kế. ========================================================================== */ /* Nút "Đánh dấu bậc": lớp vô hình cao tối thiểu 44px canh giữa nút, nút nhìn y cũ. (vá vòng 3: bản cũ nới cứng 6px — đổi font thân bài làm nút thấp 1px là vùng bấm tụt còn 42px) */ .pd .pd-th-bac__nut { position: relative; } .pd .pd-th-bac__nut::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(calc(100% + 12px), 44px); transform: translateY(-50%); } @media (max-width: 720px), (pointer: coarse) { /* mục lục bài: 22 → 44px, dải chỉ chứa liên kết nên bỏ khe để tổng nhịp không phình */ .pd .pd-bv-ml__ds { gap: 0; } .pd .pd-bv-ml__ds a { display: flex; align-items: center; min-height: 44px; padding-block: 6px; } /* liên kết chân trang: hộp 44px, âm lề 6px → nhịp 44px, các hộp khít nhau không chồng */ .pd .pd-chan__lk { display: flex; align-items: center; min-height: 44px; margin-block: -6px; } .pd .pd-bl-chip { min-height: 44px; } /* vá vòng 4 (P3 🟠3) — cùng cách: hộp cao 44px, âm lề bù lại để nhịp trang không đổi */ .pd .pd-th-bac__lk { display: flex; align-items: center; min-height: 44px; margin-block: -10px; } /* 24 → 44 */ /* vòng 11b: bậc 3 có 2 link liền nhau — gap 18 − 10 − 10 = −2px → 2 hộp 44px chồng nhau; link sau chỉ âm 6 → hở 2px */ .pd .pd-th-bac__lk + .pd-th-bac__lk { margin-top: -6px; } .pd .pd-chan__brand { min-height: 44px; margin-block: -3px; } /* 38 → 44 */ /* "Blog" ở dòng vết đầu bài (33×22): lớp vô hình 44×44 canh giữa chữ, dòng vết không xô */ .pd .pd-bv-dau__vet a { position: relative; } .pd .pd-bv-dau__vet a::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max(100%, 44px); height: max(100%, 44px); } } /* ---------- Vòng 25 (24/09, Anh Phát + WP3 W1/W2) — menu ☰ dưới 768px ---------- Thay TOÀN BỘ cách xử lý dải cuộn ngang (vòng 14/21/22/23/24 ở trên) dưới 768px: dải cuộn hết chỗ khi thêm mục "Đăng nhập" (đo: "Blog" bị pill cắt ở /, "Trang chủ" chồng dưới nút ở /blog/ và /thang-5-bac/ — QC_WP3_NAV_KHOA.md). Đặt SAU mọi luật cũ trong file để thắng khi trùng độ đặc hiệu ở các khổ hẹp hơn (495/612/712px). Nút ☰ luôn ≥44×44 (W2). Ngăn kéo xuống, nền thẻ tối, viền, mỗi mục 1 hàng ≥44px. ≥768px: nút ☰ ẩn, ngăn hiện lại y như cấu trúc gốc (không đổi gì ở màn rộng). */ /* W2 (WP3, 24/09): mục "Đăng nhập"/"Góc học tập" thấp hơn 44px (đo 41,25px ở 1440, .pd-nav__link vốn không phải flex nên min-height không tự canh giữa chữ). Không đụng .pd-nav__link chung (nhiều nơi khác dựa vào cỡ cũ) — chỉ target riêng mục này. */ .pd .pd-nav__dangnhap { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; } .pd .pd-nav__hamburger { display: none; } /* Vòng 25b (24/09, Ngọc): "Trang chủ" nay LUÔN có trong $muc (khoi.php bỏ array_shift) để ngăn ☰ điện thoại đủ mục — ẩn riêng ở thanh GỌN deck ≥768px cho giống thiết kế cũ (logo đã dẫn về trang chủ, đỡ trùng). Dưới 768px (ngăn kéo) không đụng luật này, hiện đủ 3 mục. */ @media (min-width: 768px) { .pd .pd-nav--deck .pd-nav__cuon .pd-nav__link:first-child { display: none; } } /* W3 (Anh Phát 24/09): "Đăng nhập" phải là NÚT rõ ràng, tách khỏi 3 link chữ — viền cam + icon + đệm ngang, không phải link phẳng như "Blog"/"Trang chủ". Trang chủ đang có nút ĐẶC "Tự chấm bậc" (.pd-nav__cta, dùng --o-grad) nên giữ Đăng nhập dạng VIỀN (không đặc) để 2 nút không tranh nhau. Đã đăng nhập ("Góc học tập"): đổi sang nền đặc NHẠT (--o-800) để phân biệt trạng thái mà vẫn không đặc bằng --o-grad của "Tự chấm bậc". Contrast đo: --o-300/#2e2b25 = 8,7:1; hover nền --o-500/chữ --o-900 = luật cũ đã dùng ở .pd-nav__link:hover (an toàn); nền --o-800/chữ --o-200 = 7,83:1 (số đã đo sẵn trong nen.css dòng ~172). Không đụng dạng ngăn ☰ (khối ≤767px riêng, đã đạt) — khối này CHỈ áp ≥768px. */ @media (min-width: 768px) { .pd .pd-nav__dangnhap { display: inline-flex; align-items: center; gap: 8px; height: 44px; min-height: 44px; box-sizing: border-box; padding: 0 18px; margin-left: 10px; border: 1.5px solid var(--o-500); border-radius: 999px; background: transparent; color: var(--o-300); font-weight: 700; font-size: 15px; white-space: nowrap; transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; } .pd .pd-nav__dangnhap::before { content: ""; flex: none; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5M15 12H3M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5M15 12H3M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } .pd .pd-nav__dangnhap:hover { background: var(--o-500); color: var(--o-900); border-color: var(--o-500); transform: translateY(-2px); box-shadow: var(--o-glow); } .pd .pd-nav__dangnhap:focus-visible { outline: 2px solid var(--o-300); outline-offset: 2px; } .pd .pd-nav__dangnhap.pd-nav__dangnhap--da-vao { background: var(--o-800); border-color: var(--o-800); color: var(--o-200); } .pd .pd-nav__dangnhap.pd-nav__dangnhap--da-vao:hover { background: var(--o-700); border-color: var(--o-700); color: var(--o-100); transform: translateY(-2px); box-shadow: var(--o-glow); } } @media (min-width: 768px) and (prefers-reduced-motion: reduce) { .pd .pd-nav__dangnhap:hover { transform: none; } } @media (max-width: 767px) { .pd .pd-nav { flex-wrap: nowrap; } .pd .pd-nav__hamburger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; margin-left: auto; border: 1px solid var(--color-neutral-700); border-radius: 999px; background: transparent; color: var(--color-bg); cursor: pointer; padding: 0; } .pd .pd-nav__hamburger:hover { background: var(--color-neutral-800); } .pd .pd-nav__hamburger[aria-expanded="true"] { background: var(--o-500); color: var(--o-900); border-color: var(--o-500); } /* Icon ☰/✕ (WP3 W: icon cũ trông như "cái hộp") — 2 SVG riêng, chỉ 1 cái hiện theo trạng thái. */ .pd .pd-nav__hamburger .pd-nav__ic-dong { display: none; } .pd .pd-nav__hamburger[aria-expanded="true"] .pd-nav__ic-mo { display: none; } .pd .pd-nav__hamburger[aria-expanded="true"] .pd-nav__ic-dong { display: block; } /* Ngăn kéo xuống: ẩn mặc định, hiện khi #pd-nav-hamburger[aria-expanded=true] (JS gắn class "mo") */ .pd .pd-nav__links { display: none !important; flex-direction: column; align-items: stretch; gap: 0; position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: var(--color-neutral-900); border: 1px solid var(--color-neutral-700); border-radius: 20px; padding: 6px; box-shadow: var(--shadow-lg); max-height: calc(100vh - 96px); overflow-y: auto; } .pd .pd-nav__links.mo { display: flex !important; } .pd .pd-nav__cuon { display: flex !important; flex-direction: column; gap: 0; overflow-x: visible !important; mask-image: none !important; -webkit-mask-image: none !important; } /* W (Ngọc, ảnh navk): mục quá nhỏ/sát nhau -> ≥48px cao, chữ ≥16px, đường phân cách nhẹ giữa các mục (trừ mục cuối cùng trong .pd-nav__cuon). QC WP3 vòng sống 24/09: bỏ ":not(.pd-nav--deck)" — dưới 767px, CẢ hai biến thể (deck/không deck) đều hiện thành NGĂN KÉO giống hệt nhau (hamburger + .pd-nav__links.mo không phân biệt deck, xem dòng 1115/1128 cùng khối). Giữ ":not(deck)" ở đây làm trang chủ (dùng deck) bị bỏ sót, chữ vẫn 13px/44px. Không đụng dòng 112 (khối ≤612px, đúng ngữ cảnh khác — thanh gọn khi CHƯA vào chế độ ngăn kéo). */ .pd .pd-nav .pd-nav__cuon .pd-nav__link { flex: none !important; width: 100%; min-height: 48px; display: flex !important; align-items: center; padding: 0 16px; font-size: 16px; white-space: normal; box-sizing: border-box; border-bottom: 1px solid var(--color-neutral-800); } .pd .pd-nav .pd-nav__cuon .pd-nav__link:last-child { border-bottom: 0; } .pd .pd-nav__cta { margin: 8px 0 0 !important; width: 100%; min-height: 48px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: 16px; } /* Đăng nhập/Góc học tập: nút VIỀN (không đặc) ở CUỐI ngăn — tránh 2 nút đặc tranh nhau với "Tự chấm bậc". Rõ ràng là nút bấm được, không lẫn với các mục link phía trên. QC WP3 vòng sống 24/09: nút này còn mang class .pd-nav__link nên bị trinh-chieu.css ".pd-nav--deck .pd-nav__link" (3 lớp, nạp SAU giao-dien.css) đè font-size xuống 13px trên trang dùng deck (trang chủ). Thêm !important cho font-size để thắng chắc, không phụ thuộc thứ tự nạp file hay biến thể deck/không-deck. */ .pd .pd-nav__dangnhap { margin: 8px 0 0 !important; width: 100%; min-height: 48px; box-sizing: border-box; display: flex !important; align-items: center; justify-content: center; font-size: 16px !important; font-weight: 700; border: 1px solid var(--o-500); border-radius: 999px; color: var(--o-300); padding: 0 16px; white-space: normal; } .pd .pd-nav:not(.pd-nav--deck) { flex-wrap: nowrap !important; } /* Khoá cuộn nền (JS thêm class lên html khi ngăn mở) */ html.pd-nav-khoa-cuon { overflow: hidden; } } @media (max-width: 767px) and (prefers-reduced-motion: no-preference) { .pd .pd-nav__links { transition: none; } /* mở/đóng tức thời, không hiệu ứng trượt — an toàn cho mọi tốc độ máy */ } /* ---------- Y7 (Anh Phát 24/09): hộp thoại đăng nhập dùng chung + icon người + toast ---------- */ /* Icon người khi ĐÃ đăng nhập ("Góc học tập") — thay icon mũi tên vào của trạng thái chưa đăng nhập (khối ≥768px ở trên). Áp cho CẢ 2 kích cỡ màn (nút menu điện thoại không có icon trước đây — thêm luôn cho đồng bộ, không đổi kích thước/khoảng cách đã có). */ .pd .pd-nav__dangnhap.pd-nav__dangnhap--da-vao::before { content: ""; display: inline-block; flex: none; width: 16px; height: 16px; background-color: currentColor; margin-right: 6px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; } @media (max-width: 767px) { .pd .pd-nav__dangnhap::before, .pd .pd-nav__dangnhap.pd-nav__dangnhap--da-vao::before { content: ""; display: inline-block; flex: none; width: 16px; height: 16px; background-color: currentColor; margin-right: 0; } .pd .pd-nav__dangnhap::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5M15 12H3M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5M15 12H3M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } .pd .pd-nav__dangnhap.pd-nav__dangnhap--da-vao::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; } .pd .pd-nav__dangnhap.pd-nav__dangnhap--da-vao { background: var(--o-800); border-color: var(--o-800); color: var(--o-200) !important; } } /* Hộp thoại — dùng chung nav + trang học + Góc học tập. */ .pd-hop-dangnhap { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 16px; } .pd-hop-dangnhap.mo { display: flex; } .pd-hop-dangnhap__nen { position: absolute; inset: 0; background: rgba(20, 16, 10, .6); backdrop-filter: blur(2px); } .pd-hop-dangnhap__the { position: relative; z-index: 1; max-width: 420px; width: 100%; background: var(--color-neutral-900); border: 1px solid var(--color-neutral-700); border-radius: 20px; padding: 28px 24px 24px; box-shadow: var(--shadow-lg); color: var(--color-bg); } .pd-hop-dangnhap__dong { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-neutral-700); border-radius: 999px; background: transparent; color: var(--color-bg); cursor: pointer; font-size: 16px; } .pd-hop-dangnhap__dong:hover { background: var(--color-neutral-800); } .pd-hop-dangnhap__tieude { margin: 0 32px 8px 0; font-size: 20px; font-weight: 700; } .pd-hop-dangnhap__phu { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--color-neutral-200); } .pd-hop-dangnhap__phu a { color: var(--o-300); } .pd-hop-dangnhap__nut { min-height: 44px; display: flex; justify-content: center; } .pd-hop-dangnhap__loi { margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 138, 43, .12); color: var(--o-300); font-size: 14px; } .pd-hop-dangnhap__thulai { margin-top: 10px; width: 100%; min-height: 44px; border-radius: 999px; border: 1.5px solid var(--o-500); background: transparent; color: var(--o-300); font-weight: 700; font-size: 15px; cursor: pointer; } .pd-hop-dangnhap__thulai:hover { background: var(--o-500); color: var(--o-900); } .pd-hop-dangnhap__dong:focus-visible, .pd-hop-dangnhap__thulai:focus-visible { outline: 2px solid var(--o-300); outline-offset: 2px; } /* Toast báo thành công. */ .pd-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px); z-index: 210; background: var(--color-neutral-900); color: var(--color-bg); border: 1px solid var(--o-500); border-radius: 999px; padding: 10px 20px; font-size: 14px; font-weight: 700; opacity: 0; transition: opacity .25s, transform .25s; box-shadow: var(--shadow-lg); } .pd-toast.hien { opacity: 1; transform: translate(-50%, 0); } @media (prefers-reduced-motion: reduce) { .pd-toast { transition: opacity .01s; } }