/**
 * Fraud Detection — lớp dùng chung của trang (1 file duy nhất)
 *
 * Gồm 3 phần, đọc từ trên xuống:
 *   1. Màu & breakpoint — trang KHÔNG khai token riêng, xem ghi chú PHẦN 1
 *   2. Reset + layout primitive + component dùng chung
 *   3. Lớp chuyển động dùng chung (reveal)
 *
 * CSS riêng của từng section nằm ở
 * template-parts/Round13/page-fraud-detection/section-<ten>/assets/styles.css
 *
 * Figma: Landing page - 6 highlight features (zpuaotbMfsA7iswwOSPjv6)
 *   desktop 4435-4073 · laptop 4435-7841 · mobile 4435-23466 (không có frame tablet)
 *
 * Khuôn lấy từ trang Customer Referral (assets/Round13/page-customer-referral/base.css,
 * nhánh feature/st-3116) — tách bản riêng prefix fd- để 2 trang độc lập.
 */

/* ============================================================================
   PHẦN 1 — MÀU & BREAKPOINT

   Trang KHÔNG tự khai custom property nào. Mọi giá trị lấy thẳng từ bộ token
   chung ở assets/css/global.css (--var-*, --fs-*, --color-*, --section-*,
   --container-max, --font-body); cái nào global không có thì ghi cứng tại chỗ.

   Trang này nền TỐI, còn global mặc định nền sáng. Không remap --color-1st-*
   nữa — dùng thẳng bộ "reverse" mà global đã khai sẵn ngay trong :root của bản
   sáng, giá trị đúng bằng bản tối:
       --color-reverse-bg      #050505   (assets/css/global.css:381)  → nền
       --color-reverse-fg      #FFFFFF   (:388)                       → chữ
       --color-reverse-stroke  #4A4949   (:390)                       → đường kẻ
   Nút đảo vai: nút chính trên nền tối là nút TRẮNG, tức bộ --color-2nd-btn-* của
   global; nút phụ là bộ --color-1st-btn-*. Đổi màu ở global là trang đổi theo.

   Chỉ đúng MỘT giá trị global không có bản tối: chữ mờ rgba(255,255,255,.8)
   (global chỉ khai --color-2nd-fg cho nền sáng) → ghi cứng tại từng chỗ dùng.

   Figma có 4 frame, LAYOUT chỉ có 2 (đúng Rule 1):
     desktop 1920 ≡ laptop 1336  -> mặc định
     tablet  834  ≡ mobile 390   -> @media (max-width: 1024px)

   Figma chỉ có 3 frame (desktop 1920 · laptop 1336 · mobile 390), không có tablet.
   Tablet dùng layout mobile, container giãn 350 → 794 (Rule 1 trong
   all_view_fraud_detection.md).
   ============================================================================ */

/* Header / footer-cta / footer nằm NGOÀI #fraud-detection nhưng không đọc
   --color-* của global (đã kiểm: 0 chỗ dùng) — chúng tự lo nền tối bằng .is-dark
   của riêng mình, nên trang không phải đụng tới.

   Ngoại lệ duy nhất: `.is-dark .header-r11` đặt nền #1A1A1A, trong khi nền trang
   là #050505 → hở một vệt xám ở mép trên. Ghi đè THẲNG `background` của đúng 5
   rule mà header lấy nền từ --header-r11-bg (template-parts/Round11/header/
   assets/styles.css dòng 58 · 130 · 162 · 209 · 280), thay vì đặt lại biến đó.
   Selector 4 class (0,4,0) nên luôn thắng rule 1-2 class của component.

   Selector neo ở body vì .header-r11__drawer render ngoài container trang. */
body.page-template-page-fraud-detection.is-dark .header-r11.is-scrolled,
body.page-template-page-fraud-detection.is-dark .header-r11.is-scrolled .header-r11__bar,
body.page-template-page-fraud-detection.is-dark .header-r11__demo,
body.page-template-page-fraud-detection.is-dark .header-r11__drawer,
body.page-template-page-fraud-detection.is-dark .header-r11__drawer-demo,
body.page-template-page-fraud-detection.is-dark .header-r11__drawer-l1,
body.page-template-page-fraud-detection.is-dark .header-r11__drawer-l2 {
	background: var(--color-reverse-bg);
}

