/* ================================================================
 * Daisy Mart × Khu Vui Chơi — kvc-style.css (v4 — Royal Blue + Amber)
 *
 * REVISION v4:
 *  - Palette mới: ROYAL BLUE (#1E40AF) + AMBER (#F59E0B) + CREAM/WHITE
 *  - Hero NỀN SÁNG (cream gradient) — text charcoal đọc rõ
 *  - Buttons: blue solid primary, charcoal outline secondary
 *  - Chip filter: active state blue + JS lọc sản phẩm theo data-tags
 *  - Dark sections (process, showcase, quote-cta, footer) đổi sang
 *    deep navy #1E3A8A (vẫn premium B2B)
 * ================================================================ */

.kvc-vertical {
  /* ===== Design tokens v4 ===== */
  --kvc-primary:       #1E40AF;       /* royal blue — main brand */
  --kvc-primary-soft:  #3B82F6;       /* bright blue */
  --kvc-primary-deep:  #1E3A8A;       /* deep navy — dark sections */
  --kvc-primary-light: #DBEAFE;       /* blue tint */
  --kvc-primary-bg:    #EFF6FF;       /* lightest blue */

  --kvc-accent:        #F59E0B;       /* amber — accent CTA */
  --kvc-accent-deep:   #D97706;       /* amber deep — hover */
  --kvc-accent-light:  #FCD34D;       /* light amber */
  --kvc-accent-soft:   #FEF3C7;       /* soft amber tint */

  --kvc-charcoal:      #1F2937;       /* dark text */
  --kvc-graphite:      #374151;       /* medium text */
  --kvc-slate:         #6B7280;
  --kvc-slate-light:   #94A3B8;

  --kvc-cream:         #FFFBEB;       /* warm cream */
  --kvc-cream-soft:    #FEF9E7;
  --kvc-bg-soft:       #F9FAFB;
  --kvc-white:         #FFFFFF;

  --kvc-border:        #E5E7EB;
  --kvc-border-soft:   #F3F4F6;

  --kvc-success:       #16A34A;
  --kvc-danger:        #DC2626;
  --kvc-zalo:          #0068FF;
  --kvc-zalo-light:    #4FA3FF;

  --kvc-shadow-sm: 0 4px 14px rgba(30, 64, 175, 0.07);
  --kvc-shadow-md: 0 10px 28px rgba(30, 64, 175, 0.10);
  --kvc-shadow-lg: 0 20px 50px rgba(30, 64, 175, 0.14);
  --kvc-shadow-card-hover: 0 14px 36px rgba(30, 64, 175, 0.18);
  --kvc-shadow-blue: 0 6px 20px rgba(30, 64, 175, 0.32);
  --kvc-shadow-amber: 0 6px 20px rgba(245, 158, 11, 0.35);

  --kvc-radius-btn:  6px;
  --kvc-radius-card: 12px;
  --kvc-radius-pill: 999px;

  --kvc-container: 1240px;

  font-family: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--kvc-charcoal);
  line-height: 1.55;
}

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

.kvc-vertical h1,
.kvc-vertical h2,
.kvc-vertical h3,
.kvc-vertical h4 {
  font-weight: 700;
  color: var(--kvc-charcoal);
  margin: 0 0 .5em;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.kvc-vertical h1 { font-size: clamp(26px, 3.6vw, 42px); }
.kvc-vertical h2 { font-size: clamp(20px, 2.6vw, 30px); }
.kvc-vertical h3 { font-size: clamp(16px, 1.7vw, 19px); }
/* :where() để hạ specificity (0,1,0) — không đè color của p/a có class riêng (dark sections) */
.kvc-vertical :where(p)  { margin: 0 0 1em; color: var(--kvc-graphite); }
.kvc-vertical :where(a)  { color: var(--kvc-primary); text-decoration: none; transition: color .2s; }
.kvc-vertical :where(a):hover { color: var(--kvc-primary-deep); }

.kvc-container {
  width: 100%;
  max-width: var(--kvc-container);
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media (max-width: 640px) { .kvc-container { padding-left: 14px; padding-right: 14px; } }

/* ===== Buttons ===== */
.kvc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--kvc-radius-btn);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all .25s ease;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
}
.kvc-btn--primary {
  background: var(--kvc-primary);
  color: var(--kvc-white);
  border-color: var(--kvc-primary);
  box-shadow: var(--kvc-shadow-blue);
}
.kvc-btn--primary:hover {
  background: var(--kvc-primary-deep);
  border-color: var(--kvc-primary-deep);
  color: var(--kvc-white);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(30, 64, 175, 0.42);
}
.kvc-btn--accent {
  background: var(--kvc-accent);
  color: var(--kvc-charcoal);
  border-color: var(--kvc-accent);
  box-shadow: var(--kvc-shadow-amber);
}
.kvc-btn--accent:hover {
  background: var(--kvc-accent-deep);
  border-color: var(--kvc-accent-deep);
  color: var(--kvc-white);
  transform: translateY(-1px);
}
.kvc-btn--ghost {
  background: var(--kvc-white);
  color: var(--kvc-charcoal);
  border-color: var(--kvc-charcoal);
}
.kvc-btn--ghost:hover {
  background: var(--kvc-charcoal);
  border-color: var(--kvc-charcoal);
  color: var(--kvc-white);
}
.kvc-btn--dark {
  background: var(--kvc-primary-deep);
  color: var(--kvc-white);
  border-color: var(--kvc-primary-deep);
}
.kvc-btn--dark:hover {
  background: var(--kvc-accent);
  border-color: var(--kvc-accent);
  color: var(--kvc-charcoal);
}
.kvc-btn--outline {
  background: transparent;
  color: var(--kvc-primary);
  border-color: var(--kvc-primary);
}
.kvc-btn--outline:hover {
  background: var(--kvc-primary);
  color: var(--kvc-white);
  border-color: var(--kvc-primary);
}
.kvc-btn--sm { padding: 9px 18px; font-size: 13px; }
.kvc-btn--lg { padding: 16px 32px; font-size: 16px; }

/* ===== Zalo button ===== */
.kvc-zalo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  background: var(--kvc-white);
  color: var(--kvc-charcoal);
  font-size: 14.5px;
  font-weight: 700;
  border-radius: var(--kvc-radius-pill);
  border: 1.5px solid var(--kvc-zalo);
  cursor: pointer;
  text-decoration: none;
  transition: all .25s;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 104, 255, 0.12);
}
.kvc-zalo-btn svg { width: 22px; height: 22px; color: var(--kvc-zalo); transition: color .25s; }
.kvc-zalo-btn:hover {
  background: var(--kvc-zalo);
  color: var(--kvc-white);
  border-color: var(--kvc-zalo);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 104, 255, 0.32);
}
.kvc-zalo-btn:hover svg { color: var(--kvc-white); }

.kvc-zalo-btn--inverse {
  background: rgba(255, 255, 255, 0.08);
  color: var(--kvc-white);
  border-color: rgba(79, 163, 255, 0.6);
}
.kvc-zalo-btn--inverse svg { color: var(--kvc-zalo-light); }
.kvc-zalo-btn--inverse:hover {
  background: var(--kvc-zalo);
  color: var(--kvc-white);
  border-color: var(--kvc-zalo);
}

