/* =========================================================
HERO SECTION
========================================================= */
.bg-orange-yellow{
    background: linear-gradient(
        135deg,
        #ffcc00,
        #ff9f1c
    );
  transition:.3s;
    color:#1a1a1a;
}
.bg-orange-yellow:hover{
  transform:translateY(-4px);

}

.btn-outline-light{
  transition:.3s;

}
.btn-outline-light:hover{
  transform:translateY(-4px);

}



.department-hero{

    position:relative;

    overflow:hidden;

    background-size:cover;
    /* ขยับภาพ */
    background-position:50% 70%;
    background-repeat:no-repeat;

  padding: 70px 0;
    display:flex;
    align-items:center;

}



.hero-overlay{

    position:absolute;

    inset:0;

    background:
      linear-gradient(
        135deg,
        rgba(5, 18, 43, 0.92),
        rgba(10,35,70,.88),
        rgba(1, 71, 152, 0.65)
      );

    z-index:1;
}



/* overlay glow */
.department-hero::before{

    content:'';

    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at top right,
    rgba(0,180,255,.20),
    transparent 35%),

    radial-gradient(circle at bottom left,
    rgba(0,255,170,.10),
    transparent 30%);

    z-index:1;

    pointer-events:none; /* เพิ่ม */
}


/* tech grid */
.department-hero::after{

    content:'';

    position:absolute;
    inset:0;

    background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);

    background-size:40px 40px;

    opacity:.3;

    z-index:1;

    pointer-events:none; /* เพิ่ม */
}


/* content */
.department-hero{
    position:relative;
    z-index:2;
}

.department-hero .container{
    position:relative;
    z-index:5;
}

/* floating icons */
.tech-icons{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:1;
}

.tech-icons i{

    position:absolute;

    color:rgba(255,255,255,.08);

    animation:floatIcon 6s ease-in-out infinite;
}


/* positions */
.tech-icons i:nth-child(1){
    top:8%;
    left:20%;
    font-size:4rem;
}

.tech-icons i:nth-child(2){
    top:10%;
    right:8%;
    font-size:5rem;
    animation-delay:1s;
}

.tech-icons i:nth-child(3){
    bottom:12%;
    left:15%;
    font-size:4rem;
    animation-delay:2s;
}

.tech-icons i:nth-child(4){
    bottom:0%;
    right:13%;
    font-size:3.5rem;
    animation-delay:3s;
}

.tech-icons i:nth-child(5){
    top:42%;
    right:35%;
    font-size:5rem;
    animation-delay:4s;
}


