/* ========================================
   vbulletin.css — tuyencongchuc.com
   LAYOUT ONLY — dùng var(--vb-*) tokens
   Color tokens ở theme files:
     - /styles/themes/vb3.css (mặc định vB 3.x)
     - /styles/themes/vb4.css (vB 4.2 retro)
   Background images (trống đồng + hoa sen) dùng
   chung cho mọi theme.
   ======================================== */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--vb-font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--vb-text);
  /* Hoa sen background — GIỮ từ theme gốc, áp dụng cho mọi theme.
     Màu nền vàng đồng (vb3) / xám nhạt (vb4) đến từ --vb-bg-tint. */
  background: var(--vb-bg-tint) url('/images/img_phong-nen-dai-hoi-cong-doan-3(1).jpg') center bottom/cover no-repeat fixed;
}

a {
  color: var(--vb-link);
  text-decoration: none;
}
a:hover {
  color: var(--vb-link-hover);
  text-decoration: underline;
}

img { max-width: 100%; height: auto; }

/* --- Layout --- */
.forum-layout {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--vb-bg);
  min-height: 100vh;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* --- Header --- */
.forum-header {
  background: linear-gradient(135deg, var(--vb-grad-header-start), var(--vb-grad-header-end));
  padding: 20px 24px;
  color: white;
  position: relative;
  overflow: hidden;
}
.forum-header::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Trống đồng background — GIỮ từ theme gốc, áp dụng cho mọi theme.
     Blend mode/opacity/filter từ --vb-header-blend-*. */
  background: url('/images/trong-dong.webp') center/cover no-repeat;
  opacity: var(--vb-header-blend-opacity);
  mix-blend-mode: var(--vb-header-blend-mode);
  filter: var(--vb-header-blend-filter);
  pointer-events: none;
}
.header-inner { display: flex; flex-direction: column; gap: 4px; position: relative; z-index: 1; }
.logo-row { display: flex; align-items: center; gap: 14px; }
.logo-icon { flex-shrink: 0; }
.logo-link { color: white; text-decoration: none; }
.logo-link:hover { text-decoration: none; color: white; }
.logo-text { font-size: 28px; font-weight: 700; margin: 0; letter-spacing: -0.5px; }
.logo-tagline { font-size: 12px; opacity: 0.8; }

/* --- Navbar --- */
.forum-navbar {
  background: linear-gradient(to bottom, var(--vb-grad-navbar-start), var(--vb-grad-navbar-end));
  border-bottom: 2px solid var(--vb-blue-mid);
  padding: 0 24px;
}
.nav-list {
  display: flex;
  list-style: none;
  gap: 0;
}
.nav-link {
  display: block;
  padding: 10px 18px;
  color: var(--vb-text-on-dark);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-right: 1px solid rgba(255,255,255,0.1);
  transition: background 0.2s;
}
.nav-link:hover {
  background: rgba(255,255,255,0.1);
  color: white;
  text-decoration: none;
}

/* --- Content Layout --- */
.forum-content {
  display: flex;
  gap: 20px;
  padding: 20px 24px;
}
.forum-main { flex: 1; min-width: 0; }
.forum-sidebar { width: 240px; flex-shrink: 0; position: sticky; top: 20px; align-self: flex-start; }

/* --- Sidebar --- */
.sidebar-box {
  border: 1px solid var(--vb-border);
  border-radius: var(--vb-radius);
  margin-bottom: 16px;
  overflow: hidden;
}
.sidebar-header {
  background: linear-gradient(to bottom, var(--vb-grad-sidebar-start), var(--vb-grad-sidebar-end));
  color: white;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sidebar-body {
  padding: 10px 12px;
  font-size: 13px;
}
.stat-line {
  padding: 4px 0;
  border-bottom: 1px dotted var(--vb-border);
}
.stat-line:last-child { border-bottom: none; }
.filter-list { list-style: none; }
.filter-list li {
  padding: 4px 0;
  border-bottom: 1px dotted var(--vb-border);
}
.filter-list li:last-child { border-bottom: none; }
.filter-list a { font-size: 13px; }

/* --- No Ads Banner --- */
.no-ads-banner {
  background: linear-gradient(135deg, var(--vb-grad-header-start), var(--vb-grad-header-end));
  color: white;
  padding: 12px;
  border-radius: var(--vb-radius);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* --- Forum Table (Recruitment Listing) --- */
.forum-category {
  border: 1px solid var(--vb-border);
  border-radius: var(--vb-radius);
  margin-bottom: 16px;
  overflow: hidden;
}
.forum-category-header {
  background: linear-gradient(to bottom, var(--vb-grad-cat-start), var(--vb-grad-cat-end));
  color: white;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.forum-category-body { }

.forum-table {
  width: 100%;
  border-collapse: collapse;
}
.forum-table th {
  background: var(--vb-blue-pale);
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--vb-blue-darkest);
  text-align: left;
  border-bottom: 1px solid var(--vb-border);
}
.forum-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--vb-border-row);
  font-size: 13px;
  vertical-align: top;
}
.forum-table tr:hover { background: var(--vb-row-hover); }

/* ===== vB 4.2 row striping (alt1/alt2 alternating) =====
 * Áp dụng tự động cho mọi .forum-table trong toàn site
 * (recruitments, vanban, vstep, hoidap, tuyen-dung, ...).
 * Hover override stripe qua :hover td bên dưới.
 */
.forum-table tbody tr:nth-child(odd) td { background: var(--vb-alt1-bg); }
.forum-table tbody tr:nth-child(even) td { background: var(--vb-alt2-bg); }
.forum-table tr:hover td { background: var(--vb-row-hover); }

.icon-col { width: 36px; text-align: center; }
.title-col { }
.num-col { width: 60px; text-align: center; color: var(--vb-text-muted); font-size: 12px; }
.last-col { width: 140px; font-size: 11px; color: var(--vb-text-muted); }

.thread-title {
  font-weight: 600;
  color: var(--vb-link);
  font-size: 14px;
}
.thread-title:hover { color: var(--vb-link-hover); }
.thread-meta {
  font-size: 11px;
  color: var(--vb-text-muted);
  margin-top: 2px;
}

/* --- Forum Icon (folder) --- */
.forum-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* Heroicon folder SVGs with matching colors */
.forum-icon.folder-new {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231E3F8E'%3E%3Cpath d='M19.5 21a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h15ZM1.5 10.146V6a3 3 0 0 1 3-3h5.379a2.25 2.25 0 0 1 1.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 0 1 3 3v1.146A4.483 4.483 0 0 0 19.5 9h-15a4.483 4.483 0 0 0-3 1.146Z'/%3E%3C/svg%3E");
}
.forum-icon.folder-hot {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233B6FC9'%3E%3Cpath d='M19.5 21a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h15ZM1.5 10.146V6a3 3 0 0 1 3-3h5.379a2.25 2.25 0 0 1 1.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 0 1 3 3v1.146A4.483 4.483 0 0 0 19.5 9h-15a4.483 4.483 0 0 0-3 1.146Z'/%3E%3C/svg%3E");
}
.forum-icon.folder-old {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888'%3E%3Cpath d='M19.5 21a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h15ZM1.5 10.146V6a3 3 0 0 1 3-3h5.379a2.25 2.25 0 0 1 1.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 0 1 3 3v1.146A4.483 4.483 0 0 0 19.5 9h-15a4.483 4.483 0 0 0-3 1.146Z'/%3E%3C/svg%3E");
}
.forum-icon.folder-locked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230F1F4F'%3E%3Cpath d='M19.5 21a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h15ZM1.5 10.146V6a3 3 0 0 1 3-3h5.379a2.25 2.25 0 0 1 1.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 0 1 3 3v1.146A4.483 4.483 0 0 0 19.5 9h-15a4.483 4.483 0 0 0-3 1.146Z'/%3E%3C/svg%3E");
}

