/* ========================================
   BRICOLAGE GROTESQUE FONT FAMILY
   ======================================== */

@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('../fonts/bricolage-grotesque/BricolageGrotesque-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('../fonts/bricolage-grotesque/BricolageGrotesque-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('../fonts/bricolage-grotesque/BricolageGrotesque-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('../fonts/bricolage-grotesque/BricolageGrotesque-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('../fonts/bricolage-grotesque/BricolageGrotesque-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('../fonts/bricolage-grotesque/BricolageGrotesque-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('../fonts/bricolage-grotesque/BricolageGrotesque-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}



/* ========================================
   GLOBAL TYPOGRAPHY
   ======================================== */

html {
    scroll-behavior: smooth;
}

:root :where(.is-layout-flow)>* {
    margin-block-start: 0;
    margin-block-end: 0;
}

/* Apply Bricolage Grotesque to headings */
h1,
h2,
h3,
h4,
h5,
h6,
button {
    font-family: 'Bricolage Grotesque', sans-serif;
}

/* Apply Bricolage Grotesque to body text */
body,
p,
span {
    font-family: 'Bricolage Grotesque', sans-serif;
}

/* Additional typography refinements */
body {
    font-weight: 400;
    line-height: 1.6;
    padding-top: 76px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
}

.section-heading {
    color: #26C0BD;
    font-weight: 700;
}

/* Header Navigation Links */
#site-header .nav-link,
#site-header nav a.nav-link,
.nav-link {
    color: white;
    text-decoration: none !important;
}

#site-header .nav-link:hover,
#site-header nav a.nav-link:hover,
.nav-link:hover {
    color: #26C0BD !important;
    text-decoration: none !important;
}

#site-header .nav-link.active,
#site-header nav a.nav-link.active,
.nav-link.active {
    color: #26C0BD !important;
    text-decoration: none !important;
}

/* Force remove underline for all header links */
#site-header nav a {
    text-decoration: none !important;
}

.lagtuz-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.7rem;
    background: #26C0BD;
    color: #ffffff;
    font-size: 1rem;
    text-decoration: none;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    line-height: 1.6;
}

.lagtuz-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    background: #40BA85;
}

.lagtuz-btn-primary:active {
    transform: translateY(0);
}

/* Staggered Fade Up Animation (Applied to Wrapper) */
@keyframes fadeUpCard {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Initial hidden state - must match keyframe 'from' state */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
}

/* Trigger animation - don't set transform/opacity directly to avoid conflicts */
.fade-up.fade-up-visible {
    animation: fadeUpCard 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    /* animation-delay is handled inline in render.php */
}

/* --- Who We Are Section --- */
.stat-number-gradient {
    position: relative;
    display: inline-block;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1;

    /* 1. Base Gradient for the Outline */
    background: linear-gradient(135deg, #F2B609, #26C0BD);
    -webkit-background-clip: text;
    background-clip: text;

    /* 2. Hollow center */
    -webkit-text-fill-color: white;
    -webkit-text-stroke: 3.5px transparent;

    transition: all 0.3s ease-in-out;
    letter-spacing: 0.2rem;
}

/* Pseudo-element for the Smooth Filled Transition */
.stat-number-gradient::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;

    /* Gradient Fill */
    background: linear-gradient(135deg, #F2B609, #26C0BD);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Start invisible */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;

    /* Ensure no stroke on the fill layer */
}

/* Transition to Filled State on Column Hover */
.group:hover .stat-number-gradient::after {
    opacity: 1;
}

/* Optional: Smoothly hide the outline hollow effect if needed, 
   though stacking usually looks fine */
/* Firefox fallback */
@-moz-document url-prefix() {
    .stat-number-gradient {
        background: transparent;
        color: #f0b308;
        text-shadow:
            -2px -2px 0 #f0b308,
            2px -2px 0 #f0b308,
            -2px 2px 0 #f0b308,
            2px 2px 0 #f0b308;
    }

    .group:hover .stat-number-gradient::after {
        opacity: 1;
    }
}

/* --- Projects Carousel --- */
.projects-carousel-section {
    overflow: hidden;
}

.projects-carousel-wrapper {
    position: relative;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
}

.projects-swiper {
    width: 100%;
    aspect-ratio: 3;
    padding: 0;
}

.swiper-slide {
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.swiper-slide-active {
    opacity: 1;
}

.project-slide {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    border-radius: 14px;
    overflow: hidden;
    /* GPU Acceleration */
    will-change: transform;
    transform: translateZ(0);
}

/* Lazy-loaded image styling */
.project-slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease-out;
    /* GPU Acceleration */
    will-change: transform;
    transform: translateZ(0);
}

.swiper-slide:hover .project-slide-image {
    transform: translate3d(0, 0, 0) scale(1.1);
}

/* Carousel Navigation */
.carousel-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

/* Projects CTA Wrapper - Below Pagination */
.projects-cta-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

/* Projects CTA - Text Link Style */
.projects-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #26C0BD;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.projects-cta-link:hover {
    color: #1aa3a0;
}

.projects-cta-link svg {
    transition: transform 0.3s ease;
}

.projects-cta-link:hover svg {
    transform: translateX(4px);
}

.carousel-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: white;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.carousel-btn:hover {
    background: #f59e0b;
    border-color: #f59e0b;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.carousel-btn svg {
    color: #374151;
    transition: color 0.3s ease;
}

.carousel-btn:hover svg {
    color: white;
}

.carousel-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.carousel-btn:disabled:hover {
    background: white;
    border-color: #e5e7eb;
    transform: scale(1);
}

/* --- Testimonials Section --- */
.testimonial-content {
    padding-right: 2rem;
}

.testimonial-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}

.testimonial-heading {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    margin-bottom: 2rem;
}

.quote-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 1.5rem;
}

.quote-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.testimonial-text {
    margin-bottom: 2rem;
}

.testimonial-text p {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #4b5563;
    margin: 0;
}

.client-info {
    margin-bottom: 2rem;
}

.client-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.25rem 0;
}

.client-position {
    font-size: 1rem;
    color: #6b7280;
    margin: 0;
}

.testimonial-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.client-avatars {
    display: flex;
    gap: 0.75rem;
}

.client-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.8;
}

.client-avatar:hover {
    opacity: 1;
    transform: scale(1.05);
}

.client-avatar.active {
    border-color: #26C0BD;
    opacity: 1;
}

.testimonial-nav {
    display: flex;
    gap: 0.75rem;
}

.slide-nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f3f4f6;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #ededed;
}

.slide-nav-btn:hover {
    background: #26C0BD;
    transform: scale(1.05);
}

.slide-nav-btn svg {
    color: #91969f;
    transition: color 0.3s ease;
}

.slide-nav-btn:hover svg {
    color: white;
}

