/
) */
.qbs-collections>a:nth-of-type(1) {
grid-area: featured !important;
}
.qbs-collections>a:nth-of-type(2) {
grid-area: item1 !important;
}
.qbs-collections>a:nth-of-type(3) {
grid-area: item2 !important;
}
.qbs-collections>a:nth-of-type(4) {
grid-area: item3 !important;
}
.qbs-collections>a:nth-of-type(5) {
grid-area: item4 !important;
}
/* Mỗi item là một link */
.qbs-collections__item {
position: relative;
overflow: hidden;
border-radius: 4px;
display: block;
text-decoration: none;
cursor: pointer;
min-height: 0;
}
/* Background image */
.qbs-collections__img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.qbs-collections__item:hover .qbs-collections__img {
transform: scale(1.05);
}
/* Soft bottom gradient — let images breathe */
.qbs-collections__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(0, 0, 0, 0.55) 0%,
rgba(0, 0, 0, 0.15) 35%,
transparent 65%);
transition: opacity 0.5s ease;
}
.qbs-collections__item:hover .qbs-collections__overlay {
opacity: 0.75;
}
/* Editorial text info — no glass badge, clean on gradient */
.qbs-collections__info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
background: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: none;
border-radius: 0;
padding: var(--space-md) var(--space-lg);
transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.qbs-collections__item:hover .qbs-collections__info {
transform: translateY(-4px);
}
/* Badge "POPULAR" */
.qbs-collections__badge {
display: inline-block;
background: var(--brand-primary);
color: var(--text-on-dark);
font-family: var(--font-label);
font-size: 0.65rem;
font-weight: var(--fw-bold);
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.2em 0.7em;
border-radius: var(--radius-full);
margin-bottom: var(--space-2xs);
}
/* Tên danh mục — editorial style with gold underline on hover */
.qbs-collections__title {
color: var(--text-on-dark);
font-family: var(--font-heading);
font-size: var(--fs-body);
font-weight: var(--fw-bold);
margin: 0;
line-height: 1.3;
display: inline-block;
position: relative;
padding-bottom: 4px;
}
/* Gold underline animate */
.qbs-collections__title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--brand-secondary, #C9A96E);
transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.qbs-collections__item:hover .qbs-collections__title::after {
width: 100%;
}
/* Mô tả phụ — fade in on hover */
.qbs-collections__subtitle {
display: block;
color: rgba(255, 255, 255, 0.75);
font-family: var(--font-label);
font-size: var(--fs-caption);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 6px;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}
.qbs-collections__item:hover .qbs-collections__subtitle {
opacity: 1;
transform: translateY(0);
}
.hp-products__features {
padding-bottom: 10px !important;
}
/* ─── Responsive ─── */
/* Tablet */
@media (max-width: 960px) {
.qbs-collections {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 260px 200px 200px;
grid-template-areas:
"featured featured"
"item1 item2"
"item3 item4";
}
}
/* Mobile — 1 featured lớn + 4 items nhỏ grid 2×2 */
@media (max-width: 520px) {
.qbs-collections,
.qbs-collections--4,
.qbs-collections--3 {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
grid-template-areas:
"featured featured"
"item1 item2"
"item3 item4";
gap: 6px;
}
.qbs-collections__item {
height: 130px;
}
.qbs-collections__item--featured,
.qbs-collections>a:nth-of-type(1) {
height: 200px;
}
/* Smaller title on compact cards */
.qbs-collections__title {
font-size: 0.8rem;
}
.qbs-collections__info {
padding: var(--space-xs) var(--space-sm);
}
}
/* ==========================================================================
QBS PROJECTS GALLERY — Dự án đã thực hiện
Shortcode: [qbs_projects]
Masonry grid + filter tabs + lightbox overlay
========================================================================== */
/* ── Filter Tabs ── */
.qbs-projects-filter {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--space-2xs);
margin-bottom: var(--space-lg);
}
.qbs-filter-btn {
font-family: var(--font-label);
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
color: var(--text-tertiary);
background: transparent;
border: 1px solid var(--border-color);
border-radius: var(--radius-full);
padding: 0.35em 1em;
cursor: pointer;
transition: all var(--transition-fast);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.qbs-filter-btn:hover {
color: var(--brand-primary);
border-color: var(--brand-primary);
}
.qbs-filter-btn.active {
background: var(--brand-primary);
color: var(--text-on-primary);
border-color: var(--brand-primary);
}
/* Filter animation */
.qbs-project-item {
transition: opacity 0.2s ease, transform 0.2s ease;
}
.qbs-project-item.qbs-fading {
opacity: 0;
transform: scale(0.96);
}
.qbs-project-item.qbs-hidden {
display: none;
}
/* ── CSS Grid — Equal Columns ── */
.qbs-projects {
display: grid;
gap: var(--space-xs);
}
.qbs-projects--2col {
grid-template-columns: repeat(2, 1fr);
}
.qbs-projects--3col {
grid-template-columns: repeat(3, 1fr);
}
.qbs-projects--4col {
grid-template-columns: repeat(4, 1fr);
}
/* Auto rows — fixed height so images fill evenly */
.qbs-projects {
grid-auto-rows: 280px;
}
/* ── MASONRY BENTO — Premium asymmetric grid ──
Pattern: 6 items
Row 1: [ HERO (tall) ] [ item2 ] [ item3 ]
Row 2: [ HERO (cont) ] [ item4 ──── wide ── ]
Row 3: [ item5 ] [ item6 ] [ item7 ]
*/
.qbs-projects--bento {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 220px 220px 280px;
gap: var(--space-sm);
}
/* Item 1 → Hero: spans 1 col, 2 rows tall */
.qbs-projects--bento .qbs-project-item:nth-child(1) {
grid-row: 1 / 3;
}
/* Item 4 → Wide: spans 2 cols */
.qbs-projects--bento .qbs-project-item:nth-child(4) {
grid-column: 2 / 4;
}
/* ── Filtered state — collapse to auto-flow grid ──
When filtering (not "all"), bento fixed rows leave gaps.
This class switches to auto-flow so rows collapse naturally. */
.qbs-projects--bento.qbs-projects--filtered {
grid-template-rows: none;
grid-auto-rows: 260px;
}
.qbs-projects--bento.qbs-projects--filtered .qbs-project-item:nth-child(1) {
grid-row: auto;
}
.qbs-projects--bento.qbs-projects--filtered .qbs-project-item:nth-child(4) {
grid-column: auto;
}
/* ── Each Item ── */
.qbs-project-item {
display: block;
overflow: hidden;
position: relative;
cursor: pointer;
text-decoration: none;
border-radius: var(--radius-sm);
}
.qbs-project-item img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform var(--transition-slow);
}
.qbs-project-item:hover img {
transform: scale(1.05);
}
/* ── Hover Overlay ── */
.qbs-project-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(0, 0, 0, 0.7) 0%,
rgba(0, 0, 0, 0.1) 40%,
transparent 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: var(--space-lg);
opacity: 0;
transition: opacity var(--transition-base);
border-radius: var(--radius-sm);
}
.qbs-project-item:hover .qbs-project-overlay {
opacity: 1;
}
/* Title on overlay */
.qbs-project-title {
font-family: var(--font-heading);
font-size: var(--fs-body);
font-weight: var(--fw-bold);
color: var(--text-on-dark);
line-height: var(--lh-tight);
margin-bottom: var(--space-2xs);
}
/* Category label on overlay */
.qbs-project-cat {
font-family: var(--font-label);
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* ── Hidden by filter ── */
.qbs-project-item.qbs-hidden {
display: none;
}
/* ── Responsive ── */
@media (max-width: 960px) {
.qbs-projects--3col,
.qbs-projects--4col {
grid-template-columns: repeat(2, 1fr);
}
.qbs-projects {
grid-auto-rows: 220px;
}
/* Bento tablet: hero top full-width, rest 2 cols */
.qbs-projects--bento {
grid-template-columns: 1fr 1fr;
grid-template-rows: 260px 200px 200px 200px;
}
.qbs-projects--bento .qbs-project-item:nth-child(1) {
grid-column: 1 / 3;
grid-row: auto;
}
.qbs-projects--bento .qbs-project-item:nth-child(4) {
grid-column: auto;
}
}
@media (max-width: 520px) {
.qbs-projects,
.qbs-projects--2col,
.qbs-projects--3col,
.qbs-projects--4col {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 180px;
}
.qbs-projects-filter {
gap: var(--space-2xs);
}
.qbs-filter-btn {
font-size: var(--fs-caption);
padding: var(--space-2xs) var(--space-sm);
}
.qbs-project-overlay {
opacity: 1;
/* Always show on mobile (no hover) */
}
}
/* ==========================================================================
QBS LIGHTBOX — Custom gallery lightbox
========================================================================== */
.qbs-lightbox {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-base), visibility var(--transition-base);
}
.qbs-lightbox.active {
opacity: 1;
visibility: visible;
}
/* Dark overlay */
.qbs-lightbox__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.7);
cursor: pointer;
}
/* Image container */
.qbs-lightbox__content {
position: relative;
z-index: 2;
max-width: 90vw;
max-height: 88vh;
display: flex;
align-items: center;
justify-content: center;
}
.qbs-lightbox__img {
max-width: 100%;
max-height: 85vh;
object-fit: contain;
border-radius: 0;
box-shadow: 0 8px 60px rgba(0, 0, 0, 0.6);
transition: opacity 0.2s ease;
}
/* Close button */
.qbs-lightbox__close {
position: absolute;
top: var(--space-lg);
right: var(--space-lg);
z-index: 3;
background: none;
border: none;
color: rgba(255, 255, 255, 0.45);
font-size: 1.75rem;
font-weight: 200;
cursor: pointer;
transition: color var(--transition-fast), transform var(--transition-fast);
line-height: 1;
}
.qbs-lightbox__close:hover {
color: var(--text-on-dark);
transform: scale(1.15);
}
/* Prev / Next arrows */
.qbs-lightbox__prev,
.qbs-lightbox__next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
background: none;
border: none;
color: rgba(255, 255, 255, 0.35);
font-size: 1.5rem;
width: 44px;
height: 44px;
cursor: pointer;
transition: color var(--transition-fast), transform var(--transition-fast);
display: flex;
align-items: center;
justify-content: center;
}
.qbs-lightbox__prev {
left: var(--space-lg);
}
.qbs-lightbox__next {
right: var(--space-lg);
}
.qbs-lightbox__prev:hover,
.qbs-lightbox__next:hover {
color: var(--text-on-dark);
transform: translateY(-50%) scale(1.2);
}
/* Counter */
.qbs-lightbox__counter {
position: absolute;
bottom: var(--space-lg);
left: 50%;
transform: translateX(-50%);
z-index: 3;
font-family: var(--font-label);
font-size: var(--fs-small);
color: rgba(255, 255, 255, 0.6);
letter-spacing: 0.1em;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.qbs-lightbox__prev,
.qbs-lightbox__next {
width: 36px;
height: 48px;
font-size: 1.25rem;
}
.qbs-lightbox__prev {
left: var(--space-2xs);
}
.qbs-lightbox__next {
right: var(--space-2xs);
}
.qbs-lightbox__close {
top: var(--space-sm);
right: var(--space-sm);
font-size: 2rem;
}
}
/* ==========================================================================
QBS GLOBAL REACH — Thị trường / Đối tác quốc tế
HTML paste vào UX Builder → khách hàng tự sửa nội dung
========================================================================== */
.qbs-global {
display: grid;
grid-template-columns: 5fr 7fr;
gap: var(--space-2xl);
align-items: start;
}
/* ── Stats Card (gold gradient) ── */
.qbs-global__stats {
background: linear-gradient(135deg, var(--brand-primary), #c8973e);
color: var(--text-on-primary);
padding: var(--space-2xl) var(--space-xl);
display: flex;
flex-direction: column;
gap: var(--space-xl);
}
.qbs-global__stat-item {
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
padding-bottom: var(--space-lg);
}
.qbs-global__stat-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.qbs-global__stat-number {
font-family: var(--font-heading);
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: var(--fw-bold);
line-height: 1;
margin-bottom: var(--space-2xs);
}
.qbs-global__stat-label {
font-family: var(--font-label);
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.85;
}
/* ── Featured Projects List — Premium ── */
.qbs-global__featured {
margin-top: var(--space-xl);
}
.qbs-global__featured-title {
font-family: var(--font-label);
font-size: 11px;
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--brand-primary);
margin-bottom: var(--space-lg);
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--border-color);
position: relative;
}
.qbs-global__featured-title::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 48px;
height: 2px;
background: var(--brand-primary);
}
.qbs-global__featured ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
}
.qbs-global__featured li {
font-family: var(--font-label);
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
color: var(--text-secondary);
letter-spacing: 0.04em;
padding: 8px 18px;
border: 1px solid var(--border-color);
border-radius: var(--radius-xs);
transition: all var(--transition-base);
cursor: default;
}
.qbs-global__featured li:hover {
color: var(--brand-primary);
border-color: var(--brand-primary);
background: rgba(184, 134, 11, 0.04);
}
/* ── Right Column: Regions & Country Badges ── */
.qbs-global__regions {
display: flex;
flex-direction: column;
gap: var(--space-xl);
}
.qbs-global__region-title {
font-family: var(--font-label);
font-size: var(--fs-caption);
font-weight: var(--fw-bold);
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: var(--space-sm);
}
.qbs-global__badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
}
.qbs-global__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
font-family: var(--font-body);
font-size: var(--fs-small);
font-weight: var(--fw-medium);
color: var(--text-primary);
background: var(--bg-primary);
border: 1px solid var(--border-color);
padding: var(--space-2xs) var(--space-md);
border-radius: var(--radius-full);
white-space: nowrap;
transition: border-color var(--transition-fast);
}
.qbs-global__badge:hover {
border-color: var(--brand-primary);
}
.qbs-global__badge-flag {
font-size: 1.1em;
line-height: 1;
}
/* ── "và nhiều hơn nữa" link ── */
.qbs-global__more {
font-family: var(--font-body);
font-size: var(--fs-small);
color: var(--brand-primary);
font-weight: var(--fw-medium);
}
/* ── Responsive ── */
@media (max-width: 768px) {
.qbs-global {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
.qbs-global__stats {
padding: var(--space-xl) var(--space-lg);
}
.qbs-global__stat-number {
font-size: 2.25rem;
}
}
/* ==========================================================================
QBS PAGE HERO — Banner đầu trang cho tất cả Pages
========================================================================== */
.qbs-page-hero {
position: relative;
width: 100%;
min-height: 220px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--bg-dark);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
/* Dark overlay */
.qbs-page-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg,
rgba(30, 30, 30, 0.85) 0%,
rgba(50, 40, 25, 0.75) 100%);
z-index: 1;
}
/* Content */
.qbs-page-hero__content {
position: relative;
z-index: 2;
text-align: center;
padding: var(--space-2xl) var(--space-lg);
}
.qbs-page-hero__title {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: var(--fw-bold);
color: var(--text-on-dark);
letter-spacing: 0.02em;
margin: 0 0 var(--space-sm);
line-height: var(--lh-tight);
}
/* Breadcrumb override inside hero */
.qbs-page-hero__breadcrumb {
font-family: var(--font-label);
font-size: var(--fs-caption);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.qbs-page-hero__breadcrumb .breadcrumbs,
.qbs-page-hero__breadcrumb a,
.qbs-page-hero__breadcrumb span {
color: rgba(255, 255, 255, 0.5) !important;
text-decoration: none !important;
}
.qbs-page-hero__breadcrumb a:hover {
color: var(--text-on-dark) !important;
}
.qbs-page-hero__breadcrumb .divider {
color: rgba(255, 255, 255, 0.3) !important;
margin: 0 var(--space-2xs);
}
/* Responsive */
@media (max-width: 768px) {
.qbs-page-hero {
min-height: 160px;
}
.qbs-page-hero__content {
padding: var(--space-xl) var(--space-md);
}
}
/* ==========================================================================
QBS CONTACT CARDS — 4 icon cards cho trang Liên Hệ
========================================================================== */
.qbs-contact-cards {
padding: var(--space-2xl) 0;
}
.qbs-contact-cards__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-md);
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-lg);
}
/* Card */
.qbs-contact-card {
background: var(--bg-primary);
border-radius: var(--radius-lg);
padding: var(--space-xl) var(--space-lg);
text-align: center;
transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.qbs-contact-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
/* Icon */
.qbs-contact-card__icon {
width: 60px;
height: 60px;
margin: 0 auto var(--space-md);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: rgba(255, 222, 166, 0.25);
}
/* SVG icon colors */
.qbs-contact-card__icon svg rect {
fill: #FFDEA6 !important;
fill-opacity: 0.3 !important;
}
.qbs-contact-card__icon svg path {
fill: var(--brand-primary) !important;
}
.qbs-contact-card__icon svg circle {
fill: var(--brand-primary) !important;
}
/* Title — defined in custom.css (Flatsome override) */
/* Text */
.qbs-contact-card__text {
font-family: var(--font-body);
font-size: var(--fs-small);
color: var(--text-secondary);
line-height: var(--lh-relaxed);
margin: 0;
}
/* Responsive */
@media (max-width: 768px) {
.qbs-contact-cards__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 520px) {
.qbs-contact-cards__grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
QBS NEWS — Homepage Tin tức (Featured + Sidebar)
Shortcode: [qbs_news]
Layout: Bài featured lớn bên trái + 3 bài nhỏ xếp dọc bên phải
========================================================================== */
.qbs-news {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-xl);
align-items: start;
}
/* ── Featured Post (left) ── */
.qbs-news__featured {
display: flex;
flex-direction: column;
background: var(--bg-secondary);
overflow: hidden;
}
/* Image wrapper */
.qbs-news__featured-img-link {
display: block;
position: relative;
overflow: hidden;
text-decoration: none;
}
.qbs-news__featured-img {
width: 100%;
height: 0;
padding-bottom: 62%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: transform var(--transition-slow);
}
.qbs-news__featured-img-link:hover .qbs-news__featured-img {
transform: scale(1.04);
}
/* Category badge inside image */
.qbs-news__category {
position: absolute;
top: var(--space-md);
left: var(--space-md);
display: inline-block;
font-family: var(--font-label);
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-primary);
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: 0.35em 0.9em;
z-index: 2;
}
/* Text body below image */
.qbs-news__featured-body {
padding: var(--space-lg) var(--space-xl) var(--space-xl);
}
.qbs-news__featured-title {
font-family: var(--font-heading);
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
color: var(--text-primary);
line-height: var(--lh-tight);
margin: 0 0 var(--space-md);
}
.qbs-news__featured-title a {
color: inherit;
text-decoration: none;
transition: color var(--transition-fast);
}
.qbs-news__featured-title a:hover {
color: var(--brand-primary);
}
.qbs-news__featured-excerpt {
font-family: var(--font-body);
font-size: var(--fs-body);
color: var(--text-secondary);
line-height: var(--lh-relaxed);
margin: 0 0 var(--space-lg);
}
/* Meta row: date + read more */
.qbs-news__featured-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
}
/* Read more link */
.qbs-news__readmore {
font-family: var(--font-label);
font-size: var(--fs-small);
font-weight: var(--fw-medium);
color: var(--text-primary);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.06em;
transition: color var(--transition-fast);
}
.qbs-news__readmore:hover {
color: var(--brand-primary);
}
/* Date (shared between featured & sidebar) */
.qbs-news__date {
font-family: var(--font-label);
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
color: var(--brand-primary);
letter-spacing: 0.04em;
}
/* ── Sidebar Posts (right) ── */
.qbs-news__sidebar {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
/* Each side item */
.qbs-news__side-item {
display: grid;
grid-template-columns: 120px 1fr;
gap: var(--space-md);
align-items: center;
text-decoration: none;
padding-bottom: var(--space-lg);
border-bottom: 1px solid var(--border-color-light);
transition: transform var(--transition-fast);
}
.qbs-news__side-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.qbs-news__side-item:hover {
transform: translateX(4px);
}
/* Sidebar thumbnail */
.qbs-news__side-img {
width: 120px;
height: 100px;
overflow: hidden;
background: var(--bg-tertiary);
flex-shrink: 0;
}
.qbs-news__side-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--transition-slow);
}
.qbs-news__side-item:hover .qbs-news__side-img img {
transform: scale(1.06);
}
/* Sidebar text */
.qbs-news__side-body {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.qbs-news__side-title {
font-family: var(--font-heading);
font-size: var(--fs-h5);
font-weight: var(--fw-bold);
color: var(--text-primary);
line-height: var(--lh-snug);
margin: 0;
transition: color var(--transition-fast);
/* Clamp to 2 lines */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.qbs-news__side-item:hover .qbs-news__side-title {
color: var(--brand-primary);
}
/* ── Responsive ── */
/* Tablet */
@media (max-width: 768px) {
.qbs-news {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
.qbs-news__sidebar {
flex-direction: row;
flex-wrap: wrap;
gap: var(--space-md);
}
.qbs-news__side-item {
flex: 1 1 calc(50% - var(--space-md));
min-width: 260px;
border-bottom: none;
padding-bottom: 0;
background: var(--bg-secondary);
padding: var(--space-sm);
}
}
/* Mobile */
@media (max-width: 520px) {
.qbs-news__featured-body {
padding: var(--space-md);
}
.qbs-news__featured-title {
font-size: var(--fs-h4);
}
.qbs-news__featured-meta {
flex-direction: column;
align-items: flex-start;
gap: var(--space-xs);
}
.qbs-news__sidebar {
flex-direction: column;
}
.qbs-news__side-item {
flex: none;
grid-template-columns: 90px 1fr;
min-width: auto;
}
.qbs-news__side-img {
width: 90px;
height: 75px;
}
.qbs-news__side-title {
font-size: var(--fs-body);
}
}
/* ==========================================================================
QBS STONE SWATCH — Thẻ vuông mẫu đá
Shortcode: [qbs_swatch]
Dạng catalog vật liệu chuyên nghiệp. KHÔNG ảnh hưởng WC card mặc định.
========================================================================== */
.qbs-swatch {
display: grid;
gap: var(--space-md);
}
.qbs-swatch--2col {
grid-template-columns: repeat(2, 1fr);
}
.qbs-swatch--3col {
grid-template-columns: repeat(3, 1fr);
}
.qbs-swatch--4col {
grid-template-columns: repeat(4, 1fr);
}
.qbs-swatch--5col {
grid-template-columns: repeat(5, 1fr);
}
.qbs-swatch--6col {
grid-template-columns: repeat(6, 1fr);
}
/* Each swatch item */
.qbs-swatch__item {
display: block;
text-decoration: none;
color: inherit;
transition: transform var(--transition-base);
}
.qbs-swatch__item:hover {
transform: translateY(-4px);
}
/* Square image container */
.qbs-swatch__img-wrap {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #fff;
border: 1px solid var(--border-color-light);
}
.qbs-swatch__img-wrap img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
transition: transform var(--transition-slow);
}
.qbs-swatch__item:hover .qbs-swatch__img-wrap img {
transform: scale(1.08);
}
/* Hover overlay */
.qbs-swatch__overlay {
position: absolute;
inset: 0;
background: rgba(26, 26, 26, 0.5);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity var(--transition-base);
}
.qbs-swatch__item:hover .qbs-swatch__overlay {
opacity: 1;
}
.qbs-swatch__view {
font-family: var(--font-label);
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
color: var(--text-on-dark);
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 0.5em 1.2em;
border: 1px solid rgba(255, 255, 255, 0.6);
transition: all var(--transition-fast);
}
.qbs-swatch__item:hover .qbs-swatch__view {
border-color: var(--text-on-dark);
}
/* Info below image */
.qbs-swatch__info {
padding: var(--space-sm) var(--space-2xs) var(--space-xs);
}
/* Category label */
.qbs-swatch__cat {
display: block;
font-family: var(--font-label);
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
color: var(--brand-primary);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--space-2xs);
}
/* Product name */
.qbs-swatch__name {
font-family: var(--font-heading);
font-size: var(--fs-body);
font-weight: var(--fw-bold);
color: var(--text-primary);
line-height: var(--lh-snug);
margin: 0;
/* Clamp 2 lines */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ── Responsive ── */
@media (max-width: 768px) {
.qbs-swatch--4col,
.qbs-swatch--5col,
.qbs-swatch--6col {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 520px) {
.qbs-swatch,
.qbs-swatch--2col,
.qbs-swatch--3col,
.qbs-swatch--4col,
.qbs-swatch--5col,
.qbs-swatch--6col {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-sm);
}
.qbs-swatch__name {
font-size: var(--fs-small);
}
.qbs-swatch__info {
padding: var(--space-xs) 0;
}
}
/* ==========================================================================
QBS 404 PAGE — Tile grid concept
Viên gạch giữa bị "thiếu" = trang không tìm thấy
========================================================================== */
.qbs-404 {
position: relative;
min-height: 85vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--bg-dark);
}
/* Subtle ambient glow */
.qbs-404__bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 50% 40%, rgba(184, 134, 11, 0.07) 0%, transparent 60%);
z-index: 1;
}
/* Content */
.qbs-404__content {
position: relative;
z-index: 2;
text-align: center;
padding: var(--space-2xl) var(--space-lg);
max-width: 520px;
}
/* ── Tile Grid 3×3 ── */
.qbs-404__tile-grid {
display: grid;
grid-template-columns: repeat(3, 80px);
grid-template-rows: repeat(3, 80px);
gap: 6px;
justify-content: center;
margin-bottom: var(--space-xl);
}
/* Normal tile */
.qbs-404__tile {
border: 1px solid rgba(184, 134, 11, 0.3);
border-radius: 3px;
background: rgba(184, 134, 11, 0.04);
transition: border-color var(--transition-base);
}
.qbs-404__tile:hover {
border-color: rgba(184, 134, 11, 0.5);
background: rgba(184, 134, 11, 0.08);
}
/* Missing tile — center (5th child) */
.qbs-404__tile--missing {
border: 2px dashed rgba(184, 134, 11, 0.25);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
animation: qbs404-pulse 3s ease-in-out infinite;
}
.qbs-404__tile--missing:hover {
background: transparent;
}
.qbs-404__tile-code {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: var(--fw-bold);
color: var(--brand-primary);
opacity: 0.6;
letter-spacing: 0.05em;
}
@keyframes qbs404-pulse {
0%,
100% {
border-color: rgba(184, 134, 11, 0.2);
}
50% {
border-color: rgba(184, 134, 11, 0.45);
}
}
/* Title */
.qbs-404__title {
font-family: var(--font-heading);
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
color: var(--text-on-dark);
margin: 0 0 var(--space-sm);
line-height: var(--lh-tight);
}
/* Description */
.qbs-404__desc {
font-family: var(--font-body);
font-size: var(--fs-body);
color: rgba(255, 255, 255, 0.45);
line-height: var(--lh-relaxed);
margin: 0 0 var(--space-xl);
}
/* Action buttons */
.qbs-404__actions {
display: flex;
gap: var(--space-sm);
justify-content: center;
flex-wrap: wrap;
}
.qbs-404__actions .btn--primary {
background: var(--brand-primary);
color: var(--text-on-primary);
border-color: var(--brand-primary);
}
.qbs-404__actions .btn--primary:hover {
background: var(--brand-primary-dark);
border-color: var(--brand-primary-dark);
}
.qbs-404__actions .btn--secondary {
background: transparent;
color: rgba(255, 255, 255, 0.6);
border-color: rgba(255, 255, 255, 0.2);
}
.qbs-404__actions .btn--secondary:hover {
color: var(--text-on-dark);
border-color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.05);
}
/* Quick navigation links */
.qbs-404__links {
margin-top: var(--space-2xl);
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-sm);
flex-wrap: wrap;
}
.qbs-404__links a {
font-family: var(--font-label);
font-size: var(--fs-small);
color: rgba(255, 255, 255, 0.45);
text-decoration: none;
transition: color var(--transition-fast);
letter-spacing: 0.02em;
}
.qbs-404__links a:hover {
color: var(--brand-primary);
}
.qbs-404__links-divider {
color: rgba(255, 255, 255, 0.15);
font-size: var(--fs-body);
}
/* ── Responsive ── */
@media (max-width: 520px) {
.qbs-404__tile-grid {
grid-template-columns: repeat(3, 64px);
grid-template-rows: repeat(3, 64px);
gap: 4px;
}
.qbs-404__tile-code {
font-size: 1.2rem;
}
.qbs-404__title {
font-size: var(--fs-h4);
}
.qbs-404__actions {
flex-direction: column;
align-items: stretch;
}
}