:root {
  --font-family: 'Lexend Deca', sans-serif;
  --section-py: 80px;
  --section-px: 56px;
  --news-strip-h: 48px;
}

/* Home – Hero / Banner Section */

/* ---------- Section ---------- */
.hero-section {
    position: relative;
    overflow: hidden;
    height: calc(100vh - var(--mp-nav-h) - var(--mp-topbar-h) - var(--news-strip-h));
    min-height: 600px;
    background: #000;
}

/* ---------- Carousel (full-bleed background) ---------- */
.hero-carousel {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item {
    height: 100%;
}
.hero-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ---------- Gradient overlay (left → right: darker left side) ---------- */
.hero-gradient-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        105deg,
        rgba(0, 0, 0, 0.50) 0%,
        rgba(0, 0, 0, 0.15) 55%,
        rgba(0, 0, 0, 0.25) 100%
    );
}

/* ---------- Content layer ---------- */
.hero-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

/*
   .hero-content  –  1328 px centred column (= max-width 1440 px + 56 px side padding).
   All direct children are absolutely positioned inside this relative container.
*/
.hero-content {
    position: relative;
    height: 100%;
    max-width: 1440px;
    margin: 0 auto;
    /*
      No padding here — absolutely-positioned children ignore parent padding.
      Each child carries its own left / right offset instead.
    */
}

/* ────────────────────────────────────────────────────
   BUILDING / FUTURES title
   Figma: font 80 px, SemiBold, uppercase, gap 12 px
   "Building" → white outline only  (color: transparent + stroke)
   "Futures"  → solid teal  (#5FD1C1)

   Position (desktop): bottom-left, same bottom edge as info-box
   (Figma: container_hero-content items-end, bottom-40 of section)
──────────────────────────────────────────────────── */
.hero-title {
    position: absolute;
    left: 56px;       /* Figma: 56 px section side padding */
    bottom: 40px;     /* Figma: pb-40 from section */
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 80px;
    line-height: 1.1;
    text-transform: uppercase;
    pointer-events: none;
}

/* "BUILDING" – SVG outline text (consistent cross-browser rendering) */
.hero-title svg {
    display: block;
    width: 100%;
    height: 56px;     /* 56 px font × 1.1 line-height */
    overflow: visible;
    flex-shrink: 0;
}

/* "Futures" – solid teal */
.hero-title-futures {
    display: block;
    color: #5fd1c1;   /* var(--href-color) */
}

/* ────────────────────────────────────────────────────
   Prev / Next navigation
   Figma: 48 × 48 px white buttons, opacity 60 %,
          spread across the content width, vertical-centre
──────────────────────────────────────────────────── */
.hero-pagination {
    position: absolute;
    left: 56px;       /* Figma: 56 px gutter */
    right: 56px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: auto;
}

.hero-btn-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.6);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.3s ease;
}
.hero-btn-nav svg path {
    transition: fill 0.3s ease;
}

@media (hover: hover) {
    .hero-btn-nav:hover {
        background: #264ABC;
    }
    .hero-btn-nav:hover svg path {
        fill: white;
    }
}
.hero-btn-nav:focus {
    outline: none;
}
.hero-btn-nav.is-pressed {
    background: #264ABC;
}
.hero-btn-nav.is-pressed svg path {
    fill: white;
}
/* Project arrow SVGs have white strokes – invert so they're dark on the white button */
.hero-btn-nav img {
    width: 21px;
    height: 16px;
    object-fit: contain;
    filter: invert(1);
}

/* ────────────────────────────────────────────────────
   Slide info box
   Figma desktop : 314 × 380 px, right-56, bottom-40
   Shape         : top-left + bottom-right diagonal chamfers (24 px)
                   Derived from Vector 12 SVG:
                     M24 0  L0 24  L0 h  L(w-24) h  L w (h-24)  L w 0  Z
──────────────────────────────────────────────────── */
.hero-info-box {
    position: absolute;
    right: 167px;      /* Figma: 167 px section side padding */
    bottom: 40px;
    width: 314px;
    height: 380px;
    background: #264abc;

    /*
      Exact replication of Figma Vector 12 path (24 px chamfers):
        Top-left:     (24, 0)  → (0, 24)
        Bottom-right: (w-24, h) → (w, h-24)
        Top-right and Bottom-left: square
    */
    clip-path: polygon(
        24px 0,
        100% 0,
        100% calc(100% - 24px),
        calc(100% - 24px) 100%,
        0 100%,
        0 24px
    );

    transition: background-color 0.5s ease;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: auto;
}

.hero-info-top {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hero-info-counter {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
}

.hero-info-title {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    color: #fff;
    margin: 0;
    text-transform: unset;
}

.hero-info-desc {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
    margin: 0;
}

/* "Xem chi tiết" link */
.hero-info-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid #FFF;
    padding-bottom: 8px;
    width: fit-content;
    transition: opacity 0.2s ease;
}

.hero-link-arrow-wrap {
    display: inline-flex;
    align-items: center;
    width: 24px;
    height: 24px;
    overflow: hidden;
    position: relative;
}

/* Both arrows: absolutely centred, rotated -45° → diagonal ↗ */
.hero-link-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 16px;
    flex-shrink: 0;
    transform: translate(-50%, -50%) rotate(-45deg);
    transition: transform 0.3s ease;
}

/* Second arrow starts hidden at bottom-left (↙), outside the clip area */
.hero-link-arrow-2 {
    transform: translate(calc(-50% - 19px), calc(-50% + 19px)) rotate(-45deg);
}

