/* ==========================================================================
   TingTing — bảng kiểu chính
   Thứ tự: biến → nền tảng → bố cục → thành phần → trang → màn hình hẹp
   ========================================================================== */

:root {
	--tt-rule: #C9D6EE;
	--tt-blue: #0B5CFF;
	--tt-blue-dark: #0A4BD6;
	--tt-cyan: #00D1C1;
	--tt-sky: #22A7FF;
	--tt-navy: #0F2D5B;
	--tt-text: #3F5273;
	--tt-text-2: #5B6B87;
	--tt-label: #5C7093;
	--tt-ink: #2B3A55;
	--tt-bg-soft: #F6F9FF;
	--tt-bg-blue: #EAF1FF;
	--tt-line: #E6ECF7;
	--tt-line-2: #DCE4F5;
	--tt-line-3: #EEF2FA;
	--tt-ok: #00A896;
	--tt-ok-dark: #007A6E;
	--tt-ok-bg: #E6FAF7;
	--tt-err: #D92D20;
	--tt-star: #FFB020;
	--tt-on-navy: #D5E2F7;

	--tt-r-lg: 24px;
	--tt-r-md: 20px;
	--tt-r-sm: 12px;
	--tt-r-pill: 999px;

	--tt-shadow-1: 0 1px 3px rgba(15, 45, 91, .06);
	--tt-shadow-2: 0 14px 32px rgba(15, 45, 91, .12);
	--tt-shadow-3: 0 24px 48px rgba(15, 45, 91, .12);
	--tt-shadow-blue: 0 10px 24px rgba(11, 92, 255, .3);

	--tt-wrap: 1200px;
	--tt-pad: 24px;
	--tt-section: 96px;

	--tt-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --------------------------------------------------------------- nền tảng */

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

body {
	margin: 0;
	background: #fff;
	color: var(--tt-navy);
	font-family: var(--tt-font);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--tt-blue); text-decoration: none; }
a:hover { color: var(--tt-blue-dark); }

h1, h2, h3, h4 { margin: 0; letter-spacing: -.02em; line-height: 1.15; font-weight: 700; text-wrap: pretty; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

button { font-family: inherit; }

[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--tt-sky); outline-offset: 2px; }

.tt-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: #fff;
	color: var(--tt-navy);
	padding: 12px 20px;
	border-radius: 0 0 var(--tt-r-sm) 0;
	font-weight: 600;
}
.tt-skip:focus { left: 0; }

.tt-icon { flex: none; }

.screen-reader-text {
	position: absolute !important;
	left: 0; top: 0;
	width: 1px; height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------------------------------------------------------------- bố cục */

.tt-wrap { max-width: var(--tt-wrap); margin: 0 auto; padding-inline: var(--tt-pad); }

.tt-section { padding-block: var(--tt-section); }
.tt-section--sm { padding-block: 72px; }
.tt-section--soft { background: var(--tt-bg-soft); }
.tt-section--navy { background: var(--tt-navy); color: #fff; }

.tt-head { max-width: 640px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 48px; }
.tt-head--wide { max-width: 720px; }
/* Nhãn nhỏ một hàng riêng, tiêu đề bên trái và link ngắn bên phải cùng một hàng ở mọi khổ.
   Kiểu flex cũ canh link theo đáy cả khối chữ: khối có đoạn dẫn thì link đứng ngang đoạn dẫn, khung hẹp thì link rơi xuống dưới tiêu đề.
   display: contents cho nhãn, tiêu đề, đoạn dẫn thành ô trực tiếp của lưới đầu khối mà không phải đổi mã HTML. */
.tt-head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 14px; align-items: center; }
.tt-head--split > .tt-head__main { display: contents; }
.tt-head--split .tt-eyebrow { grid-column: 1 / -1; grid-row: 1; }
.tt-head--split .tt-head__main > h2 { grid-column: 1; grid-row: 2; }
.tt-head--split > .tt-link-arrow { grid-column: 2; grid-row: 2; justify-self: end; white-space: nowrap; }
.tt-head--split .tt-head__main > :not(.tt-eyebrow):not(h2) { grid-column: 1 / -1; max-width: 640px; }
@media (max-width: 959px) {
	.tt-head--split { column-gap: 12px; }
}

.tt-eyebrow {
	font-size: 13px;
	font-weight: 600;
	color: var(--tt-blue);
	letter-spacing: .1em;
	text-transform: uppercase;
}
.tt-section--navy .tt-eyebrow { color: var(--tt-cyan); }

.tt-h2 { font-size: clamp(28px, 3.4vw, 42px); }
.tt-h3 { font-size: clamp(26px, 3vw, 36px); }
/* Điện thoại: tiêu đề khối nhỏ lại để tiêu đề và link "Xem tất cả" đứng chung một hàng mà không bị ép thêm dòng; h3 nhỏ hơn h2 để giữ thứ bậc. */
@media (max-width: 560px) {
	.tt-h2 { font-size: 24px; }
	.tt-h3 { font-size: 22px; }
}
.tt-lead { font-size: 16px; line-height: 1.6; color: var(--tt-text); }
.tt-section--navy .tt-lead { color: #B9C7E0; }

/* Mọi lưới tự chia cột dùng min(Npx, 100%): màn hẹp hơn N thì cột co theo khung, không tràn ra rồi bị khung cắt chữ. */
.tt-grid { display: grid; gap: 24px; }
.tt-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.tt-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.tt-grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }

/* ---------------------------------------------------------------- nút bấm */

.tt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px;
	padding: 10px 20px;
	border: 1px solid transparent;
	border-radius: var(--tt-r-sm);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .18s, border-color .18s, color .18s, box-shadow .18s;
}
.tt-btn:active { transform: translateY(1px); }
.tt-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.tt-btn--primary { background: var(--tt-blue); color: #fff; box-shadow: 0 6px 16px rgba(11, 92, 255, .28); }
.tt-btn--primary:hover { background: var(--tt-blue-dark); color: #fff; }

.tt-btn--ghost { background: #fff; color: var(--tt-navy); border-color: var(--tt-line-2); }
.tt-btn--ghost:hover { border-color: var(--tt-blue); color: var(--tt-blue); }

.tt-btn--soft { background: var(--tt-bg-blue); color: var(--tt-blue); }
.tt-btn--soft:hover { background: #DCE7FF; color: var(--tt-blue-dark); }

.tt-btn--light { background: #fff; color: var(--tt-navy); }
.tt-btn--light:hover { background: var(--tt-bg-blue); color: var(--tt-navy); }

.tt-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.tt-btn--outline-light:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .12); }

.tt-btn--lg { min-height: 48px; padding: 12px 24px; font-size: 16px; }
.tt-btn--block { width: 100%; }

.tt-link-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 600; }

/* ------------------------------------------------------- đầu trang, menu */

.tt-promo {
	background: var(--tt-navy);
	color: #fff;
	font-size: 14px;
	text-align: center;
	padding: 10px 16px;
	letter-spacing: .01em;
}
.tt-promo__text--copy { display: none; }
/* Điện thoại: một hàng chữ chạy thay vì xuống hai dòng. Hai bản chữ nối đuôi, trượt đúng -50% là quay về vị trí đầu nên vòng lặp không bị giật.
   Chạm hoặc rê chuột thì dừng để đọc được. */
@media (max-width: 640px) {
	.tt-promo { padding-inline: 0; overflow: hidden; text-align: left; white-space: nowrap; }
	.tt-promo__track { display: flex; width: max-content; animation: tt-promo-run 18s linear infinite; }
	.tt-promo:hover .tt-promo__track, .tt-promo:active .tt-promo__track { animation-play-state: paused; }
	.tt-promo__text, .tt-promo__text--copy { display: block; padding-inline: 16px 48px; }
}
@keyframes tt-promo-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
	.tt-promo__track { animation: none; width: auto; }
	.tt-promo__text { overflow: hidden; text-overflow: ellipsis; }
	.tt-promo__text--copy { display: none; }
}

.tt-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--tt-line);
}

