/** * chibi-core — hệ thống giao diện cho các Custom UX Element. * * Định hướng: tối giản, sang trọng, nhiều khoảng trắng, đường kẻ 1px, nhấn bằng * màu đồng ánh kim thay vì màu bão hoà. Chữ dẫn in hoa giãn ký tự, tiêu đề lớn * nhưng nhẹ nét. * * Mọi giá trị đặt qua CSS variables ở :root để đổi nhận diện chỉ bằng vài dòng * trong Tuỳ biến > CSS của Flatsome, không cần build lại plugin. */ /** * HAI bảng màu, chuyển bằng theme_mod `chibi_palette`. * * `gold` — nâu đen + đồng ánh kim, bản dựng ban đầu cho chibidecor.com.vn. * `brand` — xanh lá #407a3b + cam đất #d26e4b, lấy đúng từ chibidecor.com. * * Giữ cả hai thay vì ghi đè để còn so sánh trực tiếp và quay lại được. Chibi_Palette * gắn thuộc tính data-chibi-palette lên thẻ và đồng bộ luôn color_primary của * Flatsome, để nút do theme vẽ và nút do plugin vẽ không lệch màu nhau. */ :root { --chibi-ink: #14110f; --chibi-ink-soft: #3a3430; --chibi-muted: #8a8279; --chibi-line: #e3dcd2; --chibi-surface: #faf8f5; --chibi-surface-alt: #f2eee8; --chibi-accent: #b08d57; --chibi-accent-soft: #c9a961; --chibi-white: #fff; --chibi-radius: 2px; --chibi-radius-lg: 4px; --chibi-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --chibi-dur: 0.55s; --chibi-track: 1px solid var(--chibi-line); --chibi-shadow: 0 18px 50px -28px rgba(var(--chibi-ink-rgb), 0.45); --chibi-font-display: inherit; --chibi-eyebrow-ls: 0.18em; } /** * Bảng màu thương hiệu chibidecor.com. * * Xanh lá là màu logo nên nó làm màu nhấn chính. Cam đất dành riêng cho tín hiệu * giảm giá và nút hành động phụ — hai thứ cần bật ra khỏi nền xanh, và nó là màu * bổ trợ của xanh lá nên không đánh nhau. * * Nền chuyển từ be ngả vàng sang xám ngả xanh rất nhạt: nền be dưới màu xanh lá * làm cả trang ám vàng như ảnh cũ. */ :root[data-chibi-palette="brand"] { --chibi-ink: #1c2a1a; --chibi-ink-soft: #3d4a3a; /** * Màu chữ mờ — đã làm đậm hơn để đạt chuẩn tương phản. * * #7d877a cũ chỉ đạt 3,53:1 trên nền be và 3,74:1 trên nền trắng, dưới * ngưỡng 4,5:1 mà WCAG yêu cầu cho chữ thường. Màu này dùng cho chú thích * ảnh, nhãn thông số, dòng meta — tức phần lớn chữ nhỏ trên trang, đúng chỗ * người đọc cần tương phản nhất. * * #6c756a giữ nguyên tông xanh xám, đạt 4,52 trên nền be và 4,78 trên trắng. */ --chibi-muted: #6c756a; --chibi-line: #dfe4dc; --chibi-surface: #f7f9f6; --chibi-surface-alt: #eef2ec; --chibi-accent: #407a3b; /** * HAI biến nhấn nhạt cho HAI loại nền — không thể dùng chung một màu. * * `accent-soft` nằm trên nền TỐI (chân trang, chữ đè lên ảnh). Làm nó đậm đi * cho hợp nền sáng thì tương phản trên nền tối tụt còn 3,3 — hỏng đúng chỗ nó * đang được dùng nhiều nhất. * * `accent-ink` là bản đậm dành cho nền SÁNG (liên kết trong nội dung). */ --chibi-accent-soft: #5c9d56; --chibi-accent-ink: #4d8248; --chibi-white: #fff; /* * Màu phụ: nhãn giảm giá, nhãn HOT, nút hành động thứ hai. * * #d26e4b cũ cho chữ TRẮNG trên nó chỉ 3,46:1 — nhãn "-17%" và "HOT" đều là * chữ trắng trên nền này, tức hai nhãn dễ đọc nhất lại là hai chỗ khó đọc nhất. * #b45e40 đưa lên 4,55:1 mà vẫn giữ đúng sắc cam đất. */ --chibi-secondary: #b45e40; --chibi-secondary-soft: #d1815f; --chibi-sale: #b45e40; --chibi-shadow: 0 18px 50px -28px rgba(28, 42, 26, 0.42); /* Kênh màu của bảng brand — xem ghi chú ở bảng gold. */ --chibi-ink-rgb: 28, 42, 26; --chibi-surface-rgb: 247, 249, 246; } /* Bảng gốc cũng cần hai biến này để CSS dùng chung không bị rỗng. */ :root { --chibi-secondary: #b08d57; --chibi-secondary-soft: #c9a961; --chibi-sale: #b08d57; /** * Kênh màu rời cho rgba(). * * rgba() cần ba con số, không nhận được biến dạng #hex. Trước đây mọi lớp * phủ, đổ bóng và nền mờ đều viết cứng rgba(var(--chibi-ink-rgb), …) — chính là màu * mực của bảng gold. Khi đổi sang bảng brand thì nền chuyển xanh đen còn lớp * phủ vẫn nâu đen: hai tông khác nhau chồng lên nhau trên cùng một trang. */ --chibi-ink-rgb: 20, 17, 15; --chibi-surface-rgb: 250, 248, 245; } /* ========================================================================== Nền tảng dùng chung ========================================================================== */ .chibi-icon { flex: 0 0 auto; display: block; } /* Hiệu ứng xuất hiện khi cuộn tới. Trạng thái mặc định là hiện — JS mới thêm .chibi-reveal--armed để ẩn đi, đảm bảo nội dung không bao giờ biến mất khi người dùng tắt JavaScript. */ .chibi-reveal--armed { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--chibi-ease), transform 0.8s var(--chibi-ease); will-change: opacity, transform; } .chibi-reveal--armed.is-visible { opacity: 1; transform: none; } .chibi-section-head { margin-bottom: clamp(24px, 3.5vw, 48px); } .chibi-section-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .chibi-section-head__title { margin: 0 0 10px; font-size: clamp(24px, 2.6vw, 40px); font-weight: 400; line-height: 1.18; letter-spacing: -0.01em; color: var(--chibi-ink); } .chibi-section-head__sub { margin: 0; max-width: 62ch; color: var(--chibi-muted); font-size: 15px; line-height: 1.7; } .chibi-link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--chibi-ink); border-bottom: 1px solid var(--chibi-line); padding-bottom: 4px; transition: color 0.3s var(--chibi-ease), border-color 0.3s var(--chibi-ease); } .chibi-link-arrow::after { content: "→"; transition: transform 0.3s var(--chibi-ease); } .chibi-link-arrow:hover { color: var(--chibi-accent); border-color: var(--chibi-accent); } .chibi-link-arrow:hover::after { transform: translateX(4px); } /* Nút ------------------------------------------------------------------ */ .chibi-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 34px; border-radius: var(--chibi-radius); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color 0.35s var(--chibi-ease), color 0.35s var(--chibi-ease), border-color 0.35s var(--chibi-ease), transform 0.35s var(--chibi-ease); } .chibi-btn--sm { padding: 11px 20px; font-size: 12px; } .chibi-btn--solid { background: var(--chibi-ink); color: var(--chibi-white); border-color: var(--chibi-ink); } .chibi-btn--solid:hover { background: var(--chibi-accent); border-color: var(--chibi-accent); color: var(--chibi-white); } /* Nút viền: đặt màu tường minh cho cả hai trạng thái. Bản trước dùng currentColor + mix-blend-mode để "tự đảo màu" — nghe thông minh nhưng render ra kết quả khó đoán trên nền ảnh và nền tối. Khai báo thẳng ra luôn đúng và dễ sửa hơn. */ .chibi-btn--outline { background: transparent; color: var(--chibi-ink); border-color: var(--chibi-line); } .chibi-btn--outline:hover { background: var(--chibi-ink); border-color: var(--chibi-ink); color: #fff; } /* Trên nền tối (hero full-bleed, section dark) đảo lại bảng màu */ .chibi-hero .chibi-btn--outline, .chibi-news--dark .chibi-btn--outline, .dark .chibi-btn--outline { color: #fff; border-color: rgba(255, 255, 255, 0.45); } .chibi-hero .chibi-btn--outline:hover, .chibi-news--dark .chibi-btn--outline:hover, .dark .chibi-btn--outline:hover { background: #fff; border-color: #fff; color: var(--chibi-ink); } .chibi-btn--underline { padding: 6px 0; border-radius: 0; border-bottom: 1px solid currentColor; background: none; } .chibi-btn--underline:hover { color: var(--chibi-accent); } .chibi-btn:focus-visible, .chibi-filter__trigger:focus-visible, .chibi-specs__toggle:focus-visible { outline: 2px solid var(--chibi-accent); outline-offset: 3px; } /* ========================================================================== 1. Hero Banner ========================================================================== */ .chibi-hero { position: relative; display: flex; overflow: hidden; min-height: var(--chibi-hero-h, 86vh); color: var(--chibi-hero-color, #fff); isolation: isolate; } .chibi-hero__media, .chibi-hero__scrim { position: absolute; inset: 0; z-index: -2; } .chibi-hero__scrim { z-index: -1; background: var(--chibi-hero-overlay, #14110f); opacity: var(--chibi-hero-opacity, 0.38); } .chibi-hero__scrim.is-gradient { background: linear-gradient( to top, color-mix(in srgb, var(--chibi-hero-overlay, #14110f) 82%, transparent) 0%, color-mix(in srgb, var(--chibi-hero-overlay, #14110f) 30%, transparent) 45%, color-mix(in srgb, var(--chibi-hero-overlay, #14110f) 20%, transparent) 100% ); } .chibi-hero__img, .chibi-hero__video { width: 100%; height: 100%; object-fit: cover; display: block; } .chibi-hero--effect-kenburns .chibi-hero__img { animation: chibi-kenburns 22s var(--chibi-ease) infinite alternate; transform-origin: center; } @keyframes chibi-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } } .chibi-hero__inner { position: relative; width: 100%; display: flex; padding: clamp(32px, 6vw, 96px); } .chibi-hero--pos-top .chibi-hero__inner { align-items: flex-start; } .chibi-hero--pos-center .chibi-hero__inner { align-items: center; } .chibi-hero--pos-bottom .chibi-hero__inner { align-items: flex-end; } .chibi-hero--align-left .chibi-hero__inner { justify-content: flex-start; text-align: left; } .chibi-hero--align-center .chibi-hero__inner { justify-content: center; text-align: center; } .chibi-hero--align-right .chibi-hero__inner { justify-content: flex-end; text-align: right; } .chibi-hero__content { max-width: var(--chibi-hero-textwidth, 680px); } .chibi-hero__eyebrow { margin: 0 0 18px; font-size: 12px; letter-spacing: var(--chibi-eyebrow-ls); text-transform: uppercase; opacity: 0.85; } .chibi-hero__title { margin: 0 0 20px; font-family: var(--chibi-font-display); font-size: clamp(32px, 5.2vw, 68px); font-weight: 300; line-height: 1.08; letter-spacing: -0.02em; color: inherit; } .chibi-hero__subtitle { margin: 0 auto; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.7; opacity: 0.9; max-width: 56ch; } .chibi-hero--align-left .chibi-hero__subtitle { margin-left: 0; } .chibi-hero--align-right .chibi-hero__subtitle { margin-right: 0; } .chibi-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .chibi-hero--align-center .chibi-hero__actions { justify-content: center; } .chibi-hero--align-right .chibi-hero__actions { justify-content: flex-end; } .chibi-hero__actions .chibi-btn--solid { background: var(--chibi-white); border-color: var(--chibi-white); color: var(--chibi-ink); } .chibi-hero__actions .chibi-btn--solid:hover { background: var(--chibi-accent); border-color: var(--chibi-accent); color: var(--chibi-white); } .chibi-hero__scroll { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 11px; letter-spacing: var(--chibi-eyebrow-ls); text-transform: uppercase; opacity: 0.75; } .chibi-hero__scroll-line { width: 1px; height: 46px; background: currentColor; animation: chibi-scroll-line 2.4s var(--chibi-ease) infinite; transform-origin: top; } @keyframes chibi-scroll-line { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(0) translateY(46px); opacity: 0; } } @media (max-width: 767px) { .chibi-hero { min-height: var(--chibi-hero-h-mobile, 70vh); } } /* ========================================================================== 2. Điểm nổi bật + Tooltip ========================================================================== */ .chibi-highlights__grid { display: grid; grid-template-columns: repeat(var(--chibi-hl-cols, 4), minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; } .chibi-highlights--list .chibi-highlights__grid, .chibi-highlights--inline .chibi-highlights__grid { grid-template-columns: 1fr; gap: 16px; } .chibi-highlights--inline .chibi-highlights__grid { display: flex; flex-wrap: wrap; gap: 12px 28px; } .chibi-highlight { position: relative; display: flex; gap: 14px; align-items: flex-start; } .chibi-highlights--align-center .chibi-highlight { flex-direction: column; align-items: center; text-align: center; } .chibi-highlights--card .chibi-highlight { padding: 26px; border: var(--chibi-track); border-radius: var(--chibi-radius-lg); background: var(--chibi-white); transition: border-color 0.35s var(--chibi-ease), transform 0.35s var(--chibi-ease); } .chibi-highlights--card .chibi-highlight:hover { border-color: var(--chibi-accent); transform: translateY(-3px); } .chibi-highlights.has-divider .chibi-highlight { padding-bottom: 18px; border-bottom: var(--chibi-track); } .chibi-highlight__icon { display: inline-flex; align-items: center; justify-content: center; color: var(--chibi-accent); transition: background-color 0.35s var(--chibi-ease), color 0.35s var(--chibi-ease); } .chibi-highlights--icon-circle .chibi-highlight__icon, .chibi-highlights--icon-square .chibi-highlight__icon { width: 58px; height: 58px; background: var(--chibi-surface-alt); } .chibi-highlights--icon-circle .chibi-highlight__icon { border-radius: 50%; } .chibi-highlights--icon-square .chibi-highlight__icon { border-radius: var(--chibi-radius-lg); } .chibi-highlight:hover .chibi-highlight__icon { background: var(--chibi-accent); color: var(--chibi-white); } .chibi-highlights--icon-plain .chibi-highlight:hover .chibi-highlight__icon { background: none; color: var(--chibi-accent-soft); } .chibi-highlight__title { margin: 0 0 4px; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--chibi-ink); } .chibi-highlight__desc { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--chibi-muted); } /* Tooltip: chỉ CSS, không cần thư viện. JS chỉ lo phần mở bằng chạm trên mobile. */ .chibi-tooltip { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 20; max-width: 280px; padding: 12px 14px; background: var(--chibi-ink); color: var(--chibi-white); border-radius: var(--chibi-radius-lg); font-size: 12.5px; line-height: 1.55; box-shadow: var(--chibi-shadow); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.25s var(--chibi-ease), transform 0.25s var(--chibi-ease), visibility 0.25s; pointer-events: none; } .chibi-tooltip::after { content: ""; position: absolute; top: 100%; left: 24px; border: 6px solid transparent; border-top-color: var(--chibi-ink); } .chibi-highlight.has-tooltip:hover .chibi-tooltip, .chibi-highlight.has-tooltip:focus-within .chibi-tooltip, .chibi-highlight.is-tip-open .chibi-tooltip { opacity: 1; visibility: visible; transform: translateY(0); } .chibi-highlight.has-tooltip .chibi-highlight__icon { cursor: help; } /* ========================================================================== 3. Bảng thông số kỹ thuật ========================================================================== */ .chibi-specs__group + .chibi-specs__group { margin-top: 8px; } .chibi-specs__group-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 15px; font-weight: 500; letter-spacing: 0.02em; color: var(--chibi-ink); } .chibi-specs__group-title .chibi-icon { color: var(--chibi-accent); } .chibi-specs--table .chibi-specs__group + .chibi-specs__group { margin-top: 36px; } .chibi-specs__table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .chibi-specs__table th, .chibi-specs__table td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: var(--chibi-track); line-height: 1.6; } .chibi-specs__table th { width: 38%; font-weight: 400; color: var(--chibi-muted); } .chibi-specs__table td { color: var(--chibi-ink); } .chibi-specs.is-striped .chibi-specs__table tr:nth-child(odd) { background: var(--chibi-surface); } .chibi-specs__list { margin: 0; padding-left: 18px; } .chibi-specs__list li { margin-bottom: 5px; } .chibi-spec__yes { color: #4f7a4a; } .chibi-spec__no { color: var(--chibi-muted); } .chibi-spec__file { display: inline-flex; align-items: center; gap: 7px; color: var(--chibi-accent); border-bottom: 1px solid currentColor; } .chibi-spec__gallery { display: flex; flex-wrap: wrap; gap: 10px; } .chibi-spec__drawing { max-width: 160px; height: auto; border: var(--chibi-track); background: var(--chibi-white); } /* Accordion ------------------------------------------------------------ */ .chibi-specs--accordion .chibi-specs__group { border: var(--chibi-track); border-radius: var(--chibi-radius-lg); overflow: hidden; background: var(--chibi-white); } .chibi-specs__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 22px; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; transition: background-color 0.3s var(--chibi-ease); } .chibi-specs__toggle:hover { background: var(--chibi-surface); } .chibi-specs--accordion .chibi-specs__group-title { margin: 0; } .chibi-specs__chevron { width: 10px; height: 10px; border-right: 1.5px solid var(--chibi-muted); border-bottom: 1.5px solid var(--chibi-muted); transform: rotate(45deg); transition: transform 0.35s var(--chibi-ease); flex: 0 0 auto; margin-left: 16px; } .chibi-specs__group.is-open .chibi-specs__chevron { transform: rotate(-135deg); } .chibi-specs--accordion .chibi-specs__panel { padding: 0 22px 8px; } /* Lưới thẻ ------------------------------------------------------------- */ .chibi-specs__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1px; background: var(--chibi-line); border: var(--chibi-track); } .chibi-specs__card { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--chibi-white); } .chibi-specs__label { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--chibi-muted); } .chibi-specs__value { font-size: 15px; color: var(--chibi-ink); } .chibi-specs__downloads { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; color: var(--chibi-ink); } @media (max-width: 640px) { .chibi-specs__table th, .chibi-specs__table td { display: block; width: 100%; padding: 8px 14px; border-bottom: 0; } .chibi-specs__table th { padding-top: 14px; } .chibi-specs__table td { padding-bottom: 14px; border-bottom: var(--chibi-track); } } /* ========================================================================== 4. Lưới Không gian / Bộ sưu tập ========================================================================== */ .chibi-collection__track { display: grid; grid-template-columns: repeat(var(--chibi-col, 3), minmax(0, 1fr)); gap: var(--chibi-gap, 24px); } /* Masonry bằng CSS columns: nhẹ hơn mọi thư viện JS và không gây layout shift. */ .chibi-collection--masonry .chibi-collection__track { display: block; column-count: var(--chibi-col, 3); column-gap: var(--chibi-gap, 24px); } .chibi-collection--masonry .chibi-card { break-inside: avoid; margin-bottom: var(--chibi-gap, 24px); display: inline-block; width: 100%; } /* Slider bằng scroll-snap: cuộn tự nhiên trên cảm ứng, không cần thư viện. */ .chibi-collection--slider .chibi-collection__viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; margin-inline: calc(var(--chibi-gap, 24px) * -0.5); padding-inline: calc(var(--chibi-gap, 24px) * 0.5); } .chibi-collection--slider .chibi-collection__viewport::-webkit-scrollbar { display: none; } .chibi-collection--slider .chibi-collection__track { display: flex; grid-template-columns: none; } .chibi-collection--slider .chibi-card { flex: 0 0 calc((100% - (var(--chibi-col, 3) - 1) * var(--chibi-gap, 24px)) / var(--chibi-col, 3)); scroll-snap-align: start; } .chibi-collection__nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; } .chibi-collection__arrow { width: 44px; height: 44px; border: var(--chibi-track); background: var(--chibi-white); border-radius: 50%; cursor: pointer; color: var(--chibi-ink); transition: border-color 0.3s var(--chibi-ease), color 0.3s var(--chibi-ease), opacity 0.3s; } .chibi-collection__arrow:hover:not(:disabled) { border-color: var(--chibi-accent); color: var(--chibi-accent); } .chibi-collection__arrow:disabled { opacity: 0.35; cursor: default; } /* Thẻ ------------------------------------------------------------------ */ .chibi-card { position: relative; background: var(--chibi-white); } .chibi-card__link { display: block; color: inherit; text-decoration: none; } .chibi-card__media { position: relative; overflow: hidden; background: var(--chibi-surface-alt); border-radius: var(--chibi-radius); } .chibi-collection--ratio-1-1 .chibi-card__media { aspect-ratio: 1 / 1; } .chibi-collection--ratio-4-5 .chibi-card__media { aspect-ratio: 4 / 5; } .chibi-collection--ratio-3-4 .chibi-card__media { aspect-ratio: 3 / 4; } .chibi-collection--ratio-16-9 .chibi-card__media { aspect-ratio: 16 / 9; } .chibi-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s var(--chibi-ease), opacity 0.5s var(--chibi-ease); } .chibi-collection--ratio-auto .chibi-card__img { height: auto; } .chibi-card__img--hover { position: absolute; inset: 0; opacity: 0; } .chibi-card:hover .chibi-card__img--hover { opacity: 1; } .chibi-collection--hover-zoom .chibi-card:hover .chibi-card__img { transform: scale(1.05); } .chibi-collection--hover-lift .chibi-card { transition: transform 0.5s var(--chibi-ease), box-shadow 0.5s var(--chibi-ease); } .chibi-collection--hover-lift .chibi-card:hover { transform: translateY(-6px); box-shadow: var(--chibi-shadow); } .chibi-collection.has-overlay .chibi-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--chibi-ink-rgb), 0.42), transparent 55%); opacity: 0; transition: opacity 0.5s var(--chibi-ease); pointer-events: none; } .chibi-collection.has-overlay .chibi-card:hover .chibi-card__media::after { opacity: 1; } .chibi-card__placeholder { display: block; width: 100%; height: 100%; min-height: 220px; background: repeating-linear-gradient( 135deg, var(--chibi-surface-alt), var(--chibi-surface-alt) 12px, var(--chibi-surface) 12px, var(--chibi-surface) 24px ); } .chibi-card__badge { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 6px 12px; background: var(--chibi-ink); color: var(--chibi-white); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; } .chibi-card__body { padding: 18px 2px 4px; } .chibi-card__eyebrow { display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: var(--chibi-eyebrow-ls); text-transform: uppercase; color: var(--chibi-accent); } .chibi-card__title { margin: 0 0 8px; font-size: 16px; font-weight: 400; line-height: 1.4; color: var(--chibi-ink); transition: color 0.3s var(--chibi-ease); } .chibi-card:hover .chibi-card__title { color: var(--chibi-accent); } .chibi-card__meta, .chibi-card__excerpt { display: block; font-size: 13px; color: var(--chibi-muted); line-height: 1.6; } .chibi-card__price { display: block; font-size: 15px; color: var(--chibi-ink-soft); } .chibi-card__price del { color: var(--chibi-muted); font-size: 13px; margin-right: 6px; } .chibi-card__price ins { text-decoration: none; color: var(--chibi-accent); } /* ========================================================================== 5. So sánh Trước / Sau ========================================================================== */ .chibi-ba { margin: 0; } .chibi-ba__stage { position: relative; overflow: hidden; border-radius: var(--chibi-radius); background: var(--chibi-surface-alt); touch-action: pan-y; user-select: none; } .chibi-ba--ratio-1-1 .chibi-ba__stage { aspect-ratio: 1 / 1; } .chibi-ba--ratio-3-2 .chibi-ba__stage { aspect-ratio: 3 / 2; } .chibi-ba--ratio-4-3 .chibi-ba__stage { aspect-ratio: 4 / 3; } .chibi-ba--ratio-16-9 .chibi-ba__stage { aspect-ratio: 16 / 9; } .chibi-ba__layer { position: absolute; inset: 0; } .chibi-ba--ratio-auto .chibi-ba__layer--before { position: relative; } .chibi-ba__img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .chibi-ba--ratio-auto .chibi-ba__img { height: auto; } /* Lớp "sau" bị cắt theo biến --chibi-ba-pos do input range điều khiển. */ .chibi-ba--horizontal .chibi-ba__layer--after { clip-path: inset(0 0 0 var(--chibi-ba-pos, 50%)); } .chibi-ba--vertical .chibi-ba__layer--after { clip-path: inset(var(--chibi-ba-pos, 50%) 0 0 0); } .chibi-ba__label { position: absolute; bottom: 18px; padding: 7px 14px; background: rgba(var(--chibi-ink-rgb), 0.72); color: #fff; font-size: 11px; letter-spacing: var(--chibi-eyebrow-ls); text-transform: uppercase; backdrop-filter: blur(6px); border-radius: var(--chibi-radius); } .chibi-ba__label--before { left: 18px; } .chibi-ba__label--after { right: 18px; background: var(--chibi-ba-accent, rgba(var(--chibi-ink-rgb), 0.72)); } .chibi-ba__handle { position: absolute; z-index: 4; pointer-events: none; } .chibi-ba--horizontal .chibi-ba__handle { top: 0; bottom: 0; left: var(--chibi-ba-pos, 50%); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; } .chibi-ba--vertical .chibi-ba__handle { left: 0; right: 0; top: var(--chibi-ba-pos, 50%); transform: translateY(-50%); display: flex; align-items: center; justify-content: center; } .chibi-ba__line { position: absolute; background: var(--chibi-ba-handle, #fff); box-shadow: 0 0 12px rgba(0, 0, 0, 0.28); } .chibi-ba--horizontal .chibi-ba__line { top: 0; bottom: 0; width: 2px; } .chibi-ba--vertical .chibi-ba__line { left: 0; right: 0; height: 2px; } .chibi-ba__grip { position: relative; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--chibi-ba-handle, #fff); color: var(--chibi-ink); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.24); } .chibi-ba--vertical .chibi-ba__grip { transform: rotate(90deg); } /* Range phủ toàn khung, trong suốt — nhận mọi thao tác chuột/chạm/bàn phím. */ .chibi-ba__range { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; appearance: none; background: none; } .chibi-ba--vertical .chibi-ba__range { cursor: ns-resize; } .chibi-ba__range::-webkit-slider-thumb { appearance: none; width: 56px; height: 100%; } .chibi-ba__range:focus-visible ~ .chibi-ba__handle .chibi-ba__grip { outline: 3px solid var(--chibi-accent); outline-offset: 3px; } .chibi-ba__srlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .chibi-ba__caption { margin-top: 14px; font-size: 13.5px; color: var(--chibi-muted); line-height: 1.6; text-align: center; } /* ========================================================================== 6. Bộ lọc AJAX ========================================================================== */ .chibi-filter { position: relative; } .chibi-filter__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 0; border-top: var(--chibi-track); border-bottom: var(--chibi-track); background: var(--chibi-white); } .chibi-filter.is-sticky .chibi-filter__bar { position: sticky; top: 0; z-index: 30; } .chibi-filter__group { position: relative; } .chibi-filter__trigger { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; background: none; border: var(--chibi-track); border-radius: 100px; cursor: pointer; font-size: 13.5px; color: var(--chibi-ink); transition: border-color 0.3s var(--chibi-ease), background-color 0.3s var(--chibi-ease); } .chibi-filter__trigger:hover, .chibi-filter__trigger[aria-expanded="true"] { border-color: var(--chibi-ink); } .chibi-filter__group.has-active .chibi-filter__trigger { background: var(--chibi-ink); border-color: var(--chibi-ink); color: var(--chibi-white); } .chibi-filter__caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.3s var(--chibi-ease); } .chibi-filter__trigger[aria-expanded="true"] .chibi-filter__caret { transform: rotate(-135deg) translateY(-2px); } .chibi-filter__dropdown { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; min-width: 250px; max-height: 320px; overflow-y: auto; padding: 10px; background: var(--chibi-white); border: var(--chibi-track); border-radius: var(--chibi-radius-lg); box-shadow: var(--chibi-shadow); } .chibi-filter__option { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--chibi-radius); cursor: pointer; font-size: 14px; transition: background-color 0.2s var(--chibi-ease); } .chibi-filter__option:hover { background: var(--chibi-surface); } .chibi-filter__option-label { flex: 1; } .chibi-filter__option-count { font-size: 12px; color: var(--chibi-muted); } .chibi-filter__price { display: flex; align-items: center; gap: 8px; padding: 6px; } .chibi-filter__price input { width: 110px; padding: 9px 10px; border: var(--chibi-track); border-radius: var(--chibi-radius); font-size: 14px; } .chibi-filter__search, .chibi-filter__select { padding: 11px 16px; border: var(--chibi-track); border-radius: 100px; font-size: 13.5px; background: var(--chibi-white); color: var(--chibi-ink); } .chibi-filter__group--sort { margin-left: auto; } .chibi-filter__reset { background: none; border: 0; cursor: pointer; font-size: 13px; color: var(--chibi-muted); text-decoration: underline; text-underline-offset: 3px; } .chibi-filter__reset:hover { color: var(--chibi-accent); } .chibi-filter__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .chibi-filter__chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; background: var(--chibi-surface-alt); border-radius: 100px; font-size: 12.5px; color: var(--chibi-ink); border: 0; cursor: pointer; } .chibi-filter__chip::after { content: "×"; font-size: 15px; line-height: 1; color: var(--chibi-muted); } .chibi-filter__chip:hover { background: var(--chibi-line); } .chibi-filter__meta { margin: 18px 0; font-size: 13px; color: var(--chibi-muted); } .chibi-filter__footer { display: flex; justify-content: center; margin-top: 40px; color: var(--chibi-ink); } .chibi-filter__empty { grid-column: 1 / -1; padding: 60px 20px; text-align: center; color: var(--chibi-muted); } .chibi-filter.is-loading .chibi-filter__results { opacity: 0.35; } .chibi-filter__results { transition: opacity 0.3s var(--chibi-ease); } .chibi-filter__loading { position: absolute; inset: auto 0 0; display: flex; justify-content: center; padding: 20px; } .chibi-spinner { width: 26px; height: 26px; border: 2px solid var(--chibi-line); border-top-color: var(--chibi-accent); border-radius: 50%; animation: chibi-spin 0.7s linear infinite; } @keyframes chibi-spin { to { transform: rotate(360deg); } } /* ========================================================================== Trang chi tiết sản phẩm ========================================================================== */ .chibi-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin: 26px 0 0; padding: 22px 0 0; list-style: none; border-top: var(--chibi-track); } .chibi-trust__item { display: flex; align-items: center; gap: 11px; font-size: 13.5px; line-height: 1.45; color: var(--chibi-ink-soft); } .chibi-trust__item .chibi-icon { color: var(--chibi-accent); } .chibi-reallife { margin: clamp(48px, 6vw, 88px) 0; } .chibi-reallife__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .chibi-reallife__item { display: block; overflow: hidden; border-radius: var(--chibi-radius); aspect-ratio: 4 / 3; background: var(--chibi-surface-alt); } .chibi-reallife__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--chibi-ease); } .chibi-reallife__item:hover .chibi-reallife__img { transform: scale(1.05); } .chibi-specs, .chibi-collection, .chibi-highlights, .chibi-ba { margin-block: clamp(32px, 4.5vw, 72px); } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1024px) { /* Chỉ hạ số cột cho GRID. Slider giữ nguyên cơ chế cuộn ngang, masonry có quy tắc riêng bên dưới — bản trước gom chung khiến cả hai đều vỡ ở tablet. */ .chibi-collection--grid .chibi-collection__track { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chibi-collection--masonry .chibi-collection__track { column-count: 2; } /* Slider: thu hẹp bề rộng thẻ để lộ thẻ kế tiếp, gợi ý còn nội dung bên phải */ .chibi-collection--slider .chibi-card { flex-basis: calc(42% - var(--chibi-gap, 24px)); } .chibi-highlights__grid { --chibi-hl-cols: 2; } } @media (max-width: 767px) { .chibi-collection--grid .chibi-collection__track { grid-template-columns: repeat(var(--chibi-col-mobile, 1), minmax(0, 1fr)); } .chibi-collection--masonry .chibi-collection__track { column-count: var(--chibi-col-mobile, 1); } .chibi-collection--slider .chibi-card { flex-basis: calc(85% - var(--chibi-gap, 24px)); } .chibi-highlights__grid { grid-template-columns: repeat(var(--chibi-hl-cols-mobile, 2), minmax(0, 1fr)); } .chibi-filter__group--sort { margin-left: 0; width: 100%; } .chibi-filter__select { width: 100%; } .chibi-filter__dropdown { min-width: min(300px, calc(100vw - 40px)); } .chibi-trust { grid-template-columns: 1fr; } .chibi-collection__nav { justify-content: center; } } /* Tôn trọng lựa chọn giảm chuyển động của người dùng. */ @media (prefers-reduced-motion: reduce) { .chibi-hero--effect-kenburns .chibi-hero__img, .chibi-hero__scroll-line, .chibi-spinner { animation: none; } .chibi-reveal--armed { opacity: 1; transform: none; transition: none; } * { scroll-behavior: auto !important; } } /* ========================================================================== 7. Toggle / Accordion ========================================================================== */ .chibi-toggle__list { display: grid; grid-template-columns: repeat(var(--chibi-toggle-cols, 1), minmax(0, 1fr)); gap: 0; align-items: start; } .chibi-toggle--cols .chibi-toggle__list { gap: 0 32px; } .chibi-toggle__heading { margin: 0; font-size: inherit; font-weight: inherit; } .chibi-toggle__trigger { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; width: 100%; padding: 22px 0; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; color: var(--chibi-ink); transition: color 0.3s var(--chibi-ease); } .chibi-toggle__trigger:hover { color: var(--chibi-accent); } .chibi-toggle__q { font-size: 16px; font-weight: 400; line-height: 1.5; } /* Dấu hiệu đóng/mở --------------------------------------------------- */ .chibi-toggle__mark { position: relative; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; } .chibi-toggle--icon-chevron .chibi-toggle__mark::before { content: ""; position: absolute; top: 2px; left: 3px; width: 10px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.35s var(--chibi-ease); } .chibi-toggle--icon-chevron .is-open .chibi-toggle__mark::before { transform: rotate(-135deg); } .chibi-toggle--icon-plus .chibi-toggle__mark::before, .chibi-toggle--icon-plus .chibi-toggle__mark::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform 0.35s var(--chibi-ease); } .chibi-toggle--icon-plus .chibi-toggle__mark::after { transform: rotate(90deg); } .chibi-toggle--icon-plus .is-open .chibi-toggle__mark::after { transform: rotate(0deg); } /* Panel -------------------------------------------------------------- */ .chibi-toggle__panel { padding-bottom: 22px; } .chibi-toggle__a { max-width: 72ch; color: var(--chibi-muted); font-size: 14.5px; line-height: 1.75; } .chibi-toggle__a p:last-child { margin-bottom: 0; } /* Ba kiểu trình bày --------------------------------------------------- */ .chibi-toggle--minimal .chibi-toggle__item, .chibi-toggle--bordered .chibi-toggle__item { border-bottom: var(--chibi-track); } .chibi-toggle--bordered .chibi-toggle__item:first-child { border-top: var(--chibi-track); } .chibi-toggle--separated .chibi-toggle__item { margin-bottom: 12px; padding: 0 24px; border: var(--chibi-track); border-radius: var(--chibi-radius-lg); background: var(--chibi-white); transition: border-color 0.3s var(--chibi-ease); } .chibi-toggle--separated .chibi-toggle__item.is-open { border-color: var(--chibi-accent); } .chibi-toggle__trigger:focus-visible { outline: 2px solid var(--chibi-accent); outline-offset: 2px; } @media (max-width: 767px) { .chibi-toggle__list { grid-template-columns: 1fr; } } /* ========================================================================== 8. Đánh dấu nội dung còn thiếu Placeholder [[…]] trong nội dung được bọc lại để biên tập viên nhìn thấy ngay chỗ cần điền. Xoá class này khi đã điền xong thông tin thật. ========================================================================== */ .chibi-todo { background: #fff4d6; color: #7a5a00; padding: 1px 7px; border-radius: 3px; border: 1px dashed #d9ab3c; font-size: 0.94em; white-space: nowrap; } /* ========================================================================== 9. Cụm liên hệ nổi (bám theo trang) ========================================================================== */ .chibi-dock { position: fixed; bottom: 22px; z-index: 9990; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .chibi-dock--right { right: 22px; align-items: flex-end; } .chibi-dock--left { left: 22px; align-items: flex-start; } .chibi-dock__btn { pointer-events: auto; position: relative; display: inline-flex; align-items: center; gap: 0; height: 50px; padding: 0; width: 50px; border: 0; border-radius: 100px; background: var(--chibi-ink); color: #fff; cursor: pointer; overflow: hidden; box-shadow: 0 8px 26px -10px rgba(var(--chibi-ink-rgb), 0.55); transition: width 0.42s var(--chibi-ease), background-color 0.32s var(--chibi-ease), gap 0.42s var(--chibi-ease), padding 0.42s var(--chibi-ease), transform 0.32s var(--chibi-ease); text-decoration: none; } .chibi-dock__icon { flex: 0 0 50px; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; } /* Nhãn chỉ hiện khi rê chuột — giữ dock gọn, không che nội dung */ .chibi-dock__label { white-space: nowrap; font-size: 13px; letter-spacing: 0.02em; opacity: 0; transform: translateX(-6px); transition: opacity 0.3s var(--chibi-ease), transform 0.3s var(--chibi-ease); } .chibi-dock__btn:hover, .chibi-dock__btn:focus-visible { width: auto; gap: 2px; padding-right: 20px; background: var(--chibi-accent); color: #fff; transform: translateY(-2px); } .chibi-dock__btn:hover .chibi-dock__label, .chibi-dock__btn:focus-visible .chibi-dock__label { opacity: 1; transform: none; } .chibi-dock__btn:focus-visible { outline: 2px solid var(--chibi-accent-soft); outline-offset: 3px; } .chibi-dock__btn--phone { background: var(--chibi-accent); } .chibi-dock__btn--top { background: var(--chibi-surface-alt); color: var(--chibi-ink); } .chibi-dock__btn--top:hover { background: var(--chibi-ink); color: #fff; } /* Vòng sóng quanh nút gọi — tín hiệu thị giác nhẹ, không nhấp nháy gây khó chịu */ .chibi-dock__btn.has-pulse::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--chibi-accent); animation: chibi-dock-pulse 2.6s var(--chibi-ease) infinite; pointer-events: none; } @keyframes chibi-dock-pulse { 0% { transform: scale(1); opacity: 0.7; } 70% { transform: scale(1.45); opacity: 0; } 100% { transform: scale(1.45); opacity: 0; } } .chibi-dock__btn--top[hidden] { display: none; } @media (max-width: 767px) { .chibi-dock { bottom: 16px; gap: 8px; } .chibi-dock--right { right: 14px; } .chibi-dock--left { left: 14px; } .chibi-dock__btn { width: 46px; height: 46px; } .chibi-dock__icon { flex-basis: 46px; width: 46px; height: 46px; } /* Trên mobile không có hover — luôn thu gọn về dạng icon */ .chibi-dock__label { display: none; } .chibi-dock__btn:hover { width: 46px; padding-right: 0; } } @media (prefers-reduced-motion: reduce) { .chibi-dock__btn.has-pulse::before { animation: none; } } /* ========================================================================== 10. Hệ chữ theo mockup: serif cho tiêu đề, sans cho giao diện ========================================================================== */ :root { --chibi-serif: "Montserrat", "Helvetica Neue", Arial, sans-serif; --chibi-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; } /* Eyebrow vàng in hoa — mô-típ mở đầu mọi section trong mockup */ .chibi-eyebrow { margin: 0 0 14px; font-family: var(--chibi-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--chibi-accent); } .chibi-section-head__title, .chibi-hero__title, .chibi-news__title, .chibi-process__title, .chibi-quote__text, .chibi-card__title { font-family: var(--chibi-serif); font-weight: 300; letter-spacing: 0; } .chibi-section-head__title { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.14; } .chibi-section-head--center { text-align: center; } .chibi-section-head--center .chibi-section-head__sub { margin-inline: auto; } /* Mô-típ: tiêu đề trái, đoạn mô tả phải */ .chibi-section-head--row .chibi-section-head__sub { max-width: 46ch; margin-left: auto; } .chibi-stars { color: var(--chibi-accent); letter-spacing: 0.12em; font-size: 13px; } /* ========================================================================== 11. Hero chia đôi ========================================================================== */ .chibi-hero--split { display: grid; grid-template-columns: 1fr 1fr; min-height: var(--chibi-hero-h, 88vh); background: var(--chibi-hero-bg, var(--chibi-surface)); align-items: stretch; } .chibi-hero--media-left { direction: rtl; } .chibi-hero--media-left > * { direction: ltr; } .chibi-hero__col--text { display: flex; align-items: center; padding: clamp(32px, 5vw, 88px) clamp(24px, 5vw, 80px); } .chibi-hero--split .chibi-hero__content { max-width: 520px; } .chibi-hero--split .chibi-hero__title { font-size: clamp(38px, 4.8vw, 68px); line-height: 1.06; color: var(--chibi-ink); margin-bottom: 22px; } /* Từ được tô nhấn: serif nghiêng, màu đồng */ .chibi-hero__accent { font-style: italic; color: var(--chibi-hero-accent, var(--chibi-accent)); } .chibi-hero--split .chibi-hero__subtitle { margin: 0 0 32px; max-width: 44ch; color: var(--chibi-muted); font-size: 15px; line-height: 1.75; } .chibi-hero--split .chibi-hero__actions { margin-top: 0; } .chibi-hero--split .chibi-hero__actions .chibi-btn--solid { background: var(--chibi-ink); border-color: var(--chibi-ink); color: #fff; } .chibi-hero--split .chibi-hero__actions .chibi-btn--outline { border-color: var(--chibi-line); color: var(--chibi-ink); } .chibi-hero--split .chibi-hero__actions .chibi-btn--outline:hover { background: var(--chibi-ink); border-color: var(--chibi-ink); color: #fff; } /* Social proof */ .chibi-hero__proof { display: flex; gap: 40px; margin-top: 44px; padding-top: 28px; border-top: var(--chibi-track); } .chibi-hero__proof-item { display: flex; flex-direction: column; gap: 5px; } .chibi-hero__proof-num { font-family: var(--chibi-serif); font-size: 22px; color: var(--chibi-ink); } .chibi-hero__proof-label { font-size: 11.5px; line-height: 1.5; color: var(--chibi-muted); } .chibi-hero__proof-label strong { color: var(--chibi-ink); font-weight: 500; } /* Cột ảnh + thẻ nổi */ .chibi-hero__col--media { position: relative; overflow: hidden; } .chibi-hero--split .chibi-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; } .chibi-hero__badge { position: absolute; left: 0; bottom: clamp(24px, 6vw, 72px); transform: translateX(-38%); display: flex; align-items: center; gap: 14px; padding: 16px 22px; background: #fff; box-shadow: 0 20px 50px -24px rgba(var(--chibi-ink-rgb), 0.5); max-width: 290px; } .chibi-hero__badge-icon { color: var(--chibi-accent); display: flex; } .chibi-hero__badge-body { display: flex; flex-direction: column; gap: 3px; } /* Đặt màu TƯỜNG MINH: .chibi-hero gán color:#fff cho biến thể nền ảnh tối, thẻ nổi nằm trên nền trắng nên kế thừa màu đó sẽ thành chữ trắng trên nền trắng. */ .chibi-hero__badge { color: var(--chibi-ink); } .chibi-hero__badge-body strong { font-family: var(--chibi-serif); font-size: 17px; font-weight: 500; color: var(--chibi-ink); } .chibi-hero__badge-body span { font-size: 11.5px; color: var(--chibi-muted); } @media (max-width: 849px) { .chibi-hero--split { grid-template-columns: 1fr; min-height: 0; } /* Ảnh lên trước trên mobile: khách thấy sản phẩm ngay, không phải cuộn */ .chibi-hero__col--media { order: -1; aspect-ratio: 4 / 3; } .chibi-hero--media-left { direction: ltr; } .chibi-hero__badge { transform: none; left: 16px; bottom: 16px; } .chibi-hero__proof { gap: 28px; } } /* ========================================================================== 12. Marquee — dải chữ chạy ngang ========================================================================== */ .chibi-marquee { overflow: hidden; background: var(--chibi-mq-bg, #14110f); color: var(--chibi-mq-color, var(--chibi-surface)); padding: 14px 0; user-select: none; } .chibi-marquee.has-border { border-top: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .chibi-marquee__track { display: flex; width: max-content; animation: chibi-marquee var(--chibi-mq-speed, 38s) linear infinite; } .chibi-marquee--right .chibi-marquee__track { animation-direction: reverse; } .chibi-marquee:hover .chibi-marquee__track { animation-play-state: paused; } .chibi-marquee__group { display: flex; align-items: center; } .chibi-marquee__item, .chibi-marquee__sep { font-size: var(--chibi-mq-size, 12px); letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; padding: 0 22px; } .chibi-marquee__sep { color: var(--chibi-mq-accent, #b08d57); padding: 0; } /* Dịch đúng 50% = đúng một bản sao → vòng lặp không thấy điểm nối */ @keyframes chibi-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .chibi-marquee__track { animation: none; } } /* ========================================================================== 13. Quy trình — timeline ========================================================================== */ .chibi-process__list { position: relative; display: grid; grid-template-columns: repeat(var(--chibi-steps, 5), minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; } /* Đường nối chạy ngang qua tâm các số */ .chibi-process.has-connector .chibi-process__list::before { content: ""; position: absolute; top: 26px; left: 10%; right: 10%; height: 1px; background: var(--chibi-line); } .chibi-process__step { position: relative; text-align: center; padding: 0 8px; } .chibi-process__num { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 18px; border: 1px solid var(--chibi-line); border-radius: 50%; background: var(--chibi-white); font-family: var(--chibi-serif); font-size: 15px; color: var(--chibi-accent); transition: border-color 0.35s var(--chibi-ease), background-color 0.35s var(--chibi-ease), color 0.35s var(--chibi-ease); } .chibi-process__step:hover .chibi-process__num { background: var(--chibi-accent); border-color: var(--chibi-accent); color: #fff; } .chibi-process__title { margin: 0 0 6px; font-size: 17px; color: var(--chibi-ink); } .chibi-process__desc { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--chibi-muted); } @media (max-width: 849px) { .chibi-process__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; } .chibi-process.has-connector .chibi-process__list::before { display: none; } } /* ========================================================================== 14. Đánh giá khách hàng ========================================================================== */ .chibi-quotes__grid { display: grid; grid-template-columns: repeat(var(--chibi-q-cols, 3), minmax(0, 1fr)); gap: 20px; } .chibi-quote { display: flex; flex-direction: column; justify-content: space-between; gap: 26px; margin: 0; padding: 32px 28px; background: var(--chibi-white); border: var(--chibi-track); transition: border-color 0.35s var(--chibi-ease); } .chibi-quote:hover { border-color: var(--chibi-accent); } .chibi-quote__text { margin: 0; border: 0; padding: 0; font-size: 17px; line-height: 1.6; color: var(--chibi-ink); font-style: italic; } .chibi-quote__meta { display: flex; align-items: center; gap: 12px; } .chibi-quote__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .chibi-quote__avatar--initial { display: flex; align-items: center; justify-content: center; background: var(--chibi-surface-alt); color: var(--chibi-accent); font-family: var(--chibi-serif); font-size: 18px; } .chibi-quote__who { display: flex; flex-direction: column; line-height: 1.4; } .chibi-quote__who strong { font-size: 13.5px; font-weight: 500; } .chibi-quote__who span { font-size: 11.5px; color: var(--chibi-muted); } .chibi-quote__source { margin-left: auto; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--chibi-muted); } .chibi-quotes__score { display: flex; flex-direction: column; gap: 4px; text-align: right; } .chibi-quotes__score-text { font-size: 12px; color: var(--chibi-muted); } .chibi-quotes__score-text strong { color: var(--chibi-ink); } @media (max-width: 849px) { .chibi-quotes__grid { grid-template-columns: 1fr; } .chibi-quotes__score { text-align: left; } } /* ========================================================================== 15. Newsletter ========================================================================== */ .chibi-news { padding: clamp(56px, 8vw, 104px) 24px; background: var(--chibi-surface); } .chibi-news--dark { background: var(--chibi-ink); color: var(--chibi-surface); } .chibi-news__inner { max-width: 620px; margin: 0 auto; } .chibi-news--align-center .chibi-news__inner { text-align: center; } .chibi-news__title { margin: 0 0 14px; font-size: clamp(26px, 3vw, 40px); line-height: 1.16; color: inherit; } .chibi-news__sub { margin: 0 0 32px; font-size: 14px; line-height: 1.7; opacity: 0.72; } /* Input kiểu gạch chân, không khung — theo mockup */ .chibi-news__fallback { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid rgba(var(--chibi-surface-rgb), 0.28); color: inherit; text-decoration: none; transition: border-color 0.3s var(--chibi-ease); } .chibi-news:not(.chibi-news--dark) .chibi-news__fallback { border-bottom-color: var(--chibi-line); } .chibi-news__fallback:hover { border-bottom-color: var(--chibi-accent); } .chibi-news__fallback > span:first-child { font-size: 14px; opacity: 0.6; } .chibi-news__cta { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--chibi-accent); white-space: nowrap; } .chibi-news--dark .chibi-news__form input[type="email"] { background: transparent; border: 0; border-bottom: 1px solid rgba(var(--chibi-surface-rgb), 0.28); /* Trước đây viết cứng #faf8f5 — màu nền của bảng gold, lệch tông trên bảng brand. */ color: var(--chibi-surface); border-radius: 0; padding: 12px 0; } /* ========================================================================== 16. Thẻ có chữ đè lên ảnh (danh mục / không gian / dự án) Dùng bằng cách thêm class="chibi-collection--overlay" vào shortcode. ========================================================================== */ .chibi-collection--overlay .chibi-card { position: relative; } /** * Lớp phủ dưới chữ. * * ĐO ĐƯỢC, không ước lượng: chữ trắng trên ảnh trắng tinh, phủ lớp mực độ mờ a * a = 0.12 → 1.26:1 (bản cũ ở vùng giữa — không đọc được) * a = 0.50 → 3.10:1 (chỉ đủ cho chữ ≥ 24px) * a = 0.63 → 4.50:1 (ngưỡng cho chữ thường) * a = 0.78 → 7.5:1 * * Ảnh trong lưới này phần lớn là phòng tắm sáng, tường trắng và đá marble — tức * gần với trường hợp xấu nhất. Nên đáy để 0.78 và giữ ≥ 0.66 tới mốc 42%, là * vùng chứa toàn bộ chữ. Phía trên vẫn trong suốt để ảnh không bị xỉn. */ .chibi-collection--overlay .chibi-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba(var(--chibi-ink-rgb), 0.78) 0%, rgba(var(--chibi-ink-rgb), 0.66) 42%, rgba(var(--chibi-ink-rgb), 0.22) 68%, transparent 100% ); opacity: 1; transition: opacity 0.5s var(--chibi-ease); } .chibi-collection--overlay .chibi-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 24px 22px; color: var(--chibi-white); } .chibi-collection--overlay .chibi-card__title { font-family: var(--chibi-serif); font-size: 21px; color: #fff; margin-bottom: 4px; } .chibi-collection--overlay .chibi-card:hover .chibi-card__title { color: #fff; } .chibi-collection--overlay .chibi-card__meta, .chibi-collection--overlay .chibi-card__excerpt { color: rgba(255, 255, 255, 0.78); font-size: 12px; } .chibi-collection--overlay .chibi-card__eyebrow { color: var(--chibi-accent-soft); } /* ========================================================================== 17. Sửa lỗi làm ảnh tràn khung mặc định là display:inline và cao theo nội dung. Khi bên trong đặt height:100%, trình duyệt không có mốc để tính nên bỏ qua — ảnh render ở kích thước gốc và phá vỡ toàn bộ khung. Phải cho picture chiếm đúng khung cha. ========================================================================== */ .chibi-card picture, .chibi-ba picture, .chibi-reallife picture { display: block; width: 100%; height: 100%; } /* Cột ảnh của hero chia đôi: đưa ảnh RA KHỎI LUỒNG bằng position absolute. Nếu để ảnh trong luồng thì chiều cao cột phụ thuộc ảnh, mà ảnh lại đặt height:100% phụ thuộc cột — vòng tròn không giải được, trình duyệt bỏ qua height và render ảnh ở kích thước gốc, phá vỡ toàn bộ hero. Absolute cắt đứt vòng phụ thuộc: chiều cao cột do min-height và cột chữ quyết định. */ .chibi-hero__col--media { position: relative; /* KHÔNG cắt ở đây: thẻ nổi cố ý tràn sang cột chữ (translateX âm). Cắt ảnh ở lớp picture bên trong thay vì cắt cả cột. */ overflow: visible; min-height: inherit; } .chibi-hero__col--media picture { overflow: hidden; } .chibi-hero__col--media picture { position: absolute; inset: 0; display: block; } .chibi-hero__col--media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ========================================================================== 18. Khối liên hệ đặt hàng trên trang sản phẩm ========================================================================== */ .chibi-order { margin: 18px 0 6px; } /* Nút gọi: nổi bật ngang hàng với nút mua, nhưng dùng viền thay vì nền đặc để không tranh chấp thứ bậc thị giác với "Thêm vào giỏ hàng". */ .chibi-order__call { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border: 1px solid var(--chibi-accent); border-radius: var(--chibi-radius); background: color-mix(in srgb, var(--chibi-accent) 7%, transparent); color: var(--chibi-ink); text-decoration: none; transition: background-color 0.3s var(--chibi-ease); } .chibi-order__call:hover { background: color-mix(in srgb, var(--chibi-accent) 14%, transparent); } .chibi-order__call .chibi-icon { color: var(--chibi-accent); } .chibi-order__call-body { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; } .chibi-order__call-body strong { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--chibi-muted); } .chibi-order__phone { font-family: var(--chibi-serif); font-size: 25px; font-weight: 500; color: var(--chibi-ink); letter-spacing: 0.01em; } .chibi-order__row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .chibi-order__row .chibi-btn { flex: 1 1 auto; justify-content: center; } .chibi-order__note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--chibi-muted); } /* Bỏ khoảng trống thừa mà WooCommerce/Flatsome chèn giữa mô tả ngắn và highlights */ .product-info .woocommerce-product-details__short-description { margin-bottom: 4px; } .product-info .chibi-highlights { margin-block: 18px; } .product-info .chibi-highlights .chibi-highlight { gap: 12px; } /* Tooltip chia sẻ của Flatsome đè lên chữ — đẩy lên trên nút */ .social-icons .tooltipster-base, .product-footer .tooltipster-base { pointer-events: none; } /* ========================================================================== 19. Thanh lọc — một hàng gọn, tự xuống dòng khi hẹp Đã thử grid nhưng mọi chip đều là con TRỰC TIẾP của thanh lọc nên mỗi cái rơi vào một hàng riêng. Flex-wrap mới đúng: chip chảy theo hàng, ô sắp xếp đẩy sang phải bằng margin-left:auto. ========================================================================== */ .chibi-filter__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 0; } .chibi-filter__trigger { height: 40px; padding: 0 16px; font-size: 12.5px; letter-spacing: 0.02em; white-space: nowrap; } .chibi-filter__search, .chibi-filter__select { height: 40px; max-width: 100%; font-size: 12.5px; line-height: 40px; } .chibi-filter__search { min-width: 190px; padding: 0 16px; } .chibi-filter__select { padding: 0 38px 0 16px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238a8279' stroke-width='1.5' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; } /* Ô sắp xếp luôn nằm cuối hàng, sát mép phải nhưng không tràn ra ngoài */ .chibi-filter__group--sort { margin-left: auto; flex: 0 0 auto; } .chibi-filter__chips { margin-top: 6px; } .chibi-filter__meta { margin: 14px 0 22px; padding-bottom: 14px; border-bottom: var(--chibi-track); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--chibi-muted); } @media (max-width: 849px) { .chibi-filter__group--sort { margin-left: 0; width: 100%; } .chibi-filter__select { width: 100%; } .chibi-filter__search { min-width: 0; flex: 1 1 100%; } } /* ========================================================================== 20. Thông tin dự án ========================================================================== */ .chibi-project-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; margin: 0 0 clamp(32px, 4vw, 52px); padding: 0; border-top: var(--chibi-track); border-left: var(--chibi-track); } .chibi-project-meta__row { padding: 18px 20px; border-right: var(--chibi-track); border-bottom: var(--chibi-track); } /* dt/dd phải là block tường minh: trong một số trình duyệt chúng nằm cùng dòng khi đặt trong div, khiến nhãn dính liền giá trị ("QUY MÔ12 SẢN PHẨM"). */ .chibi-project-meta dt, .chibi-project-meta dd { display: block; width: 100%; } .chibi-project-meta dt { margin: 0 0 5px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--chibi-muted); } .chibi-project-meta dd { margin: 0; font-family: var(--chibi-serif); font-size: 18px; line-height: 1.35; color: var(--chibi-ink); } .chibi-project-products { margin-top: clamp(40px, 5vw, 72px); } .chibi-card--project .chibi-card__title { font-family: var(--chibi-serif); font-size: 20px; } /* ========================================================================== 16. Tiện ích tỉ lệ khung ảnh dùng chung -------------------------------------------------------------------------- Các element mới (showroom, video, tab sản phẩm) đều cần khoá tỉ lệ khung ảnh. Đặt thành lớp tiện ích thay vì lặp lại `--ratio-` cho từng element như .chibi-collection: một bộ giá trị, mọi element dùng chung. ========================================================================== */ .chibi-ratio--1-1 .chibi-card__media, .chibi-ratio--1-1 .chibi-showroom__media, .chibi-ratio--1-1 .chibi-video__media { aspect-ratio: 1 / 1; } .chibi-ratio--4-5 .chibi-card__media, .chibi-ratio--4-5 .chibi-showroom__media, .chibi-ratio--4-5 .chibi-video__media { aspect-ratio: 4 / 5; } .chibi-ratio--3-4 .chibi-card__media, .chibi-ratio--3-4 .chibi-showroom__media, .chibi-ratio--3-4 .chibi-video__media { aspect-ratio: 3 / 4; } .chibi-ratio--4-3 .chibi-card__media, .chibi-ratio--4-3 .chibi-showroom__media, .chibi-ratio--4-3 .chibi-video__media { aspect-ratio: 4 / 3; } .chibi-ratio--16-9 .chibi-card__media, .chibi-ratio--16-9 .chibi-showroom__media, .chibi-ratio--16-9 .chibi-video__media { aspect-ratio: 16 / 9; } /* ========================================================================== 17. Bổ sung cho thẻ sản phẩm: nhãn giảm giá và chip kích thước ========================================================================== */ /* Nhãn "-24%" dùng màu đồng thay vì màu mực của nhãn chữ: con số phần trăm là thông tin khách chủ động tìm, đáng được nổi hơn một nhãn trang trí. */ .chibi-card__badge--sale { background: var(--chibi-accent); font-family: var(--chibi-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: none; font-variant-numeric: tabular-nums; } .chibi-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; } .chibi-card__chip { display: inline-block; padding: 3px 9px; border: 1px solid var(--chibi-line); border-radius: var(--chibi-radius); font-family: var(--chibi-sans); font-size: 11.5px; line-height: 1.5; color: var(--chibi-muted); white-space: nowrap; font-variant-numeric: tabular-nums; transition: border-color 0.3s var(--chibi-ease), color 0.3s var(--chibi-ease); } .chibi-card:hover .chibi-card__chip { border-color: var(--chibi-accent); color: var(--chibi-ink-soft); } /* ========================================================================== 18. [chibi_search] — ô tìm kiếm + chip từ khoá ========================================================================== */ .chibi-search__inner { max-width: 720px; margin-inline: auto; } .chibi-search--wide .chibi-search__inner { max-width: 960px; } .chibi-search--align-center { text-align: center; } .chibi-search--align-left .chibi-search__inner { margin-left: 0; } .chibi-search__head { margin-bottom: clamp(20px, 2.4vw, 32px); } .chibi-search__title { margin: 0 0 12px; font-family: var(--chibi-serif); font-size: clamp(26px, 3vw, 40px); font-weight: 300; line-height: 1.15; color: var(--chibi-ink); } .chibi-search__sub { margin: 0; font-size: 15px; line-height: 1.7; color: var(--chibi-muted); } /* Khung tìm kiếm: một đường kẻ dưới thay vì hộp bo tròn — cùng ngôn ngữ với input của khối newsletter, giữ cảm giác "kẻ mảnh" của toàn site. */ .chibi-search__form { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 14px; background: var(--chibi-white); border: 1px solid var(--chibi-line); border-radius: var(--chibi-radius); transition: border-color 0.3s var(--chibi-ease), box-shadow 0.3s var(--chibi-ease); } .chibi-search__form:focus-within { border-color: var(--chibi-accent); box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.12); } .chibi-search__icon { display: flex; flex: 0 0 auto; color: var(--chibi-muted); } /** * Ô nhập: cố ý viết thành `.chibi-search__form .chibi-search__input` thay vì * một class đơn. * * Lý do là thứ tự nạp CSS. chibi-elements.css được enqueue TRƯỚC flatsome.css, * nên khi độ ưu tiên bằng nhau thì Flatsome thắng. Flatsome đặt style cho * `input[type=search]` (độ ưu tiên 0,1,1) gồm border 1px, box-shadow inset, * height cố định và padding ngang — tất cả đều thắng một class đơn (0,1,0), làm * ô nhập mọc thêm khung bên trong khung của form. * * Hai class lồng nhau cho 0,2,0 nên thắng chắc, và vẫn không cần !important — * để CSS tuỳ biến trong Tuỳ biến của Flatsome còn ghi đè được khi cần. */ .chibi-search__form .chibi-search__input { flex: 1 1 auto; width: auto; min-width: 0; height: auto; margin: 0; padding: 12px 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-family: var(--chibi-sans); font-size: 15px; line-height: 1.4; color: var(--chibi-ink); text-align: left; transition: none; } /* Flatsome cũng đặt riêng `input[type=search]:focus` (0,2,1) với box-shadow xám. Ba class ở đây cho 0,3,0 — thắng nhờ số class cao hơn. */ .chibi-search__form .chibi-search__input:focus, .chibi-search__form .chibi-search__input:focus-visible { outline: none; border: 0; box-shadow: none; background: none; color: var(--chibi-ink); } .chibi-search__form .chibi-search__input::placeholder { color: var(--chibi-muted); } /* Xoá nút "x" mặc định của WebKit: nó vẽ theo style hệ điều hành, phá tổng thể. */ .chibi-search__form .chibi-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .chibi-search__btn { flex: 0 0 auto; margin: 0; padding: 13px 26px; border: 0; border-radius: var(--chibi-radius); background: var(--chibi-ink); color: var(--chibi-white); font-family: var(--chibi-sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; cursor: pointer; transition: background 0.3s var(--chibi-ease); } .chibi-search__btn:hover { background: var(--chibi-accent); } .chibi-search__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; } .chibi-search--align-center .chibi-search__chips { justify-content: center; } .chibi-search__chips-label { font-family: var(--chibi-sans); font-size: 11px; font-weight: 500; letter-spacing: var(--chibi-eyebrow-ls); text-transform: uppercase; color: var(--chibi-muted); margin-right: 4px; } .chibi-search__chip { display: inline-block; padding: 7px 14px; border: 1px solid var(--chibi-line); border-radius: 100px; background: var(--chibi-white); font-family: var(--chibi-sans); font-size: 13px; line-height: 1.4; color: var(--chibi-ink-soft); transition: border-color 0.3s var(--chibi-ease), color 0.3s var(--chibi-ease), background 0.3s var(--chibi-ease); } .chibi-search__chip:hover { border-color: var(--chibi-accent); background: var(--chibi-accent); color: var(--chibi-white); } /* ========================================================================== 19. [chibi_trust_bar] — dải cam kết gọn ========================================================================== */ .chibi-trustbar { background: var(--chibi-tb-bg, transparent); } .chibi-trustbar.has-border { border-top: var(--chibi-track); border-bottom: var(--chibi-track); } .chibi-trustbar__list { display: grid; grid-template-columns: repeat(var(--chibi-tb-cols, 4), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } .chibi-trustbar__item { display: flex; align-items: center; gap: 14px; margin: 0; padding: clamp(20px, 2.4vw, 30px) clamp(14px, 2vw, 28px); list-style: none; } .chibi-trustbar--align-center .chibi-trustbar__item { flex-direction: column; text-align: center; gap: 10px; } /* Đường kẻ dọc chỉ đặt ở phần tử sau, không đặt ở phần tử cuối — dùng :not(:first-child) thay vì border-right + :last-child để lưới nhiều dòng trên mobile không sinh ra kẻ lơ lửng ở cuối mỗi dòng. */ .chibi-trustbar.has-divider .chibi-trustbar__item:not(:first-child) { border-left: var(--chibi-track); } .chibi-trustbar__icon { display: flex; flex: 0 0 auto; color: var(--chibi-accent); } .chibi-trustbar__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .chibi-trustbar__title { font-family: var(--chibi-sans); font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--chibi-ink); } .chibi-trustbar__desc { font-family: var(--chibi-sans); font-size: 12.5px; line-height: 1.5; color: var(--chibi-muted); } .chibi-trustbar.is-compact .chibi-trustbar__item { padding-block: clamp(16px, 1.8vw, 22px); } /* ========================================================================== 20. [chibi_stats] — dãy số liệu ========================================================================== */ .chibi-stats--dark { background: var(--chibi-ink); color: var(--chibi-surface); padding: clamp(48px, 6vw, 88px) clamp(20px, 4vw, 60px); } .chibi-stats__list { display: grid; grid-template-columns: repeat(var(--chibi-st-cols, 4), minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); margin: 0; padding: 0; } .chibi-stats--align-center .chibi-stats__item { text-align: center; } .chibi-stats.has-divider .chibi-stats__item:not(:first-child) { border-left: var(--chibi-track); padding-left: clamp(20px, 2.5vw, 40px); } .chibi-stats--dark.has-divider .chibi-stats__item:not(:first-child) { border-left-color: rgba(var(--chibi-surface-rgb), 0.16); } .chibi-stats__value { display: flex; align-items: baseline; gap: 2px; margin: 0 0 8px; font-family: var(--chibi-serif); font-size: clamp(34px, 4.4vw, 60px); font-weight: 300; line-height: 1; color: var(--chibi-ink); /* tabular-nums: giữ bề rộng chữ số cố định để số không "nhảy" khi đếm tăng */ font-variant-numeric: tabular-nums; } .chibi-stats--align-center .chibi-stats__value { justify-content: center; } .chibi-stats--dark .chibi-stats__value { color: var(--chibi-surface); } .chibi-stats__suffix { font-size: 0.5em; color: var(--chibi-accent); } .chibi-stats__label { margin: 0; font-family: var(--chibi-sans); font-size: 13px; line-height: 1.6; color: var(--chibi-muted); } .chibi-stats--dark .chibi-stats__label { color: rgba(var(--chibi-surface-rgb), 0.66); } /* ========================================================================== 21. [chibi_showroom] — mạng lưới showroom ========================================================================== */ .chibi-showroom__group { margin: clamp(32px, 4vw, 52px) 0 20px; padding-bottom: 12px; border-bottom: var(--chibi-track); font-family: var(--chibi-sans); font-size: 11.5px; font-weight: 500; letter-spacing: var(--chibi-eyebrow-ls); text-transform: uppercase; color: var(--chibi-accent); } .chibi-showroom__group:first-of-type { margin-top: 0; } .chibi-showroom__grid { display: grid; grid-template-columns: repeat(var(--chibi-sr-cols, 3), minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; } .chibi-showroom__item { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; background: var(--chibi-white); border: var(--chibi-track); border-radius: var(--chibi-radius); overflow: hidden; transition: border-color 0.4s var(--chibi-ease), box-shadow 0.4s var(--chibi-ease), transform 0.4s var(--chibi-ease); } .chibi-showroom__item:hover { border-color: var(--chibi-accent); box-shadow: var(--chibi-shadow); transform: translateY(-3px); } .chibi-showroom__media { position: relative; overflow: hidden; background: var(--chibi-surface-alt); aspect-ratio: 4 / 3; } .chibi-showroom__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--chibi-dur) var(--chibi-ease); } .chibi-showroom__item:hover .chibi-showroom__img { transform: scale(1.05); } .chibi-showroom__body { display: flex; flex-direction: column; gap: 9px; padding: clamp(18px, 2vw, 26px); } .chibi-showroom__name { margin: 0 0 4px; font-family: var(--chibi-serif); font-size: 21px; font-weight: 400; line-height: 1.25; color: var(--chibi-ink); } .chibi-showroom__row { display: flex; align-items: flex-start; gap: 9px; margin: 0; font-family: var(--chibi-sans); font-size: 13.5px; line-height: 1.6; color: var(--chibi-ink-soft); } .chibi-showroom__ico { display: flex; flex: 0 0 auto; /* Nhích xuống 3px để icon canh theo dòng chữ đầu, không theo đỉnh hộp */ margin-top: 3px; color: var(--chibi-accent); } .chibi-showroom__tel { color: inherit; border-bottom: 1px solid transparent; font-variant-numeric: tabular-nums; transition: color 0.3s var(--chibi-ease), border-color 0.3s var(--chibi-ease); } .chibi-showroom__tel:hover { color: var(--chibi-accent); border-bottom-color: var(--chibi-accent); } .chibi-showroom__map { display: inline-flex; align-items: center; gap: 6px; /* margin-top:auto đẩy link bản đồ xuống đáy thẻ, để các thẻ có số dòng địa chỉ khác nhau vẫn có link nằm cùng một đường ngang. */ margin-top: auto; padding-top: 6px; font-family: var(--chibi-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--chibi-ink); align-self: flex-start; border-bottom: 1px solid var(--chibi-line); transition: color 0.3s var(--chibi-ease), border-color 0.3s var(--chibi-ease); } .chibi-showroom__map:hover { color: var(--chibi-accent); border-bottom-color: var(--chibi-accent); } .chibi-showroom__map span { transition: transform 0.3s var(--chibi-ease); } .chibi-showroom__map:hover span { transform: translateX(3px); } /* Layout list: bỏ khung thẻ, chỉ còn đường kẻ — dùng cho trang liên hệ nơi danh sách địa chỉ dài và ảnh không thêm thông tin gì. */ .chibi-showroom--list .chibi-showroom__item { border: 0; border-top: var(--chibi-track); border-radius: 0; background: none; } .chibi-showroom--list .chibi-showroom__item:hover { box-shadow: none; transform: none; border-color: var(--chibi-accent); } .chibi-showroom--list .chibi-showroom__body { padding-inline: 0; } /* ========================================================================== 22. [chibi_video] — lưới video dạng facade ========================================================================== */ .chibi-video--dark { background: var(--chibi-ink); color: var(--chibi-surface); padding: clamp(48px, 6vw, 96px) clamp(20px, 4vw, 60px); } .chibi-video--dark .chibi-section-head__title { color: var(--chibi-surface); } .chibi-video--dark .chibi-section-head__sub { color: rgba(var(--chibi-surface-rgb), 0.66); } .chibi-video--dark .chibi-link-arrow { color: var(--chibi-surface); border-color: rgba(var(--chibi-surface-rgb), 0.28); } .chibi-video__grid { display: grid; grid-template-columns: repeat(var(--chibi-vd-cols, 3), minmax(0, 1fr)); gap: var(--chibi-vd-gap, 20px); } /* Layout feature: video đầu tiên chiếm hai cột và hai dòng, thành "video chính". Chỉ áp dụng từ 2 cột trở lên, nếu không ô lớn sẽ chiếm trọn lưới. */ @media (min-width: 850px) { .chibi-video--feature .chibi-video__item:first-child { grid-column: span 2; grid-row: span 2; } } .chibi-video__item { display: flex; flex-direction: column; min-width: 0; } /* Nút bọc toàn bộ ảnh: reset hoàn toàn style button của trình duyệt và của Flatsome (Flatsome đặt background/padding/border cho button ở mức global). */ .chibi-video__play { display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; line-height: 0; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; } .chibi-video__play:hover, .chibi-video__play:focus { background: none; box-shadow: none; } .chibi-video__play:focus-visible { outline: 2px solid var(--chibi-accent); outline-offset: 3px; } .chibi-video__media { position: relative; display: block; overflow: hidden; background: var(--chibi-ink); border-radius: var(--chibi-radius); aspect-ratio: 16 / 9; } .chibi-video__img { width: 100%; height: 100%; object-fit: cover; /* Ảnh hqdefault của YouTube có tỉ lệ 4:3 với hai dải đen trên dưới. scale(1.35) cắt bỏ hai dải đó, để khung 16:9 chỉ còn phần hình thật. */ transform: scale(1.35); transition: transform var(--chibi-dur) var(--chibi-ease), opacity 0.3s var(--chibi-ease); } .chibi-video__play:hover .chibi-video__img { transform: scale(1.42); } .chibi-video__btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; padding-left: 4px; /* bù trọng tâm quang học của tam giác play */ border-radius: 50%; background: rgba(var(--chibi-surface-rgb), 0.92); color: var(--chibi-ink); transition: background 0.35s var(--chibi-ease), color 0.35s var(--chibi-ease), transform 0.35s var(--chibi-ease); } .chibi-video__play:hover .chibi-video__btn { background: var(--chibi-accent); color: var(--chibi-white); transform: translate(-50%, -50%) scale(1.08); } /* Iframe do JS chèn vào sau khi bấm play. */ .chibi-video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; } .chibi-video__body { padding-top: 16px; } .chibi-video__title { margin: 0 0 6px; font-family: var(--chibi-serif); font-size: 19px; font-weight: 400; line-height: 1.3; color: var(--chibi-ink); } .chibi-video--dark .chibi-video__title { color: var(--chibi-surface); } .chibi-video__desc { margin: 0; font-family: var(--chibi-sans); font-size: 13.5px; line-height: 1.6; color: var(--chibi-muted); } /* ========================================================================== 23. [chibi_product_tabs] — dải sản phẩm có tab ========================================================================== */ .chibi-ptabs__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .chibi-ptabs__intro { min-width: 0; } .chibi-ptabs__intro .chibi-section-head__sub { max-width: 52ch; margin: 12px 0 0; } .chibi-ptabs--center .chibi-ptabs__head { flex-direction: column; align-items: center; text-align: center; } .chibi-ptabs__nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--chibi-surface-alt); border-radius: 100px; } .chibi-ptabs__tab { margin: 0; padding: 10px 20px; border: 0; border-radius: 100px; background: none; box-shadow: none; font-family: var(--chibi-sans); font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0.02em; text-transform: none; color: var(--chibi-muted); cursor: pointer; white-space: nowrap; transition: background 0.3s var(--chibi-ease), color 0.3s var(--chibi-ease); -webkit-appearance: none; appearance: none; } .chibi-ptabs__tab:hover { color: var(--chibi-ink); background: none; } .chibi-ptabs__tab.is-active { background: var(--chibi-ink); color: var(--chibi-white); } .chibi-ptabs__tab:focus-visible { outline: 2px solid var(--chibi-accent); outline-offset: 2px; } /* Panel không hoạt động dùng thuộc tính [hidden] của HTML, không dùng class: nhờ vậy khi tắt CSS (hoặc CSS chưa tải) trình duyệt vẫn ẩn đúng, và trình đọc màn hình không đọc nội dung của tab đang đóng. */ .chibi-ptabs__panel[hidden] { display: none; } .chibi-ptabs__grid { display: grid; grid-template-columns: repeat(var(--chibi-pt-cols, 4), minmax(0, 1fr)); gap: var(--chibi-pt-gap, 20px); } .chibi-ptabs__foot { margin-top: clamp(28px, 3.5vw, 48px); text-align: center; } /* ========================================================================== 24. Điểm ngắt cho các element mới ========================================================================== */ @media (max-width: 1024px) { .chibi-trustbar__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Sang lưới hai cột thì kẻ dọc theo :not(:first-child) sẽ vẽ sai ở đầu dòng thứ hai. Khoá lại thành "chỉ cột chẵn có kẻ trái". */ .chibi-trustbar.has-divider .chibi-trustbar__item:not(:first-child) { border-left: 0; } .chibi-trustbar.has-divider .chibi-trustbar__item:nth-child(2n) { border-left: var(--chibi-track); } .chibi-trustbar.has-divider .chibi-trustbar__item:nth-child(n + 3) { border-top: var(--chibi-track); } .chibi-showroom__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chibi-video__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chibi-ptabs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chibi-stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chibi-stats.has-divider .chibi-stats__item:not(:first-child) { border-left: 0; padding-left: 0; } .chibi-stats.has-divider .chibi-stats__item:nth-child(2n) { border-left: var(--chibi-track); padding-left: clamp(20px, 2.5vw, 40px); } } @media (max-width: 720px) { .chibi-search__form { flex-wrap: wrap; padding: 10px 14px; } .chibi-search__input { padding: 8px 0; } /* Nút chiếm hết chiều ngang trên mobile: vùng chạm rộng hơn và không bị bóp thành hai chữ trên hai dòng khi đứng cạnh ô nhập. */ .chibi-search__btn { width: 100%; padding-block: 15px; } .chibi-search__chips-label { width: 100%; margin: 0 0 4px; } .chibi-trustbar__list { grid-template-columns: 1fr; } .chibi-trustbar.has-divider .chibi-trustbar__item:nth-child(2n) { border-left: 0; } .chibi-trustbar.has-divider .chibi-trustbar__item:not(:first-child) { border-top: var(--chibi-track); } .chibi-trustbar--align-center .chibi-trustbar__item { flex-direction: row; text-align: left; } .chibi-showroom__grid { grid-template-columns: 1fr; } .chibi-video__grid { grid-template-columns: 1fr; } .chibi-ptabs__grid { grid-template-columns: repeat(var(--chibi-pt-cols-m, 2), minmax(0, 1fr)); } .chibi-ptabs__head { align-items: flex-start; } /* Thanh tab cuộn ngang thay vì xuống dòng: giữ được cảm giác "một dải" và không đẩy lưới sản phẩm xuống khi có nhiều tab. */ .chibi-ptabs__nav { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .chibi-ptabs__nav::-webkit-scrollbar { display: none; } .chibi-ptabs__tab { padding-inline: 16px; } .chibi-video__btn { width: 52px; height: 52px; } .chibi-stats__list { grid-template-columns: 1fr; } .chibi-stats.has-divider .chibi-stats__item:nth-child(2n) { border-left: 0; padding-left: 0; } .chibi-stats.has-divider .chibi-stats__item:not(:first-child) { border-top: var(--chibi-track); padding-top: 24px; } } /* Tôn trọng lựa chọn giảm chuyển động của hệ điều hành. */ @media (prefers-reduced-motion: reduce) { .chibi-showroom__item, .chibi-showroom__img, .chibi-video__img, .chibi-video__btn, .chibi-card__chip { transition: none; } .chibi-showroom__item:hover { transform: none; } .chibi-video__play:hover .chibi-video__img { transform: scale(1.35); } } /* ========================================================================== 25. Nhãn trạng thái kho ========================================================================== */ .chibi-stock-line { margin: 0 0 14px; } .chibi-stock { display: inline-flex; align-items: center; gap: 7px; font-family: var(--chibi-sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.4; } /* Chấm tròn thay vì icon: ở cỡ 12px một icon nét mảnh biến thành vệt mờ, còn chấm tròn đọc được ngay và mang đúng quy ước "đèn trạng thái". */ .chibi-stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } .chibi-stock--in { color: #4f7a4a; } .chibi-stock--backorder { color: var(--chibi-accent); } .chibi-stock--out { color: var(--chibi-muted); } /* ========================================================================== 26. [chibi_quick_order] — đặt hàng nhanh ========================================================================== */ .chibi-qo { margin: 0 0 18px; } .chibi-qo__trigger { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin: 0; padding: 16px 24px; border: 1px solid var(--chibi-accent); border-radius: var(--chibi-radius); background: var(--chibi-accent); box-shadow: none; color: var(--chibi-white); font-family: var(--chibi-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; cursor: pointer; transition: background 0.3s var(--chibi-ease), border-color 0.3s var(--chibi-ease); -webkit-appearance: none; appearance: none; } .chibi-qo__trigger:hover { background: var(--chibi-ink); border-color: var(--chibi-ink); color: var(--chibi-white); } .chibi-qo__trigger:focus-visible { outline: 2px solid var(--chibi-ink); outline-offset: 3px; } /* Mũi tên đổi hướng khi panel mở — dấu hiệu duy nhất cho biết nút là công tắc đóng/mở chứ không phải link dẫn sang trang khác. */ .chibi-qo__trigger::after { content: "▾"; font-size: 11px; transition: transform 0.3s var(--chibi-ease); } .chibi-qo__trigger[aria-expanded="true"]::after { transform: rotate(180deg); } .chibi-qo__panel[hidden] { display: none; } .chibi-qo--collapse .chibi-qo__panel { margin-top: 14px; padding: clamp(18px, 2vw, 24px); border: var(--chibi-track); border-radius: var(--chibi-radius); background: var(--chibi-surface); } .chibi-qo__title { margin: 0 0 8px; font-family: var(--chibi-serif); font-size: 22px; font-weight: 400; color: var(--chibi-ink); } .chibi-qo__sub { margin: 0 0 16px; font-family: var(--chibi-sans); font-size: 13px; line-height: 1.6; color: var(--chibi-muted); } /* Dòng nhắc sản phẩm ---------------------------------------------------- */ .chibi-qo__product { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: var(--chibi-track); } .chibi-qo__product-img { width: 56px; height: 56px; flex: 0 0 auto; object-fit: cover; border-radius: var(--chibi-radius); background: var(--chibi-surface-alt); } .chibi-qo__product-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .chibi-qo__product-label { font-family: var(--chibi-sans); font-size: 10.5px; font-weight: 500; letter-spacing: var(--chibi-eyebrow-ls); text-transform: uppercase; color: var(--chibi-muted); } .chibi-qo__product-name { font-family: var(--chibi-sans); font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--chibi-ink); } .chibi-qo__product-price { font-family: var(--chibi-sans); font-size: 13px; color: var(--chibi-accent); } .chibi-qo__product-price del { color: var(--chibi-muted); font-size: 12px; margin-right: 5px; } .chibi-qo__product-price ins { text-decoration: none; color: var(--chibi-accent); } /* Form ------------------------------------------------------------------ Ô nhập cần selector lồng hai class vì Flatsome đặt style cho input[type=text]/[type=tel] ở độ ưu tiên 0,1,1 và nạp CSS sau file này. */ .chibi-qo__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .chibi-qo__field { margin: 0 0 12px; } .chibi-qo__field label { display: block; font-family: var(--chibi-sans); font-size: 12.5px; font-weight: 500; color: var(--chibi-ink-soft); } .chibi-qo__form input[type="text"], .chibi-qo__form input[type="tel"], .chibi-qo__form textarea { width: 100%; height: auto; margin: 6px 0 0; padding: 11px 13px; border: 1px solid var(--chibi-line); border-radius: var(--chibi-radius); background: var(--chibi-white); box-shadow: none; font-family: var(--chibi-sans); font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--chibi-ink); transition: border-color 0.3s var(--chibi-ease); } .chibi-qo__form input[type="text"]:focus, .chibi-qo__form input[type="tel"]:focus, .chibi-qo__form textarea:focus { border-color: var(--chibi-accent); box-shadow: none; background: var(--chibi-white); outline: none; } .chibi-qo__form textarea { resize: vertical; min-height: 62px; } .chibi-qo__submit { margin: 4px 0 0; } .chibi-qo__form input[type="submit"] { width: 100%; height: auto; margin: 0; padding: 15px 24px; border: 1px solid var(--chibi-ink); border-radius: var(--chibi-radius); background: var(--chibi-ink); box-shadow: none; color: var(--chibi-white); font-family: var(--chibi-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; cursor: pointer; transition: background 0.3s var(--chibi-ease), border-color 0.3s var(--chibi-ease); } .chibi-qo__form input[type="submit"]:hover { background: var(--chibi-accent); border-color: var(--chibi-accent); /* Flatsome dùng box-shadow inset để làm tối nút khi hover — tắt đi vì ở đây màu hover đã được khai báo tường minh. */ box-shadow: none; color: var(--chibi-white); } .chibi-qo__note { margin: 12px 0 0; font-family: var(--chibi-sans); font-size: 11.5px; line-height: 1.6; color: var(--chibi-muted); } .chibi-form__req { color: #b3261e; } /* Thông báo của CF7: bỏ khung mặc định để khớp ngôn ngữ đường kẻ mảnh. */ .chibi-qo .wpcf7-response-output { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--chibi-line); border-radius: var(--chibi-radius); font-family: var(--chibi-sans); font-size: 13px; line-height: 1.6; } .chibi-qo .wpcf7-not-valid-tip { margin-top: 5px; font-family: var(--chibi-sans); font-size: 11.5px; color: #b3261e; } /* ========================================================================== 27. Thanh mua hàng dính đáy ========================================================================== */ .chibi-stickybuy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 998; /* dưới cụm liên hệ nổi (999) để hai thứ không tranh nhau */ background: var(--chibi-white); border-top: var(--chibi-track); box-shadow: 0 -12px 34px -22px rgba(var(--chibi-ink-rgb), 0.5); transform: translateY(100%); transition: transform 0.4s var(--chibi-ease); } .chibi-stickybuy[hidden] { /* Ghi đè display:none của [hidden] để còn animate được transform. visibility đảm bảo thanh không bắt được chuột khi đang ẩn. */ display: block; visibility: hidden; pointer-events: none; } .chibi-stickybuy.is-visible { visibility: visible; pointer-events: auto; transform: translateY(0); } .chibi-stickybuy__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1200px; margin-inline: auto; padding: 12px clamp(14px, 3vw, 30px); } .chibi-stickybuy__product { display: flex; align-items: center; gap: 12px; min-width: 0; } .chibi-stickybuy__img { width: 48px; height: 48px; flex: 0 0 auto; object-fit: cover; border-radius: var(--chibi-radius); background: var(--chibi-surface-alt); } .chibi-stickybuy__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .chibi-stickybuy__name { font-family: var(--chibi-sans); font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--chibi-ink); /* Tên gương rất dài (có mã, kích thước, chất liệu) — giới hạn một dòng để thanh không cao dần theo độ dài tên sản phẩm. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; } .chibi-stickybuy__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .chibi-stickybuy__price { font-family: var(--chibi-sans); font-size: 14px; font-weight: 500; color: var(--chibi-ink); } .chibi-stickybuy__price del { color: var(--chibi-muted); font-size: 12px; font-weight: 400; margin-right: 5px; } .chibi-stickybuy__price ins { text-decoration: none; color: var(--chibi-accent); } .chibi-stickybuy__off { padding: 2px 7px; border-radius: var(--chibi-radius); background: var(--chibi-accent); color: var(--chibi-white); font-family: var(--chibi-sans); font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; } .chibi-stickybuy__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } /* ========================================================================== 28. [chibi_promo] — dải ưu đãi + đếm ngược ========================================================================== */ .chibi-promo { padding: clamp(44px, 5.5vw, 84px) clamp(20px, 4vw, 60px); background: var(--chibi-surface-alt); } .chibi-promo--dark { background: var(--chibi-ink); color: var(--chibi-surface); } .chibi-promo__inner { max-width: 760px; margin-inline: auto; } .chibi-promo--align-center { text-align: center; } .chibi-promo--align-left .chibi-promo__inner { margin-left: 0; text-align: left; } .chibi-promo__title { margin: 0 0 14px; font-family: var(--chibi-serif); font-size: clamp(28px, 3.6vw, 46px); font-weight: 300; line-height: 1.14; color: var(--chibi-ink); } .chibi-promo--dark .chibi-promo__title { color: var(--chibi-surface); } .chibi-promo__sub { margin: 0 0 8px; font-family: var(--chibi-sans); font-size: 15px; line-height: 1.7; color: var(--chibi-muted); } .chibi-promo--dark .chibi-promo__sub { color: rgba(var(--chibi-surface-rgb), 0.7); } /* Đồng hồ -------------------------------------------------------------- */ .chibi-promo__clock { margin: 28px 0; } .chibi-promo__clock-label { display: block; margin-bottom: 14px; font-family: var(--chibi-sans); font-size: 11px; font-weight: 500; letter-spacing: var(--chibi-eyebrow-ls); text-transform: uppercase; color: var(--chibi-accent); } .chibi-promo__units { display: flex; gap: clamp(8px, 1.4vw, 16px); justify-content: center; } .chibi-promo--align-left .chibi-promo__units { justify-content: flex-start; } .chibi-promo__unit { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 74px; padding: 14px 10px; border: 1px solid var(--chibi-line); border-radius: var(--chibi-radius); } .chibi-promo--dark .chibi-promo__unit { border-color: rgba(var(--chibi-surface-rgb), 0.2); } .chibi-promo__num { font-family: var(--chibi-serif); font-size: clamp(26px, 3vw, 38px); font-weight: 300; line-height: 1; color: var(--chibi-ink); /* tabular-nums: chữ số cùng bề rộng nên ô không co giật mỗi giây */ font-variant-numeric: tabular-nums; } .chibi-promo--dark .chibi-promo__num { color: var(--chibi-surface); } .chibi-promo__unit-label { font-family: var(--chibi-sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--chibi-muted); } .chibi-promo__date { display: block; margin-top: 14px; font-family: var(--chibi-sans); font-size: 12.5px; color: var(--chibi-muted); font-variant-numeric: tabular-nums; } .chibi-promo__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; } .chibi-promo--align-left .chibi-promo__actions { justify-content: flex-start; } .chibi-promo--dark .chibi-btn--outline { color: var(--chibi-surface); border-color: rgba(var(--chibi-surface-rgb), 0.4); } .chibi-promo--dark .chibi-btn--outline:hover { background: var(--chibi-surface); border-color: var(--chibi-surface); color: var(--chibi-ink); } .chibi-promo__note { margin: 22px 0 0; font-family: var(--chibi-sans); font-size: 11.5px; line-height: 1.7; color: var(--chibi-muted); } /* ========================================================================== 29. Điểm ngắt cho các element thương mại ========================================================================== */ @media (max-width: 860px) { /* Ẩn ảnh + tên trên thanh dính đáy: dưới 860px hai nút cần trọn chiều ngang, và khách đang ở giữa trang sản phẩm thì không cần được nhắc đang xem gì. */ .chibi-stickybuy__product { display: none; } .chibi-stickybuy__inner { gap: 10px; padding: 10px 14px; } .chibi-stickybuy__actions { width: 100%; flex: 1 1 auto; } .chibi-stickybuy__actions .chibi-btn { flex: 1 1 0; padding-inline: 12px; text-align: center; } } @media (max-width: 620px) { .chibi-qo__row { grid-template-columns: 1fr; gap: 0; } .chibi-promo__unit { min-width: 0; flex: 1 1 0; padding: 11px 4px; } .chibi-promo__units { gap: 6px; } } @media (prefers-reduced-motion: reduce) { .chibi-stickybuy { transition: none; } .chibi-qo__trigger::after { transition: none; } } /* ========================================================================== Lớp phủ tìm kiếm Bố cục mượn từ mẫu thương mại điện tử Việt: nút kính lúp cạnh giỏ hàng, bấm vào mở toàn màn hình. Màu giữ nguyên bảng của chibidecor. ========================================================================== */ .header-search-chibi > .chibi-search-open { display: flex; align-items: center; justify-content: center; padding: 0 10px; color: inherit; } .header-search-chibi > .chibi-search-open:hover { color: var(--chibi-accent); } /* Khoá cuộn nền khi lớp phủ mở, nếu không trang phía sau vẫn trôi dưới ngón tay. */ html.chibi-search-open { overflow: hidden; } .chibi-search-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 20px 20px; } .chibi-search-overlay[hidden] { display: none; } .chibi-search-overlay__backdrop { position: absolute; inset: 0; background: rgba(var(--chibi-ink-rgb), 0.72); backdrop-filter: blur(3px); } .chibi-search-overlay__panel { position: relative; width: 100%; max-width: 760px; max-height: 84vh; overflow-y: auto; background: var(--chibi-white); border-radius: var(--chibi-radius-lg); box-shadow: 0 40px 90px -30px rgba(var(--chibi-ink-rgb), 0.6); padding: 28px; } .chibi-search-overlay__close { position: absolute; top: 22px; right: 28px; z-index: 2; background: none; border: 0; font-size: 34px; line-height: 1; color: rgba(255, 255, 255, 0.75); cursor: pointer; padding: 4px 10px; transition: color 0.2s var(--chibi-ease); } .chibi-search-overlay__close:hover { color: var(--chibi-white); } .chibi-search-overlay__form { position: relative; display: flex; align-items: center; border-bottom: 2px solid var(--chibi-ink); margin-bottom: 26px; } .chibi-search-overlay__input { flex: 1 1 auto; border: 0 !important; box-shadow: none !important; background: transparent; font-size: 20px; padding: 10px 0; margin: 0; height: auto; color: var(--chibi-ink); } .chibi-search-overlay__input:focus { outline: none; box-shadow: none !important; } .chibi-search-overlay__submit { flex: 0 0 auto; background: none; border: 0; color: var(--chibi-ink); cursor: pointer; padding: 8px; } .chibi-search-overlay__block + .chibi-search-overlay__block { margin-top: 26px; } .chibi-search-overlay__heading { font-size: 12px; letter-spacing: var(--chibi-eyebrow-ls); text-transform: uppercase; color: var(--chibi-muted); margin: 0 0 12px; font-weight: 600; } .chibi-search-overlay__chips { display: flex; flex-wrap: wrap; gap: 8px; } .chibi-search-overlay__chip { display: inline-block; padding: 7px 16px; border: var(--chibi-track); border-radius: 999px; font-size: 14px; color: var(--chibi-ink-soft); background: var(--chibi-surface); transition: all 0.25s var(--chibi-ease); } .chibi-search-overlay__chip:hover { border-color: var(--chibi-accent); color: var(--chibi-accent); background: var(--chibi-white); } /* Kết quả tìm kiếm: 2 cột, ảnh lớn — đây là thứ người dùng chủ động tìm. */ .chibi-search-overlay__results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } /** * Khối "Khách xem nhiều" xếp 4 sản phẩm trên MỘT hàng. * * Để 2 cột như kết quả tìm kiếm thì 4 sản phẩm chiếm 2 hàng và đẩy khối này * tràn khỏi khung — người dùng phải cuộn mới thấy hết gợi ý, trong khi đây chỉ * là nội dung lấp chỗ trước khi họ bắt đầu gõ. Bốn thẻ nhỏ trên một hàng cho * thấy toàn bộ gợi ý ngay, và chừa chỗ cho phần từ khoá phía trên. */ .chibi-search-overlay__block[data-chibi-search-idle] .chibi-search-overlay__results { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } /** * Khoá tỉ lệ ảnh 1:1 cho hàng gợi ý. * * Ảnh sản phẩm có đủ tỉ lệ — gương đứng 600x800, gương ngang 1200x600. Để tự do * thì mỗi thẻ cao một kiểu, phần chữ so le và cả hàng trông như bị lỗi. Khoá vuông * là đủ: đây là ảnh xem trước cỡ nhỏ, người dùng bấm vào mới xem ảnh thật. */ .chibi-search-overlay__block[data-chibi-search-idle] .chibi-card__media { aspect-ratio: 1 / 1; } .chibi-search-overlay__block[data-chibi-search-idle] .chibi-card__img { width: 100%; height: 100%; object-fit: cover; } /* Thẻ hẹp lại thì chữ phải co theo, nếu không tiêu đề dài vỡ thành 4-5 dòng. */ .chibi-search-overlay__block[data-chibi-search-idle] .chibi-card__title { font-size: 14px; line-height: 1.35; } .chibi-search-overlay__block[data-chibi-search-idle] .chibi-card__title { /* Cắt ở 2 dòng: một tên dài 4 dòng sẽ kéo cả hàng cao thêm 40px. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .chibi-search-overlay__block[data-chibi-search-idle] .chibi-card__eyebrow { font-size: 9.5px; } .chibi-search-overlay__block[data-chibi-search-idle] .chibi-card__price, .chibi-search-overlay__block[data-chibi-search-idle] .chibi-card__price * { font-size: 13.5px; } .chibi-search-overlay__more { margin: 16px 0 0; text-align: center; font-size: 14px; } .chibi-search-overlay__more a { color: var(--chibi-accent); border-bottom: 1px solid currentColor; } .chibi-search-overlay__status { margin: 18px 0 0; text-align: center; color: var(--chibi-muted); font-size: 14px; } @media (max-width: 700px) { .chibi-search-overlay { padding: 0; } .chibi-search-overlay__panel { max-width: none; max-height: 100%; height: 100%; border-radius: 0; padding: 20px 16px 90px; } /* Panel chiếm trọn màn hình nên không còn nền tối để chữ trắng nổi lên. */ .chibi-search-overlay__close { top: 10px; right: 10px; color: var(--chibi-muted); } .chibi-search-overlay__close:hover { color: var(--chibi-ink); } /* Đủ chỗ để dấu × nằm hẳn phía trên ô nhập, không kề sát nút kính lúp. */ .chibi-search-overlay__panel { padding-top: 64px; } .chibi-search-overlay__input { font-size: 16px; /* dưới 16px iOS tự phóng to trang khi focus */ } .chibi-search-overlay__results { grid-template-columns: 1fr; } /* 4 cột trên màn 390px thì mỗi thẻ rộng 80px — vẫn giữ một hàng nhưng chỉ 2 cột. */ .chibi-search-overlay__block[data-chibi-search-idle] .chibi-search-overlay__results { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================================== Thanh liên hệ bám đáy (điện thoại) ========================================================================== */ .chibi-mobilebar { display: none; } @media (max-width: 849px) { /* Cột dọc nhường chỗ cho thanh ngang. */ .chibi-dock { display: none !important; } .chibi-mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: flex; background: var(--chibi-white); border-top: var(--chibi-track); /* Chừa vùng thanh home của iPhone, nếu không nhãn bị gạch ngang che mất. */ padding-bottom: env(safe-area-inset-bottom, 0); box-shadow: 0 -6px 24px -14px rgba(var(--chibi-ink-rgb), 0.5); } .chibi-mobilebar__btn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 9px 2px 7px; color: var(--chibi-ink-soft); text-align: center; } .chibi-mobilebar__btn--phone { color: var(--chibi-accent); } .chibi-mobilebar__icon svg { width: 21px; height: 21px; } .chibi-mobilebar__label { font-size: 10.5px; line-height: 1.2; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Thanh đáy che mất phần cuối trang — đẩy nội dung lên đúng chiều cao của nó. */ body { padding-bottom: 62px; } /* Thanh mua nhanh đang hiện thì nhường chỗ cho nó — xem ghi chú trong show(). */ html.chibi-stickybuy-on .chibi-mobilebar { transform: translateY(100%); pointer-events: none; } .chibi-mobilebar { transition: transform 0.35s var(--chibi-ease); } } /* Trên desktop thanh mua nhanh và cột nút dọc không tranh chỗ nhau, nhưng thanh mua nhanh vẫn phải chừa lề phải để không chạy xuống dưới cụm nút. */ @media (min-width: 850px) { .chibi-stickybuy__inner { padding-right: 72px; } } /* ========================================================================== Chân trang ========================================================================== */ .chibi-footer { background: var(--chibi-ink); color: rgba(255, 255, 255, 0.72); padding: 62px 0 0; font-size: 14.5px; } .chibi-footer__inner { max-width: var(--chibi-container, 1230px); margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 46px; } .chibi-footer__logo img { max-width: 168px; height: auto; /* Logo là bản tối trên nền sáng; đảo màu để đọc được trên nền đen. */ filter: brightness(0) invert(1); opacity: 0.92; } .chibi-footer__wordmark { font-family: var(--chibi-font-display); font-size: 26px; color: var(--chibi-white); letter-spacing: 0.04em; } .chibi-footer__about { margin: 16px 0 0; line-height: 1.75; max-width: 40ch; } .chibi-footer__heading { font-size: 12px; letter-spacing: var(--chibi-eyebrow-ls); text-transform: uppercase; color: var(--chibi-white); margin: 0 0 16px; font-weight: 600; } .chibi-footer__links { list-style: none; margin: 0; padding: 0; } .chibi-footer__links li + li { margin-top: 9px; } .chibi-footer__links a, .chibi-footer__contact-row a { color: rgba(255, 255, 255, 0.72); transition: color 0.25s var(--chibi-ease); } .chibi-footer__links a:hover, .chibi-footer__contact-row a:hover { color: var(--chibi-accent-soft); } .chibi-footer__contact-row { margin: 0 0 12px; display: flex; flex-direction: column; gap: 2px; } .chibi-footer__contact-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); } .chibi-footer__phone { font-size: 21px; color: var(--chibi-accent-soft) !important; letter-spacing: 0.02em; } .chibi-footer__showroom { display: block; margin-top: 14px; line-height: 1.6; } .chibi-footer__showroom strong { display: block; color: var(--chibi-white); font-weight: 600; } .chibi-footer__socials { display: flex; gap: 16px; margin-top: 18px; } .chibi-footer__bar { margin-top: 52px; border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 20px; text-align: center; font-size: 13px; color: rgba(255, 255, 255, 0.45); } @media (max-width: 1024px) { .chibi-footer__inner { grid-template-columns: 1fr 1fr; gap: 36px; } } @media (max-width: 600px) { .chibi-footer { padding-top: 44px; } .chibi-footer__inner { grid-template-columns: 1fr; gap: 30px; } } /* ========================================================================== Chi tiết sản phẩm — bổ sung ========================================================================== */ /* Đánh giá + đã bán */ .chibi-proof { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 14px; font-size: 14px; color: var(--chibi-ink-soft); } .chibi-proof__rating { display: inline-flex; align-items: center; gap: 8px; } .chibi-proof__rating > strong { font-size: 17px; color: var(--chibi-ink); } /* Flatsome vẽ sao bằng font icon với width tính theo em — ép về đúng hàng ngang. */ .chibi-proof .star-rating { margin: 0; float: none; font-size: 13px; top: 0; } .chibi-proof__rating a { color: var(--chibi-muted); border-bottom: 1px solid var(--chibi-line); } .chibi-proof__rating a:hover { color: var(--chibi-accent); } .chibi-proof__sold { position: relative; padding-left: 18px; color: var(--chibi-muted); } .chibi-proof__sold::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 14px; margin-top: -7px; background: var(--chibi-line); } /* Dải khuyến mãi */ .chibi-promo-strip { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 11px 16px; background: var(--chibi-surface-alt); border-left: 2px solid var(--chibi-accent); border-radius: var(--chibi-radius); font-size: 14.5px; color: var(--chibi-ink) !important; transition: background 0.25s var(--chibi-ease); } a.chibi-promo-strip:hover { background: var(--chibi-surface); } .chibi-promo-strip__tag { flex: 0 0 auto; font-size: 11px; letter-spacing: var(--chibi-eyebrow-ls); text-transform: uppercase; color: var(--chibi-accent); font-weight: 600; } /* Cam kết dịch vụ khi nằm dưới cột ảnh */ .product-gallery > .chibi-trust, .product-gallery .chibi-trust { margin-top: 22px; padding-top: 20px; border-top: var(--chibi-track); } /* ========================================================================== Popup Maker — chỉnh cho khớp hệ giao diện chibidecor ========================================================================== */ /** * Chặn trần chiều cao popup. * * Popup Maker chỉ bật cuộn nội dung khi chiều cao ĐẶT CỐ ĐỊNH (PUM_Model_Popup * bỏ qua cờ scrollable_content nếu custom_height_auto bật). Chiều cao cố định * lại phí chỗ với form ngắn và vỡ trên màn hình thấp. * * Giới hạn đặt thẳng lên .pum-content chứ KHÔNG dựng flex trên container: * JS của PUM ghi display:block inline lên container và tự đo lại kích thước để * định vị. Ép display:flex (kể cả bằng !important) làm phép đo đó sai và popup * nhảy lung tung. Chặn ở lớp con thì container vẫn là block như PUM mong đợi, * tự co theo nội dung đã bị giới hạn, và nút đóng absolute vẫn dính góc. * * 72px trừ đi là padding trên + dưới (34+34) cộng một chút dự phòng. */ .pum-container.popmake > .pum-content { max-height: calc(88vh - 72px); overflow-y: auto; overscroll-behavior: contain; /* Chừa chỗ cho thanh cuộn để chữ không dính sát mép khi có cuộn. */ padding-right: 6px; } /* Tiêu đề và mô tả trong popup tư vấn */ .chibi-popup__title { margin: 0 0 10px; font-size: 25px; line-height: 1.25; color: var(--chibi-ink); } .chibi-popup__lead { margin: 0 0 22px; color: var(--chibi-ink-soft); line-height: 1.65; } /* Nút đóng: vùng chạm đủ lớn, không đè lên tiêu đề. */ .pum-container.popmake .pum-close { line-height: 1 !important; display: flex; align-items: center; justify-content: center; } @media (max-width: 700px) { /** * Trên điện thoại popup rộng 720px sẽ tràn ngang. PUM đã có * responsive_max_width nhưng nó tính theo % của cửa sổ và vẫn dính sát mép — * ép lại kèm lề hai bên để popup không chạm viền màn hình. */ .pum-container.popmake { width: calc(100vw - 32px) !important; max-width: calc(100vw - 32px) !important; left: 16px !important; right: 16px !important; } .pum-container.popmake > .pum-content { max-height: calc(86vh - 72px); } .chibi-popup__title { font-size: 21px; } } /* ========================================================================== Thẻ sản phẩm ở danh mục — nút đặt hàng + xem nhanh ========================================================================== */ /* Nhãn giảm giá: khối chữ nhật màu phụ, dễ đọc hơn vòng tròn chữ "Sale!". */ .chibi-sale-badge, .badge-inner.on-sale span.onsale { display: inline-block; background: var(--chibi-sale); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; line-height: 1; padding: 6px 9px; border-radius: var(--chibi-radius); white-space: nowrap; } /* Flatsome bọc nhãn trong vòng tròn có nền riêng — gỡ nền đó đi để không thấy hai lớp màu chồng nhau. */ .badge-container .badge-circle .badge-inner, .badge-container .badge .badge-inner { background: transparent !important; border: 0 !important; border-radius: 0 !important; } .badge-container { margin: 10px 0 0 10px; } /* Nút "Đặt hàng ngay" luôn hiện, chiếm trọn bề ngang thẻ. */ .product-small .add-to-cart-button { margin-top: 10px; } .product-small .add-to-cart-button .button { display: block; width: 100%; margin: 0; font-size: 12.5px; letter-spacing: 0.06em; padding: 0 12px; line-height: 40px; min-height: 40px; border-radius: var(--chibi-radius); } /* "Xem nhanh" nổi trên ảnh, trượt vào khi rê chuột. */ .product-small .image-tools .quick-view, .product-small a.quick-view { display: inline-block; background: rgba(255, 255, 255, 0.94); color: var(--chibi-ink); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 9px 18px; border-radius: var(--chibi-radius); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.4); transition: background 0.25s var(--chibi-ease), color 0.25s var(--chibi-ease); } .product-small a.quick-view:hover { background: var(--chibi-accent); color: #fff; } /** * Trên điện thoại bỏ hẳn "Xem nhanh". * * Nó chỉ hiện khi rê chuột — thao tác không tồn tại trên cảm ứng. Để lại thì * hoặc nó không bao giờ xuất hiện, hoặc tệ hơn: xuất hiện khi chạm và nuốt mất * cú chạm đáng lẽ mở trang sản phẩm. */ @media (max-width: 849px) { .product-small .image-tools .quick-view, .product-small a.quick-view { display: none !important; } .product-small .add-to-cart-button .button { font-size: 11.5px; line-height: 36px; min-height: 36px; letter-spacing: 0.04em; } } /* ========================================================================== Tin tức — danh sách và chi tiết ========================================================================== */ /* Thẻ bài viết dạng ngang ở trang danh sách (blog_style = list). */ .blog-archive .box-vertical .box-image { border-radius: var(--chibi-radius); overflow: hidden; } .blog-archive .post-item .box-text { padding-left: 22px; } .blog-archive .post-item .post-title { font-size: 19px; line-height: 1.4; margin-bottom: 6px; } .blog-archive .post-item .from_the_blog_excerpt { color: var(--chibi-ink-soft); font-size: 14.5px; line-height: 1.65; } /* Dòng ngày đăng + thời gian đọc */ .chibi-postmeta { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 26px; padding-bottom: 16px; border-bottom: var(--chibi-track); font-size: 13px; color: var(--chibi-muted); letter-spacing: 0.02em; } .chibi-postmeta__item + .chibi-postmeta__item { position: relative; padding-left: 18px; } .chibi-postmeta__item + .chibi-postmeta__item::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 12px; margin-top: -6px; background: var(--chibi-line); } /* Mục lục */ .chibi-toc { margin: 0 0 32px; padding: 20px 24px; background: var(--chibi-surface); border-left: 3px solid var(--chibi-accent); border-radius: var(--chibi-radius); } .chibi-toc__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; } .chibi-toc__title { font-size: 12px; letter-spacing: var(--chibi-eyebrow-ls); text-transform: uppercase; font-weight: 600; color: var(--chibi-ink); } .chibi-toc__toggle { background: none; border: 0; padding: 2px 4px; font-size: 12.5px; color: var(--chibi-accent); cursor: pointer; text-decoration: underline; } /** * Đánh số bằng bộ đếm CSS, KHÔNG dùng list-style mặc định. * * Danh sách phẳng gồm cả h2 lẫn h3 trong cùng một
    , mà mỗi
  1. đều làm * tăng bộ đếm dựng sẵn. Kết quả: ba mục h2 là 1-2-3, ba mục h3 chen vào chiếm * 4-5-6, rồi mục h2 kế tiếp nhảy lên 7. Hai bộ đếm riêng cho hai cấp giải quyết * việc đó mà không phải lồng
      trong PHP. */ .chibi-toc__list { margin: 0; padding-left: 0; counter-reset: chibi-h2; list-style: none; } .chibi-toc__list[hidden] { display: none; } .chibi-toc__item { position: relative; margin: 0 0 7px; padding-left: 30px; line-height: 1.5; } .chibi-toc__item--h2 { counter-increment: chibi-h2; /* Mỗi mục lớn mở lại bộ đếm con, để a-b-c chạy trong từng mục. */ counter-reset: chibi-h3; } .chibi-toc__item--h2::before { content: counter(chibi-h2) "."; position: absolute; left: 0; top: 0; width: 24px; text-align: right; color: var(--chibi-accent); font-weight: 600; } /* Tiêu đề cấp 3 thụt vào và nhỏ hơn để thấy được thứ bậc. */ .chibi-toc__item--h3 { counter-increment: chibi-h3; margin-left: 26px; font-size: 14px; } .chibi-toc__item--h3::before { content: counter(chibi-h3, lower-alpha) "."; position: absolute; left: 0; top: 0; width: 24px; text-align: right; color: var(--chibi-muted); } .chibi-toc__item a { color: var(--chibi-ink-soft); border-bottom: 1px solid transparent; } .chibi-toc__item a:hover { color: var(--chibi-accent); border-bottom-color: currentColor; } /* Bài liên quan */ .chibi-related { margin-top: 52px; padding-top: 34px; border-top: var(--chibi-track); } .chibi-related__title { font-size: 22px; margin: 0 0 22px; } .chibi-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .chibi-related__card { display: block; color: inherit; } .chibi-related__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--chibi-radius); background: var(--chibi-surface-alt); margin-bottom: 10px; } .chibi-related__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--chibi-ease); } .chibi-related__card:hover .chibi-related__media img { transform: scale(1.05); } .chibi-related__name { display: block; font-size: 15px; line-height: 1.45; margin-bottom: 4px; } .chibi-related__card:hover .chibi-related__name { color: var(--chibi-accent); } .chibi-related__date { display: block; font-size: 12.5px; color: var(--chibi-muted); } @media (max-width: 700px) { .chibi-related__grid { grid-template-columns: 1fr; gap: 18px; } /* Thẻ ngang gãy thành dọc trên điện thoại — bỏ thụt lề bên trái. */ .blog-archive .post-item .box-text { padding-left: 0; padding-top: 12px; } .chibi-toc { padding: 16px 18px; } } /* ========================================================================== Khung giữ chỗ trong UX Builder Chỉ xuất hiện bên trong trình dựng trang, không bao giờ ra trang thật. ========================================================================== */ .chibi-ux-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; /* Đủ cao để bấm trúng và kéo thả được — đây là lý do khung này tồn tại. */ min-height: 120px; padding: 24px; text-align: center; background: repeating-linear-gradient( 45deg, var(--chibi-surface), var(--chibi-surface) 10px, var(--chibi-surface-alt) 10px, var(--chibi-surface-alt) 20px ); border: 1px dashed var(--chibi-line); border-radius: var(--chibi-radius); color: var(--chibi-ink-soft); } .chibi-ux-placeholder__label { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--chibi-ink); } .chibi-ux-placeholder__hint { font-size: 13px; color: var(--chibi-muted); max-width: 46ch; line-height: 1.5; } /** * Chặn chiều cao ảnh đại diện ở trang bài viết. * * Ảnh chụp gương phần lớn là ảnh dọc (960×1280). Ở cột nội dung rộng 860px, ảnh * dọc cao gần 1150px — chiếm trọn màn hình đầu tiên và đẩy mục lục lẫn đoạn mở * bài xuống dưới. Người đến từ Google thấy đúng một tấm ảnh rồi phải cuộn mới * biết bài có nói đúng thứ họ tìm hay không. * * Cắt còn 460px và crop giữa: ảnh vẫn làm nhiệm vụ dẫn nhập, nội dung lên trên. */ .single-post .entry-header .entry-image img, .single-post .post-item .box-image img { max-height: 460px; width: 100%; object-fit: cover; object-position: 50% 42%; } @media (max-width: 700px) { .single-post .entry-header .entry-image img { max-height: 300px; } } /* ========================================================================== Chi tiết sản phẩm — bảng thông số gọn trong cột mua (mẫu enic) ========================================================================== */ .chibi-infotable { width: 100%; margin: 0 0 10px; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; } .chibi-infotable th, .chibi-infotable td { padding: 9px 0; text-align: left; vertical-align: top; border: 0; border-bottom: 1px dashed var(--chibi-line); } .chibi-infotable tr:last-child th, .chibi-infotable tr:last-child td { border-bottom: 0; } /* Cột nhãn cố định để giá trị của mọi dòng thẳng hàng nhau. */ .chibi-infotable th { width: 44%; font-weight: 400; color: var(--chibi-muted); text-transform: none; letter-spacing: normal; padding-right: 14px; } .chibi-infotable td { color: var(--chibi-ink); font-weight: 500; } .chibi-infotable .chibi-spec__yes { color: var(--chibi-accent); font-weight: 600; } .chibi-infotable .chibi-spec__no { color: var(--chibi-muted); } .chibi-infotable__more { display: inline-block; margin-bottom: 20px; font-size: 13px; color: var(--chibi-accent); border-bottom: 1px solid currentColor; } /* Nút đặt hàng dưới ảnh sản phẩm */ .chibi-gallery-cta { margin-top: 18px; } .chibi-gallery-cta .chibi-btn { width: 100%; justify-content: center; } /** * Trên điện thoại hai cột xếp chồng, nên nút dưới ảnh nằm sát ngay trên nút mua * thật — hai nút giống nhau cách nhau 200px là thừa và gây phân vân. */ @media (max-width: 849px) { .chibi-gallery-cta { display: none; } .chibi-infotable { font-size: 14px; } .chibi-infotable th { width: 48%; } } /** * Khối showroom khi nằm trong cột thông tin sản phẩm. * * Cùng shortcode nhưng ngữ cảnh khác hẳn section toàn trang: tiêu đề cỡ h2 và * khoảng đệm rộng làm nó át cả nút mua ngay phía trên. Thu nhỏ về đúng vai trò * một khối phụ trợ cuối cột. */ .chibi-showroom--aside { margin-top: 26px; padding-top: 22px; border-top: var(--chibi-track); } .chibi-showroom--aside .chibi-section-head { margin-bottom: 14px; } .chibi-showroom--aside .chibi-section-head__title { font-size: 13px !important; letter-spacing: var(--chibi-eyebrow-ls); text-transform: uppercase; font-weight: 600; line-height: 1.3; } .chibi-showroom--aside .chibi-showroom__grid { gap: 14px; } .chibi-showroom--aside .chibi-showroom__item { border: var(--chibi-track); border-radius: var(--chibi-radius); padding: 14px 16px; background: var(--chibi-surface); } .chibi-showroom--aside .chibi-showroom__name { font-size: 15px; margin: 0 0 6px; } .chibi-showroom--aside .chibi-showroom__row { font-size: 13.5px; line-height: 1.55; margin: 0 0 4px; } /* Ảnh showroom không cần thiết trong cột hẹp — địa chỉ và số điện thoại là đủ. */ .chibi-showroom--aside .chibi-showroom__media { display: none; } /* ========================================================================== Thư viện ảnh thật (xưởng, thi công, giao hàng) ========================================================================== */ .chibi-photos__grid { display: grid; grid-template-columns: repeat(var(--chibi-photos-cols, 4), minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .chibi-photos__item { margin: 0; } .chibi-photos__link { display: block; color: inherit; } .chibi-photos__media { display: block; overflow: hidden; border-radius: var(--chibi-radius); background: var(--chibi-surface-alt); margin-bottom: 9px; } /** * Khoá tỉ lệ ảnh. * * Ảnh hậu trường chụp bằng điện thoại nên đủ mọi tỉ lệ — dọc 9:16, ngang 4:3, * vuông. Để tự do thì lưới răng cưa, mỗi ô một chiều cao. Khoá tỉ lệ và cắt * giữa: nội dung chính của ảnh công trường gần như luôn nằm ở giữa khung. */ .chibi-ratio--4-3 .chibi-photos__media { aspect-ratio: 4 / 3; } .chibi-ratio--1-1 .chibi-photos__media { aspect-ratio: 1 / 1; } .chibi-ratio--3-4 .chibi-photos__media { aspect-ratio: 3 / 4; } .chibi-ratio--16-9 .chibi-photos__media { aspect-ratio: 16 / 9; } .chibi-photos__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--chibi-ease); } .chibi-photos__link:hover .chibi-photos__img { transform: scale(1.05); } .chibi-photos__caption { display: block; font-size: 13px; line-height: 1.5; color: var(--chibi-muted); } .chibi-photos__link:hover .chibi-photos__caption { color: var(--chibi-ink); } @media (max-width: 1024px) { .chibi-photos__grid { grid-template-columns: repeat(min(var(--chibi-photos-cols, 4), 3), minmax(0, 1fr)); } } @media (max-width: 700px) { .chibi-photos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .chibi-photos__caption { font-size: 12px; } } /* ========================================================================== Khối ưu đãi + cam kết dưới ảnh sản phẩm (mẫu enic) ========================================================================== */ .chibi-offers { margin-top: 18px; border: var(--chibi-track); border-radius: var(--chibi-radius); overflow: hidden; } .chibi-offers__head { margin: 0; padding: 12px 18px; font-size: 12.5px; font-weight: 600; letter-spacing: var(--chibi-eyebrow-ls); text-transform: uppercase; color: var(--chibi-white); background: var(--chibi-accent); } .chibi-offers__list { margin: 0; padding: 14px 18px; list-style: none; background: var(--chibi-surface); border-bottom: var(--chibi-track); } .chibi-offers__item { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 9px; font-size: 14.5px; line-height: 1.5; } .chibi-offers__item:last-child { margin-bottom: 0; } .chibi-offers__item .chibi-icon { flex: 0 0 auto; margin-top: 2px; color: var(--chibi-accent); } .chibi-offers__item a { color: var(--chibi-ink); border-bottom: 1px solid var(--chibi-line); } .chibi-offers__item a:hover { color: var(--chibi-accent); border-bottom-color: currentColor; } /* Nhãn HOT dùng màu phụ, không dùng màu nhấn — nếu cùng màu với tiêu đề khối thì nó chìm vào nền và mất tác dụng đánh dấu. */ .chibi-offers__hot { flex: 0 0 auto; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; line-height: 1; padding: 4px 6px; border-radius: 3px; color: #fff; background: var(--chibi-secondary); } /* Cụm cam kết nằm trong cùng khung, nền trắng để tách khỏi phần ưu đãi. */ .chibi-offers .chibi-trust { margin: 0; padding: 14px 18px; background: var(--chibi-white); border: 0; } @media (max-width: 849px) { .chibi-offers__item { font-size: 14px; } .chibi-offers__head, .chibi-offers__list, .chibi-offers .chibi-trust { padding-left: 14px; padding-right: 14px; } } /* ========================================================================== Mô tả sản phẩm — chia mục có đánh số (mẫu enic) ========================================================================== */ /** * Đánh số bằng bộ đếm CSS, KHÔNG ghi số vào nội dung. * * enic gõ thẳng "1.", "2." vào tiêu đề. Làm vậy thì thêm hoặc đổi thứ tự một * mục là phải đánh số lại thủ công cả bài, và người biên tập sẽ quên. Bộ đếm * CSS tự chạy lại mỗi lần render. */ .woocommerce-Tabs-panel--description, .chibi-product-desc { counter-reset: chibi-sec; } .woocommerce-Tabs-panel--description h3, .chibi-product-desc h3 { counter-increment: chibi-sec; position: relative; margin: 34px 0 14px; padding-left: 42px; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.4; } .woocommerce-Tabs-panel--description h3::before, .chibi-product-desc h3::before { content: counter(chibi-sec); position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: var(--chibi-white); background: var(--chibi-accent); border-radius: 50%; } /* Tiêu đề cấp 2 là tên sản phẩm mở đầu — không đánh số, không thụt lề. */ .woocommerce-Tabs-panel--description h2, .chibi-product-desc h2 { margin: 0 0 16px; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; } .woocommerce-Tabs-panel--description ul, .chibi-product-desc ul { padding-left: 42px; list-style: none; } .woocommerce-Tabs-panel--description ul li, .chibi-product-desc ul li { position: relative; margin-bottom: 9px; line-height: 1.7; } /* Dấu đầu dòng canh thẳng với số của mục — cùng lề trái 42px. */ .woocommerce-Tabs-panel--description ul li::before, .chibi-product-desc ul li::before { content: ""; position: absolute; left: -18px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--chibi-accent); } @media (max-width: 700px) { .woocommerce-Tabs-panel--description h3, .chibi-product-desc h3 { padding-left: 34px; margin-top: 26px; } .woocommerce-Tabs-panel--description h3::before, .chibi-product-desc h3::before { width: 25px; height: 25px; font-size: 12.5px; } .woocommerce-Tabs-panel--description ul, .chibi-product-desc ul { padding-left: 20px; } } /* ========================================================================== Tăng độ đậm chữ & tương phản -------------------------------------------------------------------------- Roboto ở weight 300–400 có nét rất mảnh. Với tiếng Việt điều đó nặng hơn tiếng Anh: các dấu ngã, hỏi, mũ nằm chồng lên nhau ở cỡ nhỏ (ữ, ặ, ỡ), nét mảnh khiến chúng dính vào nhau và mất dấu. Khối này nâng weight ở đúng những chỗ chữ nhỏ hoặc chữ màu mờ. ========================================================================== */ /* Thân bài: 400 → 450 nếu font hỗ trợ biến thiên, không thì trình duyệt lấy 500. */ body, .entry-content p, .content-area p { font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /** * Chữ mờ luôn đậm hơn một bậc so với chữ thường. * * Màu đã nhạt sẵn thì nét cũng mảnh nữa là cộng dồn hai yếu tố làm khó đọc. * Nâng lên 500 bù lại phần tương phản mà màu nhạt lấy đi. */ .chibi-card__meta, .chibi-photos__caption, .chibi-postmeta, .chibi-related__date, .chibi-showroom__row, .chibi-infotable th, .chibi-offers__item, .chibi-trust__item span, .chibi-section-head__sub, .woocommerce-breadcrumb, .product_meta { font-weight: 500; } /* Nhãn chữ hoa nhỏ: chữ hoa vốn khó đọc hơn, cần cả weight lẫn giãn cách. */ .chibi-section-head__eyebrow, .chibi-card__eyebrow, .chibi-offers__head, .chibi-toc__title, .chibi-footer__heading { font-weight: 600; letter-spacing: 0.1em; } /* Tiêu đề thẻ sản phẩm — chữ chính khách quét mắt qua khi chọn hàng. */ .chibi-card__title, .product-small .product-title a, .woocommerce-loop-product__title { font-weight: 500; } /* Giá: đây là con số quyết định, phải nổi nhất trong thẻ. */ .chibi-card__price, .price ins, .price > .amount, .woocommerce-Price-amount { font-weight: 600; } /* Nút: chữ trên nền màu cần dày hơn để không bị nền "ăn" mất nét. */ .chibi-btn, .button, .add-to-cart-button .button, input[type="submit"] { font-weight: 600; } /** * Liên kết trong nội dung dùng biến màu dành cho NỀN SÁNG. * * accent-soft là bản dành cho nền tối; đặt nó lên nền trắng chỉ đạt 3,39:1. */ .entry-content a:not(.button):not(.chibi-btn), .content-area a:not(.button):not(.chibi-btn), .chibi-infotable__more, .chibi-toc__item a:hover { color: var(--chibi-accent-ink); font-weight: 500; } /* Chân trang: nền tối nên chữ phải sáng và dày hơn bản trên nền sáng. */ .chibi-footer a, .chibi-footer__about { font-weight: 400; color: rgba(255, 255, 255, 0.82); } .chibi-footer a:hover { color: var(--chibi-accent-soft); } /** * Nhãn giảm giá và HOT: chữ trắng trên nền cam. * * Cỡ chữ nhỏ (10–12px) cộng nền màu là tổ hợp khó đọc nhất trên trang, nên đẩy * lên 700 — dày hơn hẳn phần còn lại là có chủ ý. */ .chibi-sale-badge, .chibi-offers__hot, .badge-inner.on-sale span.onsale { font-weight: 700; } /* ========================================================================== Nội dung & câu hỏi thường gặp ở trang danh mục -------------------------------------------------------------------------- Đặt trên một tấm nền riêng, tách hẳn khỏi lưới sản phẩm phía trên. Không có ranh giới thị giác thì phần này đọc như đoạn chữ dán thêm vào cuối trang, trong khi nó là nơi trả lời những câu khiến khách còn do dự. ========================================================================== */ .chibi-catcontent { margin: 56px 0 0; padding: 46px 0 50px; background: var(--chibi-surface); /* Kéo tràn ra hai mép cột nội dung để tấm nền chạm viền vùng đọc. */ box-shadow: 0 0 0 100vmax var(--chibi-surface); clip-path: inset(0 -100vmax); } .chibi-catcontent__inner { max-width: 74ch; margin: 0 auto; padding: 0 20px; } .chibi-catcontent__body { color: var(--chibi-ink-soft); line-height: 1.78; } .chibi-catcontent__body > *:first-child { margin-top: 0; } .chibi-catcontent__body > *:last-child { margin-bottom: 0; } /* Đoạn mở đầu to hơn một bậc — dẫn mắt vào bài thay vì bắt đầu bằng chữ đều đều. */ .chibi-catcontent__body > p:first-of-type { font-size: 17px; line-height: 1.7; color: var(--chibi-ink); } .chibi-catcontent__body h2 { position: relative; margin: 0 0 18px; padding-bottom: 14px; color: var(--chibi-ink); font-size: clamp(21px, 2.1vw, 27px); line-height: 1.28; } /* Gạch chân ngắn màu nhấn — mốc thị giác mở đầu, không phải đường kẻ ngang cả dòng. */ .chibi-catcontent__body h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; border-radius: 2px; background: var(--chibi-accent); } .chibi-catcontent__body h3 { margin: 32px 0 12px; color: var(--chibi-ink); font-size: clamp(17px, 1.7vw, 20px); line-height: 1.35; } .chibi-catcontent__body ul { margin: 16px 0; padding: 0; list-style: none; display: grid; gap: 10px; } .chibi-catcontent__body ul li { position: relative; padding-left: 26px; line-height: 1.65; } /* Dấu tích thay cho chấm tròn: các mục ở đây là đặc điểm, không phải liệt kê trung tính. */ .chibi-catcontent__body ul li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 11px; height: 6px; border-left: 2px solid var(--chibi-accent); border-bottom: 2px solid var(--chibi-accent); transform: rotate(-45deg); } .chibi-catcontent__body strong { color: var(--chibi-ink); font-weight: 600; } .chibi-catcontent__body a { color: var(--chibi-accent-ink); font-weight: 500; border-bottom: 1px solid var(--chibi-line); } .chibi-catcontent__body a:hover { border-bottom-color: currentColor; } .chibi-catcontent__heading { margin: 44px 0 18px; color: var(--chibi-ink); font-size: clamp(20px, 2vw, 25px); line-height: 1.3; } /* ── Hỏi đáp ── */ .chibi-catfaq { display: flex; flex-direction: column; gap: 9px; } .chibi-catfaq__item { border: 1px solid var(--chibi-line); border-radius: var(--chibi-radius); background: var(--chibi-white); overflow: hidden; transition: border-color 0.2s var(--chibi-ease), box-shadow 0.2s var(--chibi-ease); } .chibi-catfaq__item:hover { border-color: var(--chibi-accent-soft); } .chibi-catfaq__item[open] { border-color: var(--chibi-accent); box-shadow: 0 6px 18px -12px rgba(var(--chibi-ink-rgb), 0.35); } .chibi-catfaq__q { position: relative; display: block; padding: 16px 50px 16px 20px; font-weight: 600; font-size: 15.5px; line-height: 1.5; color: var(--chibi-ink); cursor: pointer; list-style: none; } .chibi-catfaq__q::-webkit-details-marker { display: none; } .chibi-catfaq__q::marker { content: ""; } /* Dấu cộng thành dấu trừ khi mở — rõ nghĩa hơn mũi tên xoay. */ .chibi-catfaq__q::before, .chibi-catfaq__q::after { content: ""; position: absolute; right: 20px; top: 50%; background: var(--chibi-accent); border-radius: 1px; transition: transform 0.25s var(--chibi-ease), opacity 0.25s var(--chibi-ease); } .chibi-catfaq__q::before { width: 13px; height: 2px; margin-top: -1px; } .chibi-catfaq__q::after { width: 2px; height: 13px; margin-top: -7px; right: 25.5px; } .chibi-catfaq__item[open] .chibi-catfaq__q::after { transform: rotate(90deg); opacity: 0; } .chibi-catfaq__q:hover { background: var(--chibi-surface); } .chibi-catfaq__q:focus-visible { outline: 2px solid var(--chibi-accent); outline-offset: -2px; } .chibi-catfaq__a { padding: 0 20px 18px; color: var(--chibi-ink-soft); line-height: 1.72; } .chibi-catfaq__a > *:last-child { margin-bottom: 0; } .chibi-catfaq__a a { color: var(--chibi-accent-ink); font-weight: 500; border-bottom: 1px solid var(--chibi-line); } @media (max-width: 700px) { .chibi-catcontent { margin-top: 40px; padding: 32px 0 36px; } .chibi-catcontent__inner { padding: 0 16px; } .chibi-catcontent__body > p:first-of-type { font-size: 16px; } .chibi-catfaq__q { padding: 14px 44px 14px 16px; font-size: 15px; } .chibi-catfaq__a { padding: 0 16px 15px; } } /* Icon trong thanh thông báo đầu trang */ .chibi-announce__item { display: inline-flex; align-items: center; gap: 7px; } .chibi-announce__icon { display: inline-flex; flex: 0 0 auto; /* Lệch 1px lên để tâm quang học của icon thẳng hàng với chân chữ. */ transform: translateY(-1px); opacity: 0.85; } .chibi-announce__icon .chibi-icon { display: block; } @media (max-width: 849px) { /* Màn hẹp chỉ giữ thông điệp đầu — icon đi kèm nên vẫn cân đối. */ .chibi-announce__icon { transform: none; } } /* ========================================================================== Tiêu đề trang (H1) -------------------------------------------------------------------------- Từ 10/09/2026 mọi trang tĩnh đều in H1 qua theme_mod default_title của Flatsome, và trang Tin tức in H1 riêng qua hook flatsome_before_blog. Hai chỗ đó dùng chung một hình thức để tiêu đề trang nhìn giống nhau ở khắp site. Flatsome gắn sẵn class .uppercase vào .entry-title. Tiếng Việt viết hoa toàn bộ làm mất dấu phụ về mặt thị giác và khó đọc hơn hẳn tiếng Anh, nên ghi đè text-transform về none. ========================================================================== */ .page-wrapper .entry-header, .chibi-archive-head { margin: 0 0 28px; padding-block: clamp(20px, 3vw, 34px) 0; } .chibi-archive-head { padding-top: clamp(28px, 4vw, 48px); } .page-wrapper .entry-title, .chibi-archive-head__title { margin: 0; font-size: clamp(26px, 3vw, 42px); font-weight: 600; line-height: 1.16; letter-spacing: -0.015em; color: var(--chibi-ink); text-transform: none; } .chibi-archive-head__sub { margin: 12px 0 0; max-width: 62ch; color: var(--chibi-muted); font-size: 15px; line-height: 1.7; } /* Tiêu đề danh mục sản phẩm dùng H1 của Flatsome — đồng bộ cùng thang cỡ chữ. */ .shop-page-title h1.shop-page-title, h1.shop-page-title.is-xlarge { font-size: clamp(26px, 3vw, 42px); font-weight: 600; line-height: 1.16; letter-spacing: -0.015em; color: var(--chibi-ink); text-transform: none; margin-bottom: 6px; } /* ========================================================================== Danh sách taxonomy ở sidebar — [chibi_term_nav] -------------------------------------------------------------------------- Trước đây danh sách này là HTML dán cứng trong widget và không có style riêng, chỉ mượn style mặc định của theme. Từ khi chuyển sang shortcode, danh mục đang xem được đánh dấu .is-current nên cần thể hiện rõ. ========================================================================== */ .chibi-side-list { margin: 0; padding: 0; list-style: none; } .chibi-side-list li + li { border-top: 1px solid var(--chibi-line, rgba(var(--chibi-ink-rgb), 0.1)); } .chibi-side-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; color: var(--chibi-ink); font-size: 14.5px; line-height: 1.4; text-decoration: none; transition: color 0.16s ease; } .chibi-side-list a:hover, .chibi-side-list a:focus-visible { color: var(--chibi-accent-ink); } /* Danh mục đang xem: đậm hơn và có vạch chỉ thị bên trái. */ .chibi-side-list .is-current > a { position: relative; padding-left: 12px; font-weight: 600; color: var(--chibi-accent-ink); } .chibi-side-list .is-current > a::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 15px; transform: translateY(-50%); border-radius: 2px; background: var(--chibi-accent-ink); } .chibi-side-list__count { flex: none; min-width: 22px; padding: 1px 6px; border-radius: 10px; background: rgba(var(--chibi-ink-rgb), 0.06); color: var(--chibi-muted); font-size: 11.5px; font-weight: 500; text-align: center; }