/* Odito Blog */ section.page-odito-blog, section.page-odito-blog-detail { background: #eef2f6 !important; } section.page-odito-blog .odito-detail-title-bg h5, section.page-odito-blog-detail .odito-detail-title-bg h5 { padding: 48px 0 !important; font-size: 42px !important; font-weight: 500 !important; color: #ffffff !important; margin: 0 !important; } section.page-odito-blog .blog-layout { padding: 40px 15px 72px; } /* Sidebar */ section.page-odito-blog .blog-sidebar-panel { background: #ffffff; border-radius: 14px; box-shadow: 0 14px 36px rgba(19, 60, 100, 0.1); padding: 0; position: sticky; top: 24px; overflow: hidden; border: 1px solid #e8eef4; } section.page-odito-blog .blog-sidebar-search-wrap { padding: 22px 20px 20px; border-bottom: 1px solid #edf2f7; } section.page-odito-blog .blog-sidebar-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; margin-bottom: 10px; } section.page-odito-blog .blog-search { position: relative; margin: 0; } section.page-odito-blog .blog-search input[type="text"] { width: 100% !important; height: 46px !important; border: 1px solid #d5dee8 !important; border-radius: 10px !important; padding: 0 48px 0 16px !important; font-size: 15px !important; color: #334155 !important; background: #f8fafc !important; box-sizing: border-box !important; box-shadow: none !important; margin: 0 !important; } section.page-odito-blog .blog-search input[type="text"]:focus { outline: none !important; border-color: #139cee !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(19, 156, 238, 0.16) !important; } section.page-odito-blog .blog-search-btn { position: absolute; right: 5px; top: 5px; width: 36px; height: 36px; border: none !important; border-radius: 8px !important; background: #139cee !important; color: #ffffff !important; cursor: pointer; padding: 0 !important; margin: 0 !important; box-shadow: none !important; outline: none !important; display: flex; align-items: center; justify-content: center; } section.page-odito-blog .blog-search-btn:hover { background: #1e5cba !important; } section.page-odito-blog .blog-search-btn svg { width: 18px; height: 18px; fill: currentColor; } section.page-odito-blog .blog-categories-title { display: block; width: 100%; background: linear-gradient(90deg, #c8edf9 0%, #dff3fc 100%); color: #1e5cba; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; padding: 12px 20px; margin: 0; box-sizing: border-box; } section.page-odito-blog ul.blog-categories { list-style: none !important; margin: 0 !important; padding: 8px 14px 12px !important; display: block !important; } section.page-odito-blog ul.blog-categories > li { display: block !important; width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; } section.page-odito-blog ul.blog-categories > li > a { display: block !important; width: 100% !important; padding: 11px 12px !important; color: #475569 !important; font-size: 15px !important; text-decoration: none !important; border-radius: 8px; margin-bottom: 2px; box-sizing: border-box; } section.page-odito-blog ul.blog-categories > li > a:hover { background: #f0f9ff; color: #139cee !important; } section.page-odito-blog ul.blog-categories > li.active > a { background: #e8f6fd; color: #139cee !important; font-weight: 600; border-left: 3px solid #139cee; padding-left: 9px !important; } section.page-odito-blog .blog-filter-info { background: #fff; border-radius: 10px; padding: 14px 20px; margin-bottom: 24px; color: #64748b; font-size: 14px; box-shadow: 0 6px 18px rgba(19, 60, 100, 0.06); } section.page-odito-blog .blog-filter-info a { color: #139cee !important; font-weight: 600; } /* Cards */ section.page-odito-blog .blog-card { background: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 28px rgba(19, 60, 100, 0.1); height: 100%; display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease; border: 1px solid #e8eef4; margin-bottom: 28px; } section.page-odito-blog .blog-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(19, 60, 100, 0.15); } section.page-odito-blog .blog-card-cover { display: block; position: relative; height: 150px; background: #e8eef4; text-decoration: none !important; overflow: hidden; } section.page-odito-blog .blog-card-cover-img { width: 100%; height: 150px; object-fit: cover; display: block; } section.page-odito-blog .blog-card-tag { position: absolute; left: 12px; bottom: 12px; z-index: 2; background: #ffd166; color: #1a1a1a; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 20px; max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } section.page-odito-blog .blog-card-body { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; } section.page-odito-blog .blog-card-title { margin: 0 0 10px !important; font-size: 17px !important; line-height: 1.45 !important; font-weight: 700 !important; } section.page-odito-blog .blog-card-title a { color: #1e293b !important; text-decoration: none !important; } section.page-odito-blog .blog-card-title a:hover { color: #139cee !important; } section.page-odito-blog .blog-card-excerpt { color: #64748b; font-size: 14px; line-height: 1.65; margin: 0 0 16px; flex: 1; } section.page-odito-blog .blog-card-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #f1f5f9; padding-top: 14px; margin-top: auto; } section.page-odito-blog .blog-card-meta { color: #94a3b8; font-size: 13px; } section.page-odito-blog .blog-card-readmore { color: #139cee !important; font-weight: 700; font-size: 14px; text-decoration: none !important; } section.page-odito-blog .blog-card-readmore:hover { color: #1e5cba !important; } section.page-odito-blog .blog-empty { background: #fff; border: 1px dashed #cbd5e1; border-radius: 12px; padding: 60px 24px; text-align: center; color: #64748b; } /* Detail */ section.page-odito-blog-detail .blog-article-wrap { padding: 40px 15px 72px; } section.page-odito-blog-detail .blog-article-panel { background: #ffffff; border-radius: 12px; box-shadow: 0 12px 32px rgba(19, 60, 100, 0.1); padding: 40px 48px; border: 1px solid #e8eef4; } section.page-odito-blog-detail .blog-article-category { display: inline-block; background: #ffd166; color: #1a1a1a; font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 20px; margin-bottom: 16px; } section.page-odito-blog-detail .blog-article-meta { color: #94a3b8; font-size: 14px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid #edf2f7; } section.page-odito-blog-detail .blog-article-content { font-size: 17px; line-height: 1.85; color: #334155; } section.page-odito-blog-detail .blog-article-content h2, section.page-odito-blog-detail .blog-article-content h3 { color: #1e293b; margin-top: 32px; margin-bottom: 14px; font-weight: 700; } section.page-odito-blog-detail .blog-article-content p { margin-bottom: 18px; } section.page-odito-blog-detail .blog-back-link { display: inline-block; margin-top: 28px; color: #139cee !important; font-weight: 700; text-decoration: none !important; } @media (max-width: 991px) { section.page-odito-blog .blog-sidebar-panel { position: static; margin-bottom: 28px; } section.page-odito-blog-detail .blog-article-panel { padding: 28px 22px; } }