:root {
	--liuer-bg: #f5f7f6;
	--liuer-surface: #ffffff;
	--liuer-surface-strong: #071827;
	--liuer-copy: #15231d;
	--liuer-muted: #66746e;
	--liuer-border-hex: #dfe8e3;
	--liuer-card-border-hex: #103825;
	--liuer-accent-border-hex: #007a45;
	--liuer-inverse-border-hex: #ffffff;
	--liuer-shadow-hex: #10281f;
	--liuer-accent-shadow-hex: #007a45;
	--liuer-border: color-mix(in srgb, var(--liuer-border-hex) 78%, transparent);
	--liuer-accent: #007a45;
	--liuer-accent-strong: #005c34;
	--liuer-announcement-bg: #003f2a;
	--liuer-announcement-text: #ffffff;
	--liuer-header-bg: rgba(255, 255, 255, 0.96);
	--liuer-header-border-hex: #e8efeb;
	--liuer-header-border: color-mix(in srgb, var(--liuer-header-border-hex) 88%, transparent);
	--liuer-footer-bg: #071827;
	--liuer-footer-copy: #e9f3ef;
	--liuer-footer-border-hex: #203345;
	--liuer-footer-border: color-mix(in srgb, var(--liuer-footer-border-hex) 58%, transparent);
	--shop-radius-xs: 4px;
	--shop-radius-sm: 6px;
	--shop-radius: 10px;
	--shop-radius-lg: 12px;
	--shop-product-columns: 5;
	--shop-archive-product-columns: 4;
	--shop-product-item-gap: 10px;
	--shop-slider-item-gap: 10px;
	--shop-shadow: 0 0 22px color-mix(in srgb, var(--liuer-shadow-hex) 13%, transparent);
	--shop-shadow-soft: 0 0 14px color-mix(in srgb, var(--liuer-shadow-hex) 7%, transparent);
	--shop-shadow-card: 0 1px 5px color-mix(in srgb, var(--liuer-shadow-hex) 3.5%, transparent);
	--shop-container-width: 1320px;
	--shop-container-gutter: 48px;
	--shop-container: min(var(--shop-container-width), calc(100vw - var(--shop-container-gutter)));
	--shop-header-height: 111px;
	--shop-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
	/* Nhịp dọc: khoảng cách GIỮA các khối. Chỉ dùng margin-top nên KHÔNG nhân đôi. */
	--shop-section-gap: 35px;
	/* Padding TRONG của band có nền riêng (để nội dung không dính mép nền). */
	--shop-band-padding: 40px;
	--shop-section-head-gap: 14px;
	--shop-heading-line-height: 1.22;
	--shop-heading-letter-spacing: -0.02em;
	--shop-heading-weight: 600;
	--shop-body-size: 15px;
	/* 14px là cỡ chữ chuẩn nhỏ nhất trên desktop.
	   --shop-small-size dùng cho các nhãn/badge thật sự cần bé hơn. */
	--shop-meta-size: 14px;
	--shop-small-size: 13px;
	--shop-h1-size: 27px;
	--shop-h2-size: 21px;
	--shop-h3-size: 16px;
	--shop-card-title-size: 14px;
	--shop-price-size: 17px;
	--shop-logo-size: 25px;
	--shop-logo-mark-size: 19px;
	--shop-logo-mobile-size: 20px;
	--shop-logo-mark-mobile-size: 16px;
	--shop-text-color: var(--liuer-copy);
	--shop-heading-color: var(--liuer-copy);
	--shop-muted-color: var(--liuer-muted);
	--shop-subtle-color: #8a929c;
	--shop-placeholder-color: #9aa5b5;
	--shop-inverse-color: #ffffff;
	--shop-link-color: var(--liuer-accent);
	--shop-footer-muted-color: rgba(233, 243, 239, 0.78);
	--shop-card-border-color: color-mix(in srgb, var(--liuer-card-border-hex) 6%, transparent);
	--shop-focus-border-color: color-mix(in srgb, var(--liuer-inverse-border-hex) 84%, transparent);
	--shop-accent-border-soft-color: color-mix(in srgb, var(--liuer-accent-border-hex) 16%, transparent);
	--shop-accent-border-color: color-mix(in srgb, var(--liuer-accent-border-hex) 32%, transparent);
	--shop-accent-border-strong-color: color-mix(in srgb, var(--liuer-accent-border-hex) 70%, var(--liuer-inverse-border-hex));
	--shop-inverse-border-soft-color: color-mix(in srgb, var(--liuer-inverse-border-hex) 16%, transparent);
	--shop-inverse-border-color: color-mix(in srgb, var(--liuer-inverse-border-hex) 22%, transparent);
	--shop-inverse-border-strong-color: color-mix(in srgb, var(--liuer-inverse-border-hex) 42%, transparent);
	--shop-rating-color: #f5a623;
	--shop-danger-color: #e23744;
	/* Flash Sale — điều khiển được qua Theme studio */
	--shop-flash-bg-start: #0a2620;
	--shop-flash-bg-end: #0f4a35;
	--shop-flash-hot-start: #ff9d2f;
	--shop-flash-hot-end: #e23744;
	--shop-flash-gold: #ffc24d;
	--shop-info-color: #3d73c9;
	--shop-violet-color: #7655d4;
	--shop-promo-green-text: #045f38;
	--shop-promo-cream-text: #8a4b08;
	--shop-promo-blue-text: #0a4d94;
}

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--shop-header-height) + 16px);
}

