/**
 * IVI Commerce — CSS component cho bố cục "sàn thương mại điện tử".
 *
 * LUẬT của file này (đọc trước khi sửa):
 * 1. KHÔNG dùng !important. Không có ngoại lệ.
 * 2. Mọi giá trị màu/bo góc/khoảng cách lấy từ token trong theme.json
 *    (var(--wp--preset--color--*) / var(--wp--custom--ivi--*)). Không hard-code hex.
 *    Nhờ vậy style variation (styles/*.json) đổi được toàn bộ giao diện mà
 *    không phải viết thêm 1 dòng CSS nào — đây là điểm Flatsome làm sai
 *    (mỗi khách 35 file CSS override).
 * 3. Selector 1 tầng, tiền tố .ivi-. Chỉ có DUY NHẤT nhóm selector ở §5
 *    (ghi đè lưới của WooCommerce Product Template để biến thành carousel)
 *    là phải ghép class, vì CSS gốc của WooCommerce Blocks có độ đặc trưng
 *    cao hơn 1 class — và cách duy nhất còn lại là !important, đã bị cấm.
 * 4. Carousel = CSS scroll-snap thuần. KHÔNG jQuery/Flickity/slick/swiper.
 * 5. Mọi thứ bấm được phải có :focus-visible nhìn thấy rõ. Dùng token
 *    --ivi--focus-ring (vòng trắng + vòng cam) chứ đừng tự chế outline.
 *
 * VÌ SAO primary là #D63F1E chứ không phải #EE4D2D "cam sàn TMĐT" quen thuộc:
 * đo rồi — #EE4D2D chỉ đạt 3.66:1 CẢ HAI chiều (chữ trắng trên cam ở header,
 * và cam trên nền trắng ở giá tiền), trượt ngưỡng 4.5:1 của WCAG AA cho chữ
 * thường. #D63F1E đạt 4.58:1 cả hai chiều mà mắt vẫn đọc ra đúng sắc cam đó.
 * Sửa 1 token là chữa cả header, giá, link, nút — đừng vá lẻ từng chỗ.
 */

/* ==========================================================================
   0. Trung hoà khoảng cách dọc của layout "flow"
   --------------------------------------------------------------------------
   Group của WordPress mặc định là is-layout-flow: mọi con được cộng
   margin-block-start (quy tắc gốc có độ đặc trưng 0 nhờ :where). Những
   container dưới đây là flex/grid ngang nên margin đó làm lệch hàng.
   Ghi đè bằng đúng 1 class -> vẫn thắng vì 0-1-0 > 0-0-0, không cần !important.
   ========================================================================== */

/*
 * Lề ngang của <main class="ivi-home">.
 *
 * WordPress core có quy tắc `:where(.wp-block-group.has-background)
 * { padding: 1.25em 2.375em }`. Vì .ivi-home có nền base-2 nên nó dính luôn
 * 38px lề mỗi bên. Đo ở màn 375px: nội dung chỉ còn 299px — lưới sản phẩm rớt
 * xuống 1 cột, banner co lại, gần 1/5 bề ngang màn hình bỏ không.
 *
 * Quy tắc gốc nằm trong :where() nên độ đặc trưng = 0; 1 class là thắng.
 */
.ivi-home {
	padding-inline: 16px;
}

@media (max-width: 781px) {
	.ivi-home {
		padding-inline: 10px;
	}

	.ivi-section,
	.ivi-flash,
	.ivi-trending {
		padding-inline: 10px;
	}
}

.ivi-topbar__row > *,
.ivi-header__row > *,
.ivi-chips > *,
.ivi-cat-circles > *,
.ivi-cat-tiles > *,
.ivi-flash__head > *,
.ivi-section__head > *,
.ivi-pay-chips > *,
.ivi-footer__list > * {
	margin-block-start: 0;
}

/* ==========================================================================
   1. Thanh tiện ích trên cùng (Kênh Người Bán · Tải ứng dụng · Hỗ trợ...)
   ========================================================================== */

.ivi-topbar {
	background-color: var(--wp--custom--ivi--topbar-bg);
	color: var(--wp--custom--ivi--topbar-text);
	font-size: 0.75rem;
	line-height: 1.4;
	padding-block: 6px;
}

.ivi-topbar a {
	color: currentColor;
	text-decoration: none;
}

.ivi-topbar a:hover,
.ivi-topbar a:focus-visible {
	text-decoration: underline;
}

.ivi-topbar p {
	margin: 0;
}

.ivi-topbar__row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	justify-content: space-between;
}

/* Trên di động thanh này chiếm chỗ vô ích -> ẩn, không tạo layout shift vì
   nó nằm ngoài luồng LCP. */
@media (max-width: 781px) {
	.ivi-topbar {
		display: none;
	}
}

/* ==========================================================================
   2. Header cam: logo + ô tìm kiếm bo tròn + giỏ hàng
   ========================================================================== */

.ivi-header {
	background-color: var(--wp--custom--ivi--header-bg);
	color: var(--wp--custom--ivi--header-text);
	padding-block: 12px;
}