/* floating animation */
@keyframes floatIcon{

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

    50%{
        transform:translateY(-15px);
    }

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


/* hero image */
.hero-img-1{

    max-width:50%;

    filter:
    drop-shadow(0 20px 40px rgba(0,0,0,.35));

    /* animation:floatImage 4s ease-in-out infinite; */
}


@keyframes floatImage{

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

    50%{
        transform:translateY(-12px);
    }

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


      /* =========================================================
TEACHER SECTION
========================================================= */

.teacher-section{

    background:#ffffff;

    position:relative;

    overflow:hidden;
}


/* heading */
.teacher-section h2{

    font-weight:700;

    color:#0f172a;
}


.teacher-section p{

    color:#64748b;
}


/* =========================================================
TEACHER CARD
========================================================= */

.teacher-card{

    background:#ffffff;

    border-radius:20px;

    overflow:visible;

    transition:.3s ease;

    height:100%;

    border:1px solid #e5e7eb;
}


.teacher-img-wrapper{
    overflow:hidden;
    border-radius:20px 20px 0 0;
}


.teacher-card:hover{
    transform: translateY(-5px) scale(1.02);
    border-color: transparent;
}


.carousel-inner{
    padding-top:10px;
}

/* =========================================================
IMAGE
========================================================= */

.teacher-img-wrapper{

    overflow:hidden;

    position:relative;
}


.teacher-img{

    width:100%;

    height:270px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    object-fit:cover;

    transition:.4s ease;
}


/* zoom เบาๆ */
.teacher-card:hover .teacher-img{

    transform:scale(1.05);
}


/* =========================================================
BODY
========================================================= */

.teacher-body{

    padding:20px;

    text-align:center;
}


.teacher-body h5{

    font-weight:700;

    margin-bottom:5px;

    color:#0f172a;

    font-size:1.05rem;
}
.teacher-body h6{

    font-weight:700;

    margin-bottom:5px;

    color:#0f172a;

    font-size:0.98rem;
}

.teacher-body p{

    color:#6b7280;

    margin-bottom:12px;

    font-size:.95rem;
}


/* badge */
.teacher-badge{

    display:inline-block;

    background:#f1f5f9;

    color:#0f172a;

    padding:7px 14px;

    border-radius:50px;

    font-size:.85rem;

    font-weight:500;
}


/* =========================================================
CAROUSEL BUTTON
========================================================= */

.carousel-control-prev-1,
.carousel-control-next-1{

    position:absolute;
    top:50%;

    transform:translateY(-50%);

    width:40px;
    height:40px;

    border:none;

    border-radius:14px;

    backdrop-filter: blur(10px);

    background: rgba(255,255,255,.22);

    opacity:1;

    z-index:10;

    box-shadow:
      0 4px 12px rgba(0,0,0,.10),
      inset 0 0 0 1px rgba(255,255,255,.25);

    transition:.3s ease;
}


/* ดันออก */
.carousel-control-prev-1{
    left:-17px;
}

.carousel-control-next-1{
    right:-17px;
}


/* icon */
.carousel-control-prev-icon-1,
.carousel-control-next-icon-1{

    display:block;

    width:18px;
    height:18px;

    margin:auto;

    background-size:100% 100%;
    background-repeat:no-repeat;
}


/* LEFT ICON */
.carousel-control-prev-icon-1{

    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23003399' viewBox='0 0 16 16'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}


/* RIGHT ICON */
.carousel-control-next-icon-1{

    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23003399' viewBox='0 0 16 16'%3e%3cpath d='M4.646 1.646a.5.5 0 0 0 0 .708L10.293 8l-5.647 5.646a.5.5 0 0 0 .708.708l6-6a.5.5 0 0 0 0-.708l-6-6a.5.5 0 0 0-.708 0z'/%3e%3c/svg%3e");
}


/* hover */
.carousel-control-prev-1:hover,
.carousel-control-next-1:hover{

    background: rgba(253, 217, 13, 0.85);

    transform:
      translateY(-50%)
      scale(1.05);

    box-shadow:
      0 8px 18px rgba(48, 48, 48, 0.28);
}


/* =========================================================
MOBILE
========================================================= */

@media(max-width:768px){

    .teacher-img{

    height:400px;

    }

    .teacher-body{

        padding:16px;
    }

}


/* ===================================
GLASS BUTTON
=================================== */
.glass-btn{
    position: relative;
    overflow: hidden;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;

    padding:5px 10px;

    border-radius:15px;

    font-size:0.8rem;
    font-weight:700;

    color:#1e293b !important;
    text-decoration:none;

    white-space:nowrap;

    background:rgba(236, 236, 236, 0.3);

    border:1px solid rgba(255,255,255,.35);

    backdrop-filter:blur(18px) saturate(180%);
    -webkit-backdrop-filter:blur(18px) saturate(180%);

    box-shadow:
      0 4px 12px rgba(0,0,0,.08),
      inset 0 1px 1px rgba(255,255,255,.18);

    transition:all .3s ease;
}

/* เอฟเฟกต์กระจก */
.glass-btn::before{
    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:80%;
    height:100%;

    background:linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,.45),
      transparent
    );

    transform:skewX(-20deg);

    transition:.7s;
}

/* hover */
.glass-btn:hover{
    transform:translateY(-4px) scale(1.02);

    color:#1204db !important;

    box-shadow:
      0 5px 15px rgba(0,0,0,.18),
      inset 0 1px 1px rgba(255,255,255,.3);
}

.glass-btn:hover::before{
    left:140%;
}



/* ===================================
MOBILE
=================================== */
@media(max-width:768px){

    .glass-btn{
        font-size:.8rem;
        padding:5px 8px;
        border-radius:12px;
    }

}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/

.hero-teacher {
  position: relative;
  display: flex;
  align-items: center;

  padding: 20px 0 0;

  width: 100%;
  overflow: hidden;
}

/* background pattern */
.hero-teacher::after {
  content: "";
  position: absolute;
  inset: 0;

  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(38, 2, 167, 0.02) 0px,
      rgba(19, 2, 172, 0.05) 2px,
      transparent 4px,
      transparent 8px
    );

  z-index: 1;
}

