@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --primary-color: #1B4638;
    --secondary-color: #B2DF82;
    --black: #1C1E22;
    --grey: #717A88;
    --lightgrey: #8F98A9;
    --clight: #C0C0C0;

    --font-14: 14px;
    --font-16: 16px;
    --font-18: 18px;
    --font-20: 20px;
    --font-24: 24px;
    --font-26: 26px;

    --light: 300;
    --regular: 400;
    --medium: 600;
    --semi-bold: 600;

}

body {
    font-family: "Kanit", sans-serif;
}

.container {
    max-width: 1266px;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
}

.darkgreen {
    color: var(--primary-color);
}

.lightgreen {
    color: var(--secondary-color);
}

.black {
    color: var(--black);
}

.grey {
    color: var(--grey);
}

.lightgrey {
    color: var(--lightgrey);
}

.light {
    color: var(--clight);
}

.fs-14 {
    font-size: var(--font-14);
}

.fs-16 {
    font-size: var(--font-16);
}

.fs-18 {
    font-size: var(--font-18);
}

.fs-20 {
    font-size: var(--font-20);
}

.fs-24 {
    font-size: var(--font-24);
}

.fs-26 {
    font-size: var(--font-26);
}

.fs-46 {
    font-size: 46px;
}

.fw-light {
    font-weight: var(--light);
}

.fw-regular {
    font-weight: var(--regular);
}

.fw-medium {
    font-weight: var(--medium);
}

.fw-semibold {
    font-weight: var(--semi-bold);
}

/* .hamburger-button {
    display: none;
} */

.header__menus {
    padding-left: 30px;
}

.wrapper {
    margin: 0 auto;
    max-width: 1266px;
    position: relative;
    width: 100%;
}

.header__menu-item,
.header__menus {
    align-items: center;
    display: flex;
    height: 100%;
    align-items: center;
}

.header__menu-item {
    margin-right: 2.5rem;
}

.header .-has-children>span {
    margin-right: 0;
    width: 100%;
}

/* .header__menu-item {
    font-size: 16px;
} */

.banner-stock-frame.mobile {
    display: none;
}

.banner-image-frame {
    overflow: hidden;
    padding-bottom: 0;
    position: relative;
    width: 100vw;
    height: 700px;
}

.banner-image-frame>.image-background {
    /* clip-path: polygon(0 0, 100% 0, 100% 94%, 34% 94%, 30% 100%, 0 100%); */
    clip-path: polygon(0 0, 100% 0, 100% 94%, 40% 94%, 35% 100%, 0 100%);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url('../images/banner-image.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: -160px;
}

.banner-image-frame>.image-background::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(204, 218, 215, 0.6), rgba(204, 218, 215, 0));
}

.outter-frame {
    position: relative;
    max-width: 1266px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    /* border: 1px red solid; */
    z-index: 2;

}

.banner-title-frame {
    position: absolute;
    top: 40%;
    left: 5%;
    transform: translateY(-50%);
    text-align: center;
}

.banner-stock-frame {
    background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(15px);
    clip-path: polygon(0 0, 85% 0%, 100% 15%, 100% 100%, 0 100%, 0% 50%);
    position: absolute;
    top: 45%;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    padding: 40px 80px;
}

.text--header {
    font-size: 76px;
    color: var(--primary-color);
    font-weight: var(--medium);
}

.text--sub-header {
    font-size: 46px;
    color: var(--black);
    font-weight: var(--light);
}

.text--stock {
    font-size: 36px;
    color: var(--primary-color);
    font-weight: var(--regular);
}

.text--desc {
    font-size: var(--font-16);
    color: var(--grey);
    font-weight: var(--light);
}

.text--medium {
    font-size: var(--font-26);
    color: var(--black);
    font-weight: var(--regular);
}

.text--small {
    font-size: var(--font-14);
    color: var(--primary-color);
    font-weight: var(--regular);
}

.section--title {
    font-size: 56px;
    line-height: 140%;
    letter-spacing: normal;
}

.padtop-60 {
    padding-top: 60px;
}

.padbot-60 {
    padding-bottom: 60px;
}

.padtop-100 {
    padding-top: 100px;
}

.padbot-100 {
    padding-bottom: 100px;
}

.text-start {
    text-align: start;
}

.relative {
    position: relative;
}

.relative-z2 {
    position: relative;
    z-index: 2;
}

.stock-price-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 45px;
    margin-top: 25px;
    margin-bottom: 25px;
}

.grid-col-6 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}


