/**
 * HPR Group — Design tokens (key thiết kế chung)
 * Mọi trang dùng biến này để đồng bộ màu, chữ, khoảng cách, bóng đổ.
 */
:root {
    /* Thương hiệu */
    --hpr-primary: #0b294f;
    --hpr-primary-deep: #0a1628;
    --hpr-primary-mid: #123a5c;
    --hpr-accent: #00b4d8;
    --hpr-accent-light: #48cae4;
    --hpr-accent-soft: #7dd3fc;
    --hpr-gold: #c9a86a;
    --hpr-gold-soft: rgba(201, 168, 106, 0.35);
    --hpr-yellow: #ffd700;

    /* Nút CTA — xanh / hover vàng */
    --hpr-btn-bg: var(--hpr-primary);
    --hpr-btn-color: #ffffff;
    --hpr-btn-hover-bg: var(--hpr-yellow);
    --hpr-btn-hover-color: var(--hpr-primary);
    --hpr-btn-border: transparent;
    --hpr-btn-hover-border: transparent;
    --hpr-btn-shadow: 0 8px 22px rgba(11, 41, 79, 0.22);
    --hpr-btn-shadow-hover: 0 12px 28px rgba(255, 215, 0, 0.38);
    --hpr-btn-radius: var(--hpr-radius-sm);

    /* Nền section */
    --hpr-bg-body: #0c1a30;
    --hpr-bg-light: #f6fbff;
    --hpr-bg-light-alt: #f7f5f0;
    --hpr-bg-muted: #f4f7fa;
    --hpr-bg-white: #ffffff;
    --hpr-bg-dark-gradient: radial-gradient(
        ellipse 120% 80% at 50% 0%,
        var(--hpr-primary-mid) 0%,
        var(--hpr-primary-deep) 42%,
        #060d18 100%
    );
    --hpr-hero-overlay: linear-gradient(
        120deg,
        rgba(11, 41, 79, 0.88) 0%,
        rgba(0, 120, 160, 0.55) 100%
    );

    /* Chữ */
    --hpr-font-sans: "Montserrat", system-ui, sans-serif;
    --hpr-font-display: "Playfair Display", Georgia, serif;
    --hpr-text: #1a1a1a;
    --hpr-text-muted: #5a6b7d;
    --hpr-text-on-dark: rgba(255, 255, 255, 0.92);
    --hpr-text-on-dark-muted: rgba(255, 255, 255, 0.82);

    /* Viền & bóng */
    --hpr-radius-sm: 6px;
    --hpr-radius-md: 10px;
    --hpr-radius-lg: 18px;
    --hpr-radius-xl: 22px;
    --hpr-radius-pill: 999px;
    --hpr-border: rgba(11, 41, 79, 0.08);
    --hpr-border-accent: rgba(0, 180, 216, 0.28);
    --hpr-shadow-sm: 0 8px 24px rgba(11, 41, 79, 0.08);
    --hpr-shadow-md: 0 14px 38px rgba(10, 53, 92, 0.08);
    --hpr-shadow-glass: 0 24px 48px rgba(0, 0, 0, 0.35), 0 0 32px rgba(0, 180, 216, 0.12);

    /* Khoảng cách section */
    --hpr-section-y: clamp(2.5rem, 5vw, 4rem);
    --hpr-wrap: min(92%, 1280px);
    --hpr-wrap-wide: min(94%, 1320px);

    /* Eyebrow / nhãn section */
    --hpr-eyebrow-size: 0.72rem;
    --hpr-eyebrow-spacing: 0.22em;

    /* Transition */
    --hpr-ease: cubic-bezier(0.25, 1, 0.5, 1);
    --hpr-duration: 0.25s;
}