/* ==========================================================================
   KEVI — Institutional Technology Design System
   Bộ nhận diện: KEVI PA1 – Data Node
   Tỷ lệ màu: Navy 55–60% · Brand Blue/Cyan 20–25% · Teal 5–10% · Gold 3–5%
   ========================================================================== */

:root{
  /* --- Bảng màu nhận diện --- */
  --kv-navy:        #0B1F3A;   /* Deep Tech Navy — màu chính */
  --kv-navy-700:    #12305B;
  --kv-navy-600:    #17406F;
  --kv-blue:        #007DD6;   /* Brand Blue — slogan, gradient, nhấn chắc chắn */
  --kv-blue-dark:   #0067B0;
  --kv-cyan:        #00AEEF;   /* Innovation Cyan — node, CTA, line kỹ thuật */
  --kv-cyan-soft:   #E3F5FD;
  --kv-teal:        #008894;   /* Emerald Teal — tăng trưởng, bền vững */
  --kv-teal-bright: #00B894;
  --kv-gold:        #D6A84F;   /* Vision Gold — dùng tiết chế */
  --kv-platinum:    #E6ECF2;   /* Platinum Gray — nền phụ */
  --kv-platinum-50: #F5F8FB;
  --kv-slate:       #52616B;   /* Slate Gray — caption, footer */
  --kv-line:        #DDE5EE;
  --kv-white:       #FFFFFF;

  /* --- Typography --- */
  --kv-font-display: "Be Vietnam Pro", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kv-font-body:    "Inter", "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;

  --kv-h1: clamp(2.1rem, 1.35rem + 2.6vw, 3.5rem);
  --kv-h2: clamp(1.65rem, 1.2rem + 1.5vw, 2.4rem);
  --kv-h3: clamp(1.15rem, 1rem + .5vw, 1.4rem);
  --kv-lead: clamp(1rem, .96rem + .28vw, 1.18rem);

  /* --- Layout --- */
  --kv-container: 1200px;
  --kv-gutter: clamp(1.15rem, .6rem + 2vw, 2.5rem);
  --kv-section: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  --kv-radius: 14px;
  --kv-radius-sm: 8px;

  /* --- Elevation (phẳng, không 3D/kim loại) --- */
  --kv-shadow-sm: 0 1px 2px rgba(11,31,58,.06), 0 4px 14px rgba(11,31,58,.05);
  --kv-shadow-md: 0 2px 6px rgba(11,31,58,.07), 0 18px 40px rgba(11,31,58,.09);

  --kv-grad: linear-gradient(90deg, var(--kv-navy) 0%, var(--kv-blue) 55%, var(--kv-cyan) 100%);
  --kv-ease: .28s cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset & nền tảng ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
body{
  margin:0; background:var(--kv-white); color:var(--kv-navy);
  font-family:var(--kv-font-body); font-size:16px; line-height:1.75;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--kv-blue); text-decoration:none; transition:color var(--kv-ease); }
a:hover{ color:var(--kv-cyan); }
h1,h2,h3,h4,h5,h6{
  font-family:var(--kv-font-display); color:var(--kv-navy);
  line-height:1.22; letter-spacing:-.015em; margin:0 0 .6em; font-weight:700;
}
h1{ font-size:var(--kv-h1); } h2{ font-size:var(--kv-h2); } h3{ font-size:var(--kv-h3); }
p{ margin:0 0 1.1em; }
ul,ol{ margin:0 0 1.1em; padding-left:1.25em; }
strong{ font-weight:600; }
hr{ border:0; border-top:1px solid var(--kv-line); margin:2.5rem 0; }
:focus-visible{ outline:3px solid var(--kv-cyan); outline-offset:3px; border-radius:4px; }