.financial-background {
    position: relative;
    background-image: url('../images/financial-highlight-image.webp');
    background-size: 105%;
    background-position-x: center;
    background-position-y: -200px;
    background-repeat: no-repeat;
    /* clip-path: polygon(0 0, 30% 0, 34% 6%, 100% 6%, 100% 100%, 0 100%); */
    clip-path: polygon(0 0, 35% 0, 40% 6%, 100% 6%, 100% 100%, 0 100%);
    width: 100%;
    height: 770px;
    padding-top: 120px;
}

.financial-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 56, 43, 0.96);
    width: 100%;
    height: 100%;
}

.financial-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 60px;
    margin-inline: auto;
    width: 70%;
}

.financial-items {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.financial-chart {
    background-color: #FFF;
    padding: 40px 60px 25px;
    width: 100%;
    /* height: 495px; */
    position: absolute;
    bottom: -32%;
    left: 0;
    right: 0;
}

.height-70 {
    height: 70px;
}

.financial-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    width: 100%;
    height: 100%; /* Ensure container takes up full height */
}
.graph-width{
    width: 50%;
}
@media screen and (max-width: 991px) {
    .graph-width{
        width: 100%;
    }
}
#Gross_Profit, #Net_Profit {
    width: 100%;
    height: 100%;
    min-height: 400px; /* Ensure minimum height for proper rendering */
}

.flex-column {
    flex-direction: column;
}




.steel-animate {
    position: relative;
    width: 100%;
}
.steel-animate > img {
    height: 100%;
}
.object-top,
.object-bot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.object-top {
    animation: smooth-updown 2s infinite;
    transition: all 3s ease-in;
    z-index: 3;
}
.object-bot {
    animation: smooth-blur 2s infinite;
    transition: all 2s ease-in;
    z-index: 2;
}
@keyframes smooth-updown {
    0% {
        transform: translate(-50%, -50%);
    }
    50% {
        transform: translate(-50%, -60%);
    }
    100% {
        transform: translate(-50%, -50%);
    }
}

@keyframes smooth-blur {
    0% {
        filter: blur(0);
    }
    50% {
        filter: blur(15px);
    }
    100% {
        filter: blur(0);
    }
}

@media screen and (max-width: 991px) {
    .steel-animate {
        height: 500px;
    }
}
@media screen and (max-width: 575px) {
    .steel-animate {
        width: 350px;
        height: 350px;
    }
}








.calendar-news {
    background-color: #F3F7F5;
    width: 100%;
}

.calendar-news-position {
    padding-top: 340px;
}

.calendar-news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 60px;
}

.allnews {
    background-color: #FDFDFD;
    padding: 20px 40px;
}

.news-background {
    margin-bottom: 30px;
}

.news-background:last-child {
    margin-bottom: 0;
}

.news-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.news-content-frame {
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px #CCDAD7 solid;
}

.news-content-frame:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.news-content-frame.active {
    background-color: #E6EFED;
    clip-path: polygon(0px 0px, 100% 0px, 100% 72%, 94% 100%, 0px 100%);
    padding: 25px;
}

.datetime-flex {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.badge {
    background-color: #b2df82;
    clip-path: polygon(0% 0, 80% 0, 100% 25%, 100% 100%, 20% 100%, 0 80%);
    color: #004737;
    font-size: var(--font-14);
    font-weight: var(--regular);
    overflow: hidden;
    padding: 5px 10px;
}

.badge-danger {
    color: #FF4D00;
    background-color: #FFE8DE;
}

.marstart {
    margin-left: 15px;
}

.box-activity {
    background-color: #EAEEEE;
    padding: 20px 38px;
}

.activity-flex {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 10px;
}

.border-bottom {
    border-bottom: 1px #CCDAD7 solid;
    margin-bottom: 15px;
}

.button-flex {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}





.investor-info {
    width: 100%;
}

.investor-info-outter-grid {
    display: grid;
    grid-template-columns: 75% 25%;
    gap: 20px;
}

.infolist-inner-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 60px;
    margin-top: 50px;
}

.info-flex {
    display: flex;
    gap: 20px;
    width: 100%;
}

.info-image {
    background-color: #b2df82;
    clip-path: polygon(0 0, 80% 0, 100% 25%, 100% 100%, 20% 100%, 0 100%);
    width: 160px;
    height: 160px;
}

.info-image img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    object-position: center;
}

.info-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    width: 60%;
    padding-right: 35px;
}

.pdf-background {
    background-color: #E6EFED;
    clip-path: polygon(0px 0px, 80% 0, 100% 20%, 100% 100%, 0px 100%);
    width: 100%;
    /* padding: 50px 40px 30px 40px; */
    padding: 50px 0 30px 0;
    margin: 0 auto;
    display: ruby-text;
}