/* ===== Sub-header ===== */
.kvc-subheader {
  background: var(--kvc-white);
  color: var(--kvc-charcoal);
  padding: 14px 0;
  border-bottom: 1px solid var(--kvc-border);
  position: relative;
}
.kvc-subheader::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--kvc-primary), var(--kvc-accent), var(--kvc-primary));
}
.kvc-subheader__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.kvc-subheader__brand {
  display: flex;
  align-items: center;
  gap: 16px;
}
.kvc-subheader__logo { display: block; height: 52px; width: auto; }
.kvc-subheader__divider {
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, transparent, var(--kvc-primary), transparent);
}
.kvc-subheader__title { display: flex; flex-direction: column; gap: 2px; }
.kvc-subheader__brandname {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--kvc-primary);
  text-transform: uppercase;
}
.kvc-subheader__brandsub {
  font-size: 16px;
  font-weight: 700;
  color: var(--kvc-charcoal);
  letter-spacing: 0.01em;
}
.kvc-subheader__slogan {
  font-size: 13px;
  font-style: italic;
  color: var(--kvc-accent-deep);
  letter-spacing: 0.02em;
  border-left: 2px solid var(--kvc-accent);
  padding-left: 14px;
  line-height: 1.45;
  max-width: 280px;
}
.kvc-breadcrumb { font-size: 13px; color: var(--kvc-slate); }
.kvc-breadcrumb a { color: var(--kvc-charcoal); text-decoration: none; font-weight: 500; }
.kvc-breadcrumb a:hover { color: var(--kvc-primary); }
.kvc-breadcrumb .sep { margin: 0 8px; color: var(--kvc-accent); }
.kvc-breadcrumb .current { color: var(--kvc-primary); font-weight: 600; }

@media (max-width: 980px) {
  .kvc-subheader__divider, .kvc-subheader__slogan { display: none; }
}
@media (max-width: 640px) {
  .kvc-subheader { padding: 11px 0; }
  .kvc-subheader__logo { height: 40px; }
  .kvc-subheader__brandname { font-size: 9.5px; letter-spacing: 0.18em; }
  .kvc-subheader__brandsub { font-size: 13.5px; }
  .kvc-breadcrumb { font-size: 12px; width: 100%; padding-top: 6px; border-top: 1px dashed var(--kvc-border-soft); }
}

/* ===== HERO (v4 — NỀN SÁNG, text dễ đọc) ===== */
.kvc-hero {
  position: relative;
  background:
    radial-gradient(ellipse at 12% 88%, rgba(245, 158, 11, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 88% 12%, rgba(30, 64, 175, 0.16) 0%, transparent 50%),
    linear-gradient(135deg, var(--kvc-cream) 0%, var(--kvc-white) 50%, var(--kvc-primary-bg) 100%);
  color: var(--kvc-charcoal);
  padding: 72px 0 84px;
  overflow: hidden;
}
.kvc-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--kvc-primary), var(--kvc-accent), var(--kvc-primary));
}
.kvc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(30,64,175,0.018) 0 2px, transparent 2px 8px);
  pointer-events: none;
}
.kvc-hero__inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.kvc-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kvc-primary-deep);
  background: var(--kvc-primary-light);
  border: 1px solid var(--kvc-primary);
  padding: 7px 16px;
  border-radius: var(--kvc-radius-pill);
  margin-bottom: 22px;
  box-shadow: 0 4px 14px rgba(30, 64, 175, 0.12);
}
.kvc-hero__tag::before {
  content: "";
  display: block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--kvc-accent);
  box-shadow: 0 0 12px var(--kvc-accent);
}
.kvc-hero h1 {
  color: var(--kvc-charcoal);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 800;
  margin-bottom: 18px;
  letter-spacing: -0.015em;
}
.kvc-hero h1 .accent {
  color: var(--kvc-primary);
  position: relative;
}
.kvc-hero h1 .accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 3px;
  background: var(--kvc-accent);
  border-radius: 2px;
  opacity: 0.8;
}
.kvc-hero__sub {
  font-size: 16.5px;
  color: var(--kvc-graphite);
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 32px;
  font-weight: 400;
}
.kvc-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.kvc-hero__visual {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--kvc-radius-card);
  background:
    radial-gradient(circle at 30% 30%, rgba(245, 158, 11, 0.30), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(30, 64, 175, 0.22), transparent 55%),
    linear-gradient(135deg, var(--kvc-white), var(--kvc-cream));
  border: 1px solid var(--kvc-border);
  box-shadow: var(--kvc-shadow-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kvc-hero__visual::after {
  content: "📷 Khu vui chơi mầm non hiện đại — 1600×1200";
  position: absolute;
  bottom: 14px; left: 14px; right: 14px;
  text-align: center;
  font-size: 11.5px;
  font-style: italic;
  background: rgba(31, 41, 55, 0.85);
  padding: 7px 12px;
  border-radius: 6px;
  color: var(--kvc-accent-light);
}
.kvc-hero__visual-icon {
  font-size: 80px;
  opacity: 0.85;
  filter: drop-shadow(0 6px 20px rgba(30, 64, 175, 0.22));
}

@media (max-width: 900px) {
  .kvc-hero { padding: 48px 0 56px; }
  .kvc-hero__inner { grid-template-columns: 1fr; gap: 28px; }
  .kvc-hero__visual { order: -1; max-height: 240px; }
}
@media (max-width: 480px) {
  .kvc-hero { padding: 32px 0 40px; }
  .kvc-hero__cta .kvc-btn { width: 100%; }
}

/* ===== USP Strip ===== */
.kvc-usp-strip {
  background: var(--kvc-cream);
  border-bottom: 1px solid var(--kvc-border-soft);
  padding: 28px 0;
}
.kvc-usp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.kvc-usp-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.kvc-usp-icon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  background: var(--kvc-white);
  border: 1.5px solid var(--kvc-primary);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--kvc-primary);
  box-shadow: 0 4px 14px rgba(30, 64, 175, 0.15);
}
.kvc-usp-icon svg { width: 24px; height: 24px; }
.kvc-usp-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--kvc-charcoal);
  margin-bottom: 2px;
}
.kvc-usp-desc {
  font-size: 12.5px;
  color: var(--kvc-slate);
  line-height: 1.45;
  margin: 0;
}
@media (max-width: 900px) { .kvc-usp-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 480px) {
  .kvc-usp-grid { grid-template-columns: 1fr; gap: 12px; }
  .kvc-usp-item { padding: 10px 14px; background: var(--kvc-white); border-radius: var(--kvc-radius-card); }
}

/* ===== Group section ===== */
.kvc-group-section {
  padding: 44px 0;
  background: var(--kvc-white);
  position: relative;
}
.kvc-group-section--cream { background: var(--kvc-cream); }

.kvc-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.kvc-group-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.kvc-group-icon {
  width: 50px; height: 50px;
  background: var(--kvc-primary);
  border-radius: var(--kvc-radius-card);
  display: flex; align-items: center; justify-content: center;
  color: var(--kvc-white);
  box-shadow: var(--kvc-shadow-blue);
  position: relative;
  flex-shrink: 0;
}
.kvc-group-icon::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1.5px solid var(--kvc-accent);
  border-radius: calc(var(--kvc-radius-card) + 3px);
  opacity: 0.65;
}
.kvc-group-icon svg { width: 24px; height: 24px; }
.kvc-group-title {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  color: var(--kvc-charcoal);
  margin: 0;
}
.kvc-group-subtitle {
  font-size: 12.5px;
  color: var(--kvc-slate);
  margin: 3px 0 0;
  font-weight: 400;
}
.kvc-group-view-all {
  font-size: 14px;
  font-weight: 700;
  color: var(--kvc-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid transparent;
  transition: all .2s;
  letter-spacing: 0.02em;
}
.kvc-group-view-all:hover {
  color: var(--kvc-primary-deep);
  border-bottom-color: var(--kvc-primary);
  gap: 10px;
}

/* ===== Chips (wrap, có active state + filter) ===== */
.kvc-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 0 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--kvc-border-soft);
}
.kvc-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  background: var(--kvc-white);
  border: 1px solid var(--kvc-border);
  border-radius: var(--kvc-radius-pill);
  color: var(--kvc-charcoal);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  transition: all .2s;
  line-height: 1.3;
  cursor: pointer;
}
.kvc-group-section--cream .kvc-chip { background: var(--kvc-white); }
.kvc-chip:hover {
  border-color: var(--kvc-primary);
  color: var(--kvc-primary-deep);
  background: var(--kvc-primary-bg);
  transform: translateY(-1px);
}
.kvc-chip.is-active {
  background: var(--kvc-primary);
  color: var(--kvc-white);
  border-color: var(--kvc-primary);
  font-weight: 600;
  box-shadow: var(--kvc-shadow-blue);
}
.kvc-chip.is-active:hover {
  background: var(--kvc-primary-deep);
  color: var(--kvc-white);
}
.kvc-chip-count {
  font-size: 10.5px;
  background: var(--kvc-cream);
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--kvc-slate);
  font-weight: 600;
}
.kvc-chip:hover .kvc-chip-count {
  background: var(--kvc-accent);
  color: var(--kvc-charcoal);
}
.kvc-chip.is-active .kvc-chip-count {
  background: var(--kvc-accent);
  color: var(--kvc-charcoal);
}