/* Hover: arrow 1 exits top-right, arrow 2 slides to centre */
.hero-info-link:hover .hero-link-arrow:not(.hero-link-arrow-2) {
    transform: translate(calc(-50% + 19px), calc(-50% - 19px)) rotate(-45deg);
}
.hero-info-link:hover .hero-link-arrow-2 {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* ================================================
   RESPONSIVE OVERRIDES
================================================ */

/* ── Tablet / medium desktop (768 px – 1023 px) ── */
@media (max-width: 1023.98px) and (min-width: 768px) {
    .hero-title {
        left: 15px;
        font-size: 64px;
    }
    .hero-title-building {
        height: 70px;   /* 64 × 1.1 */
    }
    .hero-title-building text {
        font-size: 64px;
    }
    .hero-pagination {
        left: 15px;
        right: 15px;
    }
    .hero-info-box {
        right: 15px;
        width: 280px;
        height: 340px;
        padding: 32px;
    }
    .hero-info-title { font-size: 18px; }
    .hero-info-desc  { font-size: 14px; }
}

/* ── Large desktop ≥ 1280 px (integrates with fixed header) ── */
@media (min-width: 1280px) {
}

/* ── Mobile ≤ 767 px ── */
/*
   Figma mobile layout:
     - Title: top-left at ~pt-104 (standalone: top: 24 px)
     - Pagination: vertically centred
     - Info box: full-width, bottom-24, h-308 px
*/
@media (max-width: 767.98px) {
    .hero-section {
        height: calc(100svh - var(--mp-nav-h) - var(--news-strip-h));
    }

    /* Title: top-left, 15 px gutter */
    .hero-title {
        bottom: auto;
        top: 24px;
        left: 15px;
        font-size: 48px;
        gap: 12px;
    }
    .hero-title svg {
        height: 53px;   /* 48 × 1.1 */
    }

    /* Pagination: 15 px gutter */
    .hero-pagination {
        left: 15px;
        right: 15px;
        top: 45%;
    }

    /* Info box: full width minus 15 px gutters, 308 px tall, bottom-anchored */
    .hero-info-box {
        left: 15px;
        right: 15px;
        width: auto;
        height: 308px;
        bottom: 24px;
        padding: 32px;
    }
}

/* ── Small mobile ≤ 440 px ── */
@media (max-width: 440px) {
    .hero-title {
        left: 15px;
        font-size: 40px;
        width: 262px;
    }
    .hero-title svg {
        height: 34px;
    }
}

/* NEWS STRIP SECTION */
/* ── Section shell ── */
.news-strip {
    position: relative;
    height: var(--news-strip-h);
    background: #0f36a9;
    overflow: hidden;
}

/* ── Centered content wrapper (1328 px max = 1440 px − 2×56 px) ── */
.news-strip-inner {
    position: relative;
    height: 100%;
    max-width: 1440px;
    background: #264abc;
    margin: 0 auto;
    box-shadow: inset 0 -10px 8px -5px rgba(0, 0, 0, 0.2);
}

/* ── "Tin tức" label (desktop: absolute overlay) ── */
.news-strip-label {
    position: absolute;
    left: 56px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    color: #fff;
    white-space: nowrap;
    z-index: 3;
    pointer-events: none;
}

/* ── Viewport (clips items) ── */
.news-strip-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
    left: 240px;
    right: 124px;
}

/* ── Track: desktop = vertical flex column ── */
.news-strip-track {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    will-change: transform;
}

/* ── Each item row ── */
.news-strip-item {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 48px;
    min-height: 48px;
    flex-shrink: 0;
}

/* ── News text link ── */
.news-strip-text {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}
.news-strip-text:hover { color: #5fd1c1; }

/* ── Arrow button (24×24 teal square) ── */
.news-strip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #5fd1c1;
    flex-shrink: 0;
    text-decoration: none;
    overflow: hidden;
    position: relative;
    transition: background 0.2s ease;
}

/*
   Arrow animation: same pattern as hero "Xem chi tiết".
   Two SVGs rotated -45° (diagonal ↗).
   Arrow 1 sits at centre; arrow 2 waits at bottom-left outside clip.
   On hover: arrow 1 exits top-right, arrow 2 enters from bottom-left.
*/
.ns-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%) rotate(-45deg);
    transition: transform 0.4s ease;
    flex-shrink: 0;
}
.ns-arrow--2 {
    transform: translate(calc(-50% - 19px), calc(-50% + 19px)) rotate(-45deg);
}
.news-strip-item:hover .news-strip-btn .ns-arrow:not(.ns-arrow--2) {
    transform: translate(calc(-50% + 19px), calc(-50% - 19px)) rotate(-45deg);
}
.news-strip-item:hover .news-strip-btn .ns-arrow--2 {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* ── Decorative background elements (clipped by section overflow) ── */
.news-strip-deco {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}
.news-strip-deco img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
}
.news-strip-deco--left {
    width: 240px;
    height: auto;
    left: 0;
    top: 0;
}
.news-strip-deco--right {
    width: 124px;
    height: auto;
    right: 0;
    bottom: 0;
    transform: rotate(180deg);
}

/* ── Tablet 768–1024 px ── */
@media (max-width: 1024px) and (min-width: 768px) {
    .news-strip-label  { font-size: 18px; left: 25px; }
    .news-strip-deco--left {width: 150px;}
    .news-strip-deco--right {width: 80px;}
    .news-strip-viewport { left: 150px; right: 80px;}
}

/* ── Mobile ≤ 767 px : horizontal marquee ── */
@keyframes ns-scroll-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 767.98px) {
    .news-strip-inner {
        box-shadow: none;
    }

    /* Label: stays absolute; solid bg masks any text scrolling beneath it */
    .news-strip-label {
        left: 0;
        padding-left: 10px;
        font-size: 18px;
        font-weight: 500;
        min-width: 99px;   /* matches item padding-left so passing text is fully covered */
    }

    .news-strip-deco--left { 
        width: 120px;
        filter: drop-shadow(6px 0 8px rgba(0, 0, 0, 0.20));
    }
    
    .news-strip-deco--right { 
        width: 50px;
        filter: drop-shadow(-4px 0 8px rgba(0, 0, 0, 0.20));
    }

    .news-strip-viewport { 
        left: 0;
        right: 0;
    }
    
    /* Track: switch to horizontal row for marquee */
    .news-strip-track {
        gap: 30px;
        flex-direction: row;
        width: max-content;
        transition: none;
        animation: ns-scroll-left 50s linear infinite;
    }

    /* Pause on hover / focus-within */
    .news-strip:hover .news-strip-track,
    .news-strip:focus-within .news-strip-track {
        animation-play-state: paused;
    }

    /* Items: padding-left/right from Figma mobile (pl-99, pr-42) */
    .news-strip-item {
        box-shadow: none;
    }

    /* Text: not clipped — items scroll so no need for ellipsis */
    .news-strip-text {
        flex: none;
        overflow: visible;
        text-overflow: clip;
        white-space: nowrap;
    }
}

/* ── Small mobile ≤ 375 px ── */
@media (max-width: 375px) {
    .hero-pagination {
        left: 12px;
        right: 12px;
        top: 45%;
    }
    .hero-info-box {
        left: 12px;
        right: 12px;
        height: auto;
        min-height: 260px;
        padding: 24px;
    }
    .hero-info-title { font-size: 18px; }
    .hero-info-desc  { font-size: 14px; }
}

/* =====================================================
   ABOUT US SECTION
   ===================================================== */
.about-section {
    position: relative;
    background: url('../../assets/img/v2/home-page/about-us/about-us-mb-bg.png') center top / cover no-repeat;
    width: 100%;
}

/* Gradient PNG overlays fade the section edges into the page background */
.about-grad {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    pointer-events: none;
    z-index: 3;
    display: block;
    max-height: 93px;
}

.about-grad--top  { top: 0; }
.about-grad--bottom {
    bottom: 0;
    transform: scaleY(-1);
}

.about-padding {
    position: relative;
    z-index: 1;
    padding: 80px 56px;
    max-width: 1440px;
    margin: 0 auto;
}

.about-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.about-intro {
    display: flex;
    flex-direction: column;
}

.about-section-heading {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: flex-start;
}

.about-heading-icon {
    width: 24px;
    height: 64px;
    flex-shrink: 0;
    object-fit: contain;
}

.about-heading-title {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 48px;
    line-height: 1.15;
    color: #fff;
    text-transform: uppercase;
    margin: 0;
    white-space: nowrap;
}

/* Body: stacked on mobile, 2-col grid on desktop */
.about-body {
    display: grid;
    grid-template-columns: 539px 652px;
    grid-template-rows: auto auto;
    justify-content: space-between;
    row-gap: 80px;
}