.pdf-content {
    text-align: center;
    margin-top: 20px;
}

.pdf-content.show-991 {
    display: none;
}

.pdf-button {
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px;
}

.button-item-line {
    background-color: var(--primary-color);
    height: 3.6rem;
    margin: 0 1.6rem;
    width: .1rem;
}




.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
}

.email-alert-background {
    position: relative;
    background-image: url('../images/email-alert-image.webp');
    background-size: 105%;
    background-position-y: -120px;
    height: 400px;
    clip-path: polygon(100% 0, 100% 42%, 95% 49%, 95% 100%, 0 100%, 0 0);
    overflow: hidden;
}

.email-alert-background::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 1));
}

/* .contact-ir-background {
    position: relative;
    background-image: url('../images/contact-ir-image.webp');
    background-size: 250%;
    background-position-x: -920px;
    background-position-y: -510px;
    background-repeat: no-repeat;
    height: 400px;
} */
.contact-ir-background {
    position: absolute;
    top: 0;
    left: -48px;
    z-index: -1;
    width: 105%;
    background-image: url(../images/contact-ir-image.webp);
    background-size: 240%;
    background-position-x: -900px;
    background-position-y: -510px;
    background-repeat: no-repeat;
    height: 400px;
}

.contact-ir-background::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(358deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.3));
    /* background: linear-gradient(330deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.09)); */
}

.button-block {
    margin-top: 30px;
}

.marbot-15 {
    margin-bottom: 15px;
}

.contact-list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.contact-content {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 2;
    width: 100%;
}

.flexx {
    display: flex;
    justify-content: space-between;
}

.email-alert-content {
    width: 390px;
}

.contact-ir-content {
    width: 560px;
}

@media screen and (max-width: 1399px) {
    .container {
        max-width: 1140px;
    }

    .banner-image-frame>.image-background {
        background-position: center;
    }

    .banner-stock-frame {
        right: 5%;
    }

    #gross-profit-chart,
    #net-profit-chart {
        width: 450px !important;
    }

    .financial-list-grid {
        width: 80%;
    }

    .email-alert-background {
        background-size: cover;
        background-position: center;
    }

    .contact-ir-background {
        background-position-x: -700px;
        left: -30px;
    }
}

@media screen and (min-width: 1281px) and (max-width: 1340px) {
    .header__menu-item {
        margin-right: 1.8rem;
    }
}

@media screen and (max-width: 1280px) {
    .header__menu-item {
        margin-right: 1rem;
    }
}

@media screen and (min-width:1180px) and (max-width: 1399px) {
    .header__menus {
        padding-left: 0;
    }

    .header {
        font-size: 14px;
    }
}

@media screen and (max-width: 1399px) {
    .wrapper {
        width: 85%;
    }
}

@media screen and (max-width: 1199px) {
    .container {
        max-width: 960px;
    }

    #gross-profit-chart,
    #net-profit-chart {
        width: 400px !important;
    }

    .section--title {
        font-size: 46px;
    }

    .financial-list-grid {
        width: 100%;
    }

    .w-md-150 {
        width: 150px;
    }

    .investor-info-outter-grid {
        grid-template-columns: 70% 28%;
    }

    .info-content {
        padding-right: 0;
    }

    .banner-stock-frame {
        top: 25%;
        left: 50%;
        transform: translateX(-50%);
    }

    .banner-title-frame {
        top: 4%;
        left: 50%;
        transform: translateX(-50%);
    }

    .text--header {
        font-size: 66px;
    }

    .text--sub-header {
        font-size: 36px;
    }

    .contact-ir-background {
        left: -25px;
        background-position-x: -500px;
        background-position-y: -250px;
    }

    .contact-ir-content {
        width: 430px;
    }

    .financial-background {
        background-position: center;
        background-size: cover;
    }
    br.hide-1199 {
        display: none;
    }
}

@media screen and (max-width: 1180px) {
    .hamburger-button {
        display: block;
    }
}

@media screen and (max-width: 1149px) {
    .banner-stock-frame {
        padding: 40px;
    }
}

