/* ==========================================================================
   WOLF YOGA — Clone giao diện demo https://wolf-yoga.mysapo.net cho Flatsome
   Palette + typography lấy 1:1 từ CSS gốc của theme Wolf.
   Phạm vi: chỉ ghi đè trong body.wolf-yoga, không phá giao diện Flatsome gốc.
   ========================================================================== */

:root {
	/* Bảng màu gốc của Wolf Yoga (biến --main-color ... từ demo) */
	--wy-main: #1f4a3a;            /* xanh lá đậm chủ đạo */
	--wy-main-dark: #054b3e;
	--wy-deal: #0a5d4f;            /* nền khối countdown Flash Sale */
	--wy-price: #ed6514;           /* màu giá */
	--wy-second: #993406;          /* màu nhấn phụ (nâu) */
	--wy-text: #20212b;            /* màu chữ chính */
	--wy-header-bg: #f7ebde;       /* nền kem header + footer */
	--wy-header-text: #33302f;
	--wy-footer-hover: #85402a;
	--wy-sale: #d37643;            /* tag giảm giá */
	--wy-cream: #faf9f2;           /* nền Flash Sale */
	--wy-cream2: #faf3ea;          /* nền section Set đồ tập */
	--wy-icon-bg: #f4f3ef;         /* nền icon */
	--wy-border: #eaf0ec;
	--wy-gold: #c5a47e;
	--wy-star: #f0a94b;

	--wy-font-head: "Playfair Display", Georgia, serif;
	--wy-font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--wy-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--wy-radius: 16px;
}

/* ==========================================================================
   1. NỀN TẢNG
   ========================================================================== */

body.wolf-yoga {
	font-family: var(--wy-font-body);
	color: var(--wy-text);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

body.wolf-yoga h1,
body.wolf-yoga h2,
body.wolf-yoga h3,
body.wolf-yoga h4,
body.wolf-yoga h5,
body.wolf-yoga h6,
body.wolf-yoga .heading-font {
	font-family: var(--wy-font-head);
	color: var(--wy-text);
}

body.wolf-yoga a {
	transition: color 0.25s var(--wy-ease);
}

/* SVG helper từ [wy_svg] */
.wy-svg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
.wy-svg svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ==========================================================================
   2. NÚT BẤM — kiểu Wolf: bo nhẹ, xanh đậm, hover "lật" viền
   ========================================================================== */

.wolf-yoga .button,
.wolf-yoga button[type="submit"],
.wolf-yoga input[type="submit"].button {
	font-family: var(--wy-font-body);
	font-weight: 600;
	letter-spacing: 0.01em;
	border-radius: 8px;
	transition: all 0.4s var(--wy-ease);
}

.wolf-yoga .button.primary,
.wolf-yoga .button.alt,
.wolf-yoga input[type="submit"].button {
	background: var(--wy-main);
	border: 1px solid var(--wy-main);
	color: #fff;
}
.wolf-yoga .button.primary:hover,
.wolf-yoga .button.alt:hover,
.wolf-yoga input[type="submit"].button:hover {
	background: transparent;
	color: var(--wy-main);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.wolf-yoga .button.is-outline,
.wolf-yoga .button.outline,
.wolf-yoga .button.secondary.is-outline {
	background: transparent;
	border: 1px solid var(--wy-main);
	color: var(--wy-main);
	box-shadow: none;
}
.wolf-yoga .button.is-outline:hover,
.wolf-yoga .button.outline:hover,
.wolf-yoga .button.secondary.is-outline:hover {
	background: var(--wy-main);
	border-color: var(--wy-main);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(31, 74, 58, 0.2);
}

/* ==========================================================================
   3. TOPBAR — dải thông báo chạy chữ nền xanh đậm
   ========================================================================== */

.wolf-yoga #top-bar,
.wolf-yoga .header-top {
	background: var(--wy-main);
	color: #fff;
	font-size: 13px;
	padding: 5px 0;
}
.wolf-yoga #top-bar a {
	color: #fff;
	font-weight: 500;
}
.wolf-yoga #top-bar .flex-left,
.wolf-yoga #top-bar .flex-right {
	display: none; /* demo chỉ có dải thông báo ở giữa */
}

.wy-ticker {
	overflow: hidden;
	width: 100%;
}
.wy-ticker__track {
	display: inline-flex;
	align-items: center;
	gap: 28px;
	white-space: nowrap;
	width: max-content;
	animation: wyTicker 32s linear infinite;
	padding: 2px 0;
}
.wy-ticker__item {
	font-weight: 500;
	letter-spacing: 0.02em;
}
.wy-ticker__dot {
	opacity: 0.45;
	font-size: 10px;
}
@keyframes wyTicker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ==========================================================================
   4. HEADER — nền kem, chữ nâu than, hover xanh đậm
   ========================================================================== */