.about-intro-desc {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
    margin: 0;
}

.about-mobile-nums {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: end;
    width: 100%;
}

.about-mobile-gallery {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    gap: 24px;
    height: 336px;
    width: 100%;
}

/* ── Non-desktop (< 1440px): single-column flex ── */
@media (max-width: 1439px) {
    .about-padding       { padding: 60px 40px; }
    .about-heading-icon  { height: 32px; }
    .about-heading-title { font-size: 40px; }
    .about-grad          { display: none; }

    .about-body {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .about-intro-desc {
        grid-column: unset;
        grid-row: unset;
        align-self: unset;
        width: 100%;
    }

    .about-mobile-nums {
        grid-column: unset;
        grid-row: unset;
        align-self: unset;
    }

    .about-mobile-gallery {
        grid-column: unset;
        grid-row: unset;
        gap: 12px;
    }
}

/* ── Mobile only (< 992px): tighter padding & smaller heading ── */
@media (max-width: 991px) {
    .about-padding       { padding: 48px 15px; }
    .about-heading-title { font-size: 32px; }
}

.about-mobile-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.25);
    width: 100%;
}

.about-mobile-num-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 12px 0;
    cursor: default;
}

@media (min-width: 1440px) {
    .about-mobile-num-item {
        cursor: pointer;
        display: flex;
        gap: 40px;
    }

    /* Desktop uses a dedicated background image */
    .about-section {
        background-image: url('../../assets/img/v2/home-page/about-us/about-us-bg.png');
    }
}

.about-mobile-num-label {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
    width: 154px;
}

.about-mobile-num-val {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 80px;
    line-height: 1.1;
}

.about-mobile-num-val--yellow { color: #F5BA42; }
.about-mobile-num-val--teal   { color: #5FD1C1; }
.about-mobile-num-val--orange { color: #E86042; }
.about-mobile-num-val--green  { color: #51AC70; }

@media (max-width: 1439px) {
    .about-mobile-num-val { font-size: 48px; text-align: right;}
}

/* Gallery – 3 independent vertical carousels */
.about-mg-col--left {
    flex: 0 0 201px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.about-mg-col--right {
    flex: 1;
}

.about-mg-instance {
    position: relative;
    overflow: hidden;
}

.about-mg-instance--logo {
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    width: 127px;
    height: 127px;
    margin-left: auto;
    clip-path: polygon(20px 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%, 0% 20px);
}

.about-mg-logo-img {
    position: absolute;
    inset: 0;
    width: 65%;
    height: 65%;
    object-fit: contain;
    display: block;
    margin: auto;
    z-index: 10;
    pointer-events: none;
}

.about-mg-instance--photo {
    flex: 1;
    min-height: 0;
}

.about-mg-col--right .about-mg-instance {
    height: 100%;
}

/* OLD: scroll-up slide animation (kept for easy revert)
.about-mg-slide {
    position: absolute;
    inset: 0;
    transform: translateY(101%);
    will-change: transform;
    z-index: 1;
}

.about-mg-slide.is-active  { transform: translateY(0); z-index: 2;}
.about-mg-slide.is-leaving { transform: translateY(-101%); z-index: 2; }
*/

/* Fade crossfade */
.about-mg-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 1;
    will-change: opacity;
    transition: opacity 600ms ease-in-out;
}
.about-mg-slide.is-active { opacity: 1; z-index: 2; }

/* Logo instance keeps original scroll-up animation */
.about-mg-instance--logo .about-mg-slide {
    opacity: 1;
    transform: translateY(101%);
    will-change: transform;
    transition: none;
}
.about-mg-instance--logo .about-mg-slide.is-active  { transform: translateY(0); }
.about-mg-instance--logo .about-mg-slide.is-leaving { transform: translateY(-101%); }

.about-mg-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 1439px) {
    .about-mg-col--left {
        flex: 0 0 38%;
        gap: 12px;
    }
}

.about-mobile-tagline {
    overflow: hidden;
    line-height: 1;
    display: flex;
    flex-flow: column;
    gap: 8px;
    min-width: 0;
    margin-top: 60px;
}

.about-mobile-tagline-line {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 80px;
    line-height: 1.15;
    color: #b7bfcd;
    opacity: 0.25;
    text-transform: uppercase;
    white-space: nowrap;
    margin: 0;
    letter-spacing: 0.01em;
}

.about-mobile-tagline-line--indent {
    text-align: right;
}

@media (max-width: 1439px) {
    .about-mobile-tagline      { margin-top: 26px; }
    .about-mobile-tagline-line { font-size: clamp(14px, 7.5vw, 32px); }
}

/* =====================================================
   WHAT WE DO SECTION
   ===================================================== */

.wwd-section {
    background: #fff;
}

.wwd-padding {
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 56px;
}

/* ── Section header ── */
.wwd-header-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 56px;
}

.wwd-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    min-height: 128px;
}

.wwd-heading {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.wwd-heading-icon {
    width: 26px;
    height: 48px;
    flex-shrink: 0;
    display: block;
}

.wwd-heading-title {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 48px;
    line-height: 1.15;
    color: #264abc;
    text-transform: uppercase;
    margin: 0;
}

/* "Tìm hiểu dịch vụ" button */
.wwd-service-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: #264abc;
    color: #fff;
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    text-transform: uppercase;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.2s ease;
}
.wwd-service-btn:hover { background: #1B3585; color: #fff; }

/* Arrow inside button – same two-arrow slide as hero / news-strip */
.wwd-svc-arrow {
    display: inline-flex;
    align-items: center;
    width: 24px;
    height: 24px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}
.wwd-svc-a {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 16px;
    transform: translate(-50%, -50%) rotate(-45deg);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
.wwd-svc-a--2 {
    transform: translate(calc(-50% - 19px), calc(-50% + 19px)) rotate(-45deg);
}
.wwd-service-btn:hover .wwd-svc-a:not(.wwd-svc-a--2) {
    transform: translate(calc(-50% + 19px), calc(-50% - 19px)) rotate(-45deg);
}
.wwd-service-btn:hover .wwd-svc-a--2 {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Divider line */
.wwd-divider {
    height: 1px;
    background: #e4e2df;
    width: 100%;
}

/* ── Cards grid ── */
.wwd-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* ── Single card ── */
.wwd-card {
    position: relative;
    overflow: hidden;
    height: 414px;
    cursor: pointer;
}

.wwd-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0;
}

/* Gradient layers */
.wwd-card-grad {
    position: absolute;
    inset: 0;
    z-index: 1;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.wwd-card-grad--dark {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 71%, rgba(0,0,0,0.7) 94%);
}
.wwd-card-grad--blue {
    background: linear-gradient(to bottom, rgba(38,74,188,0) 20%, #264abc 100%);
    opacity: 0;
}

/* Card content */
.wwd-card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    display: flex;
    flex-direction: column;
    z-index: 2;
    /* no gap — use margin-top on expandable items so hidden items don't reserve space */
}

/* Header row: title + action */
.wwd-card-hrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.wwd-card-title {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.25;
    color: #fff;
    margin: 0;
}

/* Desktop ↗ arrow icon */
.wwd-card-circle-arrow {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
}

/* Description text (hidden by default, animated in) */
.wwd-card-desc {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
    margin-top: 0;
    margin-bottom: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.5s ease, max-height 0.5s ease, margin-top 0.5s ease;
}

/* Mobile expand button (hidden on desktop) */
.wwd-expand-btn {
    display: none;
}

/* Mobile detail link (hidden on desktop) */
.wwd-card-detail {
    display: none;
}

/* ── Desktop active states (≥ 992 px) ──
   Active = hovered card, or the default `.is-open` card while no card is hovered. */
@media (min-width: 992px) {
    .wwd-card:hover .wwd-card-grad--dark,
    .wwd-grid:not(:has(.wwd-card:hover)) .wwd-card.is-open .wwd-card-grad--dark { opacity: 0; }

    .wwd-card:hover .wwd-card-grad--blue,
    .wwd-grid:not(:has(.wwd-card:hover)) .wwd-card.is-open .wwd-card-grad--blue { opacity: 1; }

    .wwd-card:hover .wwd-card-circle-arrow,
    .wwd-grid:not(:has(.wwd-card:hover)) .wwd-card.is-open .wwd-card-circle-arrow { transform: translate(4px, -4px); }

    .wwd-card:hover .wwd-card-desc,
    .wwd-grid:not(:has(.wwd-card:hover)) .wwd-card.is-open .wwd-card-desc {
        opacity: 1;
        /* match content height so the rise glides to a stop (no overshoot/bounce) */
        max-height: 72px;
        margin-top: 24px;
    }
}

/* ── Mobile / Tablet (≤ 991 px) ── */
@media (max-width: 991px) {
    .wwd-padding {
        padding: 48px 16px;
    }

    .wwd-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        min-height: auto;
    }

    .wwd-heading-icon { height: 32px; }

    .wwd-heading-title {
        font-size: 32px;
        line-height: 1.2;
    }

    .wwd-header-wrap { margin-bottom: 24px; }

    .wwd-grid {
        grid-template-columns: 1fr;
    }

    .wwd-card {
        height: 544px;
    }

    /* Title size on mobile */
    .wwd-card-title {
        font-size: 20px;
        line-height: 1.3;
    }

    /* Hide desktop circle arrow */
    .wwd-card-circle-arrow { display: none; }

    /* Show expand button */
    .wwd-expand-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        flex-shrink: 0;
    }

    .wwd-expand-label {
        font-family: 'Lexend Deca', sans-serif;
        font-weight: 600;
        font-size: 16px;
        line-height: 1.5;
        color: #fff;
        white-space: nowrap;
    }

    /* Plus icon: white square with blue border and + */
    .wwd-expand-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        background: #fff;
        border: 1px solid #264abc;
        position: relative;
    }
    .wwd-expand-icon::before,
    .wwd-expand-icon::after {
        content: '';
        position: absolute;
        background: #264abc;
    }
    .wwd-expand-icon::before { width: 1px; height: 12px; }
    .wwd-expand-icon::after  { width: 12px; height: 1px; }

    /* Show detail link on mobile */
    .wwd-card-detail {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: #fff;
        font-family: 'Lexend Deca', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.5;
        text-transform: uppercase;
        text-decoration: none;
        border-bottom: 1px solid rgba(255,255,255,0.7);
        padding-bottom: 2px;
        width: fit-content;
        margin-top: 0;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: opacity 0.5s ease, max-height 0.5s ease, margin-top 0.5s ease;
    }

    /* Mobile open state */
    .wwd-card.is-open .wwd-card-grad--dark { opacity: 0; }
    .wwd-card.is-open .wwd-card-grad--blue { opacity: 1; }
    .wwd-card.is-open .wwd-card-desc {
        opacity: 1;
        max-height: 120px;
        margin-top: 24px;
    }
    .wwd-card.is-open .wwd-card-detail {
        opacity: 1;
        max-height: 48px;
        margin-top: 24px;
    }
}

