html, body { margin: 0; padding: 0; }
body { background: url('/images/bg.jpg') right bottom / cover no-repeat fixed; background-color: #000; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 30% 20%, rgba(255,215,0,0.15), transparent 40%), radial-gradient(circle at 70% 80%, rgba(255,215,0,0.1), transparent 40%); }
a { text-decoration: none; }
.site-header { background: #212529; position: relative; z-index: 1100; }
.site-logo { height: 40px; width: auto; object-fit: contain; display: block; }
.site-navbar .nav-link { color: rgba(255,255,255,.85); font-size: 15px; padding-left: 14px !important; padding-right: 14px !important; }
.site-navbar .nav-link:hover, .site-navbar .nav-link.active { color: #ffc107 !important; }
.header-action .btn { min-width: 84px; }
.page-wrap { position: relative; z-index: 5; padding: 28px 0 56px; }
.page-panel { background: rgba(0, 0, 0, 0.56); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.05); box-shadow: inset 0 0 60px rgba(0,0,0,.3); border-radius: 22px; padding: 24px; }
.article-breadcrumb { margin-bottom: 18px; }
.article-breadcrumb .breadcrumb { margin: 0; }
.article-breadcrumb .breadcrumb-item, .article-breadcrumb .breadcrumb-item a { color: rgba(255,255,255,.68); font-size: 14px; }
.article-breadcrumb .breadcrumb-item.active { color: #ffc107; }
.article-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.45); }
.list-header { margin-bottom: 24px; }
.list-title { color: #fff; font-size: 34px; font-weight: 700; margin: 0 0 8px; }
.list-subtitle { color: rgba(255,255,255,.72); font-size: 15px; margin: 0; }
.article-search-box { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 16px; margin-bottom: 24px; }
.article-search-form .form-control { height: 48px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: #fff; border-radius: 12px; }
.article-search-form .form-control::placeholder { color: rgba(255,255,255,.45); }
.article-search-form .form-control:focus { box-shadow: none; border-color: rgba(255,193,7,.5); background: rgba(255,255,255,.08); color: #fff; }
.article-search-form .btn { height: 48px; border-radius: 12px; padding: 0 20px; font-weight: 600; }
.list-article-card { display: flex; gap: 18px; background: rgba(20,20,20,.9); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 28px rgba(0,0,0,.18); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; margin-bottom: 20px; }
.list-article-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.28); border-color: rgba(255,193,7,.35); }
.list-article-thumb { width: 280px; min-width: 280px; height: 190px; background: #000; overflow: hidden; }
.list-article-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.list-article-card:hover .list-article-thumb img { transform: scale(1.05); }
.list-article-body { flex: 1; padding: 18px 18px 18px 0; }
.list-article-meta { display: flex; flex-wrap: wrap; gap: 12px; color: rgba(255,255,255,.55); font-size: 13px; margin-bottom: 10px; }
.list-article-meta i { color: #ffc107; margin-right: 4px; }
.list-article-title { color: #fff; font-size: 24px; font-weight: 700; line-height: 1.45; margin: 0 0 10px; transition: color .25s ease, text-shadow .25s ease; }
.list-article-card:hover .list-article-title { color: #ffc107; text-shadow: 0 0 6px rgba(255,193,7,.4); }
.list-article-desc { color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.8; margin: 0 0 14px; }
.list-article-readmore { color: #ffc107; font-size: 14px; font-weight: 600; }
.sidebar-box { background: rgba(20,20,20,.9); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; box-shadow: 0 10px 28px rgba(0,0,0,.18); padding: 20px; margin-bottom: 20px; }
.sidebar-title { color: #fff; font-size: 22px; font-weight: 700; margin: 0 0 16px; }
.article-category-list { list-style: none; padding: 0; margin: 0; }
.article-category-list li + li { margin-top: 10px; }
.article-category-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: rgba(255,255,255,.82); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 12px 14px; transition: all .25s ease; }
.article-category-list a:hover, .article-category-list a.active { color: #ffc107; border-color: rgba(255,193,7,.3); background: rgba(255,193,7,.06); }
.article-category-list span.count { color: rgba(255,255,255,.45); font-size: 13px; }
.article-pagination { margin-top: 10px; }
.article-pagination .page-link { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: #fff; }
.article-pagination .page-item.active .page-link { background: #ffc107; border-color: #ffc107; color: #111; }
.article-pagination .page-link:focus { box-shadow: none; }
.mobile-bottom-nav { position: fixed; left: 0; bottom: 0; width: 100%; height: 64px; background: #1b1b1b; border-top: 1px solid rgba(255,255,255,.08); z-index: 1200; display: none; }
.mobile-bottom-nav .nav-inner { display: flex; width: 100%; height: 100%; }
.mobile-bottom-nav a { flex: 1; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; line-height: 1.2; }
.mobile-bottom-nav a i { font-size: 20px; margin-bottom: 4px; }
.mobile-bottom-nav a.active, .mobile-bottom-nav a:hover { color: #ffc107; }
@media (max-width: 991.98px) { .site-header .container { padding-left: 12px; padding-right: 12px; } .site-logo { height: 32px; } .site-navbar .navbar-collapse { background: #212529; margin-top: 10px; padding: 10px 0 4px; border-top: 1px solid rgba(255,255,255,.08); } .site-navbar .nav-link { padding: 10px 0 !important; } .header-action { padding-top: 8px; } .page-panel { padding: 18px; } .list-title { font-size: 28px; } .list-article-card { flex-direction: column; gap: 0; } .list-article-thumb { width: 100%; min-width: 100%; height: 220px; } .list-article-body { padding: 16px; } .mobile-bottom-nav { display: block; } body { padding-bottom: 64px; } }
@media (max-width: 767.98px) { body { background-attachment: scroll; } .page-wrap { padding: 18px 0 36px; } .list-title { font-size: 24px; } .list-subtitle { font-size: 14px; } .article-search-box { padding: 14px; } .list-article-thumb { height: 190px; } .list-article-title { font-size: 20px; } .list-article-desc { font-size: 14px; } }