/* Đảm bảo menu-link.active cũng in đậm như menu a.active */
.menu-link.active {
    font-weight: bold;
    color: #094067;
    font-size: 20px;
}

/* Đảm bảo hiệu ứng xuất hiện cho .hero-button */
.hero-button {
    animation: slideUpFadeIn 1.0s ease-out 1.7s forwards !important;
    opacity: 0;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Tạo khoảng trống khi scroll đến anchor để không bị navbar che */
    scroll-padding-top: 120px; /* 30px (top) + 70px (navbar height) + 20px (extra space) */
    /* Ẩn thanh cuộn dọc cho tất cả trình duyệt */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE và Edge */
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100%;
}

/* Ẩn thanh cuộn dọc cho Webkit browsers (Chrome, Safari, Edge) */
html::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

body {
    margin: 0;
    padding: 0;
    background: #ffffff;
    min-height: 100vh;
    font-family: 'Bitter', Arial, sans-serif;
    overflow-x: hidden !important;
    /* Ngăn cuộn ngang */
    width: 100%;
    max-width: 100%;
    /* Ẩn thanh cuộn dọc */
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE và Edge */
}

/* Ẩn thanh cuộn dọc cho body trong Webkit browsers */
body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Ẩn thanh cuộn dọc cho tất cả phần tử trên mobile - quy tắc toàn cục mạnh hơn */
@media (max-width: 768px) {
    /* Ẩn HOÀN TOÀN thanh cuộn dọc cho TẤT CẢ phần tử - độ ưu tiên cực cao */
    html, body, *, *::before, *::after {
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE và Edge */
    }
    
    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    *::-webkit-scrollbar,
    *::before::-webkit-scrollbar,
    *::after::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }
    
    /* Đặc biệt ẩn thanh cuộn dọc cho các phần tử chính */
    html, body, .main-background, .body-bg, .writing, .human_resources, .spacer, .content, .overlay {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    html::-webkit-scrollbar:vertical,
    body::-webkit-scrollbar:vertical,
    .main-background::-webkit-scrollbar:vertical,
    .body-bg::-webkit-scrollbar:vertical,
    .writing::-webkit-scrollbar:vertical,
    .human_resources::-webkit-scrollbar:vertical,
    .spacer::-webkit-scrollbar:vertical,
    .content::-webkit-scrollbar:vertical,
    .overlay::-webkit-scrollbar:vertical {
        display: none !important;
        width: 0 !important;
    }
    
    /* Đảm bảo articles-container vẫn có thanh cuộn ngang */
    .articles-container {
        scrollbar-width: thin !important;
        scrollbar-color: #ef4565 #f1f1f1 !important;
    }
    
    .articles-container::-webkit-scrollbar {
        height: 8px !important;
        width: 0 !important;
    }
    
    .articles-container::-webkit-scrollbar:vertical {
        display: none !important;
        width: 0 !important;
    }
    
    .articles-container::-webkit-scrollbar-thumb {
        background: #ef4565 !important;
        border-radius: 4px !important;
    }
    
    .articles-container::-webkit-scrollbar-track {
        background: #f1f1f1 !important;
    }
}

.body-bg {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}


/* Đảm bảo tất cả containers vừa màn hình */
.main-background {
    max-width: 100%;
    overflow-x: hidden !important;
    /* Ẩn thanh cuộn dọc */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE và Edge */
}

/* Spacer base styles - sẽ được override bởi rule sau */
.spacer {
    overflow-x: hidden;
    box-sizing: border-box;
    /* Ẩn thanh cuộn dọc */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE và Edge */
}

.writing,
.human_resources {
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    /* Ẩn thanh cuộn dọc */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE và Edge */
}

/* Ẩn thanh cuộn dọc cho các containers */
.main-background::-webkit-scrollbar,
.spacer::-webkit-scrollbar,
.writing::-webkit-scrollbar,
.human_resources::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Section chung - nhưng post-section sẽ được override */
.section:not(.post-section) {
    max-width: 100%;
    overflow-x: hidden !important;
}

/* Đảm bảo section.history-section không chặn scroll */
section.history-section,
.section.history-section {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    left: 0 !important;
    right: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    /* Cho phép scroll wheel hoạt động - KHÔNG chặn scroll */
    touch-action: pan-y;
    /* Đảm bảo không chặn scroll events */
    pointer-events: auto;
    /* Ẩn thanh cuộn dọc nếu có */
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE và Edge */
}

/* Ẩn thanh cuộn dọc cho section.history-section trong Webkit browsers */
section.history-section::-webkit-scrollbar,
.section.history-section::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Đảm bảo section.history-section.animate không chặn scroll */
section.history-section.animate,
.section.history-section.animate {
    width: calc(100% + 10vw) !important;
    max-width: calc(100% + 10vw) !important;
    margin-left: -5vw !important;
    margin-right: -5vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    left: 0 !important;
    right: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    /* Cho phép scroll wheel hoạt động - KHÔNG chặn scroll */
    touch-action: pan-y;
    /* Đảm bảo không chặn scroll events */
    pointer-events: auto;
    /* Ẩn thanh cuộn dọc nếu có */
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE và Edge */
}

/* Ẩn thanh cuộn dọc cho section.history-section.animate trong Webkit browsers */
section.history-section.animate::-webkit-scrollbar,
.section.history-section.animate::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.spacer {
    max-height: 51vw;
    overflow: hidden;
}

.content,
.overlay,
.articles-container,
.team-grid {
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
}

/* Navbar */
.navbar {
    width: 60vw;
    max-width: min(1200px, calc(100vw - 40px));
    min-width: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-radius: 45px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    /* Animation cho navbar */
    opacity: 0;
    animation: navbarFadeIn 1.0s ease-out forwards;
    animation-delay: 0.1s;
    /* Đảm bảo transition có thể override animation sau khi animation hoàn thành */
    animation-fill-mode: forwards;
}

/* Keyframes cho navbar */
@keyframes navbarFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.logo {
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #094067;
    font-size: 25px;
}

.logo img {
    height: 60px;
    margin-right: 10px;

}

.menu {
    display: flex;
    gap: 30px;
}

.menu a {
    text-decoration: none;
    color: #374151;
    font-size: 15px;
    font-weight: 500;
}

.menu a.active {
    font-weight: bold;
    color: #094067;
    font-size: 20px;
}

.menu a.disabled {
    color: #094067;
    pointer-events: none;
    font-size: 20px;
}

/* Header */
header {
    background: rgba(255, 255, 255, 0.85);
    color: #1565C0;
    text-align: center;
    padding: 24px 0 16px 0;
    border-radius: 20px;
    width: 70%;
    max-width: 800px;
    margin-bottom: 20px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.07);
}

h1 {
    margin: 0;
    font-size: 2.2em;
    font-weight: bold;
}

header p {
    margin: 10px 0 0 0;
    font-size: 1.1em;
    color: #374151;
}

/* Confession Card */
.confession-card {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.confession-card h3 {
    margin-top: 0;
    color: #1565C0;
}

.confession-card p {
    color: #374151;
    margin-bottom: 8px;
}

.date {
    font-size: 0.9em;
    color: #6B7280;
}

/* From Uiverse.io by satyamchaudharydev */
.button {
    position: relative;
    transition: all 0.3s ease-in-out;
    padding-block: 0.75rem;
    padding-inline: 1.25rem;
    background-color: #094067;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffff;
    gap: 5px;
    font-weight: bold;
    border: 3px solid #ffffff4d;
    outline: none;
    overflow: hidden;
    font-size: 15px;
    cursor: pointer;
}

.icon {
    width: 24px;
    height: 24px;
    transition: all 0.3s ease-in-out;
}

.button:hover {
    transform: scale(1.05);
    border-color: #fff9;
}

.button:hover .icon {
    transform: translate(4px);
}

.button:hover::before {
    animation: shine 1.5s ease-out infinite;
}

.button::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100%;
    background-image: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, 0.8),
            rgba(255, 255, 255, 0) 70%);
    top: 0;
    left: -100px;
    opacity: 0.6;
}

@keyframes shine {
    0% {
        left: -100px;
    }

    60% {
        left: 100%;
    }

    to {
        left: 100%;
    }
}

.section {
    margin: 0 auto;

}

.home-section {
    background: #E3F2FD;
}

.post-section {
    background: #fffffe;
    padding-left: 0;
    padding-right: 0;
}

/* Đảm bảo section.post-section KHÔNG có thanh trượt ngang */
.section.post-section {
    overflow-x: hidden !important; /* Không có thanh trượt ngang */
    overflow-y: visible !important; /* Cho phép box-shadow hiển thị ở trên và dưới */
    max-width: 100%;
    /* Ẩn thanh cuộn dọc */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE và Edge */
}

/* Ẩn thanh cuộn dọc cho section.post-section trong Webkit browsers */
.section.post-section::-webkit-scrollbar:vertical {
    display: none !important;
    width: 0 !important;
}

.section.post-section::-webkit-scrollbar {
    height: 0 !important; /* Ẩn thanh cuộn dọc */
}

.history-section {
    padding-top: 50px;
    color: #094067;
    text-align: center;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 20px;
    position: relative;
    left: 0;
    right: 0;
    /* Ẩn ban đầu, chờ scroll */
    opacity: 0;
    transform: translateY(50px);
    transition: all 1.2s ease-out;
    /* Tạo khoảng trống khi scroll đến section để không bị navbar che */
    scroll-margin-top: 120px; /* 30px (top) + 70px (navbar height) + 20px (extra space) */
    overflow: visible !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    /* Cho phép scroll wheel hoạt động - KHÔNG chặn scroll */
    touch-action: pan-y;
    /* Đảm bảo không chặn scroll events */
    pointer-events: auto;
    /* Ẩn thanh cuộn dọc nếu có */
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE và Edge */
}

/* Ẩn thanh cuộn dọc cho history-section trong Webkit browsers */
.history-section::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Đảm bảo tất cả các phần tử con trong history-section không tạo scrollbar */
.history-section *,
.history-section.animate * {
    /* Ẩn scrollbar cho tất cả phần tử con */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.history-section *::-webkit-scrollbar,
.history-section.animate *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Đảm bảo các container con không chặn scroll */
.history-section .history-wrapper,
.history-section .history-stage,
.history-section .history-timeline-right,
.history-section .timeline-content,
.history-section .timeline-cards-wrapper,
.history-section .timeline-cards-container {
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    /* Không tạo scrollbar */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.history-section .history-wrapper::-webkit-scrollbar,
.history-section .history-stage::-webkit-scrollbar,
.history-section .history-timeline-right::-webkit-scrollbar,
.history-section .timeline-content::-webkit-scrollbar,
.history-section .timeline-cards-wrapper::-webkit-scrollbar,
.history-section .timeline-cards-container::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Class được thêm khi scroll đến */
.history-section.animate {
    opacity: 1;
    transform: translateY(0);
    /* Cho phép scroll wheel hoạt động */
    touch-action: pan-y;
    /* Ẩn thanh cuộn dọc nếu có */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE và Edge */
}

/* Ẩn thanh cuộn dọc cho history-section.animate trong Webkit browsers */
.history-section.animate::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.history-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #d8eefe;
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    pointer-events: none; /* Cho phép scroll và tương tác với các phần tử bên dưới */
}

.history-section>* {
    position: relative;
    z-index: 2;
}

.history-section h2 {
    font-size: 3rem;
    margin: 10px 0;
    font-weight: bold;
    color: #094067;
}

.history-section h2:first-child {
    font-size: 2.5rem;
    color: #ef4565;
}

.history-subtitle {
    margin-top: 20px;
    margin-bottom: 50px;
}

.history-subtitle p {
    color: #6c757d;
    font-size: 1.2rem;
    opacity: 0.9;
    margin: 0 auto;
}

/* Timeline Styles */
.timeline-container {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    padding: 5px 20px;
    transition: all 0.5s ease;
}

/* Toggle Button - Legacy (cần được chuyển sang timeline-toggle-left) */
.timeline-toggle-legacy {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    padding: 15px 30px;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 30px auto;
    font-size: 16px;
    font-weight: bold;
    color: #094067;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.timeline-toggle-legacy:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

.toggle-arrow {
    position: relative;
    width: 24px;
    height: 24px;
}

.toggle-arrow svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    transition: all 0.3s ease;
}

.toggle-arrow .arrow-down {
    opacity: 1;
    transform: rotate(0deg);
}

.toggle-arrow .arrow-up {
    opacity: 0;
    transform: rotate(180deg);
}

/* When timeline is open */
.timeline-open .toggle-arrow .arrow-down {
    opacity: 0;
    transform: rotate(-180deg);
}

.timeline-open .toggle-arrow .arrow-up {
    opacity: 1;
    transform: rotate(0deg);
}

.timeline-open .toggle-text::after {
    content: " (Đóng lại)";
}

/* Main timeline line */
.timeline-container::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0.5));
    transform: translateX(-50%);
    border-radius: 2px;
}

.timeline-item {
    position: relative;
    margin: 40px 0;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: all 0.8s ease;
}

/* Initial positions cho 3 item đầu tiên */
.timeline-item:nth-child(1) {
    transform: translateX(-100px);
}

.timeline-item:nth-child(2) {
    transform: translateX(100px);
}

.timeline-item:nth-child(3) {
    transform: translateX(-100px);
}

/* Các item còn lại */
.timeline-item:nth-child(n+4) {
    transform: translateY(30px);
}

/* Khi scroll trigger */
.timeline-item.animate {
    opacity: 1;
    transform: translateX(0) translateY(0);
}

/* Staggered delays */
.timeline-item:nth-child(1).animate {
    transition-delay: 0.1s;
}

.timeline-item:nth-child(2).animate {
    transition-delay: 0.3s;
}

.timeline-item:nth-child(3).animate {
    transition-delay: 0.5s;
}

.timeline-item:nth-child(n+4).animate {
    transition-delay: 0.7s;
}

/* Alternate layout - So le rõ ràng bằng class */
.timeline-item.left {
    flex-direction: row !important;
    justify-content: flex-start !important;
}

.timeline-item.right {
    flex-direction: row-reverse !important;
    justify-content: flex-start !important;
}

/* Tăng khoảng cách giữa date và content để tạo hiệu ứng so le rõ ràng */
.timeline-item.left .timeline-date {
    margin-right: 40px !important;
    margin-left: 20px !important;
}

.timeline-item.right .timeline-date {
    margin-left: 40px !important;
    margin-right: 20px !important;
}

/* Đảm bảo content box có kích thước cân đối */


/* Thêm arrow pointing để làm rõ hướng */
.timeline-item.left .timeline-content::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 30px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid rgba(255, 255, 255, 0.95);
}

.timeline-item.right .timeline-content::before {
    content: '';
    position: absolute;
    right: -10px;
    top: 30px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid rgba(255, 255, 255, 0.95);
}

.timeline-date {
    background: linear-gradient(135deg, #ef4565, #d13b56);
    color: white;
    padding: 15px 25px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 18px;
    min-width: 80px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(239, 69, 101, 0.3);
    position: relative;
    z-index: 3;
    margin: 0 30px;
    transition: all 0.3s ease;
}

.timeline-date:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 35px rgba(239, 69, 101, 0.4);
}

.timeline-content {
    margin: 0;
    background: rgba(255, 255, 255, 0.95);
    padding: 25px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 1000px;
    text-align: left;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.timeline-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.timeline-content h3 {
    color: #094067;
    font-size: 20px;
    margin: 0 0 10px 0;
    font-weight: bold;
}

.timeline-content p {
    color: #5f6c7b;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* Current/Special item */
.timeline-item.current .timeline-date {
    background: linear-gradient(135deg, #4ecdc4, #45b7d1);
    animation: pulse 2s infinite;
}

.timeline-item.current .timeline-content {
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.1), rgba(69, 183, 209, 0.1));
    border: 2px solid rgba(78, 205, 196, 0.3);
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 8px 25px rgba(78, 205, 196, 0.3);
    }

    50% {
        box-shadow: 0 8px 25px rgba(78, 205, 196, 0.6), 0 0 30px rgba(78, 205, 196, 0.4);
    }
}

.timeline-toggle-left {
    background: linear-gradient(135deg, #ef4565, #d13b56);
    border: none;
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    /* Thay đổi: nằm bên trái thay vì giữa */
    margin: 30px 0;
    margin-left: 0;
    margin-right: auto;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(239, 69, 101, 0.3);
    width: fit-content;
}

.timeline-toggle-left:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 69, 101, 0.4);
    background: linear-gradient(135deg, #f85577, #e04968);
}

/* Detail Toggle Button for Team Members - Nằm giữa */
.detail-toggle-center {
    background: linear-gradient(135deg, #ef4565, #d13b56);
    border: none;
    color: white;
    padding: 8px 15px;
    border-radius: 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Căn giữa */
    gap: 8px;
    margin: 15px auto;
    /* auto để căn giữa */
    font-size: 12px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(239, 69, 101, 0.3);
    width: fit-content;
    position: relative;
    z-index: 10;
    pointer-events: auto;
    -webkit-user-select: none;
    user-select: none;
}

.detail-toggle-center:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 69, 101, 0.4);
}

.detail-arrow {
    position: relative;
    width: 16px;
    height: 16px;
}

.detail-arrow svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    transition: all 0.3s ease;
}

.detail-arrow .arrow-down {
    opacity: 1;
    transform: rotate(0deg);
}

.detail-arrow .arrow-up {
    opacity: 0;
    transform: rotate(180deg);
}

/* When detail is open */
.detail-open .detail-arrow .arrow-down {
    opacity: 0;
    transform: rotate(-180deg);
}

.detail-open .detail-arrow .arrow-up {
    opacity: 1;
    transform: rotate(0deg);
}

/* Detail Content */
.detail-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease;
    margin-top: 15px;
}

.detail-content.show {
    max-height: 5000px;
    opacity: 1;
    margin-top: 20px;
}

.detail-section {
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(9, 64, 103, 0.05);
    border-radius: 10px;
    border-left: 4px solid #ef4565;
}

.detail-section h4 {
    color: #094067;
    font-size: 16px;
    margin: 0 0 10px 0;
    font-weight: bold;
}

.detail-section ul {
    margin: 0;
    padding-left: 20px;
    color: #5f6c7b;
}

.detail-section li {
    margin-bottom: 5px;
    font-size: 13px;
}

.detail-section p {
    margin: 0;
    color: #5f6c7b;
    font-size: 13px;
    line-height: 1.5;
}


/* Rating Grid */
.rating-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
}

.rating-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    border: 1px solid rgba(9, 64, 103, 0.1);
}

.rating-label {
    font-size: 13px;
    color: #094067;
    font-weight: 500;
}

.rating-stars {
    font-size: 14px;
    color: #FFD700;
}

/* Comment Section */
.comment-section {
    margin-top: 10px;
}

.comment-item {
    margin-bottom: 15px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(239, 69, 101, 0.05) 0%, rgba(9, 64, 103, 0.05) 100%);
    border-radius: 10px;
    border-left: 3px solid #ef4565;
}

.comment-item:last-child {
    margin-bottom: 0;
}

.comment-text {
    font-size: 13px;
    color: #5f6c7b;
    line-height: 1.5;
    margin: 0 0 8px 0;
    font-style: italic;
}

.comment-author {
    font-size: 12px;
    color: #ef4565;
    font-weight: 600;
    margin: 0;
    text-align: right;
}

/* Special item highlight */
.timeline-item.special-item .timeline-content {
    border: 2px solid #5f6c7b17;
    background: linear-gradient(135deg, rgba(239, 69, 101, 0.05), rgba(255, 255, 255, 0.95));
}

@media (max-width: 768px) {
    /* Ẩn thanh cuộn dọc trên tablet */
    html {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    html::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    body {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    body::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    .history-section h2 {
        font-size: 2rem;
    }

    .history-section h2:first-child {
        font-size: 1.5rem;
    }

    .history-subtitle p {
        font-size: 1rem;
    }

    .stat-number {
        font-size: 16px;
    }

    .detail-section {
        padding: 12px;
    }
}

/* Timeline More Toggle */
.timeline-more-toggle {
    display: flex;
    justify-content: center;
    margin: 40px 0;
    position: relative;
    transition: all 0.3s ease;
}

.timeline-more-toggle.bottom-toggle {
    margin-top: 30px;
    margin-bottom: 20px;
}

/* Ẩn nút "Xem thêm" khi timeline mở */
.timeline-more-open .timeline-more-toggle:not(.bottom-toggle) {
    opacity: 0;
    max-height: 0;
    margin: 0;
    overflow: hidden;
}

.timeline-more-toggle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.more-timeline-btn {
    background: linear-gradient(135deg, #5f6c7b, #094067) !important;
    color: white !important;
    padding: 12px 24px !important;
    border-radius: 25px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px #0940675d !important;
    position: relative !important;
    z-index: 2 !important;
}


.more-timeline-btn:hover {
    background: white !important;
    color: #094067 !important;
    border-color: #094067 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(9, 64, 103, 0.3) !important;
}


.more-arrow {
    position: relative;
    width: 18px;
    height: 18px;
}

.more-arrow svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    transition: all 0.3s ease;
}

.more-arrow .arrow-down {
    opacity: 1;
    transform: rotate(0deg);
}

.more-arrow .arrow-up {
    opacity: 0;
    transform: rotate(180deg);
}

/* When timeline more is open */
.timeline-more-open .more-arrow .arrow-down {
    opacity: 0;
    transform: rotate(-180deg);
}

.timeline-more-open .more-arrow .arrow-up {
    opacity: 1;
    transform: rotate(0deg);
}

/* Timeline More Content */
.timeline-more-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.5s ease;
}

.timeline-more-content.show {
    max-height: 20000px;
    opacity: 1;
}

/* Animation delay cho các items ẩn */
.timeline-more-content .timeline-item {
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.timeline-more-content.show .timeline-item {
    transform: translateY(0);
}

.timeline-more-content.show .timeline-item:nth-child(1) {
    transition-delay: 0.1s;
}

.timeline-more-content.show .timeline-item:nth-child(2) {
    transition-delay: 0.2s;
}

.timeline-more-content.show .timeline-item:nth-child(3) {
    transition-delay: 0.3s;
}

.img-logo {
    width: 500px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: block;
    margin-bottom: 130px;
    margin-right: 650px;
    /* Đẩy các phần tử sau sang phải */
    /* Animation trượt lên với delay */
    opacity: 0;
    transform: translateY(60px) scale(0.8);
    animation: logoFadeIn 1.5s ease-out 0.5s forwards;
}

/* Keyframes cho logo */
@keyframes logoFadeIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.logo-row {
    margin-top: 32%;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Tạo bối cảnh định vị cho các phần tử con */
}

.main-background {
    padding-left: 5%;
    padding-right: 5%;
}

.overlay {
    text-align: center;
}

.spacer {
    background-color: #000;
    background-image: radial-gradient(circle at top right, rgba(121, 68, 154, 0.13), transparent),
        radial-gradient(circle at 20% 80%, rgba(41, 196, 255, 0.13), transparent);
    margin-left: -5vw;
    margin-right: -5vw;
    width: calc(100% + 10vw);
    position: relative;
    left: 0;
    right: auto;
    overflow: hidden;
    /* Ngăn tràn */
    /* Đảm bảo width phản ứng với padding của container cha */
    box-sizing: content-box;
}

/* Keyframes cho hiệu ứng trượt lên */
@keyframes slideUpFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-heading {
    position: absolute;
    font-size: 100px;
    color: #ffff;
    font-weight: bold;
    margin-bottom: 460px;
    margin-left: 450px;
    opacity: 0;
    transform: translateY(50px);
    animation: slideUpFadeIn 1.2s ease-out 0.8s forwards;
}

.hero-heading1 {
    font-family: "Pacifico", cursive;
    position: absolute;
    font-size: 100px;
    color: #ffff;
    margin-bottom: 200px;
    margin-left: 350px;
    opacity: 0;
    transform: translateY(50px);
    animation: slideUpFadeIn 1.2s ease-out 1.1s forwards;
}

.hero-heading2 {
    font-family: "Bitter", serif;
    font-optical-sizing: auto;
    font-style: normal;
    position: absolute;
    font-size: 20px;
    color: #ffff;
    font-weight: normal;
    margin-left: 210px;
    margin-top: 100px;
    opacity: 0;
    transform: translateY(30px);
    animation: slideUpFadeIn 1.0s ease-out 1.4s forwards;
}

.hero-button {
    position: absolute;
    margin-right: 50px;
    margin-top: 250px;
    z-index: 999;
    transform: translateY(30px);
    animation: slideUpFadeIn 1.0s ease-out 1.7s forwards;
}


button,
a.learn-more {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    background: transparent;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
}

button.learn-more,
a.learn-more {
    width: 12rem;
    height: auto;
}

button.learn-more .circle,
a.learn-more .circle {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: relative;
    display: block;
    margin: 0;
    width: 3rem;
    height: 3rem;
    background: #ef4565;
    border-radius: 1.625rem;
}

button.learn-more .circle .icon,
a.learn-more .circle .icon {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
}

button.learn-more .circle .icon.arrow,
a.learn-more .circle .icon.arrow {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    left: 0.625rem;
    width: 1.125rem;
    height: 0.125rem;
    background: none;
}

button.learn-more .circle .icon.arrow::before,
a.learn-more .circle .icon.arrow::before {
    position: absolute;
    content: "";
    top: -0.29rem;
    right: 0.0625rem;
    width: 0.625rem;
    height: 0.625rem;
    border-top: 0.125rem solid #fff;
    border-right: 0.125rem solid #fff;
    transform: rotate(45deg);
}

button.learn-more .button-text,
a.learn-more .button-text {
    font-family: Arial, sans-serif;
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0.75rem 0;
    margin: 0 0 0 1.85rem;
    color: #fff;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    text-transform: uppercase;
}

button:hover .circle,
a.learn-more:hover .circle {
    width: 115%;
}

button:hover .circle .icon.arrow,
a.learn-more:hover .circle .icon.arrow {
    background: #fff;
    transform: translate(1rem, 0);
}

button:hover .button-text,
a.learn-more:hover .button-text {
    color: #fff;
}

.canva {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 50vw;
    /* Allow scrolling while keeping mouse effects */
    touch-action: pan-y pan-x; /* Enable touch scrolling */
}

/* Hiệu ứng ánh sáng - 2 tia sáng chéo từ góc trên trái */
.spacer::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: 120%;
    height: 120%;
    background: 
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0.4) 8%,
            rgba(255, 255, 255, 0.3) 15%,
            rgba(255, 255, 255, 0.22) 25%,
            rgba(255, 255, 255, 0.15) 35%,
            rgba(255, 255, 255, 0.08) 50%,
            rgba(255, 255, 255, 0.04) 65%,
            transparent 80%
        ),
        linear-gradient(
            125deg,
            rgba(255, 255, 255, 0.45) 0%,
            rgba(255, 255, 255, 0.35) 10%,
            rgba(255, 255, 255, 0.28) 20%,
            rgba(255, 255, 255, 0.2) 30%,
            rgba(255, 255, 255, 0.12) 45%,
            rgba(255, 255, 255, 0.06) 60%,
            transparent 75%
        );
    background-size: 100% 100%;
    background-position: 0 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    animation: lightBeamsFadeIn 2.0s ease-out 1.0s forwards;
    filter: blur(1px);
}

