/**
 * Trang So sánh chương trình đầu tư.
 *
 * Bám brand guideline "Navy nền tảng — Cam Trí Tín điểm nhấn — Cam đặc cho
 * hành động": nền navy xen kẽ kem, cam chỉ ở dạng chữ/nét mảnh, và đúng một
 * mảng cam đặc trong cả trang (nút "Đặt lịch tư vấn" ở dải cuối).
 * Không bo góc, không đổ bóng đậm, không nạp font riêng.
 *
 * Mọi thứ nằm trong `body.tts` để không đụng phần còn lại của site.
 */

body.tts {
	--tts-navy: #0F1E33;
	--tts-navy-900: #0A1626;
	--tts-navy-700: #16283F;
	--tts-navy-400: #8FA3BD;
	--tts-cream: #F7F5F0;
	/* Hai nấc cam nhấn: sáng cho nền navy, nung cho nền kem/trắng.
	   `--tts-gold` là nấc đang hiệu lực, đổi theo nền ở khối ngay bên dưới. */
	--tts-gold-lit: #F0A45E;
	--tts-gold-dark: #A85B0E;
	--tts-gold: var(--tts-gold-lit);
	--tts-gold-fg: var(--tts-navy);
	--tts-orange: #F98E30;
	--tts-orange-dark: #D9720F;
	--tts-mist: #D7DEE8;
	--tts-ink: #1C2B3F;
	--tts-muted: #6B7686;
	--tts-line: #E4DFD4;
}

/* Nấc cam theo nền — cam sáng trên nền kem chỉ 1.9:1, không đọc nổi. */
.tts-tool,
.tts-extra {
	--tts-gold: var(--tts-gold-dark);
	--tts-gold-fg: #fff;
}

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

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

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

/*
 * Flatsome đặt margin và min-height cho <button> bằng đơn vị em, nên nút nào
 * cỡ chữ nhỏ vẫn dính thêm khoảng trống không ai đặt. Reset một lần ở đây
 * thay vì đi vá từng nút.
 */
body.tts button {
	margin: 0;
	min-height: 0;
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
}

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

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

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

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

body.tts .tts-lead {
	margin: 0;
	color: var(--tts-muted);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.7;
}

body.tts .tts-lead--light { color: var(--tts-mist); }

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

body.tts .tts-btn {
	display: inline-block;
	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.tts .tts-btn--primary {
	background-color: var(--tts-orange);
	border-color: var(--tts-orange);
	color: #fff;
}

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

body.tts .tts-btn--ghost-light {
	background-color: transparent;
	border-color: rgba(255, 255, 255, .55);
	color: #fff;
}

body.tts .tts-btn--ghost-light:hover,
body.tts .tts-btn--ghost-light:focus-visible {
	background-color: #fff;
	border-color: #fff;
	color: var(--tts-navy);
}

body.tts .tts-icon {
	flex: 0 0 auto;
	vertical-align: middle;
}

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

.tts-hero {
	position: relative;
	background-color: var(--tts-navy);
	overflow: hidden;
}

.tts-hero__inner {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 20px 56px;
	align-items: end;
	padding-top: 64px;
	padding-bottom: 38px;
}

body.tts .tts-hero__title {
	margin: 0;
	color: #fff;
	font-size: clamp(27px, 3.3vw, 42px);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -.015em;
	text-transform: none;
}

/* Tiêu đề xuống dòng đúng chỗ trên desktop; màn hẹp cho chữ chảy tự nhiên. */
body.tts .tts-hero__title span { display: block; }

.tts-hero__desc {
	margin: 0 0 18px;
	color: var(--tts-mist);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.7;
}

.tts-hero__note {
	margin: 0;
	padding-left: 16px;
	border-left: 1px solid var(--tts-gold);
	color: var(--tts-navy-400);
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.65;
}

/* Dải ảnh cờ + hộ chiếu: chạy hết chiều ngang, mờ dần hai mép vào nền navy. */
.tts-hero__strip {
	position: relative;
	line-height: 0;
}

body.tts .tts-hero__img {
	display: block;
	width: 100%;
	max-width: none;
	height: clamp(96px, 11vw, 150px);
	object-fit: cover;
	object-position: center;
}

.tts-hero__strip::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, var(--tts-navy) 0%, rgba(15, 30, 51, 0) 14%, rgba(15, 30, 51, 0) 86%, var(--tts-navy) 100%),
		linear-gradient(180deg, rgba(15, 30, 51, .55) 0%, rgba(15, 30, 51, .12) 45%, rgba(15, 30, 51, .2) 100%);
}

