/* ===== base variables ===== */
$size-card : 150px; // ( ≥1280px จะขยายเป็น 170 )
$col-hero : 280px; // ความกว้างคอลัมน์ซ้าย
$gap-main : 2.5rem;
$radius-main : 28px;
$radius-sub : 20px;
$dur : .35s;
$easing : cubic-bezier(.4, 0, .2, 1);
$shadow-base : 0 14px 30px -12px rgba(0, 0, 0, .18);
$shadow-deep : 0 20px 42px -16px rgba(0, 0, 0, .24);

// div {
//   border: black 1px solid;
//   min-height: 20px;
// }

.link-btn {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-full px-10 py-2 transition;

  transition: transform $dur $easing,
    box-shadow $dur $easing;

  &:hover {
    transform: translateY(-6px);
    box-shadow: $shadow-deep;
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.col {
  flex: 1;
}

@for $i from 1 through 12 {
  $width: (
    $i / 12) * 100%;

  .col-#{$i} {
    flex: 0 0 $width;
    max-width: $width;
  }
}

.col-start {
  display: flex;
  justify-content: start;
}

.col-center {
  display: flex;
  justify-content: center;
}

.row-top {
  display: flex;
  align-items: start;
  align-content: start;
}

.row-center {
  display: flex;
  align-items: center;
  align-content: center;
}

.row-space-between {
  display: flex;
  align-items: space-between;
  align-content: space-between;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}


.text-blue {
  color: #3b82f6;
}

.text-title {
  font-weight: 500;
  font-size: 3.5rem;
  line-height: 2.25rem;
  pointer-events: none;
  word-break: break-word;
}

.text-card-title {
  font-weight: 800;
  font-size: 3.5rem;
  line-height: 2.25rem;
  pointer-events: none;
  word-break: break-word;
}

.text-sub-title {
  font-weight: 300;
  font-size: 1rem;
  line-height: 2.25rem;
  pointer-events: none;
  word-break: break-word;
}

.text-menu {
  font-weight: 500;
  font-size: 1rem;
  transition: color .25s;
}


.box-menu {
  padding: 1rem;

}

.sub-box-menu {
  border-radius: 15px;
  transition: transform $dur $easing,
    box-shadow $dur $easing;
  // box-shadow: $shadow-deep;

  //   &:hover {
  //     transform: translateY(-6px
  //     );
  //   box-shadow: $shadow-deep;
  // }
}



.menu-box {
  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2
  );
border: 1px solid transparent;
border-radius: 30px;
background-image: linear-gradient(white, white),
  linear-gradient(135deg, #4f46e5, #ec4899 60%, #f59e0b);
background-origin: border-box;
background-clip: content-box,
  border-box;
transition: transform $dur $easing,
  box-shadow $dur $easing;

// &:hover {
//   transform: translateY(-6px);
//   box-shadow: $shadow-deep;
// }

// &:hover::before {
//   content: '';
//   position: absolute;
//   inset: -3px;
//   border-radius: inherit;
//   // background: linear-gradient(135deg, #4f46e5, #ec4899 60%, #f59e0b);
//   filter: blur(34px);
//   opacity: .17;
//   z-index: -1;
//   transition: opacity $dur;
//   opacity: .27;
//   border: 1px solid;
// }

.sub-box {
  padding: 15px;
}

}

.color-box {
  transition: filter 0.2s ease;

  &:hover {
    filter: brightness(0.9);
  }
}

.back-button {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 30px solid rgb(37 99 235);
  cursor: pointer;
  display: inline-block;
  transition: transform 0.2s;
}

.back-button:hover {
  border-right: 30px solid rgb(29 78 216);
}