/* --- Badges --- */
.vb-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: white;
}
.vb-badge.job-open { background: var(--vb-free); }
.vb-badge.job-urgent { background: var(--vb-locked); }
.vb-badge.job-closed { background: var(--vb-old); }
.vb-badge.job-filled { background: var(--vb-locked); }
.vb-badge.job-new { background: var(--vb-new); }
.vb-badge.thread-replies {
  background: var(--vb-info-text);
  text-decoration: none;
  font-size: 10px;
}

/* Thread link bar (chi tiết tuyển dụng → thread) */
.thread-link-bar {
  padding: 12px;
  margin: 8px 0;
  background: var(--vb-info-bg);
  border: 1px solid var(--vb-info-border);
  border-radius: 4px;
  text-align: center;
}
.thread-link-bar .vb-btn-primary {
  background: var(--vb-info-text);
  color: white;
  text-decoration: none;
}
.thread-link-bar .vb-btn-primary:hover {
  background: var(--vb-info-text-dark);
}

/* --- Buttons --- */
.vb-btn {
  display: inline-block;
  padding: 8px 18px;
  background: linear-gradient(to bottom, var(--vb-blue-mid), var(--vb-blue-dark));
  color: white;
  border: 1px solid var(--vb-blue-darkest);
  border-radius: var(--vb-radius);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}
.vb-btn:hover {
  background: linear-gradient(to bottom, var(--vb-blue-dark), var(--vb-blue-darkest));
  color: white;
  text-decoration: none;
}
.vb-btn-secondary {
  background: linear-gradient(to bottom, var(--vb-bg-alt), var(--vb-border));
  color: var(--vb-text);
  border-color: var(--vb-border);
}
.vb-btn-secondary:hover {
  background: linear-gradient(to bottom, var(--vb-border), var(--vb-border-dark));
  color: var(--vb-text);
}

/* --- Stats Bar --- */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--vb-blue-pale);
  border: 1px solid var(--vb-blue-light);
  border-radius: var(--vb-radius);
  padding: 14px;
  text-align: center;
}
.stat-card .stat-number {
  font-size: 28px;
  font-weight: 700;
  color: var(--vb-blue-darkest);
  line-height: 1.2;
}
.stat-card .stat-label {
  font-size: 11px;
  color: var(--vb-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* --- Breadcrumb --- */
.breadcrumb {
  font-size: 12px;
  color: var(--vb-text-muted);
  padding: 10px 0;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--vb-border);
}
.breadcrumb a { color: var(--vb-link); }
.breadcrumb span { margin: 0 6px; color: var(--vb-divider); }

/* --- Page H1 + Description (SEO) --- */
.page-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--vb-blue-darkest);
  margin: 8px 0;
  font-family: var(--vb-font);
}
/* VSTEP page title: nhỏ gọn vì banner đã làm hero */
.vstep-page-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--vb-text-muted);
  margin: 4px 0 8px;
  line-height: 1.4;
}
.page-description {
  font-size: 14px;
  color: var(--vb-text-muted);
  line-height: 1.6;
  margin: 0 0 16px;
}

/* --- Post Card (Recruitment Detail) --- */
.post-card {
  border: 1px solid var(--vb-border);
  border-radius: var(--vb-radius);
  margin-bottom: 16px;
  overflow: hidden;
}
.post-header {
  background: linear-gradient(to bottom, var(--vb-grad-post-start), var(--vb-grad-post-end));
  padding: 14px 16px;
  border-bottom: 1px solid var(--vb-border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.post-header-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--vb-blue-darkest);
}
.post-body {
  padding: 16px;
  line-height: 1.8;
}
.post-body h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--vb-blue-darkest);
  margin: 16px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--vb-blue-pale);
}
.post-body ul {
  margin-left: 20px;
  margin-bottom: 12px;
}
.post-body li {
  margin-bottom: 4px;
}

/* --- Info Grid (Quick Facts) --- */
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.info-item {
  background: var(--vb-bg-alt);
  border: 1px solid var(--vb-border);
  border-radius: var(--vb-radius);
  padding: 8px 12px;
  font-size: 13px;
}
.info-item .info-label {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--vb-text-muted);
  letter-spacing: 0.5px;
}
.info-item .info-value {
  font-weight: 600;
  color: var(--vb-blue-darkest);
  margin-top: 2px;
}

/* --- Pagination --- */
.vb-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 0;
}
.vb-pagination a,
.vb-pagination span {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--vb-border);
  border-radius: 3px;
  font-size: 12px;
  color: var(--vb-link);
}
.vb-pagination a:hover {
  background: var(--vb-blue-pale);
  text-decoration: none;
}
.vb-pagination .current {
  background: var(--vb-blue-dark);
  color: white;
  border-color: var(--vb-link);
}

/* --- Sort Bar --- */
.sort-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--vb-bg-alt);
  border: 1px solid var(--vb-border);
  border-radius: var(--vb-radius);
  margin-bottom: 12px;
  font-size: 12px;
}
.sort-bar label { color: var(--vb-text-muted); font-weight: 600; }
.sort-bar select {
  padding: 4px 8px;
  border: 1px solid var(--vb-border);
  border-radius: 3px;
  font-size: 12px;
  font-family: var(--vb-font);
}

/* --- CTA Banner --- */
.cta-banner {
  background: linear-gradient(135deg, var(--vb-warning-bg), #FFE0B2);
  border: 1px solid var(--vb-warning-border);
  border-radius: var(--vb-radius);
  padding: 16px 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cta-banner .cta-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--vb-warning-text);
}

/* --- Quiz CTA bar (VSTEP home) --- */
.quiz-cta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #1565C0, #0D47A1);
  color: white;
  padding: 14px 20px;
  border-radius: var(--vb-radius, 6px);
  margin: 0 0 16px;
  box-shadow: 0 2px 8px rgba(13, 71, 161, 0.2);
}
.quiz-cta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 200px;
}
.quiz-cta-text strong { font-size: 15px; }
.quiz-cta-text span { font-size: 12px; opacity: 0.9; }
.quiz-cta-btn {
  background: white !important;
  color: #0D47A1 !important;
  border: none !important;
  font-weight: 700 !important;
}
.quiz-cta-btn:hover { background: #F0F4FA !important; transform: translateY(-1px); }
@media (max-width: 600px) {
  .quiz-cta-bar { padding: 12px 14px; }
  .quiz-cta-text strong { font-size: 14px; }
}

/* --- Site notice (warning block dưới intro) --- */
.site-notice {
  background: var(--vb-warning-bg);
  border: 1px solid var(--vb-warning-border);
  border-left: 4px solid var(--vb-warning-border);
  border-radius: var(--vb-radius);
  padding: 12px 16px;
  margin: 0 0 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--vb-warning-text);
}
.site-notice-icon {
  font-size: 18px;
  line-height: 1.3;
  flex-shrink: 0;
}
.site-notice-text {
  flex: 1;
}
@media (max-width: 480px) {
  .site-notice { font-size: 13px; padding: 10px 12px; }
  .site-notice-icon { font-size: 16px; }
}

/* --- Search Box --- */
.vb-search {
  margin-bottom: 16px;
}
.vb-search-input {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--vb-blue-light);
  border-radius: var(--vb-radius);
  font-size: 14px;
  font-family: var(--vb-font);
  transition: border-color 0.2s;
}
.vb-search-input:focus {
  outline: none;
  border-color: var(--vb-blue-mid);
}

/* --- FAQ Accordion --- */
.faq-section { margin-bottom: 24px; }
.faq-category-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--vb-blue-darkest);
  padding: 10px 0;
  border-bottom: 2px solid var(--vb-blue-mid);
  margin-bottom: 8px;
}
.faq-item {
  border: 1px solid var(--vb-border);
  border-radius: var(--vb-radius);
  margin-bottom: 6px;
  overflow: hidden;
}
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--vb-bg-alt);
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--vb-blue-darkest);
}
.faq-question:hover { background: var(--vb-blue-pale); }
.faq-answer {
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.7;
  display: none;
}
.faq-item.active .faq-answer { display: block; }
.faq-toggle {
  font-size: 18px;
  color: var(--vb-blue-mid);
  transition: transform 0.2s;
}
.faq-item.active .faq-toggle { transform: rotate(45deg); }