/* ==========================================================================
   Băng số liệu
   ========================================================================== */

.tts-stats {
	background-color: var(--tts-navy-700);
}

.tts-stats__inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	padding-top: 30px;
	padding-bottom: 30px;
}

.tts-stat {
	padding: 0 28px;
	border-left: 1px solid rgba(143, 163, 189, .22);
	color: var(--tts-gold);
}

.tts-stat:first-child {
	padding-left: 0;
	border-left: 0;
}

.tts-stat__value {
	margin: 10px 0 2px;
	color: #fff;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.1;
}

.tts-stat__label {
	margin: 0 0 6px;
	color: var(--tts-gold);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.tts-stat__desc {
	margin: 0;
	color: var(--tts-navy-400);
	font-size: 13px;
	font-weight: 300;
	line-height: 1.55;
}

/* ==========================================================================
   Công cụ so sánh
   ========================================================================== */

.tts-tool {
	background-color: var(--tts-cream);
	padding: 66px 0 74px;
}

.tts-tool__head {
	max-width: 760px;
	margin: 0 auto 34px;
	text-align: center;
}

body.tts .tts-tool__head .tts-heading { margin-bottom: 16px; }

/* Nét cam mảnh dưới tiêu đề — cùng chi tiết với các trang khác. */
body.tts .tts-tool__head .tts-heading::after {
	content: "";
	display: block;
	width: 54px;
	height: 1px;
	margin: 16px auto 0;
	background-color: var(--tts-gold);
}

/* ------------------------------------------------------------ Ô chọn */

.tts-picker {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 18px;
}

.tts-slot {
	padding: 14px 16px 16px;
	border: 1px solid var(--tts-line);
	background-color: #fff;
	transition: border-color .18s ease, box-shadow .18s ease;
}

/* Ô đã chọn: một nét cam mảnh ở mép trên, không phải mảng cam. */
.tts-slot.is-filled {
	border-color: rgba(168, 91, 14, .38);
	box-shadow: inset 0 2px 0 var(--tts-gold);
}

.tts-slot__label {
	display: block;
	margin-bottom: 9px;
	color: var(--tts-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}

.tts-slot.is-filled .tts-slot__label { color: var(--tts-gold); }

.tts-slot__field {
	position: relative;
	display: block;
}

body.tts .tts-slot__select {
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 34px 0 12px;
	border: 1px solid var(--tts-line);
	border-radius: 0;
	background-color: var(--tts-cream);
	/* Flatsome tự vẽ một mũi tên bằng background-image cho mọi <select>; để
	   nguyên thì nó chồng lên .tts-slot__caret thành hai mũi tên. */
	background-image: none;
	box-shadow: none;
	color: var(--tts-ink);
	font-size: 14px;
	font-weight: 400;
	line-height: 42px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	text-overflow: ellipsis;
}

body.tts .tts-slot__select:focus-visible {
	outline: 2px solid var(--tts-gold);
	outline-offset: 1px;
}

.tts-slot__caret {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	color: var(--tts-muted);
	pointer-events: none;
}

/* ------------------------------------------------------- Thanh công cụ */

.tts-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.tts-bar__count {
	margin: 0;
	color: var(--tts-muted);
	font-size: 13px;
	font-weight: 300;
}

.tts-bar__count b {
	color: var(--tts-ink);
	font-weight: 600;
}

.tts-bar__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

body.tts .tts-chip {
	padding: 8px 14px;
	border: 1px solid var(--tts-line);
	background-color: transparent;
	color: var(--tts-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .6px;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease;
}

body.tts .tts-chip:hover:not(:disabled),
body.tts .tts-chip:focus-visible:not(:disabled) {
	border-color: var(--tts-gold);
	color: var(--tts-gold);
}

body.tts .tts-chip:disabled {
	opacity: .45;
	cursor: default;
}

body.tts .tts-chip.is-done {
	border-color: var(--tts-gold);
	color: var(--tts-gold);
}

/* ------------------------------------------------------- Trạng thái rỗng */

.tts-empty {
	margin: 0;
	padding: 46px 24px;
	border: 1px dashed var(--tts-line);
	background-color: #fff;
	color: var(--tts-muted);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	text-align: center;
}

/* ==========================================================================
   Bảng so sánh
   ========================================================================== */

.tts-panel {
	border: 1px solid var(--tts-line);
	background-color: #fff;
}

.tts-panel__scroll {
	max-height: min(78vh, 900px);
	overflow: auto;
	overscroll-behavior: contain;
}

.tts-panel__scroll:focus-visible {
	outline: 2px solid var(--tts-gold);
	outline-offset: -2px;
}

/*
 * Flatsome đặt `table { display: block; overflow-x: auto }` cho mọi bảng trong
 * style.css — để nguyên thì thead không dính được và colgroup mất tác dụng.
 */
body.tts .tts-table {
	display: table;
	width: 100%;
	min-width: 1060px;
	margin: 0;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
	overflow: visible;
}

body.tts .tts-table__caption {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

body.tts .tts-table col.tts-col--label { width: 214px; }

/* ------------------------------------------------------- Hàng tiêu đề */

body.tts .tts-table .tts-th {
	position: sticky;
	top: 0;
	z-index: 3;
	padding: 13px 16px 14px;
	border: 0;
	border-bottom: 1px solid var(--tts-navy-700);
	background-color: var(--tts-navy);
	color: #fff;
	text-align: left;
	vertical-align: bottom;
	text-transform: none;
}

body.tts .tts-table .tts-th--label {
	left: 0;
	z-index: 4;
	background-color: var(--tts-navy-900);
	color: var(--tts-navy-400);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	vertical-align: bottom;
}

.tts-th__index {
	margin: 0 0 5px;
	color: var(--tts-navy-400);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.8px;
	text-transform: uppercase;
}

.tts-th__name {
	margin: 0;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.tts-th--col:not(.is-filled) .tts-th__name {
	color: var(--tts-navy-400);
	font-weight: 400;
	font-style: italic;
}

.tts-th__kind {
	margin: 3px 0 0;
	color: var(--tts-gold-lit);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
}

.tts-th__kind:empty { display: none; }

/* ------------------------------------------------------- Hàng tiêu đề nhóm */

body.tts .tts-grouprow__cell {
	padding: 0;
	border: 0;
	background-color: var(--tts-navy-700);
}

body.tts .tts-grouptoggle {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	text-align: left;
	cursor: pointer;
}

/*
 * Ô nhóm trải hết bề ngang bảng nên chính nó không "dính" được — phần chữ bên
 * trong mới là thứ neo vào mép trái khi cuộn ngang.
 */
.tts-grouptoggle__inner {
	position: sticky;
	left: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 16px;
}

.tts-grouptoggle__caret {
	color: var(--tts-gold-lit);
	transform: rotate(-90deg);
	transition: transform .18s ease;
}

.tts-group.is-open .tts-grouptoggle__caret { transform: none; }

.tts-grouptoggle__label {
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.8px;
	text-transform: uppercase;
}

.tts-grouptoggle__count {
	padding: 2px 8px;
	border: 1px solid rgba(240, 164, 94, .45);
	color: var(--tts-gold-lit);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
}

body.tts .tts-grouptoggle:hover .tts-grouptoggle__label,
body.tts .tts-grouptoggle:focus-visible .tts-grouptoggle__label { color: var(--tts-gold-lit); }

/* Nhóm đang thu: giấu hàng dữ liệu, giữ nguyên hàng tiêu đề. */
.tts-group:not(.is-open) .tts-row { display: none; }

/* ------------------------------------------------------- Hàng dữ liệu */

body.tts .tts-table .tts-rowhead {
	position: sticky;
	left: 0;
	z-index: 2;
	padding: 12px 16px;
	border: 0;
	border-right: 1px solid var(--tts-line);
	border-bottom: 1px solid var(--tts-line);
	background-color: var(--tts-cream);
	color: var(--tts-ink);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.5;
	text-align: left;
	text-transform: none;
	vertical-align: top;
}

body.tts .tts-table .tts-cell {
	padding: 12px 16px;
	border: 0;
	border-right: 1px solid var(--tts-line);
	border-bottom: 1px solid var(--tts-line);
	background-color: #fff;
	color: var(--tts-ink);
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.65;
	text-align: left;
	vertical-align: top;
}

body.tts .tts-table .tts-cell:last-child { border-right: 0; }

.tts-row:nth-child(even) .tts-cell { background-color: #FBFAF7; }
.tts-row:nth-child(even) .tts-rowhead { background-color: #F2EFE8; }

/*
 * Sắc thái ô, dịch từ bảng màu Excel cũ (xem `tts_cell_tone()`): giữ ý nghĩa,
 * bỏ hồng cánh sen / vàng chanh. Đặt sau zebra để đè được nền xen kẽ.
 */
body.tts .tts-table .tts-cell.is-highlight {
	background-color: rgba(240, 164, 94, .18);
	box-shadow: inset 3px 0 0 var(--tts-gold-dark);
}

/* Ô cảnh báo dùng sắc navy nhạt — guideline cấm thêm màu thứ tư. */
body.tts .tts-table .tts-cell.is-caution {
	background-color: rgba(15, 30, 51, .055);
	box-shadow: inset 3px 0 0 var(--tts-navy-400);
}

body.tts .tts-table .tts-cell.is-closed {
	background-color: #F1F1EF;
	color: var(--tts-muted);
}

.tts-cell__none {
	color: var(--tts-navy-400);
	font-weight: 300;
}

/* Nội dung ô đến từ trình soạn thảo ACF — nắn lại nhịp chữ cho vừa ô hẹp. */
body.tts .tts-cell__in > *:first-child { margin-top: 0; }
body.tts .tts-cell__in > *:last-child { margin-bottom: 0; }

body.tts .tts-cell__in p { margin: 0 0 7px; }

body.tts .tts-cell__in ul,
body.tts .tts-cell__in ol {
	margin: 0 0 7px;
	padding-left: 17px;
}

body.tts .tts-cell__in li { margin-bottom: 3px; }

body.tts .tts-cell__in a {
	color: var(--tts-gold-dark);
	text-decoration: underline;
}

body.tts .tts-cell__in img {
	max-width: 100%;
	height: auto;
}

body.tts .tts-cell__in strong { font-weight: 600; }

/* Cột đang trỏ chuột sáng lên — bảng rộng, dễ lạc hàng. */
body.tts .tts-table .tts-cell.is-hover { background-color: rgba(240, 164, 94, .09); }

/* Ô đang chờ dữ liệu về. */
.tts-cell.is-loading .tts-cell__in {
	min-height: 14px;
	background: linear-gradient(90deg, rgba(15, 30, 51, .07) 0%, rgba(15, 30, 51, .12) 50%, rgba(15, 30, 51, .07) 100%);
	color: transparent;
}

/* ==========================================================================
   Nội dung gõ trong editor (khối "Bài viết liên quan")
   ========================================================================== */

.tts-extra {
	background-color: var(--tts-cream);
	padding: 10px 0 66px;
}

body.tts .tts-extra .section { padding-top: 0 !important; }

/* Gạch chân đỏ #cb0e12 của style.css lệch guideline — đổi về cam nung. */
body.tts .tts-extra .line-title h2 {
	color: var(--tts-ink);
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 600;
	border-bottom-color: var(--tts-line);
	text-transform: uppercase;
	letter-spacing: .04em;
}

body.tts .tts-extra .line-title h2::after { background-color: var(--tts-gold); }

body.tts .tts-extra .post-title {
	color: var(--tts-ink);
	font-weight: 600;
}

body.tts .tts-extra .from_the_blog_excerpt {
	color: var(--tts-muted);
	font-weight: 300;
}

/* --------------------------------------------------- Thanh chuyển cột */

/*
 * Chỉ có mặt trên màn hẹp — desktop nhìn được cả bốn cột một lúc. Dính lên đầu
 * màn hình để cuộn xuống giữa bảng vẫn biết đang xem chương trình nào.
 * Header của Flatsome tự ẩn khi cuộn xuống nên hai thứ hiếm khi chồng nhau;
 * lúc chồng thì header (z-index cao hơn) đè lên, đúng thứ tự ưu tiên.
 */
.tts-pager {
	display: none;
	position: sticky;
	top: 0;
	z-index: 6;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 10px;
	border-bottom: 1px solid var(--tts-navy-700);
	background-color: var(--tts-navy);
}

.tts-pager__label {
	margin: 0;
	flex: 1 1 auto;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .4px;
	text-align: center;
}

body.tts .tts-pager__btn {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid rgba(240, 164, 94, .45);
	background-color: transparent;
	color: var(--tts-gold-lit);
	cursor: pointer;
}

body.tts .tts-pager__btn:disabled {
	border-color: rgba(143, 163, 189, .28);
	color: var(--tts-navy-400);
	cursor: default;
}

/* ==========================================================================
   Bài viết liên quan
   --------------------------------------------------------------------------
   Dùng lại nguyên khối `.ttb-related` + `.ttb-card.is-dark` của trang bài viết
   (markup do TTB_Template::card dựng, CSS lấy từ blog.css). Bình thường bộ
   token `--ttb-*` khai trên `body.ttb`; trang này không mang class đó nên cấp
   lại ngay tại khối — thiếu token là thẻ bài ra trắng trơn không viền.
   ========================================================================== */

.tts-related {
	--ttb-navy: #0F1E33;
	--ttb-navy-900: #0A1626;
	--ttb-navy-700: #16283F;
	--ttb-navy-400: #8FA3BD;
	--ttb-cream: #F7F5F0;
	--ttb-gold-lit: #F0A45E;
	--ttb-gold-dark: #A85B0E;
	/* Nền navy → nấc cam sáng, đúng như `body.ttb .ttb-related` đang đặt. */
	--ttb-gold: var(--ttb-gold-lit);
	--ttb-gold-fg: var(--ttb-navy);
	--ttb-orange: #F98E30;
	--ttb-orange-dark: #D9720F;
	--ttb-mist: #D7DEE8;
	--ttb-ink: #1C2B3F;
	--ttb-muted: #6B7686;
	--ttb-line: #E4DFD4;
}

/* `body.ttb .ttb-wrap` không với tới đây được. */
body.tts .tts-related .ttb-wrap {
	max-width: 1250px;
	margin: 0 auto;
	padding-right: 20px;
	padding-left: 20px;
}

/* ==========================================================================
   Dải kêu gọi cuối trang
   ========================================================================== */

/*
 * Nằm ngay dưới dải bài liên quan cũng nền navy — cùng một mã màu thì hai khối
 * dính thành một mảng tối dài. Hạ thêm một nấc và kẻ một nét cam mảnh để thấy
 * rõ đây là hai phần khác nhau.
 */
.tts-cta {
	background-color: var(--tts-navy-900);
	border-top: 1px solid rgba(240, 164, 94, .22);
	padding: 66px 0 70px;
}

.tts-cta__inner {
	max-width: 760px;
	text-align: center;
}

body.tts .tts-cta__inner .tts-heading { margin-bottom: 14px; }

.tts-cta__actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 28px;
}

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

@media (max-width: 1024px) {
	.tts-hero__inner {
		grid-template-columns: 1fr;
		gap: 22px;
		align-items: start;
		padding-top: 48px;
		padding-bottom: 32px;
	}

	.tts-picker { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 849px) {
	.tts-stats__inner {
		grid-template-columns: 1fr;
		gap: 20px;
		padding-top: 26px;
		padding-bottom: 26px;
	}

	.tts-stat {
		display: grid;
		grid-template-columns: 26px 1fr;
		gap: 2px 14px;
		align-items: center;
		padding: 0 0 20px;
		border-left: 0;
		border-bottom: 1px solid rgba(143, 163, 189, .22);
	}

	.tts-stat:last-child {
		padding-bottom: 0;
		border-bottom: 0;
	}

	.tts-stat .tts-icon { grid-row: span 3; }
	.tts-stat__value { margin: 0; font-size: 24px; }

	.tts-tool { padding: 46px 0 52px; }
	.tts-tool__head { margin-bottom: 26px; }

	.tts-bar {
		align-items: flex-start;
		flex-direction: column;
	}

	.tts-pager { display: flex; }

	/*
	 * Không giới hạn chiều cao trên điện thoại: một vùng cuộn dọc lồng trong
	 * trang làm ngón tay không biết mình đang cuộn cái gì. Chỉ còn cuộn ngang,
	 * cột nhãn vẫn dính mép trái.
	 *
	 * Cuộn có điểm dừng để mỗi lần vuốt dừng gọn ở đầu một chương trình chứ
	 * không đứng giữa hai cột. `proximity` chứ không `mandatory`: vuốt ngắn để
	 * liếc sang cột bên vẫn được, không bị giật về.
	 */
	.tts-panel__scroll {
		max-height: none;
		overscroll-behavior: auto;
		scroll-snap-type: x proximity;
		scroll-padding-left: 118px;
	}

	/*
	 * Đổi sang table-layout tự động: bề rộng cột do min-width của ô quyết định,
	 * nên bảng tự co theo số cột đang hiện mà không phải tính tổng trong CSS.
	 */
	body.tts .tts-table {
		table-layout: auto;
		width: auto;
		min-width: 0;
	}

	body.tts .tts-table col.tts-col--label { width: 118px; }

	body.tts .tts-table .tts-th--label,
	body.tts .tts-table .tts-rowhead {
		width: 118px;
		min-width: 118px;
		max-width: 118px;
	}

	/*
	 * Bề rộng một cột = phần màn hình còn lại sau khi trừ cột nhãn (118px),
	 * padding trang (2 × 20px) và viền khung — để nhãn + đúng một chương trình
	 * lọt trọn khung nhìn, không bị hụt mất mép phải.
	 * Kẹp hai đầu: máy quá nhỏ thì không co dưới 210px (chữ vỡ dòng liên tục),
	 * máy tầm 800px thì không phình quá 320px (thừa chỗ, thấy được hai cột).
	 *
	 * `--tts-colw` do JS đo khung cuộn thật rồi ghi vào (xem sizeColumns()) —
	 * công thức 100vw ở đây là giá trị dự phòng cho trường hợp không có JS.
	 */
	body.tts .tts-table .tts-th--col,
	body.tts .tts-table .tts-cell {
		min-width: var( --tts-colw, clamp(210px, calc(100vw - 168px), 320px) );
		scroll-snap-align: start;
	}

	/* Cột chưa chọn giấu hẳn — đỡ phải vuốt qua mấy cột trống. */
	body.tts .tts-table .tts-cell.is-empty,
	body.tts .tts-table .tts-th--col:not(.is-filled) { display: none; }

	body.tts .tts-table .tts-th { position: static; }
	body.tts .tts-table .tts-th--label { position: sticky; left: 0; }

	body.tts .tts-table .tts-rowhead,
	body.tts .tts-table .tts-cell {
		padding: 10px 12px;
		font-size: 13px;
	}

	/* Chip vừa hai cái một hàng thay vì mỗi cái một hàng. */
	.tts-bar__actions { width: 100%; }

	body.tts .tts-chip {
		flex: 1 1 auto;
		padding: 9px 10px;
		font-size: 11px;
		letter-spacing: .3px;
		text-align: center;
	}

	.tts-cta { padding: 46px 0 50px; }

	.tts-cta__actions .tts-btn,
	.tts-hero__actions .tts-btn { width: 100%; text-align: center; }
}

@media (max-width: 560px) {
	/*
	 * Hai cột thì ô chọn chỉ còn ~150px, tên chương trình ("Đảo Síp (Cyprus) |
	 * Thường trú") bị cắt còn "Đảo Síp (C…" — đọc không ra. Một cột thì đủ chỗ.
	 */
	.tts-picker { grid-template-columns: 1fr; }

	.tts-slot { padding: 11px 12px 13px; }

	.tts-slot__label { margin-bottom: 7px; }

	body.tts .tts-slot__select {
		height: 42px;
		line-height: 40px;
	}

	.tts-hero__inner {
		padding-top: 38px;
		padding-bottom: 26px;
	}
}

/* ==========================================================================
   In giấy
   ========================================================================== */

@media print {
	.tts-hero__strip,
	.tts-stats,
	.tts-bar,
	.tts-cta,
	.tts-extra { display: none; }

	.tts-panel__scroll {
		max-height: none;
		overflow: visible;
	}

	.tts-group:not(.is-open) .tts-row { display: table-row; }

	body.tts .tts-table .tts-th,
	body.tts .tts-table .tts-rowhead { position: static; }

	.tts-row { break-inside: avoid; }
}