/* ================= Color ================= */
:root {
    /* https://www.w3schools.com/colors/colors_picker.asp */
    /* === Change Color Here === */
    --color-first: #003479;
    --color-first-rgb: 0, 52, 121;
    --color-second: #e6f1ff;
    --color-second-rgb: 230, 241, 255;
    --color-third: #0dc0e9;
    --color-third-rgb: 13, 192, 233;
    --color-fourth: #e6f1ff;
    --color-fourth-rgb: 230, 241, 255;
    --color-fifth: #003479;
    --color-fifth-rgb: 0, 52, 121;


    /* === Change Color image footer === */
    /* นำสีที่ต้องการไปวางที่ลิงค์ด้านล่าง เช่น #000000 แล้วกดปุ่ม Get Filter  */
    /* ให้ดูค่าที่ Loss: จะต้องมีค่าน้อยกว่า 0.5 ถ้าค่าที่ได้ยังไม่น้อยกว่าให้กดปุ่ม Get Filter ใหม่จนกว่าจะได้ค่าที่ต้องการ */
    /* https://angel-rs.github.io/css-color-filter-generator/ */
    --color-img-footer: brightness(0) saturate(100%) invert(45%) sepia(22%) saturate(5546%) hue-rotate(359deg) brightness(99%) contrast(109%);

    /* === Fixed Color === */
    --color-light: #ffffff;
    --color-light-rgb: 255, 255, 255;
    --color-dark: #000000;
    --color-dark-rgb: 0, 0, 0;

    --color-black1: #4d4d4d;
    --color-black1-rgb: 77, 77, 77;
    --color-black2: #404040;
    --color-black2-rgb: 64, 64, 64;
    --color-black3: #333333;
    --color-black3-rgb: 51, 51, 51;
    --color-black4: #262626;
    --color-black4-rgb: 38, 38, 38;
    --color-black5: #1a1a1a;
    --color-black5-rgb: 26, 26, 26;
    --color-black6: #0d0d0d;
    --color-black6-rgb: 13, 13, 13;

    --color-txtg: #4d4c4c;
    --color-txtg-rgb: 77, 76, 76;
    --color-txtg1: #cdcbcb;
    --color-txtg1-rgb: 205, 203, 203;
    --color-txtg2: #b3b2b2;
    --color-txtg2-rgb: 179, 178, 178;
    --color-txtg3: #9a9898;
    --color-txtg3-rgb: 154, 152, 152;
    --color-txtg4: #817e7e;
    --color-txtg4-rgb: 129, 126, 126;
    --color-txtg5: #676565;
    --color-txtg5-rgb: 103, 101, 101;
    --color-txtg6: #4d4c4c;
    --color-txtg6-rgb: 177, 76, 76;

    --color-grey: #f5f5f5;
    --color-grey-rgb: 245, 245, 245;
    --color-grey1: #f9f9f9;
    --color-grey1-rgb: 249, 249, 249;
    --color-grey2: #f2f2f2;
    --color-grey2-rgb: 242, 242, 242;
    --color-grey3: #e6e6e6;
    --color-grey3-rgb: 230, 230, 230;
    --color-grey4: #d9d9d9;
    --color-grey4-rgb: 217, 217, 217;
    --color-grey5: #cccccc;
    --color-grey5-rgb: 204, 204, 204;
    --color-grey6: #b3b3b3;
    --color-grey6-rgb: 204, 204, 204;

    --color-green: #259b24;
    --color-green-rgb: 37, 155, 36;
    --color-green1: #adecac;
    --color-green1-rgb: 173, 236, 172;
    --color-green2: #85e283;
    --color-green2-rgb: 133, 226, 131;
    --color-green3: #5cd85a;
    --color-green3-rgb: 92, 216, 90;
    --color-green4: #33cf30;
    --color-green4-rgb: 51, 207, 48;
    --color-green5: #2eba2c;
    --color-green5-rgb: 46, 186, 44;
    --color-green6: #1f7c1d;
    --color-green6-rgb: 431, 124, 29;

    --color-red: #ff0000;
    --color-red-rgb: 255, 0, 0;
    --color-red1: #ffcccc;
    --color-red1-rgb: 255, 204, 204;
    --color-red2: #ff8080;
    --color-red2-rgb: 255, 128, 128;
    --color-red3: #ff4d4d;
    --color-red3-rgb: 255, 77, 77;
    --color-red4: #f20d0d;
    --color-red4-rgb: 242, 13, 13;
    --color-red5: #e51c23;
    --color-red5-rgb: 229, 28, 35;
    --color-red6: #cc0000;
    --color-red6-rgb: 204, 0, 0;
    --color-red7: #800000;
    --color-red7-rgb: 128, 0, 0;

    --color-orange: #ff5722;
    --color-orange-rgb: 255, 87, 34;
    --color-orange1: #ffc3b3;
    --color-orange1-rgb: 255, 195, 179;
    --color-orange2: #ffaf99;
    --color-orange2-rgb: 255, 175, 153;
    --color-orange3: #ff9d80;
    --color-orange3-rgb: 255, 157, 128;
    --color-orange4: #ff8a66;
    --color-orange4-rgb: 255, 138, 102;
    --color-orange5: #ff764d;
    --color-orange5-rgb: 255, 118, 77;
    --color-orange6: #ff3c00;
    --color-orange6-rgb: 255, 60, 0;

    --color-yellow: #ffc107;
    --color-yellow-rgb: 255, 193, 7;
    --color-yellow1: #fff2cc;
    --color-yellow1-rgb: 255, 242, 204;
    --color-yellow2: #ffe699;
    --color-yellow2-rgb: 255, 230, 153;
    --color-yellow3: #ffd966;
    --color-yellow3-rgb: 255, 217, 102;
    --color-yellow4: #ffd24d;
    --color-yellow4-rgb: 255, 210, 77;
    --color-yellow5: #ffcc33;
    --color-yellow5-rgb: 255, 204, 51;
    --color-yellow6: #e6ac00;
    --color-yellow6-rgb: 230, 172, 0;

    --color-blue: #0000e6;
    --color-blue-rgb: 0, 0, 230;
    --color-blue1: #8080ff;
    --color-blue1-rgb: 128, 128, 255;
    --color-blue2: #6666ff;
    --color-blue2-rgb: 102, 102, 255;
    --color-blue3: #4d4dff;
    --color-blue3-rgb: 77, 77, 255;
    --color-blue4: #3333ff;
    --color-blue4-rgb: 51, 51, 255;
    --color-blue5: #1a1aff;
    --color-blue5-rgb: 26, 26, 255;
    --color-blue6: #0000b3;
    --color-blue6-rgb: 0, 0, 179;

    --color-brown: #795548;
    --color-brown-rgb: 121, 85, 72;
    --color-brown1: #e2d4cf;
    --color-brown1-rgb: 226, 212, 207;
    --color-brown2: #cfb7af;
    --color-brown2-rgb: 207, 183, 175;
    --color-brown3: #bc9a8f;
    --color-brown3-rgb: 188, 154, 143;
    --color-brown4: #a97d70;
    --color-brown4-rgb: 169, 125, 112;
    --color-brown5: #8f6556;
    --color-brown5-rgb: 143, 101, 86;
    --color-brown6: #604439;
    --color-brown6-rgb: 96, 68, 57;

    --color-fb: #4267b2;
    --color-fb-rgb: 66, 103, 178;
    --color-msg: #0099ff;
    --color-msg-rgb: 0, 153, 255;
    --color-ig: #e4405f;
    --color-ig-rgb: 228, 64, 95;
    --color-line: #00c300;
    --color-line-rgb: 0, 195, 0;
    --color-twt: #1da1f2;
    --color-twt-rgb: 29, 161, 242;
    --color-tt: #000000;
    --color-tt-rgb: 0, 0, 0;
    --color-wa: #25d366;
    --color-wa-rgb: 37, 211, 102;
    --color-yt: #cd201f;
    --color-yt-rgb: 205, 32, 31;
    --color-email: #c71610;
    --color-email-rgb: 199, 22, 16;
    --color-pdf: #f40f02;
    --color-pdf-rgb: 244, 15, 2;
    --color-word: #2b579a;
    --color-word-rgb: 43, 87, 154;

    --color-icon-yl: #ffb61a;
    --color-icon-yl-rgb: 255, 182, 26;

    --color-bg-yl: #e69d00;
    --color-bg-yl-rgb: 230, 157, 0;

    --color-bg-ft: #292929;
    --color-bg-ft-rgb: 41, 41, 41;

    --color-stbk: #292929;
    --color-stbk-rgb: 41, 41, 41;

    --color-bank-ttb1: #0f50ec;
    --color-bank-ttb1-rgb: 15, 80, 236;
    --color-bank-ttb2: #f48a31;
    --color-bank-ttb2-rgb: 244, 138, 49;
    --color-bank-ttb3: #022d61;
    --color-bank-ttb3-rgb: 2, 45, 97;
    --color-bank-asik: #004ea2;
    --color-bank-asik-rgb: 0, 78, 162;
    --color-bank-ktb: #01a6e6;
    --color-bank-ktb-rgb: 1, 166, 230;
    --color-bank-bbl: #1f4396;
    --color-bank-bbl-rgb: 31, 67, 150;
    --color-bank-kbank: #00a94f;
    --color-bank-kbank-rgb: 0, 169, 79;
    --color-bank-scb: #4b2885;
    --color-bank-scb-rgb: 75, 40, 133;
    --color-bank-bay: #ffd229;
    --color-bank-bay-rgb: 255, 210, 41;

    --color-bank-cimb: #76111c;
    --color-bank-cimb-rgb: 118, 17, 28;
    --color-bank-uob: #06377b;
    --color-bank-uob-rgb: 6, 55, 123;
    --color-bank-gsb: #ec098d;
    --color-bank-gsb-rgb: 236, 9, 141;

    --color-bank-lhbank: #6d7071;
    --color-bank-lhbank-rgb: 109, 112, 113;
    --color-bank-lhbank: #888a8c;
    --color-bank-lhbank-rgb: 136, 138, 140;
    --color-bank-lhbank: #ced629;
    --color-bank-lhbank-rgb: 206, 214, 41;
    --color-bank-lhbank: #47b9c0;
    --color-bank-lhbank-rgb: 71, 185, 192;
    --color-bank-lhbank: #8b3f92;
    --color-bank-lhbank-rgb: 139, 63, 146;
    --color-bank-lhbank: #ed8068;
    --color-bank-lhbank-rgb: 237, 128, 104;
    --color-bank-lhbank: #0080be;
    --color-bank-lhbank-rgb: 0, 128, 190;
    --color-bank-lhbank: #f5bf0e;
    --color-bank-lhbank-rgb: 245, 191, 14;
    --color-bank-lhbank: #94988d;
    --color-bank-lhbank-rgb: 148, 152, 141;
    --color-bank-lhbank: #f08d1d;
    --color-bank-lhbank-rgb: 240, 141, 29;
}


