/* =====================================================================
   Lacco news / activity theme
   One palette for /news, /tin-tuc and both detail pages.
   Scoped to the four page wrappers so no other page changes.
   Loaded after lacco.css (via @push('styles') in the four views).
   ===================================================================== */

.news-index-page,
.activity-index-page,
.news-detail-page {
    --lc-primary: #293e9c;        /* brand navy: buttons, links, active */
    --lc-primary-hover: #1f3280;
    --lc-primary-soft: #eef1fa;   /* tinted backgrounds, chips */
    --lc-accent: #1677c9;         /* small accents only: icons, underlines */
    --lc-ink: #1a1f3a;            /* titles */
    --lc-text: #3e4558;           /* body copy */
    --lc-muted: #6b7285;          /* meta, counts, hints */
    --lc-line: #e4e7ef;           /* borders, dividers */
    --lc-surface: #f5f7fa;        /* page background */
    --lc-card: #ffffff;
    --lc-radius: 10px;

    background-color: var(--lc-surface);
    color: var(--lc-text);
}

/* ---------- Cards (list pages + detail main box) ---------- */
.news-index-page .news-block-four .inner-box,
.news-detail-page .news-block-four .inner-box,
.activity-index-page .news-block-one .inner-box {
    background: var(--lc-card);
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-radius);
    box-shadow: none;
}

/* Category label (all cards) */
.news-index-page .category,
.activity-index-page .category,
.news-detail-page .category {
    color: var(--lc-muted) !important;
    font-size: 14px;
}
.news-index-page .category i,
.activity-index-page .category i,
.news-detail-page .category i {
    color: var(--lc-accent) !important;
}

/* Titles */
.news-index-page h3 a,
.activity-index-page h3 a,
.activity-index-page a.text-2,
.news-detail-page h1,
.news-detail-page h2,
.news-detail-page h3,
.news-detail-page .lower-content h3 a {
    color: var(--lc-ink) !important;
}
.news-index-page h3 a:hover,
.activity-index-page h3 a:hover,
.activity-index-page a.text-2:hover,
.news-detail-page .lower-content h3 a:hover {
    color: var(--lc-primary) !important;
}

/* Excerpts / body text */
.news-index-page .text,
.news-index-page .news-card__excerpt,
.activity-index-page .lower-content .text {
    color: var(--lc-text) !important;
}

/* ---------- Buttons: one style everywhere ---------- */
.news-index-page .theme-btn.btn-style-one,
.news-detail-page .theme-btn.btn-style-one,
.activity-index-page .theme-btn.btn-style-one {
    background: var(--lc-primary) !important;
    border-color: var(--lc-primary) !important;
    color: #fff !important;
    border-radius: 6px;
}
.news-index-page .theme-btn.btn-style-one *,
.news-detail-page .theme-btn.btn-style-one *,
.activity-index-page .theme-btn.btn-style-one * {
    color: #fff !important;   /* inner <span>/<i> must not inherit card meta colours */
}
.news-index-page .theme-btn.btn-style-one:hover,
.news-detail-page .theme-btn.btn-style-one:hover,
.activity-index-page .theme-btn.btn-style-one:hover {
    background: var(--lc-primary-hover) !important;
    border-color: var(--lc-primary-hover) !important;
}
.news-index-page .theme-btn.btn-style-one:before,
.news-detail-page .theme-btn.btn-style-one:before,
.activity-index-page .theme-btn.btn-style-one:before {
    background: var(--lc-primary-hover) !important;
}

/* "Xem thêm" text links (activity cards) */
.activity-index-page .readmore-link,
.news-detail-page .readmore-link {
    color: var(--lc-primary) !important;
}
.activity-index-page .readmore-link i {
    color: var(--lc-accent) !important;
}

/* Share label + icon on list cards */
.news-index-page .news-card__actions,
.news-index-page .news-card__actions span,
.news-index-page .hint {
    color: var(--lc-muted) !important;
}
.news-index-page .news-card__actions .icon,
.news-index-page .post-share-btn .icon {
    background: var(--lc-primary-soft) !important;
    color: var(--lc-primary) !important;
}

