/* =====================================================
   VIA 3D Carousel Module — Scoped CSS (via-c3d-*)
   ===================================================== */

.via-3d-carousel-module-wrapper {
	width: 100%;
	min-height: 700px;
	height: var(--via-c3d-height, 100vh);
	color: #fff;
	font-family: inherit;
	/* KHÔNG dùng overflow:hidden ở đây — sẽ clip item 3D đang transform */
	overflow: visible;
	user-select: none;
	position: relative;
	box-sizing: border-box;
	isolation: isolate;
	/* tạo stacking context không ảnh hưởng layout ngoài */
}

/* ==================== NỀN KHÔNG GIAN ==================== */
/* Layer 1: màu nền sâu tối */
.via-3d-carousel-module-wrapper::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	border-radius: inherit;

	/* Nền đen vũ trụ sâu + 3 nebula màu sắc rõ hơn */
	background-color: #04080f;
	background-image:
		/* Nebula xanh dương – trái */
		radial-gradient(ellipse 60% 50% at 15% 50%, rgba(30, 80, 220, 0.35) 0%, transparent 70%),
		/* Nebula tím – phải trên */
		radial-gradient(ellipse 50% 45% at 85% 20%, rgba(130, 30, 220, 0.28) 0%, transparent 65%),
		/* Nebula cyan – giữa dưới */
		radial-gradient(ellipse 40% 35% at 55% 85%, rgba(0, 190, 230, 0.18) 0%, transparent 60%),
		/* Nebula đỏ hồng nhạt – góc phải dưới */
		radial-gradient(ellipse 35% 30% at 90% 80%, rgba(200, 40, 100, 0.12) 0%, transparent 60%),
		/* Dải sáng trung tâm dọc – mô phỏng dải ngân hà */
		radial-gradient(ellipse 20% 100% at 40% 50%, rgba(60, 120, 255, 0.06) 0%, transparent 100%);
}

