/* ================================
----------------ESG PAGE-----------
=================================== */

/* _________________ESG Scene (hero → about)
   .esg-scene  = ตัวกำหนดระยะ scroll (ScrollTrigger trigger)
   .esg-stage  = ตัวที่ถูก pin ค้างไว้ 1 หน้าจอ บรรจุทั้ง hero และ about
   ระหว่าง scroll กล่องวิดีโอจะย่อจากเต็มจอ ไปลงล็อกที่ .esg-about-media
   ควบคุมด้วย js/esg-scroll.js */

.esg-scene {
    position: relative;
    background-color: var(--theme-color-light);
}

.esg-stage {
    position: relative;
    display: flex;
    align-items: center;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background-color: var(--theme-color2-grey);
}

/* _________________ESG Hero SECTION */

/* กล่องวิดีโอที่ย่อได้ — GSAP เขียน top/left/width/height/border-radius ลงตัวนี้ */
.esg-hero-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    overflow: hidden;
    border-radius: 0;
    will-change: width, height, top, left, border-radius;
}

.esg-hero-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.esg-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
}

.esg-hero-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 24px;
    /* เป็นแผ่นคลุมเต็มเวที ถ้าไม่ปิด pointer-events จะไปบัง
       ลิงก์ดาวน์โหลดใน .esg-about ทั้งหมด (ข้างในมีแค่ h1/p ไม่มีอะไรให้คลิก) */
    pointer-events: none;
}

h1.h1-text.esg-hero-title {
    font-size: 64px;
    line-height: 1.3;
    color: var(--theme-color-light);
    font-weight: 700 !important;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    margin-bottom: 24px;
}

p.esg-hero-sub {
    max-width: 900px;
    margin: 0 auto;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.6);
}

/* _________________ESG Hero Animation

   animation ตอนเข้าหน้าย้ายไปอยู่ที่ js/esg-scroll.js แล้ว (เล่นกับ <span> ชั้นใน)
   เดิมใช้ CSS keyframes + animation-fill-mode: forwards ซึ่ง "ชนะ" inline style
   ของ GSAP ทำให้ตอน reload ค้างกลางทาง h1/sub โผล่ขึ้นมาทั้งที่ควรจางไปแล้ว
   transform ใช้กับ inline element ไม่ได้ จึงต้องบังคับ display */

.esg-hero-title span,
.esg-hero-sub span {
    display: block;
}

/* _________________ESG Hero Responsive */

@media (max-width: 1620px) {
    h1.h1-text.esg-hero-title {
        font-size: 42px;
    }
}

@media (max-width: 1199px) {
    h1.h1-text.esg-hero-title {
        font-size: 38px;
    }

    p.esg-hero-sub {
        font-size: 17px;
    }
}

/* ปิด scroll animation แล้วคลายเวทีเป็น flow ปกติ
   = วิดีโอ hero ด้านบน แล้วต่อด้วยเนื้อหา
   เงื่อนไขต้องตรงกับ matchMedia ใน js/esg-scroll.js (คอมมา = หรือ)
   - ≤1199px : คอลัมน์ขวาเป็น col-lg-12 ตกลงมาเป็นแถวใหม่ section สูงเกิน 1 จอ
   - ≤599px สูง : คอลัมน์ขวาสูงคงที่ ~523px จอเตี้ยกว่านี้เนื้อหาโดนตัด */
@media (max-width: 1199px),
(max-height: 599px) {
    .esg-stage {
        display: block;
        height: auto;
        overflow: visible;
    }

    /* header-top ยังแสดงอยู่ที่ breakpoint นี้ (สูง 40px) */
    .esg-hero-media {
        position: relative;
        width: 100%;
        height: calc(100vh - 40px);
        height: calc(100svh - 40px);
        border-radius: 0 !important;
    }

    .esg-hero-content {
        bottom: auto;
        height: calc(100vh - 40px);
        height: calc(100svh - 40px);
    }
}

@media (max-width: 991px) {

    /* header-top ถูกซ่อนที่ breakpoint นี้: viewport - offset 80px */
    .esg-hero-media,
    .esg-hero-content {
        height: calc(100vh - 80px);
        height: calc(100svh - 80px);
    }

    h1.h1-text.esg-hero-title {
        font-size: 34px;
    }

    p.esg-hero-sub {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    h1.h1-text.esg-hero-title {
        font-size: 28px;
        margin-bottom: 18px;
    }

    p.esg-hero-sub {
        font-size: 15px;
        line-height: 1.7;
    }
}

@media (max-width: 575px) {
    h1.h1-text.esg-hero-title {
        font-size: 24px;
    }

    p.esg-hero-sub {
        font-size: 14px;
    }
}


/* _________________ESG About SECTION */

/* section นี้อยู่ใน .esg-stage ที่ถูก pin ไว้ จึงต้องสูงไม่เกิน 1 หน้าจอ
   -> ไม่ใส่ padding แนวตั้ง (ตัวเวทีจัดกึ่งกลางให้อยู่แล้ว) */
.esg-about {
    position: relative;
    width: 100%;
    padding: 0;
    background-color: transparent;
}

.esg-about .container-fluid {
    padding: 0 120px;
}

.esg-about-row {
    align-items: stretch;
}

/* Left column ------------------------------------------ */

.esg-about-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding-right: 20px;
}

.esg-about-tag {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--theme-color1);
}

.esg-about-tag .bracket {
    color: var(--theme-color1-secondary);
}

h2.esg-about-title {
    /* ตรงกับ .sec-title h2 ของโปรเจค */
    font-size: 28px;
    line-height: var(--line-height-140);
    font-weight: 600;
    color: var(--theme-color3);
    margin: 0;
}

.esg-about-note {
    position: relative;
    margin: 60px 0 0;
    padding-top: 20px;
    font-size: 14px;
    line-height: var(--line-height-140);
    font-weight: 600;
    color: var(--theme-color3);
    border-top: 1px solid #E4E4E4;
}

.esg-about-note span {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-color);
}

/* Image column ----------------------------------------- */

/* เป็นแค่ช่องว่างจองตำแหน่งให้ .esg-hero-media ย่อลงมาทับ ไม่มีเนื้อหาข้างใน
   จอที่ไม่เล่น animation จะซ่อน .esg-about-media-col ทั้งคอลัมน์ */
.esg-about-media {
    position: relative;
    height: 62vh;
    min-height: 0;
    overflow: hidden;
    border-radius: 3px;
}

/* Right column ----------------------------------------- */

.esg-about-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding-left: 20px;
}

p.esg-about-text {
    /* ตรงกับ .sec-title .text ของโปรเจค */
    font-size: 14px;
    line-height: var(--line-height-140);
    color: var(--text-color);
    margin: 0 0 40px;
}

.esg-about-policy-title {
    position: relative;
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--theme-color1);
}

