/*
Theme Name: LAM Affiliate
Template: blocksy
Description: Child theme thương hiệu LAM Affiliate — khoá học 1 kèm 1 dùng AI xây kênh Affiliate Shopee.
Version: 1.0.0
*/

:root {
	--la-primary: #ff6b2c;
	--la-primary-dark: #e0551a;
	--la-ink: #1a1a2e;
	--la-text: var(--la-ink);
	--la-muted: #6b7280;
	--la-bg-soft: #fff6f0;
	--la-border: #eee1d8;
	--la-card-bg: #fff;
}

body {
	color: var(--la-text);
}

a {
	color: var(--la-primary);
}

/* ---------- Hero ---------- */
.la-hero {
	background: linear-gradient(135deg, #fff6f0 0%, #ffe9db 100%);
	padding: 64px 24px;
	border-radius: 0 0 32px 32px;
	text-align: center;
}
.la-hero .la-eyebrow {
	display: inline-block;
	background: var(--la-primary);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 16px;
	border-radius: 999px;
	margin-bottom: 20px;
	letter-spacing: .02em;
}
.la-hero h1 {
	font-size: clamp(28px, 4vw, 46px);
	line-height: 1.15;
	max-width: 900px;
	margin: 0 auto 20px;
}
.la-hero p.la-sub {
	font-size: 18px;
	color: var(--la-muted);
	max-width: 680px;
	margin: 0 auto 32px;
}
.la-hero-ctas {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ---------- Buttons ---------- */
.la-btn {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 10px;
	font-weight: 700;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
.la-btn-primary {
	background: var(--la-primary);
	color: #fff;
	box-shadow: 0 8px 20px rgba(255,107,44,.35);
}
.la-btn-primary:hover {
	background: var(--la-primary-dark);
	color: #fff;
	transform: translateY(-2px);
}
.la-btn-outline {
	background: transparent;
	color: var(--la-text);
	border: 2px solid var(--la-border);
}
.la-btn-outline:hover {
	border-color: var(--la-primary);
	color: var(--la-primary);
}

/* ---------- Sections ---------- */
.la-section {
	max-width: 1080px;
	margin: 0 auto;
	padding: 64px 24px;
}
.la-section-title {
	text-align: center;
	font-size: clamp(24px, 3vw, 34px);
	margin-bottom: 12px;
}
.la-section-sub {
	text-align: center;
	color: var(--la-muted);
	max-width: 640px;
	margin: 0 auto 40px;
}

/* ---------- Curriculum ---------- */
.la-curriculum {
	display: grid;
	gap: 16px;
}
.la-curriculum-item {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	background: var(--la-card-bg);
	border: 1px solid var(--la-border);
	border-radius: 14px;
	padding: 20px 24px;
}
.la-curriculum-num {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--la-bg-soft);
	color: var(--la-primary);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.la-curriculum-item h3 {
	margin: 0 0 6px;
	font-size: 18px;
}
.la-curriculum-item p {
	margin: 0;
	color: var(--la-muted);
}

/* ---------- Pricing ---------- */
#bang-gia {
	max-width: 1200px;
}
.la-pricing-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	align-items: stretch;
}
@media (min-width: 700px) {
	.la-pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
	.la-pricing-grid { grid-template-columns: repeat(4, 1fr); }
}
.la-price-card {
	background: var(--la-card-bg);
	border: 1px solid var(--la-border);
	border-radius: 18px;
	padding: 28px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: relative;
}
.la-price-card.la-featured {
	border-color: var(--la-primary);
	box-shadow: 0 12px 30px rgba(255,107,44,.18);
}
.la-price-badge {
	position: absolute;
	top: -14px;
	right: 24px;
	background: var(--la-primary);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 5px 14px;
	border-radius: 999px;
}
.la-price-card h3 {
	margin: 0;
	font-size: 17px;
	min-height: 44px;
}
.la-price-amount {
	font-size: 26px;
	font-weight: 800;
	color: var(--la-text);
}
.la-price-amount span {
	font-size: 14px;
	font-weight: 500;
	color: var(--la-muted);
}
.la-price-features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
	flex: 1;
}
.la-price-features li {
	padding-left: 26px;
	position: relative;
	color: var(--la-text);
	font-size: 14px;
}
.la-price-features li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--la-primary);
	font-weight: 700;
}

