/* =====================================================================
   SERPUPDATE — Support Docs v2  (.scd-*)
   Format mới cho trang Hướng dẫn (single support_doc).
   Light-mode, HTML-first. Dùng token từ serpupdate-tokens.css.
   ===================================================================== */

/* Nền trang chuẩn hóa ở lớp chung serpupdate-ui.css (mục 0) — không vá riêng ở đây. */
.scd { color: var(--text-primary); font-family: var(--font-sans); }
.scd *, .scd *::before, .scd *::after { box-sizing: border-box; }
.scd a { color: var(--primary); text-decoration: none; }
.scd a:hover { text-decoration: underline; }

/* ── Breadcrumb (nổi nhẹ trên page-bg, thẳng hàng header) ── */
.scd-breadcrumb { background: transparent; }
.scd-breadcrumb__in { max-width: 1250px; margin: 0 auto; padding: 18px 24px 0; font-size: 13px; color: var(--text-secondary); display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.scd-breadcrumb__sep { color: var(--text-muted); }
.scd-breadcrumb a { color: var(--text-secondary); }
.scd-breadcrumb a:hover { color: var(--primary); }
.scd-breadcrumb__cur { color: var(--text-primary); font-weight: 600; }

/* ── Shell 3 cột (thẳng hàng header 1250) ── */
.scd-shell { max-width: 1250px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 248px minmax(0,1fr) 232px; gap: 40px; align-items: start; }

/* ── Nav trái (bám pattern .sub-sidebar của Web App) ── */
.scd-nav { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; padding: 20px 0 40px; }
.scd-search { position: relative; margin-bottom: 18px; }
/* selector mạnh + !important để thắng reset input của Flatsome (đang ép padding nhỏ + radius 0) */
.scd .scd-search input { width: 100% !important; margin: 0 !important; font-family: var(--font-sans); font-size: 13px; color: var(--text-primary); background: transparent !important; border: 1px solid var(--border) !important; border-radius: 10px !important; padding: 10px 14px 10px 38px !important; outline: none; box-shadow: none !important; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.scd .scd-search input::placeholder { color: var(--text-muted); }
.scd .scd-search input:hover { border-color: var(--border-2) !important; }
.scd .scd-search input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-light) !important; }
.scd-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; z-index: 1; }

/* Thanh cuộn mảnh, tinh tế cho nav trái + mục lục phải (thay scrollbar mặc định to thô) */
.scd-nav, .scd-aside { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
.scd-nav::-webkit-scrollbar, .scd-aside::-webkit-scrollbar { width: 7px; }
.scd-nav::-webkit-scrollbar-track, .scd-aside::-webkit-scrollbar-track { background: transparent; }
.scd-nav::-webkit-scrollbar-thumb, .scd-aside::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.scd-nav::-webkit-scrollbar-thumb:hover, .scd-aside::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: padding-box; }
.scd-nav-group { margin-bottom: 18px; }
.scd-nav-group + .scd-nav-group { padding-top: 16px; border-top: 1px solid var(--border-light); }
.scd-nav-group__title { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-primary); margin: 0 0 8px; padding: 0 14px; }
.scd-nav-list { list-style: none; margin: 0; padding: 0; }
.scd-nav-list li { margin: 0; }
.scd-nav-list a { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.4; color: var(--text-secondary); padding: 6px 14px; border-left: 2px solid transparent; transition: background var(--transition-fast), color var(--transition-fast); }
.scd-nav-list a:hover { background: var(--primary-light); color: var(--text-primary); text-decoration: none; }
.scd-nav-list a.is-active { background: var(--primary-light); color: var(--text-primary); font-weight: 600; border-left-color: var(--primary); }
/* Section "Sắp ra mắt" */
.scd-soon { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--amber-deep); background: var(--amber-tint); padding: 1px 6px; border-radius: 999px; vertical-align: middle; }
.scd-nav-group--soon .scd-nav-group__title { color: var(--text-muted); }
.scd-nav-soon { display: block; font-size: 12.5px; color: var(--text-muted); padding: 6px 14px; font-style: italic; }

/* ── Main ── */
.scd-main { min-width: 0; padding: 26px 0 64px; }
.scd-article__eyebrow { font-size: 13px; font-weight: 700; color: var(--primary); margin: 0 0 10px; }
.scd-article__title { font-family: var(--font-sans); font-size: clamp(28px, 3.4vw, 38px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--text-primary); margin: 0 0 16px; text-wrap: balance; }
.scd-article__meta { display: flex; flex-wrap: wrap; gap: 18px; padding-bottom: 22px; margin-bottom: 28px; border-bottom: 1px solid var(--border); }
.scd-meta-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.scd-meta-item svg { color: var(--text-muted); }

/* ── Content typography ── */
.scd-content { font-size: 16px; line-height: 1.72; color: var(--text-primary); }
.scd-content > *:first-child { margin-top: 0; }
.scd-content p { margin: 0 0 18px; color: #33384d; text-align: justify; }
.scd-content h2 { font-size: 25px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; color: var(--text-primary); margin: 44px 0 16px; padding-top: 8px; scroll-margin-top: 90px; }
.scd-content h3 { font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--text-primary); margin: 32px 0 12px; scroll-margin-top: 90px; }
.scd-content h2 + h3 { margin-top: 18px; }
.scd-content ul, .scd-content ol { margin: 0 0 18px; padding-left: 22px; }
.scd-content li { margin: 0 0 8px; color: #33384d; }
.scd-content li::marker { color: var(--text-muted); }
.scd-content strong { font-weight: 700; color: var(--text-primary); }
.scd-content a { font-weight: 500; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--border-2); }
.scd-content a:hover { text-decoration-color: var(--primary); }
.scd-content img { max-width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); margin: 12px 0; }
.scd-content hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }
.scd-content code { font-family: var(--font-mono); font-size: .88em; background: var(--surface-3); color: var(--primary-dark); padding: 2px 6px; border-radius: var(--radius-sm); }
.scd-content kbd { font-family: var(--font-mono); font-size: .82em; background: var(--card-bg); border: 1px solid var(--border-2); border-bottom-width: 2px; border-radius: var(--radius-sm); padding: 1px 6px; color: var(--text-primary); }

