/* Nền tổng thể */
.site-footer {
  background: #092948;
  color: #e7eef5;
}

.footer-wrap,
.th-footer {
  margin-inline: auto;
  padding-block: clamp(60px, calc(6.25vw - 20px), 100px);
  max-width: min(1280px, 92vw);
}

.col-brand {
  /* 2 lớp background: lớp đầu tiên vẽ trên cùng */
  background-image: var(--footer-logo), var(--footer-world);
  background-repeat: no-repeat, no-repeat;
  background-position: top center, top center;
  background-size: contain, 100% auto;
  max-width:280px; 
}

.f-cols {
  display: grid;
  grid-template-columns: 1.5fr 1.5fr 2fr 1fr;
  gap: clamp(20px, calc(2.5641vw + 10.7692px), 60px);
}

.f-cols > .col {
  min-width: 0;
}

.f-info {
  display: grid;
  grid-template-columns: 1fr;
  /* ở grid chính đã chia cột, nên 1 cột trong block info */
  row-gap: clamp(16px, calc(2.5vw - 16px), 32px);
  min-width: 0;
}

.f-info__item {
  display: grid;
  grid-template-columns: clamp(24px, calc(1.25vw + 8px), 32px) minmax(0, 1fr);
  column-gap: 8px;
  align-items: flex-start; /* text nhiều dòng sẽ bắt đầu thẳng với dòng đầu */
  font-size: clamp(14px, calc(.3125vw + 10px), 16px);
  color: #98a2b3;
  line-height: 22px;
}


.f-info__item .ico-wrap {
  display: inline-grid;
  place-items: center;
  width: clamp(24px, calc(1.25vw + 8px), 32px);
  height: clamp(24px, calc(1.25vw + 8px), 32px);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.f-info__item a {
  color: #98a2b3;
  text-decoration: none;
}

.f-info__item .ico {
  width: clamp(12px, calc(0.625vw + 4px), 16px);
  height: clamp(12px, calc(0.625vw + 4px), 16px);
  display: block;
}

/* ====== Tiêu đề cột (đổi .f-col-title -> .f-title, GIỮ số liệu) ====== */
.f-title,
.f-col-title {
  margin: 0 0 20px;
  font-weight: 500;
  font-size: clamp(14px, calc(0.625vw + 6px), 18px);
  line-height: 22px;
  color: #fff;
}

.sitemap-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, calc(2.5641vw + 10.7692px), 60px);
}

/* Menu (GIỮ các thông số) */
.f-col .f-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 9px;
  display: grid;
}

.f-col .f-menu li a {
  display: block;
  padding: 6px 0;
  color: #98a2b3;
  letter-spacing: 0%;
  text-decoration: none;
  font-size: clamp(14px, calc(0.3125vw + 10px), 16px);
  text-transform: uppercase;
}

.f-col .f-menu li a:hover {
  color: #fff;
}

/* ====== Theo dõi (cột 4) – Social + Language (GIỮ số liệu) ====== */
.f-social {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.soc {
  display: inline-grid;
  place-items: center;
  width: clamp(28px, calc(1.25vw + 12px), 36px);
  height: clamp(28px, calc(1.25vw + 12px), 36px);

  border-radius: 50%;
  background: #0c2639;
  border: 1px solid rgba(255, 255, 255, 0.18);
  text-decoration: none;
  transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease,
    border-color 0.15s ease;
}

.ico-soc {
  width: 18px;
  height: 18px;
  display: block;
  background: #98a2b3;
  -webkit-mask: var(--ico) no-repeat center / contain;
  mask: var(--ico) no-repeat center / contain;
}

.soc:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  color: #63ab45;
}

.ico-soc:hover {
  background-color: #63ab45;
}

.f-lang {
  margin: 0;
}

.f-lang__list {
  display: flex;
  padding: 0;
  list-style: none;
}

.f-lang__list li a {
  color: #98a2b3;
  text-decoration: none;
  white-space: nowrap;
}

.f-lang__list .current-lang > a,
.f-lang__list .current-lang > span {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.f-lang__list li:not(.current-lang) > a:hover {
  color: #108ee7;
  text-decoration: none;
  white-space: nowrap;
}

/* ====== (Optional) Gallery cũ – giữ nguyên nếu còn dùng ====== */
.f-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.f-thumb {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}

.f-thumb--ph {
  background: #11314a;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ====== Copyright – GIỮ số liệu ====== */
.f-copy {
  background: #0c111d;
  padding: 10px;
  text-align: center;
  color: #7d7f8e;
  font-size: clamp(12px, calc(0.3125vw + 8px), 14px);
  font-family: var(--font);
  line-height: clamp(18px, calc(0.3125vw + 14px), 20px);
  font-weight: 500;
}

/* Tablet & Mobile: 2 cột, logo trên cùng, trái: contact->follow, phải: sitemap (span 2 hàng) */
@media (max-width: 1024px) {
  /* Gán area cho từng cột */
  .col-brand {
    grid-area: brand;
  }

  .col-contact {
    grid-area: contact;
  }

  .col-follow {
    grid-area: follow;
  }

  .col-sitemap {
    grid-area: sitemap;
  }

  .col-brand {
    display: block;

    width: 100%;
    height: 80px;
    /* CHIỀU CAO */
    /* 2 lớp nền: logo + world */
    background-image: var(--footer-logo, none);
    background-repeat: no-repeat, no-repeat;
    background-position: top left, top center;
    /* tuỳ ý */
    background-size: auto 56px, 100% auto;
    /* logo cao ~56px, world phủ */
  }

  .f-cols {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
      "brand   brand"
      "contact sitemap"
      "follow  sitemap";
    gap: clamp(16px, 3vw, 28px);
    align-items: start;
  }

  /* canh lại một số thứ khi vào 2 cột */
  .col-brand {
    justify-self: center;
    width: 100%;
  }

  /* logo full hàng trên */
  .sitemap-2 {
    grid-template-columns: 1fr;
    gap: 9px;
  }
}