/* ---------------------------------------------------------------------------
 * Đức Phát - slider cho các khối thẻ (sản phẩm, dự án, phản hồi).
 *
 * Dùng CSS scroll-snap + JS thuần, không thêm thư viện ngoài. Thẻ giữ nguyên
 * class và kiểu dáng của bộ thiết kế, slider chỉ đổi cách xếp từ lưới sang
 * hàng cuộn ngang.
 *
 * Số thẻ mỗi khung do --dp-per-desktop quyết định (đặt inline theo từng khối),
 * tablet tự giảm còn tối đa 2, điện thoại còn 1.
 * ------------------------------------------------------------------------- */

body.ducphat-site .dp-slider{position:relative;--dp-per:var(--dp-per-desktop,4)}
body.ducphat-site .dp-slider-viewport{overflow:hidden}

body.ducphat-site .dp-slider-track{
  display:flex;
  gap:var(--dp-gap,20px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
body.ducphat-site .dp-slider-track::-webkit-scrollbar{display:none}

/* Mỗi thẻ chiếm đúng 1/n khung nhìn, trừ đi phần khoảng cách giữa các thẻ */
body.ducphat-site .dp-slider-track > *{
  flex:0 0 calc((100% - var(--dp-gap,20px) * (var(--dp-per) - 1)) / var(--dp-per));
  min-width:0;
  scroll-snap-align:start;
}

/* Nút qua lại. JS chỉ bật khi nội dung thực sự tràn khung. */
body.ducphat-site .dp-slider-arrow{
  position:absolute;
  top:calc(50% - 24px);
  width:44px;height:44px;
  display:none;
  place-items:center;
  padding:0 0 4px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--navy);
  font-size:26px;line-height:1;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.14);
  z-index:2;
  transition:background .2s,color .2s;
}
body.ducphat-site .dp-slider.is-ready .dp-slider-arrow{display:grid}
body.ducphat-site .dp-slider-arrow:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
body.ducphat-site .dp-slider-arrow[disabled]{opacity:.3;cursor:default}
body.ducphat-site .dp-slider-arrow[disabled]:hover{background:#fff;color:var(--navy);border-color:var(--line)}
body.ducphat-site .dp-slider-prev{left:6px}
body.ducphat-site .dp-slider-next{right:6px}

/* Chấm chỉ trang */
body.ducphat-site .dp-slider-dots{display:none;justify-content:center;gap:8px;margin-top:20px}
body.ducphat-site .dp-slider.is-ready .dp-slider-dots{display:flex}
body.ducphat-site .dp-slider-dots button{
  width:9px;height:9px;padding:0;
  border:0;border-radius:50%;
  background:#c6d7dd;cursor:pointer;
  transition:background .2s,width .2s;
}
body.ducphat-site .dp-slider-dots button.is-active{background:var(--teal);width:24px;border-radius:5px}

@media(max-width:1024px){
  body.ducphat-site .dp-slider{--dp-per:min(var(--dp-per-desktop,4),2)}
  body.ducphat-site .dp-slider-arrow{width:38px;height:38px;font-size:22px}
}
@media(max-width:650px){
  body.ducphat-site .dp-slider{--dp-per:1}
  body.ducphat-site .dp-slider-arrow{top:auto;bottom:-6px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
  body.ducphat-site .dp-slider-dots{margin-top:16px}
}