/**
 * Section 2: Fraud — "Fraud wears the mask of growth"
 * Figma desktop 4435:4179 · laptop 4435:7947 · mobile 4435:23572
 * Mock UI: design elements 4435:11609 (bản xanh + avatar ảnh).
 *
 * Số đo lấy từ get_metadata + ảnh chụp 1:1 các frame 400×600 (4435:4188, 11700,
 * 11798, 11844, 12277, 12225, mobile 4435:23579). Màu trạng thái chưa có token
 * → ghi cứng tại chỗ dùng, kèm giá trị pixel đã đo.
 */

/* ============================================================
   Accordion — desktop/laptop (> 1024): NGANG, cao 600
   div 1400×600: cột mở (114 + generic) + 2 cột đóng 114, divider dọc 1px
   ============================================================ */
.fd-fraud {
	position: relative;
	display: flex;
	height: 600px;
	/* cqw dùng cho bề rộng panel cố định trong lúc cột co/giãn */
	container-type: inline-size;
}

/* Viền stroke vẽ ĐÈ lên trên (ảnh 400×600 sát mép trái/trên/dưới) */
.fd-fraud::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 1px solid var(--color-reverse-stroke);
	pointer-events: none;
	z-index: 3;
}

.fd-fraud__item {
	position: relative;
	display: flex;
	flex: 0 0 114px;
	overflow: hidden;
	transition: flex-basis 600ms cubic-bezier(0.65, 0, 0.35, 1);
}

/* 1172 = 1400 − 2 × 114 (laptop 1044 = 1272 − 228) */
.fd-fraud__item.is-open {
	flex-basis: calc(100% - 228px);
}

/* divider 1px giữa các cột (vector x=1172 · 1286) */
.fd-fraud__item + .fd-fraud__item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--color-reverse-stroke);
	z-index: 2;
}

.fd-fraud__head {
	flex: 0 0 114px;
	font: inherit;
}

/* item 114×600, padding 32: nhãn xoay ở trên, số ở đáy */
.fd-fraud__trigger {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	width: 114px;
	height: 100%;
	padding: var(--var-32);
	text-align: left;
	color: var(--color-reverse-fg);
}

.fd-fraud__item.is-open .fd-fraud__trigger {
	cursor: default;
}

.fd-fraud__trigger:focus-visible {
	outline: 2px solid var(--color-reverse-fg);
	outline-offset: -4px;
}

/* headings/heading-5 — DM Sans 600 25 / 115%, xoay −90° (đọc từ dưới lên).
   Box 29×139 ở x=32 y=32 (Figma ghi y=171 là gốc xoay). */
.fd-fraud__label {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--fs-h5);
	line-height: 1.15;
	white-space: nowrap;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

/* headings-number/heading-1 — Konstant Grotesk 58 / 115% → cao 67 */
.fd-fraud__number {
	font-size: var(--fs-h1);
}

/* generic 1058 (laptop 930) = ảnh 400 + text. Bề rộng cố định theo container
   (100cqw − 3 × 114) để nội dung không reflow khi cột đang co/giãn. */
.fd-fraud__panel {
	flex: none;
	width: calc(100cqw - 342px);
	height: 100%;
}

.fd-fraud__panel-inner {
	display: flex;
	height: 100%;
}

.fd-fraud__media {
	flex: 0 0 400px;
}

/* item 658 (laptop 530), padding 32, section-headings bám đáy */
.fd-fraud__text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--var-16);
	padding: var(--var-32);
}

/* headings/heading-4 — DM Sans 600 32 / 115%, gạch ngang cố ý */
.fd-fraud__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--fs-h4);
	line-height: 1.15;
	color: var(--color-reverse-fg);
}

/* Gạch ngang vẽ bằng background để chạy được từ trái sang (0 → 100%).
   Mặc định (không JS / reduced-motion) gạch đủ. */
.fd-fraud__strike {
	--fd-strike-h: 2px;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 56%;
	background-size: 100% var(--fd-strike-h);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-size 700ms cubic-bezier(0.65, 0, 0.35, 1);
}

.fd-fraud.is-animated .fd-fraud__strike {
	background-size: 0% var(--fd-strike-h);
}

.fd-fraud.is-animated .fd-fraud__item.is-struck .fd-fraud__strike {
	background-size: 100% var(--fd-strike-h);
}

/* headings/heading-6 — DM Sans 600 20 / 115%, màu 2nd-fg (#ffffffcc) */
.fd-fraud__desc {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--fs-h6);
	line-height: 1.15;
	color: rgba(255, 255, 255, .8);
}

/* mũi tên đầu dòng: rộng ~.55em như Figma + 1 khoảng trắng */
.fd-fraud__arrow {
	display: inline-block;
	width: .55em;
	height: .55em;
	margin-right: .28em;
	vertical-align: -.02em;
}

