/* ===== softvn-fonts ===== */
/* ==========================================================================
 * FONT TOÀN SITE — 2026-09-08: đổi từ Inter tự host sang FONT HỆ THỐNG (system-ui).
 *
 * Lịch sử: 2026-09-07 đổi Arial → Inter tự host (12 file woff2) vì người dùng đòi "pro/ent/SaaS clean".
 * 2026-09-08 người dùng "muốn thống nhất hoàn toàn về system-ui" — lý do: popup báo giá của plugin dùng chung
 * `softvn-admin-toolkit` ép `system-ui …!important` nên 42 phần tử trong popup không bao giờ theo Inter được,
 * trừ khi đè lại; thống nhất về system-ui thì mọi thứ khớp và bỏ luôn 228 KB font mỗi trang.
 *
 * Chuỗi font CHÉP ĐÚNG từ `softvn-admin-toolkit/modules/popups/assets/popup.css` để popup và phần còn lại
 * của trang ra cùng một mặt chữ. Đừng đổi chuỗi này lệch đi.
 *
 * File Inter vẫn còn ở `assets/fonts/inter/` (486 KB) — KHÔNG xoá, để quay lại được: khôi phục file này từ
 * /root/font-before-20260908/fonts.css và bật lại 2 dòng preload trong functions.php (~dòng 257).
 *
 * Lưu ý về độ đậm: font hệ thống không phải máy nào cũng có 4 nét. Windows/Segoe UI có Semibold nên 600 đúng;
 * Android/Roboto không có 600 → trình duyệt quy về 700. Chấp nhận, đây là hệ quả cố hữu của font hệ thống.
 * ======================================================================== */

html body,
html body button,
html body input,
html body select,
html body textarea,
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .nav > li > a,
html body .button {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}


/* ===== softvn-base-css ===== */
/* Shared utility and common styles */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 150px;
  color: #000;
  text-align: left;
  font-weight: 700; /* 2026-09-08: Inter tu host chi co 400/500/600/700; 650/800/900/bold deu duoc trinh duyet quy ve 700 (do be rong render: bang nhau tuyet doi) -> ghi thang 700, khong doi pixel */
  font-size: 12px;
  border-radius: 3px;
  padding: 9px 0;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 130%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.img-svn {
  border: solid 1px #02010126;
  border-radius: 4px;
}

.star-rating {
  display: inline-block;
}

.lightbox-content {
  border-radius: 5px;
}

.breadcrumbs {
  text-transform: uppercase;
  color: #1c72aa;
  font-weight: 700;
  letter-spacing: 0;
  padding: 0;
  font-size: 90%;
}

#breadcrumbs {
  margin-bottom: 10px;
  font-size: 14px;
  color: #1c72aa;
  text-transform: none;
}

.breadcrumbs a {
  color: #1c72aa;
  margin-left: 0 !important;
  font-weight: 600;
}

.ghichu-cam {
  background: #f1592a;
  text-align: center;
  padding: 2px;
  border-radius: 3px 3px 0 0;
}

.ghichu-xanh {
  background: none;
  font-size: 88%;
  padding: 10px;
  border: 1px solid #d9d9d9;
  border-radius: 0 0 5px 5px;
}

.shopslide-kmtt-title {
  background: #f1592a;
  text-align: center;
  padding: 2px;
  border-radius: 3px 3px 0 0;
}

.shopslide-kmtt-content {
  background: none;
  font-size: 88%;
  padding: 10px;
  border: 1px solid #d9d9d9;
  border-radius: 0 0 5px 5px;
}

.shopslide-other1 {
  background: #f1592a;
  text-align: center;
  padding: 2px;
  border-radius: 3px 3px 0 0;
}

.shopslide-other1-content {
  background: none;
  font-size: 88%;
  padding: 10px;
  border: 1px solid #d9d9d9;
  border-radius: 0 0 5px 5px;
}

.shopslide-policy1-title {
  background: #f1592a;
  text-align: center;
  padding: 2px;
  border-radius: 3px 3px 0 0;
}

.shopslide-policy1-content {
  background: none;
  font-size: 88%;
  padding: 10px;
  border: 1px solid #d9d9d9;
  border-radius: 0 0 5px 5px;
}

.cslinkcolor {
  color: #1e73be;
}

.buynowlinkcolor {
  color: white;
}

.imgbd {
  border-width: 1px;
  border-color: #0e71eb;
  border-style: solid;
}

.social-button,
.social-icons .button.icon:not(.is-outline),
.social-icons .button.icon:hover {
  background-color: white !important;
  border-color: currentColor !important;
}

.social-button > i,
.social-button > span,
.social-icons .button.icon:not(.is-outline) > i,
.social-icons .button.icon:not(.is-outline) > span,
.social-icons .button.icon:hover > i,
.social-icons .button.icon:hover > span {
  color: #333 !important;
}

.col-inner > .img:not(:last-child),
.col > .img:not(:last-child) {
  margin-bottom: 0;
}

.has-hover:hover .badge-outline .badge-inner,
.banner,
.header-top,
.badge-inner {
  background-color: white;
}

.text-comment-pt {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.text-comment-pt > * {
  margin-right: 10px;
  padding: 2px 5px;
  border-radius: 5px;
  border: 1px solid #c1c1c1;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 5px;
}

.text-comment-pt > *:hover {
  color: #fff;
  background: #fe2c6d;
  border-color: #fe2c6d;
}

/* 2026-09-07 tối ưu tải: woo.css không còn nạp ở bài viết, nhưng block 8804 "Gửi báo giá" (.gbg01-svn) có trong 12 bài viết → chép 10 luật sang đây (toàn site, 1,7 KB) */
.gbg01-svn {
  position: relative;
  width: 100%;
  margin: 6px 0 2px;
  padding: 34px 28px 24px;
  background: linear-gradient(180deg, #fffdfb 0%, #ffffff 100%);
  border: 1.5px dashed #ff7a45;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.05);
  font-size: 15px;
}
.gbg01-svn .tieu-de {
  position: absolute;
  top: -16px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  margin: 0;
  background: linear-gradient(135deg, #ff6a2b 0%, #ff5a1f 100%);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 24px rgba(255, 106, 43, 0.24);
  border-radius: 10px;
  max-width: calc(100% - 40px);
}
.gbg01-svn .tieu-de i {
  font-size: 14px;
  opacity: 0.95;
}
.gbg01-svn ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.gbg01-svn ul li {
  position: relative;
  margin: 0;
  padding: 0 0 0 28px;
  color: #24364b;
  font-size: 16px;
  line-height: 1.75;
}
.gbg01-svn ul li + li {
  margin-top: 12px;
}
.gbg01-svn ul li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7a45 0%, #ff5a1f 100%);
  box-shadow: 0 0 0 4px rgba(255, 122, 69, 0.14);
}
.gbg01-svn {
    padding: 38px 18px 20px;
    border-radius: 14px;
  }
.gbg01-svn .tieu-de {
    top: -14px;
    left: 14px;
    right: 14px;
    justify-content: center;
    padding: 10px 14px;
    font-size: 13px;
    text-align: center;
    max-width: none;
  }
.gbg01-svn ul li {
    padding-left: 24px;
    font-size: 15px;
    line-height: 1.7;
  }

/* ---------------------------------------------------------------------------
   THANG CỠ CHỮ — dọn nốt các cỡ lẻ do `em` mặc định của Flatsome sinh ra.
   2026-09-08. Đây là bốn chỗ cuối còn lệch thang 17 bước; mọi dịch chuyển ≤ 0,8px.
   Nguồn của các cỡ lẻ là quy tắc theo `em` của theme, KHÔNG có khai báo px nào
   để sửa — nên phải đè bằng px ở đây.
   --------------------------------------------------------------------------- */
.nav > li > a.nav-top-link { font-size: 13px; }   /* 12,8 → 13  menu header (0,8em) */
.softvn-product-meta { font-size: 13px; }         /* 12,8 → 13  dòng "hãng · loại" trên thẻ SP */
.copyright-footer strong { font-size: 13px; }     /* 12,96 và 13,68 → 13  (em lồng nhau) */
.single-product .product-title.product_title { font-size: 28px; }  /* 27,2 → 28  tiêu đề SP (1,7em) */
.screen-reader-text { font-size: 14px; }          /* 14,4 → 14  chữ chỉ dành cho trình đọc màn hình */
.copyright-footer { font-size: 13px; }            /* 14,4 → 13; hai <strong> trong theme mod
                                                     footer_left_text đã bỏ font-size:90%/95% inline
                                                     (backup /root/theme-mod-footer_left_text-before-20260908.txt) */
.single-product .product-info .breadcrumbs { font-size: 14px; }   /* 13,6 → 14  breadcrumb trang SP */
.woocommerce-Tabs-panel .button { font-size: 16px; }              /* 15,52 → 16  nút trong nội dung mô tả */
.wpat-hp-field label { font-size: 14px; }         /* 14,4 → 14  nhãn bẫy spam của form (không hiện) */
.home-sr-h1, .svc-sr { font-size: 28px; }         /* 27,2 → 28  H1 ẩn cho SEO */
.svpg-sr { font-size: 14px; }                     /* 14,4 → 14  nhãn ẩn ô tìm ở trang Hỏi đáp */


/* ===== softvn-header-css ===== */
/* Header, navigation, search and floating menu */
.menu-float-right {
  width: 100px;
  position: fixed;
  top: 35%;
  left: 0;
  z-index: 99999;
}

.menu-float-right #group534 {
  position: absolute;
  left: 15px;
}

.menu-float-right ul {
  padding: 0;
}

.menu-float-right #group534 ul li {
  background: rgba(255, 255, 255, 0.01);
  position: relative;
  list-style: none;
  margin-bottom: 13px;
}

.menu-float-right #group534 ul li img {
  width: 36px;
}

.searchform-wrapper form {
  margin-bottom: 0;
  border: solid 1px #d81012;
  border-radius: 5px;
}

.form-flat input:not([type=submit]),
.form-flat select,
.form-flat textarea {
  background-color: rgb(255, 255, 255);
  border-color: rgb(255, 255, 255);
  border-radius: 99px;
  box-shadow: none;
  color: currentColor !important;
}

.search-field.mb-0 {
  border-color: #222c37;
  border-radius: 5px 0 0 5px;
}

.nav-outline > li > a {
  border-radius: 5px;
  border: 1.5px solid transparent;
}

.accordion-title.active,
.has-icon-bg .icon .icon-inner,
.logo a,
.primary.is-underline,
.primary.is-link,
.badge-outline .badge-inner,
.nav-outline > li.active > a,
.nav-outline > li.active > a,
.cart-icon strong,
[data-color='primary'],
.is-outline.primary {
  color: rgb(0, 131, 255);
  font-size: 92%;
}

.nav-dropdown {
  position: absolute;
  min-width: 260px;
  max-height: 0;
  z-index: 9;
  padding: 20px 0;
  opacity: 0;
  margin: 0;
  transition: opacity 0.25s;
  box-shadow: 1px 1px 5px #1e73be;
  border: 1px solid #212780;
  color: #777;
  background-color: #fff;
  text-align: left;
  display: table;
  left: -99999px;
}

.nav-dropdown.nav-dropdown-bold > li > a {
  margin: 0 10px;
  padding-left: 10px;
  border-radius: 5px;
  padding-right: 5px;
  color: #f15a29;
}

.nav-dropdown-bold .nav-column li > a,
.nav-dropdown.nav-dropdown-bold > li > a {
  margin: 0 10px;
  padding-left: 10px;
  border-radius: 5px;
  padding-right: 5px;
}

.nav > li > a:hover,
.nav > li.active > a,
.nav > li.current > a,
.nav > li > a.active,
.nav > li > a.current,
.nav-dropdown li.active > a,
.nav-column li.active > a,
.nav-dropdown > li > a:hover,
.nav-column li > a:hover {
  color: #f1592a;
}

.live-search-results,
.header-block .live-search-results,
.header .search-form .live-search-results {
  background-color: rgb(255, 255, 255);
}


/* =========================================================
   SOFTVN HEADER FINAL OVERRIDES
   Migrated from Additional CSS
   ========================================================= */

/* Menubar */
#wide-nav,
.header-bottom,
.nav-dark {
  background: linear-gradient(180deg, #e5530f 0%, #df4f0c 100%) !important;
  box-shadow: 0 4px 16px rgba(223, 79, 12, 0.16);
  position: relative;
  z-index: 30;
}

#wide-nav .container,
.header-bottom .container {
  min-height: 48px;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 0;
}

.header-nav > li {
  position: relative;
  margin: 0 2px;
}

.header-nav > li:not(:last-child):after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-50%);
  pointer-events: none;
}

.header-nav > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px !important;
  border-radius: 10px;
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  transition: background-color .22s ease, transform .22s ease, opacity .22s ease;
}

.header-nav > li > a:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: #ffffff;
  transform: translateX(-50%);
  transition: width .22s ease;
}

.header-nav > li:hover > a {
  background: rgba(255, 255, 255, 0.08);
}

.header-nav > li:hover > a:after {
  width: 56%;
}

.header-nav > li.current-menu-item > a,
.header-nav > li.current_page_item > a,
.header-nav > li.current-menu-ancestor > a,
.header-nav > li.current_page_ancestor > a,
.header-nav > li.active > a,
.header-nav > li.current-dropdown > a {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.header-nav > li.current-menu-item > a:after,
.header-nav > li.current_page_item > a:after,
.header-nav > li.current-menu-ancestor > a:after,
.header-nav > li.current_page_ancestor > a:after,
.header-nav > li.active > a:after,
.header-nav > li.current-dropdown > a:after {
  width: 64%;
}

.header-nav > li.menu-item-has-children > a .icon-angle-down,
.header-nav > li.has-dropdown > a .icon-angle-down {
  font-size: .8em;
  margin-left: 6px;
  opacity: .9;
}

/* Header search */
.header .ux-search-box,
.header .searchform,
.header .search-form {
  background: #fff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .06) !important;
  overflow: hidden !important;
  transition: box-shadow .2s ease, border-color .2s ease !important;
}

.header .ux-search-box:hover,
.header .searchform:hover,
.header .search-form:hover {
  border-color: #d1d5db !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .08) !important;
}

.header .ux-search-box:focus-within,
.header .searchform:focus-within,
.header .search-form:focus-within {
  border-color: #f97316 !important;
  box-shadow:
    0 6px 18px rgba(15, 23, 42, .10),
    0 0 0 3px rgba(249, 115, 22, .10) !important;
}

.header .search-field {
  height: 44px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding-left: 18px !important;
  padding-right: 46px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #111827 !important;
}

.header .search-field::placeholder {
  color: #94a3b8 !important;
  font-weight: 400 !important;
}

.header .ux-search-box button,
.header .searchform button,
.header .search-form button {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #64748b !important;
  transition: color .2s ease !important;
}

.header .ux-search-box button:hover,
.header .searchform button:hover,
.header .search-form button:hover {
  color: #ea580c !important;
  transform: none !important;
}

.header .ux-search-box i,
.header .searchform i,
.header .search-form i {
  font-size: 18px !important;
  line-height: 1 !important;
}

.header .searchform-wrapper,
.header .search-form-wrapper {
  margin: 0 !important;
}




/* =========================================================
   HOMEPAGE HEADER ALIGN HOTFIX
   ========================================================= */

/* search box */
.home #masthead .softvn-search-saas{
  position: relative !important;
  top: 7px !important;
}

.home #masthead .softvn-search-saas .softvn-search-form{
  margin: 0 !important;
}

.home #masthead .softvn-search-saas .softvn-search-input{
  margin: 0 !important;
}

/* right meta */
.home #masthead .header-main .flex-row{
  align-items: center !important;
}

.home #masthead .softvn-header-right-meta{
  position: relative !important;
  top: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.home #masthead .softvn-header-right-meta a{
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

.home #masthead .softvn-header-right-meta span,
.home #masthead .softvn-header-right-meta strong{
  line-height: 1 !important;
}

.home #masthead .softvn-header-right-meta > a > span:first-child{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.home.customize-support #masthead .softvn-header-right-meta{
  top: 6px !important;
}

/* =========================================================
   HEADER MENU SPACING FIX
   ========================================================= */

.header-nav > li > a{
  padding: 0 10px !important;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
}

.header-nav > li{
  margin: 0 !important;
}

.header-nav{
  gap: 6px;
}

.header-nav > li > a:hover{
  color: #fff;
}

.header-nav > li.menu-item-has-children > a:after{
  margin-left: 4px;
}

.header-nav .button{
  margin-left: 14px;
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 600;
}
/* =========================================================
   2026-09-05 — ĐỒNG BỘ BO GÓC VỚI HERO (bo 8px)
   Đã thử đóng khung thanh menu cùng bề rộng hero; người dùng chốt GIỮ thanh cam tràn màn hình.
   Chỉ giữ phần bo góc thống nhất: ô tìm kiếm (inline 12px) và nút báo giá (inline 6/7px) về 8px,
   mục menu bo 6px. Thanh cam vẫn cách hero 8px (2px ở đây + gap 6px của trang).
   ========================================================= */
#wide-nav,
.header-bottom,
.nav-dark {
  margin-bottom: 2px; /* margin chứ không padding: padding tô cam thêm 2px, khe vẫn 6px */
}

