/** * Style DÙNG CHUNG cho toàn bộ 7 block — nạp bằng block.json "style" * (WordPress tự enqueue CHỈ trên trang có dùng ít nhất 1 block này, cả * frontend lẫn Editor). Đây là điểm SỬA LỖI so với bản đầu: 6 block đầu * dựa vào class trong frontend.css của trang riêng tư — nhưng * frontend.css chỉ được enqueue trên route riêng của trang đó, KHÔNG * tải khi block xuất hiện ở trang chủ/bài viết bình thường, nên trước * đây block sẽ hiện ra KHÔNG CÓ STYLE ở đúng chỗ user vừa yêu cầu đặt * (trang chủ, bài viết). File này độc lập hoàn toàn, tự định nghĩa biến * màu riêng theo tiền tố "--td1-" gắn trên .td1-block (không phải * :root toàn cục) để không đụng/không phụ thuộc biến của theme đang * active — vẫn đúng đúng bảng màu đã chốt cho dự án (giấy ấm + xanh * rêu + vàng đất + đất nung). */ .td1-block{ --td1-paper:#f2f4ee; --td1-paper-raised:#ffffff; --td1-ink:#1c2620; --td1-ink-soft:#4b5a51; --td1-ink-faint:#8a988e; --td1-line:#d8ddd1; --td1-line-strong:#82926c; --td1-moss:#3f6b52; --td1-moss-deep:#2c4d3a; --td1-moss-tint:#dbe8de; --td1-gold:#a8763a; --td1-gold-tint:#f1e2c8; --td1-clay:#a8503f; --td1-clay-tint:#f2ded9; --td1-shadow: 0 1px 2px rgba(28,38,32,0.06), 0 4px 14px rgba(28,38,32,0.06); --td1-radius: 10px; background:var(--td1-paper-raised); border:1px solid var(--td1-line); border-radius:var(--td1-radius); box-shadow:var(--td1-shadow); padding:16px 18px; font-family:"Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif; color:var(--td1-ink); } @media (prefers-color-scheme: dark){ .td1-block:not([data-theme="light"]){ --td1-paper:#131a15; --td1-paper-raised:#1a2320; --td1-ink:#e9ede7; --td1-ink-soft:#aab6ac; --td1-ink-faint:#6c7a70; --td1-line:#2b362f; --td1-line-strong:#5b7b67; --td1-moss:#7bab8e; --td1-moss-deep:#a9cbb6; --td1-moss-tint:#213229; --td1-gold:#d3a666; --td1-gold-tint:#332a1a; --td1-clay:#d0897a; --td1-clay-tint:#33221e; } } .td1-block h3{ font-family:"Literata", serif; font-weight:600; font-size:0.98rem; margin:0 0 10px; color:var(--td1-ink); } .td1-block .td1-empty{ color:var(--td1-ink-faint); font-size:0.85rem; } .td1-block .checklist{ list-style:none; margin:0; padding:0; } .td1-block .checklist li{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px dashed var(--td1-line); } .td1-block .checklist li:last-child{ border-bottom:none; } .td1-block .checklist li.info{ color:var(--td1-ink-soft); font-size:0.86rem; } .td1-block .checklist input[type=checkbox]{ width:18px; height:18px; accent-color:var(--td1-moss); flex:none; } .td1-block .checklist label{ flex:1; font-size:0.92rem; cursor:pointer; color:var(--td1-ink); } .td1-block .checklist li.done label{ color:var(--td1-ink-faint); text-decoration:line-through; } .td1-block .checklist .time{ font-family:"IBM Plex Mono", monospace; font-size:0.72rem; color:var(--td1-ink-faint); white-space:nowrap; } .td1-block .progress-wrap{ height:8px; border-radius:999px; background:var(--td1-line); overflow:hidden; margin-top:12px; } .td1-block .progress-bar{ height:100%; background:var(--td1-moss); border-radius:999px; } .td1-block .progress-label{ font-family:"IBM Plex Mono", monospace; font-size:0.74rem; color:var(--td1-ink-soft); margin-top:6px; } .td1-block .summary-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-top:4px; } .td1-block .summary-item{ background:var(--td1-paper); border:1px solid var(--td1-line); border-radius:8px; padding:10px 12px; } .td1-block .summary-item .label{ font-size:0.74rem; color:var(--td1-ink-soft); } .td1-block .summary-item .value{ font-family:"IBM Plex Mono", monospace; font-size:1.05rem; font-weight:600; margin-top:2px; color:var(--td1-ink); } .td1-block .tag{ display:inline-block; font-family:"IBM Plex Mono", monospace; font-size:0.68rem; font-weight:600; border-radius:6px; padding:2px 7px; margin-top:4px; } .td1-block .tag.ok{ background:var(--td1-moss-tint); color:var(--td1-moss-deep); } .td1-block .tag.warn{ background:var(--td1-gold-tint); color:var(--td1-gold); } .td1-block .tag.bad{ background:var(--td1-clay-tint); color:var(--td1-clay); } .td1-block .tag.neutral{ background:var(--td1-line); color:var(--td1-ink-soft); } .td1-block .reward-list{ display:flex; flex-direction:column; gap:8px; } .td1-block .reward-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border:1px solid var(--td1-line); border-radius:8px; background:var(--td1-paper); } .td1-block .reward-row .reward-label{ font-size:0.9rem; color:var(--td1-ink); } .td1-block .reward-row .reward-cost{ font-family:"IBM Plex Mono", monospace; font-size:0.76rem; color:var(--td1-ink-soft); white-space:nowrap; } .td1-block .reward-btn{ font-family:"IBM Plex Mono", monospace; font-size:0.74rem; font-weight:600; border:1px solid var(--td1-moss); background:var(--td1-moss); color:#fff; border-radius:999px; padding:6px 12px; cursor:pointer; white-space:nowrap; } .td1-block .reward-btn:disabled{ background:var(--td1-paper); color:var(--td1-ink-faint); border-color:var(--td1-line); cursor:not-allowed; } .td1-block .method-note{ font-size:0.82rem; color:var(--td1-ink-soft); margin-top:10px; line-height:1.5; } .td1-block .method-note strong{ color:var(--td1-ink); } /* ---------- Block "Đánh giá hoàn thành từng ngày" — lưới ô nhỏ kiểu GitHub ---------- */ /* G1 (08/09/2026) — sửa lỗi tương phản ô "chưa có dữ liệu": trước dùng var(--td1-line) (#d8ddd1) làm nền ô trên thẻ nền trắng "raised" (#ffffff) — đo thật ra chỉ 1.38:1 (dark mode còn tệ hơn: 1.28:1), trong khi WCAG 1.4.11 (Non-text Contrast) yêu cầu tối thiểu 3:1 cho đồ hoạ, thành phần giao diện mang ý nghĩa — hậu quả thật đã thấy trên ảnh chụp: 51/53 cột gần như vô hình dù layout/toạ độ hoàn toàn đúng. Đổi sang biến mới `--td1-line-strong` (định nghĩa cùng cặp sáng/tối ở đầu file) — lấy đúng màu "Viền đậm (tương tác)" đã có sẵn trong theme.json (#82926c, 3.35:1 trên nền trắng) làm bản sáng, và 1 sắc xanh rêu trầm hơn (#5b7b67, 3.43:1 trên nền "raised" tối) cho bản tối — cùng nguyên tắc đã áp dụng cho viền tương tác khác trong theme (xem style.css theme, mục G9). */ .td1-heatmap{ display:flex; gap:3px; overflow-x:auto; padding-bottom:6px; } .td1-heatmap-week{ display:flex; flex-direction:column; gap:3px; } .td1-heatmap-cell{ width:11px; height:11px; border-radius:3px; background:var(--td1-line-strong); } .td1-heatmap-cell[data-level="1"]{ background:var(--td1-clay-tint); } .td1-heatmap-cell[data-level="2"]{ background:var(--td1-gold-tint); } .td1-heatmap-cell[data-level="3"]{ background:var(--td1-moss-tint); } .td1-heatmap-cell[data-level="4"]{ background:var(--td1-moss); } .td1-heatmap-cell[data-level="5"]{ background:var(--td1-moss-deep); } .td1-heatmap-legend{ display:flex; align-items:center; gap:6px; margin-top:10px; font-size:0.72rem; color:var(--td1-ink-soft); font-family:"IBM Plex Mono", monospace; } .td1-heatmap-legend .td1-heatmap-cell{ width:10px; height:10px; } /* Block "Dòng thời gian" (td1/dong-thoi-gian) — mốc Trọng tự thêm ở trang quản trị, không phải bài viết WordPress. Kiểu chấm-nối, cùng tinh thần dòng thời gian đã có sẵn trên site (đường kẻ dọc màu rêu + chấm tròn ở mỗi mốc). */ .td1-timeline__empty{ color:var(--td1-ink-soft); } .td1-timeline__list{ list-style:none; margin:0; padding:0; position:relative; } .td1-timeline__item{ position:relative; padding:0 0 1.5rem 1.5rem; border-left:2px solid var(--td1-moss-tint); } .td1-timeline__item:last-child{ padding-bottom:0; border-left-color:transparent; } .td1-timeline__item::before{ content:""; position:absolute; left:-0.4rem; top:0.35rem; width:0.7rem; height:0.7rem; border-radius:50%; background:var(--td1-moss); border:2px solid var(--td1-paper-raised); } .td1-timeline__date{ display:block; font-family:"IBM Plex Mono", monospace; font-size:0.75rem; color:var(--td1-ink-faint); margin-bottom:0.15rem; } .td1-timeline__title{ margin:0 0 0.25rem; font-size:1.05rem; } .td1-timeline__desc{ margin:0; color:var(--td1-ink-soft); }