/* Testimonial Image */
.testimonial-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    position: relative;
    z-index: 2;
}

.testimonial-image-decoration {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid #26C0BD;
    z-index: 1;
}

/* Floating Social Icons */
.social-icons-float {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3;
}

.social-icon {
    position: absolute;
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    animation: float 3s ease-in-out infinite;
}

.social-icon:nth-child(1) {
    animation-delay: 0s;
}

.social-icon:nth-child(2) {
    animation-delay: 0.5s;
}

.social-icon:nth-child(3) {
    animation-delay: 1s;
}

.social-icon:nth-child(4) {
    animation-delay: 1.5s;
}

.social-icon svg {
    width: 24px;
    height: 24px;
}

@keyframes float {

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

    50% {
        transform: translateY(-10px);
    }
}

/* Marquee Animation - Right to Left */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-25%);
    }
}

.animate-marquee {
    animation: marquee-scroll 20s linear infinite;
    will-change: transform;
}

/* Pause animation on hover */
.animate-marquee:hover {
    animation-play-state: paused;
}

/* Responsive */
@media (max-width: 1024px) {
    .testimonial-heading {
        font-size: 2rem;
    }

    .testimonial-text p {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .testimonial-content {
        padding-right: 0;
        margin-bottom: 3rem;
    }

    .testimonial-heading {
        font-size: 1.75rem;
    }

    .testimonial-text p {
        font-size: 0.9375rem;
    }

    .testimonial-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .client-avatar {
        width: 48px;
        height: 48px;
    }

    .testimonial-image-container {
        max-width: 350px;
    }

    .social-icon {
        width: 40px;
        height: 40px;
    }

    .social-icon svg {
        width: 20px;
        height: 20px;
    }
}

/* --- Contact Form Section --- */
.contact-container {
    max-width: 1600px;
    margin: 0 auto;
}

.contact-container-inner {
    display: flex;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.contact-image-side {
    flex: 0 0 45%;
    position: relative;
    overflow: hidden;
}

.contact-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.contact-form-side {
    flex: 1;
    padding: 3.5rem 4rem;
}

.contact-form-heading {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    margin-bottom: 1rem;
}

/* Form Styles */
.lagtuz-contact-form {
    width: 100%;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group {
    margin-bottom: 1rem;
}

input,
area {
    box-sizing: border-box;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #1f2937;
    background: #f9fafb;
    transition: all 0.3s ease;
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #f59e0b;
    background: white;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9ca3af;
}

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

.form-success-message p {
    color: #065f46;
    margin: 0;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 1024px) {
    .contact-form-side {
        padding: 3rem;
    }

    .contact-form-heading {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .contact-container-inner {
        flex-direction: column;
    }

    .contact-image-side {
        flex: 0 0 auto;
        height: 300px;
    }

    .contact-form-side {
        padding: 2.5rem 2rem;
    }

    .contact-form-heading {
        font-size: 1.75rem;
    }

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

@media (max-width: 480px) {
    .contact-form-side {
        padding: 2rem 1.5rem;
    }

    .contact-form-heading {
        font-size: 1.5rem;
    }

    .contact-image-side {
        height: 250px;
    }
}


/* ========================================
   HEADER STYLES
   ======================================== */

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    transition: all 0.3s ease;
    padding: 1.25rem 0;
}

.main-header.scrolled {
    background: #f59e0b;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    padding: 1rem 0;
}

.header-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

/* Logo */
.header-logo {
    flex-shrink: 0;
}

.logo-image {
    height: 40px;
    width: auto;
    display: block;
    transition: all 0.3s ease;
}

.main-header.scrolled .logo-image {
    height: 36px;
}

/* Navigation */
.header-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.nav-menu li {
    margin: 0;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9375rem;
    transition: all 0.3s ease;
    position: relative;
    padding: 0.5rem 0;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: white;
    transition: width 0.3s ease;
}

.nav-menu a:hover::after {
    width: 100%;
}

.nav-menu a:hover {
    opacity: 0.8;
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.header-icon-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    transition: all 0.3s ease;
    border-radius: 6px;
}

.header-icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.header-icon-btn svg {
    stroke: white;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.mobile-menu-toggle span {
    width: 24px;
    height: 2px;
    background: white;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.mobile-menu-toggle:hover span {
    background: rgba(255, 255, 255, 0.8);
}

/* Responsive */
@media (max-width: 1024px) {
    .nav-menu {
        gap: 1.5rem;
    }

    .nav-menu a {
        font-size: 0.875rem;
    }
}

@media (max-width: 768px) {
    .header-container {
        padding: 0 1rem;
    }

    .header-nav {
        display: none;
    }

    .search-btn {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .logo-image {
        height: 32px;
    }

    .main-header.scrolled .logo-image {
        height: 30px;
    }
}


/* Newsletter Form Messages */
#newsletter-message {
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

#newsletter-message.show {
    opacity: 1;
    transform: translateY(0);
}

#newsletter-message.success {
    background: linear-gradient(135deg, #10b981, #059669);
    border: 2px solid #34d399;
    color: white;
}

#newsletter-message.error {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: 2px solid #f87171;
    color: white;
}

/* Newsletter Loading State */
.newsletter-form-footer button.loading {
    position: relative;
    pointer-events: none;
}

/* Spin animation for loading icon */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* ========================================
   SCROLL DOWN ARROW (Clean & Responsive)
   ======================================== */

.scroll-down-arrow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    cursor: pointer;

    /* Responsive Size & Position */
    width: 32px;
    height: 32px;
    bottom: 20px;
    /* Mobile Position */

    /* Entrance Animation Trigger (from JS) */
    opacity: 0;
    transform: translateX(-50%) translateY(100px);
    /* Start lower */
    transition: opacity 1s ease-out, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Tablet & Desktop */
@media (min-width: 640px) {
    .scroll-down-arrow {
        width: 48px;
        height: 48px;
        bottom: 40px;
        /* Tablet */
    }
}

@media (min-width: 1024px) {
    .scroll-down-arrow {
        width: 64px;
        height: 64px;
        bottom: 80px;
        /* Desktop */
    }
}

/* Entrance Visible State */
.scroll-down-arrow.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Bounce Animation (Applied after entrance) */
.scroll-down-arrow.visible {
    animation: simple-bounce 2s infinite 1.5s;
    /* Delay bounce after slide up */
}

@keyframes simple-bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-10px);
    }

    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* Styling & Hover */
.scroll-down-arrow svg {
    width: 100%;
    height: 100%;
    stroke: rgba(255, 255, 255, 0.7);
    transition: stroke 0.3s ease, transform 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.scroll-down-arrow:hover svg {
    stroke: #26C0BD;
    transform: translateY(5px);
}

/* ========================================
   PROJECTS CAROUSEL HOVER EFFECTS
   ======================================== */

/* Projects Carousel - Removed duplicate rules (now defined earlier in file) */

.project-overlay,
.project-info {
    position: relative;
    z-index: 1;
}

/* ========================================
   READING PROGRESS BAR (HORIZONTAL)
   ======================================== */

#reading-progress-bar {
    position: fixed;
    top: 68px;
    left: 0;
    width: 0%;
    height: 4px;
    background: #26C0BD;
    z-index: 49;
    transition: width 0.1s ease-out;
}

/* ========================================
   SCROLL TO TOP BUTTON
   ======================================== */

#scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: #26C0BD;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(100px) scale(0.8);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(38, 192, 189, 0.4);
    z-index: 9999;
}

#scroll-to-top.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

#scroll-to-top:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 20px rgba(38, 192, 189, 0.6);
}

#scroll-to-top svg {
    width: 24px;
    height: 24px;
    color: white;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .hide-on-mobile {
        display: none !important;
    }

    #scroll-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }

    #reading-progress-bar {
        height: 3px;
        top: 60px;
    }


}