/* Detail link arrow (mobile) */
.wwd-detail-arrow {
    display: inline-flex;
    align-items: center;
    width: 24px;
    height: 24px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}
.wwd-da {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 16px;
    transform: translate(-50%, -50%) rotate(-45deg);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
.wwd-da--2 {
    transform: translate(calc(-50% - 19px), calc(-50% + 19px)) rotate(-45deg);
}
.wwd-card-detail:hover .wwd-da:not(.wwd-da--2) {
    transform: translate(calc(-50% + 19px), calc(-50% - 19px)) rotate(-45deg);
}
.wwd-card-detail:hover .wwd-da--2 {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* ═══════════════════════════════════════════
   WHAT WE BUILD SECTION
═══════════════════════════════════════════ */
.wwb-section {
    background: #fff;
}
.wwb-padding {
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 56px;
}

/* ── Header ── */
.wwb-header-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 24px;
}
.wwb-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.wwb-heading {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}
.wwb-heading-icon {
    width: 26px;
    height: 48px;
    flex-shrink: 0;
    display: block;
}
.wwb-heading-title {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 48px;
    line-height: 1.15;
    color: #264abc;
    text-transform: uppercase;
    margin: 0;
}

/* "Xem chi tiết" button – same pattern as wwd-service-btn */
.wwb-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: #264abc;
    color: #fff;
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    text-transform: uppercase;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.2s ease;
}
.wwb-cta-btn:hover { background: #1B3585; color: #fff; }

/* Two-arrow slide animation (identical to wwd-svc-arrow) */
.wwb-cta-arrow {
    display: inline-flex;
    align-items: center;
    width: 24px;
    height: 24px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}
.wwb-cta-a {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 16px;
    transform: translate(-50%, -50%) rotate(-45deg);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
.wwb-cta-a--2 {
    transform: translate(calc(-50% - 19px), calc(-50% + 19px)) rotate(-45deg);
}
.wwb-cta-btn:hover .wwb-cta-a:not(.wwb-cta-a--2) {
    transform: translate(calc(-50% + 19px), calc(-50% - 19px)) rotate(-45deg);
}
.wwb-cta-btn:hover .wwb-cta-a--2 {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.wwb-divider {
    height: 1px;
    background: #e4e2df;
    width: 100%;
}

/* ── Body ── */
.wwb-body {
    display: flex;
    align-items: stretch;
    gap: 24px;
}

/* ── Accordion ── */
.wwb-accordion {
    flex: 1 1 559px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.wwb-item {
    border-bottom: 1px solid #e4e2df;
}
.wwb-item:first-child {
    border-top: 1px solid #e4e2df;
}

.wwb-item-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 16px;
    transition: background 0.3s ease, padding 0.3s ease;
}
.wwb-item.is-open .wwb-item-btn {
    background: #264abc;
}

.wwb-item-label {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;
    color: #000;
    transition: color 0.3s ease;
}
.wwb-item.is-open .wwb-item-label {
    color: #fff;
}

/* Toggle +/- icon */
.wwb-toggle {
    width: 24px;
    height: 24px;
    border: 1.5px solid #264abc;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: background 0.3s ease, border-color 0.3s ease;
}
.wwb-toggle::before,
.wwb-toggle::after {
    content: '';
    position: absolute;
    background: #264abc;
    transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
}
.wwb-toggle::before { width: 12px; height: 1.5px; }
.wwb-toggle::after  { width: 1.5px; height: 12px; }

.wwb-item:not(.is-open):hover .wwb-item-btn {
    background-color: #E9EDF8;
}

.wwb-item:hover .wwb-toggle {
    background-color: #264abc;
}

.wwb-item:hover .wwb-toggle::before,
.wwb-item:hover .wwb-toggle::after {
    background-color: #fff;
}

.wwb-item.is-open .wwb-toggle {
    background: #fff;
    border-color: #264abc;
}
.wwb-item.is-open .wwb-toggle::before,
.wwb-item.is-open .wwb-toggle::after {
    background: #264abc;
}
.wwb-item.is-open .wwb-toggle::after {
    transform: scaleY(0);
    opacity: 0;
}

/* Active tab: header darkens on hover */
.wwb-item.is-open .wwb-item-btn:hover {
    background: #1B3585;
}

/* Active tab: hovering the header fills the toggle blue with a white ring +
   white mark (white border is needed for contrast against the blue header). */
.wwb-item.is-open .wwb-item-btn:hover .wwb-toggle {
    background-color: #264abc;
    border-color: #fff;
}
.wwb-item.is-open .wwb-item-btn:hover .wwb-toggle::before,
.wwb-item.is-open .wwb-item-btn:hover .wwb-toggle::after {
    background-color: #fff;
}

/* Collapsible body — JS drives inline height for accurate open/close animation */
.wwb-item-body {
    overflow: hidden;
    height: 0;
    transition: height 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.wwb-item-inner {
    display: flex;
    flex-flow: column;
    gap: 24px;
    padding: 40px 0 40px 24px;
}

.wwb-item-subtitle {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
    color: #333;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.32s ease, transform 0.32s ease;
}
.wwb-item.is-open .wwb-item-subtitle {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.18s;
}

.wwb-item-desc {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #767676;
    margin: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.32s ease, transform 0.32s ease;
}
.wwb-item.is-open .wwb-item-desc {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.26s;
}

/* In-accordion image – mobile only */
.wwb-item-img-wrap {
    clip-path: polygon(20px 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%, 0% 20px);
}
.wwb-item-img {
    width: 100%;
    height: 308px;
    object-fit: cover;
    display: block;
}

/* ── Desktop image panel ── */
.wwb-image-panel {
    flex: 0 1 652px;
    position: relative;
    overflow: hidden;
    min-height: 400px;
    clip-path: polygon(
        20px 0%,
        100% 0%,
        100% calc(100% - 20px),
        calc(100% - 20px) 100%,
        0% 100%,
        0% 20px
    );
}
.wwb-panel-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.48s ease, transform 0.48s ease;
    pointer-events: none;
}
.wwb-panel-img.is-active {
    opacity: 1;
    transform: scale(1);
}

/* ── Hide in-accordion image on desktop ── */
@media (min-width: 992px) {
    .wwb-item-img-wrap { display: none; }
}

/* ─────────────────────────────────────────
   RESPONSIVE – Tablet / Mobile (< 992 px)
───────────────────────────────────────── */
@media (max-width: 991.98px) {
    .wwb-padding {
        padding: 48px 16px;
    }
    .wwb-header-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .wwb-heading-icon { height: 32px; }
    .wwb-heading-title {
        font-size: 32px;
        line-height: 1.2;
    }
    .wwb-body {
        flex-direction: column;
    }
    .wwb-accordion {
        flex: none;
        width: 100%;
    }
    .wwb-item { 
      margin-bottom: 12px;
    }
    .wwb-image-panel { display: none; }
    .wwb-item-btn {
        padding: 18px;
    }
    .wwb-item-inner {
        padding: 24px 0 12px 0;
    }
    .wwb-item-label { 
      font-size: 20px;
    }
    .wwb-item-subtitle { 
      font-size: 18px;
    }
}

/* ── Large desktop (≥ 1440 px): fixed widths matching Figma spec ── */
@media (min-width: 1440px) {
    .wwb-body {
        justify-content: space-between;
    }
    .wwb-accordion {
        flex: 0 0 559px;
    }
}

/* ─────────────────────────────────────────
   ICONIC PROJECTS SECTION  (icp-)
───────────────────────────────────────── */

.icp-section {
    background: #fff;
}
.icp-padding {
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 56px;
}

/* ── Header ── */
.icp-header-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 56px;
}
.icp-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
.icp-heading-title {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
    color: #333;
    text-transform: uppercase;
    margin: 0;
}
.icp-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #264abc;
    color: #fff;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    text-transform: uppercase;
    text-decoration: none;
    padding: 16px 24px;
    flex-shrink: 0;
    transition: background 0.2s ease;
}
.icp-cta-btn:hover { background: #1B3585; color: #fff; }

/* CTA arrow – same two-arrow slide as other sections */
.icp-cta-arrow {
    display: inline-flex;
    align-items: center;
    width: 24px;
    height: 16px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}
.icp-cta-a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
.icp-cta-a--2 {
    transform: translate(calc(-50% - 19px), calc(-50% + 19px)) rotate(-45deg);
}
.icp-cta-btn:hover .icp-cta-a:not(.icp-cta-a--2) {
    transform: translate(calc(-50% + 19px), calc(-50% - 19px)) rotate(-45deg);
}
.icp-cta-btn:hover .icp-cta-a--2 {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Mobile: compact CTA buttons (48px tall, 16px padding) */
@media (max-width: 991.98px) {
    .wwd-service-btn,
    .wwb-cta-btn,
    .icp-cta-btn {
        height: 48px;
        padding: 16px;
        box-sizing: border-box;
    }
}

.icp-divider {
    height: 1px;
    background: #e4e2df;
}

/* ── Grid ── */
.icp-grid {
    display: flex;
    gap: 24px;
    align-items: stretch;
}

/* ── Card ── */
/* flex-grow ratio 2.076:1 matches Figma 652px active / 314px inactive */
.icp-card {
    position: relative;
    flex: 1 0 0;
    min-width: 0;
    height: 489px;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    /* 6-point polygon = full rectangle (cut size = 0) — same point count as active
       so CSS can interpolate the transition smoothly */
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
    transition: flex-grow 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                clip-path  0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.icp-card.is-active {
    flex-grow: 2.076;
    /* cut top-left and bottom-right corners by 20px */
    clip-path: polygon(
        20px 0%,
        100% 0%,
        100% calc(100% - 20px),
        calc(100% - 20px) 100%,
        0% 100%,
        0% 20px
    );
}

/* Image – fills card width, anchored left so expansion "reveals" rightward */
.icp-card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    pointer-events: none;
    display: block;
}
/* Gradient overlay */
.icp-card-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 26.667%, rgba(0,0,0,0.85) 83.75%);
    pointer-events: none;
}

/* Content pinned to bottom; width follows the card via inset-0 */
.icp-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Title row */
.icp-card-hrow {
    display: flex;
    align-items: center;
    gap: 16px;
}
.icp-card-title {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    color: #fff;
    margin: 0;
    position: relative;
}

/* Underline grows from the left on hover */
.icp-card-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
.icp-card:hover .icp-card-title::after {
    transform: scaleX(1);
}

/* Arrow in title – hidden until hover */
.icp-title-arrow {
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.25s ease;
    line-height: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-45deg);
}
.icp-card:hover .icp-title-arrow { opacity: 1; }

