.icon-more {
    width: 15px;
    margin-left: 15px;
}
.col-text-list {
    padding: 0;
}
.bg-guardian-corp {
    background: url(../images/img_corporate/corporate-2026/bg-corp.webp) right top no-repeat fixed;
}
.container-1700 {
    max-width: 1700px;
    margin: 0 auto;
    width: 100%;
}
.policy-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* แบ่งเป็น 6 คอลัมน์ */
    gap: 20px;
    max-width: 1700px;
    margin: 0 auto;
}

/* --- สไตล์การ์ดพื้นฐาน --- */
.card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    color: #ffffff;
    min-height: 280px;
    display: flex;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.card-bg {
    transition: transform 0.4s ease-in-out;
}

/* 2. สั่งให้รูปภาพซูมเมื่อมีการ Hover ที่ตัวการ์ด */
.card:hover .card-bg {
    transform: scale(1.05); /* หากต้องการซูมมากกว่านี้ ลองเปลี่ยนเป็น 1.1 หรือ 1.5 ดูนะครับ */
}
.card-content {
    position: relative;
    z-index: 3;
    padding: 30px;
    display: flex;
    flex-direction: column;
    width: 85%; /* บีบข้อความให้อยู่ฝั่งซ้าย */
    height: 100%; /* <-- เพิ่มบรรทัดนี้ */
}

/* --- สไตล์ไอคอนวงกลม --- */
.icon-circle {
    width: 46px;
    height: 46px;
    border: 1.5px solid #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.icon-circle svg {
    color: #ffffff;
}

.card h2 {
    font-size: 1.3em;
    font-weight: 600;
    line-height: 1.1 !important;
    color: #fff;
}

.card p {
    font-size: 1.2rem;
    color: #fff;
    line-height: 1.2;
    margin-top: 10px;
    margin-bottom: 20px;
}
.card > a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none; /* เอาขีดเส้นใต้ของลิงก์ออก */
    color: inherit; /* ให้สีตัวอักษรกลับไปใช้สีขาวตามเดิม ไม่เป็นสีฟ้า */
}

.read-more {
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    margin-top: auto;
}
.read-more span {
    margin-left: 6px;
    font-size: 0.8rem;
}
.read-more:hover {
    text-decoration: none;
    color: #fff;
}

/* --- เลย์เอาต์เฉพาะแบบ (แนวตั้ง vs แนวนอน) --- */

/* แถว 1: ไอคอนอยู่บนข้อความ */
.layout-vertical .icon-circle {
    margin-bottom: 16px;
}

/* แถว 2: ไอคอนอยู่ข้างข้อความ */
.layout-horizontal .card-header-corp {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

/* --- การจัดวาง Grid Item --- */
.item-1,
.item-2,
.item-3 {
    grid-column: span 2;
} /* กินพื้นที่รูปละ 2 ส่วน */
.item-4,
.item-5 {
    grid-column: span 3;
    min-height: 300px;
} /* กินพื้นที่รูปละ 3 ส่วน */

.bg-news-2026 {
    background: url(../images/img_news/2026/bg_news_2026.webp) no-repeat top right;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
}
.img-shadow {
    border-radius: 8px;
}
.box-news-cover {
    border-radius: 8px 8px 0 0;
}
.box-news-hilight-topic span {
    display: flex;
    align-items: center;
}
.news-date-img {
    width: 20px;
    margin-right: 10px;
    margin-top: -5px;
}
.box-news {
    border-radius: 8px;
    padding-bottom: 15px;
    box-shadow: 0 0 10px #E0E0E0;
}
.topic-news, .box-news p, .news-date {
    padding: 0 15px;
}
.topic-news{color: #0F3463}
.box-news p{margin-bottom: 0;}
.news-date{font-size: 18px;font-weight: 500;}
.line-2{-webkit-line-clamp: 4!important;}
.line-3 {
    /*display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;*/
    display: none!important;
}
.box-news-cover img{
    height: auto;
}
.topic-news {
    margin-bottom: 10px;
    line-height: 1.3 !important;
}
/*.box-news-cover img {
    width: 100%;
    aspect-ratio: 4 / 3; 
    object-fit: cover; 
    transform: scale(1);
    transition: .3s;
}*/

.box-news-hilight-topic .txtnews-hilight, .box-news-hilight-topic h2 a{
    line-height: 1.2 !important;
    font-weight: 600;
    color: #0F3463;
    padding-top: 20px;
}
/* สไตล์หลักของปุ่ม */
.btn-read-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* ระยะห่างระหว่างข้อความกับลูกศร */
  background-color: #F26622; /* สีส้มตามรูป */
  color: #ffffff; /* กำหนดสีตัวอักษรและสีไอคอนเป็นสีขาว */
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  padding: 9px 24px;
  border-radius: 50px; /* ขอบมนแบบแคปซูล */
  transition: background-color 0.3s ease;
}

/* เอาขีดเส้นใต้ตอน hover ออก และเปลี่ยนสีพื้นหลังเล็กน้อย */
.btn-read-more:hover {
  text-decoration: none;
  color: #ffffff;
  background-color: #bf3d00;
}

/* ตั้งค่าเริ่มต้นให้ไอคอนลูกศร */
.btn-read-more .icon-arrow {
  display: inline-flex;
  align-items: center;
  transition: transform 0.3s ease; /* ทำให้การขยับมีความนุ่มนวล */
}

/* เมื่อ Hover ที่ตัวปุ่ม สั่งให้ลูกศรเลื่อนไปทางขวา */
.btn-read-more:hover .icon-arrow {
  transform: translateX(6px); /* ขยับลูกศรไปทางขวา 6 พิกเซล */
}
.icon-arrow svg {
    stroke: #ffffff; 
}
.topic-news a {
    color: #0F3463!important;
}

.topic-news {
    height: 80px;
}

.line-2 {
    color: #0F3463;
}

/* คลุมแถวทั้งหมด และดันทั้งสองฝั่งให้ชิดซ้าย-ขวา */
.card-footer-layout {
  display: flex;
  justify-content: space-between; /* ดันวันที่ไปซ้ายสุด และลูกศรไปขวาสุด */
  align-items: center; /* จัดให้อยู่กึ่งกลางแนวตั้ง */
  padding: 10px 15px 0 15px;

}

/* สไตล์สำหรับส่วนวันที่ */
.date-info {
  display: flex;
  align-items: center;
  gap: 8px; /* ระยะห่างระหว่างไอคอนกับตัวหนังสือ */
  color: #6b7280; /* สีเทาอมฟ้า */
  font-size: 18px;
}

/* สไตล์สำหรับปุ่มวงกลม */
.arrow-btn-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: #f3f6f9; /* สีพื้นหลังวงกลมสีฟ้าอ่อน */
  color: #4b5563; /* สีของลูกศร */
  border-radius: 50%; /* ทำให้เป็นวงกลม */
  text-decoration: none;
  transition: all 0.3s ease;
}

