/* ==========================================================================
   VietSoftware — style thành phần + hệ thống đáp ứng
   theme.json lo màu/chữ/khoảng cách. File này lo những gì theme.json không
   diễn đạt được: điểm ngắt màn hình, trạng thái, hiệu ứng, lưới có kiểm soát.

   Điểm ngắt dùng thống nhất:
     <  600px  điện thoại
     >= 600px  điện thoại ngang / máy tính bảng nhỏ
     >= 900px  máy tính bảng
     >= 1024px máy tính xách tay  (menu ngang bắt đầu hiện)
     >= 1280px màn hình lớn
   ========================================================================== */

:root{
  --vs-ease: cubic-bezier(.4,0,.2,1);
  --vs-line: rgba(11,17,32,.10);
  --vs-line-dark: rgba(255,255,255,.12);
}

html{ -webkit-text-size-adjust:100%; }
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; }

/* Không để bất cứ thứ gì đẩy trang rộng ngang */
img,svg,video,canvas,iframe{ max-width:100%; height:auto; }
/* Chuỗi dài (email, URL) không phá vỡ bố cục trên màn hẹp */
p,li,h1,h2,h3,h4,h5,h6{ overflow-wrap:break-word; }

:focus:not(:focus-visible){ outline:none; }
:focus-visible{ outline:2px solid var(--wp--preset--color--primary); outline-offset:2px; border-radius:4px; }
.vs-dark :focus-visible{ outline-color:var(--wp--preset--color--accent); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
html{ scroll-behavior:smooth; }

/* ════════════════════════════════════════════════════════════════════════
   ĐẦU TRANG
   ════════════════════════════════════════════════════════════════════════ */
.vs-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--vs-line);
}
/* Hàng đầu trang không bao giờ được xuống dòng */
.vs-header .vs-header-row{ flex-wrap:nowrap !important; gap:1rem; }
.vs-header .wp-block-site-title{ white-space:nowrap; }
.vs-header .wp-block-site-title a{ text-decoration:none; color:var(--wp--preset--color--contrast); }

.vs-logo{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px; flex:0 0 36px;
  background:var(--wp--preset--gradient--brand);
  color:#fff; font-weight:700; font-size:.9375rem; letter-spacing:-.04em;
  box-shadow:0 6px 16px rgba(29,78,216,.28);
}

/* Menu ngang (chỉ từ 1024px trở lên) */
.vs-header .wp-block-navigation{ flex-wrap:nowrap; }
.vs-header .wp-block-navigation .wp-block-navigation-item__content{
  color:var(--wp--preset--color--contrast);
  padding:.5rem 0; position:relative; white-space:nowrap;
  transition:color .18s var(--vs-ease);
}
.vs-header .wp-block-navigation .wp-block-navigation-item__content:hover{
  color:var(--wp--preset--color--primary); text-decoration:none;
}
.vs-header .wp-block-navigation .wp-block-navigation-item > a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--wp--preset--color--primary);
  transform:scaleX(0); transform-origin:left; transition:transform .22s var(--vs-ease);
}
.vs-header .wp-block-navigation .wp-block-navigation-item > a:hover::after{ transform:scaleX(1); }

/* ── Đẩy ngưỡng menu overlay từ 600px (mặc định WordPress) lên 1024px ──
   Không có đoạn này, ở khổ máy tính bảng menu ngang bị ép xuống 2 dòng. */
@media (max-width: 1023.98px){
  .vs-header .wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown){
    display:flex !important;
  }
  .vs-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){
    display:none !important;
  }
}
/* Nút mở/đóng menu */
.vs-header .wp-block-navigation__responsive-container-open,
.vs-header .wp-block-navigation__responsive-container-close{
  color:var(--wp--preset--color--contrast);
  padding:.4rem; border-radius:8px;
}
.vs-header .wp-block-navigation__responsive-container-open svg,
.vs-header .wp-block-navigation__responsive-container-close svg{
  width:30px !important; height:30px !important; fill:currentColor;
}
/* Vùng chạm tối thiểu 44px theo khuyến nghị khả dụng trên di động.
   PHẢI nằm trong media query: đặt display:flex ở ngoài sẽ ghi đè display:none
   của WordPress và làm nút menu hiện cả trên máy tính. */
