/* =====================================================================
   AIxNovate Course Site - Custom CSS cho Flatsome + Tutor LMS
   ---------------------------------------------------------------------
   Cách dùng:
   1. Sửa các biến màu trong :root bên dưới nếu bạn có mã hex chính xác
      hơn (lấy bằng công cụ eyedropper trong DevTools trên aixnovate.com).
   2. Các class Tutor LMS có thể thay đổi theo phiên bản plugin - dùng
      "Inspect Element" để kiểm tra lại class thực tế trên site của bạn
      rồi đối chiếu với phần dưới nếu override chưa lên màu đúng.
   ===================================================================== */

:root {
	--ax-primary: #0A1F3D;      /* Navy / than đậm - header, heading, text chính */
	--ax-primary-light: #14335C;
	--ax-accent: #00B8D9;        /* Cyan / xanh điện - CTA, link, highlight */
	--ax-accent-hover: #00A0BD;
	--ax-bg-soft: #F5F7FA;       /* Nền section xen kẽ */
	--ax-text: #1A202C;          /* Text chính trên nền trắng */
	--ax-text-muted: #4A5568;    /* Text phụ, caption */
	--ax-white: #FFFFFF;
	--ax-border: #E2E8F0;
	--ax-radius: 10px;
	--ax-font: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------------------------------------------------------------------
   Typography chung
   --------------------------------------------------------------------- */
body,
.font-body {
	font-family: var(--ax-font);
	color: var(--ax-text);
}

h1, h2, h3, h4, h5, h6,
.font-heading {
	font-family: var(--ax-font);
	color: var(--ax-primary);
	font-weight: 700;
}

a {
	color: var(--ax-accent);
	transition: color 0.2s ease;
}
a:hover {
	color: var(--ax-accent-hover);
}

/* ---------------------------------------------------------------------
   Header / Navigation (Flatsome)
   --------------------------------------------------------------------- */
.header {
	background-color: var(--ax-white);
	border-bottom: 1px solid var(--ax-border);
}

.header .nav > li > a {
	color: var(--ax-primary);
	font-weight: 600;
}

.header .nav > li > a:hover,
.header .nav > li.current > a {
	color: var(--ax-accent);
}

.header.is-sticky {
	box-shadow: 0 2px 12px rgba(10, 31, 61, 0.08);
}

/* ---------------------------------------------------------------------
   Buttons (Flatsome + WooCommerce + Tutor LMS)
   --------------------------------------------------------------------- */
.button,
a.button,
button.button,
input[type="submit"],
.tutor-btn,
.tutor-btn-primary {
	background-color: var(--ax-accent) !important;
	border-color: var(--ax-accent) !important;
	color: var(--ax-white) !important;
	border-radius: var(--ax-radius);
	font-weight: 600;
	letter-spacing: 0.2px;
}

.button:hover,
a.button:hover,
button.button:hover,
input[type="submit"]:hover,
.tutor-btn:hover,
.tutor-btn-primary:hover {
	background-color: var(--ax-accent-hover) !important;
	border-color: var(--ax-accent-hover) !important;
}

.button.is-outline,
a.button.is-outline {
	background-color: transparent !important;
	color: var(--ax-primary) !important;
	border: 2px solid var(--ax-primary) !important;
}
.button.is-outline:hover,
a.button.is-outline:hover {
	background-color: var(--ax-primary) !important;
	color: var(--ax-white) !important;
}

/* ---------------------------------------------------------------------
   Hero section - dùng cho section đầu trang chủ dựng bằng UX Builder
   Gắn class "ax-hero" vào Container/Section trong UX Builder để áp dụng
   --------------------------------------------------------------------- */
.ax-hero {
	background: linear-gradient(135deg, var(--ax-primary) 0%, var(--ax-primary-light) 100%);
	color: var(--ax-white);
}
.ax-hero h1,
.ax-hero h2 {
	color: var(--ax-white);
}
.ax-hero p {
	color: rgba(255, 255, 255, 0.85);
}

/* ---------------------------------------------------------------------
   Card khoá học / dịch vụ (dùng chung cho card tự dựng bằng UX Builder
   qua class "ax-card", và card mặc định của Tutor LMS)
   --------------------------------------------------------------------- */
.ax-card,
.tutor-card,
.tutor-course-list-item {
	background-color: var(--ax-white);
	border: 1px solid var(--ax-border);
	border-radius: var(--ax-radius);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	overflow: hidden;
}
.ax-card:hover,
.tutor-card:hover,
.tutor-course-list-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(10, 31, 61, 0.1);
}

