/* ===== 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-homepage-css ===== */
/* =========================================================
   HOMEPAGE - SECTION TITLES
   Source of truth for homepage section title + category grid
   ========================================================= */

/* Custom title dùng trong UX Builder:
   <div class="home-section-title">
     <span class="home-section-title__icon">★</span>
     <span class="home-section-title__text">Danh mục hot | Bản quyền phần mềm</span>
   </div>
*/

.home-section-title{
  width:100%;
  min-height:54px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 18px;
  margin:0 0 14px 0;
  box-sizing:border-box;
  background:linear-gradient(90deg,#f1592b 0%, #ff7a45 100%);
  border-radius:14px;
  color:#fff;
  font-size:16px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:.2px;
  position:relative;
  overflow:hidden;
  box-shadow:0 10px 22px rgba(241,89,43,.18);
}

.home-section-title:before{
  content:"";
  position:absolute;
  top:0;
  left:-34px;
  width:110px;
  height:100%;
  background:rgba(255,255,255,.10);
  transform:skewX(-25deg);
}

.home-section-title__icon{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  font-size:12px;
  line-height:1;
  color:#fff;
  opacity:.95;
  flex:0 0 auto;
}

.home-section-title__text{
  position:relative;
  z-index:1;
  display:block;
  color:#fff;
  text-transform:uppercase;
}

/* =========================================================
   HOMEPAGE - CATEGORY GRID
   ========================================================= */

.home .row{
  border:0 !important;
}

.home .row .col{
  padding-bottom:16px !important;
}

.home .row .col:before,
.home .row .col:after{
  display:none !important;
}

.box-category{
  position:relative;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  overflow:visible !important;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background-color .22s ease;
}

.box-category:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78);
}

.box-category:hover{
  transform:translateY(-4px);
  border-color:rgba(241,89,43,.28);
  box-shadow:0 16px 36px rgba(15,23,42,.12);
  background:#ffffff;
}

.box-category a{
  display:block;
  width:100%;
  height:100%;
}

.box-category .box-text-inner{
  border:none !important;
  background:transparent !important;
  padding:20px 12px 22px !important;
}

.box-category .box-image,
.box-category .box-image-inner,
.box-category .image-cover,
.box-category .box-image img{
  overflow:visible !important;
}

.box-category .box-image{
  height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:12px !important;
  padding-bottom:6px !important;
}

.box-category img{
  display:block !important;
  width:auto !important;
  max-width:62px !important;
  max-height:62px !important;
  margin:0 auto 12px !important;
  transform-origin:center center !important;
  transition:transform .22s ease;
  image-rendering:auto;
}

.box-category:hover img{
  transform:scale(1.04) !important;
}

.box-category .box-text{
  font-size:14px;
  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 */
  letter-spacing:.15px;
  color:#1f2937;
  text-transform:uppercase;
  line-height:1.35;
}

.box-category:hover .box-text{
  color:#111827;
}

.product-categories .col-inner{
  padding:6px;
}

/* =========================================================
   HOMEPAGE - RESPONSIVE
   ========================================================= */

@media (max-width: 849px){
  .home-section-title{
    min-height:48px;
    padding:0 14px;
    margin-bottom:12px;
    font-size:14px;
    border-radius:12px;
  }

  .home-section-title__icon{
    width:16px;
    height:16px;
    font-size:11px;
  }

  .home .row .col{
    padding-bottom:14px !important;
  }

  .box-category{
    border-radius:14px;
  }

  .box-category .box-image{
    height:84px;
    padding-top:10px !important;
  }

  .box-category .box-text-inner{
    padding:16px 10px 18px !important;
  }

  .box-category img{
    max-width:54px !important;
    max-height:54px !important;
    margin-bottom:10px !important;
  }

  .box-category .box-text{
    font-size:13px;
  }
}

@media (max-width: 549px){
  .home-section-title{
    min-height:46px;
    padding:0 12px;
    gap:8px;
    font-size:13px;
  }

  .home .row .col{
    padding-bottom:12px !important;
  }

  .box-category{
    border-radius:12px;
  }

  .box-category .box-image{
    height:76px;
    padding-top:8px !important;
  }

  .box-category .box-text-inner{
    padding:14px 8px 16px !important;
  }

  .box-category img{
    max-width:48px !important;
    max-height:48px !important;
  }

  .box-category .box-text{
    font-size:12px;
    letter-spacing:.1px;
  }
}


