/* KVZ — nền tảng chung cho mọi khối nhúng (token + chữ + nút), bám 1:1 theo b2b style.css */
.kvz {
  --red: #EB143C; --red-dark: #C4002A; --teal: #05AF9B; --teal-light: #4BBEB4;
  --gold: #FCB941; --gold-pale: #FFF8E7; --green: #008C46;
  --ink: #202020; --ink2: #2A2A2A; --cream: #FAF8F4; --grey-warm: #F2F0EB; --grey-line: #E6E3DC;
  --muted: #6B6B6B; --muted-light: #8C8478;
  --gradient: linear-gradient(135deg, #EB143C 0%, #FCB941 50%, #05AF9B 100%);
  font-family: 'Be Vietnam Pro', 'Roboto', system-ui, sans-serif;
  color: var(--ink); line-height: 1.6; font-size: 16px; font-weight: 300;
  -webkit-font-smoothing: antialiased; text-align: left;
}
/* :where() = độ ưu tiên 0 → nhiều snippet trên cùng trang không reset đè style của nhau */
:where(.kvz) *, :where(.kvz) *::before, :where(.kvz) *::after { box-sizing: border-box; margin: 0; padding: 0; }
.kvz img { max-width: 100%; height: auto; display: block; } /* height:auto để aspect-ratio thắng thuộc tính height="" */
.kvz a { text-decoration: none; color: inherit; }
.kvz ul, .kvz ol { list-style: none; }
.kvz .ti { line-height: 1; }
.kvz .nw { white-space: nowrap; } /* giữ cụm từ không bị ngắt dòng giữa chừng */
.kvz .kvz-wrap { max-width: 1360px; margin: 0 auto; padding: 0 40px; } /* = b2b --pad-x: nội dung tối đa 1280px + lề 40px */
.kvz .kvz-sec { padding: 72px 0; }
.kvz .kvz-sec--cream { background: var(--cream); }
.kvz .kvz-sec--ink { background: var(--ink); color: #fff; }

/* Chữ — eyebrow / title / sub y hệt b2b (.s-eyebrow / .s-title / .s-sub) */
.kvz .kvz-eyebrow { font-size: 10px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--red); margin-bottom: 14px; display: inline-flex; align-items: center; gap: 8px; }
.kvz .kvz-eyebrow::before { content: ''; width: 28px; height: 4px; background: var(--kvi-gach-ngang) center / 100% 100% no-repeat; } /* icon Gạch ngang — "kết nối các giá trị" */
.kvz .kvz-title { font-size: 38px; font-weight: 200; color: var(--ink); line-height: 1.2 !important; margin-bottom: 16px; letter-spacing: .5px; font-family: inherit !important; }
.kvz .kvz-title em { color: var(--red); font-style: normal; font-weight: 500; }
.kvz .kvz-sub { font-size: 16px; color: var(--muted); font-weight: 300; line-height: 1.9; max-width: 620px; text-wrap: pretty; }
.kvz .kvz-head { margin-bottom: 44px; }
.kvz .kvz-head--center { text-align: center; }
.kvz .kvz-head--center .kvz-sub { margin: 0 auto; }
.kvz .kvz-sec--ink .kvz-title { color: #fff; }
.kvz .kvz-sec--ink .kvz-sub { color: rgba(255,255,255,.62); }

/* Nút — .btn-primary / .btn-outline của b2b */
.kvz .kvz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--red); color: #fff; border: 1px solid var(--red);
  padding: 14px 32px; border-radius: 4px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; line-height: 1.2;
  box-shadow: 0 8px 20px rgba(235,20,60,.22);
  transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.kvz .kvz-btn i { font-size: 16px; }
.kvz .kvz-btn:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(235,20,60,.3); }
.kvz .kvz-btn--outline { background: #fff; color: var(--ink); border-color: var(--grey-line); box-shadow: none; }
.kvz .kvz-btn--outline:hover { background: #fff; color: var(--red); border-color: var(--red); box-shadow: none; }
.kvz .kvz-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); box-shadow: none; }
.kvz .kvz-btn--ghost:hover { background: #fff; color: var(--red); border-color: #fff; box-shadow: none; }
.kvz .kvz-btn--gold { background: var(--gold); border-color: var(--gold); color: var(--ink); box-shadow: 0 8px 20px rgba(252,185,65,.28); }
.kvz .kvz-btn--gold:hover { background: #fff; border-color: #fff; color: var(--ink); box-shadow: 0 12px 26px rgba(252,185,65,.35); }
.kvz .kvz-btn--sm { padding: 10px 20px; font-size: 11px; letter-spacing: 1.5px; }
.kvz .kvz-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); }
.kvz .kvz-link i { transition: transform .2s; }
.kvz .kvz-link:hover i { transform: translateX(4px); }

/* Pill / tag — .market-tag của b2b */
.kvz .kvz-pill { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--grey-line); border-radius: 100px; padding: 6px 14px; font-size: 11px; color: var(--muted); letter-spacing: .3px; transition: border-color .2s, color .2s, background .2s; }
.kvz .kvz-pill::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--red); }

/* Page header dùng chung cho trang con (Giới thiệu / Sản phẩm / Liên hệ / Truyền thông) */
.kvz .kvz-phead { background: var(--cream); position: relative; overflow: hidden; padding: 64px 0 56px; }
.kvz .kvz-phead::before { content: ''; position: absolute; top: -140px; right: -120px; width: 540px; height: 540px; background: radial-gradient(circle, rgba(252,185,65,.18) 0%, transparent 68%); pointer-events: none; }
.kvz .kvz-phead::after { content: ''; position: absolute; bottom: -180px; left: -160px; width: 440px; height: 440px; background: radial-gradient(circle, rgba(5,175,155,.10) 0%, transparent 68%); pointer-events: none; }
.kvz .kvz-phead .kvz-wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; }
.kvz .kvz-phead h1 { font-size: 48px; font-weight: 200; line-height: 1.15 !important; letter-spacing: .3px; margin-bottom: 20px; color: var(--ink); font-family: inherit !important; }
.kvz .kvz-phead h1 em { color: var(--red); font-style: normal; font-weight: 500; }
.kvz .kvz-phead-art { position: relative; justify-self: end; width: 100%; max-width: 360px; aspect-ratio: 1; }
.kvz .kvz-phead-art img { position: absolute; }
.kvz .kvz-phead-art .a1 { width: 62%; top: 0; right: 0; animation: kvzFloat 6s ease-in-out infinite; }
.kvz .kvz-phead-art .a2 { width: 38%; bottom: 4%; left: 6%; animation: kvzFloat 6s ease-in-out 1.4s infinite; }
@keyframes kvzFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Hiệu ứng hiện dần — giống .reveal của b2b */
.kvz .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.kvz .reveal.visible { opacity: 1; transform: none; }
.kvz .d1 { transition-delay: .1s; } .kvz .d2 { transition-delay: .2s; } .kvz .d3 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .kvz .reveal { opacity: 1; transform: none; transition: none; }
  .kvz *, .kvz *::before { animation: none !important; }
}

@media (max-width: 1024px) {
  .kvz .kvz-title { font-size: 32px; }
  .kvz .kvz-phead h1 { font-size: 38px; }
}
@media (max-width: 768px) {
  .kvz .kvz-wrap { padding: 0 20px; }
  .kvz .kvz-sec { padding: 56px 0; }
  .kvz .kvz-title { font-size: 28px; }
  .kvz .kvz-head { margin-bottom: 32px; }
  .kvz .kvz-phead { padding: 44px 0 40px; }
  .kvz .kvz-phead .kvz-wrap { grid-template-columns: 1fr; gap: 0; }
  .kvz .kvz-phead h1 { font-size: 30px; }
  .kvz .kvz-phead-art { display: none; }
}

/* Ngắt dòng tiêu đề cân đối — tránh chữ mồ côi kiểu "cộng / đồng", "mỗi / ngày" */
.kvz h1, .kvz h2, .kvz h3, .kvz .kvz-title { text-wrap: balance; }
.kvz .kvz-title em, .kvz .kvz-phead h1 em, .kvz-hero h1 em { white-space: nowrap; } /* cụm nhấn mạnh không bị tách đôi */

