/* Section Styling */

   #gallery {
       /* background-color: #f8f9fa; */
       background-color: #ffff;
       padding: 50px 0;
   }

   .section-title {
       margin-bottom: 30px;
   }

   .section-title h2 {
       font-size: 1.3rem;
       font-weight: bold;
       margin-bottom: 10px;
   }

   .section-title p {
       font-size: 1rem;
       color: #6c757d;
   }

   /* Card Styling */
   /* .course-card {
       position: relative;
       z-index: 1;
       border: none;
       border-radius: 10px;
       overflow: hidden;
       transition: transform 0.3s, box-shadow 0.3s;
   } */

   .course-card {
       /* จำเป็น เพื่อให้อยู่ใต้กรอบ overlay */
       position: relative;
       /* เพื่อให้เนื้อหาอยู่ใต้ <img class="border-overlay"> */
       z-index: 1;
       border: none;
       border-radius: 10px;
       overflow: hidden;
       transition: transform 0.3s, box-shadow 0.3s;
       /* ป้องกันโปร่งใสทะลุพื้น */
       background-color: #fff;
       width: 100%;
       /* ป้องกัน padding ล้น */
       box-sizing: border-box;
       transition: transform 0.3s ease, box-shadow 0.3s ease;
   }

   /* .course-card:hover {
       transform: scale(1.03);
       box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
   } */

   /* .card-img-top {
       background-color: #e9ecef;
        border-bottom: 1px solid #dee2e6;
   } */

   .course-title {
       font-size: 1.20rem;
       font-weight: bold;
       /* color: #333; */
       color: #3b368c;
       margin-bottom: 15px;
   }

   .course-price {
       font-size: 1rem;
       color: #555;
       margin-bottom: 20px;
   }

   /* Button Styling */
   .btn {
       font-size: 0.9rem;
       padding: 10px 20px;
       border-radius: 25px;
   }

   .btn-outline-primary {
       border: 1px solid #007bff;
       color: #007bff;
       background: transparent;
       transition: all 0.3s;
   }

   .btn-outline-primary:hover {
       background-color: #007bff;
       color: #fff;
   }

   .btn-primary {
       background-color: #007bff;
       border: none;
       color: #fff;
       padding: 10px 20px;
       border-radius: 25px;
   }

   .btn-primary:hover {
       background-color: #0056b3;
   }

   /* Responsive Design */
   @media screen and (max-width: 768px) {
       .course-title {
           font-size: 1rem;
       }

       .course-price {
           font-size: 0.9rem;
       }

       .btn {
           font-size: 0.8rem;
       }
   }


   /* skewed */
   .skewed-section {
       /* background-color: #1c1331; */
       background-color: #f1f3f6;
       /* สีเข้มแบบในภาพ */
       position: relative;
       z-index: 1;
       clip-path: polygon(0 0, 100% 5%, 100% 100%, 0% 100%);
       color: #fff;
       padding-top: 100px;
       /* ปรับตามความเหมาะสม */
       padding-bottom: 100px;
   }

   /* .skewed-bottom {
        background-color: #1c1331;
        position: relative;
        z-index: 1;
        clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
        color: #fff;
        padding-top: 100px;
        padding-bottom: 100px;
    } */

   .skewed-top {
       /* background-color: #1c1331; */
       background-color: #a2b1d7;
       /* สีพื้นหลังตามภาพ */
       position: relative;
       z-index: 1;
       clip-path: polygon(0 10%, 100% 0, 100% 100%, 0% 100%);
       color: #fff;
       padding-top: 100px;
       padding-bottom: 100px;
   }

   /* see all */
   .btn-gradient-outline {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 8px 16px;
       border: 2px solid;
       border-image: linear-gradient(to right, #c62f45, #5a52d6) 1;
       background-color: transparent;
       color: #000;
       text-transform: uppercase;
       font-weight: bold;
       border-radius: 8px;
       text-decoration: none;
       transition: all 0.3s ease;
   }

   .btn-gradient-outline:hover {
       background-image: linear-gradient(to right, #c62f45, #5a52d6);
       color: #fff;
       border: 2px solid transparent;
   }


   .flame-title {
       display: inline-block;
       position: relative;
       color: #fff;
       /* background: #5c6bc0; */
       padding: 12px 24px;
       border-radius: 30px;
       animation: flicker 1s infinite;
       font-weight: bold;
       font-size: 24px;
   }

   @keyframes flicker {
       0% {
           transform: rotate(0deg) scale(1);
       }

       25% {
           transform: rotate(-1deg) scale(1.01);
       }

       50% {
           transform: rotate(1deg) scale(1.02);
       }

       75% {
           transform: rotate(-0.5deg) scale(0.99);
       }

       100% {
           transform: rotate(0deg) scale(1);
       }
   }

   /* zoom ดูลายละเอียด */
   .btn-see-more {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 0;
       padding: 12px 28px;
       border: 2px solid #4285f4;
       border-radius: 30px;
       background-color: transparent;
       color: #4285f4;
       font-weight: bold;
       text-decoration: none;
       position: relative;
       overflow: hidden;
       transition: background 0.4s ease, color 0.4s ease, gap 0.4s ease;
   }

   .btn-see-more-content {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 0;
       padding: 8px 10px;
       border: 2px solid #4285f4;
       border-radius: 30px;
       background-color: transparent;
       color: #4285f4;
       font-weight: bold;
       text-decoration: none;
       position: relative;
       overflow: hidden;
       transition: background 0.4s ease, color 0.4s ease, gap 0.4s ease;
   }

   .btn-see-more .text .btn-see-more-content {
       transition: transform 0.4s ease;
   }

   .magnify-icon {
       display: inline-block;
       width: 20px;
       height: 20px;
       margin-left: 0px;
       background-image: url('/assets/images/samples/zoom-search-hover-spin-wihte.gif');
       background-size: contain;
       background-repeat: no-repeat;
       opacity: 0;
       transform: translateX(-10px);
       transition: all 0.4s ease;
   }

   /* Hover Effect */
   .btn-see-more:hover,
   .btn-see-more-content:hover {
       background: linear-gradient(to right, #5c6bc0, #7986cb);
       /* สีพื้นหลังสวย */
       color: #fff;
       gap: 10px;
   }

   .btn-see-more:hover .magnify-icon,
   .btn-see-more-content:hover .magnify-icon {
       opacity: 1;
       transform: translateX(0);
   }


   /* login */
   .btn-animated-login {
       display: inline-flex;
       align-items: center;
       gap: 10px;
       padding: 10px 20px;
       /* background: linear-gradient(135deg, #5c6bc0, #7986cb); */
       color: #4285f4;
       /* border: none; */
       border: 2px solid #4285f4;
       /* border-radius: 50px; */
       border-radius: 30px;
       background-color: transparent;
       font-weight: bold;
       font-size: 16px;
       text-decoration: none;
       position: relative;
       overflow: hidden;
       cursor: pointer;
       /* animation: fadeInSlide 1s ease-out; */
       transition: all 0.4s ease-in-out;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   }

   .btn-animated-login .icon {
       transition: transform 0.4s ease-in-out;
   }

   .btn-animated-login:hover {
       background: linear-gradient(135deg, #7986cb, #5c6bc0);
       transform: translateY(-3px);
       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
       color: #fff;
   }

   .btn-animated-login:hover .icon {
       transform: rotate(360deg) scale(1.2);
   }

   /* 👇 Animation when button appears */
   @keyframes fadeInSlide {
       0% {
           opacity: 0;
           transform: translateY(20px);
       }

       100% {
           opacity: 1;
           transform: translateY(0);
       }
   }

   /* cart */
   .btn-modern-cart {
       /* display: inline-flex; */
       align-items: center;
       gap: 10px;
       padding: 12px 10px;
       background: transparent;
       color: #000;
       border: 2px solid #4285f4;
       border-radius: 50px;
       font-weight: bold;
       text-decoration: none;
       transition: all 0.3s ease-in-out;
   }

   .btn-modern-cart .cart-icon {
       width: 26px;
       height: 26px;
       transition: filter 0.3s ease;
   }

   .sing-in-icon {
       display: inline-block;
       width: 26px;
       height: 24px;
       margin-left: 0px;
       background-image: url('/assets/images/samples/sing-in-back.gif');
       background-size: contain;
       background-repeat: no-repeat;
       transition: background-image 0.3s ease-in-out;
   }

   .btn-animated-login:hover .sing-in-icon {
       background-image: url('/assets/images/samples/sing-in.gif');
       width: 27px;
       height: 27px;
   }

   .sing-out-icon {
       display: inline-block;
       width: 30px;
       height: 30px;
       margin-left: 0px;
       background-image: url('/assets/images/samples/sing-out.gif');
       background-size: contain;
       background-repeat: no-repeat;
       transition: background-image 0.3s ease-in-out;
   }

   .person-icon {
       display: inline-block;
       width: 30px;
       height: 30px;
       margin-left: 0px;
       background-image: url('/assets/images/samples/person.gif');
       background-size: contain;
       background-repeat: no-repeat;
       transition: background-image 0.3s ease-in-out;
   }

   .person-icon-header {
       display: inline-block;
       width: 18px;
       height: 18px;
       margin-left: 0px;
       background-image: url('/assets/images/samples/person.gif');
       background-size: contain;
       background-repeat: no-repeat;
       transition: background-image 0.3s ease-in-out;
   }

   .delivery-icon {
       display: inline-block;
       width: 30px;
       height: 30px;
       margin-left: 0px;
       background-image: url('/assets/images/samples/delivery.gif');
       background-size: contain;
       background-repeat: no-repeat;
       transition: background-image 0.3s ease-in-out;
   }

   .basket-icon {
       display: inline-block;
       width: 30px;
       height: 30px;
       margin-left: 0px;
       background-image: url('/assets/images/samples/basket.gif');
       background-size: contain;
       background-repeat: no-repeat;
       transition: background-image 0.3s ease-in-out;
   }

   .book-icon {
       display: inline-block;
       width: 30px;
       height: 30px;
       margin-left: 0px;
       background-image: url('/assets/images/samples/book.gif');
       background-size: contain;
       background-repeat: no-repeat;
       transition: background-image 0.3s ease-in-out;
   }

   .wired-cart-icon {
       display: inline-block;
       width: 30px;
       height: 30px;
       margin-left: 0px;
       background-image: url('/assets/images/samples/wired-cart.gif');
       background-size: contain;
       background-repeat: no-repeat;
       transition: background-image 0.3s ease-in-out;
   }

   /* Hover effect */
   .btn-modern-cart:hover {
       background: linear-gradient(135deg, #5c6bc0, #7986cb);
       color: #fff;
       border-color: transparent;
   }

   .btn-modern-cart:hover .cart-icon {
       filter: brightness(0) invert(1);
       /* ทำให้ไอคอนกลายเป็นสีขาว ถ้าเป็น PNG สีดำ */
   }


   /* .box-intarnin {
       border: 23px solid transparent !important; */
   /* border-image: url('/assets/images/intranin2.png') 80 round !important; */
   /* border-radius: 15px; */
   /* padding: 10px;
       background-color: #fff;
       transition: transform 0.3s, box-shadow 0.3s;
       overflow: hidden;
   } */

   .border-wrapper {
       position: relative;
       width: 100%;
       height: auto;
   }

   .border-overlay {
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%;
       object-fit: fill;
       z-index: 10;
       pointer-events: none;
       border-radius: 10px;
       transition: transform 0.3s ease;
   }

   .border-wrapper:hover .course-card {
       transform: scale(1.03);
       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
   }

   .border-wrapper:hover .border-overlay {
       transform: scale(1.03);
   }


   @media (orientation: landscape) and (max-width: 812px) {
       .border-overlay {
           transform: scale(0.95);
       }

       .course-card {
           padding: 12px;
       }
   }

   @media screen and (orientation: landscape) and (max-width: 992px) {
       .col-landscape-5 {
           flex: 0 0 41.666667%;
           max-width: 41.666667%;
       }
   }



   /* ปุุ่มกำลังจะเปิดรับสมัคร */
   .pulse-animation {
       animation: pulse 2s infinite;
       cursor: not-allowed;
       opacity: 0.9;
   }

   @keyframes pulse {
       0% {
           transform: scale(1);
           box-shadow: 0 0 0 rgba(255, 193, 7, 0.4);
       }

       50% {
           transform: scale(1.05);
           box-shadow: 0 0 10px rgba(255, 193, 7, 0.7);
       }

       100% {
           transform: scale(1);
           box-shadow: 0 0 0 rgba(255, 193, 7, 0.4);
       }
   }