/* ============================================
   Blog Page — Scoped Styles
   Scope: .blog-page
   ============================================ */

/* Reset heading override từ main.css */
.blog-page h1,
.blog-page h2,
.blog-page h3,
.blog-page h4 {
  font-size: unset;
  font-weight: unset;
  line-height: unset;
  margin: 0;
  padding: 0;
}

/* Typography classes thay thế h1/h2/h3 */
.blog-page .blog-heading {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
}

.blog-page .blog-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}

.blog-page .blog-widget-title {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}

/* ---------- Color tokens ---------- */

.blog-page .bg-brand-blue       { background-color: rgb(38, 60, 111); }
.blog-page .text-brand-blue     { color: rgb(38, 60, 111); }
.blog-page .border-brand-blue   { border-color: rgb(38, 60, 111); }

.blog-page .bg-brand-light      { background-color: #f8fbff; }
.blog-page .text-brand-light    { color: #f8fbff; }

.blog-page .bg-brand-hover      { background-color: #2d3a8c; }
.blog-page .hover\:bg-brand-hover:hover { background-color: #2d3a8c; }

.blog-page .text-ui-text        { color: #111827; }
.blog-page .text-ui-muted       { color: #6b7280; }
.blog-page .bg-ui-bg            { background-color: #f9fafb; }
.blog-page .border-ui-border    { border-color: #e5e7eb; }

/* hover:text-brand-blue */
.blog-page .hover\:text-brand-blue:hover  { color: #1b254b; }
.blog-page .hover\:border-brand-blue:hover { border-color: #1b254b; }

/* group-hover */
.blog-page .group:hover .group-hover\:text-brand-blue { color: #1b254b; }
.blog-page .group:hover .group-hover\:border-brand-blue { border-color: #1b254b; }
.blog-page .group:hover .group-hover\:gap-2 { gap: 0.5rem; }
.blog-page .group:hover .group-hover\:scale-105 { transform: scale(1.05); }

/* shadow tokens */
.blog-page .shadow-soft {
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04);
}
.blog-page .shadow-hover {
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
}
.blog-page .hover\:shadow-hover:hover {
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
}

/* border-brand-blue/20, border-brand-blue/50 */
.blog-page .border-brand-blue\/20 { border-color: rgb(27 37 75 / 0.2); }
.blog-page .border-brand-blue\/50 { border-color: rgb(27 37 75 / 0.5); }
.blog-page .hover\:border-brand-blue\/50:hover { border-color: rgb(27 37 75 / 0.5); }

/* text-brand-blue/40 */
.blog-page .text-brand-blue\/40 { color: rgb(27 37 75 / 0.4); }

/* text-brand-light/80, /60 */
.blog-page .text-brand-light\/80 { color: rgb(248 251 255 / 0.8); }
.blog-page .text-brand-light\/60 { color: rgb(248 251 255 / 0.6); }

/* bg-white/10, /90 */
.blog-page .bg-white\/10 { background-color: rgb(255 255 255 / 0.1); }
.blog-page .bg-white\/90 { background-color: rgb(255 255 255 / 0.9); }

/* border-white/20 */
.blog-page .border-white\/20 { border-color: rgb(255 255 255 / 0.2); }

/* placeholder */
.blog-page .placeholder-white\/50::placeholder { color: rgb(255 255 255 / 0.5); }

/* Category filter buttons */
.blog-page #category-filters button {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
  border-radius: 9999px !important;
  font-size: 0.8rem !important;
}

/* Category filter hover — viền sáng lên */
.blog-page #category-filters button:not(:first-child):hover {
  border-color: #1b254b !important;
  color: #1b254b !important;
}

/* Newsletter input placeholder */
.blog-page .newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Newsletter widget */
.blog-page .folder-tab {
  background-color: #263c6f !important;
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);
  border-radius: 12px !important;
}

.blog-page .folder-tab input {
  border-radius: 8px !important;
  padding: 0.35rem 0.75rem !important;
  font-size: 0.875rem !important;
  background-color: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: white !important;
}

.blog-page .folder-tab input::placeholder {
  color: rgba(255,255,255,0.5) !important;
}

.blog-page .folder-tab button[type="submit"] {
  border-radius: 8px !important;
  padding: 0.35rem 0.75rem !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  background-color: white !important;
  color: #1b254b !important;
}

/* Pagination buttons */
.blog-page .border-ui-border[class*="w-10"] {
  border-radius: 8px !important;
}

.blog-page .border-ui-border[class*="w-10"]:hover {
  border-color: rgb(38, 60, 111) !important;
  color: rgb(38, 60, 111) !important;
}

.blog-page .bg-brand-blue[class*="w-10"] {
  border-radius: 8px !important;
  background-color: rgb(38, 60, 111) !important;
}

/* Pagination */
.blog-page .pg-btn {
  border-radius: 8px !important;
  transition: border-color 0.2s, color 0.2s;
}

.blog-page .pg-btn:hover {
  border-color: rgb(38, 60, 111) !important;
  color: rgb(38, 60, 111) !important;
}

.blog-page .pg-active {
  background-color: rgb(38, 60, 111) !important;
  border: none !important;
}