/* THÂN BÀI = 1 NGUỒN DUY NHẤT cho storefront VÀ khung soạn TinyMCE (user 2026-10-22:
   "Ngoài frontend như thế nào, bên trong edit 100% như thế").
   - Storefront: shop/base.html nạp ngay sau shop_base_core.css, thân bài là
     .product-desc (trang SP) / .category-desc (thư mục, thương hiệu, tag).
   - Khung soạn TinyMCE: includes/tinymce_content_style.html @import đúng file này
     vào iframe; thân iframe luôn mang class .mce-content-body nên ăn cùng luật.
   - GIÁ TRỊ biến (--app-font, --h2-size, --subheading-text-color, ...) phát từ
     modules/article_body_theme.css_vars theo site của bài, chung cho cả hai.
   CẤM viết luật h1-h6/p/ul/li/table/strong cho thân bài ở chỗ khác
   (tests/test_article_body_single_css.py khoá content_style của editor). */

:is(.product-desc, .category-desc, .mce-content-body) {
    font-family: var(--app-font);
    font-size: var(--content-font-size);
    /* Giãn dòng nhỏ lại 10% (line-height ×0.9). Khoảng cách đoạn = ĐÚNG
       giá trị paragraph_spacing_px của site (user 2026-07-22: bỏ hệ số
       nhân ẩn ×1.455 để ô 'Khoảng cách paragraph (px)' trong Quản lý
       giao diện = px thật, chỉnh kiểu Word). .product-spec-block reset
       về gốc để 'thông số kỹ thuật' KHÔNG đổi. */
    --article-line-height: calc(var(--content-line-height) * 0.9);
    --article-list-line-height: calc(var(--list-line-height, var(--content-line-height)) * 0.9);
    --article-para-spacing: var(--paragraph-spacing);
    line-height: var(--article-line-height);
    color: var(--content-text-color);
    overflow: visible;
}

