@charset "UTF-8";

:root,
[data-color-theme="light"] {
  --primary-temp: #0060d2;
  --primary-temp-rgb: 176, 232, 100;
  --filter-leftmenu-icon-form-333-to-temp: invert(0%) sepia(20%) saturate(2878%) hue-rotate(317deg) brightness(155%) contrast(110%);
  --filter-icon-form-888-to-temp: invert(10%) sepia(69%) saturate(7450%) hue-rotate(7deg) brightness(75%) contrast(125%);
  --link-color: var(--primary-temp);
  --link-hover-color: var(--primary-temp);
  --nav-color: #888888;
  --nav-font-size: 1.125rem;
  --navbar-padding-y: 0.229rem;
  --nav-link-hover-bg: #fafbfc !important;
  --dropdown-link-hover-bg: #fafbfc !important;
  --gray-200: #fafbfc;
  --gray-400: #ececec;
  --gray-600: #888888;
  --spacer: 15px;
  --spacer-sm: 0.229rem;
  --spacer-15p: 0.938rem;
  --font-sans-serif: sukhumvittadmai-text;
  --font-sans-serif-semibold: sukhumvittadmai-semibold;
  --font-monospace: TrueTextOnline-Regular;
  --font-monospace-bold: TrueTextOnline-Bold;
  --font-monospace-extrabold: TrueTextOnline-ExtraBold;
  --font-monospace-black: TrueTextOnline-Black;
  --font-bettertogether: BetterTogether-Light;
  --font-bettertogether-regular: BetterTogether-Regular;
  --font-bettertogether-medium: BetterTogether-Medium;
  --font-bettertogether-bold: BetterTogether-Bold;
  /* --font-true-regular: TrueTextOnline-regular; */
  --body-font-family: var(--font-bettertogether);
  --body-font-size: 1.125rem;
  --body-color: #333333;
  --body-color-gray: #888888;
  --body-color-rgb: 51, 51, 51;
  --body-secondary-color-bg: #f1f2f3;
  --body-third-color-bg: #fafbfc;
  --gray-333: #333333;
  --gray-ccc: #cccccc;
  --gray-f5: #f5f5f5;
  --gray-888: #888888;
  --primary-rgb: 250, 251, 252;
  --border-color: #e4e4e4;
  --border-color-333: #333333;
  --page-header-gray: #f1f2f3;
  --body-bg: #ffffff;
  --form-label-gray: #888888;
  --focus-ring-box-shadow: 0 0 0 0.125rem rgba(12, 131, 255, 0);
  --icon-gray: var(--gray-ccc);
  --btn-font-size: 16px;
  --btn-profile-font-size: 1.125rem;
  --btn-hover-color: var(--primary-temp);
  --component-active-bg: var(--primary-temp);
  --txt-profile-font-size: 1.25rem;
  --modal-title-color: #000000;
  --modal-header-padding: var(--spacer-1) var(--spacer);
  --modal-color: #333333;
  --modal-font-size: 1.25rem;
  --modal-font-family: var(--font-bettertogether);
  --success: #93c47d;
  --border-radius: 0.625rem;
  --border-color-translucent: rgba(236, 236, 236, 1);
  --nav-link-font-size: 1rem;
  --box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
  --dropdown-link-active-bg: #ffffff;
  --input-disabled-color: #888888;
  --success-rgb: 147, 196, 125;
  --warning-rgb: 242, 201, 76;
  --danger-rgb: 204, 0, 0;
  --component-active-bg: var(--primary-temp);
  --page-padding-x: 15px;
  --page-header-padding-x: var(--page-padding-x);
  --accordion-btn-padding-x: 15px;
  /* --body-line-height-computed: calc(1875rem / 1000); */
  --modal-bg-gray: #494949;
  --topbar-h: 70px;
  --bottomnav-h: 50px;
  --hero-1: #0060d2;
  --hero-2: #4c53e8;
  --hero-3: #5f50ee;
  --nav-blue: #0060d2;
  --nav-h: 50px;
  --safe-bottom: env(safe-area-inset-bottom, 10px !important);

  /* ✅ page-pad: Mobile 15 / Tablet 20 / Desktop 50 */
  --pad: 15px;
}

/* Touch devices keep matching :hover after a tap (no real "hover" input),
   so the base a:hover color swap would otherwise stick on links until the
   user taps elsewhere. Also covers a desktop browser resized to a mobile/
   tablet width (real mouse, but (hover: hover) still reports true there),
   so the OR-condition mirrors the width breakpoint used across the site. */
@media (max-width: 991.98px), (hover: none), (pointer: coarse) {
  a:hover {
    color: inherit !important;
  }
}

.btn_light_border {
  height: 40px;
  min-width: 120px;
  padding: 0.1375rem 1rem;
  border: 1px solid var(--border-color) !important;
  border-radius: 5rem;
  color: var(--body-color);
  background-color: #ffffff;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 16px;
  line-height: 24px;
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .btn_light_border:hover,
  .btn_light_border:not(:disabled):not(.disabled):active,
  .btn-check:active + .btn_light_border,
  .btn-check:checked + .btn_light_border,
  .btn.show.btn_light_border,
  .btn_light_border.show,
  .btn_light_border:focus-visible,
  .btn-check + .btn_light_border:focus-visible {
    border: 1px solid var(--primary-temp) !important;
    outline: none !important;
    color: #ffffff !important;
    background-color: var(--primary-temp) !important;
    box-shadow: none !important;
  }
}

/* Videos CMS: Playlist */
.cms-short-create-layout--video .cms-short-create-settings > * {
  order: initial !important;
}

.cms-short-create-layout--video .cms-short-create-heading {
  margin-bottom: 10px;
}

.cms-video-playlist-title-field,
.cms-video-playlist-image-field,
.cms-video-playlist-status-field,
.cms-video-playlist-categories,
.cms-short-create-layout--video .cms-short-create-tags {
  margin: 0 0 10px;
}

.cms-video-playlist-input {
  min-height: 40px;
  padding: 7px 14px;
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  color: #333333;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.cms-video-playlist-input:focus {
  border-color: #e4e4e4;
  box-shadow: none;
}

.cms-short-create-layout--video .cms-short-create-cover-upload {
  aspect-ratio: 307 / 174;
}

.cms-video-playlist-categories {
  min-width: 0;
  padding: 0;
  border: 0;
}

.cms-video-playlist-categories legend {
  margin: 0 0 6px;
  color: #888888;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.cms-video-playlist-categories .cms-short-create-select-wrap + .cms-short-create-select-wrap {
  margin-top: 10px;
}

.cms-video-playlist-categories .cms-short-create-select:invalid {
  color: #888888;
}

.cms-video-playlist-categories .cms-short-create-select option {
  color: #333333;
}

.cms-short-create-layout--video .cms-short-create-tags legend {
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 20px;
}

.cms-short-create-layout--video .cms-short-create-tag-list {
  gap: 10px;
}

.cms-short-create-layout--video .cms-short-create-tag,
.cms-short-create-layout--video .cms-short-create-tag-add {
  height: 40px;
}

.cms-short-create-layout--video .cms-short-create-tag {
  min-width: 60px;
  padding-inline: 14px;
}

.cms-short-create-layout--video #playlistTags .cms-short-create-tag {
  min-width: 100px;
}

.cms-short-create-layout--video .cms-short-create-tag-add {
  width: 40px;
  flex-basis: 40px;
}

.cms-short-create-layout--video .cms-short-create-description {
  margin-top: 0;
}

.cms-short-create-layout--video .cms-short-create-description textarea.form-control {
  min-height: 120px;
  height: 120px;
  resize: vertical;
}

/* Videos CMS: create-page content blocks stack in DOM order with even spacing
   (VDO: video list -> summary -> description ; Playlist: description -> video list) */
.cms-short-create-content > .cms-short-create-description,
.cms-short-create-content > .cms-video-playlist-videos {
  margin-top: 20px;
}

.cms-short-create-content > .cms-short-create-description:first-child,
.cms-short-create-content > .cms-video-playlist-videos:first-child {
  margin-top: 0;
}

/* รายละเอียดย่อ (short summary) - shorter textarea shown above the full description */
.cms-short-create-description.cms-short-create-summary textarea.form-control {
  min-height: 90px;
  height: 90px;
}

/* รายละเอียด -> CKEditor (custom-textarea-ckeditor) */
.custom-textarea-ckeditor {
  width: 100%;
  padding: 10px;
  border: 1px solid #ececec;
  border-radius: 8px;
  color: #333333;
  font-size: 16px;
  line-height: 24px;
  resize: vertical;
  overflow: auto;
}

.custom-textarea-ckeditor:focus {
  outline: none;
  border-color: #ececec;
}

.ck-editor .ck-editor__editable {
  min-height: 150px;
  max-height: 350px;
  scrollbar-width: thin;
  scrollbar-color: #888888 transparent;
}

.ck-editor .ck-editor__editable::-webkit-scrollbar {
  width: 6px;
}

.ck-editor .ck-editor__editable::-webkit-scrollbar-track {
  background: transparent;
}

.ck-editor .ck-editor__editable::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #888888;
}

.ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused {
  --ck-focus-ring: var(--border-width) solid var(--ck-color-base-border);
  --ck-focus-inner-shadow: var(--focus-ring-box-shadow);
}

/* CKEditor's own bundled CSS (injected at runtime by ClassicEditor.create(),
   after main.css) sets --ck-font-face from the theme's generic font
   variable, which resolves to Better Together's LIGHT (300) weight - that's
   what made every CKEditor UI surface (toolbar labels, dropdown panels,
   balloon forms like the Media URL input) render thin/oversized. Re-point it
   at the Regular weight here; !important is needed since CKEditor's own
   rule is injected later and would otherwise win on equal specificity.
   .ck-reset_all is the class CKEditor puts on EVERY independent UI root
   (the main toolbar AND each floating balloon/dropdown panel, which are
   portaled to a separate "ck-body" container outside .ck-editor), so this
   has to be set here rather than scoped under .ck-editor to reach both. */
.ck-reset_all {
  --ck-font-face: var(--font-bettertogether-regular), sans-serif !important;
}

/* CKEditor 5 typography - Better Together. Paragraph/Bold/Italic share one
   size (18/28); Heading 1 and 2 share another (24/34) but differ by color
   (h1 is the only role with an accent color, #0060d2); Heading 3 steps down
   to 18/28. Toolbar only exposes Paragraph/Heading 1-3 (see
   assets/js/ckeditor-init.js), so h4-h6 below are unreachable dead CSS kept
   only as a safety net. */
.ck {
  font-family: var(--font-bettertogether-regular), sans-serif !important;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #333333;
}
.ck strong {
  font-family: var(--font-bettertogether-medium), sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: #333333;
}
.ck i {
  font-family: var(--font-bettertogether-regular), sans-serif !important;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  font-style: italic;
  color: #333333;
}
.ck i strong,
.ck strong i {
  font-family: var(--font-bettertogether-medium), sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  font-style: italic;
  color: #333333;
}
.ck h1 {
  font-family: var(--font-bettertogether-medium), sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 24px;
  line-height: 34px;
  color: #0060d2;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.ck h2 {
  font-family: var(--font-bettertogether-medium), sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 24px;
  line-height: 34px;
  color: #333333;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.ck h3 {
  font-family: var(--font-bettertogether-medium), sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 18px;
  line-height: 28px;
  color: #333333;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.ck h4 {
  font-family: var(--font-bettertogether-medium), sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.ck h5 {
  font-family: var(--font-bettertogether-medium), sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 14px;
  line-height: 20px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.ck h6 {
  font-family: var(--font-bettertogether-medium), sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 12px;
  line-height: 18px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.ck a {
  font-family: var(--font-bettertogether-regular), sans-serif !important;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  text-decoration: none;
}
.ck a:link,
.ck a:visited,
.ck a:hover,
.ck a:active {
  text-decoration: none;
}
.ck ol,
.ck ul {
  list-style: revert;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.ck blockquote,
.ck figure {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.ck blockquote {
  border-left: 5px solid #cccccc;
  font-style: italic;
  margin-left: 0;
  margin-right: 0;
  overflow: hidden;
  padding-left: 1.5em;
  padding-right: 1.5em;
}
.ck p {
  font-family: var(--font-bettertogether-regular), sans-serif !important;
  font-weight: 400;
  font-size: 18px !important;
  line-height: 28px;
  color: #333333;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.ck ol li span,
.ck ul li span {
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #333333;
}

@media (max-width: 991.98px), (hover: none), (pointer: coarse) {
  .ck.ck-toolbar .ck.ck-button:not(.ck-disabled):hover,
  .ck.ck-toolbar .ck.ck-button:not(.ck-disabled):active,
  .ck.ck-toolbar .ck.ck-button:not(.ck-disabled):focus,
  .ck.ck-toolbar .ck.ck-button:not(.ck-disabled):focus-visible {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
}
/* /CKEditor 5 */

/* CKEditor 5.35's toolbar auto-grouping does not kick in inside this layout,
   so the toolbar keeps its full natural width and spills a few px past the
   editor. Clip it at the content column so it never turns into a page-level
   horizontal scrollbar (.content-inner is effectively overflow:auto). */
.cms-short-create-content {
  overflow-x: clip;
}

/* video rows on the VDO page are static (no data-card-href) */
.cms-video-playlist-card:not([data-card-href]) {
  cursor: default;
}

.cms-video-playlist-videos {
  margin-top: 10px;
}

.cms-video-playlist-videos .form-label {
  display: block;
}

.cms-video-playlist-add {
  margin-bottom: 10px;
}

.cms-video-playlist-list {
  display: grid;
  gap: 10px;
}

.cms-video-playlist-list .cms-video-playlist-card {
  position: relative;
  min-height: 70px;
  margin: 0;
  overflow: visible;
  box-shadow: 0 0 10px 0 #0000001a !important;
  cursor: pointer;
}

.cms-video-playlist-list .cms-video-playlist-card .card-link {
  height: 70px;
  display: grid;
  grid-template-columns: 125px minmax(0, 1fr) 48px;
  border-radius: inherit;
}

.cms-video-playlist-list .cms-video-playlist-card .card-img-container {
  width: 125px;
  height: 70px;
  border-radius: 10px 0 0 10px;
}

.cms-video-playlist-list .cms-video-playlist-card .card-img-top {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cms-video-playlist-list .cms-video-playlist-card .card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 15px;
}

.cms-video-playlist-card-actions {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cms-video-playlist-card-actions button {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #cccccc;
  font-size: 18px;
  line-height: 28px;
}

.cms-video-playlist-card-actions .dropdown-toggle::after,
.cms-video-add-dropdown .dropdown-toggle::after,
.cms-short-create-tag.dropdown-toggle::after {
  display: none;
}

.cms-video-playlist-card-actions .dropdown {
  position: static;
}

.cms-video-playlist-card-actions .dropdown-menu,
.cms-video-add-dropdown .dropdown-menu,
.cms-short-create-tag-list .dropdown-menu,
.cms-library-page-actions .dropdown-menu {
  width: max-content;
  min-width: 60px;
  max-width: 260px;
  margin-top: 5px !important;
  padding: 5px 0;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 4px 14px #0000001a;
}

.cms-video-playlist-card-actions .dropdown-item,
.cms-video-add-dropdown .dropdown-item,
.cms-short-create-tag-list .dropdown-item,
.cms-library-page-actions .dropdown-item {
  width: 100%;
  min-width: 60px;
  display: block;
  padding: 5px 15px;
  border: 0;
  background: #ffffff;
  color: #333333;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: left !important;
  white-space: nowrap;
}

.cms-video-add-dropdown {
  width: max-content;
}

.cms-video-add-dropdown .dropdown-item {
  cursor: pointer;
}

.cms-video-playlist-choice-modal .modal-content {
  overflow: hidden;
  border: 1px solid #e4e4e4;
  border-radius: 12px;
  background: #ffffff;
  font-family: var(--font-bettertogether-regular), sans-serif;
}

/* the tag modal's searchable dropdown must be able to spill past the modal edge */
#playlistTagModal .modal-content,
#playlistTagModal .modal-body,
#libraryTagModal .modal-content,
#libraryTagModal .modal-body {
  overflow: visible;
}

.cms-video-playlist-choice-modal .modal-header {
  min-height: 48px;
  padding: 10px 15px;
  border-bottom: 0;
}

.cms-video-playlist-choice-modal .modal-title {
  margin: 0;
  color: #333333;
  font-family: var(--font-bettertogether-medium), sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
}

.cms-video-playlist-choice-modal .btn-close {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #888888;
  opacity: 1;
}

.cms-video-playlist-choice-modal .modal-body {
  padding: 0 15px;
}

.cms-video-playlist-choice-search {
  position: relative;
  margin-bottom: 8px;
}

.cms-video-playlist-choice-search > i {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 12px;
  color: #cccccc;
  font-size: 18px;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

.cms-video-playlist-choice-search .form-control {
  height: 40px;
  min-height: 40px;
  padding: 5px 38px 5px 40px;
  border: 1px solid #e4e4e4;
  border-radius: 999px;
  color: #333333;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.cms-video-playlist-choice-search .form-control:focus {
  border-color: #e4e4e4;
  box-shadow: none;
}

.cms-video-playlist-choice-search .form-control::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}

.cms-video-playlist-choice-search .search-clear-button {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 12px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #888888;
  cursor: pointer;
  transform: translateY(-50%);
}

.cms-video-playlist-choice-search .search-clear-button i {
  color: #888888;
  font-size: 14px;
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .cms-video-playlist-choice-search .search-clear-button:hover,
  .cms-video-playlist-choice-search .search-clear-button:hover i {
    color: var(--primary-temp);
  }
}

.cms-video-playlist-choice-search .form-control:not(:placeholder-shown) ~ .search-clear-button {
  display: inline-flex;
}

.cms-video-playlist-choice-list {
  min-height: 220px;
  max-height: 300px;
  overflow-y: auto;
  padding-bottom: 10px;
}

.cms-video-playlist-choice {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #333333;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  cursor: pointer;
}

.cms-video-playlist-choice input[type="radio"],
.cms-video-playlist-choice input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin: 0;
  appearance: none;
  border: 1px solid #cccccc;
  border-radius: 50%;
  outline: 0;
  background-color: #ffffff;
  box-shadow: none;
  cursor: pointer;
}

.cms-video-playlist-choice input[type="radio"]:checked,
.cms-video-playlist-choice input[type="checkbox"]:checked {
  border: 0;
  background-color: #ffffff;
  background-image: url("../images/main/ic_check_success.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  box-shadow: inset 0 0 0 1px #cccccc;
}

.cms-video-playlist-choice input[type="radio"]:focus,
.cms-video-playlist-choice input[type="radio"]:focus-visible,
.cms-video-playlist-choice input[type="radio"]:checked:focus,
.cms-video-playlist-choice input[type="radio"]:checked:focus-visible,
.cms-video-playlist-choice input[type="checkbox"]:focus,
.cms-video-playlist-choice input[type="checkbox"]:focus-visible,
.cms-video-playlist-choice input[type="checkbox"]:checked:focus,
.cms-video-playlist-choice input[type="checkbox"]:checked:focus-visible {
  border-color: #cccccc;
  outline: 0;
  box-shadow: inset 0 0 0 1px #cccccc;
}

.cms-video-playlist-choice-modal .modal-footer {
  justify-content: center;
  padding: 10px 15px 30px;
  border-top: 0;
}

.cms-video-playlist-tag-select {
  margin-bottom: 10px;
}

.cms-video-playlist-custom-tag {
  margin: 10px 0;
}

.cms-video-playlist-tag-select .txt_label_gray,
.cms-video-playlist-custom-tag .txt_label_gray {
  display: block;
}

.cms-video-playlist-tag-select .form-select:invalid {
  color: #888888;
}

/* custom searchable tag dropdown (แท็ก modal) - ports #myModal-addtag from html_gschool */
.custom-tag-dropdown {
  position: relative;
}

.custom-tag-dropdown .custom-tag-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: 7px 10px 7px 14px;
  border: 1px solid var(--gray-400);
  color: #888888;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 16px;
  line-height: 24px;
  text-align: left;
  cursor: pointer;
}

.custom-tag-dropdown .custom-tag-btn.active {
  color: #333333;
}

.custom-tag-dropdown .custom-tag-btn:focus {
  border: 1px solid var(--gray-400);
}

.custom-tag-dropdown .custom-tag-btn::after {
  margin-left: auto;
  margin-right: 0;
  color: #cccccc;
}

.custom-tag-dropdown .custom-tag-menu {
  max-height: 250px;
  padding: 12px 15px;
  overflow-y: auto;
}

.custom-tag-dropdown .custom-tag-search-item {
  margin-bottom: 8px;
}

.custom-tag-dropdown .dropdown-item {
  padding-left: 0;
  padding-right: 0;
  color: #333333;
  font-size: 16px;
  line-height: 24px;
}

.custom-tag-dropdown .dropdown-item:hover,
.custom-tag-dropdown .dropdown-item:focus {
  background-color: transparent;
  color: #333333;
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .cms-short-create-layout--video .cms-short-create-cover-upload:hover .cms-short-create-cover-icon {
    opacity: 0.75;
  }

  .cms-video-playlist-list .cms-video-playlist-card:hover,
  .cms-video-playlist-list .cms-video-playlist-card:hover .card-link {
    background-color: #fafbfc;
    cursor: pointer;
  }

  .cms-video-playlist-list .cms-video-playlist-card:hover .card-title {
    color: var(--primary-temp);
  }

  .cms-video-playlist-card-actions button:hover,
  .cms-video-playlist-card-actions button:focus-visible {
    color: var(--primary-temp);
  }

  .cms-video-playlist-card-actions .dropdown-item:hover,
  .cms-video-playlist-card-actions .dropdown-item:focus-visible,
  .cms-video-add-dropdown .dropdown-item:hover,
  .cms-video-add-dropdown .dropdown-item:focus-visible,
  .cms-library-page-actions .dropdown-item:hover,
  .cms-library-page-actions .dropdown-item:focus-visible {
    color: var(--primary-temp) !important;
    background-color: #fafbfc;
  }
}

@media (min-width: 992px) {
  .cms-video-playlist-list .cms-video-playlist-card {
    height: 72px;
    min-height: 72px;
  }

  .cms-video-playlist-list .cms-video-playlist-card .card-link {
    height: 70px;
  }

  .cms-video-playlist-list .cms-video-playlist-card .card-img-container {
    width: 125px;
    min-width: 125px;
    height: 70px;
    min-height: 70px;
  }
}

@media (max-width: 991.98px) {
  .cms-video-playlist-list .cms-video-playlist-card .card-link {
    height: 70px;
    display: grid;
    grid-template-columns: 125px minmax(0, 1fr) 40px;
  }

  .cms-video-playlist-list .cms-video-playlist-card .card-img-container {
    width: 125px;
    height: 70px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .cms-video-playlist-list .cms-video-playlist-card {
    height: 91px;
    min-height: 91px;
  }

  .cms-video-playlist-list .cms-video-playlist-card .card-link {
    height: 89px;
    grid-template-columns: 158px minmax(0, 1fr) 40px;
    align-items: stretch;
  }

  .cms-video-playlist-list .cms-video-playlist-card .card-img-container {
    width: 158px;
    min-width: 158px;
    height: 89px;
    min-height: 89px;
  }

  .cms-video-playlist-list .cms-video-playlist-card .card-body,
  .cms-video-playlist-card-actions {
    align-self: stretch;
  }
}

@media (max-width: 767.98px) {
  .cms-short-create-layout--video .cms-short-create-back {
    width: calc(100% + 30px);
    margin-right: -15px;
    margin-left: -15px;
    padding-inline: 15px;
  }

  .cms-video-playlist-list .cms-video-playlist-card {
    border-radius: 20px;
  }

  .cms-video-playlist-list .cms-video-playlist-card .card-link {
    height: auto;
    display: block;
  }

  .cms-video-playlist-list .cms-video-playlist-card .card-img-container {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
  }

  .cms-video-playlist-list .cms-video-playlist-card .card-body {
    min-height: 94px;
    padding: 10px 15px 15px;
  }

  .cms-video-playlist-card-actions {
    position: absolute;
    z-index: 3;
    top: 10px;
    right: 10px;
  }

  .cms-video-playlist-card-actions .dropdown {
    position: relative;
  }

  .cms-video-playlist-card-actions button.dropdown-toggle,
  .cms-video-playlist-card-actions > button {
    width: 40px;
    height: 40px;
    border: 1px solid #e4e4e4;
    border-radius: 50%;
    background: #ffffff;
  }

  .cms-video-playlist-card-actions .dropdown-menu {
    right: 0 !important;
    left: auto !important;
  }

  .cms-video-playlist-list .cms-video-playlist-card .card-title {
    -webkit-line-clamp: 2;
  }
}

/* =========================
   Cards with no thumbnail image: keep the "..." action plain and
   vertically centered (skip the mobile floating-chip treatment,
   which only makes sense floating over an image).
========================= */
.no-img-in-card .cms-video-playlist-card-actions {
  position: static;
  align-self: center;
}
.no-img-in-card .cms-video-playlist-card-actions .dropdown {
  position: static;
}
.no-img-in-card .cms-video-playlist-card-actions button.dropdown-toggle {
  border: 0;
  border-radius: 0;
  background: transparent;
}

@media (min-width: 768px) {
  :root {
    --pad: 20px;
  }
}
@media (min-width: 992px) {
  :root {
    --pad: 50px;
  }
}

*:focus {
  outline: none;
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btn-to-top-visible {
  visibility: visible;
  opacity: 0.75;
}

/* Clear the fixed bottom-nav on mobile/tablet with a 20px gap above it
   (bottom-nav pill top edge sits at ~12px margin + nav-h; --safe-bottom is
   skipped here since its declaration computes invalid/empty, not a length). */
@media (max-width: 991.98px) {
  .btn-to-top {
    bottom: calc(var(--nav-h) + 12px + 20px) !important;
  }

  /* .cms-short-create-shell already reserves 72px of bottom padding on
     .page-content at this width (keeps the aside/content form clear of the
     bottom-nav) - the generic .btn-to-top clearance above would stack on
     top of that padding instead of accounting for it, floating the button
     72px higher than on plain pages. Subtract that padding back out here. */
  .cms-short-create-shell .btn-to-top {
    bottom: calc(var(--nav-h) + 12px + 20px - 72px) !important;
  }
}
.btn-secondary {
  --btn-color: #fff;
  --btn-bg: #888888;
  --btn-border-color: #888888;
  --btn-hover-color: #fff;
  --btn-hover-bg: #888888;
  --btn-hover-border-color: #888888;
  --btn-focus-shadow-rgb: 69, 135, 167;
  --btn-active-color: #fff;
  --btn-active-bg: #888888;
  --btn-active-border-color: #888888;
  --btn-active-shadow: inset 0 0 0 0 transparent;
  --btn-disabled-color: #fff;
  --btn-disabled-bg: #888888;
  --btn-disabled-border-color: #888888;
}
.btn-capsule-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 7px 20px;
  border: 1px solid #ececec;
  border-radius: 999px;
  color: #888888;
  background: #ffffff;
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.btn-capsule-outline:link,
.btn-capsule-outline:visited,
.btn-capsule-outline:hover,
.btn-capsule-outline:focus,
.btn-capsule-outline:focus-visible,
.btn-capsule-outline:active {
  color: #888888 !important;
  background: #ffffff !important;
  border-color: #ececec !important;
  text-decoration: none !important;
}
.g-15p {
  --bs-gutter-x: 15px;
  --bs-gutter-y: 15px;
  --gutter-x: 15px;
  --gutter-y: 15px;
}
.row {
  --gutter-x: 15px;
}

/* Global form focus: preserve the neutral EDU World input border. */
.form-control:focus {
  background-color: var(--input-bg, #ffffff);
  border-color: #e4e4e4;
  outline: 0;
  box-shadow: none;
}

.form-label {
  margin-bottom: 5px;
  color: #888888;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
}

.link-primary-temp {
  color: var(--primary-temp) !important;
  text-decoration: none;
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .link-primary-temp:hover {
    color: var(--primary-temp) !important;
    opacity: 0.75;
  }
}

.cms-short-order-menu {
  padding-top: 5px;
  padding-bottom: 5px;
}

.cms-short-order-menu .dropdown-item {
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 16px;
  line-height: 24px;
}

/* //////////////////////////////////////////////////////// Home 2026 ///////////////////////////////////////////////////////////////*/
/* =========================
   Base
========================= */
html,
body {
  overflow-x: hidden;
}

body {
  padding-bottom: calc(var(--bottomnav-h) + var(--safe-bottom));
  background: #fff;
}

.date-field .tempus-dominus-widget,
.tempus-dominus-widget {
  font-family: var(--font-bettertogether), sans-serif !important;
  font-weight: 400;
}

.tempus-dominus-widget .picker-switch,
.tempus-dominus-widget .calendar-header,
.tempus-dominus-widget .date-container,
.tempus-dominus-widget button,
.tempus-dominus-widget th,
.tempus-dominus-widget td {
  font-family: var(--font-bettertogether), sans-serif !important;
  font-weight: 400 !important;
}

@media (min-width: 992px) {
  body {
    padding-bottom: 0;
  }
}

/* =========================
   page-pad
========================= */
.page-pad {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
@media (min-width: 768px) {
  .page-pad {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
@media (min-width: 992px) {
  .page-pad {
    padding-left: var(--pad) !important;
    padding-right: var(--pad) !important;
  }
}

/* =========================
   edge-swiper (ใช้กับแถว swiper เท่านั้น)
========================= */
.edge-swiper {
  overflow: hidden;
  padding-bottom: 20px;
  margin: 0 0;
}
.edge-swiper .swiper {
  overflow: visible;
}
.swiper {
  -webkit-user-select: none;
  user-select: none;
}
.swiper:active {
  cursor: grabbing;
}
.swiper img,
.swiper a {
  -webkit-user-drag: none;
}

/* =========================
   Hero / Topbar
========================= */
.hero-shell {
  background: linear-gradient(to right, var(--hero-1) 0%, var(--hero-2) 50%, var(--hero-3) 100%);
  color: #fff;
  overflow: hidden;
  position: relative;
}

.topbar {
  height: var(--topbar-h);
  position: static;
  top: 0;
  z-index: 1050;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background 0.2s ease, border-color 0.2s ease;
  width: 100%;
}
/* Modifier: solid white topbar with a hairline bottom border (static/content pages) */
.topbar--white {
  background: #ffffff;
  border-bottom: 1px solid #e4e4e4;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.topbar--white .toplinks a {
  color: #333333;
}
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .topbar--white .toplinks a:hover {
    color: var(--link-hover-color);
    background: transparent;
  }
}

.brand {
  text-decoration: none;
  white-space: nowrap;
}

.toplinks a {
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 999px;
  white-space: nowrap;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
}
.avatar-link {
  display: inline-flex;
  margin-left: 15px;
}

.topbar.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}
.topbar.is-scrolled .toplinks a {
  color: #111827;
}
.topbar.is-scrolled .icon-btn {
  background: rgba(17, 24, 39, 0.06);
  border-color: rgba(17, 24, 39, 0.06);
  color: #111827;
}

/* =========================
   Banner Swiper (บน Hero)
   - ไม่ล็อกความสูงแล้ว (เหมือน img-fluid)
   - รูปใช้ขนาดเดียวกันทั้งหมด
========================= */
.pt_bannerswiper {
  padding-bottom: 20px;
}

.banner-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

/* picture/img ให้ไหลตามขนาดรูป */
.banner-card picture {
  display: block;
}

.banner-card .banner-media {
  width: 100%;
  height: auto; /* ✅ สำคัญ: ไม่กำหนดสูง */
  display: block;
  max-width: 100%;
  object-fit: contain; /* จะไม่ crop และไม่ล้น ถ้ารูปสัดส่วนมาตรฐานอยู่แล้ว */
}

/* Banner pagination (Hero) */
#bannerSwiper {
  padding-bottom: 0;
}

#bannerSwiper .swiper-pagination {
  bottom: 10px;
  left: 0;
  right: 0;
}

#bannerSwiper .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: rgba(17, 24, 39, 0.35);
  opacity: 1;
}

#bannerSwiper .swiper-pagination-bullet-active {
  background: #e60000;
}

/* =========================
   Banner Swiper S2 (full width)
========================= */
.bannerSwiperS2-section {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  margin-top: 10px;
}

#bannerSwiperS2 {
  width: 100%;
}
#bannerSwiperS2 .swiper-slide {
  width: 100%;
}

/* =========================
   Banner Swiper S2 (Full Width – Fluid Height)
   - ไม่ล็อกความสูง
   - รูปเป็นตัวกำหนดสัดส่วนเอง
========================= */
/* .bannerSwiperS2-section {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

#bannerSwiperS2 {
  width: 100%;
}
#bannerSwiperS2 .swiper-slide {
  width: 100%;
} */

.banner-card-s2 {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

/* picture เป็น block ปกติ */
.banner-card-s2 picture {
  display: block;
  width: 100%;
}

/* img แบบ img-fluid */
.banner-media-s2 {
  width: 100%;
  height: auto; /* ✅ สำคัญ */
  max-width: 100%;
  display: block;
  object-fit: contain; /* ปลอดภัย แม้จริง ๆ ไม่จำเป็นถ้ารูปสัดส่วนเดียว */
}

/* =========================
   Category (Hero)
========================= */
.cat-item {
  text-align: center;
  color: #fff;
  text-decoration: none;
  display: block;
  width: 70px;
}
@media (min-width: 768px) {
  .cat-item {
    width: 70px;
  }
}
@media (min-width: 992px) {
  .cat-item {
    width: 80px;
  }
}
.cat-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
#catSwiper .swiper-slide:nth-child(1) .cat-icon,
#catSwiper .swiper-slide:nth-child(3) .cat-icon,
#catSwiper .swiper-slide:nth-child(5) .cat-icon,
#catSwiper .swiper-slide:nth-child(6) .cat-icon,
#catSwiper .swiper-slide:nth-child(7) .cat-icon,
#catSwiper .swiper-slide:nth-child(8) .cat-icon {
  background-position: center;
  background-repeat: no-repeat;
}
#catSwiper .swiper-slide:nth-child(1) .cat-icon svg,
#catSwiper .swiper-slide:nth-child(3) .cat-icon svg,
#catSwiper .swiper-slide:nth-child(5) .cat-icon svg,
#catSwiper .swiper-slide:nth-child(6) .cat-icon svg,
#catSwiper .swiper-slide:nth-child(7) .cat-icon svg,
#catSwiper .swiper-slide:nth-child(8) .cat-icon svg {
  display: none;
}
#catSwiper .swiper-slide:nth-child(1) .cat-icon {
  background-image: url("../images/main/home/hero_menu/ic_vdo_wall.svg");
  background-size: 40px 40px;
}
#catSwiper .swiper-slide:nth-child(3) .cat-icon {
  background-image: url("../images/main/home/hero_menu/ic_s_course.svg");
  background-size: 21px 16px;
}
#catSwiper .swiper-slide:nth-child(5) .cat-icon {
  background-image: url("../images/main/home/hero_menu/ic_s_play_learn.svg");
  background-size: 21px 16px;
}
#catSwiper .swiper-slide:nth-child(6) .cat-icon {
  background-image: url("../images/main/home/hero_menu/ic_s_school.svg");
  background-size: 21px 17px;
}
#catSwiper .swiper-slide:nth-child(7) .cat-icon {
  background-image: url("../images/main/home/hero_menu/ic_s_education.svg");
  background-size: 20px 20px;
}
#catSwiper .swiper-slide:nth-child(8) .cat-icon {
  background-image: url("../images/main/home/hero_menu/ic_trueplookpanya.svg");
  background-size: 20px 25px;
}
#catSwiperShowall .swiper-slide:nth-child(1) .cat-icon,
#catSwiperShowall .swiper-slide:nth-child(2) .cat-icon,
#catSwiperShowall .swiper-slide:nth-child(4) .cat-icon,
#catSwiperShowall .swiper-slide:nth-child(5) .cat-icon,
#catSwiperShowall .swiper-slide:nth-child(6) .cat-icon,
#catSwiperShowall .swiper-slide:nth-child(7) .cat-icon,
#catSwiperShowall .swiper-slide:nth-child(9) .cat-icon {
  background-position: center;
  background-repeat: no-repeat;
}
#catSwiperShowall .swiper-slide:nth-child(1) .cat-icon svg,
#catSwiperShowall .swiper-slide:nth-child(2) .cat-icon svg,
#catSwiperShowall .swiper-slide:nth-child(4) .cat-icon svg,
#catSwiperShowall .swiper-slide:nth-child(5) .cat-icon svg,
#catSwiperShowall .swiper-slide:nth-child(6) .cat-icon svg,
#catSwiperShowall .swiper-slide:nth-child(7) .cat-icon svg,
#catSwiperShowall .swiper-slide:nth-child(9) .cat-icon svg {
  display: none;
}
#catSwiperShowall .cat-icon {
  border: none;
}
#catSwiperShowall .swiper-slide:nth-child(1) .cat-icon {
  background-image: url("../images/main/home/hero_menu/ic_s_stream.svg");
  background-size: 16px 22px;
}
#catSwiperShowall .swiper-slide:nth-child(2) .cat-icon {
  background-image: url("../images/main/home/hero_menu/ic_vdo_wall.svg");
  background-size: 40px 40px;
}
#catSwiperShowall .swiper-slide:nth-child(4) .cat-icon {
  background-image: url("../images/main/home/hero_menu/ic_s_course.svg");
  background-size: 21px 16px;
}
#catSwiperShowall .swiper-slide:nth-child(5) .cat-icon {
  background-image: url("../images/main/home/hero_menu/ic_s_play_learn.svg");
  background-size: 21px 16px;
}
#catSwiperShowall .swiper-slide:nth-child(6) .cat-icon {
  background-image: url("../images/main/home/hero_menu/ic_s_library.svg");
  background-size: 16px 19px;
}
#catSwiperShowall .swiper-slide:nth-child(7) .cat-icon {
  background-image: url("../images/main/home/hero_menu/ic_trueplookpanya.svg");
  background-size: 20px 25px;
}
#catSwiperShowall .swiper-slide:nth-child(9) .cat-icon {
  background-image: url("../images/main/home/hero_menu/ic_s_school.svg");
  background-size: 21px 17px;
}
.cat-label {
  font-family: var(--font-bettertogether-regular);
  font-size: 12px;
  line-height: 18px;
  opacity: 0.95;
  word-break: break-word;
  text-align: center;
}

