body {
    min-width: 390px;
}

html {
    scroll-behavior: smooth;
}

.navbar {
    min-width: 390px;
}

html.lenis {
    width: 100% !important;
}

.container.reveal.show {
    transform: none !important;
}

.main-wrapper.home,
.home-classic.boxed-menu {
    overflow: visible !important;
}

.hidden {
    display: none !important;
}

/* ================================== */
/* Color */
/* ================================== */
/*.text-pri {
    color: #222222 !important;
}*/
.text-pri {
    color: #12203E !important;
}

.text-pri2 {
    /*color: #2d5375 !important;*/
    color: #b42328 !important;
}

.text-sec {
    color: #3e6c95 !important;
}

.text-third {
    color: #5594D8 !important;
}

.text-muted {
    /*color: #64748b !important;*/
    color: #79889f !important;
}

.text-white {
    color: #fff !important;
}

.text-white-muted {
    color: #ffffff91 !important;
}

.text-pri-red {
    color: #D71920;
}

.content .section {
    /*padding: 100px 0;*/
}

@media (min-width: 992px) {
    .content .section {
        padding: 100px 0;
    }
}

@media (max-width: 1023px) {
    .content .section {
        padding: 100px 0;
    }
}

.fs-14 {
    font-size: 14px !important;
}

.fs-15 {
    font-size: 15px !important;
}

.fs-16 {
    font-size: 16px !important;
}

/* ================================== */
/* ตัวอย่างรายงาน */
/* ================================== */
.layout-rpt-preview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0px, 1fr));
    gap: 30px;
}

@media (max-width: 991px) {
    .layout-rpt-preview {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
}

@media (min-width: 992px) and (max-width: 1023px) {
    .layout-rpt-preview {
        display: grid;
        grid-template-columns: repeat(2, minmax(0px, 1fr));
        gap: 30px;
    }
}

.layout-rpt-preview .card {
    /*border: 1px solid #dce2e7;*/
    border-radius: 20px;
    border: 0.5px solid rgba(120, 130, 150, 0.15);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(120, 130, 150, 0.08);
    overflow: hidden;
    transition: box-shadow 0.2s;
}

    .layout-rpt-preview .card:hover {
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.11), 0 0 0 0.5px rgba(120, 130, 150, 0.13);
    }

    .layout-rpt-preview .card .card-body {
        /*border-top: 1px solid #dce2e7;*/
    }

    .layout-rpt-preview .card .card-img {
        /*padding: 0.8rem 0.8rem 1.5rem 0.8rem;*/
        /*padding: 0 0 1.5rem 0;*/
        padding: 0.8rem;
        /*background-color: #f0f2f4;*/
    }

    .layout-rpt-preview .card .card-img-preview {
        background: radial-gradient(circle at bottom left, #dce9ff, transparent 40%), #eef5ff;
        border-radius: 20px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        height: 260px;
    }

    .layout-rpt-preview .card .card-img .card-img-preview a {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        width: auto;
        height: auto;
        max-height: 85%;
        max-width: 80%;
        object-fit: contain;
        border-radius: 8px;
        box-shadow: 0 12px 25px rgba(0, 0, 0, .12);
    }

        .layout-rpt-preview .card .card-img .card-img-preview a img {
            /*box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);*/
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: 8px;
            box-shadow: 0 12px 25px rgba(0,0,0,.12);
        }

    .layout-rpt-preview .card .card-head {
        margin-bottom: 12px;
        display: flex;
        flex-direction: column;
    }

    .layout-rpt-preview .card .card-title {
        margin: 0;
        padding: 0 0 6px 0;
        transition: all 0.3s ease;
        font-family: 'Prompt';
        font-weight: 600;
        font-size: 15px;
        letter-spacing: 0.2px;
        color: #121a35;
    }

    .layout-rpt-preview .card .card-subtitle {
        margin: 0;
        padding: 0;
        transition: all 0.3s ease;
        font-family: 'Prompt';
        font-weight: 500;
        font-size: 12px;
        color: #a3a7aa;
        line-height: 1;
        letter-spacing: 0.2px;
    }

    .layout-rpt-preview .card .card-body .card-text {
        margin-top: 10px;
        font-size: 13px;
        color: #838fa5;
    }

    .layout-rpt-preview .card .card-img-top {
        /*border-radius: 10px;*/
        border-radius: 0;
    }

/* ============================ */
/* BADGE */
/* ============================ */

.badge-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 575px) {
    .section-hero .badge-group {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .section-hero .section-header .badge i {
        font-size: 13px !important;
    }

    .section-hero .section-header .badge span {
        font-size: 13px;
    }
}

.scrollspy-module-section .badge {
    padding: 8px 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    color: #3F76B5;
    background: linear-gradient( 180deg, rgba(255,255,255,.95) 0%, #EEF5FD 100% );
    border: 1px solid rgba(86, 142, 204, .18);
    box-shadow: 0 8px 20px rgba(41, 88, 145, .08), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(10px);
}

    .scrollspy-module-section .badge i {
        font-size: 13px;
        color: #5A94D8;
    }

    .scrollspy-module-section .badge span {
        font-size: 13px;
        font-weight: 500;
    }

/*.scrollspy-module-section .badge {
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    border-radius: 999px;*/
/*color: #5E7F9F;*/
/*color: #6484A6;*/
/*background: rgba(255,255,255,.78);*/
/*background: linear-gradient( 180deg, #FFFFFF 0%, #F7FAFE 100% );*/
/*border: 1px solid rgba(160,180,205,.22);*/
/*border: 1px solid #E2EAF3;*/
/*box-shadow: 0 4px 12px rgba(31,45,61,.05), inset 0 1px 0 rgba(255,255,255,.9);*/
/*box-shadow: 0 6px 18px rgba(58,78,102,.05), inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all .25s ease;
}

    .scrollspy-module-section .badge i {
        font-size: 13px;*/
/*color: #7DA5D3;*/
/*color: #89AED8;
    }

    .scrollspy-module-section .badge span {
        font-size: 13px;
        font-weight: 500;
    }*/

.layout-rpt-preview .badge {
    padding: 8px 10px;
    border-radius: 99px;
    font-size: 11px;
    letter-spacing: 0.2px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.layout-rpt-preview .badge-pdf {
    /*background-color: #FDE2E2;*/
    /*color: #B42318;*/
    background-color: #fdeeef;
    color: #eb3540;
    /*border: 0.5px solid #F1AEB5;*/
    display: flex;
    align-items: center;
    justify-content: center;
}

.layout-rpt-preview .badge-excel {
    background-color: #DCFCE7;
    color: #166534;
    /*border: 0.5px solid #A3CFBB;*/
    display: flex;
    align-items: center;
    justify-content: center;
}

    .layout-rpt-preview .badge-pdf span,
    .layout-rpt-preview .badge-excel span {
        line-height: 1;
    }

.badge-recommend-price {
    background-color: green;
    /*background-color: #50C878;*/
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===================================== */
/* CUSTOM MODAL */
/* ===================================== */
.modal-content {
}

.modal-header {
    /* padding: 30px; */
}

.modal-body {
    padding: 30px;
}




/* ===================================== */
/* DROPZONE (DRAG & DROP) */
/* ===================================== */

#wrap {
    /*padding: 1.5rem 0;*/
    /*max-width: 600px;*/
    width: 100%;
    margin: 0 auto;
}

    #wrap p {
        margin: 0;
    }

#dropzone {
    border: 1.5px dashed #cbd5e1;
    border-radius: 24px;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, transform .2s ease, box-shadow .25s ease;
    padding: 1rem;
    background: linear-gradient( 145deg, #ffffff, #f8fafc );
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255,255,255,.8);
}

    #dropzone:hover {
        border-color: #93c5fd;
        box-shadow: 0 14px 40px rgba(59,130,246,.12), inset 0 1px 0 rgba(255,255,255,.9);
        transform: translateY(-2px);
    }

    #dropzone.dragover {
        background: linear-gradient( 145deg, #eff6ff, #dbeafe );
        border-color: #3b82f6;
        box-shadow: 0 0 0 5px rgba(59,130,246,.12), 0 20px 45px rgba(59,130,246,.18);
    }

    #dropzone .icon-wrap {
        width: 64px;
        height: 64px;
        border-radius: 20px;
        background: linear-gradient( 145deg, #ffffff, #eef2ff );
        border: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 20px rgba(15,23,42,.08);
    }

        #dropzone .icon-wrap i {
            font-size: 28px;
            color: #3b82f6;
        }

        #dropzone .icon-wrap svg {
            font-size: 28px;
            color: #3b82f6;
        }

    #dropzone p.main {
        font-size: 15px;
        font-weight: 600;
        color: #0f172a;
    }

    #dropzone p.sub {
        font-size: 13px;
        color: #64748b;
    }

    #dropzone span.browse {
        font-size: 13px;
        font-weight: 600;
        color: #2563eb;
        background: #eff6ff;
        padding: 6px 16px;
        border-radius: 999px;
        margin-top: 5px;
        border: 1px solid #bfdbfe;
    }

/* file list */

#file-list {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.file-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 14px 16px;
    box-shadow: 0 6px 18px rgba(15,23,42,.05);
    transition: .2s ease;
}

    .file-item:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 28px rgba(15,23,42,.09);
    }

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

