/* ============================================================
   MTM — Bài viết "Thông tin hay"
   Scope: mọi thứ CMS xuất trong .article-content + layout TOC
   Token đồng bộ với PDP: 1 accent đỏ, viền mảnh, radius 12px
   ============================================================ */

:root {
  --mtm-red: #d70018;
  --mtm-red-dark: #a30012;
  --mtm-red-tint: #fdf1f0;      /* nền kem đỏ rất nhạt — callout, highlight */
  --ink: #1a1a1a;
  --ink-2: #555;
  --ink-3: #8a8a8a;
  --line: #ececec;
  --line-strong: #dedede;
  --surface: #fff;
  --surface-2: #f7f7f8;
  --radius: 12px;
  --content-max: 720px;          /* ~75 ký tự/dòng cho font 16px */
}

/* ---------- Layout 2 cột: bài + mục lục sticky ---------- */

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 32px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 16px;
}

.article-toc {
  position: sticky;
  top: 88px;                     /* header 64px + đệm */
  align-self: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  max-height: calc(100vh - 112px);
  overflow-y: auto;
}

.article-toc-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  margin: 0 0 10px;
}

.article-toc a {
  display: block;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-2);
  text-decoration: none;
  padding: 5px 0 5px 12px;
  border-left: 2px solid transparent;
}

.article-toc a:hover { color: var(--ink); }

.article-toc a.is-active {
  color: var(--mtm-red);
  font-weight: 500;
  border-left-color: var(--mtm-red);
}

.article-toc a[data-level="3"] { padding-left: 24px; }

@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-toc {
    position: static;
    max-height: none;
    order: -1;                   /* mobile: TOC gọn trên đầu, có thể collapse */
    margin-bottom: 20px;
  }
}

/* ---------- Meta đầu bài ---------- */

.article-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-3);
  margin: 0 0 16px;
}

/* ---------- Vùng nội dung CMS ---------- */

.article-content {
  max-width: var(--content-max);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.75;
}

.article-content p { margin: 0 0 1em; }

/* Heading: khoảng trên lớn hơn khoảng dưới → nội dung dính vào heading của nó */
.article-content h2 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  margin: 2em 0 0.6em;
}

.article-content h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  margin: 1.6em 0 0.5em;
}

.article-content h2:first-child,
.article-content h3:first-child { margin-top: 0; }

/* Link trong bài: đỏ MTM, gạch chân mảnh — diệt hệ xanh mặc định */
.article-content a {
  color: var(--mtm-red);
  text-decoration: underline;
  text-decoration-color: rgba(215, 0, 24, 0.35);
  text-underline-offset: 3px;
}

.article-content a:hover {
  color: var(--mtm-red-dark);
  text-decoration-color: currentColor;
}

.article-content ul,
.article-content ol { margin: 0 0 1em; padding-left: 1.4em; }
.article-content li { margin-bottom: 0.4em; }

.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 1.2em 0;
  display: block;
}

.article-content figcaption,
.article-content img + em {      /* caption kiểu chữ nghiêng ngay dưới ảnh */
  display: block;
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
  margin-top: -0.6em;
  margin-bottom: 1.2em;
  font-style: normal;
}

/* ---------- Bảng: áp cho mọi bảng CMS xuất ra ---------- */

.article-content .table-wrap {    /* JS bọc mỗi <table> để cuộn ngang mobile */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 1.2em 0;
}

.article-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.5;
}

.article-content table th,
.article-content table tr:first-child td {   /* CMS dùng td cho header */
  background: var(--surface-2);
  font-weight: 600;
  text-align: left;
}

.article-content table th,
.article-content table td {
  padding: 10px 14px;
  border: 0;
  border-top: 1px solid var(--line);
  vertical-align: top;
}

.article-content table tr:first-child th,
.article-content table tr:first-child td { border-top: 0; }

/* Cột tiêu chí (cột đầu) nhạt hơn giá trị */
.article-content table td:first-child { color: var(--ink-2); }

/* ---------- Callout "Tóm tắt": bắt bảng 1 hàng 1 cột của CMS ---------- */
/* Fallback an toàn: nếu :has không hỗ trợ, bảng vẫn ăn style bảng thường */

.article-content table:has(> tbody > tr:only-child > td:only-child),
.article-content .callout {
  display: block;
  background: var(--mtm-red-tint);
  border: 0;
  border-left: 3px solid var(--mtm-red);
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  font-size: 14.5px;
}

