/* banner-slider-mht.css — phần RIÊNG của MH Travel cho bộ chuyển ảnh banner.
   Tải SAU css/banner-slider.css (bản trích nguyên văn từ Web/cam-nang.php).

   Tách hẳn ra file này vì bản trích sinh lại mỗi lần chạy bộ trích. */

/* ── Gỡ những thứ chỉ đúng với bố cục bên Ái Vân ─────────────────────────
   Bản gốc là khối hero chiếm gần trọn màn hình: min-height 500px và kéo lên
   -68px để chui dưới thanh đầu trang trong suốt của họ. Bên này banner là dải
   ngang bình thường nằm dưới thanh đầu trang đặc — để nguyên hai luật đó là
   banner cao vống lên và trồi lên che mất menu. */
.m-bn.hero-slider,
.m-bia.hero-slider {
    min-height: 0;
    margin-top: 0;
    background-color: transparent;
}

/* Lớp bọc các ảnh — nằm dưới cùng, không chắn chuột.
   Viết kèm tên khối cha (.m-bia > .hs-lop) chứ KHÔNG viết trống một mình:
   bien.css có luật .m-bia > * { position: relative } cùng độ chọn lọc mà nạp
   SAU, nên nó thắng — lớp ảnh mất position:absolute, co lại 0×0 và không ảnh
   nào hiện. Đo mới thấy, nhìn mắt thường chỉ thấy "banner không đổi ảnh". */
.m-bia > .hs-lop,
.m-bn > .hs-lop,
.hs-lop {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
/* Phần chữ và nút phải nổi trên lớp ảnh */
.m-bn.hero-slider > .m-bao,
.m-bia.hero-slider > .m-bao { position: relative; z-index: 2; }

/* Lớp phủ tối của từng khối vẫn phải nằm TRÊN ảnh mới, dưới chữ.
   Không nâng lên thì ảnh sáng làm chữ trắng mất hút. */
.m-bn.m-bn-anh.hero-slider::after,
.m-bia.hero-slider::after,
.m-bia.hero-slider::before { z-index: 1; }

/* ── Dải chấm · ô đếm · thanh tiến độ ────────────────────────────────────
   Đặt trong lòng khối, nằm trên tất cả. Bản gốc neo chúng theo khối hero toàn
   màn hình nên toạ độ khác. */
.m-bn .hs-dots, .m-bia .hs-dots {
    position: absolute; left: 50%; bottom: 14px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex; gap: 8px;
    margin: 0;
}
.m-bn .hs-dot, .m-bia .hs-dot {
    width: 9px; height: 9px; padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.75);
    background: rgba(255,255,255,.28);
    cursor: pointer;
    transition: background .25s, transform .25s;
}
.m-bn .hs-dot.active, .m-bia .hs-dot.active {
    background: #fff;
    transform: scale(1.25);
}
.m-bn .hs-dot:hover, .m-bia .hs-dot:hover { background: rgba(255,255,255,.7); }

.m-bn .hs-counter, .m-bia .hs-counter {
    position: absolute; right: 18px; bottom: 14px;
    z-index: 3;
    font-size: 12px; font-weight: 700; letter-spacing: .1em;
    color: rgba(255,255,255,.82);
    font-variant-numeric: tabular-nums;   /* số không nhảy bề ngang khi đổi */
}

/* Thanh tiến độ mảnh chạy dưới đáy — cho biết bao giờ đổi ảnh */
.m-bn .hs-progress, .m-bia .hs-progress {
    position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
    z-index: 3;
    background: linear-gradient(90deg, var(--ngoc, #24b6c9), var(--do, #e84038));
}
.m-bn .hs-progress.run, .m-bia .hs-progress.run {
    animation: mhtBnTien 5.8s linear forwards;
}
@keyframes mhtBnTien { from { width: 0; } to { width: 100%; } }

@media (max-width: 620px) {
    .m-bn .hs-counter, .m-bia .hs-counter { display: none; }  /* màn hẹp: bớt chữ vụn */
    .m-bn .hs-dots, .m-bia .hs-dots { bottom: 10px; }
}

/* Máy bật "giảm chuyển động": không đổi ảnh, cũng không chạy thanh tiến độ */
@media (prefers-reduced-motion: reduce) {
    .hero-slide.active { animation: none; }
    .hero-slide { transition: none; }
    .m-bn .hs-progress.run, .m-bia .hs-progress.run { animation: none; width: 100%; }
}