/**
 * Solus Theme - Main Styles
 */

:root {
	--solus-primary: #55a61d;
	/* Xanh dùng LÀM NỀN CHO CHỮ TRẮNG. #55a61d trên nền trắng chỉ đạt 3.06:1,
	   dưới chuẩn WCAG AA (4.5:1). #3f7d15 đạt 5.05:1. */
	--solus-green-chu-trang: #3f7d15;
	--solus-primary-dark: #458a17;
	--solus-primary-light: #6fbf2a;
	--solus-nav-hover: #f0c040;
	--solus-accent: #e53935;
	--solus-bg: #f5f7f5;
	--solus-white: #ffffff;
	--solus-text: #333333;
	--solus-text-light: #666666;
	--solus-border: #e0e0e0;
	--solus-radius: 8px;
	--solus-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	--solus-container: 1200px;
	/* Montserrat cho ca hai. */
	--solus-font-body: "Montserrat", "Segoe UI", Roboto, Arial, sans-serif;
	--solus-font-heading: "Montserrat", "Segoe UI", Roboto, Arial, sans-serif;
	--solus-section-y: 20px;
	--solus-section-y-bottom: 20px;
	--solus-section-y-compact-top: 14px;
	--solus-section-y-compact-bottom: 18px;
	--solus-section-y-product-bottom: 22px;
	--solus-section-y-sm: 10px;
	--solus-section-y-banner: 30px;
	--solus-section-header-mb: 12px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--solus-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--solus-text);
	background: var(--solus-white);
}

.font-coiny {
	font-family: var(--solus-font-heading);
}

h1,
h2,
h3,
h4,
h5,
h6,
.site-logo__name,
.solus-hero__title,
.solus-hero__subtitle,
.solus-featured-cats__title,
.solus-featured-cat-card__title,
.solus-mega-menu__title,
.solus-post-card__title,
.solus-product-details__title,
.solus-product-coupons__badge,
.footer-widget-area .widget-title,
.entry-title,
.page-title,
.solus-page-title,
.solus-news-archive__title {
	font-family: var(--solus-font-heading);
	font-weight: 400;
}

a {
	color: var(--solus-primary);
	text-decoration: none;
}

a:hover {
	color: var(--solus-primary-dark);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.container {
	max-width: var(--solus-container);
	margin: 0 auto;
	padding: 0 15px;
}

/* Header */
.site-header {
	background: var(--solus-white);
}

.site-header__top {
	padding: 14px 0;
	position: relative;
	z-index: 210;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 28px;
}

.site-branding {
	flex-shrink: 0;
}

.site-branding .custom-logo-link img {
	max-height: 56px;
	width: auto;
}

.site-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--solus-primary);
}

.site-logo__icon {
	flex-shrink: 0;
	width: 84px;
	height: 84px;
}

.site-logo__text-wrap {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.site-logo__name {
	font-size: 26px;
	color: var(--solus-primary);
}

.site-logo__tagline {
	font-size: 13px;
	font-weight: 500;
	color: var(--solus-primary);
	opacity: 0.9;
}

.site-header__search {
	flex: 1;
	max-width: 520px;
	margin: 0 auto;
}

.solus-search-form {
	position: relative;
	display: flex;
	align-items: center;
}

.solus-search-form input {
	width: 100%;
	height: 44px;
	padding: 0 48px 0 20px;
	border: 1px solid #d9d9d9;
	border-radius: 999px;
	outline: none;
	font-size: 14px;
	color: var(--solus-text);
	background: #fff;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.solus-search-form input::placeholder {
	color: #aaa;
}

.solus-search-form input:focus {
	border-color: var(--solus-primary);
	box-shadow: 0 0 0 3px rgba(76, 160, 36, 0.12);
}

.solus-search-form__submit {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border: none;
	background: transparent;
	color: #888;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	padding: 0;
}

.solus-search-form__submit:hover {
	color: var(--solus-primary);
}

.site-header__utilities {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-shrink: 0;
}

.solus-header-utility {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--solus-text);
}

.solus-header-utility--hotline:hover {
	color: var(--solus-text);
}

.solus-header-utility__icon {
	color: var(--solus-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.solus-header-utility__text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	font-size: 13px;
}

.solus-header-utility__label {
	color: var(--solus-text);
	font-size: 12px;
}

.solus-header-utility__text strong {
	font-size: 15px;
	font-weight: 700;
	color: #111;
}

.solus-header-utility--account .solus-header-utility__text a {
	color: #111;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
}

.solus-header-utility--account .solus-header-utility__name {
	color: #111;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.solus-header-utility--account .solus-header-utility__text a:hover {
	color: var(--solus-primary);
}

/* TẠM ẨN — cụm "Đăng nhập / Đăng ký" trên header, ở MỌI kích thước.
   Chủ site yêu cầu 05/09/2026. Gỡ đúng khối này là hiện lại như cũ,
   không cần đụng header.php (markup vẫn còn nguyên).
   Kèm theo: cụm này rộng 108px và là thứ làm hàng logo trên header
   gãy xuống 3 hàng ở màn hình hẹp dưới 310px CSS. */
.solus-header-utility--account {
	display: none;
}

.solus-cart-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 0 18px;
	background: var(--solus-primary);
	color: #fff !important;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	transition: background 0.2s;
	flex-shrink: 0;
}

.solus-cart-btn:hover {
	background: var(--solus-primary-dark);
	color: #fff !important;
}

.solus-cart-btn__icon {
	position: relative;
	display: flex;
	align-items: center;
}

.solus-cart-btn__count {
	position: absolute;
	top: -8px;
	right: -10px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	background: var(--solus-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* Navigation */
.main-navigation {
	background: var(--solus-primary);
	position: relative;
	z-index: 200;
}

.main-navigation__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	position: relative;
}

.primary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 2px;
}

.primary-menu > li {
	position: static;
}

.primary-menu > li > a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 14px 18px;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
	transition: color 0.2s;
}

.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a {
	color: #fff;
}

.primary-menu .menu-item-has-children > a::after {
	content: '';
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	margin-top: 2px;
	transition: border-color 0.2s;
}

.primary-menu .solus-mega-parent:hover > a,
.primary-menu .solus-dropdown-parent:hover > a {
	color: var(--solus-nav-hover);
}

/* Submenu panels — fade up on hover */
.solus-mega-menu.solus-submenu-panel {
	position: absolute;
	top: calc(100% + 2px);
	left: 0;
	right: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
	pointer-events: none;
	z-index: 300;
}

.solus-mega-menu.solus-submenu-panel::before {
	content: '';
	position: absolute;
	top: -2px;
	left: 0;
	right: 0;
	height: 2px;
}

.primary-menu > li.solus-mega-parent:hover > .solus-mega-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

/* Mega menu */
.solus-mega-menu {
	padding: 0 15px;
}

.solus-mega-menu__inner {
	max-width: var(--solus-container);
	margin: 0 auto;
	background: #fff;
	border: 2px solid var(--solus-primary);
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
	overflow: hidden;
}

.solus-mega-menu__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	padding: 24px 28px;
}

.solus-mega-menu__col {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 0 16px;
	border-right: 1px solid #eee;
}

.solus-mega-menu__col:last-child {
	border-right: none;
}

.solus-mega-menu__col:first-child {
	padding-left: 0;
}

/* Đổi từ <h4> sang <span> nên phải khai display, không thì nó nằm inline. */
.solus-mega-menu__title {
	display: block;
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.solus-mega-menu__title a {
	color: #222;
}

.solus-mega-menu__title a:hover {
	color: var(--solus-primary);
}

.solus-mega-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.solus-mega-menu__list li {
	margin-bottom: 6px;
}

.solus-mega-menu__list a {
	color: #444;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}

.solus-mega-menu__list a:hover {
	color: var(--solus-primary);
}

/* Simple dropdown (Tin tức) */
.solus-dropdown-parent {
	position: relative !important;
}

.solus-dropdown-menu {
	position: absolute;
	top: calc(100% + 2px);
	left: 0;
	min-width: 220px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
	pointer-events: none;
	z-index: 300;
	padding-top: 0;
}

.solus-dropdown-menu::before {
	content: '';
	position: absolute;
	top: -2px;
	left: 0;
	right: 0;
	height: 2px;
}

.primary-menu > li.solus-dropdown-parent:hover > .solus-dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.solus-dropdown-menu ul {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	background: #fff;
	border: 2px solid var(--solus-primary);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.solus-dropdown-menu li a {
	display: block;
	padding: 10px 18px;
	color: #333;
	font-size: 14px;
	font-weight: 500;
}

.solus-dropdown-menu li a:hover {
	background: #f5f7f5;
	color: var(--solus-primary);
}

.solus-store-locator {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	padding: 8px 0 8px 16px;
	white-space: nowrap;
}

.solus-store-locator:hover {
	color: #fff;
	opacity: 0.9;
}

.solus-store-locator__icon {
	display: flex;
	align-items: center;
}

.solus-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	/* Nút là flex CỘT, nên `justify-content` canh theo trục dọc — chiều ngang do
	   `align-items` lo. Thiếu nó thì ba vạch rơi về đầu trục ngang: nút rộng
	   40px, vạch rộng 22px, nên icon lệch TRÁI 9px so với tâm nút. Đo trên host
	   07/09/2026 ở khổ 344px: vạch nằm ở x=1 trong khi tâm là x=9. */
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
}

.solus-nav-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
}

/* Hero */
.solus-hero {
	position: relative;
	overflow: hidden;
}

.solus-hero__slide {
	display: none;
	min-height: 420px;
	background-size: cover;
	background-position: center;
	position: relative;
}

.solus-hero__slide::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 100%);
}

.solus-hero__slide.is-active {
	display: block;
}

.solus-hero__content {
	position: relative;
	z-index: 1;
	padding: 80px 15px;
	color: #fff;
	max-width: 600px;
}

.solus-hero__tag {
	display: inline-block;
	background: var(--solus-primary-light);
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 12px;
	margin-bottom: 12px;
}

.solus-hero__title {
	font-size: 42px;
	font-weight: 700;
	margin: 0 0 8px;
	line-height: 1.1;
}

.solus-hero__subtitle {
	font-size: 28px;
	font-weight: 600;
	margin: 0 0 16px;
	color: #a5d6a7;
}

.solus-hero__desc {
	font-size: 16px;
	margin-bottom: 24px;
	opacity: 0.9;
}

.solus-hero__dots {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
}

.solus-hero__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: transparent;
	cursor: pointer;
	padding: 0;
}

.solus-hero__dot.is-active {
	background: #fff;
}

/* Buttons */
.solus-btn {
	display: inline-block;
	padding: 12px 28px;
	border-radius: 30px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	border: none;
	transition: all 0.2s;
}

.solus-btn--primary {
	background: var(--solus-primary);
	color: #fff;
}

.solus-btn--primary:hover {
	background: var(--solus-primary-dark);
	color: #fff;
}

.solus-btn--white {
	background: #fff;
	color: var(--solus-primary);
}

/* Featured categories slider */
.solus-featured-cats {
	padding: var(--solus-section-y) 0 var(--solus-section-y-bottom);
	background: var(--solus-white);
}

.solus-featured-cats__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--solus-section-header-mb);
	gap: 16px;
}

.solus-featured-cats__title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: #222;
}

.solus-featured-cats__nav {
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
	z-index: 2;
}

.solus-featured-cats__arrow {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: rgba(0, 0, 0, 0.06);
	color: #555;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, opacity 0.2s;
}

.solus-featured-cats__arrow:hover:not(:disabled) {
	background: rgba(85, 166, 29, 0.15);
	color: var(--solus-primary);
}

.solus-featured-cats__arrow:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.solus-featured-cats__viewport {
	overflow: hidden;
}

/* Đủ chỗ cho mọi thẻ thì cụm mũi tên biến mất, không để hai nút tắt nằm đó.
   Lớp này do main.js gắn, tính lại mỗi lần đổi bề rộng. */
.solus-featured-cats--du-cho .solus-featured-cats__nav {
	display: none;
}

.solus-featured-cats__track {
	display: flex;
	gap: 16px;
	transition: transform 0.4s ease;
	will-change: transform;
	flex-wrap: nowrap;
}

.solus-featured-cat-card {
	flex: 0 0 auto;
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	min-height: 180px;
	border-radius: 14px;
	overflow: hidden;
	isolation: isolate;
	background: #20301c;
	box-shadow: 0 4px 16px rgba(31, 42, 28, 0.16);
}

/* Lớp phủ tối dồn về chân thẻ: phần ảnh phía trên gần như không bị che,
   nhưng vùng có chữ vẫn đủ tương phản trên mọi ảnh sản phẩm. */
.solus-featured-cat-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(12, 20, 10, 0.86) 0%,
		rgba(12, 20, 10, 0.7) 22%,
		rgba(12, 20, 10, 0.46) 42%,
		rgba(12, 20, 10, 0.08) 70%,
		rgba(12, 20, 10, 0) 100%
	);
}

.solus-featured-cat-card__content {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: block;
	padding: 18px;
}

.solus-featured-cat-card__title {
	margin: 0 0 12px;
	font-family: var(--solus-font-heading);
	font-size: 23px;
	font-weight: 700;
	line-height: 1.15;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 16px rgba(0, 0, 0, 0.4);
}

.solus-featured-cat-card__title a {
	font-family: inherit;
	color: #fff;
}

.solus-featured-cat-card__title a:hover {
	color: #fff;
	opacity: 0.92;
}

/* Danh mục con: từ danh sách chữ đổi thành chip bấm được. */
.solus-featured-cat-card__subs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.solus-featured-cat-card__subs li {
	margin: 0;
}

.solus-featured-cat-card__subs a {
	display: inline-block;
	padding: 5px 12px;
	border: 1px solid rgba(255, 255, 255, 0.26);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.4;
	transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.solus-featured-cat-card__subs a:hover {
	background: var(--solus-primary);
	border-color: var(--solus-primary-light);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}

.solus-featured-cat-card__subs a:active {
	transform: translateY(0) scale(0.98);
}

/* Ảnh sản phẩm phủ kín thẻ, nằm dưới lớp phủ và dưới phần chữ. */
.solus-featured-cat-card__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	height: auto;
	min-height: 0;
	padding: 0;
	text-decoration: none;
}

.solus-featured-cat-card__media:hover {
	opacity: 1;
}

.solus-featured-cat-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: center;
	filter: saturate(1.06) brightness(1.08);
	transform: scale(1.01);
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.solus-featured-cat-card:hover .solus-featured-cat-card__media img {
	transform: scale(1.07);
}

@media (prefers-reduced-motion: reduce) {
	.solus-featured-cat-card__media img,
	.solus-featured-cat-card__subs a {
		transition: none;
	}

	.solus-featured-cat-card:hover .solus-featured-cat-card__media img {
		transform: scale(1.01);
	}
}

@media (prefers-reduced-transparency: reduce) {
	.solus-featured-cat-card__subs a {
		background: rgba(20, 30, 16, 0.85);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

@keyframes solus-flash-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* Posts grid */
.solus-posts-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.solus-section--news .solus-posts-grid {
	grid-template-columns: repeat(3, 1fr);
}

.solus-news-slider__track .solus-post-card {
	flex: 0 0 auto;
}

/* Slider drag */
.solus-featured-cats__viewport{
	touch-action: pan-y;
}

.is-dragging {
	user-select: none;
	-webkit-user-drag: none;
}

.solus-post-card {
	background: var(--solus-white);
	border-radius: var(--solus-radius);
	overflow: hidden;
	box-shadow: var(--solus-shadow);
}

.solus-post-card__image {
	display: block;
	aspect-ratio: 3/2;
	overflow: hidden;
}

.solus-post-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.solus-post-card__body {
	padding: 16px;
}

.solus-post-card__title {
	margin: 0 0 8px;
	font-size: 15px;
}

.solus-post-card__title a {
	color: var(--solus-text);
}

.solus-post-card__excerpt {
	margin: 0;
	font-size: 13px;
	color: var(--solus-text-light);
}

.solus-float-actions {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 90;
	display: flex;
	flex-direction: column;
	background: var(--solus-primary);
	border-radius: 10px 0 0 10px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.solus-float-actions__btn {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	transition: background 0.2s;
}

.solus-float-actions__btn:last-child {
	border-bottom: 0;
}

.solus-float-actions__btn:hover {
	background: var(--solus-primary-dark);
	color: #fff;
}

.solus-back-top {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 90;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: var(--solus-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
	transition: background 0.2s, transform 0.2s;
}

.solus-back-top:hover {
	background: var(--solus-primary-dark);
	transform: translateY(-2px);
}

.solus-back-top[hidden] {
	display: none;
}

/* WooCommerce shop / category archive */
.solus-shop {
	padding: 0 0 48px;
	background: var(--solus-bg);
}

.solus-breadcrumb {
	background: transparent;
	padding: 12px 0 0;
	margin: 0;
	border: 0;
}

.solus-breadcrumb .container {
	max-width: var(--solus-container);
}

.solus-breadcrumb__inner {
	padding-bottom: 12px;
	border-bottom: 1px solid #e6e6e6;
}

.solus-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 1;
	color: #333;
}

.solus-breadcrumb__item {
	display: inline-flex;
	align-items: center;
}

.solus-breadcrumb__item:not(:last-child)::after {
	content: '›';
	margin: 0 10px;
	color: #777;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
}

.solus-breadcrumb__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #333;
	text-decoration: none;
	transition: color 0.15s ease;
}

.solus-breadcrumb__link:hover {
	color: var(--solus-primary);
}

.solus-breadcrumb__link:hover .solus-breadcrumb__icon {
	color: var(--solus-primary);
}

.solus-breadcrumb__label,
.solus-breadcrumb__current {
	color: #333;
	font-weight: 400;
}

.solus-breadcrumb__current {
	display: inline-block;
}

.solus-breadcrumb__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--solus-primary);
	line-height: 0;
}

