/*!
 * logos.css — dải logo đối tác (Figma Frame 70).
 *
 * TÁCH RIÊNG vì khối này dùng ở nhiều nơi, không riêng trang chủ: section 10 của
 * trang chủ, element "Libero · Đối tác" chèn được vào bất kỳ trang nào, và các
 * section Theme Builder của bản redesign (.lb-explore .lb-logos).
 *
 * Trước đây có HAI bản: một ở home.css, một chép lại trong Avada > Theme Options
 * kèm !important. Sửa số đo theo Figma ở một bên thì bên kia không đổi — và vì
 * bản trong DB có !important nên nó thắng, nghĩa là sửa file không ăn thua mà
 * không có gì báo. Giữ đúng MỘT bản ở đây.
 *
 * Phụ thuộc: tokens.css (--lb-white, --lb-sans-xs, --lb-n5).
 */

.lb-logos { display: flex; flex-direction: column; gap: 42px; overflow: hidden; }

/*
 * Section Đối tác (partial home/10-doitac.php, data-section="10-doitac"): Figma
 * Frame 70 vẽ hai dải logo chạy HẾT bề ngang khung 1600, tiêu đề vẫn ở cột 1200.
 * Partial đặt .lb-logos trong .lb-container nên kéo riêng dải logo tràn viền bằng
 * 100vw (body đã overflow-x:hidden, không sinh cuộn ngang). Bám data-section chứ
 * không bám .lb-logos trần: dải logo một hàng của trang sản phẩm (.lb-sp-logobar)
 * và Khám phá chi tiết (.lb-logos--plain) dùng cùng lớp nhưng KHÔNG tràn viền.
 * Áp cho cả 4 nơi dùng section này: Trang chủ, Khám phá, Newsroom, Giới thiệu
 * (khách yêu cầu 15/09/2026).
 */
[data-section="10-doitac"] .lb-logos {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.lb-logos__row { display: flex; gap: 24px; width: max-content; animation: lb-marquee 42s linear infinite; }
.lb-logos__row--rev { animation-direction: reverse; }
.lb-logos:hover .lb-logos__row { animation-play-state: paused; }

/*
 * Figma Frame 70 — mỗi logo là một ô 165 x 67, bo 8, viền 1px #1B1B38 ở 10%,
 * và ẢNH GIỮ NGUYÊN MÀU.
 *
 * Trước đây ở đây có filter: grayscale(1) + opacity: .62, chỉ trả lại màu khi
 * rê chuột. Đó là quy ước quen thuộc của nhiều trang "đối tác", nhưng thiết kế
 * này không dùng: bảng màu thương hiệu của từng đối tác chính là thứ khách nhận
 * ra. Làm xám đi là mất luôn phần nhận diện đó, và trên điện thoại thì không có
 * chuột nên logo không bao giờ trở lại màu thật.
 *
 * Ô rộng cố định 165px cho MỌI logo, kể cả logo hẹp (IC 39px, Viettel 123px):
 * object-fit: contain canh giữa ảnh trong ô, nên hàng logo giữ đúng nhịp đều
 * như Figma thay vì thò thụt theo bề ngang từng file.
 */
/*
 * Khung thẻ do CSS vẽ, KHÔNG nằm trong file ảnh.
 *
 * Bộ logo đang dùng là bản 330 x 134 (gấp đôi khung 165 x 67 của Figma) dựng từ
 * ảnh nguồn trong file thiết kế, nền trong suốt và không kèm khung. Trình duyệt
 * vẽ khung nên viền luôn sắc nét ở mọi mật độ điểm ảnh, và đổi màu viền sau này
 * chỉ là sửa một dòng CSS thay vì xuất lại 18 file.
 *
 * Ảnh 2x là điểm mấu chốt: màn hình Retina có devicePixelRatio = 2, khung rộng
 * 165 điểm CSS tức 330 điểm vật lý. Bản 1x cũ chỉ có 165 điểm nên bị kéo giãn
 * gấp đôi — đó là toàn bộ lý do trước đây logo trông mờ.
 */
/*
 * Selector cố tình dài hơn mức cần thiết: .lb-logos__row thêm vào chỉ để nâng
 * độ ưu tiên lên (0,2,1).
 *
 * home.css có .lb-home img { height: auto } — cũng (0,1,1) như .lb-logos img.
 * Khi hai khối còn nằm chung một file thì khối đối tác đứng sau nên thắng; tách
 * ra file riêng là thứ tự nạp quyết định, và logos.css nạp TRƯỚC home.css nên
 * height: auto thắng, cả 36 logo tụt xuống 2px. Không có lỗi nào báo.
 *
 * File dùng chung thì không được phụ thuộc vào việc nó nạp trước hay sau file
 * của trang, nên phải thắng bằng độ ưu tiên chứ không bằng thứ tự.
 */
.lb-logos .lb-logos__row img,
.lb-logos .lb-logos__row .lb-logo {
  width: 165px;
  height: 67px;
  object-fit: contain;
  flex: 0 0 auto;
  border: 1px solid rgba(27, 27, 56, .1);
  border-radius: 8px;

  /*
   * Có giá trị dự phòng vì token trong tokens.css KHÔNG khai ở :root — chúng bọc
   * trong .lb-home/.lb-header/.lb-mmenu/.lb-product. Dải logo này còn chạy trong
   * .lb-explore (các section Theme Builder), nơi var() không kế thừa được: thiếu
   * dự phòng thì nền ô trở thành trong suốt mà không có lỗi nào báo.
   */
  background: var(--lb-white, #FFFFFF);

  /* Avada đặt img { max-width: 100% }; ô logo rộng cố định nên phải gỡ trần đó. */
  max-width: none;
}

.lb-logos .lb-logos__row .lb-logo {
  display: grid;
  place-items: center;
  font-size: var(--lb-sans-xs, 11.11px);
  color: var(--lb-n5, rgba(15, 15, 46, .5));
}

@keyframes lb-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .lb-logos__row { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}