/* ==========================================================================
   Sustainability Case Studies — bo suu tap moi
   File rieng, khong dung vao st_style.css. Moi selector deu bat dau bang
   .scs- nen khong cham toi bo cu (.cs-).
   ========================================================================== */

.scs-detail {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    color: #001C66;
    background: #fff;
}

.scs-shell {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- vun chung ---------- */
.scs-badge {
    display: inline-block;
    padding: 12px 16px;
    border-radius: 54px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.16px;
    color: #fff;
    background: #001C66;
}

.scs-figure {
    margin: 40px 0 0;
}

    .scs-figure img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 12px;
    }

    .scs-figure figcaption {
        margin-top: 12px;
        font-size: 16px;
        line-height: 22px;
        color: #0A142D;
        font-weight:400;
    }

/* Nut vien bo tron — CTA cua Block 2 va nut View all. */
.page a.scs-btn {
    display: inline-block;
    margin-top: 32px;
    padding: 13px 28px;
    border: 1px solid #0079FF;
    border-radius: 54px;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.16px;
    color: #0079FF;
    background: transparent;
    text-decoration: none;
    transition: background-color .2s, color .2s;
}
    .page a.scs-btn.other-btn {
        margin-top: 0px;
    }

    .scs-btn:hover,
    .scs-btn:focus {
        background: #0079FF;
        color: #fff;
        text-decoration: none;
    }

/* Lien ket chu co mui ten — CTA cua Block 1. */
.scs-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 32px;

   
    text-decoration: none;
}
.page a.scs-link {
    font-size: 16px;
    font-family: Segoe UI;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -1%;
    vertical-align: middle;
    color: #0A142D;
}
.scs-link svg {
    width: 22px;
    height: 22px;
    flex: none;
    fill: #0079FF;
    transition: transform .3s ease;
}

    .scs-link:hover {
        text-decoration: none;
    }

        .scs-link:hover svg {
            transform: translateX(4px);
        }

/* ---------- rich text tu trinh soan thao ---------- */
.scs-rte p {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 22px;
    color: #0A142D;
    font-weight: 400;
    font-family: 'Segoe UI';
    padding-top: 0px;
    padding-bottom: 0px;
    letter-spacing: -0.01em;
}
    .scs-rte.font-xl-24 p{
        font-family: 'Segoe UI';
        font-weight: 400;
        font-size: 24px;
        leading-trim: NONE;
        line-height: 32px;
        letter-spacing: -0.01em;
    }

    .scs-rte p:last-child {
        margin-bottom: 0;
    }

.scs-rte ul {
    margin: 0 0 20px;
    padding-left: 0px;
    list-style: none;
}
.scs-rte.font-xl-24 li {
    font-size: 24px;
    line-height: 32px;
}
.scs-rte li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 22px;
    font-size: 16px;
    line-height: 22px;
    color: #0A142D;
    list-style: none;
    letter-spacing: -0.01em;
}
    .scs-rte li::before {
        content: "";
        position: absolute;
        left: 6px;
        top: 0.66em;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
    }
.scs-rte a {
    color: #0079FF;
    text-decoration: underline;
}

/* Doan mo dau cua Block 1 in to hon phan than. */
.scs-rte--story > p:first-of-type {
    margin-bottom: 28px;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.01em;
    color: #001C66;
    font-weight:400;
}

/* Toan bo cot trai cua Block 2 deu in to. */
.scs-rte--intro p {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.01em;
    color: #001C66;
    font-weight:400;
}

/* ---------- 1. HERO ---------- */
.scs-hero {
    padding: 80px 0 80px;
    background: #D7DDE8;
}

.scs-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 458fr) minmax(0, 554fr);
    gap: 128px;
    align-items: start;
}

.scs-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 36px;
    padding: 0;
    list-style: none;
}

.scs-crumbs li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    line-height: 1.4;
}

    /* Dau > giua cac muc — dung ky tu nen khong can anh. */
    .scs-crumbs li + li::before {
        content: "\203A";
        color: #001C66;
        opacity: .6;
    }

