/* =======================
   Related Posts – FULL CSS
   ======================= */
:root{
  --rp-gap: 22px;
  --rp-radius: 22px;
  --rp-shadow: 0 12px 28px rgba(0,0,0,.10);
  --rp-brand: #7A48D8;
  --rp-title: #2b235a;
  --rp-max: 1240px;
}

/* Section */
.rp{
  max-width: var(--rp-max);
  margin: 36px auto 0;
  padding: 0 15px 36px;                 /* chừa chỗ cho dots */
  position: relative;
}
.rp__title{
  font-size: 28px; line-height: 1.2; color: #111;
  margin: 0 0 6px; font-weight: 800; text-align: center;
}
.rp__divider{
  width: 56px; height: 6px; border-radius: 6px; margin: 10px auto 18px;
  background: var(--rp-brand); box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

/* Flickity base */
.rp .flickity-viewport,
.rp .flickity-slider{ will-change: transform; backface-visibility: hidden; }
.rp .flickity-viewport{
  overflow: hidden;
  overscroll-behavior: contain;        /* không bật trang khi cuộn trong slider */
}

/* Dots */
.rp .flickity-page-dots{
  position: absolute; left: 15px; right: 15px; bottom: 6px;
  display: flex; gap: 8px; justify-content: center;
}
.rp .flickity-page-dots .dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--rp-brand); opacity: .35;
}
.rp .flickity-page-dots .dot.is-selected{ opacity: 1; }

/* Arrows (chevron CSS – bỏ SVG mặc định) */
.rp .flickity-prev-next-button .flickity-button-icon{ display:none; }

.rp .flickity-prev-next-button{
  width: 44px; height: 44px; border-radius: 999px;
  background: #fff; border: 2px solid var(--rp-brand);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  top: 50%; transform: translateY(-50%); z-index: 2;
  transition: transform .15s ease, box-shadow .15s ease;
}
.rp .flickity-prev-next-button.previous{ left: -12px; }
.rp .flickity-prev-next-button.next{     right: -12px; }

.rp .flickity-prev-next-button::before{
  content:""; display:block; position:absolute; left:50%; top:50%;
  width:12px; height:12px; margin:auto; border-radius:1px;
  border-right:3px solid var(--rp-brand); border-bottom:3px solid var(--rp-brand);
  transform: translate(-50%,-50%) rotate(135deg); /* mũi tên trái */
}
.rp .flickity-prev-next-button.next::before{
  transform: translate(-50%,-50%) rotate(-45deg); /* mũi tên phải */
}

.rp .flickity-prev-next-button:hover{
  background:#fffbe9; transform: translateY(-50%) scale(1.04);
}
.rp .flickity-prev-next-button:focus{
  outline:none; box-shadow:0 0 0 4px rgba(122,72,216,.15);
}
.rp .flickity-prev-next-button:disabled{
  opacity:.35; pointer-events:none;
}

/* Card */
.rp__item{ display: block; }
.rp__link{ display: block; text-decoration: none; color: inherit; }

.rp__thumb{
  position: relative; aspect-ratio: 16/9; border-radius: var(--rp-radius); overflow: hidden;
  background: repeating-linear-gradient(45deg,#faf7ff,#faf7ff 10px,#f1ecff 10px,#f1ecff 20px);
  border: 3px solid rgba(74,43,140,.12); box-shadow: var(--rp-shadow);
  display: grid; place-items: center;
}
.rp__img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.rp__ph{ width: 100%; height: 100%; }

.rp__heading{
  margin: 14px 6px 0; color: var(--rp-title); font-size: 18px !important; line-height: 1.25; font-weight: 800;
}
.rp__heading::after{
  content: ""; display: block; width: 56px; height: 4px; border-radius: 4px; margin: 10px 0 0; background: var(--rp-brand);
}

/* Gutter item */
.rp.slider .carousel-cell.rp__item{ margin: 0 calc(var(--rp-gap)/2) !important; }

.rp__excerpt {
  margin-top:8px;
  font-size:15px;
  line-height:1.5;
  color:#555;
}


/* Width per breakpoint (freeScroll) */
@media (max-width: 767.98px){
  .rp.slider .carousel-cell.rp__item{ width: calc(100% - var(--rp-gap)) !important; }
}
@media (min-width: 768px) and (max-width: 1023.98px){
  .rp.slider .carousel-cell.rp__item{ width: calc(50% - var(--rp-gap)) !important; }
}
@media (min-width: 1024px) and (max-width: 1439.98px){
  .rp.slider .carousel-cell.rp__item{ width: calc(33.333% - var(--rp-gap)) !important; }
}
@media (min-width: 1440px){
  .rp.slider .carousel-cell.rp__item{ width: calc(25% - var(--rp-gap)) !important; }
}

/* UX cursor */
.rp .is-draggable .flickity-viewport { cursor: grab; }
.rp .is-pointer-down .flickity-viewport { cursor: grabbing; }

/* Reduced-motion */
@media (prefers-reduced-motion: reduce){
  .rp .flickity-viewport, .rp .flickity-slider{ will-change: auto; }
}