/* ============================================================
   POLISH LAYER — Thuận Đức Green
   Chuyên nghiệp · gọn gàng · tinh tế · bắt trend (2025–2026)
   ============================================================ */

html { scroll-padding-top: 92px; }

::selection { background: rgba(245,166,35,.28); color: var(--dark-1); }
::-moz-selection { background: rgba(245,166,35,.28); color: var(--dark-1); }

/* ===== Thanh tiến trình cuộn (gold) ===== */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 3000;
  background: linear-gradient(90deg, var(--gold), var(--orange));
  box-shadow: 0 0 10px rgba(245,166,35,.55);
  transition: width .08s linear; pointer-events: none;
}

/* ===== Header dính + co lại khi cuộn ===== */
header { transition: padding .3s ease, box-shadow .3s ease, background .3s ease; }
header.scrolled {
  box-shadow: 0 6px 30px rgba(26,14,5,.10);
  background: rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
header.scrolled .header-inner { padding-top: 7px; padding-bottom: 7px; }

/* ===== Chuyển động nhất quán cho phần tử tương tác ===== */
.btn, .pcat-card, .uc-card, .nav-link, .mega-item, .mega-cat, .mega-brand,
.menu-item, .brand-chip, .header-phone, .floating-btn {
  transition: all .25s cubic-bezier(.4,0,.2,1);
}

/* ===== Shadow tinh tế nhiều lớp cho card ===== */
.pcat-card, .uc-card, .proj-card, .testi-card, .brand-box {
  box-shadow: 0 1px 2px rgba(26,14,5,.05), 0 10px 30px rgba(26,14,5,.06);
}
.pcat-card:hover, .uc-card:hover, .proj-card:hover {
  box-shadow: 0 6px 16px rgba(26,14,5,.09), 0 24px 50px rgba(26,14,5,.13);
}

/* ===== Tinh chỉnh nhỏ ===== */
.badge { letter-spacing: .4px; }
.section-title { letter-spacing: -.01em; }
.brand-chip:hover { border-color: rgba(232,81,32,.4); background: #fff3ee; color: var(--orange); }
.brand-chip:hover span { color: var(--orange); }
img { image-rendering: auto; }

/* Nút cuộn lên: đồng bộ tông gold/cam */
.back-to-top { transition: all .3s ease; }

/* ===== Tôn trọng prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  html { scroll-behavior: auto; }
}

/* ===== KHÓA FONT: 100% Be Vietnam Pro toàn site ===== */
:root { font-family: 'Be Vietnam Pro', -apple-system, 'Segoe UI', sans-serif; }
body, h1, h2, h3, h4, h5, h6, p, a, span, div, li, td, th, blockquote, figcaption,
button, input, select, textarea, .section-title, .hsl-h1, .pt-h3, .logo-name, .art-h1, .prose h2, .prose h3 {
  font-family: 'Be Vietnam Pro', -apple-system, 'Segoe UI', sans-serif;
}

/* ===================================================================== */
/* ===== POLISH BÀI VIẾT — đồng bộ mọi trang kiến thức & sản phẩm ====== */
/* ===================================================================== */
/* Hero bài viết */
.art-hero { background: linear-gradient(135deg, #20120a 0%, #2d1608 55%, #3a1e0a 100%); }
.breadcrumb { font-size: .82rem; letter-spacing: .2px; }
.art-badge { background: linear-gradient(100deg, var(--gold), var(--orange)); color: #2a1500; border: none; font-weight: 800; box-shadow: 0 6px 18px rgba(245,166,35,.28); }
.art-h1 { letter-spacing: -.015em; line-height: 1.22; }
.art-meta .am { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); padding: 7px 14px; border-radius: 50px; }

/* Mục lục (TOC) */
.art-toc { background: #fff; border: 1.5px solid var(--border); border-radius: 18px; box-shadow: 0 4px 18px rgba(26,14,5,.05); }
.art-toc h2 { color: var(--orange); }
.art-toc a:hover { color: var(--orange); }

/* Thân bài — đo dòng & nhịp đọc */
.art-wrap { max-width: 800px; }
.prose { font-size: 1.09rem; line-height: 1.85; color: #2c1c0e; }
.prose > p:first-of-type { font-size: 1.16rem; color: #3a2412; line-height: 1.8; }
.prose h2 { font-size: clamp(1.4rem, 2.6vw, 1.72rem); font-weight: 900; color: var(--dark-1); margin: 46px 0 16px; padding-left: 16px; border-left: 5px solid var(--orange); line-height: 1.32; }
.prose h3 { font-size: 1.22rem; font-weight: 800; color: var(--green-dark); margin: 32px 0 12px; }
.prose a { color: var(--orange-dark); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(232,81,32,.32); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--orange); }
.prose img { border-radius: 16px; box-shadow: 0 10px 30px rgba(26,14,5,.12); margin: 28px 0; }
.prose blockquote { border-left: 4px solid var(--gold); background: #fffaf0; border-radius: 0 14px 14px 0; padding: 18px 24px; margin: 26px 0; font-style: italic; color: #5a3a1c; }
/* Bullet thương hiệu */
.prose ul { list-style: none; padding-left: 2px; }
.prose ul li { position: relative; padding-left: 26px; margin-bottom: 11px; }
.prose ul li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.prose ol { list-style: none; counter-reset: li; padding-left: 2px; }
.prose ol li { position: relative; padding-left: 38px; margin-bottom: 12px; counter-increment: li; }
.prose ol li::before { content: counter(li); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; background: var(--orange); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800; }

/* Callout */
.callout { border-radius: 14px; border-left-width: 5px; }
.callout-label { color: var(--orange-dark); }
.callout.green .callout-label { color: var(--green-dark); }

/* Author + CTA box */
.author-box { border-radius: 20px; }
.author-avatar { background: linear-gradient(135deg, var(--gold), var(--orange)); color: #2a1500; }
.cta-box { border-radius: 20px; }

/* FAQ */
.faq-item { border: 1.5px solid var(--border); border-radius: 14px; padding: 16px 20px; margin-bottom: 12px; background: #fff; box-shadow: 0 2px 10px rgba(26,14,5,.04); }
.faq-q { font-weight: 800; color: var(--dark-1); }

/* ===================================================================== */
/* ===== NÂNG CẤP THẨM MỸ TỔNG THỂ (v2) ================================ */
/* ===================================================================== */

/* 1) TIÊU ĐỀ SECTION: đậm, nổi bật — bỏ gradient vàng nhạt bị "trôi" */
.section-title {
  background: none !important;
  -webkit-background-clip: border-box !important; background-clip: border-box !important;
  -webkit-text-fill-color: var(--dark-1) !important;
  color: var(--dark-1) !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  font-size: clamp(1.85rem, 3.8vw, 2.85rem) !important;
  line-height: 1.16 !important;
}

/* 2) BADGE: pill gradient có chấm dẫn */
.badge {
  display: inline-flex !important; align-items: center; gap: 9px;
  background: linear-gradient(135deg, rgba(245,166,35,.15), rgba(232,81,32,.11)) !important;
  color: var(--orange-dark) !important;
  border: 1px solid rgba(232,81,32,.24) !important;
  padding: 8px 18px !important; border-radius: 50px !important;
  font-size: .74rem !important; font-weight: 800 !important; letter-spacing: 1.6px !important;
  text-transform: uppercase;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--orange)); box-shadow: 0 0 0 3px rgba(232,81,32,.16); }

/* 3) DIVIDER: vạch gradient bo tròn */
.divider { width: 64px !important; height: 4px !important; border-radius: 50px !important; background: linear-gradient(90deg, var(--gold), var(--orange)) !important; margin-top: 18px !important; }
.divider.center { margin-left: auto !important; margin-right: auto !important; }

/* 4) SUBTITLE + nhịp giãn cách */
.section-subtitle { font-size: 1.06rem !important; line-height: 1.82 !important; color: var(--text-muted) !important; margin-top: 18px !important; }
.section { padding: 100px 0; }
.section-header { margin-bottom: 52px; }

/* 5) CARD premium đồng bộ */
.pcat-card, .proj-card, .testi-card, .uc-card, .brand-box, .prod-tower, .kb-feat { border-radius: 20px; }
.testi-card { box-shadow: 0 1px 2px rgba(26,14,5,.05), 0 12px 34px rgba(26,14,5,.07); }
.testi-card:hover, .proj-card:hover { transform: translateY(-6px); }

/* 6) NÚT premium */
.btn { border-radius: 50px !important; font-weight: 800 !important; letter-spacing: .2px; }
.btn-accent { background: linear-gradient(135deg, var(--gold), var(--orange)) !important; box-shadow: 0 10px 26px rgba(232,81,32,.3) !important; color: #fff !important; }
.btn-primary { background: linear-gradient(135deg, var(--green-light), var(--green-dark)) !important; box-shadow: 0 10px 26px rgba(61,122,37,.3) !important; }

/* 7) Quy trình: số bước nổi bật hơn */
.process .step-num { box-shadow: 0 8px 22px rgba(232,81,32,.28); }

/* Fix: tiêu đề khối thương hiệu trong trụ sản phẩm (bt-name/bt-count xuống dòng) */
.pt-bhead .bt-name { display: block; font-size: 1rem; font-weight: 900; color: var(--dark-1); }
.pt-bhead .bt-count { display: block; font-size: .76rem; font-weight: 700; color: var(--text-muted); margin-top: 2px; }