.file-thumb {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .file-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .file-thumb i {
        font-size: 22px;
        color: #64748b;
    }

.file-meta {
    flex: 1;
    min-width: 0;
}

    .file-meta .name {
        font-size: 14px;
        font-weight: 600;
        color: #0f172a;
    }

    .file-meta .size {
        font-size: 12px;
        color: #64748b;
    }

/* status */

.file-status {
    font-size: 12px;
    font-weight: 600;
}

    .file-status.done {
        color: #16a34a;
    }

    .file-status.progress {
        color: #64748b;
    }

/* remove */

.btn-remove {
    background: #f8fafc;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: .2s;
    font-size: 14px;
}

    .btn-remove:hover {
        background: #fee2e2;
        color: #ef4444;
    }

/* progress */

.track {
    height: 5px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.bar {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient( 90deg, #60a5fa, #2563eb );
    transition: width .3s ease;
}

    .bar.done {
        background: linear-gradient( 90deg, #34d399, #16a34a );
    }

/* empty */

#empty-hint {
    margin-top: .8rem;
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
}

/* ================================== */
/* modal-dialog-scrollable  */
/* ================================== */

.modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}


    /* scrollbar */
    .modal-body::-webkit-scrollbar {
        width: 6px;
    }

    .modal-body::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

    .modal-body::-webkit-scrollbar-track {
        background: transparent;
    }

@media (min-width: 992px) {
    .modal.show .modal-dialog {
        -webkit-transform: translate(0);
        transform: translate(0);
    }
}

/* ================================== */
/* CUSTOM SCROLL  */
/* ================================== */

/* --- custom scroll ของ modal --- */
.custom-scroll {
    scrollbar-width: thin;
    scrollbar-color: #EFF2F6 #FFFFFF;
}

    .custom-scroll::-webkit-scrollbar {
        width: 6px;
    }

    .custom-scroll::-webkit-scrollbar-track {
        background: #F4F6F9;
        border-radius: 10px;
    }

    .custom-scroll::-webkit-scrollbar-thumb {
        background-color: #B8C5D6;
        border-radius: 10px;
        border: 1px solid #F4F6F9;
    }

        .custom-scroll::-webkit-scrollbar-thumb:hover {
            background-color: #9AACBF;
        }

/* --- custom scroll ของ modal (ถ้าไม่อยากให้แสดง scrollbar) --- */
.custom-scroll-none {
    -ms-overflow-style: none; /*IE/Edge */
    scrollbar-width: none; /*Firefox */
}

.custom-scroll::-webkit-scrollbar {
    display: none;
}

/* =================================== */

button.close {
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
    font-size: 16px;
    -webkit-appearance: none;
    /* position: absolute; */
    /* right: 15px; */
    z-index: 55;
}

/* ================================== */

.hidden {
    display: none;
}


/* =================================== */

.btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    width: 28px;
    border: 0;
    background: none;
}

    .btn-action svg {
        /*width: 24px;
        height: 24px;*/
        width: 22px;
        height: 22px;
    }

.btn-action-edit {
    /*color: #3F78B5;*/
    color: rgba(10, 132, 255, 0.85);
    transition: all 0.2s ease;
}

    .btn-action-edit:hover {
        /*color: #2F5F96;*/
        color: #0a84ff;
        transform: scale(1.1);
    }

.btn-action-delete {
    /*color: #C94A4A;*/
    color: rgba(255, 69, 58, 0.85);
    transition: all 0.2s ease;
}

    .btn-action-delete:hover {
        /*color: #A83A3A;*/
        color: #ff453a;
        transform: scale(1.1);
    }

/* ==================================== */

table {
    border: none;
    border-width: 0;
    border-collapse: collapse;
    border-spacing: 0;
}

    table td,
    table th {
        border: none;
    }

.table-header {
    height: 52px;
    background: linear-gradient( 180deg, #F3F6FB 0%, #E6ECF7 100% );
    border-bottom: 1px solid #D6DEEE;
}

    .table-header > th {
        text-align: center;
        vertical-align: middle;
        font-size: 14.5px;
        font-weight: 600;
        color: #2F3E4E;
        letter-spacing: 0.3px;
        padding: 12px 10px;
        white-space: nowrap;
    }

    .table-header a {
        color: #2F3E4E;
        font-size: 14.5px;
    }

/* ตัวตาราง */
.table-modern {
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(63, 120, 181, 0.12);
}

    /* Header */
    .table-modern thead {
        background: linear-gradient(180deg, #F3F6FB, #E6ECF7);
    }

        .table-modern thead th {
            font-size: 14px;
            font-weight: 600;
            color: #2F3E4E;
            text-align: center;
            padding: 14px 12px;
            border-bottom: 1px solid #D6DEEE;
            white-space: nowrap;
        }

    /* Body */
    .table-modern tbody td {
        font-size: 14px;
        color: #2F3E4E;
        /*padding: 12px;*/
        padding: 8px;
        vertical-align: middle;
        border-top: 1px solid #EEF2F8;
    }

    /* Zebra */
    .table-modern tbody tr:nth-child(even) {
        background: #F9FBFF;
    }

    /* Hover */
    .table-modern tbody tr:hover {
        background: #EDF3FF;
        transition: background .15s ease;
    }

.table-header-sub {
    height: 50px;
    /*background: linear-gradient( 180deg, #F3F6FB 0%, #E6ECF7 100% );*/
    /*background: linear-gradient(180deg, #FAFCFF 0%, #EEF3FB 100%);*/
    /*background: linear-gradient(180deg, #F5F9FF 0%, #E8EFF9 100%);*/
    background: linear-gradient(180deg, #F6F7F9 0%, #ECEFF3 100%);
    border-bottom: 1px solid #D6DEEE;
}

    .table-header-sub > th {
        text-align: center;
        vertical-align: middle;
        font-size: 13.2px;
        font-weight: 600;
        /*color: #2F3E4E;*/
        /*color: #6a7282;*/
        color: #64686B;
        letter-spacing: 0.3px;
        padding: 12px 10px;
        white-space: nowrap;
    }

    .table-header-sub a {
        /*color: #2F3E4E;*/
        /*color: #6a7282;*/
        color: #64686B;
        font-size: 13.2px;
    }

/* ตัวตารางย่อย */
.table-modern-sub {
    border-collapse: separate;
    border-spacing: 0;
    background: #FBFCFE;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

    /* Header ตารางย่อย */
    .table-modern-sub thead {
        background: linear-gradient(180deg, #F6F7F9, #ECEFF3);
    }

        .table-modern-sub thead th {
            font-size: 13px;
            font-weight: 600;
            color: #3B4652;
            text-align: center;
            padding: 10px 10px;
            border-bottom: 1px solid #E2E6ED;
            white-space: nowrap;
        }

    /* Body */
    .table-modern-sub tbody td {
        font-size: 13.5px;
        color: #3B4652;
        padding: 7px;
        vertical-align: middle;
        border-top: 1px solid #F0F2F6;
    }

    /* Zebra */
    .table-modern-sub tbody tr:nth-child(even) {
        background: #F7F8FA;
    }

    /* Hover */
    .table-modern-sub tbody tr:hover {
        background: #EEF1F5;
        transition: background .15s ease;
    }

/* ======================================= */

/* MIN-WIDTH เอาไปใช้แบบ So EZ */

.mn-w-40 {
    min-width: 40px;
}

.mn-w-50 {
    min-width: 50px;
}

.mn-w-60 {
    min-width: 60px;
}

.mn-w-70 {
    min-width: 70px;
}

.mn-w-80 {
    min-width: 80px;
}

.mn-w-90 {
    min-width: 90px;
}

.mn-w-100 {
    min-width: 100px;
}

.mn-w-110 {
    min-width: 110px;
}

.mn-w-120 {
    min-width: 120px;
}

.mn-w-130 {
    min-width: 130px;
}

.mn-w-140 {
    min-width: 140px;
}

.mn-w-160 {
    min-width: 160px;
}

.mn-w-180 {
    min-width: 180px;
}

.mn-w-200 {
    min-width: 200px;
}

.mn-w-220 {
    min-width: 220px;
}

.mn-w-240 {
    min-width: 240px;
}

.mn-w-260 {
    min-width: 260px;
}

.mn-w-280 {
    min-width: 280px;
}

.mn-w-300 {
    min-width: 300px;
}

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


/* MAX-WIDTH เอาไปใช้แบบ So EZ */

.mx-w-50 {
    max-width: 50px;
}

.mx-w-60 {
    max-width: 60px;
}

.mx-w-70 {
    max-width: 70px;
}

.mx-w-80 {
    max-width: 80px;
}

.mx-w-90 {
    max-width: 90px;
}

.mx-w-100 {
    max-width: 100px;
}

.mx-w-110 {
    max-width: 110px;
}

.mx-w-120 {
    max-width: 120px;
}

.mx-w-130 {
    max-width: 130px;
}

.mx-w-140 {
    max-width: 140px;
}

.mx-w-160 {
    max-width: 160px;
}

.mx-w-180 {
    max-width: 180px;
}

.mx-w-200 {
    max-width: 200px;
}

/* ======================================== */

.zoom-btn {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.4);
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #3e71e1;
    font-size: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,.15), inset 0 1px 1px rgba(255,255,255,.8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s cubic-bezier(.4,0,.2,1), background .25s ease, color .25s ease, box-shadow .25s ease;
    overflow: hidden;
}

    .zoom-btn i {
        transition: transform .25s ease;
    }

    .zoom-btn:hover {
        background: linear-gradient( 135deg, #3e71e1, #6d8ff5 );
        color: white;
        transform: translateY(-2px) scale(1.03);
        box-shadow: 0 10px 24px rgba(62,113,225,.25);
    }

        .zoom-btn:hover i {
            transform: scale(1.02) rotate(3deg);
        }

    .zoom-btn:active {
        transform: scale(.88);
        box-shadow: 0 5px 15px rgba(62,113,225,.25);
    }

    .zoom-btn:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    .zoom-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(62,113,225,.25), 0 10px 24px rgba(62,113,225,.25);
    }

    .zoom-btn::after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255,255,255,.45);
        transform: translate(-50%,-50%);
        left: 50%;
        top: 50%;
        opacity: 0;
        transition: width .35s ease, height .35s ease, opacity .35s ease;
    }


    .zoom-btn:active::after {
        width: 80px;
        height: 80px;
        opacity: 1;
    }

/* ================================== */

.custom-footer {
    padding: 60px 50px;
    background: radial-gradient(130% 130% at 80% 0%, #325373 0%, #102b47 35%, #0a233b 100%);
}

    .custom-footer h4 {
        color: #ffffff;
        font-size: 14px;
        margin-bottom: 20px;
        font-weight: 500;
        letter-spacing: 0.2px;
    }

    .custom-footer p {
        color: #9f9fa9;
        font-size: 13px;
        margin: 0;
        font-weight: 500;
    }

.footer-bg {
    background: linear-gradient(to bottom, rgba(35, 6, 15, 0) 28%, rgba(35, 6, 15, 0.35) 64%, rgba(35, 6, 15, 0.62) 100%);
}

.red-glow {
    pointer-events: none;
    position: absolute;
    left: -64px;
    bottom: 0;
    width: 18rem;
    height: 18rem;
    border-radius: 9999px;
    opacity: 0.5;
    filter: blur(64px);
    /*background: radial-gradient( circle, #ef4444 0%, transparent 70% );*/
    background: radial-gradient(circle, #9f8c8c 0%, transparent 70%);
}

.img-logo {
    width: 80px;
}

.footer .img-logo {
    cursor: default;
}

.footer-layout {
    padding: 30px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.footer-title {
}

.footer-menu-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0px, auto));
    gap: 70px;
}

.footer-menu {
    display: flex;
    flex-direction: column;
}

    .footer-menu a:hover {
        font-weight: 500;
    }

.footer-icon-layout {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-icon {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    border: 1px solid #ffffff1a;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #d4d4d8;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .footer-icon:hover i {
        color: #d4d4d8;
    }


    .footer-icon:hover {
        background-color: rgba(255, 255, 255, 0.22);
        border-color: rgba(255,255,255,0.35);
        transform: translateY(-3px);
        box-shadow: 0 8px 18px rgba(0,0,0,0.25), 0 0 12px rgba(255,255,255,0.15);
    }

    .footer-icon:active {
        transform: scale(0.92);
        background-color: rgba(255,255,255,0.3);
        box-shadow: 0 3px 8px rgba(0,0,0,0.25);
    }

    .footer-icon:focus i {
        color: #d4d4d8;
    }

    .footer-icon,
    .footer-icon:hover {
        text-decoration: none;
    }

.custom-footer hr {
    background-color: #ffffff;
    opacity: 0.2;
}

.copyright {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    width: 100%;
}

    .copyright p {
        padding: 0;
    }

/* ==================================== */

@media (min-width: 1024px) and (max-width: 1200px) {
    .custom-footer {
        width: 100%;
    }

        .custom-footer .container {
            padding: 0 30px
        }
}

@media (max-width: 1023px) {
    .footer-layout {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .copyright {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        width: 100%;
        flex-direction: column-reverse;
        gap: 20px;
    }
}

@media (max-width: 575px) {
    .footer-layout {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .footer-menu-group {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
}

/* ==================================== */

.video-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.video-box {
    width: 800px;
    max-width: 90%;
    background: #000;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

    .video-box video {
        width: 100%;
        display: block;
    }

.close-btn {
    position: absolute;
    right: 15px;
    top: 10px;
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: white;
    font-size: 25px;
    cursor: pointer;
}

.video-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 300px;
    z-index: 999;
}

.video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    overflow: hidden;
}


    .video-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

.custom-modal {
    margin-top: 120px;
}

/* ============================= */

.video-card {
    position: fixed;
    top: 120px;
    right: 20px;
    width: 360px;
    /*height: auto;*/
    background: #ffffff8c;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
    z-index: 9999;
    transition: .35s ease;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

    /* ซ่อนออกข้าง */
    .video-card.hide {
        right: -400px;
    }

    /* iframe */

    .video-card iframe {
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
        border: 0;
        border-radius: 14px;
        display: block;
    }

.video-frame {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
}


    .video-frame iframe {
        width: 100%;
        height: 100%;
        border: 0;
        transform: scale(1.07);
    }


.video-header {
    display: flex;
    align-items: center;
    padding: 15px;
    font-weight: 500;
    justify-content: space-between;
}

    .video-header g {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .video-header span {
        color: #0a0a0ab3;
        font-size: 12px
    }

    .video-header .dot {
        height: 6px;
        width: 6px;
        background-color: #FF0000;
        border-radius: 50%;
        display: inline-block;
        box-shadow: 0 0 10px rgba(255,0,0,.8);
        animation: dotBlink 1.2s infinite ease-in-out;
    }

/* animation */
@keyframes dotBlink {

    0% {
        opacity: .4;
        transform: scale(.8);
        box-shadow: 0 0 5px rgba(255,0,0,.5);
    }


    50% {
        opacity: 1;
        transform: scale(1.25);
        box-shadow: 0 0 14px rgba(255,0,0,1);
    }


    100% {
        opacity: .4;
        transform: scale(.8);
        box-shadow: 0 0 5px rgba(255,0,0,.5);
    }
}

.video-title {
    display: flex;
    flex-direction: column;
    padding: 15px;
    font-weight: 600;
}

    .video-title h3 {
        font-size: 14px;
        color: #0a0a0a;
        font-weight: 500;
    }

    .video-title p {
        font-size: 11px;
        color: #0a0a0a8c;
        margin: 0;
    }

.video-content {
    padding: 0 12px;
}

/* ปุ่มปิด */
.video-close {
    /*position: absolute;
    right: 8px;
    top: 8px;*/
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgb(225 225 225 / 60%);
    color: rgba(10, 10, 10, 0.6);
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
}

/* ปุ่มเรียกกลับ */

/*.video-open {
    position: fixed;
    top: 120px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #111;
    color: white;
    display: none;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}*/

.video-open {
    position: fixed;
    top: 120px;
    right: 20px;
    width: 44px;
    height: 44px;
    z-index: 9999;
    border-radius: 50%;
    /*border: 1px solid rgba(255,255,255,.22);*/
    border: 0;
    background: linear-gradient( 145deg, #ff8d8d, #ff0033 );
    color: #e6f7ff;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    font-size: 13px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 45px rgba(0,0,0,.45), inset 0 1px 2px rgba(255,255,255,.3);
    transition: .35s cubic-bezier(.2,.8,.2,1);
}


    /* glow */
    .video-open::before {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: inherit;
        opacity: 0;
        transition: .35s ease;
        background: radial-gradient( circle, rgba(255,70,90,.45), transparent 65% );
    }


    /* icon */
    .video-open i {
        transition: .35s ease;
    }


    /* hover */
    .video-open:hover {
        transform: translateY(-6px) scale(1.08);
        color: #ffffff;
        background: linear-gradient( 145deg, #ff5f6d, #d90429 );
        box-shadow: 0 20px 50px rgba(217,4,41,.35), 0 0 25px rgba(255,80,100,.35), inset 0 1px 3px rgba(255,255,255,.45);
    }


        .video-open:hover::before {
            opacity: 1;
            filter: blur(10px);
            /*background: radial-gradient( circle, rgba(147,197,253,.4), transparent 65% );*/
        }


    /* click */
    .video-open:active {
        transform: scale(.94);
    }


/* mobile */
@media(max-width:576px) {

    .video-open {
        width: 40px;
        height: 40px;
        right: 20px;
        bottom: 40px;
        font-size: 14px;
    }
}

.video-open.show {
    display: flex;
}

.icon-rotate {
    rotate: 90deg;
}


@media (min-width: 576px) and (max-width: 1023px) {
    .video-card {
        position: fixed;
        top: 120px;
        right: 20px;
        width: 300px;
        height: auto;
    }
}


@media (max-width: 575px) {
    .video-card {
        position: fixed;
        top: 120px;
        right: unset;
        width: 360px;
        height: auto;
        background: #ffffff8c;
        border-radius: 28px;
        overflow: hidden;
        box-shadow: 0 20px 50px rgba(0,0,0,.25);
        z-index: 9999;
        transition: .35s ease;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
}

/* ========================== */

.product-price-zone {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 30px 0;
    border-top: 1px solid #dce2e7;
    margin-top: 80px;
    background-color: #fbfbfb;
}

    .product-price-zone h4 {
        font-size: 24px;
        font-weight: 500;
        letter-spacing: 0.3px;
    }

.product-price {
    display: grid;
    grid-template-columns: repeat(3, minmax(0px, 1fr));
    gap: 30px;
    width: 100%;
    height: 100%;
}

    .product-price .card {
        border: 1px solid #dce2e7;
        border-radius: 20px;
        border: 0.5px solid rgba(120, 130, 150, 0.15);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(120, 130, 150, 0.08);
        overflow: hidden;
        transition: box-shadow 0.2s;
        box-sizing: border-box;
    }


.product-price-zone .card-body {
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-price-zone h3 {
    font-size: 16px;
    font-weight: 600;
    font-family: "Noto Sans Thai", "Noto Sans Thai Fallback";
}

.product-price-zone p {
    margin: 0;
    color: #606a74;
}

.product-price-zone .price span {
    font-size: 30px;
    font-weight: 600;
    font-family: IBM Plex Sans Thai;
    line-height: 1;
}

.gap-0 {
    gap: 0;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 1rem;
}

.gap-4 {
    gap: 1.5rem;
}

.gap-5 {
    gap: 3rem;
}

.product-price-zone ul {
    display: flex;
    flex-direction: column;
}

.product-price-zone li {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

    .product-price-zone li span {
        font-size: 14px;
        color: #64748b;
    }

    .product-price-zone li i {
        font-size: 14px;
        color: green;
    }

.card-fill {
    border: 3px solid transparent;
}

.recommend-price {
    border: 3px solid #163b5c !important;
}

.title-price {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 24px;
}

/* ================================== */
/* Page: Product */
/* ================================== */

.blog-grid-custom fieldset {
    border: 0;
}

.inscroller {
    width: 260px;
    position: -webkit-sticky;
    position: sticky;
    margin-left: 0;
    visibility: visible;
    -webkit-transition: margin-left 300ms ease, visibility 0s 0s;
    transition: margin-left 300ms ease, visibility 0s 0s;
}

.product-body {
    display: flex;
    gap: 20px;
}

.simplebar-wrapper {
    flex: 0 0 30%;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0px, 1fr));
    gap: 30px;
}

@media (max-width: 991px) {
    .product-grid {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
}

.product-wrapper {
    flex: 1;
}

.product-grid .card {
    border: 1px solid #dce2e7;
    border-radius: 36px;
    border: 0.5px solid rgba(120, 130, 150, 0.15);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(120, 130, 150, 0.08);
    overflow: hidden;
    transition: box-shadow 0.2s;
    box-sizing: border-box;
}


.standalone .product-grid .card-body {
    /*padding: 36px;*/
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.standalone .product-grid .card-img-wrapper {
    /*padding: 30px;*/
}

.standalone .product-grid .card-detail {
    padding: 30px;
    display: flex;
    justify-content: space-between;
    height: stretch;
}

.standalone .product-grid .btn-zone {
    width: 100%;
}

    .standalone .product-grid .btn-zone .btn-detail-outline {
        width: 100%;
    }

.title-product span {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.title-product h3 {
    font-size: 24px;
    font-weight: 800;
    font-family: "Noto Sans Thai", "Noto Sans Thai Fallback";
}

.title-product h4 {
    font-size: 14px;
    font-weight: 600;
    font-family: "Noto Sans Thai", "Noto Sans Thai Fallback";
}

.title-product p {
    font-size: 13px;
}

.badge-title {
    padding: 2px 10px;
    border-radius: 99px;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    width: fit-content;
    /*color: #163b5c;*/
    color: #3e6c95;
    background: linear-gradient( 135deg, #f4f8fc 0%, #dbe9f5 45%, #c8dced 100% );
    /*border: 1px solid rgba(22,59,92,.22);*/
    border: 1px solid rgb(14 92 161 / 13%);
    box-shadow: 0 10px 25px rgba(22,59,92,.18), inset 0 1px 2px rgba(255,255,255,.9);
    backdrop-filter: blur(8px);
}

.product-grid .badge-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

    .product-grid .badge-group .badge {
        padding: 6px 10px;
        border-radius: 99px;
        letter-spacing: 0.2px;
        display: flex;
        align-items: center;
        /*border: 1px solid rgb(14 92 161 / 13%);*/
        gap: 5px;
        background-color: #edf2f8;
    }

.badge-text1 {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.badge-text2 {
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

.product-grid ul {
    display: flex;
    flex-direction: column;
}

.product-grid li {
    display: flex;
    flex-direction: row;
    /*align-items: center;*/
    align-items: flex-start;
    gap: 8px;
}

    .product-grid li span {
        font-size: 13px;
        /*color: #64748b;*/
        color: #79889f;
    }

    .product-grid li i {
        font-size: 18px;
        color: #7ec17e;
    }

.card-reccommand .card {
    position: relative;
    overflow: visible;
    /*border: 2px solid #163b5c !important;*/
}

.badge-reccommand {
    position: absolute;
    top: -14px;
    left: 36px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    background: #163b5c;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    line-height: 1;
    z-index: 2;
    letter-spacing: 0.2px;
}

    .badge-reccommand i {
        font-size: 10px;
    }

.product-price .card {
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

    .product-price .card:hover {
        transform: translateY(-6px);
        border-color: rgba(53,91,125,.25);
        box-shadow: 0 20px 45px rgba(22,59,92,.18), 0 0 25px rgba(182,198,217,.35);
    }

.product-grid .card {
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

    .product-grid .card:hover {
        transform: translateY(-6px);
        border-color: rgba(53,91,125,.25);
        box-shadow: 0 20px 45px rgba(22,59,92,.18), 0 0 25px rgba(182,198,217,.35);
    }

.comparison-table-col {
    display: flex;
    align-items: center;
    justify-content: center;
}

/*.comparison-table .table td {
    display: flex;
    align-items: center;
    justify-content: center;
}*/

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-wrapper,
.gv-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e6e9ef;
    /*border-radius: 16px;*/
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(22,59,92,.08), 0 2px 8px rgba(0,0,0,.04);
    overflow-y: hidden;
    padding-bottom: 6px;
}

    .table-wrapper::-webkit-scrollbar,
    .gv-table-wrapper::-webkit-scrollbar {
        height: 6px;
    }

    .table-wrapper::-webkit-scrollbar-track,
    .gv-table-wrapper::-webkit-scrollbar-track {
        background: transparent;
    }

    .table-wrapper::-webkit-scrollbar-thumb,
    .gv-table-wrapper::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: 20px;
    }

.custom-table thead tr:first-child th:first-child {
    border-top-left-radius: 28px;
}

.custom-table thead tr:first-child th:last-child {
    border-top-right-radius: 28px;
}

.custom-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 28px;
}

.custom-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 28px;
}

.custom-table {
    width: 100%;
    min-width: 700px;
    /*background: #ffffff;*/
    /*border-radius: 16px;*/
    /*border: 1px solid #e6e9ef;*/
    border-collapse: separate;
    border-spacing: 0;
    /*overflow: hidden;*/
    color: #1a1a1a;
    font-family: 'Noto Sans Thai', sans-serif;
    /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);*/
    /*box-shadow: 0 10px 30px rgba(22, 59, 92, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);*/
}

.custom-table {
    border: none;
}

    .custom-table thead th {
        background: #f7f8fa;
        text-align: center;
        padding: 16px 20px;
        font-weight: 600;
        font-size: 15px;
        border-bottom: 1px solid #e6e9ef;
    }

        .custom-table thead th:first-child {
            text-align: left;
        }

    .custom-table thead .th-title {
        display: block;
        font-weight: 700;
        font-size: 15px;
        color: #1a1a1a;
    }

    .custom-table thead .th-subtitle {
        display: block;
        margin-top: 2px;
        font-weight: 600;
        font-size: 12px;
        color: #D71920;
        color: #d71920bf;
    }

    .custom-table tbody tr {
        border-bottom: 1px solid #eef0f3;
        transition: background 0.2s ease;
    }

        .custom-table tbody tr:last-child {
            border-bottom: none;
        }

        .custom-table tbody tr:hover {
            background: #fafbfc;
        }

    .custom-table tbody td {
        padding: 16px 20px;
        vertical-align: middle;
        font-size: 14px;
    }

    .custom-table tbody th {
        padding: 16px 20px;
        vertical-align: middle;
        font-size: 14px;
    }


    /* First column: icon + name + subtitle */
    .custom-table .cell-module {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 20px;
    }

    .custom-table .module-icon {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #eaf1fd;
        border-radius: 12px;
        /*color: #2563eb;*/
        color: #5594D8;
        font-size: 18px;
    }

    .custom-table .module-text {
        display: flex;
        flex-direction: column;
    }

    .custom-table .module-group-name {
        display: inline-flex;
        gap: 6px;
    }

        .custom-table .module-group-name span {
            font-weight: 700;
            font-size: 14px;
        }

    .custom-table .module-sub-name {
        color: #5594D8;
        font-weight: 800 !important;
    }

    .custom-table .module-name {
        /*color: #2563eb;*/
        /*color: #222222;*/
        color: #12203E;
    }

    .custom-table .module-desc {
        font-size: 12px;
        color: #8a8f98;
        margin-top: 2px;
    }
    /* Status column (check / dash) */
    .custom-table .cell-status {
        text-align: center;
    }

    .custom-table .status-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: #e6e9ef;
        color: #fff;
        font-size: 13px;
    }

        .custom-table .status-icon.status-yes {
            background: #7ec17e;
        }

        .custom-table .status-icon.status-no {
            background: #cdcdcd;
            border: 1.5px solid #d8dce3;
            color: #ffffff;
        }

/* ================================= */

.py-100 {
    padding: 100px 0;
}

.pt-100 {
    padding: 100px 0 0 0;
}

.pb-100 {
    padding: 0 0 100px 0;
}

.mt-100 {
    margin: 100px 0 0 0;
}

.mb-100 {
    margin: 0 0 100px 0;
}

.mt-6 {
    margin-top: 5rem;
}

.single-module {
}

    .single-module .product-grid h3 {
        font-size: 22px;
    }

    .single-module .product-grid li {
        font-size: 6px;
        color: #7ec17e;
    }

        .single-module .product-grid li i {
            font-size: 6px;
            color: #5BA1EB;
            margin-top: 8px;
        }

    .single-module .module-icon {
        width: 54px;
        height: 54px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #eaf1fd;
        border-radius: 20px;
        color: #5594D8;
        font-size: 18px;
    }

.module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0px, 1fr));
    gap: 20px;
}

@media (max-width: 991px) {
    .module-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0px, 1fr));
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .module-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
}

.module-grid .module-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf1fd;
    border-radius: 999px;
    color: #5594D8;
    font-size: 16px;
}

.module-grid .module-card-link {
}

.module-grid .card {
    border: 1px solid #dce2e7;
    border-radius: 36px;
    border: 0.5px solid rgba(120, 130, 150, 0.15);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(120, 130, 150, 0.08);
    overflow: hidden;
    transition: box-shadow 0.2s;
    box-sizing: border-box;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

    .module-grid .card:hover {
        transform: translateY(-2px);
        border-color: rgba(53,91,125,.25);
        box-shadow: 0 18px 45px rgba(22,59,92,.14), 0 8px 20px rgba(0,0,0,.08), 0 0 0 1px rgba(53,91,125,.08);
    }

        .module-grid .card:hover .module-icon {
            background: #5594D8;
            color: #eaf1fd;
        }

    .module-grid .card .card-body {
        padding: 24px;
    }

.module-grid .module-head {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.module-icon-text {
    font-family: "Noto Sans" !important;
    font-weight: 800 !important;
    font-size: 15px !important;
}

.module-grid .module-text {
    display: flex;
    flex-direction: column;
    font-family: "Noto Sans Thai", sans-serif;
}

.module-grid .module-sub-name {
    color: #5594D8;
    font-weight: 700 !important;
    font-size: 14px;
}

.module-grid .module-sub-name2 {
    font-weight: 600 !important;
    font-size: 12px;
}

.module-grid .module-name {
    /*color: #222222;*/
    color: #12203E;
    font-weight: 600 !important;
    font-size: 14px;
}

.module-grid p {
    font-size: 13px;
}

.section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-family: "Noto Sans Thai",sans-serif;
}

.eyebrow-text {
    color: #5594D8;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.heading-text {
    font-size: 36px;
    font-weight: 800;
    font-family: "Noto Sans Thai",sans-serif;
}

.subheading-text {
    font-size: 16px;
}

.g-heading-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}


@media (max-width: 768px) {
    .section-header {
        padding: 0 20px;
    }

    .eyebrow-text {
        font-size: 14px;
    }

    .heading-text {
        font-size: 24px;
        text-align: center;
        line-height: 1.6;
    }

    .subheading-text {
        font-size: 13px;
        text-align: center;
        line-height: 1.6;
    }
}

#standalone {
    background: #e7ebef66;
}

.cta-section {
    /*padding: 100px 20px;*/
    background: #f5f7fa;
}

.cta-card {
    position: relative;
    overflow: hidden;
    max-width: 1200px;
    margin: auto;
    padding: 80px;
    background: #fff;
    border-radius: 32px;
    border: 1px solid #E6EAF0;
    box-shadow: 0 25px 70px rgba(22,59,92,.12), 0 10px 25px rgba(0,0,0,.05);
}
    /* Aurora Red */
    .cta-card::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        left: -180px;
        top: -180px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(215,25,32,.12), transparent 70%);
    }
    /* Aurora Blue */
    .cta-card::after {
        content: "";
        position: absolute;
        width: 360px;
        height: 360px;
        right: -150px;
        bottom: -150px;
        border-radius: 50%;
        /*background: radial-gradient(circle, rgba(22,59,92,.10), transparent 70%);*/
        background: radial-gradient(circle, rgb(22 59 92 / 12%), transparent 70%);
    }

.cta-card {
    background-image: linear-gradient( rgba(22,59,92,.03) 1px, transparent 1px), linear-gradient( 90deg, rgba(22,59,92,.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

.cta-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.btn-section-header {
    display: flex;
    justify-content: center;
}

    .btn-section-header .btn-contact {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 20px;
        border-radius: 20px;
        background: #D71920;
        color: #fff;
        text-decoration: none;
        font-weight: 700;
        transition: .3s;
    }

        .btn-section-header .btn-contact p {
            margin: 0;
            font-size: 14px;
            font-weight: 500;
        }

        .btn-section-header .btn-contact i {
            font-size: 12px;
        }

        .btn-section-header .btn-contact:hover {
            transform: translateY(-2px);
            background: #C5161E;
            box-shadow: 0 15px 30px rgba(215,25,32,.25);
        }

        .btn-section-header .btn-contact:active {
            transform: translateY(1px) scale(.98);
            background: #B9151C;
            box-shadow: 0 3px 8px rgba(215,25,32,.18), inset 0 2px 4px rgba(0,0,0,.12);
        }

        .btn-section-header .btn-contact:focus-visible {
            outline: none;
            box-shadow: 0 0 0 4px rgba(215,25,32,.18), 0 10px 24px rgba(215,25,32,.22);
        }

.cta-section .heading-text {
    font-size: 32px;
}

@media (max-width:768px) {

    .cta-card {
        padding: 50px 30px;
    }

    .cta-section .heading-text {
        font-size: 20px;
        text-align: center;
        line-height: 1.6;
    }

    .cta-section .subheading-text {
        font-size: 12px;
        text-align: center;
        line-height: 1.6;
    }

    .btn-section-header .btn-contact {
        width: 100%;
        justify-content: center;
        gap: 8px;
        padding: 6px 16px;
    }

        .btn-section-header .btn-contact p {
            font-size: 12px;
        }

        .btn-section-header .btn-contact i {
            font-size: 12px;
        }
}

@media (min-width:769px) and (max-width:991px) {

    .cta-card {
        padding: 50px 30px;
    }

    .cta-section .heading-text {
        font-size: 20px;
        text-align: center;
        line-height: 1.6;
    }

    .cta-section .subheading-text {
        font-size: 12px;
        text-align: center;
        line-height: 1.6;
    }

    .btn-section-header .btn-contact {
        width: 100%;
        justify-content: center;
        gap: 8px;
        padding: 6px 16px;
    }

        .btn-section-header .btn-contact p {
            font-size: 12px;
        }

        .btn-section-header .btn-contact i {
            font-size: 12px;
        }
}
/* ================================ */
/* Delay ให้ Card แสดงทีละใบ */
/* ================================ */

.delay-1 {
    transition-delay: 0s;
}

.delay-2 {
    transition-delay: .8s;
}

.delay-3 {
    transition-delay: .16s;
}

.delay-4 {
    transition-delay: .24s;
}

.delay-5 {
    transition-delay: .32s;
}

.delay-6 {
    transition-delay: .40s;
}

.delay-7 {
    transition-delay: .48s;
}

.delay-8 {
    transition-delay: .56s;
}

.delay-9 {
    transition-delay: .64s;
}

.delay-10 {
    transition-delay: .72s;
}
/*.reveal {
    transition-delay: calc(var(--delay) * 80ms);
}*/
/* ================================ */
/* รูปแบบของ Animation */
/* ================================ */

.fade-up {
    opacity: 0;
    transform: translateY(40px);
}

.fade-left {
    opacity: 0;
    transform: translateX(-40px);
}

.fade-right {
    opacity: 0;
    transform: translateX(40px);
}

.zoom {
    opacity: 0;
    transform: scale(.92);
}

.reveal.show {
    opacity: 1;
    transform: none;
    transition: transform .8s cubic-bezier(.22,.61,.36,1), opacity .8s ease;
}
/* ================================== */
/* Reveal Animation */
/* ================================== */

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .8s ease, transform .8s ease;
}

    .reveal.show {
        opacity: 1;
        transform: translateY(0);
        /*transform: none;*/
    }
/* ================================== */

.section-hero {
    padding: 80px 20px;
}

    .section-hero .section-header .heading-text h2 {
        font-size: 50px;
    }

    .section-hero .section-header .badge-group {
        display: flex;
        gap: 8px;
    }

    .section-hero .section-header .badge {
        padding: 8px 12px;
        border-radius: 99px;
        font-size: 14px;
        letter-spacing: 0.2px;
        font-weight: 400;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

        .section-hero .section-header .badge i {
            font-size: 16px;
            color: #5594D8;
            /*color: #3e6c95;*/
        }

    .section-hero .btn-section-header {
        display: flex;
        gap: 10px;
    }
/*.btn-section-header a {
    display: flex;
    width: auto;
}*/
/* ============================ */

.badge-heading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .2px;
    color: #4B6A88;
    background: linear-gradient( 135deg, #FFFFFF 0%, #F8FBFD 45%, #EEF5FA 100% );
    border: 1px solid rgb(53 91 125 / 11%);
    box-shadow: 0 4px 12px rgb(22 59 92 / 16%), 0 1px 2px rgba(22, 59, 92, .03), inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: all .25s ease;
    position: absolute;
    top: 30px;
}

    .badge-heading:hover {
        transform: translateY(-1px);
        border-color: rgba(53,91,125,.14);
        box-shadow: 0 8px 22px rgba(22,59,92,.08), inset 0 1px 0 rgba(255,255,255,.95);
    }

    .badge-heading i {
        font-size: 8px;
        /*color: #5594D8;*/
        color: #b42328;
    }
/* ================================ */

.spec-product-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 40px;
    align-items: start;
    /*display: flex;
    gap: 40px;
    align-items: flex-start;*/
}

@media (max-width: 1023px) {
    .spec-product-layout {
        display: flex;
        flex-direction: column;
    }
}

.sidebar-category {
    /*position: sticky;
    top: 100px;
    height: fit-content;
    width: 100%;
    min-width: 0;*/
    position: sticky;
    top: 0;
    align-self: flex-start;
    z-index: 1;
}

.scrollspy-step {
}

.heading-list-category {
    font-size: 12px;
    padding-bottom: 10px;
    font-weight: 500;
    padding: 14px;
    color: #64748ba3;
    display: flex;
    gap: 6px;
}

.sidebar-category .menu-modern {
    padding: 12px;
    border: none;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 20px 40px rgba(18,32,62,.08), 0 8px 20px rgba(18,32,62,.05);
    border: 1px solid rgba(18,32,62,.05);
}
    /* ======================================== */
    /* list-group-item-action */
    /* ======================================== */

    .sidebar-category .menu-modern .list-group-item-action {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        margin: 4px 0;
        border-radius: 14px;
        /*color: #64748b;*/
        color: #79889f;
        font-weight: 500 !important;
        background: transparent;
        transition: background-color .25s ease, color .25s ease, transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
    }
        /* ไอคอน */
        .sidebar-category .menu-modern .list-group-item-action .category-icon i {
            color: #6c757d;
            transition: color .25s ease;
            font-size: 16px;
        }
        /* Hover */
        .sidebar-category .menu-modern .list-group-item-action:hover {
            background: #F6F9FE;
            /*transform: translateX(4px);*/
            color: #3e6c95 !important;
            /*color: #5594D8 !important;*/
        }

            .sidebar-category .menu-modern .list-group-item-action:hover .category-icon i {
                /*color: #5594D8;*/
                color: #3e6c95;
            }
        /* แถบสีด้านซ้าย (ใช้ร่วมกันทั้ง hover และ active) */
        .sidebar-category .menu-modern .list-group-item-action::before {
            content: "";
            position: absolute;
            left: 0;
            top: 10px;
            bottom: 10px;
            width: 4px;
            border-radius: 99px;
            /*background: linear-gradient(to bottom, #4A6F91, #3e6c95);*/
            background: linear-gradient(to bottom, #7ea8d5, #5594D8);
            transform: scaleY(0);
            transition: .25s;
        }
        /*.sidebar-category .menu-modern .list-group-item-action:hover::before {
            transform: scaleY(1);
        }*/

        .sidebar-category .menu-modern .list-group-item-action:hover .arrow {
            opacity: 1;
            transform: translateX(0);
        }

        .sidebar-category .menu-modern .list-group-item-action:focus-visible {
            outline: none;
            background: linear-gradient(90deg, rgba(62,108,149,.04), rgba(62,108,149,.015));
            box-shadow: inset 0 0 0 1px rgba(62,108,149,.08), 0 4px 12px rgba(18,32,62,.04);
        }

        .sidebar-category .menu-modern .list-group-item-action:active {
            transform: translateX(6px) scale(.98);
        }

        .sidebar-category .menu-modern .list-group-item-action span {
            font-size: 13px;
            line-height: 1.3;
            flex: 1;
            min-width: 0;
            white-space: normal;
            overflow-wrap: anywhere;
        }
        /* ===== Active state (ค้างไว้หลังคลิก เหมือน hover) ===== */
        .sidebar-category .menu-modern .list-group-item-action.active {
            /*background: #F6F9FE;*/
            background: #f2f7ff;
            /*color: #3e6c95 !important;*/
            color: #5594D8 !important;
            /*transform: translateX(4px);*/
        }

            .sidebar-category .menu-modern .list-group-item-action.active .category-icon i {
                color: #5594D8;
                /*color: #3e6c95;*/
            }

            .sidebar-category .menu-modern .list-group-item-action.active::before {
                transform: scaleY(1);
            }
/*.btn-prev {
    rotate: 180deg;
    display: none;
    background-color: transparent;
    margin-right: 10px;
    border: 0;
    color: #c1c8d1;
    font-size: 20px;
}

.btn-next {
    display: none;
    background-color: transparent;
    margin-left: 10px;
    border: 0;
    color: #c1c8d1;
    font-size: 20px;
}*/

.btn-prev,
.btn-next {
    display: none;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #c1c8d1;
    font-size: 20px;
    cursor: pointer;
    transition: all .25s ease;
}

.btn-prev {
    rotate: 180deg;
    margin-right: 10px;
}

.btn-next {
    margin-left: 10px;
}

    .btn-prev:hover,
    .btn-next:hover {
        color: #4E87D9;
        /*background: rgba(78, 135, 217, .08);*/
        transform: translateX(2px);
        /*box-shadow: 0 8px 18px rgba(78, 135, 217, .12);*/
    }

    .btn-prev:active,
    .btn-next:active {
        transform: translateY(0) scale(.96);
        /*box-shadow: 0 3px 8px rgba(78, 135, 217, .10);*/
    }

    .btn-prev:focus-visible,
    .btn-next:focus-visible {
        outline: none;
        /*box-shadow: 0 0 0 3px rgba(78, 135, 217, .18), 0 8px 18px rgba(78, 135, 217, .12);*/
    }
/* ====================================== */

#blog-spec-product {
    scroll-margin-top: 100px; /* ปรับตามความสูงของ navbar + padding ที่ต้องการ */
}

@media (max-width: 1023px) {
    .content .scrollspy-module-section .section {
        padding-top: 30px;
    }
}

@media (max-width: 1023px) {
    .spec-product-layout {
        gap: 0;
    }

    .btn-prev {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .btn-next {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }


    .sidebar-category {
        width: 100%;
    }

        .sidebar-category .heading-list-category {
            display: none;
        }

        .sidebar-category .menu-modern .list-group-item-action {
            gap: 6px;
        }

            .sidebar-category .menu-modern .list-group-item-action .category-icon i {
                font-size: 13px;
            }

        .sidebar-category .scrollspy-step {
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .sidebar-category .scrollspy-step ul {
                display: flex;
                gap: 10px;
                overflow-x: auto;
                overflow-y: hidden;
                flex-wrap: nowrap;
                scroll-behavior: smooth;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }

                .sidebar-category .scrollspy-step ul::-webkit-scrollbar {
                    display: none;
                }

        .sidebar-category .menu-modern .list-group-item-action span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
}

@media (max-width: 767px) {
    .sidebar-category .menu-modern .list-group-item-action span {
        display: none;
    }
}
/* ====================================== */

.category-layout {
}

    .category-layout h1 {
        font-family: "Noto Sans Thai";
        font-size: 28px;
        font-weight: 800;
        color: #12203E;
    }

    .category-layout p {
        /*color: #64748b;*/
        color: #79889f;
    }

    .category-layout .title-product h3 {
        font-size: 20px;
    }

    .category-layout .title-product h4 {
        font-size: 14px;
    }

.scrollspy-module-section .card {
    border-radius: 28px;
}

    .scrollspy-module-section .card .card-body {
        padding: 0;
    }

.scrollspy-module-section .product-grid .card .card-body {
    display: flex;
    flex-direction: column;
}

    .scrollspy-module-section .product-grid .card .card-body .title-product p {
        font-size: 13px;
        line-height: 1.5;
    }

.scrollspy-module-section .product-grid .module-grid {
    display: flex;
    flex-direction: column;
}

    .scrollspy-module-section .product-grid .module-grid .card {
        border-radius: 28px;
    }

        .scrollspy-module-section .product-grid .module-grid .card .card-body {
            padding: 20px;
        }

    .scrollspy-module-section .product-grid .module-grid .heading-list-category {
        font-size: 13px;
        padding: 4px 0 0 0;
    }


.card-img-wrapper {
}

.card-img-top {
    width: 100%;
    /*height: 220px;*/
    height: 100%;
    object-position: center;
    border-radius: 28px 28px 0 0;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .35s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

@media (max-width: 991px) {
    .card-img-top {
        height: 100%;
    }
}

@media (max-width: 991px) {
    .card-img-top {
        height: 100%;
    }
}

.layout-rpt-preview .card-img-top {
    width: 100%;
}

.card:hover .card-img-top {
    /*transform: scale(1.01);*/
    filter: saturate(1.08) contrast(1.03);
}

.card-detail {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: stretch;
}

    .card-detail .btn-zone {
        display: inline-flex;
        justify-content: flex-end;
        width: 100%;
    }


.abc {
    display: grid;
    grid-template-rows: 1fr 1fr;
    height: -webkit-fill-available;
    gap: 30px;
}
/* ========================================= */
/* รูปพื้นหลังสินค้า แบบอยู่ด้านล่างของข้อความ */
.backgrond-img-program {
    overflow: hidden;
    border-end-start-radius: inherit;
    border-end-end-radius: inherit;
    /*mask-image: radial-gradient( ellipse at center, rgba(0,0,0,1) 45%, rgba(0,0,0,.85) 65%, rgba(0,0,0,.4) 82%, transparent 100% );*/

    mask-image: linear-gradient(0deg, #fff 94%, rgba(0,0,0,0.25) 99%, transparent 100% );
    -webkit-mask-image: linear-gradient(0deg, #fff 94%, rgba(0,0,0,0.25) 99%, transparent 100% );
    /*-webkit-mask-image: radial-gradient( ellipse at center, rgba(0,0,0,1) 45%, rgba(0,0,0,.85) 65%, rgba(0,0,0,.4) 82%, transparent 100% );*/
}

    .backgrond-img-program img {
        width: 100%;
    }
/* รูปพื้นหลังสินค้า แบบอยู่ด้านล่างของข้อความ */
/* รูปพื้นหลังสินค้า แบบใสอยู่หลังข้อความ */
.backgrond-img-program2 {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: .20;
    overflow: hidden;
    /* ให้ขอบรูปค่อย ๆ จาง */
    mask-image: radial-gradient( ellipse at center, rgba(0,0,0,1) 45%, rgba(0,0,0,.85) 65%, rgba(0,0,0,.4) 82%, transparent 100% );
    -webkit-mask-image: radial-gradient( ellipse at center, rgba(0,0,0,1) 45%, rgba(0,0,0,.85) 65%, rgba(0,0,0,.4) 82%, transparent 100% );
}

    .backgrond-img-program2 img {
        width: 100%;
    }
/* เนื้อหาอยู่เหนือรูป */
.card-body {
    position: relative;
    z-index: 2;
}
/* รูปพื้นหลังสินค้า แบบใสอยู่หลังข้อความ */
/* ========================================== */


#hero {
    position: relative;
    overflow: hidden;
    background: #fff;
}

    #hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
    }

    #hero::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 40%; /* ส่วนที่ต้องการให้ค่อยๆ จาง */
        z-index: 1;
        pointer-events: none;
        background: linear-gradient( to bottom, rgba(255,255,255,0), #F5F7FA );
    }

    #hero > * {
        position: relative;
        z-index: 2;
    }

.genaral-program #hero::before {
    background-image: linear-gradient(to right, rgba(21, 89, 181, .06) 1px, transparent 1px), linear-gradient(to bottom, rgba(21, 89, 181, .06) 1px, transparent 1px);
    background-size: 60px 60px;
}

.spec-program #hero::before {
    /*content: "";
    position: absolute;
    inset: 0;
    z-index: 0;*/
    /*background: conic-gradient(at 50% 25%,#0000 75%,#ffffff 0),conic-gradient(at 50% 25%,#0000 75%,#ffffff 0) 50px 50px, conic-gradient(at 50% 25%,#0000 75%,#ffffff 0) calc(2*50px) calc(2*50px), conic-gradient(at 50% 25%,#0000 75%,#ffffff 0) calc(3*50px) calc(3*50px), repeating-linear-gradient(135deg,rgba(143,199,255,0.06) 0 12.5%,rgba(245, 250, 255, 0.06) 0 25%);
    background-size: calc(4 * 50px) calc(4*50px);*/
    background-image: radial-gradient(circle at center center, rgba(176, 213, 255, 0.08), #ffffff), repeating-radial-gradient(circle at center center, rgba(176, 213, 255, 0.08), rgba(176, 213, 255, 0.08), 50px, transparent 100px, transparent 50px);
    background-blend-mode: multiply;
    background-color: #ffffff;
    background-size: unset;
}

.accounting-product #hero::before {
    background-image: repeating-linear-gradient(to right, #f4f7ff, #f4f7ff 2px, transparent 2px, transparent);
    background-size: 70px 70px;
    background-color: #fcfcff;
    opacity: .65;
}

.web-app #hero::before {
    background: conic-gradient(from -116.36deg at 25% 75%,#fafaff 52.72deg,#0000 0), conic-gradient(from -116.36deg at 25% 75%,#fafaff 52.72deg,#0000 0) calc(3*100px) calc(100px/2), conic-gradient(from 63.43deg at 75% 75%,#fafaff 52.72deg,#0000 0), conic-gradient(from 63.43deg at 75% 75%,#fafaff 52.72deg,#0000 0) calc(3*100px) calc(100px/2), conic-gradient( #f5f7ff 63.43deg,#fcfcff 0 116.36deg, #f5f7ff 0 180deg,#fcfcff 0 243.43deg, #f5f7ff 0 296.15deg,#fcfcff 0);
    background-size: 200px 100px;
    opacity: .6;
}

.app #hero::before {
    background: conic-gradient(at 50px calc(100% - 50px),#0000 270deg,#fcfcff 0) calc(50px + 37.5px) 0, linear-gradient(#f6f8ff 50px,#0000 0) 0 37.5px, conic-gradient(at 50px calc(100% - 50px),#0000 90deg,#f6f8ff 0 180deg, #fcfcff 0), #fafaff;
    background-size: calc(2*(50px + 37.5px)) calc(2*(50px + 37.5px));
    opacity: .8;
}

.custom-software #hero::before {
    background: conic-gradient(from 0deg at calc(500%/6) calc(100%/3),#f4f7ff 0 120deg,#0000 0), conic-gradient(from -120deg at calc(100%/6) calc(100%/3),#fafaff 0 120deg,#0000 0), conic-gradient(from 120deg at calc(100%/3) calc(500%/6),#fcfcff 0 120deg,#0000 0), conic-gradient(from 120deg at calc(200%/3) calc(500%/6),#fcfcff 0 120deg,#0000 0), conic-gradient(from -180deg at calc(100%/3) 50%,#fafaff 60deg,#fcfcff 0 120deg,#0000 0), conic-gradient(from 60deg at calc(200%/3) 50%,#fcfcff 60deg,#f4f7ff 0 120deg,#0000 0), conic-gradient(from -60deg at 50% calc(100%/3),#fcfcff 120deg,#fafaff 0 240deg,#f4f7ff 0);
    background-size: 242px 140px;
    opacity: .65;
}

.banner {
}

    .banner .card {
        border-radius: 28px;
    }

    .banner .banner-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

        .banner .banner-layout .card-img-wrapper {
            padding: 30px;
        }

            .banner .banner-layout .card-img-wrapper .card-img-top2 {
                width: 100%;
                height: 100%;
                /*object-fit: cover;*/
                object-position: center;
                /*border-radius: 24px;*/
                border-radius: 28px;
                /*aspect-ratio: 4 / 3;*/
                aspect-ratio: 1 / 1;
                transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .35s ease;
                box-shadow: 0 10px 30px rgba(0,0,0,.08);
            }

    .banner .card-detail {
        padding: 50px 30px;
    }

        .banner .card-detail .title-product h3 {
            font-size: 20px;
            letter-spacing: 0.4px;
        }

        .banner .card-detail .title-product .text-hightlight {
            font-size: 34px;
            /*color: #b42328;*/
            /*color: #032263;*/
            color: #3c517f;
            font-weight: 900;
        }

        .banner .card-detail .title-product h4 {
            font-size: 14px;
        }

        .banner .card-detail .title-product p {
            font-size: 13px;
            line-height: 1.5;
        }

    .banner .btn-zone {
        display: inline-flex;
        justify-content: flex-start;
    }

.badge-product {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    color: #0369a1;
    color: #5594D8;
    background: linear-gradient( 180deg, #ffffff 0%, #f0f9ff 100% );
    border: 1px solid rgba(3, 105, 161, .12);
    box-shadow: 0 2px 8px rgba(14, 165, 233, .08), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(6px);
    width: fit-content;
    transition: all .25s ease;
}

    .badge-product:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(14,165,233,.12), inset 0 1px 0 rgba(255,255,255,.95);
    }

    .badge-product i {
        font-size: 13px;
        /*color: #0284c7;*/
        color: #5594D8;
    }

    .badge-product span {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .25px;
        font-family: "Noto Sans Thai";
    }
/* ================================= */
/* banner-layout */
/* ================================= */
/*@media (max-width: 991px) {
    .banner .banner-layout {
        display: flex;
        flex-direction: column;
    }

        .banner .banner-layout .card-img-wrapper .card-img-top2 {
            border-radius: 28px 28px 0 0;
        }
}*/

@media (max-width: 767px) {
    .banner .banner-layout {
        display: flex;
        flex-wrap: wrap-reverse;
    }

        .banner .banner-layout .card-detail {
            padding: 20px;
            gap: 30px;
        }

        .banner .banner-layout .card-img-wrapper {
            padding: 20px;
        }

    .banner .card-detail .title-product .text-hightlight {
        font-size: 30px;
        /*color: #b42328;*/
        /*color: #032263;*/
        color: #3c517f;
        font-weight: 900;
    }

    .banner .card-detail .title-product h3 {
        font-size: 18px;
        letter-spacing: 0.4px;
    }

    .banner .card-detail .title-product h4 {
        font-size: 14px;
    }

    .banner .card-detail .title-product p {
        font-size: 13px;
        line-height: 1.5;
    }
}

@media (min-width: 767px) and (max-width: 1199px) {
    .banner .card-detail {
        padding: 30px;
    }

        .banner .card-detail .title-product .text-hightlight {
            font-size: 30px;
        }

        .banner .card-detail .title-product h3 {
            font-size: 16px;
        }

        .banner .card-detail .title-product h4 {
            font-size: 13px;
        }
}
/*.banner .badge-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}*/

.banner .badge-group .badge {
    padding: 6px 10px;
    border-radius: 99px;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    /*border: 1px solid rgb(14 92 161 / 13%);*/
    gap: 5px;
    background-color: #edf2f8;
}

.banner .badge-group .badge {
    transition: all .25s ease;
}

    .banner .badge-group .badge:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
        border-color: rgba(78, 135, 217, .22);
        /*background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFF 100%);*/
        background: linear-gradient(145deg, #EDF2FA 0%, #DFE5ED 100%);
        /*background: #dde6f0;*/
    }

.banner .badge-group .badge-2 {
    padding: 6px 10px;
    border-radius: 99px;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    /*border: 1px solid rgb(14 92 161 / 13%);*/
    gap: 5px;
    background: #ECFDF5;
    /*border: 1px solid #C7F3DF;*/
    color: #15803D;
}

    .banner .badge-group .badge-2 .badge-text2 {
        color: #69957a;
    }

    .banner .badge-group .badge-2:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
        border-color: rgba(78, 135, 217, .22);
        /*background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFF 100%);*/
        background: linear-gradient(145deg, #E9F5EF 0%, #D5EDE2 100%);
        /*background: #dde6f0;*/
    }

.content .banner ul {
    display: flex;
    flex-direction: column;
}

.content .banner li {
    display: flex;
    flex-direction: row;
    align-items: center;
    /*align-items: flex-start;*/
    gap: 8px;
}

    .content .banner li span {
        font-size: 13px;
        /*color: #64748b;*/
        color: #79889f;
    }

    .content .banner li i {
        font-size: 16px;
        color: #7ec17e;
    }

.compare .banner {
}

    .compare .banner .card {
        border-radius: 28px;
    }

    .compare .banner .banner-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

        .compare .banner .banner-layout .card-img-wrapper {
            padding: 30px;
        }

            .compare .banner .banner-layout .card-img-wrapper .card-img-top2 {
                width: 100%;
                height: 100%;
                object-position: center;
                border-radius: 28px;
                aspect-ratio: 1 / 1;
                transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .35s ease;
                box-shadow: 0 10px 30px rgba(0,0,0,.08);
            }

    .compare .banner .card-detail {
        padding: 30px;
    }

        .compare .banner .card-detail .title-product h3 {
            font-size: 20px;
            letter-spacing: 0.4px;
        }

        .compare .banner .card-detail .title-product .text-hightlight {
            font-size: 34px;
            color: #3c517f;
            font-weight: 900;
        }

        .compare .banner .card-detail .title-product h4 {
            font-size: 14px;
        }

        .compare .banner .card-detail .title-product p {
            font-size: 14px;
            line-height: 1.5;
        }

    .compare .banner .btn-zone {
        display: inline-flex;
        justify-content: flex-start;
    }

@media (max-width: 991px) {
    .compare .banner .banner-layout {
        display: flex;
        flex-wrap: wrap-reverse;
    }

    .compare .banner .none-reverse {
        display: flex;
        flex-wrap: wrap;
    }

    .compare .banner .banner-layout .card-detail {
        padding: 20px;
        gap: 30px;
    }

    .compare .banner .banner-layout .card-img-wrapper {
        padding: 20px;
    }

    .compare .banner .card-detail .title-product .text-hightlight {
        font-size: 30px;
        /*color: #b42328;*/
        /*color: #032263;*/
        color: #3c517f;
        font-weight: 900;
    }

    .compare .banner .card-detail .title-product h3 {
        font-size: 18px;
        letter-spacing: 0.4px;
    }

    .compare .banner .card-detail .title-product h4 {
        font-size: 14px;
    }

    .compare .banner .card-detail .title-product p {
        font-size: 13px;
        line-height: 1.5;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .compare .banner .card-detail {
        padding: 30px;
        gap: 15px;
    }

        .compare .banner .card-detail .title-product .text-hightlight {
            font-size: 28px;
        }

        .compare .banner .card-detail .title-product h3 {
            font-size: 16px;
        }

        .compare .banner .card-detail .title-product h4 {
            font-size: 13.2px;
        }

        .compare .banner .card-detail .title-product p {
            font-size: 13px;
        }

    .badge-product {
        padding: 3px 10px;
    }

        .badge-product i {
            font-size: 12px;
        }
}
/* ==================================== */
/* BUTTON */
/* ==================================== */
/* ================ */
/* btn-main */
/* ================ */
.btn-main {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient( 180deg, #c63a3f 0%, #b42328 58%, #991e22 100% );
    box-shadow: 0 8px 20px rgba(180,35,40,.16), 0 2px 6px rgba(180,35,40,.08);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
    min-width: 160px;
    height: 50px;
}

    .btn-main p,
    .btn-main span {
        margin: 0;
        font-size: 13px;
        font-weight: 500;
        color: rgba(255,255,255,.9);
    }

    .btn-main i {
        font-size: 13px;
        color: #fff;
        transition: transform .25s ease;
    }
    /* Soft Highlight */
    .btn-main::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient( to bottom, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 18%, transparent 40% );
        opacity: 0;
        transition: opacity .25s ease;
    }

    .btn-main:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(180,35,40,.20), 0 4px 10px rgba(180,35,40,.08);
    }

        .btn-main:hover::after {
            opacity: 1;
        }

        .btn-main:hover i {
            transform: rotate(-40deg);
        }

    .btn-main:active {
        transform: translateY(0) scale(.98);
    }
/* ================ */
/* btn-contact */
/* ================ */

.btn-main-outline {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(24,63,98,.18);
    background: rgba(255,255,255,.65);
    backdrop-filter: blur(10px);
    color: #183f62;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
    min-width: 160px;
    height: 50px;
}

    .btn-main-outline p {
        margin: 0;
        font-size: 13px;
        font-weight: 500;
        color: #183f62;
    }

    .btn-main-outline i {
        font-size: 13px;
        color: #183f62;
        transition: transform .25s ease;
    }

    .btn-main-outline::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient( circle at 50% -40%, rgba(45,86,120,.08), transparent 65% );
        opacity: 0;
        transition: opacity .25s ease;
    }

    .btn-main-outline:hover {
        transform: translateY(-2px);
        background: rgba(255,255,255,.92);
        border-color: rgba(24,63,98,.28);
        box-shadow: 0 10px 24px rgba(24,63,98,.10), 0 2px 6px rgba(24,63,98,.05);
    }

        .btn-main-outline:hover::after {
            opacity: 1;
        }
    /*.btn-main-outline:hover i {
            transform: rotate(-40deg);
        }*/

    .btn-main-outline:active {
        transform: translateY(0) scale(.98);
    }
/* ================ */
/* btn-contact */
/* ================ */

.btn-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    color: #fff;
    background: linear-gradient( 180deg, #ca3f43 0%, #b42328 55%, #971d22 100% );
    box-shadow: 0 8px 20px rgba(180,35,40,.18), 0 2px 6px rgba(180,35,40,.08);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

    .btn-contact span,
    .btn-contact p {
        margin: 0;
        font-size: 13px;
        font-weight: 500;
        color: rgba(255,255,255,.9);
    }

    .btn-contact i {
        font-size: 13px;
        color: #fff;
        transition: transform .25s ease;
    }

    .btn-contact::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient( circle at 50% -40%, rgba(255,255,255,.22), transparent 65% );
        opacity: 0;
        transition: opacity .25s ease;
    }

    .btn-contact:hover {
        transform: translateY(-2px);
        background: linear-gradient( 180deg, #d34c50 0%, #bf2a2f 55%, #a11f24 100% );
        box-shadow: 0 14px 30px rgba(180,35,40,.22), 0 4px 10px rgba(180,35,40,.10);
    }

        .btn-contact:hover::after {
            opacity: 1;
        }

    .btn-contact:active {
        transform: translateY(0) scale(.98);
    }

.btn-contact-outline {
    width: 100%;
    padding: 6px 18px;
    border-radius: 18px;
    color: #163b5c;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .3px;
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(22,59,92,.25);
    box-shadow: 0 6px 16px rgba(13,41,69,.10), inset 0 1px 1px rgba(255,255,255,.8);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
    position: relative;
    overflow: hidden;
}
    /* text */
    .btn-contact-outline p {
        color: #355b7d;
        font-size: 13px;
        font-weight: 500;
    }

    .btn-contact-outline::before {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 70%;
        height: 100%;
        background: linear-gradient( 120deg, transparent, rgba(255,255,255,.65), rgba(220,228,238,.35), transparent );
        transition: .55s ease;
    }

    .btn-contact-outline:hover {
        transform: translateY(-1px);
        color: #163b5c;
        /*background: linear-gradient( 145deg, rgba(182,198,217,1) 0%, rgba(237,242,248,1) 100% );*/
        background: linear-gradient(145deg,rgba(233, 235, 242, 1) 0%, rgba(247, 247, 250, 1) 100%);
        border-color: rgba(22,59,92,.18);
        box-shadow: 0 14px 30px rgba(22,59,92,.18), 0 0 20px rgba(182,198,217,.35), inset 0 1px 2px rgba(255,255,255,.9);
    }

        .btn-contact-outline:hover p {
            color: #163b5c;
        }

        .btn-contact-outline:hover::before {
            left: 130%;
        }

    .btn-contact-outline:active {
        transform: scale(.98);
    }

    .btn-contact-outline i {
        font-size: 13px;
        transition: transform 0.2s ease;
    }

    .btn-contact-outline:hover i {
        transform: rotate(-40deg);
    }
/* ====================== */
/* btn-detail */
/* ====================== */

.btn-detail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px 16px;
    border-radius: 999px;
    /*border: 1px solid rgba(255,255,255,.16);*/
    color: #fff;
    background: linear-gradient( 180deg, #2d5678 0%, #183f62 100% );
    box-shadow: 0 8px 20px rgba(24,63,98,.16), 0 2px 6px rgba(24,63,98,.08);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    border: 0;
}

    .btn-detail p {
        margin: 0;
        font-size: 13px;
        /*color: rgba(255,255,255,.82);*/
        color: #fff;
        font-weight: 500;
    }

    .btn-detail i {
        font-size: 13px;
        transition: .25s ease;
        color: #fff;
    }
    /*.btn-detail::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient( circle at 50% -70%, rgba(255,255,255,.12), transparent 60% );
        opacity: 0;
        transition: opacity .25s ease;
    }*/

    .btn-detail::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient( to bottom, rgba(255,255,255,.16) 0%, rgba(255,255,255,.06) 18%, transparent 40% );
        opacity: 0;
        transition: .25s;
    }

    .btn-detail:hover {
        transform: translateY(-2px);
        /*background: linear-gradient( 180deg, #36658b 0%, #204b72 100% );*/
        box-shadow: 0 14px 30px rgba(24,63,98,.22), 0 4px 10px rgba(24,63,98,.10);
    }

        .btn-detail:hover::after {
            opacity: 1;
        }

        .btn-detail:hover i {
            /*transform: translateX(3px);*/
            transform: rotate(-40deg);
        }

    .btn-detail:active {
        transform: translateY(0) scale(.98);
    }
/* ========================= */
/* btn-detail-outline */
/* ========================= */

.btn-detail-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(24,63,98,.18);
    background: rgba(255,255,255,.65);
    backdrop-filter: blur(10px);
    color: #183f62;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all .25s ease;
}

    .btn-detail-outline p {
        margin: 0;
        font-size: 13px;
        font-weight: 500;
        color: #183f62;
    }

    .btn-detail-outline i {
        font-size: 13px;
        color: #183f62;
        transition: transform .25s ease;
    }

    .btn-detail-outline::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient( circle at 50% -40%, rgba(45,86,120,.08), transparent 65% );
        opacity: 0;
        transition: opacity .25s ease;
    }

    .btn-detail-outline:hover {
        transform: translateY(-2px);
        /* ยังเป็นพื้นขาว */
        background: rgba(255,255,255,.92);
        border-color: rgba(24,63,98,.28);
        box-shadow: 0 10px 24px rgba(24,63,98,.10), 0 2px 6px rgba(24,63,98,.05);
    }

        .btn-detail-outline:hover::after {
            opacity: 1;
        }

        .btn-detail-outline:hover i {
            transform: rotate(-40deg);
        }

    .btn-detail-outline:active {
        transform: translateY(0) scale(.98);
    }

/* =========================== */
/* btn-detail-circle */
/* =========================== */

.btn-zone {
    display: inline-flex;
    justify-content: flex-end;
}

.btn-detail-circle {
    position: relative;
    overflow: hidden;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient( 145deg, #c63a3f 0%, #b42328 55%, #991e22 100% );
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 6px 14px rgba(180,35,40,.18), 0 2px 5px rgba(16,24,40,.12), inset 0 1px 1px rgba(255,255,255,.22);
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
    /* icon */
    .btn-detail-circle i {
        font-size: 15px;
        color: #fff;
        /*transition: transform .25s ease;*/
        rotate: -40deg;
    }
    /* glass highlight */
    .btn-detail-circle::after {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: inherit;
        background: linear-gradient( 145deg, rgba(255,255,255,.28), rgba(255,255,255,0) 45% );
        opacity: .8;
        pointer-events: none;
        transition: opacity .25s ease;
    }
    /* hover */
    .btn-detail-circle:hover {
        transform: translateY(-3px);
        filter: brightness(1.04);
        box-shadow: 0 10px 22px rgba(180,35,40,.24), 0 4px 8px rgba(16,24,40,.12), inset 0 1px 2px rgba(255,255,255,.28);
    }

        .btn-detail-circle:hover i {
            /*transform: scale(1.12);*/
            /*transform: rotate(-40deg);*/
        }

        .btn-detail-circle:hover::after {
            opacity: 1;
        }
    /* click */
    .btn-detail-circle:active {
        transform: scale(.96);
    }
/* ============================================= */

.blog-accounting-product .product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0px, 1fr));
    gap: 30px;
}

.blog-accounting-product .standalone .product-grid .card-detail {
    padding: 26px;
}

.blog-accounting-product .product-grid .card {
    border-radius: 26px;
}

@media (max-width: 991px) {
    .blog-accounting-product .product-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0px, 1fr));
        gap: 30px;
    }
}

