:root{
  --apc-gap: 22px;
  --apc-radius: 12px;
  --apc-shadow: 0 10px 26px rgba(0,0,0,.10);
  --apc-gold: #d2b46e;
  --apc-gold-deep: #c09a3c;
  --apc-border: rgba(0,0,0,.06);
  --apc-title: #111;
  --apc-text: #555;
  --apc-title-fs: 20px;
  --apc-excerpt-fs: 12px;
  --apc-arrow: 44px;
}

/* ===== Container / base ===== */
.apc{
  position: relative;
  max-width: 100%;
  overflow: hidden;
  padding-bottom: 34px;         /* chừa chỗ cho dots vì overflow:hidden */
}
.apc .flickity-viewport{ overflow: hidden; } /* KHÓA tràn X */

.apc .flickity-slider { transform:none !important; display:flex; flex-wrap:wrap; gap:var(--apc-gap); }
.apc .apc-item { position:static !important; transform:none !important; }


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

/* ===== Cell spacing ===== */
.apc.slider .carousel-cell.apc-item{ margin: 0 calc(var(--apc-gap)/2) !important; }

/* ===== Card ===== */
.apc-card{
  display: block; text-decoration: none; color: inherit; background: #fff;
  border-radius: var(--apc-radius); overflow: hidden;
  border: 1px solid var(--apc-border); box-shadow: var(--apc-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.apc-card:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,.12); }

.apc-thumb{ position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #f6f6f6; }
.apc-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); transition: transform .25s ease; }
.apc-card:hover .apc-thumb img{ transform: scale(1.03); }

.apc-ph{ width:100%; height:100%;
  background: repeating-linear-gradient(45deg,#faf7ff,#faf7ff 10px,#f1ecff 10px,#f1ecff 20px);
}

.apc-body{ padding: 12px 14px 14px; border-top: 1px solid var(--apc-border); text-align: left; }
.apc-title{
  font-size: var(--apc-title-fs) !important; font-weight: 800; line-height: 1.25; margin: 0 0 8px; color: var(--apc-title);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.apc-excerpt{
  margin: 0; color: var(--apc-text); font-size: var(--apc-excerpt-fs) !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ===== Badge ngày ===== */
.apc-date{
  position: absolute; top: 14px; left: 14px; background: #fff; border: 2px solid var(--apc-gold);
  color: #6b5b1e; border-radius: 8px; width: 48px; text-align: center; line-height: 1; padding: 6px 4px;
  box-shadow: 0 8px 18px rgba(0,0,0,.15); font-weight: 700;
}
.apc-date .d{ display: block; font-size: 16px; }
.apc-date .m{ display: block; font-size: 12px; margin-top: 2px; }

/* ===== Arrows ===== */
.apc .flickity-prev-next-button,
.apc .flickity-prev-next-button:before,
.apc .flickity-prev-next-button:after{ background: none; box-shadow: none; border: none; }
.apc .flickity-prev-next-button:before,
.apc .flickity-prev-next-button:after{ content: none !important; }

.apc .flickity-prev-next-button{
  width: var(--apc-arrow);
  height: var(--apc-arrow);
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--apc-gold);
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
  top: 42%;
  transform: translateY(-50%);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  z-index: 5;
}
.apc .flickity-prev-next-button .flickity-button-icon{
  width: 50%; height: 50%; left: 25%; top: 25%; fill: var(--apc-gold-deep);
}
.apc .flickity-prev-next-button.previous{ left: 8px; }
.apc .flickity-prev-next-button.next{ right: 8px; }
.apc .flickity-prev-next-button:hover{ background: #fffbe9; transform: translateY(-50%) scale(1.04); }
.apc .flickity-prev-next-button:focus{ outline: none; box-shadow: 0 0 0 4px rgba(210,180,110,.22); }
.apc .flickity-prev-next-button:disabled{ opacity: .35; pointer-events: none; }

.apc .flickity-button,
.apc .flickity-prev-next-button{
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: absolute !important;
}
.apc .flickity-prev-next-button .flickity-button-icon{ display: block !important; }

/* ===== Responsive columns ===== */
@media (max-width: 767.98px){
  .apc.slider .carousel-cell.apc-item{ width: calc(100% - var(--apc-gap)) !important; }
  .apc .flickity-prev-next-button{ width: 36px; height: 36px; top: 38%; }
  .apc .flickity-prev-next-button.previous{ left: 2px; }
  .apc .flickity-prev-next-button.next{ right: 2px; }
  .apc-date{ width: 44px; }
  .apc-date .d{ font-size: 15px; }
}
@media (min-width:768px) and (max-width:1279.98px){
  .apc.slider .carousel-cell.apc-item{ width: calc(33.333% - var(--apc-gap)) !important; }
  .apc.apc-cols-2 .carousel-cell.apc-item{ width: calc(50% - var(--apc-gap)) !important; }
}
@media (min-width:1280px){
  /* Auto fit khi ít bài (được JS gán .apc-has-*) */
  .apc.apc-has-1 .carousel-cell.apc-item{ width: calc(100% - var(--apc-gap)) !important; }
  .apc.apc-has-2 .carousel-cell.apc-item{ width: calc(50%  - var(--apc-gap)) !important; }
  .apc.apc-has-3 .carousel-cell.apc-item{ width: calc(33.333% - var(--apc-gap)) !important; }

  /* Nếu bạn set tay số cột */
  .apc.apc-cols-2 .carousel-cell.apc-item{ width: calc(50% - var(--apc-gap)) !important; }
  .apc.apc-cols-3 .carousel-cell.apc-item{ width: calc(33.333% - var(--apc-gap)) !important; }
  .apc.apc-cols-4 .carousel-cell.apc-item{ width: calc(25% - var(--apc-gap)) !important; }
  .apc.apc-cols-5 .carousel-cell.apc-item{ width: calc(20% - var(--apc-gap)) !important; }

  /* Mặc định nếu KHÔNG gắn apc-cols-* thì = 4 cột */
  .apc.slider:not([class*="apc-cols-"]) .carousel-cell.apc-item{ width: calc(25% - var(--apc-gap)) !important; }
}

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

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