/* ============================================================
 * Nước Hoa Ô Tô — Category Content (phần nội dung dưới sản phẩm)
 * Scope: .cc  (bọc quanh .article-body trong content_product.php)
 * Design language: lx-* (gold #c5a059 / Roboto)
 * ============================================================ */

/* Neo quay lại lưới sản phẩm (nút "Xem sản phẩm" ở cuối bài) */
#cate-top {
  scroll-margin-top: 100px;
}

.cc {
  --cc-gold: #c5a059;
  --cc-gold-d: #9c7c38;
  --cc-gold-10: rgba(197, 160, 89, 0.10);
  --cc-gold-20: rgba(197, 160, 89, 0.22);
  --cc-ink: #1c1917;
  --cc-body: #44403c;
  --cc-muted: #78716c;
  --cc-sand: #f5f1e8;
  --cc-line: rgb(231, 229, 228);

  /* Nền content: card xám ấm, lấy đúng tông trang tin tức (news/detail.php) */
  --cc-card-top: #fafaf9;
  --cc-card-bottom: #f5f5f4;

  --cc-peek: 420px;          /* chiều cao hé lộ khi thu gọn - mobile */
  --cc-sticky-offset: 100px; /* bù cho header sticky khi nhảy anchor */

  /* Lớp ngoài màu trắng để tách khối khỏi nền pearl của trang */
  /* Khung TRANG duy nhat cua khoi. Truoc day .cc-body ben trong cung la card (nen xam + vien)
     -> 2 khung long nhau, padding cong don, thua khoang trong. Nay chi con 1 khung o day. */
  margin: 2.5rem 0 0;
  padding: 1.5rem 1.25rem 2rem;
  background: #fff;
  border: 1px solid var(--cc-line);
  border-radius: 14px;
  font-family: 'Work Sans', 'Inter', system-ui, sans-serif;
  color: var(--cc-body);
}

@media (min-width: 992px) {
  .cc {
    --cc-peek: 560px;
    margin-top: 3rem;
    padding: 2rem 2rem 2.5rem;
  }
}

/* Biến thể phẳng: bỏ lớp vỏ trắng, chỉ giữ card nội dung bên trong.
   Dùng khi khối .cc nằm sẵn trong một section đã có nền riêng
   (ví dụ các đoạn HTML xen giữa section full-width ở trang chi tiết sản phẩm). */
.cc.cc--flush {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* ---------- 1. Header của khối ---------- */
.cc-head {
  margin-bottom: 1.5rem;
}

.cc-label {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cc-gold);
  margin-bottom: 0.375rem;
}

.cc-title {
  font-family: 'Roboto', sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--cc-ink);
  margin: 0;
}

@media (min-width: 768px) {
  .cc-title { font-size: 2.125rem; }
}

/* The rong chi de ve gach trang tri -> dung <span> (inline, khong mang nghia) thay <div>.
   Vi span la inline nen phai khai display:block moi an width/height. */
.cc-head-rule {
  display: block;
  width: 56px;
  height: 2px;
  background: var(--cc-gold);
  margin-top: 0.875rem;
  border-radius: 2px;
}

/* ---------- 2. Vùng thu gọn / mở rộng ---------- */
/* UX: KHONG lam card. Truoc day .cc va .cc-body deu la khung co nen + vien -> 2 khung long nhau,
   padding cong don, nhieu khoang trong thua. Nay noi dung chay thang tren nen trang cua trang.
   Chi giu position + overflow vi co che thu gon (is-collapsed) can cat chieu cao. */
.cc-body {
  position: relative;
  overflow: hidden;
  padding: 0;
}

.cc-body.is-collapsed {
  max-height: var(--cc-peek);
}

.cc-body.is-collapsed::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 170px;
  /* Dai mo fade ve nen TRANG cua trang (truoc day fade ve mau xam cua card da bo) */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 78%);
  pointer-events: none;
}

.cc-toggle-wrap {
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
}

.cc-toggle {
  appearance: none;
  border: 1px solid var(--cc-gold);
  background: #fff;
  color: var(--cc-gold-d);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.625rem 1.5rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cc-toggle:hover,
.cc-toggle:focus-visible {
  background: var(--cc-gold);
  color: #fff;
}

.cc-toggle i {
  font-size: 0.75rem;
  transition: transform 0.25s ease;
}

.cc-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/* ---------- 3. Typography nội dung (prose) ---------- */
.cc .article-body {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--cc-body);
}

