/* Khối thiết kế trong bài Smart content (Hiệu Vàng Ngọc Diệp)
   Dùng biến màu của site (style.css) nên tự đổi theo chế độ sáng / tối.
   .tv-h2-ico   icon trước tiêu đề H2
   .tv-toc      mục lục bài
   .tv-callout  khung nổi bật / mẹo
   .tv-stats    hàng số liệu nhanh
   .tv-table    bảng so sánh (cuộn ngang trên mobile)
   .tv-cards    lưới thẻ (loại vàng, kiểu trang sức...)
   .tv-models   thẻ sản phẩm: ảnh + chữ
   .tv-process  quy trình nhiều bước
   .tv-checks   danh sách kiểm tra (dấu tích)
   .tv-faq      câu hỏi thường gặp (<details>, không cần JS)
   .tv-contact  thẻ thông tin cửa hàng */

.post__content [id] { scroll-margin-top: 96px; }
.post__content > .tv-toc, .post__content > .tv-callout, .post__content > .tv-stats, .post__content > .tv-table,
.post__content > .tv-cards, .post__content > .tv-models, .post__content > .tv-process, .post__content > .tv-checks,
.post__content > .tv-faq, .post__content > .tv-contact { margin-top: 26px; }

/* ---------- Icon trước H2 ---------- */
.post__content h2:has(> .tv-h2-ico) { display: flex; align-items: center; gap: 14px; }
.post__content h2:has(> .tv-h2-ico)::before { display: none; }
.tv-h2-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: hsl(var(--gold)); background: hsl(var(--gold) / .12); border: 1px solid hsl(var(--gold) / .35); }
.tv-h2-ico svg { width: 24px; height: 24px; }

/* ---------- Mục lục ---------- */
.tv-toc { padding: 18px 22px; border-radius: 16px; border: 1px solid hsl(var(--gold) / .3); background: hsl(var(--gold) / .05); }
.post__content .tv-toc p { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--gold)); }
.post__content .tv-toc ol { margin: 0; padding: 0; counter-reset: toc; }
.post__content .tv-toc li { padding-left: 32px; counter-increment: toc; font-size: 15px; line-height: 1.5; }
.post__content .tv-toc li + li { margin-top: 6px; }
.post__content .tv-toc li::before { content: counter(toc, decimal-leading-zero); position: absolute; left: 0; top: 2px; display: block; width: auto; height: auto; border-radius: 0; font-size: 13px; font-weight: 700; line-height: 1.5; color: hsl(var(--gold)); background: none; }
.post__content .tv-toc a { color: hsl(var(--foreground) / .9); font-weight: 500; text-decoration: none; }
.post__content .tv-toc a:hover { color: hsl(var(--gold)); }

/* ---------- Khung nổi bật ---------- */
.tv-callout { display: flex; gap: 16px; padding: 20px 22px; border-radius: 18px; border: 1px solid hsl(var(--gold) / .45); background: linear-gradient(135deg, hsl(var(--gold) / .12), hsl(var(--gold) / .03)); }
.tv-callout-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: hsl(var(--primary-foreground, 30 12% 6%)); background: linear-gradient(135deg, hsl(var(--gold-light, var(--gold))), hsl(var(--gold))); }
.tv-callout-ico svg { width: 24px; height: 24px; }
.post__content .tv-callout h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.3; color: hsl(var(--foreground)); }
.post__content .tv-callout p { margin: 0; font-size: 15.5px; line-height: 1.7; }
.post__content .tv-callout p + p { margin-top: 8px; }
.tv-callout--warn { border-color: hsl(0 70% 55% / .45); background: linear-gradient(135deg, hsl(0 70% 55% / .1), hsl(0 70% 55% / .02)); }
.tv-callout--warn .tv-callout-ico { color: #fff; background: hsl(0 65% 50%); }

/* ---------- Số liệu nhanh ---------- */
.tv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; padding: 0; }
.post__content .tv-stats > li { padding: 18px 14px; text-align: center; border-radius: 16px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.post__content .tv-stats > li::before { display: none; }
.post__content .tv-stats > li + li { margin-top: 0; }
.tv-stat-num { display: block; font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1.1; color: hsl(var(--gold)); }
.post__content .tv-stat-label { display: block; margin-top: 6px; font-size: 14px; line-height: 1.45; color: hsl(var(--muted-foreground)); }

/* ---------- Bảng so sánh ---------- */
.tv-table { overflow-x: auto; border-radius: 16px; border: 1px solid hsl(var(--border)); -webkit-overflow-scrolling: touch; }
.tv-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.tv-table th, .tv-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid hsl(var(--border)); }
.tv-table thead th { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: hsl(var(--gold)); background: hsl(var(--gold) / .08); }
.tv-table tbody tr:last-child td, .tv-table tbody tr:last-child th { border-bottom: 0; }
.tv-table tbody th { font-weight: 700; color: hsl(var(--foreground)); white-space: nowrap; }
.tv-table tbody tr:nth-child(even) { background: hsl(var(--foreground) / .025); }
.post__content .tv-table-note { margin-top: 8px; font-size: 13.5px; color: hsl(var(--muted-foreground)); }

