/**
 * Anti-leak Discount (ST-3810) — lớp dùng chung của trang.
 *
 * Figma "Landing page - 6 highlight features" (zpuaotbMfsA7iswwOSPjv6),
 * page "(4) Anti-leak discount" 4368:2609
 *   desktop 4368:2742 · laptop 4372:6664 · phone 4372:8799
 *
 * Gồm 3 phần:
 *   1. Design token   — dark scope + token hình học riêng của trang
 *   2. Reset + layout primitive + component dùng chung của design system
 *   3. Ghi chú lớp chuyển động (dùng lại compound, không khai báo lại ở đây)
 *
 * CSS riêng từng section: template-parts/Round16/anti-leak/section-<ten>/assets/styles.css
 *
 * Breakpoint: ĐÚNG 2 mốc theo rule của project
 *   > 1024px   desktop  (Figma desktop 1920 + laptop 1336)
 *   <= 1024px  tablet + mobile dùng chung (Figma phone 390)
 *
 * Ghi chú refactor (KHÔNG thuộc scope ST-3810, không chặn gì):
 * PHẦN 2 ở đây và lớp tương ứng của Round13 cùng ý tưởng nhưng KHÔNG dùng chung
 * selector nào — đối chiếu bằng script: 49 selector của file này so với 56 của
 * assets/Round13/page-creator-discovery/base.css, **trùng chính xác 0**
 * (R16 tiền tố `.al-*`, R13 tiền tố `.cd-*`). Nghĩa là file này KHÔNG phải bản
 * copy-paste của component hard-code cho trang khác, nên claude.md dòng 72
 * không áp dụng. Gộp 2 lớp lại vẫn là ý hay để giảm lặp, nhưng đó là task
 * refactor riêng có regression cho các trang live — không làm kèm ticket này.
 */

/* ============================================================================
   PHẦN 1 — DESIGN TOKEN

   Trang dùng THẲNG bộ token chung ở assets/css/global.css
   (--var-* / --fs-* / --lh-* / --color-* / --section-* / --container-max /
   --font-body / --font-display). Ở đây chỉ khai báo:
     a) giá trị DARK ghi đè trong phạm vi trang (global.css mặc định là light)
     b) token hình học chỉ có ở Figma của trang này
   ============================================================================ */

/* Bản DARK của design system. global.css có sẵn scope `.is-dark` (đang comment)
   với đúng bộ giá trị này; ghi đè trong phạm vi trang để không đụng 3 trang tối
   còn lại (enterprise / switch-to-uppromote / creator-discovery).
   Phải đặt trên `body.page-template-...` vì header / footer-cta / footer nằm
   NGOÀI #anti-leak nhưng vẫn phải lấy đúng nền trang.
   Figma variable: 1st-bg #050505 · 2nd-bg #1a1a1a · 1st-fg #ffffff ·
   2nd-fg #ffffffcc · stroke #4a4949 · 3rd-brd #ddedfc (xem get_variable_defs). */
body.page-template-page-anti-leak-discount {
	--color-1st-bg: #050505;
	--color-2nd-bg: #1a1a1a;
	--color-3rd-bg: #333333;
	--color-reverse-bg: #ffffff;

	--color-1st-fg: #ffffff;
	--color-2nd-fg: rgba(255, 255, 255, .8);
	--color-disabled-fg: rgba(255, 255, 255, .24);
	--color-reverse-fg: #050505;

	--color-stroke: #4a4949;
	--color-reverse-stroke: #d3d3d3;

	--color-3rd-brd: #ddedfc;

	--color-1st-btn-bg: #ffffff;
	--color-1st-btn-fg: #050505;
	--color-2nd-btn-bg: #050505;
	--color-2nd-btn-fg: #ffffff;
	--color-3rd-btn-fg: #ffffff;
}