body {
	margin: 0;
	color: var(--shop-text-color);
	background: #ffffff;
	font-family: var(--shop-font-family);
	font-size: var(--shop-body-size);
	line-height: 1.6;
	letter-spacing: -0.005em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body.liuer-device-desktop {
	--shop-desktop-min-width: 1200px;
	--shop-container: min(var(--shop-container-width), calc(max(100vw, var(--shop-desktop-min-width)) - var(--shop-container-gutter)));
	min-width: var(--shop-desktop-min-width);
}

.shop-stars-icons {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--shop-rating-color);
	line-height: 1;
}

.shop-stars-icons i {
	display: block;
	width: 13px;
	height: 13px;
	background: #d5ddd9;
	-webkit-mask: var(--shop-rating-star-icon) center / contain no-repeat;
	mask: var(--shop-rating-star-icon) center / contain no-repeat;
}

.shop-stars-icons i.is-active {
	background: currentColor;
	-webkit-mask-image: var(--shop-rating-star-solid-icon);
	mask-image: var(--shop-rating-star-solid-icon);
}

.shop-stars {
	min-height: 18px;
	margin: 7px 0 5px;
	color: var(--shop-rating-color);
	font-size: var(--shop-small-size);
	display: flex;
	align-items: center;
	gap: 3px;
}

.shop-product-card__media {
	background: #fff;
}

body.is-shop-menu-open {
	overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: var(--shop-heading-color);
	font-family: var(--shop-font-family);
	font-weight: var(--shop-heading-weight);
	line-height: var(--shop-heading-line-height);
	letter-spacing: var(--shop-heading-letter-spacing);
}

h1 {
	font-size: var(--shop-h1-size);
}

h2 {
	font-size: var(--shop-h2-size);
}