/* Description */
.icp-card-desc {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #fff;
    margin: 0;
}

/* "Xem chi tiết" link – mobile expand only */
.icp-card-detail {
    display: none;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    text-transform: uppercase;
    border-bottom: 1.5px solid #fff;
    padding-bottom: 2px;
    align-self: flex-start;
}
/* Detail link arrow */
.icp-detail-arrow {
    display: inline-flex;
    align-items: center;
    width: 24px;
    height: 16px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}
.icp-da {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
.icp-da--2 {
    transform: translate(calc(-50% - 19px), calc(-50% + 19px)) rotate(-45deg);
}
.icp-card-detail:hover .icp-da:not(.icp-da--2) {
    transform: translate(calc(-50% + 19px), calc(-50% - 19px)) rotate(-45deg);
}
.icp-card-detail:hover .icp-da--2 {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Expand button – mobile only */
.icp-expand-btn {
    display: none;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #fff;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
}
.icp-expand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid #264abc;
    background: #fff;
    flex-shrink: 0;
    position: relative;
}
.icp-expand-icon::before,
.icp-expand-icon::after {
    content: '';
    position: absolute;
    background: #264abc;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.icp-expand-icon::before { width: 1px; height: 12px; }   /* vertical bar   */
.icp-expand-icon::after  { width: 12px; height: 1px; }   /* horizontal bar */
/* Active → hide vertical bar → minus icon */
.icp-card.is-active .icp-expand-icon::before {
    transform: scaleY(0);
    opacity: 0;
}

/* ── Desktop (≥ 992 px) ── */
@media (min-width: 992px) {
    /* Description hidden on inactive cards, shown on active */
    .icp-card-desc { display: none; }
    .icp-card.is-active .icp-card-desc { display: block; }
    /* Mobile-only elements stay hidden */
    .icp-card-detail { display: none !important; }
    .icp-expand-btn  { display: none !important; }
}

/* ── Tablet / Mobile (< 992 px) ── */
@media (max-width: 991.98px) {
    .icp-header-wrap { 
      margin-bottom: 24px;
    }

    .icp-padding {
        padding: 48px 16px;
    }
    .icp-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }
    .icp-heading-title {
        font-size: 24px;
        font-weight: 700;
        line-height: 1.25;
    }
    .icp-grid {
        flex-direction: column;
        gap: 24px;
    }
    /* Cards: full width, fixed height, no flex/width transition.
       All cards keep the beveled corners (top-left + bottom-right). */
    .icp-card,
    .icp-card.is-active {
        flex: none;
        width: 100%;
        height: 480px;
        cursor: pointer;
        transition: none;
        clip-path: polygon(
            20px 0%,
            100% 0%,
            100% calc(100% - 20px),
            calc(100% - 20px) 100%,
            0% 100%,
            0% 20px
        );
    }
    /* Title arrow hidden on mobile */
    .icp-title-arrow { display: none; }
    /* Override desktop gap – use individual margins instead */
    .icp-card-content { gap: 0; }
    /* Body wrapper: slide-up animation on expand/collapse */
    .icp-card-body {
        overflow: hidden;
        height: 0;
        transition: height 0.42s cubic-bezier(0.4, 0, 0.2, 1);
    }
    /* Inside wrapper: always rendered, opacity fades in after body opens */
    .icp-card-body .icp-card-desc {
        display: block;
        margin-top: 32px;
        opacity: 0;
        transition: opacity 0.28s ease;
    }
    .icp-card.is-active .icp-card-body .icp-card-desc {
        opacity: 1;
        transition-delay: 0.22s;
    }
    .icp-card-body .icp-card-detail {
        display: inline-flex;
        margin-top: 24px;
        opacity: 0;
        transition: opacity 0.28s ease;
    }
    .icp-card.is-active .icp-card-body .icp-card-detail {
        opacity: 1;
        transition-delay: 0.3s;
    }
    /* Expand button visible on mobile */
    .icp-expand-btn {
        display: inline-flex;
        margin-top: 40px;
    }
}

/* ===================================================
   LAYOUT
=================================================== */
.section {
  width: 100%;
  padding: var(--section-py) var(--section-px);
}

.section__inner {
  max-width: 1328px;
  margin: 0 auto;
}

/* ===================================================
   SECTION HEADER
=================================================== */
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--gray-300);
  margin-bottom: 24px;
  gap: 16px;
}

