/* trong  */
@keyframes scaleActive {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

@keyframes scaleHidden {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(0);
  }
}



.modal__slider.show {
  width: 100%;
  height: 100%;
  padding-top: 59px;
  padding-bottom: 100px;
  position: fixed;
  top: 0;
  left: 0;
  animation: scaleActive 0.3s;
  z-index: 100;
}

.modal__slider {
  animation: scaleHidden 0.3s;
  background: #fff;
}

.modal__slider.show .mySwiper2 {
  height: 100%;
  background: #fff;
}

.modal__slider.show .mySwiper2 .swiper-slide {
  background: #fff;
}

.modal__slider.show .mySwiper {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
}

/* thumb */
.modal__slider.show .mySwiper .swiper-slide {
  height: 100%;
}

.modal__slider.show .mySwiper2 .swiper-slide img {
  width: 80%;
  margin: 0 auto;
}

@media (max-width: 991.9px) {
  .modal__slider.show .mySwiper2 .swiper-slide img {
    width: 100%;
  }
}

.mySwiper .swiper-slide {
  position: relative;
}

.swiper-slide {
  transition: 0.3s;
}

.overlay__slider {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  transition: 0.3s;
}

.mySwiper .swiper-slide.swiper-slide-thumb-active .overlay__slider {
  border-color: #41beb2;
}

.modal__slider.show .mySwiper .swiper-slide.swiper-slide-thumb-active .overlay__slider {
  border-color: #fff;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  background: #fff;

}

.mySwiper2 {
  height: 500px;
  width: 100%;
}

.mySwiper {
  padding: 10px 0;
}

.mySwiper .swiper-slide {
  opacity: 0.8;
  border-radius: 8px;
  overflow: hidden;
}

.mySwiper .swiper-slide-thumb-active {
  opacity: 1;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-wrraper {
  transition-timing-function: linear;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  content: '';
}

.swiper-button-next,
.swiper-button-prev {
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  opacity: 0.7;
  transition: opacity 0.35s linear 0s;
  background: transparent;
  border-radius: 50%;
  border: 1px solid #fff;
  transition: 0.3s;
}

.modal__slider.show .swiper-button-next,
.modal__slider.show .swiper-button-prev {
  border-color: transparent;
}

.modal__slider.show .swiper-button-next,
.modal__slider.show .swiper-button-prev {
  color: #333;
  background-color: rgba(0, 0, 0, 0.45);
}

.modal__slider.show .swiper-button-next:hover,
.modal__slider.show .swiper-button-prev:hover {
  color: #fff;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  opacity: 1;
}

.modal__slider .top__modal {
  display: none;
}

.modal__slider.show .top__modal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 47px;
  padding: 0 20px;
  position: fixed;
  top: 0;
  background: rgba(0, 0, 0, 0.45);
  color: #000;
  z-index: 1;
}

.modal__slider.show .mySwiper2 .swiper-slide img {
  width: initial;
}

.modal__icon i {
  font-size: 20px;
  cursor: pointer;
  color: #000;
  transition: 0.3;
}

.modal__icon i.fa-download {
  margin-right: 20px;
}

.modal__icon i:hover {
  color: #fff;
}

.mySwiper .swiper-slide img {
  height: 68px;
}

@media (max-width: 991.9px) {
  .modal__slider.show .mySwiper2 {
    height: 100%;
  }

  .modal__slider.show .mySwiper2 .swiper-slide img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    height: auto;
  }

  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }
}

@media (max-width: 575.9px) {
  .mySwiper .swiper-slide img {
    height: 45px;
  }
}



/**/
.sago-project-page .columns {
  padding: 0px;
}

.content-detail {
  padding: 8px;
  background: #ededed;
  font-size: 98%;
}

.sago-date {
  font-size: 95%;
  margin-bottom: 10px;
}

@font-face {
  font-family: SF-Pro-Heavy;
  src: url('../fonts/SF-Pro-Display-Heavy.otf');
  font-weight: bold;
}

@font-face {
  font-family: SF-Pro-Light;
  src: url('../fonts/SF-Pro-Display-Light.otf');
  font-weight: 400;
}

@font-face {
  font-family: SF-Pro-Semibold;
  src: url('../fonts/SF-Pro-Display-Semibold.otf');
  font-weight: bold;
}

.font-1 {
  font-family: SF-Pro-Light !important;
}

.font-2 {
  font-family: SF-Pro-Heavy !important;
}

.font-3 {
  font-family: SF-Pro-Semibold !important;
}

.sago-no-padding-bottom {
  padding-bottom: 0px !important;
}

.sago-15-padding-bottom {
  padding-bottom: 15px !important;
}

/* ═══════════════════════════════════════════════════════════════
   SAGO TIMELINE – Facebook-style Project Feed
   ═══════════════════════════════════════════════════════════════ */

/* Wrapper chính */
.sago-timeline-wrap {
  background: #f0f2f5;
  min-height: 60vh;

}

.sago-timeline-feed {

  margin: 0 auto;
  position: relative;
}

/* ─── Card ─────────────────────────────────────────────── */
.sago-timeline-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .10), 0 0 0 1px rgba(0, 0, 0, .03);
  margin-bottom: 16px;
  overflow: hidden;
  transition: box-shadow .2s ease;
}

.sago-timeline-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .04);
}

/* ─── Card Header ────────────────────────────────────────── */
.sago-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 8px;
}

.sago-card-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sago-card-avatar-link {
  flex-shrink: 0;
  text-decoration: none;
}