/* Policy download list --------------------------------- */

.esg-about-policy-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #E4E4E4;
    color: var(--theme-color3);
    transition: all 0.3s ease;
}

.esg-about-policy-item .num {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    color: #aaaaaa;
    transition: color 0.3s ease;
}

.esg-about-policy-item .label {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 600;
    line-height: var(--line-height-140);
}

.esg-about-policy-item .icon {
    flex: 0 0 auto;
    font-size: 20px;
    color: var(--theme-color1-secondary);
    transition: transform 0.3s ease, color 0.3s ease;
}

.esg-about-policy-item:hover {
    color: var(--theme-color1-secondary);
    padding-left: 8px;
}

.esg-about-policy-item:hover .num {
    color: var(--theme-color1);
}

.esg-about-policy-item:hover .icon {
    color: var(--theme-color1);
    transform: translateY(3px);
}

/* Responsive ------------------------------------------- */

/* กรณี "ไม่ถูก pin" — เงื่อนไขเดียวกับ matchMedia ใน js/esg-scroll.js
   วิดีโอไปทำหน้าที่ hero ด้านบนแล้ว ช่องกลางจึงไม่มีอะไรจะมาลง ซ่อนทั้งคอลัมน์ */
@media (max-width: 1199px),
(max-height: 599px) {
    .esg-about {
        padding: 5rem 0;
    }

    .esg-about-media-col {
        display: none;
    }
}

/* จอกว้างแต่เตี้ย (>=1200 x <600) : คอลัมน์ยังเรียงกัน 3 ช่องอยู่
   พอซ่อนช่องกลางไป จะเหลือรูโหว่ 4/12 ต้องขยายสองคอลัมน์ที่เหลือให้เต็มแถว */
@media (min-width: 1200px) and (max-height: 599px) {
    .esg-about-row>.col-xl-3 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }

    .esg-about-row>.col-xl-5 {
        flex: 0 0 66.6667%;
        max-width: 66.6667%;
    }
}

/* กรณี "จอแคบ" อย่างเดียว — คอลัมน์เริ่มเรียงซ้อนกัน */
@media (max-width: 1199px) {
    .esg-about .container-fluid {
        padding: 0 30px;
    }

    .esg-about-left {
        padding-right: 0;
    }

    .esg-about-right {
        padding-left: 0;
        margin-top: 40px;
    }

    .esg-about-note {
        margin-top: 32px;
    }

    p.esg-about-text {
        margin: 0;
    }
}

@media (max-width: 991px) {
    .esg-about {
        padding: 4rem 0;
    }

    .esg-about-left {
        display: block;
    }
}

@media (max-width: 767px) {
    .esg-about .container-fluid {
        padding: 0 15px;
    }

    h2.esg-about-title {
        font-size: 24px;
    }

    p.esg-about-text {
        margin-bottom: 32px;
    }
}

@media (max-width: 575px) {
    h2.esg-about-title {
        font-size: 20px;
    }

    .esg-about-policy-item {
        gap: 12px;
        padding: 15px 0;
    }
}

/* _________________Fallback : GSAP โหลดไม่สำเร็จ
   js/esg-scroll.js จะติดคลาสนี้ให้ที่ <html>
   ต้องคลายเวทีเป็น flow ปกติ ไม่งั้นวิดีโอทับเนื้อหา about ไว้ทั้งหมด */

.esg-no-gsap .esg-stage {
    display: block;
    height: auto;
    overflow: visible;
}

.esg-no-gsap .esg-hero-media {
    position: relative;
    width: 100%;
    height: calc(100vh - 40px);
    height: calc(100svh - 40px);
    border-radius: 0;
}

.esg-no-gsap .esg-hero-content {
    bottom: auto;
    height: calc(100vh - 40px);
    height: calc(100svh - 40px);
}

.esg-no-gsap .esg-about {
    padding: 5rem 0;
}

.esg-no-gsap .esg-about-media-col {
    display: none;
}


/* _________________ESG Dimension SECTION (ใช้ร่วม 3 มิติ)
   โครงสร้างและสไตล์ชุดนี้ออกแบบให้ใช้ซ้ำได้ทั้ง 3 มิติ
   เปลี่ยนสีประจำมิติที่ตัว section ผ่าน --esg-accent :
     .esg-dim-env    = มิติสิ่งแวดล้อม        (เขียว)
     .esg-dim-social = มิติสังคม              (ฟ้า)
     .esg-dim-gov    = มิติบรรษัทภิบาลฯ       (น้ำเงิน) */

.esg-dimension {
    position: relative;
    /* padding: var(--container-pt) 0 var(--container-pb); */
    background-color: var(--theme-color-light);
}

.esg-dim-env {
    --esg-accent: var(--theme-color1);
}

.esg-dim-social {
    --esg-accent: var(--theme-color1-secondary);
}

.esg-dim-gov {
    --esg-accent: var(--theme-color2);
}

/* Head : จัดกึ่งกลาง ------------------------------------ */

.esg-dim-head {
    max-width: 900px;
    margin: 0 auto 24px;
}

.esg-dim-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--esg-accent);
}

.esg-dim-tag .material-symbols-rounded {
    font-size: 18px;
    letter-spacing: normal;
}

h2.esg-dim-title {
    /* ตรงกับ .sec-title h2 ของโปรเจค */
    font-size: var(--h2-font-size);
    line-height: var(--line-height-140);
    font-weight: 600;
    color: var(--theme-color3);
    margin: 0 0 16px;
}

h3.esg-dim-sub-title {
    font-size: var(--h4-font-size);
    line-height: var(--line-height-140);
    font-weight: 600;
    color: var(--theme-color3);
    margin: 0 0 24px;
}

p.esg-dim-text {
    /* ตรงกับ .sec-title .text ของโปรเจค */
    font-size: 14px;
    line-height: var(--line-height-140);
    color: var(--text-color);
    margin: 0;
}

/* Advantages : การ์ด / ภาพ / การ์ด ---------------------- */

.esg-dim-adv {
    align-items: stretch;
    row-gap: 24px;
}

.esg-dim-adv-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 380px;
    padding: 30px 24px;
    text-align: center;
    border-radius: 3px;
    background-color: var(--theme-color2-grey);
    transition: all 0.3s ease;
}

.esg-dim-adv-card .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
    border-radius: 50%;
    font-size: 32px;
    color: var(--theme-color-light);
    background-color: var(--esg-accent);
}

.esg-dim-adv-card .value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--theme-color3);
}

.esg-dim-adv-card .label {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: var(--line-height-140);
    color: var(--theme-color3);
}

.esg-dim-adv-card .desc {
    margin: 16px 0 0;
    padding-top: 16px;
    font-size: 14px;
    line-height: var(--line-height-140);
    color: var(--text-color);
    border-top: 1px solid #E4E4E4;
}

