/* CSS front-end hoc vien .academy — tach tu class-kca-frontend.php (U3, 2026-07-30).
   Truoc do in inline vao wp_head -> trinh duyet khong cache duoc.
   Ma mau thuong hieu dung var(--kc-*) tu kca-tokens.css (nap truoc, khai dependency).
   Cac ma xam trung tinh (#edf1f2, #e5e7eb...) chua co token -> giu hex, dung bia token moi. */

/* === Base === */
body { font-family: 'Inter', sans-serif !important; background: #f9fbfc; color: #333; }

/* === Elementor Flexbox Fix (Homepage) ===
   Elementor 4.x requires CSS regen from editor. Since we inject via DB,
   we force flexbox row on containers that have multiple children on front page.
   Targeting specifically the homepage (post-45787 class on body or .home)
*/
.home .elementor-container,
.home .e-con,
.home .e-con-full {
    flex-direction: var(--flex-direction, column);
}
/* Force row layout for inner sections (row containers with multiple cols) */
.home .e-con > .e-con[data-element_type="container"]:not(:only-child),
.home .elementor-element > .elementor-widget-wrap > .elementor-element:not(:only-child) {
    flex-shrink: 0;
}

/* === Header Fixes (Căn giữa chiều dọc Logo ở trang chủ) === */
.elementor-element-dbeba021 h3.elementor-heading-title {
    margin-bottom: 0 !important;
    display: flex; align-items: center; height: 100%;
    transform: translateY(5.5px) !important;
}

/* === Layout === */
.site-main { padding: 40px 0; }
.lp-content-area { max-width: 1140px; margin: 0 auto; background: #fff; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,.03); padding: 40px; }
.lp-user-profile .lp-content-area { background: transparent !important; box-shadow: none !important; padding: 0 !important; }

/* Hide sidebar */
#secondary, .lp-archive-courses-sidebar, #sidebar { display: none !important; }
.widget_search, .widget_recent_entries, .widget_recent_comments,
.widget_archive, .widget_categories, .widget_block { display: none !important; }
#primary, .lp-archive-courses { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }

/* === LP Buttons === */
.lp-button, .button, button.lp-button, .btn-buy, .lp-btn, .course-readmore a {
    background-color: var(--kc-cyan) !important; color: #fff !important;
    border-radius: 8px !important; border: none !important;
    padding: 12px 24px !important; font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important; transition: all .3s ease !important;
    box-shadow: none !important; text-decoration: none !important;
    display: inline-block; text-align: center;
}
.lp-button:hover, .button:hover, button.lp-button:hover, .btn-buy:hover, .lp-btn:hover, .course-readmore a:hover {
    background-color: var(--kc-cta-hover) !important; transform: translateY(-2px);
}

/* Fix Purple/Yellow LP → Cyan */
#popup-header, #learn-press-popup-header,
.lp-course-progress .lp-progress-bar .lp-progress-value,
.lp-course-progress-heading .lp-progress-bar .lp-progress-value,
.learn-press-progress .progress-bg .progress-active,
.items-progress .learn-press-progress__active { background-color: var(--kc-cyan) !important; }

.course-item.item-current { border-left-color: var(--kc-cyan) !important; }
.course-item.item-current > a,
.course-item.item-current .item-name { color: var(--kc-cyan) !important; }
.course-item.item-current::before,
.course-item.item-current > a::before { color: var(--kc-cyan) !important; }

/* Stars/Meta icons */
.review-stars-rated .review-stars.filled,
.lp-course-meta i, .lp-course-meta span.icon,
.course-info .icon, .course-meta .icon,
.lp-single-course .course-meta-primary i,
.lp-course-meta-primary i,
.course-meta svg, .course-info svg,
.lp-course-meta svg, .lp-course-meta-primary svg,
.learn-press-course-meta svg, .course-meta-info svg {
    color: var(--kc-cyan) !important; fill: var(--kc-cyan) !important;
}

/* Course Cards */
.lp-archive-courses .course-item {
    border-radius: 16px; border: 1px solid rgba(19,195,227,.15) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.04); overflow: hidden;
    transition: all .3s; background: #fff; padding: 20px !important;
}
.lp-archive-courses .course-item:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-4px); }
.lp-archive-courses .course-title { font-family: 'Inter', sans-serif; font-weight: 700; color: var(--kc-heading-lp); margin-bottom: 12px; }
.course-price .price { color: var(--kc-cyan) !important; font-weight: 700 !important; font-size: 18px; }
.course-thumbnail { border-radius: 16px 16px 0 0 !important; overflow: hidden; }
.course-thumbnail img { border-radius: 16px 16px 0 0 !important; width: 100%; height: auto; object-fit: cover; }

