/**
 * Trang Khảo sát Síp trước khi quyết định.
 *
 * Bố cục theo bản thiết kế `khao-sat-sip-ban-thiet-ke.html`, màu theo brand
 * guideline hiện hành: bản thiết kế dùng vàng đồng #C9A227 làm nền đặc ở
 * nhiều chỗ (nhãn Lối 1, ô cuối mỗi lối, cột Trí Tín, ô "−220 triệu", số thứ
 * tự 5 bước) — ở đây đều chuyển thành chữ hoặc nét mảnh cam, để đúng một mảng
 * cam đặc là nút "Đặt lịch Cà phê với Tín" ở dải cuối. Không bo góc, không
 * gradient, không nạp font riêng.
 *
 * Mọi thứ nằm trong `body.ttks` để không đụng phần còn lại của site.
 */

body.ttks {
	--ttks-navy: #0F1E33;
	--ttks-navy-900: #0A1626;
	--ttks-navy-700: #16283F;
	--ttks-navy-400: #8FA3BD;
	--ttks-cream: #F7F5F0;
	/* Nền chủ đạo là trắng + kem nên mặc định là nấc cam nung; các khối navy
	   tự bật lại nấc cam nhạt ở ngay dưới. */
	--ttks-gold-lit: #F0A45E;
	--ttks-gold-dark: #A85B0E;
	--ttks-gold: var(--ttks-gold-dark);
	--ttks-orange: #F98E30;
	--ttks-orange-dark: #D9720F;
	--ttks-mist: #D7DEE8;
	--ttks-ink: #1C2B3F;
	--ttks-muted: #6B7686;
	--ttks-line: #E4DFD4;
}

/* Nấc cam theo nền — cam nhạt trên nền kem chỉ 1.9:1, cam nung trên navy cũng không đọc nổi. */
.ttks-hero,
.ttks-bigq,
.ttks-lane--dark,
.ttks-cost__box--total,
.ttks-step.is-end,
.ttks-cta {
	--ttks-gold: var(--ttks-gold-lit);
}

body.ttks *,
body.ttks *::before,
body.ttks *::after { box-sizing: border-box; }

/* Bỏ padding mặc định của Flatsome để dải mở đầu chạm sát header. */
body.ttks #content.page-wrapper {
	padding-top: 0;
	padding-bottom: 0;
	background-color: #fff;
	color: var(--ttks-ink);
}

body.ttks .ttks-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding-right: 20px;
	padding-left: 20px;
}

/* Flatsome tô link toàn site đỏ #cb0e12 — khối nào có link phải tự khai màu.
   `:where()` giữ độ ưu tiên thấp hơn `.ttks-btn--*`, không thì nút mất màu. */
body.ttks :where(.ttks-page) a { color: var(--ttks-gold); }

/* ==========================================================================
   Chữ dùng lại giữa các khối
   ========================================================================== */

.ttks-section {
	padding: 72px 0;
	background-color: #fff;
}

.ttks-section--cream { background-color: var(--ttks-cream); }

.ttks-head {
	max-width: 760px;
	margin-bottom: 30px;
}

body.ttks .ttks-eyebrow {
	margin: 0 0 12px;
	color: var(--ttks-gold);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 2.4px;
	text-transform: uppercase;
}

body.ttks .ttks-heading {
	margin: 0 0 14px;
	color: var(--ttks-ink);
	font-size: clamp(25px, 2.8vw, 34px);
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -.01em;
	text-transform: none;
}