.header-nav > li > a {
  border-radius: 6px;
}

.softvn-search-input {
  border-radius: 8px !important;
}

#wide-nav .html_topbar_left > span {
  border-radius: 9px !important;
}

#wide-nav .html_topbar_left a {
  border-radius: 8px !important;
}

/* =========================================================
   2026-09-05 — DẢI TRÊN (logo · tìm kiếm · hotline · bản đồ) KIỂU SAAS, bản 2
   Markup block "hotline-banner" (#3038) đã viết lại bằng class — mọi style ở đây, không còn inline.
   Ô tìm kiếm: phím tắt Ctrl/Cmd+K vẫn hoạt động (softvn-enterprise-search.js) nhưng KHÔNG vẽ keycap — người dùng bỏ;
   placeholder tự gõ gợi ý. Hotline = chip nhấn màu cam nhạt + chấm xanh "đang trực". Bản đồ = chip trung tính.
   ========================================================= */
#masthead .softvn-search-saas { position: relative; max-width: 560px; margin: 0; }
#masthead .softvn-search-form { position: relative; margin: 0; }
#masthead .softvn-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #64748b; pointer-events: none; z-index: 2; transition: color .15s ease; }
#masthead .softvn-search-icon svg { width: 16px; height: 16px; display: block; }
#masthead .softvn-search-input {
  width: 100%; height: 44px; line-height: 44px; margin: 0; padding: 0 16px 0 40px;
  border: 1px solid #d5dbe3; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  /* 2026-09-05: trạng thái nghỉ từng là nền xám #f8fafc viền #e2e8f0 → trông chìm; giờ nền trắng, viền rõ hơn, bóng 1px */
  font-size: 14px; font-weight: 400; color: #0f172a; cursor: text; -webkit-appearance: none; appearance: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
#masthead .softvn-search-input::placeholder { color: #475569; font-weight: 400; }
#masthead .softvn-search-form:hover .softvn-search-input { border-color: #b9c2cf; box-shadow: 0 2px 6px rgba(15, 23, 42, .08); }
#masthead .softvn-search-form:hover .softvn-search-icon { color: #f1592a; }
#masthead .softvn-search-form:focus-within .softvn-search-input { border-color: #f1592a; background: #fff; box-shadow: 0 0 0 3px rgba(241, 89, 42, .12); }

/* 2026-09-05 (bản 3, người dùng chốt): HOTLINE giữ dạng chip cam nhạt (nhãn HOTLINE, icon cam, chấm xanh đang trực);
   riêng BẢN ĐỒ về dạng nhẹ: icon + chữ, không khung, không nhãn phụ (bản chip hai dòng "SHOWROOM" bị chê nặng nề,
   công ty không có showroom). Đừng làm lại. */
#masthead .softvn-header-right-meta { display: flex; align-items: center; justify-content: flex-end; gap: 10px; white-space: nowrap; }
#masthead .softvn-chip { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0; border: 0; background: transparent; color: #0f172a; text-decoration: none !important; transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease; }
#masthead .softvn-chip:hover { color: #f1592a; }
#masthead .softvn-chip__icon { position: relative; width: 18px; height: 18px; flex: 0 0 18px; display: flex; align-items: center; justify-content: center; color: #64748b; }
#masthead .softvn-chip__icon svg { width: 18px; height: 18px; display: block; }
#masthead .softvn-chip__text { display: flex; flex-direction: column; gap: 2px; line-height: 1.1; }
#masthead .softvn-chip__text small { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; line-height: 1; }
#masthead .softvn-chip__text strong { font-size: 14px; font-weight: 600; letter-spacing: 0; color: inherit; line-height: 1.1; }
/* 2026-09-05: bỏ badge Bản đồ; nút NHẬN BÁO GIÁ chuyển từ thanh cam lên đây (theme mod header_elements_bottom_right = [],
   backup /root/theme-mods-header-cta-before-20260905.json). Nút cam đặc = CTA chính, chip Hotline cam nhạt = phụ. */
/* 2026-09-05 (chốt): nút NHẬN BÁO GIÁ viền NAVY #14355f 1.5px, chữ navy, nền trắng — màu bổ túc của cam, không tranh với
   chip Hotline. Trước đó: cam đặc (nặng) → viền cam (hai phần tử cam cạnh nhau giành nhau). Hover: viền + chữ chuyển cam. */