.sago-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #f0f2f5;
  background: #e4e6eb;
}

.sago-card-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.sago-card-author-name {
  font-weight: 700;
  font-size: 15px;
  color: #050505;
  text-decoration: none;
}

.sago-card-author-name:hover {
  text-decoration: underline;
}

.sago-card-date {
  font-size: 12px;
  color: #65676b;
  text-decoration: none;
  margin-top: 1px;
  position: relative;
  /* cần cho tooltip */
}

.sago-card-date:hover {
  text-decoration: underline;
}

/* ─── Date tooltip ─────────────────────────────────────── */
.sago-date-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(.92);
  transform-origin: top center;
  background: rgba(0, 0, 0, .82);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 20;
  text-decoration: none;
}

/* Mũi tên nhỏ phía trên tooltip */
.sago-date-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: rgba(0, 0, 0, .82);
}

.sago-card-date:hover .sago-date-tooltip {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.sago-card-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: #65676b;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
  margin: 0px;
}

.sago-card-more-btn:hover {
  background: #f0f2f5;
  color: #050505;
}

/* ─── Tiêu đề dự án ──────────────────────────────────────── */
.sago-card-title-wrap {
  padding: 0 16px 6px;
}

.sago-card-title {
  font-weight: 700;
  font-size: 16px;
  color: #050505;
  text-decoration: none;
  line-height: 1.4;
  display: block;
}

.sago-card-title:hover {
  text-decoration: underline;
}

/* ─── Mô tả ──────────────────────────────────────────────── */
.sago-card-desc-wrap {
  padding: 0 16px 12px;
}

.sago-card-desc ul li,
.sago-card-desc ol li {
  margin-left: 1.3em;
}

.sago-card-desc {
  font-size: 15px;
  color: #050505;
  line-height: 1.55;
  margin: 0 0 4px;
}

/* Clamp 3 dòng bằng max-height — tương thích với block-level children (p tags) */
.sago-card-desc.sago-desc-clamped {
  max-height: calc(1.55em * 3);
  /* line-height × 3 dòng */
  overflow: hidden;
  position: relative;
}

/* Fade gradient cuối để báo hiệu còn nội dung */
.sago-card-desc.sago-desc-clamped::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5em;
  background: linear-gradient(transparent, #fff);
  pointer-events: none;
}

.sago-card-desc.sago-desc-expanded {
  max-height: none;
  overflow: visible;
}

.sago-card-desc.sago-desc-expanded::after {
  display: none;
}

/* Nút Xem thêm */
.sago-read-more-btn {
  display: none;
  /* JS show nếu cần */
  background: none;
  border: none;
  padding: 0;
  margin: 2px 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  transition: color .15s;
  text-transform: none;
  text-decoration: underline;
}

.sago-read-more-btn:hover {
  color: #050505;
}


/* ─── Ảnh ────────────────────────────────────────────────── */
.sago-card-image {
  background: #f0f2f5;
  line-height: 0;
  overflow: hidden;
}

.sago-card-image a {
  display: block;
}

.sago-card-image img {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: cover;
  display: block;
  transition: opacity .2s;
}

.sago-card-image img:hover {
  opacity: .96;
}

/* ─── Thống kê ───────────────────────────────────────────── */
.sago-card-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  font-size: 14px;
  color: #65676b;
}

.sago-stats-likes {
  display: flex;
  align-items: center;
  gap: 5px;
}

.sago-stats-emojis {
  display: inline-flex;
  align-items: center;
}

.sago-stats-emoji-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #fff;
  font-size: 11px;
  line-height: 1;
  margin-right: -6px;
  /* xếp chồng */
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
  animation: sagoStatsPop .15s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes sagoStatsPop {
  from {
    transform: scale(0.5);
    opacity: 0.5;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.sago-stats-emoji-icon:last-child {
  margin-right: 0;
}

.sago-like-count,
.sago-share-count {
  font-size: 14px;
  color: #65676b;
  margin-left: 2px;
}

/* ─── Divider ────────────────────────────────────────────── */
.sago-card-divider {
  height: 1px;
  background: #e4e6eb;
  margin: 0 16px;
}



/* ─── Action buttons ─────────────────────────────────────── */
.sago-card-actions {
  display: flex;
  align-items: stretch;
  padding: 4px 8px;
  gap: 4px;
}

.sago-action-like-wrap,
.sago-action-share-wrap {
  flex: 1;
  position: relative;
}

.sago-action-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px;
  background: none;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #65676b;
  cursor: pointer;
  transition: background .15s, color .2s ease, transform .12s ease;
  white-space: nowrap;
  user-select: none;
}

.sago-action-btn:hover {
  background: #f0f2f5;
  color: #050505;
}

.sago-action-btn.sago-btn-liked {
  color: #1877f2;
}

.sago-action-btn.sago-btn-liked .sago-action-icon {
  stroke: #1877f2;
}

.sago-action-btn.sago-btn-reacted-love {
  color: #f33e58;
}

.sago-action-btn.sago-btn-reacted-haha {
  color: #f7b928;
}

.sago-action-btn.sago-btn-reacted-wow {
  color: #f7b928;
}

.sago-action-btn.sago-btn-reacted-sad {
  color: #f7b928;
}

.sago-action-btn.sago-btn-reacted-thuong {
  color: #e9710f;
}

/* Ảnh reaction active hình tròn nhỏ trong nút Thích */
.sago-reaction-active-img {
  width: 20px;
  height: 20px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
  animation: sagoReactIn .25s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes sagoReactIn {
  from {
    transform: scale(0) rotate(-20deg);
    opacity: 0;
  }

  to {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Bounce khi click nút like */
.sago-action-btn:active {
  transform: scale(.88);
}

.sago-action-btn.is-animating {
  animation: sagoBtnActive .3s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes sagoBtnActive {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.18);
  }

  100% {
    transform: scale(1);
  }
}

.sago-action-icon {
  flex-shrink: 0;
  stroke: currentColor;
}

/* ─── Reaction Popup ─────────────────────────────────────── */
.sago-reaction-popup {
  display: flex;
  align-items: center;
  gap: 4px;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  background: #fff;
  border-radius: 30px;
  padding: 8px 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .06);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px) scale(.9);
  transform-origin: bottom left;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 100;
  white-space: nowrap;
}

.sago-reaction-popup.sago-popup-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.sago-reaction-btn {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  border-radius: 50%;
  transition: transform .18s ease;
  line-height: 1;
  position: relative;
  /* cần cho label tooltip */
}

.sago-reaction-btn:hover {
  transform: scale(1.4) translateY(-4px);
}

/* Popup reaction: dùng ảnh PNG thay emoji */
.sago-reaction-btn img {
  width: 40px;
  height: 40px;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.sago-reaction-label {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) scale(.85);
  transform-origin: bottom center;
  background: rgba(0, 0, 0, .78);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 10;
}

/* Mũi tên nhỏ phía dưới tooltip */
.sago-reaction-label::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(0, 0, 0, .78);
}