/* "Tất cả" chip variant */
.kvc-chip--all {
  background: var(--kvc-accent-soft);
  border-color: var(--kvc-accent);
  color: var(--kvc-accent-deep);
  font-weight: 600;
}
.kvc-chip--all:hover {
  background: var(--kvc-accent-light);
  border-color: var(--kvc-accent-deep);
  color: var(--kvc-charcoal);
}
.kvc-chip--all.is-active {
  background: var(--kvc-accent);
  border-color: var(--kvc-accent);
  color: var(--kvc-charcoal);
}

/* Filter note */
.kvc-filter-note {
  display: none;
  background: var(--kvc-accent-soft);
  border: 1px solid var(--kvc-accent-light);
  border-left: 3px solid var(--kvc-accent);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--kvc-graphite);
  margin: 0 0 16px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.kvc-filter-note.is-show { display: flex; }
.kvc-filter-note b { color: var(--kvc-primary-deep); }
.kvc-filter-note__reset {
  color: var(--kvc-primary);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
}
.kvc-filter-note__reset:hover {
  border-bottom-color: var(--kvc-primary);
}

/* ===== Product grid (6 cột compact) ===== */
.kvc-product-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 1200px) { .kvc-product-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1024px) { .kvc-product-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 820px)  { .kvc-product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px)  { .kvc-product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
@media (max-width: 360px)  { .kvc-product-grid { grid-template-columns: 1fr; } }

.kvc-product-card {
  background: var(--kvc-white);
  border: 1px solid var(--kvc-border);
  border-radius: var(--kvc-radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all .25s ease;
  position: relative;
}
.kvc-product-card.is-hidden { display: none; }
.kvc-product-card:hover {
  border-color: var(--kvc-primary);
  box-shadow: var(--kvc-shadow-card-hover);
  transform: translateY(-3px);
}
.kvc-product-card__media {
  aspect-ratio: 1/1;
  background: linear-gradient(135deg, var(--kvc-cream-soft), var(--kvc-cream));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: var(--kvc-primary);
  overflow: hidden;
}
.kvc-product-card__media-icon { filter: drop-shadow(0 3px 10px rgba(30, 64, 175, 0.20)); }
.kvc-product-card__badge {
  position: absolute;
  top: 7px; left: 7px;
  background: var(--kvc-primary-deep);
  color: var(--kvc-accent-light);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
}
.kvc-product-card__badge--hot {
  background: var(--kvc-danger);
  color: var(--kvc-white);
}
.kvc-product-card__body {
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.kvc-product-card__title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--kvc-charcoal);
  line-height: 1.4;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 34px;
}
.kvc-product-card__rating {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--kvc-slate);
  margin-bottom: 7px;
}
.kvc-product-card__rating-stars { color: var(--kvc-accent); letter-spacing: -1px; }
.kvc-product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: auto;
}
.kvc-product-card__price {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--kvc-danger);
}
.kvc-product-card__price-old {
  font-size: 10.5px;
  color: var(--kvc-slate-light);
  text-decoration: line-through;
  display: block;
  font-weight: 400;
}
.kvc-product-card__cart {
  width: 30px; height: 30px;
  background: var(--kvc-cream);
  border: 1px solid var(--kvc-border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--kvc-primary);
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0;
}
.kvc-product-card__cart:hover {
  background: var(--kvc-primary);
  color: var(--kvc-white);
  border-color: var(--kvc-primary);
  transform: scale(1.06);
}

/* Quote button — blue solid + white text */
.kvc-product-card__quote {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 8px;
  background: var(--kvc-primary);
  color: var(--kvc-white);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  border-radius: var(--kvc-radius-btn);
  text-decoration: none;
  border: 1.5px solid var(--kvc-primary);
  text-transform: uppercase;
  transition: all .2s;
  box-shadow: 0 2px 8px rgba(30, 64, 175, 0.22);
}
.kvc-product-card__quote:hover {
  background: var(--kvc-accent);
  color: var(--kvc-charcoal);
  border-color: var(--kvc-accent);
  transform: translateY(-1px);
}
.kvc-product-card__quote-label {
  font-size: 11px;
  color: var(--kvc-accent-deep);
  font-style: italic;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}

.kvc-group-footer { display: flex; justify-content: center; }

/* ===== Process (timeline navy đậm) ===== */
.kvc-process {
  background: var(--kvc-primary-deep);
  color: var(--kvc-white);
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}
.kvc-process::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(245, 158, 11, 0.20), transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(59, 130, 246, 0.15), transparent 50%);
  pointer-events: none;
}
.kvc-process-header {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}
.kvc-process-header h2 { color: var(--kvc-white); margin-bottom: 8px; }
.kvc-process-header .kvc-eyebrow { color: var(--kvc-accent-light); border-bottom-color: var(--kvc-accent); }
.kvc-process-header p { color: rgba(255,255,255,0.92); margin: 0; font-size: 15px; }

.kvc-timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  position: relative;
}
.kvc-timeline::before {
  content: "";
  position: absolute;
  top: 36px;
  left: 8%; right: 8%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--kvc-accent), var(--kvc-accent-light), var(--kvc-accent), transparent);
  z-index: 0;
}
.kvc-step { text-align: center; position: relative; z-index: 1; }
.kvc-step__num {
  width: 72px; height: 72px;
  background: var(--kvc-primary-deep);
  border: 2px solid var(--kvc-accent);
  color: var(--kvc-accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  font-weight: 800;
  margin: 0 auto 18px;
  position: relative;
  box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.18), 0 8px 20px rgba(245, 158, 11, 0.22);
}
.kvc-step__num::before {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px dashed rgba(252, 211, 77, 0.5);
  border-radius: 50%;
}
.kvc-step__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--kvc-white);
  margin-bottom: 6px;
}
.kvc-step__desc {
  font-size: 13px;
  color: rgba(255,255,255,0.92);
  margin: 0;
  line-height: 1.55;
  font-weight: 400;
}

@media (max-width: 900px) {
  .kvc-timeline { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; }
  .kvc-timeline::before { display: none; }
}
@media (max-width: 480px) {
  .kvc-timeline { grid-template-columns: 1fr; }
}

/* ===== Section header ===== */
.kvc-section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 36px;
}
.kvc-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--kvc-primary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--kvc-accent);
}
.kvc-section-header h2 { margin-bottom: 10px; color: var(--kvc-charcoal); }
.kvc-section-header p { color: var(--kvc-slate); margin: 0; font-size: 15px; }

