/* ============================================================
   TAMI Banner Slider (Elementor widget)
   Port từ .hero-slider của bản prototype app/public/html/
   ============================================================ */

.tami-banner {
  /* Chỉ --tami-ovl có thể ghi đè inline theo từng slide (control "Màu phủ riêng") */
  --tami-ovl: 226, 24, 31;   /* màu phủ dạng "r, g, b" */
  --tami-ovl-a: 1;           /* độ đậm lớp phủ màu */
  --tami-dark-a: 1;          /* độ đậm lớp tối */

  position: relative;
  background: rgb(var(--tami-ovl));
  overflow: hidden;
}

/* Bỏ margin mặc định của slick-theme khi bật dots */
.tami-banner__slider.slick-dotted.slick-slider { margin-bottom: 0; }

/* Trước khi slick khởi tạo: chỉ hiện slide đầu, tránh nhảy layout */
.tami-banner__slider:not(.slick-initialized) .tami-banner__slide + .tami-banner__slide { display: none; }

.tami-banner__slide {
  position: relative;
  overflow: hidden;
  background: rgb(var(--tami-ovl));
  color: #fff;
  min-height: 700px;
  display: flex;
  align-items: center;
}

/* Ghi đè display:block của slick để căn giữa nội dung theo chiều dọc */
.tami-banner__slider .slick-slide { display: flex; }
.tami-banner__slider .slick-list,
.tami-banner__slider .slick-track { height: 100%; }

/* ---------- Ảnh nền ---------- */
.tami-banner__bg {
  position: absolute;
  inset: 0;
  /* --tami-bg-pos / --tami-bg-pos-m được set inline theo từng slide */
  background-position: var(--tami-bg-pos, center center);
  background-size: cover;
  background-repeat: no-repeat;
}

/* Lật ngang để nhân vật trong ảnh dạt về nửa phải, chừa chỗ cho chữ bên trái */
.tami-banner__bg--flip { transform: scaleX(-1); }

/* ---------- Lớp phủ ----------
   Đặc ở dải trái để đọc chữ, tan dần sang phải để lộ nhân vật trong ảnh.
   Kèm 1 lớp tối nhẹ toàn khung giúp ảnh sâu và chữ trắng luôn nổi. */
.tami-banner__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(10, 12, 25, calc(.35 * var(--tami-dark-a))) 0%,
      rgba(10, 12, 25, calc(.15 * var(--tami-dark-a))) 45%,
      rgba(10, 12, 25, calc(.40 * var(--tami-dark-a))) 100%),
    linear-gradient(90deg,
      rgba(var(--tami-ovl), calc(.97 * var(--tami-ovl-a))) 0%,
      rgba(var(--tami-ovl), calc(.90 * var(--tami-ovl-a))) 3%,
      rgba(var(--tami-ovl), calc(.68 * var(--tami-ovl-a))) 15%,
      rgba(var(--tami-ovl), calc(.38 * var(--tami-ovl-a))) 43%,
      rgba(var(--tami-ovl), calc(.14 * var(--tami-ovl-a))) 50%,
      rgba(var(--tami-ovl), 0) 94%);
}

/* ---------- Nội dung ---------- */
.tami-banner__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1230px;
  margin: 0 auto;
  padding: 0 15px;
}

.tami-banner__content {
  max-width: 620px;
  padding: 70px 0;
}

.tami-banner .tami-banner__title {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 24px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .18);
}

.tami-banner__desc {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  margin-bottom: 42px;
  opacity: .97;
}

.tami-banner__btn {
  display: inline-block;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
  text-decoration: none;
  padding: 18px 44px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #e2181f !important;
  cursor: pointer;
  transition: .25s ease;
  white-space: nowrap;
}

.tami-banner__btn:hover,
.tami-banner__btn:focus {
  background: #ffe9ea;
  color: #e2181f;
  text-decoration: none;
}