/* ---------- Lưới thẻ ---------- */
.tv-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; padding: 0; }
.post__content .tv-cards > li { padding: 20px; border-radius: 18px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); transition: border-color .2s, transform .2s; }
.post__content .tv-cards > li:hover { border-color: hsl(var(--gold) / .5); transform: translateY(-2px); }
.post__content .tv-cards > li::before { display: none; }
.post__content .tv-cards > li + li { margin-top: 0; }
.tv-card-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: hsl(var(--gold)); background: hsl(var(--gold) / .12); }
.post__content .tv-cards h3 { margin: 10px 0 6px; font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.25; color: hsl(var(--foreground)); }
.post__content .tv-cards p { margin: 0; font-size: 15px; line-height: 1.65; }

/* ---------- Thẻ sản phẩm: ảnh + chữ ---------- */
.tv-models { display: flex; flex-direction: column; gap: 16px; }
.tv-model { display: grid; grid-template-columns: 220px minmax(0, 1fr); overflow: hidden; border-radius: 18px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.tv-model:nth-child(even) { grid-template-columns: minmax(0, 1fr) 220px; }
.tv-model:nth-child(even) .tv-model-media { order: 2; }
.tv-model-media { margin: 0; aspect-ratio: 1; background: hsl(var(--foreground) / .05); }
.tv-model-media img { width: 100%; height: 100%; object-fit: cover; }
.tv-model-body { padding: 18px 22px; }
.post__content .tv-model-body h3 { margin: 8px 0 6px; font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.25; color: hsl(var(--foreground)); }
.post__content .tv-model-body p { margin: 0; font-size: 15px; line-height: 1.65; }
.post__content .tv-model-body p + p { margin-top: 8px; }
.post__content .tv-model-body a { font-size: 14px; }

/* ---------- Quy trình ---------- */
.post__content .tv-process { position: relative; padding: 0; counter-reset: none; }
.post__content .tv-process::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(hsl(var(--gold) / .7), hsl(var(--gold) / .15)); }
.post__content .tv-process > li { position: relative; padding-left: 64px; }
.post__content .tv-process > li::before { display: none; }
.post__content .tv-process > li + li { margin-top: 14px; }
.tv-step-num { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-weight: 700; font-size: 15px; color: hsl(var(--primary-foreground, 30 12% 6%)); background: linear-gradient(135deg, hsl(var(--gold-light, var(--gold))), hsl(var(--gold))); box-shadow: 0 0 0 5px hsl(var(--background)); }
.tv-step-card { padding: 16px 20px; border-radius: 16px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.post__content .tv-step-card h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.3; color: hsl(var(--foreground)); }
.post__content .tv-step-card p { margin: 0; font-size: 15px; line-height: 1.7; }
.post__content .tv-step-card p + p { margin-top: 6px; }

