@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@100..700&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


:root {
    --text-dname: #c21b1b;
}
.header-contact {
    background: rgb(152,2,2);
        background: linear-gradient(90deg, rgba(152,2,2,1) 0%, rgba(208,18,18,1) 100%);
    height: auto; /* ความสูงปรับตามเนื้อหา */
}
.text-header {
    font-size: 12px;
}

.logo {
    width: 60px;
}
.logo-text {
    display: flex; /* ใช้ Flexbox เพื่อจัดวาง */
    align-items: center; /* จัดตำแหน่งแนวตั้งให้อยู่ตรงกลาง */
}

.logo {
    margin-right: 5px; /* เพิ่มระยะห่างระหว่างโลโก้และข้อความ */
}

.text {
    display: flex; /* ใช้ Flexbox เพื่อจัดวางข้อความ */
    flex-direction: column; /* จัดเรียงข้อความในแนวตั้ง */
}

.navbar-brand p {
    margin-top: -9px;
    font-size: 0.6em; /* ปรับขนาดตัวอักษร */
    font-family: "Anuphan", sans-serif;
}


.nav-link.active {
    color: #d41e1e !important; /* สีตัวอักษรเมื่อถูกเลือก */
    font-weight: bold; /* ตัวหนาเมื่อถูกเลือก */
    /* เพิ่มสไตล์อื่น ๆ ตามต้องการ */
}

.bg-contact {
    background: rgb(194, 16, 16);
    border-radius: 50px;
    padding: 0.4rem 1rem;
    color: #fff;
}

.bg-contact:focus{
    box-shadow: none;
}






.card-cose img{
    border-radius: 12px;
    opacity: 0; /* ซ่อนองค์ประกอบเริ่มต้น */
    transform: translateY(50px); /* เลื่อนลงมา 50px จากตำแหน่งเดิม */
    animation: slideUp 0.8s ease-out forwards; /* เรียกใช้แอนิเมชัน */
}

.image-container {
    position: relative;
    overflow: hidden;
}

.image-container img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.image-container:hover img {
    transform: scale(1.1);
}

.overlay-cose {
    position: absolute;
    height: 100%;
        bottom: 0;
        right: 0;
        width: 100%;
        background: linear-gradient(to top left, rgba(0, 0, 0, 0.9), rgba(136, 0, 0, 0.6), rgba(255, 0, 0, 0.048));
        /* เพิ่มสีดำทึบมากขึ้น */
        color: white;
        padding: 15px;
        opacity: 0;
        transition: opacity 0.6s ease;
        display: inline-block;
        text-align: right;
        margin: 0;
}

.image-container:hover .overlay-cose {
    opacity: 1;
    border-radius: 12px 0 12px 0;
}

.overlay-cose h4 {
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.overlay-cose p {
    color:#dbdbdbb7;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}


















/* btn-eye */
.btn-eye {
    background-color: #f1f1f1;
}
.btn-add {
    background-color: rgb(62, 212, 42);
    color:#fff;
    border-radius: 12px;
    font-weight: 600;
}
.home-icon {
    text-decoration: none;
    color:#282525

}








/* form-control */
.form-control {
    font-size: 14.5px;
}



/* Tabel sytle */
.data-created {
    font-size: 12px;
}


.card-service {
    position: relative;
    overflow: hidden;
    background: rgb(152,2,2);
    background: linear-gradient(90deg, rgba(152,2,2,1) 0%, rgba(208,18,18,1) 100%);
    border-radius: 16px;
    border: solid 1px #ff4545;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    color: white;
}

.card-service:hover::before { /* เพิ่ม :hover */
    content: '';
    position: absolute;
    top: -100%;
    right: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(135deg, rgba(248, 16, 16, 0.699), rgba(255, 255, 255, 0));
    animation: shine 2s infinite linear;
    z-index: 1;
}

@keyframes shine {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-50%, 50%);
    }
}


.card-service-2 img {
    border-radius: 14px;
}
.card-service-2 h5 {
    color:#fff;
    margin-top: 10px;
}
.card-service-2 span {
    color:#ff8e8e;
    font-size: 13px;
}

.card-service-2 {
    position: relative;
    overflow: hidden;
    background: rgb(255, 255, 255);
    border-radius: 16px;
    border: solid 1px #e2e2e2;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    color: white;
}

@keyframes shine {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-50%, 50%);
    }
}


.card-service-2 img {
    border-radius: 14px;
}

