/* Các class bổ sung từ HTML gốc được trích xuất vào đây */
body { 
    background-color: #ffffff; 
    color: #334155; 
    overflow-x: hidden; 
    -webkit-font-smoothing: antialiased;
}

/* PC Optimized Typography */
p { 
    font-size: 1.25rem; 
    line-height: 1.95; 
    margin-bottom: 2rem; 
    color: #475569;
    text-align: justify;
}

.drop-cap::first-letter {
    float: left; font-size: 5rem; line-height: 0.8; padding-right: 0.8rem; padding-top: 0.25rem;
    font-family: 'Montserrat', sans-serif; font-weight: 900; color: #1d4ed8;
}

/* Scroll Progress */
.progress-container { width: 100%; height: 5px; position: fixed; top: 0; left: 0; z-index: 100; background: #e2e8f0; }
.progress-bar { height: 5px; background: #f59e0b; width: 0%; transition: width 0.1s ease; }

/* Subheading Style */
.subheading-line { position: relative; }
.subheading-line::after {
    content: ''; position: absolute; left: 0; bottom: -12px; width: 70px; height: 5px; background-color: #1d4ed8; border-radius: 3px;
}

/* Artistic Flip Cards for PC (Hover triggers natively) */
.perspective-1000 { perspective: 1200px; }
.preserve-3d { transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.backface-hidden { backface-visibility: hidden; }
.rotate-y-180 { transform: rotateY(180deg); }

.flip-card-container:hover .preserve-3d { transform: rotateY(180deg); }

.card-front {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 1.25rem;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08); overflow: hidden;
}
.card-back {
    background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
    border-radius: 1.25rem; color: #ffffff; box-shadow: 0 15px 35px -5px rgba(29, 78, 216, 0.4);
}

/* Interactive Timeline for PC */
.timeline-wrapper::-webkit-scrollbar { height: 6px; }
.timeline-wrapper::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
.timeline-wrapper::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.timeline-wrapper::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.tl-dot { transition: all 0.3s ease; }
.tl-item:hover .tl-dot { border-color: #1d4ed8; transform: scale(1.1); }
.tl-item.active .tl-dot { background-color: #1d4ed8; border-color: #1d4ed8; transform: scale(1.3); box-shadow: 0 0 20px rgba(29,78,216,0.5); }
.tl-item.active .tl-date { color: #1d4ed8; font-weight: 800; }

/* Floating Animation for Artistic Bubbles PC */
@keyframes float-bubble-1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
@keyframes float-bubble-2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(15px); } }
@keyframes float-bubble-3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.art-bubble { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; }
.art-bubble:hover {
    transform: scale(1.15) !important;
    box-shadow: 0 20px 50px rgba(245, 158, 11, 0.7) !important;
    border-color: #f59e0b !important;
    z-index: 50;
}

.bubble-tooltip {
    position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%) translateY(15px); width: max-content; max-width: 360px;
    background: #ffffff; color: #1e293b; padding: 1.5rem; border-radius: 16px;
    opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 60;
    border: 1px solid #e2e8f0; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); pointer-events: none;
}
.art-bubble-wrapper:hover .bubble-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.bubble-tooltip::after {
    content: ''; position: absolute; top: 100%; left: 50%; margin-left: -10px; border-width: 10px; border-style: solid; border-color: #ffffff transparent transparent transparent;
}