/* ========================================
   HEADER STYLES
   ======================================== */

/* Header smooth background transition */
#site-header {
    background-color: black;
    /* Đổi từ transparent thành black */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}

#site-header.scrolled {
    background: black;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Logo color filter - invert when not scrolled */
#header-logo {
    filter: none;
}

/* #site-header.scrolled #header-logo {
    filter: invert(1) saturate(0) brightness(2.5) contrast(2);
    transition: filter 0.3s ease;
} */

/* Nav links - black when not scrolled, white when scrolled */
.nav-link {
    color: #ffffff;
    transition: color 0.3s ease;
}

#site-header.scrolled .nav-link {
    color: #ffffff;
}

.nav-dropdown-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #26C0BD;
    transition: width 0.3s ease;
}

.nav-dropdown-item:hover::after {
    width: 100%;
}

/* Icon buttons - black when not scrolled, white when scrolled */
.header-icon-btn {
    color: #ffffff;
    transition: color 0.3s ease;
}

#site-header.scrolled .header-icon-btn {
    color: #ffffff;
}

.header-icon-btn svg {
    stroke: currentColor;
}


/* Desktop Dropdown Navigation Styles */
.nav-dropdown {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    display: block;
    /* Ensure block display for transitions */
    padding-top: 10px;
    /* Add internal padding to help with hover */
}

/* Invisible Bridge to prevent closing */
.nav-dropdown::before {
    content: '';
    position: absolute;
    top: -20px;
    /* Bridge the gap */
    left: 0;
    width: 100%;
    height: 30px;
    /* Overlap with parent and dropdown */
    background: transparent;
}

.nav-dropdown.hidden {
    opacity: 0;
    transform: translateY(10px);
    /* Slite movement for effect */
    visibility: hidden;
    pointer-events: none;
}

.nav-dropdown-item {
    position: relative;
    height: 100%;
    /* Ensure full height for hover area */
    display: flex;
    align-items: center;
}

.nav-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    /* Full height */
}

.nav-dropdown-toggle svg {
    transition: transform 0.3s ease;
}

.nav-dropdown-item:hover .nav-dropdown-toggle svg {
    transform: rotate(180deg);
}

/* Mobile Navigation Accordion Styles */
.mobile-nav-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    padding: 16px 0;
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    /* Corrected to white */
    cursor: pointer;
    font-family: 'Bricolage Grotesque', serif;
    /* Corrected font */
}

.mobile-nav-toggle span {
    font-family: 'Bricolage Grotesque', serif;
}

.mobile-nav-toggle svg.chevron {
    transition: transform 0.3s ease;
    flex-shrink: 0;
    color: #ffffff;
}

.mobile-nav-sub {
    max-height: 0;
    overflow: hidden;
    padding-left: 16px;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, visibility 0.4s;
}

.mobile-nav-sub.mobile-expanded {
    max-height: 500px;
    /* Large enough buffer */
    opacity: 1;
    visibility: visible;
}

.mobile-nav-sub-link {
    display: block;
    padding: 10px 0;
    font-size: 16px;
    color: #d1d5db;
    /* Light gray for sub-items */
    text-decoration: none;
    transition: all 0.2s ease;
    font-family: 'Bricolage Grotesque', serif;
    /* Match main font */
}

.mobile-nav-sub-link:hover {
    color: #26C0BD;
    padding-left: 4px;
    /* Slight movement on hover */
}

.mobile-nav-item-with-dropdown {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* Lighter border */
}

/* Mobile toggle - black when not scrolled, white when scrolled */
#mobile-toggle span {
    background-color: #ffffff;
    transition: background-color 0.3s ease;
}

#site-header.scrolled #mobile-toggle span {
    background-color: #ffffff;
}

/* Language Switcher Dropdown */
#language-switcher {
    position: relative;
}

.language-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 50;
    overflow: hidden;
}

.language-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: #1f2937;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f3f4f6;
}

.lang-option:last-child {
    border-bottom: none;
}

.lang-option:hover {
    background-color: #f9fafb;
}

.lang-option.active {
    background-color: #fef3c7;
}

.lang-code {
    font-weight: 700;
    font-size: 14px;
    color: #1f2937;
    min-width: 24px;
}

.lang-name {
    flex: 1;
    font-size: 14px;
    color: #6b7280;
}

.lang-option svg {
    color: #f59e0b;
    flex-shrink: 0;
}

/* Chevron rotation on dropdown open */
#lang-toggle svg:last-child {
    transition: transform 0.3s ease;
}

.language-dropdown.active~#lang-toggle svg:last-child {
    transform: rotate(180deg);
}

/* Sliding Indicator Animation - Smooth cubic-bezier */
.sliding-indicator {
    transition: left 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55),
        width 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 0;
}

/* Pyramid Responsive */
@media (max-width: 768px) {
    .approach-tab {
        padding: 0.625rem 1.5rem;
        font-size: 0.875rem;
    }
}

.tab-content {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.tab-content.active {
    display: block;
    opacity: 1;
}

.campaign-card.fade-up-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Sliding Indicator - Bounce Easing */
.sliding-indicator {
    transition: left 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55),
        width 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}


/**
 * Tabs Block Styles
 */

.tabs-block {
    position: relative;
}

/* Tab Navigation */
.tabs-nav {
    position: relative;
}

.single-tab {
    white-space: nowrap;
}

