/* ==========================================================================
   AR2026 — TRANG CHU "Annual Report 2026"
   --------------------------------------------------------------------------
   ========================================================================== */
body, input, select, textarea {
    font-family: 'Segoe UI', 'Segoe UI Historic', Arial, sans-serif;
}
.ar2026-home {
    /* Token lay truc tiep tu pixel cua file Figma export */
    --ar26h-dark-blue: #0A142D; /* nen section toi, hero            */
    --ar26h-brambles-blue: #001C66; /* tieu de, card Effortless          */
    --ar26h-chep-blue: #0079FF; /* stat tile, card Illuminated       */
    --ar26h-twilight: #8F29FC; /* pill Financial, card Operational  */
    --ar26h-pine: #677447; /* pill Sustainability, card Regen   */
    --ar26h-rust: #AD5321; /* pill Operational, stat tile       */
    --ar26h-rust-pale: #F7D5C6; /* card nhat khoi Operational        */
    --ar26h-twilight-pale: #D3CAD9; /* card nhat khoi Financial          */
    --ar26h-accent-blue: #D7DDE8; /* nen section IVP / 2030 targets    */
    --ar26h-light-blue: #AFCAED; /* nen accordion CVP                 */
    --ar26h-stroke: #C7CFDC;
    --ar26h-white: #FFFFFF;
    font-family: 'Segoe UI', 'Segoe UI Historic', Arial, sans-serif;
}


/* ==========================================================================
   TIEN ICH DUNG CHUNG TRONG TRANG
   ========================================================================== */

.ar2026-home .ar26h-section {
    padding-block: 80px;
    background-color: var(--ar26h-white);
}
    .ar2026-home .ar26h-section-1 {
        background-color: var(--ar26h-white);
    }
    .ar2026-home .ar26h-section.is-dark {
        background-color: var(--ar26h-dark-blue);
        color: var(--ar26h-white);
    }

    .ar2026-home .ar26h-section.is-accent {
        background-color: var(--ar26h-accent-blue);
    }

/* Tieu de section */
.ar2026-home .ar26h-h2 {
    margin: 0 0 60px;
    font-size: 48px;
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: -0.96px;
    color: var(--ar26h-brambles-blue);
}
    .ar2026-home .ar26h-h2-1 {
        margin: 0 0 22px;
        font-size: 48px;
        line-height: 1.1;
        font-weight: 400;
        letter-spacing: -0.96px;
        color: var(--ar26h-brambles-blue);
    }
    .ar2026-home .ar26h-h2-2 {
        margin: 0 0 32px;
        font-size: 38px;
        line-height: 1.1;
        font-weight: 400;
        letter-spacing: -0.96px;
        color: var(--ar26h-brambles-blue);
    }
    .ar2026-home .ar26h-body.ar26h-body--dense p {
        line-height: 22px;
    }
    .ar2026-home .ar26h-body p.vla-p {
        font-weight: 400;
        font-size: 20px;
        color: var(--ar26h-dark-blue);
        line-height: 28px;
    }
    .ar2026-home .ar26h-h2-3 {
        margin: 0 0 32px;
        font-size: 48px;
        line-height: 1.1;
        font-weight: 400;
        letter-spacing: -0.96px;
        color: var(--ar26h-brambles-blue);
    }
    .ar2026-home .is-dark .ar26h-h2 {
        color: var(--ar26h-white);
    }

/* Bien the tieu de mau olive (dung o "Operating model") */
    .ar2026-home .ar26h-h2--pine {
        color: #9AAA6B !important;
        margin-bottom: 32px;
    }

/* Doan dan (lead) */
.ar2026-home .ar26h-lead {
    margin: 0 0 24px;
    font-size: 32px;
    line-height: 42px;   /* do duoc tren thiet ke: 41.5px */
    letter-spacing: -0.32px;
    color: var(--ar26h-brambles-blue);
}
    .ar2026-home .ar26h-lead-1 {
      
        font-size: 24px;
        line-height: 32px; /* do duoc tren thiet ke: 41.5px */
        letter-spacing: -0.32px;
        color: var(--ar26h-brambles-blue);
    }
    .ar2026-home .is-dark .ar26h-lead {
        color: var(--ar26h-white);
        padding-top: 0px;
        font-size: 24px;
        line-height: 32px;
    }

/* Body */
.ar2026-home .ar26h-body p {
    /*margin: 0 0 16px;*/
    font-size: 16px;
    line-height: 26px;   /* do duoc: 25.5-26.5px */
    letter-spacing: -0.16px;
    color: var(--ar26h-dark-blue);
}
    .ar2026-home .ar26h-body p.bo-wid-2 {
        font-size: 20px;
        line-height: 28px; /* do duoc: 25.5-26.5px */
        letter-spacing: -0.16px;
        color: var(--ar26h-brambles-blue);
        padding-top: 0px;
        padding-bottom: 0px;
    }
    .ar2026-home .ar26h-body p.lerr-p {
        font-size: 20px;
        line-height: 28px;
        letter-spacing: -0.16px;
        color: var(--ar26h-dark-blue);
        padding-top: 0px;
        padding-bottom: 0px;
    }
    .ar2026-home .is-dark .ar26h-body p,
    .ar2026-home .is-dark .ar26h-body li {
        color: var(--ar26h-white);
    }

.ar2026-home .ar26h-body p:last-child {
    margin-bottom: 0;
}

.ar2026-home .ar26h-body ul {
    margin: 0 0 16px;
    padding-left: 35px;
}

.ar2026-home .ar26h-body li {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.16px;
    color: var(--ar26h-dark-blue);
}
    /*.ar2026-home .ar26h-body li::marker {
        content: "";
        position: absolute;
        left: 0;
        top: 0.55em; /* canh giua dong dau 
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: currentColor; /* tu thanh trang tren section toi 
    }*/
/* Tieu de nho mau olive trong section toi */
.ar2026-home .ar26h-subhead {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: #9AAA6B;
}
    .ar2026-home .ar26h-subhead.font-24 {
        font-size: 24px;
        line-height: 32px;
    }
    .ar2026-home .ar26h-subhead--blue {
        color: var(--ar26h-brambles-blue);
    }

/* Footnote */
    .ar2026-home .ar26h-footnote.top-40 {
        margin-top: 40px !important;
    }
    .ar2026-home .ar26h-footnote {
        /*margin: 40px 0 0 !important;*/
        font-size: 12px !important;
        line-height: 16px !important;
        color: var(--ar26h-dark-blue);
        padding-left: 0.75em;
        text-indent: -0.75em;
        padding-top: 2px;
        padding-bottom: 2px;
    }
.ar2026-home .is-dark .ar26h-footnote {
    color: var(--ar26h-white);
}