@media screen and (max-width: 991px) {
    .container {
        max-width: 720px;
    }

    .w-md-150 {
        width: auto;
    }

    .stock-price-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }

    .text--medium {
        font-size: 24px;
    }

    #gross-profit-chart,
    #net-profit-chart {
        width: 100% !important;
    }

    .banner-stock-frame {
        width: 90%;
        top: 35%;
    }

    .banner-title-frame {
        width: 100%;
        top: 10%;
    }

    .financial-chart {
        height: auto;
        bottom: -90%;
    }

    .grid-col-6 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .financial-list-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .financial-chart-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .calendar-news-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .button-flex {
        order: 1;
        /* กำหนดให้ grid item ชื่อว่า "button-flex" มาแสดงก่อน */
        margin-bottom: 10px;
    }

    .allnews {
        order: 2;
        /* กำหนดให้ grid item ชื่อว่า "allnews" มาแสดงหลัง grid item ชื่อว่า "button-flex" */
    }

    .calendar-news-position {
        padding-top: 780px;
    }

    .investor-info-outter-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .contact-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .email-alert-background {
        height: 400px;
        clip-path: none;
    }

    .contact-ir-background {
        position: static;
        width: unset;
        background-size: cover;
        background-position: center;
        height: 400px;
    }

    .flexx {
        display: flex;
        flex-direction: column;
        gap: 200px;
    }

    .email-alert-content,
    .contact-ir-content {
        width: auto;
    }

    .pdf-background {
        margin-top: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 50px;
        padding: 50px;
    }

    .pdf-content.show-991 {
        display: block;
    }

    .pdf-content.hide-991 {
        display: none;
    }

    .news-background:last-child {
        padding-top: 30px;
    }
}

@media screen and (max-width: 767px) {
    .container {
        max-width: 540px;
    }

    .section--title {
        font-size: 36px;
        line-height: 130%;
    }

    .infolist-inner-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        row-gap: 40px;
    }

    .pdf-background {
        flex-direction: column;
        gap: 10px;
    }

    .financial-list-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 30px;
    }

    .financial-background {
        height: 820px;
    }

    .financial-chart {
        bottom: -100%;
    }

    .calendar-news-position {
        padding-top: 900px;
    }

    .banner-title-frame.desktop {
        display: none;
    }

    .banner-stock-frame.mobile {
        display: block;
        text-align: start;
        /* clip-path: none; */
        clip-path: polygon(0 0, 90% 0%, 100% 15%, 100% 100%, 0 100%, 0% 50%);
        width: 100%;
        top: 43%;
        padding: 30px;
    }

    .banner-image-frame {
        height: 500px;
    }

    .stock-wrapper {
        display: flex;
        justify-content: space-between;
    }

    .text--desc {
        margin-bottom: 5px;
    }

    .stock-price-grid {
        margin-bottom: 0;
    }

    .md-right {
        text-align: right;
    }

    .text--medium {
        font-size: 21px;
    }

    .text--stock {
        font-size: 32px;
    }

    .text--desc {
        font-size: var(--font-14);
    }

    .fs-18 {
        font-size: var(--font-16);
    }
}