h3 {
	font-size: var(--shop-h3-size);
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input {
	font: inherit;
}

button {
	cursor: pointer;
}

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

/* .shop-icon được định nghĩa trong parts/icons.css (CSS mask). */

.shop-icon-inline {
	width: 17px;
	height: 17px;
	margin-right: 7px;
}

.shop-icon-topbar {
	width: 15px;
	height: 15px;
	margin-right: 7px;
}

.shop-icon-catalog {
	width: 16px;
	height: 16px;
	margin-right: 10px;
	color: var(--shop-muted-color);
}

a,
button,
input {
	transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.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;
}

.shop-wrap {
	width: var(--shop-container);
	margin: 0 auto;
}

.liuer-site-shell {
	min-width: 0;
	padding-top: var(--shop-header-height);
}

body.liuer-device-desktop .liuer-site-shell {
	padding-top: 0;
}

.liuer-sidebar-layout {
	display: grid;
	grid-template-columns: 244px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.liuer-sidebar-layout__content {
	min-width: 0;
}

.shop-home-2__sidebar {
	position: sticky;
	z-index: 22;
	top: calc(var(--shop-header-height) + 14px);
	min-width: 0;
}

body.admin-bar .shop-home-2__sidebar {
	top: calc(var(--shop-header-height) + 46px);
}

.shop-home-2__sidebar-banners {
	display: grid;
	gap: 14px;
	margin-top: 14px;
}

.shop-home-2__sidebar-banner {
	display: block;
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--shop-card-border-color);
	border-radius: var(--shop-radius);
	background: #ffffff;
	box-shadow: var(--shop-shadow-card);
}

.shop-home-2__sidebar-banner img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: transform 0.35s ease;
}

a.shop-home-2__sidebar-banner:hover img {
	transform: scale(1.03);
}

.shop-side-catalog-wrap {
	position: relative;
	z-index: 20;
	min-width: 0;
}

.shop-side-catalog {
	display: flex;
	flex-direction: column;
	height: auto;
	padding: 7px;
	margin: 0;
	border: 1px solid var(--liuer-border);
	border-radius: var(--shop-radius);
	background: #ffffff;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--liuer-shadow-hex) 5%, transparent);
	list-style: none;
}

.shop-side-catalog > .menu-item {
	display: flex;
	flex: 0 0 43px;
}

.shop-side-catalog .sub-menu {
	position: absolute;
	z-index: 5;
	left: calc(100% - 10px);
	top: 0;
	bottom: 0;
	display: none;
	width: 642px;
	max-width: calc(100vw - 320px);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-content: start;
	gap: 10px 14px;
	padding: 18px 18px 18px 40px;
	margin: 0;
	overflow-y: auto;
	list-style: none;
	border: 0;
	background: transparent;
	isolation: isolate;
}

.shop-side-catalog .sub-menu::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0 0 0 22px;
	border: 1px solid var(--shop-card-border-color);
	border-radius: var(--shop-radius-lg);
	background: #ffffff;
	box-shadow: var(--shop-shadow);
}

.shop-side-catalog > .menu-item:hover > .sub-menu,
.shop-side-catalog > .menu-item:focus-within > .sub-menu {
	display: grid;
}

.shop-side-catalog .sub-menu a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 62px;
	padding: 8px 14px;
	border: 1px solid var(--shop-card-border-color);
	border-radius: var(--shop-radius);
	background: #fbfdfc;
	font-size: var(--shop-card-title-size);
}

.shop-side-catalog .shop-submenu-thumb {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: var(--shop-radius);
	background: #f1f5f3;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.shop-side-catalog .sub-menu a:hover {
	border-color: var(--shop-accent-border-color);
	background: #ffffff;
	color: var(--shop-link-color);
	box-shadow: var(--shop-shadow-soft);
}

.shop-side-catalog .sub-menu a:hover .shop-submenu-thumb {
	transform: scale(1.06);
}

.shop-side-catalog > .menu-item > a {
	flex: 1;
	height: 43px;
	min-height: 43px;
}

.shop-side-catalog a {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 12px;
	border-radius: var(--shop-radius-sm);
	color: var(--shop-text-color);
	font-size: var(--shop-body-size);
}

.shop-side-catalog a strong,
.shop-side-catalog a span {
	flex: 1;
	font-weight: 600;
	letter-spacing: 0;
}

.shop-side-catalog .shop-icon-catalog,
.shop-side-catalog .shop-menu-icon {
	width: 20px;
	height: 20px;
	margin-right: 12px;
	color: var(--shop-subtle-color);
	transition: color 0.2s ease;
}

