/* === Thien An custom fixes (Saphire 27/10/2026) === */

/* 1) Giai phap (/vi/giai-phap): 3 bai / hang, giong Tin cong nghe (News)
      LUU Y: view css_class (ta-grid3) KHONG duoc in ra DOM -> target theo cau truc that */
body.path-taxonomy #block-unity-multipurpose-theme-content .views-element-container > div,
body.path-taxonomy .ta-grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  align-items: start;
}
body.path-taxonomy #block-unity-multipurpose-theme-content .views-element-container > div > header,
body.path-taxonomy #block-unity-multipurpose-theme-content .views-element-container > div > nav,
body.path-taxonomy #block-unity-multipurpose-theme-content .views-element-container > div > .pager,
body.path-taxonomy #block-unity-multipurpose-theme-content .views-element-container > div > .feed-icons,
body.path-taxonomy .ta-grid3 > header {
  grid-column: 1 / -1;
}
body.path-taxonomy #block-unity-multipurpose-theme-content .views-element-container > div > .views-row,
body.path-taxonomy .ta-grid3 > .views-row {
  width: 100%;
  max-width: 100%;
  float: none;
  margin: 0;
}
body.path-taxonomy #block-unity-multipurpose-theme-content .views-element-container > div > .views-row .node--view-mode-teaser {
  height: 100%;
  margin-bottom: 0;
}
@media (max-width: 991px) {
  body.path-taxonomy #block-unity-multipurpose-theme-content .views-element-container > div,
  body.path-taxonomy .ta-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 575px) {
  body.path-taxonomy #block-unity-multipurpose-theme-content .views-element-container > div,
  body.path-taxonomy .ta-grid3 { grid-template-columns: 1fr; }
}

/* 2) Clients: 1 HANG NGANG co nut truot (giong live thienan.co)
      owl.carousel.css dat .owl-carousel{display:none} va chi hien khi JS them .owl-loaded.
      Neu owl khong init -> fallback nay: 1 hang + scroll ngang + nut trai/phai (js/ta-clients.js) */
.view-clients.owl-carousel:not(.owl-loaded) {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  gap: 18px;
  align-items: center;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 0;
}
.view-clients.owl-carousel:not(.owl-loaded)::-webkit-scrollbar { display: none; height: 0; }
.view-clients.owl-carousel:not(.owl-loaded) > .views-row {
  flex: 0 0 calc((100% - 90px) / 6);
  min-width: 130px;
  margin: 0;
  scroll-snap-align: start;
}
.view-clients .field-content img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

/* nut truot cho fallback */
.ta-clients-wrap { position: relative; padding: 0 46px; }
.ta-clients-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #d5d5d5;
  background: #ffffff;
  color: #3092c0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ta-clients-nav:hover,
.ta-clients-nav:focus { background: #3092c0; color: #ffffff; border-color: #3092c0; }
.ta-clients-nav.ta-prev { left: 0; }
.ta-clients-nav.ta-next { right: 0; }
@media (max-width: 767px) {
  .ta-clients-wrap { padding: 0 34px; }
  .view-clients.owl-carousel:not(.owl-loaded) > .views-row { flex: 0 0 calc((100% - 54px) / 3); min-width: 90px; }
}

/* 3) Fallback banner: flexslider.css an .slides > li (chi hien khi JS init).
      Neu flexslider khong init, van hien slide dau de banner khong trang hoan toan.
      :has(.flex-viewport) = flexslider DA init => rule tu tat. */
.flexslider:not(:has(.flex-viewport)) .slides > li:first-child {
  display: block;
}

/* 4) Luoi an toan banner trang node (Saphire 27/10/2026).
      owl.carousel.css:9  .owl-carousel{display:none}
      owl.carousel.css:72 .owl-carousel.owl-loaded{display:block}
      => neu owl init loi (vd jQuery 4 thieu $.type), class .owl-loaded KHONG duoc them
         => TOAN BO anh banner bien mat (bug "3 hinh khong thay hinh" 27/10).
      Rule duoi chi ap cho field banner va CHI khi owl chua init => khi owl chay binh thuong
      (them .owl-loaded ngay trong luc init, truoc paint) rule tu tat, khong gay nhay hinh.
      => du JS loi thi anh VAN hien (progressive enhancement). */
.field--name-field-banner.owl-carousel:not(.owl-loaded) {
  display: block;
}
.field--name-field-banner.owl-carousel:not(.owl-loaded) > .field__item {
  display: block;
}

/* 5) Clients (27/10/2026): CHI giu 2 mui ten 2 ben, bo nut truot ben duoi, co autoplay.
      Pham vi: #block-views-block-clients-block-1  => KHONG anh huong banner/slider khac.
      Ly do: owl.theme.default.min.css dat .owl-theme .owl-nav{margin-top:10px;text-align:center}
             => nut truot nam BEN DUOI hang logo. Rule duoi day dua .owl-nav ra 2 ben. */
#block-views-block-clients-block-1 .view-clients {
  position: relative;
  padding: 0 42px;
}
#block-views-block-clients-block-1 .view-clients .owl-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  pointer-events: none;
  z-index: 2;
}
#block-views-block-clients-block-1 .view-clients .owl-nav button.owl-prev,
#block-views-block-clients-block-1 .view-clients .owl-nav button.owl-next {
  pointer-events: auto;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #d5d5d5;
  background: #ffffff;
  color: #3092c0;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
#block-views-block-clients-block-1 .view-clients .owl-nav button.owl-prev:hover,
#block-views-block-clients-block-1 .view-clients .owl-nav button.owl-next:hover,
#block-views-block-clients-block-1 .view-clients .owl-nav button.owl-prev:focus,
#block-views-block-clients-block-1 .view-clients .owl-nav button.owl-next:focus {
  background: #3092c0;
  color: #ffffff;
  border-color: #3092c0;
}
/* nav bi owl tat (breakpoint < 1000px: nav:false) => an han, khong hien nut chet */
#block-views-block-clients-block-1 .view-clients .owl-nav.disabled {
  display: none;
}
/* an nut truot cua script fallback (chi ton tai khi owl khong init) */
#block-views-block-clients-block-1 .ta-clients-nav {
  display: none;
}
/* an pager neu sau nay view bat phan trang */
#block-views-block-clients-block-1 .pager {
  display: none;
}
@media (max-width: 767px) {
  #block-views-block-clients-block-1 .view-clients { padding: 0 0; }
  #block-views-block-clients-block-1 .view-clients .owl-nav button.owl-prev,
  #block-views-block-clients-block-1 .view-clients .owl-nav button.owl-next {
    width: 30px;
    height: 30px;
    font-size: 20px;
  }
}