/* =====================================================================
   SERPUPDATE — Global UI Standardization Layer (light-mode)
   Enqueued AFTER style.css. Áp chuẩn design guide toàn site:
   typography, responsive safety net, accessibility.
   Tokens: assets/serpupdate-tokens.css
   ===================================================================== */

/* ───────────────────────────────────────────────
   0. NỀN TRANG — chuẩn hóa MỘT lần cho toàn site.
   Header pill nổi (trắng, bo 16px, bóng) cần nền xám đồng nhất phía sau.
   Tô canvas (html) + body + #wrapper + #main = --page-bg để:
     · xóa dải trắng canvas phía trên header (mọi trang),
     · gộp các sắc xám lệch nhau (#f6f6f6 vs #f8f9fb) về 1 token.
   Dùng background-color (KHÔNG dùng shorthand) để không xóa
   background-image gradient của landing (body:has(.lv2) ghi đè riêng).
   ─────────────────────────────────────────────── */
html { background-color: var(--page-bg) !important; }
body,
#wrapper,
#main { background-color: var(--page-bg) !important; }

/* ───────────────────────────────────────────────
   1. TYPOGRAPHY — heading lớn dùng Playfair (display),
   phần còn lại Inter (đã set ở body). Số/score → mono.
   ─────────────────────────────────────────────── */
.home-title h1,
.head-full h1.entry-title,
.single-post #content .entry-header h1.entry-title,
.single-header-blog #text-box-custom h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Số liệu / thống kê / điểm → tabular mono cho cân hàng */
.stat-number, .kpi-value, .score-number, .count-number {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ───────────────────────────────────────────────
   2. RESPONSIVE SAFETY NET — chống tràn ngang & cắt chữ
   (luật 2B mobile-first; sửa lỗi hero clip trên mobile)
   ─────────────────────────────────────────────── */
img, video, iframe, svg { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; word-break: break-word; }

/* Hero title: co giãn theo viewport, không bao giờ tràn mép */
.home-title h1 {
  font-size: clamp(28px, 5.2vw, 46px);
  line-height: 1.15;
}

/* Tiêu đề section lớn cũng co giãn nhẹ trên mobile */
.main-title, .main-title h2 {
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.15;
}

/* Khối nội dung không vượt khung trên màn nhỏ */
@media (max-width: 549px) {
  .home-title h1 { word-break: normal; }   /* giữ từ nguyên vẹn, chỉ wrap */
  .row, .col, .container { max-width: 100%; }
}

/* ───────────────────────────────────────────────
   3. ACCESSIBILITY — focus nhìn thấy được (luật SEO mục 7 a11y)
   ─────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Bỏ outline mặc định chỉ khi đã thay bằng focus-visible ở trên (giữ a11y) */
:focus:not(:focus-visible) { outline: none; }

/* Link trong nội dung: trạng thái rõ ràng, không chỉ dựa vào màu */
.entry-content a:not(.button):hover { text-decoration: underline; }

/* ───────────────────────────────────────────────
   4. PAGE: Thành viên (single-thanh-vien) — sticky cột trái
   chỉ trên desktop; mobile/tablet trả về tĩnh để không che nội dung.
   ─────────────────────────────────────────────── */
.hv-sticky-col { position: sticky; top: 100px; }
@media (max-width: 849px) {
  .hv-sticky-col { position: static; top: auto; }
}

/* ───────────────────────────────────────────────
   5. PAGE: Danh mục đối tác (taxonomy-partner_category)
   ─────────────────────────────────────────────── */
/* Nền dự phòng tối — chữ tiêu đề trắng luôn đọc được kể cả khi ảnh nền lỗi */
.head-full { background-color: var(--primary-dark); }
.head-full h1.entry-title { color: #fff; }
.head-full .breadcrumbs,
.head-full .rank-math-breadcrumb,
.head-full a { color: rgba(255,255,255,0.9); }

/* Phân trang server-render (the_posts_pagination) — style theo token */
.pagination, nav.navigation.pagination { margin-top: 28px; }
.page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px; margin: 0 3px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--card-bg); color: var(--text-secondary);
  font-weight: 600; font-size: 13px; transition: all var(--transition-fast);
}
.page-numbers:hover { border-color: var(--primary); color: var(--primary); }
.page-numbers.current {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }

