/* DESIGN SYSTEM & STYLING - EFARM SCROLLYTELLING */

/* Root Variables for Color Palette and Themes */
:root {
    --color-green-primary: #2E7D32;
    --color-green-dark: #1B5E20;
    --color-green-light: #C8E6C9;
    --color-brown-wood: #5D4037;
    --color-brown-light: #8D6E63;
    --color-gold-earth: #D4AF37;
    --color-gold-dark: #B79524;
    --color-white: #FFFFFF;
    --color-black: #121212;
    --color-gray-bg: #F8F9FA;
    --color-gray-card: #FFFFFF;
    --color-gray-border: #E0E0E0;
    --color-text-primary: #1A1A1A;
    --color-text-secondary: #555555;
    --color-text-light: #777777;

    --font-title: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;

    --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-fast: all 0.2s ease;
}

/* Reset and Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-white);
    color: var(--color-text-primary);
    line-height: 1.8;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Typography styles */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-title);
    font-weight: 700;
    line-height: 1.3;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

.container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* 1. READING PROGRESS BAR */
#reading-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.2);
    z-index: 1000;
}

#reading-progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--color-green-primary), var(--color-gold-earth));
    transition: width 0.1s ease-out;
}

/* 2. HEADER AND STICKY NAV */
#main-header {
    position: fixed;
    top: 4px;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    z-index: 99;
    border-bottom: 1px solid var(--color-gray-border);
}

.logo {
    font-family: var(--font-title);
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 1px;
    color: var(--color-green-dark);
}

.chapter-nav {
    display: flex;
    gap: 1.5rem;
}

.nav-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--color-green-primary);
    transition: var(--transition-smooth);
    transform: translateX(-50%);
}

.nav-link.active {
    color: var(--color-green-primary);
}

.nav-link.active::after {
    width: 80%;
}

.share-box {
    display: flex;
    gap: 0.5rem;
}

.btn-share {
    background: none;
    border: 1px solid var(--color-gray-border);
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.btn-share svg {
    width: 18px;
    height: 18px;
    fill: var(--color-text-secondary);
}

.btn-share:hover {
    background-color: var(--color-green-primary);
    border-color: var(--color-green-primary);
}

.btn-share:hover svg {
    fill: var(--color-white);
}

/* 3. HERO SECTION (Cinematic Fullscreen) */
#hero {
    position: relative;
    width: 100vw;
    height: 130vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 0 1.5rem;
}

.hero-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
}

/* Ken Burns slow zoom */
.zoom-anim {
    animation: kenBurns 40s infinite alternate ease-in-out;
}

@keyframes kenBurns {
    0% {
        transform: scale(1) translate(0, 0);
    }

    100% {
        transform: scale(1.15) translate(-1%, -1%);
    }
}

/* Cloud layers moving */
.cloud-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat-x;
    opacity: 0.25;
    pointer-events: none;
}

#cloud1 {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500" viewBox="0 0 1000 500"><path d="M100 300 q50-60 120-20 q80-80 180 0 q70-40 130 10 q90-60 150 10 q80-60 140 0 q90-40 180 0 L1000 500 L0 500 Z" fill="white" opacity="0.3"/></svg>');
    background-position: bottom;
    background-size: 1000px 500px;
    animation: cloudMove 45s linear infinite;
    z-index: 2;
}

#cloud2 {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500" viewBox="0 0 1000 500"><path d="M50 350 q70-80 150-20 q60-50 140 10 q90-70 180 0 q50-40 120 10 q80-50 150 10 q70-30 110 0 L1000 500 L0 500 Z" fill="white" opacity="0.2"/></svg>');
    background-position: bottom;
    background-size: 1200px 400px;
    animation: cloudMove 75s linear infinite reverse;
    z-index: 3;
    opacity: 0.15;
}

@keyframes cloudMove {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Light Leak Effect */
.light-leak {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, rgba(46, 125, 50, 0.06) 40%, transparent 70%);
    pointer-events: none;
    z-index: 4;
    animation: lightPulse 15s infinite alternate ease-in-out;
}

@keyframes lightPulse {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.7;
    }

    50% {
        transform: translate(5%, 5%) scale(1.1);
        opacity: 0.9;
    }

    100% {
        transform: translate(-5%, -2%) scale(0.9);
        opacity: 0.6;
    }
}