.esg-dim-adv-media {
    position: relative;
    height: 100%;
    max-height: 380px;
    overflow: hidden;
    border-radius: 3px;
}

.esg-dim-adv-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pill tags -------------------------------------------- */

/* อยู่ใต้ head : จำกัดความกว้างเท่ากับ head ให้ป้ายห่อบรรทัดสมดุลกัน */
.esg-dim-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 12px;
    margin: 0 auto 50px;
}

/* ไอคอนใน pill ให้เป็นแบบ outline (FILL=0) สวนทางกับทั้งหน้าที่เปลี่ยนไปใช้
   ฟอนต์ instance แบบ fill (FILL=1) แล้วใน <head>
   ทำ font-variation-settings ไม่ได้เหมือนเดิม เพราะฟอนต์ที่โหลดมาเป็น
   static instance ตายตัว จึงต้องประกาศ @font-face คนละตัวชี้ไปที่ไฟล์ฟอนต์
   FILL=0 ของ Google โดยตรง (URL นี้ได้จาก query
   css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,250,0,0
   ซึ่งเป็น URL เดียวกับที่ทั้งหน้าเคยใช้ก่อนเปลี่ยนเป็น fill)
   แล้วสั่งให้เฉพาะไอคอนใน .esg-dim-pill ใช้ฟอนต์ตัวนี้แทน */
@font-face {
    font-family: 'Material Symbols Rounded Outline';
    font-style: normal;
    font-weight: 250;
    src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v365/syl7-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDB_Qb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCPqw.woff2) format('woff2');
}

.esg-dim-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px dashed #E4E4E4;
    font-size: 14px;
    font-weight: 600;
    line-height: var(--line-height-140);
    color: var(--theme-color3);
    transition: all 0.3s ease;
}

.esg-dim-pill .material-symbols-rounded {
    font-family: 'Material Symbols Rounded Outline';
    font-size: 24px;
    color: var(--esg-accent);
}

.esg-dim-pill:hover {
    border-color: var(--esg-accent);
}

/* Note ------------------------------------------------- */

.esg-dim-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    padding-top: 24px;
    font-size: 14px;
    line-height: var(--line-height-140);
    text-align: center;
    color: var(--text-color);
    border-top: 1px solid #E4E4E4;
}

.esg-dim-note .material-symbols-rounded {
    flex: 0 0 auto;
    font-size: 20px;
    color: var(--esg-accent);
}

/* Policy : กรอบนโยบายและแนวปฏิบัติ ----------------------
   หัวข้อบนซ้าย + accordion ไล่ลงล่าง / ภาพคอลัมน์ขวา
   accordion ทำด้วย radio + :checked ไม่ต้องใช้ JS */

/* การ์ดเป็นสีขาวเหมือนของมิติสังคม แต่ section มิติสิ่งแวดล้อมพื้นขาว
   ถ้าไม่มีแผงรองการ์ดจะจมหายไปกับพื้น จึงครอบแผงพื้นเทาให้เหมือน
   ที่มิติสังคมเป็นพื้นเทาทั้ง section */
.esg-dim-policy {
    margin-top: 60px;
}

/* แผงพื้นเทารองบล็อกการ์ด : ใช้ร่วมกันทั้งมิติสิ่งแวดล้อมและมิติสังคม
   (section ทั้งสองเป็นพื้นขาว ถ้าไม่มีแผงรอง การ์ดสีขาวจะจมหายไปกับพื้น)
   เวอร์ชัน accordion ที่สำรองไว้ใน esg-demo.html ไม่ได้ใส่คลาสนี้
   จึงยังแสดงผลบนพื้นขาวเหมือนเดิม */
.esg-dim-panel {
    margin-top: 24px;
    padding: 50px 40px;
    border-radius: 3px;
    background-color: var(--theme-color2-grey);
}

/* หัวข้อของบล็อก : ตรงกับ .esg-social-grid-head แต่ไม่ต้องมี margin-top
   เพราะอยู่ในแผงที่มี padding อยู่แล้ว */
.esg-policy-grid-head {
    margin-bottom: 30px;
}

.esg-policy-grid-head .esg-dim-sub-title {
    max-width: 640px;
    margin-bottom: 0;
}

/* คอลัมน์ขวาของการ์ดนโยบายเป็นย่อหน้าเดียว (ของมิติสังคมเป็น checklist)
   คุมขนาด/สีให้ตรงกับ .esg-social-list li */
.esg-policy-card-body p {
    margin: 0;
    font-size: 14px;
    line-height: var(--line-height-140);
    color: var(--text-color);
}

@media (max-width: 991px) {
    .esg-dim-panel {
        padding: 40px 30px;
    }
}

@media (max-width: 767px) {
    .esg-dim-panel {
        padding: 30px 20px;
    }
}

.esg-policy-row {
    align-items: stretch;
}

/* หัวข้อชิดบน accordion ไหลลงล่างสุด ตาม reference */
.esg-policy-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding-right: 40px;
}

.esg-policy-head {
    margin-bottom: 40px;
}

.esg-policy-head .esg-dim-sub-title {
    max-width: 440px;
    margin-bottom: 0;
}

/* Accordion -------------------------------------------- */

/* หัวข้อบรรทัดเดียว แล้วคำอธิบายกางออกด้านล่างหัวข้อ */
.esg-policy-item {
    display: flex;
    flex-direction: column;
    padding: 14px 0;
    border-top: 1px solid #E4E4E4;
}

.esg-policy-item:first-child {
    border-top: none;
    padding-top: 0;
}

/* radio ต้องเป็นพี่น้องของ .esg-policy-desc (CSS เลือกย้อนขึ้นไม่ได้)
   ซ่อนแบบยุบเป็นศูนย์และคงอยู่ใน flow ไม่ใช้ position:absolute
   เพราะถ้าหลุด flow ตำแหน่งโฟกัสจะเพี้ยน แล้วเบราว์เซอร์เลื่อนหน้าตอนคลิก */
.esg-policy-input {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
}

.esg-policy-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    cursor: pointer;
    font-size: 14px;
    line-height: var(--line-height-140);
    font-weight: 500;
    color: var(--text-color);
    transition: color 0.3s ease;
}

/* ตรึงความกว้างเลขไว้ เพื่อให้คำอธิบายด้านล่างเยื้องตรงกับหัวข้อได้แน่นอน
   (ค่าเยื้อง = ความกว้างเลข 24px + gap 10px = 34px) */
.esg-policy-label .num {
    flex: 0 0 24px;
    font-size: 13px;
    font-weight: 600;
    color: #aaaaaa;
    transition: color 0.3s ease;
}

.esg-policy-label .title {
    flex: 1 1 auto;
}

.esg-policy-label:hover {
    color: var(--theme-color3);
}

