/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #051e23; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #082b72; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #008cad; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #080065; /* กำหนดตัวอักษร ให้สี ตัดกับ BG  */
  --sky-contrast-color: #aed5eade; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}


/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/

    .sidenav_blog {
        width: 98%;
        overflow-x: hidden;
        padding-top: 20px;
        margin-top: 20px;
    }


    /* On mouse-over */

    .sidenav_blog a:hover,
    .btn_dropdown:hover {
        color: #99aaff;
    }

    /* Add an active class to the active dropdown button */

    .active {
        background-color: #fff3f3;
        color: 010101;
    }

    .dropdown-content {
        display: none;
        padding: 8px;
    }

    .title-get {
        color: #091c69 !important;
        font-family: "Kanit" !important;
        font-weight: 300 !important;
        margin-top: 1.4rem !important;
        margin-bottom: 1.4rem !important;
        font-size: 1.25rem !important;
        line-height: 30px;
    }

.row::after {
  content: "";
  clear: both;
  display: table;
}

.table-overflow {
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
    border-top: #7b91ff 2px ridge;
    border-bottom: #7b91ff 2px ridge;
    margin-bottom: 1rem;
    vertical-align: top;
    box-shadow:inset 0 .025em .5em rgba(107, 131, 255, 0.3), 0 .025em .5em rgba(129, 78, 200, 0.1);
}

th, td {
  text-align: left;
  padding: 8px;
}


tr:nth-child(even) {
  background-color: #f6faff;
}


table>thead {
    font-weight: 600;
}

tbody, td, tfoot, th, thead, tr {
    border-bottom: #99aaff 1px ridge;
    padding: .5rem .5rem;
    vertical-align: top;
}

tr:hover {
    border-bottom: #4161ff 2px ridge;
    background-color: #d4e9ffbc;
}


table>:not(caption)>*>* {
    padding: .5rem .5rem;
}


  #work-post >.video-responsive {
    position: relative; /* สำคัญ: เพื่อให้ iframe ตำแหน่ง absolute ได้ */
    padding-bottom: 56.25%; /* อัตราส่วน 16:9 (9/16 = 0.5625) ถ้าวิดีโอเป็น 4:3 จะใช้ 75% */
    padding-top: 30px; /* อาจจะเพิ่มได้ถ้าต้องการพื้นที่ว่างด้านบนเล็กน้อย หรือเป็นค่าสำหรับ Browser Support */
    height: 0;
    overflow: hidden; /* ซ่อนส่วนที่ล้นออกไป */
    max-width: 100%; /* ทำให้ div ไม่เกินความกว้างของ element แม่ */
}

  #work-post >.video-responsive iframe,
  #work-post >.video-responsive object,
  #work-post > .video-responsive embed {
    position: absolute; /* ทำให้ iframe ลอยอยู่เหนือ padding-bottom */
    top: 0;
    left: 0;
    width: 100%; /* ให้ iframe กว้างเต็มพื้นที่ของ div แม่ */
    height: 100%; /* ให้ iframe สูงเต็มพื้นที่ของ div แม่ */
}

.php-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-form-loading 1s linear infinite;
}

@keyframes php-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


#work-post{
   background-color: #ffffffd1; 
   padding-top: 1.5rem;
   box-shadow:  0em 0em 1.5em rgb(255, 255, 255);

}

#work-post > .column {
  float: left;
  width: 50%;
  padding: 5px;
}

 #work-post > .alert {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    box-shadow: inset 0 .025em 0.5em rgba(107, 131, 255, 0.3), inset 0 .025em .5em rgba(129, 78, 200, 0.1);
  }

#work-post > .alert,.alert-success {
    border-radius: 1.25rem;
    border: 1px solid rgb(123, 255, 143);
    border-left: rgba(0, 138, 5, 0.9) 0.75rem solid;
    padding:25px 5px 15px 25px;
    background: color-mix(in srgb, #eefff7, transparent 15%);
}  

