/* ============================================================
   TAMI - Hệ sinh thái (Elementor widget)
   Bố cục 2 cột: cột chữ (tiêu đề đỏ in hoa + mô tả, kèm hoạ tiết
   tròn trang trí) | 1 ảnh sơ đồ hệ sinh thái ở cột phải.
   Toàn bộ selector scope trong .tami-eco để không đụng CSS theme.
   ============================================================ */
.tami-eco {
	--tami-eco-red: #c1231a;
	--tami-eco-navy: #1b2a6b;
	--tami-eco-ink: #14204a;
	--tami-eco-blob: rgba(226, 130, 118, 0.28);
	--tami-eco-blob-blue: rgba(206, 224, 245, 0.75);
	--tami-eco-blob-size: 320px;

	--tami-eco-text-w: 42%;
	--tami-eco-gap: 40px;
	/* Bề ngang tối đa của ảnh sơ đồ. */
	--tami-eco-img-w: 640px;

	padding: 40px 0;
	/* Hoạ tiết trang trí không được tràn ngang ra ngoài trang. */
	overflow: hidden;
}

.tami-eco__inner {
	position: relative;
	max-width: 1230px;
	margin: 0 auto;
	padding: 0 15px;
	display: grid;
	grid-template-columns: var(--tami-eco-text-w) 1fr;
	align-items: center;
	gap: var(--tami-eco-gap);
}

/* Không có phần chữ thì ảnh chiếm trọn chiều ngang. */
.tami-eco__inner--no-text {
	grid-template-columns: 1fr;
}

/* Đảo bên: ảnh sang trái, chữ sang phải. */
.tami-eco__inner--reverse .tami-eco__text { order: 2; }
.tami-eco__inner--reverse .tami-eco__visual { order: 1; }

/* ---------- Cột chữ ---------- */
.tami-eco__text {
	position: relative;
	z-index: 1;
}

.tami-eco__heading {
	position: relative;
	z-index: 1;
	font-size: 30px !important;
	font-weight: 800;
	line-height: 1.35 !important;
	text-transform: uppercase;
	color: var(--tami-eco-red) !important;
	margin: 0 0 24px !important;
}

/* Cho phép đổi một cụm từ trong tiêu đề sang navy bằng <span class="text-navy"> */
.tami-eco__heading .text-navy {
	color: var(--tami-eco-navy) !important;
}

.tami-eco__desc {
	position: relative;
	z-index: 1;
	color: var(--tami-eco-ink);
}

.tami-eco__desc p {
	font-size: 18px !important;
	line-height: 1.7 !important;
	font-weight: 400;
	color: var(--tami-eco-ink) !important;
	margin: 0 0 18px !important;
}

.tami-eco__desc p:last-child { margin-bottom: 0 !important; }

/* ---------- Hoạ tiết trang trí (thuần trang trí, aria-hidden) ---------- */
.tami-eco__decor {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

/* Vòng tròn hồng viền dày, góc trên bên trái. */
.tami-eco__decor::before {
	content: "";
	position: absolute;
	left: -46px;
	top: 4%;
	width: 132px;
	height: 132px;
	border-radius: 50%;
	border: 18px solid var(--tami-eco-blob);
}

/* Mảng xanh nhạt góc dưới bên trái: hai khối tròn nằm ngang, nối nhau bằng
   eo lõm (metaball). Vẽ bằng mask SVG thay vì background để màu vẫn lấy từ
   biến --tami-eco-blob-blue (data URI không nhận var()). */
.tami-eco__decor::after {
	content: "";
	position: absolute;
	left: -200px;
	bottom: 0;
	width: var(--tami-eco-blob-size);
	/* 180/260 = tỉ lệ viewBox của mask, giữ hình không bị méo. */
	height: calc(var(--tami-eco-blob-size) * 0.692);
	background: var(--tami-eco-blob-blue);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20260%20180'%3E%3Cpath%20fill='%23000'%20d='M107.0%2045.3%20A62%2062%200%201%200%20107.0%20134.7%20A52%2052%200%200%201%20172.6%20129.4%20A48%2048%200%201%200%20172.6%2050.6%20A52%2052%200%200%201%20107.0%2045.3%20Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20260%20180'%3E%3Cpath%20fill='%23000'%20d='M107.0%2045.3%20A62%2062%200%201%200%20107.0%20134.7%20A52%2052%200%200%201%20172.6%20129.4%20A48%2048%200%201%200%20172.6%2050.6%20A52%2052%200%200%201%20107.0%2045.3%20Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Hai khối kẻ sọc chéo kiểu chevron, nằm giữa cột chữ và ảnh. */
.tami-eco__hatch {
	position: absolute;
	left: calc(var(--tami-eco-text-w) - 30px);
	top: 6%;
	width: 110px;
	height: 74px;
	display: flex;
	gap: 6px;
	pointer-events: none;
	z-index: 0;
}

.tami-eco__hatch span {
	flex: 1;
	background: repeating-linear-gradient(
		135deg,
		var(--tami-eco-blob-blue) 0 3px,
		transparent 3px 7px
	);
	clip-path: polygon(0 0, 60% 0, 100% 100%, 40% 100%);
}

.tami-eco__hatch span:last-child {
	transform: translateY(-14px);
}

/* ---------- Cột ảnh ---------- */
.tami-eco__visual {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
}

.tami-eco__visual img {
	width: 100%;
	max-width: var(--tami-eco-img-w);
	height: auto;
	display: block;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1199px) {
	.tami-eco {
		--tami-eco-gap: 30px;
	}
}

@media (max-width: 991px) {
	.tami-eco__inner {
		grid-template-columns: 1fr;
	}

	/* Xếp dọc thì luôn chữ trước - ảnh sau, kể cả khi bật đảo bên. */
	.tami-eco__inner--reverse .tami-eco__text,
	.tami-eco__inner--reverse .tami-eco__visual { order: 0; }

	.tami-eco__hatch { display: none; }
}

@media (max-width: 767px) {
	.tami-eco__inner{
		padding: 0;
	}
	.tami-eco {
		padding: 20px 0;
	}

	.tami-eco__heading {
		font-size: 22px !important;
		margin: 0 0 16px !important;
	}

	.tami-eco__desc p {
		font-size: 14px !important;
		margin: 0 0 12px !important;
	}

	.tami-eco__decor::before {
		display: none;
		width: 84px;
		height: 84px;
		border-width: 12px;
		left: -34px;
	}

	/* Xếp dọc thì khối metaball rơi xuống đáy section, đè lên ảnh sơ đồ
	   nên ẩn đi (cùng cách xử lý với khối kẻ sọc). */
	.tami-eco__decor::after {
		display: none;
	}
}