/* ═══════════════════════════════════════
   giai-phap.css — bespoke styles for /giai-phap.

   Convention: classes prefixed .gp-* to match the
   .blk-* (shared) / .dv-* (dich-vu) / .ctc-*
   (lien-he) distinction. Used by:
     giai-phap-hero            (instance of the shared `hero` template,
                               styled via .blk-hero* in blocks-blk.css
                               — only an --no-image headline-size tweak
                               + .gp-section__accent live here)
     impact-stats-giai-phap    (instance of the shared `stats` template,
                               rendered with .blk-stats* / .blk-stat* —
                               overrides scoped under .gp-page restore
                               the original giai-phap look: white card
                               chrome, coral circle icon, hover lift)
     giai-phap-formula-master  (bespoke dark gradient master card)
     giai-phap-workflow-flow   (5 step widgets + chevron arrows)
     giai-phap-step            (widget rendered inside workflow-flow)
     giai-phap-consulting-cta  (white CTA box at the bottom)

   All overrides scoped under `.gp-page` (emitted by giai-phap.phtml)
   so they don't leak to other pages using the same shared templates.
   ═══════════════════════════════════════ */

/* ── Design tokens ── */
:root {
    --gp-navy-900: #0a2540;
    --gp-navy-700: #0d2d5e;
    --gp-navy-500: #4a6fa5;
    --gp-navy-300: #4a5f78;
    --gp-navy-200: #5b7894;
    --gp-coral:    #e87060;
    --gp-coral-soft: #f2998c;
    --gp-teal:     #38d9c0;
    --gp-border:   #e2e8f0;
    --gp-border-hover: #cbd5e1;
    --gp-surface-card:  #ffffff;
    --gp-surface-page:  #fafbfc;
    --gp-radius-md: 12px;
    --gp-radius-lg: 16px;
    --gp-radius-xl: 20px;
    --gp-radius-full: 999px;
    --gp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --gp-duration: 200ms;
    --gp-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.06);
    --gp-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
    --gp-shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);
}

/* ─────────────────────────────────────────
   HERO (CMS-driven via shared .blk-hero)
   ─────────────────────────────────────────
   The giai-phap hero is rendered through the shared `hero` block
   template (block instance `giai-phap-hero`, block_template='hero').
   The base visual — gradient navy bg, grid pattern overlay, coral
   radial glow, eyebrow pill with coral dot, white headline — all
   come from `.blk-hero*` in blocks-blk.css.

   This file adds only the giai-phap-specific bits:

   - `.gp-section__accent` is used in the hero headline (via the
     block's config field) to color the first phrase with the
     coral→soft-coral gradient text clip. The class is shared with
     the .gp-section header so the same accent shows up consistently
     in the formula/workflow sub-headings.

   - `.blk-hero--no-image .blk-hero__headline` is bumped to
     `clamp(36px, 5vw, 72px)` to match the original hardcoded hero
     exactly (the shared default is 68px).
*/
.gp-section__accent {
    background: linear-gradient(90deg, var(--gp-coral) 0%, var(--gp-coral-soft) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* Match the original .gp-hero h1 size (72px) — shared .blk-hero caps
   at 68px in --no-image mode. */
.blk-hero--no-image .blk-hero__headline { font-size: clamp(36px, 5vw, 72px); }

/* ─────────────────────────────────────────
   IMPACT STATS (override shared .blk-stats* on this page)
   ─────────────────────────────────────────
   The impact-stats-giai-phap block uses the SHARED `stats` template
   (renders with .blk-stats* / .blk-stat* from blocks-blk.css) so it
   can pick up future template improvements for free. But the shared
   template's default look (borderless, blue icons, plain text) is
   visually different from the original giai-phap design (white card
   with border + radius, coral-tinted circle icon, navy value, gray
   label, hover lift). These scoped overrides restore that look ONLY
   when the stats section is rendered inside .gp-page (i.e. only on
   /giai-phap). Other pages using the same shared stats template are
   not affected.
*/
.gp-page .blk-stats__grid { gap: var(--space-5); }

.gp-page .blk-stat {
    position: relative;
    background: var(--gp-surface-card);
    border: 1px solid var(--gp-border);
    border-radius: var(--gp-radius-lg);
    padding: var(--space-5) var(--space-4);
    transition: transform var(--gp-duration) var(--gp-ease-out),
                box-shadow var(--gp-duration) var(--gp-ease-out),
                border-color var(--gp-duration) var(--gp-ease-out);
}
.gp-page .blk-stat:hover {
    transform: translateY(-4px);
    box-shadow: var(--gp-shadow-md);
    border-color: var(--gp-border-hover);
}

.gp-page .blk-stat__icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(232, 112, 95, 0.08);
    color: var(--gp-coral);
    font-size: 22px;
}

.gp-page .blk-stat__value {
    /* Match static .impact-value (f70e4f8): fixed 20px bold navy, no clamp
     * so values stay visually balanced with the icon circle on every viewport.
     * Line-height 1.3 keeps multi-character values (e.g. "Hiểu rõ bản thân")
     * from blowing the card height. */
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--gp-navy-900);
    margin-bottom: 8px;
}

