/* =============================================================== */
/* ==================== 2025-09-09 API Connex ==================== */
/* =============================================================== */

:root {
    /* === 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(52%) sepia(23%) saturate(3375%) hue-rotate(346deg) brightness(97%) contrast(96%);

    --colordb-primary: #007bff;
    --colordb-primary-rgb: 0, 123, 255;
    --colordb-secondary: #6c757d;
    --colordb-secondary-rgb: 108, 117, 125;
    --colordb-success: #28a745;
    --colordb-success-rgb: 40, 167, 69;
    --colordb-danger: #dc3545;
    --colordb-danger-rgb: 220, 53, 69;
    --colordb-warning: #ffc107;
    --colordb-warning-rgb: 255, 193, 7;
    --colordb-info: #17a2b8;
    --colordb-info-rgb: 23, 162, 184;
    --colordb-light: #f8f9fa;
    --colordb-light-rgb: 248, 249, 250;
    --colordb-dark: #343a40;
    --colordb-dark-rgb: 52, 58, 64;

    --colordb-txtdk: #212529;
    --colordb-txtdk-rgb: 33, 37, 41;
    --colordb-txtlg: #ffffff;
    --colordb-txtlg-rgb: 255, 255, 255;

    --colordb-sky: #00ccff;
    --colordb-sky-rgb: 0, 204, 255;
}


.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*/

}

/* ====================================================== */
/* ====================== 20250923 ====================== */
.box-new-tbpr-l {
    position: relative;
    width: 100%;
    height: auto;
    column-count: 2;
    column-gap: 0;
}

.stb2-wn {
    width: 100%;
}
.box-vdttb-n.stb2-wn:nth-child(odd) {
    background-color: rgba(var(--color-second-rgb), 0.5);
}


@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: 991px) {
    .td-dt-bn.std1-wn {
        padding-left: 0;
    }
    .td-dt-bn.std1-wn p {
        text-align: center;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
    .td-dt-n.std1-wn p i {
        display: none;
    }
}
@media (min-width: 0px) and (max-width: 790px) {
    .box-vdttb-n {
        padding: 2px;
    }
    .box-new-tbpr-l {
        column-count: 1;
    }
}



/* ================= review 3 - 4 ================= */
.sc--review-f {
    position: relative;
    width: 100%;
    height: auto;
}

.sc--review-f .box-bg-rv {
    position: relative;
    width: 100%;
    height: auto;
    padding: 2.5rem 0 1.3rem 0;
    box-shadow: 0px 0px 5px 2px rgba(var(--color-dark-rgb), 0.05);
    -webkit-box-shadow: 0px 0px 5px 2px rgba(var(--color-dark-rgb), 0.05);
    -moz-box-shadow: 0px 0px 5px 2px rgba(var(--color-dark-rgb), 0.05);
}

.sc--review-f .b-dt-rv {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
}

.sc--review-f .b-dt-rv .b-rv {
    position: relative;
    height: auto;
    background-color: var(--color-light);
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0px 0px 5px 2px rgba(var(--color-dark-rgb), 0.05);
    -webkit-box-shadow: 0px 0px 5px 2px rgba(var(--color-dark-rgb), 0.05);
    -moz-box-shadow: 0px 0px 5px 2px rgba(var(--color-dark-rgb), 0.05);
}

.sc--review-f .b-title {
    display: none;
}

.sc--review-f .b-dt-rv .size--b3 {
    width: calc((100%/3) - 6px);
    margin: 0 9px 9px 0;
}

.sc--review-f .b-dt-rv .size--b4 {
    width: calc((100%/4) - 6.75px);
    margin: 0 9px 9px 0;
}

.sc--review-f .b-dt-rv .b-rv .b-img {
    position: relative;
    width: 100%;
    height: auto;
    padding: 2rem 10px 5px 10px;
}

.sc--review-f .b-dt-rv .b-rv .b-img figure {
    position: relative;
    width: auto;
    height: auto;
    overflow: hidden;
    border-radius: 100%;
    margin: 0 auto;
    border: 4px solid var(--color-first);
    z-index: 1;
}

.sc--review-f .b-dt-rv .size--b3 .b-img figure {
    width: 11rem;
    height: 11rem;
}

.sc--review-f .b-dt-rv .size--b4 .b-img figure {
    width: 9.5rem;
    height: 9.5rem;
    overflow: hidden;
}

.sc--review-f .b-dt-rv .b-rv .b-img figure .size-img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100%;
    border: 2px solid var(--color-light);
}

.sc--review-f .b-dt-rv .b-rv .b-img .bg-igm {
    position: absolute;
    width: 100%;
    height: auto;
    background-color: var(--color-first);
    top: 0;
    left: 0;
}

.sc--review-f .b-dt-rv .size--b3 .b-img .bg-igm {
    height: 11rem;
}

.sc--review-f .b-dt-rv .size--b4 .b-img .bg-igm {
    height: 9.5rem;
}

.sc--review-f .b-dt-rv .b-rv .b-dt {
    position: relative;
    width: 100%;
    height: auto;
    padding: 10px;
}

.sc--review-f .b-dt-rv .b-rv .b-dt .icons-qu {
    position: relative;
    width: 100%;
    height: auto;
}

.sc--review-f .b-dt-rv .b-rv .b-dt .icons-qu p {
    font-weight: bold;
    text-align: center;
}

.sc--review-f .b-dt-rv .b-rv .b-dt .icons-qu i {
    font-size: 2rem;
}

.sc--review-f .b-dt-rv .b-rv .b-dt .shoet {
    position: relative;
    width: 100%;
    height: 3.813rem;
    padding: 5px 0 10px 0;
}