/* --- Footer --- */
.forum-footer {
  background: var(--vb-blue-darkest);
  color: var(--vb-text-on-dark);
  padding: 20px 24px;
  font-size: 12px;
  text-align: center;
}
.footer-inner { }
.footer-links { margin-bottom: 8px; }
.footer-links a { color: var(--vb-text-on-dark); margin: 0 4px; }
.footer-links a:hover { color: white; }
.footer-copy { color: var(--vb-text-footer); }

/* --- Location/Field Header --- */
.location-header {
  background: linear-gradient(135deg, var(--vb-locked), #D32F2F);
  color: white;
  padding: 20px;
  border-radius: var(--vb-radius);
  margin-bottom: 16px;
}
.location-header h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
}
.location-header .subtitle {
  font-size: 13px;
  opacity: 0.85;
}

.field-header {
  background: linear-gradient(135deg, var(--vb-blue-darkest), var(--vb-blue-dark));
  color: white;
  padding: 20px;
  border-radius: var(--vb-radius);
  margin-bottom: 16px;
}
.field-header h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
}
.field-header .subtitle {
  font-size: 13px;
  opacity: 0.85;
}

/* --- Q&A specific --- */
.qa-header {
  background: linear-gradient(135deg, var(--vb-blue-darkest), var(--vb-blue-dark));
  color: white;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.qa-header h2, .qa-header .page-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.qa-header .subtitle { font-size: 13px; opacity: 0.85; }

.qa-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--vb-blue-dark);
  color: white;
}

.forum-icon.folder-qa {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231E3F8E'%3E%3Cpath d='M19.5 21a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h15ZM1.5 10.146V6a3 3 0 0 1 3-3h5.379a2.25 2.25 0 0 1 1.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 0 1 3 3v1.146A4.483 4.483 0 0 0 19.5 9h-15a4.483 4.483 0 0 0-3 1.146Z'/%3E%3C/svg%3E");
}

/* --- Van ban phap luat --- */
.vanban-header {
  background: linear-gradient(135deg, #8B0000, var(--vb-locked));
  color: white;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.vanban-header h2, .vanban-header .page-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.vanban-header .subtitle { font-size: 13px; opacity: 0.85; }
.vanban-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--vb-locked);
  color: white;
}
.forum-icon.folder-vanban {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B71C1C'%3E%3Cpath d='M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625Z'/%3E%3Cpath d='M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z'/%3E%3C/svg%3E");
}

.forum-icon.folder-vstep {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231B3A6B'%3E%3Cpath d='M11.25 4.533A9.707 9.707 0 0 0 6 3a9.735 9.735 0 0 0-3.25.555.75.75 0 0 0-.5.707v14.25a.75.75 0 0 0 1 .707A8.237 8.237 0 0 1 6 18.75c1.995 0 3.823.707 5.25 1.886V4.533ZM12.75 20.636A8.214 8.214 0 0 1 18 18.75c.966 0 1.89.166 2.75.47a.75.75 0 0 0 1-.708V4.262a.75.75 0 0 0-.5-.707A9.735 9.735 0 0 0 18 3a9.707 9.707 0 0 0-5.25 1.533v16.103Z'/%3E%3C/svg%3E");
}

/* --- VBPL Status Badges --- */
.vbpl-status { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.vbpl-status.chl { background: var(--vb-success-bg); color: var(--vb-success-text); }
.vbpl-status.cchl { background: var(--vb-warning-bg); color: var(--vb-warning-text); }
.vbpl-status.hhl { background: var(--vb-danger-bg); color: var(--vb-danger-text); }

/* Action buttons cho văn bản (Tải PDF, Xem nguồn, Sao chép, In) */
.vbpl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  background: var(--vb-bg-alt);
  border: 1px solid var(--vb-border);
  border-top: none;
  border-radius: 0 0 4px 4px;
}
.vbpl-actions .vb-btn {
  font-size: 13px;
  padding: 6px 14px;
}

/* Van-ban: TOC sidebar (mục lục) cho văn bản dài */
.vbpl-doc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 20px;
  align-items: start;
  margin-top: 12px;
}
.vbpl-doc-main {
  min-width: 0; /* prevent grid overflow */
  line-height: 1.7;
  font-size: 14px;
}
.vbpl-doc-main p { margin: 0 0 12px; }
.vbpl-doc-main h2,
.vbpl-doc-main h3,
.vbpl-doc-main h4 {
  scroll-margin-top: 80px; /* offset khi scroll-spy scrollIntoView */
  margin: 20px 0 10px;
  color: var(--vb-blue-darkest);
}
.vbpl-doc-main h2 { font-size: 18px; border-bottom: 1px solid var(--vb-border); padding-bottom: 6px; }
.vbpl-doc-main h3 { font-size: 15px; }
.vbpl-doc-main h4 { font-size: 14px; color: var(--vb-blue-dark); }

/* Điều/Khoản có id inject — slight visual để TOC link jump tới */
.vbpl-doc-main p[id^="dieu-"],
.vbpl-doc-main p[id^="khoan-"],
.vbpl-doc-main p[id^="muc-"] {
  scroll-margin-top: 80px;
}

/* TOC sidebar (desktop sticky) */
.vbpl-toc-sidebar {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--vb-bg-alt);
  border: 1px solid var(--vb-border);
  border-radius: 4px;
  font-size: 13px;
}
.vbpl-toc-header {
  padding: 10px 12px;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--vb-blue-darkest);
  background: var(--vb-blue-pale);
  border-bottom: 1px solid var(--vb-border);
  position: sticky;
  top: 0;
}
.vbpl-toc-nav {
  padding: 6px 0;
}
.vbpl-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vbpl-toc-item {
  margin: 0;
  padding: 0;
}
.vbpl-toc-link {
  display: block;
  padding: 6px 12px 6px 16px;
  color: var(--vb-text);
  text-decoration: none;
  line-height: 1.4;
  border-left: 3px solid transparent;
  transition: all 0.15s;
}
.vbpl-toc-link:hover {
  background: var(--vb-blue-pale);
  color: var(--vb-link);
}
.vbpl-toc-link.active {
  background: var(--vb-blue-pale);
  border-left-color: var(--vb-blue-dark);
  color: var(--vb-blue-darkest);
  font-weight: 600;
}
/* Indent theo level (Điều = 2, Khoản = 3) */
.vbpl-toc-level-2 { padding-left: 0; }
.vbpl-toc-level-2 .vbpl-toc-link { padding-left: 14px; font-weight: 500; }
.vbpl-toc-level-3 .vbpl-toc-link { padding-left: 28px; font-size: 12px; color: var(--vb-text-muted); }
.vbpl-toc-level-3 .vbpl-toc-link.active { color: var(--vb-blue-dark); }

/* Mobile TOC — collapsed mặc định */
.vbpl-toc-mobile {
  display: none;
  margin: 12px 0;
  background: var(--vb-bg-alt);
  border: 1px solid var(--vb-border);
  border-radius: 4px;
  font-size: 13px;
}
.vbpl-toc-mobile summary {
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  background: var(--vb-blue-pale);
  border-radius: 4px;
  list-style: none;
}
.vbpl-toc-mobile summary::-webkit-details-marker { display: none; }
.vbpl-toc-mobile summary::before {
  content: "▼";
  display: inline-block;
  margin-right: 6px;
  font-size: 10px;
  transition: transform 0.15s;
}
.vbpl-toc-mobile[open] summary::before { transform: rotate(-90deg); }
.vbpl-toc-mobile > .vbpl-toc-list {
  padding: 8px 0;
}
.vbpl-toc-mobile .vbpl-toc-link {
  padding: 6px 14px;
}

@media (max-width: 900px) {
  .vbpl-doc-layout {
    grid-template-columns: 1fr;
  }
  .vbpl-toc-sidebar { display: none; }
  .vbpl-toc-mobile { display: block; }
}

