/* ======== VNMETAL-ASIA - QQ News Style ======== */

html { scroll-behavior: smooth; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f5f5f5; }
::-webkit-scrollbar-thumb { background: #d0d0d0; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #b0b0b0; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

::selection { background: #c62828; color: #fff; }

/* Line Clamp */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* Nav Active */
.nav-link.active { color: #c62828 !important;  }

/* ======== SWIPER NAV ======== */
.nav-swiper-container { overflow: visible; }
.navSwiper { overflow: visible !important; }
.navSwiper .swiper-wrapper { align-items: center; }
.navSwiper .swiper-slide { width: auto !important; flex-shrink: 0; overflow: visible !important; text-align: center; }

/* Responsive: fixed-width slides below lg */
@media (max-width: 1023px) {
    .navSwiper .swiper-slide { text-align: center; }
    .navSwiper .nav-link { padding-left: .5rem !important; padding-right: .5rem !important; font-size: .8rem !important; }
}

/* Nav Arrows: show on hover */
.nav-swiper-prev, .nav-swiper-next { opacity: 0; transition: opacity .2s; }
.nav-swiper-container:hover .nav-swiper-prev,
.nav-swiper-container:hover .nav-swiper-next { opacity: 1; }
.swiper-button-disabled { opacity: 0 !important; cursor: default !important; }

/* ======== MOBILE DROPDOWN ======== */
.mobile-dropdown .mobile-drop-arrow { transition: transform .2s; }
.mobile-dropdown.open .mobile-drop-arrow { transform: rotate(180deg); }
.mobile-dropdown.open .mobile-submenu { display: block !important; }

/* ======== ARTICLE BODY ======== */
.article-body { line-height: 1.9; font-size: 17px; color: #374151; }
.article-body p { margin-bottom: 1.5rem; text-indent: 2em; }
.article-body h2 { font-size: 1.45rem; font-weight: 700; margin: 2rem 0 1rem; color: #1f2937; padding-bottom: .5rem; border-bottom: 2px solid #f3f4f6; }
.article-body h3 { font-size: 1.2rem; font-weight: 600; margin: 1.5rem 0 .75rem; }
.article-body img { max-width: 100%; height: auto; border-radius: 6px; margin: 1.5rem auto; display: block; }
.article-body blockquote { border-left: 4px solid #c62828; padding: .75rem 1.25rem; margin: 1.5rem 0; background: #fafafa; border-radius: 0 4px 4px 0; color: #555; }
.article-body a { color: #c62828; }
.article-body a:hover { color: #8e0000; }
.article-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 14px; }
.article-body th, .article-body td { border: 1px solid #e5e7eb; padding: .6rem .9rem; }
.article-body th { background: #f9fafb; font-weight: 600; }

/* ======== PAGINATION ======== */
.pagination { display: flex; gap: .4rem; flex-wrap: wrap; }
.pagination a, .pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.5rem; height: 2.5rem; padding: 0 .75rem;
    border: 1px solid #e5e7eb; border-radius: 6px;
    font-size: 13px; color: #4b5563; text-decoration: none;
    transition: all .15s;
}
.pagination a:hover { background: #c62828; color: #fff; border-color: #c62828; }
.pagination .current { background: #c62828; color: #fff; border-color: #c62828; font-weight: 600; }
.pagination .disabled { color: #d1d5db; cursor: not-allowed; }

@media (max-width: 1023px) {
    .article-body p { text-indent: 1em; }
}