Yoga Research Library<\/title>\r\n <style>\r\n :root {\r\n --yml-slate-100: #f1f5f9; --yml-slate-200: #e2e8f0; --yml-slate-300: #cbd5e1; --yml-slate-500: #64748b;\r\n --yml-slate-700: #334155; --yml-slate-800: #1e293b; --yml-slate-900: #0f172a; --yml-teal-500: #14b8a6;\r\n --yml-teal-600: #0d9488; --yml-teal-700: #0f766e; --yml-white: #ffffff; --yml-red-500: #ef4444;\r\n }\r\n \r\n \/* GENERAL SETTINGS *\/\r\n body { background-color: var(--yml-slate-100); color: var(--yml-slate-800); margin: 0; line-height: 1.5; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; }\r\n .library-container { max-width: 1280px; margin: 0 auto; padding: 1rem; }\r\n .library-header { text-align: center; margin-bottom: 2rem; }\r\n .library-title { font-size: 2.25rem; font-weight: 700; color: var(--yml-slate-900); }\r\n .library-subtitle { color: var(--yml-slate-600); margin-top: 0.5rem; text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; }\r\n \r\n \/* CONTROLS (SEARCH ONLY) *\/\r\n .controls-container { max-width: 800px; margin: 0 auto 1.5rem auto; display: flex; justify-content: center; }\r\n .search-input { width: 100%; padding: 0.75rem; border: 1px solid var(--yml-slate-300); border-radius: 0.5rem; transition: all 0.2s; box-sizing: border-box; font-size: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }\r\n .search-input:focus { outline: none; border-color: var(--yml-teal-500); box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2); }\r\n \r\n .total-studies { font-size: 0.95rem; color: var(--yml-slate-700); margin: 10px 0 20px 0; font-weight: 500; text-align: center; }\r\n .tag-filters-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 2rem; }\r\n .research-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.5rem; padding-bottom: 2rem; }\r\n \r\n \/* STUDY CARD *\/\r\n .study-card { background-color: #ffffff; padding: 1.5rem; border-radius: 0.5rem; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); transition: all 0.2s; border: 1px solid var(--yml-slate-200); display: flex; flex-direction: column; }\r\n .study-card.open-modal:hover { cursor: pointer; transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-color: var(--yml-teal-500); }\r\n .study-card-title { font-size: 1.15rem; font-weight: 700; color: var(--yml-slate-900); margin: 0 0 0.5rem 0; line-height: 1.4; }\r\n .study-card-meta { font-size: 0.875rem; color: var(--yml-slate-500); margin-bottom: 1rem; }\r\n .study-card-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; }\r\n .tag-pill { border: 1px solid var(--yml-slate-200); font-size: 0.75rem; font-weight: 500; padding: 0.125rem 0.625rem; border-radius: 9999px; background-color: var(--yml-slate-50); color: var(--yml-slate-600); }\r\n .study-card-actions { margin-top: 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }\r\n .feedback-note { margin-top: 2rem; padding-top: 1rem; border-top: 1px dashed var(--yml-slate-300); display: flex; align-items: flex-start; gap: .75rem; font-size: .875rem; color: var(--yml-slate-500); font-style: italic; }\r\n \r\n \/* MODAL *\/\r\n body.yml-modal-open { overflow: hidden; }\r\n .yml-modal-container { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(15, 23, 42, 0.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); justify-content: center; align-items: center; }\r\n .yml-modal-container.visible { display: flex; animation: yml-fadeIn 0.2s ease-out; }\r\n .yml-modal-content { background: var(--yml-white); width: 95%; max-width: 1000px; height: 90vh; max-height: 800px; border-radius: 0.75rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.2); display: flex; flex-direction: column; animation: yml-scaleIn 0.2s ease-out; position: relative; overflow: hidden; }\r\n #yml-modal-close-btn { position: absolute; top: 12px; right: 12px; background: rgba(241, 245, 249, 0.8); border: none; font-size: 1.5rem; line-height: 1; color: var(--yml-slate-500); cursor: pointer; transition: all 0.2s; z-index: 20; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }\r\n #yml-modal-close-btn:hover { color: var(--yml-red-500); background: #fff; transform: rotate(90deg); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }\r\n #yml-modal-body { padding: 0; overflow: hidden; flex-grow: 1; height: 100%; }\r\n \r\n .modal-grid-layout { display: grid; grid-template-columns: 300px 1fr; height: 100%; }\r\n .modal-sidebar { border-right: 1px solid var(--yml-slate-200); display: flex; flex-direction: column; overflow: hidden; background-color: #f8fafc; }\r\n .modal-sidebar-header { padding: 1rem; border-bottom: 1px solid var(--yml-slate-200); background-color: var(--yml-white); }\r\n #modal-search-input { width: 100%; padding: 0.5rem; font-size: 0.875rem; border: 1px solid var(--yml-slate-300); border-radius: 0.375rem; box-sizing: border-box; }\r\n .modal-sidebar-list { overflow-y: auto; flex-grow: 1; }\r\n .sidebar-item { padding: 1rem; cursor: pointer; border-bottom: 1px solid var(--yml-slate-200); transition: all 0.2s; border-left: 3px solid transparent; }\r\n .sidebar-item:hover { background-color: var(--yml-white); }\r\n .sidebar-item.active { background-color: var(--yml-white); border-left-color: var(--yml-teal-500); box-shadow: 0 1px 3px rgba(0,0,0,0.05); }\r\n .sidebar-item-title { font-weight: 600; font-size: 0.9rem; color: var(--yml-slate-800); margin-bottom: 0.25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }\r\n .sidebar-item-meta { font-size: 0.75rem; color: var(--yml-slate-500); }\r\n \r\n .modal-main-content { display: flex; flex-direction: column; overflow: hidden; height: 100%; background-color: var(--yml-white); }\r\n .modal-details-header { padding: 2rem 3rem 1.5rem 3rem; border-bottom: 1px solid var(--yml-slate-200); flex-shrink: 0; background: #fff; }\r\n .modal-details-body { padding: 1.5rem 3rem 2.5rem 3rem; overflow-y: auto; flex-grow: 1; }\r\n \r\n \/* OTHER COMPONENTS *\/\r\n h1.research-title-en { font-size: 1.5rem; font-weight: 700; color: var(--yml-slate-900); margin: 0; line-height: 1.4; }\r\n .research-meta { font-size: 0.9rem; color: var(--yml-slate-600); margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; }\r\n h2.body-title { font-size: 1.1rem; font-weight: 600; color: var(--yml-teal-700); margin: 0 0 1rem 0; display: flex; align-items: center; gap: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }\r\n \r\n .summary-item { margin-bottom: 1.5rem; background: #f8fafc; padding: 1.25rem; border-radius: 0.5rem; border: 1px solid var(--yml-slate-200); }\r\n .summary-item:last-child { margin-bottom: 0; }\r\n .summary-item-title { font-weight: 700; color: var(--yml-slate-800); margin: 0 0 0.5rem 0; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.03em; }\r\n .summary-item p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--yml-slate-700); text-align: justify; }\r\n \r\n .button-group { margin-top: 2rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }\r\n .action-button { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.375rem; font-weight: 600; text-decoration: none; transition: all .2s ease-in-out; border: 1px solid transparent; cursor: pointer; font-size: 0.875rem; }\r\n .action-button.primary { background-color: var(--yml-teal-600); color: var(--yml-white); box-shadow: 0 2px 4px rgba(13, 148, 136, 0.2); }\r\n .action-button.primary:hover { background-color: var(--yml-teal-700); transform: translateY(-1px); }\r\n .action-button.secondary { background-color: var(--yml-white); color: var(--yml-slate-700); border-color: var(--yml-slate-300); }\r\n .action-button.secondary:hover { background-color: var(--yml-slate-50); border-color: var(--yml-slate-400); color: var(--yml-slate-900); }\r\n \r\n .filter-button { padding: 0.5rem 1rem; border-radius: 9999px; font-weight: 500; font-size: 0.875rem; cursor: pointer; transition: all 0.2s; border: 1px solid var(--yml-slate-300); background-color: var(--yml-white); color: var(--yml-slate-600); }\r\n .filter-button:hover { border-color: var(--yml-teal-500); color: var(--yml-teal-700); background-color: #f0fdfa; }\r\n .filter-button.active { background-color: var(--yml-teal-600); color: var(--yml-white); border-color: var(--yml-teal-600); box-shadow: 0 2px 4px rgba(13, 148, 136, 0.3); }\r\n .filter-button.hidden-tag { display: none; }\r\n .see-more-btn { background-color: transparent !important; color: var(--yml-teal-600) !important; border: 1px dashed var(--yml-teal-500) !important; font-weight: 600; }\r\n .see-more-btn:hover { background-color: rgba(20, 184, 166, 0.05) !important; }\r\n \r\n .hidden { display: none !important; }\r\n\r\n \/* RESPONSIVE *\/\r\n @media (min-width: 768px) {\r\n .library-container { padding: 2.5rem; }\r\n .research-grid { grid-template-columns: repeat(2, 1fr); }\r\n }\r\n @media (min-width: 1200px) { \r\n .research-grid { grid-template-columns: repeat(3, 1fr); } \r\n }\r\n @media (max-width: 768px) {\r\n .modal-grid-layout { grid-template-columns: 1fr; height: 100%; }\r\n .modal-sidebar { display: none; }\r\n .yml-modal-content { height: 100%; width: 100%; border-radius: 0; }\r\n .modal-main-content { overflow-y: auto; }\r\n h1.research-title-en { font-size: 1.25rem; }\r\n .modal-details-header { padding: 1.5rem; }\r\n .modal-details-body { padding: 1.5rem; }\r\n #yml-modal-close-btn { top: 12px; right: 12px; background: #f1f5f9; }\r\n }\r\n \r\n @keyframes yml-fadeIn{from{opacity:0} to{opacity:1}}\r\n @keyframes yml-scaleIn{from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)}}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"library-container\">\r\n <header class=\"library-header\">\r\n <h1 class=\"library-title\">Yoga Research Library<\/h1>\r\n <p class=\"library-subtitle\">Explore the international standard scientific database on Yoga \u2013 benefits and physiological effects verified by PubMed, PMC, and reputable journals.<\/p>\r\n <\/header>\r\n \r\n <div class=\"controls-container\">\r\n <input type=\"search\" id=\"search-input\" placeholder=\"Search for studies, topics, or keywords...\" class=\"search-input\">\r\n <\/div>\r\n \r\n <div id=\"total-studies\" class=\"total-studies\">Loading database...<\/div>\r\n \r\n <div id=\"filter-container\" class=\"tag-filters-container\">\r\n <button class=\"filter-button active\" data-tag=\"all\">All<\/button>\r\n <\/div>\r\n \r\n <main id=\"research-list\" class=\"research-grid\"><\/main>\r\n <\/div>\r\n\r\n <div id=\"yml-modal-container\" class=\"yml-modal-container\">\r\n <div class=\"yml-modal-content\">\r\n <button id=\"yml-modal-close-btn\" title=\"Close\">×<\/button>\r\n <div id=\"yml-modal-body\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n \"use strict\";\r\n\r\n \/\/ VARIABLES\r\n let libraryData = [];\r\n let currentContextStudies = [];\r\n const searchInput = document.getElementById('search-input');\r\n const researchListContainer = document.getElementById('research-list');\r\n const filterContainer = document.getElementById('filter-container');\r\n const modalContainer = document.getElementById('yml-modal-container');\r\n const modalBody = document.getElementById('yml-modal-body');\r\n const modalCloseBtn = document.getElementById('yml-modal-close-btn');\r\n const totalStudiesEl = document.getElementById('total-studies');\r\n\r\n \/\/ INITIALIZE LIBRARY\r\n async function initializeLibrary() {\r\n const studiesURL = 'https:\/\/yogaismylife.vn\/en\/wp-content\/uploads\/studies-data-en.json';\r\n \r\n try {\r\n \/\/ ONLY Fetch Studies\r\n const studiesRes = await fetch(`${studiesURL}?v=${new Date().getTime()}`);\r\n\r\n if (!studiesRes.ok) { throw new Error(`HTTP Error: ${studiesRes.status} when loading studies.`); }\r\n \r\n libraryData = await studiesRes.json();\r\n \r\n \/\/ Sort studies by ID descending (newest first)\r\n libraryData.sort((a, b) => b.id - a.id);\r\n \r\n \/\/ Initialize view\r\n updateDisplay(); \r\n populateTagFilters(libraryData);\r\n \r\n } catch (error) {\r\n console.error(\"Library Load Error:\", error);\r\n const mainContainer = document.querySelector('.library-container');\r\n if (mainContainer) { \r\n mainContainer.innerHTML = `<div style=\"text-align: center; color: var(--yml-red-500); padding: 3rem;\">\r\n <h3>Unable to load database<\/h3>\r\n <p>${error.message}<\/p>\r\n <p>Please ensure 'studies-data-en.json' is correctly uploaded to the \/en\/ folder.<\/p>\r\n <\/div>`; \r\n }\r\n }\r\n }\r\n \r\n \/\/ === RENDER UI FUNCTIONS ===\r\n\r\n function populateTagFilters(studies) {\r\n const tagGroups = {\r\n 'Mental Health': ['Mental Health', 'Anxiety', 'Depression', 'Stress', 'PTSD', 'Postpartum Depression', 'Mindfulness', 'Emotional Suppression', 'Eating Behavior', 'Mood', 'Well-being'],\r\n 'Neurology & Brain': ['Neuroscience', 'Brain', 'Memory', 'Cognitive Function', 'Alzheimer\\'s Disease', 'Dementia', 'Mild Cognitive Impairment', 'Parkinson\\'s Disease', 'Multiple Sclerosis', 'Neuroplasticity', 'Hippocampus', 'BDNF', 'Acquired Brain Injury', 'Neurodisability'],\r\n 'Musculoskeletal': ['Musculoskeletal', 'Chronic Pain', 'Low Back Pain', 'Neck Pain', 'Knee Osteoarthritis', 'Arthritis', 'Rheumatoid Arthritis', 'Osteoporosis', 'Fibromyalgia', 'Scoliosis', 'Kyphosis', 'Spine', 'Carpal Tunnel Syndrome', 'Shoulder Pain', 'Back Pain'],\r\n 'Cardiovascular': ['Cardiovascular', 'Heart Disease', 'Hypertension', 'Blood Pressure', 'Heart Rate Variability', 'Vascular Function', 'Stroke', 'Arrhythmia', 'Atrial Fibrillation', 'Heart Failure'],\r\n 'Respiratory': ['Respiratory System', 'Pulmonary Function', 'Asthma', 'COPD', 'Breathing Exercises', 'Pranayama', 'Lung Function'],\r\n 'Metabolic & Endocrine': ['Metabolic Syndrome', 'Diabetes', 'Type 2 Diabetes', 'Type 1 Diabetes', 'Obesity', 'Weight Loss', 'Body Composition', 'Glycemic Control', 'Insulin Resistance', 'Thyroid', 'Hypothyroidism', 'Cortisol'],\r\n 'Women\\'s Health': ['Women\\'s Health', 'Pregnancy', 'Prenatal Yoga', 'Postnatal', 'Menopause', 'PCOS', 'Breast Cancer', 'Dysmenorrhea', 'Sexual Function', 'Gynecological Cancer', 'Infertility'],\r\n 'Populations': ['Geriatrics', 'Pediatrics', 'Adolescents', 'Veterans', 'Caregivers', 'Office Workers', 'Athletes', 'Students', 'Disability', 'Military Health', 'Teachers', 'Men\\'s Health'],\r\n 'Research Types': ['Meta-Analysis', 'Systematic Review', 'Randomized Controlled Trial', 'Pilot Study', 'Review', 'Qualitative Research', 'Protocol']\r\n };\r\n\r\n const priorityTags = ['Quality of Life', 'Pain Management', 'Physical Fitness', 'Sleep Quality'];\r\n \r\n const allTags = new Set(studies.flatMap(study => study.tags || []));\r\n const finalDisplayTags = [];\r\n const groupedTags = new Set();\r\n\r\n Object.keys(tagGroups).forEach(groupName => {\r\n const childTags = tagGroups[groupName];\r\n if (childTags.some(child => Array.from(allTags).some(t => t.toLowerCase() === child.toLowerCase()))) {\r\n finalDisplayTags.push(groupName);\r\n childTags.forEach(child => groupedTags.add(child.toLowerCase()));\r\n }\r\n });\r\n\r\n priorityTags.forEach(pTag => {\r\n if (Array.from(allTags).some(t => t.toLowerCase() === pTag.toLowerCase()) && !groupedTags.has(pTag.toLowerCase())) {\r\n finalDisplayTags.push(pTag);\r\n }\r\n });\r\n\r\n const otherTags = Array.from(allTags)\r\n .filter(tag => !groupedTags.has(tag.toLowerCase()) && !priorityTags.some(pt => pt.toLowerCase() === tag.toLowerCase()))\r\n .sort();\r\n \r\n finalDisplayTags.push(...otherTags);\r\n\r\n \/\/ Keep \"All\" button, remove others\r\n while (filterContainer.children.length > 1) { filterContainer.removeChild(filterContainer.lastChild); }\r\n\r\n finalDisplayTags.forEach((displayTag, index) => {\r\n const button = document.createElement('button');\r\n button.className = 'filter-button';\r\n button.textContent = displayTag;\r\n \r\n if (tagGroups[displayTag]) {\r\n button.dataset.tag = tagGroups[displayTag].join(',');\r\n } else {\r\n button.dataset.tag = displayTag;\r\n }\r\n \r\n if (index >= 10) { button.classList.add('hidden-tag'); }\r\n filterContainer.appendChild(button);\r\n });\r\n\r\n if (finalDisplayTags.length > 10) {\r\n const seeMoreBtn = document.createElement('button');\r\n seeMoreBtn.textContent = 'See more...';\r\n seeMoreBtn.className = 'filter-button see-more-btn';\r\n seeMoreBtn.dataset.state = 'collapsed';\r\n filterContainer.appendChild(seeMoreBtn);\r\n \r\n seeMoreBtn.addEventListener('click', () => {\r\n const isCollapsed = seeMoreBtn.dataset.state === 'collapsed';\r\n const tagButtons = Array.from(filterContainer.children).filter(el => el.matches('.filter-button') && !el.matches('.see-more-btn') && el.dataset.tag !== 'all');\r\n \r\n if (isCollapsed) {\r\n tagButtons.forEach(btn => btn.classList.remove('hidden-tag'));\r\n seeMoreBtn.textContent = 'Show less';\r\n seeMoreBtn.dataset.state = 'expanded';\r\n } else {\r\n tagButtons.forEach((btn, index) => {\r\n if (index >= 10) { btn.classList.add('hidden-tag'); }\r\n });\r\n seeMoreBtn.textContent = 'See more...';\r\n seeMoreBtn.dataset.state = 'collapsed';\r\n }\r\n });\r\n }\r\n }\r\n\r\n function renderStudyList(studies) {\r\n currentContextStudies = studies;\r\n researchListContainer.innerHTML = '';\r\n \r\n if (!studies || studies.length === 0) {\r\n researchListContainer.innerHTML = `<p style=\"text-align: center; grid-column: 1 \/ -1; color: var(--yml-slate-500); padding: 2rem;\">No studies found matching your criteria.<\/p>`;\r\n return;\r\n }\r\n \r\n studies.forEach(study => {\r\n \/\/ Logic to prioritize English title\r\n const displayTitle = study.title_en || study.title_vi || 'Untitled Study';\r\n \r\n const tagsHTML = (study.tags || []).slice(0, 4).map(tag => `<span class=\"tag-pill\">${tag}<\/span>`).join('');\r\n const remainingTags = (study.tags || []).length > 4 ? `<span class=\"tag-pill\" title=\"${study.tags.slice(4).join(', ')}\">+${study.tags.length - 4}<\/span>` : '';\r\n \r\n const card = document.createElement('div');\r\n card.className = 'study-card open-modal';\r\n card.dataset.id = study.id;\r\n card.innerHTML = `\r\n <h2 class=\"study-card-title\">${displayTitle}<\/h2>\r\n <p class=\"study-card-meta\">${(study.authors || []).join(', ')} \u2022 ${study.year}<\/p>\r\n <div class=\"study-card-tags\">${tagsHTML}${remainingTags}<\/div>\r\n `;\r\n researchListContainer.appendChild(card);\r\n });\r\n }\r\n \r\n \/\/ === DISPLAY CONTROL FUNCTIONS ===\r\n function updateDisplay() {\r\n const searchTerm = searchInput.value.toLowerCase().trim();\r\n const activeBtn = filterContainer.querySelector('.filter-button.active');\r\n const activeTag = activeBtn ? activeBtn.dataset.tag : 'all';\r\n\r\n let filteredStudies = libraryData;\r\n \r\n \/\/ Filter by Tag\r\n if (activeTag !== 'all') {\r\n if (activeTag.includes(',')) {\r\n const groupTags = activeTag.split(',').map(t => t.trim().toLowerCase());\r\n filteredStudies = filteredStudies.filter(study => \r\n (study.tags || []).some(tag => groupTags.includes(tag.toLowerCase()))\r\n );\r\n } else {\r\n filteredStudies = filteredStudies.filter(study => \r\n (study.tags || []).some(t => t.toLowerCase() === activeTag.toLowerCase())\r\n );\r\n }\r\n }\r\n \r\n \/\/ Filter by Search\r\n if (searchTerm) {\r\n filteredStudies = filteredStudies.filter(s => \r\n (s.title_en && s.title_en.toLowerCase().includes(searchTerm)) || \r\n (s.title_vi && s.title_vi.toLowerCase().includes(searchTerm)) ||\r\n ((s.tags || []).some(t => t.toLowerCase().includes(searchTerm))) ||\r\n ((s.authors || []).some(a => a.toLowerCase().includes(searchTerm)))\r\n );\r\n }\r\n \r\n renderStudyList(filteredStudies);\r\n totalStudiesEl.textContent = `Total studies: ${filteredStudies.length}`;\r\n }\r\n\r\n \/\/ === MODAL HANDLING FUNCTIONS ===\r\n function buildModalContentHTML(studyId) {\r\n const study = libraryData.find(s => s.id == studyId);\r\n if (!study) return '';\r\n \r\n const sidebarItemsHTML = currentContextStudies.map(item => `\r\n <div class=\"sidebar-item ${item.id == studyId ? 'active' : ''}\" data-id=\"${item.id}\">\r\n <div class=\"sidebar-item-title\">${item.title_en || item.title_vi || 'Untitled'}<\/div>\r\n <div class=\"sidebar-item-meta\">${(item.authors || []).join(', ')}<\/div>\r\n <\/div>\r\n `).join('');\r\n \r\n return `\r\n <div class=\"modal-grid-layout\">\r\n <div class=\"modal-sidebar\">\r\n <div class=\"modal-sidebar-header\">\r\n <input type=\"search\" id=\"modal-search-input\" placeholder=\"Filter list...\">\r\n <\/div>\r\n <div class=\"modal-sidebar-list\">\r\n ${sidebarItemsHTML}\r\n <\/div>\r\n <\/div>\r\n <div class=\"modal-main-content\">\r\n ${buildResearchDetailsHTML(study)}\r\n <\/div>\r\n <\/div>`;\r\n }\r\n\r\n function buildResearchDetailsHTML(study) {\r\n if (!study) return `<div class=\"modal-details-body\"><p>Study not found.<\/p><\/div>`;\r\n \r\n const authorsHTML = (study.authors && Array.isArray(study.authors)) ? study.authors.join(', ') : \"Unknown Author\";\r\n \r\n const doiButton = study.doi ? `<a href=\"${study.doi}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"action-button primary\">Read Full Study (DOI)<\/a>` : '';\r\n const articleButton = (study.article && study.article !== '#' && study.article !== '') ? `<a href=\"${study.article}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"action-button secondary\">Practical Application<\/a>` : '';\r\n const topicButton = (study.topic_link && study.topic_link !== '#' && study.topic_link !== '') ? `<a href=\"${study.topic_link}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"action-button secondary\">In-depth Analysis<\/a>` : '';\r\n \r\n const buttonGroup = (doiButton || articleButton || topicButton) ? `<div class=\"button-group\">${doiButton}${topicButton}${articleButton}<\/div>` : '';\r\n const tagsHTML = (study.tags || []).map(tag => `<span class=\"tag-pill\">${tag}<\/span>`).join('');\r\n\r\n let summaryHTML = '';\r\n if (study.summary && typeof study.summary === 'object') {\r\n summaryHTML = `\r\n <div class=\"summary-item\">\r\n <h3 class=\"summary-item-title\">Methodology<\/h3>\r\n <p>${study.summary.method || 'No methodology details available.'}<\/p>\r\n <\/div>\r\n <div class=\"summary-item\">\r\n <h3 class=\"summary-item-title\">Key Results<\/h3>\r\n <p>${study.summary.result || 'No results details available.'}<\/p>\r\n <\/div>\r\n <div class=\"summary-item\">\r\n <h3 class=\"summary-item-title\">Clinical Application<\/h3>\r\n <p>${study.summary.application || 'No application details available.'}<\/p>\r\n <\/div>`;\r\n }\r\n\r\n const displayTitle = study.title_en || study.title_vi || 'Untitled Study';\r\n\r\n return `\r\n <div class=\"modal-details-header\">\r\n <h1 class=\"research-title-en\">${displayTitle}<\/h1>\r\n <div class=\"research-meta\">\r\n <span><strong>Authors:<\/strong> ${authorsHTML}<\/span>\r\n <span><strong>Year:<\/strong> ${study.year || 'N\/A'}<\/span>\r\n <\/div>\r\n <div style=\"margin-top: 1rem; display:flex; gap:0.5rem; flex-wrap:wrap;\">${tagsHTML}<\/div>\r\n <\/div>\r\n <div class=\"modal-details-body\">\r\n ${summaryHTML}\r\n ${buttonGroup}\r\n <div class=\"feedback-note\">\r\n <svg style=\"width: 1.25rem; height: 1.25rem; flex-shrink: 0;\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\" clip-rule=\"evenodd\" \/>\r\n <\/svg>\r\n <span>Data verified and compiled from scientific sources.<\/span>\r\n <\/div>\r\n <\/div>`;\r\n }\r\n \r\n function openModal(studyId) {\r\n modalBody.innerHTML = buildModalContentHTML(studyId);\r\n modalContainer.classList.add('visible');\r\n document.body.classList.add('yml-modal-open');\r\n \r\n const modalInput = document.getElementById('modal-search-input');\r\n if(modalInput){\r\n modalInput.addEventListener('input', (e) => {\r\n const term = e.target.value.toLowerCase();\r\n const items = document.querySelectorAll('.sidebar-item');\r\n items.forEach(item => {\r\n const text = item.innerText.toLowerCase();\r\n item.style.display = text.includes(term) ? 'block' : 'none';\r\n });\r\n });\r\n }\r\n }\r\n\r\n function closeModal() {\r\n modalContainer.classList.remove('visible');\r\n document.body.classList.remove('yml-modal-open');\r\n }\r\n\r\n \/\/ === EVENT LISTENERS ===\r\n searchInput.addEventListener('input', updateDisplay);\r\n \r\n filterContainer.addEventListener('click', (e) => { \r\n if (e.target.matches('.filter-button:not(.see-more-btn)')) { \r\n filterContainer.querySelector('.filter-button.active')?.classList.remove('active'); \r\n e.target.classList.add('active'); \r\n updateDisplay(); \r\n } \r\n });\r\n \r\n document.body.addEventListener('click', (e) => {\r\n const card = e.target.closest('.open-modal');\r\n if (card && !e.target.closest('a')) {\r\n const studyId = card.dataset.id;\r\n if (studyId) openModal(studyId);\r\n }\r\n });\r\n \r\n modalCloseBtn.addEventListener('click', closeModal);\r\n \r\n modalContainer.addEventListener('click', e => {\r\n if (e.target === modalContainer) closeModal();\r\n \r\n const sidebarItem = e.target.closest('.sidebar-item');\r\n if (sidebarItem) {\r\n const studyId = sidebarItem.dataset.id;\r\n const study = libraryData.find(s => s.id == studyId);\r\n if (study) {\r\n modalContainer.querySelector('.modal-main-content').innerHTML = buildResearchDetailsHTML(study);\r\n modalContainer.querySelectorAll('.sidebar-item').forEach(el => el.classList.remove('active'));\r\n sidebarItem.classList.add('active');\r\n }\r\n }\r\n });\r\n\r\n document.addEventListener('keydown', e => {\r\n if (e.key === 'Escape' && modalContainer.classList.contains('visible')) closeModal();\r\n });\r\n\r\n \/\/ Start App\r\n initializeLibrary();\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":362,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-80","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\n<title>Yoga Research Library | Evidence-Based Yoga Studies<\/title>\n<meta name=\"description\" content=\"A curated library of peer-reviewed yoga research covering biomechanics, EMG analysis, spinal health, hypertension, and evidence-based therapeutic yoga.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/yogaismylife.vn\/en\/yoga-research-library\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Yoga Research Library | Evidence-Based Yoga Studies\" \/>\n<meta property=\"og:description\" content=\"A curated library of peer-reviewed yoga research covering biomechanics, EMG analysis, spinal health, hypertension, and evidence-based therapeutic yoga.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/yogaismylife.vn\/en\/yoga-research-library\/\" \/>\n<meta property=\"og:site_name\" content=\"Yoga Is My Life | Evidence-Based Yoga & Anatomy\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/web.facebook.com\/YGisML\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-15T12:55:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/yogaismylife.vn\/en\/wp-content\/uploads\/2026\/02\/YIML-Yoga-Research-Library.avif\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"537\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/yoga-research-library\\\/\",\"url\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/yoga-research-library\\\/\",\"name\":\"Yoga Research Library | Evidence-Based Yoga Studies\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/yoga-research-library\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/yoga-research-library\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/YIML-Yoga-Research-Library.avif\",\"datePublished\":\"2026-02-11T00:53:24+00:00\",\"dateModified\":\"2026-02-15T12:55:40+00:00\",\"description\":\"A curated library of peer-reviewed yoga research covering biomechanics, EMG analysis, spinal health, hypertension, and evidence-based therapeutic yoga.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/yoga-research-library\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/yoga-research-library\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/yoga-research-library\\\/#primaryimage\",\"url\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/YIML-Yoga-Research-Library.avif\",\"contentUrl\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/YIML-Yoga-Research-Library.avif\",\"width\":800,\"height\":537,\"caption\":\"Yoga Research Library: evidence-based yoga database featuring systematic reviews, biomechanics, EMG studies & clinical guidelines.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/yoga-research-library\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home page\",\"item\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Yoga Research Library\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/\",\"name\":\"Yoga Is My Life | Evidence-Based Yoga & Anatomy\",\"description\":\"Professional Yoga Anatomy & Therapy - A Library of 1,800+ Research-Backed Guides.\",\"publisher\":{\"@id\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/#organization\",\"name\":\"Yoga Is My Life | Evidence-Based Yoga & Anatomy\",\"url\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/cropped-cropped-ll.avif\",\"contentUrl\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/cropped-cropped-ll.avif\",\"width\":511,\"height\":171,\"caption\":\"Yoga Is My Life | Evidence-Based Yoga & Anatomy\"},\"image\":{\"@id\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/web.facebook.com\\\/YGisML\\\/\",\"https:\\\/\\\/www.pinterest.com\\\/YogaIsMyLifeVN\\\/\"]}]}<\/script>\n","yoast_head_json":{"title":"Yoga Research Library | Evidence-Based Yoga Studies","description":"A curated library of peer-reviewed yoga research covering biomechanics, EMG analysis, spinal health, hypertension, and evidence-based therapeutic yoga.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/yogaismylife.vn\/en\/yoga-research-library\/","og_locale":"en_US","og_type":"article","og_title":"Yoga Research Library | Evidence-Based Yoga Studies","og_description":"A curated library of peer-reviewed yoga research covering biomechanics, EMG analysis, spinal health, hypertension, and evidence-based therapeutic yoga.","og_url":"https:\/\/yogaismylife.vn\/en\/yoga-research-library\/","og_site_name":"Yoga Is My Life | Evidence-Based Yoga & Anatomy","article_publisher":"https:\/\/web.facebook.com\/YGisML\/","article_modified_time":"2026-02-15T12:55:40+00:00","og_image":[{"width":800,"height":537,"url":"https:\/\/yogaismylife.vn\/en\/wp-content\/uploads\/2026\/02\/YIML-Yoga-Research-Library.avif","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/yogaismylife.vn\/en\/yoga-research-library\/","url":"https:\/\/yogaismylife.vn\/en\/yoga-research-library\/","name":"Yoga Research Library | Evidence-Based Yoga Studies","isPartOf":{"@id":"https:\/\/yogaismylife.vn\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/yogaismylife.vn\/en\/yoga-research-library\/#primaryimage"},"image":{"@id":"https:\/\/yogaismylife.vn\/en\/yoga-research-library\/#primaryimage"},"thumbnailUrl":"https:\/\/yogaismylife.vn\/en\/wp-content\/uploads\/2026\/02\/YIML-Yoga-Research-Library.avif","datePublished":"2026-02-11T00:53:24+00:00","dateModified":"2026-02-15T12:55:40+00:00","description":"A curated library of peer-reviewed yoga research covering biomechanics, EMG analysis, spinal health, hypertension, and evidence-based therapeutic yoga.","breadcrumb":{"@id":"https:\/\/yogaismylife.vn\/en\/yoga-research-library\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/yogaismylife.vn\/en\/yoga-research-library\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/yogaismylife.vn\/en\/yoga-research-library\/#primaryimage","url":"https:\/\/yogaismylife.vn\/en\/wp-content\/uploads\/2026\/02\/YIML-Yoga-Research-Library.avif","contentUrl":"https:\/\/yogaismylife.vn\/en\/wp-content\/uploads\/2026\/02\/YIML-Yoga-Research-Library.avif","width":800,"height":537,"caption":"Yoga Research Library: evidence-based yoga database featuring systematic reviews, biomechanics, EMG studies & clinical guidelines."},{"@type":"BreadcrumbList","@id":"https:\/\/yogaismylife.vn\/en\/yoga-research-library\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home page","item":"https:\/\/yogaismylife.vn\/en\/"},{"@type":"ListItem","position":2,"name":"Yoga Research Library"}]},{"@type":"WebSite","@id":"https:\/\/yogaismylife.vn\/en\/#website","url":"https:\/\/yogaismylife.vn\/en\/","name":"Yoga Is My Life | Evidence-Based Yoga & Anatomy","description":"Professional Yoga Anatomy & Therapy - A Library of 1,800+ Research-Backed Guides.","publisher":{"@id":"https:\/\/yogaismylife.vn\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/yogaismylife.vn\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/yogaismylife.vn\/en\/#organization","name":"Yoga Is My Life | Evidence-Based Yoga & Anatomy","url":"https:\/\/yogaismylife.vn\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/yogaismylife.vn\/en\/#\/schema\/logo\/image\/","url":"https:\/\/yogaismylife.vn\/en\/wp-content\/uploads\/2026\/02\/cropped-cropped-ll.avif","contentUrl":"https:\/\/yogaismylife.vn\/en\/wp-content\/uploads\/2026\/02\/cropped-cropped-ll.avif","width":511,"height":171,"caption":"Yoga Is My Life | Evidence-Based Yoga & Anatomy"},"image":{"@id":"https:\/\/yogaismylife.vn\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/web.facebook.com\/YGisML\/","https:\/\/www.pinterest.com\/YogaIsMyLifeVN\/"]}]}},"_links":{"self":[{"href":"https:\/\/yogaismylife.vn\/en\/wp-json\/wp\/v2\/pages\/80","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yogaismylife.vn\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yogaismylife.vn\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yogaismylife.vn\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yogaismylife.vn\/en\/wp-json\/wp\/v2\/comments?post=80"}],"version-history":[{"count":3,"href":"https:\/\/yogaismylife.vn\/en\/wp-json\/wp\/v2\/pages\/80\/revisions"}],"predecessor-version":[{"id":363,"href":"https:\/\/yogaismylife.vn\/en\/wp-json\/wp\/v2\/pages\/80\/revisions\/363"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/yogaismylife.vn\/en\/wp-json\/wp\/v2\/media\/362"}],"wp:attachment":[{"href":"https:\/\/yogaismylife.vn\/en\/wp-json\/wp\/v2\/media?parent=80"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":80,"date":"2026-02-11T00:53:24","date_gmt":"2026-02-11T00:53:24","guid":{"rendered":"https:\/\/yogaismylife.vn\/en\/?page_id=80"},"modified":"2026-02-15T12:55:40","modified_gmt":"2026-02-15T12:55:40","slug":"yoga-research-library","status":"publish","type":"page","link":"https:\/\/yogaismylife.vn\/en\/yoga-research-library\/","title":{"rendered":"Yoga Research Library"},"content":{"rendered":"\r\n\r\n\r\n \r\n \r\n Yoga Research Library<\/title>\r\n <style>\r\n :root {\r\n --yml-slate-100: #f1f5f9; --yml-slate-200: #e2e8f0; --yml-slate-300: #cbd5e1; --yml-slate-500: #64748b;\r\n --yml-slate-700: #334155; --yml-slate-800: #1e293b; --yml-slate-900: #0f172a; --yml-teal-500: #14b8a6;\r\n --yml-teal-600: #0d9488; --yml-teal-700: #0f766e; --yml-white: #ffffff; --yml-red-500: #ef4444;\r\n }\r\n \r\n \/* GENERAL SETTINGS *\/\r\n body { background-color: var(--yml-slate-100); color: var(--yml-slate-800); margin: 0; line-height: 1.5; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; }\r\n .library-container { max-width: 1280px; margin: 0 auto; padding: 1rem; }\r\n .library-header { text-align: center; margin-bottom: 2rem; }\r\n .library-title { font-size: 2.25rem; font-weight: 700; color: var(--yml-slate-900); }\r\n .library-subtitle { color: var(--yml-slate-600); margin-top: 0.5rem; text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; }\r\n \r\n \/* CONTROLS (SEARCH ONLY) *\/\r\n .controls-container { max-width: 800px; margin: 0 auto 1.5rem auto; display: flex; justify-content: center; }\r\n .search-input { width: 100%; padding: 0.75rem; border: 1px solid var(--yml-slate-300); border-radius: 0.5rem; transition: all 0.2s; box-sizing: border-box; font-size: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }\r\n .search-input:focus { outline: none; border-color: var(--yml-teal-500); box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2); }\r\n \r\n .total-studies { font-size: 0.95rem; color: var(--yml-slate-700); margin: 10px 0 20px 0; font-weight: 500; text-align: center; }\r\n .tag-filters-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 2rem; }\r\n .research-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.5rem; padding-bottom: 2rem; }\r\n \r\n \/* STUDY CARD *\/\r\n .study-card { background-color: #ffffff; padding: 1.5rem; border-radius: 0.5rem; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); transition: all 0.2s; border: 1px solid var(--yml-slate-200); display: flex; flex-direction: column; }\r\n .study-card.open-modal:hover { cursor: pointer; transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-color: var(--yml-teal-500); }\r\n .study-card-title { font-size: 1.15rem; font-weight: 700; color: var(--yml-slate-900); margin: 0 0 0.5rem 0; line-height: 1.4; }\r\n .study-card-meta { font-size: 0.875rem; color: var(--yml-slate-500); margin-bottom: 1rem; }\r\n .study-card-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; }\r\n .tag-pill { border: 1px solid var(--yml-slate-200); font-size: 0.75rem; font-weight: 500; padding: 0.125rem 0.625rem; border-radius: 9999px; background-color: var(--yml-slate-50); color: var(--yml-slate-600); }\r\n .study-card-actions { margin-top: 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }\r\n .feedback-note { margin-top: 2rem; padding-top: 1rem; border-top: 1px dashed var(--yml-slate-300); display: flex; align-items: flex-start; gap: .75rem; font-size: .875rem; color: var(--yml-slate-500); font-style: italic; }\r\n \r\n \/* MODAL *\/\r\n body.yml-modal-open { overflow: hidden; }\r\n .yml-modal-container { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(15, 23, 42, 0.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); justify-content: center; align-items: center; }\r\n .yml-modal-container.visible { display: flex; animation: yml-fadeIn 0.2s ease-out; }\r\n .yml-modal-content { background: var(--yml-white); width: 95%; max-width: 1000px; height: 90vh; max-height: 800px; border-radius: 0.75rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.2); display: flex; flex-direction: column; animation: yml-scaleIn 0.2s ease-out; position: relative; overflow: hidden; }\r\n #yml-modal-close-btn { position: absolute; top: 12px; right: 12px; background: rgba(241, 245, 249, 0.8); border: none; font-size: 1.5rem; line-height: 1; color: var(--yml-slate-500); cursor: pointer; transition: all 0.2s; z-index: 20; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }\r\n #yml-modal-close-btn:hover { color: var(--yml-red-500); background: #fff; transform: rotate(90deg); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }\r\n #yml-modal-body { padding: 0; overflow: hidden; flex-grow: 1; height: 100%; }\r\n \r\n .modal-grid-layout { display: grid; grid-template-columns: 300px 1fr; height: 100%; }\r\n .modal-sidebar { border-right: 1px solid var(--yml-slate-200); display: flex; flex-direction: column; overflow: hidden; background-color: #f8fafc; }\r\n .modal-sidebar-header { padding: 1rem; border-bottom: 1px solid var(--yml-slate-200); background-color: var(--yml-white); }\r\n #modal-search-input { width: 100%; padding: 0.5rem; font-size: 0.875rem; border: 1px solid var(--yml-slate-300); border-radius: 0.375rem; box-sizing: border-box; }\r\n .modal-sidebar-list { overflow-y: auto; flex-grow: 1; }\r\n .sidebar-item { padding: 1rem; cursor: pointer; border-bottom: 1px solid var(--yml-slate-200); transition: all 0.2s; border-left: 3px solid transparent; }\r\n .sidebar-item:hover { background-color: var(--yml-white); }\r\n .sidebar-item.active { background-color: var(--yml-white); border-left-color: var(--yml-teal-500); box-shadow: 0 1px 3px rgba(0,0,0,0.05); }\r\n .sidebar-item-title { font-weight: 600; font-size: 0.9rem; color: var(--yml-slate-800); margin-bottom: 0.25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }\r\n .sidebar-item-meta { font-size: 0.75rem; color: var(--yml-slate-500); }\r\n \r\n .modal-main-content { display: flex; flex-direction: column; overflow: hidden; height: 100%; background-color: var(--yml-white); }\r\n .modal-details-header { padding: 2rem 3rem 1.5rem 3rem; border-bottom: 1px solid var(--yml-slate-200); flex-shrink: 0; background: #fff; }\r\n .modal-details-body { padding: 1.5rem 3rem 2.5rem 3rem; overflow-y: auto; flex-grow: 1; }\r\n \r\n \/* OTHER COMPONENTS *\/\r\n h1.research-title-en { font-size: 1.5rem; font-weight: 700; color: var(--yml-slate-900); margin: 0; line-height: 1.4; }\r\n .research-meta { font-size: 0.9rem; color: var(--yml-slate-600); margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; }\r\n h2.body-title { font-size: 1.1rem; font-weight: 600; color: var(--yml-teal-700); margin: 0 0 1rem 0; display: flex; align-items: center; gap: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }\r\n \r\n .summary-item { margin-bottom: 1.5rem; background: #f8fafc; padding: 1.25rem; border-radius: 0.5rem; border: 1px solid var(--yml-slate-200); }\r\n .summary-item:last-child { margin-bottom: 0; }\r\n .summary-item-title { font-weight: 700; color: var(--yml-slate-800); margin: 0 0 0.5rem 0; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.03em; }\r\n .summary-item p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--yml-slate-700); text-align: justify; }\r\n \r\n .button-group { margin-top: 2rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }\r\n .action-button { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.375rem; font-weight: 600; text-decoration: none; transition: all .2s ease-in-out; border: 1px solid transparent; cursor: pointer; font-size: 0.875rem; }\r\n .action-button.primary { background-color: var(--yml-teal-600); color: var(--yml-white); box-shadow: 0 2px 4px rgba(13, 148, 136, 0.2); }\r\n .action-button.primary:hover { background-color: var(--yml-teal-700); transform: translateY(-1px); }\r\n .action-button.secondary { background-color: var(--yml-white); color: var(--yml-slate-700); border-color: var(--yml-slate-300); }\r\n .action-button.secondary:hover { background-color: var(--yml-slate-50); border-color: var(--yml-slate-400); color: var(--yml-slate-900); }\r\n \r\n .filter-button { padding: 0.5rem 1rem; border-radius: 9999px; font-weight: 500; font-size: 0.875rem; cursor: pointer; transition: all 0.2s; border: 1px solid var(--yml-slate-300); background-color: var(--yml-white); color: var(--yml-slate-600); }\r\n .filter-button:hover { border-color: var(--yml-teal-500); color: var(--yml-teal-700); background-color: #f0fdfa; }\r\n .filter-button.active { background-color: var(--yml-teal-600); color: var(--yml-white); border-color: var(--yml-teal-600); box-shadow: 0 2px 4px rgba(13, 148, 136, 0.3); }\r\n .filter-button.hidden-tag { display: none; }\r\n .see-more-btn { background-color: transparent !important; color: var(--yml-teal-600) !important; border: 1px dashed var(--yml-teal-500) !important; font-weight: 600; }\r\n .see-more-btn:hover { background-color: rgba(20, 184, 166, 0.05) !important; }\r\n \r\n .hidden { display: none !important; }\r\n\r\n \/* RESPONSIVE *\/\r\n @media (min-width: 768px) {\r\n .library-container { padding: 2.5rem; }\r\n .research-grid { grid-template-columns: repeat(2, 1fr); }\r\n }\r\n @media (min-width: 1200px) { \r\n .research-grid { grid-template-columns: repeat(3, 1fr); } \r\n }\r\n @media (max-width: 768px) {\r\n .modal-grid-layout { grid-template-columns: 1fr; height: 100%; }\r\n .modal-sidebar { display: none; }\r\n .yml-modal-content { height: 100%; width: 100%; border-radius: 0; }\r\n .modal-main-content { overflow-y: auto; }\r\n h1.research-title-en { font-size: 1.25rem; }\r\n .modal-details-header { padding: 1.5rem; }\r\n .modal-details-body { padding: 1.5rem; }\r\n #yml-modal-close-btn { top: 12px; right: 12px; background: #f1f5f9; }\r\n }\r\n \r\n @keyframes yml-fadeIn{from{opacity:0} to{opacity:1}}\r\n @keyframes yml-scaleIn{from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)}}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"library-container\">\r\n <header class=\"library-header\">\r\n <h1 class=\"library-title\">Yoga Research Library<\/h1>\r\n <p class=\"library-subtitle\">Explore the international standard scientific database on Yoga \u2013 benefits and physiological effects verified by PubMed, PMC, and reputable journals.<\/p>\r\n <\/header>\r\n \r\n <div class=\"controls-container\">\r\n <input type=\"search\" id=\"search-input\" placeholder=\"Search for studies, topics, or keywords...\" class=\"search-input\">\r\n <\/div>\r\n \r\n <div id=\"total-studies\" class=\"total-studies\">Loading database...<\/div>\r\n \r\n <div id=\"filter-container\" class=\"tag-filters-container\">\r\n <button class=\"filter-button active\" data-tag=\"all\">All<\/button>\r\n <\/div>\r\n \r\n <main id=\"research-list\" class=\"research-grid\"><\/main>\r\n <\/div>\r\n\r\n <div id=\"yml-modal-container\" class=\"yml-modal-container\">\r\n <div class=\"yml-modal-content\">\r\n <button id=\"yml-modal-close-btn\" title=\"Close\">×<\/button>\r\n <div id=\"yml-modal-body\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n \"use strict\";\r\n\r\n \/\/ VARIABLES\r\n let libraryData = [];\r\n let currentContextStudies = [];\r\n const searchInput = document.getElementById('search-input');\r\n const researchListContainer = document.getElementById('research-list');\r\n const filterContainer = document.getElementById('filter-container');\r\n const modalContainer = document.getElementById('yml-modal-container');\r\n const modalBody = document.getElementById('yml-modal-body');\r\n const modalCloseBtn = document.getElementById('yml-modal-close-btn');\r\n const totalStudiesEl = document.getElementById('total-studies');\r\n\r\n \/\/ INITIALIZE LIBRARY\r\n async function initializeLibrary() {\r\n const studiesURL = 'https:\/\/yogaismylife.vn\/en\/wp-content\/uploads\/studies-data-en.json';\r\n \r\n try {\r\n \/\/ ONLY Fetch Studies\r\n const studiesRes = await fetch(`${studiesURL}?v=${new Date().getTime()}`);\r\n\r\n if (!studiesRes.ok) { throw new Error(`HTTP Error: ${studiesRes.status} when loading studies.`); }\r\n \r\n libraryData = await studiesRes.json();\r\n \r\n \/\/ Sort studies by ID descending (newest first)\r\n libraryData.sort((a, b) => b.id - a.id);\r\n \r\n \/\/ Initialize view\r\n updateDisplay(); \r\n populateTagFilters(libraryData);\r\n \r\n } catch (error) {\r\n console.error(\"Library Load Error:\", error);\r\n const mainContainer = document.querySelector('.library-container');\r\n if (mainContainer) { \r\n mainContainer.innerHTML = `<div style=\"text-align: center; color: var(--yml-red-500); padding: 3rem;\">\r\n <h3>Unable to load database<\/h3>\r\n <p>${error.message}<\/p>\r\n <p>Please ensure 'studies-data-en.json' is correctly uploaded to the \/en\/ folder.<\/p>\r\n <\/div>`; \r\n }\r\n }\r\n }\r\n \r\n \/\/ === RENDER UI FUNCTIONS ===\r\n\r\n function populateTagFilters(studies) {\r\n const tagGroups = {\r\n 'Mental Health': ['Mental Health', 'Anxiety', 'Depression', 'Stress', 'PTSD', 'Postpartum Depression', 'Mindfulness', 'Emotional Suppression', 'Eating Behavior', 'Mood', 'Well-being'],\r\n 'Neurology & Brain': ['Neuroscience', 'Brain', 'Memory', 'Cognitive Function', 'Alzheimer\\'s Disease', 'Dementia', 'Mild Cognitive Impairment', 'Parkinson\\'s Disease', 'Multiple Sclerosis', 'Neuroplasticity', 'Hippocampus', 'BDNF', 'Acquired Brain Injury', 'Neurodisability'],\r\n 'Musculoskeletal': ['Musculoskeletal', 'Chronic Pain', 'Low Back Pain', 'Neck Pain', 'Knee Osteoarthritis', 'Arthritis', 'Rheumatoid Arthritis', 'Osteoporosis', 'Fibromyalgia', 'Scoliosis', 'Kyphosis', 'Spine', 'Carpal Tunnel Syndrome', 'Shoulder Pain', 'Back Pain'],\r\n 'Cardiovascular': ['Cardiovascular', 'Heart Disease', 'Hypertension', 'Blood Pressure', 'Heart Rate Variability', 'Vascular Function', 'Stroke', 'Arrhythmia', 'Atrial Fibrillation', 'Heart Failure'],\r\n 'Respiratory': ['Respiratory System', 'Pulmonary Function', 'Asthma', 'COPD', 'Breathing Exercises', 'Pranayama', 'Lung Function'],\r\n 'Metabolic & Endocrine': ['Metabolic Syndrome', 'Diabetes', 'Type 2 Diabetes', 'Type 1 Diabetes', 'Obesity', 'Weight Loss', 'Body Composition', 'Glycemic Control', 'Insulin Resistance', 'Thyroid', 'Hypothyroidism', 'Cortisol'],\r\n 'Women\\'s Health': ['Women\\'s Health', 'Pregnancy', 'Prenatal Yoga', 'Postnatal', 'Menopause', 'PCOS', 'Breast Cancer', 'Dysmenorrhea', 'Sexual Function', 'Gynecological Cancer', 'Infertility'],\r\n 'Populations': ['Geriatrics', 'Pediatrics', 'Adolescents', 'Veterans', 'Caregivers', 'Office Workers', 'Athletes', 'Students', 'Disability', 'Military Health', 'Teachers', 'Men\\'s Health'],\r\n 'Research Types': ['Meta-Analysis', 'Systematic Review', 'Randomized Controlled Trial', 'Pilot Study', 'Review', 'Qualitative Research', 'Protocol']\r\n };\r\n\r\n const priorityTags = ['Quality of Life', 'Pain Management', 'Physical Fitness', 'Sleep Quality'];\r\n \r\n const allTags = new Set(studies.flatMap(study => study.tags || []));\r\n const finalDisplayTags = [];\r\n const groupedTags = new Set();\r\n\r\n Object.keys(tagGroups).forEach(groupName => {\r\n const childTags = tagGroups[groupName];\r\n if (childTags.some(child => Array.from(allTags).some(t => t.toLowerCase() === child.toLowerCase()))) {\r\n finalDisplayTags.push(groupName);\r\n childTags.forEach(child => groupedTags.add(child.toLowerCase()));\r\n }\r\n });\r\n\r\n priorityTags.forEach(pTag => {\r\n if (Array.from(allTags).some(t => t.toLowerCase() === pTag.toLowerCase()) && !groupedTags.has(pTag.toLowerCase())) {\r\n finalDisplayTags.push(pTag);\r\n }\r\n });\r\n\r\n const otherTags = Array.from(allTags)\r\n .filter(tag => !groupedTags.has(tag.toLowerCase()) && !priorityTags.some(pt => pt.toLowerCase() === tag.toLowerCase()))\r\n .sort();\r\n \r\n finalDisplayTags.push(...otherTags);\r\n\r\n \/\/ Keep \"All\" button, remove others\r\n while (filterContainer.children.length > 1) { filterContainer.removeChild(filterContainer.lastChild); }\r\n\r\n finalDisplayTags.forEach((displayTag, index) => {\r\n const button = document.createElement('button');\r\n button.className = 'filter-button';\r\n button.textContent = displayTag;\r\n \r\n if (tagGroups[displayTag]) {\r\n button.dataset.tag = tagGroups[displayTag].join(',');\r\n } else {\r\n button.dataset.tag = displayTag;\r\n }\r\n \r\n if (index >= 10) { button.classList.add('hidden-tag'); }\r\n filterContainer.appendChild(button);\r\n });\r\n\r\n if (finalDisplayTags.length > 10) {\r\n const seeMoreBtn = document.createElement('button');\r\n seeMoreBtn.textContent = 'See more...';\r\n seeMoreBtn.className = 'filter-button see-more-btn';\r\n seeMoreBtn.dataset.state = 'collapsed';\r\n filterContainer.appendChild(seeMoreBtn);\r\n \r\n seeMoreBtn.addEventListener('click', () => {\r\n const isCollapsed = seeMoreBtn.dataset.state === 'collapsed';\r\n const tagButtons = Array.from(filterContainer.children).filter(el => el.matches('.filter-button') && !el.matches('.see-more-btn') && el.dataset.tag !== 'all');\r\n \r\n if (isCollapsed) {\r\n tagButtons.forEach(btn => btn.classList.remove('hidden-tag'));\r\n seeMoreBtn.textContent = 'Show less';\r\n seeMoreBtn.dataset.state = 'expanded';\r\n } else {\r\n tagButtons.forEach((btn, index) => {\r\n if (index >= 10) { btn.classList.add('hidden-tag'); }\r\n });\r\n seeMoreBtn.textContent = 'See more...';\r\n seeMoreBtn.dataset.state = 'collapsed';\r\n }\r\n });\r\n }\r\n }\r\n\r\n function renderStudyList(studies) {\r\n currentContextStudies = studies;\r\n researchListContainer.innerHTML = '';\r\n \r\n if (!studies || studies.length === 0) {\r\n researchListContainer.innerHTML = `<p style=\"text-align: center; grid-column: 1 \/ -1; color: var(--yml-slate-500); padding: 2rem;\">No studies found matching your criteria.<\/p>`;\r\n return;\r\n }\r\n \r\n studies.forEach(study => {\r\n \/\/ Logic to prioritize English title\r\n const displayTitle = study.title_en || study.title_vi || 'Untitled Study';\r\n \r\n const tagsHTML = (study.tags || []).slice(0, 4).map(tag => `<span class=\"tag-pill\">${tag}<\/span>`).join('');\r\n const remainingTags = (study.tags || []).length > 4 ? `<span class=\"tag-pill\" title=\"${study.tags.slice(4).join(', ')}\">+${study.tags.length - 4}<\/span>` : '';\r\n \r\n const card = document.createElement('div');\r\n card.className = 'study-card open-modal';\r\n card.dataset.id = study.id;\r\n card.innerHTML = `\r\n <h2 class=\"study-card-title\">${displayTitle}<\/h2>\r\n <p class=\"study-card-meta\">${(study.authors || []).join(', ')} \u2022 ${study.year}<\/p>\r\n <div class=\"study-card-tags\">${tagsHTML}${remainingTags}<\/div>\r\n `;\r\n researchListContainer.appendChild(card);\r\n });\r\n }\r\n \r\n \/\/ === DISPLAY CONTROL FUNCTIONS ===\r\n function updateDisplay() {\r\n const searchTerm = searchInput.value.toLowerCase().trim();\r\n const activeBtn = filterContainer.querySelector('.filter-button.active');\r\n const activeTag = activeBtn ? activeBtn.dataset.tag : 'all';\r\n\r\n let filteredStudies = libraryData;\r\n \r\n \/\/ Filter by Tag\r\n if (activeTag !== 'all') {\r\n if (activeTag.includes(',')) {\r\n const groupTags = activeTag.split(',').map(t => t.trim().toLowerCase());\r\n filteredStudies = filteredStudies.filter(study => \r\n (study.tags || []).some(tag => groupTags.includes(tag.toLowerCase()))\r\n );\r\n } else {\r\n filteredStudies = filteredStudies.filter(study => \r\n (study.tags || []).some(t => t.toLowerCase() === activeTag.toLowerCase())\r\n );\r\n }\r\n }\r\n \r\n \/\/ Filter by Search\r\n if (searchTerm) {\r\n filteredStudies = filteredStudies.filter(s => \r\n (s.title_en && s.title_en.toLowerCase().includes(searchTerm)) || \r\n (s.title_vi && s.title_vi.toLowerCase().includes(searchTerm)) ||\r\n ((s.tags || []).some(t => t.toLowerCase().includes(searchTerm))) ||\r\n ((s.authors || []).some(a => a.toLowerCase().includes(searchTerm)))\r\n );\r\n }\r\n \r\n renderStudyList(filteredStudies);\r\n totalStudiesEl.textContent = `Total studies: ${filteredStudies.length}`;\r\n }\r\n\r\n \/\/ === MODAL HANDLING FUNCTIONS ===\r\n function buildModalContentHTML(studyId) {\r\n const study = libraryData.find(s => s.id == studyId);\r\n if (!study) return '';\r\n \r\n const sidebarItemsHTML = currentContextStudies.map(item => `\r\n <div class=\"sidebar-item ${item.id == studyId ? 'active' : ''}\" data-id=\"${item.id}\">\r\n <div class=\"sidebar-item-title\">${item.title_en || item.title_vi || 'Untitled'}<\/div>\r\n <div class=\"sidebar-item-meta\">${(item.authors || []).join(', ')}<\/div>\r\n <\/div>\r\n `).join('');\r\n \r\n return `\r\n <div class=\"modal-grid-layout\">\r\n <div class=\"modal-sidebar\">\r\n <div class=\"modal-sidebar-header\">\r\n <input type=\"search\" id=\"modal-search-input\" placeholder=\"Filter list...\">\r\n <\/div>\r\n <div class=\"modal-sidebar-list\">\r\n ${sidebarItemsHTML}\r\n <\/div>\r\n <\/div>\r\n <div class=\"modal-main-content\">\r\n ${buildResearchDetailsHTML(study)}\r\n <\/div>\r\n <\/div>`;\r\n }\r\n\r\n function buildResearchDetailsHTML(study) {\r\n if (!study) return `<div class=\"modal-details-body\"><p>Study not found.<\/p><\/div>`;\r\n \r\n const authorsHTML = (study.authors && Array.isArray(study.authors)) ? study.authors.join(', ') : \"Unknown Author\";\r\n \r\n const doiButton = study.doi ? `<a href=\"${study.doi}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"action-button primary\">Read Full Study (DOI)<\/a>` : '';\r\n const articleButton = (study.article && study.article !== '#' && study.article !== '') ? `<a href=\"${study.article}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"action-button secondary\">Practical Application<\/a>` : '';\r\n const topicButton = (study.topic_link && study.topic_link !== '#' && study.topic_link !== '') ? `<a href=\"${study.topic_link}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"action-button secondary\">In-depth Analysis<\/a>` : '';\r\n \r\n const buttonGroup = (doiButton || articleButton || topicButton) ? `<div class=\"button-group\">${doiButton}${topicButton}${articleButton}<\/div>` : '';\r\n const tagsHTML = (study.tags || []).map(tag => `<span class=\"tag-pill\">${tag}<\/span>`).join('');\r\n\r\n let summaryHTML = '';\r\n if (study.summary && typeof study.summary === 'object') {\r\n summaryHTML = `\r\n <div class=\"summary-item\">\r\n <h3 class=\"summary-item-title\">Methodology<\/h3>\r\n <p>${study.summary.method || 'No methodology details available.'}<\/p>\r\n <\/div>\r\n <div class=\"summary-item\">\r\n <h3 class=\"summary-item-title\">Key Results<\/h3>\r\n <p>${study.summary.result || 'No results details available.'}<\/p>\r\n <\/div>\r\n <div class=\"summary-item\">\r\n <h3 class=\"summary-item-title\">Clinical Application<\/h3>\r\n <p>${study.summary.application || 'No application details available.'}<\/p>\r\n <\/div>`;\r\n }\r\n\r\n const displayTitle = study.title_en || study.title_vi || 'Untitled Study';\r\n\r\n return `\r\n <div class=\"modal-details-header\">\r\n <h1 class=\"research-title-en\">${displayTitle}<\/h1>\r\n <div class=\"research-meta\">\r\n <span><strong>Authors:<\/strong> ${authorsHTML}<\/span>\r\n <span><strong>Year:<\/strong> ${study.year || 'N\/A'}<\/span>\r\n <\/div>\r\n <div style=\"margin-top: 1rem; display:flex; gap:0.5rem; flex-wrap:wrap;\">${tagsHTML}<\/div>\r\n <\/div>\r\n <div class=\"modal-details-body\">\r\n ${summaryHTML}\r\n ${buttonGroup}\r\n <div class=\"feedback-note\">\r\n <svg style=\"width: 1.25rem; height: 1.25rem; flex-shrink: 0;\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\" clip-rule=\"evenodd\" \/>\r\n <\/svg>\r\n <span>Data verified and compiled from scientific sources.<\/span>\r\n <\/div>\r\n <\/div>`;\r\n }\r\n \r\n function openModal(studyId) {\r\n modalBody.innerHTML = buildModalContentHTML(studyId);\r\n modalContainer.classList.add('visible');\r\n document.body.classList.add('yml-modal-open');\r\n \r\n const modalInput = document.getElementById('modal-search-input');\r\n if(modalInput){\r\n modalInput.addEventListener('input', (e) => {\r\n const term = e.target.value.toLowerCase();\r\n const items = document.querySelectorAll('.sidebar-item');\r\n items.forEach(item => {\r\n const text = item.innerText.toLowerCase();\r\n item.style.display = text.includes(term) ? 'block' : 'none';\r\n });\r\n });\r\n }\r\n }\r\n\r\n function closeModal() {\r\n modalContainer.classList.remove('visible');\r\n document.body.classList.remove('yml-modal-open');\r\n }\r\n\r\n \/\/ === EVENT LISTENERS ===\r\n searchInput.addEventListener('input', updateDisplay);\r\n \r\n filterContainer.addEventListener('click', (e) => { \r\n if (e.target.matches('.filter-button:not(.see-more-btn)')) { \r\n filterContainer.querySelector('.filter-button.active')?.classList.remove('active'); \r\n e.target.classList.add('active'); \r\n updateDisplay(); \r\n } \r\n });\r\n \r\n document.body.addEventListener('click', (e) => {\r\n const card = e.target.closest('.open-modal');\r\n if (card && !e.target.closest('a')) {\r\n const studyId = card.dataset.id;\r\n if (studyId) openModal(studyId);\r\n }\r\n });\r\n \r\n modalCloseBtn.addEventListener('click', closeModal);\r\n \r\n modalContainer.addEventListener('click', e => {\r\n if (e.target === modalContainer) closeModal();\r\n \r\n const sidebarItem = e.target.closest('.sidebar-item');\r\n if (sidebarItem) {\r\n const studyId = sidebarItem.dataset.id;\r\n const study = libraryData.find(s => s.id == studyId);\r\n if (study) {\r\n modalContainer.querySelector('.modal-main-content').innerHTML = buildResearchDetailsHTML(study);\r\n modalContainer.querySelectorAll('.sidebar-item').forEach(el => el.classList.remove('active'));\r\n sidebarItem.classList.add('active');\r\n }\r\n }\r\n });\r\n\r\n document.addEventListener('keydown', e => {\r\n if (e.key === 'Escape' && modalContainer.classList.contains('visible')) closeModal();\r\n });\r\n\r\n \/\/ Start App\r\n initializeLibrary();\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":362,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-80","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\n<title>Yoga Research Library | Evidence-Based Yoga Studies<\/title>\n<meta name=\"description\" content=\"A curated library of peer-reviewed yoga research covering biomechanics, EMG analysis, spinal health, hypertension, and evidence-based therapeutic yoga.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/yogaismylife.vn\/en\/yoga-research-library\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Yoga Research Library | Evidence-Based Yoga Studies\" \/>\n<meta property=\"og:description\" content=\"A curated library of peer-reviewed yoga research covering biomechanics, EMG analysis, spinal health, hypertension, and evidence-based therapeutic yoga.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/yogaismylife.vn\/en\/yoga-research-library\/\" \/>\n<meta property=\"og:site_name\" content=\"Yoga Is My Life | Evidence-Based Yoga & Anatomy\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/web.facebook.com\/YGisML\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-15T12:55:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/yogaismylife.vn\/en\/wp-content\/uploads\/2026\/02\/YIML-Yoga-Research-Library.avif\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"537\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/yoga-research-library\\\/\",\"url\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/yoga-research-library\\\/\",\"name\":\"Yoga Research Library | Evidence-Based Yoga Studies\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/yoga-research-library\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/yoga-research-library\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/YIML-Yoga-Research-Library.avif\",\"datePublished\":\"2026-02-11T00:53:24+00:00\",\"dateModified\":\"2026-02-15T12:55:40+00:00\",\"description\":\"A curated library of peer-reviewed yoga research covering biomechanics, EMG analysis, spinal health, hypertension, and evidence-based therapeutic yoga.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/yoga-research-library\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/yoga-research-library\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/yoga-research-library\\\/#primaryimage\",\"url\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/YIML-Yoga-Research-Library.avif\",\"contentUrl\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/YIML-Yoga-Research-Library.avif\",\"width\":800,\"height\":537,\"caption\":\"Yoga Research Library: evidence-based yoga database featuring systematic reviews, biomechanics, EMG studies & clinical guidelines.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/yoga-research-library\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home page\",\"item\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Yoga Research Library\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/\",\"name\":\"Yoga Is My Life | Evidence-Based Yoga & Anatomy\",\"description\":\"Professional Yoga Anatomy & Therapy - A Library of 1,800+ Research-Backed Guides.\",\"publisher\":{\"@id\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/#organization\",\"name\":\"Yoga Is My Life | Evidence-Based Yoga & Anatomy\",\"url\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/cropped-cropped-ll.avif\",\"contentUrl\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/cropped-cropped-ll.avif\",\"width\":511,\"height\":171,\"caption\":\"Yoga Is My Life | Evidence-Based Yoga & Anatomy\"},\"image\":{\"@id\":\"https:\\\/\\\/yogaismylife.vn\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/web.facebook.com\\\/YGisML\\\/\",\"https:\\\/\\\/www.pinterest.com\\\/YogaIsMyLifeVN\\\/\"]}]}<\/script>\n","yoast_head_json":{"title":"Yoga Research Library | Evidence-Based Yoga Studies","description":"A curated library of peer-reviewed yoga research covering biomechanics, EMG analysis, spinal health, hypertension, and evidence-based therapeutic yoga.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/yogaismylife.vn\/en\/yoga-research-library\/","og_locale":"en_US","og_type":"article","og_title":"Yoga Research Library | Evidence-Based Yoga Studies","og_description":"A curated library of peer-reviewed yoga research covering biomechanics, EMG analysis, spinal health, hypertension, and evidence-based therapeutic yoga.","og_url":"https:\/\/yogaismylife.vn\/en\/yoga-research-library\/","og_site_name":"Yoga Is My Life | Evidence-Based Yoga & Anatomy","article_publisher":"https:\/\/web.facebook.com\/YGisML\/","article_modified_time":"2026-02-15T12:55:40+00:00","og_image":[{"width":800,"height":537,"url":"https:\/\/yogaismylife.vn\/en\/wp-content\/uploads\/2026\/02\/YIML-Yoga-Research-Library.avif","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/yogaismylife.vn\/en\/yoga-research-library\/","url":"https:\/\/yogaismylife.vn\/en\/yoga-research-library\/","name":"Yoga Research Library | Evidence-Based Yoga Studies","isPartOf":{"@id":"https:\/\/yogaismylife.vn\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/yogaismylife.vn\/en\/yoga-research-library\/#primaryimage"},"image":{"@id":"https:\/\/yogaismylife.vn\/en\/yoga-research-library\/#primaryimage"},"thumbnailUrl":"https:\/\/yogaismylife.vn\/en\/wp-content\/uploads\/2026\/02\/YIML-Yoga-Research-Library.avif","datePublished":"2026-02-11T00:53:24+00:00","dateModified":"2026-02-15T12:55:40+00:00","description":"A curated library of peer-reviewed yoga research covering biomechanics, EMG analysis, spinal health, hypertension, and evidence-based therapeutic yoga.","breadcrumb":{"@id":"https:\/\/yogaismylife.vn\/en\/yoga-research-library\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/yogaismylife.vn\/en\/yoga-research-library\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/yogaismylife.vn\/en\/yoga-research-library\/#primaryimage","url":"https:\/\/yogaismylife.vn\/en\/wp-content\/uploads\/2026\/02\/YIML-Yoga-Research-Library.avif","contentUrl":"https:\/\/yogaismylife.vn\/en\/wp-content\/uploads\/2026\/02\/YIML-Yoga-Research-Library.avif","width":800,"height":537,"caption":"Yoga Research Library: evidence-based yoga database featuring systematic reviews, biomechanics, EMG studies & clinical guidelines."},{"@type":"BreadcrumbList","@id":"https:\/\/yogaismylife.vn\/en\/yoga-research-library\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home page","item":"https:\/\/yogaismylife.vn\/en\/"},{"@type":"ListItem","position":2,"name":"Yoga Research Library"}]},{"@type":"WebSite","@id":"https:\/\/yogaismylife.vn\/en\/#website","url":"https:\/\/yogaismylife.vn\/en\/","name":"Yoga Is My Life | Evidence-Based Yoga & Anatomy","description":"Professional Yoga Anatomy & Therapy - A Library of 1,800+ Research-Backed Guides.","publisher":{"@id":"https:\/\/yogaismylife.vn\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/yogaismylife.vn\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/yogaismylife.vn\/en\/#organization","name":"Yoga Is My Life | Evidence-Based Yoga & Anatomy","url":"https:\/\/yogaismylife.vn\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/yogaismylife.vn\/en\/#\/schema\/logo\/image\/","url":"https:\/\/yogaismylife.vn\/en\/wp-content\/uploads\/2026\/02\/cropped-cropped-ll.avif","contentUrl":"https:\/\/yogaismylife.vn\/en\/wp-content\/uploads\/2026\/02\/cropped-cropped-ll.avif","width":511,"height":171,"caption":"Yoga Is My Life | Evidence-Based Yoga & Anatomy"},"image":{"@id":"https:\/\/yogaismylife.vn\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/web.facebook.com\/YGisML\/","https:\/\/www.pinterest.com\/YogaIsMyLifeVN\/"]}]}},"_links":{"self":[{"href":"https:\/\/yogaismylife.vn\/en\/wp-json\/wp\/v2\/pages\/80","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yogaismylife.vn\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yogaismylife.vn\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yogaismylife.vn\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yogaismylife.vn\/en\/wp-json\/wp\/v2\/comments?post=80"}],"version-history":[{"count":3,"href":"https:\/\/yogaismylife.vn\/en\/wp-json\/wp\/v2\/pages\/80\/revisions"}],"predecessor-version":[{"id":363,"href":"https:\/\/yogaismylife.vn\/en\/wp-json\/wp\/v2\/pages\/80\/revisions\/363"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/yogaismylife.vn\/en\/wp-json\/wp\/v2\/media\/362"}],"wp:attachment":[{"href":"https:\/\/yogaismylife.vn\/en\/wp-json\/wp\/v2\/media?parent=80"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}