#masthead .softvn-cta { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 1.5px solid #14355f; border-radius: 8px; background: #fff; color: #14355f !important; font-size: 13px; font-weight: 600; letter-spacing: 0; text-decoration: none !important; transition: background .15s ease, color .15s ease, border-color .15s ease; }
#masthead .softvn-cta:hover { border-color: #f1592a; color: #e04a1f !important; background: #fff8f5; }
#masthead .softvn-cta svg { width: 16px; height: 16px; display: block; }
/* hotline: chip nhấn */
#masthead .softvn-chip--hotline { gap: 10px; padding: 0 14px 0 8px; border: 1px solid #ffd8c2; border-radius: 8px; background: #fff4ee; }
#masthead .softvn-chip--hotline:hover { color: #0f172a; background: #fff; border-color: #f7b58f; transform: translateY(-1px); }
#masthead .softvn-chip--hotline .softvn-chip__icon { width: 28px; height: 28px; flex-basis: 28px; border-radius: 7px; background: #f1592a; color: #fff; }
#masthead .softvn-chip--hotline .softvn-chip__icon svg { width: 15px; height: 15px; }
#masthead .softvn-chip--hotline .softvn-chip__icon::after { content: ""; position: absolute; right: -3px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; animation: softvn-pulse 2s ease-out infinite; }
#masthead .softvn-chip--hotline strong { color: #c2410c; }
@keyframes softvn-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
@media (prefers-reduced-motion: reduce) { #masthead .softvn-chip--hotline .softvn-chip__icon::after { animation: none; } }

/* 2026-09-05 — ô tìm kiếm cách ĐỀU logo và cụm hotline. Trước: ô ghim đầu cột 8/12 (khe trái 75px, khe phải 164px).
   Hàng trong header-block thành flex: cột tìm kiếm co giãn và căn giữa phần còn lại, cột phải rộng theo nội dung. */
#masthead .header-block-block-1 > .row { display: flex; flex-wrap: nowrap; align-items: center; }
#masthead .header-block-block-1 > .row > .col:first-child { flex: 1 1 auto; width: auto; max-width: none; display: flex; justify-content: center; }
#masthead .header-block-block-1 > .row > .col:last-child { flex: 0 0 auto; width: auto; max-width: none; }
#masthead .softvn-search-saas { width: 100%; }
/* Khe trái 75px là do cột logo rộng cố định 200px (theme mod logo_width) trong khi ảnh chỉ 155px, cộng margin-right 30px.
   Desktop: cột logo rộng theo ảnh, bỏ margin → cột tìm kiếm bắt đầu ngay sau logo, ô căn giữa trong cột = cách đều hai bên. */
@media (min-width: 850px) {
  #masthead .header-inner > .logo { width: auto !important; max-width: none !important; margin-right: 0 !important; }
  #masthead .header-block-block-1 > .row > .col:first-child > .col-inner { width: 100%; }
  #masthead .softvn-search-saas { margin: 0 auto; }
}

/* 2026-09-05: đổi chỗ — nút Nhận báo giá bên trái, chip Hotline ngoài cùng bên phải (thứ tự DOM giữ nguyên, đổi bằng order) */
#masthead .softvn-header-right-meta .softvn-cta { order: 1; }
#masthead .softvn-header-right-meta .softvn-chip--hotline { order: 2; }

/* 2026-09-05 (chốt): thanh menu hạ nhiệt — cam trầm #d9480f, PHẲNG (bỏ gradient + bóng đổ). Cam #e5530f bão hoà + gradient
   cộng hưởng với hero mới rất nhiều màu nên "nóng". Đã cân nhắc và KHÔNG chọn navy. Đè khối "Menubar" ở trên cùng file. */
#wide-nav,
.header-bottom,
.nav-dark {
  background: #d9480f !important;
  box-shadow: none !important;
}


/* ===== softvn-mega-menu-css ===== */
/* SoftVN — mega menu (2026-09-07): panel Sản phẩm / Khuyến mại / Partners + dropdown Tin tức. Cùng hệ màu 7 họ pastel với các trang tĩnh. */
.header-nav li.menu-item-has-block > .nav-dropdown{padding:0;border:1px solid #eef2f6;border-top:0;border-radius:0 0 14px 14px;box-shadow:0 24px 48px -12px rgba(15,23,42,.18);overflow:hidden}
.svmm{font-size:14px;line-height:1.4;color:#0f172a;text-align:left;text-transform:none;letter-spacing:0}
.svmm *{box-sizing:border-box}
.svmm ul{list-style:none;margin:0;padding:0}
.svmm li{margin:0;padding:0}
.svmm a{text-decoration:none;color:inherit}
.svmm__h{display:flex;align-items:center;gap:6px;margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#94a3b8}
.svmm__h svg{width:14px;height:14px}
.svmm__grid{display:grid;grid-template-columns:250px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 290px;gap:0 28px;padding:24px 28px 22px}
.svmm__col{min-width:0}
.svmm__cats{padding-right:24px;border-right:1px solid #eef2f6}
.svmm__cats li a{display:flex;align-items:center;gap:10px;padding:5px 8px;border-radius:8px;font-size:14px;font-weight:500;color:#0f172a;transition:background-color .12s}
.svmm__cats li a:hover{background:#f1f5f9;color:#14355f}
.svmm__cats li a i{margin-left:auto;font-style:normal;font-size:12px;color:#94a3b8}
.svmm__cats li a > svg{width:14px;height:14px;margin-left:auto;color:#94a3b8}
.svmm__all{margin-top:6px !important;padding-top:6px !important;border-top:1px solid #eef2f6}
.svmm__all a{font-weight:600;color:#14355f}
.svmm__ic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:8px;background:#f1f5f9;color:#14355f}
.svmm__ic img{width:18px;height:18px;object-fit:contain;filter:contrast(1.25) saturate(1.3)}
.svmm__ic svg{width:15px;height:15px}
.svmm__ic--blue{background:#e2eafc;color:#1d4ed8}.svmm__ic--green{background:#dcf3e7;color:#0f7a4f}.svmm__ic--violet{background:#ebe5fb;color:#6d28d9}.svmm__ic--orange{background:#ffe8d9;color:#c2410c}
.svmm__ic--teal{background:#d8f1f0;color:#0f766e}.svmm__ic--rose{background:#fce4ee;color:#be185d}.svmm__ic--amber{background:#fdefcf;color:#b45309}.svmm__ic--nv{background:#e9eef5;color:#14355f}
.svmm__group li a{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:6px;font-size:13px;color:#334155;transition:background-color .12s,color .12s}
.svmm__group li a:hover{background:#f8fafc;color:#14355f}
.svmm__group li a i{margin-left:auto;font-style:normal;font-size:11px;color:#94a3b8}
.svmm__t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svmm__more{display:inline-flex;align-items:center;gap:6px;margin:8px 0 0 6px;font-size:13px;font-weight:600;color:#14355f}
.svmm__more svg{width:14px;height:14px;transition:transform .12s}
.svmm__more:hover{color:#e04a1f}
.svmm__more:hover svg{transform:translateX(2px)}
.svmm__feat{padding-left:24px;border-left:1px solid #eef2f6}
.svmm__prod{display:flex;gap:10px;align-items:flex-start;padding:6px;margin:0 0 2px;border-radius:10px;transition:background-color .12s}
.svmm__prod:hover{background:#f8fafc}
.svmm__prod .svmm__img{display:flex;align-items:center;justify-content:center;flex:none;width:46px;height:46px;border:1px solid #e5e9ef;border-radius:8px;background:#fff;overflow:hidden}
.svmm__prod .svmm__img img{width:40px;height:40px;object-fit:contain}
.svmm__pt{display:flex;flex-direction:column;gap:2px;min-width:0}
.svmm__pt b{font-size:13px;font-weight:600;line-height:1.3;color:#0f172a;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.svmm__pt small{font-size:12px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svmm__pt em{font-style:normal;font-size:12px;font-weight:600;color:#14355f}
.svmm__pt em.is-contact{color:#e04a1f}
.svmm__links{margin:12px 0 0;padding:12px 0 0;border-top:1px solid #eef2f6}
.svmm__links a{display:flex;align-items:center;gap:8px;padding:6px 6px;border-radius:8px;font-size:13px;font-weight:600;color:#0f172a;transition:background-color .12s,color .12s}
.svmm__links a svg{width:16px;height:16px;color:#94a3b8;flex:none}
.svmm__links a i{margin-left:auto;font-style:normal;font-size:12px;font-weight:500;color:#e04a1f;white-space:nowrap}
.svmm__links a:hover{background:#f8fafc;color:#14355f}
.svmm__links a:hover svg{color:#14355f}
/* chân panel */
.svmm__foot{display:flex;align-items:center;gap:14px;padding:12px 28px;border-top:1px solid #eef2f6;background:#f8fafc;font-size:13px;color:#475569}
.svmm__foot > span{flex:1;min-width:0}
.svmm__btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:8px;background:#14355f;color:#fff !important;font-size:13px;font-weight:600;white-space:nowrap}
.svmm__btn svg{width:15px;height:15px}
.svmm__btn:hover{background:#0f2a4c}
.svmm__tel{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#14355f;white-space:nowrap}
.svmm__tel svg{width:15px;height:15px;color:#94a3b8}
.svmm__tel:hover{color:#e04a1f}
/* đầu panel (hãng / khuyến mại) */
.svmm__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:22px 28px 0}
.svmm__head p{margin:0;font-size:13px;color:#64748b}
.svmm__head .svmm__h{margin-bottom:4px}
.svmm__head .svmm__more{margin:0 0 2px}
/* hãng */
.svmm__brands{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;padding:16px 28px 22px}
.svmm__brand{display:flex;align-items:center;gap:10px;min-width:0;padding:9px 10px;border:1px solid #eef2f6;border-radius:10px;background:#fff;transition:border-color .12s,box-shadow .12s,transform .12s}
.svmm__brand img{width:36px;height:36px;flex:none;object-fit:contain;border-radius:8px}
.svmm__brand span{display:flex;flex-direction:column;min-width:0}
.svmm__brand b{font-size:13px;font-weight:600;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svmm__brand small{font-size:11px;color:#64748b}
.svmm__brand:hover{border-color:#c7d0dc;box-shadow:0 4px 12px rgba(15,23,42,.06);transform:translateY(-1px)}
/* khuyến mại */
.svmm__deals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:16px 28px 22px}
.svmm__deal{display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px;border:1px solid #eef2f6;border-radius:12px;background:#fff;transition:border-color .12s,box-shadow .12s,transform .12s}
.svmm__deal:hover{border-color:#c7d0dc;box-shadow:0 6px 16px rgba(15,23,42,.06);transform:translateY(-1px)}
.svmm__deal .svmm__img{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;border-radius:8px;background:#f8fafc;overflow:hidden}
.svmm__deal .svmm__img img{max-width:80%;max-height:80%;object-fit:contain}
.svmm__off{position:absolute;left:8px;top:8px;padding:3px 7px;border-radius:6px;background:#e04a1f;color:#fff;font-size:11px;font-weight:700;font-style:normal;line-height:1}
.svmm__deal b{font-size:13px;font-weight:600;line-height:1.3;color:#0f172a;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.svmm__price{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:700;color:#14355f}
.svmm__price s{font-size:12px;font-weight:500;color:#94a3b8}
/* Tin tức: dropdown chuẩn Flatsome + chấm màu, số bài, cột Bài mới */
.svmm-dot{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#94a3b8;vertical-align:1px}
.svmm-dot--blue{background:#1d4ed8}.svmm-dot--green{background:#0f7a4f}.svmm-dot--violet{background:#6d28d9}.svmm-dot--orange{background:#c2410c}.svmm-dot--teal{background:#0f766e}.svmm-dot--rose{background:#be185d}.svmm-dot--amber{background:#b45309}
.svmm-n{margin-left:8px;font-style:normal;font-size:11px;font-weight:500;color:#94a3b8}
.nav-dropdown-bold .nav-column li>a:hover .svmm-n,.nav-dropdown-bold .nav-column li>a:hover .svmm-dot{color:#fff}
.header-nav .nav-dropdown > li.svmm-news{padding:0 20px 0 24px;border-left:1px solid #eef2f6;min-width:300px;vertical-align:top}
.svmm-news{text-transform:none;letter-spacing:0;font-size:14px}
.svmm-news .svmm__h{margin-bottom:10px}
.svmm-news__item{display:flex;gap:10px;align-items:flex-start;padding:6px;margin:0 0 4px;border-radius:10px;color:#0f172a;transition:background-color .12s}
.svmm-news__item:hover{background:#f8fafc}
.svmm-news__item img{width:72px;height:50px;flex:none;object-fit:cover;border-radius:6px}
.svmm-news__item span{display:flex;flex-direction:column;gap:3px;min-width:0}
.svmm-news__item b{font-size:13px;font-weight:600;line-height:1.35;color:#0f172a;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.svmm-news__item small{font-size:12px;color:#94a3b8}
.svmm-news .svmm__more{margin:4px 0 0 6px}
.nav-sidebar li.svmm-news{display:none}
/* co giãn theo bề rộng */
@media (max-width:1240px){.svmm__grid{grid-template-columns:230px minmax(0,1fr) minmax(0,1fr) 260px;gap:0 22px;padding:20px 22px}.svmm__group:nth-child(4){display:none}.svmm__brands{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1000px){.svmm__grid{grid-template-columns:220px minmax(0,1fr) minmax(0,1fr)}.svmm__feat{display:none}.svmm__brands{grid-template-columns:repeat(3,minmax(0,1fr))}.svmm__deals{grid-template-columns:repeat(2,minmax(0,1fr))}.svmm__foot{flex-wrap:wrap}}
/* ---- lớp SaaS thêm (người dùng 2026-09-07: "khá ngon, cần thêm saas thêm chút") ---- */
.header-nav li.has-dropdown > .nav-dropdown{transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.header-nav li.has-dropdown.current-dropdown > .nav-dropdown{transform:translateY(0)}
.svmm__hic{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:#f1f5f9;color:#14355f}
.svmm__hic svg{width:12px;height:12px}
.svmm__h{color:#64748b;gap:8px}
.svmm__ic svg{width:15px;height:15px}
.svmm__cats li a > svg,.svmm__group li a > svg{width:14px;height:14px;flex:none;margin-left:6px;color:#94a3b8;opacity:0;transform:translateX(-4px);transition:opacity .12s,transform .12s}
.svmm__cats li a:hover > svg,.svmm__group li a:hover > svg{opacity:1;transform:none;color:#14355f}
.svmm__cats li a i,.svmm__group li a i{margin-left:auto}
.svmm__all a > svg{opacity:1;transform:none}
.svmm__links a .svmm__ic{width:26px;height:26px;border-radius:7px}
.svmm__links a .svmm__ic svg{width:13px;height:13px;color:inherit}
.svmm__live{display:inline-block;width:7px;height:7px;margin-right:2px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:svmmPulse 1.8s ease-out infinite}
@keyframes svmmPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 6px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@media (prefers-reduced-motion:reduce){.svmm__live{animation:none}.header-nav li.has-dropdown > .nav-dropdown{transform:none}}
.svmm__search{display:inline-flex;align-items:center;gap:8px;height:38px;min-width:280px;margin:0 0 2px;padding:0 14px;border:1px solid #d5dbe3;border-radius:8px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.04);font-size:13px;font-weight:500;line-height:1;color:#64748b;text-transform:none;letter-spacing:0;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.svmm__search svg{width:15px;height:15px;color:#94a3b8}
.svmm__search:hover{border-color:#14355f;box-shadow:0 0 0 3px rgba(20,53,95,.08);background:#fff;color:#0f172a}
.svmm--deals .svmm__head .svmm__more{display:inline-flex;align-items:center;height:34px;padding:0 12px;border:1px solid #d5dbe3;border-radius:8px;background:#fff;font-size:13px}
.svmm--deals .svmm__head .svmm__more:hover{border-color:#14355f;color:#14355f}
/* Tin tức: tiêu đề cột cùng kiểu nhãn xám nhỏ */
.header-nav .nav-dropdown-bold > li.nav-dropdown-col > a,.header-nav .nav-dropdown > li.nav-dropdown-col > a{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#64748b}
/* 2026-09-07 người dùng: "ô sản phẩm ko nên có nền" → khung ảnh thẻ khuyến mại nền trắng, không tô xám */
.svmm__deal .svmm__img{background:#fff}
/* thẻ khuyến mại giống thẻ catalog (2026-09-07 "nên như này mỗi sản phẩm") */
.svmm__deal{gap:6px;padding:12px 14px 12px}
.svmm__deal .svmm__img{aspect-ratio:4/3;margin:0 0 4px}
.svmm__deal .svmm__img img{max-width:78%;max-height:82%}
.svmm__brand-row{display:flex;align-items:center;gap:7px;min-height:22px;font-size:12px;color:#64748b}
.svmm__brand-row img{width:18px;height:18px;object-fit:contain;border-radius:4px}
.svmm__brand-row .svmm__off{position:static;margin-left:auto;padding:3px 8px;border-radius:999px;background:#e04a1f;color:#fff;font-size:11px;font-weight:700;font-style:normal;line-height:1}
.svmm__deal > b{font-size:14px}
.svmm__pts{margin:0;padding:0;list-style:none}
.svmm__pts li{position:relative;margin:0 0 3px;padding-left:18px;font-size:12px;line-height:1.45;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svmm__pts li::before{content:"";position:absolute;left:0;top:4px;width:11px;height:6px;border:1.5px solid #94a3b8;border-top:0;border-right:0;transform:rotate(-45deg)}
.svmm__bottom{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:auto;padding-top:8px;border-top:1px solid #f1f5f9}
.svmm__price strong{font-size:14px;font-weight:700;color:#dc2626}
.svmm__go{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#64748b;white-space:nowrap}
.svmm__go svg{width:13px;height:13px}
.svmm__deal:hover .svmm__go{color:#e04a1f}
/* 2026-09-07 người dùng: "style dropdown ko giống nhau, ko border radius" → dropdown chuẩn (Tin tức) cùng viền/bo/bóng với panel block, bỏ mũi tên */
.header-nav li.has-dropdown > .nav-dropdown{border:1px solid #eef2f6;border-top:0;border-radius:0 0 14px 14px !important;box-shadow:0 24px 48px -12px rgba(15,23,42,.18);overflow:hidden;background:#fff}
.header-nav li.has-dropdown:not(.menu-item-has-block) > .nav-dropdown{padding:22px 8px 20px}
.nav-dropdown-has-arrow .header-nav li.has-dropdown::before,.nav-dropdown-has-arrow .header-nav li.has-dropdown::after{display:none !important}


/* ===== softvn-fa-subset ===== */
@font-face {
  font-family: 'softvn-fa-subset';
  src: url("https://softvn.vn/wp-content/themes/flatsome-child/assets/css/../fonts/softvn-fa-subset.woff2") format('woff2');
  font-display: swap;
}

.fa {
  font-family: 'softvn-fa-subset' !important;
  font-style: normal;
  font-weight: normal !important;
  display: inline-block;
  line-height: 1;
}

.fa-check:before { content: "\e900"; }
.fa-times:before,
.fa-close:before { content: "\e901"; }
.fa-plus:before { content: "\e902"; }
.fa-minus:before { content: "\e903"; }
.fa-search:before { content: "\e904"; }
.fa-phone:before { content: "\e905"; }
.fa-envelope:before { content: "\e906"; }
.fa-map-marker:before { content: "\e907"; }
.fa-arrow-left:before { content: "\e908"; }
.fa-arrow-right:before { content: "\e909"; }
.fa-chevron-left:before { content: "\e90a"; }
.fa-chevron-right:before { content: "\e90b"; }
.fa-chevron-up:before { content: "\e90c"; }
.fa-chevron-down:before { content: "\e90d"; }
.fa-calendar:before { content: "\e90e"; }
.fa-comment:before { content: "\e90f"; }
.fa-user:before { content: "\e910"; }
.fa-star:before { content: "\e911"; }
.fa-heart:before { content: "\e912"; }
.fa-facebook:before { content: "\e913"; }
.fa-youtube:before { content: "\e914"; }
.fa-instagram:before { content: "\e915"; }
.fa-download:before { content: "\e916"; }
.fa-edit:before { content: "\e917"; }
.fa-lock:before { content: "\e918"; }


/* ===== softvn-floating-contact ===== */
/* =========================================================
   SOFTVN – FLOATING CONTACT / UTILITY BAR
   ========================================================= */

html {
  scroll-behavior: smooth;
}

.softvn-floating-contact {
  position: fixed;
  right: 18px;
  bottom: 270px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fc-btn {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  color: #64748b;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: visible;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease,
    visibility 0.18s ease;
}

.fc-btn:hover {
  transform: translateX(-4px);
  background: #fff8f5;
  border-color: #ffd5c7;
  color: #f15a24;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}

.fc-btn:active {
  transform: translateX(-2px) scale(0.97);
}

.fc-btn svg {
  display: block;
  width: 20px;
  height: 20px;
  overflow: visible;
}

.fc-icon-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fc-top-icon {
  width: 24px !important;
  height: 24px !important;
  color: inherit;
  flex: 0 0 auto;
}

.fc-tooltip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
  padding: 7px 10px;
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.94);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.16);
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
  z-index: 10000;
}

.fc-tooltip::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -4px;
  width: 8px;
  height: 8px;
  background: rgba(15, 23, 42, 0.94);
  transform: translateY(-50%) rotate(45deg);
}

.fc-btn:hover .fc-tooltip,
.fc-btn:focus-visible .fc-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

.fc-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(241, 90, 36, 0.16),
    0 14px 30px rgba(15, 23, 42, 0.12);
}

.fc-btn--top {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(6px);
}

.fc-btn--top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

body {
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .softvn-floating-contact {
    display: none !important;
  }
}

/* ===== softvn-pages ===== */
/* =====================================================================
   SoftVN — CÁC TRANG TĨNH bản phẳng (Giới thiệu 2838 · Hỏi đáp 2842 · Licensing 2849), 2026-09-07. Sinh bởi /root/softvn-tools/gen-pages.py
   (HTML page-<id>.txt + file này + pages.js). Nạp CHỈ trên các page này (functions.php). Cùng ngôn ngữ với catalog/liên hệ:
   hero một hàng, thẻ viền mảnh không bóng, ô icon Lucide pastel, nút navy đặc/viền, bảng phẳng, không pill/gradient.
   ===================================================================== */
.svpg-page #content.page-wrapper{padding-top:0 !important;padding-bottom:0 !important}
.svpg{max-width:1220px;margin:0 auto;padding:0 15px 64px;color:#0f172a}
.svpg *,.svpg *::before,.svpg *::after{box-sizing:border-box}
.svpg svg{flex:none}
.svpg-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* hero */
.svpg-hero{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin:20px 0 36px;padding:0 0 22px;border-bottom:1px solid #eef2f6}
.svpg-hero > div:first-child{min-width:0}
.svpg-page .svpg .svpg-hero h1,body.svpg-page #content[role="main"] .svpg .svpg-hero h1{margin:0;font-size:24px !important;line-height:1.25;font-weight:700;color:#0f172a;letter-spacing:-.01em;text-transform:none} /* child style.css còn luật cũ `body.page-id-2838 #content[role=main] > div:first-of-type h1` 42/34px → cần specificity + !important */
.svpg-hero__meta{display:flex;flex-wrap:wrap;gap:6px 0;margin:4px 0 0;font-size:13px;line-height:1.4;color:#64748b}
.svpg-hero__meta > span{display:inline-flex;align-items:center;gap:6px}
.svpg-hero__meta > span + span{position:relative;margin-left:16px;padding-left:16px}
.svpg-hero__meta > span + span::before{content:"";position:absolute;left:0;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#cbd5e1}
.svpg-hero__meta b{color:#0f172a;font-weight:700}
.svpg-hero__meta svg{width:16px;height:16px;color:#94a3b8}
.svpg-hero__act{display:flex;gap:10px;flex-wrap:wrap}
/* nút */
.svpg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;margin:0;padding:0 18px;border:1.5px solid #14355f;border-radius:8px;font-size:13px;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap;transition:background-color .12s,color .12s}
.svpg-btn svg{width:16px;height:16px}
.svpg-btn--solid{background:#14355f;color:#fff}
.svpg-btn--solid:hover{background:#0f2a4c;color:#fff}
.svpg-btn--line{background:#fff;color:#14355f}
.svpg-btn--line:hover{background:#14355f;color:#fff}
.svpg-more{display:inline-flex;align-items:center;gap:6px;flex:none;white-space:nowrap;font-size:13px;font-weight:600;color:#64748b;text-decoration:none}
.svpg-more svg{width:14px;height:14px}
.svpg-more:hover{color:#e04a1f}
/* mục */
.svpg-sec{margin:0 0 56px}
.svpg > .svpg-sec:last-child{margin-bottom:0} /* dải CTA navy cuối trang đã BỎ (người dùng "bỏ" 2026-09-07) — mục cuối không cần cách */
.svpg-sec__h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 22px}
.svpg-sec__h h2{margin:0;font-size:20px;line-height:1.3;font-weight:700;color:#0f172a;text-transform:none}
.svpg-sec__h p{margin:6px 0 0;font-size:14px;line-height:1.5;color:#64748b}
.svpg-lead{max-width:760px;margin:-8px 0 40px;font-size:16px;line-height:1.7;color:#475569}
/* lưới + thẻ */
.svpg-grid{display:grid;gap:24px}
.svpg-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.svpg-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.svpg-grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.svpg-card{min-width:0;padding:22px 24px;border:1px solid #e5e9ef;border-radius:10px;background:#fff}
.svpg-card h3{margin:0 0 6px;font-size:16px;line-height:1.3;font-weight:700;color:#0f172a;text-transform:none}
.svpg-card p{margin:0;font-size:14px;line-height:1.6;color:#5b6b7f}
.svpg-card--sm{padding:20px}
.svpg-card--sm h3{font-size:15px}
.svpg-card--sm p{font-size:13px}
.svpg-card--link.svpg-card--tile{display:flex;align-items:center;gap:12px;padding:16px 18px} /* .svpg-card--link{display:block} đứng sau nên cần 2 class */
.svpg--about .svpg-grid--5{display:flex;flex-wrap:wrap;gap:10px} /* 5 ô nhóm SP một hàng bằng nhau (flex 1 1 0), tên nowrap; flex auto từng làm ô 5 rớt xuống hàng riêng */
.svpg--about .svpg-grid--5 .svpg-card--tile{flex:1 1 0;min-width:0;padding:14px 16px;gap:10px}
.svpg--about .svpg-grid--5 .svpg-card--tile .svpg-ic{flex:0 0 36px;width:36px;height:36px}
.svpg--about .svpg-grid--5 .svpg-card--tile h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.svpg-card--tile .svpg-ic{margin:0;flex:0 0 40px}
.svpg-card--tile h3{margin:0;font-size:14px}
.svpg-card__t{display:flex;align-items:center;gap:8px;margin:0 0 14px !important;font-size:16px}
.svpg-card__t svg{width:18px;height:18px;color:#14355f}
.svpg-card__act{margin-top:16px}
.svpg-ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0 0 12px;border-radius:10px;background:#e9eef5;color:#14355f}
.svpg-ic svg{width:20px;height:20px}
.svpg-ic--or{background:#fff1e8;color:#e04a1f}
.svpg-ic--gr{background:#e6f6ef;color:#0f7a4f}
/* giới thiệu: intro + số liệu thật */
.svpg-intro{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px 40px;align-items:center}
.svpg-intro__t h2{margin:0 0 10px;font-size:22px;line-height:1.3;font-weight:700;text-transform:none}
.svpg-intro__t p{margin:0 0 14px;font-size:15px;line-height:1.7;color:#475569}
.svpg-stats{display:grid;grid-template-columns:1fr;gap:10px}
.svpg-stat{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid #e5e9ef;border-radius:10px;background:#fff}
.svpg-stat .svpg-ic{margin:0;width:38px;height:38px;flex:0 0 38px}
.svpg-stat b{display:block;font-size:20px;line-height:1.1;font-weight:700;color:#0f172a}
.svpg-stat span{font-size:13px;color:#64748b}
/* danh sách tick */
.svpg-list{margin:0;padding:0;list-style:none}
.svpg-list li{position:relative;margin:0 0 10px;padding:0 0 0 26px;font-size:14px;line-height:1.6;color:#334155}
.svpg-list li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;background:#0f7a4f;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 6 9 17l-5-5%27/%3E%3C/svg%3E") no-repeat center/16px 16px;mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 6 9 17l-5-5%27/%3E%3C/svg%3E") no-repeat center/16px 16px}
.svpg-list--lg li{font-size:14px;margin-bottom:12px}
/* hàng thông tin */
.svpg-rows{margin:0;padding:0;list-style:none}
.svpg-rows li{display:flex;align-items:flex-start;gap:12px;margin:0;padding:12px 0;border-top:1px solid #eef2f6}
.svpg-rows li:first-child{border-top:0;padding-top:0}
.svpg-rows li:last-child{padding-bottom:0}
.svpg-rows .svpg-ic{width:34px;height:34px;flex:0 0 34px;margin:0;border-radius:8px;background:#f1f5f9;color:#475569}
.svpg-rows .svpg-ic svg{width:17px;height:17px}
.svpg-rows li > div{min-width:0}
.svpg-rows small{display:block;margin:0 0 2px;font-size:12px;color:#64748b}
.svpg-rows a,.svpg-rows b{font-size:14px;font-weight:600;line-height:1.4;color:#0f172a;text-decoration:none}
.svpg-rows b{display:block}
.svpg-rows a:hover{color:#14355f}
.svpg-inl{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px}
.svpg-inl i{width:1px;height:14px;background:#b8c2d0}
.svpg-map{display:inline-flex !important;align-items:center;gap:5px;margin-top:4px;font-size:13px !important;font-weight:600;color:#14355f !important}
.svpg-map svg{width:14px;height:14px}
.svpg-map:hover{color:#e04a1f !important}
/* CTA */
.svpg-cta{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;padding:20px 24px;border:1px solid #f3d5c2;border-radius:10px;background:#fff1e8}
.svpg-cta h2{margin:0 0 4px;font-size:18px;line-height:1.3;font-weight:700;color:#0f172a;text-transform:none}
.svpg-cta p{margin:0;max-width:520px;font-size:14px;line-height:1.5;color:#5b6b7f}
.svpg-cta--col{flex-direction:column;align-items:flex-start;justify-content:center}
.svpg-foot{align-items:start} /* ô CTA cam không kéo giãn theo thẻ thông tin công ty */
.svpg--lic .svpg-foot{align-items:stretch} /* Licensing: 2 thẻ dải cao bằng nhau (người dùng: "thêm 1 dòng cho cân 2 bên") */
.svpg-list--lg{display:flex;flex-direction:column;justify-content:center;flex:1}
/* bảng */
.svpg-table-wrap{overflow-x:auto}
.svpg-table{width:100%;min-width:640px;margin:0;border-collapse:separate;border-spacing:0;border:1px solid #e5e9ef;border-radius:10px;overflow:hidden;font-size:14px}
.svpg-table th,.svpg-table td{padding:13px 18px;border:0;border-bottom:1px solid #e5e9ef;text-align:left;vertical-align:middle;font-size:14px;line-height:1.5;color:#334155} /* 13/18 (bản 18/24 là tôi hiểu nhầm — ý người dùng là ô đầu/cuối dính mép) */
.svpg-table th{background:#f8fafc;color:#0f172a;font-weight:700;font-size:13px;text-transform:none;letter-spacing:0}
.svpg-table thead th{padding-top:13px;padding-bottom:13px}
.svpg-table th:first-child,.svpg-table td:first-child{padding-left:18px !important} /* Flatsome: td/th:first-child{padding-left:0} → chữ cột đầu dính mép bảng (người dùng: "ý tôi là cell padding") */
.svpg-table th:last-child,.svpg-table td:last-child{padding-right:18px !important}
.svpg-table tbody th{width:200px}
.svpg-table tr:last-child td{border-bottom:0}
.svpg-table tbody th{background:#f8fafc;color:#0f172a;font-weight:600;font-size:14px;text-transform:none;letter-spacing:0;white-space:nowrap} /* cột tiêu chí tô nền như header (người dùng chỉ vào cột này) */
.svpg-table tbody tr:last-child th{border-bottom:0}
.svpg-yes{display:inline-flex;align-items:center;gap:6px;color:#0f7a4f;font-weight:600}
.svpg-yes svg{width:16px;height:16px}
.svpg-na{color:#94a3b8}
.svpg-table td + td,.svpg-table th + th,.svpg-table th + td{border-left:1px solid #eef2f6}
/* licensing */
.svpg-plan{position:relative;display:flex;flex-direction:column}
.svpg-plan__tag{position:absolute;top:14px;right:14px;padding:4px 8px;border-radius:999px;background:#14355f;color:#fff;font-size:11px;font-weight:700;line-height:1}
.svpg-plan__sub{display:block;margin:0 0 10px;font-size:12px;font-weight:600;color:#14355f}
.svpg-plan .svpg-list{margin:18px 0 0}
.svpg-plan__note{margin:auto 0 0 !important;padding-top:16px;border-top:1px solid #eef2f6;font-size:13px !important;color:#64748b !important}
.svpg-plan .svpg-list + .svpg-plan__note{margin-top:20px !important}
/* hỏi đáp */
.svpg-faq{display:grid;grid-template-columns:270px minmax(0,1fr);gap:32px;align-items:start;margin:0}
.svpg-faq__side,.svpg-faq__main{min-width:0} /* không có min-width:0 thì hàng chip cuộn ngang (505px) kéo cột grid rộng hơn màn hình mobile */
.svpg-faq__side{position:sticky;top:20px}
.svpg-search{position:relative;display:block}
.svpg-search input,.svpg-search input[type=search]{width:100%;height:40px !important;margin:0;padding:0 12px 0 38px !important;border:1px solid #d5dbe3;border-radius:8px !important;background:#fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2394a3b8%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2711%27 cy=%2711%27 r=%278%27/%3E%3Cpath d=%27m21 21-4.3-4.3%27/%3E%3C/svg%3E") no-repeat 12px center/16px 16px !important;font-size:14px;color:#0f172a;box-shadow:none !important;-webkit-appearance:none;appearance:none} /* Flatsome đè padding của input[type=search] → chữ đè lên icon (người dùng chỉ) */
.svpg-search input:focus{border-color:#14355f;box-shadow:0 0 0 3px rgba(20,53,95,.12);outline:0}
.svpg-cats{margin:14px 0 0;padding:0;list-style:none}
.svpg-cats li{margin:0 0 6px}
.svpg-cats button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:10px 12px;border:1px solid transparent;border-radius:8px;background:none;box-shadow:none;font-size:14px;font-weight:600;line-height:1.3;color:#334155;text-align:left;text-transform:none;letter-spacing:0;cursor:pointer;transition:background-color .12s,color .12s}
.svpg-cats button i{font-style:normal;font-size:12px;font-weight:600;color:#94a3b8}
.svpg-cats button:hover{background:#f1f5f9;color:#14355f}
.svpg-cats button.is-on{background:#14355f;color:#fff}
.svpg-cats button.is-on i{color:rgba(255,255,255,.72)}
.svpg-faq__count{margin:0 0 12px;font-size:13px;color:#64748b}
.svpg-q{margin:0 0 12px;border:1px solid #e5e9ef;border-radius:10px;background:#fff}
.svpg-q[hidden]{display:none}
.svpg-q summary{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;list-style:none;font-size:15px;font-weight:600;line-height:1.4;color:#0f172a}
.svpg-q summary::-webkit-details-marker{display:none}
.svpg-q summary::after{content:"";flex:0 0 16px;width:16px;height:16px;margin-left:auto;background:#94a3b8;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E") no-repeat center/16px 16px;mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E") no-repeat center/16px 16px;transition:transform .15s}
.svpg-q[open] summary::after{transform:rotate(180deg)}
.svpg-q[open] summary{border-bottom:1px solid #eef2f6;color:#14355f}
.svpg-q__b{padding:12px 18px 16px}
.svpg-q__b ul{margin:0;padding:0 0 0 20px}
.svpg-q__b li{margin:0 0 6px;font-size:14px;line-height:1.6;color:#334155}
.svpg-q__b mark{background:#fff1e8;color:inherit;padding:0 2px;border-radius:3px}
.svpg-faq__empty{padding:28px;text-align:center;font-size:14px;color:#64748b;border:1px dashed #d5dbe3;border-radius:10px}
.svpg-faq__empty a{color:#14355f;font-weight:600}
.svpg-faq__cta{margin:0}
/* ---- v2 "pro/ent/saas": eyebrow · dải tiêu đề thẻ · dải số liệu · logo hãng · dải CTA navy · cột nổi bật ---- */
.svpg-eyebrow{display:block;margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#f1592a;line-height:1}
.svpg-hero--lg{margin-bottom:40px;padding-bottom:26px}
.svpg-page .svpg .svpg-hero--lg h1,body.svpg-page #content[role="main"] .svpg .svpg-hero--lg h1{font-size:28px !important}
.svpg-hero--lg .svpg-hero__meta{margin-top:10px}
.svpg-btn--white{background:#fff;border-color:#fff;color:#14355f}
.svpg-btn--white:hover{background:#fff1e8;border-color:#fff1e8;color:#b43e0e}
.svpg-btn--ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.svpg-btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
/* thẻ có dải tiêu đề (như trang Liên hệ) */
.svpg-card--band{padding:0;overflow:hidden;display:flex;flex-direction:column}
.svpg-card__head{display:flex;align-items:center;gap:9px;min-height:50px;padding:0 22px;border-bottom:1px solid #d5dde8;background:#e9eef5;font-size:14px;line-height:1.3;font-weight:700;color:#14355f}
.svpg-card__head svg{width:17px;height:17px;color:currentColor}
.svpg-card__head--or{background:#fff1e8;border-bottom-color:#f6d3bd;color:#b43e0e}
.svpg-card__head--gr{background:#e6f6ef;border-bottom-color:#cbe9db;color:#0f7a4f}
.svpg-card__body{padding:20px 22px 22px;flex:1;display:flex;flex-direction:column}
.svpg-card__body > p{margin:0 0 14px;font-size:14px;line-height:1.65;color:#5b6b7f}
/* dải số liệu */
.svpg-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 48px;border:1px solid #e5e9ef;border-radius:10px;background:#fff;overflow:hidden}
.svpg-stat{display:flex;align-items:center;gap:16px;padding:22px 26px;border:0;border-radius:0;background:transparent}
.svpg-stat + .svpg-stat{border-left:1px solid #eef2f6}
.svpg-stat .svpg-ic{margin:0;width:42px;height:42px;flex:0 0 42px}
.svpg-stat b{display:block;font-size:24px;line-height:1.05;font-weight:700;color:#14355f;letter-spacing:-.01em}
.svpg-stat span{display:block;margin-top:3px;font-size:13px;color:#64748b}
/* giới thiệu: cột chữ + thẻ công ty */
.svpg-intro{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:stretch;gap:32px 56px} /* 2 cột cao bằng nhau: tiêu đề mục thẳng mép trên thẻ, 3 điểm đẩy xuống đáy (canh giữa từng làm eyebrow thấp hơn thẻ) */
.svpg-intro__t{display:flex;flex-direction:column}
.svpg-intro__f{grid-template-columns:1fr !important;margin-top:auto;padding-top:26px;gap:14px} /* 3 điểm xếp DỌC: tiêu đề "Nguồn hàng minh bạch" từng gãy dòng ở 3 cột hẹp */
.svpg-feat{display:flex;gap:14px;align-items:center}
.svpg-feat .svpg-ic{margin:0;width:40px;height:40px;flex:0 0 40px}
.svpg-feat h3{margin:0 0 2px;font-size:15px;font-weight:700;color:#0f172a;text-transform:none}
.svpg-feat p{margin:0;font-size:13px;line-height:1.5;color:#5b6b7f}
.svpg-intro__c .svpg-rows li{padding:9px 0}
/* logo hãng */
.svpg-logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.svpg-logo{display:flex;align-items:center;gap:12px;min-height:66px;padding:12px 16px;border:1px solid #e5e9ef;border-radius:10px;background:#fff;color:#0f172a;text-decoration:none;transition:border-color .12s}
.svpg-logo img{width:34px;height:34px;flex:0 0 34px;object-fit:contain;border-radius:6px} /* ảnh hãng đa số là icon vuông nhỏ → icon + TÊN, không grayscale (bản xám nhìn "ma") */
.svpg-logo span{display:block;min-width:0;font-size:13px;font-weight:600;line-height:1.3;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svpg-logo small{display:block;font-size:11px;font-weight:500;color:#94a3b8}
.svpg-logo:hover{border-color:#14355f;color:#0f172a}
.svpg-logo:hover span{color:#14355f}
/* thẻ nhóm SP bấm được */
.svpg-card--link{display:block;color:inherit;text-decoration:none;transition:border-color .12s}
.svpg-card--link:hover{border-color:#14355f;color:inherit}
.svpg-card--link:hover h3{color:#14355f}
/* dải CTA navy */
.svpg-band{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin:8px 0 0;padding:34px 38px;border-radius:10px;background:#14355f;color:#fff}
.svpg-band h2{margin:0;font-size:20px;line-height:1.3;font-weight:700;color:#fff;text-transform:none}
.svpg-band h2 + p{margin-top:4px}
.svpg-band p{margin:0;max-width:600px;font-size:14px;line-height:1.55;color:rgba(255,255,255,.78)}
/* bảng: cột nổi bật */
.svpg-table th{background:#e9eef5;color:#14355f;border-bottom-color:#d5dde8}
.svpg-table th.is-hi,.svpg-table td.is-hi{background:#fff7f2}
.svpg-table th.is-hi{color:#b43e0e}
/* licensing v2 */
.svpg-plans{align-items:stretch}
.svpg-plan .svpg-card__head{position:relative}
.svpg-plan__tag{position:static;margin-left:auto;padding:4px 8px;border-radius:999px;background:#14355f;color:#fff;font-size:11px;font-weight:700;line-height:1}
.svpg-plan--hi{border-color:#14355f;box-shadow:0 0 0 1px #14355f inset}
.svpg-plan .svpg-plan__sub{margin-bottom:10px}
/* hỏi đáp v2 */
.svpg-faq__side .svpg-card--band + .svpg-card--band{margin-top:20px}
.svpg-faq__side .svpg-cats{margin-top:14px}
.svpg-faq__count{margin:0 0 12px;font-size:13px;color:#64748b} /* chỉ hiện khi lọc/tìm; thanh "Mở tất cả/Thu gọn" đã BỎ → thẻ đầu thẳng mép trên với sidebar */
.svpg-faq__count[hidden]{display:none}
.svpg-faq__bar .svpg-faq__count{margin:0}
.svpg-faq__tools{display:flex;gap:6px}
.svpg-mini{height:30px;margin:0;padding:0 10px;border:1px solid #d5dbe3;border-radius:8px;background:#fff;box-shadow:none;font-size:12px;font-weight:600;line-height:1;color:#334155;text-transform:none;letter-spacing:0;cursor:pointer}
.svpg-mini:hover{border-color:#14355f;color:#14355f;background:#fff}
.svpg-q summary{align-items:flex-start;gap:14px;padding:16px 20px}
.svpg-q__n{flex:0 0 30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:#e9eef5;color:#14355f;font-size:12px;font-weight:700}
.svpg-q[open] .svpg-q__n{background:#14355f;color:#fff}
.svpg-q__t{display:flex;flex-direction:column;gap:3px;min-width:0}
.svpg-q__t small{font-size:12px;font-weight:600;color:#94a3b8}
.svpg-q summary::after{margin-top:7px}
.svpg-q__b{padding:14px 20px 20px 64px}
.svpg-q__b .svpg-list li{font-size:14px;line-height:1.65;margin-bottom:10px}
/* ---- Giới thiệu v3 = phương án A: hồ sơ năng lực một cột ---- */
.svpg--profile .svpg-col{max-width:760px;margin:0 auto}
.svpg--profile .svpg-phero{padding:44px 0 40px}
.svpg-page .svpg--profile h1,body.svpg-page #content[role="main"] .svpg.svpg--profile h1{margin:0 0 14px;font-size:32px !important;line-height:1.2;font-weight:700;letter-spacing:-.01em;color:#0f172a;text-transform:none}
.svpg--profile .svpg-plead{max-width:680px;margin:0 0 22px;font-size:16px;line-height:1.7;color:#475569}
.svpg--profile .svpg-facts{display:flex;flex-wrap:wrap;gap:16px 44px;margin:0 0 60px;padding:22px 0;border-top:1px solid #eef2f6;border-bottom:1px solid #eef2f6}
.svpg-fact b{display:block;margin:0 0 6px;font-size:28px;line-height:1;font-weight:700;color:#14355f;letter-spacing:-.01em}
.svpg-fact span{font-size:13px;color:#64748b}
.svpg--profile .svpg-psec{margin:0 0 64px}
.svpg--profile .svpg-psec--last{margin-bottom:0}
.svpg--profile .svpg-psec h2{margin:0 0 18px;font-size:22px;line-height:1.3;font-weight:700;color:#0f172a;text-transform:none}
.svpg--profile .svpg-vals{display:grid;gap:22px}
.svpg--profile .svpg-feat{align-items:flex-start}
.svpg--profile .svpg-feat h3{font-size:15px;margin:0 0 3px}
.svpg--profile .svpg-feat p{font-size:13px}
.svpg-chips{display:flex;flex-wrap:wrap;gap:8px}
.svpg--profile a.svpg-chip{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid #d5dbe3;border-radius:999px;background:#fff;color:#334155;font-size:13px;font-weight:600;line-height:1;text-decoration:none;transition:border-color .12s,color .12s}
.svpg--profile a.svpg-chip:hover{border-color:#14355f;color:#14355f}
.svpg--profile .svpg-logos{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.svpg--profile .svpg-logo{flex-direction:column;align-items:flex-start;gap:8px;min-height:0;padding:14px 14px 12px}
.svpg--profile .svpg-logo img{width:30px;height:30px;flex:none}
.svpg--profile .svpg-logo span{white-space:normal;line-height:1.3}
.svpg-kv{margin:0}
.svpg-kv > div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid #eef2f6}
.svpg-kv > div:first-child{border-top:0;padding-top:0}
.svpg-kv dt{margin:0;font-size:13px;font-weight:400;color:#64748b;text-transform:none;letter-spacing:0}
.svpg-kv dd{margin:0;font-size:14px;font-weight:600;line-height:1.5;color:#0f172a;text-transform:none !important;letter-spacing:0 !important;display:block} /* Flatsome ép dt/dd IN HOA + inline (đã ghi ở trang Liên hệ) */
.svpg-kv dt{text-transform:none !important;display:block}
.svpg-kv dd a{text-transform:none !important}
.svpg-kv dd a{color:#0f172a;text-decoration:none}
.svpg-kv dd a:hover{color:#14355f}
.svpg-kv .svpg-map{margin:0 0 0 8px;vertical-align:middle}
/* ---- Giới thiệu v4 = phương án C: hồ sơ đánh số, tiêu đề trái · nội dung phải ---- */
.svpg--doc .svpg-dhero{display:grid;grid-template-columns:minmax(0,1.5fr) 340px;gap:32px 64px;align-items:center;padding:44px 0 40px}
.svpg-page .svpg.svpg--doc h1,body.svpg-page #content[role="main"] .svpg.svpg--doc h1{margin:0 0 14px;font-size:32px !important;line-height:1.2;font-weight:700;letter-spacing:-.01em;color:#0f172a;text-transform:none}
.svpg--doc .svpg-plead{max-width:640px;margin:0 0 22px;font-size:16px;line-height:1.7;color:#475569}
.svpg--doc .svpg-dhero__f{border:1px solid #e5e9ef;border-radius:12px;padding:6px 24px;background:#fff}
.svpg--doc .svpg-dhero__f .svpg-fact{display:flex;align-items:baseline;gap:12px;padding:16px 0;border-top:1px solid #eef2f6}
.svpg--doc .svpg-dhero__f .svpg-fact:first-child{border-top:0}
.svpg--doc .svpg-dhero__f .svpg-fact b{margin:0;min-width:84px;font-size:28px;color:#14355f}
.svpg--doc .svpg-dhero__f .svpg-fact span{font-size:13px;color:#64748b}
.svpg--doc .svpg-drow{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px 48px;padding:44px 0;border-top:1px solid #e5e9ef}
.svpg--doc .svpg-drow--last{padding-bottom:8px}
.svpg--doc .svpg-num{display:block;margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.08em;color:#f1592a}
.svpg--doc .svpg-drow__l h2{margin:0;font-size:20px;line-height:1.3;font-weight:700;color:#0f172a;text-transform:none}
.svpg--doc .svpg-drow__r{min-width:0}
.svpg--doc .svpg-dvals{gap:28px}
.svpg--doc .svpg-feat--col{flex-direction:column;align-items:flex-start;gap:12px}
.svpg--doc .svpg-feat--col .svpg-ic{width:44px;height:44px;flex:0 0 44px}
.svpg--doc .svpg-feat--col .svpg-ic svg{width:22px;height:22px}
.svpg--doc .svpg-feat h3{font-size:15px;margin:0 0 4px}
.svpg--doc .svpg-feat p{font-size:14px;line-height:1.55}
.svpg--doc a.svpg-chip{display:inline-flex;align-items:center;height:36px;padding:0 14px;border:1px solid #d5dbe3;border-radius:999px;background:#fff;color:#334155;font-size:13px;font-weight:600;line-height:1;text-decoration:none;transition:border-color .12s,color .12s}
.svpg--doc a.svpg-chip:hover{border-color:#14355f;color:#14355f}
.svpg--doc .svpg-more--under{margin-top:16px}
.svpg--doc .svpg-logos{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.svpg--doc .svpg-logo{min-height:60px;padding:10px 14px}
.svpg--doc .svpg-kv > div{grid-template-columns:150px minmax(0,1fr);padding:13px 0}
.svpg--doc .svpg-kv dd{font-size:14px}
/* ---- Giới thiệu v5 EDITORIAL (.svpg--ed): không thẻ, không icon, không eyebrow; chữ lớn + kẻ mảnh + khoảng trắng ---- */
.svpg--ed{padding-bottom:40px}
.svpg--ed .ed-hero{padding:72px 0 56px}
.svpg--ed .ed-cap{margin:0 0 22px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#64748b}
.svpg-page .svpg.svpg--ed h1,body.svpg-page #content[role="main"] .svpg.svpg--ed h1{max-width:980px;margin:0;font-size:56px !important;line-height:1.06;font-weight:700;letter-spacing:-.02em;color:#0f172a;text-transform:none}
.svpg--ed .ed-sub{max-width:720px;margin:26px 0 0;font-size:20px;line-height:1.5;color:#475569}
.svpg--ed .ed-nums{display:flex;flex-wrap:wrap;gap:24px 88px;padding:40px 0;border-top:1px solid #e5e9ef;border-bottom:1px solid #e5e9ef}
.svpg--ed .svpg-fact b{margin:0 0 8px;font-size:64px;line-height:1;font-weight:700;letter-spacing:-.02em;color:#14355f}
.svpg--ed .svpg-fact span{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#64748b}
.svpg--ed .ed-sec{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px 64px;padding:72px 0;border-bottom:1px solid #e5e9ef}
.svpg--ed .ed-sec__l{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#64748b}
.svpg--ed .ed-sec__l span{display:block;margin:0 0 8px;font-size:13px;color:#f1592a}
.svpg--ed .ed-p{max-width:780px;margin:0 0 18px;font-size:22px;line-height:1.5;color:#0f172a}
.svpg--ed .ed-p--sm{font-size:15px;line-height:1.6;color:#64748b;margin:0}
.svpg--ed .ed-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.svpg--ed .ed-3 > div{padding-top:18px;border-top:1px solid #0f172a}
.svpg--ed .ed-3 i{display:block;margin:0 0 14px;font-style:normal;font-size:13px;font-weight:600;color:#f1592a}
.svpg--ed .ed-3 h3{margin:0 0 8px;font-size:22px;line-height:1.25;font-weight:700;color:#0f172a;text-transform:none}
.svpg--ed .ed-3 p{margin:0;font-size:15px;line-height:1.6;color:#64748b}
.svpg--ed .ed-logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px 20px}
.svpg--ed .ed-logo{display:flex;align-items:center;gap:12px;color:#0f172a;text-decoration:none}
.svpg--ed .ed-logo img{width:36px;height:36px;flex:0 0 36px;object-fit:contain;border-radius:8px}
.svpg--ed .ed-logo span{font-size:14px;font-weight:600;line-height:1.3;color:#0f172a}
.svpg--ed .ed-logo:hover span{color:#14355f}
.svpg--ed .ed-more{display:inline-flex;align-items:center;gap:8px;margin-top:30px;font-size:14px;font-weight:600;color:#0f172a;text-decoration:none;border-bottom:1px solid #0f172a;padding-bottom:2px}
.svpg--ed .ed-more svg{width:15px;height:15px}
.svpg--ed .ed-more:hover{color:#14355f;border-color:#14355f}
.svpg--ed .ed-list{margin:0;padding:0;list-style:none;max-width:780px}
.svpg--ed .ed-list li{margin:0;border-top:1px solid #e5e9ef}
.svpg--ed .ed-list li:last-child{border-bottom:1px solid #e5e9ef}
.svpg--ed .ed-list a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;font-size:24px;font-weight:600;line-height:1.2;color:#0f172a;text-decoration:none;transition:color .12s,padding-left .15s}
.svpg--ed .ed-list a svg{width:20px;height:20px;color:#94a3b8;flex:none}
.svpg--ed .ed-list a:hover{color:#14355f;padding-left:8px}
.svpg--ed .ed-list a:hover svg{color:#14355f}
.svpg--ed .ed-end{padding:88px 0 24px}
.svpg--ed .ed-end h2{margin:0 0 26px;font-size:40px;line-height:1.1;font-weight:700;letter-spacing:-.02em;color:#0f172a;text-transform:none}
.svpg--ed .ed-end__act{display:flex;flex-wrap:wrap;gap:10px}
.svpg--ed .ed-end .svpg-btn{height:46px;padding:0 22px;font-size:14px}
.svpg--ed .ed-info{display:flex;flex-wrap:wrap;gap:8px 28px;margin:40px 0 0;font-size:14px;color:#64748b}
.svpg--ed .ed-info a{color:#64748b;text-decoration:none;border-bottom:1px solid #d5dbe3}
.svpg--ed .ed-info a:hover{color:#14355f;border-color:#14355f}
/* ---- Giới thiệu v6 SHOWCASE (.svpg--show) ---- */
.svpg--show{padding-bottom:40px}
.svpg--show .sh-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 48px;align-items:center;padding:52px 0 40px}
.svpg-page .svpg.svpg--show h1,body.svpg-page #content[role="main"] .svpg.svpg--show h1{margin:0 0 16px;font-size:40px !important;line-height:1.15;font-weight:700;letter-spacing:-.02em;color:#0f172a;text-transform:none}
.svpg--show .sh-lead{max-width:560px;margin:0 0 22px;font-size:16px;line-height:1.7;color:#475569}
.svpg--show .sh-facts{display:flex;flex-wrap:wrap;gap:16px 44px;margin-top:32px}
.svpg--show .svpg-fact b{margin:0 0 6px;font-size:32px;line-height:1;font-weight:700;color:#14355f;letter-spacing:-.01em}
.svpg--show .svpg-fact span{font-size:13px;color:#64748b}
.svpg--show .sh-mosaic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.svpg--show .sh-box{display:block;aspect-ratio:1;padding:12px;border:1px solid #e5e9ef;border-radius:12px;background:#fff;transition:border-color .12s}
.svpg--show .sh-box:hover{border-color:#14355f}
.svpg--show .sh-box img{display:block;width:100%;height:100%;object-fit:contain}
.svpg--show .sh-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin:12px 0 48px;padding:28px 0;border-top:1px solid #eef2f6;border-bottom:1px solid #eef2f6}
.svpg--show .ed-logo{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;text-align:center;color:#0f172a;text-decoration:none} /* display:flex chỉ có ở .svpg--ed → trang này phải khai lại, không thì icon+tên nằm ngang */
.svpg--show .ed-logo img{width:48px;height:48px;flex:none;object-fit:contain;border-radius:10px}
.svpg--show .ed-logo span{font-size:13px;font-weight:600;line-height:1.3;color:#0f172a}
.svpg--show .ed-logo:hover span{color:#14355f}
.svpg--show .sh-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 56px;padding:0 0 24px}
.svpg--show .sh-two h2{margin:0 0 14px;font-size:24px;line-height:1.3;font-weight:700;letter-spacing:-.01em;color:#0f172a;text-transform:none}
.svpg--show .sh-vals{display:grid;gap:16px}
.svpg--show .sh-vals b{display:block;margin:0 0 4px;font-size:16px;color:#0f172a}
.svpg--show .sh-vals p{margin:0;font-size:14px;line-height:1.55;color:#5b6b7f}
.svpg--show .svpg-kv{margin-top:6px}
.svpg--show .svpg-kv > div{grid-template-columns:120px minmax(0,1fr)}
/* ---- Giới thiệu v7 CLEAN SAAS (.svpg--clean) ---- */
.svpg--clean{padding-bottom:56px}
.svpg--clean .cl-hero{max-width:820px;margin:0 auto;padding:84px 0 48px;text-align:center}
.svpg--clean .cl-eyebrow{display:block;margin:0 0 18px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#64748b}
.svpg-page .svpg.svpg--clean h1,body.svpg-page #content[role="main"] .svpg.svpg--clean h1{margin:0 auto 18px;font-size:48px !important;line-height:1.12;font-weight:700;letter-spacing:-.025em;color:#0f172a;text-transform:none}
.svpg--clean .cl-sub{max-width:640px;margin:0 auto 28px;font-size:18px;line-height:1.6;color:#64748b}
.svpg--clean .cl-act{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.svpg--clean .cl-act--l{justify-content:flex-start}
.svpg--clean .svpg-btn{height:44px;padding:0 20px;font-size:14px;font-weight:600}
.svpg--clean .cl-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:24px 80px;padding:28px 0 76px}
.svpg--clean .svpg-fact{text-align:center}
.svpg--clean .svpg-fact b{display:block;margin:0 0 6px;font-size:40px;line-height:1;font-weight:700;letter-spacing:-.02em;color:#0f172a}
.svpg--clean .svpg-fact span{font-size:14px;color:#64748b}
.svpg--clean .cl-sec{padding:72px 0;border-top:1px solid #eef2f6}
.svpg--clean .cl-sec__h{max-width:720px;margin:0 auto 44px;text-align:center}
.svpg--clean h2{margin:0;font-size:28px;line-height:1.2;font-weight:700;letter-spacing:-.02em;color:#0f172a;text-transform:none}
.svpg--clean .cl-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.svpg--clean .cl-feat{text-align:center} /* người dùng: 3 cột "nên căn giữa" cho khớp tiêu đề mục */
.svpg--clean .cl-ic{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin:0 auto 18px;border-radius:12px;background:#f1f5f9;color:#14355f}
.svpg--clean .cl-ic svg{width:22px;height:22px}
.svpg--clean .cl-feat h3{margin:0 0 8px;font-size:18px;line-height:1.3;font-weight:600;color:#0f172a;text-transform:none}
.svpg--clean .cl-feat p{max-width:300px;margin:0 auto;font-size:15px;line-height:1.6;color:#64748b}
.svpg--clean .cl-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:40px 72px;align-items:center}
.svpg--clean .cl-split__t p{margin:14px 0 22px;font-size:16px;line-height:1.6;color:#64748b}
.svpg--clean .cl-link{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#14355f;text-decoration:none}
.svpg--clean .cl-link svg{width:16px;height:16px}
.svpg--clean .cl-link:hover{color:#e04a1f}
.svpg--clean .cl-panel{padding:28px;border:1px solid #eef2f6;border-radius:16px;background:#f8fafc}
.svpg--clean .cl-mosaic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.svpg--clean .sh-box{display:block;aspect-ratio:1;padding:12px;border:1px solid #e5e9ef;border-radius:12px;background:#fff;transition:transform .15s,border-color .12s}
.svpg--clean .sh-box:hover{border-color:#14355f;transform:translateY(-2px)}
.svpg--clean .sh-box img{display:block;width:100%;height:100%;object-fit:contain}
.svpg--clean .cl-logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px 16px}
.svpg--clean .ed-logo{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:#0f172a;text-decoration:none}
.svpg--clean .ed-logo img{width:44px;height:44px;flex:none;object-fit:contain;border-radius:10px}
.svpg--clean .ed-logo span{font-size:13px;font-weight:500;line-height:1.3;color:#475569}
.svpg--clean .ed-logo:hover span{color:#14355f}
.svpg--clean .cl-info{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px 72px;align-items:stretch} /* panel CTA cao bằng bảng thông tin, nội dung canh giữa (ảnh không chữ) */
.svpg--clean .cl-info h2{font-size:24px;margin:0 0 18px}
.svpg--clean .svpg-kv > div{grid-template-columns:130px minmax(0,1fr);padding:12px 0}
.svpg--clean .svpg-kv dt{font-size:14px}
.svpg--clean .svpg-kv dd{font-size:15px;font-weight:500}
.svpg--clean .cl-cta{display:flex;flex-direction:column;justify-content:center;padding:32px 36px}
.svpg--clean .cl-cta h3{margin:0 0 22px;font-size:22px;line-height:1.25;font-weight:700;color:#0f172a;text-transform:none}
.svpg--clean .cl-cta__p{margin:20px 0 0;font-size:14px;color:#64748b}
.svpg--clean .cl-cta__p a{color:#0f172a;font-weight:600;text-decoration:none}
/* ---- v7.1 nền hiệu ứng cho hero (người dùng: "theo hướng này ổn, cần sáng tạo, background hiệu ứng cho ent") ----
   Lưới chấm mờ dần xuống + 2 quầng sáng navy/cam rất nhạt trôi chậm (tắt khi prefers-reduced-motion). Vẽ bằng pseudo trên
   #content (trải hết chiều ngang, không dùng 100vw kẻo tràn ngang), nội dung .svpg nằm trên (z-index 1). */
body.page-id-2838 #content{position:relative;overflow:hidden}
body.page-id-2838 #content::before{content:"";position:absolute;left:0;right:0;top:0;height:780px;pointer-events:none;background:radial-gradient(#cbd5e1 1px,transparent 1.3px) 0 0/26px 26px;opacity:.55;-webkit-mask:linear-gradient(#000 20%,rgba(0,0,0,.6) 55%,transparent 100%);mask:linear-gradient(#000 20%,rgba(0,0,0,.6) 55%,transparent 100%)}
body.page-id-2838 #content::after{content:"";position:absolute;left:50%;top:-140px;width:1100px;height:640px;margin-left:-550px;pointer-events:none;background:radial-gradient(closest-side at 32% 45%,rgba(20,53,95,.16),transparent 72%),radial-gradient(closest-side at 72% 40%,rgba(241,89,42,.13),transparent 70%);filter:blur(28px);animation:svpgGlow 14s ease-in-out infinite alternate}
@keyframes svpgGlow{from{transform:translate3d(-30px,0,0) scale(1)}to{transform:translate3d(30px,18px,0) scale(1.06)}}
@media (prefers-reduced-motion:reduce){body.page-id-2838 #content::after{animation:none}}
.svpg--clean{position:relative;z-index:1}
.svpg--clean .cl-panel{background:#f8fafc radial-gradient(#dfe5ec 1px,transparent 1.2px) 0 0/22px 22px}
.svpg--clean .cl-cta{background:linear-gradient(135deg,#f8fafc,#eef2f7);border-color:#e3e9f0}
.svpg--clean .cl-ic{background:linear-gradient(135deg,#f1f5f9,#e6ecf3)}
.svpg--clean .cl-hero{padding-top:96px}
/* v7.3 cụm thông tin công ty → 4 ô liên hệ kiểu SaaS (người dùng: "chưa pro, saas cho cụm đó") */
.svpg--clean .cl-sec__p{margin:10px 0 0;font-size:15px;color:#64748b}
.svpg--clean .cl-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.svpg--clean .cl-tile{display:flex;flex-direction:column;min-width:0;padding:24px;border:1px solid #e5e9ef;border-radius:14px;background:#fff;color:#0f172a;text-decoration:none;transition:border-color .15s,transform .15s,box-shadow .15s}
.svpg--clean .cl-tile:hover{border-color:#c7d2e0;transform:translateY(-3px);box-shadow:0 12px 28px rgba(15,23,42,.06);color:#0f172a}
.svpg--clean .cl-tile .cl-ic{margin:0 0 18px}
.svpg--clean .cl-tile small{display:block;margin:0 0 6px;font-size:13px;font-weight:500;color:#64748b}
.svpg--clean .cl-tile b{display:block;margin:0 0 18px;font-size:15px;font-weight:600;line-height:1.5;color:#0f172a}
.svpg--clean .cl-tile__l{display:inline-flex;align-items:center;gap:6px;margin-top:auto;font-size:14px;font-weight:600;color:#14355f}
.svpg--clean .cl-tile__l svg{width:15px;height:15px;transition:transform .15s}
.svpg--clean .cl-tile:hover .cl-tile__l svg{transform:translateX(3px)}
.svpg--clean .cl-tile--cta{background:linear-gradient(135deg,#f8fafc,#eef2f7);border-color:#e3e9f0}
.svpg--clean .cl-tile--cta .cl-ic{background:#14355f;color:#fff}
/* responsive */
@media (max-width:1100px){.svpg--ed .ed-logos{grid-template-columns:repeat(4,minmax(0,1fr))}.svpg--about .svpg-grid--5 .svpg-card--tile{flex:1 1 30%}.svpg-grid--5{grid-template-columns:repeat(3,minmax(0,1fr))}.svpg-logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:849px){.svpg--clean .cl-tiles{grid-template-columns:1fr 1fr;gap:14px}body.page-id-2838 #content::after{width:700px;margin-left:-350px;height:480px}.svpg--clean .cl-3{grid-template-columns:1fr;gap:28px}.svpg--clean .cl-split,.svpg--clean .cl-info{grid-template-columns:1fr}.svpg--clean .cl-logos{grid-template-columns:repeat(3,minmax(0,1fr))}.svpg--clean .cl-sec{padding:48px 0}.svpg-page .svpg.svpg--clean h1,body.svpg-page #content[role="main"] .svpg.svpg--clean h1{font-size:36px !important}.svpg--clean .cl-hero{padding:48px 0 32px}.svpg--show .sh-hero{grid-template-columns:1fr;padding:32px 0 28px}.svpg--show .sh-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.svpg--show .sh-two{grid-template-columns:1fr}.svpg-page .svpg.svpg--show h1,body.svpg-page #content[role="main"] .svpg.svpg--show h1{font-size:32px !important}.svpg-page .svpg.svpg--ed h1,body.svpg-page #content[role="main"] .svpg.svpg--ed h1{font-size:40px !important}.svpg--ed .ed-sec{grid-template-columns:1fr;gap:18px;padding:48px 0}.svpg--ed .ed-3{grid-template-columns:1fr;gap:24px}.svpg--ed .ed-logos{grid-template-columns:repeat(3,minmax(0,1fr))}.svpg--ed .svpg-fact b{font-size:48px}.svpg--doc .svpg-dhero{grid-template-columns:1fr;gap:24px}.svpg--doc .svpg-drow{grid-template-columns:1fr;gap:16px;padding:32px 0}.svpg--doc .svpg-logos{grid-template-columns:repeat(2,minmax(0,1fr))}.svpg-grid--2,.svpg-grid--3{grid-template-columns:1fr 1fr}.svpg-intro{grid-template-columns:1fr}.svpg-intro__f{grid-template-columns:1fr}.svpg-stats{grid-template-columns:1fr}.svpg-stat + .svpg-stat{border-left:0;border-top:1px solid #eef2f6}.svpg-logos{grid-template-columns:repeat(2,minmax(0,1fr))}.svpg-q__b{padding-left:18px}.svpg-faq{grid-template-columns:minmax(0,1fr);gap:16px}.svpg-faq__side{position:static}.svpg-cats{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;margin:10px -15px 0;padding:0 15px 2px;scrollbar-width:none}.svpg-cats::-webkit-scrollbar{display:none}.svpg-cats li{flex:none;margin:0}.svpg-cats button{height:32px;padding:0 12px;border:1px solid #d5dbe3;border-radius:999px;font-size:13px}.svpg-cats button.is-on{border-color:#14355f}.svpg-table th,.svpg-table td{padding:12px 14px;font-size:13px}.svpg-table th:first-child,.svpg-table td:first-child{padding-left:14px !important}.svpg-table th:last-child,.svpg-table td:last-child{padding-right:14px !important}.svpg-table tbody th{width:auto}}
@media (max-width:549px){.svpg--clean .cl-tiles{grid-template-columns:1fr}.svpg-page .svpg.svpg--clean h1,body.svpg-page #content[role="main"] .svpg.svpg--clean h1{font-size:28px !important}.svpg--clean .cl-sub{font-size:16px}.svpg--clean .cl-stats{gap:20px 36px;padding:20px 0 48px}.svpg--clean .svpg-fact b{font-size:28px}.svpg--clean h2{font-size:24px}.svpg--clean .cl-logos{grid-template-columns:repeat(2,minmax(0,1fr))}.svpg--clean .cl-panel{padding:16px}.svpg--clean .cl-mosaic{gap:8px}.svpg--clean .sh-box{padding:8px}.svpg-page .svpg.svpg--show h1,body.svpg-page #content[role="main"] .svpg.svpg--show h1{font-size:24px !important}.svpg--show .sh-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.svpg--show .sh-facts{gap:12px 28px}.svpg--show .svpg-fact b{font-size:24px}.svpg--show .sh-mosaic{gap:8px}.svpg--show .sh-box{padding:8px;border-radius:10px}.svpg-page .svpg.svpg--ed h1,body.svpg-page #content[role="main"] .svpg.svpg--ed h1{font-size:32px !important}.svpg--ed .ed-hero{padding:40px 0 32px}.svpg--ed .ed-sub{font-size:16px}.svpg--ed .ed-nums{gap:20px 40px;padding:28px 0}.svpg--ed .svpg-fact b{font-size:40px}.svpg--ed .ed-p{font-size:18px}.svpg--ed .ed-logos{grid-template-columns:repeat(2,minmax(0,1fr))}.svpg--ed .ed-list a{font-size:18px}.svpg--ed .ed-end h2{font-size:28px}.svpg-page .svpg.svpg--doc h1,body.svpg-page #content[role="main"] .svpg.svpg--doc h1{font-size:24px !important}.svpg--doc .svpg-dvals{grid-template-columns:1fr !important}.svpg--doc .svpg-kv > div{grid-template-columns:1fr;gap:2px}.svpg--doc .svpg-dhero__f .svpg-fact b{font-size:24px;min-width:72px}.svpg-page .svpg--profile h1,body.svpg-page #content[role="main"] .svpg.svpg--profile h1{font-size:24px !important}.svpg--profile .svpg-facts{gap:14px 28px}.svpg-fact b{font-size:24px}.svpg--profile .svpg-logos{grid-template-columns:repeat(2,minmax(0,1fr))}.svpg-kv > div{grid-template-columns:1fr;gap:2px}.svpg--profile .svpg-psec{margin-bottom:44px}.svpg--about .svpg-grid--5 .svpg-card--tile{flex:1 1 100%}.svpg-sec{margin-bottom:40px}.svpg-grid{gap:16px}.svpg-grid--2,.svpg-grid--3,.svpg-grid--5{grid-template-columns:1fr}.svpg-logos{grid-template-columns:1fr}.svpg-band{padding:20px}.svpg-page .svpg .svpg-hero--lg h1,body.svpg-page #content[role="main"] .svpg .svpg-hero--lg h1{font-size:22px !important}.svpg-page .svpg .svpg-hero h1,body.svpg-page #content[role="main"] .svpg .svpg-hero h1{font-size:20px !important} /* luật cũ style.css có #content → specificity (1,3,3), phải vượt bằng (1,4,2) */.svpg-hero__act{width:100%}.svpg-hero__act .svpg-btn{flex:1}.svpg-cta{padding:16px}}

/* ===== TRANG CHÍNH SÁCH (.svpg--policy) — 5 trang cùng khuôn, ngôn ngữ v7 clean SaaS (2026-09-07) ===== */
.svpg--policy{padding-bottom:72px}
.svpg--policy .pl-hero,.svpg--faq .pl-hero,.svpg--lic .pl-hero{max-width:760px;margin:0 auto;padding:64px 0 28px;text-align:center}
.svpg--policy .cl-eyebrow,.svpg--faq .cl-eyebrow,.svpg--lic .cl-eyebrow{display:block;margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#64748b}
body.svpg-page #content[role="main"] .svpg.svpg--policy h1,body.svpg-page #content[role="main"] .svpg.svpg--faq h1,body.svpg-page #content[role="main"] .svpg.svpg--lic h1{margin:0 0 16px !important;padding:0 !important;font-size:40px !important;line-height:1.15 !important;font-weight:700 !important;letter-spacing:-.02em;color:#0f172a !important;text-align:center !important;text-transform:none !important}
.svpg--policy .pl-sub,.svpg--faq .pl-sub,.svpg--lic .pl-sub{max-width:660px;margin:0 auto;font-size:16px;line-height:1.65;color:#64748b}
/* thanh chuyển giữa 5 chính sách — tab gạch dưới, không pill */
.svpg--policy .pl-nav{display:flex;justify-content:center;gap:4px;margin:0 0 48px;border-bottom:1px solid #eef2f6;overflow-x:auto;scrollbar-width:none}
.svpg--policy .pl-nav::-webkit-scrollbar{display:none}
.svpg--policy .pl-nav__a{position:relative;display:inline-flex;align-items:center;height:44px;padding:0 16px;font-size:14px;font-weight:500;color:#64748b;text-decoration:none;white-space:nowrap}
.svpg--policy .pl-nav__a:hover{color:#0f172a}
.svpg--policy .pl-nav__a.is-on{color:#14355f;font-weight:600}
.svpg--policy .pl-nav__a.is-on::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;background:#14355f}
/* lưới: mục lục dính trái 240px + thân 760px */
.svpg--policy .pl-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px 64px;max-width:1080px;margin:0 auto;align-items:start}
.svpg--policy .pl-side{position:sticky;top:24px}
.svpg--policy .pl-toc__h{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8}
.svpg--policy .pl-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid #eef2f6}
.svpg--policy .pl-toc li{margin:0;padding:0}
.svpg--policy .pl-toc a{display:flex;gap:10px;margin-left:-1px;padding:7px 0 7px 14px;border-left:2px solid transparent;font-size:14px;line-height:1.45;color:#475569;text-decoration:none;transition:color .12s,border-color .12s}
.svpg--policy .pl-toc a span{flex:none;padding-top:2px;font-size:12px;font-variant-numeric:tabular-nums;color:#94a3b8}
.svpg--policy .pl-toc a:hover{color:#14355f;border-left-color:#cbd5e1}
.svpg--policy .pl-toc a.is-on{color:#14355f;border-left-color:#14355f;font-weight:600}
.svpg--policy .pl-toc a.is-on span{color:#14355f}
.svpg--policy .pl-help{margin:28px 0 0;padding:18px 0 0;border-top:1px solid #eef2f6}
.svpg--policy .pl-help b{display:block;margin:0 0 10px;font-size:13px;font-weight:600;color:#0f172a}
.svpg--policy .pl-help a{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:14px;color:#475569;text-decoration:none}
.svpg--policy .pl-help a svg{width:15px;height:15px;color:#94a3b8}
.svpg--policy .pl-help a:hover{color:#14355f}
/* thân */
.svpg--policy .pl-body{max-width:760px;min-width:0}
.svpg--policy .pl-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 48px}
.svpg--policy .pl-fact{padding:18px 20px;border:1px solid #eef2f6;border-radius:12px;background:#f8fafc}
.svpg--policy .pl-fact small{display:block;margin:0 0 6px;font-size:12px;font-weight:500;color:#64748b}
.svpg--policy .pl-fact b{display:block;font-size:15px;line-height:1.4;font-weight:600;color:#0f172a}
.svpg--policy .pl-sec{margin:0 0 40px;padding:0 0 40px;border-bottom:1px solid #eef2f6;scroll-margin-top:110px}
.svpg--policy .pl-sec:last-of-type{margin-bottom:0;border-bottom:0}
.svpg--policy .pl-sec h2{display:flex;align-items:baseline;gap:12px;margin:0 0 16px;font-size:22px;line-height:1.3;font-weight:700;letter-spacing:-.01em;color:#0f172a;text-transform:none}
.svpg--policy .pl-sec h2 span{flex:none;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:#94a3b8}
.svpg--policy .pl-sec h2 em{display:inline-flex;align-items:center;align-self:center;height:22px;margin-left:4px;padding:0 8px;border-radius:6px;background:#f1f5f9;font-size:12px;font-style:normal;font-weight:500;letter-spacing:0;color:#475569}
.svpg--policy .pl-sec p{margin:0 0 14px;font-size:16px;line-height:1.7;color:#334155}
.svpg--policy .pl-sec p:last-child{margin-bottom:0}
.svpg--policy .pl-sec strong{font-weight:600;color:#0f172a}
.svpg--policy .pl-ul{list-style:none;margin:0 0 14px;padding:0}
.svpg--policy .pl-ul li{position:relative;margin:0 0 8px;padding-left:22px;font-size:16px;line-height:1.7;color:#334155}
.svpg--policy .pl-ul li::before{content:"";position:absolute;left:4px;top:11px;width:6px;height:6px;border-radius:50%;background:#14355f}
.svpg--policy .pl-ul:last-child{margin-bottom:0}
.svpg--policy .pl-kv{margin:18px 0 0;border-top:1px solid #eef2f6}
.svpg--policy .pl-kv > div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:4px 20px;padding:14px 0;border-bottom:1px solid #eef2f6}
.svpg--policy .pl-kv dt{margin:0;font-size:13px;line-height:1.6;font-weight:600;color:#0f172a;text-transform:none;display:block}
.svpg--policy .pl-kv dd{margin:0;font-size:15px;line-height:1.65;color:#475569;text-transform:none;display:block}
.svpg--policy .pl-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;margin:18px 0 0;padding:14px 18px;border:1px solid #ffe3d2;border-radius:12px;background:#fff8f3}
.svpg--policy .pl-note b{padding-top:3px;font-size:13px;font-weight:600;white-space:nowrap;color:#b43e0e}
.svpg--policy .pl-note p{margin:0;font-size:14px;line-height:1.65;color:#334155}
.svpg--policy .pl-steps{list-style:none;margin:20px 0 0;padding:0}
.svpg--policy .pl-steps li{display:flex;gap:16px;margin:0;padding:0 0 18px}
.svpg--policy .pl-steps li:last-child{padding-bottom:0}
.svpg--policy .pl-steps li span{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#14355f;color:#fff;font-size:12px;font-weight:600}
.svpg--policy .pl-steps li b{display:block;margin:5px 0 4px;font-size:16px;font-weight:600;color:#0f172a}
.svpg--policy .pl-steps li p{margin:0;font-size:15px;line-height:1.65;color:#475569}
.svpg--policy .pl-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 0}
.svpg--policy .pl-card{padding:16px 18px;border:1px solid #eef2f6;border-radius:12px}
.svpg--policy .pl-card b{display:block;margin:0 0 6px;font-size:14px;font-weight:600;color:#0f172a}
.svpg--policy .pl-card p{margin:0;font-size:14px;line-height:1.6;color:#64748b}
.svpg .pl-support{margin:48px 0 0;padding:28px;border:1px solid #eef2f6;border-radius:16px;background:#f8fafc}
.svpg .pl-support h3{margin:0 0 8px;font-size:18px;line-height:1.3;font-weight:600;color:#0f172a;text-transform:none}
.svpg .pl-support p{margin:0 0 18px;font-size:15px;line-height:1.65;color:#64748b}
.svpg--policy .cl-act{display:flex;flex-wrap:wrap;gap:12px}
.svpg--policy .svpg-btn{height:42px;padding:0 18px;font-size:14px;font-weight:600}
@media (max-width:1023px){.svpg--policy .pl-grid{grid-template-columns:200px minmax(0,1fr);gap:32px 40px}}
@media (max-width:849px){
 .svpg--policy .pl-hero,.svpg--faq .pl-hero,.svpg--lic .pl-hero{padding:40px 0 20px}
 body.svpg-page #content[role="main"] .svpg.svpg--policy h1,body.svpg-page #content[role="main"] .svpg.svpg--faq h1,body.svpg-page #content[role="main"] .svpg.svpg--lic h1{font-size:28px !important}
 .svpg--policy .pl-sub,.svpg--faq .pl-sub,.svpg--lic .pl-sub{font-size:16px}
 .svpg--policy .pl-nav{justify-content:flex-start;margin-bottom:32px}
 .svpg--policy .pl-grid{grid-template-columns:minmax(0,1fr);gap:0}
 .svpg--policy .pl-side{display:none}
 .svpg--policy .pl-facts,.svpg--policy .pl-3{grid-template-columns:minmax(0,1fr)}
 .svpg--policy .pl-facts{margin-bottom:36px}
 .svpg--policy .pl-sec{margin-bottom:32px;padding-bottom:32px}
 .svpg--policy .pl-kv > div{grid-template-columns:minmax(0,1fr)}
 .svpg .pl-support{padding:22px}
}

/* 6 trang hướng dẫn/thành viên/tuyển dụng dùng chung khuôn .svpg--policy (2026-09-07) */
.svpg--policy .pl-sec a:not(.svpg-btn){color:#14355f;text-decoration:underline;text-decoration-color:#cbd5e1;text-underline-offset:3px}
.svpg--policy .pl-sec a:not(.svpg-btn):hover{color:#e04a1f;text-decoration-color:#e04a1f}
.svpg--policy .pl-note a{color:#b43e0e}
.svpg--policy .pl-top{max-width:1080px;margin:0 auto 44px}
.svpg--policy .pl-top .svkm{padding:0}
.svpg--policy .pl-top .svkm-sub{margin:0}
@media (max-width:849px){.svpg--policy .pl-top{margin-bottom:32px}}

/* icon SaaS cho khuôn chính sách/hướng dẫn (người dùng 2026-09-07: "cần saas, icon saas") */
.svpg .pl-ic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:9px;background:#f1f5f9;color:#14355f}
.svpg .pl-ic svg{width:18px;height:18px}
.svpg--policy .pl-fact{display:flex;gap:14px;align-items:flex-start}
.svpg--policy .pl-fact .pl-ic{width:40px;height:40px;border-radius:10px;background:#fff;border:1px solid #e5e9ef}
.svpg--policy .pl-fact .pl-ic svg{width:19px;height:19px}
.svpg--policy .pl-fact > div{min-width:0}
.svpg--policy .pl-sec h2{align-items:center;gap:12px}
.svpg--policy .pl-nav__a{gap:8px}
.svpg--policy .pl-nav__a svg{width:16px;height:16px;color:#94a3b8}
.svpg--policy .pl-nav__a:hover svg{color:#0f172a}
.svpg--policy .pl-nav__a.is-on svg{color:#14355f}
.svpg--policy .pl-note b{display:inline-flex;align-items:center;gap:6px}
.svpg--policy .pl-note b svg{width:15px;height:15px}
.svpg--policy .pl-card .pl-ic{width:32px;height:32px;border-radius:8px;margin:0 0 12px}
.svpg--policy .pl-card .pl-ic svg{width:16px;height:16px}
.svpg .pl-support{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px 20px;align-items:center;padding:24px 28px}
.svpg .pl-support .pl-ic{width:48px;height:48px;border-radius:12px;background:#fff1e8;color:#e04a1f}
.svpg .pl-support .pl-ic svg{width:22px;height:22px}
.svpg .pl-support h3{margin:0 0 4px}
.svpg .pl-support p{margin:0}
.svpg .pl-support .cl-act{flex-wrap:nowrap}
@media (max-width:1023px){.svpg .pl-support{grid-template-columns:auto minmax(0,1fr)}.svpg .pl-support .cl-act{grid-column:1 / -1;flex-wrap:wrap}}
@media (max-width:849px){.svpg .pl-support{padding:20px}}

/* màu sắc cho khuôn chính sách/hướng dẫn (người dùng 2026-09-07: "cần màu sắc, creative hơn chút") */
.svpg--policy,.svpg--faq,.svpg--lic{position:relative}
.svpg--policy .pl-hero,.svpg--policy .pl-nav,.svpg--policy .pl-top,.svpg--policy .pl-grid{position:relative;z-index:1}
.pl-ac-blue{--ac:#1d4ed8;--ac-bg:#e2eafc;--ac-soft:#f3f6fd}
.pl-ac-green{--ac:#0f7a4f;--ac-bg:#dcf3e7;--ac-soft:#f0faf5}
.pl-ac-violet{--ac:#6d28d9;--ac-bg:#ebe5fb;--ac-soft:#f6f3fd}
.pl-ac-orange{--ac:#c2410c;--ac-bg:#ffe8d9;--ac-soft:#fff6f0}
.pl-ac-teal{--ac:#0f766e;--ac-bg:#d8f1f0;--ac-soft:#eff9f8}
.pl-ac-rose{--ac:#be185d;--ac-bg:#fce4ee;--ac-soft:#fdf2f7}
.pl-ac-amber{--ac:#b45309;--ac-bg:#fdefcf;--ac-soft:#fdf8ec}
/* nền hero: dải màu nhạt tràn ngang + lưới chấm mờ dần + 2 quầng sáng trôi chậm (cùng ngôn ngữ trang Giới thiệu) */
.svpg--policy .pl-bg,.svpg--faq .pl-bg,.svpg--lic .pl-bg{position:absolute;left:50%;top:-30px;width:100vw;height:560px;transform:translateX(-50%);pointer-events:none;z-index:0;overflow:hidden;background:linear-gradient(180deg,var(--ac-soft) 0%,#fff 100%)}
.svpg--policy .pl-bg::before,.svpg--faq .pl-bg::before,.svpg--lic .pl-bg::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#c7d0dc 1px,transparent 1.3px);background-size:26px 26px;-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 45%,transparent 85%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 45%,transparent 85%)}
.svpg--policy .pl-bg::after,.svpg--faq .pl-bg::after,.svpg--lic .pl-bg::after{content:"";position:absolute;inset:-40px;background:radial-gradient(circle at 28% 32%,var(--ac-bg) 0,transparent 30%),radial-gradient(circle at 72% 22%,#fff1e8 0,transparent 28%);filter:blur(36px);opacity:.95;animation:plGlow 16s ease-in-out infinite alternate}
@keyframes plGlow{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(2%,3%,0) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.svpg--policy .pl-bg::after,.svpg--faq .pl-bg::after,.svpg--lic .pl-bg::after{animation:none}}
.svpg--policy .cl-eyebrow,.svpg--faq .cl-eyebrow,.svpg--lic .cl-eyebrow,.svpg--lic .svpg-eyebrow{color:var(--ac)}
/* 7 họ màu cho ô icon */
.svpg .pl-ic.pl-ic--blue{background:#e2eafc;color:#1d4ed8}
.svpg .pl-ic.pl-ic--green{background:#dcf3e7;color:#0f7a4f}
.svpg .pl-ic.pl-ic--violet{background:#ebe5fb;color:#6d28d9}
.svpg .pl-ic.pl-ic--orange{background:#ffe8d9;color:#c2410c}
.svpg .pl-ic.pl-ic--teal{background:#d8f1f0;color:#0f766e}
.svpg .pl-ic.pl-ic--rose{background:#fce4ee;color:#be185d}
.svpg .pl-ic.pl-ic--amber{background:#fdefcf;color:#b45309}
.svpg--policy .pl-fact .pl-ic{border:0}
.svpg--policy .pl-fact{background:#fff;border-color:#e5e9ef;box-shadow:0 1px 2px rgba(15,23,42,.04)}
/* tab: icon mang màu riêng của từng trang, chữ tab đang xem theo tông trang */
.svpg--policy .pl-nav__a--blue svg{color:#1d4ed8}.svpg--policy .pl-nav__a--green svg{color:#0f7a4f}.svpg--policy .pl-nav__a--violet svg{color:#6d28d9}
.svpg--policy .pl-nav__a--orange svg{color:#c2410c}.svpg--policy .pl-nav__a--teal svg{color:#0f766e}.svpg--policy .pl-nav__a--rose svg{color:#be185d}.svpg--policy .pl-nav__a--amber svg{color:#b45309}
.svpg--policy .pl-nav__a.is-on{color:var(--ac)}
.svpg--policy .pl-nav__a.is-on::after{background:var(--ac)}
.svpg--policy .pl-nav{border-bottom-color:rgba(15,23,42,.08)}
.svpg--policy .pl-toc a.is-on{color:var(--ac);border-left-color:var(--ac)}
.svpg--policy .pl-toc a.is-on span{color:var(--ac)}
.svpg--policy .pl-steps li span{background:var(--ac)}
.svpg--policy .pl-sec h2 em{background:var(--ac-bg);color:var(--ac)}
.svpg--policy .pl-ul li::before{background:var(--ac)}
.svpg .pl-support{background:var(--ac-soft);border-color:var(--ac-bg)}
.svpg .pl-support .pl-ic{background:var(--ac-bg);color:var(--ac)}
.svpg .pl-support .svpg-btn--solid{background:var(--ac);border-color:var(--ac)}
.svpg .pl-support .svpg-btn--solid:hover{filter:brightness(.92)}
.svpg .pl-support .svpg-btn--line{border-color:var(--ac);color:var(--ac)}
.svpg .pl-support .svpg-btn--line:hover{background:var(--ac);color:#fff}
.svpg--policy .pl-help a:hover{color:var(--ac)}
.svpg--policy .pl-sec a:not(.svpg-btn){color:var(--ac);text-decoration-color:var(--ac-bg)}

/* ===== bộ màu áp cho Hỏi đáp / Licensing / Giới thiệu (2026-09-07, người dùng "cả ba") ===== */
.svpg .pl-ic.pl-ic--nv{background:#e9eef5;color:#14355f}
.svpg--faq .pl-hero,.svpg--faq .svpg-faq,.svpg--lic .pl-hero,.svpg--lic .svpg-sec{position:relative;z-index:1}
.svpg--faq .cl-act,.svpg--lic .cl-act{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:22px}
.svpg--faq .svpg-btn,.svpg--lic .svpg-btn{height:42px;padding:0 18px;font-size:14px;font-weight:600}
.svpg--faq .pl-hero,.svpg--lic .pl-hero{padding-bottom:36px}
/* Hỏi đáp */
.svpg--faq .svpg-faq{margin-top:8px}
.svpg--faq .faq-side{padding:16px;border:1px solid #e5e9ef;border-radius:14px;background:#fff}
.svpg--faq .svpg-cats{margin-top:12px}
.svpg--faq .svpg-cats li{margin:0 0 4px}
.svpg--faq .svpg-cats button{justify-content:flex-start;gap:10px;padding:7px 8px;border-radius:10px;font-weight:600}
.svpg--faq .svpg-cats button > *{pointer-events:none}
.svpg--faq .svpg-cats button .pl-ic{width:30px;height:30px;border-radius:8px}
.svpg--faq .svpg-cats button .pl-ic svg{width:15px;height:15px}
.svpg--faq .svpg-cats button i{margin-left:auto}
.svpg--faq .svpg-cats button:hover{background:#f8fafc;color:#0f172a}
.svpg--faq .svpg-cats button.is-on{background:#f1f5f9;color:#0f172a}
.svpg--faq .svpg-cats button.is-on.cat--nv{background:#e9eef5;color:#14355f}
.svpg--faq .svpg-cats button.is-on.cat--blue{background:#e2eafc;color:#1d4ed8}
.svpg--faq .svpg-cats button.is-on.cat--green{background:#dcf3e7;color:#0f7a4f}
.svpg--faq .svpg-cats button.is-on.cat--violet{background:#ebe5fb;color:#6d28d9}
.svpg--faq .svpg-cats button.is-on.cat--orange{background:#ffe8d9;color:#c2410c}
.svpg--faq .svpg-cats button.is-on.cat--teal{background:#d8f1f0;color:#0f766e}
.svpg--faq .svpg-cats button.is-on i{color:inherit;opacity:.7}
.svpg--faq .faq-help{margin-top:14px;padding:18px;border:1px solid var(--ac-bg);border-radius:14px;background:var(--ac-soft)}
.svpg--faq .faq-help > .pl-ic{width:40px;height:40px;margin:0 0 12px;background:var(--ac-bg);color:var(--ac)}
.svpg--faq .faq-help b{display:block;margin:0 0 8px;font-size:15px;font-weight:600;color:#0f172a}
.svpg--faq .faq-help__row{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:14px;color:#334155;text-decoration:none}
.svpg--faq .faq-help__row svg{width:15px;height:15px;color:var(--ac)}
.svpg--faq .faq-help__row:hover{color:var(--ac)}
.svpg--faq .faq-help .svpg-btn{width:100%;height:40px;margin-top:10px;background:var(--ac);border-color:var(--ac);color:#fff}
.svpg--faq .faq-help .svpg-btn:hover{filter:brightness(.92)}
.svpg--faq .svpg-q{border-radius:12px}
.svpg--faq .svpg-q[open]{border-color:#d5dbe3;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.svpg--faq .svpg-q[open] summary{color:#0f172a}
.svpg--faq .svpg-q--blue .svpg-q__n{background:#e2eafc;color:#1d4ed8}.svpg--faq .svpg-q--blue[open] .svpg-q__n{background:#1d4ed8;color:#fff}.svpg--faq .svpg-q--blue .svpg-q__t small{color:#1d4ed8}
.svpg--faq .svpg-q--green .svpg-q__n{background:#dcf3e7;color:#0f7a4f}.svpg--faq .svpg-q--green[open] .svpg-q__n{background:#0f7a4f;color:#fff}.svpg--faq .svpg-q--green .svpg-q__t small{color:#0f7a4f}
.svpg--faq .svpg-q--violet .svpg-q__n{background:#ebe5fb;color:#6d28d9}.svpg--faq .svpg-q--violet[open] .svpg-q__n{background:#6d28d9;color:#fff}.svpg--faq .svpg-q--violet .svpg-q__t small{color:#6d28d9}
.svpg--faq .svpg-q--orange .svpg-q__n{background:#ffe8d9;color:#c2410c}.svpg--faq .svpg-q--orange[open] .svpg-q__n{background:#c2410c;color:#fff}.svpg--faq .svpg-q--orange .svpg-q__t small{color:#c2410c}
.svpg--faq .svpg-q--teal .svpg-q__n{background:#d8f1f0;color:#0f766e}.svpg--faq .svpg-q--teal[open] .svpg-q__n{background:#0f766e;color:#fff}.svpg--faq .svpg-q--teal .svpg-q__t small{color:#0f766e}
/* Licensing */
.svpg--lic .lic-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.svpg--lic .lic-plan{position:relative;display:flex;flex-direction:column;padding:24px;border:1px solid #e5e9ef;border-radius:16px;background:#fff}
.svpg--lic .lic-plan--hi{border-color:#c2410c;box-shadow:0 0 0 3px #ffe8d9}
.svpg--lic .lic-plan > .pl-ic{width:44px;height:44px;border-radius:12px;margin:0 0 16px}
.svpg--lic .lic-plan > .pl-ic svg{width:21px;height:21px}
.svpg--lic .lic-plan h3{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:18px;line-height:1.3;font-weight:700;color:#0f172a;text-transform:none}
.svpg--lic .lic-tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;background:#c2410c;color:#fff;font-size:11px;font-weight:600;font-style:normal;letter-spacing:.02em}
.svpg--lic .lic-sub{display:block;margin:0 0 12px;font-size:13px;font-weight:500;color:#64748b}
.svpg--lic .lic-plan p{margin:0 0 16px;font-size:14px;line-height:1.65;color:#334155}
.svpg--lic .lic-plan .svpg-list{margin:auto 0 0}
.svpg--lic .lic-plan--blue .svpg-list li::before{background:#1d4ed8}
.svpg--lic .lic-plan--orange .svpg-list li::before{background:#c2410c}
.svpg--lic .lic-plan--green .svpg-list li::before{background:#0f7a4f}
.svpg--lic .lic-dot{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;vertical-align:1px}
.svpg--lic .lic-dot--blue{background:#1d4ed8}.svpg--lic .lic-dot--orange{background:#c2410c}.svpg--lic .lic-dot--green{background:#0f7a4f}
.svpg--lic .svpg-table th.is-hi,.svpg--lic .svpg-table td.is-hi{background:#fff8f3}
.svpg--lic .svpg-table th.is-hi{color:#c2410c}
.svpg--lic .lic-foot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
.svpg--lic .lic-card{padding:24px;border:1px solid #e5e9ef;border-radius:16px;background:#fff}
.svpg--lic .lic-card h3{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:18px;font-weight:700;color:#0f172a;text-transform:none}
.svpg--lic .lic-card .svpg-list--lg{display:block}
.svpg--lic .pl-support{margin:0;grid-template-columns:auto minmax(0,1fr);align-content:center}
.svpg--lic .pl-support .cl-act{grid-column:1 / -1;justify-content:flex-start;margin-top:0;flex-wrap:wrap}
.svpg--lic .pl-support p a{color:var(--ac);font-weight:600;text-decoration:none}
@media (max-width:1023px){.svpg--lic .lic-plans{grid-template-columns:minmax(0,1fr)}}
@media (max-width:849px){.svpg--lic .lic-foot{grid-template-columns:minmax(0,1fr)}.svpg--faq .faq-side{padding:12px}.svpg--faq .svpg-cats button.is-on{border-color:transparent}}
/* Giới thiệu: 7 ô icon theo họ màu (bố cục v7.3 giữ nguyên) */
.svpg--clean .cl-ic.cl-ic--blue{background:#e2eafc;color:#1d4ed8}
.svpg--clean .cl-ic.cl-ic--green{background:#dcf3e7;color:#0f7a4f}
.svpg--clean .cl-ic.cl-ic--violet{background:#ebe5fb;color:#6d28d9}
.svpg--clean .cl-ic.cl-ic--orange{background:#ffe8d9;color:#c2410c}
.svpg--clean .cl-tile--cta{background:linear-gradient(135deg,#fff8f3,#ffefe3);border-color:#ffe3d2}
.svpg--clean .cl-tile--cta .cl-ic.cl-ic--orange{background:#c2410c;color:#fff}


/* ===== svn-ux-elements ===== */
/* SoftVN UX Builder: Feature Grid */
.softvn-feature-grid {
  display: grid;
  grid-template-columns: repeat(var(--softvn-feature-grid-columns, 2), minmax(0, 1fr));
  gap: var(--softvn-feature-grid-gap, 28px);
  margin-bottom: var(--softvn-feature-grid-bottom-gap, 40px);
}

.softvn-feature-grid__item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.softvn-feature-grid__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-height: 42px;
}

.softvn-feature-grid__icon img {
  display: block;
  width: var(--softvn-feature-grid-icon-size, 28px);
  height: var(--softvn-feature-grid-icon-size, 28px);
  object-fit: contain;
}

.softvn-feature-grid__icon-fallback {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1f3653 0%, #355e93 100%);
  box-shadow: 0 0 0 6px rgba(31, 54, 83, 0.08);
}

.softvn-feature-grid__content {
  min-width: 0;
}

.softvn-feature-grid__title {
  margin: 0 0 8px;
  color: #0f1d33;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
}

.softvn-feature-grid__text {
  color: inherit;
  font-size: 16px;
  line-height: 1.72;
}

.softvn-feature-grid__text > :last-child {
  margin-bottom: 0;
}

.softvn-feature-grid__header {
  text-align: center;
  grid-column: 1 / -1;
}

.softvn-feature-grid__section-title {
  margin: 0;
  color: #0f1d33;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 700;
}

.softvn-feature-grid__divider {
  width: 96px;
  height: 1px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: #ef4444;
}

.softvn-feature-grid-builder {
  display: grid;
  gap: 14px;
}

.softvn-feature-grid-builder__header {
  grid-column: 1 / -1;
  text-align: center;
}

.softvn-feature-grid-builder__header strong {
  display: block;
  color: #0f1d33;
  font-size: 21px;
  line-height: 1.35;
  font-weight: 700;
}

.softvn-feature-grid-builder__divider {
  width: 96px;
  height: 1px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: #ef4444;
}

.softvn-feature-grid-builder-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid #d9e5f3;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.softvn-feature-grid-builder-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98);
  border: 1px solid #e3edf9;
  overflow: hidden;
}

.softvn-feature-grid-builder-item__icon img {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.softvn-feature-grid-builder-item__icon-fallback {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1f3653 0%, #355e93 100%);
}

.softvn-feature-grid-builder-item__body {
  display: grid;
  gap: 4px;
}

.softvn-feature-grid-builder-item__body strong {
  color: #0f1d33;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
}

.softvn-feature-grid-builder-item__body span {
  color: inherit;
  font-size: 16px;
  line-height: 1.72;
}

@media (max-width: 849px) {
  .softvn-feature-grid {
    grid-template-columns: repeat(var(--softvn-feature-grid-columns-mobile, 1), minmax(0, 1fr));
  }
}

/* SoftVN UX Builder: Image Feature Grid */
.softvn-image-feature-grid {
  display: grid;
  gap: 30px;
  margin-bottom: var(--softvn-image-feature-grid-bottom-gap, 40px);
}

.softvn-image-feature-grid__header {
  text-align: center;
}

.softvn-image-feature-grid__section-title {
  margin: 0;
  color: #0f1d33;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 700;
}

.softvn-image-feature-grid__divider {
  width: 96px;
  height: 1px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: #ef4444;
}

.softvn-image-feature-grid__items {
  display: grid;
  grid-template-columns: repeat(var(--softvn-image-feature-grid-columns, 4), minmax(0, 1fr));
  gap: var(--softvn-image-feature-grid-gap, 28px);
}

.softvn-image-feature-grid__item {
  display: grid;
  align-content: start;
}

.softvn-image-feature-grid__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: #f3f7fc;
  border-radius: var(--softvn-image-feature-radius, 10px);
}

.softvn-image-feature-grid__media::before {
  content: "";
  display: block;
  padding-top: var(--softvn-image-feature-ratio, 62%);
}

.softvn-image-feature-grid__media img,
.softvn-image-feature-grid__placeholder {
  position: absolute;
  inset: 0;
}

.softvn-image-feature-grid__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.softvn-image-feature-grid__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8aa0ba;
  font-size: 14px;
  font-weight: 600;
}

.softvn-image-feature-grid__body {
  min-width: 0;
}

.softvn-image-feature-grid__title {
  margin: 0;
  color: #0f1d33;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 700;
}

.softvn-image-feature-grid__text {
  color: inherit;
  font-size: 16px;
  line-height: 1.72;
  margin-top: 12px;
}

.softvn-image-feature-grid__text > :last-child {
  margin-bottom: 0;
}

.softvn-icon-box-grid {
  display: grid;
  gap: 30px;
  margin-bottom: var(--softvn-icon-box-grid-bottom-gap, 40px);
}

.softvn-icon-box-grid__header {
  text-align: center;
}

.softvn-icon-box-grid__section-title {
  margin: 0;
  color: #0f1d33;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 700;
}

.softvn-icon-box-grid__divider {
  width: 96px;
  height: 2px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: #ef4444;
}

.softvn-icon-box-grid__items {
  display: grid;
  grid-template-columns: repeat(var(--softvn-icon-box-grid-columns, 3), minmax(0, 1fr));
  gap: var(--softvn-icon-box-grid-gap, 28px);
}

.softvn-icon-box-grid__item {
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
}

.softvn-icon-box-grid__icon {
  width: var(--softvn-icon-box-grid-icon-size, 72px);
  height: var(--softvn-icon-box-grid-icon-size, 72px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.softvn-icon-box-grid__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.softvn-icon-box-grid__icon-fallback {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(135deg, #1f3653 0%, #355e93 100%);
}

.softvn-icon-box-grid__body {
  display: grid;
  gap: 10px;
}

.softvn-icon-box-grid__title {
  margin: 0;
  color: #0f1d33;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 700;
}

.softvn-icon-box-grid__text {
  color: inherit;
  font-size: 16px;
  line-height: 1.72;
}

.softvn-icon-box-grid__text > :last-child {
  margin-bottom: 0;
}

.softvn-pricing-table-shortcode {
  display: block;
  margin-bottom: 40px;
}

.softvn-pricing-table-shortcode__title {
  margin: 0;
  color: #0f1d33;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 700;
  text-align: center;
}

.softvn-pricing-table-shortcode__divider {
  width: 96px;
  height: 2px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: #ef4444;
}

.softvn-pricing-table-shortcode__subtitle {
  margin-top: 20px;
  color: inherit;
  font-size: 16px;
  line-height: 1.72;
  text-align: center;
}

.softvn-pricing-table-shortcode__content {
  margin-top: 24px;
}

.softvn-pricing-table-shortcode-builder {
  padding: 16px;
  border: 1px dashed #9cc6f7;
  border-radius: 14px;
  background: #f8fbff;
}

.softvn-pricing-table-shortcode-builder__title {
  color: #0f1d33;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 700;
  text-align: center;
}

.softvn-pricing-table-shortcode-builder__divider {
  width: 96px;
  height: 2px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: #ef4444;
}

.softvn-pricing-table-shortcode-builder__subtitle {
  margin-top: 20px;
  color: inherit;
  font-size: 16px;
  line-height: 1.72;
  text-align: center;
}

.softvn-pricing-table-shortcode-builder__code {
  margin: 24px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: #0f1d33;
  font-size: 14px;
  line-height: 1.6;
  font-family: Consolas, Monaco, monospace;
}

.softvn-icon-box-grid-builder {
  display: grid;
  gap: 16px;
}

.softvn-icon-box-grid-builder__header {
  grid-column: 1 / -1;
}

.softvn-icon-box-grid-builder__header strong {
  display: block;
  color: #0f1d33;
  font-size: 21px;
  line-height: 1.35;
  font-weight: 700;
  text-align: center;
}

.softvn-icon-box-grid-builder__divider {
  width: 96px;
  height: 2px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: #ef4444;
}

.softvn-icon-box-grid-builder-item {
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
  padding: 12px 10px;
}

.softvn-icon-box-grid-builder-item__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.softvn-icon-box-grid-builder-item__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.softvn-icon-box-grid-builder-item__icon-fallback {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(135deg, #1f3653 0%, #355e93 100%);
}

.softvn-icon-box-grid-builder-item__body {
  display: grid;
  gap: 10px;
}

.softvn-icon-box-grid-builder-item__body strong {
  color: #0f1d33;
  font-size: 21px;
  line-height: 1.35;
  font-weight: 700;
}

.softvn-icon-box-grid-builder-item__body span {
  color: inherit;
  font-size: 16px;
  line-height: 1.72;
}

.softvn-image-feature-grid-builder {
  display: grid;
  gap: 16px;
}

.softvn-image-feature-grid-builder__header {
  grid-column: 1 / -1;
}

.softvn-image-feature-grid-builder__header strong {
  display: block;
  color: #0f1d33;
  font-size: 21px;
  line-height: 1.35;
  font-weight: 700;
  text-align: center;
}

.softvn-image-feature-grid-builder__divider {
  width: 96px;
  height: 1px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: #ef4444;
}

.softvn-image-feature-grid-builder-item {
  display: grid;
  gap: var(--softvn-image-feature-content-gap, 18px);
  padding: 14px;
  border: 1px solid #d9e5f3;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.softvn-image-feature-grid-builder-item__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--softvn-image-feature-radius, 10px);
  background: #eef5ff;
}

.softvn-image-feature-grid-builder-item__ratio {
  display: block;
  width: 100%;
  position: relative;
  padding-top: var(--softvn-image-feature-ratio, 62%);
}

.softvn-image-feature-grid-builder-item__media img,
.softvn-image-feature-grid-builder-item__placeholder {
  position: absolute;
  inset: 0;
}

.softvn-image-feature-grid-builder-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.softvn-image-feature-grid-builder-item__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7f94ad;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.softvn-image-feature-grid-builder-item__body {
  display: grid;
  gap: 6px;
}

.softvn-image-feature-grid-builder-item__body strong {
  color: #0f1d33;
  font-size: 21px;
  line-height: 1.35;
  font-weight: 700;
}

.softvn-image-feature-grid-builder-item__body span {
  color: inherit;
  font-size: 16px;
  line-height: 1.72;
}

.softvn-note-box {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--softvn-note-border, #f1d0d2);
  border-radius: 0;
  background: var(--softvn-note-bg, #f8dfe1);
  color: var(--softvn-note-text, #a83d43);
  --softvn-note-accent: #e7c0c3;
  --softvn-note-border: #f1d0d2;
  --softvn-note-bg: #f8dfe1;
  --softvn-note-text: #a83d43;
  --softvn-note-label: #bf3b3b;
  --softvn-note-close: #c56b6f;
}

.softvn-note-box__accent {
  flex: 0 0 20px;
  background: var(--softvn-note-accent, #e7c0c3);
}

.softvn-note-box__inner {
  flex: 1 1 auto;
  padding: 14px 28px 14px 18px;
}

.softvn-note-box__label {
  font-weight: 700;
  color: var(--softvn-note-label, #bf3b3b);
}

.softvn-note-box__content {
  display: inline;
  color: var(--softvn-note-text, #b24a4f);
}

.softvn-note-box__content p {
  display: inline;
  margin: 0;
}

.softvn-note-box__close {
  position: absolute;
  top: 6px;
  right: 8px;
  border: 0;
  background: transparent;
  color: var(--softvn-note-close, #c56b6f);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.softvn-note-box--builder {
  min-height: 68px;
}

.softvn-note-box--success {
  --softvn-note-accent: #ccebd6;
  --softvn-note-border: #c9e6d3;
  --softvn-note-bg: #edf9f0;
  --softvn-note-text: #2f6b3f;
  --softvn-note-label: #22633a;
  --softvn-note-close: #4d8a5f;
}

.softvn-note-box--warning {
  --softvn-note-accent: #f0dcaf;
  --softvn-note-border: #efdcae;
  --softvn-note-bg: #fff7df;
  --softvn-note-text: #8a6422;
  --softvn-note-label: #7a5617;
  --softvn-note-close: #a87d2d;
}

.softvn-note-box--info {
  --softvn-note-accent: #c8e2f7;
  --softvn-note-border: #c9dff0;
  --softvn-note-bg: #eef7ff;
  --softvn-note-text: #35678b;
  --softvn-note-label: #275c81;
  --softvn-note-close: #4c7ea3;
}

.softvn-note-box--danger {
  --softvn-note-accent: #e7c0c3;
  --softvn-note-border: #f1d0d2;
  --softvn-note-bg: #f8dfe1;
  --softvn-note-text: #a83d43;
  --softvn-note-label: #bf3b3b;
  --softvn-note-close: #c56b6f;
}

.softvn-banner-box {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  background: var(--softvn-banner-bg, #0f3fd1);
}

.softvn-banner-box__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(117deg, var(--softvn-banner-overlay, #142f93) 0 35%, transparent 35.5%),
    linear-gradient(90deg, transparent 0 49%, rgba(255, 255, 255, 0.08) 49% 49.5%, transparent 49.5%);
  pointer-events: none;
}

.softvn-banner-box__media {
  position: absolute;
  inset: 0;
  background-image: var(--softvn-banner-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
  opacity: 1;
}

.softvn-banner-box__content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, 36%) minmax(0, 1fr);
  min-height: 300px;
}

.softvn-banner-box__panel {
  padding: 42px 32px 34px 58px;
  color: #fff;
  position: relative;
  z-index: 2;
}

.softvn-banner-box__title {
  margin: 0 0 16px;
  color: inherit;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 700;
}

.softvn-banner-box__bullets {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.softvn-banner-box__bullets li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.55;
}

.softvn-banner-box__bullets li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
}

.softvn-banner-box__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.softvn-banner-box__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: #21314c;
  background: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
}

.softvn-banner-box__button--secondary {
  background: rgba(255, 255, 255, 0.94);
  color: #7d7d7d;
}

.softvn-banner-box__button-icon {
  font-size: 16px;
  line-height: 1;
}

.softvn-banner-box__visual {
  position: relative;
  min-height: 300px;
  z-index: 2;
}

.softvn-banner-box__mock {
  position: absolute;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
  z-index: 1;
}

.softvn-banner-box__mock--back {
  top: 42px;
  left: 6%;
  width: 44%;
  height: 58%;
  opacity: 0.9;
}

.softvn-banner-box__mock--front {
  top: 54px;
  left: 36%;
  width: 42%;
  height: 48%;
  background: rgba(18, 49, 147, 0.95);
}

.softvn-banner-box__mock--white {
  top: 74px;
  left: 53%;
  width: 42%;
  height: 50%;
}

.softvn-banner-box--builder .softvn-banner-box__overlay {
  opacity: .95;
}

.softvn-banner-box--builder .softvn-banner-box__media {
  background-color: var(--softvn-banner-bg, #0f3fd1);
}

.softvn-banner-box--builder .softvn-banner-box__content {
  grid-template-columns: minmax(260px, 36%) minmax(0, 1fr);
}

.softvn-banner-box--builder .softvn-banner-box__panel {
  background: var(--softvn-banner-text-panel, #102b84);
}

.softvn-banner-box--builder .softvn-banner-box__button {
  pointer-events: none;
}

@media (max-width: 849px) {
.softvn-image-feature-grid__items {
    grid-template-columns: repeat(var(--softvn-image-feature-grid-columns-mobile, 1), minmax(0, 1fr));
  }

  .softvn-icon-box-grid__items {
    grid-template-columns: repeat(var(--softvn-icon-box-grid-columns-mobile, 1), minmax(0, 1fr));
  }
}

.ux-builder .app-sidebar-top .title-row-actions .svn-view-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  margin-left: 10px;
  border: 1px solid #f15a24;
  border-radius: 999px;
  background: #f15a24;
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(241, 90, 36, 0.24);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.ux-builder .app-sidebar-top .title-row-actions .svn-view-page-btn:hover,
.ux-builder .app-sidebar-top .title-row-actions .svn-view-page-btn:focus-visible {
  background: #ff6b3b;
  border-color: #ff6b3b;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(241, 90, 36, 0.3);
}

.ux-builder .svn-view-page-btn {
  position: fixed;
  left: 12px;
  bottom: 54px;
  display: flex;
  width: 262px;
  min-height: 38px;
  margin: 0;
  font-size: 13px;
  z-index: 100000;
  box-sizing: border-box;
}