/* ==========================================================================
   Section trusted — element trang chủ
   TỰ SINH — không sửa tay. Nguồn: figma mcp/css/sections/trusted.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.
   ========================================================================== */

/* ==========================================================================
   Đối tác & khách hàng tiêu biểu — Figma node 19:260 (1440 × 300)
   ========================================================================== */

.tbtc-page .trusted {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  padding-block: var(--sp-20);
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border-2);
}

.tbtc-page .trusted__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semibold);
  color: var(--c-navy);
  text-align: center;
}

.tbtc-page .trusted__title .is-orange {
  color: var(--c-orange);
}

.tbtc-page .trusted__list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container-w);
  padding-inline: var(--sp-6);
}

.tbtc-page .trusted__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 80px;
  flex-shrink: 0;
}

.tbtc-page .trusted__item img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

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

@media (max-width: 1279px) {
  .tbtc-page .trusted__list {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-6) var(--sp-10);
  }
}

/* ==========================================================================
   Mobile — Figma 371:2231 (393 × 176)
   Logo không xuống dòng nữa mà thành một dải ngang cuộn được, đúng như
   thiết kế (khối logo tên "Animation" 371:2279 rộng hơn màn hình, bị cắt ở
   mép phải). Thiết kế không mô tả trạng thái nghỉ nên dải được canh theo lề
   20px thay vì dính sát mép.
   ========================================================================== */

@media (max-width: 767px) {
  .tbtc-page .trusted {
    gap: var(--sp-6);
    padding-block: var(--sp-8);
  }

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

  .tbtc-page .trusted__list {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--sp-6);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .tbtc-page .trusted__list::-webkit-scrollbar {
    display: none;
  }

  .tbtc-page .trusted__item {
    width: 150px;
    height: 64px;
  }
}