/* Section 2 — Stories grid
   Tokens: assets/css/global.css (Round11 design system) */
.cs-success-stories {
    background: var(--color-2nd-bg);
    padding: var(--space-section-lg) var(--section-horizontal-padding);
    font-family: var(--font-body);
    color: var(--color-1st-fg);
}

.cs-success-stories__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--section-gap);
}

/* ============================================================
   Heading
   ============================================================ */
.cs-success-stories__head {
    width: 100%;
}

.cs-success-stories__title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: 1.15;
    color: var(--color-1st-fg);
}

/* ============================================================
   Grid 3×3
   ============================================================ */
.cs-success-stories__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--section-gap);
    row-gap: var(--section-gap);
    width: 100%;
    position: relative;
    transition: min-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Loading state: dim cards + disable pointer + spinner overlay (spinner ở level list để không bị dim) */
.cs-success-stories__list.is-loading {
    pointer-events: none;
}

.cs-success-stories__list.is-loading>* {
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.cs-success-stories__list.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 3px solid var(--color-stroke);
    border-top-color: var(--color-1st-fg);
    border-radius: 50%;
    animation: cs-stories-spin 0.7s linear infinite;
    z-index: 1;
}

@keyframes cs-stories-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cs-success-stories__list {
        transition: none;
    }

    .cs-success-stories__list.is-loading::after {
        animation: none;
    }
}

.cs-success-stories__item {
    display: flex;
    flex-direction: column;
    background: transparent;
}

.cs-success-stories__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 44 / 25;
    overflow: hidden;
    text-decoration: none;
}

.cs-success-stories__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Body */
.cs-success-stories__body {
    padding: var(--var-24) var(--var-12);
    display: flex;
    flex-direction: column;
    gap: var(--var-32);
    flex: 1 1 auto;
}

.cs-success-stories__head-row {
    display: flex;
    flex-direction: column;
    gap: var(--var-12);
}

.cs-success-stories__badges {
    display: flex;
    align-items: center;
    gap: var(--var-4);
}

.cs-success-stories__badge {
    display: inline-flex;
    align-items: center;
}

.cs-success-stories__badge--country {
    gap: var(--var-4);
}

.cs-success-stories__badge-text {
    padding: var(--var-4) var(--var-8);
    font-weight: 500;
    font-size: var(--fs-label-md);
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-2nd-fg);
}

.cs-success-stories__divider {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: var(--color-stroke);
}

.cs-success-stories__card-title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-h6);
    line-height: 1.15;
    color: var(--color-1st-fg);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cs-success-stories__card-title a {
    color: inherit;
    text-decoration: none;
}

.cs-success-stories__card-title a:hover {
    color: inherit;
    opacity: 0.85;
}

.cs-success-stories__foot {
    display: flex;
    flex-direction: column;
    gap: var(--var-32);
}

.cs-success-stories__hr {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--color-stroke);
}

.cs-success-stories__stat {
    display: flex;
    flex-direction: column;
    gap: var(--var-4);
    color: var(--color-2nd-fg);
}

.cs-success-stories__stat-value {
    margin: 0;
    font-family: 'Konstant Grotesk', var(--font-heading);
    font-weight: 400;
    font-size: var(--fs-h4);
    line-height: 1.15;
}

.cs-success-stories__stat-label {
    margin: 0;
    font-weight: 500;
    font-size: var(--fs-label-md);
    line-height: 1;
    text-transform: uppercase;
}

/* ============================================================
   Empty state
   ============================================================ */
.cs-success-stories__empty {
    width: 100%;
    padding: var(--var-60) 0;
    text-align: center;
    color: var(--color-2nd-fg);
    font-family: var(--font-body);
    font-size: var(--fs-label-lg);
    line-height: 1.4;
}

.cs-success-stories__empty p {
    margin: 0;
}

/* ============================================================
   See more
   ============================================================ */
.cs-success-stories__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--var-14) var(--var-28);
    background: var(--color-2nd-btn-bg);
    color: var(--color-2nd-btn-fg);
    border: 1px solid var(--color-stroke);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-label-md);
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.cs-success-stories__more:hover {
    opacity: 0.85;
}

/* ============================================================
   Filter bar + dropdown
   ============================================================ */