/* ---------- Điều hướng ---------- */
.tami-banner__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: .25s;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.tami-banner__arrow:hover {
  background: #fff;
  color: #e2181f !important;
  border-color: #fff;
}

.tami-banner__arrow--prev { left: 24px; }
.tami-banner__arrow--next { right: 24px; }

.tami-banner__slider .slick-dots {
  position: absolute;
  bottom: 28px;
  left: 0;
  width: 100%;
  z-index: 6;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.tami-banner__slider .slick-dots li {
  width: auto;
  height: auto;
  margin: 0;
  background: transparent;
  list-style: none;
}

.tami-banner__slider .slick-dots li button {
  width: 11px;
  height: 11px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .85);
  background: transparent;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
  transition: .25s;
}

.tami-banner__slider .slick-dots li button::before { display: none; }

.tami-banner__slider .slick-dots li.slick-active button {
  background: #fff;
  width: 30px;
  border-radius: 999px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1199px) {
  .tami-banner__arrow--prev { left: 12px; }
  .tami-banner__arrow--next { right: 12px; }
}

@media (max-width: 991px) {
  .tami-banner__slide { min-height: 460px; }
  .tami-banner__slider .slick-dots { bottom: 22px; }

  /* Ảnh nền dịch sang phải để nhân vật không bị chữ đè lên */
  .tami-banner__bg { background-position: var(--tami-bg-pos-m, 72% center); }

  /* Đỏ đậm ở dải trái (nền chữ), nhạt dần để lộ ảnh ở nửa phải.
     Lớp tối mỏng thay phần đỏ bị bớt đi, giữ chữ trắng vẫn đọc được. */
  .tami-banner__overlay {
    background:
      linear-gradient(180deg,
        rgba(10, 12, 25, calc(.22 * var(--tami-dark-a))) 0%,
        rgba(10, 12, 25, calc(.34 * var(--tami-dark-a))) 100%),
      linear-gradient(90deg,
        rgba(var(--tami-ovl), calc(.92 * var(--tami-ovl-a))) 0%,
        rgba(var(--tami-ovl), calc(.74 * var(--tami-ovl-a))) 32%,
        rgba(var(--tami-ovl), calc(.42 * var(--tami-ovl-a))) 62%,
        rgba(var(--tami-ovl), calc(.12 * var(--tami-ovl-a))) 88%,
        rgba(var(--tami-ovl), 0) 100%);
  }

  .tami-banner__desc { text-shadow: 0 1px 10px rgba(0, 0, 0, .28); }
}

@media (max-width: 767px) {
  .tami-banner__slide { min-height: 400px; }
  .tami-banner__content { max-width: 100%; }
  .tami-banner__slider .slick-dots { bottom: 18px; }
  .tami-banner .tami-banner__title { font-size: 25px; margin-bottom: 10px; }
  .tami-banner__desc { font-size: 14px; }
  .tami-banner__desc br { display: none; }
  .tami-banner__btn { padding: 14px 32px; font-size: 13px; }

  /* Mobile: khối chữ chiếm gần hết chiều ngang nên vẫn cần đỏ đậm ở trái,
     nhưng nhả nhanh về phải để thấy ảnh; lớp tối bù lại phần tương phản. */
  .tami-banner__overlay {
    background:
      linear-gradient(180deg,
        rgba(10, 12, 25, calc(.26 * var(--tami-dark-a))) 0%,
        rgba(10, 12, 25, calc(.40 * var(--tami-dark-a))) 100%),
      linear-gradient(90deg,
        rgba(var(--tami-ovl), calc(.90 * var(--tami-ovl-a))) 0%,
        rgba(var(--tami-ovl), calc(.68 * var(--tami-ovl-a))) 38%,
        rgba(var(--tami-ovl), calc(.34 * var(--tami-ovl-a))) 70%,
        rgba(var(--tami-ovl), calc(.10 * var(--tami-ovl-a))) 100%);
  }
}