/* ============================================================
   1. CSS VARIABLES
   File này đã dùng ĐÚNG công thức width dùng chung toàn site:
   width: min(var(--wrapper-max-width), calc(100% - var(--wrapper-gutter) * 2))
   với var(--wrapper-*) kế thừa trực tiếp từ var(--isl-wrapper-*) của
   homepage.css (cùng giá trị fallback 1200px / clamp(15px,2vw,20px)),
   nên không cần chỉnh sửa gì thêm để đồng bộ với các trang khác.
   ============================================================ */
:root {
  --wrapper-max-width: var(--isl-wrapper-max-width, 1200px);
  --wrapper-gutter: var(--isl-wrapper-gutter, clamp(15px, 2vw, 20px));

  --color-bg: #f6f8fc;
  --color-surface: #ffffff;
  --color-surface-soft: #fbfcfe;
  --color-border: var(--isl-border-light, #dde4ef);
  --color-text: var(--isl-text-title, #18212f);
  --color-text-muted: var(--isl-text-desc, #4f5b6b);

  --color-primary: var(--isl-red-primary, #00a8eb);
  --color-primary-dark: var(--isl-red-dark, #00a8eb);
  --color-primary-soft: rgba(0, 168, 235, 0.08);

  --color-accent: var(--isl-blue-meta, #eb211b);
  --color-accent-soft: var(--isl-blue-accent-soft, rgba(235, 33, 27, 0.12));

  --radius-xl: var(--isl-radius-lg, 12px);
  --radius-lg: var(--isl-radius-md, 8px);
  --radius-md: var(--isl-radius-md, 8px);
  --shadow-sm: var(--isl-shadow-sm, 0 2px 8px rgba(16, 24, 40, 0.04));
  --shadow-md: var(--isl-shadow-md, 0 12px 30px rgba(16, 24, 40, 0.08));
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* Typography đồng bộ với toàn site */
  --page-title-size: clamp(26px, 1.8vw + 18px, 28px);
  --card-title-size: clamp(18px, 1vw + 15px, 21px);
  --body-size: var(--font-size-base, 15px);
  --meta-size: var(--font-size-sm, 13.5px);
}

/* ============================================================
   2. RESET & BASE STYLES
   ============================================================ */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--isl-font-base, "Be Vietnam Pro", sans-serif);
  font-size: var(--body-size);
  line-height: var(--line-height-base, 1.6);
}

/* ============================================================
   3. LAYOUT & SIDEBAR
   ============================================================ */
.category-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: 20px;
  width: min(
    var(--wrapper-max-width),
    calc(100% - var(--wrapper-gutter) * 2)
  ) !important;
  margin: 26px auto 32px !important;
  padding: 0px 15px !important;
}

.category-content {
  min-width: 0;
}

.category-sidebar {
  position: sticky;
  top: 16px;
  width: 340px;
  margin-top: 31px;
}

.sidebar-box {
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.sidebar-title {
  margin: 0;
  padding: 12px 16px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-size: var(--font-size-lg, 16px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sidebar-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar-menu li {
  border-bottom: 1px solid #eef2f7;
  margin-bottom: 0px !important;
}

.sidebar-menu li:last-child {
  border-bottom: 0;
}

.sidebar-menu li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  color: var(--color-text);
  font-size: var(--font-size-base, 15px);
  font-weight: 500;
  text-decoration: none;
  transition:
    color var(--transition),
    background var(--transition),
    padding-left var(--transition);
}

.sidebar-menu li a:hover {
  padding-left: 20px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.sidebar-select-wrap {
  padding: 12px;
}

.sidebar-select-wrap select {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300a8eb' stroke-width='1.7' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  color: var(--color-text);
  font: inherit;
  appearance: none;
  cursor: pointer;
  outline: none;
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition);
}

.sidebar-box .stats {
  padding: 6px 12px 12px;
}

.sidebar-box .stats div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid #eef2f7;
  color: var(--color-text-muted);
  font-size: var(--font-size-base, 14.5px);
}

.sidebar-box .stats div:last-child {
  border-bottom: 0;
}

.sidebar-box .stats div strong {
  color: var(--color-primary);
  font-size: var(--font-size-base, 14.5px);
  font-weight: 700;
}

/* --- Sidebar dùng lại cho trang chi tiết bài viết (khối ảnh liên kết) --- */
.sidebar-links-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--isl-space-3, 10px);
  padding: 14px;
}

.sidebar-link-item {
  display: block;
  overflow: hidden;
  height: 90px;
  border: 1px solid var(--isl-border-light, #dde4ef);
  border-radius: var(--isl-radius-sm, 4px);
  background: #fff;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.sidebar-link-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--isl-shadow-md, 0 12px 30px rgba(16, 24, 40, 0.08));
}

.sidebar-link-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 8px;
  box-sizing: border-box;
}

/* Sidebar bài viết mới nhất - trang chi tiết bài viết */
.sidebar-menu.sibling-posts li a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  padding: 12px 16px;
}

.sidebar-menu.sibling-posts .post-link-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--font-size-base, 14.5px);
  font-weight: 600;
  line-height: 1.4;
}

