/**
* K-Tech / Zentrixa - Responsive overrides
* Theme con k-tech (parent: Flatsome)
*
* style.css gốc thiết kế cho desktop, không có @media nào.
* File này bổ sung lớp responsive cho các section tùy biến.
*
* Breakpoints (theo chuẩn Flatsome + slick trong index.js):
*   - <= 1024px : tablet ngang / màn nhỏ
*   - <= 767px  : mobile (xếp dọc, ẩn trang trí)
*   - <= 480px  : điện thoại nhỏ (tinh chỉnh font)
*/

/* ===================================================================
* <= 1024px  — TABLET
* =================================================================== */
@media (max-width: 1024px) {
	.sec-tabs .tab-panels{
		padding:0px !important;
	}
	.careers-team .slider .row{
		max-width:50% !important
	}
	/* Tiêu đề lớn dùng clamp để co theo màn hình */
	.title-index h1,
	.title-index h2 {
		font-size: clamp(34px, 6vw, 64px);
	}
	.title-index p {
		font-size: 18px !important;
	}

	/* sec-tech: grid 3 cột -> 2 cột, tắt hiệu ứng mở rộng theo % */
	.sec-tech .list-item-tech,
	.sec-tech .list-item-tech:has(> div:nth-child(1).hover),
	.sec-tech .list-item-tech:has(> div:nth-child(2).hover),
	.sec-tech .list-item-tech:has(> div:nth-child(3).hover) {
		grid-template-columns: 1fr 1fr;
	}
	.sec-tech .list-item-tech .img {
		height: 380px;
	}

	/* Footer / careers chữ khổng lồ */
	.title-ft h2 {
		font-size: clamp(72px, 21vw, 200px);
	}
	.careers-why h3 {
		font-size: clamp(96px, 20vw, 240px);
	}

	/* Floating items trang sản phẩm dùng vh -> dễ tràn, kéo gần lại */
	.product-banner .sp1, .product-banner .sp5 { left: 2vh; }
	.product-banner .sp2, .product-banner .sp6 { left: 8vh; }
	.product-banner .sp3, .product-banner .sp7 { right: 2vh; }
	.product-banner .sp4, .product-banner .sp8 { right: 8vh; }
}

