/* direction-c.css — Shape language từ logo */
/* Usage in a Tailwind v4 project:  @import "tailwindcss";  @import "./direction-c.css"; */

/* ===== WF-RAMP-V1 BEGIN — source of truth: docs/design-system/01-brand-core.md.
   Do not edit here; edit brand-core and re-paste this block verbatim. ===== */
:root {
  /* red — sampled from logo-wfvn.png, hue 22.9deg constant */
  --wf-red-50: #ffe4e0;   /* derived: OKLCH ramp from --wf-red-600 */
  --wf-red-100: #ffd7d3;  /* derived: OKLCH ramp from --wf-red-600 */
  --wf-red-200: #ffc3be;  /* derived: OKLCH ramp from --wf-red-600 */
  --wf-red-300: #ffa5a1;  /* derived: OKLCH ramp from --wf-red-600 */
  --wf-red-400: #ff807d;  /* derived: OKLCH ramp from --wf-red-600 */
  --wf-red-500: #f1585a;  /* derived: OKLCH ramp from --wf-red-600 */
  --wf-red-600: #de293a;  /* sampled: logo-wfvn.png core px, n=32084 */
  --wf-red-700: #ad252f;  /* derived: OKLCH ramp from --wf-red-600 */
  --wf-red-800: #841d23;  /* derived: OKLCH ramp from --wf-red-600 */
  --wf-red-900: #5d1418;  /* derived: OKLCH ramp from --wf-red-600 */

  /* green — sampled from logo-wfvn.png, hue 161.2deg constant */
  --wf-green-50: #e3fdee;   /* derived: OKLCH ramp from --wf-green-600 */
  --wf-green-100: #d1f2e0;  /* derived: OKLCH ramp from --wf-green-600 */
  --wf-green-200: #b9e2cc;  /* derived: OKLCH ramp from --wf-green-600 */
  --wf-green-300: #98cbb0;  /* derived: OKLCH ramp from --wf-green-600 */
  --wf-green-400: #6fb190;  /* derived: OKLCH ramp from --wf-green-600 */
  --wf-green-500: #449871;  /* derived: OKLCH ramp from --wf-green-600 */
  --wf-green-600: #217d57;  /* sampled: logo-wfvn.png core px, n=6831 */
  --wf-green-700: #286348;  /* derived: OKLCH ramp from --wf-green-600 */
  --wf-green-800: #204f39;  /* derived: OKLCH ramp from --wf-green-600 */
  --wf-green-900: #173b2a;  /* derived: OKLCH ramp from --wf-green-600 */

  /* neutral — warm OKLCH hue 75deg, low chroma; 900 pushed darker for focus contrast */
  --wf-neutral-50: #f8f5f1;   /* derived: warm neutral ramp, hue 75 */
  --wf-neutral-100: #ede9e4;  /* derived: warm neutral ramp, hue 75 */
  --wf-neutral-200: #ddd8d2;  /* derived: warm neutral ramp, hue 75 */
  --wf-neutral-300: #c6c1b9;  /* derived: warm neutral ramp, hue 75 */
  --wf-neutral-400: #aca59b;  /* derived: warm neutral ramp, hue 75 */
  --wf-neutral-500: #928a7f;  /* derived: warm neutral ramp, hue 75 */
  --wf-neutral-600: #797167;  /* derived: warm neutral ramp, hue 75 */
  --wf-neutral-700: #605a52;  /* derived: warm neutral ramp, hue 75 */
  --wf-neutral-800: #4a463f;  /* derived: warm neutral ramp, hue 75 */
  --wf-neutral-900: #1c1a17;  /* derived: warm neutral ramp, hue 75, deepened for --color-focus */

  /* amber — warning only, not a full ramp */
  --wf-amber-100: #ffe5bf;  /* estimated: warning hue tuned in OKLCH, not brand-sourced */
  --wf-amber-500: #bc7c00;  /* estimated: warning hue tuned in OKLCH, not brand-sourced */
  --wf-amber-700: #7f4f00;  /* estimated: warning hue tuned in OKLCH, not brand-sourced */

  --wf-white: #ffffff;  /* estimated: pure white constant, no brand source */
}
/* ===== WF-RAMP-V1 END ===== */