/* Duong ke ngang */
.ar2026-home .ar26h-divider {
    height: 1px;
    margin: 49px 0;
    background-color: var(--ar26h-stroke);
    border: 0;
}
    .ar2026-home .ar26h-divider-1 {
        height: 1px;
        margin: 50px 0;
        background-color: var(--ar26h-stroke);
        border: 0;
    }
.ar2026-home .is-dark .ar26h-divider {
    background-color: rgba(255, 255, 255, 0.25);
}

/* Nut pill vien */
.ar2026-home .ar26h-btn {
    display: inline-block;
    padding: 16px 24px;
    border: 1px solid var(--ar26h-chep-blue);
    border-radius: 100px;
    font-size: 16px;
    line-height: 1.4;
    color: var(--ar26h-chep-blue);
    text-decoration: none;
    background: transparent;
    transition: background-color .2s, color .2s;
}

    .ar2026-home .ar26h-btn:hover,
    .ar2026-home .ar26h-btn:focus {
        background-color: var(--ar26h-chep-blue);
        color: var(--ar26h-white);
        text-decoration: none;
    }

.ar2026-home .ar26h-btn--light {
    border-color: var(--ar26h-white);
    color: var(--ar26h-white);
}

    .ar2026-home .ar26h-btn--light:hover,
    .ar2026-home .ar26h-btn--light:focus {
        background-color: var(--ar26h-white);
        color: var(--ar26h-dark-blue);
    }

.ar2026-home .ar26h-btn--solid {
    background-color: var(--ar26h-brambles-blue);
    border-color: var(--ar26h-brambles-blue);
    color: var(--ar26h-white);
}

    .ar2026-home .ar26h-btn--solid:hover,
    .ar2026-home .ar26h-btn--solid:focus {
        background-color: var(--ar26h-dark-blue);
        border-color: var(--ar26h-dark-blue);
        color: var(--ar26h-white);
    }

/* --------------------------------------------------------------------------
   Luoi 2 cot
   --------------------------------------------------------------------------
   So do lay bang cach do pixel tren file Figma export (container 1140px):

     --wide-gap : trai 445 | gap 140 | phai 555   (Intro, What Brambles does)
                  -> cot phai 555 khop dung 2 o stat 261.5 + gap 32
     --even     : trai 555 | gap  30 | phai 555   (Investor value proposition)

   Dung `Xfr` chu khong dung px co dinh de con co gian duoc khi container hep lai.
   -------------------------------------------------------------------------- */
.ar2026-home .ar26h-cols2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

.ar2026-home .ar26h-cols2--wide-gap {
    grid-template-columns: minmax(0, 458fr) minmax(0, 555fr);
    gap: 127px;
}

.ar2026-home .ar26h-cols2--even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}


/* ==========================================================================
   1. HERO
   --------------------------------------------------------------------------
   ASSET CAN: hinh 3D khoi xanh, dat ten hero-shapes.png (hoac .jpg)
   Figma: anh nam ben phai, nen navy phu kin, cao ~620px
   ========================================================================== */

/* Nen hero: mau nen + anh khoi 3D o ben phai.
   Anh cat tu file Figma export, mep trai da lam mo dan 120px de hoa vao mau nen
   -> khong lo duong cat du man hinh rong hep the nao.
   Anh nay CON dong vai tro anh du phong luc video chua tai xong / bi chan. */
.ar2026-home .ar26h-hero {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    background-color: #0E1732; /* do tu pixel nen hero trong Figma */
    background-image: url('../img/hero-shapes.png');
    background-repeat: no-repeat;
    background-position: right top;
    background-size: auto 100%;
    color: var(--ar26h-white);
    overflow: hidden;
}

/* .container phai noi len tren video */
.ar2026-home .ar26h-hero > .container {
    position: relative;
    z-index: 2;
}

.ar2026-home .ar26h-hero__inner {
    max-width: 560px;
}

/* --------------------------------------------------------------------------
   Video nen hero — port tu AR2025 (.video-top-two / .videobg)
   --------------------------------------------------------------------------
   Anh nen hero-shapes.png dong vai tro fallback, video phu len tren (z-index 1),
   chu + nut o z-index 2.

   Vimeo nhung dang background=1 nen khong co thanh dieu khien. Bo cuc long 5 lop
   la de video luon phu kin khung ma khong bi meo:
     __video          : lop phu tuyet doi, cat phan thua (overflow hidden)
     __width          : JS chinh be rong theo ty le khung / ty le video
     __aspect         : ep ty le 16:9 bang padding-bottom 56.25%
     __height         : cang day 4 canh
     __hide-controls  : day thanh dieu khien Vimeo ra ngoai vung nhin
   -------------------------------------------------------------------------- */
.ar2026-home .ar26h-hero__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.ar2026-home .ar26h-videobg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.ar2026-home .ar26h-videobg__width {
    position: absolute;
    width: 100%;
    height: 100%;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

.ar2026-home .ar26h-videobg__aspect {
    position: absolute;
    width: 100%;
    height: 0;
    top: -9999px;
    bottom: -9999px;
    margin: auto;
    padding-bottom: 56.25%; /* 16:9 */
    overflow: hidden;
}

.ar2026-home .ar26h-videobg__height {
    position: absolute;
    inset: 0;
}

.ar2026-home .ar26h-videobg__hide-controls {
    box-sizing: content-box;
    position: relative;
    width: 100%;
    height: 100%;
    /* thanh dieu khien Vimeo cao ~55px -> day ra ngoai */
    padding: 55px 97.7777px;
    top: -55px;
    left: -97.7777px;
}

.ar2026-home .ar26h-videobg iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0 none;
}

/* Ban mobile: chi hien duoi 500px */
.ar2026-home .ar26h-hero__video-mob {
    display: none;
}

    .ar2026-home .ar26h-hero__title, .page h1.ar2026-home .ar26h-hero__title {
        margin: 0 0 24px;
        font-size: 64px;
        line-height: 68px;
        font-weight: 400;
        letter-spacing: -0.04em;
        color: var(--ar26h-white);
    }


/* ==========================================================================
   2. INTRO — 2 cot chu
   ========================================================================== */

.ar2026-home .ar26h-intro__lead {
    margin: 0;
    font-size: 38px;
    line-height: 42px; /* do duoc tren thiet ke */
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--ar26h-brambles-blue);
}

    .ar2026-home .ar26h-intro__body p {
        /*margin: 0 0 22px;*/
        font-size: 24px;
        line-height: 32px; /* do duoc tren thiet ke */
        letter-spacing: -0.01em;
        color: var(--ar26h-brambles-blue);
        padding-top: 0px;
    }

.ar2026-home .ar26h-intro__body p:last-child {
    margin-bottom: 0;
}
        .ar2026-home .ar26h-intro__body p.last-child-p {
            margin:0px;
            padding-bottom:0px;
        }