.wolf-yoga .header-main {
	background: var(--wy-header-bg);
}
.wolf-yoga .header-main .nav > li > a {
	color: var(--wy-header-text);
	font-weight: 500;
	font-size: 15px;
}
.wolf-yoga .header-main .nav > li > a:hover,
.wolf-yoga .header-main .nav > li.current-menu-item > a,
.wolf-yoga .header-main .nav > li.active > a {
	color: var(--wy-main);
}
.wolf-yoga .header-main .header-nav a,
.wolf-yoga .header-main .header-nav .icon-box {
	color: var(--wy-header-text);
}
.wolf-yoga .header-main .header-nav a:hover {
	color: var(--wy-main);
}
.wolf-yoga .header-main .nav-dropdown {
	border-radius: 12px;
	box-shadow: 0 16px 44px rgba(32, 33, 43, 0.14);
	border: 1px solid var(--wy-border);
	overflow: hidden;
}
.wolf-yoga .header-main .nav-dropdown > li > a {
	color: var(--wy-text);
}
.wolf-yoga .header-main .nav-dropdown > li > a:hover {
	background: var(--wy-cream2);
	color: var(--wy-main);
}

/* Dòng kẻ dưới header giống demo */
.wolf-yoga .header-wrapper {
	box-shadow: 0 1px 0 rgba(51, 48, 47, 0.08);
}

/* Icon header (search, user, wishlist, cart) */
.wolf-yoga .header-main .header-button,
.wolf-yoga .header-main .icon {
	color: var(--wy-header-text);
}
.wolf-yoga .header-main .header-button:hover,
.wolf-yoga .header-main .icon:hover {
	color: var(--wy-main);
}
.wolf-yoga .header-button .cart-icon .cart-total {
	background: var(--wy-main);
	color: #fff;
	border-radius: 999px;
}

/* Header dính (sticky) vẫn giữ nền kem */
.wolf-yoga .header-wrapper.stuck .header-main,
.wolf-yoga .header-wrapper.stuck {
	background: var(--wy-header-bg);
}

/* ==========================================================================
   5. HERO SLIDER — tiêu đề serif xanh, ornament, 2 nút
   ========================================================================== */

.wolf-yoga .wy-hero .slide {
	background: var(--wy-cream2);
}

.wy-hero-kicker,
.wy-hero-title {
	font-family: var(--wy-font-head);
	color: var(--wy-main);
	line-height: 1.12;
	margin: 0;
}
.wy-hero-kicker {
	font-size: clamp(22px, 3.4vw, 50px);
	font-weight: 500;
}
.wy-hero-title {
	font-size: clamp(26px, 4.2vw, 57px);
	font-weight: 800;
}
.wy-hero-split {
	display: block;
	margin: 10px auto 16px;
	opacity: 0.9;
}
.wy-hero-desc {
	font-size: clamp(14px, 1.3vw, 18px);
	color: var(--wy-text);
	max-width: 520px;
	margin: 0 auto 26px;
	line-height: 1.7;
}
.wy-hero-btns {
	display: flex;
	gap: 12px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

/* Mũi tên + dot của slider chủ đạo */
.wolf-yoga .wy-hero .flickity-prev-next-button {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: var(--wy-main);
	box-shadow: 0 4px 14px rgba(31, 74, 58, 0.16);
	transition: all 0.3s var(--wy-ease);
}
.wolf-yoga .wy-hero .flickity-prev-next-button:hover {
	background: var(--wy-main);
	color: #fff;
}
.wolf-yoga .wy-hero .flickity-page-dots .dot {
	background: var(--wy-main);
	opacity: 0.25;
}
.wolf-yoga .wy-hero .flickity-page-dots .dot.is-selected {
	opacity: 1;
	transform: scale(1.15);
}

/* ==========================================================================
   6. TIÊU ĐỀ SECTION — serif xanh + mô tả xám
   ========================================================================== */

.wy-sec-head {
	margin-bottom: 14px;
}
.wy-sec-title {
	font-family: var(--wy-font-head);
	font-size: clamp(25px, 2.6vw, 36px);
	font-weight: 700;
	color: var(--wy-main);
	margin: 0;
	line-height: 1.25;
}
.wy-sec-desc {
	color: #747474;
	margin: 6px 0 0;
	font-size: 15px;
}
.wy-sec-icon {
	vertical-align: -8px;
	margin-right: 8px;
}
.wy-split-head {
	align-items: center;
}
.wy-split-head .wy-head-cta {
	text-align: right;
}
@media (max-width: 849px) {
	.wy-split-head .wy-head-cta {
		text-align: left;
	}
}

/* ==========================================================================
   7. WHY US — 4 thẻ nền xám nhạt
   ========================================================================== */

.wy-why-item {
	background: var(--wy-icon-bg);
	border-radius: var(--wy-radius);
	padding: 30px 22px 26px;
	text-align: center;
	height: 100%;
	transition: all 0.4s var(--wy-ease);
}
.wy-why-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(31, 74, 58, 0.12);
}
.wy-why-icon {
	margin-bottom: 12px;
}
.wy-why-item h4 {
	font-size: 19px;
	color: var(--wy-main);
	margin-bottom: 6px;
}
.wy-why-item p {
	font-size: 14px;
	color: #6d6d6d;
	margin: 0;
}

