/*
 * Task GD-05 (sheet "Giao diện" dòng 10–12) — 2 khối mới ở trang chủ: "Chứng
 * chỉ & chất lượng" và "Hình ảnh thực tế" (xưởng/kho). Băng chuyền ảnh 3D
 * kiểu coverflow, theo mẫu thephinhnhapkhau.com.vn. Mockup đã duyệt:
 * docs/mockup/gd-05/.
 */
.thp-showcase {
	background: #0f1830;
	padding: 56px 0;
}
/* Phản hồi lần 1 (29/09/2026): khối "Hình ảnh thực tế tại tổng kho" đổi sang
   nền trắng (khối "Chứng chỉ & chất lượng" giữ nguyên nền navy đậm). */
.thp-showcase--light {
	background: #fff;
}
.thp-showcase--light .thp-showcase__title {
	color: #233179;
}
.thp-showcase--light .thp-showcase__slide {
	background: #f3f3f3;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}
.thp-showcase--light .thp-showcase__nav {
	border-color: #ddd;
	color: #233179;
}
.thp-showcase--light .thp-showcase__nav:hover,
.thp-showcase--light .thp-showcase__nav:focus {
	background: #233179;
	color: #fff;
}
.thp-showcase__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 16px;
	text-align: center;
}
.thp-showcase__badge {
	display: inline-block;
	background: rgba(225, 143, 0, .15);
	color: #e18f00;
	border: 1px solid rgba(225, 143, 0, .4);
	border-radius: 14px;
	padding: 4px 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.thp-showcase__title {
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0 0 44px;
}
.thp-showcase__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	overflow: hidden;
}
.thp-showcase__track {
	position: relative;
	height: 340px;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 960px;
	perspective: 1200px;
}
.thp-showcase__slide {
	position: absolute;
	left: 50%;
	top: 0;
	width: 540px;
	height: 340px;
	margin-left: -270px;
	transition: transform .45s ease, opacity .45s ease;
	opacity: 0;
	z-index: 1;
	pointer-events: none;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
	background: #1a2560;
}
.thp-showcase__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.thp-showcase__slide.is-active {
	transform: translateX(0) rotateY(0) scale(1);
	opacity: 1;
	z-index: 3;
	pointer-events: auto;
	cursor: zoom-in;
}
.thp-showcase__slide.is-prev,
.thp-showcase__slide.is-next {
	pointer-events: auto;
	cursor: pointer;
}
.thp-showcase__slide.is-prev {
	transform: translateX(-300px) rotateY(32deg) scale(.82);
	opacity: .55;
	z-index: 2;
}
.thp-showcase__slide.is-next {
	transform: translateX(300px) rotateY(-32deg) scale(.82);
	opacity: .55;
	z-index: 2;
}
.thp-showcase__nav {
	position: relative;
	z-index: 10;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .3);
	background: transparent;
	color: #fff;
	cursor: pointer;
	font-size: 15px;
}
.thp-showcase__nav:hover,
.thp-showcase__nav:focus {
	background: #fff;
	color: #0f1830;
}

@media (max-width: 767px) {
	.thp-showcase__slide {
		width: 300px;
		height: 210px;
		margin-left: -150px;
	}
	.thp-showcase__track {
		height: 210px;
	}
	.thp-showcase__slide.is-prev {
		transform: translateX(-140px) rotateY(32deg) scale(.75);
	}
	.thp-showcase__slide.is-next {
		transform: translateX(140px) rotateY(-32deg) scale(.75);
	}
}

/* Khung phóng to (bấm ảnh đang ở giữa) — dùng chung cho cả 2 khối. */
.thp-showcase-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .85);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: 40px 16px;
}
.thp-showcase-lightbox.is-open {
	display: flex;
}
.thp-showcase-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
	border-radius: 4px;
}
.thp-showcase-lightbox__close {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, .15);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}
.thp-showcase-lightbox__close:hover,
.thp-showcase-lightbox__close:focus {
	background: rgba(255, 255, 255, .3);
}