.solus-breadcrumb__icon svg {
	display: block;
	width: 15px;
	height: 15px;
}

/* Màn hẹp: bỏ mắt xích "Trang chủ" (logo ngay trên đã là lối về), chữ 13px,
   khoảng cách dòng 1.45 và row-gap 4px để khi gãy hai dòng chữ không dính
   nhau, dấu › sát hơn. Chủ site chốt 11/09/2026 trên ảnh 300px: bốn mắt xích
   gãy ba dòng, dòng cách 0. Schema breadcrumb vẫn đủ cả bốn — chỉ ẩn CSS. */
@media (max-width: 767px) {
	.solus-breadcrumb { padding-top: 8px; }
	.solus-breadcrumb__inner { padding-bottom: 8px; }
	.solus-breadcrumb__item--home { display: none; }
	.solus-breadcrumb__list { font-size: 13px; line-height: 1.45; row-gap: 4px; }
	.solus-breadcrumb__item:not(:last-child)::after { margin: 0 7px; font-size: 13px; }
}

/* Unified inner-page titles */
/* H1 của trang. Trước để weight 400 và màu xanh thương hiệu — nhìn nhẹ hơn
   cả mấy tiêu đề nhỏ bên dưới, và chữ xanh #55a61d trên nền trắng chỉ đạt
   3.06:1. Đưa về đậm và màu chữ đậm để nó thật sự đứng đầu dàn bài. */
.solus-page-title {
	margin: 0 0 20px;
	font-family: var(--solus-font-heading);
	font-size: 28px;
	line-height: 1.22;
	font-weight: 700;
	letter-spacing: -.01em;
	color: #1c2a20;
}

.site-main > .container {
	padding-top: 24px;
	padding-bottom: 56px;
}

.solus-contact,
.solus-about,
.solus-auth,
.solus-news-archive,
.solus-news-single,
.solus-search-page {
	padding-top: 24px;
	padding-bottom: 56px;
	background: var(--solus-white);
}

/* ============================================================================
   THẺ SẢN PHẨM — khuôn CHUẨN của cả site
   Dùng ở lưới danh mục, lưới tìm kiếm và (đợt sau) dải sản phẩm trang chủ.
   Nằm ở main.css chứ không ở shop.css vì hơn một loại trang dùng tới nó.
   ========================================================================= */
.kl-the {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #e6ece2;
	border-radius: 12px;
	background: #fff;
	transition: .24s cubic-bezier(.2, .7, .3, 1);
}

.kl-the:hover {
	border-color: #6fbf2a;
	transform: translateY(-4px);
	box-shadow: 0 16px 32px -18px rgba(0, 0, 0, .4);
}

.kl-the__anh {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: #fafbfa;
}

.kl-the__anh img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}

.kl-the:hover .kl-the__anh img { transform: scale(1.06); }

/* Ảnh mặc định là hình vẽ nét, phủ kín ô thì vỡ nét — thu nhỏ, canh giữa. */
.kl-the__anh:has(img[src*="placeholder"]) {
	display: grid;
	place-items: center;
	background: #fff;
}

.kl-the__anh img[src*="placeholder"] {
	width: 56%;
	height: auto;
	object-fit: contain;
	opacity: .5;
}

.kl-the:hover .kl-the__anh img[src*="placeholder"] { transform: none; }

.kl-the__giam,
.kl-the__bac {
	position: absolute;
	top: 8px;
	z-index: 2;
	padding: 3px 8px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: .01em;
	font-variant-numeric: tabular-nums;
}

.kl-the__giam {
	left: 8px;
	background: #e03131;
	color: #fff;
}

/* Nhãn bậc giá: càng nhiều bậc càng đáng chú ý, nên chỉ bậc 2 và 3 tô màu.
   Một bậc là chuyện thường của phần lớn mặt hàng — tô hết thì hết nghĩa. */
.kl-the__bac {
	right: 8px;
	border: 1px solid #dfe8d9;
	background: rgba(255, 255, 255, .94);
	color: #5b6d64;
}