/* left by default, center only when content fits within viewport */
#catSwiper .swiper-wrapper {
  justify-content: flex-start;
}

#catSwiper {
  padding-top: 10px;
  padding-bottom: 10px;
}

#catSwiper.is-centered .swiper-wrapper {
  justify-content: center;
}

/* left by default, center only when content fits within viewport */
#catSwiperShowall .swiper-wrapper {
  justify-content: flex-start;
}

#catSwiperShowall {
  padding-top: 10px;
  padding-bottom: 10px;
}

#catSwiperShowall.is-centered .swiper-wrapper {
  justify-content: center;
}

/* =========================
   Section Head
========================= */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
  padding-bottom: 10px;
  align-items: end;
}
.section-head h3 {
  flex: 1 1 auto; /* ให้หัวข้อยืดได้ */
  min-width: 0; /* สำคัญมาก ป้องกันล้น */
  margin: 0;

  font-family: var(--font-bettertogether-medium);
  font-size: 20px;
  line-height: 1.2;

  background: linear-gradient(90deg, #0060d2, #5f50ee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-weight: 500;
}
@media (min-width: 992px) {
  .section-head h3 {
    font-size: 24px;
    line-height: 34px;
  }
}
.section-head h3 a {
  color: inherit;
  -webkit-text-fill-color: inherit;
  text-decoration: none;
}
.section-head .see-all {
  flex: 0 0 auto; /* ห้ามยืด */
  white-space: nowrap; /* ห้ามขึ้นบรรทัดใหม่ */
  font-size: 14px;
  line-height: 20px;
  color: #888888;
  text-decoration: none;
  padding-bottom: 2px; /* ขยับลงนิดให้บาลานซ์สายตา */
}

/* =========================
   Video cards
========================= */
/* .content-card {
  width: 195px !important;
} */
/* ใช้ 195px เฉพาะ POD/NEWS */
#podSection .content-card,
#newsSection .content-card,
#secondarySection .content-card,
#generalKnowledgeSection .content-card {
  width: 195px !important;
}
/* =========================
   VIDEO: size control (fix too big + show 2.5 cards on mobile via Swiper)
========================= */
#videoSection .swiper-slide {
  height: auto;
}

#videoSection .content-card {
  width: 100%; /* ให้การ์ดเต็มความกว้างของ slide ที่ Swiper คำนวณให้ */
  max-width: 100%;
}

/* กันรูปดันการ์ดให้สูง/ใหญ่เกิน */
#videoSection .content-thumb {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #e4e4e4;
}

/* POD + NEWS: Desktop >=1200 ให้ 6 ใบเต็มจอ (ไม่ใช้ width 195px) */
@media (min-width: 1200px) {
  #podSection .content-card,
  #newsSection .content-card {
    width: auto !important; /* ยอมให้ Swiper ใส่ inline width ได้ */
  }
}

.content-thumb {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
  display: block;
}
.content-title {
  margin-top: 10px;
  margin-bottom: 0;
  color: #333333;
  font-size: 16px;
  font-family: var(--font-bettertogether-regular);
  line-height: 24px;
}
.content-meta {
  margin-top: 0;
  color: #888888;
  font-family: var(--font-bettertogether-regular);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
}

/* =========================
   Course band + card
========================= */
.course-section {
  /* background-image: url("../../assets/images/main/home/vdo/bg_ventura.png"); */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  padding: 0 0 0px 0;
}
/* =========================
   COURSE: fix card too big + equal height
   (scope เฉพาะ #courseSection)
========================= */

/* 1) ให้ wrapper ยืดความสูงเท่ากันได้ */
#courseSection .swiper-wrapper {
  align-items: stretch;
}

/* 2) ให้แต่ละ slide ไม่ยืดเต็มความกว้าง และสูงตาม wrapper */
/* ========================= COURSE: Swiper width control fix ========================= */
#courseSection .swiper-wrapper {
  align-items: stretch;
}

#courseSection .swiper-slide {
  /* ✅ ห้ามกำหนด width ทับ Swiper */
  height: auto;
  display: flex;
  min-width: 0;
  align-self: stretch;
}

/* การ์ดยืดสูงเท่ากัน + ปุ่มลงล่าง */
#courseSection .course-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

#courseSection .course-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

#courseSection .course-body .btn {
  margin-top: auto !important;
}

/* 3) ล็อกความกว้างการ์ด (กันชนกับ CSS อื่น) */
#courseSection .course-card {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

/* 4) ทำให้ปุ่มอยู่ล่างเสมอ + ความสูงเท่ากันทุกการ์ด */
#courseSection .course-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

#courseSection .course-body .btn {
  margin-top: auto !important; /* ดันปุ่มลงล่าง */
}

/* GAME: same width/height fix as COURSE, scoped to #gameSection */
#gameSection .swiper-wrapper {
  align-items: stretch;
}
#gameSection .swiper-slide {
  height: auto;
  display: flex;
  min-width: 0;
  align-self: stretch;
}
#gameSection .game-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.course-card {
  width: 100%;
  border: 1px solid #e4e4e4;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0px 0px 15px 0px #00000026;
}

.course-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #f3f4f6;
  overflow: hidden;
}
.course-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.course-body {
  padding: 14px 16px 16px;
}

.course-body .fw-bold {
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  color: #333333;
  font-weight: 400 !important;
  line-height: 24px;
  margin-bottom: 0;
}

.course-body .muted {
  font-family: var(--font-bettertogether-regular);
  font-size: 14px;
  color: #888888;
  font-weight: 300 !important;
  line-height: 20px;
}
/* ===== Course Rating ===== */
.course-rating {
  /* display: inline-flex; */
  align-items: center;
  gap: 10px;
  margin-top: 0px;
  line-height: 1;
}

.course-rating .stars {
  display: inline-flex;
  gap: 3px;
}

.course-rating .stars i {
  font-size: 10px; /* 10x10px */
  width: 10px;
  height: 10px;
  line-height: 10px;
}

.course-rating .stars .is-on {
  color: #f2c94c; /* เหลือง */
}
.course-rating .stars .is-off {
  color: #ececec; /* เทา */
}

.course-rating .rating-num {
  font-size: 12px;
  line-height: 18px;
  color: #888888;
  font-family: var(--font-bettertogether-regular);
}

.course-body .price {
  font-family: var(--font-bettertogether-medium);
  font-size: 16px;
  color: #0460d3;
  font-weight: 500 !important;
  line-height: 24px;
}

.course-body .text-muted {
  color: #b0b0b0 !important;
  font-family: var(--font-bettertogether-regular);
  font-size: 14px;
  line-height: 20px;
}

.course-card .btn,
.course-card .btn-primary {
  border: 0 !important;
  border-radius: 999px !important;
  padding: 12px 16px !important;
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  line-height: 24px;
  color: #fff !important;
  background: linear-gradient(90deg, #0060d2 0%, #5f50ee 100%) !important;
  box-shadow: none !important;
}
#courseSection .fw-bold {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 767.98px) {
  #courseSection .course-card {
    width: 100% !important;
    max-width: none !important;
  }
}

/* =========================
   Swiper arrows (desktop hover show)
========================= */
.swiper-shell {
  position: relative;
}
.swiper-shell .swiper-button-prev,
.swiper-shell .swiper-button-next {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: 0.18s ease;
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%) scale(0.98);
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 0 !important;
}
.swiper-shell .swiper-button-prev {
  left: 8px;
}
.swiper-shell .swiper-button-next {
  right: 8px;
}
@media (min-width: 992px) {
  .swiper-shell .swiper-button-prev {
    left: 12px;
  }
  .swiper-shell .swiper-button-next {
    right: 12px;
  }
}
.swiper-shell .swiper-button-prev::after,
.swiper-shell .swiper-button-next::after {
  font-size: 16px;
  line-height: 24px;
  color: #fff;
}

/* =========================
   iOS swipe smooth
========================= */
.video-swiper .swiper-wrapper,
.course-swiper .swiper-wrapper,
.pod-swiper .swiper-wrapper,
#catSwiper .swiper-wrapper,
#catSwiperShowall .swiper-wrapper,
#libCatSwiper .swiper-wrapper {
  touch-action: pan-y;
}

/* =========================
   Bottom Nav (Mobile only)
========================= */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: var(--safe-bottom);
  height: calc(var(--nav-h) + var(--safe-bottom));
  z-index: 2147483647;
  pointer-events: none;
  background: transparent !important;
  border: 0 !important;
}

body.modal-open .bottom-nav {
  z-index: 1;
}
.bottom-nav .bottom-nav-inner {
  pointer-events: auto;
  height: var(--nav-h);
  margin: 0 14px 12px;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: 50px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2), inset 0 25px 15px rgba(0, 0, 0, 0.1), inset 0 15px 5px rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
  padding: 0 10px;
}
.bottom-nav .bottom-nav-inner.bg_gray_f9 {
  background-color: #f9f9f9;
}
.bottom-nav .row {
  height: 100%;
}
.bottom-nav a {
  text-decoration: none;
  color: var(--nav-blue) !important;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav a:link,
.bottom-nav a:visited,
.bottom-nav a:hover,
.bottom-nav a:focus,
.bottom-nav a:focus-visible,
.bottom-nav a:active,
.bottom-nav a.active,
.bottom-nav a.inactive {
  color: var(--nav-blue) !important;
}
.bottom-nav .nav-ico {
  width: 30px;
  height: 25px;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 3px;
  color: var(--nav-blue) !important;
  font-size: 18px;
  line-height: 28px;
}
.bottom-nav .nav-txt {
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  font-family: var(--font-bettertogether-regular);
}
.bottom-nav a.inactive {
  opacity: 0.45;
}
.bottom-nav a.active {
  opacity: 1;
}
@media (min-width: 992px) {
  .bottom-nav {
    display: none !important;
  }
}

/* =========================
   Library + Podcast variables
========================= */
:root {
  --blue: var(--primary-temp);
  --text: #333333;
  --muted: #9a9a9a;
}

/* =========================
   Library Category (Swiper)
========================= */
.lib-section {
  padding-bottom: 20px;
}
.lib-section .media-card .media-thumb-frame,
.pod-section .media-card .media-thumb-frame,
.news-section .media-card .media-thumb-frame {
  border: 1px solid #ececec;
  box-sizing: border-box;
}
.lib-cat-edge {
  padding-bottom: 20px;
}
.lib-cat-edge.lib-cat-edge--pb-10 {
  padding-bottom: 10px;
}

.lib-cat-item {
  text-decoration: none;
  color: var(--blue);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  height: 40px;
  padding: 0 18px;
  gap: 0;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e4e4e4;
  flex: 0 0 auto;
}
@media (min-width: 768px) {
  .lib-cat-item {
    width: auto;
  }
}
@media (min-width: 992px) {
  .lib-cat-item {
    width: auto;
  }
}

.lib-cat-ico {
  display: none;
}
.lib-cat-ico svg [fill="#0060D2"] {
  fill: currentColor;
}

.lib-cat-txt {
  margin-top: 0;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;
  letter-spacing: 0;
  color: currentColor;
  font-family: var(--font-bettertogether-regular);
  word-break: break-word;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

#libCatSwiper .swiper-wrapper {
  justify-content: flex-start;
}
/* =========================
   lib-section (middle cards) : Mobile layout
   - 1 big card on top
   - 3 remaining cards as row cards (thumb left, text right)
========================= */
@media (max-width: 767.98px) {
  /* 1) ทำให้การ์ด "กลาง" (media-card--mid) กลายเป็นการ์ดแบบแถวเหมือนรูป */
  .lib-section .media-card--mid {
    display: grid;
    grid-template-columns: 140px 1fr; /* ปรับความกว้างรูปได้ */
    grid-template-rows: auto auto;
    grid-template-areas:
      "thumb title"
      "thumb meta";
    column-gap: 12px;
    align-items: center;
  }
  .lib-section .media-card--mid .media-thumb-frame {
    grid-area: thumb;
    width: 100%;
  }
  .lib-section .media-card--mid .media-title {
    grid-area: title;
    margin-top: 0;
    min-width: 0;
  }
  .lib-section .media-card--mid .media-meta {
    grid-area: meta;
    min-width: 0;
  }

  /* 2) ทำให้การ์ดใน media-stack (media-card--row) เป็นแบบแถวบนมือถือด้วย */
  .lib-section .media-card--row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .lib-section .media-card--row .media-thumb-frame {
    width: 140px; /* ให้ใกล้เคียงกับการ์ด mid */
    flex: 0 0 140px;
  }
  .lib-section .media-card--row .media-row-body {
    min-width: 0;
    flex: 1 1 auto;
  }
  .lib-section .media-card--row .media-title {
    margin-top: 0;
  }

  /* 3) กันข้อความดันเลย์เอาต์: ให้ตัดบรรทัดได้/ไม่ล้น */
  .lib-section .media-card--mid .media-title,
  .lib-section .media-card--row .media-title {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* =========================
   Media cards (Library + Podcast)
   - Zoom เฉพาะในกรอบ (ไม่ล้น)
   - มุมมนคงที่
========================= */
.media-card {
  display: block;
  text-decoration: none;
  color: var(--text);
}
.media-thumb-frame {
  border-radius: 20px;
  overflow: hidden;
  /* background: #f3f4f6; */
}
.media-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 0; /* ห้ามมี */
  transition: transform 0.35s ease;
}

/* ✅ เฟรมครอบรูป: clip + radius */
.media-card--big .media-thumb,
.media-card--mid .media-thumb,
.media-card--row .media-thumb,
.pod-section .media-thumb,
.news-section .media-thumb {
  border-radius: 20px;
}

/* title/meta */
.media-title {
  margin-top: 10px;
  font-size: 16px;
  color: var(--text);
  line-height: 24px;
  font-family: var(--font-bettertogether-regular);
}
.media-meta {
  margin-top: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
  font-family: var(--font-bettertogether-regular);
}

/* =========================
   lib-section: fix overflow on Tablet
   (cards in .media-stack must not exceed container width)
========================= */
.media-stack {
  display: flex;
  flex-direction: column; /* mobile: ซ้อนลง */
  gap: 15px;
}

/* Tablet: วาง 2 ใบข้างกันแบบหารครึ่ง + ไม่ล้น */
@media (min-width: 768px) and (max-width: 991.98px) {
  .media-stack {
    flex-direction: row;
    flex-wrap: wrap; /* กันล้น */
  }
  .media-row-body {
    padding-right: 15px;
  }

  .media-stack > .media-card {
    flex: 1 1 calc(50% - 7.5px); /* 2 ใบ/แถว หักครึ่ง gap */
    max-width: calc(50% - 7.5px);
    min-width: 0; /* สำคัญ: ให้ยอม “หด” ตามกล่อง */
  }
}

/* Desktop (>=1024): กลับมา stack แนวตั้งเหมือนเดิม */
@media (min-width: 1024px) {
  .media-stack {
    flex-direction: column;
  }
  .media-row-body {
    padding-right: 15px;
  }
}

/* เพิ่มความปลอดภัย: กันข้อความ/การ์ดดันกว้างล้นใน flex */
.media-card,
.media-card--row,
.media-row-body {
  min-width: 0;
}

.media-title,
.media-meta {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.media-card--row {
  display: flex;
  flex-direction: column;
  /* gap: 12px; */
}

.media-row-body {
  width: 100%;
}

@media (min-width: 768px) {
  .media-card--row {
    flex-direction: row;
    align-items: stretch;
    gap: 15px;
  }
  .media-card--row .media-thumb-frame {
    width: 50%;
    flex: 0 0 50%;
  }
  .media-card--row .media-row-body {
    width: 50%;
    flex: 0 0 50%;
    min-width: 0;
  }

  .media-card--row .media-title,
  .media-card--row .media-meta {
    /* white-space: nowrap; */
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .media-card--row .media-title {
    margin-top: 0;
  }
}

/* =========================
   Podcast Section BG
========================= */
.pod-section {
  background-color: #ffffff;
}
.content-row-section {
  background-color: #ffffff;
}
/* =========================
   Tool Section (Swiper cards)
========================= */
.bg_gray_f9 {
  background-color: #f9f9f9;
}
.tool-card {
  /* width: 320px; */
  width: 100%;
  display: block;
  text-decoration: none;
  color: #333;
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 0px 15px 0px #00000026;
}

.tool-media {
  padding: 22px 22px 0;
  display: grid;
  place-items: center;
}
.tool-media img {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
}

.tool-body {
  padding: 14px 18px 18px;
}
.tool-title {
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 8px;
}
.tool-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.tool-price {
  color: var(--primary-temp);
  font-family: var(--font-bettertogether-medium);
  font-size: 16px;
  line-height: 24px;
}
.tool-old {
  color: #b0b0b0;
  text-decoration: line-through;
  font-size: 14px;
  line-height: 20px;
  font-family: var(--font-bettertogether-regular);
}
.tool-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  background: #5f50ee;
  color: #fff;
  font-family: var(--font-bettertogether-regular);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  width: fit-content;
}
/* =========================
   TOOL: equal height cards (final fix)
========================= */

/* ให้ wrapper ยืดความสูงลูก */
#toolSection .swiper-wrapper {
  align-items: stretch;
}

/* slide ต้องเป็น flex และสูง 100% */
#toolSection .swiper-slide {
  display: flex;
  height: auto; /* สำคัญ */
}

/* ตัวการ์ดต้องยืดเต็ม slide */
#toolSection .tool-card {
  /* width: 320px;
  max-width: 320px; */

  display: flex;
  flex-direction: column;
  height: 100%;
}

/* body ยืดพื้นที่ที่เหลือ */
#toolSection .tool-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ปุ่มดันลงล่างสุด */
#toolSection .tool-badge,
#toolSection .tool-body .btn {
  margin-top: auto;
}
/* =========================
   Tool Section: กันการ์ดขยายตามข้อความ + ให้ตัดบรรทัดได้
========================= */
.tool-card {
  /* width: 320px;
  max-width: 320px; */
}

.tool-body {
  min-width: 0; /* สำคัญ: ให้ข้อความยอมตัด/ellipsis ใน flex */
}
/* TOOL: Mobile show 2.5 cards */
@media (max-width: 767.98px) {
  #toolSection .tool-card {
    width: 100% !important; /* ให้เต็ม slide */
    max-width: none !important; /* ปลด 320px */
  }
}
#toolSection .swiper-slide,
#toolSection .tool-card,
#toolSection .tool-body {
  min-width: 0;
}
#toolSection .tool-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* เอาออกถ้าไม่อยาก clamp */
  overflow: hidden;

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
}
/* ========================= TOOL: keep slide fluid but cap card ========================= */
#toolSection .swiper-wrapper {
  align-items: stretch;
}

#toolSection .swiper-slide {
  display: flex;
  height: auto;
  min-width: 0;
}

#toolSection .tool-card {
  width: 100%;
  max-width: 360px; /* ✅ ปรับได้: 320/340/360 */
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ✅ บังคับให้ข้อความยาวตัดบรรทัด ไม่ดันการ์ดให้กว้างขึ้น */
.tool-title {
  white-space: normal !important;
  overflow-wrap: anywhere; /* กันคำยาวๆ */
  word-break: break-word; /* fallback */
}

.tool-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.tool-section .remark {
  color: var(--text);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  font-family: var(--font-bettertogether-regular);
}
.site-footer {
  background-color: #f2f4f6;
  margin-top: 50px;
  padding: 40px 0;
  min-height: 270px;
  box-sizing: border-box;
}
.footer-brand {
  margin-bottom: 10px;
}
.footer-copy {
  font-size: 16px;
  line-height: 24px;
  color: #888888;
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
}
.footer-head {
  font-size: 16px;
  color: var(--primary-temp);
  font-family: var(--font-bettertogether-medium);
  font-weight: 500;
  line-height: 24px;
}
.footer-link {
  display: table;
  flex-direction: row;
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  color: var(--text);
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
}
/* Footer Social */
.footer-social {
  display: flex;
  gap: 10px; /* วงกลมห่างกัน 10px */
  margin-top: 10px; /* ปรับได้ตามชอบ */
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  color: #fff; /* ไอคอนสีขาว */
  transition: background 0s ease, transform 0s ease;
}

.footer-social a i {
  color: #fff;
  font-size: 18px; /* ปรับขนาดไอคอนให้บาลานซ์ในวง 40px */
  line-height: 1;
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .footer-social a:hover {
    background: transparent;
    opacity: 0.75;
  }
}

/* =========================
   POD + NEWS: responsive card width for Swiper
   - <1200: swipe (auto width card)
   - >=1200: 6 cards full width (Swiper controls slide width)
========================= */

/* default (<1200): ใช้การ์ดกว้างคงที่ให้เลื่อนได้สวย */
#podSection .content-card,
#newsSection .content-card,
#secondarySection .content-card,
#generalKnowledgeSection .content-card {
  width: 195px !important;
}

/* Desktop >=1200: ยกเลิกความกว้างคงที่ ให้ Swiper คำนวณเองจาก slidesPerView:6 */
@media (min-width: 1200px) {
  #podSection .content-card,
  #newsSection .content-card {
    width: unset !important; /* หรือ initial ก็ได้ */
    max-width: none !important;
  }

  /* กัน element ข้างในทำให้ slide พยายามขยาย */
  #podSection .media-card,
  #newsSection .media-card {
    width: 100%;
  }

  #podSection .media-thumb-frame,
  #newsSection .media-thumb-frame {
    width: 100%;
  }

  #secondarySection .content-card,
  #generalKnowledgeSection .content-card {
    width: calc((100% - 75px) / 6) !important;
    max-width: none !important;
  }

  #secondarySection .media-card,
  #generalKnowledgeSection .media-card,
  #secondarySection .media-thumb-frame,
  #generalKnowledgeSection .media-thumb-frame {
    width: 100%;
  }
}
/* POD + NEWS: mobile/tablet ให้เป็นการ์ดกว้างคงที่เพื่อเลื่อนได้ */
#podSection .pod-card,
#newsSection .news-card {
  width: 195px;
}