/* Layer 2: các ngôi sao nhiều và đa dạng kích thước hơn */
.via-3d-carousel-module-wrapper::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;

	background-image:
		/* Sao nhỏ trắng – 25 điểm rải đều */
		radial-gradient(1px 1px at 5% 8%, rgba(255, 255, 255, .90) 0%, transparent 100%),
		radial-gradient(1px 1px at 12% 35%, rgba(255, 255, 255, .70) 0%, transparent 100%),
		radial-gradient(1px 1px at 8% 62%, rgba(255, 255, 255, .80) 0%, transparent 100%),
		radial-gradient(1px 1px at 18% 86%, rgba(255, 255, 255, .60) 0%, transparent 100%),
		radial-gradient(1px 1px at 25% 15%, rgba(255, 255, 255, .85) 0%, transparent 100%),
		radial-gradient(1px 1px at 32% 50%, rgba(255, 255, 255, .55) 0%, transparent 100%),
		radial-gradient(1px 1px at 28% 75%, rgba(255, 255, 255, .75) 0%, transparent 100%),
		radial-gradient(1px 1px at 40% 5%, rgba(255, 255, 255, .90) 0%, transparent 100%),
		radial-gradient(1px 1px at 47% 40%, rgba(255, 255, 255, .65) 0%, transparent 100%),
		radial-gradient(1px 1px at 42% 90%, rgba(255, 255, 255, .80) 0%, transparent 100%),
		radial-gradient(1px 1px at 55% 22%, rgba(255, 255, 255, .70) 0%, transparent 100%),
		radial-gradient(1px 1px at 60% 68%, rgba(255, 255, 255, .85) 0%, transparent 100%),
		radial-gradient(1px 1px at 52% 55%, rgba(255, 255, 255, .60) 0%, transparent 100%),
		radial-gradient(1px 1px at 68% 12%, rgba(255, 255, 255, .90) 0%, transparent 100%),
		radial-gradient(1px 1px at 73% 48%, rgba(255, 255, 255, .75) 0%, transparent 100%),
		radial-gradient(1px 1px at 65% 83%, rgba(255, 255, 255, .65) 0%, transparent 100%),
		radial-gradient(1px 1px at 80% 3%, rgba(255, 255, 255, .80) 0%, transparent 100%),
		radial-gradient(1px 1px at 85% 38%, rgba(255, 255, 255, .70) 0%, transparent 100%),
		radial-gradient(1px 1px at 78% 70%, rgba(255, 255, 255, .85) 0%, transparent 100%),
		radial-gradient(1px 1px at 92% 18%, rgba(255, 255, 255, .90) 0%, transparent 100%),
		radial-gradient(1px 1px at 96% 55%, rgba(255, 255, 255, .75) 0%, transparent 100%),
		radial-gradient(1px 1px at 88% 90%, rgba(255, 255, 255, .65) 0%, transparent 100%),
		radial-gradient(1px 1px at 20% 97%, rgba(255, 255, 255, .55) 0%, transparent 100%),
		radial-gradient(1px 1px at 50% 97%, rgba(255, 255, 255, .70) 0%, transparent 100%),
		radial-gradient(1px 1px at 75% 95%, rgba(255, 255, 255, .80) 0%, transparent 100%),
		/* Sao lớn hơn – xanh lam – 7 điểm */
		radial-gradient(2px 2px at 22% 28%, rgba(160, 200, 255, .95) 0%, transparent 100%),
		radial-gradient(2px 2px at 44% 72%, rgba(160, 200, 255, .85) 0%, transparent 100%),
		radial-gradient(2px 2px at 66% 34%, rgba(160, 200, 255, .90) 0%, transparent 100%),
		radial-gradient(2px 2px at 88% 62%, rgba(160, 200, 255, .80) 0%, transparent 100%),
		radial-gradient(2px 2px at 35% 92%, rgba(160, 200, 255, .70) 0%, transparent 100%),
		radial-gradient(2px 2px at 10% 45%, rgba(200, 220, 255, .85) 0%, transparent 100%),
		radial-gradient(2px 2px at 58% 3%, rgba(200, 220, 255, .90) 0%, transparent 100%),
		/* Sao sáng lớn – trắng vàng – 4 điểm nổi bật */
		radial-gradient(3px 3px at 15% 20%, rgba(255, 245, 200, 1.0) 0%, rgba(255, 245, 200, .3) 50%, transparent 100%),
		radial-gradient(3px 3px at 82% 15%, rgba(255, 245, 200, 1.0) 0%, rgba(255, 245, 200, .3) 50%, transparent 100%),
		radial-gradient(3px 3px at 70% 80%, rgba(255, 245, 200, 1.0) 0%, rgba(255, 245, 200, .3) 50%, transparent 100%),
		radial-gradient(3px 3px at 35% 55%, rgba(255, 245, 200, 1.0) 0%, rgba(255, 245, 200, .3) 50%, transparent 100%);
}

.via-c3d-layout-wrapper {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
}

/* ==================== LEFT PANEL ==================== */
.via-c3d-left-panel {
	flex: 6;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	/* overflow visible – cho phép item 3D khi scale lớn không bị cắt viền */
	overflow: visible;
}

.via-c3d-scene {
	width: 100%;
	height: 600px;
	perspective: 1200px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	cursor: grab;
	/* Không overflow hidden – để items 3D không bị clip */
	overflow: visible;
}

.via-c3d-scene:active {
	cursor: grabbing;
}

.via-c3d-carousel {
	width: 100%;
	height: 100%;
	position: absolute;
	transform-style: preserve-3d;
	overflow: visible;
}