/* ============================================================================
   PHẦN 2 — RESET · LAYOUT PRIMITIVE · COMPONENT DÙNG CHUNG

   Giá trị nào global có biến thì dùng biến, không có thì ghi cứng theo Figma.
   Font DM Sans dùng CHUNG bản Google Fonts đã enqueue toàn site (handle 'dm-sans').
   ============================================================================ */

/* Reset — scope trong #fraud-detection.
   Dùng :where() để specificity = 0, tránh đè lên class component. */
:where(#fraud-detection),
:where(#fraud-detection *),
:where(#fraud-detection *::before),
:where(#fraud-detection *::after) {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0 solid;
	min-width: 0;
}

#fraud-detection {
	font-family: var(--font-body);
	background: var(--color-reverse-bg);
	color: var(--color-reverse-fg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

:where(#fraud-detection img),
:where(#fraud-detection svg),
:where(#fraud-detection video) {
	display: block;
	max-width: 100%;
}

/* theme global.css đặt a { display: block } — trả về mặc định inline */
:where(#fraud-detection a) {
	display: inline;
	color: inherit;
	text-decoration: none;
}

:where(#fraud-detection ul),
:where(#fraud-detection ol) {
	list-style: none;
}

:where(#fraud-detection button) {
	font: inherit;
	color: inherit;
	background: none;
	cursor: pointer;
}

/* ============================================================
   Layout primitives
   Figma: mọi section = FRAME full-bleed, fill 1st-bg,
   padding-inline = section-horizontal-padding (32 / 20),
   padding-block  = 140 (desktop/laptop) · 72 (tablet/mobile).

   Kiểm chứng padding-block trên frame Figma:
     desktop  hero 1143 = 140 + 863 + 140 · fraud 1059 = 140 + 779 + 140
     mobile   fraud 1231 =  72 + 1087 +  72
     mobile   hero 896.5 = 140 + 616.5 + 140  ← hero GIỮ 140 cả ở mobile
   ============================================================ */
.fd-section {
	background: var(--color-reverse-bg);
	/* --space-section-lg (140) là token semantic sẵn có của global.css */
	padding-block: var(--space-section-lg);
	padding-inline: var(--section-horizontal-padding);
}

@media (max-width: 1024px) {
	/* 72 là giá trị của Figma, thang --var-* và --space-section-* của global đều
	   không có (global chỉ có sm 80 / lg 140) → ghi thẳng số, không đẻ token mới. */
	.fd-section {
		padding-block: 72px;
	}

	.fd-section--hero {
		padding-block: var(--space-section-lg);
	}
}

.fd-container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
}

/* content-wrapper dọc, khoảng cách mặc định = section-gap (80 / 40) */
.fd-stack {
	display: flex;
	flex-direction: column;
	gap: var(--section-gap);
}

/* ============================================================
   Typography — headings/heading-* + description
   ============================================================ */
.fd-heading {
	font-family: var(--font-heading);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0;
	color: var(--color-reverse-fg);
}

.fd-heading--h1 { font-size: var(--fs-h1); }
.fd-heading--h2 { font-size: var(--fs-h2); }
.fd-heading--h3 { font-size: var(--fs-h3); }
.fd-heading--h4 { font-size: var(--fs-h4); }
.fd-heading--h5 { font-size: var(--fs-h5); }
.fd-heading--h6 { font-size: var(--fs-h6); }

/* Figma xếp dòng theo px NGUYÊN, làm tròn .5 xuống: 58 × 1.15 = 66.7 → 67,
   25 × 1.15 = 28.75 → 29, 18 × 1.15 = 20.7 → 21, 11 × 1.15 = 12.65 → 13
   (hero 4435:4079 cao 238 = h1 2 × 67 …; header nhóm protect mobile 56 = 21 + 6 + 29).
   round(down, x + .49px) = làm tròn .5 xuống. Kiểm chứng bằng so 1:1 qua Figma MCP local:
   cả 12 section (1920 / 1336 / 390) khớp chiều cao 0.00px. Trình duyệt chưa có round()
   giữ 1.15 ở trên (lệch < 1px mỗi dòng). Thẻ hero cố ý không nằm trong danh sách. */
@supports (line-height: round(down, 1.15em, 1px)) {
	/* #fraud-detection: thắng các khai báo line-height: 1.15 trong CSS từng section (nạp sau) */
	#fraud-detection .fd-heading,
	#fraud-detection .fd-number,
	#fraud-detection .fd-exceptions__switch-label,
	#fraud-detection .fd-exc-card__amount-note,
	#fraud-detection .fd-fraud__label,
	#fraud-detection .fd-fraud__title,
	#fraud-detection .fd-fraud__desc,
	#fraud-detection .fd-protect__label {
		line-height: round(down, calc(1.15em + .49px), 1px);
	}
}

/* Figma token "description": DM Sans 16/400, line-height 140%.
   Không dùng --fs-label-lg của global dù cũng 16px: ở mobile global hạ nó xuống 14
   trong khi description phải giữ nguyên 16. */
.fd-description {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	/* 140% × 16 = 22.4 nhưng Figma xếp dòng 22px: card protect mobile 4435:23763
	   mô tả 4 dòng cao 88, 3 dòng cao 66 (không phải 89.6 / 67.2). */
	line-height: 22px;
	letter-spacing: 0;
	/* Chữ mờ trên nền tối. global chỉ khai --color-2nd-fg cho nền sáng
	   (rgba(5,5,5,.8)) và không có biến nào mang bản tối → ghi cứng theo Figma. */
	color: rgba(255, 255, 255, .8);
}

/* Figma token "description-lg": 20px, GIỮ NGUYÊN 20 ở cả mobile. Kiểm chứng:
     hero mobile 4435:23472 cao 304 = 22 + 12 + 73.6 (h1 2 × 36.8) + 16
                                     + 112 (desc 4 dòng × 20 × 1.4) + 28 + 40 ✓ */
.fd-description--description-lg {
	font-size: 20px;
	line-height: 1.4;
}

/* label/LABEL-*-CAP */
.fd-label {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-label-md);
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
}

/* label/LABEL-LG-CAP */
.fd-label--lg {
	font-size: var(--fs-label-lg);
}

/* headings-number/* — Konstant Grotesk Book, weight 400, lh 115%.
   @font-face lấy từ assets/Round11/homepage/fonts/konstant-grotesk.css (enqueue
   cùng trang, handle 'konstant-grotesk'). Fallback về DM Sans thay vì sans-serif
   của --font-display để nếu font chưa tải thì chữ vẫn cùng họ với phần còn lại. */
.fd-number {
	font-family: 'Konstant Grotesk', var(--font-heading);
	font-weight: 400;
	line-height: 1.15;
	color: var(--color-reverse-fg);
}

/* ============================================================
   Component: section-headings
   Figma 4095:4499 (hero split) · 4095:4783 (center) · 4095:4795 (item)

   Cấu trúc đo được trên instance 4095:4499:
     section-headings   VERTICAL gap 28   (button-group y=196, block cao 168)
       └ div            VERTICAL gap 12   (badges cao 22, main y=34)
           ├ badges     HORIZONTAL gap 6
           └ div        gap 16            (heading 784 | description 600 ở hero)
   ============================================================ */
.fd-headings {
	display: flex;
	flex-direction: column;
	gap: var(--var-28);
}

.fd-headings__block {
	display: flex;
	flex-direction: column;
	gap: var(--var-12);
}

/* Figma: frame badges HUG nội dung (306×22), không kéo full bề rộng */
.fd-headings__badges {
	display: flex;
	align-items: center;
	align-self: flex-start;
	gap: var(--var-6);
}

.fd-headings--center .fd-headings__badges {
	align-self: center;
}

.fd-headings__main {
	display: flex;
	flex-direction: column;
	gap: var(--var-16);
}

.fd-headings--center {
	align-items: center;
	text-align: center;
}

.fd-headings--center .fd-headings__block,
.fd-headings--center .fd-headings__main {
	align-items: center;
	width: 100%;
}

.fd-headings__buttons {
	display: flex;
	align-items: center;
	gap: var(--var-12);
}

/* Figma: heading rộng cố định 800 ở cấp section (đo trên 4095:4783 và 4095:4814:
   x=300 w=800 trong 1400 → căn giữa). Hero dùng layout split nên trừ ra.
   max-width: 100% để khi component nằm trong cột hẹp (stat item 320,
   reward item 680) thì co theo cột. */
.fd-headings:not(.fd-headings--split) > .fd-headings__block .fd-heading {
	/* 800 là bề rộng Figma cố định cho cụm heading ở cấp section
	   (đo trên instance 4095:4783 và 4095:4814: x=300 w=800 trong 1400 → căn giữa) */
	width: 800px;
	max-width: 100%;
}

/* Figma: description LUÔN bị giới hạn 600 — kể cả trong cột 680 của §5/§6
   (đo trên 4095:4795: heading 680 nhưng description 600). */
.fd-headings:not(.fd-headings--split) > .fd-headings__block .fd-description {
	/* 600 — Figma giới hạn description ở MỌI instance, kể cả trong cột 680 của
	   §5/§6 (đo trên 4095:4795: heading 680 nhưng description 600) */
	width: 600px;
	max-width: 100%;
}

/* layout "split": hero desktop — heading | description nằm ngang, gap 16.
   Figma 4095:4499: heading 0..784, description 800..1400 (600 rộng). */
@media (min-width: 1025px) {
	.fd-headings--split .fd-headings__main {
		flex-direction: row;
		align-items: flex-start;
	}

	.fd-headings--split .fd-heading {
		flex: 1 1 auto;
	}

	.fd-headings--split .fd-description {
		flex: 0 0 600px;
		max-width: 600px;
	}
}

/* ============================================================
   Component: section-headings/bfs-badge + rating badge
   Figma: badges cao 22, bfs-badge 131×22, divider 1px, badge 163×14 (y+4)
   ============================================================ */
.fd-bfs-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--var-4);
	padding: var(--var-4);
	background: var(--color-semantic-shopify-bg);
	color: var(--color-semantic-shopify-fg);
	overflow: hidden;
}

.fd-bfs-badge__label {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-label-md);
	line-height: 1;
	text-align: center;
	color: var(--color-semantic-shopify-fg);
}

.fd-headings__divider {
	display: block;
	width: 1px;
	align-self: stretch;
	background: var(--color-reverse-stroke);
}

.fd-rating-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--var-4);
}