.kl-the__bac--2 { border-color: #cfe6b6; background: #eef7e5; color: #3f7d15; }
.kl-the__bac--3 { border-color: #55a61d; background: #55a61d; color: #fff; }

.kl-the__than {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	padding: 10px 11px 12px;
}

.kl-the__ten {
	margin: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.36;
	letter-spacing: -.005em;
}

.kl-the__ten a {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: #333;
	text-decoration: none;
}

.kl-the__ten a:hover { color: #3f7d15; text-decoration: none; }

.kl-the__gia {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: auto;
	font-size: 16px;
	font-weight: 900;
	letter-spacing: -.02em;
	color: var(--solus-green-chu-trang);
	font-variant-numeric: tabular-nums;
}

.kl-the__gia del { font-size: 12.5px; font-weight: 600; color: #9aa5a0; }


/* ---------- SẢN PHẨM ĐÃ XEM (cuối trang sản phẩm) ----------
   Một dải vuốt ngang, không phải slider có nút: bản cũ dùng slider riêng kèm
   ~85 dòng JS chỉ để trượt 2 trang thẻ. Vuốt ngang là thứ điện thoại làm sẵn
   và chuột cũng kéo được, không tốn JS nào.
   Dùng .kl-the — cùng khuôn thẻ với trang danh mục và trang tìm kiếm. */
.kl-daxem {
	margin: 40px 0 0;
	padding: 26px 0 0;
	border-top: 1px solid #e6ece2;
}

.kl-daxem__h {
	margin: 0 0 14px;
	font-family: inherit;
	font-size: 19px;
	font-weight: 900;
	letter-spacing: -.02em;
	color: #1c2a20;
}

.kl-daxem__ray {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding-bottom: 4px;
	scrollbar-width: none;
}

.kl-daxem__ray::-webkit-scrollbar { display: none; }

.kl-daxem__ray .kl-the {
	flex: 0 0 auto;
	width: 178px;
}

@media (max-width: 768px) {
	.kl-daxem { margin-top: 28px; padding-top: 20px; }
	.kl-daxem__h { font-size: 17px; }
	.kl-daxem__ray { gap: 10px; }
	.kl-daxem__ray .kl-the { width: 150px; }
}
.kl-the__gia ins { text-decoration: none; }

/* Responsive */
@media (max-width: 1100px) {
	.site-header__inner {
		flex-wrap: wrap;
		gap: 16px;
	}

	.site-header__search {
		order: 3;
		flex: 1 1 100%;
		max-width: none;
		margin: 0;
	}

	.site-header__utilities {
		margin-left: auto;
	}
}

@media (max-width: 768px) {
	.site-header__utilities {
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	.solus-header-utility--hotline {
		display: none;
	}

	.site-logo__name {
		font-size: 22px;
	}
}

/* Khung của menu điện thoại — ẩn hoàn toàn từ 993px trở lên, nơi menu vẫn là
   thanh ngang + mega menu như cũ. "Xem tất cả …" cũng vậy: trên desktop chính
   tiêu đề nhóm đã là liên kết vào trang danh mục cha rồi. */
.solus-nav-scrim,
.solus-mnav__head,
.solus-mnav__top,
.solus-mnav__foot,
.solus-mega-menu__all {
	display: none;
}

@media (max-width: 992px) {
	/* Header: dồn hai hàng thành một. */
	.site-header__top {
		padding: 9px 0;
	}

	.site-header__inner {
		gap: 9px;
	}

	/* Bỏ chữ, giữ biểu tượng. Tên thương hiệu vẫn còn ở <title>, breadcrumb,
	   đầu menu và chân trang nên không mất dấu nhận diện. */
	.site-logo__text-wrap {
		display: none;
	}

	.site-logo {
		gap: 0;
	}

	.site-logo__icon {
		width: 60px;
		height: 60px;
	}

	.site-branding .custom-logo-link img {
		max-height: 40px;
		width: auto;
	}

	/* Hotline chuyển xuống nút "Gọi ngay" ở đáy menu. */
	.solus-header-utility--hotline {
		display: none;
	}

	.site-header__utilities {
		margin-left: auto;
		gap: 9px;
		flex-wrap: nowrap;
	}

	.solus-header-utility__text strong {
		font-size: 14px;
	}

	.solus-header-utility--account .solus-header-utility__text {
		font-size: 12.5px;
		line-height: 1.18;
	}

	.solus-header-utility--account .solus-header-utility__icon svg {
		width: 24px;
		height: 24px;
	}

	/* Giỏ hàng thu về biểu tượng + số. Chữ "Giỏ hàng" là thứ duy nhất bỏ được
	   mà không mất chức năng, và nó ăn ~62px của một hàng chỉ rộng 345px. */
	.solus-cart-btn {
		position: relative;
		width: 42px;
		height: 42px;
		padding: 0;
		justify-content: center;
		border-radius: 10px;
	}

	.solus-cart-btn__label {
		display: none;
	}

	.solus-cart-btn__icon {
		position: static;
	}

	.solus-cart-btn__count {
		top: -6px;
		right: -6px;
		min-width: 19px;
		height: 19px;
		border: 2px solid #fff;
	}

	.solus-nav-toggle {
		display: flex;
		width: 42px;
		height: 42px;
		border: 1px solid #dcead2;
		border-radius: 10px;
		background: #f4faef;
	}

	.solus-nav-toggle span {
		height: 2.5px;
		background: var(--solus-green-chu-trang);
	}

	.site-header__search {
		order: 3;
		flex: 1 1 100%;
		max-width: none;
		margin: 0;
	}

	/* Ô tìm kiếm dính (lớp solus-tim-dinh do PHP gắn). Cách làm: ghim cả khối
	   header rồi kéo lên đúng chiều cao hàng trên — hàng logo trượt đi, còn lại
	   đúng ô tìm kiếm bám mép trên. --solus-hd-hang1 do JS đo; 60px là giá trị
	   dự phòng khi JS chưa chạy.

	   Phải bỏ hộp .site-header đi: trên điện thoại thanh menu đã thành
	   position:fixed nên .site-header chỉ còn cao đúng bằng phần header trên,
	   mà sticky không bao giờ ra khỏi hộp cha — tầm dính sẽ bằng 0. Bỏ hộp thì
	   hộp cha thành #page, cao bằng cả trang. Giới hạn trong đúng những trang
	   này, nơi khác .site-header giữ nguyên. */
	.solus-tim-dinh .site-header {
		display: contents;
	}

	.solus-tim-dinh .site-header__top {
		position: sticky;
		top: calc(0px - var(--solus-hd-hang1, 60px));
		background: var(--solus-white);
	}

	.solus-nav-scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 990;
		background: rgba(20, 32, 16, 0.55);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.28s ease;
	}

	.solus-nav-scrim.is-on {
		opacity: 1;
		pointer-events: auto;
	}

	/* Xổ từ PHẢI qua trái — cùng phía với nút mở menu ở góc phải header, ngón
	   cái cầm máy một tay với tới được mép phải. */
	.main-navigation {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		z-index: 1000;
		width: 90%;
		max-width: 400px;
		display: flex;
		flex-direction: column;
		background: var(--solus-white);
		transform: translateX(101%);
		transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
		box-shadow: -6px 0 34px rgba(0, 0, 0, 0.22);
	}

	.main-navigation.is-open {
		transform: translateX(0);
	}

	.main-navigation:focus {
		outline: none;
	}

	.solus-mnav__head {
		display: flex;
		align-items: center;
		gap: 10px;
		flex-shrink: 0;
		padding: 12px 14px;
		background: var(--solus-primary);
		color: #fff;
	}

	/* Logo thương hiệu là khối màu đặc, không phải nét đơn sắc như icon cũ:
	   bôi trắng bằng filter sẽ ra một mảng trắng không đọc nổi trên nền xanh.
	   Đặt lên đĩa trắng để giữ nguyên màu logo mà vẫn nổi trên dải header. */
	.solus-mnav__logo {
		width: 40px;
		height: 40px;
		padding: 3px;
		box-sizing: border-box;
		background: #fff;
		border-radius: 50%;
	}

	.solus-mnav__ten {
		font-size: 17px;
		font-weight: 600;
	}

	.solus-mnav__dong {
		margin-left: auto;
		width: 38px;
		height: 38px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: none;
		border-radius: 9px;
		background: rgba(255, 255, 255, 0.18);
		color: #fff;
		cursor: pointer;
	}

	.solus-mnav__top {
		display: flex;
		gap: 9px;
		flex-shrink: 0;
		padding: 13px 14px;
		background: var(--solus-bg);
		border-bottom: 1px solid #e6ece2;
	}

	/* Vàng hổ phách của bảng màu theme. Để xanh thì nút chìm vào dải xanh ngay
	   phía trên, không còn ra dáng nút. */
	.solus-mnav__gia {
		flex: 1;
		min-width: 0;
		display: flex;
		align-items: center;
		gap: 11px;
		padding: 11px 13px;
		border-radius: 10px;
		background: linear-gradient(135deg, #f7ce55 0%, var(--solus-nav-hover) 55%, #e0ab27 100%);
		color: #3a2b04;
		box-shadow: 0 4px 12px -4px rgba(196, 146, 20, 0.65);
	}

	.solus-mnav__gia-ic {
		flex-shrink: 0;
		display: flex;
	}

	.solus-mnav__gia-tx {
		display: flex;
		flex-direction: column;
		line-height: 1.25;
		min-width: 0;
	}

	.solus-mnav__gia-tx strong {
		font-size: 14.5px;
		font-weight: 700;
	}

	.solus-mnav__gia-tx span {
		font-size: 11.5px;
		font-weight: 500;
		opacity: 0.85;
	}

	.solus-mnav__gio {
		position: relative;
		flex-shrink: 0;
		width: 52px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1.5px solid var(--solus-primary);
		border-radius: 10px;
		background: #fff;
		color: var(--solus-green-chu-trang);
	}

	.solus-mnav__gio-n {
		position: absolute;
		top: -7px;
		right: -7px;
		min-width: 20px;
		height: 20px;
		padding: 0 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
		border: 2px solid #fff;
		border-radius: 999px;
		background: var(--solus-accent);
		color: #fff;
		font-size: 11.5px;
		font-weight: 700;
	}

	/* Phần cuộn được của tấm menu.
	   Phải khai lại margin: .container mang sẵn `margin: 0 auto`, mà trong flex
	   column thì margin auto theo trục ngang co phần tử lại rồi căn giữa —
	   danh mục bị bóp còn 215/338px, thừa hai dải trắng hai bên. */
	.main-navigation__inner {
		flex: 1;
		min-height: 0;
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
		max-width: none;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	.primary-menu {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		padding: 0 0 8px;
		gap: 0;
	}

	/* Bấm logo là về trang chủ; Bảng giá sỉ đã thành nút ở đầu menu. */
	.primary-menu > li.solus-menu-home,
	.primary-menu > li.solus-menu-baogia {
		display: none;
	}

	.primary-menu > li {
		order: 2;
		border-bottom: 1px solid #f0f2ee;
	}

	.primary-menu > li > a {
		display: block;
		padding: 13px 16px;
		font-size: 14.5px;
		font-weight: 500;
		color: var(--solus-text);
	}

	.primary-menu > li.current-menu-item > a {
		background: #f2f8ec;
		color: var(--solus-green-chu-trang);
		font-weight: 700;
	}

	/* Mục "Sản phẩm" thành nhãn của khối danh mục, vẫn bấm được để vào cửa hàng. */
	.primary-menu > li.solus-mega-parent {
		order: 1;
		position: static;
		border-bottom: none;
	}

	.primary-menu > li.solus-mega-parent > a {
		padding: 15px 16px 7px;
		font-size: 11.5px;
		font-weight: 700;
		letter-spacing: 0.09em;
		text-transform: uppercase;
		color: #8a9384;
	}

	.primary-menu .menu-item-has-children > a::after {
		display: none;
	}

	.primary-menu .solus-mega-menu {
		position: static;
		display: block;
		width: auto;
		min-width: 0;
		padding: 0;
		border: none;
		background: transparent;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
	}

	.solus-mega-menu__inner {
		padding: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	/* Cột được chia so le nên xếp chồng lên nhau là ra 1,5,9,2,6… Bỏ hộp cột đi
	   rồi xếp lại theo số thứ tự gốc PHP gán cho từng nhóm. */
	.solus-mega-menu__grid {
		display: flex;
		flex-direction: column;
		padding: 0;
	}

	.solus-mega-menu__col {
		display: contents;
	}

	.solus-mega-menu__group {
		margin: 0;
		padding: 0;
		border-bottom: 1px solid #f0f2ee;
	}

	/* CẢ HÀNG là nút xổ nhóm — 338×50px thay cho một mũi tên 50px. Xổ nhóm ra
	   xem là việc khách làm nhiều nhất nên nó phải có vùng chạm lớn nhất; đường
	   vào trang danh mục cha nằm ở dòng "Xem tất cả …" cuối nhóm, chỉ một đường. */
	.solus-mega-menu__title {
		position: relative;
		display: flex;
		align-items: center;
		margin: 0;
		padding: 13px 50px 13px 16px;
		font-size: 14.8px;
		font-weight: 600;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.solus-mega-menu__title::before {
		content: "";
		position: absolute;
		left: 0;
		top: 8px;
		bottom: 8px;
		width: 3px;
		border-radius: 0 3px 3px 0;
		background: var(--solus-primary);
		opacity: 0;
	}

	.solus-mega-menu__group.is-here > .solus-mega-menu__title::before {
		opacity: 1;
	}

	/* Mũi tên xổ vẽ bằng CSS để markup mega menu của desktop không phải đổi. */
	.solus-mega-menu__title::after {
		content: "";
		position: absolute;
		right: 20px;
		top: 50%;
		width: 9px;
		height: 9px;
		margin-top: -6px;
		border-right: 2.1px solid #9aa393;
		border-bottom: 2.1px solid #9aa393;
		transform: rotate(45deg);
		transition: transform 0.22s ease;
	}

	.solus-mega-menu__group.is-open > .solus-mega-menu__title::after {
		margin-top: -2px;
		transform: rotate(-135deg);
	}

	.solus-mega-menu__title a {
		flex: 1;
		min-width: 0;
		color: var(--solus-text);
	}

	.solus-mega-menu__group.is-here > .solus-mega-menu__title a {
		color: var(--solus-green-chu-trang);
	}

	.solus-mega-menu__title a[aria-current="page"] {
		font-weight: 700;
	}

	.solus-mega-menu__title:has(a[aria-current="page"]) {
		background: #f2f8ec;
	}

	.solus-mega-menu__list {
		display: none;
		margin: 0;
		padding: 0 0 8px;
		list-style: none;
	}

	.solus-mega-menu__group.is-open > .solus-mega-menu__list {
		display: block;
	}

	.solus-mega-menu__list a {
		position: relative;
		display: block;
		padding: 9px 16px 9px 30px;
		font-size: 14px;
		color: #5a6355;
	}

	.solus-mega-menu__list a::before {
		content: "";
		position: absolute;
		left: 19px;
		top: 50%;
		width: 5px;
		height: 5px;
		margin-top: -2.5px;
		border-radius: 50%;
		background: #cfd8c8;
	}

	.solus-mega-menu__list a[aria-current="page"] {
		background: #f2f8ec;
		color: var(--solus-green-chu-trang);
		font-weight: 700;
	}

	.solus-mega-menu__list a[aria-current="page"]::before {
		background: var(--solus-primary);
	}

	/* "Xem tất cả …" là lối ra khỏi nhóm, không phải danh mục con thứ N+1:
	   bỏ chấm đầu dòng, đẩy sang phải. */
	.solus-mega-menu__all {
		display: block;
	}

	.solus-mega-menu__all a {
		padding-left: 16px;
		text-align: right;
		font-size: 13.4px;
		font-weight: 600;
		color: var(--solus-green-chu-trang);
	}

	.solus-mega-menu__all a::before {
		display: none;
	}

	/* Menu con của các mục thường giữ nguyên cách xổ cũ. */
	.primary-menu .solus-dropdown-menu {
		position: static;
		display: none;
		padding: 0;
		border: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
	}

	.primary-menu > li.is-open > .solus-dropdown-menu {
		display: block;
	}

	.solus-dropdown-menu a {
		display: block;
		padding: 9px 16px 9px 30px;
		font-size: 14px;
		color: #5a6355;
	}

	/* "Hệ thống cửa hàng" trùng đích với nút Chỉ đường ở đáy menu. */
	.solus-store-locator {
		display: none;
	}

	.solus-mnav__foot {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
		flex-shrink: 0;
		padding: 11px 12px;
		padding-bottom: calc(11px + env(safe-area-inset-bottom));
		border-top: 1px solid #e6ece2;
		background: #fff;
	}

	.solus-mnav__cta {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		height: 58px;
		border: 1.5px solid var(--solus-primary);
		border-radius: 10px;
		background: #fff;
		color: var(--solus-green-chu-trang);
		font-size: 12px;
		font-weight: 600;
		line-height: 1;
		text-align: center;
	}

	.solus-mnav__cta--goi {
		border-color: var(--solus-primary);
		background: var(--solus-primary);
		color: #fff;
	}

	.solus-mnav__zalo {
		font-size: 13px;
		font-weight: 800;
		letter-spacing: -0.3px;
	}

	.solus-featured-cat-card {
		min-height: 160px;
	}

	.solus-posts-grid,
	.solus-section--news .solus-posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}}

@media (max-width: 576px) {
	.solus-hero__title {
		font-size: 28px;
	}

	.solus-hero__subtitle {
		font-size: 20px;
	}

	.solus-featured-cat-card__title {
		font-size: 18px;
	}}

/* Khổ hẹp (Fold màn ngoài 300px): thẻ danh mục KHÔNG khoá tỉ lệ 4/3 nữa — ở 270px
   thẻ chỉ cao 203 mà phần chữ (tiêu đề + 4 chip) cao 228, tiêu đề bị che. Cho thẻ
   cao theo nội dung, chữ xếp dưới đáy, ảnh vẫn phủ kín nhờ __media absolute.
   Đầu section: tiêu đề 19px + mũi tên 34px để "Danh mục nổi bật" nằm một dòng. */
@media (max-width: 360px) {
	.solus-featured-cats__header {
		gap: 10px;
	}

	.solus-featured-cats__title {
		font-size: 19px;
	}

	.solus-featured-cats__arrow {
		width: 34px;
		height: 34px;
	}

	.solus-featured-cat-card {
		display: flex;
		align-items: flex-end;
		aspect-ratio: auto;
		min-height: 190px;
	}

	.solus-featured-cat-card__content {
		position: relative;
		width: 100%;
		padding: 60px 14px 14px;
	}

	.solus-featured-cat-card__title {
		margin-bottom: 8px;
		font-size: 17px;
	}

	.solus-featured-cat-card__subs {
		gap: 6px;
	}

	.solus-featured-cat-card__subs a {
		padding: 4px 10px;
		font-size: 12px;
	}
}

/* ==========================================================================
   Single Product Detail Page
   ========================================================================== */

.solus-product-page {
	padding: 24px 0 40px;
	background: var(--solus-white);
}

.solus-product-detail {
	padding: 0;
}

.solus-product-detail__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 24px;
	align-items: start;
}

.solus-product-detail__main {
	min-width: 0;
}

.solus-product-detail__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
	gap: 24px;
	align-items: start;
	margin-bottom: 28px;
}

.solus-product-detail__summary {
	min-width: 0;
}

.solus-product-summary {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* min-width: 0 KHÔNG được bỏ. Dưới 992px lưới còn MỘT cột, nên cột đó phải
   chứa cả __main lẫn __sidebar. Để mặc định min-width:auto thì cột bị kéo rộng
   bằng chiều rộng tối thiểu của sidebar — sidebar chứa carousel có slide cố định
   412px — và cả trang tràn ngang 71px trên điện thoại. */
.solus-product-detail__sidebar {
	position: sticky;
	top: 16px;
	min-width: 0;
}

.solus-product-gallery__main {
	position: relative;
	border: 1px solid #ececec;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

.solus-product-gallery__figure {
	margin: 0;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.solus-product-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.solus-product-gallery__badge {
	display: none;
}

.solus-product-gallery__nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 34px;
	height: 34px;
	margin-top: -17px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.08);
	cursor: pointer;
	transition: background 0.2s ease;
}

.solus-product-gallery__nav:hover {
	background: rgba(0, 0, 0, 0.14);
}

.solus-product-gallery__nav::before {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	margin: auto;
	border-top: 2px solid #666;
	border-right: 2px solid #666;
}

.solus-product-gallery__nav--prev {
	display: none;
}

.solus-product-gallery__nav--prev::before {
	transform: rotate(-135deg) translate(-1px, 1px);
}

.solus-product-gallery__nav--next {
	right: 10px;
}

.solus-product-gallery__nav--next::before {
	transform: rotate(45deg) translate(-1px, 1px);
}

.solus-product-gallery__thumbs {
	display: flex;
	gap: 10px;
	margin-top: 12px;
	flex-wrap: wrap;
}

/* Trước đây khoá cứng 72px. Năm ảnh thì 5×72 + 4×10 = 400px, vượt cột 397px
   đúng 3px, và ảnh thứ năm rớt xuống hàng dưới nằm một mình. Cho co giãn để một
   hàng chứa hết, có trần để bốn ảnh không phình ra quá to. */
.solus-product-gallery__thumb {
	flex: 1 1 56px;
	width: auto;
	max-width: 96px;
	border: 2px solid #e8e8e8;
	border-radius: 8px;
	padding: 3px;
	background: #fff;
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.solus-product-gallery__thumb.is-active,
.solus-product-gallery__thumb:hover {
	border-color: var(--solus-primary);
}

.solus-product-gallery__thumb img {
	width: 100%;
	height: 72px;
	object-fit: cover;
	border-radius: 6px;
}

.solus-product-summary__meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 1.45;
	color: var(--solus-text-light);
}

.solus-product-summary__meta li {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px;
	min-width: 0;
}

.solus-product-summary__meta li + li::before {
	content: none;
	display: none;
}

.solus-product-summary__meta-label {
	margin-right: 0;
	color: #888;
	white-space: nowrap;
}

.solus-product-summary__meta strong {
	color: #333;
	font-weight: 600;
}

.solus-product-summary__meta .solus-product-summary__stock--in {
	color: var(--solus-primary) !important;
	font-weight: 600;
}

.solus-product-summary__meta .solus-product-summary__stock--out {
	color: var(--solus-accent) !important;
	font-weight: 600;
}

.solus-product-summary__price-box {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 12px;
	margin: 0;
	padding: 14px 18px;
	min-height: 58px;
	background: #f5f5f5;
	border-radius: 10px;
}

.solus-product-summary__price {
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	min-width: 0;
}

.solus-product-summary__price .solus-price,
.solus-product-summary__price .price {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 12px;
	margin: 0;
	line-height: 1.1;
}

.solus-product-summary__price .solus-price__sale,
.solus-product-summary__price .solus-price__sale .woocommerce-Price-amount,
.solus-product-summary__price .solus-price__sale .woocommerce-Price-amount bdi,
.solus-product-summary__price .solus-price__current,
.solus-product-summary__price .solus-price__current .woocommerce-Price-amount,
.solus-product-summary__price .solus-price__current .woocommerce-Price-amount bdi {
	font-size: 30px;
	font-weight: 700;
	color: #e53935;
	text-decoration: none;
}

.solus-product-summary__price .solus-price__regular,
.solus-product-summary__price .solus-price__regular .woocommerce-Price-amount,
.solus-product-summary__price .solus-price__regular .woocommerce-Price-amount bdi {
	font-size: 18px;
	font-weight: 400;
	color: #999;
	text-decoration: line-through;
}

/* WooCommerce fallback when variation price HTML is injected via JS */
.solus-product-summary__price .price:not(.solus-price) {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 12px;
}

.solus-product-summary__price .price:not(.solus-price) ins {
	order: 1;
	text-decoration: none;
	font-size: 30px;
	font-weight: 700;
	color: #e53935;
	background: none;
}

.solus-product-summary__price .price:not(.solus-price) ins .woocommerce-Price-amount,
.solus-product-summary__price .price:not(.solus-price) ins .woocommerce-Price-amount bdi {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	text-decoration: none;
}

.solus-product-summary__price .price:not(.solus-price) del {
	order: 2;
	text-decoration: line-through;
	font-size: 18px;
	font-weight: 400;
	color: #999;
	opacity: 1;
}

.solus-product-summary__price .price:not(.solus-price) del .woocommerce-Price-amount,
.solus-product-summary__price .price:not(.solus-price) del .woocommerce-Price-amount bdi {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	text-decoration: inherit;
}

.solus-product-summary__price .price:not(.solus-price) .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.solus-product-summary__discount-badge {
	flex-shrink: 0;
	margin-left: auto;
	padding: 5px 10px;
	border-radius: 6px;
	background: var(--solus-primary);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.solus-product-summary__purchase {
	--solus-purchase-label-w: 96px;
	--solus-label-control-gap: 18px;
	--solus-field-gap: 14px;
	margin: 0;
}

.solus-product-summary__purchase .woocommerce-variation-price,
.solus-product-summary__purchase .woocommerce-variation-availability {
	display: none !important;
}

.solus-product-summary__purchase .woocommerce-variation {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
}

.solus-product-summary__purchase .single_variation_wrap {
	display: flex;
	flex-direction: column;
	gap: var(--solus-field-gap);
	width: 100%;
	margin: 0;
	padding: 0;
}

.solus-product-summary__purchase .variations_form,
.solus-product-summary__purchase form.cart {
	display: flex;
	flex-direction: column;
	gap: var(--solus-field-gap);
	width: 100%;
	margin: 0;
	padding: 0;
}

.solus-product-actions {
	display: flex;
	flex-direction: column;
	gap: var(--solus-field-gap);
	width: 100%;
	margin: 0;
	padding: 0;
}

.solus-product-actions__qty {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	width: 100%;
}

.solus-product-actions__qty-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--solus-text);
	min-width: 0;
	line-height: 1.3;
}

.solus-product-actions__cta {
	display: flex;
	align-items: stretch;
	gap: 10px;
	width: 100%;
	margin: 0;
}

.solus-product-summary__purchase .reset_variations {
	display: none !important;
}

.solus-product-summary__purchase .variations {
	margin: 0;
	border: 0;
	width: 100%;
}

.solus-product-summary__purchase .variations tbody {
	display: block;
	width: 100%;
}

.solus-product-summary__purchase .variations tr {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
}

.solus-product-summary__purchase .variations th,
.solus-product-summary__purchase .variations td {
	padding: 0;
	border: 0;
	background: transparent;
	vertical-align: middle;
}

.solus-product-summary__purchase .variations .label {
	display: block;
	margin: 0;
	padding: 0;
	text-align: left;
	font-weight: 600;
	color: var(--solus-text);
	font-size: 14px;
	line-height: 1.3;
}

.solus-product-summary__purchase .variations .label label {
	font-weight: 600;
	margin: 0;
}

.solus-product-summary__purchase .variations .value {
	display: block;
	min-width: 0;
}

.solus-product-summary__purchase .variations select {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.solus-variation-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: flex-start;
}

.solus-variation-buttons__btn {
	min-width: 68px;
	padding: 7px 18px;
	border: 1px solid #ddd;
	border-radius: 999px;
	background: #fff;
	color: #555;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: all 0.2s ease;
}

.solus-variation-buttons__btn.is-active {
	border-color: var(--solus-primary);
	color: var(--solus-primary);
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--solus-primary);
}

.solus-product-summary__purchase .quantity,
.solus-product-summary__purchase .solus-quantity {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 0;
	border-radius: 0;
	overflow: visible;
	background: transparent;
	justify-self: start;
}

.solus-quantity__steppers {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.solus-product-summary__purchase .quantity .qty {
	width: 52px;
	height: 32px;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	background: #fff;
	-moz-appearance: textfield;
	padding: 0;
}

.solus-product-summary__purchase .quantity .qty::-webkit-outer-spin-button,
.solus-product-summary__purchase .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.solus-product-summary__purchase .quantity .minus,
.solus-product-summary__purchase .quantity .plus {
	width: 28px;
	height: 28px;
	min-width: 28px;
	padding: 0;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	background: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	color: var(--solus-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.solus-product-summary__purchase .quantity .minus:hover,
.solus-product-summary__purchase .quantity .plus:hover {
	border-color: var(--solus-primary);
	background: #f8fcf4;
}

.solus-product-summary__purchase .woocommerce-variation-add-to-cart {
	display: flex;
	flex-direction: column;
	gap: var(--solus-field-gap);
	margin: 0;
	padding: 0;
}

.solus-product-summary__add-cart {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	/* Bỏ khoá 96px: nhãn "Thêm vào giỏ" bị bóp còn 11px, nhỏ hơn cả chữ phụ
	   trong cùng khối. Cho nút tự rộng theo chữ, có sàn để không teo hơn nút
	   MUA NGAY bên cạnh. */
	min-width: 116px;
	height: 52px;
	padding: 6px 14px !important;
	border: 1px solid var(--solus-primary) !important;
	border-radius: 8px !important;
	background: #fff !important;
	color: var(--solus-primary) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.2;
	flex-shrink: 0;
	cursor: pointer;
	box-shadow: none !important;
	transition: background 0.2s ease;
}

.solus-product-summary__add-cart-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--solus-primary);
	line-height: 0;
}

.solus-product-summary__add-cart-text {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--solus-primary);
	text-align: center;
}

.solus-product-summary__add-cart:hover {
	background: #f3faef !important;
}

.solus-product-summary__buy-now {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 8px 14px;
	border: 0;
	border-radius: 8px;
	background: var(--solus-primary);
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.25;
	cursor: pointer;
	transition: background 0.2s ease;
	box-shadow: none;
}

.solus-product-summary__buy-main {
	display: block;
	font-size: 15px;
	font-weight: 700;
}

.solus-product-summary__buy-sub {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	font-weight: 400;
	opacity: 0.92;
	letter-spacing: 0;
}

.solus-product-summary__buy-now:hover {
	background: #4a9419;
}

.solus-product-summary__buy-now:disabled,
.woocommerce-variation-add-to-cart-disabled .solus-product-summary__buy-now {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

.solus-product-coupons {
	position: relative;
	margin: 36px 0 24px;
	padding: 28px 22px 18px;
	border: 1px dashed #55a61d;
	border-radius: 12px;
	background: #fff;
}

.solus-product-coupons__badge {
	position: absolute;
	top: -15px;
	left: 22px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	background: #fff;
	border: 1px solid #55a61d;
	border-radius: 999px;
	font-size: 16px;
	color: #55a61d;
	line-height: 1.2;
}

.solus-product-coupons__badge-icon {
	display: inline-flex;
	flex-shrink: 0;
	line-height: 0;
}

.solus-product-coupons__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px 24px;
}

.solus-product-coupons__note {
	margin: 18px 0 0;
	text-align: left;
	font-size: 13px;
	line-height: 1.5;
	color: #888;
}

.solus-product-coupons__note strong {
	color: #222;
	font-weight: 700;
}

.solus-product-detail__body {
	display: block;
}

.solus-product-details {
	padding: 0;
	border: 1px solid #ebebeb;
	border-radius: 4px;
	background: #fff;
	overflow: hidden;
}

.solus-product-details__title {
	margin: 0;
	padding: 13px 18px;
	border-bottom: 1px solid #eee;
	background: #f5f5f5;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #1c2a20;
}

/* ---------------------------------------------------------------------------
   THÂN BÀI MÔ TẢ SẢN PHẨM
   Trước: H2 khối 16px/400, H3 bên trong 16.38px/400 — tiêu đề con TO HƠN và
   nặng bằng tiêu đề cha, còn thân bài thì cùng cỡ luôn. Nhìn ra một khối chữ
   phẳng, không có bậc. Thân bài lại trải 864px ≈ 123 ký tự mỗi dòng, quá xa
   mức đọc thoải mái 65–75.
   --------------------------------------------------------------------- */
.solus-product-details__content {
	padding: 18px;
	max-width: 74ch;
	font-size: 15px;
	line-height: 1.75;
	color: #444;
}

.solus-product-details__content > *:first-child {
	margin-top: 0;
}

/* Chừa trên nhiều hơn dưới: tiêu đề thuộc về đoạn đứng sau nó. */
.solus-product-details__content h2,
.solus-product-details__content h3 {
	margin: 30px 0 10px;
	font-weight: 700;
	line-height: 1.3;
	color: #1c2a20;
	letter-spacing: -.01em;
}

.solus-product-details__content h2 { font-size: 20px; }
.solus-product-details__content h3 { font-size: 17px; }
.solus-product-details__content h4 { margin: 24px 0 8px; font-size: 15.5px; font-weight: 700; color: #1c2a20; }

.solus-product-details__content p {
	margin: 0 0 14px;
}

.solus-product-details__content ul,
.solus-product-details__content ol {
	margin: 0 0 16px;
	padding-left: 20px;
}

.solus-product-details__content li {
	margin-bottom: 7px;
	line-height: 1.65;
}

.solus-product-details__content li:last-child {
	margin-bottom: 0;
}

.solus-product-details__content strong,
.solus-product-details__content b {
	color: #1c2a20;
}

.solus-product-details__content a {
	color: #3f7d15;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.solus-product-details__content img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	margin: 6px 0 16px;
}

.solus-product-details__content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 16px;
	font-size: 14.5px;
}

.solus-product-details__content th,
.solus-product-details__content td {
	border: 1px solid #e6ebe4;
	padding: 8px 10px;
	text-align: left;
}

.solus-product-details__content th {
	background: #f5f7f5;
	font-weight: 700;
	color: #1c2a20;
}

.solus-product-details__content blockquote {
	margin: 0 0 16px;
	padding: 2px 0 2px 14px;
	border-left: 3px solid #d9e3d4;
	color: #5d6f64;
}

@media (max-width: 767px) {
	.solus-product-details__content {
		padding: 16px;
		font-size: 15px;
		max-width: none;
	}
	.solus-product-details__content h2 { font-size: 18.5px; margin-top: 26px; }
	.solus-product-details__content h3 { font-size: 16.5px; margin-top: 24px; }
}

.solus-product .woocommerce-notices-wrapper {
	margin-bottom: 16px;
}

@media (max-width: 992px) {
	.solus-product-detail__layout {
		grid-template-columns: 1fr;
	}

	.solus-product-detail__sidebar {
		position: static;
	}

	.solus-product-detail__hero {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.solus-product-summary__meta {
		gap: 6px;
	}

	.solus-product-coupons__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 576px) {
	.solus-page-title {
		font-size: 24px;
		margin-bottom: 16px;
	}

	.solus-product-summary__purchase .variations tr,
	.solus-product-actions__qty {
		flex-direction: column;
		align-items: flex-start;
	}

	.solus-product-summary__purchase .variations .value,
	.solus-product-summary__purchase .quantity {
		justify-self: start;
	}

	.solus-product-summary__purchase .solus-product-actions {
		grid-template-columns: 1fr;
	}

	.solus-product-summary__purchase .solus-product-actions__cta {
		flex-wrap: wrap;
	}

	.solus-product-summary__buy-now {
		min-width: calc(100% - 58px);
	}
}

/* ========== Contact page ========== */
.solus-contact {
	padding: 24px 0 56px;
	background: var(--solus-white);
}

.solus-contact__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.solus-contact__details {
	margin: 0 0 28px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--solus-text);
}

.solus-contact__details p {
	margin: 0 0 6px;
}

.solus-contact__details strong {
	font-weight: 700;
	color: var(--solus-text);
}

.solus-contact__details a {
	color: var(--solus-text);
}

.solus-contact__details a:hover {
	color: var(--solus-primary);
}

.solus-contact__notice {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: var(--solus-radius);
	font-size: 14px;
}

.solus-contact__notice--success {
	background: #eef8e8;
	color: var(--solus-primary-dark);
	border: 1px solid #cfe8bc;
}

.solus-contact__notice--error {
	background: #fdecea;
	color: #b71c1c;
	border: 1px solid #f5c6c2;
}

.solus-contact__form {
	max-width: 520px;
}

.solus-contact__form .wpcf7 {
	margin: 0;
}

.solus-contact__form .wpcf7-form > p {
	margin: 0 0 14px;
}

.solus-contact__form .wpcf7-form-control-wrap {
	display: block;
}

.solus-contact__form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: #b71c1c;
}

.solus-contact__form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 14px;
	border-radius: var(--solus-radius);
	font-size: 14px;
}

.solus-contact__form .wpcf7 form.sent .wpcf7-response-output {
	background: #eef8e8;
	color: var(--solus-primary-dark);
	border-color: #cfe8bc;
}

.solus-contact__form .wpcf7 form.invalid .wpcf7-response-output,
.solus-contact__form .wpcf7 form.failed .wpcf7-response-output,
.solus-contact__form .wpcf7 form.aborted .wpcf7-response-output {
	background: #fdecea;
	color: #b71c1c;
	border-color: #f5c6c2;
}

.solus-contact__form .solus-contact__input,
.solus-contact__form .solus-contact__textarea,
.solus-contact__form input.wpcf7-form-control,
.solus-contact__form textarea.wpcf7-form-control {
	display: block;
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #d5d5d5;
	border-radius: 6px;
	background: var(--solus-white);
	font-family: inherit;
	font-size: 15px;
	color: var(--solus-text);
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	box-sizing: border-box;
}

.solus-contact__form textarea.wpcf7-form-control,
.solus-contact__form .solus-contact__textarea {
	min-height: 140px;
	resize: vertical;
	line-height: 1.5;
}

.solus-contact__form .solus-contact__input::placeholder,
.solus-contact__form .solus-contact__textarea::placeholder,
.solus-contact__form input.wpcf7-form-control::placeholder,
.solus-contact__form textarea.wpcf7-form-control::placeholder {
	color: #999;
}

.solus-contact__form .solus-contact__input:focus,
.solus-contact__form .solus-contact__textarea:focus,
.solus-contact__form input.wpcf7-form-control:focus,
.solus-contact__form textarea.wpcf7-form-control:focus {
	border-color: var(--solus-primary);
	box-shadow: 0 0 0 2px rgba(85, 166, 29, 0.15);
}

.solus-contact__required-note {
	margin: 4px 0 16px;
	font-size: 13px;
	color: var(--solus-text-light);
}

.solus-contact__form .solus-contact__submit,
.solus-contact__form input.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 88px;
	padding: 10px 28px;
	border: none;
	border-radius: 6px;
	background: var(--solus-primary);
	color: var(--solus-white);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease;
	line-height: 1.4;
}

.solus-contact__form .solus-contact__submit:hover,
.solus-contact__form input.wpcf7-submit:hover {
	background: var(--solus-primary-dark);
	color: var(--solus-white);
}

.solus-contact__map {
	position: relative;
	width: 100%;
	min-height: 420px;
	border-radius: 4px;
	overflow: hidden;
	background: #e8ece8;
}

.solus-contact__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 420px;
	border: 0;
}

