/* Global Animation for Headings */

.animated-heading {
  visibility: visible !important;
  line-height: 0.75em;
  margin: 0;
  display: block;
}

.animated-heading.is-ready {
  visibility: visible !important;
}

/* Override: All headings load immediately without animation */
h1.animated-heading,
h2.animated-heading,
h3.animated-heading,
h4.animated-heading,
h5.animated-heading,
h6.animated-heading {
  visibility: visible !important;
}

h1.animated-heading .char,
h2.animated-heading .char,
h3.animated-heading .char,
h4.animated-heading .char,
h5.animated-heading .char,
h6.animated-heading .char {
  transform: translateY(0) !important;
  opacity: 1 !important;
  animation: none !important;
}

.animated-heading .word {
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
  line-height: 0.75em;
  /* đồng bộ với container */
}

.animated-heading .char-clip {
  display: inline-block;
  overflow: hidden;
  height: 0.85em;
  line-height: 0.84em;
  vertical-align: top;
  /* đã có, giữ lại */
}

.animated-heading .char {
  display: block;
  transform: translateY(0) !important;
  opacity: 1 !important;
  will-change: transform, opacity;
  letter-spacing: 0.01em;
  animation: none !important;
}



@keyframes riseUp {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* End Global Animation for Headings */


/* Animation for Copy */
.shift-line {
  display: block;
  overflow: hidden;
}

.shift-inner {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  will-change: transform, opacity;
}

.shift-up-text.is-inview .shift-inner {
  animation: shiftUp 0.85s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: calc(var(--line) * 0.15s);
  /* trễ hơn chút để chồng mượt */
}

@keyframes shiftUp {
  0% {
    transform: translateY(110%);
    opacity: 0;
  }

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

@media (prefers-reduced-motion: reduce) {
  .shift-inner {
    animation: none;
    transform: none;
    opacity: 1;
  }
}

.btn-invert-morph {
  position: relative;
  border: 2px solid transparent;
  isolation: isolate;
  overflow: hidden;
  z-index: 0;
  transition: color .25s ease, border-color .25s ease;
}

/* blob layer */
.btn-invert-morph::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #000;
  z-index: 1;
  pointer-events: none;
  transform: translateZ(0);
  clip-path: circle(var(--r, 0px) at var(--x, 50%) var(--y, 50%));
  transition: clip-path 450ms cubic-bezier(.22, .61, .36, 1);
}

/* label container */
.btn-invert-morph {
  --blob-dur: 400ms;
  /* khớp với ::before */
  --text-dur: 350ms;
  --text-delay: 100ms;
  /* chờ blob phủ rồi mới đổi chữ */
}

/* blob layer giữ nguyên nhưng dùng biến cho gọn */
.btn-invert-morph::before {
  transition: clip-path var(--blob-dur) cubic-bezier(.22, .61, .36, 1);
}

/* label container */
.btn-invert-morph .btn_c {
  position: relative;
  display: block;
  overflow: hidden;
  z-index: 2;
  /* trên blob */
}

/* text layers chỉ animate bằng transform */
.btn-invert-morph .btn_t1,
.btn-invert-morph .btn_t2 {
  display: block;
  will-change: transform;
  transition: transform var(--text-dur) cubic-bezier(.22, .61, .36, 1);
}

/* .btn_t2 KHÔNG dùng top để animate nữa */
.btn-invert-morph .btn_t2 {
  position: absolute;
  top: 0;
  /* cố định */
  left: 0;
  width: 100%;
  transform: translateY(100%);
  /* bắt đầu nằm dưới khung bằng transform */
}

/* Hover/focus: chỉ đổi transform + thêm delay để sync với blob */
.btn-invert-morph:hover .btn_t1,
.btn-invert-morph:focus-visible .btn_t1,
.btn-invert-morph:active .btn_t1 {
  transform: translateY(-100%);
  transition-delay: var(--text-delay);
}

.btn-invert-morph:hover .btn_t2,
.btn-invert-morph:focus-visible .btn_t2,
.btn-invert-morph:active .btn_t2 {
  transform: translateY(0);
  transition-delay: var(--text-delay);
}

/* Desktop hover states giữ như bạn đang có */
@media (hover: hover) and (pointer: fine) {

  /* Hover/active: giữ hiệu ứng invert như cũ */
  .btn-invert-morph:is(:hover, :active) {
    color: #fff;
    border-color: #fff;
  }

  .btn-invert-morph.bg-black::before {
    background: #fff;
  }

  .btn-invert-morph.bg-black:is(:hover, :active) {
    color: #000;
    border-color: #000;
  }
}

/* Focus bằng TAB: chỉ hiện outline, không đổi màu nút */
.btn-invert-morph:focus-visible {
  outline: 2px solid #000 !;
  outline-offset: 3px;
}


/* focus bằng Tab */
.btn-invert-morph.tag:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 3px #fff;
  /* viền đen phía ngoài */
}