@media print {
  /* In — ẩn TOC + action buttons */
  .vbpl-toc-sidebar, .vbpl-toc-mobile, .vbpl-actions { display: none !important; }
  .vbpl-doc-layout { grid-template-columns: 1fr; }
}

/* Recruitment: action bar (Xem nguồn gốc + Sao chép + In) */
.rec-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  margin-top: 12px;
  background: var(--vb-bg-alt);
  border: 1px solid var(--vb-border);
  border-radius: 4px;
}
.rec-actions .vb-btn {
  font-size: 13px;
  padding: 6px 14px;
}

@media print {
  .rec-actions, .vb-actions, .vbpl-actions { display: none !important; }
}

/* Hoidap: Lời giải panel — nổi bật answer cho user dễ scan */
.qa-answer-panel {
  margin: 16px 0;
  padding: 16px 20px;
  background: linear-gradient(to bottom, #FFFDE7, #FFF9C4);
  border-left: 4px solid #F9A825;
  border-radius: 4px;
}
.qa-answer-empty {
  background: var(--vb-bg-alt);
  border-left-color: var(--vb-border-dark);
}
.qa-answer-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 14px;
  color: #E65100;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.qa-answer-empty .qa-answer-header { color: var(--vb-text-muted); }
.qa-answer-icon { font-size: 18px; }
.qa-answer-body { font-size: 14px; line-height: 1.7; color: var(--vb-text); }
.qa-answer-body p:first-child { margin-top: 0; }
.qa-answer-body p:last-child { margin-bottom: 0; }

/* Hoidap: filter chips */
.qa-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 20px;
}
.qa-filter-btn {
  display: inline-block;
  padding: 6px 14px;
  background: var(--vb-bg-alt);
  border: 1px solid var(--vb-border);
  border-radius: 14px;
  font-size: 12px;
  text-decoration: none;
  color: var(--vb-text);
  transition: all 0.15s;
}
.qa-filter-btn:hover {
  background: var(--vb-blue-pale);
  border-color: var(--vb-blue-light);
}
.qa-filter-btn.active {
  background: var(--vb-blue-darkest);
  color: white;
  border-color: var(--vb-blue-darkest);
}

/* VSTEP: thread progress badge (Bài X/Y) */
.vstep-thread-progress {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 16px;
  padding: 6px 12px;
  background: var(--vb-blue-pale);
  border: 1px solid var(--vb-blue-light);
  border-radius: 14px;
  font-size: 13px;
}
.vstep-thread-label {
  color: var(--vb-text-muted);
}
.vstep-thread-link {
  color: var(--vb-blue-darkest);
  font-weight: 600;
  text-decoration: none;
}
.vstep-thread-link:hover { text-decoration: underline; }
.vbpl-status.chuaapdung { background: var(--vb-neutral-bg); color: var(--vb-neutral-text); }
.vbpl-status.dangapdung { background: var(--vb-info-bg); color: var(--vb-info-text); }
.vbpl-status.other { background: #FFF3E0; color: var(--vb-warning-text); }

/* --- VBPL Search Form --- */
.vbpl-search-wrapper { }
.vbpl-search-wrapper .vb-search-input { width: 100%; }

/* --- VBPL Filter Row --- */
.vbpl-filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.vbpl-filter-row select { padding: 6px 10px; border: 1px solid var(--vb-border); border-radius: var(--vb-radius); font-size: 12px; font-family: var(--vb-font); min-width: 140px; background: white; }
.vbpl-filter-row .vb-btn { padding: 6px 14px; font-size: 12px; }

/* --- VBPL Abstract Block --- */
.vbpl-abstract {
  background: var(--vb-blockquote-bg);
  border-left: 3px solid var(--vb-blockquote-border);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--vb-text-strong);
}

/* --- VBPL Document Content --- */
.vbpl-doc-content { font-size: 15px; line-height: 1.8; }
.vbpl-doc-content table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.vbpl-doc-content table td,
.vbpl-doc-content table th { border: 1px solid var(--vb-border); padding: 8px; font-size: 13px; }
.vbpl-doc-content table th { background: var(--vb-blue-pale); font-weight: 600; }
.vbpl-doc-content h1,
.vbpl-doc-content h2,
.vbpl-doc-content h3 { color: var(--vb-blue-darkest); margin: 16px 0 8px; }
.vbpl-doc-content h1 { font-size: 20px; text-align: center; }
.vbpl-doc-content h2 { font-size: 16px; border-bottom: 1px solid var(--vb-blue-pale); padding-bottom: 4px; }
.vbpl-doc-content p { margin-bottom: 8px; text-align: justify; }
.vbpl-doc-content ul,
.vbpl-doc-content ol { margin-left: 20px; margin-bottom: 12px; }
.vbpl-doc-content img { max-width: 100%; height: auto; }

/* --- JSON-LD (hidden) --- */
script[type="application/ld+json"] { display: none; }

/* ============================================
   VSTEP ÔN TẬP SECTION
   ============================================ */
.vstep-header {
  background: linear-gradient(135deg, var(--vb-blue-darkest), var(--vb-blue-dark));
  color: white;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.vstep-header h2, .vstep-header .page-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.vstep-header .subtitle { font-size: 13px; opacity: 0.85; }

.vstep-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.vstep-badge.level-basic { background: var(--vb-free); color: white; }
.vstep-badge.level-b1 { background: var(--vb-info-text); color: white; }
.vstep-badge.level-b2 { background: var(--vb-sticky); color: #000; }
.vstep-badge.level-advanced { background: var(--vb-locked); color: white; }

.forum-icon.folder-vstep {
  width: 42px;
  height: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%233B6FC9'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25' /%3E%3C/svg%3E");
  background-size: 28px;
  background-position: center;
  background-repeat: no-repeat;
}

.thread-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--vb-border);
  margin-top: 20px;
  font-size: 13px;
}
.thread-nav a {
  color: var(--vb-link);
  text-decoration: none;
}
.thread-nav a:hover {
  text-decoration: underline;
}

.audio-player {
  background: var(--vb-bg-alt);
  border: 1px solid var(--vb-border);
  border-radius: 6px;
  padding: 12px;
  margin: 16px 0;
}
.audio-player audio {
  width: 100%;
}
.audio-player .audio-label {
  font-size: 12px;
  color: var(--vb-text-muted);
  margin-bottom: 6px;
}
.audio-player-list {
  background: var(--vb-bg-alt);
  border: 1px solid var(--vb-border);
  border-radius: 6px;
  padding: 12px;
  margin: 16px 0;
}
.audio-player-list .audio-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--vb-text-strong);
  margin-bottom: 10px;
}
.audio-player-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 6px 0;
  border-bottom: 1px dotted var(--vb-border);
}
.audio-player-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.audio-index {
  font-size: 11px;
  font-weight: 600;
  color: var(--vb-link);
  white-space: nowrap;
  min-width: 70px;
}
.audio-player-item audio {
  flex: 1;
  height: 36px;
}

/* ============================================
   THREAD POST — Forum style (mega-thread view)
   ============================================ */
/* Thread container */
.thread-posts {
  margin: 16px 0;
}

/* Each post = a reply card (vBulletin forum style) */
.thread-post {
  display: flex;
  border: 1px solid var(--vb-border);
  border-radius: var(--vb-radius);
  margin-bottom: 12px;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  overflow: hidden;
}

/* Left sidebar: author info */
.post-sidebar {
  width: 130px;
  min-width: 130px;
  padding: 0;
  background: var(--vb-bg-alt);
  border-right: 1px solid var(--vb-border);
  text-align: center;
  font-size: 12px;
}
.post-sidebar-header {
  background: linear-gradient(to bottom, var(--vb-blue-dark), var(--vb-blue-darkest));
  color: white;
  padding: 8px 10px;
  font-size: 11px;
}
.post-sidebar-body {
  padding: 12px 10px;
}
.post-author {
  font-weight: 700;
  color: var(--vb-link);
  font-size: 13px;
  margin-bottom: 4px;
}
.post-author-role {
  font-size: 10px;
  color: var(--vb-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.post-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--vb-blue-light), var(--vb-blue-mid));
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 22px;
  font-weight: 700;
}
.post-date {
  color: var(--vb-text-muted);
  font-size: 11px;
}

