/* Giữ nguyên class bạn có */
.row-none-width{ max-width:100% !important; }

/* ========= Slider layout: 3 cột prev | track | next ========= */
.wrap-course { 
  margin: 40px auto; 
  position: relative; 
}
.slider-course{
  display: grid;
  grid-template-columns: 56px minmax(0,1fr) 56px;
  align-items: center;
  gap: 10px;
  position: relative;
}

/* ========= Buttons ========= */
.btnCourse{
  width: 46px; height: 46px;
  border-radius: 999px; border: 0;
  background: #45c0f8; color:#fff; cursor:pointer;
  display:grid; place-items:center;
  padding:0; margin: 0; line-height:0;
  box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.12));
  transition: transform .15s ease, opacity .2s ease, background .2s ease;
}
.btnCourse:hover{ background:#009fe3; transform: translateY(-1px); }
.btnCourse:active{ transform: translateY(0); }
.btnCourse:disabled{ opacity:.35; cursor:not-allowed; transform:none; }
.btnCourse .arrow-icon{ width:22px; height:22px; display:block; }
.prevReason .arrow-icon{ transform: scaleX(-1); }
.btnCourse:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #009fe3;
}

/* Vị trí trong grid */
.prevReason{ grid-column:1/2; justify-self:center; }
.nextReason{ grid-column:3/4; justify-self:center; }

/* ========= Track & Cards ========= */
.track{
  grid-column:2/3;
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(280px, 24vw, 340px);
  gap: var(--gap, 18px);
  overflow-x:auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: 6px;
  margin: 0 2px;
  scrollbar-width: none;
  touch-action: pan-x;
}
.track::-webkit-scrollbar{ display:none; }
.track.no-snap{ scroll-snap-type: none; }

/* Khi đang kéo: đổi cursor cho trực quan */
.track.is-dragging{
  cursor: grabbing;
}

/* CARD */
.card-course{
  scroll-snap-align: start;
  background: var(--white, #fff);
  border-radius: var(--radius, 16px);
  border: 1px solid #e4e6eb;
  box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.08));
  padding: 24px 18px 18px;
  display:flex; flex-direction:column;
  min-height: 260px;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Hover card – nhẹ nhàng */
.card-course:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0,0,0,.16);
}

.card-course .icon{ 
  width:54px; height:54px; 
  border-radius:999px; 
  display:grid; place-items:center; 
  margin:0 auto 10px; 
}
.card-course .icon img{ 
  width:54px; height:54px; 
  height:54px;
  object-fit:contain; 
}

.card-course h3{
  text-align:center; font-size:18px; line-height:1.3;
  margin:6px 0 10px; font-weight:800; letter-spacing:.2px; color:#000;
}
.card-course p{
  color:#000; font-size:14px; line-height:1.6;
  margin: 8px 0 16px; text-align:center; flex:1;
}

/* Link more với badge tròn có SVG mũi tên */
.card-course .more{
  margin-top:auto; 
  display:flex; 
  align-items:center; 
  justify-content:center;
  gap:8px; 
  font-weight:700; 
  font-size:14px; 
  color:#000; 
  text-decoration:none;
}
.more-badge{
  width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center;
  padding:0; line-height:0;
  flex:0 0 20px; color:#fff;
}
.more-badge .badge-icon{ width:14px; height:14px; display:block; }

.more-1{ background:#ff3131; }
.more-2{ background:#16bcd1; }
.more-3{ background:#3fb3ff; }
.more-4{ background:#ffde59; color:#111; }
.more-5{ background:#ff66c4; }
.more-6{ background:#00bf63; }

/* ========= Tablet (≤1199px) ========= */
@media (max-width: 1199px){
  .slider-course{ grid-template-columns: 48px minmax(0,1fr) 48px; }
  .track{ grid-auto-columns: clamp(300px, 45vw, 420px); gap:16px; }
  .btnCourse{ width:40px; height:40px; position: absolute;
        z-index: 10;}
  .btnCourse .arrow-icon{ width:20px; height:20px; }
}

/* ========= Mobile (<768px): ẩn nút, card full-viewport ========= */
@media (max-width: 768px){
  .slider-course{ grid-template-columns: 1fr; }
 
  .track{
    grid-column: 1/2;
    grid-auto-columns: clamp(86%, 90vw, 94vw);
    gap: 14px;
  }
  .prevReason{
        left: 0;
  }
  .nextReason{
    right:0;
  }
  .wrap-course{
    margin:20px auto;
  }
  .btnCourse .arrow-icon{
          width: 16px;
        height: 16px;
  }
}

/* Giảm hiệu ứng nếu người dùng chọn reduce motion */
@media (prefers-reduced-motion: reduce){
  .btnCourse{ transition: none; }
  .track{ scroll-behavior: auto !important; }
  .card-course{ transition: none; }
}