/* Falling Leaves Container */
.leaves-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.leaf {
    position: absolute;
    background-color: var(--color-green-primary);
    opacity: 0.65;
    border-radius: 2px 20px 2px 20px;
    display: inline-block;
    animation: fall 12s linear infinite;
    transform-origin: center;
}

@keyframes fall {
    0% {
        top: -5%;
        transform: translateX(0) rotate(0deg) scale(0.8);
        opacity: 0;
    }

    10% {
        opacity: 0.7;
    }

    90% {
        opacity: 0.5;
    }

    100% {
        top: 105%;
        transform: translateX(120px) rotate(360deg) scale(0.8);
        opacity: 0;
    }
}

/* Hero Content Styling */
.hero-content {
    position: relative;
    z-index: 10;
    max-width: 900px;
    text-align: center;
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pre-title {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--color-gold-earth);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.hero-title {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    line-height: 1.25;
}

.hero-subtitle {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 2rem;
    font-family: var(--font-body);
    color: #E0E0E0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Gradient highlight keywords */
.keywords-highlight {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.kw {
    font-family: var(--font-title);
    font-size: 1.6rem;
    font-weight: 700;
    background: linear-gradient(135deg, #FFE082, #FFB300);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-bottom: 2px solid var(--color-gold-earth);
    padding-bottom: 2px;
    letter-spacing: 1px;
}

.hero-sapo {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #F0F0F0;
    max-width: 750px;
    margin-bottom: 2.5rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.author-byline {
    font-size: 0.95rem;
    color: #ccc;
    margin-bottom: 3.5rem;
}

.author-byline strong {
    color: var(--color-gold-earth);
    font-size: 1.05rem;
}

/* Scroll Indicator Arrow */
.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.8;
    cursor: pointer;
    transition: var(--transition-fast);
}

.scroll-indicator:hover {
    opacity: 1;
    transform: translateY(3px);
}

.arrow-down {
    font-size: 1.5rem;
    color: var(--color-gold-earth);
    animation: bounce 2s infinite;
}

.indicator-text {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-8px);
    }

    60% {
        transform: translateY(-4px);
    }
}

/* 4. STICKY INFO BAR */
#sticky-info-bar {
    width: 100%;
    background-color: var(--color-green-primary);
    color: var(--color-white);
    padding: 0.9rem 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 98;
    position: relative;
}

#sticky-info-bar.sticky {
    position: fixed;
    top: 64px;
    left: 0;
    animation: slideDown 0.3s ease-out forwards;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

.info-bar-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 1rem;
    gap: 1rem;
}

.info-item {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.info-item .icon {
    font-size: 1.1rem;
}

/* 5. MAIN ARTICLE LAYOUT */
#scrolly-container {
    padding-top: 4rem;
    background-color: var(--color-white);
}

/* Sapo / Intro Block style */
.section-intro {
    padding: 4rem 1.5rem;
}

.sapo-intro-text {
    font-size: 1.35rem;
    line-height: 1.85;
    color: var(--color-text-secondary);
    font-weight: 300;
    font-family: var(--font-body);
    border-left: 4px solid var(--color-green-primary);
    padding-left: 2rem;
    margin-bottom: 2rem;
}

/* TEXT REVEAL ON SCROLL */
.text-reveal {
    opacity: 0.3;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.text-reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Chapter Headers styling */
.chapter-section {
    padding: 5rem 0;
    border-top: 1px solid var(--color-gray-border);
}

.chapter-header {
    text-align: center;
    margin-bottom: 4rem;
    padding: 0 1.5rem;
}

.chapter-number {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-gold-earth);
    letter-spacing: 4px;
    display: block;
    margin-bottom: 1rem;
}

.chapter-title-text {
    font-size: 2.2rem;
    color: var(--color-green-dark);
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 1.5rem;
}

.chapter-title-text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--color-brown-wood);
}

/* Base paragraphs */
.article-body {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.paragraph {
    font-size: 1.15rem;
    color: var(--color-text-primary);
    margin-bottom: 2rem;
    text-align: justify;
}

/* Drop cap for chapter starting */
.drop-cap::first-letter {
    font-family: var(--font-title);
    float: left;
    font-size: 4rem;
    line-height: 0.85;
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px;
    color: var(--color-green-primary);
    font-weight: 800;
}

/* Large image showcases */
.image-showcase {
    position: relative;
    width: 100%;
    margin: 4rem 0;
    overflow: hidden;
    cursor: zoom-in;
}

.image-showcase img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease;
}