/* Right content area */
.post-content-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Post header bar (gradient top bar with #number, badge, date) */
.post-header-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: linear-gradient(to bottom, var(--vb-blue-pale), #EDF2F8);
  border-bottom: 1px solid var(--vb-border);
  font-size: 12px;
}
.post-number {
  font-weight: 700;
  color: var(--vb-link);
  font-size: 13px;
}
.post-header-date {
  margin-left: auto;
  color: var(--vb-text-muted);
  font-size: 11px;
}

/* Post title */
.post-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--vb-blue-darkest);
  margin: 12px 16px 0;
  padding-bottom: 10px;
  border-bottom: 1px dotted var(--vb-border);
}
.post-title a {
  color: inherit;
  text-decoration: none;
}
.post-title a:hover {
  text-decoration: underline !important;
}

/* Post body content */
.post-content {
  padding: 12px 16px 16px;
  line-height: 1.8;
  font-size: 14px;
}
.post-content h2 {
  font-size: 17px;
  font-weight: 700;
  margin: 20px 0 10px;
  color: var(--vb-blue-darkest);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--vb-border-row);
}
.post-content h3 { font-size: 15px; margin: 16px 0 8px; color: var(--vb-text-strong); }
.post-content p { margin-bottom: 10px; }
.post-content ul, .post-content ol { margin-left: 20px; margin-bottom: 12px; }
.post-content li { margin-bottom: 4px; }
.post-content strong { color: var(--vb-text); }
.post-content table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
.post-content th, .post-content td { border: 1px solid var(--vb-border); padding: 6px 10px; }
.post-content th { background: var(--vb-blue-pale); font-weight: 600; text-align: left; }
.post-content tr:nth-child(even) td { background: var(--vb-bg-alt); }

/* Post footer */
.post-footer {
  padding: 6px 16px;
  border-top: 1px solid var(--vb-border-row);
  background: var(--vb-bg-alt);
  font-size: 11px;
  color: var(--vb-text-muted);
  display: flex;
  gap: 16px;
}

/* Responsive: stack sidebar on mobile */
@media (max-width: 600px) {
  .thread-post { flex-direction: column; }
  .post-sidebar {
    width: 100%; min-width: 100%;
    border-right: none; border-bottom: 1px solid var(--vb-border);
  }
  .post-sidebar-header {
    display: flex; align-items: center; gap: 8px;
  }
  .post-sidebar-body {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; text-align: left;
  }
  .post-avatar { width: 36px; height: 36px; font-size: 14px; margin: 0; }
  .post-author-role { display: none; }
}

/* --- Mobile: responsive table — keep all columns, stack cells vertically --- */
@media (max-width: 768px) {
  /* Convert table → block layout: mỗi row = block, mỗi cell = full-width dòng */
  .forum-table,
  .forum-table thead,
  .forum-table tbody,
  .forum-table tr,
  .forum-table td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Hide header — labels will be added via ::before trên mỗi cell */
  .forum-table thead { display: none; }

  /* Mỗi row = card */
  .forum-table tr {
    margin-bottom: 10px;
    border: 1px solid var(--vb-border);
    border-radius: 8px;
    background: white;
    padding: 10px 12px;
    transition: border-color 0.15s;
  }
  .forum-table tr:hover { border-color: var(--vb-blue-mid); background: #F8FAFE; }

  /* Cells: full-width, no border, no padding gap */
  .forum-table td {
    border: none !important;
    padding: 3px 0 !important;
    text-align: left !important;
  }

  /* Icon: ẩn (decorative) */
  .icon-col { display: none !important; }

  /* Title: lên đầu, lớn */
  .title-col {
    margin-bottom: 4px;
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--vb-border-row) !important;
  }
  .title-col::before { content: none; }
  .title-col .thread-title { font-size: 15px; line-height: 1.35; }
  .title-col .thread-meta {
    font-size: 11px;
    margin-top: 3px;
    color: var(--vb-text-muted);
    line-height: 1.4;
  }
  .title-col .thread-meta span { white-space: nowrap; }
  .title-col .thread-meta span + span::before { content: " · "; opacity: 0.6; }

  /* Ẩn count badge trong meta (num-col sẽ hiển thị) */
  .title-col .vb-badge.thread-replies { display: none !important; }

  /* Bài viết + Lượt xem: 2 col inline trên cùng hàng, gọn 1 dòng */
  .num-col {
    display: inline-block !important;
    width: 50% !important;
    font-size: 12px !important;
    color: var(--vb-text-strong) !important;
    text-align: left !important;
    margin-top: 2px;
    padding: 0 !important;
  }
  .num-col::before {
    content: attr(data-label) ": ";
    display: inline;
    font-size: 10px;
    font-weight: 600;
    color: var(--vb-border-dark);
    text-transform: uppercase;
    margin-right: 2px;
  }
  .num-col strong { font-weight: 600; color: var(--vb-text); }

  /* Bài mới nhất: full width, compact 1-2 dòng */
  .last-col {
    width: 100% !important;
    margin-top: 4px;
    padding-top: 6px !important;
    border-top: 1px solid var(--vb-border-row) !important;
    font-size: 12px !important;
  }
  .last-col > div {
    display: inline;
    font-size: 11px;
    color: var(--vb-border-dark);
  }
  .last-col > div span[style*="MỚI"] { font-size: 8px !important; padding: 1px 4px !important; }
  .last-col a {
    display: block !important;
    max-width: 100% !important;
    white-space: normal !important;
    font-size: 12px;
    color: var(--vb-link);
    margin-top: 2px;
  }

  /* Empty state */
  .forum-table td[colspan]:not([colspan="1"]) {
    text-align: center !important;
    padding: 24px 16px !important;
    color: var(--vb-old);
    border: none !important;
  }
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .forum-content { flex-direction: column; }
  .forum-sidebar { width: 100%; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .info-grid { grid-template-columns: 1fr; }
  .nav-list { flex-wrap: wrap; }
  .forum-header { padding: 12px 14px; }
  .logo-text { font-size: 18px; }
  .logo-icon { width: 32px; height: 32px; }
  .logo-row { gap: 10px; }
  .logo-tagline { display: none; }
  .nav-link { padding: 8px 12px; font-size: 11px; }
}

/* --- Cross-linking box --- */
.crosslink-box {
  margin-top: 16px;
  border: 1px solid var(--vb-blue-light);
  border-radius: 4px;
  background: var(--vb-bg-alt);
}
.crosslink-header {
  background: linear-gradient(to bottom, var(--vb-blue-pale), var(--vb-blue-light));
  border-bottom: 1px solid var(--vb-blue-light);
  padding: 6px 10px;
  font-weight: 600;
  font-size: 12px;
  color: var(--vb-blue-darkest);
}
.crosslink-body {
  padding: 8px 10px;
}
.crosslink-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.crosslink-list li {
  padding: 4px 0;
  border-bottom: 1px dotted var(--vb-blue-light);
  font-size: 12px;
}
.crosslink-list li:last-child {
  border-bottom: none;
}
.crosslink-list a {
  color: var(--vb-blue-darkest);
  text-decoration: none;
}
.crosslink-list a:hover {
  text-decoration: underline;
  color: var(--vb-locked);
}

/* Sidebar highlight box */
.sidebar-highlight .highlight-item {
  padding: 6px 0;
  border-bottom: 1px dotted var(--vb-blue-light);
}
.sidebar-highlight .highlight-item:last-child {
  border-bottom: none;
}
.sidebar-highlight .highlight-desc {
  display: block;
  font-size: 11px;
  color: var(--vb-text-muted);
  margin-top: 2px;
  line-height: 1.4;
}

/* Footer section links */
.footer-sections {
  margin-bottom: 6px;
}
.footer-sections a {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  font-size: 12px;
}
.footer-sections a:hover {
  color: white;
  text-decoration: underline;
}

/* --- Navbar: search trigger button --- */
.forum-navbar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}
.navbar-end {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
  align-self: center;
}
.rss-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #FFA726;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255, 167, 38, 0.10);
  border: 1px solid rgba(255, 167, 38, 0.30);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.rss-link:hover {
  background: rgba(255, 167, 38, 0.25);
  border-color: rgba(255, 167, 38, 0.75);
  color: #FB8C00;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(255, 167, 38, 0.25);
}
.rss-link:active {
  transform: translateY(0);
  background: rgba(255, 167, 38, 0.30);
}
.rss-link:focus-visible {
  outline: 2px solid #FFA726;
  outline-offset: 2px;
}
.rss-link svg { color: #FB8C00; flex-shrink: 0; }
.rss-external { opacity: 0.6; margin-left: 2px; }
.rss-link:hover .rss-external { opacity: 1; }
.rss-text { line-height: 1; }
.search-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  margin: 6px 0;
  transition: background 0.15s, border-color 0.15s;
  align-self: center;
}
.search-trigger:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.3);
  color: white;
}
.search-trigger-text { line-height: 1; }
.search-kbd {
  display: inline-block;
  padding: 1px 5px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 3px;
  font-size: 10px;
  font-family: monospace;
  margin-left: 2px;
}

