/* ============================================================
   TAMI - Footer CTA (Elementor widget)
   Port từ section .footer-cta trong bản prototype tĩnh app/public/html/index.html.
   Toàn bộ selector scope trong .tami-footer-cta để không đụng CSS theme.

   Bố cục: panel đỏ full-bleed bo góc dưới - phải, bên trái tiêu đề + nút viền
   trắng (canh phải), bên phải ảnh phủ kín, logo nằm ở góc dưới - trái.
   ============================================================ */
.tami-footer-cta {
	--tami-fcta-red: #e2181f;
	--tami-fcta-soft: #f2f5fb;
	/* Bề rộng khối nội dung — cũng dùng để tính bán kính góc bo và vị trí logo
	   nên phải là biến, không hard-code ở nhiều nơi. */
	--tami-fcta-container: 1480px;

	/* Logo: lề trái = lề của khối nội dung, lề dưới cố định.
	   --tami-fcta-logo-w do control "Bề rộng logo" ghi vào. */
	--tami-fcta-logo-x: max(20px, calc((100% - var(--tami-fcta-container)) / 2 + 20px));
	--tami-fcta-logo-y: 34px;
	--tami-fcta-logo-w: 170px;
	--tami-fcta-logo-w-eff: min(var(--tami-fcta-logo-w), 60vw);
	--tami-fcta-logo-max-h: 90px;

	/* Khoảng đệm của blob quanh hộp logo. pad-x phải đủ lớn (>= ~45px) để đường
	   cong góc trên - phải không cắt vào góc trên - phải của logo. */
	--tami-fcta-blob-pad-x: 64px;
	--tami-fcta-blob-pad-y: 34px;
	/* Blob luôn bắt đầu từ mép trái (left: 0) nên bề rộng = khoảng cách tới logo
	   + bề rộng logo + đệm ⇒ mép phải blob luôn cách logo đúng pad-x. */
	--tami-fcta-blob-w: calc(var(--tami-fcta-logo-x) + var(--tami-fcta-logo-w-eff) + var(--tami-fcta-blob-pad-x));

	position: relative;
	background: var(--tami-fcta-soft);
	color: #fff;
	overflow: hidden;
}

/* Panel đỏ full-bleed, bo góc dưới - phải theo lề của khối nội dung */
.tami-footer-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--tami-fcta-red);
	border-bottom-right-radius: clamp(0px, calc((100vw - var(--tami-fcta-container)) / 2 + 20px), 380px);
}

/* Khối đỏ đậm bo tròn ở góc dưới - trái. Luôn dính mép trái + đáy, phần bo tròn
   nằm ở góc trên - phải. Chỉ trang trí nên không nhận sự kiện chuột. */
.tami-footer-cta__blob {
	position: absolute;
	background: rgba(0, 0, 0, .1);
	border-radius: 0 999px 0 0;
	pointer-events: none;
}

/* Blob nằm trong khối logo: cao = hộp logo + đệm trên + lề dưới của logo, nên
   khoảng hở quanh logo luôn đúng dù ảnh logo cao thấp bao nhiêu. z-index âm để
   nằm dưới ảnh logo nhưng vẫn trong stacking context của khối logo. */
.tami-footer-cta__logo > .tami-footer-cta__blob {
	left: 0;
	top: calc(-1 * var(--tami-fcta-blob-pad-y));
	bottom: 0;
	width: var(--tami-fcta-blob-w);
	z-index: -1;
}

/* Không chọn logo: blob vẫn là khối trang trí ở góc dưới - trái, cùng kích thước
   như trường hợp có logo (60px là chiều cao logo giả định). */
.tami-footer-cta > .tami-footer-cta__blob {
	left: 0;
	bottom: 0;
	width: var(--tami-fcta-blob-w);
	height: calc(var(--tami-fcta-logo-y) + var(--tami-fcta-blob-pad-y) + 60px);
	z-index: 1;
}

.tami-footer-cta__inner {
	position: relative;
	z-index: 2;
	max-width: 1230px;
	margin: 0 auto;
	padding: 0 15px;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	align-items: center;
	gap: 56px;
	min-height: 460px;
}

/* Không chọn ảnh bên phải thì nội dung chiếm cả hàng */
.tami-footer-cta--no-figure .tami-footer-cta__inner {
	grid-template-columns: 1fr;
	gap: 0;
}

.tami-footer-cta__content {
	padding: 70px 0;
	text-align: right;
}

.tami-footer-cta__title {
	font-size: 30px !important;
	font-weight: 800;
	line-height: 1.5 !important;
	text-transform: uppercase;
	color: #fff !important;
	margin: 0 0 34px !important;
}

/* Nút viền trắng bo tròn (.btn--ghost.btn--pill của prototype) */
.tami-footer-cta__btn {
	display: inline-block;
	background: transparent;
	color: #fff !important;
	border: 2px solid #fff;
	border-radius: 999px;
	padding: 14px 34px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none !important;
	letter-spacing: .4px;
	white-space: nowrap;
	transition: .25s ease;
}

.tami-footer-cta__btn:hover,
.tami-footer-cta__btn:focus {
	background: #fff;
	color: var(--tami-fcta-red) !important;
}

/* Ảnh phủ kín nửa phải, cao bằng cả section */
.tami-footer-cta__figure {
	align-self: stretch;
	position: relative;
}

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

/* Khối logo trải hết bề ngang section (left/right: 0) để blob bên trong tính
   được khoảng cách từ mép trái màn hình tới logo bằng %; logo được đẩy vào bằng
   padding thay vì left. pointer-events: none để dải này không chắn nút CTA. */
.tami-footer-cta__logo {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	padding-left: var(--tami-fcta-logo-x);
	padding-bottom: var(--tami-fcta-logo-y);
	line-height: 0;
	pointer-events: none;
}

.tami-footer-cta__logo-link,
.tami-footer-cta__logo-img {
	pointer-events: auto;
}

/* max-height chặn logo vuông/dọc làm blob cao bất thường; object-fit: contain
   giữ đúng tỉ lệ ảnh trong hộp bị chặn. */
.tami-footer-cta__logo-img {
	display: block;
	width: var(--tami-fcta-logo-w-eff);
	max-height: var(--tami-fcta-logo-max-h);
	height: auto;
	object-fit: contain;
	object-position: left center;
}

@media (max-width: 1199px) {
	.tami-footer-cta__inner {
		grid-template-columns: 1fr;
		min-height: 0;
		gap: 0;
	}

	/* Chừa chỗ cho blob + logo ở dưới, không để blob phủ lên nút.
	   Chiều cao blob tối đa = pad-y + logo-max-h + logo-y = 34 + 90 + 30 = 154px. */
	.tami-footer-cta__content {
		padding: 50px 0 160px;
		text-align: center;
	}

	.tami-footer-cta__figure {
		display: none;
	}

	/* Logo vẫn ghim bên trái (lúc này --tami-fcta-logo-x tự bằng 20px) để blob
	   luôn dính mép trái và bọc đúng logo — cùng một công thức với desktop. */
	.tami-footer-cta__logo {
		padding-bottom: 30px;
	}
}

@media (max-width: 767px) {
	.tami-footer-cta__title {
		font-size: 24px !important;
		margin: 0 0 24px !important;
	}

	.tami-footer-cta__btn {
		white-space: normal;
	}
}