/**
 * TSV - SEO CONTENT SHARED STYLES
 * File: inc/seo-content/assets/css/tsv-seo-content.css
 *
 * Dùng chung cho:
 * - Box SEO trang chủ.
 * - Nội dung SEO trang danh mục sản phẩm.
 * - Nội dung mô tả trang chi tiết sản phẩm.
 *
 * Chức năng:
 * - Định dạng H2, H3, H4 đồng bộ.
 * - Đoạn văn, danh sách, liên kết, ảnh, bảng và trích dẫn.
 * - Xem thêm / Thu gọn nội dung dài.
 * - Gallery nhiều ảnh trong cùng một nhóm.
 * - Lightbox phóng ảnh có mũi tên và bộ đếm.
 * - Tối ưu desktop, tablet và mobile.
 *
 * Giao diện dùng chung của nút đóng và mũi tên:
 * - Màu sắc.
 * - Viền.
 * - Kích thước.
 * - Bo góc.
 * - Hover / focus / active.
 *
 * Được quản lý tại:
 * inc/seo-content/assets/css/tsv-seo-overlay-ui.css tại trang chủ/danh mục.
 * inc/overlay-ui/assets/css/tsv-product-overlay-ui.css tại trang chi tiết sản phẩm.
 */


/* =====================================================
   01. BIẾN GIAO DIỆN DÙNG CHUNG
===================================================== */

