/* TPS Blog redesign 1.0.41 — premium PMU / beauty look
   Scope: blog archive, post category archives, single posts only.
   Do NOT touch homepage .section-tin-tuc (tps-news-reviews.css) or shop cards.
*/

:root {
  --tps-blog-green: #008b4b;
  --tps-blog-green-hover: #006b3a;
  --tps-blog-gold: #fcb900;
  --tps-blog-page-bg: #ebebeb;
  --tps-blog-card: #ffffff;
  --tps-blog-text: #1f2937;
  --tps-blog-muted: #6b7280;
  --tps-blog-border: #e5e7eb;
  --tps-blog-shadow: 0 4px 18px rgba(17, 24, 39, 0.07);
  --tps-blog-shadow-hover: 0 10px 28px rgba(17, 24, 39, 0.12);
  --tps-blog-radius: 16px;
  --tps-blog-blue: #286fdd;
  --tps-content-width: 1240px;
}

/* —— Page shell / background —— */
body.blog,
body.single-post,
body.category:not(.woocommerce):not(.tax-product_cat),
body.archive.category:not(.woocommerce) {
  background-color: var(--tps-blog-page-bg) !important;
}

body.blog #wrapper,
body.single-post #wrapper,
body.category:not(.woocommerce) #wrapper,
body.archive.category:not(.woocommerce) #wrapper,
body.blog #main,
body.single-post #main,
body.category:not(.woocommerce) #main,
body.archive.category:not(.woocommerce) #main {
  background-color: var(--tps-blog-page-bg) !important;
}

.blog-wrapper.blog-archive,
.blog-wrapper.blog-single,
body.blog .blog-wrapper,
body.single-post .blog-wrapper,
body.category:not(.woocommerce) .blog-wrapper {
  background: transparent !important;
  padding-top: 12px !important;
  padding-bottom: 40px !important;
}

