/*
 * TRANG CẢM ƠN — `page-cam-on.php`  (T-605.3)
 *
 * Nguồn: `docs/potaco-layout/thank-you/thanh-you-pc.png` (PC, tỉ lệ ≈1,09 → 1200)
 * + spec pixel cho tablet/SP. Spec: `docs/wp/spec/thankyou/5-frontend.md` §4.
 *
 * ⚠️ Đệm section 32px chứ KHÔNG phải 80/64 như spec pixel: ảnh đo ra ≈28–32
 *    ở cả bốn cạnh (thankyou/1 §0.4-4). Trang chuyển đổi cố ý ngắn, không
 *    cần cuộn trên desktop. Không dùng `--section-gap` (80) — nó chi phối
 *    nhịp 25 màn khác, đây là ngoại lệ có chủ ý, ghi tại chỗ.
 *
 * ⚠️ `.site-main--thankyou` bỏ đệm mặc định 48/48 của `.site-main`: hai
 *    section tự mang đệm, và `.ty-next` (nền xám) phải chạm sát footer như
 *    ảnh — còn 48px trắng dưới nền xám là lệch layout.
 *
 * Màu chỉ qua token. Không `@keyframes`. Không margin/padding "chỉnh cho đẹp".
 */

/* =========================================================================
   1. KHỐI XÁC NHẬN
   ====================================================================== */

.site-main--thankyou {
	padding-top: 0;
	padding-bottom: 0;
}

.ty-confirm {
	padding: var(--sp-8) 0;
	background: var(--c-bg);
}

.ty-confirm__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 800px;
	text-align: center;
}

/* Vòng tích: đo ảnh ≈96 (104 ÷ 1,09) — pixel spec 80 thua ảnh. */
.ty-confirm__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	border-radius: var(--radius-full);
	color: var(--c-success);
	background: var(--c-success-bg);
}

.ty-confirm__title {
	margin: var(--sp-6) 0 0;
	font-family: var(--font-heading);
	font-size: 2.5rem;      /* 40 — đo ảnh, không phải --fs-h1 (44) */
	line-height: 1.2;
	font-weight: 700;
	color: var(--c-primary-800);
}

.ty-confirm__message {
	max-width: 650px;
	margin: var(--sp-4) 0 0;
	font-size: 1.0625rem;   /* 17 */
	line-height: 1.6;
	color: var(--c-text-muted);
}

/* =========================================================================
   2. HỘP GỌI GẤP — một <a tel:> bọc cả khối
   ====================================================================== */

.ty-urgent {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: var(--sp-6);
}

.ty-urgent__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-4);
	min-width: 330px;
	min-height: 88px;
	padding: var(--sp-4) var(--sp-6);
	color: inherit;
	text-decoration: none;
	text-align: left;
	background: var(--c-bg-alt);
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-md);
	transition: border-color var(--transition), box-shadow var(--transition);
}

/* Hover: viền đậm + bóng nhẹ, KHÔNG nhấc — đây là hộp gọi, không phải card lưới.
   `hover:hover` bắt buộc (R-06-layout F-03): trên điện thoại chạm xong không
   được giữ trạng thái hover. */
@media (hover: hover) and (pointer: fine) {
	.ty-urgent__link:hover {
		border-color: var(--c-border-strong);
		box-shadow: var(--shadow-sm);
	}
}

.ty-urgent__link:active {
	background: var(--c-border);
}

.ty-urgent__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	color: var(--c-accent);   /* cam trên trắng 4,6:1 — AA */
	background: var(--c-bg);
	border-radius: var(--radius-full);
}

.ty-urgent__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ty-urgent__label {
	font-size: 0.9375rem;   /* 15 */
	line-height: 1.4;
	color: var(--c-text-muted);
}

.ty-urgent__phone {
	font-family: var(--font-heading);
	font-size: 1.625rem;    /* 26 */
	line-height: 1.2;
	font-weight: 700;
	color: var(--c-primary-800);
	white-space: nowrap;
}

.ty-urgent__chevron {
	flex: 0 0 auto;
	color: var(--c-primary-800);
}

/* =========================================================================
   3. SECTION "TRONG LÚC CHỜ"
   ====================================================================== */

.ty-next {
	padding: var(--sp-8) 0;
	background: var(--c-bg-alt);
}

/* `.section-header` mặc định `margin-bottom: --block-gap` (32); ảnh đo 24. */
.ty-next__header {
	margin-bottom: var(--sp-6);
}

.ty-next__header .section-header__title {
	font-size: 1.75rem;     /* 28 */
	line-height: 1.25;
	color: var(--c-primary-800);
}

/* Ảnh: mô tả nằm MỘT dòng (~70 ký tự); `.section-header__desc` mặc định 60ch gãy đôi. */
.ty-next__header .section-header__desc {
	max-width: 760px;
}

/*
 * Footer chạm sát section xám như ảnh — cùng lý do `.site-main:has(> .cta-band)`
 * bỏ `margin-top` footer ở layout.css (R-06-layout F-14): khối cuối `<main>`
 * đã có nền riêng, chừa 80px trắng ở giữa là một dải vô nghĩa.
 */
.page-thankyou .site-footer {
	margin-top: 0;
}