/* ==========================================================================
   3. WHAT BRAMBLES DOES + 4 STAT TILE
   ========================================================================== */
    .ar2026-home .ar26h-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px; /* do duoc tren Figma: o 261.5px, khe 32px -> 555px */
        padding-top: 18px;
    }

/* Figma "Stat Box": Flow Vertical | Width Fill | Height Fixed 261.5px (vuong)
   | Justify space-between | Padding 20px.
   -> aspect-ratio 1/1 giu o luon vuong o moi be rong cot, khong dung
      min-height (min-height se lam o cao them khi chu dai). */
.ar2026-home .ar26h-stat {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 1 / 1;
    padding: 20px;
    color: var(--ar26h-white);
}

/* Icon la con dau tien cua flex -> nam tren; day sang phai theo thiet ke */
.ar2026-home .ar26h-stat__icon {
    align-self: flex-end;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
}

    .ar2026-home .ar26h-stat__icon img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

/* Khoi chu la con thu hai -> space-between day xuong day, 3 dong dinh nhau */
.ar2026-home .ar26h-stat__text {
    flex: 0 0 auto;
}

.ar2026-home .ar26h-stat__above {
    /*margin: 0 0 4px;*/
    font-size: 16px;
    line-height: 1.3;
    color:white;
    padding-top:0px;
    padding-bottom:0px;
    font-weight:400;

}

.ar2026-home .ar26h-stat__num {
    padding-top:8px;
    /*margin: 0 0 4px;*/
    font-size: 64px;
    line-height:50px;
    font-weight: 400;
    letter-spacing: -0.88px;
    color:white;
    padding-bottom:0px;
}
    .ar2026-home .ar26h-stat__num,
    .ar2026-home .ar26h-hlcard__num {
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum" 1;
    }
    .ar2026-home .ar26h-stat__label {
        margin: 0;
        padding-top:8px;
        padding-bottom:0px;
        font-size: 20px;
        line-height: 1.3;
        color: white;
        font-weight:400;
    }

.ar2026-home .ar26h-stat--pine { background-color: var(--ar26h-pine); }
.ar2026-home .ar26h-stat--chep { background-color: var(--ar26h-chep-blue); }
.ar2026-home .ar26h-stat--rust { background-color: var(--ar26h-rust); }
.ar2026-home .ar26h-stat--twilight { background-color: var(--ar26h-twilight); }


/* ==========================================================================
   4. FY26 HIGHLIGHTS
   --------------------------------------------------------------------------
   Pill trai dai dung bang so cot ma nhom the cua no chiem:
     Financial      -> 4 cot (full)
     Operational    -> 3 cot ben phai
     Sustainability -> 3 cot ben trai
   ========================================================================== */

.ar2026-home .ar26h-hl__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
}

/* --------------------------------------------------------------------------
   Nhom the trong FY26 Highlights
   --------------------------------------------------------------------------
   Moi nhom la 1 luoi con chiem tron chieu ngang, nen pill va the KHONG BAO GIO
   dung chung hang -> pill khong bi keo gian theo chieu cao the.

   Do thut le tinh theo luoi 4 cot, gap 30px:
       be rong 1 cot + 1 gap = 25% + 7.5px
   -> --right3 thut trai 1 cot (chiem cot 2-4)
   -> --left3  thut phai 1 cot (chiem cot 1-3)
   -------------------------------------------------------------------------- */
.ar2026-home .ar26h-hl__group {
    display: grid;
    gap: 30px;
}

.ar2026-home .ar26h-hl__group--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ar2026-home .ar26h-hl__group--right3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-left: calc(25% + 7.5px);
}

.ar2026-home .ar26h-hl__group--left3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-right: calc(25% + 7.5px);
}

/* Pill nhom — luon chiem hang rieng, khong gian cao */
.ar2026-home .ar26h-pill {
    align-self: start;
    margin: 0;
    padding: 12px 24px;
    border-radius: 130px;
    font-size: 30px;
    line-height: 40px;
    font-weight: 400;
    text-align: center;
    color: var(--ar26h-white);
}

.ar2026-home .ar26h-pill--financial { background-color: var(--ar26h-twilight); }

.ar2026-home .ar26h-pill--operational {
    background-color: var(--ar26h-rust);
    margin-left: calc(25% + 7.5px);
}

.ar2026-home .ar26h-pill--sustainability {
    background-color: var(--ar26h-pine);
    margin-right: calc(25% + 7.5px);
}

/* Khoang cach giua cac nhom */
.ar2026-home .ar26h-pill:not(:first-child) {
    margin-top: 30px;
}

/* The so lieu */
.ar2026-home .ar26h-hlcard {
    min-height: 260px;
    padding: 20px;
    color: var(--ar26h-dark-blue);
}

    .ar2026-home .ar26h-hlcard__num {
        /*margin: 0 0 8px;*/
        font-size: 38px;
        line-height: 42px;
        font-weight: 400;
        letter-spacing: -0.64px;
        color: var(--ar26h-dark-blue);
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .ar2026-home .ar26h-hlcard__label {
        padding-top: 12px;
        font-size: 20px;
        line-height: 1.4;
        font-weight: 600;
        padding-bottom: 0px;
        color: var(--ar26h-dark-blue);
    }

    .ar2026-home .ar26h-hlcard__note {
        margin: 0;
        font-size: 20px;
        line-height: 1.4;
        color: var(--ar26h-dark-blue);
        padding-bottom:0px;
        padding-top:6px;
        font-weight:400;
        line-height:28px;
    }

/* Bien the mau — xen ke theo Figma */
.ar2026-home .ar26h-hlcard--twilight { background-color: var(--ar26h-twilight); color: var(--ar26h-white); }
.ar2026-home .ar26h-hlcard--twilight-pale { background-color: var(--ar26h-twilight-pale); }
.ar2026-home .ar26h-hlcard--rust { background-color: var(--ar26h-rust); color: var(--ar26h-white); }
.ar2026-home .ar26h-hlcard--rust-pale { background-color: var(--ar26h-rust-pale); }
.ar2026-home .ar26h-hlcard--pine { background-color: var(--ar26h-pine); color: var(--ar26h-white); }
.ar2026-home .ar26h-hlcard--white { background-color: var(--ar26h-white); }

/* The logo ESG */
.ar2026-home .ar26h-esg {
    display: flex;
    flex-direction: column;
    min-height: 257px;
    padding: 20px;
    background-color: var(--ar26h-white);
}

.ar2026-home .ar26h-esg__logo {
    height: 72px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}

    .ar2026-home .ar26h-esg__logo img {
        max-width: 100%;
        max-height: 72px;
        width: auto;
        height: auto;
        object-fit: contain;
    }

.ar2026-home .ar26h-esg__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--ar26h-dark-blue);
}


/* ==========================================================================
   5. LETTER FROM THE CHAIR & CEO
   --------------------------------------------------------------------------
   ASSET CAN: 2 anh chan dung, crop tron. chair.jpg / ceo.jpg
   ========================================================================== */