/* =============================================================== */
/* ==================== 2025-09-09 API Connex ==================== */
/* =============================================================== */
.dpf-cnapi-set {
    display: flex;
}
.box-connex-api-v {
    position: relative;
    width: 100%;
    height: auto;
    margin: auto;
}

.title-name-cnapi {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 6px;
}
.title-name-cnapi p {
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    color: var(--color-first);
}

.dt-token-cnapi {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: row;
}

.ttn-inp {
    position: relative;
    width: 100%;
    /* width: 3.3rem; */
    height: auto;
}
.ttn-inp p {
    font-size: 1rem;
    font-weight: bold;
    color: var(--color-txtg);
}

.lines-binp {
    position: relative;
    width: 100%;
    /* width: calc(100% - 3.3rem); */
    height: auto;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: row;
    border: 1px solid var(--color-grey6);
    border-radius: 5px;
    overflow: hidden;
    background-color: var(--color-light);
    align-items: center;
}

.binp-v {
    position: relative;
    width: calc(100% - 5rem);
    height: auto;
    display: flex;
}

.ic-inp-v {
    position: relative;
    width: 2.4rem;
    height: auto;
    background-color: var(--color-first);
    display: flex;
}
.ic-inp-v i {
    font-size: 2rem;
    color: var(--color-first);
    display: flex;
    overflow: hidden;
    margin: auto;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 6px;
}
.ic-inp-v i::before {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    background-color: var(--color-light);
}