@media (max-width: 992px) {
	.solus-contact__layout {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.solus-contact__form {
		max-width: none;
	}

	.solus-contact__map,
	.solus-contact__map iframe {
		min-height: 360px;
	}
}

@media (max-width: 576px) {
	.solus-contact {
		padding-bottom: 40px;
	}

	.solus-contact__map,
	.solus-contact__map iframe {
		min-height: 280px;
	}
}

/* ========== Auth pages (Login / Register) ========== */
.solus-auth {
	padding: 24px 0 56px;
	background: var(--solus-white);
}

.solus-auth__layout {
	display: grid;
	gap: 48px 56px;
	align-items: start;
}

.solus-auth__layout--login {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.solus-auth__layout--register {
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.solus-auth__panel {
	min-width: 0;
}

.solus-auth__title {
	margin: 0 0 22px;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
	color: #222;
}

.solus-auth__panel--secondary .solus-auth__title {
	font-family: var(--solus-font-body);
}

.solus-auth__panel--primary > .solus-auth__title.solus-page-title {
	margin-bottom: 20px;
	font-family: var(--solus-font-heading);
	font-size: 28px;
	line-height: 1.25;
	font-weight: 400;
	color: var(--solus-primary);
}

.solus-auth__notice {
	margin: 0 0 18px;
	padding: 12px 14px;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.5;
}

.solus-auth__notice--error {
	background: #fdecea;
	color: #b71c1c;
	border: 1px solid #f5c6c2;
}

.solus-auth__notice--success {
	background: #eef8e8;
	color: var(--solus-primary-dark);
	border: 1px solid #cfe8bc;
}

.solus-auth__form {
	max-width: 100%;
}

.solus-auth__row {
	display: grid;
	gap: 14px;
}

.solus-auth__row--2col {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.solus-auth__field {
	position: relative;
	margin-bottom: 14px;
}

.solus-auth__input {
	display: block;
	width: 100%;
	padding: 11px 16px;
	border: 1px solid var(--solus-primary);
	border-radius: 8px;
	background: var(--solus-white);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	color: var(--solus-text);
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	box-sizing: border-box;
	appearance: none;
}

.solus-auth__input::placeholder {
	color: #999;
}

.solus-auth__input:focus {
	border-color: var(--solus-primary-dark);
	box-shadow: 0 0 0 2px rgba(85, 166, 29, 0.12);
}

.solus-auth__field--date .solus-auth__input,
.solus-auth__field--select .solus-auth__input {
	padding-right: 44px;
}

.solus-auth__input--date {
	color: var(--solus-text);
}

.solus-auth__input--date::-webkit-calendar-picker-indicator {
	opacity: 0;
	position: absolute;
	right: 0;
	width: 44px;
	height: 100%;
	cursor: pointer;
}

.solus-auth__date-icon,
.solus-auth__select-icon {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #888;
	pointer-events: none;
	line-height: 0;
}

.solus-auth__select {
	cursor: pointer;
}

.solus-auth__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-top: 6px;
}

.solus-auth__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	padding: 10px 28px;
	border: none;
	border-radius: 8px;
	background: var(--solus-primary);
	color: var(--solus-white);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease;
	box-sizing: border-box;
}

.solus-auth__btn:hover,
.solus-auth__btn:focus {
	background: var(--solus-primary-dark);
	color: var(--solus-white);
}

.solus-auth__btn--block {
	display: flex;
	width: 100%;
	min-width: 0;
	padding-top: 12px;
	padding-bottom: 12px;
}

.solus-auth__link {
	font-size: 14px;
	color: #444;
	text-decoration: none;
	transition: color 0.15s ease;
}

.solus-auth__link:hover {
	color: var(--solus-primary);
}

.solus-auth__info-box {
	margin-bottom: 18px;
	padding: 16px 18px;
	border: 1px solid var(--solus-primary);
	border-radius: 8px;
	background: var(--solus-white);
}

.solus-auth__info-box p {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: #444;
}

.solus-auth__panel--secondary .solus-auth__title {
	margin-bottom: 18px;
}

@media (max-width: 992px) {
	.solus-auth__layout--login,
	.solus-auth__layout--register {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.solus-auth__panel--secondary {
		padding-top: 8px;
		border-top: 1px solid #eee;
	}
}

@media (max-width: 576px) {
	.solus-auth {
		padding: 20px 0 48px;
	}

	.solus-auth__title {
		font-size: 20px;
		margin-bottom: 18px;
	}

	.solus-auth__row--2col {
		grid-template-columns: 1fr;
	}
}

/* ========== Trang giới thiệu ==========

   Sáu khối, sáu kiểu bố cục. Một màu nhấn duy nhất: xanh của site. Một cỡ bo
   duy nhất: var(--solus-radius).

   Chữ trắng LUÔN đặt trên --solus-green-chu-trang (#3f7d15, 5.05:1), không đặt
   trên --solus-primary (#55a61d, 3.06:1 — dưới chuẩn AA). Đây là cùng cái bẫy
   đã ghi trong khối :root ở đầu file.
   ========================================================================== */

/* MỘT NHỊP DUY NHẤT cho cả trang, do khối cha giữ.

   Trước đây mỗi khối tự đặt padding trên/dưới của nó. Các khối dính sát nhau
   nên khoảng cách THẬT giữa hai khối là `padding dưới` của khối trên cộng
   `padding trên` của khối dưới — hai số do hai chỗ khác nhau quyết định. Đo
   10/09/2026 trên site thật: khoảng cách chạy từ 24px (danh mục → cách mua) tới
   112px (giao hàng → gọi kho), không theo quy luật nào. Chèn thêm một khối chữ
   tự thêm vào giữa là ra một cặp số mới.

   Nay `gap` lo toàn bộ nhịp giữa các khối. Khối con KHÔNG đặt lề dọc nữa; chỉ
   khối có nền riêng mới giữ padding, và padding đó nằm TRONG dải màu nên không
   cộng vào nhịp. */
.solus-about {
	display: flex;
	flex-direction: column;
	gap: 56px;
	padding-top: 24px;
	padding-bottom: 0;
	background: var(--solus-white);
}

/* Khối chữ trơn: nhịp do gap lo, tự đặt lề dọc là phá nhịp. */
.gt-mo,
.gt-kho,
.gt-mua,
.gt-anh,
.gt-them {
	padding-top: 0;
	padding-bottom: 0;
}

/* Slider danh mục là component dùng chung, có lề riêng cho trang chủ. Trong
   trang này thì nhịp do gap lo, nên gỡ lề dọc — CHỈ trong .solus-about, trang
   chủ không đổi. */
.solus-about .solus-featured-cats {
	padding-top: 0;
	padding-bottom: 0;
}

/* CANH ĐỀU HAI BÊN cho mọi đoạn văn xuôi của trang, để mỗi khối chữ đứng thành
   một khối vuông vức thay vì mép phải lởm chởm.

   `hyphens: none` là bắt buộc: tiếng Việt không ngắt từ bằng gạch nối, để trình
   duyệt tự ngắt là ra những chữ cụt vô nghĩa giữa dòng.

   KHÔNG áp cho .gt-goi__chu vì khối đó canh giữa - canh đều chồng lên canh giữa
   thì dòng cuối lệch hẳn sang trái, trông như lỗi.
   Màn hẹp tắt hẳn, xem khối @media bên dưới: cột dưới 480px mà canh đều thì
   khoảng trắng giữa các chữ giãn ra thành sông chảy dọc giữa đoạn. */
.gt-mo__cau,
.gt-mo__muctieu,
.gt-cn__mo,
.gt-kho__chu p,
.gt-cach__chu,
.gt-them__chu,
.gt-giao__chu {
	text-align: justify;
	text-justify: inter-word;
	hyphens: none;
}

/* Nút dùng chung cho cả trang. */
.gt-nut {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 24px;
	border-radius: var(--solus-radius);
	font-family: var(--solus-font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.gt-nut--chinh {
	background: var(--solus-green-chu-trang);
	color: var(--solus-white);
	border: 1px solid var(--solus-green-chu-trang);
}

.gt-nut--chinh:hover,
.gt-nut--chinh:focus-visible {
	background: #35690f;
	color: var(--solus-white);
}

.gt-nut--phu {
	background: var(--solus-white);
	color: var(--solus-green-chu-trang);
	border: 1px solid var(--solus-border);
}

.gt-nut--phu:hover,
.gt-nut--phu:focus-visible {
	border-color: var(--solus-green-chu-trang);
	color: var(--solus-green-chu-trang);
}

.gt-nut:active {
	transform: translateY(1px);
}

/* Tiêu đề khối dùng chung. */
.gt-tieu {
	margin: 0 0 18px;
	font-family: var(--solus-font-heading);
	font-size: 28px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--solus-text);
}

/* ---------- 1. Mở đầu: chia đôi lệch, chữ trái ảnh phải ---------- */

.gt-mo {
	padding: 36px 0 44px;
}

.gt-mo__in {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 44px;
	align-items: center;
}

.gt-mo__ten {
	margin: 0 0 14px;
	font-family: var(--solus-font-heading);
	font-size: clamp(30px, 3.6vw, 42px);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.5px;
	color: var(--solus-text);
}

/* 62ch chứ không phải 46ch: câu giới thiệu là văn xuôi thật của chủ kho, dài
   hai câu. Giữ 46ch thì nó đổ thành cột chữ hẹp và cao lêu nghêu bên cạnh tấm
   ảnh. Vẫn dưới 65ch nên dòng không quá dài để đọc. */
.gt-mo__cau {
	margin: 0 0 22px;
	max-width: 62ch;
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--solus-text-light);
}

/* Mục tiêu của kho. Một vạch xanh mảnh thay cho cái thẻ: nó cần đứng tách khỏi
   câu giới thiệu, không cần đứng trong hộp. */
.gt-mo__muctieu {
	margin: 0 0 24px;
	padding-left: 14px;
	border-left: 3px solid var(--solus-primary);
	max-width: 62ch;
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--solus-text);
}

.gt-mo__anh {
	margin: 0;
}

/* Ảnh kho chụp bằng điện thoại nên có tấm ngang tấm dọc. Thả tự do thì khối
   dùng ảnh dọc cao gấp đôi khối bên cạnh và trang trông gãy nhịp. Ép chung một
   tỉ lệ, cắt bằng object-fit thay vì bóp méo ảnh. */
.gt-mo__anh img,
.gt-kho__anh img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--solus-radius);
}