/* ===== About ===== */
.kvc-about {
  background: var(--kvc-white);
  padding: 56px 0;
}
.kvc-about-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 44px;
  align-items: center;
}
.kvc-about-text h3 {
  color: var(--kvc-charcoal);
  font-size: 19px;
  margin-top: 22px;
  margin-bottom: 10px;
}
.kvc-about-text h3:first-of-type { margin-top: 0; }
.kvc-about-text p {
  color: var(--kvc-graphite);
  font-size: 14.5px;
  line-height: 1.7;
  margin-bottom: 12px;
}
.kvc-about-text strong { color: var(--kvc-charcoal); }
.kvc-about-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}
.kvc-about-img {
  background:
    radial-gradient(circle at 30% 30%, rgba(245, 158, 11, 0.18), transparent 60%),
    linear-gradient(135deg, var(--kvc-primary-bg), var(--kvc-cream));
  border: 1px solid var(--kvc-border-soft);
  border-radius: var(--kvc-radius-card);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  color: var(--kvc-primary);
  position: relative;
  overflow: hidden;
}
.kvc-about-img:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 3; aspect-ratio: 3/5; }
.kvc-about-img::after {
  content: attr(data-label);
  position: absolute;
  bottom: 10px; left: 10px; right: 10px;
  font-size: 10.5px;
  font-style: italic;
  background: rgba(31, 41, 55, 0.85);
  padding: 5px 8px;
  border-radius: 4px;
  color: var(--kvc-accent-light);
  text-align: center;
}
@media (max-width: 900px) {
  .kvc-about-grid { grid-template-columns: 1fr; gap: 24px; }
  .kvc-about-images { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
  .kvc-about-img:nth-child(1) { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16/9; }
}

/* ===== Showcase banner ===== */
.kvc-showcase {
  position: relative;
  padding: 56px 0;
  color: var(--kvc-white);
  background:
    radial-gradient(circle at 90% 20%, rgba(245, 158, 11, 0.22), transparent 50%),
    radial-gradient(circle at 10% 80%, rgba(59, 130, 246, 0.30), transparent 55%),
    linear-gradient(135deg, var(--kvc-primary-deep), #172554);
  overflow: hidden;
}
.kvc-showcase__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
}
.kvc-showcase h2 { color: var(--kvc-white); margin-bottom: 12px; font-size: clamp(22px, 2.6vw, 32px); }
.kvc-showcase__lead { color: rgba(255,255,255,0.95); font-size: 15.5px; line-height: 1.7; margin-bottom: 22px; max-width: 580px; }
.kvc-showcase__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 22px;
}
.kvc-stat { border-left: 3px solid var(--kvc-accent); padding-left: 14px; }
.kvc-stat__num {
  font-size: 28px;
  font-weight: 800;
  color: var(--kvc-accent-light);
  line-height: 1.1;
}
.kvc-stat__label {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  margin-top: 4px;
  letter-spacing: 0.02em;
}
.kvc-showcase__visual {
  aspect-ratio: 4/3;
  border-radius: var(--kvc-radius-card);
  background:
    radial-gradient(circle at 30% 30%, rgba(245, 158, 11, 0.28), transparent 60%),
    linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(245, 158, 11, 0.06)),
    linear-gradient(180deg, var(--kvc-primary), var(--kvc-primary-deep));
  border: 1px solid rgba(252, 211, 77, 0.35);
  box-shadow: var(--kvc-shadow-lg), 0 0 50px rgba(245, 158, 11, 0.14);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  color: rgba(252, 211, 77, 0.55);
}
.kvc-showcase__visual::after {
  content: "📷 Ảnh dự án tiêu biểu (sẽ thay)";
  position: absolute;
  bottom: 14px; left: 14px; right: 14px;
  font-size: 11.5px;
  font-style: italic;
  text-align: center;
  background: rgba(15, 23, 42, 0.82);
  padding: 6px 10px;
  border-radius: 5px;
  color: var(--kvc-accent-light);
}
@media (max-width: 900px) {
  .kvc-showcase__inner { grid-template-columns: 1fr; gap: 24px; }
  .kvc-showcase__visual { order: -1; max-height: 240px; }
  .kvc-showcase__stats { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* ===== Audience ===== */
.kvc-audience {
  background: var(--kvc-cream);
  padding: 56px 0;
}
.kvc-audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.kvc-audience-card {
  background: var(--kvc-white);
  border: 1px solid var(--kvc-border-soft);
  border-radius: var(--kvc-radius-card);
  padding: 22px 18px;
  text-align: center;
  transition: all .25s;
  position: relative;
  overflow: hidden;
}
.kvc-audience-card:hover {
  border-color: var(--kvc-primary);
  transform: translateY(-4px);
  box-shadow: var(--kvc-shadow-md);
}
.kvc-audience-card__emoji {
  font-size: 42px;
  margin-bottom: 10px;
  display: block;
}
.kvc-audience-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--kvc-charcoal);
  margin-bottom: 8px;
}
.kvc-audience-card__desc {
  font-size: 12.5px;
  color: var(--kvc-slate);
  line-height: 1.55;
  margin: 0 0 12px;
}
.kvc-audience-card__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.kvc-audience-card__items li {
  font-size: 12px;
  color: var(--kvc-slate);
  padding-left: 14px;
  position: relative;
}
.kvc-audience-card__items li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--kvc-accent);
  font-size: 10px;
  top: 1px;
}
@media (max-width: 900px) { .kvc-audience-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .kvc-audience-grid { grid-template-columns: 1fr; } }

/* ===== Why ===== */
.kvc-why {
  background: var(--kvc-white);
  padding: 56px 0;
}
.kvc-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.kvc-feature-card {
  background: var(--kvc-primary-bg);
  border: 1px solid var(--kvc-border-soft);
  border-radius: var(--kvc-radius-card);
  padding: 26px 20px;
  text-align: center;
  transition: all .25s;
  position: relative;
  overflow: hidden;
}
.kvc-feature-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--kvc-primary), var(--kvc-accent), var(--kvc-primary));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s;
}
.kvc-feature-card:hover {
  border-color: var(--kvc-primary);
  background: var(--kvc-white);
  transform: translateY(-4px);
  box-shadow: var(--kvc-shadow-md);
}
.kvc-feature-card:hover::before { transform: scaleX(1); }
.kvc-feature-card__icon {
  width: 60px; height: 60px;
  margin: 0 auto 16px;
  background: var(--kvc-white);
  border: 1.5px solid var(--kvc-primary);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--kvc-primary);
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.15);
}
.kvc-feature-card__icon svg { width: 26px; height: 26px; }
.kvc-feature-card__title {
  font-size: 15.5px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--kvc-charcoal);
}
.kvc-feature-card__desc {
  font-size: 12.5px;
  color: var(--kvc-slate);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 900px) { .kvc-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .kvc-feature-grid { grid-template-columns: 1fr; } }

/* ===== Quote CTA ===== */
.kvc-quote-cta {
  padding: 64px 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.24), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.30), transparent 55%),
    linear-gradient(135deg, var(--kvc-primary-deep), #172554);
  color: var(--kvc-white);
  position: relative;
}
.kvc-quote-cta__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
}
.kvc-quote-cta h2 { color: var(--kvc-white); }
.kvc-quote-cta__eyebrow { color: var(--kvc-accent-light); border-bottom-color: var(--kvc-accent); }
.kvc-quote-cta__lead {
  color: rgba(255,255,255,0.95);
  font-size: 15.5px;
  line-height: 1.7;
  margin-bottom: 20px;
}
.kvc-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: grid;
  gap: 10px;
}
.kvc-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--kvc-white);
  font-size: 14px;
}
.kvc-checklist .check {
  width: 22px; height: 22px;
  background: var(--kvc-accent);
  color: var(--kvc-charcoal);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.kvc-quote-cta__contact {
  background: rgba(252, 211, 77, 0.10);
  border: 1px solid rgba(252, 211, 77, 0.35);
  border-radius: var(--kvc-radius-card);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.kvc-quote-cta__hotline-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kvc-accent-light);
  margin-bottom: 4px;
  font-weight: 700;
}
.kvc-quote-cta__hotline-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--kvc-white);
  letter-spacing: 0.02em;
  text-decoration: none;
}
.kvc-quote-cta__zalo { margin-left: auto; }