.fd-fraud__arrow svg {
	width: 100%;
	height: 100%;
}

/* ============================================================
   Mock UI — khung ảnh 400×600 (mobile 350×500)
   Nền: #050505 + bg-dark.webp phủ cover, opacity .5 (khớp pixel 4435:4188:
   fig ≈ 0.5 × ảnh + 2.7)
   ============================================================ */
.fd-mock {
	--fd-blue: #5a96ff;          /* viền/dây xanh đo được (90,150,255) */
	--fd-card-line: #232323;     /* viền card/bubble (35,35,35) */
	--fd-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	position: relative;
	width: 400px;
	height: 600px;
	overflow: hidden;
	background: #050505;         /* 1st-bg */
	font-family: var(--font-body);
	color: var(--color-reverse-fg);
}

.fd-mock__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	opacity: .5;
}

/* Khối (số + card) căn giữa dọc, gap 16, lề ngang 20 → card 360×380 */
.fd-mock__body {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--var-16);
	height: 100%;
	padding-inline: var(--var-20);
}

/* headings-number/heading-4 (Konstant 32 / 115%) + nhãn 14 màu 2nd-fg */
.fd-mock__stat {
	display: flex;
	align-items: baseline;
	gap: var(--var-8);
	white-space: nowrap;
}

.fd-mock__stat-value {
	font-size: var(--fs-h4);
	/* bù side-bearing Konstant: glyph Figma lệch +1/+1 so với trình duyệt */
	position: relative;
	left: 1px;
	top: 1px;
}

.fd-mock__stat-label {
	font-size: 14px;
	line-height: 1.4;
	color: rgba(255, 255, 255, .8);
}

.fd-mock__stage {
	position: relative;
	height: 380px;
}

.fd-mock__card {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border: 1px solid var(--fd-card-line);
	border-radius: 12px;         /* corner-radius-lg */
	background: #050505;
}

.fd-mock__icon {
	display: block;
	flex: none;
	width: 12px;
	height: 12px;
}

/* Nhãn kết luận — pill viền xanh nằm vắt qua mép dưới card (top = đáy − 16) */
.fd-mock__badge {
	position: absolute;
	left: 50%;
	top: calc(100% - 16px);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: var(--var-6);
	height: 28px;
	padding: 0 11px;
	border: 1px solid var(--fd-blue);
	border-radius: 100px;
	background: #050505;
	font-size: 11.5px;
	line-height: 16px;
	white-space: nowrap;
	color: rgba(255, 255, 255, .8);
	opacity: 0;
	transform: translate(-50%, 10px);
	transition: opacity 400ms var(--fd-ease), transform 500ms var(--fd-ease);
}

.fd-mock__badge strong {
	font-weight: 500;
	color: var(--color-reverse-fg);
}

.fd-mock.is-revealed .fd-mock__badge {
	opacity: 1;
	transform: translate(-50%, 0);
	transition-delay: 500ms;
}

/* ---------- Tab 1 · Bot & spam (4435:11619 → 4435:11700) ----------
   11 dòng × 24, gap 12; danh sách căn giữa dọc trong card (lệch −3 như Figma).
   Lộ: cả danh sách phóng 1.5 từ mép trái (dòng 36, bước 54), dịch −69 để 5 dòng
   bot nằm trên nhãn; dòng thường mờ .4; dòng bot đổi avatar → robot, pill xanh. */
.fd-mock__list {
	position: absolute;
	left: var(--var-16);
	top: calc(50% - 192px);
	display: flex;
	flex-direction: column;
	gap: var(--var-12);
	transform-origin: 0 0;
	transition: transform 700ms var(--fd-ease);
}

.fd-mock__row {
	display: flex;
	align-items: center;
	gap: var(--var-8);
	height: 24px;
	transition: opacity 500ms var(--fd-ease);
}

.fd-mock__avatar {
	position: relative;
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	overflow: hidden;
}

.fd-mock__avatar img,
.fd-mock__bubble img {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
}