.ivi-header a {
	color: currentColor;
}

.ivi-header__row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 22px;
}

.ivi-brand {
	flex-shrink: 0;
	margin: 0;
}

/* Khi chưa có logo ảnh, block site-title đứng thay -> cho nó ra dáng logo chữ. */
.ivi-brand.wp-block-site-title {
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.ivi-brand.wp-block-site-title a {
	color: var(--wp--custom--ivi--header-text);
	text-decoration: none;
}

/* Menu chính: dải trắng ngay dưới header màu. */
.ivi-nav {
	background-color: var(--wp--preset--color--base);
	border-block-end: 1px solid var(--wp--preset--color--border);
	font-size: 0.875rem;
	padding-block: 8px;
}

.ivi-nav a {
	border-radius: var(--wp--custom--ivi--radius-sm);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.ivi-nav a:hover {
	color: var(--wp--preset--color--primary);
}

.ivi-nav a:focus-visible {
	box-shadow: var(--wp--custom--ivi--focus-ring);
	outline: none;
}

/* Ô tìm kiếm: nền trắng, bo tròn, nút tìm nằm trong khung (kiểu Shopee/Tiki). */
.ivi-search {
	flex-grow: 1;
	max-width: 720px;
}

.ivi-search .wp-block-search__inside-wrapper {
	background-color: var(--wp--preset--color--base);
	border: 0;
	border-radius: var(--wp--custom--ivi--radius-sm);
	padding: 3px;
}

.ivi-search .wp-block-search__input {
	background-color: transparent;
	border: 0;
	color: var(--wp--preset--color--contrast);
	padding-inline: 10px;
}

/* Bỏ outline của riêng ô input rồi ĐƯA vòng focus ra khung bao — nếu chỉ bỏ
   thì người dùng bàn phím mất dấu hoàn toàn. Vòng vàng (accent) vì khung này
   nằm trên nền cam: vòng cam sẽ chìm. */
.ivi-search .wp-block-search__input:focus-visible {
	outline: none;
}

.ivi-search .wp-block-search__inside-wrapper:focus-within {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 75%, transparent);
}

.ivi-search .wp-block-search__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: -4px;
}

.ivi-search .wp-block-search__button {
	background-color: var(--wp--preset--color--primary);
	border: 0;
	border-radius: var(--wp--custom--ivi--radius-sm);
	color: var(--wp--preset--color--base);
	padding-inline: 22px;
}

/* Chip gợi ý dưới ô tìm kiếm. Dùng chung cho cả "GỢI Ý HÔM NAY". */
.ivi-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 0.75rem;
}

.ivi-chips p {
	margin: 0;
}

.ivi-chips a {
	color: currentColor;
	text-decoration: none;
}

.ivi-chips a:hover,
.ivi-chips a:focus-visible {
	text-decoration: underline;
}

/* Biến thể chip có viền (dùng ở khối "Tìm kiếm nhiều nhất"). */
.ivi-chips-outlined a {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--ivi--radius-pill);
	display: inline-block;
	padding: 5px 14px;
	transition: border-color var(--wp--custom--ivi--transition);
}

.ivi-chips-outlined a:hover,
.ivi-chips-outlined a:focus-visible {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* Giỏ hàng trong header: mini-cart của WooCommerce Blocks (không phải
   widget jQuery + cart-fragments như Flatsome). */
.ivi-cart {
	flex-shrink: 0;
}

/*
 * Header ở di động. Đo trước khi sửa: khối header cao 191px trên màn 375px —
 * hơn 1/5 chiều cao màn hình bị tiêu trước khi thấy tấm banner đầu tiên.
 * Thủ phạm là dải chip gợi ý dưới ô tìm kiếm: ở 375px nó xuống 2 dòng.
 *
 * Chip là gợi ý PHỤ (nội dung chính đã có ở menu + hàng danh mục tròn ngay
 * dưới banner), nên ẩn ở di động thay vì cố nhét cho vừa.
 */
@media (max-width: 781px) {
	.ivi-header {
		padding-block: 10px;
	}

	.ivi-header__row {
		gap: 10px 12px;
	}

	.ivi-header .ivi-chips {
		display: none;
	}

	.ivi-brand.wp-block-site-title {
		font-size: 1.25rem;
	}

	.ivi-search .wp-block-search__button {
		padding-inline: 14px;
	}
}

/* ==========================================================================
   3. Danh mục dạng icon tròn
   ========================================================================== */

.ivi-cat-circles-wrap {
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--ivi--radius);
	box-shadow: var(--wp--custom--ivi--card-shadow);
	padding: 18px 12px;
}

/* Vòng 84px vừa cho màn rộng nhưng ở 375px thì 4 cái đã tràn hàng. Hạ token
   xuống 58px trong media query -> cả ảnh, ô chữ cái và bề rộng cột đều co
   theo, không phải sửa 3 chỗ. */
@media (max-width: 781px) {
	.ivi-cat-circles-wrap {
		--wp--custom--ivi--circle-size: 58px;

		padding: 14px 8px;
	}
}

