/**
 * Kio Child — main.css
 * Toàn bộ layout và style cho giao diện Kio Mobile, viết trên nền Storefront.
 * Token màu/font/bo góc nằm ở style.css (biến CSS trong :root).
 */

/* ==========================================================================
   1. Nền tảng
   ========================================================================== */

body {
	font-family: var(--kio-font);
	color: var(--kio-text);
	background-color: var(--kio-bg);
	font-size: 15px;
	line-height: 1.55;
}

/* Mở rộng container của Storefront từ ~66em lên 1280px để đồng bộ với header/footer */
.col-full {
	max-width: var(--kio-max);
	margin-left: auto;
	margin-right: auto;
}

.kio-container {
	max-width: var(--kio-max);
	margin: 0 auto;
	padding-left: var(--kio-gutter);
	padding-right: var(--kio-gutter);
	width: 100%;
	box-sizing: border-box;
}

/* button/input không kế thừa font của trang theo mặc định. */
button,
input,
select,
textarea {
	font-family: var(--kio-font);
}

/* Khung focus. Storefront vẽ viền tím cho a/button/input:focus, tức cả khi bấm chuột: mỗi cú bấm hiện
   một khung quanh thẻ. :focus-visible là lúc trình duyệt xác định người dùng cần thấy focus (dùng
   phím, hoặc đang gõ vào ô nhập), nên chỉ giữ viền trong trường hợp đó. Đừng xoá hẳn outline: người
   dùng bàn phím không biết mình đang ở đâu. */
:focus:not(:focus-visible) {
	outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--kio-brand);
	outline-offset: 2px;
}

/* Rule a:hover chung đổi chữ sang xanh đậm: trên nền xanh của thanh danh mục là mất chữ. */
@media (min-width: 768px) {
	.kio-nav .kio-mega__link:hover,
	.kio-nav .kio-mega__link:focus {
		color: #fff;
	}
}

/* Nền tối: viền xanh không nhìn thấy. */
.kio-nav a:focus-visible,
.kio-nav button:focus-visible,
.kio-utility a:focus-visible,
.site-footer a:focus-visible {
	outline-color: #fff;
	outline-offset: -2px;
}

/* tabindex="-1": JS chuyển focus tới đây để trình đọc màn hình đọc, không phải chỗ khách thao tác. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
	outline: none;
}

/* Thông báo của Woo: một kiểu chung, nền nhạt, viền trái, chữ đậm màu. Storefront dùng nền đậm chữ
   trắng, hộp thông tin chỉ đạt 3:1. body để mạnh hơn CSS của Storefront, vẫn nhẹ hơn các chỗ ghi đè riêng. */
body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error,
body .woocommerce-noreviews,
body p.no-comments {
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 0;
	border-left: 4px solid;
	border-radius: var(--kio-radius-sm);
	font-size: var(--kio-text-sm);
	line-height: 1.5;
	list-style: none;
}

body .woocommerce-message {
	border-left-color: #16a34a;
	background: #ecfdf3;
	color: #166534;
}

body .woocommerce-info,
body .woocommerce-noreviews,
body p.no-comments {
	border-left-color: var(--kio-brand);
	background: var(--kio-brand-soft);
	color: var(--kio-brand);
}

body .woocommerce-error {
	border-left-color: var(--kio-danger);
	background: #fef2f2;
	color: #991b1b;
}

body .woocommerce-message::before,
body .woocommerce-info::before,
body .woocommerce-error::before,
body .woocommerce-noreviews::before,
body p.no-comments::before {
	content: none;
}

/* !important: Storefront gạch chân link trong nội dung bằng selector rất mạnh (nhiều :not). */
body .woocommerce-message a,
body .woocommerce-info a,
body .woocommerce-error a {
	color: inherit;
	font-weight: 700;
	text-decoration: none !important;
}

body .woocommerce-message a:hover,
body .woocommerce-info a:hover,
body .woocommerce-error a:hover {
	color: inherit;
	text-decoration: underline !important;
}

/* Link "Xem giỏ hàng" trong thông báo: Storefront vẽ thành nút trắng trên nền đậm. */
body .woocommerce-message .button,
body .woocommerce-info .button,
body .woocommerce-error .button {
	float: right;
	margin: 0 0 0 12px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: inherit;
}

/* Màu Storefront và plugin để sẵn dưới mức đạt */
del {
	color: var(--kio-muted);
	opacity: 1;
}

.required,
abbr.required {
	color: var(--kio-danger);
	text-decoration: none;
}

.woocommerce-account .input-text,
.fluentform .ff-el-form-control {
	border: 1px solid var(--kio-input-border);
	background: #fff;
	box-shadow: none;
}

.fluentform .ff-el-form-control::placeholder {
	color: var(--kio-muted);
	opacity: 1;
}

/* !important: plugin in màu nút theo từng form ngay trong trang. */
body .fluentform .ff-btn-submit:not(.ff_btn_no_style) {
	background-color: var(--kio-brand) !important;
}

/* Storefront để lề dưới breadcrumb gần 60px: quá xa nội dung. */
.storefront-breadcrumb {
	margin-bottom: 8px;
	padding: 12px 0;
}

/* Đủ rộng thì bỏ lề trong: nội dung header/footer thẳng mép với thân trang. */
@media (min-width: 1328px) {
	.kio-container {
		padding-left: 0;
		padding-right: 0;
	}
}

html {
	scroll-padding-top: calc(var(--kio-header-h, 0px) + 16px);
}

a {
	color: var(--kio-brand);
	text-decoration: none;
}

a:hover {
	color: var(--kio-brand-dark);
}

/* ==========================================================================
   2. Thanh tiện ích trên cùng
   ========================================================================== */

.kio-utility {
	background: var(--kio-brand-dark);
	color: #cfe0ff;
	font-size: 13px;
}

.kio-utility .kio-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 36px;
	gap: 16px;
}

.kio-utility__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
}

.kio-utility__item {
	position: relative;
}