.kvc-quick-form {
  background: var(--kvc-white);
  color: var(--kvc-charcoal);
  border-radius: var(--kvc-radius-card);
  padding: 26px 24px;
  box-shadow: var(--kvc-shadow-lg);
  border-top: 4px solid var(--kvc-accent);
}
.kvc-quick-form__title {
  font-size: 19px;
  font-weight: 700;
  color: var(--kvc-charcoal);
  margin-bottom: 4px;
}
.kvc-quick-form__sub {
  font-size: 13px;
  color: var(--kvc-slate);
  margin-bottom: 16px;
}
.kvc-form-row { display: grid; gap: 11px; margin-bottom: 11px; }
.kvc-form-row--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .kvc-form-row--2 { grid-template-columns: 1fr; } }
.kvc-form-field { display: flex; flex-direction: column; }
.kvc-form-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--kvc-slate);
  margin-bottom: 5px;
  letter-spacing: 0.02em;
}
.kvc-form-field label .req { color: var(--kvc-danger); }
.kvc-form-field input,
.kvc-form-field select,
.kvc-form-field textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 10px 13px;
  border: 1px solid var(--kvc-border);
  border-radius: var(--kvc-radius-btn);
  color: var(--kvc-charcoal);
  background: var(--kvc-white);
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
}
.kvc-form-field input:focus,
.kvc-form-field select:focus,
.kvc-form-field textarea:focus {
  outline: none;
  border-color: var(--kvc-primary);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.16);
}
.kvc-form-cta-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 10px;
  margin-top: 6px;
}
@media (max-width: 480px) { .kvc-form-cta-row { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .kvc-quote-cta { padding: 44px 0; }
  .kvc-quote-cta__inner { grid-template-columns: 1fr; gap: 26px; }
  .kvc-quote-cta__contact { flex-wrap: wrap; }
  .kvc-quote-cta__zalo { margin-left: 0; width: 100%; }
}

/* ===== Footer band ===== */
.kvc-footer-band {
  background: var(--kvc-primary-deep);
  color: rgba(255,255,255,0.90);
  padding: 22px 0;
  border-top: 2px solid var(--kvc-accent);
  font-size: 13px;
  text-align: center;
  line-height: 1.7;
}
.kvc-footer-band strong { color: var(--kvc-accent-light); font-weight: 700; }
.kvc-footer-band a { color: var(--kvc-accent-light); text-decoration: none; }
.kvc-footer-band a:hover { color: var(--kvc-white); }

/* ===== Sticky CTA mobile ===== */
.kvc-sticky-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--kvc-primary-deep);
  border-top: 2px solid var(--kvc-accent);
  display: none;
  z-index: 9990;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.22);
}
.kvc-sticky-cta__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
}
.kvc-sticky-cta a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 9px 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--kvc-white);
  text-decoration: none;
  border-right: 1px solid rgba(252, 211, 77, 0.18);
  letter-spacing: 0.02em;
}
.kvc-sticky-cta a:last-child { border-right: none; }
.kvc-sticky-cta a svg { width: 20px; height: 20px; }
.kvc-sticky-cta a.is-primary {
  background: var(--kvc-accent);
  color: var(--kvc-charcoal);
}
.kvc-sticky-cta a.is-zalo svg { color: var(--kvc-zalo-light); }

/* Sticky CTA mobile đã tắt — preview dùng chung contact buttons của theme Flatsome chính.
   Trên production, các nút Hotline/Zalo/Báo giá sẽ dùng widget có sẵn của theme. */
@media (max-width: 768px) {
  body.has-kvc-sticky { padding-bottom: 0; }
}

/* ================================================================
 * Sub-page styles (Step 5) — trang nhóm sản phẩm
 * ================================================================ */

/* Page hero (compact hơn homepage hero) */
.kvc-page-hero {
  position: relative;
  padding: 48px 0 56px;
  color: var(--kvc-white);
  background:
    radial-gradient(circle at 85% 25%, rgba(245, 158, 11, 0.30), transparent 55%),
    radial-gradient(circle at 15% 75%, rgba(59, 130, 246, 0.35), transparent 60%),
    linear-gradient(135deg, var(--kvc-primary-deep), #172554);
  overflow: hidden;
}
.kvc-page-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--kvc-primary), var(--kvc-accent), var(--kvc-primary));
}
.kvc-page-hero__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 44px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.kvc-page-hero__breadcrumb {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 16px;
}
.kvc-page-hero__breadcrumb a { color: rgba(255, 255, 255, 0.88); text-decoration: none; font-weight: 500; }
.kvc-page-hero__breadcrumb a:hover { color: var(--kvc-accent-light); }
.kvc-page-hero__breadcrumb .sep { margin: 0 8px; color: var(--kvc-accent); }
.kvc-page-hero__breadcrumb .current { color: var(--kvc-accent-light); font-weight: 600; }

.kvc-page-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kvc-accent-light);
  background: rgba(252, 211, 77, 0.12);
  border: 1px solid rgba(252, 211, 77, 0.4);
  padding: 6px 14px;
  border-radius: var(--kvc-radius-pill);
  margin-bottom: 16px;
}
.kvc-page-hero h1 {
  color: var(--kvc-white);
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 800;
  margin-bottom: 14px;
  letter-spacing: -0.015em;
}
.kvc-page-hero h1 .accent { color: var(--kvc-accent-light); }
.kvc-page-hero__sub {
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.94);
  line-height: 1.65;
  max-width: 560px;
  margin-bottom: 22px;
}
.kvc-page-hero__quick-info {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.kvc-page-hero__quick-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 500;
}
.kvc-page-hero__quick-item svg {
  width: 18px;
  height: 18px;
  color: var(--kvc-accent);
  flex-shrink: 0;
}

.kvc-page-hero__visual {
  aspect-ratio: 16/10;
  border-radius: var(--kvc-radius-card);
  background:
    radial-gradient(circle at 30% 30%, rgba(252, 211, 77, 0.28), transparent 60%),
    linear-gradient(135deg, rgba(59, 130, 246, 0.20), rgba(245, 158, 11, 0.06)),
    linear-gradient(180deg, var(--kvc-primary), var(--kvc-primary-deep));
  border: 1px solid rgba(252, 211, 77, 0.36);
  box-shadow: var(--kvc-shadow-lg), 0 0 50px rgba(245, 158, 11, 0.16);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  color: rgba(252, 211, 77, 0.62);
  overflow: hidden;
}
.kvc-page-hero__visual::after {
  content: attr(data-label);
  position: absolute;
  bottom: 12px; left: 12px; right: 12px;
  text-align: center;
  font-size: 11.5px;
  font-style: italic;
  background: rgba(15, 23, 42, 0.82);
  padding: 6px 10px;
  border-radius: 5px;
  color: var(--kvc-accent-light);
}

@media (max-width: 900px) {
  .kvc-page-hero { padding: 36px 0 44px; }
  .kvc-page-hero__inner { grid-template-columns: 1fr; gap: 24px; }
  .kvc-page-hero__visual { order: -1; max-height: 220px; }
}