/* container */
.hero-teacher .container,
.hero-teacher .container-fluid {
  position: relative;
  z-index: 2;
}

/* =========================
CONTENT
========================= */

.hero-teacher .content-col {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding-right: 3rem;
}

/* Tablet + Mobile */
@media (max-width: 991px) {

  .hero-teacher .content-col {
    padding-right: 15px;
    padding-left: 15px;
    margin-bottom: 3rem;
  }

}

/* =========================
TEXT
========================= */

.hero-teacher .agency-name {
  margin-bottom: 1.5rem;
}

.hero-teacher .agency-name h5 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 1px;

  color: #080808;
  margin: 0;
}

.hero-teacher .main-heading {
  margin-bottom: 2rem;
}

.hero-teacher .main-heading h1 {
  font-size: 5rem;
  font-weight: 800;

  line-height: 1.2;
  letter-spacing: -1px;
  margin: 0;
}

@media (max-width: 1200px) {

  .hero-teacher .main-heading h1 {
    font-size: 4rem;
  }

}

@media (max-width: 767px) {

  .hero-teacher .main-heading h1 {
    font-size: 3rem;
  }

}

@media (max-width: 480px) {

  .hero-teacher .main-heading h1 {
    font-size: 2.5rem;
  }

}

/* divider */

.hero-teacher .divider {
  width: 100%;
  height: 2px;

  background-color:
    color-mix(
      in srgb,
      var(--default-color),
      transparent 85%
    );

  margin-bottom: 2rem;
}

@media (max-width: 767px) {

  .hero-teacher .divider {
    width: 100%;
  }

}

/* description */

.hero-teacher .description {
  margin-bottom: 2.5rem;
}

.hero-teacher .description p {
  font-size: 1rem;
  line-height: 1.7;

  color:
    color-mix(
      in srgb,
      rgba(53, 52, 52, 0.8),
      transparent 20%
    );

  margin: 0;
}

/* =========================
BUTTON
========================= */

.hero-teacher .cta-button .btn {
  display: inline-flex;
  align-items: center;

  background-color: transparent;

  border: 1px solid #fcaf21;
  color: #faaf23;

  padding: 0.75rem 1.5rem;

  border-radius: 50px;

  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1px;

  transition: all 0.3s ease;
}

.hero-teacher .cta-button .btn span {
  margin-right: 0.5rem;
}