.shop-side-catalog .shop-icon--chevron,
.shop-side-catalog > .menu-item > a::after {
	content: "";
	width: 15px;
	height: 15px;
	margin-left: auto;
	background-color: currentColor;
	-webkit-mask: var(--i-chevron-right) center / contain no-repeat;
	mask: var(--i-chevron-right) center / contain no-repeat;
	color: var(--shop-subtle-color);
	opacity: 0.7;
	transition: transform 0.2s ease, color 0.2s ease;
}

.shop-side-catalog a:hover {
	color: var(--liuer-accent-strong);
	background: #f1f8f4;
}

.shop-side-catalog a:hover::after {
	color: var(--liuer-accent);
	transform: translateX(2px);
}

.shop-footer {
	margin-top: 0;
	padding: 38px 0 0;
	background: var(--liuer-footer-bg);
	color: var(--liuer-footer-copy);
}

.shop-footer__grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr 1fr 1.7fr;
	gap: 44px;
}

.shop-footer h3 {
	margin: 0 0 16px;
	color: var(--shop-inverse-color);
	font-size: var(--shop-h3-size);
}

.shop-footer__section {
	min-width: 0;
}

.shop-footer p {
	margin: 0 0 18px;
	color: var(--shop-footer-muted-color, rgba(233, 243, 239, 0.78));
}

.shop-footer a,
.shop-footer__grid > div > span {
	display: block;
	margin: 0 0 10px;
	color: var(--shop-footer-muted-color, rgba(233, 243, 239, 0.78));
}

.shop-footer__editor p {
	margin: 0 0 10px;
	color: var(--shop-footer-muted-color, rgba(233, 243, 239, 0.78));
	line-height: 1.55;
}

.shop-footer__editor p:last-child {
	margin-bottom: 0;
}

.shop-footer__editor a {
	display: inline;
	margin: 0;
	color: inherit;
}

.shop-footer__editor a:hover {
	color: var(--shop-inverse-color);
}

.shop-socials {
	display: flex;
	gap: 10px;
}

.shop-socials a,
.shop-socials span {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin: 0;
	border: 1px solid var(--shop-inverse-border-soft-color);
	border-radius: 50%;
	color: var(--shop-inverse-color);
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.04);
}

.shop-socials a:hover {
	border-color: var(--shop-inverse-border-strong-color);
	background: rgba(255, 255, 255, 0.12);
	transform: translateY(-2px);
}

.shop-socials .shop-icon {
	width: 18px;
	height: 18px;
	object-fit: contain;
}

.shop-socials .shop-uploaded-icon {
	filter: brightness(0) invert(1);
	opacity: 0.96;
}

.shop-footer__news p {
	margin: 0 0 14px;
	max-width: 320px;
}

.shop-footer__news > form.shop-newsletter {
	display: flex;
	align-items: center;
	max-width: 340px;
	margin: 0 0 22px;
	padding: 4px;
	border: 1px solid var(--shop-inverse-border-soft-color);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
}

.shop-footer__news > form.shop-newsletter input {
	flex: 1;
	min-width: 0;
	height: 42px;
	border: 0;
	background: transparent;
	color: var(--shop-inverse-color);
	padding: 0 8px 0 16px;
	outline: 0;
}

.shop-footer__news > form.shop-newsletter input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.shop-footer__news > form.shop-newsletter button {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--liuer-accent), var(--liuer-accent-strong));
	color: var(--shop-inverse-color);
}

.shop-footer__news > form.shop-newsletter button:hover {
	transform: scale(1.05);
}

.shop-footer__news > form.shop-newsletter button .shop-icon {
	width: 18px;
	height: 18px;
}

.shop-footer__news .lcf-wrap {
	max-width: 340px;
	margin: 0 0 22px;
}