/* Profile Inputs */
.lp-profile-content input[type="text"],
.lp-profile-content input[type="password"],
.lp-profile-content input[type="email"],
.lp-profile-content form.learn-press-form input {
    width: 100%; max-width: 400px; padding: 12px 16px;
    border: 1px solid #e5e7eb; border-radius: 8px;
    font-family: 'Inter', sans-serif; font-size: 14px; color: #374151;
    transition: all .3s ease; box-sizing: border-box; background: #f9fafb;
}
.lp-profile-content input:focus {
    border-color: var(--kc-cyan); outline: none;
    box-shadow: 0 0 0 3px rgba(19,195,227,.15); background: #fff;
}
.learn-press-profile-recover-order {
    background: #fff; padding: 24px; border-radius: 12px;
    border: 1px solid #edf1f2; margin-top: 20px;
}
.learn-press-profile-recover-order button { margin-top: 12px; display: block; }

/* Curriculum */
.learn-press-curriculum { border: 1px solid #edf1f2; border-radius: 16px; overflow: hidden; }
.learn-press-curriculum .section-header { background: var(--kc-bg-app) !important; padding: 15px 20px !important; }
.learn-press-curriculum .section-title { color: var(--kc-cyan) !important; font-family: 'Inter', sans-serif; font-weight: 600; }
.learn-press-curriculum .course-item { border-bottom: 1px solid #edf1f2; padding: 12px 20px !important; }
.learn-press-curriculum .course-item:last-child { border-bottom: none; }

/* Block click on "Watch on YouTube" (bottom right on pause) */
.learn-press-video-content, .wp-block-embed-youtube, .fluid-width-video-wrapper { position: relative; }
.learn-press-video-content::after, .wp-block-embed-youtube::after, .fluid-width-video-wrapper::after {
    content: '';
    position: absolute;
    bottom: 50px; /* Above control bar */
    right: 0;
    width: 250px;
    height: 60px;
    background: transparent;
    z-index: 9999;
    pointer-events: auto; /* Block clicks going to iframe */
}

/* Progress */
.learn-press-progress .progress-bg .progress-active { background-color: var(--kc-cta-hover) !important; }

/* Tabs */
.learn-press-nav-tabs .active a, .lp-profile-nav-tabs li.active a { color: var(--kc-cyan) !important; border-bottom-color: var(--kc-cyan) !important; }
.lp-profile-nav-tabs li.active a { background-color: var(--kc-cyan) !important; color: #fff !important; }

/* === Profile Page Layout === */
#learn-press-profile .lp-profile-header,
#learn-press-profile .learn-press-user-profile-header,
#learn-press-profile .profile-info,
#learn-press-profile .lp-user-profile-header,
#learn-press-profile .lp-user-profile-avatar,
#learn-press-profile .wrapper-profile-header,
#learn-press-profile .lp-profile-right,
#learn-press-profile .lp-user-cover-image_background {
    display: none !important; height: 0 !important; margin: 0 !important;
    padding: 0 !important; opacity: 0 !important; visibility: hidden !important;
    border: none !important; background: transparent !important;
}
#learn-press-profile-nav, .lp-profile-nav {
    margin-top: 0 !important; background: #fff; border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,.03); padding: 20px; margin-bottom: 20px;
}
.lp-profile-content {
    margin-top: 0 !important; background: #fff; border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,.03); padding: 30px;
}
.learn-press-subtab-courses a.active, .learn-press-subtab-courses a:hover,
.learn-press-filters a.active, .learn-press-filters a:hover,
.learn-press-tabs .active a, .lp-sub-menu .active a,
.lp-profile-nav-tabs li.active span,
.lp-profile-content .learn-press-nav-tabs .active a,
.learn-press-sub-tabs li.active a, .learn-press-sub-tabs li a.active {
    color: var(--kc-cyan) !important; border-bottom-color: var(--kc-cyan) !important;
}

/* Hide student tab (instructor) */
#learn-press-profile-nav .students,
#learn-press-profile-nav .enrolled-students,
.learn-press-profile-nav li.students,
.learn-press-profile-nav li.enrolled-students { display: none !important; }

/* Admin notice suppression */
.notice, .update-nag, .lp-setup-notice, .learn-press-message { display: none !important; }