.cs-success-stories__filter-wrap {
    position: sticky;
    bottom: 20px;
    z-index: 50;
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    align-self: center;
    /* Default hidden until section enters viewport (toggle via .is-visible từ IntersectionObserver) */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.cs-success-stories__filter-wrap.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.cs-success-stories__filter {
    display: inline-flex;
    align-items: center;
    gap: var(--var-12);
    background: var(--color-reverse-bg);
    border-radius: 24px;
    padding: var(--var-12) var(--var-16) var(--var-12) var(--var-32);
}

.cs-success-stories__filter-label {
    font-weight: 500;
    font-size: var(--fs-label-lg);
    line-height: 1;
    color: var(--color-reverse-fg);
}

.cs-success-stories__filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--var-12);
    padding: var(--var-14) var(--var-28);
    background: var(--color-reverse-bg);
    border: 1px solid var(--color-reverse-stroke);
    border-radius: var(--radius-pill);
    color: var(--color-reverse-fg);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-label-md);
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.cs-success-stories__filter-chip svg {
    color: var(--color-reverse-fg);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.cs-success-stories__filter-chip[aria-expanded="true"] {
    border-color: var(--color-reverse-fg);
}

.cs-success-stories__filter-chip[aria-expanded="true"] .cs-success-stories__filter-chip-chevron svg {
    transform: rotate(180deg);
}

/* Inner content group: flag + label + suffix với gap 6px (Figma spec). Outer chip gap 12px giữa group này và clear-X. */
.cs-success-stories__filter-chip-content {
    display: inline-flex;
    align-items: center;
    gap: var(--var-6);
}

/* Chip parts default visibility — chỉ label + chevron khi 0 selections */
.cs-success-stories__filter-chip-flag,
.cs-success-stories__filter-chip-suffix,
.cs-success-stories__filter-chip-clear {
    display: none;
}

.cs-success-stories__filter-chip-flag {
    align-items: center;
    line-height: 0;
}

/* Override .cs-flag base: rectangular (không bo tròn) trong chip để khớp Figma. Border + size từ .cs-flag--sm. */
.cs-success-stories__filter-chip-flag .cs-flag {
    border-radius: 0;
}

.cs-success-stories__filter-chip-clear {
    align-items: center;
    color: inherit;
    cursor: pointer;
    width: 17px;
    height: 17px;
}

.cs-success-stories__filter-chip-clear svg {
    width: 17px;
    height: 17px;
    transform: none;
    transition: none;
}

/* Active state (có selection) — Figma: giữ DARK bg, white border, asymmetric padding 14px 20px 14px 28px */
.cs-success-stories__filter-chip:not([data-selections="0"]) {
    background: var(--color-reverse-bg);
    color: var(--color-reverse-fg);
    border-color: var(--color-reverse-fg);
    padding: var(--var-14) var(--var-20) var(--var-14) var(--var-28);
}

.cs-success-stories__filter-chip:not([data-selections="0"]) .cs-success-stories__filter-chip-chevron {
    display: none;
}

.cs-success-stories__filter-chip:not([data-selections="0"]) .cs-success-stories__filter-chip-suffix,
.cs-success-stories__filter-chip:not([data-selections="0"]) .cs-success-stories__filter-chip-clear {
    display: inline-flex;
}

/* Chỉ show flag span khi location chip có selection */
.cs-success-stories__filter-chip[data-filter="location"]:not([data-selections="0"]) .cs-success-stories__filter-chip-flag {
    display: inline-flex;
}

/* Dropdown panel — anchored above filter bar */
.cs-success-stories__filter-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + var(--var-16));
    background: var(--color-reverse-bg);
    border-radius: 32px;
    padding: var(--var-16) 0;
    z-index: 5;
    box-shadow: 0 12px 32px color-mix(in srgb, var(--color-reverse-bg) 18%, transparent);

    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.98);
    transform-origin: bottom center;
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
        visibility 0s linear 0.25s;
}

.cs-success-stories__filter-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition:
        opacity 0.2s ease,
        transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
        visibility 0s linear 0s;
}

.cs-success-stories__filter-option {
    opacity: 0;
    transform: translateY(4px);
    transition:
        opacity 0.2s ease,
        transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
        background 0.15s ease;
}

