/* ==========================================================================
   Target Media — Sections (nối tiếp assets/css/style.css)
   Ghi chú: bản gốc Figma dùng absolute-position tuyệt đối theo khung 1440px.
   Ở đây mình chuyển sang flexbox/grid để site chạy responsive thật trên
   WordPress, vẫn giữ đúng màu sắc / typography / nội dung.
   ========================================================================== */

.tm-accent { color: var(--tm-color-brand); }

.tm-btn {
	display: inline-block;
	padding: 14px 32px;
	border-radius: 15px;
	font-family: 'UTM Avo', Arial, sans-serif;
	font-weight: 700;
	font-size: 20px;
	text-decoration: none;
	text-align: center;
}
.tm-btn--primary { background: var(--tm-color-brand); color: #fff; }
.tm-btn--outline { background: #efefef; color: var(--tm-color-text); }

/* ---- Header: menu pill + logo + contact pill ---- */
.tm-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: transparent;
	/* QUAN TRỌNG: .tm-header có z-index (50) CAO HƠN .tm-site-logo (20) —
	   cố ý, để dropdown menu (z-index 40, con của .tm-header) luôn vẽ đè
	   lên trên chữ logo khi mở ra, không bị chữ logo (mix-blend-mode) đè
	   ngược lên trên. NHƯNG .tm-header là 1 hàng full-width (space-between
	   giữa nút Menu và nút Contact), nên dù nền trong suốt, cả VÙNG GIỮA
	   trống của nó vẫn nằm cao hơn logo trong stacking context — chặn mất
	   click vào chữ "Target Media" (nằm giữa, dưới lớp này) dù nhìn thấy
	   chữ bình thường. Fix: cho .tm-header "trong suốt" luôn với click
	   (pointer-events: none), rồi bật lại pointer-events: auto CHỈ cho
	   những phần tử con thật sự cần bấm được (nút Menu, nút Contact, logo
	   ảnh custom nếu có, dropdown mobile) — nhờ vậy vùng giữa trống sẽ cho
	   click "xuyên" thẳng xuống link logo chữ bên dưới. */
	pointer-events: none;
}
.tm-header__menu-btn,
.tm-header__contact-btn,
.tm-header__logo-link,
.tm-header__nav {
	pointer-events: auto;
}
.tm-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 15px;
	padding-bottom: 15px;
	position: relative;
	z-index: 2;
}
.tm-header__contact-btn {
	background: var(--tm-color-brand);
	color: #fff;
	border: none;
	border-radius: 15px;
	padding: 10px 22px;
	font-family: 'UTM Avo', Arial, sans-serif;
	font-weight: 700;
	font-size: 20px;
	text-decoration: none;
	cursor: pointer;
}

/* Nút Menu: pill đỏ, icon tròn bên trái + chữ "Menu"; khi mở ra thì thu lại
   chỉ còn icon tròn trắng (kiểu askphill.com) */
.tm-header__menu-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--tm-color-brand);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 8px 20px 8px 8px;
	font-family: 'UTM Avo', Arial, sans-serif;
	font-weight: 700;
	font-size: 18px;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}
.tm-menu-btn__icon { display: inline-flex; align-items: center; justify-content: center; }
.tm-menu-btn__icon--close { display: none; }
.tm-header__menu-btn[aria-expanded="true"] {
	padding: 8px;
}
.tm-header__menu-btn[aria-expanded="true"] .tm-menu-btn__icon--open { display: none; }
.tm-header__menu-btn[aria-expanded="true"] .tm-menu-btn__icon--close { display: inline-flex; }
.tm-header__menu-btn[aria-expanded="true"] .tm-menu-btn__label { display: none; }

/* Dải trắng mỏng, cố định đúng bằng chiều cao header — CHỈ để làm nền
   thật cho mix-blend-mode của logo, không phủ hết cả section. Section
   nào có nền riêng (banner đỏ, footer...) sẽ tự nhiên vẽ đè lên đúng
   chỗ chúng có màu; những chỗ còn lại (nền trong suốt) sẽ thấy đúng
   dải trắng này thay vì vật thể nền chuyển động lọt qua. */
.tm-header-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 96px; /* ước lượng đủ chiều cao header trên hầu hết màn hình */
	background: #fff;
	/* z-index THẤP NHẤT có thể (0) — mọi section thật (kể cả không có
	   nền riêng) đều cần z-index >= 1 để tự động vẽ đè lên đúng chỗ
	   chúng có nội dung/màu, không bị dải này che nhầm. Xem các section
	   trong sections.css đã được thêm position:relative + z-index:1. */
	z-index: 0;
	pointer-events: none;
}
@media (max-width: 480px) {
	.tm-header-backdrop { height: 76px; }
}

/* Logo chữ "Target Media" — ĐỘC LẬP, không nằm trong .tm-header (xem
   header.php để hiểu lý do). Cố định giữa trên cùng màn hình, tự đảo
   màu theo đúng nền đang cuộn phía sau bằng mix-blend-mode thuần CSS. */
.tm-site-logo {
	position: fixed;
	z-index: 20;
	top: 30px;
	left: 50%;
	transform: translateX(-50%);
	/* LƯU Ý: đây KHÔNG phải màu logo thật — với mix-blend-mode:difference,
	   kết quả hiển thị TỪNG ĐIỂM ẢNH = |màu nền tại điểm đó - màu gốc|.
	   Để hiện ĐÚNG màu ĐỎ THƯƠNG HIỆU (#CF2429) khi phần chữ đó đang nằm
	   trên nền TRẮNG, màu gốc phải là màu "bù" của đỏ: #30DBD6
	   (255-207=48, 255-36=219, 255-41=214). Ở những điểm khác đè lên nền
	   khác màu, kết quả sẽ tự đổi theo đúng công thức difference — đây
	   chính là hiệu ứng "trộn theo từng điểm ảnh" thật sự, không phải 1
	   màu đồng nhất cho cả cụm chữ. */
	color: #30dbd6;
	mix-blend-mode: difference;
	font-family: 'UTM Avo', Arial, sans-serif;
	font-size: clamp(22px, 3vw, 34px);
	font-weight: 800;
	line-height: 0.86;
	letter-spacing: -0.03em;
	/* Ẩn trong 1 khoảnh khắc rất ngắn lúc mới tải trang — vài khung hình
	   đầu tiên, trình duyệt có thể chưa kịp thiết lập đúng lớp nền để
	   trộn màu, khiến logo bị "chớp" sai màu (xanh) trước khi ổn định.
	   Đợi 0.15s rồi mới hiện ra để né hẳn khung hình lỗi đó. */
	opacity: 0;
	animation: tm-site-logo-reveal 0.01s linear 0.15s forwards;
	white-space: nowrap;
	user-select: none;
	pointer-events: auto;
	cursor: pointer;
	text-decoration: none;
}
@media (max-width: 480px) {
	.tm-site-logo { top: 18px; font-size: clamp(18px, 5vw, 26px); }
}
@keyframes tm-site-logo-reveal {
	to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.tm-site-logo { transition: none !important; animation: none !important; opacity: 1; }
}

/* Logo ảnh (khi bạn tự upload Custom Logo qua WP Admin) — hiện bình
   thường trong header, không dùng blend mode. */
.tm-header__logo-link { display: flex; align-items: center; }