/* ---------- Section headings ("Tin tức mới nhất", "Tin tức") ---------- */
.activity-index-page .sec-title .sub-title {
    color: var(--lc-primary) !important;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.activity-index-page .sec-title .sub-title:before,
.activity-index-page .sec-title .sub-title:after {
    color: var(--lc-accent) !important;
    border-color: var(--lc-accent) !important;
    background-color: transparent;
}

/* ---------- Sidebar widgets ---------- */
.news-index-page .sidebar .widget,
.activity-index-page .sidebar .widget,
.news-detail-page .sidebar .widget {
    background: var(--lc-card);
    border: 1px solid var(--lc-line) !important;
    border-radius: var(--lc-radius);
    box-shadow: none;
}
.news-index-page .widget_title,
.activity-index-page .widget_title,
.news-detail-page .widget_title {
    color: var(--lc-ink) !important;
    border-bottom: 1px solid var(--lc-line) !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}
.news-index-page .widget_title:before,
.activity-index-page .widget_title:before,
.news-detail-page .widget_title:before {
    background: var(--lc-primary) !important;
    border-color: var(--lc-primary) !important;
}

/* Category list */
.news-index-page .widget_categories ul li a,
.activity-index-page .widget_categories ul li a,
.news-detail-page .widget_categories ul li a,
.news-detail-page .category-list .category-item,
.news-detail-page .category-list a {
    color: var(--lc-text) !important;
    background: var(--lc-surface) !important;
    border-color: var(--lc-line) !important;
}
.news-index-page .widget_categories ul li a:hover,
.activity-index-page .widget_categories ul li a:hover,
.news-detail-page .widget_categories ul li a:hover,
.news-detail-page .category-list .category-item:hover {
    color: var(--lc-primary) !important;
    background: var(--lc-primary-soft) !important;
}
.news-detail-page .category-list .category-item.active,
.news-detail-page .category-list .category-item.active * {
    background: var(--lc-primary) !important;
    color: #fff !important;
}
.news-index-page .widget_categories span,
.activity-index-page .widget_categories span,
.news-detail-page .widget_categories span {
    color: var(--lc-muted) !important;
}
.news-index-page .widget_categories i,
.activity-index-page .widget_categories i,
.news-detail-page .widget_categories i {
    color: var(--lc-accent) !important;
}
/* Category rows: one full-width row each -> [name ............ count  >] */
.news-index-page .widget_categories ul li,
.activity-index-page .widget_categories ul li,
.news-detail-page .widget_categories ul li {
    margin: 0 0 8px !important;
    padding: 0 !important;
}
.news-index-page .widget_categories ul li:before,
.activity-index-page .widget_categories ul li:before,
.news-detail-page .widget_categories ul li:before {
    display: none !important;   /* template's floating arrow box */
}
.news-index-page .widget_categories ul li a,
.activity-index-page .widget_categories ul li a,
.news-detail-page .widget_categories ul li a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px !important;
    border: 1px solid var(--lc-line) !important;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.4;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.news-index-page .widget_categories ul li a span,
.activity-index-page .widget_categories ul li a span,
.news-detail-page .widget_categories ul li a span {
    position: static !important;
    order: 2;
    margin-left: auto;
    font-size: 14px;
    line-height: 1;
    opacity: 1 !important;      /* template hid the count until hover */
    transform: none !important;
}
.news-index-page .widget_categories ul li a i,
.activity-index-page .widget_categories ul li a i,
.news-detail-page .widget_categories ul li a i {
    order: 3;
    margin: 0 !important;
    font-size: 11px;
    line-height: 1;
    opacity: 1 !important;      /* template hid the arrow until hover */
    position: static !important;
    transition: transform .2s ease;
}
.news-index-page .widget_categories ul li a:hover,
.activity-index-page .widget_categories ul li a:hover,
.news-detail-page .widget_categories ul li a:hover {
    border-color: var(--lc-primary-soft) !important;
}
.news-index-page .widget_categories ul li a:hover i,
.activity-index-page .widget_categories ul li a:hover i,
.news-detail-page .widget_categories ul li a:hover i {
    transform: translateX(3px);
    color: var(--lc-primary) !important;
}

/* "Tin tức hot" / related posts */
.news-index-page .news-widget-two .wrapper-box,
.news-detail-page .news-widget-two .wrapper-box {
    background: transparent !important;
}
.news-index-page .news-widget-two .post,
.news-detail-page .news-widget-two .post {
    background-color: var(--lc-card) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--lc-line);
}
.news-index-page .news-widget-two .post:before,
.news-detail-page .news-widget-two .post:before {
    background: var(--lc-primary-soft) !important;
}
.news-index-page .news-widget-two .post .content h4 a,
.news-detail-page .news-widget-two .post .content h4 a {
    color: var(--lc-ink) !important;
}
.news-index-page .news-widget-two .post:hover .content h4 a,
.news-detail-page .news-widget-two .post:hover .content h4 a {
    color: var(--lc-primary) !important;
}

