/* source: components/post-card/box.php */ .archive-post-v2 { --card-accent: var(--theme-color, #16a34a); --card-bg: var(--bg-card, #ffffff); --card-border: var( --border-color, rgba(20,24,35,.08) ); --card-text: var( --text-primary, #1b1f2a ); --card-muted: var( --text-muted, #727986 ); --card-soft: color-mix( in srgb, var(--card-accent) 6%, transparent ); position: relative; display: block; width: 100%; height: 100%; overflow: hidden; isolation: isolate; border: 1px solid var(--card-border) !important; border-radius: 18px !important; background: linear-gradient( 145deg, var(--card-bg) 0%, var(--card-bg) 72%, color-mix( in srgb, var(--card-accent) 4%, var(--card-bg) ) 100% ); text-decoration: none !important; box-shadow: 0 2px 7px rgba(20,25,35,.025), 0 8px 22px rgba(20,25,35,.035); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease; } .archive-post-v2.has-mod:not(.has-new):not(.has-update) { --card-accent: #e53935; background: linear-gradient( 145deg, color-mix( in srgb, #e53935 4.5%, var(--card-bg) ), var(--card-bg) 70%, color-mix( in srgb, #e53935 7%, var(--card-bg) ) ); } .archive-post-v2.has-new:not(.has-mod):not(.has-update) { --card-accent: #2196f3; background: linear-gradient( 145deg, color-mix( in srgb, #2196f3 4.5%, var(--card-bg) ), var(--card-bg) 70%, color-mix( in srgb, #2196f3 7%, var(--card-bg) ) ); } .archive-post-v2.has-update:not(.has-mod):not(.has-new) { --card-accent: #20a05a; background: linear-gradient( 145deg, color-mix( in srgb, #20a05a 4.5%, var(--card-bg) ), var(--card-bg) 70%, color-mix( in srgb, #20a05a 7%, var(--card-bg) ) ); } .archive-post-v2.has-mod.has-new { --card-accent: #2196f3; background: radial-gradient( circle at 15% 50%, rgba(33,150,243,.10), transparent 54% ), linear-gradient( 145deg, color-mix( in srgb, #2196f3 5%, var(--card-bg) ), var(--card-bg) 68%, color-mix( in srgb, #2196f3 8%, var(--card-bg) ) ); border-color: rgba(33,150,243,.16) !important; } .archive-post-v2.has-mod.has-update { --card-accent: #20a05a; background: radial-gradient( circle at 15% 50%, rgba(32,160,90,.10), transparent 54% ), linear-gradient( 145deg, color-mix( in srgb, #20a05a 5%, var(--card-bg) ), var(--card-bg) 68%, color-mix( in srgb, #20a05a 8%, var(--card-bg) ) ); border-color: rgba(32,160,90,.16) !important; } .archive-post-v2.has-new.has-update { --card-accent: #2196f3; background: linear-gradient( 145deg, color-mix( in srgb, #2196f3 4%, var(--card-bg) ), var(--card-bg) 64%, color-mix( in srgb, #20a05a 6%, var(--card-bg) ) ); } .archive-post-v2.has-mod.has-new.has-update { --card-accent: #2196f3; background: linear-gradient( 110deg, color-mix( in srgb, #2196f3 7%, var(--card-bg) ), var(--card-bg) 48%, color-mix( in srgb, #20a05a 7%, var(--card-bg) ) ); border-color: rgba(33,150,243,.15) !important; } .archive-post-v2::before { content: ""; position: absolute; top: 0; right: 20px; left: 20px; height: 2px; border-radius: 0 0 12px 12px; background: linear-gradient( 90deg, transparent, var(--card-accent), transparent ); opacity: .45; transform: scaleX(.55); transition: transform .3s ease, opacity .3s ease; z-index: 8; } .archive-post-v2:hover { transform: translateY(-4px); border-color: color-mix( in srgb, var(--card-accent) 26%, var(--card-border) ) !important; box-shadow: 0 9px 24px rgba(20,25,35,.055), 0 16px 38px color-mix( in srgb, var(--card-accent) 9%, transparent ); } .archive-post-v2:hover::before { transform: scaleX(1); opacity: .85; } .archive-post-status { position: absolute; top: 50%; left: -14px; right: 0; z-index: 1; display: flex; align-items: center; justify-content: center; pointer-events: none; user-select: none; transform: translateY(-50%) translateX(-8px) rotate(-5deg); white-space: nowrap; direction: ltr; } .archive-post-status .status-word { display: inline-block; font-family: inherit; font-weight: 1000; line-height: .85; letter-spacing: -2px; white-space: nowrap; opacity: .10; text-shadow: 0 1px 1px rgba(255,255,255,.08); } .archive-post-status .status-mod { color: #e53935; font-size: 65px; } .archive-thumb-status { position: absolute; top: 7px; right: 7px; z-index: 12; display: flex; align-items: center; gap: 4px; direction: ltr; pointer-events: none; } .archive-thumb-status .thumb-status-label { display: inline-flex; align-items: center; justify-content: center; min-width: 43px; height: 21px; padding: 0 7px; border-radius: 7px; color: #fff; font-size: 9px; font-weight: 800; line-height: 1; letter-spacing: .15px; white-space: nowrap; border: 1px solid rgba(255,255,255,.20); box-shadow: 0 3px 9px rgba(0,0,0,.16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .archive-thumb-status .thumb-status-new { background: linear-gradient( 135deg, #2196f3, #1976d2 ); } .archive-thumb-status .thumb-status-update { background: linear-gradient( 135deg, #20a05a, #188548 ); } .archive-post-v2 .archive-card-inner { position: relative; z-index: 3; display: flex; align-items: center; min-height: 132px; padding: 12px; } .archive-post-v2 .archive-thumb { position: relative; width: 108px; height: 108px; flex: 0 0 108px; margin-left: 13px; overflow: hidden; border-radius: 17px; background: var(--bg-light,#f2f4f7); box-shadow: 0 5px 14px rgba(0,0,0,.075); transform: translateZ(0); z-index: 4; } .archive-post-v2 .archive-thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255,255,255,.24); pointer-events: none; z-index: 8; } .archive-post-v2 .archive-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transition: transform .4s cubic-bezier(.2,.8,.2,1); } .archive-post-v2:hover .archive-thumb img { transform: scale(1.07); } .archive-post-v2 .archive-image-views { position: absolute; left: 6px; bottom: 6px; z-index: 9; display: inline-flex; align-items: center; justify-content: center; min-height: 21px; padding: 3px 6px; border-radius: 6px; color: #fff !important; background: rgba(12,16,23,.68); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); font-size: 8.5px; font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: 0 3px 9px rgba(0,0,0,.20); } .archive-post-v2 .archive-image-views svg { width: 10px; height: 10px; margin-left: 4px; flex: 0 0 10px; fill: currentColor !important; opacity: .9; } .archive-post-v2 .archive-image-views span { display: inline-flex; align-items: center; direction: ltr; white-space: nowrap; } .archive-post-v2 .archive-info { position: relative; z-index: 4; min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; } .archive-post-v2 .archive-title { margin: 0 !important; color: var(--card-text); font-size: 14px; font-weight: 800; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s ease; } .archive-post-v2:hover .archive-title { color: var(--card-accent); } .archive-post-v2 .archive-version { display: flex; align-items: center; min-width: 0; color: var(--card-muted) !important; font-size: 9.5px; font-weight: 600; line-height: 1.45; white-space: nowrap; } .archive-post-v2 .archive-version-text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .archive-post-v2 .archive-size-box { display: block; min-width: 0; color: var(--card-muted) !important; font-size: 9.5px; font-weight: 600; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .archive-post-v2 .archive-mod { display: flex; align-items: center; min-width: 0; color: #e53935 !important; font-size: 9.5px; font-weight: 700; line-height: 1.4; } .archive-post-v2 .archive-mod .mod-feature-text { min-width: 0; color: #e53935 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .archive-post-v2 .archive-arrow { position: absolute; left: 10px; bottom: 10px; z-index: 6; display: flex; align-items: center; justify-content: center; width: 23px; height: 23px; border-radius: 8px; background: color-mix( in srgb, var(--card-accent) 7%, transparent ); color: var(--card-accent); opacity: 0; transform: translateX(4px); transition: opacity .22s ease, transform .22s ease; } .archive-post-v2 .archive-arrow svg { width: 9px; height: 9px; fill: currentColor !important; } .archive-post-v2:hover .archive-arrow { opacity: 1; transform: translateX(0); } body.dark-mode .archive-post-v2 { --card-bg: var(--bg-card,#1c2028); --card-text: #f1f3f5; --card-muted: #a7afb9; border-color: rgba(255,255,255,.075) !important; background: linear-gradient( 145deg, #1c2028, #1b1f26 72% ); box-shadow: 0 5px 18px rgba(0,0,0,.18); } body.dark-mode .archive-post-v2.has-mod.has-new { background: radial-gradient( circle at 15% 50%, rgba(33,150,243,.14), transparent 54% ), linear-gradient( 145deg, #1d2732, #1b1f26 70%, #1c2630 ); border-color: rgba(33,150,243,.21) !important; } body.dark-mode .archive-post-v2.has-mod.has-update { background: radial-gradient( circle at 15% 50%, rgba(32,160,90,.14), transparent 54% ), linear-gradient( 145deg, #1d2923, #1b1f26 70%, #1c2821 ); border-color: rgba(32,160,90,.21) !important; } body.dark-mode .archive-post-status .status-word { opacity: .125; } body.dark-mode .archive-post-status .status-mod { color: #ff4d4d; } body.dark-mode .archive-post-v2 .archive-thumb { background: #292e37; box-shadow: 0 5px 18px rgba(0,0,0,.38); } body.dark-mode .archive-post-v2 .archive-thumb::after { border-color: rgba(255,255,255,.08); } body.dark-mode .archive-post-v2 .archive-mod, body.dark-mode .archive-post-v2 .archive-mod .mod-feature-text { color: #ff4d4d !important; } @media (min-width: 992px) { .archive-post-v2 .archive-card-inner { min-height: 145px; padding: 14px; } .archive-post-v2 .archive-thumb { width: 112px; height: 112px; flex-basis: 112px; margin-left: 14px; border-radius: 18px; } .archive-post-status { left: -18px; transform: translateY(-50%) translateX(-12px) rotate(-5deg); } .archive-post-v2.status-one .archive-post-status .status-mod { font-size: 74px; } .archive-thumb-status { top: 8px; right: 8px; } .archive-thumb-status .thumb-status-label { min-width: 47px; height: 23px; padding: 0 8px; border-radius: 8px; font-size: 10px; } } @media (max-width: 991px) { .archive-post-v2 .archive-card-inner { min-height: 125px; padding: 10px; } .archive-post-v2 .archive-thumb { width: 100px; height: 100px; flex-basis: 100px; margin-left: 11px; border-radius: 16px; } .archive-post-status { left: -10px; transform: translateY(-50%) translateX(-8px) rotate(-5deg); } .archive-post-v2.status-one .archive-post-status .status-mod { font-size: 63px; } .archive-post-v2 .archive-title { font-size: 14px; } .archive-thumb-status { top: 7px; right: 7px; } .archive-thumb-status .thumb-status-label { min-width: 43px; height: 21px; padding: 0 7px; border-radius: 7px; font-size: 9px; } } @media (max-width: 767px) { .archive-post-v2 { border-radius: 15px !important; } .archive-post-v2 .archive-card-inner { min-height: 116px; padding: 8px; } .archive-post-v2 .archive-thumb { width: 96px; height: 96px; flex: 0 0 96px; margin-left: 10px; border-radius: 14px; } .archive-post-status { left: -7px; transform: translateY(-50%) translateX(-7px) rotate(-5deg); } .archive-post-v2.status-one .archive-post-status .status-mod { font-size: 52px; } .archive-thumb-status { top: 5px; right: 5px; gap: 3px; } .archive-thumb-status .thumb-status-label { min-width: 40px; height: 20px; padding: 0 6px; border-radius: 6px; font-size: 8px; box-shadow: 0 2px 7px rgba(0,0,0,.16); } .archive-post-v2 .archive-info { gap: 5px; } .archive-post-v2 .archive-title { font-size: 13px; line-height: 1.4; } .archive-post-v2 .archive-version, .archive-post-v2 .archive-size-box, .archive-post-v2 .archive-mod { font-size: 8.5px; } .archive-post-v2 .archive-image-views { left: 5px; bottom: 5px; min-height: 20px; padding: 3px 5px; font-size: 7.5px; border-radius: 6px; } .archive-post-v2 .archive-image-views svg { width: 9px; height: 9px; flex-basis: 9px; margin-left: 3px; } .archive-post-v2 .archive-arrow { display: none; } } @media (max-width: 480px) { .archive-post-v2 .archive-card-inner { min-height: 112px; padding: 7px; } .archive-post-v2 .archive-thumb { width: 94px; height: 94px; flex-basis: 94px; margin-left: 9px; border-radius: 13px; } .archive-post-status { left: -5px; transform: translateY(-50%) translateX(-6px) rotate(-5deg); } .archive-post-v2.status-one .archive-post-status .status-mod { font-size: 49px; } .archive-thumb-status { top: 5px; right: 5px; gap: 2px; } .archive-thumb-status .thumb-status-label { min-width: 38px; height: 18px; padding: 0 5px; border-radius: 5px; font-size: 7px; } .archive-post-v2 .archive-title { font-size: 12.5px; } .archive-post-v2 .archive-version, .archive-post-v2 .archive-size-box, .archive-post-v2 .archive-mod { font-size: 8px; } .archive-post-v2 .archive-image-views { left: 5px; bottom: 5px; min-height: 18px; padding: 2px 5px; font-size: 7px; border-radius: 5px; } .archive-post-v2 .archive-image-views svg { width: 8px; height: 8px; flex-basis: 8px; margin-left: 3px; } } @media (max-width: 350px) { .archive-post-v2 .archive-card-inner { padding: 6px; } .archive-post-v2 .archive-thumb { width: 88px; height: 88px; flex-basis: 88px; margin-left: 8px; } .archive-post-v2 .archive-title { font-size: 12px; } .archive-post-v2 .archive-version, .archive-post-v2 .archive-size-box, .archive-post-v2 .archive-mod { font-size: 7.5px; } } @media (prefers-reduced-motion: reduce) { .archive-post-v2, .archive-post-v2 *, .archive-post-v2::before { transition: none !important; animation: none !important; } } /* source: components/post-card/box-slider.php */ .hc-card { --hc-bg: var(--bg-card, #fff); --hc-border: var(--border-color, #e9e9e9); --hc-text: var(--text-primary, #202124); --hc-muted: var(--text-muted, #777); --hc-light: var(--bg-light, #f5f6f8); --hc-accent: var(--theme-color, #3b82f6); position: relative; width: 100%; min-width: 0; background: var(--hc-bg); border: 1px solid var(--hc-border); border-radius: 17px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, .045); transition: transform .18s ease, box-shadow .18s ease; isolation: isolate; } .hc-card-link { display: block; color: inherit; text-decoration: none; } .hc-card-media { position: relative; margin: 10px 10px 0; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 13px; background: var(--hc-light); } .hc-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transition: transform .25s ease; } .hc-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .09); } .hc-card:hover .hc-card-media img { transform: scale(1.035); } .hc-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba(0, 0, 0, .46), rgba(0, 0, 0, 0) 48% ); pointer-events: none; z-index: 1; } .hc-card-views { position: absolute; top: 9px; left: 9px; display: inline-flex; align-items: center; gap: 5px; height: 27px; padding: 0 8px; background: rgba(0, 0, 0, .66); color: #fff; border-radius: 8px; font-size: 10px; font-weight: 700; line-height: 1; z-index: 4; } .hc-card-views svg { width: 14px; height: 14px; flex: 0 0 auto; } .hc-card-image-status { position: absolute; top: 9px; right: 9px; display: inline-flex; align-items: center; z-index: 4; pointer-events: none; } .hc-card-image-status-label { display: inline-flex; align-items: center; justify-content: center; min-height: 27px; padding: 0 9px; border-radius: 8px; color: #fff; font-size: 9px; font-weight: 800; line-height: 1; white-space: nowrap; box-shadow: 0 3px 9px rgba(0, 0, 0, .16); } .hc-card-image-status-label.new { background: #2196f3; } .hc-card-image-status-label.updated { background: #16a36a; } .hc-card-badges { position: absolute; right: 9px; bottom: 9px; left: 9px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; z-index: 4; } .hc-card-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 0 8px; border-radius: 7px; color: #fff; background: rgba(0, 0, 0, .64); font-size: 9px; font-weight: 800; line-height: 1; white-space: nowrap; } .hc-card-badge.mod { background: #e53935; color: #fff; box-shadow: 0 3px 10px rgba(229, 57, 53, .28); } .hc-card-badge.popular { background: #f59e0b; color: #fff; } .hc-card-body { padding: 12px 11px 11px; } .hc-card-title { margin: 0; color: var(--hc-text); font-size: 13.5px; font-weight: 800; line-height: 1.7; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: calc(13.5px * 1.7 * 2); } .hc-card-meta { display: flex; align-items: center; gap: 6px; margin-top: 9px; } .hc-card-meta-item { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 6px 7px; border-radius: 8px; background: var(--hc-light); color: var(--hc-muted); font-size: 9px; line-height: 1.2; flex: 1; } .hc-card-meta-item svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--hc-accent); } .hc-card-meta-value { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--hc-text); font-weight: 700; } .hc-card-mod { display: flex; align-items: center; gap: 6px; margin-top: 7px; padding: 6px 7px; border-radius: 8px; background: var(--hc-light); color: var(--hc-muted); font-size: 9px; line-height: 1.4; } .hc-card-mod svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--hc-accent); } .hc-card-mod-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hc-card-mod-text strong { color: var(--hc-text); font-weight: 700; } .hc-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--hc-border); } .hc-card-status { color: var(--hc-muted); font-size: 9px; font-weight: 700; white-space: nowrap; } .hc-card-arrow { display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; flex: 0 0 25px; border-radius: 7px; background: var(--hc-light); color: var(--hc-accent); } .hc-card-arrow svg { width: 14px; height: 14px; } body.dark-mode .hc-card { box-shadow: 0 6px 20px rgba(0, 0, 0, .22); } body.dark-mode .hc-card-meta-item, body.dark-mode .hc-card-meta-item, body.dark-mode .hc-card-mod, body.dark-mode .hc-card-mod, body.dark-mode .hc-card-arrow { background: rgba(255,255,255,.055); } body.dark-mode .hc-card-footer { border-color: rgba(255,255,255,.09); } @media (max-width: 768px) { .hc-card { border-radius: 15px; box-shadow: 0 3px 13px rgba(0,0,0,.045); } .hc-card-media { margin: 8px 8px 0; border-radius: 12px; } .hc-card-body { padding: 10px 9px 9px; } .hc-card-title { font-size: 12.5px; line-height: 1.7; min-height: calc(12.5px * 1.7 * 2); } .hc-card-meta { margin-top: 8px; gap: 5px; } .hc-card-meta-item { padding: 5px 6px; font-size: 8.5px; } .hc-card-meta-item svg { width: 12px; height: 12px; } .hc-card-mod { margin-top: 6px; padding: 5px 6px; font-size: 8.5px; } .hc-card-mod svg { width: 12px; height: 12px; } .hc-card-footer { margin-top: 7px; padding-top: 7px; } .hc-card-status { font-size: 8.5px; } .hc-card-arrow { width: 23px; height: 23px; flex-basis: 23px; } .hc-card-views { top: 7px; left: 7px; height: 25px; padding: 0 7px; font-size: 9px; } .hc-card-views svg { width: 13px; height: 13px; } .hc-card-image-status { top: 7px; right: 7px; } .hc-card-image-status-label { min-height: 25px; padding: 0 7px; border-radius: 7px; font-size: 8px; } .hc-card-badges { right: 7px; bottom: 7px; left: 7px; } .hc-card-badge { min-height: 22px; padding: 0 7px; border-radius: 6px; font-size: 8px; } } @media (max-width: 480px) { .hc-card-media { margin: 7px 7px 0; border-radius: 11px; } .hc-card-body { padding: 9px 8px 8px; } .hc-card-title { font-size: 12px; } .hc-card-image-status-label { min-height: 23px; padding: 0 6px; font-size: 7.5px; } .hc-card-views { height: 23px; padding: 0 6px; font-size: 8px; } .hc-card-badge { min-height: 21px; font-size: 7.5px; padding: 0 6px; } } @media (prefers-reduced-motion: reduce) { .hc-card, .hc-card img { transition: none !important; } .hc-card:hover { transform: none; } .hc-card:hover .hc-card-media img { transform: none; } } /* source: components/post-card/card-1.php */ .cpt-archive-card { position: relative; display: block; height: 180px; border-radius: 12px; overflow: hidden; background: var(--bg-light, #f0f2f5); box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .cpt-archive-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cpt-archive-card-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 14px; background: linear-gradient(to top, rgba(0,0,0,0.75), transparent 65%); z-index: 2; } .cpt-archive-card-title { color: #fff; font-size: 0.9rem; font-weight: 700; margin: 0; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* source: components/post-card/card-2.php */ .sidebar-cpt-card { position: relative; display: block; height: 160px; border-radius: 10px; overflow: hidden; background: var(--bg-light, #f0f2f5); box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .sidebar-cpt-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sidebar-cpt-card-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 12px; background: linear-gradient(to top, rgba(0,0,0,0.75), transparent 65%); z-index: 2; } .sidebar-cpt-card-title { color: #fff; font-size: 0.875rem; font-weight: 700; margin: 0; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* source: components/sidebar/main-sidebar.php */ .sb{background:var(--bg-card,#fff);border-radius:16px;padding:14px;margin-bottom:10px;transition:box-shadow .3s} .sb:hover{box-shadow:0 8px 30px rgba(0,0,0,.06)} .sb-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .sb-ttl{font-size:.95rem;font-weight:700;display:flex;align-items:center;gap:8px;margin:0;position:relative;padding-right:12px} .sb-ttl::before{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:3px;height:18px;background:var(--theme-color,#16a34a);border-radius:4px} .sb-ttl a{color:var(--text-primary,#222);text-decoration:none;transition:color .2s} .sb-ttl a:hover{color:var(--theme-color,#16a34a)} .sb-ttl svg{width:16px;height:16px;fill:var(--theme-color,#16a34a);flex-shrink:0;opacity:.8} .sb-btn{font-size:.7rem;font-weight:600;padding:5px 14px;border-radius:8px;background:var(--theme-color,#16a34a);color:var(--theme-contrast-text,#fff);text-decoration:none;transition:all .25s;white-space:nowrap;flex-shrink:0;letter-spacing:.3px;box-shadow:0 2px 8px rgba(22,163,74,.25)} .sb-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(22,163,74,.35);color:#fff;text-decoration:none} .sb-btn:focus-visible,.sb-ttl a:focus-visible{outline:2px solid var(--theme-color,#16a34a);outline-offset:2px} .sb-banner{display:block;position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/10;background:var(--bg-light,#e9ecef)} .sb-banner img.bnr{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .35s ease} .sb-banner:hover img.bnr{transform:scale(1.06)} .sb-banner .inf img{transition:opacity .3s ease} .sb-banner .ovl{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.3) 50%,transparent 100%);display:flex;align-items:flex-end;padding:12px} .sb-banner .inf{display:flex;align-items:center;gap:8px;width:100%} .sb-banner .inf img{width:40px;height:40px;border-radius:10px;object-fit:cover;border:2px solid rgba(255,255,255,.3);flex-shrink:0} .sb-banner .inf .det{min-width:0;flex:1} .sb-banner .inf .det .nm{color:#fff;font-size:.78rem;font-weight:700;line-height:1.3;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.4)} .sb-banner .inf .det .ver{color:rgba(255,255,255,.8);font-size:.65rem;margin-bottom:3px} .sb-banner .inf .det .tag{display:inline-block;font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:5px;color:#fff;letter-spacing:.3px} .sb-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px} .sb-pill{display:inline-flex;align-items:center;gap:5px;padding:8px 10px;border-radius:10px;background:var(--bg-light,#f5f7fa);color:var(--text-secondary,#444);font-size:.73rem;font-weight:600;text-decoration:none;transition:all .25s;border:1px solid transparent;max-width:100%} .sb-pill svg{width:12px;height:12px;fill:var(--text-muted,#aaa);flex-shrink:0;transition:fill .25s;opacity:.7} .sb-pill span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sb-pill:hover{background:rgba(22,163,74,.06);color:var(--theme-color,#16a34a);border-color:rgba(22,163,74,.12);transform:translateX(-3px);text-decoration:none} .sb-pill:hover svg{fill:var(--theme-color,#16a34a);opacity:1} .sb-empty{font-size:.75rem;color:var(--text-muted,#999);text-align:center;padding:10px 0;margin:0} body.dark-mode .sb{background:var(--bg-card,#1a1d24)!important} body.dark-mode .sb:hover{box-shadow:0 8px 30px rgba(0,0,0,.35)!important} body.dark-mode .sb-banner{background:var(--bg-light,#23272f)!important} body.dark-mode .sb-pill{background:var(--bg-light,#23272f)!important;color:var(--text-secondary,#adb5bd)!important;border-color:var(--border-color,rgba(255,255,255,.06))!important} body.dark-mode .sb-pill:hover{background:rgba(22,163,74,.15)!important;color:var(--theme-color,#16a34a)!important;border-color:rgba(22,163,74,.25)!important} @media(max-width:767px){.sb{padding:12px 10px;border-radius:14px}.sb-ttl{font-size:.88rem;padding-right:10px}.sb-ttl::before{width:3px;height:15px}.sb-btn{font-size:.66rem;padding:4px 10px;border-radius:6px}.sb-grid{grid-template-columns:1fr 1fr;gap:5px}.sb-pill{padding:7px 8px;font-size:.7rem}.sb-pill svg{width:11px;height:11px}} @media(max-width:380px){.sb-grid{grid-template-columns:1fr 1fr;gap:4px}.sb-pill{padding:6px 7px;font-size:.68rem;gap:3px}.sb-pill svg{width:10px;height:10px}} @media(prefers-reduced-motion:reduce){.sb,.sb-banner img.bnr,.sb-pill{animation:none!important;transition:none!important}} @media (min-width:992px){ #secondary.widget-area{align-self:flex-start;position:sticky;top:76px;} } body.dark-mode .sb{border-color:var(--border-color,rgba(255,255,255,.08))} /* source: components/sidebar/cpt-sidebar.php */ .cpt-sb{ background:var(--bg-card,#fff); border:1px solid var(--border-color,rgba(0,0,0,.06)); border-radius:16px;padding:14px;margin-bottom:10px; box-shadow:var(--shadow-card,0 2px 8px rgba(0,0,0,.04)); transition:box-shadow .25s ease,border-color .25s ease,background .25s ease; } .cpt-sb:hover{box-shadow:var(--shadow-elevated,0 10px 32px rgba(0,0,0,.08));border-color:rgba(var(--theme-color-rgb,22,163,74),.18)} .cpt-sb h2{ position:relative;margin:0 0 12px;padding:0 12px 12px 0; border-bottom:1px solid var(--border-color,rgba(0,0,0,.06)); color:var(--text-primary,#222);font-size:.95rem;font-weight:800; } .cpt-sb h2::before{content:"";position:absolute;right:0;top:1px;width:3px;height:18px;border-radius:4px;background:var(--theme-color,#16a34a)} .cpt-sb .sidebar-cpt-card{height:150px;border-radius:12px;background:var(--bg-light,#f0f2f5);box-shadow:none;border:1px solid var(--border-color,rgba(0,0,0,.05))} .cpt-sb .sidebar-cpt-card-title{font-size:.82rem;line-height:1.5} body.dark-mode .cpt-sb{background:var(--bg-card,#1a1d24);border-color:var(--border-color,rgba(255,255,255,.08))} @media(min-width:992px){#secondary.widget-area{align-self:flex-start;position:sticky;top:76px}} @media(max-width:767px){.cpt-sb{padding:12px 10px;border-radius:14px}.cpt-sb .sidebar-cpt-card{height:145px}}


/* BaziAndroid 4.0.53 — compact card metadata + non-overlapping slider badges */
.hc-card-title{
  display:block!important;
  min-height:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  -webkit-line-clamp:unset!important;
  -webkit-box-orient:unset!important;
}
.hc-card-meta{min-width:0!important}
.hc-card-meta-item{
  flex:1 1 0!important;
  min-width:0!important;
  max-width:calc(50% - 3px)!important;
}
.hc-card-meta-item.is-version .hc-card-meta-value{
  direction:ltr!important;
  unicode-bidi:plaintext!important;
  text-align:left!important;
}
.hc-card-meta-value{
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
/* Bottom corners have fixed jobs: release on right, connectivity on left. */
.hc-card-badges{
  right:7px!important;
  left:auto!important;
  bottom:7px!important;
  width:auto!important;
  max-width:calc(100% - 48px)!important;
  justify-content:flex-start!important;
}
.hc-card-badge{
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.hc-card-connectivity{
  left:7px!important;
  right:auto!important;
  bottom:7px!important;
}
/* Legacy watermark must never return if an old template fragment is cached. */
.archive-post-status{display:none!important}
@media(max-width:576px){
  .hc-card-title{font-size:13px!important;line-height:1.65!important}
  .hc-card-meta{gap:5px!important}
  .hc-card-meta-item{padding:6px!important;font-size:8.5px!important}
  .hc-card-meta-item svg{width:12px!important;height:12px!important}
  .hc-card-badges{max-width:calc(100% - 43px)!important}
}

/* source: archive.php */ .archive-main-section { background: var(--bg-card, #fff); border: 1px solid var(--border-color, rgba(0,0,0,0.06)); border-radius: 16px; padding: 20px; margin-bottom: 24px; transition: background 0.3s ease, border-color 0.3s ease; } .archive-desc-box { margin-top: 28px; padding: 20px 24px; background: var(--bg-light, #f8fafc); border: 1px solid var(--border-color, rgba(0,0,0,0.06)); border-radius: 14px; position: relative; overflow: hidden; transition: background 0.3s ease, border-color 0.3s ease; } .archive-desc-box::before { content: ''; position: absolute; right: 0; top: 15%; bottom: 15%; width: 4px; background: var(--theme-color, #16a34a); border-radius: 4px 0 0 4px; } .archive-desc-title { font-size: 1rem; font-weight: 800; color: var(--text-primary, #222); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .archive-desc-title svg { width: 20px; height: 20px; fill: var(--theme-color, #16a34a); flex-shrink: 0; } .archive-desc-content { font-size: 0.9rem; line-height: 2; color: var(--text-secondary, #555); text-align: justify; text-align-last: right; } .archive-desc-content p { margin-bottom: 0.8em; } .archive-desc-content p:last-child { margin-bottom: 0; } .archive-empty-msg { text-align: center; padding: 40px 20px; color: var(--text-muted, #737373); font-size: 0.95rem; font-weight: 600; } body.dark-mode .archive-desc-box { background: var(--bg-light, #23272f) !important; border-color: var(--border-color, rgba(255,255,255,0.08)) !important; } @media (max-width: 767px) { .archive-main-section { padding: 10px; border-radius: 12px; } .archive-desc-box { padding: 10px 7px; } .archive-desc-box::before { width: 3px; } .archive-desc-title { font-size: 0.9rem; } .archive-desc-content { font-size: 0.85rem; line-height: 1.9; } } /* source: search.php */ .search-results-section { background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 14px; padding: 20px 16px; margin-bottom: 20px; } .search-results-header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid rgba(0,0,0,0.05); flex-wrap: wrap; } .search-results-icon { width: 24px; height: 24px; fill: var(--theme-color, #16a34a); flex-shrink: 0; } .search-results-title { font-size: 1.05rem; font-weight: 800; color: #222; margin: 0; line-height: 1.5; } .search-results-query { color: var(--theme-color-safe, var(--theme-color, #16a34a)); } .search-results-count { font-size: 0.75rem; font-weight: 600; background: #f0f2f5; color: #666; padding: 3px 10px; border-radius: 10px; margin-right: auto; white-space: nowrap; } .search-no-results { text-align: center; padding: 40px 20px; } .search-no-results-icon { width: 80px; height: 80px; fill: #ddd; margin-bottom: 16px; } .search-no-results-title { font-size: 1.1rem; font-weight: 700; color: #444; margin-bottom: 8px; } .search-no-results-desc { font-size: 0.85rem; color: #999; line-height: 1.7; margin-bottom: 20px; } .search-retry-form { position: relative; max-width: 400px; margin: 0 auto; } .search-retry-input { width: 100%; padding: 12px 48px 12px 18px; border: 1.5px solid #e8eaed; border-radius: 50px; font-size: 0.88rem; background: #fafbfc; outline: none; transition: all 0.25s ease; font-family: inherit; box-sizing: border-box; } .search-retry-input:focus { border-color: var(--theme-color, #16a34a); background: #fff; box-shadow: 0 0 0 3px rgba(22,163,74,0.08); } .search-retry-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: var(--theme-color, #16a34a); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: filter 0.2s; } .search-retry-btn:hover { filter: brightness(1.1); } .search-retry-btn svg { width: 16px; height: 16px; fill: #fff; } .search-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 24px; flex-wrap: wrap; } .search-pagination a, .search-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px; font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: all 0.2s ease; border: 1.5px solid #e8eaed; color: #555; background: #fff; } .search-pagination a:hover { border-color: var(--theme-color, #16a34a); color: var(--theme-color, #16a34a); background: rgba(22,163,74,0.04); } .search-pagination .current { background: var(--theme-color, #16a34a); border-color: var(--theme-color, #16a34a); color: #fff; } @media (max-width: 767px) { .search-results-section { padding: 14px 12px; border-radius: 12px; } .search-results-title { font-size: 0.95rem; } .search-results-header { gap: 8px; } .search-no-results { padding: 30px 16px; } .search-no-results-icon { width: 60px; height: 60px; } } /* source: archive-news.php */ :root { --vn-bg: var(--bg-light, #f6f7fb); --vn-card: var(--bg-card, #ffffff); --vn-text: var(--text-primary, #111827); --vn-text-2: var(--text-secondary, #667085); --vn-muted: var(--text-muted, #98a2b3); --vn-line: var(--border-color, rgba(17,24,39,.08)); --vn-accent: var(--theme-color, #16a34a); --vn-accent-2: color-mix(in srgb, var(--vn-accent) 64%, #6d28d9); --vn-radius-xl: 30px; --vn-radius-lg: 22px; --vn-radius-md: 16px; --vn-shadow-sm: 0 8px 28px rgba(15,23,42,.06); --vn-shadow: 0 20px 60px rgba(15,23,42,.10); --vn-ease: .28s cubic-bezier(.2,.7,.2,1); } body.dark-mode { --vn-bg: var(--bg-light, #111318); --vn-card: var(--bg-card, #1b1f27); --vn-text: var(--text-primary, #f5f7fb); --vn-text-2: var(--text-secondary, #b3bac7); --vn-muted: var(--text-muted, #7f8897); --vn-line: var(--border-color, rgba(255,255,255,.08)); --vn-shadow-sm: 0 8px 28px rgba(0,0,0,.18); --vn-shadow: 0 20px 60px rgba(0,0,0,.28); } .vn-page, .vn-page * { box-sizing:border-box; } #content.site-content, #primary.content-area { width:100%; max-width:100%; min-width:0; } .vn-page { position:relative; width:100%; max-width:1280px; min-width:0; margin:0 auto; padding:24px 18px 56px; overflow-x:hidden; color:var(--vn-text); } .vn-page::before { content:''; position:absolute; z-index:-1; top:-90px; left:-140px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--vn-accent) 14%,transparent),transparent 70%); } .vn-head { position:relative; overflow:hidden; margin-bottom:20px; padding:27px 30px; border:1px solid var(--vn-line); border-radius:var(--vn-radius-xl); background:linear-gradient(135deg,color-mix(in srgb,var(--vn-accent) 10%,var(--vn-card)),var(--vn-card) 62%); box-shadow:var(--vn-shadow-sm); } .vn-head::after { content:''; position:absolute; left:-90px; bottom:-130px; width:310px; height:310px; border-radius:50%; border:56px solid color-mix(in srgb,var(--vn-accent) 7%,transparent); pointer-events:none; } .vn-head-row { position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; gap:18px; min-width:0; } .vn-title-wrap { min-width:0; max-width:100%; } .vn-title-wrap small { display:flex; align-items:center; gap:8px; margin-bottom:8px; color:var(--vn-accent); font-size:.68rem; font-weight:900; } .vn-title-wrap small::before { content:''; width:9px; height:9px; border-radius:99px; background:var(--vn-accent); box-shadow:0 0 0 6px color-mix(in srgb,var(--vn-accent) 12%,transparent); } .vn-title-wrap h1 { max-width:100%; overflow-wrap:anywhere; word-break:break-word; margin:0; color:var(--vn-text); font-size:clamp(1.45rem,3vw,2.15rem); line-height:1.35; font-weight:950; letter-spacing:-.035em; } .vn-title-wrap p { max-width:740px; margin:9px 0 0; color:var(--vn-text-2); font-size:.82rem; line-height:1.9; font-weight:560; } .vn-archive-desc { max-width:760px; margin:10px 0 0; color:var(--vn-text-2); font-size:.82rem; line-height:1.95; font-weight:560; } .vn-count { flex:0 0 auto; min-width:120px; padding:13px 16px; border:1px solid var(--vn-line); border-radius:17px; background:color-mix(in srgb,var(--vn-card) 90%,transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); text-align:center; } .vn-count strong { display:block; color:var(--vn-text); font-size:1.2rem; font-weight:950; } .vn-count span { display:block; margin-top:3px; color:var(--vn-muted); font-size:.64rem; font-weight:800; } .vn-ad { width:100%; max-width:100%; min-width:0; margin:16px 0; overflow:hidden; } .vn-ad img, .vn-ad iframe, .vn-ad video, .vn-ad ins { max-width:100% !important; } .vn-ad iframe { width:100% !important; } .vn-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } .vn-card { position:relative; overflow:hidden; display:flex; flex-direction:column; min-width:0; border:1px solid var(--vn-line); border-radius:var(--vn-radius-lg); background:var(--vn-card); box-shadow:var(--vn-shadow-sm); transition:var(--vn-ease); } .vn-card:hover { transform:translateY(-5px); border-color:color-mix(in srgb,var(--vn-accent) 32%,var(--vn-line)); box-shadow:var(--vn-shadow); } .vn-card-media { position:relative; display:block; overflow:hidden; aspect-ratio:16/9; background:linear-gradient(135deg,color-mix(in srgb,var(--vn-accent) 10%,var(--vn-card)),var(--vn-bg)); } .vn-card-media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .65s cubic-bezier(.2,.7,.2,1); } .vn-card:hover .vn-card-media img { transform:scale(1.06); } .vn-card-media::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(3,7,18,.28)); pointer-events:none; } .vn-tag { position:absolute; z-index:2; top:12px; right:12px; display:inline-flex; max-width:75%; padding:6px 10px; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(17,24,39,.62); color:#fff; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font-size:.62rem; font-weight:850; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .vn-card-body { display:flex; flex-direction:column; flex:1; padding:16px; } .vn-card h2 { margin:0 0 9px; color:var(--vn-text); font-size:.94rem; line-height:1.7; font-weight:900; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color var(--vn-ease); } .vn-card h2 a { color:inherit; text-decoration:none; } .vn-card:hover h2 { color:var(--vn-accent); } .vn-excerpt { margin:0 0 14px; color:var(--vn-text-2); font-size:.75rem; line-height:1.85; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .vn-meta { margin-top:auto; padding-top:12px; border-top:1px solid var(--vn-line); display:flex; flex-wrap:wrap; gap:10px; color:var(--vn-muted); font-size:.64rem; font-weight:700; } .vn-meta span { display:inline-flex; align-items:center; gap:5px; } .vn-meta svg { width:12px; height:12px; fill:currentColor; } .vn-card:nth-child(1) { grid-column:span 2; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr); min-height:320px; } .vn-card:nth-child(1) .vn-card-media { aspect-ratio:auto; height:100%; } .vn-card:nth-child(1) .vn-card-body { justify-content:center; padding:24px; } .vn-card:nth-child(1) h2 { font-size:1.18rem; -webkit-line-clamp:3; } .vn-card:nth-child(1) .vn-excerpt { font-size:.8rem; -webkit-line-clamp:3; } .vn-empty { min-height:220px; display:flex; align-items:center; justify-content:center; padding:25px; border:1px dashed var(--vn-line); border-radius:var(--vn-radius-lg); background:var(--vn-card); color:var(--vn-text-2); text-align:center; font-size:.84rem; font-weight:750; } .vn-pagination { margin-top:28px; display:flex; justify-content:center; } .vn-pagination .pagination, .vn-pagination .page-numbers, .vn-pagination ul.page-numbers { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; } .vn-pagination ul.page-numbers { margin:0; padding:0; list-style:none; } .vn-pagination a.page-numbers, .vn-pagination span.page-numbers, .vn-pagination .pagination a, .vn-pagination .pagination span { display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px; margin:0 !important; border:1px solid var(--vn-line) !important; border-radius:12px !important; background:var(--vn-card) !important; color:var(--vn-text-2) !important; box-shadow:var(--vn-shadow-sm); text-decoration:none !important; font-size:.75rem; font-weight:850; transition:var(--vn-ease); } .vn-pagination a:hover { color:var(--vn-accent) !important; border-color:color-mix(in srgb,var(--vn-accent) 35%,var(--vn-line)) !important; transform:translateY(-2px); } .vn-pagination .current, .vn-pagination .active { border-color:transparent !important; background:linear-gradient(135deg,var(--vn-accent),var(--vn-accent-2)) !important; color:#fff !important; } .vn-footnote { margin-top:30px; padding:20px; border:1px solid var(--vn-line); border-radius:var(--vn-radius-lg); background:linear-gradient(135deg,color-mix(in srgb,var(--vn-accent) 7%,var(--vn-card)),var(--vn-card)); color:var(--vn-text-2); text-align:center; font-size:.75rem; font-weight:650; } @media (max-width: 1024px) { .vn-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .vn-card:nth-child(1) { grid-column:1/-1; } } @media (max-width: 767px) { #content.site-content, #primary.content-area { overflow-x:hidden; } .vn-page { width:100%; max-width:100%; padding:12px 10px 38px; overflow-x:hidden; } .vn-page::before { top:-46px; left:-74px; width:220px; height:220px; opacity:.72; } .vn-head { width:100%; max-width:100%; min-width:0; padding:19px 16px; border-radius:20px; } .vn-head::after { left:-80px; bottom:-120px; width:230px; height:230px; border-width:42px; } .vn-head-row { width:100%; max-width:100%; min-width:0; align-items:flex-start; flex-direction:column; gap:14px; } .vn-title-wrap, .vn-title-wrap h1, .vn-title-wrap p, .vn-archive-desc { width:100%; max-width:100%; min-width:0; } .vn-count { min-width:0; width:100%; max-width:100%; display:flex; align-items:center; justify-content:space-between; text-align:right; } .vn-count span { margin:0; } .vn-grid { width:100%; max-width:100%; min-width:0; grid-template-columns:minmax(0,1fr); gap:11px; } .vn-card, .vn-card:nth-child(1) { width:100%; max-width:100%; min-width:0; } .vn-card:nth-child(1) { display:flex; min-height:0; } .vn-card:nth-child(1) .vn-card-media { width:100%; aspect-ratio:16/9; height:auto; } .vn-card:nth-child(1) .vn-card-body { width:100%; min-width:0; padding:16px; } .vn-card:nth-child(1) h2 { font-size:.96rem; -webkit-line-clamp:2; } .vn-card:nth-child(1) .vn-excerpt { font-size:.75rem; -webkit-line-clamp:2; } .vn-card-body, .vn-meta, .vn-pagination { min-width:0; max-width:100%; } .vn-pagination .pagination, .vn-pagination .page-numbers, .vn-pagination ul.page-numbers { max-width:100%; } } @media (max-width: 420px) { .vn-page { padding-left:8px; padding-right:8px; } .vn-head { padding:17px 14px; border-radius:18px; } .vn-title-wrap h1 { font-size:1.35rem; } .vn-card-body { padding:14px; } .vn-pagination a.page-numbers, .vn-pagination span.page-numbers, .vn-pagination .pagination a, .vn-pagination .pagination span { min-width:34px; height:36px; padding:0 9px; } } /* source: archive-articles.php */ :root { --vm-bg: var(--bg-light, #f6f7fb); --vm-card: var(--bg-card, #ffffff); --vm-card-2: color-mix(in srgb, var(--vm-card) 92%, var(--vm-accent) 8%); --vm-text: var(--text-primary, #111827); --vm-text-2: var(--text-secondary, #667085); --vm-muted: var(--text-muted, #98a2b3); --vm-line: var(--border-color, rgba(17,24,39,.08)); --vm-accent: var(--theme-color, #16a34a); --vm-accent-2: color-mix(in srgb, var(--vm-accent) 66%, #6d28d9); --vm-success: #12b76a; --vm-warning: #f79009; --vm-radius-xl: 30px; --vm-radius-lg: 22px; --vm-radius-md: 16px; --vm-radius-sm: 12px; --vm-shadow-sm: 0 8px 28px rgba(15,23,42,.06); --vm-shadow: 0 20px 60px rgba(15,23,42,.10); --vm-shadow-accent: 0 18px 42px color-mix(in srgb, var(--vm-accent) 24%, transparent); --vm-ease: .28s cubic-bezier(.2,.7,.2,1); } body.dark-mode { --vm-bg: var(--bg-light, #111318); --vm-card: var(--bg-card, #1b1f27); --vm-text: var(--text-primary, #f5f7fb); --vm-text-2: var(--text-secondary, #b3bac7); --vm-muted: var(--text-muted, #7f8897); --vm-line: var(--border-color, rgba(255,255,255,.08)); --vm-shadow-sm: 0 8px 28px rgba(0,0,0,.18); --vm-shadow: 0 20px 60px rgba(0,0,0,.28); } .vm-shell, .vm-shell * { box-sizing: border-box; } .vm-shell { position: relative; max-width: 1280px; margin: 0 auto; padding: 24px 18px 56px; color: var(--vm-text); } .vm-shell::before { content: ''; position: absolute; z-index: -1; top: -80px; right: -140px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--vm-accent) 16%, transparent), transparent 70%); pointer-events: none; } .vm-topbar { display: flex; align-items: stretch; justify-content: space-between; gap: 18px; margin-bottom: 18px; } .vm-intro { position: relative; flex: 1; overflow: hidden; min-height: 160px; padding: 28px 30px; border: 1px solid var(--vm-line); border-radius: var(--vm-radius-xl); background: linear-gradient(135deg, color-mix(in srgb, var(--vm-accent) 10%, var(--vm-card)), var(--vm-card) 55%), var(--vm-card); box-shadow: var(--vm-shadow-sm); } .vm-intro::after { content: ''; position: absolute; left: -70px; bottom: -95px; width: 260px; height: 260px; border-radius: 50%; border: 45px solid color-mix(in srgb, var(--vm-accent) 8%, transparent); pointer-events: none; } .vm-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--vm-accent); font-size: .72rem; font-weight: 900; letter-spacing: .02em; } .vm-kicker::before { content: ''; width: 9px; height: 9px; border-radius: 99px; background: var(--vm-accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--vm-accent) 12%, transparent); } .vm-intro h1 { margin: 0 0 8px; font-size: clamp(1.65rem, 3vw, 2.45rem); line-height: 1.25; font-weight: 950; letter-spacing: -.04em; color: var(--vm-text); } .vm-intro h1 span { color: var(--vm-accent); } .vm-intro p { position: relative; z-index: 1; max-width: 700px; margin: 0; color: var(--vm-text-2); font-size: .91rem; line-height: 1.9; font-weight: 550; } .vm-stats { width: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; margin-top: 22px; padding: 13px 16px; border-top: 1px solid var(--vm-line); border-bottom: 1px solid var(--vm-line); } .vm-stat { position: relative; display: inline-flex; align-items: baseline; justify-content: center; gap: 7px; min-height: 0; padding: 2px 22px; background: transparent; box-shadow: none; } .vm-stat + .vm-stat::before { content: ''; position: absolute; right: 0; top: 50%; width: 1px; height: 18px; background: var(--vm-line); transform: translateY(-50%); } .vm-stat strong { font-size: .92rem; line-height: 1; font-weight: 900; color: var(--vm-text); } .vm-stat span { margin: 0; color: var(--vm-muted); font-size: .68rem; line-height: 1.5; font-weight: 700; } .vm-cats { display: flex; align-items: center; gap: 8px; overflow-x: auto; margin: 0 0 20px; padding: 4px 2px 8px; scrollbar-width: none; } .vm-cats::-webkit-scrollbar { display:none; } .vm-cat { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 15px; border: 1px solid var(--vm-line); border-radius: 999px; background: var(--vm-card); color: var(--vm-text-2); text-decoration: none; font-size: .77rem; font-weight: 800; transition: var(--vm-ease); } .vm-cat:hover, .vm-cat.is-active { transform: translateY(-2px); border-color: transparent; background: var(--vm-accent); color: #fff; box-shadow: var(--vm-shadow-accent); } .vm-cat b { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); font-size: .65rem; } .vm-hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(340px, .95fr); gap: 14px; margin-bottom: 26px; } .vm-feature, .vm-mini { position: relative; display: block; overflow: hidden; border: 1px solid color-mix(in srgb, var(--vm-line) 70%, transparent); background: var(--vm-card); text-decoration: none; isolation: isolate; } .vm-feature { min-height: 510px; border-radius: var(--vm-radius-xl); box-shadow: var(--vm-shadow); } .vm-feature img, .vm-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .75s cubic-bezier(.2,.7,.2,1), filter .4s ease; } .vm-feature:hover img, .vm-mini:hover img { transform: scale(1.055); } .vm-feature::after, .vm-mini::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(3,7,18,.02) 15%, rgba(3,7,18,.32) 52%, rgba(3,7,18,.94) 100%); } .vm-feature-body { position: absolute; z-index: 2; inset: auto 0 0; padding: 34px; color: #fff; } .vm-label { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; padding: 6px 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: .68rem; font-weight: 850; } .vm-feature h2 { max-width: 850px; margin: 0 0 12px; color: #fff; font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.48; font-weight: 950; letter-spacing: -.03em; } .vm-feature p { max-width: 760px; margin: 0 0 16px; color: rgba(255,255,255,.78); font-size: .86rem; line-height: 1.9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: inherit; font-size: .69rem; font-weight: 700; opacity: .9; } .vm-meta span { display:inline-flex; align-items:center; gap:5px; } .vm-meta svg { width: 13px; height: 13px; fill: currentColor; } .vm-hero-side { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; } .vm-mini { min-height: 248px; border-radius: var(--vm-radius-lg); box-shadow: var(--vm-shadow-sm); } .vm-mini-body { position: absolute; z-index: 2; inset: auto 0 0; padding: 15px; color:#fff; } .vm-mini h3 { margin: 0 0 7px; color:#fff; font-size: .83rem; line-height: 1.62; font-weight: 850; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vm-mini-rank { position:absolute; z-index:3; top:12px; right:12px; display:flex; align-items:center; justify-content:center; width:31px; height:31px; border-radius:11px; background: rgba(255,255,255,.92); color: var(--vm-accent); box-shadow: 0 8px 22px rgba(0,0,0,.18); font-size:.72rem; font-weight:950; } .vm-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin: 30px 0 14px; } .vm-section-title { min-width:0; } .vm-section-title small { display:block; margin-bottom:4px; color:var(--vm-accent); font-size:.66rem; font-weight:900; } .vm-section-title h2 { margin:0; color:var(--vm-text); font-size:1.16rem; font-weight:950; letter-spacing:-.02em; } .vm-all-link { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; color:var(--vm-text-2); text-decoration:none; font-size:.75rem; font-weight:800; transition:var(--vm-ease); } .vm-all-link:hover { color:var(--vm-accent); transform:translateX(-3px); } .vm-all-link svg { width:14px; height:14px; fill:currentColor; } .vm-trending { display:grid; grid-template-columns: repeat(6, minmax(190px, 1fr)); gap:10px; overflow-x:auto; padding: 2px 2px 10px; scrollbar-width:thin; } .vm-trend { min-width:190px; display:flex; align-items:center; gap:12px; min-height:92px; padding:13px; border:1px solid var(--vm-line); border-radius:var(--vm-radius-md); background:var(--vm-card); box-shadow:var(--vm-shadow-sm); text-decoration:none; transition:var(--vm-ease); } .vm-trend:hover { transform:translateY(-4px); border-color:color-mix(in srgb, var(--vm-accent) 35%, var(--vm-line)); } .vm-trend-num { flex:0 0 auto; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:13px; background:color-mix(in srgb, var(--vm-accent) 9%, var(--vm-card)); color:var(--vm-accent); font-size:1rem; font-weight:950; } .vm-trend-body { min-width:0; } .vm-trend h3 { margin:0 0 7px; color:var(--vm-text); font-size:.76rem; line-height:1.55; font-weight:820; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .vm-trend small { color:var(--vm-muted); font-size:.65rem; font-weight:700; } .vm-list { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; } .vm-article { position:relative; display:grid; grid-template-columns: 128px minmax(0,1fr); gap:16px; min-height:142px; padding:12px; border:1px solid var(--vm-line); border-radius:var(--vm-radius-lg); background:var(--vm-card); box-shadow:var(--vm-shadow-sm); text-decoration:none; transition:var(--vm-ease); } .vm-article:hover { transform:translateY(-4px); border-color:color-mix(in srgb, var(--vm-accent) 32%, var(--vm-line)); box-shadow:var(--vm-shadow); } .vm-thumb { position:relative; overflow:hidden; width:128px; height:118px; border-radius:16px; background:linear-gradient(135deg, color-mix(in srgb, var(--vm-accent) 11%, var(--vm-card)), var(--vm-bg)); } .vm-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; } .vm-article:hover .vm-thumb img { transform:scale(1.06); } .vm-thumb::after { content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); border-radius:inherit; pointer-events:none; } .vm-article-body { min-width:0; padding:4px 4px 2px 0; } .vm-article-top { display:flex; align-items:center; gap:8px; margin-bottom:8px; } .vm-article-cat { display:inline-flex; max-width:140px; padding:4px 9px; border-radius:999px; background:color-mix(in srgb, var(--vm-accent) 9%, transparent); color:var(--vm-accent); font-size:.62rem; font-weight:850; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .vm-badge { display:inline-flex; padding:4px 8px; border-radius:999px; color:#fff; font-size:.59rem; font-weight:900; } .vm-badge.new { background:var(--vm-accent); } .vm-badge.update { background:var(--vm-success); } .vm-badge.hot { background:var(--vm-warning); } .vm-article h3 { margin:0 0 10px; color:var(--vm-text); font-size:.93rem; line-height:1.65; font-weight:900; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color var(--vm-ease); } .vm-article:hover h3 { color:var(--vm-accent); } .vm-article .vm-meta { color:var(--vm-muted); font-size:.65rem; opacity:1; } .vm-pagination-wrap { display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:28px; } .vm-page-info { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; padding:9px 15px; border:1px solid var(--vm-line); border-radius:999px; background:var(--vm-card); color:var(--vm-text-2); box-shadow:var(--vm-shadow-sm); font-size:.71rem; font-weight:750; } .vm-page-info strong { color:var(--vm-accent); font-weight:950; } .vm-pages { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; } .vm-page { display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px; border:1px solid var(--vm-line); border-radius:12px; background:var(--vm-card); color:var(--vm-text-2); text-decoration:none; font-size:.76rem; font-weight:850; box-shadow:var(--vm-shadow-sm); transition:var(--vm-ease); } .vm-page:hover { color:var(--vm-accent); border-color:color-mix(in srgb, var(--vm-accent) 35%, var(--vm-line)); transform:translateY(-2px); } .vm-page.current { color:#fff; border-color:transparent; background:linear-gradient(135deg,var(--vm-accent),var(--vm-accent-2)); box-shadow:var(--vm-shadow-accent); } .vm-page.disabled { opacity:.35; pointer-events:none; } .vm-dots { padding:0 3px; color:var(--vm-muted); font-weight:900; } .vm-load-more { position:relative; display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 22px; border:0; border-radius:15px; background:linear-gradient(135deg,var(--vm-accent),var(--vm-accent-2)); color:#fff; box-shadow:var(--vm-shadow-accent); font-family:inherit; font-size:.78rem; font-weight:900; cursor:pointer; overflow:hidden; transition:var(--vm-ease); } .vm-load-more:hover { transform:translateY(-3px); } .vm-load-more.loading { opacity:.72; pointer-events:none; } .vm-load-more svg { width:16px; height:16px; fill:currentColor; } .vm-load-more.loading svg { animation:vm-spin .8s linear infinite; } .vm-load-more b { padding:3px 9px; border-radius:999px; background:rgba(255,255,255,.18); font-size:.67rem; } @keyframes vm-spin { to { transform:rotate(360deg); } } .vm-end, .vm-empty { display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 18px; border:1px dashed var(--vm-line); border-radius:16px; background:var(--vm-card); color:var(--vm-text-2); font-size:.76rem; font-weight:800; } .vm-empty { min-height:180px; margin-top:18px; } .vm-end svg { width:16px; height:16px; fill:var(--vm-success); } .vm-outro { position:relative; overflow:hidden; margin-top:36px; padding:28px; border:1px solid var(--vm-line); border-radius:var(--vm-radius-xl); background: linear-gradient(135deg, color-mix(in srgb, var(--vm-accent) 10%, var(--vm-card)), var(--vm-card) 65%); box-shadow:var(--vm-shadow-sm); text-align:center; } .vm-outro::before { content:''; position:absolute; width:240px; height:240px; left:-90px; top:-140px; border-radius:50%; background:color-mix(in srgb, var(--vm-accent) 9%, transparent); } .vm-outro strong { position:relative; display:block; margin-bottom:7px; color:var(--vm-text); font-size:1.12rem; font-weight:950; } .vm-outro span { position:relative; color:var(--vm-text-2); font-size:.8rem; font-weight:600; } @media (max-width: 1100px) { .vm-topbar { flex-direction:column; } .vm-hero { grid-template-columns:1fr; } .vm-feature { min-height:430px; } .vm-hero-side { grid-template-columns:repeat(4,1fr); grid-template-rows:1fr; } .vm-mini { min-height:210px; } .vm-list { grid-template-columns:1fr; } } @media (max-width: 767px) { .vm-shell { padding:14px 12px 38px; } .vm-intro { min-height:auto; padding:22px 20px; border-radius:22px; } .vm-intro h1 { font-size:1.55rem; } .vm-intro p { font-size:.82rem; } .vm-stats { margin-top:18px; padding:11px 8px; } .vm-stat { flex:1 1 30%; padding:2px 10px; gap:5px; } .vm-stat strong { font-size:.84rem; } .vm-stat span { font-size:.62rem; } .vm-cats { margin-bottom:14px; } .vm-cat { min-height:38px; padding:0 13px; font-size:.72rem; } .vm-feature { min-height:355px; border-radius:20px; } .vm-feature-body { padding:22px; } .vm-feature h2 { font-size:1.18rem; } .vm-feature p { display:none; } .vm-hero-side { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; } .vm-mini { min-height:155px; border-radius:16px; } .vm-mini h3 { font-size:.72rem; } .vm-section-head { margin-top:24px; } .vm-trending { grid-template-columns:repeat(6, 210px); } .vm-article { grid-template-columns:92px minmax(0,1fr); min-height:116px; gap:12px; padding:10px; border-radius:17px; } .vm-thumb { width:92px; height:94px; border-radius:13px; } .vm-article-body { padding-top:1px; } .vm-article h3 { margin-bottom:7px; font-size:.8rem; line-height:1.55; } .vm-article .vm-meta span:nth-child(3) { display:none; } .vm-page { min-width:36px; height:36px; padding:0 10px; } } @media (max-width: 480px) { .vm-stats { justify-content:space-between; padding:10px 0; } .vm-stat { flex:1 1 33.333%; padding:2px 6px; flex-direction:column; align-items:center; gap:3px; text-align:center; } .vm-stat + .vm-stat::before { height:24px; } .vm-feature { min-height:300px; } .vm-feature-body { padding:18px; } .vm-hero-side { gap:9px; } .vm-mini { min-height:125px; } .vm-mini-body { padding:10px; } .vm-mini-rank { width:26px; height:26px; top:8px; right:8px; border-radius:9px; } .vm-article { grid-template-columns:78px minmax(0,1fr); } .vm-thumb { width:78px; height:84px; } .vm-article-cat { display:none; } .vm-article .vm-meta span:nth-child(2) { display:none; } .vm-page.optional { display:none; } }

/* BaziAndroid 4.0.34 — magazine/news taxonomy hub controls */
.vm-hub-tools,.vn-hub-tools{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 20px;padding:14px 16px;border:1px solid var(--border-color,rgba(17,24,39,.08));border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--theme-color,#16a34a) 7%,var(--bg-card,#fff)),var(--bg-card,#fff));box-shadow:0 8px 24px rgba(15,23,42,.04)}
.vm-hub-tools>div,.vn-hub-tools>div{min-width:0;display:flex;align-items:center;gap:9px;flex-wrap:wrap}.vm-hub-tools strong,.vn-hub-tools strong{margin:0!important;color:var(--text-primary,#1f2937)!important;font-size:.82rem!important;line-height:1.6!important;font-weight:900!important}.vm-hub-tools span,.vn-hub-tools span{color:var(--text-secondary,#667085)!important;font-size:.72rem!important;line-height:1.7!important;font-weight:600!important}.vm-hub-tools>a,.vn-hub-tools>a{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 12px;border:1px solid color-mix(in srgb,var(--theme-color,#16a34a) 24%,transparent);border-radius:11px;background:color-mix(in srgb,var(--theme-color,#16a34a) 8%,transparent);color:var(--theme-color,#16a34a);text-decoration:none;font-size:.69rem;font-weight:850;transition:.22s ease}.vm-hub-tools>a:hover,.vn-hub-tools>a:hover{transform:translateY(-1px);background:var(--theme-color,#16a34a);color:#fff;border-color:var(--theme-color,#16a34a)}
.vn-cats{display:flex;align-items:center;gap:8px;overflow-x:auto;margin:0 0 20px;padding:4px 2px 8px;scrollbar-width:none}.vn-cats::-webkit-scrollbar{display:none}.vn-cat{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 15px;border:1px solid var(--vn-line,rgba(17,24,39,.08));border-radius:999px;background:var(--vn-card,#fff);color:var(--vn-text-2,#667085);text-decoration:none;font-size:.77rem;font-weight:800;transition:var(--vn-ease,.25s ease)}.vn-cat:hover,.vn-cat.is-active{transform:translateY(-2px);border-color:transparent;background:var(--vn-accent,var(--theme-color,#16a34a));color:#fff;box-shadow:0 10px 26px color-mix(in srgb,var(--vn-accent,var(--theme-color,#16a34a)) 18%,transparent)}.vn-cat b{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:color-mix(in srgb,currentColor 12%,transparent);font-size:.65rem}
body.dark-mode .vm-hub-tools,body.dark-mode .vn-hub-tools{box-shadow:0 8px 26px rgba(0,0,0,.18)}
@media(max-width:767px){.vm-hub-tools,.vn-hub-tools{align-items:flex-start;flex-direction:column;margin-bottom:14px;padding:12px;border-radius:14px}.vm-hub-tools>div,.vn-hub-tools>div{display:block}.vm-hub-tools strong,.vn-hub-tools strong{display:block;font-size:.77rem!important}.vm-hub-tools span,.vn-hub-tools span{display:block;margin-top:3px;font-size:.68rem!important}.vm-hub-tools>a,.vn-hub-tools>a{width:100%;min-height:34px}.vn-cat{min-height:38px;padding:0 13px;font-size:.72rem}}

/* =========================================================
   BaziAndroid 4.0.48 — archive/news layout recovery
   These selectors belong to the redesigned templates and were
   previously missing from the generated archive bundle.
   ========================================================= */
.ba-archive-shell{width:100%;min-width:0;padding:0 0 28px}
.ba-archive-countline{display:flex;align-items:center;gap:9px;min-height:48px;margin:0 0 13px;padding:10px 13px;border:1px solid var(--border-color,rgba(15,23,42,.07));border-radius:14px;background:var(--bg-card,#fff);color:var(--text-secondary,#667085);box-shadow:0 6px 22px rgba(15,23,42,.035)}
.ba-archive-countline-icon{display:grid;place-items:center;width:29px;height:29px;flex:0 0 29px;border-radius:9px;background:color-mix(in srgb,var(--theme-color,#16a34a) 10%,var(--bg-card,#fff));color:var(--theme-color,#16a34a);font-size:.72rem;font-weight:950}
.ba-archive-countline strong{min-width:0;color:var(--text-primary,#1f2937);font-size:.8rem;font-weight:900;line-height:1.75}
.ba-archive-countline small{margin-right:auto;flex:0 0 auto;color:var(--text-muted,#98a2b3);font-size:.64rem;font-weight:750}
.ba-archive-subcats{display:flex;align-items:center;gap:7px;overflow-x:auto;margin:0 0 14px;padding:2px 1px 7px;scrollbar-width:none}.ba-archive-subcats::-webkit-scrollbar{display:none}
.ba-archive-subcats a{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border:1px solid var(--border-color,rgba(15,23,42,.07));border-radius:999px;background:var(--bg-card,#fff);color:var(--text-secondary,#667085)!important;text-decoration:none!important;font-size:.69rem;font-weight:850;transition:.2s ease}
.ba-archive-subcats a:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--theme-color,#16a34a) 34%,var(--border-color,rgba(15,23,42,.07)));color:var(--theme-color,#16a34a)!important}
.ba-archive-subcats b{display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:color-mix(in srgb,var(--theme-color,#16a34a) 8%,transparent);font-size:.59rem}
.ba-archive-ad{width:100%;max-width:100%;overflow:hidden;margin:12px 0}.ba-archive-ad img,.ba-archive-ad iframe,.ba-archive-ad video,.ba-archive-ad ins{max-width:100%!important}
.ba-archive-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:17px 0 11px;padding:0 2px}
.ba-archive-section-head>div{min-width:0}.ba-archive-section-head small{display:block;margin-bottom:2px;color:var(--theme-color,#16a34a);font-size:.61rem;font-weight:900}.ba-archive-section-head h2{margin:0!important;color:var(--text-primary,#1f2937)!important;font-size:1.02rem!important;line-height:1.6!important;font-weight:950!important}.ba-archive-section-head>span{flex:0 0 auto;padding:5px 9px;border-radius:999px;background:var(--bg-light,#f5f7f8);color:var(--text-muted,#98a2b3);font-size:.61rem;font-weight:800}
.ba-archive-grid{margin-right:-6px!important;margin-left:-6px!important;row-gap:12px}.ba-archive-grid>[class*=col-]{padding-right:6px!important;padding-left:6px!important}
.ba-archive-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:180px;padding:28px;border:1px dashed var(--border-color,rgba(15,23,42,.09));border-radius:17px;background:var(--bg-card,#fff);text-align:center}.ba-archive-empty strong{color:var(--text-primary,#1f2937);font-size:.9rem}.ba-archive-empty span{margin-top:5px;color:var(--text-muted,#98a2b3);font-size:.72rem}
.ba-archive-pagination{display:flex;justify-content:center;margin-top:22px}
.ba-archive-about{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;margin-top:24px;padding:18px;border:1px solid var(--border-color,rgba(15,23,42,.07));border-radius:17px;background:linear-gradient(135deg,color-mix(in srgb,var(--theme-color,#16a34a) 4%,var(--bg-card,#fff)),var(--bg-card,#fff))}
.ba-archive-about-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--theme-color,#16a34a);color:#fff;font-size:.82rem;font-weight:950}.ba-archive-about h2{margin:0 0 7px!important;color:var(--text-primary,#1f2937)!important;font-size:.9rem!important;font-weight:950!important}.ba-archive-about .entry-content{color:var(--text-secondary,#667085);font-size:.76rem;line-height:2;text-align:justify}

/* News archive hero — keep featured media contained and responsive. */
.vn-hero{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,.75fr);gap:12px;margin:0 0 18px;min-width:0}
.vn-hero-main{position:relative;display:block;overflow:hidden;min-width:0;min-height:410px;border:1px solid var(--vn-line,rgba(17,24,39,.08));border-radius:24px;background:var(--vn-card,#fff);box-shadow:var(--vn-shadow-sm,0 8px 28px rgba(15,23,42,.06));text-decoration:none!important}
.vn-hero-main>img{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;object-position:center;margin:0!important}
.vn-hero-overlay{position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(3,7,18,.05) 25%,rgba(3,7,18,.82) 100%)}
.vn-hero-copy{position:absolute;z-index:2;right:0;left:0;bottom:0;padding:25px;color:#fff;text-align:right}.vn-hero-copy>span{display:inline-flex;margin-bottom:8px;padding:5px 9px;border:1px solid rgba(255,255,255,.23);border-radius:999px;background:rgba(0,0,0,.24);backdrop-filter:blur(8px);font-size:.62rem;font-weight:850}.vn-hero-copy h2{margin:0!important;color:#fff!important;font-size:clamp(1.05rem,2vw,1.55rem)!important;line-height:1.65!important;font-weight:950!important}.vn-hero-copy p{max-width:720px;margin:7px 0 0;color:rgba(255,255,255,.82);font-size:.75rem;line-height:1.9}
.vn-hero-side{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:9px;min-width:0}.vn-hero-side>a{display:grid;grid-template-columns:102px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-content:center;min-width:0;overflow:hidden;padding:8px;border:1px solid var(--vn-line,rgba(17,24,39,.08));border-radius:16px;background:var(--vn-card,#fff);color:inherit!important;text-decoration:none!important;box-shadow:var(--vn-shadow-sm,0 8px 28px rgba(15,23,42,.06));transition:.2s ease}.vn-hero-side>a:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--vn-accent,#16a34a) 30%,var(--vn-line,rgba(17,24,39,.08)))}
.vn-hero-side-img{grid-row:1/3;width:102px;height:88px;overflow:hidden;border-radius:12px;background:var(--vn-bg,#f6f7fb)}.vn-hero-side-img img{display:block;width:100%!important;height:100%!important;object-fit:cover;margin:0!important}.vn-hero-side h3{min-width:0;margin:0 0 5px!important;color:var(--vn-text,#111827)!important;font-size:.72rem!important;line-height:1.65!important;font-weight:900!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.vn-hero-side small{align-self:start;color:var(--vn-muted,#98a2b3);font-size:.58rem;font-weight:700}

body.dark-mode .ba-archive-countline,body.dark-mode .ba-archive-subcats a,body.dark-mode .ba-archive-empty,body.dark-mode .ba-archive-about{box-shadow:none}
@media(max-width:991px){.vn-hero{grid-template-columns:1fr}.vn-hero-main{min-height:360px}.vn-hero-side{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr}.vn-hero-side>a{grid-template-columns:1fr;grid-template-rows:120px auto auto;padding:7px}.vn-hero-side-img{grid-row:auto;width:100%;height:120px}.vn-hero-side h3{margin:8px 3px 3px!important}.vn-hero-side small{margin:0 3px 4px}}
@media(max-width:767px){.ba-archive-countline{min-height:44px;padding:8px 10px;border-radius:12px}.ba-archive-countline strong{font-size:.72rem}.ba-archive-countline small{font-size:.58rem}.ba-archive-section-head{margin-top:14px}.ba-archive-section-head h2{font-size:.9rem!important}.ba-archive-grid{row-gap:9px}.ba-archive-about{grid-template-columns:31px minmax(0,1fr);padding:13px;border-radius:14px}.ba-archive-about-icon{width:31px;height:31px;border-radius:9px}.vn-hero{gap:9px;margin-bottom:14px}.vn-hero-main{min-height:280px;border-radius:18px}.vn-hero-copy{padding:17px}.vn-hero-copy h2{font-size:1rem!important}.vn-hero-copy p{display:none}.vn-hero-side{display:flex;overflow-x:auto;gap:8px;padding-bottom:4px;scrollbar-width:none}.vn-hero-side::-webkit-scrollbar{display:none}.vn-hero-side>a{flex:0 0 72%;grid-template-columns:82px minmax(0,1fr);grid-template-rows:auto auto;min-height:92px}.vn-hero-side-img{grid-row:1/3;width:82px;height:76px}.vn-hero-side h3{margin:0 0 4px!important}.vn-hero-side small{margin:0}}
@media(max-width:420px){.ba-archive-countline{flex-wrap:wrap}.ba-archive-countline small{width:100%;margin:0 38px 0 0}.vn-hero-main{min-height:245px}.vn-hero-side>a{flex-basis:86%}}


/* BaziAndroid 4.0.49 — daily published/updated archive styling */
.baziandroid-daily-archive .ba-archive-shell{--daily-accent:var(--theme-color,#16a34a);--daily-soft:color-mix(in srgb,var(--daily-accent) 7%,var(--bg-card,#fff))}
.baziandroid-daily-archive.is-updated-today .ba-archive-shell{--daily-accent:#2563eb;--daily-soft:color-mix(in srgb,#2563eb 7%,var(--bg-card,#fff))}
.baziandroid-daily-archive .ba-archive-countline{position:relative;min-height:64px;margin-bottom:16px;padding:12px 14px;overflow:hidden;border-color:color-mix(in srgb,var(--daily-accent) 17%,var(--border-color,rgba(15,23,42,.07)));background:linear-gradient(135deg,var(--daily-soft),var(--bg-card,#fff));box-shadow:0 8px 28px color-mix(in srgb,var(--daily-accent) 6%,transparent)}
.baziandroid-daily-archive .ba-archive-countline:after{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,transparent,var(--daily-accent),transparent);opacity:.75}
.baziandroid-daily-archive .ba-archive-countline-icon{width:38px;height:38px;flex-basis:38px;border-radius:12px;background:color-mix(in srgb,var(--daily-accent) 12%,var(--bg-card,#fff));color:var(--daily-accent);font-size:1rem;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--daily-accent) 10%,transparent)}
.baziandroid-daily-archive .ba-archive-countline strong{font-size:.87rem;line-height:1.8;color:var(--text-primary,#1f2937)}
.baziandroid-daily-archive .ba-archive-section-head{align-items:center;margin-top:18px;padding:9px 11px;border:1px solid var(--border-color,rgba(15,23,42,.07));border-radius:13px;background:var(--bg-card,#fff)}
.baziandroid-daily-archive .ba-archive-section-head small{color:var(--daily-accent)}
.baziandroid-daily-archive .ba-archive-section-head>span{background:color-mix(in srgb,var(--daily-accent) 7%,var(--bg-light,#f5f7f8));color:var(--daily-accent)}
.baziandroid-daily-archive .archive-post-v2:before{background:linear-gradient(90deg,transparent,var(--daily-accent),transparent)}
body.dark-mode .baziandroid-daily-archive .ba-archive-countline,body.dark-mode .baziandroid-daily-archive .ba-archive-section-head{box-shadow:none}
@media(max-width:767px){.baziandroid-daily-archive .ba-archive-countline{min-height:56px;padding:10px 11px}.baziandroid-daily-archive .ba-archive-countline-icon{width:33px;height:33px;flex-basis:33px;border-radius:10px}.baziandroid-daily-archive .ba-archive-countline strong{font-size:.73rem}.baziandroid-daily-archive .ba-archive-section-head{padding:8px 9px;margin-top:13px}.baziandroid-daily-archive .ba-archive-section-head h2{font-size:.84rem!important}}

/* =========================================================
   BaziAndroid 4.0.50 — daily archive layout hardening
   The custom /published-today/ and /updated-today/ routes may
   otherwise inherit blog-home geometry from WordPress. These
   rules are deliberately scoped to the daily archive wrapper.
   ========================================================= */
.baziandroid-daily-archive{
  --daily-accent:var(--theme-color,#16a34a);
  --daily-accent-rgb:22,163,74;
}
.baziandroid-daily-archive.is-updated-today{
  --daily-accent:#2563eb;
  --daily-accent-rgb:37,99,235;
}
.baziandroid-daily-archive .ba-archive-shell{
  width:100%!important;
  min-width:0!important;
  padding:14px!important;
  border:1px solid var(--border-color,rgba(15,23,42,.075));
  border-radius:22px;
  background:var(--bg-card,#fff);
  box-shadow:0 14px 42px rgba(15,23,42,.045);
  overflow:hidden;
}
.baziandroid-daily-archive .ba-archive-countline{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:11px!important;
  width:100%!important;
  min-height:66px!important;
  margin:0 0 12px!important;
  padding:12px 14px!important;
  border:1px solid color-mix(in srgb,var(--daily-accent) 18%,var(--border-color,rgba(15,23,42,.075)))!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--daily-accent) 8%,var(--bg-card,#fff)),var(--bg-card,#fff) 72%)!important;
  box-shadow:none!important;
  text-align:right!important;
}
.baziandroid-daily-archive .ba-archive-countline:after{
  right:14px!important;
  left:14px!important;
  width:auto!important;
  height:2px!important;
  border-radius:0 0 99px 99px!important;
}
.baziandroid-daily-archive .ba-archive-countline-icon{
  display:grid!important;
  place-items:center!important;
  width:40px!important;
  height:40px!important;
  flex:0 0 40px!important;
  margin:0!important;
  border:1px solid color-mix(in srgb,var(--daily-accent) 18%,transparent)!important;
  border-radius:12px!important;
  background:color-mix(in srgb,var(--daily-accent) 10%,var(--bg-card,#fff))!important;
  color:var(--daily-accent)!important;
  font-size:1rem!important;
  font-weight:950!important;
  line-height:1!important;
}
.baziandroid-daily-archive .ba-archive-countline strong{
  min-width:0!important;
  margin:0!important;
  color:var(--text-primary,#1f2937)!important;
  font-size:.86rem!important;
  font-weight:900!important;
  line-height:1.75!important;
  text-align:right!important;
}
.baziandroid-daily-archive .ba-archive-countline small{
  flex:0 0 auto!important;
  margin-right:auto!important;
  margin-left:0!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--daily-accent) 8%,var(--bg-light,#f5f7f8))!important;
  color:var(--daily-accent)!important;
  font-size:.6rem!important;
  font-weight:850!important;
}
.baziandroid-daily-archive .ba-archive-section-head{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  width:100%!important;
  margin:0 0 13px!important;
  padding:12px 14px!important;
  border:1px solid var(--border-color,rgba(15,23,42,.07))!important;
  border-radius:15px!important;
  background:var(--bg-light,#f7f8fa)!important;
  text-align:right!important;
}
.baziandroid-daily-archive .ba-archive-section-head>div{
  min-width:0!important;
  flex:1 1 auto!important;
}
.baziandroid-daily-archive .ba-archive-section-head small{
  display:block!important;
  margin:0 0 2px!important;
  color:var(--daily-accent)!important;
  font-size:.6rem!important;
  font-weight:900!important;
}
.baziandroid-daily-archive .ba-archive-section-head h2{
  margin:0!important;
  color:var(--text-primary,#1f2937)!important;
  font-size:1.08rem!important;
  line-height:1.55!important;
  font-weight:950!important;
  text-align:right!important;
}
.baziandroid-daily-archive .ba-archive-section-head>span{
  flex:0 0 auto!important;
  min-width:64px!important;
  padding:6px 10px!important;
  border:1px solid color-mix(in srgb,var(--daily-accent) 13%,transparent)!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--daily-accent) 8%,var(--bg-card,#fff))!important;
  color:var(--daily-accent)!important;
  font-size:.62rem!important;
  font-weight:900!important;
  text-align:center!important;
}
/* Do not let Bootstrap's negative row gutters push daily cards outside the shell. */
.baziandroid-daily-archive .ba-archive-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  width:100%!important;
  margin:0!important;
}
.baziandroid-daily-archive .ba-archive-grid>[class*=col-]{
  width:auto!important;
  max-width:none!important;
  flex:none!important;
  margin:0!important;
  padding:0!important;
}
.baziandroid-daily-archive .archive-post-v2{
  min-height:146px!important;
  border-radius:16px!important;
  box-shadow:none!important;
}
.baziandroid-daily-archive .archive-post-v2:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 10px 26px rgba(15,23,42,.055)!important;
}
body.dark-mode .baziandroid-daily-archive .ba-archive-shell{
  background:var(--bg-card,#1b1f27)!important;
  border-color:rgba(255,255,255,.075)!important;
  box-shadow:none!important;
}
body.dark-mode .baziandroid-daily-archive .ba-archive-section-head{
  background:var(--bg-light,#151922)!important;
  border-color:rgba(255,255,255,.07)!important;
}
@media(max-width:1199px){
  .baziandroid-daily-archive .ba-archive-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:767px){
  .baziandroid-daily-archive .ba-archive-shell{padding:9px!important;border-radius:16px!important}
  .baziandroid-daily-archive .ba-archive-countline{min-height:58px!important;padding:9px 10px!important;border-radius:13px!important;gap:8px!important}
  .baziandroid-daily-archive .ba-archive-countline-icon{width:34px!important;height:34px!important;flex-basis:34px!important;border-radius:10px!important;font-size:.86rem!important}
  .baziandroid-daily-archive .ba-archive-countline strong{font-size:.7rem!important}
  .baziandroid-daily-archive .ba-archive-countline small{display:none!important}
  .baziandroid-daily-archive .ba-archive-section-head{padding:9px 10px!important;border-radius:12px!important}
  .baziandroid-daily-archive .ba-archive-section-head h2{font-size:.88rem!important}
  .baziandroid-daily-archive .ba-archive-section-head>span{min-width:auto!important;padding:5px 8px!important;font-size:.56rem!important}
  .baziandroid-daily-archive .ba-archive-grid{grid-template-columns:1fr!important;gap:9px!important}
  .baziandroid-daily-archive .archive-post-v2{min-height:128px!important}
}


/* BaziAndroid 4.0.51 — mobile overflow fix for daily archives */
.baziandroid-daily-archive,
.baziandroid-daily-archive #content,
.baziandroid-daily-archive .container,
.baziandroid-daily-archive .content-area,
.baziandroid-daily-archive .ba-archive-shell,
.baziandroid-daily-archive .ba-archive-countline,
.baziandroid-daily-archive .ba-archive-section-head,
.baziandroid-daily-archive .ba-archive-grid,
.baziandroid-daily-archive .ba-archive-grid > [class*=col-],
.baziandroid-daily-archive .archive-post-v2{
  box-sizing:border-box!important;
  min-width:0!important;
}
.baziandroid-daily-archive .container,
.baziandroid-daily-archive .content-area,
.baziandroid-daily-archive .ba-archive-shell,
.baziandroid-daily-archive .ba-archive-grid,
.baziandroid-daily-archive .archive-post-v2{
  max-width:100%!important;
}
.baziandroid-daily-archive .ba-archive-shell{
  width:auto!important;
}
.baziandroid-daily-archive .ba-archive-grid{
  overflow-x:clip!important;
}
@media(max-width:767px){
  .baziandroid-daily-archive .container{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .baziandroid-daily-archive .baziandroid-site-layout{
    margin-left:0!important;
    margin-right:0!important;
  }
  .baziandroid-daily-archive .content-area{
    padding-left:0!important;
    padding-right:0!important;
  }
  .baziandroid-daily-archive .ba-archive-shell{
    padding:8px!important;
    border-radius:14px!important;
  }
  .baziandroid-daily-archive .archive-post-v2{
    width:100%!important;
    max-width:100%!important;
  }
}


/* BaziAndroid 4.0.52 — reduce side spacing on mobile daily archives */
@media(max-width:767px){
  .baziandroid-daily-archive .container{
    padding-left:6px!important;
    padding-right:6px!important;
  }
  .baziandroid-daily-archive .ba-archive-shell{
    padding:6px!important;
    border-radius:13px!important;
  }
  .baziandroid-daily-archive .ba-archive-countline{
    padding:8px 9px!important;
    margin-bottom:10px!important;
  }
  .baziandroid-daily-archive .ba-archive-section-head{
    padding:8px 9px!important;
    margin-bottom:10px!important;
  }
}


/* BaziAndroid 4.0.54 — cleaner archive cards: larger artwork + clearer type */
.archive-post-v2 .archive-card-inner{
  min-height:148px!important;
  padding:12px!important;
}
.archive-post-v2 .archive-thumb{
  width:124px!important;
  height:124px!important;
  flex:0 0 124px!important;
  margin-left:14px!important;
  border-radius:19px!important;
}
.archive-post-v2 .archive-info{
  gap:7px!important;
}
.archive-post-v2 .archive-title{
  font-size:15.5px!important;
  font-weight:900!important;
  line-height:1.5!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.archive-post-v2 .archive-version,
.archive-post-v2 .archive-size-box{
  font-size:10.7px!important;
  font-weight:700!important;
  line-height:1.55!important;
}
.archive-post-v2 .archive-version-text{
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
/* The old feature line is intentionally removed from archive cards. */
.archive-post-v2 .archive-mod{display:none!important}
@media(min-width:992px){
  .archive-post-v2 .archive-card-inner{min-height:154px!important;padding:13px!important}
  .archive-post-v2 .archive-thumb{width:128px!important;height:128px!important;flex-basis:128px!important;margin-left:15px!important}
  .archive-post-v2 .archive-title{font-size:16px!important}
  .archive-post-v2 .archive-version,
  .archive-post-v2 .archive-size-box{font-size:11px!important}
}
@media(max-width:767px){
  .archive-post-v2 .archive-card-inner{min-height:142px!important;padding:10px!important}
  .archive-post-v2 .archive-thumb{width:118px!important;height:118px!important;flex-basis:118px!important;margin-left:11px!important;border-radius:17px!important}
  .archive-post-v2 .archive-title{font-size:15px!important;line-height:1.48!important}
  .archive-post-v2 .archive-version,
  .archive-post-v2 .archive-size-box{font-size:10.5px!important}
}
@media(max-width:380px){
  .archive-post-v2 .archive-thumb{width:108px!important;height:108px!important;flex-basis:108px!important;margin-left:10px!important}
  .archive-post-v2 .archive-title{font-size:14.25px!important}
  .archive-post-v2 .archive-version,
  .archive-post-v2 .archive-size-box{font-size:10px!important}
}