@media (max-width: 767px) {
    .blog-accounting-product .product-grid {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
}
/* ============================================ */

.best-seller-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0px, 1fr));
    gap: 30px;
}

@media (max-width: 991px) {
    .best-seller-product-grid {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
}

.home-blog .card {
    margin-top: unset;
}

.best-seller-product-grid .card {
    border-radius: 26px;
    height: 100%;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

    .best-seller-product-grid .card:hover {
        transform: translateY(-6px);
        border-color: rgba(53,91,125,.25);
        box-shadow: 0 20px 45px rgba(22,59,92,.18), 0 0 25px rgba(182,198,217,.35);
    }

    .best-seller-product-grid .card .card-body {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 0;
    }

.best-seller-card-img-wrapper {
    padding: 0;
    flex-shrink: 0;
}

    .best-seller-card-img-wrapper img {
        border-radius: 26px 26px 0 0;
    }

.best-seller-product-grid .card-detail2 {
    /*position: relative;
    overflow: hidden;*/
    background: #fff;
    /*padding: 22px 24px 100px 24px;*/
    padding: 24px;
    border-radius: 0 0 26px 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}

    .best-seller-product-grid .card-detail2 .btn-zone {
        margin-top: auto;
        padding-top: 24px;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }
    /*.best-seller-product-grid .card-detail::before {
        content: "";
        position: absolute;
        bottom: 70px;*/
    /*left: 28px;*/
    /*width: 40px;
        height: 2px;
        border-radius: 10px;
        background: linear-gradient(90deg, #6ba6f2, #91baef);
    }*/
    /* พื้นหลังฟ้า */
    /*.best-seller-product-grid .card-detail::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -10px;
        width: 100%;
        height: 95px;
        background: linear-gradient( 90deg, rgba(107,166,242,0) 0%, rgba(107,166,242,.04) 40%, rgba(107,166,242,.14) 100% );
        clip-path: path( "M0 45 C80 10 160 70 250 35 C340 0 420 45 500 20 L500 120 L0 120 Z" );
        z-index: 0;
        rotate: 354deg;
        scale: 1.2;
    }*/
    /*.best-seller-product-grid .card-detail2 > * {
        position: relative;
        z-index: 1;
    }*/

    .best-seller-product-grid .card-detail2 .title-product h3 {
        font-size: 20px;
    }

    .best-seller-product-grid .card-detail2 .badge-group {
        gap: 10px;
    }

.badge-type-spec {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    color: #4E87D9;
    background: linear-gradient( 180deg, #FFFFFF 0%, #F5F9FF 100% );
    border: 1px solid rgba(78,135,217,.14);
    box-shadow: 0 4px 12px rgba(78,135,217,.08), inset 0 1px 0 rgba(255,255,255,.9);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
    transition: all .25s ease;
    width: fit-content;
    cursor: default;
    /*position: absolute;
    top: 20px;
    left: 20px;*/
}

    .badge-type-spec i {
        font-size: 13px;
        color: #6BA6F2;
        transition: inherit;
    }

    .badge-type-spec:hover {
        background: linear-gradient( 180deg, #5B97EB 0%, #4E87D9 100% );
        border-color: #4E87D9;
        color: #fff;
        box-shadow: 0 8px 20px rgba(78,135,217,.18);
        transform: translateY(-2px);
    }

        .badge-type-spec:hover i {
            color: #fff;
        }

.badge-type-gen {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    color: #42947e;
    background: linear-gradient( 180deg, #FFFFFF 0%, #F3FCF8 100% );
    border: 1px solid rgba(59,174,141,.14);
    box-shadow: 0 4px 12px rgba(59,174,141,.08), inset 0 1px 0 rgba(255,255,255,.9);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
    transition: all .25s ease;
    width: fit-content;
    cursor: default;
}

    .badge-type-gen i {
        font-size: 7px;
        color: #52BA9A;
        transition: inherit;
    }

    .badge-type-gen:hover {
        background: linear-gradient( 180deg, #4FC29E 0%, #3BAE8D 100% );
        border-color: #3BAE8D;
        color: #fff;
        box-shadow: 0 8px 20px rgba(59,174,141,.18);
        transform: translateY(-2px);
    }

        .badge-type-gen:hover i {
            color: #fff;
        }


.badge-best-seller {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: linear-gradient(180deg,#FFF8F8 0%,#FFF1F1 100%);
    border: 1px solid rgba(239,68,68,.14);
    color: #C54848;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
    position: absolute;
    top: 20px;
    left: 20px;
    width: fit-content;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(239,68,68,.10), inset 0 1px 0 rgba(255,255,255,.9);
    transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
    animation: hotFloat 3.5s ease-in-out infinite;
    z-index: 10;
    cursor: default;
}

    .badge-best-seller::before {
        content: "";
        position: absolute;
        inset: 0;
        left: -140%;
        background: linear-gradient( 110deg, transparent 25%, rgba(255,255,255,.75) 50%, transparent 75% );
        animation: shimmer 3.8s infinite;
    }

    .badge-best-seller i {
        color: #EF5A5A;
        font-size: 13px;
        animation: firePulse 1.8s ease-in-out infinite;
    }

    .badge-best-seller:hover {
        background: linear-gradient(180deg,#F16363 0%,#E24B4B 100%);
        border-color: #E24B4B;
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(226,75,75,.22), inset 0 1px 0 rgba(255,255,255,.15);
    }

        .badge-best-seller:hover i {
            color: #fff;
        }
/* Floating */
@keyframes hotFloat {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2px);
    }
}
/* Light sweep */
@keyframes shimmer {
    0% {
        left: -140%;
    }

    100% {
        left: 160%;
    }
}
/* Icon pulse */
@keyframes firePulse {
    0%,100% {
        transform: scale(1);
        opacity: .95;
    }

    50% {
        transform: scale(1.12);
        opacity: 1;
    }
}
/* ============================= */

.accordion-item {
    color: unset;
    background-color: unset;
    border: unset;
}
/* ============================= */

.home-portfolio .card_img2 img {
    height: 196.88px;
}
/* ============================= */

.btn-view-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(180deg, #2d5678 0%, #183f62 100%);
    box-shadow: 0 8px 20px rgba(24, 63, 98, .16), 0 2px 6px rgba(24, 63, 98, .08);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    border: 0;
    /*font-family: 'Noto Sans';*/
}

    .btn-view-more p {
        margin: 0;
        font-size: 13px;
        color: #fff;
        font-weight: 500;
    }

    .btn-view-more::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient( to bottom, rgba(255,255,255,.16) 0%, rgba(255,255,255,.06) 18%, transparent 40% );
        opacity: 0;
        transition: .25s;
    }

    .btn-view-more:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 30px rgba(24,63,98,.22), 0 4px 10px rgba(24,63,98,.10);
        color: #fff;
    }


        .btn-view-more:hover::after {
            opacity: 1;
        }

    .btn-view-more:active {
        transform: translateY(0) scale(.98);
    }
/* ========================================= */

.home-portfolio .card {
    margin-top: unset;
}

.home-portfolio .rec-pd-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

    .home-portfolio .rec-pd-grid .card {
        border-radius: 26px;
    }

.home-portfolio .section-header h4 {
    font-size: 24px;
    font-weight: 700;
    font-family: "Noto Sans Thai", sans-serif;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .home-portfolio .card_img2 img {
        height: 163.13px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .home-portfolio .rec-pd-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0px, 1fr));
        gap: 30px;
        margin-top: 50px;
    }

    .home-portfolio .section-header h4 {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .home-portfolio .rec-pd-grid {
        display: flex;
        flex-direction: column;
    }

    .home-portfolio .card_img2 img {
        height: auto;
    }

    .home-portfolio .hover-overlay.effect-scale:before {
        background-color: rgba(10, 35, 59, 0.7);
    }

    .home-portfolio .section-header h4 {
        font-size: 18px;
    }

    .home-portfolio .section-header .subheading-text {
        font-size: 14px;
    }
}

.heading {
    margin: auto;
    display: flex;
    padding-top: 30px;
    padding-bottom: 30px;
    justify-content: center;
    color: aliceblue;
    font-size: 36px;
    font-weight: 600;
    font-family: "Noto Sans Thai", sans-serif;
}

@media (min-width: 576px) and (max-width: 767px) {
    .heading {
        font-size: 28px;
        font-weight: 600;
    }
}

@media (max-width: 575px) {
    .heading {
        font-size: 20px;
        font-weight: 600;
    }
}

/* ===================================== */

.gv-table-wrapper .custom-table th {
    background: #f7f8fa;
    text-align: center;
    padding: 16px 20px;
    font-weight: 600;
    font-size: 15px;
    border-bottom: 1px solid #e6e9ef;
}

    .gv-table-wrapper .custom-table th:first-child {
        text-align: left;
    }

.gv-table-wrapper .custom-table tr {
    border-bottom: 1px solid #eef0f3;
    transition: background .2s ease;
}

    .gv-table-wrapper .custom-table tr:last-child {
        border-bottom: none;
    }

    .gv-table-wrapper .custom-table tr:hover {
        background: #fafbfc;
    }

.gv-table-wrapper .custom-table td {
    padding: 16px 20px;
    vertical-align: middle;
    font-size: 14px;
    font-weight: 500;
}

/* First column: icon + name + subtitle */
/*.gv-table-wrapper .custom-table .cell-module {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
}

.gv-table-wrapper .custom-table .module-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf1fd;
    border-radius: 12px;
    color: #5594D8;
    font-size: 18px;
}

.gv-table-wrapper .custom-table .module-text {
    display: flex;
    flex-direction: column;
}

.gv-table-wrapper .custom-table .module-group-name {
    display: inline-flex;
    gap: 6px;
}

    .gv-table-wrapper .custom-table .module-group-name span {
        font-weight: 700;
        font-size: 14px;
    }

.gv-table-wrapper .custom-table .module-sub-name {
    color: #5594D8;
    font-weight: 800 !important;
}

.gv-table-wrapper .custom-table .module-name {
    color: #12203E;
}

.gv-table-wrapper .custom-table .module-desc {
    font-size: 12px;
    color: #8a8f98;
    margin-top: 2px;
}*/

/* Status column */
/*.gv-table-wrapper .custom-table .cell-status {
    text-align: center;
}*/

.gv-table-wrapper .custom-table .btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: linear-gradient(180deg,#FFFFFF 0%,#F7F9FC 100%);
    border: 1px solid rgba(78,135,217,.10);
    color: #7B8798;
    cursor: pointer;
    transition: all .25s ease;
    box-shadow: 0 2px 6px rgba(15,23,42,.04), inset 0 1px 0 rgba(255,255,255,.95);
}

    .gv-table-wrapper .custom-table .btn-action:hover {
        /*color: #4E87D9;*/
        border-color: rgba(78,135,217,.22);
        background: linear-gradient(180deg,#FFFFFF 0%,#F3F8FF 100%);
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(78,135,217,.12), inset 0 1px 0 rgba(255,255,255,1);
    }

    .gv-table-wrapper .custom-table .btn-action:active {
        transform: translateY(0) scale(.96);
    }

    .gv-table-wrapper .custom-table .btn-action i,
    .gv-table-wrapper .custom-table .btn-action svg {
        font-size: 18px;
        width: 26px;
        height: 26px;
        transition: inherit;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .gv-table-wrapper .custom-table .btn-action.text-red {
        color: red;
    }

    .gv-table-wrapper .custom-table .btn-action.text-dark {
        cursor: default !important;
        color: #9ea6b1 !important;
    }

/* ============================ */

.min-w-200 {
    min-width: 200px;
}

/* ============================ */

.section-header {
}

.btn-layout {
    width: 100%;
    display: inline-flex;
    justify-content: flex-end;
    padding: 20px 0;
}

.btn-add-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(180deg, #2d5678 0%, #183f62 100%);
    box-shadow: 0 8px 20px rgba(24, 63, 98, .16), 0 2px 6px rgba(24, 63, 98, .08);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    border: 0;
}

    .btn-add-cart p {
        margin: 0;
        font-size: 13px;
        color: #fff;
        font-weight: 500;
    }

    .btn-add-cart::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient( to bottom, rgba(255,255,255,.16) 0%, rgba(255,255,255,.06) 18%, transparent 40% );
        opacity: 0;
        transition: .25s;
    }

    .btn-add-cart:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 30px rgba(24,63,98,.22), 0 4px 10px rgba(24,63,98,.10);
        color: #fff;
    }


        .btn-add-cart:hover::after {
            opacity: 1;
        }

    .btn-add-cart:active {
        transform: translateY(0) scale(.98);
    }

/* ============================= */

.contact-section .section-header h4 {
    font-size: 24px;
    font-weight: 700;
    font-family: "Noto Sans Thai", sans-serif;
}

.contact-section .card {
    border-radius: 30px;
}

.contact-section .card-body {
    padding: 30px;
}

.form-contact {
    display: flex;
    justify-content: center;
    width: 100%;
    flex-direction: column;
    gap: 12px;
}

    .form-contact .row {
        margin-right: 0;
        margin-left: 0;
    }

        .form-contact .row label {
            padding-right: 0;
            padding-left: 0;
            font-size: 14px;
            font-weight: 600;
        }

    .form-contact .form-control {
        height: 40px;
        width: 100%;
    }

    .form-contact .btn-group {
        display: flex;
        justify-content: center;
        gap: 20px;
        padding: 20px 0;
        margin: 0;
    }

/* ===================================== */

.btn-sent {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(180deg, #2d5678 0%, #183f62 100%);
    box-shadow: 0 8px 20px rgba(24, 63, 98, .16), 0 2px 6px rgba(24, 63, 98, .08);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    border: 0;
}

    .btn-sent p {
        margin: 0;
        font-size: 13px;
        color: #fff;
        font-weight: 500;
    }

    .btn-sent i {
        font-size: 13px;
    }

    .btn-sent::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient( to bottom, rgba(255,255,255,.16) 0%, rgba(255,255,255,.06) 18%, transparent 40% );
        opacity: 0;
        transition: .25s;
    }

    .btn-sent:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 30px rgba(24,63,98,.22), 0 4px 10px rgba(24,63,98,.10);
        color: #fff;
    }


        .btn-sent:hover::after {
            opacity: 1;
        }

    .btn-sent:active {
        transform: translateY(0) scale(.98);
    }

/* ===================================== */

.btn-back-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(24,63,98,.18);
    background: rgba(255,255,255,.65);
    backdrop-filter: blur(10px);
    color: #183f62;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all .25s ease;
}

    .btn-back-outline p {
        margin: 0;
        font-size: 13px;
        font-weight: 500;
        color: #183f62;
    }

    .btn-back-outline i {
        font-size: 14px;
        color: #183f62;
        transition: transform .25s ease;
    }

    .btn-back-outline::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient( circle at 50% -40%, rgba(45,86,120,.08), transparent 65% );
        opacity: 0;
        transition: opacity .25s ease;
    }

    .btn-back-outline:hover {
        transform: translateY(-2px);
        /* ยังเป็นพื้นขาว */
        background: rgba(255,255,255,.92);
        border-color: rgba(24,63,98,.28);
        box-shadow: 0 10px 24px rgba(24,63,98,.10), 0 2px 6px rgba(24,63,98,.05);
    }

        .btn-back-outline:hover::after {
            opacity: 1;
        }

        .btn-back-outline:hover i {
            /*transform: rotate(-40deg);*/
        }

    .btn-back-outline:active {
        transform: translateY(0) scale(.98);
    }

