/* ==========================================================================
   SMARTCOM - TRANG TIN TỨC & SIDEBAR BÀI VIẾT
   ========================================================================== */

.blog-wrapper {
    --sc-blue: var(--smartcom-primary, #0b5ed7);
    --sc-blue-dark: var(--smartcom-primary-dark, #082c63);
    --sc-blue-soft: var(--smartcom-primary-soft, #e8f0fd);
    --sc-ink: var(--smartcom-ink, #0f172a);
    --sc-muted: var(--smartcom-muted, #64748b);
    --sc-line: #e6ebf2;
    background: #f6f8fc;
    padding-bottom: 60px;
}

/* --- 1. HERO --- */
.sc-blog-hero {
    position: relative;
    overflow: hidden;
    padding: 56px 0 44px;
    color: #fff;
    background:
        radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.16), transparent 40%),
        linear-gradient(120deg, var(--smartcom-primary-dark, #082c63) 0%, var(--smartcom-primary, #0b5ed7) 100%);
}
.sc-blog-hero__pattern {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 36px 36px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 70%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 70%);
    pointer-events: none;
}
.sc-blog-hero__inner { position: relative; z-index: 1; }

.sc-blog-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.7);
}
.sc-blog-breadcrumb a { color: rgba(255, 255, 255, 0.85); }
.sc-blog-breadcrumb a:hover { color: #fff; }
.sc-blog-breadcrumb .sep { opacity: 0.5; }
.sc-blog-breadcrumb .current { color: #fff; font-weight: 600; }

.sc-blog-hero__eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    margin-bottom: 14px;
}
.sc-blog-hero .sc-blog-hero__title {
    color: #fff;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 12px;
    letter-spacing: -0.5px;
}
.sc-blog-hero__desc {
    max-width: 640px;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
}

.sc-blog-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}
.sc-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.sc-chip:hover { background: rgba(255, 255, 255, 0.2); color: #fff; transform: translateY(-1px); }
.sc-chip.is-active { background: #fff; color: var(--smartcom-primary, #0b5ed7); border-color: #fff; }
.sc-chip__count {
    font-size: 11px;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    text-align: center;
    background: rgba(255, 255, 255, 0.2);
}
.sc-chip.is-active .sc-chip__count { background: var(--smartcom-primary-soft, #e8f0fd); }

/* --- 2. LAYOUT --- */
.sangoys-blog-listing .blog-wrapper,
.single-post .blog-wrapper { padding-top: 40px; }
.blog-wrapper .row-divided > .col + .col:not(.large-12) { border-left: 0 !important; }

/* Lưới bài viết: 2 cột cạnh sidebar, bài đầu tiên nổi bật */
.blog-wrapper #post-list .sangoys-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.blog-wrapper #post-list .sangoys-article-card-wrap { min-width: 0; }
.sangoys-blog-listing:not(.paged) #post-list .sangoys-article-card-wrap:first-child { grid-column: 1 / -1; }
@media (min-width: 850px) {
    .sangoys-blog-listing:not(.paged) #post-list .sangoys-article-card-wrap:first-child .sangoys-article-link { flex-direction: row; }
    .sangoys-blog-listing:not(.paged) #post-list .sangoys-article-card-wrap:first-child .sangoys-article-image { width: 55%; flex: 0 0 55%; padding-top: 0; min-height: 320px; }
    .sangoys-blog-listing:not(.paged) #post-list .sangoys-article-card-wrap:first-child .sangoys-article-content { padding: 32px; justify-content: center; }
    .sangoys-blog-listing:not(.paged) #post-list .sangoys-article-card-wrap:first-child .sangoys-article-title { font-size: 1.6rem; min-height: 0; -webkit-line-clamp: 3; }
}
.blog-wrapper .sangoys-article-card { border-color: var(--sc-line); }
.blog-wrapper .sangoys-article-cat {
    align-self: flex-start;
    font-size: 11px;
    letter-spacing: 0.8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--sc-blue-soft);
}
.blog-wrapper .sangoys-article-title { color: var(--sc-ink); }
.blog-wrapper .sangoys-article-excerpt { color: var(--sc-muted); }
.blog-wrapper .sangoys-article-author { font-style: normal; color: var(--sc-muted); }
.blog-wrapper .sangoys-article-readmore { color: var(--sc-blue); }

@media (max-width: 549px) {
    .blog-wrapper #post-list .sangoys-blog-grid { grid-template-columns: minmax(0, 1fr); }
    .sc-blog-hero { padding: 40px 0 32px; }
    .sc-blog-hero .sc-blog-hero__title { font-size: 28px; }
    .sc-blog-hero__desc { font-size: 15px; }
    .sc-blog-chips { flex-wrap: nowrap; overflow-x: auto; margin-right: -15px; padding-bottom: 4px; scrollbar-width: none; }
    .sc-blog-chips::-webkit-scrollbar { display: none; }
    .sc-chip { flex: 0 0 auto; }
}

/* Phân trang */
.blog-wrapper .nav-pagination { margin-top: 40px; gap: 8px; }
.blog-wrapper .nav-pagination > li > a,
.blog-wrapper .nav-pagination > li > span {
    min-width: 42px;
    height: 42px;
    line-height: 40px;
    border-radius: 12px;
    border: 1px solid var(--sc-line);
    background: #fff;
    color: var(--sc-ink);
    font-weight: 600;
    transition: all 0.25s ease;
}
.blog-wrapper .nav-pagination > li > a:hover { border-color: var(--sc-blue); color: var(--sc-blue); }
.blog-wrapper .nav-pagination > li > .current {
    background: var(--sc-blue);
    border-color: var(--sc-blue);
    color: #fff;
    box-shadow: 0 6px 16px rgba(11, 94, 215, 0.3);
}

/* --- 3. EMPTY STATE --- */
.sc-empty {
    background: #fff;
    border: 1px solid var(--sc-line);
    border-radius: 20px;
    padding: 56px 32px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}
.sc-empty__icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 22px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sc-blue);
    background: var(--sc-blue-soft);
}
.sc-empty__icon svg { width: 40px; height: 40px; }
.blog-wrapper .sc-empty__title { font-size: 24px; font-weight: 800; color: var(--sc-ink); margin: 0 0 10px; }
.sc-empty__text { max-width: 520px; margin: 0 auto 28px; color: var(--sc-muted); line-height: 1.7; }
.sc-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sc-empty__btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 22px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--sc-ink);
    background: #fff;
    border: 1px solid var(--sc-line);
    transition: all 0.25s ease;
}
.sc-empty__btn:hover { border-color: var(--sc-blue); color: var(--sc-blue); transform: translateY(-2px); }
.sc-empty__btn.is-primary { background: var(--sc-blue); border-color: var(--sc-blue); color: #fff; box-shadow: 0 8px 20px rgba(11, 94, 215, 0.28); }
.sc-empty__btn.is-primary:hover { background: var(--sc-blue-dark); color: #fff; }

/* --- 4. SIDEBAR --- */
@media (min-width: 850px) {
    .blog-wrapper .post-sidebar #secondary { position: sticky; top: 100px; }
}
.blog-wrapper #secondary .widget {
    background: #fff;
    border: 1px solid var(--sc-line);
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}
.blog-wrapper #secondary .widget-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--sc-ink);
}
.blog-wrapper #secondary .widget-title::before {
    content: '';
    width: 4px;
    height: 18px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--sc-blue), var(--smartcom-secondary, #d71920));
}
.blog-wrapper #secondary .is-divider { display: none; }
.blog-wrapper #secondary .widget ul { margin: 0; }
.blog-wrapper #secondary .widget li { margin: 0; border: 0; }