/* คำอธิบาย : ยุบเก็บไว้ก่อน กางออกใต้หัวข้อเมื่อข้อนั้นถูกเลือก */
.esg-policy-desc {
    max-height: 0;
    padding-left: 34px;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}

.esg-policy-desc p {
    margin: 0;
    font-size: 14px;
    line-height: var(--line-height-140);
    color: var(--text-color);
}

/* max-height ต้องเป็นค่าคงที่ถึงจะ transition ได้ ตั้งไว้ 200px
   (คำอธิบายที่ยาวสุดวัดได้ 137px ที่ 1199px ซึ่งเป็นช่องแคบสุด)
   ถ้าตั้งสูงเกินจริงมาก ตอนยุบกลับจะค้างก่อนหุบ */
.esg-policy-input:checked~.esg-policy-desc {
    max-height: 200px;
    padding-top: 8px;
    opacity: 1;
}

.esg-policy-input:checked+.esg-policy-label {
    font-weight: 600;
    color: var(--theme-color3);
}

.esg-policy-input:checked+.esg-policy-label .num {
    color: var(--esg-accent);
}

/* กรอบโฟกัสตอน tab มาถึง (radio ถูกซ่อน จึงย้ายมาแสดงที่ label) */
.esg-policy-input:focus-visible+.esg-policy-label {
    outline: 2px solid var(--esg-accent);
    outline-offset: 4px;
}

/* Image column ----------------------------------------- */

.esg-policy-media {
    height: 100%;
    min-height: 480px;
    overflow: hidden;
    border-radius: 3px;
}

.esg-policy-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive ------------------------------------------- */

@media (max-width: 1199px) {
    .esg-dim-pills {
        margin-bottom: 40px;
    }

    .esg-dim-adv-card,
    .esg-dim-adv-media {
        min-height: 340px;
    }

    .esg-policy-left {
        padding-right: 24px;
    }

    .esg-policy-head {
        margin-bottom: 40px;
    }
}

@media (max-width: 991px) {
    /* .esg-dimension {
        padding: 4rem 0;
    } */

    /* ≤991px ภาพ (คอลัมน์กลาง) กว้างเต็มแถว ดันขึ้นไปไว้บนสุด
       แล้วให้การ์ด 2 ใบเรียงคู่กันด้านล่าง */
    .esg-dim-adv>div:nth-child(2) {
        order: -1;
    }

    .esg-dim-adv-media {
        min-height: 320px;
    }

    .esg-dim-adv-card {
        min-height: 0;
        padding: 30px 20px;
    }

    .esg-dim-policy {
        margin-top: 50px;
    }

    /* ≤991px คอลัมน์ตกลงมาซ้อนกัน : ภาพขึ้นไปอยู่บน accordion */
    .esg-policy-row>div:last-child {
        order: -1;
        margin-bottom: 32px;
    }

    .esg-policy-left {
        padding-right: 0;
    }

    .esg-policy-head {
        margin-bottom: 30px;
    }

    .esg-policy-media {
        min-height: 320px;
    }
}

@media (max-width: 767px) {
    h2.esg-dim-title {
        font-size: 24px;
    }

    .esg-dim-adv-media {
        min-height: 260px;
    }

    .esg-dim-pills {
        gap: 8px 10px;
        margin-bottom: 32px;
    }

    .esg-dim-pill {
        padding: 8px 14px;
    }

    .esg-policy-media {
        min-height: 260px;
    }
}

@media (max-width: 575px) {
    h2.esg-dim-title {
        font-size: 20px;
    }

    /* ป้ายยาวขึ้นบรรทัดใหม่แล้วดูขาด จัดชิดซ้ายอ่านง่ายกว่า */
    .esg-dim-note {
        align-items: flex-start;
        text-align: left;
    }
}


/* _________________ESG Dimension : Social

   ต่อจากมิติสิ่งแวดล้อม ใช้คลาสร่วมชุด .esg-dim-* เดิมสำหรับส่วนหัว
   (.esg-dim-head / .esg-dim-tag / .esg-dim-title / .esg-dim-text)
   สีประจำมิติมาจาก --esg-accent ที่ .esg-dim-social ประกาศไว้แล้ว (ฟ้า)
   ส่วนที่เพิ่มใหม่คือการ์ด 4 ด้าน + checklist แนวปฏิบัติ */

/* Card grid -------------------------------------------- */

.esg-social-grid,
.esg-policy-grid {
    align-items: stretch;
    row-gap: 24px;
}

/* การ์ดกว้างเต็มแถว (col-12) จึงแบ่งข้างใน 2 ฝั่ง
   ซ้าย = ไอคอน + เลข + หัวข้อ + คำอธิบายนำ / ขวา = checklist แนวปฏิบัติ
   ถ้าเรียงลงล่างทั้งหมดบรรทัดจะยาวเกิน 1100px อ่านยาก */
.esg-social-card,
.esg-policy-card {
    display: flex;
    align-items: stretch;
    height: 100%;
    padding: 36px 40px;
    border-radius: 3px;
    border-top: 2px solid transparent;
    background-color: var(--theme-color-light);
    transition: all 0.3s ease;
}

/* .esg-social-card:hover,
.esg-policy-card:hover {
    border-top-color: var(--esg-accent);
    box-shadow: 0px 5px 37px 0px rgba(84, 84, 84, 0.1);
} */

.esg-social-card-main,
.esg-policy-card-main {
    flex: 0 0 34%;
    padding-right: 40px;
}

/* เส้นคั่นแนวตั้ง ใช้ภาษาเส้น hairline เดียวกับที่ใช้ทั้งหน้า */
.esg-social-card-body,
.esg-policy-card-body {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 40px;
    border-left: 1px solid #E4E4E4;
}

.esg-social-card-head,
.esg-policy-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.esg-social-card-head .icon,
.esg-policy-card-head .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 24px;
    color: var(--theme-color-light);
    background-color: var(--esg-accent);
}

.esg-social-card-head .num,
.esg-policy-card-head .num {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--theme-color1-grey);
}

h3.esg-social-card-title,
h3.esg-policy-card-title {
    font-size: var(--h3-font-size);
    line-height: var(--line-height-140);
    font-weight: 600;
    color: var(--theme-color3);
    margin: 0 0 12px;
}

.esg-social-card-lead {
    margin: 0;
    font-size: 14px;
    line-height: var(--line-height-140);
    color: var(--text-color);
}

/* Checklist -------------------------------------------- */

/* ไม่ต้องมีเส้นบนแล้ว เพราะมีเส้นคั่นแนวตั้งของ .esg-social-card-body ทำหน้าที่นี้ */
.esg-social-list-title {
    display: block;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--esg-accent);
}

