/* ============================================================================
* pages.css — e-commerce page styles
* Used by archive-product.php, single-product.php, cart, checkout, account, …
* Builds on tokens.css + components.css + sections.css.
* ========================================================================== */
/* ---------------------------------------------------------------------------
* Generic page (page.php) — About, Liên hệ, Chính sách, etc.
* ------------------------------------------------------------------------- */
.page-main { padding-block: var(--space-3) var(--space-7); }
.page-main .page-header { padding-block: 0 var(--space-3); }
.page-main .page-title {
margin: 6px 0 0;
font-size: clamp(28px, 3.4vw, 38px);
letter-spacing: -0.03em;
font-weight: 800;
}
.page-main .page-content { line-height: 1.75; font-size: 16px; color: var(--color-ink); }
.page-main .page-content h2 { font-size: 22px; font-weight: 800; margin: 28px 0 12px; }
.page-main .page-content h3 { font-size: 18px; font-weight: 700; margin: 22px 0 10px; }
.page-main .page-content p { margin: 0 0 14px; }
.page-main .page-content ul,
.page-main .page-content ol { margin: 0 0 16px 22px; padding: 0; }
.page-main .page-content li { margin-bottom: 6px; }
.page-main .page-content img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
/* Auto-underline ONLY for inline anchors inside or
text blocks.
* Previous broad rule was catching card wrappers, buttons, nav links → cosmetic noise
* on my-account / cart / checkout / dashboard. (v1.9.25) */
.page-main .page-content p a,
.page-main .page-content li a { color: var(--color-accent-dark); text-decoration: underline; text-underline-offset: 3px; }
/* ---------------------------------------------------------------------------
* Blog: single post + archive
* v1.9.6 — SEO-optimized 2-col layout với sticky sidebar + auto TOC.
* ------------------------------------------------------------------------- */
.post-main, .archive-main { padding-block: var(--space-3) var(--space-7); }
.post-container { max-width: 880px; }
/* v1.9.6 — single post 2-col grid (main + sticky sidebar) */
.post-single-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: var(--space-5);
max-width: 1200px;
align-items: start;
}
.post-single-layout > .post-article { min-width: 0; }
.post-single-layout > .post-comments,
.post-single-layout > .related-posts { grid-column: 1 / -1; }
@media (max-width: 980px) {
.post-single-layout { grid-template-columns: 1fr; }
.post-sidebar { display: none; }
}
/* === Article header === */
.post-article .breadcrumb { margin-bottom: var(--space-3); font-size: 13px; }
.post-article .breadcrumb a { color: var(--color-muted); }
.post-article .breadcrumb a:hover { color: var(--color-accent-dark); }
.post-article .breadcrumb span[aria-current] { color: var(--color-ink); font-weight: 500; }
.post-header { margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-line); }
.post-header__cat {
display: inline-block;
background: var(--color-accent-soft);
color: var(--color-accent-dark);
padding: 4px 14px;
border-radius: var(--radius-pill);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
text-decoration: none;
margin-bottom: 14px;
}
.post-title {
margin: 0 0 14px;
font-size: clamp(28px, 3.6vw, 40px);
letter-spacing: -0.03em;
font-weight: 800;
line-height: 1.2;
color: var(--color-ink);
}
.post-lede {
font-size: 17px;
line-height: 1.6;
color: var(--color-muted);
margin: 0 0 16px;
}
.post-meta {
display: flex; flex-wrap: wrap; gap: 18px;
font-size: 13px;
color: var(--color-muted);
margin: 0;
}
.post-meta__author,
.post-meta__date,
.post-meta__reading {
display: inline-flex;
align-items: center;
gap: 6px;
}
.post-meta__author::before,
.post-meta__date::before,
.post-meta__reading::before { content: ''; }
.post-meta strong { color: var(--color-ink); font-weight: 600; }
/* === Hero image === */
.post-hero { margin: 0 0 var(--space-4); }
.post-hero img {
width: 100%;
height: auto;
border-radius: var(--radius-md);
display: block;
aspect-ratio: 16 / 9;
object-fit: cover;
}
/* === Content typography === */
.post-content {
font-size: 17px;
line-height: 1.8;
color: var(--color-ink);
text-align: justify;
text-justify: inter-word;
hyphens: auto;
word-spacing: 0.02em;
}
.post-content h2 {
font-size: 26px;
font-weight: 800;
margin: 40px 0 14px;
letter-spacing: -0.02em;
line-height: 1.3;
scroll-margin-top: 100px;
text-align: left; /* heading luôn căn trái, không justify */
}
.post-content h3 {
font-size: 20px;
font-weight: 700;
margin: 28px 0 12px;
letter-spacing: -0.01em;
scroll-margin-top: 100px;
text-align: left;
}
.post-content p { margin: 0 0 18px; }
.post-content li { text-align: left; } /* list items căn trái cho dễ đọc */
.post-content ul,
.post-content ol { margin: 0 0 20px 24px; }
.post-content li { margin-bottom: 8px; line-height: 1.7; }
.post-content blockquote {
border-left: 4px solid var(--color-accent-action);
background: var(--color-bg-soft);
margin: 24px 0;
padding: var(--space-3) var(--space-4);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
font-style: italic;
}
.post-content img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 16px 0; }
.post-content a { color: var(--color-accent-dark); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.post-content a:hover { color: var(--color-accent); }
.post-content table {
width: 100%;
border-collapse: collapse;
margin: 18px 0 22px;
font-size: 15px;
}
.post-content table th,
.post-content table td {
padding: 10px 12px;
border: 1px solid var(--color-line);
text-align: left;
vertical-align: top;
}
.post-content table th {
background: var(--color-bg-soft);
font-weight: 700;
}
.post-content table tr:nth-child(even) td { background: rgba(0,0,0,0.02); }
.post-content code {
background: var(--color-bg-soft);
padding: 2px 6px;
border-radius: 4px;
font-size: 0.92em;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.post-content > p:first-of-type::first-letter {
font-size: 1em;
font-weight: inherit;
float: none;
/* No drop cap by default — uncomment to enable */
}
/* === TOC === */
.post-toc {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-3);
}
.post-toc__heading,
.post-sidebar__heading {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-ink);
}
.post-toc__list {
list-style: none;
margin: 0;
padding: 0;
font-size: 14px;
}
.post-toc__item { margin-bottom: 4px; }
.post-toc__item--h3 { padding-left: 16px; }
.post-toc__list a {
display: block;
padding: 6px 10px;
color: var(--color-muted);
text-decoration: none;
border-left: 2px solid transparent;
border-radius: 0 6px 6px 0;
line-height: 1.4;
transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.post-toc__list a:hover {
color: var(--color-accent-dark);
background: var(--color-bg-soft);
}
.post-toc__list a.is-active {
color: var(--color-accent-action);
border-left-color: var(--color-accent-action);
background: var(--color-accent-soft);
font-weight: 600;
}
/* Mobile TOC (details/summary) */
.post-toc--mobile { display: none; margin: 0 0 var(--space-4); padding: 0; border: 1px solid var(--color-line); }
.post-toc--mobile summary {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 14px var(--space-3);
font-weight: 700;
font-size: 14px;
list-style: none;
border-bottom: 0;
background: #fff;
}
.post-toc--mobile[open] summary { border-bottom: 1px solid var(--color-line); }
.post-toc--mobile summary::-webkit-details-marker { display: none; }
.post-toc--mobile summary::after {
content: '▾';
margin-left: auto;
color: var(--color-muted);
transition: transform var(--transition-fast);
}
.post-toc--mobile[open] summary::after { transform: rotate(180deg); }
.post-toc--mobile nav { padding: 10px var(--space-3) 14px; }
.post-toc--mobile .post-toc__list { font-size: 14px; }
@media (max-width: 980px) {
.post-toc--desktop { display: none; }
.post-toc--mobile { display: block; }
}
/* === Tags === */
.post-tags {
margin: var(--space-5) 0 0;
display: flex; flex-wrap: wrap; gap: 8px;
font-size: 13px;
color: var(--color-muted);
align-items: center;
}
.post-tags__label { font-weight: 600; color: var(--color-ink); }
.post-tags a {
background: var(--color-bg-soft);
padding: 5px 12px;
border-radius: var(--radius-pill);
color: var(--color-ink);
font-weight: 500;
text-decoration: none;
font-size: 13px;
}
.post-tags a:hover { background: var(--color-accent-soft); color: var(--color-accent-dark); }
/* === Author box === */
.post-author-box {
display: grid;
grid-template-columns: 80px 1fr;
gap: var(--space-3);
align-items: center;
background: var(--color-bg-soft);
border-radius: var(--radius-md);
padding: var(--space-4);
margin: var(--space-5) 0 var(--space-4);
}
.post-author-box__avatar img,
.post-author-box__img {
width: 80px; height: 80px;
border-radius: 50%;
object-fit: cover;
}
.post-author-box__name { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.post-author-box__bio { margin: 0; color: var(--color-muted); font-size: 14px; line-height: 1.55; }
/* === CTA card after content === */
.post-cta-card {
background: linear-gradient(135deg, var(--color-accent-action) 0%, var(--color-promo-bg) 100%);
color: #fff;
border-radius: var(--radius-md);
padding: var(--space-5);
margin: var(--space-5) 0;
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-4);
align-items: center;
}
.post-cta-card h3 { margin: 0 0 8px; font-size: 22px; font-weight: 800; color: #fff; }
.post-cta-card p { margin: 0; opacity: 0.9; font-size: 15px; }
.post-cta-card__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.post-cta-card .btn { white-space: nowrap; }
.post-cta-card .btn--primary { background: #fff; color: var(--color-accent-dark) !important; border-color: #fff; }
.post-cta-card .btn--primary:hover { background: var(--color-bg-soft); color: var(--color-accent-dark) !important; }
.post-cta-card .btn--ghost { background: transparent; color: #fff !important; border: 1px solid rgba(255,255,255,0.55); }
.post-cta-card .btn--ghost:hover { background: rgba(255,255,255,0.12); color: #fff !important; }
.post-cta-card .btn svg { vertical-align: middle; margin-right: 6px; }
@media (max-width: 700px) {
.post-cta-card { grid-template-columns: 1fr; text-align: center; }
.post-cta-card__actions { justify-content: center; }
}
/* === Footer (share + prev/next) === */
.post-footer {
border-top: 1px solid var(--color-line);
margin-top: var(--space-5);
padding-top: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.post-share {
display: flex; gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.post-share__label { font-weight: 600; font-size: 14px; margin-right: 6px; }
.share-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: var(--radius-pill);
background: var(--color-bg-soft);
color: var(--color-ink);
font-size: 13px;
font-weight: 600;
border: 0;
cursor: pointer;
text-decoration: none;
transition: background var(--transition-fast), color var(--transition-fast);
}
.share-btn:hover { background: var(--color-accent-soft); color: var(--color-accent-dark); }
.share-btn--fb:hover { background: #1877f2; color: #fff; }
.share-btn--zalo:hover { background: #0068ff; color: #fff; }
.post-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
}
.post-nav__item {
display: block;
padding: var(--space-3);
background: var(--color-bg-soft);
border-radius: var(--radius-md);
text-decoration: none;
color: inherit;
transition: background var(--transition-fast);
}
.post-nav__item:hover { background: var(--color-accent-soft); }
.post-nav__item--next { text-align: right; }
.post-nav__label { display: block; font-size: 12px; color: var(--color-muted); font-weight: 600; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
.post-nav__title { font-size: 14px; font-weight: 600; color: var(--color-ink); line-height: 1.4; }
@media (max-width: 600px) {
.post-nav { grid-template-columns: 1fr; }
}
/* === Sticky sidebar === */
.post-sidebar { position: relative; }
.post-sidebar__inner {
position: sticky;
top: 90px;
display: flex;
flex-direction: column;
gap: var(--space-3);
max-height: calc(100vh - 110px);
overflow-y: auto;
padding-right: 4px;
}
.post-sidebar__inner::-webkit-scrollbar { width: 5px; }
.post-sidebar__inner::-webkit-scrollbar-thumb { background: var(--color-line); border-radius: 3px; }
.post-sidebar__share {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-3);
}
.post-sidebar__share-row { display: flex; gap: 8px; }
.share-pill {
width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--color-bg-soft);
color: var(--color-ink);
border: 0;
cursor: pointer;
text-decoration: none;
transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.share-pill:hover { transform: scale(1.08); }
.share-pill--fb:hover { background: #1877f2; color: #fff; }
.share-pill--zalo:hover { background: #0068ff; color: #fff; }
.share-pill--copy:hover { background: var(--color-accent-action); color: #fff; }
.post-sidebar__hotline {
background: linear-gradient(135deg, var(--color-accent-action) 0%, var(--color-promo-bg) 100%);
color: #fff;
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
text-align: center;
}
.post-sidebar__hotline-label {
display: block;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.9;
margin-bottom: 4px;
}
.post-sidebar__hotline-link {
display: block;
font-size: 24px;
font-weight: 800;
color: #fff;
text-decoration: none;
margin-bottom: 4px;
}
.post-sidebar__hotline-link:hover { color: var(--color-flash-fill); }
.post-sidebar__hotline small { display: block; font-size: 11px; opacity: 0.75; }
.post-header { margin-bottom: var(--space-4); }
.post-meta {
display: flex; flex-wrap: wrap; gap: 14px;
margin-top: 6px; margin-bottom: 14px;
color: var(--color-muted);
font-size: 13px;
}
.post-meta__cat {
background: var(--color-accent-soft);
color: var(--color-accent-dark);
padding: 4px 12px;
border-radius: var(--radius-pill);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.post-meta__date::before, .post-meta__author::before { content: '·'; margin-right: 12px; color: var(--color-line); }
.post-title {
margin: 0;
font-size: clamp(28px, 3.8vw, 42px);
letter-spacing: -0.03em;
font-weight: 800;
line-height: 1.2;
}
.post-excerpt { color: var(--color-muted); font-size: 18px; line-height: 1.55; margin-top: 12px; }
.post-thumbnail { margin: 0 0 var(--space-4); }
.post-thumbnail img { width: 100%; height: auto; border-radius: var(--radius-md); display: block; }
.post-content { font-size: 17px; line-height: 1.75; color: var(--color-ink); }
.post-content h2 { font-size: 26px; font-weight: 800; margin: 32px 0 12px; letter-spacing: -0.02em; }
.post-content h3 { font-size: 20px; font-weight: 700; margin: 24px 0 10px; }
.post-content p { margin: 0 0 16px; }
.post-content ul, .post-content ol { margin: 0 0 18px 24px; }
.post-content li { margin-bottom: 6px; }
.post-content blockquote {
border-left: 4px solid var(--color-accent-action);
background: var(--color-bg-soft);
margin: 20px 0;
padding: var(--space-3) var(--space-4);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
font-style: italic;
}
.post-content img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 12px 0; }
.post-content a { color: var(--color-accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.post-tags {
margin: var(--space-4) 0 0;
display: flex; flex-wrap: wrap; gap: 8px;
font-size: 13px;
color: var(--color-muted);
align-items: center;
}
.post-tags__label { font-weight: 700; }
.post-tags a {
background: var(--color-bg-soft);
padding: 4px 10px;
border-radius: var(--radius-pill);
color: var(--color-ink);
font-weight: 500;
}
.post-tags a:hover { background: var(--color-accent-soft); color: var(--color-accent-dark); }
.post-footer {
border-top: 1px solid var(--color-line);
margin-top: var(--space-4);
padding-top: var(--space-3);
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
align-items: center;
font-size: 13px;
}
.post-share { display: flex; gap: 8px; align-items: center; }
.post-share a {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-pill);
background: var(--color-bg-soft);
color: var(--color-ink);
}
.post-share .share-fb:hover { background: #1877f2; color: #fff; }
.post-share .share-zalo:hover { background: #0068ff; color: #fff; }
.post-nav { display: flex; gap: 14px; max-width: 60%; }
.post-nav a { color: var(--color-muted); }
.post-nav a:hover { color: var(--color-accent-dark); }
.post-nav .prev, .post-nav .next { display: block; }
.post-comments { margin-top: var(--space-6); }
/* Related posts */
.related-posts { margin-top: var(--space-7); }
.related-posts .section-title { font-size: 24px; font-weight: 800; margin: 0 0 var(--space-3); }
.post-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-3);
}
.post-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .post-grid, .post-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .post-grid, .post-grid--3 { grid-template-columns: 1fr; } }
.post-card {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
overflow: hidden;
transition: transform var(--transition-fast), box-shadow var(--transition-base);
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.post-card a { color: inherit; text-decoration: none; display: block; }
.post-card__media {
aspect-ratio: 16 / 9; /* v1.9.6 — upload ảnh 16:9 (1280×720+) chuẩn */
overflow: hidden;
background: #fff;
}
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-base); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__info { padding: var(--space-3); }
.post-card__date {
font-size: 12px;
font-weight: 700;
color: var(--color-accent-dark);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.post-card__title {
margin: 6px 0;
font-size: 17px;
font-weight: 700;
line-height: 1.35;
letter-spacing: -0.01em;
color: var(--color-ink);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.post-card__excerpt {
margin: 6px 0 0;
font-size: 14px;
color: var(--color-muted);
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Archive page */
.archive-header { padding-block: var(--space-3) var(--space-3); }
.archive-title {
margin: 6px 0 0;
font-size: clamp(28px, 3.6vw, 40px);
letter-spacing: -0.03em;
font-weight: 800;
}
.archive-desc { color: var(--color-muted); max-width: 720px; line-height: 1.55; margin-top: 8px; }
.archive-pagination {
display: flex; justify-content: center;
margin-top: var(--space-5);
}
.archive-pagination .nav-links {
display: flex; gap: 6px; flex-wrap: wrap;
}
.archive-pagination .page-numbers {
display: inline-flex; align-items: center; justify-content: center;
min-width: 36px; height: 36px;
padding: 0 12px;
border: 1px solid var(--color-line);
border-radius: var(--radius-pill);
background: #fff;
color: var(--color-ink);
font-weight: 600;
font-size: 14px;
}
.archive-pagination .page-numbers.current,
.archive-pagination .page-numbers:hover {
background: var(--color-accent-action);
color: #fff;
border-color: var(--color-accent-action);
}
.archive-empty {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-7) var(--space-4);
text-align: center;
}
/* ---------------------------------------------------------------------------
* Search
* ------------------------------------------------------------------------- */
.search-main { padding-block: var(--space-3) var(--space-7); }
.search-header { padding-block: 0 var(--space-3); }
.search-title { margin: 6px 0; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.02em; font-weight: 800; }
.search-title strong { color: var(--color-accent-dark); }
.search-meta { color: var(--color-muted); margin: 0 0 var(--space-3); }
.search-redo { max-width: 540px; }
.search-section { margin-bottom: var(--space-6); }
.search-section .section-title { font-size: 22px; font-weight: 800; margin: 0 0 var(--space-3); }
.search-section .section-title .muted { color: var(--color-muted); font-weight: 500; }
.search-empty {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-7) var(--space-4);
text-align: center;
color: var(--color-muted);
}
.search-empty svg { color: var(--color-muted); margin: 0 auto var(--space-3); display: block; }
.search-empty h2 { color: var(--color-ink); font-size: 20px; font-weight: 800; margin: 0 0 8px; }
.search-empty p { margin: 0 0 var(--space-3); }
/* ---------------------------------------------------------------------------
* Search form base
* ------------------------------------------------------------------------- */
.search-form {
display: flex; align-items: center; gap: 0;
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-pill);
padding: 4px;
position: relative;
}
.search-form input[type="search"] {
flex: 1;
border: 0;
background: transparent;
padding: 10px 16px;
font-size: 14px;
font-family: inherit;
outline: 0;
}
.search-form__submit {
width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--color-accent-action);
color: #fff;
border: 0;
border-radius: var(--radius-pill);
cursor: pointer;
}
.search-form__submit:hover { background: var(--color-ink); }
/* ---------------------------------------------------------------------------
* Header search panel (expanded)
* ------------------------------------------------------------------------- */
.header-search-backdrop {
position: fixed; inset: 0;
background: rgba(0,0,0,0.35);
z-index: 1098;
opacity: 0; visibility: hidden;
transition: opacity var(--transition-base);
}
.header-search-backdrop.is-open { opacity: 1; visibility: visible; }
.header-search-panel {
position: fixed; top: 0; left: 0; right: 0;
background: #fff;
box-shadow: 0 16px 56px rgba(0,0,0,0.08);
z-index: 1099;
transform: translateY(-100%);
transition: transform var(--transition-base);
padding: var(--space-4) 0;
}
.header-search-panel.is-open { transform: translateY(0); }
.header-search-panel .container {
display: flex; align-items: center; gap: var(--space-3);
}
.header-search-panel .search-form { flex: 1; max-width: 720px; margin: 0 auto; }
.header-search-panel .close-btn {
background: transparent; border: 0; cursor: pointer;
color: var(--color-ink);
font-size: 24px;
width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
}
/* ---------------------------------------------------------------------------
* 404
* ------------------------------------------------------------------------- */
.error-404-main { padding-block: var(--space-7); text-align: center; }
.error-404 { max-width: 600px; margin: 0 auto var(--space-7); }
.error-404__visual {
font-size: clamp(120px, 18vw, 200px);
font-weight: 800;
letter-spacing: -0.06em;
line-height: 0.9;
color: var(--color-accent-soft);
margin-bottom: 12px;
}
.error-404__title { font-size: clamp(24px, 3vw, 32px); margin: 0 0 12px; font-weight: 800; letter-spacing: -0.02em; }
.error-404__desc { color: var(--color-muted); line-height: 1.6; margin: 0 0 var(--space-4); }
.error-404__actions { display: flex; gap: 12px; justify-content: center; margin-bottom: var(--space-4); flex-wrap: wrap; }
.error-404__search { max-width: 480px; margin: 0 auto; }
.error-404__products { margin-top: var(--space-7); }
.error-404__products .section-title { text-align: left; font-size: 22px; font-weight: 800; margin: 0 0 var(--space-3); }
/* ---------------------------------------------------------------------------
* Mobile menu drawer
* ------------------------------------------------------------------------- */
.mobile-menu-backdrop {
position: fixed; inset: 0;
background: rgba(0,0,0,0.35);
z-index: 1097;
opacity: 0; visibility: hidden;
transition: opacity var(--transition-base);
}
.mobile-menu-backdrop.is-open { opacity: 1; visibility: visible; }
.mobile-menu-drawer {
position: fixed;
top: 0; left: 0; bottom: 0;
width: 320px; max-width: 88vw;
background: #fff;
z-index: 1098;
transform: translateX(-100%);
transition: transform var(--transition-base);
display: flex; flex-direction: column;
box-shadow: 16px 0 56px rgba(0,0,0,0.08);
}
.mobile-menu-drawer.is-open { transform: translateX(0); }
.mobile-menu-drawer__header {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-line);
display: flex; justify-content: space-between; align-items: center;
}
.mobile-menu-drawer__title { margin: 0; font-size: 16px; font-weight: 800; }
.mobile-menu-drawer__close {
background: transparent; border: 0; cursor: pointer;
color: var(--color-ink); font-size: 28px; line-height: 1;
width: 36px; height: 36px;
}
.mobile-menu-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-3) 0; }
.mobile-menu-drawer__body ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu-drawer__body li a {
display: block;
padding: 14px var(--space-4);
color: var(--color-ink);
font-weight: 600;
font-size: 15px;
border-bottom: 1px solid var(--color-line);
}
.mobile-menu-drawer__body li a:hover { background: var(--color-bg-soft); color: var(--color-accent-dark); }
.mobile-menu-drawer__footer {
padding: var(--space-3) var(--space-4);
border-top: 1px solid var(--color-line);
display: flex; gap: 12px;
flex-direction: column;
}
.mobile-menu-drawer__footer .btn { width: 100%; justify-content: center; text-transform: none; letter-spacing: 0; }
.mobile-menu-drawer__contact {
padding: var(--space-3) var(--space-4) 0;
font-size: 13px;
color: var(--color-muted);
}
.mobile-menu-drawer__contact a { color: var(--color-accent-dark); font-weight: 600; }
/* ---------------------------------------------------------------------------
* Shared product grid (4 col on desktop, responsive)
* ------------------------------------------------------------------------- */
.product-grid {
display: grid;
gap: var(--space-3);
}
.product-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .product-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) { .product-grid--4, .product-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* v1.9.27 — Mobile phone giữ 2 cột (was 1 col stack) cho mọi archive / category page.
* 2 cột × 3 hàng = 6 card visible above the fold ở mobile, đúng ecommerce convention. */
@media (max-width: 480px) { .product-grid--4, .product-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } }
/* Card link wrapper – product-card whole-area click */
.product-card { position: relative; }
.product-card__link {
display: flex; flex-direction: column;
color: inherit; text-decoration: none;
}
.product-card__action {
padding: 0 var(--space-3) var(--space-3);
margin-top: auto;
}
.product-card__add-to-cart {
width: 100%;
justify-content: center;
letter-spacing: 0;
text-transform: none;
font-weight: 600;
font-size: 13px;
padding: 10px 16px;
}
/* ---------------------------------------------------------------------------
* Breadcrumb
* ------------------------------------------------------------------------- */
.breadcrumb {
display: flex; flex-wrap: wrap; align-items: center;
gap: 6px;
font-size: 13px;
color: var(--color-muted);
padding-block: 14px;
}
.breadcrumb a { color: var(--color-muted); }
.breadcrumb a:hover { color: var(--color-accent-dark); }
.breadcrumb [aria-current="page"] { color: var(--color-ink); font-weight: 600; }
.breadcrumb--single { padding-block: 16px 0; }
/* ---------------------------------------------------------------------------
* Shop hero strip
* ------------------------------------------------------------------------- */
.shop-archive { padding-bottom: var(--space-8); }
.shop-hero { padding-block: var(--space-4) var(--space-3); }
.shop-hero__title {
margin: 0 0 6px;
font-size: clamp(28px, 3.4vw, 38px);
letter-spacing: -0.03em;
font-weight: 800;
}
.shop-hero__desc { color: var(--color-muted); max-width: 720px; line-height: 1.55; }
.shop-hero__meta { color: var(--color-muted); font-size: 14px; margin-top: 6px; }
/* ---------------------------------------------------------------------------
* Category hero (taxonomy-product_cat.php)
* ------------------------------------------------------------------------- */
.category-hero {
background: var(--cat-bg, linear-gradient(135deg, #1e3a6b 0%, #5470a8 100%));
color: #fff;
padding-block: var(--space-4) var(--space-5);
margin-bottom: var(--space-4);
}
.category-hero .breadcrumb,
.breadcrumb--on-dark { color: rgba(255,255,255,0.7); padding-block: 6px 14px; }
.breadcrumb--on-dark a { color: rgba(255,255,255,0.85); }
.breadcrumb--on-dark a:hover { color: #fff; }
.breadcrumb--on-dark [aria-current="page"] { color: #fff; }
.category-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: var(--space-5);
align-items: center;
}
@media (max-width: 900px) {
.category-hero__grid { grid-template-columns: 1fr; }
.category-hero__visual { display: none; }
}
.category-hero__sub {
display: inline-block;
background: rgba(255,255,255,0.18);
color: #fff;
padding: 4px 12px;
border-radius: var(--radius-pill);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 14px;
}
.category-hero__title {
margin: 0 0 14px;
font-size: clamp(32px, 4vw, 48px);
letter-spacing: -0.03em;
font-weight: 800;
line-height: 1.1;
color: #fff;
}
.category-hero__desc {
font-size: 16px;
line-height: 1.6;
color: rgba(255,255,255,0.88);
max-width: 540px;
margin: 0 0 var(--space-3);
}
.category-hero__stats {
display: flex; flex-wrap: wrap; align-items: center;
gap: 10px;
font-size: 13px;
color: rgba(255,255,255,0.88);
}
.category-hero__stats strong { color: #fff; font-size: 16px; }
.category-hero__sep { color: rgba(255,255,255,0.4); }
.category-hero__visual img {
width: 100%; height: auto;
border-radius: var(--radius-lg);
box-shadow: 0 16px 40px rgba(0,0,0,0.25);
display: block;
}
/* ---------------------------------------------------------------------------
* Shop body: sidebar + content
* ------------------------------------------------------------------------- */
.shop-body { padding-block: var(--space-3); }
.shop-body__grid {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: var(--space-5);
align-items: start;
}
@media (max-width: 900px) {
.shop-body__grid { grid-template-columns: 1fr; }
.shop-sidebar { order: 2; }
}
.shop-sidebar { position: sticky; top: 92px; }
.shop-sidebar__panel {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-3);
}
.shop-sidebar__panel--cta { background: var(--color-accent-soft); border-color: transparent; }
.shop-sidebar__panel--cta p { color: var(--color-accent-dark); font-size: 14px; margin: 8px 0 12px; }
.shop-sidebar__heading {
font-size: 14px;
font-weight: 800;
letter-spacing: -0.01em;
margin: 0 0 var(--space-2);
text-transform: uppercase;
}
.shop-sidebar__list { list-style: none; margin: 0; padding: 0; }
.shop-sidebar__item a {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 0;
color: var(--color-ink);
font-size: 14px;
border-radius: 6px;
}
.shop-sidebar__item:hover a,
.shop-sidebar__item.is-active a { color: var(--color-accent-dark); font-weight: 600; }
.shop-sidebar__count { color: var(--color-muted); font-size: 12px; }
/* ---------------------------------------------------------------------------
* Shop toolbar (sort dropdown)
* ------------------------------------------------------------------------- */
.shop-toolbar {
display: flex; justify-content: flex-end; align-items: center;
padding: 0 0 var(--space-3);
}
.shop-toolbar .woocommerce-ordering select,
.shop-content select.orderby {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-pill);
padding: 8px 36px 8px 16px;
font-size: 14px;
color: var(--color-ink);
cursor: pointer;
font-family: inherit;
}
/* WC pagination */
.shop-pagination, .woocommerce-pagination {
margin-top: var(--space-5);
display: flex; justify-content: center;
}
.woocommerce-pagination ul {
display: flex; gap: 6px;
list-style: none; margin: 0; padding: 0;
}
.woocommerce-pagination .page-numbers {
display: inline-flex; align-items: center; justify-content: center;
min-width: 36px; height: 36px;
padding: 0 12px;
border: 1px solid var(--color-line);
border-radius: var(--radius-pill);
background: #fff;
color: var(--color-ink);
font-weight: 600;
font-size: 14px;
}
.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers:hover {
background: var(--color-accent-action);
color: #fff;
border-color: var(--color-accent-action);
}
.shop-empty {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-7) var(--space-4);
text-align: center;
}
.shop-empty p { color: var(--color-muted); margin: 0 0 var(--space-3); }
/* ---------------------------------------------------------------------------
* Single product page
* ------------------------------------------------------------------------- */
.single-product-page { padding-bottom: var(--space-7); }
.product-detail { padding-block: var(--space-3) var(--space-5); }
.product-detail__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: var(--space-6);
align-items: start;
}
/* min-width:0 cho grid child có flex overflow content (.product-gallery__thumbs
là flex overflow-x:auto) — không có nó min-content của hàng thumb đẩy track
rộng > viewport, làm trang product bị tràn ~26px trên mobile. */
.product-detail__grid > * { min-width: 0; }
@media (max-width: 900px) {
.product-detail__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}
/* Gallery */
.product-gallery {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-3);
position: sticky; top: 92px;
}
.product-gallery__main {
position: relative;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 1 / 1;
background: var(--color-bg-soft);
}
.product-gallery__main img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.product-gallery__thumbs {
display: flex; gap: 10px;
margin-top: var(--space-3);
overflow-x: auto;
min-width: 0;
}
.product-gallery__thumb {
flex: 0 0 80px;
width: 80px; height: 80px;
border: 2px solid transparent;
background: var(--color-bg-soft);
border-radius: 10px;
overflow: hidden;
cursor: pointer;
padding: 0;
transition: border-color var(--transition-fast);
}
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumb.is-active { border-color: var(--color-accent-action); }
.product-detail__badge-discount {
position: absolute;
top: 12px; right: 12px;
background: #ff7a18;
color: #fff;
padding: 6px 12px;
border-radius: 6px;
font-size: 14px;
font-weight: 700;
z-index: 2;
}
/* Info column */
.product-detail__info { padding: 4px 0; }
.product-detail__brand {
display: inline-block;
font-size: 13px;
font-weight: 800;
color: var(--color-accent-dark);
letter-spacing: 0.02em;
margin-bottom: 4px;
}
.product-detail__title {
margin: 0 0 8px;
font-size: clamp(22px, 2.6vw, 30px);
line-height: 1.3;
font-weight: 700;
letter-spacing: -0.02em;
}
.product-detail__slogan {
margin: 0 0 14px;
padding: 10px 14px;
background: var(--color-accent-soft);
border-left: 3px solid var(--color-accent-action);
border-radius: 6px;
font-size: 14px;
font-style: italic;
color: var(--color-accent-dark);
line-height: 1.5;
}
.product-detail__rating-row {
display: flex; flex-wrap: wrap; align-items: center;
gap: 10px;
margin-bottom: var(--space-3);
font-size: 13px;
color: var(--color-muted);
}
.product-detail__sep { color: var(--color-line); }
.product-detail__price-box {
background: #fff0e0; /* light orange tint, was #fde0e2 pink */
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
display: flex; align-items: baseline; flex-wrap: wrap;
gap: 14px;
margin-bottom: var(--space-3);
}
.product-detail__price {
font-size: 30px;
font-weight: 800;
color: #ff7a18; /* orange, was #e8454f red */
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.product-detail__price-old {
font-size: 16px;
color: var(--color-muted);
text-decoration: line-through;
font-variant-numeric: tabular-nums;
}
.product-detail__badge {
background: #ff7a18; /* orange, was #e8454f red */
color: #fff;
padding: 4px 10px;
border-radius: 6px;
font-size: 13px;
font-weight: 700;
}
.product-detail__meta {
list-style: none; margin: 0 0 var(--space-3); padding: 0;
display: grid;
gap: 6px;
font-size: 14px;
}
.product-detail__meta li { display: flex; gap: 6px; }
.product-detail__meta li span { color: var(--color-muted); min-width: 140px; }
.product-detail__meta li strong { color: var(--color-ink); font-weight: 600; }
.product-detail__meta strong.in-stock { color: #21b06a; }
.product-detail__meta strong.out-of-stock { color: #e8454f; }
.product-detail__short-desc {
color: var(--color-ink);
line-height: 1.6;
margin-bottom: var(--space-3);
}
.product-detail__short-desc p { margin: 0 0 8px; }
/* Cart form */
.product-detail__cart-form {
display: flex; flex-wrap: wrap; gap: 12px;
align-items: stretch;
margin-bottom: var(--space-3);
}
.quantity-stepper {
display: inline-flex; align-items: stretch;
border: 1px solid var(--color-line);
border-radius: var(--radius-pill);
overflow: hidden;
background: #fff;
}
.quantity-stepper__btn {
width: 44px;
background: #fff;
border: 0;
font-size: 20px;
font-weight: 700;
color: var(--color-ink);
cursor: pointer;
}
.quantity-stepper__btn:hover { background: var(--color-bg-soft); }
.quantity-stepper__input {
width: 56px;
border: 0;
background: #fff;
text-align: center;
font-size: 16px;
font-weight: 600;
font-variant-numeric: tabular-nums;
-moz-appearance: textfield;
}
.quantity-stepper__input::-webkit-outer-spin-button,
.quantity-stepper__input::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;
}
.single_add_to_cart_button { padding: 14px 32px; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 15px; }
.product-detail__buy-now {
padding: 14px 32px;
font-weight: 700;
text-transform: none;
letter-spacing: 0;
font-size: 15px;
background: linear-gradient(135deg, var(--color-cta-warm), var(--color-cta-warm-dark)) !important;
color: #fff !important;
box-shadow: 0 4px 14px rgba(255, 77, 0, 0.28);
}
.product-detail__buy-now:hover {
background: linear-gradient(135deg, var(--color-cta-warm-dark), var(--color-cta-warm-dark)) !important;
filter: brightness(1.05);
}
/* ===== Variable product — chọn biến thể + add-to-cart (đồng bộ simple) ===== */
.product-detail__info .variations_form { margin-bottom: var(--space-3); }
.product-detail__info table.variations,
.product-detail__info table.variations tbody,
.product-detail__info table.variations tr { display: block; width: 100%; border: 0; margin: 0; }
.product-detail__info table.variations th,
.product-detail__info table.variations td {
display: block; border: 0; padding: 0; background: none; width: auto;
}
.product-detail__info table.variations tr { margin-bottom: var(--space-3); }
.product-detail__info table.variations th.label {
font-weight: 600; color: var(--color-ink); margin-bottom: 8px; font-size: 14px;
}
.product-detail__info .variations td.value {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
/* Dropdown chọn biến thể — pill bo tròn, chevron navy (giống ô input simple) */
.product-detail__info .variations select {
appearance: none; -webkit-appearance: none; -moz-appearance: none;
min-width: 150px;
padding: 12px 40px 12px 16px;
border: 1.5px solid var(--color-line);
border-radius: var(--radius-pill);
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231e3a6b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
font-family: inherit; font-size: 15px; font-weight: 600; color: var(--color-ink);
cursor: pointer; transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.product-detail__info .variations select:focus {
outline: none; border-color: var(--color-accent-action);
box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.product-detail__info .reset_variations {
font-size: 13px; color: var(--color-muted); text-decoration: underline; text-underline-offset: 2px;
}
.product-detail__info .reset_variations:hover { color: #e8454f; }
/* Giá biến thể đang chọn */
.product-detail__info .single_variation { margin-bottom: var(--space-3); }
.product-detail__info .single_variation .price,
.product-detail__info .single_variation .price .amount {
font-size: 24px; font-weight: 800; color: #ff7a18;
}
.product-detail__info .single_variation .stock { font-size: 13px; color: var(--color-muted); }
/* Hàng qty + nút — flex như simple product */
.product-detail__info .woocommerce-variation-add-to-cart {
display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin: 0;
}
.product-detail__info .woocommerce-variation-add-to-cart .quantity { margin: 0; display: inline-flex; }
.product-detail__info .woocommerce-variation-add-to-cart .qty {
width: 80px; text-align: center;
border: 1px solid var(--color-line); border-radius: var(--radius-pill);
padding: 12px; font-family: inherit; font-size: 16px; font-weight: 600;
font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.product-detail__info .woocommerce-variation-add-to-cart .qty::-webkit-outer-spin-button,
.product-detail__info .woocommerce-variation-add-to-cart .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.product-detail__info .woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-disabled { opacity: 0.55; }
.product-detail__oos {
background: var(--color-bg-soft);
border-radius: var(--radius-md);
padding: var(--space-3);
color: var(--color-muted);
}
/* Features */
.product-detail__features {
list-style: none; margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4);
background: var(--color-bg-soft);
border-radius: var(--radius-md);
display: grid;
gap: 12px;
font-size: 14px;
}
.product-detail__features li { display: flex; align-items: center; gap: 12px; }
.product-detail__features svg { width: 22px; height: 22px; color: var(--color-accent-dark); flex: 0 0 auto; }
/* ---------------------------------------------------------------------------
* Product tabs
* ------------------------------------------------------------------------- */
.product-tabs { padding-block: var(--space-4); }
.product-tabs__nav {
display: flex; gap: 8px;
border-bottom: 1px solid var(--color-line);
margin-bottom: var(--space-4);
overflow-x: auto;
}
.product-tabs__tab {
background: transparent;
border: 0;
padding: 14px 22px;
font-size: 15px;
font-weight: 600;
color: var(--color-muted);
cursor: pointer;
position: relative;
border-radius: 0;
font-family: inherit;
white-space: nowrap;
}
.product-tabs__tab:hover { color: var(--color-ink); }
.product-tabs__tab.is-active { color: var(--color-accent-dark); }
.product-tabs__tab.is-active::after {
content: '';
position: absolute; left: 22px; right: 22px; bottom: -1px;
height: 3px;
background: var(--color-accent-action);
border-radius: 3px 3px 0 0;
}
.product-tabs__panel { display: none; line-height: 1.65; color: var(--color-ink); }
.product-tabs__panel.is-active { display: block; }
.product-tabs__panel p { margin: 0 0 12px; }
.product-tabs__panel ol { padding-left: 22px; line-height: 1.8; }
.product-tabs__note { color: var(--color-muted); font-size: 14px; font-style: italic; }
.product-tabs__heading {
font-size: 16px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-ink);
margin: var(--space-3) 0 8px;
}
.product-tabs__heading:first-child { margin-top: 0; }
.product-tabs__lede {
font-size: 15px;
color: var(--color-ink);
line-height: 1.7;
margin-bottom: var(--space-3);
}
.product-tabs__desc { margin-bottom: var(--space-3); }
/* Audience grid in "Mô tả" tab */
.audience-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
margin-top: 12px;
}
.audience-card {
padding: var(--space-3);
background: var(--color-bg);
border-radius: var(--radius-md);
border: 1px solid var(--color-line);
}
.audience-card h4 {
margin: 0 0 8px;
font-size: 14px;
font-weight: 700;
color: var(--color-accent-action);
}
.audience-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-ink); }
@media (max-width: 700px) { .audience-grid { grid-template-columns: 1fr; } }
/* "Cách dùng" usage blocks */
.usage-block {
padding: var(--space-3) 0;
border-bottom: 1px dashed var(--color-line);
}
.usage-block:last-of-type { border-bottom: 0; }
.usage-block p { margin: 0; font-size: 15px; line-height: 1.7; }
/* "Thành phần" tab */
.ingredients-text {
font-size: 15px;
line-height: 1.8;
background: var(--color-bg-soft);
padding: var(--space-3);
border-radius: var(--radius-md);
border-left: 3px solid var(--color-accent);
margin-bottom: var(--space-3);
}
/* Related */
.related-products { padding-block: var(--space-5); }
.related-products .section-head { margin-bottom: var(--space-3); }
.related-products .section-title { font-size: clamp(20px, 2vw, 26px); margin: 0; }
/* ---------------------------------------------------------------------------
* Cart page
* ------------------------------------------------------------------------- */
.is-cart .wc-main, .is-checkout .wc-main { padding-block: var(--space-4) var(--space-7); }
.cart-layout {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: var(--space-5);
align-items: start;
}
@media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } }
.shop_table.cart, .woocommerce-cart-form table {
width: 100%;
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
}
.shop_table.cart thead { background: var(--color-bg-soft); }
.shop_table.cart th { padding: 14px; font-size: 13px; text-align: left; font-weight: 700; }
.shop_table.cart td { padding: 14px; vertical-align: middle; border-top: 1px solid var(--color-line); font-size: 14px; }
.shop_table.cart .product-thumbnail img,
.shop_table.cart .product-thumbnail a img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; display: block; }
.shop_table .product-price, .shop_table .product-subtotal { font-weight: 700; color: #ff7a18; font-variant-numeric: tabular-nums; }
.shop_table .product-remove a { color: var(--color-muted); font-size: 22px; text-decoration: none; }
.shop_table .product-remove a:hover { color: #e8454f; }
/* v1.8.4 — Legacy .cart_totals rules disabled. New template at woocommerce/cart/cart-totals.php
uses class "cart_totals dn-cart-totals" — all styling lives under .dn-cart-totals.* selectors
at the bottom of this file. Keeping these as no-ops to avoid breaking other refs. */
.actions .coupon { display: flex; gap: 8px; margin: var(--space-3) 0; flex-wrap: wrap; }
.actions .coupon .input-text {
flex: 1; min-width: 180px;
padding: 10px 14px;
border: 1px solid var(--color-line);
border-radius: var(--radius-pill);
background: #fff;
}
.actions button[name="apply_coupon"],
.actions button[name="update_cart"] {
padding: 10px 20px;
border-radius: var(--radius-pill);
border: 1px solid var(--color-accent-action);
background: #fff;
color: var(--color-accent-action);
font-weight: 600;
cursor: pointer;
}
.actions button[name="apply_coupon"]:hover,
.actions button[name="update_cart"]:hover { background: var(--color-accent-action); color: #fff; }
/* Empty cart */
.cart-empty.woocommerce-info,
.return-to-shop { text-align: center; padding: var(--space-5); }
.cart-empty.woocommerce-info {
background: var(--color-bg-soft);
border-radius: var(--radius-md);
color: var(--color-muted);
}
.return-to-shop .button {
display: inline-block;
background: var(--color-accent-action); color: #fff;
padding: 12px 24px;
border-radius: var(--radius-pill);
font-weight: 600;
}
/* ---------------------------------------------------------------------------
* Checkout
* ------------------------------------------------------------------------- */
.is-checkout form.checkout {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: var(--space-5);
align-items: start;
}
@media (max-width: 900px) { .is-checkout form.checkout { grid-template-columns: 1fr; } }
.is-checkout .col2-set, .is-checkout #customer_details {
display: contents;
}
.is-checkout #customer_details .col-1,
.is-checkout #customer_details .col-2 {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-4);
}
.is-checkout #order_review_heading,
.is-checkout #order_review {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-4);
grid-column: 2;
position: sticky; top: 92px;
}
@media (max-width: 900px) {
.is-checkout #order_review_heading,
.is-checkout #order_review { grid-column: 1; position: static; }
}
.is-checkout h3 { font-size: 18px; font-weight: 800; margin: 0 0 var(--space-3); }
.is-checkout label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: var(--color-ink); }
.is-checkout .input-text,
.is-checkout select,
.is-checkout textarea {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--color-line);
border-radius: 10px;
background: #fff;
font-family: inherit;
font-size: 14px;
}
.is-checkout .input-text:focus,
.is-checkout select:focus,
.is-checkout textarea:focus { outline: 2px solid var(--color-accent-soft); border-color: var(--color-accent); }
.is-checkout .form-row { margin-bottom: 14px; }
#payment {
background: var(--color-bg-soft);
border-radius: var(--radius-md);
padding: var(--space-3);
margin-top: var(--space-3);
}
#payment ul.payment_methods { list-style: none; margin: 0; padding: 0; }
#payment li.wc_payment_method {
background: #fff;
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 8px;
border: 1px solid var(--color-line);
}
#payment li.wc_payment_method input[type="radio"] { margin-right: 8px; }
#payment .payment_box {
background: var(--color-bg-soft);
padding: 12px 14px;
border-radius: 8px;
margin-top: 10px;
font-size: 13px;
color: var(--color-muted);
}
#payment #place_order {
display: block; width: 100%;
background: var(--color-accent-action); color: #fff;
padding: 14px 24px;
border-radius: var(--radius-pill);
border: 0;
font-weight: 700;
font-size: 15px;
font-family: inherit;
cursor: pointer;
margin-top: var(--space-3);
}
#payment #place_order:hover { background: var(--color-ink); }
/* ---------------------------------------------------------------------------
* Order received
* ------------------------------------------------------------------------- */
.woocommerce-order { text-align: left; padding-block: var(--space-4) var(--space-7); }
.woocommerce-order .woocommerce-notice {
background: #21b06a;
color: #fff;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
margin-bottom: var(--space-4);
text-align: center;
font-size: 16px;
font-weight: 600;
}
.woocommerce-order-overview {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--space-3);
list-style: none; margin: 0; padding: 0;
}
.woocommerce-order-overview li {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-3);
font-size: 13px;
color: var(--color-muted);
}
.woocommerce-order-overview li strong { display: block; color: var(--color-ink); font-size: 16px; margin-top: 4px; }
.woocommerce-order-details, .woocommerce-customer-details {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-4);
margin-top: var(--space-4);
}
.woocommerce-order-details h2, .woocommerce-customer-details h2 { font-size: 18px; font-weight: 800; margin: 0 0 var(--space-3); }
/* ---------------------------------------------------------------------------
* My Account
* ------------------------------------------------------------------------- */
.is-account .wc-main { padding-block: var(--space-4) var(--space-7); }
/* My Account 2-col layout — flex instead of :has() grid for browser support.
* WC defaults to `.woocommerce-MyAccount-navigation { float: left; width: 30% }`
* and `.woocommerce-MyAccount-content { float: right; width: 68% }` — we override
* with flex + explicit widths. !important because WC selectors have same
* specificity but load earlier. */
.woocommerce-account .woocommerce {
display: flex;
flex-wrap: wrap;
gap: var(--space-5);
align-items: flex-start;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
float: none !important;
width: 260px !important;
flex-shrink: 0;
margin: 0 !important;
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-3);
position: sticky; top: 92px;
}
.woocommerce-account .woocommerce-MyAccount-content {
float: none !important;
width: auto !important;
flex: 1 1 0;
min-width: 0;
margin: 0 !important;
}
/* Login form (no nav rendered) — span full width as single flex child */
.woocommerce-account #customer_login { width: 100%; flex: 1 1 100%; }
@media (max-width: 768px) {
/* v1.9.27 — collapse stacked vertical nav into horizontal scroll chip-row.
* Stacked 6 items wasted ~280px above content; chip-row keeps endpoints
* one-tap-away while letting dashboard appear in first viewport. */
.woocommerce-account .woocommerce-MyAccount-navigation {
width: 100% !important;
flex: none;
position: static;
padding: 6px;
border-radius: var(--radius-pill);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation::-webkit-scrollbar { display: none; }
.woocommerce-account .woocommerce-MyAccount-navigation ul {
display: flex;
flex-wrap: nowrap;
gap: 4px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li { flex: 0 0 auto; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
white-space: nowrap;
padding: 10px 16px;
border-radius: var(--radius-pill);
font-size: 13px;
min-height: 40px;
display: inline-flex;
align-items: center;
}
.woocommerce-account .woocommerce-MyAccount-content { width: 100% !important; flex: none; }
}
/* Legacy v1.0 selectors below kept for non-account WC pages — DON'T re-style
* the my-account nav since we already did above. */
.woocommerce-MyAccount-navigation--legacy-stub {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-3);
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li { border-radius: 8px; }
/* Specificity bump (4 classes) — WC core uses `.woocommerce-account .woocommerce-MyAccount-navigation ul li a`
* which is (0,2,3); ours was (0,1,2) → lost. !important on text-decoration as last-resort
* since browser default a underline can also re-apply via context. (v1.9.25) */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a,
.woocommerce-MyAccount-navigation li a {
display: block;
padding: 10px 14px;
border-radius: 8px;
color: var(--color-ink);
font-weight: 500;
text-decoration: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:focus,
.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li a:focus { text-decoration: none !important; }
.woocommerce-MyAccount-navigation li:hover a,
.woocommerce-MyAccount-navigation li.is-active a {
background: var(--color-accent-soft);
color: var(--color-accent-dark);
font-weight: 700;
}
.woocommerce-MyAccount-content {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-4);
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 { font-size: 20px; font-weight: 800; margin: 0 0 var(--space-3); }
/* Login/Register forms — defeat WC's float-based 48% layout with flex. */
.woocommerce #customer_login,
.woocommerce-page #customer_login {
display: flex !important;
flex-wrap: wrap;
gap: var(--space-4);
width: 100%;
}
.woocommerce #customer_login::before,
.woocommerce #customer_login::after { content: none !important; display: none !important; }
.woocommerce #customer_login .u-column1,
.woocommerce #customer_login .u-column2,
.woocommerce #customer_login .col-1,
.woocommerce #customer_login .col-2 {
flex: 1 1 calc(50% - var(--space-4));
min-width: 0;
width: auto !important;
max-width: none !important;
float: none !important;
margin: 0 !important;
}
@media (max-width: 768px) {
.woocommerce #customer_login .u-column1,
.woocommerce #customer_login .u-column2 { flex-basis: 100%; }
}
.woocommerce-form-login, .woocommerce-form-register {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-4);
}
.woocommerce-form-login h2, .woocommerce-form-register h2 {
font-size: 22px; font-weight: 800; margin: 0 0 var(--space-3);
}
.woocommerce-form-row label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.woocommerce-Input.input-text {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--color-line);
border-radius: 10px;
background: #fff;
font-size: 14px;
font-family: inherit;
}
.woocommerce-form__label-for-checkbox { display: flex; gap: 8px; align-items: center; font-weight: 400; font-size: 13px; }
.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
.woocommerce-Button.button,
.woocommerce-form button[type="submit"],
.woocommerce button.button,
button.woocommerce-button {
background: var(--color-accent-action) !important;
color: #fff !important;
padding: 12px 28px !important;
border-radius: var(--radius-pill) !important;
border: 0 !important;
font-weight: 600;
font-size: 14px;
cursor: pointer;
font-family: inherit;
text-transform: none;
letter-spacing: 0;
}
.woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover,
.woocommerce-Button.button:hover,
.woocommerce-form button[type="submit"]:hover,
.woocommerce button.button:hover { background: var(--color-ink) !important; }
/* Also override checkout #place_order and any .button.alt site-wide */
.woocommerce a.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button,
.woocommerce input.button.alt,
.woocommerce #place_order {
background: var(--color-accent-action) !important;
color: #fff !important;
border-radius: var(--radius-pill) !important;
padding: 12px 24px !important;
font-weight: 600;
border: 0 !important;
text-transform: none;
letter-spacing: 0;
}
.woocommerce a.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce #place_order:hover { background: var(--color-ink) !important; }
/* ---------------------------------------------------------------------------
* WC notices (success/error)
* ------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
padding: 14px 18px 14px 48px;
border-radius: var(--radius-md);
margin-bottom: var(--space-3);
list-style: none;
display: flex; justify-content: space-between; align-items: center;
gap: var(--space-3);
font-size: 14px;
position: relative;
}
.woocommerce-message { background: #d6f4e2; color: #14693f; }
.woocommerce-info { background: var(--color-accent-soft); color: var(--color-accent-dark); }
.woocommerce-error { background: #fde0e2; color: #b32a32; }
/* WC core's ::before icon (WooCommerce font) — re-anchor to padding-left slot
* so it stops floating into the message text. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-NoticeGroup .woocommerce-message::before,
.woocommerce-NoticeGroup .woocommerce-info::before,
.woocommerce-NoticeGroup .woocommerce-error::before {
position: absolute !important;
left: 18px !important;
top: 50% !important;
transform: translateY(-50%) !important;
margin: 0 !important;
padding: 0 !important;
width: 20px !important;
height: 20px !important;
font-size: 18px !important;
line-height: 1 !important;
}
.woocommerce-message .button,
.woocommerce-info .button {
background: var(--color-accent-action); color: #fff;
padding: 8px 14px; border-radius: var(--radius-pill);
font-weight: 600; font-size: 13px;
}
/* ---------------------------------------------------------------------------
* My-addresses listing (/my-account/edit-address/) — single card layout.
* Template override `woocommerce/myaccount/my-address.php` renders one entry
* "Địa chỉ giao hàng" (the billing record, rebranded for VN UX). (v1.9.26)
* ------------------------------------------------------------------------- */
.woocommerce-MyAccount-content .dn-address-intro {
color: var(--color-muted);
font-size: 14px;
margin: 0 0 var(--space-3);
}
.woocommerce-MyAccount-content .dn-address-card {
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-4);
background: #fff;
max-width: 520px;
}
.woocommerce-MyAccount-content .dn-address-card__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin: 0 0 var(--space-3);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-line);
}
.woocommerce-MyAccount-content .dn-address-card__header h2 {
font-size: 16px;
font-weight: 800;
margin: 0;
letter-spacing: -0.01em;
}
.woocommerce-MyAccount-content .dn-address-card__action {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: var(--radius-pill);
background: var(--color-accent-soft);
color: var(--color-accent-dark);
font-size: 13px;
font-weight: 600;
text-decoration: none !important;
transition: background var(--transition-fast);
}
.woocommerce-MyAccount-content .dn-address-card__action:hover {
background: var(--color-accent-action);
color: #fff;
}
.woocommerce-MyAccount-content .dn-address-card__body {
font-style: normal;
color: var(--color-ink);
line-height: 1.7;
font-size: 14px;
}
/* ---------------------------------------------------------------------------
* Edit-address form (/my-account/edit-address/{billing|shipping}/)
* Compact 2-column grid — pairs Họ/Tên, Postcode/City, Phone/Email automatically
* regardless of WC's form-row-first/last classes. (v1.9.26)
* ------------------------------------------------------------------------- */
.woocommerce-MyAccount-content .woocommerce-address-fields > h3 {
font-size: 18px;
font-weight: 800;
margin: 0 0 var(--space-3);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--color-line);
}
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 14px;
margin-bottom: var(--space-3);
}
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > .form-row {
margin: 0 !important;
padding: 0 !important;
width: auto !important;
max-width: none !important;
float: none !important;
display: block;
}
/* Full-width fields span both columns. With postcode hidden + state right
* after city, the trailing pairs land cleanly: city|state, then phone|email. */
.woocommerce-MyAccount-content #billing_company_field,
.woocommerce-MyAccount-content #billing_country_field,
.woocommerce-MyAccount-content #billing_address_1_field,
.woocommerce-MyAccount-content #billing_address_2_field,
.woocommerce-MyAccount-content #shipping_company_field,
.woocommerce-MyAccount-content #shipping_country_field,
.woocommerce-MyAccount-content #shipping_address_1_field,
.woocommerce-MyAccount-content #shipping_address_2_field {
grid-column: 1 / -1;
}
/* Address_2 — secondary, less prominent */
.woocommerce-MyAccount-content #billing_address_2_field label,
.woocommerce-MyAccount-content #shipping_address_2_field label {
color: var(--color-muted);
font-weight: 500;
}
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row > label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--color-ink);
margin-bottom: 4px;
}
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row .required {
color: #e8454f;
text-decoration: none;
border: 0;
}
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row .optional {
color: var(--color-muted);
font-weight: 400;
}
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row input.input-text,
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row textarea,
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row select,
.woocommerce-MyAccount-content .woocommerce-address-fields .select2-container--default .select2-selection--single {
width: 100%;
height: 42px;
padding: 8px 12px;
border: 1px solid var(--color-line);
border-radius: 10px;
background: #fff;
font-size: 14px;
font-family: inherit;
color: var(--color-ink);
box-sizing: border-box;
}
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row textarea { height: auto; min-height: 80px; }
.woocommerce-MyAccount-content .woocommerce-address-fields .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 26px;
padding-left: 0;
color: var(--color-ink);
}
.woocommerce-MyAccount-content .woocommerce-address-fields .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 40px;
}
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row input:focus,
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row textarea:focus,
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row select:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(84,112,168,0.12);
}
/* Submit button row — separated by hairline */
.woocommerce-MyAccount-content .woocommerce-address-fields > p {
margin: var(--space-4) 0 0;
padding-top: var(--space-3);
border-top: 1px solid var(--color-line);
}
@media (max-width: 640px) {
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper {
grid-template-columns: 1fr;
}
}
/* ---------------------------------------------------------------------------
* Edit-account form (/my-account/edit-account/) — matches edit-address.
* Override at woocommerce/myaccount/form-edit-account.php wraps fields in
* `.dn-edit-account__grid` so the same 2-col grid works without WC's clear/
* float layout fighting it. (v1.9.26)
* ------------------------------------------------------------------------- */
.woocommerce-MyAccount-content .dn-edit-account__section-title {
font-size: 18px;
font-weight: 800;
margin: 0 0 var(--space-3);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--color-line);
}
.woocommerce-MyAccount-content .dn-edit-account__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 14px;
margin-bottom: var(--space-3);
}
.woocommerce-MyAccount-content .dn-edit-account__grid > .form-row {
margin: 0 !important;
padding: 0 !important;
width: auto !important;
max-width: none !important;
float: none !important;
display: block;
}
.woocommerce-MyAccount-content .dn-edit-account__full { grid-column: 1 / -1; }
.woocommerce-MyAccount-content .dn-edit-account > .form-row > label,
.woocommerce-MyAccount-content .dn-edit-account .form-row > label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--color-ink);
margin-bottom: 4px;
}
.woocommerce-MyAccount-content .dn-edit-account .form-row .required {
color: #e8454f;
text-decoration: none;
border: 0;
}
.woocommerce-MyAccount-content .dn-edit-account .form-row input.input-text {
width: 100%;
height: 42px;
padding: 8px 12px;
border: 1px solid var(--color-line);
border-radius: 10px;
background: #fff;
font-size: 14px;
font-family: inherit;
color: var(--color-ink);
box-sizing: border-box;
}
.woocommerce-MyAccount-content .dn-edit-account .form-row input.input-text:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(84,112,168,0.12);
}
.woocommerce-MyAccount-content .dn-edit-account__hint {
display: block;
font-size: 12px;
font-style: normal;
color: var(--color-muted);
margin-top: 4px;
}
.woocommerce-MyAccount-content .dn-edit-account__hint-inline {
font-weight: 400;
font-size: 12px;
color: var(--color-muted);
}
.woocommerce-MyAccount-content .dn-edit-account__password {
margin: var(--space-4) 0 0;
padding: var(--space-4) 0 0;
border: 0;
border-top: 1px solid var(--color-line);
}
.woocommerce-MyAccount-content .dn-edit-account__password legend {
font-size: 18px;
font-weight: 800;
margin: 0 0 var(--space-3);
padding: 0;
color: var(--color-ink);
}
.woocommerce-MyAccount-content .dn-edit-account__submit {
margin: var(--space-4) 0 0;
padding-top: var(--space-3);
border-top: 1px solid var(--color-line);
}
@media (max-width: 640px) {
.woocommerce-MyAccount-content .dn-edit-account__grid {
grid-template-columns: 1fr;
}
}
/* ---------------------------------------------------------------------------
* Mini cart drawer (header)
* ------------------------------------------------------------------------- */
.mini-cart-drawer {
position: fixed;
top: 0; right: 0; bottom: 0;
width: 380px;
max-width: 90vw;
background: #fff;
box-shadow: -16px 0 56px rgba(0,0,0,0.08);
z-index: 1100;
transform: translateX(100%);
transition: transform var(--transition-base);
display: flex; flex-direction: column;
}
.mini-cart-drawer.is-open { transform: translateX(0); }
.mini-cart-drawer__header {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-line);
display: flex; justify-content: space-between; align-items: center;
}
.mini-cart-drawer__title { margin: 0; font-size: 16px; font-weight: 800; }
.mini-cart-drawer__close {
background: transparent; border: 0; cursor: pointer;
color: var(--color-ink); font-size: 24px; line-height: 1;
}
.mini-cart-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-3) var(--space-4); }
.mini-cart-drawer__footer { border-top: 1px solid var(--color-line); padding: var(--space-3) var(--space-4); }
.mini-cart-drawer__footer .btn { width: 100%; margin-top: 8px; justify-content: center; text-transform: none; letter-spacing: 0; }
.mini-cart-backdrop {
position: fixed; inset: 0;
background: rgba(0,0,0,0.35);
z-index: 1099;
opacity: 0; visibility: hidden;
transition: opacity var(--transition-base);
}
.mini-cart-backdrop.is-open { opacity: 1; visibility: visible; }
/* Mini-cart drawer body — style WC's default mini-cart markup */
.mini-cart-drawer__body .widget_shopping_cart_content,
.mini-cart-drawer__body.widget_shopping_cart_content { width: 100%; }
.mini-cart-drawer__body .woocommerce-mini-cart {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column;
gap: 10px;
}
.mini-cart-drawer__body .mini_cart_item {
display: grid;
grid-template-columns: 56px minmax(0, 1fr) auto;
gap: 12px;
align-items: start;
background: #fff;
border: 1px solid var(--color-line);
border-radius: 12px;
padding: 10px;
position: relative;
}
.mini-cart-drawer__body .mini_cart_item > a:not(.remove) {
grid-column: 2 / 3;
font-size: 13px;
font-weight: 600;
color: var(--color-ink);
text-decoration: none;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
order: 1;
}
.mini-cart-drawer__body .mini_cart_item img {
grid-row: 1 / 3;
grid-column: 1 / 2;
width: 56px; height: 56px;
object-fit: cover;
border-radius: 8px;
margin: 0;
}
.mini-cart-drawer__body .mini_cart_item .quantity {
grid-column: 2 / 3;
font-size: 12px;
color: var(--color-muted);
font-variant-numeric: tabular-nums;
display: flex; gap: 6px;
}
.mini-cart-drawer__body .mini_cart_item .quantity .amount {
color: #ff7a18;
font-weight: 700;
}
.mini-cart-drawer__body .mini_cart_item .remove {
position: absolute;
top: 6px; right: 8px;
width: 22px; height: 22px;
font-size: 18px;
line-height: 22px;
text-align: center;
color: var(--color-muted);
background: transparent;
border-radius: var(--radius-pill);
text-decoration: none;
}
.mini-cart-drawer__body .mini_cart_item .remove:hover {
color: #e8454f;
background: #fde0e2;
}
.mini-cart-drawer__body .woocommerce-mini-cart__total {
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: 1px dashed var(--color-line);
display: flex; justify-content: space-between;
font-size: 14px;
font-weight: 700;
}
.mini-cart-drawer__body .woocommerce-mini-cart__total .amount {
color: #ff7a18;
font-size: 18px;
}
.mini-cart-drawer__body .woocommerce-mini-cart__buttons {
list-style: none; margin: var(--space-3) 0 0; padding: 0;
display: flex; flex-direction: column; gap: 8px;
}
.mini-cart-drawer__body .woocommerce-mini-cart__buttons .button {
display: block; width: 100%;
padding: 12px 16px;
border-radius: var(--radius-pill);
text-align: center;
font-weight: 700;
font-size: 14px;
text-decoration: none;
background: #fff;
color: var(--color-accent-action);
border: 1px solid var(--color-accent-action);
}
.mini-cart-drawer__body .woocommerce-mini-cart__buttons .button.checkout {
background: var(--color-accent-action);
color: #fff;
}
.mini-cart-drawer__body .woocommerce-mini-cart__buttons .button:hover { background: var(--color-ink); color: #fff; border-color: var(--color-ink); }
.mini-cart-drawer__body .woocommerce-mini-cart__empty-message {
text-align: center;
color: var(--color-muted);
padding: var(--space-5) var(--space-3);
margin: 0;
}
/* ============ v0.7 LANDING PAGES — shared ============ */
.page-lede {
color: var(--color-muted);
font-size: 15px;
line-height: 1.6;
margin: 4px 0 var(--space-5);
max-width: 720px;
}
/* ============ ĐẶT HẸN — booking page ============ */
.page-booking { padding-bottom: var(--space-7); }
.booking-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: var(--space-6);
margin-top: var(--space-3);
}
@media (max-width: 900px) {
.booking-layout { grid-template-columns: 1fr; }
}
.booking-intro {
color: var(--color-muted);
margin: 0 0 var(--space-4);
line-height: 1.6;
}
.booking-form {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-5);
display: grid;
gap: var(--space-3);
}
.form-row { display: grid; gap: var(--space-3); }
.form-row--two { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) {
.form-row--two { grid-template-columns: 1fr; }
}
.form-field { display: flex; flex-direction: column; }
.form-field label {
font-size: 13px;
font-weight: 600;
color: var(--color-ink);
margin-bottom: 6px;
}
.form-field label .req { color: #e8454f; margin-left: 2px; }
.form-field input,
.form-field select,
.form-field textarea {
width: 100%;
padding: 12px 14px;
background: var(--color-surface-warm);
border: 1px solid var(--color-line);
border-radius: 10px;
font-family: inherit;
font-size: 14px;
color: var(--color-ink);
transition: border-color var(--transition-fast), background var(--transition-fast);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
outline: none;
border-color: var(--color-accent-action);
background: #fff;
}
.form-field textarea { resize: vertical; min-height: 96px; }
.booking-submit {
justify-self: flex-start;
margin-top: var(--space-2);
padding: 14px 28px;
background: var(--color-accent-action);
color: #fff;
border: 0;
border-radius: var(--radius-pill);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: background var(--transition-fast);
}
.booking-submit:hover { background: var(--color-ink); }
.form-foot {
font-size: 12px;
color: var(--color-muted);
margin: 0;
}
.booking-success {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-7) var(--space-5);
text-align: center;
}
.booking-success svg {
width: 56px;
height: 56px;
color: #21b06a;
margin-bottom: var(--space-3);
}
.booking-success h2 { margin: 0 0 var(--space-2); font-weight: 800; }
.booking-success p { color: var(--color-muted); margin: 0 0 var(--space-4); }
.booking-sidebar { display: grid; gap: var(--space-3); align-self: start; position: sticky; top: 96px; }
@media (max-width: 900px) {
.booking-sidebar { position: static; }
}
.booking-side-card {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-4);
}
.booking-side-card--soft { background: var(--color-accent-soft); border-color: transparent; }
.booking-side-card h3 {
font-size: 14px;
font-weight: 700;
letter-spacing: -0.01em;
margin: 0 0 12px;
}
.booking-side-card ul { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: grid; gap: 8px; font-size: 14px; }
.booking-side-card li span { color: var(--color-muted); margin-right: 4px; }
.booking-side-card a:hover { color: var(--color-accent-action); }
.booking-promises { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 13px; color: var(--color-accent-dark); }
.booking-promises li::before { content: "✓ "; color: var(--color-accent-action); font-weight: 800; margin-right: 4px; }
/* ============ CẨM NANG — resource hub ============ */
.camnang-topics {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-3);
margin-bottom: var(--space-6);
}
@media (max-width: 720px) { .camnang-topics { grid-template-columns: repeat(2, 1fr); } }
.camnang-topic {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-4);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.camnang-topic:hover {
border-color: var(--color-accent-action);
transform: translateY(-2px);
}
.camnang-topic .ico {
width: 48px; height: 48px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--color-accent-soft);
color: var(--color-accent-action);
}
.camnang-topic .ico svg { width: 22px; height: 22px; }
.camnang-topic .label { font-weight: 700; color: var(--color-ink); font-size: 14px; }
.camnang-topic .count { font-size: 12px; color: var(--color-muted); }
.camnang-featured {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--space-5);
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: var(--space-7);
}
@media (max-width: 800px) { .camnang-featured { grid-template-columns: 1fr; } }
.camnang-featured__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 2 / 1; }
.camnang-featured__body { padding: var(--space-5); align-self: center; }
.camnang-featured__body .eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-accent-action);
}
.camnang-featured__body h2 { margin: 8px 0 12px; font-size: var(--fs-lg); font-weight: 800; line-height: 1.25; }
.camnang-featured__body p { color: var(--color-muted); line-height: 1.6; margin: 0 0 var(--space-3); }
.camnang-grid .section-title {
font-size: var(--fs-md);
font-weight: 800;
margin: 0 0 var(--space-4);
}
.camnang-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
}
@media (max-width: 900px) { .camnang-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .camnang-card-grid { grid-template-columns: 1fr; } }
.camnang-card {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
overflow: hidden;
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.camnang-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.camnang-card__thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.camnang-card__body { padding: var(--space-3) var(--space-4) var(--space-4); }
.camnang-card .tag {
display: inline-block;
padding: 2px 8px;
background: var(--color-accent-soft);
color: var(--color-accent-dark);
font-size: 11px;
font-weight: 700;
border-radius: 4px;
margin-bottom: 8px;
}
.camnang-card h3 { font-size: 15px; line-height: 1.35; font-weight: 700; margin: 0 0 8px; }
.camnang-card p { font-size: 13px; color: var(--color-muted); line-height: 1.5; margin: 0 0 8px; }
.camnang-card .meta { font-size: 12px; color: var(--color-muted); }
.camnang-cta { text-align: center; margin-top: var(--space-5); }
/* ============ VIDEO GALLERY ============ */
.video-gallery { display: grid; gap: var(--space-6); }
.video-gallery__featured {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--space-5);
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
overflow: hidden;
}
@media (max-width: 800px) { .video-gallery__featured { grid-template-columns: 1fr; } }
.video-gallery__featured-body { padding: var(--space-5); align-self: center; }
.video-gallery__featured-body .eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-accent-action);
}
.video-gallery__featured-body h2 { font-size: var(--fs-lg); font-weight: 800; margin: 8px 0 12px; line-height: 1.25; }
.video-gallery__featured-body p { color: var(--color-muted); line-height: 1.6; margin: 0; }
.video-thumb {
position: relative;
display: block;
overflow: hidden;
background: #000;
}
.video-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform var(--transition-base); }
.video-thumb:hover img { transform: scale(1.03); }
.video-thumb .play-icon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.video-thumb .play-icon svg { width: 56px; height: 56px; }
.video-thumb .duration {
position: absolute;
right: 10px;
bottom: 10px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 3px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.video-gallery__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
}
@media (max-width: 1024px) { .video-gallery__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .video-gallery__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .video-gallery__grid { grid-template-columns: 1fr; } }
.video-gallery__grid .video-card {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
overflow: hidden;
transition: transform var(--transition-fast);
}
.video-gallery__grid .video-card:hover { transform: translateY(-3px); }
.video-gallery__grid .video-card__title {
font-size: 13px;
font-weight: 600;
line-height: 1.4;
margin: 0;
padding: 10px var(--space-3) var(--space-3);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.8em;
}
.video-gallery__grid .video-card .play-icon svg { width: 40px; height: 40px; }
.video-gallery__cta { text-align: center; }
/* ============ STORE LOCATOR ============ */
.store-locator { display: grid; gap: var(--space-7); margin-bottom: var(--space-7); }
.store-region__title {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--fs-md);
font-weight: 800;
letter-spacing: -0.022em;
margin: 0 0 var(--space-4);
}
.store-region__title svg { width: 20px; height: 20px; color: var(--color-accent-action); }
.store-region__count { font-size: 13px; font-weight: 500; color: var(--color-muted); }
.store-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
}
@media (max-width: 720px) { .store-list { grid-template-columns: 1fr; } }
.store-card {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-4);
position: relative;
transition: border-color var(--transition-fast);
}
.store-card:hover { border-color: var(--color-accent-action); }
.store-card.is-flagship {
border-color: var(--color-accent-action);
background: var(--color-accent-soft);
}
.store-card__flag {
position: absolute;
top: 12px;
right: 12px;
background: var(--color-accent-action);
color: #fff;
padding: 3px 8px;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.store-card__name { font-size: 15px; font-weight: 700; margin: 0 0 8px; padding-right: 84px; }
.store-card__addr {
display: flex;
align-items: flex-start;
gap: 6px;
font-size: 13px;
color: var(--color-ink);
margin: 0 0 6px;
line-height: 1.5;
}
.store-card__addr svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--color-accent-action); margin-top: 3px; }
.store-card__meta { font-size: 12px; color: var(--color-muted); margin: 0; }
.store-card__meta a { color: var(--color-accent-action); font-weight: 600; }
.store-ecommerce { margin-bottom: var(--space-7); }
.store-ecommerce .section-title { font-size: var(--fs-md); font-weight: 800; margin: 0 0 var(--space-4); }
.store-ecommerce__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-3);
}
@media (max-width: 720px) { .store-ecommerce__grid { grid-template-columns: repeat(2, 1fr); } }
.store-channel {
display: flex;
flex-direction: column;
gap: 4px;
padding: var(--space-4);
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
position: relative;
transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.store-channel:hover { border-color: var(--color-accent-action); transform: translateY(-2px); }
.store-channel__name { font-size: 15px; font-weight: 700; color: var(--color-ink); }
.store-channel__note { font-size: 12px; color: var(--color-muted); }
.store-channel svg { position: absolute; top: 14px; right: 14px; width: 14px; height: 14px; color: var(--color-accent-action); }
.store-cta__box {
background: var(--color-accent-soft);
border-radius: var(--radius-lg);
padding: var(--space-5);
text-align: center;
}
.store-cta__box h3 { font-size: var(--fs-md); font-weight: 800; margin: 0 0 8px; }
.store-cta__box p { color: var(--color-accent-dark); margin: 0 0 var(--space-3); }
/* ============ shop-archive landing variant ============ */
.shop-archive--landing .shop-body > .container > .product-grid {
margin-top: var(--space-3);
}
.shop-pagination {
display: flex;
justify-content: center;
gap: 6px;
margin-top: var(--space-5);
}
.shop-pagination a,
.shop-pagination span {
min-width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
border-radius: 8px;
border: 1px solid var(--color-line);
font-size: 13px;
font-weight: 600;
color: var(--color-ink);
}
.shop-pagination .current {
background: var(--color-accent-action);
color: #fff;
border-color: var(--color-accent-action);
}
.shop-pagination a:hover { border-color: var(--color-accent-action); color: var(--color-accent-action); }
.shop-empty {
text-align: center;
padding: var(--space-7) var(--space-3);
background: #fff;
border: 1px dashed var(--color-line);
border-radius: var(--radius-md);
color: var(--color-muted);
}
.shop-empty p { margin: 0 0 var(--space-3); }
/* ============ v0.8 — Contact / Agent form pages ============ */
.contact-layout,
.agent-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: var(--space-6);
margin-top: var(--space-3);
}
@media (max-width: 900px) {
.contact-layout,
.agent-layout { grid-template-columns: 1fr; }
}
.contact-form-title {
font-size: var(--fs-md);
font-weight: 800;
letter-spacing: -0.022em;
margin: 0 0 8px;
}
.form-intro { color: var(--color-muted); margin: 0 0 var(--space-4); }
.form-hint { font-size: 12px; color: var(--color-muted); margin: 6px 0 0; }
.subscribe-thanks { color: #21b06a; font-weight: 600; }
.contact-channel-card {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-4);
}
.contact-channel-card h3 {
font-size: 14px;
font-weight: 700;
margin: 0 0 var(--space-3);
}
.contact-channels {
list-style: none;
padding: 0;
margin: 0 0 var(--space-3);
display: grid;
gap: 12px;
}
.contact-channels li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
line-height: 1.5;
}
.contact-channels li svg {
width: 18px;
height: 18px;
flex: 0 0 auto;
color: var(--color-accent-action);
margin-top: 2px;
}
.contact-channels strong { color: var(--color-ink); }
.contact-channels a { color: var(--color-accent-action); font-weight: 600; }
.contact-channels a:hover { text-decoration: underline; }
.contact-quick-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.contact-sidebar { display: grid; gap: var(--space-3); align-self: start; position: sticky; top: 96px; }
.contact-side-card {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-4);
font-size: 14px;
}
.contact-side-card--soft {
background: var(--color-accent-soft);
border-color: transparent;
color: var(--color-accent-dark);
}
.contact-side-card h2,
.contact-side-card h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
@media (max-width: 900px) { .contact-sidebar { position: static; } }
/* Agent benefits grid (above form) */
.agent-benefits {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-3);
margin-bottom: var(--space-6);
}
@media (max-width: 900px) { .agent-benefits { grid-template-columns: repeat(2, 1fr); } }
.agent-benefit {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-4);
text-align: center;
}
.agent-benefit .ico {
display: inline-flex;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--color-accent-soft);
color: var(--color-accent-action);
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.agent-benefit .ico svg { width: 22px; height: 22px; }
.agent-benefit h3 { font-size: 14px; font-weight: 700; margin: 0 0 6px; }
.agent-benefit p { font-size: 12px; color: var(--color-muted); line-height: 1.5; margin: 0; }
/* ============ v0.8 — Brand landing page (4 sub-brands share layout) ============ */
.brand-landing { color: var(--color-ink); }
/* Hero */
.brand-hero {
position: relative;
padding: var(--space-9) 0 var(--space-9);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: #fff;
}
.brand-hero .breadcrumb--light { color: rgba(255, 255, 255, 0.85); margin-bottom: var(--space-5); }
.brand-hero .breadcrumb--light a { color: rgba(255, 255, 255, 0.85); }
.brand-hero .breadcrumb--light a:hover { color: #fff; }
.brand-hero__copy { max-width: 640px; }
.brand-hero__since {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.4);
color: #fff;
padding: 4px 12px;
border-radius: 999px;
margin-bottom: var(--space-3);
}
.brand-hero__title {
font-size: var(--fs-2xl);
font-weight: 800;
letter-spacing: -0.03em;
margin: 0 0 var(--space-3);
color: #fff;
}
.brand-hero__sub {
font-size: var(--fs-md);
color: rgba(255, 255, 255, 0.92);
line-height: 1.55;
margin: 0 0 var(--space-5);
}
.brand-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn--ghost-light {
background: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.7);
}
.btn--ghost-light:hover { background: #fff; color: var(--color-ink); }
/* Stats strip */
.brand-stats {
background: var(--color-surface);
border-bottom: 1px solid var(--color-line);
padding: var(--space-5) 0;
}
.brand-stats__row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
text-align: center;
}
@media (max-width: 720px) { .brand-stats__row { grid-template-columns: repeat(2, 1fr); } }
.brand-stat__num {
display: block;
font-size: var(--fs-xl);
font-weight: 800;
letter-spacing: -0.03em;
color: var(--color-accent-action);
}
.brand-stat__label {
display: block;
font-size: 12px;
font-weight: 500;
color: var(--color-muted);
margin-top: 4px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* Story 2-col */
.brand-story { padding: var(--space-8) 0; background: var(--color-bg); }
.brand-story__grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: var(--space-7);
align-items: center;
}
@media (max-width: 800px) { .brand-story__grid { grid-template-columns: 1fr; } }
.brand-story__media img {
width: 100%;
border-radius: var(--radius-lg);
display: block;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.brand-story__body .eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-accent-action);
margin-bottom: var(--space-2);
}
.brand-story__body h2 {
font-size: var(--fs-xl);
font-weight: 800;
letter-spacing: -0.025em;
margin: 0 0 var(--space-3);
line-height: 1.2;
}
.brand-story__body p {
color: var(--color-ink-soft);
line-height: 1.7;
margin: 0 0 var(--space-3);
}
.brand-story__body strong { color: var(--color-accent-action); }
/* USPs grid */
.brand-usps { padding: var(--space-8) 0; background: var(--color-surface); }
.brand-usps .section-head--center { text-align: center; margin-bottom: var(--space-6); }
.brand-usps__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
}
@media (max-width: 900px) { .brand-usps__grid { grid-template-columns: repeat(2, 1fr); } }
.brand-usp {
text-align: center;
padding: var(--space-4);
}
.brand-usp .ico {
display: inline-flex;
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--color-accent-soft);
color: var(--color-accent-action);
align-items: center;
justify-content: center;
margin-bottom: var(--space-3);
}
.brand-usp .ico svg { width: 28px; height: 28px; }
.brand-usp h3 { font-size: 15px; font-weight: 700; margin: 0 0 8px; }
.brand-usp p { font-size: 13px; color: var(--color-muted); line-height: 1.55; margin: 0; }
/* Featured products */
.brand-products { padding: var(--space-8) 0; background: var(--color-bg); }
.brand-products .section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: var(--space-5);
}
.brand-products .section-title {
font-size: var(--fs-md);
font-weight: 800;
margin: 0;
}
.brand-products .see-all { color: var(--color-accent-action); font-weight: 600; font-size: 13px; }
/* Bottom CTA */
.brand-bottom-cta { padding: var(--space-8) 0; background: var(--color-surface); }
.brand-bottom-cta__box {
background: var(--color-accent-action);
color: #fff;
border-radius: var(--radius-lg);
padding: var(--space-7) var(--space-5);
text-align: center;
}
.brand-bottom-cta__box h2 {
font-size: var(--fs-xl);
font-weight: 800;
letter-spacing: -0.025em;
margin: 0 0 var(--space-2);
}
.brand-bottom-cta__box p {
font-size: var(--fs-md);
color: rgba(255, 255, 255, 0.9);
margin: 0 0 var(--space-4);
}
.brand-bottom-cta__actions {
display: inline-flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
.brand-bottom-cta .btn--primary {
background: #fff;
color: var(--color-accent-action);
}
.brand-bottom-cta .btn--primary:hover { background: var(--color-bg); color: var(--color-ink); }
.brand-bottom-cta .btn--ghost {
border-color: rgba(255, 255, 255, 0.6);
color: #fff;
}
.brand-bottom-cta .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
/* Theme variants — keep navy default, tweak hue per brand for distinctness */
.brand-landing--rose .brand-stat__num,
.brand-landing--rose .brand-story__body .eyebrow,
.brand-landing--rose .brand-products .see-all { color: #c4577c; }
.brand-landing--rose .brand-usp .ico { background: #fce8ef; color: #c4577c; }
.brand-landing--rose .brand-bottom-cta__box { background: #c4577c; }
.brand-landing--rose .brand-bottom-cta .btn--primary { color: #c4577c; }
.brand-landing--rose .brand-story__body strong { color: #c4577c; }
.brand-landing--sleep .brand-stat__num,
.brand-landing--sleep .brand-story__body .eyebrow,
.brand-landing--sleep .brand-products .see-all { color: #4d6f8a; }
.brand-landing--sleep .brand-usp .ico { background: #dfe8ee; color: #4d6f8a; }
.brand-landing--sleep .brand-bottom-cta__box { background: #2c4660; }
.brand-landing--sleep .brand-bottom-cta .btn--primary { color: #2c4660; }
.brand-landing--sleep .brand-story__body strong { color: #4d6f8a; }
.brand-landing--amber .brand-stat__num,
.brand-landing--amber .brand-story__body .eyebrow,
.brand-landing--amber .brand-products .see-all { color: #a07f24; }
.brand-landing--amber .brand-usp .ico { background: #f5eccd; color: #a07f24; }
.brand-landing--amber .brand-bottom-cta__box { background: #a07f24; }
.brand-landing--amber .brand-bottom-cta .btn--primary { color: #a07f24; }
.brand-landing--amber .brand-story__body strong { color: #a07f24; }
/* ============ v0.9 — Product card overlay buttons (quick view + compare) ============ */
.product-card { position: relative; }
.product-card__overlay {
position: absolute;
top: 14px;
right: 14px;
display: flex;
flex-direction: column;
gap: 6px;
z-index: 3;
opacity: 0;
transform: translateX(8px);
transition: opacity var(--transition-fast), transform var(--transition-fast);
pointer-events: none;
}
.product-card:hover .product-card__overlay,
.product-card:focus-within .product-card__overlay {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
.product-card__overlay-btn {
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
color: var(--color-ink);
border: 1px solid var(--color-line);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--shadow-sm);
transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.product-card__overlay-btn svg { width: 16px; height: 16px; }
.product-card__overlay-btn:hover,
.product-card__overlay-btn.is-active {
background: var(--color-accent-action);
color: #fff;
border-color: var(--color-accent-action);
}
@media (max-width: 768px) {
/* On touch, always show overlay buttons (no hover) */
.product-card__overlay { opacity: 1; transform: none; pointer-events: auto; }
.product-card__overlay-btn { width: 30px; height: 30px; }
.product-card__overlay-btn svg { width: 14px; height: 14px; }
}
/* ============ Compare sticky bar ============ */
.compare-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 70;
background: #fff;
border-top: 1px solid var(--color-line);
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
transform: translateY(120%);
transition: transform var(--transition-base);
}
.compare-bar.is-visible { transform: translateY(0); }
.compare-bar__inner {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
.compare-bar__slots {
display: flex;
gap: 6px;
flex: 1;
}
.compare-bar__slot {
position: relative;
width: 56px;
height: 56px;
background: var(--color-surface-warm);
border: 1px solid var(--color-line);
border-radius: 8px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.compare-bar__slot img { width: 100%; height: 100%; object-fit: cover; }
.compare-bar__slot--empty {
border-style: dashed;
color: var(--color-muted);
font-size: 20px;
font-weight: 300;
}
.compare-bar__slot-remove {
position: absolute;
top: 2px;
right: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.7);
color: #fff;
border: 0;
font-size: 12px;
line-height: 1;
cursor: pointer;
padding: 0;
}
.compare-bar__actions { display: flex; gap: 8px; align-items: center; }
.compare-bar__clear {
background: transparent;
border: 0;
color: var(--color-muted);
font-size: 13px;
text-decoration: underline;
cursor: pointer;
}
.compare-bar__clear:hover { color: var(--color-ink); }
@media (max-width: 768px) {
body.has-mobile-bottom-nav .compare-bar { bottom: 64px; }
.compare-bar__slot { width: 44px; height: 44px; }
}
/* v1.9.27 — account pages have own hotline CTA in dashboard-support; suppress
* floating widgets to free vertical real-estate and prevent compare-bar leak
* from /shop/ session covering address/order forms. */
body.is-account .compare-bar,
body.is-account .floating-actions { display: none !important; }
/* ============ /so-sanh/ compare table ============ */
.compare-empty {
text-align: center;
padding: var(--space-8) var(--space-3);
background: #fff;
border: 1px dashed var(--color-line);
border-radius: var(--radius-lg);
color: var(--color-muted);
}
.compare-empty svg { width: 56px; height: 56px; color: var(--color-line); margin-bottom: var(--space-3); }
.compare-empty h2 { margin: 0 0 8px; font-weight: 700; color: var(--color-ink); }
.compare-empty p { margin: 0 0 var(--space-4); }
.compare-table-wrap { overflow-x: auto; }
.compare-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
}
.compare-table th,
.compare-table td {
padding: 14px 16px;
border-bottom: 1px solid var(--color-line);
text-align: left;
vertical-align: top;
font-size: 14px;
}
.compare-table thead th {
text-align: center;
vertical-align: top;
padding: var(--space-4);
}
.compare-table__row-label { background: var(--color-surface-warm); font-weight: 600; color: var(--color-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; min-width: 140px; }
.compare-table__product { position: relative; min-width: 200px; }
.compare-table__product img {
width: 120px;
height: 120px;
object-fit: cover;
border-radius: var(--radius-md);
background: var(--color-surface-warm);
margin-bottom: 8px;
}
.compare-table__brand { display: block; font-size: 12px; color: var(--color-muted); font-weight: 600; margin-bottom: 2px; }
.compare-table__name { display: block; font-weight: 700; font-size: 14px; line-height: 1.3; color: var(--color-ink); }
.compare-table__remove {
position: absolute;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.08);
border: 0;
color: var(--color-ink);
cursor: pointer;
font-size: 14px;
line-height: 1;
}
.compare-table__remove:hover { background: #e8454f; color: #fff; }
.compare-table__price { color: #ff7a18; font-size: 16px; font-variant-numeric: tabular-nums; }
.compare-table__price-old { color: var(--color-muted); text-decoration: line-through; font-size: 12px; }
.compare-table__rating { background: #21b06a; color: #fff; padding: 2px 6px; border-radius: 4px; font-weight: 700; font-size: 12px; }
.compare-table__rating-count { font-size: 11px; color: var(--color-muted); margin-left: 4px; }
.compare-table__excerpt { font-size: 13px; line-height: 1.5; color: var(--color-ink-soft); }
.compare-table__cta-row td { text-align: center; }
.compare-clear-row { text-align: center; margin-top: var(--space-4); }
/* ============ Quick view modal ============ */
.quick-view-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 98;
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-fast), visibility 0s linear 200ms;
}
.quick-view-backdrop.is-open {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
.quick-view-modal {
position: fixed;
inset: 0;
margin: auto;
max-width: 960px;
max-height: 90vh;
height: fit-content;
background: #fff;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
z-index: 99;
overflow: hidden;
visibility: hidden;
opacity: 0;
transform: scale(0.96);
transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s linear 200ms;
}
.quick-view-modal.is-open {
visibility: visible;
opacity: 1;
transform: scale(1);
transition-delay: 0s;
}
.quick-view-modal__close {
position: absolute;
top: 12px;
right: 12px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.06);
border: 0;
font-size: 24px;
cursor: pointer;
z-index: 2;
line-height: 1;
}
.quick-view-modal__close:hover { background: rgba(0, 0, 0, 0.15); }
.quick-view-modal__body { padding: var(--space-5); max-height: 90vh; overflow-y: auto; }
.quick-view-modal__loading,
.quick-view-modal__error { padding: var(--space-7); text-align: center; color: var(--color-muted); }
.quick-view-modal__grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: var(--space-5);
}
@media (max-width: 720px) { .quick-view-modal__grid { grid-template-columns: 1fr; } }
.quick-view-modal__main {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: var(--radius-md);
background: var(--color-surface-warm);
}
.quick-view-modal__thumbs {
display: flex;
gap: 6px;
margin-top: 8px;
flex-wrap: wrap;
}
.quick-view-modal__thumb {
width: 56px;
height: 56px;
border-radius: 8px;
border: 1px solid var(--color-line);
background: var(--color-surface-warm);
cursor: pointer;
overflow: hidden;
padding: 0;
}
.quick-view-modal__thumb.is-active { border-color: var(--color-accent-action); }
.quick-view-modal__thumb img { width: 100%; height: 100%; object-fit: cover; }
.quick-view-modal__brand { font-size: 12px; font-weight: 700; color: var(--color-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.quick-view-modal__title { font-size: var(--fs-md); font-weight: 800; letter-spacing: -0.022em; margin: 4px 0 8px; line-height: 1.3; }
.quick-view-modal__rating { font-size: 12px; color: var(--color-muted); margin-bottom: 12px; }
.quick-view-modal__price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: var(--space-3); }
.quick-view-modal__price { font-size: var(--fs-lg); font-weight: 800; color: #ff7a18; font-variant-numeric: tabular-nums; }
.quick-view-modal__price-old { color: var(--color-muted); text-decoration: line-through; font-size: 13px; }
.quick-view-modal__desc { font-size: 13px; line-height: 1.6; color: var(--color-ink-soft); margin-bottom: var(--space-4); }
.quick-view-modal__desc p:last-child { margin-bottom: 0; }
.quick-view-modal__form { display: flex; gap: 10px; align-items: center; margin-bottom: var(--space-3); }
.quick-view-modal__form .btn { flex: 1; }
.quick-view-modal__oos { background: var(--color-bg-soft); padding: 12px; border-radius: 8px; font-size: 13px; color: var(--color-muted); }
.quick-view-modal__more { display: inline-block; font-size: 13px; color: var(--color-accent-action); font-weight: 600; }
.quick-view-modal__more:hover { text-decoration: underline; }
/* ============ Search autocomplete ============ */
.search-form { position: relative; }
.search-autocomplete {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
max-height: 480px;
overflow-y: auto;
z-index: 60;
display: none;
padding: 8px 0;
}
.search-autocomplete.is-open { display: block; }
.ac-group { padding: 8px 0; border-bottom: 1px solid var(--color-line); }
.ac-group:last-of-type { border-bottom: 0; }
.ac-group__title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-muted);
padding: 4px 16px 8px;
}
.ac-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
transition: background var(--transition-fast);
}
.ac-item:hover { background: var(--color-bg); }
.ac-item img,
.ac-item__placeholder {
width: 48px;
height: 48px;
border-radius: 8px;
object-fit: cover;
background: var(--color-surface-warm);
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.ac-item__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ac-item__brand { font-size: 11px; color: var(--color-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.ac-item__name {
font-size: 13px;
font-weight: 600;
color: var(--color-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ac-item__price { font-size: 12px; color: #ff7a18; font-weight: 700; }
.ac-item__meta { font-size: 11px; color: var(--color-muted); }
.ac-all {
display: block;
padding: 10px 16px;
text-align: center;
background: var(--color-bg);
color: var(--color-accent-action);
font-size: 12px;
font-weight: 600;
}
.ac-all:hover { background: var(--color-accent-soft); }
.ac-empty { padding: var(--space-4); text-align: center; color: var(--color-muted); font-size: 13px; }
/* ============ Mega menu ============ */
.primary-nav .has-mega { display: inline-flex; align-items: center; gap: 4px; }
.primary-nav__caret { width: 10px; height: 10px; opacity: 0.7; transition: transform var(--transition-fast); }
.primary-nav .has-mega:hover .primary-nav__caret,
.primary-nav .has-mega[aria-expanded="true"] .primary-nav__caret { transform: rotate(180deg); }
.mega-menus {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 49;
background: transparent; /* card chrome moved onto .mega-menu-all so the rail-only state reads as a popup */
border-top: none;
box-shadow: none;
visibility: hidden;
opacity: 0;
transition: opacity var(--transition-fast), visibility 0s linear 180ms;
}
.mega-menus.is-open {
visibility: visible;
opacity: 1;
transition-delay: 0s;
}
.mega-menu {
display: none;
padding: var(--space-5) 0;
}
.mega-menu.is-active { display: block; }
.mega-menu__grid {
display: grid;
grid-template-columns: 1fr 1.4fr 1fr;
gap: var(--space-5);
}
.mega-menu__title { font-size: var(--fs-md); font-weight: 800; letter-spacing: -0.022em; margin: 0 0 6px; }
.mega-menu__tag { color: var(--color-muted); font-size: 13px; margin: 0 0 var(--space-3); }
.mega-menu__cats { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.mega-menu__cats a {
font-size: 13px;
color: var(--color-ink);
padding: 4px 0;
display: inline-block;
transition: color var(--transition-fast);
}
.mega-menu__cats a:hover { color: var(--color-accent-action); }
.mega-menu__sub { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 var(--space-3); }
.mega-menu__products {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.mega-product {
background: var(--color-surface);
border: 1px solid var(--color-line);
border-radius: 10px;
padding: 8px;
text-align: center;
transition: border-color var(--transition-fast);
}
.mega-product:hover { border-color: var(--color-accent-action); }
.mega-product img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; margin-bottom: 6px; }
.mega-product__name {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--color-ink);
margin-bottom: 2px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mega-product__price { display: block; font-size: 12px; font-weight: 700; color: #ff7a18; }
.mega-menu__banner {
background: var(--color-accent-soft);
border-radius: var(--radius-md);
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: 8px;
height: 100%;
}
.mega-menu__banner .eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-accent-action);
}
.mega-menu__banner h4 { font-size: 16px; font-weight: 800; margin: 0; }
.mega-menu__banner p { font-size: 12px; color: var(--color-accent-dark); margin: 0 0 6px; line-height: 1.5; }
.mega-menu__banner .btn { align-self: flex-start; }
/* Theme tints */
.mega-menu--rose .mega-menu__banner { background: #fce8ef; }
.mega-menu--rose .mega-menu__banner .eyebrow,
.mega-menu--rose .mega-menu__banner p,
.mega-menu--rose .mega-menu__cats a:hover { color: #c4577c; }
.mega-menu--sleep .mega-menu__banner { background: #dfe8ee; }
.mega-menu--sleep .mega-menu__banner .eyebrow,
.mega-menu--sleep .mega-menu__banner p { color: #4d6f8a; }
.mega-menu--amber .mega-menu__banner { background: #f5eccd; }
.mega-menu--amber .mega-menu__banner .eyebrow,
.mega-menu--amber .mega-menu__banner p { color: #a07f24; }
/* === Master "Tất cả danh mục" entry === */
.primary-nav-group {
display: flex;
align-items: center;
gap: var(--space-4);
flex: 1;
min-width: 0;
}
.primary-nav__master {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 14px;
background: var(--color-accent-action);
color: #fff !important;
border-radius: var(--radius-pill);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
transition: background var(--transition-fast), transform var(--transition-fast);
}
.primary-nav__master:hover,
.primary-nav__master[aria-expanded="true"] {
background: #142a52;
color: #fff;
transform: translateY(-1px);
}
.primary-nav__master-icon { width: 16px; height: 16px; }
.primary-nav__master .primary-nav__caret { opacity: 0.85; }
.primary-nav__master[aria-expanded="true"] .primary-nav__caret { transform: rotate(180deg); }
/* === All-catalog mega popup (Alibaba-style: rail only by default; pane reveals on rail hover) === */
.mega-menu--all { padding: 8px 0 0; }
.mega-menu-all {
/* Popup card flush-left inside .container so it lines up with the master pill */
width: max-content;
max-width: 100%;
margin-inline: 0 auto 0 0; /* left-aligned within the 1200px container */
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
overflow: hidden;
/* 2-col grid — second column collapses to 0 until a rail item activates */
display: grid;
grid-template-columns: 260px 0fr;
gap: 0;
transition: grid-template-columns 240ms ease;
}
/* Modern browsers (:has support) — expand the right column when any pane is active */
.mega-menu-all:has(.mega-pane.is-active) {
grid-template-columns: 260px minmax(0, 880px);
}
/* Left rail — vertical list of sub-brands (always visible) */
.mega-menu-all__rail {
list-style: none;
padding: var(--space-3);
margin: 0;
border-right: 1px solid var(--color-line);
min-width: 260px;
}
.mega-menu-all__rail .rail-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 14px;
font-size: 13.5px;
font-weight: 600;
color: var(--color-ink);
border-radius: 10px;
margin-bottom: 2px;
transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.mega-menu-all__rail .rail-item:hover,
.mega-menu-all__rail .rail-item.is-active {
background: var(--color-accent-soft);
color: var(--color-accent-action);
transform: translateX(2px);
}
.mega-menu-all__rail .rail-item svg { width: 12px; height: 12px; opacity: 0.7; flex-shrink: 0; }
/* Right reveal pane */
.mega-menu-all__panes {
position: relative;
min-width: 0;
padding: var(--space-3);
overflow: hidden; /* clip during the grid-template-columns transition */
}
.mega-pane { display: none; flex-direction: column; gap: var(--space-4); }
.mega-pane.is-active { display: flex; }
.mega-pane__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-line);
}
.mega-pane__title {
font-size: 18px;
font-weight: 800;
letter-spacing: -0.022em;
margin: 0 0 4px;
color: var(--color-ink);
}
.mega-pane__tag { font-size: 13px; color: var(--color-muted); margin: 0; }
.mega-pane__see-all {
font-size: 12.5px;
font-weight: 700;
color: var(--color-accent-action);
white-space: nowrap;
letter-spacing: 0.02em;
}
.mega-pane__see-all:hover { color: #142a52; }
.mega-pane__body {
display: grid;
grid-template-columns: 220px 1fr;
gap: var(--space-4);
}
.mega-pane__sub {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-muted);
margin: 0 0 10px;
}
.mega-pane__cats {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 6px;
}
.mega-pane__cats a {
display: block;
font-size: 13px;
color: var(--color-ink);
padding: 5px 0;
transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.mega-pane__cats a:hover {
color: var(--color-accent-action);
padding-left: 4px;
}
.mega-pane__count {
font-weight: 600;
color: var(--color-accent-action);
margin-left: 4px;
}
/* All-products grid — scrollable if brand has many SKUs */
.mega-pane__products {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
max-height: 460px;
overflow-y: auto;
padding-right: 4px;
}
/* Slim scrollbar — Webkit */
.mega-pane__products::-webkit-scrollbar { width: 6px; }
.mega-pane__products::-webkit-scrollbar-track { background: transparent; }
.mega-pane__products::-webkit-scrollbar-thumb { background: var(--color-line); border-radius: 999px; }
.mega-pane__products::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }
.mega-pane__prod {
display: flex;
flex-direction: column;
text-align: center;
padding: 8px;
border: 1px solid transparent;
border-radius: 10px;
transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.mega-pane__prod:hover { border-color: var(--color-accent-action); transform: translateY(-2px); }
.mega-pane__prod img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 8px;
background: var(--color-bg-soft);
margin-bottom: 6px;
}
.mega-pane__prod-name {
font-size: 11.5px;
font-weight: 500;
color: var(--color-ink);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 4px;
min-height: 30px;
}
.mega-pane__prod-price { font-size: 12px; font-weight: 700; color: #ff7a18; }
/* v1.9.27 — Pane titles unified to navy across all 4 brands (4D + HaBaSu +
* GoCoSo + Đệm Sinh). Match canonical heading color site-wide. */
.mega-pane--rose .mega-pane__title,
.mega-pane--sleep .mega-pane__title,
.mega-pane--amber .mega-pane__title { color: var(--color-accent-dark); }
@media (max-width: 1200px) {
.mega-pane__products { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1100px) {
.mega-menu-all { grid-template-columns: 200px 1fr; }
.mega-pane__body { grid-template-columns: 180px 1fr; }
}
@media (max-width: 980px) {
.mega-menus { display: none !important; }
.primary-nav__caret { display: none; }
.primary-nav__master { display: none; }
}
/* ============ Combo deals page ============ */
.combo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
margin-bottom: var(--space-7);
}
@media (max-width: 900px) { .combo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .combo-grid { grid-template-columns: 1fr; } }
.combo-card {
position: relative;
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.combo-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.combo-card__badge {
position: absolute;
top: 14px;
left: 14px;
background: #ff7a18;
color: #fff;
padding: 4px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
z-index: 2;
}
.combo-card--rose .combo-card__badge { background: #c4577c; }
.combo-card--navy .combo-card__badge { background: var(--color-accent-action); }
.combo-card--sleep .combo-card__badge { background: #4d6f8a; }
.combo-card__media {
aspect-ratio: 4 / 3;
background: var(--color-surface-warm);
overflow: hidden;
}
.combo-card__stack {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
padding: var(--space-3);
gap: 4px;
}
.combo-card__stack img {
width: 33%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 10px;
border: 1px solid var(--color-line);
}
.combo-card__placeholder {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
color: var(--color-line);
}
.combo-card__placeholder svg { width: 64px; height: 64px; }
.combo-card__body {
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.combo-card__title { font-size: 16px; font-weight: 800; margin: 0; letter-spacing: -0.015em; }
.combo-card__desc { font-size: 13px; color: var(--color-muted); line-height: 1.5; margin: 0; }
.combo-card__items {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 4px;
font-size: 12px;
color: var(--color-ink-soft);
}
.combo-card__items .check { color: #21b06a; font-weight: 800; margin-right: 4px; }
.combo-card__price-row {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
margin-top: auto;
}
.combo-card__price { font-size: 18px; font-weight: 800; color: #ff7a18; font-variant-numeric: tabular-nums; }
.combo-card__price-old { font-size: 13px; color: var(--color-muted); text-decoration: line-through; }
.combo-card__savings {
font-size: 11px;
background: #21b06a;
color: #fff;
padding: 2px 8px;
border-radius: 4px;
font-weight: 700;
}
.combo-card__cta { margin-top: var(--space-2); justify-self: stretch; text-align: center; }
.combo-card__soon { font-size: 12px; color: var(--color-muted); margin: 0; padding: 8px 12px; background: var(--color-bg); border-radius: 6px; }
.combo-cta__box {
background: var(--color-accent-soft);
border-radius: var(--radius-lg);
padding: var(--space-6);
text-align: center;
}
.combo-cta__box h2 { font-size: var(--fs-md); font-weight: 800; margin: 0 0 8px; }
.combo-cta__box p { color: var(--color-accent-dark); margin: 0 0 var(--space-3); }
/* ============ Sitemap page ============ */
.sitemap-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-5);
}
@media (max-width: 720px) { .sitemap-grid { grid-template-columns: 1fr; } }
.sitemap-block {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-4);
}
.sitemap-block h2 { font-size: 14px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 var(--space-3); padding-bottom: 10px; border-bottom: 1px solid var(--color-line); }
.sitemap-block ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.sitemap-block li a {
font-size: 13px;
color: var(--color-ink);
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 0;
}
.sitemap-block li a:hover { color: var(--color-accent-action); }
.sitemap-block li span { font-size: 11px; color: var(--color-muted); font-weight: 500; }
/* Moved to pages-shop.css — WC thankyou + my-account dashboard (v1.9 Y2). */
/* ============ v1.0 — Top notice bar (D2/D3) ============ */
.top-notice {
background: linear-gradient(90deg, #1e3a6b 0%, #2c4660 100%);
color: #fff;
font-size: 13px;
padding: 6px 0;
position: relative;
z-index: 60;
}
.top-notice__inner {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
min-height: 22px;
}
.top-notice__ticker {
position: relative;
flex: 1;
text-align: center;
height: 22px;
overflow: hidden;
}
.top-notice__msg {
position: absolute;
inset: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
opacity: 0;
transform: translateY(8px);
transition: opacity 380ms ease, transform 380ms ease;
}
.top-notice__msg.is-active { opacity: 1; transform: translateY(0); }
.top-notice__msg svg { color: var(--color-flash-fill); flex: 0 0 auto; }
.top-notice__msg span,
.top-notice__msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.top-notice__close {
background: transparent;
border: 0;
color: #fff;
width: 24px;
height: 24px;
font-size: 18px;
line-height: 1;
cursor: pointer;
opacity: 0.7;
transition: opacity var(--transition-fast);
flex: 0 0 auto;
}
.top-notice__close:hover { opacity: 1; }
@media (max-width: 640px) {
.top-notice { font-size: 11px; padding: 5px 0; }
.top-notice__ticker { height: 18px; }
}
@media (max-width: 480px) {
/* Drop the leading icon — it eats horizontal room and reads as visual noise
once the message is squeezed to ellipsis truncation. */
.top-notice__msg svg { display: none; }
.top-notice__inner { gap: 8px; padding-inline: 4px; }
.top-notice { font-size: 10.5px; }
}
/* ============ v1.0 — Live order toast (D4) ============ */
.live-toast {
position: fixed;
left: 16px;
bottom: 16px;
z-index: 75;
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 12px 36px 12px 12px;
display: flex;
align-items: center;
gap: 12px;
max-width: 320px;
opacity: 0;
transform: translateX(-30px);
transition: opacity 380ms ease, transform 380ms ease;
}
.live-toast.is-visible { opacity: 1; transform: translateX(0); }
.live-toast__img {
width: 44px;
height: 44px;
border-radius: 8px;
object-fit: cover;
background: var(--color-surface-warm);
flex: 0 0 auto;
}
.live-toast__body { flex: 1; min-width: 0; }
.live-toast__text,
.live-toast__product,
.live-toast__meta { margin: 0; font-size: 12px; line-height: 1.35; }
.live-toast__text strong { font-weight: 700; color: var(--color-ink); }
.live-toast__product { color: var(--color-accent-action); font-weight: 600; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-toast__meta { color: var(--color-muted); margin-top: 2px; }
.live-toast__close {
position: absolute;
top: 6px;
right: 8px;
background: transparent;
border: 0;
color: var(--color-muted);
font-size: 16px;
line-height: 1;
cursor: pointer;
padding: 4px;
}
.live-toast__close:hover { color: var(--color-ink); }
@media (max-width: 768px) {
.live-toast { bottom: 76px; left: 12px; max-width: calc(100vw - 24px); }
}
/* ============ v1.0 — Stock counter (D8) ============ */
.product-card__stock {
display: inline-flex;
align-items: center;
gap: 4px;
background: #fde0e2;
color: #c25c4a;
padding: 3px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
margin-top: 4px;
align-self: flex-start;
}
.product-card__stock svg { width: 11px; height: 11px; flex: 0 0 auto; }
/* ============ v1.0 — Wishlist heart button + page ============ */
[data-wishlist-toggle].is-active {
background: #e8454f;
color: #fff;
border-color: #e8454f;
}
[data-wishlist-toggle].is-active svg { fill: #fff; }
.wishlist-loading,
.wishlist-empty {
text-align: center;
padding: var(--space-8) var(--space-3);
background: #fff;
border: 1px dashed var(--color-line);
border-radius: var(--radius-lg);
color: var(--color-muted);
}
.wishlist-empty svg { width: 56px; height: 56px; color: var(--color-line); margin-bottom: var(--space-3); }
.wishlist-empty h2 { margin: 0 0 8px; font-weight: 700; color: var(--color-ink); }
.wishlist-empty p { margin: 0 0 var(--space-4); }
.wishlist-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
}
@media (max-width: 900px) { .wishlist-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .wishlist-grid { grid-template-columns: repeat(2, 1fr); } }
/* ============ v1.0 — Image zoom (D6) ============ */
.product-gallery__main { position: relative; overflow: hidden; }
.product-gallery__zoom-lens {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
border: 3px solid #fff;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
pointer-events: none;
opacity: 0;
background-repeat: no-repeat;
background-color: #fff;
transition: opacity 200ms;
z-index: 4;
}
.product-gallery__zoom-lens.is-active { opacity: 1; }
.product-gallery__zoom-hint {
position: absolute;
bottom: 12px;
right: 12px;
background: rgba(0, 0, 0, 0.55);
color: #fff;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
opacity: 0.85;
pointer-events: none;
}
@media (max-width: 768px) {
.product-gallery__zoom-lens,
.product-gallery__zoom-hint { display: none; }
}
/* ============ v1.0 — Checkout progress steps (D7) ============ */
.checkout-progress {
background: var(--color-bg);
border-bottom: 1px solid var(--color-line);
padding: var(--space-4) 0;
margin-bottom: var(--space-5);
}
.checkout-progress__steps {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
position: relative;
}
.checkout-progress__steps::before {
content: "";
position: absolute;
top: 18px;
left: 16.66%;
right: 16.66%;
height: 2px;
background: var(--color-line);
z-index: 0;
}
.checkout-progress__step {
text-align: center;
position: relative;
z-index: 1;
}
.checkout-progress__num {
display: inline-flex;
width: 36px;
height: 36px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--color-line);
color: var(--color-muted);
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.checkout-progress__num svg { width: 14px; height: 14px; }
.checkout-progress__label {
display: block;
margin-top: 8px;
font-size: 13px;
font-weight: 600;
color: var(--color-muted);
}
.checkout-progress__step.is-current .checkout-progress__num {
background: var(--color-accent-action);
border-color: var(--color-accent-action);
color: #fff;
}
.checkout-progress__step.is-current .checkout-progress__label { color: var(--color-accent-action); }
.checkout-progress__step.is-done .checkout-progress__num {
background: #21b06a;
border-color: #21b06a;
color: #fff;
}
.checkout-progress__step.is-done.is-current .checkout-progress__num {
background: #21b06a;
border-color: #21b06a;
}
.checkout-progress__step.is-done .checkout-progress__label { color: var(--color-ink); }
@media (max-width: 560px) {
.checkout-progress__num { width: 30px; height: 30px; font-size: 12px; }
.checkout-progress__label { font-size: 11px; }
}
/* Moved to pages-shop.css — Q&A tab (single product, v1.9 Y2). */
/* ============ v1.0 — Nhà máy page ============ */
.factory-hero {
background-size: cover;
background-position: center;
color: #fff;
padding: var(--space-9) 0;
margin-bottom: 0;
}
.factory-hero .breadcrumb--light { color: rgba(255, 255, 255, 0.85); margin-bottom: var(--space-4); }
.factory-hero .breadcrumb--light a { color: rgba(255, 255, 255, 0.85); }
.factory-hero__copy { max-width: 640px; }
.factory-hero__eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.4);
padding: 4px 12px;
border-radius: 999px;
margin-bottom: var(--space-3);
}
.factory-hero h1 {
font-size: var(--fs-2xl);
font-weight: 800;
letter-spacing: -0.03em;
margin: 0 0 var(--space-3);
color: #fff;
}
.factory-hero p {
font-size: var(--fs-md);
color: rgba(255, 255, 255, 0.92);
margin: 0 0 var(--space-4);
line-height: 1.55;
}
.factory-stats {
background: #fff;
border-bottom: 1px solid var(--color-line);
padding: var(--space-5) 0;
}
.factory-stats__row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
text-align: center;
}
@media (max-width: 720px) { .factory-stats__row { grid-template-columns: repeat(2, 1fr); } }
.factory-stat .num {
display: block;
font-size: var(--fs-xl);
font-weight: 800;
color: var(--color-accent-action);
letter-spacing: -0.03em;
}
.factory-stat .label {
display: block;
font-size: 12px;
color: var(--color-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 4px;
}
.factory-timeline { padding: var(--space-8) 0; }
.factory-timeline__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-5); max-width: 760px; margin: 0 auto; }
.factory-step {
display: flex;
gap: var(--space-4);
align-items: flex-start;
position: relative;
padding-left: 0;
}
.factory-step__num {
flex: 0 0 56px;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--color-accent-soft);
color: var(--color-accent-action);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 18px;
letter-spacing: -0.02em;
}
.factory-step__body h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.factory-step__body p { margin: 0; color: var(--color-muted); line-height: 1.6; }
.factory-cta { padding: var(--space-7) 0; background: var(--color-bg); }
.factory-cta__box {
background: var(--color-accent-action);
color: #fff;
border-radius: var(--radius-lg);
padding: var(--space-7) var(--space-5);
text-align: center;
}
.factory-cta__box h2 { font-size: var(--fs-xl); font-weight: 800; margin: 0 0 8px; color: #fff; }
.factory-cta__box p { color: rgba(255,255,255,0.9); margin: 0 0 var(--space-4); }
.factory-cta__actions { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.factory-cta .btn--primary { background: #fff; color: var(--color-accent-action); }
.factory-cta .btn--primary:hover { background: var(--color-bg); }
.factory-cta .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.6); }
.factory-cta .btn--ghost:hover { background: rgba(255,255,255,0.12); }
/* ============ v1.0 — Chứng nhận page ============ */
.cert-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
margin-bottom: var(--space-7);
}
@media (max-width: 900px) { .cert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cert-grid { grid-template-columns: 1fr; } }
.cert-card {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-5);
display: flex;
gap: var(--space-3);
align-items: flex-start;
transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.cert-card:hover { border-color: var(--color-accent-action); transform: translateY(-2px); }
.cert-card__icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--color-accent-soft);
color: var(--color-accent-action);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 56px;
}
.cert-card__icon svg { width: 26px; height: 26px; }
.cert-card__body { flex: 1; }
.cert-card__body h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; }
.cert-card__body p { margin: 0 0 8px; font-size: 13px; color: var(--color-muted); line-height: 1.55; }
.cert-card__year {
display: inline-block;
font-size: 11px;
font-weight: 700;
color: var(--color-accent-action);
letter-spacing: 0.04em;
}
.cert-awards { margin-bottom: var(--space-7); }
.cert-awards .section-title { font-size: var(--fs-md); font-weight: 800; margin: 0 0 var(--space-4); }
.cert-awards__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.cert-awards__list li {
display: flex;
gap: var(--space-4);
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-4);
align-items: flex-start;
}
.cert-award__year {
flex: 0 0 64px;
font-size: 22px;
font-weight: 800;
color: var(--color-accent-action);
letter-spacing: -0.02em;
}
.cert-awards__list strong { display: block; margin-bottom: 2px; }
.cert-award__org { font-size: 12px; color: var(--color-muted); }
.cert-verify__box {
background: var(--color-accent-soft);
border-radius: var(--radius-lg);
padding: var(--space-5);
text-align: center;
}
.cert-verify__box h3 { font-size: var(--fs-md); font-weight: 800; margin: 0 0 8px; color: var(--color-accent-action); }
.cert-verify__box p { color: var(--color-accent-dark); margin: 0 0 var(--space-3); }
/* ============ v1.0 — Thành viên page ============ */
.member-benefits {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
margin-bottom: var(--space-7);
}
@media (max-width: 900px) { .member-benefits { grid-template-columns: repeat(2, 1fr); } }
.member-benefit {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-4);
text-align: center;
}
.member-benefit .ico {
display: inline-flex;
width: 56px; height: 56px;
border-radius: 50%;
background: var(--color-accent-soft);
color: var(--color-accent-action);
align-items: center;
justify-content: center;
margin-bottom: var(--space-2);
}
.member-benefit .ico svg { width: 26px; height: 26px; }
.member-benefit h3 { font-size: 14px; font-weight: 700; margin: 0 0 6px; }
.member-benefit p { font-size: 12px; color: var(--color-muted); line-height: 1.5; margin: 0; }
.section-title--center { text-align: center; }
.member-tiers .section-title--center { font-size: var(--fs-xl); font-weight: 800; margin: 0 0 var(--space-5); }
.tier-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
margin-bottom: var(--space-7);
}
@media (max-width: 900px) { .tier-grid { grid-template-columns: 1fr; } }
.tier-card {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
padding: var(--space-5);
position: relative;
display: flex;
flex-direction: column;
}
.tier-card.is-highlight {
border-color: var(--color-accent-action);
box-shadow: 0 12px 32px rgba(30, 58, 107, 0.12);
transform: translateY(-8px);
}
.tier-card__flag {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--color-accent-action);
color: #fff;
padding: 4px 14px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.tier-card--silver .tier-card__head h3 { color: #6f7268; }
.tier-card--gold .tier-card__head h3 { color: #a07f24; }
.tier-card--platinum .tier-card__head h3 { color: #5470a8; }
.tier-card__head { text-align: center; margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-line); }
.tier-card__head h3 { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.025em; margin: 0 0 4px; }
.tier-card__spend { font-size: 12px; color: var(--color-muted); margin: 0; text-transform: uppercase; letter-spacing: 0.04em; }
.tier-card__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.tier-card__list li { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--color-line); font-size: 13px; }
.tier-card__list li:last-child { border-bottom: 0; }
.tier-card__list .label { color: var(--color-muted); }
.tier-card__list strong { color: var(--color-ink); font-weight: 700; }
.member-cta__box {
background: var(--color-accent-action);
color: #fff;
border-radius: var(--radius-lg);
padding: var(--space-7) var(--space-5);
text-align: center;
}
.member-cta__box h2 { font-size: var(--fs-xl); font-weight: 800; color: #fff; margin: 0 0 8px; }
.member-cta__box p { color: rgba(255,255,255,0.9); margin: 0 0 var(--space-4); }
.member-cta .btn--primary { background: #fff; color: var(--color-accent-action); }
.member-cta .btn--primary:hover { background: var(--color-bg); }
/* ============ v1.1 — Form error page ============ */
.page-form-error { padding: var(--space-9) 0; }
.form-error-box {
max-width: 560px;
margin: 0 auto;
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
padding: var(--space-7) var(--space-5);
text-align: center;
box-shadow: var(--shadow-md);
}
.form-error-box__icon {
display: inline-flex;
width: 72px;
height: 72px;
border-radius: 50%;
background: #fde0e2;
color: #c25c4a;
align-items: center;
justify-content: center;
margin-bottom: var(--space-4);
}
.form-error-box__icon svg { width: 36px; height: 36px; }
.form-error-box h1 { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.025em; margin: 0 0 var(--space-3); }
.form-error-box p { color: var(--color-muted); line-height: 1.6; margin: 0 0 var(--space-4); }
.form-error-box__actions { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: var(--space-4); }
.form-error-box__support { font-size: 13px; color: var(--color-muted); margin: 0; }
.form-error-box__support a { color: var(--color-accent-action); }
/* Moved to pages-shop.css — Loyalty widget + points history (v1.9 Y2). */
/* ============ v1.3 — Wishlist share + import ============ */
.wishlist-share-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
background: var(--color-accent-soft);
border-radius: var(--radius-md);
padding: 12px 16px;
margin-bottom: var(--space-5);
}
.wishlist-share-row__label {
font-size: 13px;
font-weight: 600;
color: var(--color-accent-dark);
flex: 0 0 auto;
}
.wishlist-share-row__input {
flex: 1;
min-width: 200px;
padding: 8px 12px;
border: 1px solid var(--color-line);
border-radius: 8px;
background: #fff;
font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
font-size: 12px;
color: var(--color-ink);
}
.wishlist-share-cta {
display: flex;
gap: 12px;
justify-content: center;
margin-top: var(--space-5);
flex-wrap: wrap;
}
/* Moved to pages-shop.css — VAT block + Restock notifier (v1.9 Y2). */
/* ============ v1.3 — Skin diagnosis quiz ============ */
.page-quiz { padding-bottom: var(--space-8); }
.quiz-progress {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-5);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.quiz-progress__bar {
flex: 1;
height: 6px;
background: var(--color-line);
border-radius: 999px;
overflow: hidden;
}
.quiz-progress__bar span {
display: block;
height: 100%;
background: var(--color-accent-action);
border-radius: 999px;
transition: width var(--transition-base);
}
.quiz-progress__label {
font-size: 12px;
font-weight: 600;
color: var(--color-muted);
white-space: nowrap;
}
.quiz-step {
max-width: 600px;
margin: 0 auto;
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.quiz-step h2 {
font-size: var(--fs-lg);
font-weight: 800;
letter-spacing: -0.022em;
margin: 0 0 8px;
text-align: center;
}
.quiz-step__hint {
color: var(--color-muted);
text-align: center;
margin: 0 0 var(--space-5);
font-size: 13px;
}
.quiz-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: var(--space-5);
}
@media (max-width: 560px) { .quiz-options { grid-template-columns: 1fr; } }
.quiz-option {
display: flex;
align-items: flex-start;
gap: 12px;
padding: var(--space-4);
background: var(--color-surface-warm);
border: 2px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast);
}
.quiz-option:hover { background: var(--color-accent-soft); }
.quiz-option input { margin-top: 4px; flex: 0 0 auto; accent-color: var(--color-accent-action); }
.quiz-option:has(input:checked) {
background: var(--color-accent-soft);
border-color: var(--color-accent-action);
}
.quiz-option__body { display: flex; flex-direction: column; gap: 2px; }
.quiz-option__body strong { font-size: 14px; font-weight: 700; color: var(--color-ink); }
.quiz-option__body span { font-size: 12px; color: var(--color-muted); line-height: 1.5; }
.quiz-option--compact { padding: 14px var(--space-4); }
.quiz-option--compact .quiz-option__body strong { font-size: 15px; }
.quiz-step__actions {
display: flex;
justify-content: center;
}
.quiz-step__actions .btn { min-width: 200px; }
.quiz-result {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
padding: var(--space-6);
max-width: 900px;
margin: 0 auto;
}
.quiz-result__header {
text-align: center;
margin-bottom: var(--space-6);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--color-line);
}
.quiz-result__icon {
display: inline-flex;
width: 64px;
height: 64px;
border-radius: 50%;
background: #d9f4e6;
color: #1d8c52;
align-items: center;
justify-content: center;
margin-bottom: var(--space-3);
}
.quiz-result__icon svg { width: 32px; height: 32px; }
.quiz-result__header h2 { font-size: var(--fs-xl); font-weight: 800; margin: 0 0 8px; letter-spacing: -0.025em; }
.quiz-result__summary { color: var(--color-muted); margin: 0; font-size: 14px; }
.quiz-result__summary strong { color: var(--color-accent-action); }
.quiz-result__sub { font-size: var(--fs-md); font-weight: 800; text-align: center; margin: 0 0 var(--space-4); }
.quiz-result__actions {
display: flex;
gap: 12px;
justify-content: center;
margin-top: var(--space-5);
flex-wrap: wrap;
}
.quiz-result__share {
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--color-line);
text-align: center;
font-size: 12px;
color: var(--color-muted);
}
.quiz-result__share code {
display: inline-block;
margin-top: 6px;
padding: 4px 10px;
background: var(--color-bg-soft);
border-radius: 4px;
font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
font-size: 11px;
color: var(--color-ink);
word-break: break-all;
}
/* ============ v1.4 — A11y improvements (F6) ============ */
.skip-link {
position: absolute;
top: -100px;
left: 0;
z-index: 1000;
background: var(--color-accent-action);
color: #fff !important;
padding: 12px 20px;
font-weight: 700;
text-decoration: none;
border-radius: 0 0 var(--radius-md) 0;
transition: top 200ms;
}
.skip-link:focus,
.skip-link:focus-visible {
top: 0;
outline: 3px solid #d4a73f;
outline-offset: -3px;
}
/* Universal focus-visible — only show on keyboard nav, never on mouse click */
*:focus { outline: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--color-accent-action);
outline-offset: 2px;
border-radius: 4px;
}
.btn:focus-visible {
outline-offset: 3px;
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
.top-notice__msg,
.live-toast,
.quiz-progress__bar span,
.floating-actions__btn--phone,
[data-reveal] {
animation: none !important;
transition: none !important;
}
}
/* Moved to pages-shop.css — Review photo gallery (v1.9 Y2). */
/* Moved to pages-shop.css — Quiz reward + Gift card checkout (v1.9 Y2). */
/* Moved to pages-shop.css — v1.6/v1.7 reward catalog + B2B + dealer + return (v1.9 Y2). */
/* Moved to pages-shop.css — Review section redesign v1.8.5 (v1.9 Y2). */
/* ============================================================================
* v1.8.4 — Registration page /dang-ky/ (Hasaki-style)
* ========================================================================= */
.register-section { padding: var(--space-6) 0 var(--space-9); }
.register-card {
max-width: 480px;
margin: 0 auto;
background: var(--color-surface, #fff);
border-radius: var(--radius-lg);
padding: var(--space-6) var(--space-5);
box-shadow: var(--shadow-md);
}
.register-card__head { text-align: center; margin-bottom: var(--space-4); }
.register-card__title {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.022em;
color: var(--color-ink);
margin: 0 0 6px;
}
.register-card__sub {
margin: 0;
font-size: 13px;
color: var(--color-muted);
line-height: 1.5;
}
.register-notice {
padding: 10px 14px;
border-radius: var(--radius-sm);
font-size: 13px;
margin-bottom: var(--space-3);
}
.register-notice--error {
background: #fde0e2;
color: #a52a30;
border-left: 3px solid #e8454f;
}
.register-form { display: flex; flex-direction: column; gap: 14px; }
.register-field { position: relative; }
.register-field__pill {
display: flex;
align-items: center;
background: var(--color-bg-soft);
border: 1px solid transparent;
border-radius: var(--radius-pill);
padding: 0 18px;
transition: border-color var(--transition-fast), background var(--transition-fast);
}
.register-field__pill:focus-within {
background: #fff;
border-color: var(--color-accent-action);
box-shadow: 0 0 0 3px rgba(30, 58, 107, 0.12);
}
.register-field__pill input {
flex: 1;
border: none;
background: transparent;
padding: 14px 0;
font-family: var(--font-body);
font-size: 14px;
color: var(--color-ink);
outline: none;
}
.register-field__pill input::placeholder { color: var(--color-muted); }
.register-field__icon { width: 18px; height: 18px; color: var(--color-accent-action); opacity: 0.6; flex: 0 0 18px; }
.register-field__toggle {
background: transparent;
border: none;
padding: 4px;
cursor: pointer;
color: var(--color-muted);
}
.register-field__toggle:hover { color: var(--color-accent-action); }
.register-field__toggle svg { width: 18px; height: 18px; }
.register-gender, .register-dob {
border: none;
padding: 0;
margin: 0;
}
.register-gender__legend, .register-dob__legend {
font-size: 13px;
color: var(--color-ink);
font-weight: 600;
margin-bottom: 8px;
padding: 0;
}
.register-gender { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.register-gender__legend { flex: 0 0 100%; }
.register-gender label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
cursor: pointer;
}
.register-gender input[type="radio"] { accent-color: var(--color-accent-action); }
.register-dob__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.register-dob select {
width: 100%;
padding: 12px 14px;
background: var(--color-bg-soft);
border: 1px solid transparent;
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-size: 13px;
color: var(--color-ink);
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7268' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 14px;
padding-right: 32px;
}
.register-dob select:focus { background-color: #fff; border-color: var(--color-accent-action); outline: none; }
.register-consents { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.register-consent {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
line-height: 1.45;
color: var(--color-ink);
cursor: pointer;
}
.register-consent input[type="checkbox"] {
margin-top: 2px;
accent-color: var(--color-accent-action);
width: 16px;
height: 16px;
flex: 0 0 16px;
}
.register-consent a { color: var(--color-accent-action); font-weight: 600; }
.register-consent a:hover { text-decoration: underline; }
.register-submit {
background: var(--color-accent-action);
color: #fff;
border: none;
padding: 14px 28px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.04em;
border-radius: var(--radius-pill);
cursor: pointer;
transition: background var(--transition-fast), transform var(--transition-fast);
margin-top: var(--space-2);
}
.register-submit:hover { background: var(--color-ink); transform: translateY(-1px); }
.register-divider {
display: flex;
align-items: center;
text-align: center;
font-size: 13px;
color: var(--color-muted);
margin: var(--space-4) 0 var(--space-3);
position: relative;
}
.register-divider::before {
content: "";
position: absolute;
inset: 50% 0 auto 0;
height: 1px;
background: var(--color-line);
z-index: 0;
}
.register-divider span {
position: relative;
background: var(--color-surface, #fff);
padding: 0 var(--space-3);
z-index: 1;
}
.register-divider a { color: var(--color-accent-action); font-weight: 700; text-transform: uppercase; }
.register-divider a:hover { text-decoration: underline; }
.register-social { text-align: center; }
.register-social__label {
margin: 0 0 10px;
font-size: 13px;
color: var(--color-muted);
}
.register-social__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.register-social__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 12px;
border-radius: var(--radius-pill);
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: filter var(--transition-fast), transform var(--transition-fast);
}
.register-social__btn:not(.is-disabled):hover { filter: brightness(1.06); transform: translateY(-1px); }
.register-social__btn.is-disabled { cursor: not-allowed; opacity: 0.55; pointer-events: none; }
.register-social__btn svg { width: 18px; height: 18px; }
.register-social__btn--fb {
background: #1877f2;
color: #fff;
border: none;
}
.register-social__btn--google {
background: #fff;
color: var(--color-ink);
border: 1px solid var(--color-line);
}
.register-social__btn--zalo {
background: #fff;
color: var(--color-ink);
border: 1px solid var(--color-line);
}
.register-social__btn--zalo img { width: 18px; height: 18px; object-fit: contain; }
.register-social__hint { font-size: 11px; color: var(--color-muted); margin: 8px 0 0; font-style: italic; }
@media (max-width: 520px) {
.register-card { padding: var(--space-4); border-radius: var(--radius-md); }
.register-dob__row { grid-template-columns: 1fr; }
.register-social__btns { grid-template-columns: 1fr; }
}
/* ============================================================================
* v1.8.4 — Login modal (Hasaki-style popup, triggered by topbar "Đăng nhập")
* ========================================================================= */
.login-modal {
position: fixed;
inset: 0;
z-index: 99;
display: none;
align-items: center;
justify-content: center;
padding: var(--space-4);
}
.login-modal.is-open { display: flex; }
.login-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(2px);
animation: login-fade 200ms ease;
}
.login-modal__panel {
position: relative;
width: 100%;
max-width: 440px;
background: var(--color-surface, #fff);
border-radius: var(--radius-lg);
padding: var(--space-6) var(--space-5);
box-shadow: var(--shadow-lg);
animation: login-pop 240ms cubic-bezier(0.22, 1, 0.36, 1);
max-height: 90vh;
overflow-y: auto;
}
@keyframes login-fade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes login-pop {
from { opacity: 0; transform: translateY(20px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.login-modal__close {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--color-bg-soft);
border: none;
color: var(--color-ink);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--transition-fast);
}
.login-modal__close:hover { background: var(--color-line); }
.login-modal__close svg { width: 16px; height: 16px; }
.login-modal__heading {
margin: 0 0 var(--space-3);
font-size: 14px;
font-weight: 600;
color: var(--color-ink);
}
.login-modal__social { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: var(--space-4); }
.login-modal__social-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 12px;
border-radius: var(--radius-pill);
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: filter var(--transition-fast), transform var(--transition-fast);
}
.login-modal__social-btn:not(.is-disabled):hover { filter: brightness(1.06); transform: translateY(-1px); }
.login-modal__social-btn.is-disabled { cursor: not-allowed; opacity: 0.55; pointer-events: none; }
.login-modal__social-btn svg { width: 18px; height: 18px; }
.login-modal__social-btn--fb { background: #1877f2; color: #fff; border: none; }
.login-modal__social-btn--google { background: #fff; color: var(--color-ink); border: 1px solid var(--color-line); }
.login-modal__social-btn--zalo { background: #fff; color: var(--color-ink); border: 1px solid var(--color-line); }
.login-modal__social-btn--zalo img { width: 18px; height: 18px; object-fit: contain; }
.login-modal__divider {
display: flex;
align-items: center;
text-align: center;
font-size: 13px;
color: var(--color-muted);
margin: var(--space-3) 0;
position: relative;
}
.login-modal__divider::before {
content: "";
position: absolute;
inset: 50% 0 auto 0;
height: 1px;
background: var(--color-line);
}
.login-modal__divider span {
position: relative;
background: var(--color-surface, #fff);
padding: 0 var(--space-3);
}
.login-modal__notice {
padding: 10px 14px;
border-radius: var(--radius-sm);
font-size: 13px;
margin-bottom: var(--space-3);
}
.login-modal__notice--error {
background: #fde0e2;
color: #a52a30;
border-left: 3px solid #e8454f;
}
.login-modal__form { display: flex; flex-direction: column; gap: 12px; }
.login-modal__pill {
display: flex;
align-items: center;
background: var(--color-bg-soft);
border: 1px solid transparent;
border-radius: var(--radius-pill);
padding: 0 18px;
transition: border-color var(--transition-fast), background var(--transition-fast);
}
.login-modal__pill:focus-within {
background: #fff;
border-color: var(--color-accent-action);
box-shadow: 0 0 0 3px rgba(30, 58, 107, 0.12);
}
.login-modal__pill input {
flex: 1;
border: none;
background: transparent;
padding: 14px 0;
font-family: var(--font-body);
font-size: 14px;
color: var(--color-ink);
outline: none;
}
.login-modal__pill input::placeholder { color: var(--color-muted); }
.login-modal__options {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
}
.login-modal__remember {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
color: var(--color-ink);
}
.login-modal__remember input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--color-accent-action);
}
.login-modal__forgot { color: var(--color-accent-action); font-weight: 500; }
.login-modal__forgot:hover { text-decoration: underline; }
.login-modal__submit {
background: var(--color-accent-action);
color: #fff;
border: none;
padding: 14px 28px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.04em;
border-radius: var(--radius-pill);
cursor: pointer;
transition: background var(--transition-fast), transform var(--transition-fast);
margin-top: 4px;
}
.login-modal__submit:hover { background: var(--color-ink); transform: translateY(-1px); }
.login-modal__signup {
margin: var(--space-4) 0 0;
font-size: 13px;
color: var(--color-muted);
text-align: center;
}
.login-modal__signup a { color: var(--color-accent-action); font-weight: 700; text-transform: uppercase; margin-left: 4px; }
.login-modal__signup a:hover { text-decoration: underline; }
/* Topbar "Đăng nhập" button (was , now