/*
Theme Name: Blocksy Child
Theme URI: https://creativethemes.com/blocksy/
Template: blocksy
Author: CreativeThemes
Author URI: https://creativethemes.com
Description: Blocksy is a fast, modern WordPress theme with advanced WooCommerce support and full compatibility with the block editor.
Tags: accessibility-ready,blog,block-patterns,e-commerce,wide-blocks,block-styles,grid-layout,one-column,two-columns,three-columns,four-columns,right-sidebar,left-sidebar,translation-ready,custom-colors,custom-logo,custom-menu,featured-images,footer-widgets,full-width-template,theme-options,threaded-comments
Version: 2.1.48.1784882407
Updated: 2026-07-31 13:00:00
*/

/* ==========================================================================
   1. GHI ĐÈ BỘ KHUNG TỔNG THỂ CỦA TUTOR LMS (DÙNG CHO MỌI MÀN HÌNH)
   ========================================================================== */

/* Mở rộng khung chứa cha ngoài cùng của Tutor LMS */
#tutor-single-entry-content.tutor-quiz-single-entry-wrap {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Ép khung chứa 2 cột sử dụng tối đa 100% diện tích màn hình */
.tutor-course-topic-single-body.esmart-split-view-container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Tối ưu lề trong và kiểu dáng thẻ trắng cột phải */
.esmart-lesson-right {
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #e9ecef !important;
    padding: 16px 16px 24px 16px !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* CHẾ ĐỘ THƯỜNG: Mở tràn 100% chiều rộng cho nội dung, LOẠI TRỪ các thẻ ảnh và nút bấm */
.esmart-lesson-right *:not(.esmart-expand-btn):not(.esmart-expand-icon):not(.esmart-expand-text):not(img):not(figure):not(.wp-block-image):not([class*="wp-block-uagb-image"]):not(.uagb-image-container):not([class*="code-block-pro-copy-button"]):not(.cbp-btn-text):not([class*="cbp-see-more"]),
.esmart-lesson-right .tutor-course-spotlight-wrapper,
.esmart-lesson-right .entry-content,
.esmart-lesson-right .tutor-entry-content {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ==========================================================================
   2. TRANG TRÍ KHUNG MỤC LỤC BÀI HỌC BÊN TRÁI (TOC 2 CẤP H2/H3)
   ========================================================================== */

.esmart-lesson-toc-wrapper {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 16px;
}

.esmart-toc-title {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#esmart-lesson-toc-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

.esmart-toc-h2-item {
    margin-bottom: 8px;
}

.esmart-toc-h2-item:last-child {
    margin-bottom: 0;
}

/* Thẻ chứa H2 Link + Nút +/- nằm hàng ngang */
.esmart-toc-h2-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100%;
}

/* Link cấp 1 (H2) */
.esmart-toc-h2-link {
    font-weight: 600;
    color: #1e293b;
    font-size: 13.5px;
}

/* Nút bấm +/- nằm sát ngay sau chữ H2 */
.esmart-toc-toggle-btn {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    user-select: none !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease;
}

.esmart-toc-toggle-btn:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
}

.esmart-toc-toggle-btn.is-expanded {
    background: #0284c7 !important;
    color: #ffffff !important;
}

/* Danh sách con cấp 2 (H3) */
.esmart-toc-h3-list {
    list-style: none !important;
    padding-left: 18px !important;
    margin: 4px 0 6px 0 !important;
}

.esmart-toc-h3-item {
    margin-bottom: 4px;
}

/* Link cấp 2 (H3) */
.esmart-toc-h3-link {
    font-size: 13px;
    color: #64748b;
    font-weight: 400;
}

/* Style chung cho các link trong mục lục */
.esmart-toc-item {
    text-decoration: none !important;
    display: inline-block;
    padding: 2px 0;
    transition: all 0.2s ease;
}

.esmart-toc-item:hover {
    color: #0284c7;
    padding-left: 4px;
}


/* ==========================================================================
   3. RESPONSIVE: MÀN HÌNH LỚN DESKTOP / LAPTOP (>= 992px)
   ========================================================================== */

@media (min-width: 992px) {
    /* CHỈ KHÓA CUỘN TRANG WEB KHI NẰM TRONG BÀI HỌC TUTOR LMS */
    body.tutor-single-lesson html, body.tutor-single-lesson,
    body.single-topics html, body.single-topics,
    body.is-tutor-single-course html, body.is-tutor-single-course {
        height: 100vh !important;
        overflow: hidden !important;
    }

    /* Khung chứa chính của Tutor LMS tràn full chiều cao màn hình */
    #tutor-single-entry-content,
    .tutor-course-topic-single-body.esmart-split-view-container {
        height: calc(100vh - 60px) !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    .tutor-course-topic-single-body.esmart-split-view-container {
        display: flex !important;
        flex-direction: row !important;
        gap: 20px !important;
        align-items: stretch !important;
        padding: 10px !important;
    }

    /* 2. SIDEBAR BÀI HỌC CỦA TUTOR LMS: GHIM ĐỨNG YÊN */
    .tutor-course-topic-sidebar,
    .tutor-single-course-sidebar {
        height: 100% !important;
        overflow-y: auto !important;
        flex-shrink: 0 !important;
    }

    /* 3. KHU VỰC GIỮA (VIDEO + MỤC LỤC): GHIM ĐỨNG YÊN HOÀN TOÀN */
    .esmart-lesson-left {
        width: 48% !important;
        max-width: 48% !important;
        flex: 0 0 48% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* Video dính trên cùng khu vực giữa */
    .esmart-lesson-left .tutor-video-player-wrapper {
        flex-shrink: 0 !important;
    }

    /* Khung Mục lục dính ngay dưới Video, tự cuộn nội bộ */
    .esmart-lesson-left .esmart-lesson-toc-wrapper {
        flex-grow: 1 !important;
        overflow-y: auto !important;
        margin-top: 12px !important;
    }

    /* 4. KHU VỰC BÊN PHẢI (NỘI DUNG BÀI VIẾT): ĐỘC LẬP CUỘN */
    .esmart-lesson-right {
        width: 52% !important;
        max-width: 52% !important;
        flex: 1 1 52% !important;
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 12px !important;
    }
}

/* ==========================================================================
   4. RESPONSIVE: MÀN HÌNH NHỎ / TABLET / MOBILE (< 992px)
   ========================================================================== */

@media (max-width: 991px) {
    /* Đưa container về dạng xếp dọc */
    .tutor-course-topic-single-body.esmart-split-view-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding: 0 !important;
    }

    /* Cột trái chứa Video & Mục lục */
    .esmart-lesson-left {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 99 !important; /* Đã giảm từ 9999 xuống 99 để không đè Menu/Sidebar bài học */
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin-bottom: 0 !important;
    }

    /* GHIM KHUNG VIDEO TRÊN CÙNG MÀN HÌNH */
    .esmart-lesson-left > div:first-child,
    .esmart-lesson-left .tutor-single-lesson-segment {
        position: sticky !important;
        top: 0 !important;
        z-index: 99 !important;
        background: #000000 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    }

    /* ẨN HOÀN TOÀN MỤC LỤC TRÊN MÀN HÌNH NHỎ */
    .esmart-lesson-toc-wrapper {
        display: none !important;
    }

    /* Cột phải tràn 100% và trượt bên dưới video */
    .esmart-lesson-right {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        padding: 20px 16px !important;
        position: relative !important;
        z-index: 1 !important;
        overflow-x: hidden !important;
    }

    /* --- BỔ SUNG: XỬ LÝ CHẾ ĐỘ TOÀN MÀNH HÌNH TRÊN DI ĐỘNG --- */
    /* Ẩn cột chứa video khi người dùng bật Toàn màn hình */
    .esmart-split-view-container.is-content-expanded .esmart-lesson-left {
        display: none !important;
    }

    /* Đảm bảo cột nội dung hiển thị tràn 100% màn hình */
    .esmart-split-view-container.is-content-expanded .esmart-lesson-right {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important;
    }
}
/* ==========================================================================
   5. ĐỊNH DẠNG NÚT BÀI TRƯỚC / BÀI SAU NHỎ GỌN, CHUNG 1 HÀNG 2 BÊN
   ========================================================================== */

/* Khung tổng ngoài cùng */
.esmart-lesson-internal-footer {
    width: 100% !important;
    margin-top: 25px !important;
    padding-top: 15px !important;
    border-top: 1px dashed #e2e8f0 !important;
    clear: both !important;
}

/* Ép TẤT CẢ các thẻ bao trực tiếp bên trong footer thành Flexbox nằm ngang */
.esmart-lesson-internal-footer,
.esmart-lesson-internal-footer > div,
.esmart-lesson-internal-footer .tutor-course-topic-single-footer,
.esmart-lesson-internal-footer .tutor-single-course-segment-footer,
.esmart-lesson-internal-footer .tutor-course-spotlight-footer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ép các div con chứa nút KHÔNG được chiếm 100% chiều rộng */
.esmart-lesson-internal-footer div[class*="footer-single-nav"],
.esmart-lesson-internal-footer .tutor-course-spotlight-footer-single-nav,
.esmart-lesson-internal-footer .tutor-nav-item {
    width: auto !important;
    min-width: unset !important;
    max-width: max-content !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    margin: 0 !important;
}

/* Đẩy nút Bài sau sang hẳn bên phải */
.esmart-lesson-internal-footer div[class*="footer-single-nav"]:last-child,
.esmart-lesson-internal-footer .tutor-course-spotlight-footer-single-nav:last-child {
    margin-left: auto !important;
}

/* ĐỊNH DẠNG NÚT BẤM: Nhỏ nhắn, sang trọng */
.esmart-lesson-internal-footer a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 6px 14px !important; 
    height: 32px !important;
    width: auto !important;
    max-width: fit-content !important;
    background-color: #f8fafc !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
    transition: all 0.2s ease !important;
}

.esmart-lesson-internal-footer a *,
.esmart-lesson-internal-footer a i,
.esmart-lesson-internal-footer a span,
.esmart-lesson-internal-footer a svg {
    font-size: 13px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
}

.esmart-lesson-internal-footer a:hover {
    background-color: #0284c7 !important; /* Màu xanh E-Smart */
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

.esmart-lesson-internal-footer a.disabled,
.esmart-lesson-internal-footer a[disabled] {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}


/* ==========================================================================
   6. MỞ RỘNG NỘI DUNG BÀI VIẾT TOÀN MÀNH HÌNH (FULLSCREEN MODE)
   ========================================================================== */

/* NÚT PHÓNG TO / THU NHỎ CỐ ĐỊNH CHUẨN GÓC TRÊN BÊN PHẢI */
.esmart-lesson-right #esmart-toggle-expand-btn,
.esmart-lesson-right .esmart-expand-btn {
    position: sticky !important;
    top: 5px !important;              /* Giữ nút dính nguyên vị trí góc trên */
    right: 5px !important;            /* Căn lề cố định từ vách phải */
    float: right !important;
    margin: 0 0 -35px 0 !important;   /* Xóa toàn bộ margin thừa, đẩy nội dung không bị đè */
    z-index: 9999 !important;          /* Đảm bảo luôn nằm trên cùng */
    
    background: #0284c7 !important;   /* Màu xanh E-Smart */
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.2s ease !important;
}

/* Đảm bảo icon và chữ trong nút không bị biến dạng style */
.esmart-lesson-right #esmart-toggle-expand-btn *,
.esmart-lesson-right .esmart-expand-btn * {
    color: #ffffff !important;
    font-size: 12px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.esmart-lesson-right #esmart-toggle-expand-btn:hover,
.esmart-lesson-right .esmart-expand-btn:hover {
    background: #0369a1 !important;
    transform: translateY(-1px) !important;
}

/* NÚT THU NHỎ KHI ĐANG TRONG CHẾ ĐỘ TOÀN MÀNH HÌNH (.active) */
.esmart-lesson-right #esmart-toggle-expand-btn.active,
.esmart-lesson-right .esmart-expand-btn.active {
    background: #475569 !important;   /* Đổi màu xám Slate chuyên nghiệp */
}

.esmart-lesson-right #esmart-toggle-expand-btn.active:hover,
.esmart-lesson-right .esmart-expand-btn.active:hover {
    background: #334155 !important;
}

/* KHI BẬT CHẾ ĐỘ TOÀN MÀNH HÌNH (DESKTOP >= 992px) */
@media (min-width: 992px) {
    /* Ẩn cột trái (Video + Mục lục) */
    .esmart-split-view-container.is-content-expanded .esmart-lesson-left {
        display: none !important;
    }

    /* Mở rộng cột phải chiếm toàn màn hình */
    .esmart-split-view-container.is-content-expanded .esmart-lesson-right {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        padding: 20px 24px !important;
    }

    /* GIỚI HẠN NỘI DUNG VỀ KÍCH THƯỚC CHUẨN (CĂN GIỮA MÀN HÌNH) - TRÁNH ẢNH HƯỞNG NÚT BẤM */
    .esmart-split-view-container.is-content-expanded .esmart-lesson-right > *:not(#esmart-toggle-expand-btn):not(.esmart-expand-btn),
    .esmart-split-view-container.is-content-expanded .esmart-lesson-right .tutor-course-spotlight-wrapper,
    .esmart-split-view-container.is-content-expanded .esmart-lesson-right .entry-content,
    .esmart-split-view-container.is-content-expanded .esmart-lesson-right .tutor-entry-content {
        max-width: 900px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}