.content_detail_article {
  width          : 100%;
  line-height    : 1.8;
  letter-spacing : 0.5px;
  text-align     : justify;
  text-justify   : inter-word;
  -webkit-hyphens: auto;
  -moz-hyphens   : auto;
  hyphens        : auto;
  overflow-wrap  : break-word;
  word-break     : normal;
  line-break     : anywhere;
  text-rendering : optimizeLegibility;
  font-kerning   : normal;
  white-space    : normal;
  display        : block;
  text-wrap      : pretty;
}

.content_detail_article :where(p, div, li, blockquote, figure, table) {
  text-align: justify !important;
}

.content_detail_article [style*="text-align"] {
  text-align: inherit !important;
}

.content_detail_article [style*="line-height"],
.content_detail_article [style*="letter-spacing"] {
  line-height   : inherit !important;
  letter-spacing: inherit !important;
}

.content_detail_article :where(p,
  span,
  label,
  a,
  strong,
  b,
  em,
  i,
  u,
  small,
  s,
  del,
  ins,
  mark,
  q,
  th,
  td,
  li,
  figcaption,
  blockquote) {
  line-height   : inherit;
  letter-spacing: inherit;
}

.content_detail_article p {
  margin         : 0 0 1em;
  text-align     : inherit;
  text-align-last: start;
}

.content_detail_article li {
  line-height    : inherit;
  letter-spacing : inherit;
  margin         : 0 0 0.5em 0;
  text-align-last: start;
}

.content_detail_article h1,
.content_detail_article h2,
.content_detail_article h3,
.content_detail_article h4,
.content_detail_article h5,
.content_detail_article h6 {
  line-height: 1.35;
  margin     : 1.2em 0 0.6em;
  text-align : start !important;
  text-wrap  : balance;
}

.content_detail_article ul,
.content_detail_article ol {
  list-style-position: outside;
  margin             : 0.5em 0 1em !important;
  padding-left       : 1.25em;
}

.content_detail_article li::marker {
  font     : inherit;
  font-size: 1em;
}

.content_detail_article a,
.content_detail_article span,
.content_detail_article label {
  white-space  : normal !important;
  overflow-wrap: anywhere;
  word-break   : break-word;
}

.content_detail_article [style*="display:inline-block"] {
  display: inline !important;
}

.content_detail_article [style*="mso-spacerun"] {
  font-size: 0 !important;
}

.content_detail_article [style*="mso-spacerun"]::before {
  content  : "\00A0";
  font-size: 1rem !important;
}

.content_detail_article,
.content_detail_article [style*="word-spacing"] {
  word-spacing: normal !important;
}

.content_detail_article code,
.content_detail_article pre,
.content_detail_article kbd,
.content_detail_article samp {
  letter-spacing: normal !important;
}

.article_image {
  width    : 100% !important;
  max-width: 100% !important;
  display  : block;
  margin   : 16px 0;
  clear    : both;
}

.article_image img {
  display   : block;
  width     : 100% !important;
  max-width : 100% !important;
  height    : auto !important;
  object-fit: contain !important;
}

.article_image img.SlideImageLoader,
.article_image img.IconImageLoader,
.article_image img.IconNewsLoader,
.article_image img.CourseImageLoader,
.article_image img.gdt-media-img {
  width     : 100% !important;
  height    : auto !important;
  object-fit: contain !important;
}

.img-fade-in {
  opacity: 0;
}

.img-fade-in.loaded {
  opacity: 1;
}

.content_detail_article[lang="km"],
.content_detail_article[lang="kh"],
.content_detail_article[lang^="km-"] {
  word-break        : normal;
  overflow-wrap     : break-word;
  line-break        : auto;
  -webkit-line-break: auto;
  hyphens           : none;
}

.content_detail_article[lang="km"] :where(p, span, label, a, li, div) {
  word-break   : inherit !important;
  overflow-wrap: inherit !important;
  line-break   : inherit !important;
}

.content_detail_article[lang="km"] a,
.content_detail_article[lang="km"] span,
.content_detail_article[lang="km"] label {
  overflow-wrap: break-word !important;
  word-break   : normal !important;
}

.content_detail_article:lang(km),
.content_detail_article:lang(kh) {
  word-break        : normal;
  overflow-wrap     : break-word;
  line-break        : auto;
  -webkit-line-break: auto;
  hyphens           : none;
}

.content_detail_article:lang(km) :where(p, span, label, a, li, div) {
  word-break   : inherit !important;
  overflow-wrap: inherit !important;
  line-break   : inherit !important;
}

#content_detail .media.p-b-5 {
  display      : flex;
  align-items  : center;
  gap          : 12px;
  padding      : 8px 0;
  border-bottom: 1px solid #e3e3e3;
  margin-bottom: 12px;
}