/* Dropdown: nền đỏ, bo tròn lớn, danh sách canh giữa, rê chuột mục nào thì
   mục đó thành pill trắng chữ đỏ (kiểu askphill.com) */
.tm-header__nav[hidden] { display: none; }
.tm-header__nav {
	position: absolute;
	top: calc(100% + 10px);
	left: var(--tm-container-padding, 40px);
	width: 280px;
	background: var(--tm-color-brand);
	border-radius: 28px;
	padding: 24px 14px;
	box-shadow: 0 16px 32px rgba(0,0,0,0.28);
	z-index: 40;
}

/* ---- Hero ---- */
.tm-hero {
	position: relative;
	z-index: 1;
	/* KHÔNG đặt background đục ở đây — để vật thể nền chuyển động hiện
	   xuyên qua được. Logo "Target Media" giờ có 1 dải nền trắng RIÊNG
	   (.tm-header-backdrop, cố định đúng bằng chiều cao header) lo phần
	   backdrop cho mix-blend-mode, không cần section này tự lo nữa. */
	padding: 60px 0 120px;
	text-align: center;
	overflow: hidden;
}
/* Vector nền CHÍNH của cả trang — dùng position:fixed để không bị cắt bởi
   overflow:hidden của hero hay các section phía dưới (nó cần "chạy xuyên"
   qua nhiều section theo đúng dữ liệu motion thật lấy từ Figma). JS sẽ
   tính transform theo VỊ TRÍ CUỘN của cả trang, xem main.js.
   QUAN TRỌNG: z-index phải là 0 (không phải số âm) — nếu để âm, nó sẽ bị
   chìm phía sau nền trắng đục của TỪNG section (mỗi section là 1 khối
   "flow" bình thường, luôn vẽ đè lên các phần tử z-index âm). Để 0 thì
   nó nổi lên trên nền các section, còn CHỮ/ẢNH thật trong mỗi section
   (đã được gắn position:relative + z-index:1 riêng) vẫn nổi lên trên nó. */
.tm-hero__decor {
	position: fixed;
	top: calc(-15% + 70px); /* dịch nguyên animation xuống 70px so với trước */
	left: -25%;
	width: 160%;
	max-width: 1600px;
	pointer-events: none;
	z-index: 0;
	opacity: 0.75;
	will-change: transform;
}
.tm-hero__inner {
	position: relative;
	z-index: 1;
}
.tm-hero__title {
	margin: 0 0 10px;
	font-family: 'UTM Avo', Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(40px, 7vw, 96px);
	line-height: 1;
	letter-spacing: -2px;
	position: relative;
	z-index: 1;
}
.tm-hero__title-line { display: block; color: var(--tm-color-text); }
.tm-hero__title-line--accent { color: var(--tm-color-brand); }

.tm-hero__cards {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 2;
	margin-top: 15px;
}
.tm-hero__card {
	width: 250px;
	height: 334px;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 6px 12px 2px rgba(0,0,0,0.25);
	margin: 0 -25px;
	opacity: 0;
	filter: brightness(1);
	transform: translateY(90px) scale(0.4) rotate(var(--tm-hero-rot, 0deg));
	transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease, filter 0.3s ease;
}
.tm-hero__card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.tm-hero__card:hover img { transform: scale(1.12); }

/* thứ tự bay lên: giữa trước, rồi trái, rồi phải */
.tm-hero__card--center { --tm-hero-rot: 0deg; z-index: 2; transition-delay: 0s; }
.tm-hero__card--left   { --tm-hero-rot: -20deg; z-index: 1; transition-delay: 0.18s; }
.tm-hero__card--right  { --tm-hero-rot: 20deg; z-index: 1; transition-delay: 0.36s; }

.tm-hero__cards.tm-in-view .tm-hero__card {
	opacity: 1;
	transform: translateY(0) scale(1) rotate(var(--tm-hero-rot, 0deg));
}

/* hover: sáng ảnh đang hover, mờ những ảnh còn lại
   (dùng class do JS gắn/gỡ khi mouseenter/mouseleave — chắc chắn chạy trên
   mọi trình duyệt, không phụ thuộc :has() CSS) */
.tm-hero__cards.tm-hovering .tm-hero__card { filter: brightness(0.55); }
.tm-hero__cards.tm-hovering .tm-hero__card.tm-hover-active {
	filter: brightness(1);
	z-index: 10;
}

/* ---- Logo marquee ---- */
.tm-logo-marquee {
	background: #fff;
	overflow: hidden;
	padding: 40px 0;
	position: relative;
	z-index: 1;
}
.tm-logo-marquee__track {
	display: flex;
	width: max-content;
	animation: tm-marquee 40s linear infinite;
}
.tm-logo-marquee__set {
	display: flex;
	align-items: center;
	gap: 100px;
	padding-right: 100px;
}
.tm-logo-marquee__logo {
	height: 60px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.7;
}
@keyframes tm-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* ---- About + years (years CSS đã có ở style.css) ---- */
.tm-about { padding: 100px 0 40px; text-align: center; position: relative; z-index: 1; }
.tm-about__title {
	margin: 0 0 40px;
	font-family: 'UTM Avo', Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(36px, 6vw, 96px);
	color: var(--tm-color-text);
}

/* ---- Key numbers: bố cục rải rác quanh headline, pop từ trên xuống khi cuộn tới ---- */
.tm-stats { padding: 100px 0; text-align: center; position: relative; z-index: 1; overflow: hidden; }
.tm-stats > .tm-container { position: relative; z-index: 1; }
.tm-stats__decor {
	position: absolute;
	bottom: -80px;
	left: -10%;
	width: 55%;
	max-width: 620px;
	pointer-events: none;
	z-index: 0;
	opacity: 1;
	will-change: transform;
	/* Transform do JS tính theo vị trí cuộn thật, xem main.js. */
}

.tm-stats__scatter {
	position: relative;
	max-width: 1150px;
	margin: 0 auto;
	min-height: 720px;
}

.tm-stats__headline {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 58%; /* tăng để chữ "in experiential marketing" không tràn ra ngoài đè lên card */
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	/* Vị trí gốc (canh giữa) + trôi thêm 70px lúc chưa vào view (entrance
	   mạnh hơn) CỘNG với độ trôi parallax theo chuột */
	transform: translate(calc(-50% + var(--tm-px, 0px)), calc(-50% + var(--tm-py, 0px) + 70px)) scale(0.9);
	font-family: 'UTM Avo', Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(18px, 2.6vw, 36px);
	color: var(--tm-color-text);
	opacity: 0;
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 1;
}
.tm-stats__scatter.tm-in-view .tm-stats__headline {
	opacity: 1;
	transform: translate(calc(-50% + var(--tm-px, 0px)), calc(-50% + var(--tm-py, 0px))) scale(1);
}
.tm-stats__headline-accent { color: var(--tm-color-brand); }
/* "17+ years of experience" và "in experiential marketing" luôn ở nguyên
   1 dòng, không xuống hàng dù màn hình hẹp lại (chữ tự co nhỏ thay vì wrap) */
.tm-stats__headline span { white-space: nowrap; }
.tm-stats__headline-accent--big { font-size: clamp(22px, 3.8vw, 54px); }