.fd-rating-badge__label {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-label-md);
	line-height: 1;
	color: var(--color-reverse-fg);
}

.fd-bfs-badge__icon,
.fd-rating-badge__icon {
	width: 14px;
	height: 14px;
	flex: none;
}

/* ============================================================
   Component: button/text — padding 14 / 28, gap 6, radius 100
   Figma button-group hero 164×42 · §5 295×42 (mobile 261×40)
   ============================================================ */
.fd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--var-6);
	padding: var(--var-14) var(--var-28);
	border-radius: 100px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-label-md);
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	transition: opacity .2s ease;
}

.fd-btn:hover {
	opacity: .85;
}

/* Trên nền tối vai của 2 bộ nút trong global đảo lại:
     nút CHÍNH (Figma: nền trắng, chữ đen) = --color-2nd-btn-* của global
     nút PHỤ   (Figma: nền đen, chữ trắng, viền) = --color-1st-btn-*
   Dùng nguyên bộ có sẵn, không định nghĩa lại. */
.fd-btn--primary {
	background: var(--color-2nd-btn-bg);
	color: var(--color-2nd-btn-fg);
}

.fd-btn--secondary {
	background: var(--color-1st-btn-bg);
	color: var(--color-1st-btn-fg);
	box-shadow: 0 0 0 1px var(--color-reverse-stroke);
}