/* --- Search overlay (Cmd/Ctrl+K) --- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  pointer-events: none;
}
.search-overlay.open {
  display: flex;
  pointer-events: auto;
  animation: search-fade-in 0.2s ease;
}
@keyframes search-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.search-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 25, 50, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.search-overlay-panel {
  position: relative;
  width: min(640px, 92vw);
  max-height: 70vh;
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: search-slide-down 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes search-slide-down {
  from { transform: translateY(-20px) scale(0.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.search-overlay-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--vb-border);
}
.search-overlay-icon { color: var(--vb-blue-mid); flex-shrink: 0; }
.search-overlay-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 17px;
  padding: 6px 0;
  color: var(--vb-text);
}
.search-overlay-input::placeholder { color: var(--vb-border-dark); font-size: 15px; }
.search-overlay-kbd {
  padding: 2px 6px;
  background: var(--vb-bg-light);
  border: 1px solid var(--vb-border);
  border-radius: 4px;
  font-size: 10px;
  font-family: monospace;
  color: var(--vb-text-muted);
}
.search-overlay-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.search-overlay-empty {
  padding: 32px 24px;
  text-align: center;
  color: var(--vb-border-dark);
  font-size: 14px;
}
.search-overlay-tips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 16px;
}
.search-overlay-tips a {
  display: inline-block;
  padding: 4px 12px;
  background: var(--vb-blue-pale);
  color: var(--vb-link);
  border-radius: 14px;
  font-size: 12px;
  text-decoration: none;
  transition: all 0.15s;
}
.search-overlay-tips a:hover {
  background: var(--vb-blue-mid);
  color: white;
}
.search-overlay-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 18px;
  text-decoration: none;
  color: inherit;
  border-left: 3px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}
.search-overlay-item:hover,
.search-overlay-item.active {
  background: var(--vb-blue-pale);
  border-left-color: var(--vb-blue-mid);
}
.search-overlay-item-label {
  display: inline-block;
  align-self: flex-start;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--vb-text-muted);
  background: var(--vb-bg-light);
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}
.search-overlay-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--vb-text);
  line-height: 1.4;
}
.search-overlay-item-title :global(mark) {
  background: var(--vb-sticky);
  color: var(--vb-text);
  padding: 0 2px;
  border-radius: 2px;
}
.search-overlay-item-snippet {
  font-size: 12px;
  color: var(--vb-text-muted);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.search-overlay-item-snippet :global(mark) {
  background: var(--vb-sticky);
  color: var(--vb-text);
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 600;
}
.search-overlay-more {
  display: block;
  text-align: center;
  padding: 12px;
  font-size: 13px;
  color: var(--vb-blue-mid);
  text-decoration: none;
  border-top: 1px solid var(--vb-border);
  font-weight: 500;
}
.search-overlay-more:hover {
  background: var(--vb-blue-pale);
}
.search-overlay-foot {
  display: flex;
  gap: 16px;
  justify-content: center;
  padding: 8px 18px;
  border-top: 1px solid var(--vb-border);
  font-size: 11px;
  color: var(--vb-text-muted);
  background: var(--vb-bg-light);
}
.search-overlay-foot kbd {
  display: inline-block;
  padding: 1px 4px;
  background: white;
  border: 1px solid var(--vb-border);
  border-radius: 3px;
  font-size: 10px;
  font-family: monospace;
  margin-right: 3px;
}

/* --- View Transitions (Astro ClientRouter) --- */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.22s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
::view-transition-old(root) {
  animation-name: vt-fade-out;
}
::view-transition-new(root) {
  animation-name: vt-fade-in;
}
@keyframes vt-fade-out {
  to { opacity: 0; transform: translateY(-4px); }
}
@keyframes vt-fade-in {
  from { opacity: 0; transform: translateY(4px); }
}

/* --- Mobile adjustments --- */
@media (max-width: 768px) {
  .search-trigger-text { display: none; }
  .search-kbd { display: none; }
  .search-trigger { padding: 6px 10px; }
  .search-overlay-panel { max-height: 80vh; }
  .search-overlay-input { font-size: 16px; } /* tránh iOS zoom */
  .rss-text { display: none; }
  .rss-link { padding: 6px 8px; }
}

/* =====================================================
 * vB 4.2 Forum-style components
 * (ForumList, ThreadList, PostBit, Breadcrumb, SubNav)
 * ===================================================== */