/* ---------- Instructor ---------- */
.la-instructor {
	display: flex;
	gap: 40px;
	align-items: center;
	background: var(--la-bg-soft);
	border-radius: 24px;
	padding: 40px;
	flex-wrap: wrap;
}
.la-instructor-photo {
	flex: 0 0 auto;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: #ffd9bd;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 48px;
	font-weight: 800;
	color: var(--la-primary-dark);
	overflow: hidden;
}
.la-instructor-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}
.la-instructor-body {
	flex: 1;
	min-width: 260px;
}
.la-instructor-body h3 {
	margin: 0 0 6px;
	font-size: 22px;
}
.la-instructor-role {
	color: var(--la-primary);
	font-weight: 600;
	margin-bottom: 14px;
}
.la-stat-row {
	display: flex;
	gap: 28px;
	margin-top: 18px;
	flex-wrap: wrap;
}
.la-stat-row div strong {
	display: block;
	font-size: 20px;
}
.la-stat-row div span {
	color: var(--la-muted);
	font-size: 13px;
}

/* ---------- Testimonials ---------- */
.la-testimonials {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}
.la-testimonial {
	background: var(--la-card-bg);
	border: 1px solid var(--la-border);
	border-radius: 14px;
	padding: 28px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.la-testimonial-quote-icon {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--la-bg-soft);
	color: var(--la-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 800;
	font-style: normal;
	margin-bottom: 4px;
}
.la-testimonial-stars {
	display: flex;
	gap: 2px;
	color: var(--la-primary);
	font-size: 14px;
	margin-bottom: 8px;
}
.la-testimonial p {
	color: var(--la-text);
	font-style: italic;
	flex: 1;
}
.la-testimonial-footer {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--la-border);
}
.la-testimonial-avatar {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--la-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 15px;
}
.la-testimonial-author {
	font-weight: 700;
	font-style: normal;
}

/* ---------- Affiliate promo ---------- */
.la-affiliate-cta {
	background: var(--la-ink);
	color: #fff;
	border-radius: 24px;
	padding: 48px;
	text-align: center;
}
.la-affiliate-cta h2 {
	color: #fff;
	margin-top: 0;
}
.la-affiliate-cta p {
	color: #cbd2e1;
	max-width: 640px;
	margin: 0 auto 28px;
}
.la-affiliate-stats {
	display: flex;
	justify-content: center;
	gap: 48px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}
.la-affiliate-stats div strong {
	display: block;
	font-size: 28px;
	color: var(--la-primary);
}
.la-affiliate-stats div span {
	color: #9aa3b5;
	font-size: 13px;
}

/* ---------- Video embed ---------- */
.la-video-wrap {
	position: relative;
	width: 100%;
	max-width: 780px;
	margin: 0 auto;
	padding-top: 43.9%; /* 780x342 ~ 16:9 within max-width */
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(0,0,0,.15);
}
.la-video-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- Dark mode toggle button ---------- */
.la-dark-toggle {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 999;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--la-border);
	background: var(--la-card-bg);
	font-size: 20px;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

/* ---------- FAQ ---------- */
.la-faq-list {
	max-width: 760px;
	margin: 0 auto;
	display: grid;
	gap: 12px;
}
.la-faq-item {
	background: var(--la-card-bg);
	border: 1px solid var(--la-border);
	border-radius: 14px;
	padding: 4px 24px;
	transition: border-color .15s ease;
}
.la-faq-item:hover {
	border-color: var(--la-primary);
}
.la-faq-item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	font-weight: 700;
	font-size: 16px;
}
.la-faq-item summary::-webkit-details-marker {
	display: none;
}
.la-faq-item summary::after {
	content: "+";
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--la-bg-soft);
	color: var(--la-primary);
	font-size: 18px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .2s ease;
}
.la-faq-item[open] summary::after {
	transform: rotate(45deg);
}
.la-faq-item p {
	margin: 0;
	padding: 0 0 20px;
	color: var(--la-muted);
}

/* ---------- Footer contact strip ---------- */
.la-footer-contact {
	background: var(--la-ink);
	color: #fff;
	padding: 20px 24px;
	text-align: center;
	font-size: 14px;
}
.la-footer-contact a {
	color: #ffb28a;
}

@media (max-width: 640px) {
	.la-instructor { padding: 24px; }
	.la-affiliate-cta { padding: 32px 20px; }
}

/* ---------- Footer copyright (Blocksy) ---------- */
.ct-footer-copyright {
	text-align: center;
	width: 100%;
}
[data-column="copyright"] {
	display: flex;
	justify-content: center;
}

/* ---------- Dark mode ----------
   Re-pointing the shared variables covers every component that already
   reads them (cards, text, borders); only the handful of elements with
   literal colors below need their own override. */