/* Desktop >=1200: ให้ Swiper คุมความกว้างเองตาม slidesPerView:6 */
@media (min-width: 1200px) {
  #podSection .pod-card,
  #newsSection .news-card {
    width: auto; /* ไม่ต้อง !important */
  }
}
#toolSection {
  padding-bottom: 10px;
}
.edge-swiper--scale {
  --hover-clearance: 20px;
  padding-top: var(--hover-clearance);
  margin-top: calc(var(--hover-clearance) * -1);
}
.tool-section .edge-swiper--scale {
  --hover-clearance: 20px;
}
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* hover zoom (เหมือน video/course: scale ที่ slide) */
@media (hover: hover) and (pointer: fine) {
  #toolSection .swiper {
    overflow: visible !important;
  }
  #toolSection .swiper-slide {
    position: relative;
    z-index: 1;
    transform-origin: center center;
    transition: transform 0.25s ease, z-index 0.25s ease;
    will-change: transform;
  }
  #toolSection .swiper-slide:hover {
    transform: scale(1.05);
    z-index: 50;
  }
}
/* ========================
   Desktop-only hover effects
   - show arrows
   - hover states
   - video/course zoom (slide scale)
   - media thumb zoom-in (clip in frame)
========================= */

@media (hover: hover) and (pointer: fine) {
  /* show arrows on hover */
  .swiper-shell:hover .swiper-button-prev,
  .swiper-shell:hover .swiper-button-next {
    opacity: 1 !important;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
  }
  .swiper-shell:hover .swiper-button-next.swiper-button-disabled,
  .swiper-shell:hover .swiper-button-prev.swiper-button-disabled {
    opacity: 0.35 !important;
    cursor: auto;
    pointer-events: none;
  }

  /* toplinks hover */
  .toplinks a:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
  }
  .topbar.is-scrolled .toplinks a:hover {
    background: rgba(17, 24, 39, 0.06);
  }

  /* cat hover */
  .cat-item:hover .cat-icon {
    background-color: rgba(255, 255, 255, 0.08);
  }
  .icon-btn:hover {
    background: rgba(255, 255, 255, 0.08);
  }
  a:hover .avatar {
    filter: brightness(1.1);
  }

  /* see-all hover */
  .see-all:hover {
    color: var(--hero-1);
  }

  /* course button hover */
  .course-card .btn:hover {
    filter: brightness(0.98);
  }

  /* lib cat hover */
  .lib-cat-item:hover .lib-cat-ico {
    background: transparent;
  }
  .lib-cat-item:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
  }

  /* ===== Video zoom (slide scale) ===== */
  #videoSection {
    padding-bottom: 10px;
  }
  #videoSection .swiper {
    overflow: visible !important;
  }
  #videoSection .swiper-slide {
    position: relative;
    z-index: 1;
    transform-origin: center center;
    transition: transform 0.25s ease, z-index 0.25s ease;
    will-change: transform;
  }
  #videoSection .swiper-slide:hover {
    transform: scale(1.05);
    z-index: 50;
  }

  /* ===== Course zoom (slide scale) ===== */

  #courseSection .swiper {
    overflow: visible !important;
  }
  #courseSection .swiper-slide {
    position: relative;
    z-index: 1;
    transform-origin: center center;
    transition: transform 0.25s ease, z-index 0.25s ease;
    will-change: transform;
  }
  #courseSection .swiper-slide:hover {
    transform: scale(1.05);
    z-index: 50;
  }

  /* ===== Media thumb zoom-in (ไม่ล้น) ===== */
  /* ทำเฟรมครอบรูป: ใช้ pseudo wrapper แบบไม่แก้ HTML */
  .media-card--big,
  .media-card--mid,
  .media-card--row,
  .pod-section .media-card {
    position: relative;
  }

  /* ซูมเฉพาะรูป + อยู่ในกรอบมุมมนเดิม */
  .media-card--big .media-thumb,
  .media-card--mid .media-thumb,
  .media-card--row .media-thumb,
  .pod-section .media-thumb {
    transition: transform 0.35s ease;
    will-change: transform;
    transform: translateZ(0);
  }

  .media-card--big:hover .media-thumb,
  .media-card--mid:hover .media-thumb,
  .media-card--row:hover .media-thumb,
  .pod-section .media-card:hover .media-thumb,
  .news-section .media-card:hover .media-thumb {
    transform: scale(1.05);
  }
  .media-card:hover .media-thumb {
    transform: scale(1.05);
  }
  a.cat-item:hover {
    color: inherit;
  }
  a:hover .media-title {
    color: var(--primary-temp);
  }
  .content-card:hover .content-title,
  a:hover .content-title {
    color: var(--primary-temp);
  }
  #courseSection .course-card:hover .fw-bold,
  a:hover .fw-bold {
    color: var(--primary-temp);
  }
  a:hover .tool-title {
    color: var(--primary-temp);
  }
}

/* =========================
   Touch devices (no hover tricks)
========================= */
@media (hover: none) and (pointer: coarse) {
  a:hover {
    color: inherit !important;
  }

  .lib-cat-item:link,
  .lib-cat-item:visited,
  .lib-cat-item:hover,
  .lib-cat-item:focus,
  .lib-cat-item:focus-visible,
  .lib-cat-item:active {
    color: var(--blue) !important;
    background: #fff;
    border-color: #e4e4e4;
  }
}

/* =========================
   videoSection
   ========================= */

/* มือถือ 2.5 ใบ/แถว */
#videoSection .video-swiper:not(.swiper-initialized) .content-card {
  width: calc((100% - 15px * 1) / 2.5);
  margin-right: 15px;
  flex: 0 0 auto;
}

/* 768px: 3.5 */
@media (min-width: 768px) {
  #videoSection .video-swiper:not(.swiper-initialized) .content-card {
    width: calc((100% - 15px * 2) / 3.5);
    margin-right: 15px;
  }
}

/* 992px: 4.5 */
@media (min-width: 992px) {
  #videoSection .video-swiper:not(.swiper-initialized) .content-card {
    width: calc((100% - 15px * 3) / 4.5);
    margin-right: 15px;
  }
}

/* 1200px: 6.5 */
@media (min-width: 1200px) {
  #videoSection .video-swiper:not(.swiper-initialized) .content-card {
    width: calc((100% - 15px * 5) / 6.5);
    margin-right: 15px;
  }
}

/* 1600px: 7.5 */
@media (min-width: 1600px) {
  #videoSection .video-swiper:not(.swiper-initialized) .content-card {
    width: calc((100% - 15px * 6) / 7.5);
    margin-right: 15px;
  }
}

/* 1920px: 8.5 */
@media (min-width: 1920px) {
  #videoSection .video-swiper:not(.swiper-initialized) .content-card {
    width: calc((100% - 15px * 7) / 8.5);
    margin-right: 15px;
  }
}

/* 2560px: 11.5 */
@media (min-width: 2560px) {
  #videoSection .video-swiper:not(.swiper-initialized) .content-card {
    width: calc((100% - 15px * 10) / 11.5);
    margin-right: 15px;
  }
}

/* =========================
   courseSection (ถ้าโครงเหมือน video)
   เปลี่ยน class .course-swiper ให้ตรงของคุณ
   ========================= */

/* มือถือ slidesPerView = 1.2 */
#courseSection .course-swiper:not(.swiper-initialized) .swiper-slide {
  width: calc((100% - 15px * 0.2) / 1.2);
  margin-right: 15px;
}

/* 768px slidesPerView = 2.2 */
@media (min-width: 768px) {
  #courseSection .course-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 1.2) / 2.2);
    margin-right: 15px;
  }
}

/* 992px slidesPerView = 3 */
@media (min-width: 992px) {
  #courseSection .course-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 2) / 3);
    margin-right: 15px;
  }
}

/* 1200px slidesPerView = 4 */
@media (min-width: 1200px) {
  #courseSection .course-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 3) / 4);
    margin-right: 15px;
  }
}

/* 1600px slidesPerView = 5.5 */
@media (min-width: 1600px) {
  #courseSection .course-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 4.5) / 5.5);
    margin-right: 15px;
  }
}

/* 1920px slidesPerView = 6.5 */
@media (min-width: 1920px) {
  #courseSection .course-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 5.5) / 6.5);
    margin-right: 15px;
  }
}

/* 2560px slidesPerView = 7.5 */
@media (min-width: 2560px) {
  #courseSection .course-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 6.5) / 7.5);
    margin-right: 15px;
  }
}

/* =========================
   Tool fallback ก่อน Swiper init
   ========================= */

/* มือถือ slidesPerView = 1.5 */
#toolSection .tool-swiper:not(.swiper-initialized) .swiper-slide {
  width: calc((100% - 15px * 0.5) / 1.5);
  margin-right: 15px;
}

/* 768px slidesPerView = 2.4 */
@media (min-width: 768px) {
  #toolSection .tool-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 1.4) / 2.4);
    margin-right: 15px;
  }
}

/* 992px slidesPerView = 3.5 */
@media (min-width: 992px) {
  #toolSection .tool-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 2.5) / 3.5);
    margin-right: 15px;
  }
}

/* 1200px slidesPerView = 5.1 */
@media (min-width: 1200px) {
  #toolSection .tool-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 4.1) / 5.1);
    margin-right: 15px;
  }
}

/* 1600px slidesPerView = 5.8 */
@media (min-width: 1600px) {
  #toolSection .tool-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 4.8) / 5.8);
    margin-right: 15px;
  }
}

/* 1920px slidesPerView = 6.8 */
@media (min-width: 1920px) {
  #toolSection .tool-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 5.8) / 6.8);
    margin-right: 15px;
  }
}

/* 2560px slidesPerView = 8.8 */
@media (min-width: 2560px) {
  #toolSection .tool-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 7.8) / 8.8);
    margin-right: 15px;
  }
}

/* =========================
   Pod fallback ก่อน Swiper init
   ========================= */
/* =========================
   Default (<1200): ตั้งค่า fallback ที่ไม่บวม
   (เลือก 2.5 ใบ/แถว)
   ========================= */
#podSection .pod-swiper:not(.swiper-initialized) .swiper-slide {
  width: calc((100% - 15px * 1) / 2.5);
  margin-right: 15px;
}

/* =========================
   >=1200: ตาม JS (slidesPerView = 6, spaceBetween = 15)
   ========================= */
@media (min-width: 1200px) {
  #podSection .pod-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 5) / 6);
    margin-right: 15px;
  }
}

/* =========================
   News fallback ก่อน Swiper init
   ========================= */
/* =========================
   Default (<1200): fallback กันบวม (2.5 ใบ/แถว)
   ========================= */
#newsSection .news-swiper:not(.swiper-initialized) .swiper-slide {
  width: calc((100% - 15px * 1) / 2.5);
  margin-right: 15px;
}

/* =========================
   >=1200: ตาม JS (slidesPerView = 6, spaceBetween = 15)
   ========================= */
@media (min-width: 1200px) {
  #newsSection .news-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 5) / 6);
    margin-right: 15px;
  }
}
/* /Home 2026 */

/* //////////////////////////////////////////////////////// VDO Wall /////////////////////////////////////////////////////////////// */
.vdo-wall-page {
  --vdo-wall-nav-h: 70px;
  --vdo-wall-bg: #101010;
  --vdo-wall-muted: #888888;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #fff;
  background: var(--vdo-wall-bg);
  font-family: var(--font-bettertogether-regular);
}

.vdo-wall-page > .topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: var(--vdo-wall-nav-h);
  box-sizing: border-box;
  background: #101010;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.vdo-wall-topnav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  width: 100%;
  height: var(--vdo-wall-nav-h);
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 50px;
  box-sizing: border-box;
  background: #101010;
}

.vdo-wall-brand {
  display: inline-flex;
  width: 161px;
  height: 24px;
  flex: 0 0 auto;
}

.vdo-wall-brand img {
  display: block;
  width: 100%;
  height: auto;
}

.vdo-wall-links {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
}

.vdo-wall-links a {
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  line-height: normal;
  padding: 8px 15px;
  border-radius: 999px;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s ease;
}

.vdo-wall-profile {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  margin-left: 15px;
  overflow: hidden;
  border-radius: 50%;
}

.vdo-wall-profile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vdo-wall-sound-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--vdo-wall-muted);
  background: transparent;
  cursor: pointer;
}

.vdo-wall-quick-actions {
  position: absolute;
  z-index: 20;
  top: 20px;
  right: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.vdo-wall-quick-action {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
}

.vdo-wall-quick-action img {
  display: block;
  width: 40px;
  height: 40px;
  transition: filter 0.2s ease;
}

.vdo-wall-quick-action--add {
  border: 1px solid var(--vdo-wall-muted);
}

.vdo-wall-quick-action--add img {
  width: 16px;
  height: 16px;
}

.vdo-wall-sound-icon {
  grid-area: 1 / 1;
  display: block;
  width: 40px;
  height: 40px;
}

.vdo-wall-sound-on,
.vdo-wall-sound-toggle:not(.is-muted) .vdo-wall-sound-off {
  display: none;
}

.vdo-wall-sound-toggle:not(.is-muted) .vdo-wall-sound-on {
  display: block;
}

.vdo-wall-feed {
  width: 100%;
  height: calc(100dvh - var(--vdo-wall-nav-h));
  margin-top: var(--vdo-wall-nav-h);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  background: var(--vdo-wall-bg);
}

.vdo-wall-feed::-webkit-scrollbar {
  display: none;
}

.vdo-wall-slide {
  height: calc(100dvh - var(--vdo-wall-nav-h));
  min-height: 560px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.vdo-wall-stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 150px 20px;
  box-sizing: border-box;
  cursor: pointer;
}

.vdo-wall-video-shell {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  border-radius: 0;
  background: #333;
}

@media (min-width: 992px) {
  .vdo-wall-video-shell {
    border-radius: 12px;
  }
}

/* GSchool compatibility: original rules used by EDU World CMS pages. */
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  --gutter-x: var(--page-header-padding-x);
}

.content {
  font-family: var(--font-bettertogether-regular);
  padding: var(--spacer) 20px;
  padding-bottom: 40px;
}

.w-20 {
  width: 20%;
}

.txt_suk_333_24 {
  font-family: var(--font-bettertogether-regular);
  color: #333;
  font-size: 24px;
  line-height: 34px;
}

.txt_suk_888_16 {
  font-family: var(--font-bettertogether-regular);
  color: #888;
  font-size: 16px;
  line-height: 24px;
}

.txt_suk_888_14 {
  font-family: var(--font-bettertogether-regular);
  color: #888 !important;
  font-size: 14px !important;
  line-height: 20px;
}

.txt_suk_temp_16 {
  font-family: var(--font-bettertogether-regular);
  color: var(--primary-temp);
  font-size: 16px;
  line-height: 24px;
}

.txt_888_16_m {
  color: #888888;
  font-family: var(--font-bettertogether-medium);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
}

.txt_888_16_r {
  color: #888888;
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
}

.txt_temp_16_r {
  color: var(--primary-temp);
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
}

.filter-label-nowrap {
  flex: 0 0 auto;
  white-space: nowrap;
}

.btn-icon-ccc,
.ic_search,
.ic_cross {
  color: #cccccc;
}

.text-muted {
  color: var(--icon-gray) !important;
  font-family: var(--font-bettertogether-regular);
}

.ic_hover_gray,
.datepicker-controls .btn.prev-btn,
.datepicker-controls .btn.next-btn {
  color: var(--gray-333);
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .ic_hover_gray:hover {
    fill: var(--primary-temp);
    color: var(--primary-temp);
  }

  /* Delete/trash buttons (aria-label="ลบ...") keep their normal white
     background on hover instead of Bootstrap's gray .btn-light hover fill -
     only the icon should turn primary-temp blue. */
  [aria-label^="ลบ"].ic_hover_gray:hover {
    background-color: #ffffff;
    border-color: #ececec;
  }
}

/* Global form controls: shared GSchool pattern */
.form-control {
  --input-border-color: var(--border-color);
  --input-placeholder-color: var(--gray-600);
  --input-focus-bg: var(--white);
  --input-disabled-bg: #fafafa;
  min-height: 40px;
  height: auto;
  padding: 6.35px 26px 2.35px 14px;
  border-radius: 10px;
  color: #333333;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;
  letter-spacing: 0;
}

.form-control:focus,
.form-control[readonly]:focus {
  border-color: var(--border-color);
}

textarea,
textarea.form-control,
input.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
[type="text"].form-control,
[type="password"].form-control,
[type="email"].form-control,
[type="tel"].form-control,
[contenteditable].form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
[type="text"].form-control,
[type="password"].form-control,
[type="email"].form-control,
[type="tel"].form-control {
  padding-left: 14px;
  padding-right: 14px;
}

.form-control:disabled {
  color: var(--input-disabled-color) !important;
  background-color: var(--input-disabled-bg);
  border-color: var(--input-disabled-border-color);
  opacity: 1;
  cursor: default;
}

.form-control.disabled {
  color: var(--input-disabled-color) !important;
  -webkit-text-fill-color: var(--input-disabled-color) !important;
  background-color: var(--input-disabled-bg);
  border-color: var(--input-disabled-border-color);
  opacity: 1;
  cursor: default;
  pointer-events: none;
}

.form-select {
  --form-select-bg-size: 16px 45px;
  --form-select-font-size: 16px;
  --form-select-line-height: 24px;
  --form-select-bg-position: right 0.575rem center;
  --form-select-indicator-padding: 1.625rem;
  min-height: 40px;
  max-width: 100%;
  padding: 6.35px 26px 2.35px 14px;
  overflow: hidden;
  background-image: url(../images/main/ic_arr_down.svg);
  background-position: var(--form-select-bg-position);
  background-size: var(--form-select-bg-size);
  color: #333333;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: var(--form-select-font-size);
  font-weight: 400;
  font-style: normal;
  line-height: var(--form-select-line-height);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.form-select:focus {
  border-color: var(--border-color);
}

.form-select:disabled {
  --form-select-disabled-bg: #fafafa;
  color: var(--input-disabled-color) !important;
  background-color: var(--form-select-disabled-bg);
  border-color: var(--input-disabled-border-color);
  cursor: default;
}

.form-select.disabled {
  --form-select-disabled-bg: #fafafa;
  color: var(--input-disabled-color) !important;
  background-color: var(--form-select-disabled-bg) !important;
  border-color: var(--input-disabled-border-color);
  cursor: default;
  pointer-events: none;
}

.form-control-feedback-start .form-control {
  padding-left: calc(var(--input-padding-x) * 2 + var(--icon-font-size));
}

.navbar-search .form-control {
  font-family: "Better Together", sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;
  letter-spacing: 0;
  vertical-align: middle;
  height: 40px;
  box-sizing: border-box;
  border-color: #e4e4e4;
}

.navbar-search .form-control-feedback-icon {
  top: 50%;
  transform: translateY(-50%);
}

.txt_suk_888_16 > .d-none.d-md-block .pe-2.text-nowrap,
.txt_suk_888_16 > .d-block.d-md-none .pe-2.text-nowrap {
  color: #888888;
  font-family: "Better Together", sans-serif;
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
  line-height: 24px;
  letter-spacing: 0;
  vertical-align: middle;
}

@media only screen and (max-width: 600px) {
  .hide-mobile {
    display: none;
  }
}

.form_mutiselect #multiselect-reset-form {
  line-height: 1;
}

.form_mutiselect .multiselect-container {
  width: 100%;
  min-width: 350px;
  max-height: 280px;
  overflow-y: auto;
  padding-top: 0;
}

.form_mutiselect .filter-groups-bullets {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #ffffff;
  background: var(--primary-temp);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

.form_mutiselect .form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 24px;
}

.form_mutiselect .form-check-input {
  position: static;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin: 0;
}

.form_mutiselect .form-check-label {
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
}

.form_mutiselect .multiselect-all,
.form_mutiselect .multiselect-all .form-check-label {
  font-weight: 400;
}

.hide-mobile .form_mutiselect .multiselect {
  padding: 0 5px 0 0;
  border: 0;
  cursor: pointer;
}

.form_mutiselect .multiselect::after {
  right: 0;
  color: #888888;
}

.form_mutiselect .multiselect .multiselect-selected-text {
  margin-left: 5px;
}

/* Target the combined class, not ".form_mutiselect .dropdown-menu" - this
   dropdown is Popper-positioned (position: absolute + transform, set by the
   multiselect plugin), so it gets appended outside the .form_mutiselect
   form in the DOM and an ancestor-scoped selector never matches it. */
.multiselect-container.dropdown-menu {
  z-index: 1010;
  overflow-x: auto;
  overflow-y: auto;
  padding-bottom: 10px;
  /* Chromium never clips a native/overlay scrollbar to the box's own
     border-radius (overflow + border-radius alone isn't enough - this is
     a long-standing Blink limitation), so the scrollbar paints past the
     rounded corners. clip-path is a compositor-level mask that clips
     everything painted in the box, scrollbar included; round it to match
     the dropdown's own border-radius so the two stay in sync. */
  clip-path: inset(0 round var(--dropdown-border-radius));
}

.multiselect-container.dropdown-menu::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

.multiselect-container.dropdown-menu::-webkit-scrollbar-button {
  display: none;
}

.multiselect-container.dropdown-menu::-webkit-scrollbar-track-piece {
  background: #cccccc;
}

.multiselect-container.dropdown-menu::-webkit-scrollbar-thumb {
  background: #888888;
}

.form_mutiselect .multiselect-filter {
  position: sticky;
  z-index: 2009;
  top: 0;
  left: 0;
  width: 100%;
  margin-bottom: 0;
  padding: 15px;
  background: #ffffff;
}

.form_mutiselect .multiselect-filter .form-control {
  padding-left: 2.5625rem;
}

.form_mutiselect .multiselect-search {
  height: 40px;
  min-height: 40px;
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.form_mutiselect .multiselect-filter .input-group .form-control {
  border-right-color: #ffffff !important;
}

.form_mutiselect .multiselect-filter .multiselect-clear-filter,
.form_mutiselect .multiselect-filter .input-group-append .btn {
  border-left-color: #ffffff !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
}

.form_mutiselect .multiselect-filter .multiselect-clear-filter.btn-icon-ccc {
  color: #cccccc !important;
  padding: 0 !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  border: 0 !important;
  border-left: 0 !important;
  outline: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
}

.form_mutiselect .multiselect-filter .multiselect-clear-filter.btn-icon-ccc,
.form_mutiselect .multiselect-filter .multiselect-clear-filter.btn-icon-ccc *,
.form_mutiselect .multiselect-filter .multiselect-clear-filter.btn-icon-ccc *::before,
.form_mutiselect .multiselect-filter .multiselect-clear-filter.btn-icon-ccc:hover,
.form_mutiselect .multiselect-filter .multiselect-clear-filter.btn-icon-ccc:hover *,
.form_mutiselect .multiselect-filter .multiselect-clear-filter.btn-icon-ccc:hover *::before,
.form_mutiselect .multiselect-filter .multiselect-clear-filter.btn-icon-ccc:focus-visible,
.form_mutiselect .multiselect-filter .multiselect-clear-filter.btn-icon-ccc:focus-visible *,
.form_mutiselect .multiselect-filter .multiselect-clear-filter.btn-icon-ccc:focus-visible *::before,
.form_mutiselect .multiselect-filter .multiselect-clear-filter.btn-icon-ccc:focus,
.form_mutiselect .multiselect-filter .multiselect-clear-filter.btn-icon-ccc:focus *,
.form_mutiselect .multiselect-filter .multiselect-clear-filter.btn-icon-ccc:focus *::before,
.form_mutiselect .multiselect-filter .multiselect-clear-filter.btn-icon-ccc:active,
.form_mutiselect .multiselect-filter .multiselect-clear-filter.btn-icon-ccc:active *,
.form_mutiselect .multiselect-filter .multiselect-clear-filter.btn-icon-ccc:active *::before {
  color: #cccccc !important;
  fill: #cccccc !important;
  stroke: #cccccc !important;
  -webkit-text-fill-color: #cccccc !important;
}

.form_mutiselect .multiselect-filter .multiselect-clear-filter.btn-icon-ccc i,
.form_mutiselect .multiselect-filter .multiselect-clear-filter.btn-icon-ccc i::before,
.multiselect-clear-filter i.ph-x {
  color: #cccccc;
  font-size: 16px;
  width: 16px !important;
  height: 16px !important;
  line-height: 16px !important;
}

.form_mutiselect .btn-light {
  --btn-color: #888888;
  --btn-bg: transparent;
  --btn-border-color: var(--border-color);
  --btn-hover-color: var(--primary-temp);
  --btn-hover-bg: transparent;
  --btn-hover-border-color: var(--gray-500);
  --btn-active-color: var(--body-color);
  --btn-active-bg: transparent;
  --btn-active-border-color: var(--border-color);
  --btn-active-shadow: inset 0 0 0 0 transparent;
  border-left: 2px solid #ffffff;
  font-family: var(--font-bettertogether-regular) !important;
  font-size: 18px !important;
  line-height: 28px !important;
}

.form_mutiselect .multiselect,
.form_mutiselect .multiselect .multiselect-selected-text {
  background-color: transparent !important;
  color: #888888;
  font-family: "Better Together", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400;
  font-style: normal;
  line-height: 24px !important;
  letter-spacing: 0;
  vertical-align: middle;
}

.form_mutiselect .btn:hover,
.form_mutiselect .btn:focus-visible,
.form_mutiselect .btn:focus-within {
  border-color: var(--border-color);
  border-left-color: #ffffff;
  outline: 0;
  color: var(--primary-temp) !important;
  background: transparent;
}

.form_mutiselect .btn-link {
  --btn-padding-y: 0rem;
  border: 0;
}

.form_mutiselect .dropdown-item {
  padding: 4.5px 15px;
  white-space: normal;
}

.form_mutiselect .dropdown-item.active,
.form_mutiselect .dropdown-item:active {
  color: #333333;
  background: #fafbfc;
}

.form_mutiselect .input-group-append .btn {
  padding-left: 0;
}

.plus-button,
.name-button {
  height: 40px;
  border: 1px solid #ececec;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
  padding: 0 10px;
  border-radius: 20px;
  max-width: 100%;
  color: var(--gray-888);
  -webkit-tap-highlight-color: transparent;
}

.plus-button {
  width: 40px;
}

.plus-button:active,
.plus-button.active,
.plus-button:focus {
  color: var(--gray-888) !important;
  background-color: white !important;
}

.plus-button img {
  width: 16px;
  height: 16px;
}

.bottomnav_mobile_wrapper {
  margin: 0 14px 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 50px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255, 255, 255, 0.65) inset;
}

.ic_bottomnav_mobile {
  width: 20px;
  height: 20px;
}

[class^="icon-"].ic_noti_menu_bottomnav {
  position: absolute;
  top: -10px !important;
  right: 10px;
  color: var(--primary-temp);
  font-size: 22px;
}

.txt_bottomnav_mobile {
  overflow: hidden;
  color: inherit;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  margin-top: 3px;
  text-overflow: clip;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

.menu_bottomnav_mobile {
  position: relative;
  padding: 0 5px;
  color: var(--primary-temp);
}

.menu_bottomnav_mobile a {
  color: inherit;
}

.menu_bottomnav_mobile:focus,
.menu_bottomnav_mobile.active,
.menu_bottomnav_mobile:focus a,
.menu_bottomnav_mobile.active a,
.menu_bottomnav_mobile.active .txt_bottomnav_mobile,
.menu_bottomnav_mobile.active .ic_bottomnav_mobile {
  color: var(--primary-temp) !important;
}

.menu_bottomnav_mobile a.disabled,
.menu_bottomnav_mobile a:disabled,
.menu_bottomnav_mobile .disabled,
.menu_bottomnav_mobile a[data-disabled="true"] {
  color: var(--primary-temp);
  filter: opacity(50%);
  pointer-events: none;
  cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine) {
  .menu_bottomnav_mobile:hover,
  .menu_bottomnav_mobile:hover a,
  .menu_bottomnav_mobile:hover .txt_bottomnav_mobile,
  .menu_bottomnav_mobile:hover .ic_bottomnav_mobile {
    color: var(--primary-temp);
  }
}

/* =========================
   TOP NAV - Dropdown (Profile)
========================= */
.dropdown-menu.dropdown-menu-end {
  right: 0px !important;
  left: auto !important;
}

.nav-item .dropdown-menu.dropdown-menu-end {
  right: 20px !important;
  left: auto !important;
}

.dropdown-menu-profile::before,
.dropdown-menu-profile::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 767.98px) {
  .cms-edu-topnav-profile .dropdown-menu-profile {
    display: none !important;
  }
}

.dropdown-menu-profile {
  width: 320px;
  border: 1px solid #e4e4e4;
  border-radius: 20px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.dropdown-menu-profile .dropdown-item {
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  line-height: 24px;
  color: #333333;
}

.txt_profiledropdown_head {
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
}

.txt_profiledropdown_title {
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  color: #888888;
}

.face-profile {
  border: 1px solid #e4e4e4;
  border-radius: 40px;
  vertical-align: middle !important;
  width: 80px;
  height: 80px;
  display: inline-block;
  overflow: hidden;
}

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

.topnav-profile {
  text-align: center;
  padding: 20px 0px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  scrollbar-color: #888888 transparent;
  scrollbar-width: thin;
}

.topnav-profile::-webkit-scrollbar {
  width: 4px;
}

.topnav-profile::-webkit-scrollbar-track {
  background: transparent;
}

.topnav-profile::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #888888;
}

@media (min-width: 992px) {
  .topnav-profile {
    max-height: calc(100vh - 80px);
  }
}

.topnav-profile .dropdown-item {
  padding: 5px 15px;
}

.topnav-profile .dropdown-item.title {
  color: #888888;
}

.topnav-profile .txt_changelang {
  color: #888888;
  font-family: var(--font-bettertogether-regular);
}

.dropdown-menu-profile header.dropdown-item {
  margin-top: 10px;
}

.btn-secondary.logout {
  background: #ffffff;
  color: #333333;
  border: 1px solid #e4e4e4 !important;
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}