.image-showcase:hover img {
    transform: scale(1.03);
}

.full-width-image {
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 65vh;
}

.full-width-image img {
    height: 100%;
    object-fit: cover;
}

.img-caption {
    background-color: rgba(26, 26, 26, 0.85);
    color: var(--color-white);
    padding: 0.8rem 1.5rem;
    font-size: 0.85rem;
    text-align: center;
    font-style: italic;
}

/* Parallax scroll photo section */
.parallax-section {
    position: relative;
    height: 60vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.parallax-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
}

.parallax-title {
    color: var(--color-white);
    font-size: 1.8rem;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    font-family: var(--font-title);
    max-width: 800px;
}

/* Quote Cards design */
.quote-card-container {
    padding: 4rem 1.5rem;
    display: flex;
    justify-content: center;
    background-color: var(--color-gray-bg);
    margin: 4rem 0;
}

.quote-card {
    background-color: var(--color-white);
    border-left: 6px solid var(--color-gold-earth);
    padding: 3rem 2.5rem;
    max-width: 700px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    position: relative;
    border-radius: 0 8px 8px 0;
}

.quote-icon {
    position: absolute;
    top: -10px;
    left: 15px;
    font-size: 5rem;
    color: rgba(212, 175, 55, 0.15);
    font-family: var(--font-title);
    line-height: 1;
}

.quote-card blockquote {
    font-family: var(--font-title);
    font-size: 1.45rem;
    line-height: 1.7;
    font-style: italic;
    color: var(--color-green-dark);
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}

.quote-card cite {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-brown-wood);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-style: normal;
}

/* 6. TIMELINE INTERACTIVE MODULE */
.interactive-zone {
    margin-top: 5rem;
    margin-bottom: 5rem;
}

.interactive-block {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 12px;
    padding: 3rem 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
    margin-bottom: 4rem;
}

.block-title {
    font-size: 1.6rem;
    color: var(--color-green-dark);
    text-align: center;
    margin-bottom: 0.5rem;
}

.block-subtitle {
    font-size: 0.95rem;
    color: var(--color-text-light);
    text-align: center;
    margin-bottom: 3rem;
}

.timeline-container {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem 0;
}

.timeline-line {
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--color-green-light);
}

.timeline-item {
    position: relative;
    margin-bottom: 3rem;
    padding-left: 50px;
}

.timeline-dot {
    position: absolute;
    left: 12px;
    top: 5px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 4px solid var(--color-green-primary);
    z-index: 2;
    transition: var(--transition-fast);
}

.timeline-year {
    font-family: var(--font-title);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-gold-earth);
    margin-bottom: 0.3rem;
    transition: var(--transition-fast);
}

.timeline-content {
    background-color: var(--color-gray-bg);
    padding: 1.2rem 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--color-gray-border);
    transition: var(--transition-smooth);
}

.timeline-content h4 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-text-primary);
    margin-bottom: 0.4rem;
}

.timeline-content p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Active states for timeline scrolling */
.timeline-item.active .timeline-dot {
    background-color: var(--color-gold-earth);
    border-color: var(--color-green-dark);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
    transform: scale(1.2);
}

.timeline-item.active .timeline-year {
    color: var(--color-green-dark);
    transform: translateX(5px);
}

.timeline-item.active .timeline-content {
    border-color: var(--color-green-primary);
    background-color: var(--color-white);
    box-shadow: 0 5px 20px rgba(46, 125, 50, 0.08);
}

/* 7. GROWTH INFOGRAPHIC */
.growth-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.2rem;
    margin-top: 2rem;
}

.growth-card {
    background-color: var(--color-gray-bg);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    padding: 1.8rem 1rem;
    text-align: center;
    transition: var(--transition-smooth);
}

.growth-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-green-primary);
    box-shadow: 0 10px 20px rgba(46, 125, 50, 0.05);
}

.growth-icon {
    font-size: 2rem;
    margin-bottom: 0.8rem;
}

.growth-num {
    font-family: var(--font-title);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-green-dark);
    margin-bottom: 0.4rem;
}

.growth-desc {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    font-weight: 500;
    line-height: 1.4;
}