.sago-reaction-btn:hover .sago-reaction-label {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ─── Share Dropdown ─────────────────────────────────────── */
.sago-share-dropdown {
  display: none;
  position: absolute;
  /* sẽ bị ghi đè bởi JS thành fixed khi mở */
  background: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .06);
  z-index: 10100;
  /* cao hơn modal overlay (9999) */
}

.sago-share-dropdown.sago-share-open {
  display: block;
  animation: sagoShareIn .15s ease;
}

@keyframes sagoShareIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Override flatsome share icons inside dropdown */
.sago-share-dropdown .social-icons {
  margin: 0;
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}

.sago-share-dropdown .social-icons a {
  font-size: 18px !important;
  width: 36px;
  height: 36px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* WhatsApp link chỉ hoạt động trên mobile → ẩn trên desktop */
@media (min-width: 640px) {
  .sago-share-dropdown .whatsapp {
    display: none !important;
  }
}

/* ─── Loading Spinner & Sentinel ────────────────────────── */
.sago-timeline-sentinel {
  height: 1px;
  width: 100%;
  visibility: hidden;
}

.sago-timeline-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  color: #65676b;
  font-size: 14px;
}

.sago-spinner {
  width: 22px;
  height: 22px;
  border: 3px solid #e4e6eb;
  border-top-color: #1877f2;
  border-radius: 50%;
  animation: sago-spin .7s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}

@keyframes sago-spin {
  to {
    transform: rotate(360deg);
  }
}

.sago-timeline-empty {
  text-align: center;
  color: #65676b;
  padding: 40px 0;
  font-size: 15px;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .sago-timeline-wrap {
    padding: 12px 0 40px;
  }

  .sago-timeline-card {
    border-radius: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  }

  .sago-timeline-feed {
    max-width: 100%;
  }

  .sago-card-header {
    padding: 12px 12px 6px;
  }

  .sago-card-title-wrap {
    padding: 0 12px 6px;
  }

  .sago-card-desc-wrap {
    padding: 0 12px 10px;
  }

  .sago-card-stats {
    padding: 6px 12px;
  }

  .sago-card-divider {
    margin: 0 12px;
  }

  .sago-card-actions {
    padding: 4px 4px;
  }

  .sago-action-label {
    font-size: 13px;
  }

  .sago-reaction-emoji {
    font-size: 24px;
  }

  .sago-reaction-popup {
    padding: 6px 8px;
  }
}

/* ═══════════════════════════════════════════════════════════
   SAGO ALBUM GALLERY
═══════════════════════════════════════════════════════════ */
.sago-card-image img,
.sago-card-image a {
  display: block;
  width: 100%;
}

.sago-card-image img {
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
}

/* Base album grid */
.sago-card-album {
  display: grid;
  gap: 4px;
  width: 100%;
  overflow: hidden;
}

.sago-album-item {
  display: block;
  position: relative;
  overflow: hidden;
  background: #e4e6eb;
}

.sago-album-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}

.sago-album-item:hover img {
  transform: scale(1.04);
}

/* ─── 1 ảnh: 4:3 ────────────────────────────────────────── */
.sago-album-1 {
  grid-template-columns: 1fr;
}

.sago-album-1 .sago-album-item {
  aspect-ratio: 4/3;
}

/* ─── 2 ảnh: 2 ô vuông ─────────────────────────────────── */
.sago-album-2 {
  grid-template-columns: 1fr 1fr;
}

.sago-album-2 .sago-album-item {
  aspect-ratio: 1/1;
}

/* ─── 3 ảnh: ảnh đầu full width 16:9, 2 ảnh dưới vuông ── */
.sago-album-3 {
  grid-template-columns: 1fr 1fr;
}

.sago-album-3 .sago-album-item:nth-child(1) {
  grid-column: 1 / -1;
  aspect-ratio: 16/8;
}

.sago-album-3 .sago-album-item:nth-child(n+2) {
  aspect-ratio: 1/1;
}