@media screen and (max-width: 575px) {
    .container {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    .stock-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .box-activity {
        padding: 20px 22px;
    }

    .financial-background {
        height: 770px;
    }

    .text--header {
        font-size: 48px;
    }

    .text--sub-header {
        font-size: 24px;
    }

    .stock-price-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .banner-stock-frame.mobile {
        top: 25%;
        position: relative;
        height: 380px;
        text-align: center;
        width: 90%;
    }

    .banner-title-frame {
        top: 6%;
    }

    .sm-center {
        text-align: center;
    }

    .banner-image-frame {
        height: 600px;
    }

    .position-sm {
        position: absolute;
        bottom: 10%;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }

    .allnews {
        padding: 30px;
    }

    .news-flex {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .pdf-background {
        clip-path: polygon(0px 0px, 85% 0, 100% 15%, 100% 100%, 0px 100%);
    }

    .fs-16 {
        font-size: var(--font-14);
    }


    .fs-46 {
        font-size: 28px;
    }

    .padtop-100 {
        padding-top: 50px;
    }

    .padbot-100 {
        padding-bottom: 50px;
    }

    .financial-list-grid,
    .calendar-news-grid,
    .infolist-inner-grid {
        margin-top: 30px;
    }

    .calendar-news-position {
        padding-top: 840px;
    }

    .section--title {
        font-size: 34px;
    }

    .financial-background {
        padding-top: 100px;
    }
}

/* /////////////////////////////////////////// การกำกับดูแลกิจการ ////////////////////////////////////////////////// */
.section-header {
    padding-top: 100px;
    padding-bottom: 50px;
}

.page-background {
    background-image: url(../images/bg-page/bg-index.webp);
    background-position: 100% -7%;
    background-repeat: no-repeat;
}

.section-header-grid {
    display: grid;
    grid-template-columns: 41% 58%;
    gap: 20px;
}

.image-section {
    border-radius: 8px;
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%, 0 20%);
    overflow: hidden;
    padding-top: 43.969%;
    position: relative;
    width: 100%;
}

.image-section>img {
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.accordion-box {
    padding-top: 30px;
}

.accordion-width {
    width: 100%;
}

.accordion {
    border-bottom: .1rem solid #d1d6dd;
    cursor: pointer;
    padding: 30px 0;
    position: relative;
    transition: all .4s ease-in-out;
}

.accordion__header {
    padding-right: 5px;
}

.accordion__icons .line-1 {
    width: 20px;
    height: 2px;
    border-radius: 10px;
    background-color: var(--primary-color);
    opacity: 1;
    transition: all .3s ease-in-out;
}

.accordion__icons .line-2 {
    position: relative;
    top: -1px;
    width: 20px;
    height: 2px;
    transform: rotate(-90deg);
    transform-origin: center;
    border-radius: 10px;
    background-color: var(--primary-color);
    transition: all .3s ease-in-out;
}

.accordion--active .accordion__icons .line-1 {
    transform: rotate(90deg);
    opacity: 0;
}

.accordion--active .accordion__icons .line-2 {
    transform: rotate(0deg);
}

.accordion-detail {
    margin-top: 30px;
    /* padding-left: 30px; */
}

.bordered {
    border-top: 1px #CCDAD7 solid;
    margin-top: 30px;
}

.li-span-align {
    max-width: 150px;
    width: 100%;
    display: inline-block;
}

.margin-ul {
    margin-bottom: 60px;
}

.margin-li {
    margin-top: 0;
    margin-bottom: 15px;
}

.margin-ul:last-child,
.margin-li:last-child {
    margin-bottom: 0;
}

h3 {
    letter-spacing: 0;
    line-height: 130%;
}

ul.list-outside {
    list-style: outside !important;
}

ul.list-outside li::marker {
    color: var(--secondary-color);
}

@media screen and (max-width: 1023px) {
    .section-header {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .section-header-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 40px;
    }
}

@media screen and (max-width: 767px) {
    .image-section {
        clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%, 0 9%);
        padding-top: 133.843%;
    }
}

@media screen and (max-width: 575px) {
    .accordion__icons .line-1 {
        width: 15px;
    }

    .accordion__icons .line-2 {
        top: -2px;
        width: 15px;
    }

    .li-span-align {
        max-width: unset;
        width: auto;
        display: inline-block;
        margin-right: 10px;
    }
    .margin-ul {
        margin-bottom: 30px;
    }
}



/* /////////////////////////////////////////// สารจากประธาน ////////////////////////////////////////////////// */
.page-background-green {
    background-color: #00392c;
    position: relative;
    height: 500px;
}

.page-background-green::after {
    content: '';
    position: absolute;
    top: -5%;
    width: 100%;
    height: 100%;
    background-image: url(../images/bg-page/bg-index.webp);
    background-position: 100% -7%;
    background-repeat: no-repeat;
    opacity: 0.2;
}

.header-position {
    padding-top: 60px;
    position: relative;
    z-index: 3;
}

.single-service__video {
    clip-path: polygon(0 0, 93% 0, 100% 14%, 100% 100%, 8% 100%, 0 82%);
    overflow: hidden;
    width: 100%;
    position: absolute;
    z-index: 3;
}

.chairman-stmt {
    background-color: #FFF;
}

.chairman-stmt::after {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/bg-block/bg-impression-block.webp);
    background-repeat: no-repeat;
    background-position: left;
    opacity: 0.7;
}





/* /////////////////////////////////////////// ข้อมูลการเงิน ////////////////////////////////////////////////// */
.financial-info-chart {
    background-color: #f3f7f5;
    padding: 40px 60px 25px;
    width: 100%;
    /* height: 495px; */
    position: absolute;
    top: 110%;
    left: 0;
    right: 0;
}

.page-background-green.large {
    height: 700px;
}

.financial-table-position {
    padding-top: 345px;
}

.financial-page rect.highcharts-background {
    fill: #f3f7f5;
}

table {
    width: 100%;
    border-collapse: collapse;
    color: var(--black);
    font-size: var(--font-16);

}

th,
td {
    padding: 15px;
    text-align: left;
    border-bottom: .1rem solid #d1d6dd;
}

tr:hover {
    background-color: #fbfbfb;
}

tr.table-head-background {
    background-color: #004737;
    color: #FFF;
    font-size: var(--font-18);
}

tr.table-title-background {
    background-color: #f3f7f5;
    color: var(--primary-color);
    font-size: var(--font-18);
    font-weight: var(--medium);
}

tr.items-style td:nth-child(1) {
    color: var(--grey);
}

@media screen and (max-width: 1199px) {
    .financial-table-position {
        padding-top: 315px;
    }
}