/* 8. INTERACTIVE DIAGRAM - PRODUCTION */
.production-diagram {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 3rem 0;
    flex-wrap: wrap;
    gap: 1rem;
}

.diag-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    width: 120px;
    transition: var(--transition-smooth);
}

.node-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--color-gray-bg);
    border: 2px solid var(--color-gray-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    transition: var(--transition-smooth);
}

.node-label {
    margin-top: 0.8rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-align: center;
}

.diag-arrow {
    font-size: 1.5rem;
    color: var(--color-gray-border);
    animation: pulseArrow 1.5s infinite ease-in-out;
}

@keyframes pulseArrow {

    0%,
    100% {
        transform: translateX(0);
        opacity: 0.5;
    }

    50% {
        transform: translateX(5px);
        opacity: 1;
    }
}

.diag-node.active .node-circle {
    background-color: var(--color-green-primary);
    border-color: var(--color-green-dark);
    color: var(--color-white);
    transform: scale(1.15);
    box-shadow: 0 8px 25px rgba(46, 125, 50, 0.25);
}

.diag-node.active .node-label {
    color: var(--color-green-dark);
}

.diagram-info-panel {
    background-color: var(--color-gray-bg);
    border: 1px solid var(--color-green-light);
    border-radius: 8px;
    padding: 1.5rem;
    min-height: 140px;
    position: relative;
    overflow: hidden;
}

.info-content {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.info-content.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.info-content h4 {
    color: var(--color-green-dark);
    margin-bottom: 0.5rem;
    font-size: 1.15rem;
}

.info-content p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* 9. STATS GRID & COUNT-UP ANIMATION */
.stats-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1.5rem;
    margin: 4rem auto;
}

.stats-card {
    background-color: var(--color-gray-bg);
    border: 1px solid var(--color-gray-border);
    border-radius: 10px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: var(--transition-smooth);
}

.stats-card:hover {
    border-color: var(--color-gold-earth);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.06);
    transform: translateY(-3px);
}

.stat-number,
.stat-number-decimal {
    font-family: var(--font-title);
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--color-green-dark);
    line-height: 1;
}

.stat-unit {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-brown-light);
    margin-left: 2px;
}

.stat-label {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* 10. CIRCULAR PROGRESS INFOGRAPHIC */
.circular-progress-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.circular-progress {
    position: relative;
    width: 90px;
    height: 90px;
}

.circular-progress svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circle-bg {
    fill: none;
    stroke: var(--color-gray-border);
    stroke-width: 8;
}

.circle-fg {
    fill: none;
    stroke: var(--color-green-primary);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 251.2;
    /* 2 * pi * r (r=40) */
    stroke-dashoffset: 251.2;
    transition: stroke-dashoffset 2s ease-out;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-title);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-green-dark);
}

/* 11. QUOTE BOX (CHAPTER 2) */
.quote-box {
    background-color: var(--color-green-primary);
    color: var(--color-white);
    padding: 3rem 2rem;
    text-align: center;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.quote-text {
    font-family: var(--font-title);
    font-size: 1.8rem;
    font-style: italic;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 12. SPLIT SCREEN COMPARISON */
.split-screen-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    min-height: 450px;
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.split-side {
    padding: 4rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.traditional-side {
    background-color: #ECEFF1;
    color: var(--color-text-secondary);
    border-right: 1px solid var(--color-gray-border);
}

.efarm-side {
    background-color: #E8F5E9;
    color: var(--color-text-primary);
    border-left: 2px solid var(--color-green-light);
}

.split-badge {
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
}

.traditional-side .split-badge {
    background-color: #CFD8DC;
    color: #546E7A;
}

.efarm-side .split-badge.highlight {
    background-color: var(--color-green-primary);
    color: var(--color-white);
}

.split-side h3 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
}

.traditional-side h3 {
    color: #455A64;
}

.efarm-side h3 {
    color: var(--color-green-dark);
}

.split-side ul {
    list-style: none;
}

.split-side li {
    font-size: 1.05rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    line-height: 1.6;
}

.icon-bad {
    color: #d32f2f;
    font-size: 1rem;
    margin-top: 2px;
}

.icon-good {
    color: var(--color-green-primary);
    font-size: 1rem;
    margin-top: 2px;
}

/* 13. INTERACTIVE FLOW - CHAPTER 2 */
.flow-steps {
    display: flex;
    justify-content: space-between;
    margin: 3rem 0 2rem 0;
    position: relative;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.flow-step-item {
    flex: 1;
    min-width: 120px;
    background-color: var(--color-gray-bg);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    padding: 1.2rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.flow-step-item:hover {
    border-color: var(--color-green-primary);
    background-color: rgba(46, 125, 50, 0.02);
}

.flow-step-item.active {
    background-color: var(--color-green-primary);
    border-color: var(--color-green-dark);
    color: var(--color-white);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(46, 125, 50, 0.15);
}

.step-num {
    font-family: var(--font-title);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-gold-earth);
    margin-bottom: 0.2rem;
}

.flow-step-item.active .step-num {
    color: #FFE082;
}

.step-title {
    font-size: 0.85rem;
    font-weight: 700;
}

.flow-detail-panel {
    background-color: var(--color-gray-bg);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    padding: 1.8rem;
    min-height: 130px;
}

.step-desc-content {
    display: none;
    opacity: 0;
    transform: translateY(5px);
    transition: var(--transition-smooth);
}

.step-desc-content.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.step-desc-content h4 {
    color: var(--color-green-dark);
    margin-bottom: 0.6rem;
    font-size: 1.1rem;
}

.step-desc-content p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
}

/* 14. INTELLECTUAL PROPERTY INFOGRAPHIC GRID */
.ip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.2rem;
    margin-top: 2rem;
}

.ip-card {
    background-color: var(--color-gray-bg);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    padding: 1.8rem 1.2rem;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.ip-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-gray-border);
    transition: var(--transition-fast);
}