#work-post > .alert,.alert-warning {
    border-radius: 1.25rem;
    border: 1px dashed rgb(210, 170, 121);
    border-left: rgba(180, 124, 61, 0.9) 0.75rem solid;
    padding:25px 5px 15px 25px;
    color: var(--contrast-color);
    background: color-mix(in srgb, #fffde3, transparent 15%);
}

#work-post > .alert,.alert-info {
    border-radius: 1.25rem;
    border: 1px solid rgba(155, 180, 217, 0.2);
    border-left: 10px solid #0c4aa7; 
    padding:20px 5px 15px 25px;
    color: var(--contrast-color);
    background: color-mix(in srgb, #e7ffff, transparent 15%);
}

#work-post > .alert,.alert-danger {
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 150, 197, 0.7);
    border-left: 10px solid #a70c54; 
    padding:20px 5px 15px 25px;
    color: var(--contrast-color);
    background: color-mix(in srgb, #ffecfe, transparent 15%);
}

  #work-post >  h3 {
        font-size: 24px;
        line-height: 32px;
        font-weight: 400;
    }

   #work-post > small.h7 {
    margin-top: .25rem;
    margin-bottom: .5rem;
    font-weight: 300;
    line-height: 1.4;
    color: #FCFCFC;
    }
     #work-post >   small.h7:hover {
            color: #fe3e3eff;
        }

    #work-post > p {
        margin-top: 1.15rem;
        margin-bottom: 0.5rem;
        line-height: 1.9;
    }

   #work-post > hr {
        margin-top: 0.75rem;
        margin-bottom: 1.5rem;
        color: #7a7a21;
        border: 0;
        border-top: 1px solid;
        opacity: .25;
    }

   #work-post > img {
        border-radius: 10px;
        border: #99aaff 1px solid;
    }

   #work-post > .video-responsive { margin-bottom: 20px ;}
   #work-post > .video-responsive   iframe {
        border-radius: 4px;
        border: #e4b781ff 0.45rem double;
        border-top: rgba(180, 124, 61, 0.77) 0.75rem solid;
    }

    #work-post > dl,
    ol,
    ul {
        margin-bottom: 0.4rem;
    }

   #work-post > ul li {
        list-style: thai;
        font-size: 1.05rem;
        color: rgb(66, 47, 2);
        line-height: 1.4;
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
    }

  #work-post >  ul li ul li {
        list-style: square;
        font-size: 16px;
        color: #320c01ff;
        margin-top: 0.3rem;
        margin-bottom: 0.3rem;
        line-height: 1.4;
        margin-left: 0.5rem;}

   #work-post > ol ol,
    ol ul,
    ul ol,
    ul ul {
        margin-top: 0.2rem;
        margin-left: 0.55rem;
        margin-bottom: 1.25rem;
    }

/* -------------------- 768px  */


@media (max-width: 768px) { 

 table, thead, tbody, th, td, tr {
        display: block;
      }

   tr >  img {
      width: 100%; 
    }      

      thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
      }

      td {
        border: none;
        position: relative;
        padding-left: 50%;
      }

      td::before {
        position: absolute;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        content: attr(data-label); /* Displays the data-label content */
      }    

 #work-post > .table-overflow {
  overflow-x: auto;
}
    #work-post > .column {
  float: left;
  width: 100%;
  padding: 5px;
}

        #work-post > .px-4 {
        padding-right: -0.05rem !important;
        padding-left: -0.05rem !important;
            flex-shrink: 0;
            width: 100%;
            max-width: 100%;
        }

        #work-post > .alert {
            padding: 0.5rem !important;
        }

    #work-post > .alert,.alert-success {
        border-radius: 0.5rem;
        border: 1px solid rgb(121, 210, 151);
        border-top: rgba(0, 182, 27, 0.77) 0.75rem solid;
        padding:10px;
        background: color-mix(in srgb, #eefff7, transparent 15%);
    }

    #work-post > .alert,.alert-warning {
        border-radius: 0.5rem;
        border: 1px solid rgb(210, 170, 121);
        border-top: rgba(180, 124, 61, 0.77) 0.75rem solid;
        padding:10px;
        color: var(--contrast-color);
        background: color-mix(in srgb, #faffe5, transparent 15%);
    }

    #work-post > .alert,.alert-info {
        border-radius: 0.5rem;
        border: 1px solid rgba(155, 180, 217, 0.781);
        border-top: 0.75rem solid #0c4aa7; 
        padding:10px;
        color: var(--contrast-color);
        background: color-mix(in srgb, #e7faff, transparent 15%);
    }

    #work-post > .alert,.alert-danger {
        border-radius: 0.5rem;
        border: 1px solid rgba(255, 150, 197, 0.7);
        border-top: 12px solid #a70c54; 
        padding:10px;
        color: var(--contrast-color);
        background: color-mix(in srgb, #ffeff8, transparent 15%);
    }    

     #work-post >   img {
            min-width: 95% !important;
            max-width: 99%;
            margin: auto;
            border-radius: 10px;
            margin-bottom: 0.05rem;
        }

        h2 {
            font-size: 22px;
            line-height: 30px;
        }

        h3 {
            font-size: 18px;
            line-height: 26px;
        }

        h4 {
            font-size: 16px;
            line-height: 24px;
            font-weight: 300;
        }
}