/* Intro section — 200-300 từ SEO */
.kvc-intro {
  background: var(--kvc-white);
  padding: 48px 0;
}
.kvc-intro__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
}
.kvc-intro__text h2 {
  color: var(--kvc-charcoal);
  margin-bottom: 14px;
  font-size: clamp(22px, 2.6vw, 30px);
}
.kvc-intro__text p {
  color: var(--kvc-graphite);
  font-size: 14.5px;
  line-height: 1.75;
  margin-bottom: 12px;
}
.kvc-intro__text strong { color: var(--kvc-charcoal); }
.kvc-intro__highlights {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}
.kvc-intro__highlights li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--kvc-graphite);
}
.kvc-intro__highlights li::before {
  content: "✓";
  flex-shrink: 0;
  width: 20px; height: 20px;
  background: var(--kvc-primary);
  color: var(--kvc-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  margin-top: 1px;
}
.kvc-intro__visual {
  aspect-ratio: 4/3;
  border-radius: var(--kvc-radius-card);
  background:
    radial-gradient(circle at 30% 30%, rgba(245, 158, 11, 0.18), transparent 60%),
    linear-gradient(135deg, var(--kvc-primary-bg), var(--kvc-cream));
  border: 1px solid var(--kvc-border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 76px;
  color: var(--kvc-primary);
  position: relative;
  overflow: hidden;
  box-shadow: var(--kvc-shadow-sm);
}
.kvc-intro__visual::after {
  content: attr(data-label);
  position: absolute;
  bottom: 12px; left: 12px; right: 12px;
  text-align: center;
  font-size: 11.5px;
  font-style: italic;
  background: rgba(31, 41, 55, 0.85);
  padding: 6px 10px;
  border-radius: 5px;
  color: var(--kvc-accent-light);
}

@media (max-width: 900px) {
  .kvc-intro { padding: 36px 0; }
  .kvc-intro__grid { grid-template-columns: 1fr; gap: 24px; }
  .kvc-intro__visual { max-height: 260px; }
  .kvc-intro__highlights { grid-template-columns: 1fr; }
}

/* Product section (rộng hơn homepage — 12-18 SP) */
.kvc-products-section {
  background: var(--kvc-bg-soft);
  padding: 48px 0;
}
.kvc-products-section--cream { background: var(--kvc-cream); }
.kvc-products-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.kvc-products-section__title {
  font-size: clamp(20px, 2.3vw, 26px);
  font-weight: 700;
  color: var(--kvc-charcoal);
  margin: 0;
}
.kvc-products-section__count {
  font-size: 13px;
  color: var(--kvc-slate);
  background: var(--kvc-white);
  padding: 6px 14px;
  border-radius: var(--kvc-radius-pill);
  border: 1px solid var(--kvc-border);
  font-weight: 600;
}
.kvc-products-section__count b { color: var(--kvc-primary); }

/* Mid-page CTA banner */
.kvc-cta-mid {
  margin: 40px 0;
  padding: 32px 36px;
  border-radius: var(--kvc-radius-card);
  background:
    radial-gradient(circle at 90% 50%, rgba(245, 158, 11, 0.32), transparent 60%),
    linear-gradient(135deg, var(--kvc-primary), var(--kvc-primary-deep));
  color: var(--kvc-white);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  box-shadow: var(--kvc-shadow-lg);
  position: relative;
  overflow: hidden;
}
.kvc-cta-mid::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--kvc-accent), var(--kvc-accent-deep));
}
.kvc-cta-mid__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kvc-accent-light);
  margin-bottom: 6px;
}
.kvc-cta-mid h3 {
  color: var(--kvc-white);
  font-size: clamp(18px, 2vw, 24px);
  margin-bottom: 4px;
}
.kvc-cta-mid__desc {
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  margin: 0;
  line-height: 1.55;
}
.kvc-cta-mid__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .kvc-cta-mid {
    grid-template-columns: 1fr;
    padding: 24px;
  }
}

/* Page features mini (3-4 cards riêng cho mỗi nhóm) */
.kvc-page-features {
  background: var(--kvc-white);
  padding: 48px 0;
}
.kvc-page-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 820px) { .kvc-page-features__grid { grid-template-columns: 1fr; } }

.kvc-page-features__card {
  display: flex;
  gap: 14px;
  padding: 22px 20px;
  background: var(--kvc-cream-soft);
  border: 1px solid var(--kvc-border-soft);
  border-left: 3px solid var(--kvc-primary);
  border-radius: var(--kvc-radius-card);
  transition: all .25s;
}
.kvc-page-features__card:hover {
  background: var(--kvc-white);
  transform: translateX(4px);
  box-shadow: var(--kvc-shadow-sm);
  border-left-color: var(--kvc-accent);
}
.kvc-page-features__icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  background: var(--kvc-white);
  border: 1.5px solid var(--kvc-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kvc-primary);
}
.kvc-page-features__icon svg { width: 22px; height: 22px; }
.kvc-page-features__title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--kvc-charcoal);
  margin-bottom: 4px;
}
.kvc-page-features__desc {
  font-size: 12.5px;
  color: var(--kvc-slate);
  line-height: 1.5;
  margin: 0;
}

/* ================================================================
 * Deep-dive section (SEO content chi tiết các nhóm sản phẩm)
 * ================================================================ */
.kvc-deep-dive {
  background: var(--kvc-cream-soft);
  padding: 56px 0;
  border-top: 1px solid var(--kvc-border-soft);
}
.kvc-deep-dive__intro {
  max-width: 820px;
  margin: 0 auto 36px;
  text-align: center;
}
.kvc-deep-dive__intro p {
  font-size: 15px;
  color: var(--kvc-graphite);
  line-height: 1.7;
}
.kvc-deep-dive__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 900px) {
  .kvc-deep-dive__grid { grid-template-columns: 1fr; }
}
.kvc-deep-dive__card {
  background: var(--kvc-white);
  border: 1px solid var(--kvc-border);
  border-left: 4px solid var(--kvc-primary);
  border-radius: var(--kvc-radius-card);
  padding: 26px 24px;
  transition: all .25s;
}
.kvc-deep-dive__card:hover {
  border-left-color: var(--kvc-accent);
  box-shadow: var(--kvc-shadow-md);
  transform: translateY(-3px);
}
.kvc-deep-dive__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.kvc-deep-dive__icon {
  width: 40px; height: 40px;
  background: var(--kvc-primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kvc-white);
  flex-shrink: 0;
  font-size: 22px;
}
.kvc-deep-dive__icon svg { width: 22px; height: 22px; color: var(--kvc-white); }
.kvc-deep-dive__card h3 {
  font-size: 18px;
  color: var(--kvc-charcoal);
  margin: 0;
  font-weight: 700;
}
.kvc-deep-dive__desc {
  font-size: 13.5px;
  color: var(--kvc-graphite);
  line-height: 1.65;
  margin-bottom: 14px;
}
.kvc-deep-dive__subcat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.kvc-deep-dive__subcat-list li {
  padding: 10px 0;
  border-top: 1px dashed var(--kvc-border-soft);
  font-size: 13px;
  color: var(--kvc-graphite);
  line-height: 1.6;
}
.kvc-deep-dive__subcat-list li:last-child { border-bottom: 1px dashed var(--kvc-border-soft); }
.kvc-deep-dive__subcat-list li strong {
  display: block;
  color: var(--kvc-primary-deep);
  font-weight: 700;
  margin-bottom: 3px;
  font-size: 13.5px;
}
.kvc-deep-dive__card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  color: var(--kvc-primary);
  font-weight: 700;
  font-size: 13px;
  border-bottom: 1px solid transparent;
  transition: all .2s;
}
.kvc-deep-dive__card-link:hover {
  border-bottom-color: var(--kvc-primary);
  gap: 8px;
}

/* ================================================================
 * FAQ section
 * ================================================================ */
