.title {
  font-size: 36px;
  color: white;
}

.highlight {
  position: relative;
  display: inline-block;
  color: #FF6500;
  font-size: 0;           /* แก้ช่องว่างตัวอักษร */
  letter-spacing: 0;
}

/* ตัวอักษร */
.letter {
  opacity: 0;
  display: inline-block;
  font-size: 36px;        /* คืนขนาด */
  animation: fadeIn 0.4s forwards;
}

/* delay ทีละตัว */
.letter:nth-child(1) { animation-delay: 0.2s; }
.letter:nth-child(2) { animation-delay: 0.4s; }
.letter:nth-child(3) { animation-delay: 0.6s; }

/* 🔥 เส้นล่าง (ของเดิม) */
.underline {
  position: absolute;
  left: 0;
  bottom: 6px;
  height: 2.6px;
  width: 100%;
  background: #FF6500;
  border-radius: 32px;
  transform: scaleX(0);
  transform-origin: left; /* ซ้าย -> ขวา */
  animation: underlineGrow 0.5s forwards;
  animation-delay: 0.9s;
}

/* 🔥✨ เส้นบน (ใหม่) */
.underline-top {
  position: absolute;
  left: 0;
  top: 14.5px;              /* ระยะห่างด้านบน */
  height: 2.6px;
  width: 100%;
  background: #FF6500;
  border-radius: 32px;
  transform: scaleX(0);
  transform-origin: right; /* ขวา -> ซ้าย */
  animation: underlineGrowReverse 0.5s forwards;
  animation-delay: 0.9s;
}

/* animation ตัวอักษร */
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* animation เส้นล่าง */
@keyframes underlineGrow {
  to {
    transform: scaleX(0.98);
  }
}

/* animation เส้นบน (สวนทาง) */
@keyframes underlineGrowReverse {
  to {
    transform: scaleX(0.98);
  }
}