.scroll-top.active {
    visibility: visible;
    opacity: 1;
    bottom: 15px;
}

.scroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: -15px;
    z-index: 99999;
    background-color: var(--accent-color);
    width: 44px;
    height: 44px;
    border-radius: 50px;
    transition: 0.4s;
}
.align-items-center {
    align-items: center !important;
}
.justify-content-center {
    justify-content: center !important;
}

.d-flex {
    display: flex !important
;
}


      .my-element {
        background-image: url("assets/img/blog/2.png");
        background-size: cover;
        background-position: center;
        filter: blur(5px); /* Adjust the pixel value for desired blur intensity */
    }
       .o-e {
        background-color: rgba(88, 255, 70, 0.79); /* Semi-transparent background */
        backdrop-filter: blur(10px); /* Blurs content behind this element */
    }
    .gradient-animated-element {
        background: linear-gradient(to right, #ff7e5f, #36ff79ff, #508dffff, #ff2525ff);
        background-size: 400% 100%; /* Make it wider than the element */
        animation: gradient-animation 5s ease infinite;        
    } 

    .gradient-animated-a {
        background-size: 100% 100%; /* Make it wider than the element */
        animation: myAnimation 5s ease infinite;        
    } 

    .ga4{
      background-color: red;
      position: relative;      
      animation-name: myAnimation;
      animation-duration: 20s;
      animation-iteration-count: 3;      
    }

    .bigKing{
        font-size:1.25rem;
        background: linear-gradient(to right, #5b0062, rgb(188, 106, 255), rgb(251, 0, 255), rgb(140, 0, 255));
        background-size: 400% 100%; /* Make it wider than the element */        
        animation: gradient-animation 4s ease infinite;           
    }

    .btnKing:hover{
        transform: rotate(70deg); /* Rotate 90 degrees on hover */
    }

    .btnKing{
        transform: rotate(0deg);
        transition: transform 0.5s ease-in-out;    
    }

        .img-circle {
            float: left;
            clip-path: circle(40%);
            shape-outside: circle(45%);
            animation: mymove 5s infinite;
            clip-path: circle(40%);
        }

        @keyframes mymove {
        50% {clip-path: circle(20%);}
        }

        .spinner {
            animation: spin 2s linear infinite; /* Applies the 'spin' animation */
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg); /* Start at 0 degrees */
            }
            100% {
                transform: rotate(360deg); /* End at 360 degrees (one full rotation) */
            }
        }

        @keyframes zoomInOut {
        0% {
            transform: scale(1); /* Original size */
        }
        50% {
            transform: scale(1.2); /* Zoom in to 120% */
        }
        100% {
            transform: scale(1); /* Return to original size */
        }
        }

 

    @keyframes gradient-animation {
        0% {
            background-position: 0% 50%; /* Start position */
        }
        50% {
            background-position: 100% 20%; /* Middle position */
        }
        75% {
            background-position: 70% 50%; /* Middle position */
        }        
        100% {
            background-position: 0% 20%; /* Return to start */
        }
    }       

@keyframes myAnimation {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}