/* Search highlight */
.vk-search-highlight { background: #ffe066; color: #000; border-radius: 3px; padding: 0 2px; }
@keyframes vk-flash { 0%,100% { box-shadow: 0 0 0 0 rgba(255,210,0,0); } 50% { box-shadow: 0 0 0 6px rgba(255,210,0,0.5); } }
.vk-search-highlight.flash { animation: vk-flash 0.6s ease 2; }
/* Sidebar & Content Layout Base */
/* Sidebar & Content Layout Base */
.single-van_kien .vk-main-container { display: flex; gap: 20px; max-width: 1450px; margin: 0 auto; padding: 20px;}
.single-van_kien #vk-sidebar { width: 320px; flex-shrink: 0; position: sticky; top: 90px; height: calc(100vh - 100px); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); overflow: hidden; }
.single-van_kien .vk-sidebar-inner { width: 320px; height: 100%; overflow-y: auto; padding-right: 15px; }
.single-van_kien #vk-sidebar.collapsed { width: 0 !important; opacity: 0; pointer-events: none; }
.single-van_kien .vk-search-pill-container { margin-bottom: 25px; border-bottom: 1px solid #eee; padding-bottom: 15px; }
.single-van_kien .vk-toc-widget h3 { color: #003366; font-size: 20px !important; font-family: 'Playfair Display', serif !important; font-weight: bold; border-bottom: 2px solid #003366; display: inline-block; padding-bottom: 5px; }

/* Sidebar filter dropdowns */
.vk-sidebar-filters { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.vk-sidebar-filter-select {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #c0cfe0;
    border-radius: 7px;
    font-size: 12px;
    font-family: inherit;
    color: #003366;
    background: #fff;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}
.vk-sidebar-filter-select:focus { border-color: #003366; }
.vk-sidebar-filter-select.active { border-color: #003366; background: #f0f5ff; }

/* CPT-wide search results panel */
#vk-cpt-search-results {
    margin-top: 12px;
    background: #f8faff;
    border: 1px solid #d0ddf0;
    border-radius: 8px;
    max-height: 280px;
    overflow-y: auto;
    font-family: sans-serif;
    font-size: 13px;
}
#vk-cpt-search-results .vk-cpt-res-item {
    display: block;
    padding: 9px 12px;
    color: #003366;
    text-decoration: none;
    border-bottom: 1px solid #e8eef8;
    line-height: 1.4;
    transition: background 0.15s;
}
#vk-cpt-search-results .vk-cpt-res-item:last-child { border-bottom: none; }
#vk-cpt-search-results .vk-cpt-res-item:hover { background: #e8f0ff; }
#vk-cpt-search-results .vk-cpt-res-meta { font-size: 11px; color: #999; margin-top: 2px; }
#vk-cpt-search-results .vk-cpt-res-empty { padding: 14px 12px; color: #aaa; text-align: center; }
#vk-cpt-search-results .vk-cpt-res-loading { padding: 14px 12px; color: #888; text-align: center; }

/* Dark mode for filters */
body.vk-dark-mode .vk-sidebar-filter-select { background: #2a2a2a; color: #e0e0e0; border-color: #4a5a6a; }
body.vk-dark-mode #vk-cpt-search-results { background: #1a2535; border-color: #2d3f54; }
body.vk-dark-mode #vk-cpt-search-results .vk-cpt-res-item { color: #8ab4f8; border-color: #2d3f54; }
body.vk-dark-mode #vk-cpt-search-results .vk-cpt-res-item:hover { background: #1e3050; }

/* Search box với icon kính lúp */
.vk-search-wrapper { position: relative; display: flex; align-items: center; }
.vk-search-icon { position: absolute; left: 10px; pointer-events: none; flex-shrink: 0; }
#vk-internal-search { width: 100%; padding: 9px 12px 9px 34px; border: 2px solid #003366; border-radius: 8px; font-size: 14px; font-family: inherit; color: #333; background: #fff; outline: none; box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s; }
#vk-internal-search:focus { border-color: #005599; box-shadow: 0 0 0 3px rgba(0,51,102,0.12); }
#vk-internal-search::placeholder { color: #aaa; }

/* Toolbar (Share, Print, Cite) */
.vk-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 12px 0; }
.vk-tb-left, .vk-tb-right { display: flex; gap: 15px; align-items: center; }
.vk-btn-icon { background: transparent; border: none; color: #4a5568; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; padding: 5px; }
.vk-btn-icon:hover { color: #003366; transform: scale(1.1); }
.vk-btn-text { background: transparent; border: none; color: #4a5568; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; font-size: 14px; font-weight: 600; font-family: inherit; }
.vk-btn-text:hover { color: #003366; }

/* Số câu — xanh đậm, không viền đỏ */
.vk-v-num { background: #003366 !important; color: #fff !important; border: none !important; outline: none !important; font-weight: bold; padding: 3px 10px; border-radius: 6px; font-size: 0.88em; vertical-align: baseline; cursor: pointer; display: inline-block; margin: 2px 4px 2px 0; box-shadow: 0 2px 6px rgba(0,51,102,0.25); transition: transform 0.2s, box-shadow 0.2s; }
.vk-v-num:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,51,102,0.4); background: #002244 !important; }

/* LOGIC DARK MODE */
body.vk-dark-mode { background: #121212 !important; color: #e0e0e0 !important; }
body.vk-dark-mode .vk-main-container { background: #121212 !important; }

/* Headings trong dark mode */
body.vk-dark-mode h1, body.vk-dark-mode h2, body.vk-dark-mode h3,
body.vk-dark-mode h4, body.vk-dark-mode h5, body.vk-dark-mode h6 { color: #e0e0e0 !important; }
body.vk-dark-mode .vk-title { color: #e0e0e0 !important; }

/* Sidebar trong dark mode */
body.vk-dark-mode #vk-sidebar { background: #1a1a1a !important; }
body.vk-dark-mode .vk-toc-widget h3 { color: #8ab4f8 !important; border-color: #8ab4f8 !important; }
body.vk-dark-mode #vk-internal-search { background: #2a2a2a !important; color: #e0e0e0 !important; border-color: #4a7bc4 !important; }
body.vk-dark-mode #vk-internal-search::placeholder { color: #666 !important; }
body.vk-dark-mode .vk-search-icon stroke { stroke: #8ab4f8; }
body.vk-dark-mode .vk-search-pill-container { border-color: #333 !important; }

/* Links & toolbar */
body.vk-dark-mode a, body.vk-dark-mode .vk-toc-list a { color: #8ab4f8 !important; }
body.vk-dark-mode .vk-toolbar { border-color: #333 !important; background: #121212 !important; }
body.vk-dark-mode .vk-btn-icon, body.vk-dark-mode .vk-btn-text { color: #a0aec0 !important; }
body.vk-dark-mode .vk-btn-icon:hover, body.vk-dark-mode .vk-btn-text:hover { color: #8ab4f8 !important; }

/* Mobile footer trong dark mode */
body.vk-dark-mode #vk-mobile-footer { background: #1a1a1a !important; border-top-color: #333 !important; color: #e0e0e0 !important; }
body.vk-dark-mode #vk-mobile-footer button,
body.vk-dark-mode #vk-mobile-footer a { color: #e0e0e0 !important; }
body.vk-dark-mode #vk-mobile-footer #vk-dark-mode { color: #8ab4f8 !important; }

/* Số câu dark mode */
body.vk-dark-mode .vk-v-num { background: #1a4a7a !important; color: #fff !important; border: none !important; }

/* FAB Vuông & Menu */
.vk-fab-group { position: fixed; bottom: 85px; right: 20px; display: flex; flex-direction: column; z-index: 2147483647 !important; gap: 12px; }
.vk-fab-btn { width: 55px; height: 55px; border-radius: 8px !important; background: #003366 !important; color: white !important; border: 2px solid #fff; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.4); line-height: 1.3; font-family: sans-serif; transition: transform 0.2s;}
.vk-fab-btn:hover { transform: scale(1.05); background: #002244 !important;}

/* Footer Mobile Fixed */
#vk-mobile-footer { position: fixed; bottom: 0; left: 0; width: 100%; height: 65px; display: flex; align-items: center; justify-content: space-around; z-index: 2147483647 !important; border-top: 1px solid #ddd; background: #fff; box-shadow: 0 -3px 10px rgba(0,0,0,0.1);}

/* Reset Modal Styles */
.vk-modal { display: none; position: fixed; z-index: 2147483647 !important; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); backdrop-filter: blur(3px); }
.vk-modal-content { background-color: #fff; margin: 10% auto; padding: 25px; border: 1px solid #888; width: 90%; max-width: 450px; border-radius: 12px; max-height: 80vh; overflow-y: auto; position: relative; box-shadow: 0 10px 40px rgba(0,0,0,0.3);}
body.vk-dark-mode .vk-modal-content { background-color: #222; border-color: #444; color: #eee; }
.vk-close-modal { color: #999; position: absolute; top: 15px; right: 20px; font-size: 32px; font-weight: bold; cursor: pointer; line-height: 1; transition: color 0.2s;}
.vk-close-modal:hover { color: #003366; }

/* Grid Cho Số Câu */
.vk-grid-verse { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 10px; margin-top: 20px; }
.vk-grid-verse a { display: flex; align-items: center; justify-content: center; height: 50px; background: #f5f5f5; border-radius: 6px; color: #333; text-decoration: none; font-weight: bold; font-size: 16px; border: 1px solid #e0e0e0; transition: all 0.2s; }
body.vk-dark-mode .vk-grid-verse a { background: #333; color: #e0e0e0; border-color: #555;}
.vk-grid-verse a:hover { background: #003366; color: white; border-color: #003366; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,51,102,0.3); }

/* RESPONSIVE */
@media (min-width: 769px) {
    #vk-mobile-footer, .mobile-only { display: none !important; }
}
@media (max-width: 768px) {
    .desktop-only, #vk-sidebar { display: none !important; }
    .single-van_kien .vk-main-container { display: block; padding: 15px; }
    .vk-toolbar { flex-direction: column; gap: 15px; }
}

/* ===== PRINT / PDF ===== */
@media print {
    /* Ẩn chỉ các thành phần UI — KHÔNG dùng selector quá rộng */
    #vk-sidebar,
    .vk-toggle-col,
    .vk-toolbar,
    .vk-fab-group,
    #vk-mobile-footer,
    .vk-modal,
    #vk-footnote-tooltip,
    #wpadminbar,
    .site-header,
    .site-footer,
    .entry-footer,
    .post-navigation,
    .vk-sidebar-track,
    .desktop-only {
        display: none !important;
        visibility: hidden !important;
    }

    /* Reset style chung */
    *, *::before, *::after {
        box-shadow: none !important;
        text-shadow: none !important;
        background: transparent !important;
        color: #000 !important;
    }

    body, html {
        background: #fff !important;
        color: #000 !important;
        margin: 0;
        padding: 0;
        font-size: 11pt;
    }

    /* Mở rộng tất cả container để content hiện ra */
    #vk-wrapper, .vk-layout, .single-van_kien,
    .vk-main-container, .vk-content-area, main {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        float: none !important;
        position: static !important;
        overflow: visible !important;
    }

    /* Tiêu đề bài */
    .vk-title {
        font-size: 18pt !important;
        font-weight: bold !important;
        text-align: center !important;
        color: #000 !important;
        margin: 8mm 0 5mm !important;
        page-break-after: avoid;
    }

    /* Nội dung */
    .vk-content-body {
        font-family: 'Times New Roman', Times, serif !important;
        font-size: 12pt !important;
        line-height: 1.8 !important;
        color: #000 !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Đoạn văn không bị cắt giữa trang */
    p, li, blockquote { page-break-inside: avoid; orphans: 3; widows: 3; }
    h1, h2, h3, h4, h5, h6 { page-break-after: avoid; color: #000 !important; }

    /* Links */
    .vk-content-body a { color: #000 !important; text-decoration: none; }

    /* Số câu */
    .vk-v-num {
        background: none !important;
        color: #000 !important;
        font-weight: bold !important;
        padding: 0 3px !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Chú thích cuối bài */
    .bri-footnote-area, ol.footnotes, .footnotes {
        border-top: 1px solid #999 !important;
        margin-top: 12mm !important;
        font-size: 10pt !important;
        color: #000 !important;
    }
}