.scs-crumbs a {
    color: #001C66;
    text-decoration: none;
}

    .scs-crumbs a:hover {
        text-decoration: underline;
    }
.page h1.scs-hero__title {
    margin-top:24px;
}
.page h1.scs-hero__title {
    /*margin: 24px 0 0;*/
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: -0.02em;
    color: #001C66;
}

.page p.scs-hero__line {
    margin: 10px 0 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: -0.01em;
    color: #001C66;
}

.scs-hero__media {
    margin: 0;
}
.scs-hero__frame {
    display: block;
    position: relative;
    padding-top: 61.372%;
    overflow: hidden;
    border-radius: 12px;
    background: #E7EAF0;
}
.scs-hero + .scs-block {
    padding-top: 80px;
}
    .scs-hero__frame img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /*.scs-hero__media img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 12px;
    }*/

.scs-hero__media figcaption {
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.5;
    color: #0A142D;
    letter-spacing: -0.01em;
}

/* ---------- 2. PROJECT PERFORMANCE ---------- */
.scs-perf {
    padding: 80px 0 80px;
}

.page h2.scs-perf__title {
    margin: 0 0 32px;
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: -0.02em;
    color: #001C66;
}

.scs-perf__panel {
    background: rgba(103, 116, 71, 0.1);
    border-radius: 12px;
    padding: 16px 46px;
}

.scs-perf__row {
    display: grid;
    grid-template-columns: minmax(0, 32%) minmax(0, 1fr);
    gap: 40px;
    padding: 36px 0;
    border-bottom: 1px solid #D9D9D9;
}

    .scs-perf__row:last-child {
        border-bottom: 0;
    }

.scs-perf__label {
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -0.01em;
    color: #001C66;
}

/* ---------- 3. KHOI NOI DUNG ---------- */
.scs-block {
    padding: 0 0 80px;
}

.page h2.scs-block__heading {
    margin: 0 0 28px;
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: -0.02em;
    color: #001C66;
}
.scs-rte--story{
    padding-top:12px;
}
.scs-block__cols {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: 80px;
    align-items: start;
}
.scs-block + .scs-block > .scs-shell {
    border-top: 1px solid #C7CFDC;
    padding-top: 80px;
}
/* ---------- 4. BAI CUNG DANH MUC ---------- */
.scs-other {
    background: #F2F2F2;
    padding: 80px 0;
}

.scs-other__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 36px;
}

.page h2.scs-other__title {
    margin: 0;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #001C66;
}

.scs-other__head .scs-btn {
    margin-top: 0;
    flex: none;
    background: #fff;
}

.scs-other__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    align-items: stretch;
}

/* Chi con mot bai thi khong keo gian het chieu ngang. */
.scs-other__grid--one {
    grid-template-columns: minmax(0, calc(50% - 20px));
}

.scs-card {
    display: flex;
    flex-direction: column;
    background: #D7DDE8;
    border-radius: 12px;
    overflow: hidden;
    position: relative
}
.scs-card__title a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}
    .scs-card:hover{
        cursor:pointer;
    }
    .scs-card__media {
        display: block;
        position: relative;
        padding-top: 66.667%; /* ti le 2:1, chay duoc tren moi trinh duyet */
        background: #E7EAF0;
    }

    .scs-card__media img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.scs-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 28px;
}

.scs-card__title {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.48px;
    color: #001C66;
}
.page h3.scs-card__title {
    margin-top:-4px;
}
.scs-card__title a {
    color: #001C66;
    text-decoration: none;
    font-family: 'Segoe UI';
    font-weight: 400;
    font-size: 24px;
    leading-trim: NONE;
    line-height: 32px;
    letter-spacing: -2%;
}

        /*.scs-card__title a:hover {
            text-decoration: underline;
        }*/

.scs-card__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-size: 16px;
    line-height: 1.4;
    color: #001C66;
    text-decoration: none;
}
.page a.scs-card__more {
    color: #001C66;
}
    .scs-card__more svg {
        width: 22px;
        height: 22px;
        flex: none;
        fill: currentColor;
        transition: transform .3s ease;
    }

    .scs-card__more:hover svg {
        transform: translateX(4px);
    }