.tm-stats__card {
	position: absolute;
	background: #fff;
	border-radius: 18px;
	box-shadow: 10px 10px 8px rgba(65,65,65,0.12);
	padding: 4% 7%; /* giảm padding trên/dưới -> thẻ ngắn lại theo chiều dọc; trái phải vẫn bằng nhau */
	text-align: left;
	opacity: 0;
	/* Cả khối card (nền + đổ bóng) trôi theo chuột (--tm-px/--tm-py) CỘNG với
	   hiệu ứng "pop" phóng to + bay vào từ dưới + xoay nhẹ khi cuộn tới
	   (chuyển động mạnh hơn bản cũ: thêm quãng đường translateY + rotate). */
	transform: translate(var(--tm-px, 0px), calc(var(--tm-py, 0px) + 110px)) scale(0.15) rotate(-10deg);
	/* "pop": hơi nảy quá cỡ 1 chút rồi mới ổn định, giống hiệu ứng bung ra.
	   Sau khi pop xong, JS sẽ thêm class .tm-parallax-ready để chuyển sang
	   transition nhanh hơn, tránh bị "giật/nảy" khi rê chuột liên tục. */
	transition: transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}
.tm-stats__scatter.tm-in-view .tm-stats__card {
	opacity: 1;
	transform: translate(var(--tm-px, 0px), var(--tm-py, 0px)) scale(1) rotate(0deg);
}
.tm-stats__card.tm-parallax-ready {
	transition: transform 0.25s ease-out, opacity 0.4s ease;
}

/* inhouse rộng hơn để "management apps" vừa đúng 2 dòng (không bị vỡ
   thành 3 dòng); events đẩy ra xa + xuống dưới hơn để không đè chữ giữa */
.tm-stats__card--projects  { top: 0%;   left: 1%;  width: 27%; transition-delay: 0s; }
.tm-stats__card--inhouse   { top: 12%;  right: 3%; width: 30%; transition-delay: 0.15s; }
.tm-stats__card--events    { top: 66%;  right: 10%; width: 22%; transition-delay: 0.3s; }
.tm-stats__card--provinces { top: 74%;  left: 5%;  width: 21%; transition-delay: 0.45s; }

.tm-stats__number {
	margin: 0 0 6px;
	font-family: 'UTM Avo', Arial, sans-serif;
	font-weight: 700;
	color: var(--tm-color-brand);
	font-size: clamp(28px, 3.6vw, 60px);
	line-height: 1;
	white-space: nowrap;
	text-align: left;
}
.tm-stats__label {
	margin: 0;
	color: var(--tm-color-text);
	font-family: 'UTM Avo', Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(12px, 1.05vw, 16px);
	line-height: 1.3;
	text-align: left;
}

@media (max-width: 768px) {
	.tm-stats__scatter {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		min-height: auto;
	}
	.tm-stats__card,
	.tm-stats__headline {
		position: static;
		width: 90%;
		max-width: 320px;
	}
	.tm-stats__headline { transform: none; text-align: center; align-items: center; }
	.tm-stats__headline span { white-space: normal; }
}

