/* Font: Plus Jakarta Sans — loaded inline in header.php for FOUT prevention */
:root {
    /* Brand Colors (Derived from Logo) */
    --psyguild-primary-cyan: #6eefff;
    --psyguild-primary-blue: #3e7bfa;
    --psyguild-secondary-violet: #8d8cff;
    
    /* Dark Theme Elements (Global Mode) */
    --psyguild-dark-base: #06101f; /* Nền chính sâu thẳm */
    --psyguild-dark-surface: #0b1830; /* Nền phụ / card */
    --psyguild-dark-elevated: rgba(11, 24, 48, 0.6); /* Kính mờ của nền phụ */
    --psyguild-text-light: #eef6ff;
    --psyguild-text-light-muted: #a8b6cc;
    
    /* Utility */
    --psyguild-border-light: rgba(110, 239, 255, 0.14);
    --psyguild-border-dark: rgba(110, 239, 255, 0.08);
    --psyguild-glow-accent: rgba(62, 123, 250, 0.15);
    
    /* Gradients */
    --psyguild-gradient-brand: linear-gradient(135deg, #6eefff 0%, #3e7bfa 55%, #8d8cff 100%);
    --psyguild-gradient-hero: radial-gradient(circle at 50% 20%, rgba(62, 123, 250, 0.15) 0%, var(--psyguild-dark-base) 70%);
    
    /* Space Grid Texture */
    --psyguild-space-grid: linear-gradient(rgba(61, 224, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(61, 224, 255, 0.03) 1px, transparent 1px);
    --psyguild-grid-size: 40px 40px;

    /* Responsive Tokens (Fluid Design) */
    --psyguild-container-max: 1200px;
    --psyguild-container-pad: clamp(16px, 3.5vw, 36px);

    /* ── Spacing Scale ─────────────────────────────────────────────
     * section  = khoảng cách giữa các block lớn (hero, services...)
     * element  = khoảng cách giữa các thành phần trong block
     * card     = padding trong card / gap lưới
     * ──────────────────────────────────────────────────────────── */
    --space-section: clamp(48px, 6vw, 80px);   /* desktop max 80px — không quá rỗng */
    --space-element: clamp(20px, 3.5vw, 40px);  /* phần tử trong block */
    --space-card:    clamp(16px, 2.5vw, 28px);  /* card padding / grid gap */

    /* Fluid Typography */
    --font-h1: clamp(2.2rem, 1.5rem + 2.5vw, 3.5rem);
    --font-h2: clamp(1.8rem, 1.25rem + 2vw, 2.8rem);
    --font-h3: clamp(1.4rem, 1rem + 1vw, 1.8rem);
    --font-body: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);

    /* 3D UI Soft Tokens (Fluid Radius) */
    --psyguild-radius-xl: clamp(24px, 3vw, 40px);
    --psyguild-radius-lg: clamp(20px, 2.5vw, 32px);
    --psyguild-radius-md: clamp(16px, 2vw, 24px);
    --psyguild-radius-sm: clamp(12px, 1.5vw, 16px);

    /* Surface Tokens (Light Reading / Archive) */
    --surface-reading: #f4f8fc;
    --surface-archive: #eef3f9;
    --text-reading: #162132;
    --text-reading-muted: #475569;
    --text-muted: var(--psyguild-text-light-muted);

    /* Light Card Shadows */
    --psyguild-shadow-card: 0 10px 24px rgba(26, 35, 50, 0.06), 0 24px 48px rgba(26, 35, 50, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    --psyguild-shadow-card-hover: 0 16px 32px rgba(26, 35, 50, 0.1), 0 30px 60px rgba(26, 35, 50, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 1px rgba(61, 224, 255, 0.15);

    /* Dark Card Shadows */
    --psyguild-shadow-dark-card: 0 10px 24px rgba(0, 0, 0, 0.25), 0 24px 48px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --psyguild-shadow-dark-card-hover: 0 16px 32px rgba(0, 0, 0, 0.35), 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 0 1px rgba(61, 224, 255, 0.2);

    /* Button Shadows */
    --psyguild-shadow-btn: 0 8px 20px rgba(74, 114, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    --psyguild-shadow-btn-hover: 0 14px 30px rgba(74, 114, 255, 0.35), 0 0 20px rgba(61, 224, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Smooth Scrolling and Body Setup */
html {
    scroll-behavior: smooth; /* Cuộn trang mượt mà */
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    font-size: var(--font-body);
    background-color: var(--psyguild-dark-base);
    background-image: var(--psyguild-space-grid);
    background-size: var(--psyguild-grid-size);
    color: var(--psyguild-text-light);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: var(--space-element);
    line-height: 1.3;
}
h1 { font-size: var(--font-h1); }
h2 { font-size: var(--font-h2); }
h3 { font-size: var(--font-h3); }
h4 { font-size: calc(var(--font-h3) * 0.8); }

/* Lớp không gian đa tầng (Multi-layered Space Orbs) */
.psyguild-ambient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    opacity: 0.3;
    pointer-events: none;
    animation: flowOrb 25s infinite alternate ease-in-out;
}
.psyguild-orb-1 {
    width: 60vw;
    height: 60vh;
    background: radial-gradient(circle, rgba(61, 224, 255, 0.15) 0%, transparent 70%);
    top: -10%;
    left: -10%;
}
.psyguild-orb-2 {
    width: 70vw;
    height: 70vh;
    background: radial-gradient(circle, rgba(100, 74, 252, 0.1) 0%, transparent 70%);
    bottom: -20%;
    right: -10%;
    animation-delay: -10s;
    animation-direction: alternate-reverse;
    animation-duration: 30s;
}

@keyframes flowOrb {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(5%, 10%) scale(1.1); }
    100% { transform: translate(-5%, 5%) scale(0.9); }
}


a {
    color: var(--psyguild-primary-cyan);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--psyguild-primary-blue);
    text-shadow: 0 0 8px rgba(61, 224, 255, 0.4); /* Luminous hover */
}

/* Mobile nav — ẩn desktop nav, hiện hamburger button */
@media (max-width: 991px) {
    .site-nav {
        display: none;
    }
    .psyguild-hamburger {
        display: flex;
    }
}

/* ── Hero Orb Decorations (nhẹ, không filter nặng) ── */
.psy-hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.psy-hero-orb-1 {
    right: -8%;
    bottom: -8%;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(61,224,255,0.1) 0%, transparent 70%);
    filter: blur(24px);
}
.psy-hero-orb-2 {
    right: 4%;
    top: 8%;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(100,74,252,0.1) 0%, transparent 70%);
    filter: blur(24px);
}

/* ── Psyguild Hero Layout: 2 cột ── */
.psyguild-hero-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-card);
    align-items: stretch;
}
.psyguild-hero-right-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-card);
    justify-content: space-between;
}
/* ════════════════════════════════════════════════════════════════════
   UTILITY CLASSES — Dùng khắp theme, không phụ thuộc Tailwind CDN
   ════════════════════════════════════════════════════════════════════ */