/* Tab Content Transitions */
.tab-content {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.tab-content.active {
    opacity: 1;
    transform: translateY(0);
}

.tab-content.hidden {
    display: none;
}

/* Timeline Styles */
.timeline-container {
    position: relative;
    min-height: 400px;
}

.timeline-svg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.timeline-milestones {
    position: relative;
    z-index: 2;
}

/* Milestone Wrapper */
.timeline-milestone-wrapper {
    transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Milestone Animations */
@keyframes fadeInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

@keyframes fadeInFromRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

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

.timeline-milestone-wrapper.fade-in-left {
    animation: fadeInFromLeft 0.7s ease forwards;
}

.timeline-milestone-wrapper.fade-in-right {
    animation: fadeInFromRight 0.7s ease forwards;
}

/* Timeline Dot */
.timeline-dot {
    position: relative;
    width: 24px;
    height: 24px;
    background: white;
    border: 4px solid #26C0BD;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.timeline-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #26C0BD;
    border-radius: 50%;
}

/* Milestone Content Cards */
.timeline-milestone-wrapper .bg-white {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-milestone-wrapper .bg-white:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .timeline-svg {
        left: 24px;
        transform: none;
        width: 4px;
    }

    .timeline-milestone-wrapper {
        margin-left: 40px;
    }

    .tabs-nav {
        max-width: 100%;
        overflow-x: auto;
    }

    .tab-sliding-indicator {
        transition: left 0.5s ease-out, width 0.5s ease-out !important;
    }
}

@media (max-width: 640px) {
    .about-us-tab {
        font-size: 0.875rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Client Logo Hover Effects */
.timeline-milestone-wrapper img {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.timeline-milestone-wrapper img:hover {
    opacity: 1 !important;
    transform: scale(1.05);
}

/* Year Badge Pulse Animation */
.timeline-milestone-wrapper .bg-\[#26C0BD\] {
    animation: subtle-pulse 2s ease-in-out infinite;
}

@keyframes subtle-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(38, 192, 189, 0.4);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(38, 192, 189, 0);
    }
}

/* Content Card Border Glow */
.timeline-milestone-wrapper .border-\[#26C0BD\]\/20 {
    position: relative;
    overflow: hidden;
}

.timeline-milestone-wrapper .border-\[#26C0BD\]\/20::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #26C0BD, #40BA85, #26C0BD);
    border-radius: 0.75rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.timeline-milestone-wrapper .border-\[#26C0BD\]\/20:hover::before {
    opacity: 0.2;
}


/* Loading State */
.timeline-svg path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 0.7s ease-out;
}

/* Print Styles */
@media print {
    .about-us-tabs-nav {
        display: none;
    }

    .about-us-tab-content {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .timeline-milestone-wrapper {
        opacity: 1 !important;
        transform: none !important;
        page-break-inside: avoid;
    }
}

.connector-line {
    position: absolute;
    border-top: 1px dashed #26C0BD;
    top: 30px;
    left: 52%;
    right: 28%;
}


.connector-line::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 10px;
    height: 10px;
    background: #26C0BD;
    border-radius: 50%;
    transform: translate(50%, -50%);
}

/* ========================================
   MOBILE MENU
   ======================================== */

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Mobile Menu Content */
.mobile-menu-content {
    position: fixed;
    top: 0;
    right: 0;
    width: 85vw;
    max-width: 400px;
    height: 100vh;
    background: #000000;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    padding: 5rem 2rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
    z-index: 99999;
}

.mobile-menu-overlay.active .mobile-menu-content {
    transform: translateX(0);
}

/* Mobile Menu Close Button */
.mobile-menu-close {
    position: fixed;
    top: 20px;
    right: -60px;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer !important;
    color: #ffffff;
    transition: all 0.3s ease;
    border-radius: 50%;
    z-index: 9999999 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.mobile-menu-overlay.active .mobile-menu-close {
    right: 20px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mobile-menu-close svg {
    pointer-events: none;
}

.mobile-menu-close:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(90deg);
}

.mobile-menu-close svg {
    stroke: currentColor;
}

/* Mobile Navigation */
.mobile-nav {
    margin-top: 1rem;
}

.mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav-list li {
    margin: 0;
    padding: 0;
}

.mobile-nav-link {
    display: block;
    padding: 1.25rem 0;
    color: #ffffff;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
}

.mobile-nav-link:hover {
    color: #26C0BD;
    padding-left: 1.5rem;
}

.mobile-nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 2px;
    background: #26C0BD;
    transition: width 0.3s ease;
}

.mobile-nav-link:hover::before {
    width: 20px;
}

/* Mobile Language Switcher */
.mobile-lang-switcher {
    padding-top: 1.5rem;
}

.mobile-lang-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mobile-lang-label svg {
    stroke: #26C0BD;
}

.mobile-lang-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mobile-lang-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    text-decoration: none;
    color: #ffffff;
    transition: all 0.3s ease;
}

.mobile-lang-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

.mobile-lang-option.active {
    background: rgba(38, 192, 189, 0.2);
    border: 1px solid #26C0BD;
}

.mobile-lang-option .lang-code {
    font-weight: 700;
    font-size: 0.875rem;
    color: #ffffff;
    min-width: 24px;
}

.mobile-lang-option .lang-name {
    flex: 1;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.mobile-lang-option svg {
    color: #26C0BD;
    flex-shrink: 0;
}

/* Hamburger Icon Active State (Transform to X) */
#mobile-toggle {
    position: relative;
    z-index: 99999;
}

#mobile-toggle span {
    transition: all 0.3s ease;
}

#mobile-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

#mobile-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: translateX(20px);
}

#mobile-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Responsive */
@media (max-width: 480px) {
    .mobile-menu-content {
        max-width: 100%;
    }

    .mobile-nav-link {
        font-size: 1.25rem;
    }
}

/* Prevent body scroll when menu is open */
body.menu-open {
    overflow: hidden;
}

/* ========================================
   CORE VALUES ORBIT ANIMATION
   ======================================== */

.core-values-orbit-container {
    background-color: transparent;
    border-radius: 20px;
    padding: 60px 0;
    overflow: hidden;
    min-height: 400px;
    /* Ensure enough space */
}

.orbit-system {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Center Point (Optional) */
.orbit-center-point {
    position: absolute;
    width: 0;
    height: 0;
    background: transparent;
    z-index: 10;
}

/* Common Ring Styles */
.orbit-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid #26C0BD;
    /* Thinner border for elegance */
    background: transparent;
    /* Transformation origin is center by default, which is what we want for spinning rings */
}

/* Inner Ring - Non-concentric (Shifted Up) */
.orbit-ring-inner {
    width: 160px;
    height: 160px;
    top: 35px;
    /* Shifted up from center (which would be 50% - 80px approx) */
    left: 50%;
    transform: translateX(-50%);
    /* Centered horizontally only */
    animation: spin-right 10s linear infinite;
    /* Adjust border opacity if needed */
    opacity: 0.8;
}

