/* HERO */
    .article-hero { position: relative; min-height: 380px; padding: 60px 0 80px; color: white; overflow: hidden; }
    .article-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -2; }
    .article-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(15,32,39,.85) 0%, rgba(26,58,42,.78) 60%, rgba(22,163,74,.7) 100%); z-index: -1; }
    .article-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: var(--grey-50); clip-path: ellipse(55% 100% at 50% 100%); }
    .article-hero .cat-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(74,222,128,.18); border: 1px solid rgba(74,222,128,.4); color: #4ade80; border-radius: 999px; padding: 6px 16px; font-size: .8rem; font-weight: 700; margin-bottom: 16px; text-decoration: none; }
    .article-hero h1 { font-family: var(--font-display); font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 800; line-height: 1.25; margin-bottom: 16px; max-width: 900px; }
    .article-hero .meta { display: flex; gap: 18px; font-size: .9rem; color: rgba(255,255,255,.85); flex-wrap: wrap; }
    .article-hero .meta i { margin-right: 6px; }
    .breadcrumb-wrap { background: rgba(0,0,0,.2); padding: 8px 16px; border-radius: 10px; display: inline-block; margin-bottom: 18px; font-size: .82rem; }
    .breadcrumb-wrap a { color: rgba(255,255,255,.9); text-decoration: none; }
    .breadcrumb-wrap a:hover { color: #4ade80; }
    .breadcrumb-wrap .sep { margin: 0 8px; color: rgba(255,255,255,.5); }

    /* ARTICLE BODY */
    .article-main { padding: 36px 0 80px; background: var(--grey-50); }
    .article-content { background: white; border-radius: 18px; padding: 36px 40px; box-shadow: var(--shadow-sm); border: 1.5px solid var(--grey-100); }
    .article-content .lead { font-size: 1.1rem; line-height: 1.7; color: var(--grey-700); font-weight: 500; padding: 16px 20px; background: var(--green-light); border-left: 4px solid var(--green-primary); border-radius: 0 12px 12px 0; margin-bottom: 28px; }
    .article-content h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--grey-900); margin: 32px 0 16px; padding-left: 14px; border-left: 4px solid var(--green-primary); }
    .article-content h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--grey-900); margin: 24px 0 12px; }
    .article-content p { font-size: 1rem; line-height: 1.75; color: var(--grey-700); margin-bottom: 16px; }
    .article-content ul, .article-content ol { margin: 0 0 18px 0; padding-left: 24px; }
    .article-content li { font-size: 1rem; line-height: 1.75; color: var(--grey-700); margin-bottom: 8px; }
    .article-content strong { color: var(--grey-900); font-weight: 700; }
    .article-content a { color: var(--green-primary); font-weight: 600; text-decoration: none; border-bottom: 1px dashed var(--green-primary); }
    .article-content a:hover { color: var(--green-dark); border-bottom-style: solid; }
    .article-content img { max-width: 100%; border-radius: 12px; margin: 18px 0; box-shadow: var(--shadow-md); }
    .article-content blockquote { border-left: 4px solid var(--green-primary); padding: 12px 18px; background: var(--grey-50); margin: 18px 0; border-radius: 0 10px 10px 0; font-style: italic; color: var(--grey-700); }

    /* SHARE BAR */
    .share-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 32px 0 0; padding-top: 24px; border-top: 1px solid var(--grey-100); }
    .share-bar .lbl { font-weight: 700; color: var(--grey-700); margin-right: 8px; }
    .share-btn { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: white; text-decoration: none; transition: transform .15s; }
    .share-btn:hover { transform: translateY(-2px); color: white; }
    .share-fb { background: #1877f2; }
    .share-tw { background: #0f1419; }
    .share-li { background: #0a66c2; }
    .share-zl { background: #0068ff; }
    .share-cp { background: var(--grey-500); }

    /* TAGS */
    .tag-list { margin: 16px 0 0; padding-top: 18px; border-top: 1px solid var(--grey-100); }
    .tag-list .lbl { font-weight: 700; color: var(--grey-700); margin-right: 10px; }
    .tag { display: inline-block; background: var(--green-light); color: var(--green-dark); padding: 4px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600; margin: 2px 4px 2px 0; text-decoration: none; }
    .tag:hover { background: var(--green-primary); color: white; }

    /* SIDEBAR (reuse from list) */
    .sidebar-card { background: white; border-radius: 14px; padding: 20px; box-shadow: var(--shadow-sm); border: 1.5px solid var(--grey-100); margin-bottom: 20px; }
    .sidebar-title { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--grey-900); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--green-light); }
    .cat-list { list-style: none; padding: 0; margin: 0; }
    .cat-list li { margin-bottom: 6px; }
    .cat-list a { display: block; padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--grey-700); font-size: .9rem; }
    .cat-list a:hover { background: var(--green-light); color: var(--green-dark); font-weight: 700; }
    .recent-list { list-style: none; padding: 0; margin: 0; }
    .recent-list li { padding: 10px 0; border-bottom: 1px solid var(--grey-100); }
    .recent-list li:last-child { border-bottom: none; }
    .recent-list a { display: flex; gap: 10px; text-decoration: none; }
    .recent-thumb { width: 64px; height: 64px; border-radius: 8px; background-size: cover; background-position: center; flex-shrink: 0; }
    .recent-body h6 { font-size: .85rem; font-weight: 700; color: var(--grey-900); margin: 0 0 4px; line-height: 1.35; }
    .recent-body small { color: var(--grey-500); font-size: .75rem; }
    .recent-list a:hover .recent-body h6 { color: var(--green-primary); }
    .cta-box { background: linear-gradient(135deg, #16a34a, #22c55e); color: white; border-radius: 14px; padding: 22px; text-align: center; }
    .cta-box h5 { font-family: var(--font-display); font-weight: 800; margin-bottom: 8px; font-size: 1.05rem; }
    .cta-box p { font-size: .85rem; opacity: .9; margin-bottom: 14px; }
    .cta-box .btn-w { background: white; color: var(--green-dark); padding: 10px 20px; border-radius: 10px; font-weight: 800; text-decoration: none; display: inline-block; font-size: .9rem; }

    /* RELATED */
    .related-section { background: white; padding: 56px 0; }
    .related-card { background: white; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); border: 1.5px solid var(--grey-100); transition: all .25s; height: 100%; }
    .related-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--green-primary); }
    .related-card-img { aspect-ratio: 16/10; background-size: cover; background-position: center; }
    .related-card-body { padding: 16px; }
    .related-card h4 { font-family: var(--font-display); font-size: .95rem; font-weight: 800; margin-bottom: 8px; line-height: 1.35; }
    .related-card h4 a { color: var(--grey-900); text-decoration: none; }
    .related-card h4 a:hover { color: var(--green-primary); }
    .related-card .meta { font-size: .75rem; color: var(--grey-500); }

    /* BOTTOM CTA */
    .bottom-cta { background: linear-gradient(135deg, #0f2027 0%, #1a3a2a 60%, #16a34a 100%); color: white; padding: 56px 0; text-align: center; }
    .bottom-cta h2 { font-family: var(--font-display); font-weight: 800; margin-bottom: 14px; font-size: 1.8rem; }
    .bottom-cta p { color: rgba(255,255,255,.78); margin-bottom: 28px; max-width: 640px; margin-left: auto; margin-right: auto; }
    .bottom-cta .btn-cta { background: white; color: var(--green-dark); padding: 14px 32px; border-radius: 12px; font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
    .bottom-cta .btn-cta:hover { transform: translateY(-2px); color: var(--green-dark); box-shadow: 0 12px 28px rgba(0,0,0,.25); }

    @media (max-width: 768px) {
        .article-hero { padding: 36px 0 56px; min-height: 280px; }
        .article-content { padding: 22px 20px; }
        .article-main { padding: 24px 0 60px; }
    }