.cs-success-stories__filter-panel.is-open .cs-success-stories__filter-option {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger options on open (max 8 rows) */
.cs-success-stories__filter-panel.is-open .cs-success-stories__filter-option:nth-child(1) {
    transition-delay: 0.04s;
}

.cs-success-stories__filter-panel.is-open .cs-success-stories__filter-option:nth-child(2) {
    transition-delay: 0.08s;
}

.cs-success-stories__filter-panel.is-open .cs-success-stories__filter-option:nth-child(3) {
    transition-delay: 0.12s;
}

.cs-success-stories__filter-panel.is-open .cs-success-stories__filter-option:nth-child(4) {
    transition-delay: 0.16s;
}

.cs-success-stories__filter-panel.is-open .cs-success-stories__filter-option:nth-child(5) {
    transition-delay: 0.20s;
}

.cs-success-stories__filter-panel.is-open .cs-success-stories__filter-option:nth-child(6) {
    transition-delay: 0.24s;
}

.cs-success-stories__filter-panel.is-open .cs-success-stories__filter-option:nth-child(7) {
    transition-delay: 0.28s;
}

.cs-success-stories__filter-panel.is-open .cs-success-stories__filter-option:nth-child(8) {
    transition-delay: 0.32s;
}

@media (prefers-reduced-motion: reduce) {

    .cs-success-stories__filter-panel,
    .cs-success-stories__filter-panel.is-open,
    .cs-success-stories__filter-option,
    .cs-success-stories__filter-panel.is-open .cs-success-stories__filter-option {
        transition: opacity 0.01s linear, visibility 0s;
        transform: none;
        transition-delay: 0s !important;
    }
}

.cs-success-stories__filter-options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.cs-success-stories__filter-option {
    display: flex;
    align-items: center;
    gap: var(--var-8);
    padding: var(--var-14) var(--var-28);
    cursor: pointer;
    transition: background 0.15s ease;
}

.cs-success-stories__filter-option:hover {
    background: color-mix(in srgb, var(--color-reverse-fg) 5%, transparent);
}

.cs-success-stories__filter-check {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 1px solid var(--color-reverse-stroke);
    border-radius: 50%;
    background: transparent;
    color: var(--color-reverse-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.cs-success-stories__filter-option.is-checked .cs-success-stories__filter-check {
    background: var(--color-1st-brd);
    border-color: var(--color-1st-brd);
}

/* Flag trong filter option row: vuông + có border (override .cs-flag base circle, giữ border .cs-flag--sm) */
.cs-success-stories__filter-option .cs-flag {
    border-radius: 0;
}

.cs-success-stories__filter-option-label {
    flex: 1 1 0;
    min-width: 0;
    font-weight: 500;
    font-size: var(--fs-label-lg);
    line-height: 1;
    color: var(--color-reverse-fg);
}

/* Flag — circular wrapper + flagcdn SVG fill */
.cs-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.cs-flag--lg {
    width: 20px;
    height: 20px;
}

.cs-flag--sm {
    width: 16px;
    height: 16px;
    border: 1px solid var(--color-reverse-stroke);
}

.cs-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   Mobile filter button (mobile-only — hidden on desktop)
   Markup luôn render; visibility do @media kiểm soát
   ============================================================ */
.cs-success-stories__filter-mb {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--var-8);
    padding: var(--var-12) var(--var-24);
    background: var(--color-reverse-bg);
    color: var(--color-reverse-fg);
    border: none;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-label-md);
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
}

.cs-success-stories__filter-mb svg {
    flex-shrink: 0;
}

.cs-success-stories__filter-mb-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Filter button state matrix:
   - Closed + 0 selections:  bars + "Filter"
   - Closed + N selections:  "Filter (N)" + clear-X
   - Open (bất kể count):    "Filter" + close-X (close modal)                                */

/* Default (closed, 0 selections) — chỉ show bars icon */
.cs-success-stories__filter-mb-icon--close,
.cs-success-stories__filter-mb-icon--clear,
.cs-success-stories__filter-mb-count {
    display: none;
}

/* Modal open → ẩn hẳn sticky button (đã có icon X close ở top-right modal panel) */
.cs-success-stories__filter-mb[aria-expanded="true"] {
    display: none;
}

/* Closed + có selection (data-selections != "0") → ẩn bars, show count + clear-X */
.cs-success-stories__filter-mb[aria-expanded="false"]:not([data-selections="0"]) .cs-success-stories__filter-mb-icon--bars {
    display: none;
}

.cs-success-stories__filter-mb[aria-expanded="false"]:not([data-selections="0"]) .cs-success-stories__filter-mb-count,
.cs-success-stories__filter-mb[aria-expanded="false"]:not([data-selections="0"]) .cs-success-stories__filter-mb-icon--clear {
    display: inline-flex;
}

.cs-success-stories__filter-mb-count {
    align-items: center;
    line-height: 1;
}

/* Clear-X icon hoverable, không phải con của button thật (chỉ là span) — dùng cursor pointer */
.cs-success-stories__filter-mb-icon--clear {
    cursor: pointer;
}

/* ============================================================
   Mobile filter modal (open trigger: .cs-success-stories__filter-mb)
   Figma reference: node 7015-45805 (390px viewport)
   Anchor: panel position: absolute, bottom: calc(100% + 12px) so với wrapper
   .cs-success-stories__filter-mb-anchor → cách button đúng 12px.
   ============================================================ */
.cs-success-stories__filter-mb-anchor {
    position: relative;
    display: none;
    /* hidden on desktop, show via @media (max-width: 768px) */
}

.cs-success-stories__filter-modal[hidden] {
    display: none;
}

.cs-success-stories__filter-modal {
    position: static;
}

.cs-success-stories__filter-modal-backdrop {
    position: fixed;
    inset: 0;
    cursor: pointer;
    z-index: 99;
}

.cs-success-stories__filter-modal-panel {
    /* Fixed center của viewport, height 80vh — không phụ thuộc vị trí sticky button. */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    width: min(360px, calc(100vw - var(--var-40)));
    height: 80dvh;
    overflow-y: auto;
    background: var(--color-reverse-bg);
    color: var(--color-reverse-fg);
    border-radius: var(--var-32);
    padding: var(--var-8) 0;
    -webkit-overflow-scrolling: touch;
}

.cs-success-stories__filter-modal-close-row {
    display: flex;
    justify-content: flex-end;
    padding: var(--var-16) var(--var-24) 0;
}

.cs-success-stories__filter-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-reverse-fg);
    line-height: 0;
}