/* เอฟเฟกต์เมื่อเอาเมาส์ชี้ปุ่ม */
.arrow-btn-circle:hover {
  background-color: #e2e8f0; /* เปลี่ยนสีพื้นหลังให้เข้มขึ้นเล็กน้อย */
  transform: translateX(3px); /* ให้ปุ่มขยับไปทางขวานิดหน่อย */
}
.topic-news-title-mb {
    margin-top: -25px!important;
}

.line-news-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3!important;
}
.line-news-home {
    -webkit-line-clamp: 1 !important;
    display: none !important;
}
.box-news p a {
    font-weight: 500;
}

.box-news {
    margin: 0 2% 20px;
    text-align: left;
}

/* --- การกำหนดสีพื้นหลังสลับซ้าย-ขวา แบบเต็มจอ --- */
.timeline-row {
    padding: 80px 20px; /* ระยะขอบบนล่างของแต่ละเซคชัน */
}

/* แถวที่เป็นเลขคี่ (1, 3, 5) เป็นสีขาว */
.timeline-row:nth-child(odd) {
    background-color: #ffffff;
}

/* แถวที่เป็นเลขคู่ (2, 4, 6) เป็นสีเทาอ่อน/ฟ้าอ่อน */
.timeline-row:nth-child(even) {
    background-color: #f7f9fc;
}


/* --- โครงสร้างการจัดวางซ้ายขวาตรงกลาง --- */
.timeline-item {
    max-width: 1100px;
    margin: 0 auto; /* จัดให้อยู่กึ่งกลางหน้าจอ */
    display: flex;
    align-items: center;
    align-items: flex-start; /* <--- เปลี่ยนจาก center เป็น flex-start */
    justify-content: space-between;
    width: 100%;
}

/* สั่งสลับฝั่ง (รูป-ข้อความ) อัตโนมัติในแถวเลขคู่ */
.timeline-row:nth-child(even) .timeline-item {
    flex-direction: row-reverse;
}

.timeline-img-box, 
.timeline-text-box {
    width: 42%; 
}

/* --- ส่วนของรูปภาพ --- */
.timeline-img-box {
    position: relative;
}

.timeline-img-box img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    object-fit: cover;
    aspect-ratio: 16 / 9;
    display: block;
}

.img-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #0b2e59;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    z-index: 2;
}

