/* ==========================================================================
   Mẫu 5 · Slider ảnh công trình (m5-slider)
   Dùng kèm canvas/m5/slider.html (markup) và canvas/m5/slider.js (hành vi).
   Không phụ thuộc token của trang; nếu trang có --g, --s*, --sans thì dùng lại.
   ========================================================================== */

/* ---- Hero bao ngoài (tuỳ chọn): ảnh nằm sau, chữ nằm trên ---------------- */
.m5-hero{
  position:relative;isolation:isolate;overflow:hidden;color:#fff;
  height:clamp(520px,72vh,660px);          /* cố định → không giật bố cục */
  background:#0b2a5b;
}
.m5-hero > .m5-slider{position:absolute;inset:0;aspect-ratio:auto;height:auto}
/* Lớp phủ tối (scrim) để chữ đọc rõ: nằm trong từng ảnh (::after) để chú thích của ảnh
   vẫn ở trên lớp phủ; trái đậm → phải trong, thêm vệt dưới cho nút/chú thích.
   Thứ tự lớp: ảnh + scrim (z 0–1) < .m5-hero__content (z 2) < nút điều khiển (z 3). */
.m5-hero .m5-slider__slide::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(6,20,45,.9) 0%,rgba(6,20,45,.76) 34%,rgba(6,20,45,.3) 56%,rgba(6,20,45,0) 76%),
    linear-gradient(0deg,rgba(6,20,45,.6),rgba(6,20,45,0) 38%);
}
.m5-hero__content{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  max-width:var(--wrap,1200px);margin:0 auto;
  padding:var(--s7,48px) var(--g,32px) calc(var(--s7,48px) + 56px);
}
.m5-hero__content > *{max-width:560px}

/* ---- Slider -------------------------------------------------------------- */
.m5-slider{
  position:relative;width:100%;
  aspect-ratio:16/7;                        /* hộp tỉ lệ cố định khi dùng độc lập */
  background:#0b2a5b;overflow:hidden;
  touch-action:pan-y;                       /* cho phép cuộn dọc, ta tự xử lý vuốt ngang */
}
.m5-slider__track{position:absolute;inset:0;margin:0;padding:0}
.m5-slider__slide{
  position:absolute;inset:0;margin:0;
  display:none;opacity:0;                   /* ảnh chưa dùng: không hiển thị, không tải */
  transition:opacity 1.1s ease;
}
.m5-slider__slide.is-active{display:block;opacity:1;z-index:1}
/* is-next: ảnh kế tiếp đã hiển thị (trong suốt) để tải trước; is-leaving: ảnh cũ nằm dưới
   giữ nguyên trong lúc ảnh mới mờ dần hiện lên phía trên → không bị tối giữa chừng */
.m5-slider__slide.is-next{display:block}
.m5-slider__slide.is-leaving{display:block;opacity:1;z-index:0;transition:none}
.m5-slider__fig{margin:0}
.m5-slider .m5-slider__slide img{          /* !important: page rules such as img[width][height]{height:auto} must not shrink the photo */
  position:absolute;inset:0;width:100% !important;height:100% !important;max-width:none;display:block;
  object-fit:cover;object-position:var(--pos,50% 50%);
}

/* Chú thích tên công trình: góc phải dưới, trên hàng nút */
.m5-slider__cap{
  position:absolute;z-index:1;right:var(--g,32px);bottom:84px;
  max-width:min(42ch,60%);text-align:right;
  font:400 var(--fs-xs,13px)/1.4 var(--sans,system-ui,sans-serif);
  color:#e3eaf6;text-shadow:0 1px 2px rgba(0,0,0,.7);
  background:rgba(6,20,45,.55);padding:4px 10px;border-radius:6px;
}
.m5-slider__cap b{display:block;color:#fff;font-size:var(--fs-sm,14px);font-weight:600}
/* Ghi công ảnh (bắt buộc với ảnh CC BY / CC BY-SA): nhỏ, dưới tên công trình */
.m5-slider__cap .m5-slider__credit{display:block;margin-top:1px;font-size:11px;line-height:1.35;color:#d3dced}

/* ---- Nút điều khiển -------------------------------------------------------- */
.m5-slider__controls{
  position:absolute;z-index:3;right:var(--g,32px);bottom:var(--s5,24px);
  display:flex;align-items:center;gap:6px;
  font:600 var(--fs-sm,14px)/1 var(--sans,system-ui,sans-serif);
}
.m5-slider__controls[hidden]{display:none}
.m5-slider__btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border-radius:999px;cursor:pointer;
  color:#fff;background:rgba(6,20,45,.72);border:1px solid rgba(255,255,255,.4);
  -webkit-tap-highlight-color:transparent;
}
.m5-slider__btn:hover{background:rgba(6,20,45,.92);border-color:#fff}
.m5-slider__btn svg{width:20px;height:20px;fill:currentColor}
.m5-slider__btn .i-play{display:none}
.m5-slider__toggle[aria-pressed="true"] .i-pause{display:none}
.m5-slider__toggle[aria-pressed="true"] .i-play{display:block}

.m5-slider__dots{display:flex;align-items:center;margin:0 -4px;padding:0;list-style:none}
.m5-slider__dot{
  position:relative;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
}
.m5-slider__dot::before{
  content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;
  border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(6,20,45,.55);
  transition:transform .2s,background .2s;
}
.m5-slider__dot:hover::before{background:#fff}
.m5-slider__dot[aria-current="true"]::before{background:var(--gold,#f2b84b);transform:scale(1.35)}
/* Mỗi chấm có vùng chạm 44×44 px.
   Trên màn hẹp chấm được thay bằng bộ đếm “2 / 8” để vẫn đủ chỗ cho nút 44×44. */
.m5-slider__count{display:none;min-width:48px;text-align:center;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7)}

.m5-slider :focus-visible{outline:3px solid var(--gold,#f2b84b);outline-offset:2px}

.m5-slider__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- Màn hẹp: ảnh xếp trên, chữ xếp dưới (giống Mẫu 5 di động) ------------ */
@media (max-width:720px){
  section.m5-hero.m5-hero{height:auto;padding:0 !important;background:var(--band,#0b2a5b)}
  .m5-hero > .m5-slider{position:relative;inset:auto;aspect-ratio:auto;height:max(220px,56vw)}
  .m5-hero__content{height:auto;padding:var(--s6,32px) var(--g,16px) var(--s7,48px)}
  .m5-slider__slide::after,
  .m5-hero .m5-slider__slide::after{        /* chỉ còn vệt tối dưới đáy ảnh cho chú thích + nút */
    content:"";position:absolute;inset:auto 0 0 0;height:96px;pointer-events:none;
    background:linear-gradient(0deg,rgba(6,20,45,.78),rgba(6,20,45,0));
  }
  .m5-slider__cap{left:var(--g,16px);right:auto;bottom:16px;max-width:calc(100% - 200px);text-align:left}
  .m5-slider__cap b{font-size:var(--fs-sm,14px)}
  .m5-slider__cap span{display:none}
  .m5-slider__cap .m5-slider__credit{font-size:10px}
  .m5-slider__controls{right:8px;bottom:6px;gap:2px}
}
@media (max-width:720px){
  .m5-slider__dots{display:none}
  .m5-slider__count{display:block}
}

/* ---- Giảm chuyển động: không mờ dần ------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .m5-slider__slide,.m5-slider__dot::before{transition:none}
}