.blog-wrapper > .row.row-large,
body.blog .blog-wrapper > .row,
body.single-post .blog-wrapper > .row {
  max-width: var(--tps-content-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Breadcrumb strip spacing — align with account/product (tps-breadcrumb.css) */
body.blog .tps-breadcrumb,
body.single-post .tps-breadcrumb,
body.category:not(.woocommerce) .tps-breadcrumb,
body.blog .breadcrumbs,
body.single-post .breadcrumbs,
body.category:not(.woocommerce) .breadcrumbs,
.blog-wrapper .tps-breadcrumb,
.blog-wrapper .breadcrumbs {
  margin: 0 0 14px !important;
}

/* —— Archive post cards —— */
.blog-wrapper .row.large-columns-3.row-masonry,
body.blog .row.large-columns-3.row-masonry,
body.category:not(.woocommerce) .row.large-columns-3.row-masonry {
  margin-left: -10px !important;
  margin-right: -10px !important;
}

.blog-wrapper .post-item,
body.blog .post-item,
body.category:not(.woocommerce) .post-item {
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin-bottom: 20px !important;
}

.blog-wrapper .post-item .col-inner,
body.blog .post-item .col-inner,
body.category:not(.woocommerce) .post-item .col-inner {
  height: 100%;
}

.blog-wrapper .box.box-blog-post,
body.blog .box.box-blog-post,
body.category:not(.woocommerce) .box.box-blog-post {
  background: var(--tps-blog-card) !important;
  border-radius: var(--tps-blog-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--tps-blog-shadow) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  position: relative !important;
}

.blog-wrapper .post-item:hover .box.box-blog-post,
body.blog .post-item:hover .box.box-blog-post,
body.category:not(.woocommerce) .post-item:hover .box.box-blog-post {
  transform: translateY(-4px) !important;
  box-shadow: var(--tps-blog-shadow-hover) !important;
}

/* Image 16:9 cover — kill Customizer shine on blog only */
.blog-wrapper .box-blog-post .box-image,
body.blog .box-blog-post .box-image,
body.category:not(.woocommerce) .box-blog-post .box-image {
  border-radius: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
}

.blog-wrapper .box-blog-post .image-cover,
body.blog .box-blog-post .image-cover,
body.category:not(.woocommerce) .box-blog-post .image-cover {
  padding-top: 56.25% !important; /* 16:9 */
  padding-bottom: 0 !important;
  height: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #f3f4f6 !important;
}

.blog-wrapper .box-blog-post .box-image img,
.blog-wrapper .box-blog-post .image-cover img,
body.blog .box-blog-post .box-image img,
body.category:not(.woocommerce) .box-blog-post .box-image img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  transition: transform 0.35s ease !important;
}

.blog-wrapper .post-item:hover .box-blog-post .box-image img,
body.blog .post-item:hover .box-blog-post .box-image img {
  transform: scale(1.03) !important;
}

/* Neutralize Flatsome / Customizer shine overlay on blog cards */
.blog-wrapper .box-blog-post .box-image::before,
.blog-wrapper .box-blog-post .box-image::after,
body.blog .box-blog-post .box-image::before,
body.blog .box-blog-post .box-image::after,
body.category:not(.woocommerce) .box-blog-post .box-image::before,
body.category:not(.woocommerce) .box-blog-post .box-image::after,
body.single-post .entry-image::before,
body.single-post .entry-image::after {
  display: none !important;
  content: none !important;
  animation: none !important;
  background: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Card text */
.blog-wrapper .box-blog-post .box-text,
body.blog .box-blog-post .box-text,
body.category:not(.woocommerce) .box-blog-post .box-text {
  padding: 14px 16px 18px !important;
  background: transparent !important;
  flex: 1 1 auto !important;
}

.blog-wrapper .box-blog-post .box-text-inner,
body.blog .box-blog-post .box-text-inner {
  padding: 0 !important;
}

.blog-wrapper .box-blog-post h5.post-title,
.blog-wrapper .box-blog-post .post-title,
body.blog .box-blog-post h5.post-title,
body.category:not(.woocommerce) .box-blog-post h5.post-title {
  font-family: Montserrat, "Be Vietnam Pro", sans-serif !important;
  font-size: 16.5px !important;
  font-weight: 650 !important;
  line-height: 1.4 !important;
  color: var(--tps-blog-text) !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  transition: color 0.2s ease !important;
}

.blog-wrapper .post-item:hover .box-blog-post .post-title,
body.blog .post-item:hover .box-blog-post .post-title,
body.category:not(.woocommerce) .post-item:hover .box-blog-post .post-title {
  color: var(--tps-blog-green) !important;
}

.blog-wrapper .box-blog-post .is-divider,
body.blog .box-blog-post .is-divider,
body.category:not(.woocommerce) .box-blog-post .is-divider {
  display: none !important; /* cleaner premium look */
}

.blog-wrapper .box-blog-post .from_the_blog_excerpt,
body.blog .box-blog-post .from_the_blog_excerpt,
body.category:not(.woocommerce) .box-blog-post .from_the_blog_excerpt {
  font-family: Montserrat, "Be Vietnam Pro", sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--tps-blog-muted) !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Date badge → soft pill (green), not aggressive red square */
.blog-wrapper .box-blog-post .badge.post-date,
body.blog .box-blog-post .badge.post-date,
body.category:not(.woocommerce) .box-blog-post .badge.post-date,
body.single-post .entry-image .badge.post-date {
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.blog-wrapper .box-blog-post .badge.post-date.badge-square,
.blog-wrapper .box-blog-post .badge.post-date .badge-inner,
body.blog .box-blog-post .badge.post-date .badge-inner,
body.category:not(.woocommerce) .box-blog-post .badge.post-date .badge-inner,
body.single-post .entry-image .badge.post-date .badge-inner {
  background: var(--tps-blog-green) !important;
  background-color: var(--tps-blog-green) !important;
  color: #fff !important;
  border-radius: 999px !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 6px 11px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  line-height: 1.1 !important;
  box-shadow: none !important;
}

.blog-wrapper .box-blog-post .badge.post-date .post-date-day,
body.blog .box-blog-post .badge.post-date .post-date-day,
body.single-post .entry-image .badge.post-date .post-date-day {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1 !important;
  display: inline !important;
}

.blog-wrapper .box-blog-post .badge.post-date .post-date-month,
body.blog .box-blog-post .badge.post-date .post-date-month,
body.single-post .entry-image .badge.post-date .post-date-month {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  display: inline !important;
}

.blog-wrapper .box-blog-post .badge.post-date br,
body.blog .box-blog-post .badge.post-date br,
body.single-post .entry-image .badge.post-date br {
  display: none !important;
}

/* Optional category chip if theme outputs one on cards */
.blog-wrapper .box-blog-post .post-meta,
.blog-wrapper .box-blog-post .entry-category,
.blog-wrapper .box-blog-post .cat-label,
body.blog .box-blog-post .entry-category a {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--tps-blog-green) !important;
  border: 1px solid rgba(0, 139, 75, 0.35) !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  margin: 0 0 8px !important;
  background: rgba(0, 139, 75, 0.06) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* —— Sidebar widgets as white cards —— */
.blog-wrapper .post-sidebar,
body.blog .post-sidebar,
body.single-post .post-sidebar,
body.category:not(.woocommerce) .post-sidebar {
  padding-left: 12px !important;
}

.blog-wrapper .post-sidebar .widget,
body.blog .post-sidebar .widget,
body.single-post .post-sidebar .widget,
body.category:not(.woocommerce) .post-sidebar .widget {
  background: var(--tps-blog-card) !important;
  border-radius: var(--tps-blog-radius) !important;
  box-shadow: var(--tps-blog-shadow) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  padding: 18px 16px 14px !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
}

.blog-wrapper .post-sidebar .widget-title,
.blog-wrapper .post-sidebar .widget-title > span,
body.blog .post-sidebar .widget-title,
body.single-post .post-sidebar .widget-title {
  font-family: Montserrat, "Be Vietnam Pro", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--tps-blog-text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 4px !important;
  display: block !important;
}

.blog-wrapper .post-sidebar .widget .is-divider,
body.blog .post-sidebar .widget .is-divider,
body.single-post .post-sidebar .widget .is-divider {
  height: 2px !important;
  max-width: 40px !important;
  background-color: var(--tps-blog-green) !important;
  margin: 0 0 14px !important;
  border: none !important;
}

.blog-wrapper .post-sidebar .recent-blog-posts-li,
body.blog .post-sidebar .recent-blog-posts-li,
body.single-post .post-sidebar .recent-blog-posts-li {
  list-style: none !important;
  margin: 0 0 12px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid var(--tps-blog-border) !important;
}

.blog-wrapper .post-sidebar .recent-blog-posts-li:last-child,
body.single-post .post-sidebar .recent-blog-posts-li:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.blog-wrapper .post-sidebar .recent-blog-posts,
body.single-post .post-sidebar .recent-blog-posts {
  align-items: center !important;
  gap: 10px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Rounded thumbs instead of square date badges in sidebar */
.blog-wrapper .post-sidebar .recent-blog-posts .badge.post-date,
body.single-post .post-sidebar .recent-blog-posts .badge.post-date {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.blog-wrapper .post-sidebar .recent-blog-posts .badge.post-date .badge-inner,
body.single-post .post-sidebar .recent-blog-posts .badge.post-date .badge-inner {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  border-radius: 12px !important;
  padding: 0 !important;
  border: 1px solid var(--tps-blog-border) !important;
  background-size: cover !important;
  background-position: center !important;
}

.blog-wrapper .post-sidebar .recent-blog-posts a,
body.single-post .post-sidebar .recent-blog-posts a {
  font-family: Montserrat, "Be Vietnam Pro", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--tps-blog-text) !important;
  transition: color 0.2s ease !important;
}

.blog-wrapper .post-sidebar .recent-blog-posts a:hover,
body.single-post .post-sidebar .recent-blog-posts a:hover {
  color: var(--tps-blog-green) !important;
}

.blog-wrapper .post-sidebar .post_comments,
body.single-post .post-sidebar .post_comments {
  display: none !important; /* often empty */
}

/* —— Pagination (keep blue #286fdd) —— */
.blog-wrapper .nav-pagination,
body.blog .nav-pagination,
body.category:not(.woocommerce) .nav-pagination {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.blog-wrapper .nav-pagination > li > a,
.blog-wrapper .nav-pagination > li > span,
body.blog .nav-pagination > li > a,
body.blog .nav-pagination > li > span {
  border-radius: 8px !important;
  min-width: 36px !important;
  height: 36px !important;
  line-height: 34px !important;
  font-weight: 600 !important;
}

/* —— Single post —— */
body.single-post .blog-wrapper .large-9 > article,
body.single-post article.post,
body.single-post .article-inner {
  background: var(--tps-blog-card) !important;
  border-radius: var(--tps-blog-radius) !important;
  box-shadow: var(--tps-blog-shadow) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
}

body.single-post .article-inner {
  padding: 0 0 28px !important;
}

body.single-post .entry-header {
  margin: 0 !important;
}

body.single-post .entry-image.relative {
  margin: 0 !important;
  border-radius: var(--tps-blog-radius) var(--tps-blog-radius) 0 0 !important;
  overflow: hidden !important;
  background: #f3f4f6 !important;
}

body.single-post .entry-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;
  object-fit: cover !important;
}

body.single-post .entry-header-text {
  padding: 22px 28px 0 !important;
}

body.single-post .entry-category,
body.single-post h6.entry-category {
  margin: 0 0 10px !important;
}

body.single-post .entry-category a {
  display: inline-block !important;
  font-family: Montserrat, "Be Vietnam Pro", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--tps-blog-green) !important;
  border: 1px solid rgba(0, 139, 75, 0.4) !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  background: rgba(0, 139, 75, 0.06) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

body.single-post .entry-category a:hover {
  background: var(--tps-blog-green) !important;
  color: #fff !important;
  border-color: var(--tps-blog-green) !important;
}

body.single-post h1.entry-title {
  font-family: Montserrat, "Be Vietnam Pro", sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--tps-blog-text) !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  margin: 0 0 12px !important;
}

body.single-post .entry-divider.is-divider {
  max-width: 48px !important;
  height: 3px !important;
  background-color: var(--tps-blog-green) !important;
  margin: 0 0 14px !important;
  opacity: 1 !important;
}

body.single-post .entry-meta {
  font-size: 12.5px !important;
  color: var(--tps-blog-muted) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 4px !important;
}

body.single-post .entry-meta a {
  color: var(--tps-blog-muted) !important;
}

body.single-post .entry-meta a:hover {
  color: var(--tps-blog-green) !important;
}

body.single-post .entry-content.single-page {
  padding: 8px 28px 8px !important;
  max-width: 100% !important;
  font-family: Montserrat, "Be Vietnam Pro", sans-serif !important;
  font-size: 15.5px !important;
  line-height: 1.7 !important;
  color: #374151 !important;
}

body.single-post .entry-content.single-page > *:first-child {
  margin-top: 0 !important;
}

body.single-post .entry-content h2,
body.single-post .entry-content h3 {
  font-family: Montserrat, "Be Vietnam Pro", sans-serif !important;
  font-weight: 700 !important;
  color: var(--tps-blog-text) !important;
  line-height: 1.35 !important;
  margin-top: 1.6em !important;
}

body.single-post .entry-content h2 {
  font-size: 22px !important;
}

body.single-post .entry-content h3 {
  font-size: 18px !important;
}

body.single-post .entry-content p {
  margin-bottom: 1.1em !important;
}

body.single-post .entry-content ul,
body.single-post .entry-content ol {
  padding-left: 1.25em !important;
  margin-bottom: 1.1em !important;
}

body.single-post .entry-content a {
  color: var(--tps-blog-green) !important;
}

body.single-post .entry-content img {
  border-radius: 12px !important;
}

/* Soften share row */
body.single-post .blog-share {
  padding: 8px 28px 4px !important;
  margin-top: 8px !important;
}

body.single-post .blog-share .is-divider {
  max-width: 64px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background-color: var(--tps-blog-border) !important;
  opacity: 0.8 !important;
}

body.single-post .blog-share .social-icons a,
body.single-post .blog-share .icon.button {
  opacity: 0.75 !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

body.single-post .blog-share .social-icons a:hover,
body.single-post .blog-share .icon.button:hover {
  opacity: 1 !important;
  transform: translateY(-1px) !important;
}

/* Next / prev nav inside article card */
body.single-post .navigation-post {
  margin: 16px 28px 0 !important;
  border: none !important;
}

body.single-post .next-prev-nav {
  border-color: var(--tps-blog-border) !important;
  padding-top: 14px !important;
  padding-bottom: 4px !important;
}

body.single-post .next-prev-nav a {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--tps-blog-text) !important;
}

body.single-post .next-prev-nav a:hover {
  color: var(--tps-blog-green) !important;
}

/* Main column breathing room */
body.single-post .blog-wrapper .large-9.col,
body.blog .blog-wrapper .large-9.col,
body.category:not(.woocommerce) .blog-wrapper .large-9.col {
  padding-right: 8px !important;
}

/* —— Mobile —— */
@media (max-width: 849px) {
  .blog-wrapper.blog-archive,
  .blog-wrapper.blog-single,
  body.blog .blog-wrapper,
  body.single-post .blog-wrapper {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 8px !important;
  }

  .blog-wrapper .post-sidebar,
  body.blog .post-sidebar,
  body.single-post .post-sidebar {
    padding-left: 0 !important;
    margin-top: 8px !important;
  }

  body.single-post .entry-header-text,
  body.single-post .entry-content.single-page,
  body.single-post .blog-share,
  body.single-post .navigation-post {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.single-post h1.entry-title {
    font-size: 22px !important;
  }

  body.single-post .entry-content.single-page {
    font-size: 15px !important;
  }

  .blog-wrapper .box-blog-post h5.post-title,
  body.blog .box-blog-post h5.post-title {
    font-size: 16px !important;
  }
}

@media (max-width: 549px) {
  body.single-post h1.entry-title {
    font-size: 20px !important;
  }
}