/* ===== BỘ ICON BIỂU TƯỢNG KYMVIET — sinh từ brand/KymvietBrand/brand/assets lúc build ===== */
.kvz {
  --kvi-trai-tim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='22.34 22.72 91.51 91.51'%3E %3Cpath d='M68.09,108.16 C134.19,90.43 123.79,2.00 68.09,36.85 C12.40,2.00 2.00,90.43 68.09,108.16 M68.09,95.50 C82.01,90.98 94.07,81.64 99.36,67.57 C107.70,45.39 96.48,33.42 74.54,47.15 C70.29,50.13 66.00,50.08 61.65,47.15 C39.71,33.42 28.48,45.39 36.83,67.57 C42.11,81.64 54.17,90.98 68.09,95.50 ' fill='%23ff2e3e' fill-rule='evenodd'%3E%3C/path%3E %3C/svg%3E");
  --kvi-chu-thap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.00 2.00 79.37 79.37'%3E %3Cpath d='M35.07,35.07 L48.30,35.07 L48.30,2.00 L35.07,2.00 Z ' fill='%23ffb641' fill-rule='evenodd'%3E%3C/path%3E %3Cpath d='M48.30,48.30 L81.37,48.30 L81.37,35.07 L48.30,35.07 Z ' fill='%230cb7a0' fill-rule='evenodd'%3E%3C/path%3E %3Cpath d='M35.07,48.30 L48.30,48.30 L48.30,81.37 L35.07,81.37 Z ' fill='%23ff2e3e' fill-rule='evenodd'%3E%3C/path%3E %3Cpath d='M35.07,48.30 L2.00,48.30 L2.00,35.07 L35.07,35.07 Z ' fill='%23008d41' fill-rule='evenodd'%3E%3C/path%3E %3C/svg%3E");
  --kvi-dau-nhan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.00 2.00 79.37 79.37'%3E %3Cpath d='M35.07,35.07 L48.30,35.07 L48.30,2.00 L35.07,2.00 Z ' fill='%23ffb641' fill-rule='evenodd'%3E%3C/path%3E %3Cpath d='M48.30,48.30 L81.37,48.30 L81.37,35.07 L48.30,35.07 Z ' fill='%230cb7a0' fill-rule='evenodd'%3E%3C/path%3E %3Cpath d='M35.07,48.30 L48.30,48.30 L48.30,81.37 L35.07,81.37 Z ' fill='%23ff2e3e' fill-rule='evenodd'%3E%3C/path%3E %3Cpath d='M35.07,48.30 L2.00,48.30 L2.00,35.07 L35.07,35.07 Z ' fill='%23008d41' fill-rule='evenodd'%3E%3C/path%3E %3Cpath d='M51.04,41.69 L41.69,51.04 L65.07,74.43 L74.43,65.07 Z ' fill='%23ffb641' fill-rule='evenodd'%3E%3C/path%3E %3Cpath d='M41.69,51.04 L32.33,41.69 L8.95,65.07 L18.30,74.43 Z ' fill='%230cb7a0' fill-rule='evenodd'%3E%3C/path%3E %3Cpath d='M41.69,32.33 L32.33,41.69 L8.95,18.30 L18.30,8.95 Z ' fill='%23ff2e3e' fill-rule='evenodd'%3E%3C/path%3E %3Cpath d='M51.04,41.69 L41.69,32.33 L65.07,8.95 L74.43,18.30 Z ' fill='%23008d41' fill-rule='evenodd'%3E%3C/path%3E %3C/svg%3E");
  --kvi-ngoac-kep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8.62 2.14 85.04 85.04'%3E %3Cpath d='M52.72,39.69 C46.99,50.06 35.98,57.11 23.30,57.20 C18.49,57.23 14.62,61.15 14.65,65.96 C14.68,70.76 18.60,74.64 23.41,74.60 C39.66,74.49 53.24,60.74 53.14,44.49 C53.12,42.85 52.98,41.25 52.72,39.69 M23.49,87.18 C11.74,87.25 2.16,77.79 2.08,66.04 C2.00,54.29 11.47,44.70 23.21,44.63 C34.97,44.55 44.43,34.96 44.35,23.22 C44.27,11.46 34.68,2.00 22.94,2.14 C46.40,2.04 65.55,20.94 65.71,44.40 C65.86,67.55 46.73,87.01 23.49,87.18 ' fill='%23008d41' fill-rule='evenodd'%3E%3C/path%3E %3C/svg%3E");
  --kvi-vuong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.83 -1.82 84.13 84.13'%3E %3Cpath d='M2.00,2.00 L78.47,2.00 L78.47,78.48 L2.00,78.48 Z M14.00,14.01 L66.46,14.01 L66.46,66.47 L14.00,66.47 Z ' fill='%23ffb641' fill-rule='evenodd'%3E%3C/path%3E %3C/svg%3E");
  --kvi-tron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-0.47 -0.47 87.14 87.14'%3E %3Cpath d='M43.11,2.00 C65.81,2.00 84.21,20.40 84.21,43.10 C84.21,65.80 65.81,84.20 43.11,84.20 C20.41,84.20 2.00,65.80 2.00,43.10 C2.00,20.40 20.41,2.00 43.11,2.00 M43.11,14.68 C58.80,14.68 71.53,27.40 71.53,43.10 C71.53,58.80 58.80,71.52 43.11,71.52 C27.41,71.52 14.68,58.80 14.68,43.10 C14.68,27.40 27.41,14.68 43.11,14.68 ' fill='%230cb7a0' fill-rule='evenodd'%3E%3C/path%3E %3C/svg%3E");
  --kvi-chuyen-mau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.7 89.0'%3E %3Cpath d='M2.00,2.00 L7.67,2.00 L7.67,23.25 L2.00,23.25 Z ' fill='%23ff2e3e' fill-rule='evenodd'%3E%3C/path%3E %3Cpath d='M2.00,44.50 L7.67,44.50 L7.67,65.75 L2.00,65.75 Z ' fill='%23ffb641' fill-rule='evenodd'%3E%3C/path%3E %3Cpath d='M2.00,44.50 L7.67,44.50 L7.67,23.25 L2.00,23.25 Z ' fill='%23008d41' fill-rule='evenodd'%3E%3C/path%3E %3Cpath d='M2.00,87.00 L7.67,87.00 L7.67,65.75 L2.00,65.75 Z ' fill='%230cb7a0' fill-rule='evenodd'%3E%3C/path%3E %3C/svg%3E");
  --kvi-gach-ngang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 145.7 9.7'%3E %3Cpath d='M2.00,7.67 L37.43,7.67 L37.43,2.00 L2.00,2.00 Z ' fill='%23ff2e3e' fill-rule='evenodd'%3E%3C/path%3E %3Cpath d='M72.86,7.67 L108.29,7.67 L108.29,2.00 L72.86,2.00 Z ' fill='%23ffb641' fill-rule='evenodd'%3E%3C/path%3E %3Cpath d='M72.86,7.67 L37.43,7.67 L37.43,2.00 L72.86,2.00 Z ' fill='%23008d41' fill-rule='evenodd'%3E%3C/path%3E %3Cpath d='M143.73,7.67 L108.30,7.67 L108.30,2.00 L143.73,2.00 Z ' fill='%230cb7a0' fill-rule='evenodd'%3E%3C/path%3E %3C/svg%3E");
  --kvi-chat-luong: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='6.25 6.30 87.50 87.50'%3E %3Cpath style='fill:%23008B44' d='M39.3,93.8c-12.1,0.1-22-9.7-22-21.8C17.2,59.9,26.9,50,39,50c12.1-0.1,21.8-9.9,21.7-22c-0.1-12.1-9.9-21.8-22-21.7c24.2-0.1,43.9,19.3,44,43.5C82.9,73.6,63.2,93.6,39.3,93.8 M69.4,44.9c-5.9,10.7-17.2,17.9-30.3,18c-4.9,0-8.9,4.1-8.9,9c0,4.9,4.1,8.9,9,8.9c16.7-0.1,30.7-14.3,30.6-31C69.8,48.1,69.6,46.5,69.4,44.9z'%3E%3C/path%3E %3C/svg%3E");
  --kvi-hop-tac-1: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='4.90 4.90 90.20 90.20'%3E %3Cg%3E %26%23x9%3B%3Crect x='42.5' y='4.9' style='fill:%23FCB833' width='15' height='37.6'%3E%3C/rect%3E %26%23x9%3B%3Crect x='57.5' y='42.5' style='fill:%2300AD9C' width='37.6' height='15'%3E%3C/rect%3E %26%23x9%3B%3Crect x='42.5' y='57.5' style='fill:%23EC1846' width='15' height='37.6'%3E%3C/rect%3E %26%23x9%3B%3Crect x='4.9' y='42.5' style='fill:%23008B44' width='37.6' height='15'%3E%3C/rect%3E %3C/g%3E %3C/svg%3E");
  --kvi-hop-tac-2: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0.00 0.00 100.00 100.00'%3E %3Cg%3E %26%23x9%3B%3Crect x='42.6' y='5.8' style='fill:%23FCB833' width='14.7' height='36.8'%3E%3C/rect%3E %26%23x9%3B%3Crect x='57.4' y='42.6' style='fill:%2300AD9C' width='36.8' height='14.7'%3E%3C/rect%3E %26%23x9%3B%3Crect x='42.6' y='57.4' style='fill:%23EC1846' width='14.7' height='36.8'%3E%3C/rect%3E %26%23x9%3B%3Crect x='5.8' y='42.6' style='fill:%23008B44' width='36.8' height='14.7'%3E%3C/rect%3E %26%23x9%3B%3Crect x='60.9' y='49.8' transform='matrix(0.7071 -0.7072 0.7072 0.7071 -28.2618 68.2366)' style='fill:%23FCB833' width='14.7' height='36.8'%3E%3C/rect%3E %26%23x9%3B%3Crect x='13.4' y='60.9' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -38.9398 42.4501)' style='fill:%2300AD9C' width='36.8' height='14.7'%3E%3C/rect%3E %26%23x9%3B%3Crect x='24.4' y='13.4' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -13.1606 31.7693)' style='fill:%23EC1846' width='14.7' height='36.8'%3E%3C/rect%3E %26%23x9%3B%3Crect x='49.8' y='24.4' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -2.483 57.5498)' style='fill:%23008B44' width='36.8' height='14.7'%3E%3C/rect%3E %3C/g%3E %3C/svg%3E");
  --kvi-nhan-van: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='4.39 4.42 91.22 91.22'%3E %3Cpath style='fill:%23EC1846' d='M50,76.9c13.9-4.5,25.9-13.8,31.2-27.8c8.3-22.1-2.9-34-24.7-20.4c-4.2,3-8.5,2.9-12.8,0C21.7,15,10.5,27,18.8,49.1C24.1,63.1,36.1,72.4,50,76.9 M50,89.6c65.9-17.7,55.5-105.8,0-71.1C-5.5-16.3-15.9,71.9,50,89.6z'%3E%3C/path%3E %3C/svg%3E");
  --kvi-van-hoa: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='4.53 4.53 90.95 90.95'%3E %3Cpath style='fill:%2300AD9C' d='M50,20.3c16.4,0,29.7,13.3,29.7,29.7c0,16.4-13.3,29.7-29.7,29.7c-16.4,0-29.7-13.3-29.7-29.7C20.3,33.6,33.6,20.3,50,20.3 M50,7.1c23.7,0,42.9,19.2,42.9,42.9c0,23.7-19.2,42.9-42.9,42.9S7.1,73.7,7.1,50C7.1,26.3,26.3,7.1,50,7.1z'%3E%3C/path%3E %3C/svg%3E");
  --kvi-square: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='5.41 5.41 89.19 89.19'%3E %3Cpath style='fill:%23fcb833%3Bfill-rule:evenodd' d='M22.19,22.19h55.62v55.62H22.19V22.19ZM9.46,9.46H90.54V90.54H9.46V9.46Z'%3E%3C/path%3E %3C/svg%3E");
}
.kvz .kvi-trai-tim { background-image: var(--kvi-trai-tim); }
.kvz .kvi-chu-thap { background-image: var(--kvi-chu-thap); }
.kvz .kvi-dau-nhan { background-image: var(--kvi-dau-nhan); }
.kvz .kvi-ngoac-kep { background-image: var(--kvi-ngoac-kep); }
.kvz .kvi-vuong { background-image: var(--kvi-vuong); }
.kvz .kvi-tron { background-image: var(--kvi-tron); }
.kvz .kvi-chuyen-mau { background-image: var(--kvi-chuyen-mau); }
.kvz .kvi-gach-ngang { background-image: var(--kvi-gach-ngang); }
.kvz .kvi-chat-luong { background-image: var(--kvi-chat-luong); }
.kvz .kvi-hop-tac-1 { background-image: var(--kvi-hop-tac-1); }
.kvz .kvi-hop-tac-2 { background-image: var(--kvi-hop-tac-2); }
.kvz .kvi-nhan-van { background-image: var(--kvi-nhan-van); }
.kvz .kvi-van-hoa { background-image: var(--kvi-van-hoa); }
.kvz .kvi-square { background-image: var(--kvi-square); }

