/* ============================================================
   HHAT.vn — Design System (light theme, futuristic)
   Human · Hybrid · AI · Technology
   ============================================================ */

:root {
    /* Brand colors */
    --hhat-blue: #4A4DB5;
    --hhat-blue-light: #E8E9F8;
    --hhat-blue-mid: #7577CC;
    --hhat-orange: #F08020;
    --hhat-orange-light: #FEF0E3;
    --hhat-orange-mid: #F5A05A;
    --hhat-green: #2E9E4F;
    --hhat-green-light: #E3F5EA;
    --hhat-green-mid: #5BBB7A;
    --hhat-yellow: #F5B800;
    --hhat-yellow-light: #FEF7DC;
    --hhat-yellow-mid: #F8CC4A;

    /* Surface */
    --hhat-bg: #F8F7F3;
    --hhat-bg2: #EEF2FF;
    --hhat-white: #FFFFFF;
    --hhat-glass: rgba(255, 255, 255, 0.7);
    --hhat-dark: #0F172A;

    /* Text */
    --hhat-text: #1A1A2E;
    --hhat-text2: #4A4A6A;
    --hhat-text3: #8A8AAA;

    /* Border / shadow */
    --hhat-border: #E0DFF5;
    --hhat-border2: rgba(74, 77, 181, 0.12);
    --hhat-shadow-sm: 0 2px 8px rgba(74, 77, 181, 0.06);
    --hhat-shadow-md: 0 4px 20px rgba(74, 77, 181, 0.10);
    --hhat-shadow-lg: 0 12px 40px rgba(74, 77, 181, 0.15);
    --hhat-shadow-glow: 0 4px 20px rgba(74, 77, 181, 0.3);

    /* Type */
    --font-display: 'Be Vietnam Pro', 'Nunito', sans-serif;
    --font-body: 'Inter', 'Space Grotesk', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* Radius */
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-pill: 999px;
}

/* ===== Scope wrapper — apply on .hhat-page to win over Bootstrap ===== */
.hhat-page {
    font-family: var(--font-body);
    color: var(--hhat-text);
    background: var(--hhat-bg);
    line-height: 1.6;
}

.hhat-page h1,
.hhat-page h2,
.hhat-page h3,
.hhat-page h4,
.hhat-page h5 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--hhat-text);
    margin: 0;
}

.hhat-page a {
    color: var(--hhat-blue);
    text-decoration: none;
    transition: color 0.2s;
}

.hhat-page a:hover {
    color: var(--hhat-orange);
}

/* ===== Utility classes ===== */
.hhat-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--hhat-blue);
    letter-spacing: 0.1em;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 0.8rem;
}

.hhat-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--hhat-blue-light);
    color: var(--hhat-blue);
    padding: 0.4rem 1rem;
    border-radius: var(--r-pill);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    font-family: var(--font-mono);
}

.hhat-badge-dot {
    width: 7px;
    height: 7px;
    background: var(--hhat-green);
    border-radius: 50%;
    animation: hhat-blink 1.5s infinite;
}

/* ===== Buttons ===== */
.hhat-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    cursor: pointer;
    padding: 0.85rem 2rem;
    border-radius: var(--r-pill);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.25s;
    white-space: nowrap;
}

/* Higher-specificity selectors to win over `.hhat-page a` color inheritance */
.hhat-btn-primary,
.hhat-page a.hhat-btn-primary,
a.hhat-btn-primary {
    background: var(--hhat-blue);
    color: #fff !important;
    box-shadow: var(--hhat-shadow-glow);
}

.hhat-btn-primary:hover,
.hhat-page a.hhat-btn-primary:hover,
a.hhat-btn-primary:hover {
    background: var(--hhat-orange);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(240, 128, 32, 0.35);
}

.hhat-btn-outline,
.hhat-page a.hhat-btn-outline,
a.hhat-btn-outline {
    background: transparent;
    color: var(--hhat-blue) !important;
    border: 2px solid var(--hhat-blue);
}