/* คอลัมน์ขวากว้าง ~700px แบ่งเป็น 2 คอลัมน์ให้บรรทัดสั้นลง
   ใช้ grid + row-gap แทน padding ที่ li เพื่อไม่ต้องยกเว้นตัวแรก/ตัวท้าย
   ซึ่งพอเป็น 2 คอลัมน์แล้วตัวแรก/ตัวท้ายไม่ตรงกับหัวแถวท้ายแถวอีก */
.esg-social-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.esg-social-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: var(--line-height-140);
    color: var(--text-color);
}

.esg-social-list li .material-symbols-rounded {
    flex: 0 0 auto;
    /* ดันลงให้ตรงกลางบรรทัดแรกของข้อความ */
    margin-top: 2px;
    font-size: 14px;
    color: var(--esg-accent);
    border: 1px var(--esg-accent) solid;
    border-radius: 999px;
}

/* Responsive ------------------------------------------- */

@media (max-width: 1199px) {
    .esg-social-card,
    .esg-policy-card {
        padding: 32px;
    }

    .esg-social-card-main {
        flex-basis: 38%;
        padding-right: 32px;
    }

    .esg-social-card-body {
        padding-left: 32px;
    }

    .esg-social-list {
        column-gap: 24px;
    }
}

/* ≤991px ช่องแคบเกินจะแบ่งซ้ายขวา จึงเรียงลงล่าง
   แล้วสลับเส้นคั่นแนวตั้งเป็นเส้นคั่นแนวนอน */
@media (max-width: 991px) {
    .esg-social-card,
    .esg-policy-card {
        flex-direction: column;
        padding: 28px;
    }

    .esg-social-card-main {
        flex-basis: auto;
        padding-right: 0;
        margin-bottom: 24px;
    }

    .esg-social-card-body {
        padding-left: 0;
        padding-top: 24px;
        border-left: 0;
        border-top: 1px solid #E4E4E4;
    }
}

@media (max-width: 767px) {
    h3.esg-social-card-title,
    h3.esg-policy-card-title {
        font-size: 16px;
    }

    .esg-social-card,
    .esg-policy-card {
        padding: 24px 20px;
    }

    .esg-social-card-head .icon,
    .esg-policy-card-head .icon {
        width: 42px;
        height: 42px;
        font-size: 22px;
    }

    .esg-social-card-head .num,
    .esg-policy-card-head .num {
        font-size: 20px;
    }

    /* บรรทัดสั้นเกินถ้าแบ่ง 2 คอลัมน์ */
    .esg-social-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Social : ปรับคลาสร่วมให้เข้ากับพื้นเทาของ section นี้ -----
   (เขียนแยกไว้ท้ายไฟล์ ไม่แก้ rule เดิมที่มิติสิ่งแวดล้อมใช้อยู่) */

/* หัวข้อของบล็อกการ์ด 4 ด้าน : ตรงกับ .esg-policy-grid-head
   ไม่ต้องมี margin-top เพราะอยู่ใน .esg-dim-panel ที่มี padding อยู่แล้ว */
.esg-social-grid-head {
    margin-bottom: 30px;
}

.esg-social-grid-head .esg-dim-sub-title {
    max-width: 640px;
    margin-bottom: 0;
}

/* กรอบภาพ : ล็อกอัตราส่วนให้เท่ากับมิติสิ่งแวดล้อม
   .esg-dim-adv-media ตั้ง height:100% ไว้ ซึ่งจะได้ผลตอนคอลัมน์ถูกยืด
   ตามการ์ดข้างๆ (กรอบสูงเท่าการ์ด) แต่ถ้าไม่มีอะไรยืด ค่าจะตกเป็น auto
   แล้วกรอบจะยืดตามอัตราส่วนไฟล์ภาพแทน
     - ภาพมิติสิ่งแวดล้อมเป็นแนวนอน 1881x1254 (3:2) ได้กรอบ 576x384
     - ภาพมิติสังคมเป็นแนวตั้ง 523x597 จะได้กรอบ 576x657 ซึ่งสูงเกินไป
   จึงใส่ aspect-ratio 3:2 ไว้เป็นค่าตั้งต้นให้ตรงกับ env
   และต้องพิน width:100% ด้วย ไม่งั้น min-height ที่ติดมาจะทำให้เบราว์เซอร์
   ย้อนคิดความกว้างจากความสูง แล้วกรอบล้นออกนอกคอลัมน์ */
.esg-dim-social .esg-dim-adv-media {
    width: 100%;
    aspect-ratio: 3 / 2;
}


/* _________________ESG Policy card : layout เฉพาะมิติสิ่งแวดล้อม

   การ์ดนโยบายเป็น 2 คอลัมน์ และข้างในเรียงลงล่าง
   (ไอคอน + เลข -> หัวข้อ -> เนื้อหา) ตามรูปแบบบล็อกซ้ายของการ์ดมิติสังคม
   จึงถอด layout ซ้าย/ขวา + เส้นคั่นแนวตั้งที่แชร์มาจาก .esg-social-card ออก
   ส่วนหน้าตาอื่น (พื้นการ์ด padding radius hover ไอคอน เลข หัวข้อ)
   ยังใช้กฎร่วมกับมิติสังคมอยู่ */

.esg-policy-card {
    flex-direction: column;
}

.esg-policy-card-main {
    flex: 0 0 auto;
    padding-right: 0;
}

/* ระยะห่างหัวข้อ -> เนื้อหา มาจาก margin-bottom ของ h3 (12px)
   ตรงกับระยะหัวข้อ -> คำอธิบายนำ ของการ์ดมิติสังคม */
.esg-policy-card-body {
    padding-left: 0;
    padding-top: 0;
    border-left: 0;
    border-top: 0;
}


/* _________________ESG Dimension : Governance & Economy

   ส่วนหัวและ pill ใช้คลาสร่วมชุด .esg-dim-* เดิม
   สีประจำมิติมาจาก --esg-accent ที่ .esg-dim-gov ประกาศไว้แล้ว (น้ำเงิน)
   ส่วนที่เพิ่มใหม่คือ bento grid ของผลการดำเนินงาน */

.esg-bento-head {
    margin-bottom: 30px;
}

.esg-bento-head .esg-dim-sub-title {
    max-width: 640px;
    margin-bottom: 0;
}

/* Bento grid ------------------------------------------- */

/* 12 คอลัมน์ วางแบบ bento :
     A (CGR)         คอลัมน์ 1-5  กินสองแถว  = การ์ดเด่น
     B (AGM)         คอลัมน์ 6-8  แถว 1
     C (CAC)         คอลัมน์ 9-12 แถว 1
     D (ข้อร้องเรียน) คอลัมน์ 6-12 แถว 2      = การ์ดกว้าง
   ปล่อยให้ auto-placement จัดเอง ไม่ต้องระบุเลขแถว */
/* ใช้กริด 24 คอลัมน์ (ไม่ใช่ 12) เฉพาะที่ ≥1200px เพื่อให้ B กับ C
   หารเท่ากันได้ลงตัว (7+7=14 แทน 3+4=7 เดิม) โดยสัดส่วนของ A และ D
   เทียบกับทั้งแถวยังเท่าเดิมทุกประการ (10/24 = 5/12, 14/24 = 7/12)
   ที่ ≤1199px ยุบกลับเป็น 12 คอลัมน์ตามเดิม เพราะ breakpoint นั้น
   B กับ C เท่ากันอยู่แล้ว (span 6 เท่ากัน) ไม่ต้องพึ่งกริด 24 ช่อง */
.esg-bento {
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    grid-auto-rows: minmax(190px, auto);
    gap: 24px;
}

.esg-bento-a {
    grid-column: span 10;
    grid-row: span 2;
}

.esg-bento-b {
    grid-column: span 7;
}

.esg-bento-c {
    grid-column: span 7;
}

.esg-bento-d {
    grid-column: span 14;
}

/* Bento card ------------------------------------------- */

.esg-bento-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 28px;
    border-radius: 3px;
    border-top: 2px solid transparent;
    background-color: var(--theme-color-light);
    transition: all 0.3s ease;
}