.section-header--no-border {
  border-bottom: none;
  padding-bottom: 0;
}

.section-header__title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.section-header__title {
  font-size: 48px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--blue-500);
  margin: 0;
}

/* ===================================================
   HEADING ICON (hamburger lines)
=================================================== */
.heading-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 24px;
  height: 64px;
  flex-shrink: 0;
}

.heading-icon svg {
  width: 26px;
  height: 64px;
}

.heading-icon--white svg line {
  stroke: var(--white);
}

/* ===================================================
   BUTTONS
=================================================== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--blue-500);
  color: var(--white);
  padding: 16px 24px;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s ease, transform 0.2s ease;
}

.btn-primary:hover {
  background: #1c389e;
}

.btn-primary svg {
  width: 18px;
  height: 16px;
  flex-shrink: 0;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--white);
  border: 1.5px solid var(--blue-500);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}

.btn-outline:hover {
  background: #eef1fd;
}

.btn-outline:active {
  background: var(--blue-500);
  border-color: var(--blue-500);
}

.btn-outline:active svg path{
  stroke: var(--white);
}

.btn-outline.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}

/* ===================================================
   SECTION 1: TẠI COTECCONS CON NGƯỜI LÀ TÀI SẢN CỐT LÕI
=================================================== */
#section-people {
  background: var(--white);
}

#section-people .section-header {
  border-bottom: none;
  padding-bottom: 32px;
  margin-bottom: 0;
  position: relative;
}

#section-people .section-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50.9%;
  right: 0;
  height: 1px;
  background: var(--gray-300);
}

.people__content {
  position: relative;
}

/* ── 4-col grid: row-1 = text, row-2 = images + button ── */
.people__images {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto 879px;
  column-gap: 24px;
  width: 100%;
  margin-top: 32px;
}

/* Paragraph – row 1, cols 3–4 (own row, no overlap with images) */
.people__desc {
  grid-column: 3 / 5;
  grid-row: 1;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gray-700);
  margin: 0;
  padding-bottom: 80px;
}

/* Button – row 2, col 3, pinned to top of cell */
.people__btn {
  grid-column: 3;
  grid-row: 2;
  align-self: start;
  justify-self: start;
}