/* --- ส่วนของตัวคั่นตรงกลาง (ไม่มีเส้นแล้ว มีแค่วงกลม) --- */
.timeline-divider {
    width: 16%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle {
    width: 44px;
    height: 44px;
    background-color: #ffffff;
    border: 2px solid #0b2e59; 
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0b2e59;
    font-weight: 700;
    font-size: 14px;
}

/* --- ส่วนของข้อความ --- */
.timeline-text-box {
    text-align: left; 
}

.date-label {
    color: #0b2e59;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.timeline-text-box h3 {
    color: #0b2e59;
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 1.2 !important;
}

.timeline-text-box p {
    color: #555555;
    font-size: 21px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.accent-line {
    width: 40px;
    height: 3px;
    background-color: #f58220;
}
/* --- สไตล์สำหรับเนื้อหาที่ซ่อนอยู่ (Slide Down / Up) --- */
.more-content {
    max-height: 0; /* เริ่มต้นด้วยการซ่อนเนื้อหา (ความสูง 0) */
    overflow: hidden;
    opacity: 0;
    margin-bottom: 0;
    /* transition นี้จะทำให้เกิดเอฟเฟกต์สไลด์ทั้งตอนเปิดและปิด */
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, margin-bottom 0.4s ease-in-out;
}

/* คลาสที่จะถูกเพิ่มเข้ามาเมื่อกดปุ่ม */
.more-content.expanded {
    max-height: max-content; /* ตั้งค่าเผื่อให้มากกว่าความสูงของเนื้อหาจริง */
    opacity: 1;
    margin-bottom: 15px; /* เพิ่มระยะห่างด้านล่างเมื่อเปิดออก */
}



/* --- สไตล์สำหรับปุ่มอ่านเพิ่มเติม --- */
.btn-readmore {
    background: none;
    border: none;
    color: #0b2e59;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin-bottom: 25px; 
    transition: color 0.3s;
    font-family: inherit;
}

.btn-readmore:hover {
    color: #f58220; 
}

.btn-readmore span {
    font-size: 18px;
    transition: transform 0.3s ease; 
}


.in-timeline-img-box {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
.btn-readmore .icon-arrow {
    transition: transform 0.3s ease; 
}

/* เมื่อปุ่มถูกกดเปิด (มีคลาส active) ให้หมุนลูกศร 180 องศา (ชี้ขึ้น) */
.btn-readmore.active .icon-arrow {
    transform: rotate(180deg);
}

/*---------------------------*/

/* --- ระบบ Grid Layout --- */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 240px);
    gap: 25px;
    margin: 0 auto;
}


/* การระบุตำแหน่งของการ์ดแต่ละใบ */
.card-vision    { grid-column: 1; grid-row: 1 / 3; } /* กินพื้นที่ 2 แถวบนซ้าย */
.card-history   { grid-column: 2; grid-row: 1; }
.card-board     { grid-column: 3; grid-row: 1; }
.card-exec      { grid-column: 2; grid-row: 2; }
.card-contact   { grid-column: 3; grid-row: 2 / 4; } /* กินพื้นที่ 2 แถวขวาล่าง */
.card-structure { grid-column: 1; grid-row: 3; }
.card-message   { grid-column: 2; grid-row: 3; }


/* --- โครงสร้างพื้นฐานของการ์ด --- */
.grid-container .card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    min-height: 240px;
    border: unset;
}


/* 1. บังคับตัวการ์ดชั้นนอกสุด */
.grid-container .card {
    justify-content: flex-start !important;
}

/* 2. บังคับแท็ก a (ที่คุณกำลังเปิดอยู่ใน DevTools) */
.grid-container .card > a {
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    width: 100%;
    height: 100%;
}



.grid-container .card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.5s ease;
}

.grid-container .card:hover .card-bg {
    transform: scale(1.05); /* เอฟเฟกต์ซูมเมื่อเอาเมาส์ชี้ */
}



/* --- เนื้อหาภายในการ์ด --- */
.grid-container .card-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    height: 100%;
    /* รีเซ็ต Padding ด้านบนเผื่อไว้ ในกรณีที่มันถูกตั้งค่าไว้เยอะเกินไป */
    padding-top: 30px !important; 
}

/* --- ไอคอน --- */
.icon-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.theme-light .icon-circle { background-color: #0b2e59; color: #ffffff; }
.theme-dark .icon-circle { border: 1.5px solid #ffffff; color: #ffffff; }


.grid-container .card h3 {
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.2 !important;
}
.theme-light h3 { color: #0b2e59; }
.theme-dark h3 { color: #ffffff; }

.grid-container .card p {
    font-size: 1.2rem;
    line-height: 1.2;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/*.grid-container .card p br {display: none;}*/
.theme-light p { color: #444444; }
.theme-dark p { color: #d0dbe6; }

.read-more {
    margin-top: auto; /* ดันลิงก์อ่านเพิ่มเติมลงไปล่างสุดเสมอ */
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
}
.theme-light .read-more { color: #0b2e59; }
.theme-dark .read-more { color: #ffffff; }
.orange-line {
    width: 35px; /* ความยาวของเส้น */
    height: 3px; /* ความหนาของเส้น */
    background-color: #f58220; /* สีส้ม */
    margin-top: 7px; /* ระยะห่างจากข้อความด้านบน */
    border-radius: 2px; /* ทำให้ขอบเส้นมนเล็กน้อย (ไม่ใส่ก็ได้) */
}
.bg-about-lines-2026{
    background: url(../images/img_about/about-cover-2026/bg02.webp) no-repeat top right;
    
}
.bg-menu{
        background: url(../images/bg-header-pc.webp) #071a2f no-repeat top center !important;
}
/*footer.footer-slide{padding-top: 25px;}
.footer-copy {padding: 10px 0;margin-top: 25px;}*/
#section-business-2026 { /* เปลี่ยนเป็นชื่อคลาส Section ของคุณ */
    position: relative; /* สำคัญมาก! เพื่อล็อกขนาดพื้นหลังให้อยู่แค่ในกรอบนี้ */
    width: 100%;
    padding-bottom: 150px; /* เว้นที่ว่างด้านล่างให้รูปวงกลม */
    margin-top: -50px;
   }
    #section-business-2026 .bg-head-business-2026 {
    background: url('../images/img_business/bg-business-2026.jpg') no-repeat bottom; center;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* เปลี่ยนจาก auto หรือ 100vh เป็น 100% เพื่อให้กางเท่าความสูงกล่องแม่พอดี */
    z-index: -1;
}


#section-business-2026 .container {
    max-width: 1366px;
    margin: 0 auto;
    padding: 60px 20px;
}

/* --- หัวข้อหลัก --- */
#section-business-2026 .section-title {
    text-align: center;
    color: #1a6e9a; /* สีน้ำเงินฟ้า */
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 50px;
}

/* --- ส่วนที่ 1: สถิติ (Stats) --- */
#section-business-2026 .stats-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 30%;
    gap: 20px;
}

#section-business-2026 .stat-box {
    text-align: center;
    flex: 1;
    min-width: 150px;
}

#section-business-2026 .stat-label {
    font-size: 20px;
    color: #285885;
    margin-bottom: 5px;
}

#section-business-2026 .stat-value {
    font-size: 55px;
    font-weight: 600;
    color: #e66a22;
    line-height: 1;
}

/* ตัวหนังสือหน่วยที่ต่อท้ายตัวเลขให้เล็กลง */
#section-business-2026 .stat-unit {
    font-size: 24px;
    color: #285885;
    font-weight: 600;
}