@keyframes lightBeamsFadeIn {
    0% {
        opacity: 0;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.writing {
    background-color: #fffffe;
    padding-top: 50px;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1.0s ease-out;
    position: relative;
    overflow: hidden;
}

/* Class được thêm khi scroll đến */
.writing.animate {
    opacity: 1;
    transform: translateY(0);
}

/* Section Wrapper */
.section-wrapper {
    margin: 0 auto;
    position: relative;
    z-index: 1;
    overflow: visible; /* Cho phép box-shadow hiển thị */
    /* Ẩn thanh cuộn dọc */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE và Edge */
}

/* Ẩn thanh cuộn dọc cho section-wrapper */
.section-wrapper::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Posts Section - Background với gradient nhẹ */
.posts-section {
    padding: 60px 0 20px 0; /* Tăng padding-top lên 120px để có không gian cho card hover lên */
    position: relative;
    overflow-x: hidden !important; /* Không có scroll ngang ở level này */
    overflow-y: visible; /* Cho phép box-shadow hiển thị ở trên và dưới */
    /* Tạo khoảng trống khi scroll đến section để không bị navbar che */
    scroll-margin-top: 120px; /* 30px (top) + 70px (navbar height) + 20px (extra space) */
    /* Ẩn thanh cuộn dọc */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE và Edge */
}

/* Ẩn thanh cuộn dọc cho posts-section */
.posts-section::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}


/* Confessions Section - Background với gradient nhẹ */
.confessions-section {
    margin-left: -5vw;
    margin-right: -5vw;
    width: calc(100% + 10vw);
    position: relative;
    left: 0;
    right: auto;
    background: #d8eefe;
    padding: 70px 0 70px 0; /* Tăng padding-top lên 120px để có không gian cho card hover lên */
    overflow-x: hidden !important; /* Không có scroll ngang ở level này */
    overflow-y: visible; /* Cho phép box-shadow hiển thị ở trên và dưới */
    /* Tạo khoảng trống khi scroll đến section để không bị navbar che */
    scroll-margin-top: 120px; /* 30px (top) + 70px (navbar height) + 20px (extra space) */
    /* Ẩn thanh cuộn dọc */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE và Edge */
    /* Đảm bảo width phản ứng với padding của container cha */
    box-sizing: content-box;
}

/* Ẩn thanh cuộn dọc cho confessions-section */
.confessions-section::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.confessions-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    pointer-events: none;
    z-index: 0;
}