.hhat-btn-outline:hover,
.hhat-page a.hhat-btn-outline:hover,
a.hhat-btn-outline:hover {
    background: var(--hhat-blue-light);
    color: var(--hhat-blue) !important;
}

.hhat-btn-ghost {
    background: transparent;
    color: var(--hhat-text2);
    padding: 0.5rem 1rem;
}

.hhat-btn-ghost:hover {
    color: var(--hhat-blue);
    background: var(--hhat-blue-light);
}

.hhat-btn-sm {
    padding: 0.55rem 1.4rem;
    font-size: 0.875rem;
}

.hhat-btn-full {
    width: 100%;
}

/* ===== Inputs ===== */
.hhat-field {
    margin-bottom: 1.1rem;
}

.hhat-label {
    display: block;
    font-size: 0.85rem;
    color: var(--hhat-text2);
    font-weight: 600;
    margin-bottom: 0.45rem;
    font-family: var(--font-body);
}

.hhat-input {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1.5px solid var(--hhat-border);
    border-radius: var(--r-md);
    background: var(--hhat-white);
    color: var(--hhat-text);
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: all 0.2s;
    outline: none;
}

.hhat-input:focus {
    border-color: var(--hhat-blue);
    box-shadow: 0 0 0 3px rgba(74, 77, 181, 0.12);
}

.hhat-input.input-validation-error {
    border-color: #E11D48;
}

.hhat-input::placeholder {
    color: var(--hhat-text3);
}

textarea.hhat-input {
    resize: vertical;
    min-height: 110px;
    font-family: var(--font-body);
}

.hhat-checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--hhat-text2);
}

.hhat-checkbox-row input[type="checkbox"] {
    accent-color: var(--hhat-blue);
    width: 16px;
    height: 16px;
}

.hhat-validation {
    display: block;
    color: #E11D48;
    font-size: 0.8rem;
    margin-top: 0.3rem;
    font-family: var(--font-body);
}

.hhat-validation-summary {
    background: #FEF2F2;
    border: 1px solid #FCA5A5;
    color: #B91C1C;
    padding: 0.75rem 1rem;
    border-radius: var(--r-md);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.hhat-validation-summary ul {
    margin: 0;
    padding-left: 1.2rem;
}

/* ===== Cards ===== */
.hhat-card {
    background: var(--hhat-white);
    border: 1px solid var(--hhat-border);
    border-radius: var(--r-lg);
    padding: 2rem;
    box-shadow: var(--hhat-shadow-sm);
    transition: all 0.3s;
}

.hhat-card-glass {
    background: var(--hhat-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: var(--hhat-shadow-md);
}

.hhat-alert {
    padding: 0.85rem 1rem;
    border-radius: var(--r-md);
    margin-bottom: 1rem;
    font-size: 0.9rem;
    border: 1px solid transparent;
}

.hhat-alert-success {
    background: var(--hhat-green-light);
    color: #14532D;
    border-color: var(--hhat-green-mid);
}

.hhat-alert-error {
    background: #FEF2F2;
    color: #B91C1C;
    border-color: #FCA5A5;
}

.hhat-alert-info {
    background: var(--hhat-blue-light);
    color: var(--hhat-blue);
    border-color: var(--hhat-blue-mid);
}

.hhat-alert-warning {
    background: var(--hhat-yellow-light);
    color: #92400E;
    border-color: var(--hhat-yellow-mid);
}

/* ===== Links ===== */
.hhat-link {
    color: var(--hhat-blue);
    text-decoration: none;
    font-weight: 600;
}

.hhat-link:hover {
    color: var(--hhat-orange);
    text-decoration: underline;
}

/* ===== Animations ===== */
@keyframes hhat-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes hhat-spin-slow {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes hhat-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes hhat-fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes hhat-pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(74, 77, 181, 0.4); }
    70% { box-shadow: 0 0 0 14px rgba(74, 77, 181, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 77, 181, 0); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== Misc ===== */
.hhat-divider {
    height: 1px;
    background: var(--hhat-border);
    border: 0;
    margin: 1.25rem 0;
}

.hhat-text-muted {
    color: var(--hhat-text3);
    font-size: 0.85rem;
}

.hhat-text-center {
    text-align: center;
}

.hhat-mt-1 { margin-top: 0.5rem; }
.hhat-mt-2 { margin-top: 1rem; }
.hhat-mt-3 { margin-top: 1.5rem; }
.hhat-mb-1 { margin-bottom: 0.5rem; }
.hhat-mb-2 { margin-bottom: 1rem; }
.hhat-mb-3 { margin-bottom: 1.5rem; }

/* ===== Bootstrap reset inside .hhat-page (avoid conflicts) ===== */
.hhat-page .form-control,
.hhat-page .btn {
    /* don't apply Bootstrap defaults — use .hhat-input / .hhat-btn instead */
}

/* ============================================================
   External login picker (Google / Microsoft / Facebook / TikTok)
   ============================================================ */
.hhat-divider-text {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0 1rem;
    color: var(--hhat-text3);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.hhat-divider-text::before,
.hhat-divider-text::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hhat-border), transparent);
}
.hhat-divider-text > span {
    white-space: nowrap;
    padding: 0 0.25rem;
}

.hhat-external-form {
    margin: 0;
}
.hhat-external-grid {
    display: grid;
    gap: 0.6rem;
}

.hhat-ext-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    background: var(--hhat-white);
    color: var(--hhat-text);
    border: 1.5px solid var(--hhat-border);
    border-radius: var(--r-md);
    padding: 0.75rem 1rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: var(--hhat-shadow-sm);
}
.hhat-ext-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--hhat-shadow-md);
}
.hhat-ext-btn:active {
    transform: translateY(0);
}
.hhat-ext-btn:focus-visible {
    outline: 2px solid var(--hhat-blue);
    outline-offset: 2px;
}