:root {
  /* direction C — Shape language từ logo: display type lớn, nền xanh đậm cho khối quan trọng,
     mô-típ vòng tròn + tam giác ngược lặp lại trên component. Xem 02-direction-c.md mục hình học. */
  --wf-font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --wf-font-body: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;

  --wf-size-display: 4rem;       /* 64px */
  --wf-size-h1: 2.5rem;          /* 40px */
  --wf-size-h2: 1.875rem;        /* 30px */
  --wf-size-h3: 1.375rem;        /* 22px */
  --wf-size-body-lg: 1.125rem;   /* 18px */
  --wf-size-body: 1rem;          /* 16px */
  --wf-size-caption: 0.8125rem;  /* 13px */

  /* display kéo lỏng hơn thông lệ (thường 1.0-1.05 cho display Latin thuần) vì dấu tiếng Việt
     xếp chồng (ế ệ ộ ữ ẳ) cần khoảng hở phía trên chữ cái để không chạm dòng trên ở size 64px;
     Playfair Display có tương phản nét đậm/mảnh và cap-height cao hơn một sans grotesque, nên cần
     thêm biên so với mức 1.15 dùng cho sans để dấu thanh không đè lên phần nét mảnh của dòng trên */
  --wf-lh-display: 1.2;
  --wf-lh-h1: 1.2;
  --wf-lh-h2: 1.25;
  --wf-lh-h3: 1.35;
  --wf-lh-body-lg: 1.55;
  --wf-lh-body: 1.6;
  --wf-lh-caption: 1.4;

  --wf-ls-display: -0.02em;
  --wf-ls-h1: -0.015em;
  --wf-ls-h2: -0.01em;
  --wf-ls-h3: 0em;
  --wf-ls-body-lg: 0em;
  --wf-ls-body: 0em;
  --wf-ls-caption: 0.04em;

  --wf-weight-heading: 800;
  --wf-weight-body: 400;
  --wf-weight-emphasis: 600;

  --wf-space-1: 0.25rem;
  --wf-space-2: 0.5rem;
  --wf-space-3: 0.75rem;
  --wf-space-4: 1rem;
  --wf-space-5: 1.25rem;
  --wf-space-6: 1.5rem;
  --wf-space-8: 2rem;
  --wf-space-12: 3rem;
  --wf-space-16: 4rem;
  --wf-space-24: 6rem;

  --wf-radius-xs: 0.25rem;
  --wf-radius-sm: 0.5rem;
  --wf-radius-md: 0.875rem;
  --wf-radius-lg: 1.5rem;
  --wf-radius-full: 999px;

  /* shadow đặc, không blur, lệch một hướng — tiếp nối ngôn ngữ hình khối cứng của mô-típ
     tam giác/vòng tròn thay vì gợi ánh sáng tự nhiên như shadow mờ thông thường */
  --wf-shadow-sm: 2px 2px 0 0 var(--wf-neutral-900);
  --wf-shadow-md: 4px 4px 0 0 var(--wf-green-900);
  --wf-shadow-lg: 8px 8px 0 0 var(--wf-green-900);

  --wf-border-width: 2px;
  --wf-border-width-strong: 4px;

  --wf-container: 75rem; /* 1200px */

  /* hình học mô-típ: tam giác đều đỉnh-xuống nội tiếp trọn trong vòng tròn, tính từ toạ độ
     thật của logo (logo-wfvn.png, dấu tròn x465-610 y20-164, ~145x144) — xem 02-direction-c.md */
  --wf-motif-triangle-clip: polygon(50% 100%, 6.7% 25%, 93.3% 25%);
}


/* ---------------------------------------------------------------------------
   Layer 2b — the SAME aliases as the @theme inline block below, mirrored as
   ordinary custom properties.
   Why this exists: `@theme` is an unknown at-rule to a browser, so a browser
   loading this file directly (no Tailwind build) silently discards the whole
   block and every var(--color-*) used by the components below resolves to
   nothing — buttons render transparent. Tailwind still reads @theme inline for
   utility generation. Values are identical; edit both together.
   --------------------------------------------------------------------------- */
