/* ===== 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: 13px;
  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: 15px;
  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: 15px;
  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: 15px;
  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: 14px;
    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: 14px; }   /* 12,8 → 13  menu header (0,8em) */
.softvn-product-meta { font-size: 14px; }         /* 12,8 → 13  dòng "hãng · loại" trên thẻ SP */
.copyright-footer strong { font-size: 14px; }     /* 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: 15px; }          /* 14,4 → 14  chữ chỉ dành cho trình đọc màn hình */
.copyright-footer { font-size: 14px; }            /* 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: 15px; }   /* 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: 15px; }         /* 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: 15px; }                     /* 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: 15px;
  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: 15px !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: 15px;
  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: 15px; 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: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; line-height: 1; }
#masthead .softvn-chip__text strong { font-size: 15px; 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: 14px; 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:15px;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:12px;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:15px;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:13px;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:14px;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:12px;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:14px;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:14px;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:13px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svmm__pt em{font-style:normal;font-size:13px;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:14px;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:13px;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:14px;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:14px;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:14px;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:14px;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:14px;font-weight:600;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svmm__brand small{font-size:12px;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:12px;font-weight:700;font-style:normal;line-height:1}
.svmm__deal b{font-size:14px;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:14px;font-weight:700;color:#14355f}
.svmm__price s{font-size:13px;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:12px;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:15px}
.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:14px;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:13px;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:14px;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:14px}
.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:12px;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:13px;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:12px;font-weight:700;font-style:normal;line-height:1}
.svmm__deal > b{font-size:15px}
.svmm__pts{margin:0;padding:0;list-style:none}
.svmm__pts li{position:relative;margin:0 0 3px;padding-left:18px;font-size:13px;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:15px;font-weight:700;color:#dc2626}
.svmm__go{display:inline-flex;align-items:center;gap:5px;font-size:13px;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-blog-single ===== */
/* =====================================================================
   SoftVN — BÀI VIẾT ĐƠN, bản phẳng 2026-09-07 (bản cũ "FINAL v3": /root/blog-single-before-20260907/blog-single.css).
   Cột đọc 800px canh giữa (.svbs-col), không thẻ trắng/bóng; breadcrumb · H1 · ngày · phút đọc; mục lục <details>;
   thân bài 17px/1.8; bài trước/sau; ô CTA cam nhạt; bài liên quan = thẻ trang danh sách (.svb-card, chép từ blog-archive.css).
   ===================================================================== */
