/* ============================================================================
   LANDING PAGE (/lp/) — phong cách "TẠP CHÍ NÔNG NGHIỆP CAO CẤP"
   Biên tập + tươi mát nhà nông: nền kem, khối hữu cơ, ảnh thật (Unsplash),
   tiêu đề serif Playfair Display, danh sách đánh số, dải ảnh full-bleed,
   trích dẫn nhà vườn, form thu lead 2 cột. Scope toàn bộ trong .cph-lp.
   ============================================================================ */

.cph-lp {
	--font-sans: "Plus Jakarta Sans", "Be Vietnam Pro", ui-sans-serif, sans-serif;
	--font-display: "Plus Jakarta Sans", "Be Vietnam Pro", ui-sans-serif, sans-serif;
	--lp-serif: "Plus Jakarta Sans", "Be Vietnam Pro", sans-serif;
	--lp-cream: #f6f2e8;
	--lp-cream-2: #efe9da;
	--lp-ink: #15301f;
	--lp-line: #e4ddc9;
	background: var(--lp-cream);
}
.cph-lp-main { overflow-x: clip; color: var(--lp-ink); }
.cph-lp .container-x { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: clamp(1.1rem, 0.6rem + 2vw, 2rem); }

/* Khối hữu cơ trang trí (blob) ------------------------------------------------ */
.lp-blob { position: absolute; z-index: 0; border-radius: 50%; filter: blur(8px); pointer-events: none; opacity: 0.55; }
.lp-blob-1 { width: 38vw; height: 38vw; max-width: 520px; max-height: 520px; top: -14%; right: -8%; background: radial-gradient(circle at 35% 35%, color-mix(in oklch, var(--gold) 42%, transparent), transparent 62%); }
.lp-blob-2 { width: 30vw; height: 30vw; max-width: 380px; max-height: 380px; bottom: -16%; left: -10%; background: radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--emerald) 30%, transparent), transparent 64%); opacity: 0.4; }
.lp-blob-3 { width: 24vw; height: 24vw; max-width: 320px; max-height: 320px; top: -12%; left: 4%; background: radial-gradient(circle, color-mix(in oklch, var(--gold) 30%, transparent), transparent 66%); opacity: 0.25; }
.lp-blob-4 { width: 32vw; height: 32vw; max-width: 420px; max-height: 420px; top: -18%; right: -6%; background: radial-gradient(circle, color-mix(in oklch, var(--gold) 26%, transparent), transparent 66%); opacity: 0.3; }

/* Kicker (eyebrow) + tiêu đề mục --------------------------------------------- */
.lp-kicker, .lp-sec-kicker {
	display: inline-flex; align-items: center; gap: 0.5rem;
	font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
	color: color-mix(in oklch, var(--emerald-deep) 72%, var(--gold));
}
.lp-kicker-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px color-mix(in oklch, var(--gold) 22%, transparent); }
.lp-sec-kicker--light { color: color-mix(in oklch, #fff 78%, var(--gold)); }

.lp-sec-head { max-width: 760px; margin-bottom: clamp(1.6rem, 1rem + 2vw, 2.6rem); }
.lp-sec-title {
	font-family: var(--lp-serif); font-weight: 800; line-height: 1.1;
	font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.9rem); color: var(--emerald-deep);
	margin: 0.7rem 0 0; letter-spacing: -0.01em;
}

/* ============ HERO ============ */
.lp-hero { position: relative; overflow: hidden; padding: clamp(2rem, 1rem + 5vw, 4.5rem) 0 clamp(2.5rem, 1rem + 6vw, 5rem); background: linear-gradient(180deg, var(--lp-cream) 0%, var(--lp-cream-2) 100%); }
.lp-hero-leaf { position: absolute; z-index: 0; top: 8%; left: 46%; color: color-mix(in oklch, var(--emerald) 40%, transparent); opacity: 0.18; transform: rotate(-18deg); }
.lp-hero-leaf .icon { width: clamp(60px, 8vw, 120px); height: auto; }
.lp-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; }

.lp-hero-content { max-width: 600px; }
.lp-headline {
	font-family: var(--lp-serif); font-weight: 800; color: var(--emerald-deep);
	font-size: clamp(2.1rem, 1.3rem + 4.2vw, 4.1rem); line-height: 1.06; letter-spacing: -0.015em;
	margin: 1rem 0 0;
}
.lp-sub { font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem); line-height: 1.65; color: color-mix(in oklch, var(--lp-ink) 78%, transparent); margin: 1.1rem 0 0; max-width: 46ch; }