/* Giá khoá học nổi bật bằng màu accent */
.tutor-course-price,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	color: var(--ax-accent) !important;
	font-weight: 700;
}

/* ---------------------------------------------------------------------
   Section nền xen kẽ - gắn class "ax-section-soft" trong UX Builder
   --------------------------------------------------------------------- */
.ax-section-soft {
	background-color: var(--ax-bg-soft);
}

/* ---------------------------------------------------------------------
   Testimonial card - gắn class "ax-testimonial" trong UX Builder
   --------------------------------------------------------------------- */
.ax-testimonial {
	background-color: var(--ax-white);
	border-radius: var(--ax-radius);
	padding: 24px;
	box-shadow: 0 4px 16px rgba(10, 31, 61, 0.06);
}
.ax-testimonial .name {
	color: var(--ax-primary);
	font-weight: 700;
}
.ax-testimonial .role {
	color: var(--ax-text-muted);
	font-size: 0.9em;
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.footer {
	background-color: var(--ax-primary);
	color: rgba(255, 255, 255, 0.75);
}
.footer a {
	color: rgba(255, 255, 255, 0.9);
}
.footer a:hover {
	color: var(--ax-accent);
}

/* ---------------------------------------------------------------------
   Tutor LMS - progress bar & badge dùng màu accent
   --------------------------------------------------------------------- */
.tutor-progress-bar span,
.tutor-color-primary {
	background-color: var(--ax-accent) !important;
	color: var(--ax-accent) !important;
}

/* ---------------------------------------------------------------------
   Video responsive wrapper - dùng khi nhúng video Vimeo/YouTube
   bằng iframe trong bài học hoặc trang giới thiệu khoá học.
   Cách dùng: bọc iframe trong <div class="ax-video-wrapper">...</div>
   --------------------------------------------------------------------- */
.ax-video-wrapper {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* tỉ lệ 16:9 */
	border-radius: var(--ax-radius);
	overflow: hidden;
	background-color: #000;
}
.ax-video-wrapper iframe,
.ax-video-wrapper video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------------------------------------------------------------------
   Badge/tag nhỏ - gắn class "ax-badge" trong UX Builder
   (vd: "Bestseller", "Mới", "Live") - lấy cảm hứng icon badge của aixnovate
   --------------------------------------------------------------------- */
.ax-badge {
	display: inline-block;
	background-color: var(--ax-accent);
	color: var(--ax-white);
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 4px 10px;
	border-radius: 999px;
}
.ax-badge.is-outline {
	background-color: transparent;
	color: var(--ax-primary);
	border: 1px solid var(--ax-primary);
}

/* ---------------------------------------------------------------------
   Bảng giá / gói học - gắn class "ax-pricing-card" cho mỗi cột giá,
   thêm "is-featured" cho gói được đề xuất nổi bật
   --------------------------------------------------------------------- */
.ax-pricing-card {
	background-color: var(--ax-white);
	border: 1px solid var(--ax-border);
	border-radius: var(--ax-radius);
	padding: 32px 24px;
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ax-pricing-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(10, 31, 61, 0.1);
}
.ax-pricing-card.is-featured {
	border: 2px solid var(--ax-accent);
	box-shadow: 0 8px 24px rgba(0, 184, 217, 0.15);
}
.ax-pricing-card .price {
	color: var(--ax-accent);
	font-size: 2em;
	font-weight: 700;
}