/*
 * space-evenly chứ không center. Đo trên site thật: shop mới chỉ có 5 danh mục
 * gốc, để center thì 5 vòng tròn dồn cụm giữa tấm thẻ rộng 1200px, hai bên
 * trống hơn 400px — nhìn như trang tải lỗi. space-evenly rải đều nên ít hay
 * nhiều danh mục đều ra một dải cân đối.
 */
.ivi-cat-circles {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-evenly;
}

.ivi-cat-circle {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: center;
	width: calc(var(--wp--custom--ivi--circle-size) + 26px);
}

/* object-fit: contain, KHÔNG cover. Ảnh đại diện danh mục là ảnh SẢN PHẨM
   thật (áo, nồi, điện thoại) — cover cắt cụt đầu/chân món hàng trong vòng
   tròn 62px, người xem không đoán ra danh mục. padding để món hàng không
   dính mép vòng. */
.ivi-cat-circle img {
	aspect-ratio: 1;
	background-color: var(--wp--preset--color--base-2);
	border-radius: var(--wp--custom--ivi--radius-pill);
	height: var(--wp--custom--ivi--circle-size);
	object-fit: contain;
	padding: 6px;
	transition: transform var(--wp--custom--ivi--transition);
	width: var(--wp--custom--ivi--circle-size);
}

.ivi-cat-circle:hover img {
	transform: translateY(-3px);
}

.ivi-cat-circle a:focus-visible {
	border-radius: var(--wp--custom--ivi--radius-sm);
	box-shadow: var(--wp--custom--ivi--focus-ring);
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.ivi-cat-circle img {
		transition: none;
	}

	.ivi-cat-circle:hover img {
		transform: none;
	}
}

/* Ô chữ cái thay ảnh khi danh mục chưa có ảnh đại diện — tránh khoảng trống
   vỡ lưới, và tránh phải gọi ảnh placeholder từ domain ngoài. */
.ivi-cat-circle__ph {
	align-items: center;
	background-color: var(--wp--preset--color--base-2);
	border-radius: var(--wp--custom--ivi--radius-pill);
	color: var(--wp--preset--color--primary);
	display: flex;
	font-size: 1.5rem;
	font-weight: 700;
	height: var(--wp--custom--ivi--circle-size);
	justify-content: center;
	width: var(--wp--custom--ivi--circle-size);
}

.ivi-cat-circle__ph p {
	margin: 0;
}

.ivi-cat-circle__label {
	font-size: 0.75rem;
	line-height: 1.3;
	margin: 0;
}

.ivi-cat-circle a {
	color: inherit;
	text-decoration: none;
}

/* ==========================================================================
   4. Thẻ "DANH MỤC" — lưới ô danh mục nhỏ (2 hàng)
   ========================================================================== */

.ivi-panel {
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--ivi--radius);
	box-shadow: var(--wp--custom--ivi--card-shadow);
	padding: 0;
}

.ivi-panel__head {
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	margin: 0;
	padding: 14px 18px;
	text-transform: uppercase;
}