/* ---------- man hinh vua ---------- */
@media (max-width: 991px) {
    .scs-hero__grid,
    .scs-block__cols {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .scs-perf__panel {
        padding: 8px 28px;
    }

    .scs-perf__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 26px 0;
    }
}

/* ---------- dien thoai ---------- */
@media (max-width: 767px) {
    .scs-hero {
        padding: 24px 0 48px;
    }
    .scs-block + .scs-block > .scs-shell {
        padding-top: 48px;
    }
    .page h1.scs-hero__title {
        font-size: 28px;
        line-height:30px;
        font-weight:400;
        margin-top:24px;
    }
    .scs-hero__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
    .page p.scs-hero__line {
        font-size: 24px;
        padding-top:4px;
    }

    .page h2.scs-perf__title,
    .page h2.scs-block__heading,
    .page h2.scs-other__title {
        font-size: 20px;
        line-height:26px;
    }
    .scs-perf__label{
        font-size:18px;
        line-height:24px;
    }
    .scs-rte--story > p:first-of-type,
    .scs-rte--intro p {
        font-size: 18px;
        line-height: 24px;
    }
    .scs-rte p {
        font-size: 16px;
        line-height: 22px;
    }
    .scs-rte li {
        font-size: 16px;
        line-height: 22px;
    }

    .scs-perf,
    .scs-block {
        padding-bottom: 48px;
        /*padding-top: 48px;*/
    }

    .scs-other {
        padding: 48px 0;
    }

    .scs-other__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .scs-other__grid,
    .scs-other__grid--one {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}
/* ==========================================================================
   Trang danh sach
   ========================================================================== */
.scs-listing {
    padding: 48px 0 88px;
}

    .scs-listing.is-loading,
    #scs-root.is-loading {
        opacity: .5;
        pointer-events: none;
    }

/* ---------- thanh loc danh muc ---------- */
.scs-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 40px;
}

.scs-filters__label {
    font-size: 18px;
    font-weight: 600;
    color: #001C66;
}

.scs-filters__list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.scs-pill {
    padding: 14px 22px;
    border: 1px solid currentColor;
    border-radius: 54px;
    color: #001C66;
    cursor: pointer;
    transition: background-color .2s;
}

    .scs-pill a {
        font-size: 17px;
        font-weight: 600;
        line-height: 1.2;
        color: inherit;
        text-decoration: none;
    }

    .scs-pill:hover,
    .scs-pill.active {
        background: currentColor;
    }

        .scs-pill:hover a,
        .scs-pill.active a {
            color: #fff;
        }

    /* Nen lay mau danh muc, chu doi sang trang. */
    .scs-pill.active {
        background: currentColor;
    }

        .scs-pill.active a {
            color: #fff;
        }

/* ---------- luoi ba cot ---------- */
.scs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    align-items: stretch;
}

/* The trong luoi dung chung .scs-card voi khoi bai lien quan.
   .scs-card la flex doc, .scs-card__body co flex:1 va .scs-card__more co
   margin-top:auto — nen the trong cung hang tu dong bang chieu cao va dong
   "Continue reading" luon nam sat day. Khong can subgrid. */

.scs-empty {
    margin: 0;
    padding: 48px 0;
    font-size: 18px;
    color: #0A142D;
}

/* ---------- nut nap them ---------- */
.scs-loadmore-wrap {
    margin-top: 48px;
    text-align: center;
}

.scs-loadmore {
    padding: 14px 32px;
    border: 1px solid #001C66;
    border-radius: 54px;
    background: #001C66;
    color: #fff;
    font-size: 16px;
    line-height: 1.4;
    cursor: pointer;
    transition: opacity .2s;
}

    .scs-loadmore:hover {
        opacity: .9;
    }

    .scs-loadmore.is-loading {
        opacity: .6;
        pointer-events: none;
    }