.kio-utility__item + .kio-utility__item::before {
	content: "·";
	position: absolute;
	left: -14px;
	color: #6b8fd0;
}

.kio-utility__tagline {
	color: #8faddf;
	white-space: nowrap;
}

/* ==========================================================================
   3. Header chính
   ========================================================================== */

.site-header {
	background: #fff;
	border-bottom: 1px solid var(--kio-border);
	padding: 0 !important;
	margin-bottom: 0 !important;
}

.kio-header__main {
	display: flex;
	align-items: center;
	gap: 28px;
	padding-top: 14px;
	padding-bottom: 14px;
}

.kio-header__logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.kio-logo {
	display: block;
	height: 40px;
	width: auto;
}

.kio-header__search {
	flex: 1 1 auto;
}

.kio-header__search .woocommerce-product-search {
	display: flex;
	margin: 0;
	border: 2px solid var(--kio-brand);
	border-radius: var(--kio-radius);
	overflow: hidden;
	background: #fff;
}

.kio-header__search .woocommerce-product-search input[type="search"] {
	flex: 1;
	border: 0;
	padding: 12px 16px;
	font-size: 14px;
	min-width: 0;
	outline: none;
}

/* Ô nhập đã tắt outline vì nằm trong khung có viền: dùng phím thì đậm viền khung lên để thấy focus. */
.kio-header__search .woocommerce-product-search:focus-within {
	box-shadow: 0 0 0 2px var(--kio-brand);
}

.kio-header__search .woocommerce-product-search button {
	background: var(--kio-brand-dark);
	color: #fff;
	border: 0;
	padding: 0 24px;
	font-weight: 700;
	cursor: pointer;
	min-height: 44px;
}

.kio-header__search .woocommerce-product-search button:hover {
	background: var(--kio-brand-dark);
}

.kio-header__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: 0 0 auto;
}

.kio-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	color: var(--kio-text);
	font-size: 12px;
	position: relative;
	min-width: 56px;
}

.kio-action:hover {
	color: var(--kio-brand);
}

.kio-action svg {
	width: 26px;
	height: 26px;
}

.kio-action--cart {
	flex-direction: row;
	gap: 6px;
}

.kio-action__icon {
	position: relative;
	display: inline-flex;
}

.kio-action--cart svg {
	width: 30px;
	height: 30px;
}

.kio-cart-count {
	position: absolute;
	top: -6px;
	right: -8px;
	background: var(--kio-price); /* chữ trắng trên cam chỉ đạt 2,9:1 */
	color: #fff;
	border-radius: 999px;
	min-width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	padding: 0 4px;
	line-height: 1;
}

/* ==========================================================================
   4. Mega menu danh mục
   ========================================================================== */

.kio-nav {
	background: var(--kio-brand-dark);
}

/* Header dính từ tablet trở lên. #masthead chỉ cao bằng phần chính; thanh danh mục treo bên dưới
   (absolute, chừa chỗ bằng margin) nên trượt lên giấu đi mà chiều cao trang không đổi.
   z-index âm: nằm sau nền của .kio-header. Mobile đã có thanh dưới đáy với tìm kiếm + giỏ hàng. */
@media (min-width: 768px) {
	.site-header {
		position: sticky;
		top: 0;
		z-index: 1000;
		margin-bottom: var(--kio-nav-h, 46px) !important; /* thanh danh mục có thể xuống 2 dòng ở tablet */
		border-bottom: 0;
	}

	.admin-bar .site-header {
		top: 32px;
	}

	.kio-header {
		background: #fff;
	}

	.kio-nav {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		z-index: -1;
		transition: transform var(--kio-dur-base) var(--kio-ease-out);
	}

	.site-header.is-compact .kio-nav {
		visibility: hidden;
		transform: translateY(-100%);
		transition: transform var(--kio-dur-base) var(--kio-ease-in), visibility 0s linear var(--kio-dur-base);
	}
}

/* Gợi ý tìm kiếm */
.kio-suggest-host {
	position: relative;
}

.kio-suggest {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	z-index: 1001;
	max-height: min(70vh, 480px);
	overflow-y: auto;
	border-radius: var(--kio-radius);
	background: var(--kio-card);
	box-shadow: var(--kio-shadow-hover);
	text-align: left;
}

/* Thanh đáy mobile: icon của Storefront nằm trong icons.css đã gỡ (functions.php), vẽ lại bằng SVG. */
.storefront-handheld-footer-bar > ul > li > a::before {
	content: "";
	position: absolute;
	inset: 0;
	width: 24px;
	height: 24px;
	margin: auto;
	background: var(--kio-brand-dark);
	-webkit-mask: var(--kio-bar-icon) center / contain no-repeat;
	mask: var(--kio-bar-icon) center / contain no-repeat;
}

.storefront-handheld-footer-bar > ul > li.my-account > a {
	--kio-bar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E");
}

.storefront-handheld-footer-bar > ul > li.search > a {
	--kio-bar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.5-4.5'/%3E%3C/svg%3E");
}

.storefront-handheld-footer-bar > ul > li.cart > a {
	--kio-bar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.6 12.5h11L21 7H6'/%3E%3C/svg%3E");
}

.storefront-handheld-footer-bar .kio-suggest {
	top: auto;
	bottom: calc(100% + 6px);
}

/* Storefront định dạng mọi ul/li/a trong thanh đáy (chia cột, giấu chữ để hiện icon): đặt lại cho
   danh sách gợi ý nằm trong đó. */
.storefront-handheld-footer-bar ul.kio-suggest__list {
	display: block;
}

.storefront-handheld-footer-bar ul.kio-suggest__list li {
	display: block;
	float: none;
	width: 100%;
	border: 0;
	text-align: left;
}

.storefront-handheld-footer-bar ul.kio-suggest__list li > a.kio-suggest__item {
	display: flex;
	height: auto;
	padding: 6px 8px;
	overflow: visible;
	color: var(--kio-text);
	text-decoration: none;
	text-indent: 0;
}

