/**
 * =========================================================
 * TGH - SEO CATEGORY CSS
 * =========================================================
 *
 * Phiên bản hoàn chỉnh
 *
 * 1. SEO TOP / SEO FOOTER
 * 2. Nội dung dài + Xem thêm
 * 3. Nút Xem thêm tối giản
 * 4. Typography đồng bộ Blog / Theme
 * 5. H2 / H3 / P / UL / OL
 * 6. Breadcrumb
 * 7. Product Category Header
 * 8. Khoảng cách H1 / SEO / sản phẩm
 * 9. Responsive
 *
 * =========================================================
 */


/* =========================================================
   1. CATEGORY SEO - BASE
   ========================================================= */

body.tax-product_cat .tgh-category-seo {

	width: 100%;

	color: #252525;

	/*
	 * Không ép font riêng.
	 * Kế thừa font đang dùng trên website / Blog.
	 */

	font-family: inherit;

	font-size: 15px;

	line-height: 1.75;

}


body.tax-product_cat
.tgh-category-seo-inner {

	width: 100%;

}


/* =========================================================
   2. SEO CONTENT WRAPPER
   ========================================================= */

body.tax-product_cat
.tgh-seo-content-wrap {

	position: relative;

	width: 100%;

}


body.tax-product_cat
.tgh-seo-content {

	width: 100%;

	font-family: inherit;

	font-size: inherit;

	line-height: inherit;

}


/* =========================================================
   3. NỘI DUNG DÀI
   Chỉ giới hạn khi JS thêm .is-collapsible
   ========================================================= */

body.tax-product_cat
.tgh-seo-content-wrap.is-collapsible
.tgh-seo-content {

	max-height: 320px;

	overflow: hidden;

}


/* SEO TOP ngắn hơn */

body.tax-product_cat
.tgh-category-seo-top
.tgh-seo-content-wrap.is-collapsible
.tgh-seo-content {

	max-height: 280px;

}


/* =========================================================
   4. FADE
   ========================================================= */

body.tax-product_cat
.tgh-seo-fade {

	display: none;

}


body.tax-product_cat
.tgh-seo-content-wrap.is-collapsible
.tgh-seo-fade {

	display: block;

	position: absolute;

	left: 0;

	right: 0;

	bottom: 0;

	height: 80px;

	pointer-events: none;

	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0),
		rgba(255, 255, 255, 1)
	);

}


/* =========================================================
   5. KHI ĐÃ MỞ RỘNG
   ========================================================= */

body.tax-product_cat
.tgh-seo-content-wrap.is-expanded
.tgh-seo-content {

	max-height: none;

	overflow: visible;

}


body.tax-product_cat
.tgh-seo-content-wrap.is-expanded
.tgh-seo-fade {

	display: none;

}


/* =========================================================
   6. NÚT XEM THÊM
   Tối giản / nhẹ nhàng
   ========================================================= */

body.tax-product_cat
.tgh-seo-toggle {

	display: none;

	margin: 14px auto 0;

	padding: 4px 8px;

	border: 0;

	background: transparent;

	color: #777;

	font-family: inherit;

	font-size: 13px;

	font-weight: 400;

	line-height: 1.5;

	cursor: pointer;

	transition:
		color 0.2s ease,
		opacity 0.2s ease;

}


/* Chỉ hiện khi nội dung dài */

body.tax-product_cat
.tgh-seo-content-wrap.is-collapsible
+ .tgh-seo-toggle {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 5px;

}


/* Hover */

body.tax-product_cat
.tgh-seo-content-wrap.is-collapsible
+ .tgh-seo-toggle:hover {

	color: #19392a;

	background: transparent;

}


/* Focus */

body.tax-product_cat
.tgh-seo-toggle:focus {

	outline: 1px dotted #b99a72;

	outline-offset: 3px;

	background: transparent;

}


/* =========================================================
   7. ICON XEM THÊM
   ========================================================= */

body.tax-product_cat
.tgh-seo-toggle-icon {

	font-size: 13px;

	line-height: 1;

	transition:
		transform 0.2s ease;

}


body.tax-product_cat
.tgh-seo-content-wrap.is-expanded
+ .tgh-seo-toggle
.tgh-seo-toggle-icon {

	transform: translateY(-1px);

}


/* =========================================================
   8. SEO TOP / FOOTER
   ========================================================= */

body.tax-product_cat
.tgh-category-seo-top {

	margin-top: 0;

	margin-bottom: 22px;

	font-family: inherit;

	font-size: 15px;

	line-height: 1.7;

}


