@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;700&display=swap');


body {
    font-family: 'Sarabun', sans-serif;
}

.swal-overlay .swal-modal {
    padding: .9375rem;
}

.swal-overlay .swal-modal .swal-text {
    padding: .9375rem 0;
}

.app-sidebar .menu .menu-profile .menu-profile-image {
     height: auto;
}

.text-justify {
    text-indent: 2em; text-align: justify;
}























/*section-todo ข้อความกระพริบตามธีมสี ---------------------------------------------*/
/*------------------------------------------------------------------------------*/

/* ตั้งค่าพื้นฐาน */
:root {
    --middle-color: #000000; /* สีกลางเริ่มต้นเป็นสีดำ */
    --animation-duration: 3s; /* ความเร็วของการเคลื่อนไหว */
}

/* Success Effect */
.text-success-effect {
    display: inline-block;
    background: linear-gradient(90deg, #28a745, var(--middle-color), #dc3545, #28a745);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-move var(--animation-duration) ease infinite;
}

/* Danger Effect */
.text-danger-effect {
    display: inline-block;
    background: linear-gradient(90deg, #dc3545, var(--middle-color), #28a745, #dc3545);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-move var(--animation-duration) ease infinite;
}

/* Info Effect */
.text-info-effect {
    display: inline-block;
    background: linear-gradient(90deg, #17a2b8, var(--middle-color), #ffc107, #17a2b8);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-move var(--animation-duration) ease infinite;
}

/* Warning Effect */
.text-warning-effect {
    display: inline-block;
    background: linear-gradient(90deg, #ffc107, var(--middle-color), #17a2b8, #ffc107);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-move var(--animation-duration) ease infinite;
}

/* Primary Effect */
.text-primary-effect {
    display: inline-block;
    background: linear-gradient(90deg, #007bff, var(--middle-color), #ff5722, #007bff);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-move var(--animation-duration) ease infinite;
}

/* Secondary Effect */
.text-secondary-effect {
    display: inline-block;
    background: linear-gradient(90deg, #6c757d, var(--middle-color), #ffd700, #6c757d);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-move var(--animation-duration) ease infinite;
}

/* Light Effect */
.text-light-effect {
    display: inline-block;
    background: linear-gradient(90deg, #f8f9fa, var(--middle-color), #343a40, #f8f9fa);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-move var(--animation-duration) ease infinite;
}

/* Dark Effect */
.text-dark-effect {
    display: inline-block;
    background: linear-gradient(90deg, #343a40, var(--middle-color), #007bff, #343a40);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-move var(--animation-duration) ease infinite;
}

/* การเปลี่ยนสีตรงกลาง */
.middle-white {
    --middle-color: #ffffff; /* ใช้สีขาว */
}

.middle-black {
    --middle-color: #000000; /* ใช้สีดำ */
}

/* การเคลื่อนไหว */
@keyframes gradient-move {
    0%, 50% {
        background-position: 0% 50%;
    }
    75% {
        background-position: 50% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ระยะเวลาการเคลื่อนไหวเพิ่มเติม */
.animation-fast {
    --animation-duration: 1.5s;
}

.animation-medium {
    --animation-duration: 3s;
}

.animation-slow {
    --animation-duration: 5s;
}






/*section-todo รูปภาพกระพริบตามธีมสี เมื่อ mouse ไป hover ---------------------------------------------*/
/*------------------------------------------------------------------------------*/


/* ตั้งค่าพื้นฐาน */
:root {
    --hover-blink-duration: 0.5s; /* ระยะเวลาการกระพริบ */
}

/* เอฟเฟกต์เริ่มต้นสำหรับภาพ */
.img-effect {
    display: inline-block;
    position: relative;
    transition: transform 0.3s ease; /* การซูมเข้าเล็กน้อย */
}

/* เอฟเฟกต์กระพริบเมื่อ hover */
.img-effect:hover {
    transform: scale(1.1); /* ซูมเข้าเล็กน้อยเมื่อ hover */
}

/* Success Effect */
.img-success {
    box-shadow: 0 0 10px #28a745; /* สีเขียว */
}

.img-success:hover {
    animation: hover-success var(--hover-blink-duration) infinite alternate;
}

/* Danger Effect */
.img-danger {
    box-shadow: 0 0 10px #dc3545; /* สีแดง */
}

.img-danger:hover {
    animation: hover-danger var(--hover-blink-duration) infinite alternate;
}

/* Info Effect */
.img-info {
    box-shadow: 0 0 10px #17a2b8; /* สีฟ้า */
}

.img-info:hover {
    animation: hover-info var(--hover-blink-duration) infinite alternate;
}

/* Warning Effect */
.img-warning {
    box-shadow: 0 0 10px #ffc107; /* สีเหลือง */
}

.img-warning:hover {
    animation: hover-warning var(--hover-blink-duration) infinite alternate;
}

/* Primary Effect */
.img-primary {
    box-shadow: 0 0 10px #007bff; /* สีน้ำเงิน */
}

.img-primary:hover {
    animation: hover-primary var(--hover-blink-duration) infinite alternate;
}

/* Secondary Effect */
.img-secondary {
    box-shadow: 0 0 10px #6c757d; /* สีเทา */
}

.img-secondary:hover {
    animation: hover-secondary var(--hover-blink-duration) infinite alternate;
}

/* Light Effect */
.img-light {
    box-shadow: 0 0 10px #f8f9fa; /* สีขาว */
}

.img-light:hover {
    animation: hover-light var(--hover-blink-duration) infinite alternate;
}

/* Dark Effect */
.img-dark {
    box-shadow: 0 0 10px #343a40; /* สีดำ */
}

.img-dark:hover {
    animation: hover-dark var(--hover-blink-duration) infinite alternate;
}

/* Keyframes สำหรับเอฟเฟกต์กระพริบ */
@keyframes hover-success {
    0% {
        box-shadow: 0 0 10px #28a745, 0 0 20px #ffffff;
    }
    100% {
        box-shadow: 0 0 10px #ffffff, 0 0 20px #28a745;
    }
}

@keyframes hover-danger {
    0% {
        box-shadow: 0 0 10px #dc3545, 0 0 20px #ffffff;
    }
    100% {
        box-shadow: 0 0 10px #ffffff, 0 0 20px #dc3545;
    }
}

@keyframes hover-info {
    0% {
        box-shadow: 0 0 10px #17a2b8, 0 0 20px #ffffff;
    }
    100% {
        box-shadow: 0 0 10px #ffffff, 0 0 20px #17a2b8;
    }
}

@keyframes hover-warning {
    0% {
        box-shadow: 0 0 10px #ffc107, 0 0 20px #ffffff;
    }
    100% {
        box-shadow: 0 0 10px #ffffff, 0 0 20px #ffc107;
    }
}

@keyframes hover-primary {
    0% {
        box-shadow: 0 0 10px #007bff, 0 0 20px #ffffff;
    }
    100% {
        box-shadow: 0 0 10px #ffffff, 0 0 20px #007bff;
    }
}

@keyframes hover-secondary {
    0% {
        box-shadow: 0 0 10px #6c757d, 0 0 20px #ffffff;
    }
    100% {
        box-shadow: 0 0 10px #ffffff, 0 0 20px #6c757d;
    }
}

@keyframes hover-light {
    0% {
        box-shadow: 0 0 10px #f8f9fa, 0 0 20px #343a40;
    }
    100% {
        box-shadow: 0 0 10px #343a40, 0 0 20px #f8f9fa;
    }
}

@keyframes hover-dark {
    0% {
        box-shadow: 0 0 10px #343a40, 0 0 20px #ffffff;
    }
    100% {
        box-shadow: 0 0 10px #ffffff, 0 0 20px #343a40;
    }
}





/*section-todo ข้อความกระพริบสี ---------------------------------------------*/
/*------------------------------------------------------------------------------*/



@keyframes colorErrorChange {
    0% { color: red; }
    50% { color: #800000; }
    100% { color: red; }
}
.error-message {
    animation: colorErrorChange 1s infinite;
}

@keyframes colorSuccessChange {
    0% { color: darkgreen; }
    50% { color: #00ca00; }
    100% { color: darkgreen; }
}
.success-message {
    animation: colorSuccessChange 1s infinite;
}


@keyframes colorWarningChange {
    0% { color: #beb000; }
    50% { color: #ffe500; }
    100% { color: #beb000; }
}
.warning-message {
    animation: colorWarningChange 1s infinite;
}


@keyframes colorInfoChange {
    0% { color: #006f7d; }
    50% { color: #00e1ff; }
    100% { color: #006f7d; }
}
.info-message {
    animation: colorInfoChange 1s infinite;
}

@keyframes colorSecondaryChange {
    0% { color: #434343; }
    50% { color: #b0b0b0; }
    100% { color: #232323; }
}
.secondary-message {
    animation: colorSecondaryChange 1s infinite;
}


@keyframes colorDangerChange {
    0% { color: #ed0000; }
    50% { color: #d17575; }
    100% { color: #920000; }
}
.danger-message {
    animation: colorDangerChange 1s infinite;
}



tr[data-href] {
    cursor: pointer;
}

.divs-hover div:hover {
    background-color: #f5f5f5; /* สีพื้นหลังเมื่อ hover */
    transition: background-color 0.3s; /* เพิ่มเอฟเฟกต์การเปลี่ยนสี */
}

.div-hover:hover {
    background-color: #f5f5f5; /* สีพื้นหลังเมื่อ hover */
    transition: background-color 0.3s; /* เพิ่มเอฟเฟกต์การเปลี่ยนสี */
}

















/*สร้าง gradient border-bottom ไล่ระดับสีจากเข้มไปโปร่งใส (transparent)*/

.gradient-border-bottom {
    position: relative; /* ใช้สร้างเลเยอร์สำหรับ pseudo-element */
}

.gradient-border-bottom::after {
    content: '';
    position: absolute;
    bottom: 0; /* ติดขอบล่าง */
    left: 0;
    width: 100%;
    height: 3px; /* ความหนาของ border */
    background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0));
    pointer-events: none; /* ให้ border เป็นเพียงดีไซน์ */
}


.hover-effect {
    background-color: rgb(33 33 33); /* bg-info */
    color: rgb(33 33 33); /* text-info */
    transition: color 0.3s ease; /* เพิ่มการเปลี่ยนสีแบบ smooth */
}

.hover-effect:hover {
    color: #ffffff; /* เปลี่ยนสีข้อความเมื่อ hover */
}


.hover-effect-info {
    background-color: #17a2b8; /* bg-info */
    color: #17a2b8; /* text-info */
    transition: color 0.3s ease; /* เพิ่มการเปลี่ยนสีแบบ smooth */
}

.hover-effect-info:hover {
    color: #ffffff; /* เปลี่ยนสีข้อความเมื่อ hover */
}















/* คลาสพื้นฐานสำหรับ hover */
.text-hover {
    display: inline-block;
    background-size: 200%;
    background-position: left;
    background-clip: text;
    -webkit-background-clip: text;
    color: inherit;
    transition: background-position 0.5s ease, color 0.5s ease;
}

.text-hover:hover {
    background-position: right;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}

/* ธีมสีต่างๆ */
.text-hover-primary {
    background-image: linear-gradient(to right, #0d6efd, #a7c3f5);
}

.text-hover-success {
    background-image: linear-gradient(to right, #198754, #86d39a);
}

.text-hover-danger {
    background-image: linear-gradient(to right, #dc3545, #f7a2a9);
}

.text-hover-warning {
    background-image: linear-gradient(to right, #ffc107, #ffe58a);
}

.text-hover-info {
    background-image: linear-gradient(to right, #0dcaf0, #a3e7f9);
}

.text-hover-dark {
    background-image: linear-gradient(to right, #212529, #616161);
}




/* พื้นหลังแบบ Textured */
.bg-texture {
    background: repeating-linear-gradient(
        90deg,
        rgba(227, 227, 227, 0.1),
        rgba(227, 227, 227, 0.1) 10px,
        rgba(255, 255, 255, 0.3) 10px,
        rgba(255, 255, 255, 0.3) 20px
    );
    padding: 15px;
    border-radius: 20px;
}

.bg-texture-180 {
    background: repeating-linear-gradient(
        180deg,
        rgba(200, 200, 200, 0.1),
        rgba(200, 200, 200, 0.1) 10px,
        rgba(255, 255, 255, 0.3) 10px,
        rgba(255, 255, 255, 0.3) 20px
    );
    padding: 15px;
    border-radius: 20px;
}