/* ───────────────────────────────────────────────
   6. PAGE: Chi tiết đối tác (single-partner) — redesign
   ─────────────────────────────────────────────── */
.sp-hero {
  background: linear-gradient(135deg, #1a1f4d 0%, var(--primary-dark) 60%, var(--primary) 130%);
  color: #fff; padding: 40px 0 44px;
}
.sp-hero__inner { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.sp-hero__crumbs { font-size: 12px; margin-bottom: 18px; opacity: .85; }
.sp-hero__crumbs a, .sp-hero__crumbs .rank-math-breadcrumb a { color: rgba(255,255,255,.8); }
.sp-hero__crumbs a:hover { color: #fff; }
.sp-hero__head {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.sp-hero__logo {
  flex-shrink: 0; width: 88px; height: 88px; border-radius: var(--radius-xl);
  background: #fff; display: flex; align-items: center; justify-content: center;
  padding: 12px; box-shadow: var(--shadow-md);
}
.sp-hero__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sp-hero__meta { flex: 1; min-width: 240px; }
.sp-hero__cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sp-badge {
  display: inline-block; padding: 3px 10px; border-radius: 9999px;
  background: rgba(255,255,255,.15); color: #fff; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; transition: background var(--transition-fast);
}
.sp-badge:hover { background: rgba(255,255,255,.28); color: #fff; }
.sp-hero__title { font-family: var(--font-sans); font-size: clamp(28px, 4vw, 40px); font-weight: 800; color: #fff; margin: 0 0 6px; line-height: 1.12; }
.sp-hero__tagline { font-size: 15px; color: rgba(255,255,255,.82); max-width: 640px; margin: 0; line-height: 1.5; }
.sp-hero__cta { flex-shrink: 0; }
.sp-btn-bonus {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--primary-dark); font-weight: 700; font-size: 14px;
  padding: 12px 22px; border-radius: 9999px; box-shadow: var(--shadow-md);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.sp-btn-bonus:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); color: var(--primary-dark); }

.sp-body { padding-top: 36px; padding-bottom: 56px; }
.sp-content { font-size: 15px; line-height: 1.7; color: var(--text-secondary); max-width: 760px; }
.sp-content h2 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; color: var(--text-primary); margin: 32px 0 12px; line-height: 1.25; }
.sp-content h2:first-child { margin-top: 0; }
.sp-content p { margin: 0 0 16px; }
.sp-content ul, .sp-content ol { margin: 0 0 16px 1.2em; }
.sp-content li { margin-bottom: 6px; }
.sp-content__cta { margin-top: 28px; }
.sp-content__cta .sp-btn-bonus { background: var(--primary); color: #fff; }
.sp-content__cta .sp-btn-bonus:hover { background: var(--primary-hover); color: #fff; }

/* Đối tác cùng nhóm */
.sp-related { margin-top: 22px; padding: 16px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); }
.sp-related__title { font-size: 13px !important; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 0 0 10px; }
.sp-related__list { list-style: none; margin: 0; padding: 0; }
.sp-related__list li { margin: 0; border-bottom: 1px solid var(--border-light); }
.sp-related__list li:last-child { border-bottom: 0; }
.sp-related__list a { display: flex; align-items: center; gap: 10px; padding: 9px 4px; color: var(--text-secondary); font-weight: 600; font-size: 13px; transition: color var(--transition-fast); }
.sp-related__list a:hover { color: var(--primary); }
.sp-related__list img { width: 32px; height: 32px; border-radius: var(--radius-sm); object-fit: contain; background: #fff; border: 1px solid var(--border-light); padding: 3px; }

@media (max-width: 549px) {
  .sp-hero__head { gap: 14px; flex-direction: column; align-items: flex-start; }
  .sp-hero__meta { min-width: 0; width: 100%; }
  .sp-hero__tagline { max-width: 100%; }
  .sp-hero__cta { width: 100%; }
  .sp-btn-bonus { width: 100%; justify-content: center; }
}

/* ───────────────────────────────────────────────
   7. PAGE: Bài viết blog (single post) — reading typography
   ─────────────────────────────────────────────── */
.post-content-box .entry-content {
  font-size: 16px; line-height: 1.75; color: var(--text-secondary);
  max-width: 760px;
}
.post-content-box .entry-content > h2 {
  font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; color: var(--text-primary);
  margin: 36px 0 14px; line-height: 1.25; letter-spacing: -0.01em;
}
.post-content-box .entry-content > h3 {
  font-size: clamp(18px, 2vw, 21px); font-weight: 700; color: var(--text-primary);
  margin: 28px 0 10px;
}
.post-content-box .entry-content p { margin: 0 0 18px; }
.post-content-box .entry-content ul,
.post-content-box .entry-content ol { margin: 0 0 18px 1.3em; }
.post-content-box .entry-content li { margin-bottom: 8px; }
.post-content-box .entry-content img { border-radius: var(--radius-lg); }
.post-content-box .entry-content blockquote {
  border-left: 3px solid var(--primary); background: var(--surface-2);
  margin: 22px 0; padding: 14px 18px; border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--text-primary);
}
.post-content-box .entry-content a:not(.button) { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

/* Khung tác giả */
.author-box-container {
  display: flex; gap: 16px; align-items: flex-start;
  margin: 36px 0 8px; padding: 20px;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xs);
}
.author-box-container .author-avatar img { border-radius: 50%; width: 64px; height: 64px; object-fit: cover; }
.author-box-container .author-name { font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 0; }
.author-box-container .author-role { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.author-box-container .author-description { font-size: 14px; color: var(--text-secondary); margin: 8px 0; line-height: 1.6; }
.author-box-container .author-socials { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.author-box-container .author-socials a { color: var(--primary); font-weight: 600; }

/* ───────────────────────────────────────────────
   8. PAGE: Trang text thuần (chính sách, điều khoản…) — page-template-default
   Giới hạn bề rộng đọc + typography sạch. KHÔNG áp cho trang builder (page-blank).
   ─────────────────────────────────────────────── */
.page-template-default .page-wrapper .row-main .col-inner {
  max-width: 900px; margin-left: auto; margin-right: auto;
}
.page-template-default .page-wrapper .row-main {
  font-size: 16px; line-height: 1.75; color: var(--text-secondary);
}
.page-template-default .page-wrapper .row-main h1,
.page-template-default .page-wrapper .row-main h2,
.page-template-default .page-wrapper .row-main h3 {
  color: var(--text-primary); font-weight: 700; line-height: 1.3;
}
.page-template-default .page-wrapper .row-main h2 { font-size: clamp(20px, 2.4vw, 26px); margin: 34px 0 12px; }
.page-template-default .page-wrapper .row-main h3 { font-size: 18px; margin: 24px 0 10px; }
.page-template-default .page-wrapper .row-main p  { margin: 0 0 16px; }
.page-template-default .page-wrapper .row-main ul,
.page-template-default .page-wrapper .row-main ol { margin: 0 0 16px 1.3em; }
.page-template-default .page-wrapper .row-main li { margin-bottom: 8px; }
.page-template-default .page-wrapper .row-main a  { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.page-template-default .page-wrapper .row-main strong { color: var(--text-primary); }

/* ───────────────────────────────────────────────
   9. RESPONSIVE — chống tràn ngang trên mobile/tablet (luật 2B)
   Dùng overflow-x:clip (không phá position:sticky như hidden) + chỉ ở ≤849px.
   ─────────────────────────────────────────────── */
@media (max-width: 849px) {
  html, body { overflow-x: clip; max-width: 100%; }
  img, table, pre, iframe, video, .row { max-width: 100%; }
  .sp-hero__inner, .container { overflow-wrap: break-word; }
}

/* ───────────────────────────────────────────────
   10. Trung tâm trợ giúp (support-center plugin, .sc-*) — polish token
   ─────────────────────────────────────────────── */
.sc-content { font-size: 16px; line-height: 1.75; color: var(--text-secondary); max-width: 780px; }
.sc-content h2 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; color: var(--text-primary); margin: 32px 0 12px; line-height: 1.3; }
.sc-content h3 { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 24px 0 10px; }
.sc-content p { margin: 0 0 16px; }
.sc-content ul, .sc-content ol { margin: 0 0 16px 1.3em; }
.sc-content li { margin-bottom: 8px; }
.sc-content a:not(.button) { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.sc-content img { border-radius: var(--radius-lg); }
.sc-content code { background: var(--surface-3); padding: 2px 6px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: .9em; color: var(--text-primary); }
.sc-content pre { background: #1a1a2e; color: #e5e7eb; padding: 16px 18px; border-radius: var(--radius-lg); overflow: auto; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; }
.sc-content pre code { background: transparent; color: inherit; padding: 0; }
.sc-content blockquote { border-left: 3px solid var(--primary); background: var(--surface-2); margin: 20px 0; padding: 12px 16px; border-radius: 0 var(--radius-md) var(--radius-md) 0; }

/* Sidebar nav */
.nav-sidebar .sc-nav-group-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.nav-sidebar a { color: var(--text-secondary); }
.nav-sidebar a:hover { color: var(--primary); }
.nav-sidebar .sc-active > a, .nav-sidebar li.active > a { color: var(--primary); font-weight: 700; }

/* Prev / next */
.sc-post-nav { display: flex; gap: 12px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); }
.sc-post-nav-item { flex: 1; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 16px; box-shadow: var(--shadow-xs); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.sc-post-nav-item:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.sc-nav-next { text-align: right; }

/* Empty-state cho doc chưa có nội dung */
.sc-content:empty::before,
.sc-content p:only-child:empty::before { content: "Nội dung đang được biên soạn, sẽ sớm cập nhật."; color: var(--text-muted); font-style: italic; }

/* ───────────────────────────────────────────────
   11. HEADER — thanh nav nổi bo tròn (kiểu scrape.do)
   Bỏ nền full-width; .header-inner thành thanh trắng mờ + bo góc + bóng + cách mép.
   ─────────────────────────────────────────────── */
@media (min-width: 850px) {
  #header.header { background: transparent; }
  /* Mọi lớp nền header trong suốt ở CẢ trạng thái thường lẫn stuck (cuộn) */
  #header .header-wrapper,
  #header .header-wrapper.stuck,
  #header .header-main,
  #header.stuck .header-main,
  #header .header-bg-container,
  #header .header-bg-color { background-color: transparent !important; box-shadow: none !important; }
  #header .header-bg-image { display: none !important; }
  #header .header-main .header-inner.container {
    background: rgba(255,255,255,0.9);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
            backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(226,232,240,0.9);
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(15,23,42,0.08);
    margin-top: 16px;
    padding-left: 22px; padding-right: 12px;
    transition: margin-top .2s ease, border-radius .2s ease;
  }
  #header.stuck .header-main .header-inner.container { margin-top: 8px; border-radius: 14px; }
  /* nút CTA cuối menu (Sign Up) → pill primary rõ */
  #header .header-nav-main > li:last-child > a.button,
  #header .header-nav-main > li.button > a { border-radius: 9999px; }
}