/* Outer Ring - Centered */
.orbit-ring-outer {
    width: 280px;
    height: 280px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Centered perfectly */
    animation: spin-right 20s linear infinite;
    /* Clockwise, slower */
}

/* Common Dot Styles */
.orbit-dot {
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: #26C0BD;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(38, 192, 189, 0.5);
    /* Glow effect */
}

/* Positioning Dots on the Ring */

/* Inner Ring Dot (Top) */
.orbit-dot-inner {
    top: 0;
    left: 50%;
}

/* Outer Ring Dots - Adjusted to match image (Left and Bottom Right) */
.orbit-dot-outer-1 {
    top: 50%;
    left: 0;
}

.orbit-dot-outer-2 {
    top: 75%;
    left: 93.3%;
}

.orbit-dot-outer-3 {
    display: none;
}


/* Keyframes - Clockwise Rotation */
@keyframes spin-right {
    0% {
        transform: translateX(-50%) rotate(0deg);
        /* Note: Inner ring uses translateX(-50%) only, but we need to handle both cases.
           Wait, if I use the same animation for both, the transform will be overwritten.
           I should separate them or use a wrapper.
        */
    }

    100% {
        transform: translateX(-50%) rotate(360deg);
    }
}

/* We need specific animations because initial transforms are different */

@keyframes spin-inner {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }

    100% {
        transform: translateX(-50%) rotate(360deg);
    }
}

@keyframes spin-outer {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Apply specific animations */
.orbit-ring-inner {
    animation: spin-inner 8s linear infinite;
}

.orbit-ring-outer {
    animation: spin-outer 15s linear infinite;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .orbit-system {
        width: 260px;
        height: 260px;
    }

    .orbit-ring-outer {
        width: 240px;
        height: 240px;
    }

    .orbit-ring-inner {
        width: 130px;
        height: 130px;
        top: 30px;
    }

    .orbit-dot {
        width: 18px;
        height: 18px;
    }
}

/* Connector Line for Inner Orbit Dot */
.orbit-connector-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    /* Adjust length as needed */
    height: 1px;
    border-top: 2px dashed #26C0BD;
    transform-origin: left center;
    /* 
       Counter-rotation logic:
       Parent (.orbit-ring-inner) rotates clockwise (spin-inner).
       Line must rotate counter-clockwise at same speed to remain horizontal.
       However, the parent's transformation includes translation.
       
       Let's trace:
       Ring: translate(-50%) rotate(t)
       Dot: top:0, left:50% (relative to ring)
       Line: inside dot.
       
       If ring rotates 90deg (clockwise), dot is at 3 o'clock.
       But the local coordinate system of the dot is also rotated 90deg.
       So "right" for the dot is pointing "down".
       
       To point "right" (global), the line needs to be rotated -90deg relative to the dot.
       
       So yes, valid counter-rotation works.
    */
    animation: counter-spin-inner 8s linear infinite;
    z-index: -1;
    /* Behind the dot */
}

/* Small dot at the end of the line */
.orbit-connector-line::after {
    content: '';
    position: absolute;
    right: -4px;
    /* Adjust based on dot size */
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: #26C0BD;
    border-radius: 50%;
}

@keyframes counter-spin-inner {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }

    100% {
        transform: translateY(-50%) rotate(-360deg);
    }
}

/* Orbit Content Box */
.orbit-content-box {
    position: absolute;
    top: 50%;
    left: 100%;
    /* At the end of the line */
    transform: translateY(-50%);
    width: 350px;
    /* Adjust as needed */
    padding-left: 20px;
    text-align: left;
}

.orbit-content-title {
    color: #F2B609 !important;
    /* Yellow */
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.orbit-content-desc {
    color: #ffffff;
    /* White text as per image on dark background, but wait... */
    /* 
       The user said "100% like image" which implied a dark background.
       But the current website has a white background? 
       The image shows a dark grey background. 
       If the website is white, white text won't be visible.
       However, the user's initial request "y chang 100% hình đính kèm" (exactly 100% like attached image)
       implies they might want the background to be dark too.
       
       Let's check if I added a dark background to the container.
       I did: .core-values-orbit-container { background-color: transparent; }
       
       If the section has a white background, I should make the text dark gray/black unless I change the container background.
       
       BUT, looking at the image again, the whole block background is dark gray.
       If the user wants "100% like image", I probably should have set the container background to dark gray.
       
       However, the current context is "About Us Tabs". If I change the background to dark, it might clash with the rest of the page.
       The user didn't explicitly say "change background", but "like image".
       
       For now, I'll set text to dark gray (#4b5563) to be safe on white, 
       BUT give it a class that can be easily swapped if the background is dark.
       
       Wait, let's look at the image again. 
       Yellow title, White text.
       Background is Dark Grey.
       
       If I use white text on white bg, it's invisible.
       I will set text to #4b5563 (Dark Gray) for now to ensure visibility on the existing white background.
       AND I will set the title to that specific Yellow.
       
       If the user complains about background color, I will change it then.
       Or I can set the text color to white IF I change the container bg.
       
       Let's stick to the content layout first.
    */
    color: #4b5563;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* Ensure container allows overflow for the content */
.core-values-orbit-container {
    overflow: visible !important;
    /* We need visible because the line+content extends far right */
}

/* Responsive: Hide content on mobile? Or stack it? */
@media (max-width: 768px) {
    .orbit-content-box {
        display: none;
        /* Hide for now on small screens as it won't fit */
        /* Alternatively, position it below */
    }

    .orbit-connector-line {
        width: 50px;
        /* Shorten line on mobile */
    }
}

/* Outer Orbit Content Box */
.orbit-content-box-outer {
    position: absolute;
    top: 50%;
    left: 40px;
    /* Offset from the dot */
    transform-origin: -40px center;
    /* Rotate around the dot */
    width: 350px;
    text-align: left;
    /* Counter-rotation logic:
       Parent (.orbit-ring-outer) rotates clockwise (spin-outer, 15s).
       Dot rotates with ring.
       Content box needs to rotate counter-clockwise at same speed.
    */
    animation: counter-spin-outer 15s linear infinite;
}

@keyframes counter-spin-outer {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }

    100% {
        transform: translateY(-50%) rotate(-360deg);
    }
}

/* Responsive for Outer Content */
@media (max-width: 768px) {
    .orbit-content-box-outer {
        display: none;
    }
}

/* Left Side Content Box (Third Dot) */
.orbit-content-box-left {
    position: absolute;
    top: 50%;
    right: 40px;
    /* Offset to the left of the dot */
    transform-origin: calc(100% + 40px) center;
    /* Rotate around the dot (which is to the right) */
    width: 350px;
    text-align: right;
    /* Align text to the dot */

    /* Counter-rotation logic same as before (15s) */
    animation: counter-spin-outer 15s linear infinite;
}

/* Responsive for Left Content */
@media (max-width: 768px) {
    .orbit-content-box-left {
        display: none;
    }
}

/* --- Hover Interaction Styles --- */

/* 1. Hide descriptions by default */
.orbit-content-desc {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    margin-top: 0;
}

/* 2. Show description when the dot (or content box) is hovered */
.orbit-dot:hover .orbit-content-desc,
.orbit-content-box:hover .orbit-content-desc,
.orbit-content-box-outer:hover .orbit-content-desc,
.orbit-content-box-left:hover .orbit-content-desc {
    max-height: 200px;
    opacity: 1;
    margin-top: 10px;
}

/* 3. Pause all animations when any dot or content box is hovered */
.orbit-system:has(.orbit-dot:hover) .orbit-ring,
.orbit-system:has(.orbit-dot:hover) [class*="orbit-content-box"],
.orbit-system:has(.orbit-dot:hover) .orbit-connector-line,
.orbit-system:has([class*="orbit-content-box"]:hover) .orbit-ring,
.orbit-system:has([class*="orbit-content-box"]:hover) [class*="orbit-content-box"],
.orbit-system:has([class*="orbit-content-box"]:hover) .orbit-connector-line {
    animation-play-state: paused !important;
}

/* 4. Ensure the dots and content boxes have pointer events to trigger hover */
.orbit-dot {
    cursor: pointer;
    z-index: 100;
}

[class*="orbit-content-box"] {
    pointer-events: auto;
    z-index: 110;
}

/* --- Enhanced Hover Interaction --- */

/* 1. Base state for dimming: when system is hovered, dim everything */
.orbit-system:hover .orbit-dot,
.orbit-system:hover .orbit-ring,
.orbit-system:hover .orbit-connector-line {
    opacity: 0.2;
    transition: opacity 0.3s ease;
}

/* 2. Highlight the specific hovered dot and its children */
.orbit-dot:hover,
.orbit-dot:hover .orbit-ring,
/* This won't work because ring is parent, but that's fine */
.orbit-dot:hover .orbit-connector-line {
    opacity: 1 !important;
}

/* If ring should also highlight, we'd need more complex CSS, but usually just highlighting the dot + line + content is better */

/* 3. Content Box Enhancements on Hover */
[class*="orbit-content-box"] {
    transition: all 0.3s ease;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 15px;
    /* Add some padding for the border */
}

/* Vertical offset adjustments because of padding */
.orbit-content-box {
    margin-left: 20px;
    padding-left: 15px;
}

.orbit-content-box-outer {
    margin-left: 20px;
    padding-left: 15px;
}

.orbit-content-box-left {
    margin-right: 20px;
    padding-right: 15px;
}

/* Bright/Clear/Border effect on hover */
.orbit-dot:hover [class*="orbit-content-box"],
[class*="orbit-content-box"]:hover {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.95);
    /* Brighter background */
    border-color: #26C0BD;
    /* Cyan border */
    box-shadow: 0 0 20px rgba(38, 192, 189, 0.3);
    /* Glow */
    backdrop-filter: blur(5px);
    z-index: 200;
}