.tab-item:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 3px #fff;
}

/* Mobile: đã tắt blob => bỏ delay cho cảm giác nhanh */
@media (hover: none),
(pointer: coarse) {

  .btn-invert-morph:hover .btn_t1,
  .btn-invert-morph:active .btn_t1,
  .btn-invert-morph:hover .btn_t2,
  .btn-invert-morph:active .btn_t2 {
    transition-delay: 0ms;
  }
}

@media (max-width: 768px) {
  .btn-invert-morph::before {
    display: none;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  .btn-invert-morph .btn_t1,
  .btn-invert-morph .btn_t2 {
    transition: none;
    transform: none;
  }

  .btn-invert-morph::before {
    transition: none;
  }
}

.btn-invert-morph.bg-green::before {
  background: #fff;
}

.btn-invert-morph.bg-green:is(:hover, :focus-visible, :active) {
  color: #000;
  border-color: #000;
}

/* End Animation for Button */



/* Start Accordion-Seciton what-we-do */
.accordion-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Khi scroll tới thì từng item sẽ hiện */
.accordion-item.show {
  opacity: 1;
  transform: translateY(0);
}


.accordion-item .accordion-title {
  position: relative;
  transition: padding-left 0.25s ease;
}

/* Mũi tên mặc định ẩn */
.accordion-item .accordion-title {
  position: relative;
  transition: transform 0.25s ease;
}

.accordion-item .accordion-title::before {
  content: none;
  /* bỏ pseudo-element mũi tên */
}

/* Hover: dịch chữ sang phải */
.accordion-item:hover .accordion-title {
  transform: translateX(15px);
}

@media (max-width: 768px) {
  .accordion-item:hover .accordion-title {
    transform: none !important;
  }
}

/* Active: giữ chữ đứng yên như ban đầu */
.accordion-item.active .accordion-title {
  transform: none;
}

/* End Accordion-Section what-we-do */



/* Reveal Lines (split into lines & animate) */

.reveal-lines {
  visibility: hidden;
}

.reveal-lines[data-rl-ready="1"] {
  visibility: visible;
}

.reveal-lines {
  width: 100%;
}

.rl-group li p {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* Line reveal */
.rl-line {
  display: block;
  overflow: hidden;
  will-change: transform, opacity;
}

.rl-inner {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
}

/* CHỈ chạy khi chính dòng đó có class .is-inview */
.rl-line.is-inview .rl-inner {
  animation: rlShiftUp var(--rl-duration, .9s) var(--rl-ease, cubic-bezier(.22, .9, .26, .99)) forwards;
  animation-delay: var(--rl-delay, 0s);
}

@keyframes rlShiftUp {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rl-inner {
    transform: none;
    opacity: 1;
    animation: none !important;
  }
}

.rl-line--break {
  height: calc(var(--rl-br, 1em));
}

/* Spacer không animate */
.rl-line--break {
  animation: none;
}

/* End Reveal Lines */


/* Animation Title Insight */
.insight-title {
  line-height: 1.0;
  position: relative;
  display: inline-block;
  overflow: visible;
  padding-bottom: .35em;
  opacity: 1;
  transform: translateY(0);
}

.insight-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  pointer-events: none;
}

.insight-title.is-inview {
  animation: none;
}

.insight-title.is-inview::after {
  opacity: 0;
  animation: none;
}

@keyframes titleRise {
  from {
    transform: translateY(30%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes underlineSweep {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }

  45% {
    transform-origin: left;
    transform: scaleX(1);
  }

  55% {
    transform-origin: right;
    transform: scaleX(1);
  }

  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}

/* End Animation Title Insight */

/* Scroll Bar Index */
#scrollable-text {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#scrollable-text::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}


/* End Scroll Bar Index */


/* Animation Global For Transiton */
/* ==== SPA mask reveal (không overlay) ==== */
.copy-gap {
  display: inline-block;
  width: 0;
  font-size: 0;
  /* không chiếm chỗ/không nhìn thấy */
  line-height: 0;
  overflow: hidden;
}

.rl-group a {
  color: #60A5FA;
  /* Màu này vẫn đang bị JS ép, hoặc bạn có thể xóa nốt dòng 'color' trong JS */
  /* text-decoration: none; Tắt gạch chân mặc định */
}

.rl-group a:hover {
  text-decoration: underline;
  /* Sẽ hoạt động! */
}

.rl-group p,
.rl-group h3,
.rl-group h1,
.rl-group h2,
.rl-group h4,
.rl-group h5,
.rl-group h6 {

  display: block !important;
}

/* Fix: Add spacing between paragraphs */
.rl-group p {
  margin-bottom: 0.5rem;
  margin-top: 0;
}

.rl-group p:last-child {
  margin-bottom: 0;
}

.rl-group ul,
.rl-group ol {
  display: block !important;
  list-style: none !important;
  /* 1. Tắt dấu chấm mặc định lỗi */
  padding-left: 0 !important;
  /* 2. Reset padding để tự căn chỉnh */
  margin-top: 1em;
  margin-bottom: 1em;
}

.rl-group li {
  display: block !important;
  /* 3. Chuyển thành block để animation mượt */
  position: relative;
  padding-left: 1.5em;
  /* 4. Tạo chỗ trống bên trái để vẽ dấu chấm */
  margin-bottom: 0.5em;
}

.rl-group ul li::before,
.rl-group ol li::before {
  content: "•";
  position: absolute;
  left: 0.5rem;
  line-height: 1;
  top: 0.15em;
  color: currentColor;
  font-weight: bold;
  font-size: 1.2em;
}




.rl-group h3 {
  font-size: 1.875rem;
  font-weight: 700;
}

.rl-group h2 {
  font-size: 2.25rem;
  font-weight: 700;
}

.rl-group h4 {
  font-size: 1.5rem;
  font-weight: 700;
}

.rl-group strong,
.rl-group b {
  font-weight: 700;
}

.rl-group p:empty {
  display: none;
  /* Ẩn thẻ <p> hoàn toàn trống */
}

.rl-group p:has(br) {
  min-height: 1em;
}

.rl-group,
.lg\:text-\[23px\] {

  /* 1. Ép các thẻ <p>, <h3> phải là 'block' */
  & p,
  & h3,
  & h2,
  & h4,
  & h5,
  & h6 {
    display: block !important;
  }

  /* 2. Ép style cho H3 (Chống lại Tailwind Reset) */
  & h3 {
    font-size: 1.875rem;
    /* ~text-3xl */
    font-weight: 700;
    /* ~font-bold */
    /* Tự động tạo khoảng cách */
    /* margin-top: 1.5em;  */
    margin-bottom: 0.5em;
  }

  /* 3. Ép style cho <p> */
  /* & p {
    margin-top: 1em;
  } */

  /* 4. Xóa margin của phần tử đầu tiên */
  &>*:first-child {
    margin-top: 0 !important;
  }

  /* 5. Ẩn các thẻ <br> / <p> rỗng vô dụng */
  /* & p:empty,
  & p:has(br:only-child) {
     display: none !important;
  } */
}