@media screen and (max-width: 991px) {
    .financial-table-position {
        padding-top: 750px;
    }

    .financial-info-chart {
        height: auto;
    }
}

@media screen and (max-width: 767px) {
    .financial-table-position {
        padding-top: 800px;
    }

    .page-background-green.large {
        height: 860px;
    }

    .table-responsive {
        overflow-x: auto;
    }

    table {
        white-space: nowrap;
    }
}

@media screen and (max-width: 575px) {
    .financial-table-position {
        padding-top: 700px;
    }

    .financial-info-chart {
        padding: 40px 20px;
    }

    table {
        width: 700px;
    }
}





/* /////////////////////////////////////////// คำอธิบายและการวิเคราะห์ ////////////////////////////////////////////////// */
.mda-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.custom-card {
    background-color: #FFF;
    align-items: flex-start;
    border-bottom: .1rem solid #d1d6dd;
    display: grid;
    gap: 1.6rem;
    grid-template-columns: 9.3rem 1fr;
    padding: 2.4rem 0;
}

.custom-card:nth-child(1) {
    padding-top: 0;
}

.custom-card-icon {
    overflow: hidden;
    padding-top: 100%;
    position: relative;
    width: 100%;
}

.custom-card-icon>img {
    height: 100%;
    left: 0;
    object-fit: contain;
    position: absolute;
    top: 0;
    width: 100%;
}

.card-overflow {
    -ms-overflow-style: none;
    height: 84.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* width: 100%; */
}

