/* ============================================================
   Component layer — dùng các class này thay vì lặp utility,
   để style không trôi dạt giữa các trang.
   ============================================================ */
@layer components {

  /* ---------- Khung trang ---------- */
  .section        { @apply py-20 md:py-24 px-6 lg:px-20; }
  .section-inner  { @apply max-w-7xl mx-auto; }
  .section-sunken { background-color: var(--surface-sunken); }
  .section-line   { border-block: 1px solid var(--border-subtle); }

  /* Nhãn nhỏ phía trên tiêu đề */
  .eyebrow {
    @apply inline-block text-xs font-semibold uppercase tracking-[0.18em];
    color: var(--brand-primary);
  }
  .eyebrow-accent { color: var(--brand-accent-strong); }

  .section-head       { @apply max-w-2xl mb-12 md:mb-16; }
  .section-head-center{ @apply max-w-2xl mx-auto text-center mb-12 md:mb-16; }
  .section-title      { color: var(--text-strong); }
  .section-lead       { @apply text-base md:text-lg leading-relaxed mt-4; color: var(--text-muted); }

  /* Màu chữ dùng thẳng utility biến của Tailwind trong markup:
     text-(--text-strong) / text-(--text-body) / text-(--text-muted) /
     text-(--text-subtle) / text-(--brand-accent-strong).
     Không định nghĩa .text-body ở đây vì flowbite đã chiếm tên đó. */

  /* Gạch chân nhấn — thay cho gradient text */
  .mark-accent {
    background-image: linear-gradient(transparent 62%, var(--brand-accent-tint) 0);
    padding-inline: .12em;
  }
  .mark-primary {
    background-image: linear-gradient(transparent 62%, var(--brand-primary-tint) 0);
    padding-inline: .12em;
  }

  /* ---------- Thẻ ---------- */
  .card {
    background-color: var(--surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  }
  .card-hover:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
  .card-quiet {
    background-color: var(--surface-sunken);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    transition: background-color .25s ease, border-color .25s ease;
  }
  .card-quiet:hover {
    background-color: var(--surface);
    border-color: var(--border-default);
  }
  .card-pad { @apply p-6 md:p-8; }

  /* ---------- Nút ---------- */
  .btn {
    @apply inline-flex items-center justify-center gap-2 font-semibold text-sm;
    padding: .75rem 1.5rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
    cursor: pointer;
  }
  .btn-lg { @apply text-base; padding: .9rem 1.9rem; }

  .btn-primary { background-color: var(--brand-primary); color: #fff; }
  .btn-primary:hover { background-color: var(--brand-primary-hover); box-shadow: var(--shadow-md); }

  .btn-accent { background-color: var(--brand-accent-strong); color: #fff; }
  .btn-accent:hover { background-color: #be123c; box-shadow: var(--shadow-md); }

  .btn-outline {
    background-color: var(--surface);
    border-color: var(--border-default);
    color: var(--text-strong);
  }
  .btn-outline:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

  .btn-ghost { color: var(--text-muted); background: transparent; }
  .btn-ghost:hover { color: var(--brand-primary); background-color: var(--brand-primary-tint); }

  /* Link có mũi tên */
  .link-arrow {
    @apply inline-flex items-center gap-2 text-sm font-semibold;
    color: var(--brand-primary);
    transition: gap .2s ease;
  }
  .link-arrow:hover { gap: .85rem; }

  /* ---------- Badge ---------- */
  .badge {
    @apply inline-flex items-center gap-2 text-xs font-semibold;
    padding: .35rem .75rem;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
  }
  .badge-primary {
    background-color: var(--brand-primary-tint);
    color: var(--brand-primary-hover);
    border-color: color-mix(in oklab, var(--brand-primary) 15%, transparent);
  }
  .badge-accent {
    background-color: var(--brand-accent-tint);
    color: var(--brand-accent-strong);
    border-color: color-mix(in oklab, var(--brand-accent) 30%, transparent);
  }
  .badge-neutral {
    background-color: var(--surface-raised);
    color: var(--text-muted);
    border-color: var(--border-default);
  }

  /* ---------- Ô icon ---------- */
  .icon-tile {
    @apply inline-flex items-center justify-center shrink-0;
    width: 2.75rem; height: 2.75rem;
    border-radius: var(--radius-md);
    transition: background-color .25s ease, color .25s ease;
  }
  .icon-tile-lg { width: 3.25rem; height: 3.25rem; }
  .icon-tile-primary { background-color: var(--brand-primary-tint); color: var(--brand-primary); }
  .icon-tile-accent  { background-color: var(--brand-accent-tint);  color: var(--brand-accent-strong); }
  .icon-tile-neutral { background-color: var(--surface-raised);     color: var(--text-muted); }

  /* Số thứ tự (01, 02, …) */
  .step-num {
    @apply inline-flex items-center justify-center font-semibold text-sm tabular-nums;
    width: 2.5rem; height: 2.5rem;
    border-radius: var(--radius-md);
    background-color: var(--surface);
    border: 1px solid var(--border-default);
    color: var(--brand-primary);
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
  }
  .group:hover .step-num {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
  }

  /* ---------- Số liệu ---------- */
  .stat-value { @apply text-4xl md:text-5xl font-semibold tabular-nums tracking-tight; color: var(--text-strong); }
  .stat-label { @apply text-xs font-semibold uppercase tracking-[0.14em] mt-2; color: var(--text-subtle); }

  /* ---------- Form ---------- */
  .field {
    @apply w-full text-sm;
    padding: .7rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    background-color: var(--surface);
    color: var(--text-strong);
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .field::placeholder { color: var(--text-subtle); }
  .field:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-primary) 14%, transparent);
  }

  /* ---------- Chia cắt ---------- */
  .rule { height: 1px; background-color: var(--border-default); }
  .rule-accent { height: 2px; width: 2.5rem; border-radius: var(--radius-pill); background-color: var(--brand-accent); }
}

@media (prefers-reduced-motion: reduce) {
  .card, .card-quiet, .btn, .icon-tile, .step-num, .link-arrow { transition: none; }
  .card-hover:hover { transform: none; }
}