/* ---------- 2. Chứng nhận: dải xanh, mảng đậm nhất trang ---------- */

.gt-cn {
	padding: 44px 0 48px;
	background: var(--solus-green-chu-trang);
	color: var(--solus-white);
}

.gt-cn__tieu {
	margin: 0 0 10px;
	font-family: var(--solus-font-heading);
	font-size: 28px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--solus-white);
}

/* Trải hết bề ngang, bằng đúng hàng thẻ bên dưới. Để 62ch thì câu dẫn dừng ở
   khoảng 55% trong khi mọi thứ quanh nó chạy hết 100%, nhìn ra ngay là cụt.
   Dòng dài hơn mức đọc thoải mái nên nới line-height bù lại; đây là câu dẫn ba
   dòng, không phải đoạn văn dài. */
.gt-cn__mo {
	margin: 0 0 26px;
	font-size: 16px;
	line-height: 1.8;
	color: rgba(255, 255, 255, .88);
}

.gt-cn__ds {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	/* Mặc định mỗi thẻ cao theo ruột của nó. `stretch` kéo thẻ CHƯA có ảnh cao
	   bằng thẻ có ảnh, thành một hộp xanh rỗng 820px - đo được 10/09/2026 khi
	   thử đúng ca một tờ có ảnh một tờ chưa. */
	align-items: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Tờ nào cũng có ảnh thì cho hai thẻ cao bằng nhau, lấy theo tờ dài hơn. Lớp
   này do template gắn sau khi kiểm từng tờ, xem page-gioi-thieu.php. */
.gt-cn__ds--deu {
	align-items: stretch;
}

/* Hai tờ giấy là hai vật rời nhau, nên ở đây thẻ có nghĩa thật. */
.gt-giay {
	display: flex;
	flex-direction: column;
	padding: 22px 24px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--solus-radius);
	background: rgba(255, 255, 255, .10);
	height: 100%;
	box-sizing: border-box;
}

/* Ảnh chụp tờ giấy. Nền trắng vì giấy tờ vốn trắng: để nguyên nền xanh mờ của
   thẻ thì mép ảnh lẫn vào nền. object-fit: contain chứ KHÔNG cover - cắt mất
   một góc con dấu thì tấm ảnh hết tác dụng làm bằng chứng. */
.gt-giay__anh {
	display: block;
	/* Khi hai thẻ bị kéo cao bằng nhau, phần dôi ra dồn vào Ô ẢNH chứ không đẩy
	   chữ xuống đáy: hai tờ giấy nhìn mới ngang nhau. Lúc không kéo thì
	   flex-basis auto nên ô ảnh vẫn cao theo tỉ lệ 4/3 như cũ. */
	flex: 1 1 auto;
	min-height: 0;
	margin: 0 0 16px;
	border-radius: var(--solus-radius);
	overflow: hidden;
	background: var(--solus-white);
	transition: transform .18s ease;
}

.gt-giay__anh img {
	display: block;
	width: 100%;
	height: 100%;
	/* Khung ngang cho tờ giấy dọc: ảnh nằm gọn giữa nền trắng, thấy trọn tờ mà
	   không cao 800px nuốt cả khối. Bấm vào mở bản đầy đủ để soi con dấu. */
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

.gt-giay__anh:hover,
.gt-giay__anh:focus-visible {
	transform: translateY(-2px);
}

.gt-giay__ten {
	margin: 0 0 8px;
	font-size: 17px;
	line-height: 1.35;
	font-weight: 700;
	color: var(--solus-white);
}

.gt-giay__so {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .92);
}

/* ---------- 3. Kho có gì: chia đôi ĐẢO CHIỀU, ảnh trái ---------- */

.gt-kho {
	padding: 48px 0;
}

.gt-kho__in {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 44px;
	align-items: center;
}

.gt-kho__anh {
	margin: 0;
}

.gt-kho__chu p {
	margin: 0 0 14px;
	max-width: 62ch;
	font-size: 16px;
	line-height: 1.75;
	color: var(--solus-text-light);
}

.gt-kho__chu p:last-child {
	margin-bottom: 0;
}

/* ---------- 4. Mua thế nào: danh sách gạch ngang, không thẻ ---------- */

.gt-mua {
	padding: 4px 0 48px;
}

.gt-cach {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 8px 40px;
	padding: 20px 0;
}

/* Một đường kẻ giữa hai mục, không kẻ trên lẫn dưới mỗi mục. */
.gt-cach + .gt-cach {
	border-top: 1px solid var(--solus-border);
}

.gt-cach__ten {
	margin: 0;
	font-size: 17px;
	line-height: 1.4;
	font-weight: 700;
	color: var(--solus-green-chu-trang);
}

.gt-cach__chu {
	margin: 0;
	max-width: 62ch;
	font-size: 16px;
	line-height: 1.75;
	color: var(--solus-text-light);
}

/* ---------- Khối chữ chủ kho tự thêm ---------- */

/* Cố tình bình thường: nền trắng, chữ như mọi đoạn văn khác. Khối này chèn được
   vào bất kỳ mốc nào trên trang, nên nó phải đứng cạnh khối nào cũng không chỏi.
   Cho nó một kiểu riêng là mỗi lần chủ kho đổi vị trí lại thành một vết lạ. */
.gt-them {
	padding: 8px 0 40px;
}

/* Chữ trải HẾT bề ngang, không cắt cột.

   Đã thử hai bản hẹp hơn và cả hai đều sai: 68ch thì chữ dừng ở khoảng 60% mà
   bên phải trống trơn không có gì lấp (khác khối mở đầu vốn có tấm ảnh ở đó);
   đẩy sang cột phải theo lưới 4fr/8fr thì bên TRÁI lại trống.
   Khối tự thêm chèn được vào bất kỳ mốc nào trên trang, nên nó không dựa được
   vào khối bên cạnh để lấp chỗ - trải hết là cách duy nhất đứng một mình mà
   vẫn vuông vức. Canh đều hai bên lo phần còn lại. */
.gt-them__chu {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.8;
	color: var(--solus-text-light);
}

.gt-them__chu:last-child {
	margin-bottom: 0;
}

/* ---------- Dải ảnh tại kho ---------- */

/* Trên trang chủ khối .kl-anh nằm lồng trong khối "Về kho" nên đã có lề sẵn.
   Đứng riêng một section thì phải tự cấp khoảng thở, không thì nó dính vào hai
   khối trên dưới. */
.gt-anh {
	padding: 4px 0 44px;
}

/* ---------- 5. Giao hàng: dải ảnh tràn, chữ trắng trên màn tối ---------- */

.gt-giao {
	position: relative;
	padding: 64px 0;
	background-color: #22331a;
	background-image: linear-gradient(rgba(18, 28, 12, .62), rgba(18, 28, 12, .62)), var(--gt-giao-anh);
	background-size: cover;
	background-position: center;
}

.gt-giao__in {
	max-width: 720px;
}

.gt-giao__tieu {
	margin: 0 0 12px;
	font-family: var(--solus-font-heading);
	font-size: 28px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--solus-white);
}

.gt-giao__chu {
	margin: 0 0 10px;
	font-size: 17px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .94);
}

.gt-giao__chu:last-child {
	margin-bottom: 0;
}

/* Chữ trắng gạch chân trên nền ảnh đã phủ tối: đủ tương phản, và gạch chân để
   nó đọc ra là LIÊN KẾT chứ không phải một dòng chữ nữa. */
.gt-giao__link {
	display: inline-block;
	margin-top: 18px;
	color: var(--solus-white);
	font-size: 16px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: opacity .18s ease;
}

.gt-giao__link:hover,
.gt-giao__link:focus-visible {
	color: var(--solus-white);
	opacity: .82;
}

/* ---------- 6. Gọi kho ---------- */

.gt-goi {
	padding: 48px 0 56px;
	background: var(--solus-bg);
}

.gt-goi__in {
	text-align: center;
}

.gt-goi__chu {
	margin: 0 auto 24px;
	max-width: 56ch;
	font-size: 16px;
	line-height: 1.75;
	color: var(--solus-text-light);
}

