/* ============================================================
   TAMI - Sứ mệnh & Tầm nhìn (Elementor widget)
   Cùng hệ lưới/panel với .tami-why nhưng chỉ 2 row và không có
   tiêu đề section; tiêu đề trong panel là chữ lớn in hoa.
   Toàn bộ selector scope trong .tami-mission.
   ============================================================ */
.tami-mission {
	--tami-mission-red: #e2181f;
	--tami-mission-navy: #1b2a6b;
	padding: 40px 15px;
	max-width: 1230px;
	margin: 0 auto;
}

.tami-mission__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% ở cả 2 row */
	grid-template-columns: repeat(20, 1fr);
	/* 2 row cao bằng nhau, lấy theo row cao nhất */
	grid-auto-rows: 1fr;
}

.tami-mission__grid > .tami-mission__media { grid-column: span 7; }
.tami-mission__grid > .tami-mission__panel { grid-column: span 13; }

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

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

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

.tami-mission__panel--red { background: var(--tami-mission-red); }
.tami-mission__panel--navy { background: var(--tami-mission-navy); }

.tami-mission__title {
	font-size: 24px !important;
	font-weight: 800;
	line-height: 1.5 !important;
	text-transform: uppercase;
	margin: 0 0 14px !important;
	color: #fff;
}

.tami-mission__text {
	color: #fff !important;
	font-size: 18px !important;
	line-height: 1.5 !important;
	font-weight: 400;
	margin: 0 !important;
}

@media (max-width: 1199px) {
	.tami-mission__title { font-size: 36px !important; }
}

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

	.tami-mission__grid > .tami-mission__media,
	.tami-mission__grid > .tami-mission__panel { grid-column: auto; }

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

@media (max-width: 767px) {
	.tami-mission__title{
		font-size: 18px !important;
	}
	.tami-mission { padding: 20px 0px; }

	/* Mobile: mọi row đều ảnh trước — panel sau. Row 2 trong DOM là
	   panel navy đứng trước ảnh nên phải đánh order tường minh cho cả 4 ô
	   (đánh đủ để vẫn đúng khi tắt bớt 1 row). */
	.tami-mission__media { order: 1; }
	.tami-mission__panel--red { order: 2; }
	.tami-mission__media--row2 { order: 3; }
	.tami-mission__panel--navy { order: 4; }

	.tami-mission__panel { padding: 28px 22px; }
	.tami-mission__text { font-size: 14px !important; }
}