@media (max-width: 991.98px) {
  .btn-secondary.logout:active,
  .btn-secondary.logout.active {
    background: #ffffff !important;
    color: #333333 !important;
    border-color: #e4e4e4 !important;
  }
}

.txt_termcond {
  font-family: var(--font-bettertogether-regular);
  font-style: normal;
  color: var(--body-color-gray);
  font-size: 1rem;
}

.txt_profile_version {
  font-family: var(--font-bettertogether-medium);
  font-style: normal;
  color: var(--body-color-gray);
  font-size: 1rem;
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .txt_termcond:hover {
    color: var(--primary-temp);
  }
  .dropdown-menu-profile .dropdown-item:hover,
  .dropdown-menu-profile .dropdown-item:focus,
  .dropdown-menu-profile .dropdown-item:hover .txt_changelang,
  .dropdown-menu-profile .dropdown-item:focus .txt_changelang {
    background: #fafbfc;
    color: var(--primary-temp);
  }
  .dropdown-menu-profile header.dropdown-item:hover {
    color: #888888;
    background: #ffffff;
  }
  .btn-secondary.logout:hover {
    background: var(--primary-temp);
    color: #ffffff;
    border-color: var(--primary-temp) !important;
  }
  a.face-profile:hover {
    filter: brightness(1.1);
  }
  .language-option:hover {
    background: #fafbfc;
  }
}

.language-setting {
  position: relative;
}

.language-popup {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1080;
  display: none;
  min-width: 100px;
  padding: 10px 0;
  overflow: hidden;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: var(--box-shadow);
}

.language-popup.show {
  display: block;
}

.language-option {
  display: block;
  padding: 5px 15px;
  background: transparent;
  color: #333333;
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  line-height: 24px;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}

.language-option.active {
  color: var(--primary-temp);
}

/* EDU World CMS components layered on top of the GSchool compatibility rules. */
:root {
  --edu-primary: #0060d2;
  --edu-text: #333333;
  --edu-font-regular: "BetterTogether-Regular", sans-serif;
  --edu-font-medium: "BetterTogether-Medium", sans-serif;
}

.txt_temp_24_m {
  color: var(--edu-primary);
  font-family: var(--edu-font-medium);
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: 0;
  vertical-align: middle;
}

.cms-short-page-header .page-header-content {
  height: 58px;
  display: flex;
  align-items: center;
  padding-inline: 20px;
}

.cms-short-page-header .txt_temp_24_m {
  margin: 0;
}

.cms-videos-list-heading {
  color: #333333;
  font-family: "Better Together", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0;
  vertical-align: middle;
}

/* =========================
   CMS: generic "Back" link (drill-down detail pages)
========================= */
.cms-back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: #888888;
  font-family: var(--font-bettertogether-regular);
  font-size: 18px;
  line-height: 28px;
  text-decoration: none;
}
.cms-back-link i {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #888888;
  border-radius: 50%;
  font-size: 20px;
  color: #888888;
}
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .cms-back-link:hover,
  .cms-back-link:hover i {
    color: var(--primary-temp);
    border-color: var(--primary-temp);
  }
}

/* =========================
   CMS: breadcrumb trail (drill-down detail pages)
========================= */
.cms-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  color: #888888;
  font-family: var(--font-bettertogether-regular);
  font-size: 14px;
  line-height: 20px;
}
.cms-breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.cms-breadcrumb i {
  font-size: 12px;
}
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .cms-breadcrumb a:hover {
    color: var(--primary-temp);
  }
}

/* =========================
   CMS: Category list rows (reuses .card-catalog-media-row tokens)
========================= */
.cms-category-list {
  display: grid;
  gap: 10px;
}
.cms-category-row.is-menu-open {
  z-index: 20;
}
.cms-category-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 0 4px 0 20px;
  background: #ffffff;
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  box-shadow: 0 0 10px 0 #0000001a;
}
.cms-category-row-name {
  min-width: 0;
  overflow: hidden;
  color: #333333;
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================
   CMS: Library content page (Attachment rows + Pages tree)
========================= */
.cms-library-content-fields > * + * {
  margin-top: 10px;
}

.cms-library-attachment-type {
  min-width: 0;
  overflow: hidden;
  color: #888888;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 14px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Attachment rows with no real thumbnail reuse the short-video "no cover"
   placeholder-icon convention (videos_cms_videos.html) - each icon keeps its
   own natural aspect ratio instead of the video-camera icon's fixed box. */
.cms-short-video-placeholder-icon[src*="/external-link-thin.svg"] {
  width: 24px;
  height: 24px;
}

.cms-short-video-placeholder-icon[src*="/iframe-thin.svg"] {
  width: 24px;
  height: 18px;
}

.cms-short-video-placeholder-icon[src*="/file-thin.svg"] {
  width: 24px;
  height: 30px;
}

.cms-library-pages-field {
  margin-top: 20px;
}

.cms-library-pages-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cms-library-page-tree {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cms-library-page-tree--nested {
  padding-left: 18px;
}

.cms-library-page-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
}

.cms-library-page-name {
  min-width: 0;
  overflow: hidden;
  color: #333333;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 16px;
  line-height: 24px;
  text-overflow: ellipsis;
  text-decoration: none;
  white-space: nowrap;
  cursor: default;
}

.cms-library-page-name--root {
  font-family: var(--font-bettertogether-medium), sans-serif;
  font-weight: 500;
}

.cms-library-page-name--leaf::before {
  content: "• ";
}

.cms-library-page-actions {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* All rows' .cms-library-page-actions share the same z-index:2, so paint
   order falls back to DOM order - a row further down the tree would paint
   its own +/... icons on top of an EARLIER row's open dropdown-menu. Lift
   whichever row's dropdown is actually open above that shared baseline. */
.cms-library-page-actions:has(.dropdown-menu.show) {
  z-index: 3;
}

/* The "..." button sits inside its own .dropdown wrapper (for the Bootstrap
   menu), so align-items:center above only centers that wrapper, not the
   button inside it - re-center here so it lines up with the name and the
   plain "+" button, which are direct flex children. */
.cms-library-page-actions .dropdown {
  display: inline-flex;
  align-items: center;
}

.cms-library-page-add,
.cms-library-page-more {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #cccccc;
  font-size: 14px;
  line-height: 20px;
}

.cms-library-page-more.dropdown-toggle::after {
  display: none;
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .cms-library-page-add:hover,
  .cms-library-page-more:hover {
    color: var(--primary-temp);
  }

  .cms-library-page-row:hover .cms-library-page-name {
    color: var(--primary-temp);
  }

  .cms-library-page-name:hover {
    cursor: pointer;
  }
}

/* Center the single save button for compact form modals (e.g. category add/edit). */
.cms-modal-footer-center {
  justify-content: center;
}

.library-resource-tabs.cms-short-tabs {
  padding-top: 0;
}

.cms-short-tabs-shell {
  padding-inline: 20px;
}

.cms-short-tabs-shell .border-bottom {
  border-bottom-color: #e4e4e4 !important;
}

@media (max-width: 991.98px) {
  .cms-short-tabs-shell {
    padding-inline: 0;
  }

  .library-resource-tabs.cms-short-tabs {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }
}

.cms-edu-topnav {
  min-height: 70px;
  height: 70px;
  padding: 0 60px;
  padding-inline: 20px;
  border-color: #ececec !important;
  background: #ffffff;
}

.cms-edu-topnav > .container-fluid {
  height: 100%;
  padding: 0;
}

.cms-edu-topnav .navbar-brand {
  margin: 0;
  padding: 0;
}

.cms-edu-topnav .navbar-brand img {
  /* display: block; */
  /* width: 161px; */
  /* height: 24px; */
  /* max-height: none; */
}

/* Cancel assets/css/all.min.css's forced height on .navbar-brand img
   (vendor file, not hand-edited) so the logo renders at its natural size. */
.navbar-brand img {
  /* height: var(--navbar-brand-image-size); */
  height: auto;
}

.cms-edu-topnav-links {
  align-items: center;
  margin-left: auto;
}

.cms-edu-topnav-links .navbar-nav-link {
  min-height: 70px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  color: var(--edu-text);
  background: transparent;
  font-family: var(--edu-font-regular);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
}

.cms-edu-topnav-profile {
  margin-left: 15px;
}

/* Keep the profile avatar vertically centered in any .topbar, on every page. */
.topbar .topnav-profile {
  padding: 20px 0;
  text-align: center;
}
.topbar .cms-edu-topnav-profile {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
}
.topbar .cms-edu-topnav-profile > .avatar-link {
  margin-left: 0;
}

.cms-edu-topnav-profile > .navbar-nav-link {
  min-height: auto;
  padding: 0;
}

.cms-edu-topnav-profile > .navbar-nav-link img {
  display: block;
  width: 32px;
  height: 32px;
}

.cms-edu-topnav .cms-edu-topnav-links .navbar-nav-link:hover,
.cms-edu-topnav .cms-edu-topnav-links .navbar-nav-link:focus-visible,
.cms-edu-topnav .cms-edu-topnav-links .navbar-nav-link:active {
  color: var(--edu-primary) !important;
  background: transparent !important;
}

/* Sidebar keeps the original GSchool structure and collapse behaviour. */
.sidebar {
  --sidebar-section-padding-y: 0.313rem;
  --sidebar-section-padding-x: 0.938rem;
  --sidebar-width: 14.95rem;
}

@media (min-width: 992px) {
  .sidebar-expand-lg.sidebar-main-resized:not(.sidebar-collapsed):not(.sidebar-main-unfold) {
    --sidebar-width: calc(var(--spacer) * 2 + var(--icon-font-size));
    --sidebar-section-padding-x: 0.5rem;
    overflow: hidden;
  }
}

.sidebar-main .sidebar-content {
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sidebar-main .sidebar-content::-webkit-scrollbar,
.sidebar-main .sidebar-content::-webkit-scrollbar-track,
.sidebar-main .sidebar-content::-webkit-scrollbar-thumb {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}

.cms-edu-sidebar .nav-sidebar {
  margin-inline: 0;
}

.cms-edu-sidebar .nav-sidebar .nav-link {
  width: calc(100% - 20px);
  min-height: 30px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  justify-content: start;
  column-gap: 8px;
  margin: 0 10px !important;
  padding: 0 5px !important;
  color: var(--edu-text);
  font-family: var(--edu-font-regular);
  font-size: 14px;
  line-height: 20px;
}

.cms-edu-sidebar .nav-sidebar .nav-link > span {
  min-width: 0;
  margin-left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cms-edu-sidebar-icon {
  display: block;
  flex: 0 0 auto;
  justify-self: center;
  margin-right: 0 !important;
  object-fit: contain;
  filter: grayscale(1) brightness(0.22);
  transition: filter 0.2s ease;
}

.cms-edu-sidebar-icon[src*="/home.svg"] {
  width: 15.14px;
  height: 15.56px;
}
.cms-edu-sidebar-icon[src*="/courses.svg"] {
  width: 20px;
  height: 14px;
}
.cms-edu-sidebar-icon[src*="/mycourse.svg"] {
  width: 18px;
  height: 13px;
}
.cms-edu-sidebar-icon[src*="/bookmarks.svg"] {
  width: 12px;
  height: 16px;
}
.cms-edu-sidebar-icon[src*="/users.svg"] {
  width: 18px;
  height: 15px;
}
.cms-edu-sidebar-icon[src*="/settings.svg"] {
  width: 18px;
  height: 17.22px;
}
.cms-edu-sidebar-icon[src*="/groups.svg"] {
  width: 18px;
  height: 11.29px;
}
.cms-edu-sidebar-icon[src*="/short-video.svg"] {
  width: 16px;
  height: 22px;
}
.cms-edu-sidebar-icon[src*="/video.svg"] {
  width: 20px;
  height: 20px;
}
.cms-edu-sidebar-icon[src*="/library.svg"] {
  width: 14.4px;
  height: 18px;
}
.cms-edu-sidebar-icon[src*="/card.svg"] {
  width: 20px;
  height: 12px;
}

.cms-edu-sidebar .nav-sidebar .nav-link.active,
.cms-edu-sidebar .nav-sidebar .nav-link.active > span {
  color: var(--edu-primary) !important;
}

.cms-edu-sidebar .nav-sidebar .nav-link.active {
  background: #f2f4f6 !important;
  border-radius: 10px;
}

.cms-edu-sidebar .nav-sidebar .nav-link.active .cms-edu-sidebar-icon {
  filter: brightness(0) saturate(100%) invert(27%) sepia(92%) saturate(2012%) hue-rotate(198deg) brightness(89%) contrast(101%);
}

@media (max-width: 1199.98px) and (min-width: 992px) {
  .cms-edu-topnav {
    padding-inline: 30px;
  }

  .cms-edu-topnav-links .navbar-nav-link {
    padding-inline: 8px;
  }
}

@media (max-width: 991.98px) {
  .cms-edu-topnav {
    padding-inline: 20px;
  }

  .cms-edu-topnav-links > .nav-item:not(.cms-edu-topnav-profile) {
    display: none !important;
  }

  .cms-edu-topnav-profile {
    margin-left: auto;
  }
}

@media (min-width: 992px) {
  .cms-edu-sidebar.sidebar-main-resized:not(.sidebar-collapsed) {
    --sidebar-width: 50px;
    --sidebar-section-padding-x: 0.5rem;
  }

  /* Vendor CSS paints a drop shadow on the right edge whenever
     .sidebar-main-unfold is present (see all.min.css). We keep that class
     around for other vendor bookkeeping but never want the shadow. */
  .cms-edu-sidebar.sidebar-main-resized:not(.sidebar-collapsed).sidebar-main-unfold {
    --sidebar-box-shadow: none !important;
  }

  /* Match the original CMS sidebar's gradual expand/collapse motion. */
  .cms-edu-sidebar {
    left: 0;
    transition: width 0.2s ease;
  }

  /* The vendor sidebar framework pulls the sidebar out of the .page-content
     flex layout (position:absolute) the instant it's collapsed, with
     transition:none on top. That makes .content-wrapper's flex:1 snap to
     full width immediately, then get yanked back by the separately-animated
     margin-left compensation -- read as content sliding the wrong way.
     Keep the sidebar a normal in-flow flex item in both states so
     .content-wrapper reflows continuously in lockstep with the sidebar's
     own width transition, with no margin-left compensation needed at all. */
  .cms-edu-sidebar.sidebar-expand-lg.sidebar-main-resized:not(.sidebar-collapsed) {
    position: static;
    transition: width 0.2s ease;
  }

  .page-content > .cms-edu-sidebar.sidebar-expand-lg.sidebar-main-resized:not(.sidebar-collapsed) + .content-wrapper {
    margin-left: 0;
  }

  .cms-edu-sidebar.sidebar-main-resized:not(.sidebar-collapsed) .sidebar-content .nav-sidebar .nav-link {
    width: 30px;
    grid-template-columns: 20px;
    column-gap: 0;
    justify-content: start;
    margin: 0 10px !important;
    padding: 0 5px !important;
    overflow: hidden;
  }

  .cms-edu-sidebar.sidebar-main-resized:not(.sidebar-collapsed) .sidebar-content .nav-sidebar .nav-link > span {
    display: none;
  }
}

.cms-edu-sidebar + .content-wrapper {
  background: linear-gradient(180deg, #e6f2ff 0%, #ffffff 100%);
  border-top-left-radius: 20px;
}

@media (max-width: 991.98px) {
  .cms-edu-sidebar + .content-wrapper {
    border-top-left-radius: 0;
  }
}

.cms-edu-sidebar {
  border-right: 0;
}

.cms-edu-sidebar #toggle-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  margin-right: 2px;
}

/* CMS sidebar: keep the hamburger aligned with the menu icons and make its
   whole row clickable in both collapsed and expanded sidebar states. */
.cms-edu-sidebar .sidebar-content > .sidebar-section:first-child .sidebar-section-body {
  padding-inline: 0;
}

.cms-edu-sidebar .sidebar-content > .sidebar-section:first-child .sidebar-section-body > div:last-child {
  width: 100%;
}

.cms-edu-sidebar #toggle-btn {
  width: calc(100% - 20px);
  margin: 0 10px;
  padding: 0 7px;
  justify-content: flex-start;
}

.cms-edu-sidebar .sidebar-content > .sidebar-section:first-child .sidebar-section-body {
  padding-bottom: 0;
}

.cms-edu-sidebar .sidebar-content > .sidebar-section:first-child + .sidebar-section .nav-item:first-child {
  padding-top: 1px;
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .cms-edu-sidebar .nav-sidebar .nav-link:hover,
  .cms-edu-sidebar .nav-sidebar .nav-link:focus-visible {
    color: var(--edu-primary) !important;
    background: #f2f4f6 !important;
    border-radius: 10px;
  }

  .cms-edu-sidebar #toggle-btn:hover {
    background: #f2f4f6 !important;
    border-radius: 10px;
  }

  .cms-edu-sidebar .nav-sidebar .nav-link:hover > span,
  .cms-edu-sidebar .nav-sidebar .nav-link:focus-visible > span {
    color: var(--edu-primary) !important;
  }

  .cms-edu-sidebar .nav-sidebar .nav-link:hover .cms-edu-sidebar-icon,
  .cms-edu-sidebar .nav-sidebar .nav-link:focus-visible .cms-edu-sidebar-icon {
    filter: brightness(0) saturate(100%) invert(27%) sepia(92%) saturate(2012%) hue-rotate(198deg) brightness(89%) contrast(101%);
  }
}

.vdo-wall-video {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: inherit;
  background: #333;
  object-fit: contain;
}

.video-js.vdo-wall-video .vjs-tech,
.video-js.vdo-wall-video .vjs-poster img {
  border-radius: inherit;
  object-fit: inherit;
}

.video-js.vdo-wall-video .vjs-big-play-button {
  display: none;
}

.vdo-wall-page .vjs-picture-in-picture-control {
  display: none !important;
}

.video-js .vjs-control-bar {
  background-color: #2b333f10;
}

.vdo-wall-slide:not(.is-paused) .video-js.vdo-wall-video .vjs-control-bar {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.vdo-wall-slide.is-paused .video-js.vdo-wall-video .vjs-control-bar {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.vdo-wall-slide.is-paused .video-js.vdo-wall-video {
  z-index: 6;
}

.vdo-wall-slide[data-orientation="portrait"] .vdo-wall-video-shell {
  width: auto;
  height: min(100%, 177.777vw);
  aspect-ratio: 9 / 16;
}

.vdo-wall-slide[data-orientation="portrait"] .vdo-wall-video {
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

.vdo-wall-slide[data-orientation="landscape"] .vdo-wall-video-shell {
  width: min(920px, 100%);
  height: auto;
  aspect-ratio: 16 / 9;
}

.vdo-wall-slide[data-orientation="landscape"] .vdo-wall-video {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.vdo-wall-play-state {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--vdo-wall-muted);
  border-radius: 50%;
  color: var(--vdo-wall-muted);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.88);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.vdo-wall-play-glyph {
  position: relative;
  width: 22px;
  height: 30px;
  margin-left: 6px;
  border-left: 1.5px solid currentColor;
  box-sizing: border-box;
}

.vdo-wall-play-glyph::before,
.vdo-wall-play-glyph::after {
  content: "";
  position: absolute;
  left: -1px;
  width: 26px;
  border-top: 1.5px solid currentColor;
  transform-origin: left center;
}

.vdo-wall-play-glyph::before {
  top: 0;
  transform: rotate(35deg);
}

.vdo-wall-play-glyph::after {
  bottom: 0;
  transform: rotate(-35deg);
}

.vdo-wall-play-state--custom-icon {
  border: none;
}

.vdo-wall-play-state--custom-icon .vdo-wall-play-icon {
  width: 80px;
  height: 80px;
}

.vdo-wall-slide.is-paused .vdo-wall-play-state {
  z-index: 7;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
  cursor: pointer;
}

.vdo-wall-meta {
  position: absolute;
  z-index: 5;
  left: 50px;
  bottom: 22px;
  width: min(590px, calc(100% - 280px));
  box-sizing: border-box;
  isolation: isolate;
  color: #fff;
  cursor: default;
}

/* Bleeds the overlay full-width (edge to edge of the stage, well past the
   meta text box) instead of just a narrow box hugging the caption -- matches
   the same left-offset + 100vw bleed technique the mobile breakpoint already
   uses. .vdo-wall-meta sits at left:50px within .vdo-wall-stage, so left:
   -50px cancels that back to the stage's own left edge; any extra bleed past
   the actual (often narrower, centered) video is harmless since it lands on
   .vdo-wall-page's own near-black background and is clipped by its
   overflow:hidden. */
.vdo-wall-meta::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -16px;
  bottom: -16px;
  left: -50px;
  width: 100vw;
  background: transparent;
  transition: background 0.25s ease;
}

.vdo-wall-slide.is-description-expanded .vdo-wall-meta::before {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
}

.vdo-wall-slide.is-paused .vdo-wall-meta {
  pointer-events: none;
}

.vdo-wall-channel {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  color: #cccccc;
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;
  letter-spacing: 0;
}

.vdo-wall-channel img {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}

.vdo-wall-description {
  position: relative;
  display: flex;
  align-items: baseline;
  max-height: 24px;
  overflow: hidden;
  color: #cccccc;
  font-size: 16px;
  line-height: 24px;
  transition: max-height 0.25s ease;
}

.vdo-wall-description-preview,
.vdo-wall-description-full {
  display: inline;
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.vdo-wall-description-preview {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.vdo-wall-description-ellipsis,
.vdo-wall-more {
  flex: 0 0 auto;
}

.vdo-wall-description-full {
  display: none;
}

.vdo-wall-slide.is-description-expanded .vdo-wall-description-preview {
  display: none;
}

.vdo-wall-slide.is-description-expanded .vdo-wall-description-ellipsis {
  display: none;
}

.vdo-wall-slide.is-description-expanded .vdo-wall-description-full {
  display: inline;
}

.vdo-wall-slide.is-description-expanded .vdo-wall-description {
  display: block;
}

.vdo-wall-slide.is-description-expanded .vdo-wall-description {
  max-height: 196px;
}

.vdo-wall-more {
  display: block;
  margin-top: 4px;
  padding: 0;
  border: 0;
  color: #cccccc;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.vdo-wall-actions {
  position: absolute;
  z-index: 20;
  right: 50px;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  transform: translateY(-35%);
  cursor: default;
}

.vdo-action {
  --icon-font-size: 24px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--vdo-wall-muted);
  border-radius: 50%;
  color: var(--vdo-wall-muted);
  background: transparent;
  font-size: 24px;
  line-height: 34px;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}

.vdo-action i {
  min-width: 0;
  vertical-align: middle;
}

.vdo-share-outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--vdo-wall-muted);
}

.vdo-action-count {
  margin-top: -8px;
  margin-bottom: 2px;
  color: var(--vdo-wall-muted);
  font-size: 14px;
  line-height: 20px;
}

.vdo-action.is-active {
  color: var(--primary-temp);
  border-color: var(--primary-temp);
}

.vdo-search-layer {
  position: fixed;
  z-index: 3000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  pointer-events: none;
}

.vdo-search-layer[hidden] {
  display: none;
}

.vdo-search-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.vdo-search-panel {
  position: relative;
  z-index: 1;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid #353535;
  border-radius: 16px;
  color: #fff;
  background: #2b2b2b;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: auto;
}

.vdo-search-layer.is-open {
  pointer-events: auto;
}

.vdo-search-layer.is-open .vdo-search-backdrop,
.vdo-search-layer.is-open .vdo-search-panel {
  opacity: 1;
}

.vdo-search-layer.is-open .vdo-search-panel {
  transform: translateY(0);
}

.vdo-search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.vdo-search-head h2 {
  margin: 0;
  color: #fff;
  font-family: var(--font-bettertogether-medium);
  font-size: 22px;
  line-height: 1;
}

.vdo-search-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: transparent;
  font-size: 20px;
  font-weight: 400;
  cursor: pointer;
}

.vdo-search-close .ph-x:before {
  content: "\f642";
}

.vdo-search-clear {
  display: grid;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  place-items: center;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  cursor: pointer;
}

.vdo-search-clear .ph-x:before {
  content: "\f642";
}

.vdo-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #353535;
  border-radius: 999px;
  color: #aaa;
  background: #282828;
}

.vdo-search-input-wrap i {
  font-size: 20px;
}

.vdo-search-input-wrap input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0;
  border: 0;
  outline: 0;
  color: #eee;
  background: transparent;
  font-family: var(--font-bettertogether);
  font-size: 16px;
  line-height: 24px;
}

.vdo-search-input-wrap input::placeholder {
  color: #888;
}

.vdo-search-input-wrap:focus-within {
  border-color: #353535;
  box-shadow: none;
}

.vdo-more-layer[hidden],
.vdo-wall-toast[hidden] {
  display: none !important;
}

.vdo-more-layer {
  position: fixed;
  inset: 0;
  z-index: 3000;
}

.vdo-more-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.vdo-more-menu {
  position: fixed;
  left: var(--menu-left, auto);
  top: var(--menu-top, auto);
  width: 286px;
  overflow: hidden;
  border: 1px solid #353535;
  border-radius: 16px;
  color: #fff;
  background: #202020;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.vdo-more-layer.is-open .vdo-more-backdrop,
.vdo-more-layer.is-open .vdo-more-menu {
  opacity: 1;
}

.vdo-more-layer.is-open .vdo-more-menu {
  transform: translateY(0) scale(1);
}

.vdo-more-handle {
  display: none;
}

.vdo-more-view {
  padding: 10px;
}

.vdo-more-view[hidden] {
  display: none;
}

.vdo-more-title {
  margin: 0;
  padding: 10px 12px 8px;
  color: #fff;
  font-family: var(--font-bettertogether-medium);
  font-size: 18px;
  line-height: 28px;
}

.vdo-more-option {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  color: #eee;
  background: transparent;
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  line-height: 24px;
  text-align: left;
  cursor: pointer;
}

.vdo-more-option i {
  width: 20px;
  color: var(--vdo-wall-muted);
  font-size: 18px;
  line-height: 28px;
  text-align: center;
}

.vdo-more-cancel {
  justify-content: center;
  margin-top: 6px;
  border-top: 1px solid #353535;
  border-radius: 0;
  color: #aaa;
  text-align: center;
}

.vdo-report-head {
  display: flex;
  align-items: center;
}

.vdo-report-back {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--vdo-wall-muted);
  background: transparent;
  cursor: pointer;
}

.vdo-wall-toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 4000;
  max-width: calc(100% - 32px);
  padding: 11px 18px;
  border-radius: 999px;
  color: #fff;
  background: #282828;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  font-size: 16px;
  line-height: 24px;
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.vdo-wall-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (hover: hover) and (pointer: fine) {
  .vdo-more-option:hover,
  .vdo-report-back:hover {
    color: var(--primary-temp);
    background: rgba(0, 96, 210, 0.12);
  }

  .vdo-more-option:hover i {
    color: var(--primary-temp);
  }
}

@media (hover: hover) and (pointer: fine) {
  .vdo-wall-links a:hover,
  .vdo-action:hover,
  .vdo-wall-more:hover {
    color: var(--primary-temp);
  }

  .vdo-action:hover {
    border-color: var(--primary-temp);
    background: rgba(0, 96, 210, 0.12);
  }

  .vdo-action:hover .vdo-share-outline {
    -webkit-text-stroke-color: var(--primary-temp);
  }

  .vdo-search-close:hover,
  .vdo-search-clear:hover {
    color: #fff;
    background: transparent;
  }

  .vdo-wall-sound-toggle:hover img,
  .vdo-wall-quick-action:hover img {
    filter: brightness(0) saturate(100%) invert(25%) sepia(98%) saturate(3003%) hue-rotate(201deg) brightness(88%) contrast(101%);
  }

  .vdo-wall-quick-action--add:hover {
    border-color: var(--primary-temp);
    background: rgba(0, 96, 210, 0.12);
  }
}

@media (max-width: 991.98px) {
  .vdo-wall-page {
    --vdo-wall-nav-h: 0px;
  }

  .vdo-wall-page > .topbar {
    display: none;
  }

  .vdo-wall-quick-actions {
    top: 20px;
    right: 16px;
    gap: 10px;
  }

  .vdo-search-layer {
    align-items: center;
    padding: 20px;
  }

  .vdo-search-panel {
    width: min(360px, calc(100vw - 40px));
    max-height: calc(100dvh - 40px);
    padding: 20px;
    border-radius: 16px;
    transform: translateY(-8px);
  }

  .vdo-wall-topnav {
    padding: 0 20px;
  }

  .vdo-wall-brand {
    width: 161px;
  }

  .vdo-wall-links {
    display: none;
  }

  .vdo-wall-profile {
    margin-left: auto;
  }

  .vdo-wall-stage {
    padding: 0;
  }

  .vdo-wall-video-shell,
  .vdo-wall-video {
    border-radius: 0;
  }

  .video-js.vdo-wall-video .vjs-poster {
    overflow: hidden;
    border-radius: 0;
  }

  .video-js.vdo-wall-video .vjs-poster img {
    border-radius: 0;
  }

  .vdo-wall-slide[data-orientation="portrait"] .vdo-wall-video-shell {
    height: min(100%, 177.777vw);
  }

  .vdo-wall-slide[data-orientation="landscape"] .vdo-wall-video-shell {
    width: 100%;
    max-width: 920px;
    border-radius: 0;
  }

  /* lift the paused-state control bar above the fixed floating bottom-nav,
     using the same clearance (nav height + safe-area + pill margin) that
     .vdo-wall-meta already clears it by -- portrait only: a landscape
     shell is height:auto/aspect-ratio 16:9, so it's shorter than the
     viewport and already sits well clear of the bottom-nav on its own;
     applying this offset there would shove the bar up into the letterboxed
     black bars instead of keeping it docked to the video's own bottom edge */
  .vdo-wall-slide[data-orientation="portrait"].is-paused .video-js.vdo-wall-video .vjs-control-bar {
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 12px);
  }

  .vdo-wall-meta {
    left: 20px;
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 12px);
    width: calc(100% - 96px);
    padding: 10px 20px;
    border-radius: 10px;
    isolation: isolate;
    background: transparent;
  }

  /* portrait's control bar is lifted above the bottom-nav (see above), so the
     caption needs to clear that same control bar too, not just the nav */
  .vdo-wall-slide[data-orientation="portrait"] .vdo-wall-meta {
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 12px + 20px);
  }

  .vdo-wall-meta::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: calc(0px - var(--nav-h) - env(safe-area-inset-bottom, 0px) - 12px);
    left: -20px;
    width: 100vw;
    background: transparent;
    transition: background 0.25s ease;
  }

  /* expanded caption text needs a backdrop to stay readable over busy video frames */
  .vdo-wall-slide.is-description-expanded .vdo-wall-meta::before {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
  }

  .vdo-wall-channel {
    font-size: 16px;
    line-height: 24px;
  }

  .vdo-wall-channel img {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .vdo-wall-description {
    font-size: 16px;
    line-height: 24px;
    max-height: 24px;
  }

  .vdo-wall-slide.is-description-expanded .vdo-wall-description {
    max-height: none;
  }

  .vdo-wall-actions {
    right: 16px;
    top: auto;
    bottom: 92px;
    gap: 10px;
    transform: none;
  }

  .vdo-action {
    width: 40px;
    height: 40px;
    color: var(--vdo-wall-muted);
    border-color: var(--vdo-wall-muted);
    background: transparent;
  }

  .vdo-share-outline {
    -webkit-text-stroke-color: var(--vdo-wall-muted);
  }

  .has-vdo-menu-open {
    overflow: hidden;
  }

  .vdo-more-menu {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 22px 22px 0 0;
    transform: translateY(100%);
  }

  .vdo-more-layer.is-open .vdo-more-menu {
    transform: translateY(0);
  }

  .vdo-more-handle {
    width: 42px;
    height: 4px;
    display: block;
    margin: 9px auto 2px;
    border-radius: 999px;
    background: #666;
  }

  .vdo-more-view {
    padding: 4px 12px 8px;
  }

  .vdo-more-option {
    min-height: 52px;
  }
}

