/* CSS chung cho tat ca shortcode dong cua HTML Deploy Studio (xem class-shortcode-engine.php) —
1 file TINH cua CHINH plugin, dung chung cho moi trang/theme (Landing Page qua
Front_Renderer::enqueue_page_assets(), Website mode qua functions.php cua theme sinh ra) — CHU Y:
day la style MAC DINH trung tinh, khong biet truoc mau/font cua tung site, uu tien don gian/de
doc hon la dep mat rieng cho 1 thiet ke cu the. */
.wpds-sc {
margin: 32px 0;
}
.wpds-sc-heading {
margin: 0 0 16px;
font-size: 1.5em;
}
.wpds-sc-empty {
color: #6b7280;
font-style: italic;
}
.wpds-sc-error {
color: #d63638;
}
.wpds-sc-grid,
.wpds-blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}
/* "Số cột — Desktop/Tablet/Mobile" (Admin_Pages::render_blog_listing_config_panel(), layout Grid) —
--wpds-blog-columns* luon duoc Shortcode_Engine::render_blog_from_atts() gan qua inline style, ghi
de auto-fit mac dinh o tren cho rieng layout Grid (khong dung cham .wpds-sc-grid dung chung noi khac). */
.wpds-sc-blog-grid .wpds-blog-grid {
grid-template-columns: repeat(var(--wpds-blog-columns, 4), 1fr);
}
@media (max-width: 1024px) {
.wpds-sc-blog-grid .wpds-blog-grid {
grid-template-columns: repeat(var(--wpds-blog-columns-tablet, 2), 1fr);
}
}
@media (max-width: 640px) {
.wpds-sc-blog-grid .wpds-blog-grid {
grid-template-columns: repeat(var(--wpds-blog-columns-mobile, 1), 1fr);
}
}
/* FAQ */
.wpds-faq-item {
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 10px;
}
.wpds-faq-item summary {
cursor: pointer;
font-weight: 600;
}
.wpds-faq-answer {
margin-top: 8px;
color: #374151;
}
/* Testimonials */
.wpds-testimonial-item {
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 16px;
margin: 0;
}
.wpds-testimonial-item blockquote {
margin: 0 0 10px;
font-style: italic;
}
.wpds-testimonial-item figcaption {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
}
.wpds-testimonial-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
}
/* Team */
.wpds-team-item {
text-align: center;
}
.wpds-team-photo {
width: 100%;
max-width: 160px;
aspect-ratio: 1/1;
object-fit: cover;
border-radius: 50%;
margin: 0 auto 10px;
display: block;
}
.wpds-team-role {
color: #6b7280;
margin: 4px 0 0;
}
/* Gallery */
.wpds-gallery-item img {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 6px;
display: block;
}
.wpds-gallery-item figcaption {
margin-top: 6px;
font-size: 0.9em;
color: #6b7280;
}
/* CTA */
.wpds-cta-banner {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
background: #eef2ff;
border-radius: 10px;
padding: 24px;
margin-bottom: 16px;
}
.wpds-cta-image {
max-width: 160px;
border-radius: 8px;
}
.wpds-cta-btn {
display: inline-block;
margin-top: 10px;
padding: 10px 20px;
background: #4f46e5;
color: #fff;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
}
/* Blog cards — Grid/List/Masonry (xem Shortcode_Engine::render_blog_card()). */
/* Tu ve day du (KHONG dua vao .wpds-ui-badge — class do chi dinh nghia trong components.css, file
CHI enqueue trong wp-admin, xem class-plugin.php::enqueue_admin_assets(); shortcodes.css la file
DUY NHAT tai tren site cong khai that. BUG THAT tim thay qua adversarial review: .wpds-wc-demo-badge
(san pham, co truoc) cung mang loi nay — vong lap thieu style tuong tu, chi co position:absolute,
hien ra chu tran khong pill/mau tren site that khi 0 san pham/bai viet that. Blog copy dung mau do
nen sua luon o day CHO CA 2, khong de lap lai tren site cong khai). */
.wpds-blog-demo-badge,
.wpds-wc-demo-badge {
display: inline-block;
margin-bottom: 12px;
padding: 3px 10px;
border-radius: 999px;
background: #eef2ff;
color: #4338ca;
font-size: 12px;
font-weight: 600;
}
.wpds-blog-card {
border: 1px solid #e5e7eb;
border-radius: 10px;
overflow: hidden;
background: #fff;
display: flex;
flex-direction: column;
transition: transform .18s ease, box-shadow .18s ease;
}
.wpds-blog-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(17, 24, 39, .08);
}
.wpds-blog-thumb {
position: relative;
display: block;
overflow: hidden;
}
.wpds-blog-thumb img {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
transition: transform .25s ease;
}
.wpds-blog-card:hover .wpds-blog-thumb img {
transform: scale(1.04);
}
.wpds-blog-thumb-placeholder {
display: block;
width: 100%;
height: 180px;
background: linear-gradient(135deg, #eef2ff, #e0e7ff);
}
.wpds-blog-card-cat {
position: absolute;
top: 10px;
left: 10px;
background: #4f46e5;
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 3px 9px;
border-radius: 999px;
}
.wpds-blog-card-cat-inline {
position: static;
align-self: flex-start;
}
.wpds-blog-card-body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.wpds-blog-title {
margin: 0;
font-size: 1.05em;
font-weight: 600;
line-height: 1.4;
}
/* color: var(--wpds-style-title-color, inherit) — bien CSS ghi de tu tinh nang "click-to-edit" mau
chu tieu de tren preview (theo yeu cau truc tiep, giong bên sản phẩm), xem
Shortcode_Engine::blog_style_override_css_vars() — bien nay do CHINH the .wpds-sc-blog... boc
ngoai gan qua thuoc tinh style (khong dat truc tiep tren the nay), ke thua xuong binh thuong qua
CSS custom property. Khong ghi de gi thi fallback "inherit" giu dung mau CU (khong doi hanh vi cho
nguoi dung chua tung dung tinh nang nay). */
.wpds-blog-title a {
color: var(--wpds-style-title-color, inherit);
text-decoration: none;
}
.wpds-blog-title a:hover {
color: #4f46e5;
}
/* Gioi han tieu de TOI DA 2 dong theo yeu cau truc tiep — tieu de dai qua se bi CAT + "…", khong day
xuong dong thu 3 lam card cao thap khong deu nhau trong 1 hang (dung y "sửa tràn hàng" da lam voi
cac phan khac cua the, xem git log). display:-webkit-box BAT BUOC de -webkit-line-clamp co tac
dung — von la inline, khong the clamp neu giu display mac dinh. */
.wpds-blog-title a {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.wpds-blog-excerpt {
color: #374151;
font-size: 0.95em;
line-height: 1.5;
}
.wpds-blog-meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
color: #9ca3af;
font-size: 0.85em;
}
/* Tac gia/thoi gian doc de tran, khong co gi phan biet voi ngay dang — de nham la 1 tu ngau nhien
(theo yeu cau truc tiep "ghi rõ tác giả thời gian đọc"). Them icon nho (SVG outline qua mask-image,
tu nhuom currentColor — cung ky thuat voi icon gio hang o .single_add_to_cart_button::before phia
duoi, KHONG dung emoji vi tho/khac nhau giua he dieu hanh/font) truoc moi nhan, khong can text
"Tác giả:"/"Thời gian đọc:" dai dong ra card chat hep. Rieng ngay dang (