/**
 * TSV - Gallery và lightbox của nội dung SEO.
 * File: inc/seo-content/assets/css/tsv-seo-overlay-ui.css
 *
 * Tệp rút gọn này dùng cho trang chủ và danh mục; mã riêng của gallery
 * sản phẩm, popup mua hàng và PhotoSwipe chỉ tải tại trang sản phẩm.
 */

:is(
	.tsv-seo-lightbox) {
	background-color:
		var(--tsv-overlay-backdrop-strong) !important;
}

:is(
	.tsv-seo-gallery__nav,
	.tsv-seo-lightbox__close,
	.tsv-seo-lightbox__nav
) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	margin: 0 !important;
	padding: 0 !important;

	color:
		var(--tsv-overlay-control-color) !important;

	background-color:
		var(--tsv-overlay-control-bg) !important;

	border:
		1px solid
		var(--tsv-overlay-control-border) !important;

	border-radius:
		var(--tsv-overlay-radius) !important;

	box-shadow:
		var(--tsv-overlay-shadow) !important;

	font-family: Arial, sans-serif !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	text-align: center !important;
	text-transform: none !important;

	box-sizing: border-box !important;
	cursor: pointer !important;

	appearance: none !important;
	-webkit-appearance: none !important;

	transition: none !important;
	animation: none !important;
	filter: none !important;
	will-change: auto !important;
}

:is(
	.tsv-seo-gallery__nav,
	.tsv-seo-lightbox__close,
	.tsv-seo-lightbox__nav
):is(
	:hover,
	:focus,
	:focus-visible,
	:active
) {
	color: #ffffff !important;

	background-color:
		var(--tsv-overlay-control-bg) !important;

	border-color:
		var(--tsv-overlay-control-border) !important;

	box-shadow:
		var(--tsv-overlay-shadow) !important;
}

.tsv-seo-gallery__nav,
.tsv-seo-lightbox__nav {
	width:
		var(--tsv-seo-control-size) !important;

	min-width:
		var(--tsv-seo-control-size) !important;

	max-width:
		var(--tsv-seo-control-size) !important;

	height:
		var(--tsv-seo-control-size) !important;

	min-height:
		var(--tsv-seo-control-size) !important;

	max-height:
		var(--tsv-seo-control-size) !important;

	font-size: 0 !important;
	line-height: 0 !important;

	background-color:
		var(--tsv-overlay-control-bg) !important;

	border-color:
		rgba(255, 255, 255, 0.16) !important;

	border-radius: 4px !important;

	box-shadow:
		var(--tsv-overlay-seo-shadow) !important;

	transition: none !important;
	animation: none !important;
	filter: none !important;
}

.tsv-seo-gallery__nav::before,
.tsv-seo-lightbox__nav::before {
	content: "" !important;

	display: block !important;

	width:
		var(--tsv-seo-icon-size) !important;

	height:
		var(--tsv-seo-icon-size) !important;

	border-top:
		1.35px solid #ffffff !important;

	border-right:
		1.35px solid #ffffff !important;

	box-sizing: border-box !important;
	pointer-events: none !important;
}

.tsv-seo-gallery__nav--prev::before,
.tsv-seo-lightbox__nav--prev::before {
	margin-left: 1px !important;

	transform:
		rotate(-135deg) !important;
}

.tsv-seo-gallery__nav--next::before,
.tsv-seo-lightbox__nav--next::before {
	margin-right: 1px !important;

	transform:
		rotate(45deg) !important;
}

.tsv-seo-gallery__nav {
	top: 50% !important;

	transform:
		translateY(-50%) !important;

	transform-origin:
		50% 50% !important;

	translate: none !important;
	scale: 1 !important;
	rotate: 0deg !important;
}

.tsv-seo-gallery__nav--prev {
	left:
		var(--tsv-seo-control-edge) !important;

	right: auto !important;
}

.tsv-seo-gallery__nav--next {
	right:
		var(--tsv-seo-control-edge) !important;

	left: auto !important;
}