body.tax-product_cat
.tgh-category-seo-bottom {

	margin-top: 35px;

	padding-top: 35px;

	padding-bottom: 35px;

	font-family: inherit;

	font-size: 15px;

	line-height: 1.75;

}


/* =========================================================
   9. PARAGRAPH
   ========================================================= */

body.tax-product_cat
.tgh-category-seo p {

	margin-top: 0;

	margin-bottom: 14px;

	font-family: inherit;

	font-size: inherit;

	line-height: inherit;

}


body.tax-product_cat
.tgh-category-seo p:last-child {

	margin-bottom: 0;

}


/* =========================================================
   10. H2
   Đồng bộ font với Blog
   ========================================================= */

body.tax-product_cat
.tgh-category-seo h2 {

	margin-top: 28px;

	margin-bottom: 12px;

	padding: 0;

	color: #19392a;

	font-family: inherit;

	font-size: 25px;

	font-weight: 600;

	line-height: 1.3;

	letter-spacing: 0;

}


body.tax-product_cat
.tgh-category-seo h2:first-child {

	margin-top: 0;

}


/* Footer H2 */

body.tax-product_cat
.tgh-category-seo-bottom h2 {

	margin-top: 30px;

	margin-bottom: 12px;

}


body.tax-product_cat
.tgh-category-seo-bottom h2:first-child {

	margin-top: 0;

}


/* =========================================================
   11. H3
   ========================================================= */

body.tax-product_cat
.tgh-category-seo h3 {

	margin-top: 20px;

	margin-bottom: 8px;

	padding: 0;

	color: #19392a;

	font-family: inherit;

	font-size: 20px;

	font-weight: 600;

	line-height: 1.35;

	letter-spacing: 0;

}


body.tax-product_cat
.tgh-category-seo h3:first-child {

	margin-top: 0;

}


/* =========================================================
   12. DANH SÁCH UL / OL
   ========================================================= */

body.tax-product_cat
.tgh-category-seo ul {

	margin-top: 8px;

	margin-bottom: 18px;

	padding-left: 22px;

}


body.tax-product_cat
.tgh-category-seo ol {

	margin-top: 8px;

	margin-bottom: 18px;

	padding-left: 22px;

}


body.tax-product_cat
.tgh-category-seo li {

	margin-bottom: 6px;

	font-family: inherit;

	line-height: 1.7;

}


body.tax-product_cat
.tgh-category-seo li:last-child {

	margin-bottom: 0;

}


/* =========================================================
   13. LINK
   ========================================================= */

body.tax-product_cat
.tgh-category-seo a {

	color: #19392a;

	text-decoration: underline;

	text-decoration-color: rgba(25, 57, 42, 0.35);

	text-underline-offset: 2px;

}


body.tax-product_cat
.tgh-category-seo a:hover {

	color: #10271d;

	text-decoration-color: #10271d;

}


/* =========================================================
   14. STRONG
   ========================================================= */

body.tax-product_cat
.tgh-category-seo strong {

	color: #252525;

	font-weight: 600;

}


/* =========================================================
   15. CHỐNG KHOẢNG TRẮNG ĐẦU / CUỐI
   ========================================================= */

body.tax-product_cat
.tgh-category-seo-inner > *:first-child {

	margin-top: 0 !important;

}


body.tax-product_cat
.tgh-category-seo-inner > *:last-child {

	margin-bottom: 0 !important;

}


/* =========================================================
   16. BREADCRUMB
   ========================================================= */

body.tax-product_cat
.storefront-breadcrumb {

	margin-top: 0;

	margin-bottom: 18px;

	padding-top: 22px;

	padding-bottom: 0;

}


body.tax-product_cat
.storefront-breadcrumb .col-full {

	padding-top: 0;

	padding-bottom: 0;

}


body.tax-product_cat
.woocommerce-breadcrumb {

	margin: 0;

	font-size: 13px;

	line-height: 1.5;

}


/* =========================================================
   17. PRODUCT CATEGORY HEADER
   ========================================================= */

body.tax-product_cat
.woocommerce-products-header {

	margin-top: 0;

	margin-bottom: 0;

	padding-top: 0;

	padding-bottom: 14px;

}


/* =========================================================
   18. H1 DANH MỤC
   ========================================================= */

body.tax-product_cat
.woocommerce-products-header__title {

	margin-top: 0;

	margin-bottom: 14px;

	line-height: 1.2;

}


/* =========================================================
   19. SEO TOP SAU HEADER
   ========================================================= */

body.tax-product_cat
.tgh-category-seo-top {

	margin-top: 0;

}


/* Inner SEO TOP */

body.tax-product_cat
.tgh-category-seo-top
.tgh-category-seo-inner {

	margin-top: 0;

}