/* ==========================================================================
   8. FLASH SALE — nền kem, countdown xanh đậm
   ========================================================================== */

.wolf-yoga .wy-flash-count {
	display: flex;
	align-items: center;
	gap: 16px;
	justify-content: flex-end;
	flex-wrap: wrap;
	min-height: 60px;
	height: 100%;
}
/* Canh giữa dọc cột countdown so với khối tiêu đề */
.wolf-yoga .wy-flash-head > .col:last-child .col-inner {
	display: flex;
	align-items: center;
	height: 100%;
}
.wy-flash-count br {
	display: none; /* wpautop đôi khi chèn <br> giữa label và shortcode */
}
.wy-flash-label {
	font-family: var(--wy-font-head);
	font-size: 19px;
	font-weight: 600;
	color: var(--wy-main);
	white-space: nowrap;
}

/* Shortcode [ux_countdown] không nhận class -> nhắm qua container */
.wolf-yoga .wy-flash-count .ux-timer {
	font-size: 190%;
	width: auto; /* mặc định là table full-width */
	margin: 0;
}
.wolf-yoga .wy-flash-count .ux-timer span {
	background: linear-gradient(180deg, var(--wy-deal), var(--wy-main-dark));
	border-radius: 12px;
	padding: 0.35em 0.25em 0.16em;
	box-shadow: 0 6px 16px rgba(5, 75, 62, 0.28);
}
@media (max-width: 849px) {
	.wolf-yoga .wy-flash-count {
		justify-content: flex-start;
	}
	.wolf-yoga .wy-flash-head > .col:last-child .col-inner {
		display: block;
		height: auto;
	}
}

/* ==========================================================================
   9. SẢN PHẨM — thẻ bo tròn, viền nhạt, giá cam, tag sale
   ========================================================================== */

.wolf-yoga .product-small,
.wolf-yoga .product-large {
	background: #fff;
	border: 1px solid var(--wy-border);
	border-radius: 14px;
	overflow: hidden;
	transition: transform 0.4s var(--wy-ease), box-shadow 0.4s var(--wy-ease), border-color 0.4s var(--wy-ease);
}
.wolf-yoga .product-small:hover,
.wolf-yoga .product-large:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 38px rgba(31, 74, 58, 0.14);
	border-color: transparent;
}
.wolf-yoga .product-small .box-image {
	border-radius: 0;
	overflow: hidden;
	background: var(--wy-icon-bg);
}
.wolf-yoga .product-small .box-image img {
	transition: transform 0.6s var(--wy-ease);
}
.wolf-yoga .product-small:hover .box-image img {
	transform: scale(1.05);
}
.wolf-yoga .product-small .box-text {
	padding: 14px 16px 18px;
	text-align: left;
}
.wolf-yoga .product-small .title {
	font-family: var(--wy-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--wy-text);
	line-height: 1.45;
}
.wolf-yoga .product-small .title:hover {
	color: var(--wy-main);
}
.wolf-yoga .product-small .price {
	color: var(--wy-price);
	font-size: 15px;
	font-weight: 700;
	margin: 6px 0 2px;
}
.wolf-yoga .product-small .price del,
.wolf-yoga .product-small del .amount {
	color: #9a9a9a;
	font-weight: 500;
	font-size: 12px;
}

/* Tag -28% kiểu Wolf */
.wolf-yoga .onsale {
	background: var(--wy-sale);
	color: #fff;
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	box-shadow: 0 4px 10px rgba(211, 118, 67, 0.4);
}

/* Sao đánh giá */
.wolf-yoga .star-rating,
.wolf-yoga .star-rating span {
	color: var(--wy-star);
	font-size: 12px;
}
.wolf-yoga .product-small .star-rating {
	margin: 2px 0 0;
	float: none;
}

/* Nút "Thêm vào giỏ" hiện khi hover ảnh sản phẩm */
.wolf-yoga .product-small .box-image .adding-to-cart .button,
.wolf-yoga .product-small .box-image .button.add_to_cart_button {
	border-radius: 999px;
	background: var(--wy-main);
	color: #fff;
	font-size: 13px;
}

/* Mũi tên slider sản phẩm */
.wolf-yoga .flickity-prev-next-button {
	border-radius: 50%;
	transition: all 0.3s var(--wy-ease);
}
.wolf-yoga .flickity-prev-next-button:hover {
	background: var(--wy-main);
	color: #fff;
}

/* ==========================================================================
   10. BANNER KHUYẾN MÃI + BANNER DÀI
   ========================================================================== */