/* Confession circles với màu khác */
.confession-circle {
    background: linear-gradient(135deg, rgba(239, 69, 101, 0.06) 0%, rgba(255, 107, 122, 0.06) 100%);
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -30px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

/* Section Divider */


.confession-divider {
    background: linear-gradient(90deg, transparent 0%, #ef4565 50%, transparent 100%);
}

.heading-section {
    text-align: center;
    margin-bottom: 60px;
    align-items: center;
    /* Ẩn ban đầu, chờ scroll */
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.0s ease-out 0.2s;
    position: relative;
    z-index: 2;
}

/* Class được thêm khi scroll đến */
.heading-section.animate {
    opacity: 1;
    transform: translateY(0);
}


.confessions-section .articles-container{
    margin-left: 9vw;
    margin-right: 9vw;
}
.heading-section h2 {
    font-weight: 800;
    color: #094067;
    font-size: 3rem;
    margin: 15px 0 20px;
    letter-spacing: -0.8px;
    /* background: linear-gradient(135deg, #094067 0%, #3da9fc 50%, #094067 100%); */
    /* background-size: 200% auto; */
    -webkit-background-clip: text;
    /* -webkit-text-fill-color: transparent; */
    background-clip: text;
    /* animation: gradient-shift 3s 
ease infinite; */
    position: relative;
}

@keyframes gradient-shift {
    0%, 100% {
        background-position: 0% center;
    }
    50% {
        background-position: 100% center;
    }
}

/* Section Subtitle */
.section-subtitle {
    font-size: 1.15rem;
    color: #5f6c7b;
    line-height: 1.85;
    max-width: 750px;
    margin: 0 auto;
    font-weight: 400;
    letter-spacing: 0.3px;
    padding: 0 20px;
}

.articles-container {
    display: flex;
    gap: 30px;
    padding: 40px 60px 60px 60px; /* Tăng padding tất cả các phía để box-shadow không bị cắt */
    overflow-x: hidden !important; /* Không có thanh trượt ngang */
    overflow-y: visible; /* Cho phép box-shadow hiển thị ở trên và dưới */
    scroll-behavior: smooth;
    position: relative;
    z-index: 2;
    /* Scroll snap để cards dừng lại đẹp hơn khi scroll */
    scroll-snap-type: x mandatory;
    scroll-padding: 120px; /* Tăng scroll-padding để shadow không bị cắt khi scroll */
    /* Ẩn thanh cuộn dọc - chỉ hiển thị thanh cuộn ngang */
    /* Đã ẩn scrollbar - sử dụng nút mũi tên thay thế */
}

/* Confessions Section - articles-container và section.post-section có cùng màu background với confessions-section */
.confessions-section .articles-container,
.confessions-section .section.post-section {
    background: #d8eefe !important; /* Cùng màu với .confessions-section */
}

/* Ẩn hoàn toàn thanh cuộn ngang cho articles-container ở tất cả kích thước */
.articles-container {
    scrollbar-width: none !important; /* Firefox - ẩn scrollbar */
    -ms-overflow-style: none !important; /* IE và Edge - ẩn scrollbar */
}

.articles-container::-webkit-scrollbar {
    display: none !important; /* Ẩn scrollbar trên Webkit browsers */
    width: 0 !important;
    height: 0 !important;
}

/* Đảm bảo không có thanh cuộn dọc */
.articles-container::-webkit-scrollbar:vertical {
    display: none !important;
    width: 0 !important;
}

/* Nút mũi tên điều khiển scroll - chỉ hiển thị trên desktop/PC */
.articles-container-wrapper {
    position: relative;
}

.scroll-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #ef4565;
    border-radius: 50%;
    display: none; /* Mặc định ẩn, sẽ hiện khi có đủ 4 bài viết */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
}

.articles-container-wrapper:hover .scroll-nav-btn {
    opacity: 1;
    pointer-events: auto;
}

/* Chỉ hiển thị nút khi có display: flex (tức là có đủ 4 bài viết) */
.articles-container-wrapper:hover .scroll-nav-btn[style*="display: flex"] {
    opacity: 1;
    pointer-events: auto;
}

/* Ẩn nút khi display: none */
.scroll-nav-btn[style*="display: none"] {
    opacity: 0 !important;
    pointer-events: none !important;
}

.scroll-nav-btn:hover {
    background: #ef4565;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(239, 69, 101, 0.4);
}

.scroll-nav-btn:hover svg {
    color: #fff;
}

.scroll-nav-btn.prev {
    left: 40px;
}

.scroll-nav-btn.next {
    right: 40px;
}

.scroll-nav-btn svg {
    width: 24px;
    height: 24px;
    color: #ef4565;
    transition: color 0.3s ease;
}

.scroll-nav-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.scroll-nav-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Ẩn nút mũi tên trên mobile/tablet */
@media (max-width: 768px) {
    .scroll-nav-btn {
        display: none !important;
    }
}

/* Animation cho bài viết khi scroll bằng nút mũi tên */
.articles-container.scrolling {
    scroll-behavior: smooth;
}

/* Keyframes animation cho slide in khi scroll - nhẹ nhàng hơn */
@keyframes slideInFromSide {
    0% {
        opacity: 0.9;
        transform: scale(0.98);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Keyframes animation cho slide out khi scroll */
@keyframes slideOutToSide {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
    100% {
        opacity: 0.5;
        transform: scale(0.92);
        filter: blur(2px);
    }
}

/* Hiệu ứng fade và slide khi scroll - chỉ áp dụng khi có class scrolling */
.articles-container.scrolling .article-card {
    animation: slideInFromSide 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    will-change: transform, opacity;
}

/* Animation cho card khi scroll - delay nhẹ hơn để mượt mà */
.articles-container.scrolling .article-card {
    animation-delay: 0s;
}

/* Hiệu ứng pulse cho nút khi click */
@keyframes buttonPulse {
    0% {
        transform: translateY(-50%) scale(1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    50% {
        transform: translateY(-50%) scale(0.92);
        box-shadow: 0 2px 8px rgba(239, 69, 101, 0.3);
    }
    100% {
        transform: translateY(-50%) scale(1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
}

.scroll-nav-btn:active {
    animation: buttonPulse 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.article-card {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    /* Transition MẶC ĐỊNH cho hover - nhanh và không delay */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    min-height: 400px;
    min-width: 340px;
    scroll-margin-top: 120px;
    max-width: 340px;
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    border: 1px solid rgba(9, 64, 103, 0.08);
    position: relative; /* Đảm bảo có position để z-index hoạt động khi hover */
    scroll-snap-align: start;
    backdrop-filter: blur(10px);
    z-index: 1; /* Z-index mặc định */
}

/* Decorative gradient overlay trên card */
.article-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;

    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Class được thêm khi scroll đến */
.article-card.animate {
    opacity: 1;
    transform: translateY(0) scale(1);
    /* Transition cho scroll animation */
    transition: transform 0.8s ease, opacity 1.0s ease-out, box-shadow 0.3s ease;
}

/* Hover animation - Override transition cho hover */
.article-card:hover {
    transform: translateY(-12px) scale(1.03) !important; 
    border-color: rgba(9, 64, 103, 0.15) !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s ease !important;
    transition-delay: 0s !important;
    position: relative;
    z-index: 10;
    /* Animation cho box-shadow xuất hiện và mờ dần */
    animation: shadowPulse 2s ease-in-out infinite !important;
}

/* Keyframes cho hiệu ứng box-shadow xuất hiện và mờ dần */
@keyframes shadowPulse {
    0% {
        box-shadow: 0 20px 50px rgba(9, 64, 103, 0.15);
    }
    50% {
        box-shadow: 0 25px 60px rgba(9, 64, 103, 0.35);
    }
    100% {
        box-shadow: 0 20px 50px rgba(9, 64, 103, 0.15);
    }
}

.article-card:hover::before {
    opacity: 1;
    height: 6px;
}

.article-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.article-card:hover img {
    transform: scale(1.05);
}

.article-card h3 {
    font-size: 1.3em;
    color: #094067;
    margin: 20px 24px 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.3px;
}

.article-card p {
    font-size: 0.95em;
    color: #5f6c7b;
    margin: 0 24px;
    flex-grow: 1;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-card .read-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 20px 24px 24px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #ef4565 0%, #ff6b7a 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.95em;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(239, 69, 101, 0.2);
    position: relative;
    overflow: hidden;
}

.article-card .read-more::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.article-card .read-more:hover {
    background: linear-gradient(135deg, #d13b56 0%, #ef4565 100%);
    box-shadow: 0 6px 20px rgba(239, 69, 101, 0.35);
    transform: translateY(-2px);
}

.article-card .read-more:hover::before {
    left: 100%;
}

.article-card .read-more::after {
    content: '→';
    font-size: 1.2em;
    transition: transform 0.3s ease;
}

.article-card .read-more:hover::after {
    transform: translateX(4px);
}

/* Hashtags cho confessions trên trang chủ */
.confession-hashtags-index {
    margin: 10px 20px 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hashtag-index {
    display: inline-block;
    padding: 4px 10px;
    background: #d8eefe;
    color: #094067;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.hashtag-index:hover {
    background: #094067;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(9, 64, 103, 0.2);
}

.nghieng {
    font-style: italic;
}

/* Human Resources Section */
.human_resources {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1.2s ease-out;
    /* Tạo khoảng trống khi scroll đến section để không bị navbar che */
    scroll-margin-top: 120px; /* 30px (top) + 70px (navbar height) + 20px (extra space) */
}

/* Class được thêm khi scroll đến */
.human_resources.animate {
    opacity: 1;
    transform: translateY(0);
}

.hr-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    /* padding-bottom: 30px; */
}

.hr-header {
    margin-top: 60px;
    text-align: center;
    margin-bottom: 60px;
}

.hr-header h2 {
    font-size: 3rem;
    color: #094067;
    margin: 10px 0;
    font-weight: bold;
}

.hr-header h2:first-child {
    font-size: 2.5rem;
    color: #ef4565;
}

.hr-subtitle {
    margin-top: 20px;
}

.hr-subtitle p {
    font-size: 1.2rem;
    color: #6c757d;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Team Toggle */
.team-toggle {
    background: #094067;
    border: none;
    padding: 15px 30px;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 30px auto;
    font-size: 16px;
    font-weight: bold;
    color: #fffffe;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.team-toggle:hover {
    color: #094067;
    background: rgba(255, 255, 255, 1);
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

.team-container {
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease;
    padding: 0;
}

.team-container.show {
    max-height: 5000px;
    padding: 20px 0;
    overflow: visible;
}

/* Team Grid - Base Styles */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
    margin-top: 30px;
    justify-items: center;
}

/* Team Grid Animate - Center alignment in human_resources section */
.human_resources .team-grid.animate {
    justify-items: center;
    margin-left: auto;
    margin-right: auto;
}

/* Team Grid inside collapsible container */
.team-container .team-grid {
    padding: 0 15px;
    margin-top: 0;
}

/* Team Grid Animate inside collapsible container */
.team-container .team-grid.animate {
    justify-items: center;
}

/* Team Card - Center alignment in human_resources section */
.human_resources .team-card {
    margin-left: auto;
    margin-right: auto;
}

.team-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    /* Transition MẶC ĐỊNH cho hover - nhanh và không delay */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    /* Ẩn ban đầu, chờ scroll */
    opacity: 0;
    transform: translateY(40px) scale(0.95);
}

/* Class được thêm khi scroll đến */
.team-card.animate {
    opacity: 1;
    transform: translateY(0) scale(1);
    /* Transition cho scroll animation */
    transition: transform 0.8s ease, opacity 1.0s ease-out;
}

/* Hover animation - Override transition cho hover */
.team-card:hover {
    transform: translateY(-10px) scale(1) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    /* FORCE transition nhanh cho hover */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    transition-delay: 0s !important;
}

.team-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ef4565, #094067);
}

.team-card.leadership::before {
    background: linear-gradient(90deg, #ffd700, #ff6b35);
}

.team-card.featured::before {
    background: linear-gradient(90deg, #4ecdc4, #44a08d);
}

/* Base card-header - minimal styling, no alignment */
.card-header {
    margin-bottom: 20px;
}

/* Team Card Header - Center alignment (only for team cards in human_resources) */
.human_resources .team-card .card-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

/* Base avatar - minimal styling */
.avatar {
    position: relative;
    margin-bottom: 15px;
}

/* Team Card Avatar - Center alignment for human_resources section (separated) */
.human_resources .team-card .avatar {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: fit-content;
    text-align: center;
    margin-bottom: 15px;
}

/* Ensure avatar image is centered within avatar container */
.human_resources .team-card .avatar img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.avatar img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid #e9ecef;
    transition: all 0.3s ease;
    object-fit: cover;
}

.team-card:hover .avatar img {
    border-color: #ef4565;
    transform: scale(1.05);
}

.status-badge {
    position: absolute;
    bottom: 5px;
    right: -5px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
}

.status-badge.admin {
    background: #ef4565;
}

.status-badge.leader {
    background: #094067;
}

.veteran-badge {
    position: absolute;
    top: -5px;
    left: -5px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.6rem;
    font-weight: bold;
    color: white;
    background: #ffd700;
    color: #000;
}

/* Team Card Header h3 - Center alignment (only for team cards) */
.human_resources .team-card .card-header h3 {
    color: #094067;
    font-size: 1.4rem;
    margin: 10px 0 5px;
    font-weight: bold;
    text-align: center;
    width: 100%;
}

/* Timeline Card Header h3 - Not applicable (timeline cards don't use h3 in header) */
.timeline-milestone-card .card-header h3 {
    display: none;
}

.role {
    color: #6c757d;
    font-size: 0.9rem;
    font-style: italic;
    margin-bottom: 5px;
    text-align: center;
}

/* Team Card Role - Center alignment */
.human_resources .team-card .role {
    text-align: center;
    width: 100%;
}

.card-content .description {
    color: #495057;
    line-height: 1.6;
    margin-bottom: 15px;
    font-size: 0.95rem;
    text-align: center;
}

/* Team Card Content - Center alignment in human_resources section */
.human_resources .team-card .card-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Override center alignment for detail-section and detail-content */
.human_resources .team-card .card-content .detail-section,
.human_resources .team-card .card-content .detail-content {
    text-align: left;
    align-self: flex-start;
    width: 100%;
}

/* Team Card Description - Center alignment */
.human_resources .team-card .card-content .description {
    text-align: center;
}

/* Team Card Personal Slogan - Center alignment */
.human_resources .team-card .personal-slogan {
    text-align: center;
}

/* Team Card Detail Toggle - Center alignment */
.human_resources .team-card .detail-toggle-center {
    margin-left: auto;
    margin-right: auto;
}

/* Team Card Achievements - Center alignment */
.human_resources .team-card .achievements {
    justify-content: center;
}


.achievements {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
    justify-content: center;
}

.achievement {
    background: #f8f9fa;
    color: #495057;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.achievement:hover {
    background: #ef4565;
    color: white;
    border-color: #ef4565;
}

.personal-slogan {
    color: #094067;
    font-style: italic;
    font-size: 0.9rem;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 0;
    padding: 10px;
    background: linear-gradient(45deg, rgba(9, 64, 103, 0.1), rgba(239, 69, 101, 0.1));
    border-radius: 10px;
    border-left: 3px solid #ef4565;
    font-weight: 500;
}

.member-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.85rem;
    color: #6c757d;
    border-top: 1px solid #e9ecef;
    padding-top: 15px;
}

.join-date,
.specialty {
    font-style: italic;
}

/* Team Slogan */
.team-slogan {
    max-width: 1400px;
    text-align: center;
    padding: 50px 20px;
    margin: 30px auto;
    background: linear-gradient(135deg, rgba(9, 64, 103, 0.05) 0%, #3da9fc 100%);
    border-radius: 20px;
    border: 2px solid rgba(9, 64, 103, 0.1);
    opacity: 0;
    transform: translateY(30px);
}

.team-slogan.animate {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.1s;
}

.team-slogan h3 {
    font-size: 2rem;
    color: #094067;
    margin-bottom: 15px;
    font-weight: bold;
    font-style: italic;
    opacity: 0;
    transform: translateY(20px);
}

.team-slogan.animate h3 {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.3s;
}

.team-slogan p {
    font-size: 1.1rem;
    color: #6c757d;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(20px);
}

.team-slogan.animate p {
    animation: slideUpFadeIn 0.8s ease-out forwards;
}

.team-slogan.animate p:nth-child(2) {
    animation-delay: 0.5s;
}

.team-slogan.animate p:nth-child(3) {
    animation-delay: 0.6s;
}

/* Right Column */
.right-column {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
    position: relative;
}

/* Modern Contact Section */
.modern-contact-section {
    background: #d8eefe;
    padding: 60px 200px 0px 200px;
    margin: 60px 0 0 0;
    position: relative;
    overflow: hidden;
    /* Ẩn ban đầu, chờ scroll */
    opacity: 0;
    transform: translateY(50px);
    transition: all 1.2s ease-out;
}

/* Class được thêm khi scroll đến */
.modern-contact-section.animate {
    opacity: 1;
    transform: translateY(0);
}

.modern-contact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.contact-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.contact-title {
    font-size: 3rem;
    font-weight: 700;
    color: #094067;
    margin: 0 0 15px 0;
    letter-spacing: -0.5px;
}

.contact-subtitle {
    font-size: 1.2rem;
    color: #5f6c7b;
    margin: 0 0 30px 0;
    font-weight: 300;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.contact-subtitle strong {
    color: #6c757d;
    font-weight: 700 !important;

}

.contact-decoration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    color: #094067;
}

.decoration-dot {
    width: 8px;
    height: 8px;
    background: #094067;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.contact-grid,
.contact-grid.animate {
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 60px;
    margin-left: 0;
    margin-right: auto;
    justify-content: flex-start;
    position: relative;
    z-index: 2;
}

.contact-card {
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid #5f6c7b;
    border-radius: 20px;
    padding: 10px 30px;
    text-decoration: none;
    color: #094067;
    display: flex;
    align-items: center;
    gap: 20px;
    /* Transition MẶC ĐỊNH cho hover - nhanh và không delay */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 280px;
    max-width: 100%;
    overflow: visible;
    box-sizing: border-box;
    /* Ẩn ban đầu, chờ scroll */
    opacity: 0;
    transform: translateY(30px) scale(0.95);
}

/* Class được thêm khi scroll đến */
.contact-card.animate {
    opacity: 1;
    transform: translateY(0) scale(1);
    /* Transition cho scroll animation */
    transition: transform 0.8s ease, opacity 1.0s ease-out;
}

/* Hover animation - CHỈ áp dụng cho card được hover, không ảnh hưởng đến các card khác */
.contact-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
    z-index: 100 !important;
    /* FORCE transition nhanh cho hover */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important;
    transition-delay: 0s !important;
}

/* Đảm bảo các card khác không bị ảnh hưởng khi hover vào một card */
.contact-grid .contact-card:not(:hover) {
    transform: translateY(0) scale(1) !important;
    z-index: 1 !important;
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.contact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
    transition: left 0.6s ease;
    pointer-events: none;
    z-index: 1;
}

.contact-card:hover::before {
    left: 100%;
}

.card-icon {
    min-width: 60px;
    height: 60px;
    background: #5f6c7b1e;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    pointer-events: none;
    position: relative;
    z-index: 2;
}

.card-icon svg {
    width: 28px;
    height: 28px;
}

.contact-card:hover .card-icon {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.card-content {
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* pointer-events: none; - Removed to allow button clicks inside */
    position: relative;
    z-index: 2;
    text-align: center;
}

/* Contact card content - Left aligned */
.contact-card .card-content {
    text-align: left !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}


/* Re-enable pointer events for specific interactive elements inside card-content */
.card-content .detail-toggle-center,
.card-content button,
.card-content a {
    pointer-events: auto;
}

.card-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 5px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Contact card title - Left aligned */
.contact-card .card-content .card-title {
    text-align: left !important;
    margin-left: 0;
    margin-right: auto;
}

.card-text {
    color: #5f6c7b;
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 5px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Contact card text - Left aligned */
.contact-card .card-content .card-text {
    text-align: left !important;
    margin-left: 0;
    margin-right: auto;
}

.card-description {
    color: #8a9ba8;
    font-size: 0.9rem;
    font-weight: 400;
    margin: 0;
    line-height: 1.4;
    word-wrap: break-word;
}

.card-description {
    color: #5f6c7b;
    font-size: 0.85rem;
    font-style: italic;
}

/* Contact card description - Left aligned */
.contact-card .card-content .card-description {
    text-align: left !important;
    margin-left: 0;
    margin-right: auto;
}

.card-arrow {
    min-width: 24px;
    height: 24px;
    transition: all 0.3s ease;
}

.card-arrow svg {
    width: 20px;
    height: 20px;
}

.contact-card:hover .card-arrow {
    transform: translateX(5px);
}

/* Special colors for different cards */
.email-card:hover {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.3) 0%, #3da9fc 100%);
}

.facebook-card:hover {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.3) 0%, #3da9fc 100%);
}

.form-card:hover {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.3) 0%, #3da9fc 100%);
}

/* Contact Stats */
.contact-stats {
    display: flex;
    justify-content: center;
    gap: 60px;
    position: relative;
    z-index: 2;
}

.contact-stats .stat-item {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 10px;
    background: #ffffff1a;
    border-radius: 8px;
}

.contact-stats .stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 5px;
    background: linear-gradient(45deg, #ffffff, rgba(255, 255, 255, 0.8));
    -webkit-background-clip: text;
    background-clip: text;
}

.contact-stats .stat-number {
    display: block;
    font-weight: bold;
    color: #ef4565;
    margin-bottom: 5px;
}

.contact-stats .stat-label {
    font-size: 14px;
    color: #094067;
    font-weight: 500;
}

/* Modern Footer */
.modern-footer {
    background: #094067;
    margin: 0 -5vw;
    padding: 25px 40px 20px;
    position: relative;
    overflow: hidden;
}

.footer-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.decoration-sphere {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(52, 152, 219, 0.1), rgba(155, 89, 182, 0.1));
    animation: float 6s ease-in-out infinite;
}

.decoration-sphere.sphere-1 {
    width: 100px;
    height: 100px;
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.decoration-sphere.sphere-2 {
    width: 150px;
    height: 150px;
    top: 60%;
    right: 15%;
    animation-delay: 2s;
}

.decoration-sphere.sphere-3 {
    width: 80px;
    height: 80px;
    bottom: 20%;
    left: 70%;
    animation-delay: 4s;
}

.footer-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    justify-content: center;
}

.footer-logo {
    width: 60px;
    height: 60px;
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.1);
    padding: 10px;
}

.brand-text h4 {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 5px 0;
}

.brand-text p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-style: italic;
}

.footer-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    margin: 20px 0;
}

.footer-credits {
    text-align: center;
}

.copyright-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin: 0 0 10px 0;
}

.designer-credit {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin: 0;
}

.heart {
    color: #e74c3c;
    animation: heartbeat 1.5s ease-in-out infinite;
}

.designer-link {
    color: #3498db;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.designer-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: #3498db;
    transition: width 0.3s ease;
}

.designer-link:hover {
    color: #5dade2;
    text-shadow: 0 0 10px rgba(61, 139, 226, 0.5);
}

.designer-link:hover::after {
    width: 100%;
}

/* Animations */
@keyframes pulse {

    0%,
    100% {
        opacity: 0.6;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes float {

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

    33% {
        transform: translateY(-20px) rotate(120deg);
    }

    66% {
        transform: translateY(10px) rotate(240deg);
    }
}

@keyframes heartbeat {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Đảm bảo ẩn thanh cuộn dọc trên tablet - chỉ ẩn thanh cuộn dọc, giữ lại thanh cuộn ngang */
    html, body {
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE và Edge */
    }
    
    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    /* Đảm bảo articles-container vẫn có thanh cuộn ngang */
    .articles-container {
        scrollbar-width: thin !important; /* Firefox - chỉ thanh cuộn ngang */
        scrollbar-color: #ef4565 #f1f1f1 !important;
    }
    
    .articles-container::-webkit-scrollbar {
        height: 8px !important; /* Giữ thanh cuộn ngang */
        width: 0 !important; /* Ẩn thanh cuộn dọc */
    }
    
    /* Cho phép scroll/swipe ngang cho articles-container animate trên mobile/tablet */
    .articles-container.animate {
        scrollbar-width: none !important; /* Firefox - ẩn scrollbar */
        -ms-overflow-style: none !important; /* IE và Edge - ẩn scrollbar */
        overflow-x: auto !important; /* Cho phép scroll/swipe ngang nhưng ẩn scrollbar */
        overflow-y: hidden !important; /* Ẩn thanh cuộn dọc */
        touch-action: pan-x !important; /* Cho phép vuốt ngang trên mobile/tablet */
        -webkit-overflow-scrolling: touch !important; /* Smooth scrolling trên iOS */
    }
    
    .articles-container.animate::-webkit-scrollbar {
        display: none !important; /* Ẩn scrollbar trên Webkit browsers */
        width: 0 !important;
        height: 0 !important;
    }
    
    .articles-container.animate::-webkit-scrollbar:vertical {
        display: none !important;
        width: 0 !important;
    }
    
    .articles-container.animate::-webkit-scrollbar:horizontal {
        display: none !important;
        height: 0 !important;
    }
    
    /* Tắt margin-left: -5vw cho human_resources.animate trên mobile L trở xuống */
    .human_resources.animate {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100%;
        box-sizing: border-box;
    }
    
    .modern-contact-section {
        padding: 30px 20px 0px 20px;
        margin-top: 40px;
    }

    .contact-title {
        font-size: 2.2rem;
    }

    .contact-subtitle {
        font-size: 1rem;
    }

    .contact-grid,
    .contact-grid.animate {
        align-items: flex-start;
        padding: 20px;
        justify-content: flex-start;
        margin-left: 0;
        margin-right: auto;
    }

    .contact-card {
        width: 100%;
        max-width: 100%;
        flex: 1 1 auto;
    }

    .card-arrow {
        display: none;
    }

    .contact-stats {
        flex-direction: column;
        gap: 30px;
    }

    .stat-number {
        font-size: 2rem;
    }

    .modern-footer {
        padding: 40px 20px 25px;
    }

    .footer-brand {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .brand-text h4 {
        font-size: 1.3rem;
    }

    .copyright-text {
        font-size: 0.8rem;
    }

    .designer-credit {
        font-size: 0.75rem;
    }
}

.stat-item {
    text-align: center;
    padding: 10px;
    background: rgba(239, 69, 101, 0.1);
    border-radius: 8px;
}

.stat-number {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: #ef4565;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 11px;
    color: #5f6c7b;
    font-weight: 500;
}

/* Button historyy - Màu đỏ gradient, nằm bên trái - Override global button style */
.historyy,
button.historyy,
.historyy.historyy {
    background: linear-gradient(135deg, #ef4565, #d13b56) !important;
    background-color: transparent !important;
    border: none !important;
    color: white !important;
    padding: 5px 20px !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 30px 0 !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    font-size: 12px !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(239, 69, 101, 0.3) !important;
    width: fit-content !important;
    transform: none !important;
    justify-content: flex-start !important;
    outline: none !important;
    overflow: visible !important;
    position: relative !important;
}

button.historyy:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(239, 69, 101, 0.4) !important;
    background: linear-gradient(135deg, #f85577, #e04968) !important;
    border-color: transparent !important;
    scale: 1 !important;
}

button.historyy::before {
    display: none !important;
}

/* ==============================================
   SPONSORS/PARTNERS SECTION STYLES
   ============================================== */
.sponsors-section {
    margin-left: -5vw;
    margin-right: -5vw;
    padding-top: 52px;
    text-align: center;
    padding-bottom: 80px;
    opacity: 0;
    transform: translateY(30px);
    background: #d8eefe;
    /* Tạo khoảng trống khi scroll đến section để không bị navbar che */
    scroll-margin-top: 120px; /* 30px (top) + 70px (navbar height) + 20px (extra space) */
}

.sponsors-section.animate {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.1s;
    background: #d8eefe;
}

.sponsors-section h2 {
    font-size: 3rem;
    color: #094067;
    margin: 10px 0;
    font-weight: bold;
    opacity: 0;
    transform: translateY(20px);
}

.sponsors-section.animate h2 {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.2s;
}

.sponsors-section h2:first-child {
    font-size: 2.5rem;
    color: #ef4565;
    opacity: 0;
    transform: translateY(20px);
}

.sponsors-section.animate h2:first-child {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.15s;
}

.sponsors-subtitle {
    margin-top: 20px;
    opacity: 0;
    transform: translateY(20px);
}

.sponsors-section.animate .sponsors-subtitle {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.3s;
}

.sponsors-subtitle p {
    font-size: 1.2rem;
    color: #6c757d;
    margin: 0 auto;
    line-height: 1.6;
}

.sponsors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 50px;
    justify-items: center;
    /* Căn giữa các card */
    max-width: 1200px;
    /* Giới hạn độ rộng */
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    transform: translateY(20px);
}

.sponsors-section.animate .sponsors-grid {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.4s;
}

.sponsor-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    /* Transition MẶC ĐỊNH cho hover - nhanh và không delay */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    text-align: center;
    /* Căn giữa toàn bộ nội dung */
    /* Ẩn ban đầu, chờ scroll */
    opacity: 0;
    transform: translateY(40px) scale(0.95);
}

/* Class được thêm khi scroll đến */
.sponsor-card.animate {
    opacity: 1;
    transform: translateY(0) scale(1);
    /* Transition cho scroll animation */
    transition: transform 0.8s ease, opacity 1.0s ease-out;
}

/* Hover animation - Override transition cho hover */
.sponsor-card:hover {
    transform: translateY(-10px) scale(1) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    /* FORCE transition nhanh cho hover */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    transition-delay: 0s !important;
}

/* Loại bỏ animation delays cũ - JavaScript sẽ xử lý timing */

.sponsor-info {
    text-align: center;
    /* Đảm bảo text căn giữa */
}

.sponsor-name,
.sponsor-title,
.sponsor-description {
    text-align: center;
    /* Căn giữa tất cả text */
}

.sponsor-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff0000, #cc0000);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.sponsor-card:hover::before {
    transform: scaleX(1);
}

.sponsor-card.featured::before {
    background: linear-gradient(90deg, #ff0000, #cc0000);
}

.sponsor-logo {
    width: 150px;
    height: 200px;
    /* Tỷ lệ 3:4 */
    border-radius: 15px;
    overflow: hidden;
    margin: 0 auto 20px auto;
    /* Căn giữa */
    background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.sponsor-avatar {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    /* background: linear-gradient(135deg, #ef4565, #d13b56); */
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 24px;
    /* Text lớn hơn cho ảnh to */
    overflow: hidden;
}

.sponsor-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    transition: transform 0.3s ease;
}

.sponsor-card:hover .sponsor-avatar img {
    transform: scale(1.05);
}

/* Fallback cho text khi không có ảnh */
.sponsor-avatar:not(:has(img)) {
    background: linear-gradient(135deg, #ef4565, #d13b56);
}

.sponsor-card.featured .sponsor-avatar:not(:has(img)) {
    background: linear-gradient(135deg, #ffc107, #ff9800);
}

.sponsor-card.featured .sponsor-avatar {
    background: linear-gradient(135deg, #ffc107, #ff9800);
}

/* Class riêng cho avatar hình tròn */
.sponsor-avatar-circle {
    border-radius: 50% !important;
    border: none !important;
}

.sponsor-avatar-circle img {
    border-radius: 50% !important;
    border: none !important;
}

/* Làm cho sponsor-logo có avatar hình tròn thành hình vuông */
.sponsor-logo:has(.sponsor-avatar-circle) {
    width: 150px !important;
    height: 150px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Desktop (>1024px): 3 cột ngang, sponsor ở giữa giữ nguyên vị trí (không dùng order) */
/* Mobile/Tablet (≤1024px): 1 cột dọc, sponsor có logo hình tròn lên đầu (order: -1) */
/* Đảm bảo trên desktop không có order (giữ nguyên thứ tự: 1, 2, 3) */
@media (min-width: 1025px) {
    .sponsor-card-circular,
    .sponsor-card-first {
        order: 0 !important;
    }
    
    .sponsor-card:not(.sponsor-card-circular):not(.sponsor-card-first) {
        order: 0 !important;
    }
}

.sponsor-initial {
    text-transform: uppercase;
}

.partner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.sponsor-info h3 {
    color: #094067;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.3;
}

.sponsor-title {
    color: #5f6c7b;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
    /* text-transform: uppercase; 
    letter-spacing: 0.5px; */
}

.sponsor-description {
    font-style: italic;
    color: #5f6c7b;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.sponsor-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    /* Căn giữa các tags */
    margin-top: 15px;
}

.sponsor-tags .tag {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: white;
}

.sponsor-tags .tag.sponsor {
    background: linear-gradient(135deg, #ef4565, #d13b56);
}

.sponsor-tags .tag.founder {
    background: linear-gradient(135deg, #6f42c1, #5a2d91);
}

.sponsor-tags .tag.designer {
    background: linear-gradient(135deg, #007bff, #0056b3);
}

.sponsor-tags .tag.event {
    background: linear-gradient(135deg, #28a745, #20c997);
}

.sponsor-tags .tag.partner {
    background: linear-gradient(135deg, #ffc107, #fd7e14);
}

.sponsor-tags .tag.support {
    background: linear-gradient(135deg, #17a2b8, #138496);
}

.sponsor-tags .tag.longterm {
    background: linear-gradient(135deg, #6c757d, #495057);
}
.sponsor-tags .tag.default {
    background: linear-gradient(135deg, #cab0cf, #850191);
}

/* ==============================================
   GALLERY/IMAGES SECTION STYLES
   ============================================== */
.gallery-section {
    margin-left: -5vw;
    margin-right: -5vw;
    padding-top: 60px;
    text-align: center;
    padding-bottom: 80px;
    opacity: 0;
    transform: translateY(30px);
    background: #fffffe;
    /* Tạo khoảng trống khi scroll đến section để không bị navbar che */
    scroll-margin-top: 120px;
    overflow: hidden;
    position: relative;
}

.gallery-section.animate {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.1s;
}

.gallery-section h2 {
    font-size: 3rem;
    color: #094067;
    margin: 10px 0;
    font-weight: bold;
    opacity: 0;
    transform: translateY(20px);
}

.gallery-section.animate h2 {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.2s;
}

.gallery-subtitle {
    margin-top: 20px;
    opacity: 0;
    transform: translateY(20px);
}

.gallery-section.animate .gallery-subtitle {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.3s;
}

.gallery-wrapper {
    overflow: hidden;
    margin-top: 50px;
    position: relative;
    width: 100%;
}

.gallery-grid {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    opacity: 0;
    transform: translateY(20px);
    width: max-content;
    will-change: transform;
}

.gallery-grid::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.gallery-section.animate .gallery-grid {
    opacity: 1;
    transform: translateY(0);
    animation: scrollGallery var(--animation-duration, 30s) linear infinite;
}

.gallery-item {
    flex: 0 0 auto;
    width: auto;
    min-width: 400px;
    max-width: 600px;
    height: auto;
    min-height: 300px;
    max-height: 800px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
}

.gallery-item.animate {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: transform 0.8s ease, opacity 1.0s ease-out;
}

.gallery-item:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    z-index: 10;
}

.gallery-item img {
    width: auto;
    height: auto;
    max-height: 500px;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

/* Gallery Item Overlay */
.gallery-item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.7) 70%, transparent 100%);
    padding: 20px;
    color: white;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.gallery-item:hover .gallery-item-overlay {
    opacity: 1;
    transform: translateY(0);
}

.gallery-item-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.gallery-item-description {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    line-height: 1.5;
}

/* Pause animation on hover */
.gallery-grid:hover {
    animation-play-state: paused !important;
}

/* Auto scroll animation - scroll from right to left */
@keyframes scrollGallery {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* Duplicate items for seamless loop */
.gallery-grid::after {
    content: '';
    flex: 0 0 20px;
}

/* ==============================================
   REVIEWS/TESTIMONIALS SECTION STYLES
   ============================================== */
.reviews-section {
    padding-top: 52px;
    text-align: center;
    padding-bottom: 80px;
    opacity: 0;
    transform: translateY(30px);
    background: #ffffff;
    /* Tạo khoảng trống khi scroll đến section để không bị navbar che */
    scroll-margin-top: 120px;
}

.reviews-section.animate {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.1s;
}

.reviews-section h2 {
    font-size: 3rem;
    color: #094067;
    margin: 10px 0;
    font-weight: bold;
    opacity: 0;
    transform: translateY(20px);
}

.reviews-section.animate h2 {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.2s;
}

.reviews-subtitle {
    margin-top: 20px;
    opacity: 0;
    transform: translateY(20px);
}

.reviews-section.animate .reviews-subtitle {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.3s;
}

/* Reviews Carousel Container */
.reviews-carousel-container {
    position: relative;
    max-width: 900px;
    margin: 50px auto 0;
    padding: 80px 20px 0 20px;
    opacity: 0;
    transform: translateY(20px);
    overflow: visible;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: pan-y pinch-zoom;
    cursor: grab;
}

.reviews-carousel-container:active {
    cursor: grabbing;
}

.reviews-section.animate .reviews-carousel-container {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.4s;
}

.reviews-carousel {
    position: relative;
    overflow: visible;
    border-radius: 20px;
}

.review-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 60px 40px 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    text-align: center;
    min-height: 400px;
    display: none;
    opacity: 0;
    transform: translateX(0);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.review-card.active {
    display: block;
    opacity: 1;
    transform: translateX(0);
}

.review-card.slide-in-right {
    animation: slideInRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.review-card.slide-in-left {
    animation: slideInLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Review Avatar - Circular with dotted border */
.review-avatar-wrapper {
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.review-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px dashed #d1d5db;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.review-card:hover .review-avatar {
    border-color: #ef4565;
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(239, 69, 101, 0.3);
}

.review-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.review-avatar .avatar-initial {
    font-size: 2.5rem;
    font-weight: bold;
    color: #ef4565;
}

/* Review Content - Sắp xếp theo thứ tự: avatar -> name -> role -> rating -> quote */

/* Review Name - Sau avatar */
.review-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ef4565;
}

/* Review Role - Sau name */
.review-role {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 15px;
}

/* Review Rating - Sau role */
.review-rating {
    display: flex;
    justify-content: center;
    gap: 5px;
    color: #fbbf24;
    font-size: 1.5rem;
    margin-bottom: 25px;
}

/* Review Quote - Cuối cùng */
.review-quote {
    font-size: 1.3rem;
    color: #374151;
    font-style: italic;
    line-height: 1.8;
    margin: 0;
    padding: 0 20px;
}

/* Pagination Dots */
.reviews-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.review-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #d1d5db;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    padding: 0;
}

.review-dot.active {
    background: #ef4565;
    width: 30px;
    border-radius: 6px;
}

.review-dot:hover {
    background: #ef4565;
    opacity: 0.7;
}

/* Navigation Arrows - Hidden by default */
.reviews-nav-btn {
    display: none !important;
}

/* Review Form Toggle Button */
.review-form-toggle-container {
    display: flex;
    justify-content: center;
    margin: 40px auto 0;
    max-width: 900px;
    padding: 0 20px;
    opacity: 0;
    transform: translateY(20px);
}

.reviews-section.animate .review-form-toggle-container {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.5s;
}

.review-form-toggle-btn {
    padding: 15px 40px;
    background: #ef4565;
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Bitter', Arial, sans-serif;
    box-shadow: 0 4px 15px rgba(239, 69, 101, 0.3);
}

.review-form-toggle-btn:hover {
    background: #d13b56;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(239, 69, 101, 0.4);
}

.review-form-toggle-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.review-form-toggle-btn:hover svg {
    transform: translateX(3px);
}

/* Review Form */
.review-form-container {
    max-width: 800px;
    margin: 30px auto 0;
    padding: 40px;
    background: #f8f9fa;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    display: none;
    animation: slideDownFadeIn 0.4s ease-out forwards;
    text-align: center;
}

.review-form-container.show {
    display: block;
}

@keyframes slideDownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.review-form-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    position: relative;
}

.review-form-container h3 {
    font-size: 2rem;
    color: #094067;
    margin: 0;
    text-align: center;
}

.review-form-close {
    width: 40px;
    height: 40px;
    background: transparent;
    border: 2px solid #e5e7eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.review-form-close:hover {
    background: #ef4565;
    border-color: #ef4565;
    color: white;
    transform: rotate(90deg);
}

.review-form-close svg {
    width: 20px;
    height: 20px;
    color: #6c757d;
    transition: color 0.3s ease;
}

.review-form-close:hover svg {
    color: white;
}

.review-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    align-items: center;
}

.form-group label {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
}

.form-group input,
.form-group textarea,
.form-group select {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 1rem;
    font-family: 'Bitter', Arial, sans-serif;
    transition: border-color 0.3s ease;
    width: 100%;
}

.form-group input,
.form-group select {
    text-align: center;
}

.form-group textarea {
    text-align: left; /* Textarea căn trái để dễ đọc khi nhập nhiều dòng */
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #ef4565;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
    text-align: left; /* Textarea căn trái để dễ đọc khi nhập nhiều dòng */
}

.review-submit-btn {
    padding: 15px 40px;
    background: #ef4565;
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
    font-family: 'Bitter', Arial, sans-serif;
}

.review-submit-btn:hover {
    background: #d13b56;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(239, 69, 101, 0.3);
}

.review-form-note {
    text-align: center;
    font-size: 0.9rem;
    color: #6c757d;
    margin-top: 15px;
    font-style: italic;
}

/* Reviews Section Responsive */
@media (max-width: 768px) {
    .reviews-section {
        padding: 40px 0 50px 0;
    }

    .reviews-section h2 {
        font-size: 2rem !important;
    }

    .reviews-carousel-container {
        margin: 30px auto 0;
        padding: 70px 15px 0 15px;
        overflow: visible;
    }

    .review-card {
        padding: 50px 20px 30px;
        min-height: 350px;
    }

    .review-avatar-wrapper {
        top: -65px;
    }

    .review-avatar {
        width: 100px;
        height: 100px;
        border: 3px dashed #d1d5db;
        transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    }

    .review-card:hover .review-avatar {
        border-color: #ef4565;
        transform: scale(1.05);
        box-shadow: 0 8px 25px rgba(239, 69, 101, 0.3);
    }

    .review-avatar .avatar-initial {
        font-size: 2rem;
    }

    /* Review Content - Thứ tự: avatar -> name -> role -> rating -> quote */
    .review-name {
        font-size: 1.3rem;
        margin-top: 65px;
        margin-bottom: 6px;
    }

    .review-role {
        font-size: 0.9rem;
        margin-bottom: 12px;
    }

    .review-rating {
        font-size: 1.3rem;
        margin-bottom: 20px;
    }

    .review-quote {
        font-size: 1.1rem;
        margin: 0;
        padding: 0 15px;
    }

    /* Navigation buttons hidden */

    .reviews-pagination {
        margin-top: 20px;
        gap: 8px;
    }

    .review-dot {
        width: 10px;
        height: 10px;
    }

    .review-dot.active {
        width: 25px;
    }

    /* Review Form Toggle Button Mobile */
    .review-form-toggle-container {
        margin: 30px auto 0;
        padding: 0 15px;
    }

    .review-form-toggle-btn {
        padding: 12px 30px;
        font-size: 1rem;
        max-width: 100%;
    }

    .review-form-toggle-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Review Form Mobile */
    .review-form-container {
        max-width: 100%;
        margin: 20px auto 0;
        padding: 25px 20px;
        border-radius: 15px;
    }

    .review-form-header {
        margin-bottom: 20px;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .review-form-container h3 {
        font-size: 1.5rem;
        width: 100%;
        text-align: center;
    }

    .review-form-close {
        width: 35px;
        height: 35px;
        position: absolute;
        top: 20px;
        right: 20px;
    }

    .review-form-close svg {
        width: 18px;
        height: 18px;
    }

    .review-form {
        gap: 15px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .form-group {
        gap: 6px;
        text-align: center;
        align-items: center;
    }

    .form-group label {
        font-size: 0.95rem;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 10px 14px;
        font-size: 0.95rem;
    }

    .form-group input,
    .form-group select {
        text-align: center;
    }

    .form-group textarea {
        min-height: 100px;
        text-align: left; /* Textarea căn trái để dễ đọc khi nhập nhiều dòng */
    }

    .review-submit-btn {
        padding: 12px 30px;
        font-size: 1rem;
        width: 100%;
    }

    .review-form-note {
        font-size: 0.85rem;
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    .reviews-section {
        padding: 30px 0 40px 0;
    }

    .reviews-section h2 {
        font-size: 1.8rem !important;
    }

    .reviews-carousel-container {
        margin: 20px auto 0;
        padding: 60px 10px 0 10px;
        overflow: visible;
    }

    .review-card {
        padding: 45px 15px 25px;
        min-height: 320px;
    }

    .review-avatar-wrapper {
        top: -55px;
    }

    .review-avatar {
        width: 90px;
        height: 90px;
        border: 3px dashed #d1d5db;
        transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    }

    .review-card:hover .review-avatar {
        border-color: #ef4565;
        transform: scale(1.05);
        box-shadow: 0 8px 25px rgba(239, 69, 101, 0.3);
    }

    .review-avatar .avatar-initial {
        font-size: 1.8rem;
    }

    /* Review Content - Thứ tự: avatar -> name -> role -> rating -> quote */
    .review-name {
        font-size: 1.2rem;
        margin-top: 55px;
        margin-bottom: 6px;
    }

    .review-role {
        font-size: 0.85rem;
        margin-bottom: 10px;
    }

    .review-rating {
        font-size: 1.2rem;
        margin-bottom: 15px;
    }

    .review-quote {
        font-size: 1rem;
        margin: 0;
        padding: 0 10px;
        line-height: 1.6;
    }

    /* Navigation buttons hidden */

    .reviews-pagination {
        margin-top: 15px;
        gap: 6px;
    }

    .review-dot {
        width: 8px;
        height: 8px;
    }

    .review-dot.active {
        width: 20px;
    }

    /* Review Form Toggle Button Mobile Small */
    .review-form-toggle-container {
        margin: 20px auto 0;
        padding: 0 10px;
    }

    .review-form-toggle-btn {
        padding: 10px 25px;
        font-size: 0.95rem;
    }

    /* Review Form Mobile Small */
    .review-form-container {
        margin: 15px auto 0;
        padding: 20px 15px;
        border-radius: 12px;
    }

    .review-form-header {
        margin-bottom: 15px;
        gap: 10px;
        align-items: center;
        justify-content: center;
    }

    .review-form-container h3 {
        font-size: 1.3rem;
        padding-right: 40px; /* Tạo khoảng trống cho nút close */
        text-align: center;
    }

    .review-form-close {
        width: 32px;
        height: 32px;
        top: 15px;
        right: 15px;
    }

    .review-form-close svg {
        width: 16px;
        height: 16px;
    }

    .review-form {
        gap: 12px;
    }

    .form-row {
        gap: 12px;
    }

    .form-group {
        gap: 5px;
        text-align: center;
        align-items: center;
    }

    .form-group label {
        font-size: 0.9rem;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    .form-group input,
    .form-group select {
        text-align: center;
    }

    .form-group textarea {
        text-align: left; /* Textarea căn trái để dễ đọc khi nhập nhiều dòng */
        padding: 9px 12px;
        font-size: 0.9rem;
    }

    .form-group textarea {
        min-height: 90px;
    }

    .review-submit-btn {
        padding: 10px 25px;
        font-size: 0.95rem;
    }

    .review-form-note {
        font-size: 0.8rem;
        margin-top: 8px;
    }
}

/* ==============================================
   FEATURED TALKSHOW SECTION STYLES - NỔI BẬT NHẤT
   ============================================== */
.featured-talkshow-section {
    position: relative;
    padding: 60px 15px;
    margin: 20px auto 15px auto;
    display: none; /* Ẩn mặc định, chỉ hiển thị khi có talkshow active */
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 50%, rgba(79, 172, 254, 0.15) 100%);
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: all 0.4s ease;
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.featured-talkshow-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 50%, rgba(79, 172, 254, 0.05) 100%);
    background-size: 200% 200%;
    animation: gradientFlow 8s ease infinite;
    z-index: 0;
    border-radius: 15px;
}

@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.featured-talkshow-section::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #667eea, #764ba2, #4facfe, #667eea);
    background-size: 300% 300%;
    border-radius: 15px;
    z-index: -1;
    opacity: 0;
    animation: borderGlow 3s ease infinite;
    transition: opacity 0.3s ease;
}

@keyframes borderGlow {
    0%, 100% { 
        background-position: 0% 50%;
        opacity: 0.3;
    }
    50% { 
        background-position: 100% 50%;
        opacity: 0.6;
    }
}

.featured-talkshow-section:hover::after {
    opacity: 0.8;
}

.featured-talkshow-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.2);
}

.talkshow-wrapper {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
}

.talkshow-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
    color: white;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0 auto 20px auto;
    width: fit-content;
    box-shadow: 0 2px 10px rgba(238, 90, 111, 0.3);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    align-self: center;
}

/* Talkshow Layout - 2 columns */
.talkshow-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.featured-talkshow-section:hover .talkshow-layout {
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.2);
    transform: translateY(-2px);
}

/* Image Container */
.talkshow-image-container {
    position: relative;
    width: 100%;
    display: flex;
    align-items: stretch;
    align-self: stretch;
    justify-content: center;
}

.talkshow-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: fit-content;
}

.talkshow-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.talkshow-badge:hover::before {
    left: 100%;
}

.talkshow-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(238, 90, 111, 0.5);
}

.badge-icon {
    font-size: 1.2rem;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.talkshow-title {
    font-size: 1.3rem;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 8px 0;
    line-height: 1.3;
    text-align: center;
}

.talkshow-topic {
    font-size: 2.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 16px 0;
    line-height: 1.3;
    position: relative;
    padding: 12px 20px 12px 50px;
    text-align: center;
    display: inline-block;
    width: 100%;
    text-shadow: 0 0 30px rgba(102, 126, 234, 0.3);
    letter-spacing: -0.5px;
}

.talkshow-topic::before {
    content: '✨';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.8rem;
    animation: sparkle 2s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
}

.talkshow-topic::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #667eea, #764ba2, transparent);
    border-radius: 2px;
    animation: underlineGlow 3s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { 
        transform: translateY(-50%) scale(1) rotate(0deg);
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
    }
    50% { 
        transform: translateY(-50%) scale(1.3) rotate(180deg);
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 1));
    }
}

@keyframes underlineGlow {
    0%, 100% { 
        opacity: 0.6;
        width: 80px;
    }
    50% { 
        opacity: 1;
        width: 120px;
    }
}

.talkshow-subtitle {
    font-size: 0.95rem;
    color: #666;
    margin: 0 0 16px 0;
    line-height: 1.6;
    font-style: italic;
}

.talkshow-content-detail {
    padding: 24px 28px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 50%, rgba(240, 147, 251, 0.08) 100%);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-left: 5px solid;
    border-left-color: #667eea;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2), 
                0 0 0 1px rgba(102, 126, 234, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.talkshow-content-detail:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.3), 
                0 0 0 1px rgba(102, 126, 234, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 50%, rgba(240, 147, 251, 0.1) 100%);
}

.talkshow-content-detail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    border-radius: 0 2px 2px 0;
}

.talkshow-content-detail::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.08) 0%, transparent 70%);
    pointer-events: none;
    animation: contentGlow 4s ease-in-out infinite;
}

@keyframes contentGlow {
    0%, 100% { 
        opacity: 0.5;
        transform: rotate(0deg);
    }
    50% { 
        opacity: 0.8;
        transform: rotate(180deg);
    }
}

.talkshow-content-detail p {
    font-size: 1rem;
    color: #1f2937;
    line-height: 1.9;
    margin: 0;
    position: relative;
    z-index: 1;
    font-weight: 500;
    text-align: justify;
    letter-spacing: 0.2px;
}

/* Talkshow Image Styles */
.talkshow-image-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.25);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    min-height: 100%;
    margin: 0 auto;
}