.form-contact-layout {
    margin-inline: clamp(20px, 6vw, 120px);
}

.form-control::placeholder {
    color: #B5B5B5 !important;
}

@media (max-width: 991px) {
    .contact-section .section-header h4 {
        font-size: 18px;
    }
}

/* =================================== */

.download-section .section-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-left: 20px;
}

    .download-section .section-header h3 {
        font-size: 30px;
        font-weight: 700;
        letter-spacing: 0.3px;
    }

/* ================================ */

.h-auto {
    height: auto;
}

.contact-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0px, 1fr));
    gap: 30px;
}

@media (max-width: 991px) {
    .contact-layout {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
}


.contactus .card-contact-layout {
    display: flex;
}

    .contactus .card-contact-layout .card {
        border-radius: 30px;
        padding: 0;
        width: 100%;
    }

    .contactus .card-contact-layout .card-body {
        padding: 30px;
        display: flex;
        flex-direction: column;
    }

.contactus .form-contact-layout {
    margin-left: 0;
    margin-right: 0;
}

    .contactus .form-contact-layout .card {
        border-radius: 30px;
    }

    .contactus .form-contact-layout .card-body {
        padding: 30px;
    }

    .contactus .form-contact-layout .btn-sent p {
        line-height: 1.6;
    }

.detail-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 46px;
    width: 46px;
    border-radius: 999px;
    border: 1px solid #eee;
    background-color: #fff;
}

    .detail-icon i {
        font-size: 18px;
        color: #d71920;
    }