.ar2026-home .ar26h-letter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 33px;
    align-items: center;
}

.ar2026-home .ar26h-letter__portraits {
    display: flex;
    justify-content: center;
}

.ar2026-home .ar26h-portrait {
    width: 296px;  /* dung bang kich thuoc Figma xuat ra (svg viewBox 296x296) */
    height: 296px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
}

    /* Mau nen da nung san trong anh JPG.
       Khai bao them o day de neu anh chua ve kip thi o tron van dung mau, khong trang loa. */
    .ar2026-home .ar26h-portrait--chair { background-color: #F7D5C6; }
    .ar2026-home .ar26h-portrait--ceo   { background-color: #D7DDE8; }

    .ar2026-home .ar26h-portrait + .ar26h-portrait {
        margin-left: -20px; /* 2 vong tron chong nhe len nhau nhu Figma; vong sau nam tren */
    }

    .ar2026-home .ar26h-portrait img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


/* ==========================================================================
   6. OPERATING MODEL
   --------------------------------------------------------------------------
   ASSET CAN: share-and-reuse.svg (so do Producer/Grower/Manufacturer/Retailer)
   ========================================================================== */

.ar2026-home .ar26h-om__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

.ar2026-home .ar26h-om__diagram {
    display: grid;
    grid-template-columns: minmax(0, 350px) minmax(0, 1fr);
    gap: 60px;
    align-items: start;
}

    .ar2026-home .ar26h-om__diagram img {
        display: block;
        width: 100%;
        height: auto;
    }

/* --------------------------------------------------------------------------
   So do "Share and reuse: how it works" — tuong tac hover
   --------------------------------------------------------------------------
   SVG phai NHUNG THANG vao HTML (khong dung <img>) thi CSS/JS moi voi toi
   duoc tung path ben trong.

   Nguon: SVG cua AR2025.cshtml, da bo 3 nhan chu "Containers" /
   "Pallets & RPCs" / "Pallets" ma thiet ke 2026 khong con.
   Class da doi tien to sang ar26h- de khong trung ten voi AR2025
   (tranh JS global cua trang kia bat nham).

   Co che: re chuot vao 1 dong chu thich -> JS gan data-dim cho cac path
   KHONG thuoc luong do.
     - path thuong        -> mo con 30%
     - mui ten (mod-arrow) -> giu nguyen do dam nhung doi sang mau toi,
                             chim vao nen navy
   -------------------------------------------------------------------------- */
.ar2026-home .ar26h-om__svg svg {
    display: block;
    width: 100%;
    height: auto;
}

.ar2026-home .ar26h-om__svg .ar26h-mod {
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}

.ar2026-home .ar26h-om__svg .ar26h-mod[data-dim] {
    opacity: 0.3;
}

/* Mui ten: khong lam mo ma doi sang mau toi tuong ung tung luong */
.ar2026-home .ar26h-om__svg .ar26h-mod.ar26h-mod-arrow[data-dim] {
    opacity: 1;
    stroke: #07326C !important;
}

    .ar2026-home .ar26h-om__svg .ar26h-mod.ar26h-mod-arrow[data-dim][fill] {
        fill: #07326C !important;
    }

.ar2026-home .ar26h-om__svg .ar26h-mod.ar26h-mod-arrow.ar26h-mod--2[data-dim] {
    stroke: #433360 !important;
}

    .ar2026-home .ar26h-om__svg .ar26h-mod.ar26h-mod-arrow.ar26h-mod--2[data-dim][fill] {
        fill: #433360 !important;
    }

.ar2026-home .ar26h-om__svg .ar26h-mod.ar26h-mod-arrow.ar26h-mod--3[data-dim] {
    stroke: #354140 !important;
}

    .ar2026-home .ar26h-om__svg .ar26h-mod.ar26h-mod-arrow.ar26h-mod--3[data-dim][fill] {
        fill: #354140 !important;
    }

/* Dong chu thich la nut kich hoat */
.ar2026-home .ar26h-arrowlegend__item[data-mod] {
    cursor: default;
}

/* 3 chu thich mui ten duoi so do */
.ar2026-home .ar26h-arrowlegend {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin-top: 32px;
}

    .ar2026-home .ar26h-arrowlegend__item p {
        /*margin: 12px 0 0;*/
        font-size: 16px;
        line-height: 22px;
        color: var(--ar26h-white);
        padding-top: 16px;
    }

    .ar2026-home .ar26h-arrowlegend__bar {
        /*display: block;
    width: 44px;
    height: 3px;
    position: relative;*/
        display: block;
        width: 46px;
        height: 35px;
        background-repeat: no-repeat;
        background-position: left center;
        background-size: contain;
    }
    .ar2026-home .ar26h-arrowlegend__item--blue .ar26h-arrowlegend__bar {
        background-image: url('/Content/brambles-sustainability-2026/img/arrow-legend-blue.svg');
    }

    .ar2026-home .ar26h-arrowlegend__item--pink .ar26h-arrowlegend__bar {
        background-image: url('/Content/brambles-sustainability-2026/img/arrow-legend-pink.svg');
    }

    .ar2026-home .ar26h-arrowlegend__item--pine .ar26h-arrowlegend__bar {
        background-image: url('/Content/brambles-sustainability-2026/img/arrow-legend-pine.svg');
    }
    /*.ar2026-home .ar26h-arrowlegend__bar:after {
        content: "";
        position: absolute;
        right: -1px;
        top: -4px;
        border-left: 10px solid currentColor;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
    }

    .ar2026-home .ar26h-arrowlegend__bar {
        background-color: currentColor;
    }*/

.ar2026-home .ar26h-arrowlegend__item--blue { color: var(--ar26h-chep-blue); }
.ar2026-home .ar26h-arrowlegend__item--pink { color: #E27FE0; }
.ar2026-home .ar26h-arrowlegend__item--pine { color: #9AAA6B; }


/* ==========================================================================
   7. CUSTOMER VALUE PROPOSITION — 8 accordion
   ========================================================================== */

.ar2026-home .ar26h-acc {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 48px;
    /* BAT BUOC: grid mac dinh la align-items:stretch -> mo accordion ben nay
       se keo cao ca hang, o ben kia gian theo thanh mang xam rong.
       start = moi o tu co cao theo noi dung cua chinh no. */
    align-items: start;
}

.ar2026-home .ar26h-acc__item {
    background-color: #DCE4F0;
    border-radius: 4px;
    overflow: hidden;
}

    .ar2026-home .ar26h-acc__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        width: 100%;
        padding: 28px;
        border: 0;
        background: transparent;
        text-align: left;
        cursor: pointer;
        font-size: 20px;
        line-height: 28px;
        font-weight: 600;
        color: var(--ar26h-chep-blue);
        font-family: 'Segoe UI';
    }
    .ar2026-home .ar26h-acc__item.is-open .ar26h-acc__head {
        padding-bottom: 6px;
    }
/* Chevron dung chung cho ca 2 loai accordion — xem muc CHEVRON o duoi */
.ar2026-home .ar26h-acc__chevron {
    flex: 0 0 20px;
    width: 24px;
    height: 24px;
}

/* --------------------------------------------------------------------------
   Hieu ung dong/mo muot
   --------------------------------------------------------------------------
   Khong dung display:none (khong animate duoc) va cung khong dung max-height
   voi mot con so doan bua (thoi gian chay se sai khi noi dung ngan/dai khac nhau).

   Cach dung o day: JS do offsetHeight cua lop trong roi gan height cho lop ngoai,
   transition height 0 <-> chieu cao that. Mo xong JS set height:auto de trang
   van co gian dung khi doi kich thuoc cua so.

   DA THU va BO: ky thuat grid-template-rows 0fr -> 1fr. Nhin thi gon hon nhung
   transition khong chay toi dich - do bang Chrome headless thay rows ket o 16px
   (dung bang padding cua lop trong) trong khi noi dung cao 537px -> noi dung bi cat.
   -------------------------------------------------------------------------- */
.ar2026-home .ar26h-acc__body {
    height: 0;
    overflow: hidden;
    -webkit-transition: height .3s ease;
    transition: height .3s ease;
}

    /* Padding nam o lop trong, khong o lop ngoai — de luc dong lai
       khong con vet padding thua lam ho ra mot duong xam. */
    .ar2026-home .ar26h-acc__body-inner > *:first-child {
        margin-top: 0;
    }

.ar2026-home .ar26h-acc__body p {
    margin: 0 24px 0px;
    font-size: 18px;
    line-height: 1.4;
    color: var(--ar26h-brambles-blue);
}

    .ar2026-home .ar26h-acc__body p:last-child {
        margin-bottom: 24px;
        padding-bottom:0px;
        padding-top:0px;
    }


/* ==========================================================================
   8. ZERO WASTE WORLD
   --------------------------------------------------------------------------
   ASSET CAN: zww-photo.jpg, zww-logo.svg,
              icon-eliminating-waste.svg, icon-empty-transport-miles.svg,
              icon-reducing-inefficiencies.svg
   ========================================================================== */

.ar2026-home .ar26h-zww {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

    .ar2026-home .ar26h-zww__media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-bottom-left-radius: 12px;
        border-top-left-radius: 12px;
    }

    .ar2026-home .ar26h-zww__panel {
        padding: 40px;
        background-color: var(--ar26h-dark-blue);
        color: var(--ar26h-white);
        border-bottom-right-radius: 12px;
        border-top-right-radius: 12px;
    }

.ar2026-home .ar26h-zww__logo {
    margin-bottom: 18px;
}

    .ar2026-home .ar26h-zww__logo img {
        display: block;
        max-width: 240px;
        height: auto;
    }

.ar2026-home .ar26h-zww__panel p {
    /*margin: 0 0 16px;*/
    font-size: 16px;
    line-height: 1.4;
    color: var(--ar26h-white);
}
    .ar2026-home .ar26h-zww__panel p.bol-b-www {
        font-weight:600;
        padding-top:2px;
    }
    .ar2026-home .ar26h-zww__list {
        margin-top: 18px;
    }

.ar2026-home .ar26h-zww__item {
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
}
    .ar2026-home .ar26h-zww__item:last-child{
        margin-bottom:0px;
    }
        .ar2026-home .ar26h-zww__item:last-child p.ww-a-e {
            padding-bottom:0px;
        }
        .ar2026-home .ar26h-zww__icon {
            flex: 0 0 40px;
            width: 40px;
            height: 41px;
        }

    .ar2026-home .ar26h-zww__icon img {
        display: block;
        width: 40px;
        height: 41px;
    }

.ar2026-home .ar26h-zww__item h4 {
    margin: 0 0 6px;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 400;
    color: #9AAA6B;
}

.ar2026-home .ar26h-zww__item p {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
}
    .ar2026-home .ar26h-zww__item p.ww-a-e {
        font-family: Segoe UI;
        font-weight: 400;
        font-size: 16px;
        line-height: 140%;
        letter-spacing: -1%;
    }
    /* ==========================================================================
   9. THE VALUE BRAMBLES CREATES
   --------------------------------------------------------------------------
   ASSET CAN: circular-share-reuse-model.svg
   ========================================================================== */
    .ar2026-home .ar26h-value {
        display: grid;
        /*grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 60px;
        align-items: center;*/
        grid-template-columns: minmax(0, 555fr) minmax(0, 457fr);
        gap: 128px;
        align-items: center;
    }

    .ar2026-home .ar26h-value__diagram img {
        display: block;
        width: 100%;
        max-width: 460px;
        height: auto;
        margin-left: auto;
    }


/* ==========================================================================
   10. INVESTOR VALUE PROPOSITION
   --------------------------------------------------------------------------
   ASSET CAN: shareholder-value-creation.svg (so do luong)
   ========================================================================== */

.ar2026-home .ar26h-ivp__diagram {
    margin-top: 54px;
}

    .ar2026-home .ar26h-ivp__diagram img {
        display: block;
        width: 100%;
        height: auto;
    }


/* ==========================================================================
   11. BRAMBLES OF THE FUTURE
   --------------------------------------------------------------------------
   Dung lai SVG cua trang rieng: brambles-future-circle-diagram.svg + 4 icon.
   Khac trang rieng o cho co them accordion "Delivered in FY26".
   ========================================================================== */

.ar2026-home .ar26h-future__intro {
    display: grid;
    grid-template-columns: minmax(0, 555fr) minmax(0, 468fr);
    gap: 117px;
    align-items: center;
}

    .ar2026-home .ar26h-future__diagram img {
        display: block;
        width: 100%;
        height: auto;
    }

.ar2026-home .ar26h-future__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    margin-top: 64px;
    /* Nhu tren: accordion "Delivered in FY26" cung nam trong the nay,
       khong co align-items:start thi mo 1 the se keo gian the ben canh. */
    align-items: start;
}

.ar2026-home .ar26h-fcard__head {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    border-radius: 8px;
}

.ar2026-home .ar26h-fcard__icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
}

    .ar2026-home .ar26h-fcard__icon img {
        display: block;
        width: 32px;
        height: 32px;
    }

.ar2026-home .ar26h-fcard__title {
    margin: 0 0 4px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    letter-spacing: -0.36px;
    color: var(--ar26h-white);
}

.ar2026-home .ar26h-fcard__subtitle {
    margin: 0;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.16px;
    color: var(--ar26h-white);
}

.ar2026-home .ar26h-fcard__body {
    padding: 20px;
}

    .ar2026-home .ar26h-fcard__body p {
        /*margin: 0 0 16px;*/
        font-size: 16px;
        line-height: 22px;
        letter-spacing: -0.16px;
        color: var(--ar26h-dark-blue);
    }
        .ar2026-home .ar26h-fcard__body p{
            padding-top:0px;
        }
        .ar2026-home .ar26h-fcard__body p:last-child {
            margin-bottom: 0;
            padding-bottom:0px;
        }

.ar2026-home .ar26h-fcard--brambles-blue .ar26h-fcard__head { background-color: var(--ar26h-brambles-blue); }
.ar2026-home .ar26h-fcard--chep-blue .ar26h-fcard__head { background-color: var(--ar26h-chep-blue); }
.ar2026-home .ar26h-fcard--twilight .ar26h-fcard__head { background-color: var(--ar26h-twilight); }
.ar2026-home .ar26h-fcard--pine .ar26h-fcard__head { background-color: var(--ar26h-pine); }

/* Accordion "Delivered in FY26" duoi moi card */
    .ar2026-home .ar26h-delivered {
        border-top: 1px solid var(--ar26h-stroke);
        margin: 0 20px;
        border-bottom: 1px solid var(--ar26h-stroke);
    }

    .ar2026-home .ar26h-delivered__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 20px;
        border: 0;
        background: transparent;
        cursor: pointer;
        font-size: 16px;
        font-weight: 600;
        color: var(--ar26h-brambles-blue);
        text-align: left;
        font-family: 'Segoe UI';
        line-height:22px;
    }

