@font-face {
    font-family: 'Be Vietnam Pro';
    src: url('../fonts/BeVietnamPro-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    src: url('../fonts/BeVietnamPro-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    src: url('../fonts/BeVietnamPro-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    src: url('../fonts/BeVietnamPro-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    src: url('../fonts/BeVietnamPro-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'iCiel Neue Plak';
    src: url('../fonts/ICIELNEUEPLAK-WIDE.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'iCiel Neue Plak';
    src: url('../fonts/ICIELNEUEPLAK-SEMIBOLDWIDE.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'iCiel Neue Plak';
    src: url('../fonts/ICIELNEUEPLAK-BOLDWIDE.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DPT Blacksword';
    src: url('../fonts/DPT Blacksword.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('../fonts/NotoSerif-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
body {
    font-family: 'Notoserif', sans-serif;
   
}
header {
    height: 44px;
}

/* Hiệu ứng ẩn hiện card mượt mà dùng CSS Transition thay vì Animation */
.card-item {
    opacity: 0;
    border: 2px solid #60d1c5; /* border-2 border-[#60d1c5] */
    border-radius: 1rem;       /* rounded-2xl (tương đương 16px) */   
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: none;
    /* Không tương tác khi đang ẩn */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(252, 253, 255) 55%,rgba(217, 243, 244) 80%, rgba(184, 232, 234)100%);
}
.card-item.is-hot {
    border-color: #f97316;     /* border-orange-500 */
}
#timeline-step-6 .card-item{
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(252, 253, 255) 55%,#F9E6D5 80%, #F4CCA9 100%);

}
.card-item.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.card-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.card-animate {
    animation: cardUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes cardUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Container chứa các card, chiều cao tăng dần */
.card-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: center;
}

.article-fade {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.article-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.image-reveal {
    filter: blur(8px);
    opacity: 0;
    transform: scale(0.965);
    transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), filter 0.85s ease;
    will-change: opacity, transform, filter;
}

.image-reveal.is-visible {
    filter: blur(0);
    opacity: 1;
    transform: scale(1);
}

.chart-tabs-section {
    display: flex;
    justify-content: center;
    width: 100%;
}

.chart-tabs-frame {
    max-width: 1920px;
    position: relative;
    width: 80%;
}

.chart-tabs-image {
    display: block;
    height: auto;
    width: 100%;
}

.chart-hotspots {
    height: 20%;
    left: 17%;
    position: absolute;
    top: 8%;
    width: 66%;
}

.chart-hotspot {
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    height: 100%;
    padding: 0;
    position: absolute;
    top: 0;
    transition: box-shadow 0.2s ease;
    width: 18%;
}

.chart-hotspot:nth-child(1) {
    left: 0;
}

.chart-hotspot:nth-child(2) {
    left: 20.5%;
}

.chart-hotspot:nth-child(3) {
    left: 41%;
}

.chart-hotspot:nth-child(4) {
    left: 61.5%;
}

.chart-hotspot:nth-child(5) {
    left: 82%;
}

.chart-hotspot:focus-visible,
.chart-hotspot.active {
    /* box-shadow: 0 0 0 4px rgba(96, 209, 197, 0.32); */
    outline: none;
}

#timeline-section {
    min-height: 100vh;
    position: relative;
}

.timeline-sticky {
    min-height: 100vh;
    overflow: hidden;
}
.timeline-sticky h2 {
    font-weight: 600;
    font-size: clamp(28px, 3vw, 40px);
    margin: 15px
}
#bieudo{
    font-family: 'iCiel Neue Plak', sans-serif;
}
#card-wrap,
#year-wrap {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
}

#card-wrap {
    align-items: flex-end;
    padding: 0 40px 0 0px;

}

#card-wrap>div,
#year-wrap>div {
    min-width: 0;
}

.timeline-bg {
    bottom: 74px;
}

#year-wrap {
    bottom: 24px;
    left: 0;
    padding: 0 24px;
    position: absolute;
    z-index: 25;
}

.timeline-step {
    opacity: 0;
    padding: 18px 5px 0;
    position: relative;
    transform: translateY(28px);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    font-family: 'Be Vietnam Pro', sans-serif;
}

.timeline-step::after {
    background: repeating-linear-gradient(180deg,
            rgba(96, 209, 197, 0.9) 0 12px,
            transparent 12px 23px);
    bottom: -92px;
    content: "";
    height: 92px;
    left: 50%;
    opacity: 0;
    position: absolute;
    transform: translateX(-50%);
    transition: opacity 0.55s ease;
    width: 1px;
}

.timeline-step.active {
    opacity: 1;
    transform: translateY(0);
}

.timeline-step.active::after {
    opacity: 1;
}

.timeline-year {
    color: #3aa5a8;
    font-size: clamp(22px, 2vw, 30px);
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 700;
    line-height: 1;
    opacity: 1;
    text-align: center;
    transform: translateY(18px);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    white-space: nowrap;
}

.timeline-year.active {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    #timeline-section {
        min-height: 100vh;
    }

    #card-wrap,
    #year-wrap {
        gap: 14px;
    }

    #year-wrap {
        padding: 0 14px;
    }
}

#timeline-step-0::after {
    height: 90px;
    bottom: 0px;
    margin-left: -13px;
}

#timeline-step-1::after {
    height: 88px;
    bottom: 0px;
    margin-left: -5px;
}

#timeline-step-2::after {
    height: 48px;
    bottom: 43px;
    margin-left: -3px;
}

#timeline-step-3::after {
    height: 38px;
    bottom: 49px;
}
#timeline-step-4::after {
    height: 84px;
    bottom: 52px;
}
#timeline-step-5::after {
  height: 73px;
    bottom: 80px;
}
#timeline-step-6::after {
    background: repeating-linear-gradient(
        180deg,
        rgba(248, 128, 24, 0.95) 0 12px,
        transparent 12px 23px
    );
    height: 105px;
    bottom: 97px;
    margin-left: 4px;
}



.credit-emg {
  max-width: 660px;
  margin: 0 auto;
  font-size: 14px;
  padding: 0 20px;
}
.credit-emg ul {
  list-style: none;
  line-height: 1;
  border-left: 5px solid #ff6a03;
  padding-left: 20px;
  font-weight: 600;
}
.credit-emg ul li {
  margin-bottom: 10px;
}
.credit-emg ul li:last-child {
  margin-bottom: 0;
}/*# sourceMappingURL=style.css.map */