/* --- ส่วนที่ 2: การ์ดวงกลม (Cards) --- */
#section-business-2026 .cards-row {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 0%;
    position: absolute;
    top: 55%;
}

#section-business-2026 .circle-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 350px;
    text-align: left;
}
#section-business-2026 .circle-card-n2 {
    margin-left: 120px;
}

#section-business-2026 .circle-card-n3 {
    margin-left: 60px;
}

/* ส่วนหัวของการ์ด (ไอคอน + ข้อความ) */
#section-business-2026 .card-header {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
    margin-bottom: 20px;
    padding: 0 10px;
}



#section-business-2026 .card-text h4 {
    font-size: 22px;
    color: #0b2e59;
    line-height: 1.3 !important;
    font-weight: 600;
    margin-bottom: 5px;
    margin-left: 20px;
}

#section-business-2026 .highlight-orange {
    font-size: 20px;
    color: #e66a22;
    font-weight: 600;
    margin-left: 20px;
}





/* Section หลัก */
#overview-section {
    position: relative;
    padding: 60px 20px 100px;
    background-color: #ffffff;
    overflow: hidden; /* กันรูปพื้นหลังล้น */
}
#overview-section h2{display: block!important;}

/* พื้นหลังเงาเมืองด้านล่างสุด (เปลี่ยน URL เป็นรูปลายตึกของคุณ) */
#overview-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 350px;
    background: url('../images/img_business/bg-business-bottom.jpg') no-repeat bottom center;
    background-size: contain;
    z-index: 0;
    pointer-events: none;
}

#overview-section .container {
    max-width: 1366px;
    margin: 0 auto;
    position: relative;
    z-index: 1; /* ดันเนื้อหาให้อยู่เหนือพื้นหลังเมือง */
}

/* หัวข้อภาพรวมธุรกิจ */
#overview-section .overview-title {
    text-align: center;
    font-size: 32px;
    color: #1a6e9a; /* สีน้ำเงินฟ้าตามแบบ */
    font-weight: 700;
    margin-bottom: 40px;
}

/* ส่วนของโควท (เครื่องหมายคำพูด) */
#overview-section .quote-text {
    position: relative;
    text-align: center;
    max-width: 700px;
    margin: 25px auto 25px;
}

#overview-section .quote-text h3 {
    font-size: 30px;
    color: #285885;
    font-weight: 600;
    display: inline-block;
    position: relative;
    padding: 0 45px;
}

/* ตั้งค่าพื้นฐานสำหรับทั้งตัวเปิดและตัวปิด */
#overview-section .quote-text h3::before,
#overview-section .quote-text h3::after {
    content: ''; /* ต้องเว้นว่างไว้เพื่อใช้ background แทน */
    position: absolute;
    width: 40px; /* กำหนดความกว้างของรูปไอคอน (ปรับขนาดได้ตามต้องการ) */
    height: 40px; /* กำหนดความสูงของรูปไอคอน */
    background-size: contain; /* บังคับให้รูปแสดงเต็มสัดส่วนในกล่อง */
    background-repeat: no-repeat;
}

/* ใส่รูปลงใน Quote ตัวเปิด (ด้านซ้ายบน) */
#overview-section .quote-text h3::before {
    background-image: url('../images/img_about/icon/q2.svg'); /* เปลี่ยนเป็นที่อยู่รูปของคุณ */
    left: 0;
    top: -15px;
}

#overview-section .quote-text h3::after {
    background-image: url(../images/img_about/icon/q1.svg);
    right: -15px;
    bottom: -15px;
}

/* ข้อความอธิบาย */
#overview-section .description-text {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 50px;
}

#overview-section .description-text p {
    font-size: 21px;
    color: #555;
    line-height: 1.4;
    margin-bottom: 15px;
}

/* เลย์เอาต์การ์ด 2 ใบ */
#overview-section .business-cards-wrapper {
    display: flex;
    gap: 25px;
    justify-content: center;
    flex-wrap: wrap;
}

