/* ============================================================================
 * rte.css — Ô nội dung có định dạng (js/ui-rte.js).
 *  Dùng biến theme sẵn có của app.css (--brand/--danger/--success/--bd/--bg)
 *  nên tự khớp cả 2 giao diện Đỏ và Navy. Không nạp font ngoài (kế thừa app).
 * ==========================================================================*/

/* ---- Trình soạn thảo ---- */
.pcg-ed {
  border: 1px solid var(--bd, #ddd);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.pcg-ed.focus {
  border-color: var(--brand, #1F4E79);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #1F4E79) 18%, transparent);
}
.pcg-ed-tb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  padding: 5px 6px;
  background: var(--grey, #f4f4f4);
  border-bottom: 1px solid var(--bd, #ddd);
}
.pcg-ed-tb .pcg-g {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 0 4px;
  border-right: 1px solid var(--bd, #ddd);
}
.pcg-ed-tb .pcg-g:last-child { border-right: 0; }

.pcg-tb {
  min-width: 28px;
  height: 27px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #2b3a47;
  font: inherit;
  font-size: 13.5px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.pcg-tb:hover { background: #fff; border-color: var(--bd, #ddd); }
.pcg-tb.on {
  background: color-mix(in srgb, var(--brand, #1F4E79) 16%, #fff);
  color: var(--brand, #1F4E79);
  border-color: color-mix(in srgb, var(--brand, #1F4E79) 32%, transparent);
}
.pcg-tb b { font-weight: 800; }
.pcg-tb i { font-style: italic; }
.pcg-tb u { text-decoration: underline; }
.pcg-tb s { text-decoration: line-through; }
.pcg-tb svg { width: 16px; height: 16px; display: block; }
.pcg-tb .sub { font-size: 12px; }
.pcg-tb .sup { font-size: 12px; vertical-align: super; }

.pcg-ed-tb .pcg-sel {
  height: 27px;
  border: 1px solid var(--bd, #ddd);
  border-radius: 6px;
  background: #fff;
  color: #2b3a47;
  font: inherit;
  font-size: 12.5px;
  padding: 0 4px;
  cursor: pointer;
  max-width: 130px;
}
/* nút màu chữ / highlight */
.pcg-tb.pcg-sw { position: relative; overflow: hidden; }
.pcg-tb.pcg-sw input[type=color] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; border: 0; padding: 0;
}
.pcg-tb .pcg-swbar {
  position: absolute; left: 5px; right: 5px; bottom: 3px; height: 3px; border-radius: 2px;
}

.pcg-ed-area {
  padding: 10px 13px;
  min-height: 120px;
  max-height: 46vh;
  overflow: auto;
  outline: none;
  font-size: 14px;
  line-height: 1.6;
  color: #17232f;
  background: #fff;
}
.pcg-ed-area:empty::before {
  content: attr(data-ph);
  color: #98a6b3;
}
.pcg-ed.pcg-mini .pcg-ed-area { min-height: 88px; }
.pcg-ed.pcg-mini .pcg-ed-tb { gap: 2px; padding: 4px; }

/* ---- Nội dung ĐÃ ĐỊNH DẠNG khi hiển thị (.pcg-rich) ---- */
.pcg-rich { line-height: 1.55; }
.pcg-rich > :first-child { margin-top: 0; }
.pcg-rich > :last-child { margin-bottom: 0; }
.pcg-rich p { margin: 0 0 8px; }
.pcg-rich h2 { font-size: 16px; font-weight: 800; color: var(--brand, #1F4E79); margin: 8px 0 6px; }
.pcg-rich h3 { font-size: 14.5px; font-weight: 700; color: var(--brand, #1F4E79); margin: 7px 0 5px; }
.pcg-rich h4 { font-size: 13.5px; font-weight: 700; margin: 6px 0 4px; }
.pcg-rich ul, .pcg-rich ol { margin: 0 0 8px; padding-left: 22px; }
.pcg-rich li { margin: 2px 0; }
.pcg-rich blockquote {
  margin: 6px 0; padding: 4px 12px;
  border-left: 3px solid var(--bd, #ddd); color: #4a5a67;
}
.pcg-rich a { color: var(--link, #1F4E79); }
.pcg-rich hr { border: 0; border-top: 1px solid var(--bd, #ddd); margin: 10px 0; }
.pcg-rich table {
  border-collapse: collapse;
  margin: 6px 0 10px;
  font-size: 13.5px;
  max-width: 100%;
}
.pcg-rich table td, .pcg-rich table th {
  border: 1px solid var(--bd, #ccc);
  padding: 5px 8px;
  vertical-align: top;
}
.pcg-rich table th,
.pcg-rich table tr:first-child td {
  background: color-mix(in srgb, var(--brand, #1F4E79) 8%, #fff);
  font-weight: 700;
  text-align: left;
}
/* Editor area cũng là .pcg-rich → dùng chung style bảng/list ở trên */
.pcg-ed-area.pcg-rich table { width: auto; }
/* MỌI bảng rich: cuộn ngang khi tràn (ô hẹp / điện thoại) thay vì đẩy cả trang trượt ngang.
   Selector cũ ".mb-tk-meta .pcg-rich" là hậu duệ (khoảng trắng) nên KHÔNG khớp node dùng CẢ 2 lớp
   cùng cấp (ui-mobile.js:452 <div class="mb-tk-meta pcg-rich">) → dùng ".pcg-rich table" phủ mọi chỗ. */
.pcg-rich table { display: block; overflow-x: auto; }

/* v3.46 (B7) — TRÊN ĐIỆN THOẠI (body.mb-app do mbSync bật): nút thanh định dạng đủ ~40px cho ngón tay
   và thanh cho xuống dòng thoáng hơn. Theo LỚP body.mb-app (không @media) để chỉ ảnh hưởng giao diện điện thoại;
   .pcg-ed-tb vốn đã flex-wrap:wrap nên chỉ cần nới khoảng cách. */
body.mb-app .pcg-ed-tb, body.mb-app .pcg-ed.pcg-mini .pcg-ed-tb { gap: 4px; } /* độ đặc hiệu ≥ luật .pcg-mini (rte.css ~105) */
body.mb-app .pcg-tb { min-width: 40px; height: 40px; font-size: 16px; }
body.mb-app .pcg-tb svg { width: 18px; height: 18px; }