/* ==========================================================================
   Footer chung
   TỰ SINH — không sửa tay. Nguồn: figma mcp/css/sections/footer.css
   Sinh lại bằng scratchpad/prefix_css.py (xem CLAUDE.md muc 8).
   Mọi selector đã được bọc trong `.tbtc-page` để không đụng CSS của
   Flatsome/WooCommerce, nhờ đó markup giữ nguyên tên class của prototype.
   ========================================================================== */

/* ==========================================================================
   Footer — Figma component 218:7987 (1440 × 511)
   ========================================================================== */

.tbtc-page .site-footer {
  background: var(--c-navy);
  color: var(--c-white);
}

.tbtc-page .site-footer__main {
  display: grid;
  /* 1fr thay cho 310px cứng: ở khổ 1440 vẫn ra đúng 310 như thiết kế
     ((1440 − 2×64 − 3×24) / 4 = 310), nhưng dải 1280–1439px thì cột co lại
     thay vì đẩy footer rộng 1368px ra ngoài màn hình. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
  max-width: var(--page-w);
  margin-inline: auto;
  padding: 56px var(--gutter);
}

/* ---- Cột thương hiệu -------------------------------------------------- */

.tbtc-page .site-footer__logo {
  width: 243px;
  height: 61px;
  object-fit: contain;
}

.tbtc-page .footer-rule {
  width: 48px;
  height: 2px;
  margin: var(--sp-8) 0 0;
  border: 0;
  background: var(--c-orange);
}

.tbtc-page .site-footer__brand-name {
  margin-top: var(--sp-8);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-white);
  text-transform: uppercase;
}

.tbtc-page .site-footer__about {
  margin-top: var(--sp-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: #e4eeff;
}

.tbtc-page .social-links {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
}

.tbtc-page .social-links img {
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.tbtc-page .social-links a:hover img {
  transform: translateY(-2px);
  opacity: 0.85;
}

/* ---- Cột chung -------------------------------------------------------- */

.tbtc-page .footer-col__title {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-white);
  text-transform: uppercase;
}

.tbtc-page .footer-col__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.tbtc-page .footer-col__list a {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: #e4eeff;
  transition: color var(--dur) var(--ease);
}

.tbtc-page .footer-col__list a:hover {
  color: var(--c-orange);
}

/* ---- Cột liên hệ ------------------------------------------------------ */

.tbtc-page .footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.tbtc-page .footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: #e4eeff;
}

.tbtc-page .footer-contact img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.tbtc-page .footer-contact a:hover {
  color: var(--c-orange);
}

.tbtc-page .site-footer__cert {
  width: 286px;
  height: 149px;
  margin-top: var(--sp-6);
  object-fit: contain;
}

/* ---- Huy hiệu chứng nhận ---------------------------------------------- */

.tbtc-page .footer-badges {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

.tbtc-page .footer-badges img {
  height: 48px;
  width: auto;
  object-fit: contain;
}

/* ---- Thanh bản quyền — Figma 218:7960 --------------------------------- */

.tbtc-page .site-footer__bar {
  background: linear-gradient(90deg, var(--c-blue) 0%, #002793 50%, var(--c-orange) 100%);
}

.tbtc-page .site-footer__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: 48px;
  max-width: var(--page-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-white);
}

/* ==========================================================================
   Widget nổi: liên hệ nhanh + về đầu trang
   Figma 104:1968 (hotline cta) và 86:639 (Back to top)
   ========================================================================== */

/* Panel dán sát mép phải, bo góc chỉ bên trái (Figma: radii 12/0/0/12).
   Thu gọn 58px, hover giãn ra 143px để lộ nhãn — đúng hai biến thể trong
   component_set 104:1966. Thiết kế không có đổ bóng nên ở đây cũng không có. */
.tbtc-page .quick-contact {
  position: fixed;
  right: 0;
  bottom: 80px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 58px;
  padding: 12px 10px;
  background: rgba(255, 255, 255, 0.95);
  /* Viền trong thiết kế là #FFFFFF — vô hình trên nền trắng, nên bỏ đi để
     58px = 10 + 38 (icon) + 10 khớp chính xác với Figma. */
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  overflow: hidden;
  transition: width var(--dur) var(--ease);
}

.tbtc-page .quick-contact:hover, .tbtc-page .quick-contact:focus-within {
  width: 143px;
}

.tbtc-page .quick-contact__item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
}

.tbtc-page .quick-contact__item img {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 20px;
  transition: transform var(--dur) var(--ease);
}

.tbtc-page .quick-contact__item:hover img {
  transform: scale(1.06);
}

