/* ==========================================================================
   TPC theme — chuyển từ Stitch "Kinetic Performance Agency" (Tailwind) sang
   Bootstrap 5.3 + CSS tuỳ biến. Tiền tố class: tpc-
   Token lấy nguyên từ tailwind.config / DESIGN.md của Stitch.
   ========================================================================== */

:root {
	/* Màu */
	--tpc-primary: #8f4e00;          /* text-primary (nâu cam) */
	--tpc-orange: #ff9933;           /* primary-container — nút, điểm nhấn */
	--tpc-on-orange: #693800;        /* chữ trên nền cam */
	--tpc-orange-hover: #ff966e;     /* tertiary-container */
	--tpc-tertiary: #a83900;
	--tpc-primary-fixed: #ffdcc2;
	--tpc-on-primary-fixed: #2e1500;
	--tpc-primary-fixed-dim: #ffb77a;
	--tpc-tertiary-fixed: #ffdbcf;
	--tpc-surface: #fbf9f8;
	--tpc-cream: #fff7ef;
	--tpc-low: #f5f3f3;              /* surface-container-low */
	--tpc-container: #efeded;
	--tpc-high: #eae8e7;
	--tpc-highest: #e4e2e2;
	--tpc-white: #ffffff;
	--tpc-ink: #1b1c1c;              /* on-surface */
	--tpc-muted: #554336;            /* on-surface-variant */
	--tpc-secondary: #5f5e5e;
	--tpc-secondary-fixed: #e5e2e1;
	--tpc-dim: #c8c6c5;              /* secondary-fixed-dim — chữ phụ trên nền tối */
	--tpc-secondary-container: #e2dfde;
	--tpc-on-secondary-container: #636262;
	--tpc-outline-variant: #dbc2b0;
	--tpc-dark: #111111;
	--tpc-dark-2: #1e1e1e;
	--tpc-dark-line: #2e2e2e;
	--tpc-line: #e5dcd0;
	--tpc-positive: #00a86b;
	--tpc-error: #ba1a1a;

	/* Font */
	--tpc-font-head: "Outfit", system-ui, sans-serif;
	--tpc-font-body: "Questrial", system-ui, sans-serif;
	--tpc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Bo góc — theo config Stitch (lg = 4px, xl = 8px, "full" = 12px) */
	--tpc-r-sm: 2px;
	--tpc-r: 4px;
	--tpc-r-lg: 8px;
	--tpc-r-pill: 12px;
	--tpc-r-2xl: 16px;

	/* Khoảng cách */
	--tpc-xs: .25rem;
	--tpc-sm: .5rem;
	--tpc-md: 1rem;
	--tpc-lg: 1.5rem;
	--tpc-xl: 2.5rem;
	--tpc-2xl: 4rem;
	--tpc-3xl: 6rem;

	--tpc-header-h: 80px;
	--tpc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
	--tpc-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
	--tpc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
	--tpc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
	--tpc-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--tpc-header-h) + 16px); }
body.tpc {
	margin: 0;
	background: var(--tpc-surface);
	color: var(--tpc-ink);
	font-family: var(--tpc-font-body);
	font-size: 16px;
	line-height: 24px;
	-webkit-font-smoothing: antialiased;
	overscroll-behavior: none;
}
.tpc h1, .tpc h2, .tpc h3, .tpc h4, .tpc h5, .tpc h6 { font-family: var(--tpc-font-head); margin: 0; color: inherit; }
.tpc p { margin: 0; }
.tpc ul { margin: 0; padding: 0; list-style: none; }
.tpc a { color: inherit; text-decoration: none; transition: color .2s, background-color .2s, box-shadow .2s, border-color .2s; }
.tpc img { max-width: 100%; display: block; }
.tpc ::selection { background: var(--tpc-orange); color: var(--tpc-on-orange); }
.tpc-main { padding-top: var(--tpc-header-h); min-height: calc(100vh - var(--tpc-header-h)); overflow-x: clip; }
.screen-reader-text, .tpc-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

.material-symbols-outlined {
	font-size: 24px;
	line-height: 1;
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
	vertical-align: middle;
	user-select: none;
}
.tpc-ic-14 { font-size: 14px !important; }
.tpc-ic-16 { font-size: 16px !important; }
.tpc-ic-18 { font-size: 18px !important; }
.tpc-ic-20 { font-size: 20px !important; }
.tpc-ic-22 { font-size: 22px !important; }
.tpc-ic-24 { font-size: 24px !important; }
.tpc-ic-28 { font-size: 28px !important; }
.tpc-ic-32 { font-size: 32px !important; }
.tpc-ic-36 { font-size: 36px !important; }
.tpc-ic-48 { font-size: 48px !important; }

/* ---------- Layout ---------- */
.tpc-container {
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--tpc-lg);
	position: relative;
}
.tpc-container--narrow { max-width: 840px; }
@media (min-width: 768px) { .tpc-container { padding-inline: 3rem; } }
@media (min-width: 992px) { .tpc-container { padding-inline: 5rem; } }

.tpc-section { padding-block: var(--tpc-3xl); position: relative; }
.tpc-section--md { padding-block: var(--tpc-2xl); }
.tpc-section--sm { padding-block: var(--tpc-xl); }
.tpc-section--flush-top { padding-top: 0; }