.kvc-faq {
  background: var(--kvc-white);
  padding: 56px 0;
}
.kvc-faq__list {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kvc-faq__item {
  background: var(--kvc-cream-soft);
  border: 1px solid var(--kvc-border-soft);
  border-radius: var(--kvc-radius-card);
  padding: 20px 24px;
  transition: all .2s;
}
.kvc-faq__item:hover {
  border-color: var(--kvc-accent);
  background: var(--kvc-white);
  box-shadow: var(--kvc-shadow-sm);
}
.kvc-faq__q {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--kvc-charcoal);
  margin-bottom: 10px;
  line-height: 1.4;
}
.kvc-faq__q::before {
  content: "Q";
  flex-shrink: 0;
  width: 26px; height: 26px;
  background: var(--kvc-primary);
  color: var(--kvc-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  margin-top: 1px;
}
.kvc-faq__a {
  font-size: 14px;
  color: var(--kvc-graphite);
  line-height: 1.7;
  margin: 0 0 0 38px;
}
.kvc-faq__a strong { color: var(--kvc-charcoal); }

/* ================================================================
 * Step 6 — Trang Thiết kế & Thi công
 * ================================================================ */
.kvc-step-rows {
  background: var(--kvc-white);
  padding: 56px 0;
}
.kvc-step-row {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 56px;
}
.kvc-step-row:nth-child(even) { grid-template-columns: 1.1fr 1fr; }
.kvc-step-row:nth-child(even) .kvc-step-row__visual { order: 2; }
.kvc-step-row:nth-child(even) .kvc-step-row__content { order: 1; }
.kvc-step-row:last-child { margin-bottom: 0; }

.kvc-step-row__visual {
  aspect-ratio: 4/3;
  border-radius: var(--kvc-radius-card);
  background:
    radial-gradient(circle at 30% 30%, rgba(245, 158, 11, 0.22), transparent 60%),
    linear-gradient(135deg, var(--kvc-primary-bg), var(--kvc-cream));
  border: 1px solid var(--kvc-border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 76px;
  color: var(--kvc-primary);
  position: relative;
  overflow: hidden;
  box-shadow: var(--kvc-shadow-sm);
}
.kvc-step-row__visual::after {
  content: attr(data-label);
  position: absolute;
  bottom: 12px; left: 12px; right: 12px;
  text-align: center;
  font-size: 11.5px;
  font-style: italic;
  background: rgba(31, 41, 55, 0.85);
  padding: 6px 10px;
  border-radius: 5px;
  color: var(--kvc-accent-light);
}
.kvc-step-row__num {
  display: inline-block;
  font-size: 14px;
  font-weight: 800;
  color: var(--kvc-primary);
  background: var(--kvc-primary-light);
  padding: 6px 14px;
  border-radius: var(--kvc-radius-pill);
  margin-bottom: 14px;
  letter-spacing: 0.1em;
}
.kvc-step-row__title {
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 800;
  color: var(--kvc-charcoal);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.kvc-step-row__desc {
  font-size: 15px;
  color: var(--kvc-graphite);
  line-height: 1.7;
  margin-bottom: 16px;
}
.kvc-step-row__highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.kvc-step-row__highlights li {
  font-size: 13.5px;
  color: var(--kvc-graphite);
  padding-left: 26px;
  position: relative;
  line-height: 1.55;
}
.kvc-step-row__highlights li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  width: 18px; height: 18px;
  background: var(--kvc-primary);
  color: var(--kvc-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 900px) {
  .kvc-step-row, .kvc-step-row:nth-child(even) { grid-template-columns: 1fr; gap: 24px; margin-bottom: 36px; }
  .kvc-step-row:nth-child(even) .kvc-step-row__visual { order: 0; }
  .kvc-step-row:nth-child(even) .kvc-step-row__content { order: 0; }
  .kvc-step-row__visual { max-height: 260px; }
}

/* Commitments */
.kvc-commitments {
  background: var(--kvc-cream);
  padding: 56px 0;
}
.kvc-commitments__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.kvc-commitments__card {
  background: var(--kvc-white);
  border: 1px solid var(--kvc-border-soft);
  border-radius: var(--kvc-radius-card);
  padding: 24px 22px;
  text-align: center;
  transition: all .25s;
}
.kvc-commitments__card:hover {
  border-color: var(--kvc-primary);
  transform: translateY(-4px);
  box-shadow: var(--kvc-shadow-md);
}
.kvc-commitments__icon {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, var(--kvc-primary), var(--kvc-primary-deep));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kvc-white);
  box-shadow: var(--kvc-shadow-blue);
}
.kvc-commitments__icon svg { width: 26px; height: 26px; }
.kvc-commitments__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--kvc-charcoal);
  margin-bottom: 8px;
}
.kvc-commitments__desc {
  font-size: 12.5px;
  color: var(--kvc-slate);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 900px) { .kvc-commitments__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .kvc-commitments__grid { grid-template-columns: 1fr; } }

/* Pricing */
.kvc-pricing {
  background: var(--kvc-white);
  padding: 56px 0;
}
.kvc-pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 900px) { .kvc-pricing__grid { grid-template-columns: 1fr; max-width: 480px; } }

.kvc-pricing__card {
  background: var(--kvc-white);
  border: 2px solid var(--kvc-border);
  border-radius: var(--kvc-radius-card);
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all .25s;
}
.kvc-pricing__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--kvc-shadow-md);
  border-color: var(--kvc-primary);
}
.kvc-pricing__card--featured {
  border-color: var(--kvc-accent);
  background: linear-gradient(180deg, var(--kvc-cream-soft), var(--kvc-white));
  transform: scale(1.03);
  box-shadow: var(--kvc-shadow-lg);
  z-index: 2;
}
.kvc-pricing__card--featured:hover {
  transform: scale(1.05) translateY(-2px);
  border-color: var(--kvc-accent-deep);
}
.kvc-pricing__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--kvc-accent);
  color: var(--kvc-charcoal);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 5px 16px;
  border-radius: var(--kvc-radius-pill);
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}
.kvc-pricing__tier {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--kvc-slate);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.kvc-pricing__name {
  font-size: 22px;
  font-weight: 800;
  color: var(--kvc-charcoal);
  margin-bottom: 12px;
}
.kvc-pricing__price {
  font-size: 32px;
  font-weight: 800;
  color: var(--kvc-primary);
  margin-bottom: 4px;
  line-height: 1.1;
}
.kvc-pricing__price-unit {
  font-size: 13px;
  color: var(--kvc-slate);
  margin-bottom: 18px;
}
.kvc-pricing__features {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  gap: 8px;
}
.kvc-pricing__features li {
  font-size: 13px;
  color: var(--kvc-graphite);
  padding-left: 24px;
  position: relative;
  line-height: 1.5;
}
.kvc-pricing__features li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 1px;
  width: 17px; height: 17px;
  background: var(--kvc-success);
  color: var(--kvc-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
}
.kvc-pricing__features li.is-disabled { color: var(--kvc-slate-light); }
.kvc-pricing__features li.is-disabled::before { background: var(--kvc-border); color: var(--kvc-slate-light); content: "—"; }
.kvc-pricing__cta {
  margin-top: auto;
}

/* ================================================================
 * Step 7 — Trang Liên hệ Báo giá (form đầy đủ)
 * ================================================================ */
.kvc-quote-page {
  background: var(--kvc-bg-soft);
  padding: 48px 0 56px;
}
.kvc-quote-page__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 980px) {
  .kvc-quote-page__grid { grid-template-columns: 1fr; gap: 24px; }
}