/* =========================================================
   HOMEPAGE CATEGORY ICON - PUSH DOWN FINAL
   ========================================================= */

.box-category .box-image{
  padding-top: 28px !important;
  padding-bottom: 8px !important;
}

.box-category .box-image img,
.box-category img{
  display: block !important;
  margin: 0 auto !important;
  max-width: 62px !important;
  max-height: 62px !important;
}

.box-category:hover .box-image img,
.box-category:hover img{
  transform: scale(1.05) !important;
}

@media (max-width: 849px){
  .box-category .box-image{
    padding-top: 22px !important;
    padding-bottom: 6px !important;
  }

  .box-category .box-image img,
  .box-category img{
    max-width: 54px !important;
    max-height: 54px !important;
  }
}

@media (max-width: 549px){
  .box-category .box-image{
    padding-top: 18px !important;
    padding-bottom: 6px !important;
  }

  .box-category .box-image img,
  .box-category img{
    max-width: 48px !important;
    max-height: 48px !important;
  }
}

/* =========================================================
   HOMEPAGE SECTION TITLE - FINAL CLEAN BAR UPPERCASE
   ========================================================= */

.home-section-title{
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 0 0 0 16px;
  margin: 0 0 18px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.home-section-title:before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 15px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f1592b 0%, #ff7a45 100%);
}

.home-section-title:after{
  content: "";
  flex: 1 1 auto;
  height: 1px;
  margin-left: 14px;
  background: linear-gradient(90deg, rgba(15,23,42,.12), rgba(15,23,42,.03));
}

.home-section-title__icon{
  display: none !important;
}

.home-section-title__text{
  display: block;
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 849px){
  .home-section-title{
    min-height: 32px;
    padding-left: 14px;
    margin-bottom: 16px;
    font-size: 14px;
  }

  .home-section-title:before{
    height: 13px;
  }

  .home-section-title:after{
    margin-left: 12px;
  }

  .home-section-title__text{
    font-size: 14px;
  }
}

@media (max-width: 549px){
  .home-section-title{
    min-height: 30px;
    padding-left: 12px;
    margin-bottom: 14px;
    font-size: 13px;
    letter-spacing: 0.03em;
  }

  .home-section-title:before{
    height: 12px;
  }

  .home-section-title:after{
    margin-left: 10px;
  }

  .home-section-title__text{
    font-size: 13px;
    letter-spacing: 0.03em;
  }
}




/* =========================================================
   HOMEPAGE - BOTTOM BANNER (block 4978, row .homeborder41)
   2026-09-04: các ô dùng height="180px" nên Flatsome bọc .image-cover
   (object-fit: cover) và cắt mép trên/dưới — góc bo ~4px vẽ sẵn trong
   PNG (quy ước bộ banner 2021) bị cắt mất, ô thành vuông. Bo bằng CSS
   trên khung .img-inner để không phụ thuộc file ảnh và không phụ thuộc
   việc ảnh có bị cắt hay không. .homeborder41 vốn là class chết từ 2021,
   nằm trên row này VÀ trên Banner 1 (block 5050, dưới hero). Ảnh của
   Banner 1 đã bo sẵn 4px trong PNG và không bị cắt nên rule này trùng
   khớp, không đổi gì ở đó. Không dùng .homeborder41 cho việc khác.
   ========================================================= */
.homeborder41 .img-inner{
  border-radius:4px;
  overflow:hidden;
}

/* Dải đáy sát footer. Thuộc tính padding="" của [col] trong UX Builder chỉ áp
   vào .col-inner; .col ngoài vẫn giữ padding-bottom mặc định 16px của Flatsome,
   tạo dải trắng giữa banner và footer. Builder không có ô chỉnh cái này.
   Chỉ nhắm row có large-columns-5 (dải đáy) — KHÔNG động Banner 1, ở đó 16px
   là khoảng cách với tiêu đề mục kế tiếp.
   Phải có !important và tiền tố .home: chính file này có rule
   `.home .row .col{padding-bottom:16px !important}` (0,3,0) — đó mới là nguồn
   16px, không phải Flatsome. Rule dưới (0,4,0) + !important mới thắng được. */
.home .homeborder41.large-columns-5>.col{
  padding-bottom:0 !important;
}

/* 2026-09-05 — hero sinh bởi softvn-banner-gen (row class svnbg-hero): theme cho .img margin-bottom 16px làm khe dọc
   giữa 2 ô phải thành 20px; triệt ở đây, khe 4px do margin trên .img-inner (thuộc tính margin của ux_image) đảm nhiệm. */
