/* =========================================================
   FOOTER
   TIẾNG TRUNG HERO
========================================================= */

.site-footer {
  position: relative;

  width: 100%;

  padding:
    52px 0 48px;

  border-top:
    1px solid #d9e8f0;

  background:
    #eef8fc;

  color:
    #60758a;
}


/* =========================================================
   GRID
========================================================= */

.footer__grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.55fr) minmax(150px, .72fr) minmax(170px, .82fr) minmax(170px, .80fr);

  align-items:
    start;

  gap:
    42px;
}


/* =========================================================
   BRAND
========================================================= */

.footer-brand {
  width:
    fit-content;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    14px;

  color:
    #123d6b;

  text-decoration:
    none;
}


.footer-brand__logo {
  width:
    64px;

  height:
    64px;

  display:
    grid;

  place-items:
    center;

  flex:
    0 0 64px;

  overflow:
    hidden;

  border:
    1px solid #d5e6ef;

  border-radius:
    16px;

  background:
    #ffffff;

  box-shadow:
    0 8px 22px rgba(18, 61, 107, 0.08);
}


.footer-brand__logo img {
  width:
    58px;

  height:
    58px;

  display:
    block;

  object-fit:
    contain;
}


.footer-brand__content {
  min-width:
    0;
}


.footer-brand__content strong {
  display:
    block;

  margin-bottom:
    4px;

  color:
    #123d6b;

  font-size:
    16px;

  font-weight:
    800;

  line-height:
    1.25;

  letter-spacing:
    0.01em;
}


.footer-brand__content small {
  display:
    block;

  color:
    #60798c;

  font-size:
    12px;

  font-weight:
    400;

  line-height:
    1.45;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.footer__description {
  max-width:
    410px;

  margin:
    20px 0 17px;

  color:
    #60758a;

  font-size:
    13px;

  font-weight:
    400;

  line-height:
    1.7;
}


/* =========================================================
   CONTACT
========================================================= */

.footer__contact {
  display:
    grid;

  gap:
    8px;

  max-width:
    420px;
}


.footer-contact-item {
  width:
    fit-content;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  margin:
    0;

  color:
    #47718f;

  font-size:
    12.5px;

  font-weight:
    400;

  line-height:
    1.5;

  text-decoration:
    none;

  transition:
    color .2s ease;
}


.footer-contact-item__icon {
  width:
    26px;

  height:
    26px;

  display:
    grid;

  place-items:
    center;

  flex:
    0 0 26px;

  border:
    1px solid #d8e7ef;

  border-radius:
    8px;

  background:
    #ffffff;

  color:
    #2387b3;

  font-size:
    10px;
}


a.footer-contact-item:hover {
  color:
    #1e73be;
}


/* =========================================================
   LEGAL
========================================================= */

.footer__draft-note,
.footer__legal {
  max-width:
    410px;

  margin:
    18px 0 0;

  padding:
    12px 14px;

  border:
    1px solid #d7e6ee;

  border-radius:
    11px;

  background:
    rgba(255, 255, 255, 0.68);

  color:
    #687f91;

  font-size:
    11.5px;

  font-weight:
    400;

  line-height:
    1.6;
}


.footer__legal {
  display:
    grid;

  gap:
    3px;
}


.footer__legal strong {
  color:
    #123d6b;

  font-weight:
    650;
}


/* =========================================================
   FOOTER COLUMN
========================================================= */

.footer__column {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;
}


.footer__column h2 {
  position:
    relative;

  margin:
    4px 0 15px;

  padding-bottom:
    10px;

  color:
    #123d6b;

  font-size:
    17px;

  font-weight:
    800;

  line-height:
    1.25;
}


.footer__column h2::after {
  position:
    absolute;

  bottom:
    0;

  left:
    0;

  width:
    30px;

  height:
    2px;

  content:
    "";

  border-radius:
    999px;

  background:
    #2387b3;
}


.footer__column a {
  position:
    relative;

  min-height:
    31px;

  display:
    inline-flex;

  align-items:
    center;

  color:
    #387b9f;

  font-size:
    13px;

  font-weight:
    400;

  line-height:
    1.4;

  text-decoration:
    none;

  transition:
    color .2s ease,
    transform .2s ease;
}


.footer__column a::before {
  width:
    0;

  margin-right:
    0;

  overflow:
    hidden;

  content:
    "›";

  color:
    #1e73be;

  opacity:
    0;

  transition:
    width .2s ease,
    margin-right .2s ease,
    opacity .2s ease;
}


.footer__column a:hover {
  transform:
    translateX(3px);

  color:
    #123d6b;
}


.footer__column a:hover::before {
  width:
    8px;

  margin-right:
    4px;

  opacity:
    1;
}


/* =========================================================
   COPYRIGHT BAR
========================================================= */

.site-footer-wrap {
  width:
    100%;

  /*
     * QUAN TRỌNG:
     * không còn khoảng trắng 48px như CSS cũ.
     */
  margin:
    0;

  padding:
    0;

  border-top:
    1px solid rgba(255, 255, 255, .18);

  background:
    #238bb5;

  color:
    #ffffff;
}


.site-footer-wrap__inner {
  width:
    min(calc(100% - 48px), 1240px);

  min-height:
    58px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    6px;

  margin-inline:
    auto;

  padding:
    11px 0;

  text-align:
    center;
}


.site-footer-wrap__inner p {
  margin:
    0;

  color:
    #ffffff;

  font-size:
    12px;

  font-weight:
    500;

  line-height:
    1.55;
}


.site-footer-wrap__inner p strong {
  font-weight:
    750;
}


.site-footer-wrap__links {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  color:
    rgba(255, 255, 255, .78);
}


.site-footer-wrap__links a {
  color:
    rgba(255, 255, 255, .88);

  font-size:
    12px;

  font-weight:
    500;

  text-decoration:
    none;
}


.site-footer-wrap__links a:hover {
  color:
    #ffffff;

  text-decoration:
    underline;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1080px) {

  .footer__grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap:
      38px 28px;
  }


  .footer__brand {
    grid-column:
      1 / -1;
  }

}


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

