body {
    font-family: 'Sarabun', 'Prompt', 'Noto Sans Thai', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 14px !important;
    letter-spacing: 0.1px;
}

.dokjan {
    color: red;
    font-weight: bold;
}

.form-wrap {
    max-width: 1200px;
    margin: 0 auto;
    border: 1px solid #000;
    position: relative;
}
.row-wrap {
    display: flex;
    flex-wrap: wrap;
}
.row-wrap:last-child { 
    border-bottom: none; 
}

.main-col {
    flex: 1;
    padding: 8px 12px;
}

.field-line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    margin: 4px 0;
    margin-top: 8px;
}
.field-line label {
    white-space: nowrap;
    font-size: 14px;
}
.dots {
    flex: 1;
    min-width: 60px;
    border-bottom: 1px dotted #000;
    height: 1.3em;
}
.dots.short { flex: 0 0 80px; }
.dots.medium { flex: 0 0 150px; }
.dots.tiny { flex: 0 0 40px; }
.dots.month { flex: 0 0 100px; }
.dots.half { flex: 0 0 450px; }
.dots.half2 { flex: 0 0 250px; }

.two-col {
    display: flex;
    gap: 30px;
}
.two-col .field-line { flex: 1; }

/* checkbox & radio style + ขยับลงมาตามที่ต้องการ */
.chk-group, .radio-group {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transform: translateY(3px);
}
.chk-group input[type="checkbox"], .radio-group input[type="radio"] {
    width: 15px;
    height: 15px;
}

input[type="text"], input[type="email"] {
    border: none;
    border-bottom: 1px dotted #000;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    background: transparent;
    flex: 1;
    min-width: 60px;
}

input[type="text"], 
input[type="email"], 
select.dots,
textarea.table-input, 
input {
    color: #0056b3 !important;
}

/* Responsive CSS สำหรับหน้าจอมือถือ (ขนาดจอเล็กกว่า 768px) */
@media (max-width: 767px) {
    .two-col {
        flex-direction: column;
        gap: 0;
    }
    .photo-box-responsive {
        border-left: none !important;
        border-top: 2px solid #000 !important;
        padding: 15px 0 !important;
    }
    .dots.half, .dots.medium {
        flex: 1 1 auto !important;
        width: 100%;
    }
    .field-line {
        gap: 8px;
    }
    /* ชดเชย padding ซ้ายของที่อยู่ปัจจุบันบนจอมือถือเพื่อความสวยงาม */
    .address-line-2 {
        padding-left: 0 !important;
    }
}

/* 1. ควบคุมช่องตาราง (td) ไม่ให้ขยายหรือปล่อยให้อินพุตล้น */
.table-responsive table td {
    position: relative;
    overflow: hidden !important; /* ถ้านอกเหนือจากช่อง td ให้ตัดทิ้งทันที */
    white-space: nowrap !important;
}

/* 2. บังคับอินพุตให้มีขนาด "เท่ากับช่อง td เป๊ะๆ" */
.table-input {
    width: 100% !important;        /* บังคับให้ขยายกว้างเต็มพื้นที่ช่อง td */
    max-width: 100% !important;    /* ป้องกันไม่ให้กว้างเกินช่อง td */
    box-sizing: border-box;        /* คำนวณขอบรวมใน 100% ไม่ให้ล้น */
    display: block;                /* เปลี่ยนเป็น block เพื่อให้กางเต็มพื้นที่ */
    line-height: 1.3;
    border: none;
    border-bottom: 1px dotted #000; /* เส้นจุดไข่ปลา */
    background: transparent;
    outline: none;
    padding: 0 4px;
}

/* สั่งลบเส้นขอบทุกชนิดของตารางที่มีคลาส table-form-custom */
.table-form-custom,
.table-form-custom tr,
.table-form-custom td {
    border: none !important;
    box-shadow: none !important;
}

/* จัดการ Padding ช่องไฟและแนวตั้งให้เท่ากันทุกช่อง */
.table-form-custom td {
    padding: 6px 4px !important;
    vertical-align: middle;
}

.custom-swal-title {
    font-size: 20px !important;
    padding-top: 20px !important;
}

/* อาเส้นขอบสีดำออกจากปุ่มตกลง (โค้ดเดิม) */
.swal2-styled.swal2-confirm:focus, .swal2-styled.swal2-confirm:active {
    box-shadow: none !important;
    outline: none !important;
    border: none !important; /* แถม: เคลียร์ border ปกติออกด้วย */
}

/* 1. บีบขนาดวงกลมไอคอน Error (X) ให้เล็กลง */
.swal2-icon.swal2-error {
    width: 60px !important;
    height: 60px !important;
    margin-top: 20px !important;
}

/* 2. ปรับขนาดเส้นกากบาท (X) ข้างในให้สั้นลงและสมดุลกับวงกลมใหม่ */
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    width: 32px !important;  /* ความยาวเส้นกากบาท */
    height: 4px !important;  /* ความหนาเส้นกากบาท */
    top: 28px !important;    /* จัดตำแหน่งให้อยู่ตรงกลางแนวตั้ง */
}

/* จัดตำแหน่งเส้นฝั่งซ้าย */
.swal2-icon.swal2-error .swal2-x-mark-line-left {
    left: 14px !important;
}

/* จัดตำแหน่งเส้นฝั่งขวา */
.swal2-icon.swal2-error .swal2-x-mark-line-right {
    right: 14px !important;
}
.custom-swal-content {
    font-size: 15px !important;    /* ปรับขนาดตัวอักษรให้เล็กลงตามต้องการ */
    line-height: 1.4;
}