.storefront-handheld-footer-bar ul.kio-suggest__list li > a.kio-suggest__item::before {
	content: none;
}

.kio-suggest__list {
	margin: 0;
	padding: 4px;
	list-style: none;
}

.kio-suggest__list li {
	margin: 0;
}

.kio-suggest__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border-radius: var(--kio-radius-sm);
	color: var(--kio-text);
	text-decoration: none;
}

.kio-suggest__item:hover,
[aria-selected="true"] > .kio-suggest__item {
	background: var(--kio-brand-soft);
	color: var(--kio-text);
}

.kio-suggest__item img {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: var(--kio-radius-sm);
	background: #eef1f4;
}

.kio-suggest__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	font-size: 13px;
	line-height: 1.4;
}

.kio-suggest__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kio-suggest__name mark {
	background: none;
	color: inherit;
	font-weight: 700;
}

.kio-suggest__price {
	color: var(--kio-price);
	font-weight: 700;
}

.kio-suggest__status {
	margin: 0;
	padding: 14px 16px;
	color: var(--kio-muted);
	font-size: var(--kio-text-sm);
}

/* Storefront định dạng mọi button, nên đặt lại toàn bộ cho nút dạng link này. */
.kio-header__search .kio-suggest__all,
.kio-suggest__all {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 10px 16px;
	border: 0;
	border-top: 1px solid var(--kio-border);
	background: none;
	color: var(--kio-brand);
	font-size: 13px;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}

.kio-suggest__all:hover {
	background: var(--kio-brand-soft);
	color: var(--kio-brand);
}

/* Thông báo đã thêm vào giỏ */
.kio-toast {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 10002;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: min(380px, calc(100vw - 32px));
	padding: 12px 16px;
	border-radius: var(--kio-radius);
	background: #111827;
	box-shadow: var(--kio-shadow-hover);
	color: #fff;
	font-size: var(--kio-text-sm);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity var(--kio-dur-base) var(--kio-ease-in), transform var(--kio-dur-base) var(--kio-ease-in), visibility 0s linear var(--kio-dur-base);
}

.kio-toast.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity var(--kio-dur-base) var(--kio-ease-out), transform var(--kio-dur-base) var(--kio-ease-out);
}

.kio-toast.is-error {
	background: #991b1b;
}

.kio-toast.is-error .kio-toast__link {
	display: none;
}

.kio-toast__link {
	flex: 0 0 auto;
	color: #ffd2b3;
	font-weight: 700;
	white-space: nowrap;
}

.kio-toast__link:hover {
	color: #fff;
}

/* Mobile: nằm trên thanh công cụ dưới đáy. */
@media (max-width: 767px) {
	.kio-toast {
		right: 16px;
		bottom: 76px;
		left: 16px;
		max-width: none;
	}

	/* Thanh mua F7 đang hiện thì đứng trên nó. */
	.kio-buy-bar-visible .kio-toast {
		bottom: 148px;
	}
}

.kio-nav .kio-container {
	position: relative;
	display: flex;
	align-items: center;
}

.kio-nav__toggle {
	display: none;
	align-items: center;
	gap: 8px;
	background: transparent;
	color: #fff;
	border: 0;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	padding: 12px 0;
	min-height: 44px;
	font-family: var(--kio-font);
}

.kio-nav__toggle svg {
	width: 22px;
	height: 22px;
}

.kio-mega {
	flex: 1;
}

.kio-mega__list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.kio-mega__item {
	position: relative;
}

.kio-mega__link {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 700;
	min-height: 44px;
	box-sizing: border-box;
}

.kio-mega__link svg {
	width: 20px;
	height: 20px;
}

.kio-mega__item:hover > .kio-mega__link,
.kio-mega__item:focus-within > .kio-mega__link {
	background: rgba(255, 255, 255, 0.12);
}

.kio-mega__sub {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	list-style: none;
	margin: 0;
	padding: 8px 0;
	background: #fff;
	border-radius: 0 0 var(--kio-radius) var(--kio-radius);
	box-shadow: var(--kio-shadow-hover);
	z-index: 100;
}

.kio-mega__item:hover > .kio-mega__sub,
.kio-mega__item:focus-within > .kio-mega__sub {
	display: block;
}

.kio-mega__brand a {
	display: block;
	padding: 9px 20px;
	color: var(--kio-text);
	font-size: 14px;
}

.kio-mega__brand a:hover {
	background: var(--kio-bg);
	color: var(--kio-brand);
}

/* ==========================================================================
   5. Footer
   ========================================================================== */

.site-footer {
	background: #10243f;
	color: #b9c7da;
	margin-top: 48px;
}

.kio-footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1.2fr;
	gap: 32px;
	padding-top: 40px;
	padding-bottom: 32px;
}

.kio-footer__about .kio-logo {
	margin-bottom: 14px;
}

.kio-footer__about p {
	font-size: 13px;
	color: #8fa3bd;
	max-width: 340px;
}

.site-footer .kio-footer__title {
	color: #fff;
	font-size: 15px;
	margin: 0 0 14px;
}

.kio-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kio-footer__menu li {
	margin-bottom: 8px;
}

.site-footer .kio-footer__menu a:not(.button):not(.components-button) {
	color: #b9c7da;
	font-size: 13px;
}

.site-footer .kio-footer__menu a:not(.button):not(.components-button):hover {
	color: #fff;
}

.kio-footer__hotline {
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 4px;
}

.kio-footer__hours {
	font-size: 13px;
	color: #8fa3bd;
	margin: 0 0 20px;
}