.card-service-2 h5 {
    font-size: 22px;
    color: #222222;
    margin-top: 10px;
    font-weight: 600;
}

.card-service-2 span {
    color: #383838;
    font-size: 14px;
}

/* การตัดคำบรรทัด */
.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-5 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.text-truncate-10 {
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    overflow: hidden;
}










.card-postblog{
    background-color: #ffffff;
    position: relative; /* กำหนดตำแหน่ง relative */
    z-index: 2; /* กำหนด z-index ให้สูงกว่า img */
    margin-top: -5rem;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    border-radius: 0 16px 0 16px;
}
.card-postblog span{
    font-size: 13px;
}
.card-postblog p {
    color:#afafaf;
    font-size: 12px;
}
.card-postblog-img {
    border-radius: 12px;
    position: relative; /* กำหนดตำแหน่ง relative */
    z-index: 1; /* กำหนด z-index ให้น้อยกว่า card-postblog */
}

.text-content {
    padding: 20px;
}
.read-more-btn {
    background-color: #f0f0f0;
    color: #333;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 8px;
    display: inline-block;
    margin-top: 20px;
}











/* owl-carousel */
.owl-carousel .item img {
    width: 100%; /* ให้รูปภาพเต็มความกว้างของ item */
    height: auto;
    border-radius: 14px;
}

.owl-carousel .owl-dots {
  display: none;
}


.owl-carousel .owl-dots .owl-dot {
    display: inline-block;
}

.owl-carousel .owl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}

.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
    background-color: rgba(36, 4, 4, 0.685); /* สีพื้นหลัง */
    color: rgb(255, 255, 255); /* สีตัวอักษร */
    width: 40px; /* ความกว้าง */
    border: solid 1px #a81b1b;
    height: 40px; /* ความสูง */
    border-radius: 12px; /* รัศมีมุม (ทำให้เป็นวงกลม) */
    cursor: pointer; /* เปลี่ยนเคอร์เซอร์เป็นรูปมือ */
    font-size: 20px; /* ขนาดตัวอักษร */
    display: flex; /* ใช้ Flexbox เพื่อจัดตำแหน่งเนื้อหา */
    justify-content: center; /* จัดตำแหน่งเนื้อหาให้อยู่ตรงกลางแนวนอน */
    align-items: center; /* จัดตำแหน่งเนื้อหาให้อยู่ตรงกลางแนวตั้ง */
    transition: background-color 0.3s ease; /* เพิ่ม transition */
}

.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
    background-color: rgb(255, 255, 255); /* สีพื้นหลังเมื่อ hover */
    color:#df4747;
}






.container-bg {
    background-image: url('/img/bg_course.jpg');
    background-size: cover;
    background-position: center;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to bottom, rgba(190, 15, 15, 0.8), rgb(255, 255, 255)), url('/img/bg_course.jpg');
}

.text-center-course {
    color: #ffffff;
    font-size: 3rem;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}




.container-bg-2 {
    background-image: url('/img/p2.jpg');
    background-size: cover;
    background-position: center;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to bottom, rgba(190, 15, 15, 0.8), rgb(255, 255, 255)), url('/img/p2.jpg');
}

.text-center-course {
    color: #ffffff;
    font-size: 3rem;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}




.slideshow .slick-prev,
.slideshow .slick-next {
    position: absolute;
    transform: translateY(-50%);
    z-index: 10;
}

.slideshow .slick-prev {
    left: 10%;
    /* ปรับค่าตามต้องการ */
}

.slideshow .slick-next {
    right: 10%;
    /* ปรับค่าตามต้องการ */
}






.text-dname {
    color: var(--text-dname)
}



/* สไลด์ splide__slide */

.splide__slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.splide__slide img {
    max-width: 100%; /* ให้รูปภาพเต็มความกว้างของ slide */
    max-height: 100%; /* ให้รูปภาพเต็มความสูงของ slide */
    object-fit: contain; /* ปรับขนาดรูปภาพให้พอดีกับ slide โดยไม่บิดเบี้ยว */
}

.splide__arrow {
    background-color: rgba(228, 30, 30, 0.5); /* สีพื้นหลัง */
    color: white; /* สีตัวอักษร */
    width: 40px; /* ความกว้าง */
    height: 40px; /* ความสูง */
    border-radius: 50%; /* รัศมีมุม (ทำให้เป็นวงกลม) */
    border: none; /* ลบเส้นขอบ */
    cursor: pointer; /* เปลี่ยนเคอร์เซอร์เป็นรูปมือ */
    font-size: 20px; /* ขนาดตัวอักษร */
    display: flex; /* ใช้ Flexbox เพื่อจัดตำแหน่งเนื้อหา */
    justify-content: center; /* จัดตำแหน่งเนื้อหาให้อยู่ตรงกลางแนวนอน */
    align-items: center; /* จัดตำแหน่งเนื้อหาให้อยู่ตรงกลางแนวตั้ง */
    transition: background-color 0.3s ease; /* เพิ่ม transition */
}