.ip-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-green-primary);
    box-shadow: 0 10px 20px rgba(46, 125, 50, 0.04);
}

.ip-card:hover::before {
    background-color: var(--color-green-primary);
}

.ip-icon {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 0.8rem;
}

.ip-card h4 {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.ip-card p {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.ip-footer {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px dashed var(--color-gray-border);
    display: flex;
    justify-content: center;
}

.qr-motion-icon {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--color-gray-bg);
    padding: 1rem 1.8rem;
    border-radius: 40px;
    border: 1px solid var(--color-green-light);
}

.qr-svg-icon {
    width: 32px;
    height: 32px;
    animation: floatingQR 4s infinite ease-in-out;
}

@keyframes floatingQR {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-4px) rotate(3deg);
    }
}

.qr-motion-icon span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-green-dark);
}

/* 15. MAP CONNECTION INFOGRAPHIC (CHAPTER 3) */
.map-connection-container {
    background-color: #1a221a;
    padding: 4rem 2rem;
    text-align: center;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.map-visual {
    max-width: 750px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1rem;
}

.vietnam-map-svg {
    width: 100%;
    height: auto;
    max-height: 480px;
}

/* Glowing paths animations */
.motion-line {
    fill: none;
    stroke-linecap: round;
    stroke-width: 2.5;
    stroke-dasharray: 8 8;
    animation: flowLine 30s linear infinite;
}

#line-hanoi {
    stroke: #81C784;
}

#line-hcm {
    stroke: #81C784;
}

#line-logistics {
    stroke: #A1887F;
}

#line-retail {
    stroke: #A1887F;
}

#line-ecom {
    stroke: #FFD54F;
}

