/* ========== BRANCHES GRID & CARDS (không liên quan banner) ========== */
  .branch-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 12px;
    height: 100%;
  }
  
  .branch-card .ratio {
    border-radius: 8px;
    overflow: hidden;
    background-color: #f8f9fa;
    margin-bottom: 10px;
  }
  
  .branch-card .ratio img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .branch-title {
    font-size: 0.95rem;                  /* nhỏ gọn cho 4 cột */
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* ===== HERO: FULL MÀN HÌNH VÀ NẰM DƯỚI HEADER ===== */
#hero.hero{
  min-height: 100vh;                /* full màn hình */
  padding: 0;                       /* Remove default padding */
  position: relative;
  isolation: isolate;               /* đảm bảo overlay/child không bị lẫn */
  background-color: #f8f9fa;        /* fallback khi ảnh chưa load */
}

/* Nếu trong hero có nội dung text/CTA thì hiện trên nền */
#hero .container{ 
  position: relative; 
  z-index: 1; 
  padding: 0;                       /* Remove container padding */
  max-width: 100%;                  /* Full width for banner */
}

/* Section dưới nếu có anchor (id) sẽ không bị header che khi scroll đến */
section[id], [id].section, .section-title{
  scroll-margin-top: calc(var(--header-h) + 12px);
}

/* ===== RESPONSIVE: đổi ảnh/điểm trọng tâm nếu cần ===== */
@media (max-width: 575.98px){
  #hero.hero{
    min-height: 80vh;
  }
  .header.fixed-top{ background: rgba(255,255,255,.9); }
}

/* ===== MENU ACTIVE STYLES ===== */
.navmenu ul li a.active,
.navmenu ul li.dropdown.active > a {
  color: #007bff !important;
  font-weight: 600;
}

.navmenu ul li.dropdown.active > a span {
  color: #007bff !important;
}

.navmenu ul li.dropdown ul li a.active {
  background-color: #f8f9fa;
  color: #007bff !important;
  font-weight: 600;
  border-radius: 4px;
  padding: 8px 12px;
  margin: 2px 0;
}

/* Hover effects for better UX */
.navmenu ul li a:hover {
  color: #007bff !important;
  transition: color 0.3s ease;
}

.navmenu ul li.dropdown ul li a:hover {
  background-color: #e9ecef;
  color: #007bff !important;
  transition: all 0.3s ease;
}

/* ===== BANNER SLIDER STYLES ===== */
.banner-slider-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  border-radius: 0;
}

.banner-slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.banner-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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

/* Hide mobile banners on desktop */
@media (min-width: 576px) {
  .mobile-banner {
    display: none !important;
  }
  .banner-slide:nth-child(n+4) {
    display: none !important;
  }
}

/* Hide desktop banners on mobile */
@media (max-width: 575.98px) {
  .desktop-banner {
    display: none !important;
  }
  .banner-slide:nth-child(-n+3) {
    display: none !important;
  }
  .banner-slide:nth-child(n+4) {
    display: flex !important;
  }
  .banner-slide:nth-child(4) {
    opacity: 1 !important;
  }
}

/* Navigation Arrows */
.banner-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.8);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.banner-nav:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-50%) scale(1.1);
}

.banner-prev {
  left: 20px;
}

.banner-next {
  right: 20px;
}

.banner-nav i {
  font-size: 20px;
  color: #333;
}

/* Dots Indicator */
.banner-dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.dot.active {
  background: #fff;
  border-color: #007bff;
  transform: scale(1.2);
}

.dot:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: scale(1.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .banner-slider-container {
    height: 80vh;
  }
  
  .banner-nav {
    width: 40px;
    height: 40px;
  }
  
  .banner-nav i {
    font-size: 16px;
  }
  
  .banner-prev {
    left: 15px;
  }
  
  .banner-next {
    right: 15px;
  }
  
  .banner-dots {
    bottom: 20px;
  }
  
  .dot {
    width: 10px;
    height: 10px;
  }
}

@media (max-width: 480px) {
  .banner-slider-container {
    height: 70vh;
  }
  
  .banner-nav {
    width: 35px;
    height: 35px;
  }
  
  .banner-nav i {
    font-size: 14px;
  }
  
  .banner-prev {
    left: 10px;
  }
  
  .banner-next {
    right: 10px;
  }
  
  .banner-dots {
    bottom: 15px;
  }
  
  .dot {
    width: 8px;
    height: 8px;
  }
}

/* Fade transition effect */
.banner-slide.fade-out {
  opacity: 0;
}

.banner-slide.fade-in {
  opacity: 1;
}

/* Slide transition effect (alternative) */
.banner-slider.slide-transition {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Loading state */
.banner-slider-container.loading .banner-image {
  filter: blur(2px);
}

.banner-slider-container.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 5;
}

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

/* ===== LOGO STYLES ===== */
.header .logo img {
  max-height: 50px;
  width: auto;
  object-fit: contain;
  transition: all 0.3s ease;
}

.header .logo:hover img {
  transform: scale(1.05);
}

.footer .footer-about .logo img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
  margin-right: 10px;
  transition: all 0.3s ease;
}

.footer .footer-about .logo:hover img {
  transform: scale(1.05);
}

/* Responsive logo sizing */
@media (max-width: 768px) {
  .header .logo img {
    max-height: 40px;
  }
  
  .footer .footer-about .logo img {
    max-height: 35px;
  }
}

@media (max-width: 480px) {
  .header .logo img {
    max-height: 35px;
  }
  
  .footer .footer-about .logo img {
    max-height: 30px;
  }
}

/* Sitename styling */
.sitename {
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 24px;
}