/*
 * style.css — Global typography & design tokens
 * WebsiteInspire — chỉnh sửa file này để thay đổi toàn bộ site
 *
 * CÁCH DÙNG:
 *   - Chỉnh giá trị trong :root để thay đổi toàn site
 *   - Class .prose-content bao quanh nội dung bài viết (niche pages, case studies)
 *   - Bảng dữ liệu & sidebar KHÔNG bị ảnh hưởng (vẫn dùng Tailwind classes)
 */

/* ============================================================
   DESIGN TOKENS — đổi ở đây, áp dụng toàn site
   ============================================================ */
:root {

  /* -- Màu chủ đạo -- */
  --color-primary:       #4f46e5;   /* indigo-600 — links, badges nổi bật */
  --color-primary-light: #eef2ff;   /* indigo-50  — hover background */
  --color-text:          #1f2937;   /* gray-800   — text chính */
  --color-text-muted:    #6b7280;   /* gray-500   — text phụ, caption */
  --color-border:        #e5e7eb;   /* gray-200   — border card, divider */
  --color-bg:            #f9fafb;   /* gray-50    — background trang */
  --color-bg-card:       #ffffff;   /* white      — background card */

  /* -- Typography body -- */
  --font-size-base:    1.25rem;        /* 20px — text bình thường */
  --font-size-sm:      1rem;    /* 16px — text phụ, caption, badge */
  --font-size-xs:      0.75rem;     /* 12px — label nhỏ, metadata */
  --font-size-lg:      1.125rem;    /* 18px — intro paragraph, lead text */
  --line-height-body:  1.75;        /* khoảng cách dòng trong paragraph */
  --line-height-tight: 1.35;        /* khoảng cách dòng heading */

  /* -- Heading sizes — dùng trong .prose-content -- */
  --h1-size: 1.875rem;   /* 30px */
  --h2-size: 1.5rem;     /* 24px */
  --h3-size: 1.25rem;    /* 20px */
  --h4-size: 1.0625rem;  /* 17px */

  /* -- Heading weight -- */
  --h1-weight: 800;
  --h2-weight: 700;
  --h3-weight: 700;
  --h4-weight: 600;

  /* -- Spacing trong prose -- */
  --spacing-paragraph: 1.25rem;    /* khoảng cách giữa các paragraph */
  --spacing-heading-top: 2rem;     /* khoảng trên heading (h2, h3) */
  --spacing-heading-bottom: 0.6rem;/* khoảng dưới heading */
  --spacing-list-item: 0.4rem;     /* khoảng cách giữa các list item */
}


/* ============================================================
   PROSE CONTENT — áp dụng cho niche pages & case studies
   Bọc nội dung bài viết bằng class="prose-content"
   ============================================================ */

.prose-content {
  color: var(--color-text);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
}

/* Paragraph */
.prose-content p {
  margin-bottom: var(--spacing-paragraph);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
}

/* Lead paragraph — thêm class="lead" vào <p> đầu tiên */
.prose-content p.lead {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* Headings */
.prose-content h1 {
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  margin-top: 0;
  margin-bottom: var(--spacing-heading-bottom);
}

.prose-content h2 {
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  margin-top: var(--spacing-heading-top);
  margin-bottom: var(--spacing-heading-bottom);
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--color-border);
}

.prose-content h3 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  margin-top: calc(var(--spacing-heading-top) * 0.75);
  margin-bottom: var(--spacing-heading-bottom);
}

.prose-content h4 {
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  color: var(--color-text);
  margin-top: 1.25rem;
  margin-bottom: 0.4rem;
}

/* Lists */
.prose-content ul,
.prose-content ol {
  margin-bottom: var(--spacing-paragraph);
  padding-left: 1.5rem;
}

.prose-content ul { list-style-type: disc; }
.prose-content ol { list-style-type: decimal; }

.prose-content li {
  margin-bottom: var(--spacing-list-item);
  line-height: var(--line-height-body);
}

/* Links */
.prose-content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose-content a:hover {
  color: #3730a3; /* indigo-800 */
}

/* Blockquote */
.prose-content blockquote {
  border-left: 4px solid var(--color-primary);
  padding: 0.75rem 1.25rem;
  margin: 1.5rem 0;
  background: var(--color-primary-light);
  border-radius: 0 0.5rem 0.5rem 0;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Inline code */
.prose-content code {
  background: #f3f4f6;
  padding: 0.15rem 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
  color: #dc2626; /* red-600 */
}

/* Horizontal rule */
.prose-content hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2rem 0;
}

/* Strong / Bold */
.prose-content strong {
  font-weight: 700;
  color: var(--color-text);
}

/* Images trong prose */
.prose-content img {
  border-radius: 0.75rem;
  max-width: 100%;
  height: auto;
  margin: 1.5rem 0;
}


/* ============================================================
   UTILITY HELPERS — dùng bất cứ đâu trên site
   ============================================================ */

/* Text muted */
.text-muted { color: var(--color-text-muted); }

/* Card chuẩn */
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Section divider */
.section-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2rem 0;
}

/* Responsive image */
.img-responsive {
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
}

/* ============================================================
   EXISTING FIXES (giữ lại từ layout.php inline style)
   ============================================================ */
[x-cloak] { display: none !important; }