#overview-section .b-card {
    position: relative;
    flex: 1;
    height: 340px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: flex-end; /* ดันข้อความไปชิดขอบล่าง */
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
}



#overview-section .b-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.5s ease;
}

/* รูปภาพจะซูมเข้าเล็กน้อยเมื่อโฮเวอร์ */
#overview-section .b-card:hover .b-card-bg {
    transform: scale(1.05); 
}

/* แถบเงาไล่ระดับสีดำด้านล่าง (ช่วยให้ตัวหนังสือสีขาวอ่านง่าย) */
#overview-section .b-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 15, 40, 0.9) 0%, rgba(0, 15, 40, 0.4) 40%, transparent 100%);
    z-index: 2;
}

#overview-section .b-card-content {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 30px;
    display: flex;
    justify-content: space-between; /* แยกฝั่งข้อความ กับ ไอคอน */
    align-items: flex-end;
}

#overview-section .b-card-text {
    color: #ffffff;
    max-width: 85%;
}

#overview-section .b-card-text h4 {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 8px;
}

#overview-section .b-card-text p {
    font-size: 20px;
    line-height: 1.3;
    color: #e0e0e0;
}

/* วงกลมไอคอนลูกศร */
#overview-section .b-card-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    transition: all 0.3s ease;
}

#overview-section .b-card:hover .b-card-icon {
    background-color: #289bd3; /* เปลี่ยนเป็นปุ่มสีฟ้าเมื่อโฮเวอร์ */
    border-color: #289bd3;
}
.box-cate {
    width: 100% !important;
}
.ability .col-text-left {
    width: 57%;
}
.resource-management h3, .ability h3, .chance h3, .consider h3 {
        font-size: 1.65rem;
    }
.resource-management p, .ability p, .chance p, .consider p{
   font-size: 20px;
   line-height: 24px; 
}

/* --- โครงสร้างหลัก (Section & Container) --- */
#about-value .core-values-section {
    background-color: #eaf3fa; /* สีพื้นหลังเผื่อรูปโหลดไม่ขึ้น */
    padding: 80px 20px 100px;
    position: relative;
}

#about-value .core-values-section .container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

#about-value .section-title {
    text-align: center;
    color: #1c5282; /* สีน้ำเงินเข้ม */
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 50px;
}

/* --- ระบบ Grid Layout --- */
#about-value .values-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* แบ่งเป็น 6 คอลัมน์ */
    gap: 25px; /* ระยะห่างระหว่างการ์ด */
}

/* แถวบน: กินพื้นที่ 3 คอลัมน์ (ครึ่งจอ) */
#about-value .card-wide {
    grid-column: span 3;
    background: url(../images/img_about/mission/core-values-1.svg) no-repeat left;
    background-size: cover;
}

/* แถวล่าง: กินพื้นที่ 2 คอลัมน์ (1 ใน 3 ของจอ) */
#about-value .card-narrow {
    grid-column: span 2;
    background: url(../images/img_about/mission/core-values-2.svg) no-repeat left;
    background-size: cover;
}

/* --- สไตล์ของการ์ด (Card Styling) --- */
#about-value .value-card {
    border-radius: 16px;
    padding: 35px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* เงาฟุ้งๆ */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#about-value .value-card:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

#about-value .value-letter {
    font-size: 80px;
    font-weight: 800;
    background: #0099FF;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    position: relative;
    padding-bottom: 8px;
    line-height: 1.3;
}
#about-value .value-letter::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 15px;
    width: 100%;
    height: 2px;
    background: #e66a22;
    border-radius: 2px;
}
#about-value .value-title {
    font-size: 28px;
    color: #1B5984;
    font-weight: 600;
    line-height: 1.3 !important;
    margin-bottom: 20px;
    min-height: 50px;
}

/* รายการย่อย (Bullet Points) */
#about-value .value-list {
    list-style: none; /* ปิดจุดกลมๆ เดิม */
    padding-left: 0;
    margin: 0;
}

#about-value .value-list li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 10px;
    font-size: 21px;
    color: #000;
    line-height: 1;
}

/* สร้างจุด Bullet Point แบบ Custom เพื่อให้สีและขนาดสวยงาม */
#about-value .value-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    top: 0;
    color: #1c5282;
    font-size: 18px;
    line-height: 1.2;
}

/* สำหรับบรรทัดที่ไม่อยากให้มีจุดข้างหน้า (เช่น Think fast. Act faster.) */
#about-value .value-list li.no-bullet {
    padding-left: 0;
    font-style: italic;
    color: #718096;
    margin-top: 15px;
}
#about-value .value-list li.no-bullet::before {
    display: none;
}
.text-center {
    display: block;
}
/* --- ระบบ Grid สำหรับการ์ด --- */
#sustainability-policy .sus-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

/* --- สไตล์ของการ์ดหลัก --- */
#sustainability-policy .sus-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    
    /* สิ่งที่เพิ่มเข้ามา */
    position: relative; /* ล็อกกรอบให้รูปภาพอยู่ข้างใน */
    min-height: 450px; /* กำหนดความสูงขั้นต่ำของการ์ด (ปรับตัวเลขได้ตามต้องการ) */
    justify-content: flex-end; /* ดันกล่องข้อความลงไปกองด้านล่าง */
}