.svnbg-hero .col .col-inner > .img{margin-bottom:0} /* độ ưu tiên phải hơn .col-inner > .img:not(:last-child) của Flatsome */
/* bo góc bằng CSS cho cả 4 ô: radius nướng trong ảnh tỉ lệ theo chiều rộng nên ô giữa ~7px còn ô phải ~3px, lệch nhau; 8px như hero cũ (.homepage-banner img) */
.svnbg-hero .img-inner{border-radius:8px;overflow:hidden}

/* =========================================================
   2026-09-06 — TIÊU ĐỀ MỤC kiểu eyebrow + Ô DANH MỤC hướng 1
   Lưu ý: Customizer "Additional CSS" (25 KB) vẫn có khối "HOME SECTION HEAD – FINAL CLEAN" (vạch cam 3px + kẻ ngang,
   font-size 17px !important) nạp SAU file này → mọi luật dưới đây phải cụ thể hơn (.home …) và giữ !important ở chỗ trùng.
   Markup mới (một dòng để wpautop không chèn <p>/<br>):
   <div class="home-section-head"><div class="home-section-title"><span class="home-section-title__eyebrow">…</span>
   <span class="home-section-title__text">…</span></div><a class="softvn-section-more" href="…">Xem tất cả <span>→</span></a></div>
   ========================================================= */