.kio-social {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.site-footer .kio-social__link:not(.button):not(.components-button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.site-footer .kio-social__link:not(.button):not(.components-button):hover {
	background: var(--kio-brand-dark);
	color: #fff;
}

.kio-social__link svg {
	width: 18px;
	height: 18px;
}

.kio-payments {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kio-payments__item {
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: var(--kio-radius-sm);
}

.kio-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 16px 0;
	font-size: 12px;
	color: #7f93ad;
}

/* ==========================================================================
   6. Trang chủ — hero slider
   ========================================================================== */

.kio-hero-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 12px;
	margin-top: 16px; /* tách khỏi thanh danh mục phía trên */
	margin-bottom: 24px;
}

.kio-hero__side {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.kio-hero__side a {
	display: block;
	border-radius: var(--kio-radius);
	overflow: hidden;
	line-height: 0;
}

.kio-hero__side img {
	width: 100%;
	display: block;
	height: auto;
}

.kio-hero {
	position: relative;
	margin-bottom: 24px;
}

.kio-hero__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: var(--kio-radius);
}

.kio-hero__track::-webkit-scrollbar {
	display: none;
}

.kio-hero__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.kio-hero__slide img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--kio-radius);
}

.kio-hero__prev,
.kio-hero__next {
	position: absolute;
	bottom: 12px;
	top: auto;
	transform: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 0;
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
}

.kio-hero__prev {
	right: 56px;
	left: auto;
}

.kio-hero__next {
	right: 12px;
}

/* ==========================================================================
   7. Lưới icon danh mục
   ========================================================================== */

.kio-cats {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
}

.kio-cats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 18px 8px;
	background: var(--kio-card);
	border-radius: var(--kio-radius);
	box-shadow: var(--kio-shadow);
	color: var(--kio-text);
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kio-cats__item:hover {
	transform: translateY(-3px);
	box-shadow: var(--kio-shadow-hover);
	color: var(--kio-brand);
}

.kio-cats__icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--kio-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--kio-brand);
}

.kio-cats__icon svg {
	width: 22px;
	height: 22px;
}

/* ==========================================================================
   8. Khối Flash sale (placeholder Phase 2)
   ========================================================================== */

.kio-flash-sale {
	background: var(--kio-card);
	border-radius: var(--kio-radius);
	padding: 20px;
	margin-bottom: 32px;
	box-shadow: var(--kio-shadow);
}

.kio-flash-sale__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-bottom: 16px;
}

.kio-flash-sale__title {
	font-size: 22px;
	font-weight: 700;
	color: var(--kio-accent-strong);
	margin: 0;
	text-transform: uppercase;
	white-space: nowrap;
}

.kio-flash-sale__timer {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	background: var(--kio-price);
	padding: 6px 12px;
	border-radius: var(--kio-radius-sm);
}

.kio-flash-sale__timer-label {
	white-space: nowrap;
	font-weight: 400;
	font-size: 12px;
}

.kio-flash-sale__countdown {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-variant-numeric: tabular-nums;
}

.kio-flash-sale__unit {
	background: #a80013;
	padding: 2px 5px;
	border-radius: 3px;
}

.kio-flash-sale__sep {
	margin: 0 2px;
	font-weight: 400;
}

/* Số đồng hồ lật quanh trục ngang: cần inline-block thì transform mới có tác dụng. */
.kio-flash-sale__unit {
	display: inline-block;
	min-width: 1.6em;
	text-align: center;
}

/* Thanh đã bán: "Đã bán 214" ở dòng thẻ trùng ý nên ẩn trong Flash Sale. */
.kio-flash-sale .kio-card-meta__sold {
	display: none;
}

.kio-sold-bar {
	margin-top: 6px;
}

.kio-sold-bar__text {
	display: block;
	color: var(--kio-accent-text);
	font-size: var(--kio-text-xs);
	font-weight: 700;
	line-height: 1.5;
}

.kio-sold-bar__track {
	display: block;
	height: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--kio-accent-soft);
}

.kio-sold-bar__fill {
	display: block;
	height: 100%;
	background: var(--kio-accent);
	transform: scaleX(var(--kio-sold, 0));
	transform-origin: left;
}

/* Băng chuyền dùng chung (Flash Sale, reels): carousel.js của kio-store thêm nút.
   Khoảng đệm + lề âm: vùng cuộn cắt mọi thứ tràn ra, cần chừa chỗ cho bóng và thẻ nhấc khi hover. */
[data-kio-carousel] {
	position: relative;
}

[data-kio-carousel] ul.products,
.kio-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: none;
	gap: 12px;
	margin: -6px -6px -10px !important;
	padding: 6px 6px 10px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 6px;
	scrollbar-width: none;
}

[data-kio-carousel] ul.products::-webkit-scrollbar,
.kio-carousel__track::-webkit-scrollbar {
	display: none;
}

[data-kio-carousel] ul.products {
	grid-auto-columns: 44%;
}

[data-kio-carousel] ul.products > li.product {
	scroll-snap-align: start;
}

.kio-carousel__track:focus-visible {
	outline: 2px solid var(--kio-brand);
	outline-offset: 2px;
}

.kio-carousel__nav {
	position: absolute;
	top: 40%;
	z-index: 3;
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--kio-card);
	box-shadow: var(--kio-shadow-hover);
	color: var(--kio-text);
	cursor: pointer;
	transition: opacity var(--kio-dur-fast) var(--kio-ease-out);
}

.kio-carousel__nav::before {
	content: "";
	position: absolute;
	top: 16px;
	left: 14px;
	width: 11px;
	height: 11px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}

.kio-carousel__nav--prev {
	left: -10px;
}

.kio-carousel__nav--prev::before {
	left: 18px;
	transform: rotate(-135deg);
}

.kio-carousel__nav--next {
	right: -10px;
}

/* visibility thay vì chỉ opacity: Storefront có style riêng cho button:disabled, và nút ẩn cũng
   không nên nhận focus. */
.kio-carousel .kio-carousel__nav:disabled {
	visibility: hidden;
}

.kio-carousel__nav:focus-visible {
	outline: 2px solid var(--kio-brand);
	outline-offset: 2px;
}