/* Giới hạn độ dài dòng để dễ đọc; bảng & TOC vẫn được tràn rộng */
.cc .article-body > p,
.cc .article-body > ul,
.cc .article-body > ol,
.cc .article-body > h2,
.cc .article-body > h3,
.cc .article-body > h4 {
  max-width: 74ch;
}

.cc .article-body p {
  margin: 0 0 1.125rem;
}

.cc .article-body h2,
.cc .article-body h3,
.cc .article-body h4 {
  color: var(--cc-ink);
  scroll-margin-top: var(--cc-sticky-offset);
}

.cc .article-body h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 2.5rem 0 0.875rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--cc-line);
}

/* Gach vang duoi H2 - cung kieu voi .cc-head-rule (tieu de khoi), ap cho H2 trong
   noi dung TinyMCE nen khong can them class o admin. */
.cc .article-body h2::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  background: var(--cc-gold);
  margin-top: 0.875rem;
  border-radius: 2px;
}

.cc .article-body h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

@media (min-width: 768px) {
  .cc .article-body h2 { font-size: 1.75rem; }
}

.cc .article-body h3 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 1.75rem 0 0.625rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--cc-gold);
}

.cc .article-body h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: 1.25rem 0 0.5rem;
}

.cc .article-body strong,
.cc .article-body b {
  color: var(--cc-ink);
  font-weight: 600;
}

.cc .article-body a {
  color: var(--cc-gold-d);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--cc-gold-20);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

.cc .article-body a:hover {
  color: var(--cc-gold);
  text-decoration-color: currentColor;
}

.cc .article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 1rem 0;
}

/* ---------- 4. Đoạn trả lời trực tiếp (AEO answer block) ---------- */
.cc .article-body p.ac-answer {
  background: #fff;
  border: 1px solid var(--cc-line);
  border-left: 3px solid var(--cc-gold);
  border-radius: 0 8px 8px 0;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04);
  padding: 0.875rem 1.125rem;
  margin: 0 0 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--cc-ink);
}

.cc .article-body p.ac-answer strong {
  font-weight: 600;
}

/* ---------- 5. Danh sách ---------- */
.cc .article-body ul,
.cc .article-body ol {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.cc .article-body li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.625rem;
}

.cc .article-body ul > li::before {
  content: '';
  position: absolute;
  left: 0.375rem;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cc-gold);
}

.cc .article-body ol {
  counter-reset: cc-ol;
}

.cc .article-body ol > li {
  counter-increment: cc-ol;
  padding-left: 2.25rem;
  margin-bottom: 0.75rem;
}

.cc .article-body ol > li::before {
  content: counter(cc-ol);
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--cc-sand);
  color: var(--cc-gold-d);
  font-size: 0.8125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- 6. Mục lục (TOC) ---------- */
.cc .ac-toc {
  background: #fff;
  border: 1px solid var(--cc-line);
  border-radius: 12px;
  padding: 1.125rem 1.25rem;
  margin: 0 0 2rem;
}

@media (min-width: 768px) {
  .cc .ac-toc { padding: 1.375rem 1.5rem; }
}

.cc .ac-toc-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cc-gold);
  margin: 0 0 0.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Nút bung TOC trên mobile (JS chèn) */
.cc-toc-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--cc-gold-d);
  font: inherit;
  cursor: pointer;
  padding: 0;
  display: none;
}

.cc .ac-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

@media (min-width: 992px) {
  .cc .ac-toc-list {
    column-count: 2;
    column-gap: 2rem;
  }
}

.cc .ac-toc-list li {
  padding: 0;
  margin: 0 0 0.5rem;
  break-inside: avoid;
}

.cc .article-body .ac-toc-list > li::before,
.cc .ac-toc-list > li::before {
  content: none;
}

.cc .ac-toc-list a {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--cc-body);
  text-decoration: none;
  padding: 0.25rem 0 0.25rem 0.75rem;
  border-left: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.cc .ac-toc-list a:hover {
  color: var(--cc-gold-d);
  border-left-color: var(--cc-gold-20);
  text-decoration: none;
}

.cc .ac-toc-list .ac-toc-h3 a {
  padding-left: 1.5rem;
  font-size: 0.875rem;
  color: var(--cc-muted);
}

/* Trạng thái đang đọc (scroll-spy) */
.cc .ac-toc-list a.is-active {
  color: var(--cc-gold-d);
  font-weight: 600;
  border-left-color: var(--cc-gold);
}

/* Thu gọn TOC trên mobile */
@media (max-width: 767.98px) {
  .cc-toc-btn { display: inline-flex; align-items: center; gap: 0.25rem; }
  .cc .ac-toc.is-folded .ac-toc-list {
    display: none;
  }
}