/* Full form */
.kvc-full-form {
  background: var(--kvc-white);
  border-radius: var(--kvc-radius-card);
  padding: 32px 32px 28px;
  box-shadow: var(--kvc-shadow-md);
  border-top: 4px solid var(--kvc-accent);
}
.kvc-full-form__title {
  font-size: 22px;
  font-weight: 800;
  color: var(--kvc-charcoal);
  margin-bottom: 4px;
}
.kvc-full-form__sub {
  font-size: 13.5px;
  color: var(--kvc-slate);
  margin-bottom: 24px;
}
.kvc-form-section {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px dashed var(--kvc-border);
}
.kvc-form-section:last-of-type { border-bottom: none; }
.kvc-form-section__title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--kvc-primary);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.kvc-form-grid {
  display: grid;
  gap: 14px;
}
.kvc-form-grid--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .kvc-form-grid--2 { grid-template-columns: 1fr; } }
.kvc-form-grid textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 10px 13px;
  border: 1px solid var(--kvc-border);
  border-radius: var(--kvc-radius-btn);
  color: var(--kvc-charcoal);
  background: var(--kvc-white);
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
  resize: vertical;
  min-height: 100px;
  line-height: 1.5;
}
.kvc-form-grid textarea:focus {
  outline: none;
  border-color: var(--kvc-primary);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.16);
}

/* File upload */
.kvc-file-upload {
  display: block;
  border: 2px dashed var(--kvc-border);
  border-radius: var(--kvc-radius-card);
  padding: 22px 18px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  background: var(--kvc-cream-soft);
}
.kvc-file-upload:hover {
  border-color: var(--kvc-primary);
  background: var(--kvc-primary-bg);
}
.kvc-file-upload.is-active {
  border-color: var(--kvc-success);
  background: rgba(22, 163, 74, 0.06);
}
.kvc-file-upload input[type="file"] {
  display: none;
}
.kvc-file-upload__icon {
  font-size: 36px;
  margin-bottom: 8px;
}
.kvc-file-upload__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--kvc-charcoal);
  margin-bottom: 4px;
}
.kvc-file-upload__hint {
  font-size: 12px;
  color: var(--kvc-slate);
}
.kvc-file-upload__filename {
  font-size: 13px;
  font-weight: 600;
  color: var(--kvc-success);
  margin-top: 8px;
  display: none;
}
.kvc-file-upload.is-active .kvc-file-upload__filename { display: block; }
.kvc-file-upload__error {
  font-size: 12px;
  color: var(--kvc-danger);
  margin-top: 8px;
  display: none;
}

/* Field error */
.kvc-form-field.has-error input,
.kvc-form-field.has-error select,
.kvc-form-field.has-error textarea {
  border-color: var(--kvc-danger);
}
.kvc-form-field__error {
  font-size: 12px;
  color: var(--kvc-danger);
  margin-top: 4px;
  display: none;
}
.kvc-form-field.has-error .kvc-form-field__error { display: block; }

/* Dual CTA */
.kvc-cta-dual {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
@media (max-width: 540px) { .kvc-cta-dual { grid-template-columns: 1fr; } }

/* Form success message */
.kvc-form-success {
  display: none;
  background: rgba(22, 163, 74, 0.10);
  border: 1px solid var(--kvc-success);
  border-radius: var(--kvc-radius-card);
  padding: 18px 22px;
  margin-bottom: 18px;
  color: var(--kvc-success);
  font-weight: 600;
}
.kvc-form-success.is-show { display: block; }

/* Sidebar */
.kvc-quote-sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 80px;
}
@media (max-width: 980px) { .kvc-quote-sidebar { position: static; } }

.kvc-sidebar-card {
  background: var(--kvc-white);
  border: 1px solid var(--kvc-border-soft);
  border-radius: var(--kvc-radius-card);
  padding: 22px 22px;
  box-shadow: var(--kvc-shadow-sm);
}
.kvc-sidebar-card--dark {
  background: linear-gradient(135deg, var(--kvc-primary-deep), #172554);
  color: var(--kvc-white);
  border-color: var(--kvc-primary-deep);
  position: relative;
  overflow: hidden;
}
.kvc-sidebar-card--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(245, 158, 11, 0.22), transparent 60%);
  pointer-events: none;
}
.kvc-sidebar-card__title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--kvc-primary);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.kvc-sidebar-card--dark .kvc-sidebar-card__title {
  color: var(--kvc-accent-light);
}
.kvc-sidebar-hotline {
  font-size: 32px;
  font-weight: 800;
  color: var(--kvc-white);
  letter-spacing: 0.01em;
  text-decoration: none;
  display: block;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}
.kvc-sidebar-hours {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
  position: relative;
  z-index: 1;
}

.kvc-sidebar-zalo {
  display: flex;
  align-items: center;
  gap: 14px;
}
.kvc-sidebar-zalo__qr {
  width: 80px; height: 80px;
  background: var(--kvc-white);
  border: 2px solid var(--kvc-zalo);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: var(--kvc-zalo);
  flex-shrink: 0;
}
.kvc-sidebar-zalo__text {
  flex: 1;
}
.kvc-sidebar-zalo__title {
  font-weight: 700;
  color: var(--kvc-charcoal);
  margin-bottom: 4px;
  font-size: 14px;
}
.kvc-sidebar-zalo__desc {
  font-size: 12.5px;
  color: var(--kvc-slate);
  line-height: 1.5;
  margin: 0 0 8px;
}

.kvc-sidebar-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 11px;
}
.kvc-sidebar-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13.5px;
  color: var(--kvc-graphite);
  line-height: 1.55;
}
.kvc-sidebar-checklist li::before {
  content: "✓";
  flex-shrink: 0;
  width: 22px; height: 22px;
  background: var(--kvc-accent);
  color: var(--kvc-charcoal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  margin-top: 0;
}
.kvc-sidebar-checklist li strong {
  display: block;
  color: var(--kvc-charcoal);
  font-weight: 700;
  margin-bottom: 1px;
}

.kvc-sidebar-info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 13.5px;
  color: var(--kvc-graphite);
  border-bottom: 1px dashed var(--kvc-border-soft);
}
.kvc-sidebar-info-row:last-child { border-bottom: none; padding-bottom: 0; }
.kvc-sidebar-info-row svg {
  width: 18px; height: 18px;
  color: var(--kvc-primary);
  flex-shrink: 0;
}
.kvc-sidebar-info-row strong {
  color: var(--kvc-charcoal);
  font-weight: 700;
}



/* ================================================================
 * Category navigation bar (rendered before subheader)
 * ================================================================ */
.kvc-catnav {
  background: var(--kvc-primary-deep, #1E3A8A);
  color: #fff;
  border-bottom: 2px solid var(--kvc-accent, #F59E0B);
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  position: relative;
  z-index: 50;
}
.kvc-catnav__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  max-width: 1240px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.kvc-catnav__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.kvc-catnav__label {
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--kvc-accent-light, #FCD34D);
  white-space: nowrap;
}
.kvc-catnav__toggle {
  display: none;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: var(--kvc-accent-light, #FCD34D);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}
.kvc-catnav__toggle:hover {
  background: rgba(245, 158, 11, 0.32);
}
.kvc-catnav__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  flex: 1;
}
.kvc-catnav__link {
  padding: 5px 12px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  transition: all 0.2s;
  border: 1px solid transparent;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.4;
}
.kvc-catnav__link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.22);
}
.kvc-catnav__link.is-current {
  background: var(--kvc-accent, #F59E0B);
  color: #1F2937 !important;
  font-weight: 700;
  border-color: var(--kvc-accent, #F59E0B);
}
.kvc-catnav__link.is-current:hover {
  background: var(--kvc-accent-deep, #D97706);
  color: #1F2937 !important;
}

@media (max-width: 900px) {
  .kvc-catnav__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 14px;
  }
  .kvc-catnav__bar {
    justify-content: space-between;
    width: 100%;
    padding: 4px 0;
  }
  .kvc-catnav__toggle {
    display: inline-flex;
  }
  .kvc-catnav__links {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 10px 0 6px;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 6px;
  }
  .kvc-catnav.is-open .kvc-catnav__links {
    display: flex;
  }
  .kvc-catnav__link {
    text-align: left;
    padding: 9px 14px;
    width: 100%;
    font-size: 13px;
  }
}