:root {
  --color-brand: var(--wf-green-600);
  --color-brand-strong: var(--wf-green-700);
  --color-accent: var(--wf-red-600);
  --color-bg: var(--wf-neutral-50);
  --color-bg-subtle: var(--wf-white);
  --color-surface: var(--wf-white);
  --color-text: var(--wf-neutral-900);
  --color-text-muted: var(--wf-neutral-700);
  --color-border: var(--wf-neutral-300);
  --color-border-strong: var(--wf-neutral-500);
  --color-success: var(--wf-green-700);
  --color-warning: var(--wf-amber-700);
  --color-danger: var(--wf-red-700);
  --color-info: var(--wf-neutral-700);
  --color-brand-ink: var(--wf-green-600);
  --color-brand-surface: var(--wf-green-500);
  --color-on-brand: var(--wf-white);
  --color-on-accent: var(--wf-white);
  --color-success-surface: var(--wf-green-100);
  --color-warning-surface: var(--wf-amber-100);
  --color-danger-surface: var(--wf-red-100);
  --color-info-surface: var(--wf-neutral-100);
  --color-focus: var(--wf-neutral-900);
  --color-disabled-bg: var(--wf-neutral-200);
  --color-disabled-text: var(--wf-neutral-400);
  --font-heading: var(--wf-font-heading);
  --font-body: var(--wf-font-body);
  --text-display: var(--wf-size-display);
  --text-h1: var(--wf-size-h1);
  --text-h2: var(--wf-size-h2);
  --text-h3: var(--wf-size-h3);
  --text-body-lg: var(--wf-size-body-lg);
  --text-body: var(--wf-size-body);
  --text-caption: var(--wf-size-caption);
  --leading-display: var(--wf-lh-display);
  --leading-h1: var(--wf-lh-h1);
  --leading-h2: var(--wf-lh-h2);
  --leading-h3: var(--wf-lh-h3);
  --leading-body-lg: var(--wf-lh-body-lg);
  --leading-body: var(--wf-lh-body);
  --leading-caption: var(--wf-lh-caption);
  --tracking-display: var(--wf-ls-display);
  --tracking-h1: var(--wf-ls-h1);
  --tracking-h2: var(--wf-ls-h2);
  --tracking-h3: var(--wf-ls-h3);
  --tracking-body-lg: var(--wf-ls-body-lg);
  --tracking-body: var(--wf-ls-body);
  --tracking-caption: var(--wf-ls-caption);
  --spacing-1: var(--wf-space-1);
  --spacing-2: var(--wf-space-2);
  --spacing-3: var(--wf-space-3);
  --spacing-4: var(--wf-space-4);
  --spacing-5: var(--wf-space-5);
  --spacing-6: var(--wf-space-6);
  --spacing-8: var(--wf-space-8);
  --spacing-12: var(--wf-space-12);
  --spacing-16: var(--wf-space-16);
  --spacing-24: var(--wf-space-24);
  --radius-xs: var(--wf-radius-xs);
  --radius-sm: var(--wf-radius-sm);
  --radius-md: var(--wf-radius-md);
  --radius-lg: var(--wf-radius-lg);
  --radius-full: var(--wf-radius-full);
  --shadow-sm: var(--wf-shadow-sm);
  --shadow-md: var(--wf-shadow-md);
  --shadow-lg: var(--wf-shadow-lg);
}

