/* ============================================================
   TAMI - Tại sao chọn TAMI (Elementor widget)
   Port từ section .why trong bản prototype tĩnh app/public/html/index.html.
   Toàn bộ selector scope trong .tami-why để không đụng CSS theme.
   ============================================================ */
.tami-why {
	--tami-why-red: #e2181f;
	--tami-why-navy: #1b2a6b;
	--tami-why-ink: #14204a;
	padding: 40px 15px;
}

.tami-why__heading {
	font-size: 30px;
	font-weight: 800;
	line-height: 1.5;
	text-align: center;
	text-transform: uppercase;
	color: var(--tami-why-ink);
	margin: 0 0 30px !important;
}

.tami-why__grid {
	display: grid;
	/* 20 cột: ảnh và panel đảo bên qua từng row, nên phải chia bằng span
	   thay vì 2 cột cố định thì mới giữ được ảnh 35% / panel 65% ở mọi row */
	grid-template-columns: repeat(20, 1fr);
	/* mọi row cao bằng nhau, lấy theo row cao nhất */
	grid-auto-rows: 1fr;
	margin-top: 10px;
}

.tami-why__grid>.tami-why__media {
	grid-column: span 7;
}

.tami-why__grid>.tami-why__panel {
	grid-column: span 13;
}

.tami-why__media {
	position: relative;
	min-height: 312px;
	overflow: hidden;
}

.tami-why__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	inset: 0;
	display: block;
}

.tami-why__panel {
	padding: 38px 40px;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.tami-why__panel--red {
	background: var(--tami-why-red);
}

.tami-why__panel--navy {
	background: var(--tami-why-navy);
}

/* Panel chia đôi: nội dung bên trái, sơ đồ bên phải */
.tami-why__panel--split {
	flex-direction: row;
	align-items: center;
	gap: 28px;
}

.tami-why__panel-body {
	flex: 1 1 auto;
	min-width: 0;
}

.tami-why__panel--split .tami-why__text {
	opacity: 1;
}

.tami-why__title {
	font-size: 24px !important;
	font-weight: 800;
	line-height: 1.3 !important;
	margin: 0 0 12px;
	color: #fff;
}

.tami-why__text {
	color: #fff !important;
	font-size: 18px !important;
	line-height: 1.5 !important;
	opacity: .95;
	margin: 0 !important;
}

/* Logo hãng — luôn nằm trên 1 hàng, các ô co lại thay vì xuống dòng */
.tami-why__brands {
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
	margin: 22px auto 0 0;
	padding: 0;
	list-style: none;
	padding-left: 0 !important;
}

.tami-why__brand {
	/* flex-basis 0 + min-width 0: chia đều chiều ngang và cho phép co nhỏ hơn
	   kích thước ảnh bên trong, nếu không Firefox/Safari sẽ đẩy tràn hàng */
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 12px;
	padding: 12px 14px;
	min-height: 62px;
	margin: 0;
	list-style: none;
}

.tami-why__brand img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 38px;
}

/* Sơ đồ hệ sinh thái */
.tami-why__ecosystem {
	width: 100%;
	max-width: 340px;
	margin: 26px auto 0;
}

.tami-why__panel--split .tami-why__ecosystem {
	flex: 0 0 auto;
	width: 240px;
	max-width: 42%;
	margin: 0;
}

.tami-why__ecosystem img {
	display: block;
	width: 100%;
	height: auto;
}

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

	.tami-why__grid>.tami-why__media,
	.tami-why__grid>.tami-why__panel {
		grid-column: auto;
	}

	.tami-why__media {
		min-height: 230px;
		height: 230px;
	}
}

@media (max-width: 767px) {
	.tami-why__grid>*:nth-child(1) {
		order: 1;
	}

	.tami-why__grid>*:nth-child(2) {
		order: 2;
	}

	.tami-why__grid>*:nth-child(3) {
		order: 4;
	}

	/* đổi chỗ với item 4 */
	.tami-why__grid>*:nth-child(4) {
		order: 3;
	}

	/* đổi chỗ với item 3 */
	.tami-why__grid>*:nth-child(5) {
		order: 5;
	}

	.tami-why__grid>*:nth-child(6) {
		order: 6;
	}

	.tami-why__grid>*:nth-child(7) {
		order: 8;
	}

	.tami-why__grid>*:nth-child(8) {
		order: 7;
	}

	.tami-why {
		padding: 20px 15px;
	}

	.tami-why__heading {
		font-size: 22px !important;
	}

	.tami-why__panel {
		padding: 28px 22px;
	}

	.tami-why__title {
		font-size: 18px !important;
	}

	.tami-why__text {
		font-size: 14px !important;
	}

	.tami-why__panel--split {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.tami-why__panel--split .tami-why__ecosystem {
		width: 100%;
		max-width: 300px;
		margin: 24px auto 0;
	}

	.tami-why__title {
		font-size: 19px;
	}

	/* Vẫn giữ 4 logo trên 1 hàng nên phải bóp gap/padding lại */
	.tami-why__brands {
		gap: 8px;
	}

	.tami-why__brand {
		padding: 8px 6px;
		border-radius: 8px;
		min-height: 48px;
	}

	.tami-why__brand img {
		max-height: 26px;
	}
}