/* VBPL Design System - HP Style
   Only loaded on /van-ban-phap-luat pages */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Design Tokens */
:root {
  --vbpl-canvas: #ffffff;
  --vbpl-cloud: #f7f7f7;
  --vbpl-fog: #e8e8e8;
  --vbpl-ink: #1a1a1a;
  --vbpl-primary: #024ad8;
  --vbpl-primary-bright: #296ef9;
  --vbpl-primary-deep: #0e3191;
  --vbpl-primary-soft: #c9e0fc;
  --vbpl-charcoal: #3d3d3d;
  --vbpl-graphite: #636363;
  --vbpl-hairline: #e8e8e8;
  --vbpl-steel: #c2c2c2;

  --vbpl-shadow-soft: 0 2px 8px rgba(26, 26, 26, 0.08);
  --vbpl-shadow-float: 0 8px 24px rgba(26, 26, 26, 0.12);

  --vbpl-rounded-card: 16px;
  --vbpl-rounded-btn: 4px;
  --vbpl-rounded-pill: 9999px;

  --vbpl-section-gap: 80px;
}

/* Base styles for VBPL pages */
.vbpl-page {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--vbpl-ink);
  background: var(--vbpl-canvas);
}

/* Typography */
.vbpl-display-lg { font-size: 44px; font-weight: 500; line-height: 1.0; letter-spacing: 0; }
.vbpl-display-md { font-size: 32px; font-weight: 500; line-height: 1.0; }
.vbpl-display-sm { font-size: 24px; font-weight: 500; line-height: 1.17; }
.vbpl-display-xs { font-size: 20px; font-weight: 500; line-height: 1.0; }
.vbpl-body-lg { font-size: 18px; font-weight: 400; line-height: 1.33; }
.vbpl-body-md { font-size: 16px; font-weight: 400; line-height: 1.38; }
.vbpl-body-emphasis { font-size: 16px; font-weight: 500; line-height: 1.38; }
.vbpl-caption-md { font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--vbpl-graphite); }
.vbpl-caption-sm { font-size: 12px; font-weight: 400; line-height: 1.33; color: var(--vbpl-graphite); }
.vbpl-button-md { font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.7px; text-transform: uppercase; }

/* Cards */
.vbpl-card {
  background: var(--vbpl-canvas);
  border-radius: var(--vbpl-rounded-card);
  box-shadow: var(--vbpl-shadow-soft);
  padding: 24px;
}

.vbpl-card-hairline {
  background: var(--vbpl-canvas);
  border: 1px solid var(--vbpl-hairline);
  border-radius: var(--vbpl-rounded-card);
  padding: 24px;
}

.vbpl-card:hover {
  box-shadow: var(--vbpl-shadow-float);
  transition: box-shadow 0.2s ease;
}

/* Buttons */
.vbpl-btn-primary {
  background: var(--vbpl-primary);
  color: white;
  border: none;
  border-radius: var(--vbpl-rounded-btn);
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  cursor: pointer;
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.vbpl-btn-primary:hover {
  background: var(--vbpl-primary-deep);
}

.vbpl-btn-outline {
  background: var(--vbpl-canvas);
  color: var(--vbpl-primary);
  border: 1px solid var(--vbpl-primary);
  border-radius: var(--vbpl-rounded-btn);
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  cursor: pointer;
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Sections */
.vbpl-section-cloud {
  background: var(--vbpl-cloud);
  padding: 80px 0;
}

.vbpl-section-white {
  background: var(--vbpl-canvas);
  padding: 80px 0;
}

.vbpl-section-ink {
  background: var(--vbpl-ink);
  color: white;
  padding: 64px 0;
}

/* Search Input */
.vbpl-search-input {
  border: 1px solid var(--vbpl-steel);
  border-radius: var(--vbpl-rounded-btn);
  padding: 12px 16px;
  font-size: 16px;
  height: 44px;
  outline: none;
  width: 100%;
  font-family: inherit;
}

.vbpl-search-input:focus {
  border-color: var(--vbpl-ink);
}

/* Tabs */
.vbpl-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--vbpl-hairline);
}

.vbpl-tab {
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 500;
  color: var(--vbpl-charcoal);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  transition: all 0.15s;
}

.vbpl-tab:hover {
  color: var(--vbpl-ink);
}

.vbpl-tab-active {
  color: var(--vbpl-primary);
  border-bottom-color: var(--vbpl-primary);
}

/* Badge */
.vbpl-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
}

.vbpl-badge-active { background: #e8f5e9; color: #2e7d32; }
.vbpl-badge-pending { background: #fff3e0; color: #e65100; }
.vbpl-badge-expired { background: #fce4ec; color: #c62828; }

/* Table */
.vbpl-table {
  width: 100%;
  border-collapse: collapse;
}

.vbpl-table th,
.vbpl-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--vbpl-hairline);
  font-size: 14px;
}

.vbpl-table th {
  color: var(--vbpl-graphite);
  font-weight: 400;
  width: 35%;
}

/* Links */
.vbpl-link {
  color: var(--vbpl-primary);
  text-decoration: none;
  font-weight: 500;
}

.vbpl-link:hover {
  text-decoration: underline;
}

/* Document content container */
.vbpl-doc-content {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  max-width: 100%;
  overflow-x: auto;
}

.vbpl-doc-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 16px 0;
}

.vbpl-doc-content p {
  margin: 4px 0;
}

/* Pagination */
.vbpl-pagination {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 32px;
}

.vbpl-pagination button {
  min-width: 36px;
  height: 36px;
  border: 1px solid var(--vbpl-hairline);
  border-radius: var(--vbpl-rounded-btn);
  background: var(--vbpl-canvas);
  color: var(--vbpl-ink);
  font-size: 14px;
  cursor: pointer;
}

.vbpl-pagination button.active {
  background: var(--vbpl-primary);
  color: white;
  border-color: var(--vbpl-primary);
}

/* Container */
.vbpl-container {
  max-width: 1366px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Responsive */
@media (max-width: 768px) {
  .vbpl-display-lg { font-size: 28px; }
  .vbpl-display-md { font-size: 24px; }
  .vbpl-display-sm { font-size: 20px; }
  .vbpl-section-cloud, .vbpl-section-white { padding: 48px 0; }
  .vbpl-card { padding: 16px; }
}