/**
 * File: assets/css/dashboard.css
 * SIÊU CẤU TRÚC GIAO DIỆN HAKICMS - Version 4.1.0
 */

/* RESET VÀ CHỐNG TRÀN */
.hakicms-main-wrapper, .hakicms-main-wrapper * {
    box-sizing: border-box !important;
}

.hakicms-main-wrapper {
    width: 100% !important;
    max-width: 800px !important;
    margin: 40px auto !important;
    font-family: "Be Vietnam Pro", sans-serif !important;
    display: block !important;
    background: transparent !important;
}

/* THẺ TRẮNG TRÊN (HERO) */
.hakicms-white-card {
    background: #ffffff !important;
    border-radius: 30px 30px 40px 40px !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08) !important;
    padding: 40px 30px !important;
    text-align: center !important;
    position: relative !important;
    z-index: 10 !important;
    display: block !important;
}

.hakicms-course-header h2 {
    font-family: "Phudu", cursive !important;
    font-size: 32px !important;
    color: #111111 !important;
    text-transform: uppercase !important;
    margin: 0 0 10px 0 !important;
}

.hakicms-subtitle {
    color: #666666 !important;
    font-size: 18px !important;
    margin-bottom: 30px !important;
    font-weight: 500 !important;
}

/* NÚT BẤM */
.hakicms-cta-button {
    display: inline-block !important;
    padding: 16px 50px !important;
    background: #ff1500 !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    box-shadow: 0 10px 25px rgba(255,21,0,0.25) !important;
    border: none !important;
    font-size: 16px !important;
    cursor: pointer !important;
}

.hakicms-cta-button.enrolled {
    background: #27ae60 !important;
    box-shadow: 0 10px 25px rgba(39,174,96,0.2) !important;
}

/* THẺ XANH DƯỚI (CURRICULUM) */
.hakicms-blue-card {
    background-color: #a3b1e3 !important;
    margin-top: -60px !important;
    padding: 100px 30px 50px 30px !important;
    border-radius: 0 0 30px 30px !important;
    z-index: 1 !important;
    display: block !important;
    min-height: 200px !important;
}

.hakicms-section-title {
    font-family: "Phudu", cursive !important;
    text-align: center !important;
    color: #2c3e50 !important;
    margin-bottom: 35px !important;
    font-size: 24px !important;
    font-weight: 700 !important;
}

/* KHUNG HIỂN THỊ BÀI HỌC AJAX (VIEWER) */
#hakicms-lesson-viewer {
    background: #ffffff !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15) !important;
    margin-bottom: 40px !important;
    border: 1px solid #eee !important;
    display: none;
}

.hakicms-viewer-header {
    background: #2c3e50 !important;
    color: #ffffff !important;
    padding: 15px 25px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

#hakicms-viewer-title { margin: 0 !important; font-size: 16px !important; font-weight: 600 !important; }

#hakicms-close-viewer {
    background: rgba(255,255,255,0.2) !important;
    border: none !important;
    color: #fff !important;
    width: 30px !important; height: 30px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
}

#hakicms-viewer-content {
    padding: 30px !important;
    max-height: 600px !important;
    overflow-y: auto !important;
    line-height: 1.8 !important;
    color: #333 !important;
    text-align: left !important;
}

/* DANH SÁCH BÀI HỌC (CARDS) */
.hakicms-lesson-card {
    background: #ffffff !important;
    display: block !important;
    padding: 18px 25px !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    text-decoration: none !important;
    border-left: 6px solid #ccc !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    clear: both !important;
}

.hakicms-lesson-card.unlocked { border-left-color: #27ae60 !important; }
.hakicms-lesson-card:hover { transform: translateX(5px) !important; }

.lesson-content-flex {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.lesson-main-info { display: flex !important; align-items: center !important; }
.lesson-label { font-weight: 700 !important; color: #888 !important; margin-right: 5px !important; font-size: 14px !important; }
.lesson-title { font-weight: 600 !important; color: #111111 !important; font-size: 16px !important; }

/* TIÊU DIỆT THẺ P RÁC DO WORDPRESS TỰ CHÈN */
.hakicms-lessons-grid p,
.hakicms-lesson-list-container p,
.hakicms-main-wrapper > p {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* BADGE MIỄN PHÍ (Sẵn sàng cho Add-on) */
.badge-free {
    background: #27ae60 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    margin-left: 8px !important;
}

/* --- HAKICMS PREMIUM UI --- */
:root {
    --hakicms-green: #2da44e;
    --hakicms-blue: #3498db;
    --hakicms-red: #ff4757;
    --hakicms-bg-light: #f8f9fa;
}

.hakicms-dashboard {
    background: #fff;
    padding: 20px;
    border-radius: 15px;
}

/* User Info Header */
.hakicms-user-info-header {
    background: var(--hakicms-bg-light);
    padding: 20px;
    border-radius: 10px;
    border-left: 5px solid var(--hakicms-blue);
    margin-bottom: 30px;
}

.tier-badge {
    background: #e1f5fe;
    color: #0277bd;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 12px;
    margin-left: 10px;
}

/* Progress Cards */
.hakicms-course-progress-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.hakicms-course-progress-card.is-teaser {
    border-left: 5px solid #f1c40f;
}

.course-title {
    font-family: "Phudu", sans-serif;
    text-transform: uppercase;
    font-size: 20px;
    margin: 0 0 10px 0;
}

.teaser-msg {
    background: #fff9c4;
    color: #856404;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 13px;
}

/* Progress Bar */
.progress-bar-bg {
    background: #eee;
    height: 12px;
    border-radius: 10px;
    overflow: hidden;
    margin: 15px 0 5px 0;
}

.progress-bar-fill {
    background: var(--hakicms-green);
    height: 100%;
    transition: width 0.8s ease;
}

.progress-stats {
    font-size: 12px;
    color: #666;
    display: block;
    text-align: right;
}

/* Course Grid (Shortcode list) */
.hakicms-grid-container {
    display: grid;
    gap: 30px;
}
.cols-2 { grid-template-columns: repeat(2, 1fr); }

.hakicms-course-card-premium {
    background: #fff;
    border: 1px solid #eee;
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card-title { font-family: "Phudu"; font-size: 24px; margin-bottom: 5px; }
.card-subtitle { font-style: italic; color: #777; margin-bottom: 20px; }
.card-desc { flex-grow: 1; font-size: 15px; line-height: 1.6; margin-bottom: 20px; }

/* Buttons Style */
.card-buttons { display: flex; gap: 10px; justify-content: center; }
.btn-red, .btn-blue, .btn-white {
    padding: 12px 20px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    font-size: 13px;
    transition: 0.3s;
}

.btn-red { background: var(--hakicms-red); color: #fff; }
.btn-blue { background: var(--hakicms-blue); color: #fff; }
.btn-white { border: 1px solid #ccc; color: #333; }

.btn-red:hover, .btn-blue:hover { transform: translateY(-3px); opacity: 0.9; }

@media (max-width: 768px) {
    .hakicms-grid-container { grid-template-columns: 1fr; }
    .card-buttons { flex-direction: column; }
}