/* ===== NEW FOOTER DESIGN - 3 COLUMNS ===== */
.site-footer {
  background: rgb(243, 243, 243);
  color: rgba(0, 0, 0, 0.8);
  padding-top: calc(60 * var(--nk-unit));
}

.footer-grid-new {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: calc(40 * var(--nk-unit));
  padding-bottom: calc(40 * var(--nk-unit));
  border-bottom: calc(1 * var(--nk-unit)) solid rgba(255,255,255,0.1);
  align-items: center;
  justify-items: center;
}

/* Left Column - Logo & Address */
.footer-col.footer-info {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--nk-unit));
}

.footer-logo-img {
  max-width: calc(300 * var(--nk-unit));
  height: auto;
  margin-bottom: calc(10 * var(--nk-unit));
}

.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--nk-unit));
  padding-right: calc(90 * var(--nk-unit));
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: calc(12 * var(--nk-unit));
  font-size: calc(14 * var(--nk-unit));
  line-height: 1.6;
  color: rgba(56, 56, 56, 0.8);
}

.footer-contact-item.footer-address-block {
  flex-direction: column;
  gap: calc(3 * var(--nk-unit));
}

.footer-address-main {
  display: flex;
  align-items: flex-start;
  gap: calc(12 * var(--nk-unit));
  width: 100%;
  text-decoration: none;
}

.footer-contact-item i,
.footer-address-main i {
  color: var(--primary);
  font-size: calc(16 * var(--nk-unit));
  margin-top: calc(2 * var(--nk-unit));
  min-width: calc(16 * var(--nk-unit));
}

.footer-contact-item span,
.footer-address-main span {
  color: black;
  flex: 1;
}

.footer-license {
  display: block;
  font-style: italic;
  font-size: calc(13 * var(--nk-unit));
  color: rgba(0, 0, 0, 0.75);
  margin-top: calc(1 * var(--nk-unit));
  padding-left: calc(28 * var(--nk-unit));
  width: 100%;
  box-sizing: border-box;
}

/* Footer Social Links */
.footer-social-links {
  margin-top: calc(20 * var(--nk-unit));
}

.footer-social-links h4 {
  font-family: var(--font-heading);
  font-size: calc(15 * var(--nk-unit));
  font-weight: 700;
  margin-bottom: calc(15 * var(--nk-unit));
  text-transform: uppercase;
  letter-spacing: calc(0.5 * var(--nk-unit));
  color: var(--text-dark);
}

.social-links-grid {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12 * var(--nk-unit));
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(44 * var(--nk-unit));
  height: calc(44 * var(--nk-unit));
  background: rgba(0, 115, 170, 0.08);
  border-radius: calc(10 * var(--nk-unit));
  color: var(--text-dark);
  transition: var(--transition);
  border: calc(1 * var(--nk-unit)) solid transparent;
}

.social-link:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  transform: translateY(calc(-3 * var(--nk-unit)));
  box-shadow: 0 calc(6 * var(--nk-unit)) calc(16 * var(--nk-unit)) rgba(0, 115, 170, 0.3);
}

.social-link i {
  font-size: calc(20 * var(--nk-unit));
  color: var(--primary);
  transition: var(--transition);
}

/* Brand colors for the social icons in the footer. */
.footer-social-links .social-link-facebook i { color: #1877f2; }
.footer-social-links .social-link-tiktok i { color: #000; }
.footer-social-links .social-link-youtube i { color: #ff0000; }
.footer-social-links .social-link-instagram i { color: #e4405f; }
.footer-social-links .social-link-zalo i { color: #0068ff; }
.footer-social-links .social-link-map i { color: var(--primary); }

.footer-social-links .social-link-facebook:hover { background: #1877f2; border-color: #1877f2; }
.footer-social-links .social-link-tiktok:hover { background: #000; border-color: #000; }
.footer-social-links .social-link-youtube:hover { background: #ff0000; border-color: #ff0000; }
.footer-social-links .social-link-instagram:hover { background: #e4405f; border-color: #e4405f; }
.footer-social-links .social-link-zalo:hover { background: #0068ff; border-color: #0068ff; }
.footer-social-links .social-link-map:hover { background: var(--primary); border-color: var(--primary); }

.social-link:hover i {
  color: white;
}

/* Middle Column - Services */
.footer-col.footer-services h3 {
  font-family: var(--font-heading);
  font-size: calc(16 * var(--nk-unit));
  font-weight: 700;
  margin-bottom: calc(20 * var(--nk-unit));
  text-transform: uppercase;
  letter-spacing: calc(0.5 * var(--nk-unit));
}

.footer-services ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--nk-unit));
}

.footer-services ul li {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--nk-unit));
  font-size: calc(14 * var(--nk-unit));
  transition: var(--transition);
}

.footer-services ul li i {
  color: var(--primary);
  font-size: calc(12 * var(--nk-unit));
}

.footer-services ul li:hover {
  color: black;
  padding-left: calc(5 * var(--nk-unit));
}

/* Right Column - Facebook Fanpage */
.footer-col.footer-fanpage h3 {
  font-family: var(--font-heading);
  font-size: calc(16 * var(--nk-unit));
  font-weight: 700;
  margin-bottom: calc(20 * var(--nk-unit));
  text-transform: uppercase;
  letter-spacing: calc(0.5 * var(--nk-unit));
}

.fb-page-wrapper {
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius);
  /* padding: calc(10 * var(--nk-unit)); */
  overflow: hidden;
}

.fb-page-wrapper iframe {
  /* width: auto; */
  display: block;
  height: calc(130 * var(--nk-unit));
}

/* Footer Bottom */
.footer-bottom {
  padding: calc(20 * var(--nk-unit)) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: calc(13 * var(--nk-unit));
}

/* Responsive Footer */
@media (max-width: 1024px) {
  .footer-grid-new {
    grid-template-columns: 1fr 1fr;
    gap: calc(30 * var(--nk-unit));
  }
  
  .footer-col.footer-fanpage {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .footer-grid-new {
    grid-template-columns: 1fr;
    gap: calc(30 * var(--nk-unit));
  }
  
  .footer-logo-img {
    max-width: calc(140 * var(--nk-unit));
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: calc(10 * var(--nk-unit));
    text-align: center;
  }
  
}