.hero-teacher .cta-button .btn i {
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.hero-teacher .cta-button .btn:hover {
  background-color: #fcaf21;
  border-color: #fcaf21;
  color: #ffffff;
}

.hero-teacher .cta-button .btn:hover i {
  transform: translateX(5px);
}

/* =========================
VISUAL
========================= */

.hero-teacher .visual-content {
  position: relative;

  width: 100%;
  height: 100%;

  display: flex;

  align-items: flex-end;
  justify-content: center;
}

@media (max-width: 991px) {

  .hero-teacher .visual-content {
    flex-direction: column;
  }

}

/* image wrapper */

.hero-teacher .fluid-shape {
  position: relative;

  width: 100%;
  margin: 0 auto;

  bottom: -20px;
}

/* image */


.hero-teacher .fluid-img {
  width: 110%;
  height: auto;

  animation: teacherFloat 6s ease-in-out infinite;
}

/* floating animation */

@keyframes teacherFloat {

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

  50% {
    transform: translateY(-15px);
  }

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

}

/* =========================
CARD
========================= */



.hero-teacher .stats-card{

  position: absolute;

  bottom: 70px;
  left: 70%;

  transform: translateX(-50%);

  width: 280px;

  padding: 1rem;

  border-radius: 25px;

  display: flex;
  flex-direction: column;

  background-color:
    color-mix(
      in srgb,
      #f7ca03,
      transparent 50%
    );

  backdrop-filter: blur(5px);

  border: 0.5px solid
    color-mix(
      in srgb,
      rgba(10, 10, 10, 0.8),
      transparent 50%
    );

  box-shadow:
    0 10px 15px rgba(19, 19, 19, 0.1);
}

/* =========================
MOBILE
========================= */



@media (max-width: 991px) {

  .hero-teacher .stats-card {

    position: relative;

    left: 38%;
    bottom: 10px;

    transform: translateX(-50%);

    width: 90%;
    max-width: 320px;

    margin-top: -12rem;

    border-radius: 20px;
  }

}

/* =========================
TEXT CARD
========================= */



.hero-teacher .stats-card .stats-number h2 {
  font-size: 2.0rem;
  font-weight: 500;

  color: #070707;

  margin: 0;
  line-height: 1;
}

.hero-teacher .stats-card .stats-number h3 {
  font-size: 1.7rem;
  font-weight: 500;

  color: #070707;

  margin: 0;
  line-height: 1;
}

.hero-teacher .stats-card .stats-number h4 {
  font-size: 0.9rem;

  margin-top: 0.8rem;

  color: #333333;
}

.hero-teacher .stats-card .stats-label {
  margin-top: 0.5rem;
}

.hero-teacher .stats-card .stats-label p {
  font-size: 1rem;

  color: #272727;

  text-align: right;
  margin: 0;
}

/* =========================
ARROW
========================= */

.hero-teacher .stats-card .stats-arrow {
  position: absolute;

  top: 1.5rem;
  right: 1.5rem;
}

.hero-teacher .stats-card .stats-arrow a {

  display: flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  background-color: #fcaf21;

  border-radius: 50%;

  color: #ffffff;
  font-size: 1rem;

  transition: all 0.3s ease;
}

.hero-teacher .stats-card .stats-arrow a:hover {
  transform: translateY(-3px);

  background-color:
    color-mix(
      in srgb,
      #fcaf21,
      transparent 20%
    );
}


      .carousel-item{
  transition: all .8s ease-in-out;
}

.carousel-item .teacher-card{
  transform: scale(.95);
  opacity: .5;
}

.carousel-item.active .teacher-card{
  transform: scale(1);
  opacity: 1;
}

.teacher-rank{

    position:absolute;

    top:15px;
    right:0;

    z-index:10;



    color:#080808;

    font-size:.7rem;

    font-weight:400;

    padding:4px 12px;

    border-radius:20px 0 0 20px;

    box-shadow:
        -1.6px 2px 1px rgba(0,0,0,.15);
}

.teacher-rank-head{

    position:absolute;

    bottom:23px;
    left: 0;

    z-index:10;

    color:#080808;

    font-size:.7rem;

    font-weight:400;

    padding:4px 12px;

    border-radius:0 20px 20px 0;

    box-shadow:
        -1.6px 2px 1px rgba(0,0,0,.15);
}

/* ค.ศ.1 */
.rank-1{
    background:#1e88fa;
}

/* ค.ศ.2 */
.rank-2{
    background:#20c997;
}

/* ค.ศ.3 */
.rank-3{
        background:#ffc107;

}

/* ค.ศ.4 */
.rank-4{
    background:#fc6906;
}


.featuress > *{
  position: relative;
  top: -70px;
  z-index: 10;
}

.feature-item-dp{
    position: relative;
    overflow: hidden;   /* เพิ่มบรรทัดนี้ */

    background: linear-gradient(
        180deg,
    #ffffff 0%,
    #def1fe 130% 

    );

    flex-basis: 33.33%;
    margin: 0 10px;
    padding: 40px 30px;

    border-radius: 15px;
    box-shadow: 0 0 30px rgba(0,42,106,.1);
}

.feature-item-dp::before{
    content:"";
    position:absolute;

    right:-10px;
    bottom:-15px;

    width:220px;
    height:220px;

    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;

    opacity:.25;

    pointer-events:none;
    z-index:0;
}

.feature-item-dp > *{
    position:relative;
    z-index:1;
}

.feature-item-dp .feature-icon {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  border: 2px solid color-mix(in srgb, rgb(65, 2, 182), transparent 60%);
  transition: all 0.3s ease-in-out;
  /* จัดให้วงกลมอยู่กลาง */
  margin: 0 auto 20px;  
}

.feature-item-dp .feature-icon i {
  font-size: 32px;
  color: rgb(65, 2, 182);
  transition: transform 0.3s ease-in-out;

}

.feature-item-dp h4 {
  color: #223a66;
}
.feature-item-dp p {
  font-size: 14px;
}


/* เมื่อ hover ที่กล่อง feature-item ให้ icon เด้ง */
.feature-item-dp:hover .feature-icon {
  animation: jello-vertical 1s both;
}

.feature-item-dp:nth-child(1)::before{
    background-image: url('../image/luksood5.png');
}

.feature-item-dp:nth-child(2)::before{
    background-image: url('../image/teach4.png');
}

.feature-item-dp:nth-child(3)::before{
    background-image: url('../image/fb4.png');
}