/* Màn hình cảm ứng nhỏ vuốt là đủ, chỉ hiện nút từ tablet trở lên và khi thật sự có phần tràn. */
@media (min-width: 768px) {
	.kio-carousel.has-overflow .kio-carousel__nav {
		display: block;
	}

	[data-kio-carousel] ul.products {
		grid-auto-columns: calc((100% - 2 * 16px) / 3);
		gap: 16px;
	}
}

@media (min-width: 1024px) {
	[data-kio-carousel] ul.products {
		grid-auto-columns: calc((100% - 3 * 16px) / 4);
	}
}

@media (min-width: 1280px) {
	[data-kio-carousel] ul.products {
		grid-auto-columns: calc((100% - 4 * 16px) / 5);
	}
}

/* ==========================================================================
   9. Dải sản phẩm + tiêu đề khối
   ========================================================================== */

.kio-section-title {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 4px;
	color: var(--kio-text);
}

.kio-section-sub {
	color: var(--kio-muted);
	font-size: 14px;
	margin: 0 0 16px;
}

.kio-strip {
	margin-bottom: 36px;
}

.kio-strip__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.kio-strip__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.kio-strip__chip {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--kio-border);
	border-radius: 999px;
	color: var(--kio-text);
	font-size: 13px;
	background: #fff;
}

.kio-strip__chip:hover {
	border-color: var(--kio-brand);
	color: var(--kio-brand);
}

.kio-strip__chip[aria-current] {
	border-color: var(--kio-brand);
	background: var(--kio-brand-dark);
	color: #fff;
}

.kio-strip__chip[aria-current]:hover {
	color: #fff;
}

.kio-strip__chip:focus-visible {
	outline: 2px solid var(--kio-brand);
	outline-offset: 2px;
}

/* Đang tải: thẻ cũ giữ nguyên chỗ và mờ đi, không để khung trống làm trang nhảy. */
.kio-product-row ul.products {
	transition: opacity var(--kio-dur-fast) var(--kio-ease-out);
}

.kio-product-row.is-loading ul.products {
	opacity: 0.5;
	pointer-events: none;
}

.kio-strip__more {
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

/* ==========================================================================
   10. Hàng thương hiệu + dải cam kết
   ========================================================================== */

.kio-brands {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	list-style: none;
	margin: 0 0 36px;
	padding: 0;
}

.kio-brands__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 72px;
	background: #fff;
	border-radius: var(--kio-radius);
	box-shadow: var(--kio-shadow);
	font-size: 18px;
	font-weight: 700;
	color: var(--kio-muted);
	letter-spacing: 0.02em;
	transition: color 0.15s ease;
}

.kio-brands__item:hover {
	color: var(--kio-brand);
}

.kio-commit {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin: 0 0 36px;
	padding: 0;
	list-style: none;
}

.kio-commit__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	background: #fff;
	border-radius: var(--kio-radius);
	box-shadow: var(--kio-shadow);
	font-size: 13px;
	font-weight: 700;
}

.kio-commit__item svg {
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	color: var(--kio-brand);
}

/* Storefront đặt overflow-x: hidden ở đây, trục còn lại bị ép thành auto nên 2 phần tử thành khung
   cuộn riêng và position: sticky của con không bám theo màn hình. clip vẫn cắt phần tràn ngang
   nhưng không tạo khung cuộn. */
html body,
#page.site {
	overflow-x: clip;
}

/* Đặt ở html là đặt cho khung nhìn nên không ảnh hưởng sticky. iPhone vẫn kéo ngang đàn hồi được nếu thiếu. */
html {
	overflow-x: hidden;
	overscroll-behavior-x: none;
}

/* ==========================================================================
   11. Thẻ sản phẩm (trang danh mục + shortcode [products])
   ========================================================================== */

/* minmax(0, 1fr) thay vì 1fr: "1fr" có mức tối thiểu ngầm là auto, nên dòng nowrap dài (thông số
   chip) ép cột của nó rộng ra và các thẻ trong cùng hàng lệch nhau. */
ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0 !important;
}

ul.products::before,
ul.products::after {
	content: none !important;
}

/* Thẻ là cột flex, phần link chiếm hết chỗ thừa: các nút luôn nằm sát đáy thẻ. */
ul.products li.product {
	display: flex;
	flex-direction: column;
	background: var(--kio-card);
	border-radius: var(--kio-radius);
	box-shadow: var(--kio-shadow);
	padding: 12px !important;
	position: relative;
	transition: transform var(--kio-dur-fast) var(--kio-ease-out);
	margin: 0 !important;
	float: none !important;
	width: auto !important;
	clear: none !important;
	text-align: left;
}

/* Bóng đậm nằm sẵn ở lớp phủ, hover chỉ đổi opacity: rẻ hơn animate box-shadow (phải vẽ lại). */
ul.products li.product::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: var(--kio-shadow-hover);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--kio-dur-fast) var(--kio-ease-out);
}

/* (hover: hover): chỉ thiết bị có chuột. Trên cảm ứng, :hover bị "dính" sau khi chạm. */
@media (hover: hover) {
	ul.products li.product:hover {
		transform: translateY(-3px);
	}

	ul.products li.product:hover::after {
		opacity: 1;
	}

	ul.products li.product:hover .kio-card-media img {
		transform: scale(1.04);
	}
}

ul.products li.product a:focus-visible,
ul.products li.product button:focus-visible {
	outline: 2px solid var(--kio-brand);
	outline-offset: 2px;
}

ul.products li.product .woocommerce-LoopProduct-link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	color: var(--kio-text);
}

/* Khung ảnh: giữ sẵn tỉ lệ 1:1 nên ảnh tải xong không làm giật trang, là mốc định vị của nhãn,
   và cắt phần ảnh phóng to khi hover. */
.kio-card-media {
	position: relative;
	aspect-ratio: 1;
	margin-bottom: 10px;
	overflow: hidden;
	border-radius: var(--kio-radius-sm);
	background: #eef1f4;
}