/* .esg-bento-item:hover {
    border-top-color: var(--esg-accent);
    box-shadow: 0px 5px 37px 0px rgba(84, 84, 84, 0.1);
} */

/* การ์ดเด่น : พื้นน้ำเงินเข้ม ดึงสายตาเป็นจุดเริ่มของการอ่าน */
.esg-bento-item.is-feature {
    background-color: var(--theme-color3);
}

/* พื้นหลังภาพเฉพาะการ์ด CAC : ไล่โทนทับด้วยสีเดียวกับ --theme-color3
   ที่การ์ดเด่นใช้อยู่แล้ว (ไม่ใช่สีใหม่) เพื่อให้ตัวหนังสือขาวบนการ์ด
   ยังอ่านง่ายบนภาพถ่ายที่มีรายละเอียดเยอะ พื้นสีทึบเดิมยังอยู่เป็น fallback
   ตอนภาพโหลดไม่สำเร็จ */
.esg-bento-cac {
    /* ไล่โทนอ่อนกว่ารุ่นก่อนมาก (เดิม .90/.96/.99 ทึบเกือบเต็ม แทบไม่เห็นภาพ)
       เข้มไว้แค่บนสุดที่ตัวหนังสือ tag/title อยู่ทับจอ LED ที่สว่างในภาพ
       แล้วไล่จางลงเรื่อยๆ ให้ตัวคนในภาพ (ซึ่งอยู่ครึ่งล่าง พื้นมืดกว่าอยู่แล้ว)
       เห็นชัดขึ้นโดยตัวหนังสือส่วน value/grade/note ยังอ่านออกเพราะพื้นภาพเข้มเองอยู่แล้ว */
    background-image:
        linear-gradient(360deg, rgba(0, 28, 56, 0.80) 0%, rgba(0, 28, 56, 0.58) 15%, rgba(0, 28, 56, 0.16) 100%),
        url(../images/resource/esg-cac.webp);
    /* ซูมภาพเกินกว่า cover ปกติ (150%) แล้วเลื่อนจุดโฟกัสลงล่างค่อนขวา
       เพื่อตัดส่วนโลโก้/ข้อความบนจอออกไป เหลือแต่ช่วงสองคนส่งมอบใบรับรอง
       ให้เห็นสัดส่วนคนชัดและใหญ่ขึ้นกว่าเดิมที่แสดงเต็มภาพจนคนดูเล็ก */
    background-size: cover;
    background-position: center;
}

.esg-bento-cac .esg-bento-note {
    border-top: none;
    margin: 0;
}

.esg-bento-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.esg-bento-tag {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: var(--line-height-140);
    color: var(--esg-accent);
}

/* ต้องเขียนเป็นสองคลาส (.esg-bento-item .esg-bento-ico) ไม่ใช่คลาสเดียว
   เพราะ stylesheet ของ Material Symbols ถูกลิงก์ไว้หลัง esg-main.css
   ถ้า specificity เท่ากัน (0,1,0) กฎ .material-symbols-rounded ของ Google
   จะชนะ แล้ว display/font-size ที่ตั้งไว้จะไม่มีผล glyph จะไปกองมุมซ้ายบน
   และล้นออกนอกวงกลม (ไอคอนของ section อื่นเขียนสองคลาสอยู่แล้วจึงไม่เจอปัญหานี้) */
.esg-bento-item .esg-bento-ico {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    color: var(--theme-color-light);
    background-color: var(--esg-accent);
}

/* ตราโลโก้ CAC : แทนไอคอนวงกลมเฉพาะการ์ดนี้ ใหญ่กว่า .esg-bento-ico (40px)
   ตัวภาพเป็นเหรียญตรารับรองที่มีขอบ/สัดส่วนของตัวเองอยู่แล้ว จึงไม่ต้อง
   ครอบวงกลมหรือใส่พื้นหลังซ้ำเหมือนไอคอน glyph ทั่วไป */
.esg-bento-badge {
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    object-fit: contain;
}

h4.esg-bento-title {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 600;
    line-height: var(--line-height-140);
    color: var(--theme-color3);
}

/* ตัวเลข/ผลการประเมิน : ดันลงล่างสุดของการ์ดด้วย margin-top:auto
   การ์ดในแถวเดียวกันจึงวางตัวเลขตรงระดับกัน */
.esg-bento-metric {
    margin-top: auto;
}

.esg-bento-metric .value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--esg-accent);
}

.esg-bento-metric .grade {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: var(--line-height-140);
    color: var(--theme-color3);
}

/* การ์ด CGR และ AGM Checklist : ต่อท้าย grade บนบรรทัดเดียวกับ value เลย
   (นำ .grade ไปซ้อนไว้ใน <strong class="value"> ในมาร์กอัป)
   ขนาดฟอนต์ยังเป็น 14px เท่าเดิมอัตโนมัติอยู่แล้ว เพราะกฎ .esg-bento-metric
   .grade ด้านบนกำหนด font-size ให้ตัว .grade ตรงๆ ไม่ใช่ inherit มาจาก
   .value ที่ครอบอยู่ (ค่ากำหนดตรงบนอีลีเมนต์ชนะ inheritance เสมอ)
   ที่ต้องเพิ่มกฎนี้แยกคือแค่เรื่อง display จาก block เป็น inline
   ให้ลงบรรทัดเดียวกับ value ไม่ใช่กฎ .esg-bento-metric .grade เดิม
   เพราะการ์ดอื่น (CAC, Whistleblowing) grade ยังเป็นพี่น้องแยกบรรทัด
   อยู่ใต้ value ตามเดิม เจาะจงแค่กรณี grade เป็นลูกของ .value เท่านั้น */