/* ===================================================================
* <= 767px  — MOBILE
* =================================================================== */
@media (max-width: 767px) {

	/* ---- Tiêu đề & text chung ---- */
	.title-index h1,
	.title-index h2 {
		font-size: clamp(28px, 8vw, 40px) !important;
		margin-bottom: 14px;
		line-height:1.4 !important
	}
	.title-index p {
		font-size: 16px;
	}
	.number strong {
		font-size: 40px;
	}
	.number p {
		font-size: 15px;
	}

	/* ---- sec-banner ---- */
	.sec-banner {
		padding-top: 90px !important;
	}
	/* Shape trang trí tuyệt đối -> ẩn để không đè chữ */
	.sec-banner .img-abs,
	.shape_1,
	.shape_2 {
		display: none !important;
	}

	/* ---- sec-tech: xếp 1 cột, tắt hover-expand, hiện ảnh tĩnh ---- */
	.sec-tech {
		padding-top: 48px !important;
	}
	.sec-tech .list-item-tech,
	.sec-tech .list-item-tech:has(> div:nth-child(1).hover),
	.sec-tech .list-item-tech:has(> div:nth-child(2).hover),
	.sec-tech .list-item-tech:has(> div:nth-child(3).hover) {
		display: block !important;
		grid-template-columns: 1fr;
		overflow: visible;
	}
	.sec-tech .list-item-tech .col {
		margin-bottom: 16px;
	}
	.sec-tech .list-item-tech .img {
		height: auto;
		min-height: 280px;
		padding: 30px 0;
	}
	/* Khi click (.hover) vẫn giữ ảnh hiển thị bình thường */
	.sec-tech .list-item-tech .col.hover .img {
		opacity: 1;
		position: relative;
		pointer-events: auto;
	}
	.sec-tech .list-item-tech .img img,
	.sec-tech .list-item-tech .col.hover .img img {
		width: 45%;
	}
	/* 	 Banner overlay (nội dung hover) -> ẩn trên mobile, dùng ảnh là đủ 
	.sec-tech .banner,
	.sec-tech .list-item-tech .col.hover .banner {
	display: none !important;
} */

	/* ---- box slider (slick) ---- */
	.zx-slide-icon img,
	.zx-slide-item.slick-center .zx-slide-icon img {
		max-width: 160px;
	}
	.zx-slide-gg img {
		width: 140px;
	}
	.zx-slide-gg::before {
		display: none;
	}

	/* ---- sec-tabs ---- */
	.sec-tabs .pd-0{
		padding-bottom:30px !important
	}
	.sec-tabs .nav {
		padding: 16px;
		padding-top: 16px;
		gap: 12px;
		margin-bottom: 30px;
	}
	.sec-tabs .nav li a {
		padding: 18px 16px;
		font-size: 18px;
	}
	.sec-tabs .tabbed-content > h4 {
		font-size: 20px;
	}
	.sec-tabs .tab-panels {
		padding-left: 0;
	}
	ul.nav-vertical .tab a::before {

	}
	.sec-tabs .tab-panels li {
		font-size: 15px;
		margin-bottom: 20px;
		gap: 10px;
	}
	.sec-tabs .tab-panels li:before {
		width: 36px;
		height: 36px;
	}

	/* ---- falling-tags: tắt Matter.js (xem index.js), hiển thị tag tĩnh ---- */
	/* 	.falling-tags .col-inner {
	min-height: auto !important;
	padding: 32px 16px !important;
	text-align: center;
} */
	/* 	.falling-tags .col-inner .tag {
	position: static !important;
	display: inline-flex;
	margin: 5px;
} */
	.img-gg {
		margin-top: 32px;
		width: 140px !important;
	}

	/* ---- sec-leader ---- */
	.sec-leader .box-text p {
		font-size: 18px;
	}
	.sec-leader .box-text h4 {
		font-size: 20px;
	}

	/* ---- sec-blogs ---- */
	.sec-blogs .list1 > .col > .col-inner {
		padding: 20px;
	}
	.sec-blogs .post-title a {
		font-size: 18px;
	}
	.sec-blogs .box-hero .box-text {
		padding: 18px 20px;
	}
	.sec-blogs .box-list .box-text{
		padding:10px !important
	}
	/* ---- footer ---- */
	.sec-ft {
		padding-top: 60px !important;
	}
	.sec-ft h4 {
		font-size: 20px;
	}
	.title-ft h2 {
		font-size: clamp(48px, 21vw, 90px);
	}

	/* ---- PRODUCTS ---- */
	.product-banner {
		padding-top: 110px !important;
	}
	.product-banner .title-index h1{
		line-height:56px;
	}
	.product-banner .title-index h1 strong {
		width: 150px;
		height: 52px;
	}
	/* Item sản phẩm bay trang trí -> ẩn hết trên mobile */
	.product-banner .item-sp {
		width: 44px !important;
		z-index: -1;
		opacity: 0.5;
	}
	/* Blur frame khổng lồ -> thu nhỏ để đỡ tràn & nhẹ máy */
	.product-banner .frame1 {
		width: 300px;
		height: 200px;
		filter: blur(120px);
		right: -120px;
	}
	.product-banner p{
		line-height:1.4
	}
	.list-product .col-inner {
		border-radius: 28px !important;
		padding: 20px;
	}
	.list-product h3 {
		font-size: 26px;
	}
	.list-product p {
		font-size: 15px;
	}
	.list-studio-product h3 {
		font-size: 21px;
	}
	.list-studio-product p {
		font-size: 16px;
	}

	/* ---- ABOUT ---- */
	.about-banner.is-full-height{
		height:70vh !important;
		min-height:70vh !important
	}
	.about-banner.is-full-height .section-bg img {
		object-position: 40% 100% !important;
	}
	.about1 .frame1,
	.about1 .frame2,
	.about-mission .frame1 {
		width: 320px;
		height: 320px;
		filter: blur(160px);
	}
	.about1 .title-index h2{
		line-height:56px
	}
	.about1 .title-index h2 strong {
		width: 150px;
		height: 52px;
	}
	.about1 .title-index p {
		font-size: 16px;
	}
	.about-mission .title-index h2,
	.about-value .title-index h2 {
		font-size: 26px;
	}
	.about-team .title-index h2 {
		font-size: clamp(34px, 9vw, 60px);
	}
	.item-about {
		padding: 24px 20px;
	}

	/* ---- CAREERS ---- */
	.careers-team .slider .row {
		max-width: 100% !important;
	}
	.careers-team .slider h3,
	.careers-team .slider h4 {
		font-size: 28px;
	}
	.careers-team .slider p {
		min-height: auto;
	}
	.careers-why .banner {
		border-radius: 32px;
	}
	.careers-why h3 {
		font-size: clamp(64px, 22vw, 110px);
	}
	.careers-why h4 {
		font-size: 28px;
		margin-top: -20px;
	}
	.careers-why .large-6 p {
		font-size: 22px;
	}
	.careers-open {
		padding-top: 72px !important;
		padding-bottom: 56px !important;
	}
	.careers-open .title-index p {
		font-size: 16px;
	}
	.careers-open .large-4 .col-inner {
		padding: 24px;
		border-radius: 28px;
	}
	.careers-open .large-4 h5 {
		font-size: 20px;
	}
	.careers-open .large-4 h3 {
		font-size: 28px;
	}
	.careers-open .large-4 p em {
		font-size: 18px;
	}
	/* Form: cột 50% -> full width */
	.careers-join .col.half {
		max-width: 100% !important;
		flex-basis:100%;
	}
	.careers-join label {
		font-size: 16px;
	}
	.careers-join .wpcf7-form-control-wrap input {
		height: 60px;
		padding: 20px;
	}
	.careers-join .wpcf7-submit{
		height:62px;
		font-size:18px
	}
	/* ---- CONTACT ---- */
	.banner-contact video.video-bg.fill.visible{
		object-position: 100% 100%;
	}
	.form-row {
		flex-wrap: wrap;
	}
	.contact .col.half {
		max-width: 100% !important;
		flex-basis:100%
	}
	.contact label {
		font-size: 16px;
	}
	.contact .wpcf7-form-control-wrap input {
		height: 60px;
		padding: 20px;
	}
	.contact textarea {
		min-height: 180px;
		padding: 20px;
	}
	.contact .wpcf7-submit{
		height:62px;
		font-size:18px;
	}
	/* ---- sec-join (form đăng ký) ---- */
	.sec-join .wpcf7 {
		width: 100%;
		max-width: 100%;
	}

	/* ---- HEADER stuck ---- */
	.header-wrapper.stuck .header-inner {
		padding: 0 15px;
		height: 70px !important;
		margin-top: 10px;
	}

	/* ---- SINGLE POST ---- */
	.single-post .post-title {
		font-size: clamp(28px, 8vw, 44px);
	}
	.more-on-news {
		padding: 48px 0;
	}
	.more-on-news h2 {
		font-size: 28px;
		margin-bottom: 24px;
	}
	.more-on-news h3 {
		font-size: 20px;
	}
}

/* ===================================================================
* <= 480px  — ĐIỆN THOẠI NHỎ
* =================================================================== */
@media (max-width: 480px) {

	.title-index h1,
	.title-index h2 {
		font-size: clamp(24px, 8.5vw, 32px);
	}
	.number strong {
		font-size: 34px;
	}
	.sec-tech .list-item-tech .img {
		min-height: 220px;
	}
	.list-product h3 {
		font-size: 22px;
	}
	.careers-why h4 {
		font-size: 24px;
	}
	.careers-open .large-4 h3 {
		font-size: 24px;
	}
}