/* --- ส่วนของรูปภาพ (ทำเป็นพื้นหลังเต็มการ์ด) --- */
#sustainability-policy .sus-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* ให้กางเต็ม 100% ของการ์ด */
    z-index: 1; /* ส่งรูปไปอยู่เลเยอร์หลังสุด */
}

#sustainability-policy .sus-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s ease-in-out;
}


#sustainability-policy .sus-card:hover .sus-card-image img {
    transform: scale(1.05); 
}

/* --- ส่วนของเนื้อหาข้อความ (ยกขึ้นมาทับรูป) --- */
#sustainability-policy .sus-card-body {
    position: relative;
    z-index: 2; /* ยกเลเยอร์ข้อความให้อยู่เหนือรูปภาพ */
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    margin-top: auto;
    
    /* สร้างสีพื้นหลังไล่ระดับจากน้ำเงินเข้ม -> โปร่งใส เพื่อให้ตัวหนังสืออ่านง่าย */
    background: linear-gradient(to top, rgba(29, 62, 105, 1) 0%, rgba(29, 62, 105, 0.8) 50%, transparent 100%);
}
#sustainability-policy .sus-card-body h2 {
    font-size: 1.3em;
    font-weight: 600;
    line-height: 1.1 !important;
    color: #fff;
}

#sustainability-policy .sus-card-body p {
    font-size: 1.2rem;
    color: #fff;
    line-height: 1.2;
    margin-top: 10px;
    margin-bottom: 20px;
}
#btn-esg {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
    margin: 40px auto 0 auto;
}

/* --- สไตล์ของปุ่ม (ต้องมี #btn-esg นำหน้าเสมอ) --- */
#btn-esg .esg-btn {
    display: inline-flex;
    align-items: center;
    background-color: #245b8e; /* สีน้ำเงินเข้มตามแบบ */
    color: #ffffff; 
    text-decoration: none;
    padding: 8px 16px 8px 8px; /* ระยะห่างกรอบใน (ซ้าย 8px สำหรับวงกลมส้ม, ขวา 16px) */
    border-radius: 8px; 
    transition: all 0.3s ease; 
}

#btn-esg .esg-btn:hover {
    background-color: #1a4269;
    box-shadow: 0 4px 10px rgba(36, 91, 142, 0.3);
}

/* --- วงกลมไอคอนสีส้มด้านซ้าย --- */
#btn-esg .icon-left {
    background-color: #f26f21; /* สีส้ม */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px; /* ระยะห่างจากวงกลมส้มถึงตัวหนังสือ */
    flex-shrink: 0; 
}

#btn-esg .icon-left svg {
    width: 20px;
    height: 20px;
    color: #ffffff;
}

#btn-esg .btn-text {
    font-size: 21px;
    font-weight: 500;
    margin-right: 10px;
    white-space: nowrap;
}
/* บังคับแสดงวงกลมด้านขวา */
#btn-esg .icon-right-esg {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    justify-content: center;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}

/* บังคับแสดงรูปเครื่องหมายลูกศรด้านใน */
#btn-esg .icon-right-esg svg {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 16px;
    height: 16px;
    stroke: #ffffff !important; /* บังคับให้ลูกศรเป็นสีขาว */
}
.bg-business .col-text h3 + p, .col-text-profile h3 + p {
    margin-bottom: 25px;
}
ul.submenu-dropdown li, ul.submenu-dropdown li a {
    line-height: 24px;
}
ul.sitemap li a{
    line-height: 19px;
}
.box-cate-business {width: 47.5%;}



@media (max-width: 1600px) {
#section-business-2026 .stats-row {margin-bottom: 22%;}
#section-business-2026 .card-header {gap: 0;}
#section-business-2026 .circle-card-n1 {margin-left: 50px;}
#section-business-2026 .circle-card-n2 {margin-left: 60px;}
#section-business-2026 .circle-card-n3 {margin-left: 20px;}
#overview-section .description-text p, #overview-section .b-card-text p {font-size: 16px;}
#overview-section .quote-text h3 {font-size: 25px;}
#section-business-2026 {margin-top: -60px;}
#section-business-2026 .icon-wrap img{width: 60px}
#section-business-2026 .card-text h4 {font-size: 20px;}
#section-business-2026 .highlight-orange {font-size: 18px;}
}