.ar2026-home .ar26h-delivered__chevron {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}

/* --------------------------------------------------------------------------
   CHEVRON — dung chung cho ca 12 accordion
   --------------------------------------------------------------------------
   Nguon: img/chevron-down.svg, nhung thang vao day duoi dang data URI.

   VI SAO KHONG tro toi file .svg ngoai:
   CSS mask tro toi file SVG ngoai BI CHAN khi mo trang bang file:// (Chrome
   coi moi file local la mot origin rieng) -> chevron mat tieu trong preview.
   Data URI khong dinh rang buoc origin nen chay ca file:// lan http.

   LUU Y KHI SUA: SVG phai dung nhay DON ben trong, URL boc bang nhay KEP.
   Neu de nhay kep ben trong thi chuoi CSS bi dut giua chung -> mask hong.
   Cac ky tu < > # phai encode thanh %3C %3E %23.

   Mask chi dung kenh alpha nen fill='black' trong SVG khong anh huong mau.
   Mau that lay tu background-color: currentColor -> tu khop mau chu cua nut:
       Delivered in FY26          -> Brambles Blue #001C66
       Customer value proposition -> CHEP Blue     #0079FF
   Mo ra thi xoay 180deg.
   -------------------------------------------------------------------------- */
.ar2026-home .ar26h-acc__chevron,
.ar2026-home .ar26h-delivered__chevron {
    display: block;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='black' d='M5.21967 8.21967C5.51256 7.92678 5.98744 7.92678 6.28033 8.21967L10 11.9393L13.7197 8.21967C14.0126 7.92678 14.4874 7.92678 14.7803 8.21967C15.0732 8.51256 15.0732 8.98744 14.7803 9.28033L10.5303 13.5303C10.3897 13.671 10.1989 13.75 10 13.75C9.80109 13.75 9.61032 13.671 9.46967 13.5303L5.21967 9.28033C4.92678 8.98744 4.92678 8.51256 5.21967 8.21967Z'/%3E%3C/svg%3E") no-repeat center center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='black' d='M5.21967 8.21967C5.51256 7.92678 5.98744 7.92678 6.28033 8.21967L10 11.9393L13.7197 8.21967C14.0126 7.92678 14.4874 7.92678 14.7803 8.21967C15.0732 8.51256 15.0732 8.98744 14.7803 9.28033L10.5303 13.5303C10.3897 13.671 10.1989 13.75 10 13.75C9.80109 13.75 9.61032 13.671 9.46967 13.5303L5.21967 9.28033C4.92678 8.98744 4.92678 8.51256 5.21967 8.21967Z'/%3E%3C/svg%3E") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transform: rotate(0deg);
    transition: transform .3s ease;
}