@media (max-width: 1023.98px){
  .vs-header .wp-block-navigation__responsive-container-open,
  .vs-header .wp-block-navigation__responsive-container-close{
    min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center;
  }
}

/* Lớp phủ menu khi mở */
.wp-block-navigation__responsive-container.is-menu-open{
  background:#fff; padding:1.5rem clamp(1.125rem,0.6rem + 2.2vw,2.5rem) 3rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  padding-top:2rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  gap:.25rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
  width:100%; border-bottom:1px solid var(--vs-line);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  display:block; width:100%;
  padding:1.05rem 0 !important;          /* vùng chạm đủ lớn cho ngón tay */
  font-size:1.15rem; font-weight:600;
  color:var(--wp--preset--color--contrast);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a::after{ display:none; }

/* Nút kêu gọi ở đầu trang: không gãy chữ, ẩn ở màn rất hẹp */
.vs-header-cta .wp-block-button__link{
  white-space:nowrap; padding:.65rem 1.15rem; font-size:.875rem;
}
/* Độ ưu tiên phải cao hơn "body .is-layout-flex{display:flex}" của WordPress (0,1,1) */
@media (max-width: 559.98px){ .vs-header .vs-header-cta{ display:none; } }

/* ════════════════════════════════════════════════════════════════════════
   THÀNH PHẦN
   ════════════════════════════════════════════════════════════════════════ */
.vs-eyebrow{
  display:block;
  font-size:.8125rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--wp--preset--color--primary);
  margin-bottom:.75rem !important;
}
.vs-eyebrow.is-on-dark{ color:var(--wp--preset--color--accent); }

.vs-badge{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.45rem 1.05rem; border-radius:999px;
  background:rgba(29,78,216,.08); border:1px solid rgba(29,78,216,.18);
  color:var(--wp--preset--color--primary-dark);
  font-size:.875rem; font-weight:500; line-height:1.45;
  max-width:100%; text-align:left;
}
.vs-badge.is-on-dark{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); color:#DCE6FF; }
.vs-badge .vs-dot{ width:7px; height:7px; border-radius:50%; background:#06B6D4; flex:0 0 7px; }
@media (max-width: 479.98px){
  .vs-badge{ font-size:.8125rem; padding:.4rem .85rem; }
}

.vs-gradient-text{
  white-space:nowrap;                 /* giữ nguyên cụm, không tách "tăng" / "tốc" */
  background:var(--wp--preset--gradient--brand);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ── Thẻ ── */
.vs-card{
  height:100%;
  border:1px solid var(--vs-line);
  border-radius:16px; background:#fff;
  transition:transform .25s var(--vs-ease), box-shadow .25s var(--vs-ease), border-color .25s var(--vs-ease);
}
@media (hover:hover){                      /* không đẩy thẻ lên khi chạm màn hình cảm ứng */
  .vs-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--wp--preset--shadow--lift);
    border-color:rgba(29,78,216,.32);
  }
  .vs-card.is-on-dark:hover{ border-color:rgba(6,182,212,.42); background:rgba(255,255,255,.06); }
}
.vs-card.is-on-dark{ background:rgba(255,255,255,.04); border-color:var(--vs-line-dark); }

.vs-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:13px; flex:0 0 48px;
  background:rgba(29,78,216,.09); color:var(--wp--preset--color--primary);
}
.vs-icon.is-on-dark{ background:rgba(6,182,212,.14); color:var(--wp--preset--color--accent); }

.vs-step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; flex:0 0 42px;
  background:var(--wp--preset--gradient--brand); color:#fff;
  font-weight:700; font-size:1rem;
}

