body.modal-open {
    overflow: hidden !important;
}

.mainLayout {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    overscroll-behavior: none;

    display: flex;
    align-items: center;
    justify-content: center;
}

.contentMainLayout {
    position: relative;
    width: 100%;
    max-width: 991px;
    min-height: 100dvh;
    padding-top: 40px;

    background: url("../images/main.png");
    background-position: top;
    background-size: cover;
}

.modal {
    overscroll-behavior: contain;
}

@font-face {
    font-family: "LINESeedSansTH";
    src: url("../font/LINESeedSansTH_Th.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "LINESeedSansTH";
    src: url("../font/LINESeedSansTH_Rg.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "LINESeedSansTH";
    src: url("../font/LINESeedSansTH_Bd.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "LINESeedSansTH";
    src: url("../font/LINESeedSansTH_XBd.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "LINESeedSansTH";
    src: url("../font/LINESeedSansTH_He.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: "DB_Helvethaica_X";
    src: url("../font/DB-Helvethaica-X-Med.woff") format("truetype");
    font-weight: 800;
    /* Bold */
    font-style: normal;
}

@font-face {
    font-family: "Teenage";
    src: url("../font/Teenage/PSL219pro.ttf") format("truetype");
    font-weight: 600;
    /* Bold */
    font-style: normal;
}

@font-face {
    font-family: "Teenage";
    src: url("../font/Teenage/PSL221pro.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

.font-LINESeedSansTH {
    font-family: "LINESeedSansTH", sans-serif;
}

.font-DB_Helvethaica_X {
    font-family: "DB_Helvethaica_X", sans-serif;
}

.font-Teenage {
    font-family: "Teenage", sans-serif;
}

.ci-primary {
    color: #001d5d;
}

.ci-primary-500 {
    color: #5193ff;
}

.ci-text {
    color: #003173;
}

.ci-warning {
    color: #fab93c;
}

/* BANNER  */
.bannerMainLayout {
    position: relative;
    width: 100%;
    min-height: 1200px;
    padding: 50px 20px;

    background: url("../images/banner.png");
    background-position: top;
    background-size: cover;

    display: flex;
    justify-content: center;
}

.bannerFooter {
    position: absolute;
    z-index: 1;
    bottom: 0px;
    left: 0px;

    width: 100%;
    height: 200px;

    background: linear-gradient(0deg, #5c2a1a 0%, #99999900 100%);
}

.bannerFooter2 {
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 200px;

    background: linear-gradient(180deg, #5c2a1a 20%, #99999900 100%);
}

.sdfsd {
    position: relative;
    height: 100dvh;
}

.bannerTitle {
    position: relative;
    width: 100%;
    max-width: 650px;
    height: 100%;
}

.bannerTitle_object1 {
    position: absolute;
    z-index: 1;
    top: 33px;
    left: -38px;

    width: 120px;
    height: 120px;
    opacity: 1;

    filter: drop-shadow(2px 4px 6px #ffdf74);
}

.bannerTitle_object2 {
    position: absolute;
    z-index: 1;
    bottom: 165px;
    left: 147px;

    width: 80px;
    height: 80px;
    opacity: 1;

    filter: drop-shadow(2px 4px 6px #ffdf74);
}

.bannerTitle_object3 {
    position: absolute;
    z-index: 1;
    top: 30px;
    right: 280px;

    width: 80px;
    height: 80px;
    opacity: 1;

    filter: drop-shadow(2px 4px 6px #ffdf74);
}

.bannerTitle_object4 {
    position: absolute;
    z-index: 1;
    bottom: 130px;
    right: 50px;

    width: 80px;
    height: 80px;
    opacity: 1;

    filter: drop-shadow(2px 4px 6px #ffdf74);
}

.contentStoryMainLayout {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    padding: 20px;
    padding-bottom: 30px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.contentCardMainLayout {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 750px;
    min-height: 600px;
    border-radius: 20px;

    background: #341103;
    box-shadow: 1px 1px 1px #000;

    display: flex;
    flex-direction: column;
    gap: 10px;
    /* overflow: hidden; */

    color: #fff;
}

.contentCardTopicLayout {
    width: 100%;
    height: 120px;
    padding: 10px 30px;
    border-radius: 22px 22px 0px 0px;
    overflow: hidden;

    background: url("../images/topic.png");
    background-position: top;
    background-size: cover;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    font-size: clamp(15px, 1.2vw + 12px, 22px);
    line-height: clamp(22px, 1.4vw + 14px, 32px);
    letter-spacing: 0.5px;
    font-weight: 700;
    font-family: "LINESeedSansTH", sans-serif;

    border: 5px solid #2e0e01;
}

.contentCardTopicLayout span {
    color: #fff;
    text-shadow:
        -2px -2px 0 #2e0e01,
        2px -2px 0 #2e0e01,
        -2px 2px 0 #2e0e01,
        2px 2px 0 #2e0e01,
        3px 3px 2px #2e0e01d2;
}

.contentCardDetailMainLayout {
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contentCardDetailLayout {
    width: 100%;
    height: 795px;
    padding: 20px 50px;
    padding-bottom: 20px;
    border-radius: 20px;

    background: url("../images/content_bg.png");
    background-position: top;
    background-size: cover;

    color: #000;

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

.contentCardDetailLayout_2 {
    width: 100%;
    height: 495px;
    padding: 70px 50px;
    border-radius: 20px;

    background: url("../images/content_bg_2.png");
    background-position: top;
    background-size: cover;

    color: #000;

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

.contentCardImg {
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    border: 2px solid #341103;
    box-shadow: 1px 1px 10px #341103c9;
}

.contentCardImg img {
    transform: scale(1.5);
}

.contentCardImg_2 {
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    border: 2px solid #341103;
    box-shadow: 1px 1px 10px #341103c9;
}


/* TABLE  */
.custom-table-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;

    border: 2px solid #d8c6b5;
    background: #fff;
    box-shadow: 1px 1px 10px #34110380;

    -webkit-overflow-scrolling: touch;
}

.custom-item-table {
    table-layout: fixed;
    margin-bottom: 0;
}

/* scrollbar */
.custom-table-wrapper::-webkit-scrollbar {
    height: 8px;
}

.custom-table-wrapper::-webkit-scrollbar-track {
    background: #e7ddd3;
}

.custom-table-wrapper::-webkit-scrollbar-thumb {
    background: #8e7156;
    border-radius: 999px;
}

.custom-item-table thead th {
    background: #8e7156;
    color: #fff;
    text-align: center;

    font-family: "LINESeedSansTH", sans-serif;
    font-size: 18px;
    font-weight: 700;

    padding: 15px 10px;
    border-right: 2px solid #cdb8a5;

    white-space: nowrap;
}

.custom-item-table thead th:last-child {
    border-right: none;
}

.custom-item-table tbody td {
    border-top: 2px solid #d8c6b5;
    border-right: 2px solid #d8c6b5;
    vertical-align: middle;
    background: #f7f7f7;
}

.custom-item-table tbody td:last-child {
    border-right: none;
}

.item-col {
    width: 230px;
    min-width: 230px;
}


.item-image {
    width: 60px;
}


.item-name {
    font-family: "LINESeedSansTH", sans-serif;

    font-size: 14px;
    line-height: 17px;
    font-weight: 700;
    color: #4f3525;
}

.item-description {
    color: #4f3525;

    font-family: "LINESeedSansTH", sans-serif;
    font-weight: 600;
    font-size: 16px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    min-width: 300px;
    padding: 20px;
}

.contentCardObject {
    position: absolute;
    z-index: 4;
    top: -50px;
    right: 50px;

    width: 100px;
}

.contentCardObject_2 {
    position: absolute;
    z-index: 4;
    bottom: 0px;
    right: -40px;

    width: 100px;
}

.contentCardObject_3 {
    position: absolute;
    z-index: 4;
    top: -20px;
    left: 30px;

    width: 60px;
}

.contentCardObject_4 {
    position: absolute;
    z-index: 4;
    top: -20px;
    right: 0px;

    width: 80px;
}

.contentCardObject_5 {
    position: absolute;
    z-index: 4;
    bottom: 0px;
    left: -20px;

    width: 80px;
}