/* Full-width hero dưới menu */
.hero-wrap{
  background:#0a3a6b; /* nền đệm dưới menu, tùy chọn */
}
.home-hero{
  max-width: 1920px; /* nếu muốn giới hạn; xóa để 100% */
  margin-inline: auto;
  position: relative;
  overflow: hidden;   
}

/* Ảnh cover theo tỉ lệ linh hoạt */
.home-hero .hero-slide{
  position: relative;
  display: none;
}
.home-hero .hero-slide:first-child{ display: block; }
.home-hero .hero-slide img{
  width: 100%;
  height: clamp(280px, 36vw, 520px); /* responsive height */
  object-fit: cover;
  display: block;
  user-select: none;
}
.home-hero .slick-arrow,
.home-hero .slick-dots{ display: none !important; }

/* Khi Slick đã init: cho phép hiển thị đầy đủ */
.home-hero.slick-initialized .hero-slide{ display: block; }
.home-hero.slick-initialized .slick-arrow{ display: flex !important; }
.home-hero.slick-initialized .slick-dots{ display: block !important; }
/* Slick arrows */
/* Ẩn icon font mặc định của slick */
.home-hero .slick-prev::before,
.home-hero .slick-next::before{ content:none !important; }

/* Nút tròn và canh giữa tuyệt đối */
.home-hero .slick-prev,
.home-hero .slick-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:999px;
  background:rgba(255,255,255,.95);
  box-shadow:0 6px 24px rgba(0,0,0,.16);
  display:flex; align-items:center; justify-content:center;
  padding:0; border:0; outline:none; z-index:2;
  color:#083970;               /* màu mũi tên (SVG dùng currentColor) */
}
.home-hero .slick-prev{ left:18px; }
.home-hero .slick-next{ right:18px; }

.home-hero .slick-prev:hover,
.home-hero .slick-next:hover{ background:#fff; }
.home-hero .slick-prev:focus,
.home-hero .slick-next:focus{ outline:2px solid rgba(8,57,112,.25); outline-offset:2px; }

/* Nếu vẫn thấy lệch do CSS cũ, ép lại line-height 0 cho button */
.home-hero .slick-prev, .home-hero .slick-next{ line-height:0; }

.slick-dotted.slick-slider{margin-bottom: 15px;}

/* Dots */
.home-hero .slick-dots{
  bottom: 10px;
}
.home-hero .slick-dots li button:before{
  font-size: 10px; color: #fff; opacity: .6;
}
.home-hero .slick-dots li.slick-active button:before{
  color: #fff; opacity: 1;
}

/* Khi đã init – chống nháy nếu bạn muốn thêm hiệu ứng */
body.hero-initialized .home-hero{ visibility: visible; }