.binp-tkv {
    position: relative;
    width: calc(100% - 2.4rem);
    height: auto;
    padding: 0 8px 0 2px;
}
.binp-tkv input {
    width: 100%;
    height: auto;
    font-size: 0.88rem;
    padding: 6px 0 4px 0;
    color: var(--color-txtg);
}

.btn-copy-token {
    position: relative;
    width: 5rem;
    height: -webkit-fill-available;
}
.btn-copy-token button {
    width: 100%;
    height: -webkit-fill-available;
    font-size: 0.94rem;
    font-weight: normal;
    text-align: center;
    cursor: pointer;
    color: var(--color-light);
    background-color: var(--color-first);
    padding: 2px 6px;
}
.btn-copy-token button i {
    color: var(--color-light);
}
.btn-copy-token button:hover {
    text-decoration: underline;
    transition: all 0.3s ease;
}

.box-btn-api {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    padding-top: 16px;
}
.box-btn-api button {
    margin: auto;
    font-size: 1.13rem;
    font-weight: bold;
    text-align: center;
    color: var(--color-light);
    background-color: var(--color-first);
    padding: 5px 16px 4px 16px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
}
.box-btn-api button:hover {
    text-decoration: underline;
    transition: all 0.3s ease;
}
.box-btn-api .clbtncnapi-waiting {
    color: var(--color-dark);
    background-color: var(--color-grey6);
    cursor: auto;
}
.box-btn-api .clbtncnapi-waiting:hover {
    text-decoration: none;
    transition: all 0.3s ease;
}
.box-manual-cnapi {
    position: relative;
    width: 100%;
    height: auto;
    padding-top: 3.5rem;
}