/* ==================== PLANET ==================== */
.via-c3d-planet {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 500px;
	height: 500px;
	margin-top: -250px;
	margin-left: -250px;

	/* Nền tối sâu – quan trọng cho ảnh PNG có vùng trong suốt */
	background-color: #020a1c !important;
	background-size: cover !important; /* Mặc định cho ảnh category */
	background-position: center !important;
	background-repeat: no-repeat !important;

	border-radius: 50%;
	box-shadow:
		0 0 130px rgba(14, 90, 230, .35),
		0 0 60px rgba(14, 90, 230, .18),
		inset -60px -60px 120px rgba(0, 0, 0, .95),
		inset 0 0 60px rgba(0, 0, 0, .75);
	z-index: 50;
	pointer-events: auto;
	cursor: pointer;
	text-decoration: none !important;
	transition: box-shadow .4s ease;

	/* Đảm bảo theme không override màu nền */
	background-blend-mode: normal;

	/* Chống răng cưa cho hành tinh trung tâm */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	outline: 1px solid transparent; /* Kỹ thuật fix răng cưa viền tròn */
}

/* Chỉ zoom 145% cho Trái Đất mặc định để xóa viền đen của ảnh source */
.via-c3d-planet.via-c3d-is-default {
	background-size: 145% !important;
}

.via-c3d-planet:hover {
	box-shadow:
		0 0 180px rgba(14, 140, 255, .5),
		0 0 90px rgba(14, 140, 255, .25),
		inset -60px -60px 120px rgba(0, 0, 0, .9),
		inset 0 0 60px rgba(0, 0, 0, .65);
}

/* Lớp highlight ánh sáng + bóng tối tạo hình cầu */
.via-c3d-planet::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 28% 28%,
			rgba(255, 255, 255, .50) 0%,
			rgba(255, 255, 255, .15) 16%,
			transparent 45%,
			rgba(0, 0, 0, .50) 75%,
			rgba(0, 0, 0, .95) 100%);
	box-shadow: inset 8px 8px 28px rgba(255, 255, 255, .18);
	pointer-events: none;
	z-index: 1;
}

/* Viền phát sáng pulse bên ngoài hành tinh */
.via-c3d-planet::before {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	background: transparent;
	box-shadow: 0 0 0 2px rgba(56, 189, 248, .15);
	animation: via-c3d-planet-pulse 3.5s ease-in-out infinite;
	pointer-events: none;
	z-index: -1;
}

@keyframes via-c3d-planet-pulse {

	0%,
	100% {
		box-shadow: 0 0 0 1px rgba(56, 189, 248, .15), 0 0 50px rgba(56, 189, 248, .06);
	}

	50% {
		box-shadow: 0 0 0 3px rgba(56, 189, 248, .40), 0 0 90px rgba(56, 189, 248, .18);
	}
}

.via-c3d-planet-label {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff !important;
	font-size: 1.9rem;
	font-weight: 700;
	text-shadow: 0 3px 14px rgba(0, 0, 0, 1), 0 0 30px rgba(0, 0, 0, .8);
	z-index: 10;
	pointer-events: none;
	text-align: center;
	background: rgba(4, 12, 30, 0.72);
	padding: 10px 22px;
	border-radius: 30px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, .14);
	letter-spacing: 1px;
	white-space: nowrap;
	max-width: 82%;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background .3s;
}

.via-c3d-planet:hover .via-c3d-planet-label {
	background: rgba(10, 40, 110, 0.80);
}

/* ==================== CAROUSEL ITEMS ==================== */
.via-c3d-carousel-item {
	position: absolute;
	top: 50%;
	left: 50%;
	/* Giữ kích thước gốc 75x100 */
	/* Tăng gấp đôi kích thước vật lý để làm buffer nét (Pixel Doubling) */
	width: 150px;
	height: 200px;
	margin-top: -100px;
	margin-left: -75px;

	/* Nền linh hoạt từ JS */
	background-color: var(--item-bg-color, #0a1530);
	background-image: var(--item-bg-img, none);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;

	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 10px;
	overflow: hidden; /* Cắt ảnh img nếu tràn */
	transform-origin: center center;
	transition: border-color .25s, box-shadow .3s;
	box-shadow: 0 8px 28px rgba(0, 0, 0, .65);
	cursor: pointer;
	will-change: transform, opacity;

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

	/* Hoàn tác các thuộc tính 3D gây hỏng cấu trúc vòng lặp */
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
}

/* Ảnh sản phẩm/danh mục thực thụ */
.via-c3d-item-img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: var(--item-img-fit, cover);
	transition: transform .4s ease;
	pointer-events: none;
	
	/* Tối ưu hóa hiển thị ảnh rõ nét */
	image-rendering: auto;
	-webkit-user-drag: none;
}