@media (max-width: 575.98px) {
  .vdo-wall-topnav {
    padding: 0 20px;
  }

  .vdo-wall-brand {
    width: 161px;
  }

  .vdo-wall-profile {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .vdo-wall-slide {
    min-height: 500px;
  }

  .vdo-wall-video-shell,
  .vdo-wall-video {
    border-radius: 0;
  }

  .vdo-wall-meta {
    left: 0;
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 12px);
    width: calc(100% - 72px);
    border-radius: 0;
  }

  .vdo-wall-meta::before {
    left: 0;
  }

  .vdo-wall-actions {
    right: 16px;
  }

  .vdo-wall-page .bottom-nav .menu_bottomnav_mobile {
    width: 20%;
    min-width: 0;
    flex: 0 0 20%;
    box-sizing: border-box;
  }

  .vdo-wall-play-state {
    width: 80px;
    height: 80px;
    font-size: 27px;
  }
}
/* /VDO Wall */

/* Short Videos : CMS : Videos */
.cms-short-root {
  height: auto;
  min-height: 100%;
  overflow-y: auto !important;
}

.cms-short-page {
  min-width: 320px;
  min-height: 100vh;
  height: auto !important;
  max-height: none !important;
  margin: 0;
  padding-top: 70px;
  overflow-y: auto !important;
  color: #333333;
  background: #ffffff;
  font-family: var(--font-bettertogether-regular), sans-serif;
}

.cms-short-page *,
.cms-short-page *::before,
.cms-short-page *::after {
  box-sizing: border-box;
}

.cms-short-topnav {
  position: fixed;
  z-index: 1000;
  inset: 0 0 auto;
  height: 70px;
  display: flex;
  align-items: center;
  padding: 0 60px;
  border-bottom: 1px solid #ececec;
  background: #ffffff;
}

.cms-short-topnav.cms-short-topnav-with-sidebar {
  padding-inline: 20px;
}

.cms-short-brand {
  width: 161px;
  height: 24px;
  display: inline-flex;
  flex: 0 0 161px;
}

.cms-short-brand img {
  display: block;
  width: 100%;
  height: 100%;
}