.list-manual-btn {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    border-bottom: 1px dashed var(--color-grey6);
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.list-manual-btn:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.txt-manual-v {
    position: relative;
    width: auto;
    height: auto;
    padding-right: 16px;
}
.txt-manual-v p {
    font-size: 0.88rem;
    font-weight: bold;
    color: var(--color-txtg);
}
.btn-dl-manual {
    position: relative;
    width: auto;
    height: auto;
}
.btnmnu {
    position: relative;
    width: 100%;
    height: auto;
    background-color: var(--color-first);
    border-radius: 5px;
    overflow: hidden;
}
.btnmnu a {
    position: relative;
    width: 100%;
    height: auto;
    cursor: pointer;
    display: flex;
    padding: 5px 16px 4px 16px;
}
.btnmnu p {
    font-size: 0.94rem;
    color: var(--color-light);
}
.btnmnu i {
    color: var(--color-light);
}
.btnmnu a:hover p {
    text-decoration: underline;
    transition: all 0.3s ease;
}

/* ============= */
@media (min-width: 1200px) {}
@media (min-width: 992px) and (max-width: 1199px) {}
@media (min-width: 791px) and (max-width: 991px) {}
@media (min-width: 501px) and (max-width: 790px) {}
@media (min-width: 0px) and (max-width: 500px) {
    .title-name-cnapi p {
        font-size: 2rem;
    }
}


/* ========================================================== */
/* ==================== 2025-09-09 swal2 ==================== */
/* ========================================================== */
body.swal2-toast-shown .swal2-container {
    width: 100% !important;
    background-color: rgba(var(--color-light-rgb), 0.5) !important;
}
.swal2-toast {
    width: auto !important;
    max-width: 360px !important;
}


/* =============================================================== */
/* ==================== 2025-09-09 Letterhead ==================== */
/* =============================================================== */
.box-letterhead-upload-file {
    position: relative;
    width: 80%;
    height: auto;
    margin: 0 auto;
    padding-top: 20px;
}

.bg-bupload-letterhead {
    position: relative;
    width: 100%;
    height: auto;
    background-color: var(--color-light);
    border-radius: 5px;
    overflow: hidden;
}

.title-lthd-btnul-v {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 16px 16px 10px 16px;
    align-items: center;
}

.btt-lthd-n {
    position: relative;
    width: 50%;
    height: auto;
    padding-left: 6px;
}
.btt-lthd-n p {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--color-first);
}

.btn-uplimg-n {
    position: relative;
    width: 50%;
    height: auto;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    flex-direction: row;
    padding-right: 6px;
}

.btn-delete-imglt {
    position: relative;
    width: auto;
    height: auto;
    border-radius: 5px;
    overflow: hidden;
    margin-right: 10px;
    /* margin-bottom: 6px; */
}
.btn-delete-imglt:last-child {
    margin-right: 0;
}
.btn-delete-imglt a {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    padding: 2px 12px;
    cursor: pointer;
}
.btn-delete-imglt p {
    font-size: 1rem;
    color: var(--color-light);
}
.btn-delete-imglt i {
    color: var(--color-light);
}
.btn-delete-imglt a:hover p {
    text-decoration: underline;
    transition: all 0.3s ease;
}

.bt-dl-imglt {
    font-size: 1rem;
    color: var(--color-light);
    border-radius: 5px;
    overflow: hidden;
    margin-right: 10px;
    padding: 2px 12px;
    /* margin-bottom: 6px; */
    cursor: pointer;
}
.bt-dl-imglt:last-child {
    margin-right: 0;
}
.bt-dl-imglt i {
    color: var(--color-light);
}
.bt-dl-imglt:hover {
    text-decoration: underline;
    transition: all 0.3s ease;
}