body.ttks .ttks-heading--light { color: #fff; }

body.ttks .ttks-lead {
	margin: 0;
	color: var(--ttks-muted);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.7;
}

body.ttks .ttks-fine {
	margin: 14px 0 0;
	color: var(--ttks-muted);
	font-size: 13.5px;
	line-height: 1.6;
}

body.ttks .ttks-icon {
	display: block;
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------- Nút */

body.ttks .ttks-btn {
	display: inline-block;
	margin: 0;
	padding: 13px 26px;
	border: 1px solid transparent;
	border-radius: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* Mảng cam đặc duy nhất của cả trang. */
body.ttks .ttks-btn--primary {
	background-color: var(--ttks-orange);
	border-color: var(--ttks-orange);
	color: #fff;
}

body.ttks .ttks-btn--primary:hover,
body.ttks .ttks-btn--primary:focus-visible {
	background-color: var(--ttks-orange-dark);
	border-color: var(--ttks-orange-dark);
	color: #fff;
}

body.ttks .ttks-btn--ghost-light {
	background-color: transparent;
	border-color: var(--ttks-gold-lit);
	color: var(--ttks-gold-lit);
}

body.ttks .ttks-btn--ghost-light:hover,
body.ttks .ttks-btn--ghost-light:focus-visible {
	background-color: var(--ttks-gold-lit);
	border-color: var(--ttks-gold-lit);
	color: var(--ttks-navy);
}

/* ==========================================================================
   Dải mở đầu
   ========================================================================== */

.ttks-hero {
	background-color: var(--ttks-navy);
	color: var(--ttks-mist);
}

.ttks-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	padding-top: 56px;
	padding-bottom: 64px;
}

.ttks-hero.has-image .ttks-hero__inner {
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}

.ttks-hero__text { max-width: 780px; }

body.ttks .ttks-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	color: var(--ttks-navy-400);
	font-size: 13px;
	line-height: 1.5;
}

body.ttks .ttks-crumbs li { margin: 0; }

body.ttks .ttks-crumbs li + li::before {
	content: "›";
	margin-right: 8px;
}

body.ttks .ttks-crumbs a {
	color: var(--ttks-navy-400);
	text-decoration: none;
}

body.ttks .ttks-crumbs a:hover { color: #fff; }

body.ttks .ttks-hero__title {
	margin: 4px 0 16px;
	color: #fff;
	font-size: clamp(31px, 4.4vw, 50px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.015em;
	text-transform: none;
}

body.ttks .ttks-hero__sub {
	max-width: 660px;
	margin: 0 0 24px;
	color: var(--ttks-mist);
	font-size: 19px;
	font-weight: 300;
	line-height: 1.65;
}

body.ttks .ttks-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

body.ttks .ttks-chips li {
	margin: 0;
	padding: 6px 14px;
	border: 1px solid rgba(215, 222, 232, .32);
	color: var(--ttks-mist);
	font-size: 14px;
	line-height: 1.5;
}

body.ttks .ttks-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	margin: 0;
	color: var(--ttks-navy-400);
	font-size: 13px;
}

.ttks-hero__media { margin: 0; }

body.ttks .ttks-hero__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ==========================================================================
   Bốn lý do + câu hỏi lớn
   ========================================================================== */

.ttks-jobs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.ttks-job {
	padding: 26px 22px;
	border: 1px solid var(--ttks-line);
	background-color: #fff;
}

.ttks-job__ic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 16px;
	background-color: var(--ttks-navy);
	color: var(--ttks-gold-lit);
}

body.ttks .ttks-job__tag {
	margin: 0 0 6px;
	color: var(--ttks-gold);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

body.ttks .ttks-job__title {
	margin: 0 0 8px;
	color: var(--ttks-ink);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
}

body.ttks .ttks-job__desc {
	margin: 0;
	color: var(--ttks-muted);
	font-size: 15px;
	line-height: 1.6;
}

.ttks-bigq {
	margin-top: 40px;
	padding: 44px 48px;
	background-color: var(--ttks-navy);
}

body.ttks .ttks-bigq__q {
	margin: 0;
	color: #fff;
	font-size: clamp(21px, 2.5vw, 30px);
	font-weight: 500;
	line-height: 1.4;
}

body.ttks .ttks-bigq__q em {
	color: var(--ttks-gold);
	font-style: normal;
}

body.ttks .ttks-bigq__a {
	margin: 16px 0 0;
	color: var(--ttks-mist);
	font-size: 17px;
	font-weight: 300;
	line-height: 1.65;
}

/* ==========================================================================
   Không phải là gì
   ========================================================================== */

.ttks-nots {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.ttks-not {
	padding: 26px 24px;
	border: 1px solid var(--ttks-line);
	background-color: #fff;
}

.ttks-not__x {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 14px;
	border-radius: 50%;
	background-color: var(--ttks-cream);
	color: var(--ttks-muted);
}

body.ttks .ttks-not__title {
	margin: 0;
	color: var(--ttks-ink);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
}

body.ttks .ttks-not__title s {
	text-decoration-color: var(--ttks-gold);
	text-decoration-thickness: 2px;
}

body.ttks .ttks-not__desc {
	margin: 8px 0 0;
	color: var(--ttks-muted);
	font-size: 15px;
	line-height: 1.6;
}

body.ttks .ttks-not__desc a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.ttks .ttks-not__yes {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px dashed var(--ttks-line);
	color: var(--ttks-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.55;
}

/* ==========================================================================
   Hai lối đi
   ========================================================================== */

.ttks-lane {
	margin-bottom: 18px;
	padding: 26px;
}

.ttks-lane--dark { background-color: var(--ttks-navy); }

.ttks-lane--light {
	border: 1px solid var(--ttks-line);
	background-color: #fff;
}

.ttks-lane__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin-bottom: 20px;
}

.ttks-lane__pill {
	padding: 7px 18px;
	border: 1px solid currentColor;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.ttks-lane--dark .ttks-lane__pill { color: var(--ttks-gold); }
.ttks-lane--light .ttks-lane__pill { color: var(--ttks-ink); }

.ttks-lane__fit { font-size: 15px; }
.ttks-lane--dark .ttks-lane__fit { color: var(--ttks-mist); }
.ttks-lane--light .ttks-lane__fit { color: var(--ttks-muted); }

body.ttks .ttks-flow {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ttks-flow;
}

body.ttks .ttks-flow__step {
	position: relative;
	margin: 0;
	padding: 16px 14px;
	border: 1px solid transparent;
	font-size: 13.5px;
	line-height: 1.5;
	counter-increment: ttks-flow;
}

.ttks-flow__step::before {
	content: counter(ttks-flow);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 1px solid transparent;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 600;
}

.ttks-flow__step b {
	display: block;
	margin: 8px 0 4px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.ttks-flow__step span { display: block; }

/* Mũi tên nằm trong khe giữa hai ô. */
.ttks-flow__step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -12px;
	width: 9px;
	height: 9px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	opacity: .55;
	transform: translateY(-50%) rotate(45deg);
}

.ttks-lane--dark .ttks-flow__step {
	border-color: rgba(143, 163, 189, .25);
	background-color: var(--ttks-navy-700);
	color: var(--ttks-mist);
}

.ttks-lane--dark .ttks-flow__step b { color: #fff; }

.ttks-lane--dark .ttks-flow__step::before {
	background-color: rgba(255, 255, 255, .12);
	color: #fff;
}

.ttks-lane--dark .ttks-flow__step.is-end {
	border-color: var(--ttks-gold);
	background-color: var(--ttks-navy-900);
}

.ttks-lane--dark .ttks-flow__step.is-end b { color: var(--ttks-gold); }

.ttks-lane--dark .ttks-flow__step.is-end::before {
	border-color: var(--ttks-gold);
	background-color: transparent;
	color: var(--ttks-gold);
}

.ttks-lane--light .ttks-flow__step {
	border-color: var(--ttks-line);
	background-color: var(--ttks-cream);
	color: var(--ttks-muted);
}

.ttks-lane--light .ttks-flow__step b { color: var(--ttks-ink); }

.ttks-lane--light .ttks-flow__step::before {
	background-color: var(--ttks-line);
	color: var(--ttks-ink);
}

.ttks-lane--light .ttks-flow__step.is-end {
	border-color: var(--ttks-navy);
	background-color: var(--ttks-navy);
	color: var(--ttks-mist);
}

.ttks-lane--light .ttks-flow__step.is-end b { color: #fff; }

.ttks-lane--light .ttks-flow__step.is-end::before {
	background-color: rgba(255, 255, 255, .12);
	color: #fff;
}

body.ttks .ttks-common {
	margin: 0;
	padding: 16px 20px;
	border: 1px solid var(--ttks-line);
	border-left: 3px solid var(--ttks-gold);
	background-color: #fff;
	color: var(--ttks-ink);
	font-size: 15px;
	line-height: 1.65;
}

body.ttks .ttks-common strong {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

/* ------------------------------------------------------------ Bảng chữ */

.ttks-table-wrap {
	margin-top: 28px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* style.css của child theme đặt mọi <table> là `display: block` để tự cuộn
   ngang — bảng khi đó co theo chữ, không giãn hết khung. Ở đây khung cuộn đã
   là `.ttks-table-wrap`, nên trả bảng về đúng `display: table`. */
body.ttks .ttks-table,
body.ttks .ttks-roles {
	display: table;
	width: 100%;
	margin: 0;
	border: 1px solid var(--ttks-line);
	border-collapse: separate;
	border-spacing: 0;
	background-color: #fff;
}

body.ttks .ttks-table th,
body.ttks .ttks-table td,
body.ttks .ttks-roles th,
body.ttks .ttks-roles td {
	padding: 13px 16px;
	border-bottom: 1px solid var(--ttks-line);
	color: var(--ttks-ink);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	vertical-align: top;
}

body.ttks .ttks-table thead th,
body.ttks .ttks-table thead td,
body.ttks .ttks-roles thead th {
	background-color: var(--ttks-navy);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}

body.ttks .ttks-table thead th:nth-child(2) { background-color: var(--ttks-navy-700); }

body.ttks .ttks-table tbody th,
body.ttks .ttks-roles tbody th {
	width: 24%;
	background-color: var(--ttks-cream);
	font-weight: 600;
}

body.ttks .ttks-table tbody tr:last-child > *,
body.ttks .ttks-roles tbody tr:last-child > * { border-bottom: 0; }

/* ==========================================================================
   Bốn ngày
   ========================================================================== */

.ttks-days {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.ttks-day {
	padding: 22px 20px;
	border: 1px solid var(--ttks-line);
	background-color: #fff;
}

body.ttks .ttks-day__n {
	margin: 0 0 8px;
	color: var(--ttks-gold);
	font-size: 40px;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: lining-nums;
}

body.ttks .ttks-day__label {
	margin: 0 0 10px;
	color: var(--ttks-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
}

body.ttks .ttks-day__title {
	margin: 0;
	color: var(--ttks-ink);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
}

body.ttks .ttks-day__list {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	color: var(--ttks-muted);
	font-size: 14.5px;
	line-height: 1.55;
}

body.ttks .ttks-day__list li {
	position: relative;
	margin: 0 0 6px;
	padding-left: 16px;
}

.ttks-day__list li::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--ttks-gold);
}

body.ttks .ttks-day__after {
	margin: 12px 0 0;
	color: var(--ttks-ink);
	font-size: 13px;
	font-weight: 600;
}

.ttks-school {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	margin-top: 22px;
	padding: 20px 22px;
	border: 1px solid var(--ttks-line);
	border-left: 3px solid var(--ttks-gold);
	background-color: #fff;
}

.ttks-school__ic {
	display: flex;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	height: 44px;
	background-color: var(--ttks-navy);
	color: var(--ttks-gold-lit);
}

body.ttks .ttks-school p {
	margin: 0;
	color: var(--ttks-ink);
	font-size: 15px;
	line-height: 1.65;
}

/* ==========================================================================
   Ai lo phần nào
   ========================================================================== */

.ttks-section .ttks-head + .ttks-table-wrap { margin-top: 0; }

body.ttks .ttks-roles td {
	color: var(--ttks-muted);
	font-size: 13.5px;
	line-height: 1.4;
	text-align: center;
	vertical-align: middle;
}

body.ttks .ttks-roles thead th { text-align: center; }
body.ttks .ttks-roles thead th:first-child { text-align: left; }
body.ttks .ttks-roles thead th.is-tt { color: var(--ttks-gold-lit); }

body.ttks .ttks-roles tbody th {
	width: 31%;
	vertical-align: middle;
}

body.ttks .ttks-roles td.is-tt { background-color: rgba(168, 91, 14, .05); }

.ttks-dot {
	display: block;
	width: 12px;
	height: 12px;
	margin: 0 auto 5px;
	border: 2px solid var(--ttks-ink);
	border-radius: 50%;
	background-color: var(--ttks-ink);
}

.ttks-dot--help { background-color: transparent; }

.is-tt .ttks-dot { border-color: var(--ttks-gold); }
.is-tt .ttks-dot--main { background-color: var(--ttks-gold); }

body.ttks .ttks-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 12px 0 0;
	color: var(--ttks-muted);
	font-size: 13px;
}

.ttks-legend > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ttks-legend .ttks-dot { margin: 0; }

/* ==========================================================================
   Chi phí
   ========================================================================== */

.ttks-cost {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
	gap: 16px;
	align-items: stretch;
}

.ttks-cost__box {
	padding: 22px;
	border: 1px solid var(--ttks-line);
	background-color: #fff;
	text-align: center;
}

.ttks-cost__box--total {
	border-color: var(--ttks-navy);
	background-color: var(--ttks-navy);
}

body.ttks .ttks-cost__lb,
body.ttks .ttks-cost__ft {
	margin: 0;
	color: var(--ttks-muted);
	font-size: 13px;
	line-height: 1.5;
}

body.ttks .ttks-cost__num {
	margin: 6px 0;
	color: var(--ttks-ink);
	font-size: 44px;
	font-weight: 600;
	line-height: 1.1;
	font-variant-numeric: lining-nums;
}

body.ttks .ttks-cost__num small {
	font-size: 18px;
	font-weight: 600;
}

body.ttks .ttks-cost__box--total .ttks-cost__lb,
body.ttks .ttks-cost__box--total .ttks-cost__ft { color: var(--ttks-mist); }

body.ttks .ttks-cost__box--total .ttks-cost__num { color: #fff; }

.ttks-cost__op {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ttks-gold);
	font-size: 34px;
	font-weight: 600;
	line-height: 1;
}

.ttks-vs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 18px;
}

.ttks-vs__std,
.ttks-vs__save {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	border: 1px solid var(--ttks-line);
	background-color: #fff;
}

.ttks-vs__save { border-color: var(--ttks-gold); }

.ttks-vs__lb {
	max-width: 60%;
	color: var(--ttks-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
}

.ttks-vs__num {
	font-weight: 600;
	line-height: 1.1;
	white-space: nowrap;
	font-variant-numeric: lining-nums;
}

body.ttks .ttks-vs__std .ttks-vs__num {
	color: var(--ttks-muted);
	font-size: 30px;
	text-decoration: line-through;
	text-decoration-color: var(--ttks-gold);
	text-decoration-thickness: 2px;
}

.ttks-vs__save .ttks-vs__num {
	color: var(--ttks-gold);
	font-size: 36px;
}

/* ==========================================================================
   Dành cho ai
   ========================================================================== */

.ttks-fit {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.ttks-fit__col {
	padding: 26px;
	border: 1px solid var(--ttks-line);
	background-color: #fff;
}

body.ttks .ttks-fit__title {
	margin: 0 0 16px;
	color: var(--ttks-ink);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
}

body.ttks .ttks-fit__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.ttks .ttks-fit__list li {
	display: flex;
	gap: 12px;
	margin: 0 0 12px;
	color: var(--ttks-ink);
	font-size: 15px;
	line-height: 1.55;
}

body.ttks .ttks-fit__list li:last-child { margin-bottom: 0; }

.ttks-fit__list .ttks-icon { margin-top: 1px; }
.ttks-fit__col--yes .ttks-icon { color: var(--ttks-gold); }
.ttks-fit__col--no .ttks-icon { color: var(--ttks-muted); }

body.ttks .ttks-slots {
	margin: 18px 0 0;
	color: var(--ttks-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.55;
	text-align: center;
}

/* ==========================================================================
   Năm bước
   ========================================================================== */

body.ttks .ttks-steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.ttks .ttks-step {
	position: relative;
	margin: 0;
	padding: 24px 18px;
	border: 1px solid var(--ttks-line);
	background-color: #fff;
	text-align: center;
}

.ttks-step__n {
	position: absolute;
	top: 14px;
	left: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--ttks-gold);
	border-radius: 50%;
	color: var(--ttks-gold);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
}

.ttks-step .ttks-icon {
	margin: 22px auto 14px;
	color: var(--ttks-ink);
}

body.ttks .ttks-step__title {
	margin: 0 0 6px;
	color: var(--ttks-ink);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
}

body.ttks .ttks-step__desc {
	margin: 0;
	color: var(--ttks-muted);
	font-size: 14px;
	line-height: 1.55;
}

body.ttks .ttks-step.is-end {
	border-color: var(--ttks-navy);
	background-color: var(--ttks-navy);
}

body.ttks .ttks-step.is-end .ttks-step__title { color: #fff; }
body.ttks .ttks-step.is-end .ttks-step__desc { color: var(--ttks-mist); }
.ttks-step.is-end .ttks-icon { color: var(--ttks-gold); }

.ttks-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -12px;
	width: 9px;
	height: 9px;
	border-top: 2px solid var(--ttks-muted);
	border-right: 2px solid var(--ttks-muted);
	opacity: .6;
	transform: translateY(-50%) rotate(45deg);
}

/* ==========================================================================
   Câu hỏi thường gặp
   ========================================================================== */

.ttks-faq { max-width: 840px; }

body.ttks .ttks-faq .ttks-heading { margin-bottom: 24px; }

.ttks-faq__item {
	margin: 0 0 12px;
	border: 1px solid var(--ttks-line);
	background-color: #fff;
}

/* `>` cho cả cụm dưới: công cụ VAT ở câu hỏi cuối lồng <details> và nhiều <p>
   bên trong câu trả lời — không có `>` thì chúng ăn luôn dấu +/– và lề của câu hỏi. */
body.ttks .ttks-faq__item > summary {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	color: var(--ttks-ink);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.45;
	list-style: none;
	cursor: pointer;
}

.ttks-faq__item > summary::-webkit-details-marker { display: none; }

.ttks-faq__item > summary::after {
	content: "+";
	flex: 0 0 auto;
	color: var(--ttks-gold);
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
}

.ttks-faq__item[open] > summary::after { content: "–"; }

body.ttks .ttks-faq__item > summary:focus-visible {
	outline: 2px solid var(--ttks-gold);
	outline-offset: -2px;
}

body.ttks .ttks-faq__item > p {
	margin: 0;
	padding: 0 22px 18px;
	color: var(--ttks-muted);
	font-size: 16px;
	line-height: 1.7;
}

/* Công cụ VAT của plugin tritin-vat ở câu hỏi cuối. Giao diện bên trong do
   plugin lo; ở đây chỉ canh cho thẳng lề 22px với chữ trả lời ở trên. */
.ttks-faq__tool { padding: 0 22px 22px; }

body.ttks .ttks-faq__tool .ttvat { margin: 0 auto; }

/* ==========================================================================
   Dải kêu gọi
   ========================================================================== */

.ttks-cta {
	padding: 48px;
	background-color: var(--ttks-navy);
}

body.ttks .ttks-cta .ttks-heading {
	max-width: 720px;
	font-size: clamp(25px, 2.7vw, 32px);
}

body.ttks .ttks-cta__desc {
	max-width: 680px;
	margin: 0;
	color: var(--ttks-mist);
	font-size: 17px;
	font-weight: 300;
	line-height: 1.7;
}

.ttks-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 24px 0 16px;
}

body.ttks .ttks-cta__small {
	margin: 0;
	color: var(--ttks-navy-400);
	font-size: 14px;
	line-height: 1.6;
}

body.ttks .ttks-cta__small a {
	color: var(--ttks-mist);
	white-space: nowrap;
}

/* ==========================================================================
   Màn hẹp
   ========================================================================== */

@media (max-width: 1024px) {
	.ttks-jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ttks-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.ttks-section { padding: 56px 0; }

	.ttks-hero.has-image .ttks-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.ttks-hero__inner { padding-top: 40px; padding-bottom: 48px; }
	body.ttks .ttks-hero__sub { font-size: 17px; }

	.ttks-nots { grid-template-columns: minmax(0, 1fr); }

	/* Sơ đồ hai lối xếp dọc, mũi tên quay xuống. */
	.ttks-lane { padding: 20px 18px; }
	.ttks-lane__pill { padding: 6px 14px; font-size: 12px; letter-spacing: 1px; }

	body.ttks .ttks-flow {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	body.ttks .ttks-flow__step {
		display: grid;
		grid-template-columns: 26px minmax(0, 1fr);
		column-gap: 12px;
		align-items: start;
	}

	.ttks-flow__step::before { grid-row: 1 / 3; }
	.ttks-flow__step b { margin: 1px 0 2px; }

	.ttks-flow__step:not(:last-child)::after {
		top: auto;
		right: auto;
		bottom: -11px;
		left: 23px;
		transform: rotate(135deg);
	}

	.ttks-cost { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.ttks-cost__op { font-size: 28px; }
	.ttks-vs { grid-template-columns: minmax(0, 1fr); }

	.ttks-fit { grid-template-columns: minmax(0, 1fr); }

	/* Năm bước: số thứ tự bên trái, bỏ icon cho gọn. */
	body.ttks .ttks-steps { grid-template-columns: minmax(0, 1fr); }

	body.ttks .ttks-step {
		display: grid;
		grid-template-columns: 30px minmax(0, 1fr);
		column-gap: 16px;
		padding: 20px 18px;
		text-align: left;
	}

	.ttks-step__n { position: static; grid-row: 1 / 3; }
	body.ttks .ttks-step .ttks-icon { display: none; }

	.ttks-step:not(:last-child)::after {
		top: auto;
		right: auto;
		bottom: -13px;
		left: 29px;
		transform: rotate(135deg);
	}

	.ttks-bigq { padding: 30px 26px; }
	.ttks-cta { padding: 34px 24px; }
}

@media (max-width: 560px) {
	.ttks-section { padding: 46px 0; }

	.ttks-jobs,
	.ttks-days { grid-template-columns: minmax(0, 1fr); }

	body.ttks .ttks-lead { font-size: 16px; }

	body.ttks .ttks-table th,
	body.ttks .ttks-table td {
		padding: 10px;
		font-size: 13.5px;
	}

	body.ttks .ttks-table tbody th { width: 28%; }

	body.ttks .ttks-roles th,
	body.ttks .ttks-roles td {
		padding: 10px 6px;
		font-size: 12px;
	}

	body.ttks .ttks-roles thead th,
	body.ttks .ttks-roles tbody th {
		font-size: 12.5px;
	}

	body.ttks .ttks-roles tbody th { width: 28%; padding-left: 10px; }

	.ttks-vs__std,
	.ttks-vs__save { padding: 18px; }

	body.ttks .ttks-cost__num { font-size: 38px; }
	body.ttks .ttks-vs__std .ttks-vs__num { font-size: 26px; }
	.ttks-vs__save .ttks-vs__num { font-size: 30px; }

	.ttks-bigq { padding: 26px 20px; }
	.ttks-cta { padding: 30px 20px; }

	.ttks-cta__actions .ttks-btn {
		width: 100%;
		text-align: center;
	}
}

@media print {
	.ttks-cta { display: none; }
}