.cms-short-toplinks {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.cms-short-toplinks a {
  padding: 8px 15px;
  border-radius: 999px;
  color: #333333;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
}

.cms-short-profile {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  margin-left: 15px;
  overflow: hidden;
  border-radius: 50%;
}

.cms-short-profile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cms-short-bottomnav {
  display: none;
}

.cms-short-sidebar {
  position: fixed;
  z-index: 900;
  top: 70px;
  bottom: 0;
  left: 0;
  width: 220px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid #ececec;
  background: #ffffff;
  transition: width 0.2s ease;
}

.cms-short-sidebar.sidebar-main-resized {
  position: fixed;
  width: 50px;
}

@media (min-width: 992px) {
  /* The vendor sidebar framework forces position:absolute and transition:none
     on .sidebar-expand-lg.sidebar-main-resized (higher specificity than the
     rules above), which breaks the collapse animation direction. Re-assert
     fixed positioning and the width transition so collapse mirrors expand. */
  .cms-short-sidebar.sidebar-expand-lg.sidebar-main-resized:not(.sidebar-collapsed) {
    position: fixed;
    left: 0;
    transition: width 0.2s ease;
  }
}

.cms-short-sidebar .sidebar-content {
  width: 100%;
  flex: 1 1 auto;
  overflow: hidden auto;
  scrollbar-width: none;
}

.cms-short-sidebar .sidebar-content::-webkit-scrollbar {
  display: none;
}

.cms-short-sidebar .sidebar-section,
.cms-short-sidebar .nav-sidebar,
.cms-short-sidebar .nav-item {
  width: 100%;
}

.cms-short-sidebar .nav-sidebar {
  --nav-link-padding-x: 0.358rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cms-short-sidebar .nav-link {
  --icon-font-size: 18px;
  width: calc(100% - 20px);
  height: 30px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  flex: 0 0 30px;
  align-items: center;
  justify-content: flex-start;
  column-gap: 8px;
  margin: 0 10px;
  /* Keep the expanded icon centered at the same x-position as the 50px collapsed sidebar. */
  padding: 0 6px 0 5px;
  box-sizing: border-box;
  border: 0;
  border-radius: 8px;
  color: #333333;
  background: transparent;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.cms-short-sidebar-icon {
  display: block;
  flex: 0 0 auto;
  justify-self: center;
  margin: 0;
}

.cms-short-sidebar-icon[src$="sidebar-home.svg"] {
  width: 15.1426px;
  height: 15.5625px;
}

.cms-short-sidebar-icon[src$="sidebar-documents.svg"] {
  width: 16px;
  height: 16px;
}

.cms-short-sidebar-icon[src$="sidebar-bookmarks.svg"] {
  width: 12px;
  height: 16px;
}

.cms-short-sidebar-icon[src$="sidebar-users.svg"] {
  width: 18px;
  height: 15px;
}

.cms-short-sidebar-icon[src$="sidebar-filters.svg"] {
  width: 18px;
  height: 17.218px;
}

.cms-short-sidebar-icon[src$="sidebar-groups.svg"] {
  width: 18px;
  height: 11.287px;
}

.cms-short-sidebar-icon[src$="sidebar-contents.svg"] {
  width: 16px;
  height: 22px;
}

.cms-short-sidebar-icon[src$="sidebar-videos.svg"] {
  width: 20px;
  height: 20px;
}

.cms-short-sidebar-icon[src$="sidebar-library.svg"] {
  width: 14.4px;
  height: 18px;
}

.cms-short-sidebar .nav-link span {
  display: block;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 20px;
  white-space: nowrap;
}

.cms-short-sidebar.sidebar-main-resized .nav-link span {
  display: none !important;
}

@media (min-width: 992px) {
  .cms-short-sidebar .nav-link:hover,
  .cms-short-sidebar .nav-link:focus-visible {
    background: var(--gray-200);
  }

  .cms-short-sidebar.sidebar-main-resized .nav-sidebar .nav-link {
    /* Keep the icon locked to the 50px sidebar column while width transitions. */
    width: 50px;
    grid-template-columns: 20px;
    justify-content: center;
    column-gap: 0;
    margin-inline: 0;
    padding-inline: 0;
  }

  .cms-short-sidebar-popover {
    --popover-font-size: 14px;
    line-height: 20px;
    --popover-body-padding-x: 10px;
    --popover-body-padding-y: 5px;
    pointer-events: none;
    box-shadow: none;
  }

  .cms-short-sidebar-popover .popover-body {
    padding: 5px 10px;
    color: #333333;
    font-family: var(--font-bettertogether-regular), sans-serif;
    font-size: 14px;
    line-height: 20px;
  }
}

.cms-short-sidebar .nav-link.active {
  color: var(--primary-temp);
  background: var(--gray-200);
}

@media (min-width: 992px) {
  .cms-short-sidebar .nav-link.active:hover,
  .cms-short-sidebar .nav-link.active:focus-visible {
    background: var(--gray-200);
  }
}

.cms-short-sidebar-footer {
  flex: 0 0 auto;
  padding: 10px;
}

.cms-short-sidebar-footer .sidebar-section-body {
  display: flex;
  justify-content: flex-end;
  padding: 0;
}

.cms-short-sidebar-collapse {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: #333333;
  background: transparent;
  cursor: pointer;
}

.cms-short-sidebar-collapse-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.cms-short-sidebar.sidebar-main-resized + .cms-short-main {
  margin-left: 50px;
}

.cms-short-sidebar:not(.sidebar-main-resized) + .cms-short-main {
  margin-left: 220px;
}

.cms-short-main {
  height: auto;
  max-height: none;
  min-height: calc(100vh - 70px);
  margin-left: 50px;
  padding: 0 20px 40px;
  overflow: visible;
  transition: margin-left 0.2s ease;
}

.cms-short-main h1 {
  height: 58px;
  display: flex;
  align-items: center;
  margin: 0;
  color: #0060d2;
  font-family: var(--font-bettertogether-medium), sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
}

.cms-short-tabs {
  position: relative;
  margin-inline: -20px;
}

.cms-short-tabs::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 0;
  left: 20px;
  height: 1px;
  background: #e4e4e4;
}

.cms-short-tabs .cd-tabs {
  min-width: 0;
}

.cms-short-tabs nav {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* The visible line is drawn by .cms-short-tabs::after (inset, doesn't bleed to the edge);
     nav itself bleeds edge-to-edge only so overflowed tabs can scroll flush with the screen. */
  border-bottom: 0 !important;
}

.cms-short-tabs nav::-webkit-scrollbar {
  display: none;
}

.cms-short-tabs .cd-tabs_navigation {
  width: max-content;
  min-width: 100%;
  height: 35px;
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0 20px;
  list-style: none;
}

.cms-short-tabs .cd-tabs_navigation li {
  flex: 0 0 auto;
}

.cms-short-tabs a.tabs-link {
  position: relative;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  border: 0;
  border-bottom: 3px solid transparent;
  color: #888888;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
}

.cms-short-tabs a.tabs-link.active {
  color: var(--primary-temp) !important;
  border-bottom-color: var(--primary-temp) !important;
}

/* Short Videos CMS: Create (videos_cms_playlist.html / videos_cms_vdo.html shell) */
.cms-short-create-shell {
  min-height: calc(100vh - 70px);
  overflow-x: hidden;
  font-family: var(--font-bettertogether-regular), sans-serif;
}

.cms-short-create-wrapper {
  min-width: 0;
  background: #ffffff;
}

.cms-short-create-layout {
  min-height: calc(100vh - 70px);
  display: grid;
  grid-template-columns: 343px minmax(0, 1fr);
}

.cms-short-create-settings {
  display: flex;
  flex-direction: column;
  padding: 20px 15px 20px 20px;
  border-right: 1px solid #f2f2f2;
  border-top-left-radius: 20px;
  background: linear-gradient(180deg, #e6f2ff 0%, #ffffff 100%);
}

.cms-short-create-settings > .cms-short-create-back {
  order: 1;
}

.cms-short-create-settings > .cms-short-create-heading {
  order: 2;
}

.cms-short-create-settings > .cms-short-create-cover-field {
  order: 3;
}

.cms-short-create-settings > .mb-3 {
  order: 4;
  margin-top: 10px;
  margin-bottom: 0 !important;
}

.cms-short-create-back {
  width: calc(100% + 35px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: 30px;
  margin-right: -15px;
  margin-bottom: 17px;
  margin-left: -20px;
  padding: 0 20px;
  color: #888888;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0px;
  vertical-align: middle;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cms-short-create-back:active,
.cms-short-create-back:focus {
  color: #888888 !important;
  outline: 0;
}

.cms-short-create-back i {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #888888;
  border-radius: 50%;
  font-size: 20px;
  color: #888888;
  -webkit-tap-highlight-color: transparent;
}

.cms-short-create-back:active i,
.cms-short-create-back:focus i {
  color: #888888 !important;
  border-color: #888888 !important;
}

.cms-short-create-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}

.cms-short-create-heading h1 {
  margin: 0;
  color: var(--primary-temp);
  font-family: var(--font-bettertogether-medium), sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: 0px;
  vertical-align: middle;
}

.cms-short-create-heading .plus-button,
.cms-short-create-upload-delete {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 1px solid #e4e4e4 !important;
  border-radius: 50%;
  background: #ffffff;
  color: #cccccc;
  font-size: 18px;
  line-height: 28px;
}

.cms-short-create-heading .plus-button {
  color: #888888;
}

.cms-short-create-heading .plus-button:active,
.cms-short-create-heading .plus-button.active,
.cms-short-create-heading .plus-button:focus,
.cms-short-create-upload-delete:active,
.cms-short-create-upload-delete.active,
.cms-short-create-upload-delete:focus {
  color: #cccccc !important;
  background-color: #ffffff !important;
}

.cms-short-create-tags legend {
  display: block;
  margin: 0 0 5px;
  color: #888888;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
}

.cms-short-create-select {
  width: 100%;
  min-height: 40px;
  padding: 6.35px 26px 2.35px 14px;
  overflow: hidden;
  border-color: #e4e4e4;
  border-radius: 10px;
  appearance: none;
  background-color: #ffffff;
  background-image: url("../images/main/ic_arr_down.svg");
  background-repeat: no-repeat;
  background-position: right 0.575rem center;
  background-size: 16px 45px;
  color: #333333;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.cms-short-create-select:focus {
  border-color: #e4e4e4;
  outline: 0;
  box-shadow: none;
}

.cms-short-create-select-wrap {
  position: relative;
}

.cms-short-create-select-wrap > .ph-caret-down {
  display: none;
}

.cms-short-create-cover-field {
  margin-top: 0px;
}

.cms-short-create-cover-upload {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  background: #fafafa;
}

.cms-short-create-cover-trigger {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cccccc;
  cursor: pointer;
}

.cms-short-create-cover-icon {
  display: block;
  width: 49px;
  height: 41px;
}

.cms-short-create-cover-preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cms-short-create-cover-upload.has-cover {
  border-style: solid;
}

.cms-short-create-cover-upload.has-cover .cms-short-create-cover-trigger {
  display: none;
}

.cms-short-create-cover-delete {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-color: #e4e4e4 !important;
  background: #ffffff;
  color: #888888;
}

.cms-short-create-tags {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.cms-short-create-tag-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.cms-short-create-tag,
.cms-short-create-tag-add {
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e4e4e4;
  background: #ffffff;
  color: #333333;
}

.cms-short-create-tag {
  min-width: 108px;
  padding: 0 18px;
  border-radius: 999px;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 16px;
  line-height: 24px;
}

.cms-short-create-tag-add {
  width: 34px;
  flex: 0 0 34px;
  padding: 0;
  border-radius: 50%;
  color: #888888;
  font-size: 18px;
  line-height: 28px;
}

.cms-short-create-content {
  min-width: 0;
  padding: 20px 20px 60px;
  background: #fafbfc;
}

/* block labels so the first one aligns flush with the aside's "Back" (20px under topnav) */
.cms-short-create-content .form-label {
  display: block;
}

.cms-short-create-upload {
  width: min(660px, 72%);
  margin-inline: auto;
}

.cms-short-create-upload {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  background: #fafafa;
}

.cms-short-create-upload-delete {
  position: absolute;
  z-index: 2;
  top: 20px;
  right: 20px;
  cursor: pointer;
}

.cms-short-create-upload-trigger {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cms-short-create-upload-trigger img {
  width: 48px;
  height: 30px;
  display: block;
  object-fit: contain;
}

.cms-short-create-upload.has-video .cms-short-create-upload-trigger {
  display: none;
}

.cms-short-create-upload-preview {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  cursor: pointer;
  background: #000000;
}

.cms-short-create-upload-play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
  cursor: pointer;
}

.cms-short-create-upload-play .vdo-wall-play-state {
  position: static;
  opacity: 1;
  transform: none;
  color: #ffffff;
  border: 1.5px solid #ffffff;
  pointer-events: none;
}

.cms-short-video-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: #000000;
}

.cms-short-video-modal .modal-body {
  padding: 0;
}

.cms-short-video-modal .btn-close {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  opacity: 1;
}

.cms-short-video-modal .btn-close .ph-x {
  font-size: 16px;
  line-height: 24px;
}

.cms-short-video-modal-player {
  width: 100%;
  max-height: 80vh;
  display: block;
  background: #000000;
  /* <video> is GPU-composited on its own layer and ignores both the
     modal-content's overflow:hidden clip and its own border-radius.
     clip-path reliably clips composited video content. */
  border-radius: 12px;
  clip-path: inset(0 round 12px);
}

.cms-short-create-description {
  position: relative;
  margin-top: 10px;
}

.cms-short-character-count {
  position: absolute;
  top: 0;
  right: 0;
  color: #888888;
  font-family: "Better Together", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 20px;
  letter-spacing: 0;
  text-align: right;
}

.cms-short-create-description textarea.form-control {
  width: 100%;
  min-height: 180px;
  resize: vertical;
  padding: 12px;
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  color: #333333;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 16px;
  line-height: 24px;
}

.cms-short-create-description textarea.form-control::placeholder {
  color: #888888;
  opacity: 1;
}

.cms-short-hashtag-suggestions {
  position: absolute;
  z-index: 10;
  top: calc(100% + 8px);
  right: 0;
  bottom: auto;
  left: 0;
  max-width: 460px;
  max-height: 260px;
  overflow: hidden;
  overflow-y: auto;
  border: 1px solid #e4e4e4;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.cms-short-hashtag-suggestions.flip-up {
  top: auto;
  bottom: calc(100% + 8px);
}

.cms-short-hashtag-suggestions button {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 16px;
  border: 0;
  background: #ffffff;
  color: #333333;
  font-family: "Better Together", sans-serif;
  font-size: 16px;
  line-height: 24px;
  text-align: left;
}

.cms-short-hashtag-suggestions button + button {
  border-top: 1px solid #f2f2f2;
}

.cms-short-hashtag-suggestions button span {
  color: #888888;
  font-size: 14px;
  line-height: 20px;
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .cms-short-create-back:hover,
  .cms-short-create-back:hover i,
  .cms-short-create-heading .plus-button:hover,
  .cms-short-create-upload-delete:hover,
  .cms-short-create-tag-add:hover,
  .cms-short-create-tag:hover,
  .plus-button:hover {
    color: var(--primary-temp);
  }

  .cms-short-hashtag-suggestions button:hover {
    background: var(--gray-200);
  }
}

@media (max-width: 1199.98px) {
  .cms-short-create-layout {
    grid-template-columns: 320px minmax(0, 1fr);
  }

  .cms-short-create-upload {
    width: min(660px, 86%);
  }
}

@media (max-width: 991.98px) {
  .cms-short-create-shell {
    padding-bottom: 72px;
    min-height: auto;
  }

  .cms-short-create-layout {
    min-height: auto;
    display: block;
  }

  .cms-short-create-settings {
    padding: 20px;
    border-right: 0;
    border-bottom: 1px solid #e4e4e4;
    border-top-left-radius: 0;
  }

  .cms-short-create-content {
    padding: 15px 15px 100px;
  }

  .cms-short-create-upload {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .cms-short-create-settings {
    padding-inline: 20px;
  }

  .cms-short-create-back {
    width: calc(100% + 40px);
    margin-right: -20px;
    margin-left: -20px;
    margin-bottom: 0;
    padding-inline: 20px;
  }

  .cms-short-create-upload-delete {
    top: 12px;
    right: 12px;
  }

  .cms-short-create-description textarea.form-control {
    min-height: 150px;
  }
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .cms-short-tabs a.tabs-link:hover {
    color: #0060d2;
    border-bottom-color: #0060d2;
  }
}

@media (max-width: 991.98px), (hover: none), (pointer: coarse) {
  .cms-short-tabs a.tabs-link:not(.active):hover,
  .cms-short-tabs a.tabs-link:not(.active):focus,
  .cms-short-tabs a.tabs-link:not(.active):focus-visible,
  .cms-short-tabs a.tabs-link:not(.active):active {
    color: #888888 !important;
    border-bottom-color: transparent !important;
  }
}

.cms-short-toolbar {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
}

.cms-short-search {
  position: relative;
  width: 307px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  border: 1px solid #e4e4e4;
  border-radius: 999px;
  color: #888888;
}

.cms-short-search-icon {
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 18px;
}

.cms-short-search input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 32px 0 0;
  border: 0;
  outline: 0;
  color: #333333;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
}

.cms-short-search input::placeholder {
  color: #888888;
}

/* Keep EDU World CMS search controls neutral while typing. */
.cms-short-search:focus-within {
  border-color: #e4e4e4;
}

.cms-short-search input:focus {
  border-color: transparent;
  outline: 0;
  box-shadow: none;
}

.cms-short-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.cms-short-search-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: #cccccc;
  background: transparent;
  transform: translateY(-50%);
  cursor: pointer;
}

.cms-short-search-clear[hidden] {
  display: none;
}

.cms-short-search-clear .ph-x {
  color: #cccccc;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.cms-short-add,
.cms-short-card-actions a,
.cms-short-card-actions button {
  width: 40px;
  height: 40px;
  display: grid;
  flex: 0 0 40px;
  place-items: center;
  padding: 0;
  border: 1px solid #ececec;
  border-radius: 50%;
  color: #888888;
  background: #ffffff;
  text-decoration: none;
  cursor: pointer;
}

.cms-short-add {
  --icon-font-size: 18px;
}

.cms-short-add-icon {
  width: 16px;
  height: 16px;
  display: block;
  transition: none;
}

.cms-short-filters {
  min-height: 32px;
  display: flex;
  align-items: flex-start;
  margin-top: 16px;
  color: #888888;
  font-size: 16px;
  line-height: 24px;
}

.cms-short-filter-title {
  min-height: 32px;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 10px;
  padding: 4px 10px 4px 0;
  border: 0;
  color: inherit;
  background: transparent;
  font-family: var(--font-bettertogether-medium), sans-serif;
  font-size: 16px;
  line-height: 24px;
  cursor: default;
}

.cms-short-filter-icon {
  width: 20px;
  height: 19px;
  display: block;
  flex: 0 0 20px;
}

.cms-short-filter-fields {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 4px;
}

.cms-short-multiselect-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.cms-short-multiselect-wrap::before {
  content: "|";
  display: none;
  flex: 0 0 auto;
  margin-right: 4px;
  color: #cccccc;
}

.cms-short-filter-fields > .multiselect-native-select:not(:first-child) .cms-short-multiselect-wrap::before {
  display: inline;
}

.cms-short-multiselect {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.cms-short-multiselect-button.btn-light {
  min-height: 32px;
  padding: 0 8px 0 0;
  border: 0;
  outline: 0;
  color: #888888;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-bettertogether-regular), sans-serif !important;
  font-size: 16px !important;
  line-height: 32px !important;
  white-space: nowrap;
  cursor: pointer;
}

/* The plugin writes its selected count into this span; the CMS uses the badge below instead. */
.cms-short-multiselect-button .multiselect-selected-text {
  display: none !important;
}

.cms-short-multiselect-count {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  margin-left: 5px;
  border-radius: 50%;
  color: #ffffff;
  background: #0060d2;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 12px;
  line-height: 18px;
  vertical-align: middle;
}

.cms-short-multiselect-count[hidden] {
  display: none;
}

.cms-short-multiselect-button.dropdown-toggle::after {
  display: none;
}

.cms-short-multiselect-caret {
  width: 11px;
  height: 6px;
  display: inline-block;
  flex: 0 0 11px;
  margin-left: 6px;
  vertical-align: middle;
}

.cms-short-multiselect-wrap.is-open .cms-short-multiselect-button {
  color: #0060d2;
}

.cms-short-multiselect-wrap .multiselect-container {
  top: calc(100% + 4px);
  left: 0;
  z-index: 1100;
  width: 350px;
  min-width: 280px;
  max-width: min(350px, calc(100vw - 32px));
  max-height: 280px;
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 0 10px;
  border: 1px solid #ececec;
  border-radius: 8px;
  /* Override the global .multiselect-container.dropdown-menu clip-path
     (10px, main.css ~3575) to match this component's own 8px radius. */
  clip-path: inset(0 round 8px);
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.cms-short-multiselect-wrap.is-open .multiselect-container,
.cms-short-multiselect-wrap .multiselect-container.show {
  display: block;
}

.cms-short-multiselect-wrap .multiselect-container.is-align-end {
  right: 0;
  left: auto;
}

.cms-short-multiselect-wrap .multiselect-filter {
  position: sticky;
  top: 0;
  z-index: 1;
  margin-bottom: 0;
  padding: 15px;
  background: #ffffff;
}

.cms-short-multiselect-wrap .multiselect-filter .input-group {
  position: relative;
}

.cms-short-multiselect-wrap .multiselect-search {
  height: 40px;
  padding: 0 40px;
  border: 1px solid #ececec;
  border-radius: 10px !important;
  font-family: "Better Together", sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;
}

.cms-short-multiselect-wrap .multiselect-search:focus {
  background-color: #ffffff;
  border-color: #ececec;
  outline: 0;
  box-shadow: none;
}

.cms-short-multiselect-wrap .form-control-feedback-icon {
  --icon-font-size: 18px;
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 15px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 0;
  color: #cccccc;
  transform: translateY(-50%);
  pointer-events: none;
}

.cms-short-multiselect-search-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.cms-short-multiselect-wrap .multiselect-clear-filter {
  position: absolute;
  z-index: 6;
  top: 50%;
  right: 6px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0 !important;
  color: #cccccc;
  background: transparent;
  transform: translateY(-50%);
}

.cms-short-multiselect-wrap .multiselect-clear-filter .ph-x {
  color: #cccccc;
  font-size: 16px;
  font-weight: 400;
  width: 16px;
  height: 16px;
  line-height: 16px;
}

.cms-short-multiselect-wrap .multiselect-clear-filter[hidden] {
  display: none;
}

.cms-short-multiselect-wrap .multiselect-clear-filter.is-visible {
  display: grid !important;
}

.cms-short-multiselect-wrap .dropdown-item {
  display: block;
  padding: 4.5px 15px;
  color: #333333;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 16px;
  line-height: 24px;
  white-space: normal;
  cursor: pointer;
}

.cms-short-multiselect-wrap .dropdown-item:hover {
  color: #0060d2;
  background: #fafbfc;
}

.cms-short-multiselect-wrap .multiselect-item.active,
.cms-short-multiselect-wrap .multiselect-all.active {
  color: #333333;
  background: #fafbfc;
}

.cms-short-multiselect-wrap .multiselect-option[hidden] {
  display: none;
}

.cms-short-multiselect-wrap .form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 22px;
  margin: 0;
  padding: 0;
}

.cms-short-multiselect-wrap .form-check-input {
  position: static;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin: 0;
  cursor: pointer;
}

.cms-short-multiselect-wrap .form-check-label {
  cursor: pointer;
}

.cms-short-multiselect-wrap .multiselect-all .form-check-label {
  font-weight: 400;
}

.cms-short-multiselect-wrap .dropdown-menu::-webkit-scrollbar {
  width: 3px;
}

.cms-short-multiselect-wrap .dropdown-menu::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #888888;
}

.cms-short-filter-count {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: #0060d2;
  font-family: var(--font-bettertogether), sans-serif;
  font-size: 12px;
  line-height: 18px;
  transform: translateY(-50%);
  pointer-events: none;
}

.cms-short-filter-reset {
  flex: 0 0 auto;
  margin-left: 6px;
  padding: 4px 8px;
  border: 0;
  color: #0060d2;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
}

.cms-short-list-head {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #888888;
  font-size: 14px;
  line-height: 20px;
}

.cms-short-list-head > * {
  min-height: 30px;
  display: flex;
  align-items: center;
  padding-bottom: 0 !important;
}

.cms-short-list-head .breadcrumb-elements-item,
.cms-short-list-head .breadcrumb-elements-item > a,
.cms-short-list-head .breadcrumb-elements-item > a > .d-flex {
  height: 30px;
  display: flex;
  align-items: center;
}

.cms-short-list-head .breadcrumb-elements-item img {
  display: block;
  flex: 0 0 auto;
}

.filter-content .form_mutiselect form > .pe-1 {
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
}

.cms-short-sort {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  color: #888888;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

.cms-short-sort-toggle::after {
  display: none;
}

.cms-short-sort-menu {
  min-width: 230px;
  overflow: hidden;
  padding: 0;
  border: 1px solid #ececec;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.cms-short-sort-menu .dropdown-item {
  padding: 7px 15px;
  color: #333333;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 14px;
  line-height: 20px;
}

.cms-short-sort-menu .dropdown-item:hover,
.cms-short-sort-menu .dropdown-item:focus,
.cms-short-sort-menu .dropdown-item.is-selected {
  color: var(--primary-temp);
  background: var(--gray-200);
}

.cms-short-sort-icon {
  width: 16px;
  height: 12px;
  display: block;
  flex: 0 0 16px;
}

.cms-short-list {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

/* Scoped Card List Kit styles used by Short Videos CMS. */
.card-catalog-horizontal-list {
  display: grid;
  gap: 10px;
}

.card-catalog-media-row {
  width: 100%;
  min-height: 89px;
  margin-bottom: 0;
  overflow: hidden;
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: none !important;
}

.cms-short-video-list .card-catalog-media-row {
  box-shadow: 0 0 10px 0 #0000001a !important;
}

.card-catalog-media-row .card-link {
  display: grid;
  grid-template-columns: 158px minmax(0, 1fr) 120px auto;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.card-catalog-media-row .card-img-container {
  position: relative;
  width: 158px;
  min-width: 158px;
  height: 100%;
  min-height: 89px;
  align-self: stretch;
  overflow: hidden;
  padding: 0;
  border-inline-end: 1px solid #e4e4e4;
}

.card-catalog-media-row .card-img-top {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.cms-short-video-list .card-img-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}

.cms-short-video-list .card-catalog-media-row .card-img-top {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto !important;
  max-width: 100%;
  height: 100% !important;
  max-height: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center;
  transform: translate(-50%, -50%);
}

.card-catalog-media-row .cms-short-video-placeholder {
  display: grid;
  place-items: center;
  background: #fafafa;
}

.cms-short-video-placeholder-icon {
  display: block;
  width: 39.53px;
  height: 24px;
}

.cms-short-video-placeholder .ph-video-camera {
  width: 39.53px;
  height: 24px;
  display: grid;
  place-items: center;
  color: #cccccc;
  font-size: 39.53px;
  line-height: 24px;
}

.card-catalog-media-row .card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 15px;
}

.card-catalog-media-row .card-title {
  display: -webkit-box;
  margin-bottom: 2px;
  overflow: hidden;
  color: #333333;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  vertical-align: middle;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.card-catalog-horizontal-meta {
  color: #888888;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  vertical-align: middle;
}

.card-catalog-horizontal-status {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 15px;
}

.txt_suk_888_14 {
  color: #888888 !important;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 14px !important;
  line-height: 20px;
}

.txt_suk_333_16 {
  color: #333333;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 16px !important;
  line-height: 24px;
}

.card-catalog-horizontal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
}

.card-catalog-horizontal-actions .plus-button {
  width: 40px;
  height: 40px;
  display: flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 0;
  border: 1px solid #ececec;
  border-radius: 50%;
  color: #888888;
  background: #ffffff;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.cms-short-card-action-icon {
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  transition: none;
}

.cms-short-card-action-icon[src$="edit.svg"] {
  width: 16px;
  height: 16px;
}

.cms-short-card-action-icon[src$="trash.svg"] {
  width: 14.667px;
  height: 16px;
}

/* Global modal pattern */
.modal-content {
  border-radius: 20px;
}

.modal-header {
  padding: 10px 20px 5px;
  border-bottom: 0;
}

.modal-title {
  margin: 0;
  color: #000000;
  font-family: var(--font-bettertogether-medium), sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
}

.modal .btn-close {
  --btn-close-width: 0.875em;
  --btn-close-height: 0.875em;
  --btn-close-opacity: 0.45;
}

.modal-body {
  padding: 20px;
}

.modal-body.no-padding-bottom {
  padding-bottom: 5px !important;
}

.modal .txt_label_gray {
  display: block;
  margin-bottom: 5px;
  color: #888888;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.modal-footer {
  -ms-flex-pack: center;
  justify-content: center;
  padding: calc(var(--modal-padding) - var(--modal-footer-gap) * 0.5);
  border-top: 0;
  padding-bottom: 30px;
}

.cms-short-delete-modal {
  --bs-modal-border-radius: 20px;
  --bs-modal-border-width: 0;
  --bs-modal-color: #333333;
}

.cms-short-delete-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.cms-short-delete-modal .modal-header {
  padding: 10px 20px 15px;
  border-bottom: 0;
}

.cms-short-delete-modal .modal-title {
  color: #000000;
  font-family: var(--font-bettertogether-medium), sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

.cms-short-delete-modal .btn-close {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  opacity: 1;
}

.cms-short-delete-modal .btn-close .ph-x {
  color: #cccccc;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.cms-short-delete-modal .modal-body {
  padding: 20px;
}

.cms-short-delete-modal .txt-modal-content {
  color: #333333;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 20px;
  line-height: 30px;
}

.txt_333_24_r {
  color: #333333;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 34px;
}

.txt_333_24_m {
  color: #333333;
  font-family: var(--font-bettertogether-medium), sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 34px;
}

.cms-short-delete-modal .modal-footer {
  justify-content: center;
  gap: 8px;
  padding: 10px 20px 30px;
  border-top: 0;
}

.cms-short-delete-modal .btn_light_border {
  min-width: 120px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border-color) !important;
  border-radius: 999px;
  color: #333333;
  background: #ffffff;
  box-shadow: none;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 16px;
  line-height: 24px;
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .modal .btn-close:hover {
    color: var(--primary-temp);
    filter: brightness(0) saturate(100%) invert(27%) sepia(92%) saturate(2012%) hue-rotate(198deg) brightness(89%) contrast(101%);
    opacity: 1;
  }

  .cms-short-delete-modal .btn-close:hover {
    background: none;
    filter: none;
  }

  .modal .btn-close:hover .ph-x {
    color: var(--primary-temp);
  }

  .cms-short-delete-modal .btn_light_border:hover {
    border-color: var(--primary-temp) !important;
    color: #ffffff;
    background: var(--primary-temp);
  }
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .card_hover:hover {
    background-color: #fafbfc;
    cursor: pointer;
  }

  .card_hover:hover .card-title,
  .card_hover:hover .cms-category-row-name,
  .card-catalog-horizontal-actions .plus-button:hover {
    color: #0060d2;
  }

  .card-catalog-horizontal-actions .plus-button:hover {
    border-color: var(--primary-temp);
    background: #fafbfc;
  }
}

.cms-short-card {
  min-height: 70px;
  display: grid;
  grid-template-columns: 125px minmax(0, 1fr) 180px 100px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.cms-short-thumb {
  width: 125px;
  height: 70px;
  display: block;
  object-fit: cover;
  border-right: 1px solid #ececec;
}

.cms-short-thumb-empty {
  --icon-font-size: 32px;
  display: grid;
  place-items: center;
  color: #cccccc;
  background: #fafafa;
}

.cms-short-card-content {
  min-width: 0;
  padding: 6px 16px;
}

.cms-short-card-content h2,
.cms-short-card-content p {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cms-short-card-content h2 {
  color: #333333;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.cms-short-card-content p {
  color: #888888;
  font-size: 14px;
  line-height: 20px;
}

.cms-short-status {
  display: grid;
  align-content: center;
}

.cms-short-status span {
  color: #888888;
  font-size: 14px;
  line-height: 20px;
}

.cms-short-status strong {
  color: #333333;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.cms-short-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-right: 12px;
}

.cms-short-card-actions img {
  display: block;
  width: 16px;
  height: 16px;
}

@media (hover: hover) and (pointer: fine) {
  .cms-short-toplinks a:hover,
  .cms-short-tabs a:hover,
  .cms-short-sidebar a:hover {
    color: #0060d2;
  }

  .cms-short-add:hover,
  .cms-short-card-actions a:hover,
  .cms-short-card-actions button:hover {
    border-color: #0060d2;
    color: #0060d2;
    background: rgba(0, 96, 210, 0.06);
  }
}

@media (min-width: 992px) {
  html.cms-short-root,
  body.cms-short-page {
    height: 100%;
    overflow: hidden !important;
  }

  .cms-short-main {
    height: calc(100vh - 70px);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .card-catalog-media-row {
    height: 70px;
    min-height: 70px;
  }

  .card-catalog-media-row .card-link {
    height: 70px;
    grid-template-columns: 125px calc(75% - 125px) 0% 25%;
  }

  .card-catalog-media-row .card-img-container {
    width: 125px;
    min-width: 125px;
    height: 70px;
    min-height: 70px;
  }

  .card-catalog-media-row .card-body {
    padding: 6px 15px;
  }

  .card-catalog-horizontal-status {
    grid-column: 4;
    grid-row: 1;
    justify-self: start;
  }

  .card-catalog-horizontal-actions {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
  }

  .card-catalog-media-row .card-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .card-catalog-horizontal-status {
    padding-block: 6px;
  }

  .card-catalog-horizontal-actions {
    padding-block: 6px;
  }

  .cms-short-video-list .card-catalog-horizontal-actions .plus-button:hover,
  .cms-short-video-list .card-catalog-horizontal-actions .plus-button:focus-visible {
    border-color: #ececec !important;
    color: #888888 !important;
    background: #ffffff !important;
  }

  .cms-short-video-list .card-catalog-horizontal-actions .plus-button:hover > i,
  .cms-short-video-list .card-catalog-horizontal-actions .plus-button:focus-visible > i {
    color: var(--primary-temp) !important;
  }

  .cms-short-video-list .card-catalog-horizontal-actions .plus-button:hover > .cms-short-card-action-icon,
  .cms-short-video-list .card-catalog-horizontal-actions .plus-button:focus-visible > .cms-short-card-action-icon {
    filter: brightness(0) saturate(100%) invert(27%) sepia(92%) saturate(2012%) hue-rotate(198deg) brightness(89%) contrast(101%);
  }
}

@media (max-width: 1199.98px) {
  .cms-short-topnav {
    padding: 0 30px;
  }

  .cms-short-toplinks a {
    padding-inline: 8px;
  }

  .cms-short-filters {
    align-items: flex-start;
  }

  .cms-short-card {
    grid-template-columns: 125px minmax(0, 1fr) 150px 100px;
  }
}

@media (max-width: 991.98px) {
  .cms-short-page {
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }

  .cms-short-toplinks {
    display: none;
  }

  .cms-short-profile {
    margin-left: auto;
  }

  .cms-short-sidebar {
    display: none;
  }

  .cms-short-main,
  .cms-short-sidebar.sidebar-main-resized + .cms-short-main,
  .cms-short-sidebar:not(.sidebar-main-resized) + .cms-short-main {
    margin-left: 0;
  }

  .cms-short-bottomnav {
    position: fixed;
    z-index: 1050;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid #ececec;
    background: #ffffff;
  }

  .cms-short-bottomnav-item {
    width: 20%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 5px;
    color: #888888;
    text-align: center;
    text-decoration: none;
  }

  .cms-short-bottomnav-icon {
    width: 20px;
    height: 20px;
    display: block;
    object-fit: contain;
  }

  .cms-short-bottomnav-item span {
    width: 100%;
    overflow: hidden;
    font-family: var(--font-bettertogether-regular), sans-serif;
    font-size: 10px;
    line-height: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cms-short-bottomnav-item.is-active,
  .cms-short-bottomnav-item.is-active span {
    color: #0060d2;
  }

  .cms-short-bottomnav-item.is-active .cms-short-bottomnav-icon {
    filter: invert(29%) sepia(97%) saturate(2476%) hue-rotate(200deg) brightness(82%) contrast(106%);
  }
}

@media (max-width: 767.98px) {
  .cms-short-page {
    padding-top: 70px;
  }

  .cms-short-topnav {
    padding: 0 20px;
  }

  .cms-short-toplinks {
    display: none;
  }

  .cms-short-profile {
    margin-left: auto;
  }

  .cms-short-main {
    padding-inline: 16px;
  }

  .cms-short-tabs {
    margin-inline: 0;
  }

  .cms-short-toolbar {
    gap: 12px;
  }

  .cms-short-filters {
    display: block;
    min-height: 32px;
  }

  .cms-short-filter-title {
    cursor: pointer;
  }

  .cms-short-filter-fields {
    display: none;
    width: 100%;
    align-items: flex-start;
    padding-top: 6px;
  }

  .cms-short-filter-fields .cms-short-multiselect-button.btn-light {
    padding-left: 0;
  }

  .cms-short-filter-fields.is-open {
    display: flex;
  }

  .cms-short-multiselect-wrap {
    min-height: 32px;
  }

  .cms-short-search {
    width: min(307px, calc(100% - 52px));
  }

  .card-catalog-media-row {
    border-radius: 20px;
  }

  .card-catalog-media-row .card-link {
    position: relative;
    display: block;
  }

  .card-catalog-media-row .card-img-container {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    border-inline-end: 0;
    border-bottom: 1px solid #e4e4e4;
  }

  .card-catalog-media-row .card-body {
    padding: 10px 15px;
  }

  .card-catalog-horizontal-status {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 0 15px 10px 15px;
  }

  .card-catalog-horizontal-actions {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 10px;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0;
  }

  .card-catalog-horizontal-actions .plus-button {
    background-color: rgba(255, 255, 255, 0.94);
    box-shadow: none;
  }

  .cms-short-card {
    position: relative;
    grid-template-columns: 108px minmax(0, 1fr);
    min-height: 112px;
    padding-right: 48px;
  }

  .cms-short-thumb {
    width: 108px;
    height: 112px;
  }

  .cms-short-status {
    grid-column: 2;
    padding: 0 12px 8px;
  }

  .cms-short-card-actions {
    position: absolute;
    top: 8px;
    right: 6px;
    flex-direction: column;
    gap: 6px;
    padding: 0;
  }

  .cms-short-card-actions a,
  .cms-short-card-actions button {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
}
/* /Short Videos : CMS : Videos */

/* Short Videos CMS V2: GSchool base with EDU World navigation. */
.cms-library-base-page .page-content {
  padding-left: 50px;
  transition: padding-left 0.2s ease;
}

.cms-library-base-page.cms-short-sidebar-expanded .page-content {
  padding-left: 220px;
}

.cms-library-base-page .page-content > .sidebar.sidebar-main:not(.cms-short-sidebar) {
  display: none !important;
}

.cms-library-base-page .content-wrapper {
  width: 100%;
  min-width: 0;
  margin-left: 0 !important;
}

.cms-library-base-page .cms-short-sidebar-icon[src*="/figma/home.svg"] {
  width: 15.1426px;
  height: 15.5625px;
}
.cms-library-base-page .cms-short-sidebar-icon[src*="/figma/courses.svg"] {
  width: 16px;
  height: 16px;
}
.cms-library-base-page .cms-short-sidebar-icon[src*="/figma/bookmarks.svg"] {
  width: 12px;
  height: 16px;
}
.cms-library-base-page .cms-short-sidebar-icon[src*="/figma/users.svg"] {
  width: 18px;
  height: 15px;
}
.cms-library-base-page .cms-short-sidebar-icon[src*="/figma/settings.svg"] {
  width: 18px;
  height: 17.218px;
}
.cms-library-base-page .cms-short-sidebar-icon[src*="/figma/groups.svg"] {
  width: 18px;
  height: 11.29px;
}
.cms-library-base-page .cms-short-sidebar-icon[src*="/figma/short-video.svg"] {
  width: 16px;
  height: 22px;
}
.cms-library-base-page .cms-short-sidebar-icon[src*="/figma/video.svg"] {
  width: 20px;
  height: 20px;
}
.cms-library-base-page .cms-short-sidebar-icon[src*="/figma/library.svg"] {
  width: 14.4px;
  height: 18px;
}
.cms-library-base-page .cms-short-sidebar-icon[src*="/figma/card.svg"] {
  width: 20px;
  height: 12px;
}

/* Figma SVGs have their stroke colour embedded, so mirror menu states with filters. */
.cms-library-base-page .cms-short-sidebar-icon {
  filter: grayscale(1) brightness(0.22);
  transition: filter 0.2s ease;
}

.cms-library-base-page .cms-short-sidebar .nav-link.active .cms-short-sidebar-icon {
  filter: brightness(0) saturate(100%) invert(27%) sepia(92%) saturate(2012%) hue-rotate(198deg) brightness(89%) contrast(101%);
}

@media (min-width: 992px) {
  .cms-library-base-page .cms-short-sidebar .nav-link:hover .cms-short-sidebar-icon,
  .cms-library-base-page .cms-short-sidebar .nav-link:focus-visible .cms-short-sidebar-icon {
    filter: brightness(0) saturate(100%) invert(27%) sepia(92%) saturate(2012%) hue-rotate(198deg) brightness(89%) contrast(101%);
  }
}

@media (max-width: 991.98px) {
  .cms-library-base-page .page-content,
  .cms-library-base-page.cms-short-sidebar-expanded .page-content {
    padding-left: 0;
  }
}

/* =========================
   Category pill capsules (edge-to-edge swiper row)
   Sits on a colored hero background (e.g. .hero-shell) -- white/translucent pills.
========================= */
.category-pill-edge {
  width: 100%;
  margin-top: 18px;
  margin-bottom: 4px;
}

.category-pill-swiper .swiper-wrapper {
  justify-content: flex-start;
}

.category-pill-swiper.is-centered .swiper-wrapper {
  justify-content: center;
  transform: translate3d(0, 0, 0) !important;
}

.category-pill-swiper .swiper-slide {
  width: auto;
  height: auto;
}

.category-pill {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.category-pill.active {
  background-color: var(--primary-temp);
  color: #ffffff;
}

/* Masks the vendor a:hover{color:var(--link-hover-color)} (all.min.css,
   unguarded) turning this pill's white text blue on desktop hover -- not
   gated to desktop-only itself since the mobile/tablet block below always
   wins there anyway (via !important), same as the vendor rule it's masking. */
.category-pill:hover {
  color: #ffffff;
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .category-pill:hover {
    background-color: rgba(255, 255, 255, 0.32);
  }
}

/* The site-wide a:hover{color:inherit!important} reset (near the top of this
   file) neutralizes the vendor a:hover color swap on touch/narrow screens,
   but "inherit" only lands back on this pill's OWN resting color for plain
   body-text links. .category-pill sets its own white (or active-blue) color
   explicitly, so inherit resolves to the surrounding #333 text instead --
   restore the pill's real resting color on mobile/tablet here. */
@media (max-width: 991.98px), (hover: none), (pointer: coarse) {
  .category-pill:hover,
  .category-pill:focus,
  .category-pill:active {
    color: #ffffff !important;
  }
  .category-pill.active:hover,
  .category-pill.active:focus,
  .category-pill.active:active {
    color: #ffffff !important;
  }
}

/* =========================
   Search box on a colored hero background
========================= */
.zone-search {
  display: flex;
  width: 100%;
  max-width: 360px;
  height: 40px;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.3);
}

.zone-search i {
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  line-height: 1;
}

.zone-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #ffffff;
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  line-height: 24px;
}

.zone-search input::placeholder {
  color: rgba(255, 255, 255, 0.85);
}

.zone-search input::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}

.zone-search .search-clear-button {
  position: relative;
  display: none;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  flex: 0 0 auto;
}

.zone-search .search-clear-button::before,
.zone-search .search-clear-button::after {
  position: absolute;
  top: 7.5px;
  left: 2px;
  width: 12px;
  height: 1px;
  background-color: currentColor;
  content: "";
}

.zone-search .search-clear-button::before {
  transform: rotate(45deg);
}

.zone-search .search-clear-button::after {
  transform: rotate(-45deg);
}

.zone-search input:not(:placeholder-shown) ~ .search-clear-button {
  display: block;
}

/* =========================
   Video Home: dark gradient shell (hero backdrop through the category rows)
========================= */
.gradient-shell {
  background: linear-gradient(141.53deg, #001d3a 22.14%, #5f50ee 83.88%);
  color: #ffffff;
  overflow: hidden;
  padding-bottom: 50px;
}

.gradient-shell + .site-footer {
  margin-top: 0;
}

.gradient-shell .hero-shell {
  background: none;
}

/* Nav floats transparently over the hero image instead of sitting on its own bar */
.gradient-shell .topbar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Backdrop-style hero: vertical cover image cropped into a wide banner with overlay text */
.video-hero-box,
.video-hero-box-content {
  min-height: 320px;
}
@media (min-width: 768px) {
  .video-hero-box,
  .video-hero-box-content {
    min-height: 420px;
  }
}
.video-hero-media {
  position: relative;
  overflow: hidden;
}

.video-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.video-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, #001d3a 100%);
}

.video-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  padding-top: 90px;
  padding-bottom: 24px;
}
@media (min-width: 768px) {
  .video-hero-content {
    padding-bottom: 40px;
  }
}
@media (min-width: 1200px) {
  .video-hero-content {
    padding-bottom: 40px;
  }
}

.video-hero-title {
  margin: 0 0 12px;
  font-family: var(--font-bettertogether-medium);
  font-weight: 500;
  font-size: 28px;
  line-height: 38px;
  color: #ffffff;
}

.video-hero-desc {
  max-width: 520px;
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-bettertogether-regular);
  font-size: 18px;
  line-height: 28px;
}
.video-hero-desc-toggle {
  display: none;
}
@media (max-width: 767.98px) {
  .video-hero-desc {
    display: -webkit-box;
    overflow: hidden;
    margin-bottom: 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .video-hero-desc.is-expanded {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
  }

  .video-hero-desc-toggle {
    display: inline-flex;
    align-self: flex-start;
    margin: 2px 0 12px;
    padding: 0;
    border: 0;
    color: #ffffff;
    background: transparent;
    font-family: var(--font-bettertogether-medium);
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
  }
}
@media (min-width: 768px) {
  .video-hero-title {
    font-size: 32px;
    line-height: 40px;
  }
}
@media (min-width: 1200px) {
  .video-hero-title {
    font-size: 48px;
    line-height: 58px;
  }
}

.video-hero-episode {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-bettertogether-regular);
  font-size: 14px;
  line-height: 20px;
}

.video-hero-play {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 20px;
}
@media (hover: hover) and (pointer: fine) {
  .video-hero-play:hover {
    opacity: 0.75;
  }
}

/* Section title + pills + search, centered under the hero */
.video-home-intro {
  padding-top: 24px;
  padding-bottom: 7px;
}
.video-home-heading {
  margin: 0 0 12px;
  font-family: var(--font-bettertogether-medium);
  font-weight: 500;
  font-size: 28px;
  line-height: 38px;
  color: #ffffff;
}
@media (min-width: 768px) {
  .video-home-heading {
    font-size: 32px;
    line-height: 40px;
  }
}
.video-home-intro .category-pill-edge {
  margin-top: 0;
}
.video-home-intro .zone-search {
  margin-inline: auto;
}

/* Category video rows: white headings/captions on the dark gradient */
.gradient-shell .section-head h3 {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #ffffff;
  font-size: 18px;
  line-height: 28px;
}
.gradient-shell .section-head .see-all {
  color: #ffffff;
  font-size: 14px;
  line-height: 20px;
}
@media (min-width: 992px) {
  .gradient-shell .section-head h3 {
    font-size: 24px;
    line-height: 34px;
  }
}
.gradient-shell .see-all:active,
.gradient-shell .see-all:focus {
  color: #ffffff;
}
@media (hover: hover) and (pointer: fine) {
  .gradient-shell .see-all:hover {
    color: rgba(255, 255, 255, 0.75);
  }
  .gradient-shell .section-head h3 a:hover {
    color: rgba(255, 255, 255, 0.75);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.75);
  }
}
.gradient-shell .content-title {
  color: #ffffff;
}
@media (hover: hover) and (pointer: fine) {
  .gradient-shell .content-card:hover .content-title,
  .gradient-shell a:hover .content-title {
    color: rgba(255, 255, 255, 0.75);
  }
}
.video-cat-row .content-thumb {
  width: 100%;
  height: auto;
}
@media (hover: hover) and (pointer: fine) {
  .video-cat-row .swiper {
    overflow: visible !important;
  }
  .video-cat-row .swiper-slide {
    position: relative;
    z-index: 1;
    transform-origin: center center;
    transition: transform 0.25s ease, z-index 0.25s ease;
    will-change: transform;
  }
  .video-cat-row .swiper-slide:hover {
    transform: scale(1.05);
    z-index: 50;
  }
}

/* Video Category */
.video-category-root {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.video-category-page {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  color: #ffffff;
  background: linear-gradient(135deg, #002440 0%, #06346f 48%, #6045fa 100%);
}
.video-category-main {
  min-height: calc(100vh - var(--topbar-h));
  padding: 16px 0 72px;
  background: transparent;
}
.video-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  vertical-align: middle;
}
.video-breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.video-category-main .video-breadcrumb {
  margin-bottom: 24px;
}
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .video-breadcrumb a:hover {
    color: rgba(255, 255, 255, 0.75);
  }
}
.video-category-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.video-category-intro h1 {
  margin: 0;
  font-family: var(--font-bettertogether-medium);
  font-weight: 500;
  font-size: 32px;
  line-height: 40px;
}
.video-category-intro .zone-search {
  width: min(320px, 100%);
  margin: 0;
}
.video-category-filter {
  display: flex;
  align-items: flex-start;
  min-height: 32px;
  margin-bottom: 16px;
  color: #ffffff;
}
.video-category-filter-label {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  min-height: 32px;
  padding: 4px 10px 4px 0;
  border: 0;
  color: inherit;
  background: transparent;
  font-family: var(--font-bettertogether-medium);
  font-size: 16px;
  line-height: 24px;
}
.video-category-filter-label img {
  filter: none;
  opacity: 1;
}
.video-category-filter .filter-content,
.video-category-filter-form {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.video-category-filter-form .multiselect-native-select {
  display: inline-flex;
}
.video-category-filter-form .filter-groups-bullets {
  color: var(--primary-temp);
  background: #ffffff;
}
.video-category-filter-form .multiselect.dropdown-toggle::after {
  color: #ffffff;
  opacity: 1;
}
.video-category-filter-form .multiselect.btn,
.video-category-filter-form .btn-group > .btn {
  padding: 4px 8px;
  border: 0;
  color: #ffffff;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  line-height: 24px;
}
.video-category-filter-form > span {
  padding-inline: 2px;
  color: rgba(255, 255, 255, 0.35);
}
.video-category-filter-reset {
  padding: 4px 8px;
  border: 0;
  color: #ffffff;
  background: transparent;
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  line-height: 24px;
}
.video-category-results-head {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 8px;
}
.video-category-results-head h3 {
  color: #ffffff;
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: #ffffff;
  background-clip: initial;
}
.video-category-results-head span {
  color: #ffffff;
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}
.video-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 15px;
}
.video-category-card {
  min-width: 0;
  color: #ffffff;
  text-decoration: none;
}
.video-category-card img {
  width: 100%;
  aspect-ratio: 0.7;
  display: block;
  border-radius: 20px;
  object-fit: cover;
}
.video-category-card span {
  display: block;
  margin-top: 8px;
  overflow: hidden;
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.video-category-empty {
  padding: 48px 0;
  text-align: center;
  font-size: 16px;
  line-height: 24px;
}
.video-category-footer {
  background: #f4f5f7;
}
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .video-category-card {
    position: relative;
    z-index: 1;
    transform-origin: center center;
    transition: transform 0.25s ease, z-index 0.25s ease;
    will-change: transform;
  }
  .video-category-card:hover {
    z-index: 50;
    transform: scale(1.05);
  }
  .video-category-filter-form .multiselect.dropdown-toggle.btn.btn_w:hover,
  .video-category-filter-form .btn-group > .btn:hover,
  .video-category-filter-reset:hover,
  .video-category-card:hover span {
    color: rgba(255, 255, 255, 0.75) !important;
  }
}
@media (min-width: 768px) {
  .video-category-filter-label {
    pointer-events: none;
    cursor: default;
  }
}
@media (max-width: 991.98px) {
  .video-category-filter-label:hover,
  .video-category-filter-form .multiselect.dropdown-toggle.btn.btn_w:hover,
  .video-category-filter-form .multiselect.dropdown-toggle.btn.btn_w:focus,
  .video-category-filter-form .multiselect.dropdown-toggle.btn.btn_w:focus-visible,
  .video-category-filter-form .multiselect.dropdown-toggle.btn.btn_w:focus-within,
  .video-category-filter-form .btn-group > .btn:hover,
  .video-category-filter-reset:hover,
  .video-category-card:hover,
  .video-category-card:hover span {
    color: #ffffff !important;
  }
}
@media (min-width: 576px) {
  .video-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .video-category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .video-category-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .video-category-main {
    padding-top: 12px;
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }
  .video-category-filter {
    display: block;
  }
  .video-category-filter-label {
    cursor: pointer;
  }
  .video-category-filter .filter-content {
    display: none;
    padding-top: 4px;
  }
  .video-category-filter .filter-content.is-open {
    display: flex;
  }
}

/* Video Playlist */
.video-playlist-page {
  padding-bottom: 0;
  color: #333333;
  background: #ffffff;
  font-family: var(--font-bettertogether-regular);
}
.playlist-hero {
  position: relative;
  overflow: visible;
  color: #ffffff;
}
.playlist-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.playlist-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 29, 58, 0.3) 62%, #f2f4f6 100%);
}
.playlist-hero .topbar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.playlist-hero-content {
  position: relative;
  z-index: 1;
  padding-top: 90px;
  padding-bottom: 30px;
}
.playlist-hero-content .video-breadcrumb {
  margin-bottom: 20px;
}
.playlist-hero-content h1 {
  margin: 0 0 7px;
  font-family: var(--font-bettertogether-medium);
  font-weight: 500;
  font-style: normal;
  font-size: 48px;
  line-height: 58px;
  letter-spacing: 0;
  vertical-align: middle;
  color: #ffffff;
}
.playlist-hero-desc {
  width: min(534px, 100%);
  margin: 0 0 4px;
  font-size: 18px;
  line-height: 28px;
}
.playlist-episode-count {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 20px;
}
.playlist-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
}
.playlist-actions a,
.playlist-actions button {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  color: #ffffff;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}
.playlist-author {
  color: #333333;
  font-size: 16px;
  line-height: 24px;
}
.playlist-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #333333;
  font-size: 14px;
  line-height: 20px;
}
.playlist-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.playlist-list-section {
  padding: 20px 0 60px;
  background: #f2f4f6;
}
.playlist-list-section h2 {
  margin: 0;
  font-family: var(--font-bettertogether-medium);
  font-size: 24px;
  font-weight: 500;
  line-height: 34px;
}
.playlist-list-count {
  margin: 0 0 10px;
  color: #888888;
  font-size: 14px;
  line-height: 20px;
}
.playlist-list {
  display: grid;
  gap: 10px;
}
.playlist-list-item {
  display: grid;
  grid-template-columns: 195px minmax(0, 1fr);
  gap: 15px;
  color: #333333;
  text-decoration: none;
}
.playlist-list-thumb {
  width: 195px;
  height: 110px;
  display: block;
  overflow: hidden;
  border-radius: 10px;
}
.playlist-list-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.playlist-list-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.playlist-list-copy strong {
  overflow: hidden;
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.playlist-list-copy > span,
.playlist-list-copy small {
  color: #888888;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.playlist-list-copy > span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.playlist-recommended {
  padding: 0 0 60px;
  background: #ffffff;
}
.playlist-recommended-head {
  padding-top: 20px;
  padding-bottom: 10px;
}
.playlist-recommended-swiper .content-card {
  min-width: 0;
  color: #333333;
  text-decoration: none;
}
.playlist-recommended-swiper .content-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 195 / 283;
  border-radius: 20px;
}
.playlist-recommended-swiper .content-title {
  display: block;
  font-size: 16px;
  line-height: 24px;
}
.video-playlist-page .site-footer {
  margin-top: 0;
}
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .playlist-recommended-swiper .swiper-slide {
    position: relative;
    z-index: 1;
    transform-origin: center center;
    transition: transform 0.25s ease, z-index 0.25s ease;
    will-change: transform;
  }
  .playlist-recommended-swiper .swiper-slide:hover {
    z-index: 50;
    opacity: 1;
    transform: scale(1.05);
  }
  .playlist-list-item:hover .playlist-list-thumb img {
    transform: scale(1.05);
  }
  .playlist-actions a:hover,
  .playlist-actions button:hover {
    opacity: 0.75;
  }
}
@media (max-width: 991.98px) {
  .video-playlist-page {
    padding-bottom: calc(var(--bottomnav-h) + var(--safe-bottom));
  }
}
@media (max-width: 767.98px) {
  .playlist-hero-content h1 {
    font-size: 28px;
    line-height: 38px;
  }
  .playlist-list-item {
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 10px;
  }
  .playlist-list-thumb {
    width: 140px;
    height: 79px;
  }
  .playlist-list-copy > span {
    display: none;
  }
}

/* Shared mobile hero summary: keep the collapsed copy at three lines on every video page. */
@media (max-width: 767.98px) {
  .video-hero-desc {
    min-height: 84px;
    margin-bottom: 0;
  }
}

/* Video Watch */
.video-watch-page {
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  color: #333333;
  background: #ffffff;
  font-family: var(--font-bettertogether-regular);
}
.video-watch-page .page-content,
.video-watch-page .content-wrapper,
.video-watch-page .content-inner {
  min-height: 0;
}
.video-watch-page .content-inner {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Keep the primary page scrollbar compact everywhere (global, not per-page). */
.content-inner {
  scrollbar-width: thin;
  scrollbar-color: #888888 transparent;
}
.content-inner::-webkit-scrollbar {
  width: 6px;
}
.content-inner::-webkit-scrollbar-track {
  background: transparent;
}
.content-inner::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #888888;
}

/* Reserve space for the fixed bottom-nav on mobile/tablet, globally — pages
   should not need their own page-specific bottom padding for this. */
@media (max-width: 991.98px) {
  .content-inner {
    padding-bottom: 80px;
  }
}
.video-watch-page .content {
  flex: 0 0 auto;
  min-height: 100%;
}
.video-watch-topnav {
  height: 70px !important;
  min-height: 70px;
  max-height: 70px;
  flex: 0 0 70px;
  box-sizing: border-box;
  background: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.video-watch-topnav > .page-pad {
  height: 70px !important;
  min-height: 70px;
  max-height: 70px;
  box-sizing: border-box;
}
.video-watch-topnav .brand,
.video-watch-topnav .avatar-link {
  align-items: center;
}
.video-watch-topnav .brand img {
  /* display: block; */
  /* width: 161px; */
  /* height: 24px; */
}
.video-watch-topnav .avatar {
  width: 32px;
  height: 32px;
}
.video-watch-topnav .toplinks a {
  color: #333333;
}
.video-watch-topnav .toplinks a:hover {
  color: rgba(51, 51, 51, 0.75);
}
.video-watch-player {
  position: relative;
  height: min(563px, calc(100vw * 563 / 1366));
  min-height: 260px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  background: #000000;
}
.video-watch-player video {
  width: min(1000px, 100%);
  height: 100%;
  display: block;
  object-fit: cover;
  cursor: pointer;
}
.video-watch-player > .video-js {
  width: min(1000px, 100%);
  height: 100%;
  flex: 0 1 1000px;
  background: #000000;
}
.video-watch-player .video-js .vjs-tech,
.video-watch-player .video-js .vjs-poster,
.video-watch-player .video-js .vjs-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-watch-player .video-js .vjs-big-play-button,
.video-watch-player .video-js .vjs-picture-in-picture-control {
  display: none !important;
}
.video-watch-player .video-js .vjs-control-bar {
  z-index: 3;
  transition: none !important;
}
.video-watch-player:not(.is-paused) .video-js .vjs-control-bar {
  visibility: hidden;
  opacity: 0 !important;
  pointer-events: none;
}
.video-watch-player.is-paused .video-js .vjs-control-bar {
  display: flex !important;
  visibility: visible;
  opacity: 1 !important;
  pointer-events: auto;
}
.video-watch-play {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: none !important;
}
.video-watch-play.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.video-watch-play .vdo-wall-play-state {
  position: static;
  width: 80px;
  height: 80px;
  opacity: 1;
  transform: none;
  border: 2px solid #888888;
  color: #888888;
  background: rgba(255, 255, 255, 0.1);
  transition: none !important;
}
.video-watch-play .vdo-wall-play-state.vdo-wall-play-state--custom-icon {
  border: none;
  background: none;
}
.video-watch-play-icon {
  width: 32px;
  height: 32px;
  display: block;
  margin-left: 4px;
}
.video-watch-content {
  padding-top: 20px;
  padding-bottom: 60px;
}
.video-watch-heading-row {
  margin-bottom: 23px;
}
.video-watch-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.video-watch-meta-row,
.video-watch-author,
.video-watch-main,
.video-watch-sidebar {
  min-width: 0;
}
.video-watch-main h1 {
  margin: 0 0 6px;
  color: #0060d2;
  font-family: var(--font-bettertogether-medium);
  font-size: 24px;
  font-weight: 500;
  line-height: 34px;
}
.video-watch-author {
  display: flex;
  align-items: center;
  gap: 15px;
}
.video-watch-author img {
  width: 40px;
  height: 40px;
  border: 1px solid #ececec;
  border-radius: 50%;
  object-fit: cover;
}
.video-watch-author strong,
.video-watch-author span {
  display: block;
  font-weight: 400;
}
.video-watch-author strong {
  font-size: 16px;
  line-height: 24px;
}
.video-watch-author span {
  color: #888888;
  font-size: 14px;
  line-height: 20px;
}
.video-watch-actions {
  display: flex;
  gap: 10px;
}
.video-watch-actions > button,
.video-watch-action-dropdown > button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #ececec;
  border-radius: 50%;
  color: #888888;
  background: #ffffff;
  font-size: 18px;
  line-height: 28px;
}
.video-watch-action-icon {
  display: block;
  width: 19px;
  height: 17px;
  object-fit: contain;
}
.video-watch-action-icon--bookmark {
  width: 14px;
  height: 16px;
}
.video-watch-action-icon--share {
  width: 20px;
  height: 20px;
}
.video-watch-action-icon--more {
  width: 3px;
  height: 15px;
}
.video-watch-action-dropdown .dropdown-menu {
  width: 230px;
  margin-top: 10px !important;
  padding: 8px;
  border: 1px solid #ececec;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.video-watch-action-dropdown .dropdown-menu[data-popper-placement^="top"] {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}
.video-watch-action-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #333333;
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
}
.video-watch-action-dropdown .dropdown-item i {
  width: 20px;
  flex: 0 0 20px;
  color: #888888;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
}
.video-watch-share-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ececec;
  border-radius: 50%;
  color: #888888;
  background: #ffffff;
}
.video-watch-action-dropdown .video-watch-share-icon i {
  width: auto;
  min-width: 0;
  color: inherit;
  font-size: 15px;
  line-height: 1;
}
.video-watch-share-icon img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(57%) sepia(0%) saturate(0%) hue-rotate(162deg) brightness(94%) contrast(90%);
}
.video-watch-action-dropdown .dropdown-divider {
  margin: 6px 0;
  border-color: #ececec;
}
.video-watch-more .video-watch-report {
  color: #333333;
}
.video-watch-more .video-watch-report i {
  color: #333333;
}
.video-watch-main h2 {
  margin: 0 0 6px;
  font-family: var(--font-bettertogether-medium);
  font-size: 24px;
  font-weight: 500;
  line-height: 34px;
}
.video-watch-main > p {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
}
.video-watch-main h1,
.video-watch-main h2,
.video-watch-main > p,
.video-watch-playlist a span {
  overflow-wrap: anywhere;
}