.wy-banner-card,
.wy-longbanner .ux-banner,
.wolf-yoga .wy-longbanner .slide {
	border-radius: 18px;
	overflow: hidden;
}
.wy-banner-title {
	font-family: var(--wy-font-head);
	font-size: clamp(22px, 2.2vw, 30px);
	color: var(--wy-main);
	margin-bottom: 4px;
	font-weight: 700;
}
.wy-banner-desc {
	color: var(--wy-text);
	margin-bottom: 14px;
	font-size: 15px;
}

/* ==========================================================================
   11. SẢN PHẨM MỚI VỀ — header trái căn giữa, ảnh phải, sản phẩm 5 cột dưới
   ========================================================================== */

/* Bộ tiêu đề kiểu Wolf (dùng chung cho New product + Categories) */
.wy-center {
	text-align: center;
}
.wy-small-title {
	display: block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wy-main);
	margin-bottom: 6px;
}
.wy-big-title {
	font-family: var(--wy-font-head);
	font-size: clamp(28px, 3.2vw, 48px);
	font-weight: 700;
	color: var(--wy-main);
	line-height: 1.08;
	margin: 0;
}
.wy-big-title span {
	color: var(--wy-second);
}
/* Riêng khối New product: "Mới về" xuống dòng, cỡ lớn hơn */
.wy-center .wy-big-title span {
	display: block;
	font-size: clamp(36px, 4.6vw, 68px);
}
/* Header không nằm trong [row] -> tự container để không dính mép */
.wy-sec-center {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 15px;
	text-align: center;
}
.wy-ornament {
	display: block;
	margin: 12px auto 14px;
	max-width: 150px;
	height: auto;
}
.wy-sec-center-desc {
	color: #4a4a4a;
	max-width: 600px;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.65;
}

/* Nút "Xem thêm" nền xanh + mũi tên chạy khi hover */
.wy-viewmore {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--wy-main);
	border: 1px solid var(--wy-main);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	padding: 8px 20px;
	border-radius: 14px;
	transition: all 0.35s var(--wy-ease);
}
.wy-viewmore:hover {
	background: transparent;
	color: var(--wy-main);
	gap: 14px;
}
.wy-viewmore svg {
	flex: none;
}

/* Khối nội dung trái */
.wy-newproduct-desc {
	color: #4a4a4a;
	max-width: 420px;
	margin: 0 auto 20px;
	font-size: 15px;
	line-height: 1.65;
}

/* Ảnh bên phải */
.wy-newproduct-img-link {
	display: block;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}
.wy-newproduct-img {
	width: 100%;
	display: block;
	object-fit: cover;
	transition: transform 0.5s var(--wy-ease);
}
.wy-newproduct-img-link:hover .wy-newproduct-img {
	transform: scale(1.03);
}

/* Slider/dòng sản phẩm dưới */
.wolf-yoga .wy-newproduct-products {
	margin-top: 26px;
}

/* ==========================================================================
   12. KHÁM PHÁ SẢN PHẨM — card nền pattern, text-left, 4 cột
   ========================================================================== */

.wy-cat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 26px;
}
@media (max-width: 849px) {
	.wy-cat-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 549px) {
	.wy-cat-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
}

.wy-cat-card {
	position: relative;
	background-color: #fff;
	background-size: cover;
	background-position: calc(100% + 70px) center;
	background-repeat: no-repeat;
	border: 1px solid #f1f2f4;
	border-radius: 12px;
	padding: 20px;
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: var(--wy-text);
	cursor: pointer;
	overflow: hidden;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.wy-cat-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
	color: var(--wy-text);
}
.wy-cat-icon {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #e9f3eb;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wy-main);
	margin-bottom: 14px;
	flex: none;
	transition: transform 0.3s var(--wy-ease);
}
.wy-cat-card:hover .wy-cat-icon {
	transform: rotate(-6deg) scale(1.05);
}
.wy-cat-icon svg,
.wy-cat-icon img {
	width: 30px;
	height: 30px;
}
.wy-cat-name {
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wy-main);
	margin-bottom: 12px;
	line-height: 1.3;
}
.wy-cat-desc {
	font-size: 14px;
	color: #4a4a4a;
	line-height: 1.5;
	max-width: 160px;
	margin-bottom: 18px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wy-cat-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--wy-second);
	transition: gap 0.3s ease, color 0.3s ease;
}
.wy-cat-card:hover .wy-cat-more {
	gap: 15px;
	color: var(--wy-main);
}
.wy-cat-more svg {
	flex: none;
}

/* ==========================================================================
   13. TABS SET ĐỒ TẬP — pill viền nhạt bo nhẹ, active nền xanh
   ========================================================================== */