.detail-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .detail-text h4 {
        font-size: 16px;
        font-weight: 600;
    }

    .detail-text span {
        font-size: 14px;
        color: #79889f;
    }

.contact-detail-layput {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-detail {
    display: flex;
    gap: 20px;
}

.contactus .card {
    border-radius: 30px;
}

.card-heading h4 {
    font-size: 24px;
}

.contactus .card-contact-layout .card.card-line {
    min-height: unset;
    background: #eef2f780;
}

.contactus .card-contact-layout .card-body-line {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 30px;
}

.contact-detail-line {
    display: grid;
    grid-template-columns: repeat(2, minmax(46px, 1fr));
}

.detail-text-line {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .detail-text-line h4 {
        font-size: 16px;
        font-weight: 600;
    }

    .detail-text-line p {
        font-size: 14px;
    }

.qr-text {
    font-size: 13px !important;
    color: #79889f;
    opacity: 0.8;
}


.qr-line {
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .qr-line img {
        height: 110px;
    }

.form-contact-layout .card-heading h4 {
    font-size: 20px;
}

.map-wrapper {
    width: 100%;
}

    .map-wrapper iframe {
        width: 100%;
    }

/* ======================================= */

.btn-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(180deg, #2d5678 0%, #183f62 100%);
    box-shadow: 0 8px 20px rgba(24, 63, 98, .16), 0 2px 6px rgba(24, 63, 98, .08);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    border: 0;
}

    .btn-order p {
        margin: 0;
        font-size: 13px;
        color: #fff;
        font-weight: 500;
    }

    .btn-order i {
        font-size: 15px;
        rotate: 315deg;
    }

    .btn-order::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient( to bottom, rgba(255,255,255,.16) 0%, rgba(255,255,255,.06) 18%, transparent 40% );
        opacity: 0;
        transition: .25s;
    }

    .btn-order:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 30px rgba(24,63,98,.22), 0 4px 10px rgba(24,63,98,.10);
        color: #fff;
    }


        .btn-order:hover::after {
            opacity: 1;
        }

    .btn-order:active {
        transform: translateY(0) scale(.98);
    }


/* ======================================= */

.badge-truck-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
    width: fit-content;
    cursor: default;
    transition: all .25s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.9);
    /*position: absolute;
    top: 20px;
    right: 20px;*/
}

    .badge-truck-type i {
        font-size: 14px;
        transition: inherit;
    }

