body.courses-view {
  margin: 0;
  background: #f4f6fc;
  font-family: 'Outfit', 'Sarabun', sans-serif;
}

body.courses-view .main-content {
  all: unset;
}

:root {
  --courses-ui-scale: 0.8;
}

.shop-page {
  margin-top: 80px;
  min-height: 1381px;
  padding: 52px 0 48px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 18%, #f6f8ff 100%);
}

.shop-shell {
  width: min(1720px, calc(100vw - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 408px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

@media (min-width: 1361px) {
  .shop-shell {
    zoom: var(--courses-ui-scale);
    width: min(2140px, calc((100vw - 64px) / var(--courses-ui-scale)));
  }
}

.shop-widgets {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.widget-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.widget-heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.widget-heading h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  color: #052143;
  font-weight: 500;
}

.heading-line {
  width: 60px;
  border-top: 2px solid #008dd0;
}

.widget-body {
  display: flex;
  flex-direction: column;
  gap: 19px;
}

.widget-body p {
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.3;
  color: #6b778b;
}

.widget-search-form {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 50px;
  border: 1px solid #d1e3fb;
  border-radius: 100px;
  background: #ffffff;
  padding: 6px 6px 6px 22px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  overflow: hidden;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.search-input {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  outline: none;
  background: transparent;
  color: #8b93a5;
  font-size: 16px;
  font-family: inherit;
}

.search-submit {
  width: 98px;
  min-width: 98px;
  height: 38px;
  border: 0;
  border-radius: 100px;
  background: #6277ef;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  flex: 0 0 98px;
  white-space: nowrap;
}

.search-submit-icon {
  width: 12px;
  height: 12px;
  background: #ffffff;
  -webkit-mask: no-repeat center/100% 100% url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M505 442.7L405.3 343a208 208 0 1 0-62.3 62.3L442.7 505a44 44 0 1 0 62.3-62.3zM208 336a128 128 0 1 1 0-256 128 128 0 1 1 0 256z'/></svg>");
  mask: no-repeat center/100% 100% url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M505 442.7L405.3 343a208 208 0 1 0-62.3 62.3L442.7 505a44 44 0 1 0 62.3-62.3zM208 336a128 128 0 1 1 0-256 128 128 0 1 1 0 256z'/></svg>");
}

.check-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.check-list button {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #6b778b;
  font-size: 16px;
  line-height: 1.3;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.check {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 2px solid #687eff;
  border-radius: 6px;
  position: relative;
  box-sizing: border-box;
}

.check.checked {
  background: #687eff;
}

.check.checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(45deg);
}

.shop-content {
  min-width: 0;
}

.shop-filter-topbar {
  box-sizing: border-box;
  width: 100%;
  min-height: 68px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #d1e3fb;
  border-radius: 16px;
  background: #ffffff;
}

.showing-text {
  margin: 0;
  color: #6b778b;
  font-size: 14px;
  line-height: 1.3;
}

.view-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.view-btn {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 100px;
  background: transparent;
  color: #687eff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.view-btn.is-active {
  background: #687eff;
  color: #ffffff;
}

.icon-grid,
.icon-list {
  width: 12px;
  height: 12px;
  background: currentColor;
}

.icon-grid {
  -webkit-mask: no-repeat center/100% 100% url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 3h8v8H3V3m10 0h8v8h-8V3M3 13h8v8H3v-8m10 0h8v8h-8v-8z'/></svg>");
  mask: no-repeat center/100% 100% url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 3h8v8H3V3m10 0h8v8h-8V3M3 13h8v8H3v-8m10 0h8v8h-8v-8z'/></svg>");
}

.icon-list {
  -webkit-mask: no-repeat center/100% 100% url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M0 96c0-17.7 14.3-32 32-32h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zm160 0c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32s-14.3 32-32 32H192c-17.7 0-32-14.3-32-32zm-160 160c0-17.7 14.3-32 32-32h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zm160 0c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32s-14.3 32-32 32H192c-17.7 0-32-14.3-32-32zm-160 160c0-17.7 14.3-32 32-32h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zm160 0c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32s-14.3 32-32 32H192c-17.7 0-32-14.3-32-32z'/></svg>");
  mask: no-repeat center/100% 100% url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M0 96c0-17.7 14.3-32 32-32h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zm160 0c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32s-14.3 32-32 32H192c-17.7 0-32-14.3-32-32zm-160 160c0-17.7 14.3-32 32-32h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zm160 0c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32s-14.3 32-32 32H192c-17.7 0-32-14.3-32-32zm-160 160c0-17.7 14.3-32 32-32h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zm160 0c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32s-14.3 32-32 32H192c-17.7 0-32-14.3-32-32z'/></svg>");
}

.sort-by {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #052143;
  font-size: 14px;
  white-space: nowrap;
}

.sort-by select {
  border: 0;
  outline: none;
  background: transparent;
  color: #6b778b;
  font-size: 14px;
  font-family: inherit;
}

.status-tabs {
  display: none;
}

.course-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(408px, 408px));
  gap: 24px 24px;
  justify-content: start;
}

.course-card {
  box-sizing: border-box;
  width: 408px;
  height: 501px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  isolation: isolate;
  background: #ffffff;
  border: 1px solid #d1e3fb;
  border-radius: 20px;
  flex: none;
  order: 1;
  flex-grow: 0;
}

.course-thumbnail {
  width: 100%;
  height: 230px;
  border-radius: 16px;
  overflow: hidden;
  background: #d9d9d9;
}

.course-thumbnail img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.course-category-tag {
  display: none;
}

.course-body {
  margin-top: 16px;
  width: 100%;
  max-width: none;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  gap: 0;
  flex: 1;
}

.course-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0 8px;
  min-height: 55px;
  box-sizing: border-box;
  width: 100%;
}

.course-enroll-state {
  color: #8e8e93;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
}

.course-enroll-state.available {
  color: #687eff;
}

.course-rating {
  color: #6b778b;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
  margin-left: auto;
  justify-content: flex-end;
  text-align: right;
}

.course-rating span:nth-child(2) {
  color: #052143;
  font-weight: 400;
}

.course-rating-star {
  width: 15.75px;
  height: 14px;
  background: #ffc224;
  -webkit-mask: no-repeat center/100% 100% url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m12 17.27-6.18 3.73 1.64-7.03L2 9.24l7.19-.61L12 2l2.81 6.63 7.19.61-5.46 4.73L18.18 21z'/></svg>");
  mask: no-repeat center/100% 100% url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m12 17.27-6.18 3.73 1.64-7.03L2 9.24l7.19-.61L12 2l2.81 6.63 7.19.61-5.46 4.73L18.18 21z'/></svg>");
}

.course-title-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.course-title {
  margin: 0;
  color: #052143;
  font-size: 22px;
  line-height: 1.5;
  font-weight: 500;
  min-height: 66px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.course-menu-dot {
  margin-top: 8px;
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 50%;
  background: #052143;
  opacity: 0.7;
  box-shadow: 0 9px 0 #052143, 0 18px 0 #052143;
  flex: 0 0 6px;
}

.course-action-row {
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  min-height: 72px;
  box-sizing: border-box;
}

.course-start {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  width: 122px;
  height: 36px;
  flex: 0 0 auto;
}

.course-start-text {
  width: 96px;
  height: 36px;
  margin-right: -10px;
  border: 1px solid #f87a53;
  border-radius: 100px;
  color: #f87a53;
  background: #ffffff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.course-start-text.filled {
  border-color: #008dd0;
  background: #008dd0;
  color: #ffffff;
}

.course-start-text::after {
  content: "";
  position: absolute;
  width: 121px;
  height: 31px;
  left: 50%;
  top: 50%;
  background: #ffffff;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(35deg);
}

.course-start-text.filled::after {
  opacity: 0.1;
}

.course-start-icon {
  width: 36px;
  height: 36px;
  border-radius: 100px;
  border: 1px solid #f87a53;
  background: #ffffff;
  position: relative;
}

.course-start.is-available .course-start-icon {
  border-color: #ffffff;
  background: #008dd0;
}

.course-start-icon::before {
  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #f87a53;
  -webkit-mask: no-repeat center/100% 100% url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path d='M96 96l128 160L96 416' fill='none' stroke='black' stroke-width='48' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  mask: no-repeat center/100% 100% url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path d='M96 96l128 160L96 416' fill='none' stroke='black' stroke-width='48' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.course-start.is-available .course-start-icon::before {
  background: #ffffff;
}

.course-instructor-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-left: auto;
}

.course-instructor-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #687eff;
  object-fit: cover;
}

.course-instructor-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.course-instructor-name {
  color: #052143;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-instructor-exp {
  color: #6b778b;
  font-size: 12px;
  line-height: 1.4;
}

.course-meta {
  margin-top: auto;
  border-top: 1px dashed #d1e3fb;
  padding: 20px 0 0 16px;
  width: 100%;
  box-sizing: border-box;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  color: #6b778b;
  font-size: 14px;
  line-height: 18px;
  flex: none;
  flex-grow: 0;
  flex-shrink: 0;
}

.course-meta span {
  position: relative;
  padding-left: 24px;
  white-space: nowrap;
}

.course-meta span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 17px;
  background: #687eff;
  border-radius: 0;
  -webkit-mask: no-repeat center/100% 100% url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a3 3 0 0 1 3 3v2H2V7a3 3 0 0 1 3-3h1V3a1 1 0 0 1 1-1Zm15 9v8a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-8h20Zm-6.293 2.293a1 1 0 0 0-1.414 0L11 16.586l-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0 0-1.414Z'/></svg>");
  mask: no-repeat center/100% 100% url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a3 3 0 0 1 3 3v2H2V7a3 3 0 0 1 3-3h1V3a1 1 0 0 1 1-1Zm15 9v8a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-8h20Zm-6.293 2.293a1 1 0 0 0-1.414 0L11 16.586l-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0 0-1.414Z'/></svg>");
}