.wolf-yoga .wy-set-tabs ul.nav {
	display: flex;
	flex-wrap: wrap;            /* demo: flex-lg-wrap */
	justify-content: center;
	gap: 12px;
	border: none;
	margin: 28px 0 0;
}
.wolf-yoga .wy-set-tabs ul.nav li a {
	display: inline-flex;
	align-items: center;
	background: #fff;
	border: 1px solid var(--wy-border);
	border-radius: 6px;
	padding: 10px 22px;
	font-family: var(--wy-font-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--wy-text);
	line-height: 1.4;
	transition: all 0.3s var(--wy-ease);
}
.wolf-yoga .wy-set-tabs ul.nav li a:hover,
.wolf-yoga .wy-set-tabs ul.nav li.active a {
	background: var(--wy-main);
	border-color: var(--wy-main);
	color: #fff;
}
.wolf-yoga .wy-set-tabs .tab-panels {
	border: none;
	background: transparent;
	margin-top: 24px;
}
/* Mobile: thanh tab cuộn ngang như wolf-scroll-tab của demo */
@media (max-width: 549px) {
	.wolf-yoga .wy-set-tabs ul.nav {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
	}
	.wolf-yoga .wy-set-tabs ul.nav::-webkit-scrollbar {
		display: none;
	}
	.wolf-yoga .wy-set-tabs ul.nav li {
		flex: 0 0 auto;
	}
	.wolf-yoga .wy-set-tabs ul.nav li a {
		padding: 8px 14px;
		font-size: 13px;
	}
}

/* ==========================================================================
   14. BLOG
   ========================================================================== */

.wolf-yoga .post-item {
	background: #fff;
	border: 1px solid var(--wy-border);
	border-radius: var(--wy-radius);
	overflow: hidden;
	transition: transform 0.4s var(--wy-ease), box-shadow 0.4s var(--wy-ease);
}
.wolf-yoga .post-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 38px rgba(31, 74, 58, 0.13);
}
.wolf-yoga .post-item .box-image img {
	transition: transform 0.6s var(--wy-ease);
}
.wolf-yoga .post-item:hover .box-image img {
	transform: scale(1.04);
}
.wolf-yoga .post-item .box-text {
	padding: 18px 20px 22px;
}
.wolf-yoga .post-item .post-date {
	color: var(--wy-second);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
}
.wolf-yoga .post-item .post-title a {
	font-family: var(--wy-font-head);
	font-size: 19px;
	color: var(--wy-main);
	line-height: 1.4;
}
.wolf-yoga .post-item .post-title a:hover {
	color: var(--wy-second);
}
.wolf-yoga .post-item .is-divider {
	display: none;
}
.wolf-yoga .post-item .entry-content {
	color: #6d6d6d;
	font-size: 13.5px;
}
.wolf-yoga .post-item .read-more,
.wolf-yoga .post-item a.button {
	font-size: 13px;
	font-weight: 600;
	color: var(--wy-main);
	text-transform: none;
}

/* ==========================================================================
   15. USP — 4 cam kết dịch vụ
   ========================================================================== */

.wy-usp-item {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--wy-icon-bg);
	border-radius: var(--wy-radius);
	padding: 20px 22px;
	height: 100%;
	transition: all 0.35s var(--wy-ease);
}
.wy-usp-item:hover {
	background: var(--wy-header-bg);
}
.wy-usp-item .wy-svg {
	color: var(--wy-main);
}
.wy-usp-text h5 {
	font-family: var(--wy-font-head);
	font-size: 17px;
	color: var(--wy-main);
	margin: 0 0 2px;
}
.wy-usp-text p {
	margin: 0;
	font-size: 13px;
	color: #6d6d6d;
}

/* ==========================================================================
   16. FOOTER — nền kem, serif xanh, social tròn xanh đậm
   ========================================================================== */

.wolf-yoga .wy-footer,
.wolf-yoga .wy-footer .container {
	color: var(--wy-header-text);
}
.wy-footer-logo {
	margin-bottom: 14px;
	display: block;
}
.wy-footer-des {
	font-size: 14px;
	color: var(--wy-header-text);
	opacity: 0.85;
	margin-bottom: 16px;
}
.wy-footer-contact {
	margin-bottom: 4px;
}
.wy-footer-line {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-bottom: 10px;
	font-size: 14px;
	color: var(--wy-header-text);
	line-height: 1.5;
}
.wy-footer-line .wy-svg {
	color: var(--wy-main);
	margin-top: 2px;
}
.wy-footer-line a {
	color: var(--wy-main);
	font-weight: 600;
}
.wy-footer-line a:hover {
	color: var(--wy-footer-hover);
}

.wy-footer-socials {
	display: flex;
	gap: 10px;
	margin-top: 14px;
	flex-wrap: wrap;
}
.wy-footer-socials a {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--wy-main);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s var(--wy-ease);
}
.wy-footer-socials a:hover {
	background: var(--wy-footer-hover);
	transform: translateY(-3px);
	color: #fff;
}
.wy-footer-socials .wy-svg svg {
	width: 18px;
	height: 18px;
}