.tsv-seo-content {
	--tsv-seo-primary: var(--tsv-primary-color, #1e7be8);
	--tsv-seo-primary-dark: var(--tsv-heading-color, #082b63);
	--tsv-seo-heading-secondary: var(--tsv-heading-color, #082b63);
	--tsv-seo-text: var(--tsv-text-color, #333333);
	--tsv-seo-muted: #667085;
	--tsv-seo-border: #e4eaf2;
	--tsv-seo-soft-bg: #f5f9ff;
	--tsv-seo-radius: 10px;
	--tsv-seo-collapse-height: 900px;

	color: var(--tsv-seo-text);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.75;

	overflow-wrap: anywhere;
}


/* =====================================================
   02. RESET KHOẢNG CÁCH ĐẦU VÀ CUỐI
===================================================== */

.tsv-seo-content > :first-child {
	margin-top: 0;
}

.tsv-seo-content > :last-child {
	margin-bottom: 0;
}


/* =====================================================
   03. TIÊU ĐỀ H2
===================================================== */

.tsv-seo-content h2 {
	display: block;

	margin: 30px 0 14px;
	padding: 0 0 0 12px;

	color: var(--tsv-seo-primary-dark);
	font-size: var(--tsv-h2-size, 22px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.15px;
	text-align: left;
	text-transform: none;

	background: transparent;
	border: 0;
	border-left: 4px solid var(--tsv-seo-primary);
	border-radius: 0;

	box-shadow: none;

	scroll-margin-top: 100px;
	overflow-wrap: anywhere;
}

.tsv-seo-content h2:first-child,
.tsv-seo-content h2:first-of-type {
	margin-top: 0;
}


/* =====================================================
   04. TIÊU ĐỀ H3
===================================================== */

.tsv-seo-content h3 {
	display: block;

	margin: 24px 0 12px;
	padding: 0 0 0 11px;

	color: var(--tsv-seo-heading-secondary);
	font-size: var(--tsv-h3-size, 18px);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;

	background: transparent;
	border: 0;
	border-left: 3px solid var(--tsv-seo-primary);
	border-radius: 0;

	box-shadow: none;

	scroll-margin-top: 100px;
	overflow-wrap: anywhere;
}


/* =====================================================
   05. TIÊU ĐỀ H4
===================================================== */

.tsv-seo-content h4 {
	display: block;

	margin: 20px 0 10px;
	padding: 0 0 0 9px;

	color: var(--tsv-seo-heading-secondary);
	font-size: var(--tsv-h4-size, 16px);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;

	background: transparent;
	border: 0;
	border-left: 2px solid #66aef2;
	border-radius: 0;

	box-shadow: none;

	scroll-margin-top: 100px;
	overflow-wrap: anywhere;
}


/* =====================================================
   06. ĐOẠN VĂN VÀ CHỮ NHẤN MẠNH
===================================================== */

.tsv-seo-content p {
	margin: 0 0 16px;

	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.tsv-seo-content strong,
.tsv-seo-content b {
	font-weight: 700;
}

.tsv-seo-content em {
	font-style: italic;
}

.tsv-seo-content hr {
	height: 1px;
	margin: 26px 0;

	background: var(--tsv-seo-border);
	border: 0;
}


/* =====================================================
   07. DANH SÁCH
===================================================== */

.tsv-seo-content ul,
.tsv-seo-content ol {
	margin: 10px 0 18px;
	padding-left: 25px;
}

.tsv-seo-content li {
	margin-bottom: 7px;
	padding-left: 2px;

	color: inherit;
	font-size: inherit;
	line-height: 1.7;
}

.tsv-seo-content li::marker {
	color: var(--tsv-seo-primary);
}


/* =====================================================
   08. LIÊN KẾT
===================================================== */

.tsv-seo-content a {
	color: var(--tsv-seo-primary);
	font-weight: 600;
	text-decoration: none;
}

.tsv-seo-content a:hover,
.tsv-seo-content a:focus-visible {
	color: #0b5fc0;
	text-decoration: underline;
}


/* =====================================================
   09. HÌNH ẢNH VÀ CHÚ THÍCH
===================================================== */

.tsv-seo-content img {
	display: block;

	max-width: 100%;
	height: auto;

	margin: 20px auto;

	border-radius: var(--tsv-seo-radius);
}

.tsv-seo-content figure {
	display: block;

	max-width: 100%;
	margin: 20px auto;
}

.tsv-seo-content figure img {
	margin: 0 auto;
}

.tsv-seo-content figcaption,
.tsv-seo-content .wp-caption-text {
	margin: 7px 0 0;

	color: var(--tsv-seo-muted);
	font-size: 14px;
	font-style: italic;
	line-height: 1.5;
	text-align: center;
}

.tsv-seo-content img[data-tsv-seo-zoom="1"] {
	cursor: zoom-in;

	transition:
		transform 0.22s ease,
		box-shadow 0.22s ease,
		opacity 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {

	.tsv-seo-content img[data-tsv-seo-zoom="1"]:hover {
		opacity: 0.97;
		transform: translateY(-2px);

		box-shadow:
			0 10px 26px rgba(8, 43, 99, 0.16);
	}
}


/* =====================================================
   10. TRÍCH DẪN
===================================================== */

.tsv-seo-content blockquote {
	margin: 20px 0;
	padding: 14px 18px;

	color: #344054;

	background: var(--tsv-seo-soft-bg);
	border: 0;
	border-left: 4px solid var(--tsv-seo-primary);
	border-radius: 0 8px 8px 0;
}

.tsv-seo-content blockquote > :first-child {
	margin-top: 0;
}

.tsv-seo-content blockquote > :last-child {
	margin-bottom: 0;
}


/* =====================================================
   11. BẢNG NỘI DUNG
===================================================== */

.tsv-seo-content table {
	width: 100%;
	margin: 20px 0;

	border-collapse: collapse;
	border-spacing: 0;
}

.tsv-seo-content th,
.tsv-seo-content td {
	padding: 10px 12px;

	border: 1px solid var(--tsv-seo-border);

	text-align: left;
	vertical-align: top;
}

.tsv-seo-content th {
	color: var(--tsv-seo-primary-dark);
	font-weight: 700;

	background: var(--tsv-seo-soft-bg);
}


/* =====================================================
   12. XEM THÊM / THU GỌN
===================================================== */

.tsv-seo-readmore {
	position: relative;
}

.tsv-seo-readmore__inner {
	position: relative;

	overflow: hidden;

	transition: max-height 0.35s ease;
}

.tsv-seo-readmore.is-collapsed .tsv-seo-readmore__inner {
	max-height: var(--tsv-seo-collapse-height);
}

.tsv-seo-readmore.is-expanded .tsv-seo-readmore__inner {
	max-height: none;

	overflow: visible;
}


/* Lớp mờ cuối nội dung khi đang thu gọn */

.tsv-seo-readmore.is-collapsed::after {
	content: "";

	position: absolute;
	right: 0;
	bottom: 56px;
	left: 0;
	z-index: 2;

	height: 120px;

	background:
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0),
			#ffffff 78%
		);

	pointer-events: none;
}


/* Khối chứa nút */

.tsv-seo-readmore__toggle-wrap {
	position: relative;
	z-index: 3;

	display: flex;
	align-items: center;
	justify-content: center;

	padding-top: 14px;
}


/* Nút Xem thêm / Thu gọn */

.tsv-seo-readmore__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 8px;

	min-width: 150px;
	height: 42px;

	margin: 0;
	padding: 0 18px;

	color: var(--tsv-seo-primary);
	background: #ffffff;

	border: 1px solid var(--tsv-seo-primary);
	border-radius: 999px;

	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-transform: none;

	cursor: pointer;

	box-shadow:
		0 4px 14px rgba(30, 115, 232, 0.1);

	transition:
		color 0.22s ease,
		background-color 0.22s ease,
		box-shadow 0.22s ease,
		transform 0.22s ease;
}

.tsv-seo-readmore__toggle::after {
	content: "▼";

	font-size: 11px;
	line-height: 1;

	transition: transform 0.22s ease;
}

.tsv-seo-readmore__toggle:hover,
.tsv-seo-readmore__toggle:focus-visible {
	color: #ffffff;
	background: var(--tsv-seo-primary);

	box-shadow:
		0 6px 18px rgba(30, 115, 232, 0.18);
}

.tsv-seo-readmore__toggle:focus-visible {
	outline: 2px solid rgba(30, 123, 232, 0.3);
	outline-offset: 3px;
}

.tsv-seo-readmore.is-expanded .tsv-seo-readmore__toggle::after {
	transform: rotate(180deg);
}

.tsv-seo-readmore.is-expanded::after {
	display: none;
}


/* =====================================================
   13. GALLERY ẢNH TRONG NỘI DUNG SEO
===================================================== */

.tsv-seo-gallery {
	position: relative;

	width: 100%;
	margin: 24px auto 28px;
}

.tsv-seo-gallery__stage {
	position: relative;

	width: 100%;

	overflow: hidden;

	background: #f5f7fa;
	border-radius: var(--tsv-seo-radius);
}

.tsv-seo-gallery__image {
	display: block;

	width: 100%;
	height: auto;
	max-height: 720px;

	margin: 0;

	object-fit: contain;
	object-position: center;

	background: #f5f7fa;

	border-radius:
		var(--tsv-seo-radius)
		var(--tsv-seo-radius)
		0
		0;

	cursor: zoom-in;
}

.tsv-seo-gallery__caption {
	min-height: 38px;

	margin: 0;
	padding: 8px 10px;

	color: #444444;
	background: #f3f5f7;

	border-radius:
		0
		0
		var(--tsv-seo-radius)
		var(--tsv-seo-radius);

	font-size: 14px;
	font-style: italic;
	line-height: 1.5;
	text-align: center;
}


/* Vị trí mũi tên gallery
   Hình dáng được quản lý tại tsv-seo-overlay-ui.css */

.tsv-seo-gallery__nav {
	position: absolute;
	top: 50%;
	z-index: 5;

	transform: translateY(-50%);
}

.tsv-seo-gallery__nav--prev {
	left: 8px;
}

.tsv-seo-gallery__nav--next {
	right: 8px;
}


/* Bộ đếm gallery */

.tsv-seo-gallery__count {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 5;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 48px;
	height: 26px;

	padding: 0 9px;

	color: #ffffff;
	background: rgba(0, 0, 0, 0.58);

	border-radius: 999px;

	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.tsv-seo-gallery.is-single-image .tsv-seo-gallery__nav,
.tsv-seo-gallery.is-single-image .tsv-seo-gallery__count {
	display: none !important;
}


/* =====================================================
   14. LIGHTBOX PHÓNG ẢNH
===================================================== */

body.tsv-seo-lightbox-open {
	overflow: hidden;

	touch-action: none;
}

.tsv-seo-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;

	display: none;
	align-items: center;
	justify-content: center;

	padding: 14px;

	overscroll-behavior: contain;
}

.tsv-seo-lightbox.is-active {
	display: flex;
}

.tsv-seo-lightbox__image {
	display: block;

	width: auto;
	max-width: min(96vw, 1600px);

	height: auto;
	max-height: 94vh;

	margin: 0;

	object-fit: contain;

	background: #ffffff;

	border-radius: 10px;

	box-shadow:
		0 18px 55px rgba(0, 0, 0, 0.45);

	cursor: zoom-out;

	user-select: none;
	-webkit-user-drag: none;
}


/* Vị trí nút đóng lightbox
   Hình dáng được quản lý tại tsv-seo-overlay-ui.css */

.tsv-seo-lightbox__close {
	position: fixed;
	top: 14px;
	right: 16px;
	z-index: 1000001;
}


/* Vị trí mũi tên lightbox
   Hình dáng được quản lý tại tsv-seo-overlay-ui.css */

.tsv-seo-lightbox__nav {
	position: fixed;
	top: 50%;
	z-index: 1000001;

	transform: translateY(-50%);
}

.tsv-seo-lightbox__nav--prev {
	left: 12px;
}

.tsv-seo-lightbox__nav--next {
	right: 12px;
}


/* Bộ đếm lightbox */

.tsv-seo-lightbox__count {
	position: fixed;
	bottom: 18px;
	left: 50%;
	z-index: 1000001;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 64px;
	height: 30px;

	padding: 0 11px;

	color: var(--tsv-seo-primary-dark, #082b63);
	background: rgba(255, 255, 255, 0.92);

	border-radius: 999px;

	font-size: 13px;
	font-weight: 700;
	line-height: 1;

	transform: translateX(-50%);
}

.tsv-seo-lightbox.is-single-image .tsv-seo-lightbox__nav,
.tsv-seo-lightbox.is-single-image .tsv-seo-lightbox__count {
	display: none !important;
}


/* =====================================================
   15. TABLET
===================================================== */

@media only screen and (max-width: 1024px) {

	.tsv-seo-content {
		--tsv-seo-collapse-height: 700px;
	}

	.tsv-seo-content h2 {
		margin-top: 27px;
		font-size: var(--tsv-h2-size-tablet, 20px);
	}

	.tsv-seo-content h3 {
		margin-top: 22px;
		font-size: var(--tsv-h3-size-tablet, 17px);
	}

	.tsv-seo-content h4 {
		font-size: var(--tsv-h4-size-tablet, 16px);
	}

	.tsv-seo-gallery__image {
		max-height: 600px;
	}
}


/* =====================================================
   16. MOBILE
===================================================== */

@media only screen and (max-width: 768px) {

	.tsv-seo-content {
		--tsv-seo-collapse-height: 520px;

		font-size: 15px;
		line-height: 1.7;
	}

	.tsv-seo-content h2 {
		margin: 25px 0 12px;
		padding-left: 10px;

		font-size: var(--tsv-h2-size-mobile, 18px);
		line-height: 1.4;
	}

	.tsv-seo-content h3 {
		margin: 21px 0 10px;
		padding-left: 9px;

		font-size: var(--tsv-h3-size-mobile, 16px);
		line-height: 1.45;
	}

	.tsv-seo-content h4 {
		margin: 18px 0 9px;
		padding-left: 8px;

		font-size: var(--tsv-h4-size-mobile, 15px);
	}

	.tsv-seo-content p {
		margin-bottom: 13px;
	}

	.tsv-seo-content ul,
	.tsv-seo-content ol {
		padding-left: 22px;
	}

	.tsv-seo-content table {
		display: block;

		max-width: 100%;

		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.tsv-seo-content img {
		margin: 18px auto;

		border-radius: 8px;
	}

	.tsv-seo-readmore.is-collapsed::after {
		bottom: 52px;

		height: 100px;
	}

	.tsv-seo-readmore__toggle {
		min-width: 138px;
		height: 40px;

		padding: 0 16px;

		font-size: 14px;
	}

	.tsv-seo-gallery {
		margin: 20px auto 24px;
	}

	.tsv-seo-gallery__stage,
	.tsv-seo-gallery__image {
		border-radius: 8px;
	}

	.tsv-seo-gallery__image {
		max-height: 460px;

		border-radius: 8px 8px 0 0;
	}

	.tsv-seo-gallery__caption {
		padding: 7px 8px;

		font-size: 13px;

		border-radius: 0 0 8px 8px;
	}

	.tsv-seo-gallery__nav--prev {
		left: 6px;
	}

	.tsv-seo-gallery__nav--next {
		right: 6px;
	}

	.tsv-seo-gallery__count {
		right: 8px;
		bottom: 8px;

		min-width: 44px;
		height: 24px;

		font-size: 11.5px;
	}

	.tsv-seo-lightbox {
		padding: 4px;
	}

	.tsv-seo-lightbox__image {
		max-width: 98vw;
		max-height: 92vh;

		border-radius: 8px;
	}

	.tsv-seo-lightbox__close {
		top: 8px;
		right: 8px;
	}

	.tsv-seo-lightbox__nav--prev {
		left: 6px;
	}

	.tsv-seo-lightbox__nav--next {
		right: 6px;
	}

	.tsv-seo-lightbox__count {
		bottom: 12px;

		height: 28px;

		font-size: 12.5px;
	}
}


/* =====================================================
   17. HỖ TRỢ NGƯỜI DÙNG GIẢM CHUYỂN ĐỘNG
===================================================== */

@media (prefers-reduced-motion: reduce) {

	.tsv-seo-readmore__inner,
	.tsv-seo-readmore__toggle,
	.tsv-seo-readmore__toggle::after,
	.tsv-seo-content img[data-tsv-seo-zoom="1"] {
		transition: none;
	}

	.tsv-seo-content img[data-tsv-seo-zoom="1"]:hover {
		transform: none;
	}
}