.select-wrapper {
    position: relative;
}

.select-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 35px;
}

.select-wrapper::after {
    content: "\f078"; /* fa-chevron-down */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}

.cs-switch-wrap{
    display:flex;
    align-items:center;
    min-height:42px;
}

.cs-switch-input{
    width: 3.2rem !important;
    height: 1.7rem !important;
    cursor: pointer;
    background-color: #4b5563 !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    box-shadow: none !important;
    transition: all .25s ease;
}

.cs-switch-input:focus{
    box-shadow: 0 0 0 0.18rem rgba(16,185,129,.18) !important;
    border-color: rgba(16,185,129,.45) !important;
}

.cs-switch-input:checked{
    background-color: #10b981 !important;
    border-color: #10b981 !important;
}

.cs-switch-label{
    margin-left: .65rem;
    cursor: pointer;
    user-select: none;
    letter-spacing: .1px;
}

.cs-role-wrap{
    gap: 8px;
}

.cs-role-btn{
    border: 1px solid #4b5563;
    background: transparent;
    color: #d1d5db;
    font-size: 12px;
    transition: all .2s ease;
}

/* hover */
.cs-role-btn:hover{
    border-color: #10b981;
    color: #10b981;
    background: rgba(16,185,129,0.08);
}

/* checked */
.btn-check:checked + .cs-role-btn{
    background: linear-gradient(135deg,#10b981,#06b6d4);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 8px rgba(16,185,129,.4);
}

.cs-keyword-input::placeholder{
    color: #9ca3af;
    opacity: 1;
}

.cs-vdo-input::placeholder{
    color:#9ca3af;
    opacity:1;
}

.cs-vdo-help{
    padding-bottom: 10px;
    line-height: 1.4;
}

.cs-outline-help{
    opacity: 0.75;
}


.cs-course-box{
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255,255,255,.02);
}