.lp-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.2rem; margin-top: 1.8rem; }
.lp-cta { font-size: 0.98rem; padding: 0.95rem 1.9rem; }
.lp-hero-note { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; color: color-mix(in oklch, var(--lp-ink) 64%, transparent); }
.lp-hero-note .icon { color: var(--gold); }

/* Đếm ngược */
.lp-countdown { margin-top: 1.8rem; }
.lp-cd-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in oklch, var(--lp-ink) 60%, transparent); }
.lp-cd-label .icon { color: var(--gold); }
.lp-cd-boxes { display: flex; gap: 0.6rem; margin-top: 0.6rem; }
.lp-cd-box { display: flex; flex-direction: column; align-items: center; min-width: 4rem; padding: 0.7rem 0.4rem; background: #fff; border: 1px solid var(--lp-line); border-radius: 12px; box-shadow: 0 6px 18px -14px rgba(21,48,31,0.4); }
.lp-cd-box .num { font-family: var(--lp-serif); font-weight: 800; font-size: 1.6rem; line-height: 1; color: var(--emerald-deep); }
.lp-cd-box .unit { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in oklch, var(--lp-ink) 55%, transparent); margin-top: 0.3rem; }
.lp-cd-ended { display: inline-block; margin-top: 0.5rem; padding: 0.5rem 1rem; border-radius: 999px; background: color-mix(in oklch, var(--gold) 18%, #fff); color: var(--emerald-deep); font-weight: 700; }

.lp-trust { list-style: none; margin: 1.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; }
.lp-trust li { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; color: color-mix(in oklch, var(--lp-ink) 76%, transparent); }
.lp-trust .icon { color: var(--emerald); }

/* Ảnh hero — khung "vòm" hữu cơ */
.lp-hero-media { position: relative; }
.lp-hero-frame { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 180px 180px 28px 28px; overflow: hidden; box-shadow: 0 40px 80px -48px rgba(21,48,31,0.55); outline: 1px solid color-mix(in oklch, var(--gold) 30%, transparent); outline-offset: -10px; }
.lp-hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-hero-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(13,40,25,0.28)); pointer-events: none; }
.lp-hero-stamp { position: absolute; bottom: 1.1rem; left: 1.1rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.95rem; background: rgba(255,255,255,0.94); backdrop-filter: blur(6px); border-radius: 999px; font-size: 0.8rem; font-weight: 700; color: var(--emerald-deep); box-shadow: 0 8px 22px -14px rgba(0,0,0,0.5); }
.lp-hero-stamp .icon { color: var(--gold); }

.cph-unsplash-credit { position: absolute; bottom: 0.4rem; right: 0.6rem; z-index: 2; font-size: 0.62rem; color: rgba(255,255,255,0.82); text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.cph-unsplash-credit a { color: inherit; text-decoration: underline; }

/* ============ LỢI ÍCH (đánh số) ============ */
.lp-benefits { position: relative; padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) 0; }
.lp-benefit-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 2.5rem; }
.lp-benefit { display: flex; align-items: flex-start; gap: 1.1rem; padding: 1.5rem 0; border-top: 1px solid var(--lp-line); }
.lp-benefit-num { flex: none; font-family: var(--lp-serif); font-weight: 800; font-size: 1.7rem; line-height: 1; color: var(--gold); min-width: 2.4rem; }
.lp-benefit-text { font-size: 1.02rem; line-height: 1.55; font-weight: 600; color: var(--lp-ink); padding-top: 0.15rem; }