.course-meta span:nth-child(1)::before {
  background: #ff3ea5;
}

.course-meta span:nth-child(2)::before {
  background: #ffc224;
  -webkit-mask: no-repeat center/100% 100% url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2.8 1.82L12 19.5l5.2 2.32A2 2 0 0 0 20 20V4a2 2 0 0 0-2-2H6Zm2 4h8a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2Zm0 4h8a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2Z'/></svg>");
  mask: no-repeat center/100% 100% url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2.8 1.82L12 19.5l5.2 2.32A2 2 0 0 0 20 20V4a2 2 0 0 0-2-2H6Zm2 4h8a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2Zm0 4h8a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2Z'/></svg>");
}

.course-meta span:nth-child(3)::before {
  background: #687eff;
  -webkit-mask: no-repeat center/100% 100% url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1a11 11 0 1 0 11 11A11 11 0 0 0 12 1Zm0 2a9 9 0 1 1-9 9 9 9 0 0 1 9-9Zm-1 4a1 1 0 0 1 2 0v4.586l2.707 2.707a1 1 0 1 1-1.414 1.414l-3-3A1 1 0 0 1 11 12Z'/></svg>");
  mask: no-repeat center/100% 100% url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1a11 11 0 1 0 11 11A11 11 0 0 0 12 1Zm0 2a9 9 0 1 1-9 9 9 9 0 0 1 9-9Zm-1 4a1 1 0 0 1 2 0v4.586l2.707 2.707a1 1 0 1 1-1.414 1.414l-3-3A1 1 0 0 1 11 12Z'/></svg>");
}