:is(.product-desc, .category-desc, .mce-content-body) .desc-body { white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
:is(.product-desc, .category-desc, .mce-content-body) h1 {
    font-family: var(--heading-font);
    color: var(--heading-text-color);
    font-size: var(--h1-size);
    margin: var(--heading-margin-top) 0 var(--heading-margin-bottom);
    line-height: 1.4;
}
:is(.product-desc, .category-desc, .mce-content-body) h2 {
    font-family: var(--heading-font);
    color: var(--subheading-text-color, var(--heading-text-color));
    font-size: var(--h2-size);
    font-weight: 700;
    margin: var(--heading-margin-top) 0 var(--heading-margin-bottom);
    line-height: 1.4;
}
:is(.product-desc, .category-desc, .mce-content-body) h3 {
    font-family: var(--heading-font);
    color: var(--subheading-text-color, var(--heading-text-color));
    font-size: var(--h3-size);
    font-weight: 700;
    margin: var(--heading-margin-top) 0 var(--heading-margin-bottom);
    line-height: 1.4;
}
:is(.product-desc, .category-desc, .mce-content-body) h4 {
    font-family: var(--heading-font);
    color: var(--subheading-text-color, var(--heading-text-color));
    font-size: var(--h4-size);
    margin: var(--heading-margin-top) 0 var(--heading-margin-bottom);
    line-height: 1.4;
}
:is(.product-desc, .category-desc, .mce-content-body) p {
    margin: 0 0 var(--article-para-spacing);
    font-size: 1em;
    line-height: var(--article-line-height);
}
:is(.product-desc, .category-desc, .mce-content-body) p:last-child { margin-bottom: 0; }
/* Link trong bài = màu link Bootstrap của storefront. :where() = specificity 0 như
   luật `a` gốc của Bootstrap → storefront không đổi gì (a:hover vẫn thắng); khung
   soạn không nạp Bootstrap nên rơi về đúng giá trị mặc định 13,110,253. */
:where(.product-desc, .category-desc, .mce-content-body) a { color: rgba(var(--bs-link-color-rgb, 13, 110, 253), var(--bs-link-opacity, 1)); }
/* Tiêu đề trong thân bài luôn theo kiểu chuẩn của site (user 2026-10-03):
   bỏ qua in đậm + màu gắn trong bài — bài AI/WordPress cũ ghi
   <h2><span style="color:#2dc26b"><strong> làm chữ lên độ đậm 900 + xanh tươi. */
:is(.product-desc, .category-desc, .mce-content-body) :is(h1, h2, h3, h4, h5, h6) :is(strong, b) { font-weight: inherit; }
:is(.product-desc, .category-desc, .mce-content-body) :is(h1, h2, h3, h4, h5, h6) [style*="color"] { color: inherit !important; }
/* Thông số kỹ thuật GIỮ NGUYÊN gian cách gốc (user 2026-07-20 'ngoại trừ
   thông số kỹ thuật đã chỉnh thì không đổi'): reset derived var về raw. */
.product-spec-block {
    --article-line-height: var(--content-line-height);
    --article-list-line-height: var(--list-line-height, var(--content-line-height));
    --article-para-spacing: var(--paragraph-spacing);
    line-height: var(--content-line-height);
}
:is(.product-desc, .category-desc, .mce-content-body) ul,

:is(.product-desc, .category-desc, .mce-content-body) ol {
    margin: 0 0 var(--article-para-spacing) 18px;
    padding-inline-start: 16px;
    line-height: var(--article-line-height);
}
:is(.product-desc, .category-desc, .mce-content-body) li {
    margin: 0 0 var(--list-item-spacing);
    padding: 0;
    line-height: var(--article-list-line-height);
}
:is(.product-desc, .category-desc, .mce-content-body) li + li { margin-top: 0; }
:is(.product-desc, .category-desc, .mce-content-body) li p { margin: 0; }
:is(.product-desc, .category-desc, .mce-content-body) li br { line-height: 0; }
/* ===== KHOẢNG CÁCH MEDIA TRONG BÀI = 6px ĐỀU (ảnh + video) =====
   Ảnh: <figure.article-inline-media> (editor mới) HOẶC legacy <p><img></p>.
   Video: <div.yt-embed><iframe></div> hoặc <iframe> trần.
   Thư viện ảnh .vinatools-gallery GIỮ NGUYÊN (xử lý riêng bên dưới).
   Mỗi khối media cách trên/dưới đúng 6px; đoạn văn NGAY TRƯỚC media cũng
   rút lề dưới về 6px để khoảng TRÊN ảnh không bị lề đoạn (10px) lấn. */
:is(.product-desc, .category-desc, .mce-content-body) img { max-width: 100%; height: auto; display: block; margin: 6px auto; }
:is(.product-desc, .category-desc, .mce-content-body) .article-inline-media { margin: 6px 0; }
:is(.product-desc, .category-desc, .mce-content-body) .article-inline-media img { margin: 0 auto; }
:is(.product-desc, .category-desc, .mce-content-body) p:has(> img) { margin-top: 6px; margin-bottom: 6px; }
:is(.product-desc, .category-desc, .mce-content-body) iframe { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; border: 0; border-radius: var(--radius-sm); margin: 6px 0; }
:is(.product-desc, .category-desc, .mce-content-body) p:has(> iframe) { margin-top: 6px; margin-bottom: 6px; }
:is(.product-desc, .category-desc, .mce-content-body) p:has(+ .article-inline-media),

:is(.product-desc, .category-desc, .mce-content-body) p:has(+ .yt-embed),

:is(.product-desc, .category-desc, .mce-content-body) p:has(+ p > img),

:is(.product-desc, .category-desc, .mce-content-body) p:has(+ p > iframe),

:is(.product-desc, .category-desc, .mce-content-body) p:has(+ iframe) { margin-bottom: 6px; }

/* Bảng trong bài (user 2026-08-12): viền bao NGOÀI vẽ 1 lần trên wrapper
   dày gấp rưỡi + bo góc liền mạch (overflow clip theo radius); viền cạnh
   ngoài của cell mép bị tắt để không chồng nét chắp vá. Kẻ trong giữ. */
:is(.product-desc, .category-desc, .mce-content-body) .rich-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 12px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
    border: calc(var(--ui-border-width) * 1.5) solid var(--line-border);
    border-radius: 10px;
    background: #fff;
}
:is(.product-desc, .category-desc, .mce-content-body) .rich-table-wrap tr:first-child th,

:is(.product-desc, .category-desc, .mce-content-body) .rich-table-wrap tr:first-child td { border-top: 0; }
:is(.product-desc, .category-desc, .mce-content-body) .rich-table-wrap tr:last-child th,