@theme inline {
  --color-brand: var(--wf-green-600);
  --color-brand-strong: var(--wf-green-700);
  --color-accent: var(--wf-red-600);

  --color-bg: var(--wf-neutral-50);
  --color-bg-subtle: var(--wf-white);
  --color-surface: var(--wf-white);

  --color-text: var(--wf-neutral-900);
  --color-text-muted: var(--wf-neutral-700);

  --color-border: var(--wf-neutral-300);
  --color-border-strong: var(--wf-neutral-500);

  --color-success: var(--wf-green-700);
  --color-warning: var(--wf-amber-700);
  --color-danger: var(--wf-red-700);
  --color-info: var(--wf-neutral-700);

  --color-brand-ink: var(--wf-green-600);
  --color-brand-surface: var(--wf-green-500);
  --color-on-brand: var(--wf-white);
  --color-on-accent: var(--wf-white);

  --color-success-surface: var(--wf-green-100);
  --color-warning-surface: var(--wf-amber-100);
  --color-danger-surface: var(--wf-red-100);
  --color-info-surface: var(--wf-neutral-100);

  --color-focus: var(--wf-neutral-900);

  --color-disabled-bg: var(--wf-neutral-200);
  --color-disabled-text: var(--wf-neutral-400);

  --font-heading: var(--wf-font-heading);
  --font-body: var(--wf-font-body);

  --text-display: var(--wf-size-display);
  --text-h1: var(--wf-size-h1);
  --text-h2: var(--wf-size-h2);
  --text-h3: var(--wf-size-h3);
  --text-body-lg: var(--wf-size-body-lg);
  --text-body: var(--wf-size-body);
  --text-caption: var(--wf-size-caption);

  --leading-display: var(--wf-lh-display);
  --leading-h1: var(--wf-lh-h1);
  --leading-h2: var(--wf-lh-h2);
  --leading-h3: var(--wf-lh-h3);
  --leading-body-lg: var(--wf-lh-body-lg);
  --leading-body: var(--wf-lh-body);
  --leading-caption: var(--wf-lh-caption);

  --tracking-display: var(--wf-ls-display);
  --tracking-h1: var(--wf-ls-h1);
  --tracking-h2: var(--wf-ls-h2);
  --tracking-h3: var(--wf-ls-h3);
  --tracking-body-lg: var(--wf-ls-body-lg);
  --tracking-body: var(--wf-ls-body);
  --tracking-caption: var(--wf-ls-caption);

  --spacing-1: var(--wf-space-1);
  --spacing-2: var(--wf-space-2);
  --spacing-3: var(--wf-space-3);
  --spacing-4: var(--wf-space-4);
  --spacing-5: var(--wf-space-5);
  --spacing-6: var(--wf-space-6);
  --spacing-8: var(--wf-space-8);
  --spacing-12: var(--wf-space-12);
  --spacing-16: var(--wf-space-16);
  --spacing-24: var(--wf-space-24);

  --radius-xs: var(--wf-radius-xs);
  --radius-sm: var(--wf-radius-sm);
  --radius-md: var(--wf-radius-md);
  --radius-lg: var(--wf-radius-lg);
  --radius-full: var(--wf-radius-full);

  --shadow-sm: var(--wf-shadow-sm);
  --shadow-md: var(--wf-shadow-md);
  --shadow-lg: var(--wf-shadow-lg);
}