@keyframes flowLine {
    0% {
        stroke-dashoffset: 500;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

.pulse-circle {
    animation: shockwave 2.2s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
    transform-origin: center;
}

@keyframes shockwave {
    0% {
        r: 5;
        opacity: 1;
    }

    100% {
        r: 24;
        opacity: 0;
    }
}

.map-node text {
    font-family: var(--font-body);
    font-size: 10px;
    pointer-events: none;
}

.source-node text {
    font-size: 13px;
}

.map-legend {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.legend-item {
    font-size: 0.85rem;
    color: #bbb;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dot-gold {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-gold-earth);
    display: inline-block;
}

.dot-green {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-green-primary);
    display: inline-block;
}

.line-flow {
    width: 20px;
    height: 3px;
    background-color: #81C784;
    display: inline-block;
    border-radius: 2px;
}

/* 16. INTERACTIVE ECOSYSTEM GRID */
.eco-system-graph {
    position: relative;
    width: 100%;
    max-width: 450px;
    height: 450px;
    margin: 3rem auto;
}

.eco-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.eco-center-badge {
    background-color: var(--color-green-primary);
    color: var(--color-white);
    padding: 1rem 1.8rem;
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 1.15rem;
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(46, 125, 50, 0.3);
    border: 3px solid var(--color-white);
    white-space: nowrap;
    display: block;
}

.eco-satellite {
    position: absolute;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.eco-satellite:hover {
    border-color: var(--color-green-primary);
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(46, 125, 50, 0.12);
}

.eco-satellite.active {
    background-color: #E8F5E9;
    border-color: var(--color-green-primary);
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(46, 125, 50, 0.15);
}

.eco-icon {
    font-size: 1.6rem;
    margin-bottom: 0.1rem;
}

.eco-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-align: center;
}

/* Positions around the center (Radius: ~160px) */
/* Angle: 0, 60, 120, 180, 240, 300 degrees */
.eco-s1 {
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
}

/* 0deg - Website */
.eco-s2 {
    top: 125px;
    right: 25px;
}

/* 60deg - Fanpage */
.eco-s3 {
    bottom: 125px;
    right: 25px;
}

/* 120deg - TMĐT */
.eco-s4 {
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}

/* 180deg - QR Code */
.eco-s5 {
    bottom: 125px;
    left: 25px;
}

/* 240deg - Thanh toán số */
.eco-s6 {
    top: 125px;
    left: 25px;
}

/* 300deg - Người tiêu dùng */

.eco-info-display {
    background-color: var(--color-gray-bg);
    border: 1px dashed var(--color-green-primary);
    border-radius: 8px;
    padding: 1.2rem 1.5rem;
    text-align: center;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#eco-dynamic-text {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    font-style: italic;
}

/* 17. INTERACTIVE TREE DIAGRAM */
.tree-interactive-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 2rem;
    align-items: center;
    margin-top: 2rem;
}

.tree-svg-wrapper {
    background-color: var(--color-gray-bg);
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid var(--color-gray-border);
}

.interactive-tree-svg {
    width: 100%;
    height: auto;
}

.tree-part {
    cursor: pointer;
    transition: var(--transition-smooth);
}

.tree-part:hover {
    stroke-opacity: 0.8;
    opacity: 0.8;
}

/* Specific styling for tree components hover */
path.tree-part[data-part="roots"]:hover {
    stroke: var(--color-brown-wood);
    filter: drop-shadow(0 0 5px var(--color-brown-light));
}

path.tree-part[data-part="trunk"]:hover {
    stroke: #3E2723;
}

path.tree-part[data-part="branches"]:hover {
    stroke: #3E2723;
}

circle.tree-part[data-part="leaves"]:hover {
    fill: var(--color-green-dark);
}

circle.tree-part[data-part="fruits"]:hover {
    fill: #FF8F00;
    r: 14px;
}

/* Active states triggers from JS */
.tree-part.active {
    stroke-opacity: 1 !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 8px rgba(46, 125, 50, 0.3));
}

circle.fruit-part.active {
    fill: #FF6F00 !important;
    r: 15px !important;
}

.tree-info-panel {
    background-color: var(--color-gray-bg);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    padding: 2rem;
    min-height: 250px;
}

#tree-part-title {
    font-size: 1.3rem;
    color: var(--color-green-dark);
    margin-bottom: 1rem;
}

#tree-part-desc {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* 18. ROLE FLOW & SUSTAINABLE BOXES */
.role-flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.2rem;
    margin-top: 2rem;
}

.role-step {
    background-color: var(--color-gray-bg);
    border-top: 4px solid var(--color-green-primary);
    border-radius: 0 0 8px 8px;
    padding: 1.5rem 1.2rem;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.role-number {
    position: absolute;
    top: -15px;
    right: 15px;
    font-size: 2.2rem;
    font-family: var(--font-title);
    font-weight: 800;
    color: rgba(46, 125, 50, 0.08);
}

.role-step h4 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text-primary);
    margin-bottom: 0.6rem;
}

.role-step p {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Sustainable conditions box */
.sustainable-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.sust-col {
    flex: 1;
    min-width: 220px;
    background-color: var(--color-gray-bg);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    padding: 1.8rem;
    height: 200px;
}

.sust-col h4 {
    color: var(--color-brown-wood);
    font-size: 1.1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-gray-border);
    padding-bottom: 0.5rem;
}

.sust-col.highlight-col {
    background-color: #E8F5E9;
    border-color: var(--color-green-primary);
}