.splide__arrow:hover {
    background-color: rgba(0, 0, 0, 0.8); /* สีพื้นหลังเมื่อ hover */
}

.splide__arrow--prev {
    left: 10px; /* ระยะห่างจากขอบซ้าย */
}

.splide__arrow--next {
    right: 10px; /* ระยะห่างจากขอบขวา */
}





.btn-contact-a {
    border: solid 1px #c21b1b;
    color:#c21b1b;
    border-radius: 12px;
}
.btn-contact-a:hover{
    color:#fff;
    background-color: #c21b1b;
}

.btn-contact {
    background-color: #c21b1b;
    color:#fff;
    border-radius: 12px;
}
.btn-contact:hover {
    background-color: #ffffff;
    color:#c21b1b;
    border-radius: 12px;
    border: none;
}













/* อเนมิชั่น */
@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}







/* Footer */
footer {
    background-color:#eaeaea;
    color: white;
}

footer a {
    color: rgb(48, 48, 48);
    text-decoration: none;
}

footer a:hover {
    color: #af0e0e;
}


.text_footer_p1 {
    font-size: 14px;
    color: #282525;
}
.text_footer_p {
    font-size: 12px;
    color: #282525;
}
.hr-borderx {
    width: 70px;
    margin-top: -10px
}

.social-icons img {
    width: 30px;
    margin-right: 10px;
}

.qr-code {
    position: relative;
}

.line-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2em;
    color: red;
    font-weight: bold;
    text-decoration: line-through;
}


.contact-details a {
    font-size: 13px;
}

.contact-details p {
    color: #af0e0e;
}


/* social-icons */
.social-icons{
    display: flex;
}

.social-icons a {
    border-radius: 6px;
    background-color: #ffffff;
    border: solid 1px #d8d8d8;
}
.social-icons a:hover{
    background-color: #e4e4e4;
}
.social-icons img {
    width: 16.5px;
}


/* Responsive Design */
@media (max-width: 768px) {
    .col-md-3 {
        margin-bottom: 20px;
    }
}











.discord {
    font-size: 10px;
    color: #97a3f5;
}

.card {
    border: none;
}


.btn-dezen {
    color: #fff;
    background-color: #a2b2cb;
    border: solid 1px #a2b2cb;
    border-radius: 10px;
}

.btn-dezen:hover {
    border: none;
    border-bottom: solid 2px #87b6ff;
    background-color: #515a68;
}