.gp-page .blk-stat__label {
    /* Match static .impact-card p (f70e4f8): var(--text-base) (15px) navy-300,
     * line-height 1.6 — keeps the subtitle compact under the value. */
    margin-top: 0;
    font-size: var(--text-base);
    color: var(--gp-navy-300);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .gp-page .blk-stat { padding: var(--space-4) var(--space-3); }
    .gp-page .blk-stat__value { font-size: 18px; }
}

/* ─────────────────────────────────────────
   SHARED SECTION HEADER (formula + workflow blocks)
   ───────────────────────────────────────── */
.gp-section { padding: var(--space-8) 0; }
.gp-section__header {
    /* Match static .qt-header (f70e4f8): centered, generous bottom
     * margin so the headline breathes above the cards/formula-body. */
    text-align: center;
    margin-bottom: var(--space-8);
}
.gp-section__eyebrow {
    /* Match static .qt-eyebrow (f70e4f8): uppercase coral small-cap
     * with the leading coral bar via ::before. */
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--gp-coral);
    margin-bottom: var(--space-4);
}
.gp-section__eyebrow::before {
    content: '';
    width: 18px; height: 2px;
    background: var(--gp-coral);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}
.gp-section__title {
    /* Match static .hpa-headline (f70e4f8): font-size var(--text-xl)
     * (clamp 28→46px), weight 800, line-height 1.2, navy-900 color,
     * margin-bottom var(--space-5) (24px) — no letter-spacing tweak.
     *
     * NOTE on color: static phtml used `var(--navy-900)` = #0d2d5e
     * (root-client.css). We deliberately use the SAME token here so
     * every headline rendered through .gp-section__title stays in the
     * exact same blue. Switching to `--gp-navy-900` (#0a2540) shifts
     * the headline noticeably darker and breaks visual parity with the
     * static reference. */
    font-size: var(--text-xl);
    font-weight: 800;
    line-height: 1.2;
    color: var(--navy-900);
    margin-bottom: var(--space-5);
}
.gp-section__sub {
    font-size: var(--text-base); line-height: 1.75;
    color: var(--gp-navy-200); max-width: 600px; margin: var(--space-3) auto 0;
}

/* ─────────────────────────────────────────
   FORMULA MASTER CARD
   ───────────────────────────────────────── */
.gp-formula-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #091830 0%, #0d2d5e 55%, #1a4a7a 100%);
    border-radius: var(--gp-radius-xl);
    padding: var(--space-7) var(--space-6);
    margin-bottom: var(--space-8);
    box-shadow: var(--gp-shadow-lg);
}
.gp-formula-card::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 56px 56px;
    pointer-events: none;
}
.gp-formula-card::after {
    content: "";
    position: absolute; top: -80px; right: -60px;
    width: 360px; height: 360px; border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 217, 192, 0.14) 0%, transparent 65%);
    pointer-events: none;
}

.gp-formula__top {
    position: relative; z-index: 1;
    text-align: center;
    max-width: 560px;
    margin: 0 auto var(--space-6);
}
.gp-formula__badge {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 6px 16px;
    border-radius: var(--gp-radius-full);
    background: rgba(232, 112, 95, 0.15);
    border: 1px solid rgba(232, 112, 95, 0.35);
    color: var(--gp-coral-soft);
    font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.04em;
    margin-bottom: var(--space-3);
}
.gp-formula__desc {
    color: rgba(255, 255, 255, 0.62);
    font-size: var(--text-base); line-height: 1.7;
}

.gp-formula__grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}
.gp-formula__block {
    text-align: center;
    padding: var(--space-5) var(--space-4);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--gp-radius-md);
    transition: background var(--gp-duration) var(--gp-ease-out),
                border-color var(--gp-duration) var(--gp-ease-out);
}
.gp-formula__block:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}
.gp-formula__expr {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: clamp(16px, 1.6vw, 20px);
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.01em;
    margin-bottom: var(--space-2);
    word-break: break-word;
}
.gp-formula__label {
    font-size: var(--text-sm);
    color: var(--gp-teal);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.gp-formula__note {
    position: relative; z-index: 1;
    text-align: center;
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--text-sm);
}
.gp-formula__note strong {
    color: rgba(255, 255, 255, 0.85);
}

/* ─────────────────────────────────────────
   WORKFLOW FLOW (5 step widgets + 4 arrows)
   ───────────────────────────────────────── */