.kvz .kvi { display: inline-block; width: 1em; height: 1em; background-position: center; background-size: contain; background-repeat: no-repeat; flex-shrink: 0; vertical-align: middle; }
/* Icon trang trí đầu tiêu đề mục (như cách Zoho đặt trái tim/chữ thập trên tiêu đề) */
.kvz .kvz-orn { display: block; width: 40px; height: 40px; margin: 0 0 14px; }
.kvz .kvz-head--center .kvz-orn { margin: 0 auto 14px; }
/* Icon trên nền màu/tối → trắng */
.kvz .kvi-white { filter: brightness(0) invert(1); }

/* HERO — chép 1:1 từ b2b (.hero …) + award strip */
.kvz-hero { background: var(--cream); padding: 52px 0 0; position: relative; overflow: hidden; }
.kvz-hero::before { content: ''; position: absolute; top: -140px; right: -120px; width: 540px; height: 540px; background: radial-gradient(circle, rgba(252,185,65,.18) 0%, transparent 68%); pointer-events: none; }
.kvz-hero::after { content: ''; position: absolute; bottom: 80px; left: -160px; width: 440px; height: 440px; background: radial-gradient(circle, rgba(5,175,155,.10) 0%, transparent 68%); pointer-events: none; }
.kvz-hero .kvz-wrap { position: relative; z-index: 2; }
.kvz-hero .h-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding: 40px 0 52px; }
.kvz-hero .h-tag { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--grey-line); background: #fff; color: var(--red); font-size: 10px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; padding: 7px 16px; border-radius: 100px; margin-bottom: 28px; }
.kvz-hero .h-tag i { font-size: 13px; }
.kvz-hero h1 { font-family: inherit !important; font-size: 54px; font-weight: 200; color: var(--ink); line-height: 1.12 !important; margin-bottom: 24px; letter-spacing: .3px; }
.kvz-hero h1 em { color: var(--red); font-style: normal; font-weight: 500; }
.kvz-hero .h-sub { color: var(--muted); font-size: 17px; font-weight: 300; line-height: 1.9; max-width: 560px; margin-bottom: 36px; text-wrap: pretty; }
.kvz-hero .h-sub strong { color: var(--ink); font-weight: 500; }
.kvz-hero .h-btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* 3 trụ cột (theo 3 slide chữ của Zoho) — chữ đổi theo ảnh đang hiện */
.kvz-hero .h-pillars { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; padding: 4px; background: #fff; border: 1px solid var(--grey-line); border-radius: 100px; }
.kvz-hero .h-pillars button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; cursor: pointer; font-family: inherit; font-size: 10px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); padding: 8px 14px; border-radius: 100px; transition: background .25s, color .25s, box-shadow .25s; }
.kvz-hero .h-pillars button i { font-size: 13px; }
.kvz-hero .h-pillars .kvi { width: 14px; height: 14px; }
.kvz-hero .h-pillars button.on .kvi { filter: brightness(0) invert(1); }
.kvz-hero .h-pillars button:hover { color: var(--red); }
.kvz-hero .h-pillars button.on { background: var(--red); color: #fff; box-shadow: 0 2px 8px rgba(235,20,60,.25); }
.kvz-hero .h-panels { display: grid; }
.kvz-hero .h-panel { grid-area: 1 / 1; opacity: 0; transform: translateY(12px); visibility: hidden; transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s; }
.kvz-hero .h-panel.on { opacity: 1; transform: none; visibility: visible; transition: opacity .5s ease .1s, transform .5s ease .1s, visibility 0s; }
.kvz-hero .h-title { font-family: inherit !important; font-size: 54px; font-weight: 200; color: var(--ink); line-height: 1.12 !important; margin-bottom: 24px; letter-spacing: .3px; }
.kvz-hero .h-title em { color: var(--red); font-style: normal; font-weight: 500; white-space: nowrap; }

.kvz-hero .h-feature { position: relative; }
.kvz-hero .h-deco { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.kvz-hero .h-corner { position: absolute; animation: kvzFloat 6s ease-in-out infinite; }
.kvz-hero .h-corner img { width: 100%; height: auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,.12)); }
.kvz-hero .h-corner.tl { width: 18%; top: -8%; left: -13%; } /* = b2b .hf-corner.tl */
.kvz-hero .h-corner.br { width: 10%; bottom: -8%; right: -13%; animation-delay: 1.4s; } /* = b2b .hf-corner.br */
.kvz-hero .h-bg { position: relative; z-index: 1; width: 100%; aspect-ratio: 1 / 1; border-radius: 3px; overflow: hidden; background: var(--grey-warm); box-shadow: 0 28px 60px rgba(0,0,0,.18); }
.kvz-hero .h-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.05); transition: opacity 1.1s ease; will-change: opacity, transform; }
.kvz-hero .h-slide.active { opacity: 1; animation: kvzKenBurns 6s ease forwards; }
@keyframes kvzKenBurns { from { transform: scale(1.05); } to { transform: scale(1.12); } }
.kvz-hero .h-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 3px; background: linear-gradient(180deg, transparent 52%, rgba(0,0,0,.34) 100%); }
.kvz-hero .h-dots { position: absolute; bottom: 14px; right: 16px; z-index: 4; display: flex; gap: 6px; }
.kvz-hero .h-dots button { width: 7px; height: 7px; border: 0; padding: 0; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; transition: background .3s, width .3s; }
.kvz-hero .h-dots button.on { background: #fff; width: 18px; border-radius: 4px; }
.kvz-hero .h-badge { position: absolute; left: -20px; bottom: 28px; z-index: 4; background: #fff; border-radius: 4px; padding: 14px 20px 14px 16px; box-shadow: 0 18px 40px rgba(0,0,0,.18); display: flex; align-items: center; gap: 13px; max-width: 78%; transition: opacity .35s ease, transform .35s ease; }
.kvz-hero .h-badge.swap { opacity: 0; transform: translateY(8px); }
.kvz-hero .hb-icon { width: 42px; height: 42px; border-radius: 3px; background: var(--gold-pale); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kvz-hero .hb-icon i { font-size: 22px; color: var(--gold); }
.kvz-hero .hb-icon .kvi { width: 22px; height: 22px; }
.kvz-hero .hb-title { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.kvz-hero .hb-sub { font-size: 11px; color: var(--muted); line-height: 1.4; margin-top: 3px; }

.kvz-hero .h-stats { border-top: 1px solid var(--grey-line); padding: 34px 0 0; }
.kvz-hero .stat-grid { display: flex; flex-wrap: wrap; gap: 28px 56px; }
.kvz-hero .stat-num { font-size: 38px; font-weight: 100; color: var(--ink); letter-spacing: 1px; line-height: 1; }
.kvz-hero .stat-label { font-size: 10px; color: var(--muted); font-weight: 400; margin-top: 6px; letter-spacing: 1.5px; text-transform: uppercase; }
.kvz-hero .h-markets { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 26px 0 56px; margin-top: 30px; border-top: 1px solid var(--grey-line); }
.kvz-hero .h-markets-label { font-size: 10px; color: var(--muted-light); font-weight: 500; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; }
.kvz-hero .market-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.kvz-hero .kvz-pill:hover { border-color: var(--red); color: var(--red); }

.kvz .kvz-award { background: var(--ink); padding: 14px 40px; display: flex; align-items: center; justify-content: flex-start; gap: 12px; overflow-x: auto; white-space: nowrap; border-bottom: 3px solid transparent; border-image: var(--gradient) 1; scrollbar-width: none; }
.kvz .kvz-award::-webkit-scrollbar { height: 0; }
/* Căn giữa khi đủ chỗ, cuộn từ mép trái khi tràn (justify-content:center sẽ cắt mất đầu dải) */
.kvz .kvz-award > :first-child { margin-left: auto; }
.kvz .kvz-award > :last-child { margin-right: auto; }
.kvz .kvz-award .aw { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: rgba(255,255,255,.62); font-weight: 300; padding: 0 20px; flex-shrink: 0; letter-spacing: .5px; }
.kvz .kvz-award .aw i { font-size: 15px; }
.kvz .kvz-award .aw .kvi { width: 15px; height: 15px; }
.kvz .kvz-award .aw:nth-of-type(1) i { color: var(--gold); }
.kvz .kvz-award .aw:nth-of-type(2) i { color: var(--teal); }
.kvz .kvz-award .aw:nth-of-type(3) i { color: var(--red); }
.kvz .kvz-award .aw:nth-of-type(4) i { color: var(--green); }
.kvz .kvz-award .aw:nth-of-type(5) i { color: var(--teal-light); }
.kvz .kvz-award .sep { width: 1px; height: 16px; background: rgba(255,255,255,.12); flex-shrink: 0; }

@media (max-width: 1024px) {
  .kvz-hero h1, .kvz-hero .h-title { font-size: 44px; }
  .kvz-hero .h-grid { gap: 36px; }
}
@media (max-width: 768px) {
  .kvz-hero { padding: 24px 0 0; }
  .kvz-hero .h-grid { grid-template-columns: 1fr; gap: 32px; padding: 16px 0 40px; }
  .kvz-hero .h-feature { order: -1; max-width: 420px; width: 100%; margin: 0 auto; }
  .kvz-hero .h-deco { display: none; }
  .kvz-hero .h-badge { left: 12px; bottom: 16px; }
  .kvz-hero h1, .kvz-hero .h-title { font-size: 32px; }
  .kvz-hero .h-pillars { display: flex; border-radius: 12px; }
  .kvz-hero .h-pillars button { flex: 1 1 auto; justify-content: center; padding: 8px 10px; letter-spacing: 1px; }
  .kvz-hero .h-sub { font-size: 15px; line-height: 1.8; }
  .kvz-hero .stat-grid { gap: 24px 36px; }
  .kvz-hero .stat-grid > div { flex: 0 0 calc(50% - 18px); }
  .kvz-hero .stat-num { font-size: 32px; }
  .kvz-hero .stat-label { letter-spacing: 1px; text-wrap: balance; }
  .kvz-hero .h-tag { letter-spacing: 1.5px; padding: 7px 14px; }
  .kvz-hero .h-markets { padding-bottom: 44px; }
  .kvz .kvz-award { padding: 14px 20px; }
}
@media (max-width: 480px) {
  .kvz-hero h1, .kvz-hero .h-title { font-size: 27px; }
  .kvz-hero .h-btns .kvz-btn { flex: 1 1 100%; }
}

/* Thành phần trang con — thẻ, lưới, video, sự kiện, kênh, liên hệ */

/* Thẻ giá trị (sứ mệnh / tầm nhìn / giá trị cốt lõi / sản phẩm) — kiểu .why-card b2b */
.kvz .kvz-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.kvz .kvz-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.kvz .kvz-card { background: #fff; border: 1px solid var(--grey-line); border-radius: 4px; padding: 30px 26px; position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; }
.kvz .kvz-card::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--gradient); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.kvz .kvz-card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 18px 40px rgba(0,0,0,.09); }
.kvz .kvz-card:hover::before { transform: scaleX(1); }
.kvz .kvz-card .ic { width: 56px; height: 56px; margin-bottom: 20px; }
.kvz .kvz-card .ic .kvi { width: 100%; height: 100%; }
.kvz .kvz-card .ic-brand { width: 52px; height: 52px; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; background: var(--cream); }
.kvz .kvz-card .ic-brand .kvi { width: 30px; height: 30px; }
.kvz .kvz-card .ic img { width: 100%; height: 100%; object-fit: contain; }
.kvz .kvz-card .ic-font { width: 48px; height: 48px; border-radius: 4px; display: flex; align-items: center; justify-content: center; background: var(--gold-pale); color: var(--gold); font-size: 24px; margin-bottom: 18px; }
.kvz .kvz-card h3 { font-family: inherit !important; font-size: 17px; font-weight: 500; color: var(--ink); margin-bottom: 10px; line-height: 1.35 !important; }
.kvz .kvz-card p { font-size: 14px; color: var(--muted); line-height: 1.8; font-weight: 300; }

/* Câu chuyện: ảnh + chữ */
.kvz .kvz-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.kvz .kvz-split p { font-size: 15px; color: var(--muted); line-height: 1.95; margin-bottom: 14px; }
.kvz .kvz-split p strong { color: var(--ink); font-weight: 500; }
.kvz .kvz-people { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } /* 4 ô vuông ghép 2×2 */
.kvz .kvz-people img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0; filter: grayscale(1); } /* đen trắng cho đồng nhất ảnh tư liệu (quy tắc brand) */
.kvz .kvz-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--grey-line); }
.kvz .kvz-nums b { display: block; font-size: 34px; font-weight: 100; color: var(--ink); line-height: 1; }
.kvz .kvz-nums span { text-wrap: balance; display: block; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-top: 8px; }