.ar2026-home .ar26h-acc__item.is-open .ar26h-acc__chevron,
.ar2026-home .ar26h-delivered.is-open .ar26h-delivered__chevron {
    transform: rotate(180deg);
}

/* Dong/mo muot — cung ky thuat grid-template-rows nhu accordion CVP o tren */
.ar2026-home .ar26h-delivered__body {
    height: 0;
    overflow: hidden;
    -webkit-transition: height .3s ease;
    transition: height .3s ease;
}

.ar2026-home .ar26h-delivered__body-inner {
    padding-bottom: 16px;
}

/* Danh sach gach dau dong trong "Delivered in FY26" */
/*.ar2026-home .ar26h-delivered__body ul {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
}

.ar2026-home .ar26h-delivered__body li {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.16px;
    color: var(--ar26h-dark-blue);
}

    .ar2026-home .ar26h-delivered__body li:last-child {
        margin-bottom: 0;
    }*/
    .ar2026-home .ar26h-delivered__body ul {
        margin: 0;
        padding-left: 0;
        list-style: none;
    }

    .ar2026-home .ar26h-delivered__body li {
        position: relative;
        padding-left: 46px;
        margin-bottom: 10px;
        font-size: 16px;
        line-height: 1.4;
        letter-spacing: -0.16px;
        color: var(--ar26h-dark-blue);
    }

        .ar2026-home .ar26h-delivered__body li::before {
            content: "";
            position: absolute;
            left: 30px;
            top: 0.55em; /* canh giua dong dau */
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: currentColor;
        }

        .ar2026-home .ar26h-delivered__body li:last-child {
            margin-bottom: 0;
        }

       
      
            /* Danh sach long nhau (co o the "Operational excellence") */
            .ar2026-home .ar26h-delivered__body li > ul {
        margin-top: 10px;
        padding-left: 18px;
    }

/* Tieu de phu trong accordion, vi du "Serialisation+" */
.ar2026-home .ar26h-delivered__subhead {
    margin: 16px 0 10px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ar26h-brambles-blue);
}


/* ==========================================================================
   12. BRAMBLES' 2030 SUSTAINABILITY TARGETS
   --------------------------------------------------------------------------
   ASSET CAN: sustainability-2030-venn.svg (hoac .png neu co gradient)
   ========================================================================== */

.ar2026-home .ar26h-targets {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 33px;
    align-items: center;
}
    .ar2026-home .ar26h-body p.ww-20230 {
        font-size:20px;
        line-height:28px;
        font-weight:400;
    }
    .ar2026-home .ar26h-targets__diagram img {
        display: block;
        width: 100%;
        max-width: 520px;
        height: auto;
    }