.sust-col.highlight-col h4 {
    color: var(--color-green-dark);
    border-bottom-color: var(--color-green-light);
}

.sust-col ul {
    list-style: none;
}

.sust-col li {
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.sust-col.highlight-col li {
    color: var(--color-text-primary);
    font-weight: 600;
}

.sust-divider {
    font-size: 1.4rem;
    color: var(--color-gray-border);
}

/* 19. CONCLUSION SECTION ( hoàng hôn ) */
#conclusion-section {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    color: var(--color-white);
    display: flex;
    align-items: center;
    padding: 6rem 1.5rem;
}

.conclusion-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.conclusion-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.conclusion-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(18, 18, 18, 0.85), rgba(18, 18, 18, 0.92));
    z-index: 2;
}

.conclusion-content {
    position: relative;
    z-index: 10;
    max-width: 800px;
    margin: 0 auto;
}

.conclusion-scroll-wrap {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.reveal-text-line blockquote {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--color-gold-earth);
    margin-bottom: 1rem;
}

.reveal-text-line .focus-word {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #aaa;
    margin-bottom: 0.5rem;
}

.reveal-text-line .highlight-word {
    font-family: var(--font-title);
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-white);
    letter-spacing: 1px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    line-height: 1.1;
}

.reveal-text-line.scroll-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s cubic-bezier(0.25, 0.8, 0.25, 1), transform 1s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.reveal-text-line.scroll-fade-in.active {
    opacity: 1;
    transform: translateY(0);
}

.final-p {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 2rem;
    margin-top: 1rem;
}

.final-p p {
    font-size: 1.35rem;
    line-height: 1.8;
    color: #e0e0e0;
}

/* 20. APPENDIX INTERACTIVE SECTION */
#appendix-section {
    padding: 6rem 1.5rem;
    border-top: 1px solid var(--color-gray-border);
}

.appendix-title {
    font-size: 2.2rem;
    color: var(--color-brown-wood);
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
}

.appendix-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background-color: var(--color-green-primary);
}

.appendix-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

.appendix-card {
    background-color: var(--color-gray-bg);
    border: 1px solid var(--color-gray-border);
    border-radius: 12px;
    padding: 3rem 2.5rem;
}

.appendix-card h3 {
    font-size: 1.4rem;
    color: var(--color-green-dark);
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--color-gray-border);
    padding-bottom: 0.8rem;
}

.fact-box ul {
    list-style: none;
}

.fact-box li {
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
    position: relative;
    padding-left: 2rem;
}

.fact-box li::before {
    content: '▪';
    color: var(--color-gold-earth);
    font-size: 1.5rem;
    position: absolute;
    left: 0;
    top: -5px;
}

.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
}

.dash-item {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    padding: 1.5rem 1.2rem;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dash-val {
    font-family: var(--font-title);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-green-primary);
    margin-bottom: 0.3rem;
}

.dash-lbl {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-weight: 600;
    line-height: 1.4;
}

/* 21. FOOTER */
#main-footer {
    background-color: var(--color-black);
    color: #999;
    padding: 4rem 1.5rem;
    text-align: center;
    border-top: 1px solid #222;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.footer-content .byline {
    font-size: 1rem;
    color: var(--color-white);
}

.footer-content .byline strong {
    color: var(--color-gold-earth);
}

.copyright {
    font-size: 0.8rem;
}

/* 22. BACK TO TOP BUTTON */
#back-to-top {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: var(--color-green-primary);
    color: var(--color-white);
    border: none;
    cursor: pointer;
    font-size: 1.3rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-smooth);
    z-index: 99;
}

#back-to-top.show {
    opacity: 1;
    visibility: visible;
}

#back-to-top:hover {
    background-color: var(--color-green-dark);
    transform: translateY(-3px);
}

/* 23. IMAGE LIGHTBOX */
.lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: var(--transition-fast);
}

.lightbox-close:hover {
    color: var(--color-gold-earth);
}

.lightbox-content {
    max-width: 85%;
    max-height: 75vh;
    object-fit: contain;
    border: 3px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    animation: zoomIn 0.3s ease-out;
}

@keyframes zoomIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

#lightbox-caption {
    margin-top: 1.5rem;
    color: #ccc;
    font-size: 0.95rem;
    font-style: italic;
    max-width: 700px;
    text-align: center;
    padding: 0 1rem;
}