@layer components {
  @keyframes wf-spin {
    to { transform: rotate(360deg); }
  }

  /* ring visible trên cả nền sáng lẫn nền xanh đậm: viền halo màu --color-bg sát cạnh control,
     rồi viền --color-focus rộng hơn bên ngoài. Trên nền sáng, halo trùng màu nền nên vô hình và
     chỉ vòng ngoài tối hiện ra (15.98:1 với bg); trên nền xanh đậm, halo gần-trắng tách control
     khỏi nền tối trước (11.40:1 với green-900), rồi vòng ngoài tối tách khỏi chính halo đó
     (15.98:1) — một ring độc lập với màu nền phía sau. */
  .btn:focus-visible,
  .input:focus-visible,
  .card:focus-visible,
  .badge:focus-visible,
  .chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 5px var(--color-focus);
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wf-space-2);
    font-family: var(--font-body);
    font-weight: var(--wf-weight-emphasis);
    font-size: var(--wf-size-body);
    line-height: 1;
    border-radius: var(--radius-sm);
    border: var(--wf-border-width) solid transparent;
    padding: var(--wf-space-3) var(--wf-space-6);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  .btn-sm { padding: var(--wf-space-2) var(--wf-space-4); font-size: var(--wf-size-caption); }
  .btn-md { padding: var(--wf-space-3) var(--wf-space-6); font-size: var(--wf-size-body); }
  .btn-lg { padding: var(--wf-space-4) var(--wf-space-8); font-size: var(--wf-size-body-lg); }

  .btn-primary {
    background: var(--color-brand);
    color: var(--color-on-brand);
    border-color: var(--color-brand);
    /* góc dưới-trái vát chéo: trích một cạnh của mô-típ tam giác đỉnh-xuống làm chi tiết CTA */
    clip-path: polygon(0 0, 100% 0, 100% 100%, var(--wf-space-3) 100%, 0 calc(100% - var(--wf-space-3)));
  }
  .btn-primary:hover { background: var(--color-brand-strong); border-color: var(--color-brand-strong); }
  .btn-primary:disabled {
    background: var(--color-disabled-bg);
    color: var(--color-disabled-text);
    border-color: var(--color-disabled-bg);
    clip-path: none;
    cursor: not-allowed;
  }
  .btn-primary.is-loading { color: transparent; position: relative; }
  .btn-primary.is-loading::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: var(--wf-border-width) solid var(--color-on-brand);
    border-top-color: transparent;
    animation: wf-spin .6s linear infinite;
  }

  .btn-secondary {
    background: transparent;
    color: var(--color-brand-ink);
    border-color: var(--color-brand-ink);
  }
  .btn-secondary:hover { background: var(--color-success-surface); }
  .btn-secondary:disabled {
    color: var(--color-disabled-text);
    border-color: var(--color-disabled-bg);
    cursor: not-allowed;
  }
  .btn-secondary.is-loading { color: transparent; position: relative; }
  .btn-secondary.is-loading::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: var(--wf-border-width) solid var(--color-brand-ink);
    border-top-color: transparent;
    animation: wf-spin .6s linear infinite;
  }

  .btn-ghost {
    background: transparent;
    color: var(--color-text);
    border-color: transparent;
  }
  .btn-ghost:hover { background: var(--color-bg-subtle); }
  .btn-ghost:disabled { color: var(--color-disabled-text); cursor: not-allowed; }

  .input {
    display: block;
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--wf-size-body);
    color: var(--color-text);
    background: var(--color-surface);
    border: var(--wf-border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--wf-space-3) var(--wf-space-4);
    transition: border-color .15s ease;
  }
  .input::placeholder { color: var(--color-text-muted); }
  .input:focus {
    outline: none;
    border-color: var(--color-brand-ink);
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 5px var(--color-focus);
  }
  .input.is-error { border-color: var(--color-danger); }
  .input.is-error:focus {
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 5px var(--color-danger);
  }
  .input:disabled {
    background: var(--color-disabled-bg);
    color: var(--color-disabled-text);
    border-color: var(--color-disabled-bg);
    cursor: not-allowed;
  }

  .card {
    position: relative;
    background: var(--color-surface);
    border: var(--wf-border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--wf-space-6);
    box-shadow: var(--wf-shadow-sm);
    overflow: hidden;
  }
  /* Cố ý KHÔNG có watermark mô-típ trên .card.
     Bản trước đặt một vòng tròn viền 28px + tam giác đặc 14px ở góc trên-phải mọi card;
     đã gỡ theo phản hồi trực tiếp của user — ký hiệu lặp trên từng card gây nhiễu thị giác
     và cạnh tranh với nội dung. Mô-típ giờ chỉ sống ở nút (.btn-primary clip-path) và ở
     badge trạng thái. */

  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--wf-space-2);
    font-family: var(--font-body);
    font-weight: var(--wf-weight-emphasis);
    font-size: var(--wf-size-caption);
    line-height: var(--wf-lh-caption);
    letter-spacing: var(--wf-ls-caption);
    text-transform: uppercase;
    padding: var(--wf-space-2) var(--wf-space-4);
    border-radius: var(--radius-full);
  }
  .badge::before { font-size: .75em; line-height: 1; }

  /* Đang tuyển: đĩa đặc — chính là nửa "tròn" của mô-típ logo */
  .badge-open {
    background: var(--wf-green-300);
    color: var(--wf-green-800);
    border: var(--wf-border-width) solid var(--wf-green-800);
  }
  .badge-open::before { content: "\25CF"; }

  /* Sắp hết hạn: tam giác — nửa còn lại của mô-típ logo, viền đứt để đọc là "đang đếm ngược" */
  .badge-closing {
    background: var(--wf-amber-700);
    color: var(--wf-white);
    border: var(--wf-border-width) dashed var(--wf-white);
  }
  .badge-closing::before { content: "\25B2"; }

  /* Đã đóng: U+2298 — vòng tròn bị gạch chéo. Lấy đúng "vòng" của mô-típ logo rồi gạch bỏ,
     nên silhouette (vòng rỗng có nét xuyên) khác hẳn đĩa đặc của .badge-open và tam giác của
     .badge-closing, kể cả khi không phân biệt được màu */
  .badge-closed {
    background: var(--wf-neutral-900);
    color: var(--wf-white);
    border: none;
  }
  .badge-closed::before { content: "\2298"; }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--wf-space-2);
    font-family: var(--font-body);
    font-size: var(--wf-size-caption);
    font-weight: var(--wf-weight-body);
    color: var(--color-text);
    background: var(--color-bg-subtle);
    border: var(--wf-border-width) solid var(--color-border);
    border-radius: var(--radius-full);
    padding: var(--wf-space-2) var(--wf-space-4);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  }
  .chip:hover { border-color: var(--color-brand-ink); }
  .chip.is-active {
    background: var(--color-brand);
    color: var(--color-on-brand);
    border-color: var(--color-brand);
  }
}