/* ====== Hero ====== */
.ds-slider{max-width:1280px;position:relative;}
.ds-hero{position:relative; border-radius:12px; overflow:hidden; background:#fff;border:5px solid #013da1;}
.ds-hero-img{  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;}
.ds-card{
  position:absolute; left:10px; bottom:10px; right:24px;
  background: rgba(255, 255, 255, 0.85); color:#0f172a; border-radius:18px; padding:5px 15px;
  box-shadow:0 12px 30px rgba(0,0,0,.35); max-width:520px;
}
.ds-title{margin:0 0 6px; font-weight:800; font-size:32px; color:#0b3b8b;}
.ds-desc{margin:0 0 12px; color:#000000; line-height:1.5; font-size:15px;}
.ds-cta{
  display:inline-flex;   width: 100%;   /* chiếm toàn bộ chiều ngang khối cha */
align-items:center; justify-content:center; background:#ffbc00; color:#fff !important;
  border-radius:999px; padding:5px 18px; font-weight:700; text-decoration:none; box-shadow:0 8px 16px rgba(37,99,235,.25);
}
.ds-cta:hover{background:#173f97}

/* === THUMB CAROUSEL: ghim về góc phải của slider === */
.ds-thumbs.carousel{
  position:absolute;
  bottom:0px;
  right:auto;       /* ghim sát mép phải */
  left:720px;        /* bỏ neo bên trái */
  height:211px;
  width:1080px;     /* bề rộng khối thumb (hiển thị ~4 items). Tùy ý chỉnh */
  overflow:hidden;
  z-index:20;
}
.ds-thumbs.carousel .list{ position:relative; width:100%; height:94%; }
.ds-thumbs.carousel .list .item{
  width:135px; height:135px; position:absolute;
  top:65%; transform:translateY(-70%); left:70%;
  border-radius:12px;background-position:50% 50%; background-size:cover;
  z-index:100; transition:1s;
}
/* item nền + active */
.ds-thumbs.carousel .list .item:nth-child(1),
.ds-thumbs.carousel .list .item:nth-child(2){
  top:50%; left:0; transform:translateY(-50%); border-radius:16px;
  width:180px; height:180px;border:1px solid #013da1
}
/* xếp tiếp về phải */
.ds-thumbs.carousel .list .item:nth-child(3){ left:220px; }
.ds-thumbs.carousel .list .item:nth-child(4){ left:420px; }
.ds-thumbs.carousel .list .item:nth-child(5){ left:620px; }
.ds-thumbs.carousel .list .item:nth-child(6){ left:820px; }
.ds-thumbs.carousel .list .item:nth-child(n+7){ left:1020px; opacity:0; }

/* Nút ở ngoài, căn giữa */
.ds-controls{
  position: relative;
  display: flex;
  justify-content: left;
  gap: 12px;
  margin-top: 20px;
}

.ds-controls .prev,
.ds-controls .next{
  width: 44px;
  height: 37px;
  border-radius: 999px;
  border: 0;
  background: #013da1;
  color: #fff;
  cursor: pointer;
  display: inline-flex;      
  align-items: center;
  justify-content: center;
  padding: 0;                
  line-height: 0;            
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.ds-controls .prev:hover,
.ds-controls .next:hover{ background:#0d47c7; }

.ds-controls .prev i,
.ds-controls .next i{
  pointer-events: none;
  font-size: 20px;           
  line-height: 1;           
}


/* Responsive */
/*@media (max-width: 900px){
  .ds-card{position:static; box-shadow:none; max-width:none;border-radius:0px; background:#fff}
  .ds-thumbs.carousel{position:static; width:760px; height:260px; margin-top:14px;}
   .ds-controls {margin-top:0px}
  .ds-thumbs.carousel .list .item:nth-child(1),
  .ds-thumbs.carousel .list .item:nth-child(2){ width:230px; height:220px;border:1px solid #013da1; border-radius:12px; }
  .ds-thumbs.carousel .list .item:nth-child(3){ width:230px; height:220px; }
  .ds-thumbs.carousel .list .item:nth-child(4){ width:230px; height:220px; }
  .ds-thumbs.carousel .list .item:nth-child(5){ width:230px; height:220px; }
  .ds-thumbs.carousel .list .item:nth-child(6){ width:230px; height:220px; }
  .ds-thumbs.carousel .list .item:nth-child(n+7){ left:1040px; }
  .ds-thumbs.carousel{bottom:4px!important;}
}
*/
/* ===== Mobile: không crop ảnh + text gọn, không che nội dung ===== */
/* ===== MOBILE LAYOUT (≤640px): hero không crop, card ngoài ảnh, UI gọn ===== */
/* ===== MOBILE (≤640px): Hero → Text → Thumbs → Controls ===== */
@media (max-width: 640px){

  /* HERO: hiển thị đủ ảnh, không bị cắt */
  .ds-hero{
    position: relative;
    display: block !important;    /* đảm bảo là flow bình thường */
    overflow: hidden;
    border-radius: 12px;
    background: #fff;             /* letterbox khi ảnh không đầy */
  }
  .ds-hero-img{
    display: block;
    width: 100%;
    height: auto;                 /* giữ tỉ lệ tự nhiên */
    max-height: 56vh;             /* chừa chỗ cho text + thumbs trên 1 màn */
  }
  /* (bỏ overlay/gradient nếu bạn đã thêm trước đó) */
  .ds-hero::after{ content:none !important; }

  /* CARD: text nằm NGAY SAU ảnh hero (không đè lên) */
.ds-card {
  position: static !important;       /* nằm dưới ảnh */
  margin-top: 0px;
  padding: 8px 8px;                /* gọn nhưng có khoảng cách trong */
  background: #ffffff !important;    /* NỀN TRẮNG như yêu cầu */
  border-radius: 10px;
  border: 1px solid #e2e8f0;         /* viền mỏng nhẹ */
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  max-width: 100%;
}
  .ds-title{
    font-size: 14px;
    line-height: 1.3;
    margin: 0 0 4px;
    color: #0b3b8b;
  }
  .ds-desc{
    font-size: 12px;
    line-height: 1.4;
    margin: 0 0 6px;
    color: #475569;
    display: -webkit-box;
    -webkit-line-clamp: 2;        /* 2 dòng cho dễ đọc */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ds-cta{
    font-size: 15px !important;   /* theo yêu cầu */
    padding: 5px 18px !important;
    border-radius: 999px;
    background: #ffbc00;
    color: #fff !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(37,99,235,.25);
  }
  .ds-cta:hover{ background:#173f97; }

  /* THUMBS: ngay sau text, cuộn ngang, 100x100, giữ animation */
  .ds-thumbs.carousel{
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 10px !important;
    padding: 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ds-thumbs.carousel::-webkit-scrollbar{ display: none; }

  .ds-thumbs.carousel .list{
    position: relative !important;
    display: flex;
    gap: 8px;
    width: max-content;
    height: auto !important;
    scroll-snap-type: x mandatory;
  }
  .ds-thumbs.carousel .list .item{
    position: relative !important;
    flex: 0 0 auto;
    width: 100px !important;
    height: 100px !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    opacity: 1 !important;
    z-index: auto !important;
    border: 1px solid #013da1;
    border-radius: 12px !important;
    background-position: 50% 50%;
    background-size: cover;
    scroll-snap-align: start;
    transition: transform .8s ease, opacity .8s ease;  /* giữ animation */
    will-change: transform;
    cursor: pointer;  /* click tốt hơn */
  }
  /* vô hiệu layout nth-child cũ */
  .ds-thumbs.carousel .list .item:nth-child(n){
    width:100px !important; height:100px !important;
  }

  /* CONTROLS: sau thumbs, gọn nhưng đủ vùng chạm */
  .ds-controls{
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
  }
  .ds-controls .prev,
  .ds-controls .next{
    width: 44px; height: 37px;
    touch-action: manipulation;
  }
  .ds-controls .prev:focus-visible,
  .ds-controls .next:focus-visible{
    outline: 3px solid rgba(30,99,233,.6);
    outline-offset: 2px;
  }

  /* Giảm khoảng trống tổng thể */
  .ds-slider{ margin: 0 auto 12px; }
}

/* ===== SIÊU NHỎ (≤360px): nén thêm nếu cần ===== */
@media (max-width: 360px){
  .ds-desc{ -webkit-line-clamp: 1; }         /* rút còn 1 dòng */
  .ds-cta { padding: 1px 16px !important; }  /* gọn hơn chút */
}
/* hero fade nhẹ khi ảnh đổi */
.ds-hero-img{ transition: opacity .25s ease; }
.ds-hero-img.is-fading{ opacity: .4; }

/* thumb active */
.ds-thumbs .list .item.is-active{
  outline: 2px solid #1e63e9;
  box-shadow: 0 0 0 2px rgba(30,99,233,.25) inset;
}
/* Bảo đảm controls luôn click được và không cuộn khi chạm (iOS) */
.ds-controls{ position: relative; z-index: 99; }
.ds-controls .prev, .ds-controls .next{
  touch-action: none; /* chặn pan/scroll khi chạm nút */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-user-select: none;
  user-select: none;
  pointer-events: auto;
}