/* Tiêu đề + link cột menu footer ([ux_menu_title] / [ux_menu_link]) */
.wolf-yoga .wy-footer .ux-menu-title {
	font-family: var(--wy-font-head);
	font-size: 18px;
	font-weight: 700;
	color: var(--wy-main);
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(51, 48, 47, 0.12);
}
.wolf-yoga .wy-footer .ux-menu {
	margin-bottom: 0;
}
.wolf-yoga .wy-footer .ux-menu-link__link {
	color: var(--wy-header-text);
	font-size: 14px;
	padding: 6px 0;
	transition: color 0.25s var(--wy-ease), transform 0.25s var(--wy-ease);
}
.wolf-yoga .wy-footer .ux-menu-link__link:hover {
	color: var(--wy-footer-hover);
	transform: translateX(3px);
}

/* Dải phương thức thanh toán */
.wy-footer-payments {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}
.wy-footer-payments img {
	height: 28px;
	background: #fff;
	border-radius: 6px;
	padding: 4px 6px;
	border: 1px solid rgba(51, 48, 47, 0.08);
}

/* Dòng copyright (absolute footer) */
.wolf-yoga .absolute-footer {
	background: var(--wy-header-bg);
	color: var(--wy-header-text);
	border-top: 1px solid rgba(51, 48, 47, 0.1);
}
.wolf-yoga .absolute-footer a {
	color: var(--wy-main);
}
.wolf-yoga .absolute-footer a:hover {
	color: var(--wy-footer-hover);
}

/* ==========================================================================
   17. TRANG PHỤ (Giới thiệu / Liên hệ)
   ========================================================================== */

.wy-page-title {
	font-family: var(--wy-font-head);
	color: var(--wy-main);
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 800;
	margin: 0;
}
.wy-contact-info,
.wy-contact-note {
	background: var(--wy-icon-bg);
	border-radius: var(--wy-radius);
	padding: 26px 28px;
	height: 100%;
}
.wy-contact-note h4 {
	color: var(--wy-main);
	font-size: 22px;
	margin-bottom: 8px;
}
.wy-contact-note p {
	color: #6d6d6d;
	margin-bottom: 18px;
}

/* ==========================================================================
   18. RESPONSIVE BỔ SUNG
   ========================================================================== */

@media (max-width: 849px) {
	.wy-sec-title {
		font-size: 24px;
	}
	.wy-hero-desc {
		margin-bottom: 18px;
	}
	body.wolf-yoga #top-bar .flex-left,
	body.wolf-yoga #top-bar .flex-right {
		display: none;
	}
}

@media (max-width: 549px) {
	.wy-why-item {
		padding: 22px 16px;
	}
	.wy-usp-item {
		padding: 16px;
	}
	.wolf-yoga .wy-flash-count .ux-timer {
		font-size: 150% !important; /* inline style của shortcode dùng ID selector */
	}
	.wy-flash-label {
		font-size: 16px;
	}
}

/* ==========================================================================
   19. WOOCOMMERCE — trang cửa hàng, sản phẩm, giỏ hàng, thanh toán
   ========================================================================== */

/* ---------- Tiêu đề trang cửa hàng + breadcrumb ---------- */

.wolf-yoga .page-header {
	background: var(--wy-cream2);
}
.wolf-yoga .page-header .page-title,
.wolf-yoga .shop-page-title {
	font-family: var(--wy-font-head);
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 700;
	color: var(--wy-main);
	margin-bottom: 4px;
}
.wolf-yoga .page-header .entry-content {
	color: #747474;
	font-size: 15px;
}
.wolf-yoga .breadcrumbs {
	color: #8a8a8a;
	font-size: 13px;
	font-weight: 500;
}
.wolf-yoga .breadcrumbs a {
	color: var(--wy-second);
}
.wolf-yoga .breadcrumbs a:hover {
	color: var(--wy-main);
}

/* ---------- Thanh công cụ cửa hàng (số kết quả + sắp xếp) ---------- */

.wolf-yoga .woocommerce-result-count {
	color: #7a7a7a;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.wolf-yoga select {
	border: 1px solid var(--wy-border);
	border-radius: 8px;
	background: #fff;
	color: var(--wy-text);
	font-family: var(--wy-font-body);
	font-size: 14px;
	padding: 8px 12px;
}
.wolf-yoga .woocommerce-ordering select {
	padding: 9px 30px 9px 12px;
	border-radius: 999px;
}

/* ---------- Input dùng chung ---------- */