.vs-chip{
  display:inline-block; padding:.5rem 1rem; border-radius:10px;
  background:var(--wp--preset--color--surface);
  border:1px solid var(--vs-line);
  font-size:.9375rem; font-weight:500; color:var(--wp--preset--color--contrast);
  transition:border-color .2s var(--vs-ease), color .2s var(--vs-ease);
}
@media (hover:hover){
  .vs-chip:hover{ border-color:var(--wp--preset--color--primary); color:var(--wp--preset--color--primary); }
}
.vs-chip-row{ display:flex; flex-wrap:wrap; gap:.6rem; }

/* ── Mục nền tối ── */
.vs-dark{ color:#E7ECF7; }
.vs-dark :is(h1,h2,h3,h4,h5,h6){ color:#fff; }
.vs-dark p{ color:#B8C4DC; }
.vs-dark .wp-block-separator{ border-color:var(--vs-line-dark); color:var(--vs-line-dark); }

.vs-grid-bg{ position:relative; overflow:hidden; isolation:isolate; }
.vs-grid-bg::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 100%);
}

/* ════════════════════════════════════════════════════════════════════════
   LƯỚI CÓ KIỂM SOÁT
   WordPress sinh sẵn grid-template-columns cho khối lưới, nhưng cột của nó
   không đổi theo màn hình đúng ý. Nhân đôi tên lớp để tăng độ ưu tiên và
   giành quyền quyết định số cột ở từng điểm ngắt.
   ════════════════════════════════════════════════════════════════════════ */
.vs-grid-2.vs-grid-2,
.vs-grid-3.vs-grid-3,
.vs-grid-4.vs-grid-4{ display:grid; }

.vs-grid-3.vs-grid-3{ grid-template-columns:1fr; }
@media (min-width:640px){  .vs-grid-3.vs-grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .vs-grid-3.vs-grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.vs-grid-2.vs-grid-2{ grid-template-columns:1fr; }
@media (min-width:760px){  .vs-grid-2.vs-grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Số liệu: 2 cột trên điện thoại, 4 cột từ máy tính bảng */
.vs-grid-4.vs-grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:760px){  .vs-grid-4.vs-grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* Quy trình 5 bước: 1 → 2 → 3 → 5 cột */
.vs-grid-5.vs-grid-5{ display:grid; grid-template-columns:1fr; }
@media (min-width:600px){  .vs-grid-5.vs-grid-5{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:960px){  .vs-grid-5.vs-grid-5{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1280px){ .vs-grid-5.vs-grid-5{ grid-template-columns:repeat(5,minmax(0,1fr)); } }

/* Ô số liệu */
.vs-stat-value{
  line-height:1.02; margin:0 0 .3rem;
  font-weight:700; letter-spacing:-.035em;
  font-size:clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
}
.vs-stat-label{ margin:0; font-size:.875rem; line-height:1.4; }

/* ── Nút ── */
.wp-block-button__link{
  transition:transform .18s var(--vs-ease), background-color .2s var(--vs-ease), box-shadow .2s var(--vs-ease);
  text-align:center;
}
@media (hover:hover){ .wp-block-button__link:hover{ transform:translateY(-1px); } }
.wp-block-button.is-style-outline > .wp-block-button__link{ border-width:1.5px; font-weight:600; }

/* Nút chỉ kéo hết chiều ngang trên điện thoại thật, không phải trên tablet */
@media (max-width: 599.98px){
  .vs-hero-actions{ width:100%; }
  .vs-hero-actions .wp-block-button{ width:100%; }
  .vs-hero-actions .wp-block-button__link{ width:100%; display:block; }
}

/* ── Danh sách có dấu tích ── */
.vs-check-list{ list-style:none !important; padding-left:0 !important; margin-left:0 !important; }
.vs-check-list li{ position:relative; padding-left:1.9rem; margin-bottom:.8rem; line-height:1.6; }
.vs-check-list li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:1.15rem; height:1.15rem; border-radius:50%;
  background:var(--wp--preset--color--primary);
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.55 17.6 4.4 12.45l1.4-1.4 3.75 3.72 8.65-8.62 1.4 1.4z'/%3E%3C/svg%3E") center/86% no-repeat,
             linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.55 17.6 4.4 12.45l1.4-1.4 3.75 3.72 8.65-8.62 1.4 1.4z'/%3E%3C/svg%3E") center/86% no-repeat,
       linear-gradient(#000,#000);
  mask-composite:exclude;
}
.vs-dark .vs-check-list li::before{ background:var(--wp--preset--color--accent); }
.vs-dark .vs-check-list li{ color:#C6D2E8; }

/* ── Bài viết ── */
.vs-post-card{ overflow:hidden; display:flex; flex-direction:column; }
.vs-post-card .wp-block-post-featured-image{ margin:0; }
.vs-post-card img{ aspect-ratio:16/10; object-fit:cover; width:100%; display:block; }
.wp-block-post-title a{ color:inherit; text-decoration:none; }
.wp-block-post-title a:hover{ color:var(--wp--preset--color--primary); text-decoration:none; }
.wp-block-post-terms a,.wp-block-post-terms{ color:var(--wp--preset--color--primary); }

/* Ảnh đại diện bài đơn không bao giờ cao quá màn hình */
.wp-block-post-featured-image img{ border-radius:16px; max-height:70vh; object-fit:cover; }

/* ── Bảng, mã, nội dung dài không phá bố cục trên điện thoại ── */
.wp-block-table{ overflow-x:auto; }
.wp-block-table table{ min-width:32rem; }
.wp-block-code,pre{ overflow-x:auto; }

/* ── Chân trang ── */
.vs-footer a{ color:#B8C4DC; text-decoration:none; font-weight:400; }
.vs-footer a:hover{ color:#fff; text-decoration:underline; }
.vs-footer .wp-block-heading{
  font-size:.8125rem; text-transform:uppercase; letter-spacing:.09em;
  color:#8DA0C0; font-weight:600;
}
.vs-footer-list{ list-style:none !important; padding-left:0 !important; margin-left:0 !important; }
.vs-footer-list li{ margin-bottom:.15rem; }

/* Chân trang: 1 → 2 → 4 cột */
.vs-footer-cols.vs-footer-cols{ display:grid; grid-template-columns:1fr; gap:2.25rem; }
@media (min-width:620px){  .vs-footer-cols.vs-footer-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.5rem; } }
@media (min-width:1024px){ .vs-footer-cols.vs-footer-cols{ grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:3rem; } }

.vs-footer-bottom{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between; }
@media (max-width:479.98px){ .vs-footer-bottom{ justify-content:flex-start; } }

/* ── Hai cột nội dung (chuyển đổi số) ── */
.vs-split.vs-split{ display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center; }
@media (min-width:900px){ .vs-split.vs-split{ grid-template-columns:1.05fr 1fr; gap:4rem; } }

/* Lưới chỉ số trong thẻ "Kết quả doanh nghiệp thường thấy" */
.vs-kpi-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.35rem 1rem; }
.vs-kpi-value{
  margin:0 0 .15rem; font-weight:700; letter-spacing:-.03em; line-height:1.05;
  color:var(--wp--preset--color--primary);
  font-size:clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
}
.vs-kpi-label{ margin:0; font-size:.875rem; line-height:1.45; color:#475467; }

/* Cân độ dài các dòng của tiêu đề lớn (trình duyệt hỗ trợ text-wrap) */
h1,h2{ text-wrap:balance; }
h3,h4{ text-wrap:pretty; }

/* Nhóm công nghệ: 1 cột ở màn hẹp để các thẻ xếp thành hàng thay vì mỗi thẻ một dòng */
.vs-grid-tech.vs-grid-tech{ display:grid; grid-template-columns:1fr; gap:2rem; }
@media (min-width:600px){ .vs-grid-tech.vs-grid-tech{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .vs-grid-tech.vs-grid-tech{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:2.25rem; } }