.people__image-strip {
  overflow: hidden;
  width: 100%;
}

.people__image-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Row 2, bottom-aligned. btn(56px) + gap(163px) + strip-3(660px) = 879px → no overlap */
.strip-1 { grid-column: 1; grid-row: 2; height: 838px; align-self: end; position: relative; top: -80px; }
.strip-2 { grid-column: 2; grid-row: 2; height: 770px; align-self: end; position: relative; top: -265px; }
.strip-3 { grid-column: 3; grid-row: 2; height: 660px; align-self: end; position: relative; top: -80px; }
.strip-4 { grid-column: 4; grid-row: 2; height: 879px; align-self: end; position: relative; }

/* ===================================================
   SECTION 2: QUAN HỆ CỔ ĐÔNG
=================================================== */
#section-investors {
  background: #2e3f6b;
  position: relative;
  overflow: hidden;
}

.investors__bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  opacity: 0.15;
  pointer-events: none;
}

#section-investors .section__inner {
  position: relative;
  z-index: 2;
}

.investors__grid {
  display: grid;
  grid-template-columns: 761fr 599fr;
  gap: 0;
  align-items: stretch;
  min-height: 295px;
  overflow: hidden;
  clip-path: polygon(
    20px 0%,
    100% 0%,
    100% calc(100% - 20px),
    calc(100% - 20px) 100%,
    0% 100%,
    0% 20px
  );
}

.investors__left {
  padding: 54px 50px;
  background: var(--blue-vibrant1-500);
}

.investors__left .section-header__title {
  color: var(--white);
}

.investors__left .section-header__title-wrap {
  margin-bottom: 24px;
}

.investors__left p {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--white);
  margin-top: 20px;
}

.investors__right {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 10px;
}

.stock-price {
  font-size: 80px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--blue-500);
}

.stock-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stock-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stock-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.stock-dot--ticker {
  background: #000000;
}

.stock-label {
  font-size: 18px;
  font-weight: 500;
  color: #000000;
  line-height: 1.35;
}

.stock-change-abs {
  font-size: 18px;
  font-weight: 500;
  color: #000000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.stock-pct {
  font-size: 18px;
  font-weight: 500;
}

/* ── Stock row indicator states ── */

/* Case 1: Stable */
.stock-row.stable .stock-dot { background: #F5BA42; }
.stock-row.stable .stock-pct { color: #F5BA42; }
.stock-row.stable svg        { display: none; }

/* Case 2: Increase */
.stock-row.increase .stock-dot  { background: #86DE8C; }
.stock-row.increase .stock-pct  { color: #86DE8C; }
.stock-row.increase svg path    { fill: #86DE8C; }

/* Case 3: Decrease */
.stock-row.decrease .stock-dot  { background: #FF0000; }
.stock-row.decrease .stock-pct  { color: #FF0000; }
.stock-row.decrease svg path    { fill: #FF0000; }
.stock-row.decrease svg         { transform: rotate(90deg); }

/* Case 4: Ceiling */
.stock-row.ceiling .stock-dot  { background: #B700B7; }
.stock-row.ceiling .stock-pct  { color: #B700B7; }
.stock-row.ceiling svg path    { fill: #B700B7; }

/* Case 5: Floor */
.stock-row.floor .stock-dot  { background: #4CB3F8; }
.stock-row.floor .stock-pct  { color: #4CB3F8; }
.stock-row.floor svg path    { fill: #4CB3F8; }
.stock-row.floor svg         { transform: rotate(90deg); }

.stock-date {
  font-size: 16px;
  font-weight: 300;
  color: #000000;
}

/* ===================================================
   SECTION 3: PHÁT TRIỂN BỀN VỮNG
=================================================== */
#section-esg {
  background: var(--white);
}

.esg__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: 24px;
}

.esg__quote {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gray-700);
  max-width: 540px;
  margin: 0;
}

.esg__nav {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.esg__prev,
.esg__next {
  transition: background 0.2s, border-color 0.2s;
}

.esg__prev svg path,
.esg__next svg path {
  transition: stroke 0.2s;
}

.esg__prev:not(.swiper-button-disabled):hover,
.esg__next:not(.swiper-button-disabled):hover {
  background: var(--blue-500);
  border-color: var(--blue-500);
}

.esg__prev:not(.swiper-button-disabled):hover svg path,
.esg__next:not(.swiper-button-disabled):hover svg path {
  stroke: #ffffff;
}

.esg__swiper-wrap {
  margin-right: calc(-1 * var(--section-px));
  overflow: hidden;
}

.esg__swiper {
  overflow: visible !important;
  padding-right: var(--section-px);
}

.esg-card {
  position: relative;
  height: 414px;
  overflow: hidden;
  cursor: pointer;
}

.esg-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.esg-card__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.7) 100%);
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.esg-card__gradient--blue {
  background: linear-gradient(180deg, rgba(81, 172, 112, 0) 20%, #51AC70 99.99%);
  opacity: 0;
}

.esg-card__content {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  z-index: 2;
}

/* Header row: label + arrow / expand btn */
.esg-card__hrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}

.esg-card__label {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--white);
}

.esg-card__desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.22s ease, max-height 0.46s ease-in-out, margin-top 0.46s ease-in-out;
}

/* ── ESG Card desktop hover states + overflow effect (≥ 992px) ── */
@media (min-width: 992px) {
  #section-esg {
    overflow: hidden;
  }

  .esg__swiper-wrap {
    margin-left: calc(-1 * var(--section-px));
    overflow: visible;
  }

  .esg__swiper {
    padding-right: 0;
  }

  .esg-card:hover .esg-card__img { transform: scale(1.02); }
  .esg-card:hover .esg-card__gradient:not(.esg-card__gradient--blue) { opacity: 0; }
  .esg-card:hover .esg-card__gradient--blue { opacity: 1; }
  .esg-card:hover .esg-card__arrow { transform: translateX(1px); }
  .esg-card:hover .esg-card__desc {
    opacity: 1;
    max-height: 64px;
    margin-top: 2px;
  }
}

.esg-card__arrow {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.46s ease-in-out;
}

/* Mobile expand button (hidden on desktop) */
.esg-expand-btn {
  display: none;
}

/* ===================================================
   SECTION 4: TIN TỨC
=================================================== */
#section-news {
  background: #F7F6F5;
}

#section-news .section-header {
  margin-bottom: 24px;
}

.news__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  align-items: stretch;
  position: relative;
}

.news__layout::before {
  content: '';
  position: absolute;
  left: calc(50% - 0.5px);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--gray-300);
  pointer-events: none;
}

/* Featured card */
.news-featured {
  cursor: pointer;
  overflow: hidden;
  height: 100%;
  background: var(--white);
}

.news-featured > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.news-featured:hover .news-title {
  text-decoration: underline;
}

.news-featured__img {
  width: 100%;
  height: 472px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.news-featured:hover .news-featured__img {
  transform: scale(1.03);
}

.news-featured__body {
  background: var(--white);
  padding: 24px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.news-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.news-tag {
  font-size: 16px;
  font-weight: 600;
  color: var(--blue-500);
  line-height: 1.5;
}

.news-date {
  font-size: 12px;
  font-weight: 300;
  color: #333333;
  line-height: 1.5;
}

.news-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  color: #333333;
  margin: 0;
}

/* News list */
.news-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.news-item {
  position: relative;
  padding: 40px 0;
  border-bottom: 1px solid var(--gray-300);
  cursor: pointer;
}

.news-item > a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.news-item:first-child {
  padding-top: 0;
}

.news-item:last-child::after {
  content: '';
  position: absolute;
  left: -12px;
  bottom: -1px;
  width: 12px;
  height: 1px;
  background: var(--gray-300);
}

.news-item:hover .news-item__title {
  text-decoration: underline;
}

.news-item__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.news-item .news-date {
  font-size: 16px;
  font-weight: 400;
  color: var(--gray-700);
}

.news-item__title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--black);
  margin: 0;
}

/* News swiper (mobile-only, hidden by default) */
.news__swiper-wrap {
  display: none;
}

.news__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  gap: 16px;
  padding-right: var(--section-px);
}

.news__pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
}