.single-post{background:#fff}
.single-post .entry-header,.single-post .article-inner > .entry-header,.single-post .post .entry-header{display:none !important}
/* bố cục 2 cột (2026-09-07: cột đọc 800px một mình bị chê "lọt thỏm giữa") */
.single-post .svbs-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:0 40px;align-items:start;padding-top:22px}
.single-post .svbs-main{min-width:0}
.single-post .svbs-side{min-width:0}
.single-post .svbs-toc-mobile{display:none}
/* đầu bài */
.single-post .svbs-head{padding:0}
.single-post .svbs-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px;font-size:14px;font-weight:600;color:#64748b}
.single-post .svbs-crumb a{color:#64748b;text-decoration:none}
.single-post .svbs-crumb a:hover{color:#14355f}
.single-post .svbs-crumb i{font-style:normal;color:#cbd5e1}
.single-post .svbs-title{margin:0;font-size:32px;line-height:1.22;font-weight:700;color:#0f172a;letter-spacing:-.01em;text-transform:none;text-wrap:balance}
.single-post .svbs-meta{display:flex;flex-wrap:wrap;gap:6px 0;margin:10px 0 0;font-size:14px;color:#64748b}
.single-post .svbs-meta > *{display:inline-flex;align-items:center}
.single-post .svbs-meta > * + *{position:relative;margin-left:16px;padding-left:16px}
.single-post .svbs-meta > * + *::before{content:"";position:absolute;left:0;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#cbd5e1}
.single-post .svbs-lead{margin:14px 0 0;font-size:16px;line-height:1.65;color:#475569}
/* khung */
.single-post .softvn-single-main,.single-post .site-main.softvn-single-main{margin-top:0;padding:0 0 48px}
.single-post .softvn-single-main > .container{max-width:1220px}
.single-post article.svbs{margin:0}
.single-post .entry-content.svbs-content{max-width:none;margin:22px 0 0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.single-post .entry-content.svbs-content > *:first-child{margin-top:0 !important;padding-top:0 !important}
/* mục lục */
.single-post .svbs-toc{margin:22px 0 0;padding:14px 18px;border:1px solid #e5e9ef;border-radius:10px;background:#fff}
.single-post .svbs-toc summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font-size:15px;font-weight:700;color:#0f172a}
.single-post .svbs-toc summary::-webkit-details-marker{display:none}
.single-post .svbs-toc summary::before{content:"";width:16px;height:16px;flex:0 0 16px;background:#14355f;-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=%27M8 6h13%27/%3E%3Cpath d=%27M8 12h13%27/%3E%3Cpath d=%27M8 18h13%27/%3E%3Cpath d=%27M3 6h.01%27/%3E%3Cpath d=%27M3 12h.01%27/%3E%3Cpath d=%27M3 18h.01%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=%27M8 6h13%27/%3E%3Cpath d=%27M8 12h13%27/%3E%3Cpath d=%27M8 18h13%27/%3E%3Cpath d=%27M3 6h.01%27/%3E%3Cpath d=%27M3 12h.01%27/%3E%3Cpath d=%27M3 18h.01%27/%3E%3C/svg%3E") no-repeat center/16px 16px}
.single-post .svbs-toc summary::after{content:"";margin-left:auto;width:16px;height:16px;flex:0 0 16px;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}
.single-post .svbs-toc[open] summary::after{transform:rotate(180deg)}
.single-post .svbs-toc ul{margin:10px 0 0;padding:0;list-style:none;font-size:15px;line-height:1.5}
.single-post .svbs-toc li{margin:0 0 6px}
.single-post .svbs-toc li.svbs-toc__l3{margin-left:16px;font-size:14px}
.single-post .svbs-toc a{color:#334155;text-decoration:none}
.single-post .svbs-toc a:hover{color:#14355f}
/* chữ thân bài */
.single-post .entry-content,.single-post .entry-content p,.single-post .entry-content li,.single-post .entry-content td,.single-post .entry-content th{color:#334155;font-size:16px;line-height:1.8;font-weight:400}
.single-post .entry-content p{margin:0 0 18px}
.single-post .entry-content strong,.single-post .entry-content b{color:#0f172a;font-weight:700}
.single-post .entry-content a{color:#14355f;text-decoration:underline;text-decoration-color:rgba(20,53,95,.28);text-underline-offset:3px;border:0}
.single-post .entry-content a:hover{color:#e04a1f;text-decoration-color:currentColor}
.single-post .entry-content h1,.single-post .entry-content h2,.single-post .entry-content h3,.single-post .entry-content h4,.single-post .entry-content h5,.single-post .entry-content h6{margin:34px 0 12px;padding:0;border:0;color:#0f172a;font-weight:700;line-height:1.3;letter-spacing:-.01em;text-transform:none !important}
.single-post .entry-content h1{font-size:28px}
.single-post .entry-content h2{font-size:24px}
.single-post .entry-content h3{font-size:20px;margin-top:28px}
.single-post .entry-content h4{font-size:16px}
.single-post .entry-content h5,.single-post .entry-content h6{font-size:16px}
.single-post .entry-content > h1:first-child{display:none} /* UX Builder có bài lặp tiêu đề trong thân */
.single-post .entry-content h2[id],.single-post .entry-content h3[id]{scroll-margin-top:96px}
.single-post .entry-content ul,.single-post .entry-content ol{margin:0 0 20px;padding-left:24px}
.single-post .entry-content li{margin-bottom:8px}
.single-post .entry-content li:empty{display:none} /* có bài để <li> rỗng cuối danh sách */
.single-post .entry-content li > ul,.single-post .entry-content li > ol{margin-top:8px;margin-bottom:8px}
.single-post .entry-content img{max-width:100%;height:auto;border-radius:8px}
.single-post .entry-content figure,.single-post .entry-content .wp-caption{max-width:100%;margin:24px 0}
.single-post .entry-content figcaption,.single-post .entry-content .wp-caption-text{margin-top:8px;color:#64748b;font-size:14px;line-height:1.5;text-align:center}
.single-post .entry-content iframe{max-width:100%;border:0;border-radius:8px}
.single-post .entry-content table{width:100%;margin:22px 0;border-collapse:separate;border-spacing:0;border:1px solid #e5e9ef;border-radius:8px;overflow:hidden;background:#fff;box-shadow:none}
.single-post .entry-content th,.single-post .entry-content td{padding:10px 14px;border:0;border-bottom:1px solid #e5e9ef;text-align:left;vertical-align:top;font-size:15px;line-height:1.6}
.single-post .entry-content tr:last-child td{border-bottom:0}
.single-post .entry-content th{background:#f8fafc;color:#0f172a;font-weight:700}
.single-post .entry-content blockquote{margin:22px 0;padding:14px 18px;border-left:3px solid #14355f;border-radius:0 8px 8px 0;background:#f8fafc;color:#334155;font-style:normal}
.single-post .entry-content blockquote p:last-child{margin-bottom:0}
.single-post .entry-content hr{margin:28px 0;border:0;border-top:1px solid #e5e9ef}
.single-post .entry-content code{padding:2px 6px;border-radius:6px;background:#f1f5f9;color:#0f172a;font-size:.92em}
.single-post .entry-content pre{margin:20px 0;padding:14px 16px;border-radius:8px;background:#0f172a;color:#e2e8f0;overflow:auto}
.single-post .entry-content pre code{padding:0;background:transparent;color:inherit}
/* UX Builder row/col trong thân bài (78/83 bài) */
.single-post .entry-content .row,.single-post .entry-content .row.row-collapse,.single-post .entry-content .ux-row{max-width:100%;margin-left:0;margin-right:0}
.single-post .entry-content .row:not(.row-collapse){margin-bottom:18px}
.single-post .entry-content .col,.single-post .entry-content [class*="large-"],.single-post .entry-content [class*="medium-"],.single-post .entry-content [class*="small-"]{padding-bottom:0}
.single-post .entry-content .text,.single-post .entry-content .text-box,.single-post .entry-content .text-inner,.single-post .entry-content .img,.single-post .entry-content .img-inner{background:transparent;border:0;box-shadow:none}
.single-post .entry-content .text-box,.single-post .entry-content .box-text{color:inherit}
/* trang con */
.single-post .page-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:24px;color:#475569;font-size:15px}
.single-post .page-links > span,.single-post .page-links a > span{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;border:1px solid #d5dbe3;border-radius:8px;background:#fff;color:#0f172a}
.single-post .page-links > span:not(:first-child){color:#fff;background:#14355f;border-color:#14355f}
/* bài trước / sau */
.single-post .svbs-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:32px 0 0;padding:20px 0 0;border-top:1px solid #eef2f6}
.single-post .svbs-nav__i{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid #e8ecf1;border-radius:10px;color:#0f172a;text-decoration:none;transition:border-color .12s}
.single-post .svbs-nav__i:hover{border-color:#14355f;color:#0f172a}
.single-post .svbs-nav__i.is-empty{border:0}
.single-post .svbs-nav__i--next{text-align:right;align-items:flex-end}
.single-post .svbs-nav__lb{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#64748b}
.single-post .svbs-nav__i--prev .svbs-nav__lb::before{content:"←"}
.single-post .svbs-nav__i--next .svbs-nav__lb::after{content:"→"}
.single-post .svbs-nav__t{font-size:15px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* sidebar */
.single-post .svbs-box{margin:0 0 14px;padding:16px 18px;border:1px solid #e5e9ef;border-radius:10px;background:#fff}
.single-post .svbs-box--toc{padding:0;border:0}
.single-post .svbs-box--toc .svbs-toc{margin:0}
.single-post .svbs-box__h{display:flex;align-items:center;gap:7px;margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#64748b}
.single-post .svbs-box__h::before{content:"";width:15px;height:15px;flex:0 0 15px;background:#94a3b8}
.single-post .svbs-box__h--new::before{-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=%27M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z%27/%3E%3Cpath d=%27M14 2v4a2 2 0 0 0 2 2h4%27/%3E%3Cpath d=%27M10 9H8%27/%3E%3Cpath d=%27M16 13H8%27/%3E%3Cpath d=%27M16 17H8%27/%3E%3C/svg%3E") no-repeat center/15px 15px;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=%27M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z%27/%3E%3Cpath d=%27M14 2v4a2 2 0 0 0 2 2h4%27/%3E%3Cpath d=%27M10 9H8%27/%3E%3Cpath d=%27M16 13H8%27/%3E%3Cpath d=%27M16 17H8%27/%3E%3C/svg%3E") no-repeat center/15px 15px}
.single-post .svbs-box__h--cat::before{-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 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z%27/%3E%3C/svg%3E") no-repeat center/15px 15px;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 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z%27/%3E%3C/svg%3E") no-repeat center/15px 15px}
.single-post .svbs-box--cta{background:#fff7f2;border-color:#f6d9c8}
.single-post .svbs-box--cta .svbs-box__t{margin:0 0 4px;font-size:15px;font-weight:700;color:#0f172a}
.single-post .svbs-box--cta p{margin:0 0 12px;font-size:14px;line-height:1.5;color:#5b6b7f}
.single-post .svbs-box--cta .svbs-btn{height:38px;padding:0 16px;font-size:14px}
.single-post .svbs-list{margin:0;padding:0;list-style:none}
.single-post .svbs-list li{margin:0;padding:8px 0;border-top:1px solid #eef2f6}
.single-post .svbs-list li:first-child{border-top:0;padding-top:0}
.single-post .svbs-list li:last-child{padding-bottom:0}
.single-post .svbs-list a{display:block;font-size:15px;line-height:1.4;font-weight:600;color:#0f172a;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.single-post .svbs-list a:hover{color:#14355f}
.single-post .svbs-list time{display:block;margin-top:2px;font-size:13px;color:#94a3b8}
.single-post .svbs-chips{display:flex;flex-wrap:wrap;gap:6px}
.single-post .svbs-chip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;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,background-color .12s}
.single-post .svbs-chip i{font-style:normal;font-size:12px;color:#94a3b8}
.single-post .svbs-chip:hover{border-color:#14355f;color:#14355f}
.single-post .svbs-chip.is-on{background:#14355f;border-color:#14355f;color:#fff}
.single-post .svbs-chip.is-on i{color:rgba(255,255,255,.72)}
/* [title] của Flatsome trong thân bài (26 bài dùng): span bị ép in hoa + vạch dưới → về kiểu H2 thường */
.single-post .entry-content .section-title{margin:34px 0 12px;border:0}
.single-post .entry-content .section-title span,.single-post .entry-content .section-title .section-title-main{padding:0;font-size:24px;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:#0f172a;text-transform:none;display:block}
.single-post .entry-content .section-title span::first-letter{text-transform:uppercase} /* bản in hoa cũ che mất tiêu đề gõ chữ thường ("nhưng điểm nổi bật…") */
.single-post .entry-content .section-title b{display:none}
/* sau bài: CTA */
.single-post .svbs-after{margin:36px 0 0}
.single-post .svbs-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}
.single-post .svbs-cta__t h2{margin:0 0 4px;font-size:18px;line-height:1.3;font-weight:700;color:#0f172a;text-transform:none}
.single-post .svbs-cta__t p{margin:0;max-width:460px;font-size:15px;line-height:1.5;color:#5b6b7f}
.single-post .svbs-cta__a{display:flex;flex-wrap:wrap;gap:10px}
.single-post .svbs-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;margin:0;padding:0 18px;border:1.5px solid #14355f;border-radius:8px;font-size:14px;font-weight:700;line-height:1;text-decoration:none;transition:background-color .12s,color .12s}
.single-post .svbs-btn--solid{background:#14355f;color:#fff}
.single-post .svbs-btn--solid:hover{background:#0f2a4c;color:#fff}
.single-post .svbs-btn--line{background:#fff;color:#14355f}
.single-post .svbs-btn--line:hover{background:#14355f;color:#fff}
/* bài liên quan */
.single-post .svbs-related{margin:40px 0 0;padding-top:28px;border-top:1px solid #eef2f6}
.single-post .svbs-related__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.single-post .svbs-related__head h2{margin:0;font-size:20px;line-height:1.3;font-weight:700;color:#0f172a;text-transform:none}
.single-post .svbs-related__all{display:inline-flex;align-items:center;gap:6px;flex:none;white-space:nowrap;font-size:14px;font-weight:600;color:#64748b;text-decoration:none;transition:color .12s}
.single-post .svbs-related__all span{width:14px;height:14px;flex:0 0 14px;background:currentColor;-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=%27M5 12h14%27/%3E%3Cpath d=%27m12 5 7 7-7 7%27/%3E%3C/svg%3E") no-repeat center/14px 14px;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=%27M5 12h14%27/%3E%3Cpath d=%27m12 5 7 7-7 7%27/%3E%3C/svg%3E") no-repeat center/14px 14px}
.single-post .svbs-related__all:hover{color:#e04a1f}
/* thẻ liên quan = thẻ trang danh sách (chép từ blog-archive.css, scope .single-post) */
/* lưới thẻ */
.single-post .svb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 28px}
.single-post .svb-card{display:flex;flex-direction:column;margin:0;border:1px solid #e8ecf1;border-radius:10px;background:#fff;overflow:hidden;transition:border-color .12s}
.single-post .svb-card:hover{border-color:#cfd6df}
.single-post .svb-card__media{display:block;position:relative;aspect-ratio:16/9;background:#fff;border-bottom:1px solid #eef2f6;overflow:hidden}
.single-post .svb-card__img{display:block;width:100%;height:100%;object-fit:cover;margin:0}
.single-post .svb-card__img.is-contain{object-fit:contain;padding:10px} /* ảnh cao (tỉ lệ < 1.5): contain kẻo cắt logo */
.single-post .svb-card__noimg{display:block;width:100%;height:100%;background:linear-gradient(135deg,#eef2f7,#f8fafc)}
.single-post .svb-card__body{display:flex;flex-direction:column;flex:1;padding:14px 16px 16px}
.single-post .svb-card__meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:0 0 8px;font-size:13px;line-height:1.3;color:#64748b}
.single-post .svb-card__cat{color:#14355f;font-weight:600;text-decoration:none}
.single-post .svb-card__cat:hover{color:#e04a1f}
.single-post .svb-card__meta time{position:relative;padding-left:12px;color:#94a3b8}
.single-post .svb-card__cat + time::before{content:"";position:absolute;left:0;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#cbd5e1}
.single-post .svb-card__meta time:first-child{padding-left:0}
.single-post .svb-card__title{margin:0 0 8px;font-size:16px;line-height:1.35;font-weight:600;color:#0f172a;letter-spacing:0;text-transform:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.single-post .svb-card__title a{color:inherit;text-decoration:none}
.single-post .svb-card__title a:hover{color:#14355f}
.single-post .svb-card__excerpt{margin:0 0 12px;font-size:14px;line-height:1.55;color:#5b6b7f;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.single-post .svb-card__more{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#64748b;text-decoration:none;transition:color .12s}
.single-post .svb-card__more span{width:14px;height:14px;flex:0 0 14px;background:currentColor;-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=%27M5 12h14%27/%3E%3Cpath d=%27m12 5 7 7-7 7%27/%3E%3C/svg%3E") no-repeat center/14px 14px;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=%27M5 12h14%27/%3E%3Cpath d=%27m12 5 7 7-7 7%27/%3E%3C/svg%3E") no-repeat center/14px 14px}
.single-post .svb-card__more:hover{color:#e04a1f}
.single-post .svb-grid{margin:0;gap:20px}
/* responsive */
@media (max-width:849px){.single-post .svbs-layout{grid-template-columns:1fr;gap:28px 0}.single-post .svbs-toc-mobile{display:block;margin:22px 0 0}.single-post .svbs-box--toc{display:none}.single-post .svb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media (max-width:549px){.single-post .svbs-title{font-size:24px}.single-post .entry-content,.single-post .entry-content p,.single-post .entry-content li{font-size:16px}.single-post .svbs-nav{grid-template-columns:1fr}.single-post .svbs-nav__i--next{text-align:left;align-items:flex-start}.single-post .svbs-nav__i.is-empty{display:none}.single-post .svb-grid{grid-template-columns:1fr}.single-post .svbs-cta{padding:16px}.single-post .svbs-btn{flex:1}}

/* ===== đầu bài viết theo hệ màu mới (2026-09-07, người dùng khoanh cụm breadcrumb·H1·meta): dải nền chấm/quầng theo họ màu chuyên mục chính ===== */
.svb-ac-blue{--ac:#1d4ed8;--ac-bg:#e2eafc;--ac-soft:#f3f6fd}
.svb-ac-green{--ac:#0f7a4f;--ac-bg:#dcf3e7;--ac-soft:#f0faf5}
.svb-ac-violet{--ac:#6d28d9;--ac-bg:#ebe5fb;--ac-soft:#f6f3fd}
.svb-ac-orange{--ac:#c2410c;--ac-bg:#ffe8d9;--ac-soft:#fff6f0}
.svb-ac-teal{--ac:#0f766e;--ac-bg:#d8f1f0;--ac-soft:#eff9f8}
.svb-ac-rose{--ac:#be185d;--ac-bg:#fce4ee;--ac-soft:#fdf2f7}
.svb-ac-amber{--ac:#b45309;--ac-bg:#fdefcf;--ac-soft:#fdf8ec}
.single-post .softvn-single-main{position:relative}
.single-post .softvn-single-main > .container{position:relative;z-index:1}
.single-post .svbs-bg{position:absolute;left:0;right:0;top:0;height:340px;overflow:hidden;pointer-events:none;z-index:0;background:linear-gradient(180deg,var(--ac-soft) 0%,#fff 100%)}
.single-post .svbs-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%)}
.single-post .svbs-bg::after{content:"";position:absolute;inset:-40px;background:radial-gradient(circle at 22% 40%,var(--ac-bg) 0,transparent 30%),radial-gradient(circle at 70% 20%,#fff1e8 0,transparent 26%);filter:blur(36px);opacity:.95;animation:svbsGlow 16s ease-in-out infinite alternate}
@keyframes svbsGlow{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(2%,3%,0) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.single-post .svbs-bg::after{animation:none}}
.single-post .svbs-layout{padding-top:40px}
.single-post .svbs-head{padding:0 0 8px}
.single-post .svbs-crumb{margin:0 0 14px;gap:8px;font-size:14px}
.single-post .svbs-cat{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px 0 10px;border-radius:999px;background:var(--ac-bg);color:var(--ac) !important;font-weight:600}
.single-post .svbs-cat .svb-dot{width:7px;height:7px;border-radius:50%;background:var(--ac)}
.single-post .svbs-cat:hover{filter:brightness(.96)}
.single-post .svbs-title{font-size:36px;line-height:1.2;letter-spacing:-.02em}
.single-post .svbs-meta{margin-top:14px;font-size:14px}
.single-post .svbs-meta > *{gap:6px}
.single-post .svbs-meta svg{width:15px;height:15px;color:#94a3b8}
@media (max-width:849px){.single-post .svbs-bg{height:260px}.single-post .svbs-layout{padding-top:26px}.single-post .svbs-title{font-size:28px}}
@media (max-width:549px){.single-post .svbs-title{font-size:24px}}


/* ===== 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: 12px;
  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;
  }
}

/* ===== 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;
}