/* Header dùng cơ chế `is-dark` của theme (template đăng ký trong $dark_templates,
   inc/functions.php → filter body_class). `.is-dark` mặc định cho header nền
   #1A1A1A; Figma "Top Section" của trang này là #050505 nên phải kéo về
   --color-1st-bg cho liền mạch với hero. Giống hệt cách creator-discovery làm. */
body.page-template-page-anti-leak-discount.is-dark .header-r11,
body.page-template-page-anti-leak-discount.is-dark .header-r11__drawer {
	--header-r11-bg: var(--color-1st-bg);
}

/* Token CHỈ có ở Figma của trang này (hình học của frame cụ thể, không phải
   token dùng chung nên không đẩy lên global.css).
   Mọi thứ còn lại dùng thẳng global.css. */
#anti-leak {
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;

	/* Padding dọc của section: Figma giữ NGUYÊN 140px ở cả 2 breakpoint
	   (khác các round trước — global.css hạ --section-vertical-padding xuống
	   72px ở <=1024) nên dùng thẳng --var-140. */

	/* Cột phải của "Say goodbye"/"Introducing": danh sách 4 tab, và cột
	   description của heading row — cùng 460px (Figma 4372:9415 / 4372:9487). */
	/* Figma style "description-lg" 20px. Round13 cũng khai riêng cho trang
	   (--description-lg) thay vì đụng global. */
	--al-description-lg: 20px;

	--al-side-col: 460px;

	/* Tỉ lệ ảnh export (dùng cho aspect-ratio, tránh layout shift) */
	--al-ratio-hero-desktop: 1400 / 724;   /* 4372:10036 */
	/* Khung hero mobile trên Figma (4372:8806) là 350 x 257.8 với fill
	   scaleMode = FILL, tức ảnh export 942x724 bị CROP về tỉ lệ này —
	   không phải tỉ lệ gốc của file export. */
	--al-ratio-hero-mobile: 350 / 257.8;   /* 4372:8806 (crop) · nguồn 4372:10122 */
	--al-ratio-leak: 467 / 360;            /* 4372:10209 */
	--al-ratio-tabs: 876 / 606.4615;       /* 4372:10317 */
	--al-ratio-stop: 626 / 600;            /* 4372:10755 */

	/* Cột trái (ảnh) của section "stop" — Figma 4372:9151 */
	--al-stop-media-col: 626px;
	/* Figma phone 4372:8843: padding-bottom của "stop" là 200, không phải 140 */
	--al-stop-pb-mobile: 200px;

	/* Thẻ tab ở <=1024 (Figma I4372:8841;1092:18118) — hàng cuộn ngang */
	--al-tab-card-w: 130px;
	--al-tab-card-h: 120px;

	/* Ô vuông đánh dấu tab đang mở (Figma 4368:3392, fill 2nd-brd) */
	/* Opacity của tab KHÔNG được chọn (Figma opacity 0.4) */
	--al-tab-dim: .4;

	/* Chỉ báo bước của section "stop" (Figma 4372:9146) */

	/* Nhịp chuyển động dùng chung trong trang */
	--al-ease-out: cubic-bezier(.22, .61, .36, 1);
	--al-swap-ms: 520ms;
}

/* ============================================================================
   PHẦN 2 — RESET · LAYOUT PRIMITIVE · COMPONENT DÙNG CHUNG
   Giá trị lấy từ Figma variable, xem PHẦN 1.
   ============================================================================ */

/* Reset — scope trong #anti-leak, dùng :where() để specificity = 0 nên không
   đè lên class component. global.css còn giữ element style đời cũ
   (h1 { font-size: var(--font-size-H1); letter-spacing: ... }) phải dọn. */
