/* Dark mode (mặc định) */
body {
    background-color: #1d1f21;
    color: #c9cacc;
}

/* ------------------Dark mode */
[data-theme="dark"] body {
    background-color: #181a1b;
    color: #d4d4d4;
}
[data-theme="dark"] blockquote {
	background-color: #252829 !important;
	color: #b4e4a6 !important;
	border-left: #b4e4a6;
	border-radius: 0.5em;
}

[data-theme="dark"] .post-title,
[data-theme="dark"] .post-content,
[data-theme="dark"] a {
    color: #6ab7d2;
}

[data-theme="dark"] .header {
    background-color: #1a1a1a;
}

[data-theme="dark"] .post-item {
    background-color: #2f2f2f57;
	padding: 0.5em;
	/* border: 1px solid #e0d9c4; */
	border-radius: 10px;
	width: 100%;
    display: block; /* hoặc flex nếu cần, nhưng cần wrap */
    flex-wrap: wrap; /* nếu đang dùng flex */
}

/* Tùy chỉnh các thành phần khác của theme Cactus */
[data-theme="dark"] .footer,
[data-theme="dark"] .nav {
    background-color: #1a1a1a;
    color: #ffffff;
}

[data-theme="dark"] h3 {
    background-color: #3131319c;
	color: #c9c;
}

.theme-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    padding: 10px;
    position: fixed;
    top: 55px;
    right: 20px;
    z-index: 1000;
}

[data-theme="dark"] .theme-toggle-btn {
    color: #ffffff;
}

/*----------------------------- Light mode */
[data-theme="light"] body {
    background-color: #f9f4ef;
    color: #1A202C;
}
[data-theme="light"] .pagination .page-number {
    color: #105ef9;
}
[data-theme="light"] blockquote {
	background-color: #e6e1dc !important;
	color: #2c2a28 !important;
	border-left: #5a5653;
}
[data-theme="light"] blockquote::before {
	color: #825814 !important;
}
[data-theme="light"] a {
    color: #2B6CB0 !important;
}

[data-theme="light"] h3 {
    background-color: #e6e1dc;
	color: #2c2a28;
}
[data-theme="light"] h2 {
	color: #e65d11fa;
}
[data-theme="light"] .hl {
    background-color: #dfa6e9;
	color: #2c2a28;
}
[data-theme="light"] code {
    background-color: #dfa6e9;
	color: #2c2a28;
}
[data-theme="light"] .post-item {
    background-color: #ded1d157;
	padding: 0.5em;
	/* border: 1px solid #e0d9c4; */
	border-radius: 10px;
}
[data-theme="light"] .post-excerpt {
    color: #2c2a28;
	margin-top: 0.5em;
    margin-left: 1em;
    line-height: 1.4;
}
// fancy box
// hien thi tot tren mobie @media
@media (max-width: 480px)
  .article-gallery
    .gallery-item
      img
        width: 180px
        height: 140px

.fancybox__button--close
  position: absolute
  top: 10px
  right: 10px
  background: rgba(0, 0, 0, 0.7)
  color: #fff
  font-size: 24px
  width: 40px
  height: 40px
  line-height: 40px
  text-align: center
  border-radius: 50%
  cursor: pointer
  z-index: 1000
  transition: background 0.2s

  &:hover
    background: rgba(0, 0, 0, 0.9)

.fancybox__caption
  font-family: $font-family-body
  font-size: 14px
  color: #fff
  background: rgba(0, 0, 0, 0.8)
  padding: 10px

/* Gallery */
/* Gallery */
.article-gallery-page
  margin: 1rem 0
  display: grid
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
  gap: 10px
  padding: 10px

  .gallery-item
    display: block
    overflow: hidden
    border-radius: 4px
    transition: all 0.3s ease
    position: relative

    img
      width: 100%
      height: 120px
      object-fit: cover
      display: block
      transition: opacity 0.3s ease

    &:hover
      img
        opacity: 0.7

      .gallery-title-page
        opacity: 1
        transform: translate(-50%, 0)

    .gallery-title-page
      position: absolute
      top: 50%
      left: 50%
      transform: translate(-50%, 100%)
      background: rgba(0, 0, 0, 0.7)
      color: #fff
      padding: 10px
      font-size: 14px
      text-align: center
      opacity: 0
      transition: opacity 0.3s ease, transform 0.3s ease
      white-space: nowrap
      overflow: hidden
      text-overflow: ellipsis
      z-index: 10
      display: block

      &:before, &:after
        content: ''
        position: absolute
        left: 0
        right: 0
        height: 1px
        background: #fff
        opacity: 0.7

      &:before
        top: -5px

      &:after
        bottom: -5px

  @media (max-width: 480px)
    .gallery-item
      img
        height: 100px
      .gallery-title
        font-size: 12px
        padding: 8px