/*
 * Lớp hiển thị nội dung giàu định dạng.
 *
 * Dùng cho HTML nội dung đã lưu trước đây lẫn HTML từ trình soạn thảo riêng.
 * Selector được giới hạn trong vùng nội dung bài viết/sản phẩm để không tác
 * động các thành phần giao diện chung của website.
 */

:where(.product-description-content, .article-body-content.content-rich-text) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.product-page .product-description-content,
.product-page .product-description-content .rich-text-inner,
.article-body-content.content-rich-text {
  color: var(--gray-800);
  font-family: "Google Sans", sans-serif;
  font-size: clamp(1.56rem, 1.15vw, 1.8rem);
  line-height: 1.76;
}

:where(.product-description-content, .article-body-content.content-rich-text) :where(p, li, td, th, figcaption, blockquote) {
  font-size: inherit;
  line-height: inherit;
}

:where(.product-description-content, .article-body-content.content-rich-text) :where(p, ul, ol, blockquote, figure, table, .table-responsive) {
  margin-block: 0 1.35em;
}

:where(.product-description-content, .article-body-content.content-rich-text) :where(h2, h3, h4, h5, h6) {
  clear: both;
  color: var(--gray-800);
  font-family: "Google Sans", sans-serif;
  font-weight: 700;
  line-height: 1.32;
  overflow-wrap: anywhere;
  scroll-margin-top: 110px;
}

.product-page .product-description-content h2 {
  font-size: clamp(2.05rem, 2.3vw, 2.45rem);
}

.product-page .product-description-content h3 {
  font-size: clamp(1.82rem, 2vw, 2.12rem);
}

.product-page .product-description-content h4 {
  margin-block: 1.55em .65em;
  font-size: clamp(1.68rem, 1.65vw, 1.88rem);
}

.product-page .product-description-content h5 {
  margin-block: 1.45em .6em;
  font-size: clamp(1.57rem, 1.5vw, 1.72rem);
}

.product-page .product-description-content h6 {
  margin-block: 1.35em .55em;
  font-size: clamp(1.48rem, 1.35vw, 1.62rem);
}

:where(.product-description-content, .article-body-content.content-rich-text) :where(ul, ol) {
  padding-inline-start: 1.55em;
}

:where(.product-description-content, .article-body-content.content-rich-text) ul:not([data-tg-list-kind]) {
  list-style: disc outside;
}

:where(.product-description-content, .article-body-content.content-rich-text) ol {
  list-style: decimal outside;
}

:where(.product-description-content, .article-body-content.content-rich-text) li + li {
  margin-top: .42em;
}

:where(.product-description-content, .article-body-content.content-rich-text) ul[data-tg-list-style="circle"] {
  list-style-type: circle;
}

:where(.product-description-content, .article-body-content.content-rich-text) ul[data-tg-list-style="square"] {
  list-style-type: square;
}

:where(.product-description-content, .article-body-content.content-rich-text) ol[data-tg-list-style="decimal-leading-zero"] {
  list-style-type: decimal-leading-zero;
}

:where(.product-description-content, .article-body-content.content-rich-text) ol[data-tg-list-style="lower-roman"] {
  list-style-type: lower-roman;
}

:where(.product-description-content, .article-body-content.content-rich-text) ol[data-tg-list-style="upper-roman"] {
  list-style-type: upper-roman;
}

:where(.product-description-content, .article-body-content.content-rich-text) ol[data-tg-list-style="lower-latin"] {
  list-style-type: lower-latin;
}

:where(.product-description-content, .article-body-content.content-rich-text) ol[data-tg-list-style="upper-latin"] {
  list-style-type: upper-latin;
}

:where(.product-description-content, .article-body-content.content-rich-text) ul[data-tg-list-kind="todo"] {
  padding-inline-start: 0;
  list-style: none;
}

:where(.product-description-content, .article-body-content.content-rich-text) ul[data-tg-list-kind="todo"] > li {
  display: flex;
  align-items: flex-start;
  gap: .65em;
}

:where(.product-description-content, .article-body-content.content-rich-text) input[data-tg-task-checkbox] {
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  margin: .34em 0 0;
  accent-color: var(--brand-color-1);
  pointer-events: none;
}

:where(.product-description-content, .article-body-content.content-rich-text) li[data-tg-task-state="done"] {
  color: var(--gray-600);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

:where(.product-description-content, .article-body-content.content-rich-text) [data-tg-indent="1"] {
  margin-inline-start: 2rem;
}

:where(.product-description-content, .article-body-content.content-rich-text) [data-tg-indent="2"] {
  margin-inline-start: 4rem;
}

:where(.product-description-content, .article-body-content.content-rich-text) [data-tg-indent="3"] {
  margin-inline-start: 6rem;
}

/* Ảnh từ editor mới và các thẻ figure/image của nội dung cũ. */
:where(.product-description-content, .article-body-content.content-rich-text) :where(figure.tg-editor-image, figure.image) {
  display: table;
  clear: both;
  width: auto;
  max-width: 100%;
  margin-block: 1.5em;
}

:where(.product-description-content, .article-body-content.content-rich-text) :where(figure.tg-editor-image, figure.image) > img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0;
  border-radius: 14px;
}

