/* * Vùng phả đồ nhúng — [mytree_phado] * * Cố ý viết bằng CLASS và BIẾN CSS, không dùng selector ID, không dùng !important: * plugin này chạy trên mọi mẫu theme, mà mỗi mẫu một kiểu trình bày. Nếu plugin ghi * số cứng bằng selector mạnh thì theme không đè lại được, và mỗi lần có mẫu mới lại * phải sửa plugin — không theo kịp. * * Muốn đổi, KHÔNG sửa file này. Đặt lại biến ở chỗ của mình: * * Cả một mẫu theme → /assets/phado.css (plugin tự nạp nếu có, nạp SAU file này) * .mtc-phado { --mtc-phado-cao: 700px; } * * Một trang cụ thể → dùng class riêng cho shortcode * [mytree_phado url="..." lop="pd-trang-chu"] * .pd-trang-chu { --mtc-phado-cao: 90vh; } * * Một bài cụ thể → WordPress đã gắn sẵn class bài vào * .postid-6363 .mtc-phado { --mtc-phado-cao: 90vh; } * * Số mặc định nằm ở phần dự phòng của var() chứ không khai thành biến — có vậy thì * biến đặt ở thẻ cha (khung trang, body) mới đè được xuống. */ .mtc-phado iframe { display: block; width: 100%; height: var(--mtc-phado-cao, 600px); border: var(--mtc-phado-vien, 1px solid #e5e7eb); border-radius: var(--mtc-phado-bo-goc, 10px); background: var(--mtc-phado-nen, #f9fafb); } .mtc-phado-tieude { margin-top: 6px; text-align: center; font-size: 14px; color: #6b7280; } @media (max-width: 782px) { .mtc-phado iframe { height: var(--mtc-phado-cao-dt, 432px); } } /* ── Vòng quay trong lúc chờ phả đồ vẽ xong ──────────────────────────────── Nằm đè lên đúng vùng khung, nền mờ chứ không đục hẳn để người xem thấy khung sắp hiện ra ở đâu. Bấm xuyên qua được (pointer-events:none) phòng khi có lỗi mà vòng quay còn sót lại thì cũng không chặn tay ai. */ .mtc-phado { position: relative; } .mtc-phado-cho { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; pointer-events: none; background: var(--mtc-phado-nen, #f9fafb); border-radius: var(--mtc-phado-bo-goc, 10px); transition: opacity .25s; } .mtc-phado-cho--tat { opacity: 0; } .mtc-phado-quay { width: 40px; height: 40px; border-radius: 50%; border: 4px solid #e5e7eb; border-top-color: #2563eb; animation: mtc-phado-quay 0.8s linear infinite; } .mtc-phado-cho-chu { font-size: 14px; color: #6b7280; } @keyframes mtc-phado-quay { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .mtc-phado-quay { animation-duration: 2.4s; } } /* ── Danh sách các trang phả đồ — [mytree_phado_ds] ──────────────────────── Trang trọng theo lối hoành phi câu đối: khung viền kép, bốn góc có dấu, tên bài chữ có chân, dưới tên là hoa văn ngăn. Vẫn theo lối biến CSS như trên — theme muốn đổi màu, đổi phông thì khai đè, không sửa file này. */ .mtc-phado-ds { display: grid; grid-template-columns: repeat(var(--mtc-phado-ds-cot, 3), minmax(0, 1fr)); gap: var(--mtc-phado-ds-khe, 22px); margin: 22px 0; align-items: stretch; /* các ô cao bằng nhau, không so le */ } .mtc-phado-ds-o { position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; /* ăn hết chiều cao ô lưới -> đều tăm tắp */ padding: 26px 22px 24px; text-decoration: none; text-align: center; color: var(--mtc-phado-ds-chu, #4a2c1a); background: var(--mtc-phado-ds-nen, linear-gradient(180deg, #fffdf7 0%, #fdf6e8 100%)); border: 2px solid var(--mtc-phado-ds-vien, #b8860b); border-radius: var(--mtc-phado-ds-bo-goc, 4px); transition: box-shadow .18s, transform .18s, border-color .18s; } /* viền kép: một đường mảnh chạy bên trong, cách mép 6px */ .mtc-phado-ds-o::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--mtc-phado-ds-vien-trong, rgba(184, 134, 11, .45)); border-radius: 2px; pointer-events: none; } /* bốn góc: dấu vuông nhỏ cho ra dáng khung tranh */ .mtc-phado-ds-o::after { content: ""; position: absolute; inset: 6px; pointer-events: none; background: linear-gradient(var(--mtc-phado-ds-goc, #b8860b) 0 0) left top / 14px 2px no-repeat, linear-gradient(var(--mtc-phado-ds-goc, #b8860b) 0 0) left top / 2px 14px no-repeat, linear-gradient(var(--mtc-phado-ds-goc, #b8860b) 0 0) right top / 14px 2px no-repeat, linear-gradient(var(--mtc-phado-ds-goc, #b8860b) 0 0) right top / 2px 14px no-repeat, linear-gradient(var(--mtc-phado-ds-goc, #b8860b) 0 0) left bottom / 14px 2px no-repeat, linear-gradient(var(--mtc-phado-ds-goc, #b8860b) 0 0) left bottom / 2px 14px no-repeat, linear-gradient(var(--mtc-phado-ds-goc, #b8860b) 0 0) right bottom / 14px 2px no-repeat, linear-gradient(var(--mtc-phado-ds-goc, #b8860b) 0 0) right bottom / 2px 14px no-repeat; } /* Nhiều theme gạch chân mọi trong nội dung bài, mà cả ô ở đây là một thẻ nên tên bài, tóm tắt, dòng "Xem phả đồ" đều bị gạch, trông rối. Phải thắng ở ĐÚNG thẻ : text-decoration truyền xuống các thẻ con, và con KHÔNG tự huỷ được — đặt text-decoration:none cho con là vô ích. Đây là chỗ duy nhất trong file dùng !important. Luật của theme cho trong nội dung bài thường mạnh và khó đoán, mà gạch chân cả một ô thẻ thì không phải ý đồ trình bày nào cả. Các thứ khác (cỡ, màu, viền) vẫn để theme đè bình thường. */ a.mtc-phado-ds-o { text-decoration: none !important; } .mtc-phado-ds-o:hover { border-color: var(--mtc-phado-ds-vien-hover, #8b1a1a); box-shadow: 0 8px 24px rgba(139, 26, 26, .13); transform: translateY(-3px); } .mtc-phado-ds-anh img { display: block; width: 100%; height: auto; margin-bottom: 12px; border-radius: 2px; } .mtc-phado-ds-ten { font-family: var(--mtc-phado-ds-phong, Georgia, "Times New Roman", serif); font-size: var(--mtc-phado-ds-co-ten, 19px); font-weight: 700; line-height: 1.4; color: var(--mtc-phado-ds-ten-mau, #8b1a1a); } /* hoa văn ngăn giữa tên và phần tóm tắt */ .mtc-phado-ds-hoavan { display: block; margin: 10px auto 12px; width: 76%; max-width: 150px; height: 11px; color: var(--mtc-phado-ds-goc, #b8860b); } .mtc-phado-ds-hoavan svg { display: block; width: 100%; height: 100%; } .mtc-phado-ds-tom { font-size: 14px; line-height: 1.6; color: var(--mtc-phado-ds-tom-mau, #6b5544); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* đẩy chân xuống đáy để mọi ô nhìn cân nhau dù chữ dài ngắn khác nhau */ .mtc-phado-ds-xem { margin-top: auto; padding-top: 16px; font-size: 13px; font-weight: 700; letter-spacing: .03em; color: var(--mtc-phado-ds-xem-mau, #b8860b); text-transform: uppercase; } /* Tiêu đề trang danh sách — canh giữa. Gắn class vào từ PHP thay vì đoán selector của từng theme. */ body.mtc-phado-ds-trang h1 { text-align: center; } @media (max-width: 782px) { .mtc-phado-ds { grid-template-columns: repeat(var(--mtc-phado-ds-cot-dt, 1), minmax(0, 1fr)); } .mtc-phado-ds-o { padding: 22px 18px 20px; } }