/* ===============================================================
   DESIGN TOKENS – nguồn màu & phông chữ duy nhất cho toàn hệ thống
   Dùng chung cho client, admin, employer. Email dùng --vt-font-email
   (stack web-safe). PDF giữ font nhúng riêng (DejaVu).

   Muốn đổi tông màu / font toàn site: sửa DUY NHẤT file này.
   Các file CSS/view khác tham chiếu qua var(--vt-*, #fallback) hoặc class .vt-*;
   không inline hex màu brand (#0066b3, #0d6efd, ...) hay font-family rời.
   =============================================================== */

/* @import url("https://fonts.bunny.net/css?family=plus-jakarta-sans:400,500,600,700,800&display=swap"); */
@import url("https://fonts.bunny.net/css?family=plus-jakarta-sans:400,500,600,700,800&display=swap");

:root {
    /* --- Phông chữ --- */
    --vt-font-heading: "Plus Jakarta Sans", sans-serif;
    --vt-font-text: "Plus Jakarta Sans", sans-serif;
    --vt-font-serif: Georgia, "Times New Roman", serif;
    --vt-font-mono: Monaco, "Courier New", monospace;
    --vt-font-email: Arial, Helvetica, sans-serif;
    --vt-font-weight: 400;
    --vt-font-size: 14px;
    --vt-font-line-height: 24px;
    --vt-font-3xs: 10px;
    --vt-font-xxs: 10px;
    --vt-font-xs: 12px;
    --vt-font-sm: 14px;
    --vt-font-md: 16px;
    --vt-font-md-2: 15px;
    --vt-font-lg: 18px;
    --vt-font-xl: 20px;
    --vt-font-2xl: 22px;
    --vt-font-3xl: 56px;

    /* --- Màu chủ đạo --- */
    --vt-primary: #0b9444;
    --vt-primary-hover: #087a39;
    --vt-primary-dark: #05612d;
    --vt-secondary: #5fcf80;

    /* --- Nền --- */
    --vt-light-green: #e8f7ee;
    --vt-background: #f7fcf8;
    --vt-white: #ffffff;

    /* --- Nhấn --- */
    --vt-gold: #f0b429;

    /* --- Chữ --- */
    --vt-title: #163020;
    --vt-text: #4a5a50;
    --vt-text-muted: #7a8b80;

    /* --- Đường viền --- */
    --vt-border: #d8eedd;

    /* --- Trạng thái --- */
    --vt-danger: #e45959;
    --vt-success: #0b9444;
    --vt-warning: #f0b429;
    --vt-info: #5fcf80;

    /* --- Bo góc & đổ bóng dùng chung --- */
    --vt-radius: 8px;
    --vt-radius-lg: 16px;
    --vt-shadow-sm: 0 2px 8px rgba(22, 48, 32, 0.06);
    --vt-shadow: 0 4px 20px rgba(22, 48, 32, 0.08);
    --vt-shadow-brand: 0 6px 16px rgba(11, 148, 68, 0.22);

    /* --- Loading indicator --- */
    --vt-loader-dot-size: 10px;
    --vt-loader-dot-gap: 10px;
    --vt-loader-color: var(--vt-primary);
    --vt-loader-color-muted: rgba(11, 148, 68, 0.28);
}

/* ===============================================================
   Typography – áp dụng phông chữ token cho toàn hệ thống
   =============================================================== */
body {
    font-family: var(--vt-font-text);
    font-size: var(--vt-font-size);
    line-height: var(--vt-font-line-height);
    font-weight: var(--vt-font-weight);
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-heading,
.display-1,
.display-2,
.heading-lg,
.heading-sm-1 {
    font-family: var(--vt-font-heading);
}

.vt-font-heading {
    font-family: var(--vt-font-heading);
}

.vt-font-text {
    font-family: var(--vt-font-text);
}

/* ===============================================================
   VT Loader – 3 chấm, dùng chung toàn hệ thống
   =============================================================== */
.vt-loader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--vt-loader-dot-gap, 10px);
}

.vt-loader span:not(.visually-hidden) {
    display: block;
    width: var(--vt-loader-dot-size, 10px);
    height: var(--vt-loader-dot-size, 10px);
    border-radius: 50%;
    background: var(--vt-loader-color, var(--vt-primary, #0b9444));
    animation: vt-loader-pulse 1.2s infinite ease-in-out both;
}

.vt-loader span:not(.visually-hidden):nth-child(1) {
    animation-delay: 0s;
}

.vt-loader span:not(.visually-hidden):nth-child(2) {
    animation-delay: 0.15s;
}

.vt-loader span:not(.visually-hidden):nth-child(3) {
    animation-delay: 0.3s;
}

.vt-loader--sm {
    --vt-loader-dot-size: 7px;
    --vt-loader-dot-gap: 7px;
}

.vt-loader--md {
    --vt-loader-dot-size: 10px;
    --vt-loader-dot-gap: 10px;
}

.vt-loader--lg {
    --vt-loader-dot-size: 14px;
    --vt-loader-dot-gap: 12px;
}

@keyframes vt-loader-pulse {
    0%,
    80%,
    100% {
        opacity: 0.28;
        transform: scale(0.85);
        background: var(--vt-loader-color-muted, rgba(11, 148, 68, 0.28));
    }

    40% {
        opacity: 1;
        transform: scale(1);
        background: var(--vt-loader-color, var(--vt-primary, #0b9444));
    }
}

.preloader .vt-loader {
    --vt-loader-dot-size: 12px;
    --vt-loader-dot-gap: 12px;
}