/* Khi editor lưu tỷ lệ, figure quyết định chiều rộng và ảnh luôn phủ vừa figure. */
:where(.product-description-content, .article-body-content.content-rich-text) figure.tg-editor-image[data-tg-size] > img {
  width: 100%;
  max-width: 100%;
}

:where(.product-description-content, .article-body-content.content-rich-text) :where(figure.tg-editor-image, figure.image)[data-tg-size="25"] {
  width: 25%;
}

:where(.product-description-content, .article-body-content.content-rich-text) :where(figure.tg-editor-image, figure.image)[data-tg-size="50"] {
  width: 50%;
}

:where(.product-description-content, .article-body-content.content-rich-text) :where(figure.tg-editor-image, figure.image)[data-tg-size="75"] {
  width: 75%;
}

:where(.product-description-content, .article-body-content.content-rich-text) :where(figure.tg-editor-image, figure.image)[data-tg-size="100"] {
  width: 100%;
}

:where(.product-description-content, .article-body-content.content-rich-text) :where(img[data-tg-size="25"]) {
  width: 25%;
}

:where(.product-description-content, .article-body-content.content-rich-text) :where(img[data-tg-size="50"]) {
  width: 50%;
}

:where(.product-description-content, .article-body-content.content-rich-text) :where(img[data-tg-size="75"]) {
  width: 75%;
}

:where(.product-description-content, .article-body-content.content-rich-text) :where(img[data-tg-size="100"]) {
  width: 100%;
}

:where(.product-description-content, .article-body-content.content-rich-text) :where(.tg-align-left, .image-style-align-left) {
  margin-inline: 0 auto;
}

:where(.product-description-content, .article-body-content.content-rich-text) :where(.tg-align-center, .image-style-align-center) {
  margin-inline: auto;
}

:where(.product-description-content, .article-body-content.content-rich-text) :where(.tg-align-right, .image-style-align-right) {
  margin-inline: auto 0;
}

:where(.product-description-content, .article-body-content.content-rich-text) :where(.tg-align-left):not(figure) {
  text-align: left;
}

:where(.product-description-content, .article-body-content.content-rich-text) :where(.tg-align-center):not(figure) {
  text-align: center;
}

:where(.product-description-content, .article-body-content.content-rich-text) :where(.tg-align-right):not(figure) {
  text-align: right;
}

:where(.product-description-content, .article-body-content.content-rich-text) :where(.tg-legacy-image-wrap, .image-style-side, .image-style-wrap-text) {
  float: right;
  max-width: min(50%, 420px);
  margin: .4em 0 1em 1.5em;
}

:where(.product-description-content, .article-body-content.content-rich-text) :where(.tg-legacy-image-break, .image-style-break-text) {
  clear: both;
}

:where(.product-description-content, .article-body-content.content-rich-text) figure.image.image-style-inline {
  display: inline-table;
  clear: none;
  width: auto;
}

:where(.product-description-content, .article-body-content.content-rich-text) :where(figure.tg-editor-image, figure.image) figcaption {
  display: table-caption;
  caption-side: bottom;
  padding: .65em .25em 0;
  color: var(--gray-600);
  font-size: .88em;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}

:where(.product-description-content, .article-body-content.content-rich-text) :where(figure.tg-editor-video) {
  display: table;
  clear: both;
  width: min(100%, 860px);
  max-width: 100%;
  margin-block: 1.5em;
}

:where(.product-description-content, .article-body-content.content-rich-text) :where(figure.tg-editor-video) > video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  background: #0f172a;
}

:where(.product-description-content, .article-body-content.content-rich-text) :where(table.tg-demo-table) {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: #fff;
}

:where(.product-description-content, .article-body-content.content-rich-text) :where(table.tg-demo-table) :where(th, td) {
  padding: .8em .95em;
  border: 1px solid var(--gray-200);
  vertical-align: top;
}

:where(.product-description-content, .article-body-content.content-rich-text) :where(table.tg-demo-table) th {
  color: #fff;
  background: var(--brand-color-1);
  font-weight: 700;
}

/*
 * Chú thích bảng từ editor. Giữ thẻ <caption> chuẩn SEO, nhưng thể hiện nó
 * như một footer nhẹ ở chân bảng để không bị chìm vào nội dung bên dưới.
 */