.wolf-yoga input[type="text"],
.wolf-yoga input[type="email"],
.wolf-yoga input[type="tel"],
.wolf-yoga input[type="password"],
.wolf-yoga input[type="search"],
.wolf-yoga input[type="number"],
.wolf-yoga textarea {
	border: 1px solid var(--wy-border);
	border-radius: 8px;
	transition: border-color 0.25s var(--wy-ease), box-shadow 0.25s var(--wy-ease);
}
.wolf-yoga input[type="text"]:focus,
.wolf-yoga input[type="email"]:focus,
.wolf-yoga input[type="tel"]:focus,
.wolf-yoga input[type="password"]:focus,
.wolf-yoga input[type="search"]:focus,
.wolf-yoga input[type="number"]:focus,
.wolf-yoga textarea:focus {
	border-color: var(--wy-main);
	box-shadow: 0 0 0 3px rgba(31, 74, 58, 0.1);
	outline: none;
}
.wolf-yoga .quantity .qty {
	border: 1px solid var(--wy-border);
	border-radius: 8px;
	padding: 8px;
}

/* ---------- Sidebar cửa hàng (bộ lọc) ---------- */

.wolf-yoga .widget-title,
.wolf-yoga .widget .widget-title {
	font-family: var(--wy-font-head);
	font-size: 19px;
	color: var(--wy-main);
}
.wolf-yoga .widget_product_categories ul li a,
.wolf-yoga .widget_layered_nav ul li a {
	color: var(--wy-text);
	font-size: 14px;
	padding: 6px 0;
	display: block;
	transition: color 0.25s var(--wy-ease), padding-left 0.25s var(--wy-ease);
}
.wolf-yoga .widget_product_categories ul li a:hover,
.wolf-yoga .widget_layered_nav ul li a:hover {
	color: var(--wy-main);
	padding-left: 5px;
}
.wolf-yoga .widget_price_filter .price_slider_wrapper .ui-slider-horizontal {
	height: 5px;
	border-radius: 999px;
	background: var(--wy-border);
}
.wolf-yoga .widget_price_filter .ui-slider .ui-slider-range {
	background: var(--wy-main);
	border-radius: 999px;
}
.wolf-yoga .widget_price_filter .ui-slider .ui-slider-handle {
	background: #fff;
	border: 2px solid var(--wy-main);
	border-radius: 50%;
}

/* ---------- Phân trang ---------- */

.wolf-yoga .page-number {
	border-radius: 10px;
	border: 1px solid var(--wy-border);
	color: var(--wy-text);
}
.wolf-yoga .page-number.current {
	background: var(--wy-main);
	border-color: var(--wy-main);
	color: #fff;
}

/* ---------- Sản phẩm đơn ---------- */

.wolf-yoga .product_title {
	font-family: var(--wy-font-head);
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 700;
	color: var(--wy-main);
	line-height: 1.25;
}
.wolf-yoga .summary .price {
	color: var(--wy-price);
	font-size: 26px;
	font-weight: 700;
}
.wolf-yoga .summary .price del {
	font-size: 16px;
	color: #9a9a9a;
	font-weight: 500;
}
.wolf-yoga .summary .price ins {
	text-decoration: none;
}
.wolf-yoga .woocommerce-product-details__short-description {
	color: #6d6d6d;
	line-height: 1.7;
}
.wolf-yoga .product_meta {
	font-size: 13px;
	color: #8a8a8a;
}
.wolf-yoga .product_meta a {
	color: var(--wy-second);
	font-weight: 600;
}
.wolf-yoga .product_meta a:hover {
	color: var(--wy-main);
}

/* Thư viện ảnh sản phẩm */
.wolf-yoga .woocommerce-product-gallery__wrapper img {
	border-radius: 14px;
}
.wolf-yoga .flex-control-thumbs li img {
	border-radius: 10px;
	border: 2px solid transparent;
	opacity: 0.7;
	transition: all 0.3s var(--wy-ease);
}
.wolf-yoga .flex-control-thumbs li img.flex-active,
.wolf-yoga .flex-control-thumbs li img:hover {
	border-color: var(--wy-main);
	opacity: 1;
}

/* Tab mô tả / đánh giá trong trang sản phẩm */
.wolf-yoga .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--wy-border);
	gap: 8px;
}
.wolf-yoga .woocommerce-tabs ul.tabs li a {
	font-family: var(--wy-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--wy-text);
	background: transparent;
	border: 1px solid var(--wy-border);
	border-radius: 999px;
	padding: 8px 22px;
	transition: all 0.3s var(--wy-ease);
}
.wolf-yoga .woocommerce-tabs ul.tabs li a:hover {
	color: var(--wy-main);
	border-color: var(--wy-main);
}
.wolf-yoga .woocommerce-tabs ul.tabs li.active a {
	background: var(--wy-main);
	border-color: var(--wy-main);
	color: #fff;
}
.wolf-yoga .woocommerce-tabs .panel h2 {
	font-family: var(--wy-font-head);
	color: var(--wy-main);
}

/* Sản phẩm liên quan / gợi ý */
.wolf-yoga .related.products > h2,
.wolf-yoga .upsells.products > h2,
.wolf-yoga .cross-sells > h2 {
	font-family: var(--wy-font-head);
	font-size: 26px;
	color: var(--wy-main);
}