.kv-skip{
  position:absolute; left:-9999px; top:0; z-index:999; padding:.75rem 1.25rem;
  background:var(--kv-navy); color:#fff; border-radius:0 0 var(--kv-radius-sm) 0; font-weight:600;
}
.kv-skip:focus{ left:0; color:#fff; }
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* ---------- Layout helpers ---------- */
.kv-container{ width:100%; max-width:var(--kv-container); margin-inline:auto; padding-inline:var(--kv-gutter); }
.kv-container--narrow{ max-width:860px; }
.kv-section{ padding-block:var(--kv-section); position:relative; }
.kv-section--tint{ background:var(--kv-platinum-50); }
.kv-section--platinum{ background:var(--kv-platinum); }
.kv-section--navy{ background:var(--kv-navy); color:#D9E4F0; }
.kv-section--navy h1,.kv-section--navy h2,.kv-section--navy h3{ color:#fff; }
.kv-grid{ display:grid; gap:clamp(1rem,.5rem + 1.4vw,1.75rem); }
.kv-grid--2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.kv-grid--3{ grid-template-columns:repeat(auto-fit,minmax(285px,1fr)); }
.kv-grid--4{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }

/* ---------- Hoạ tiết Data Node (mờ, không rối) ---------- */
.kv-pattern{ position:relative; isolation:isolate; }
.kv-pattern::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px, currentColor 1.5px, transparent 1.6px),
    linear-gradient(to right, currentColor 1px, transparent 1px);
  background-size:34px 34px, 170px 170px;
  opacity:.07;
}

/* ---------- Nút ---------- */
.kv-btn{
  --_bg:var(--kv-cyan); --_fg:#04263C; --_bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--kv-font-display); font-weight:600; font-size:.95rem; line-height:1.2;
  padding:.85rem 1.6rem; border-radius:var(--kv-radius-sm); border:1.5px solid var(--_bd);
  background:var(--_bg); color:var(--_fg); cursor:pointer; text-align:center;
  transition:transform var(--kv-ease), background var(--kv-ease), color var(--kv-ease), border-color var(--kv-ease), box-shadow var(--kv-ease);
}
.kv-btn:hover{ transform:translateY(-2px); box-shadow:var(--kv-shadow-sm); color:var(--_fg); }
.kv-btn--primary{ --_bg:var(--kv-blue); --_fg:#fff; }
.kv-btn--primary:hover{ --_bg:var(--kv-blue-dark); }
.kv-btn--cyan{ --_bg:var(--kv-cyan); --_fg:#04263C; }
.kv-btn--cyan:hover{ --_bg:#22BEF5; }
.kv-btn--ghost{ --_bg:transparent; --_fg:var(--kv-navy); --_bd:var(--kv-line); }
.kv-btn--ghost:hover{ --_bd:var(--kv-blue); --_fg:var(--kv-blue); }
.kv-btn--on-navy{ --_bg:transparent; --_fg:#fff; --_bd:rgba(255,255,255,.38); }
.kv-btn--on-navy:hover{ --_bd:var(--kv-cyan); --_fg:var(--kv-cyan); }
.kv-btn--sm{ padding:.6rem 1.1rem; font-size:.875rem; }
.kv-btn svg{ width:1em; height:1em; flex:none; }

/* ---------- Tiêu đề khối ---------- */
.kv-eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--kv-font-display); font-size:.78rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--kv-blue); margin-bottom:.9rem;
}
.kv-eyebrow::before{ content:""; width:28px; height:2px; background:var(--kv-cyan); flex:none; }
.kv-section--navy .kv-eyebrow{ color:var(--kv-cyan); }
.kv-section-head{ max-width:760px; margin-bottom:clamp(2rem,1rem + 2.5vw,3.25rem); }
.kv-section-head--center{ margin-inline:auto; text-align:center; }
.kv-section-head--center .kv-eyebrow{ justify-content:center; }
.kv-section-head p{ color:var(--kv-slate); font-size:var(--kv-lead); margin-bottom:0; }
.kv-section--navy .kv-section-head p{ color:#AFC3DA; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.kv-topbar{
  background:var(--kv-navy); color:#AFC3DA; font-size:.82rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.kv-topbar__inner{ display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; align-items:center; justify-content:space-between; min-height:40px; padding-block:.35rem; }
.kv-topbar__list{ display:flex; flex-wrap:wrap; gap:.35rem 1.4rem; list-style:none; margin:0; padding:0; }
.kv-topbar__list li{ display:flex; align-items:center; gap:.45rem; }
.kv-topbar a{ color:#DDE9F5; }
.kv-topbar a:hover{ color:var(--kv-cyan); }
.kv-topbar svg{ width:14px; height:14px; color:var(--kv-cyan); flex:none; }
.kv-topbar__tag{ display:inline-flex; align-items:center; color:#DDE9F5; white-space:nowrap; }
.kv-topbar__tag b{ color:var(--kv-gold); font-weight:600; }

/* Dưới 1200px: bỏ địa chỉ dài để topbar luôn gói trong một dòng, giữ điện thoại và email. */
@media (max-width:1199px){
  .kv-topbar__list li:first-child{ display:none; }
}

/* Điện thoại: ẩn hẳn topbar — thanh gọi nhanh cố định ở đáy đã đảm nhiệm việc liên hệ,
   trả lại 139px cho nội dung ở màn hình đầu tiên. */
@media (max-width:767px){
  .kv-topbar{ display:none; }
}

.kv-header{ position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid var(--kv-line); }
.kv-header.is-stuck{ box-shadow:var(--kv-shadow-sm); }
.kv-header__inner{ display:flex; align-items:center; gap:1.5rem; min-height:76px; }
.kv-brand{ display:flex; align-items:center; gap:.85rem; flex:none; }
.kv-brand__logo{ height:38px; width:auto; }
.kv-nav{ margin-left:auto; }
.kv-nav ul{ display:flex; align-items:center; gap:.15rem; list-style:none; margin:0; padding:0; }
.kv-nav li{ position:relative; }
.kv-nav a{
  display:block; padding:.6rem .72rem; border-radius:var(--kv-radius-sm);
  font-family:var(--kv-font-display); font-weight:500; font-size:.94rem; color:var(--kv-navy);
  white-space:nowrap; /* nhãn menu không bị bẻ đôi giữa từ */
}
@media (min-width:1100px) and (max-width:1280px){
  .kv-nav a{ padding-inline:.5rem; font-size:.9rem; }
  .kv-header__inner{ gap:1rem; }
}
.kv-nav a:hover,.kv-nav .current-menu-item>a,.kv-nav .current_page_item>a{ color:var(--kv-blue); background:var(--kv-platinum-50); }
.kv-nav .current-menu-item>a{ font-weight:600; }
.kv-nav .sub-menu{
  position:absolute; top:calc(100% + 6px); left:0; min-width:260px; display:block;
  background:#fff; border:1px solid var(--kv-line); border-radius:var(--kv-radius); padding:.4rem;
  box-shadow:var(--kv-shadow-md); opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity var(--kv-ease), transform var(--kv-ease), visibility var(--kv-ease);
}
.kv-nav li:hover>.sub-menu,.kv-nav li:focus-within>.sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.kv-nav .sub-menu li{ display:block; }
.kv-nav .sub-menu a{ padding:.6rem .8rem; font-size:.9rem; font-weight:400; }
.kv-header__cta{ flex:none; }
.kv-nav__mobile-cta{ display:none; }
.kv-burger{
  display:none; margin-left:auto; width:44px; height:44px; border:1px solid var(--kv-line);
  border-radius:var(--kv-radius-sm); background:#fff; cursor:pointer; padding:0;
  align-items:center; justify-content:center;
}
.kv-burger span{ display:block; width:20px; height:2px; background:var(--kv-navy); position:relative; transition:background var(--kv-ease); }
.kv-burger span::before,.kv-burger span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--kv-navy); transition:transform var(--kv-ease), top var(--kv-ease); }
.kv-burger span::before{ top:-6px; } .kv-burger span::after{ top:6px; }
.kv-burger[aria-expanded="true"] span{ background:transparent; }
.kv-burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.kv-burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

@media (max-width:1099px){
  .kv-burger{ display:inline-flex; }
  .kv-header__cta{ display:none; }
  .kv-nav{
    position:absolute; inset:100% 0 auto; background:#fff; border-bottom:1px solid var(--kv-line);
    box-shadow:var(--kv-shadow-md); padding:.75rem var(--kv-gutter) 1.5rem; display:none; max-height:78vh; overflow:auto;
  }
  .kv-nav.is-open{ display:block; }
  .kv-nav ul{ display:block; }
  .kv-nav a{ padding:.8rem .25rem; border-bottom:1px solid var(--kv-platinum); border-radius:0; font-size:1rem; }
  .kv-nav .sub-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:0 0 0 1rem; }
  .kv-nav .sub-menu a{ border-bottom-style:dashed; }
  .kv-nav__mobile-cta{ margin-top:1.15rem; display:grid; gap:.6rem; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.kv-hero{
  position:relative; background:var(--kv-navy); color:#D9E4F0; overflow:hidden;
  padding-block:clamp(3.5rem,2rem + 6vw,6rem);
}
.kv-hero__bg{ position:absolute; inset:0; pointer-events:none; }
.kv-hero__bg::before{
  content:""; position:absolute; inset:0; color:#9FC7E8;
  background-image:
    radial-gradient(circle at 1px 1px, currentColor 1.4px, transparent 1.5px),
    linear-gradient(to right, currentColor 1px, transparent 1px);
  background-size:36px 36px, 180px 180px; opacity:.10;
}
.kv-hero__bg::after{
  content:""; position:absolute; right:-12%; top:-28%; width:70vw; height:70vw; max-width:900px; max-height:900px;
  background:radial-gradient(circle, rgba(0,174,239,.30) 0%, rgba(0,125,214,.13) 42%, transparent 70%);
}
.kv-hero__inner{ position:relative; display:grid; grid-template-columns:1fr; gap:clamp(2.5rem,1rem + 5vw,4rem); align-items:center; }
@media (min-width:992px){ .kv-hero__inner{ grid-template-columns:1.06fr .94fr; } }
.kv-hero__badge{
  display:inline-flex; align-items:center; gap:.6rem; padding:.42rem .95rem .42rem .55rem;
  border:1px solid rgba(0,174,239,.35); background:rgba(0,174,239,.10); border-radius:100px;
  font-family:var(--kv-font-display); font-size:.8rem; font-weight:500; color:#9FDCFA; margin-bottom:1.4rem;
}
.kv-hero__badge i{ width:8px; height:8px; border-radius:50%; background:var(--kv-cyan); box-shadow:0 0 0 4px rgba(0,174,239,.22); }
.kv-hero h1{ color:#fff; margin-bottom:1.1rem; letter-spacing:-.02em; }
.kv-hero h1 .kv-hl{
  background:linear-gradient(90deg,#3FC6F5,#00AEEF); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.kv-hero__slogan{
  font-family:var(--kv-font-display); font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  font-size:clamp(.78rem,.7rem + .3vw,.92rem); color:#3FC6F5; margin-bottom:1.5rem;
  display:flex; align-items:center; gap:.75rem;
}
.kv-hero__slogan::before{ content:""; width:34px; height:2px; background:var(--kv-gold); flex:none; }
.kv-hero__lead{ font-size:var(--kv-lead); color:#B9CCE1; max-width:56ch; margin-bottom:2rem; }
.kv-hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:2.5rem; }
.kv-hero__meta{ display:flex; flex-wrap:wrap; gap:1.75rem 2.75rem; padding-top:1.75rem; border-top:1px solid rgba(255,255,255,.12); }
.kv-hero__meta b{ display:block; font-family:var(--kv-font-display); font-size:1.7rem; font-weight:700; color:#fff; line-height:1.1; }
.kv-hero__meta b em{ font-style:normal; color:var(--kv-cyan); }
.kv-hero__meta span{ font-size:.85rem; color:#C0D3E8; }

/* Bảng "Data Node" bên phải hero */
.kv-hero__panel{
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.12);
  border-radius:calc(var(--kv-radius) + 4px); padding:clamp(1.35rem,.8rem + 1.4vw,2rem); backdrop-filter:blur(4px);
}
.kv-hero__panel-title{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-bottom:1rem; margin-bottom:1rem; border-bottom:1px solid rgba(255,255,255,.12);
  font-family:var(--kv-font-display); font-size:.8rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:#B6CCE2;
}
.kv-hero__panel-title em{ font-style:normal; display:inline-flex; align-items:center; gap:.4rem; color:var(--kv-teal-bright, #00B894); letter-spacing:.04em; text-transform:none; font-size:.8rem; }
.kv-hero__panel-title em::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--kv-teal-bright, #00B894); }
.kv-node-list{ list-style:none; margin:0; padding:0; display:grid; gap:.2rem; }
.kv-node-list li{ display:flex; gap:.95rem; padding:.72rem 0; }
.kv-node-list li+li{ border-top:1px dashed rgba(255,255,255,.13); }
.kv-node-list__dot{ flex:none; width:26px; display:flex; justify-content:center; padding-top:.42rem; }
.kv-node-list__dot i{ width:10px; height:10px; border-radius:50%; border:2.5px solid var(--kv-cyan); display:block; }
.kv-node-list li:nth-child(4) .kv-node-list__dot i{ border-color:var(--kv-gold); background:var(--kv-gold); }
.kv-node-list strong{ display:block; font-family:var(--kv-font-display); font-size:.96rem; font-weight:600; color:#fff; }
.kv-node-list span{ font-size:.86rem; color:#C0D3E8; line-height:1.55; }

/* ---------- Dải logo / thông tin pháp lý ---------- */
.kv-strip{ background:var(--kv-platinum); border-bottom:1px solid var(--kv-line); padding-block:1.35rem; }
.kv-strip__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem; }
.kv-strip__item{ display:flex; align-items:center; gap:.65rem; font-size:.88rem; color:var(--kv-slate); }
.kv-strip__item svg{ width:20px; height:20px; color:var(--kv-blue); flex:none; }
.kv-strip__item b{ color:var(--kv-navy); font-family:var(--kv-font-display); font-weight:600; }

/* ==========================================================================
   THẺ NỘI DUNG
   ========================================================================== */
.kv-card{
  position:relative; background:#fff; border:1px solid var(--kv-line); border-radius:var(--kv-radius);
  padding:clamp(1.35rem,.9rem + 1.1vw,1.9rem); overflow:hidden; height:100%;
  transition:transform var(--kv-ease), box-shadow var(--kv-ease), border-color var(--kv-ease);
}
.kv-card::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--kv-grad);
  transform:scaleX(0); transform-origin:left; transition:transform var(--kv-ease);
}
.kv-card:hover{ transform:translateY(-4px); box-shadow:var(--kv-shadow-md); border-color:transparent; }
.kv-card:hover::after{ transform:scaleX(1); }
.kv-card__icon{
  width:52px; height:52px; border-radius:var(--kv-radius-sm); display:grid; place-items:center;
  background:var(--kv-cyan-soft); color:var(--kv-blue); margin-bottom:1.15rem;
}
.kv-card__icon svg{ width:26px; height:26px; }
.kv-card h3{ margin-bottom:.55rem; }
.kv-card p{ color:var(--kv-slate); font-size:.95rem; margin-bottom:0; }
.kv-card__more{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1.1rem;
  font-family:var(--kv-font-display); font-weight:600; font-size:.88rem; color:var(--kv-blue);
}
.kv-card__more svg{ width:15px; height:15px; transition:transform var(--kv-ease); }
.kv-card:hover .kv-card__more svg{ transform:translateX(4px); }
.kv-card--teal .kv-card__icon{ background:#E1F7F1; color:#00926F; }
.kv-card--gold .kv-card__icon{ background:#FBF3E3; color:#A97F2C; }
.kv-card--navy{ background:var(--kv-navy); border-color:transparent; }
.kv-card--navy h3{ color:#fff; } .kv-card--navy p{ color:#AFC3DA; }
.kv-card--navy .kv-card__icon{ background:rgba(0,174,239,.15); color:var(--kv-cyan); }

/* Thẻ có số thứ tự (lĩnh vực) */
.kv-numbered{ counter-reset:kvnum; }
.kv-numbered .kv-card__num{
  font-family:var(--kv-font-display); font-size:.82rem; font-weight:700; letter-spacing:.1em;
  color:var(--kv-cyan); display:block; margin-bottom:.65rem;
}

/* ==========================================================================
   QUY TRÌNH 6 BƯỚC
   ========================================================================== */
.kv-steps{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); position:relative; }
.kv-step{
  position:relative; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.13);
  border-radius:var(--kv-radius); padding:1.6rem 1.5rem 1.5rem;
  transition:background var(--kv-ease), border-color var(--kv-ease), transform var(--kv-ease);
}
.kv-step:hover{ background:rgba(0,174,239,.09); border-color:rgba(0,174,239,.4); transform:translateY(-3px); }
.kv-step__num{
  display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%;
  background:var(--kv-grad); color:#fff; font-family:var(--kv-font-display); font-weight:700; font-size:1rem;
  margin-bottom:1rem;
}
.kv-step h3{ font-size:1.05rem; color:#fff; margin-bottom:.5rem; }
.kv-step p{ font-size:.9rem; color:#C2D6EA; margin-bottom:.9rem; }
.kv-step__out{
  display:block; padding-top:.85rem; border-top:1px dashed rgba(255,255,255,.16);
  font-size:.82rem; color:#B0C8E0;
}
.kv-step__out b{ color:var(--kv-cyan); font-weight:600; display:block; margin-bottom:.15rem;
  font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; font-family:var(--kv-font-display); }

/* ==========================================================================
   KHỐI 2 CỘT (giới thiệu / tại sao chọn)
   ========================================================================== */
.kv-split{ display:grid; gap:clamp(2rem,1rem + 3.5vw,3.75rem); align-items:center; }
@media (min-width:900px){ .kv-split{ grid-template-columns:1fr 1fr; } }
.kv-split--wide-left{ }
@media (min-width:900px){ .kv-split--wide-left{ grid-template-columns:1.1fr .9fr; } }

.kv-checklist{ list-style:none; margin:0 0 2rem; padding:0; display:grid; gap:.85rem; }
.kv-checklist li{ display:flex; gap:.8rem; align-items:flex-start; font-size:.97rem; color:var(--kv-slate); }
.kv-checklist svg{ width:20px; height:20px; flex:none; color:var(--kv-teal); margin-top:.28rem; }
.kv-checklist b{ color:var(--kv-navy); font-weight:600; }

/* Bảng giá trị cốt lõi K-E-V-I */
.kv-values{ display:grid; gap:1px; background:var(--kv-line); border:1px solid var(--kv-line); border-radius:var(--kv-radius); overflow:hidden; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.kv-value{ background:#fff; padding:1.6rem 1.5rem; }
.kv-value__key{
  font-family:var(--kv-font-display); font-size:2rem; font-weight:800; line-height:1;
  background:var(--kv-grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:.7rem; display:block;
}
.kv-value h3{ font-size:1.02rem; margin-bottom:.4rem; }
.kv-value p{ font-size:.9rem; color:var(--kv-slate); margin-bottom:0; }

/* Số liệu nổi bật */
.kv-stats{ display:grid; gap:1px; background:rgba(255,255,255,.14); grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); border-radius:var(--kv-radius); overflow:hidden; }
.kv-stat{ background:var(--kv-navy); padding:1.65rem 1.4rem; text-align:center; }
.kv-stat b{ display:block; font-family:var(--kv-font-display); font-size:clamp(1.6rem,1.2rem + 1.2vw,2.15rem); font-weight:700; color:#fff; line-height:1.15; }
.kv-stat b em{ font-style:normal; color:var(--kv-cyan); }
.kv-stat span{ font-size:.85rem; color:#9BB2CC; }

/* ==========================================================================
   CTA
   ========================================================================== */
.kv-cta{ position:relative; background:var(--kv-navy); color:#C8D8E9; overflow:hidden; }
.kv-cta::before{
  content:""; position:absolute; inset:0; color:#9FC7E8; opacity:.08;
  background-image:radial-gradient(circle at 1px 1px, currentColor 1.4px, transparent 1.5px); background-size:32px 32px;
  pointer-events:none; z-index:0;
}
.kv-cta::after{
  content:""; position:absolute; left:50%; bottom:-60%; width:900px; height:900px; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(0,125,214,.28) 0%, transparent 62%);
  pointer-events:none; z-index:0;
}
.kv-cta__inner{ position:relative; z-index:2; text-align:center; max-width:760px; margin-inline:auto; }
.kv-cta h2{ color:#fff; }
.kv-cta p{ font-size:var(--kv-lead); color:#DEECF8; margin-bottom:2rem; }
.kv-cta__actions{ display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; }

/* Form liên hệ nhanh trong khối CTA */
.kv-cta__form{
  display:grid; gap:.7rem; margin-inline:auto; max-width:820px; text-align:left;
  grid-template-columns:1fr; position:relative; z-index:3;
}
@media (min-width:760px){
  .kv-cta__form{ grid-template-columns:1fr 1fr 1fr auto; align-items:start; }
}
.kv-cta__field{ position:relative; z-index:4; }
.kv-cta__field input{
  width:100%; padding:.85rem 1rem; font-family:inherit; font-size:.95rem; color:#fff;
  background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.2);
  border-radius:var(--kv-radius-sm); position:relative; z-index:5; cursor:text;
  transition:border-color var(--kv-ease), background var(--kv-ease), box-shadow var(--kv-ease);
}
.kv-cta__field input::placeholder{ color:#A2BBD6; }
.kv-cta__field input:hover{ border-color:rgba(255,255,255,.34); }
.kv-cta__field input:focus{
  outline:none; background:rgba(255,255,255,.12); border-color:var(--kv-cyan);
  box-shadow:0 0 0 3px rgba(0,174,239,.22);
}
.kv-cta__field input:invalid:not(:placeholder-shown){ border-color:#E86A66; }
.kv-cta__form .kv-btn{ width:100%; padding-block:.88rem; position:relative; z-index:5; cursor:pointer; }
@media (min-width:760px){ .kv-cta__form .kv-btn{ width:auto; } }
.kv-cta__trap{ position:absolute; left:-9999px; margin:0; }

.kv-cta__alert-box{ max-width:640px; margin:0 auto; }
.kv-cta__alert{
  max-width:640px; margin:0 auto 1.35rem; padding:.95rem 1.25rem;
  border-radius:var(--kv-radius-sm); font-size:.94rem; text-align:left;
  animation:kvFadeIn .3s ease;
}
.kv-cta__alert--ok{
  background:rgba(0,184,148,.2);
  border:1px solid rgba(0,184,148,.4);
  border-left:4px solid var(--kv-teal-bright, #00B894);
  color:#A8F5E2;
  font-weight:500;
  box-shadow:0 4px 16px rgba(0,0,0,.15);
}
.kv-cta__alert--err{
  background:rgba(232,106,102,.18);
  border:1px solid rgba(232,106,102,.35);
  border-left:4px solid #E86A66;
  color:#FFD2D1;
  font-weight:500;
}

@keyframes kvFadeIn{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}

.kv-cta__alt{
  margin:1.5rem 0 0; font-size:.9rem; color:#B6CCE2;
}
.kv-cta__alt a{ color:var(--kv-cyan); border-bottom:1px solid rgba(0,174,239,.35); }
.kv-cta__alt a:hover{ color:#5FCEF8; border-bottom-color:currentColor; }

/* ==========================================================================
   BÀI VIẾT / TIN TỨC
   ========================================================================== */
.kv-post-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--kv-line); border-radius:var(--kv-radius); overflow:hidden; height:100%; transition:transform var(--kv-ease), box-shadow var(--kv-ease); }
.kv-post-card:hover{ transform:translateY(-4px); box-shadow:var(--kv-shadow-md); }
.kv-post-card__thumb{ aspect-ratio:16/9; background:var(--kv-platinum); overflow:hidden; }
.kv-post-card__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.kv-post-card:hover .kv-post-card__thumb img{ transform:scale(1.045); }
.kv-post-card__body{ padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.kv-post-card__meta{ font-size:.79rem; letter-spacing:.09em; text-transform:uppercase; color:var(--kv-cyan); font-family:var(--kv-font-display); font-weight:600; margin-bottom:.6rem; }
.kv-post-card h3{ font-size:1.08rem; margin-bottom:.55rem; }
.kv-post-card h3 a{ color:var(--kv-navy); }
.kv-post-card h3 a:hover{ color:var(--kv-blue); }
.kv-post-card p{ font-size:.92rem; color:var(--kv-slate); }
.kv-post-card__more{ margin-top:auto; padding-top:.9rem; font-family:var(--kv-font-display); font-weight:600; font-size:.87rem; color:var(--kv-blue); }

/* ---------- Page header ---------- */
.kv-page-hero{ position:relative; background:var(--kv-navy); color:#C8D8E9; padding-block:clamp(2.75rem,1.5rem + 4vw,4.5rem); overflow:hidden; }
.kv-page-hero::before{
  content:""; position:absolute; inset:0; color:#9FC7E8; opacity:.09;
  background-image:radial-gradient(circle at 1px 1px, currentColor 1.4px, transparent 1.5px), linear-gradient(to right, currentColor 1px, transparent 1px);
  background-size:34px 34px, 170px 170px;
  pointer-events:none; z-index:0;
}
.kv-page-hero__inner{ position:relative; z-index:1; max-width:820px; }
.kv-page-hero h1{ color:#fff; margin-bottom:.65rem; }
.kv-page-hero p{ color:#AFC3DA; font-size:var(--kv-lead); margin-bottom:0; }
.kv-breadcrumb{ font-size:.83rem; color:#8FA9C4; margin-bottom:1rem; }
.kv-breadcrumb a{ color:#AFC3DA; } .kv-breadcrumb a:hover{ color:var(--kv-cyan); }
.kv-breadcrumb span{ margin-inline:.5rem; opacity:.5; }

/* ---------- Nội dung bài viết ---------- */
.kv-content{ font-size:1.02rem; }
.kv-content>*+*{ margin-top:1.15rem; }
.kv-content h2{ margin-top:2.4rem; padding-top:.2rem; }
.kv-content h3{ margin-top:1.9rem; }
.kv-content ul li,.kv-content ol li{ margin-bottom:.5rem; color:#31465F; }
.kv-content blockquote{
  margin:2rem 0; padding:1.25rem 1.5rem; background:var(--kv-platinum-50);
  border-left:3px solid var(--kv-cyan); border-radius:0 var(--kv-radius-sm) var(--kv-radius-sm) 0; color:var(--kv-navy);
}
.kv-content blockquote p:last-child{ margin-bottom:0; }
.kv-content img{ border-radius:var(--kv-radius); }
.kv-content table{ width:100%; border-collapse:collapse; margin:1.75rem 0; font-size:.94rem; }
.kv-content th,.kv-content td{ border:1px solid var(--kv-line); padding:.8rem 1rem; text-align:left; vertical-align:top; }
.kv-content thead th{ background:var(--kv-navy); color:#fff; font-family:var(--kv-font-display); font-weight:600; border-color:var(--kv-navy); }
.kv-content tbody tr:nth-child(even){ background:var(--kv-platinum-50); }
.kv-content code{ background:var(--kv-platinum); padding:.15em .45em; border-radius:4px; font-size:.9em; }

/* Bảng thông tin doanh nghiệp */
.kv-infotable{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--kv-line); border-radius:var(--kv-radius); overflow:hidden; font-size:.95rem; }
.kv-infotable th,.kv-infotable td{ padding:.9rem 1.15rem; text-align:left; border-bottom:1px solid var(--kv-line); }
.kv-infotable th{ width:34%; font-family:var(--kv-font-display); font-weight:600; color:var(--kv-navy); background:var(--kv-platinum-50); }
.kv-infotable td{ color:var(--kv-slate); }
.kv-infotable tr:last-child th,.kv-infotable tr:last-child td{ border-bottom:0; }

/* ---------- Sidebar / widget ---------- */
.kv-layout{ display:grid; gap:clamp(2rem,1rem + 3vw,3.25rem); }
@media (min-width:992px){ .kv-layout--sidebar{ grid-template-columns:minmax(0,1fr) 320px; } }
.kv-widget{ background:#fff; border:1px solid var(--kv-line); border-radius:var(--kv-radius); padding:1.5rem; margin-bottom:1.5rem; }
.kv-widget__title{ font-size:.98rem; margin-bottom:1rem; padding-bottom:.7rem; border-bottom:1px solid var(--kv-line); position:relative; }
.kv-widget__title::after{ content:""; position:absolute; left:0; bottom:-1px; width:44px; height:2px; background:var(--kv-cyan); }
.kv-widget ul{ list-style:none; margin:0; padding:0; }
.kv-widget li{ padding:.5rem 0; border-bottom:1px dashed var(--kv-line); font-size:.93rem; }
.kv-widget li:last-child{ border-bottom:0; }

/* ---------- Form ---------- */
.kv-form{ display:grid; gap:1.05rem; }
.kv-field label{ display:block; font-family:var(--kv-font-display); font-weight:600; font-size:.88rem; color:var(--kv-navy); margin-bottom:.4rem; }
.kv-field label .req{ color:#D93B3B; }
.kv-field input,.kv-field select,.kv-field textarea,
.kv-form input[type=text],.kv-form input[type=email],.kv-form input[type=tel],.kv-form textarea,.kv-form select{
  width:100%; padding:.78rem .95rem; font-family:inherit; font-size:.95rem; color:var(--kv-navy);
  background:#fff; border:1.5px solid var(--kv-line); border-radius:var(--kv-radius-sm);
  transition:border-color var(--kv-ease), box-shadow var(--kv-ease);
}
.kv-field textarea{ min-height:150px; resize:vertical; }
.kv-field input:focus,.kv-field select:focus,.kv-field textarea:focus{
  outline:none; border-color:var(--kv-blue); box-shadow:0 0 0 3px rgba(0,125,214,.14);
}
.kv-field ::placeholder{ color:#9AA8B5; }
.kv-form__row{ display:grid; gap:1.05rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.kv-form__note{ font-size:.82rem; color:var(--kv-slate); }
.kv-alert{ padding:.9rem 1.1rem; border-radius:var(--kv-radius-sm); font-size:.92rem; margin-bottom:1.2rem; }
.kv-alert--ok{ background:#E1F7F1; color:#00694F; border-left:3px solid var(--kv-teal); }
.kv-alert--err{ background:#FDECEC; color:#96201F; border-left:3px solid #D93B3B; }

/* Khối liên hệ */
.kv-contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:1.35rem; }
.kv-contact-list li{ display:flex; gap:1rem; }
.kv-contact-list__ic{ flex:none; width:44px; height:44px; border-radius:var(--kv-radius-sm); background:var(--kv-cyan-soft); color:var(--kv-blue); display:grid; place-items:center; }
.kv-contact-list__ic svg{ width:21px; height:21px; }
.kv-contact-list b{ display:block; font-family:var(--kv-font-display); font-size:.79rem; letter-spacing:.11em; text-transform:uppercase; color:var(--kv-slate); font-weight:600; margin-bottom:.15rem; }
.kv-contact-list span,.kv-contact-list a{ color:var(--kv-navy); font-size:.98rem; }
.kv-contact-list a:hover{ color:var(--kv-blue); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.kv-footer{ background:var(--kv-navy); color:#BDD1E7; font-size:.92rem; position:relative; }
.kv-footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--kv-grad); }
.kv-footer__main{ padding-block:clamp(2.75rem,1.5rem + 3.5vw,4.25rem); display:grid; gap:2.25rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.kv-footer__brand-logo{ height:36px; width:auto; margin-bottom:1.15rem; }
.kv-footer__slogan{ font-family:var(--kv-font-display); font-size:.78rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:#3FC6F5; margin-bottom:1.1rem; }
.kv-footer p{ line-height:1.7; }
.kv-footer h4{ font-family:var(--kv-font-display); font-size:.83rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:#fff; margin-bottom:1.15rem; }
.kv-footer ul{ list-style:none; margin:0; padding:0; }
.kv-footer li{ margin-bottom:.62rem; }
.kv-footer a{ color:#BDD1E7; }
.kv-footer a:hover{ color:var(--kv-cyan); }
.kv-footer__contact li{ display:flex; gap:.7rem; align-items:flex-start; }
.kv-footer__contact svg{ width:16px; height:16px; color:var(--kv-cyan); flex:none; margin-top:.32rem; }
.kv-footer__bottom{ border-top:1px solid rgba(255,255,255,.1); padding-block:1.4rem; display:flex; flex-wrap:wrap; gap:.6rem 1.75rem; align-items:center; justify-content:space-between; font-size:.85rem; }
.kv-footer__bottom p{ margin:0; }
.kv-footer__tag{ color:#A2BBD6; }
.kv-footer__tag b{ color:var(--kv-gold); font-weight:600; }

/* ---------- Nút gọi nhanh (mobile) ---------- */
.kv-quickbar{ display:none; }
@media (max-width:767px){
  .kv-quickbar{
    display:grid; grid-template-columns:1fr 1fr 1fr; position:fixed; left:0; right:0; bottom:0; z-index:90;
    background:#fff; border-top:1px solid var(--kv-line); box-shadow:0 -4px 18px rgba(11,31,58,.09);
  }
  .kv-quickbar a{ display:flex; align-items:center; justify-content:center; gap:.4rem; padding:.85rem .25rem;
    font-family:var(--kv-font-display); font-weight:600; font-size:.82rem; color:var(--kv-navy); }
  .kv-quickbar a+a{ border-left:1px solid var(--kv-line); }
  .kv-quickbar a:nth-child(2){ color:#0068FF; }
  .kv-quickbar a:nth-child(3){ color:var(--kv-blue); }
  .kv-quickbar svg{ width:16px; height:16px; flex:none; }
  body{ padding-bottom:56px; }
}

/* ---------- Phân trang ---------- */
.kv-pagination{ display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin-top:2.75rem; }
.kv-pagination .page-numbers{
  display:inline-grid; place-items:center; min-width:42px; height:42px; padding:0 .7rem;
  border:1px solid var(--kv-line); border-radius:var(--kv-radius-sm); color:var(--kv-navy);
  font-family:var(--kv-font-display); font-weight:600; font-size:.9rem;
}
.kv-pagination .page-numbers:hover{ border-color:var(--kv-blue); color:var(--kv-blue); }
.kv-pagination .current{ background:var(--kv-navy); border-color:var(--kv-navy); color:#fff; }

/* ---------- Icon: cỡ mặc định an toàn ---------- */
.kv-ic{ width:1.25em; height:1.25em; flex:none; }

/* ---------- Sidebar ---------- */
@media (min-width:992px){
  .kv-sidebar{ position:sticky; top:100px; align-self:start; }
}

/* ---------- Bình luận ---------- */
.kv-comments .comment-list{ margin:0 0 2rem; }
.kv-comments .comment-list li{ padding:1.1rem 0; border-top:1px solid var(--kv-line); }
.kv-comments .comment-list .children{ list-style:none; margin:0; padding-left:1.5rem; border-left:2px solid var(--kv-platinum); }
.kv-comments .comment-meta{ font-size:.85rem; color:var(--kv-slate); margin-bottom:.4rem; }
.kv-comments .comment-author .fn{ font-family:var(--kv-font-display); font-weight:600; color:var(--kv-navy); font-style:normal; }
.kv-comments .avatar{ border-radius:50%; margin-right:.7rem; vertical-align:middle; }
.kv-comments .reply{ font-size:.85rem; font-weight:600; }

/* ---------- Tiện ích ---------- */
/* Chỉ ẩn khi JavaScript hoạt động — không có JS thì nội dung vẫn hiển thị đầy đủ. */
.kv-js .kv-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.kv-js .kv-reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .kv-js .kv-reveal{ opacity:1; transform:none; } }
.kv-lead{ font-size:var(--kv-lead); color:var(--kv-slate); }
.kv-mb0{ margin-bottom:0; }
.alignwide{ max-width:1100px; margin-inline:auto; }
.aligncenter{ margin-inline:auto; text-align:center; }
.wp-caption-text,.wp-block-image figcaption{ font-size:.85rem; color:var(--kv-slate); text-align:center; }

/* ---------- In ấn ---------- */
@media print{
  .kv-header,.kv-topbar,.kv-footer,.kv-quickbar,.kv-cta{ display:none !important; }
  body{ color:#000; font-size:12pt; }
  a{ color:#000; text-decoration:underline; }
}

/* ---------- Sơ đồ trực quan hoá chu trình CNTT ---------- */
.kv-diagram{
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--kv-radius); padding:clamp(1.2rem, 1rem + 1.2vw, 2rem);
  margin-top:2.75rem; backdrop-filter:blur(6px);
}
.kv-diagram__header{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  margin-bottom:1.5rem; padding-bottom:.85rem; border-bottom:1px solid rgba(255,255,255,.12);
}
.kv-diagram__title{
  font-family:var(--kv-font-display); font-size:.92rem; font-weight:700; color:#fff;
  letter-spacing:.05em; text-transform:uppercase; display:flex; align-items:center; gap:.5rem; margin:0;
}
.kv-diagram__badge{
  font-family:var(--kv-font-display); font-size:.75rem; font-weight:600; color:var(--kv-cyan);
  background:rgba(0,174,239,.12); padding:.25rem .65rem; border-radius:100px; border:1px solid rgba(0,174,239,.3);
}
.kv-diagram__flow{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:1rem; position:relative;
}
.kv-dflow-item{
  background:rgba(11,31,58,.65); border:1px solid rgba(0,174,239,.22); border-radius:var(--kv-radius-sm);
  padding:1.1rem 1rem; position:relative; transition:border-color var(--kv-ease), transform var(--kv-ease), box-shadow var(--kv-ease);
}
.kv-dflow-item:hover{ border-color:var(--kv-cyan); transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,174,239,.12); }
.kv-dflow-num{
  display:inline-block; font-family:var(--kv-font-display); font-size:.72rem; font-weight:700;
  color:var(--kv-gold); letter-spacing:.08em; margin-bottom:.4rem;
}
.kv-dflow-name{
  font-family:var(--kv-font-display); font-size:.88rem; font-weight:600; color:#fff;
  margin-bottom:.45rem; line-height:1.3;
}
.kv-dflow-out{
  font-size:.78rem; color:#BDD1E7; line-height:1.45;
}
.kv-dflow-out b{ color:var(--kv-cyan); font-weight:600; }