/* ============================================================================
   PHẦN 3 — LỚP CHUYỂN ĐỘNG DÙNG CHUNG

   Yêu cầu cơ bản (spec khách):
     1. Lazy loading — scroll tới đâu hiện effect/nội dung tới đó
     2. Luôn show section title trước (fade in) rồi mới tới nội dung bên dưới
     3. Effect chỉ chạy 1 lần, reset khi user reload trang

   JS gắn [data-fd-reveal] cho title + từng khối nội dung, IntersectionObserver
   bật .is-revealed một lần rồi unobserve.
   Không có JS (hoặc prefers-reduced-motion) → nội dung hiển thị bình thường.
   ============================================================================ */

/* Chỉ ẩn khi JS đã sẵn sàng — tránh nội dung biến mất nếu JS lỗi */
#fraud-detection.fd-motion-ready [data-fd-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--fd-reveal-delay, 0ms),
		transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--fd-reveal-delay, 0ms);
	will-change: opacity, transform;
}

#fraud-detection.fd-motion-ready [data-fd-reveal].is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Khối pin (sticky) — §2 fraud, §3 exceptions. motion.js pinSteps chỉ gắn
   [data-fd-pinned] + chiều cao track ở desktop khi không reduced-motion. */
.fd-pin-track {
	position: relative;
}

.fd-pin-track[data-fd-pinned] > .fd-pin {
	position: sticky;
	top: var(--fd-pin-top, 0px);
}

@media (prefers-reduced-motion: reduce) {
	#fraud-detection.fd-motion-ready [data-fd-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	#fraud-detection * {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}