/*
Theme Name: VHSysco
Theme URI: https://vhsysco.com
Author: VHSysco Studio
Author URI: https://vhsysco.com
Description: Giao diện WordPress chuẩn thiết kế nhận diện thương hiệu VHSysco. Zero-Bloat, tốc độ cao, hiển thị hoàn hảo trên mọi thiết bị.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: vhsysco
*/

/* ==========================================================================
   1. DESIGN TOKENS & SYSTEM VARIABLES (Matching index.dc.html)
   ========================================================================== */

:root {
  /* Colors */
  --accent: light-dark(#7b0408, #b82e34);
  --accent-ink: light-dark(#7b0408, #e4787d);
  --accent-hover: light-dark(#4d0205, #f4b3b6);
  --gold: #d1ad55;
  --gold-ink: light-dark(#7a5c26, #d1ad55);
  --bg: light-dark(#f6f4ef, #0a0a0c);
  --surface: light-dark(#fffefb, rgba(255, 255, 255, .03));
  --surface-warm: light-dark(#efe9dc, #17120f);
  --ink: light-dark(#14110e, #f4f1ea);
  --ink-soft: light-dark(#4a4438, #b8b2a8);
  --muted: light-dark(#5b554c, #a5a09a);
  --line: light-dark(#e2ddd2, rgba(255, 255, 255, .1));
  --line-soft: light-dark(#ddd7cb, rgba(255, 255, 255, .1));

  /* Proof Section Tokens */
  --proof-bg: light-dark(#efe9dc, #120f0d);
  --proof-ink: light-dark(#14110e, #f4f1ea);
  --proof-dim: light-dark(#5b554c, rgba(253, 250, 245, .78));
  --proof-line: light-dark(#d3cbb9, rgba(209, 173, 85, .28));
  --proof-gold: light-dark(#7a5c26, #d1ad55);

  /* Typography */
  --font-display: 'Archivo', 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --font-body: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --font-mono: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif; /* đổi 2026-08-17: bỏ IBM Plex Mono, không dùng phông mono nữa */

  /* Layout */
  --maxw: 1280px;
  --max-w: 1280px;
  --pad-gutter: clamp(20px, 4vw, 48px);

  /* Radii */
  --r-card: 18px;
  --r-block: 26px;
  --r-phone: 22px;
  --r-pill: 999px;

  /* Animation Timings */
  --dur: 780ms;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);

  /* Shadows */
  --shadow-cta: 0 20px 44px -24px rgba(123, 4, 8, .6);
  --shadow-card: 0 40px 70px -40px rgba(0, 0, 0, .5);
  --shadow-phone: 0 34px 60px -30px rgba(0, 0, 0, .6);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  color-scheme: light dark;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: hidden;
}

a {
  color: var(--accent-ink);
  text-decoration: none;
  transition: color 200ms var(--ease);
}

a:hover {
  color: var(--accent-hover);
}

img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

summary::-webkit-details-marker {
  display: none;
}
summary::marker {
  content: "";
}

/* ==========================================================================
   3. ANIMATIONS KEYFRAMES (0 KB JS Pure CSS)
   ========================================================================== */

@keyframes vao-trang { from { opacity: 0; transform: translateY(44px); } }
@keyframes lo-dien { from { opacity: 0; transform: translateY(64px); } }
@keyframes vao-ngang { from { opacity: 0; transform: translateX(-56px); } }
@keyframes vao-nho { from { opacity: 0; transform: scale(.96) translateY(30px); } }
@keyframes tien-do { from { transform: scaleX(0); } }
@keyframes tho { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .5; } 50% { transform: translate3d(3%, -4%, 0) scale(1.18); opacity: 1; } }
@keyframes quet { 0% { transform: translate3d(-70%, 0, 0) rotate(-16deg); opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { transform: translate3d(170%, 0, 0) rotate(-16deg); opacity: 0; } }
@keyframes noi-len { from { opacity: 0; transform: translateY(92px) scale(.95); } }
@keyframes nghieng { from { opacity: 0; transform: translateY(92px); } }
@keyframes xoay { to { transform: rotate(360deg); } }
@keyframes nhip-o { 0%, 100% { opacity: .2; } 45% { opacity: 1; } }
@keyframes nhip-tam { 0%, 100% { opacity: .3; } 45% { opacity: .95; } }
@keyframes troi-len { from { transform: translateY(90px); } to { transform: translateY(-90px); } }
@keyframes troi-xuong { from { transform: translateY(-80px); } to { transform: translateY(80px); } }
@keyframes hien-lon { from { opacity: 0; transform: translateX(-68px) scale(.93); } }
@keyframes day-len { from { opacity: 0; transform: translateY(96px); } }
@keyframes tu-tap { from { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(.5); } }
@keyframes nay-tam { from { opacity: 0; transform: scale(.25); } }
@keyframes xoay-cuon { from { transform: rotate(-26deg); } to { transform: rotate(26deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   4. LAYOUT & CORE CLASSES
   ========================================================================== */

.vh-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
}

.vh-section {
  padding: clamp(60px, 8vw, 128px) 0;
}

.vh-section--top-line {
  border-top: 1px solid var(--line);
}

.vh-hero-sub--flush {
  margin-left: 0;
}

.vh-text-accent {
  font-weight: 700;
  color: var(--accent-ink);
}

.vh-empty-state {
  padding: 60px 0;
}

/* Section Headings */
.vh-section-title {
  margin: 0 0 clamp(32px, 4.4vw, 64px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4.6vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-stretch: 88%;
}

.vh-section-title-sticky {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4.6vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-stretch: 88%;
  position: sticky;
  top: 122px;
}

/* Scroll Progress Bar at very top */
.vh-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 2.5px;
  background: linear-gradient(90deg, #d1ad55, light-dark(#7b0408, #b82e34));
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 9999;
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  .vh-scroll-progress {
    animation: tien-do linear both;
    animation-timeline: scroll();
  }
}

/* Buttons */
.vh-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 17px 38px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  box-shadow: var(--shadow-cta);
  border: none;
  cursor: pointer;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.vh-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 56px -24px rgba(123, 4, 8, .65);
}
.vh-btn-primary:active {
  transform: scale(.985) translateY(1px);
}

.vh-btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: #2b1d06;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15.5px;
  border: none;
  cursor: pointer;
  transition: transform 200ms var(--ease);
}
.vh-btn-gold:hover {
  transform: translateY(-2px);
}
.vh-btn-gold:active {
  transform: scale(.985);
}

.vh-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--accent-ink);
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15.5px;
  background: transparent;
  cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.vh-btn-outline:hover {
  background-color: var(--accent);
  color: #ffffff;
}

/* ==========================================================================
   5. HEADER & NAVIGATION
   ========================================================================== */

.vh-header {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: light-dark(rgba(246, 244, 239, .84), rgba(10, 10, 12, .8));
  border-bottom: 1px solid light-dark(#e2ddd2, rgba(255, 255, 255, .1));
}

.vh-header .vh-header-inner {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.vh-header .vh-brand-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: inherit;
  border: none;
  outline: none;
  background: transparent;
}

.vh-brand-logo svg {
  flex-shrink: 0;
}

.vh-header .vh-brand-logo-text {
  font-family: 'Archivo', 'Be Vietnam Pro', system-ui, sans-serif;
  font-weight: 800;
  font-size: 25px;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.vh-header .vh-brand-logo-text span {
  color: light-dark(#7b0408, #e4787d);
}

.vh-header .vh-nav,
.vh-header .vh-nav ul,
.vh-header .vh-nav .menu {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.vh-header .vh-nav li {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
}

.vh-header .vh-nav a,
.vh-header .vh-nav li a {
  color: inherit;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  padding: 7px 0;
  border: none;
  border-bottom: 1.5px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}

.vh-header .vh-nav a:hover,
.vh-header .vh-nav li a:hover,
.vh-header .vh-nav a[aria-current="page"],
.vh-header .vh-nav .current-menu-item a,
.vh-header .vh-nav .current_page_item a {
  border: none;
  border-bottom: 1.5px solid light-dark(#7b0408, #e4787d);
  color: inherit;
  background: transparent;
}

/* Hamburger & Mobile Menu */
.vh-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  z-index: 70;
}

.vh-menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}

.vh-mobile-drawer {
  display: none;
}

/* ==========================================================================
   6. HERO SECTION
   ========================================================================== */

.vh-hero-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(44px, 7vw, 104px) clamp(20px, 4vw, 48px) clamp(64px, 9vw, 132px);
  position: relative;
  isolation: isolate;
}

.vh-hero-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  mask-image: radial-gradient(88% 125% at 90% 46%, #000 0%, rgba(0, 0, 0, .35) 46%, transparent 74%);
  -webkit-mask-image: radial-gradient(88% 125% at 90% 46%, #000 0%, rgba(0, 0, 0, .35) 46%, transparent 74%);
}

.vh-hero-hex-1 {
  position: absolute;
  top: 6%;
  left: 58%;
  width: clamp(150px, 21vw, 300px);
  aspect-ratio: 182 / 164;
  opacity: light-dark(.5, .42);
}

.vh-hero-hex-2 {
  position: absolute;
  top: 58%;
  left: 74%;
  width: clamp(96px, 13vw, 186px);
  aspect-ratio: 182 / 164;
  opacity: light-dark(.42, .38);
}

.vh-hero-hex-3 {
  position: absolute;
  top: 78%;
  left: 52%;
  width: clamp(64px, 8vw, 116px);
  aspect-ratio: 182 / 164;
  opacity: light-dark(.4, .34);
}

.vh-hero-watermark {
  position: absolute;
  top: 4%;
  right: -11%;
  width: clamp(230px, 30vw, 430px);
  aspect-ratio: 1;
  opacity: light-dark(.24, .2);
}

.vh-hero-glow {
  position: absolute;
  top: -20%;
  left: 44%;
  width: clamp(320px, 54vw, 780px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, light-dark(rgba(123, 4, 8, .14), rgba(184, 46, 52, .22)), transparent 68%);
  animation: tho 16s ease-in-out infinite;
}

.vh-hero-sweep {
  position: absolute;
  top: -30%;
  left: 0;
  width: 40%;
  height: 160%;
  background: linear-gradient(90deg, transparent, light-dark(rgba(209, 173, 85, .17), rgba(209, 173, 85, .11)), transparent);
  animation: quet 19s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.vh-hero-gold-line {
  position: absolute;
  top: clamp(30px, 5vw, 70px);
  right: clamp(-40px, -2vw, 0px);
  width: clamp(120px, 22vw, 300px);
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #d1ad55);
}

/* Nhịp mờ-tỏ của các ô lục giác trang trí — lệch pha để không đồng bộ khô cứng */
.vh-pulse {
  animation: nhip-o 9s ease-in-out infinite;
}
.vh-pulse--a { animation-delay: 900ms; }
.vh-pulse--b { animation-delay: 2100ms; }
.vh-pulse--c { animation-delay: 3300ms; }
.vh-pulse--center {
  animation-name: nhip-tam;
  animation-duration: 7s;
  animation-delay: 3480ms;
}

/* Xoay chậm cho watermark lớn — dùng lại ở proof-showcase (biến thể --fast) */
.vh-spin-slow {
  animation: xoay 190s linear infinite;
}
.vh-spin-slow--fast {
  animation-duration: 120s;
}

.vh-hero-kicker {
  margin: 0 0 clamp(18px, 2.4vw, 34px);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: light-dark(#7a5c26, #d1ad55);
}

.vh-hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(42px, 9vw, 124px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 800;
  max-width: 17ch;
}

.vh-hero-title .line-1 {
  display: block;
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: -0.03em;
  color: light-dark(#4a4438, #b8b2a8);
}

.vh-hero-title .line-2 {
  display: block;
  font-stretch: 82%;
  margin-left: clamp(0px, 1.2vw, 22px);
}

.vh-hero-title .line-3 {
  display: inline-block;
  margin-top: clamp(6px, 1.1vw, 16px);
  padding: 0.04em 0.2em 0.13em;
  background: light-dark(#7b0408, #b82e34);
  color: #fdfaf5;
  font-stretch: 88%;
}

.vh-hero-sub {
  margin: clamp(30px, 4vw, 52px) 0 0;
  margin-left: clamp(0px, 26vw, 340px);
  max-width: 30ch;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.5;
  color: light-dark(#4a4438, #b8b2a8);
}

.vh-stats-grid {
  margin-top: clamp(40px, 5.5vw, 84px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(2px, 0.4vw, 6px);
  border-top: 1.5px solid light-dark(#14110e, #f4f1ea);
}

.vh-stat-item {
  padding: clamp(20px, 2.4vw, 30px) 0 clamp(14px, 1.6vw, 20px);
  padding-right: 20px;
}

.vh-stat-item + .vh-stat-item {
  border-left: 1px solid light-dark(#e2ddd2, rgba(255, 255, 255, .12));
  padding-left: clamp(16px, 2vw, 28px);
}

.vh-stat-num {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.vh-stat-name {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.1vw, 27px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: light-dark(#7b0408, #e4787d);
}

.vh-stat-label {
  margin-top: 6px;
  font-size: 15px;
  color: light-dark(#5b554c, #a5a09a);
}

.vh-hero-cta-wrap {
  margin-top: clamp(34px, 4.5vw, 60px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.vh-hero-cta-note {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: light-dark(#5b554c, #a5a09a);
}

/* ==========================================================================
   7. AUDIENCE SECTION (Staggered items 01..04)
   ========================================================================== */

.vh-audience-section {
  border-top: 1px solid light-dark(#e2ddd2, rgba(255, 255, 255, .1));
  padding: clamp(60px, 8vw, 128px) 0;
}

.vh-audience-item {
  border-top: 1px solid light-dark(#ddd7cb, rgba(255, 255, 255, .1));
  padding: clamp(20px, 2.6vw, 34px) 0;
  display: flex;
  gap: clamp(16px, 2.4vw, 34px);
}

.vh-audience-item:nth-child(2) {
  padding-left: clamp(0px, 8vw, 150px);
}

.vh-audience-item:nth-child(3) {
  padding-left: clamp(0px, 4vw, 74px);
}

.vh-audience-item:nth-child(4) {
  border-bottom: 1px solid light-dark(#ddd7cb, rgba(255, 255, 255, .1));
  padding-left: clamp(0px, 12vw, 224px);
}

.vh-audience-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: light-dark(#7a5c26, #d1ad55);
  padding-top: 0.55em;
  flex-shrink: 0;
}

.vh-audience-text {
  font-size: clamp(18px, 2.1vw, 25px);
  line-height: 1.45;
  max-width: 54ch;
}

/* ==========================================================================
   8. BENEFITS SECTION
   ========================================================================== */

.vh-benefits-section {
  padding: clamp(60px, 8vw, 128px) 0;
}

.vh-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(30px, 4vw, 72px);
  align-items: start;
}

.vh-benefits-list {
  display: grid;
  gap: clamp(20px, 2.4vw, 30px);
}

.vh-benefit-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.vh-benefit-bullet {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: #d1ad55;
  margin-top: 0.6em;
  flex-shrink: 0;
}

.vh-benefit-text {
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.55;
}

/* ==========================================================================
   9. PROOF SHOWCASE (3 Phones Mockups with exact offsets)
   ========================================================================== */

.vh-proof-section {
  background: light-dark(#efe9dc, #120f0d);
  color: light-dark(#14110e, #f4f1ea);
  padding: clamp(64px, 9vw, 140px) 0;
  position: relative;
  overflow: hidden;
}

.vh-proof-inner {
  position: relative;
}

.vh-proof-watermark {
  position: absolute;
  top: -14%;
  right: -7%;
  width: clamp(210px, 36vw, 540px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: .17;
}

/* Nen dong sau carousel — hai khoi mau mem, tho cham (keyframe "tho" da co
   san cho hieu ung breathe). Chi trang tri, khong anh huong bo cuc. */
.vh-proof-bg-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(6px);
  animation: tho 16s ease-in-out infinite;
}

.vh-proof-bg-blob--gold {
  top: 4%;
  left: -8%;
  width: clamp(260px, 34vw, 460px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 35% 35%, light-dark(rgba(209, 173, 85, .32), rgba(209, 173, 85, .16)), transparent 72%);
}

.vh-proof-bg-blob--accent {
  bottom: -6%;
  right: 6%;
  width: clamp(220px, 28vw, 400px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 60% 40%, light-dark(rgba(123, 4, 8, .16), rgba(184, 46, 52, .18)), transparent 72%);
  animation-delay: -8s;
}

.vh-proof-kicker {
  margin: 0 0 clamp(16px, 2vw, 26px);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: light-dark(#7a5c26, #d1ad55);
}

.vh-proof-title {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 6vw, 82px);
  line-height: 1.07;
  letter-spacing: -0.04em;
  font-stretch: 86%;
}

.vh-proof-sub {
  margin: clamp(26px, 3.4vw, 46px) 0 0;
  margin-left: clamp(0px, 24vw, 330px);
  max-width: 40ch;
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.55;
  color: light-dark(#5b554c, rgba(253, 250, 245, .78));
}

/* --- Dải điều khiển: pill lọc ngành (trái) + nút mũi tên carousel (phải) --- */
.vh-proof-controls {
  margin-top: clamp(32px, 4.4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.vh-proof-filters {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.vh-proof-filters::-webkit-scrollbar {
  display: none;
}

.vh-filter-pill {
  flex: 0 0 auto;
  border: 1px solid light-dark(#d3cbb9, rgba(209, 173, 85, .28));
  border-radius: var(--r-pill);
  background: transparent;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: light-dark(#5b554c, #a5a09a);
  cursor: pointer;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}

.vh-filter-pill:hover {
  border-color: light-dark(#7a5c26, #d1ad55);
  color: light-dark(#14110e, #f4f1ea);
}

.vh-filter-pill:focus-visible {
  outline: 2px solid light-dark(#7a5c26, #d1ad55);
  outline-offset: 2px;
}

.vh-filter-pill.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #f8f1e8;
}

.vh-carousel-nav {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.vh-carousel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-pill);
  border: 1px solid light-dark(#d3cbb9, rgba(209, 173, 85, .28));
  background: transparent;
  color: light-dark(#14110e, #f4f1ea);
  cursor: pointer;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}

.vh-carousel-arrow:hover:not(:disabled) {
  border-color: light-dark(#7a5c26, #d1ad55);
  transform: translateY(-2px);
}

.vh-carousel-arrow:focus-visible {
  outline: 2px solid light-dark(#7a5c26, #d1ad55);
  outline-offset: 2px;
}

.vh-carousel-arrow:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* --- Carousel kéo-cuộn: tràn lề phải màn hình, canh lề trái theo container --- */
.vh-proof-carousel {
  margin-top: clamp(28px, 4vw, 48px);
  position: relative;
}

.vh-proof-track {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  overflow-x: auto;
  /* KHONG dung scroll-snap-type: mot so ban Chrome tu dong "settle" ve cuoi
     track ngay lan layout dau tien khi bat scroll-snap tren truc x, khien
     carousel mo len da bi cuon lech. Da do dac bang scrollLeft — bo han
     scroll-snap la cach duy nhat loai tru goc, keo tay/nut van muot binh
     thuong voi overflow-x: auto don thuan. */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Tren/duoi rong hon binh thuong: du cho hieu ung vong cung (thẻ xa tâm
     nghieng + ha xuong bang JS) khong bi cat, vi overflow-x:auto keo theo
     overflow-y tu dong thanh auto (khong con "visible"). */
  padding: 30px clamp(20px, 4vw, 48px) 46px;
}

.vh-proof-track::-webkit-scrollbar {
  display: none;
}

.vh-proof-track.is-dragging {
  cursor: grabbing;
  user-select: none;
}

/* Doan lap (dem truoc/GOC/dem sau) de dung vong lap vo han — xem
   vh-proof-carousel.js. Gap lap lai gia tri cua track de noi giua cac
   doan lien mach nhu giua cac the trong cung mot doan. */
.vh-proof-segment {
  display: flex;
  gap: inherit;
  flex: 0 0 auto;
}

.vh-phone-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 0 0 clamp(230px, 27vw, 300px);
  transform-origin: 50% 100%;
  will-change: transform;
}

.vh-phone-card--clone {
  pointer-events: auto;
}

.vh-phone-frame {
  border-radius: 22px;
  border: 7px solid #16110f;
  background: #16110f;
  box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .6);
  overflow: hidden;
  aspect-ratio: 9 / 13.4;
  transition: transform 300ms var(--ease);
}

.vh-phone-frame:hover {
  transform: translateY(-8px);
}

.vh-phone-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 15px;
  -webkit-user-drag: none;
  user-select: none;
}

.vh-phone-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid light-dark(#d3cbb9, rgba(209, 173, 85, .28));
  padding-top: 14px;
}

.vh-phone-caption strong {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.vh-phone-caption a {
  font-size: 14px;
  font-weight: 500;
  color: light-dark(#7a5c26, #d1ad55);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  opacity: .75;
  transition: opacity 200ms var(--ease);
}

.vh-phone-caption a:hover {
  opacity: 1;
}

.vh-phone-soon {
  font-size: 14px;
  font-weight: 500;
  color: light-dark(#8a8478, #6f6a60);
  font-style: italic;
}

/* ==========================================================================
   10. PRICING TABLE (3 Cards)
   ========================================================================== */

.vh-pricing-section {
  padding: clamp(60px, 8vw, 132px) 0;
}

.vh-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: clamp(14px, 1.8vw, 26px);
  align-items: stretch;
}

.vh-price-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid light-dark(#ddd7cb, rgba(255, 255, 255, .12));
  border-radius: 18px;
  background: light-dark(#fffefb, rgba(255, 255, 255, .03));
}

.vh-price-card.featured {
  padding: clamp(30px, 3.4vw, 44px);
  background: light-dark(#7b0408, #8f1418);
  color: #fdfaf5;
  border: none;
  position: relative;
  transform: translateY(clamp(-24px, -1.6vw, 0px));
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .5);
}

.vh-badge-popular {
  position: absolute;
  top: 0;
  left: clamp(30px, 3.4vw, 44px);
  transform: translateY(-50%);
  background: #fdfaf5;
  color: #7b0408;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
}

.vh-price-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.vh-price-amount {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: light-dark(#7b0408, #e4787d);
}

.vh-price-card.featured .vh-price-amount {
  color: #d1ad55;
}

.vh-price-time {
  margin-top: 6px;
  padding-bottom: 20px;
  border-bottom: 1px solid light-dark(#e8e3d8, rgba(255, 255, 255, .1));
  font-family: var(--font-mono);
  font-size: 13px;
  color: light-dark(#5b554c, #a5a09a);
}

.vh-price-card.featured .vh-price-time {
  border-bottom-color: rgba(255, 255, 255, .14);
  color: rgba(253, 250, 245, .7);
}

.vh-price-features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 13px;
  font-size: 15.5px;
  line-height: 1.5;
  flex: 1;
}

.vh-pricing-notes {
  margin-top: clamp(28px, 3.4vw, 44px);
  margin-left: auto;
  max-width: 62ch;
  display: grid;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: light-dark(#5b554c, #a5a09a);
}

/* ==========================================================================
   11. PROCESS SECTION (4 Steps)
   ========================================================================== */

.vh-process-section {
  border-top: 1px solid light-dark(#e2ddd2, rgba(255, 255, 255, .1));
  padding: clamp(60px, 8vw, 128px) 0;
}

.vh-process-list {
  display: grid;
  gap: 0;
}

.vh-process-step {
  border-top: 1px solid light-dark(#ddd7cb, rgba(255, 255, 255, .1));
  padding: clamp(20px, 2.6vw, 32px) 0;
  display: grid;
  grid-template-columns: clamp(48px, 8vw, 96px) 1fr;
  gap: clamp(16px, 2.4vw, 34px);
  align-items: baseline;
}

.vh-process-step:nth-child(2) {
  padding-left: clamp(0px, 5vw, 90px);
}

.vh-process-step:nth-child(3) {
  padding-left: clamp(0px, 10vw, 180px);
}

.vh-process-step:nth-child(4) {
  border-bottom: 1px solid light-dark(#ddd7cb, rgba(255, 255, 255, .1));
  padding-left: clamp(0px, 15vw, 270px);
}

.vh-process-num {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 500;
  color: light-dark(#c9c2b4, rgba(255, 255, 255, .24));
  letter-spacing: -0.02em;
}

.vh-process-step:nth-child(4) .vh-process-num {
  color: light-dark(#7a5c26, #d1ad55);
}

.vh-process-desc {
  margin: 0;
  font-size: clamp(17px, 1.9vw, 22px);
  line-height: 1.5;
  max-width: 56ch;
}

/* ==========================================================================
   12. FAQ ACCORDION
   ========================================================================== */

.vh-faq-section {
  padding: clamp(60px, 8vw, 128px) 0;
}

.vh-faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(30px, 4vw, 72px);
  align-items: start;
}

.vh-faq-list {
  display: grid;
  gap: 0;
}

.vh-faq-details {
  border-top: 1px solid light-dark(#ddd7cb, rgba(255, 255, 255, .1));
  padding: clamp(18px, 2.2vw, 26px) 0;
}

.vh-faq-details:last-child {
  border-bottom: 1px solid light-dark(#ddd7cb, rgba(255, 255, 255, .1));
}

.vh-faq-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  list-style: none;
}

.vh-faq-icon {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 400;
  color: light-dark(#7b0408, #e4787d);
  flex-shrink: 0;
}

.vh-faq-answer {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: light-dark(#5b554c, #a5a09a);
}

/* ==========================================================================
   13. CLOSING CTA (Card with 7-Hexagon Assembly DNA)
   ========================================================================== */

.vh-cta-section {
  padding: 0 clamp(20px, 4vw, 48px) clamp(60px, 8vw, 120px);
}

.vh-cta-card {
  max-width: 1280px;
  margin: 0 auto;
  border-radius: 26px;
  background: light-dark(#efe9dc, #17120f);
  color: light-dark(#14110e, #f4f1ea);
  border: 1px solid light-dark(#ddd3bf, rgba(255, 255, 255, .08));
  padding: clamp(34px, 5vw, 80px) clamp(24px, 4.5vw, 76px);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(30px, 4.5vw, 68px);
  align-items: center;
}

.vh-cta-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.038em;
  font-stretch: 86%;
  text-wrap: balance;
}

.vh-cta-sub {
  margin: clamp(20px, 2.6vw, 30px) 0 clamp(28px, 3.6vw, 40px);
  max-width: 44ch;
  font-size: clamp(16.5px, 1.8vw, 19px);
  line-height: 1.6;
  color: light-dark(#5b554c, rgba(253, 250, 245, .76));
}

.vh-cta-dna-wrap {
  justify-self: center;
  width: min(100%, 360px);
  aspect-ratio: 1;
  pointer-events: none;
}

.vh-cta-dna-svg {
  overflow: visible;
}

/* Dấu hiệu VHSysco — luật bất biến (GHI-CHU.md §11): ô GIỮA luôn là con người,
   đỏ bordeaux đổ đặc, không bao giờ đảo sang viền rỗng hay màu vàng đồng. */
.vh-dna-center {
  fill: light-dark(#7b0408, #b82e34);
}

/* Trạng thái không-JS / trước khi GSAP chạy: hiện đủ, không kẹt ẩn.
   GSAP (vh-motion.js) tự đặt trạng thái ban đầu qua gsap.set() khi đã tải xong. */
.vh-dna-petal,
.vh-dna-center {
  opacity: 1;
}

/* ==========================================================================
   14. FOOTER (Deep Obsidian Ink DNA)
   ========================================================================== */

.vh-footer {
  background: #14110e;
  color: #ece7de;
  border-top: 1px solid rgba(209, 173, 85, 0.32);
  padding: clamp(52px, 7vw, 84px) 0 clamp(36px, 4vw, 52px);
  position: relative;
}

.vh-footer .vh-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  margin-bottom: 16px;
  background: transparent;
  border: none;
}

.vh-footer .vh-footer-logo-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.025em;
  color: #ffffff;
}

.vh-footer .vh-footer-logo-text span {
  color: var(--gold);
}

.vh-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(30px, 4vw, 56px);
}

.vh-footer .vh-footer-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #ffffff;
  opacity: 0.9;
}

.vh-footer .vh-footer-col h4 {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.vh-footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  font-size: 15px;
}

.vh-footer .vh-footer-links a {
  color: #ece7de;
  text-decoration: none;
  transition: color 200ms var(--ease), padding-left 200ms var(--ease);
}

.vh-footer .vh-footer-links a:hover {
  color: #ffffff;
  padding-left: 4px;
}

.vh-footer-contact li {
  color: #ded9cf;
}

.vh-footer .vh-footer-contact a {
  color: #f5cf70;
  font-weight: 600;
}

.vh-footer .vh-footer-contact a:hover {
  color: #ffffff;
}

.vh-footer .vh-footer-bottom {
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 13.5px;
  color: rgba(236, 231, 222, 0.8);
}

/* ==========================================================================
   15. BLOG INDEX (Matching Blog Index.dc.html)
   ========================================================================== */

.vh-blog-header {
  padding-top: clamp(40px, 6vw, 88px);
  padding-bottom: clamp(30px, 4vw, 52px);
}

.vh-blog-title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 6.6vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.038em;
  font-stretch: 86%;
}

.vh-blog-lead {
  margin: clamp(22px, 3vw, 34px) 0 0;
  margin-left: clamp(0px, 20vw, 280px);
  max-width: 46ch;
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.55;
  color: light-dark(#5b554c, #a5a09a);
}

/* Category Filter Pills */
.vh-blog-cats {
  padding-bottom: clamp(32px, 4vw, 56px);
}

.vh-cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid light-dark(#e2ddd2, rgba(255,255,255,.1));
  padding-top: clamp(20px, 2.4vw, 28px);
}

.vh-cat-pill {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid light-dark(#ddd7cb, rgba(255,255,255,.14));
  color: inherit;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  transition: border-color 200ms var(--ease);
}

.vh-cat-pill:hover {
  border-color: light-dark(#7b0408, #e4787d);
  color: inherit;
}

.vh-cat-pill.is-active {
  background: light-dark(#14110e, #f4f1ea);
  color: light-dark(#f6f4ef, #14110e);
  border-color: transparent;
  font-weight: 600;
}

/* Featured Post */
.vh-blog-featured {
  padding-bottom: clamp(48px, 6vw, 88px);
}

.vh-featured-link {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 3.4vw, 56px);
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: opacity 200ms var(--ease);
}

.vh-featured-link:hover {
  opacity: .88;
  color: inherit;
}

.vh-featured-thumb {
  border: 1px solid light-dark(#ddd7cb, rgba(255,255,255,.14));
  border-radius: 18px;
  background: light-dark(#efe9dc, rgba(255,255,255,.03));
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.vh-featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 17px;
}

.vh-featured-meta-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vh-featured-badge {
  color: light-dark(#7b0408, #e4787d);
  font-weight: 600;
}

.vh-featured-sep {
  width: 18px;
  height: 1px;
  background: light-dark(#c9c2b4, rgba(255,255,255,.2));
}

.vh-featured-cat {
  color: light-dark(#5b554c, #a5a09a);
}

.vh-featured-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.vh-featured-excerpt {
  margin: 18px 0 0;
  max-width: 52ch;
  font-size: 17.5px;
  line-height: 1.6;
  color: light-dark(#5b554c, #a5a09a);
}

.vh-post-date-row {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: light-dark(#5b554c, #a5a09a);
}

/* Posts Grid */
.vh-blog-grid-section {
  padding-bottom: clamp(48px, 6vw, 80px);
}

.vh-grid-heading {
  margin: 0 0 clamp(26px, 3.4vw, 44px);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: light-dark(#7a5c26, #d1ad55);
  border-top: 1px solid light-dark(#e2ddd2, rgba(255,255,255,.1));
  padding-top: clamp(20px, 2.4vw, 28px);
}

.vh-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(28px, 3.4vw, 48px) clamp(20px, 2.6vw, 34px);
}

.vh-blog-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  transition: opacity 200ms var(--ease);
}

.vh-blog-card:hover {
  opacity: .85;
  color: inherit;
}

.vh-card-thumb {
  border: 1px solid light-dark(#ddd7cb, rgba(255,255,255,.14));
  border-radius: 14px;
  background: light-dark(#efe9dc, rgba(255,255,255,.03));
  aspect-ratio: 16 / 11;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.vh-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 13px;
}

.vh-card-cat {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: light-dark(#7a5c26, #d1ad55);
}

.vh-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.22;
  letter-spacing: -0.022em;
  text-wrap: pretty;
}

.vh-card-excerpt {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: light-dark(#5b554c, #a5a09a);
}

.vh-blog-card .vh-post-date-row {
  margin-top: auto;
  padding-top: 6px;
  font-size: 12px;
  color: light-dark(#8a8377, #7d7770);
}

.vh-placeholder-svg {
  opacity: .3;
}

/* Blog Pagination */
.vh-blog-pagination {
  padding-bottom: clamp(56px, 7vw, 100px);
}

.vh-blog-pagination .nav-links {
  border-top: 1px solid light-dark(#e2ddd2, rgba(255,255,255,.1));
  padding-top: clamp(22px, 2.6vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.vh-blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid light-dark(#e8e3d8, rgba(255,255,255,.08));
  color: inherit;
  font-size: 15px;
  text-decoration: none;
  transition: transform 200ms var(--ease);
}

.vh-blog-pagination .page-numbers.current,
.vh-blog-pagination .page-numbers:hover {
  background: light-dark(#7b0408, #b82e34);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
  transform: translateY(-2px);
}

/* ==========================================================================
   16. SINGLE ARTICLE
   ========================================================================== */

.vh-single-breadcrumb {
  padding-top: clamp(24px, 3vw, 36px);
  padding-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: light-dark(#5b554c, #a5a09a);
}

.vh-single-breadcrumb a {
  color: light-dark(#5b554c, #a5a09a);
  text-decoration: none;
  transition: color 200ms var(--ease);
}

.vh-single-breadcrumb a:hover {
  color: light-dark(#7b0408, #e4787d);
}

.vh-single-header {
  padding-bottom: clamp(30px, 4vw, 48px);
}

.vh-single-title {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 6vw, 78px);
  line-height: 1.06;
  letter-spacing: -0.038em;
  font-stretch: 86%;
}

.vh-single-meta {
  margin-top: clamp(20px, 2.6vw, 30px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: light-dark(#5b554c, #a5a09a);
}

.vh-single-featured {
  padding-bottom: clamp(36px, 5vw, 64px);
}

.vh-single-img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  display: block;
}

/* Article Body Content Typography */
.vh-single-content {
  max-width: 880px;
  padding-bottom: clamp(48px, 6vw, 80px);
}

.vh-single-content h2 {
  margin: clamp(40px, 5vw, 64px) 0 clamp(18px, 2vw, 24px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.vh-single-content h3 {
  margin: clamp(32px, 4vw, 48px) 0 clamp(14px, 1.6vw, 20px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(21px, 2.4vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.vh-single-content p {
  margin: 0 0 clamp(18px, 2vw, 24px);
  font-size: 17.5px;
  line-height: 1.72;
  color: light-dark(#3a352e, #d4d0c8);
}

.vh-single-content ul,
.vh-single-content ol {
  margin: 0 0 clamp(18px, 2vw, 24px);
  padding-left: 24px;
  font-size: 17px;
  line-height: 1.7;
}

.vh-single-content li {
  margin-bottom: 10px;
}

.vh-single-content blockquote {
  margin: clamp(28px, 3.4vw, 44px) 0;
  padding: clamp(20px, 2.4vw, 28px) clamp(22px, 3vw, 36px);
  border-left: 3px solid light-dark(#7b0408, #e4787d);
  background: light-dark(#efe9dc, rgba(255,255,255,.03));
  border-radius: 0 14px 14px 0;
  font-size: 18px;
  line-height: 1.6;
  font-style: italic;
  color: light-dark(#4a4438, #c8c3ba);
}

.vh-single-content strong {
  font-weight: 700;
  color: light-dark(#14110e, #f4f1ea);
}

.vh-single-content a {
  color: light-dark(#7b0408, #e4787d);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vh-single-content img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  margin: clamp(20px, 2.6vw, 32px) 0;
}

/* Callout Box */
.vh-single-callout {
  max-width: 880px;
  padding-bottom: clamp(40px, 5vw, 64px);
}

.vh-callout-box {
  padding: clamp(26px, 3.4vw, 40px);
  border: 1px solid light-dark(#ddd7cb, rgba(255,255,255,.14));
  border-radius: 18px;
  background: light-dark(#efe9dc, rgba(255,255,255,.03));
}

.vh-callout-label {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: light-dark(#7a5c26, #d1ad55);
}

.vh-callout-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.vh-callout-desc {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.6;
  color: light-dark(#5b554c, #a5a09a);
}

/* Post Navigation */
.vh-single-nav {
  max-width: 880px;
  padding-bottom: clamp(48px, 6vw, 80px);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid light-dark(#e2ddd2, rgba(255,255,255,.1));
  padding-top: clamp(20px, 2.4vw, 28px);
}

.vh-single-nav a {
  font-size: 15px;
  color: light-dark(#5b554c, #a5a09a);
  text-decoration: none;
  transition: color 200ms var(--ease);
}

.vh-single-nav a:hover {
  color: light-dark(#7b0408, #e4787d);
}

/* ==========================================================================
   17. GHI DE MOBILE (max-width: 768px) — CO Y DAT O CUOI FILE
   Moi rule component (header, hero, stats, footer, proof-showcase...) dinh
   nghia RAI RAC khap file phia tren. Neu dat khoi mobile nay o giua file
   (vi du ngay sau phan Header) thi bat ky rule component nao dinh nghia
   SAU no trong file, cung do dac ta (vi du 1 class), se thang no theo thu
   tu cascade — bat ke co nam trong @media hay khong. Dat khoi nay cuoi
   cung, sau TOAN BO rule khac trong file, la cach duy nhat dam bao no luon
   thang moi ties do dac ta ma khong can bumb specificity tung rule le.
   ========================================================================== */

@media (max-width: 768px) {
  .vh-menu-toggle {
    display: flex;
  }

  .vh-header .vh-nav {
    display: none;
  }

  .vh-mobile-drawer {
    display: block;
    position: fixed;
    top: 82px;
    left: 0;
    right: 0;
    bottom: 0;
    background: light-dark(rgba(246, 244, 239, .98), rgba(10, 10, 12, .98));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 32px 24px;
    transform: translateX(100%);
    transition: transform 280ms var(--ease);
    z-index: 65;
    overflow-y: auto;
  }

  .vh-mobile-drawer.is-active {
    transform: translateX(0);
  }

  .vh-mobile-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .vh-mobile-menu a {
    font-size: 20px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }

  /* Hero: thut le 26vw thiet ke cho desktop, o mobile an het chieu ngang */
  .vh-hero-sub {
    margin-left: 0;
  }

  /* Hai hinh luc giac nho nam thap, de dam vao vung so lieu — bo tren mobile,
     giu watermark lam nen mo phia sau tieu de la du. */
  .vh-hero-hex-2,
  .vh-hero-hex-3 {
    display: none;
  }

  /* hex-1 o vi tri desktop (top:6%) de vao dung chu "cho doanh nghiep,"
     tren man hinh hep — ha xuong 45%, nam giua khung do va o so lieu dau
     tien, khong con de len chu. */
  .vh-hero-hex-1 {
    top: 45%;
  }

  /* watermark co min-width 230px (tu clamp desktop) — o man 400px van giu
     nguyen 230px, de dung ngay canh tieu de "Website WordPress". Thu nho
     va ha xuong duoi tieu de. */
  .vh-hero-watermark {
    top: 24%;
    width: clamp(120px, 34vw, 180px);
  }

  /* .vh-stats-grid xep chong doc tren mobile — duong ke doc giua cac o
     khong con hop ly, doi sang duong ke ngang phia tren moi o. Dung dung
     padding-top nhu o dau tien (clamp(20px,2.4vw,30px)) de nhip cach deu
     nhau giua ca 3 o, khong lech giua o 1 va o 2-3. */
  .vh-stat-item + .vh-stat-item {
    border-left: none;
    border-top: 1px solid light-dark(#e2ddd2, rgba(255, 255, 255, .12));
    padding-left: 0;
    padding-top: clamp(20px, 2.4vw, 30px);
  }

  /* Carousel "Chung toi moi bat dau": tren dien thoai cham-keo la thao tac
     tu nhien nhat, nut mui ten chi choan cho khong can thiet — an di. */
  .vh-carousel-nav {
    display: none;
  }
}