:root {
/*    --gs1-orange: #F26334;
    --gs1-blue: #002C6C;*/
    --gs1-sky: #00BDEB;
    --gs1-link: #00BBDD;
    --gs1-slate: #89AADB;
    --gs1-rasp: #F05587;
    --gs1-purple: #BF83B9;
    --gs1-dark-gray: #454545;
    --gs1-light-med-gray: #B1B3B3;
    --gs1-lm-gray: #B1B3B3;
    --gs1-l-gray: #F4F4F4;
    --gs1-white: #fff;
    --gs1-blue: #002f6c;
    --gs1-orange: #f15a29;
    --gs1-light-bg: #f8fafc;
}

/* ตัวเลือกกราเดียนต์ยอดนิยม */
.gs1-grad-gray {
    background: linear-gradient(135deg,var(--gs1-blue),var(--gs1-dark-gray));
}

.gs1-grad-hero {
    background: linear-gradient( 135deg, var(--gs1-orange) 0%, var(--gs1-orange) 65%, var(--gs1-white) 100% );
    color: #fff;
}

.gs1-grad-fresh {
    background: linear-gradient(135deg,var(--gs1-orange),var(--gs1-sky));
}

.gs1-grad-link {
    background: linear-gradient(135deg,var(--gs1-orange),var(--gs1-link));
}

.gs1-grad-pro {
    background: linear-gradient(135deg,var(--gs1-orange),var(--gs1-slate));
}

.gs1-grad-pro2 {
    background: linear-gradient(90deg, #003366 0%, #0055A5 100%);
    color: #fff;
}

/*ใช้แล้ว*/
.gs1-grad-warm {
    background: linear-gradient(135deg,var(--gs1-orange),var(--gs1-rasp));
}

.gs1-grad-muted {
    background: linear-gradient(135deg,var(--gs1-orange),var(--gs1-dark-gray));
}

.gs1-blue {
    background: var(--gs1-blue);
}

.gs1-card {
    border: 0;
    overflow: hidden;
}

.gs1-header {
    color: #fff;
    border-bottom: 0;
    text-shadow: 0 1px 0 rgba(0,0,0,.2);
}

/*body {
    margin: 0;
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 16px;
    color: #1a1a1a;
}*/

body {
    margin: 0;
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 16px;
    background: var(--gs1-light-bg);
    color: #1a1a1a;
}

/* Card */
.gs1-card {
    background: #fff;
    padding: 32px;
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(0, 47, 108, 0.08);
    margin: 24px auto;
    max-width: 1200px;
}

/* Header */
.gs1-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.gs1-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--gs1-blue);
    margin-bottom: 6px;
}

.gs1-subtitle {
    font-size: 14px;
    color: #6c757d;
}

.form-section {
    padding: 28px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 47, 108, 0.05);
}

.form-hint {
    font-size: 13px;
    color: #6c757d;
    margin-top: 2px;
}

.form-control-modern {
    border-radius: 10px;
    border: 1px solid #dee2e6;
    padding: 10px 14px;
    transition: all .2s ease;
}

    .form-control-modern:focus {
        border-color: #f15a29;
        box-shadow: 0 0 0 3px rgba(241, 90, 41, 0.15);
    }