/* Brand gradient text — dùng cho logo, h1 hero, section titles */
@keyframes psy-gradient-shift {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

.text-animated-gradient {
    background: linear-gradient(135deg, #6eefff 0%, #3e7bfa 40%, #8d8cff 70%, #6eefff 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: psy-gradient-shift 5s ease infinite;
}

/* Brand animated button — dùng cho CTA chính */
.btn-animated-gradient {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #00f2fe 0%, #3e7bfa 50%, #8d8cff 100%);
    background-size: 200% 200%;
    animation: psy-gradient-shift 4s ease infinite;
    color: #02040a;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 242, 254, 0.25);
    text-decoration: none;
}
.btn-animated-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 242, 254, 0.4);
    color: #02040a;
}

/* Portal loading overlay */
.portal-doors {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    overflow: hidden;
}
.portal-door {
    position: absolute;
    top: 0;
    width: 50vw;
    height: 100vh;
    background: #02040a;
    background-image: var(--psyguild-space-grid);
    background-size: var(--psyguild-grid-size);
    z-index: 1;
    transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
    will-change: transform;
}
.portal-door.door-left  { left: 0;  transform-origin: left center; }
.portal-door.door-right { right: 0; transform-origin: right center; }
.door-edge-glow {
    position: absolute;
    top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, transparent 0%, #00f2fe 30%, #8d8cff 70%, transparent 100%);
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.8), 0 0 50px rgba(100, 74, 252, 0.4);
    opacity: 0.9;
}
.door-left  .door-edge-glow { right: 0; }
.door-right .door-edge-glow { left: 0;  }
.door-logo {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 1;
    transition: opacity 0.3s ease;
}
body.page-ready .portal-doors   { pointer-events: none; }
body.page-ready .portal-door.door-left  { transform: translateX(-100%); }
body.page-ready .portal-door.door-right { transform: translateX(100%);  }
body.page-ready .door-logo      { opacity: 0; }