.esg-bento-metric .value .grade {
    display: inline;
    margin-top: 0;
    margin-left: 8px;
}

.esg-bento-note {
    margin: 18px 0 0;
    padding-top: 16px;
    font-size: 14px;
    line-height: var(--line-height-140);
    color: var(--text-color);
    border-top: 1px solid #E4E4E4;
}

/* แถวสัญลักษณ์ระดับคะแนน CGR : เดิมเป็นดาว FontAwesome 4 ดวง
   เปลี่ยนเป็นตราสัญลักษณ์ CGR (esg-cgr-logo.webp) 4 อันแทน ตามจำนวนดาวเดิม
   ใช้ height คุมขนาดแล้วปล่อย width:auto ตามสัดส่วนไฟล์ (560x640) */
.esg-bento-stars {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 16px;
}

.esg-bento-stars img {
    height: 32px;
    width: auto;
    /* ใหญ่กว่าดาวเดิมเล็กน้อย (ดาวเดิม font-size 18px) */
}

/* โลโก้ AGM Checklist : วางใต้ value ของการ์ด B เหมือนแถวไอคอน CGR ของการ์ด C
   ขนาดใกล้เคียงกับ .esg-bento-stars img (สูง 32px เท่ากัน) ไฟล์เป็นแถบ
   4 ไอคอนในภาพเดียวอยู่แล้ว (ratio ~4:1) จึงไม่ต้องวนซ้ำเหมือนโลโก้ CGR */
.esg-bento-agm-logo {
    display: block;
    margin-top: 16px;
    height: 32px;
    width: auto;
}

/* การ์ดเด่น : กลับสีข้อความให้อ่านบนพื้นเข้ม */
.is-feature .esg-bento-tag {
    color: rgba(255, 255, 255, 0.7);
}

.esg-bento-item.is-feature .esg-bento-ico {
    color: var(--theme-color3);
    background-color: var(--theme-color-light);
}

.is-feature h4.esg-bento-title {
    color: rgba(255, 255, 255, 0.88);
}

.is-feature .esg-bento-metric .value,
.is-feature .esg-bento-metric .grade {
    color: var(--theme-color-light);
}

.is-feature .esg-bento-note {
    color: rgba(255, 255, 255, 0.7);
    border-top-color: rgba(255, 255, 255, 0.18);
}

/* การ์ดกว้าง : แบ่งหัวข้อ+ตัวเลขซ้าย / รายการที่ตรวจนับขวา */
.esg-bento-split {
    display: flex;
    align-items: stretch;
    gap: 32px;
    height: 100%;
}

.esg-bento-split-main {
    flex: 0 0 42%;
    display: flex;
    flex-direction: column;
}

.esg-bento-list {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding-left: 32px;
    list-style: none;
    border-left: 1px solid #E4E4E4;
}

.esg-bento-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: var(--line-height-140);
    color: var(--text-color);
}

/* วงกลมเส้น ไม่มี fill : ทำแบบเดียวกับ .esg-social-list li .material-symbols-rounded
   คือใช้ glyph "check" ธรรมดา (ไม่ใช่ "check_circle" ที่กากบาทวงกลมทึบมากับตัวอักษรเลย)
   แล้ววาดวงกลมเองด้วย border บนตัว glyph แทน */
.esg-bento-list li .material-symbols-rounded {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 14px;
    color: var(--esg-accent);
    border: 1px var(--esg-accent) solid;
    border-radius: 999px;
}

/* Responsive ------------------------------------------- */