/* Dark mode fallback if the container is dark */
/* .core-values-orbit-container.dark-bg .orbit-dot:hover [class*="orbit-content-box"] {
    background: rgba(30, 30, 30, 0.9);
} */

/* Ensure the title also becomes clearer */
.orbit-dot:hover .orbit-content-title {
    color: #F2B609 !important;
    text-shadow: 0 0 5px rgba(242, 182, 9, 0.3);
}

/* Dim other dots' content titles when one is hovered */
.orbit-system:hover .orbit-content-title {
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.orbit-dot:hover .orbit-content-title {
    opacity: 1 !important;
}

/* --- Refined Hover Interaction (Fix: Keep rings and active content bright) --- */

/* 1. Reset ring opacity on hover - They should always stay bright */
.orbit-system:hover .orbit-ring {
    opacity: 1 !important;
}

/* 2. Dim only inactive dots and their lines when the system is hovered */
/* This is already handled by opacity: 0.2 above, but let's be more specific */
.orbit-system:hover .orbit-dot {
    opacity: 0.2;
}

/* 3. Ensure the hovered dot AND its connector line AND its content box are bright */
.orbit-dot:hover,
.orbit-dot:hover .orbit-connector-line,
.orbit-dot:hover [class*="orbit-content-box"] {
    opacity: 1 !important;
}

/* 4. Fix Title dimming: titles should also follow the dot's hover state */
.orbit-system:hover .orbit-content-title {
    opacity: 0.3;
}

.orbit-dot:hover .orbit-content-title {
    opacity: 1 !important;
    text-shadow: 0 0 8px rgba(242, 182, 9, 0.4);
}

/* Ensure transition is smooth for all */
.orbit-dot,
.orbit-connector-line,
.orbit-ring,
[class*="orbit-content-box"],
.orbit-content-title {
    transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* --- Final Color Adjustments --- */

.orbit-content-title {
    color: #ffef38 !important;
    /* Brighter Yellow */
}

.orbit-dot:hover .orbit-content-title {
    color: #ffef38 !important;
}

.orbit-content-desc {
    color: #000000 !important;
    /* Pure Black for content */
}

/* Update text-shadow for the new yellow */
.orbit-dot:hover .orbit-content-title {
    text-shadow: 0 0 8px rgba(255, 239, 56, 0.4);
}

/* --- Adjusted Color for White Background Visibility --- */

.orbit-content-title {
    color: #C5A000 !important;
    /* Darker Gold/Yellow for visibility on white */
}

.orbit-dot:hover .orbit-content-title {
    color: #C5A000 !important;
}

/* Update text-shadow for the darker yellow */
.orbit-dot:hover .orbit-content-title {
    text-shadow: 0 0 5px rgba(197, 160, 0, 0.2);
}

/* --- Restrict Hover Trigger to Dots Only --- */

/* 1. Only show description when dot itself is hovered */
.orbit-content-box:hover .orbit-content-desc,
.orbit-content-box-outer:hover .orbit-content-desc,
.orbit-content-box-left:hover .orbit-content-desc {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-top: 0 !important;
}

/* 2. Only pause and highlight when dot itself is hovered */
.orbit-system:has([class*="orbit-content-box"]:hover) .orbit-ring,
.orbit-system:has([class*="orbit-content-box"]:hover) [class*="orbit-content-box"],
.orbit-system:has([class*="orbit-content-box"]:hover) .orbit-connector-line {
    animation-play-state: running !important;
    opacity: 0.2 !important;
    /* Remain dimmed if system is hovered but not a dot */
}

/* Override previous bright effect for content box hover */
[class*="orbit-content-box"]:hover {
    opacity: 0.3 !important;
    /* Keep it dimmed like other elements */
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* Ensure only dot hover triggers background/border on its OWN child content box */
.orbit-dot:hover [class*="orbit-content-box"] {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #26C0BD !important;
    box-shadow: 0 0 20px rgba(38, 192, 189, 0.3) !important;
    backdrop-filter: blur(5px) !important;
}

/* Strict pointer events: titles and boxes should not intercept hover for the system logic if desired */
/* But dots are small, so we must be careful. The user said "only dots". */
[class*="orbit-content-box"] {
    pointer-events: none !important;
    /* Content box no longer blocks or triggers hover */
}

.orbit-dot {
    pointer-events: auto !important;
    z-index: 200;
    /* Bring dots to the very top */
}

.orbit-content-title {
    pointer-events: none !important;
}

/* --- Bug Fix: Eliminate Ghost Hover (Strict Dot Interaction) --- */

/* 1. Remove all general system-level hover dimming */
.tabs-block .orbit-system:hover .orbit-dot,
.tabs-block .orbit-system:hover .orbit-ring,
.tabs-block .orbit-system:hover .orbit-connector-line,
.tabs-block .orbit-system:hover .orbit-content-title {
    opacity: 1 !important;
    /* Reset to full opacity by default even if area is hovered */
}

/* 2. Implement dimming ONLY when a DOT is specifically hovered */
/* Dim OTHER dots when one is hovered */
.orbit-system:has(.orbit-dot:hover) .orbit-dot:not(:hover) {
    opacity: 0.2 !important;
}

/* Dim OTHER titles when one dot is hovered */
.orbit-system:has(.orbit-dot:hover) .orbit-dot:not(:hover) .orbit-content-title {
    opacity: 0.2 !important;
}

/* 3. Ensure the rings never dim */
.orbit-ring {
    opacity: 1 !important;
}

/* 4. Pause only when a dot is hovered */
.orbit-system .orbit-ring,
.orbit-system [class*="orbit-content-box"],
.orbit-system .orbit-connector-line {
    animation-play-state: running;
}

.orbit-system:has(.orbit-dot:hover) .orbit-ring,
.orbit-system:has(.orbit-dot:hover) [class*="orbit-content-box"],
.orbit-system:has(.orbit-dot:hover) .orbit-connector-line {
    animation-play-state: paused !important;
}

/* 5. Ensure the orbit-system area itself doesn't catch mouse events that could interfere, 
      only the interactive parts should. */
.orbit-system {
    pointer-events: none;
    /* System container doesn't block */
}

.orbit-ring {
    pointer-events: none;
    /* Rings don't block */
}

.orbit-dot {
    pointer-events: auto;
    /* ONLY dots catch the mouse */
}

/* ========================================
   READING PROGRESS BAR
   ======================================== */
#reading-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg, #14B8A6 0%, #3B82F6 100%);
    z-index: 100000;
    /* Higher than header z-99999 */
    transition: width 0.1s ease;
}

/* ========================================
   CONCENTRIC VALUES SYSTEM (REPLACES ORBIT)
   ======================================== */

.concentric-system {
    /* Container styles handled by Tailwind classes in HTML */
    perspective: 1000px;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Common Ring Styles */
.concentric-ring {
    position: absolute;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* --- Layer 1: Outer Ring --- */
/* Lowest layer - appears recessed/background */
.ring-outer {
    width: 100%;
    height: 100%;
    border: 2px dashed #26C0BD;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(38, 192, 189, 0.03) 100%);
    z-index: 10;
    pointer-events: auto;
    /* Inner shadow to create depth - recessed look */
    box-shadow:
        inset 0 10px 30px rgba(0, 0, 0, 0.05),
        inset 0 -5px 20px rgba(38, 192, 189, 0.05),
        0 5px 20px rgba(0, 0, 0, 0.03);
}

/* Pulse Animation for Outer Ring Border */
@keyframes outer-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(38, 192, 189, 0);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(38, 192, 189, 0.1);
    }
}

.ring-outer {
    animation: outer-pulse 3s infinite, rotate-clockwise-ring 30s linear infinite;
}

/* Keyframe for ring rotation (no translate needed) */
@keyframes rotate-clockwise-ring {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   INWARD RIPPLE EFFECT (Hover Animation)
   - Pressure wave effect converging to center
   - Single filled overlay shrinking inward
   ======================================== */

/* Keyframes: Inward Wave - Gradient overlay shrinks to center */
@keyframes inward-wave {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }

    100% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0;
    }
}

/* Pseudo-element base for ripple wave - SINGLE WAVE */
.ring-outer::before,
.ring-middle::before,
.ring-center::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Filled gradient */
    /* Filled gradient - Neon High-Tech Glow */
    background: radial-gradient(circle at center,
            transparent 35%,
            rgba(100, 255, 250, 0.6) 55%,
            /* Bright distinct edge */
            rgba(38, 192, 189, 0.4) 75%,
            rgba(38, 192, 189, 0.1) 100%);
    /* Slight blur for neon feeling but keep definition */
    filter: blur(2px);
    box-shadow: 0 0 15px rgba(100, 255, 250, 0.3);
    /* Extra glow */
    border: none;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    pointer-events: none;
    box-sizing: border-box;
}