/* =========================
   ขนส่งทั่วไป (ฟ้า)
========================= */
.badge-general {
    color: #6F86AB;
    background: #FCFDFF;
    border: 1px solid #E6EEF9;
    box-shadow: 0 2px 8px rgba(78,135,217,.05);
}

    .badge-general i {
        color: #7C98C7;
    }

    .badge-general:hover {
        color: #fff;
        background: linear-gradient(180deg, #5B97EB 0%, #4E87D9 100%);
        border-color: #4E87D9;
        box-shadow: 0 8px 20px rgba(78,135,217,.18);
        transform: translateY(-2px);
    }

        .badge-general:hover i {
            color: #fff;
        }

/* =========================
   ขนส่งน้ำมัน (ส้มทอง)
========================= */
.badge-oil {
    color: #B66A18;
    background: linear-gradient(180deg, #FFFDF7 0%, #FFF6E8 100%);
    border: 1px solid rgba(245,158,11,.18);
    box-shadow: 0 4px 12px rgba(245,158,11,.10), inset 0 1px 0 rgba(255,255,255,.9);
}

    .badge-oil i {
        color: #F59E0B;
    }

    .badge-oil:hover {
        background: linear-gradient(180deg, #F7B733 0%, #E58A00 100%);
        border-color: #E58A00;
        color: #fff;
        box-shadow: 0 8px 20px rgba(229,138,0,.20);
        transform: translateY(-2px);
    }

        .badge-oil:hover i {
            color: #fff;
        }

/* =========================
   ขนส่งตู้คอนเทนเนอร์ (เขียวอมฟ้า)
========================= */
.badge-container {
    color: #117A65;
    background: linear-gradient(180deg, #FFFFFF 0%, #F2FBF8 100%);
    border: 1px solid rgba(16,185,129,.16);
    box-shadow: 0 4px 12px rgba(16,185,129,.08), inset 0 1px 0 rgba(255,255,255,.9);
}

    .badge-container i {
        color: #10B981;
    }

    .badge-container:hover {
        background: linear-gradient(180deg, #34D399 0%, #10B981 100%);
        border-color: #10B981;
        color: #fff;
        box-shadow: 0 8px 20px rgba(16,185,129,.18);
        transform: translateY(-2px);
    }

        .badge-container:hover i {
            color: #fff;
        }

/* ================================= */

.search-zone {
    display: flex;
    justify-content: flex-end;
}

.search-pd {
    max-width: 500px;
    min-width: 300px
}

.label {
    font-size: 15px;
    font-weight: 500;
}