.shop-footer__news .lcf-wrap .lcf-form {
	display: block;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.shop-footer__news .lcf-wrap .lcf-form .lcf-grid {
	display: flex;
	gap: 0;
	padding: 4px;
	border: 1px solid var(--shop-inverse-border-soft-color);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
}

.shop-footer__news .lcf-wrap .lcf-form .lcf-field {
	flex: 1 1 auto;
}

.shop-footer__news .lcf-wrap .lcf-form .lcf-submit-row {
	flex: 0 0 auto;
}

.shop-footer__news .lcf-wrap .lcf-form .lcf-grid .lcf-label,
.shop-footer__news .lcf-wrap .lcf-form .lcf-grid .lcf-error,
.shop-footer__news .lcf-wrap .lcf-form .lcf-grid .lcf-help {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.shop-footer__news .lcf-wrap .lcf-form .lcf-grid .lcf-control {
	height: 42px;
	min-height: 42px;
	padding: 0 8px 0 16px;
	border: 0;
	background: transparent;
	color: var(--shop-inverse-color);
	box-shadow: none;
}

.shop-footer__news .lcf-wrap .lcf-form .lcf-grid .lcf-control::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.shop-footer__news .lcf-wrap .lcf-captcha--native {
	width: min(100%, 340px);
	margin-top: 12px;
	padding: 6px;
	background: #fff;
}

.shop-footer__news .lcf-wrap .lcf-form .lcf-submit {
	width: 42px;
	height: 42px;
	min-height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--liuer-accent), var(--liuer-accent-strong));
	color: var(--shop-inverse-color);
	font-size: 0;
}

.shop-footer__news .lcf-wrap .lcf-form .lcf-submit:hover {
	background: linear-gradient(135deg, var(--liuer-accent), var(--liuer-accent-strong));
	transform: scale(1.05);
}

.shop-footer__news .lcf-wrap .lcf-form .lcf-submit__label::before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	background: url("../../icons/white/send.svg") center / contain no-repeat;
}

.shop-footer__news .lcf-wrap .lcf-response {
	max-width: 340px;
	margin: 8px 0 0;
	color: var(--shop-inverse-color);
}

.shop-footer__news .lcf-wrap .lcf-response.is-success {
	border-color: rgba(255, 255, 255, 0.24);
	background: rgba(255, 255, 255, 0.1);
	color: var(--shop-inverse-color);
}

.shop-footer__news .lcf-wrap .lcf-response.is-error {
	border-color: rgba(255, 190, 190, 0.45);
	background: rgba(120, 20, 20, 0.28);
	color: var(--shop-inverse-color);
}

.shop-footer__hotline {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 15px;
}

.shop-footer__hotline-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: var(--shop-inverse-color);
}

.shop-footer__hotline-icon .shop-icon {
	width: 21px;
	height: 21px;
}

.shop-footer__hotline span {
	color: var(--shop-footer-muted-color, rgba(233, 243, 239, 0.78));
	font-size: var(--shop-small-size);
}

.shop-footer__hotline strong {
	display: block;
	color: var(--shop-inverse-color);
	font-size: var(--shop-h3-size);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.shop-footer__bottom {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
	align-items: center;
	margin-top: var(--shop-section-gap);
	padding: 20px 0;
	border-top: 1px solid var(--liuer-footer-border);
}

.shop-footer__bottom p {
	margin: 0;
}

.shop-footer__pay {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.shop-footer__pay span {
	display: grid;
	place-items: center;
	min-width: 50px;
	height: 30px;
	padding: 0 10px;
	border-radius: var(--shop-radius-sm);
	background: rgba(255, 255, 255, 0.92);
	color: #1a2a22;
	font-size: var(--shop-small-size);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.shop-footer__pay span.has-image {
	min-width: 58px;
	padding: 4px 8px;
}

.shop-footer__pay img {
	display: block;
	width: auto;
	max-width: 74px;
	max-height: 22px;
	object-fit: contain;
}