/* =========================================================================
   Geru — sales.css
   TRANG BÁN KHOÁ HỌC: hero người dạy, dải cam kết, bằng chứng, giáo trình,
   cột mua sticky, tiểu sử giảng viên.

   Nguyên tắc — giống learn.css:
   - KHÔNG có mã màu hex mới. Mọi màu đều là token đã khai báo ở main.css.
   - Hero luôn TỐI ở cả hai chế độ. Muốn vậy phải đổi vai trò token trong khối
     @media (prefers-color-scheme: dark) — vì ở chế độ sáng --ink là nâu-đen,
     còn ở chế độ tối --ink lại là màu chữ sáng. Đây là chỗ DUY NHẤT trong file
     có @media theo màu, và nó chỉ gán lại token, không đặt màu mới.
   - Cam --brand chỉ dùng cho: nút hành động chính, huy hiệu số bài, giá bán.
   - Dưới 800px: một cột, cột mua bỏ sticky.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. KHUNG TRANG
   ---------------------------------------------------------------------- */

/* Hero phải chạm sát header nên bỏ khoảng đệm dọc của .site-main.
   Selector thứ hai đặc hiệu hơn để chắc chắn thắng learn.css (trang khoá học
   mang cả class geru-learn-screen lẫn geru-sales). */
body.geru-sales .site-main,
body.geru-sales.geru-learn-screen .site-main {
	padding-block: 0;
	gap: 0;
}

.geru-sales-page {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.geru-sales-body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-8);
	padding-block: var(--sp-7);
}

.geru-sales-title {
	font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
	font-weight: 840;
	letter-spacing: -0.03em;
	line-height: 1.15;
	color: var(--ink);
}

/* -------------------------------------------------------------------------
   2. HERO — người dạy dẫn đầu
   ---------------------------------------------------------------------- */

.geru-sales-hero {
	/* Vai trò token cho nền tối ở CHẾ ĐỘ SÁNG. */
	--hero-bg: var(--ink);
	--hero-face: var(--ground);
	--hero-dim: var(--ink-4);
	--hero-line: var(--ink-2);

	background: var(--hero-bg);
	color: var(--hero-face);
	padding-block: var(--sp-8);
}

@media (prefers-color-scheme: dark) {
	.geru-sales-hero {
		/* Chế độ tối: --ink đã là màu chữ sáng, nên phải đảo lại vai trò. */
		--hero-bg: var(--surface);
		--hero-face: var(--ink);
		--hero-dim: var(--ink-3);
		--hero-line: var(--line-2);
	}
}

.geru-sales-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: var(--sp-7);
	align-items: center;
}

.geru-sales-hero__text {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	min-width: 0;
}

.geru-sales-hero__eyebrow {
	font-size: 0.72rem;
	font-weight: 720;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	line-height: 1.4;
	color: var(--hero-dim);
}

/* Câu trích dẫn lớn — nhân vật chính của hero. */
.geru-sales-hero__quote {
	border: 0;
	padding: 0;
	margin: 0;
	color: var(--hero-face);
	font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.9rem);
	font-weight: 820;
	letter-spacing: -0.035em;
	line-height: 1.14;
	text-wrap: balance;
	max-width: 20ch;
}

/* Chỉ đóng ngoặc kép khi đó thật sự là lời giảng viên nói. */
.geru-sales-hero__quote.is-quote p::before {
	content: "“";
	color: var(--brand);
}

.geru-sales-hero__quote.is-quote p::after {
	content: "”";
	color: var(--brand);
}

.geru-sales-hero__sign {
	font-size: 0.95rem;
	font-weight: 620;
	line-height: 1.5;
	color: var(--hero-dim);
}

.geru-sales-hero__course {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--hero-line);
	font-size: 1.05rem;
	font-weight: 780;
	letter-spacing: -0.02em;
	line-height: 1.3;
	color: var(--hero-face);
	text-transform: none;
	max-width: 42ch;
}

.geru-sales-hero__course-label {
	font-size: 0.68rem;
	font-weight: 720;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--hero-dim);
}

/* Cột phải — ảnh chân dung + huy hiệu số bài. */
.geru-sales-hero__media {
	position: relative;
	min-width: 0;
}

.geru-sales-hero__portrait {
	overflow: hidden;
	border-radius: var(--r-xl);
	border: 1px solid var(--hero-line);
	background: var(--brand-gradient);
	aspect-ratio: 4 / 5;
	display: flex;
	align-items: center;
	justify-content: center;
}

.geru-sales-hero__portrait img,
.geru-sales-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* Không có ảnh: khối gradient thương hiệu + chữ cái đầu, KHÔNG để vỡ ảnh. */
.geru-sales-hero__portrait.is-blank {
	background: var(--brand-gradient);
}

.geru-sales-hero__initial {
	font-size: clamp(3rem, 2rem + 6vw, 6rem);
	font-weight: 860;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--on-brand);
	text-transform: uppercase;
}