/* Thẻ hệ sinh thái / danh mục có ảnh */
.kvz .kvz-tile { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--grey-line); border-radius: 4px; overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; }
.kvz .kvz-tile:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 20px 44px rgba(0,0,0,.10); }
.kvz .kvz-tile .ph { aspect-ratio: 1; overflow: hidden; background: var(--grey-warm); position: relative; }
.kvz .kvz-tile .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.kvz .kvz-tile:hover .ph img { transform: scale(1.06); }
.kvz .kvz-tile .ph .tag { position: absolute; left: 14px; top: 14px; background: #fff; color: var(--red); font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; }
.kvz .kvz-tile .bd { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.kvz .kvz-tile h3 { font-family: inherit !important; font-size: 18px; font-weight: 500; color: var(--ink); margin-bottom: 8px; line-height: 1.35 !important; }
.kvz .kvz-tile p { font-size: 14px; color: var(--muted); line-height: 1.75; margin-bottom: 18px; flex: 1; }

/* Dải USP */
.kvz .kvz-usp { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--grey-line); border-radius: 4px; background: #fff; }
.kvz .kvz-usp > div { display: flex; gap: 14px; align-items: flex-start; padding: 22px 22px; }
.kvz .kvz-usp > div + div { border-left: 1px solid var(--grey-line); }
.kvz .kvz-usp i { font-size: 24px; color: var(--red); flex-shrink: 0; }
.kvz .kvz-usp .kvi { width: 26px; height: 26px; margin-top: 2px; }
.kvz .kvz-usp > div:nth-child(2) i { color: var(--teal); }
.kvz .kvz-usp > div:nth-child(3) i { color: var(--gold); }
.kvz .kvz-usp > div:nth-child(4) i { color: var(--green); }
.kvz .kvz-usp b { display: block; font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.35; }
.kvz .kvz-usp span { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.5; }

/* Dải CTA nền tối — .cta-band b2b */
.kvz .kvz-cta { background: var(--ink); color: #fff; padding: 64px 0; position: relative; overflow: hidden; border-top: 3px solid transparent; border-image: var(--gradient) 1; }
.kvz .kvz-cta .kvz-wrap { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.kvz .kvz-cta h2::before { content: ''; display: block; width: 36px; height: 30px; margin-bottom: 16px; background: var(--kvi-trai-tim) left center / contain no-repeat; } /* icon Trái tim — "lan toả yêu thương" */
.kvz .kvz-cta h2 { font-family: inherit !important; font-size: 32px; font-weight: 200; line-height: 1.25 !important; color: #fff; max-width: 640px; }
.kvz .kvz-cta h2 em { color: var(--gold); font-style: normal; font-weight: 500; }
.kvz .kvz-cta p { color: rgba(255,255,255,.6); font-size: 15px; margin-top: 10px; max-width: 600px; }
.kvz .kvz-cta .acts { display: flex; gap: 12px; flex-wrap: wrap; }

/* Thanh điều hướng mục (Truyền thông – Sự kiện) */
.kvz .kvz-subnav { position: sticky; top: var(--kvz-sticky-top, 0px); z-index: 20; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--grey-line); }
.kvz .kvz-subnav .kvz-wrap { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; }
.kvz .kvz-subnav .kvz-wrap::-webkit-scrollbar { display: none; }
.kvz .kvz-subnav a { flex-shrink: 0; padding: 18px 0 16px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 8px; transition: color .2s, border-color .2s; }
.kvz .kvz-subnav a i { font-size: 16px; }
.kvz .kvz-subnav a:hover, .kvz .kvz-subnav a.on { color: var(--red); border-bottom-color: var(--red); }

/* Nhảy tới mục: chừa chỗ cho thanh mục + header dính của Zoho */
.kvz [id^="kvz-"] { scroll-margin-top: calc(var(--kvz-sticky-top, 0px) + 64px); }

/* Kênh truyền thông chính thức */
.kvz .kvz-channels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kvz .kvz-ch { display: flex; align-items: center; gap: 16px; padding: 20px 22px; background: #fff; border: 1px solid var(--grey-line); border-radius: 4px; transition: transform .25s, box-shadow .25s, border-color .25s; }
.kvz .kvz-ch:hover { transform: translateY(-3px); border-color: transparent; box-shadow: 0 16px 36px rgba(0,0,0,.09); }
.kvz .kvz-ch .ci { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; background: var(--cream); color: var(--ink); transition: background .25s, color .25s; }
.kvz .kvz-ch:hover .ci { background: var(--c, var(--red)); color: #fff; }
.kvz .kvz-ch b { display: block; font-size: 15px; font-weight: 500; color: var(--ink); }
.kvz .kvz-ch span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; word-break: break-all; }
.kvz .kvz-ch .go { margin-left: auto; color: var(--muted-light); font-size: 18px; transition: color .2s, transform .2s; }
.kvz .kvz-ch:hover .go { color: var(--red); transform: translateX(3px); }

/* 2 kênh hệ sinh thái nổi bật (b2b + go) — thẻ 2×1: ô ảnh vuông + ô chữ vuông */
.kvz .kvz-eco-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 36px; }
.kvz .kvz-ef { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: #fff; border: 1px solid var(--grey-line); overflow: hidden; transition: box-shadow .3s, transform .3s; }
.kvz .kvz-ef::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c); z-index: 2; }
.kvz .kvz-ef:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(0,0,0,.10); }
.kvz .kvz-ef .ph { aspect-ratio: 1; height: 100%; overflow: hidden; background: var(--grey-warm); }
.kvz .kvz-ef .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.kvz .kvz-ef:hover .ph img { transform: scale(1.06); }
.kvz .kvz-ef .bd { aspect-ratio: 1; display: flex; flex-direction: column; padding: 22px 22px 20px; min-width: 0; overflow: hidden; }
.kvz .kvz-ef .logo { height: 26px; width: auto; max-width: 100%; object-fit: contain; object-position: left; margin-bottom: 10px; }
.kvz .kvz-ef .tg { font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--muted-light); margin-bottom: 8px; }
.kvz .kvz-ef h3 { font-family: inherit !important; font-size: 17px; font-weight: 500; line-height: 1.35 !important; color: var(--ink); margin-bottom: 10px; }
.kvz .kvz-ef p { font-size: 13px; line-height: 1.7; color: var(--muted); margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kvz .kvz-ef .url { font-size: 12px; color: var(--ink); font-weight: 500; margin-top: auto; margin-bottom: 10px; }
.kvz .kvz-ef .kvz-btn { align-self: flex-start; }
.kvz .kvz-ch-lbl { font-size: 10px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted-light); margin-bottom: 14px; }

/* Video báo chí — mặt tiền nhẹ (chỉ tải YouTube khi bấm) */
.kvz .kvz-press { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; }
.kvz .kvz-press-side { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; }
.kvz .kvz-vid { display: block; }
.kvz .kvz-vid .fr { position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: #000; cursor: pointer; }
.kvz .kvz-vid .fr img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: transform .6s, opacity .3s; }
.kvz .kvz-vid:hover .fr img { transform: scale(1.04); opacity: 1; }
.kvz .kvz-vid .fr iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kvz .kvz-vid .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 10px 30px rgba(235,20,60,.45); transition: transform .25s; border: 0; cursor: pointer; }
.kvz .kvz-vid:hover .play { transform: translate(-50%, -50%) scale(1.08); }
.kvz .kvz-vid .ch { position: absolute; left: 12px; top: 12px; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500; padding: 4px 10px; border-radius: 3px; }
.kvz .kvz-vid h3 { font-family: inherit !important; font-size: 15px; font-weight: 500; color: var(--ink); margin-top: 12px; line-height: 1.4 !important; }
.kvz .kvz-vid small { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.kvz .kvz-press-side .kvz-vid .play { width: 44px; height: 44px; font-size: 18px; }
.kvz .kvz-press-side .kvz-vid h3 { font-size: 13px; }
.kvz .kvz-press > .kvz-vid h3 { font-size: 19px; }

/* Sự kiện (Zoho Backstage) */
.kvz .kvz-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.kvz .kvz-filter button { font-family: inherit; font-size: 12px; letter-spacing: 1px; padding: 8px 18px; border-radius: 100px; border: 1px solid var(--grey-line); background: #fff; color: var(--muted); cursor: pointer; transition: all .2s; }
.kvz .kvz-filter button:hover { border-color: var(--red); color: var(--red); }
.kvz .kvz-filter button.on { background: var(--red); border-color: var(--red); color: #fff; }
.kvz .kvz-filter button b { font-weight: 500; opacity: .7; margin-left: 4px; }
.kvz .kvz-events { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.kvz .kvz-ev { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--grey-line); border-radius: 4px; overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; }
.kvz .kvz-ev:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 20px 44px rgba(0,0,0,.10); }
.kvz .kvz-ev .ph { position: relative; aspect-ratio: 2 / 1; background: var(--gradient); overflow: hidden; }
.kvz .kvz-ev .ph img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.kvz .kvz-ev .st { z-index: 2; }
.kvz .kvz-ev:hover .ph img { transform: scale(1.05); }
.kvz .kvz-ev .ph .noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 44px; opacity: .9; }
.kvz .kvz-ev .st { position: absolute; left: 12px; top: 12px; font-size: 10px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 11px; border-radius: 100px; background: #fff; color: var(--muted); }
.kvz .kvz-ev .st.up { background: var(--red); color: #fff; }
.kvz .kvz-ev .bd { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.kvz .kvz-ev .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.kvz .kvz-ev .meta span { display: inline-flex; align-items: center; gap: 5px; }
.kvz .kvz-ev .meta i { font-size: 14px; color: var(--teal); }
.kvz .kvz-ev h3 { font-family: inherit !important; font-size: 17px; font-weight: 500; color: var(--ink); line-height: 1.4 !important; margin-bottom: 16px; flex: 1; }
.kvz .kvz-empty { grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; padding: 28px 30px; border: 1px dashed var(--grey-line); border-radius: 4px; background: var(--cream); }
.kvz .kvz-empty > i { font-size: 36px; color: var(--gold); flex-shrink: 0; }
.kvz .kvz-empty b { display: block; font-size: 16px; font-weight: 500; color: var(--ink); }
.kvz .kvz-empty span { display: block; font-size: 14px; color: var(--muted); margin-top: 4px; }
.kvz .kvz-empty .kvz-btn { margin-left: auto; flex-shrink: 0; }
.kvz .kvz-empty--slim { padding: 14px 20px; gap: 12px; }
.kvz .kvz-empty--slim > i { font-size: 22px; }
.kvz .kvz-empty--slim span { margin: 0; font-size: 14px; color: var(--muted); }
.kvz .kvz-empty--slim a { color: var(--red); border-bottom: 1px solid rgba(235,20,60,.3); }
.kvz .kvz-evmore { display: flex; justify-content: center; margin-top: 24px; }
.kvz .kvz-evmore:empty { display: none; }
.kvz .kvz-more { display: flex; justify-content: center; margin-top: 36px; gap: 12px; flex-wrap: wrap; }


/* Băng ảnh ghép full width */
.kvz .kvz-banner { background: var(--ink); }
.kvz .kvz-banner img { width: 100%; height: auto; max-height: 520px; object-fit: cover; }

/* Câu chuyện: hàng ảnh–chữ xen kẽ */
.kvz .kvz-story { display: grid; gap: 88px; }
.kvz .kvz-split--rev > :first-child { order: 2; }
.kvz .kvz-photo { position: relative; }
.kvz .kvz-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; box-shadow: 0 28px 60px rgba(0,0,0,.14); }
.kvz .kvz-photo::after { content: ''; position: absolute; width: 22%; aspect-ratio: 1; right: -18px; bottom: -18px; background: url('https://b2b.kymviet.com.vn/wp-content/themes/kymviet-theme/assets/graphics/goc-slider-02.svg') center / contain no-repeat; pointer-events: none; }
.kvz .kvz-quote::before { content: ''; display: block; width: 34px; height: 34px; margin-bottom: 12px; background: var(--kvi-ngoac-kep) left center / contain no-repeat; } /* icon Ngoặc kép — "điều muốn nói" */
.kvz .kvz-quote { font-size: 24px; font-weight: 300; line-height: 1.5; color: var(--ink); border-left: 3px solid var(--red); padding: 4px 0 4px 22px; margin: 6px 0 22px; text-wrap: balance; }

/* Danh sách đánh số (sứ mệnh) */
.kvz .kvz-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: none; }
.kvz .kvz-steps li { background: #fff; border: 1px solid var(--grey-line); border-radius: 4px; padding: 28px 26px; position: relative; }
.kvz .kvz-steps .kvi { width: 34px; height: 34px; position: absolute; right: 24px; top: 26px; }
.kvz .kvz-steps b { display: block; font-size: 40px; font-weight: 100; line-height: 1; color: var(--red); margin-bottom: 14px; }
.kvz .kvz-steps li:nth-child(2) b { color: var(--teal); }
.kvz .kvz-steps li:nth-child(3) b { color: var(--gold); }
.kvz .kvz-steps p { font-size: 14px; color: var(--muted); line-height: 1.8; }

/* Địa điểm / sân bay */
.kvz .kvz-place { background: #fff; border: 1px solid var(--grey-line); border-radius: 4px; padding: 24px; }
.kvz .kvz-place small { display: block; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--red); font-weight: 500; margin-bottom: 8px; }
.kvz .kvz-place h3 { font-family: inherit !important; font-size: 17px; font-weight: 500; color: var(--ink); margin-bottom: 8px; line-height: 1.35 !important; }
.kvz .kvz-place p, .kvz .kvz-place li { font-size: 14px; color: var(--muted); line-height: 1.75; }
.kvz .kvz-place ul li { padding-left: 16px; position: relative; }
.kvz .kvz-place ul li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--kvi-vuong) center / contain no-repeat; } /* icon Vuông */

/* Tin tức — đầu khối; lưới bài bên dưới là khối Recent posts gốc của Zoho */
.kvz .kvz-news { padding-bottom: 32px; }
.kvz .kvz-news-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.kvz .kvz-news-cats { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kvz .kvz-news-cats .kvz-pill:hover { border-color: var(--red); color: var(--red); }


/* Dải ảnh "Sản phẩm thay lời nói" — cuộn ngang, bắt khung */
.kvz .kvz-strip-nav { display: flex; gap: 8px; align-items: center; }
.kvz .kvz-strip-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--grey-line); background: #fff; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; transition: border-color .2s, color .2s; }
.kvz .kvz-strip-btn:hover { border-color: var(--red); color: var(--red); }
.kvz .kvz-strip { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 max(40px, calc((100% - 1200px) / 2)); padding: 0 max(40px, calc((100% - 1200px) / 2)) 8px; scrollbar-width: none; }
.kvz .kvz-strip::-webkit-scrollbar { display: none; }
.kvz .kvz-strip figure { flex: 0 0 min(340px, 70vw); scroll-snap-align: start; margin: 0; border-radius: 4px; overflow: hidden; background: #111; aspect-ratio: 1; }
/* Ảnh gốc là ảnh ghép 3:2 (ảnh chính bên trái ≈ vuông) → khung vuông, neo trái để giữ ảnh chính */
.kvz .kvz-strip img { width: 100%; height: 100%; object-fit: cover; object-position: 0 50%; transition: transform .6s; }
.kvz .kvz-strip figure:hover img { transform: scale(1.04); }

/* Dải "Truyền thông nói gì về chúng tôi" — nền sáng (nằm ngay dưới dải giải thưởng tối của hero) */
.kvz .kvz-press-strip { background: #fff; padding: 18px 0; border-bottom: 1px solid var(--grey-line); }
.kvz .kvz-press-strip .kvz-wrap { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.kvz .kvz-press-strip .lbl { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--red); font-weight: 500; }
.kvz .kvz-press-strip .chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.kvz .kvz-press-strip .chips a { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink); background: var(--cream); border: 1px solid var(--grey-line); border-radius: 100px; padding: 6px 14px; transition: all .2s; }
.kvz .kvz-press-strip .chips a i { color: var(--red); }
.kvz .kvz-press-strip .chips a:hover { border-color: var(--red); color: var(--red); }

/* Logo đối tác */
.kvz .kvz-logos { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; border: 1px solid var(--grey-line); border-radius: 4px; overflow: hidden; background: var(--grey-line); }
/* 8 ô vuông ghép sát, kẻ 1px */
.kvz .kvz-logos span { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: 18%; background: #fff; box-shadow: 0 0 0 .5px var(--grey-line); }
.kvz .kvz-logos img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; }
.kvz .kvz-logos span:hover img { filter: none; opacity: 1; }


/* HỆ SINH THÁI — 3 thẻ ảnh lớn có lớp phủ, số thứ tự + màu riêng (--c) */
.kvz .kvz-eco { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kvz .kvz-eco-card { position: relative; display: block; aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: var(--ink); color: #fff; isolation: isolate; }
.kvz .kvz-eco-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; z-index: -2; }
.kvz .kvz-eco-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.08) 10%, rgba(20,20,20,.6) 45%, rgba(20,20,20,.95) 100%); transition: background .4s; }
.kvz .kvz-eco-card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c); }
.kvz .kvz-eco-card:hover img { transform: scale(1.06); }
.kvz .kvz-eco-card .ov { position: absolute; inset: auto 0 0 0; padding: 30px 28px 30px; }
.kvz .kvz-eco-card .no { position: absolute; top: -40px; left: 28px; font-size: 64px; font-weight: 100; line-height: 1; color: var(--c); opacity: .95; }
.kvz .kvz-eco-card .tg { display: inline-block; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500; color: var(--c); margin-bottom: 10px; }
.kvz .kvz-eco-card h3 { font-family: inherit !important; font-size: 24px; font-weight: 300; line-height: 1.25 !important; margin-bottom: 12px; color: #fff; }
.kvz .kvz-eco-card p { font-size: 14px; line-height: 1.75; color: rgba(255,255,255,.78); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s ease, opacity .4s ease, margin .4s; }
.kvz .kvz-eco-card:hover p, .kvz .kvz-eco-card:focus-visible p { max-height: 160px; opacity: 1; margin-bottom: 16px; }
.kvz .kvz-eco-card .cta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500; color: #fff; border-bottom: 2px solid var(--c); padding-bottom: 4px; }
.kvz .kvz-eco-foot { display: flex; justify-content: center; gap: 12px 28px; flex-wrap: wrap; margin-top: 28px; }
.kvz .kvz-eco-foot a { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); transition: color .2s; }
.kvz .kvz-eco-foot a i { color: var(--red); font-size: 17px; }
.kvz .kvz-eco-foot .kvi { width: 16px; height: 16px; }
.kvz .kvz-eco-foot a:hover { color: var(--red); }
@media (hover: none) { .kvz .kvz-eco-card p { max-height: none; opacity: 1; margin-bottom: 16px; } }