.gp-flow {
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
}
.gp-step {
    position: relative;
    flex: 1; min-width: 0;
    background: var(--gp-surface-card);
    border: 1px solid var(--gp-border);
    border-radius: var(--gp-radius-lg);
    padding: var(--space-5) var(--space-4);
    text-align: center;
    overflow: hidden;
    transition: transform var(--gp-duration) var(--gp-ease-out),
                box-shadow var(--gp-duration) var(--gp-ease-out),
                border-color var(--gp-duration) var(--gp-ease-out);
}
.gp-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--gp-shadow-md);
    border-color: var(--gp-border-hover);
}

.gp-step__num {
    position: absolute; top: 10px; right: 10px;
    font-size: 48px; font-weight: 800;
    color: var(--gp-navy-900);
    opacity: 0.05;
    line-height: 1;
    pointer-events: none;
}
.gp-step__icon {
    position: relative; z-index: 1;
    width: 52px; height: 52px;
    margin: 0 auto var(--space-3);
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--surface-muted, #f3f5f8);
    color: var(--gp-navy-700);
    font-size: 19px;
    transition: background var(--gp-duration) var(--gp-ease-out),
                color var(--gp-duration) var(--gp-ease-out);
}
.gp-step__badge {
    position: relative; z-index: 1;
    display: inline-block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em;
    color: var(--gp-navy-700);
    background: var(--surface-muted, #f3f5f8);
    padding: 3px 10px;
    border-radius: var(--gp-radius-full);
    margin-bottom: var(--space-2);
}
.gp-step__title {
    position: relative; z-index: 1;
    font-size: var(--text-base); font-weight: 800;
    color: var(--gp-navy-900);
    margin-bottom: var(--space-2);
}
.gp-step__desc {
    position: relative; z-index: 1;
    font-size: 13px;
    line-height: 1.6;
    color: var(--gp-navy-300);
    margin: 0;
}

/* Final step = the destination metric (highlight in coral). */
.gp-step--final {
    background: linear-gradient(160deg, #fff 0%, #fff5f3 100%);
    border-color: rgba(232, 112, 95, 0.35);
}
.gp-step--final .gp-step__icon {
    background: var(--gp-coral);
    color: #fff;
}
.gp-step--final .gp-step__badge {
    background: var(--gp-coral);
    color: #fff;
}
.gp-step--final .gp-step__num {
    color: var(--gp-coral);
    opacity: 0.10;
}

/* Arrow chevron between steps. */
.gp-arrow {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--gp-navy-300);
    opacity: 0.4;
    font-size: 14px;
    animation: gp-arrow-pulse 1.8s ease-in-out infinite;
}
@keyframes gp-arrow-pulse {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 0.75; }
}
@media (prefers-reduced-motion: reduce) {
    .gp-arrow { animation: none; }
}

/* ─────────────────────────────────────────
   CONSULTING CTA BOX
   ───────────────────────────────────────── */
.gp-consulting {
    padding-bottom: var(--space-7);
}
.gp-consulting__box {
    background: linear-gradient(135deg, #ffffff, #f7f9fc);
    border: 1px solid var(--gp-border);
    border-radius: var(--gp-radius-xl);
    padding: var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    box-shadow: var(--gp-shadow-sm);
}
.gp-consulting__content { min-width: 0; }
.gp-consulting__eyebrow {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-sm); font-weight: 700;
    letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--gp-coral);
    margin-bottom: var(--space-3);
}
.gp-consulting__eyebrow::before {
    content: '';
    width: 18px; height: 2px;
    background: var(--gp-coral);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}
.gp-consulting__title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 800;
    color: var(--gp-navy-900);
    margin: 0 0 12px;
    letter-spacing: -0.8px;
}
.gp-consulting__body {
    color: var(--gp-navy-300);
    line-height: 1.8;
    max-width: 650px;
    margin: 0;
}
.gp-consulting__actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    flex-shrink: 0;
}
.gp-consulting__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    background: var(--gp-coral);
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 700;
    transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
}
.gp-consulting__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(232, 112, 95, 0.32);
    background: #d9614f;
}
.gp-consulting__btn:active { transform: translateY(0); }
.gp-consulting__hotline {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gp-navy-700);
    font-weight: 600;
    text-decoration: none;
}

/* ─────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────── */
@media (max-width: 1024px) {
    .gp-formula__grid { grid-template-columns: 1fr; gap: var(--space-3); }
    .gp-flow { flex-direction: column; }
    .gp-arrow i { display: inline-block; transform: rotate(90deg); }
    .gp-consulting__box { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 768px) {
    .gp-formula-card { padding: var(--space-6) var(--space-4); }
    .gp-step { padding: var(--space-4); }
    .gp-step__num { font-size: 36px; }
    .gp-consulting__box { padding: 24px; }
    .gp-consulting__title { font-size: 28px; }
    .gp-consulting__actions { width: 100%; }
    .gp-consulting__btn { width: 100%; justify-content: center; }
    .gp-consulting__hotline { justify-content: center; width: 100%; }
}
@media (max-width: 480px) {
    .container { padding: 0 var(--space-4); }
}