.img-lthd-v {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0 16px 10px 16px;
}
.img-lthd-v figure {
    position: relative;
    width: 100%;
    height: auto;
    cursor: pointer;
}
.img-lthd-v figure .size-imghd {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.clbg-dl-gy a,
.bt-dl-imglt.clbg-dl-gy {
    cursor: auto;
}
.clbg-dl-gy a:hover p,
.bt-dl-imglt.clbg-dl-gy:hover {
    text-decoration: none;
    transition: all 0.3s ease;
}

.clbg-dl-red {
    background-color: var(--color-red);
}
.clbg-dl-sc {
    background-color: var(--color-green);
}
.clbg-dl-wn {
    background-color: var(--color-yellow);
}
.clbg-dl-gy {
    background-color: var(--color-grey6);
}

.txt-note-upimg {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0 22px 16px 22px;
}
.txt-note-upimg p {
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--color-red);
}

/* ============= */
@media (min-width: 1200px) {}
@media (min-width: 992px) and (max-width: 1199px) {
    .box-letterhead-upload-file {
        width: 90%;
    }
}
@media (min-width: 791px) and (max-width: 991px) {}
@media (min-width: 501px) and (max-width: 790px) {}
@media (min-width: 0px) and (max-width: 500px) {
    .btn-delete-imglt p,
    .bt-dl-imglt {
        font-size: 0.75rem;
    }
    .btt-lthd-n p {
        font-size: 1.13rem;
    }
    .btt-lthd-n {
        width: 45%;
    }
    .btn-uplimg-n {
        width: 55%;
    }
}
@media (min-width: 0px) and (max-width: 991px) {
    .box-letterhead-upload-file {
        width: 100%;
    }
}



/* =================================================================== */
/* ==================== 2025-09-10 copy data tour ==================== */
/* =================================================================== */
.btn-cpdata-pgt {
    position: relative;
    width: calc((100% / 4) - 9px);
    padding: 5px 10px 4px 10px;
    margin: 0 4.5px 9px 4.5px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    background-color: var(--color-light);
    font-size: 1rem;
    font-weight: normal;
    text-align: center;
    color: var(--color-green);
    border: 1px solid var(--color-green);
}
.btn-cpdata-pgt i {
    color: var(--color-green);
}
.btn-cpdata-pgt:hover {
    color: var(--color-light);
    background-color: var(--color-green);
    transition: all 0.3s ease;
}
.btn-cpdata-pgt:hover i {
    color: var(--color-light);
}


/* ============= */
@media (min-width: 1200px) {}
@media (min-width: 992px) and (max-width: 1199px) {}
@media (min-width: 791px) and (max-width: 991px) {}
@media (min-width: 501px) and (max-width: 790px) {}
@media (min-width: 0px) and (max-width: 500px) {
    .box-dt-program-img-txt .b-dt .b-btn-contact .btn-pgt-n {
        justify-content: center;
        align-items: center;
    }
    .box-dt-program-img-txt .b-dt .b-btn-contact .btn-pgt-n .cm-btn--n {
        width: 25%;
    }
    .box-dt-program-img-txt .b-dt .b-btn-contact .btn-pgt-n .cm-btn--n .icon-pd {
        display: flex;
    }
    .box-dt-program-img-txt .b-dt .b-btn-contact .btn-pgt-n .cm-btn--n p span {
        margin-top: 0 !important;
    }
    .box-dt-program-img-txt .b-dt .b-btn-contact .btn-pgt-n .cm-btn--n p span i {
        margin-left: auto;
        margin-right: auto;
    }
    .btn-cpdata-pgt {
        width: 25%;
        border: none;
        font-size: 0.75rem;
        color: var(--color-txtg);
        margin: 0;
        padding: 0 10px 0 10px;
        display: flex;
        flex-direction: column;
    }
    .btn-cpdata-pgt i {
        font-size: 1.82rem;
        color: var(--color-green);
    }

    .od-btn1-dlpg { order: 1 !important; } /*1*/
    .od-btn2-dlpg { order: 2 !important; } /*2*/
    .od-btn3-dlpg { order: 1 !important; } /*1*/
    .od-btn4-dlpg { order: 3 !important; } /*3*/
    .od-btn5-dlpg { order: 3 !important; } /*3*/
    .od-btn6-dlpg { order: 4; } /*4*/

}