.talkshow-image-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.talkshow-image-wrapper:hover::before {
    opacity: 1;
}

.talkshow-image {
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s ease;
    position: relative;
    z-index: 0;
    max-width: 100%;
    max-height: 100%;
}

.talkshow-image-wrapper:hover .talkshow-image {
    transform: scale(1.05);
    filter: brightness(1.05) saturate(1.1);
}

.talkshow-image-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(102, 126, 234, 0.3) 0%, transparent 100%);
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.talkshow-image-wrapper:hover::after {
    opacity: 1;
}

.talkshow-image-wrapper:hover {
    box-shadow: 0 16px 50px rgba(102, 126, 234, 0.35);
    transform: translateY(-4px);
}

/* Countdown Timer Styles */
.countdown-container {
    text-align: center;
    margin: 18px 0;
    padding: 15px 12px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

.countdown-label {
    font-size: 0.8rem;
    color: #333;
    margin-bottom: 12px;
    font-weight: 600;
}

.countdown-timer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 12px 0;
    flex-wrap: wrap;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
    padding: 8px 6px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.countdown-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.15), rgba(192, 57, 43, 0.15));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.countdown-item:hover::before {
    opacity: 1;
}

.countdown-item:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 5px 20px rgba(231, 76, 60, 0.3);
}

.countdown-item:hover .countdown-number {
    color: #c0392b;
    transform: scale(1.1);
}

.countdown-number {
    font-size: 1.4rem;
    font-weight: 700;
    color: #e74c3c;
    line-height: 1;
    margin-bottom: 3px;
    font-variant-numeric: tabular-nums;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.countdown-label-small {
    font-size: 0.65rem;
    color: #666;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.countdown-item:hover .countdown-label-small {
    color: #e74c3c;
}

.countdown-separator {
    font-size: 1.3rem;
    font-weight: 700;
    color: #e74c3c;
    margin: 0 2px;
}

.countdown-timezone {
    font-size: 0.75rem;
    color: #888;
    margin-top: 10px;
    font-style: italic;
}

/* Registration Form Styles */
.talkshow-registration {
    margin-top: 18px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.registration-title {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 600;
}

.registration-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
    justify-items: center;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    align-items: center;
    text-align: center;
}

.form-group:last-of-type {
    grid-column: 1 / -1;
}

.form-group label {
    font-size: 0.95rem;
    color: #333;
    font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
    background: white;
    width: 100%;
    max-width: 100%;
    text-align: left;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667eea' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.form-group select option {
    padding: 10px;
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.registration-submit-btn {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    background-size: 200% 200%;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

.registration-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.registration-submit-btn:hover::before {
    left: 100%;
}

.registration-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.5);
    background-position: 100% 50%;
}

.registration-submit-btn:active {
    transform: translateY(-1px);
}

.registration-submit-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
}

.registration-submit-btn:hover svg {
    transform: translateX(5px);
}

.registration-message {
    margin-top: 20px;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    font-weight: 500;
    display: none;
}

.registration-message.success {
    display: block;
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.registration-message.error {
    display: block;
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.registration-message.warning {
    display: block;
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

/* ==============================================
   ACTIVITIES/EVENTS SECTION STYLES
   ============================================== */
.activities-section {
    padding-top: 52px;
    text-align: center;
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(30px);
    /* Tạo khoảng trống khi scroll đến section để không bị navbar che */
    scroll-margin-top: 120px; /* 30px (top) + 70px (navbar height) + 20px (extra space) */
}

.activities-section.animate {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.1s;
}

.activities-section h2 {
    font-size: 3rem;
    color: #094067;
    margin: 10px 0;
    font-weight: bold;
    opacity: 0;
    transform: translateY(20px);
}

.activities-section.animate h2 {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.2s;
}

.activities-section h2:first-child {
    font-size: 2.5rem;
    color: #ef4565;
    opacity:  0;
    transform: translateY(20px);
}

.activities-section.animate h2:first-child {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.15s;
}

.activities-subtitle {
    margin-top: 20px;
    opacity: 0;
    transform: translateY(20px);
}

.activities-section.animate .activities-subtitle {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.3s;
}

.activities-subtitle p {
    font-size: 1.2rem;
    color: #6c757d;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.activities-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 50px;
    opacity: 0;
    transform: translateY(20px);
    max-width: 800px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Desktop: Hiển thị ngang (horizontal) cho tất cả categories */
@media (min-width: 1025px) {
    .activities-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
        max-width: 1400px;
    }
    
    /* Nếu có 2 categories: 2 cột */
    .activities-grid:has(.activity-category:nth-child(2):last-child) {
        grid-template-columns: repeat(2, 1fr);
        max-width: 900px;
    }
    
    /* Nếu có 3 categories trở lên: hiển thị ngang */
    .activities-grid:has(.activity-category:nth-child(3)) {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        max-width: 1400px;
    }
    
    /* Dùng JavaScript để thêm class nếu có 3 categories trở lên */
    .activities-grid.has-three-or-more {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        max-width: 1400px;
    }
}

/* Nếu có 3 activity-category trở lên thì hiển thị 3 cột ngang */
.activities-grid:has(.activity-category:nth-child(3)) {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    max-width: 1400px;
}

/* Dùng JavaScript để thêm class nếu có 3 categories trở lên */
.activities-grid.has-three-or-more {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    max-width: 1400px;
}

.activities-section.animate .activities-grid {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.4s;
}

.activity-category {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 193, 7, 0.1);
    position: relative;
    overflow: hidden;
    text-align: center;
    /* Căn giữa nội dung category */
    opacity: 0;
    transform: translateY(30px);
}

.activities-section.animate .activity-category:nth-child(1) {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.5s;
}

.activities-section.animate .activity-category:nth-child(2) {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.6s;
}

.activities-section.animate .activity-category:nth-child(3) {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.7s;
}

.activities-section.animate .activity-category:nth-child(4) {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.8s;
}

.activity-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ffc107, #ff9800, #ff6b35);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.activity-category:hover::before {
    transform: scaleX(1);
}

.category-title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #2c3e50;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f8f9fa;
}

.category-icon {
    font-size: 22px;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.activity-item {
    background: #f8f9ff;
    border-radius: 15px;
    padding: 20px;
    border-left: 4px solid #ffc107;
    transition: all 0.3s ease;
    position: relative;
    text-align: left;
    /* Căn bên trái nội dung activity item */
    opacity: 0;
    transform: translateY(20px);
}

.activities-section.animate .activity-item:nth-child(1) {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.6s;
}

.activities-section.animate .activity-item:nth-child(2) {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.65s;
}

.activities-section.animate .activity-item:nth-child(3) {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.7s;
}

.activities-section.animate .activity-item:nth-child(4) {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.75s;
}

.activities-section.animate .activity-item:nth-child(5) {
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.8s;
}

.activity-item:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.activity-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 12px;
    gap: 15px;
    flex-wrap: wrap;
    /* Cho phép xuống hàng trên mobile */
}

.activity-name {
    color: #2c3e50;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
    flex: 1;
}