/* Skeleton: vệt sáng chạy qua khung cho tới khi ảnh tải xong (main.js thêm .is-loaded). */
.kio-card-media::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.7) 50%, transparent 70%);
	animation: kio-shimmer 1.2s linear infinite;
}

.kio-card-media.is-loaded::before {
	display: none;
}

@keyframes kio-shimmer {
	from {
		transform: translateX(-100%);
	}

	to {
		transform: translateX(100%);
	}
}

ul.products li.product .kio-card-media img {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 0;
	object-fit: contain;
	transition: transform var(--kio-dur-base) var(--kio-ease-out);
}

ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--kio-text-sm);
	font-weight: 700;
	line-height: 1.4;
	min-height: 2.8em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	padding: 0 !important;
}

/* Giá: dòng giá hiện tại ở trên, giá gạch ngang ở dưới. Luôn giữ chỗ 2 dòng để phần dưới của mọi
   thẻ trong hàng thẳng nhau, dù thẻ đó có giá gạch ngang hay không. */
ul.products li.product .price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: 42px;
	margin: 8px 0 0;
	color: var(--kio-price);
	font-size: var(--kio-text-md);
	font-weight: 700;
	line-height: 1.3;
}

ul.products li.product .price ins {
	order: -1;
	color: var(--kio-price);
	font-weight: 700;
	text-decoration: none;
}

ul.products li.product .price del {
	color: var(--kio-muted);
	font-size: 13px;
	font-weight: 400;
	opacity: 1;
}

ul.products li.product .kio-price-now {
	white-space: nowrap;
}

ul.products li.product .kio-price-now .woocommerce-Price-amount {
	font-weight: 700;
}

@media (max-width: 479px) {
	ul.products li.product .price {
		font-size: 15px;
	}
}

/* Nút chính rộng hết thẻ, cao 44px (vùng chạm tối thiểu). */
ul.products li.product .button:not(.compare) {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: 10px;
	background: var(--kio-brand-dark);
	color: #fff;
	border-radius: var(--kio-radius-sm);
	font-weight: 700;
	font-size: 13px;
	padding: 8px 12px;
	text-align: center;
	transition: transform var(--kio-dur-fast) var(--kio-ease-out);
}

ul.products li.product .button:not(.compare):hover {
	background: var(--kio-brand-dark);
}

ul.products li.product .button:not(.compare):active {
	transform: scale(0.97);
}

/* Link "Xem giỏ hàng" Woo chèn sau khi thêm bằng AJAX: đã có trong thông báo, ẩn để thẻ không cao lên. */
ul.products li.product .added_to_cart {
	display: none;
}

/* Dòng sao + đã bán */
.kio-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 8px;
	margin-top: 6px;
	color: var(--kio-muted);
	font-size: var(--kio-text-xs);
	line-height: 1.4;
}

.kio-card-meta__rating {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: var(--kio-text);
}

