: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: #0759a6;
	--liuer-inverse-border-hex: #ffffff;
	--liuer-shadow-hex: #10281f;
	--liuer-accent-shadow-hex: #0759a6;
	--liuer-border: color-mix(in srgb, var(--liuer-border-hex) 78%, transparent);
	--liuer-accent: #0759a6;
	--liuer-accent-strong: #004887;
	--liuer-announcement-bg: #003d73;
	--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;
}

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

.shop-footer {
    margin-top: 0;
    padding-block: 38px;
    background: var(--liuer-accent);
    color: var(--liuer-footer-copy);
    border-top: 1px solid #eeeeee66;
}
.coppyright {
    margin-top: 15px;
}
.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 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__contact-items {
	display: grid;
	gap: 12px;
}

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

.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-body-size);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0;
}

.shop-footer__contact-link {
	margin: 0 !important;
	color: var(--shop-inverse-color) !important;
}

.shop-footer__contact-link:hover strong {
	text-decoration: underline;
}

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

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


@media (max-width: 1180px) {
	:root {
		--shop-container-gutter: 28px;
	}
	.shop-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 720px) {
	:root {
		--shop-container-gutter: 20px;
		--shop-header-height: 110px;
		--shop-section-gap: 22px;
		--shop-band-padding: 30px;
	}

	.shop-cart-toast {
		top: auto;
		right: 10px;
		bottom: 14px;
		left: 10px;
		width: auto;
		transform: translateY(8px);
	}

	.shop-cart-toast.is-visible {
		transform: translateY(0);
	}
	.shop-footer__grid,
	.shop-footer__bottom {
		grid-template-columns: 1fr;
	}

	.shop-footer__grid {
		gap: 28px;
	}
}