/**
 * Customer Referral — 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 + engine sticky-step)
 *
 * CSS riêng của từng section nằm ở
 * template-parts/Round13/page-customer-referral/section-<ten>/assets/styles.css
 *
 * Figma: Landing page - 6 highlight features (zpuaotbMfsA7iswwOSPjv6)
 *   page (2) Customer referral 4001:31
 *   desktop 4095-4493 · laptop 4095-5677 · tablet 4095-5818 · mobile 4095-5933
 */

/* ============================================================================
   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)

   ⚠ NGOẠI LỆ — 640px: ở 3 chỗ, frame tablet 834 và frame mobile 390 của Figma
   KHÔNG giống nhau, nên không thể gộp chung:
     §1 hero      ảnh 794×364 (tỉ lệ 2.18, giống desktop) vs 350×380 (tỉ lệ 0.92)
                  → 2 asset khác nhau, đổi bằng <picture>
     §6 set-live  ảnh thụt vào 80px mỗi bên (794→634) vs tràn full (350)
     §8 testimonial  tablet VẪN 2 cột (quote 494 | số 276) vs mobile xếp dọc
   Đây KHÔNG phải breakpoint layout thứ ba: dưới 640 và trên 640 vẫn cùng một
   layout mobile, chỉ khác bản cắt ảnh / khoảng thụt / số cột của riêng §8.
   Đã báo lại design — xem all_view_customer_referral.md "Việc cần chốt".
   ============================================================================ */

/* Header / footer-cta / footer nằm NGOÀI #customer-referral 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-customer-referral.is-dark .header-r11.is-scrolled,
body.page-template-page-customer-referral.is-dark .header-r11.is-scrolled .header-r11__bar,
body.page-template-page-customer-referral.is-dark .header-r11__demo,
body.page-template-page-customer-referral.is-dark .header-r11__drawer,
body.page-template-page-customer-referral.is-dark .header-r11__drawer-demo,
body.page-template-page-customer-referral.is-dark .header-r11__drawer-l1,
body.page-template-page-customer-referral.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 #customer-referral.
   Dùng :where() để specificity = 0, tránh đè lên class component. */
:where(#customer-referral),
:where(#customer-referral *),
:where(#customer-referral *::before),
:where(#customer-referral *::after) {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0 solid;
	min-width: 0;
}

#customer-referral {
	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(#customer-referral img),
:where(#customer-referral svg),
:where(#customer-referral video) {
	display: block;
	max-width: 100%;
}

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

:where(#customer-referral ul),
:where(#customer-referral ol) {
	list-style: none;
}

:where(#customer-referral 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 1363 = 140 + 1083 + 140 · stats 747 = 140 + 467 + 140
     mobile   stats 966 =  72 +  822 +  72
     mobile   hero 1144 = 140 + 864 + 140  ← hero GIỮ 140 cả ở mobile
   ============================================================ */
.cr-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. */
	.cr-section {
		padding-block: 72px;
	}

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

.cr-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) */
.cr-stack {
	display: flex;
	flex-direction: column;
	gap: var(--section-gap);
}

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

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

/* 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. */
.cr-description {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4;
	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 (khác trang
   Creator Discovery hạ còn 16). Kiểm chứng trên frame mobile:
     hero 4095:5939 → 350×168 = 6 dòng × 20 × 1.4 ✓
     §3   4095:6008 → 350×84  = 3 dòng × 20 × 1.4 ✓
   Riêng §7 Track data mới hạ xuống 16 ở mobile (4104:10255 → 350×110 = 5 dòng
   × 16 × 1.4) — ghi đè trong section-dashboard/assets/styles.css. */
.cr-description--description-lg {
	font-size: 20px;
}

/* label/LABEL-*-CAP */
.cr-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 — Figma: nhãn "REVENUE FROM CUSTOMER REFERRAL" cao 16 (§8) */
.cr-label--lg {
	font-size: var(--fs-label-lg);
}

/* headings-number/* — Konstant Grotesk Book, weight 400, lh 115%.
   Global có --font-display cho đúng mục đích này ("Display & Large Numbers") nhưng
   fallback của nó là `sans-serif` chứ không phải DM Sans, mà theme chưa có
   @font-face cho Konstant Grotesk nên dùng vào là chữ rơi về font hệ thống.
   Viết stack inline giống page-customer-success/section-hero (dòng 212) — cùng
   cách xử lý đã có sẵn trong repo. Khi nào thêm @font-face thì tự đúng.
   → Xem "Việc cần chốt" #3 trong all_view_customer_referral.md */
.cr-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)
   ============================================================ */
.cr-headings {
	display: flex;
	flex-direction: column;
	gap: var(--var-28);
}

.cr-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 */
.cr-headings__badges {
	display: flex;
	align-items: center;
	align-self: flex-start;
	gap: var(--var-6);
}

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

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

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

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

.cr-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. */
.cr-headings:not(.cr-headings--split) > .cr-headings__block .cr-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). */
.cr-headings:not(.cr-headings--split) > .cr-headings__block .cr-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) {
	.cr-headings--split .cr-headings__main {
		flex-direction: row;
		align-items: flex-start;
	}

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

	.cr-headings--split .cr-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)
   ============================================================ */
.cr-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;
}

.cr-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);
}

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

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

.cr-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);
}

.cr-bfs-badge__icon,
.cr-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)
   ============================================================ */
.cr-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;
}

.cr-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. */
.cr-btn--primary {
	background: var(--color-2nd-btn-bg);
	color: var(--color-2nd-btn-fg);
}

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

/* ============================================================
   Component: logo-carousel-high-tier
   Figma: instance rộng CỐ ĐỊNH 1454 ở cả 4 viewport, chỉ đổi toạ độ x để canh
   giữa (desktop −27 · laptop −91 · tablet −330 · mobile −552) → marquee.
   Dùng lại đúng component + 12 file logo của page-creator-discovery.
   Effect "Logo carousel" (spec khách): auto chạy phải → trái, loop = TRUE.
   ============================================================ */
.cr-logo-carousel {
	position: relative;
	width: 100%;
	height: 44px;
	display: flex;
	align-items: center;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 15.38%, #000 85.1%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 15.38%, #000 85.1%, rgba(0, 0, 0, 0) 100%);
}

.cr-logo-carousel__track {
	display: flex;
	align-items: center;
	gap: var(--var-52);
	width: max-content;
	padding-right: var(--var-52);
	animation: cr-marquee 40s linear infinite;
}

.cr-logo-carousel__item {
	flex: none;
	height: 24px;
	display: flex;
	align-items: center;
}

.cr-logo-carousel__item img {
	height: 24px;
	width: auto;
	object-fit: contain;
}

@keyframes cr-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.cr-logo-carousel__track {
		animation: none;
	}
}

/* ============================================================================
   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-cr-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.
   ============================================================================ */
/* Đường cong cubic-bezier(0.22, 0.61, 0.36, 1) còn dùng ở section-steps —
   sửa thì sửa cả 2 file cho khớp. */

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

#customer-referral.cr-motion-ready [data-cr-reveal].is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Khối pin (sticky) — dùng cho §4 5 steps */
.cr-pin-track {
	position: relative;
}

.cr-pin {
	position: sticky;
	top: var(--cr-pin-top, 0px);
}

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

	#customer-referral * {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}