.kio-card-meta__rating::before {
	content: "";
	width: 13px;
	height: 13px;
	background: var(--kio-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.2 6.8.8-5 4.6 1.3 6.7-6-3.3-6 3.3 1.3-6.7-5-4.6 6.8-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.2 6.8.8-5 4.6 1.3 6.7-6-3.3-6 3.3 1.3-6.7-5-4.6 6.8-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Dòng "+2 ưu đãi" */
.kio-card-offers {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 4px;
	margin-top: 6px;
	padding: 2px 8px 2px 6px;
	border-radius: 999px;
	background: var(--kio-accent-soft);
	color: var(--kio-accent-text);
	font-size: var(--kio-text-xs);
	font-weight: 700;
	line-height: 1.5;
}

.kio-card-offers::before {
	content: "";
	width: 13px;
	height: 13px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 8h-2.2A3 3 0 0 0 12 5.4 3 3 0 0 0 6.2 8H4a1 1 0 0 0-1 1v3h8V8h2v4h8V9a1 1 0 0 0-1-1zM9 8a1 1 0 1 1 1-1v1zm6 0h-1V7a1 1 0 1 1 1 1zM4 14v6a1 1 0 0 0 1 1h6v-7zm9 0v7h6a1 1 0 0 0 1-1v-6z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 8h-2.2A3 3 0 0 0 12 5.4 3 3 0 0 0 6.2 8H4a1 1 0 0 0-1 1v3h8V8h2v4h8V9a1 1 0 0 0-1-1zM9 8a1 1 0 1 1 1-1v1zm6 0h-1V7a1 1 0 1 1 1 1zM4 14v6a1 1 0 0 0 1 1h6v-7zm9 0v7h6a1 1 0 0 0 1-1v-6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   11b. Nhãn trên ảnh thẻ sản phẩm (Phase 4 · F1): giảm giá, Mới, Hết hàng
   ========================================================================== */

/* Một nhóm duy nhất ở góc trái ảnh, các nhãn tự xếp chồng: không cần tính vị trí từng nhãn. */
.kio-card-badges {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

/* .kio-badges do F1 in; bỏ khung của nó để nhãn bên trong xếp chung với nhãn giảm giá. */
.kio-card-badges .kio-badges {
	display: contents;
}

.kio-badge--360 {
	background: var(--kio-brand-dark);
	color: #fff;
}

.summary > .kio-badge--360 {
	display: inline-block;
	margin-bottom: 0.5rem;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	font-size: var(--kio-text-xs);
	font-weight: 700;
}

ul.products li.product .kio-badge {
	display: block;
	margin: 0;
	padding: 4px 7px;
	border: 0;
	border-radius: 5px;
	font-size: var(--kio-text-xs);
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-transform: none;
}

ul.products li.product .onsale.kio-badge {
	background: var(--kio-price);
}

ul.products li.product .kio-badge--new {
	background: #15803d; /* --kio-success làm chữ trắng chỉ đạt 3.3:1, bản đậm hơn đạt 5:1 */
}

ul.products li.product .kio-badge--out {
	background: #4b5563;
}

/* Trang chi tiết sản phẩm: chỉ có nhãn giảm giá (do filter in), đổi thành badge đỏ
   thay cho khung chữ mặc định của Storefront. */
.single-product .onsale.kio-badge {
	background: var(--kio-price);
	color: #fff;
	border: 0;
	text-transform: none;
	padding: 5px 9px;
	border-radius: 5px;
	font-weight: 700;
}

/* ==========================================================================
   11c. Dòng "Trả góp 0%" (Phase 4 · F2)
   ========================================================================== */

/* Trên thẻ sản phẩm: nhãn "Trả góp 0%" cùng kiểu với các nhãn khác, số tiền ngay cạnh. */
ul.products li.product .kio-installment {
	margin-top: 6px;
	color: var(--kio-muted);
	font-size: var(--kio-text-xs);
	line-height: 1.5;
}

ul.products li.product .kio-installment__tag {
	display: inline-block;
	padding: 1px 6px;
	border-radius: 5px;
	background: var(--kio-brand-soft);
	color: var(--kio-brand);
	font-weight: 700;
}

ul.products li.product .kio-installment__amount {
	color: var(--kio-text);
	font-weight: 700;
}

/* Trang chi tiết sản phẩm: gần giá, dễ đọc hơn. */
.single-product .kio-installment {
	font-size: 14px;
	color: var(--kio-muted);
	margin: 6px 0 10px;
}

.single-product .kio-installment__amount {
	color: var(--kio-brand);
	font-weight: 700;
}

/* ==========================================================================
   11d. Thông số nổi bật trên thẻ sản phẩm (Phase 4 · F3)
   ========================================================================== */

/* Giữ chỗ đủ 3 dòng: thẻ ít thông số không làm giá của nó nhảy lên so với thẻ bên cạnh. */
ul.products li.product .kio-specs {
	display: block;
	min-height: calc(3 * 1.6em);
	margin: 6px 0 0;
	font-size: var(--kio-text-xs);
	line-height: 1.6;
	color: var(--kio-text);
}

/* Thẻ không có thông số (không có .kio-specs nên giá đứng ngay sau tiêu đề) nằm chung danh sách
   với thẻ có thông số: chừa đúng chỗ đó để giá thẳng hàng. Danh sách toàn phụ kiện thì không chừa. */
ul.products:has(.kio-specs) li.product .woocommerce-loop-product__title + .price {
	margin-top: calc(14px + 3 * 1.6 * var(--kio-text-xs));
}

ul.products li.product .kio-specs__item {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

ul.products li.product .kio-specs__label {
	color: var(--kio-muted);
	margin-right: 4px;
}

/* ==========================================================================
   11e. Khối khuyến mãi trên trang sản phẩm (Phase 4 · F4)
   ========================================================================== */

.single-product .kio-promotions {
	background: var(--kio-bg);
	border: 1px solid var(--kio-border);
	border-radius: var(--kio-radius);
	padding: 12px 16px;
	margin: 0 0 16px;
}

.single-product .kio-promotions__title {
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 8px;
}

.single-product .kio-promotions__list {
	margin: 0;
	padding-left: 20px;
}

.single-product .kio-promotions__list li {
	font-size: 13px;
	line-height: 1.7;
}

/* Phần khuyến mãi thứ 4 trở đi: ẩn tới khi bấm "Xem thêm". */
.single-product .kio-promotions__hidden {
	display: none;
	margin: 0;
	padding-left: 20px;
}

.single-product .kio-promotions__hidden--open {
	display: block;
}

.single-product .kio-promotions__toggle {
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--kio-brand);
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
}

/* ==========================================================================
   12. Trang danh mục
   ========================================================================== */

.archive .page-title,
.woocommerce-products-header__title {
	font-size: 26px;
	font-weight: 700;
}

.woocommerce-result-count {
	color: var(--kio-muted);
	font-size: 13px;
}

/* Nền trang sản phẩm/archive để thẻ nổi lên */
.archive.woocommerce-page .content-area,
.post-type-archive-product .content-area {
	padding-top: 20px;
}

/* ==========================================================================
   13. Trang sản phẩm (phần còn lại ở assets/css/single-product.css)
   ========================================================================== */

.single-product div.product .price {
	color: var(--kio-price);
	font-size: 26px;
}

.single-product div.product .price del {
	color: var(--kio-muted);
	font-size: 16px;
}

/* ==========================================================================
   14. Responsive
   ========================================================================== */

@media (max-width: 1023px) {
	.kio-cats {
		grid-template-columns: repeat(3, 1fr);
	}

	.kio-brands {
		grid-template-columns: repeat(3, 1fr);
	}

	.kio-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 767px) {
	.col-full {
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
	}

	.kio-hero-grid {
		grid-template-columns: 1fr;
	}

	.kio-hero__side {
		display: none;
	}

	.kio-utility__tagline {
		display: none;
	}

	.kio-header__main {
		flex-wrap: wrap;
		gap: 12px;
	}

	.kio-header__logo {
		order: 1;
	}

	.kio-header__actions {
		order: 2;
		margin-left: auto;
	}

	.kio-header__search {
		order: 3;
		flex-basis: 100%;
	}

	.kio-nav__toggle {
		display: inline-flex;
	}

	.kio-mega {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border-radius: 0 0 var(--kio-radius) var(--kio-radius);
		box-shadow: var(--kio-shadow-hover);
		z-index: 100;
	}

	.kio-mega.is-open {
		display: block;
	}

	.kio-mega__list {
		flex-direction: column;
	}

	.kio-mega__link {
		color: var(--kio-text);
		border-bottom: 1px solid var(--kio-border);
	}

	.kio-mega__sub {
		display: none;
		position: static;
		box-shadow: none;
		padding: 0 0 8px 20px;
	}

	.kio-mega.is-open .kio-mega__sub {
		display: block;
	}

	.kio-cats {
		grid-template-columns: repeat(3, 1fr);
	}

	.kio-commit {
		grid-template-columns: repeat(2, 1fr);
	}

	.kio-footer__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 479px) {
	.kio-action > span:last-child {
		display: none;
	}

	.kio-cats {
		gap: 8px;
	}

	.kio-brands {
		grid-template-columns: repeat(2, 1fr);
	}

	.kio-hero__prev,
	.kio-hero__next {
		display: none;
	}
}

/* Số cột sản phẩm tăng dần theo màn hình: 2 (mobile) → 3 → 4 → 5. */
@media (min-width: 768px) {
	ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}
}

@media (min-width: 1024px) {
	ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	ul.products {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}


/* ==========================================================================
   Phase 3 — Giao diện cho bộ lọc và plugin (yêu thích, so sánh)
   Chỉ chỉnh để gọn và đúng màu; đợt "sinh động hơn" làm sau Phase 4.
   ========================================================================== */

/* Yêu thích (WPC Smart Wishlist): nút tròn hình trái tim ở góc trên ảnh */
ul.products li.product .woosw-btn {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 2;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	font-size: 0; /* ẩn chữ nhưng trình đọc màn hình vẫn đọc aria-label "Yêu thích" */
	color: var(--kio-muted);
	cursor: pointer;
}
/* Nút hiển thị 36px nhưng vùng chạm 44px. */
ul.products li.product .woosw-btn::after {
	content: "";
	position: absolute;
	inset: -4px;
}
ul.products li.product .woosw-btn::before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	margin: 9px auto;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C1 8.6 3 5 6.5 5c2 0 3.4 1.1 4.2 2.4h2.6C14.1 6.1 15.5 5 17.5 5 21 5 23 8.6 21.6 11.8 19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C1 8.6 3 5 6.5 5c2 0 3.4 1.1 4.2 2.4h2.6C14.1 6.1 15.5 5 17.5 5 21 5 23 8.6 21.6 11.8 19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat;
}
ul.products li.product .woosw-btn:hover,
ul.products li.product .woosw-btn.woosw-added,
ul.products li.product .woosw-btn.woosw-btn-added {
	color: var(--kio-price);
}

/* So sánh (YITH Compare): link nhỏ có icon, không phải nút to */
ul.products li.product a.compare.button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 32px;
	margin: 4px 0 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--kio-muted);
	font-size: 13px;
	font-weight: 500;
}
ul.products li.product a.compare.button::before {
	content: "⇄";
	font-size: 1rem;
}
ul.products li.product a.compare.button:hover,
ul.products li.product a.compare.button.added {
	color: var(--kio-brand);
}

/* Bộ lọc: tiêu đề nhóm gọn hơn */
#secondary .widget-title {
	font-size: 1rem;
	font-weight: 700;
}