/* ===== Forum List (homepage) ===== */
.forumlist {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--vb-border);
  border-top: 0;
  background: var(--vb-tborder-bg);
}
.forumbit {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--vb-tborder-bg);
}
.forumbit:last-child { border-bottom: 0; }
.forumbit .folder {
  padding: 12px;
  text-align: center;
  width: 64px;
  flex-shrink: 0;
  background: var(--vb-alt1-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.forumbit .folder svg { width: 48px; height: 48px; }
.forumbit .info {
  padding: 12px 16px;
  flex: 1;
  min-width: 0;
  background: var(--vb-alt2-bg);
}
.forumbit .info h2 {
  margin: 0 0 4px;
  font: bold 12pt var(--vb-font-base);
  font-weight: 700;
}
.forumbit .info h2 a { color: var(--vb-link); }
.forumbit .info h2 a:hover { color: var(--vb-link-hover); }
.forumbit .info .desc {
  font-size: 10pt;
  color: var(--vb-text-muted);
  line-height: 1.5;
}
.forumbit .stats {
  padding: 12px 8px;
  text-align: center;
  width: 110px;
  flex-shrink: 0;
  font-size: 10pt;
  background: var(--vb-alt1-bg);
}
.forumbit .stats strong {
  font-size: 12pt;
  color: var(--vb-link);
  font-weight: 700;
}
.forumbit .lastpost {
  padding: 12px;
  text-align: left;
  width: 240px;
  flex-shrink: 0;
  font-size: 10pt;
  line-height: 1.5;
  background: var(--vb-alt1-bg);
}
.forumbit .lastpost a { color: var(--vb-link); }
.forumbit .lastpost a:hover { color: var(--vb-link-hover); }

/* ===== Thread List (category page) ===== */
.threadbit .icon { padding: 8px 6px 8px 10px; width: 32px; text-align: center; vertical-align: middle; }
.threadbit .icon svg { width: 18px; height: 18px; vertical-align: middle; }
.threadbit .title-cell { padding: 8px 12px; vertical-align: middle; }
.threadbit .title-cell h3 {
  margin: 0 0 2px;
  font-size: 11pt;
  font-weight: normal;
  line-height: 1.4;
}
.threadbit .title-cell h3 a { color: var(--vb-link); }
.threadbit .title-cell h3 a:hover { color: var(--vb-link-hover); }
.threadbit .title-cell .meta {
  font-size: 10pt;
  color: var(--vb-text-muted);
}
.threadbit .title-cell .badge {
  display: inline-block;
  background: var(--vb-link-hover);
  color: #fff;
  font: bold 9px var(--vb-font-base);
  padding: 1px 5px;
  margin-right: 4px;
  border-radius: 2px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.threadbit .title-cell .badge.green { background: #2E7D32; }
.threadbit .title-cell .badge.gray { background: #888; }
.threadbit .count {
  padding: 8px;
  width: 80px;
  text-align: center;
  font-size: 10pt;
  vertical-align: middle;
}
.threadbit .count strong { color: var(--vb-link); font-size: 11pt; }
.threadbit .lastpost {
  padding: 8px;
  width: 220px;
  font-size: 10pt;
  line-height: 1.5;
  vertical-align: middle;
}
.threadbit .lastpost a { color: var(--vb-link); }
.threadbit .lastpost a:hover { color: var(--vb-link-hover); }
.threadbit .lastpost .smallfont { font-size: 10pt; }

/* ===== Postbit (legacy / vB3-style) ===== */
.postbitlegacy {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--vb-tborder-bg);
}
.postbitlegacy:last-child { border-bottom: 0; }
.postbitlegacy .postdetails {
  width: 200px;
  flex-shrink: 0;
  background: var(--vb-alt2-bg);
  padding: 16px 12px;
  text-align: center;
  border-right: 1px solid var(--vb-tborder-bg);
}
.postbitlegacy .avatar {
  width: 100px;
  height: 100px;
  background: #C0C4D6;
  border: 1px solid #888;
  margin: 0 auto 8px;
  line-height: 100px;
  color: #888;
  font-size: 10pt;
}
.postbitlegacy .username {
  font-size: 14pt;
  margin: 0 0 4px;
  font-weight: normal;
}
.postbitlegacy .username a { color: var(--vb-link); }
.postbitlegacy .username a:hover { color: var(--vb-link-hover); }
.postbitlegacy .username img.icon { vertical-align: middle; height: 14px; margin-left: 2px; }
.postbitlegacy .usertitle {
  font-size: 11px;
  color: var(--vb-text-muted);
  margin: 0 0 6px;
  font-style: italic;
}
.postbitlegacy .userstats {
  font-size: 10pt;
  color: var(--vb-text-muted);
  line-height: 1.6;
}
.postbitlegacy .postbody {
  flex: 1;
  min-width: 0;
  background: var(--vb-alt1-bg);
  padding: 16px 20px;
}
.postbitlegacy .posthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed var(--vb-tborder-bg);
  padding-bottom: 6px;
  margin-bottom: 12px;
  font-size: 10pt;
}
.postbitlegacy .posthead .postnum {
  color: var(--vb-link);
  font-weight: bold;
}
.postbitlegacy .posthead a { color: var(--vb-link); }
.postbitlegacy .posthead a:hover { color: var(--vb-link-hover); }
.postbitlegacy .postcontent {
  line-height: 1.6;
  font-size: 11pt;
  color: #000;
}
.postbitlegacy .postcontent p { margin: 0 0 10px; }
.postbitlegacy .postcontent h2,
.postbitlegacy .postcontent h3 {
  color: var(--vb-thead-bg);
  font: bold 13px var(--vb-font-base);
  margin: 14px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--vb-alt3-bg);
}
.postbitlegacy .postcontent h2 { font-size: 14px; }
.postbitlegacy .postcontent ul,
.postbitlegacy .postcontent ol { margin: 0 0 10px 24px; }
.postbitlegacy .postcontent li { margin-bottom: 4px; }
.postbitlegacy .postcontent blockquote {
  margin: 10px 0;
  padding: 10px 14px;
  background: var(--vb-alt2-bg);
  border-left: 3px solid var(--vb-tcat-bg);
  font-style: italic;
  color: #333;
}
.postbitlegacy .postcontent blockquote .source {
  font-style: normal;
  color: var(--vb-text-muted);
  font-size: 10pt;
  margin-bottom: 6px;
  font-weight: bold;
}
.postbitlegacy .postcontent table {
  border-collapse: collapse;
  margin: 10px 0;
  width: 100%;
}
.postbitlegacy .postcontent table th,
.postbitlegacy .postcontent table td {
  border: 1px solid var(--vb-tborder-bg);
  padding: 6px 10px;
  font-size: 10pt;
}
.postbitlegacy .postcontent table th {
  background: var(--vb-thead-bg);
  color: #fff;
  font-weight: bold;
}
.postbitlegacy .postfoot {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--vb-tborder-bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.postbitlegacy .postcontrols { display: flex; gap: 4px; flex-wrap: wrap; }
.postbitlegacy .postsignature {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dotted var(--vb-tborder-bg);
  font-size: 10pt;
  color: var(--vb-text-muted);
  font-style: italic;
}
.postbitlegacy .postsignature strong { color: var(--vb-link); }

/* --- PDF Summary box (từ parse-pdf.mjs + minimax) --- */
.pdf-summary {
  background: linear-gradient(to bottom, #FFFDE7, #FFF9C4);
  border: 1px solid #FFC107;
  border-left: 4px solid #FFA000;
  border-radius: 6px;
  padding: 12px 16px;
  margin: 10px 0 16px;
  font-size: 13px;
  line-height: 1.6;
}
.pdf-summary h3 {
  color: #E65100 !important;
  font-size: 14px !important;
  margin: 8px 0 6px !important;
  border-bottom: 1px solid #FFE082;
  padding-bottom: 4px;
}
.pdf-summary h3:first-child { margin-top: 0 !important; }
.pdf-summary ul { margin: 6px 0 6px 20px; }
.pdf-summary li { margin-bottom: 4px; }
.pdf-summary strong { color: #BF360C; }

/* ===== Postbit (modern / vertical) ===== */
.postbit-modern {
  background: var(--vb-alt1-bg);
  border: 1px solid var(--vb-tborder-bg);
  padding: 16px;
  margin-bottom: 12px;
}
.postbit-modern .posthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--vb-tborder-bg);
}
.postbit-modern .user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.postbit-modern .avatar-sm {
  width: 40px;
  height: 40px;
  background: #C0C4D6;
  border: 1px solid #888;
  line-height: 40px;
  text-align: center;
  color: #888;
  font-size: 9pt;
}
.postbit-modern .usertitle-sm { font-size: 9pt; color: var(--vb-text-muted); font-style: italic; }
.postbit-modern .post-meta { font-size: 10pt; }
.postbit-modern .post-meta .postnum { color: var(--vb-link); font-weight: bold; }
.postbit-modern .postcontent { line-height: 1.6; }
.postbit-modern .postcontent p { margin: 0 0 10px; }
.postbit-modern .postfoot { margin-top: 10px; display: flex; gap: 6px; }

/* ===== Breadcrumb (vB 4.2 style) ===== */
.vb-breadcrumb {
  padding: 8px 0;
  font-size: 11px;
  color: var(--vb-text);
}
.vb-breadcrumb .navbits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline;
}
.vb-breadcrumb .navbits li {
  display: inline;
  color: var(--vb-text);
}
.vb-breadcrumb .navbits li::after {
  content: " › ";
  color: var(--vb-tborder-bg);
  padding: 0 4px;
}
.vb-breadcrumb .navbits li:last-child::after { content: ""; }
.vb-breadcrumb .navbits a { color: var(--vb-link); }
.vb-breadcrumb .navbits a:hover { color: var(--vb-link-hover); }
.vb-breadcrumb .navbits span { color: var(--vb-text); font-weight: 500; }

/* ===== SubNav (province/field filter) ===== */
.subnav-bar {
  background: var(--vb-thead-bg);
  color: #fff;
  padding: 6px 10px;
  margin: 0 0 12px 0;
  font-size: 11px;
  border: 1px solid var(--vb-border);
}
.subnav-bar strong { color: #FFFF66; margin-right: 6px; }
.subnav-bar a {
  color: #fff;
  text-decoration: none;
  padding: 0 4px;
}
.subnav-bar a:hover { color: #FFFF66; text-decoration: underline; }
.subnav-bar a.current { color: #FFFF66; font-weight: bold; }
.subnav-bar .time { color: #B8C0D8; margin: 0 2px; }

/* ===== Legacy breadcrumb (giữ cho backward compat) ===== */
.breadcrumb {
  font-size: 12px;
  color: var(--vb-text-muted);
  padding: 10px 0;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--vb-border);
}
.breadcrumb a { color: var(--vb-link); }
.breadcrumb span { margin: 0 6px; color: var(--vb-divider); }

/* ===== ThreadList table layout fix (override broken flex) ===== */
.threadlist-table {
  table-layout: fixed;
  width: 100%;
}
.threadlist-table col,
.threadlist-table .th-icon,
.threadlist-table .icon {
  width: 36px;
}
.threadlist-table .th-title,
.threadlist-table .title-cell {
  width: auto;
}
.threadlist-table .th-count,
.threadlist-table .count {
  width: 80px;
}
.threadlist-table .th-lastpost,
.threadlist-table .lastpost {
  width: 220px;
}
.threadlist-table .thead {
  padding: 6px 10px;
  font-size: 11px;
  text-transform: uppercase;
  white-space: nowrap;
}
.threadlist-table .thead.th-icon { width: 36px; }
.threadlist-table .thead.th-title { text-align: left; }
.threadlist-table .thead.th-count { text-align: center; }
.threadlist-table .thead.th-lastpost { text-align: left; }
.threadlist-table .title-cell h3 {
  white-space: normal;
  word-break: break-word;
}

/* ===== vB 4.2 standard table classes (tborder/tcat/thead/tfoot/alt1-3) ===== */
.tborder {
  background: var(--vb-tborder-bg);
  border: 1px solid var(--vb-tborder-bg);
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 12px;
}
table.tborder { border-collapse: collapse; }

.tcat {
  background: var(--vb-tcat-bg);
  background-image: linear-gradient(to bottom, var(--vb-blue-light), var(--vb-blue-mid));
  color: #fff;
  font: bold 11px var(--vb-font);
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--vb-tborder-bg);
}
.tcat a, .tcat a:link, .tcat a:visited { color: #fff; text-decoration: none; }
.tcat a:hover { color: #FFFF66; text-decoration: underline; }

.thead {
  background: var(--vb-thead-bg);
  background-image: linear-gradient(to bottom, var(--vb-blue-mid), var(--vb-blue-dark));
  color: #fff;
  font: bold 11px var(--vb-font);
  padding: 4px 8px;
  text-align: left;
  border-bottom: 1px solid var(--vb-tborder-bg);
}
.thead a { color: #fff; }
.thead a:hover { color: #FFFF00; }

.tfoot {
  background: var(--vb-blue-dark);
  color: var(--vb-text-on-dark);
  padding: 6px 8px;
  font: 11px var(--vb-font);
  border-top: 1px solid var(--vb-tborder-bg);
}
.tfoot a { color: #E0E0F6; }
.tfoot a:hover { color: #FFFF66; }

.alt1 { background: var(--vb-alt1-bg); color: var(--vb-text); }
.alt2 { background: var(--vb-alt2-bg); color: var(--vb-text); }
.alt3 { background: var(--vb-alt3-bg); color: var(--vb-text); }

.panel {
  background: var(--vb-blue-pale);
  background-image: linear-gradient(to bottom, #E4E7F5, #D5D8E5);
  border: 1px solid var(--vb-blue-light);
  padding: 8px 10px;
  border-radius: 0;
}

/* ===== ForumList fix: description column gets proper space ===== */
.forumlist {
  width: 100%;
  table-layout: fixed;
}
.forumlist {
  display: block;  /* UL element */
}
.forumbit {
  display: flex !important;
  align-items: stretch;
}

/* ===== SubNav fix: make pipe visible ===== */
.subnav-bar .time,
.subnav-bar .pipe {
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 4px;
  font-weight: bold;
}

/* ===== PostBit info-grid: override old white-card style ===== */
.postbitlegacy .postcontent .info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin: 10px 0 16px;
}
.postbitlegacy .postcontent .info-item {
  background: transparent;
  border: 1px solid var(--vb-tborder-bg);
  border-radius: 3px;
  padding: 6px 10px;
  font-size: 10pt;
}
.postbitlegacy .postcontent .info-item .info-label {
  font-size: 9pt;
  color: var(--vb-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.postbitlegacy .postcontent .info-item .info-value {
  font-size: 11pt;
  color: var(--vb-text);
  font-weight: 500;
}
.postbitlegacy .postcontent h2 {
  color: var(--vb-thead-bg) !important;
  background: var(--vb-blue-pale);
  padding: 6px 10px;
  margin: 16px 0 10px;
  border-left: 3px solid var(--vb-thead-bg);
  font: bold 12px var(--vb-font-base);
}

/* ===== Mobile responsive: stack columns ===== */
@media (max-width: 768px) {
  .forum-content { flex-direction: column; }
  .forum-sidebar { width: 100%; position: static; }
  .forumbit { flex-wrap: wrap; }
  .forumbit .folder { width: 48px; }
  .forumbit .stats { width: 80px; }
  .forumbit .lastpost { width: 100%; }
  .threadlist-table .th-lastpost,
  .threadlist-table .lastpost { display: none; }
  .threadlist-table .th-count,
  .threadlist-table .count { width: 60px; }
  .postbitlegacy { flex-direction: column; }
  .postbitlegacy .postdetails { width: 100%; border-right: 0; border-bottom: 1px solid var(--vb-tborder-bg); }
  .postbitlegacy .postbody { width: 100%; }
}

/* ===== SubNav HARD FIX: rewrite with flex + explicit text rendering ===== */
.subnav-bar {
  background: var(--vb-thead-bg) !important;
  color: #fff !important;
  padding: 8px 12px !important;
  margin: 0 0 12px 0 !important;
  border: 1px solid var(--vb-border) !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}
.subnav-bar strong {
  color: #FFFF66 !important;
  font-weight: bold !important;
  margin-right: 4px !important;
}
.subnav-bar a {
  color: #ffffff !important;
  background: transparent !important;
  text-decoration: none !important;
  padding: 2px 6px !important;
  display: inline-block !important;
  border-radius: 2px !important;
  -webkit-text-fill-color: #fff !important;
  text-decoration-color: transparent !important;
}
.subnav-bar a:hover {
  color: #FFFF66 !important;
  background: rgba(255, 255, 255, 0.1) !important;
  text-decoration: underline !important;
  -webkit-text-fill-color: #FFFF66 !important;
}
.subnav-bar a.current {
  color: #FFFF66 !important;
  font-weight: bold !important;
  background: rgba(255, 255, 255, 0.15) !important;
  -webkit-text-fill-color: #FFFF66 !important;
}
.subnav-bar .pipe {
  color: rgba(255, 255, 255, 0.5) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.5) !important;
  user-select: none !important;
  pointer-events: none !important;
}

/* ===== vb-filter (inline filter nav, replaces SubNav component) ===== */
.vb-filter {
  background: var(--vb-thead-bg);
  color: #fff;
  padding: 8px 12px;
  margin: 0 0 12px 0;
  border: 1px solid var(--vb-border);
  font-size: 12px;
  line-height: 1.5;
}
.vb-filter strong {
  color: #FFFF66;
  font-weight: bold;
  margin-right: 6px;
}
.vb-filter a {
  color: #ffffff;
  text-decoration: none;
  padding: 2px 4px;
  display: inline-block;
  border-radius: 2px;
  -webkit-text-fill-color: #fff;
}
.vb-filter a:hover {
  color: #FFFF66;
  background: rgba(255, 255, 255, 0.1);
  text-decoration: underline;
  -webkit-text-fill-color: #FFFF66;
}
.vb-filter a.current {
  color: #FFFF66;
  font-weight: bold;
  background: rgba(255, 255, 255, 0.15);
  -webkit-text-fill-color: #FFFF66;
}
.vb-filter .sep {
  color: rgba(255, 255, 255, 0.4);
  margin: 0 2px;
  user-select: none;
}