/* ─── 4 ảnh: lưới 2×2 vuông ────────────────────────────── */
.sago-album-4 {
  grid-template-columns: 1fr 1fr;
}

.sago-album-4 .sago-album-item {
  aspect-ratio: 1/1;
}

/* ─── 5 ảnh: hàng 1 = 2 ảnh, hàng 2 = 3 ảnh, đều vuông ── */
.sago-album-5 {
  grid-template-columns: repeat(6, 1fr);
}

.sago-album-5 .sago-album-item:nth-child(1),
.sago-album-5 .sago-album-item:nth-child(2) {
  grid-column: span 3;
  aspect-ratio: 1/1;
}

.sago-album-5 .sago-album-item:nth-child(3),
.sago-album-5 .sago-album-item:nth-child(4),
.sago-album-5 .sago-album-item:nth-child(5) {
  grid-column: span 2;
  aspect-ratio: 1/1;
}

/* ─── 6+ ảnh: giống 5 ảnh (chỉ hiện 5, ảnh 5 có overlay) ─ */
.sago-album-6 {
  grid-template-columns: repeat(6, 1fr);
}

.sago-card-album>button {
  margin: 0px !important;
  padding: 0px !important;
}

.sago-album-6 .sago-album-item:nth-child(1),
.sago-album-6 .sago-album-item:nth-child(2) {
  grid-column: span 3;
  aspect-ratio: 1/1;
}

.sago-album-6 .sago-album-item:nth-child(3),
.sago-album-6 .sago-album-item:nth-child(4),
.sago-album-6 .sago-album-item:nth-child(5) {
  grid-column: span 2;
  aspect-ratio: 1/1;
}

/* ─── Overlay +N ────────────────────────────────────────── */
.sago-album-more {
  position: relative;
}

.sago-album-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: clamp(20px, 4vw, 32px);
  font-weight: 700;
  letter-spacing: .02em;
  pointer-events: none;
}

/* ─── Mobile ────────────────────────────────────────────── */
@media (max-width: 600px) {

  .sago-album-5,
  .sago-album-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

.row.sago-page {
  padding-top: 30px;
  padding-bottom: 30px;
}

/* ── Sticky sidebar – chỉ trên desktop/tablet ── */
@media (min-width: 768px) {
  #sago-cat-sidebar {
    position: sticky;
    top: 90px;
    /* bằng chiều cao header – chỉnh nếu header cao/thấp hơn */
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    scrollbar-width: none;
    /* Firefox */
  }

  #sago-cat-sidebar::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
  }

  #sago-clock-sidebar {
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    scrollbar-width: none;
  }

  #sago-clock-sidebar::-webkit-scrollbar {
    display: none;
  }
}

/* Ẩn cột clock trái trên mobile/tablet */
@media (max-width: 959px) {
  #sago-clock-col {
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════
   SAGO CARD DROPDOWN MENU
═══════════════════════════════════════════════════════════ */

.sago-card-more {
  position: relative;
}

.sago-card-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #606770;
  transition: background 0.15s;
  padding: 0;
  flex-shrink: 0;
}

.sago-card-more-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #1c1e21;
}

.sago-card-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 1200;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18), 0 1.5px 6px rgba(0, 0, 0, 0.10);
  min-width: 220px;
  padding: 8px 0;
  list-style: none;
  margin: 0;
}

.sago-card-dropdown.open {
  display: block;
  animation: sagoDropdownIn 0.12s ease;
}

@keyframes sagoDropdownIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.sago-card-dropdown li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  color: #1c1e21;
  font-weight: 500;
  transition: background 0.1s;
  white-space: nowrap;
  margin-left: 0px !important;
  margin-bottom: 0px;
}

.sago-card-dropdown li:hover {
  background: #f2f2f2;
}

.sago-card-dropdown li i {
  font-size: 18px;
  color: #606770;
  flex-shrink: 0;
}

.sago-card-dropdown .sago-dropdown-danger {
  color: #c0392b;
}

.sago-card-dropdown .sago-dropdown-danger i {
  color: #c0392b;
}

/* ═══════════════════════════════════════════════════════════
   SAGO PINNED SECTION – "Đáng chú ý"
═══════════════════════════════════════════════════════════ */

.sago-pinned-section {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  padding: 16px;
  margin-bottom: 20px;
}

.sago-pinned-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.sago-pinned-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sago-pinned-title-wrap i {
  color: #e67e22;
  font-size: 20px;
}

.sago-pinned-title {
  font-size: 17px;
  font-weight: 700;
  color: #1c1e21;
  margin: 0;
}

.sago-pinned-desc {
  font-size: 12.5px;
  color: #606770;
  margin: 0 0 10px;
}

.sago-pinned-manage-btn {
  background: none;
  border: none;
  color: #1877f2;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}

.sago-pinned-manage-btn:hover {
  background: #e7f0fd;
}

.sago-pinned-manage-btn.active {
  color: #1877f2;
  font-weight: 700;
}

/* Swiper slider */
.sago-pinned-slider {
  overflow-x: clip;
  overflow-y: visible;
  position: relative;
  margin-top: 12px;
  padding: 6px 2px;
}

.sago-pinned-slider .swiper-wrapper {
  display: flex;
}

.sago-pinned-slider .swiper-button-prev,
.sago-pinned-slider .swiper-button-next {
  width: 45px;
  height: 45px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  color: #1c1e21;
  top: 60%;
  transform: translateY(-60%);
  margin: 0px;
}

.sago-pinned-slider .swiper-button-prev::after,
.sago-pinned-slider .swiper-button-next::after {
  display: none;
}

.sago-pinned-slider .swiper-button-prev i,
.sago-pinned-slider .swiper-button-next i {
  font-size: 20px;
  line-height: 1;
}

.sago-pinned-slider .swiper-button-disabled {
  display: none !important;
}

/* Slide card */
.sago-pinned-card {
  position: relative;
  width: 55%;
  flex-shrink: 0;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.07);
  transition: box-shadow 0.15s;
}