:where(#anti-leak),
:where(#anti-leak *),
:where(#anti-leak *::before),
:where(#anti-leak *::after) {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0 solid;
	min-width: 0;
}

#anti-leak :is(h1, h2, h3, h4, h5, h6),
#anti-leak :is(p, figure, figcaption) {
	margin: 0;
	/* mọi text layer trên Figma đều letter-spacing 0 */
	letter-spacing: normal;
}

#anti-leak {
	font-family: var(--font-body);
	background: var(--color-1st-bg);
	color: var(--color-1st-fg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* clip (không phải hidden) để không tạo scroll container, giữ được
	   position: sticky của các khối pin bên trong */
	overflow-x: clip;
}

:where(#anti-leak img),
:where(#anti-leak svg) {
	display: block;
	max-width: 100%;
}

/* theme global.css đặt a { display: block } — trả lại mặc định inline */
:where(#anti-leak a) {
	display: inline;
	color: inherit;
	text-decoration: none;
}

:where(#anti-leak ul),
:where(#anti-leak ol) {
	list-style: none;
}

:where(#anti-leak button) {
	font: inherit;
	color: inherit;
	background: none;
	cursor: pointer;
	text-align: left;
}

/* ------------------------------------------------------------------
   Layout primitive
   Figma: mọi section = FRAME full-bleed, fill 1st-bg,
   padding-inline = --section-horizontal-padding (32 / 20),
   padding-block  = 140 (cả 2 breakpoint).
   ------------------------------------------------------------------ */
.al-section {
	background: var(--color-1st-bg);
	padding-block: var(--var-140);
	padding-inline: var(--section-horizontal-padding);
}

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

/* ------------------------------------------------------------------
   Typography — headings/heading-* + description
   ------------------------------------------------------------------ */
.al-heading {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	color: var(--color-1st-fg);
}

.al-heading--h1 { font-size: var(--fs-h1); }   /* 58 / 32 */
.al-heading--h2 { font-size: var(--fs-h2); }   /* 48 / 28 */
.al-heading--h5 { font-size: var(--fs-h5); }   /* 25 / 20 */
.al-heading--h6 { font-size: var(--fs-h6); }   /* 20 / 18 */

.al-description {
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: var(--fs-body);           /* 16 ở cả 2 breakpoint */
	line-height: var(--lh-body);
	color: var(--color-2nd-fg);
}

/* Figma `description-lg` — 20px ở cả 2 breakpoint */
.al-description--lg {
	font-size: var(--al-description-lg);
}

/* Số lớn: Figma dùng Konstant Grotesk (headings-number/heading-*) */
.al-number {
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	line-height: var(--lh-heading);
	color: var(--color-1st-fg);
}

/* ------------------------------------------------------------------
   Component: section-headings (Figma 4204:2821 / 4333:13535)
   ------------------------------------------------------------------ */
.al-headings {
	display: flex;
	flex-direction: column;
	gap: var(--var-28);
}

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

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

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

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

/* Figma: component "section-headings/heading" khi đứng giữa section luôn rộng
   cố định 800 — đây là thứ quyết định điểm xuống dòng của heading. */
.al-headings--center .al-heading {
	width: 800px;
	max-width: 100%;
}

/* layout "split" — heading | description nằm ngang.
   hero (4368:2745): heading max 800, description max 600, cùng grow.
   goodbye/introducing (4372:9413): heading grow, description cố định 460. */
@media (min-width: 1025px) {
	.al-headings--split .al-headings__main {
		flex-direction: row;
		/* Figma: 2 cột canh MÉP TRÊN, không canh giữa (description ngắn hơn heading) */
		align-items: flex-start;
	}

	.al-headings--split .al-heading {
		flex: 1 1 0;
		max-width: 800px;
	}

	.al-headings--split .al-headings__desc {
		flex: 1 1 0;
		max-width: 600px;
	}

	/* goodbye / introducing (Figma 4372:9413): description cố định 460,
	   heading ăn phần còn lại nên KHÔNG bị chặn 800 như hero. */
	.al-headings--split-fixed .al-heading {
		max-width: none;
	}

	.al-headings--split-fixed .al-headings__desc {
		flex: 0 0 var(--al-side-col);
		max-width: var(--al-side-col);
	}
}

/* ------------------------------------------------------------------
   Component: section-headings/badges — bfs-badge + rating
   (Figma I4368:2745;4204:2822)
   ------------------------------------------------------------------ */
.al-badges {
	display: flex;
	align-items: center;
	gap: var(--var-6);
}

.al-bfs-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--var-4);
	padding: var(--var-4);
	background: var(--color-semantic-shopify-bg);
	overflow: hidden;
}

.al-bfs-badge__label {
	font-weight: var(--fw-medium);
	font-size: var(--fs-label-md);
	line-height: var(--lh-label);
	text-align: center;
	color: var(--color-semantic-shopify-fg);
	white-space: nowrap;
}

/* divider 1px giữa 2 badge (Figma I4368:2745;4204:2824, stroke #4A4949) */
.al-badges__divider {
	display: block;
	width: 1px;
	align-self: stretch;
	background: var(--color-stroke);
}

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

.al-rating__label {
	font-weight: var(--fw-medium);
	font-size: var(--fs-label-md);
	line-height: var(--lh-label);
	color: var(--color-1st-fg);
	white-space: nowrap;
}

.al-badges__icon {
	width: 14px;
	height: 14px;
	flex: none;
}

/* ------------------------------------------------------------------
   Component: button/text (Figma 4204:2781)
   padding 14/28, gap 6, radius 100, label label-md UPPER
   ------------------------------------------------------------------ */
.al-buttons {
	display: flex;
	align-items: center;
	gap: var(--var-12);
}

.al-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--var-6);
	padding: var(--var-14) var(--var-28);
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-weight: var(--fw-medium);
	font-size: var(--fs-label-md);
	line-height: var(--lh-label);
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	transition: opacity .2s ease;
}

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

