/* ============================================================
   TAMI - Điều gì tạo nên sự khác biệt (Elementor widget)
   Bố cục 2 cột: cột chữ (tiêu đề đỏ in hoa + mô tả căn đều)
   | lưới thẻ màu đặc (navy/đỏ xen kẽ kiểu bàn cờ), cột chẵn
   được đẩy xuống để tạo hiệu ứng so le.
   Toàn bộ selector scope trong .tami-diff để không đụng CSS theme.
   ============================================================ */
.tami-diff {
	--tami-diff-red: #c1231a;
	--tami-diff-navy: #1b2a6b;
	--tami-diff-ink: #14204a;
	/* Màu nền thẻ - đỏ tươi hơn màu tiêu đề, bám theo thiết kế. */
	--tami-diff-card-red: #e5231a;
	--tami-diff-card-navy: #1b2a6b;
	--tami-diff-blob: rgba(226, 130, 118, 0.22);

	--tami-diff-text-w: 38%;
	--tami-diff-gap: 50px;
	--tami-diff-cols: 2;
	--tami-diff-card-gap: 26px;
	/* Độ so le của các thẻ ở cột chẵn. */
	--tami-diff-offset: 60px;
	--tami-diff-card-pad: 40px;

	padding: 40px 0;
}

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

.tami-diff__inner--align-start {
	align-items: start;
}

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

/* ---------- Cột chữ ---------- */
.tami-diff__text {
	position: relative;
}

/* Vệt tròn hồng mờ sau tiêu đề, thuần trang trí. */
.tami-diff__text--blob::before {
	content: "";
	position: absolute;
	left: -18px;
	top: -26px;
	width: 118px;
	height: 118px;
	border-radius: 50%;
	background: var(--tami-diff-blob);
	z-index: 0;
}

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

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

.tami-diff__desc {
	position: relative;
	z-index: 1;
	text-align: justify;
}

.tami-diff__desc p {
	font-size: 18px !important;
	line-height: 1.6 !important;
	font-weight: 400;
	color: var(--tami-diff-ink) !important;
	margin: 0 0 20px !important;
}

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

.tami-diff__desc strong,
.tami-diff__desc b {
	font-weight: 800;
	color: var(--tami-diff-navy);
}

.tami-diff__desc a {
	color: var(--tami-diff-red);
	text-decoration: underline;
}

/* ---------- Lưới thẻ ---------- */
.tami-diff__cards {
	display: grid;
	grid-template-columns: repeat(var(--tami-diff-cols), minmax(0, 1fr));
	gap: var(--tami-diff-card-gap);
	list-style: none;
	margin: 0;
	/* chừa chỗ cho các thẻ bị đẩy xuống ở hàng cuối */
	padding: 0 0 var(--tami-diff-offset) !important;
}

/* So le bằng offset của position (không phải margin) để chiều cao các hàng lưới
   vẫn bằng nhau — dùng margin sẽ làm hàng dưới bị đẩy thêm một khoảng offset.
   Không dùng transform: AOS ghi transform: translateZ(0) lên chính phần tử
   [data-aos] nên sẽ đè mất translateY của mình. */
.tami-diff__card:nth-child(even) {
	top: var(--tami-diff-offset);
}

.tami-diff__card {
	position: relative;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--tami-diff-card-pad);
	margin: 0;
	list-style: none;
	background: var(--tami-diff-card-navy);
	color: #fff;
}

.tami-diff__card--red {
	background: var(--tami-diff-card-red);
}

.tami-diff__card--navy {
	background: var(--tami-diff-card-navy);
}

/* Tỉ lệ ô: mặc định vuông, đổi bằng control "Tỉ lệ thẻ". */
.tami-diff__card--1-1 { aspect-ratio: 1 / 1; }
.tami-diff__card--4-3 { aspect-ratio: 4 / 3; }
.tami-diff__card--3-4 { aspect-ratio: 3 / 4; }
.tami-diff__card--16-9 { aspect-ratio: 16 / 9; }

.tami-diff__card--auto {
	aspect-ratio: auto;
	min-height: 260px;
}

.tami-diff__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin-bottom: 22px;
	flex: 0 0 auto;
}

.tami-diff__icon svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: currentColor;
	color: #fff;
}

.tami-diff__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.tami-diff__title {
	font-size: 24px !important;
	font-weight: 800;
	line-height: 1.4 !important;
	color: #fff !important;
	margin: 0 0 10px !important;
}

.tami-diff__card-text {
	font-size: 18px !important;
	line-height: 1.6 !important;
	font-weight: 400;
	color: #fff !important;
	margin: 0 !important;
	max-width: 360px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.tami-diff {
		--tami-diff-gap: 30px;
		--tami-diff-card-gap: 18px;
		--tami-diff-offset: 30px;
		--tami-diff-card-pad: 26px;
	}

	.tami-diff__title { font-size: 20px !important; }
	.tami-diff__card-text { font-size: 16px !important; }
}

@media (max-width: 767px) {
	.tami-diff {
		/* Dự phòng khi control "Số cột" ở mobile chưa được set — Elementor sinh
		   selector nặng ký hơn nên vẫn ghi đè được nếu người dùng chọn khác. */
		--tami-diff-cols: 1;
		--tami-diff-offset: 0px;
		--tami-diff-card-gap: 16px;
		--tami-diff-card-pad: 24px;
		padding: 24px 0;
	}

	.tami-diff__inner {
		padding: 0;
		grid-template-columns: 1fr !important;
		gap: 26px;
	}

	.tami-diff__heading {
		font-size: 22px !important;
		margin: 0 0 18px !important;
	}

	.tami-diff__desc p { font-size: 15px !important; }

	/* Trên mobile bỏ tỉ lệ cố định: thẻ full-width theo tỉ lệ 1:1 sẽ quá cao và
	   thừa khoảng trắng, để cao theo nội dung hợp lý hơn. */
	.tami-diff__card {
		aspect-ratio: auto;
		min-height: 0;
	}

	.tami-diff__icon {
		width: 56px;
		height: 56px;
		margin-bottom: 16px;
	}

	.tami-diff__title { font-size: 18px !important; }
	.tami-diff__card-text { font-size: 14px !important; }
}