.sago-pinned-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.sago-pinned-card-inner {
  display: block;
  width: 100%;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  text-align: left;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
  overflow: hidden;
}

.sago-pinned-card-inner:hover {
  background: #f5f5f5;
}

.sago-pinned-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 10px 10px 0px 10px;
}

.sago-pinned-avatar {
  width: 35px !important;
  height: 35px !important;
  max-width: 35px !important;
  min-width: 35px !important;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.sago-pinned-author {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1c1e21;
  line-height: 1.2;
}

.sago-pinned-date {
  font-size: 11px;
  color: #606770;
  white-space: nowrap;
  display: block;
}

/* Description clamp 3 dòng */
.sago-pinned-card-desc {
  font-size: 13px;
  color: #1c1e21;
  line-height: 1.45;
  margin: 6px 0 8px;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 0 10px;
}

/* Wrapper ảnh – max-height 300px */
.sago-pinned-imgs-wrap {

  height: 294px;
  overflow: hidden;
  border-radius: 0 0 10px 10px;

}

@media (max-width: 959px) {
  .sago-pinned-imgs-wrap {
    height: 236px;
  }
}

/* Wrapper ảnh pinned card – max-height container */

/* sago-card-album bên trong pinned card dùng cùng CSS main card */
.sago-pinned-imgs-wrap .sago-card-album {
  border-radius: 0;
}


/* Manage mode card dropdown */
.sago-pinned-card-more {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
}

.sago-pinned-card-more-btn {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #606770;
  font-size: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  display: none;
  /* ẩn khi không ở manage mode */
}

.sago-manage-mode .sago-pinned-card-more-btn {
  display: flex;
}

.sago-pinned-card-dropdown {
  display: none;
  position: absolute;
  top: 36px;
  right: 0;
  z-index: 100;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  min-width: 180px;
  padding: 6px 0;
  margin: 0;
  list-style: none;
}

.sago-pinned-card-dropdown.open {
  display: block;
}

.sago-pinned-card-dropdown li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 13.5px;
  color: #1c1e21;
  font-weight: 500;
  transition: background 0.1s;
}

.sago-pinned-card-dropdown li:hover {
  background: #f2f2f2;
}

.sago-pinned-card-dropdown li i {
  font-size: 16px;
  color: #606770;
}

/* Empty state */
.sago-pinned-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  color: #606770;
  font-size: 13.5px;
}

.sago-pinned-empty i {
  font-size: 24px;
  color: #ccc;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   DATE EDIT POPUP
═══════════════════════════════════════════════════════════ */

.sago-date-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sago-date-popup {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  width: 340px;
  max-width: 95vw;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.22);
}

.sago-date-popup h4 {
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 700;
  color: #1c1e21;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sago-date-popup h4 i {
  color: #f39c12;
  font-size: 20px;
}

.sago-date-popup label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #606770;
  margin-bottom: 4px;
}

.sago-date-popup input[type="datetime-local"] {
  width: 100%;
  border: 2px solid #e4e6eb;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  color: #1c1e21;
  outline: none;
  margin-bottom: 16px;
  transition: border-color 0.15s;
}

.sago-date-popup input:focus {
  border-color: #1877f2;
}

.sago-date-popup-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.sago-date-popup-actions button {
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.15s;
  margin: 0px !important;
}

.sago-date-popup-cancel {
  background: #e4e6eb;
  color: #1c1e21;
}

.sago-date-popup-cancel:hover {
  background: #d0d2d6;
}

.sago-date-popup-save {
  background: #1877f2;
  color: #fff;
}

.sago-date-popup-save:hover {
  background: #1565c0;
}

.sago-date-popup-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════
   TOAST NOTIFICATION
═══════════════════════════════════════════════════════════ */

#sago-toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.sago-toast {
  background: #1c1e21;
  color: #fff;
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  animation: sagoToastIn 0.2s ease forwards;
  pointer-events: none;
  max-width: 320px;
  text-align: center;
}

.sago-toast.success {
  background: #27ae60;
}

.sago-toast.error {
  background: #c0392b;
}

.sago-toast.out {
  animation: sagoToastOut 0.2s ease forwards;
}

@keyframes sagoToastIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sagoToastOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ═══════════════════════════════════════════════════════════
   SAGO GALLERY POPUP LIGHTBOX
═══════════════════════════════════════════════════════════ */


/* ── Reset button style cho sago-card-date ──────────────── */
button.sago-card-date {
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  margin: 0px;
  text-transform: none;
}

/* ── Reset button style cho sago-card-image-btn ─────────── */
.sago-card-image-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 0;
  margin-bottom: 0px;
  ;
}

.sago-card-image-btn img {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: cover;
  display: block;
  transition: opacity .2s;
}

.sago-card-image-btn:hover img {
  opacity: .96;
}

/* ── Popup overlay ──────────────────────────────────────── */
#sago-gallery-popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.93);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .28s ease;
}