.cs-course-box-title{
    background: linear-gradient(90deg, #004aad, #0b67d0);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    padding: 12px 14px;
}

.cs-course-box-body{
    padding: 18px;
}

.cs-course-square-preview{
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 18px;
    border: 2px dashed rgba(255,255,255,.15);
    background: rgba(255,255,255,.03);
    display: block;
    margin: 0 auto;
}

.cs-role-wrap{
    gap: 8px;
}

.cs-role-btn{
    border: 1px solid #4b5563;
    background: transparent;
    color: #d1d5db;
    font-size: 12px;
    transition: all .2s ease;
}

.cs-role-btn:hover{
    border-color: #10b981;
    color: #10b981;
    background: rgba(16,185,129,0.08);
}

.btn-check:checked + .cs-role-btn{
    background: linear-gradient(135deg,#10b981,#06b6d4);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 8px rgba(16,185,129,.4);
}

.cs-objective-row{
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    padding: 8px 10px;
}

.cs-objective-no{
    min-width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    color: #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.cs-reason-card{
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: 14px;
    height: 100%;
}

.cs-reason-title{
    color: #60a5fa;
    font-weight: 700;
    font-size: 15px;
}

.cs-reason-col .note-editor{
    border-radius: 12px !important;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
}

.cs-reason-col .note-toolbar{
    background: #f3f4f6;
}

.cs-reason-col .note-editing-area{
    background: #fff;
}

.cs-reason-col .note-editable{
    min-height: 220px;
}

.cs-detail-card{
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: 16px;
    height: 100%;
}

.cs-detail-title{
    color: #60a5fa;
    font-weight: 700;
    font-size: 15px;
}

.cs-detail-icon-list{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cs-detail-icon-item{
    display: inline-flex;
}

.cs-detail-icon-label{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #6b7280;
    color: #d1d5db;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
    background: transparent;
    font-size: 13px;
}

.cs-detail-icon-label:hover{
    border-color: #10b981;
    color: #10b981;
    background: rgba(16,185,129,.08);
}

.btn-check:checked + .cs-detail-icon-label{
    background: linear-gradient(135deg,#10b981,#06b6d4);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 8px rgba(16,185,129,.35);
}

.cs-detail-col .note-editor{
    border-radius: 12px !important;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
}

.cs-detail-col .note-toolbar{
    background: #f3f4f6;
}

.cs-detail-col .note-editing-area{
    background: #fff;
}

.cs-detail-col .note-editable{
    min-height: 170px;
}

.card {
  overflow: visible;
  width: 190px;
  height: 190px;
  border-radius: 20px;
}

.content {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 300ms;
  box-shadow: 0px 0px 5px 0.3px #000000ee;
  border-radius: 20px;
}

.front, .back {
  background-color: #151515;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 20px;
  overflow: hidden;
}

.back {
  width: 100%;
  height: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.back::before {
  position: absolute;
  content: ' ';
  display: block;
  width: 160px;
  height: 160%;
  background: linear-gradient(90deg, transparent, #f2ffa7, #bea7ff, #bea7ff, #bea7ff, transparent);
  animation: rotation_481 5000ms infinite linear;
}

.back-content {
  position: absolute;
  width: 99%;
  height: 99%;
  border-style: solid; /* ต้องกำหนดรูปแบบเส้นด้วยถึงจะแสดงผล */
  border-width: 2px;   /* ความหนา */
  border-color: #43249b; /* สีที่คุณต้องการ */

  background-color: #fff;
  border-radius: 20px;
  color: #43249b ;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.card:hover .content {
  transform: rotateY(180deg);
}

@keyframes rotation_481 {
  0% {
    transform: rotateZ(0deg);
  }

  0% {
    transform: rotateZ(360deg);
  }
}

.front {
  transform: rotateY(180deg);
  color: #fff;
}

.front .front-content {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.front-content .badge {
  background-color: #00000055;
  padding: 2px 10px;
  border-radius: 20px;
  backdrop-filter: blur(2px);
  width: fit-content;
}

.description {
  box-shadow: 0px 0px 10px 5px #00000088;
  width: 100%;
  padding: 10px;
  background-color: #00000099;
  backdrop-filter: blur(5px);
  border-radius: 20px;
}

.title {
  font-size: 11px;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
}

.title p {
  width: 50%;
}

.card-footer {
  color: #ffffff88;
  margin-top: 5px;
  font-size: 15px;
}

.front .img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #cf7ff6 ;
  position: relative;
  filter: blur(15px);
  animation: floating 2600ms infinite linear;
}

#bottom {
  background-color: #662180 ;
  left: 50px;
  top: 0px;
  width: 150px;
  height: 150px;
  animation-delay: -800ms;
}

#right {
  background-color: #43249b ;
  left: 160px;
  top: -80px;
  width: 30px;
  height: 30px;
  animation-delay: -1800ms;
}

@keyframes floating {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0px);
  }
}

/* card หมวดหลักสูตร */

        .course-list-hero{
            background: linear-gradient(135deg, #4b22b5 0%, #351890 100%);
            color:#fff;
            border-bottom-left-radius: 46px;
            border-bottom-right-radius: 46px;
            padding: 80px 0 100px;
        }
        .course-list-card{
            background:#fff;
            border:1px solid #eceaf6;
            border-radius:24px;
            padding:22px;
            box-shadow:0 12px 30px rgba(67,36,155,.06);
            transition:.3s ease;
            height:100%;
        }
        .course-list-card:hover{
            transform:translateY(-6px);
            box-shadow:0 18px 40px rgba(67,36,155,.12);
        }
        .course-list-title{
            color:#43249b;
            font-weight:700;
            font-size:1.08rem;
            line-height:1.45;
            margin-bottom:8px;
        }
        .course-list-subtitle{
            color:#6f6f85;
            font-size:.93rem;
            margin-bottom:14px;
            min-height:44px;
        }
        .course-list-meta{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-bottom:18px;
        }
        .course-list-pill{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:8px 12px;
            border-radius:999px;
            background:#f3efff;
            color:#43249b;
            font-size:.85rem;
            font-weight:600;
        }
        .course-list-btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            padding:10px 16px;
            border-radius:14px;
            background:#43249b;
            color:#fff;
            text-decoration:none;
            font-weight:600;
            transition:.25s ease;
        }
        .course-list-btn:hover{
            background:#30197c;
            color:#fff;
        }
        .back-btn-inline{
            display:inline-flex;
            align-items:center;
            gap:8px;
            text-decoration:none;
            color:#43249b;
            font-weight:600;
            margin-bottom:20px;
        }

        
/* ---------------------------------- */

/* card course-list */
.card-list {
  width: 300px;
  height: 401px;
  border-radius: 20px;
  margin: 0 auto;
  background: #1b233d;
  padding: 5px;
  overflow: hidden;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 20px 0px;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-list:hover {
  transform: scale(1.05);
}

.card-list  .top-section {
  /* height: 182.5px; */
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(45deg, #662180  0%, #cf7ff6  100%);
  position: relative;
  
}

.card-list  .top-section .border-1 {
  border-bottom-right-radius: 10px;
  height: 30px;
  width: 130px;
  background: white;
  background: #1b233d;
  position: relative;
  transform: skew(-40deg);
  box-shadow: -10px -10px 0 0 #1b233d;
}

.card-list  .top-section .border-1::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  top: 0;
  right: -15px;
  background: rgba(255, 255, 255, 0);
  border-top-left-radius: 10px;
  box-shadow: -5px -5px 0 2px #1b233d;
}

.card-list  .top-section::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  background: rgba(255, 255, 255, 0);
  height: 15px;
  width: 15px;
  border-top-left-radius: 15px;
  box-shadow: -5px -5px 0 2px #1b233d;
}

.card-list  .top-section .icons {
  position: absolute;
  top: 0;
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
}

.card-list  .top-section .icons .logo {
  height: 100%;
  aspect-ratio: 1;
  padding: 7px 0 7px 15px;
}

.card-list  .top-section .icons .logo .top-section {
  height: 100%;
}

.card-list  .top-section .icons .social-media {
  height: 100%;
  padding: 8px 15px;
  display: flex;
  gap: 7px;
}

.card-list  .top-section .icons .social-media .svg {
  height: 100%;
  fill: #1b233d;
}

.card-list  .top-section .icons .social-media .svg:hover {
  fill: white;
}

.card-list  .bottom-section {
  margin-top: 15px;
  padding: 10px 5px;
}

.card-list  .bottom-section .title {
  display: block;
  font-size: 17px;
  font-weight: bolder;
  color: white;
  text-align: center;
  letter-spacing: 2px;
  transition: transform 0.3s ease-in-out, color 0.3s ease;
  backface-visibility: hidden;
}

.card-list  .bottom-section .title1 {
  display: block;
  font-size: 17px;
  font-weight: bolder;
  color: white;
  text-align: center;
  letter-spacing: 2px;
  transition: transform 0.3s ease-in-out, color 0.3s ease;
  backface-visibility: hidden;
}

.card-list  .bottom-section .title1:hover {
  display: block;
  font-size: 17px;
  font-weight: bolder;
  color: #ffde59;
  text-align: center;
  letter-spacing: 2px;
 transform: scale(1.1);
}

.card-list  .bottom-section .row {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.card-list  .bottom-section .row .item {
  flex: 30%;
  text-align: center;
  padding: 5px;
  color: rgba(170, 222, 243, 0.721);
}

.card-list  .bottom-section .row .item .big-text {
  font-size: 12px;
  display: block;
}

.card-list  .bottom-section .row .item .regular-text {
  font-size: 9px;
}

.card-list  .bottom-section .row .item:nth-child(2) {
  border-left: 1px solid rgba(255, 255, 255, 0.126);
  border-right: 1px solid rgba(255, 255, 255, 0.126);
}

.course-list-btn-wrap {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

.course-list-quote-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  border-radius: 14px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #cf7ff6 0%, #662180 100%);
  box-shadow: 0 5px 15px #351890 ;
  transition: all 0.28s ease;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.course-list-quote-btn i {
  font-size: 14px;
}

.course-list-quote-btn:hover {
  transform: translateY(-2px);
  color: #ffffff;
  box-shadow: 0 14px 28px #351890 ;
  background: linear-gradient(135deg, #cf7ff6 0%,  #662180 100%);
}

.course-list-quote-btn:active {
  transform: translateY(0);
}

/* .course-detail-img-link {
    display: block;
    width: 100%;
    height: 100%;
} */

.course-detail-img-link img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}

.course-detail-title-link {
    text-decoration: none;
}
/* ---------------------------------- */

/* course-detail */
.course-detail-body {
    background: #f3f6fb;
}

/* HERO */
.course-detail-hero {
    position: relative;
    overflow: hidden;
    padding: 90px 0 110px;
    background:
        radial-gradient(circle at top left, rgba(0,74,173,0.08), transparent 28%),
        linear-gradient(180deg, #eef3fb 0%, #f8fbff 100%);
}

.course-detail-hero-card {
    background: #ffffff;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(13, 43, 91, 0.10);
    border: 1px solid #e7eef8;
}

.course-detail-hero-top {
    background: #4b22b5 ;
    color: #fff;
    padding: 32px 42px 28px;
}

.course-detail-hero-title {
    font-size: clamp(1.8rem, 3vw, 3.2rem);
    font-weight: 700;
    line-height: 1.28;
}

.course-detail-hero-body {
    padding: 38px 42px 42px;
}

/* LEFT */
.course-detail-left {
    text-align: center;
}

.course-detail-circle-wrap {
    position: relative;
    max-width: 460px;
    margin: auto;
}

.course-detail-circle-img {
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 14px 35px rgba(0, 74, 173, 0.12);
}

.course-detail-circle-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-detail-badge {
    position: absolute;
    left: 0;
    bottom: 40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #4b22b5 ;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 700;
}

/* AUDIENCE */
.course-detail-audience {
    margin-top: 20px;
}

.course-detail-audience-title {
    font-size: 22px;
    font-weight: 700;
    color: #004aad;
    margin-bottom: 10px;
}

.course-detail-audience-list {
    list-style: none;
    padding: 0;
}

.course-detail-audience-list li {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}

/* RIGHT */
.course-detail-en {
    font-size: 28px;
    color: #004aad;
    font-weight: 700;
    margin-bottom: 15px;
}

.course-detail-title {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #123b8f;
}

.course-detail-text {
    font-size: 18px;
    line-height: 1.8;
    color: #1f2b3d;
}

/* BUTTON */
.course-detail-btn-wrap {
    margin-top: 25px;
    text-align: center;
}

.course-detail-btn-main {
    display: inline-block;
    padding: 16px 30px;
    background: #004ad8;
    color: #ffde59;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
}

.course-detail-btn-outline {
    display: inline-block;
    margin-top: 10px;
    padding: 12px 25px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #ddd;
    color: #004aad;
    text-decoration: none;
}


	 /* กำหนด class สำหรับหัวข้อ */
  .hero-title {
    color: #25397b;
    font-weight: bold;
    /* ค่าเริ่มต้น (mobile) จะใช้คำนวณตาม viewport width */
    font-size: calc(1.3rem + 2.7vw);
  }

  /* Tablet (iPad) ขนาดหน้าจอ 768px ขึ้นไป */
  @media (min-width: 768px) and (max-width: 1199px) {
    .hero-title {
      font-size: 2.2rem;
    }
  }

  /* Desktop ขนาดหน้าจอ 1200px ขึ้นไป ให้ลดขนาดลง */
  @media (min-width: 1200px) {
    .hero-title {
      font-size: 2.5rem;
    }
  }    
	  
    .hero-section {
      background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url('<?php echo base_url();?>ads/banner/bg-1.jpg') center/cover no-repeat;
      color: #004aad;
      padding: 100px 0;
      min-height: 50vh;
      display: flex;
      align-items: center;
    }
	 .course_outline {
      background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url('<?php echo base_url();?>ads/banner/bg-2.jpg') center/cover no-repeat;
      color: #004aad;
      padding: 100px 0;
      min-height: 50vh;
      display: flex;
      align-items: center;
    } 
	.course_outline_2 {
      background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url('<?php echo base_url();?>ads/banner/bg-3.jpg') center/cover no-repeat;
      color: #004aad;
     
      min-height: 50vh;
      display: flex;
      align-items: center;
    }   
	 
	 .section-70-20-10  {
      background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url('<?php echo base_url();?>lp/imgs/banner/bg-ld-70-20-10.jpg') center/cover no-repeat;
      color: white;
      padding: 100px 0;
      min-height: 50vh;
      display: flex;
      align-items: center;
    } 
	  .section-cta-help  {
      background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url('<?php echo base_url();?>lp/imgs/banner/bg-learning-and-development-team-formation-contact.jpg') center/cover no-repeat;
      color: white;
      padding: 100px 0;
      min-height: 23vh;
      display: flex;
      align-items: center;
    } 
	 
	.blended-footer  {
      background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url('<?php echo base_url();?>lp/imgs/banner/section-content-lsm.jpg') center/cover no-repeat;
      color: white;
      padding: 100px 0;
      min-height: 50vh;
      display: flex;
      align-items: center;
    }  
	/* สำหรับหน้าจอขนาดเล็ก (mobile) */
	@media (max-width: 993px) {
	  .section-history {
		
	  }
	}    
	  
    body {
      font-family: 'Prompt', Helvetica, Arial, sans-serif;
 	 }
    .bg-primary-gradient {
      background: linear-gradient(45deg, #9333ea, #f97316);
      color: white;
    }
    .section-padding {
      padding: 60px 0;
    }
    .progress-bar {
      background-color: #9333ea;
    }
    .rounded-4 {
      border-radius: 1rem !important;
    }
    html {
      scroll-behavior: smooth;
    }
	.lead{
		  font-size: 25px;
	}
	.shadow {
    	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
	}
	 .form-label {
		  font-size: 18px;
		  font-weight: bold;
	  }  
	  .form-control{
		  line-height: 1.5;
	  }
		  
/* ใส่หลังจากโหลด Bootstrap หรือ CSS หลัก */
.shiny-text {
  position: relative;
  display: inline-block;    /* รองรับการซ้อน pseudo-element */
 
  font-weight: bold;
  font-size: calc(1.3rem + 2.7vw);
  overflow: hidden;         /* ตัดส่วนที่ล้นออก */
  
  /* default – มือถือ */
  padding: 12px 24px;
}

/* Tablet (iPad) ขึ้นต้นที่ 768px */
@media (min-width: 768px) {
  .shiny-text {
    padding: 16px 48px;
  }
}

/* Desktop ขึ้นต้นที่ 1200px */
@media (min-width: 1200px) {
  .shiny-text {
    padding: 20px 60px;
  }
}

  .shiny-text::before {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 50%;
    height: 100%;
    background: rgba(255,255,255,0.8);
    transform: skewX(-20deg);
    filter: blur(2px);
    /* เปลี่ยนจาก 5s เป็น 10s */
    animation: shine 7s ease-in-out infinite;
  }

  @keyframes shine {
    0%   { left: -75%; }
    30%  { left: 125%; }  /* เคลื่อนช่วงแรก 30% ของเวลา */
    100% { left: 125%; }  /* จากนั้นหยุดค้างจนจบ */
  }  
	  .zoom-half {
		display: inline-block;         /* ทำให้ transform ทำงานเต็มที่ */
		transition: transform 0.2s ease-in-out;
		-webkit-transition: -webkit-transform 0.2s ease-in-out;
	  }

	  /* ซูมตอนเมาส์กดค้างหรือแตะบนมือถือ */
	  .zoom-half:active,
	  .zoom-half:focus {
		transform: scale(1.1);
		-webkit-transform: scale(1.1);
	  }

	  /* ถ้าอยากให้เห็นตอนเอาเมาส์ชี้ */
	  .zoom-half:hover {
		transform: scale(1.05);
		-webkit-transform: scale(1.05);
	  }
	  
	  /* จัดให้ embed-responsive ทำงานแบบ 100% width และตำแหน่ง relative */
	.embed-responsive {
	  position: relative;
	  display: block;
	  width: 100%;
	  overflow: hidden;
	}

	/* กำหนดอัตราส่วน 16:9 */
	.embed-responsive::before {
	  display: block;
	  content: "";
	}

	.embed-responsive-16by9::before {
	  padding-top: 56.25%; /* 9/16 = 0.5625 = 56.25% */
	}

	/* ให้ iframe ขยายเต็มพื้นที่ parent */
	.embed-responsive .embed-responsive-item {
	  position: absolute;
	  top: 0;
	  left: 0;
	  bottom: 0;
	  right: 0;
	  width: 100%;
	  height: 100%;
	  border: 0;
	}
	  .accordion-button {
      background-color: #ffde59;
      color: #004aad;
      font-size: 20px;     /* เพิ่มขนาดฟอนต์ */
      font-weight: bold;   /* ตั้งตัวหนา */
    }
    .accordion-button:not(.collapsed) {
      background-color: #ffde59;
      color: #004aad;
      font-size: 20px;
      font-weight: bold;
    }
    .accordion-button:focus {
      box-shadow: none;
    }
    .accordion-button::after {
      filter: invert(30%);
    }
	  
	  @media (min-width: 992px) {
    .col-lg-15 {
      width: 16%;
      flex: 0 0 16%;
      max-width: 16%;
    }
	.col-lg-625 {
      width: 5%;
      flex: 0 0 5%;
      max-width: 5%;
    }	  
		  
		  
  }
	.result-tb {
      border-collapse: collapse;
      width: 100%;
    }

    .result-tb th {
	  border: 1px solid #999;
	  text-align: center;
	  padding: 8px;
	}

	.result-tb td {
	  border: 1px solid #999;
	  text-align: left;
	  padding: 8px;
	}

    .result-tb th {
      background-color: #004aad;
      color: white;
    }

    .result-tb td[colspan] {
      text-align: left;
    }

    .result-tb .subtext {
      font-size: 12px;
      color: #555;
    }

    .result-tb .timeline-header {
      background-color: #aac4e9;
    }  
	  
	  
 
		html, body { overflow-x: hidden; }
		

div.principle_txt p {
 	/*text-indent: 2em;*/
	margin: 0 0 12px;
	line-height: 1.8;
	font-size: 18px !important;
	color: #000 !important;	
	font-family: sarabun!important;
}
		
div.bar p {
	line-height: 1.8;
	font-size: 18px !important;
	color: #fff !important;	
	font-family: sarabun!important;
}
		
div.bar p i {
	color: #fff !important;	
}		

.course-detail-hero-body ul {
	font-family: sarabun!important;	
	color: #000 !important;	
	font-size: 18px !important;
}		
		
/* แถบพื้นหลังชื่อหลักสูตรให้ “พาดไปหลังวงกลม” และสูงเท่าหัวข้อจริง */
.title-bar {
  position: relative;
  background: #004aad;
  padding: 14px 18px;
  display: inline-block;
  border-radius: 0;
  z-index: 1;
  color: #fff;
  overflow: visible;
}

/* พื้นหลังพาดจากขอบวงกลม → สุดขวาจอ โดยไม่เลื่อน viewport */
.title-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100vw; /* ✅ กว้างเท่าจอจริง */
  background: #4b22b5 ;
  z-index: -1;
  transform: translateX(-400px); /* ✅ ขยับให้เริ่มตรงขอบวงกลม */
}
/* ===============================
   Responsive Offsets
=============================== */

/*  Desktop ≥1400px */
@media (min-width: 1400px) {
  .title-bar::before {
    transform: translateX(-400px);
  }
}
		
/*  1200–1399px */
@media (min-width: 1600px) and (max-width: 1860px) {
  .title-bar::before {
    transform: translateX(-340px);
  }
}	

/*  1200–1399px */
@media (min-width: 1300px) and (max-width: 1599px) {
  .title-bar::before {
    transform: translateX(-220px);
  }
}			
		
/* Medium (Tablet Landscape) 992–1199px */
@media (min-width: 992px) and (max-width: 1300.98px) {
  .title-bar::before {
    transform: translateX(-200px);
  }
}

/* Small (Tablet Portrait) 768–991px */
@media (min-width: 768px) and (max-width: 991.98px) {
  .title-bar::before {
    transform: translateX(-220px);
  }
}

/* Extra Small (Mobile) ≤767px */
@media (max-width: 767.98px) {
  .title-bar::before {
    transform: translateX(-16px); /* ชดเชย padding ของ container */
  }
}
		
.btn-gradient-blue {
  display: inline-block;
  color: #ffde59;
  font-size: 25px;
  letter-spacing: .5;
  background: linear-gradient(to bottom, #cf7ff6 0%, #662180 100%);
  border: 0px;
  box-shadow: inset 2px 0 4px rgba(255,255,255,0.2), 
              inset -2px 0 4px rgba(0,0,0,0.2),
              0 4px 6px rgba(0,0,0,0.1);
  transition: all 0.2s ease-in-out;
  text-decoration: none;
	
}

/* Hover Effect */
.btn-gradient-blue:hover {
  color: #fff;
  background: linear-gradient(to bottom, #cf7ff6  0%, #662180  100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 10px rgba(0,0,0,0.15);
}	
		
.btn-download-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 700;
  color: #4b22b5;
  background-color: #ffffff;
  border: 0px solid #4b22b5;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* วงกลมไอคอน */
.btn-download-outline .icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background-color: #4b22b5;
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
}

/* Hover effect */
.btn-download-outline:hover {
  background-color: #4b22b5;
  color: #fff;
  border-color: #4b22b5;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.btn-download-outline:hover .icon-circle {
  background-color: #ffffff;
  color: #4b22b5;
}	
		
	/* ---------- course_outline theme ---------- */

.text-primary-900{ color:#0b2b6b; } /* น้ำเงินเข้มอ่านง่าย */

.course_outline .feature-list li{
  display:flex; gap:10px; align-items:flex-start;
  margin-bottom: .6rem; color:#000;
}
.course_outline .feature-list i{
  color:#00bf63; min-width:22px; text-align:center; margin-top:.2rem;
}

/* Big sample circle (landscape style) */
.sample-circle{
  width:min(420px, 80vw);
  aspect-ratio:1/1;
  border-radius:50%;
  position:relative;
  background:#e6f2ff;
  box-shadow:0 10px 18px rgba(0,0,0,.08), inset 0 0 0 8px #fff;
  overflow:hidden;
}
.sample-circle .sky{
  position:absolute; inset:0 0 50% 0;
  background:linear-gradient(180deg,#cfe8ff 0%,#aeddff 100%);
}
.sample-circle .hills{
  position:absolute; left:-10%; right:-10%; bottom:-5%; height:45%;
  background:
    radial-gradient(120% 70% at 50% 0%, #7bc043 0%, #5aa52f 60%, #4a8f23 100%);
  border-top-left-radius:50% 100%;
  border-top-right-radius:50% 100%;
}
.sample-circle .cloud-1, .sample-circle .cloud-2{
  position:absolute; background:#fff; border-radius:50%; filter:drop-shadow(0 2px 4px rgba(0,0,0,.05));
}
.sample-circle .cloud-1{ width:120px; height:120px; left:22%; top:12%; }
.sample-circle .cloud-2{ width:70px; height:70px; left:58%; top:18%; }
.sample-circle .label{
  position:absolute; inset:auto 0 18% 0; color:#e11; font-size:1.15rem;
}

/* 4 KPI bubbles */
.kpi-circle{
  background:#fff; border-radius:50%;
  aspect-ratio:1/1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; padding:1.2rem;
  border:1px solid #eef2ff;
}
.kpi-circle .check{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#e9f9f0; color:#00a85a; font-weight:700;
}
.kpi-circle .kpi-title{
  font-weight:700; color:#0b2b6b; line-height:1.35; font-size:0.98rem;
}
.kpi-circle .mini-cta{
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.2px;
  color:#fff; background:#ff5656; padding:.35rem .65rem; border-radius:999px;
  text-decoration:none;
}

/* responsive tweaks */
@media (max-width: 991.98px){
  .sample-circle{ margin-top:.5rem; }
}
@media (max-width: 575.98px){
  .kpi-circle{ aspect-ratio:auto; border-radius:20px; }
}

		
.course_outline_2 {
  background: linear-gradient(180deg, #eef4ff 0%, #f8fbff 100%);
}

.course_outline_2 h2 {
  color: #003399;
}

/* กล่องแต่ละบล็อก */
.detail-box {
  background: linear-gradient(90deg, #0066ff 0%, #004aad 100%);
  border-radius: 8px;
  padding: 20px 25px;
  color: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
}

/* ช่องไอคอนด้านซ้าย */
.detail-box .icon-box {
  background: #ffffff;
  color: #004aad;
  width: 70px;
  height: 70px;
  border-radius: 8px 0 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}

/* รายการ bullet */
.detail-box ul {
  list-style: none;
  padding-left: 0;
}

.detail-box ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 6px;
}

.detail-box ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #ffde59;
  font-weight: bold;
}

/* responsive */
@media (max-width: 767.98px) {
  .detail-box {
    padding: 18px 18px;
  }
  .detail-box .icon-box {
    width: 60px;
    height: 60px;
    font-size: 24px;
    margin-bottom: 12px;
  }
}	

:root {
  --blue-700: #0c4db3;
  --blue-800: #004aad;
  --blue-900: #003a8b;
}

/* ====== พื้นหลัง Section ====== */
.course_outline_2 {
  background: linear-gradient(180deg, #eef4ff 0%, #f8fbff 100%);
}

/* ====== Block รวม ====== */
.detail-slab {
  position: relative;
  margin: 30px auto;     /* จัดกึ่งกลางแนวนอน */
  max-width: 1000px;     /* ✅ จำกัดความกว้างสูงสุด */
  width: 100%;
  padding: 0 16px;       /* เผื่อระยะขอบจอเล็ก */
  box-sizing: border-box;
}

/* ====== หกเหลี่ยม ====== */
.hex-icon {
  position: absolute;
  left: -60px; /* ✅ ซ้อนเข้าบน bar */
  top: 50%;
transform: translateY(-50%);
  z-index: 3;
  width: 120px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hex {
  clip-path: polygon(25% 4%, 75% 4%, 96% 50%, 75% 96%, 25% 96%, 4% 50%);
}

.hex-outer {
  position: relative;
  width: 100%;
  height: 100%;
  background: #4b22b5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hex-outer::after {
  content: "";
  position: absolute;
  inset: 10%;
  background: repeating-linear-gradient(90deg, #e7eefc 0 6px, transparent 6px 10px);
  clip-path: inherit;
  z-index: 0;
}

.hex-inner {
  position: relative;
  width: 80%;
  height: 80%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.hex-inner i {
  color: #cf7ff6;
  font-size: 44px;
}

/* ====== แถบฟ้าเข้มปลายแหลม ====== */
.bar {
  background: linear-gradient(90deg, #cf7ff6 0%,  #662180 100%);
  color: #fff;
  padding: 22px 28px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  border-radius: 45px;      /* ✅ เอาสี่เหลี่ยม (ไม่โค้ง) */
  overflow: hidden;
}

/* ====== ข้อความภายใน ====== */
.bar-title {
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.3;
}

.bar-list {
  list-style: disc;
  margin: 0;
  padding-left: 20px;
}

.bar-list li::marker {
  color: #fff;
}

/* ====== Responsive: ลด padding/ตัวอักษรบนจอเล็ก ====== */
@media (max-width: 768px) {
  .detail-slab { padding: 0 12px; }
  .bar { padding: 18px 20px; }
}

@media (max-width: 480px) {
  .detail-slab { padding: 0 10px; }
  .bar { padding: 16px; }
}
	
		.circle-position {
			transform: translateY(-33%) !important;
		}
	/*section p img {
  max-width: 100%;
  height: auto;
  display: block;
}*/

section p .img-fluid {
  max-width: 100%;
  height: auto;
  display: block;
}
		
.topics-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px; /* ระยะห่างระหว่างหัวข้อ */
}

/* จัดระยะระหว่างบล็อก */
.topic-item { margin-bottom: 20px; }

/* เฉพาะโหมด 2 คอลัมน์ */
.topics-two-col {
  display: flex;
  gap: 70px;
  align-items: flex-start;
}
.topics-two-col .topics-col {
  flex: 1 1 0;
}

/* มือถือ/จอแคบ: ซ้อนเป็นคอลัมน์เดียว */
@media (max-width: 768px) {
  .topics-two-col { flex-direction: column; }
}