/* --- Responsive (หน้าจอมือถือและแท็บเล็ต) --- */
@media (max-width: 1536px) {
    #sustainability-policy .sus-card-body h2 {font-size: 1.5em;}
    #sustainability-policy .sus-card-body p {font-size: 1rem;}
    #about-value .value-title {font-size: 25px;line-height: 1.2 !important;}
    #about-value .value-list li {font-size: 20px;}
    #about-value .value-letter {font-size: 60px;}
    footer .flex-footer {padding-bottom: 10px!important;}
    .topic-news-home {height: 60px!important;}
    .card p {
        font-size: 1rem;
    }
    .card h2 {
        font-size: 1.5em;
    }
    .topic-news {margin-bottom: 7px;}
    .news-date-img {width: 14px;margin-top: -4px;}
    .news-date {font-size: 16px;padding-top: 10px;}

}
@media (max-width: 1280px) {
    .box-cate-business {width: 47.1%;}
    .box-business-home {height: 165px;}
    .box-business-info {margin-top: 25px;}
    #sustainability-policy .sus-card-body p {line-height: 1.3;}
    .resource-management p, .ability p, .chance p, .consider p {font-size: 16px;line-height: 20px;}
    .resource-management h3, .ability h3, .chance h3, .consider h3 {font-size: 20px !important;}
    #about-value .value-title {font-size: 20px;}
    #about-value .value-list li {font-size: 16px;}
    #about-value .value-letter {font-size: 50px;}
    #section-business-2026 .navi {margin-left: 60px;}
    #section-business-2026 .stat-value {font-size: 35px!important;}
    #section-business-2026 .stat-label {font-size: 16px;}
    #section-business-2026 .stats-row {margin-bottom: 15%;}
    #section-business-2026 .circle-card {width: 280px;}
    #section-business-2026 .icon-wrap img {width: 55px;}
    #section-business-2026 .card-text h4 {
        font-size: 17px;
        line-height: 1.1 !important;
    }
    #section-business-2026 .highlight-orange {
        font-size: 15px;
    }
    #section-business-2026 .circle-card-n1 {
        margin-left: 110px;
    }
    #overview-section .quote-text h3::before, #overview-section .quote-text h3::after {width: 35px;height: 35px;}
    #overview-section .quote-text h3 {
        font-size: 20px;
    }
    #overview-section .description-text p, #overview-section .b-card-text p {
        font-size: 14px;
    }
    #overview-section .b-card-text h4 {
    font-size: 20px;}
    #overview-section .business-cards-wrapper {width: 88%;margin: 0 auto;}

    footer .flex-footer {
        padding-bottom: 37px !important;
    }
    .btn-readmore span {font-size: 16px;}
    .date-label {font-size: 14px;}
    .timeline-text-box h3 {font-size: 18px;}
    .timeline-text-box p {font-size: 14px;line-height: 1.3;}
    .date-info {font-size: 14px;}
    .btn-read-more {font-size: 14px;padding: 5px 10px;}
    .topic-news {margin-bottom: 0px;}
    .bg-news-2026{background-size: 100%;}
    .box-news p {font-size: 14px;line-height: 1.3;}
    .grid-container .card h3 {font-size: 1.3em;}
    .grid-container .card p {font-size: 1rem;line-height: 1.3;}
    .card p {
        line-height: 1.3;
    }
    .show-tab-bg{
        background: unset;
        }
        .box-list-menu h2 a {
            color: #fff !important;
        }
        .box-address {
                border-top: unset!important;
            }
    .menu-glowing-line {
        width: 100%; 
        height: 1px; 
        margin: 20px auto; /* ใช้ auto เพื่อให้ตัวกล่องอยู่กึ่งกลางด้วย (กรณีที่ไม่ได้ตั้ง width 100%) */
        
        /* ปรับจุดสว่างสุดมาไว้ที่ 50% และปรับซ้าย-ขวาให้สมดุลกัน */
        background: linear-gradient(
            90deg, 
            rgba(150, 60, 15, 0.2) 0%,    /* ขอบซ้ายสุด (มืดและโปร่งแสง) */
            rgba(220, 90, 20, 0.8) 35%,   /* เริ่มสว่างขึ้นเมื่อเข้าใกล้ตรงกลาง */
            rgba(255, 220, 180, 1) 50%,   /* สว่างสุดที่จุดกึ่งกลาง (50%) */
            rgba(220, 90, 20, 0.8) 65%,   /* เริ่มดรอปลง */
            rgba(150, 60, 15, 0.2) 100%   /* ขอบขวาสุด (มืดและโปร่งแสง) */
        );

        box-shadow: 0 0 8px rgba(255, 120, 30, 0.6);
        }
        /* ตั้งค่าให้ h2 เป็นแกนหลักและเว้นระยะห่างด้านซ้ายให้ข้อความ */
        .box-list-menu h2 {
            position: relative;
            padding-left: 15px !important; 
        }

        /* สร้างเส้นสีส้มด้านหน้า */
        .box-list-menu h2::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%); /* ดันให้เส้นอยู่กึ่งกลางแนวตั้งพอดีกับข้อความ */
            width: 2px; /* ความหนาของเส้น */
            height: 18px; /* ความยาวของเส้น (สามารถปรับเพิ่ม-ลดได้ตามต้องการ) */
            background-color: #f58220; /* สีส้ม */
        }
}
@media (max-width: 1024px) {
    #sustainability-policy .sus-cards-grid {
        grid-template-columns: repeat(2, 1fr); /* แท็บเล็ตแสดง 2 คอลัมน์ */
    }
    #about-value .value-title {font-size: 25px;}
   #about-value .values-grid {
        grid-template-columns: 1fr !important; /* บังคับให้แสดงผลแค่ 1 คอลัมน์ */
    }
    
    #about-value .card-wide, 
    #about-value .card-narrow, 
    #about-value .card-narrow:last-child {
        grid-column: span 1 !important; /* ให้การ์ดทุกใบขยายเต็มความกว้าง */
    }
    #section-business-2026 .stats-row {
        margin-bottom: 10%;
    }
    #section-business-2026 .cards-row {top: 65%;}
    #section-business-2026 .circle-card {
        width: 250px;
    }
    #section-business-2026 .circle-card-n1 {
        margin-left: 25px;
    }
    #section-business-2026 .circle-card-n2 {
        margin-left: 0;
    }
    #section-business-2026 .circle-card-n3 {
        margin-left: 0;
    }
    #section-business-2026 .stat-box {
        flex: 0 0 15%;
        margin-bottom: 20px;
    }
    .btn-read-more {margin-bottom: 20px;}
    .item-1,
    .item-2,
    .item-3 {
        grid-column: span 3;
    }
    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* ลดเหลือ 2 คอลัมน์ */
        grid-template-rows: auto;
    }
    .grid-container .card {
        grid-column: span 1 !important; /* ยกเลิกการ Span แถว/คอลัมน์เดิมทั้งหมด */
        grid-row: span 1 !important;
        min-height: 290px;
    }
    .grid-container .card p br {display: block;}
}
@media (max-width: 992px) {
    .box-business-home {
        height: auto;
    }
    #section-business-2026 .stats-row {
        justify-content: center;
    }
}
@media (max-width: 768px) {
    #sustainability-policy .sus-cards-grid {
        grid-template-columns: 1fr; /* มือถือแสดง 1 คอลัมน์ */
    }
    .bg-about-lines-2026 .col-img {padding-left: 0; padding-right: 0; }
    #about-value .value-title {
        min-height: auto;
    }
    #section-business-2026 .stat-box {
        flex: 0 0 100%;
    }
   #section-business-2026 .circle-card {
        width: 100%;
        max-width: 350px;
         margin-bottom: 53%;
    }

    #overview-section .quote-text h3 {
        font-size: 18px;
        padding: 0 30px;
    }
    #overview-section .business-cards-wrapper {
        flex-direction: column;
        align-items: center;
    }
    #overview-section .b-card {
        width: 100%;
        height: 280px;
    }
    .item-1,
    .item-2,
    .item-3,
    .item-4,
    .item-5 {
        grid-column: span 6;
    } /* เรียง 1 คอลัมน์ */
    .card-overlay {
        /* บนมือถือให้สีเข้มคลุมกว้างขึ้น เพื่อให้อ่านข้อความง่าย */
        background: linear-gradient(90deg, #021a32 0%, rgba(2, 26, 50, 0.95) 70%, transparent 100%);
    }
    .timeline-row {
        padding: 50px 20px; /* ลดระยะห่างบนมือถือ */
    }

    .timeline-item, 
    .timeline-row:nth-child(even) .timeline-item {
        flex-direction: column; /* เปลี่ยนให้เรียงจากบนลงล่าง */
        align-items: center;
        gap: 30px;
    }

    .timeline-divider {
        width: 100%;
        margin: -10px 0; /* ดันวงกลมให้ชิดกับเนื้อหา */
    }

    .timeline-img-box, 
    .timeline-text-box {
        width: 100%;
    }
    
    .date-label, .timeline-text-box h3{
        text-align: center; /* จัดข้อความให้อยู่ตรงกลางบนมือถือ */
    }

    .accent-line {
        margin: 0 auto; /* จัดเส้นสีส้มให้อยู่ตรงกลาง */
    }
    .grid-container {
        grid-template-columns: 1fr; /* ลดเหลือ 1 คอลัมน์เรียงต่อกัน */
    }
    .grid-container .card-content {
        width: 100%; /* ให้ข้อความกางเต็ม 100% บนมือถือ */
    }
    #section-business-2026 .stats-row {
        justify-content: flex-start;
    }
    #section-business-2026 .stat-box {
        flex: 0 0 40%;
        text-align: left;
        margin-bottom: 0;
    }
    #section-business-2026 .container {padding: 35px 20px;}
    #section-business-2026 .navi {
        margin-left: 0px;
    }
    #section-business-2026 .page-top {
        padding-top: 105px;
    }
    #section-business-2026 .stats-row {
        margin-bottom: 50%;
    }
    #section-business-2026 .circle-card-n1 {
        margin-left: 0;
    }
    #section-business-2026 .bg-head-business-2026 {
        background: url(../images/img_business/bg-business-2026-mb.jpg) no-repeat top center;
    }
    #section-business-2026 {padding-bottom: 875px;}
    #section-business-2026 .cards-row {
        top: 40%;
    }
    #section-business-2026 .cards-row {
    justify-content: flex-start;}
    #section-business-2026 .card-text h4 {font-size: 22px;}
    #section-business-2026 .highlight-orange {
        font-size: 18px !important;
    }
    #section-business-2026 .stats-row {gap: 5px;}
    
}
@media (max-width: 568px) {
    .topic-news {height: 145px;}
    .line-2 {-webkit-line-clamp: 15 !important;}
    
}
@media (max-width: 390px) {
.date-info {font-size: 11px;}
    #section-business-2026 .circle-card {
        margin-bottom: 56%;
    }
#section-business-2026 {padding-bottom: 1100px;}
#section-business-2026 .stats-row {margin-bottom: -10%;}
#section-business-2026 .cards-row {
        top: 37%;
    }
}