.ivi-cat-tiles {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.ivi-cat-tile {
	align-items: center;
	border-inline-end: 1px solid var(--wp--preset--color--border);
	border-block-end: 1px solid var(--wp--preset--color--border);
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: flex-start;
	min-height: 150px;
	padding: 16px 8px;
	text-align: center;
	transition: box-shadow var(--wp--custom--ivi--transition);
}

.ivi-cat-tile:hover {
	box-shadow: var(--wp--custom--ivi--card-shadow-hover);
}

.ivi-cat-tile img {
	aspect-ratio: 1;
	height: var(--wp--custom--ivi--tile-size);
	object-fit: contain;
	width: var(--wp--custom--ivi--tile-size);
}

.ivi-cat-tile__ph {
	align-items: center;
	background-color: var(--wp--preset--color--base-2);
	border-radius: var(--wp--custom--ivi--radius);
	color: var(--wp--preset--color--primary);
	display: flex;
	font-size: 1.75rem;
	font-weight: 700;
	height: var(--wp--custom--ivi--tile-size);
	justify-content: center;
	width: var(--wp--custom--ivi--tile-size);
}

.ivi-cat-tile__ph p {
	margin: 0;
}

.ivi-cat-tile__label {
	font-size: 0.8125rem;
	line-height: 1.35;
	margin: 0;
}

.ivi-cat-tile a {
	color: inherit;
	text-decoration: none;
}

.ivi-cat-tile a:focus-visible {
	border-radius: var(--wp--custom--ivi--radius-sm);
	box-shadow: var(--wp--custom--ivi--focus-ring);
	outline: none;
}

/* ==========================================================================
   5. Carousel scroll-snap — thay Flickity/slick, 0 dòng JS
   --------------------------------------------------------------------------
   .ivi-scroll-snap đặt trên WRAPPER của Product Collection. Bản thân wrapper
   là phần tử cuộn; danh sách <ul> bên trong bị chuyển từ grid sang flex
   không xuống dòng để các card tràn ngang.

   Vì sao selector ở đây ghép nhiều class: CSS gốc của WooCommerce Blocks
   khai báo lưới ở `.wp-block-post-template.wc-block-product-template`
   (đặc trưng 0-2-0) và có thể in ra SAU file này. Muốn ghi đè mà không dùng
   !important thì bắt buộc đặc trưng phải >= . Đây là ngoại lệ DUY NHẤT.
   ========================================================================== */

.ivi-scroll-snap {
	-webkit-overflow-scrolling: touch;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	padding-block-end: 6px;
	scroll-behavior: smooth;
	scroll-padding-inline-start: 2px;
	scroll-snap-type: x mandatory;
}

.ivi-scroll-snap ul.wp-block-post-template,
.ivi-scroll-snap ul.wc-block-product-template,
.ivi-scroll-snap ul.is-flex-container.is-responsive,
.ivi-scroll-snap > .wp-block-post-template {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wp--custom--ivi--card-gap);
	grid-template-columns: none;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ivi-scroll-snap ul.wp-block-post-template > li,
.ivi-scroll-snap ul.wc-block-product-template > li,
.ivi-scroll-snap ul.is-flex-container.is-responsive > li,
.ivi-scroll-snap > .wp-block-post-template > li {
	flex: 0 0 var(--wp--custom--ivi--card-width);
	max-width: var(--wp--custom--ivi--card-width);
	scroll-snap-align: start;
}

/* Thanh cuộn mảnh, chỉ hiện khi hover — vẫn cuộn được bằng bàn phím/trackpad. */
.ivi-scroll-snap {
	scrollbar-color: var(--wp--preset--color--border) transparent;
	scrollbar-width: thin;
}

@media (prefers-reduced-motion: reduce) {
	.ivi-scroll-snap {
		scroll-behavior: auto;
	}
}

@media (max-width: 781px) {
	.ivi-scroll-snap ul.wp-block-post-template > li,
	.ivi-scroll-snap ul.wc-block-product-template > li,
	.ivi-scroll-snap ul.is-flex-container.is-responsive > li,
	.ivi-scroll-snap > .wp-block-post-template > li {
		flex-basis: var(--wp--custom--ivi--card-width-sm);
		max-width: var(--wp--custom--ivi--card-width-sm);
	}
}

/* ==========================================================================
   6. Card sản phẩm
   --------------------------------------------------------------------------
   Class .ivi-card__* được gắn qua thuộc tính className của từng block con
   trong pattern, nên ở đây chỉ cần selector 1 class.
   ========================================================================== */

.ivi-cards ul.wp-block-post-template > li,
.ivi-cards ul.wc-block-product-template > li {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--ivi--radius-sm);
	overflow: hidden;
	position: relative;
	transition: box-shadow var(--wp--custom--ivi--transition), border-color var(--wp--custom--ivi--transition);
}

.ivi-cards ul.wp-block-post-template > li:hover,
.ivi-cards ul.wc-block-product-template > li:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--custom--ivi--card-shadow-hover);
}

.ivi-card__img {
	margin: 0;
}

.ivi-card__img img {
	aspect-ratio: 1;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* Tên sản phẩm 2 dòng, cắt bằng dấu ... — giữ chiều cao card đều nhau nên
   không gây CLS khi tên dài ngắn khác nhau. */
.ivi-card__title {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.4;
	margin: 0;
	min-height: 2.8em;
	overflow: hidden;
	padding: 8px 10px 0;
}

.ivi-card__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.ivi-card__title a:focus-visible {
	border-radius: var(--wp--custom--ivi--radius-sm);
	box-shadow: var(--wp--custom--ivi--focus-ring);
	outline: none;
}

.ivi-card__price {
	color: var(--wp--custom--ivi--price-color);
	font-size: 0.9375rem;
	font-weight: 600;
	margin: 0;
	padding: 6px 10px 0;
}

.ivi-card__price del {
	color: var(--wp--custom--ivi--price-struck);
	font-size: 0.75rem;
	font-weight: 400;
	margin-inline-end: 4px;
}

.ivi-card__price ins {
	text-decoration: none;
}

/* Dòng "Đã bán N": chỉ hiển thị khi plugin ivi-commerce-core cấp block đọc
   total_sales THẬT của WooCommerce. Theme không tự bịa số. */
.ivi-card__sold {
	color: var(--wp--custom--ivi--muted);
	font-size: 0.6875rem;
	margin: 0;
	padding: 4px 10px 10px;
}

.ivi-card__btn {
	padding: 8px 10px 10px;
}

/*
 * Nút "Thêm vào giỏ" trong card.
 *
 * ĐỘ ĐẶC TRƯNG: WooCommerce Blocks tô nút bằng
 * `.wc-block-components-product-button .wp-block-button__link` (0-2-0), lại in
 * ra SAU file này. Selector 1 class của theme (0-1-1) thua -> trước khi sửa,
 * nút ăn nguyên kiểu mặc định: cam đặc, 16px, cao 77px, xuống 3 dòng — to hơn
 * cả giá tiền, phá hết thứ bậc của card. Ghép thêm class WooCommerce cho
 * thành 0-3-0 là thắng mà vẫn không cần !important.
 *
 * NGÔN NGỮ THỊ GIÁC: đây là hành động PHỤ (hành động chính là bấm vào card để
 * xem sản phẩm), nên nút viền chứ không nút đặc. Giá tiền phải là thứ đỏ/cam
 * nổi nhất trong card.
 *
 * MÀU CHỮ: dùng --ivi--link-hover (cam sậm) chứ không phải primary. Đo rồi:
 * primary trên nền tint 8% chỉ được 4.10:1 (trượt AA), cam sậm được 6.3:1.
 */
.ivi-card__btn.wc-block-components-product-button .wp-block-button__link,
.ivi-card__btn .wp-block-button__link {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 8%, var(--wp--preset--color--base));
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 45%, var(--wp--preset--color--base));
	border-radius: var(--wp--custom--ivi--radius-sm);
	color: var(--wp--custom--ivi--link-hover);
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.5;
	min-block-size: 34px;
	overflow: hidden;
	padding: 7px 8px;
	text-align: center;
	text-decoration: none;
	text-overflow: ellipsis;
	transition: background-color var(--wp--custom--ivi--transition), border-color var(--wp--custom--ivi--transition);
	white-space: nowrap;
}