.course-loading,
.empty-state,
.error-state {
  grid-column: 1 / -1;
  border: 1px dashed #d1e3fb;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  color: #6b778b;
}

.field-footer {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.pagination {
  display: inline-flex;
  gap: 12px;
  align-items: center;
}

.page-btn {
  width: 40px;
  height: 40px;
  border: 1px solid #d1e3fb;
  border-radius: 100px;
  background: #ffffff;
  color: #6b778b;
  font-size: 16px;
  cursor: pointer;
}

.page-btn.is-current {
  border-color: #687eff;
  background: #687eff;
  color: #ffffff;
}

.page-btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.more-course-btn {
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  padding: 0;
}

.more-course-text {
  width: 142px;
  height: 47px;
  margin-right: -8px;
  border-radius: 100px;
  background: #f87a53;
  color: #ffffff;
  font-size: 18px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.more-course-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #f87a53;
  position: relative;
}

.more-course-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background: #ffffff;
  -webkit-mask: no-repeat center/100% 100% url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'><path d='M246.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-128 128c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L178.7 256 73.4 150.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l128 128z'/></svg>");
  mask: no-repeat center/100% 100% url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'><path d='M246.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-128 128c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L178.7 256 73.4 150.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l128 128z'/></svg>");
}

.course-count {
  margin: 8px 0 0;
  color: #6b778b;
  font-size: 14px;
  text-align: right;
}

body.courses-view footer {
  margin-top: 40px;
}

@media (max-width: 1600px) {
  .shop-shell {
    width: calc(100vw - 32px);
    grid-template-columns: 408px minmax(0, 1fr);
    gap: 24px;
  }

  .field-footer {
    justify-content: space-between;
  }
}

@media (max-width: 1360px) {
  .shop-shell {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 18px;
  }

  .course-grid {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  }

  .course-card {
    width: 100%;
  }
}

@media (max-width: 1200px) {
  .shop-shell {
    grid-template-columns: 1fr;
  }

  .widget-heading h3 {
    font-size: 20px;
  }

  .shop-filter-topbar {
    flex-wrap: wrap;
  }

  .course-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

@media (max-width: 900px) {
  .shop-page {
    padding: 30px 0 36px;
  }

  .shop-shell {
    width: calc(100vw - 20px);
    gap: 18px;
  }

  .course-grid {
    grid-template-columns: 1fr;
  }

  .course-card {
    width: 100%;
  }

  .course-title {
    font-size: 20px;
  }

  .course-action-row,
  .course-meta {
    flex-wrap: wrap;
  }

  .field-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}