/* 24. GENERAL SCROLL FADE-IN UTILITY */
.scroll-fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(0.25, 0.8, 0.25, 1), transform 1s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.scroll-fade-in.active {
    opacity: 1;
    transform: translateY(0);
}

/* RESPONSIVE DESIGN - MEDIA QUERIES */

/* Tablet & Smaller Devices (Max 1024px) */
@media (max-width: 1024px) {
    .chapter-title-text {
        font-size: 2rem;
    }

    .split-screen-section {
        grid-template-columns: 1fr;
    }

    .split-side {
        padding: 3rem 2rem;
        min-height: auto;
    }

    .split-side h3 {
        font-size: 1.6rem;
    }

    .vietnam-map-svg {
        max-height: 380px;
    }

    .tree-interactive-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .tree-info-panel {
        min-height: auto;
    }
}

/* Mobile Devices (Max 768px) */
@media (max-width: 768px) {
    html {
        font-size: 15px;
    }

    #main-header {
        padding: 0 1rem;
        height: 50px;
    }

    .logo {
        font-size: 0.95rem;
    }

    .chapter-nav {
        display: none;
    }

    /* Hide sticky top links on mobile, use scrolling natural sections */

    #hero {
        padding: 0 1rem;
    }

    .hero-title {
        font-size: 1.9rem;
    }

    .hero-subtitle {
        font-size: 1.25rem;
    }

    .keywords-highlight {
        gap: 0.8rem;
        margin-bottom: 1.8rem;
    }

    .kw {
        font-size: 1.15rem;
    }

    .hero-sapo {
        font-size: 1.05rem;
    }

    #sticky-info-bar.sticky {
        top: 50px;
    }

    .info-bar-inner {
        justify-content: flex-start;
        overflow-x: auto;
        white-space: nowrap;
        flex-wrap: nowrap;
        padding-bottom: 0.4rem;
        gap: 1.5rem;
    }

    .info-bar-inner::-webkit-scrollbar {
        height: 3px;
    }

    .info-bar-inner::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 10px;
    }

    .sapo-intro-text {
        font-size: 1.2rem;
        padding-left: 1.2rem;
    }

    .chapter-title-text {
        font-size: 1.65rem;
    }

    .paragraph {
        text-align: left;
    }

    .timeline-line {
        left: 10px;
    }

    .timeline-item {
        padding-left: 30px;
    }

    .timeline-dot {
        left: 2px;
    }

    .growth-cards {
        grid-template-columns: 1fr 1fr;
    }

    .production-diagram {
        flex-direction: column;
        gap: 1.5rem;
    }

    .diag-arrow {
        transform: rotate(90deg);
        animation: pulseArrowVertical 1.5s infinite ease-in-out;
    }

    @keyframes pulseArrowVertical {

        0%,
        100% {
            transform: translateY(0) rotate(90deg);
            opacity: 0.5;
        }

        50% {
            transform: translateY(5px) rotate(90deg);
            opacity: 1;
        }
    }

    .flow-steps {
        flex-direction: column;
    }

    .flow-step-item {
        width: 100%;
    }

    .eco-system-graph {
        max-width: 320px;
        height: 320px;
    }

    .eco-center-badge {
        font-size: 0.95rem;
        padding: 0.7rem 1.2rem;
    }

    .eco-satellite {
        width: 66px;
        height: 66px;
    }

    .eco-icon {
        font-size: 1.2rem;
    }

    .eco-label {
        font-size: 0.65rem;
    }

    /* Re-evaluate radii positions on small mobile screens */
    .eco-s1 {
        top: 15px;
    }

    .eco-s2 {
        top: 90px;
        right: 10px;
    }

    .eco-s3 {
        bottom: 90px;
        right: 10px;
    }

    .eco-s4 {
        bottom: 15px;
    }

    .eco-s5 {
        bottom: 90px;
        left: 10px;
    }

    .eco-s6 {
        top: 90px;
        left: 10px;
    }

    .sust-col {
        height: auto;
    }

    .sust-divider {
        transform: rotate(90deg);
        margin: 0.5rem 0;
    }

    .reveal-text-line .highlight-word {
        font-size: 2.2rem;
    }

    .reveal-text-line blockquote {
        font-size: 1.7rem;
    }

    .appendix-card {
        padding: 1.8rem 1.2rem;
    }

    .dash-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
}