.ar2026-home .ar26h-targets__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
}


/* ==========================================================================
   13. CTA CUOI TRANG
   --------------------------------------------------------------------------
   ASSET CAN: cta-shapes.png (hinh 3D khoi xanh, ban khac hero)
   ========================================================================== */

/* Anh nen: dung file GOC khach gui (3508x2480, khong co chu), da resize ve
   1400px cho web. Ban cat tu file export cu da bo — xem img/_source/.
   Desktop va mobile dung CHUNG anh nay, chi khac cach dat khung:
     desktop : auto 100% + right center  -> hien phan khoi 3D ben phai
     mobile  : cover + right bottom      -> phong to, lay qua cau + tam giac
                                            dung nhu ban thiet ke mobile */
    .ar2026-home .ar26h-cta {
        /*position: relative;
    min-height: 434px;  
    display: flex;
    align-items: center;
    background-color: var(--ar26h-dark-blue);
    background-image: url('../img/cta-shapes.jpg');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;
    color: var(--ar26h-white);
    overflow: hidden;*/
        position: relative;
        min-height: 435px; /* Figma: Height Fixed 435px */
        display: flex;
        align-items: center;
        background-color: var(--ar26h-dark-blue);
        background-image: url('../img/cta-shapes.jpg?v=2');
        background-repeat: no-repeat;
        background-position: right center;
        background-size: auto 100%;
        color: var(--ar26h-white);
        overflow: hidden;
    }

.ar2026-home .ar26h-cta__title {
    margin: 0 0 32px;
    font-size: 48px;
    line-height: 1.15;
    font-weight: 400;
    letter-spacing: -0.88px;
    color: var(--ar26h-white);
}


/* ==========================================================================
   RESPONSIVE
   --------------------------------------------------------------------------
   Breakpoint theo Bootstrap 3 cua site:
     <=1199  .container = 970px
     <=991   .container = 750px
     <=767   container long, khung Figma mobile 390px
   ========================================================================== */

@media (max-width: 1199px) {
    .ar2026-home .ar26h-cols2--wide-gap { gap: 60px; }
    .ar2026-home .ar26h-future__intro { gap: 50px; }
    .ar2026-home .ar26h-om__diagram { gap: 40px; }
    .ar2026-home .ar26h-value,
    .ar2026-home .ar26h-targets { gap: 40px; }
    .ar2026-home .ar26h-hero { min-height: 520px; }
    .ar2026-home .ar26h-hero__title { font-size: 52px; }
}

