/**
 * Mọi bài viết (tin tức, hướng dẫn, mô tả SP, intro danh mục, editor admin)
 * cùng layout tin tức: ảnh full cột xếp dọc, bảng ảnh Docs không còn gallery ngang,
 * chữ mô tả SP cùng cỡ bài tin.
 * Overlay — không rebuild hashed CSS.
 */

:is(
  .news-article-content,
  .tutorial-content,
  .product-description-content,
  .unified-content,
  .category-intro-content,
  .category-intro-panel .backlink-processed-body,
  .admin-rich-text-preview,
  .html-content-light,
  [contenteditable].html-content-light,
  [contenteditable]
) {
  --giasy-article-img-gap: 1.15rem;
}

html.storefront-root :is(.news-article-content, .tutorial-content, .product-description-content, .unified-content, .category-intro-content) img,
html.admin-root :is(.admin-rich-text-preview, .html-content-light, [contenteditable].html-content-light, [contenteditable]) img,
.news-article-content img,
.tutorial-content img,
.product-description-content img,
.unified-content img,
.category-intro-content img,
.admin-rich-text-preview img,
.html-content-light img,
[contenteditable] img {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: var(--giasy-article-img-gap, 1.15rem) !important;
  margin-bottom: 0.45rem !important;
  object-fit: contain;
}

html.storefront-root :is(.news-article-content, .tutorial-content, .product-description-content, .unified-content, .category-intro-content) :is(figure, .giasy-hydrated-figure),
html.admin-root :is(.admin-rich-text-preview, .html-content-light, [contenteditable]) :is(figure, .giasy-hydrated-figure) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 1.15rem 0 1.1rem !important;
}

html.storefront-root :is(.news-article-content, .tutorial-content, .product-description-content, .unified-content) span:has(> img),
html.admin-root :is(.admin-rich-text-preview, .html-content-light, [contenteditable]) span:has(> img),
html.storefront-root :is(.news-article-content, .tutorial-content, .product-description-content, .unified-content) p:has(> img),
html.admin-root :is(.admin-rich-text-preview, .html-content-light, [contenteditable]) p:has(> img) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

/* Ẩn banner placeholder dán cạnh ảnh thật (Docs / hotlink fail) */
html.storefront-root :is(.news-article-content, .tutorial-content, .product-description-content, .unified-content) img[src*="placeholder-banner"],
html.admin-root :is(.admin-rich-text-preview, .html-content-light, [contenteditable]) img[src*="placeholder-banner"] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

/*
 * Bảng ảnh (Docs/Word): xếp dọc full cột.
 * Không đụng bảng thông số có thead.
 * Specificity phải thắng giasy-article-section-heading (hàng đầu nền cyan).
 */
html.storefront-root :is(.news-article-content, .tutorial-content, .product-description-content, .unified-content, .category-intro-content) table[data-giasy-img-table="1"],
html.admin-root :is(.admin-rich-text-preview, .html-content-light, [contenteditable]) table[data-giasy-img-table="1"],
html.storefront-root :is(.news-article-content, .tutorial-content, .product-description-content, .unified-content, .category-intro-content) table:has(img):not(:has(thead)),
html.admin-root :is(.admin-rich-text-preview, .html-content-light, [contenteditable]) table:has(img):not(:has(thead)),
:is(.news-article-content, .tutorial-content, .product-description-content, .unified-content, .admin-rich-text-preview, .html-content-light) table:has(img):not(:has(thead)) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0.4rem 0 1rem !important;
  overflow: visible !important;
  border-radius: 0 !important;
}

html.storefront-root :is(.news-article-content, .tutorial-content, .product-description-content, .unified-content, .category-intro-content) table[data-giasy-img-table="1"] :is(tbody, thead, tfoot, tr, td, th),
html.admin-root :is(.admin-rich-text-preview, .html-content-light, [contenteditable]) table[data-giasy-img-table="1"] :is(tbody, thead, tfoot, tr, td, th),
html.storefront-root :is(.news-article-content, .tutorial-content, .product-description-content, .unified-content, .category-intro-content) table:has(img):not(:has(thead)) :is(tbody, thead, tfoot, tr, td, th),
html.admin-root :is(.admin-rich-text-preview, .html-content-light, [contenteditable]) table:has(img):not(:has(thead)) :is(tbody, thead, tfoot, tr, td, th) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  vertical-align: top !important;
  font-weight: inherit !important;
}

html.storefront-root :is(.news-article-content, .tutorial-content, .product-description-content, .unified-content, .category-intro-content) table[data-giasy-img-table="1"] > tbody > tr:first-child > :is(td, th),
html.admin-root :is(.admin-rich-text-preview, .html-content-light, [contenteditable]) table[data-giasy-img-table="1"] > tbody > tr:first-child > :is(td, th),
html.storefront-root :is(.news-article-content, .tutorial-content, .product-description-content, .unified-content, .category-intro-content) table:has(img):not(:has(thead)) > tbody > tr:first-child > :is(td, th),
html.admin-root :is(.admin-rich-text-preview, .html-content-light, [contenteditable]) table:has(img):not(:has(thead)) > tbody > tr:first-child > :is(td, th),
html.storefront-root :is(.news-article-content, .tutorial-content, .product-description-content, .unified-content) table:has(img):not(:has(thead)) > tbody > tr:first-child > td,
html.admin-root :is(.admin-rich-text-preview, .html-content-light, [contenteditable]) table:has(img):not(:has(thead)) > tbody > tr:first-child > td {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  border: 0 !important;
  font-weight: inherit !important;
  letter-spacing: normal !important;
}

html.storefront-root :is(.news-article-content, .tutorial-content, .product-description-content, .unified-content) figcaption,
html.storefront-root :is(.news-article-content, .tutorial-content, .product-description-content, .unified-content) img + em,
html.storefront-root :is(.news-article-content, .tutorial-content, .product-description-content, .unified-content) img + i,
html.admin-root :is(.admin-rich-text-preview, .html-content-light, [contenteditable]) figcaption {
  display: block;
  font-size: 0.92em;
  line-height: 1.45;
  color: #64748b;
  font-style: italic;
  margin: 0 0 1.1rem;
}

/* Mô tả SP: cùng cỡ chữ bài tin, không còn 15px harmony */
html.storefront-root .product-description-content,
html.storefront-root .product-long-form,
.product-description-content {
  font-size: 16px !important;
  line-height: 1.75 !important;
}
html.storefront-root .product-description-content :where(p, div, span, li),
.product-description-content :where(p, li) {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Hướng dẫn: tiêu đề/excerpt gần tin tức; cột ảnh full như bài tin */
html.storefront-root .tutorial-content {
  width: 100%;
  max-width: none;
}
html.storefront-root .container:has(.tutorial-content) h1 {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
  margin: 0 0 0.75rem !important;
}
html.storefront-root .container:has(.tutorial-content) h1 + p {
  font-style: normal !important;
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
  color: #475569 !important;
  border-left: 2px solid rgba(8, 145, 178, 0.4) !important;
  padding-left: 0.75rem !important;
  margin: 0 0 1.5rem !important;
}