/* ============ DẢI ẢNH NÔNG TRẠI (full-bleed) ============ */
.lp-band { position: relative; padding: clamp(3rem, 2rem + 5vw, 6rem) 0; background-image: linear-gradient(100deg, rgba(13,40,25,0.82) 8%, rgba(13,40,25,0.45) 60%, rgba(13,40,25,0.2)), var(--lp-band-img); background-size: cover; background-position: center; color: #fff; }
.lp-band-inner { position: relative; z-index: 1; max-width: 640px; }
.lp-band-kicker { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in oklch, #fff 75%, var(--gold)); margin: 0; }
.lp-band-kicker .icon { color: var(--gold); }
.lp-band-text { font-family: var(--lp-serif); font-weight: 700; font-size: clamp(1.5rem, 1rem + 2.4vw, 2.6rem); line-height: 1.22; margin: 0.8rem 0 0; text-shadow: 0 2px 18px rgba(0,0,0,0.3); }
.lp-band .cph-unsplash-credit { left: auto; bottom: 0.5rem; right: 0.8rem; }

/* ============ SỐ LIỆU ============ */
.lp-stats { position: relative; overflow: hidden; padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) 0; }
.lp-stats-inner { position: relative; z-index: 1; background: linear-gradient(135deg, var(--emerald-deep), #0c3f26); border-radius: 28px; padding: clamp(1.8rem, 1rem + 3vw, 3.2rem); box-shadow: 0 40px 80px -52px rgba(12,63,38,0.7); }
.lp-stats-lead { font-family: var(--lp-serif); font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); line-height: 1.4; color: rgba(255,255,255,0.88); margin: 0 0 1.8rem; max-width: 640px; }
.lp-stats-lead span { color: var(--gold); font-weight: 700; }
.lp-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.lp-stat { padding: 1rem 0.5rem 1rem 1.1rem; border-left: 2px solid color-mix(in oklch, var(--gold) 40%, transparent); }
.lp-stat-num { display: block; font-family: var(--lp-serif); font-weight: 800; font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); line-height: 1; color: var(--gold); }
.lp-stat-lbl { display: block; margin-top: 0.45rem; font-size: 0.86rem; font-weight: 600; color: rgba(255,255,255,0.82); }

/* ============ TRÍCH DẪN ============ */
.lp-quote { padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0; text-align: center; }
.lp-quote .container-x { max-width: 880px; }
.lp-quote-mark { display: inline-flex; color: color-mix(in oklch, var(--gold) 70%, var(--emerald)); opacity: 0.5; }
.lp-quote-mark .icon { width: 46px; height: 46px; }
.lp-quote-text { font-family: var(--lp-serif); font-weight: 700; font-size: clamp(1.4rem, 1rem + 2vw, 2.3rem); line-height: 1.4; color: var(--emerald-deep); margin: 0.6rem 0 1.2rem; }
.lp-quote-by { display: inline-block; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.04em; color: color-mix(in oklch, var(--lp-ink) 70%, transparent); font-style: normal; }
.lp-quote-by::before { content: "— "; color: var(--gold); }

/* ============ CHUYÊN GIA ĐỒNG HÀNH (điểm nhấn ảnh thật) ============ */
.lp-founder { position: relative; overflow: hidden; padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0; }
.lp-founder-inner { position: relative; z-index: 1; display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; }
.lp-founder.has-photo .lp-founder-inner { grid-template-columns: 0.82fr 1.18fr; }
.lp-founder:not(.has-photo) .lp-founder-inner { max-width: 880px; margin-inline: auto; text-align: center; }
.lp-founder:not(.has-photo) .lp-quote-mark { display: inline-flex; }
.lp-founder-photo { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 28px 28px 28px 96px; overflow: hidden; box-shadow: 0 44px 84px -50px rgba(21,48,31,0.6); outline: 1px solid color-mix(in oklch, var(--gold) 32%, transparent); outline-offset: -10px; }
.lp-founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-founder-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(13,40,25,0.25)); }
.lp-founder-body .lp-quote-mark { color: color-mix(in oklch, var(--gold) 70%, var(--emerald)); opacity: 0.45; margin-top: 0.6rem; }
.lp-founder-body .lp-quote-text { margin: 0.5rem 0 1.1rem; }
.lp-founder-body .lp-kicker { margin-bottom: 0.2rem; }

/* ============ LỚP HỌC THỰC TẾ (gallery bằng chứng) — lưới cân đối ============ */
.lp-gallery { padding: clamp(2rem, 1.5rem + 3vw, 4rem) 0; }
.lp-gallery-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.lp-gallery-item { position: relative; margin: 0; grid-column: span 2; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 20px 46px -36px rgba(21,48,31,0.55); background: var(--lp-cream-2); }
.lp-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s var(--ease-out); }
.lp-gallery-item:hover img { transform: scale(1.04); }
/* Đúng 5 ảnh: hàng 1 có 3 ảnh, hàng 2 có 2 ảnh rộng hơn cho cân (không lệch, không "cục"). */
.lp-gallery-item:nth-child(4):nth-last-child(2),
.lp-gallery-item:nth-child(5):nth-last-child(1) { grid-column: span 3; aspect-ratio: 16 / 9; }
@media (max-width: 760px) {
	.lp-gallery-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
	.lp-gallery-item,
	.lp-gallery-item:nth-child(4):nth-last-child(2),
	.lp-gallery-item:nth-child(5):nth-last-child(1) { grid-column: auto; aspect-ratio: 4 / 3; }
}

/* ============ NỘI DUNG BIÊN TẬP ============ */
.lp-body { max-width: 760px; margin-inline: auto; padding-block: clamp(1rem, 0.5rem + 2vw, 2rem); font-size: 1.05rem; line-height: 1.8; color: color-mix(in oklch, var(--lp-ink) 86%, transparent); }
.lp-body h2, .lp-body h3 { font-family: var(--lp-serif); color: var(--emerald-deep); line-height: 1.2; margin: 1.6em 0 0.5em; }
.lp-body p { margin: 0 0 1.1em; }
.lp-body a { color: var(--emerald); text-decoration: underline; }