.al-btn--primary {
	background: var(--color-1st-btn-bg);
	color: var(--color-1st-btn-fg);
}

/* ------------------------------------------------------------------
   Panel nền phụ — Figma "code" FRAME (fill 2nd-bg, padding 24 / 20)
   Dùng lại ở goodbye, introducing.
   ------------------------------------------------------------------ */
.al-panel {
	background: var(--color-2nd-bg);
	padding: var(--var-24);
	overflow: hidden;
}

/* ============================================================================
   PHẦN 3 — CHUYỂN ĐỘNG

   Yêu cầu cơ bản (SRS "Anti-leak Discount Page"):
     1. Lazy loading — scroll tới đâu hiện 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 reload

   → Dùng LẠI component chung template-parts/compound/_animations
     ([data-fade-section] + [data-fade="header"|"item"], IntersectionObserver
     unobserve sau lần đầu). KHÔNG khai báo lại lớp reveal ở đây.

   → Khối "sticky + scroll đổi bước" dùng LẠI engine chung
     template-parts/compound/_motion/scripts.js (window.CDMotion.pinSteps).
     Chỉ khai báo 2 primitive vị trí ở dưới.
   ============================================================================ */
.al-pin-track {
	position: relative;
}

/* `--cd-pin-top` do chính engine pinSteps gán inline lên phần tử này
   (tên biến giữ nguyên từ Round13 để 2 trang dùng chung 1 engine).
   Fallback 0px để trước khi JS chạy khối vẫn không nhảy. */
.al-pin {
	position: sticky;
	top: var(--cd-pin-top, 0px);
}

@media (prefers-reduced-motion: reduce) {
	#anti-leak *,
	#anti-leak *::before,
	#anti-leak *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

/* ============================================================================
   Breakpoint <= 1024px — tablet + mobile dùng chung
   ============================================================================ */
@media (max-width: 1024px) {
	.al-headings--center .al-heading {
		width: 100%;
	}

	/* Figma phone không có khối pin nào — mọi section xếp dọc bình thường.
	   Engine pinSteps cũng tự tắt ở <=1024 (allowMobile mặc định false),
	   đây chỉ là chốt chặn để sticky không còn tác dụng dù JS lỗi. */
	.al-pin {
		position: static;
	}

	.al-pin-track {
		height: auto !important;
	}
}