/* ============================================================
   VINH LONG JSC — DESIGN TOKENS (locked v1.0)
   Tông: ấm-editorial + mạng Thủy. Nền lanh ấm, accent cát (sợi/Kim),
   teal nước (brand). Drop file này vào project rồi build trên các biến.
   ============================================================ */

:root {
    /* ---- COLOR ---- */
    --vl-linen: #f4efe4; /* nền trang chính (warm light) */
    --vl-linen-2: #ece3d2; /* card / vùng ấm phụ */
    --vl-cool: #e7f0f0; /* section nước (cool) */
    --vl-white: #fffdf9; /* card sáng / button light */

    --vl-ink: #1c2a28; /* chữ chính (near-black, undertone teal) */
    --vl-ink-soft: #5c6360; /* chữ phụ / caption */

    --vl-teal: #1f6e72; /* BRAND — water teal, dùng cho CTA/link/nhấn */
    --vl-teal-deep: #103a3d; /* dải nước sâu / hover / footer */

    --vl-sand: #bd954f; /* ACCENT — sợi/Kim, dùng tiết chế: eyebrow, divider, số liệu */
    --vl-sand-soft: #dcc79a; /* sand nhạt trên nền tối */

    --vl-line: #e0d6c4; /* đường kẻ trên nền ấm */
    --vl-line-cool: #cfe0e0; /* đường kẻ trên nền nước */
    /* ---- TYPE ---- */
    /* Toàn site dùng MỘT họ sans: Be Vietnam Pro (rõ dấu tiếng Việt, no-art). */
    --vl-sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* body/ui + heading */
    --vl-serif: var(--vl-sans); /* alias: mọi heading cũ giờ là Be Vietnam Pro */
    /* ---- RADIUS ---- */
    --vl-r-pill: 40px; /* button */
    --vl-r-img: 16px; /* ảnh / card lớn */
    --vl-r-card: 12px; /* card / chip */
    --vl-r-mark: 11px; /* logo mark */
    /* ---- LAYOUT / SPACING ---- */
    --vl-maxw: 1280px;
    --vl-gutter: 28px;
    --vl-section: 96px; /* padding dọc section chuẩn */
    /* ---- MOTION ---- */
    --vl-ease: cubic-bezier(.2,.6,.2,1);
    --vl-reveal: .7s;
    --vl-marquee: 26s;
}

/* ================= BASE TYPE ================= */
body {
    font-family: var(--vl-sans);
    color: var(--vl-ink);
    background: var(--vl-linen);
    font-size: 18px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased
}

.vl-serif {
    font-family: var(--vl-serif)
}

h1, .vl-h1 {
    font-family: var(--vl-serif);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(45px,6.6vw,94.5px);
    line-height: 1.4;
    letter-spacing: .005em
}

h2, .vl-h2 {
    font-family: var(--vl-serif);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(31.5px,4vw,52px);
    line-height: 1.4;
    letter-spacing: .01em
}

h3, .vl-h3 {
    font-family: var(--vl-serif);
    font-weight: 700;
    font-size: 25px;
    line-height: 1.35
}

.vl-lead {
    font-size: 20px;
    color: var(--vl-ink-soft);
    max-width: 54ch
}

.vl-eyebrow {
    font-family: var(--vl-serif);
    font-style: italic;
    font-size: 20px;
    color: var(--vl-sand);
    font-weight: 500
}

.vl-kicker {
    font-size: 12.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--vl-ink-soft)
}

/* ================= BUTTONS ================= */
.vl-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--vl-sans);
    font-weight: 600;
    font-size: 17px;
    padding: 13px 22px;
    border-radius: var(--vl-r-pill);
    border: 0;
    cursor: pointer;
    transition: .18s var(--vl-ease);
    background: var(--vl-teal);
    color: #fff
}

    .vl-btn:hover {
        background: var(--vl-teal-deep);
        transform: translateY(-1px)
    }

.vl-btn--ghost {
    background: transparent;
    color: var(--vl-ink);
    border: 1.5px solid var(--vl-ink)
}

    .vl-btn--ghost:hover {
        background: var(--vl-ink);
        color: var(--vl-linen)
    }

.vl-btn--sand {
    background: var(--vl-sand);
    color: #2a1e08
}

    .vl-btn--sand:hover {
        background: #a9853f
    }

.vl-btn--light {
    background: var(--vl-white);
    color: var(--vl-teal-deep);
    border: 1px solid var(--vl-line)
}

/* ================= SIGNATURE — woven warp/weft divider ================= */
.vl-weave-rule {
    height: 26px;
    opacity: .5;
    background-image: linear-gradient(90deg,transparent 46%,var(--vl-sand-soft) 46% 54%,transparent 54%), linear-gradient(0deg,transparent 46%,var(--vl-sand-soft) 46% 54%,transparent 54%);
    background-size: 26px 26px;
    background-position: 0 0,13px 13px
}

/* ================= IMAGE TEXTURES (placeholder → hướng ảnh thật) =========
   Khi CHƯA có ảnh: dùng .vl-ph .fiber/.water/.leaf để mô phỏng đúng tông.
   Khi CÓ ảnh thật: thay bằng <img>, bo góc var(--vl-r-img), giữ caption. */
.vl-ph {
    position: relative;
    border-radius: var(--vl-r-img);
    overflow: hidden;
    background: var(--vl-linen-2)
}

    .vl-ph.fiber::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(120% 90% at 70% 10%,#e9d8b4,#d8bd86 40%,#bd954f)
    }

    .vl-ph.water::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(160deg,#2a8e92,#1f6e72 45%,#103a3d)
    }

    .vl-ph.leaf::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(110% 90% at 30% 20%,#7fb08a,#3f7d63 55%,#1f5a4a)
    }

/* ================= MOTION ================= */
.vl-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--vl-reveal) var(--vl-ease),transform var(--vl-reveal) var(--vl-ease)
}

    .vl-reveal.in {
        opacity: 1;
        transform: none
    }

    .vl-reveal.d1 {
        transition-delay: .08s
    }

    .vl-reveal.d2 {
        transition-delay: .16s
    }

    .vl-reveal.d3 {
        transition-delay: .24s
    }

@media (prefers-reduced-motion:reduce) {
    * {
        animation: none !important
    }

    .vl-reveal {
        opacity: 1;
        transform: none;
        transition: none
    }
}