/* Card Website My */

    .card-dezen {
        border-radius: 1rem;
        background-color: rgb(87, 87, 87);
        padding: 1rem;
      }
  
  .image {
    width: 50px;
  }
  
  .name {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
  }
  
  .function {
    font-size: 0.75rem;
    line-height: 1rem;
    color: rgba(156, 163, 175, 1);
  }
  
  
  .request {
    margin-top: 1.5rem;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
    transition: all .3s ease;
  }
  
  .request:hover {
    background-color: rgb(118, 36, 194);
    color: #fff;
  }
  





  .card-banner {
    border-radius: 14px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  }

  /* Website */
  .btn-link {
    text-decoration: none;
    color: #3e7adb;
    font-size: 14px;
    background-color: #f0f6ff;
    border-radius: 18px;
  }
  .btn-link:hover::after {
    content: 'เข้าชม'; /* แสดงคำว่า 'Next' เมื่อ hover */
    color: #515a68;
    font-weight: 600;
    text-decoration: none;
  }
  
  .btn-link:hover {
    text-decoration: none;
    color: #515a68;
    color: transparent; /* ทำให้ข้อความเดิมหายไปเมื่อ hover */
  }

  .font-h6 {
    color: #3d5579;
    font-weight: 600;
  }
  .font-p {
    font-size: 13px;
  }


  .card-dezen-2 {
    background-color: #f1f7ff;
    border-radius: 12px;
    border: solid 1px #ddeaff;
    text-decoration: none;
    color: #494949;

  }
  .card-dezen-2:hover {
    text-decoration: none;
    border-bottom: solid 3px #87b6ff;
  }

  .card-out {
    background-color: rgb(240, 76, 76);
    border-radius: 12px;
    text-decoration: none;
    color: #ffffff;
    font-size: 13px;
    
  }
  .card-out:hover{
    color: #fff;
    background-color: rgb(165, 67, 67);
    text-decoration: none;
    
  }

  .icon-bg{
    background-color: #fff6d8;
    color: #ffc60a;
    padding: 1.5px 2.5px;
    font-size: 18px;
    border-radius: 5px;
  }

  .card-over {
    background-color: #f7f7f7;
    box-shadow: rgba(6, 58, 100, 0.06) 0px 2px 4px 0px inset;
    border-radius:5vh;
  }
  

  /* btn style */
  .btn-ecyy{
    background-color: #fafafa;
    text-decoration: none;
    color: #494949;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
  }
  .btn-ecyy:hover {
    text-decoration: none;
    color: #97a3f5;
    border-bottom:solid 2px #97a3f5;
  }

  .btn-conn {
    background-color: #006eff;
    border: solid 1px #12669e;
    color:#ffffff;
    font-size: 18px;
    font-weight: 600;
    border-radius: 14px;
    width: 100%;
  }
  .btn-conn:hover{
    color:#fff;
    background-color: #0d51aa;
  }


  .btn-on {
    background-color: #0b380e;
    color:#40ff2f;
    border-radius: 14px;
    font-size: 12px;
    padding:  3px 10px;
  }

  .btn-on:hover{
    color:#fff;
  }

  .btn-inactive {
    padding:  3px 10px;
    background-color: rgb(87, 3, 3);
    color: #c91f1f;
    }


  .text-namegallery {
    font-size: 14.5px;
  }


  /* Table Button Style */ /* ปุ่มแก้ไข ลบ */
  .btn-edit {
    background-color: #fff;
    border: solid 1px #1aa125;
    color:#1aa125;
    font-size: 18px;
    font-weight: 600;
    border-radius: 14px;
  }
  .btn-edit:hover{
    background-color: #1aa125;
    color:#fff;

  }
  .btn-edit-2 {
    background-color: #1aa125;
    color:#fff;
    font-size: 18px;
    font-weight: 600;
    border-radius: 14px;
  }
  .btn-edit-2:hover{
    background-color: #fff;
    border: solid 1px #1aa125;
    color:#1aa125;
  }

  .btn-del-2 {
    background-color: #b81e1e;
    color:#fff;
    font-size: 18px;
    font-weight: 600;
    border-radius: 14px;
  }
  .btn-del-2:hover{
    background-color: #fff;
    border: solid 1px #b81e1e;
    color:#b81e1e;
  }


  .btn-del {
    background-color: #861e1e;
    font-size: 18px;
    color:#fff;
    font-weight: 600;
    border-radius: 14px;
  }
  .btn-del:hover{
    background-color: #fff;
    border: solid 1px #861e1e;
    color:#861e1e;
  }








  .card-item {
    border: solid 1px #d8d8d8;
    border-radius: 16px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
  }


  .hr-border {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent 50%, #33333d 50%);
    background-size: 10px 100%; 
    margin-top: 20px; 
    margin-bottom: 20px;
  }


  .form-control {
    border-radius: 12px;
    padding: 0.85rem;
  }



  .model-dezenx {
    border-radius: 16px;
  }



/* popupSwal */
.success-popupSwal {
    border-radius: 25px;
    background-color: #223320;
    border: solid 1px #447244;
    color:#fff;
}

.warning-popupSwal {
    border-radius: 25px;
    background-color: #342d1c;
    border: solid 1px #695532;
    color:#fff;
}


.error-popupSwal {
    border-radius: 25px;
    background-color: #9b1c1c;
    border: solid 1px #ff3a3a;
    color:#ffffff;
}

.edit-popupSwal {
    border-radius: 25px;
    background-color: #1f1f1f;
    border: solid 1px #2b2b2b;
    color:#ffffff;
}





.Swal-Button {
    background-color: #14151696;
    border: solid 1px #323435;
    color:#fff;
    border-radius: 2.5vh;
    padding: 1rem 6rem;

}

.Swal-cButton {
    background-color: #84414198;
    border: solid 1px #b94242;
    color:#fff;
    border-radius: 1.5vh;

}
            


.vdo_input {
    background-color: #111114;
    box-shadow: rgba(31, 33, 44, 0.1) 0px 4px 12px;
    border-radius: 13px;
    
}