.tsv-seo-gallery__nav:is(
	:hover,
	:focus,
	:focus-visible,
	:active
) {
	top: 50% !important;

	background-color:
		var(--tsv-overlay-control-bg) !important;

	border-color:
		rgba(255, 255, 255, 0.16) !important;

	box-shadow:
		var(--tsv-overlay-seo-shadow) !important;

	transform:
		translateY(-50%) !important;

	translate: none !important;
	scale: 1 !important;
	rotate: 0deg !important;
}

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

	.tsv-seo-gallery__nav {
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	.tsv-seo-gallery__stage:hover
	.tsv-seo-gallery__nav,
	.tsv-seo-gallery__nav:focus-visible {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}
}

@media
	(hover: none),
	(pointer: coarse),
	(max-width: 768px) {

	.tsv-seo-gallery__nav {
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	.tsv-seo-gallery.is-controls-visible
	.tsv-seo-gallery__nav {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}
}

.tsv-seo-lightbox.is-active {
	display: grid !important;

	grid-template-columns:
		max-content !important;

	grid-template-rows:
		max-content !important;

	place-content: center !important;
	place-items: center !important;
}

.tsv-seo-lightbox__image,
.tsv-seo-lightbox__nav {
	grid-column: 1 !important;
	grid-row: 1 !important;
}

.tsv-seo-lightbox__image {
	display: block !important;

	align-self: center !important;
	justify-self: center !important;

	width:
		min(88vw, 1360px) !important;

	max-width:
		calc(100vw - 72px) !important;

	height: auto !important;
	max-height: 88vh !important;

	object-fit: contain !important;

	border-radius: 7px !important;
}

.tsv-seo-lightbox__nav {
	position: relative !important;

	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;

	z-index: 1000001 !important;

	align-self: center !important;

	transform: none !important;
	translate: none !important;
	scale: 1 !important;
	rotate: 0deg !important;
}

.tsv-seo-lightbox__nav--prev {
	justify-self: start !important;

	margin-left:
		var(--tsv-seo-control-edge) !important;
}

.tsv-seo-lightbox__nav--next {
	justify-self: end !important;

	margin-right:
		var(--tsv-seo-control-edge) !important;
}

.tsv-seo-lightbox__nav:is(
	:hover,
	:focus,
	:focus-visible,
	:active
) {
	background-color:
		var(--tsv-overlay-control-bg) !important;

	border-color:
		rgba(255, 255, 255, 0.16) !important;

	box-shadow:
		var(--tsv-overlay-seo-shadow) !important;

	transform: none !important;
	translate: none !important;
	scale: 1 !important;
	rotate: 0deg !important;
}

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

	.tsv-seo-lightbox__nav {
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	.tsv-seo-lightbox:has(
		.tsv-seo-lightbox__image:hover,
		.tsv-seo-lightbox__nav:hover
	)
	.tsv-seo-lightbox__nav,
	.tsv-seo-lightbox__nav:focus-visible {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}
}

@media
	(hover: none),
	(pointer: coarse),
	(max-width: 768px) {

	.tsv-seo-lightbox__nav {
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	.tsv-seo-lightbox.is-controls-visible
	.tsv-seo-lightbox__nav {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}
}

:is(
	.tsv-seo-lightbox__close) {
	width:
		var(--tsv-desktop-action-control-size) !important;

	min-width:
		var(--tsv-desktop-action-control-size) !important;

	max-width:
		var(--tsv-desktop-action-control-size) !important;

	height:
		var(--tsv-desktop-action-control-size) !important;

	min-height:
		var(--tsv-desktop-action-control-size) !important;

	max-height:
		var(--tsv-desktop-action-control-size) !important;

	margin: 0 !important;
	padding: 0 !important;

	color:
		var(--tsv-overlay-control-color) !important;

	background-color:
		var(--tsv-overlay-control-bg) !important;

	border:
		1px solid
		var(--tsv-overlay-control-border) !important;

	border-radius:
		var(--tsv-overlay-radius) !important;

	box-shadow:
		var(--tsv-overlay-shadow) !important;

	box-sizing: border-box !important;
	overflow: hidden !important;

	font-size: 0 !important;
	line-height: 0 !important;
	text-indent: 0 !important;

	transform: none !important;
	translate: none !important;
	scale: 1 !important;
	rotate: 0deg !important;

	transition: none !important;
	animation: none !important;
	filter: none !important;
}

:is(
	.tsv-seo-lightbox__close):is(
	:hover,
	:focus,
	:focus-visible,
	:active
) {
	color:
		var(--tsv-overlay-control-color) !important;

	background-color:
		var(--tsv-overlay-control-bg) !important;

	border-color:
		var(--tsv-overlay-control-border) !important;

	border-radius:
		var(--tsv-overlay-radius) !important;

	box-shadow:
		var(--tsv-overlay-shadow) !important;

	outline: 0 !important;
	outline-offset: 0 !important;

	transform: none !important;
	translate: none !important;
	scale: 1 !important;
	rotate: 0deg !important;
}

:is(
	.tsv-seo-lightbox__close)::before,
:is(
	.tsv-seo-lightbox__close)::after {
	content: "" !important;

	position: absolute !important;

	top: 50% !important;
	left: 50% !important;

	width:
		var(--tsv-desktop-close-icon-size) !important;

	height: 1.4px !important;

	margin: 0 !important;
	padding: 0 !important;

	background-color:
		var(--tsv-overlay-control-color) !important;

	background-image: none !important;

	border: 0 !important;
	border-radius: 999px !important;

	box-shadow: none !important;

	transform-origin:
		50% 50% !important;

	pointer-events: none !important;
}

:is(
	.tsv-seo-lightbox__close)::before {
	transform:
		translate(-50%, -50%)
		rotate(45deg) !important;
}

:is(
	.tsv-seo-lightbox__close)::after {
	transform:
		translate(-50%, -50%)
		rotate(-45deg) !important;
}

.tsv-seo-lightbox__close {
	position: fixed !important;

	top: 7px !important;
	right: 7px !important;
	z-index: 1000002 !important;
}

.tsv-seo-lightbox__count {
	position: fixed !important;

	bottom: 10px !important;
	left: 50% !important;
	z-index: 1000002 !important;

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

	min-width: 48px !important;
	height: 24px !important;

	padding: 0 8px !important;

	color: #082b63 !important;

	background-color:
		rgba(255, 255, 255, 0.94) !important;

	border-radius: 999px !important;

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

	transform:
		translateX(-50%) !important;
}

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

	:root {

		--tsv-mobile-arrow-control-size: 23px;
		--tsv-mobile-arrow-icon-size: 7px;

		--tsv-mobile-action-control-size: 24px;
		--tsv-mobile-close-icon-size: 10px;

		--tsv-mobile-isolated-hit-size: 44px;

		--tsv-mobile-action-bg:
			rgba(8, 43, 99, 0.9);

		--tsv-mobile-action-border:
			rgba(255, 255, 255, 0.38);

		--tsv-mobile-action-shadow:
			0 2px 7px rgba(0, 0, 0, 0.28);

		--tsv-seo-control-size:
			var(--tsv-mobile-arrow-control-size);

		--tsv-seo-icon-size:
			var(--tsv-mobile-arrow-icon-size);

		--tsv-seo-control-edge: 1px;
	}

	

	.tsv-seo-gallery__nav,
	.tsv-seo-lightbox__nav {
		touch-action:
			manipulation !important;

		-webkit-tap-highlight-color:
			transparent !important;
	}

:is(
	.tsv-seo-lightbox__close) {
	width:
		var(--tsv-mobile-action-control-size) !important;

	min-width:
		var(--tsv-mobile-action-control-size) !important;

	max-width:
		var(--tsv-mobile-action-control-size) !important;

	height:
		var(--tsv-mobile-action-control-size) !important;

	min-height:
		var(--tsv-mobile-action-control-size) !important;

	max-height:
		var(--tsv-mobile-action-control-size) !important;

	margin: 0 !important;
	padding: 0 !important;

	color: #ffffff !important;

	background-color:
		var(--tsv-mobile-action-bg) !important;

	background-image: none !important;

	border:
		1px solid
		var(--tsv-mobile-action-border) !important;

	border-radius: 5px !important;

	box-shadow:
		var(--tsv-mobile-action-shadow) !important;

	box-sizing: border-box !important;
	overflow: visible !important;

	font-size: 0 !important;
	line-height: 0 !important;
	text-indent: 0 !important;

	touch-action:
		manipulation !important;

	-webkit-tap-highlight-color:
		transparent !important;

	transition: none !important;
	animation: none !important;
	filter: none !important;
}

:is(
	.tsv-seo-lightbox__close):is(
	:hover,
	:focus,
	:focus-visible,
	:active
) {
	color: #ffffff !important;

	background-color:
		var(--tsv-mobile-action-bg) !important;

	border-color:
		var(--tsv-mobile-action-border) !important;

	border-radius: 5px !important;

	box-shadow:
		var(--tsv-mobile-action-shadow) !important;

	outline: 0 !important;
	outline-offset: 0 !important;
}

:is(
	.tsv-seo-lightbox__close)::after {
	content: "" !important;

	position: absolute !important;

	top: 50% !important;
	left: 50% !important;
	z-index: 2 !important;

	display: block !important;

	width:
		var(--tsv-mobile-close-icon-size) !important;

	height:
		var(--tsv-mobile-close-icon-size) !important;

	margin: 0 !important;
	padding: 0 !important;

	background-color:
		transparent !important;

	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6L18 18M18 6L6 18' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") !important;

	background-repeat:
		no-repeat !important;

	background-position:
		50% 50% !important;

	background-size:
		100% 100% !important;

	border: 0 !important;
	border-radius: 0 !important;

	box-shadow: none !important;

	transform:
		translate(-50%, -50%) !important;

	transform-origin:
		50% 50% !important;

	pointer-events: none !important;
}

:is(
	.tsv-seo-lightbox__close
)::before {
	content: "" !important;

	position: absolute !important;

	top: 50% !important;
	left: 50% !important;
	z-index: 1 !important;

	display: block !important;

	width:
		var(--tsv-mobile-isolated-hit-size) !important;

	height:
		var(--tsv-mobile-isolated-hit-size) !important;

	margin: 0 !important;
	padding: 0 !important;

	background:
		transparent !important;

	background-image:
		none !important;

	border: 0 !important;
	border-radius: 50% !important;

	box-shadow: none !important;

	transform:
		translate(-50%, -50%) !important;

	transform-origin:
		50% 50% !important;

	pointer-events: auto !important;
}

	.tsv-seo-lightbox__close {
		top: 5px !important;
		right: 5px !important;
	}

	.tsv-seo-lightbox__image {
		width:
			calc(100vw - 8px) !important;

		max-width:
			calc(100vw - 8px) !important;

		height: auto !important;

		max-height:
			calc(100dvh - 60px) !important;

		border-radius: 5px !important;
	}
}

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

	:root {
		--tsv-mobile-arrow-control-size: 22px;
		--tsv-mobile-arrow-icon-size: 6px;

		--tsv-mobile-action-control-size: 23px;
		--tsv-mobile-close-icon-size: 9px;
	}

	.tsv-seo-lightbox__close {
		top: 5px !important;
		right: 5px !important;
	}
}

:is(
	.tsv-seo-gallery__nav,
	.tsv-seo-lightbox__nav):focus-visible {
	outline:
		2px solid
		rgba(30, 123, 232, 0.5) !important;

	outline-offset:
		2px !important;
}

:is(
	.tsv-seo-lightbox__close):focus-visible {
	outline: 0 !important;
	outline-offset: 0 !important;
}