.activity-status {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.activity-status.ongoing {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
}

.activity-status.completed {
    background: linear-gradient(135deg, #6c757d, #495057);
    color: white;
}

.activity-status.upcoming {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
}

.activity-status.planning {
    background: linear-gradient(135deg, #ffc107, #fd7e14);
    color: white;
}

.activity-status.regular {
    background: linear-gradient(135deg, #6f42c1, #5a2d91);
    color: white;
}

.activity-description {
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 15px;
}

.activity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 12px;
    color: #64748b;
}

.activity-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Section Headers for both Sponsors and Activities */
.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-title {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.section-subtitle {
    color: #64748b;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.6;
    margin: 0 auto 30px;
}

.section-decoration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.decoration-line {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #094067, transparent);
}

.decoration-heart,
.decoration-star {
    font-size: 20px;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* Achievement Stats */
.achievement-stats {
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 40px auto 80px auto;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
    /* Animation initial state */
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Class được thêm khi scroll đến */
.achievement-stats.animate {
    opacity: 1;
    transform: translateY(0);
}

.stat-card {
    text-align: center;
    padding: 30px 24px;
    border-radius: 16px;
    background: white;
    box-shadow: 0 4px 20px rgba(9, 64, 103, 0.08);
    transition: all 0.3s ease;
    /* Animation initial state - giống hero-stats */
    animation: scaleIn 0.6s ease-out both;
}

/* Keyframes animation giống hero-stats */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Staggered animation delays giống hero-stats */
.stat-card:nth-child(1) {
    animation-delay: 0.6s;
}

.stat-card:nth-child(2) {
    animation-delay: 0.7s;
}

.stat-card:nth-child(3) {
    animation-delay: 0.8s;
}

.stat-card:nth-child(4) {
    animation-delay: 0.9s;
}

/* Hover effect giống hero-stats */
.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(9, 64, 103, 0.15);
}

/* Stat number - giống hero-stats */
.stat-card .stat-number {
    font-size: clamp(2.2rem, 3.5vw, 2.8rem);
    font-weight: bold;
    color: #094067;
    line-height: 1;
    margin-bottom: 8px;
    display: block;
    /* Animation initial state */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Animation khi scroll đến - giống hero-stats */
.stat-card.animate .stat-number,
.stat-number.count-animate {
    opacity: 1;
    transform: translateY(0);
}

/* Stat label - giống hero-stats */
.stat-card .stat-label {
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    color: #6c757d;
    margin-top: 6px;
    font-weight: 500;
    display: block;
    text-transform: none;
    letter-spacing: normal;
}

/* Responsive Design */
@media (min-width: 1024px) and (max-width: 1200px) {
    .sponsors-grid {
        max-width: 900px;
        gap: 25px;
    }
}

@media (max-width: 1024px) {

    .sponsors-grid,
    .activities-grid {
        grid-template-columns: 1fr;
    }

    /* Override layout 3 cột trên tablet/mobile - luôn để 1 cột */
    .activities-grid.has-three-or-more {
        grid-template-columns: 1fr !important;
        max-width: 800px;
    }

    .activities-grid:has(.activity-category:nth-child(3)) {
        grid-template-columns: 1fr !important;
        max-width: 800px;
    }

    .activities-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .sponsors-grid {
        max-width: 800px;
        gap: 22px;
        /* Đảm bảo grid là 1 cột */
        grid-template-columns: 1fr !important;
    }
    
    /* Sắp xếp lại thứ tự khi grid là 1 cột (hàng dọc):
       - Sponsor thứ 2 (ở giữa, có logo hình tròn) lên đầu (order: -1)
       - Sponsor thứ 1 xuống giữa (order: 0)
       - Sponsor thứ 3 giữ nguyên cuối (order: 1)
    */
    .sponsors-grid .sponsor-card-circular {
        order: -1; /* Sponsor ở giữa lên đầu */
    }
    
    .sponsors-grid .sponsor-card-first {
        order: 0; /* Sponsor đầu xuống giữa */
    }
    
    .sponsors-grid .sponsor-card:not(.sponsor-card-circular):not(.sponsor-card-first) {
        order: 1; /* Sponsor cuối giữ nguyên */
    }
    
    /* Điều chỉnh kích thước sponsor-card dựa trên logo */
    /* sponsor-card-circular: logo 150x150px, padding 30px → card width ≈ 210px + text */
    /* sponsor-card-first: logo 150x200px, padding 30px → card width ≈ 210px + text */
    .sponsor-card {
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Đảm bảo logo hình tròn vẫn là 150x150px */
    .sponsor-card-circular .sponsor-logo:has(.sponsor-avatar-circle) {
        width: 150px !important;
        height: 150px !important;
    }
    
    /* Đảm bảo logo card-first vẫn là 150x200px */
    .sponsor-card-first .sponsor-logo {
        width: 150px;
        height: 200px;
    }
}

@media (max-width: 768px) {
    .activities-section {
        padding: 50px 20px;
        margin: 40px 0;
    }

    .section-title {
        font-size: 32px;
    }

    .section-subtitle {
        font-size: 16px;
    }

    .sponsor-card,
    .activity-category {
        padding: 20px;
    }

    .activities-grid {
        grid-template-columns: 1fr !important;
        gap: 25px;
        max-width: 800px;
    }

    /* Override layout 3 cột trên mobile - luôn để 1 cột */
    .activities-grid.has-three-or-more {
        grid-template-columns: 1fr !important;
        max-width: 800px;
    }
    
    /* Đảm bảo sponsors-grid là 1 cột trên mobile */
    .sponsors-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Sắp xếp lại thứ tự sponsor trên mobile:
       - Sponsor thứ 2 (ở giữa) lên đầu
       - Sponsor thứ 1 xuống giữa
       - Sponsor thứ 3 giữ nguyên cuối
    */
    .sponsors-grid .sponsor-card-circular {
        order: -1 !important;
    }
    
    .sponsors-grid .sponsor-card-first {
        order: 0 !important;
    }
    
    .sponsors-grid .sponsor-card:not(.sponsor-card-circular):not(.sponsor-card-first) {
        order: 1 !important;
    }

    .activities-grid:has(.activity-category:nth-child(3)) {
        grid-template-columns: 1fr !important;
        max-width: 800px;
    }

    .activity-header {
        align-items: flex-start;
        gap: 10px;
    }

    .activity-status {
        align-self: flex-start;
    }

    .achievement-stats {
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
        margin: 30px auto 60px auto;
        max-width: 900px;
        padding: 0 20px;
        box-sizing: border-box;
        width: 100%;
    }

    .stat-card {
        padding: 25px 20px;
        border-radius: 16px;
    }

    .stat-card .stat-number {
        font-size: clamp(2rem, 3.2vw, 2.4rem);
    }
    
    .stat-card .stat-label {
        font-size: clamp(0.9rem, 1.1vw, 1rem);
    }
}

/* ==============================================
   RESPONSIVE FOR SMALL SCREENS (< 596px)
   ============================================== */
@media (max-width: 596px) {
    /* Ẩn thanh cuộn dọc trên mobile nhỏ */
    html {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    html::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    body {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    body::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* sponsor-card animate lên trên đầu, cao hơn cả featured */
    .sponsor-card.animate {
        order: -3;
        margin-bottom: 20px;
    }

    .sponsor-card.featured.animate {
        order: -2;
        margin-bottom: 20px;
    }

    .sponsor-card.featured {
        order: -1;
        margin-bottom: 20px;
    }

    .sponsors-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .sponsor-card.animate:first-child {
        margin-top: 0;
    }
}

/* ========================================
   RESPONSIVE NAVBAR FOR MOBILE DEVICES
   ======================================== */

/* CSS CHUNG CHO TẤT CẢ BREAKPOINTS - TRÁNH TRÙNG LẶP */

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .navbar {
        max-width: calc(100vw - 40px);
        width: 80%;
        padding: 10px 15px;
        top: 20px;
        flex-direction: row;
        text-align: left;
        overflow: hidden;
        box-sizing: border-box;
        flex-wrap: nowrap;
    }

    .logo {
        justify-content: flex-start;
        margin-bottom: 0;
        flex-shrink: 0;
        font-size: 15px;
    }

    .spacer {
        padding-bottom: 30%;
    }

    .logo-row {
        padding-top: 50%;
    }

    .logo img {
        height: 40px;
        margin-right: 8px;
    }

    .canva {
        height: 100%;
    }

    .menu {
        justify-content: center;
        flex-wrap: wrap;
        order: 2;
        gap: 2px;
        flex: 1;
        overflow: hidden;
    }

    .menu a {
        font-size: 10px;
        padding: 4px 6px;
        margin: 0;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .menu a.active,
    .menu a.disabled {
        font-size: 15px;
        font-weight: bold;
    }

    .button {
        padding-block: 0.3rem;
        font-size: 9px;
        order: 3;
        align-self: center;
        margin-top: 0;
        flex-shrink: 0;
    }

    .icon {
        width: 22px;
        height: 22px;
    }

    .img-logo {
        margin-right: 360px;
        margin-top: -90px;
        width: 360px;
    }

    .hero-heading {
        font-size: 55px;
        margin-left: 340px
    }

    .hero-heading1 {
        font-size: 55px !important;
        margin-left: 300px;
        margin-top: -90px;
    }

    .hero-heading2 {
        font-size: 15px !important;
        margin-left: 305px;
        margin-top: -80px;
    }

    .hero-button {
        margin-top: 30px;
        margin-left: -15px;

        font-size: 16px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
    }

    .button.learn-more,
    a.learn-more {
        width: 12rem;
        height: auto;
        position: relative;
        display: inline-block;
    }

    .button.learn-more .button-text,
    a.learn-more .button-text {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        padding: 0.75rem 0;
        margin: 0 0 0 1.85rem;
        color: #fff;
        font-weight: 700;
        line-height: 1.6;
        text-align: center;
        text-transform: uppercase;
    }

    .button.learn-more .circle,
    a.learn-more .circle {
        width: 3rem;
        height: 3rem;
        position: relative;
        display: block;
        margin: 0;
        background: #ef4565;
        border-radius: 1.625rem;
        transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    }

    /* CSS cho history-section trên Tablet */
    .history-section {
        padding-top: 35px;
        padding-bottom: 25px;
    }

    .history-section h2 {
        font-size: 2.5rem;
        margin: 15px 0;
    }

    .history-section h2:first-child,
    .hr-header h2:first-child {
        font-size: 2.2rem;
    }

    .history-subtitle {
        margin-top: 25px;
        margin-bottom: 40px;
        padding: 0 30px;
    }

    .history-subtitle p {
        font-size: 1.1rem;
        line-height: 1.6;
    }

    .timeline-container {
        max-width: 85%;
    }

    .timeline-item {
        margin-bottom: 25px;
        display: flex;
        align-items: center;
        width: 100%;
    }

    .timeline-item.left {
        flex-direction: row;
        justify-content: flex-start;
    }

    .timeline-item.right {
        flex-direction: row-reverse !important;
        justify-content: flex-start;
    }

    .timeline-item.left .timeline-date {
        margin-right: 25px;
        margin-left: 12px;
        flex-shrink: 0;
    }

    .timeline-item.right .timeline-date {
        margin-left: 25px;
        margin-right: 12px;
        flex-shrink: 0;
    }

    .timeline-item .timeline-content {
        padding: 15px;
        margin: 0;
        flex: 1;
        max-width: calc(100% - 110px);
    }

    .timeline-item .timeline-content h3 {
        font-size: 1rem;
        margin-bottom: 8px;
        line-height: 1.3;
    }

    .timeline-item .timeline-content p {
        font-size: 0.85rem;
        line-height: 1.4;
        margin-bottom: 5px;
    }

    .timeline-date {
        font-size: 0.9rem;
        padding: 6px 12px;
        margin-bottom: 0;
        white-space: nowrap;
        width: auto;
        min-width: 80px;
    }

    .timeline-toggle-left,
    .more-timeline-btn {
        font-size: 1rem !important;
        padding: 12px 25px !important;
        margin: 25px auto !important;
    }

    .timeline-more-content .timeline-item .timeline-content {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        backdrop-filter: blur(10px) !important;
    }

    .timeline-more-content.show .timeline-item .timeline-content:hover {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18) !important;
        transform: translateY(-4px) !important;
    }

    .timeline-container::before {
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
    }

    .timeline-more-toggle {
        margin: 0 0;
    }

    /* CSS cho writing section trên Tablet */
    .writing {
        padding-top: 40px;
        padding-bottom: 20px;
    }

    .posts-section,
    .confessions-section {
        padding: 60px 0 !important;
    }

    .section-bg-decoration .bg-circle {
        display: none; /* Ẩn decorative circles trên tablet để tối ưu performance */
    }

    .writing .heading-section {
        margin-bottom: 30px;
    }

    .writing .heading-section h2 {
        font-size: 2.5rem !important;
        margin-bottom: 20px !important;
    }


    .writing .section {
        padding: 25px 15px !important;
    }

    .writing .articles-container {
        padding: 40px 50px 40px 50px !important; /* Tăng padding để box-shadow không bị cắt */
        gap: 25px !important;
    }
    
    /* Ẩn thanh cuộn dọc và ngang cho articles-container animate nhưng vẫn cho phép scroll/swipe */
    .articles-container.animate {
        scrollbar-width: none !important; /* Firefox - ẩn scrollbar */
        -ms-overflow-style: none !important; /* IE và Edge - ẩn scrollbar */
        overflow-x: auto !important; /* Cho phép scroll/swipe ngang nhưng ẩn scrollbar */
        overflow-y: hidden !important; /* Ẩn thanh cuộn dọc */
        touch-action: pan-x !important; /* Cho phép vuốt ngang trên tablet */
        -webkit-overflow-scrolling: touch !important; /* Smooth scrolling trên iOS */
    }
    
    .articles-container.animate::-webkit-scrollbar {
        display: none !important; /* Ẩn scrollbar trên Webkit browsers */
        width: 0 !important;
        height: 0 !important;
    }
    
    /* Đảm bảo không có thanh cuộn dọc */
    .articles-container.animate::-webkit-scrollbar:vertical {
        display: none !important;
        width: 0 !important;
    }
    
    /* Đảm bảo không có thanh cuộn ngang (nhưng vẫn cho phép scroll) */
    .articles-container.animate::-webkit-scrollbar:horizontal {
        display: none !important;
        height: 0 !important;
    }

    .activities-section {
        padding: 45px 0px 0px 0px;
        margin: 0px 0;
    }

    .activities-section h2:first-child {
        font-size: 2.5rem;
    }

    .activities-section h2 {
        font-size: 2.5rem;
    }

    .activity-category {
        margin-top: 20px;
        padding: 0px 25px 25px 25px !important;
        margin-bottom: 25px !important;
        border-radius: 18px !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    }

    .activity-category .category-title {
        font-size: 1.3rem !important;
        margin-bottom: 20px !important;
        text-align: center !important;
        display: block !important;
    }

    .activity-category .category-icon {
        font-size: 1.5rem !important;
        margin-right: 10px !important;
    }

    .activity-list {
        gap: 15px !important;
    }

    .activity-item {
        padding: 15px !important;
        margin-bottom: 12px !important;
        border-radius: 12px !important;
    }

    .activity-header {
        margin-bottom: 10px !important;
        gap: 10px !important;
    }

    .activity-name {
        font-size: 1.1rem !important;
        line-height: 1.4 !important;
    }

    .activity-description {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin-bottom: 10px !important;
    }

    .activity-status {
        font-size: 0.8rem !important;
        padding: 4px 10px !important;
        border-radius: 6px !important;
    }

    .activity-meta {
        font-size: 0.8rem;
        gap: 12px;
    }

    .hr-subtitle p {
        font-size: 1.1rem !important;
        line-height: 1.6 !important;
    }

    .activities-subtitle p,
    .history-subtitle p,
    .sponsors-subtitle p,
    .contact-subtitle {
        font-size: 1.1rem;
        line-height: 1.6;
    }

    .activities-grid {
        margin-top: 0px;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 25px;
    }

    .achievement-stats {
        margin: 30px auto 50px auto;
        gap: 16px;
        grid-template-columns: repeat(4, 1fr);
        max-width: 700px;
        padding: 0 20px;
        box-sizing: border-box;
        width: 100%;
    }

    .stat-card {
        padding: 25px 20px;
        border-radius: 16px;
    }

    .stat-card .stat-number {
        font-size: clamp(1.9rem, 3vw, 2.2rem);
        margin-bottom: 8px;
    }

    .stat-card .stat-label {
        font-size: clamp(0.85rem, 1.1vw, 0.95rem);
    }

    .sponsors-grid {
        max-width: calc(600px + (100vw - 76px) * 0.5);
        /* Đảm bảo grid là 1 cột trên mobile/tablet (≤768px) */
        grid-template-columns: 1fr !important;
        gap: calc(15px + (100vw - 768px) * 0.02);
        margin-top: 35px;
        padding: 0 15px;
        justify-items: center;
        width: 100%;
    }
    
    /* Sắp xếp lại thứ tự khi grid là 1 cột (hàng dọc):
       - Sponsor thứ 2 (ở giữa) lên đầu
       - Sponsor thứ 1 xuống giữa
       - Sponsor thứ 3 giữ nguyên cuối
    */
    .sponsors-grid .sponsor-card-circular {
        order: -1; /* Sponsor ở giữa lên đầu */
    }
    
    .sponsors-grid .sponsor-card-first {
        order: 0; /* Sponsor đầu xuống giữa */
    }
    
    .sponsors-grid .sponsor-card:not(.sponsor-card-circular):not(.sponsor-card-first) {
        order: 1; /* Sponsor cuối giữ nguyên */
    }

    .sponsor-logo {
        width: 140px;
        height: 90px;
        border-radius: 12px;
        margin: 0 auto 20px auto;
    }
    
    /* Điều chỉnh kích thước sponsor-card dựa trên logo ở 768px */
    /* sponsor-card-circular: logo 140x140px (hình tròn), padding 20px → card width ≈ 180px + text */
    /* sponsor-card-first: logo 140x90px, padding 20px → card width ≈ 180px + text */
    .sponsor-card {
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Đảm bảo logo hình tròn vẫn là 140x140px */
    .sponsor-card-circular .sponsor-logo:has(.sponsor-avatar-circle) {
        width: 140px !important;
        height: 140px !important;
    }
    
    /* Đảm bảo logo card-first vẫn là 140x90px */
    .sponsor-card-first .sponsor-logo {
        width: 140px;
        height: 90px;
    }

    .sponsors-section {
        padding: 45px 0px 35px 0px;
    }

    .sponsors-section h2:first-child,
    .sponsors-section.animate h2,
    .hr-header h2,
    .contact-title {
        font-size: 2.5rem;
    }

    .article-card p {
        font-size: 0.85rem;
    }

    .article-card h3 {
        font-size: 1.3rem;
    }

    .article-card .read-more {
        padding: 10px 18px;
        margin: 15px 25px;
        border-radius: 20px;
        font-size: 1rem;
    }

    .article-card img {
        height: 200px;
    }

    .article-card {
        min-width: 320px;
        max-width: 320px;
        min-height: 380px;
    }

    .historyy,
    button.historyy,
    .historyy.historyy {
        font-size: 12px !important;
        margin: 20px 0 !important;
        border-radius: 50px !important;
        gap: 10px !important;
        box-shadow: 0 6px 20px rgba(239, 69, 101, 0.35) !important;
    }

    button.historyy:hover {
        box-shadow: 0 8px 25px rgba(239, 69, 101, 0.45) !important;
    }

    .human_resources.animate {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100%;
        box-sizing: border-box;
    }

    .team-grid {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 30px;
        margin-bottom: 50px;
        margin-top: 30px;
        padding: 0 15px;
    }

    .team-container .team-grid {
        padding: 0 15px;
    }

    .team-card {
        padding: 30px;
        border-radius: 20px;
        margin: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .team-card h3,
    .sponsor-info h3 {
        font-size: 1.4rem;
    }

    .team-card p,
    .sponsor-title {
        font-size: 1rem;
        line-height: 1.6;
    }

    .team-toggle {
        padding: 12px 25px;
        font-size: 14px;
        margin: 25px auto;
        gap: 9px;
        border-radius: 40px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    }

    .team-toggle:hover {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
    }



    .contact-card h3 {
        font-size: 1.1rem;
    }

    .contact-card p,
    .sponsor-description {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .card-description {
        font-size: 0.85rem;
    }

    .card-arrow {
        display: none;
    }

    .contact-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .contact-grid,
    .contact-grid.animate {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 25px;
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }

    .contact-card {
        flex: 1 1 calc(50% - 15px);
        min-width: 300px;
        max-width: 350px;
        width: 100%;
        box-sizing: border-box;
    }

    .modern-contact-section {
        padding: 50px 60px;
    }
}

/* Mobile (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
    /* Ẩn thanh cuộn dọc trên mobile medium */
    html {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    html::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    body {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    body::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    .navbar {
        max-width: calc(100vw - 20px);
        padding: 10px 15px;
        top: 15px;
        border-radius: 25px;
        flex-direction: column;
        text-align: center;
    }

    .logo {
        justify-content: center;
        margin-bottom: 8px;
        order: 1;
    }

    .logo img {
        height: 40px;
        margin-right: 8px;
    }

    .menu {
        justify-content: center;
        flex-wrap: wrap;
        order: 2;
    }

    .menu a {
        font-size: 13px;
        padding: 6px 10px;
    }

    .menu a.active,
    .menu a.disabled {
        font-size: 13px;
        font-weight: bold;
    }

    .button {
        padding-block: 0.4rem;
        padding-inline: 0.8rem;
        font-size: 11px;
        order: 3;
        align-self: center;
        margin-top: 6px;
    }

    .icon {
        width: 20px;
        height: 20px;
    }

    .spacer {
        padding-bottom: 93vw;
    }

    .logo-row {
        margin-top: 55vw;

    }

    .img-logo {
        margin-right: 0px;
        margin-top: -70px;
        width: 280px;
    }

    .hero-heading {
        font-size: 40px;
        margin-top: 610px;
        margin-left: 0%;
    }

    .hero-heading1 {
        font-size: 40px !important;
        margin-left: 0%;
        margin-top: 460px;
    }

    .hero-heading2 {
        font-size: 18px !important;
        margin-left: 0%;
        margin-top: 400px;
    }

    .hero-button {
        margin-top: 510px;
        margin-left: auto;
        margin-right: auto;
        font-size: 15px;
    }

    .button.learn-more,
    a.learn-more {
        width: auto;
        margin: 0 auto;
    }

    .button.learn-more .button-text,
    a.learn-more .button-text {
        top: 4px;
        padding-right: 22px;
    }

    .button.learn-more .circle,
    a.learn-more .circle {
        width: 12rem;
        height: 3.2rem;
    }

    /* CSS cho history-section trên Mobile */
    .history-section {
        padding-top: 25px;
        padding-bottom: 20px;
    }

    .history-section h2 {
        font-size: 2rem;
        margin: 10px 0;
    }

    .history-section h2:first-child {
        font-size: 1.8rem;
    }

    .history-subtitle {
        margin-top: 18px;
        margin-bottom: 35px;
        padding: 0 20px;
    }

    .history-subtitle p {
        font-size: 1rem;
        line-height: 1.5;
    }

    .timeline-container {
        max-width: 100%;
    }

    .timeline-item {
        margin-bottom: 18px;
        display: flex;
        align-items: center;
        width: 100%;
    }

    .timeline-item.left {
        flex-direction: row;
        justify-content: flex-start;
    }

    .timeline-item.right {
        flex-direction: row-reverse !important;
        justify-content: flex-start;
    }

    .timeline-item.left .timeline-date {
        margin-right: 18px;
        margin-left: 8px;
        flex-shrink: 0;
    }

    .timeline-item.right .timeline-date {
        margin-left: 18px;
        margin-right: 8px;
        flex-shrink: 0;
    }

    .timeline-item .timeline-content {
        padding: 12px;
        margin: 0;
        flex: 1;
        max-width: calc(100% - 90px);
    }

    .timeline-item .timeline-content h3 {
        font-size: 0.9rem;
        margin-bottom: 6px;
        line-height: 1.2;
    }

    .timeline-item .timeline-content p {
        font-size: 0.75rem;
        line-height: 1.2;
        margin-bottom: 4px;
    }

    .timeline-date {
        font-size: 0.8rem;
        padding: 5px 10px;
        margin-bottom: 0;
        white-space: nowrap;
        width: auto;
        min-width: 70px;
    }

    .timeline-toggle-left,
    .more-timeline-btn {
        font-size: 0.9rem !important;
        padding: 10px 20px !important;
        margin: 18px auto !important;
    }

    .timeline-more-content .timeline-item .timeline-content {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        backdrop-filter: blur(8px) !important;
    }

    .timeline-more-content.show .timeline-item .timeline-content:hover {
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15) !important;
        transform: translateY(-3px) !important;
    }

    .timeline-container::before {
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
    }

    .timeline-more-toggle {
        margin: 0 0;
    }

    /* CSS cho writing section trên Mobile */
    .writing {
        padding-top: 30px;
        padding-bottom: 15px;
    }

    .posts-section,
    .confessions-section {
        padding: 50px 0 !important;
    }

    .section-bg-decoration {
        display: none; /* Ẩn hoàn toàn trên mobile nhỏ */
    }

    .writing .heading-section {
        margin-bottom: 25px;
    }

    .writing .heading-section h2 {
        font-size: 2rem !important;
        margin-bottom: 15px !important;
    }


    .section-subtitle {
        font-size: 1rem !important;
        padding: 0 15px;
    }

    .section-divider {
        width: 60px;
        margin: 20px auto 0;
    }

    /* Gallery Section Responsive */
    .gallery-section {
        padding: 40px 0 50px 0;
    }

    .gallery-section h2 {
        font-size: 2rem !important;
    }

    .gallery-wrapper {
        margin-top: 30px;
    }

    .gallery-grid {
        gap: 15px;
        padding: 15px 0;
    }

    .gallery-item {
        min-width: 280px;
        max-width: 350px;
        min-height: 200px;
        max-height: 500px;
    }

    .gallery-item img {
        max-width: 350px;
        max-height: 500px;
        object-fit: contain;
    }

    .gallery-item-overlay {
        padding: 15px;
    }

    .gallery-item-title {
        font-size: 1rem;
        margin-bottom: 6px;
    }

    .gallery-item-description {
        font-size: 0.85rem;
    }

    /* Reviews Section Responsive */
    .reviews-section {
        padding: 40px 0 50px 0;
    }

    .reviews-section h2 {
        font-size: 2rem !important;
    }

    .reviews-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
        padding: 0 15px;
    }

    .review-card {
        padding: 20px;
    }

    .review-avatar {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .review-name {
        font-size: 1rem;
    }

    .review-text {
        font-size: 0.9rem;
    }

    .writing .section {
        padding: 18px 8px !important;
    }

    .writing .articles-container {
        padding: 40px 40px 40px 40px !important; /* Tăng padding để box-shadow không bị cắt */
        gap: 18px !important;
    }

    .activities-section {
        padding: 35px 0px 0px 0px;
        margin: 0px 0;
    }

    .activities-section h2:first-child {
        font-size: 2rem;
    }

    .activities-section h2 {
        font-size: 2rem;
    }

    .activity-category {
        padding: 18px !important;
        margin-bottom: 18px !important;
        border-radius: 15px !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
    }

    .activity-category .category-title {
        font-size: 1.1rem !important;
        margin-bottom: 15px !important;
        text-align: center !important;
        display: block !important;
    }

    .activity-category .category-icon {
        font-size: 1.3rem !important;
        margin-right: 8px !important;
    }

    .activity-list {
        gap: 12px !important;
    }

    .activity-item {
        padding: 12px !important;
        margin-bottom: 10px !important;
        border-radius: 10px !important;
    }

    .activity-header {
        margin-bottom: 8px !important;
        gap: 8px !important;
    }

    .activity-name {
        font-size: 1rem !important;
        line-height: 1.3 !important;
    }

    .activity-description {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }

    .activity-status {
        font-size: 0.75rem !important;
        padding: 3px 8px !important;
        border-radius: 5px !important;
    }

    .activity-meta {
        font-size: 0.75rem;
        gap: 10px;
    }

    .activities-subtitle p,
    .history-subtitle p,
    .sponsors-subtitle p,
    .hr-subtitle p {
        font-size: 1rem;
        line-height: 1.5;
    }

    .activities-grid {
        margin-top: 0px;
    }

    .achievement-stats {
        margin: 25px auto 40px auto;
        gap: 14px;
        grid-template-columns: repeat(4, 1fr);
        max-width: 600px;
        padding: 0 15px;
        box-sizing: border-box;
        width: 100%;
    }

    .stat-card {
        padding: 22px 16px;
        border-radius: 16px;
    }

    .stat-card .stat-number {
        font-size: clamp(1.7rem, 2.8vw, 2rem);
        margin-bottom: 8px;
    }

    .stat-card .stat-label {
        font-size: clamp(0.8rem, 1vw, 0.9rem);
    }
    
    .stat-card:hover {
        transform: translateY(-5px);
    }

    /* Light effect đã được thay thế bằng CSS */

    .sponsors-grid {
        /* Đảm bảo grid là 1 cột trên mobile (≤480px) */
        grid-template-columns: 1fr !important;
        gap: 15px;
        margin-top: 30px;
        padding: 0 10px;
        justify-items: center;
    }
    
    /* Sắp xếp lại thứ tự sponsor trên mobile nhỏ:
       - Sponsor thứ 2 (ở giữa) lên đầu
       - Sponsor thứ 1 xuống giữa
       - Sponsor thứ 3 giữ nguyên cuối
    */
    .sponsors-grid .sponsor-card-circular {
        order: -1 !important;
    }
    
    .sponsors-grid .sponsor-card-first {
        order: 0 !important;
    }
    
    .sponsors-grid .sponsor-card:not(.sponsor-card-circular):not(.sponsor-card-first) {
        order: 1 !important;
    }

    .sponsor-logo {
        width: 130px;
        height: 80px;
        border-radius: 10px;
        margin: 0 auto 15px auto;
    }
    
    /* Điều chỉnh kích thước sponsor-card dựa trên logo ở 480px */
    /* sponsor-card-circular: logo 130x130px (hình tròn), padding 20px → card width ≈ 170px + text */
    /* sponsor-card-first: logo 130x80px, padding 20px → card width ≈ 170px + text */
    .sponsor-card {
        max-width: 300px;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Đảm bảo logo hình tròn vẫn là 130x130px */
    .sponsor-card-circular .sponsor-logo:has(.sponsor-avatar-circle) {
        width: 130px !important;
        height: 130px !important;
    }
    
    /* Đảm bảo logo card-first vẫn là 130x80px */
    .sponsor-card-first .sponsor-logo {
        width: 130px;
        height: 80px;
    }

    .sponsors-section {
        padding: 35px 0px 25px 0px;
    }

    .sponsors-section h2:first-child,
    .sponsors-section.animate h2 {
        font-size: 2rem;
    }

    .article-card p {
        font-size: 0.75rem;
    }

    .article-card h3 {
        font-size: 1.1rem;
    }

    .article-card .read-more {
        padding: 8px 15px;
        margin: 12px 18px;
        border-radius: 18px;
        font-size: 0.9rem;
    }

    .article-card img {
        height: 170px;
    }

    .article-card {
        min-width: 280px;
        max-width: 280px;
        min-height: 320px;
    }

    .historyy,
    button.historyy,
    .historyy.historyy {
        padding: 12px 25px !important;
        font-size: 15px !important;
        margin: 25px 0 !important;
        border-radius: 45px !important;
        gap: 9px !important;
        box-shadow: 0 4px 15px rgba(239, 69, 101, 0.3) !important;
    }

    button.historyy:hover {
        box-shadow: 0 6px 20px rgba(239, 69, 101, 0.4) !important;
    }

    .team-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 45px;
        margin-top: 25px;
        padding: 0 8px;
    }

    .team-container .team-grid {
        padding: 0 8px;
    }

    .team-card {
        padding: 25px;
        border-radius: 18px;
        margin: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .team-card h3 {
        font-size: 1.2rem;
    }

    .team-card p {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .team-toggle {
        padding: 10px 22px;
        font-size: 13px;
        margin: 18px auto;
        gap: 8px;
        border-radius: 35px;
        box-shadow: 0 5px 18px rgba(0, 0, 0, 0.08);
    }

    .team-toggle:hover {
        box-shadow: 0 7px 22px rgba(0, 0, 0, 0.12);
        transform: translateY(-1.5px);
    }



    .contact-icon {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }
}

/* Small Mobile (≤480px) */
@media (max-width: 480px) {
    /* Ẩn HOÀN TOÀN thanh cuộn dọc cho TẤT CẢ phần tử trên mobile */
    html, body, *, *::before, *::after {
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE và Edge */
    }
    
    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    *::-webkit-scrollbar,
    *::before::-webkit-scrollbar,
    *::after::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }
    
    html {
        /* Trên mobile, navbar nhỏ hơn nên scroll offset cũng nhỏ hơn */
        scroll-padding-top: 100px; /* 10px (top) + 80px (navbar height) + 10px (extra space) */
    }
    
    .navbar {
        max-width: calc(100vw - 16px);
        padding: 8px 12px;
        top: 10px;
        border-radius: 20px;
        flex-direction: column;
        text-align: center;
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out !important;
        will-change: transform;
    }
    
    /* Điều chỉnh scroll-margin-top cho các sections và cards trên mobile */
    .posts-section,
    .confessions-section,
    .history-section,
    .activities-section,
    .sponsors-section,
    .human_resources,
    .article-card {
        scroll-margin-top: 100px; /* 10px (top) + 80px (navbar height) + 10px (extra space) */
    }

    /* Navbar ẩn khi scroll xuống - Tăng specificity và dùng !important để override animation */
    .navbar.navbar-hidden {
        transform: translateX(-50%) translateY(-120%) !important;
        opacity: 0 !important;
        pointer-events: none;
        animation: none !important; /* Dừng animation khi ẩn */
    }

    .logo {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .logo img {
        height: 35px;
        margin-right: 5px;
    }

    .menu {
        justify-content: center;
        flex-wrap: wrap;
    }

    .menu a {
        font-size: 12px;
        padding: 5px 8px;
    }

    .menu a.active,
    .menu a.disabled {
        font-size: 12px;
        font-weight: bold;
    }

    .button {
        padding-block: 0.35rem;
        padding-inline: 0.6rem;
        font-size: 10px;
        order: 3;
        align-self: center;
        margin-top: 5px;
    }

    .icon {
        width: 18px;
        height: 18px;
    }

    .spacer {
        padding-bottom: 100vw;
    }

    .logo-row {
        margin-top: 95vw;
    }

    .canva {
        height: 150vw;
    }

    .img-logo {
        margin-right: 0px;
        margin-top: -100px;
        width: 250px;
    }

    .hero-heading {
        font-size: 35px;
        margin-top: 550px;
        margin-left: 0%;
    }

    .hero-heading1 {
        font-size: 35px !important;
        margin-left: 0%;
        margin-top: 380px;
    }

    .hero-heading2 {
        font-size: 15px !important;
        margin-left: 0%;
        margin-top: 290px;
    }

    /* Gộp tất cả CSS cho hero-button và button.learn-more */
    .hero-button {
        margin-top: 390px;
        margin-left: 30px;
        font-size: 13px;
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .button.learn-more,
    a.learn-more {
        width: 8rem;
        margin: 0 auto;
        display: block;
        position: relative;
    }

    .button.learn-more .button-text,
    a.learn-more .button-text {
        margin: 0 0 0 1.5rem;
        font-size: 11px;
        right: -13px;
    }

    .button.learn-more .circle,
    a.learn-more .circle {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 1.25rem;
    }

    button.learn-more .circle .icon.arrow::before,
    a.learn-more .circle .icon.arrow::before {
        right: 3.959px;
    }

    /* CSS cho history-section trên Mobile */
    .history-section {
        padding-top: 20px;
        padding-bottom: 15px;
    }

    .history-section h2 {
        font-size: 1.85rem;
        margin: 8px 0;
    }

    .history-section h2:first-child,
    .hr-header h2:first-child {
        font-size: 1.5rem;
    }

    .history-subtitle {
        margin-top: 15px;
        margin-bottom: 30px;
        padding: 0 15px;
    }

    .history-subtitle p {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .timeline-container {
        max-width: 100%;
        margin: 0 auto;
        padding: 5px 10px;
        box-sizing: border-box;
        position: relative;
    }

    /* Giữ layout 2 bên nhưng thu nhỏ */
    .timeline-item {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        width: 100%;
    }

    .timeline-item.left {
        flex-direction: row;
        justify-content: flex-start;
    }

    .timeline-item.right {
        flex-direction: row-reverse !important;
        justify-content: flex-start;
    }

    .timeline-item.left .timeline-date {
        margin-right: 15px;
        margin-left: 5px;
        flex-shrink: 0;
    }

    .timeline-item.right .timeline-date {
        margin-left: 15px;
        margin-right: 5px;
        flex-shrink: 0;
    }

    .timeline-item .timeline-content {
        padding: 8px;
        margin: 0;
        flex: 1;
        max-width: calc(100% - 90px);
        min-width: 0;
        box-sizing: border-box;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .timeline-item .timeline-content h3 {
        font-size: 1rem;
        margin-bottom: 5px;
        line-height: 1.1;
    }

    .timeline-item .timeline-content p {
        font-size: 0.75rem;
        line-height: 1.1;
        margin-bottom: 3px;
    }

    .timeline-date {
        font-size: 0.75rem;
        padding: 4px 8px;
        margin-bottom: 0;
        white-space: nowrap;
        width: auto;
        min-width: 60px;
    }

    .timeline-toggle-left,
    .more-timeline-btn {
        font-size: 0.8rem !important;
        padding: 8px 16px !important;
        margin: 15px auto !important;
    }

    /* Fix box-shadow cho timeline-more-content */
    .timeline-more-content .timeline-item .timeline-content {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }

    .timeline-more-content.show .timeline-item .timeline-content:hover {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }

    .timeline-container::before {
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0;
    }

    .timeline-more-toggle {
        margin: 0 0;
    }

    /* CSS cho writing section trên Small Mobile */
    .writing {
        padding-top: 25px;
        padding-bottom: 10px;
    }

    .posts-section,
    .confessions-section {
        padding: 40px 0 !important;
    }

    .section-bg-decoration {
        display: none;
    }

    .writing .heading-section {
        margin-bottom: 20px;
    }

    .writing .heading-section h2 {
        font-size: 1.85rem !important;
        margin-bottom: 12px !important;
    }
    
    .heading-section.animate h2 {
        font-size: 1.85rem !important;
        margin-bottom: 12px !important;
    }

    .section-subtitle {
        font-size: 0.75rem !important;
        padding: 0 10px;
        line-height: 1.6;
    }
    .section-divider {
        width: 50px;
        height: 3px;
        margin: 15px auto 0;
    }

    .writing .section {
        padding: 15px 5px;
    }

    .writing .articles-container {
        padding: 35px 30px 35px 30px; /* Tăng padding để box-shadow không bị cắt */
        gap: 15px;
        /* Đảm bảo articles-container vẫn có thanh cuộn ngang trên mobile */
        scrollbar-width: thin !important; /* Firefox - chỉ thanh cuộn ngang */
        scrollbar-color: #ef4565 #f1f1f1 !important;
    }
    
    .articles-container::-webkit-scrollbar {
        height: 8px !important; /* Giữ thanh cuộn ngang */
        width: 0 !important; /* Ẩn thanh cuộn dọc */
    }
    
    .articles-container::-webkit-scrollbar:vertical {
        display: none !important;
        width: 0 !important;
    }
    
    /* Cho phép scroll/swipe ngang cho articles-container animate trên mobile */
    .articles-container.animate {
        scrollbar-width: none !important; /* Firefox - ẩn scrollbar */
        -ms-overflow-style: none !important; /* IE và Edge - ẩn scrollbar */
        overflow-x: auto !important; /* Cho phép scroll/swipe ngang nhưng ẩn scrollbar */
        overflow-y: hidden !important; /* Ẩn thanh cuộn dọc */
        touch-action: pan-x !important; /* Cho phép vuốt ngang trên mobile */
        -webkit-overflow-scrolling: touch !important; /* Smooth scrolling trên iOS */
    }
    
    .articles-container.animate::-webkit-scrollbar {
        display: none !important; /* Ẩn scrollbar trên Webkit browsers */
        width: 0 !important;
        height: 0 !important;
    }
    
    .articles-container.animate::-webkit-scrollbar:vertical {
        display: none !important;
        width: 0 !important;
    }
    
    .articles-container.animate::-webkit-scrollbar:horizontal {
        display: none !important;
        height: 0 !important;
    }
    
    /* Ẩn thanh cuộn dọc cho tất cả sections và containers trên mobile - OVERRIDE TẤT CẢ */
    .section.post-section,
    .posts-section,
    .confessions-section,
    .section-wrapper,
    .main-background,
    .writing,
    .human_resources,
    .spacer,
    .body-bg,
    .content,
    .overlay {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    .section.post-section::-webkit-scrollbar,
    .posts-section::-webkit-scrollbar,
    .confessions-section::-webkit-scrollbar,
    .section-wrapper::-webkit-scrollbar,
    .main-background::-webkit-scrollbar,
    .writing::-webkit-scrollbar,
    .human_resources::-webkit-scrollbar,
    .spacer::-webkit-scrollbar,
    .body-bg::-webkit-scrollbar,
    .content::-webkit-scrollbar,
    .overlay::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }
    
    /* Ẩn thanh cuộn dọc cho các phần tử con */
    .section.post-section *,
    .posts-section *,
    .confessions-section *,
    .section-wrapper *,
    .main-background *,
    .writing *,
    .human_resources *,
    .spacer * {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    .section.post-section *::-webkit-scrollbar:vertical,
    .posts-section *::-webkit-scrollbar:vertical,
    .confessions-section *::-webkit-scrollbar:vertical,
    .section-wrapper *::-webkit-scrollbar:vertical,
    .main-background *::-webkit-scrollbar:vertical,
    .writing *::-webkit-scrollbar:vertical,
    .human_resources *::-webkit-scrollbar:vertical,
    .spacer *::-webkit-scrollbar:vertical {
        display: none !important;
        width: 0 !important;
    }

    .activities-section {
        padding: 30px 0px 0px 0px;
        margin: 0px 0;
    }

    .activities-section h2:first-child {
        font-size: 1.8rem;
    }

    .activities-section h2 {
        font-size: 1.8rem;
    }

    /* CSS cho activity-category trên Small Mobile */
    .activity-category {
        padding: 0px 15px 15px 15px;
        margin-bottom: 15px;
        border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
    }

    .activity-category .category-title {
        font-size: 1rem;
        margin-bottom: 12px;
        text-align: center;
        display: block;
    }

    .activity-category .category-icon {
        font-size: 1.2rem;
        margin-right: 6px;
    }

    .activity-list {
        gap: 10px;
    }

    .activity-item {
        padding: 10px;
        margin-bottom: 8px;
        border-radius: 8px;
    }

    .activity-header {
        margin-bottom: 6px;
        gap: 6px;
    }

    .activity-name {
        font-size: 1rem;
        line-height: 1.2;
    }

    .activity-description {
        font-size: 0.75rem;
        line-height: 1.3;
        margin-bottom: 6px;
    }

    .activity-status {
        font-size: 0.65rem;
        padding: 2px 6px;
        border-radius: 4px;
    }

    .activity-meta {
        font-size: 0.65rem;
        gap: 8px;
    }

    .activities-subtitle p,
    .history-subtitle p,
    .sponsors-subtitle p,
    .hr-subtitle p,
    .contact-subtitle {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .card-title {
        font-size: 1rem;
    }

    .card-text {
        font-size: 0.85rem;
    }

    .card-description {
        font-size: 0.8rem;
    }

    .activities-grid {
        margin-top: 0px;
    }

    .achievement-stats {
        margin: 20px auto 35px auto;
        gap: 12px;
        grid-template-columns: repeat(2, 1fr);
        max-width: 400px;
        padding: 0 15px;
        box-sizing: border-box;
        width: 100%;
    }

    .sponsors-subtitle p {
        margin-left: 5vw;
        margin-right: 5vw;
    }

    /* Giảm cỡ chữ achievement-stats trên Small Mobile */
    .stat-card {
        padding: 20px 14px;
        border-radius: 16px;
    }

    .stat-card .stat-number {
        font-size: clamp(1.5rem, 4vw, 1.8rem);
        margin-bottom: 6px;
    }

    .stat-card .stat-label {
        font-size: clamp(0.75rem, 1vw, 0.85rem);
    }
    
    .stat-card:hover {
        transform: translateY(-5px);
    }

    .sponsor-info h3 {
        font-size: 1.1rem;
    }

    .sponsor-title {
        font-size: 0.9rem;
    }

    .sponsor-description {
        font-size: 0.75rem;
    }

    /* Thu nhỏ sponsors-grid thành 3 hàng ngang như bản gốc */
    .sponsors-grid {
        max-width: 400px;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-top: 25px;
        padding: 0 8px;
        justify-items: center;
    }

    /* Thu nhỏ sponsor-logo cho phù hợp mobile */
    .sponsor-logo {
        width: 80px;
        height: 100px;
        border-radius: 8px;
        margin: 0 auto 12px auto;
    }
    
    /* Điều chỉnh kích thước sponsor-card dựa trên logo ở mobile nhỏ */
    /* sponsor-card-circular: logo 80x80px (hình tròn), padding 20px → card width ≈ 120px + text */
    /* sponsor-card-first: logo 80x100px, padding 20px → card width ≈ 120px + text */
    .sponsor-card {
        width: 100%;
        box-sizing: border-box;
        padding: 15px 10px;
    }
    
    /* Đảm bảo logo hình tròn vẫn là 80x80px */
    .sponsor-card-circular .sponsor-logo:has(.sponsor-avatar-circle) {
        width: 80px !important;
        height: 80px !important;
    }
    
    /* Đảm bảo logo card-first vẫn là 80x100px */
    .sponsor-card-first .sponsor-logo {
        width: 80px;
        height: 100px;
    }

    .sponsors-section {
        padding: 30px 0px 20px 0px;
    }

    .sponsors-section h2:first-child,
    .sponsors-section.animate h2,
    .hr-header h2,
    .contact-title {
        font-size: 1.8rem;
    }

    .article-card p {
        font-size: 0.75rem;
    }

    .article-card h3 {
        font-size: 1rem;
    }

    /* CSS cho read-more button trên Small Mobile - làm nhỏ lại */
    .article-card .read-more {
        padding: 6px 12px;
        margin: 10px 15px;
        border-radius: 15px;
        font-size: 0.8rem;
    }

    /* CSS cho article-card img trên Small Mobile - làm nhỏ lại */
    .article-card img {
        height: 150px;
    }

    /* CSS cho article-card trên Small Mobile - thu hẹp kích thước */
    .article-card {
        min-width: 250px;
        max-width: 250px;
        min-height: 280px;
    }

    /* CSS cho team-grid trên Small Mobile - chỉnh sửa cho phù hợp và rộng hơn */
    .team-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 40px;
        margin-top: 20px;
        padding: 0 5px;
    }

    .team-container .team-grid {
        padding: 0 5px;
    }

    .team-card {
        padding: 25px;
        border-radius: 15px;
        margin: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .team-card h3 {
        font-size: 1.1rem;
    }

    .team-card p {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .card-content .description {
        font-size: 0.85rem;
        line-height: 1.4;
    }

    .personal-slogan {
        font-size: 0.75rem !important;
        line-height: 1.4;
    }

    .team-slogan.animate h3 {
        font-size: 2rem;
        margin-top: 0px
    }

    .team-slogan p {
        font-size: 0.95rem;
        margin-top: 10px;
    }

    /* Tắt margin-left: -5vw cho human_resources.animate trên mobile để về giữa màn hình */
    .human_resources.animate {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100%;
        box-sizing: border-box;
    }

    /* CSS cho team-toggle trên Small Mobile - bé hơn nữa */
    .team-toggle {
        padding: 8px 18px;
        font-size: 12px;
        margin: 15px auto;
        gap: 6px;
        border-radius: 30px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    }

    .team-toggle:hover {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
        transform: translateY(-1px);
    }

    .hr-header {
        margin-bottom: 30px;
    }

    .contact-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .contact-grid,
    .contact-grid.animate {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
        gap: 20px;
        justify-content: flex-start;
        margin-left: 0;
        margin-right: auto;
    }

    .contact-card {
        width: 100%;
        max-width: 100%;
        flex: 1 1 auto;
    }

    .modern-contact-section {
        padding: 30px 20px 0px 20px;
    }

    .historyy,
    button.historyy,
    .historyy.historyy {
        padding: 2px 15px !important;
        font-size: 9px !important;
    }




}

/* Large Desktop (1024px - 1399px) - Based on Tablet with larger scales */
@media (min-width: 1024px) and (max-width: 1200px) {
    .navbar {
        width: 70%;
        max-width: 1200px;
        padding: 12px 20px;
        top: 25px;
    }

    .spacer {
        padding-bottom: 15vw;
    }

    .logo-row {
        margin-top: 45vw;

    }

    .canva {
        height: 70vw;
    }

    .logo {
        font-size: 18px;
    }

    .logo img {
        height: 45px;
        margin-right: 10px;
    }

    .menu a {
        font-size: 18px !important;
    }

    .img-logo {
        width: 400px;
        margin-top: -70px;
        margin-left: 200px;
    }

    .hero-heading {
        font-size: 70px;
        margin-left: 370px;
    }

    .hero-heading1 {
        font-size: 70px;
        margin-top: -70px;
        margin-left: 300px;
    }

    .hero-heading2 {
        font-size: 18px;
        margin-top: -35px;
        margin-left: 300px;
    }

    .hero-button {
        margin-top: 100px;
        margin-left: 120px;
        transform: translateX(-50%);
        font-size: 16px;
    }

    .sponsors-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
        padding: 0 20px;
    }

    /* Team Grid - Desktop Large (1200px+) - Separate from base */
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 35px;
        max-width: 1200px;
        padding: 0 20px;
    }

    .achievement-stats {
        max-width: 1000px;
        gap: 22px;
        margin: 35px auto 70px auto;
    }

    .contact-grid,
    .contact-grid.animate {
        max-width: 1000px;
        gap: 30px;
        margin-left: 0;
        margin-right: auto;
        justify-content: flex-start;
    }

    .activities-grid {
        max-width: 1100px;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 30px;
    }

    .modern-contact-section {
        padding: 60px 40px;
    }
}

/* Large Desktop Plus (1201px - 1439px) - Based on Large Desktop with bigger scales */
@media (min-width: 1201px) and (max-width: 1439px) {
    .navbar {
        width: 60%;
        max-width: 1400px;
        padding: 15px 25px;
        top: 30px;
    }

    .spacer {
        padding-bottom: 10%;
    }

    .logo-row {
        padding-top: 20%;

    }

    .canva {
        height: 62vw;
    }

    .logo {
        font-size: 22px;
    }

    .logo img {
        height: 55px;
        margin-right: 12px;
    }

    .menu a {
        font-size: 20px !important;
    }

    .img-logo {
        margin-top: -20px;
        margin-left: 90px;
    }

    .hero-heading {
        font-size: 85px;
        margin-left: 420px;
    }

    .hero-heading1 {
        font-size: 85px;
        margin-top: -80px;
        margin-left: 350px;
    }

    .hero-heading2 {
        font-size: 22px;
        margin-top: -40px;
        margin-left: 350px;
    }

    .hero-button {
        margin-top: 120px;
        margin-left: 150px;
        transform: translateX(-50%);
        font-size: 16px;
    }

    .sponsors-grid {
        max-width: 1300px;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        padding: 0 25px;
    }

    /* Team Grid - Desktop XL (1400px+) - Separate from base */
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
        max-width: 1400px;
        padding: 0 25px;
    }

    .achievement-stats {
        max-width: 1200px;
        gap: 24px;
        margin: 40px auto 80px auto;
    }

    .contact-grid,
    .contact-grid.animate {
        gap: 35px;
        margin-left: 0;
        margin-right: auto;
        justify-content: flex-start;
    }

    .activities-grid {
        max-width: 1300px;
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
        gap: 35px;
    }

    .modern-contact-section {
        padding: 70px 50px;
    }

    .sponsors-section {
        padding: 55px 0px 45px 0px;
    }

    .sponsors-section h2:first-child,
    .sponsors-section.animate h2,
    .hr-header h2,
    .contact-title {
        font-size: 3.2rem;
    }

    .activities-section h2:first-child {
        font-size: 3rem;
    }

    .activities-section h2 {
        font-size: 3.2rem;
    }

    .history-section h2 {
        font-size: 3.2rem;
    }

    .history-section h2:first-child,
    .hr-header h2:first-child {
        font-size: 2.8rem;
    }

    .sponsor-logo {
        width: 160px;
        height: 100px;
        border-radius: 15px;
        margin: 0 auto 25px auto;
    }

    .sponsor-info h3 {
        font-size: 1.5rem;
    }

    .sponsor-title {
        font-size: 1.1rem;
    }

    .sponsor-description {
        font-size: 1rem;
    }

    .team-card {
        padding: 35px;
        border-radius: 22px;
    }

    .team-card h3 {
        font-size: 1.6rem;
    }

    .team-card p {
        font-size: 1.1rem;
        line-height: 1.7;
    }

    .activity-category {
        padding: 35px;
        border-radius: 22px;
    }

    .activity-category .category-title {
        font-size: 1.4rem;
        margin-bottom: 25px;
    }

    .activity-name {
        font-size: 1.2rem;
    }

    .activity-description {
        font-size: 1rem;
        line-height: 1.6;
    }

    .stat-card {
        padding: 30px 24px;
        border-radius: 16px;
    }

    .stat-card .stat-number {
        font-size: clamp(2.4rem, 3.6vw, 2.8rem);
    }

    .stat-card .stat-label {
        font-size: clamp(1rem, 1.2vw, 1.1rem);
    }

    .contact-card {
        padding: 35px;
    }

    .card-title {
        font-size: 1.4rem;
    }

    .card-text {
        font-size: 1.1rem;
    }

    .card-description {
        font-size: 1rem;
    }

    .card-icon {
        min-width: 70px;
        height: 70px;
    }

    .card-icon svg {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 375px) {
    .spacer {
        padding-bottom: 125vw;
    }

    .logo-row {
        margin-top: 110vw;
    }

    .canva {
        height: 174vw;
    }
}

@media (max-width: 320px) {
    .spacer {
        padding-bottom: 155vw;
    }

    .logo-row {
        margin-top: 130vw;
    }

    .canva {
        height: 210vw;
    }

    /* Căn giữa contact-grid.animate trên mobile S (320px) */
    .contact-grid.animate {
        justify-content: center !important;
        align-items: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==============================================
   ANNOUNCEMENT MODAL STYLES - TRANG CHỦ CÔNG KHAI
   Modal hiển thị thông báo công khai cho tất cả người dùng khi vào trang chủ
   Không liên quan đến mục quản lý thông báo trong admin panel
   ============================================== */
.announcement-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-out;
}

.announcement-modal.show {
    display: flex;
}

.announcement-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.announcement-content {
    position: relative;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 60%;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 10001;
    animation: slideUp 0.4s ease-out;
    display: flex;
    flex-direction: column;
}

/* Nếu chỉ có ảnh, content tự động theo kích thước ảnh - không có scrollbar */
.announcement-content.image-only {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    overflow: hidden; /* Không có scrollbar */
    display: flex;
    align-items: center;
    justify-content: center;
}

.announcement-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    transition: all 0.3s ease;
    line-height: 1;
    padding: 0;
}

.announcement-close:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.1);
}

.announcement-body {
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.announcement-body.image-only {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Không có scrollbar */
}

.announcement-title {
    font-size: 28px;
    font-weight: bold;
    color: #094067;
    margin: 0;
    line-height: 1.3;
}

.announcement-text {
    font-size: 16px;
    color: #374151;
    line-height: 1.6;
    margin: 0;
}

.announcement-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    margin: 0 auto;
}

.announcement-image.standalone {
    max-width: 90vw;  /* Tối đa 90% chiều rộng viewport */
    max-height: 90vh; /* Tối đa 90% chiều cao viewport */
    width: auto;
    height: auto;
    border-radius: 0;
    object-fit: contain; /* Giữ tỷ lệ, không crop */
    display: block;
    margin: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive cho modal */
@media (max-width: 768px) {
    .announcement-content {
        max-width: 70%;
        max-height: 85vh;
    }

    .announcement-body {
        padding: 30px 20px;
        gap: 15px;
    }

    .announcement-title {
        font-size: 22px;
    }

    .announcement-text {
        font-size: 14px;
    }

    .announcement-close {
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .announcement-content {
        max-width: 70%;
        border-radius: 15px;
    }

    .announcement-body {
        padding: 25px 15px;
        gap: 12px;
    }

    .announcement-title {
        font-size: 20px;
    }

    .announcement-text {
        font-size: 13px;
    }
}

/* -------------------------------------------------------------------------- */
/* History section redesign                                                   */
/* -------------------------------------------------------------------------- */

.history-section {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    left: 0;
    right: 0;
    overflow: visible !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    color: #094067;
    background: linear-gradient(145deg, rgba(216, 238, 254, 0.6), rgba(255, 255, 255, 0.95));
    scroll-margin-top: 120px;
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    /* Cho phép scroll wheel hoạt động - KHÔNG chặn scroll */
    touch-action: pan-y;
    /* Đảm bảo không chặn scroll events */
    pointer-events: auto;
    /* Ẩn thanh cuộn dọc nếu có */
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE và Edge */
    /* Đảm bảo section không bị cắt khi scroll - giữ nguyên vị trí trong document flow */
    will-change: opacity, transform;
    /* KHÔNG dùng contain vì có thể cắt content khi scroll */
}

/* Ẩn thanh cuộn dọc cho history-section (định nghĩa thứ hai) trong Webkit browsers */
.history-section::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.history-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(239, 69, 101, 0.08), transparent 55%);
    pointer-events: none;
}

.history-section.animate {
    opacity: 1;
    transform: translateY(0);
    /* Cho phép scroll wheel hoạt động */
    touch-action: pan-y;
    /* Ẩn thanh cuộn dọc nếu có */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE và Edge */
}

/* Ẩn thanh cuộn dọc cho history-section.animate (định nghĩa thứ hai) trong Webkit browsers */
.history-section.animate::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Đảm bảo history-section.animate không bị cắt khi scroll */
.history-section.animate {
    transform: translateY(0) !important;
    position: relative !important;
    width: calc(100% + 10vw) !important;
    max-width: calc(100% + 10vw) !important;
    margin-left: -5vw !important;
    margin-right: -5vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    left: 0 !important;
    right: 0 !important;
    will-change: auto;
}

.history-wrapper {
    position: relative;
    z-index: 1;
    padding: 0 clamp(1.5rem, 5vw, 4rem);
    max-width: 2060px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr);
    gap: clamp(0.8rem, 1.5vw, 1.5rem);
    align-items: center;
    overflow: visible !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    /* Đảm bảo không chặn scroll */
    pointer-events: auto;
    touch-action: pan-y;
    /* Không tạo scrollbar */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    /* Đảm bảo wrapper không bị cắt khi scroll - giữ nguyên vị trí trong document flow */
    /* Không set height hoặc max-height để cho phép content mở rộng tự nhiên */
    min-height: auto;
    height: auto;
    will-change: transform, opacity;
    /* Animation initial state */
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Class được thêm khi scroll đến */
.history-wrapper.animate {
    opacity: 1;
    transform: translateY(0);
}

.history-wrapper::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* History Stage - Layout bên trái với intro, metrics và actions */
.history-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 0;
    width: 100%;
    overflow: visible !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    pointer-events: auto;
    touch-action: pan-y;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    height: auto;
    max-height: none;
    transform: none !important;
    will-change: auto;
    padding: 0;
    margin: 0;
}

.history-stage::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.history-stage__intro {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
}

.history-timeline-wrapper {
    position: relative;
    min-width: 0;
    overflow: visible !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    /* Đảm bảo không chặn scroll */
    pointer-events: auto;
    touch-action: pan-y;
    /* Không tạo scrollbar */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    /* Đảm bảo wrapper không bị cắt khi scroll - cho phép content mở rộng tự nhiên */
    height: auto;
    max-height: none;
}

.history-timeline-wrapper::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.history-intro {
    margin-left: 40px;
    text-align: left;
    position: relative;
    will-change: transform, opacity;
    /* Animation initial state */
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Class được thêm khi scroll đến */
.history-intro.animate {
    opacity: 1;
    transform: translateY(0);
}

.history-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 1.25rem;
    border-radius: 999px;
    background: rgba(239, 69, 101, 0.12);
    color: #ef4565;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.history-heading {
    font-size: clamp(2.3rem, 4vw, 3.1rem);
    line-height: 1.1;
    margin: 1rem 0 1.25rem;
    color: #094067;
}

.history-lead {
    color: #5f6c7b;
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 2.5rem;
    max-width: 520px;
}

.history-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    /* Animation initial state */
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Class được thêm khi scroll đến */
.history-metrics.animate {
    opacity: 1;
    transform: translateY(0);
    /* Maintain 3 columns horizontal layout by default */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: auto;
}

.history-metric {
    position: relative;
    padding: 1rem 1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(9, 64, 103, 0.08);
    box-shadow: 0 25px 45px rgba(9, 64, 103, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    /* Animation initial state */
    opacity: 0;
    transform: scale(0.8) translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Class được thêm khi scroll đến - với staggered delay */
.history-metric.animate {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.history-metric:nth-child(1).animate {
    transition-delay: 0.1s;
}

.history-metric:nth-child(2).animate {
    transition-delay: 0.2s;
}

.history-metric:nth-child(3).animate {
    transition-delay: 0.3s;
}

.history-metric::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(239, 69, 101, 0.06), transparent 65%);
    pointer-events: none;
}

.history-metric__value {
    display: block;
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    color: #ef4565;
    line-height: 1.2;
    /* Animation initial state - giống hero-stats */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Animation khi scroll đến - giống hero-stats */
.history-metric__value.count-animate {
    opacity: 1;
    transform: translateY(0);
}

.history-metric__label {
    font-weight: bold;
    display: block;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    line-height: 1.4;
}

.history-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.history-cta {
    margin-bottom: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.8rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #ef4565, #d13b56);
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 18px 30px rgba(239, 69, 101, 0.3);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.history-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 35px rgba(239, 69, 101, 0.35);
}

.history-cta--ghost {
    background: transparent;
    color: #094067;
    border: 1px solid rgba(9, 64, 103, 0.18);
    box-shadow: none;
}

.history-cta--ghost:hover {
    border-color: rgba(239, 69, 101, 0.6);
    color: #ef4565;
    transform: translateY(-2px);
}

/* Right Column: Timeline with Cards */
.history-timeline-right {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 580px;
    z-index: 2;
    overflow: visible !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding: 0 20px;
    /* Đảm bảo không chặn scroll */
    pointer-events: auto;
    touch-action: pan-y;
    /* Không tạo scrollbar */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.history-timeline-right::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Timeline Content Container - Only for cards now */
.history-timeline-right .timeline-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    max-width: 100%;
    min-width: 0;
    overflow: visible !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    /* Đảm bảo không chặn scroll */
    pointer-events: auto;
    /* Không tạo scrollbar */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.history-timeline-right .timeline-content::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Hide tablet/mobile layout elements on desktop */
.timeline-cards-left,
.timeline-vertical-milestone,
.timeline-cards-right {
    display: none !important;
}

/* Show/hide desktop and mobile timeline containers */
.history-timeline-nav.timeline-desktop,
.history-timeline-wrapper.timeline-desktop {
    display: block;
}

.history-timeline-wrapper.timeline-mobile {
    display: none;
}

/* Decorative Background Circle - Nửa hình tròn bên phải */
.timeline-background-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

.timeline-background-circle::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 60%;
    height: 60%;
    transform: translateY(-50%);
    border: 2px dashed rgba(239, 69, 101, 0.2);
    border-radius: 50%;
    clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
}

/* Timeline Navigation Container - Vertical layout in middle column */
.timeline-navigation {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 3;
    padding: 0 clamp(0.3rem, 0.8vw, 0.8rem);
    margin: 0 auto;
    /* Đảm bảo không chặn scroll - chỉ buttons mới có pointer-events */
    pointer-events: none;
}

/* History Timeline Nav with timeline-navigation class */
.history-timeline-nav.timeline-navigation {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-shrink: 0;
    position: relative;
    z-index: 3;
    padding: 0 clamp(0.3rem, 0.8vw, 0.8rem);
    /* Đảm bảo không chặn scroll - chỉ buttons mới có pointer-events */
    pointer-events: none;
}

/* Buttons trong timeline-navigation vẫn có thể click được */
.timeline-navigation .timeline-nav-btn,
.history-timeline-nav.timeline-navigation .history-nav-btn {
    pointer-events: auto;
}

/* Navigation Buttons */
.timeline-nav-btn,
.history-nav-btn {
    width: clamp(60px, 7vw, 80px);
    height: clamp(60px, 7vw, 80px);
    border-radius: 20px;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 30px rgba(9, 64, 103, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ef4565;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.timeline-nav-btn:hover,
.history-nav-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(239, 69, 101, 0.2);
    background: #ffffff;
}

.timeline-nav-btn:active,
.history-nav-btn:active {
    transform: translateY(-1px);
}

.timeline-nav-btn:disabled,
.history-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.timeline-nav-btn:disabled:hover,
.history-nav-btn:disabled:hover {
    transform: none;
    box-shadow: 0 12px 30px rgba(9, 64, 103, 0.12);
}

.timeline-nav-btn svg,
.history-nav-btn svg {
    width: clamp(24px, 3vw, 32px);
    height: clamp(24px, 3vw, 32px);
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Timeline Vertical Line (back to vertical) */
.timeline-vertical-line {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: clamp(140px, 18vh, 200px);
    margin: clamp(0.8rem, 1.5vh, 1.2rem) 0;
    /* Đảm bảo không chặn scroll - chỉ là visual element */
    pointer-events: none;
}

.timeline-line-fill {
    position: absolute;
    width: 3px;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(239, 69, 101, 0.3) 0%,
        rgba(239, 69, 101, 0.5) 30%,
        rgba(255, 140, 66, 0.5) 70%,
        rgba(255, 140, 66, 0.3) 100%
    );
    border-radius: 2px;
    z-index: 1;
    /* Đảm bảo không chặn scroll - cho phép scroll events đi qua */
    pointer-events: none;
}

/* Timeline Dots */
.timeline-dot {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    z-index: 2;
    transition: all 0.4s ease;
    /* Đảm bảo không chặn scroll - chỉ là visual element */
    pointer-events: none;
}

.timeline-dot-top {
    top: 20%;
    background: rgba(239, 69, 101, 0.8);
}

.timeline-dot-bottom {
    bottom: 20%;
    background: rgba(255, 140, 66, 0.8);
}

/* Timeline Cards Wrapper - Show 3 cards in circular arrangement */
.timeline-cards-wrapper {
    flex: 1;
    position: relative;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 580px;
    width: 100%;
    min-width: 0;
    overflow: visible !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    /* Đảm bảo không chặn scroll */
    pointer-events: auto;
    /* Không tạo scrollbar */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.timeline-cards-wrapper::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.timeline-cards-container {
    position: relative;
    width: 100%;
    height: clamp(580px, 55vh, 650px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    /* Đảm bảo không chặn scroll */
    pointer-events: auto;
    /* Không tạo scrollbar */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.timeline-grid {
    margin-left: 40px;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    overflow: visible !important;
    box-sizing: border-box;
    will-change: transform, opacity;
    /* Animation initial state */
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Class được thêm khi scroll đến */
.timeline-grid.animate {
    opacity: 1;
    transform: translateY(0);
}

.timeline-cards-container::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Timeline Card - Button style for clickable cards */
button.timeline-card {
    position: absolute;
    min-width: clamp(500px, 55vw, 1100px);
    max-width: clamp(550px, 60vw, 1200px);
    padding: clamp(1rem, 1vw, 1rem) clamp(2rem, 1vw, 1rem);
    border-radius: 16px;
    background: rgba(255, 255, 255, 1);
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: none;
    opacity: 0;
    pointer-events: none;
    transform-origin: center center;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                left 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                z-index 0s linear 0.4s,
                width 0.3s ease,
                max-width 0.3s ease;
    width: clamp(360px, 45vw, 520px);
    max-width: clamp(400px, 48vw, 580px);
    z-index: 1;
    will-change: transform, opacity, left, top;
    box-sizing: border-box;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* Hiển thị 3 card đầu tiên ngay từ đầu (trước khi JavaScript chạy) */
.timeline-grid > button.timeline-card:nth-child(1),
.timeline-grid > button.timeline-card:nth-child(2),
.timeline-grid > button.timeline-card:nth-child(3) {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

/* Vị trí của các card được quản lý hoàn toàn bởi JavaScript dựa trên data-position */
/* Không set vị trí cố định trong CSS để tránh xung đột */

/* Ẩn tất cả các card không có data-position */
button.timeline-card:not([data-position]),
.timeline-milestone-card:not([data-position]) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* Chỉ hiển thị các card có data-position và class visible */
button.timeline-card[data-position].visible,
.timeline-milestone-card[data-position].visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

button.timeline-card:focus {
    outline: 2px solid rgba(239, 69, 101, 0.5);
    outline-offset: 2px;
}

button.timeline-card:focus:not(:focus-visible) {
    outline: none;
}

/* Timeline Milestone Card - Circular Positioning with Smooth Animation */
.timeline-milestone-card {
    position: absolute;
    padding: clamp(1rem, 1vw, 1rem) clamp(2rem, 1vw, 1rem);
    border-radius: 16px;
    background: rgba(255, 255, 255, 1);
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: none;
    opacity: 0;
    pointer-events: none;
    transform-origin: center center;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                left 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                z-index 0s linear 0.4s,
                width 0.3s ease,
                max-width 0.3s ease;
    width: clamp(360px, 45vw, 520px);
    max-width: clamp(400px, 48vw, 580px);
    z-index: 1;
    will-change: transform, opacity, left, top;
    box-sizing: border-box;
}

/* Visible cards in circular arrangement */
button.timeline-card.visible,
.timeline-milestone-card.visible {
    opacity: 1;
    pointer-events: auto;
    /* Cho phép scroll pass through - KHÔNG chặn scroll events */
    touch-action: pan-y;
    /* Đảm bảo card không chặn scroll của document */
    will-change: transform, opacity, left, top;
    /* Đảm bảo card không chặn scroll - scroll sẽ hoạt động bình thường */
    overflow: visible;
}

/* Đảm bảo timeline-cards-container và timeline-cards-wrapper không chặn scroll */
/* Containers vẫn có pointer-events: auto để buttons có thể click */
/* Scroll events sẽ hoạt động bình thường vì containers có overflow: visible */

/* Hide cards that are not visible */
button.timeline-card:not(.visible):not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)),
.timeline-milestone-card:not(.visible) {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden;
}

/* Position 0: Top (Card 0) - Circular path start (270°) */
button.timeline-card.visible[data-position="0"],
.timeline-milestone-card.visible[data-position="0"] {
    z-index: 2;
    opacity: 1;
    /* Position will be set by JavaScript for circular animation */
}

/* Position 1: Middle-Right (Card giữa, Active) - Circular path middle (0°) - highest z-index để nổi đè */
button.timeline-card.visible[data-position="1"],
.timeline-milestone-card.visible[data-position="1"] {
    z-index: 100 !important; /* Z-index rất cao để card giữa luôn nổi đè lên card trên và dưới, kể cả trong animation */
    opacity: 1;
    /* Position will be set by JavaScript for circular animation */
}

/* Position 2: Bottom (Card 2) - Circular path end (90°) */
button.timeline-card.visible[data-position="2"],
.timeline-milestone-card.visible[data-position="2"] {
    z-index: 2;
    opacity: 1;
    /* Position will be set by JavaScript for circular animation */
}

/* Animation states for circular motion - Smooth continuous movement */
.timeline-milestone-card.moving-out-left {
    transform: scale(0.7) translateX(-250px) translateY(0) !important;
    opacity: 0 !important;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    pointer-events: none;
}

.timeline-milestone-card.moving-out-right {
    transform: scale(0.7) translateX(250px) translateY(0) !important;
    opacity: 0 !important;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    pointer-events: none;
}

.timeline-milestone-card.moving-in-left {
    transform: scale(0.85) translateX(-250px) translateY(0) !important;
    opacity: 0 !important;
}

.timeline-milestone-card.moving-in-right {
    transform: scale(0.85) translateX(250px) translateY(0) !important;
    opacity: 0 !important;
}

button.timeline-card.visible.active,
.timeline-milestone-card.visible.active {
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 1);
}

/* Hover effects removed - no animation on hover */

/* Timeline Card Header - Left alignment (separate from team cards) */
button.timeline-card header,
button.timeline-card .timeline-card__header,
.timeline-milestone-card .card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-direction: row !important;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    box-shadow: none !important;
}

/* Ensure timeline card-header content is left aligned */
button.timeline-card header .timeline-card__date,
button.timeline-card .timeline-card__header .timeline-card__date,
.timeline-milestone-card .card-header .card-date-full {
    text-align: left !important;
    margin-left: 0 !important;
}

/* Timeline Card Content Styles */
.timeline-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
    box-shadow: none !important;
}

.timeline-card__date {
    font-weight: bold;
    color: #ef4565;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    letter-spacing: 0.02em;
}

.timeline-card__excerpt {
    color: #5f6c7b;
    font-size: 1.4rem;
    line-height: 1.6;
    margin: 0;
}

.timeline-card h3 {
    color: #094067;
    font-size: clamp(1rem, 1.8vw, 1.7rem);
    font-weight: 600;
    margin: 0 0 0.8rem 0;
    line-height: 1.3;
}

.card-date-full {
    color: #ef4565;
    font-weight: 700;
    font-size: clamp(0.75rem, 0.95vw, 0.85rem);
    letter-spacing: 0.02em;
}

/* Legacy classes for backward compatibility */
.card-year {
    color: #ef4565;
    font-weight: 500;
    font-size: clamp(0.85rem, 1.1vw, 0.95rem);
    letter-spacing: 0.02em;
}

.card-date {
    color: #ef4565;
    font-size: clamp(0.85rem, 1.1vw, 0.95rem);
    font-weight: 500;
}

/* Card Title */
.card-title {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 700;
    color: #094067;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

/* Card Description */
.card-description {
    color: #5f6c7b;
    font-size: clamp(0.8rem, 1vw, 0.9rem);
    line-height: 1.5;
    margin: 0;
}

/* Media query for laptops (1024px - 1440px) */
@media (min-width: 1024px) and (max-width: 1440px) {
    .history-wrapper {
        padding: 0 clamp(1rem, 3vw, 2.5rem);
    }
    
    .history-stage {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .timeline-navigation {
        padding: 0 clamp(0.2rem, 0.6vw, 0.6rem);
    }
    
    .history-timeline-right {
        max-width: 100%;
        min-width: 0;
        min-height: 540px;
    }
    
    .timeline-milestone-card {
        min-width: clamp(340px, 38vw, 460px);
        max-width: clamp(380px, 42vw, 500px);
        padding: clamp(0.75rem, 1vw, 1.1rem) clamp(1.8rem, 3vw, 3rem);
    }
    
    .timeline-cards-container {
        height: clamp(540px, 52vh, 620px);
    }
    
    .timeline-cards-wrapper {
        min-height: 540px;
    }
    
    .history-stage {
        min-height: auto;
    }
    
    /* Hide toggle button on laptop */
    .history-stage .timeline-toggle-more {
        display: none !important;
    }
    
    /* Gallery Section - Laptop */
    .gallery-section.animate {
        padding-top: 50px;
        padding-bottom: 70px;
    }
    
    /* History Section - Laptop */
    .history-section.animate {
        padding: clamp(70px, 10vw, 100px) 0;
    }
    
    /* Reviews Section - Laptop */
    .reviews-section.animate {
        padding-top: 45px;
        padding-bottom: 70px;
    }
}

@media (max-width: 1024px) {
    /* Fix margin cho spacer - giữ margin âm để mở rộng ra ngoài */
    .spacer {
        margin-left: -5vw !important;
        margin-right: -5vw !important;
        width: calc(100% + 10vw) !important;
        position: relative !important;
        left: 0 !important;
        right: auto !important;
        overflow-x: hidden !important;
    }
    
    /* Thêm margin âm cho writing confessions-section và animate */
    /* Chỉ áp dụng cho writing có class confessions-section, không áp dụng cho posts-section */
    .writing.confessions-section,
    .writing.confessions-section.animate,
    .confessions-section,
    .confessions-section.animate {
        margin-left: -5vw !important;
        margin-right: -5vw !important;
        width: calc(100% + 10vw) !important;
        position: relative !important;
        left: 0 !important;
        right: auto !important;
        overflow-x: hidden !important;
        box-sizing: content-box !important;
    }
    
    /* Writing posts-section không có margin âm */
    .writing.posts-section {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Fix overflow ngang cho modern-contact-section */
    .modern-contact-section {
        padding: 30px 20px 0px 20px !important;
        margin: 60px 0 0 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Fix overflow ngang cho các section khác có margin âm */
    /* Featured Talkshow Section Responsive - Mobile */
    .featured-talkshow-section {
        padding: 30px 15px;
        margin: 20px 0;
    }
    
    .talkshow-layout {
        grid-template-columns: 1fr !important;
        gap: 20px;
        padding: 20px;
    }
    
    .talkshow-image-container {
        order: -1;
    }
    
    .talkshow-image-wrapper {
        width: 100%;
    }
    
    .talkshow-image {
        max-width: 100%;
        height: auto;
    }
    
    .talkshow-content {
        gap: 14px;
    }
    
    .talkshow-title {
        font-size: 1.2rem;
    }
    
    .talkshow-topic {
        font-size: 1.5rem;
        padding-left: 24px;
    }
    
    .talkshow-topic::before {
        font-size: 1.1rem;
    }
    
    .talkshow-subtitle {
        font-size: 0.9rem;
        margin-bottom: 14px;
    }
    
    .talkshow-content-detail {
        padding: 16px;
    }
    
    .countdown-container {
        padding: 20px 12px;
        margin: 16px 0;
    }
    
    .countdown-label {
        font-size: 0.9rem;
        margin-bottom: 20px;
    }
    
    .countdown-timer {
        gap: 8px;
        margin: 20px 0;
    }
    
    .countdown-item {
        min-width: 60px;
        padding: 12px 8px;
    }
    
    .countdown-number {
        font-size: 1.8rem;
    }
    
    .countdown-label-small {
        font-size: 0.7rem;
    }
    
    .countdown-separator {
        font-size: 1.5rem;
        margin: 0 2px;
    }
    
    .countdown-timezone {
        font-size: 0.8rem;
        margin-top: 10px;
    }
    
    .talkshow-registration {
        padding: 25px 15px;
        margin-top: 30px;
    }
    
    .registration-title {
        font-size: 1.3rem;
        margin-bottom: 20px;
    }
    
    .registration-form {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 10px 14px;
        font-size: 0.95rem;
    }
    
    .form-group select {
        padding-right: 35px;
        background-position: right 14px center;
    }
    
    .registration-submit-btn {
        padding: 12px 24px;
        font-size: 1rem;
    }
    
    .activities-section,
    .sponsors-section,
    .reviews-section {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Fix overflow ngang cho timeline grid */
    .timeline-mobile .timeline-grid {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Fix overflow ngang cho timeline cards */
    .timeline-mobile .timeline-grid button.timeline-card {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .history-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding: 0 20px !important;
    }
    
    /* Fix overflow ngang cho achievement-stats - đảm bảo các button ngoài cùng không tràn màn hình */
    .achievement-stats,
    .achievement-stats.animate {
        padding: 0 20px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .history-stage {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    .history-stage__intro {
        width: 100%;
        align-items: center;
        justify-content: center;
        margin: 0;
    }
    
    /* Hide desktop timeline, show mobile timeline */
    .history-timeline-nav.timeline-desktop,
    .history-timeline-wrapper.timeline-desktop {
        display: none !important;
    }

    .history-timeline-wrapper.timeline-mobile {
        display: block !important;
    }

    .history-intro {
        text-align: center;
        max-width: 620px;
        margin: 0 auto;
    }

    .history-lead {
        margin-left: auto;
        margin-right: auto;
    }

    .history-actions {
        justify-content: center;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        padding: 10px 0 !important;
        margin-top: 2rem !important;
    }
    
    /* Fix box-shadow cho history-metrics và history-actions trên mobile L trở xuống */
    .history-metrics.animate .history-metric,
    .history-metrics .history-metric {
        box-shadow: 0 8px 20px rgba(9, 64, 103, 0.08) !important;
        overflow: visible !important;
    }
    
    .history-actions .history-cta {
        box-shadow: 0 8px 20px rgba(239, 69, 101, 0.25) !important;
        overflow: visible !important;
        margin-bottom: 0 !important;
    }
    
    .history-actions .history-cta:hover {
        box-shadow: 0 10px 25px rgba(239, 69, 101, 0.3) !important;
    }
    
    .history-actions .history-cta--ghost {
        box-shadow: none !important;
    }
    
    .history-actions .history-cta--ghost:hover {
        box-shadow: 0 4px 12px rgba(239, 69, 101, 0.15) !important;
    }

    /* Timeline Grid Mobile - Layout 2 hàng so le trái phải với đường thẳng ở giữa */
    .timeline-mobile .timeline-grid {
        margin-left: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: clamp(1rem, 2.5vw, 1.5rem) !important;
        row-gap: clamp(1rem, 2.5vw, 1.5rem) !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 0 clamp(15px, 4vw, 20px) !important;
        position: relative;
        align-items: start;
        /* Animation initial state cho mobile */
        will-change: transform, opacity;
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }

    /* Class được thêm khi scroll đến - Mobile */
    .timeline-mobile .timeline-grid.animate {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    /* Đường thẳng ở giữa - pseudo element */
    .timeline-mobile .timeline-grid::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 4px;
        transform: translateX(-50%);
        background: linear-gradient(
            180deg,
            rgba(239, 69, 101, 0.3) 0%,
            rgba(239, 69, 101, 0.6) 20%,
            rgba(239, 69, 101, 0.8) 50%,
            rgba(255, 140, 66, 0.8) 50%,
            rgba(255, 140, 66, 0.6) 80%,
            rgba(255, 140, 66, 0.3) 100%
        );
        border-radius: 2px;
        z-index: 1;
        pointer-events: none;
    }

    /* Timeline Card Mobile - Styling cho 2 hàng so le */
    .timeline-mobile .timeline-grid button.timeline-card {
        position: relative !important;
        width: 100% !important;
        min-width: auto !important;
        max-width: 100% !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        /* Cards luôn hiển thị, animation chỉ áp dụng cho grid container */
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        visibility: visible !important;
        margin: 0 !important;
        padding: clamp(0.8rem, 2vw, 1rem) clamp(1rem, 3vw, 1.5rem) !important;
        display: block !important;
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08) !important;
        transition: opacity 0.3s ease, transform 0.3s ease !important;
        z-index: 2;
        font-size: 0.75rem !important;
    }

    /* Override rule ẩn card không có data-position trên tablet/mobile */
    .timeline-mobile .timeline-grid button.timeline-card:not([data-position]) {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
    }

    /* Card lẻ (1, 3, 5, ...) - bên trái (cột 1) */
    .timeline-mobile .timeline-grid button.timeline-card:nth-child(odd):not(.timeline-grid-toggle-more) {
        grid-column: 1;
        justify-self: end;
        margin-right: 0 !important;
    }

    /* Card chẵn (2, 4, 6, ...) - bên phải (cột 2) */
    .timeline-mobile .timeline-grid button.timeline-card:nth-child(even):not(.timeline-grid-toggle-more) {
        grid-column: 2;
        justify-self: start;
        margin-left: 0 !important;
    }

    /* Lệch trên dưới cho các card để tạo hiệu ứng so le đẹp mắt */
    /* Pattern: Trái lên cao - Phải thấp xuống (zigzag) */
    /* Card lẻ (1, 3, 5, 7...) - bên trái: lên cao (margin-top nhỏ) */
    .timeline-mobile .timeline-grid button.timeline-card:nth-child(1):not(.timeline-grid-toggle-more) {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .timeline-mobile .timeline-grid button.timeline-card:nth-child(3):not(.timeline-grid-toggle-more) {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .timeline-mobile .timeline-grid button.timeline-card:nth-child(5):not(.timeline-grid-toggle-more) {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .timeline-mobile .timeline-grid button.timeline-card:nth-child(7):not(.timeline-grid-toggle-more) {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .timeline-mobile .timeline-grid button.timeline-card:nth-child(9):not(.timeline-grid-toggle-more) {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Card chẵn (2, 4, 6, 8...) - bên phải: thấp xuống (margin-top lớn) */
    .timeline-mobile .timeline-grid button.timeline-card:nth-child(2):not(.timeline-grid-toggle-more) {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .timeline-mobile .timeline-grid button.timeline-card:nth-child(4):not(.timeline-grid-toggle-more) {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .timeline-mobile .timeline-grid button.timeline-card:nth-child(6):not(.timeline-grid-toggle-more) {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .timeline-mobile .timeline-grid button.timeline-card:nth-child(8):not(.timeline-grid-toggle-more) {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .timeline-mobile .timeline-grid button.timeline-card:nth-child(10):not(.timeline-grid-toggle-more) {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Đảm bảo 4 card đầu tiên luôn hiển thị trên mobile */
    .timeline-mobile .timeline-grid button.timeline-card:nth-child(1):not(.timeline-grid-toggle-more),
    .timeline-mobile .timeline-grid button.timeline-card:nth-child(2):not(.timeline-grid-toggle-more),
    .timeline-mobile .timeline-grid button.timeline-card:nth-child(3):not(.timeline-grid-toggle-more),
    .timeline-mobile .timeline-grid button.timeline-card:nth-child(4):not(.timeline-grid-toggle-more) {
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
        visibility: visible !important;
        display: block !important;
        /* Giữ margin-top từ rule lệch trên dưới ở trên */
        /* Giữ margin-left/right từ rule odd/even ở trên */
        padding: clamp(0.8rem, 2vw, 1rem) clamp(1rem, 3vw, 1.5rem) !important;
    }

    /* Ẩn các card sau 4 card đầu tiên */
    .timeline-mobile .timeline-grid button.timeline-card:nth-child(n+5):not(.timeline-grid-toggle-more) {
        max-height: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        /* Giữ margin-left/right từ rule odd/even */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: clamp(1.5rem, 4vw, 2rem) !important;
        padding-right: clamp(1.5rem, 4vw, 2rem) !important;
        transition: max-height 0.5s ease, opacity 0.5s ease, margin 0.5s ease, padding 0.5s ease, visibility 0.5s ease !important;
    }

    /* Hiển thị các card khi expanded */
    .timeline-mobile .timeline-grid.show-more button.timeline-card:nth-child(n+5):not(.timeline-grid-toggle-more) {
        max-height: 5000px !important;
        opacity: 1 !important;
        overflow: visible !important;
        visibility: visible !important;
        display: block !important;
        margin-bottom: 0 !important;
        /* Giữ margin-top từ rule lệch trên dưới */
        padding-top: clamp(1rem, 2vw, 1.2rem) !important;
        padding-bottom: clamp(1rem, 2vw, 1.2rem) !important;
        padding-left: clamp(1.5rem, 4vw, 2rem) !important;
        padding-right: clamp(1.5rem, 4vw, 2rem) !important;
        transition: max-height 0.5s ease, opacity 0.5s ease, margin 0.5s ease, padding 0.5s ease, visibility 0.5s ease !important;
    }

    /* Button toggle */
    .timeline-mobile .timeline-grid .timeline-grid-toggle-more {
        grid-column: 1 / -1 !important;
        justify-self: center !important;
        margin: 0 !important;
    }

    /* Button xem thêm cho timeline-grid mobile */
    .timeline-mobile .timeline-grid-toggle-more {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        max-width: clamp(250px, 70vw, 300px);
        margin: clamp(1.5rem, 4vw, 2rem) auto 0;
        padding: clamp(0.8rem, 2vw, 1rem) clamp(1.5rem, 4vw, 2rem);
        border: 2px solid rgba(239, 69, 101, 0.3);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.95);
        color: #ef4565;
        font-weight: 600;
        font-size: clamp(0.9rem, 2vw, 1rem);
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(239, 69, 101, 0.1);
        z-index: 10;
        position: relative;
    }

    .timeline-mobile .timeline-grid-toggle-more:hover {
        background: #ef4565;
        color: #ffffff;
        border-color: #ef4565;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(239, 69, 101, 0.2);
    }

    .timeline-mobile .timeline-grid-toggle-more:active {
        transform: translateY(0);
    }

    .timeline-mobile .timeline-grid-toggle-more:focus {
        outline: none;
        box-shadow: 0 4px 15px rgba(239, 69, 101, 0.2), 0 0 0 3px rgba(239, 69, 101, 0.1);
    }
    
    .timeline-card__excerpt {
        font-size: 1.05rem !important;
    }

    .timeline-mobile .toggle-grid-arrow {
        position: relative;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .timeline-mobile .toggle-grid-arrow svg {
        position: absolute;
        width: 20px;
        height: 20px;
        transition: all 0.3s ease;
    }

    .timeline-mobile .toggle-grid-arrow .arrow-down {
        opacity: 1;
        transform: rotate(0deg);
        display: block;
    }

    .timeline-mobile .toggle-grid-arrow .arrow-up {
        opacity: 0;
        transform: rotate(180deg);
        display: block;
    }

    .timeline-mobile .timeline-grid-toggle-more.expanded .toggle-grid-arrow .arrow-down {
        opacity: 0;
        transform: rotate(180deg);
    }

    .timeline-mobile .timeline-grid-toggle-more.expanded .toggle-grid-arrow .arrow-up {
        opacity: 1;
        transform: rotate(0deg);
    }

    /* Hiển thị timeline wrapper và container trên tablet/mobile */
    .timeline-mobile .history-timeline-wrapper {
        display: block !important;
        width: 100% !important;
        margin-top: 2rem;
    }
    
    .timeline-mobile .timeline-cards-wrapper {
        display: block !important;
    }
    
    .timeline-mobile .timeline-cards-container {
        display: block !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }

    /* Redesign history-timeline-right: Split into left, center (timeline), right */
    .history-timeline-right {
        width: 100%;
        min-height: auto;
        max-width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        padding: 0 20px;
        margin-bottom: 0;
    }
    
    .history-timeline-right .timeline-content {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: space-between;
        width: 100%;
        gap: 1rem;
        overflow: visible !important;
        /* Không tạo scrollbar - đảm bảo không chặn scroll */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    .history-timeline-right .timeline-content::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    /* Timeline Cards Left Side */
    .timeline-cards-left {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        overflow: visible;
        /* Không tạo scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .timeline-cards-left::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
    
    .timeline-cards-container-left {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
        overflow: visible;
        /* Không tạo scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .timeline-cards-container-left::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
    
    /* Timeline Vertical Milestone Line (Center) - Show on tablet/mobile */
    .timeline-vertical-milestone {
        flex-shrink: 0;
        width: 4px;
        display: flex !important;
        justify-content: center;
        align-items: flex-start;
        position: relative;
        align-self: stretch;
        /* Đảm bảo không chặn scroll */
        pointer-events: none;
    }
    
    .timeline-milestone-line {
        width: 4px;
        height: 100%;
        min-height: 400px;
        background: linear-gradient(
            180deg,
            rgba(239, 69, 101, 0.3) 0%,
            rgba(239, 69, 101, 0.6) 20%,
            rgba(239, 69, 101, 0.8) 50%,
            rgba(255, 140, 66, 0.8) 50%,
            rgba(255, 140, 66, 0.6) 80%,
            rgba(255, 140, 66, 0.3) 100%
        );
        border-radius: 2px;
        position: relative;
        /* Đảm bảo không chặn scroll - cho phép scroll events đi qua */
        pointer-events: none;
    }
    
    /* Khi mở "Xem thêm", timeline line sẽ dài đến hết các card */
    /* Timeline line tự động mở rộng nhờ align-items: stretch trên timeline-content */
    .timeline-milestone-line {
        transition: min-height 0.5s ease;
    }
    
    /* Timeline Cards Right Side - Show on tablet/mobile */
    .timeline-cards-right {
        flex: 1;
        display: flex !important;
        flex-direction: column;
        gap: 1.5rem;
        overflow: visible;
        /* Không tạo scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .timeline-cards-right::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
    
    .timeline-cards-container-right {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
        overflow: visible;
        /* Không tạo scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .timeline-cards-container-right::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
    
    /* Hide desktop cards wrapper on tablet/mobile */
    .timeline-cards-wrapper {
        display: none !important;
    }
    
    .timeline-cards-container {
        display: none !important;
    }
    
    /* Cards styling for left and right sides */
    .timeline-cards-left .timeline-milestone-card,
    .timeline-cards-right .timeline-milestone-card {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        opacity: 1 !important;
        padding: clamp(1rem, 2vw, 1.2rem) clamp(1.5rem, 4vw, 2rem);
        margin-bottom: 0;
        display: block;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }
    
    /* Show all cards in vertical order on tablet/mobile */
    .timeline-cards-left .timeline-milestone-card:not(.visible),
    .timeline-cards-right .timeline-milestone-card:not(.visible) {
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important;
        display: block;
    }
    
    /* Hide cards beyond first 2 on each side initially (total 4 cards) */
    #timeline-cards-left .timeline-milestone-card:nth-child(n+3),
    #timeline-cards-right .timeline-milestone-card:nth-child(n+3) {
        max-height: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: clamp(1.5rem, 4vw, 2rem) !important;
        padding-right: clamp(1.5rem, 4vw, 2rem) !important;
        transition: max-height 0.5s ease, opacity 0.5s ease, margin 0.5s ease, padding 0.5s ease, visibility 0.5s ease !important;
    }
    
    /* Show hidden cards when expanded - Similar to team-container.show */
    #timeline-cards-left.show .timeline-milestone-card:nth-child(n+3),
    #timeline-cards-right.show .timeline-milestone-card:nth-child(n+3) {
        max-height: 5000px !important;
        opacity: 1 !important;
        overflow: visible !important;
        visibility: visible !important;
        display: block !important;
        margin-bottom: 1.5rem !important;
        padding-top: clamp(1rem, 2vw, 1.2rem) !important;
        padding-bottom: clamp(1rem, 2vw, 1.2rem) !important;
        padding-left: clamp(1.5rem, 4vw, 2rem) !important;
        padding-right: clamp(1.5rem, 4vw, 2rem) !important;
        transition: max-height 0.5s ease, opacity 0.5s ease, margin 0.5s ease, padding 0.5s ease, visibility 0.5s ease !important;
    }
    
    .history-stage {
        min-height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
    }
    
    /* Timeline Toggle More Button - Show on tablet/mobile, positioned below history-timeline-right */
    .timeline-toggle-more {
        display: none;
    }
    
    /* Button appears below history-timeline-right on tablet/mobile */
    .history-stage .timeline-toggle-more {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        max-width: 300px;
        margin: 2rem auto 0;
        padding: 1rem 2rem;
        border: 2px solid rgba(239, 69, 101, 0.3);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.95);
        color: #ef4565;
        font-weight: 600;
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(239, 69, 101, 0.1);
        z-index: 10;
        position: relative;
        grid-column: 1 / -1; /* Span full width of grid */
    }
    
    .history-stage .timeline-toggle-more:hover {
        background: #ef4565;
        color: #ffffff;
        border-color: #ef4565;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(239, 69, 101, 0.2);
    }
    
    .history-stage .timeline-toggle-more:active {
        transform: translateY(0);
    }
    
    .history-stage .timeline-toggle-more:focus {
        outline: none;
        box-shadow: 0 4px 15px rgba(239, 69, 101, 0.2), 0 0 0 3px rgba(239, 69, 101, 0.1);
    }
    
    .toggle-more-arrow {
        position: relative;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .toggle-more-arrow svg {
        position: absolute;
        width: 20px;
        height: 20px;
        transition: all 0.3s ease;
    }
    
    .toggle-more-arrow .arrow-down {
        opacity: 1;
        transform: rotate(0deg);
        display: block;
    }
    
    .toggle-more-arrow .arrow-up {
        opacity: 0;
        transform: rotate(180deg);
        display: block;
    }
    
    .timeline-toggle-more.expanded .toggle-more-arrow .arrow-down {
        opacity: 0;
        transform: rotate(180deg);
    }
    
    .timeline-toggle-more.expanded .toggle-more-arrow .arrow-up {
        opacity: 1;
        transform: rotate(0deg);
    }
    
    /* Gallery Section - Tablet */
    .gallery-section.animate {
        padding-top: 40px;
        padding-bottom: 60px;
    }
    
    /* History Section - Tablet */
    .history-section.animate {
        padding: clamp(60px, 8vw, 80px) 0;
    }
    
    /* Reviews Section - Tablet */
    .reviews-section.animate {
        padding-top: 40px;
        padding-bottom: 60px;
    }
    
    /* Adjust circular positions for tablet */
    .timeline-milestone-card.visible[data-position="0"] {
        top: 4%;
        left: 4%;
    }
    
    .timeline-milestone-card.visible[data-position="1"] {
        right: 4%;
        transform: translateY(-50%) scale(1.03);
    }
    
    .timeline-milestone-card.visible[data-position="2"] {
        bottom: 4%;
        left: 4%;
    }
}

/* When not enough space for 3 columns horizontal, switch to 3 rows vertical (1 column) */
@media (max-width: 880px) {
    .history-metrics,
    .history-metrics.animate {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, auto);
        gap: 1rem;
    }
}

/* Mobile M: 481px - 680px */
@media (min-width: 481px) and (max-width: 680px) {
    .history-metrics,
    .history-metrics.animate {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, auto);
        gap: 0.9rem;
    }

    .history-cta {
        width: 100%;
        justify-content: center;
    }

    .history-cta--ghost {
        background: rgba(255, 255, 255, 0.95);
    }

    /* Mobile M: Optimize timeline layout */
    .history-timeline-right {
        padding: 0 12px;
    }
    
    .history-timeline-right .timeline-content {
        flex-direction: row;
        align-items: stretch;
        gap: 0.7rem;
        overflow: visible !important;
        /* Không tạo scrollbar - đảm bảo không chặn scroll */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    .history-timeline-right .timeline-content::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    /* Timeline line on mobile M */
    .timeline-vertical-milestone {
        width: 3px;
        flex-shrink: 0;
        /* Đảm bảo không chặn scroll */
        pointer-events: none;
    }
    
    .timeline-milestone-line {
        width: 3px;
        min-height: 320px;
        /* Đảm bảo không chặn scroll - cho phép scroll events đi qua */
        pointer-events: none;
    }
    
    /* Cards on mobile M */
    .timeline-cards-left,
    .timeline-cards-right {
        flex: 1;
        gap: 0.9rem;
        min-width: 0;
    }
    
    .timeline-cards-container-left,
    .timeline-cards-container-right {
        gap: 0.9rem;
    }
    
    .timeline-cards-left .timeline-milestone-card,
    .timeline-cards-right .timeline-milestone-card {
        padding: clamp(0.75rem, 2.2vw, 0.95rem) clamp(0.95rem, 2.8vw, 1.4rem);
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.07);
    }
    
    /* Card content on mobile M */
    .timeline-cards-left .card-header,
    .timeline-cards-right .card-header {
        margin-bottom: 0.45rem;
    }
    
    .timeline-cards-left .card-date-full,
    .timeline-cards-right .card-date-full {
        font-size: clamp(0.68rem, 1.9vw, 0.78rem);
        font-weight: 600;
    }
    
    .timeline-cards-left .card-title,
    .timeline-cards-right .card-title {
        font-size: clamp(0.88rem, 2.3vw, 0.98rem);
        margin-bottom: 0.45rem;
        line-height: 1.3;
    }
    
    .timeline-cards-left .card-description,
    .timeline-cards-right .card-description {
        font-size: clamp(0.73rem, 1.9vw, 0.83rem);
        line-height: 1.45;
    }
    
    /* Toggle button on mobile M */
    .history-stage .timeline-toggle-more {
        max-width: 230px;
        padding: 0.7rem 1.2rem;
        font-size: 0.83rem;
        margin: 1.1rem auto 0;
    }
    
    .toggle-more-arrow {
        width: 17px;
        height: 17px;
    }
    
    .toggle-more-arrow svg {
        width: 17px;
        height: 17px;
    }
    
    /* Gallery Section - Mobile M */
    .gallery-section.animate {
        padding-top: 32px;
        padding-bottom: 48px;
    }
    
    /* History Section - Mobile M */
    .history-section.animate {
        padding: clamp(48px, 5.5vw, 62px) 0;
    }
    
    /* Reviews Section - Mobile M */
    .reviews-section.animate {
        padding-top: 32px;
        padding-bottom: 48px;
    }
}

/* Mobile S: max-width 480px */
@media (max-width: 480px) {
    .history-metrics,
    .history-metrics.animate {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, auto);
        gap: 0.75rem;
    }

    .history-cta {
        width: 100%;
        justify-content: center;
    }

    .history-cta--ghost {
        background: rgba(255, 255, 255, 0.95);
    }

    .history-section {
        padding: 70px 0;
    }
    
    /* Mobile S: Further optimize spacing and sizes */
    .history-timeline-right {
        padding: 0 8px;
    }
    
    .history-timeline-right .timeline-content {
        flex-direction: row;
        align-items: stretch;
        gap: 0.5rem;
        overflow: visible !important;
        /* Không tạo scrollbar - đảm bảo không chặn scroll */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    .history-timeline-right .timeline-content::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    /* Timeline line thinner on mobile S */
    .timeline-vertical-milestone {
        width: 2px;
        flex-shrink: 0;
        /* Đảm bảo không chặn scroll */
        pointer-events: none;
    }
    
    .timeline-milestone-line {
        width: 2px;
        min-height: 280px;
        /* Đảm bảo không chặn scroll - cho phép scroll events đi qua */
        pointer-events: none;
    }
    
    /* Cards smaller on mobile S */
    .timeline-cards-left,
    .timeline-cards-right {
        flex: 1;
        gap: 0.65rem;
        min-width: 0;
    }
    
    .timeline-cards-container-left,
    .timeline-cards-container-right {
        gap: 0.65rem;
    }
    
    .timeline-cards-left .timeline-milestone-card,
    .timeline-cards-right .timeline-milestone-card {
        padding: clamp(0.6rem, 1.7vw, 0.75rem) clamp(0.75rem, 2vw, 1rem);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }
    
    /* Card content smaller on mobile S */
    .timeline-cards-left .card-header,
    .timeline-cards-right .card-header {
        margin-bottom: 0.35rem;
    }
    
    .timeline-cards-left .card-date-full,
    .timeline-cards-right .card-date-full {
        font-size: clamp(0.6rem, 1.5vw, 0.7rem);
        font-weight: 600;
    }
    
    .timeline-cards-left .card-title,
    .timeline-cards-right .card-title {
        font-size: clamp(0.8rem, 1.9vw, 0.88rem);
        margin-bottom: 0.35rem;
        line-height: 1.25;
    }
    
    .timeline-cards-left .card-description,
    .timeline-cards-right .card-description {
        font-size: clamp(0.65rem, 1.5vw, 0.75rem);
        line-height: 1.35;
    }
    
    /* Toggle button smaller on mobile S */
    .history-stage .timeline-toggle-more {
        max-width: 190px;
        padding: 0.6rem 1rem;
        font-size: 0.78rem;
        margin: 1rem auto 0;
    }
    
    .toggle-more-arrow {
        width: 15px;
        height: 15px;
    }
    
    .toggle-more-arrow svg {
        width: 15px;
        height: 15px;
    }
    
    /* Gallery Section - Mobile S */
    .gallery-section.animate {
        padding-top: 30px;
        padding-bottom: 45px;
    }
    
    /* History Section - Mobile S */
    .history-section.animate {
        padding: clamp(45px, 5vw, 58px) 0;
    }
    
    /* Reviews Section - Mobile S */
    .reviews-section.animate {
        padding-top: 30px;
        padding-bottom: 45px;
    }

    .timeline-card {
        width: clamp(220px, 85vw, 280px);
        min-width: 220px;
    }
}