.news__pagination .swiper-pagination-bullet {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  color: var(--blue-500);
  opacity: 1;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.news__pagination .swiper-pagination-bullet-active {
  background: var(--blue-500);
  border-color: var(--blue-500);
  color: var(--white);
}

.news-card {
  overflow: hidden;
}

.news-card__img {
  width: 100%;
  aspect-ratio: 408 / 308;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.news-card:hover .news-card__img {
  transform: scale(1.03);
}

.news-card__body {
  background: var(--white);
  padding: 24px;
}

.news-card__title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: #333333;
  margin: 0;
}

/* ===================================================
   SECTION 5: COTECCONS GROUP
=================================================== */
#section-group {
  background: var(--white);
}

#section-group .section-header {
  margin-bottom: 24px;
}

.group__logos-viewport {
  overflow: hidden;
}

.group__logos-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.group__logo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.group__logo-item:first-child {
  width: 155px;
}

.group__logo-item:nth-child(7) {
  width: 160px;
}

.group__logo-item--dup {
  display: none;
}

.group__logo-item img {
  width: 205px;
  height: 113px;
  object-fit: contain;
}

@keyframes group-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===================================================
   SWIPER OVERRIDES
=================================================== */
.swiper-slide {
  height: auto;
}

/* ===================================================
   RESPONSIVE: TABLET (max-width: 991px)
=================================================== */
@media (max-width: 991px) {
  :root {
    --section-py: 60px;
    --section-px: 24px;
  }

  .section-header__title {
    font-size: 36px;
  }

  /* Section 1 – tablet: columns still 1fr (resize together), row-2 shorter */
  .people__images {
    grid-template-rows: auto 500px;
    column-gap: 16px;
    margin-top: 32px;
  }

  .strip-1 { height: 450px; top: 0; }
  .strip-2 { height: 400px; top: 0; }
  .strip-3 { height: 350px; top: 0; }
  .strip-4 { height: 500px; top: 0; }

  /* Section 2 */
  .investors__grid {
    grid-template-columns: 1fr 1.2fr;
  }

  .stock-price {
    font-size: 56px;
  }

  .investors__right {
    padding: 32px 24px;
  }

  /* Section 3 */
  .esg-card {
    height: 400px;
  }

  .esg-card__arrow { display: none; }

  .esg-expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
  }

  .esg-expand-label {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
    white-space: nowrap;
  }

  .esg-expand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #51AC70;
    position: relative;
  }
  .esg-expand-icon::before,
  .esg-expand-icon::after {
    content: '';
    position: absolute;
    background: #51AC70;
  }
  .esg-expand-icon::before { width: 1px; height: 12px; }
  .esg-expand-icon::after  { width: 12px; height: 1px; }

  /* Mobile open state */
  .esg-card.is-open .esg-card__gradient:not(.esg-card__gradient--blue) { opacity: 0; }
  .esg-card.is-open .esg-card__gradient--blue { opacity: 1; }
  .esg-card.is-open .esg-card__desc {
    opacity: 1;
    max-height: 120px;
    margin-top: 8px;
  }

  /* Section 4 */
  .news-featured__img {
    height: 320px;
  }

  /* Section 5 */
  .group__logos-track {
    gap: 16px;
  }
}

/* ===================================================
   RESPONSIVE: MOBILE (max-width: 767px)
=================================================== */
@media (max-width: 767px) {
  :root {
    --section-py: 48px;
    --section-px: 16px;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 24px;
  }

  .section-header__title {
    font-size: 32px;
    line-height: 1.2;
  }

  /* Section 1 Mobile */
  #section-people .section-header {
    border-bottom: 1px solid var(--gray-300);
    padding-bottom: 24px;
    margin-bottom: 0;
  }

  #section-people .section-header::after {
    display: none;
  }

  .people__images {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    column-gap: 16px;
    row-gap: 0;
    margin-top: 0;
  }

  /* Full-width text row */
  .people__desc {
    grid-column: 1 / 3;
    grid-row: 1;
    color: var(--gray-700);
    padding: 24px 0;
  }

  /* Full-width button row */
  .people__btn {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  /* Staggered 2-col image grid (rows 3-4) */
  .strip-1 { grid-column: 1; grid-row: 3; height: 284px; align-self: start; margin-top: 140px; }
  .strip-2 { grid-column: 2; grid-row: 3; height: 355px; align-self: start; margin-top: 0; }
  .strip-3 { grid-column: 1; grid-row: 4; height: 355px; align-self: start; margin-top: 16px; }
  .strip-4 { grid-column: 2; grid-row: 4; height: 284px; align-self: start; margin-top: -53px; }

  /* Section 2 Mobile */
  .investors__grid {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 0;
  }

  .investors__left {
    border-right: none;
    border-bottom: 1px solid #A2A09E;
    padding: 40px;
  }

  .investors__right {
    /* background: var(--blue-vibrant1-500); */
    padding: 40px;
    align-items: flex-start;
  }

  .stock-price {
    font-size: 48px;
    /* color: #FFFFFF; */
  }

  /* Section 3 Mobile */
  .esg__controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .esg-card {
    height: 544px;
  }

  .esg__swiper-wrap {
    margin-right: calc(-1 * var(--section-px));
  }

  .esg__swiper {
    padding-right: var(--section-px);
  }

  /* Section 4 Mobile */
  .news__layout {
    display: none;
  }

  .news__swiper-wrap {
    display: block;
    margin-right: calc(-1 * var(--section-px));
  }

  .news__swiper {
    padding-right: var(--section-px);
  }

  /* Section 5 Mobile */
  .group__logos-track {
    justify-content: flex-start;
    gap: 32px;
    width: max-content;
    animation: group-marquee 8s linear infinite;
  }

  .group__logo-item--dup {
    display: flex;
  }

  /* .group__logo-item img {
    width: 140px;
    height: 77px;
  } */
}

@media (max-width: 576px) {
    .w-sm-100 {
        width: 100% !important;
    }
}