.card-overflow:before {
    background: linear-gradient(0deg, hsla(0, 0%, 100%, 0), #fff);
    content: "";
    height: 21.7rem;
    pointer-events: none;
    position: absolute;
    top: -.5rem;
    width: 100%;
    z-index: 2;
}

.card-overflow:after {
    background: linear-gradient(0deg, #fff, hsla(0, 0%, 100%, 0));
    bottom: 0;
    content: "";
    height: 12.4rem;
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: 1;
}

.custom-card:first-child {
    margin-top: 16rem;
}

.custom-card:last-child {
    margin-bottom: 7.3rem;
}

.mda-image {
    width: 90%;
    height: 450px;
    background-color: #CCDAD7;
    clip-path: polygon(20% 0, 100% 0, 100% 87%, 88% 100%, 0 100%, 0 11%);
    margin-top: 50px;
    object-fit: cover;
}

.mda-image img {
    width: 100%;
    height: 100%;
}

.mda-content {
    margin-top: 50px;
    text-align: center;
    width: 90%;
}

@media screen and (max-width: 991px) {
    .mda-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 50px;
    }

    .card-overflow {
        overflow-x: auto;
        overflow-y: unset;
        display: flex;
        column-gap: 20px;
    }

    .custom-card {
        min-width: 400px;
        height: max-content;
        background-color: #f3f7f5;
        border: none;
        /* border: .1rem solid #d1d6dd; */
        border-radius: 1.6rem;
        padding: 30px 20px;
    }

    .custom-card:first-child {
        margin-top: 0;
        padding-top: 30px;
    }

    .custom-card:last-child {
        margin-bottom: 0;
    }

    .card-overflow {
        height: auto;
    }

    .card-overflow:before,
    .card-overflow:after {
        display: none;
    }

    .impression {
        background-image: none;
    }

    .mda-image,
    .mda-content {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .impression {
        padding: 0;
    }
}

@media screen and (max-width: 575px) {
    .mda-image {
        height: 250px;
    }

    .custom-card {
        min-width: 372px;
    }
}



/* /////////////////////////////////////////// แบบฟอร์ม 56-1 One Report ////////////////////////////////////////////////// */
.onereport-box {
    width: 90%;
    margin-top: 50px;
}

.onereport-content {
    margin-top: 50px;
    text-align: center;
}

.onereport-content.show-991 {
    display: none;
}

table#dividend th,
table#dividend td {
    text-align: center;
    padding: 15px 10px;
}


@media screen and (max-width: 991px) {
    .onereport-content.show-991 {
        display: block;
    }

    .onereport-content.hide-991 {
        display: none;
    }

    .onereport-box {
        width: 100%;
    }
}





/* /////////////////////////////////////////// ประวัติองค์กร ////////////////////////////////////////////////// */
.timeline {
    margin-top: 0;
}

.timeline__heading {
    margin-bottom: -12%;
    max-width: 40%;
}

.timeline__container {
    margin-left: auto;
    max-width: 95rem;
    overflow: hidden;
    padding-bottom: 0;
    position: relative;
    margin-top: 0 !important;
}

.timeline .timeline-item__left:not(:has(:empty))~.timeline-item__right {
    padding-right: 0;
}

.timeline .timeline-item__left {
    padding-right: 1.165rem;
    width: 50%;
}

.timeline__scrollbar-track {
    border-right: .1rem solid #ccdad7;
    height: calc(100% - 6rem);
    left: 30%;
    position: absolute;
    top: 0;
    z-index: 1;
}


.timeline .timeline-item__right {
    height: fit-content;
    padding-left: 4.5rem;
    position: relative;
    width: 100%;
}

.timeline .timeline-item__years {
    margin-bottom: 15px;
}

.timeline__scroll {
    margin-right: -1rem;
    max-height: 83rem;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 2rem;
}

@media screen and (max-width: 1399px) {
    .timeline .timeline-item:first-child {
        margin-top: 5.5rem;
    }

    .timeline__heading {
        margin-bottom: -20%;
        max-width: 40%;
    }

    .timeline__container {
        max-width: 90rem;
    }
}

@media screen and (max-width: 1199px) {
    .timeline__container {
        max-width: 75rem;
    }

    .text--sub-header.only {
        font-size: 46px;
    }
}

@media screen and (max-width: 991px) {
    .timeline__heading {
        margin-bottom: 0;
        max-width: 100%;
    }

    .timeline__container {
        margin-top: 60px !important;
    }

    .timeline__scroll {
        padding-right: 3rem;
    }

    .timeline__scrollbar-track {
        left: 10%;
    }

    .timeline .timeline-item__left {
        padding-right: 0;
        width: 0;
    }

    .timeline .timeline-item__right {
        padding-left: 12rem;
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .timeline .timeline-item__right {
        width: 85%;
        padding-left: 6rem;
    }

    .timeline__scroll {
        padding-right: 0;
    }

    .timeline__scrollbar-track {
        left: 1%;
    }

    .text--sub-header.only {
        font-size: 36px;
    }

    .timeline .timeline-item {
        margin-bottom: 50px;
    }
}

@media screen and (max-width: 575px) {
    .timeline__container {
        margin-top: 50px !important;
    }

    .text--sub-header.only {
        font-size: 34px;
    }
}



/* /////////////////////////////////////////// เครื่องคำนวณการลงทุน ////////////////////////////////////////////////// */
.invest-cal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

input[type=date] {
    font-family: 'Kanit';
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    background-color: #fff;
    border: .1rem solid #a4adbb;
    border-radius: .5rem;
    color: #1c1e22;
    font-size: 1.6rem;
    height: 4.8rem;
    outline: none;
    padding: 1rem 1.6rem;
    transition: border-color 25ms ease-in-out;
    width: 100%;
}

.form-content {
    display: flex;
    flex-direction: column;
    gap: 50px;
    margin-top: 25px;
}

.input-date-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.item-label {
    display: inline-block;
    padding-bottom: 10px;
}

.wpcf7-list-item {
    align-items: center;
    display: inline-flex;
    flex-direction: row-reverse;
    margin: 0;
    padding-bottom: 10px;
    gap: 10px;
}

.stock-type-radio {
    display: inline-block;
    margin-top: 25px;
}

.radio-flex {
    display: flex;
    gap: 40px;
}

.returns-content {
    margin-top: 25px;
}

tr.border-bot {
    border-bottom: 3px var(--primary-color) solid;
    background-color: #f3f7f5;
    /* background-color: #E6EFED; */
}

table#calculator td {
    padding: 23px 15px;
}

.text-right {
    text-align: right;
}

.text--calculator {
    font-size: 36px;
    color: var(--primary-color);
    font-weight: var(--regular);
}

#chart-calculator {
    width: 100% !important;
    max-width: 100% !important;
    height: 500px;
}

.chart-calculator {
    border: 1px #DEE2E6 solid;
    border-radius: 10px;
}

.chart-calculator canvas {
    top: 0 !important;
}

.echarts-tooltip {
    font-family: 'Kanit';
    padding: 10px;
}

.echarts-tooltip__header {
    font-size: var(--font-26);
    color: var(--primary-color);
    font-weight: var(--medium);
    margin-bottom: 15px;
}

.echarts-tooltip__volume {
    font-size: var(--font-20);
    font-weight: var(--medium);
    color: var(--primary-color);
    margin-bottom: 15px;
}

.echarts-tooltip__last-updated {
    font-size: var(--font-16);
    font-weight: var(--light);
    color: var(--grey);
}

@media screen and (max-width: 1199px) {
    #chart-calculator {
        width: 100%;
        max-width: 100%;
        height: 500px;
    }
}

@media screen and (max-width: 991px) {
    .invest-cal-grid {
        display: grid;
        grid-template-columns: 100%;
        gap: 50px;
    }

    .input-date-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
}