/* ---- Mission + Vision ---- */
.tm-mission-vision { padding: 100px 0; position: relative; z-index: 1; }
.tm-mv-row {
	display: flex;
	align-items: center;
	gap: 60px;
	margin-bottom: 60px;
	flex-wrap: wrap;
}
.tm-mv-row--reverse { flex-direction: row-reverse; }
.tm-mv-row__image {
	flex: 1 1 400px;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 12px 28px rgba(65, 65, 65, 0.18);
	aspect-ratio: 628 / 409;
	background: #f2f2f2; /* hiện màu nền tạm trong lúc ảnh thật chưa được thêm vào */
}
.tm-mv-row__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-mv-row__text { flex: 1 1 350px; }
.tm-mv-row__title {
	font-family: 'UTM Avo', Arial, sans-serif;
	font-weight: 700;
	color: var(--tm-color-brand);
	font-size: 64px;
	margin: 0 0 16px;
}
.tm-mv-row__text p { color: #434343; font-size: 20px; line-height: 1.5; }

/* ---- Our Power: dạng "lá bài", xòe ra khi cuộn tới ---- */
.tm-power { padding: 100px 0 138px; text-align: center; overflow: hidden; position: relative; z-index: 1; }
.tm-power__title {
	font-family: 'UTM Avo', Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(40px, 6vw, 96px);
	color: var(--tm-color-text);
	margin: 0 0 40px;
}

.tm-power__fan {
	position: relative;
	height: 688px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tm-power-card {
	position: absolute;
	width: 375px;
	height: 520px;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 10px 24px rgba(0,0,0,0.18);
	padding: 30px;
	display: flex;
	flex-direction: column;
	--tm-power-scale: 1;
	filter: brightness(1);
	/* trạng thái ban đầu: thu nhỏ, xếp chồng ở giữa, chưa xoay */
	opacity: 0;
	transform: translate(0, 65px) scale(0.35) rotate(0deg);
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease, filter 0.3s ease;
}
.tm-power-card--1 { z-index: 1; transition-delay: 0s; }
.tm-power-card--2 { z-index: 3; transition-delay: 0.12s; }
.tm-power-card--3 { z-index: 2; transition-delay: 0.24s; }

/* trạng thái xòe ra khi vào viewport, giống hình giương bài trên tay */
.tm-power__fan.tm-in-view .tm-power-card--1 {
	opacity: 1;
	transform: translate(-275px, 49px) rotate(-13deg) scale(var(--tm-power-scale));
}
.tm-power__fan.tm-in-view .tm-power-card--2 {
	opacity: 1;
	transform: translate(0, -41px) rotate(-4deg) scale(var(--tm-power-scale));
}
.tm-power__fan.tm-in-view .tm-power-card--3 {
	opacity: 1;
	transform: translate(275px, 58px) rotate(9deg) scale(var(--tm-power-scale));
}

/* hover: mặc định cả 3 thẻ sáng bình thường.
   Chỉ khi con trỏ THẬT SỰ nằm trên 1 thẻ cụ thể thì 2 thẻ còn lại mới tối đi
   (dùng class do JS gắn/gỡ — chắc chắn chạy trên mọi trình duyệt) */
.tm-power__fan.tm-hovering .tm-power-card { filter: brightness(0.55); }
.tm-power__fan.tm-hovering .tm-power-card.tm-hover-active {
	filter: brightness(1);
	--tm-power-scale: 1.08;
	z-index: 10;
}

.tm-power-card__label {
	color: var(--tm-color-brand);
	font-family: 'UTM Avo', Arial, sans-serif;
	font-weight: 700;
	font-size: 43px;
	margin: 0 0 23px;
	text-align: left;
}
.tm-power-card__face {
	height: 60%; /* chiếm 60% chiều cao card */
	margin-top: auto; /* đẩy hẳn xuống đáy card, thay vì lửng lơ ở giữa */
	background: var(--tm-color-brand);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	position: relative;
	overflow: hidden; /* đảm bảo ảnh phóng to/dịch chuyển vẫn luôn nằm gọn trong khung đỏ */
}
.tm-power-card__icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
/* Fast: phóng to ảnh lên 1.55 lần, vẫn giữ trong khung đỏ nhờ overflow:hidden ở trên */
.tm-power-card--1 .tm-power-card__icon-img { transform: scale(1.55); }
/* Reliable: dịch icon để icon (không phải chữ) là tâm điểm */
.tm-power-card--2 .tm-power-card__icon-img { transform: scale(1) translate(-8.5%, -6%); }
/* Optimized: thu nhỏ ảnh còn 75%, dịch lên để dấu chấm rơi đúng giữa khung đỏ */
.tm-power-card--3 .tm-power-card__icon-img { transform: scale(0.55) translateY(-30%) translateX(6%); }

@media (max-width: 640px) {
	.tm-power__fan { height: 525px; }
	.tm-power-card { width: 275px; height: 381px; }
	.tm-power__fan.tm-in-view .tm-power-card--1 { transform: translate(-144px, 31px) rotate(-13deg) scale(var(--tm-power-scale)); }
	.tm-power__fan.tm-in-view .tm-power-card--3 { transform: translate(144px, 38px) rotate(9deg) scale(var(--tm-power-scale)); }
}


/* ---- Our Services v2: scroll-triggered — icon lấy đúng 7 vector gốc
   từ Figma (mask-image). Section "ghim" lại khi cuộn tới, mỗi bước cuộn
   kích hoạt đúng 1 cánh (xem main.js, tìm "tm-services-scrolly"). ---- */
.tm-services { padding: 0; text-align: center; position: relative; z-index: 1; }
.tm-services-scrolly__title {
	/* Co theo chiều CAO màn hình (vh) chứ không chỉ chiều rộng (vw) — màn
	   hình laptop ~14" thường rộng thoải mái nhưng CAO rất hạn chế (trừ
	   thanh trình duyệt chỉ còn ~650-750px), nên nếu chỉ tính theo vw thì
	   tiêu đề + bánh xe dịch vụ bên dưới sẽ cao hơn cả viewport, bị tràn ra
	   ngoài/cắt mất phần dưới (ACTIVATION, DIGITAL, OOH). Dùng min(vw, vh)
	   để kích thước luôn bị giới hạn bởi chiều nào hẹp hơn. */
	/* Khoảng cách xuống cụm bánh xe = gấp đôi mức trước đó (x2). */
	margin: 0 0 clamp(48px, 18vh, 280px);
	font-family: 'UTM Avo', Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(28px, min(6vw, 8vh), 96px);
	color: var(--tm-color-text);
}

/* Vùng "ghim" — chiều cao = quãng cuộn cho đủ 6 bước, càng cao thì cuộn
   càng "chậm/dài" qua mỗi cánh. Đang để mỗi cánh ứng với ~60vh cuộn. */
.tm-services-scrolly {
	position: relative;
	height: 440vh; /* 6 cánh + khoảng chờ cuối dài hơn để cánh thứ 6 chạy hết animation */
}
.tm-services-scrolly__pin {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center; /* tiêu đề + wheel cùng nhóm, canh giữa cả cụm theo chiều dọc màn hình */
	padding-bottom: clamp(16px, 5vh, 80px); /* dịch cả cụm lên trên 1 chút — cũng co theo vh */
}

.tm-services__wheel {
	position: relative;
	/* Thêm giới hạn theo vh (55vh) bên cạnh vw/px cũ — trên màn hình thấp
	   (laptop 14") đây sẽ là giới hạn quyết định, ép cả bánh xe + 6 nhãn
	   xung quanh (đặt lệch ra ngoài khung 1 khoảng %, xem section-services.php)
	   co nhỏ lại vừa đúng chiều cao còn trống, không bị cắt mất nhãn dưới. */
	width: min(380px, 80vw, 42vh); /* thu nhỏ cụm bánh xe lại 1 chút theo yêu cầu */
	aspect-ratio: 368.32 / 407.71; /* đúng tỉ lệ khung icon gốc trong Figma */
	margin: 0 auto;
}

/* Chấm giữa: dùng ảnh gốc trực tiếp (đã có sẵn màu đỏ trong file gốc). */
.tm-service-center {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: contain;
	z-index: 2;
}

/* Mặc định: 6 cánh màu xám — dùng CSS filter (grayscale) để "tẩy" màu đỏ
   gốc trong file SVG thành xám, thay vì tô màu qua mask-image (mask hay
   bị lỗi hiển thị sai hình dạng khi trình duyệt không load được mask từ
   ảnh khác domain). */
.tm-service-blade {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: grayscale(1) brightness(1.9);
	transition: filter 0.35s ease;
	z-index: 1;
	pointer-events: none;
}

/* Cuộn tới lượt cánh này: bỏ filter để hiện lại màu đỏ gốc (giữ nguyên,
   không tự tắt) */
.tm-service-blade.is-done {
	filter: none;
	z-index: 3;
}

/* Đúng lúc kích hoạt: nảy ra xa tâm (--tm-out-x/--tm-out-y, tính theo
   hướng của từng cánh — xem PHP) rồi quay lại chỗ cũ */
@keyframes tm-blade-pulse {
	0%   { transform: translate(0, 0); }
	50%  { transform: translate(var(--tm-out-x), var(--tm-out-y)); }
	100% { transform: translate(0, 0); }
}
.tm-service-blade.is-pulsing {
	animation: tm-blade-pulse 0.7s ease-in-out;
}

.tm-services__label {
	position: absolute;
	transform: translate(-50%, -50%);
	font-family: 'UTM Avo', Arial, sans-serif;
	font-weight: 600;
	font-size: clamp(13px, min(2.2vw, 2.6vh), 26px);
	line-height: 1.25;
	letter-spacing: 0.4px;
	color: #434343;
	white-space: nowrap;
	z-index: 4;
}
/* Đúng lúc cánh tương ứng nhô ra: chữ tên dịch vụ phóng to rồi thu lại
   về đúng kích thước cũ (giữ nguyên translate(-50%,-50%) để không bị
   lệch vị trí khi scale). */
@keyframes tm-label-pulse {
	0%   { transform: translate(-50%, -50%) scale(1); }
	50%  { transform: translate(-50%, -50%) scale(1.3); }
	100% { transform: translate(-50%, -50%) scale(1); }
}
.tm-services__label.is-pulsing {
	animation: tm-label-pulse 0.7s ease-in-out;
}

@media (max-width: 480px) {
	.tm-services__label { font-size: 20px; }
	.tm-services-scrolly { height: 360vh; }
}


/* ---- Clients ---- */
.tm-clients { padding: 100px 0; text-align: center; position: relative; z-index: 1; }
.tm-clients__title {
	font-family: 'UTM Avo', Arial, sans-serif;
	font-weight: 700;
	color: var(--tm-color-brand);
	font-size: clamp(40px, 6vw, 96px);
	margin: 0 0 24px;
}
.tm-clients__subtitle { color: var(--tm-color-text); font-size: 20px; margin: 0 0 60px; }
.tm-clients__row {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	align-items: center;
	justify-items: center;
	gap: 24px;
	margin-bottom: 40px;
}
/* Hàng trên hẹp hơn hàng dưới (75%) — logo sát nhau hơn, tạo cảm giác so le */
.tm-clients__row--top {
	max-width: 75%;
	margin-left: auto;
	margin-right: auto;
}
.tm-clients__cell { display: flex; align-items: center; justify-content: center; width: 100%; }
.tm-clients__logo { width: auto; max-width: 100%; object-fit: contain; max-height: 100px; }
@media (max-width: 900px) {
	.tm-clients__row { grid-template-columns: repeat(3, 1fr); gap: 32px 20px; }
	.tm-clients__row--top { max-width: 100%; }
	.tm-clients__logo { max-height: 70px; }
}
@media (max-width: 480px) {
	.tm-clients__row { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Our Work: banner đỏ, chữ khổng lồ góc dưới-trái, 3 thẻ so le góc trên-phải ---- */
.tm-work { position: relative; z-index: 1; }
.tm-work__banner {
	background: var(--tm-color-brand);
	border-radius: 24px;
	padding: 48px;
	position: relative;
	overflow: hidden;
	/* Cao thêm 10% so với bản gốc (811px -> 892px) — chỉ thêm khoảng
	   trống Ở DƯỚI để nút "See more" thoáng hơn, mọi phần tử khác (chấm
	   tròn, tiêu đề, các thẻ cascade) giữ NGUYÊN vị trí như cũ: chấm tròn
	   đã neo theo top nên không đổi; tiêu đề dời "bottom" thêm đúng bằng
	   phần cao thêm (xem .tm-work__title) để không bị kéo tụt xuống theo
	   đáy mới; .tm-work__cascade khoá chiều cao cố định (không còn ăn
	   theo 100% banner nữa) để các thẻ zigzag bên trong không xê dịch. */
	min-height: 892px;
}
.tm-work__dot {
	position: absolute;
	top: 40px;
	left: 48px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #fff;
}
.tm-work__title {
	position: absolute;
	left: 48px;
	/* 40px gốc + đúng phần chiều cao banner tăng thêm (81px) -> vị trí
	   thật (tính từ mép trên) không đổi dù banner cao hơn. */
	bottom: 121px;
	font-family: 'UTM Avo', Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(70px, 13vw, 196px);
	line-height: 0.95;
	color: #fff;
	margin: 0;
}
/* Canh GIỮA theo chiều ngang của cả khung đỏ (.tm-work__banner là
   containing block nhờ position:relative) và nằm SÁT ĐÁY khung — không
   đi theo lề trái của chữ "Our Work" nữa. */
.tm-work__more {
	position: absolute;
	left: 50%;
	bottom: 40px;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	color: var(--tm-color-brand);
	font-family: 'UTM Avo', Arial, sans-serif;
	font-weight: 700;
	font-size: 20px;
	padding: 14px 28px;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tm-work__more svg { transition: transform 0.25s ease; }
.tm-work__more:hover {
	transform: translateX(-50%) translateY(-3px);
	box-shadow: 0 10px 22px rgba(0,0,0,0.25);
}
.tm-work__more:hover svg { transform: translateX(4px); }

.tm-work__cascade {
	position: relative;
	/* KHÔNG dùng height:100% nữa — nếu không, cascade sẽ tự cao theo
	   đúng bằng banner (mà banner vừa cao thêm 10%), kéo các thẻ zigzag
	   bên trong (định vị theo %) xê dịch xuống theo. Khoá cứng bằng
	   min-height (không có height) để nó chỉ cao đúng bằng nội dung
	   tuyệt đối bên trong (các thẻ .tm-work__card), giữ nguyên vị trí. */
	min-height: 713px;
}
.tm-work__card {
	position: absolute;
	background: var(--tm-color-brand);
	border: 1.5px solid rgba(255,255,255,0.8);
	border-radius: 15px;
	padding: 23px;
	display: flex;
	align-items: stretch;
	gap: 23px;
	width: 532px;
	height: 269px;
	/* Giờ là <button> (bấm mở popup "Xem nhanh dự án") — reset lại style
	   mặc định của trình duyệt cho button. */
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	transition: box-shadow 0.25s ease;
}
.tm-work__card:hover { box-shadow: 0 16px 32px rgba(0,0,0,0.25); z-index: 2; }
.tm-work__card--1 { top: 0%;   right: 4%;  }
.tm-work__card--2 { top: 27%;  right: 22%; }
.tm-work__card--3 { top: 54%;  right: 8%;  }

.tm-work__card-image { width: 186px; flex-shrink: 0; border-radius: 10px; overflow: hidden; display: block; }
.tm-work__card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.tm-work__card:hover .tm-work__card-image img { transform: scale(1.08); }
.tm-work__card-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.tm-work__card-client { color: #fff; font-family: 'UTM Avo', Arial, sans-serif; font-weight: 700; font-size: 43px; margin: 0; }
.tm-work__card-type { color: rgba(255,255,255,0.7); font-size: 29px; margin: 4px 0 0; }

@media (max-width: 900px) {
	.tm-work__banner { min-height: auto; padding: 40px 24px 320px; }
	.tm-work__cascade { min-height: 0; }
	.tm-work__card { position: static; width: 100%; margin-bottom: 16px; }
	.tm-work__card--1, .tm-work__card--2, .tm-work__card--3 { top: auto; right: auto; }
	.tm-work__title { position: static; margin-bottom: 20px; }
	.tm-work__more {
		position: static;
		display: flex;
		width: max-content;
		max-width: 100%;
		margin: 0 auto 32px;
		transform: none;
	}
	.tm-work__more:hover { transform: translateY(-3px); }
	.tm-work__dot { position: static; margin-bottom: 16px; display: block; }
}

/* ---- Trang riêng "Our Work" (/our-work/, page-our-work.php): nền trắng,
   liệt kê ĐẦY ĐỦ dự án, mỗi thẻ tự bay vào khi cuộn tới (JS gắn
   .tm-in-view từng thẻ riêng, xem main.js "tm-work-page__card").
   Bố cục theo yêu cầu cụ thể: chữ "Our Work" cố định giữa màn hình làm
   nền; mỗi thẻ định vị tuyệt đối theo đúng % cách mép trái/phải trang
   (không còn theo container bị bó hẹp/có padding riêng nữa). ---- */
.tm-work-page { position: relative; padding: 140px 0 120px; background: #fff; overflow: hidden; }

/* Chữ nền — position:fixed nên đứng yên khi cuộn (tới ngưỡng gần nút
   Contact us thì "khoá" lại, xem main.js "tmUpdateWorkTitleFreeze").
   "top" KHÔNG cố định 50% nữa — được JS tính đúng 1 lần lúc tải trang
   (và lúc resize) sao cho mép TRÊN của chữ = mép DƯỚI của card đầu tiên,
   rồi nhích lên thêm 12.5% chiều cao thẻ (xem main.js
   "tmComputeWorkTitleRestTop"). z-index thấp hơn .tm-work-page__list để
   các thẻ luôn đè lên trên (chữ chỉ lộ ra ở khoảng trống giữa các thẻ).
   pointer-events:none để không chặn click xuyên qua chỗ chữ đè lên card.
   translateX(-50% + 20px): canh giữa ngang rồi nhích thêm 20px sang phải. */
.tm-work-page__title {
	position: fixed;
	left: 50%;
	transform: translateX(calc(-50% + 20px));
	margin: 0;
	font-family: 'UTM Avo', Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(56px, 9vw, 180px);
	line-height: 0.95;
	color: var(--tm-color-text);
	white-space: nowrap;
	text-align: center;
	z-index: 0;
	pointer-events: none;
}

.tm-work-page__list {
	position: relative;
	z-index: 1;
	width: 100%;
	/* Kích thước thẻ theo đúng yêu cầu: ngang = 1/3 bề ngang trang, dọc =
	   1/2 bề ngang thẻ (= 1/6 bề ngang trang) — luôn theo vw để đúng tỉ lệ
	   dù màn hình rộng/hẹp khác nhau.
	   Cao độ (top) từng thẻ = 1 hệ số riêng (top_mult, set trong PHP) nhân
	   với --tm-card-h — xem section-work-page.php để biết công thức suy ra
	   từng hệ số. Card cuối (thẻ 12) có top_mult=9.65, cộng thêm 1 lần
	   --tm-card-h (chiều cao chính nó) = tổng span 10.65 lần --tm-card-h —
	   dùng đúng số đó để container đủ cao chứa hết, không bị cắt thẻ cuối. */
	--tm-card-w: 33.3334vw;
	--tm-card-h: 16.6667vw;
	height: calc(10.65 * var(--tm-card-h) + 40px);
}
.tm-work-page__card {
	position: absolute;
	display: flex;
	align-items: stretch;
	gap: 2vw;
	width: var(--tm-card-w);
	height: var(--tm-card-h);
	background: var(--tm-color-brand);
	border: 1.5px solid rgba(255,255,255,0.8);
	border-radius: 15px;
	padding: 2vw;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	opacity: 0;
	/* translate = vị trí "bay vào" lúc cuộn tới (translateY 60px -> 0) CỘNG
	   với độ trôi theo chuột lúc hover (--tm-px/--tm-py, mặc định 0 — xem
	   main.js "Hiệu ứng rê chuột chuyển động cho từng thẻ Our Work"), cùng
	   cơ chế với .tm-stats__card (section 17+ years of experience). */
	transform: translate(var(--tm-px, 0px), calc(60px + var(--tm-py, 0px))) scale(0.94);
	transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease, box-shadow 0.25s ease;
}
.tm-work-page__card.tm-in-view { opacity: 1; transform: translate(var(--tm-px, 0px), var(--tm-py, 0px)) scale(1); }
.tm-work-page__card:hover { box-shadow: 0 16px 32px rgba(0,0,0,0.25); z-index: 2; }
/* Sau khi hiệu ứng "bay vào" chạy xong, chuyển sang transition nhanh hơn
   để rê chuột mượt, không bị nảy chậm như lúc entrance (giống
   .tm-stats__card.tm-parallax-ready). */
.tm-work-page__card.tm-parallax-ready { transition: transform 0.25s ease-out, opacity 0.6s ease, box-shadow 0.25s ease; }

.tm-work-page__card-image { width: 38%; flex-shrink: 0; border-radius: 10px; overflow: hidden; display: block; }
.tm-work-page__card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.tm-work-page__card:hover .tm-work-page__card-image img { transform: scale(1.08); }
.tm-work-page__card-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.tm-work-page__card-client { color: #fff; font-family: 'UTM Avo', Arial, sans-serif; font-weight: 700; font-size: clamp(16px, 2.6vw, 40px); line-height: 1.15; }
.tm-work-page__card-type { color: rgba(255,255,255,0.7); font-size: clamp(11px, 1.8vw, 26px); margin-top: 0.5vw; }

.tm-work-page__cta { position: relative; z-index: 1; display: flex; justify-content: center; margin-top: 6vw; padding: 0 5%; }
.tm-work-page__contact-btn { max-width: 320px; }

@media (max-width: 900px) {
	.tm-work-page { padding: 110px 0 90px; }
	.tm-work-page__title { font-size: clamp(48px, 14vw, 96px); }
	.tm-work-page__list {
		display: flex;
		flex-direction: column;
		gap: 16px;
		height: auto;
		padding: 0 20px;
	}
	.tm-work-page__card {
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		width: 100%;
		height: auto;
		transform: translateY(40px) scale(0.96);
	}
	.tm-work-page__card.tm-in-view { transform: translateY(0) scale(1); }
	.tm-work-page__card-image { width: 35%; }
	.tm-work-page__cta { margin-top: 40px; }
}
@media (max-width: 480px) {
	.tm-work-page__card { flex-direction: column; }
	.tm-work-page__card-image { width: 100%; height: 140px; }
}

/* ---- Popup "Xem nhanh dự án" (Figma: frame POPUP_WORK, node 450:392) —
   mở khi bấm 1 thẻ trong .tm-work-page__list. Ảnh dạng mosaic (1 lớn trên
   + 2 nhỏ trái + 1 cao bên phải) + tên dự án (đỏ, đậm) + mô tả bên phải.
   To hơn bản trước + LUÔN vừa màn hình, KHÔNG cần cuộn bên trong: toàn bộ
   kích thước (khung popup, hàng ảnh mosaic) tính theo vh (chiều cao màn
   hình thật) thay vì px cố định, nên co giãn vừa khít mọi kích thước màn
   hình thay vì tràn ra rồi phải cuộn. */
.tm-work-popup {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3vh 24px;
}
.tm-work-popup[hidden] { display: none; }
.tm-work-popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, 0.65);
	backdrop-filter: blur(4px);
	animation: tm-popup-fade 0.25s ease;
}
.tm-work-popup__card {
	position: relative;
	background: #fff;
	border-radius: 28px;
	max-width: 1280px;
	width: 100%;
	height: 82vh;
	max-height: 780px;
	padding: 3vh 3vw;
	display: flex;
	align-items: stretch;
	gap: 3vw;
	box-shadow: 0 30px 80px rgba(0,0,0,0.4);
	animation: tm-popup-pop 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.tm-work-popup__close {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 3px solid #fff;
	background: #111;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(0,0,0,0.35);
	transition: transform 0.2s ease;
}
.tm-work-popup__close:hover { transform: scale(1.08); }

/* Mosaic ảnh chiếm hẳn phần cao còn lại (100% chiều cao card, trừ đi bởi
   flex cha) — 3 hàng theo tỉ lệ fr (không còn px cố định) nên co giãn
   khít theo đúng chiều cao popup, không bao giờ tràn ra ngoài. */
.tm-work-popup__gallery {
	flex: 1 1 60%;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	grid-template-rows: 1.4fr 1fr 1fr;
	gap: 1.4vh;
}
.tm-work-popup__g {
	border-radius: 14px;
	overflow: hidden;
	background: #eee;
	display: block;
	/* Ép trình duyệt tạo compositing layer riêng cho khối này — một số
	   trình duyệt (đặc biệt Safari) không bo tròn đúng góc dưới của
	   overflow:hidden nếu không có layer riêng, khiến góc bị "nhọn" thay
	   vì tròn đều như 3 góc còn lại. */
	transform: translateZ(0);
	-webkit-mask-image: -webkit-radial-gradient(white, black);
}
.tm-work-popup__g img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: inherit; /* bo tròn luôn cả ảnh, phòng khi overflow:hidden của khối cha bị trình duyệt bỏ qua */
}
.tm-work-popup__g--top    { grid-column: 1 / 3; grid-row: 1; }
.tm-work-popup__g--mid    { grid-column: 1; grid-row: 2; }
.tm-work-popup__g--bottom { grid-column: 1; grid-row: 3; }
.tm-work-popup__g--right  { grid-column: 2; grid-row: 2 / 4; }

/* Ảnh case-study thật (update Figma) là 1 mosaic ĐÃ ghép sẵn (1 ảnh lớn +
   3 ảnh nhỏ) chứ không phải 1 ảnh đơn để crop ra 4 ô như trước — nên hiện
   full nguyên khối trong 1 ô duy nhất (.tm-work-popup__g--top), ẩn 3 ô còn
   lại. Bật chế độ này bằng cách thêm class "tm-work-popup__gallery--single"
   vào .tm-work-popup__gallery (xem section-work-page.php / section-work.php). */
.tm-work-popup__gallery--single { display: block; }
.tm-work-popup__gallery--single .tm-work-popup__g--mid,
.tm-work-popup__gallery--single .tm-work-popup__g--bottom,
.tm-work-popup__gallery--single .tm-work-popup__g--right { display: none; }
.tm-work-popup__gallery--single .tm-work-popup__g--top {
	width: 100%;
	height: 100%;
}

/* 2026-09-30 (fix): bỏ justify-content:center — khi .tm-work-popup__info
   vừa là flex column vừa overflow-y:auto vừa canh giữa dọc, phần nội dung
   tràn ra PHÍA TRÊN (bị đẩy lên do canh giữa) không cách nào cuộn tới được
   (scrollTop không thể âm) — đây chính là lỗi "cuộn trong popup không hoạt
   động". Đổi sang flex-start để luôn cuộn được từ đầu, đây là bug flexbox
   overflow phổ biến (justify-content: center/flex-end + overflow:auto). */
.tm-work-popup__info {
	flex: 1 1 38%;
	min-width: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	overflow-y: auto;
	overscroll-behavior: contain; /* cuộn hết nội dung bên trong thì DỪNG, không "rò" ra ngoài làm cuộn trang nền — xem thêm main.js, tìm "tmFindScrollableAncestor" */
	padding-right: 8px; /* chừa chỗ cho thanh cuộn, không đè lên chữ */
}
/* Thanh cuộn mảnh, tinh tế (Webkit/Blink) thay vì thanh cuộn mặc định to bản */
.tm-work-popup__info::-webkit-scrollbar { width: 6px; }
.tm-work-popup__info::-webkit-scrollbar-track { background: transparent; }
.tm-work-popup__info::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }
.tm-work-popup__info::-webkit-scrollbar-thumb:hover { background: #ccc; }
.tm-work-popup__info { scrollbar-width: thin; scrollbar-color: #ddd transparent; }

.tm-work-popup__title {
	font-family: 'UTM Avo', Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(26px, 2.6vw, 44px);
	color: var(--tm-color-brand);
	margin: 0 0 10px;
	line-height: 1.15;
}
.tm-work-popup__type {
	font-family: 'UTM Avo', Arial, sans-serif;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #9a9a9a;
	margin: 0 0 16px;
}
/* data-desc giờ là HTML thật (đúng cấu trúc Figma: dòng "Client: …" +
   từng đoạn "THE CHALLENGE/THE EXPERIENCE/THE IMPACT" in đậm, theo sau là
   1+ đoạn văn) — .tm-work-popup__desc đổi từ <p> sang <div> để chứa được
   nhiều <p> con (xem section-work-page.php / section-work.php).
   2026-09-30: dàn lại khoảng cách cho chuẩn hơn — heading (.tm-work-popup__heading)
   có khoảng cách RÕ với đoạn/khối trước đó (18px) để tách bạch từng phần
   THE CHALLENGE/THE EXPERIENCE/THE IMPACT, còn đoạn văn thường chỉ cách
   nhau 10px như cũ. Dòng KPI cuối (heading không kèm đoạn văn theo sau)
   cũng dùng chung class .tm-work-popup__heading nên tự động có khoảng cách
   tách biệt với đoạn trên nó. */
.tm-work-popup__desc { color: #434343; font-size: clamp(13px, 1vw, 16px); line-height: 1.48; }
.tm-work-popup__desc p { margin: 0 0 10px; }
.tm-work-popup__desc p:last-child { margin-bottom: 0; }
.tm-work-popup__desc p.tm-work-popup__heading { margin: 16px 0 6px; }
.tm-work-popup__desc p.tm-work-popup__heading:first-child { margin-top: 0; }
.tm-work-popup__desc strong {
	font-family: 'UTM Avo', Arial, sans-serif;
	font-weight: 700;
	color: #111;
	display: inline-block;
	letter-spacing: 0.02em;
}
/* 2026-09-30: dòng meta (Client/Location/Duration) giờ in đậm HẾT + mỗi
   mục xuống dòng riêng (tách bằng dấu "·" trong chuỗi gốc, đổi thành
   <br> khi render — xem tm_work_build_desc_html() / buildDescHtml()),
   thay vì 1 dòng mảnh màu xám nhạt như trước. */
.tm-work-popup__meta {
	display: block;
	color: #6b6b6b;
	font-family: 'UTM Avo', Arial, sans-serif;
	font-weight: 700;
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: 0.02em;
	margin: 0 0 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid #ececec;
}

@media (max-width: 768px) {
	.tm-work-popup { padding: 3vh 16px; }
	.tm-work-popup__card {
		flex-direction: column;
		height: auto;
		max-height: 94vh;
		overflow-y: auto;
		padding: 26px 20px;
		gap: 20px;
	}
	.tm-work-popup__gallery { height: 38vh; grid-template-rows: 1.4fr 1fr 1fr; }
	.tm-work-popup__info { height: auto; overflow-y: visible; }
}

/* ---- Highlights: nền trắng, mỗi thẻ nền tối, cắt bớt + mờ dần + nút "More work" nổi ---- */
.tm-highlights { padding: 100px 0; background: #fff; }
.tm-highlights__title {
	font-family: 'UTM Avo', Arial, sans-serif;
	font-weight: 700;
	color: var(--tm-color-brand);
	font-size: 52px; /* đúng chiều cao chữ thật đo từ Figma */
	margin: 0 0 32px;
	text-align: left;
}
.tm-highlights__wrap {
	position: relative;
}
.tm-highlights__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	row-gap: 16px;
	column-gap: 36px; /* đúng khoảng cách thật đo từ Figma */
	max-height: 760px;
	overflow: hidden;
}
.tm-highlights__card {
	background: #111;
	border-radius: 15px;
	padding: 14px;
	display: flex;
	gap: 30px;
	height: 221px; /* đúng kích thước thật đo từ Figma */
}
.tm-highlights__card-image { width: 193px; flex-shrink: 0; border-radius: 10px; overflow: hidden; }
.tm-highlights__card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-highlights__card-text { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 4px 0; }
.tm-highlights__card-client { color: #fff; font-family: 'UTM Avo', Arial, sans-serif; font-weight: 700; font-size: 36px; margin: 0; }
.tm-highlights__card-desc { color: #b4b4b4; font-size: 16px; margin: 8px 0 0; line-height: 1.4; }
.tm-highlights__card-type { color: rgba(255,255,255,0.6); font-size: 18px; margin: 0; }

/* lớp phủ mờ dần từ trong suốt sang trắng, che bớt hàng cuối */
.tm-highlights__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 220px;
	background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 75%);
	pointer-events: none;
}
.tm-highlights__cta {
	position: absolute;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
}

@media (max-width: 768px) {
	.tm-highlights__grid { grid-template-columns: 1fr; max-height: 720px; }
}
@media (max-width: 480px) {
	.tm-highlights__card { height: auto; flex-direction: column; }
	.tm-highlights__card-image { width: 100%; height: 140px; }
}

/* ---- Contact: dạng "dummy form" — 4 khối tĩnh giống thiết kế ---- */
.tm-contact { padding: 100px 0; text-align: center; position: relative; z-index: 1; }
.tm-contact__title {
	font-family: 'UTM Avo', Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(36px, 5vw, 68px);
	color: var(--tm-color-text);
	margin: 0 0 36px;
}
.tm-contact__box {
	max-width: 760px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.tm-contact__pill {
	background: #efefef;
	border-radius: 14px;
	padding: 20px 26px;
	font-family: 'UTM Avo', Arial, sans-serif;
	font-size: 18px;
	color: var(--tm-color-text);
	text-align: left;
	border: none;
	flex: 1;
	display: flex;
	align-items: baseline;
	gap: 10px;
	cursor: default;
}
.tm-contact__pill strong { font-weight: 700; white-space: nowrap; }
.tm-contact__pill span { color: #434343; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-contact__pill--full {
	width: 100%;
	justify-content: center;
	text-align: center;
	font-weight: 700;
	font-size: 19px;
	cursor: pointer;
}
.tm-contact__pill--cta {
	width: 100%;
	justify-content: center;
	text-align: center;
	background: var(--tm-color-brand);
	color: #fff !important;
	font-weight: 700;
	font-size: 19px;
	text-decoration: none;
}
.tm-contact__pill--cta * { color: #fff !important; }

.tm-contact__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 0;
}
.tm-contact__row {
	display: flex;
	gap: 16px;
}
/* 2 ô nhập Email / Điện thoại — style giống hệt pill cũ, chỉ khác là
   input thật để gõ vào. Chữ ví dụ (contact@targetmedia.vn / 028...) chỉ
   là PLACEHOLDER (mờ đi) — không phải dữ liệu thật, để gợi ý người điền. */
.tm-contact__input {
	width: 100%;
	font-family: 'UTM Avo', Arial, sans-serif;
	font-size: 18px;
	color: var(--tm-color-text);
}
.tm-contact__input::placeholder {
	color: #9a9a9a; /* mờ đi so với chữ thật gõ vào */
	opacity: 1;
}
.tm-contact__input:focus {
	outline: 2px solid var(--tm-color-brand);
	outline-offset: 1px;
}
.tm-contact__submit {
	border: none;
	cursor: pointer;
	margin-top: 4px;
}
.tm-contact__submit:disabled {
	opacity: 0.6;
	cursor: default;
}
.tm-contact__form-note {
	margin: 0;
	font-family: 'UTM Avo', Arial, sans-serif;
	font-size: 14px;
	text-align: center;
	min-height: 20px;
}
.tm-contact__form-note.is-success { color: #1a8f4c; }
.tm-contact__form-note.is-error { color: var(--tm-color-brand); }

@media (max-width: 480px) {
	.tm-contact__row { flex-direction: column; }
	.tm-contact__pill span { white-space: normal; }
}

/* ---- Popup "Thông tin liên hệ trực tiếp" ---- */
.tm-info-popup {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.tm-info-popup[hidden] { display: none; }
.tm-info-popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, 0.55);
	backdrop-filter: blur(3px);
	animation: tm-popup-fade 0.25s ease;
}
.tm-info-popup__card {
	position: relative;
	background: #fff;
	border-radius: 20px;
	max-width: 380px;
	width: 100%;
	padding: 40px 32px 32px;
	text-align: center;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
	animation: tm-popup-pop 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.tm-info-popup__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: #f2f2f2;
	color: #555;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease;
}
.tm-info-popup__close:hover { background: #e5e5e5; }
.tm-info-popup__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--tm-color-brand);
	margin: 0 auto 20px;
}
.tm-info-popup__title {
	font-family: 'UTM Avo', Arial, sans-serif;
	font-weight: 700;
	font-size: 26px;
	color: var(--tm-color-text);
	margin: 0 0 8px;
}
.tm-info-popup__desc {
	font-size: 14px;
	color: #6b6b6b;
	line-height: 1.5;
	margin: 0 0 24px;
}
.tm-info-popup__row {
	display: flex;
	align-items: center;
	gap: 14px;
	text-align: left;
	padding: 14px 16px;
	border-radius: 14px;
	background: #f7f7f7;
	text-decoration: none;
	margin-bottom: 12px;
	transition: background 0.2s ease, transform 0.2s ease;
}
.tm-info-popup__row:last-child { margin-bottom: 0; }
.tm-info-popup__row:hover { background: #fdeceb; transform: translateY(-1px); }
.tm-info-popup__row-icon {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #fff;
	color: var(--tm-color-brand);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.tm-info-popup__row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tm-info-popup__row-label {
	font-size: 12px;
	color: #999;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.tm-info-popup__row-value {
	font-family: 'UTM Avo', Arial, sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--tm-color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@keyframes tm-popup-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes tm-popup-pop {
	from { opacity: 0; transform: scale(0.92) translateY(10px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.tm-info-popup__overlay,
	.tm-info-popup__card { animation: none !important; }
}

/* ---- Footer: 3 cột — logo+tagline / menu / địa chỉ+liên hệ ---- */
.tm-footer {
	background: var(--tm-color-brand);
	color: #fff;
	padding-top: 50px;
	position: relative;
	z-index: 1;
}
.tm-footer__inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 32px;
	padding-bottom: 40px;
}
.tm-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 220px;
}
.tm-footer__logo-img { width: 60%; height: 60%; display: block; }
.tm-footer__logo-text { font-family: 'UTM Avo', Arial, sans-serif; font-weight: 700; font-size: 24px; color: #fff; }
.tm-footer__tagline { margin: 4px 0 0; font-size: 13px; color: rgba(255,255,255,0.85); }
.tm-footer__contact-block { flex: 1 1 220px; text-align: left; }
.tm-footer__address,
.tm-footer__contact { color: #fff; font-size: 15px; line-height: 1.6; margin: 0; }
.tm-footer__address { margin-bottom: 14px; }
.tm-footer__contact a { color: #fff; }
.tm-footer__nav { flex: 1 1 160px; text-align: left; }
.tm-menu--footer {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 12px;
}
.tm-menu--footer li { text-align: left; }
.tm-menu--footer a {
	color: #fff;
	text-decoration: none;
	font-family: inherit;
	font-weight: 400;
	font-size: 15px;
	opacity: 0.85;
	transition: opacity 0.2s ease;
}
.tm-menu--footer a:hover { opacity: 1; }
.tm-footer__copyright {
	text-align: center;
	border-top: 1px solid rgba(255,255,255,0.2);
	padding: 20px 0;
	margin: 0;
	font-size: 14px;
	color: rgba(255,255,255,0.8);
}
.tm-footer__credit {
	display: inline-block;
	margin-top: 4px;
	font-size: 13px;
	/* Cùng màu với nền footer (--tm-color-brand) -> ẩn dòng chữ đi, chỉ còn
	   thấy khi bôi đen/chọn text (easter egg), không hiện ra bình thường. */
	color: var(--tm-color-brand);
}

@media (max-width: 600px) {
	.tm-footer__inner { flex-direction: column; gap: 24px; }
}

/* ---- Responsive chung ---- */
@media (max-width: 768px) {
	.tm-mv-row,
	.tm-mv-row--reverse { flex-direction: column; }
	.tm-contact__info { gap: 32px; }
	.tm-header__nav { left: 20px; }
}

@media (max-width: 480px) {
	.tm-work__card,
	.tm-highlights__card {
		height: auto;
		flex-direction: column;
	}
	.tm-work__card-image { width: 100%; height: 160px; }
	.tm-highlights__card-image { width: 100%; height: 140px; }
}