/* AquaOne Gallery Slider */
.aqgs {
	--aqgs-accent: #0184d6;
	--aqgs-ratio: 3/2;
	--aqgs-radius: 10px;
	position: relative;
	margin: 28px 0;
	user-select: none;
	-webkit-user-select: none;
}
.aqgs *, .aqgs *::before, .aqgs *::after { box-sizing: border-box; }

/* ---------- Khung ảnh chính ---------- */
.aqgs-stage {
	position: relative;
	overflow: hidden;
	border-radius: var(--aqgs-radius);
	background: #0e1a24;
	aspect-ratio: var(--aqgs-ratio);
	box-shadow: 0 10px 30px -12px rgba(0, 40, 80, .35);
	touch-action: pan-y;
}
.aqgs-track {
	display: flex;
	height: 100%;
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}
.aqgs.is-dragging .aqgs-track { transition: none; }

.aqgs-slide {
	position: relative;
	flex: 0 0 100%;
	height: 100%;
	margin: 0 !important;
	overflow: hidden;
	cursor: zoom-in;
}
/* nền mờ từ chính ảnh — ảnh dọc/ảnh lệch tỉ lệ vẫn đẹp */
.aqgs-slide::before {
	content: "";
	position: absolute;
	inset: -30px;
	background: var(--aqgs-bg) center / cover no-repeat;
	filter: blur(24px) brightness(.55) saturate(1.1);
	transform: scale(1.05);
}
.aqgs-slide img {
	position: relative;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: contain;
	margin: 0 !important;
	pointer-events: none;
}
.aqgs-cap {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 40px 20px 46px;
	color: #fff;
	font-size: 15px;
	line-height: 1.45;
	text-align: center;
	background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent);
	pointer-events: none;
}

/* ---------- Nút điều hướng ---------- */
.aqgs-nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 46px; height: 46px;
	margin: -23px 0 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	display: flex; align-items: center; justify-content: center;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .92) !important;
	color: #0e1a24;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
	opacity: 0;
	transition: opacity .25s, transform .25s, background .2s;
}
.aqgs-prev { left: 16px; transform: translateX(-8px); }
.aqgs-next { right: 16px; transform: translateX(8px); }
.aqgs-stage:hover .aqgs-nav,
.aqgs-nav:focus-visible { opacity: 1; transform: none; }
.aqgs-nav:hover { background: var(--aqgs-accent) !important; color: #fff; }
.aqgs-nav svg,
.aqgs-zoom svg,
.aqgs-lb svg {
	width: 22px; height: 22px;
	fill: none; stroke: currentColor; stroke-width: 2.2;
	stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Thanh đếm + toàn màn hình ---------- */
.aqgs-bar {
	position: absolute;
	left: 14px; right: 14px; bottom: 12px;
	z-index: 3;
	display: flex; align-items: center; justify-content: space-between;
	pointer-events: none;
}
.aqgs-count,
.aqgs-zoom {
	pointer-events: auto;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 12px !important;
	margin: 0 !important;
	min-height: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: rgba(0, 0, 0, .55) !important;
	color: #fff !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	font-weight: 400;
	text-transform: none !important;
	letter-spacing: 0 !important;
	backdrop-filter: blur(6px);
}
.aqgs-count b { font-weight: 700; }
.aqgs-zoom { cursor: pointer; transition: background .2s; }
.aqgs-zoom:hover { background: var(--aqgs-accent) !important; }
.aqgs-zoom svg { width: 15px; height: 15px; }

/* ---------- Dải ảnh thu nhỏ ---------- */
.aqgs-thumbs {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	padding: 2px 2px 6px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: #c5d3de transparent;
}
.aqgs-thumbs::-webkit-scrollbar { height: 6px; }
.aqgs-thumbs::-webkit-scrollbar-thumb { background: #c5d3de; border-radius: 3px; }
.aqgs-thumb {
	flex: 0 0 auto;
	width: 96px !important; height: 64px !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	border: 0 !important;
	border-radius: 6px !important;
	overflow: hidden;
	background: #e6edf2 !important;
	cursor: pointer;
	opacity: .55;
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: opacity .2s, outline-color .2s;
}
.aqgs-thumb img {
	display: block;
	width: 100% !important; height: 100% !important;
	object-fit: cover;
	margin: 0 !important;
}
.aqgs-thumb:hover { opacity: .9; }
.aqgs-thumb.is-active { opacity: 1; outline-color: var(--aqgs-accent); }

@media (max-width: 640px) {
	.aqgs { margin: 20px -15px; --aqgs-radius: 0px; }
	.aqgs-thumbs { padding-left: 15px; padding-right: 15px; }
	.aqgs-thumb { width: 72px !important; height: 50px !important; }
	.aqgs-nav { opacity: 1; transform: none; width: 38px; height: 38px; margin-top: -19px !important; }
	.aqgs-prev { left: 8px; } .aqgs-next { right: 8px; }
	.aqgs-zoom span { display: none; }
	.aqgs-cap { font-size: 13px; padding-bottom: 42px; }
}

/* ---------- Lightbox toàn màn hình ---------- */
.aqgs-lb {
	position: fixed; inset: 0;
	z-index: 999999;
	display: flex; flex-direction: column;
	background: rgba(6, 12, 18, .96);
	color: #fff;
	opacity: 0; visibility: hidden;
	transition: opacity .25s, visibility .25s;
	touch-action: none;
}
.aqgs-lb.is-open { opacity: 1; visibility: visible; }
.aqgs-lb-top {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 18px;
	font-size: 14px;
}
.aqgs-lb-stage {
	position: relative;
	flex: 1;
	display: flex; align-items: center; justify-content: center;
	min-height: 0;
	padding: 0 70px;
}
.aqgs-lb-stage img {
	max-width: 100%; max-height: 100%;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
	transition: opacity .2s;
}
.aqgs-lb-stage img.is-loading { opacity: .3; }
.aqgs-lb-cap {
	min-height: 52px;
	padding: 12px 20px 18px;
	text-align: center;
	font-size: 15px;
	color: rgba(255, 255, 255, .85);
}
.aqgs-lb button {
	display: flex; align-items: center; justify-content: center;
	width: 48px; height: 48px;
	padding: 0 !important; margin: 0 !important; min-height: 0 !important;
	border: 0 !important; border-radius: 50% !important;
	background: rgba(255, 255, 255, .1) !important;
	color: #fff !important;
	cursor: pointer;
	transition: background .2s;
}
.aqgs-lb button:hover { background: var(--aqgs-accent, #0184d6) !important; }
.aqgs-lb-prev, .aqgs-lb-next { position: absolute; top: 50%; margin-top: -24px !important; }
.aqgs-lb-prev { left: 12px; } .aqgs-lb-next { right: 12px; }
html.aqgs-lock, html.aqgs-lock body { overflow: hidden !important; }

@media (max-width: 640px) {
	.aqgs-lb-stage { padding: 0; }
	.aqgs-lb-prev, .aqgs-lb-next { top: auto; bottom: -60px; }
	.aqgs-lb-prev { left: 20px; } .aqgs-lb-next { right: 20px; }
	.aqgs-lb-cap { padding: 16px 80px 24px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.aqgs-track, .aqgs-nav, .aqgs-lb { transition: none; }
}