/* Branch tags */
.news-index-page .tag-cloud-widget li a,
.news-detail-page .tag-cloud-widget li a {
    background: var(--lc-primary-soft) !important;
    color: var(--lc-primary) !important;
    border: 0 !important;
}
.news-index-page .tag-cloud-widget li a:hover,
.news-detail-page .tag-cloud-widget li a:hover {
    background: var(--lc-primary) !important;
    color: #fff !important;
}

/* Search box */
.news-index-page .search-form input,
.activity-index-page .search-form input,
.news-detail-page .search-form input {
    background: var(--lc-surface) !important;
    border: 1px solid var(--lc-line) !important;
    color: var(--lc-ink) !important;
}
.news-index-page .search-form button,
.activity-index-page .search-form button,
.news-detail-page .search-form button {
    background: var(--lc-primary) !important;
    color: #fff !important;
}

/* ---------- Pagination (custom markup: li > a, a.active, li.prev/next) ---------- */
.news-index-page .pagination li > a,
.news-index-page .pagination li > span,
.activity-index-page .pagination li > a,
.activity-index-page .pagination li > span {
    color: var(--lc-text) !important;
    background: var(--lc-card) !important;
    border: 1px solid var(--lc-line) !important;
}
.news-index-page .pagination li > a:hover,
.activity-index-page .pagination li > a:hover {
    color: var(--lc-primary) !important;
    background: var(--lc-primary-soft) !important;
    border-color: var(--lc-primary-soft) !important;
}
.news-index-page .pagination li > a.active,
.news-index-page .pagination li.active > a,
.news-index-page .pagination li.active > span,
.activity-index-page .pagination li > a.active,
.activity-index-page .pagination li.active > a,
.activity-index-page .pagination li.active > span {
    color: #fff !important;
    background: var(--lc-primary) !important;
    border-color: var(--lc-primary) !important;
}
.news-index-page .pagination li.prev > a,
.news-index-page .pagination li.next > a,
.activity-index-page .pagination li.prev > a,
.activity-index-page .pagination li.next > a {
    color: var(--lc-primary) !important;
    background: var(--lc-primary-soft) !important;
    border-color: var(--lc-primary-soft) !important;
}
.news-index-page .pagination li.disabled > span,
.activity-index-page .pagination li.disabled > span {
    color: var(--lc-muted) !important;
    background: transparent !important;
    border-color: transparent !important;
}

/* Share icons on list cards */
.news-index-page .social-links-wrapper .social-links li a {
    background: var(--lc-primary-soft) !important;
    color: var(--lc-primary) !important;
}
.news-index-page .social-links-wrapper .social-links li a:hover {
    background: var(--lc-primary) !important;
    color: #fff !important;
}

/* Category list rows use the same surface as everything else */
.news-index-page .widget_categories ul li,
.activity-index-page .widget_categories ul li,
.news-detail-page .widget_categories ul li {
    background: transparent !important;
}

/* All sidebar titles the same colour (some had a more specific navy rule) */
.news-index-page .sidebar .widget .widget_title,
.activity-index-page .sidebar .widget .widget_title,
.news-detail-page .sidebar .widget .widget_title {
    color: var(--lc-ink) !important;
}

/* ---------- Detail: article body ---------- */
.news-detail-page .lacco-rich-content {
    color: var(--lc-text);
}
.news-detail-page .lacco-rich-content h2,
.news-detail-page .lacco-rich-content h3,
.news-detail-page .lacco-rich-content h4 {
    color: var(--lc-ink) !important;
}
.news-detail-page .lacco-rich-content a {
    color: var(--lc-primary) !important;
}
/* Editor-pasted colours (red, random blues...) -> one emphasis colour */
.news-detail-page .lacco-rich-content [style*="color"]:not(a):not(mark) {
    color: var(--lc-primary) !important;
}
.news-detail-page .lacco-rich-content p:not([style*="color"]),
.news-detail-page .lacco-rich-content li:not([style*="color"]),
.news-detail-page .lacco-rich-content td:not([style*="color"]) {
    color: var(--lc-text) !important;
}