#content_detail .img-head-display {
  width        : clamp(44px, 6vw, 64px);
  height       : clamp(44px, 6vw, 64px);
  object-fit   : contain;
  display      : block;
  padding      : 6px;
  border-radius: 10px;
  background   : var(--default-white);
  border       : 1px solid #e3e3e3;
}

#content_detail .media .media-body .text-title {
  font-family: khmer_normal, "Noto Sans Khmer", Arial, sans-serif;
  font-weight: 700;
  color      : #3f51b5;
  font-size  : 15px;
  line-height: 1.7;
}

#content_detail .media .media-body p {
  margin     : 0;
  color      : #3f51b5;
  font-size  : 14px;
  line-height: 2;
}

#content_detail .block-content .card-body>.media+.media-body {
  margin-top: 10px;
}

.video-display {
  margin-top: 20px;
}

.video-embed {
  position     : relative;
  width        : 100%;
  background   : #000;
  border-radius: 10px;
  overflow     : hidden;
}

.video-embed--21x9 {
  aspect-ratio: auto;
  height      : 450px;
  min-height  : 450px;
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .video-embed--21x9 {
    height    : 360px;
    min-height: 360px;
  }
}

@media (max-width: 575.98px) {
  .video-embed--21x9 {
    height    : 320px;
    min-height: 320px;
  }
}

.video-embed>iframe,
.video-embed>video {
  position: absolute;
  inset   : 0;
  width   : 100%;
  height  : 100%;
  display : block;
}

@media (max-width: 575.98px) {
  #content_detail .media.p-b-5 {
    gap: 10px;
  }
}

@media (max-width: 575.98px) {
  #content_detail .img-head-display {
    padding      : 4px;
    border-radius: 8px;
  }
}

@media (max-width: 575.98px) {
  #content_detail .media .media-body p {
    font-size: 0.88rem;
  }
}

.article_file_download {
  display        : flex;
  justify-content: flex-end;
  gap            : 0.5rem;
  flex-wrap      : wrap;
  margin-top     : 12px;
}

.article_file_download a {
  display        : inline-flex;
  align-items    : center;
  gap            : 6px;
  padding        : 6px 10px 6px 8px;
  border-radius  : 8px;
  border         : 1px solid #c7d2f8;
  background     : var(--default-blue);
  color          : var(--default-white);
  text-decoration: none;
  line-height    : 1;
  font-size      : 0.7rem;
}

.article_file_download a i {
  font-size: 14px;
}

.article_file_download a:hover {
  background: #e6ecff !important;
  color     : #122394;
}

.article_file_download a:focus-visible {
  outline       : 2px solid #9bb3ff;
  outline-offset: 2px;
}

.alert-preview {
  --ap-accent  : #ef4444;
  --ap-ring    : rgba(245, 158, 11, 0.38);
  position     : relative;
  display      : flex;
  align-items  : flex-start;
  gap          : 10px;
  padding      : 12px 14px;
  margin       : 8px 0 14px;
  border       : 1px solid #f3cf7a;
  border-left  : 6px solid #f59e0b;
  border-radius: 8px;
  background   : #fff8e1;
  color        : #6b3e00;
  animation    : ap-pop 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both,
    ap-border-flash 1.2s ease-out 1;
  --ap-accent-red  : #ef4444;
  border-left-color: var(--ap-accent);
}

.alert-preview__icon {
  position       : relative;
  flex           : 0 0 auto;
  width          : 28px;
  height         : 28px;
  border-radius  : 50%;
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  background     : #f59e0b;
  color          : var(--default-white);
  box-shadow     : 0 2px 8px rgba(245, 158, 11, 0.25);
}

.alert-preview__icon::after {
  content      : "";
  position     : absolute;
  inset        : -4px;
  border-radius: 999px;
  border       : 2px solid var(--ap-ring);
  opacity      : 0.9;
  animation    : ap-ping 2.2s ease-out infinite;
}

.alert-preview__icon i {
  font-size  : 14px;
  line-height: 1;
}

.alert-preview__body {
  line-height: 1.45;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .alert-preview {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alert-preview__icon::after {
    animation: none;
    opacity  : 0.5;
  }
}

.alert-preview:hover,
.alert-preview:focus-within {
  border-left-color: var(--ap-accent-red);
}

.article_image .image-item {
  position: relative;
  /* ensure absolute children position per image */
  display : block;
  margin  : 0 0 12px 0;
}

.article_image .image-open-btn {
  position       : absolute;
  right          : -8px;
  bottom         : -8px;
  padding        : 6px;
  border-radius  : 4px;
  color          : #fff;
  text-decoration: none;
  line-height    : 1;
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  opacity        : 1;
  transform      : none;
  z-index        : 2;
  transition     : opacity 0.2s ease, transform 0.2s ease;
  display        : none;
}

.image-open-btn .fa:hover,
.image-open-btn .fa {
  color    : #0f4e87 !important;
  font-size: 23px;
}