.tpc-bg-surface { background: var(--tpc-surface); }
.tpc-bg-cream { background: var(--tpc-cream); }
.tpc-bg-low { background: var(--tpc-low); }
.tpc-bg-container { background: var(--tpc-container); }
.tpc-bg-high { background: var(--tpc-high); }
.tpc-bg-white { background: var(--tpc-white); }
.tpc-bg-dark { background: var(--tpc-dark); color: #fff; }
.tpc-bg-dark-2 { background: var(--tpc-dark-2); color: #fff; }
.tpc-bg-fade { background: linear-gradient(to bottom, var(--tpc-cream), var(--tpc-surface) 50%, var(--tpc-surface)); }

/* Gap / spacing bổ sung cho Bootstrap */
.tpc-gap-xs { gap: var(--tpc-xs) !important; }
.tpc-gap-sm { gap: var(--tpc-sm) !important; }
.tpc-gap-md { gap: var(--tpc-md) !important; }
.tpc-gap-lg { gap: var(--tpc-lg) !important; }
.tpc-gap-xl { gap: var(--tpc-xl) !important; }
.tpc-gap-2xl { gap: var(--tpc-2xl) !important; }
.tpc-mb-xs { margin-bottom: var(--tpc-xs) !important; }
.tpc-mb-sm { margin-bottom: var(--tpc-sm) !important; }
.tpc-mb-md { margin-bottom: var(--tpc-md) !important; }
.tpc-mb-lg { margin-bottom: var(--tpc-lg) !important; }
.tpc-mb-xl { margin-bottom: var(--tpc-xl) !important; }
.tpc-mb-2xl { margin-bottom: var(--tpc-2xl) !important; }
.tpc-mt-xs { margin-top: var(--tpc-xs) !important; }
.tpc-mt-sm { margin-top: var(--tpc-sm) !important; }
.tpc-mt-md { margin-top: var(--tpc-md) !important; }
.tpc-mt-lg { margin-top: var(--tpc-lg) !important; }
.tpc-mt-xl { margin-top: var(--tpc-xl) !important; }
.tpc-mt-2xl { margin-top: var(--tpc-2xl) !important; }
.tpc-pt-md { padding-top: var(--tpc-md) !important; }
.tpc-pt-lg { padding-top: var(--tpc-lg) !important; }
.tpc-stack > * + * { margin-top: var(--tpc-md); }
.tpc-stack-sm > * + * { margin-top: var(--tpc-sm); }
.tpc-stack-xs > * + * { margin-top: var(--tpc-xs); }
.tpc-stack-lg > * + * { margin-top: var(--tpc-lg); }
.tpc-stack-xl > * + * { margin-top: var(--tpc-xl); }
.tpc-row-gap { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
.tpc-row-gap-lg { --bs-gutter-x: 2rem; --bs-gutter-y: 2rem; }
.tpc-row-gap-sm { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
.tpc-row-gap-md { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
.tpc-mw-sm { max-width: 24rem; }
.tpc-mw-md { max-width: 28rem; }
.tpc-mw-xl { max-width: 36rem; }
.tpc-mw-2xl { max-width: 42rem; }
.tpc-mw-3xl { max-width: 48rem; }
.tpc-mw-4xl { max-width: 56rem; }
.tpc-mw-5xl { max-width: 64rem; }
.min-w-0 { min-width: 0; }

/* ---------- Typography ---------- */
.tpc-display { font-family: var(--tpc-font-head); font-weight: 800; font-size: 40px; line-height: 48px; letter-spacing: -.025em; }
.tpc-h-xl { font-family: var(--tpc-font-head); font-weight: 700; font-size: 32px; line-height: 40px; letter-spacing: -.02em; }
.tpc-h-lg { font-family: var(--tpc-font-head); font-weight: 700; font-size: 26px; line-height: 34px; letter-spacing: -.015em; }
.tpc-h-md { font-family: var(--tpc-font-head); font-weight: 600; font-size: 24px; line-height: 32px; }
.tpc-h-sm { font-family: var(--tpc-font-head); font-weight: 600; font-size: 20px; line-height: 28px; }
.tpc-body-lg { font-size: 18px; line-height: 28px; }
.tpc-body { font-size: 16px; line-height: 24px; }
.tpc-body-sm { font-size: 14px; line-height: 20px; }
.tpc-label-lg { font-family: var(--tpc-font-head); font-weight: 600; font-size: 14px; line-height: 20px; }
.tpc-label { font-family: var(--tpc-font-head); font-weight: 600; font-size: 12px; line-height: 16px; }
.tpc-eyebrow-text { font-family: var(--tpc-font-head); font-weight: 700; font-size: 12px; line-height: 16px; text-transform: uppercase; letter-spacing: .1em; }
.tpc-stat { font-family: var(--tpc-font-head); font-weight: 800; font-size: 40px; line-height: 44px; letter-spacing: -.025em; }
.tpc-stat-sm { font-family: var(--tpc-font-head); font-weight: 800; font-size: 40px; line-height: 44px; letter-spacing: -.02em; }
.tpc-mono { font-family: var(--tpc-font-mono); }
.tpc-upper { text-transform: uppercase; letter-spacing: .05em; }
.tpc-italic { font-style: italic; }
.tpc-relaxed { line-height: 1.625; }
.tpc-bold { font-weight: 700; }
.tpc-semibold { font-weight: 600; }
@media (min-width: 768px) {
	.tpc-display { font-size: 64px; line-height: 72px; }
	.tpc-h-xl { font-size: 48px; line-height: 56px; }
	.tpc-h-lg { font-size: 36px; line-height: 44px; }
	.tpc-stat { font-size: 56px; line-height: 60px; }
}
.tpc-display--tight { line-height: 1.08; }

/* Chữ tô sáng trong tiêu đề (*…*) */
.tpc-hl { color: var(--tpc-primary); }
.tpc-hl--wavy .tpc-hl { text-decoration: underline wavy var(--tpc-orange) 2px; text-underline-offset: 8px; }
.tpc-hl--orange .tpc-hl { color: var(--tpc-orange); }
.tpc-hl--italic .tpc-hl { color: var(--tpc-orange); font-style: italic; font-weight: 800; text-decoration: underline wavy rgba(143, 78, 0, .2); }
.tpc-hl--underline .tpc-hl { text-decoration: underline var(--tpc-orange) 4px; text-underline-offset: 8px; }
.tpc-hl--gradient .tpc-hl { background: linear-gradient(to right, var(--tpc-primary), var(--tpc-orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Màu chữ */
.tpc-text-ink { color: var(--tpc-ink) !important; }
.tpc-text-muted { color: var(--tpc-muted) !important; }
.tpc-text-secondary { color: var(--tpc-secondary) !important; }
.tpc-text-primary { color: var(--tpc-primary) !important; }
.tpc-text-orange { color: var(--tpc-orange) !important; }
.tpc-text-orange-dim { color: var(--tpc-primary-fixed-dim) !important; }
.tpc-text-tertiary { color: var(--tpc-tertiary) !important; }
.tpc-text-positive { color: var(--tpc-positive) !important; }
.tpc-text-error { color: var(--tpc-error) !important; }
.tpc-text-dim { color: var(--tpc-dim) !important; }
.tpc-text-light { color: var(--tpc-surface) !important; }
.tpc-text-white { color: #fff !important; }
.tpc-text-outline { color: var(--tpc-outline-variant) !important; }
/* Trên nền tối: "dark" tone đổi sang trắng */
.tpc-on-dark .tpc-text-ink { color: var(--tpc-surface) !important; }

/* ---------- Eyebrow / badge / chip ---------- */
.tpc-eyebrow { display: inline-flex; align-items: center; gap: .5rem; color: var(--tpc-primary); }
.tpc-eyebrow--light { color: var(--tpc-primary-fixed-dim); }
.tpc-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--tpc-primary); flex-shrink: 0; }
.tpc-dot--orange { background: var(--tpc-orange); }
.tpc-dot--positive { background: var(--tpc-positive); }
.tpc-dot--error { background: var(--tpc-error); }
.tpc-dot--8 { width: 8px; height: 8px; }
.tpc-dot--10 { width: 10px; height: 10px; }
.tpc-dot--12 { width: 12px; height: 12px; }

.tpc-pill {
	display: inline-flex; align-items: center; gap: var(--tpc-xs);
	padding: .25rem 1rem; border-radius: var(--tpc-r-pill);
	background: var(--tpc-cream); box-shadow: var(--tpc-shadow-sm);
}
.tpc-pill--dark { background: var(--tpc-dark-2); color: var(--tpc-primary-fixed-dim); }
.tpc-pill--grey { background: var(--tpc-container); }

.tpc-chip {
	display: inline-flex; align-items: center; gap: .375rem;
	padding: .125rem .5rem; border-radius: var(--tpc-r);
	font-family: var(--tpc-font-head); font-weight: 600; font-size: 12px; line-height: 16px;
	white-space: nowrap;
}
.tpc-chip--lg { padding: .25rem .625rem; }
.tpc-chip--positive { background: rgba(0, 168, 107, .1); color: var(--tpc-positive); }
.tpc-chip--primary { background: rgba(143, 78, 0, .2); color: var(--tpc-primary-fixed-dim); }
.tpc-chip--primary-soft { background: rgba(143, 78, 0, .1); color: var(--tpc-primary); }
.tpc-chip--grey { background: var(--tpc-container); color: var(--tpc-muted); }
.tpc-chip--highest { background: var(--tpc-highest); color: var(--tpc-muted); }
.tpc-chip--peach { background: var(--tpc-primary-fixed); color: var(--tpc-on-primary-fixed); }
.tpc-chip--salmon { background: var(--tpc-tertiary-fixed); color: #380d00; }
.tpc-chip--orange { background: var(--tpc-orange); color: var(--tpc-on-primary-fixed); }
.tpc-chip--dark { background: var(--tpc-dark); color: #fff; }
.tpc-chip--dark-glass { background: rgba(17, 17, 17, .85); color: var(--tpc-surface); backdrop-filter: blur(12px); }
.tpc-chip--elev { background: var(--tpc-dark-2); color: var(--tpc-orange); }
.tpc-chip--upper { text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Nút ---------- */
.tpc-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--tpc-xs);
	font-family: var(--tpc-font-head); font-weight: 600; font-size: 14px; line-height: 20px;
	padding: .5rem 1.5rem; border-radius: var(--tpc-r-lg); border: 0;
	cursor: pointer; text-align: center; white-space: nowrap;
	transition: background-color .2s, color .2s, box-shadow .2s, transform .2s;
}
.tpc-btn .material-symbols-outlined { font-size: 18px; transition: transform .2s; }
.tpc-btn:hover .tpc-btn__nudge { transform: translateX(4px); }
.tpc-btn--lg { padding: 1rem 2.5rem; }
.tpc-btn--md { padding: .75rem 1.5rem; }
.tpc-btn--h48 { height: 48px; padding-block: 0; }
.tpc-btn--h52 { height: 52px; padding-block: 0; }
.tpc-btn--h56 { height: 56px; padding-block: 0; }
.tpc-btn--block { width: 100%; }
.tpc-btn--orange { background: var(--tpc-orange); color: var(--tpc-on-orange) !important; box-shadow: var(--tpc-shadow-sm); }
.tpc-btn--orange:hover { background: var(--tpc-orange-hover); }
.tpc-btn--orange-strong { background: var(--tpc-orange); color: var(--tpc-on-primary-fixed) !important; box-shadow: 0 12px 32px -8px rgba(255, 153, 51, .2); }
.tpc-btn--orange-strong:hover { background: var(--tpc-tertiary); color: #fff !important; }
.tpc-btn--brown { background: var(--tpc-primary); color: #fff !important; box-shadow: var(--tpc-shadow-sm); }
.tpc-btn--brown:hover { background: var(--tpc-tertiary); }
.tpc-btn--white { background: var(--tpc-white); color: var(--tpc-ink) !important; box-shadow: var(--tpc-shadow-sm); }
.tpc-btn--white:hover { background: var(--tpc-container); }
.tpc-btn--muted { background: var(--tpc-container); color: var(--tpc-ink) !important; }
.tpc-btn--muted:hover { background: var(--tpc-high); }
.tpc-btn--high { background: var(--tpc-high); color: var(--tpc-ink) !important; box-shadow: var(--tpc-shadow-sm); }
.tpc-btn--high:hover { background: var(--tpc-highest); }
.tpc-btn--dark { background: var(--tpc-dark); color: var(--tpc-surface) !important; }
.tpc-btn--dark:hover { background: var(--tpc-ink); }
.tpc-btn--elev { background: var(--tpc-dark-2); color: var(--tpc-surface) !important; }
.tpc-btn--elev:hover { background: #303030; }
.tpc-btn--shadow { box-shadow: var(--tpc-shadow-md); }

.tpc-link {
	display: inline-flex; align-items: center; gap: .5rem;
	font-family: var(--tpc-font-head); font-weight: 600; font-size: 14px; line-height: 20px;
	color: var(--tpc-primary) !important;
}
.tpc-link:hover { color: var(--tpc-tertiary) !important; }
.tpc-link .material-symbols-outlined { font-size: 16px; transition: transform .2s; }
.tpc-link:hover .material-symbols-outlined { transform: translateX(2px); }
.tpc-link--underline:hover { text-decoration: underline; }

.tpc-icon-box {
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 40px; height: 40px; border-radius: var(--tpc-r);
	background: var(--tpc-white); color: var(--tpc-primary); box-shadow: var(--tpc-shadow-sm);
	transition: background-color .2s, color .2s;
}
.tpc-icon-box--48 { width: 48px; height: 48px; }
.tpc-icon-box--32 { width: 32px; height: 32px; }
.tpc-icon-box--36 { width: 36px; height: 36px; }
.tpc-icon-box--44 { width: 44px; height: 44px; }
.tpc-icon-box--56 { width: 56px; height: 56px; border-radius: var(--tpc-r-lg); }
.tpc-icon-box--cream { background: var(--tpc-cream); box-shadow: none; }
.tpc-icon-box--orange { background: var(--tpc-orange); color: var(--tpc-on-orange); }
.tpc-icon-box--dark { background: var(--tpc-dark-2); color: var(--tpc-dim); box-shadow: none; }
.tpc-icon-box--dark:hover { color: var(--tpc-surface); }
.tpc-icon-box--grey { background: var(--tpc-container); color: var(--tpc-ink); box-shadow: none; }
.tpc-icon-box--positive { background: rgba(0, 168, 107, .1); color: var(--tpc-positive); box-shadow: none; }
.tpc-icon-box--primary-soft { background: rgba(143, 78, 0, .1); color: var(--tpc-primary); box-shadow: none; }
.tpc-icon-box--round { border-radius: 50%; }
.tpc-card:hover .tpc-icon-box--hover,
.tpc-group:hover .tpc-icon-box--hover { background: var(--tpc-orange); color: var(--tpc-on-orange); }

/* ---------- Card ---------- */
.tpc-card {
	position: relative; border-radius: var(--tpc-r-lg); padding: var(--tpc-lg);
	background: var(--tpc-white); box-shadow: var(--tpc-shadow-sm);
	display: flex; flex-direction: column;
	transition: box-shadow .3s, background-color .2s, transform .3s;
}
.tpc-card--xl { padding: var(--tpc-xl); }
.tpc-card--md { padding: var(--tpc-md); }
.tpc-card--sm { padding: var(--tpc-sm); }
.tpc-card--flush { padding: 0; overflow: hidden; }
.tpc-card--between { justify-content: space-between; }
.tpc-card--hover:hover { box-shadow: var(--tpc-shadow-md); }
.tpc-card--hover-xl:hover { box-shadow: var(--tpc-shadow-xl); }
.tpc-card--cream { background: var(--tpc-cream); }
.tpc-card--low { background: var(--tpc-low); }
.tpc-card--surface { background: var(--tpc-surface); box-shadow: none; }
.tpc-card--container { background: var(--tpc-container); box-shadow: none; }
.tpc-card--high { background: var(--tpc-high); box-shadow: none; }
.tpc-card--dark { background: var(--tpc-dark); color: var(--tpc-surface); box-shadow: var(--tpc-shadow-xl); overflow: hidden; }
.tpc-card--dark-2 { background: var(--tpc-dark-2); color: var(--tpc-surface); }
.tpc-card--shadow-md { box-shadow: var(--tpc-shadow-md); }
.tpc-card--shadow-lg { box-shadow: var(--tpc-shadow-lg); }
.tpc-card--shadow-xl { box-shadow: var(--tpc-shadow-xl); }
.tpc-card--flat { box-shadow: none; }
.tpc-card--faded { opacity: .8; }
.tpc-card__foot { margin-top: auto; }
.tpc-divider { border-top: 1px solid rgba(229, 220, 208, .5); }
.tpc-divider--dark { border-top: 1px solid var(--tpc-dark-line); }
.tpc-quote-bar { border-left: 4px solid var(--tpc-primary); }
.tpc-lift { transform: translateY(0); }
@media (min-width: 992px) { .tpc-lift { transform: translateY(-.5rem); } }
.tpc-rounded-2xl { border-radius: var(--tpc-r-2xl) !important; }

/* Ảnh trong card */
.tpc-media { position: relative; overflow: hidden; border-radius: var(--tpc-r-lg); background: var(--tpc-container); }
.tpc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.tpc-group:hover .tpc-media--zoom img, .tpc-media--zoom:hover img { transform: scale(1.05); }
.tpc-media--h44 { height: 176px; }
.tpc-media--h48 { height: 192px; }
.tpc-media--h64 { height: 256px; }
@media (min-width: 768px) { .tpc-media--h64 { height: 288px; } }
.tpc-media--square { aspect-ratio: 1 / 1; }
.tpc-media--flat-bottom { border-radius: 0; }
.tpc-media__tag { position: absolute; top: .75rem; left: .75rem; }
.tpc-media__caption {
	position: absolute; left: .75rem; bottom: .75rem;
	display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .75rem;
	border-radius: var(--tpc-r); background: rgba(17, 17, 17, .8); backdrop-filter: blur(12px);
	color: var(--tpc-surface); font-family: var(--tpc-font-head); font-weight: 600; font-size: 12px; line-height: 16px;
}
.tpc-media__initials { position: absolute; left: .5rem; bottom: .5rem; padding: .125rem .25rem; border-radius: var(--tpc-r-sm); background: rgba(17, 17, 17, .8); backdrop-filter: blur(12px); color: var(--tpc-surface); }

/* Avatar chữ viết tắt */
.tpc-avatar {
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 44px; height: 44px; border-radius: var(--tpc-r);
	background: var(--tpc-highest); color: var(--tpc-primary);
	font-family: var(--tpc-font-head); font-weight: 600; font-size: 20px;
}
.tpc-avatar--sm { width: 32px; height: 32px; border-radius: 50%; font-size: 12px; background: var(--tpc-cream); font-weight: 700; }
.tpc-avatar--dark { background: var(--tpc-dark); color: #fff; box-shadow: var(--tpc-shadow-sm); font-weight: 700; }
.tpc-avatar-stack { display: flex; }
.tpc-avatar-stack > * {
	width: 28px; height: 28px; border-radius: 50%; margin-left: -8px;
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--tpc-font-head); font-weight: 600; font-size: 10px;
	border: 2px solid var(--tpc-surface);
}
.tpc-avatar-stack > *:first-child { margin-left: 0; }
.tpc-avatar-stack > :nth-child(1) { background: rgba(255, 153, 51, .3); }
.tpc-avatar-stack > :nth-child(2) { background: var(--tpc-tertiary-fixed); }
.tpc-avatar-stack > :nth-child(3) { background: var(--tpc-secondary-fixed); }
.tpc-avatar-stack > :nth-child(n+4) { background: var(--tpc-dark); color: #fff; }
.tpc-photo-stack { display: flex; }
.tpc-photo-stack img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: var(--tpc-shadow-sm); margin-left: -12px; border: 2px solid var(--tpc-cream); background: var(--tpc-container); }
.tpc-photo-stack img:first-child { margin-left: 0; }

/* Check list */
.tpc-checks li { display: flex; align-items: flex-start; gap: .5rem; }
.tpc-checks li + li { margin-top: .375rem; }
.tpc-checks--lg li + li { margin-top: var(--tpc-xs); }
.tpc-checks .material-symbols-outlined { color: var(--tpc-primary); font-size: 16px; margin-top: 2px; flex-shrink: 0; }
.tpc-checks--18 .material-symbols-outlined { font-size: 18px; margin-top: 1px; }

/* Ngôi sao */
.tpc-stars { display: inline-flex; color: var(--tpc-orange); }
.tpc-stars .material-symbols-outlined { font-size: 16px; font-variation-settings: "FILL" 1; }
.tpc-stars--18 .material-symbols-outlined { font-size: 18px; }

/* Đốm sáng trang trí */
.tpc-glow { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(110px); }
.tpc-glow--orange { background: rgba(255, 153, 51, .1); }
.tpc-glow--orange-20 { background: rgba(255, 153, 51, .2); }
.tpc-glow--salmon { background: rgba(255, 150, 110, .1); }
.tpc-glow--tertiary { background: rgba(168, 57, 0, .2); }
.tpc-glow--peach { background: rgba(255, 219, 207, .4); }
.tpc-z1 { position: relative; z-index: 1; }

/* Hiệu ứng */
@keyframes tpc-pulse { 50% { opacity: .5; } }
@keyframes tpc-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
.tpc-pulse { animation: tpc-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
.tpc-ping { animation: tpc-ping 1s cubic-bezier(0, 0, .2, 1) infinite; }
.tpc-ping-wrap { position: relative; display: inline-flex; width: 10px; height: 10px; }
.tpc-ping-wrap > span { position: absolute; inset: 0; border-radius: 50%; background: var(--tpc-positive); }
.tpc-ping-wrap > span:first-child { opacity: .75; animation: tpc-ping 1s cubic-bezier(0, 0, .2, 1) infinite; }

/* ==========================================================================
   Header
   ========================================================================== */
.tpc-header {
	position: fixed; inset: 0 0 auto 0; z-index: 1030;
	background: rgba(251, 249, 248, .9);
	backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
	box-shadow: 0 1px 8px rgba(0, 0, 0, .04);
}
.admin-bar .tpc-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .tpc-header { top: 46px; } }
.tpc-header__inner { height: var(--tpc-header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--tpc-lg); }
.tpc-brand { display: inline-flex; align-items: center; gap: var(--tpc-sm); flex-shrink: 0; color: var(--tpc-ink) !important; }
.tpc-brand img { height: 32px; width: auto; }
.tpc-brand__name { font-family: var(--tpc-font-head); font-weight: 600; font-size: 20px; line-height: 28px; letter-spacing: -.025em; }
.tpc-nav { display: none; align-items: center; gap: var(--tpc-lg); }
@media (min-width: 1200px) { .tpc-nav { display: flex; } }
.tpc-nav a {
	font-family: var(--tpc-font-head); font-weight: 600; font-size: 14px; line-height: 20px;
	padding: .25rem .5rem; border-radius: var(--tpc-r); color: var(--tpc-muted);
}
.tpc-nav a:hover { color: var(--tpc-ink); }
.tpc-nav a.is-active { background: var(--tpc-orange); color: var(--tpc-on-orange); }
.tpc-header__actions { display: flex; align-items: center; gap: var(--tpc-md); flex-shrink: 0; }
.tpc-header__cta { display: none; }
@media (min-width: 576px) { .tpc-header__cta { display: inline-flex; } }
.tpc-burger { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 0; border-radius: var(--tpc-r-lg); background: var(--tpc-container); color: var(--tpc-ink); }
@media (min-width: 1200px) { .tpc-burger { display: none; } }
.tpc-offcanvas { background: var(--tpc-surface); }
.tpc-offcanvas .offcanvas-body a.tpc-mnav {
	display: block; padding: .75rem 0; border-bottom: 1px solid var(--tpc-line);
	font-family: var(--tpc-font-head); font-weight: 600; font-size: 18px;
}
.tpc-offcanvas .offcanvas-body a.tpc-mnav.is-active { color: var(--tpc-primary); }

/* ==========================================================================
   Footer
   ========================================================================== */
.tpc-footer { background: var(--tpc-dark); color: #fff; padding: var(--tpc-3xl) 0 var(--tpc-2xl); }
.tpc-footer__brand { font-family: var(--tpc-font-head); font-weight: 600; font-size: 24px; line-height: 32px; letter-spacing: -.025em; color: var(--tpc-surface); }
.tpc-footer__title { font-family: var(--tpc-font-head); font-weight: 600; font-size: 14px; line-height: 20px; text-transform: uppercase; letter-spacing: .025em; color: var(--tpc-surface); }
.tpc-footer__links a, .tpc-footer__text { font-size: 14px; line-height: 20px; color: var(--tpc-dim); }
.tpc-footer__links a:hover { color: var(--tpc-surface); }
.tpc-footer__links { display: flex; flex-direction: column; gap: var(--tpc-xs); }
.tpc-footer__bottom { padding-top: var(--tpc-lg); color: var(--tpc-dim); font-size: 14px; line-height: 20px; }
.tpc-footer__bottom a:hover { color: var(--tpc-surface); }
.tpc-footer__nl { display: flex; gap: var(--tpc-xs); margin-top: var(--tpc-xs); }
.tpc-footer__nl input { height: 48px; flex: 1; max-width: 20rem; min-width: 0; padding: 0 1rem; border: 0; border-radius: var(--tpc-r); background: var(--tpc-dark-2); color: var(--tpc-surface); font-size: 14px; }
.tpc-footer__nl input:focus { outline: none; box-shadow: 0 0 0 1px var(--tpc-orange); }
.tpc-footer__nl button { height: 48px; padding: 0 1rem; border-radius: var(--tpc-r); font-size: 12px; }

/* ==========================================================================
   Form
   ========================================================================== */
.tpc-form { display: flex; flex-direction: column; gap: var(--tpc-md); }
.tpc-form--tight { gap: var(--tpc-xs); }
.tpc-form label.tpc-flabel, .tpc-flabel { display: block; margin-bottom: .25rem; font-family: var(--tpc-font-head); font-weight: 600; font-size: 12px; line-height: 16px; }
.tpc-flabel--upper { text-transform: uppercase; letter-spacing: .05em; }
.tpc-input {
	display: block; width: 100%; height: 48px; padding: 0 1rem;
	border: 0; border-radius: var(--tpc-r); font: inherit; font-size: 14px; line-height: 20px;
	background: var(--tpc-surface); color: var(--tpc-ink); box-shadow: var(--tpc-shadow-sm);
	transition: background-color .2s, box-shadow .2s;
	-webkit-appearance: none; appearance: none;
}
.tpc-input:focus { outline: none; background: var(--tpc-white); box-shadow: 0 0 0 2px var(--tpc-primary); }
.tpc-input--52 { height: 52px; font-size: 16px; }
.tpc-input--56 { height: 56px; font-size: 16px; border-radius: var(--tpc-r-lg); }
.tpc-input--low { background: var(--tpc-low); }
textarea.tpc-input { height: auto; padding: 1rem; resize: none; }
select.tpc-input { cursor: pointer; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235f5e5e'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 20px; }
.tpc-input::placeholder { color: var(--tpc-secondary); opacity: .8; }
/* Form trên nền tối */
.tpc-form--dark .tpc-flabel { color: var(--tpc-surface); }
.tpc-form--dark .tpc-input { background-color: var(--tpc-dark); color: var(--tpc-surface); box-shadow: none; }
.tpc-form--dark .tpc-input:focus { box-shadow: 0 0 0 2px var(--tpc-orange); }
.tpc-form--dark select.tpc-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c8c6c5'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); }
.tpc-form--light-on-dark .tpc-input { background-color: var(--tpc-surface); }
.tpc-form--light-on-dark .tpc-input:focus { box-shadow: 0 0 0 2px var(--tpc-orange); }

/* Ô lựa chọn radio / checkbox */
.tpc-choice {
	display: flex; align-items: center; gap: .5rem; padding: .5rem; margin: 0;
	border-radius: var(--tpc-r-sm); background: var(--tpc-dark); color: var(--tpc-dim);
	font-size: 13px; line-height: 18px; cursor: pointer;
}
.tpc-choice:hover { color: var(--tpc-surface); }
.tpc-choice input { accent-color: var(--tpc-orange); margin: 0; flex-shrink: 0; }
.tpc-choice--light { background: var(--tpc-surface); color: var(--tpc-ink); font-size: 14px; border-radius: var(--tpc-r); padding: .5rem; gap: .5rem; }
.tpc-choice--light:hover { background: var(--tpc-cream); color: var(--tpc-ink); }
.tpc-choice--light input { width: 16px; height: 16px; }
.tpc-seg { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; padding: .5rem; border-radius: var(--tpc-r); background: var(--tpc-surface); cursor: pointer; margin: 0; }
.tpc-seg:hover { background: var(--tpc-cream); }
.tpc-seg input { position: absolute; opacity: 0; pointer-events: none; }
.tpc-seg span { font-family: var(--tpc-font-head); font-weight: 600; font-size: 12px; line-height: 16px; color: var(--tpc-secondary); }
.tpc-seg:has(input:checked) { background: rgba(255, 153, 51, .2); }
.tpc-seg input:checked + span { color: var(--tpc-on-orange); font-weight: 700; }
.tpc-seg input:focus-visible + span { outline: 2px solid var(--tpc-primary); outline-offset: 2px; }

.tpc-form-alert { padding: .75rem 1rem; border-radius: var(--tpc-r); font-size: 14px; }
.tpc-form-alert--error { background: #ffdad6; color: #93000a; }
.tpc-success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--tpc-sm); padding: var(--tpc-xl) 0; }

/* ==========================================================================
   Section dùng chung
   ========================================================================== */
.tpc-head { display: flex; flex-direction: column; gap: var(--tpc-md); margin-bottom: var(--tpc-2xl); }
@media (min-width: 768px) { .tpc-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.tpc-head--center { align-items: center !important; text-align: center; flex-direction: column !important; margin-inline: auto; }

/* Biểu đồ */
.tpc-chart { width: 100%; height: 144px; display: block; }
@media (min-width: 768px) { .tpc-chart { height: 176px; } }
.tpc-legend { display: inline-block; width: 12px; height: 4px; border-radius: var(--tpc-r); }
.tpc-bars { width: 96px; height: 48px; display: flex; align-items: flex-end; gap: 6px; }
.tpc-bars span { flex: 1; border-radius: var(--tpc-r) var(--tpc-r) 0 0; background: var(--tpc-high); }
.tpc-bars span:last-child { background: var(--tpc-orange); }
.tpc-meter { display: flex; height: 8px; border-radius: var(--tpc-r-pill); overflow: hidden; background: var(--tpc-secondary-fixed); }

/* Logo khách hàng */
.tpc-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tpc-lg); opacity: .75; filter: grayscale(1); transition: filter .3s; }
.tpc-logos:hover { filter: grayscale(0); }
.tpc-logos img { max-height: 32px; width: auto; }

/* Tabs lọc (Services / Insights) */
.tpc-filter { display: flex; align-items: center; gap: var(--tpc-xs); overflow-x: auto; padding-block: var(--tpc-sm); scrollbar-width: none; }
.tpc-filter::-webkit-scrollbar { display: none; }
.tpc-filter__btn {
	flex-shrink: 0; border: 0; padding: .25rem 1rem; border-radius: var(--tpc-r);
	font-family: var(--tpc-font-head); font-weight: 600; font-size: 12px; line-height: 16px;
	background: var(--tpc-container); color: var(--tpc-ink); white-space: nowrap; cursor: pointer;
}
.tpc-filter__btn:hover { background: var(--tpc-high); }
.tpc-filter__btn.is-active { background: var(--tpc-orange); color: var(--tpc-on-orange); }
.tpc-filter--pills .tpc-filter__btn { padding: .5rem 1rem; border-radius: var(--tpc-r-pill); font-size: 14px; line-height: 20px; background: var(--tpc-white); box-shadow: var(--tpc-shadow-sm); }
.tpc-filter--pills .tpc-filter__btn:hover { background: var(--tpc-cream); color: var(--tpc-primary); }
.tpc-filter--pills .tpc-filter__btn.is-active { background: var(--tpc-dark); color: #fff; }
.tpc-is-hidden { display: none !important; }

/* FAQ accordion */
.tpc-faq { background: var(--tpc-white); border-radius: var(--tpc-r-lg); box-shadow: var(--tpc-shadow-sm); overflow: hidden; }
.tpc-faq + .tpc-faq { margin-top: var(--tpc-sm); }
.tpc-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--tpc-md); padding: var(--tpc-lg); border: 0; background: none; text-align: left; color: var(--tpc-ink); }
.tpc-faq__q .material-symbols-outlined { color: var(--tpc-primary); transition: transform .3s; }
.tpc-faq__q[aria-expanded="true"] .material-symbols-outlined { transform: rotate(180deg); }
.tpc-faq__a { padding: 0 var(--tpc-lg) var(--tpc-lg); }

/* Bảng kết quả (Case study) */
.tpc-table { border-radius: var(--tpc-r-lg); overflow: hidden; background: var(--tpc-white); box-shadow: var(--tpc-shadow-md); }
.tpc-table__row { display: grid; grid-template-columns: 5fr 3fr 4fr; align-items: center; padding: var(--tpc-sm); font-size: 14px; line-height: 20px; }
.tpc-table__row + .tpc-table__row { border-top: 1px solid var(--tpc-high); }
.tpc-table__row:nth-child(odd):not(.tpc-table__head) { background: rgba(255, 247, 239, .5); }
.tpc-table__head { background: var(--tpc-high); font-family: var(--tpc-font-head); font-weight: 600; font-size: 12px; line-height: 16px; }

/* Code block */
.tpc-code { background: var(--tpc-dark-2); color: #fff; border-radius: var(--tpc-r-lg); padding: var(--tpc-md); box-shadow: var(--tpc-shadow-md); }
.tpc-code pre { margin: 0; padding: .5rem 0; font-family: var(--tpc-font-mono); font-size: 12px; line-height: 1.625; color: var(--tpc-secondary-fixed); white-space: pre; overflow-x: auto; }
.tpc-code .k { color: var(--tpc-tertiary-fixed); }
.tpc-code .s { color: var(--tpc-positive); }
.tpc-scroll-x { overflow-x: auto; }

/* Sticky sidebar */
.tpc-sticky { position: sticky; top: 112px; }
.admin-bar .tpc-sticky { top: 144px; }

.tpc-toc a { display: block; padding: .375rem .25rem; border-radius: var(--tpc-r-sm); color: var(--tpc-muted); font-family: var(--tpc-font-head); font-weight: 600; font-size: 12px; line-height: 16px; }
.tpc-toc a:hover, .tpc-toc a.is-active { background: var(--tpc-high); color: var(--tpc-primary); }
.tpc-snap-row { display: flex; justify-content: space-between; gap: var(--tpc-sm); padding: .25rem .25rem; border-radius: var(--tpc-r-sm); background: rgba(251, 249, 248, .6); font-size: 14px; line-height: 20px; }
.tpc-snap-row + .tpc-snap-row { margin-top: var(--tpc-xs); }

/* Breadcrumb */
.tpc-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tpc-xs); color: var(--tpc-muted); font-family: var(--tpc-font-head); font-weight: 600; font-size: 12px; line-height: 16px; }
.tpc-crumb a:hover { color: var(--tpc-primary); }
.tpc-crumb .material-symbols-outlined { font-size: 14px; }

/* Ảnh hero About */
.tpc-hero-photo { position: relative; min-height: 360px; border-radius: var(--tpc-r-lg); overflow: hidden; background: var(--tpc-dark); box-shadow: var(--tpc-shadow-xl); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--tpc-xl); }
@media (min-width: 768px) { .tpc-hero-photo { min-height: 420px; } }
.tpc-hero-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; mix-blend-mode: luminosity; transition: transform .7s; }
.tpc-hero-photo:hover > img { transform: scale(1.05); }
.tpc-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--tpc-dark), rgba(17, 17, 17, .4), transparent); }
.tpc-hero-photo > .tpc-z1 { z-index: 2; }

/* Panel tối Insights featured */
.tpc-feat-panel { position: relative; min-height: 320px; background: var(--tpc-dark); padding: var(--tpc-lg); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; height: 100%; }
.tpc-feat-panel__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .4; mix-blend-mode: luminosity; }
.tpc-glass { background: rgba(30, 30, 30, .9); backdrop-filter: blur(24px); }

/* Watermark quote */
.tpc-watermark { position: absolute; right: -1rem; bottom: -2.5rem; font-family: var(--tpc-font-head); font-weight: 900; font-size: 120px; line-height: 1; color: var(--tpc-dark); opacity: .2; user-select: none; }

/* Nội dung bài viết (editor) */
.tpc-prose { font-size: 16px; line-height: 1.625; color: var(--tpc-muted); }
.tpc-prose > * + * { margin-top: var(--tpc-md); }
.tpc-prose h2 { font-family: var(--tpc-font-head); font-weight: 700; font-size: 26px; line-height: 34px; letter-spacing: -.015em; color: var(--tpc-ink); margin-top: var(--tpc-xl); scroll-margin-top: 112px; }
@media (min-width: 768px) { .tpc-prose h2 { font-size: 36px; line-height: 44px; } }
.tpc-prose h3 { font-family: var(--tpc-font-head); font-weight: 600; font-size: 20px; line-height: 28px; color: var(--tpc-ink); margin-top: var(--tpc-lg); }
.tpc-prose h4 { font-family: var(--tpc-font-head); font-weight: 600; font-size: 16px; color: var(--tpc-ink); }
.tpc-prose strong { color: var(--tpc-ink); }
.tpc-prose a { color: var(--tpc-primary); text-decoration: underline; }
.tpc-prose ul:not(.tpc-checks), .tpc-prose ol { padding-left: 1.25rem; list-style: revert; }
.tpc-prose img { border-radius: var(--tpc-r-lg); height: auto; }
.tpc-prose figure { margin: var(--tpc-lg) 0; }
.tpc-prose figcaption { font-size: 14px; color: var(--tpc-secondary); margin-top: .5rem; }
.tpc-prose blockquote { margin: var(--tpc-lg) 0; padding: var(--tpc-lg); border-radius: var(--tpc-r-lg); background: var(--tpc-cream); border-left: 4px solid var(--tpc-primary); color: var(--tpc-ink); font-style: italic; }
.tpc-prose code { background: var(--tpc-high); padding: .125rem .25rem; border-radius: var(--tpc-r-sm); font-family: var(--tpc-font-mono); font-size: 13px; color: var(--tpc-ink); }
.tpc-prose .tpc-code code { background: none; padding: 0; color: inherit; font-size: inherit; }
.tpc-prose .lead, .tpc-prose .tpc-lead { font-size: 18px; line-height: 28px; color: var(--tpc-ink); }
.tpc-prose > .tpc-section-block { margin-top: var(--tpc-xl); }
.tpc-prose .tpc-eyebrow { margin-bottom: calc(var(--tpc-md) * -.5); }
.tpc-prose .alignwide, .tpc-prose .alignfull { max-width: 100%; }

/* Pagination */
.tpc-pager { display: flex; justify-content: center; gap: var(--tpc-xs); margin-top: var(--tpc-2xl); }
.tpc-pager .page-numbers { display: inline-flex; min-width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0 .75rem; border-radius: var(--tpc-r-lg); background: var(--tpc-white); box-shadow: var(--tpc-shadow-sm); font-family: var(--tpc-font-head); font-weight: 600; font-size: 14px; }
.tpc-pager .page-numbers.current { background: var(--tpc-dark); color: #fff; }
.tpc-pager a.page-numbers:hover { background: var(--tpc-cream); color: var(--tpc-primary); }

.tpc-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tpc-line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tpc-break-all { word-break: break-all; }

/* Tooltip copy */
.tpc-copy { position: relative; border: 0; background: none; padding: 0; color: var(--tpc-muted); }
.tpc-copy:hover { color: var(--tpc-primary); }
.tpc-copy__tip { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); padding: .125rem .25rem; border-radius: var(--tpc-r-sm); background: var(--tpc-dark); color: #fff; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .2s; white-space: nowrap; }
.tpc-copy.is-copied .tpc-copy__tip { opacity: 1; }

/* Hover nhỏ lẻ */
.tpc-hover-cream { transition: background-color .2s; }
.tpc-hover-cream:hover, .tpc-int:hover { background: var(--tpc-cream); }
.tpc-meter > span { display: block; height: 100%; }
.tpc-feat-title:hover h2, .tpc-group:hover .tpc-h-sm a, .tpc-card h3 a:hover { color: var(--tpc-primary); }
.tpc-cal:hover { background: var(--tpc-orange); color: var(--tpc-on-primary-fixed) !important; }
.tpc-link-plain:hover { color: var(--tpc-primary); }
.tpc-on-dark .tpc-card:not(.tpc-card--dark):not(.tpc-card--dark-2) { color: var(--tpc-ink); }

/* Focus ring dễ thấy cho bàn phím */
.tpc a:focus-visible, .tpc button:focus-visible { outline: 2px solid var(--tpc-orange); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.tpc *, .tpc *::before, .tpc *::after { animation: none !important; transition: none !important; }
}