.sidebar-menu.sibling-posts a:hover .post-link-title {
  color: var(--color-primary);
}

.sidebar-menu.sibling-posts .post-link-date {
  display: block !important;
  margin-top: 0 !important;
  color: var(--color-accent) !important;
  font-size: var(--font-size-sm, 12.5px) !important;
  font-weight: 500;
}

/* ============================================================
   4. COMPONENTS / WIDGETS (Tiêu đề danh mục, danh sách bài viết, phân trang)
   ============================================================ */
.category-title {
  position: relative;
  margin: 0 0 20px;
  padding-bottom: 12px;
  color: #152845 !important;
  font-family: var(--isl-font-base, "Be Vietnam Pro", sans-serif) !important;
  font-size: var(--font-size-2xl, 22px) !important;
  font-weight: 700 !important;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.category-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100% !important;
  height: 3px;
  border-radius: 999px;
  background: var(--color-accent) !important;
}

.posts-grid {
  display: grid;
  gap: 16px;
}

.post-item {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: stretch;
  height: 160px;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

.post-item:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.post-thumb {
  flex-shrink: 0;
  width: 260px !important;
  height: 100% !important;
  overflow: hidden;
  background: var(--color-surface-soft);
}

.post-thumb a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.post-thumb img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
  transition: transform 0.35s ease;
}

.post-item:hover .post-thumb img {
  transform: scale(1.04);
}

.post-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  height: 100% !important;
  padding: 14px 20px !important;
  box-sizing: border-box;
}

.post-title {
  margin: 0 0 4px !important;
  font-size: var(--font-size-xl, 17px) !important;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.post-title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition);
}

.post-title a:hover {
  color: var(--color-primary);
}

.post-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin: 0 0 6px !important;
  padding: 3px 10px !important;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: var(--meta-size);
  font-weight: 600;
}

.post-date img.emoji {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 4px 0 0 !important;
  vertical-align: -2px !important;
}

.post-excerpt {
  margin: 0 0 8px !important;
  color: var(--color-text-muted);
  font-size: var(--body-size);
  line-height: 1.5;
}

.post-excerpt p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 0 !important;
}

.read-more {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin-top: auto !important;
  padding: 0 !important;
  color: var(--color-primary);
  font-size: var(--font-size-base, 14px);
  font-weight: 700;
  text-decoration: none;
  transition:
    gap var(--transition),
    color var(--transition);
}

.read-more:hover {
  gap: 10px;
  color: var(--color-primary-dark);
}

/* --- Phân trang --- */
.pagination {
  margin-top: 24px;
  text-align: center;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  margin: 0 4px 6px;
  padding: 0 !important;
  border: 1px solid var(--color-border);
  border-radius: 50% !important;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-base, 15px);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  cursor: pointer;
  transition: all var(--transition);
}

.pagination .page-numbers:hover {
  border-color: var(--color-accent) !important;
  background: var(--color-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 15px rgba(235, 33, 27, 0.3) !important;
  transform: translateY(-1px);
}

.pagination .current {
  border-color: var(--color-accent) !important;
  background: var(--color-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(235, 33, 27, 0.25) !important;
  cursor: default;
}

.pagination .prev,
.pagination .next {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
}

/* ============================================================
   5. RESPONSIVE / MEDIA QUERIES
   ============================================================ */
@media (max-width: 1100px) {
  .category-page {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: min(
      var(--wrapper-max-width),
      calc(100% - var(--wrapper-gutter) * 2)
    ) !important;
  }

  .category-sidebar {
    position: static;
    width: 100%;
  }

  .post-item {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .post-thumb {
    width: 220px !important;
  }
}

@media (max-width: 768px) {
  .post-item {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }

  .post-thumb {
    width: 100% !important;
    height: 180px !important;
  }

  .post-content {
    height: auto !important;
    padding: 14px !important;
  }

  .post-title {
    font-size: 18px;
  }

  .post-excerpt {
    margin: 8px 0 !important;
  }
}

/* ============================================================
   Mobile (<=767px) — thu gọn lề trái/phải cho đều với các khối
   khác của site, giảm khoảng trắng dọc. Không ảnh hưởng desktop/
   tablet (>=768px) vì nằm trong media query riêng.
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --wrapper-gutter: 12px;
  }
  .category-page {
    padding: 0px !important;
    margin: var(--isl-space-4, 12px) auto var(--isl-space-6, 16px) !important;
    gap: 14px;
    width: min(
      var(--wrapper-max-width),
      calc(100% - var(--wrapper-gutter) * 2)
    ) !important;
  }

  /* phần còn lại của media query giữ nguyên */
}