.tt-header__bar {
	max-width: var(--tt-wrap);
	margin: 0 auto;
	padding-inline: var(--tt-pad);
	min-height: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.tt-logo, .tt-footer__logo { display: inline-flex; align-items: center; min-height: 44px; }
.tt-logo img { height: 38px; width: auto; }
.tt-footer__logo img { height: 34px; width: auto; }

.tt-nav__list,
.tt-mobile-nav__list { list-style: none; }

.tt-nav__list {
	display: flex;
	gap: 24px;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}
.tt-nav__list a { color: var(--tt-navy); padding-block: 12px; display: inline-block; }
.tt-nav__list a:hover { color: var(--tt-blue); }
.tt-nav__list .current-menu-item > a,
.tt-nav__list .current_page_item > a {
	color: var(--tt-blue);
	box-shadow: inset 0 -2px 0 var(--tt-blue);
}

.tt-header__actions { display: flex; gap: 10px; align-items: center; }

.tt-menu-btn {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	flex: none;
	border-radius: var(--tt-r-sm);
	border: 1px solid var(--tt-line-2);
	background: #fff;
	color: var(--tt-navy);
	cursor: pointer;
}
.tt-menu-btn__close { display: none; }
.tt-menu-btn[aria-expanded="true"] .tt-menu-btn__open { display: none; }
.tt-menu-btn[aria-expanded="true"] .tt-menu-btn__close { display: block; }

.tt-mobile-nav {
	border-top: 1px solid var(--tt-line);
	background: #fff;
	padding: 8px var(--tt-pad) 16px;
	max-height: calc(100vh - 72px);
	overflow-y: auto;
}
.tt-mobile-nav__list { display: flex; flex-direction: column; }
.tt-mobile-nav__list a,
.tt-mobile-nav__call {
	display: block;
	font-size: 16px;
	font-weight: 500;
	padding: 14px 0;
	border-bottom: 1px solid var(--tt-line-3);
	color: var(--tt-navy);
}
.tt-mobile-nav__call { color: var(--tt-blue); font-weight: 600; border-bottom: 0; }

/* ------------------------------------------------------------- mở đầu */

.tt-hero { position: relative; overflow: hidden; background: #fff; container-type: inline-size; }

.tt-hero__bg {
	position: relative;
	width: 100%;
	aspect-ratio: 1672 / 720;
	min-height: max-content;
	background: linear-gradient(90deg, #FFFFFF 0%, #FBFDFF 100%);
}
/* Ảnh loa nằm ở lớp riêng để lơ lửng bằng transform mà không kéo theo chữ; nhích nền bằng background-position thì trình duyệt phải vẽ lại cả khối mỗi khung hình. */
.tt-hero__bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/hero-devices.webp") right -6cqw / 80% auto no-repeat;
	animation: tt-float 7s ease-in-out infinite;
	pointer-events: none;
}
@keyframes tt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.tt-hero__copy {
	z-index: 1;
	position: absolute;
	left: 5cqw;
	top: 4cqw;
	width: 38cqw;
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 1.5cqw, 28px);
}

.tt-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	background: #fff;
	border: 1px solid var(--tt-line-2);
	border-radius: var(--tt-r-pill);
	padding: 6px 14px 6px 6px;
	font-size: clamp(13px, .8cqw, 14px);
	font-weight: 500;
	line-height: 1.4;
	max-width: 100%;
	flex-wrap: wrap;
}
.tt-hero__badge b {
	background: var(--tt-cyan);
	color: var(--tt-navy);
	border-radius: var(--tt-r-pill);
	padding: 2px 8px;
	font-size: clamp(11px, .65cqw, 12px);
	font-weight: 700;
	letter-spacing: .04em;
}

.tt-hero__title { font-size: clamp(34px, 4cqw, 62px); line-height: 1.06; }
.tt-hero__title span { color: var(--tt-blue); }
.tt-hero__text { font-size: clamp(15px, 1.05cqw, 18px); line-height: 1.6; color: var(--tt-text); max-width: 60ch; }
.tt-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.tt-hero__cta .tt-btn { font-size: clamp(15px, .95cqw, 17px); }

.tt-hero__stats { display: flex; gap: clamp(20px, 1.8cqw, 32px); flex-wrap: wrap; padding-top: 4px; }
.tt-hero__stats b { display: block; font-size: clamp(20px, 1.4cqw, 24px); font-weight: 700; }
.tt-hero__stats span { font-size: clamp(13px, .8cqw, 14px); color: var(--tt-text-2); }

/* --------------------------------------------------------- dải ngân hàng */