.ivi-card__btn.wc-block-components-product-button .wp-block-button__link:hover,
.ivi-card__btn .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 16%, var(--wp--preset--color--base));
	border-color: var(--wp--preset--color--primary);
}

.ivi-card__btn.wc-block-components-product-button .wp-block-button__link:focus-visible,
.ivi-card__btn .wp-block-button__link:focus-visible {
	box-shadow: var(--wp--custom--ivi--focus-ring);
	outline: none;
}

/* Huy hiệu "-N%" góc trên phải. Class này đã được plugin ivi-commerce-core
   dùng sẵn -> tên class là hợp đồng, không đổi. */
.ivi-badge-percent {
	background-color: var(--wp--custom--ivi--badge-bg);
	border-end-start-radius: var(--wp--custom--ivi--radius-sm);
	color: var(--wp--custom--ivi--badge-text);
	font-size: 0.6875rem;
	font-weight: 700;
	inset-block-start: 0;
	inset-inline-end: 0;
	line-height: 1;
	padding: 4px 5px;
	position: absolute;
	z-index: 1;
}

/*
 * Huy hiệu "Khuyến mại" của WooCommerce.
 *
 * Trước khi sửa nó chỉ được đặt vị trí, còn màu/khung là mặc định của
 * WooCommerce (chữ xám 14px trên nền trắng) — thả nổi ở góc ảnh, trông y hệt
 * tooltip của trình duyệt chứ không phải nhãn khuyến mãi.
 *
 * Đặt ở góc TRÊN TRÁI, nhường góc trên phải cho .ivi-badge-percent ("-30%")
 * do plugin ivi-commerce-core chèn — hai nhãn cùng góc sẽ chồng lên nhau.
 *
 * Ghép class WooCommerce (0-2-0) vì CSS gốc của block cũng là 1 class và có
 * thể in ra sau file này.
 */
.ivi-card__badge.wc-block-components-product-sale-badge,
.ivi-card__badge {
	background-color: var(--wp--custom--ivi--sale-bg);
	border: 0;
	border-end-end-radius: var(--wp--custom--ivi--radius-sm);
	border-start-start-radius: var(--wp--custom--ivi--radius-sm);
	color: var(--wp--custom--ivi--sale-text);
	font-size: 0.6875rem;
	font-weight: 700;
	inset-block-start: 0;
	inset-inline-start: 0;
	letter-spacing: 0.02em;
	line-height: 1.2;
	padding: 4px 7px;
	position: absolute;
	text-transform: uppercase;
	z-index: 1;
}

/* ==========================================================================
   7. FLASH SALE
   ========================================================================== */

.ivi-flash {
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--ivi--radius);
	box-shadow: var(--wp--custom--ivi--card-shadow);
	padding: 14px 16px 16px;
}

.ivi-flash__head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	margin-block-end: 12px;
}

.ivi-flash__title {
	color: var(--wp--custom--ivi--price-color);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0;
	text-transform: uppercase;
}

.ivi-ribbon {
	background-color: var(--wp--custom--ivi--ribbon-bg);
	border-radius: var(--wp--custom--ivi--radius-sm);
	color: var(--wp--custom--ivi--ribbon-text);
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	margin: 0;
	padding: 4px 10px;
}

/* Thanh "đã bán". Chiều rộng phần đã bán do block của plugin đặt qua
   biến --ivi-sold, KHÔNG viết cứng trong CSS (không bịa số). */
.ivi-sold-bar {
	background-color: var(--wp--custom--ivi--sold-bar-bg);
	border-radius: var(--wp--custom--ivi--radius-pill);
	block-size: 14px;
	margin: 6px 10px 10px;
	overflow: hidden;
	position: relative;
}