.geru-sales-hero__badge {
	position: absolute;
	left: calc(-1 * var(--sp-4));
	bottom: var(--sp-5);
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--r-lg);
	background: var(--brand-gradient);
	color: var(--on-brand);
	box-shadow: var(--shadow-3);
	text-align: center;
}

.geru-sales-hero__badge-num {
	font-size: 1.6rem;
	font-weight: 860;
	letter-spacing: -0.035em;
	line-height: 1.05;
}

.geru-sales-hero__badge-label {
	font-size: 0.68rem;
	font-weight: 720;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

/* -------------------------------------------------------------------------
   3. DẢI BA CAM KẾT
   ---------------------------------------------------------------------- */

.geru-sales-promise {
	background: var(--sunken);
	border-bottom: 1px solid var(--line);
}

.geru-sales-promise__inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-5);
	padding-block: var(--sp-5);
}

.geru-sales-promise__item {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding-left: var(--sp-4);
	border-left: 2px solid var(--brand);
}

.geru-sales-promise__title {
	font-size: 0.98rem;
	font-weight: 780;
	letter-spacing: -0.02em;
	line-height: 1.3;
	color: var(--ink);
}

.geru-sales-promise__text {
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--ink-2);
}

/* -------------------------------------------------------------------------
   4. HAI CỘT: nội dung + cột mua
   ---------------------------------------------------------------------- */

.geru-sales-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--sp-7);
	align-items: start;
}

.geru-sales-main {
	display: flex;
	flex-direction: column;
	gap: var(--sp-8);
	min-width: 0;
}

/* -------------------------------------------------------------------------
   5. BẰNG CHỨNG — kết quả học viên
   ---------------------------------------------------------------------- */

.geru-sales-proof {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

.geru-sales-proof__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-4);
}

.geru-sales-proof__card {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	margin: 0;
	padding: var(--sp-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
}

.geru-sales-proof__result {
	font-size: 1.08rem;
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.3;
	color: var(--ink);
}

.geru-sales-proof__quote {
	border: 0;
	padding: 0;
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--ink-2);
}

.geru-sales-proof__quote p::before { content: "“"; }
.geru-sales-proof__quote p::after { content: "”"; }

.geru-sales-proof__name {
	margin-top: auto;
	padding-top: var(--sp-3);
	border-top: 1px solid var(--line);
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--ink-3);
}

/* Dải ba con số — lấy thật từ cơ sở dữ liệu. */
.geru-sales-figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
	gap: var(--sp-5);
	padding: var(--sp-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
}

.geru-sales-figure {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}

.geru-sales-figure__value {
	font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem);
	font-weight: 860;
	letter-spacing: -0.04em;
	line-height: 1.05;
	color: var(--ink);
}

.geru-sales-figure__label {
	font-size: 0.84rem;
	line-height: 1.45;
	color: var(--ink-3);
	max-width: 24ch;
}

/* -------------------------------------------------------------------------
   6. GIÁO TRÌNH
   ---------------------------------------------------------------------- */

.geru-sales-curriculum {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.geru-sales-curriculum__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
	flex-wrap: wrap;
}

.geru-sales-chapters {
	display: flex;
	flex-direction: column;
	list-style: none;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	overflow: hidden;
}

.geru-sales-chapter {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr) auto;
	align-items: baseline;
	gap: var(--sp-3);
	padding: var(--sp-4);
	border-bottom: 1px solid var(--line);
}

.geru-sales-chapter:last-child {
	border-bottom: 0;
}

.geru-sales-chapter__num {
	font-size: 0.85rem;
	font-weight: 780;
	color: var(--ink-4);
	letter-spacing: -0.01em;
}

.geru-sales-chapter__title {
	font-size: 0.98rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.35;
	color: var(--ink);
	min-width: 0;
}

.geru-sales-chapter__count {
	font-size: 0.8rem;
	color: var(--ink-3);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   7. MÔ TẢ KHOÁ HỌC
   ---------------------------------------------------------------------- */

.geru-sales-about {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.geru-sales-about__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	max-width: var(--wrap-narrow);
	color: var(--ink-2);
	font-size: 1.02rem;
	line-height: 1.72;
}

.geru-sales-about__body h2,
.geru-sales-about__body h3,
.geru-sales-about__body h4 {
	color: var(--ink);
	margin-top: var(--sp-3);
}

.geru-sales-about__body ul,
.geru-sales-about__body ol {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding-left: 1.35rem;
}

.geru-sales-about__body ul { list-style: disc; }
.geru-sales-about__body ol { list-style: decimal; }

.geru-sales-about__body li::marker {
	color: var(--brand);
}

.geru-sales-about__body img {
	border-radius: var(--r-md);
}

/* -------------------------------------------------------------------------
   8. CỘT MUA — sticky
   ---------------------------------------------------------------------- */

.geru-sales-buy {
	position: sticky;
	top: calc(68px + var(--sp-4));
	min-width: 0;
}

.geru-sales-buy__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: var(--sp-5);
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-2);
}

.geru-sales-buy__course {
	font-size: 0.92rem;
	font-weight: 760;
	letter-spacing: -0.02em;
	line-height: 1.35;
	color: var(--ink);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--line);
}