@media screen and (max-width: 767px) {
    .text--calculator {
        font-size: 32px;
    }
}

@media screen and (max-width: 575px) {
    table#calculator {
        width: 100%;
    }

    .text--calculator {
        font-size: 28px;
    }

    .chart-calculator canvas {
        left: 20px !important;
    }
}




/* /////////////////////////////////////////// ติดต่อนักลงทุน ////////////////////////////////////////////////// */
.page-background-2 {
    background-image: url(../images/bg-page/bg-career.webp);
    background-position: 100% -7%;
    background-repeat: no-repeat;
}

.ir-contact-grid {
    display: grid;
    grid-template-columns: 45% 50%;
    gap: 5%;
}

.contact-detail-flex {
    display: grid;
    grid-template-columns: 30% 70%;
    margin-bottom: 8px;
}

.marbot-30 {
    margin-bottom: 30px;
}

.paragraph--link {
    color: var(--black);
    font-weight: var(--light);
    transition: all 0.4s ease-in-out;
}

.paragraph--link:hover {
    color: var(--primary-color);
    /* transform: skewX(2deg);
    letter-spacing: .3px;
    transform-origin: left top; */
}

@media screen and (max-width: 991px) {
    .ir-contact-grid {
        display: grid;
        grid-template-columns: 100%;
        gap: 20px;
    }
}

@media screen and (max-width: 575px) {
    .section-header.contact {
        padding-bottom: 20px;
    }

    .fs-26 {
        font-size: 24px;
    }
}


/* /////////////////////////////////////////// รับข่าวสารทางอีเมล ////////////////////////////////////////////////// */
.email-alert-grid {
    display: grid;
    grid-template-columns: 45% 50%;
    gap: 5%;
}

.email-image {
    width: 100%;
    height: 520px;
    clip-path: polygon(0 0, 85% 0, 100% 12%, 100% 100%, 35% 100%, 27% 92%, 0 92%);
}

.email-image img {
    height: 520px;
    object-fit: cover;
}

.email-detail {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 30px;
}

input[type=checkbox] {
    accent-color: #000;
    height: 2.6rem;
    width: 4.6rem;
}

.wpcf7-list-item-2 {
    align-items: unset;
    display: inline-flex;
    flex-direction: row-reverse;
    margin: 0;
    gap: 15px;
}

.primary--link {
    color: var(--primary-color);
    transition: all 0.4s ease-in-out;
    text-decoration: none;
}
.primary--link:hover {
    color: var(--secondary-color);
}

@media screen and (max-width: 991px) {
    .email-alert-grid {
        display: grid;
        grid-template-columns: 100%;
        gap: 20px;
    }
    .email-detail {
        margin-top: 50px;
    }
}


/* /////////////////////////////////////////// 404 ////////////////////////////////////////////////// */
.error-content {
    margin: 12.5rem 0;
    text-align: center;
}



/* /////////////////////////////////////////// นโยบายความเป้นส่วนตัว ////////////////////////////////////////////////// */
@media screen and (max-width: 991px) {
    br.hide-991 {
        display: none;
    }
}


/* /////////////////////////////////////////// read detail ////////////////////////////////////////////////// */
.read-detail-background {
    background-image: url('../images/read-detail-nav-image.png');
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100px;
    padding: 20px 30px;
    position: fixed;
}
.read-detail-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.desc-header {
    font-size: 14px;
    font-weight: var(--light);
    color: #FFF;
    text-align: right;
}

.read-detail-content {
    padding-top: 100px;
}

.read-detail--title {
    font-size: 46px;
    font-weight: var(--light);
    color: var(--primary-color);
}

.read-detail--image {
    margin-top: 50px;
}
.read-detail--desc {
    margin-top: 50px;
}
.read-detail--desc > p {
    text-indent: 5rem;
}

@media screen and (max-width: 1199px) {
    .read-detail--title {
        font-size: 36px;
    }
}
@media screen and (max-width: 767px) {
    .read-detail-background {
        height: auto;
    }
    .logo-header {
        width: 260px;
    }
    .desc-header {
        font-size: 13px;
    }
    .read-detail-content {
        padding-top: 70px;
    }
    br.hide-767 {
        display: none;
    }
}
@media screen and (max-width: 575px) {
    .read-detail-background {
        padding: 20px;
    }
    .read-detail--title {
        font-size: 24px;
    }
    .read-detail--image,
    .read-detail--desc {
        margin-top: 30px;
    }
    .desc-header {
        display: none;
    }
    .read-detail-flex {
        justify-content: center;
    }
}