:where(.product-description-content, .article-body-content.content-rich-text) table.tg-demo-table > caption:not(:empty) {
  display: table-caption;
  box-sizing: border-box;
  width: 100%;
  min-width: 100%;
  margin-top: 0;
  padding: .72em 1.05em .78em 1.22em;
  border: 1px solid #d9e7fb;
  border-top-color: #d3e2f7;
  border-radius: 0 0 14px 14px;
  color: #5b6f88;
  background: linear-gradient(135deg, #f8fbff 0%, #f0f6ff 100%);
  box-shadow: inset 3px 0 0 #78adf8;
  caption-side: bottom;
  font-size: 1.05em;
  font-style: normal;
  font-weight: 500;
  line-height: 1.55;
  text-align: left;
}

/* Bảng được frontend nâng cấp có radius riêng, nên mở phần đáy để nối với footer caption. */
.article-body-content.content-rich-text table.tg-demo-table.rich-content-table:has(> caption:not(:empty)),
.product-description-content table.tg-demo-table.rich-content-table:has(> caption:not(:empty)),
.rich-text-inner table.tg-demo-table.rich-content-table:has(> caption:not(:empty)) {
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

:where(.product-description-content, .article-body-content.content-rich-text) table.tg-demo-table > caption:empty {
  display: none;
}

/* Trên tablet/mobile, tách chú thích thành một thẻ ghi chú độc lập để dễ đọc hơn. */
@media (max-width: 767.98px) {
  :where(.product-description-content, .article-body-content.content-rich-text) table.tg-demo-table > caption:not(:empty) {
    margin-top: .72em;
    padding: .72em .84em .76em 1em;
    border: 1px solid #d9e7fb;
    border-radius: 12px;
    box-shadow:
      inset 3px 0 0 #78adf8,
      0 8px 18px rgba(46, 104, 180, .07);
    font-size: .84em;
    line-height: 1.52;
    overflow-wrap: anywhere;
  }

  .article-body-content.content-rich-text table.tg-demo-table.rich-content-table:has(> caption:not(:empty)),
  .product-description-content table.tg-demo-table.rich-content-table:has(> caption:not(:empty)),
  .rich-text-inner table.tg-demo-table.rich-content-table:has(> caption:not(:empty)) {
    border-bottom-right-radius: 18px !important;
    border-bottom-left-radius: 18px !important;
  }
}

/* Giữ căn lề từng ô được tạo từ editor, kể cả khi CSS bảng cũ có mặc định trái. */
:where(.product-description-content, .article-body-content.content-rich-text) table.tg-demo-table :is(th, td).tg-align-left {
  text-align: left !important;
}

:where(.product-description-content, .article-body-content.content-rich-text) table.tg-demo-table :is(th, td).tg-align-center {
  text-align: center !important;
}

:where(.product-description-content, .article-body-content.content-rich-text) table.tg-demo-table :is(th, td).tg-align-right {
  text-align: right !important;
}

@media (max-width: 1024px) {
  :where(.product-description-content, .article-body-content.content-rich-text) [data-tg-indent="1"] {
    margin-inline-start: 1.5rem;
  }

  :where(.product-description-content, .article-body-content.content-rich-text) [data-tg-indent="2"] {
    margin-inline-start: 3rem;
  }

  :where(.product-description-content, .article-body-content.content-rich-text) [data-tg-indent="3"] {
    margin-inline-start: 4.5rem;
  }
}

@media (max-width: 640px) {
  .product-page .product-description-content :is(p, li, li > p, li > div) {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  :where(.product-description-content, .article-body-content.content-rich-text) :where(figure.tg-editor-image, figure.image, figure.tg-editor-video) {
    max-width: 100%;
  }

  :where(.product-description-content, .article-body-content.content-rich-text) figure.tg-editor-image[data-tg-size] {
    min-width: min(180px, 100%);
  }

  :where(.product-description-content, .article-body-content.content-rich-text) :where(figure.tg-editor-image, figure.image) figcaption {
    overflow-wrap: anywhere;
  }

  :where(.product-description-content, .article-body-content.content-rich-text) :where(.tg-legacy-image-wrap, .image-style-side, .image-style-wrap-text) {
    float: none;
    max-width: 100%;
    margin: 1.25em auto;
  }

  :where(.product-description-content, .article-body-content.content-rich-text) [data-tg-indent="1"] {
    margin-inline-start: 1rem;
  }

  :where(.product-description-content, .article-body-content.content-rich-text) [data-tg-indent="2"] {
    margin-inline-start: 2rem;
  }

  :where(.product-description-content, .article-body-content.content-rich-text) [data-tg-indent="3"] {
    margin-inline-start: 3rem;
  }
}