/* Scrollbars inside these pages (e.g. "Mục lục") were the global light-red */
.news-index-page *::-webkit-scrollbar-thumb,
.activity-index-page *::-webkit-scrollbar-thumb,
.news-detail-page *::-webkit-scrollbar-thumb {
    background: #c5cbdb !important;
    border-radius: 6px;
}
.news-index-page *::-webkit-scrollbar-thumb:hover,
.activity-index-page *::-webkit-scrollbar-thumb:hover,
.news-detail-page *::-webkit-scrollbar-thumb:hover {
    background: var(--lc-primary) !important;
}
.news-index-page *,
.activity-index-page *,
.news-detail-page * {
    scrollbar-color: #c5cbdb transparent;
}

/* Table of contents */
.news-detail-page .table-of-contents a {
    color: var(--lc-text) !important;
}
.news-detail-page .table-of-contents a:hover,
.news-detail-page .table-of-contents a.active {
    color: var(--lc-primary) !important;
}

/* Category badge on the article header */
.news-detail-page .category-badge,
.news-detail-page .category-name {
    background: var(--lc-primary-soft) !important;
    color: var(--lc-primary) !important;
}

/* Share buttons: one neutral style instead of FB-blue / X-black / grey */
.news-detail-page .social-btn {
    background: var(--lc-primary-soft) !important;
    color: var(--lc-primary) !important;
    border: 0 !important;
}
.news-detail-page .social-btn:hover {
    background: var(--lc-primary) !important;
    color: #fff !important;
}

/* Meta / hints / dividers */
.news-detail-page .hint,
.news-detail-page h5 {
    color: var(--lc-muted) !important;
}
.news-detail-page .bottom-content,
.news-detail-page .post-pagination .post {
    border-color: var(--lc-line) !important;
}
.news-detail-page .post-pagination .post .content h4 a {
    color: var(--lc-ink) !important;
}
.news-detail-page .post-pagination .post:hover .content h4 a {
    color: var(--lc-primary) !important;
}
.news-detail-page .post-pagination .all-blog a {
    color: var(--lc-primary) !important;
}
.news-detail-page .post-pagination .all-blog a:hover {
    color: var(--lc-primary-hover) !important;
}
.news-detail-page .post-thumb {
    background: var(--lc-surface) !important;
}

/* =====================================================================
   Sticky right sidebar on desktop (/news, /tin-tuc, detail pages)
   ===================================================================== */

/* No top bar is pinned while scrolling (lacco.js only pins .left-panel, the right
   icon rail), so the sidebar can stick close to the top of the screen. */
.news-index-page,
.activity-index-page,
.news-detail-page {
    --lacco-sidebar-sticky-top: 24px;
}

/* .page-wrapper has overflow:hidden (blocks position:sticky). On the list pages use
   overflow-x:clip instead: still no horizontal scroll, but sticky works.
   (Detail pages already get overflow:visible from lacco.css.) */
body.news-list-page .page-wrapper {
    overflow: visible !important;
    overflow-x: clip !important;
}

/* /tin-tuc grid now sits in the 8-col main column: keep card images the same size
   as before (the featured image rule targets ".row .col-lg-8 .news-block-one"). */
.activity-index-page .activity-grid .news-block-one .image img {
    height: 270px !important;
    min-height: 270px;
    max-height: 270px;
}
.activity-index-page .activity-index-grid-section {
    margin-top: 24px;
}

@media (min-width: 992px) {
    .news-index-page aside.sidebar,
    .activity-index-page aside.sidebar,
    .news-detail-page .news-sidebar-col {
        align-self: stretch;
        overflow: visible !important;
    }

    .news-index-page aside.sidebar > .blog-sidebar,
    .activity-index-page aside.sidebar > .activity-sidebar-sticky {
        position: -webkit-sticky;
        position: sticky;
        top: var(--lacco-sidebar-sticky-top);
        z-index: 25;
        /* Taller than the screen? scroll inside the sidebar instead of cutting it off */
        max-height: calc(100vh - var(--lacco-sidebar-sticky-top) - 16px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .news-detail-page .news-detail-page__sidebar-sticky {
        top: var(--lacco-sidebar-sticky-top) !important;
    }
}