.hhat-ext-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}
.hhat-ext-icon svg {
    display: block;
}
.hhat-ext-label {
    flex: 1;
    text-align: center;
}

/* Brand variants — chỉ đổi border + light tint nền khi hover, giữ logo gốc */
.hhat-ext-google:hover {
    border-color: #DB4437;
    background: #FFF6F4;
}
.hhat-ext-microsoft:hover {
    border-color: #00A4EF;
    background: #F2FAFF;
}
.hhat-ext-facebook:hover {
    border-color: #1877F2;
    background: #F0F5FF;
}
.hhat-ext-tiktok:hover {
    border-color: #000;
    background: #F4F4F5;
}
.hhat-ext-default:hover {
    border-color: var(--hhat-blue);
    background: var(--hhat-bg2);
}

/* ============================================================
   OTP input boxes (Verify Email page)
   ============================================================ */
.hhat-otp-field { margin: 1rem 0 0.75rem; }
.hhat-otp-field .hhat-label {
    display: block;
    text-align: center;
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
    color: var(--hhat-text2);
}
.hhat-otp-boxes {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin: 0.5rem 0;
}
.hhat-otp-digit {
    width: 48px;
    height: 56px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--hhat-blue);
    background: var(--hhat-white);
    border: 1.5px solid var(--hhat-border);
    border-radius: var(--r-md);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
    caret-color: var(--hhat-blue);
    box-shadow: var(--hhat-shadow-sm);
}
.hhat-otp-digit:focus {
    outline: none;
    border-color: var(--hhat-blue);
    box-shadow: 0 0 0 3px var(--hhat-blue-light);
    transform: translateY(-1px);
}
.hhat-otp-digit:not(:placeholder-shown) {
    background: var(--hhat-blue-light);
}
@media (max-width: 480px) {
    .hhat-otp-digit { width: 40px; height: 48px; font-size: 1.25rem; }
}
.hhat-btn-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: var(--hhat-blue);
    text-decoration: none;
}
.hhat-btn-link:hover { text-decoration: underline; }