/* Accent line */
.gs1-accent-line {
    width: 200px;
    height: 6px;
    background: linear-gradient(90deg, var(--gs1-orange), #ff8a65);
    border-radius: 4px;
    margin-left: 16px;
}

/* Floating Quick Nav */
.quick-nav {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #ffffff;
    padding: 16px;
    border-radius: 16px;
    width: 140px;
    z-index: 1050;
}

.quick-nav a {
    display: block;
    font-size: 13px;
    padding: 5px 0;
    text-decoration: none;
    color: #495057;
    transition: all 0.2s ease;
}

.quick-nav-title {
    font-size: 13px;
    font-weight: 600;
    /*margin-bottom: 8px;*/
    color: var(--gs1-blue);
}

.quick-nav-header {
    margin-bottom: 10px;
}

    .quick-nav a:hover {
        color: var(--gs1-orange);
        padding-left: 6px;
    }

.quick-nav.hide {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

.title-heading {
    font-size: 23px;
    font-weight: bold;
    color: #002f6c;
    margin-bottom: 10px;
}

.title-underline {
    width: 60%;
    height: 5px;
    background-color: #f15a29;
    border: none;
    margin: 5px 0px 5px 0px;
    margin-bottom: 16px;
}

.title-underline-light {
    width: 60%;
    height: 2px;
    background-color: #f15a29;
    border: none;
    margin: 5px 0px 5px 0px;
    margin-bottom: 10px;
}

.row {
    margin: 10px 0px 10px 0px;
}

.text-title-info {
    font-weight: bold;
    color: #002f6c;
}

.text-highlight {
    background: linear-gradient(90deg, #002C6C, #F26334);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-blue {
    color: #002f6c !important;
}

.text-orange {
    color: #f15a29;
}

.text-red {
    color: #EE2C2C;
}

.text-green {
    color: #228B22;
}

.dotted-line {
    border-top: 1px dotted #999;
    height: 1px;
    width: 100%;
    margin: 20px 0;
}

.form-select {
    color: #363636 !important;
}

.text-primary {
    color: #F26334 !important;
}

.icon-big {
    font-size: 38px;
}

.readonly-tab {
    pointer-events: none;
    user-select: text;
    color: #212529 !important;
}

    .readonly-tab input,
    .readonly-tab textarea {
        pointer-events: none;
        user-select: text;
        color: #363636 !important;
        border-color: #ced4da !important;
    }


hr.dotted-line {
    border-top: 1px dotted #bbb !important;
    margin: 1rem 0;
}

hr.divider-dotted-bold {
    border-top: 3px dotted #999; /* ความหนา 3px */
    margin: 2rem 0; /* ระยะห่างด้านบน/ล่าง */
}

.bg-primary {
    background-color: #F26334 !important;
}

.bg-gs1blue {
    color: white;
    background: #89AADB;
}


.card[disabled],
label.card input:disabled + div {
    cursor: not-allowed;
    opacity: 0.5;
    filter: grayscale(100%);
}

@media print {
    /* ปรับขนาดตัวอักษร */
    body {
        font-size: 12pt;
        color: black;
    }

    /* ปรับ container ให้เต็มหน้ากระดาษ */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ซ่อนสิ่งที่ไม่ควรพิมพ์ เช่น ปุ่ม */
    .no-print {
        display: none !important;
    }

    /* ซ่อน navbar หรือส่วนที่ไม่ต้องการพิมพ์ */
    .navbar,
    .no-print,
    header,
    footer {
        display: none !important;
    }

    .shadow,
    .shadow-sm,
    .shadow-lg,
    .shadow-md {
        box-shadow: none !important;
    }

    /* ปรับขนาดและ margin ของกระดาษ */
    @page {
        size: A4 landscape;
        margin: 0.5cm;
    }

    /* ซ่อน scrollbar */
    html, body {
        overflow: visible !important;
    }

    /* ล้าง background ที่ browser ไม่พิมพ์ */
    * {
        background: transparent !important;
        box-shadow: none !important;
        /*color-adjust: exact;*/ /* สำหรับ Chrome */
        -webkit-print-color-adjust: exact;
    }

    /* บังคับให้บาง section ขึ้นหน้าใหม่ */
    .page-break {
        page-break-before: always;
    }

    /* เส้นขอบสีเทาให้อ่านง่ายตอนพิมพ์ */
    table, th, td {
        border-color: #ccc !important;
    }

    /*validateform*/
    .error-summary {
        padding: 1rem;
        border: 1px solid #dc3545;
        border-radius: 0.5rem;
        background-color: #fff0f0;
        color: #a00000;
    }

    .error-group {
        margin-bottom: 1rem;
    }

        .error-group strong {
            font-size: 1.1rem;
            display: block;
            margin-bottom: 0.5rem;
        }

        .error-group ul {
            margin: 0;
            padding-left: 1.25rem;
        }
}


/*step-progress start*/

.card-green {
    border-radius: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #d9dfdf;
    box-shadow: 0 8px 8px rgba(0,0,0,.08);
}

    .card-green:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0,0,0,.08);
    }

.card-green-header {
    background: linear-gradient(90deg, #0d6efd, #20c997);
    color: #fff;
    border-radius: 1rem 1rem 0 0 !important;
    padding: 1rem 1.25rem;
}

/*.form-label {
    font-size: 0.95rem;
}*/

.alert {
    border-radius: 0.6rem;
    font-size: 0.95rem;
}

.badge {
    font-size: 0.85rem;
}

.pwdchecklist-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    margin-bottom: 3px;
}

    .pwdchecklist-item.valid {
        color: #28a745;
        font-weight: 600;
    }

    .pwdchecklist-item.invalid {
        color: #dc3545;
    }



#togglePassword i {
    transition: transform 0.15s ease;
}


/* สำหรับหน้าจอใหญ่ (Desktop ≥ 1200px) */
@media (min-width: 1200px) {
    html[data-layout="horizontal"] .body-wrapper {
        padding-top: 20px !important; /* จาก 70px เหลือ 20px */
    }

        html[data-layout="horizontal"]
        .body-wrapper > .container-fluid,
        html[data-layout="horizontal"]
        .body-wrapper > .container-lg,
        html[data-layout="horizontal"]
        .body-wrapper > .container-md,
        html[data-layout="horizontal"]
        .body-wrapper > .container-sm,
        html[data-layout="horizontal"]
        .body-wrapper > .container-xl,
        html[data-layout="horizontal"]
        .body-wrapper > .container-xxl {
            padding-top: 120px !important; /* จาก 115px เหลือ 10px */
        }
}