/* ---------- 7. Bảng so sánh ---------- */
.cc-table-wrap {
  position: relative;
  margin: 0 0 1.5rem;
}

.cc-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--cc-line);
  border-radius: 12px;
}

.cc .article-body table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin: 0;
  background: #fff;
}

.cc .article-body thead th {
  background: var(--cc-sand);
  color: var(--cc-ink);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-align: left;
  padding: 0.75rem 1rem;
  white-space: nowrap;
  border-bottom: 1px solid var(--cc-line);
}

.cc .article-body tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--cc-line);
  vertical-align: top;
  line-height: 1.55;
}

.cc .article-body tbody tr:last-child td {
  border-bottom: 0;
}

.cc .article-body tbody tr:nth-child(even) td {
  background: rgba(245, 241, 232, 0.35);
}

.cc .article-body tbody td:first-child {
  font-weight: 600;
  color: var(--cc-ink);
}

/* Gợi ý vuốt ngang trên mobile */
.cc-swipe-hint {
  display: none;
  font-size: 0.75rem;
  color: var(--cc-muted);
  margin-top: 0.5rem;
  align-items: center;
  gap: 0.375rem;
}

@media (max-width: 767.98px) {
  .cc-table-wrap.has-overflow .cc-swipe-hint { display: flex; }
  .cc-table-wrap.has-overflow.is-scrolled .cc-swipe-hint { display: none; }
}

/* ---------- 8. FAQ accordion ----------
 * Khối ĐỘC LẬP: không phụ thuộc .cc-body, cũng không bắt buộc nằm trong .cc.
 * Mọi var() đều có giá trị dự phòng nên đặt ở đâu cũng hiển thị đúng;
 * khi nằm trong .cc thì biến của .cc kế thừa xuống và được ưu tiên. */
.faq-block {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--cc-line, rgb(231, 229, 228));
  font-family: 'Work Sans', 'Inter', system-ui, sans-serif;
  color: var(--cc-body, #44403c);
}

.faq-title {
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--cc-ink, #1c1917);
  margin: 0 0 1rem;
}

@media (min-width: 768px) {
  .faq-title { font-size: 1.75rem; }
}

.cc-faq-item {
  border: 1px solid var(--cc-line, rgb(231, 229, 228));
  border-radius: 10px;
  background: #fff;
  margin-bottom: 0.625rem;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.cc-faq-item.is-open {
  border-color: var(--cc-gold-20, rgba(197, 160, 89, 0.22));
}

.cc-faq-q {
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--cc-ink, #1c1917);
  text-align: left;
  padding: 0.9375rem 3rem 0.9375rem 1.125rem;
  cursor: pointer;
  position: relative;
  line-height: 1.5;
}

/* Mũi tên vẽ bằng CSS thuần, không phụ thuộc icon font */
.cc-faq-q::after {
  content: '';
  position: absolute;
  right: 1.25rem;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--cc-gold, #c5a059);
  border-bottom: 2px solid var(--cc-gold, #c5a059);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s ease;
}

.cc-faq-item.is-open .cc-faq-q::after {
  transform: translateY(-30%) rotate(225deg);
}

.cc-faq-q:hover {
  color: var(--cc-gold-d, #9c7c38);
}

.cc-faq-a {
  display: none;
  padding: 0 1.125rem 1.125rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--cc-body, #44403c);
}

.cc-faq-item.is-open .cc-faq-a {
  display: block;
}

.cc-faq-a p {
  margin: 0;
  max-width: 74ch;
}

/* ---------- 9. CTA quay lại lưới sản phẩm ---------- */
.cc-cta {
  margin-top: 2.5rem;
  padding: 1.5rem;
  background: var(--cc-sand);
  border: 1px solid var(--cc-gold-20);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .cc-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.75rem;
  }
}

.cc-cta-text {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--cc-muted);
  max-width: 46ch;
}

.cc-cta-text strong {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--cc-ink);
  margin-bottom: 0.25rem;
}

.cc-cta-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--cc-ink);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.6875rem 1.375rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.cc-cta-btn:hover,
.cc-cta-btn:focus-visible {
  background: var(--cc-gold);
  color: #fff;
  text-decoration: none;
}

/* ---------- 10. Focus / motion / print ---------- */
.cc :focus-visible {
  outline: 2px solid var(--cc-gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cc * {
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  .cc-body.is-collapsed { max-height: none; }
  .cc-body.is-collapsed::after,
  .cc-toggle-wrap,
  .cc-cta { display: none; }
  .cc-faq-a { display: block !important; }
}