@media (max-width: 1199px) {

    /* ยุบกลับเป็นกริด 12 คอลัมน์ : breakpoint นี้ B กับ C เท่ากันอยู่แล้ว
       (span 6 เท่ากัน) ไม่ต้องพึ่งกริด 24 ช่องของ ≥1200px */
    .esg-bento {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    /* ช่องแคบลง : A กินครึ่งซ้ายสองแถว / B กับ C ซ้อนกันครึ่งขวา / D เต็มแถว */
    .esg-bento-a {
        grid-column: span 6;
    }

    .esg-bento-b,
    .esg-bento-c {
        grid-column: span 6;
    }

    .esg-bento-d {
        grid-column: span 12;
    }
}

@media (max-width: 991px) {
    .esg-bento {
        grid-auto-rows: minmax(0, auto);
        gap: 20px;
    }

    .esg-bento-a {
        grid-column: span 12;
        grid-row: auto;
    }

    .esg-bento-item {
        padding: 24px;
    }

    .esg-bento-metric .value {
        font-size: 34px;
    }
}

@media (max-width: 767px) {

    /* ช่องแคบเกินจะแบ่งซ้ายขวา จึงเรียงลงล่าง แล้วสลับเส้นคั่นเป็นแนวนอน */
    .esg-bento-split {
        flex-direction: column;
        gap: 20px;
    }

    .esg-bento-split-main {
        flex-basis: auto;
    }

    .esg-bento-list {
        justify-content: flex-start;
        padding-left: 0;
        padding-top: 20px;
        border-left: 0;
        border-top: 1px solid #E4E4E4;
    }
}

@media (max-width: 575px) {
    .esg-bento-b,
    .esg-bento-c {
        grid-column: span 12;
    }

    .esg-bento-metric .value {
        font-size: 24px;
    }

    .esg-bento-a {
        height: 340px;
    }
}


/* _________________ESG Social : ผลการดำเนินงาน ปี 2568

   หัวข้อเต็มความกว้างด้านบน (ใช้ .esg-social-grid-head ร่วมกับบล็อก 4 ด้าน)
   ตามด้วย CSS Grid 3 คอลัมน์ x 3 แถว แต่ละแถวใช้แค่ 2 ช่อง (ภาพ + การ์ดสถิติ)
   ไล่เยื้องคนละตำแหน่งทีละแถว ซ้าย-ขวา-ซ้าย:
     แถว 1 = ช่อง 1-2, แถว 2 = ช่อง 2-3, แถว 3 = ช่อง 1-2
   การ์ดทุกใบเป็นการ์ดปกติ ไม่มีใบไหนกิน 2 ช่อง ช่องที่ไม่ได้ใช้ในแต่ละแถว
   ก็แค่ว่างไปเองตามตำแหน่งที่ไม่ได้วางอะไรลงไป ไม่ใช่ช่องเว้นที่ตั้งใจทำเป็นพิเศษ */

/* minmax(240px, 1fr) แทน minmax(0, 1fr) เดิม : คอลัมน์ยังยืดเต็มพื้นที่
   เหมือนเดิมตอนคอนเทนเนอร์กว้างพอ แต่มีพื้นความกว้างขั้นต่ำกันไว้ ไม่ให้
   การ์ด/ภาพถูกบีบจนแคบเกินไปหากคอนเทนเนอร์ (หรือ container ที่ฝังหน้านี้)
   แคบกว่าที่ออกแบบไว้ ไม่กระทบตำแหน่งซิกแซกที่ยังอิง 3 คอลัมน์เท่าเดิม */
.esg-perf-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

.esg-perf-pos-1-1 {
    grid-column: span 5;
    grid-row: 1;
}

.esg-perf-pos-1-2 {
    grid-column: 1 / span 7;
    grid-row: 1;
}

.esg-perf-pos-2-2 {
    grid-column: 1 / span 5;
    grid-row: 2;
}

.esg-perf-pos-2-3 {
    grid-column: span 7;
    grid-row: 2;
}

.esg-perf-pos-3-1 {
    grid-column: span 5;
    grid-row: 3;
}

.esg-perf-pos-3-2 {
    grid-column: 1 / span 7;
    grid-row: 3;
}

/* การ์ดสถิติ 3 ใบใช้คลาส .esg-bento-item / .esg-bento-top / .esg-bento-tag /
   .esg-bento-ico / .esg-bento-title / .esg-bento-metric / .esg-bento-note
   ชุดเดียวกับผลการดำเนินงานบรรษัทภิบาลฯ ทุกตัว (นิยามอยู่ในบล็อกด้านล่าง
   ของไฟล์นี้) จึงไม่ต้องประกาศสไตล์การ์ดซ้ำที่นี่ — ไอคอนวงกลมมีพื้นหลัง
   และสี accent ดึงจาก --esg-accent ของ .esg-dim-social เอง (ฟ้า) อัตโนมัติ */

/* Image card ---------------------------------------------- */

/* เซลล์แคบกว่าเดิมมาก (1 ใน 4 ของความกว้างคอนเทนเนอร์) จึงล็อกอัตราส่วน
   4:3 แทนการตั้ง min-height ตรงๆ ไม่งั้นภาพจะเตี้ยหรือสูงเกินไปเทียบกับ
   การ์ดสถิติข้างๆ ที่ความสูงขึ้นกับเนื้อหา (ไอคอน+ตัวเลข+คำอธิบาย) */
.esg-perf-media {
    min-width: 0;
    width: 100%;
    height: 100%;
    max-height: 280px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 3px;
}

.esg-perf-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive -----------------------------------------------
   768–991px : ใช้ grid 12 คอลัมน์ชุดเดียวกับ desktop ต่อไป ไม่ reset ตำแหน่ง
   จึงคงลำดับซ้าย/ขวาแบบซิกแซกไว้ครบ (การ์ด-ภาพ / ภาพ-การ์ด / การ์ด-ภาพ)

   ของเดิมยุบเหลือ 2 คอลัมน์แล้ว reset เป็น auto ทำให้ไปเรียงตามลำดับ DOM
   คือ ภาพซ้าย/การ์ดขวา เหมือนกันทั้ง 3 แถว ซิกแซกของ desktop หายไป */
@media (max-width: 991px) {
    .esg-perf-grid {
        gap: 20px;
    }

    /* ปลดเพดานความสูงของภาพ ให้ยืดเท่าการ์ดที่อยู่แถวเดียวกัน
       เซลล์แคบลงตาม container ที่ 720px แต่การ์ดสูงขึ้นเพราะข้อความ Thai
       ขึ้นบรรทัดใหม่ ภาพจึงชนเพดาน 280px ก่อนแล้วเหลือช่องว่างใต้ภาพ
       (width/height 100% + grid stretch จัดการความสูงให้เองอยู่แล้ว
        aspect-ratio จึงไม่มีผลตอนกำหนดสองด้าน แต่ปิดไว้ให้ชัดเจน) */
    .esg-perf-media {
        max-height: none;
        aspect-ratio: auto;
    }
}

@media (max-width: 767px) {

    /* ≤767px : ยุบเหลือคอลัมน์เดียว ไล่ตามลำดับ DOM (ภาพ, การ์ด) ทีละคู่
       ตรงนี้ต้องคืนตำแหน่งเป็น auto ด้วย ไม่งั้น grid-column: span 7 ที่ยัง
       ค้างอยู่จะไปสร้างคอลัมน์ implicit เพิ่ม แล้ว layout จะพัง
       ระยะและขนาดฟอนต์ของตัวการ์ดเองปรับตาม .esg-bento-item / .esg-bento-metric
       ที่นิยามไว้ในบล็อกบรรษัทภิบาลฯ อยู่แล้ว ไม่ต้องกำหนดซ้ำที่นี่ */
    .esg-perf-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .esg-perf-pos-1-1,
    .esg-perf-pos-1-2,
    .esg-perf-pos-2-2,
    .esg-perf-pos-2-3,
    .esg-perf-pos-3-1,
    .esg-perf-pos-3-2 {
        grid-column: auto;
        grid-row: auto;
    }

    .esg-perf-media {
        aspect-ratio: 3 / 2;
    }
}

/* _________________WOW fade-in (section มิติสิ่งแวดล้อม → ล่างสุด)

   markup ใช้ `wow fadeInUp` ชุดเดียวกับหน้า index.html แต่โปรเจคนี้
   "ไม่มีหน้าไหนโหลด css/animate.css" เลย จึงไม่มีทั้ง @keyframes fadeInUp
   และ .animated ที่กำหนด duration -> คลาสพวกนั้นเลยไม่ทำงานจริงทั้งเว็บ
   (wow.js โหลดผ่าน menu_main.html และ init ใน js/script.js อยู่แล้ว
    มันแค่สลับคลาส/visibility ให้ แต่ไม่มี CSS ให้เล่น)

   ตรงนี้จึงเติมส่วนที่ขาดเอง โดย scope ไว้ใต้ .esg-dimension เท่านั้น
   และตั้งชื่อ keyframes เป็น esgFadeInUp ของตัวเอง ไม่ทับของ animate.css
   -> หน้าอื่นในโปรเจคไม่ได้รับผลกระทบ (ไฟล์นี้โหลดแค่ esg.html / esg-en.html)

   wow.js จะ cache ค่า animation-name ตอน init แล้วใส่ inline animation-name:none
   + visibility:hidden ไว้ก่อน พอ scroll ถึงจึงคืนค่าเดิมและเติมคลาส .animated
   ฉะนั้น animation-name ต้องมีผลอยู่แล้วตั้งแต่ต้น ห้ามผูกไว้กับ .animated */

.esg-dimension .wow.fadeInUp {
    animation-name: esgFadeInUp;
    animation-duration: 0.9s;
    animation-timing-function: ease;
    animation-fill-mode: both;
}

@keyframes esgFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .esg-dimension .wow.fadeInUp {
        animation: none;
    }
}