.sc--review-f .b-dt-rv .b-rv .b-dt .shoet p {
    font-size: 0.94rem;
    font-weight: normal;
    text-align: center;
    color: var(--color-txtg5);
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.sc--review-f .b-dt-rv .b-rv .b-dt .names {
    position: relative;
    width: 100%;
    height: auto;
    padding: 10px 0;
}

.sc--review-f .b-dt-rv .b-rv .b-dt .names p {
    font-size: 1.13rem;
    font-weight: bold;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.sc--review-f .b-dt-rv .b-rv .b-dt .name-pg {
    position: relative;
    width: 100%;
    height: auto;
    padding: 10px 0 3px 0;
}

.sc--review-f .b-dt-rv .b-rv .b-dt .name-pg p {
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    color: var(--color-first);
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* ============= */
@media (min-width: 1200px) {
    .sc--review-f .b-dt-rv .size--b3:nth-child(3n+0) {
        margin-right: 0;
    }

    .sc--review-f .b-dt-rv .size--b4:nth-child(4n+0) {
        margin-right: 0;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .sc--review-f .b-dt-rv .size--b3:nth-child(3n+0) {
        margin-right: 0;
    }

    .sc--review-f .b-dt-rv .size--b4:nth-child(4n+0) {
        margin-right: 0;
    }
}

@media (min-width: 791px) and (max-width: 991px) {
    .sc--review-f .b-dt-rv {
        justify-content: stretch;
    }

    .sc--review-f .b-dt-rv .b-rv {
        display: flex;
        justify-content: stretch;
        align-items: center;
    }

    .sc--review-f .b-dt-rv .size--b3 {
        width: 100%;
        margin: 0 0 9px 0;
    }

    .sc--review-f .b-dt-rv .size--b4 {
        width: calc((100%/2) - 4.5px);
        margin: 0 9px 9px 0;
    }

    .sc--review-f .b-dt-rv .size--b4:nth-child(2n+0) {
        margin-right: 0;
    }

    .sc--review-f .b-dt-rv .b-rv .b-img {
        width: 8rem;
        height: 100%;
        padding: 5px;
        display: flex;
        align-items: center;
    }

    .sc--review-f .b-dt-rv .size--b3 .b-img figure {
        width: 7rem;
        height: 7rem;
    }

    .sc--review-f .b-dt-rv .size--b3 .b-img .bg-igm {
        width: 5.5rem;
        height: 100%;
    }

    .sc--review-f .b-dt-rv .size--b4 .b-img figure {
        width: 7rem;
        height: 7rem;
    }

    .sc--review-f .b-dt-rv .size--b4 .b-img .bg-igm {
        width: 5.5rem;
        height: 100%;
    }

    .sc--review-f .b-dt-rv .b-rv .b-dt {
        width: calc(100% - 8rem);
        height: 100%;
    }

    .sc--review-f .b-dt-rv .b-rv .b-dt .icons-qu i {
        font-size: 1.75rem;
    }

    .sc--review-f .b-dt-rv .b-rv .b-dt .shoet {
        height: auto;
        padding: 2px 0 5px 0;
    }

    .sc--review-f .b-dt-rv .b-rv .b-dt .shoet p {
        font-size: 0.88rem;
    }

    .sc--review-f .b-dt-rv .b-rv .b-dt .names {
        padding: 5px 0;
    }

    .sc--review-f .b-dt-rv .b-rv .b-dt .names p {
        font-size: 1rem;
    }

    .sc--review-f .b-dt-rv .b-rv .b-dt .name-pg {
        padding: 5px 0 2px 0;
    }

    .sc--review-f .b-dt-rv .b-rv .b-dt .name-pg p {
        font-size: 0.88rem;
    }
}

@media (min-width: 501px) and (max-width: 790px) {
    .sc--review-f.mg--t20 {
        margin-top: 0;
    }

    .sc--review-f .b-dt-rv {
        justify-content: stretch;
    }

    .sc--review-f .b-dt-rv .b-rv {
        display: flex;
        justify-content: stretch;
        align-items: center;
    }

    .sc--review-f .b-dt-rv .size--b3 {
        width: 100%;
        margin: 0 0 9px 0;
    }

    .sc--review-f .b-dt-rv .size--b4 {
        width: 100%;
        margin: 0 0 9px 0;
    }

    .sc--review-f .b-dt-rv .b-rv .b-img {
        width: 8rem;
        height: 100%;
        padding: 5px;
        display: flex;
        align-items: center;
    }

    .sc--review-f .b-dt-rv .size--b3 .b-img figure {
        width: 7rem;
        height: 7rem;
    }

    .sc--review-f .b-dt-rv .size--b3 .b-img .bg-igm {
        width: 5.5rem;
        height: 100%;
    }

    .sc--review-f .b-dt-rv .size--b4 .b-img figure {
        width: 7rem;
        height: 7rem;
    }

    .sc--review-f .b-dt-rv .size--b4 .b-img .bg-igm {
        width: 5.5rem;
        height: 100%;
    }

    .sc--review-f .b-dt-rv .b-rv .b-dt {
        width: calc(100% - 8rem);
        height: 100%;
    }

    .sc--review-f .b-dt-rv .b-rv .b-dt .icons-qu i {
        font-size: 1.75rem;
    }

    .sc--review-f .b-dt-rv .b-rv .b-dt .shoet {
        height: auto;
        padding: 2px 0 5px 0;
    }

    .sc--review-f .b-dt-rv .b-rv .b-dt .shoet p {
        font-size: 0.88rem;
    }

    .sc--review-f .b-dt-rv .b-rv .b-dt .names {
        padding: 5px 0;
    }

    .sc--review-f .b-dt-rv .b-rv .b-dt .names p {
        font-size: 1rem;
    }

    .sc--review-f .b-dt-rv .b-rv .b-dt .name-pg {
        padding: 5px 0 2px 0;
    }

    .sc--review-f .b-dt-rv .b-rv .b-dt .name-pg p {
        font-size: 0.88rem;
    }
}

@media (min-width: 0px) and (max-width: 500px) {
    .sc--review-f.mg--t20 {
        margin-top: 0;
    }

    .sc--review-f .box-bg-rv {
        padding: 1.2rem 0 2rem 0;
    }

    .sc--review-f .b-title {
        position: relative;
        width: 100%;
        height: auto;
        padding: 0 10px 8px 5px;
        display: inline-block;
    }

    .sc--review-f .b-title p {
        font-size: 1.25rem;
        font-weight: bold;
    }

    .sc--review-f .b-dt-rv .b-rv {
        display: flex;
        justify-content: stretch;
        align-items: center;
    }

    .sc--review-f .b-dt-rv .size--b3 {
        width: 100%;
        margin: 0 0 9px 0;
    }

    .sc--review-f .b-dt-rv .size--b3:last-child {
        margin-bottom: 0;
    }

    .sc--review-f .b-dt-rv .size--b4 {
        width: 100%;
        margin: 0 0 9px 0;
    }

    .sc--review-f .b-dt-rv .size--b4:last-child {
        margin-bottom: 0;
    }

    .sc--review-f .b-dt-rv .b-rv .b-img {
        width: 8rem;
        height: 100%;
        padding: 5px;
        display: flex;
        align-items: center;
    }

    .sc--review-f .b-dt-rv .size--b3 .b-img figure {
        width: 7rem;
        height: 7rem;
    }

    .sc--review-f .b-dt-rv .size--b3 .b-img .bg-igm {
        width: 5.5rem;
        height: 100%;
    }

    .sc--review-f .b-dt-rv .size--b4 .b-img figure {
        width: 7rem;
        height: 7rem;
    }

    .sc--review-f .b-dt-rv .size--b4 .b-img .bg-igm {
        width: 5.5rem;
        height: 100%;
    }

    .sc--review-f .b-dt-rv .b-rv .b-dt {
        width: calc(100% - 8rem);
        height: 100%;
    }

    .sc--review-f .b-dt-rv .b-rv .b-dt .icons-qu i {
        font-size: 1.75rem;
    }

    .sc--review-f .b-dt-rv .b-rv .b-dt .shoet {
        height: auto;
        padding: 2px 0 5px 0;
    }

    .sc--review-f .b-dt-rv .b-rv .b-dt .shoet p {
        font-size: 0.88rem;
    }

    .sc--review-f .b-dt-rv .b-rv .b-dt .names {
        padding: 5px 0;
    }

    .sc--review-f .b-dt-rv .b-rv .b-dt .names p {
        font-size: 1rem;
    }

    .sc--review-f .b-dt-rv .b-rv .b-dt .name-pg {
        padding: 5px 0 2px 0;
    }

    .sc--review-f .b-dt-rv .b-rv .b-dt .name-pg p {
        font-size: 0.88rem;
    }
}


/* =============================================== */
/* ================= performance ================= */
.sc-box-performance-hn {
    position: relative;
    width: 100%;
    height: auto;
}

.nbox-pfm-view-lspr {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: stretch;
    flex-wrap: wrap;
    flex-direction: row;
    overflow: hidden;
}

.list-pfm-dt {
    position: relative;
    height: auto;
    background-color: var(--color-light);
    border-radius: 5px;
    border: 1px solid var(--color-grey3);
    overflow: hidden;
    box-shadow: 0px 0px 5px 2px rgba(var(--color-dark-rgb), 0.05);
    -webkit-box-shadow: 0px 0px 5px 2px rgba(var(--color-dark-rgb), 0.05);
    -moz-box-shadow: 0px 0px 5px 2px rgba(var(--color-dark-rgb), 0.05);
    margin-bottom: 9px;
}
.list-pfm-dt:hover {
    border: 1px solid var(--color-first);
    transition: all 0.3s ease;
}
.list-pfm-dt a {
    position: relative;
    width: 100%;
    height: auto;
    cursor: pointer;
}

.bimg-pfm {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.bimg-pfm figure {
    position: relative;
    width: 100%;
    height: 100%;
}
.bimg-pfm figure .size-imgn {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bname-pfm {
    position: relative;
    width: 100%;
    height: auto;
    padding: 6px 12px;
    background-color: var(--color-light);
}
.bname-pfm p {
    font-size: 0.81rem;
    text-align: center;
    color: var(--color-txtg);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.list-pfm-dt:hover .bname-pfm {
    background-color: var(--color-first);
    transition: all 0.3s ease;
}
.list-pfm-dt:hover .bname-pfm p {
    color: var(--color-light);
    transition: all 0.3s ease;
}

.bname2-pfm {
    position: absolute;
    width: 100%;
    height: auto;
    bottom: 0;
    left: 0;
    background-color: rgba(var(--color-light-rgb), 0.8);
    padding: 6px 12px;
}
.bname2-pfm p {
    font-size: 0.81rem;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: var(--color-txtg);
}
.list-pfm-dt:hover .bname2-pfm {
    background-color: var(--color-first);
    transition: all 0.3s ease;
}
.list-pfm-dt:hover .bname2-pfm p {
    color: var(--color-light);
    transition: all 0.3s ease;
}

.box-btn-pfmall {
    position: relative;
    width: 100%;
    height: auto;
    padding-top: 6px;
}
.btn-pfm-n {
    position: relative;
    width: fit-content;
    height: auto;
    border: 1px solid var(--color-txtg5);
    border-radius: 5px;
    overflow: hidden;
    background-color: var(--color-light);
    display: flex;
    cursor: pointer;
    margin: 5px auto 0 auto;
}
.btn-pfm-n a {
    position: relative;
    width: 100%;
    height: auto;
    font-size: 0.81rem;
    color: var(--color-txtg5);
    padding: 6px 12px 5px 12px;
}
.btn-pfm-n i {
    color: var(--color-txtg5);
}
.btn-pfm-n:hover {
    background-color: var(--color-first);
    border: 1px solid var(--color-first);
    transition: all 0.3s ease;
}
.btn-pfm-n:hover a, .btn-pfm-n:hover i {
    color: var(--color-light);
    transition: all 0.3s ease;
}

/* ============= */
@media (min-width: 1200px) {
    .size-box-pfm4 {
        width: calc((100%/4) - 6.75px);
        margin-right: 9px;
    }
    .sbimg-pfm4h {
        height: 13.301rem;
    }
    .size-box-pfm4:nth-child(4n+0) {
        margin-right: 0;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .size-box-pfm4 {
        width: calc((100%/4) - 6.75px);
        margin-right: 9px;
    }
    .sbimg-pfm4h {
        height: 10.957rem;
    }
    .size-box-pfm4:nth-child(4n+0) {
        margin-right: 0;
    }
}
@media (min-width: 791px) and (max-width: 991px) {
    .size-box-pfm4 {
        width: calc((100%/3) - 6px);
        margin-right: 9px;
    }
    .sbimg-pfm4h {
        height: 11.936rem;
    }
    .size-box-pfm4:nth-child(3n+0) {
        margin-right: 0;
    }
}
@media (min-width: 501px) and (max-width: 790px) {
    .size-box-pfm4 {
        width: calc((100%/3) - 6px);
        margin-right: 9px;
    }
    .sbimg-pfm4h {
        height: 11.124rem;
    }
    .size-box-pfm4:nth-child(3n+0) {
        margin-right: 0;
    }
}
@media (min-width: 0px) and (max-width: 500px) {
    .size-box-pfm4 {
        width: calc((100%/2) - 4.5px);
        margin-right: 9px;
    }
    .sbimg-pfm4h {
        height: 9.024rem;
    }
    .size-box-pfm4:nth-child(2n+0) {
        margin-right: 0;
    }
}



/* =========================================== */
/* ================= title 2 ================= */
.nbox-title2-pg {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 0 16px 0;
}
.nbox-title2-pg p {
    font-size: 0.94rem;
    text-align: center;
    color: var(--color-txtg);
}
.nbox-title2-pg .ntitle2-pghd {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-red);
    text-align: center;
}
.nbox-title2-pg .ntitle2-pghd span {
    color: var(--color-first);
}
.lines2-sprtitle {
    position: relative;
    width: 70px;
    height: 2px;
    background-color: var(--color-txtg3);
    margin: 0 auto 5px auto;
    border-radius: 100%;
}

.lines2-top-bgbox-sh {
    border-top: 6px solid var(--color-fifth);
}

/* ============= */
/* @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) {} */
@media (min-width: 0px) and (max-width: 991px) {
    .nbox2-dpn-smb {
        display: none;
    }
}




/* ================================================= */
/* ================= home 20250408 ================= */
.box-img-car-hn {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.box-img-car-hn figure {
    width: 100%;
    height: 100%;
}
.box-img-car-hn figure .size-img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.box-dt-car-hn {
    position: relative;
    width: 100%;
    height: auto;
}

.b-name-chn {
    position: relative;
    width: 100%;
    height: auto;
    padding: 20px 10px 10px 10px;
}
.b-name-chn p {
    font-size: 1rem;
    font-weight: bold;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.b-dtpg-chn {
    position: relative;
    width: 100%;
    height: auto;
    padding: 10px;
    border-top: 1px dashed var(--color-grey3);
    border-bottom: 1px dashed var(--color-grey3);
}
.b-dtpg-chn p {
    font-size: 0.82rem;
    font-weight: normal;
    text-align: center;
}
.b-dtpg-chn p span {
    color: var(--color-txtg4);
}
.b-dtpg-chn p .pd-ic-r {
    padding-right: 3px;
}
.b-dtpg-chn p span i {
    color: var(--color-icon-yl);
}

.b-price-chn {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    padding: 10px;
}
.b-price-chn h3 {
    text-align: right;
    position: relative;
    display: flex;
    align-items: flex-end;
    margin: 0 auto;
}
.b-price-chn h3 span {
    font-size: 0.88rem;
    font-weight: normal;
    color: var(--color-txtg4);
}
.b-price-chn h3 .txt-nsp-chn {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-right: 5px;
}
.b-price-chn h3 .txt-nsp-chn .stsp-chn {
    font-weight: normal;
    color: var(--color-txtg4);
}
.b-price-chn h3 .txt-nsp-chn .pr--old-dc-chn {
    font-size: 0.75rem;
    font-weight: normal;
    text-decoration: line-through;
    color: var(--color-txtg4);
    margin-top: -5px;
}

.b-price-chn h3 .txt-price-chn {
    font-size: 1.63rem;
    color: var(--color-red);
    margin-bottom: -5px;
    font-weight: bold;
}
.b-price-chn h3 .txt-crc-chn {
    padding-left: 5px;
}

.txt-dc-pg-hn {
    font-size: 0.63rem;
    font-weight: normal;
    text-decoration: line-through;
    color: var(--color-txtg4);
    margin-top: 3px;
    margin-bottom: -10px !important;
    padding-left: 3px;
}

/* ============= */
@media (min-width: 1200px) {
    .size-bchn-pfm4 {
        width: calc((100%/4) - 6.75px);
        margin-right: 9px;
    }
    .size-bchn-pfm4:nth-child(4n+0) {
        margin-right: 0;
    }
    .box-img-car-hn {
        height: 17.735rem;
    }
    .b-name-chn {
        height: 4.575rem;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .size-bchn-pfm4 {
        width: calc((100%/4) - 6.75px);
        margin-right: 9px;
    }
    .size-bchn-pfm4:nth-child(4n+0) {
        margin-right: 0;
    }
    .box-img-car-hn {
        height: 14.61rem;
    }
    .b-name-chn {
        height: 4.575rem;
    }
    .order-box-car {
        order: 10;
    }
    .order-box-pfm {
        order: 11;
    }
    .sc--review-f {
        order: 12;
    }
}
@media (min-width: 791px) and (max-width: 991px) {
    .size-bchn-pfm4 {
        width: calc((100%/2) - 4.5px);
        margin-right: 9px;
    }
    .size-bchn-pfm4:nth-child(2n+0) {
        margin-right: 0;
    }
    .box-img-car-hn {
        height: 23.75rem;
    }
    .b-name-chn {
        height: 4.575rem;
    }
    .order-box-car {
        order: 10;
    }
    .order-box-pfm {
        order: 11;
    }
    .sc--review-f {
        order: 12;
    }
}
@media (min-width: 501px) and (max-width: 790px) {
    .size-bchn-pfm4 {
        width: calc((100%/2) - 4.5px);
        margin-right: 9px;
    }
    .size-bchn-pfm4:nth-child(2n+0) {
        margin-right: 0;
    }
    .box-img-car-hn {
        height: 22.3rem;
    }
    .b-name-chn {
        height: 4.575rem;
    }
    .order-box-car {
        order: 10;
    }
    .order-box-pfm {
        order: 11;
    }
    .sc--review-f {
        order: 12;
    }
}
@media (min-width: 0px) and (max-width: 500px) {
    .size-bchn-pfm4 {
        width: 100%;
        margin-right: 0;
    }
    .box-img-car-hn {
        height: 24.75rem;
    }
    .order-box-car {
        order: 10;
    }
    .order-box-pfm {
        order: 11;
    }
    .sc--review-f {
        order: 12;
    }
}


/* ============= */
/* @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 new ================= */
.nbox-title-pg {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 0 16px 0;
}
.nbox-title-pg p {
    font-size: 0.94rem;
    text-align: center;
    color: var(--color-txtg);
}
.nbox-title-pg .ntitle-pghd {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--color-red);
    text-align: center;
}
.nbox-title-pg .ntitle-pghd span {
    color: var(--color-first);
}
.lines-sprtitle {
    position: relative;
    width: 70px;
    height: 2px;
    background-color: var(--color-txtg3);
    margin: 0 auto 5px auto;
    border-radius: 100%;
}

.lines-top-bgbox-sh {
    border-top: 6px solid var(--color-fifth);
}

/* ============= */
/* @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) {} */
@media (min-width: 0px) and (max-width: 991px) {
    .nbox-dpn-smb {
        display: none;
    }
}

/* ====== view ======= */
.box-vpghd-n {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0 5px 12px 0;
}
.box-vpghd-n p {
    font-size: 0.94rem;
    font-weight: normal;
    text-align: right;
    color: var(--color-txtg5);
}
.box-vpghd-n span {
    color: var(--color-txt5);
}
.box-vpghd-n .bnvpg-hdn {
    padding: 0 2px;
    font-weight: bold;
    color: var(--color-red);
}

/* ============= */
@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-vpghd-n {
        padding-top: 12px;
    }
}



/* ===== Period ===== */
.b-period-pg-ln {
    position: relative;
    width: 100%;
    height: auto;
    padding-top: 16px;
    margin-top: 16px;
    padding-bottom: 16px;
    border-top: 1px solid var(--color-grey3);
}

.tt-list-dt-n {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0 0 5px 5px;
}
.tt-list-dt-n .txt-tt-ldt-n {
    font-size: 1.06rem;
    font-weight: bold;
    color: var(--color-txtg);
}

.box-table-period-pg-ln {
    position: relative;
    width: 100%;
    height: auto;
    padding-top: 5px;
}

.table-prpg-n {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--color-grey3);
    background-color: var(--color-light);
}

.thead-prpg-n {
    position: relative;
    width: 100%;
    height: auto;
    /* max-height: 2.125rem; */
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 0 6px;
    background-color: var(--color-first);
}
.thd-th {
    position: relative;
    height: auto;
    margin: 5px 0;
}
.sethd-lines-tb {
    border-right: 1px solid var(--color-grey2);
}
.sethd-lines-tb:last-child {
    border-right: none;
}
.txt-hdtb {
    font-size: 1rem;
    color: var(--color-light);
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.tbody-prpg-n {
    position: relative;
    width: 100%;
    height: auto;
}
.tb-list-tr-n {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 0 6px;
    border-bottom: 1px dashed var(--color-grey3);
}
.tb-list-tr-n:last-child {
    border-bottom: none;
}
.tbd-td {
    position: relative;
    height: auto;
    margin: 5px 0;
    display: grid;
    align-items: center;
}
.setbd-lines-tb {
    border-right: 1px solid var(--color-grey4);
}
.setbd-lines-tb:last-child {
    border-right: none;
}
.pdlr-pr-n {
    padding: 0 10px;
}
.bprice-n {
    position: relative;
    width: 100%;
    height: auto;
}
.txt-dcprice-full {
    font-size: 0.69rem;
    text-align: center;
    color: var(--color-txtg4);
    text-decoration: line-through;
    margin-bottom: -4px;
}
.txt-bdtb {
    font-size: 0.94rem;
    text-align: center;
    color: var(--color-txtg);
}
.txt-bdtb i {
    color: var(--color-txtg);
}
.txt-ftb-pr {
    font-weight: bold;
}
.txt-date-prpg {
    text-align: left;
    font-weight: bold;
    color: var(--color-first);
}
.txt-date-prpg span {
    font-size: 0.81rem;
    font-weight: normal;
}
.txt-date-prpg i {
    font-size: 0.88rem;
    padding-left: 2px;
}
.txt-andate-prn {
    font-size: 0.81rem;
    font-weight: normal;
    color: var(--color-txtg6);
}
.txt-andate-prn i {
    font-size: 0.884rem;
    color: var(--color-txtg);
}
.b-badge-dpr {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: row;
    padding-top: 2px;
}
.bd-anmt-daten {
    position: relative;
    width: auto;
    height: auto;
    /* background-color: var(--color-first); */
    border-radius: 5px;
    padding: 2px 6px 3px 6px;
    margin: 6px 6px 2px 0;
    animation: spccmt 1.2s infinite;
}
.bd-anmt-daten p {
    font-size: 0.75rem;
    font-weight: normal;
    color: var(--color-light);
}
.bd--daten {
    position: relative;
    width: auto;
    height: auto;
    border-radius: 5px;
    padding: 2px 6px 3px 6px;
    margin: 6px 6px 2px 0;
}
.bd--daten p {
    font-size: 0.75rem;
    font-weight: normal;
}
.bct-tb-n {
    position: relative;
    width: 100%;
    height: auto;
}
.txt-anmt-acom-n {
    font-size: 0.81rem;
    text-align: center;
    /* color: var(--color-txtg4); */
    /* text-decoration: line-through; */
    margin-bottom: -2px;
    animation: tacom 1.2s infinite;
}

.animation-spccmt { animation: spccmt 1s infinite; }
@keyframes spccmt {
    0% { background-color: var(--color-red); }
    25% { background-color: var(--color-blue); }
    50% { background-color: var(--color-red); }
    75% { background-color: var(--color-blue); }
    100% { background-color: var(--color-red); }
}
.animation-tacom { animation: tacom 1s infinite; }
@keyframes tacom {
    0% { color: var(--color-red); }
    25% { color: var(--color-blue); }
    50% { color: var(--color-red); }
    75% { color: var(--color-blue); }
    100% { color: var(--color-red); }
}

.bgcl-badge-green { background-color: var(--color-success); }
.bgcl-badge-green p { color: var(--color-light); }
.bgcl-badge-red { background-color: var(--color-danger); }
.bgcl-badge-red p { color: var(--color-light); }

.bgcl-badge-primary { background-color: var(--colordb-primary); }
.bgcl-badge-primary p { color: var(--color-light); }
.bgcl-badge-secondary { background-color: var(--colordb-secondary); }
.bgcl-badge-secondary p { color: var(--color-light); }
.bgcl-badge-success { background-color: var(--colordb-success); }
.bgcl-badge-success p { color: var(--color-light); }
.bgcl-badge-danger { background-color: var(--colordb-danger); }
.bgcl-badge-danger p { color: var(--color-light); }
.bgcl-badge-warning { background-color: var(--colordb-warning); }
.bgcl-badge-warning p { color: var(--colordb-txtdk); }
.bgcl-badge-info { background-color: var(--colordb-info); }
.bgcl-badge-info p { color: var(--color-light); }
.bgcl-badge-sky { background-color: var(--colordb-sky); }
.bgcl-badge-sky p { color: var(--color-light); }

.btn-avbl-prpg-n {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 5px;
    display: flex;
    justify-content: center;
}
.btn-avbl-prpg-n a {
    position: relative;
    width: 100%;
    height: auto;
    padding: 5px 6px 3px 6px;
    cursor: pointer;
}
.na-avbl-n {
    padding: 5px 6px 3px 6px;
}
.txt-a-bk-n {
    font-size: 0.94rem;
    font-weight: normal;
    text-align: center;
}

.clbtn-avbl-success { background-color: var(--color-green); }
.clbtn-avbl-success .txt-a-bk-n { color: var(--color-light); }
.clbtn-avbl-danger { background-color: var(--color-red); }
.clbtn-avbl-danger .txt-a-bk-n { color: var(--color-light); }
.clbtn-avbl-secondary { background-color: var(--colordb-secondary); }
.clbtn-avbl-secondary .txt-a-bk-n { color: var(--color-light); }
.clbtn-avbl-warning { background-color: var(--colordb-warning); }
.clbtn-avbl-warning .txt-a-bk-n { color: var(--colordb-txtdk); }

.size-tbpr0 { width: 2.5rem; padding-right: 6px; }
.size-tbpr1 { width: calc(31% - 5.5rem); }
.size-tbpr2 { width: 3rem; }
.size-tbpr3 { width: 9%; }
.size-tbpr4 { width: 9%; }
.size-tbpr5 { width: 9%; }
.size-tbpr6 { width: 9%; }
.size-tbpr7 { width: 5%; }
.size-tbpr8 { width: 5%; }
.size-tbpr9 { width: 9%; }
.size-tbpr10 { width: 14%; }

.vtxt-dt-n { display: block; }
.vtxt-mb-n { display: none; }
.smb-dpn-tt-bn {}

@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) {
    .vtxt-dt-n { display: none; }
    .vtxt-mb-n { display: block; }

    .thead-prpg-n {
        padding: 0;
    }
    .tb-list-tr-n.vsmb-lin-lbdn {
        padding: 0;
        border: 1px solid var(--color-grey3);
        margin-bottom: 10px;
        border-radius: 5px;
    }
    .tb-list-tr-n.vsmb-lin-lbdn:last-child {
        border-bottom: 1px solid var(--color-grey3);
    }
    .tb-list-tr-n.vsmb-lin-lbdn:first-child {
        border-top-right-radius: 0;
        border-top-left-radius: 0;
    }
    .txt-hdtb {
        font-size: 0.88rem;
    }
    .txt-bdtb {
        font-size: 0.88rem;
    }
    .pdlr-pr-n {
        padding: 0 6px;
    }
    .txt-date-prpg {
        font-size: 0.94rem;
    }

    .smb-dpn-tt-bn { display: none; }

    .table-prpg-n.vsmb-lin-tbn {
        border: none;
    }
    .size-tbpr2, .size-tbpr4, 
    .size-tbpr5, .size-tbpr6 {
        display: none;
    }
    .size-tbpr0 {
        order: 2;
        padding-right: 3px;
        padding-left: 3px;
    }
    .size-tbpr1 {
        width: 100%;
        order: 1;
        border-right: none;
        background-color: rgba(var(--color-second-rgb), 0.2);
        margin-top: 0;
        padding: 6px 10px;
        border-bottom: 1px solid var(--color-second);
    }
    .size-tbpr3 {
        width: 20%;
        order: 3;
    }
    .size-tbpr7 {
        width: 12%;
        order: 4;
    }
    .size-tbpr8 {
        width: 12%;
        order: 5;
    }
    .size-tbpr9 {
        width: 17%;
         order: 6;
        /* border-right: none; */
    }
    .size-tbpr10 {
        width: calc(39% - 2.5rem);
        order: 7;
        /* border-top: 1px solid var(--color-grey4);
        margin: 0 0 6px 0;
        padding-top: 6px; */
    }

}

/* >>>>>>>>>>>> no login <<<<<<<<<<<< */
.sethd-nlin-lines-tb { border-right: 1px solid var(--color-grey2); }
.sethd-nlin-lines-tb:last-child { border-right: none; }
.setbd-nlin-lines-tb { border-right: 1px solid var(--color-grey4); }
.setbd-nlin-lines-tb:last-child { border-right: none; }

.size-nlin-tbpr0 { width: 2.5rem; padding-right: 6px; }
.size-nlin-tbpr1 { width: calc(42% - 5.5rem); }
.size-nlin-tbpr2 { width: 3rem; }
.size-nlin-tbpr3 { width: 11%; }
.size-nlin-tbpr4 { width: 11%; }
.size-nlin-tbpr5 { width: 11%; }
.size-nlin-tbpr6 { width: 11%; }
.size-nlin-tbpr7 { width: 14%; }
/* .size-nlin-tbpr8, .size-nlin-tbpr9, .size-nlin-tbpr10 { display: none; } */

@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) {
    .txtfs-nlin-n {
        font-size: 0.69rem;
    }
    .tb-list-tr-n {
        padding: 0;
    }
    .size-nlin-tbpr2, .size-nlin-tbpr4, 
    .size-nlin-tbpr5, .size-nlin-tbpr6 {
        display: none;
    }
    .size-nlin-tbpr0 { padding: 0 3px; }
    .size-nlin-tbpr1 { width: calc(58% - 2.5rem); }
    .size-nlin-tbpr3 { width: 20%; }
    .size-nlin-tbpr7 { width: 22%; }
}

/*24112568*/
.pd-rb-appr-n {
    padding-right: 4px;
}
.bap-cf-npr {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    background-color: var(--color-blue);
    padding: 6px;
    border-radius: 5px;
    overflow: hidden;
    align-items: center;
}
.bap-cf-npr i {
    font-size: 0.81rem;
    color: var(--color-light);
}
.bap-cf-npr p {
    font-size: 0.81rem;
    color: var(--color-light);
    margin-top: -2px;
    margin-bottom: -4px;
}

.tooltiptext {
  visibility: hidden;
  width: max-content;
  background-color: var(--color-black3);
  color: var(--color-light);
  text-align: center;
  border-radius: 6px;
  padding: 4px 12px;
  position: absolute;
  z-index: 1;
  /* top: 4px; */
  left: 105%;
  font-size: 0.75rem;
}

.bap-cf-npr:hover .tooltiptext {
    visibility: visible;
}


/* ===================================================== */
/* ================= menu new 20260316 ================= */
.b-spr-menu-h {
    justify-content: flex-end;
}

nav .m-navbar .nav--links .n-links {
    flex-wrap: wrap;
}
.bg-navbar-hd1-n {
    position: relative;
    width: 100%;
    height: auto;
    background-color: var(--color-tabmn1);
}
.bg-navbar-hd2-n {
    position: relative;
    width: 100%;
    height: auto;
    background-color: var(--color-first);
    border-top: 1px solid var(--color-hovermn2);
}

.box-size-wnavbar-n {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    margin: auto;
    justify-content: center;
}

.bg-navbar-hd1-n li a span,
.bg-navbar-hd2-n li a span {
    color: var(--color-light);
}

.bg-navbar-hd1-n li a:hover,
.bg-navbar-hd2-n li a:hover {
    background-color: var(--color-hovermn2);
    transition: all 0.3s ease;
}

nav .m-navbar .nav--links .n-links li .sub--menu .box--smn-dd .st--list-smn .btn--box-smnl:hover {
    background-color: var(--color-first);
    border-radius: 10px;
    transition: all 0.3s ease;
}
nav .m-navbar .nav--links .n-links li .sub--menu .box--smn-dd .st--list-smn .btn--box-smnl:hover .spr-btn-smn .name-box-lsmn p,
nav .m-navbar .nav--links .n-links li .sub--menu .box--smn-dd .st--list-smn .btn--box-smnl:hover .spr-btn-smn .name-box-lsmn2 p {
    color: var(--color-light);
    transition: all 0.3s ease;
}

nav .m-navbar .nav--links .n-links li .dsm--r {
    right: 0;
    left: auto;
}

nav .m-navbar .nav--links .n-links li .sub--menu .box--smn-dd .st--list-smn .btn--box-smnl .spr-btn-smn .name-box-lsmn.sbox-mn-at-n {
    width: -webkit-fill-available;
}
nav .m-navbar .nav--links .n-links li .sub--menu .box--smn-dd .st--list-smn .btn--box-smnl .spr-btn-smn .name-box-lsmn.sbox-mn-m105-n {
    /* width: 9.5rem; */
    width: 10.5rem;
}

.box--logo-hdn {
    position: relative;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
}

.box--logo-ct-h .spr--logo-h-ct .h--logo {
    margin-right: 12px;
}
.vfile-logo-pm,
.vfile-logo-ts {
    position: relative;
    width: auto;
    height: auto;
    margin: 0 12px;
}
.vfile-logo-pm a,
.vfile-logo-ts a {
    position: relative;
    width: auto;
    height: auto;
}
.vfile-logo-pm figure,
.vfile-logo-ts figure {
    position: relative;
    width: auto;
    height: 3rem;
}
.vfile-logo-pm figure .size-imglgn,
.vfile-logo-ts figure .size-imglgn {
    position: relative;
    width: auto;
    height: 100%;
}

@media (min-width: 1400px) {
    .box-size-wnavbar-n {
        max-width: 1170px;
    }
}
@media (min-width: 1200px) and (max-width: 1399px) {
    .box-size-wnavbar-n {
        max-width: 1170px;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .box-size-wnavbar-n {
        max-width: 970px;
    }
}
@media (min-width: 0px) and (max-width: 991px) {
    .box-size-wnavbar-n {
        display: block;
    }
    nav .m-navbar .nav--links .n-links li .sub--menu .box--smn-dd .st--list-smn .btn--box-smnl .spr-btn-smn .name-box-lsmn.sbox-mn-at-n,
    nav .m-navbar .nav--links .n-links li .sub--menu .box--smn-dd .st--list-smn .btn--box-smnl .spr-btn-smn .name-box-lsmn.sbox-mn-m105-n {
        width: calc(100% - 2.2rem);
    }

    .bg-navbar-hd1-n,
    .bg-navbar-hd2-n {
        background-color: transparent;
        border-top: 1px solid rgba(var(--color-first-rgb), 0.3);
    }
    .bg-navbar-hd1-n li a span,
    .bg-navbar-hd2-n li a span {
        color: var(--color-txtg);
    }
    .bg-navbar-hd1-n li a:hover,
    .bg-navbar-hd2-n li a:hover {
        background-color: rgba(var(--color-first-rgb), 0.05);
        transition: all 0.3s ease;
    }
    nav .m-navbar .nav--links .n-links li .i-arrow {
        color: var(--color-txtg1);
    }

    .box--logo-ct-h .spr--logo-h-ct .h--logo {
        margin-right: 6px;
    }
    .vfile-logo-pm,
    .vfile-logo-ts {
        margin: 0 6px;
    }
    .vfile-logo-pm figure,
    .vfile-logo-ts figure {
        height: 2rem;
    }
}

@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) {}




/* ============================================================ */
/* ================= search new home 20260319 ================= */
.sbox-shn20 { width: 20%; }
.sc--search3-f .box-bg--search .box--btn-sr.sbox-shn20 { width: 20%; }
.sc--search3-f .box-bg--search .box--btn-sr.sbox-shn20 button { width: 100%; }

.order1-shn { order: 1; }
.order2-shn { order: 2; }
.order3-shn { order: 3; }
.order4-shn { order: 4; }
.order5-shn { order: 5; }

@media (min-width: 1200px) {}
@media (min-width: 992px) and (max-width: 1199px) {}
@media (min-width: 791px) and (max-width: 991px) {
    .sbox-shn20 { width: 50%; }
    .sc--search3-f .box-bg--search .box--btn-sr.sbox-shn20 { width: 100%; }
    .sc--search3-f .box-bg--search .box--btn-sr.sbox-shn20 button { width: 80%; }
}
@media (min-width: 501px) and (max-width: 790px) {
    .sbox-shn20 { width: 50%; }
    .sc--search3-f .box-bg--search .box--btn-sr.sbox-shn20 { width: 100%; }
    .sc--search3-f .box-bg--search .box--btn-sr.sbox-shn20 button { width: 80%; }
}
@media (min-width: 0px) and (max-width: 500px) {
    .sbox-shn20 { width: 100%; }
    .sc--search3-f .box-bg--search .box--btn-sr.sbox-shn20 { width: 100%; }
}



/* ============================================================ */
/* =================== size mobile 20260326 =================== */
@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) {
    .sc--program-row-sprlr-lr .box--not-bg-pg .column-box--list-pg {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        flex-direction: row;
    }
    .sc--program-row-sprlr-lr .box--not-bg-pg .column-box--list-pg .box--one-lpg {
        width: calc((100%/2) - 4.5px);
        margin: 0 9px 9px 0;
    }
    .sc--program-row-sprlr-lr .box--not-bg-pg .column-box--list-pg .box--one-lpg:nth-child(2n+0) {
        margin-right: 0;
    }
    .b-tvp-acd-list {
        display: none;
    }
    .sc--program-row-sprlr-lr .box--not-bg-pg .column-box--list-pg .box--one-lpg .b-details .b-name p {
        white-space: normal;
    }
    .bdt-vlistf {
        flex-direction: column;
        /* border-top: 1px dashed var(--color-grey3); */
        /* border-bottom: 1px dashed var(--color-grey3); */
    }
    .sn1b {
        padding: 10px 0;
        border-top: 1px dashed var(--color-grey3);
        border-bottom: 1px dashed var(--color-grey3);
    }
    .blsit-vdt {
        padding: 0 10px;
    }
    .sdv1, .sdv2, .sdv3 { width: 100%; }
    .blsit-vdt p { text-align: center; }
    .ssh1b {
        padding: 10px 0;
        border-bottom: 1px dashed var(--color-grey3);
        display: none;
    }
    .s1b { 
        width: 40%;
        padding: 8px 6px;
        margin: auto 0;
    }
    .bdt-vlistf figure {
        width: 90%;
        height: auto;
        margin: auto;
    }
    .bdt-vlistf figure .size-img {
        width: 100%;
        height: auto;
    }
    .s2b {
        width: 60%;
        padding: 8px 12px 8px 6px;
    }
    .bfullp-pgl {
        display: none;
    }
    .bnetp-pgl {
        width: 100%;
        padding-left: 0;
    }
    .bnetp-pgl p {
        text-align: right;
    }
    .bnetp-pgl .price-n {
        display: flex;
        flex-direction: column;
    }
    .bnetp-pgl .txtcrn {
        margin-top: -8px;
    }
    .s3b {
        border-top: 1px dashed var(--color-grey3);
        padding-bottom: 12px;
    }
}



@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) {
    .bnetp-pgl .price-n{
        font-size: 1.25rem;
    }
}




/* ============================================================== */
/* =================== popup booking 20260603 =================== */
.modal--dt-box2.open>.b--open-md-bkl3 {
    transform: scale(1);
}
.modal--dt-box2 .b--open-md-bkl3 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 40%;
    height: 80%;
    margin: 0;
    background-color: var(--color-grey1);
    box-shadow: 0 0 2.5rem rgba(var(--color-dark-rgb), 0.5);
    transform: scale(0);
    transition: transform 0.25s;
    transition-delay: 0.15s;
    border-radius: 10px;
    overflow: hidden;
}

/* ----------------------- */
.preview-item-new {
    position: relative;
    width: auto;
    height: auto;
    border: 1px solid var(--color-grey4);
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
}

.prebox-img-new {
    position: relative;
    width: auto;
    height: auto;
    padding: 10px 7px 10px 10px;
    font-size: 0;
}
.prebox-img-new .size-imgn {
    position: relative;
    width: 3.75rem;
    height: 3.75rem;
    object-fit: cover;
    border-radius: 5px;
}
.prebox-img-new i {
    font-size: 3rem;
    color: var(--color-pdf);
}

.prebox-txt-new {
    position: relative;
    width: auto;
    height: stretch;
    padding: 10px;
}
.prebox-txt-new p {}
.prebox-txt-new .txt-pre-new {
    font-size: 1rem;
    color: var(--color-txtg);
}
.prebox-txt-new .txtupdate-pren {
    font-size: 0.81rem;
    color: var(--color-txtg4);
}
.prebox-txt-new a {
    cursor: pointer;
    color: var(--color-blue);
}
.prebox-txt-new a .txt-pre-new {
    color: var(--color-blue);
    font-weight: bold;
}
.prebox-txt-new a:hover .txt-pre-new {
    text-decoration: underline;
    transition: all 0.3s ease;
}

.prebox-btn-trash-new {
    position: relative;
    width: auto;
    height: stretch;
    /* padding: 10px 10px 10px 7px; */
    border-left: 1px solid var(--color-grey4);
    margin-left: 7px;
}
.prebox-btn-trash-new button {
    position: relative;
    width: auto;
    height: 100%;
    color: var(--color-light);
    background-color: var(--color-red);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 10px;
}
.prebox-btn-trash-new i {
    color: var(--color-light);
}

/* ------------------------ */
.pdnew-box-uplf {
    padding: 16px;
}
.box-new-uploadfile {
    /* position: relative; */
    /* width: 70%; */
    /* height: auto; */
    /* min-height: 220px; */
    margin: auto;
}


@media (min-width: 1200px) {}
@media (min-width: 992px) and (max-width: 1199px) {
    .modal--dt-box2 .b--open-md-bkl3 {
        width: 80%;
        height: 65%;
    }

    .list--card-hsr-kb .dt--bk-hsr .spr--dt-name { width: 35%; }
    .list--card-hsr-kb .dt--bk-hsr .spr--dt-period { width: 19%; }
    .list--card-hsr-kb .dt--bk-hsr .spr--dt-date { width: 23%; }
    .list--card-hsr-kb .dt--bk-hsr .spr--dt-status { width: 23%; }
    .list--card-hsr-kb .dt--bk-hsr .spr--dt-menu {
        width: 100%;
        padding-top: 10px;
    }
    .list--card-hsr-kb .dt--bk-hsr .spr--dt-menu .b--btn-menu-bkl {
        margin: auto;
    }
}
@media (min-width: 791px) and (max-width: 991px) {
    .modal--dt-box2 .b--open-md-bkl3 {
        width: 80%;
        height: 65%;
    }
}
@media (min-width: 501px) and (max-width: 790px) {
    .modal--dt-box2 .b--open-md-bkl3 {
        width: 80%;
        height: 70%;
    }
}
@media (min-width: 0px) and (max-width: 500px) {
    .modal--dt-box2 .b--open-md-bkl3 {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}