/* ---------- Danh sách kiểm tra ---------- */
.post__content .tv-checks { display: grid; gap: 10px; padding: 0; }
.post__content .tv-checks > li { padding: 12px 16px 12px 48px; border-radius: 14px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.post__content .tv-checks > li + li { margin-top: 0; }
.post__content .tv-checks > li::before { content: ""; left: 16px; top: 15px; width: 20px; height: 20px; border-radius: 50%; transform: none; background: hsl(var(--gold)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171310' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / 13px no-repeat; }

/* ---------- FAQ ---------- */
.tv-faq { display: grid; gap: 10px; }
.tv-faq-item { overflow: hidden; border-radius: 16px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); transition: border-color .2s; }
.tv-faq-item[open] { border-color: hsl(var(--gold) / .5); }
.tv-faq-item summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; }
.tv-faq-item summary::-webkit-details-marker { display: none; }
.tv-faq-item summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-left: auto; border-right: 2px solid hsl(var(--gold)); border-bottom: 2px solid hsl(var(--gold)); transform: rotate(45deg); transition: transform .2s; }
.tv-faq-item[open] summary::after { transform: rotate(-135deg); }
.tv-faq-q { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-size: 13px; font-weight: 700; color: hsl(var(--gold)); background: hsl(var(--gold) / .12); }
.post__content .tv-faq-item h3 { margin: 0; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.45; color: hsl(var(--foreground)); }
.tv-faq-a { padding: 0 18px 16px 58px; }
.post__content .tv-faq-a p { margin: 0; font-size: 15px; line-height: 1.7; }
.post__content .tv-faq-a p + p { margin-top: 8px; }

/* ---------- Thẻ thông tin cửa hàng ---------- */
.tv-contact { padding: 22px; border-radius: 20px; border: 1px solid hsl(var(--gold) / .4); background: linear-gradient(160deg, hsl(var(--gold) / .1), hsl(var(--card))); }
.tv-contact-head { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid hsl(var(--gold) / .25); }
.tv-contact-head img { width: 64px; height: auto; }
.post__content .tv-contact-head p { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--gold)); }
.post__content .tv-contact-head h3 { margin: 2px 0 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.25; color: hsl(var(--foreground)); }
.tv-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-top: 14px; }
.post__content .tv-contact-row { display: flex; gap: 10px; margin: 0; font-size: 15px; line-height: 1.5; }
.tv-contact-row--wide { grid-column: 1 / -1; }
.tv-contact-row svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: hsl(var(--gold)); }
.tv-contact-row small { display: block; font-size: 12px; color: hsl(var(--muted-foreground)); }
.tv-contact-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.post__content .tv-contact-cta a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; }
.post__content .tv-btn--call { color: hsl(var(--primary-foreground, 30 12% 6%)); background: linear-gradient(90deg, hsl(var(--gold)), hsl(var(--gold-light, var(--gold)))); }
.post__content .tv-btn--zalo { color: #fff; background: #0068ff; }
.tv-contact-cta svg { width: 18px; height: 18px; }

@media (max-width: 640px) {
  .tv-h2-ico { width: 40px; height: 40px; border-radius: 12px; }
  .tv-h2-ico svg { width: 21px; height: 21px; }
  .tv-callout { padding: 16px; gap: 12px; }
  .tv-callout-ico { width: 38px; height: 38px; }
  .tv-model, .tv-model:nth-child(even) { grid-template-columns: 1fr; }
  .tv-model:nth-child(even) .tv-model-media { order: 0; }
  .tv-model-media { aspect-ratio: 4 / 3; }
  .tv-model-body { padding: 16px; }
  .tv-faq-a { padding-left: 18px; }
  .tv-contact { padding: 18px; }
  .tv-contact-grid { grid-template-columns: 1fr; }
  .tv-stat-num { font-size: 28px; }
  .tv-table table { min-width: 500px; font-size: 14px; }
  .tv-table th, .tv-table td { padding: 10px 12px; }
}