.via-c3d-carousel-item.active {
	border-color: rgba(60, 160, 255, .8) !important;
	box-shadow: 0 0 25px rgba(10, 120, 255, .5), 0 8px 35px rgba(0, 0, 0, .8) !important;
}

.via-c3d-carousel-item.active .via-c3d-item-img {
	transform: scale(1.06);
}

/* ==================== HQ PROXY OVERLAY ==================== */
.via-c3d-hq-proxy {
	position: absolute;
	
	z-index: 500; 
	pointer-events: none; 
	opacity: 0;
	transition: none; /* Điều khiển thủ công bằng JS để đồng bộ hoàn mỹ */
	
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 0 25px rgba(10, 120, 255, .5), 0 8px 35px rgba(0, 0, 0, .8);
	border: 1px solid rgba(60, 160, 255, .8);
	
	background-color: #0a1530;
	background-size: cover;
	background-position: center;
	
	/* Căn giữa ảnh y hệt các thẻ item 3D */
	display: flex;
	align-items: center;
	justify-content: center;

	/* Tối ưu hóa render 2D siêu nét */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
}

.via-c3d-hq-proxy.active {
	opacity: 1;
}

/* Đã gỡ bỏ lớp phủ tối gradient ở dưới item theo yêu cầu người dùng */
.via-c3d-carousel-item::after,
.via-c3d-hq-proxy::after {
	content: none;
}

.via-c3d-carousel-item.active {
	border-color: #38bdf8;
	box-shadow: 0 0 40px rgba(56, 189, 248, .50), 0 8px 28px rgba(0, 0, 0, .85);
}

/* ==================== CONTROLS ==================== */
.via-c3d-controls {
	position: absolute;
	bottom: 22px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(148, 163, 184, .6);
	font-size: .8rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	pointer-events: none;
}

.via-c3d-controls p {
	margin: 0;
}

/* ==================== RIGHT PANEL ==================== */
.via-c3d-right-panel {
	flex: 4;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 5rem 0 2rem;
	z-index: 10;
}

.via-c3d-info-section.via-c3d-glass-card {
	background: rgba(6, 14, 36, 0.60);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border: 1px solid rgba(255, 255, 255, .08);
	border-top: 1px solid rgba(255, 255, 255, .15);
	border-radius: 28px;
	padding: 3rem;
	box-shadow:
		0 20px 55px rgba(0, 0, 0, .6),
		inset 0 1px 0 rgba(255, 255, 255, .1);
}

.via-c3d-badge {
	display: inline-block;
	padding: 5px 14px;
	background: rgba(56, 189, 248, .12);
	color: #38bdf8;
	border: 1px solid rgba(56, 189, 248, .28);
	border-radius: 20px;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 18px;
}