.geru-sales-buy__was {
	font-size: 1rem;
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
}

.geru-sales-buy__was del {
	text-decoration: line-through;
	text-decoration-thickness: 1.5px;
}

.geru-sales-buy__now {
	font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.2rem);
	font-weight: 860;
	letter-spacing: -0.04em;
	line-height: 1.05;
	color: var(--brand-ink);
	font-variant-numeric: tabular-nums;
}

.geru-sales-buy__owned {
	font-size: 0.92rem;
	font-weight: 720;
	color: var(--brand-ink);
}

.geru-sales-buy__cta {
	width: 100%;
	text-align: center;
}

.geru-sales-buy__note {
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--ink-3);
}

.geru-sales-buy__includes {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--line);
}

.geru-sales-buy__includes-title {
	font-size: 0.7rem;
	font-weight: 760;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--ink-3);
}

.geru-sales-buy__includes ul {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	list-style: none;
	padding: 0;
}

.geru-sales-buy__includes li {
	position: relative;
	padding-left: var(--sp-5);
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--ink-2);
}

/* Dấu tích vẽ bằng CSS thuần — không cần file ảnh, không cần font icon. */
.geru-sales-buy__includes li::before {
	content: "";
	position: absolute;
	left: 0.25rem;
	top: 0.42rem;
	width: 0.3rem;
	height: 0.6rem;
	border: solid var(--brand);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* -------------------------------------------------------------------------
   9. TIỂU SỬ GIẢNG VIÊN — cuối trang
   ---------------------------------------------------------------------- */

.geru-sales-bio {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	padding-top: var(--sp-7);
	border-top: 1px solid var(--line);
}

.geru-sales-bio__card {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	gap: var(--sp-5);
	align-items: start;
	max-width: 68ch;
}

.geru-sales-bio__portrait {
	width: 112px;
	height: 112px;
	overflow: hidden;
	border-radius: var(--r-pill);
	border: 1px solid var(--line);
	background: var(--brand-gradient);
}

.geru-sales-bio__portrait img,
.geru-sales-bio__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--r-pill);
}

.geru-sales-bio__text {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	min-width: 0;
}

.geru-sales-bio__name {
	font-size: 1.15rem;
	font-weight: 820;
	letter-spacing: -0.03em;
	line-height: 1.2;
	color: var(--ink);
}

.geru-sales-bio__headline {
	font-size: 0.9rem;
	color: var(--ink-3);
}

.geru-sales-bio__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	color: var(--ink-2);
	font-size: 0.98rem;
	line-height: 1.7;
}

/* -------------------------------------------------------------------------
   10. RESPONSIVE
   ---------------------------------------------------------------------- */

@media (max-width: 1000px) {
	.geru-sales-cols {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: var(--sp-5);
	}

	.geru-sales-proof__grid {
		grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	}
}

/* Dưới 800px: một cột, cột mua bỏ sticky và nhảy lên trên phần nội dung. */
@media (max-width: 800px) {
	.geru-sales-hero {
		padding-block: var(--sp-6);
	}

	.geru-sales-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-5);
	}

	.geru-sales-hero__media {
		max-width: 320px;
	}

	.geru-sales-hero__badge {
		left: auto;
		right: var(--sp-4);
		bottom: var(--sp-4);
	}

	.geru-sales-promise__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-4);
	}

	.geru-sales-body {
		gap: var(--sp-7);
		padding-block: var(--sp-6);
	}

	.geru-sales-cols {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-6);
	}

	.geru-sales-buy {
		position: static;
		top: auto;
		order: -1;
	}

	.geru-sales-main {
		gap: var(--sp-7);
	}

	.geru-sales-proof__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.geru-sales-chapter {
		grid-template-columns: 2rem minmax(0, 1fr);
		row-gap: var(--sp-1);
		padding: var(--sp-3) var(--sp-4);
	}

	.geru-sales-chapter__count {
		grid-column: 2;
	}

	.geru-sales-bio__card {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-4);
	}
}

@media (max-width: 480px) {
	.geru-sales-hero__quote {
		max-width: none;
	}

	.geru-sales-figures {
		padding: var(--sp-4);
	}
}

/* -------------------------------------------------------------------------
   11. IN
   ---------------------------------------------------------------------- */

@media print {
	.geru-sales-buy,
	.geru-sales-hero__badge {
		display: none;
	}

	.geru-sales-hero {
		background: none;
		color: inherit;
		padding-block: var(--sp-5);
	}

	.geru-sales-cols {
		grid-template-columns: 1fr;
	}
}

/* Số liệu thay thế khi giảng viên chưa nhập tiểu sử */
.geru-sales-bio__facts{
  margin:10px 0 0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:6px;
  font-size:.94rem; color:var(--ink-2);
}
.geru-sales-bio__facts li{ position:relative; padding-left:18px; }
.geru-sales-bio__facts li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:7px; height:7px; border-radius:50%; background:var(--brand);
}