@media (max-width: 991px) {
    .ar2026-home .ar26h-section { padding-block: 60px; }

    .ar2026-home .ar26h-cols2,
    .ar2026-home .ar26h-cols2--wide-gap,
    .ar2026-home .ar26h-letter,
    .ar2026-home .ar26h-value,
    .ar2026-home .ar26h-targets,
    .ar2026-home .ar26h-zww,
    .ar2026-home .ar26h-om__diagram,
    .ar2026-home .ar26h-future__intro {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .ar2026-home .ar26h-om__cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }

    /* Bo do thut le, moi nhom ve 2 cot */
    .ar2026-home .ar26h-pill--operational,
    .ar2026-home .ar26h-pill--sustainability,
    .ar2026-home .ar26h-hl__group--right3,
    .ar2026-home .ar26h-hl__group--left3 {
        margin-left: 0;
        margin-right: 0;
    }

    .ar2026-home .ar26h-hl__group--4,
    .ar2026-home .ar26h-hl__group--right3,
    .ar2026-home .ar26h-hl__group--left3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ar2026-home .ar26h-value__diagram img { margin-left: 0; }

    /* Hero mobile/tablet: anh khoi 3D phu kin khung, chu + nut CAN GIUA
       (do tren ban thiet ke mobile 390px: tieu de va nut deu can giua,
        nut rong 367/390 tuc gan het chieu ngang). */
    .ar2026-home .ar26h-hero {
        min-height: 610px;
        background-position: center top;
        background-size: cover;
        text-align: center;
    }

    .ar2026-home .ar26h-hero__inner {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .ar2026-home .ar26h-hero .ar26h-btn {
        display: block;
        width: 100%;
        max-width: 370px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}

/* Video hero: duoi 500px doi sang ban dung (giong AR2025) */
@media (max-width: 500px) {
    .ar2026-home .ar26h-videobg {
        display: none;
    }

    .ar2026-home .ar26h-hero__video-mob {
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        min-height: 158%;
        transform: translateY(-50%);
        border: 0 none;
    }
}

@media (max-width: 767px) {
    .ar2026-home .ar26h-stat__label{
        font-size:16px;
        line-height:20px;
    }
    .ar2026-home .ar26h-section {
        padding-block: 40px;
    }
    .ar2026-home .ar26h-h2 { font-size: 36px;line-height:38px }
    .ar2026-home .ar26h-h2 {
        margin-bottom: 40px;
    }
    .ar2026-home .ar26h-hero__title { font-size: 44px;line-height:46px }
    .ar2026-home .ar26h-cta__title { font-size: 30px; }
    .ar2026-home .ar26h-intro__lead {
        font-size: 28px;
        line-height: 30px;
    }
    .ar2026-home .ar26h-stat__icon{
        width:40px;
        height:40px;
    }
    .ar2026-home .ar26h-stat__above{
        font-size:14px;
        line-height:18px;
    }
    .ar2026-home .ar26h-stat__num{
        font-size:36px;
        line-height:38px;
    }
    .ar2026-home .ar26h-stat__num {
        margin-bottom: 8px;
    }
    .ar2026-home .ar26h-stat {
        aspect-ratio: auto;
        min-height: 164px;
    }
    .ar2026-home .ar26h-subhead {
        font-size: 14px;
        margin-bottom: 2px;
    }
    .ar2026-home .ar26h-cols2, .ar2026-home .ar26h-cols2--wide-gap {
        gap: 10px;
    }
    .ar2026-home .ar26h-divider {
        margin: 39px 0;
    }
    .ar2026-home .ar26h-intro__body p {
        font-size: 20px;
        line-height: 24px;
    }

   
    .ar2026-home .ar26h-lead {
        font-size: 18px;
        line-height: 24px;
    }

    .ar2026-home .ar26h-body p,
    .ar2026-home .ar26h-body li {
        font-size: 16px !important;
        line-height: 140% !important;
    }

    .ar2026-home .ar26h-fcard__subtitle {
        font-size: 14px;
        line-height: 20px;
    }

    .ar2026-home .ar26h-fcard__body p {
        font-size: 14px;
        line-height: 20px;
    }

    
    .ar2026-home .ar26h-cta {
        min-height: 440px;
        background-image: url('../img/cta-shapes-mobile.jpg');
        background-size: cover;
        background-position: right bottom;
    }

    
    .ar2026-home .ar26h-body--dense p,
    .ar2026-home .ar26h-body--dense li {
        font-size: 14px;
        line-height: 18px;
    }

        .ar2026-home .ar26h-body--dense p { margin-bottom: 8px; }

    /* Ban thiet ke mobile GIU 2 COT cho o so lieu — khong ep ve 1 cot */
    .ar2026-home .ar26h-stats,
    .ar2026-home .ar26h-hl__group--4,
    .ar2026-home .ar26h-hl__group--right3,
    .ar2026-home .ar26h-hl__group--left3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    /* Cac khoi nhieu chu thi moi xuong 1 cot */
    .ar2026-home .ar26h-acc,
    .ar2026-home .ar26h-future__cards,
    .ar2026-home .ar26h-arrowlegend {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

   
    .ar2026-home .ar26h-hlcard {
        min-height: 0;
        padding: 12px;
    }

    .ar2026-home .ar26h-hlcard__num   { font-size: 28px; }
    .ar2026-home .ar26h-hlcard__num {
        line-height: 1.1;
        /*margin-bottom: 8px;*/
    }
    .ar2026-home .ar26h-hlcard__label { font-size: 16px; }
    
    .ar2026-home .ar26h-hlcard__note  { font-size: 16px; }
    .ar2026-home .ar26h-hlcard__note {
        line-height: 1.4;
    }
    .ar2026-home .ar26h-pill:not(:first-child){
        margin-top:0px;
    }
    .ar2026-home .ar26h-hl__group--4 > :nth-child(1) {
        order: 1;
    }
    .ar2026-home .ar26h-hl__group--4 > :nth-child(2) { order: 2; }
    .ar2026-home .ar26h-hl__group--4 > :nth-child(3) { order: 4; }
    .ar2026-home .ar26h-hl__group--4 > :nth-child(4) { order: 3; }
    .ar2026-home .ar26h-hl__group--4 > :nth-child(5) { order: 6; }
    .ar2026-home .ar26h-hl__group--4 > :nth-child(6) { order: 5; }
    .ar2026-home .ar26h-hl__group--4 > :nth-child(7) { order: 7; }
    .ar2026-home .ar26h-hl__group--4 > :nth-child(8) { order: 8; }

   
    .ar2026-home .ar26h-esg {
        min-height: 0;
        padding: 16px;
    }

    .ar2026-home .ar26h-hl__group--left3 { align-items: start; }

    .ar2026-home .ar26h-esg__logo {
        height: 56px;
        margin-bottom: 12px;
    }

        .ar2026-home .ar26h-esg__logo img { max-height: 56px; }

    .ar2026-home .ar26h-esg__text { font-size: 14px; }

  
    .ar2026-home .ar26h-letter__portraits { order: 1; }
    .ar2026-home .ar26h-letter > :not(.ar26h-letter__portraits) { order: 2; }

   
    .ar2026-home .ar26h-portrait {
        width: calc(50% + 4px);
        max-width: 172px;
        height: auto;
        aspect-ratio: 1 / 1;
    }

        .ar2026-home .ar26h-portrait + .ar26h-portrait { margin-left: -8px; }

    .ar2026-home .ar26h-zww__panel {
        padding: 28px 20px;
        border-top-right-radius: 0px;
        border-bottom-left-radius:12px;
    }
    .ar2026-home .ar26h-pill {
        line-height: 26px;
        font-size: 20px;
    }
    .ar2026-home .ar26h-hl__grid{
        gap:40px;
    }
    .ar2026-home .ar26h-hero .ar26h-btn {
        padding: 16px 32px;
    }
    .ar2026-home .ar26h-h2-2{
        font-size:28px;
        line-height:30px;
    }
    .ar2026-home .ar26h-body p.lerr-p{
        font-size:16px;
        line-height:20px;
    }
    .ar2026-home .is-dark .ar26h-lead{
        font-size:20px;
        line-height:24px;
    }
    .ar2026-home .ar26h-h2-1{
        font-size:36px;
        line-height:38px;
    }
    .ar2026-home .ar26h-lead-1{
        font-size:20px;
        line-height:24px;
    }
    .ar2026-home .ar26h-body p.bo-wid-2 {
        font-size: 16px;
        line-height: 20px;
    }
    .ar2026-home .ar26h-acc__head{
        padding:20px;
        font-size:16px;
        line-height:20px;
    }
    .ar2026-home .ar26h-acc__body p {
        margin: 0 20px 0px;
        font-size: 16px;
    }
    .ar2026-home .ar26h-zww__media img {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        border-bottom-left-radius: 0px;
    }
    .ar2026-home .ar26h-zww{
        gap:0px;
    }
    .ar2026-home .ar26h-zww__panel p{
        font-size:14px;
        line-height:18px;
    }
    .ar2026-home h3.ar26h-zww__title {
        font-size: 14px !important;
        line-height: 18px !important;
    }
    .ar2026-home .ar26h-divider-1 {
        margin: 40px 0;
    }
    .ar2026-home .ar26h-future__cards {
        margin-top:40px;
    }
    .ar2026-home .ar26h-delivered__head{
        font-size:14px;
        line-height:18px;
    }
    .ar2026-home .ar26h-delivered__body li {
        font-size: 14px;
        line-height: 18px;
    }
    .ar2026-home .ar26h-cta {
        align-items: flex-start;
        padding-top: 63px;
        display: block;
    }
    .ar2026-home .ar26h-cta__title {
        font-size: 36px;
        line-height: 38px;
        max-width: 280px;
    }
}

.ar2026-home h2.ar26h-intro__lead,
.ar2026-home h3.ar26h-subhead,
.ar2026-home h3.ar26h-pill,
.ar2026-home h3.ar26h-zww__title {
    font-family: inherit;
}

.ar2026-home h2.ar26h-intro__lead {
    font-weight: 400;
}

.ar2026-home h3.ar26h-pill {
    font-weight: 400;
}

.ar2026-home h3.ar26h-zww__title {
    margin: 0 0 0px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    color: #9AAA6B;
}
.ar2026-home .ar26h-hlcard__num.cl-white, .ar2026-home .ar26h-hlcard__label.cl-white,
.ar2026-home .ar26h-hlcard__note.cl-white {
    color: white;
}
.page p.red-le-28 {
    margin-top:28px;
}
@supports (grid-template-rows: subgrid) {
    .ar2026-home .ar26h-future__cards {
        align-items: stretch;
    }

    .ar2026-home .ar26h-fcard {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        row-gap: 0; /* khong keo gap 30px cua luoi cha vao trong the */
    }
        /* Accordion dong van giu chieu cao that, neu khong duong ke duoi
       se tut xuong day dong khi the ben canh dang mo. */
        .ar2026-home .ar26h-fcard > .ar26h-delivered {
            align-self: start;
        }
}