/* video_watch.html reuses the shared .article-body class (defined further
   down, next to library_content.html's usage) to render the "รายละเอียด"
   CKEditor field -- same global rich-text class on both pages instead of a
   page-specific duplicate, so any future page can reuse it too.

   .video-watch-main h1/h2 (the page's own title row) has its own
   mobile-only font-size override below 768px -- plain ".article-body
   h1/h2" would tie its specificity and lose to that rule at mobile widths
   purely on source order, shrinking this nested rich-text content too even
   though it has nothing to do with the page title. Scoping through the
   ancestor (.video-watch-main .article-body h1) raises specificity enough
   to always win, at every breakpoint. library_content.html's .article-body
   has no such ancestor, so it's unaffected. */
.video-watch-main .article-body {
  margin-top: 20px;
}
.video-watch-main .article-body h1 {
  color: #0060d2;
  font-size: 24px;
  line-height: 34px;
}
.video-watch-main .article-body h2 {
  font-size: 24px;
  line-height: 34px;
}

.video-watch-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
  margin-top: 20px;
}
.video-watch-tags-label {
  flex: 0 0 100%;
  color: #888888;
  font-size: 14px;
  line-height: 20px;
}
.video-watch-sidebar {
  margin-left: auto;
}
.video-watch-playlist-head {
  margin-bottom: 10px;
  color: #888888;
  font-size: 14px;
  line-height: 20px;
}
.video-watch-playlist-head h2 {
  margin: 0;
  color: #333333;
  font-family: var(--font-bettertogether-medium);
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
}
.video-watch-playlist-head span {
  display: block;
}
.video-watch-playlist-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.video-watch-playlist {
  display: grid;
  gap: 10px;
}
.video-watch-playlist a {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px;
  color: #333333;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
}
.video-watch-playlist a.active {
  color: #0060d2;
}
.video-watch-playlist-thumb {
  display: block;
  width: 120px;
  height: 68px;
  overflow: hidden;
  border: 1px solid #ececec;
  border-radius: 10px;
}
.video-watch-playlist img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.video-watch-playlist-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  transition: color 0.25s ease;
}
.video-watch-ad {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin-top: 20px;
  border-radius: 20px;
  object-fit: cover;
}
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .video-watch-player:hover .vdo-wall-play-state {
    opacity: 0.75;
  }
  .video-watch-actions > button:hover,
  .video-watch-action-dropdown > button:hover {
    color: var(--primary-temp);
    border-color: #ececec;
  }
  .btn-capsule-outline:hover {
    color: #ffffff !important;
    background: var(--primary-temp) !important;
    border-color: var(--primary-temp) !important;
  }
  .video-watch-actions button:hover .video-watch-action-icon {
    filter: brightness(0) saturate(100%) invert(27%) sepia(92%) saturate(2012%) hue-rotate(198deg) brightness(89%) contrast(101%);
  }
  .video-watch-action-dropdown .dropdown-item:hover {
    color: var(--primary-temp);
    background: #f5f8fc;
  }
  .video-watch-action-dropdown .dropdown-item:hover i,
  .video-watch-action-dropdown .dropdown-item:hover .video-watch-share-icon {
    color: var(--primary-temp);
  }
  .video-watch-action-dropdown .dropdown-item:hover .video-watch-share-icon img {
    filter: brightness(0) saturate(100%) invert(27%) sepia(92%) saturate(2012%) hue-rotate(198deg) brightness(89%) contrast(101%);
  }
  .video-watch-more .video-watch-report:hover,
  .video-watch-more .video-watch-report:focus {
    color: #333333;
  }
  .video-watch-more .video-watch-report:hover i,
  .video-watch-more .video-watch-report:focus i {
    color: #333333;
  }
  .video-watch-playlist a:hover .video-watch-playlist-thumb img {
    transform: scale(1.05);
  }
  .video-watch-playlist a:hover .video-watch-playlist-title {
    color: var(--primary-temp);
  }
}
@media (max-width: 991.98px) {
  .video-watch-player {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .video-watch-player video {
    width: 100%;
  }
  .video-watch-action-dropdown .dropdown-item {
    -webkit-tap-highlight-color: transparent;
  }
  .video-watch-action-dropdown .dropdown-item:hover,
  .video-watch-action-dropdown .dropdown-item:focus,
  .video-watch-action-dropdown .dropdown-item:focus-visible,
  .video-watch-action-dropdown .dropdown-item:active {
    color: #333333 !important;
    background: transparent !important;
  }
  .video-watch-more .video-watch-report:hover,
  .video-watch-more .video-watch-report:focus,
  .video-watch-more .video-watch-report:focus-visible,
  .video-watch-more .video-watch-report:active {
    color: #333333 !important;
  }
  .video-watch-more .video-watch-report:hover i,
  .video-watch-more .video-watch-report:focus i,
  .video-watch-more .video-watch-report:focus-visible i,
  .video-watch-more .video-watch-report:active i {
    color: #333333 !important;
  }
  .video-watch-content {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }
  .video-watch-content > .row {
    margin-right: 0;
    margin-left: 0;
  }
  .video-watch-content .video-watch-main,
  .video-watch-content .video-watch-sidebar {
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
  }
  .video-watch-heading-row,
  .video-watch-meta-row {
    width: 100%;
  }
  .video-watch-sidebar {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }
  .video-watch-playlist a {
    grid-template-columns: 120px minmax(0, 1fr);
  }
  .video-watch-ad {
    width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .video-watch-playlist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575.98px) {
  .video-watch-player {
    aspect-ratio: 16 / 9;
  }
  .video-watch-content {
    padding-top: 20px;
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }
  .video-watch-main h1 {
    font-size: 18px;
    line-height: 28px;
  }
  .video-watch-main h2 {
    font-size: 18px;
    line-height: 28px;
  }
  .video-watch-main > p {
    font-size: 16px;
    line-height: 24px;
  }
  .video-watch-meta-row {
    flex-wrap: wrap;
    gap: 14px;
  }
  .video-watch-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .video-watch-play .vdo-wall-play-state {
    width: 60px;
    height: 60px;
  }
  .video-watch-play .vdo-wall-play-state--custom-icon .vdo-wall-play-icon {
    width: 60px;
    height: 60px;
  }
}

/* =========================
   Game page
========================= */
.game-hero-media {
  position: relative;
  overflow: hidden;
  /* Reserve space for the banner before it loads (slow connections) so the
     topbar/overlay -- which are position:absolute and don't otherwise
     contribute height -- can't collapse onto the content below. Values are
     the image's real height at each breakpoint's lower bound, so the
     reserved box is never taller than what the loaded image will need. */
  min-height: 180px;
}
.game-hero-media picture {
  display: block;
}
.game-hero-bg {
  display: block;
  width: 100%;
  height: auto;
}
.game-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}
.game-hero-media .topbar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.game-list-section {
  padding: 20px 0;
  background: #ffffff;
}
.game-section-title {
  margin: 0;
  padding-bottom: 10px;
  color: var(--nav-blue);
  font-family: var(--font-bettertogether-medium);
  font-size: 24px;
  font-weight: 500;
  line-height: 34px;
}
.game-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 15px 15px;
}
.game-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  border: 1px solid #e4e4e4;
  border-radius: 20px;
  box-shadow: 0px 0px 15px 0px #00000026;
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
}
.game-card-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 300 / 169;
  overflow: hidden;
}
.game-card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.game-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 15px 18px 18px;
}
.game-card-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.game-card-meta {
  color: #888888;
  font-family: var(--font-bettertogether-regular);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0px;
}
@media (min-width: 768px) {
  .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .game-hero-media {
    min-height: 240px;
  }
}
@media (min-width: 992px) {
  .game-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .game-hero-media {
    min-height: 310px;
  }
}
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .game-card {
    position: relative;
    z-index: 1;
    transform-origin: center center;
    transition: transform 0.25s ease, z-index 0.25s ease;
    will-change: transform;
  }
  .game-card:hover {
    z-index: 50;
    transform: scale(1.05);
  }
  .game-card:hover .game-card-title {
    color: var(--primary-temp);
  }
}
/* /Video Watch */

/* =========================
   Better Together type scale (font-size / line-height pairs)
========================= */
.fz-12 {
  font-size: 12px;
  line-height: 16px;
}
.fz-14 {
  font-size: 14px;
  line-height: 20px;
}
.fz-16 {
  font-size: 16px;
  line-height: 24px;
}
.fz-18 {
  font-size: 18px;
  line-height: 28px;
}
.fz-24 {
  font-size: 24px;
  line-height: 34px;
}
.fz-28 {
  font-size: 28px;
  line-height: 38px;
}
.fz-32 {
  font-size: 32px;
  line-height: 40px;
}

/* Utility: 1px gray rule, e.g. to separate a white topnav from a white
   page body on pages that need the extra division - add this class at the
   call site only, never inside a shared component's own rule, since not
   every page that reuses that component wants the line. */
.border-bottom-gray {
  border-bottom: 1px solid #e4e4e4;
}

/* =========================
   Static text page (e.g. Privacy Policy, Terms): centered readable column
========================= */
.policy-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 0 60px;
  color: var(--text);
  font-family: var(--font-bettertogether-regular);
  font-size: 18px;
  line-height: 28px;
}
.policy-content h1 {
  margin: 0 0 24px;
  color: var(--primary-temp);
  font-family: var(--font-bettertogether-medium);
  font-size: 24px;
  font-weight: 500;
  line-height: 34px;
  text-align: center;
}
.policy-content p {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 28px;
}
.policy-content .policy-subhead {
  margin: 28px 0 8px;
  color: var(--text);
  font-family: var(--font-bettertogether-medium);
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
}
.policy-content ol.policy-toplist {
  counter-reset: policy-item;
  margin: 0;
  padding-left: 24px;
}
.policy-content ol.policy-toplist > li {
  margin-bottom: 20px;
  padding-left: 4px;
}
.policy-content ol.policy-bracket {
  list-style: none;
  counter-reset: policy-bracket;
  margin: 8px 0;
  padding-left: 24px;
}
.policy-content ol.policy-bracket > li {
  position: relative;
  margin-bottom: 8px;
}
.policy-content ol.policy-bracket > li::before {
  content: counter(policy-bracket) ")";
  counter-increment: policy-bracket;
  position: absolute;
  left: -24px;
}
.policy-content ul {
  margin: 8px 0;
  padding-left: 20px;
}
.policy-content ul li {
  margin-bottom: 8px;
}
.policy-content a {
  color: var(--primary-temp);
}
/* EDU World More Login */
/* .page_form: reusable form-page shell (width tokens), matches html_plook's
   convention. Unscoped so any future page (login, register, ...) can reuse it
   just by nesting a .wrap/.wrap-md/.wrap-lg/.wrap-xl inside .page_form.
   Note: the top spacing goes on <main> (not .page_form, and not .content)
   because .page_form is marked up with Bootstrap's .pt-0 (!important) which
   would defeat a padding-top set on itself, and .content wraps the topbar
   too (padding there would push the topbar down along with the content).
   Also unlike plook, this project's topbar is position:static (not fixed),
   so no --nav-h offset is needed. */
main:has(> .page_form) {
  padding-top: 40px;
}
.page_form {
  padding-bottom: 0;
}
.page_form .wrap-md {
  width: min(620px, calc(100% - 0px));
}

@media (min-width: 992px) {
  /* Mobile/tablet already get bottom clearance from the global
     .content-inner padding-bottom (reserved for the bottom-nav); desktop
     has no bottom-nav, so give the last item some breathing room instead
     of hugging the viewport edge. */
  .page_form {
    padding-bottom: 60px;
  }
}

.more-login-profile {
  padding: 0 0 30px;
}

.more-login-profile .face-profile {
  width: 100px;
  height: 100px;
  border-radius: 999px;
}

.more-login-profile .btn-secondary {
  min-width: 100px;
}

.more-login-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.more-login-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 2px 15px;
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  background: #ffffff;
  color: #333333;
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
}

.more-login-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  color: #333333;
}

.more-login-icon svg,
.more-login-icon img {
  display: block;
  max-width: 20px;
  max-height: 20px;
}

