#site-header {
  transition: all 0.3s ease;
}

#site-header.scrolled {
  background-color: #020202;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.embla__container {
  display: flex;
  gap: 30px;
  will-change: transform;
}

.embla__slide {
  flex: 0 0 100%;
  max-width: 390px;
}

/* Tablet: 2 slides */
@media (min-width: 768px) {
  .embla__slide {
    flex: 0 0 calc((100% - 30px) / 2);
  }
}

/* Desktop: 4 slides */
@media (min-width: 1280px) {
  .embla__slide {
    flex: 0 0 calc((100% - 90px) / 4);
  }
}

/* Hide scrollbar utility */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ============================================
   QUICK LINKS CAROUSEL (Mobile Only)
   ============================================ */

/* Mobile: Hide desktop grid, show carousel */
@media (max-width: 767px) {
  #homepage > section[aria-labelledby="hero-title"] nav[aria-label="Quick access links"] .quick-links-desktop {
    display: none;
  }
  
  #homepage > section[aria-labelledby="hero-title"] nav[aria-label="Quick access links"] .quick-links-mobile-wrapper {
    display: block;
    width: 100%;
  }
}

/* Desktop: Show grid, hide carousel */
@media (min-width: 768px) {
  #homepage > section[aria-labelledby="hero-title"] nav[aria-label="Quick access links"] .quick-links-desktop {
    display: flex;
  }
  
  #homepage > section[aria-labelledby="hero-title"] nav[aria-label="Quick access links"] .quick-links-mobile-wrapper {
    display: none;
  }
}

/* Mobile: Quick Links Carousel Styles */
.quick-links-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 8px;
  padding-bottom: 8px;
  padding-left: 0;
  padding-right: 0;
}

.quick-links-carousel::-webkit-scrollbar {
  display: none;
}

.quick-links-slide {
  flex: 0 0 calc(50% - 8px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  min-width: 0;
  box-sizing: border-box;
  font-size: 14px;
  min-width: 172px;
}

.quick-links-indicators {
  display: none;
}

.quick-links-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.quick-links-indicator.active {
  background-color: rgba(255, 255, 255, 0.9);
  width: 24px;
  border-radius: 4px;
}

/* ============================================
   PLATFORM ARCHITECTURE COLLAPSE (Mobile Only)
   ============================================ */

/* Mobile: Collapse functionality */
@media (max-width: 1023px) {
  .platform-arch-item-header {
    padding: 0;
    background: none;
    border: none;
    text-align: left;
  }
  
  .platform-arch-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
  }
  
  
  .platform-arch-content.block {
    max-height: 500px;
    opacity: 1;
    transition: max-height 0.3s ease-in, opacity 0.3s ease-in;
  }
  
  .platform-arch-arrow {
    flex-shrink: 0;
  }
}

/* Desktop: Always show content, no collapse */
@media (min-width: 1024px) {
  .platform-arch-content {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
  }
  
  .platform-arch-item-header {
    pointer-events: none;
  }
  
  .platform-arch-arrow {
    display: none;
  }
}

/* ============================================
   ACTIVE NAVIGATION STATE
   ============================================ */

/* Desktop Header - Active state for direct links (Home, About, Careers, Contact) */
#site-header > nav ul > li > a.nav-active {
  color: #8CCEEE !important;
}

/* Desktop Header - Active state for parent buttons (Platform, Solutions, Infrastructure) */
#site-header button.nav-active {
  color: #8CCEEE !important;
}

/* Desktop Header - Active state for Infrastructure link inside button */
#site-header button.nav-active a.nav-active {
  color: #8CCEEE !important;
  background-color: transparent !important;
}

/* Desktop Mega Menu - Active item in dropdown (Platform & Solutions) - chỉ áp dụng cho items trong dropdown, không phải Infrastructure */
#site-header .relative.group > div a.nav-active {
  background-color: #2558A7 !important;
  color: white !important;
}

/* Mobile Menu - Active state for direct links (Home, About, Careers, Contact) */
#mobile-menu-panel > nav > a.nav-active {
  background-color: #2558A7 !important;
  color: white !important;
}

/* Mobile Menu - Active state for summary (Platform, Solutions, Infrastructure) - chỉ đổi màu text khi child active */
#mobile-menu-panel summary.nav-active {
  color: #8CCEEE !important;
  background-color: transparent !important;
}

/* Mobile Menu - Active state for Infrastructure link inside summary - khi Infrastructure active */
#mobile-menu-panel summary.nav-active a.nav-active {
  background-color: #2558A7 !important;
  color: white !important;
}

/* Mobile Menu - Active item in details dropdown (Platform & Solutions children) */
#mobile-menu-panel details a.nav-active {
  background-color: #2558A7 !important;
  color: white !important;
}

/* ============================================
   QUANTUM COMPUTING CARDS CAROUSEL (Mobile Only)
   ============================================ */

/* Mobile: Quantum Cards Carousel Styles */
.quantum-cards-carousel {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.quantum-cards-carousel::-webkit-scrollbar {
  display: none;
}

.quantum-cards-carousel > li {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Ensure wrapper doesn't break layout on mobile */
@media (max-width: 1023px) {
  .quantum-cards-mobile-wrapper {
    display: block !important;
    width: 100%;
    margin-top: 2.5rem;
  }
  
  .quantum-cards-carousel {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .quantum-cards-carousel > li:first-child {
    margin-left: 0 !important;
  }
}

/* Desktop: Hide mobile carousel, show desktop grid */
@media (min-width: 1024px) {
  .quantum-cards-mobile-wrapper {
    display: none !important;
  }
  
  .quantum-cards-desktop {
    display: grid !important;
  }
}

/* ============================================
   QUANTUM SECURITY CARDS CAROUSEL (Mobile Only)
   ============================================ */

/* Mobile: Quantum Security Cards Carousel Styles */
.quantum-security-cards-carousel {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.quantum-security-cards-carousel::-webkit-scrollbar {
  display: none;
}

.quantum-security-cards-carousel > div {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Ensure wrapper doesn't break layout on mobile */
@media (max-width: 767px) {
  .quantum-security-cards-mobile-wrapper {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .quantum-security-cards-carousel {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ============================================
   CAREERS LIFE CARDS CAROUSEL (Mobile Only)
   ============================================ */

/* Mobile: Careers Life Cards Carousel Styles */
.careers-life-cards-carousel {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.careers-life-cards-carousel::-webkit-scrollbar {
  display: none;
}

.careers-life-cards-carousel > div {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Ensure wrapper doesn't break layout on mobile */
@media (max-width: 1023px) {
  .careers-life-cards-mobile-wrapper {
    width: 100%;
  }
  
  .careers-life-cards-carousel {
    margin-left: -1.5rem; /* -px-6 */
    margin-right: -1.5rem; /* -px-6 */
    padding-left: 1.5rem; /* px-6 */
    padding-right: 1.5rem; /* px-6 */
  }
  
  @media (min-width: 640px) {
    .careers-life-cards-carousel {
      margin-left: -2rem; /* -sm:px-8 */
      margin-right: -2rem; /* -sm:px-8 */
      padding-left: 2rem; /* sm:px-8 */
      padding-right: 2rem; /* sm:px-8 */
    }
  }
  
  .careers-life-cards-carousel > div {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}