/*
 * FLEX chứ không grid: thẻ `flex: 1 1 260px; max-width: 384px` — 3 thẻ chia
 * đều bề rộng trong container (1152 − 48 = 368 mỗi thẻ ở 1440, đúng như ảnh
 * chia 3 cột bằng nhau); khi thẻ PDF tự ẩn (chưa có tệp) thì 2 thẻ CANH GIỮA
 * ở đúng 384 — PW-Y12 "hai thẻ còn lại vẫn cân đối" không cần nhánh riêng.
 *
 * Bản đầu dùng `grid: repeat(auto-fit, minmax(220px, 384px))`: 3 × 384 + 2 × 24
 * = 1200 > 1152 (container đã trừ gutter) nên thẻ thứ ba rơi xuống hàng hai —
 * thấy ngay ở ảnh chụp 1440 đầu tiên.
 */
.ty-next__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: var(--sp-6);
}

/* =========================================================================
   4. THẺ LỰA CHỌN — cả thẻ là <a>, hover dùng `.card-hover` chung
   ====================================================================== */

.ty-next-card {
	display: flex;
	flex: 1 1 260px;
	flex-direction: column;
	align-items: center;
	max-width: 384px;
	min-height: 220px;
	padding: var(--sp-8);
	color: inherit;
	text-align: center;
	text-decoration: none;
	background: var(--c-bg);
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-lg);
	transition: var(--transition);
}

.ty-next-card__icon {
	margin-bottom: var(--sp-5);
	color: var(--c-accent);
}

.ty-next-card__title {
	margin: 0 0 10px;
	font-family: var(--font-heading);
	font-size: 1.25rem;     /* 20 */
	line-height: 1.3;
	font-weight: 700;
	color: var(--c-primary-800);
}

.ty-next-card__desc {
	max-width: 280px;
	margin: 0 0 18px;
	font-size: 0.9375rem;   /* 15 */
	line-height: 1.6;
	color: var(--c-text-muted);
}

.ty-next-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin-top: auto;       /* dính đáy thẻ khi mô tả ngắn/dài khác nhau */
	font-weight: 600;
	color: var(--c-primary);
}

.ty-next-card__arrow {
	transition: transform var(--transition);
}

@media (hover: hover) and (pointer: fine) {
	.ty-next-card:hover .ty-next-card__arrow {
		transform: translateX(2px);
	}
}

/* =========================================================================
   5. RESPONSIVE — số theo spec pixel §19–21 (không có ảnh dưới 1200)
   ====================================================================== */

@media (max-width: 1199px) {
	.ty-confirm__icon {
		width: 88px;
		height: 88px;
	}

	.ty-confirm__title {
		font-size: 2.25rem;   /* 36 */
	}

	.ty-next__grid {
		gap: var(--sp-5);
	}

	.ty-next-card {
		padding: 28px;
	}
}

@media (max-width: 991px) {
	.ty-confirm__icon {
		width: 80px;
		height: 80px;
	}

	.ty-confirm__title {
		margin-top: var(--sp-5);
		font-size: 2rem;      /* 32 */
	}

	.ty-confirm__message {
		font-size: 1rem;
	}

	.ty-urgent__icon {
		flex-basis: 44px;
		width: 44px;
		height: 44px;
	}

	.ty-urgent__phone {
		font-size: 1.5rem;    /* 24 */
	}

	.ty-next__header .section-header__title {
		font-size: 1.625rem;  /* 26 */
	}

	.ty-next__grid {
		gap: var(--sp-4);
	}

	/* `flex-basis: 0` để 3 thẻ LUÔN chung hàng ở 768–991 (spec pixel §19); basis
	   260 của PC làm 3 × 260 + 32 > 720 và thẻ thứ ba rơi xuống (đo 768). */
	.ty-next-card {
		flex-basis: 0;
		min-width: 0;
		padding: var(--sp-6);
	}

	.ty-next-card__icon {
		margin-bottom: var(--sp-4);
	}

	.ty-next-card__title {
		font-size: 1.125rem;  /* 18 */
	}

	.ty-next-card__desc {
		margin-bottom: var(--sp-4);
		font-size: 0.875rem;
	}
}

@media (max-width: 767px) {
	.ty-confirm__icon {
		width: 72px;
		height: 72px;
	}

	.ty-confirm__icon svg {
		width: 36px;
		height: 36px;
	}

	.ty-confirm__title {
		padding: 0 var(--sp-2);
		font-size: 1.75rem;   /* 28 */
		line-height: 1.2;
	}

	.ty-confirm__message {
		line-height: 1.55;
	}

	/* Hộp gọi thành nút full ngang (spec pixel §11): min 64 cao, mũi tên sát mép phải. */
	.ty-urgent__link {
		width: 100%;
		min-width: 0;
		min-height: 64px;
		padding: var(--sp-3) var(--sp-4);
	}

	.ty-urgent__icon {
		flex-basis: 40px;
		width: 40px;
		height: 40px;
	}

	.ty-urgent__label {
		font-size: var(--fs-sm);
	}

	.ty-urgent__phone {
		font-size: 1.375rem;  /* 22 */
	}

	.ty-urgent__chevron {
		margin-left: auto;
	}

	.ty-next__header .section-header__title {
		font-size: 1.5rem;    /* 24 */
	}

	.ty-next__grid {
		grid-template-columns: 1fr;
	}

	.ty-next-card {
		flex-basis: 100%;
		max-width: none;
	}

	.ty-next-card__title {
		font-size: 1.1875rem; /* 19 */
	}

	.ty-next-card__desc {
		font-size: 0.9375rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ty-next-card__arrow {
		transition: none;
	}

	.ty-next-card:hover .ty-next-card__arrow {
		transform: none;
	}
}