@media (max-width: 991px) {
    .scs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

@media (max-width: 767px) {
    .scs-listing {
        padding: 32px 0 56px;
    }

    .scs-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .scs-filters {
        margin-bottom: 28px;
    }
    .scs-hero + .scs-block {
        padding-top: 48px;
    }
    .scs-rte.font-xl-24 p, .scs-rte.font-xl-24 li {
        font-size: 18px;
        line-height: 24px;
    }
}
/* ---------- tieu de trong o rich text ---------- */
/* Khong dat mau — de chung thua #001C66 tu .scs-detail, dong bo voi tieu de khoi.
   Tien to .page de thang cac quy tac .page h2, .page h3 trong st_style.css. */
.scs-rte h1,
.scs-rte h2,
.scs-rte h3,
.scs-rte h4,
.scs-rte h5,
.scs-rte h6 {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    color: #001C66;
}

/* Tieu de dau tien cua o khong day xuong, tranh khoang trong thua. */
.scs-rte > h1:first-child,
.scs-rte > h2:first-child,
.scs-rte > h3:first-child,
.scs-rte > h4:first-child,
.scs-rte > h5:first-child,
.scs-rte > h6:first-child {
    margin-top: 0;
}

.scs-rte h1 {
    margin: 48px 0 18px;
    font-size: 38px;
    font-weight: 400;
    line-height: 42px;
    letter-spacing: -0.02em;
}

.scs-rte h2 {
    margin: 40px 0 16px;
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: -0.02em;
}

.scs-rte h3 {
    margin: 32px 0 14px;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: -0.02em;
}

.scs-rte h4 {
    margin: 26px 0 10px;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.02em;
}

.scs-rte h5 {
    margin: 22px 0 10px;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: -0.01em;
}

.scs-rte h6 {
    margin: 20px 0 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.01em;
}
/* ---------- khoi trich dan trong o rich text ---------- */
.scs-rte blockquote {
    margin: 24px 0;
    padding: 0 0 0 24px;
    border-left: 4px solid #0079FF;
    /* Bo dinh dang mac dinh cua trinh duyet va cua st_style.css. */
    background: none;
    font-style: normal;
    quotes: none;
}

   .scs-rte blockquote p {
        margin: 0;
        /* Suy tu kich thuoc trong Figma: lop chu 418 x 130 chua 5 dong.
           Can khach xac nhan hai gia tri nay. */
        font-size: 18px;
        font-weight: 400;
        line-height: 26px;
        letter-spacing: 0;
        color: #001C66;
    }

       .scs-rte blockquote p + p {
            margin-top: 16px;
        }

    /* Dong ghi ten nguoi noi. */
     .scs-rte blockquote cite {
        display: block;
        margin-top: 16px;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        letter-spacing: -0.01em;
        color: #0A142D;
    }
@media (max-width: 767px) {


    .scs-rte blockquote p {
        font-size: 16px !important;
        line-height: 22px !important;
    }
}
/* ==========================================================================
   Ngat dong dep hon
   Trinh duyet cu bo qua hai thuoc tinh nay, chu khong loi — nen bat duoc ngay.
   Chrome va Edge tu ban 117, Safari va Firefox thi moi hon.
   ========================================================================== */

/* --- pretty: tinh lai cach ngat de dong cuoi khong con mot tu mo coi --- */

/* Chu thich duoi anh */
.scs-figure figcaption,
.scs-hero__media figcaption {
    text-wrap: pretty;
}

/* Noi dung tu trinh soan thao — doan van va gach dau dong */
.scs-rte p,
.scs-rte li {
    text-wrap: pretty;
}

/* Phu de duoi tieu de bai */
.page p.scs-hero__line {
    text-wrap: pretty;
}

/* --- balance: can deu do dai cac dong, phu hop van ban ngan --- */

.page h1.scs-hero__title,
.page h2.scs-block__heading,
.page h3.scs-card__title,
.page h2.scs-other__title,
.page h2.scs-perf__title {
    text-wrap: balance;
}