.tt-banks { border-block: 1px solid var(--tt-line-3); background: #fff; }
.tt-banks__inner {
	max-width: var(--tt-wrap);
	margin: 0 auto;
	padding: 24px var(--tt-pad);
	display: flex;
	align-items: center;
	gap: 32px;
}
.tt-banks__label {
	flex: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--tt-text-2);
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}
.tt-banks__track {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tt-banks__row { display: flex; width: max-content; animation: tt-marquee 46s linear infinite; }
.tt-banks__row span {
	font-size: 16px;
	font-weight: 700;
	color: var(--tt-text-2);
	letter-spacing: -.01em;
	white-space: nowrap;
	padding-inline: 24px;
}
@keyframes tt-marquee { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ------------------------------------------------------------- ba bước */

.tt-step {
	position: relative;
	background: var(--tt-bg-soft);
	border: 1px solid var(--tt-line);
	border-radius: var(--tt-r-md);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.tt-step__n { font-size: 48px; font-weight: 800; line-height: 1; color: var(--tt-blue); opacity: .18; letter-spacing: -.04em; }
.tt-step h3 { font-size: 20px; font-weight: 600; }
.tt-step p { font-size: 15px; line-height: 1.6; color: var(--tt-text); }

/* ----------------------------------------------------------- nghe thử */

.tt-demo__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 48px;
	align-items: center;
}
.tt-demo__copy { display: flex; flex-direction: column; gap: 16px; }
.tt-demo__copy h2 { color: #fff; }

.tt-voices { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.tt-voice {
	font-size: 14px;
	font-weight: 500;
	padding: 11px 18px;
	min-height: 44px;
	border-radius: var(--tt-r-pill);
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, .35);
	background: transparent;
	color: #fff;
	transition: background-color .18s, border-color .18s;
}
.tt-voice:hover { background: rgba(255, 255, 255, .14); }
.tt-voice[aria-pressed="true"] { border-color: var(--tt-cyan); background: rgba(0, 209, 193, .15); }

.tt-player {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--tt-r-md);
	padding: clamp(18px, 3vw, 28px);
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.tt-player__top { display: flex; align-items: center; gap: 16px; }
.tt-player__btn {
	width: 56px; height: 56px; flex: none;
	border-radius: 50%;
	background: var(--tt-blue);
	border: none;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 20px rgba(11, 92, 255, .4);
}
.tt-player__btn:hover { background: var(--tt-blue-dark); }
.tt-player__btn .tt-pause { display: none; }
.tt-player__btn[aria-pressed="true"] .tt-play { display: none; }
.tt-player__btn[aria-pressed="true"] .tt-pause { display: block; }
.tt-player__meta { flex: 1; min-width: 0; }
.tt-player__title { font-size: 15px; font-weight: 600; }
.tt-player__sub { font-size: 13px; color: #B9C7E0; }

.tt-wave { height: 64px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.tt-wave span {
	width: 4px;
	border-radius: 2px;
	background: var(--tt-sky);
	display: inline-block;
	transform-origin: center;
	transform: scaleY(.35);
	animation: tt-bar-idle 2.6s ease-in-out infinite;
}
.tt-wave--on span { animation: tt-bar 1.3s ease-in-out infinite; }
@keyframes tt-bar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
/* Lúc chưa bấm phát, sóng dao động nhỏ để khối trông như đang sẵn sàng; bấm phát thì chuyển sang biên độ đầy. */
@keyframes tt-bar-idle { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(.6); } }

.tt-player__quote {
	background: rgba(255, 255, 255, .08);
	border-radius: var(--tt-r-sm);
	padding: 14px 16px;
	font-size: 15px;
	line-height: 1.5;
	font-style: italic;
}

/* -------------------------------------------------------- thẻ thiết bị */

.tt-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--tt-line);
	border-radius: var(--tt-r-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--tt-shadow-1);
	transition: box-shadow .18s, transform .18s, border-color .18s;
}
.tt-card:hover { box-shadow: var(--tt-shadow-2); transform: translateY(-3px); border-color: #CFDCF5; }
.tt-card--featured { box-shadow: var(--tt-shadow-3); border-color: #C9D9FF; }

/* Nền trắng để ảnh sản phẩm nền trắng liền với khung; khung giữ chỗ tự có nền nhạt riêng.
   Khung 16:10 thấp hơn 4:3 cho thẻ gọn, gần chiều cao 212px của bản thiết kế ở khổ máy tính. */
.tt-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: #fff;
	border-bottom: 1px solid var(--tt-line-3);
}
.tt-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tt-card__cat { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tt-label); }
.tt-card__title { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.tt-card__title a { color: inherit; }
.tt-card__title a:hover { color: var(--tt-blue); }
.tt-card__foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 6px; container-type: inline-size; }
.tt-card__actions { display: flex; gap: 10px; }
/* Lề ngang 16px theo bản thiết kế thẻ; với 20px hai nút không vừa thẻ 309px ở khổ 1024. */
.tt-card__actions .tt-btn { flex: 1; padding-inline: 16px; }
/* Hai nút cần tối thiểu khoảng 256px; thẻ hẹp hơn thì xếp dọc thay vì để nút tràn và bị cắt. */
@container (max-width: 255px) {
	.tt-card__actions { flex-direction: column; }
}

.tt-badge {
	position: absolute;
	top: 16px; left: 16px;
	background: var(--tt-blue);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	padding: 6px 10px;
	border-radius: var(--tt-r-pill);
	z-index: 1;
}

.tt-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.tt-card__body .tt-chips { flex-wrap: nowrap; gap: 6px; }
.tt-card__body .tt-chip { min-width: 0; padding-inline: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-chip {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 500;
	color: var(--tt-text);
	background: var(--tt-bg-soft);
	border: 1px solid var(--tt-line);
	border-radius: var(--tt-r-pill);
	padding: 5px 12px;
	min-height: 32px;
}
a.tt-chip:hover { border-color: var(--tt-blue); color: var(--tt-blue); }

.tt-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tt-price__now { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.tt-price__note { font-size: 13px; color: var(--tt-text-2); }
.tt-price__fee { font-size: 13px; color: var(--tt-text-2); }
.tt-price__fee b { color: var(--tt-navy); font-weight: 600; }

.tt-thumb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.tt-thumb__img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.tt-card__media .tt-thumb__img { object-fit: contain; }
.tt-thumb__empty {
	color: #8FA6CC;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 100%;
	padding: 16px;
	text-align: center;
	background: linear-gradient(150deg, #F6F9FF 0%, #EAF1FF 100%);
}
.tt-thumb__label {
	font-size: 13px;
	font-weight: 600;
	color: #7286A6;
	line-height: 1.35;
	max-width: 88%;
}

/* ------------------------------------------------------ loại hình, tiêu chí */

.tt-biz {
	background: #fff;
	border: 1px solid var(--tt-line);
	border-radius: var(--tt-r-md);
	padding: 22px;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	box-shadow: var(--tt-shadow-1);
}
.tt-biz__icon {
	width: 40px; height: 40px; flex: none;
	border-radius: var(--tt-r-sm);
	background: var(--tt-bg-blue);
	color: var(--tt-blue);
	display: flex;
	align-items: center;
	justify-content: center;
}
.tt-biz h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.tt-biz p { font-size: 14.5px; line-height: 1.55; color: var(--tt-text); }

.tt-feature {
	background: #fff;
	border: 1px solid var(--tt-line);
	border-radius: var(--tt-r-md);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-shadow: var(--tt-shadow-1);
}
.tt-feature__icon {
	width: 44px; height: 44px;
	border-radius: var(--tt-r-sm);
	background: linear-gradient(135deg, var(--tt-blue), #2B8CFF);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tt-feature h3 { font-size: 17px; font-weight: 600; }
.tt-feature p { font-size: 15px; line-height: 1.6; color: var(--tt-text); }

/* --------------------------------------------------------- bảng so sánh */

.tt-swipe { display: none; font-size: 13px; color: var(--tt-text-2); margin-bottom: 12px; }

.tt-table-wrap {
	position: relative;
	overflow-x: auto;
	background: #fff;
	border: 1px solid var(--tt-rule);
	border-radius: var(--tt-r-md);
	box-shadow: var(--tt-shadow-1);
	-webkit-overflow-scrolling: touch;
}
.tt-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.tt-table thead tr { background: var(--tt-bg-soft); border-bottom: 2px solid var(--tt-rule); }
.tt-table th {
	text-align: left;
	padding: 16px 20px;
	font-weight: 600;
	color: var(--tt-navy);
	vertical-align: bottom;
}
.tt-table thead th:first-child {
	font-weight: 500;
	color: var(--tt-text-2);
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.tt-table td { padding: 16px 20px; color: var(--tt-navy); vertical-align: top; }
.tt-table tbody tr { border-top: 1px solid var(--tt-rule); }
.tt-table tbody tr:hover { background: var(--tt-bg-soft); }
.tt-table__name { font-weight: 600; }
.tt-table__name a { color: var(--tt-navy); }
.tt-table__name a:hover { color: var(--tt-blue); }
.tt-table__brand { display: block; font-size: 13px; font-weight: 400; color: var(--tt-text-2); margin-top: 2px; }

/* ------------------------------------------------------------- số liệu */

.tt-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 20px;
	border-block: 1px solid var(--tt-line);
	padding-block: 36px;
}
.tt-stat b { display: block; font-size: 40px; font-weight: 700; letter-spacing: -.03em; color: var(--tt-blue); line-height: 1; }
.tt-stat span { font-size: 14px; color: var(--tt-text); }

/* -------------------------------------------------------- gợi ý nhu cầu */

.tt-pick {
	background: #fff;
	border: 1px solid var(--tt-line);
	box-shadow: var(--tt-shadow-1);
	border-radius: var(--tt-r-md);
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.tt-pick__icon {
	width: 44px; height: 44px;
	border-radius: var(--tt-r-sm);
	background: var(--tt-bg-blue);
	color: var(--tt-blue);
	display: flex;
	align-items: center;
	justify-content: center;
}
.tt-pick h3 { font-size: 18px; font-weight: 600; }
.tt-pick p { font-size: 15px; line-height: 1.6; color: var(--tt-text); }
.tt-pick p.tt-pick__tip {
	margin-top: auto;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--tt-blue);
	background: var(--tt-bg-blue);
	border-radius: var(--tt-r-sm);
	padding: 10px 14px;
}

/* ------------------------------------------------------------ chi phí */

.tt-plan {
	border-radius: var(--tt-r-md);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	background: #fff;
	border: 1px solid var(--tt-line);
	color: var(--tt-navy);
}
.tt-plan--featured { background: var(--tt-navy); color: #fff; border-color: var(--tt-navy); box-shadow: var(--tt-shadow-3); }
.tt-plan__name { font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.tt-plan__price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.tt-plan__price b { font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; letter-spacing: -.03em; }
.tt-plan__price span { font-size: 14px; opacity: .7; }
.tt-plan__desc { font-size: 14px; line-height: 1.55; opacity: .85; }
.tt-plan__list { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.tt-plan__list li { display: flex; gap: 10px; align-items: flex-start; }
.tt-plan__list li::before {
	content: "";
	flex: none;
	margin-top: 6px;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: currentColor;
	opacity: .35;
}
/* Nhãn nút gói khá dài; cho xuống dòng trong nút, không thì chữ tràn ra ngoài khi thẻ hẹp. */
.tt-plan .tt-btn { margin-top: auto; white-space: normal; text-align: center; }

/* --------------------------------------------------------------- hỏi đáp */

.tt-faq__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 48px; }
.tt-faq__intro { display: flex; flex-direction: column; gap: 14px; max-width: 400px; }
.tt-faq__list { border-top: 1px solid var(--tt-line); }
.tt-faq__item { border-bottom: 1px solid var(--tt-line); }
.tt-faq__q {
	width: 100%;
	background: none;
	border: none;
	text-align: left;
	padding: 20px 0;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: center;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	color: var(--tt-navy);
	min-height: 56px;
}
.tt-faq__q:hover { color: var(--tt-blue); }
.tt-faq__sign {
	flex: none;
	width: 28px; height: 28px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--tt-bg-blue);
	color: var(--tt-blue);
	transition: transform .2s, background-color .2s, color .2s;
}
.tt-faq__q[aria-expanded="true"] .tt-faq__sign { transform: rotate(45deg); background: var(--tt-blue); color: #fff; }
.tt-faq__a { padding: 0 40px 20px 0; font-size: 15px; line-height: 1.65; color: var(--tt-text); }

/* --------------------------------------------------------- khối tư vấn */

.tt-cta-wrap { background: #fff; padding: 0 var(--tt-pad) var(--tt-section); }
.tt-cta {
	max-width: var(--tt-wrap);
	margin: 0 auto;
	border-radius: 28px;
	background: linear-gradient(135deg, var(--tt-blue) 0%, var(--tt-blue) 52%, var(--tt-sky) 80%, var(--tt-cyan) 100%);
	color: #fff;
	padding: clamp(40px, 6vw, 72px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 40px;
	align-items: center;
	position: relative;
	overflow: hidden;
}
.tt-cta::after {
	content: "";
	position: absolute;
	right: -80px; bottom: -120px;
	width: 360px; height: 360px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
}
.tt-cta__copy { display: flex; flex-direction: column; gap: 16px; position: relative; z-index: 1; }
.tt-cta__copy h2 { color: #fff; }
.tt-cta__copy p { font-size: 16px; line-height: 1.6; opacity: .92; max-width: 480px; }
.tt-cta__eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.tt-cta__btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

/* ---------------------------------------------------------------- form */

.tt-form {
	position: relative;
	z-index: 1;
	background: #fff;
	border-radius: var(--tt-r-md);
	padding: clamp(20px, 3vw, 28px);
	display: flex;
	flex-direction: column;
	gap: 16px;
	color: var(--tt-navy);
	box-shadow: var(--tt-shadow-3);
}
.tt-form__title { font-size: 18px; font-weight: 700; }
.tt-form__sub { font-size: 14px; color: var(--tt-text-2); margin-top: -8px; }

.tt-field__req { color: var(--tt-err); }
.tt-field__opt { font-weight: 400; color: var(--tt-text-2); }

.tt-input, .tt-textarea {
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	padding: 12px 16px;
	min-height: 48px;
	border-radius: var(--tt-r-sm);
	border: 1px solid var(--tt-line-2);
	outline: none;
	color: var(--tt-navy);
	background: #fff;
	width: 100%;
}
.tt-textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.tt-input:focus, .tt-textarea:focus { border-color: var(--tt-blue); box-shadow: 0 0 0 3px rgba(11, 92, 255, .15); }
.tt-input::placeholder, .tt-textarea::placeholder { color: #7E8BA3; }
.tt-input[aria-invalid="true"], .tt-textarea[aria-invalid="true"] { border-color: var(--tt-err); }

/* Ô nhập viền: nhãn nằm trong ô khi trống, nhích lên đè viền khi bấm vào hoặc đã điền. */
.tt-fld-wrap { display: flex; flex-direction: column; gap: 6px; }

.tt-fld {
	position: relative;
	display: block;
	background: var(--tt-bg-soft);
	border: 1px solid var(--tt-line-2);
	border-radius: var(--tt-r-sm);
	cursor: text;
	transition: background-color .16s, border-color .16s, box-shadow .16s;
}
.tt-fld:hover { border-color: var(--tt-line-2); }

.tt-fld__input {
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 14px 16px;
	border: 0;
	border-radius: inherit;
	background: transparent;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	color: var(--tt-navy);
	outline: none;
}
.tt-fld__input--area { min-height: 96px; resize: vertical; font-weight: 400; line-height: 1.55; }

.tt-fld__label {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	padding: 0 4px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--tt-text-2);
	pointer-events: none;
	white-space: nowrap;
	max-width: calc(100% - 28px);
	overflow: hidden;
	text-overflow: ellipsis;
	transition: top .15s, font-size .15s, color .15s, transform .15s;
}
.tt-fld--area .tt-fld__label { top: 24px; transform: none; }
.tt-fld__req { color: var(--tt-err); }

/* Nhãn nhích lên nằm trên đường viền, nền nhãn khớp nền thẻ chứa form. */
.tt-fld__input:focus + .tt-fld__label,
.tt-fld__input:not(:placeholder-shown) + .tt-fld__label {
	top: 0;
	transform: translateY(-50%);
	font-size: 12px;
	font-weight: 700;
	color: var(--tt-blue);
	background: #fff;
}

/* Gợi ý mẫu chỉ hiện sau khi nhãn đã nhích lên, nếu không hai chữ chồng nhau. */
.tt-fld__input:not(:focus)::placeholder { color: transparent; }
.tt-fld__input::placeholder { color: #7E8BA3; font-weight: 400; }

.tt-fld:focus-within {
	background: #fff;
	border-color: var(--tt-blue);
	box-shadow: 0 0 0 3px rgba(11, 92, 255, .15);
}

.tt-fld:has([aria-invalid="true"]) { border-color: var(--tt-err); background: #FEF6F5; }
.tt-fld:has([aria-invalid="true"]):focus-within { background: #fff; box-shadow: 0 0 0 3px rgba(217, 45, 32, .14); }
.tt-fld:has([aria-invalid="true"]) .tt-fld__input:focus + .tt-fld__label,
.tt-fld:has([aria-invalid="true"]) .tt-fld__input:not(:placeholder-shown) + .tt-fld__label { color: var(--tt-err); }

.tt-error { font-size: 13px; font-weight: 500; color: var(--tt-err); }
.tt-hint { font-size: 13px; font-weight: 400; color: var(--tt-text-2); }

.tt-hp {
	position: absolute;
	left: 0; top: 0;
	width: 1px; height: 1px;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
}

.tt-form__done {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	padding: 24px 0;
}
.tt-form__tick {
	width: 56px; height: 56px;
	border-radius: 50%;
	background: var(--tt-ok-bg);
	color: var(--tt-ok-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.tt-form__done strong { font-size: 18px; }
.tt-form__done p { font-size: 15px; line-height: 1.6; color: var(--tt-text); }

/* ------------------------------------------------------------ đường dẫn */

.tt-crumbs {
	display: flex;
	gap: 8px;
	font-size: 13px;
	color: var(--tt-text-2);
	flex-wrap: wrap;
	margin-bottom: 20px;
	align-items: center;
}
.tt-crumbs a { color: var(--tt-text-2); display: inline-flex; align-items: center; min-height: 32px; }
.tt-crumbs a:hover { color: var(--tt-blue); }
.tt-crumbs__current { color: var(--tt-blue); font-weight: 600; }

/* ------------------------------------------------------- trang danh sách */

.tt-page-head { background: var(--tt-bg-soft); border-bottom: 1px solid var(--tt-line); }
.tt-page-head__inner { padding: 36px var(--tt-pad) 44px; max-width: var(--tt-wrap); margin: 0 auto; }
.tt-page-head__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.tt-page-head__copy { max-width: 660px; display: flex; flex-direction: column; gap: 14px; }
.tt-page-title { font-size: clamp(30px, 4vw, 46px); line-height: 1.1; }
.tt-page-head__lead { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.65; color: var(--tt-text); }

.tt-facts { display: grid; grid-template-columns: repeat(3, auto); gap: 28px; font-size: 13px; color: var(--tt-text-2); }
.tt-facts b { display: block; font-size: 20px; font-weight: 700; color: var(--tt-navy); }

.tt-filters {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding: 16px 0 24px;
	border-bottom: 1px solid var(--tt-line-3);
}
.tt-filters__group { display: flex; gap: 10px; flex-wrap: wrap; }
.tt-filter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 10px 16px;
	border-radius: var(--tt-r-pill);
	border: 1px solid var(--tt-line-2);
	background: #fff;
	color: var(--tt-text);
	font-size: 14px;
	font-weight: 600;
}
.tt-filter:hover { border-color: var(--tt-blue); color: var(--tt-blue); }
.tt-filter[aria-current="true"] { background: var(--tt-navy); border-color: var(--tt-navy); color: #fff; }
.tt-filter em { font-style: normal; opacity: .6; font-weight: 500; }

.tt-sort { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tt-sort__count { font-size: 14px; color: var(--tt-text-2); }
.tt-sort label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tt-text-2); }
.tt-select {
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--tt-navy);
	background: #fff;
	border: 1px solid var(--tt-line-2);
	border-radius: var(--tt-r-sm);
	padding: 10px 12px;
	min-height: 44px;
	cursor: pointer;
}

.tt-empty {
	border: 1px dashed var(--tt-line-2);
	border-radius: var(--tt-r-md);
	padding: 48px 24px;
	text-align: center;
	color: var(--tt-text);
}
.tt-empty strong { display: block; font-size: 18px; color: var(--tt-navy); margin-bottom: 6px; }

/* ------------------------------------------------------- chi tiết thiết bị */

.tt-pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: start; }

.tt-gallery { display: flex; flex-direction: column; gap: 12px; }
.tt-gallery__main {
	position: relative;
	aspect-ratio: 1;
	border-radius: 28px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--tt-line);
}
.tt-gallery__main img { width: 100%; height: 100%; object-fit: contain; padding: 24px; }
.tt-gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tt-gallery__thumb {
	aspect-ratio: 1;
	border-radius: var(--tt-r-sm);
	border: 1px solid var(--tt-line-2);
	background: #fff;
	padding: 0;
	cursor: pointer;
	overflow: hidden;
}
.tt-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.tt-gallery__thumb[aria-current="true"] { border-color: var(--tt-blue); box-shadow: 0 0 0 2px rgba(11, 92, 255, .18); }

.tt-buy { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 24px; }
.tt-buy__title { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; }
.tt-buy__desc { font-size: 16px; line-height: 1.6; color: var(--tt-text); }
.tt-buy__brandline { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--tt-text-2); flex-wrap: wrap; }

.tt-costbox {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px;
	background: var(--tt-bg-soft);
	border: 1px solid var(--tt-line);
	border-radius: var(--tt-r-md);
}
.tt-costbox__row { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.tt-costbox__row + .tt-costbox__row { padding-top: 14px; border-top: 1px solid var(--tt-line); }
/* Nhãn ngắn giữ một dòng; không thì cột giá dài ép nhãn vỡ thành từng chữ trên màn hẹp. */
.tt-costbox__label { font-size: 14px; color: var(--tt-text); white-space: nowrap; }
.tt-costbox__value { font-size: 18px; font-weight: 700; text-align: right; }
.tt-costbox__value small { display: block; font-size: 13px; font-weight: 400; color: var(--tt-text-2); margin-top: 2px; }
.tt-costbox__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tt-costbox__actions .tt-btn { flex: 1; min-width: 160px; }

.tt-highlights { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px; font-size: 14px; }
.tt-highlights li { display: flex; gap: 10px; align-items: flex-start; }
.tt-tick {
	flex: none;
	margin-top: 2px;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--tt-ok-bg);
	color: var(--tt-ok-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.tt-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; font-size: 13px; color: var(--tt-text); text-align: center; }
.tt-trust > div { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.tt-trust b { font-weight: 700; color: var(--tt-navy); }

.tt-spec-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 24px; align-items: stretch; }
.tt-spec-card { background: #fff; border: 1px solid var(--tt-line); border-radius: var(--tt-r-lg); padding: 16px; display: flex; flex-direction: column; }
.tt-spec-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; grid-auto-rows: 1fr; }
.tt-spec-cell { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 14px; background: var(--tt-bg-soft); }
.tt-spec-cell dt { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tt-label); }
.tt-spec-cell dd { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; }

.tt-side-stack { display: flex; flex-direction: column; gap: 24px; }
.tt-panel { background: #fff; border: 1px solid var(--tt-line); border-radius: var(--tt-r-lg); padding: 28px; }
.tt-panel__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.tt-panel__icon {
	width: 36px; height: 36px; flex: none;
	border-radius: var(--tt-r-sm);
	background: var(--tt-bg-blue);
	color: var(--tt-blue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.tt-panel h3 { font-size: 18px; font-weight: 700; }
.tt-panel__list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.tt-panel__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--tt-text); }

.tt-panel--navy { background: var(--tt-navy); color: #fff; border-color: var(--tt-navy); flex: 1; display: flex; flex-direction: column; justify-content: center; }
.tt-panel--navy h3 { margin-bottom: 12px; }
.tt-panel--navy p { font-size: 15px; line-height: 1.7; color: var(--tt-on-navy); }

.tt-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tt-proscons__col { background: #fff; border: 1px solid var(--tt-line); border-radius: var(--tt-r-lg); padding: 28px; }
.tt-proscons h3 { font-size: 17px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.tt-proscons ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.tt-proscons li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--tt-text); }
.tt-mark {
	flex: none; margin-top: 2px;
	width: 20px; height: 20px;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
}
.tt-mark--ok { background: var(--tt-ok-bg); color: var(--tt-ok-dark); }
.tt-mark--no { background: #FDECEA; color: #B42318; }

.tt-source {
	font-size: 13px;
	color: var(--tt-text-2);
	background: var(--tt-bg-soft);
	border: 1px solid var(--tt-line);
	border-radius: var(--tt-r-sm);
	padding: 14px 18px;
}
.tt-source a { text-decoration: underline; text-underline-offset: 2px; }

.tt-verified {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--tt-ok-dark);
	background: var(--tt-ok-bg);
	border-radius: var(--tt-r-pill);
	padding: 5px 10px;
}

/* ------------------------------------------------------------ blog */

.tt-search {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--tt-line-2);
	border-radius: var(--tt-r-sm);
	padding: 0 14px;
	min-height: 48px;
	min-width: 260px;
	color: var(--tt-text-2);
}
.tt-search input {
	border: none;
	outline: none;
	font-family: inherit;
	font-size: 16px;
	padding: 12px 0;
	width: 100%;
	min-height: 46px;
	background: none;
	color: var(--tt-navy);
}

/* Bài nổi bật là một khối nền xanh đậm, không phải thẻ trắng như các bài thường. */
.tt-featured {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 0;
	border-radius: 28px;
	overflow: hidden;
	background: var(--tt-navy);
	color: #fff;
	box-shadow: var(--tt-shadow-3);
	transition: transform .18s;
}
.tt-featured:hover { color: #fff; transform: translateY(-3px); }
.tt-featured__media { position: relative; min-height: 300px; background: #153A7A; }
.tt-featured__media .tt-thumb__img { object-fit: cover; padding: 0; }
.tt-featured__media .tt-thumb__empty { background: #153A7A; color: #6E8CC4; }
.tt-featured__media .tt-thumb__label { color: #8FA6CC; }
.tt-featured__body { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.tt-featured__meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: #B9C7E0; }
.tt-featured h2 { font-size: clamp(24px, 2.8vw, 36px); line-height: 1.15; color: #fff; }
.tt-featured p { font-size: 16px; line-height: 1.6; color: #B9C7E0; max-width: 56ch; }
.tt-featured__more { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--tt-cyan); margin-top: 4px; }

.tt-pill {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: var(--tt-cyan);
	color: var(--tt-navy);
	border-radius: var(--tt-r-pill);
	padding: 4px 10px;
}

.tt-post-card {
	background: #fff;
	border: 1px solid var(--tt-line);
	border-radius: var(--tt-r-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	color: var(--tt-navy);
	box-shadow: var(--tt-shadow-1);
	transition: box-shadow .18s, transform .18s;
}
.tt-post-card:hover { box-shadow: var(--tt-shadow-3); color: var(--tt-navy); transform: translateY(-3px); }
.tt-post-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--tt-bg-blue); }
.tt-post-card__media .tt-thumb__img { object-fit: cover; padding: 0; }
.tt-post-card__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tt-post-card__meta { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--tt-text-2); }
.tt-post-card__cat { color: var(--tt-blue); font-weight: 600; }
.tt-post-card__cat::after { content: " ·"; color: var(--tt-text-2); font-weight: 400; }
.tt-post-card h3 { font-size: 18px; font-weight: 600; line-height: 1.3; }
.tt-post-card p { font-size: 14.5px; line-height: 1.55; color: var(--tt-text); }
.tt-post-card__date { margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--tt-text-2); }

/* Bài viết: một cột hẹp căn giữa, mục lục là hộp đặt trên nội dung. */
.tt-post-head { padding-bottom: 32px; }
.tt-post-head__inner { max-width: 880px; }
.tt-post-title { font-size: clamp(30px, 4vw, 46px); line-height: 1.1; margin-bottom: 16px; }
.tt-post-lead { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.65; color: var(--tt-text); margin-bottom: 24px; }
.tt-post-cover { max-width: 1080px; margin-bottom: 48px; }

.tt-article-wrap { max-width: 760px; margin: 0 auto; padding: 48px var(--tt-pad) 96px; }

.tt-toc-box {
	background: var(--tt-bg-soft);
	border: 1px solid var(--tt-line);
	border-radius: var(--tt-r-md);
	padding: 24px 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 40px;
}
.tt-toc-box__head { font-size: 12px; font-weight: 700; color: var(--tt-text-2); letter-spacing: .1em; text-transform: uppercase; }
.tt-toc-box ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--tt-text); }
.tt-toc-box a { color: var(--tt-text); }
.tt-toc-box a:hover { color: var(--tt-blue); }
.tt-toc-box a[aria-current="true"] { color: var(--tt-blue); font-weight: 600; }

.tt-post-foot {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--tt-line-3);
}

.tt-article { max-width: 760px; }
.tt-article > * + * { margin-top: 20px; }
.tt-article p { font-size: 17px; line-height: 1.75; color: var(--tt-ink); }
.tt-article h2 { margin-top: 40px; font-size: 26px; line-height: 1.25; scroll-margin-top: 100px; }
.tt-article h3 { margin-top: 28px; font-size: 20px; }
.tt-article ul, .tt-article ol { padding-left: 22px; font-size: 17px; line-height: 1.7; color: var(--tt-ink); }
.tt-article li + li { margin-top: 6px; }
.tt-article a { text-decoration: underline; text-underline-offset: 3px; }
.tt-article img { border-radius: var(--tt-r-md); }
.tt-article blockquote {
	margin: 28px 0;
	padding: 20px 24px;
	border-left: 3px solid var(--tt-blue);
	background: var(--tt-bg-soft);
	border-radius: 0 var(--tt-r-sm) var(--tt-r-sm) 0;
	font-size: 18px;
	line-height: 1.6;
	font-style: italic;
}
.tt-article figcaption, .tt-article .wp-caption-text { font-size: 14px; color: var(--tt-text-2); margin-top: 8px; }
.tt-article table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tt-article th, .tt-article td { padding: 12px 14px; border: 1px solid var(--tt-line); text-align: left; }

.tt-cover { aspect-ratio: 21 / 9; border-radius: var(--tt-r-lg); overflow: hidden; background: var(--tt-bg-soft); position: relative; }
.tt-cover .tt-thumb__img { object-fit: cover; padding: 0; }

.tt-byline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--tt-text-2); }
.tt-avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex: none; background: var(--tt-bg-blue); }
.tt-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.tt-byline__name { font-weight: 600; color: var(--tt-navy); }

.tt-share { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tt-share__label { font-size: 12px; font-weight: 700; color: var(--tt-text-2); letter-spacing: .1em; text-transform: uppercase; }
.tt-share__row { display: flex; gap: 8px; }
.tt-share__btn {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--tt-r-sm);
	border: 1px solid var(--tt-line-2);
	background: #fff;
	color: var(--tt-navy);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
}
.tt-share__btn--wide { width: auto; padding: 0 14px; font-size: 12px; }
.tt-share__btn--text { width: auto; padding: 0 14px; font-size: 13px; font-weight: 600; }
.tt-share__btn:hover { border-color: var(--tt-blue); color: var(--tt-blue); }

.tt-authorbox {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	flex-wrap: wrap;
	background: var(--tt-bg-soft);
	border: 1px solid var(--tt-line);
	border-radius: var(--tt-r-lg);
	padding: 32px;
}
.tt-authorbox__avatar {
	width: 72px; height: 72px;
	flex: none;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(135deg, var(--tt-sky), var(--tt-cyan));
	display: block;
}
.tt-authorbox__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.tt-authorbox__body { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 8px; }
.tt-authorbox__label { font-size: 12px; font-weight: 700; color: var(--tt-label); letter-spacing: .1em; text-transform: uppercase; }
.tt-authorbox__name {
	font-size: 19px;
	font-weight: 700;
	color: var(--tt-navy);
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}
.tt-authorbox__name:hover { color: var(--tt-blue); }
.tt-authorbox p { font-size: 15px; line-height: 1.65; color: var(--tt-text); }
.tt-authorbox__links { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; font-weight: 600; }
.tt-authorbox__links a { display: inline-flex; align-items: center; min-height: 32px; }
.tt-authorbox__site { color: var(--tt-text); }
.tt-authorbox__site:hover { color: var(--tt-blue); }

.tt-endcta {
	background: var(--tt-navy);
	color: #fff;
	border-radius: var(--tt-r-lg);
	padding: 32px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}
.tt-endcta__title { font-size: 20px; font-weight: 700; line-height: 1.3; margin-bottom: 8px; }
.tt-endcta p { font-size: 15px; line-height: 1.55; color: var(--tt-on-navy); max-width: 420px; }

.tt-related { background: var(--tt-bg-soft); }
.tt-related__inner { padding-block: 72px 96px; display: flex; flex-direction: column; gap: 28px; }
.tt-related__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.tt-related__head h2 { font-size: 24px; font-weight: 700; }
.tt-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 24px; }
.tt-related-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--tt-line);
	border-radius: var(--tt-r-md);
	overflow: hidden;
	color: var(--tt-navy);
	box-shadow: var(--tt-shadow-1);
	transition: box-shadow .18s, transform .18s;
}
.tt-related-card:hover { box-shadow: var(--tt-shadow-3); color: var(--tt-navy); transform: translateY(-3px); }
.tt-related-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--tt-bg-blue); }
.tt-related-card__media .tt-thumb__img { object-fit: cover; padding: 0; }
.tt-related-card__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.tt-related-card__cat { font-size: 13px; color: var(--tt-blue); font-weight: 600; }
.tt-related-card h3 { font-size: 17px; line-height: 1.3; font-weight: 600; }
.tt-related-card__meta { font-size: 13px; color: var(--tt-text-2); }

/* Trang tác giả: hồ sơ hai cột, lưới bài ba cột cố định theo bản thiết kế. */
.tt-author-head__wrap { max-width: 1000px; margin: 0 auto; padding: 36px var(--tt-pad) 56px; }
.tt-author-head { display: grid; grid-template-columns: 132px 1fr; gap: 36px; align-items: start; }
.tt-author-head__avatar {
	width: 132px; height: 132px;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(135deg, var(--tt-sky), var(--tt-cyan));
}
.tt-author-head__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.tt-author-head__body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tt-author-head__name { display: flex; flex-direction: column; gap: 8px; }
.tt-author-head__role { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tt-blue); }
.tt-author-head__title { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; }
.tt-author-head__bio { font-size: 17px; line-height: 1.7; color: var(--tt-text); max-width: 62ch; }
.tt-author-head__actions { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.tt-author-head__stats {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
	padding-top: 12px;
	margin-top: 8px;
	border-top: 1px solid var(--tt-line);
}
.tt-author-head__stats b { display: block; font-size: 22px; font-weight: 700; line-height: 1.2; }
.tt-author-head__stats span { font-size: 14px; color: var(--tt-text-2); }

.tt-author-posts { max-width: 1180px; margin: 0 auto; padding-inline: var(--tt-pad); }
.tt-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.tt-pagination { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 48px; }
.tt-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 10px 14px;
	border-radius: var(--tt-r-sm);
	border: 1px solid var(--tt-line-2);
	color: var(--tt-navy);
	font-weight: 600;
	font-size: 14px;
}
.tt-pagination .page-numbers:hover { border-color: var(--tt-blue); color: var(--tt-blue); }
.tt-pagination .page-numbers.current { background: var(--tt-navy); border-color: var(--tt-navy); color: #fff; }
.tt-pagination .page-numbers.dots { border-color: transparent; }

/* ------------------------------------------------------------ chính sách */

.tt-policy-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }
.tt-policy { max-width: 760px; }
.tt-policy section + section { margin-top: 48px; }
.tt-policy h2 { font-size: 26px; line-height: 1.25; margin-bottom: 16px; scroll-margin-top: 100px; }
.tt-policy h3 { font-size: 17px; font-weight: 600; margin: 24px 0 8px; }
.tt-policy p { font-size: 16px; line-height: 1.7; color: var(--tt-ink); margin-bottom: 14px; }
.tt-policy ul { padding-left: 22px; font-size: 16px; line-height: 1.7; color: var(--tt-ink); margin-bottom: 14px; }
.tt-policy li + li { margin-top: 4px; }
.tt-policy a { text-decoration: underline; text-underline-offset: 3px; }

/* -------------------------------------------------------------- 404, khác */

.tt-404 { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; padding-block: 96px; }
.tt-404__code { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tt-blue); }
.tt-404__links { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; font-size: 14px; margin-top: 12px; }
.tt-404__links a { display: inline-flex; align-items: center; min-height: 36px; }

.tt-channels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tt-channel {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: #fff;
	border: 1px solid var(--tt-line);
	border-radius: var(--tt-r-md);
	padding: 22px;
	box-shadow: var(--tt-shadow-1);
	transition: border-color .18s, box-shadow .18s, transform .18s;
}
.tt-channel:hover { border-color: var(--tt-blue); box-shadow: var(--tt-shadow-2); transform: translateY(-2px); }
.tt-channel__icon {
	width: 44px; height: 44px; flex: none;
	border-radius: var(--tt-r-sm);
	background: var(--tt-bg-blue);
	color: var(--tt-blue);
	display: flex; align-items: center; justify-content: center;
}
.tt-channel__label { font-size: 13px; color: var(--tt-text-2); }
.tt-channel__value { font-size: 16px; font-weight: 600; color: var(--tt-navy); word-break: break-word; }
.tt-channel__note { font-size: 13px; color: var(--tt-text-2); }

.tt-form-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.tt-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; }
.tt-aside__card { background: var(--tt-bg-soft); border: 1px solid var(--tt-line); border-radius: var(--tt-r-md); padding: 24px; }
.tt-aside__card h2 { font-size: 17px; font-weight: 700; margin-bottom: 14px; }
.tt-aside__rows { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--tt-text); }
.tt-aside__rows > div { display: flex; justify-content: space-between; gap: 12px; }
.tt-aside__rows > .tt-aside__row-icon { justify-content: flex-start; gap: 10px; }
.tt-aside__rows > .tt-aside__row-tel { align-items: center; }
/* Số điện thoại là chữ 14px nên vùng bấm chỉ cao 22px, nới lên 44px cho dễ chạm trên điện thoại. */
.tt-aside__row-tel a { display: inline-flex; align-items: center; min-height: 44px; }
.tt-aside__rows b { font-weight: 600; color: var(--tt-navy); }
.tt-aside__links { display: flex; flex-direction: column; font-size: 14px; }
.tt-aside__links a { display: flex; align-items: center; min-height: 44px; }

.tt-map { border-radius: var(--tt-r-lg); overflow: hidden; border: 1px solid var(--tt-line); min-height: 340px; background: var(--tt-bg-soft); }
.tt-map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

.tt-timeline { display: flex; flex-direction: column; gap: 28px; }
.tt-timeline__item { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 24px; align-items: start; }
.tt-timeline__y { font-size: 15px; font-weight: 700; color: var(--tt-blue); padding-top: 2px; }
.tt-timeline h3 { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.tt-timeline p { font-size: 15px; line-height: 1.65; color: var(--tt-text); }

.tt-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }

.tt-about-story { padding-top: 0; }
.tt-about-story__media { margin: 0; }
/* Giữ tỉ lệ gốc của ảnh để không cắt mất chữ hoặc sản phẩm sát mép. */
.tt-about-story__media img { display: block; width: 100%; height: auto; border-radius: var(--tt-r-lg); }
.tt-about-story .tt-article > :first-child { margin-top: 0; }
.tt-sticky-col { position: sticky; top: 100px; }

.tt-disclosure { font-size: 13px; line-height: 1.65; color: var(--tt-text-2); }

/* ------------------------------------------------------------ chân trang */

.tt-footer { background: var(--tt-bg-soft); border-top: 1px solid var(--tt-line); color: var(--tt-navy); }
.tt-footer__grid {
	max-width: var(--tt-wrap);
	margin: 0 auto;
	padding: 56px var(--tt-pad) 32px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 40px;
}
/* Máy tính: cột thương hiệu rộng gấp rưỡi để chứa câu giới thiệu, liên hệ và mạng xã hội; khổ nhỏ hơn giữ lưới tự xuống hàng. */
@media (min-width: 961px) {
	.tt-footer__grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
}
.tt-footer__brand { display: flex; flex-direction: column; gap: 14px; }
.tt-footer__tagline { font-size: 14px; line-height: 1.6; color: var(--tt-text); max-width: 360px; }
.tt-footer__contact { list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.tt-footer__contact li { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; align-items: start; }
/* Biểu tượng 18px canh giữa dòng chữ đầu cao 32px, kể cả khi địa chỉ xuống nhiều dòng. */
.tt-footer__contact .tt-icon { color: var(--tt-blue); margin-top: 7px; }
.tt-footer__contact a, .tt-footer__contact span { display: block; padding: 5px 0; line-height: 22px; color: var(--tt-text); overflow-wrap: anywhere; }
.tt-footer__contact a:hover { color: var(--tt-blue); }
.tt-footer__social { display: flex; flex-wrap: wrap; gap: 10px; }
.tt-social {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--tt-line-2);
	background: #fff;
	color: var(--tt-navy);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color .18s, border-color .18s;
}
.tt-social:hover { color: var(--tt-blue); border-color: var(--tt-blue); }
.tt-footer__col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.tt-footer__head { font-size: 14px; font-weight: 600; margin-bottom: 4px; letter-spacing: 0; }
.tt-footer__list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.tt-footer__list a, .tt-footer__list span { color: var(--tt-text); display: inline-flex; align-items: center; min-height: 32px; }
.tt-footer__list a:hover { color: var(--tt-blue); }
.tt-footer__note { max-width: var(--tt-wrap); margin: 0 auto; padding: 0 var(--tt-pad) 24px; }
.tt-footer__bottom {
	max-width: var(--tt-wrap);
	margin: 0 auto;
	padding: 14px var(--tt-pad) 18px;
	border-top: 1px solid var(--tt-line);
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 14px;
	color: var(--tt-text-2);
}

/* ====================================================== màn hình hẹp dần */

@media (max-width: 1100px) {
	.tt-hero__bg {
		aspect-ratio: auto;
		padding-bottom: 58%;
	}
	.tt-hero__bg::before { background-size: 100% auto; background-position: center bottom; }
	.tt-hero__copy { position: relative; top: auto; left: auto; width: auto; max-width: 620px; padding: 32px var(--tt-pad) 24px; gap: 20px; }
	.tt-hero__title { font-size: clamp(34px, 5.4vw, 52px); }
	.tt-hero__text { font-size: 17px; }
	.tt-hero__badge, .tt-hero__cta .tt-btn { font-size: 15px; }
	.tt-hero__stats b { font-size: 22px; }
	.tt-hero__stats span { font-size: 14px; }
	.tt-pdp { grid-template-columns: 1fr; gap: 40px; }
	.tt-buy { position: static; }
	/* minmax(0, 1fr): cột 1fr mặc định không co nhỏ hơn bề rộng gốc của ảnh bên trong, đẩy phần chữ tràn khỏi thẻ. */
	.tt-featured { grid-template-columns: minmax(0, 1fr); }
	.tt-featured__media { min-height: 260px; aspect-ratio: 16 / 9; }
}

/* Máy tính bảng: ảnh và khối giá đứng cạnh nhau để nút Đăng ký mua nằm trong màn hình đầu, không bị ảnh vuông đẩy xuống dưới. */
@media (min-width: 700px) and (max-width: 1100px) {
	.tt-pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
}

/* Lưới ba thẻ tự xuống hàng thành 2 + 1 ở khổ máy tính bảng, thẻ thứ ba đứng lẻ; ép đủ ba cột cho gọn hàng. */
@media (min-width: 700px) and (max-width: 959px) {
	.tt-grid--3, .tt-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

@media (max-width: 1000px) {
	.tt-nav { display: none; }
	.tt-menu-btn { display: inline-flex; }
	.tt-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tt-form-grid { grid-template-columns: 1fr; gap: 32px; }
	.tt-aside { position: static; }
	.tt-policy-grid { grid-template-columns: 1fr; gap: 32px; }
	.tt-policy-toc {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
		background: var(--tt-bg-soft);
		border: 1px solid var(--tt-line);
		border-radius: var(--tt-r-md);
		padding: 18px 20px;
	}
	.tt-policy-toc ol { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
	.tt-split { grid-template-columns: 1fr; gap: 32px; }
	.tt-sticky-col { position: static; }
}

@media (max-width: 980px) {
	.tt-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
	.tt-spec-grid { grid-template-columns: 1fr; }
	.tt-proscons { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 900px) {
	.tt-timeline__item { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; }
}

@media (max-width: 768px) {
	:root { --tt-pad: 20px; --tt-section: 56px; }
	.tt-author-head { grid-template-columns: 1fr; gap: 20px; }
	.tt-author-head__avatar { width: 96px; height: 96px; }
	.tt-article-wrap { padding-top: 32px; padding-bottom: 64px; }
	.tt-toc-box { padding: 20px 22px; margin-bottom: 32px; }
	.tt-endcta { padding: 24px; }
	.tt-related__inner { padding-block: 56px 64px; }
	.tt-section--sm { padding-block: 48px; }
	.tt-head { margin-bottom: 32px; }
	.tt-swipe { display: block; }
	.tt-cta { padding: 28px 20px; border-radius: var(--tt-r-md); }
	.tt-cta-wrap { padding: 0 12px var(--tt-section); }
	.tt-hero__copy { padding: 24px var(--tt-pad) 16px; }
	.tt-demo__grid { gap: 32px; }
	.tt-filters { flex-direction: column; align-items: stretch; }
	.tt-sort { justify-content: space-between; }
	.tt-gallery__main { border-radius: var(--tt-r-md); }
	.tt-gallery__main img { padding: 16px; }
	.tt-faq__grid { gap: 28px; }
	.tt-article p, .tt-article ul, .tt-article ol { font-size: 16px; }
	.tt-article h2 { font-size: 24px; }
	.tt-article blockquote { font-size: 16.5px; padding: 16px 18px; }
	.tt-authorbox { flex-direction: column; gap: 14px; }
	.tt-footer__grid { padding: 40px var(--tt-pad) 24px; gap: 28px; }
	/* Bảng cuộn ngang trên màn hẹp: ghim cột tên máy để khi vuốt sang cột phí vẫn biết đang xem máy nào. */
	.tt-table th:first-child, .tt-table td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 var(--tt-rule); }
	.tt-table thead th:first-child { background: var(--tt-bg-soft); }
	.tt-table tbody tr:hover td:first-child { background: var(--tt-bg-soft); }
}

@media (max-width: 620px) {
	.tt-post-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.tt-header__phone { display: none; }
	.tt-promo { font-size: 13px; padding: 8px 0; }
	.tt-cover { aspect-ratio: 4 / 3; border-radius: var(--tt-r-md); }
	.tt-banks__inner { gap: 16px; flex-direction: column; align-items: flex-start; }
	.tt-banks__track { width: 100%; }
	.tt-stat b { font-size: 32px; }
	.tt-plan { padding: 28px 22px; }
	.tt-costbox__actions .tt-btn { min-width: 0; flex-basis: 100%; }
}

@media (max-width: 560px) {
	.tt-channels { grid-template-columns: 1fr; }
	/* Một cột thì mỗi ô cao theo nội dung của nó; grid-auto-rows: 1fr ép mọi ô cao bằng ô dài nhất và để trống một khoảng lớn. */
	.tt-spec-cells { grid-template-columns: 1fr; grid-auto-rows: auto; }
	.tt-stats { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
	/* Hai cột trên màn 320px chỉ còn khoảng 130px mỗi ô; chữ số co theo bề ngang để "0 – 1 triệu" không vỡ hai dòng. */
	.tt-stat b { font-size: clamp(22px, 7vw, 32px); }
	/* Chân trang: hai cột liên kết ngắn đứng cạnh nhau, giới thiệu và cột Liên hệ trải hết chiều ngang. */
	.tt-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 16px; }
	.tt-footer__brand, .tt-footer__grid > .tt-footer__col:last-child { grid-column: 1 / -1; }
	/* Ba số liệu ngắn đủ chỗ trên một hàng; hai cột thì ô thứ ba đứng lẻ ở hàng dưới. */
	.tt-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
	.tt-facts b { font-size: 18px; }
	/* Bộ lọc thành một hàng vuốt ngang thay vì xuống hai dòng. Khung cha phải nowrap: flex cột có wrap thì mỗi dòng rộng
	   bằng con rộng nhất, hàng lọc dài kéo giãn cả khung ra ngoài màn hình. */
	.tt-filters { flex-wrap: nowrap; }
	.tt-filters__group { min-width: 0; flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--tt-pad) * -1); padding: 2px var(--tt-pad); scrollbar-width: none; }
	.tt-filters__group::-webkit-scrollbar { display: none; }
	.tt-filter { flex: none; }
	/* Bảng giá: thu hẹp cột tên máy ghim bên trái để còn thấy trọn cột giá. */
	.tt-table { font-size: 14px; }
	.tt-table th, .tt-table td { padding: 12px 14px; }
	.tt-table th:first-child, .tt-table td:first-child { width: 128px; min-width: 128px; max-width: 128px; }
	.tt-trust { grid-template-columns: 1fr; text-align: left; }
	.tt-trust > div { flex-direction: row; gap: 8px; justify-content: flex-start; align-items: baseline; }
	.tt-gallery__thumbs { grid-template-columns: repeat(4, 1fr); gap: 8px; }
	.tt-header__cta { padding-inline: 14px; }
	.tt-timeline__item { grid-template-columns: 1fr; gap: 6px; }
}

/* Điện thoại: lưới có lớp tt-grid--swipe thành một hàng vuốt ngang. Thẻ rộng 82% để lộ mép thẻ kế tiếp, báo cho người xem là còn thẻ để vuốt.
   Lề âm bằng đúng lề trang để hàng chạy sát mép màn hình; padding-block chừa chỗ cho bóng thẻ không bị khung cuộn cắt. */
@media (max-width: 560px) {
	.tt-grid--swipe {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin-inline: calc(var(--tt-pad) * -1);
		padding: 4px var(--tt-pad) 12px;
		scroll-padding-inline: var(--tt-pad);
		scrollbar-width: none;
	}
	.tt-grid--swipe::-webkit-scrollbar { display: none; }
	.tt-grid--swipe > * { flex: 0 0 82%; scroll-snap-align: start; }
}

/* ------------------------------------------------------------ chuyển động
   Hiện dần khi cuộn tới: JS chỉ gắn tt-reveal cho phần tử còn nằm dưới màn hình lúc tải trang, nên nội dung đầu trang không nháy
   và JS lỗi thì không có gì bị ẩn. Xong hiệu ứng JS gỡ cả hai lớp, trả transform lại cho hiệu ứng rê chuột của thẻ. */
.tt-reveal { opacity: 0; transform: translateY(18px); }
.tt-reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
	transition-delay: var(--tt-delay, 0ms);
}