/* Nút "Bộ lọc" + ngăn kéo: chỉ trên mobile */
.kio-filter-toggle,
.kio-filter-close,
.kio-filter-backdrop {
	display: none;
}

@media (max-width: 767px) {
	.kio-filter-toggle {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		min-height: 44px;
		padding: 0 14px;
		border: 1px solid var(--kio-brand);
		border-radius: var(--kio-radius);
		background: #fff;
		color: var(--kio-brand);
		font-weight: 700;
	}
	.kio-filter-toggle svg {
		width: 18px;
		height: 18px;
	}

	#secondary {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 10001; /* trên thanh công cụ dưới đáy của Storefront (z-index 9999) */
		width: min(86vw, 360px);
		margin: 0;
		padding: 56px 20px 24px;
		overflow-y: auto;
		background: #fff;
		transform: translateX(100%);
		transition: transform 0.25s ease;
	}
	.kio-filters-open #secondary {
		/* Chỉ có bóng khi mở: lúc giấu, bóng vẫn đổ vào mép phải màn hình. */
		box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
		transform: none;
	}

	.kio-filter-close {
		display: block;
		position: absolute;
		top: 8px;
		right: 8px;
		width: 44px;
		height: 44px;
		border: 0;
		background: none;
		font-size: 28px;
		line-height: 1;
		color: var(--kio-text);
	}

	.kio-filter-backdrop {
		position: fixed;
		inset: 0;
		z-index: 10000;
		background: rgba(17, 24, 39, 0.45);
	}
	.kio-filters-open .kio-filter-backdrop {
		display: block;
	}
	.kio-filters-open {
		overflow: hidden; /* không cuộn trang phía sau khi ngăn kéo đang mở */
	}
}

@media (prefers-reduced-motion: reduce) {
	#secondary,
	.kio-nav,
	.site-header.is-compact .kio-nav,
	.kio-toast,
	.kio-toast.is-visible,
	.kio-carousel__nav,
	.kio-product-row ul.products,
	ul.products li.product,
	ul.products li.product::after,
	ul.products li.product .button,
	ul.products li.product .kio-card-media img {
		transition: none;
	}

	.kio-toast {
		transform: none;
	}

	.kio-card-media::before {
		animation: none;
	}

	ul.products li.product:hover,
	ul.products li.product:hover .kio-card-media img {
		transform: none;
	}
}

/* Popup so sánh trên mobile: cột nhãn hẹp, dính trái, cột sản phẩm cuộn ngang. Selector phải có ID như compare.css. */
@media (max-width: 768px) {
	#yith-woocompare table.compare-list {
		width: max-content;
		min-width: 100%;
	}

	#yith-woocompare table.compare-list tbody th:not(.filler) {
		position: sticky;
		left: 0;
		z-index: 1;
		width: 96px;
		min-width: 96px;
		max-width: 96px;
		padding: 8px;
		background: var(--kio-card);
		white-space: normal;
	}

	#yith-woocompare table.compare-list td:not(.filler) {
		width: 150px;
		min-width: 150px;
		max-width: 150px;
		padding: 8px;
	}
}

/* Header mobile: logo và cụm icon cùng một dòng. Nút vẫn rộng 44px để dễ bấm. */
@media (max-width: 767px) {
	.kio-header__actions {
		gap: 2px;
	}

	.kio-action {
		min-width: 44px;
	}
}