.cs-success-stories__filter-group {
    padding: var(--var-20) var(--var-24);
}

.cs-success-stories__filter-group+.cs-success-stories__filter-group {
    border-top: 1px solid color-mix(in srgb, var(--color-reverse-fg) 15%, transparent);
}

.cs-success-stories__filter-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    color: inherit;
    font-family: inherit;
    font-weight: 500;
    font-size: var(--fs-label-md);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.cs-success-stories__filter-group-chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.cs-success-stories__filter-group[aria-expanded="false"] .cs-success-stories__filter-group-chevron,
.cs-success-stories__filter-group:not(.is-expanded) .cs-success-stories__filter-group-chevron {
    transform: rotate(180deg);
}

.cs-success-stories__filter-options--modal {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--var-4);
    overflow: hidden;
    max-height: 600px;
    transition: max-height 0.25s ease, margin-top 0.25s ease, opacity 0.2s ease;
    margin-top: var(--var-16);
    opacity: 1;
}

.cs-success-stories__filter-group:not(.is-expanded) .cs-success-stories__filter-options--modal {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
}

/* Override option visuals trong modal (dark theme) */
.cs-success-stories__filter-options--modal .cs-success-stories__filter-option {
    color: var(--color-reverse-fg);
    padding: var(--var-8) 0;
    cursor: pointer;
    transform: none;
    opacity: 1;
    transition: none;
}

.cs-success-stories__filter-options--modal .cs-success-stories__filter-check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--color-reverse-fg) 50%, transparent);
    background: transparent;
    color: var(--color-reverse-fg);
}

.cs-success-stories__filter-options--modal .cs-success-stories__filter-option.is-checked .cs-success-stories__filter-check {
    background: var(--color-error, #ef4444);
    border-color: var(--color-error, #ef4444);
    color: #fff;
}

/* ============================================================
   Tablet (≤ 1024px)
   Figma reference: node 6832-34496 (834px viewport) — 2-col grid
   ============================================================ */
@media (max-width: 1024px) {
    .cs-success-stories__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   Mobile (≤ 768px)
   Figma reference: node 7273:9025 (390px viewport)
   Note: chỉ thay đổi layout — typography/color inherit từ desktop qua token
   ============================================================ */
@media (max-width: 768px) {
    .cs-success-stories {
        padding: var(--var-60) var(--section-horizontal-padding);
    }

    .cs-success-stories__inner {
        gap: var(--var-40);
    }

    /* Grid 1 cột */
    .cs-success-stories__list {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: var(--var-40);
    }

    /* Hide desktop filter dropdown bar */
    .cs-success-stories__filter-wrap {
        display: none;
    }

    /* Show mobile-only filter anchor (button + modal)
       Sticky bottom giống desktop filter-wrap — JS toggle .is-visible khi section vào viewport. */
    .cs-success-stories__filter-mb-anchor {
        display: inline-flex;
        align-self: center;
        position: sticky;
        bottom: var(--var-24);
        z-index: 50;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .cs-success-stories__filter-mb-anchor.is-visible {
        opacity: 1;
        pointer-events: auto;
    }

    .cs-success-stories__filter-mb {
        display: inline-flex;
    }

    /* See more button content-sized */
    .cs-success-stories__more {
        padding: var(--var-12) var(--var-24);
    }

    /* Modal panel: hạ centerpoint xuống 88px so với giữa viewport */
    .cs-success-stories__filter-modal-panel {
        top: calc(50% + 20px);
    }
}