.gt-goi__nut {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* ---------- Màn hẹp: mọi lưới về một cột ---------- */

@media (max-width: 900px) {
	.gt-cn__ds {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.gt-mo__in,
	.gt-kho__in {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	/* Ảnh xuống dưới chữ ở khối kho, giữ thứ tự đọc chữ trước. */
	.gt-kho__anh {
		order: 2;
	}

	.gt-cach {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
		padding: 18px 0;
	}

	/* Màn hẹp thì nhịp hẹp lại, vẫn là MỘT con số. Không đặt lại padding cho
	   từng khối ở đây: làm vậy là dựng lại đúng cái mớ vừa gỡ. */
	.solus-about {
		gap: 36px;
		padding-top: 16px;
	}

	.gt-cn,
	.gt-giao,
	.gt-goi {
		padding: 36px 0 40px;
	}

	/* Màn hẹp: bỏ canh đều. Cột chỉ còn khoảng 300px nên canh đều làm khoảng
	   trắng giữa các chữ giãn ra rất rộng, thành những dòng sông trắng chảy dọc
	   giữa đoạn - xấu hơn hẳn mép phải lởm chởm. */
	.gt-mo__cau,
	.gt-mo__muctieu,
	.gt-cn__mo,
	.gt-kho__chu p,
	.gt-cach__chu,
	.gt-them__chu,
	.gt-giao__chu {
		text-align: left;
	}


	.gt-tieu,
	.gt-cn__tieu,
	.gt-giao__tieu {
		font-size: 23px;
	}

	.gt-goi__nut .gt-nut {
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gt-nut {
		transition: none;
	}

	.gt-nut:active {
		transform: none;
	}
}

/* ==========================================================================
   Cart page (mockup: gift + notes + coupons + freeship sidebar)
   ========================================================================== */

.solus-cart-page {
	padding-bottom: 48px;
	background: #f7f7f7;
}

.solus-cart-page .woocommerce-notices-wrapper:empty {
	display: none;
}

.solus-cart-page .woocommerce > .woocommerce-notices-wrapper {
	max-width: var(--solus-container);
	margin: 0 auto;
	padding: 12px 15px 0;
}

.solus-cart {
	padding: 8px 0 24px;
}

.solus-cart__toolbar {
	display: flex;
	justify-content: flex-start;
	margin: 4px 0 14px;
}

.solus-cart__clear {
	color: #e53935;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.4;
}

.solus-cart__clear:hover {
	color: #c62828;
	text-decoration: underline;
}

.solus-cart__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 28px;
	align-items: start;
}

.solus-cart__aside {
	min-width: 0;
}

.solus-cart__main {
	min-width: 0;
}

.solus-cart__aside {
	position: sticky;
	top: 16px;
}

.solus-cart__items {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 12px;
}

/* Cart item card */
.solus-cart-item {
	position: relative;
	display: flex;
	gap: 16px;
	padding: 16px;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	background: #fff;
}

.solus-cart-item__thumb {
	flex-shrink: 0;
	width: 120px;
}

.solus-cart-item__thumb a,
.solus-cart-item__thumb img {
	display: block;
	width: 100%;
	border-radius: 6px;
}

.solus-cart-item__thumb img {
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.solus-cart-item__body {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 16px;
	padding-right: 8px;
}

.solus-cart-item__name {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: #222;
	font-family: var(--solus-font-body);
}

.solus-cart-item__name a {
	color: inherit;
	text-decoration: none;
}

.solus-cart-item__name a:hover {
	color: var(--solus-primary);
}

.solus-cart-item .variation,
.solus-cart-item .wc-item-meta {
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
	font-size: 12px;
	color: var(--solus-text-light);
}

.solus-cart-item__price {
	flex-shrink: 0;
	align-self: flex-end;
	text-align: right;
	padding-top: 0;
	padding-bottom: 2px;
}

.solus-cart-item__price-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-end;
	gap: 0 6px;
}

.solus-cart-item__price-formula {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
	color: #888;
}

.solus-cart-item__price-total {
	font-size: 16px;
	font-weight: 700;
	color: #222;
	line-height: 1.3;
}

.solus-cart-item__price .amount,
.solus-cart-item__price .woocommerce-Price-amount,
.solus-cart-item__price .woocommerce-Price-amount bdi,
.solus-cart-item__price-total .amount,
.solus-cart-item__price-total .woocommerce-Price-amount,
.solus-cart-item__price-total .woocommerce-Price-amount bdi {
	font-weight: 700;
	color: #222;
}

.solus-cart-item__qty .quantity,
.solus-cart-item__qty .solus-quantity {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.solus-cart-item__qty .quantity .qty {
	width: 36px;
	height: 30px;
	border: 0;
	border-radius: 0;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	background: transparent;
	-moz-appearance: textfield;
	padding: 0;
	color: #222;
}

.solus-cart-item__qty .quantity .qty::-webkit-outer-spin-button,
.solus-cart-item__qty .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.solus-cart-item__qty .quantity .minus,
.solus-cart-item__qty .quantity .plus {
	width: 30px;
	height: 30px;
	min-width: 30px;
	padding: 0;
	border: 1px solid #ccc;
	border-radius: 50%;
	background: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: #555;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.solus-cart-item__qty .quantity .minus:hover,
.solus-cart-item__qty .quantity .plus:hover {
	border-color: var(--solus-primary);
	color: var(--solus-primary);
	background: #f8fcf4;
}

.solus-cart .solus-product-coupons {
	margin: 0;
	background: #fff;
}

.solus-cart__coupons {
	width: 100%;
	margin-top: 18px;
}

.solus-cart__collaterals,
.solus-cart__collaterals .cart-collaterals {
	width: 100%;
	float: none;
	clear: none;
}

.solus-cart-page .solus-cart__collaterals .cart_totals,
.solus-cart-page .solus-cart-summary.cart_totals {
	width: 100% !important;
	max-width: 100%;
	float: none !important;
	clear: none !important;
}

/* Sidebar summary */
.solus-cart-page .solus-cart-summary {
	padding: 12px 14px 10px;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	background: #fff;
	box-sizing: border-box;
}

.solus-cart-page .solus-cart-summary > * {
	margin-top: 0;
}

.solus-cart-page .solus-cart-summary p {
	margin-bottom: 0;
}

.solus-cart-summary {
	padding: 12px 14px 10px;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	background: #fff;
	box-sizing: border-box;
}

.solus-cart-summary.cart_totals {
	width: 100%;
	float: none;
}

.solus-cart-page .solus-cart-shipping{
	margin-bottom: 6px;
}

.solus-cart-page .solus-cart-shipping__track{
	position: relative;
	height: 8px;
	margin: 0 0 5px;
	background: #ececec;
	border-radius: 999px;
	overflow: visible;
}

.solus-cart-page .solus-cart-shipping__message{
	margin: 0;
	padding: 8px 10px;
	border-radius: 8px;
	background: #e8f4ff;
	color: #1a6fb5;
	font-size: 13px;
	line-height: 1.4;
}

.solus-cart-summary__discounts {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	font-size: 13px;
	color: var(--solus-text-light);
}

.solus-cart-summary__discount {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 6px;
}

.solus-cart-summary__rows {
	margin: 12px 0 14px;
}

.solus-cart-summary__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

.solus-cart-summary__row-label {
	font-size: 14px;
	font-weight: 500;
	color: #444;
}

.solus-cart-summary__row-value,
.solus-cart-summary__row-value .amount,
.solus-cart-summary__row-value .woocommerce-Price-amount,
.solus-cart-summary__row-value .woocommerce-Price-amount bdi {
	font-size: 14px;
	font-weight: 600;
	color: #222;
}

.solus-cart-page .solus-cart-summary__total,
.solus-cart-summary__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 4px 0 0;
	padding: 10px 0 0;
	border-top: 1px solid #e8e8e8;
}

.solus-cart-summary__total-label {
	flex-shrink: 0;
	font-size: 16px;
	font-weight: 700;
	color: #222;
	white-space: nowrap;
	line-height: 1.2;
}

.solus-cart-summary__total-value {
	flex-shrink: 0;
	text-align: right;
	white-space: nowrap;
}

.solus-cart-summary__total-value,
.solus-cart-summary__total-value .amount,
.solus-cart-summary__total-value .woocommerce-Price-amount,
.solus-cart-summary__total-value .woocommerce-Price-amount bdi {
	font-size: 26px;
	font-weight: 700;
	color: #e53935;
	line-height: 1.1;
}

.solus-cart-summary__total-value small,
.solus-cart-summary__total-value .includes_tax {
	display: none;
}

.solus-cart-page .solus-cart-summary__checkout,
.solus-cart-page .solus-cart-summary__checkout .wc-proceed-to-checkout,
.solus-cart-summary__checkout,
.solus-cart-summary__checkout .wc-proceed-to-checkout {
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

.solus-cart-page .solus-cart-summary__btn,
.solus-cart-page .solus-cart-summary .checkout-button,
.solus-cart-page .solus-cart-summary a.checkout-button.button.alt {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 44px;
	padding: 10px 12px !important;
	border: 0 !important;
	border-radius: 8px;
	background: var(--solus-primary) !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 0.03em !important;
	text-decoration: none !important;
	text-align: center;
	line-height: 1.25 !important;
	text-transform: uppercase;
	white-space: nowrap;
	box-sizing: border-box !important;
	box-shadow: none !important;
	float: none !important;
}

.solus-cart-page .solus-cart-summary__btn:hover,
.solus-cart-page .solus-cart-summary .checkout-button:hover,
.solus-cart-page .solus-cart-summary a.checkout-button.button.alt:hover {
	background: var(--solus-primary-dark) !important;
	color: #fff !important;
}

.solus-cart-page .solus-cart-summary__continue,
.solus-cart-summary__continue {
	margin: 6px 0 0;
	text-align: center;
}

.solus-cart-summary__continue a {
	color: #1976d2;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.4;
}

.solus-cart-summary__continue a:hover {
	text-decoration: underline;
}

.solus-cart--empty {
	padding: 40px 0 60px;
}

.solus-cart-empty__actions .solus-cart-summary__btn {
	display: inline-flex;
	width: auto;
	min-width: 200px;
	margin: 0 auto;
	text-transform: none;
}

@media (max-width: 992px) {
	.solus-cart__layout {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.solus-cart__aside {
		position: static;
	}
}

@media (max-width: 640px) {
	.solus-cart-item {
		flex-direction: column;
		gap: 12px;
	}

	.solus-cart-item__thumb {
		width: 100%;
		max-width: 160px;
	}

	.solus-cart-item__body {
		flex-direction: column;
		align-items: stretch;
		padding-right: 0;
	}

	.solus-cart-item__price {
		text-align: left;
	}

	.solus-cart .solus-product-coupons__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Checkout — 3-step flow (Shopify-style mockup)
   ========================================================================== */

body.solus-checkout-layout {
	min-height: 100vh;
	background: #fff;
}

body.solus-checkout-layout #page,
body.solus-checkout-layout #content {
	min-height: 100vh;
}

body.solus-checkout-layout .site-header,
body.solus-checkout-layout .site-footer,
body.solus-checkout-layout .solus-breadcrumbs,
body.solus-checkout-layout .solus-float-actions {
	display: none;
}

body.solus-checkout-layout #content {
	padding-top: 0;
	overflow-x: visible;
}

body.solus-checkout-layout #page {
	overflow-x: visible;
}

.solus-checkout-page {
	padding: 0;
	background: #fff;
	min-height: 100vh;
	overflow-x: visible;
}

.solus-checkout-page .entry-header,
.solus-checkout-page .entry-title {
	display: none;
}

.solus-checkout-page .entry-content > .woocommerce > .woocommerce-notices-wrapper {
	max-width: var(--solus-container);
	margin: 0 auto;
	padding: 0 15px 12px;
}

.solus-checkout {
	--solus-checkout-blue: #1976d2;
	--solus-checkout-blue-dark: #1565c0;
	--solus-checkout-sidebar: #fafafa;
	--solus-checkout-left-ratio: 60%;
	--solus-checkout-right-ratio: 40%;
	--solus-checkout-sidebar-left: calc(15px + (min(100vw, var(--solus-container)) - 30px) * 0.6 + max(0px, (100vw - var(--solus-container)) / 2));
	--solus-checkout-left-gap: clamp(36px, 5vw, 56px);
	--solus-checkout-right-gap: clamp(32px, 4vw, 48px);
	--woocommerce: #1976d2;
	--wc-primary: #1976d2;
	--wc-primary-text: #fff;
	--wc-secondary: #fff;
	--wc-secondary-text: #333;
	position: relative;
	min-height: 100vh;
	overflow-x: clip;
}

/* Full-height gray panel — fixed, from 60% container edge to viewport right */
.solus-checkout__sidebar-bg {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: var(--solus-checkout-sidebar-left);
	background: var(--solus-checkout-sidebar);
	border-left: 1px solid #e8e8e8;
	z-index: 0;
	pointer-events: none;
}

.solus-checkout .container {
	display: grid;
	grid-template-columns: minmax(0, var(--solus-checkout-left-ratio)) minmax(0, var(--solus-checkout-right-ratio));
	grid-template-rows: auto 1fr;
	max-width: var(--solus-container);
	width: 100%;
	margin: 0 auto;
	padding: 0 15px;
	min-height: 100vh;
	box-sizing: border-box;
	align-items: stretch;
	position: relative;
	z-index: 1;
}

.solus-checkout-header {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
	padding: 32px var(--solus-checkout-left-gap) 28px 0;
	max-width: none;
}

/* Trang thanh toan moi dung lai bo cuc bang grid that trong checkout.css. */
.solus-checkout:not(.mg-pay) .solus-checkout__layout {
	display: contents;
}

.solus-checkout__main {
	grid-column: 1;
	grid-row: 2;
	padding: 28px var(--solus-checkout-left-gap) 56px 0;
	border-right: 0;
	border-top: 1px solid #e8e8e8;
	min-width: 0;
	max-width: none;
	margin: 0;
	position: relative;
	z-index: 1;
	background: #fff;
}
.solus-checkout-header__logo {
	display: inline-block;
	font-size: 28px;
	font-weight: 700;
	color: #111;
	text-decoration: none;
	line-height: 1.2;
}

.solus-checkout-header__brand .custom-logo {
	max-height: 40px;
	width: auto;
}

.solus-checkout-steps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.4;
}

.solus-checkout-steps__item {
	color: #999;
	text-decoration: none;
}

.solus-checkout-steps__item.is-current {
	color: #333;
	font-weight: 600;
}

.solus-checkout-steps__item.is-done {
	color: #666;
}

a.solus-checkout-steps__item:hover {
	color: var(--solus-checkout-blue);
}

.solus-checkout-steps__sep {
	color: #bbb;
}

.solus-checkout-fields .woocommerce-billing-fields__field-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
}

.solus-checkout-fields .form-row-wide {
	width: 100%;
}

.solus-checkout-fields .form-row-first,
.solus-checkout-fields .form-row-last {
	width: calc(50% - 8px);
}

.solus-checkout-fields #billing_email_field,
.solus-checkout-fields #billing_phone_field {
	width: calc(50% - 8px);
}

.solus-checkout-fields #billing_first_name_field {
	order: 1;
}

.solus-checkout-fields #billing_email_field {
	order: 2;
}

.solus-checkout-fields #billing_phone_field {
	order: 3;
}

.solus-checkout-fields #billing_address_1_field {
	order: 4;
}

.solus-checkout-fields #billing_country_field {
	order: 99;
}

.solus-checkout-fields .form-row {
	margin: 0 0 14px;
	padding: 0;
}

.solus-checkout-fields label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 500;
	color: #555;
}

.solus-checkout-fields .optional {
	display: none;
}

.solus-checkout-fields .input-text,
.solus-checkout-fields select,
.solus-checkout-fields .select2-container .select2-selection {
	width: 100% !important;
	min-height: 44px;
	padding: 10px 14px !important;
	border: 1px solid #d9d9d9 !important;
	border-radius: 4px !important;
	font-size: 14px !important;
	color: #333 !important;
	background: #fff !important;
	box-shadow: none !important;
}

.solus-checkout-fields .select2-container .select2-selection__rendered {
	line-height: 22px !important;
	padding-left: 0 !important;
}

.solus-checkout-fields .select2-container .select2-selection__arrow {
	height: 42px !important;
}

.solus-hidden-field,
.solus-checkout-fields #billing_country_field,
.solus-checkout-fields .woocommerce-account-fields {
	display: none !important;
}

.solus-checkout-fields .input-text.woocommerce-invalid,
.solus-checkout-fields select.woocommerce-invalid {
	border-color: #e53935 !important;
}

.solus-checkout-step__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	margin-top: 24px;
	padding-top: 8px;
}

.solus-checkout-step__actions--payment {
	flex-wrap: nowrap;
}

.solus-checkout-step__back {
	color: var(--solus-checkout-blue);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	flex-shrink: 0;
}

.solus-checkout-step__back:hover {
	text-decoration: underline;
}
.solus-checkout-step__submit{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px;
	border: 0;
	border-radius: 4px;
	background: var(--solus-checkout-blue);
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	line-height: 1.3;
	white-space: nowrap;
}
.solus-checkout-step__submit:hover{
	background: var(--solus-checkout-blue-dark);
	color: #fff !important;
}

/* Hidden WC order review (AJAX target) */
.solus-checkout__order-review {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.solus-checkout-shipping {
	width: 100%;
	max-width: 100%;
	margin: 0 0 4px;
}

.solus-checkout-shipping__list,
.solus-checkout #shipping_method,
.solus-checkout .solus-checkout-shipping__list {
	display: block;
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	overflow: visible;
	background: transparent;
}

.solus-checkout-shipping__option,
.solus-checkout-shipping__list > li {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.solus-checkout-shipping__option + .solus-checkout-shipping__option {
	border-top: 0;
}

.solus-checkout-shipping__label {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
	padding: 8px 0;
	margin: 0;
	cursor: pointer;
	font-size: 14px;
	color: #333;
}

.solus-checkout-shipping__label input[type="radio"] {
	accent-color: var(--solus-checkout-blue);
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin: 0;
}

.solus-checkout-shipping__name {
	flex: 1;
	min-width: 0;
}

.solus-checkout-shipping__cost {
	flex-shrink: 0;
	font-weight: 600;
	color: #333;
	white-space: nowrap;
	text-align: right;
}

.solus-checkout-shipping__notice {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid #d9d9d9;
	border-radius: 4px;
	font-size: 14px;
	color: #666;
	background: #fafafa;
}

/* Payment methods — override WooCommerce purple defaults */
.solus-checkout #payment.woocommerce-checkout-payment,
.solus-checkout .solus-checkout-payment {
	display: block;
	width: 100%;
	max-width: 100%;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

.solus-checkout #payment .wc_payment_methods,
.solus-checkout #payment .payment_methods,
.solus-checkout-payment__list {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid #d9d9d9 !important;
	border-radius: 4px !important;
	overflow: hidden !important;
	background: #fff !important;
}

.solus-checkout #payment .wc_payment_methods::before,
.solus-checkout #payment .wc_payment_methods::after,
.solus-checkout #payment .payment_methods::before,
.solus-checkout #payment .payment_methods::after {
	display: none !important;
}

.solus-checkout-payment__item,
.solus-checkout #payment .wc_payment_method {
	margin: 0 !important;
	padding: 0 !important;
	background: #fff !important;
	border: 0 !important;
	list-style: none !important;
}

.solus-checkout-payment__item + .solus-checkout-payment__item,
.solus-checkout #payment .wc_payment_method + .wc_payment_method {
	border-top: 1px solid #e8e8e8 !important;
}

.solus-checkout-payment__label,
.solus-checkout #payment .wc_payment_method > label {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 14px 16px !important;
	margin: 0 !important;
	cursor: pointer !important;
	font-size: 14px !important;
	color: #333 !important;
	font-weight: 400 !important;
	background: #fff !important;
}

.solus-checkout-payment__label input[type="radio"],
.solus-checkout #payment .input-radio {
	accent-color: var(--solus-checkout-blue) !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
}

.solus-checkout-payment__icon {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	background-size: 24px 24px;
	background-repeat: no-repeat;
	background-position: center;
}

.solus-checkout-payment__icon--cod {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1v22M17 5H9.5a3.5 3.5 0 100 7h5a3.5 3.5 0 110 7H6'/%3E%3C/svg%3E");
}

.solus-checkout-payment__icon--bank {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20M6 15h.01M10 15h4'/%3E%3C/svg%3E");
}

.solus-checkout-payment__icon--default {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
}

.solus-checkout-payment__title {
	flex: 1;
}

/* Hide gateway description boxes — not in mockup */
.solus-checkout #payment .payment_box,
.solus-checkout .payment_box {
	display: none !important;
}

/* Place order row */
.solus-checkout #payment div.form-row.place-order,
.solus-checkout #payment .place-order,
.solus-checkout-place-order {
	display: block !important;
	width: 100% !important;
	margin: 24px 0 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	float: none !important;
}

.solus-checkout #payment .solus-checkout-step__actions--payment,
.solus-checkout .solus-checkout-step__actions--payment {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	flex-wrap: nowrap !important;
}

.solus-checkout #payment .solus-checkout-step__actions--payment .solus-checkout-step__back,
.solus-checkout .solus-checkout-step__actions--payment .solus-checkout-step__back {
	margin-right: auto;
}

.solus-checkout #payment .solus-checkout-step__actions--payment #place_order,
.solus-checkout .solus-checkout-step__actions--payment #place_order,
.solus-checkout .solus-checkout-step__actions--payment .solus-checkout-step__submit {
	margin-left: auto;
	flex-shrink: 0;
}