/* =========================================================
   20. DESKTOP
   ========================================================= */

@media (min-width: 769px) {

	body.tax-product_cat
	.tgh-category-seo h2 {

		font-size: 25px;

	}


	body.tax-product_cat
	.tgh-category-seo h3 {

		font-size: 20px;

	}

}


/* =========================================================
   21. TABLET / MOBILE
   ========================================================= */

@media (max-width: 768px) {


	/* SEO */

	body.tax-product_cat
	.tgh-category-seo {

		font-size: 14px;

		line-height: 1.7;

	}


	body.tax-product_cat
	.tgh-category-seo p {

		font-size: inherit;

		line-height: inherit;

		margin-bottom: 12px;

	}


	/* Nội dung dài */

	body.tax-product_cat
	.tgh-seo-content-wrap.is-collapsible
	.tgh-seo-content {

		max-height: 250px;

	}


	/* SEO TOP */

	body.tax-product_cat
	.tgh-category-seo-top
	.tgh-seo-content-wrap.is-collapsible
	.tgh-seo-content {

		max-height: 220px;

	}


	/* Fade */

	body.tax-product_cat
	.tgh-seo-content-wrap.is-collapsible
	.tgh-seo-fade {

		height: 65px;

	}


	/* H2 */

	body.tax-product_cat
	.tgh-category-seo h2 {

		margin-top: 24px;

		margin-bottom: 10px;

		font-size: 22px;

		line-height: 1.3;

	}


	/* H3 */

	body.tax-product_cat
	.tgh-category-seo h3 {

		margin-top: 18px;

		margin-bottom: 7px;

		font-size: 18px;

		line-height: 1.35;

	}


	/* List */

	body.tax-product_cat
	.tgh-category-seo ul,
	body.tax-product_cat
	.tgh-category-seo ol {

		margin-bottom: 15px;

		padding-left: 20px;

	}


	body.tax-product_cat
	.tgh-category-seo li {

		margin-bottom: 5px;

		line-height: 1.65;

	}


	/* Button */

	body.tax-product_cat
	.tgh-seo-content-wrap.is-collapsible
	+ .tgh-seo-toggle {

		margin-top: 12px;

		padding: 4px 7px;

		font-size: 12.5px;

	}


	/* Breadcrumb */

	body.tax-product_cat
	.storefront-breadcrumb {

		padding-top: 16px;

		margin-bottom: 12px;

	}


	body.tax-product_cat
	.woocommerce-breadcrumb {

		font-size: 12px;

	}


	/* Header */

	body.tax-product_cat
	.woocommerce-products-header {

		padding-bottom: 10px;

	}


	body.tax-product_cat
	.woocommerce-products-header__title {

		margin-bottom: 10px;

	}


	/* SEO TOP */

	body.tax-product_cat
	.tgh-category-seo-top {

		margin-bottom: 18px;

	}


	/* SEO FOOTER */

	body.tax-product_cat
	.tgh-category-seo-bottom {

		margin-top: 25px;

		padding-top: 25px;

		padding-bottom: 25px;

	}

}


/* =========================================================
   22. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {


	body.tax-product_cat
	.tgh-category-seo {

		font-size: 14px;

		line-height: 1.65;

	}


	body.tax-product_cat
	.tgh-category-seo p {

		font-size: inherit;

		line-height: inherit;

		margin-bottom: 11px;

	}


	/* H2 */

	body.tax-product_cat
	.tgh-category-seo h2 {

		margin-top: 22px;

		margin-bottom: 9px;

		font-size: 20px;

		line-height: 1.3;

	}


	/* H3 */

	body.tax-product_cat
	.tgh-category-seo h3 {

		margin-top: 16px;

		margin-bottom: 6px;

		font-size: 17px;

		line-height: 1.35;

	}


	/* Breadcrumb */

	body.tax-product_cat
	.storefront-breadcrumb {

		padding-top: 14px;

		margin-bottom: 10px;

	}


	/* H1 */

	body.tax-product_cat
	.woocommerce-products-header__title {

		margin-bottom: 8px;

	}


	/* SEO TOP */

	body.tax-product_cat
	.tgh-category-seo-top {

		margin-bottom: 15px;

	}


	/* SEO FOOTER */

	body.tax-product_cat
	.tgh-category-seo-bottom {

		margin-top: 20px;

		padding-top: 20px;

		padding-bottom: 20px;

	}


	/* List */

	body.tax-product_cat
	.tgh-category-seo ul,
	body.tax-product_cat
	.tgh-category-seo ol {

		padding-left: 19px;

	}

}