:is(.product-desc, .category-desc, .mce-content-body) .rich-table-wrap tr:last-child td { border-bottom: 0; }
:is(.product-desc, .category-desc, .mce-content-body) .rich-table-wrap th:first-child,

:is(.product-desc, .category-desc, .mce-content-body) .rich-table-wrap td:first-child { border-inline-start: 0; }
:is(.product-desc, .category-desc, .mce-content-body) .rich-table-wrap th:last-child,

:is(.product-desc, .category-desc, .mce-content-body) .rich-table-wrap td:last-child { border-inline-end: 0; }
:is(.product-desc, .category-desc, .mce-content-body) .rich-table-wrap::-webkit-scrollbar { height: 8px; }
:is(.product-desc, .category-desc, .mce-content-body) .rich-table-wrap::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 999px; }
:is(.product-desc, .category-desc, .mce-content-body) .rich-table-wrap::-webkit-scrollbar-track { background: transparent; }

:is(.product-desc, .category-desc, .mce-content-body) .vinatools-gallery { margin: 8px 0; }
/* auto-fit: 2/3 ảnh tự giãn kín bề ngang, tối đa 4/ dòng (23% min), 8 ảnh -> 4x2. */
:is(.product-desc, .category-desc, .mce-content-body) .vinatools-gallery-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(23%, 1fr)); gap:8px; }
:is(.product-desc, .category-desc, .mce-content-body) .vinatools-gallery-item { margin:0; border:var(--ui-border-width) solid var(--line-border-soft); border-radius:var(--radius-sm); overflow:hidden; background:#fff; }
:is(.product-desc, .category-desc, .mce-content-body) .vinatools-gallery-item a { display:block; text-decoration:none; color:inherit; }
/* Ảnh hãng đủ tỷ lệ (4:3, vuông) - cover xẻo mất đầu mất đuôi kìm (user 2026-09-08 "luôn fix vào khung"):
   contain = nguyên ảnh nằm trong khung 16:9, dư nền trắng. Ảnh mình chụp 16:9 không đổi. */
:is(.product-desc, .category-desc, .mce-content-body) .vinatools-gallery-item img { width:100%; aspect-ratio:16/9; object-fit:contain; margin:0; display:block; background:#fff; }
/* Khổ khung do JS chọn: data-ratio="square" khi mọi ảnh ~1:1; mặc định 16:9 (kể cả mixed). Ảnh luôn object-fit:cover fit khung. */
:is(.product-desc, .category-desc, .mce-content-body) .vinatools-gallery[data-ratio="square"] .vinatools-gallery-item img { aspect-ratio:1/1; }
:is(.product-desc, .category-desc, .mce-content-body) .vinatools-gallery-item figcaption { font-size:12px; line-height:1.35; color:#4b5563; padding:6px 8px; }
@media (max-width: 900px) {
    :is(.product-desc, .category-desc, .mce-content-body) .vinatools-gallery-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px) {
    :is(.product-desc, .category-desc, .mce-content-body) .vinatools-gallery-grid { grid-template-columns:repeat(1, minmax(0,1fr)); }
}

/* font-size 1.07em: chữ trong bảng lớn hơn 1 chút (user 2026-08-12) */
/* Thông số bảng trong bài = biến --art-* (tab Omni "Bảng trong bài", 1 nguồn modules.article_table_settings). */
:is(.product-desc, .category-desc, .mce-content-body) table { width: var(--art-table-width, 100%); min-width: var(--art-table-width, 100%); border-collapse: collapse; margin: var(--art-table-mt, 12px) 0 var(--art-table-mb, 12px); background:#fff; font-size: 1.07em; }
:is(.product-desc, .category-desc, .mce-content-body) .rich-table-wrap { border-radius: var(--art-table-radius, 10px); border-color: var(--art-border-strong, var(--line-border)); margin: var(--art-table-mt, 12px) 0 var(--art-table-mb, 12px); }
:is(.product-desc, .category-desc, .mce-content-body) .rich-table-wrap table { margin: 0; }
/* Header vàng THỐNG NHẤT #ffe680 (user 2026-08-12 'bảng có, bảng không'):
   3 biến thể đều về 1 màu — (a) th trong thead bị .mk-table thead th của
   ui_table_system đè #fff0b3 → selector specificity cao hơn kéo về;
   (b) th trần đã #ffe680; (c) bảng toàn td → dòng đầu ăn vàng qua :has.
   Hover giữ nguyên cho thân bảng, dòng header giả không đổi màu. */
:is(.product-desc, .category-desc, .mce-content-body) table thead th { background: var(--art-th-bg, #ffe680); }
/* "Header giả" = bảng toàn td, không có ô th nào. Hai sửa 2026-08-21:
   (1) `tr:first-child` khớp hàng đầu của MỖI nhóm, nên bảng có cả
       <thead> lẫn <tbody> ăn vàng HAI dòng (bài PC-F: hàng tiêu đề +
       dòng PC-F 15). Nay tách rõ: có thead thì chỉ hàng trong thead;
       không thead thì hàng đầu của thân bảng.
   (2) Bảng CHỈ CÓ MỘT hàng là khung chèn ảnh, không phải bảng dữ liệu
       -> `tbody:has(tr:nth-child(2))` đòi từ 2 hàng trở lên mới tô. */
:is(.product-desc, .category-desc, .mce-content-body) table:not(:has(th)) > thead > tr:first-child > td,

:is(.product-desc, .category-desc, .mce-content-body) table:not(:has(th)):not(:has(thead)) > tbody:has(tr:nth-child(2)) > tr:first-child > td {
    background: var(--art-th-bg, #ffe680); color: var(--art-th-color, inherit); font-weight: var(--art-th-weight, 700); font-size: var(--art-th-size, 12.5px); line-height: var(--art-th-lh, 1.3); text-align: var(--art-th-align, left);
}
:is(.product-desc, .category-desc, .mce-content-body) table:not(:has(th)) > thead > tr:first-child:hover > td,

:is(.product-desc, .category-desc, .mce-content-body) table:not(:has(th)):not(:has(thead)) > tbody:has(tr:nth-child(2)) > tr:first-child:hover > td { background: var(--art-th-bg, #ffe680); }
/* Đơn vị trong tiêu đề cột xuống dòng riêng (pipeline _split_th_units) */
:is(.product-desc, .category-desc, .mce-content-body) th .th-unit { display:block; font-size:.88em; font-weight:600; line-height:1.15; }
/* Cân đối cỡ chữ bảng trong bài (user 2026-09-10): tiêu đề nhỏ hơn thân, thân lớn hơn trước. */
:is(.product-desc, .category-desc, .mce-content-body) th { background: var(--art-th-bg, #ffe680); color: var(--art-th-color, inherit); padding: var(--art-cell-pad, 7px 8px); text-align: var(--art-th-align, left); font-weight: var(--art-th-weight, 700); font-size: var(--art-th-size, 12.5px); line-height: var(--art-th-lh, 1.3); border: var(--art-border-w, var(--ui-border-width)) solid var(--art-border-strong, var(--line-border)); vertical-align: top; word-break: break-word; overflow-wrap: anywhere; }
:is(.product-desc, .category-desc, .mce-content-body) td { padding: var(--art-cell-pad, 7px 8px); font-size: var(--art-td-size, 13px); line-height: var(--art-td-lh, 1.4); color: var(--art-td-color, inherit); text-align: var(--art-td-align, inherit); border: var(--art-border-w, var(--ui-border-width)) solid var(--art-border, var(--line-border-soft)); vertical-align: top; word-break: break-word; overflow-wrap: anywhere; }
:is(.product-desc, .category-desc, .mce-content-body) table tbody tr:nth-child(even) td { background: var(--art-stripe-bg, transparent); }
/* Bảng dán từ editor mang class mk-table/mk-table--compact (ui_table_system: tbody td 13px/12px, specificity 0,1,2)
   đè lên luật bài viết → nâng specificity (0,1,3): trong bài, cỡ chữ = 1 quy ước .product-desc/.category-desc. */
:is(.product-desc, .category-desc, .mce-content-body) table tr th { font-size: var(--art-th-size, 12.5px); }
:is(.product-desc, .category-desc, .mce-content-body) table tr td { font-size: var(--art-td-size, 13px); }
:is(.product-desc, .category-desc, .mce-content-body) tr:hover td { background: var(--art-hover-bg, #fff3c4); }