/* ==========================================================================
   BrandKeyPro — Homepage: News (Tin tức - Sự kiện)
   ========================================================================== */

.news{

  --news-gap: 1.875rem;           /* khoảng cách giữa các bài */
  --news-per: 3;                  /* desktop/tablet: 3 bài / lượt */

  /* Biến mũi tên của section News */
  --news-arrow-size: 3.75rem;     /* 60px */
  --news-arrow-offset: 1.875rem;  /* 30px */

  /* Map sang biến chung để .nav-arrow dùng lại được ở nhiều nơi */
  --nav-size: var(--news-arrow-size);
  --nav-offset: var(--news-arrow-offset);
}


/* ======= Slider layout (desktop/tablet) ======= */
.news-wrap{ position:relative; }
.news-viewport{ overflow:hidden; }
.news-track{
  display:flex;
  gap:var(--news-gap);
  transition:transform .35s ease;
  will-change:transform;
}

/* 3 cột nhìn thấy cùng lúc, mỗi lần trượt 1 card */
.news-card{
  flex:0 0 calc(
    (100% - (var(--news-gap) * (var(--news-per) - 1))) / var(--news-per)
  );
  text-align:left;
}

/* Ảnh 16:9 bo góc 0.3125rem */
.news-thumb{
  position:relative;
  display:block;
  width:100%;
  padding-top:56.25%;             /* 16:9 */
  border-radius:.3125rem;
  overflow:hidden;
  background:#e9ecef;
}
.news-thumb > *{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* Tiêu đề + excerpt */
.news-title{
  margin: 1.25rem 0 1rem 0;
  font-weight: 500;
  line-height: 1.35;
  font-size: 1.5rem;
}
.news a{ color:inherit; text-decoration:none; }
.news a:hover .news-title{ color:var(--primary); }

.news-excerpt{
  margin:0;
  line-height:1.75;
  color:#222;
}

/* ======= Prev/Next arrows (dùng chung) ======= */
/* Khoảng cách mũi tên -> mép ảnh = 1.875rem (desktop) */
.nav-arrow{
  position:absolute;
  top:50%;
  background:transparent;
  border:0;
  padding:0;
  width:var(--nav-size, 3.75rem);      /* Fallback cho mọi section */
  height:var(--nav-size, 3.75rem);
  display:flex;
  align-items:center;
  line-height:1;
  cursor:pointer;
  color:var(--primary);
  opacity:.2;
  font-size:var(--nav-size, 3.75rem);
  z-index:2;
}
.nav-prev{
  left:0;
  justify-content:flex-end;
  transform: translate(calc(-100% - var(--nav-offset, 1.875rem)), -50%);
}
.nav-next{
  right:0;
  justify-content:flex-start;
  transform: translate(calc(100% + var(--nav-offset, 1.875rem)), -50%);
}
.nav-arrow:hover{ opacity:1; }

/* Ẩn hoàn toàn khi không click được nữa */
.nav-arrow[disabled],
.nav-arrow.is-disabled{
  display:none !important;
}

/* Đảm bảo vùng chứa Featured là mốc định vị tuyệt đối cho mũi tên */
.featured .product-wrap{ position:relative; }

/* ===================== TABLET ===================== */
/* ≤64rem (~1024px): đưa mũi tên VÀO TRONG khung, không bị tràn */
@media (max-width: 64rem){
  .news{
    --news-arrow-size: 3rem;      /* ~48px, gọn hơn một chút */
  }

  /* Làm nổi icon Prev/Next trên nền ảnh */
.news .nav-arrow{
  color: #fff;
  opacity: 1;
}

/* Bóng cho glyph của Font Awesome (khuyến nghị) */
.news .nav-arrow i{
  text-shadow:
    0 .125rem .375rem rgba(0,0,0,.45),  /* bóng rơi */
    0 0 .375rem rgba(0,0,0,.35);        /* quầng nhẹ */
}

/* (Tùy chọn) tăng nhẹ khi hover */
.news .nav-arrow:hover i{
  text-shadow:
    0 .1875rem .5rem rgba(0,0,0,.5),
    0 0 .5rem rgba(0,0,0,.4);
}


  /* Neo mũi tên trong .news-wrap, chỉ dịch theo trục Y
     Ghi đè hoàn toàn transform X của block chung */
  .news .nav-prev{
    right: auto;
    transform: translateY(-50%) !important;
    z-index: 5;
  }
  .news .nav-next{
    left: auto;
    transform: translateY(-50%) !important;
    z-index: 5;
  }
}

/* ===================== MOBILE ===================== */
/* ≤40rem (~640px): danh sách 1 cột, chỉ giữ 3 tin đầu */
@media (max-width: 48rem){
  /* tắt slider, cho tràn để hiện đủ 3 bài */
  .news-viewport{ overflow:visible; }

  .news-track{
    display:grid;
    grid-template-columns: 1fr;
    row-gap: var(--news-gap);
    column-gap: 0;
    transform: none !important;
  }

  .news-card{
    flex: 1 1 auto;
    width: 100%;
  }

  /* CHỈ GIỮ 3 TIN ĐẦU */
  .news-card:nth-child(n+4){ display: none !important; }

  /* Ẩn mũi tên trên mobile */
  .nav-arrow{ display: none !important; }
}