/* Mobile Optimized Typography & Layout */
body { 
    background-color: #ffffff; 
    color: #334155; 
    overflow-x: hidden; 
    -webkit-font-smoothing: antialiased;
}

p { 
    font-size: 1.125rem; /* Size tối ưu cho mobile */
    line-height: 1.85; 
    margin-bottom: 1.5rem; 
    color: #475569;
    text-align: justify;
}

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

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

/* Subheading Style */
.subheading-line { position: relative; }
.subheading-line::after {
    content: ''; position: absolute; left: 0; bottom: -8px; width: 50px; height: 4px; background-color: #1d4ed8; border-radius: 2px;
}

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

/* Lật thẻ bằng class active (Touch) thay vì hover trên mobile */
.flip-card-container.active .preserve-3d { transform: rotateY(180deg); }

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

/* Interactive Timeline for Mobile */
.timeline-wrapper::-webkit-scrollbar { height: 0px; display: none; } /* Ẩn thanh cuộn xấu xí trên điện thoại */
.tl-dot { transition: all 0.3s ease; }
.tl-item.active .tl-dot { background-color: #1d4ed8; border-color: #1d4ed8; transform: scale(1.2); box-shadow: 0 0 15px rgba(29,78,216,0.4); }
.tl-item.active .tl-date { color: #1d4ed8; font-weight: 800; }

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

.art-bubble { transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; }
.art-bubble-wrapper.active .art-bubble {
    transform: scale(1.1) !important;
    box-shadow: 0 15px 30px rgba(245, 158, 11, 0.6) !important;
    border-color: #f59e0b !important;
}

/* Định dạng Tooltip (Fix lỗi tràn viền) */
.bubble-tooltip {
    position: absolute; 
    bottom: 110%; 
    width: 280px; 
    max-width: 85vw; /* Ngăn text box tràn màn hình */
    background: #ffffff; 
    color: #1e293b; 
    padding: 1.2rem; 
    border-radius: 12px;
    opacity: 0; 
    visibility: hidden; 
    transition: all 0.3s ease; 
    z-index: 60;
    border: 1px solid #e2e8f0; 
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.4); 
    pointer-events: none;
}

/* Box ở vị trí trung tâm mặc định */
.tooltip-center {
    left: 50%;
    transform: translateX(-50%) translateY(10px);
}
.tooltip-center::after {
    left: 50%;
    margin-left: -8px;
}

/* Đẩy Tooltip về bên phải cho các bóng nằm sát lề trái */
.tooltip-left {
    left: -15px; 
    transform: translateY(10px);
}
.tooltip-left::after {
    left: 25px; /* Mũi tên chĩa về bóng */
}

/* Đẩy Tooltip về bên trái cho các bóng nằm sát lề phải */
.tooltip-right {
    right: -15px; 
    left: auto;
    transform: translateY(10px);
}
.tooltip-right::after {
    right: 25px;
    left: auto;
}

/* Kích hoạt Tooltip */
.art-bubble-wrapper.active .bubble-tooltip { 
    opacity: 1; 
    visibility: visible; 
    pointer-events: auto; 
}
.art-bubble-wrapper.active .tooltip-center { transform: translateX(-50%) translateY(0); }
.art-bubble-wrapper.active .tooltip-left { transform: translateY(0); }
.art-bubble-wrapper.active .tooltip-right { transform: translateY(0); }

/* Hình mũi tên bên dưới hộp thoại */
.bubble-tooltip::after {
    content: ''; position: absolute; top: 100%; border-width: 8px; border-style: solid; border-color: #ffffff transparent transparent transparent;
}