/* ══════════════════════════════════════════
   MAMALIHO — DESIGN TOKENS (main root)
   ══════════════════════════════════════════ */

:root {

    /* ── Coral ── */
    --coral:          oklch(68% .17 22);
    --coral-soft:     oklch(78% .12 25);
    --coral-dim:      oklch(68% .17 22 / 12%);
    --coral-light:    #F2C4B8;
    --coral-hex:      #e8705f;
    --coral-soft-hex: #f0a090;

    /* ── Teal ── */
    --teal:      #38d9c0;
    --teal-dark: #22b8a0;

    /* ── Navy ── */
    --navy-900: #0d2d5e;
    --navy-800: #0f3366;
    --navy-700: #1a4a7a;
    --navy-600: #1e5490;
    --navy-500: #4a6fa5;
    --navy-400: #2a6bbf;
    --navy-300: #4a5f78;
    --navy-100: #eef2f7;

    /* ── Surface / Background ── */
    --surface-page:  #f0f4f8;
    --surface-card:  #ffffff;
    --surface-muted: #f7f9fc;

    /* ── Border ── */
    --border:       rgba(26, 74, 122, 0.08);
    --border-hover: rgba(26, 74, 122, 0.18);

    /* ── Shadow ── */
    --shadow-sm: 0 2px 8px  rgba(13, 45, 94, 0.05);
    --shadow-md: 0 8px 24px rgba(13, 45, 94, 0.10);
    --shadow-lg: 0 16px 48px rgba(13, 45, 94, 0.13);

    /* ── Typography ── */
    --text-xs:   11px;
    --text-sm:   13px;
    --text-base: 15px;
    --text-md:   17px;
    --text-lg:   20px;
    --text-xl:   clamp(28px, 3.6vw, 46px);

    /* ── Spacing ── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 80px;

    /* ── Radius ── */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;

    /* ── Motion ── */
    --ease-out: cubic-bezier(.22, .68, 0, 1.2);
    --duration: 200ms;

    /* ── Brand extras ── */
    --brand-dark-red:   #8b1424;
    --brand-teal-dark:  #1e4d46;
    --brand-icon-green: #10a37f;

    /* ── CI / Waste level badges ── */
    --lvl-thap-bg:     #3B6D11;   --lvl-thap-text:    #EAF3DE;
    --lvl-tb-bg:       #EF9F27;   --lvl-tb-text:      #412402;
    --lvl-cao-bg:      #D85A30;   --lvl-cao-text:     #FAECE7;
    --lvl-ratcao-bg:   #A32D2D;   --lvl-ratcao-text:  #FCEBEB;

    /* ── PSI Matrix quadrants ── */
    --quad-tl-bg: #dbeafe;  --quad-tl-title: #1e3a5f;   /* Tăng trưởng đánh đổi */
    --quad-tr-bg: #dcfce7;  --quad-tr-title: #14532d;   /* Tăng trưởng khoẻ     */
    --quad-bl-bg: #fee2e2;  --quad-bl-title: #7f1d1d;   /* Vận hành nợ          */
    --quad-br-bg: #fef9c3;  --quad-br-title: #713f12;   /* Cần kích hoạt        */

    /* ── Chart / Progress bar misc ── */
    --score-red:  #7f1d1d;
    --bar-track:  #e2e8f0;
    --bar-fill:   #f97316;
    --icon-bg:    #e6faf6;
}


/* ══════════════════════════════════════════
   RESET & BASE
   ══════════════════════════════════════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
* {
  box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--surface-page);
    color: var(--navy-300);
    -webkit-font-smoothing: antialiased;
}

html, body {
  height: 100%;
  /* KHÔNG đặt overflow: hidden trên body */
}

/* ══════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════ */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-7);
}


/* ══════════════════════════════════════════
   SHARED UTILITIES — used across all pages
   ══════════════════════════════════════════ */

/* ── Animated gradient highlight text ── */
.hpa-highlight {
    background: linear-gradient(90deg, var(--coral) 0%, var(--coral-soft) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── First-load animations ── */
@keyframes hpaFadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

[data-anim] {
    opacity: 0;
    animation: hpaFadeUp .65s cubic-bezier(.22, .68, 0, 1.1) forwards;
}

/* ── Scroll-triggered reveal (paired with IntersectionObserver) ── */
.anim-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .55s cubic-bezier(.22, .68, 0, 1.1),
                transform .55s cubic-bezier(.22, .68, 0, 1.1);
}

.anim-up.visible { opacity: 1; transform: none; }

.anim-up.d1 { transition-delay: .06s; }
.anim-up.d2 { transition-delay: .13s; }
.anim-up.d3 { transition-delay: .20s; }
.anim-up.d4 { transition-delay: .27s; }
.anim-up.d5 { transition-delay: .34s; }
.anim-up.d6 { transition-delay: .41s; }

@media (prefers-reduced-motion: reduce) {
    [data-anim], .anim-up { animation: none; transition: none; opacity: 1; transform: none; }
}