/* ===== 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);

.table-border {
  border: black 1px solid;
}

.table-border-l {
  border-left: black 2px solid;
}

.table-border-t {
  border-top: black 2px solid;
}

.table-border-r {
  border-right: black 2px solid;
}

.table-border-b {
  border-bottom: black 2px solid;
}

.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;
}

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

.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);
  }
}

.line {
  border: 0.5px solid black;
  width: 167px;
  top: 52px;
  transform: rotate(31deg);
  left: -7px;
}

.break-text {
  white-space: normal;
  word-wrap: break-word;
}


@for $i from 1 through 100 {
  .m-#{$i}rem {
    margin: #{$i}rem;
  }

  .mt-#{$i}rem {
    margin-top: #{$i}rem;
  }

  .ml-#{$i}rem {
    margin-left: #{$i}rem;
  }

  .mb-#{$i}rem {
    margin-bottom: #{$i}rem;
  }

  .mr-#{$i}rem {
    margin-right: #{$i}rem;
  }

  .p-#{$i}rem {
    padding: #{$i}rem;
  }

  .pt-#{$i}rem {
    padding-top: #{$i}rem;
  }

  .pl-#{$i}rem {
    padding-left: #{$i}rem;
  }

  .pb-#{$i}rem {
    padding-bottom: #{$i}rem;
  }

  .pr-#{$i}rem {
    padding-right: #{$i}rem;
  }
}



.table-bg-b {
  background: rgb(96 165 250) !important;
  color: white;
  font-weight: 500;
  font-size: 17px;
}

.sub-table-bg-b {
  background-color: rgb(96, 165, 250, 0.1) !important;
}

.sub-table-bg-b-hover {
  background-color: rgba(96, 165, 250, 0.25) !important;
}


.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);
}