.tbtc-page .quick-contact__label {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.tbtc-page .quick-contact:hover .quick-contact__label, .tbtc-page .quick-contact:focus-within .quick-contact__label {
  opacity: 1;
}

/* ---- Về đầu trang — Figma 86:630 -------------------------------------- */
/* Mặc định: nền cam 20%, mũi tên cam. Hover: nền cam đặc, mũi tên trắng.
   Căn giữa theo panel liên hệ nhanh (tâm cùng nằm ở 1411px). */

.tbtc-page .back-to-top {
  position: fixed;
  right: 9px;
  bottom: var(--sp-6);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: var(--r-pill);
  background: rgba(255, 107, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur) var(--ease),
    visibility var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.tbtc-page .back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.tbtc-page .back-to-top:hover {
  background: var(--c-orange);
}

.tbtc-page .back-to-top img {
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  transition: opacity var(--dur) var(--ease);
}

.tbtc-page .back-to-top__icon {
  display: grid;
  place-items: center;
}

.tbtc-page .back-to-top__icon img:last-child {
  opacity: 0;
}

.tbtc-page .back-to-top:hover .back-to-top__icon img:first-child {
  opacity: 0;
}

.tbtc-page .back-to-top:hover .back-to-top__icon img:last-child {
  opacity: 1;
}

/* ---- Responsive fallback --------------------------------------------- */

@media (max-width: 1279px) {
  .tbtc-page .site-footer__main {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    padding-inline: var(--sp-6);
  }

  .tbtc-page .site-footer__bar-inner {
    padding-inline: var(--sp-6);
  }
}

/* ==========================================================================
   Mobile — Figma 430:3137 (393 × 1154)
   Thương hiệu và Liên hệ chiếm trọn bề ngang; hai cột liên kết đứng cạnh
   nhau; huy hiệu thành hàng riêng; thanh bản quyền hai dòng canh giữa.
   ========================================================================== */

@media (max-width: 767px) {
  .tbtc-page .site-footer__main {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8) var(--sp-4);
    padding: var(--sp-12) var(--gutter);
  }

  /* Cột thương hiệu và cột liên hệ trải hết bề ngang */
  .tbtc-page .footer-col:nth-child(1), .tbtc-page .footer-col:nth-child(2) {
    grid-column: 1 / -1;
  }

  /* Thiết kế đặt huy hiệu thành một hàng riêng trải hết bề ngang (Figma
     430:3161) nhưng trong HTML nó nằm trong cột "Hỗ trợ và chính sách" —
     cột này cũng là cột cao nhất nên nới sang trái đúng bằng bề rộng cột
     kia cộng khoảng cách là ra đúng vị trí, không phải đổi cấu trúc. */
  .tbtc-page .footer-badges {
    width: calc(200% + var(--sp-4));
    margin-top: var(--sp-8);
    margin-left: calc(-100% - var(--sp-4));
  }

  .tbtc-page .site-footer__logo {
    width: 224px;
    height: 56px;
  }

  .tbtc-page .footer-rule {
    margin-top: var(--sp-4);
  }

  .tbtc-page .site-footer__brand-name {
    margin-top: var(--sp-4);
  }

  .tbtc-page .footer-col__title {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body-lg);
  }

  /* ---- Khoảng cách dọc của bản mobile ------------------------------- */
  /* Thiết kế mobile (430:3137 / 457:2679) dùng thang khít hơn desktop: 8px
     giữa tên và mô tả, 16px trước mỗi khối con, 8px giữa các dòng danh sách.
     Trước đây các chỗ này còn giữ số của desktop (12/24/12) nên footer cao
     1218px thay vì 1154px. */

  .tbtc-page .site-footer__about {
    margin-top: var(--sp-2); /* 457:2734 — cách tên 8px */
  }

  .tbtc-page .social-links {
    margin-top: var(--sp-4); /* 457:2735 — cách khối chữ 16px */
  }

  .tbtc-page .footer-contact {
    margin-top: var(--sp-4); /* 457:2710 — cách gạch cam 16px */
    gap: var(--sp-2); /* các dòng cách nhau 8px */
  }

  .tbtc-page .footer-col__list {
    margin-top: var(--sp-4); /* 457:2685 / 457:2696 — cách gạch cam 16px */
    gap: var(--sp-2);
  }

  /* Ảnh bản đồ chiếm trọn bề ngang — Figma 430:3185 (353 × 184) */
  .tbtc-page .site-footer__cert {
    width: 100%;
    height: 184px;
    margin-top: var(--sp-4); /* 457:2727 — cách khối liên hệ 16px */
    object-fit: cover;
  }

  /* ---- Thanh bản quyền — Figma 430:3198 (2 dòng canh giữa) ----------- */

  .tbtc-page .site-footer__bar-inner {
    height: auto;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding-block: var(--sp-4);
    text-align: center;
  }
}