/* ===== Status Card ===== */
.status-card {
    cursor: pointer;
    border-radius: 16px;
    padding: 16px 18px;
    border: 2px solid transparent;
    background: #f8f9fa;
    transition: all .2s ease;
    display: block;
}

    .status-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,.06);
    }

/* spacing ให้การ์ดไม่ชน label ซ้าย */
.col-md-3 > .status-card {
    margin-left: 8px;
}

/* ===== Background by status ===== */
.status-success {
    background: #e9f7ef;
    color: #28a745;
}

.status-danger {
    background: #fdecea;
    color: #dc3545;
}

/* ===== Icon ===== */
.icon-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

/* ===== Radio indicator ===== */
.check-circle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #cfd4da;
    margin-left: 12px;
    transition: all .2s ease;
}

/* ===== Checked state ===== */
.status-radio:checked + .status-card {
    border-color: currentColor;
    background: linear-gradient( 180deg, rgba(255,255,255,.6), transparent );
}

    .status-radio:checked + .status-card .check-circle {
        background: currentColor;
        border-color: currentColor;
    }

/* ===== Text fine tuning ===== */
.status-card .fw-semibold {
    font-size: 15px;
}

.status-card .text-muted {
    line-height: 1.2;
}

.fasttrack-card {
    border: 1.5px dashed #0d6efd;
    border-radius: 14px;
    padding: 16px 18px;
    background: #f8faff;
    transition: all .25s ease;
}

    .fasttrack-card:hover {
        background: #eef4ff;
    }


/* จอเล็กกว่า 768px (tablet / mobile) */
@media (max-width: 768px) {

    /* หัวข้อใหญ่ให้เล็กลงหน่อย */
    .text-title-info {
        font-size: 1rem; /* ประมาณ 16px */
    }

    /* ตัวหนังสือในตารางให้เล็กลง */
    #tblMTDocumentFile td,
    #tblMTDocumentFile th {
        font-size: 0.8rem; /* ประมาณ 13px */
    }

    /* card ไม่ต้อง padding หนามากในมือถือ */
    .card.rounded-4.p-4.container.my-4.border-1 {
        padding: 1rem !important;
    }

    /* ถ้าอยากให้ข้อความยาว ๆ พับบรรทัดได้ (ตอนนี้มี text-nowrap อยู่) */
    #tblMTDocumentFile {
        white-space: normal;
    }

        #tblMTDocumentFile .text-nowrap {
            white-space: normal !important;
        }
}

.modern-table thead {
    background: #f8f9fa;
    font-weight: 600;
}

    .modern-table thead th {
        border-bottom: 2px solid #dee2e6;
        color: #002f6c;
    }

.modern-table tbody tr {
    transition: all .15s ease;
}

    .modern-table tbody tr:hover {
        background: #fff4ef;
        transform: translateY(-1px);
    }

.table-clickable {
    cursor: pointer;
}

.badge-status {
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 14px;
}

.pagination .page-link {
    border-radius: 8px !important;
    margin: 0 3px;
}

.summary-section {
    background: #ffffff;
    padding: 28px;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 47, 108, 0.05);
}

.summary-item {
    padding: 14px 18px;
    border-radius: 12px;
    background: #f9fbfd;
    transition: all .2s ease;
}

    .summary-item:hover {
        background: #f1f5f9;
    }

.summary-label {
    font-size: 15px;
    font-weight: 600;
    color: #002f6c;
}

.summary-sub {
    font-size: 14px;
    font-weight: 400;
    color: #6c757d;
    margin-top: 2px;
}

.summary-value {
    margin-top: 6px;
    font-size: 16px;
    font-weight: 500;
    color: #1a1a1a;
}


.financial-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    border-radius: 12px;
    background: #f9fbfd;
    margin-bottom: 14px;
}

.financial-label {
    font-weight: 600;
    color: #002f6c;
}

.financial-sub {
    font-size: 14px;
    color: #6c757d;
    margin-top: 2px;
}

.financial-value {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
}

.financial-unit {
    font-size: 14px;
    font-weight: 400;
    margin-left: 4px;
    color: #6c757d;
}


.section-card {
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(0,47,108,.06);
    padding: 32px;
    margin-bottom: 32px;
}

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

.section-title {
    font-weight: 700;
    font-size: 18px;
    color: #002f6c;
}

.section-sub {
    font-size: 13px;
    color: #6c757d;
}


.modern-address-card {
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(0,47,108,.05);
    padding: 24px;
}

.address-header {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 14px;
    margin-bottom: 16px;
    font-size: 16px;
}

.address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 20px;
    font-size: 16px;
}

.label {
    display: block;
    font-weight: 600;
    color: #6c757d;
    font-size: 16px;
    margin-bottom: 2px;
}

.contact-section {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 16px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.quick-close-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.08);
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
    cursor: pointer;
}

    .quick-close-btn:hover {
        background: rgba(255,255,255,0.2);
        transform: rotate(90deg);
    }