.solus-checkout #payment #place_order,
.solus-checkout #place_order,
.solus-checkout .solus-checkout-step__submit {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 48px !important;
	padding: 12px 28px !important;
	border: 0 !important;
	border-radius: 4px !important;
	background: var(--solus-checkout-blue) !important;
	color: #fff !important;
	/* Theo thang chữ chốt 07/09/2026: nút chính đọc ngang tên mặt hàng.
	   Sửa TẠI ĐÂY chứ không chồng thêm một rule mạnh hơn ở nơi khác — cả khối
	   này gắn `!important`, nên rule thường ở file khác không bao giờ thắng
	   được, và chồng thêm `!important` nữa là hai chỗ cùng ra lệnh. */
	font-size: 15px !important;
	font-weight: 700 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	float: none !important;
	width: auto !important;
	max-width: none !important;
	cursor: pointer !important;
	line-height: 1.3 !important;
}

.solus-checkout #payment #place_order:hover,
.solus-checkout #place_order:hover,
.solus-checkout .solus-checkout-step__submit:hover {
	background: var(--solus-checkout-blue-dark) !important;
	color: #fff !important;
}

/* Hide privacy / terms on checkout */
.solus-checkout .woocommerce-privacy-policy-text,
.solus-checkout .woocommerce-terms-and-conditions-wrapper,
.solus-checkout .woocommerce-terms-and-conditions-link {
	display: none !important;
}

/* Order summary sidebar — content in container, gray bg via .solus-checkout::before */
.solus-checkout-summary {
	grid-column: 2;
	grid-row: 1 / -1;
	position: sticky;
	top: 0;
	align-self: stretch;
	width: 100%;
	min-height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 32px var(--solus-checkout-right-gap) 40px var(--solus-checkout-right-gap);
	background: transparent;
	border-left: 0;
	box-sizing: border-box;
	z-index: 5;
	-webkit-overflow-scrolling: touch;
}

.solus-checkout-summary__items {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 20px;
}

.solus-checkout-summary__item {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: 12px;
	align-items: start;
}

.solus-checkout-summary__thumb {
	position: relative;
	width: 64px;
}

.solus-checkout-summary__thumb img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid #e8e8e8;
	background: #fff;
}

.solus-checkout-summary__qty {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: #888;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

.solus-checkout-summary__name {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: #333;
}

.solus-checkout-summary__price {
	font-size: 14px;
	font-weight: 600;
	color: #333;
	text-align: right;
	white-space: nowrap;
}

.solus-checkout-summary__coupon-row {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
}

.solus-checkout form.checkout_coupon.solus-checkout-summary__coupon,
.solus-checkout .solus-checkout-summary form.checkout_coupon {
	border: 0 !important;
	padding: 0 !important;
	margin: 0 0 20px !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.solus-checkout-summary__coupon-input {
	flex: 1;
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid #d9d9d9;
	border-radius: 4px;
	font-size: 14px;
}

.solus-checkout-summary__coupon-btn {
	min-height: 40px;
	padding: 8px 16px;
	border: 1px solid #d9d9d9;
	border-radius: 4px;
	background: #eee;
	color: #555;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.solus-checkout-summary__coupon-btn:hover {
	background: #e0e0e0;
}

.solus-checkout-summary__totals {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
	font-size: 14px;
	color: #555;
}

.solus-checkout-summary__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.solus-checkout-summary__shipping .woocommerce-shipping-methods,
.solus-checkout-summary__shipping ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
}

.solus-checkout-summary__grand {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid #ddd;
}

.solus-checkout-summary__grand-label {
	font-size: 16px;
	font-weight: 600;
	color: #222;
}

.solus-checkout-summary__grand-value {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: 22px;
	font-weight: 700;
	color: #222;
	text-align: right;
}

.solus-checkout-summary__currency {
	font-size: 13px;
	font-weight: 500;
	color: #888;
}

.solus-checkout-summary__grand-value .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.solus-checkout-page .woocommerce-error,
.solus-checkout-page .woocommerce-info,
.solus-checkout-page .woocommerce-message {
	margin-bottom: 16px;
}

@media (max-width: 992px) {
	.solus-checkout__sidebar-bg {
		display: none;
	}

	.solus-checkout .container {
		display: block;
		padding: 0 15px;
	}

	.solus-checkout-header {
		padding: 24px 0 20px;
	}

	.solus-checkout__layout {
		display: block;
	}

	.solus-checkout__main {
		padding: 24px 0 32px;
		border-bottom: 1px solid #e8e8e8;
	}

	.solus-checkout-summary {
		position: static;
		width: 100%;
		min-height: 0;
		padding: 24px 0 32px;
		background: var(--solus-checkout-sidebar);
		border-left: 0;
		border-top: 1px solid #e8e8e8;
	}
	.solus-checkout-fields .form-row-first,
	.solus-checkout-fields .form-row-last,
	.solus-checkout-fields #billing_email_field,
	.solus-checkout-fields #billing_phone_field {
		width: 100%;
	}

	.solus-checkout-step__actions {
		flex-direction: column-reverse;
		align-items: stretch;
	}
	.solus-checkout-step__submit{
		width: 100%;
		white-space: normal;
		text-align: center;
	}

	.solus-checkout-step__actions--payment {
		flex-direction: column-reverse;
		align-items: stretch;
	}
}

/* ==========================================================================
   Global popup notices
   ========================================================================== */

body.solus-popup-ready .woocommerce-notices-wrapper,
body.solus-popup-ready .woocommerce-NoticeGroup,
body.solus-popup-ready .woocommerce-NoticeGroup-checkout,
body.solus-popup-ready .woocommerce-message,
body.solus-popup-ready .woocommerce-error,
body.solus-popup-ready .woocommerce-info {
	display: none !important;
}

.solus-popup {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.solus-popup[hidden] {
	display: none !important;
}

.solus-popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, 0.45);
}

.solus-popup__box {
	position: relative;
	width: min(100%, 420px);
	padding: 28px 28px 24px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
	text-align: center;
	animation: solusPopupIn 0.22s ease;
}

@keyframes solusPopupIn {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.solus-popup__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	border-radius: 50%;
	font-size: 28px;
	line-height: 1;
}

.solus-popup--success .solus-popup__icon {
	background: #e8f5e9;
	color: #2e7d32;
}

.solus-popup--success .solus-popup__icon::before {
	content: "✓";
}

.solus-popup--error .solus-popup__icon {
	background: #ffebee;
	color: #c62828;
}

.solus-popup--error .solus-popup__icon::before {
	content: "!";
	font-weight: 700;
}

.solus-popup--info .solus-popup__icon {
	background: #e3f2fd;
	color: #1565c0;
}

.solus-popup--info .solus-popup__icon::before {
	content: "i";
	font-weight: 700;
	font-family: Georgia, serif;
}

.solus-popup__title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	color: #111;
}

.solus-popup__message {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.55;
	color: #555;
	white-space: pre-line;
}

.solus-popup__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	min-height: 42px;
	padding: 10px 24px;
	border: 0;
	border-radius: 4px;
	background: #1976d2;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.solus-popup__btn:hover {
	background: #1565c0;
}

/* ── Live search dropdown ── */

.site-header__search .solus-search-form {
	position: relative;
	z-index: 1;
}

.solus-search-form.is-open {
	z-index: 2;
}

.solus-search-form.is-open .solus-search-form__input {
	border-color: #7eb8e8;
	box-shadow: 0 0 0 3px rgba(126, 184, 232, 0.18);
}

.solus-live-search {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 3;
}

.solus-live-search__panel {
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
	overflow: hidden;
}

.solus-live-search__section + .solus-live-search__section {
	border-top: 1px solid #f0f0f0;
}

.solus-live-search__heading {
	padding: 14px 16px 8px;
}

.solus-live-search__badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--solus-primary);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.solus-live-search__list {
	margin: 0;
	padding: 0 8px 8px;
	list-style: none;
}

.solus-live-search__item {
	margin: 0;
}

.solus-live-search__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 8px;
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
	transition: background 0.15s ease;
}

.solus-live-search__link:hover {
	background: #f5f9f3;
}

.solus-live-search__thumb {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	border-radius: 8px;
	overflow: hidden;
	background: #fafafa;
}

.solus-live-search__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.solus-live-search__meta {
	min-width: 0;
	flex: 1;
}

.solus-live-search__title {
	display: block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--solus-text);
}

.solus-live-search__excerpt {
	display: -webkit-box;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.4;
	color: #777;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.solus-live-search__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
	font-size: 15px;
	font-weight: 700;
}

.solus-live-search__price ins,
.solus-live-search__price-current {
	text-decoration: none;
	color: var(--solus-green-chu-trang);
}

.solus-live-search__price del {
	color: #999;
	font-size: 13px;
	font-weight: 400;
}

.solus-live-search__footer {
	padding: 8px 16px 14px;
	border-top: 1px solid #f0f0f0;
	text-align: center;
}

.solus-live-search__view-all {
	font-size: 13px;
	font-weight: 600;
	color: var(--solus-primary);
	text-decoration: none;
}

.solus-live-search__view-all:hover {
	text-decoration: underline;
}

.solus-live-search__empty,
.solus-live-search__loading {
	margin: 0;
	padding: 16px;
	font-size: 14px;
	color: #666;
	text-align: center;
}

/* ── Search results page ── */

.solus-search-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin-bottom: 18px;
	border-bottom: 1px solid #ececec;
}

.solus-search-tabs__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 0 12px;
	font-size: 15px;
	font-weight: 500;
	color: var(--solus-text);
	text-decoration: none;
	transition: color 0.2s ease;
}

.solus-search-tabs__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--solus-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
}

.solus-search-tabs__item.is-active .solus-search-tabs__count {
	background: var(--solus-primary-dark);
}

.solus-search-tabs__item:hover {
	color: var(--solus-primary);
}

.solus-search-tabs__item.is-active {
	color: var(--solus-primary);
}

.solus-search-tabs__item.is-active::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 3px;
	border-radius: 999px 999px 0 0;
	background: var(--solus-primary);
}

.solus-search-summary {
	margin: 0 0 20px;
	font-size: 15px;
	color: var(--solus-text);
}

.solus-search-summary__keyword {
	color: var(--solus-primary);
	font-weight: 700;
}

.solus-search-page__products,
.solus-search-page__posts {
	margin-bottom: 28px;
}

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

/* Ô hẹp hơn lưới danh mục: chỉ hạ cỡ chữ, KHÔNG dựng lại khuôn thẻ. */
.solus-search-grid .kl-the__than { gap: 4px; padding: 8px 9px 10px; }
.solus-search-grid .kl-the__ten { font-size: 12.5px; }
.solus-search-grid .kl-the__gia { font-size: 14px; }
.solus-search-grid .kl-the__gia del { font-size: 11px; }

.solus-search-page__posts.solus-posts-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.solus-search-empty {
	margin: 0;
	font-size: 15px;
	color: #666;
}

@media (max-width: 768px) {
	.solus-live-search__thumb {
		flex-basis: 56px;
		width: 56px;
		height: 56px;
	}

	.solus-search-tabs {
		gap: 18px;
	}

	.solus-search-tabs__item {
		font-size: 14px;
	}

	.solus-search-page__posts.solus-posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 1100px) {
	.solus-search-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.solus-search-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.solus-search-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
	}
}

@media (max-width: 520px) {
	.solus-search-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* News category archive */
.solus-news-archive__container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 290px;
	column-gap: 36px;
	row-gap: 0;
	align-items: start;
	max-width: var(--solus-container);
}

.solus-news-archive__title {
	grid-column: 1;
	grid-row: 1;
}

.solus-news-archive__main {
	grid-column: 1;
	grid-row: 2;
	min-width: 0;
}

.solus-news-sidebar {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.solus-news-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px 22px;
}

.solus-news-card {
	background: transparent;
}

.solus-news-card__media {
	position: relative;
}

.solus-news-card__image {
	display: block;
	aspect-ratio: 1200 / 630;
	overflow: hidden;
	background: #f2f2f2;
}

.solus-news-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.solus-news-card:hover .solus-news-card__image img {
	transform: scale(1.03);
}

.solus-news-card__date {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-height: 44px;
	padding: 4px 3px;
	background: var(--solus-primary);
	color: #fff;
	font-family: var(--solus-font-body);
	text-align: center;
	pointer-events: none;
	border-radius: 0 0 8px 0;
	gap: 1px;
}

.solus-news-card__date-day {
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}

.solus-news-card__date-month {
	font-size: 9px;
	font-weight: 600;
	line-height: 1;
}

.solus-news-card__body {
	padding: 12px 0 0;
}

.solus-news-card__title {
	margin: 0 0 7px;
	font-family: var(--solus-font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
}

.solus-news-card__title a {
	color: #111;
	text-decoration: none;
	transition: color 0.2s ease;
}

.solus-news-card__title a:hover {
	color: var(--solus-primary);
}

.solus-news-card__excerpt {
	margin: 0;
	font-size: 13px;
	line-height: 1.65;
	color: #888;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.solus-news-archive__empty {
	margin: 0;
	padding: 32px 0;
	color: var(--solus-text-light);
	text-align: center;
}

.solus-news-archive .nav-links,
.solus-news-archive .pagination {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 36px;
}

.solus-news-archive .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	color: #444;
	font-size: 14px;
	text-decoration: none;
	background: #fff;
}

.solus-news-archive .page-numbers.current {
	background: var(--solus-primary);
	border-color: var(--solus-primary);
	color: #fff;
}

.solus-news-archive a.page-numbers:hover {
	border-color: var(--solus-primary);
	color: var(--solus-primary);
}

.solus-news-sidebar__widget {
	background: #fff;
}

.solus-news-sidebar__heading {
	margin: 0 0 14px;
	padding: 11px 16px;
	border-radius: 8px;
	background: var(--solus-primary);
	color: #fff;
	font-family: var(--solus-font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.solus-news-sidebar__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.solus-news-sidebar__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 0 0 8px;
	margin-bottom: 8px;
	border-bottom: 1px solid #e6e6e6;
}

.solus-news-sidebar__item:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}

.solus-news-sidebar__thumb {
	flex-shrink: 0;
	width: 108px;
	aspect-ratio: 1200 / 630;
	height: auto;
	overflow: hidden;
	background: #f2f2f2;
}

