/*
Theme Name: VW EduPro Theme
Theme URI: https://example.com/vw-edupro-theme/
Author: EduPro Studio
Author URI: https://example.com/
Description: Giao diện WordPress Giáo dục chuyên nghiệp lấy cảm hứng từ VW Education Theme (Premium). Tích hợp sẵn Hero Slider, Bộ lọc tìm kiếm khóa học,4 khối Dịch vụ nổi bật, Quản lý Khóa học (CPT + Meta), Đội ngũ Giảng viên, Virtual Campus Tour, Đánh giá học viên, Live Customizer Bật/Tắt từng Section và Page Template Phòng thi 70/30.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: edupro
Tags: education, e-learning, courses, school, lms, custom-colors, custom-menu, featured-images, theme-options
*/

:root {
    --primary-color: #1e1e1e;
    --accent-color: #f59e0b;
    --secondary-color: #0d6efd;
    --text-dark: #1f2937;
    --text-muted: #6b7280;
    --bg-light: #f8fafc;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-dark);
    background-color: #ffffff;
    overflow-x: hidden;
}

a {
    transition: all 0.25s ease;
    text-decoration: none;
}

/* Topbar */
.edu-topbar {
    background-color: #111827;
    color: #e5e7eb;
    font-size: 0.875rem;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.edu-topbar a {
    color: #e5e7eb;
}
.edu-topbar a:hover {
    color: var(--accent-color);
}

/* Main Header */
.edu-header {
    background-color: var(--primary-color);
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.site-branding .site-title a {
    color: #ffffff;
    font-weight: 800;
    letter-spacing: -0.5px;
}
.site-branding .site-title span {
    color: var(--accent-color);
}

/* Navigation */
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.main-navigation ul li a {
    color: #f3f4f6;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 8px 4px;
    position: relative;
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item a {
    color: var(--accent-color);
}
.btn-accent {
    background-color: var(--accent-color);
    color: #111827 !important;
    font-weight: 700;
    border: none;
    padding: 10px 22px;
    border-radius: 6px;
}
.btn-accent:hover {
    background-color: #d97706;
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* Hero Slider */
.edu-hero-slide {
    min-height: 560px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
}
.edu-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(17,24,39,0.92) 0%, rgba(30,30,30,0.78) 60%, rgba(30,30,30,0.4) 100%);
}
.edu-hero-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    color: #ffffff;
    padding: 80px 0 110px;
}
.edu-badge {
    display: inline-block;
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 14px;
    border-radius: 50px;
    margin-bottom: 1rem;
}

/* Overlap Feature Cards */
.edu-features-overlap {
    margin-top: -65px;
    position: relative;
    z-index: 10;
}
.edu-feature-box {
    border-radius: 12px;
    padding: 28px 22px;
    color: #ffffff;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}
.edu-feature-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}
.edu-feature-box.box-1 { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.edu-feature-box.box-2 { background: linear-gradient(135deg, #f59e0b, #d97706); }
.edu-feature-box.box-3 { background: linear-gradient(135deg, #10b981, #059669); }
.edu-feature-box.box-4 { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.edu-feature-icon {
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 18px;
}

/* Course Search Box */
.edu-search-bar {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
    border: 1px solid #e5e7eb;
}

/* Section Headings */
.section-subtitle {
    color: var(--accent-color);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 0.85rem;
    display: block;
    margin-bottom: 6px;
}
.section-title {
    font-weight: 800;
    color: var(--primary-color);
    position: relative;
    margin-bottom: 1rem;
}

/* Course Cards */
.edu-course-card {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.edu-course-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 35px rgba(0,0,0,0.1);
    border-color: var(--accent-color);
}
.edu-course-thumb {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: #1e293b;
}
.edu-course-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.edu-course-card:hover .edu-course-thumb img {
    transform: scale(1.06);
}
.edu-course-price {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: var(--accent-color);
    color: #111827;
    font-weight: 800;
    padding: 5px 14px;
    border-radius: 50px;
    font-size: 0.85rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.edu-course-cat {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(17,24,39,0.85);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 50px;
}
.edu-course-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: var(--text-muted);
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

/* Virtual Campus Tour */
.edu-campus-tour {
    background: linear-gradient(rgba(17,24,39,0.86), rgba(30,30,30,0.9)), url('https://images.unsplash.com/photo-1541339907198-e08756dedf3f?auto=format&fit=crop&w=1600&q=80') center/cover fixed;
    color: #ffffff;
    padding: 90px 0;
}
.play-btn-pulse {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--accent-color);
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    animation: pulse-amber 2s infinite;
}
@keyframes pulse-amber {
    0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
    70% { box-shadow: 0 0 0 22px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

/* Faculty Card */
.edu-faculty-card {
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
    transition: transform 0.3s ease;
    text-align: center;
    padding: 28px 20px;
}
.edu-faculty-card:hover {
    transform: translateY(-6px);
}
.edu-faculty-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--accent-color);
    margin: 0 auto 16px;
}

/* Testimonial Card */
.edu-testimonial-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 28px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
    height: 100%;
}

/* Split Screen 70/30 Exam Template */
.exam-split-container {
    display: flex;
    height: calc(100vh - 70px);
    overflow: hidden;
    background: #1e1e1e;
}
.exam-pdf-pane {
    flex: 0 0 70%;
    height: 100%;
    border-right: 2px solid #334155;
    background: #0f172a;
}
.exam-answer-pane {
    flex: 0 0 30%;
    height: 100%;
    overflow-y: auto;
    background: #ffffff;
    padding: 20px;
}
@media (max-width: 991px) {
    .exam-split-container {
        flex-direction: column;
        height: auto;
    }
    .exam-pdf-pane {
        height: 60vh;
    }
}

/* Footer */
.edu-footer {
    background-color: #0f172a;
    color: #9ca3af;
    padding-top: 70px;
}
.edu-footer h5 {
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 20px;
}
.edu-footer ul {
    list-style: none;
    padding: 0;
}
.edu-footer ul li {
    margin-bottom: 10px;
}
.edu-footer ul li a {
    color: #9ca3af;
}
.edu-footer ul li a:hover {
    color: var(--accent-color);
    padding-left: 4px;
}