html.la-dark {
	color-scheme: dark;
	--la-text: #f2f2f8;
	--la-muted: #a8adc2;
	--la-bg-soft: #1c1a2b;
	--la-border: #2c2c40;
	--la-card-bg: #1c1c2b;

	/* Blocksy's own design tokens — redefining these (instead of chasing
	   its markup with one-off selectors) makes header, footer, page-title
	   and every plugin block that reads them go dark consistently. */
	--theme-palette-color-3: #cbd0e0;
	--theme-palette-color-4: #f2f2f8;
	--theme-palette-color-5: #2c2c40;
	--theme-palette-color-6: #14141f;
	--theme-palette-color-7: #14141f;
	--theme-palette-color-8: #1c1c2b;
	--theme-text-color: #cbd0e0;
	--theme-headings-color: #f2f2f8;
	--theme-border-color: #2c2c40;
}
html.la-dark .la-hero {
	background: linear-gradient(135deg, #1c1a2b 0%, #241a1f 100%);
}
html.la-dark .la-btn-outline {
	color: var(--la-text);
}
html.la-dark .la-dark-toggle {
	background: var(--la-card-bg);
	color: var(--la-text);
}

/* ---------- Tutor LMS (course/lesson pages) ----------
   Tutor ships its own design system with literal hex values in most of its
   utility classes (tutor-bg-white, tutor-color-muted, etc.) instead of the
   Blocksy tokens above, so its course/lesson templates need their own
   dark-mode override. */
html.la-dark [class*="tutor-bg-white"],
html.la-dark [class*="tutor-bg-gray"],
html.la-dark .tutor-course-sidebar-card-pricing,
html.la-dark .tutor-course-sidebar-card,
html.la-dark .tutor-sidebar-card,
html.la-dark .tutor-card,
html.la-dark .tutor-card-body,
html.la-dark .tutor-card-footer,
html.la-dark .tutor-course-topic-single,
html.la-dark .course-entry-box,
html.la-dark .tutor-course-details-widget,
html.la-dark .tutor-course-content-list-item,
html.la-dark .tutor-single-course-sidebar,
html.la-dark .tutor-single-course-sidebar-more,
html.la-dark .tutor-course-details-instructors {
	background-color: var(--la-card-bg) !important;
	border-color: var(--la-border) !important;
}
html.la-dark [class*="tutor-color-black"],
html.la-dark [class*="tutor-color-secondary"],
html.la-dark [class*="tutor-color-muted"],
html.la-dark [class*="tutor-color-subdued"],
html.la-dark [class*="tutor-color-hints"],
html.la-dark .tutor-course-sidebar-card-pricing,
html.la-dark .tutor-course-sidebar-card-pricing *,
html.la-dark .tutor-sidebar-card,
html.la-dark .tutor-sidebar-card *,
html.la-dark .tutor-course-topic-single,
html.la-dark .tutor-course-topic-single *,
html.la-dark .tutor-course-details-instructors,
html.la-dark .tutor-course-details-instructors *,
html.la-dark .tutor-course-content-list-item,
html.la-dark .tutor-course-content-list-item *,
html.la-dark .tutor-single-course-sidebar-more,
html.la-dark .tutor-single-course-sidebar-more *,
html.la-dark .course-entry-box,
html.la-dark .course-entry-box * {
	color: var(--la-text) !important;
}
html.la-dark {
	--tutor-body-color: #f2f2f8;
}

/* WooCommerce's success/info notices and the VietQR bank-detail table both
   hard-code a light background + black text inline instead of using
   Blocksy's theme tokens, so they need the same direct override. */
html.la-dark .woocommerce-message,
html.la-dark .woocommerce-info,
html.la-dark .wc-block-components-notice-banner.is-success,
html.la-dark .wc-block-components-notice-banner.is-info {
	background-color: var(--la-card-bg) !important;
	color: var(--la-text) !important;
	border-color: var(--la-border) !important;
}
html.la-dark table.table-bordered {
	background-color: var(--la-card-bg) !important;
}
html.la-dark table.table-bordered tr {
	background-color: transparent !important;
}
html.la-dark table.table-bordered td,
html.la-dark table.table-bordered td *,
html.la-dark table.table-bordered strong,
html.la-dark table.table-bordered span {
	color: var(--la-text) !important;
}

/* ---------- SliceWP (affiliate dashboard) ----------
   Same story as Tutor/WooCommerce above: SliceWP's own frontend stylesheet
   hard-codes #fff card backgrounds instead of reading a theme token. */
html.la-dark .slicewp-card,
html.la-dark .slicewp-card-footer,
html.la-dark .slicewp-date-picker-input,
html.la-dark .slicewp-field-wrapper input[type=text],
html.la-dark .slicewp-field-wrapper input[type=email],
html.la-dark .slicewp-field-wrapper input[type=url],
html.la-dark .slicewp-field-wrapper input[type=password],
html.la-dark .slicewp-field-wrapper textarea,
html.la-dark .slicewp-field-wrapper select {
	background-color: var(--la-card-bg) !important;
	border-color: var(--la-border) !important;
	color: var(--la-text) !important;
}
html.la-dark .slicewp-card,
html.la-dark .slicewp-card * {
	color: var(--la-text) !important;
}
html.la-dark .slicewp-card-footer-actions a {
	color: var(--la-muted) !important;
}