.solus-news-sidebar__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.solus-news-sidebar__title {
	flex: 1;
	min-width: 0;
	font-family: var(--solus-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: #222;
	text-decoration: none;
	transition: color 0.2s ease;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.solus-news-sidebar__title:hover {
	color: var(--solus-primary);
}

@media (max-width: 1024px) {
	.solus-news-archive__container {
		grid-template-columns: minmax(0, 1fr) 250px;
		column-gap: 28px;
	}

	.solus-news-archive__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.solus-news-archive__container {
		grid-template-columns: 1fr;
	}

	.solus-news-archive__title,
	.solus-news-archive__main,
	.solus-news-sidebar {
		grid-column: 1;
	}

	.solus-news-archive__title {
		grid-row: auto;
	}

	.solus-news-archive__main {
		grid-row: auto;
	}

	.solus-news-sidebar {
		grid-row: auto;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
		margin-top: 12px;
	}
}

@media (max-width: 640px) {
	.solus-news-archive__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.solus-news-sidebar {
		grid-template-columns: 1fr;
	}
}

/* News single post */
.solus-news-single .solus-news-archive__main,
.solus-news-single .solus-news-sidebar {
	grid-row: 1;
}

.solus-news-single__article {
	min-width: 0;
}

.solus-news-single__header {
	margin-bottom: 22px;
}

.solus-news-single__title {
	margin: 0 0 10px;
	font-family: var(--solus-font-body);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.35;
	color: #222;
}

.solus-news-single__meta {
	margin: 0;
	font-size: 14px;
	font-style: italic;
	line-height: 1.5;
	color: #999;
}

.solus-news-toc {
	margin: 0 0 28px;
	padding: 18px 20px 14px;
	border: 1px solid #eadfa0;
	border-radius: 8px;
	background: #fffdf3;
}

.solus-news-toc__heading {
	margin: 0 0 12px;
	font-family: var(--solus-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: #222;
}

.solus-news-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.solus-news-toc__item {
	margin: 0 0 6px;
}

.solus-news-toc__item:last-child {
	margin-bottom: 0;
}

.solus-news-toc__item--sub {
	padding-left: 18px;
}

.solus-news-toc__item--hidden {
	display: none;
}

.solus-news-toc:not(.is-collapsed) .solus-news-toc__item--hidden {
	display: block;
}

.solus-news-toc__link {
	display: inline-flex;
	align-items: flex-start;
	gap: 4px;
	font-size: 14px;
	line-height: 1.55;
	color: #333;
	text-decoration: none;
	transition: color 0.2s ease;
}

.solus-news-toc__link:hover {
	color: var(--solus-primary);
}

.solus-news-toc__number {
	flex-shrink: 0;
	font-weight: 600;
}

.solus-news-toc__toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 10px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--solus-primary);
	font-family: var(--solus-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

.solus-news-toc__toggle:hover {
	color: var(--solus-primary-dark);
}

.solus-news-toc__toggle-icon {
	display: inline-flex;
	transition: transform 0.2s ease;
}

.solus-news-toc:not(.is-collapsed) .solus-news-toc__toggle-icon {
	transform: rotate(180deg);
}

.solus-news-single__content {
	font-size: 15px;
	line-height: 1.75;
	color: #444;
}

.solus-news-single__content > :first-child {
	margin-top: 0;
}

.solus-news-single__content h2 {
	margin: 28px 0 16px;
	padding-left: 12px;
	border-left: 4px solid var(--solus-primary);
	font-family: var(--solus-font-body);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--solus-primary);
}

.solus-news-single__content h3 {
	margin: 20px 0 12px;
	font-family: var(--solus-font-body);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.45;
	color: #333;
}

.solus-news-single__content p {
	margin: 0 0 16px;
}

.solus-news-single__content img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0 0 20px;
}

.solus-news-single__content ul,
.solus-news-single__content ol {
	margin: 0 0 16px;
	padding-left: 22px;
}

@media (max-width: 860px) {
	.solus-news-single .solus-news-archive__main,
	.solus-news-single .solus-news-sidebar {
		grid-row: auto;
	}
}

@media (max-width: 640px) {
	.solus-news-single__title {
		font-size: 22px;
	}

	.solus-news-toc {
		padding: 16px;
	}
}

/* ---------------------------------------------------------------------------
   GIÁ SẢN PHẨM — bỏ trùng lặp
   Trước có hai chỗ nói cùng một con số: dòng giá lớn ở trên, và dòng bậc đang
   áp trong khung ngay dưới. Nay chỉ còn khung, và bậc đang áp in số lớn để giá
   vẫn là thứ nổi nhất trang — đây là trang tra giá sỉ, không phải trang ảnh.

   KHÔNG xoá hẳn phần tử giá: main.js:1503 dùng [data-solus-product-price] để
   đồng bộ giá biến thể. Hiện 195 mặt hàng đều là simple nên chưa chạy, nhưng
   xoá đi thì ngày thêm hàng biến thể sẽ gãy mà không ai nhớ vì sao.
   --------------------------------------------------------------------- */
.solus-product-summary__price-box.mg-sp__gia-an {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.mg-sp__bac {
	margin-top: 16px;
	padding: 14px 16px;
	border: 1px solid var(--solus-border);
	border-radius: var(--solus-radius);
	background: #fff;
}

.mg-sp__bac-nhan {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #1c2a20;
}

.mg-sp__bac-list { margin: 0; padding: 0; list-style: none; }

.mg-sp__bac-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	font-size: 14px;
	color: #5d6f64;
}

.mg-sp__bac-row + .mg-sp__bac-row { border-top: 1px solid #eef1ee; }

.mg-sp__bac-gia {
	font-weight: 700;
	color: #1c2a20;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.mg-sp__bac-gia i { font-style: normal; font-size: 12.5px; font-weight: 400; color: var(--solus-text-light); }

/* Bậc đang áp là giá khách trả ngay bây giờ — cho nó cỡ của một cái giá. */
.mg-sp__bac-row.is-dang-ap { padding-bottom: 12px; }
.mg-sp__bac-row.is-dang-ap .mg-sp__bac-moc { color: #1c2a20; font-weight: 700; }
.mg-sp__bac-row.is-dang-ap .mg-sp__bac-gia {
	font-size: 28px;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--solus-green-chu-trang);
}
.mg-sp__bac-row.is-dang-ap .mg-sp__bac-gia i { font-size: 14px; }

.mg-sp__bac-ghi { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: #8a978d; }
.mg-sp__lienhe { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: #5d6f64; }

@media (max-width: 560px) {
	.mg-sp__bac-row.is-dang-ap .mg-sp__bac-gia { font-size: 25px; }
}

/* =========================================================================
   CHÂN TRANG — port từ bản đã duyệt ở redesign/_footer.html
   Bốn khối: pháp nhân · hai nhóm link · kênh liên hệ, rồi thanh bản quyền.
   Số cột do PHP đếm và truyền qua --kl-foot-cot, nên gán thêm menu vào
   Giao diện → Thiết lập Menu là lưới tự nới ra, không phải sửa CSS.
   ========================================================================= */
.kl-foot {
	margin-top: 40px;
	background: #efefef;
	color: #444;
}

/* Chọn qua thẻ cha: phần tử này mang CẢ hai lớp .container và .kl-foot__luoi,
   hai lớp cùng điểm ưu tiên nên ai khai sau thì thắng — padding của footer sẽ
   phụ thuộc vào thứ tự dòng trong file. Thêm một cấp để không phải trông cậy
   vào thứ tự. */
/* Cột link rộng bằng ĐÚNG nhãn dài nhất của nó (max-content), không chia đều 1fr.
   Chia đều thì cột "Thông tin" rộng 238px mà chữ chỉ chiếm 88px, 151px thừa rơi
   hết vào khe bên phải: khe của lưới đều 32px nhưng khe mắt nhìn thấy thành
   35 · 183 · 89px. Cột pháp nhân giữ fr để nó nuốt phần dư và xuống dòng.
   minmax(0, max-content) chứ không max-content trần: màn hẹp thì cột còn co được
   thay vì đẩy tràn ngang.
   Cột pháp nhân cũng phải chặn bằng một bề rộng tối đa, KHÔNG để 1.5fr: để fr thì
   nó nuốt sạch phần dư vừa giải phóng và khe đầu tiên phình lên 165px. Chặn rồi
   thì lưới còn chỗ trống, space-between rải đều chỗ trống đó vào các khe. */
.kl-foot > .kl-foot__luoi {
	display: grid;
	grid-template-columns: minmax(0, 24rem) repeat(var(--kl-foot-cot, 3), minmax(0, max-content));
	justify-content: space-between;
	gap: 28px 32px;
	padding: 36px 15px 28px;
}

.kl-foot__luoi > * { min-width: 0; }

.kl-foot p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.65; }
/* Ba dòng thông tin có biểu tượng dẫn. Cột biểu tượng cố định 16px để dòng thứ
   hai của địa chỉ thụt vào thẳng hàng với dòng đầu, không chui xuống dưới icon. */
.kl-foot__dong { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; align-items: start; }
.kl-foot__dong > svg { width: 16px; height: 16px; margin-top: 2px; color: #93a69b; }

.kl-foot__nhan {
	margin: 0 0 14px;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #222;
}

.kl-foot ul { margin: 0; padding: 0; list-style: none; }
.kl-foot li + li { margin-top: 2px; }
.kl-foot a { color: #555; font-size: 13.5px; text-decoration: none; }

/* Vùng chạm 44px theo PRODUCT.md. Link footer trên điện thoại nằm sát nhau,
   không đủ cao thì bấm nhầm sang dòng bên cạnh. */
.kl-foot li a { display: block; padding: 11px 0; min-height: 44px; }
.kl-foot a:hover { color: var(--solus-green-chu-trang); text-decoration: underline; }

/* ---- khối pháp nhân ---- */
/* Logo giờ là một ảnh đứng một mình, không còn cụm ảnh + chữ, nên canh giữa
   cột cho cân với nút gọi phía dưới. display:flex + width:fit-content để
   margin auto ăn được; inline-flex thì margin auto không canh giữa. */
.kl-foot a.kl-foot__logo {
	display: flex;
	width: fit-content;
	margin: 0 auto 12px;
	padding: 0;
	min-height: 0;
}
.kl-foot a.kl-foot__logo:hover { text-decoration: none; opacity: .9; }
.kl-foot a.kl-foot__logo:focus-visible {
	outline: 2px solid var(--solus-green-chu-trang);
	outline-offset: 3px;
	border-radius: 6px;
}
/* Bản logo có sẵn chữ "Kho Lạnh Dĩ An" thay cho cụm ảnh-tròn + chữ rời: tên kho
   nằm trong ảnh nên bỏ span chữ đi, và alt của ảnh gánh phần tên cho máy đọc
   màn hình lẫn công cụ tìm kiếm. */
.kl-foot__logo-anh { width: 230px; height: auto; display: block; }

/* Nút gọi canh giữa cột pháp nhân. Ba dòng chữ phía trên có biểu tượng dẫn nên
   phải canh trái, riêng nút là khối đứng một mình — để lệch trái thì cột nhìn hụt
   một bên. display:flex + width:fit-content để margin auto ăn được; inline-flex
   thì margin auto không canh giữa. */
.kl-foot a.kl-foot__gd {
	display: flex;
	width: fit-content;
	margin-inline: auto;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding: 10px 16px;
	min-height: 44px;
	background: var(--solus-green-chu-trang);
	color: #fff;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
}
.kl-foot a.kl-foot__gd:hover { background: #2f6a0d; color: #fff; text-decoration: none; }

/* ---- kênh liên hệ ---- */
.kl-foot__kn { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.kl-foot__kn li { margin: 0; }
.kl-foot a.kl-foot__kn-nut {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-height: 44px;
	padding: 0;
	border-radius: 50%;
	color: #fff;
	border: 2px solid rgba(0, 0, 0, .10);
	transition: transform .15s ease, border-color .15s ease;
}
.kl-foot a.kl-foot__kn-nut:hover { transform: translateY(-2px); border-color: rgba(0, 0, 0, .28); text-decoration: none; }
.kl-foot a.kl-foot__kn-nut:focus-visible { outline: 2px solid var(--solus-green-chu-trang); outline-offset: 2px; }
.kl-foot a.kl-foot__kn-nut svg { width: 22px; height: 22px; }

/* ---- thanh bản quyền ---- */
.kl-foot > .kl-foot__day {
	/* Phần tử này mang CẢ lớp .container, nên max-width + margin:auto của
	   .container bó dải bản quyền lại bằng bề rộng nội dung, hở nền xám hai
	   bên. Khai lại đúng hai thuộc tính đó để nền xanh chạy hết chiều ngang;
	   chữ vẫn nằm giữa nhờ text-align: center. */
	max-width: none;
	margin: 0;
	padding: 14px 15px 20px;
	background: var(--solus-green-chu-trang);
	color: #eaf6e1;
	border-top: 0;
	text-align: center;
	font-size: 12.5px;
}

@media (max-width: 900px) {
	.kl-foot > .kl-foot__luoi { grid-template-columns: 1fr 1fr; gap: 26px 32px; }
	.kl-foot__cty { grid-column: 1 / -1; }
}

/* Trên điện thoại, TRỪ TRANG CHỦ, chỉ giữ dòng bản quyền.
   Bốn khối link xếp dọc trên màn 390px là bốn màn phải cuộn qua mới hết trang;
   không ai cuộn hết footer trên điện thoại để bấm "Điều khoản dịch vụ". */
@media (max-width: 992px) {
	.kl-foot--gon > .kl-foot__luoi { display: none; }
	.kl-foot--gon > .kl-foot__day { padding: 18px 15px; line-height: 1.6; }
}

@media (max-width: 560px) {
	/* Một cột thì bốn khối xếp dọc thành hơn 700px, phải cuộn hai màn mới hết footer.
	   Hai nhóm link vốn ngắn nên thừa chỗ ngang — xếp cạnh nhau, còn khối công ty và
	   khối kết nối chiếm trọn hàng. Không đổi nội dung, chỉ đổi cách xếp. */
	/* Khoảng cách dọc giữa các khối đi bằng margin, KHÔNG bằng row-gap của lưới:
	   hai nhóm link ở dưới mượn nhiều hàng của lưới này, mỗi row-gap sẽ thành một
	   khoảng trống thừa nằm giữa các mục. */
	.kl-foot > .kl-foot__luoi { grid-template-columns: 1fr 1fr; gap: 0 14px; padding: 22px 15px 18px; }
	.kl-foot__luoi > * { min-width: 0; }
	.kl-foot__cty { grid-column: 1 / -1; margin-bottom: 20px; }
	/* Khối kết nối chiếm trọn một hàng thì canh giữa, không để lệch trái. */
	.kl-foot__luoi > *:nth-child(4) { grid-column: 1 / -1; margin-top: 18px; text-align: center; }
	.kl-foot__kn { justify-content: center; }
	/* Cách nhau 10px, rộng hơn khoảng cách giữa hai dòng trong cùng một đoạn
	   (13.2 × 1.5 để lại ~6.6px). Để 4px như trước thì đoạn cách nhau còn HẸP
	   hơn dòng cách dòng, ba đoạn dính thành một khối chữ đọc không ra ý. */
	.kl-foot__cty p { margin: 10px 0 0; font-size: 13.2px; line-height: 1.5; }
	/* Phải viết đủ ".kl-foot a." như rule gốc: rule gốc có width:fit-content với
	   specificity cao hơn, viết gọn ".kl-foot__gd" thì width:100% thua và nút mất
	   full-width trên điện thoại. */
	.kl-foot a.kl-foot__gd { width: 100%; margin-top: 12px; justify-content: center; }
	/* Chia hai dòng cho cân. Không có luật này thì "Chính sách & hỗ trợ" vứt lại
	   mỗi chữ "TRỢ" trơ trọi ở dòng hai. */
	.kl-foot__nhan { margin-bottom: 7px; font-size: 11px; letter-spacing: .1em; text-wrap: balance; }

	/* Hai nhóm link nằm cạnh nhau nhưng nhãn dài ngắn khác nhau: "Chính sách &
	   hỗ trợ" ăn hai dòng còn "Thông tin" một dòng, nên hai danh sách bắt đầu
	   lệch 23px; máy để cỡ chữ lớn thì từng mục cũng so le. Cho mỗi nhóm mượn
	   đúng số hàng của lưới cha (số hàng do footer.php đếm) rồi trải nhãn và
	   từng mục lên các hàng đó: hàng nào cũng cao bằng bên cao hơn.
	   Trình duyệt không có subgrid thì bỏ qua grid-template-rows; row-gap đã là 0
	   nên nhóm vẫn cao đúng bằng nội dung, về lại bố cục cũ chứ không vỡ. */
	.kl-foot__luoi nav {
		grid-row: span var(--kl-foot-hang-nhom, 1);
		display: grid;
		grid-template-rows: subgrid;
		gap: 7px 0;
		align-content: start;
	}
	.kl-foot__luoi nav ul {
		grid-row: span var(--kl-foot-hang, 1);
		display: grid;
		grid-template-rows: subgrid;
		gap: 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	/* Cùng một cỡ với đoạn pháp nhân ở trên — lệch 12.6 / 13.2 nhìn ra ngay. */
	.kl-foot__luoi nav a { font-size: 13.2px; line-height: 1.45; }
	.kl-foot__logo-anh { width: 176px; }
	.kl-foot__logo-ten { font-size: 17px; }
}

/* ── Mặt hàng hết hàng, trên trang sản phẩm ───────────────────────────────
 *
 * Chỗ này trước đây bỏ trống: hết hàng thì không có nút, không có lối đi tiếp.
 * Khối này thế vào đúng chỗ nút "Thêm vào giỏ" từng đứng, nên khách không phải
 * đi tìm.
 *
 * KHÔNG dùng đỏ báo động: dòng "Tình trạng: Hết hàng" phía trên đã nói rồi, và
 * hết hàng ở kho đông lạnh là chuyện tạm thời chứ không phải sự cố. Vàng ấm —
 * "chờ một chút" — đúng nghĩa hơn.
 */
.kl-het {
	margin: 20px 0 8px;
	padding: 16px 18px;
	border: 1px solid #f0dfae;
	border-radius: 12px;
	background: #fffaf0;
}

.kl-het__tieu {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-size: 15.5px;
	color: #6b4e07;
}

.kl-het__cham {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #dba617;
	flex: 0 0 auto;
}

.kl-het__mo {
	margin: 0 0 14px;
	max-width: 62ch;
	font-size: 14.5px;
	line-height: 1.65;
	color: #6a6a5d;
}

.kl-het__nut {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Hai nút cùng chiều cao và cùng lối bo góc với nút mua hàng ở các trang khác —
   khách nhận ra ngay đâu là thứ bấm được. */
.kl-het__zalo,
.kl-het__goi {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 20px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}

.kl-het__zalo {
	background: #55a61d;
	border: 1px solid #55a61d;
	color: #fff;
}

.kl-het__zalo:hover,
.kl-het__zalo:focus {
	background: #4a9119;
	border-color: #4a9119;
	color: #fff;
	text-decoration: none;
}

.kl-het__goi {
	background: #fff;
	border: 1px solid #d8cba4;
	color: #6b4e07;
}

.kl-het__goi:hover,
.kl-het__goi:focus {
	border-color: #b9a05f;
	color: #6b4e07;
	text-decoration: none;
}

@media (max-width: 600px) {
	/* Trên điện thoại hai nút xếp dọc và ăn trọn bề ngang: bấm bằng ngón cái
	   thì nút hẹp nằm cạnh nhau là nguồn của mọi cú bấm nhầm. */
	.kl-het__nut {
		flex-direction: column;
	}

	.kl-het__zalo,
	.kl-het__goi {
		width: 100%;
	}
}