#sago-gallery-popup.sago-gallery-visible {
  opacity: 1;
}

/* ── Modal container ────────────────────────────────────── */
.sago-gallery-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
}

/* ── Toolbar ────────────────────────────────────────────── */
.sago-gallery-toolbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .65) 0%, transparent 100%);
  z-index: 10;
  pointer-events: none;
}

.sago-gallery-counter {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .03em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
  pointer-events: none;
}

.sago-gallery-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.sago-gallery-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  cursor: pointer;
  transition: background .18s ease, transform .15s ease;
  backdrop-filter: blur(4px);
}

.sago-gallery-btn:hover {
  background: rgba(255, 255, 255, .3);
  transform: scale(1.08);
}

.sago-gallery-btn svg {
  display: block;
  flex-shrink: 0;
}

/* ── Stage (ảnh) ────────────────────────────────────────── */
.sago-gallery-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 60px 70px;
  /* space for toolbar + nav */
  box-sizing: border-box;
  overflow: hidden;
}

.sago-gallery-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 4px;
  cursor: zoom-in;
  transition: transform .3s cubic-bezier(.25, .1, .25, 1), opacity .25s ease;
  transform-origin: center center;
  user-select: none;
}

/* ── Nav prev / next ────────────────────────────────────── */
.sago-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  cursor: pointer;
  z-index: 10;
  transition: background .18s ease, transform .18s ease;
  backdrop-filter: blur(4px);
}

.sago-gallery-nav:hover {
  background: rgba(255, 255, 255, .32);
  transform: translateY(-50%) scale(1.1);
}

.sago-gallery-prev {
  left: 14px;
}

.sago-gallery-next {
  right: 14px;
}

.sago-gallery-nav svg {
  display: block;
  flex-shrink: 0;
}

/* ── Responsive mobile ──────────────────────────────────── */
@media (max-width: 600px) {
  .sago-gallery-stage {
    padding: 56px 52px;
  }

  .sago-gallery-nav {
    width: 38px;
    height: 38px;
  }

  .sago-gallery-prev {
    left: 6px;
  }

  .sago-gallery-next {
    right: 6px;
  }

  .sago-gallery-btn {
    width: 36px;
    height: 36px;
  }

  .sago-gallery-counter {
    font-size: 13px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Archive du-an: Layout 70 / 30
═══════════════════════════════════════════════════════════════════════════ */
.sago-archive-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px;
}

/* ── Feed (70%) ── */
.sago-archive-main {
  flex: 0 0 70%;
  min-width: 0;
}

/* ── Sidebar (30%) ── */
.sago-archive-sidebar {
  flex: 0 0 calc(30% - 24px);
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  scrollbar-width: none;
  /* Firefox: ẩn mặc định */
}

/* Chrome/Safari: ẩn mặc định, hiện khi hover */
.sago-archive-sidebar::-webkit-scrollbar {
  width: 0;
  transition: width .2s;
}

.sago-archive-sidebar:hover::-webkit-scrollbar {
  width: 4px;
}

.sago-archive-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sago-archive-sidebar::-webkit-scrollbar-thumb {
  background: #d0d0d0;
  border-radius: 4px;
}

.sago-archive-sidebar::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}

/* ── Category menu ── */
/* ── Desktop: Cat Menu dạng sidebar dọc ──────────────────────── */
.sago-cat-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}

/* Mobile sticky bar: ẩn trên desktop */
.sago-cat-sticky-wrap {
  display: none;
}


.sago-cat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none !important;
  color: #222;
  font-size: 14px;
  font-weight: 500;
  transition: background .18s, color .18s;
  white-space: nowrap;
}

.sago-cat-name {
  flex: 1;
}

.sago-cat-count {
  margin-left: auto;
  background: #e9eaec;
  color: #555;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 20px;
  min-width: 20px;
  text-align: center;
  transition: background .18s, color .18s;
}

.sago-cat-item.sago-cat-active .sago-cat-count,
.sago-cat-item:hover .sago-cat-count {
  background: #c7d7fd;
  color: #1d4ed8;
}

.sago-cat-item:hover {
  background: #f0f4ff;
  color: #2563eb;
}

.sago-cat-item.sago-cat-active {
  background: #e8edff;
  color: #1d4ed8;
  font-weight: 600;
}

.sago-cat-icon-wrap {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: #f5f5f7;
  padding: 8px;
}

.sago-cat-item:hover .sago-cat-icon-wrap,
.sago-cat-active .sago-cat-icon-wrap {
  background: #fff;
}

.sago-cat-name {
  flex: 1;
}