.ivi-sold-bar__fill {
	background-color: var(--wp--custom--ivi--sold-bar-fill);
	block-size: 100%;
	inline-size: var(--ivi-sold, 0%);
}

.ivi-sold-bar__text {
	color: var(--wp--preset--color--base);
	font-size: 0.625rem;
	font-weight: 600;
	inset: 0;
	line-height: 14px;
	position: absolute;
	text-align: center;
}

/* ==========================================================================
   8. Banner khuyến mãi
   ========================================================================== */

/*
 * Hero: dải banner vuốt ngang, mỗi lần 1 tấm. Scroll-snap thuần — 0 dòng JS,
 * 0 thư viện (Flatsome dùng Flickity 25KB + jQuery cho đúng việc này).
 *
 * aspect-ratio khai báo sẵn theo đúng tỉ lệ file (1600×520) để trình duyệt
 * chừa chỗ TRƯỚC khi ảnh tải xong -> CLS = 0. Đây là phần tử LCP nên đừng
 * thêm hiệu ứng fade-in: ảnh phải hiện ngay khi byte cuối về.
 */
.ivi-hero {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x mandatory;
	/* Ẩn thanh cuộn: bản thân banner đã là gợi ý "vuốt được". */
	scrollbar-width: none;
}

.ivi-hero::-webkit-scrollbar {
	display: none;
}

.ivi-hero .wp-block-image {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: center;
}

/* Trên di động chừa 8% cho tấm kế nhô ra ở mép phải. Đó là toàn bộ tín hiệu
   "còn banner nữa, vuốt đi" — rẻ hơn hàng chấm tròn và không cần JS. Ở màn
   rộng thì chuột thấy được thanh cuộn/kéo ngang nên không cần. */
@media (max-width: 781px) {
	.ivi-hero {
		scroll-padding-inline-start: 0;
	}

	.ivi-hero .wp-block-image {
		flex-basis: 92%;
		scroll-snap-align: start;
	}
}