.article-content table:has(> tbody > tr:only-child > td:only-child) td {
  display: block;
  background: transparent;
  border: 0;
  padding: 0;
  font-weight: 400;
  color: var(--ink);
}

/* ---------- Product embed: template card cho khối giá ---------- */
/* CMS render mỗi sản phẩm nhúng thành .product-embed theo markup mẫu */

.article-content .product-embed-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 1.2em 0;
}

@media (max-width: 640px) {
  .article-content .product-embed-grid { grid-template-columns: 1fr; }
}

.article-content .product-embed {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}

.article-content .product-embed:hover { border-color: var(--line-strong); }

.article-content .product-embed img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 8px;
  margin: 0;
  flex-shrink: 0;
}

.product-embed .pe-name {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-embed .pe-price {
  font-size: 15px;
  font-weight: 600;
  color: var(--mtm-red);
}

.product-embed .pe-price del {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-3);
  margin-left: 6px;
}

.product-embed .pe-note {          /* "Sắp về hàng" / "Hoặc trả trước..." */
  font-size: 12px;
  color: var(--ink-3);
  margin: 2px 0 0;
}

/* ---------- Sidebar: bài viết cùng chủ đề, dưới TOC ---------- */

.article-related {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-top: 14px;
}

.article-related-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  margin: 0 0 10px;
}

.article-related a {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 6px 0;
  text-decoration: none;
  color: var(--ink);
}

.article-related img,
.article-related .ar-thumb {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.article-related .ar-title {
  font-size: 13px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-related a:hover .ar-title { color: var(--mtm-red); }

@media (max-width: 900px) {
  .article-related { display: none; } /* mobile: đã có khối cuối bài */
}

/* Wrapper cột phải: sticky cả cụm TOC + bài cùng chủ đề */
.article-sidebar {
  position: sticky;
  top: 88px;
  align-self: start;
  max-height: calc(100vh - 112px);
  overflow-y: auto;
}
.article-sidebar .article-toc {
  position: static;
  max-height: none;
  overflow: visible;
}

/* ---------- Cuối bài: tags, share, form hỏi đáp ---------- */

.article-footer { max-width: var(--content-max); }

.article-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 28px 0 0;
}

.article-tags .tags-label {
  font-size: 13px;
  color: var(--ink-3);
  margin-right: 2px;
}

.article-tags a {
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 5px 12px;
}

.article-tags a:hover {
  color: var(--mtm-red);
  border-color: var(--mtm-red);
}

.article-share {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
}

.article-share .share-label {
  font-size: 13px;
  color: var(--ink-3);
  margin-right: 2px;
}

.article-share a {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
}

.article-share a:hover {
  color: var(--mtm-red);
  border-color: var(--mtm-red);
}

.article-qa { margin: 28px 0 0; }

.article-qa h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 10px;
}

.article-qa textarea {
  width: 100%;
  min-height: 90px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  resize: vertical;
}

.article-qa textarea::placeholder { color: var(--ink-3); }

.article-qa textarea:focus {
  outline: none;
  border-color: var(--mtm-red);
}

.article-qa .qa-submit {
  display: inline-block;
  margin-top: 10px;
  background: var(--mtm-red);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.article-qa .qa-submit:hover { background: var(--mtm-red-dark); }

/* ============================================================
   BO SUNG (khong co trong file goc) - can thiet de gan dung DOM
   that cua trang bai viet, KHONG doi bat ky rule nao o tren.
   ============================================================ */

/* Nut "Gui cau hoi" thuc te nam trong plugin/comment/form-comment.php (view dung chung 5 noi
   khac) - khong bao trong .article-qa nhu ban mau (view do khong the bao lai vi se anh huong
   cac trang dung chung). Chon selector rieng .qa-submit (khong can to tien .article-qa) de nut
   van len mau do MTM dung yeu cau, ma khong phai bao them wrapper vao view dung chung. */
.qa-submit {
  display: inline-block;
  background: var(--mtm-red);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.qa-submit:hover { background: var(--mtm-red-dark); }

/* An widget muc luc mac dinh (Dcontent/Toc::create()) lap lai trong noi dung - da chuyen sang
   sidebar .article-toc (Viec 2). Cung tien le da co san voi trang huongdantrahang. */
.article-content .tocmain__wrapper { display: none; }