/* --- OUTER RING HOVER: Wave from outer edge inward --- */
.ring-outer:hover::before {
    animation: inward-wave 1.5s ease-out infinite;
}

/* --- MIDDLE RING HOVER: Wave from middle inward --- */
.ring-middle:hover::before {
    animation: inward-wave 1.5s ease-out infinite;
    background: radial-gradient(circle at center,
            transparent 25%,
            rgba(38, 192, 189, 0.5) 55%,
            rgba(38, 192, 189, 0.2) 100%);
}

/* Stop outer ripple when middle is hovered */
.ring-outer:has(.ring-middle:hover)::before {
    animation: none;
    opacity: 0;
}

/* --- CENTER RING HOVER: Glow pulse inward --- */
.ring-center:hover::before {
    animation: inward-wave 1.5s ease-out infinite;
    background: radial-gradient(circle at center,
            transparent 20%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0.15) 100%);
}

/* Stop middle and outer ripple when center is hovered */
.ring-middle:has(.ring-center:hover)::before,
.ring-outer:has(.ring-center:hover)::before {
    animation: none;
    opacity: 0;
}

/* Enhanced glow effect for center on hover */
.ring-center:hover {
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.2),
        inset 0 0 40px rgba(255, 255, 255, 0.25);
}

/* ========================================
   CURVED TEXT ON CIRCLE RINGS (SVG textPath)
   ======================================== */