.sago-cat-count {
  font-size: 12px;
  color: #999;
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tablet & Mobile (< 960px): menu ngang sticky dưới header
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 959px) {
  .sago-archive-layout {
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .sago-pinned-card {
    width: 85%;
  }

  /* Ẩn sidebar desktop (col chứa sago-cat-menu dọc) */
  #sago-cat-sidebar {
    display: none;
  }

  /* Hiện sticky bar từ shortcode */
  .sago-cat-sticky-wrap {
    display: block;
    position: sticky;
    top: var(--sago-sticky-top, 0px);
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid #eee;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    border-radius: 10px;
    margin-bottom: 10px;
  }

  /* Menu trong sticky wrap: nằm ngang, cuộn ngang */
  .sago-cat-sticky-wrap .sago-cat-menu {
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 0;
    box-shadow: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-radius: 10px;
  }

  .sago-cat-sticky-wrap .sago-cat-menu::-webkit-scrollbar {
    display: none;
  }

  /* Cat item mobile: nhỏ hơn, tròn hơn */
  .sago-cat-item {
    flex-direction: row;
    gap: 8px;
    padding: 6px 12px;
    min-width: fit-content;
    border-radius: 10px;
    background: #f5f5f7;
    font-size: 13px;
    align-items: center;
  }


  .sago-cat-item.sago-cat-active {
    background: #e8edff;
  }

  .sago-cat-icon-wrap {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }

  .sago-cat-count {
    display: none;
    /* Ẩn trên mobile để gọn */
  }

  .sago-archive-main {
    flex: 1;
    width: 100%;
    padding: 12px 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Modal overlay – Single du-an (Facebook post popup style)
═══════════════════════════════════════════════════════════════════════════ */

/* Scroll lock: body được xử lý bằng JS position:fixed (lockBodyScroll) */

/* Backdrop */
.sago-post-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: sagoModalFadeIn .2s ease;
}

.sago-post-modal-overlay.sago-modal-open {
  display: flex;
}

@keyframes sagoModalFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Panel chính */
.sago-post-modal {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .3);
  animation: sagoModalSlideUp .22s ease;
}

@keyframes sagoModalSlideUp {
  from {
    transform: translateY(24px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Header */
.sago-post-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid #e4e6ea;
  gap: 8px;
  flex-shrink: 0;
}

.sago-post-modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1c1e21;
  flex: 1;
  text-align: center;
}

/* Nút đóng X */
.sago-post-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #e4e6ea;
  color: #050505;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
  padding: 0;
  margin: 0px;
}

.sago-post-modal-close:hover {
  background: #d0d2d6;
}

/* Body – cuộn được */
.sago-post-modal-body {
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
}

.sago-post-modal-body::-webkit-scrollbar {
  width: 4px;
}

.sago-post-modal-body::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

/* Card bên trong modal: bỏ box-shadow ngoài */
.sago-post-modal-body .sago-timeline-card {
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}

/* Spinner loading */
.sago-modal-spinner {
  display: flex;
  justify-content: center;
  padding: 48px 0;
}

/* Responsive */
@media (max-width: 639px) {
  .sago-post-modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .sago-post-modal {
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    max-width: 100%;
  }
}

/* Wrapper cho share button – cần position:relative nếu dùng absolute fallback */
.sago-action-share-wrap {
  position: relative;
  flex: 1;
}

/* ═══════════════════════════════════════════════
   PJAX Navigation – Transitions
═══════════════════════════════════════════════ */

/* Progress bar kiểu YouTube ở top */
#sago-pjax-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #1877f2, #42b72a);
  z-index: 99999;
  transition: width 0.35s ease, opacity 0.25s ease;
  pointer-events: none;
  opacity: 0;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(24, 119, 242, 0.5);
}

#sago-pjax-bar.sago-pjax-bar-active {
  opacity: 1;
}

#sago-pjax-bar.sago-pjax-bar-done {
  width: 100% !important;
  opacity: 0;
  transition: width 0.15s ease, opacity 0.4s ease 0.15s;
}

/* Feed area fade khi PJAX */
.sago-archive-main {
  transition: opacity 0.22s ease;
}

.sago-archive-main.sago-pjax-out {
  opacity: 0;
  pointer-events: none;
}

/* Sidebar cat links – active highlight + disabled khi loading */
.sago-cat-menu.sago-pjax-loading .sago-cat-item {
  pointer-events: none;
  opacity: 0.6;
}

/* ── Single / Modal view: h1-h5 giữ nguyên cho SEO, style như <strong> ─── */
.sago-post-modal-body .sago-card-desc h1,
.sago-post-modal-body .sago-card-desc h2,
.sago-post-modal-body .sago-card-desc h3,
.sago-post-modal-body .sago-card-desc h4,
.sago-post-modal-body .sago-card-desc h5 {
  font-size: 1em;
  font-weight: 700;
  line-height: inherit;
  margin: 0;
  padding: 0;
  display: inline;
}

/* ═══════════════════════════════════════════════════════════════
   SAGO CLOCK – Đồng hồ & Lịch tuần + Lịch tháng  [sago_clock]
   ═══════════════════════════════════════════════════════════════ */

.sago-clock-widget {

  color: #1a1a2e;
  padding: 20px 0 8px;
  max-width: 440px;
  text-align: center;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}

/* Tiêu đề */
.sago-clock-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #8a8fa8;
  text-transform: uppercase;
  margin: 0 0 6px;
}

/* Wrap giờ: flex baseline để giây nhỏ căn đúng */
.sago-clock-time {
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

/* Giờ:Phút lớn */
.sago-clock-hhmm {
  font-size: 64px;
  font-weight: 800;
  color: #1a6ef5;
  letter-spacing: -2px;
}

/* Giây nhỏ – nằm sát phải, baseline */
.sago-clock-ss {
  font-size: 22px;
  font-weight: 700;
  color: #1a6ef5;
  letter-spacing: 0;
  margin-left: 3px;
  line-height: 1;
  align-self: flex-end;
  padding-bottom: 6px;
}

.sago-clock-sep {
  display: inline-block;
  transition: opacity 0.2s;
  margin: 0 1px;
}

/* Ngày tháng dương lịch */
.sago-clock-date {
  font-size: 15px;
  font-weight: 500;
  color: #444;
  margin-bottom: 2px;
}

/* Ngày âm lịch headline */
.sago-clock-lunar {
  font-size: 13px;
  font-weight: 600;
  color: #1a6ef5;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  text-transform: uppercase;
}

/* ─── Lịch tuần compact ──────────────────────────────────── */
.sago-clock-calendar {
  background: #fff;
  border-radius: 14px;

  padding: 14px 10px 10px;
  overflow: hidden;
}

.sago-cal-header,
.sago-cal-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}