/* Starfield layers */
.stars-small, .stars-medium, .stars-large {
    position: absolute;
    inset: 0;
    background-repeat: repeat;
    animation: psyStarDrift 60s linear infinite;
}
.stars-small  { background-image: radial-gradient(1px 1px at 50px 50px, rgba(255,255,255,0.6) 0%, transparent 100%), radial-gradient(1px 1px at 150px 200px, rgba(255,255,255,0.4) 0%, transparent 100%), radial-gradient(1px 1px at 300px 80px, rgba(255,255,255,0.5) 0%, transparent 100%); background-size: 400px 300px; }
.stars-medium { background-image: radial-gradient(1.5px 1.5px at 100px 120px, rgba(255,255,255,0.7) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 250px 40px, rgba(110,239,255,0.5) 0%, transparent 100%); background-size: 500px 400px; animation-duration: 90s; }
.stars-large  { background-image: radial-gradient(2px 2px at 80px 250px, rgba(255,255,255,0.8) 0%, transparent 100%), radial-gradient(2px 2px at 350px 150px, rgba(100,74,252,0.6) 0%, transparent 100%); background-size: 600px 500px; animation-duration: 120s; }
@keyframes psyStarDrift {
    from { transform: translateY(0); }
    to   { transform: translateY(-100px); }
}

/* Dark background utility */
.bg-dark { background-color: #02040a; }

/* Brand color utilities (Tailwind CDN fallback) */
.text-brand-cyan   { color: #00f2fe; }
.text-brand-blue   { color: #3e7bfa; }
.text-brand-violet { color: #8d8cff; }
.bg-brand-cyan     { background-color: #00f2fe; }
.bg-brand-blue     { background-color: #3e7bfa; }
.bg-brand-violet   { background-color: #8d8cff; }

/* Pagination V2 */
.v2-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.v2-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.25s ease;
}
.v2-pagination .page-numbers:hover,
.v2-pagination .page-numbers.current {
    background: #00f2fe;
    color: #02040a;
    border-color: #00f2fe;
    box-shadow: 0 0 16px rgba(0, 242, 254, 0.5);
    transform: scale(1.1);
}

/* Route/category chips dùng trong 404 */
.psy-route-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: #f1f5f9;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}
.psy-route-chip:hover {
    background: rgba(0, 242, 254, 0.08);
    border-color: rgba(0, 242, 254, 0.3);
    color: #00f2fe;
    transform: translateY(-2px);
    text-shadow: none;
}
.chip-icon { display: flex; align-items: center; color: #00f2fe; }

/* Category chips dùng trong 404 sidebar */
.psy-cat-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    color: #cbd5e1;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.25s ease;
}
.psy-cat-chip:hover {
    background: rgba(0, 242, 254, 0.06);
    border-color: rgba(0, 242, 254, 0.2);
    color: #00f2fe;
    text-shadow: none;
}
.psy-cat-count {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: #94a3b8;
}