/* Đánh giá sản phẩm */
.wolf-yoga .commentlist .comment_container {
	border: 1px solid var(--wy-border);
	border-radius: 14px;
	padding: 18px;
}
.wolf-yoga .commentlist img.avatar {
	border-radius: 50%;
}

/* ---------- Giỏ hàng ---------- */

.wolf-yoga .shop_table {
	border-color: var(--wy-border);
}
.wolf-yoga .shop_table th {
	font-family: var(--wy-font-body);
	font-size: 13px;
	font-weight: 700;
	color: var(--wy-main);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-color: var(--wy-border);
}
.wolf-yoga .shop_table td {
	border-color: var(--wy-border);
}
.wolf-yoga .shop_table img {
	border-radius: 10px;
}
.wolf-yoga .shop_table .product-name a {
	color: var(--wy-text);
	font-weight: 500;
}
.wolf-yoga .shop_table .product-name a:hover {
	color: var(--wy-main);
}
.wolf-yoga .shop_table .amount,
.wolf-yoga .shop_table .product-price .amount,
.wolf-yoga .shop_table .product-subtotal .amount {
	color: var(--wy-price);
	font-weight: 600;
}
.wolf-yoga .actions .coupon .input-text {
	border: 1px solid var(--wy-border);
	border-radius: 8px;
	padding: 10px 14px;
}

/* Tổng kết giỏ hàng */
.wolf-yoga .cart_totals {
	background: var(--wy-cream);
	border: 1px solid var(--wy-border);
	border-radius: var(--wy-radius);
	padding: 24px 26px;
}
.wolf-yoga .cart_totals h2 {
	font-family: var(--wy-font-head);
	font-size: 24px;
	color: var(--wy-main);
}
.wolf-yoga .cart_totals .shop_table td,
.wolf-yoga .cart_totals .shop_table th {
	border: none;
}
.wolf-yoga .cart_totals .order-total .amount {
	color: var(--wy-price);
	font-size: 20px;
	font-weight: 700;
}

/* ---------- Thanh toán ---------- */

.wolf-yoga #order_review_heading,
.wolf-yoga .woocommerce-billing-fields > h3,
.wolf-yoga .woocommerce-additional-fields > h3 {
	font-family: var(--wy-font-head);
	font-size: 24px;
	color: var(--wy-main);
}
.wolf-yoga #order_review {
	background: var(--wy-cream);
	border: 1px solid var(--wy-border);
	border-radius: var(--wy-radius);
	padding: 20px 22px;
}
.wolf-yoga #payment {
	background: var(--wy-icon-bg);
	border-radius: 12px;
}
.wolf-yoga #payment div.payment_box {
	background: #fff;
	border-radius: 8px;
	color: var(--wy-text);
}
.wolf-yoga #payment div.payment_box::before {
	border-bottom-color: #fff;
}

/* ---------- Tài khoản ---------- */

.wolf-yoga .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin-left: 0;
}
.wolf-yoga .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 11px 16px;
	margin-bottom: 4px;
	border-radius: 10px;
	color: var(--wy-text);
	font-weight: 500;
	font-size: 14px;
	background: var(--wy-icon-bg);
	transition: all 0.25s var(--wy-ease);
}
.wolf-yoga .woocommerce-MyAccount-navigation li a:hover {
	color: var(--wy-main);
	transform: translateX(3px);
}
.wolf-yoga .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--wy-main);
	color: #fff;
}
.wolf-yoga .woocommerce-MyAccount-content h2,
.wolf-yoga .woocommerce-MyAccount-content h3 {
	font-family: var(--wy-font-head);
	color: var(--wy-main);
}

/* ---------- Thông báo WooCommerce ---------- */

.wolf-yoga .woocommerce-message,
.wolf-yoga .woocommerce-info,
.wolf-yoga .woocommerce-error {
	border-radius: 10px;
	background: var(--wy-icon-bg);
	color: var(--wy-text);
	font-size: 14px;
}
.wolf-yoga .woocommerce-message {
	border-top-color: var(--wy-main);
}
.wolf-yoga .woocommerce-message::before {
	color: var(--wy-main);
}
.wolf-yoga .woocommerce-info {
	border-top-color: var(--wy-gold);
}
.wolf-yoga .woocommerce-info::before {
	color: var(--wy-gold);
}
.wolf-yoga .woocommerce-error {
	border-top-color: #d9534f;
}

/* ---------- Quickview + giỏ hàng dạng drawer ---------- */

.wolf-yoga .mfp-content .product-lightbox .product-title {
	font-family: var(--wy-font-head);
	color: var(--wy-main);
}
.wolf-yoga .mfp-content .product-lightbox .price {
	color: var(--wy-price);
	font-weight: 700;
}
.wolf-yoga #shop-sidebar .sidebar-title,
.wolf-yoga .off-canvas .sidebar-title {
	font-family: var(--wy-font-head);
	color: var(--wy-main);
}