.more-login-item span:not(.more-login-icon):not(.more-login-meta) {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.more-login-meta {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  padding-left: 15px;
  color: #888888;
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  line-height: 22px;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.more-login-section-title {
  margin-top: 20px;
  margin-bottom: 10px;
  padding: 0;
  color: #888888;
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  line-height: 24px;
}

.more-login-menu-settings {
  gap: 10px;
}

.menu-group-divider {
  height: 0;
}

.dropdown-menu-profile .menu-group-divider {
  height: 15px;
}

.more-login-menu-settings .more-login-item {
  min-height: 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.more-login-menu-settings .more-login-icon {
  flex-basis: 20px;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.more-login-menu-settings .more-login-item.has-meta {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  column-gap: 10px;
}

.more-login-menu-settings .more-login-item.has-meta .more-login-icon {
  margin-right: 0;
}

.more-login-menu-settings .more-login-item.has-meta .more-login-meta {
  max-width: none;
  margin-left: 0;
  padding-left: 15px;
  justify-self: end;
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .more-login-item:hover,
  .more-login-item:focus,
  .more-login-item:hover .more-login-icon,
  .more-login-item:focus .more-login-icon,
  .more-login-item:hover .more-login-meta,
  .more-login-item:focus .more-login-meta {
    color: var(--primary-temp);
  }
}

@media (max-width: 767.98px) {
  main:has(> .page_form) {
    padding: 20px 20px 0;
  }

  .page_form .wrap-md,
  .page_form .wrap-lg {
    width: 100%;
  }
}
/* /EDU World More Login */

/* =========================
   G CONNECT public page
   ========================= */
.gconnect-landing,
.gconnect-hero-banner {
  --gconnect-primary: #016e75;
  --gconnect-text: #333333;
  --gconnect-muted: #555555;
  --gconnect-soft: var(--gray-200);
}

.gconnect-landing {
  background-color: #ffffff;
  color: var(--gconnect-text);
  font-family: var(--font-bettertogether-regular), sans-serif;
}

.gconnect-page-container {
  width: min(100% - 120px, 1246px);
  margin-inline: auto;
}

/* The nav + banner strip is the shared .game-hero/.game-hero-media pattern
   (see "Game page" section); these rules only scope its size/overlay for
   this page so game.html is untouched. Height now matches VLEARN's own
   home.html hero exactly: an aspect-ratio box (same ratio VLEARN's banner
   images use at the same two breakpoints) instead of height:auto, with our
   own (portrait-shaped) source images cover-cropped to fill it. VLEARN's
   hero carries no text, so its ratio alone can run shorter than our hero
   copy needs; min-height is a per-tier floor (see the breakpoints below)
   so the box only grows past VLEARN's own height where the copy actually
   requires it, instead of the text overlapping the section beneath it. */
.gconnect-hero-banner .game-hero-media {
  width: 100%;
  aspect-ratio: 1040 / 578;
  min-height: 555px;
  overflow: visible;
}

@media (min-width: 768px) {
  .gconnect-hero-banner .game-hero-media {
    /* aspect-ratio dropped here: it kept scaling taller with viewport
       width (440-620px across common desktop sizes), so a plain height
       is what actually lets this be tuned directly, the same way
       min-height alone governs the mobile rule above. */
    aspect-ratio: auto;
    min-height: 0;
    height: 440px;
  }
}

@media (min-width: 1600px) {
  .gconnect-hero-banner .game-hero-media {
    height: 511px;
  }
}

@media (min-width: 1920px) {
  .gconnect-hero-banner .game-hero-media {
    height: 615px;
  }
}

@media (min-width: 2560px) {
  .gconnect-hero-banner .game-hero-media {
    height: 820px;
  }
}

.gconnect-hero-banner .game-hero-media picture {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.gconnect-hero-banner .game-hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

@media (min-width: 768px) {
  .gconnect-hero-banner .game-hero-bg {
    /* object-position's horizontal value has no effect here: the source is
       a tall portrait crop, so cover always scales it to match the box's
       width exactly -- there's no horizontal slack to slide within at any
       box size. Scale up first to create that slack, anchored to the left
       edge, then let it grow off the right side (clipped by picture's own
       overflow:hidden above) to pan the visible subject further right. */
    object-position: center 65%;
    transform: scale(1.45);
    transform-origin: left center;
  }
}

@media (min-width: 992px) {
  .gconnect-hero-banner .game-hero-bg {
    object-position: center 25%;
    transform: none;
  }
}

.gconnect-hero-banner .game-hero-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 35%);
}

/* The hero copy/CTA container sits as a normal (non-absolute) child after
   the <picture>, so without this it stacks below the banner image instead
   of overlaying it -- absolutely position it over the same box the topbar
   and overlay already use. */
.gconnect-hero-banner .game-hero-media > .gconnect-page-container {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.gconnect-hero-content {
  width: min(100%, 720px);
  padding-top: 95px;
  color: #ffffff;
}

.gconnect-hero-content h1 {
  margin: 0 0 0px;
  color: #ffffff;
  font-family: var(--font-bettertogether-bold), sans-serif;
  font-size: 64px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
}

.gconnect-hero-content h2 {
  margin: 0 0 0px;
  color: #ffffff;
  font-family: var(--font-bettertogether-medium), sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 38px;
  letter-spacing: 0;
}

.gconnect-hero-content p {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
}

.gconnect-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 20px;
}

.gconnect-btn {
  display: inline-flex;
  min-width: 110px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 50rem;
  padding: 4px 20px;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
}

.gconnect-btn-light {
  min-width: 140px;
  color: var(--gconnect-primary);
  background-color: #ffffff;
  border-color: #ffffff;
}

.gconnect-btn-primary {
  min-width: 120px;
  color: #ffffff;
  background-color: var(--gconnect-primary);
  border-color: var(--gconnect-primary);
}

/* The site-wide a:hover{color:inherit!important} reset (touch/narrow
   guard, see main.css:96) beats these buttons' resting color by
   specificity alone, since a stuck :hover on tap makes them inherit the
   surrounding text color instead -- white-on-white for .gconnect-btn-light.
   Restore each button's own resting color at the same specificity+weight
   so it survives that reset; the real desktop hover swap further below
   still wins there since it's declared after this and matches the guard. */
.gconnect-btn-light:hover {
  color: var(--gconnect-primary) !important;
}

.gconnect-btn-primary:hover {
  color: #ffffff !important;
}

.login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
  font-family: var(--font-bettertogether-regular), sans-serif;
  background-color: transparent;
  border: 1px solid #ffffff;
  border-radius: 50rem;
  padding: 4px 20px;
  text-decoration: none;
  min-width: 110px;
  text-align: center;
  min-height: 40px;
}

.login-button:hover {
  color: #ffffff !important;
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .gconnect-btn-light:hover {
    color: #ffffff !important;
    background-color: var(--gconnect-primary);
    border-color: var(--gconnect-primary);
  }

  .gconnect-btn-primary:hover {
    color: var(--gconnect-primary) !important;
    background-color: #ffffff;
    border-color: var(--gconnect-primary);
  }

  .login-button:hover {
    color: #ffffff !important;
    background-color: var(--gconnect-primary);
    border-color: var(--gconnect-primary);
  }
}

.gconnect-usage {
  padding: 25px 0 25px;
  background-color: #f7f8fa;
  text-align: center;
}

.gconnect-usage-title {
  margin: 0;
  color: #333333;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 34px;
  letter-spacing: 0;
  text-align: center;
  vertical-align: middle;
}

.gconnect-usage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.gconnect-usage-stat {
  min-width: 0;
}

.gconnect-usage-number {
  color: #333333;
  font-family: var(--font-bettertogether-medium), sans-serif;
  font-size: 48px;
  font-weight: 500;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

.gconnect-usage-label {
  margin-top: 0px;
  color: #888888;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
  text-align: center;
}

.gconnect-intro {
  padding: 30px 0 20px;
  text-align: center;
}

.gconnect-brand-title img {
  width: min(455px, 86vw);
  height: auto;
}

.gconnect-intro-title {
  margin: 10px 0 0px;
  color: var(--gconnect-primary);
  font-family: var(--font-bettertogether-medium), sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 32px;
  line-height: 42px;
  letter-spacing: 0;
  text-align: center;
}

.gconnect-intro p {
  margin: 0px 0 0px;
  color: var(--gconnect-text);
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 34px;
  letter-spacing: 0;
  text-align: center;
}

.gconnect-platform {
  padding-bottom: 20px;
}

.gconnect-main-image,
.gconnect-solution-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.gconnect-solutions {
  padding-bottom: 20px;
}

.gconnect-solution + .gconnect-solution {
  margin-top: 20px;
}

.gconnect-solution-copy {
  padding-left: 30px;
  font-size: 18px;
  line-height: 28px;
}

.gconnect-solution-copy h3 {
  margin: 0 0 5px;
  color: var(--gconnect-primary);
  font-family: var(--font-bettertogether-medium), sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 42px;
  letter-spacing: 0;
}

.gconnect-solution-copy p {
  margin-bottom: 0;
  color: #333333;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
}

.gconnect-solution-copy ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #333333;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
}

.gconnect-solution-copy li::before {
  content: "• ";
}

.gconnect-cta {
  padding-bottom: 50px;
}

.gconnect-cta-before-faq {
  padding-bottom: 25px;
}

.gconnect-cta-card {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background-color: var(--gconnect-soft);
  text-align: center;
}

.gconnect-cta-card h2 {
  margin: 0 0 10px;
  color: var(--gconnect-primary);
  font-family: var(--font-bettertogether-medium), sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 42px;
  letter-spacing: 0;
}

.gconnect-faq {
  padding-bottom: 60px;
  background-color: #ffffff;
}

.gconnect-faq-title {
  margin: 0 0 10px;
  color: var(--gconnect-primary);
  font-family: var(--font-bettertogether-medium), sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 42px;
  letter-spacing: 0;
}

.gconnect-faq-list {
  display: grid;
  gap: 14px;
}

.gconnect-faq-item {
  display: block;
  padding: 0;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  background-color: #ffffff;
  color: inherit;
  text-decoration: none;
}

.gconnect-faq-header {
  width: 100%;
  margin: 0;
  padding: 15px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  cursor: pointer;
}

.gconnect-faq-header h3 {
  margin: 0;
  color: #333333;
  font-family: var(--font-bettertogether-medium), sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0;
}

.gconnect-faq-item p {
  margin: 0;
  padding: 0 15px 15px;
  color: #333333;
  font-family: var(--font-bettertogether-regular), sans-serif;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
}

.gconnect-faq-item p a {
  color: #333333;
  text-decoration: none;
}

.gconnect-faq-icon {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  margin-top: 6px;
  border-right: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  transform: rotate(45deg);
}

.gconnect-faq-header[aria-expanded="true"] .gconnect-faq-icon {
  margin-top: 15px;
  transform: rotate(225deg);
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .gconnect-faq-item.card_hover:hover {
    cursor: default;
  }

  .gconnect-faq-header:hover h3 {
    color: var(--gconnect-primary);
  }

  .card_hover:hover {
    background-color: var(--gray-200);
    cursor: pointer;
  }
}

@media (max-width: 991.98px), (hover: none), (pointer: coarse) {
  .gconnect-faq-item.card_hover:hover {
    background-color: #ffffff;
    filter: none;
  }

  .gconnect-faq-header:hover h3 {
    color: #333333;
  }
}

@media (max-width: 1199.98px) {
  .gconnect-page-container {
    width: min(100% - 48px, 960px);
  }

  .gconnect-hero-content {
    width: min(100%, 600px);
    padding-top: 90px;
  }

  .gconnect-hero-content h1 {
    font-size: 56px;
  }

  .gconnect-hero-content h2 {
    font-size: 24px;
    line-height: 34px;
  }

  .gconnect-hero-content p {
    font-size: 16px;
    line-height: 24px;
  }

  .gconnect-usage-number {
    font-size: 42px;
  }

  .gconnect-intro p {
    font-size: 18px;
    line-height: 28px;
  }

  .gconnect-solution-copy {
    padding-left: 24px;
  }

  .gconnect-solution-copy h3,
  .gconnect-cta-card h2 {
    font-size: 28px;
    line-height: 38px;
  }
}

@media (max-width: 991.98px) {
  .gconnect-hero-content {
    width: min(100%, 560px);
  }

  .gconnect-usage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 20px;
  }

  .gconnect-main-image {
    border-radius: 20px;
  }

  .gconnect-solution {
    overflow: hidden;
    border-radius: 20px;
    background-color: #ffffff;
  }

  .gconnect-solution-copy {
    padding: 0px 0px 0;
  }
}

@media (max-width: 767.98px) {
  .gconnect-page-container {
    width: min(100% - 40px, 540px);
  }

  .gconnect-hero-content {
    padding-top: 85px;
  }

  .gconnect-hero-content h1 {
    font-size: 46px;
  }

  .gconnect-hero-content h2 {
    max-width: 430px;
    font-size: 18px;
    line-height: 28px;
    white-space: normal;
  }

  .gconnect-hero-content p {
    max-width: 430px;
    font-size: 16px;
    line-height: 24px;
  }

  .gconnect-usage {
    padding: 20px 0 18px;
  }

  .gconnect-usage-title {
    font-size: 24px;
    line-height: 34px;
  }

  .gconnect-usage-grid {
    margin-top: 20px;
    gap: 20px 16px;
  }

  .gconnect-usage-number {
    font-size: 38px;
  }

  .gconnect-usage-label {
    margin-top: 0px;
    font-size: 16px;
    line-height: 24px;
  }

  .gconnect-intro {
    padding-top: 26px;
  }

  .gconnect-intro p {
    font-size: 18px;
    line-height: 28px;
  }

  .gconnect-platform,
  .gconnect-solutions {
    padding-bottom: 16px;
  }

  .gconnect-solution + .gconnect-solution {
    margin-top: 24px;
  }

  .gconnect-solution-image {
    border-radius: 20px;
    margin-bottom: 10px;
  }

  .gconnect-solution-copy {
    font-size: 16px;
    line-height: 24px;
  }

  .gconnect-solution-copy h3 {
    font-size: 24px;
    line-height: 34px;
  }

  .gconnect-cta {
    padding-bottom: 36px;
  }

  .gconnect-cta-before-faq {
    padding-bottom: 24px;
  }

  .gconnect-cta-card {
    min-height: 180px;
    padding: 28px 16px;
  }

  .gconnect-cta-card h2 {
    font-size: 24px;
    line-height: 34px;
  }

  .gconnect-faq {
    padding-bottom: 36px;
  }

  .gconnect-faq-title {
    font-size: 28px;
    line-height: 38px;
  }

  .gconnect-faq-item {
    padding: 0;
  }

  .gconnect-faq-header {
    width: 100%;
    margin: 0;
    padding: 15px;
  }

  .gconnect-faq-header h3,
  .gconnect-faq-item p {
    font-size: 16px;
    line-height: 24px;
  }
}

@media (max-width: 575.98px) {
  .gconnect-hero-content h1 {
    font-size: 38px;
  }

  .gconnect-hero-content h2 {
    font-size: 16px;
    line-height: 24px;
  }

  .gconnect-hero-content p {
    font-size: 14px;
    line-height: 20px;
  }

  .gconnect-usage-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .gconnect-usage-number {
    font-size: 34px;
  }

  .gconnect-hero-actions {
    gap: 10px;
  }

  .gconnect-btn,
  .login-button {
    min-width: 104px;
    min-height: 38px;
    padding-inline: 18px;
    font-size: 14px;
    line-height: 20px;
  }

  .gconnect-btn-light {
    min-width: 126px;
  }

  .gconnect-intro p {
    font-size: 16px;
    line-height: 24px;
  }

  .gconnect-solution-copy {
    font-size: 16px;
    line-height: 24px;
  }

  .gconnect-solution-copy h3 {
    font-size: 24px;
    line-height: 34px;
  }

  .gconnect-brand-title img {
    width: min(455px, 76vw);
  }
}
/* /G CONNECT public page */

/* Library : Content (public page) - reuses .video-watch-topnav /
   .video-watch-heading-row / .video-watch-author / .video-watch-actions /
   .video-watch-tags / .video-watch-ad / .btn-capsule-outline /
   .card_horizontal.card_border.card-catalog-media-row / .section-head as-is
   (no body class - the base page-content/content-wrapper/content-inner
   layout and body background/overflow are already global, see "Base" above);
   only the genuinely new bits (breadcrumb, title, TOC sidebar, link cards,
   article typography, pagination, recommended grid) get their own rules
   below. */
.content-detail-section {
  padding-top: 20px;
  padding-bottom: 0;
}
.content-detail-meta-row {
  margin-bottom: 10px;
}
.content-detail-divider {
  margin: 30px 0 20px;
  border: none;
  border-top: 1px solid #ececec;
  /* Bootstrap's base hr{opacity:.25} rule otherwise still applies (nothing
     else here touches opacity), fading this nearly invisible on top of the
     already-light #ececec. */
  opacity: 1;
}
.breadcrumb-plain {
  flex-wrap: wrap;
  row-gap: 4px;
  color: #888888;
  margin-bottom: 10px;
}
.breadcrumb-plain a {
  white-space: nowrap;
}
.breadcrumb-plain--sm a:link,
.breadcrumb-plain--sm a:visited {
  color: #333333;
}
.breadcrumb-plain--sm {
  margin-bottom: 0;
  font-size: 16px;
  line-height: 24px;
}
.title-primary {
  margin: 0 0 10px;
  color: #0060d2;
  font-family: var(--font-bettertogether-medium);
  font-size: 24px;
  font-weight: 500;
  line-height: 34px;
  overflow-wrap: anywhere;
}
.video-watch-heading-row {
  margin-bottom: 23px;
}
/* .content-detail-row replaces Bootstrap's row/col-* grid math here: the
   sidebar is split into two siblings (.content-detail-toc-block,
   .content-detail-sidebar), in DOM order toc -> main -> sidebar, so the TOC
   sits ahead of the main content on mobile while the rest (category/level/
   tags/banner) stays after it -- but both still need to share ONE column,
   stacked, next to .content-detail-main on desktop.

   This has to be plain block/float layout, not CSS Grid: with Grid,
   .content-detail-main would need to span both the "toc" and "rest" rows,
   and whenever its own content needs more total height than those two rows
   + gap naturally sum to (which is normal -- the article is almost always
   taller than the sidebar), Grid's track-sizing algorithm grows the row
   TRACKS themselves to cover the difference. That happens during intrinsic
   sizing, before align-content/align-self even apply, so neither can undo
   it -- it reintroduces a large blank gap between .content-detail-toc-block
   and .content-detail-sidebar instead of closing it. Floats have no such
   span-driven height coupling between siblings, so the left column (toc
   stacked with sidebar via clear:left) and the right column (main) size
   independently. Floats do still require DOM order toc -> main -> sidebar
   specifically: a float's top can't be higher than any earlier floated
   sibling in source order (clear included), so if sidebar preceded main in
   the markup, main would get dragged down below it too. */
.content-detail-row {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}
@media (min-width: 992px) {
  .content-detail-row {
    display: block;
    overflow: hidden; /* new BFC: contains the floats below */
  }
  .content-detail-toc-block,
  .content-detail-sidebar {
    float: left;
    clear: left;
    width: calc((100% - 15px) * 0.25);
  }
  .content-detail-sidebar {
    margin-top: 15px;
  }
  .content-detail-main {
    float: right;
    width: calc((100% - 15px) * 0.75);
  }
}
.content-detail-toc-block,
.content-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.text-eyebrow {
  margin: 0 0 10px;
  color: #888888;
  font-size: 14px;
  line-height: 20px;
}
.content-toc-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .content-toc-eyebrow:hover {
    color: var(--primary-temp);
  }
}
/* Reuses .content-toc-collapse's existing grid-template-rows 1fr<->0fr
   animation (built for the per-item toggles) for the whole-TOC toggle too --
   scoped to .content-toc-wrap so it doesn't interact with the per-item
   .content-toc-item:not(.is-expanded) rule. */
.content-toc-wrap:not(.is-expanded) > .content-toc-collapse {
  grid-template-rows: 0fr;
  margin-top: 0;
}
.content-toc-wrap > .content-toc-collapse > .content-toc {
  overflow: hidden;
  min-height: 0;
}
.content-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.content-toc-link,
.content-toc-sublink,
.content-toc-leaf {
  display: block;
  padding: 3px 0;
  color: #333333;
  text-decoration: none;
}
.content-toc-link {
  font-family: var(--font-bettertogether-medium);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.content-toc-sublist .content-toc-sublist {
  margin-left: 10px;
}
.content-toc-sublink,
.content-toc-leaf {
  font-size: 16px;
  line-height: 24px;
}
.content-toc-leaf {
  padding-left: 10px;
}
.content-toc-leaf::before {
  content: "• ";
}
.content-toc-link.is-active {
  color: var(--primary-temp);
}

/* Collapsible TOC rows - a row with a .content-toc-toggle button gets an
   expand/collapse arrow; rows with no children (leaf links) skip both and
   stay plain. grid-template-rows 1fr<->0fr animates height without having
   to measure scrollHeight in JS. */
.content-toc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.content-toc-row .content-toc-link,
.content-toc-row .content-toc-sublink {
  flex: 1 1 auto;
  min-width: 0;
}
.content-toc-toggle {
  display: grid;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: #cccccc;
  font-size: 14px;
  cursor: pointer;
}
.content-toc-toggle i {
  transition: transform 0.2s ease;
}
.content-toc-item.is-expanded > .content-toc-row .content-toc-toggle i {
  transform: rotate(180deg);
}
.content-toc-collapse {
  display: grid;
  grid-template-rows: 1fr;
  margin-top: 2px;
  transition: grid-template-rows 0.25s ease;
}
.content-toc-item:not(.is-expanded) > .content-toc-collapse {
  grid-template-rows: 0fr;
  margin-top: 0;
}
.content-toc-collapse > .content-toc-sublist {
  overflow: hidden;
  min-height: 0;
}
.tags-row--flush {
  margin-top: 0;
}
.tags-row--flush .btn-capsule-outline {
  min-height: 30px;
  padding: 4px 15px;
  font-size: 14px;
  line-height: 20px;
}
.tags-row--flush .btn-capsule-outline:link,
.tags-row--flush .btn-capsule-outline:visited {
  color: #333333 !important;
}
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .tags-row--flush .btn-capsule-outline:hover {
    color: #ffffff !important;
  }
}
.content-detail-sidebar .video-watch-ad {
  margin-top: 0;
}
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .content-toc-link:hover,
  .content-toc-sublink:hover,
  .content-toc-leaf:hover {
    color: var(--primary-temp);
  }
  .breadcrumb-plain a:hover {
    color: var(--primary-temp);
  }
  .content-toc-toggle:hover {
    color: var(--primary-temp);
  }
  .link-card:hover .card-title {
    color: var(--primary-temp);
  }
}

.content-detail-main {
  display: flex;
  flex-direction: column;
}
.content-detail-heading {
  margin: 0 0 10px;
  color: #333333;
  font-family: var(--font-bettertogether-medium);
  font-size: 24px;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: 0;
}
.content-detail-media {
  margin-bottom: 15px;
  overflow: hidden;
  border-radius: 10px;
}
.content-detail-media img {
  display: block;
  width: 100%;
  height: auto;
}
.link-card {
  margin-bottom: 15px;
}
.link-card + .link-card {
  margin-bottom: 20px;
}
.link-card .card-img-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}
/* Below 768px, let the shared .card-catalog-media-row mobile rule (same
   stacked card used by library_cms_content.html) take over instead -- these
   fixed widths were ungated and permanently overrode it at every size. */
@media (min-width: 768px) {
  .link-card .card-link {
    grid-template-columns: 125px minmax(0, 1fr) auto;
  }
  .link-card .card-img-container {
    width: 125px;
    min-width: 125px;
  }
}
.link-card-label {
  margin-bottom: 2px;
  color: #888888;
  font-size: 14px;
  line-height: 20px;
}
.link-card .card-title {
  -webkit-line-clamp: 1;
  line-clamp: 1;
  color: #333333;
  font-size: 16px;
  line-height: 24px;
}

/* New class, doesn't touch .link-card/.card-catalog-media-row: below 768px
   keeps this card's thumbnail+text in one row (square thumb on the left)
   instead of falling through to the shared stacked mobile layout above. */
@media (max-width: 767.98px) {
  .link-card-square {
    /* .card-catalog-media-row's shared min-height:89px (used by 5 other
       pages -- not touched here) was forcing this outer card taller than
       the 70px square content, leaving a gap the border didn't reach. */
    min-height: 0;
    /* overrides the shared rule's border-radius:20px at this width */
    border-radius: 10px;
  }
  .link-card-square .card-link {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
  }
  .link-card-square .card-img-container {
    width: 70px;
    min-width: 70px;
    height: 70px;
    min-height: 0;
    aspect-ratio: 1 / 1;
    border-inline-end: 1px solid #e4e4e4;
    border-bottom: 0;
  }
  .link-card-square .card-body {
    padding: 0 15px 0 0;
  }
  .link-card-square .card-title,
  .link-card-square .link-card-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* Rich-text display for CMS CKEditor content (library_cms_content.html,
   videos_cms_vdo.html) -- typography mirrors .ck's scale exactly (see
   CKEditor 5 block near the top of this file). Shared global class: also
   used by video_watch.html (see the .video-watch-main .article-body
   overrides near .video-watch-main's other rules), and any future page that
   renders CKEditor-authored HTML should reuse this instead of a new class. */
.article-body {
  margin-bottom: 30px;
  color: #333333;
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  overflow-wrap: anywhere;
}
.article-body strong {
  font-family: var(--font-bettertogether-medium);
  font-weight: 500;
}
.article-body i {
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  font-style: italic;
}
.article-body a {
  text-decoration: none;
}
.article-body a:link,
.article-body a:visited,
.article-body a:hover,
.article-body a:active {
  text-decoration: none;
}
.article-body p,
.article-body ul,
.article-body ol,
.article-body blockquote,
.article-body figure {
  margin-top: 0;
  margin-bottom: 0;
}
.article-body ul,
.article-body ol {
  list-style: revert;
  padding-left: 27px;
}
.article-body blockquote {
  margin-left: 0;
  margin-right: 0;
  padding-left: 1.5em;
  padding-right: 1.5em;
  overflow: hidden;
  border-left: 5px solid #cccccc;
  font-style: italic;
}
.article-body h1 {
  margin-top: 0;
  margin-bottom: 0;
  color: #0060d2;
  font-family: var(--font-bettertogether-medium);
  font-weight: 500;
  font-size: 24px;
  line-height: 34px;
}
.article-body h2 {
  margin-top: 0;
  margin-bottom: 0;
  color: #333333;
  font-family: var(--font-bettertogether-medium);
  font-weight: 500;
  font-size: 24px;
  line-height: 34px;
}
.article-body h3 {
  margin-top: 0;
  margin-bottom: 0;
  color: #333333;
  font-family: var(--font-bettertogether-medium);
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
}
.article-body-figure {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  border-radius: 10px;
}
.article-body figure.image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.article-body figure.table {
  overflow-x: auto;
}
.article-body figure.table table {
  width: 100%;
  border-collapse: collapse;
}
.article-body figure.table td,
.article-body figure.table th {
  padding: 8px 12px;
  border: 1px solid #e4e4e4;
}

.content-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.content-pagination .btn-capsule-outline {
  min-width: 100px;
}
.content-pagination .btn-capsule-outline:link,
.content-pagination .btn-capsule-outline:visited {
  color: #333333 !important;
}
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .content-pagination .btn-capsule-outline:hover {
    color: #ffffff !important;
  }
}

.recommend-card {
  display: block;
  color: inherit;
  text-decoration: none;
}
/* Frame stays fixed (border/radius/spacing) while the image scales inside
   it on hover -- same image-only-zoom pattern as "คอนเทนต์มาใหม่" and the
   library_home.html category rows, so the card itself never moves. */
.recommend-card-thumb-frame {
  display: block;
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid #e4e4e4;
  border-radius: 20px;
}
.recommend-card img {
  display: block;
  width: 100%;
  aspect-ratio: 195 / 110;
  object-fit: cover;
}
.recommend-card-title {
  display: -webkit-box;
  margin-bottom: 0px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: #333333;
  font-size: 16px;
  line-height: 24px;
}
.recommend-card-meta {
  display: block;
  color: #888888;
  font-size: 14px;
  line-height: 20px;
}
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .recommend-card:hover .recommend-card-title {
    color: var(--primary-temp);
  }
  .recommend-card img {
    transition: transform 0.35s ease;
  }
  .recommend-card:hover img {
    transform: scale(1.05);
  }
}

@media (max-width: 991.98px) {
  .title-primary {
    font-size: 20px;
    line-height: 1.2;
  }
}
/* /Library : Content (public page) */

/* Library : Home (public page) - reuses .game-hero / .game-hero-media /
   .game-hero-bg / .game-hero-overlay (game.html's hero) / .video-hero-title /
   .video-home-intro / .category-pill / .zone-search / .section-head /
   .content-card / swiper as-is; only the overlay content positioning,
   "คอนเทนต์มาใหม่" featured grid and the subject-filter pill row are new.

   Unlike game.html, this hero has real content (title/pills/search) that can
   need more vertical room than the image's own natural aspect-ratio height
   provides at some widths (e.g. a narrower tablet width where the pill row
   wraps) -- game.html's content is absolutely positioned *over* the
   image, so when that happens here the content simply overflows upward,
   under/behind the topbar. So here the height relationship is inverted: the
   content stays in normal flow (so it always sets the container's height),
   and the image is pulled out of flow with object-fit:cover to always fill
   whatever height the content ends up needing, instead of the other way
   around. */
.library-home-hero-media {
  display: block;
}
.library-home-hero-media picture {
  position: absolute;
  inset: 0;
}
.library-home-hero-media .game-hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.library-home-hero-media .game-hero-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, #0060d2 100%);
}
.library-home-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding-top: 140px;
  padding-bottom: 60px;
}
/* Exact Figma gaps: title->pills 30px, pills->search 20px, search->hero
   bottom 60px (the padding-bottom above). .video-home-intro and
   .category-pill-edge bring their own generic spacing (meant for when
   they're used below a hero, not inside one) -- zeroed out here so these
   three margins are the only thing setting the vertical rhythm. */
.library-home-hero-content .video-hero-title {
  margin-bottom: 30px;
}
.library-home-hero-content .video-home-intro {
  padding-top: 0;
  padding-bottom: 0;
}
.library-home-hero-content .category-pill-edge {
  margin-bottom: 0;
}

/* Subject-filter pills on a white section background - a light variant of
   the hero's .category-pill (which assumes a dark/colored backdrop). */
/* Category rows (ปฐมวัย/ประถมศึกษา/มัธยมศึกษา) - mirrors home_showall.html's
   #videoSection width-control fix (card fills the slide width Swiper gives
   it instead of keeping its own intrinsic size), plus a 16:9 crop on the
   thumbnail that neither reference page sets. */
.library-home-cat-row .swiper-slide {
  height: auto;
}
.library-home-cat-row .content-card {
  width: 100%;
  max-width: 100%;
}
/* .content-thumb used to be a bare <img> here with its own border-radius and
   no frame, so the earlier hover-zoom scaled the whole .swiper-slide
   (card) -- title/meta text included. That doesn't clip, so the enlarged
   card visually overlapped its neighbors. Matches "คอนเทนต์มาใหม่"'s
   .media-thumb-frame/.media-thumb pattern instead: a stable, non-scaling
   frame (clips + keeps the radius) around a thumb that scales inside it, so
   only the image zooms and the card's own layout never moves. */
.library-home-cat-row .content-thumb-frame {
  display: block;
  overflow: hidden;
  border-radius: 20px;
}
.library-home-cat-row .content-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}
/* Desktop-only image-only hover zoom (not the whole card -- see the frame
   comment above). Scoped to .video-cat-swiper specifically (not just
   .library-home-cat-row), since this row also contains the subject-filter
   pill swiper, which shouldn't zoom. */
@media (hover: hover) and (pointer: fine) {
  .library-home-cat-row .video-cat-swiper .content-thumb {
    transition: transform 0.35s ease;
  }
  .library-home-cat-row .video-cat-swiper .content-card:hover .content-thumb {
    transform: scale(1.05);
  }
}

.library-home-subject-edge {
  /* .section-head already reserves 10px of its own padding-bottom below the
     h3 (shared/global, not overridden here), so -3px nets out to 7px total. */
  margin-top: -3px;
  margin-bottom: 0;
  padding-bottom: 15px;
}
.library-home-subject-swiper .swiper-wrapper {
  justify-content: flex-start;
}
.library-home-subject-swiper .swiper-slide {
  width: auto;
  height: auto;
}
.category-pill--light {
  background-color: #ffffff;
  border: 1px solid #ececec;
  color: #333333;
  letter-spacing: 0px;
}
.category-pill--light.active {
  background-color: var(--primary-temp);
  color: #ffffff;
}
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .category-pill--light:hover:not(.active) {
    background-color: var(--primary-temp);
    color: #ffffff;
  }
}
/* Same "inherit isn't neutral" issue as .category-pill.active above --
   restore each state's real resting color on mobile/tablet so the site-wide
   a:hover{color:inherit!important} counter-reset can't change it there. */
@media (max-width: 991.98px), (hover: none), (pointer: coarse) {
  .category-pill--light:hover:not(.active),
  .category-pill--light:focus:not(.active),
  .category-pill--light:active:not(.active) {
    color: #333333 !important;
  }
  .category-pill--light.active:hover,
  .category-pill--light.active:focus,
  .category-pill--light.active:active {
    color: #ffffff !important;
  }
}
/* /Library : Home (public page) */

/* Library : Category (public page) - reuses .topbar/.video-home-topbar,
   .video-breadcrumb, .category-pill/.category-pill-swiper/#...PillSwiper
   (same hero pill pattern as library_home.html, minus the photo), .zone-search,
   .section-head, .content-card/.content-thumb-frame/.content-meta (same
   image-only-hover-zoom card as library_home.html's category rows) as-is.
   Only the gradient hero (no photo here, so not .game-hero) and the
   light-background filter bar + grid are new. */
/* Neutral/reusable name -- not page-scoped, so any page can use this same
   gradient hero (no photo) treatment, not just library_category.html. */
.hero-gradient-banner {
  position: relative;
  background: linear-gradient(180deg, #0060d2 0%, #ffffff 100%);
}
/* .topbar's backdrop-filter:blur(10px) exists to keep nav text readable
   over a busy photo -- on this flat gradient there's nothing worth
   blurring, and the blur's own edge sampling was reading as a faint
   darker band at the topbar's boundary instead. */
.hero-gradient-banner .topbar {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.library-category-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 16px;
  padding-bottom: 40px;
  text-align: center;
}
/* align-items:center above shrink-wraps every child to its own content
   width -- fine for the breadcrumb/title/pill-row (which just need their
   text centered, not their box), but it also shrinks .zone-search's own
   width:100% down to the search icon/input's intrinsic size instead of the
   intended 360px max-width. Restretching these specific children to full
   width keeps their text/content centered (via text-align above) while
   letting .zone-search's own width/max-width resolve correctly again. */
.library-category-hero-content > .page-pad {
  align-self: stretch;
}
.library-category-breadcrumb {
  align-self: flex-start;
  margin-bottom: 30px;
}
/* Scoped override instead of changing the shared .video-breadcrumb a:hover
   rule -- that's also used by video_category.html's dark gradient, where
   white-on-hover still makes sense; this page's hero is solid primary-temp
   blue near the breadcrumb, so it needs its own hover color instead. */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .library-category-breadcrumb a:hover {
    color: var(--primary-temp);
  }
}
/* Neutral/reusable name -- not page-scoped, matches .hero-gradient-banner,
   so any page using that gradient hero can reuse this title style too. */
.hero-gradient-title {
  margin: 0 0 20px;
  color: var(--primary-temp);
  font-family: var(--font-bettertogether-medium);
  font-weight: 500;
  font-size: 32px;
  line-height: 42px;
}
.library-category-hero-content .category-pill-edge {
  width: 100%;
  margin-top: 0;
}
/* .zone-search is a block-level flex box, not inline content, so the
   ancestor's text-align:center doesn't center it -- same reason
   .video-home-intro .zone-search needs this too. */
.library-category-search {
  margin-inline: auto;
}
/* .zone-search's own white icon/text/placeholder is tuned for the other
   hero pages' bolder-colored backdrop -- this page's search box sits
   against the lighter part of the hero, so it needs its own darker-gray
   version instead of overriding the shared rules in place. */
/* Inline SVG instead of the shared .zone-search i (Phosphor) icon -- that
   font only ships one weight, so stroke-width can't be adjusted on it; an
   inline SVG gives real control over the line weight (2px here). */
.library-category-search-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: #888888;
}
.library-category-search input {
  color: #888888;
}
.library-category-search input::placeholder {
  color: #888888;
}
.library-category-search .search-clear-button {
  color: #888888;
}

/* .category-pill's own default (white text, translucent-white background)
   is tuned for the other hero pages -- this page's hero shows pills
   differently (dark text at rest, blue only on interaction), so this is a
   separate modifier rather than overriding the shared rules in place. */
.category-pill--subtle {
  background-color: rgba(255, 255, 255, 0.2);
  color: #333333;
}
.category-pill--subtle:hover {
  /* overrides the shared .category-pill:hover{color:#fff} mask rule */
  color: #333333;
}
/* .active now applies at every screen size (not desktop-only), and the
   hover/focus/tap-specific rule below keeps it blue/white through
   interaction too -- its 2-class + pseudo selector outranks the generic
   site-wide a:hover{color:inherit!important} counter-reset, same way
   .category-pill.active's own hover rule already does. */
.category-pill--subtle.active {
  background-color: var(--primary-temp);
  color: #ffffff;
}
.category-pill--subtle.active:hover,
.category-pill--subtle.active:focus,
.category-pill--subtle.active:active {
  background-color: var(--primary-temp);
  color: #ffffff !important;
}
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .category-pill--subtle:hover:not(.active),
  .category-pill--subtle:focus:not(.active),
  .category-pill--subtle:active:not(.active) {
    background-color: var(--primary-temp);
    color: #ffffff;
  }
}
/* Desktop only per the spec above -- on mobile/tablet non-active pills stay
   at the resting subtle look through hover/focus/tap, same "inherit isn't
   neutral" counter-reset pattern used for the other .category-pill
   variants. .active is excluded here since it's unconditional now. */
@media (max-width: 991.98px), (hover: none), (pointer: coarse) {
  .category-pill--subtle:hover:not(.active),
  .category-pill--subtle:focus:not(.active),
  .category-pill--subtle:active:not(.active) {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #333333 !important;
  }
}

/* Filter bar markup/classes are reused verbatim from videos_cms_videos.html
   (filter-toggle/filter-label-nowrap/filter-content/form_mutiselect/
   txt_888_16_m/txt_temp_16_r) -- no page-specific CSS needed here at all. */

.library-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 15px;
  padding-bottom: 20px;
}
.library-category-empty {
  padding: 48px 0;
  text-align: center;
  color: #888888;
  font-size: 16px;
  line-height: 24px;
}
@media (min-width: 576px) {
  .library-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .library-category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .library-category-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.library-category-grid .content-card {
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.library-category-grid .content-thumb-frame {
  display: block;
  overflow: hidden;
  border-radius: 20px;
}
.library-category-grid .content-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .library-category-grid .content-thumb {
    transition: transform 0.35s ease;
  }
  .library-category-grid .content-card:hover .content-thumb {
    transform: scale(1.05);
  }
  .library-category-grid .content-card:hover .content-title {
    color: var(--primary-temp);
  }
}
/* /Library : Category (public page) */