.tt-header { transition: box-shadow .2s; }
.tt-header.is-scrolled { box-shadow: 0 6px 20px rgba(15, 45, 91, .08); }

.tt-stat b, .tt-hero__stats b { font-variant-numeric: tabular-nums; }

@media (hover: hover) {
	.tt-card__media .tt-thumb__img { transition: transform .45s ease; }
	.tt-card:hover .tt-card__media .tt-thumb__img { transform: scale(1.05); }
}

/* Vệt sáng lướt qua nút mua vài giây một lần. Thẻ trong lưới lệch nhịp nhau để các nút không loé cùng lúc. */
.tt-btn--buy { position: relative; overflow: hidden; isolation: isolate; }
.tt-btn--buy::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .42) 50%, transparent 65%);
	transform: translateX(-100%);
	animation: tt-shine 5s ease-in-out infinite;
	pointer-events: none;
}
.tt-btn--soft.tt-btn--buy::after, .tt-btn--ghost.tt-btn--buy::after { display: none; }
.tt-grid > :nth-child(3n+2) .tt-btn--buy::after { animation-delay: .6s; }
.tt-grid > :nth-child(3n) .tt-btn--buy::after { animation-delay: 1.2s; }
@keyframes tt-shine { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* Trang loa trên điện thoại: nút Đăng ký mua ghim đáy màn hình. JS chỉ bật thanh khi nút trong khung giá và form tư vấn
   đều đã ra khỏi màn hình, để không có hai nút giống nhau cùng lúc. visibility trễ theo hiệu ứng để nút ẩn không nhận được Tab. */
.tt-buybar { display: none; }
@media (max-width: 699px) {
	.tt-buybar {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 30;
		padding: 10px var(--tt-pad) calc(10px + env(safe-area-inset-bottom, 0px));
		background: #fff;
		border-top: 1px solid var(--tt-line);
		box-shadow: 0 -6px 20px rgba(15, 45, 91, .08);
		transform: translateY(100%);
		visibility: hidden;
		transition: transform .25s ease, visibility 0s linear .25s;
	}
	.tt-buybar.is-on { transform: none; visibility: visible; transition: transform .25s ease; }
	/* Chừa chỗ cuối trang để thanh ghim không che dòng bản quyền. */
	.single-tt_device .tt-footer__bottom { padding-bottom: calc(18px + 68px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------- thẻ loa nằm ngang trên điện thoại
   Khối độc lập: gỡ nguyên khối này là thẻ loa trở về dạng ảnh trên, chữ dưới.
   Thân thẻ và chân thẻ dùng display: contents để các phần tử con thành ô trực tiếp của lưới thẻ: ảnh bên trái cao theo phần chữ,
   hai nút trải hết bề ngang thẻ ở hàng cuối. Nếu nút nằm trong cột chữ thì cột ảnh bên dưới bỏ trống và nút phải xếp chồng. */
@media (max-width: 699px) {
	.tt-grid:has(> .tt-card) { gap: 12px; }
	.tt-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 14px; }
	.tt-card__media { grid-row: span 4; aspect-ratio: 1 / 1; border: 1px solid var(--tt-line-3); border-radius: var(--tt-r-sm); }
	.tt-card__media .tt-thumb__img { padding: 6px; }
	.tt-card__body, .tt-card__foot { display: contents; }
	.tt-card__body > *, .tt-card__foot > div:first-child { grid-column: 2; min-width: 0; }
	.tt-card__title { font-size: 16px; margin-top: 2px; }
	/* Cột chữ chỉ rộng khoảng 170px ở màn 320px; nhãn phải xuống hàng thay vì bị cắt "Chờ tới 7 ng…". */
	.tt-card__body .tt-chips { flex-wrap: wrap; margin-top: 6px; }
	.tt-card__body .tt-chip { overflow: visible; text-overflow: clip; white-space: normal; }
	.tt-card__foot > div:first-child { margin-top: 8px; }
	.tt-card__actions { grid-column: 1 / -1; flex-direction: row; margin-top: 12px; }
	.tt-card__actions .tt-btn { padding-inline: 10px; }
	.tt-card .tt-badge { top: 4px; left: 4px; padding: 2px 6px; font-size: 11px; }
	.tt-card .tt-price__now { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}