.via-c3d-item-title {
	font-size: 2.8rem;
	font-weight: 700;
	background: linear-gradient(135deg, #fff 0%, #a8c4f0 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1.2;
	margin: 0 0 14px;
}

.via-c3d-item-desc {
	color: rgba(148, 163, 184, .9);
	font-size: 1rem;
	line-height: 1.7;
	margin: 0 0 26px;
}

.via-c3d-actions {
	display: flex;
	gap: 12px;
}

.via-c3d-action-btn {
	display: inline-block;
	padding: 13px 30px;
	background: linear-gradient(135deg, #38bdf8, #0369a1);
	color: #fff !important;
	text-decoration: none !important;
	border-radius: 12px;
	font-size: .95rem;
	font-weight: 600;
	cursor: pointer;
	transition: all .3s ease;
	box-shadow: 0 8px 22px rgba(14, 100, 200, .35), inset 0 1px 0 rgba(255, 255, 255, .2);
	letter-spacing: .5px;
}

.via-c3d-action-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(14, 140, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.via-c3d-action-btn:active {
	transform: translateY(0);
}

/* ==================== RESPONSIVE ==================== */

/* ── TABLET (768px – 1100px): layout dọc, scene & orbit thu nhỏ vừa phải ── */
@media (max-width: 1100px) {
	.via-c3d-hq-proxy {
		border-radius: 7px;
		box-shadow: 0 0 18px rgba(10, 120, 255, .5), 0 6px 25px rgba(0, 0, 0, .8);
	}

	.via-c3d-layout-wrapper {
		flex-direction: column;
	}

	.via-c3d-left-panel {
		flex: none;
		height: 520px;
		min-height: unset;
		overflow: hidden; /* clip item tràn ở tablet */
	}

	.via-c3d-scene {
		height: 520px;
		/* Scale đã được di chuyển qua JS (scale3d) để tránh giật hình trên iOS */
	}

	.via-c3d-right-panel {
		flex: none;
		padding: 0 2rem 2rem;
		align-items: center;
		text-align: center;
	}

	.via-c3d-item-title {
		font-size: 1.9rem;
	}
}

/* ── MOBILE (≤ 640px): scene nhỏ hơn, info panel ngang ── */
@media (max-width: 640px) {

	.via-c3d-hq-proxy {
		border-radius: 4.6px;
		box-shadow: 0 0 11px rgba(10, 120, 255, .5), 0 4px 16px rgba(0, 0, 0, .8);
	}

	.via-c3d-carousel-item {
		box-shadow: none !important; /* Tắt đổ bóng cho các thẻ không active để tránh giật lag GPU trên mobile */
	}

	.via-c3d-carousel-item.active {
		box-shadow: 0 0 20px rgba(56, 189, 248, .40), 0 5px 15px rgba(0, 0, 0, .85) !important;
	}

	.via-3d-carousel-module-wrapper {
		min-height: unset;
		height: auto;
	}

	/* Panel trái: chỉ đủ cao cho scene */
	.via-c3d-left-panel {
		height: 340px;
		overflow: hidden;
	}

	.via-c3d-scene {
		height: 340px;
		/* Scale đã được di chuyển qua JS (scale3d) để tránh giật hình trên iOS */
	}

	.via-c3d-controls {
		bottom: 4px;
		font-size: .7rem;
		letter-spacing: 1px;
	}

	/* Panel phải: chuyển sang bố cục NGANG trên mobile */
	.via-c3d-right-panel {
		flex: none;
		padding: 0;
		align-items: stretch;
		text-align: left;
	}

	/* Bảng thông tin nằm ngang: badge bên trái, nội dung giữa, nút bên phải */
	.via-c3d-info-section.via-c3d-glass-card {
		border-radius: 0;
		padding: 16px 20px;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 14px;
		box-shadow: none;
		border-left: none;
		border-right: none;
		border-bottom: none;
	}

	.via-c3d-badge {
		flex-shrink: 0;
		margin-bottom: 0;
		font-size: .68rem;
		padding: 4px 10px;
		letter-spacing: 1px;
		writing-mode: vertical-rl;
		text-orientation: mixed;
		transform: rotate(180deg);
		height: auto;
	}

	/* Nội dung chữ: chiếm phần còn lại */
	.via-c3d-text-body {
		flex: 1;
		min-width: 0;
		overflow: hidden;
	}

	.via-c3d-item-title {
		font-size: 1.15rem;
		margin: 0 0 4px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.via-c3d-item-desc {
		font-size: .82rem;
		line-height: 1.45;
		margin: 0;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		       line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* Nút: bên phải */
	.via-c3d-actions {
		flex-shrink: 0;
	}

	.via-c3d-action-btn {
		padding: 10px 16px;
		font-size: .82rem;
		border-radius: 10px;
		white-space: nowrap;
	}
}