.home .home-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 14px !important;padding:0}
.home .home-section-title{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:0;padding:0;margin:0 !important;background:none;border-radius:0;box-shadow:none;color:#0f172a;overflow:visible}
.home .home-section-title:before,.home .home-section-title::after{display:none !important;content:none}
.home .home-section-title__eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#f1592a;line-height:1}
.home .home-section-title__text{display:block;font-size:20px !important;font-weight:700;line-height:1.25 !important;letter-spacing:-.01em;color:#0f172a;text-transform:none}
.home .softvn-section-more{align-self:flex-end;display:inline-flex;align-items:center;gap:6px;color:#14355f;font-size:13px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;padding:0 0 3px !important;border:0 !important;background:transparent !important}
.home .softvn-section-more:hover{color:#f1592a;transform:translateX(2px)}

/* ô danh mục: khe 8px, bo 8px như hero; icon trong ô tô cam nhạt; nhãn chữ thường; số sản phẩm mờ bên dưới */
.home .home-cats .col{padding:0 4px 8px !important}
.home .home-cats .col-inner{padding:0}
.home .home-cats .box-category{border:1px solid #e5e9ef;border-radius:8px;box-shadow:none;background:#fff}
.home .home-cats .box-category:before{display:none}
.home .home-cats .box-category:hover{transform:translateY(-2px);border-color:#f7b58f;box-shadow:0 6px 16px rgba(15,23,42,.06)}
.home .home-cats .box-category .box-image{width:56px !important;height:56px;margin:16px auto 0;padding:0 !important;border-radius:14px;background:#fff4ee;display:flex;align-items:center;justify-content:center}
.home .home-cats .box-category .box-image .image-grayscale{filter:none}
.home .home-cats .box-category img{max-width:30px !important;max-height:30px !important;margin:0 !important;filter:none !important;opacity:1 !important}
.home .home-cats .box-category:hover img{transform:scale(1.06) !important}
.home .home-cats .box-category .box-text-inner{padding:10px 8px 14px !important}
.home .home-cats .box-category .box-text{text-transform:none;font-size:14px;font-weight:600;letter-spacing:0;color:#1f2937}
.home .home-cats .box-category .header-title{margin:0;text-transform:none;font-size:14px;font-weight:600}
.home .home-cats .box-category .count{margin:3px 0 0;font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;color:#94a3b8}
.home .home-cats .box-category .count:empty{display:none}
/* hàng masonry của Flatsome (row-small) có margin âm 7,5px hai bên; cột giờ đệm 4px → thẻ ngoài cùng lấn 3,5px khỏi container: bù lại */
.home .row.home-cats{margin-left:-4px !important;margin-right:-4px !important;max-width:calc(100% + 8px)}
/* .box-text mặc định đệm dưới 1.4em làm thẻ cao thừa ~20px */
.home .home-cats .box-category .box-text{padding:0 !important}
/* tiêu đề mục cách khối phía trên 24px (trước chỉ 10px từ [gap]) — nhịp thở giữa hero và lưới */
.home .home-section-head{margin-top:24px !important}
/* 2026-09-06 (chốt): giữ lưới 6×2, mỗi ô CAO và THOÁNG hơn — icon 64px, đệm 24/20, khe 12px. Bento và thẻ-logo đã đề xuất, không chọn. */
.home .home-cats .col{padding:0 6px 12px !important}
.home .row.home-cats{margin-left:-6px !important;margin-right:-6px !important;max-width:calc(100% + 12px)}
.home .home-cats .box-category .box-image{width:64px !important;height:64px;margin:24px auto 0;border-radius:16px}
.home .home-cats .box-category img{max-width:34px !important;max-height:34px !important}
.home .home-cats .box-category .box-text-inner{padding:14px 10px 22px !important}
.home .home-cats .box-category .header-title{font-size:15px}
.home .home-cats .box-category .count{margin-top:5px;font-size:12px}
/* ô không có số sản phẩm (Phần cứng < 5) bị thấp hơn hàng → khoá chiều cao tối thiểu bằng ô đủ hai dòng */
.home .home-cats .box-category{min-height:165px}
/* 2026-09-06 (lần 2, "cao và thoáng hơn nữa"): ô 200px, icon 72px trong ô 72, đệm 32/30, khe 16px */
.home .home-cats .col{padding:0 8px 16px !important}
.home .row.home-cats{margin-left:-8px !important;margin-right:-8px !important;max-width:calc(100% + 16px)}
.home .home-cats .box-category{min-height:200px}
.home .home-cats .box-category .box-image{width:72px !important;height:72px;margin:32px auto 0;border-radius:18px}
.home .home-cats .box-category img{max-width:38px !important;max-height:38px !important}
.home .home-cats .box-category .box-text-inner{padding:18px 12px 30px !important}
.home .home-cats .box-category .count{margin-top:6px}
/* 2026-09-06 ("mờ nhạt"): tăng tương phản — cả khối đặt trên dải nền xám nhạt bo 12px để thẻ trắng nổi; viền thẻ đậm hơn,
   bóng mỏng; ô icon tô cam rõ hơn + icon PNG (bộ 2020, nét xám nhạt) tăng contrast; số sản phẩm đậm hơn */
/* (bỏ dải nền xám bao ngoài — người dùng không muốn kiểu đặt trong hộp; giữ các tăng tương phản ở thẻ) */
.home .home-cats .box-category{border-color:#d9dfe7;box-shadow:0 1px 3px rgba(15,23,42,.05)}
.home .home-cats .box-category:hover{border-color:#f1592a;box-shadow:0 8px 20px rgba(15,23,42,.10)}
.home .home-cats .box-category .box-image{background:#ffe6d9}
.home .home-cats .box-category img{filter:contrast(1.25) saturate(1.3) !important}
.home .home-cats .box-category .header-title{color:#0f172a}
.home .home-cats .box-category .count{color:#64748b}

/* 2026-09-06 — tiêu đề mục kiểu 2: dòng số liệu sống dưới tiêu đề ([softvn_section_meta], plugin svn-ux-elements)
   + "Xem tất cả" thành nút viền cùng hệ với nút Nhận báo giá trên header */
.home .home-section-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin:6px 0 0;font-size:12px;font-weight:400;color:#64748b;line-height:1.3}
.home .home-section-meta b{font-weight:700;color:#0f172a}
.home .home-section-meta span+span{position:relative;padding-left:16px}
.home .home-section-meta span+span::before{content:"";position:absolute;left:0;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#cbd5e1}
.home .softvn-section-more{height:36px;padding:0 14px !important;border:1px solid #cfd6df !important;border-radius:8px;background:#fff !important;color:#14355f;font-size:13px;font-weight:600;align-self:flex-end;transition:border-color .15s ease,color .15s ease,transform .15s ease}
.home .softvn-section-more:hover{border-color:#f1592a !important;color:#e04a1f;transform:none}
.home .softvn-section-more span{font-size:14px}
/* dòng số liệu bị thừa hưởng uppercase từ bộ tiêu đề cũ (Additional CSS) → chữ thường */
.home .home-section-meta,.home .home-section-meta span{text-transform:none !important;letter-spacing:0}
/* 2026-09-07 người dùng chọn phương án 2 (preview-tieu-de-muc.html): TIÊU ĐỀ trước, eyebrow thành nhãn nhỏ cam nhạt đứng sau tiêu đề, dòng câu chữ xuống dưới. Áp cho cả 8 mục. */
.home .home-section-title{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 10px}
.home .home-section-title__text{order:1;display:inline-block}
.home .home-section-title__eyebrow{order:2;display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;background:#fff1e8;color:#c2410c;font-size:11px;font-weight:600;letter-spacing:.06em;line-height:1;text-transform:uppercase}
.home .home-section-title > :not(.home-section-title__eyebrow):not(.home-section-title__text):not(.home-section-title__ic){order:3;flex:0 0 100%;width:100%} /* :not(__ic) thêm sau: luật này từng ép ô icon width:100% → co còn 22px */
/* 2026-09-07 người dùng đổi sang phương án 1 nhưng BỎ dòng tiêu đề dài: ô icon pastel 44px · nhãn mục (eyebrow) thành tiêu đề · dòng câu chữ dưới. Tiêu đề dài giữ trong DOM nhưng ẩn (sr-only) cho SEO. */
.home .home-section-head{align-items:center}
.home .home-section-title{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic eb" "ic meta";column-gap:14px;row-gap:5px;align-items:center}
.home .home-section-title__ic{grid-area:ic;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:#f1f5f9;color:#14355f}
.home .home-section-title__ic svg{width:22px;height:22px}
.home .home-section-title__ic--blue{background:#e2eafc;color:#1d4ed8}.home .home-section-title__ic--green{background:#dcf3e7;color:#0f7a4f}.home .home-section-title__ic--violet{background:#ebe5fb;color:#6d28d9}
.home .home-section-title__ic--orange{background:#ffe8d9;color:#c2410c}.home .home-section-title__ic--teal{background:#d8f1f0;color:#0f766e}.home .home-section-title__ic--rose{background:#fce4ee;color:#be185d}
.home .home-section-title__eyebrow{grid-area:eb;order:0;display:block;height:auto;padding:0;border-radius:0;background:none;align-self:end;font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.2;text-transform:none;color:#0f172a}
.home .home-section-title__text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.home .home-section-title > :not(.home-section-title__eyebrow):not(.home-section-title__text):not(.home-section-title__ic){grid-area:meta;order:0;flex:none;width:auto;align-self:start}
.home .home-section-title__ic{width:44px !important;height:44px !important;flex:none}
/* 2026-09-07 tối ưu tải: các hàng mục từ mục thứ 2 trở đi (60 thẻ SP, DOM 4.271 node) chỉ dựng khi cuộn tới. Không đổi giao diện. */
.home #content > .row:has(.home-section-head) ~ .row:has(.home-section-head){content-visibility:auto;contain-intrinsic-size:auto 720px}

/* ==========================================================================
 * 2026-09-08 — CẤU TRÚC TIÊU ĐỀ TRANG CHỦ (không đổi một pixel nào).
 * Trước: trang chủ KHÔNG có H1; 8 nhãn mục là <span>; 12 ô danh mục là H5 (nhảy cấp).
 * Sau:   H1 ẩn · 8 nhãn mục thành <h2> · ô danh mục thành <h3> (lọc shortcode trong functions.php).
 * Phải trung hoà HAI thứ, nếu không giao diện sẽ đổi:
 *  (a) Flatsome `h1,h2,h3,h4,h5,h6{color:#555;margin-bottom:.5em}` → đè margin + color;
 *  (b) Additional CSS có `.home .softvn-home-prod-row h2{font-size:22px!important;letter-spacing:-.02em!important;
 *      line-height:1.2!important;font-weight:700!important;color:#0f172a!important}` và **7/8 khối tiêu đề nằm TRONG
 *      các row đó** → nhãn mục sẽ nhảy 17px → 22px. Luật dưới dùng 3 class (0,3,0) để thắng (0,2,1), và vì bên kia
 *      có !important nên bên này cũng phải !important.
 * Ô danh mục KHÔNG cần luật mới: chúng nằm trong `.box-text`, mà Flatsome đặt
 * `.box-text h1..h6{line-height:1.3;margin-bottom:.1em}` chung cho MỌI cấp, còn font-size/margin/color đã bị
 * `.home .home-cats .box-category .header-title` (0,4,0) khoá sẵn → h3 và h5 render y hệt (đã đo).
 * ======================================================================== */
.home .home-section-head .home-section-title__eyebrow{
  margin:0 !important;
  font-size:16px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  letter-spacing:-.01em !important;
  color:#0f172a !important;
}
/* H1 ẩn cho SEO/trợ năng — cùng cách đã dùng ở trang Liên hệ (.svc-sr) và pages.css (.svpg-sr) */
.home .home-sr-h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}


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

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