/* anchor link cạnh heading */
.scd-anchor { margin-left: 8px; color: var(--text-muted); font-weight: 400; opacity: 0; text-decoration: none; transition: opacity var(--transition-fast); }
.scd-content h2:hover .scd-anchor, .scd-content h3:hover .scd-anchor { opacity: 1; }
.scd-anchor:hover { color: var(--primary); text-decoration: none; }

/* ── Bảng ── */
.scd-content table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 14.5px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.scd-content thead th { background: var(--table-head-bg); text-align: left; font-weight: 700; color: var(--text-primary); font-size: 13.5px; }
.scd-content th, .scd-content td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.scd-content td { color: #33384d; }
.scd-content tbody tr:last-child td { border-bottom: 0; }
.scd-content tbody tr:hover { background: var(--table-hover); }
.scd-table-wrap { overflow-x: auto; margin: 0 0 22px; }
.scd-table-wrap > table { margin: 0; }

/* ── Callout (KHÔNG dùng sọc màu bên trái — phân biệt loại bằng icon + nền tint + màu chữ) ── */
.scd-callout { border: 1px solid var(--border); background: var(--card-bg); border-radius: var(--radius-lg); padding: 15px 18px; margin: 0 0 22px; font-size: 15px; line-height: 1.65;
  --scd-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); }
.scd-callout > *:last-child { margin-bottom: 0; }
.scd-callout__title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; margin: 0 0 6px; color: var(--text-primary); }
.scd-callout__title::before { content: ""; display: inline-block; width: 17px; height: 17px; flex-shrink: 0; background-color: currentColor; -webkit-mask: var(--scd-ic) center / contain no-repeat; mask: var(--scd-ic) center / contain no-repeat; }
.scd-callout p, .scd-callout li { color: #33384d; text-align: justify; }

.scd-callout--tip { background: var(--primary-light);
  --scd-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.1V18h6v-1.2c0-.8.4-1.6 1-2.1A7 7 0 0 0 12 2z'/%3E%3C/svg%3E"); }
.scd-callout--tip .scd-callout__title { color: var(--primary-dark); }

.scd-callout--note { background: var(--surface-3); }

.scd-callout--warn { background: var(--amber-tint);
  --scd-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20L12 3z'/%3E%3Cpath d='M12 10v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.scd-callout--warn .scd-callout__title { color: var(--amber-deep); }

.scd-callout--success { background: var(--green-tint);
  --scd-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E"); }
.scd-callout--success .scd-callout__title { color: var(--green-deep); }

/* ── Pager prev/next ── */
.scd-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; }
.scd-pager__item { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; background: var(--card-bg); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.scd-pager__item:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); text-decoration: none; }
.scd-pager__item--next { text-align: right; }
.scd-pager__label { font-size: 12.5px; color: var(--text-muted); }
.scd-pager__title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.scd-pager__ghost { visibility: hidden; }

/* ── Aside phải (TOC + help) ── */
.scd-aside { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; padding: 38px 0 40px; }
.scd-toc { margin-bottom: 26px; }
.scd-toc__title { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 12px; }
.scd-toc__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.scd-toc__list li { margin: 0; }
.scd-toc__list a { display: block; font-size: 13px; line-height: 1.4; color: var(--text-secondary); padding: 5px 0 5px 14px; margin-left: -1px; border-left: 2px solid transparent; transition: color var(--transition-fast), border-color var(--transition-fast); }
.scd-toc__list a:hover { color: var(--text-primary); text-decoration: none; }
.scd-toc__list a.is-active { color: var(--primary-dark); border-left-color: var(--primary); font-weight: 600; }
.scd-toc__list .scd-toc__sub a { padding-left: 26px; font-size: 12.5px; color: var(--text-muted); }

.scd-help { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card-bg); padding: 18px; box-shadow: var(--shadow-xs); }
.scd-help h4 { font-size: 14.5px; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; }
.scd-help p { font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin: 0 0 12px; text-align: justify; }
.scd a.scd-help__btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: #fff; background: var(--primary); padding: 8px 14px; border-radius: var(--radius-md); text-decoration: none; }
.scd a.scd-help__btn:hover { background: var(--primary-hover); text-decoration: none; color: #fff; }

/* ── Mobile nav (dropdown) ── */
.scd-nav-mobile { display: none; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .scd-shell { grid-template-columns: 230px minmax(0,1fr); }
  .scd-aside { display: none; }
}
@media (max-width: 860px) {
  .scd-shell { grid-template-columns: 1fr; gap: 0; padding: 0 18px; }
  .scd-nav { display: none; }
  .scd-main { padding: 22px 0 52px; }
  .scd-nav-mobile { display: block; margin: 16px 0 4px; }
  .scd-nav-mobile > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; color: var(--text-primary); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 11px 14px; }
  .scd-nav-mobile > summary::-webkit-details-marker { display: none; }
  .scd-nav-mobile[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .scd-nav-mobile__panel { border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); padding: 14px; max-height: 60vh; overflow-y: auto; }
  .scd-pager { grid-template-columns: 1fr; }
}