/* avatar robot — tròn xanh (69,130,255) đậm dần xuống dưới */
.fd-mock__robot {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(180deg, #4279ec, #4582ff);
	color: #fff;
	opacity: 0;
	transition: opacity 400ms var(--fd-ease);
}

.fd-mock__robot .fd-mock__icon {
	width: 11px;
	height: 11px;
}

/* pill giờ: 2nd-bg #1a1a1a, cao 20 */
.fd-mock__time {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;                 /* Figma: mọi pill giờ rộng cố định 62 */
	height: 20px;
	border-radius: 4px;
	background: #1a1a1a;
	font-size: 11.5px;
	line-height: 1;
	color: rgba(255, 255, 255, .8);
	transition: background-color 400ms var(--fd-ease), box-shadow 400ms var(--fd-ease);
}

.fd-mock__name {
	font-size: 12.5px;
	line-height: 1;
	white-space: nowrap;
}

.fd-mock.is-revealed .fd-mock__list {
	transform: translateY(-69px) scale(1.5);
}

.fd-mock.is-revealed .fd-mock__row:not(.is-bot) {
	opacity: .4;
}

.fd-mock.is-revealed .fd-mock__row.is-bot .fd-mock__robot {
	opacity: 1;
	transition-delay: 300ms;
}

/* viền 1px sau khi phóng 1.5 → khai .667px bằng box-shadow (không bị làm tròn) */
.fd-mock.is-revealed .fd-mock__row.is-bot .fd-mock__time {
	background: #192841;
	box-shadow: inset 0 0 0 .667px var(--fd-blue);
	transition-delay: 300ms;
}

/* ---------- Tab 2 · Self-referral (4435:11798 → 4435:11844) ----------
   7 bubble rải rác (toạ độ % trong card, khai inline ở PHP).
   Lộ: viền bubble xanh, dây nối vẽ về tâm, nút tâm Ø58 + IP 73.21.8.14. */
.fd-mock__bubble {
	position: absolute;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: var(--var-6);
	padding: 4px 8px 4px 4px;
	border: 1px solid var(--fd-card-line);
	border-radius: 100px;
	background: #050505;
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
	transition: border-color 400ms var(--fd-ease);
}

.fd-mock__wires {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.fd-mock__wires line {
	stroke: var(--fd-blue);
	stroke-width: 1;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 700ms var(--fd-ease);
}

/* nút tâm: box 58 ở (150,158) trong card 358×378 */
.fd-mock__hub {
	position: absolute;
	left: 41.899%;
	top: 41.799%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border: 1px solid var(--fd-blue);
	border-radius: 50%;
	background: #050505;
	opacity: 0;
	transform: scale(.6);
	transition: opacity 400ms var(--fd-ease), transform 500ms var(--fd-ease);
}

.fd-mock__hub .fd-mock__icon {
	width: 20px;
	height: 20px;
}

/* IP: 84×24 tâm x=180, top 231 trong card; nền (42,68,114) */
.fd-mock__ip {
	position: absolute;
	left: 50.279%;
	top: 61.111%;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 8px;
	border: 1px solid var(--fd-blue);
	border-radius: 6px;
	background: #2a4472;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
	opacity: 0;
	transform: translate(-50%, 6px);
	transition: opacity 400ms var(--fd-ease), transform 500ms var(--fd-ease);
}

.fd-mock.is-revealed .fd-mock__bubble {
	border-color: var(--fd-blue);
}

.fd-mock.is-revealed .fd-mock__wires line {
	stroke-dashoffset: 0;
}

.fd-mock.is-revealed .fd-mock__hub {
	opacity: 1;
	transform: none;
}

.fd-mock.is-revealed .fd-mock__ip {
	opacity: 1;
	transform: translate(-50%, 0);
	transition-delay: 300ms;
}

/* ---------- Tab 3 · Brand bidding (4435:12277 → 4435:12225) ----------
   Nghỉ: chỉ có toast phóng ×2 nằm giữa card (304×118 = 2 × 152×59).
   Lộ: toast thu về góc phải dưới, kết quả Google hiện ra. */
.fd-mock__serp {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: var(--var-16);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 500ms var(--fd-ease), transform 600ms var(--fd-ease);
}

/* ô search 326×38, nền 2nd-bg */
.fd-mock__search {
	display: flex;
	align-items: center;
	gap: var(--var-8);
	height: 38px;
	padding: 0 12px;
	border-radius: 100px;
	background: #1a1a1a;
	font-size: 13px;
	line-height: 1;
}

.fd-mock__search .fd-mock__icon {
	color: rgba(255, 255, 255, .8);
}

/* kết quả Sponsored 328×109: viền xanh, nền (15,22,35) */
.fd-mock__ad,
.fd-mock__result {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.fd-mock__ad {
	margin: 17px -1px 0;
	padding: 13px 11px 10px;
	border: 1px solid var(--fd-blue);
	border-radius: 12px;
	background: #0f1623;
}

.fd-mock__result {
	margin-top: 28px;
	padding-inline: 12px;
}

.fd-mock__chip {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 7px;
	border: 1px solid var(--fd-blue);
	border-radius: 6px;
	background: #2d497b;
	font-size: 13px;
	line-height: 1;
}

/* tiêu đề link kiểu Google (138,180,248) */
.fd-mock__ad-title {
	font-size: 15px;
	font-weight: 600;
	line-height: 18px;
	color: #8ab4f8;
	white-space: nowrap;
}

.fd-mock__ad-url {
	font-size: 13px;
	line-height: 16px;
	color: rgba(255, 255, 255, .8);
}

.fd-mock__ref {
	color: var(--fd-blue);
}

.fd-mock__bar {
	display: block;
	width: 248px;
	max-width: 100%;
	height: 12px;
	margin-top: 10px;
	border-radius: 100px;
	background: #213558;
}

.fd-mock__result .fd-mock__ad-title {
	color: rgba(138, 180, 248, .32);
}

.fd-mock__result .fd-mock__ad-url {
	color: rgba(255, 255, 255, .4);
}

.fd-mock__result .fd-mock__bar {
	background: #0f1623;
}

.fd-mock__result .fd-mock__bar--short {
	width: 158px;
}

/* toast "New sale" — 152×59, nền 2nd-bg, viền (65,65,65) */
.fd-mock__toast {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--var-4);
	width: 152px;                /* Figma: toast 152×59 (bản nghỉ ×2 = 304×118) */
	padding: 11px;
	border: 1px solid #414141;
	border-radius: 12px;
	background: #1a1a1a;
	white-space: nowrap;
	transform: translate(-50%, -50%) scale(2);
	transition:
		left 700ms var(--fd-ease),
		top 700ms var(--fd-ease),
		transform 700ms var(--fd-ease);
}

.fd-mock__toast-title {
	font-size: 11px;
	line-height: 14px;
	color: rgba(255, 255, 255, .8);
}

.fd-mock__toast-value {
	font-size: 15px;
	font-weight: 600;
	line-height: 18px;
}

.fd-mock.is-revealed .fd-mock__serp {
	opacity: 1;
	transform: none;
	transition-delay: 250ms;
}

/* đích: góc phải dưới, cách mép phải 15 / mép dưới 29 (đo 4435:12225) */
.fd-mock.is-revealed .fd-mock__toast {
	left: calc(100% - 15px);
	top: calc(100% - 29px);
	transform: translate(-100%, -100%) scale(1);
}

/* ============================================================
   Mobile / tablet (≤ 1024): accordion DỌC (4435:23575)
   ============================================================ */
@media (max-width: 1024px) {
	.fd-fraud {
		flex-direction: column;
		height: auto;
		container-type: normal;
	}

	.fd-fraud__item {
		display: block;
		flex: none;
		transition: none;
	}

	.fd-fraud__item.is-open {
		flex-basis: auto;
	}

	.fd-fraud__item + .fd-fraud__item::before {
		right: 0;
		bottom: auto;
		width: auto;
		height: 1px;
	}

	/* hàng 350×85, padding 24: số trái, nhãn phải */
	.fd-fraud__trigger {
		flex-direction: row-reverse;
		align-items: center;
		width: 100%;
		height: 85px;
		padding: var(--var-24);
	}

	.fd-fraud__label {
		writing-mode: horizontal-tb;
		transform: none;
	}

	/* mở/đóng chiều cao bằng grid 0fr → 1fr */
	.fd-fraud__panel {
		display: grid;
		grid-template-rows: 0fr;
		width: auto;
		height: auto;
		transition: grid-template-rows 500ms cubic-bezier(0.65, 0, 0.35, 1);
	}

	.fd-fraud__panel[hidden] {
		display: none;
	}

	.fd-fraud__item.is-open .fd-fraud__panel {
		grid-template-rows: 1fr;
	}

	.fd-fraud__panel-inner {
		flex-direction: column;
		height: auto;
		min-height: 0;
		overflow: hidden;
	}

	/* ảnh 350×500; tablet chặn 500 và căn giữa */
	.fd-fraud__media {
		flex: none;
		width: 100%;
		max-width: 500px;
		margin-inline: auto;
	}

	/* text 350×156, padding 24 */
	.fd-fraud__text {
		flex: none;
		padding: var(--var-24);
	}

	.fd-fraud__strike {
		--fd-strike-h: 1.5px;
	}

	.fd-mock {
		width: 100%;
		height: auto;
		aspect-ratio: 350 / 500;
	}

	/* card 300×300 (lề 25) — 4435:23579 */
	.fd-mock__body {
		padding-inline: 25px;
	}

	.fd-mock__stage {
		height: auto;
		aspect-ratio: 1;
	}
}

/* ============================================================
   Reduced motion: tắt hết chuyển động, trạng thái đổi tức thì
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.fd-fraud__item,
	.fd-fraud__panel,
	.fd-fraud__strike,
	.fd-mock *,
	.fd-mock *::before {
		transition: none !important;
	}
}