html { margin: 0; padding: 0; width: 100%; scroll-behavior: smooth; }
body {
    margin: 0; padding: 0; width: 100%;
    background-color: #F8F7F3; color: #1A1A1A;
    overflow-x: hidden; overscroll-behavior: none; 
}

/* Nền và 3D */
.paper-texture {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none; z-index: 50;
    opacity: 0.02; mix-blend-mode: multiply;
}
.blueprint-bg {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none; z-index: 1; opacity: 0; 
    background-image: linear-gradient(rgba(26, 26, 26, 0.8) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(26, 26, 26, 0.8) 1px, transparent 1px);
    background-size: 60px 60px; background-position: center center;
    will-change: opacity;
}
.bp-line-h { position: absolute; width: 100%; height: 1px; top: 50%; border-top: 1px dashed rgba(26,26,26,0.8); }
.bp-line-v { position: absolute; height: 100%; width: 1px; left: 50%; border-left: 1px dashed rgba(26,26,26,0.8); }
#canvas-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    z-index: 5; pointer-events: none; display: flex; justify-content: center; align-items: center;
}
.pedestal-base {
    position: absolute; width: 320px; height: 20px;
    background: linear-gradient(135deg, #ffffff 0%, #EFEFEF 100%);
    border-radius: 50%; top: 70%; left: 50%;
    transform: translate(-50%, -50%); z-index: 6; will-change: transform;
}
.pedestal-shadow {
    position: absolute; width: 280px; height: 40px;
    background: rgba(0,0,0,0.08); border-radius: 50%;
    top: 71%; left: 50%; transform: translate(-50%, -50%);
    filter: blur(20px); z-index: 4; will-change: transform;
}
#pedestal-fader {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, transparent 60%, #F8F7F3 90%);
    z-index: 7; opacity: 0; pointer-events: none;
}

/* Scroll Layout */
.content-layer { position: relative; z-index: 20; pointer-events: none; }
.scroll-section {
    height: 100vh; display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    position: relative; pointer-events: auto; 
}
.intro-fade { opacity: 0; transform: translateY(20px); }

/* Typography Bài Báo */
.article-content { pointer-events: auto; }
.article-content p { margin-bottom: 1.5rem; font-size: 1.125rem; line-height: 1.8; font-weight: 300; }
.dropcap::first-letter {
    float: left; font-family: 'Anton', sans-serif; font-size: 4.5rem;
    line-height: 0.8; padding-top: 4px; padding-right: 8px; color: #1A1A1A;
}
.img-grid-frame {
    padding: 8px; background: white; border: 1px solid #E5E5E5;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05);
}

/* Museum Slider */
.museum-slider {
    position: relative; overflow: hidden; background: #F8F7F3;
    border-top: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;
}
.slider-blueprint {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.05;
    background-image: linear-gradient(#1a1a1a 1px, transparent 1px), linear-gradient(90deg, #1a1a1a 1px, transparent 1px);
    background-size: 40px 40px; transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.slide-item {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; opacity: 0; pointer-events: none;
    transition: opacity 0.4s ease;
}
.slide-item.active { opacity: 1; pointer-events: auto; z-index: 10; }

.slide-img-wrapper { transform: translateX(20px); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.slide-item.active .slide-img-wrapper { transform: translateX(0); }

.slide-nav-btn {
    background: white; border: 1px solid #E5E5E5; border-radius: 50%; width: 48px; height: 48px;
    display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.slide-nav-btn:hover { background: #1A1A1A; color: white; }