/* ============ KHÓA HỌC ĐI KÈM ============ */
.lp-course { padding: clamp(1.5rem, 1rem + 2vw, 3rem) 0; }
.lp-course-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; padding: clamp(1.4rem, 1rem + 2vw, 2.2rem); background: #fff; border: 1px solid var(--lp-line); border-left: 4px solid var(--gold); border-radius: 18px; box-shadow: 0 24px 56px -44px rgba(21,48,31,0.5); }
.lp-course-label { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 0 0.35rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in oklch, var(--emerald-deep) 70%, var(--gold)); }
.lp-course-label .icon { color: var(--gold); }
.lp-course-title { font-family: var(--lp-serif); font-weight: 800; font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); line-height: 1.18; color: var(--emerald-deep); margin: 0; }

/* ============ FORM THU LEAD ============ */
.lp-form-section { position: relative; overflow: hidden; margin-top: clamp(1.5rem, 1rem + 2vw, 3rem); padding: clamp(2.5rem, 1.5rem + 5vw, 5rem) 0; background: linear-gradient(150deg, #0d2a19, var(--emerald-deep) 55%, #0c3f26); color: #fff; }
.lp-form-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 1rem + 3vw, 3.5rem); align-items: center; }
.lp-form-aside .lp-form-title { font-family: var(--lp-serif); font-weight: 800; font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.8rem); line-height: 1.12; color: #fff; margin: 0.6rem 0 0; }
.lp-form-desc { font-size: 1.02rem; line-height: 1.65; color: rgba(255,255,255,0.8); margin: 0.9rem 0 1.3rem; max-width: 42ch; }
.lp-form-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.lp-form-points li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; color: rgba(255,255,255,0.92); }
.lp-form-points .icon { color: var(--gold); flex: none; }
.lp-form-points strong { color: var(--gold); }

.lp-form-card { background: #fff; border-radius: 22px; padding: clamp(1.4rem, 1rem + 2vw, 2.2rem); box-shadow: 0 50px 90px -50px rgba(0,0,0,0.6); }
.lp-field { display: block; margin-bottom: 1rem; }
.lp-field-lbl { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; color: var(--emerald-deep); margin-bottom: 0.4rem; }
.lp-field-lbl em { font-weight: 500; font-style: normal; color: #9a9a8e; }
.lp-form-card input { width: 100%; border: 1.5px solid var(--lp-line); background: var(--lp-cream); border-radius: 11px; padding: 0.8rem 1rem; font-size: 0.95rem; font-family: inherit; color: var(--lp-ink); transition: border-color 0.4s var(--ease-out), background 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); }
.lp-form-card input:focus { outline: none; border-color: var(--emerald); background: #fff; box-shadow: 0 0 0 4px color-mix(in oklch, var(--emerald) 14%, transparent); }
.lp-form-card input::placeholder { color: #b3ab98; }
.lp-form-submit { width: 100%; margin-top: 0.4rem; padding: 0.95rem; font-size: 0.98rem; }
.lp-form-fine { margin: 0.8rem 0 0; font-size: 0.76rem; text-align: center; color: #9a9a8e; }
.lp-form-ok, .lp-form-err { display: flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1rem; border-radius: 11px; font-weight: 600; margin-bottom: 1rem; }
.lp-form-ok { background: color-mix(in oklch, var(--emerald) 14%, #fff); color: var(--emerald-deep); }
.lp-form-err { background: #fdecec; color: #b3261e; }

/* ============ STICKY CTA (mobile) ============ */
.lp-sticky-cta { display: none; }
.lp-sticky-cta .btn-gold { width: 100%; justify-content: center; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
	.lp-hero-inner { grid-template-columns: 1fr; }
	.lp-hero-media { order: -1; max-width: 440px; margin-inline: auto; }
	.lp-hero-frame { aspect-ratio: 5 / 4; border-radius: 120px 120px 24px 24px; }
	.lp-hero-content { max-width: none; }
	.lp-form-inner { grid-template-columns: 1fr; }
	.lp-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1rem; }
	.lp-founder.has-photo .lp-founder-inner { grid-template-columns: 1fr; }
	.lp-founder-photo { max-width: 360px; margin-inline: auto; }
}
@media (max-width: 520px) {
	.lp-cd-box { min-width: 3.5rem; }
	.lp-cd-box .num { font-size: 1.35rem; }
	.lp-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: block; padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); border-top: 1px solid var(--lp-line); }
	.cph-lp-main { padding-bottom: 5rem; }
}