/*
 * Phản hồi lần 3 (04/10/2026, ô I10, I12 "CHO TO ẢNH NHƯ MẪU"): đo mẫu thephinhnhapkhau.com.vn ở
 * 1440px: ảnh giữa ~1000×570 (≈ 70% bề ngang), 2 ảnh bên xoay 3D lòi ra tới mép màn hình. Trước: 540×340.
 * Chỉ còn tên section (nhãn phụ đã bỏ ở front-page.php).
 */
.thp-showcase { padding: 60px 0 70px; }
.thp-showcase__inner { max-width: none; padding: 0; }
.thp-showcase__inner > .thp-hh { padding-left: 16px !important; padding-right: 16px !important; }
.thp-showcase__stage { gap: 0; }
.thp-showcase__track { max-width: none; height: 570px; perspective: 1600px; }
.thp-showcase__slide { width: 1000px; height: 570px; margin-left: -500px; border-radius: 10px; }
.thp-showcase__slide.is-prev { transform: translateX(-640px) rotateY(38deg) scale(.86); opacity: .6; }
.thp-showcase__slide.is-next { transform: translateX(640px) rotateY(-38deg) scale(.86); opacity: .6; }
.thp-showcase__nav { position: absolute; top: 50%; margin-top: -20px; width: 44px; height: 44px; font-size: 18px; background: rgba(0, 0, 0, .25); }
.thp-showcase__nav--prev { left: calc(50% - 540px); }
.thp-showcase__nav--next { right: calc(50% - 540px); }
/* Chứng chỉ thường là ảnh giấy dọc: hiện TRỌN tờ chứng chỉ (không cắt), nền khung tối */
#thp-certificates .thp-showcase__slide img { object-fit: contain; }
@media (max-width: 1199px) {
	.thp-showcase__track { height: 480px; }
	.thp-showcase__slide { width: 820px; height: 480px; margin-left: -410px; }
	.thp-showcase__slide.is-prev { transform: translateX(-520px) rotateY(38deg) scale(.86); }
	.thp-showcase__slide.is-next { transform: translateX(520px) rotateY(-38deg) scale(.86); }
	.thp-showcase__nav--prev { left: calc(50% - 450px); }
	.thp-showcase__nav--next { right: calc(50% - 450px); }
}
@media (max-width: 991px) {
	.thp-showcase__track { height: 380px; }
	.thp-showcase__slide { width: 640px; height: 380px; margin-left: -320px; }
	.thp-showcase__slide.is-prev { transform: translateX(-400px) rotateY(38deg) scale(.86); }
	.thp-showcase__slide.is-next { transform: translateX(400px) rotateY(-38deg) scale(.86); }
	.thp-showcase__nav--prev { left: 12px; }
	.thp-showcase__nav--next { right: 12px; }
}
@media (max-width: 767px) {
	.thp-showcase__track { height: 250px; }
	.thp-showcase__slide { width: 88vw; height: 250px; margin-left: -44vw; }
	.thp-showcase__slide.is-prev { transform: translateX(-62vw) rotateY(38deg) scale(.8); }
	.thp-showcase__slide.is-next { transform: translateX(62vw) rotateY(-38deg) scale(.8); }
}
.thp-showcase__slide { display: flex; align-items: center; justify-content: center; }
.thp-showcase .thp-showcase__slide img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; }
#thp-warehouse .thp-showcase__slide img { object-fit: cover !important; }
#thp-certificates .thp-showcase__slide img { object-fit: contain !important; }
/* CSS bổ sung (Tuỳ biến giao diện, lưu trong DB) có rule "img.attachment-large.size-large.wp-post-image{height:250px!important}"
   dành cho ảnh khối Báo chí nhưng ép cả ảnh Chứng chỉ/Kho cao 250px → ghi đè riêng 2 khối này (id thắng class). */
#thp-certificates .thp-showcase__slide img.wp-post-image,
#thp-warehouse .thp-showcase__slide img.wp-post-image { height: 100% !important; width: 100% !important; }