/* ===== Scope riêng cho slider ===== */
#news-carousel{
    --bg:#f6efe8;
    --card:#fffaf6;
    --text:#1f2937;
    --muted:#6b7280;
    --line:#eadfd6;
    --gap:16px;
  
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    color:var(--text);
        padding:18px 0 28px;
  }
  #news-carousel .wrap{max-width:1200px;margin:0 auto;padding:0 16px}
  
  /* Thanh trượt */
  #news-carousel .track{
    position:relative;
    display:flex;
    gap:var(--gap);
    overflow-x:auto;                /* cho phép cuộn nhưng ẩn thanh cuộn */
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
    cursor:grab;
  }
  #news-carousel .track.dragging{ cursor:grabbing; }
  /* Ẩn thanh cuộn (mọi trình duyệt) */
  #news-carousel .track{ scrollbar-width:none; -ms-overflow-style:none; }
  #news-carousel .track::-webkit-scrollbar{ display:none; height:0; }
  
  /* Card tin (4 cái / khung nhìn ở desktop) */
  #news-carousel .card{
    flex:0 0 calc((100% - (var(--gap)*(var(--per,4) - 1))) / var(--per,4));
    background:var(--card);
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
  }
  #news-carousel .thumb{
    display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#eee;
  }
  #news-carousel .thumb[draggable]{ user-select:none; -webkit-user-drag:none; } /* chặn kéo ảnh */
  #news-carousel .pad{padding:8px 8px 12px; margin-bottom: -30px;}
  #news-carousel .title{ margin:0; font-weight:800; line-height:1.35; font-size:16px; }
  #news-carousel a{color:inherit;text-decoration:none}
  #news-carousel a:hover{text-decoration:underline}
  
  /* Nút mũi tên dưới slider */
  #news-carousel .controls{
    margin-top:12px;
    display:flex; gap:10px; align-items:center; justify-content:center;
  }
  #news-carousel .nav{
    width:40px; height:40px; border-radius:999px;
    display:grid; place-items:center;
    background:#f5d6c0; border:1px solid #e3bda8; color:#8a3c1f;
    cursor:pointer; user-select:none;
    transition:transform .15s ease, background .15s ease;
  }
  #news-carousel .nav:hover{ transform:scale(1.06); background:#f1c9ad; }
  #news-carousel .nav:active{ transform:scale(.96); }
  #news-carousel .nav svg{ width:18px; height:18px; fill:currentColor; }
  
  /* Responsive: 3/2 cards mỗi khung nhìn */
  @media (max-width: 1024px){ 
    #news-carousel{ --per:3; } 
   
}
  @media (max-width: 720px){  #news-carousel{ --per:2; } 
 

}