/* ================================================================
   VNMT — Components (Lumoria style)
   ================================================================ */


/* ── BUTTONS — pill 40px, Josefin 500, capitalize ──────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 5px 24px 5px 5px;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: var(--fw-medium);
    text-transform: capitalize;
    text-decoration: none;
    border-radius: var(--radius-pill);
    border: 1.25px solid transparent;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
    transition: var(--transition-base);
}

.btn__icon,
.btn__arrow {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--transition-base);
}

/* Primary — vàng đồng */
.btn--primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}
.btn--primary .btn__icon,
.btn--primary .btn__arrow {
    background: #ffffff;
    color: var(--color-primary);
}
.btn--primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #ffffff;
}
.btn--primary:hover .btn__icon,
.btn--primary:hover .btn__arrow { transform: translateX(3px); }

/* Outline — bg trắng, viền đen, hover lật sang vàng */
.btn--outline,
.btn--outline-light {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--color-dark);
}
.btn--outline .btn__icon,
.btn--outline .btn__arrow,
.btn--outline-light .btn__icon,
.btn--outline-light .btn__arrow {
    background: var(--color-primary);
    color: #ffffff;
}
.btn--outline:hover,
.btn--outline-light:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}
.btn--outline:hover .btn__icon,
.btn--outline:hover .btn__arrow,
.btn--outline-light:hover .btn__icon,
.btn--outline-light:hover .btn__arrow { transform: translateX(3px); }

/* Outline-dark — viền đen, bg transparent, dùng trên cream bg */
.btn--outline-dark {
    background: transparent;
    border-color: var(--color-dark);
    color: var(--color-dark);
}
.btn--outline-dark .btn__icon,
.btn--outline-dark .btn__arrow {
    background: var(--color-dark);
    color: #ffffff;
}
.btn--outline-dark:hover {
    background: var(--color-dark);
    border-color: var(--color-dark);
    color: #ffffff;
}
.btn--outline-dark:hover .btn__icon,
.btn--outline-dark:hover .btn__arrow {
    background: var(--color-primary);
    color: #ffffff;
    transform: translateX(3px);
}

/* Accent — alias của primary để backwards-compat */
.btn--accent {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(139, 31, 31, 0.3);
}
.btn--accent .btn__icon,
.btn--accent .btn__arrow { background: #ffffff; color: var(--color-primary); }
.btn--accent:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    box-shadow: 0 8px 24px rgba(139, 31, 31, 0.42);
}
.btn--accent:hover .btn__icon,
.btn--accent:hover .btn__arrow { transform: translateX(3px); }

/* Pill modifier giữ lại cho code legacy — đã pill mặc định nên no-op */
.btn--pill { border-radius: var(--radius-pill); }
.btn--large {
    padding: 8px 32px 8px 8px;
    font-size: 17px;
}
.btn--large .btn__icon,
.btn--large .btn__arrow { width: 44px; height: 44px; }


/* ── BOXED DARK SECTION (đặc trưng Lumoria) ───────────────────── */
.section--boxed {
    margin: 0 var(--boxed-margin-x) var(--boxed-margin-x);
    border-radius: var(--boxed-radius);
    background: var(--color-dark);
    color: #ffffff;
    padding: 80px 60px;
    position: relative;
    overflow: hidden;
}
.section--boxed h2 { color: #ffffff; }
.section--boxed p  { color: var(--color-text-light); }

@media (max-width: 768px) {
    .section--boxed {
        margin: 0 16px 24px;
        padding: 56px 28px;
        border-radius: 24px;
    }
}


/* ── REVEAL on scroll (giữ từ legacy) ─────────────────────────── */
[data-reveal] {
    opacity: 1;
    transform: translate3d(0, 30px, 0);
    transition: opacity 700ms cubic-bezier(.2,.7,.2,1),
                transform 700ms cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
}


/* ── Section label (eyebrow) ──────────────────────────────────── */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    letter-spacing: 0.16em;
    color: var(--color-primary);
    text-transform: uppercase;
    margin-bottom: 18px;
}
.section-label__bar {
    display: inline-block;
    width: 32px; height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
}
.section-label--accent { color: var(--color-primary); }
.section-label--light  { color: var(--color-primary); }
.section--dark .section-label { color: var(--color-primary); }


/* ── Slider arrow buttons (services, testimonials, etc.) ──────── */
.slider-btn {
    appearance: none;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-dark);
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--transition-base),
                color var(--transition-base),
                border-color var(--transition-base);
}
.slider-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}
.slider-btn--ghost {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.18);
    color: #ffffff;
}
.slider-btn--ghost:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}