/* Ô tìm kiếm */
.sc-search { position: relative; margin: 0; }
.blog-wrapper .sc-search input[type="search"] {
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 0 52px 0 16px;
    border: 1px solid var(--sc-line);
    border-radius: 12px;
    background: #f6f8fc;
    box-shadow: none;
    font-size: 14px;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.blog-wrapper .sc-search input[type="search"]:focus {
    background: #fff;
    border-color: var(--sc-blue);
    box-shadow: 0 0 0 4px rgba(11, 94, 215, 0.12);
}
.sc-search button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 36px;
    height: 36px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: var(--smartcom-primary, #0b5ed7);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}
.sc-search button:hover { background: var(--smartcom-primary-dark, #082c63); }
.sc-search button svg { width: 17px; height: 17px; }

/* Danh mục */
.blog-wrapper .widget_categories li a,
.blog-wrapper .widget_archive li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    margin: 2px -12px;
    border-radius: 10px;
    color: var(--sc-ink);
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease, padding 0.2s ease;
}
.blog-wrapper .widget_categories li a:hover,
.blog-wrapper .widget_categories li.current-cat > a {
    background: var(--sc-blue-soft);
    color: var(--sc-blue);
    padding-left: 16px;
}
.sc-count {
    font-size: 12px;
    font-weight: 700;
    min-width: 26px;
    padding: 2px 8px;
    border-radius: 999px;
    text-align: center;
    color: var(--sc-muted);
    background: #f1f4f9;
}
.widget_categories li a:hover .sc-count,
.widget_categories li.current-cat > a .sc-count { background: var(--sc-blue); color: #fff; }

/* Bài viết gần đây (Flatsome) */
.blog-wrapper .recent-blog-posts-li + .recent-blog-posts-li { border-top: 1px dashed var(--sc-line); }
.blog-wrapper .recent-blog-posts { padding: 12px 0; }
.blog-wrapper .recent-blog-posts .badge { width: 64px; height: 64px; }
.blog-wrapper .recent-blog-posts .badge-inner {
    border-radius: 12px !important;
    background-color: var(--sc-blue-soft);
    color: var(--sc-blue);
    border: 0;
}
.blog-wrapper .recent-blog-posts .badge-inner,
.blog-wrapper .recent-blog-posts .badge-inner span { color: var(--sc-blue) !important; font-weight: 800; }
.blog-wrapper .recent-blog-posts .badge-inner[style*="background-image"] span { color: #fff !important; }
.blog-wrapper .recent-blog-posts a {
    color: var(--sc-ink);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-wrapper .recent-blog-posts a:hover { color: var(--sc-blue); }

/* Tag cloud */
.blog-wrapper .tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-wrapper .tagcloud a {
    margin: 0;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--sc-line);
    background: #f6f8fc;
    color: var(--sc-ink);
    font-size: 13px !important;
    opacity: 1;
    transition: all 0.2s ease;
}
.blog-wrapper .tagcloud a:hover { background: var(--sc-blue); border-color: var(--sc-blue); color: #fff; }

/* Sản phẩm (WooCommerce) */
.blog-wrapper .product_list_widget li { padding: 0; }
.blog-wrapper .product_list_widget li + li { border-top: 1px dashed var(--sc-line); }
.blog-wrapper .product_list_widget li a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    color: var(--sc-ink);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
}
.blog-wrapper .product_list_widget li img {
    position: static;
    float: none;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    margin: 0;
    padding: 6px;
    object-fit: contain;
    border-radius: 12px;
    background: #f6f8fc;
    border: 1px solid var(--sc-line);
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.blog-wrapper .product_list_widget li a:hover { color: var(--sc-blue); }
.blog-wrapper .product_list_widget li a:hover img { transform: scale(1.04); border-color: var(--sc-blue); }
.blog-wrapper .product_list_widget .product-title { flex: 1; }

/* Bình luận gần đây */
.blog-wrapper .widget_recent_comments li { padding: 10px 0; font-size: 14px; color: var(--sc-muted); }
.blog-wrapper .widget_recent_comments li + li { border-top: 1px dashed var(--sc-line); }
.blog-wrapper .widget_recent_comments a { color: var(--sc-ink); font-weight: 600; }

/* CTA liên hệ */
.blog-wrapper #secondary .sc-widget-cta {
    position: relative;
    overflow: hidden;
    border: 0;
    color: #fff;
    padding: 26px 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.18), transparent 45%),
        linear-gradient(135deg, var(--smartcom-primary, #0b5ed7), var(--smartcom-primary-dark, #082c63));
    box-shadow: 0 14px 30px rgba(11, 94, 215, 0.28);
}
.sc-cta__icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.16);
    margin-bottom: 16px;
}
.sc-cta__icon svg { width: 22px; height: 22px; }
.blog-wrapper .sc-cta__title { color: #fff; font-size: 19px; font-weight: 800; margin: 0 0 8px; }
.sc-cta__text { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); margin-bottom: 18px; }
.sc-cta__phone {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 16px;
}
.sc-cta__phone:hover { color: #fff; opacity: 0.9; }
.sc-cta__phone svg { width: 20px; height: 20px; }
.sc-cta__btn {
    display: block;
    text-align: center;
    padding: 12px;
    border-radius: 12px;
    font-weight: 700;
    color: var(--smartcom-primary, #0b5ed7);
    background: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sc-cta__btn:hover { color: var(--smartcom-primary-dark, #082c63); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18); }