.sago-cal-header {
  margin-bottom: 4px;
}

.sago-cal-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.sago-cal-head {
  font-size: 12px;
  font-weight: 600;
  color: #8a8fa8;
  height: 28px;
}

/* Ô ngày tuần compact: cột dọc solar + lunar */
.sago-cal-day {
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
  border-radius: 50%;
  cursor: default;
  transition: background 0.15s;
  width: 42px;
  margin: 0 auto;
}

.sago-cal-solar {
  font-size: 16px;
  font-weight: 500;
  color: #222;
  line-height: 1.1;
}

.sago-cal-lunarday {
  font-size: 10px;
  color: #8a8fa8;
  line-height: 1;
}

.sago-cal-day.sago-cal-today {
  background: #1a6ef5;
  border-radius: 10px;
}

.sago-cal-day.sago-cal-today .sago-cal-solar {
  color: #fff;
  font-weight: 700;
}

.sago-cal-day.sago-cal-today .sago-cal-lunarday {
  color: rgba(255, 255, 255, 0.8);
}

/* ─── Nút Xem thêm ──────────────────────────────────────── */
.sago-cal-footer {
  text-align: center;
  margin-top: 8px;
  border-top: 1px solid #f0f0f0;
  padding-top: 8px;
}

.sago-cal-more-btn {
  background: none;
  border: none;
  color: #1a6ef5;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sago-cal-more-btn:hover {
  opacity: 0.75;
  background: none;
}

.sago-cal-chevron {
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  transform: translateY(1px);
  transition: transform 0.25s ease;
}

/* ═══════════════════════════════════════════════════════════
   LỊCH THÁNG ĐẦY ĐỦ
   ═══════════════════════════════════════════════════════════ */
.sago-fullcal {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
  padding: 12px 8px 16px;
  margin-top: 10px;
  animation: sagoCalFadeIn 0.2s ease;
}

@keyframes sagoCalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header điều hướng */
.sago-fullcal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 4px;
}

.sago-fullcal-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a2e;
}

.sago-fullcal-prev,
.sago-fullcal-next {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  color: #1a6ef5;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  padding: 0;
  line-height: 1;
}

.sago-fullcal-prev:hover,
.sago-fullcal-next:hover {
  background: #f0f4ff;
}

/* Header ngày */
.sago-fullcal-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 2px;
}

.sfc-head-cell {
  font-size: 12px;
  font-weight: 600;
  color: #8a8fa8;
  padding: 4px 0;
}

/* Lưới ngày */
.sago-fullcal-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px 0;
}

.sfc-day-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px 2px;
  border-radius: 8px;
  cursor: default;
  min-height: 46px;
  transition: background 0.12s;
}

.sfc-day-cell:hover:not(.sfc-blank) {
  background: #f0f4ff;
}

.sfc-solar {
  font-size: 15px;
  font-weight: 500;
  color: #222;
  line-height: 1.2;
}

.sfc-lunar {
  font-size: 10px;
  color: #8a8fa8;
  line-height: 1.2;
  font-weight: 500;
}

/* Ngày 1 âm lịch – tô màu xanh nhạt */
.sfc-lunar.sfc-lunar-month {
  color: #1a6ef5;
  font-weight: 700;
  font-size: 9px;
}

/* Ngày của tháng trước/sau – mờ */
.sfc-blank .sfc-solar,
.sfc-blank .sfc-lunar {
  color: #ccc;
}

/* Ngày hôm nay */
.sfc-today {
  background: #1a6ef5 !important;
  border-radius: 10px;
}

.sfc-today .sfc-solar {
  color: #fff;
  font-weight: 700;
}

.sfc-today .sfc-lunar {
  color: rgba(255, 255, 255, 0.8);
}

.sfc-today .sfc-lunar.sfc-lunar-month {
  color: rgba(255, 255, 255, 0.9);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Shortcode layout: sticky clock (cột trái) + mobile sticky cat menu
═══════════════════════════════════════════════════════════════════════════ */

/* Clock sticky trên desktop (large): bám theo scroll giống sidebar phải */
#sago-clock-sticky {
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  scrollbar-width: none;
}

#sago-clock-sticky::-webkit-scrollbar {
  display: none;
}

/* Mobile sticky cat menu (shortcode): ẩn trên desktop */
.sago-cat-sticky-wrap.show-for-medium {
  display: none;
}

/* Tablet & Mobile (< 960px): hiện sticky menu ngang trên feed */
@media (max-width: 959px) {
  .sago-cat-sticky-wrap.show-for-medium {
    display: block;
    position: sticky;
    top: 0;
    z-index: 200;
    background: #fff;
    border-bottom: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    border-radius: 10px;
    margin-bottom: 10px;
  }

  /* Menu ngang cuộn trong sticky wrap mobile */
  .sago-cat-sticky-wrap.show-for-medium .sago-cat-menu {
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 0px;
    box-shadow: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-left: -10px;
    margin-right: -10px;
  }

  .sago-cat-sticky-wrap.show-for-medium .sago-cat-menu::-webkit-scrollbar {
    display: none;
  }
}