.ivi-hero img {
	aspect-ratio: 1600 / 520;
	border-radius: var(--wp--custom--ivi--radius);
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

.ivi-promo {
	border-radius: var(--wp--custom--ivi--radius);
	overflow: hidden;
}

/* auto-FIT (không phải auto-fill) + minmax 150px: chỉ có 4 ô nên ở màn rộng
   auto-fit gộp các track trống lại, ra đúng 4 cột; ở 375px thì thành 2×2 thay
   vì 1 cột xếp dọc dài lê thê như khi để 220px. */
.ivi-promo-strip {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.ivi-promo-strip figure,
.ivi-promo-strip .wp-block-cover {
	border-radius: var(--wp--custom--ivi--radius);
	margin: 0;
	overflow: hidden;
}

.ivi-promo-strip img {
	aspect-ratio: 800 / 420;
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

/* ==========================================================================
   9. Khối sản phẩm theo danh mục
   ========================================================================== */

.ivi-section {
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--ivi--radius);
	box-shadow: var(--wp--custom--ivi--card-shadow);
	padding: 14px 16px 16px;
}

.ivi-section__head {
	align-items: center;
	border-block-end: 1px solid var(--wp--preset--color--border);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	margin-block-end: 14px;
	padding-block-end: 10px;
}

/*
 * Tiêu đề khối. Trước đây 16px/500 chữ hoa dùng chung cho MỌI khối -> trang
 * chủ 9 khối mà không khối nào nổi hơn khối nào, mắt không biết bắt đầu từ
 * đâu. Nay có thứ bậc rõ: Flash Sale 20px cam (§7) > tiêu đề khối 17px đậm +
 * vạch cam > tên sản phẩm 13px thường.
 *
 * line-height 1.35 chứ không 1.2: chữ hoa tiếng Việt có dấu chồng (Ế, Ỡ, Ự)
 * bị cắt ngọn ở line-height chặt.
 */
.ivi-section__title {
	align-items: center;
	display: flex;
	font-size: 1.0625rem;
	font-weight: 700;
	gap: 9px;
	letter-spacing: 0.02em;
	line-height: 1.35;
	margin: 0;
	text-transform: uppercase;
}

.ivi-section__title::before {
	background-color: var(--wp--preset--color--primary);
	block-size: 1.05em;
	border-radius: var(--wp--custom--ivi--radius-pill);
	content: "";
	flex: 0 0 auto;
	inline-size: 4px;
}

.ivi-more {
	font-size: 0.8125rem;
	font-weight: 500;
	margin: 0;
}

.ivi-more a {
	border-radius: var(--wp--custom--ivi--radius-sm);
	color: var(--wp--custom--ivi--price-color);
	text-decoration: none;
}

.ivi-more a:hover,
.ivi-more a:focus-visible {
	text-decoration: underline;
}

.ivi-more a:focus-visible {
	box-shadow: var(--wp--custom--ivi--focus-ring);
	outline: none;
}

.ivi-trending {
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--ivi--radius);
	box-shadow: var(--wp--custom--ivi--card-shadow);
	padding: 14px 16px 16px;
}

.ivi-trending .ivi-section__title {
	margin-block-end: 12px;
}

/* Lưới sản phẩm (không cuộn ngang) — dùng ở trang danh mục và khối
   "gợi ý hôm nay".

   minmax lấy --card-width-md (170px) chứ KHÔNG lấy --card-width-sm (150px):
   150px là bề rộng dành cho DI ĐỘNG. Đo ở 1200px thì 150px cho ra 7 cột rộng
   158px — ảnh bé, tên 2 dòng dính nhau, giá không có chỗ thở. 170px cho ra
   đúng 6 cột ~187px, đúng nhịp các sàn TMĐT dùng. */
.ivi-grid ul.wp-block-post-template,
.ivi-grid ul.wc-block-product-template,
.ivi-grid ul.is-flex-container.is-responsive {
	display: grid;
	gap: var(--wp--custom--ivi--card-gap);
	grid-template-columns: repeat(auto-fill, minmax(var(--wp--custom--ivi--card-width-md), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 781px) {
	.ivi-grid ul.wp-block-post-template,
	.ivi-grid ul.wc-block-product-template,
	.ivi-grid ul.is-flex-container.is-responsive {
		grid-template-columns: repeat(auto-fill, minmax(var(--wp--custom--ivi--card-width-sm), 1fr));
	}
}

/* Ô sản phẩm trong lưới: bỏ width tính sẵn của WooCommerce để grid tự chia. */
.ivi-grid ul.wp-block-post-template > li,
.ivi-grid ul.wc-block-product-template > li,
.ivi-grid ul.is-flex-container.is-responsive > li {
	max-width: none;
	width: auto;
}

/* ==========================================================================
   10. Footer
   ========================================================================== */

.ivi-footer {
	background-color: var(--wp--preset--color--base-2);
	border-block-start: 4px solid var(--wp--preset--color--primary);
	padding-block: 36px 0;
}

.ivi-footer__title {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.ivi-footer__list p {
	font-size: 0.8125rem;
	margin: 0 0 8px;
}

.ivi-footer__list a {
	color: inherit;
	text-decoration: none;
}

.ivi-footer__list a:hover,
.ivi-footer__list a:focus-visible {
	text-decoration: underline;
}

.ivi-pay-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ivi-pay-chips p {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--ivi--radius-sm);
	font-size: 0.6875rem;
	margin: 0;
	padding: 6px 10px;
}

/* Ô chờ ảnh QR / badge cửa hàng ứng dụng. Chủ site thay bằng ảnh thật trong
   Site Editor; ở đây KHÔNG nhúng ảnh từ domain ngoài. */
.ivi-qr {
	align-items: center;
	background-color: var(--wp--preset--color--base);
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: var(--wp--custom--ivi--radius-sm);
	display: flex;
	font-size: 0.625rem;
	justify-content: center;
	min-height: 88px;
	padding: 8px;
	text-align: center;
	width: 88px;
}

.ivi-qr p {
	margin: 0;
}

.ivi-footer__bottom {
	border-block-start: 1px solid var(--wp--preset--color--border);
	font-size: 0.75rem;
	margin-block-start: 28px;
	padding-block: 16px;
	text-align: center;
}

.ivi-footer__bottom p {
	margin: 0;
}

/* ==========================================================================
   11. Contact dock (thay plugin VR Buttons)
   ========================================================================== */

.ivi-dock {
	display: flex;
	flex-direction: column;
	gap: 10px;
	inset-block-end: var(--wp--custom--ivi--dock-offset);
	inset-inline-start: var(--wp--custom--ivi--dock-offset);
	position: fixed;
	z-index: 90;
}

.ivi-dock__btn {
	align-items: center;
	background-color: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--ivi--radius-pill);
	block-size: var(--wp--custom--ivi--dock-size);
	box-shadow: var(--wp--custom--ivi--card-shadow-hover);
	color: var(--wp--preset--color--base);
	display: flex;
	inline-size: var(--wp--custom--ivi--dock-size);
	justify-content: center;
	transition: transform var(--wp--custom--ivi--transition);
}

.ivi-dock__btn:hover,
.ivi-dock__btn:focus-visible {
	transform: scale(1.08);
}

.ivi-dock__btn:focus-visible {
	box-shadow: var(--wp--custom--ivi--focus-ring);
	outline: none;
}

.ivi-dock__btn svg {
	block-size: 22px;
	fill: currentColor;
	inline-size: 22px;
}

/* Vòng sóng quanh nút gọi — tắt hoàn toàn khi người dùng chọn giảm chuyển động. */
.ivi-dock__pulse {
	animation: ivi-pulse 2s ease-out infinite;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--ivi--radius-pill);
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.ivi-dock__item {
	position: relative;
}

@keyframes ivi-pulse {
	0% {
		opacity: 0.7;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(1.7);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ivi-dock__pulse {
		animation: none;
		display: none;
	}

	.ivi-dock__btn {
		transition: none;
	}
}

/* Thanh liên hệ dưới cùng trên di động (Gọi / Zalo / Facebook / Giỏ). */
.ivi-quickbar {
	background-color: var(--wp--preset--color--base);
	border-block-start: 1px solid var(--wp--preset--color--border);
	display: none;
	inset-block-end: 0;
	inset-inline: 0;
	position: fixed;
	z-index: 89;
}

.ivi-quickbar a {
	align-items: center;
	color: var(--wp--preset--color--contrast);
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	font-size: 0.625rem;
	gap: 2px;
	padding: 7px 2px;
	text-decoration: none;
}

.ivi-quickbar svg {
	block-size: 18px;
	fill: var(--wp--preset--color--primary);
	inline-size: 18px;
}

.ivi-quickbar a:focus-visible {
	box-shadow: var(--wp--custom--ivi--focus-ring);
	outline: none;
}

/* Thanh này che mất phần cuối trang khi cuộn hết -> chừa chỗ, nếu không thì
   dòng cuối footer nằm dưới thanh, không đọc được. */
@media (max-width: 781px) {
	.ivi-footer__bottom {
		padding-block-end: 68px;
	}
}

@media (max-width: 781px) {
	.ivi-quickbar {
		display: flex;
	}

	.ivi-dock {
		inset-block-end: calc(var(--wp--custom--ivi--dock-offset) + 52px);
	}
}

/* WooCommerce Blocks tự chèn thêm 1 mini-cart + 1 icon tài khoản vào cuối
   template part header. Header của theme đã có sẵn 2 thứ đó ở đúng chỗ, nên
   ẩn bản chèn thêm — nếu không sẽ thấy 2 icon giỏ hàng lạc chỗ dưới menu. */
.ivi-nav > .wp-block-woocommerce-mini-cart,
.ivi-nav > .wp-block-woocommerce-customer-account {
	display: none;
}

/* Ngăn kéo giỏ hàng của WooCommerce tự đặt bề rộng cố định -> ở màn 375px nó
   rộng 379px, thừa 4px và sinh ra thanh cuộn ngang trong ngăn kéo. Kẹp lại
   theo bề rộng màn; nội dung ngăn kéo vốn cuộn DỌC nên không mất gì. */
.wc-block-mini-cart__drawer {
	max-inline-size: 100vw;
}

/* Gallery sản phẩm — đi kèm assets/js/ivi-gallery.js.
   Chỉ tô kiểu khi JS đã chạy (.ivi-gallery--ready), để lúc JS hỏng gallery
   vẫn là danh sách ảnh xếp dọc xem được, không phải một ô trống. */
.ivi-gallery--ready .woocommerce-product-gallery__wrapper {
	margin: 0;
}

.ivi-gallery--ready .woocommerce-product-gallery__wrapper img {
	aspect-ratio: 1;
	border-radius: var(--wp--custom--ivi--radius);
	inline-size: 100%;
	object-fit: contain;
}

.ivi-gallery-thumbs {
	display: flex;
	gap: 8px;
	margin-block-start: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.ivi-gallery-thumbs::-webkit-scrollbar {
	display: none;
}

.ivi-gallery-thumb {
	background: none;
	block-size: 64px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--ivi--radius);
	cursor: pointer;
	flex: 0 0 auto;
	inline-size: 64px;
	overflow: hidden;
	padding: 0;
	scroll-snap-align: start;
}

.ivi-gallery-thumb img {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

.ivi-gallery-thumb[aria-current="true"] {
	border-color: var(--wp--preset--color--primary);
}

.ivi-gallery-thumb:focus-visible {
	box-shadow: var(--wp--custom--ivi--focus-ring);
}

/* Trang sản phẩm — khu vực mua hàng.
   Bố cục Shopee/Tiki: "Thêm vào giỏ" là nút viền (hành động phụ), "Đặt ngay"
   là nút đặc (hành động chính). Trước đó "Đặt ngay" do plugin chèn qua hook
   WooCommerce nên không có kiểu nào cả, hiện ra như nút mặc định của trình duyệt. */
.ivi-single-product form.cart {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ivi-single-product form.cart .quantity input {
	block-size: 100%;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--ivi--radius);
	inline-size: 72px;
	padding: 10px 8px;
	text-align: center;
}

.ivi-single-product .single_add_to_cart_button {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 8%, var(--wp--preset--color--base));
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--ivi--radius);
	/* Cam sậm, KHÔNG phải primary: primary trên nền tint 8% chỉ 4.10:1 (trượt
	   AA). Cùng lý do với nút trong card ở §6. */
	color: var(--wp--custom--ivi--link-hover);
	cursor: pointer;
	font-weight: 600;
	min-inline-size: 180px;
	padding: 12px 22px;
}

.ivi-single-product .ivi-buy-now {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.ivi-single-product .single_add_to_cart_button:hover {
	filter: brightness(0.96);
}

.ivi-single-product .single_add_to_cart_button:focus-visible {
	box-shadow: var(--wp--custom--ivi--focus-ring);
}

.ivi-single-price {
	color: var(--wp--custom--ivi--price-color);
	font-weight: 700;
}