@media (max-width: 720px) {

  .site-footer {
    padding:
      42px 0 34px;
  }


  .footer__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      32px 18px;
  }


  .footer__brand {
    grid-column:
      1 / -1;
  }


  .footer__column:last-child {
    grid-column:
      1 / -1;
  }


  .footer__description {
    font-size:
      13px;
  }


  .footer-contact-item {
    max-width:
      100%;

    font-size:
      13px;
  }


  .footer-contact-item>span:last-child {
    min-width:
      0;

    overflow-wrap:
      anywhere;
  }


  .footer__draft-note,
  .footer__legal {
    max-width:
      100%;

    font-size:
      12px;
  }


  .footer__column a {
    min-height:
      35px;
  }


  .site-footer-wrap__inner {
    width:
      calc(100% - 32px);

    min-height:
      74px;

    flex-direction:
      column;

    gap:
      3px;

    padding:
      12px 0;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .footer__grid {
    grid-template-columns:
      1fr;
  }


  .footer__brand,
  .footer__column:last-child {
    grid-column:
      auto;
  }


  .footer-brand__logo {
    width:
      58px;

    height:
      58px;

    flex-basis:
      58px;
  }


  .footer-brand__logo img {
    width:
      52px;

    height:
      52px;
  }


  .footer-brand__content strong {
    font-size:
      15px;
  }


  .footer-brand__content small {
    font-size:
      11px;
  }

}

/* =========================================================
   FOOTER FINAL COLOR LAYERS
   Footer chính = xanh header; copyright = navy đậm.
   ========================================================= */

#site-root .site-footer {
  border-top-color: rgba(255, 255, 255, 0.18);
  background: #1e73be !important;
  color: #ffffff;
}

#site-root .site-footer .footer-brand__content strong,
#site-root .site-footer .footer__column h2,
#site-root .site-footer .footer__legal strong {
  color: #ffffff !important;
}

#site-root .site-footer .footer-brand__content small,
#site-root .site-footer .footer__description,
#site-root .site-footer .footer-contact-item,
#site-root .site-footer .footer__draft-note,
#site-root .site-footer .footer__legal {
  color: rgba(255, 255, 255, 0.80) !important;
}

#site-root .site-footer .footer-contact-item__icon {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

#site-root .site-footer .footer__draft-note,
#site-root .site-footer .footer__legal {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.09);
}

#site-root .site-footer .footer__column h2::after {
  background: #f5c542;
}

#site-root .site-footer a,
#site-root.home-page .site-footer a {
  color: rgba(255, 255, 255, 0.84) !important;
}

#site-root .site-footer a:hover,
#site-root.home-page .site-footer a:hover {
  color: #ffffff !important;
}

#site-root .site-footer-wrap,
#site-root.home-page .site-footer-wrap {
  margin-top: 0 !important;
  background: #17639f !important;
}