/* Keyframes for rotation */
@keyframes rotate-clockwise {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes rotate-counter-clockwise {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

/* SVG Container Styles */
.curved-text-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    overflow: visible;
}

/* Outer ring SVG - NO animation, rotates with parent .ring-outer */
.curved-text-outer {
    width: 100%;
    height: 100%;
}

/* Middle ring SVG - NO animation, rotates with parent .ring-middle */
.curved-text-middle {
    width: 100%;
    height: 100%;
}

/* Text styling - Bigger font */
.curved-text {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    fill: #26C0BD;
}

/* Desktop adjustments */
@media (min-width: 768px) {
    .curved-text {
        font-size: 16px;
        letter-spacing: 4px;
    }
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .curved-text {
        font-size: 9px;
        letter-spacing: 1.5px;
    }
}


/* --- Layer 2: Middle Ring --- */
/* Middle layer - slightly elevated with gradient depth */
.ring-middle {
    width: 65%;
    /* of Outer */
    height: 65%;
    /* of Outer */
    background: linear-gradient(145deg,
            rgba(38, 192, 189, 0.18) 0%,
            rgba(38, 192, 189, 0.08) 50%,
            rgba(38, 192, 189, 0.15) 100%);
    z-index: 20;
    border: 1px solid rgba(38, 192, 189, 0.3);
    /* Elevated shadow - floating above outer */
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.12),
        0 5px 15px rgba(38, 192, 189, 0.15),
        inset 0 2px 10px rgba(255, 255, 255, 0.1),
        inset 0 -2px 10px rgba(0, 0, 0, 0.05);
    pointer-events: auto;
    animation: rotate-counter-clockwise 18s linear infinite;
}


/* --- Layer 3: Center Circle --- */
/* Top layer - most elevated, prominent 3D effect */
.ring-center {
    width: 53.8%;
    /* (35% original / 65% middle) approx */
    height: 53.8%;
    background: radial-gradient(circle at 30% 30%, #2dd4cf 0%, #26C0BD 40%, #0d9488 100%);
    z-index: 30;
    /* Strong elevated shadow - floating prominently */
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.3),
        0 10px 25px rgba(13, 148, 136, 0.4),
        0 5px 10px rgba(0, 0, 0, 0.15),
        inset 0 3px 15px rgba(255, 255, 255, 0.2),
        inset 0 -3px 15px rgba(0, 0, 0, 0.15);
    color: white;
    text-align: center;
    pointer-events: auto;
    /* Counter-rotate to cancel middle's rotation (18s clockwise to cancel 18s counter-clockwise) */
    animation: rotate-clockwise-ring 18s linear infinite;
}

/* Counter-rotate content inside ring-center to cancel outer ring's rotation */
.ring-center .center-content {
    animation: rotate-counter-clockwise 30s linear infinite;
}

/* --- Content & Labels --- */

.label-text {
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.2;
    text-transform: uppercase;
    color: #26C0BD;
    display: inline-block;
    pointer-events: none;
    transition: all 0.4s ease;
}

.ring-center .label-text {
    color: white;
    font-size: 1.05rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
    .label-text {
        font-size: 1.2rem;
    }

    .ring-center .label-text {
        font-size: 1.35rem;
    }
}

/* --- Hover Effects: Additive Expand 3D --- */
/* Each layer expands additively when hovered deeper */

/* 1. Hover anywhere on system -> outer expands (and stays expanded) */
.concentric-system:hover {
    transform: scale(1.05);
}

/* 2. Hover Middle or Center -> middle + center expand MORE */
.concentric-system:has(.ring-middle:hover) .ring-middle,
.concentric-system:has(.ring-center:hover) .ring-middle {
    width: 72%;
    height: 72%;
}

/* 3. Hover Center -> center expands EVEN MORE */
.concentric-system:has(.ring-center:hover) .ring-center {
    width: 60%;
    height: 60%;
}

/* Shadow enhancements on hover */
.concentric-system:hover:not(:has(.ring-middle:hover)) .ring-outer {
    box-shadow:
        inset 0 10px 30px rgba(0, 0, 0, 0.05),
        inset 0 -5px 20px rgba(38, 192, 189, 0.05),
        0 20px 40px rgba(0, 0, 0, 0.1);
}

.ring-middle:hover {
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.18),
        0 10px 25px rgba(38, 192, 189, 0.2),
        inset 0 2px 10px rgba(255, 255, 255, 0.15),
        inset 0 -2px 10px rgba(0, 0, 0, 0.08);
}

.ring-center:hover {
    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.35),
        0 15px 35px rgba(13, 148, 136, 0.5),
        0 8px 15px rgba(0, 0, 0, 0.2),
        inset 0 5px 20px rgba(255, 255, 255, 0.25),
        inset 0 -5px 20px rgba(0, 0, 0, 0.2);
}


/* --- Popup Information Reveal --- */

.ring-popup-info {
    position: absolute;
    /* Initial State: Center of concentric system */
    top: 50%;
    left: 50%;
    /* Start small and at the center */
    transform: translate(-50%, -50%) scale(0.2);
    width: 260px;
    background: white;
    padding: 20px;
    border-radius: 12px;
    /* Stronger shadow */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 5px 15px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    /* Bouncy transition for "pop" effect */
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 100;
    text-align: center;
    /* Remove full border, use top accent */
    border: none;
    border-top: 4px solid #26C0BD;
    pointer-events: none;
}

.ring-popup-info p {
    font-size: 1rem;
    font-weight: 500;
    color: #111827;
    /* Darker text */
    margin: 0;
    line-height: 1.6;
}

/* Center popup needs to be distinct - explicitly same style or maybe different? 
   User just said "nhạt nhòa" generally. */
.ring-center .ring-popup-info {
    color: #111827;
}


/* --- Strict Popup Logic --- */
/* Popups are now OUTSIDE rotating rings in .ring-popup-container */

/* Popup container styling */
.ring-popup-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 200;
}

.ring-popup-container .ring-popup-info {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Ensure initial state is center and small */
    transform: translate(-50%, -50%) scale(0.2);
    pointer-events: none;
}

/* Show outer popup when outer ring is hovered (but not if child is hovered) */
/* Show outer popup: Pop out to bottom */
.concentric-system:has(.ring-outer:hover):not(:has(.ring-middle:hover)) .ring-popup-info[data-for="outer"] {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 100px) scale(1);
}

/* Show middle popup: Pop out to bottom */
.concentric-system:has(.ring-middle:hover):not(:has(.ring-center:hover)) .ring-popup-info[data-for="middle"] {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 100px) scale(1);
}

/* Show center popup: Pop out to bottom */
.concentric-system:has(.ring-center:hover) .ring-popup-info[data-for="center"] {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 100px) scale(1);
}


/* Mobile Adjustments */
@media (max-width: 768px) {
    .concentric-system {
        transform: scale(0.85);
    }

    .ring-popup-info {
        width: 200px;
        padding: 10px;
        font-size: 0.85rem;
    }
}