/* Dải thương hiệu con — 5 ô 2×1 ghép sát (Crafts · Design · Edu · Cafe · Space), mỗi ô một vạch màu riêng */
.kvz .kvz-eco-brands { margin-top: 36px; }
.kvz .kvz-eco-brands .lbl { text-align: center; font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted-light); font-weight: 500; margin-bottom: 14px; }
.kvz .kvz-eco-brands .row { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--grey-line); background: var(--grey-line); gap: 1px; }
.kvz .kvz-eco-brands a { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 1; background: #fff; padding: 12% 10%; transition: background .25s; }
.kvz .kvz-eco-brands a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c); transform: scaleX(.25); transition: transform .3s; }
.kvz .kvz-eco-brands a:hover { background: var(--cream); }
.kvz .kvz-eco-brands a:hover::after { transform: scaleX(1); }
.kvz .kvz-eco-brands img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* DÒNG SẢN PHẨM VIP — nền tối, nhấn vàng */
.kvz .kvz-vip { background: radial-gradient(1200px 500px at 85% 0%, rgba(252,185,65,.12), transparent 60%), #1a1a1a; color: #fff; padding: 88px 0; border-top: 3px solid transparent; border-image: linear-gradient(90deg, transparent, var(--gold), transparent) 1; }
.kvz .kvz-vip .kvz-eyebrow { color: var(--gold); }
.kvz .kvz-vip .kvz-eyebrow::before { background: var(--gold); }
.kvz .kvz-vip .kvz-title { color: #fff; }
.kvz .kvz-vip .kvz-title em { color: var(--gold); }
.kvz .kvz-vip .kvz-sub { color: rgba(255,255,255,.7); margin-bottom: 28px; }
.kvz .kvz-vip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-bottom: 56px; }
.kvz .kvz-vip-hero { position: relative; display: block; border-radius: 4px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(252,185,65,.35); }
.kvz .kvz-vip-hero img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .8s; }
.kvz .kvz-vip-hero:hover img { transform: scale(1.04); }
.kvz .kvz-vip .badge { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; background: var(--gold); color: var(--ink); font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 12px; border-radius: 100px; }
.kvz .kvz-vip-copy .acts { display: flex; gap: 12px; flex-wrap: wrap; }
.kvz .kvz-vip-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.kvz .kvz-vip-item { display: block; color: #fff; }
.kvz .kvz-vip-item .ph { position: relative; aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: #111; box-shadow: 0 0 0 1px rgba(255,255,255,.08); transition: box-shadow .3s; }
.kvz .kvz-vip-item .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.kvz .kvz-vip-item:hover .ph { box-shadow: 0 0 0 1px var(--gold); }
.kvz .kvz-vip-item:hover .ph img { transform: scale(1.06); }
.kvz .kvz-vip-item .badge { font-size: 9px; padding: 4px 9px; left: 10px; top: 10px; }
.kvz .kvz-vip-item h3 { font-family: inherit !important; font-size: 15px; font-weight: 500; margin-top: 12px; line-height: 1.35 !important; color: #fff; }
.kvz .kvz-vip-item small { display: block; font-size: 12px; color: rgba(255,255,255,.55); margin-top: 3px; }


/* KHỐI GHÉP Ô VUÔNG — quy tắc ảnh KymViet: chỉ ô 1×1, 2×1, 1×2, 2×2 ghép sát (gap 0) hoặc đứng riêng */
.kvz .kvz-mosaic { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
.kvz .kvz-mosaic > * { position: relative; aspect-ratio: 1; overflow: hidden; margin: 0; }
.kvz .kvz-mosaic .m-2x2 { grid-column: span 2; grid-row: span 2; }
.kvz .kvz-mosaic .m-2x1 { grid-column: span 2; aspect-ratio: 2 / 1; }
.kvz .kvz-mosaic .m-1x2 { grid-row: span 2; aspect-ratio: 1 / 2; }
.kvz .kvz-mosaic img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .5s, transform .6s; }
.kvz .kvz-mosaic figure:hover img { filter: none; transform: scale(1.04); }
.kvz .kvz-mosaic .m-color { display: flex; align-items: flex-end; padding: 8%; color: #fff; font-size: clamp(14px, 1.6vw, 24px); font-weight: 300; line-height: 1.2; }
.kvz .kvz-mosaic .m-color b { font-weight: 500; }
.kvz .kvz-mosaic .m-color { flex-direction: column; align-items: flex-start; justify-content: space-between; }
.kvz .kvz-mosaic .m-color .kvi { width: 28%; height: 28%; filter: brightness(0) invert(1); }
.kvz .kvz-mosaic .c-green { background: #50B748; } .kvz .kvz-mosaic .c-gold { background: var(--gold); }
.kvz .kvz-mosaic .c-red { background: var(--red); } .kvz .kvz-mosaic .c-teal { background: var(--teal); }
@media (max-width: 768px) { .kvz .kvz-mosaic { grid-template-columns: repeat(4, 1fr); } }

/* Trang chi tiết sản phẩm */
.kvz .kvz-pdp-trust { padding: 40px 0; }
.kvz .kvz-note { font-size: 13px !important; color: var(--muted-light) !important; font-style: italic; border-left: 2px solid var(--grey-line); padding-left: 12px; }

/* Liên hệ */
.kvz .kvz-form-head { padding-bottom: 28px; }
.kvz .kvz-contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: stretch; }
.kvz .kvz-cinfo { display: grid; gap: 14px; align-content: start; }
.kvz .kvz-crow { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; background: #fff; border: 1px solid var(--grey-line); border-radius: 4px; }
.kvz .kvz-crow .ci { width: 44px; height: 44px; border-radius: 4px; background: var(--gold-pale); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.kvz .kvz-crow:nth-child(2) .ci { background: #E8F8F6; color: var(--teal); }
.kvz .kvz-crow:nth-child(3) .ci { background: #FDE8EC; color: var(--red); }
.kvz .kvz-crow:nth-child(4) .ci { background: #E6F5EE; color: var(--green); }
.kvz .kvz-crow small { display: block; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted-light); font-weight: 500; }
.kvz .kvz-crow b, .kvz .kvz-crow a { display: block; font-size: 15px; font-weight: 500; color: var(--ink); margin-top: 4px; line-height: 1.5; }
.kvz .kvz-crow a:hover { color: var(--red); }
.kvz .kvz-crow a.kvz-link { display: inline-flex; font-size: 12px; color: var(--red); }
.kvz .kvz-map { border-radius: 4px; overflow: hidden; border: 1px solid var(--grey-line); min-height: 380px; background: var(--grey-warm); }
.kvz .kvz-map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }
.kvz .kvz-quick { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

@media (max-width: 1024px) {
  .kvz .kvz-grid4, .kvz .kvz-channels { grid-template-columns: repeat(2, 1fr); }
  .kvz .kvz-eco-feature { grid-template-columns: 1fr; }
  .kvz .kvz-events { grid-template-columns: repeat(2, 1fr); }
  .kvz .kvz-press { grid-template-columns: 1fr; }
  .kvz .kvz-usp { grid-template-columns: repeat(2, 1fr); }
  .kvz .kvz-logos { grid-template-columns: repeat(4, 1fr); }
  .kvz .kvz-eco-brands .row { grid-template-columns: repeat(3, 1fr); }
  .kvz .kvz-vip-row { grid-template-columns: repeat(3, 1fr); }
  .kvz .kvz-vip-grid { gap: 40px; }
  .kvz .kvz-usp > div:nth-child(3) { border-left: 0; }
  .kvz .kvz-usp > div:nth-child(n+3) { border-top: 1px solid var(--grey-line); }
}
@media (max-width: 768px) {
  .kvz .kvz-grid3, .kvz .kvz-split, .kvz .kvz-contact, .kvz .kvz-events { grid-template-columns: 1fr; }
  .kvz .kvz-split { gap: 36px; }
  .kvz .kvz-split--rev > :first-child { order: 0; }
  .kvz .kvz-story { gap: 56px; }
  .kvz .kvz-steps { grid-template-columns: 1fr; }
  .kvz .kvz-photo::after { display: none; }
  .kvz .kvz-quote { font-size: 20px; }
  .kvz .kvz-channels { grid-template-columns: 1fr; gap: 10px; }
  .kvz .kvz-ef { grid-template-columns: 1fr; }
  .kvz .kvz-ef .ph { aspect-ratio: 2 / 1; }
  .kvz .kvz-ef .bd { aspect-ratio: auto; }
  .kvz .kvz-ch { padding: 14px 16px; }
  .kvz .kvz-subnav { position: relative; top: 0; } /* mobile: Zoho có header cố định → không dính để khỏi chồng lên nhau */
  .kvz .kvz-press-side { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kvz .kvz-cta { padding: 48px 0; }
  .kvz .kvz-cta h2::before { content: ''; display: block; width: 36px; height: 30px; margin-bottom: 16px; background: var(--kvi-trai-tim) left center / contain no-repeat; } /* icon Trái tim — "lan toả yêu thương" */
.kvz .kvz-cta h2 { font-size: 24px; }
  .kvz .kvz-empty { flex-wrap: wrap; }
  .kvz .kvz-empty .kvz-btn { margin-left: 0; }
  .kvz .kvz-map, .kvz .kvz-map iframe { min-height: 300px; }
  .kvz .kvz-strip { padding: 0 20px 8px; scroll-padding: 0 20px; }
  .kvz .kvz-strip-btn { display: none; }
  .kvz .kvz-eco { grid-template-columns: 1fr; }
  .kvz .kvz-eco-brands .row { grid-template-columns: repeat(2, 1fr); }
  .kvz .kvz-vip { padding: 60px 0; }
  .kvz .kvz-vip-grid { grid-template-columns: 1fr; gap: 28px; margin-bottom: 36px; }
  .kvz .kvz-vip-row { grid-template-columns: repeat(5, 62%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; }
  .kvz .kvz-vip-row::-webkit-scrollbar { display: none; }
  .kvz .kvz-vip-item { scroll-snap-align: start; }
}
@media (max-width: 480px) {
  .kvz .kvz-grid4, .kvz .kvz-usp { grid-template-columns: 1fr; }
  .kvz .kvz-usp > div + div { border-left: 0; border-top: 1px solid var(--grey-line); }
  .kvz .kvz-nums b { font-size: 28px; }
  .kvz .kvz-cta .acts .kvz-btn { flex: 1 1 100%; }
}


/* Luật dùng chung NGOÀI .kvz (khối gốc Zoho) — build.py nối vào cuối kvz-shared.css */
/* ===== Dự phòng khi lõi Zoho (zfcommerce.nimbuspop.com) bị nhà mạng chặn — 30/09/2026 =====
   Không có zstore-core.css/js ⇒ mũi tên carousel phình 745px, dải sản phẩm xếp dọc hàng chục nghìn px.
   Luật 1 vô hại khi lõi tải bình thường; phần .kv-nocore chỉ bật khi JS ở Mã Đầu Trang thấy $D chưa có sau 3s. */
svg.svg-icon-18px { width: 18px; height: 18px; }
.kv-nocore .zpcarousel-arrows-container, .kv-nocore .zpfilmstrip-viewall-button:empty { display: none !important; }
.kv-nocore .zpfilmstrip-overflow-hidden { overflow-x: auto !important; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.kv-nocore .zpfilmstrip .zprow { display: flex !important; flex-wrap: nowrap !important; width: max-content !important; transform: none !important; gap: 12px; }
.kv-nocore .zpfilmstrip .theme-prod-box { flex: 0 0 240px !important; width: 240px !important; max-width: 240px !important; scroll-snap-align: start; }
.kv-nocore .zpfilmstrip .theme-prod-box img { width: 100%; height: auto; }

/* ===== Dải sản phẩm Zoho đặt trong section tràn ngang (trang EN: /en, /en-products) — 30/09/2026 =====
   Bản VI dải nằm trong .zpcontainer (992/1140px, đệm 15px, section đệm 50px); bản EN nằm cùng section full-width
   với snippet nên thẻ phình hết màn hình. Ép về đúng khung của bản VI. */
.zpcontainer-fluid .zpelem-storecollection { width: auto; max-width: 100%; margin-inline: auto; padding: 50px 15px; box-sizing: border-box; }
@media all and (min-width: 992px) { .zpcontainer-fluid .zpelem-storecollection { width: 992px; } }
@media all and (min-width: 1200px) { .zpcontainer-fluid .zpelem-storecollection { width: 1140px; } }
.zpcontainer-fluid .zpelem-storecollection .zpcarousel-arrow-left,
.zpcontainer-fluid .zpelem-storecollection .zpcarousel-arrow-right { background-color: transparent !important; }