/* ===== softvn-fonts ===== */
/* ---------------------------------------------------------------------------
   Be Vietnam Pro — tự host, chỉ latin + vietnamese (bỏ latin-ext). 2026-09-08.
   Đo trước khi đổi (cỡ 100px): x-height 53 / chữ hoa 74 — cao hơn Segoe UI (50/70)
   khoảng 6%, xấp xỉ Arial (52/72). Vì vậy thang cỡ chữ được trả về mức TRƯỚC cú nâng
   một bậc ngày 2026-09-08 (cú nâng đó sinh ra để bù cho Segoe UI thấp).

   THỨ TỰ @font-face CÓ Ý NGHĨA — đừng sắp lại:
   trình duyệt chọn giữa các face có unicode-range chồng nhau theo thứ tự NGƯỢC,
   nên `vietnamese` phải khai báo SAU `latin` của cùng weight. Đặt ngược lại thì
   ă/ơ/ư/ỹ/₫ kéo file latin về một cách vô ích (bài học từ đợt dùng Inter).
   --------------------------------------------------------------------------- */
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;
  src:url("https://softvn.vn/wp-content/themes/flatsome-child/assets/css/../fonts/bvp/bvp-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;
  src:url("https://softvn.vn/wp-content/themes/flatsome-child/assets/css/../fonts/bvp/bvp-400-vietnamese.woff2") format("woff2");
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;
  src:url("https://softvn.vn/wp-content/themes/flatsome-child/assets/css/../fonts/bvp/bvp-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;
  src:url("https://softvn.vn/wp-content/themes/flatsome-child/assets/css/../fonts/bvp/bvp-500-vietnamese.woff2") format("woff2");
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;
  src:url("https://softvn.vn/wp-content/themes/flatsome-child/assets/css/../fonts/bvp/bvp-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;
  src:url("https://softvn.vn/wp-content/themes/flatsome-child/assets/css/../fonts/bvp/bvp-600-vietnamese.woff2") format("woff2");
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;
  src:url("https://softvn.vn/wp-content/themes/flatsome-child/assets/css/../fonts/bvp/bvp-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;
  src:url("https://softvn.vn/wp-content/themes/flatsome-child/assets/css/../fonts/bvp/bvp-700-vietnamese.woff2") format("woff2");
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}

/* `html body` để thắng luật `body{font-family:Arial}` của Customizer mà KHÔNG dùng
   !important — !important ở đây sẽ đè luôn cả font icon (fl-icons, dashicons). */
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: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Popup báo giá của plugin dùng chung (softvn-admin-toolkit) tự đặt system-ui.
   Kiểm popup.css: chỉ dòng 18 có !important và chỉ áp cho ::after; `.wpatpro` và
   `.wpatpro__title` là khai báo thường nên đè được bằng specificity, KHÔNG cần sửa plugin. */
.wpat-popup, .wpat-popup .wpatpro, .wpat-popup .wpatpro__title,
.wpat-popup input, .wpat-popup select, .wpat-popup textarea, .wpat-popup button {
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.wpat-popup *::after { font-family: inherit !important; }


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

/* ---------------------------------------------------------------------------
   2026-09-08 — KHỐI "GỬI BÁO GIÁ" (.gbg01-svn + form --quote) kéo về tokens của site.
   Người dùng khoanh khối này cuối mô tả sản phẩm. Đo được nó lệch hẳn: bo góc 22/15/0px
   (site dùng 8–10), nền radial-gradient + bóng 0 14px 34px (site phẳng), nút xanh #1D4ED8
   (không có ở đâu khác trên site), ô nhập 15,52px — giá trị LỆCH THANG duy nhất còn sót.
   Phần lớn kiểu dáng cũ KHÔNG đến từ CSS của theme mà từ **33 thẻ <style> nhúng trong nội
   dung mô tả sản phẩm** → phải dùng !important mới thắng, vì chúng nằm sau base.css trong DOM.
   Khối này có trong 1.503 sản phẩm + 12 bài viết; sửa bằng CSS nên KHÔNG đụng nội dung nào.
   Gỡ bỏ = xoá nguyên khối này.
   --------------------------------------------------------------------------- */
.woocommerce-Tabs-panel .gbg01-svn,
.single-post .entry-content .gbg01-svn{
  background:#fff !important;border:1px solid #e5e9ef !important;border-radius:10px !important;
  box-shadow:none !important;padding:28px 22px 20px !important;font-size:14px !important;
}
.woocommerce-Tabs-panel .gbg01-svn .tieu-de,
.single-post .entry-content .gbg01-svn .tieu-de{
  background:#fff1e8 !important;color:#b43e0e !important;border:0 !important;
  border-radius:8px !important;box-shadow:none !important;font-size:12px !important;font-weight:700 !important;
}
.woocommerce-Tabs-panel .gbg01-svn ul li,
.single-post .entry-content .gbg01-svn ul li{color:#334155 !important;font-size:14px !important;line-height:1.6 !important}

/* form báo giá trong tab mô tả — KHÔNG đụng form trang Liên hệ (template --contact)
   và popup (.wpatpro__form), hai chỗ đó đã có kiểu riêng đã chốt. */
.woocommerce-Tabs-panel form.wpat-form-template--quote input:not([type=hidden]),
.woocommerce-Tabs-panel form.wpat-form-template--quote textarea,
.woocommerce-Tabs-panel form.wpat-form-template--quote select{
  font-size:14px !important;height:40px !important;border-radius:8px !important;
  border:1px solid #cfd6df !important;background:#fff !important;box-shadow:none !important;
}
.woocommerce-Tabs-panel form.wpat-form-template--quote textarea{height:auto !important}
.woocommerce-Tabs-panel form.wpat-form-template--quote .wpat-submit{
  height:44px !important;border-radius:8px !important;font-size:14px !important;font-weight:700 !important;
  background:#14355f !important;border:1px solid #14355f !important;color:#fff !important;box-shadow:none !important;
}
.woocommerce-Tabs-panel form.wpat-form-template--quote .wpat-submit:hover{
  background:#0f2747 !important;border-color:#0f2747 !important;
}
/* Hai thẻ đều có dải gradient 4px trên đầu (`::before`) và chấm gradient — di sản của bản
   thiết kế cũ. Site hiện tại phẳng, không dùng dải màu đầu thẻ. Thẻ PHẢI chính là thẻ <form>. */
.woocommerce-Tabs-panel .gbg01-svn::before,
.single-post .entry-content .gbg01-svn::before,
.woocommerce-Tabs-panel form.wpat-form-template--quote::before{display:none !important}

.woocommerce-Tabs-panel form.wpat-form-template--quote{
  background:#fff !important;border:1px solid #e5e9ef !important;border-radius:10px !important;
  box-shadow:none !important;
}
/* Nhãn tiêu đề thẻ trái vốn là "notch" nằm đè lên viền nét đứt (position:absolute; top:-16px).
   Viền nét đứt đã bỏ nên cho nó về dòng bình thường bên trong thẻ. */
.woocommerce-Tabs-panel .gbg01-svn .tieu-de,
.single-post .entry-content .gbg01-svn .tieu-de{
  position:static !important;display:inline-flex !important;align-items:center !important;gap:7px !important;
  margin:0 0 14px !important;padding:5px 10px !important;
}
/* chấm gradient xanh cạnh tiêu đề thẻ phải → navy đặc cho khớp bảng màu */
.woocommerce-Tabs-panel .wpat-form-intro__dot{background:#14355f !important;background-image:none !important}
/* chấm gạch đầu dòng thẻ trái: bỏ gradient, dùng cam đặc của site */
.woocommerce-Tabs-panel .gbg01-svn ul li::before,
.single-post .entry-content .gbg01-svn ul li::before{
  background:#e04a1f !important;background-image:none !important;width:6px !important;height:6px !important;top:9px !important;
}

/* ---------------------------------------------------------------------------
   2026-09-08 — BẢNG GIÁ ELFSIGHT (`.eapps-pricing-table-*`) kéo về bảng màu và font của site.
   Dùng trong **956 sản phẩm publish** với nhiều bảng khác nhau. Widget render THẲNG vào DOM
   (không iframe, không shadow DOM — đã kiểm) nên CSS của site với tới được.
   Trước: font riêng `-apple-system, BlinkMacSystemFont, Roboto…`, giá và nút xanh
   `rgb(23,76,162)` / `rgb(22,76,164)` — màu không có ở đâu khác trên site.
   --------------------------------------------------------------------------- */
[class*="eapps-pricing-table"]{font-family:inherit !important}
.eapps-pricing-table-column-price-text,
.eapps-pricing-table-column-price-value,
.eapps-pricing-table-column-price-currency,
.eapps-pricing-table-column-price-wrapper,
.eapps-pricing-table-column-price-fix-postfix-value{color:#14355f !important}
.eapps-pricing-table-column-title-text{color:#1e293b !important}
.eapps-pricing-table-column-button{
  border-color:#14355f !important;color:#14355f !important;border-radius:8px !important;
}
/* cột nổi bật: nút nền đặc */
.eapps-pricing-table-column-featured .eapps-pricing-table-column-button,
.eapps-pricing-table-column-button-filled{
  background-color:#14355f !important;border-color:#14355f !important;color:#fff !important;
}
.eapps-pricing-table-column{border-color:#e5e9ef !important}
/* Viền quanh mỗi cột KHÔNG phải border mà là `box-shadow: rgb(22,76,164) 0 0 0 1px` trên
   `.eapps-pricing-table-column-<số>`. Nhắm theo chữ số vì các phần tử con đều có hậu tố bằng
   CHỮ (-inner, -title, -price…) nên không dính. */
[class*="eapps-pricing-table-column-1"],[class*="eapps-pricing-table-column-2"],
[class*="eapps-pricing-table-column-3"],[class*="eapps-pricing-table-column-4"],
[class*="eapps-pricing-table-column-5"],[class*="eapps-pricing-table-column-6"],
[class*="eapps-pricing-table-column-7"],[class*="eapps-pricing-table-column-8"],
[class*="eapps-pricing-table-column-9"]{box-shadow:0 0 0 1px #e5e9ef !important}
.eapps-pricing-table-column-ribbon{background-color:#14355f !important}


/* ===== 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-woo-css ===== */
/* WooCommerce and product page styles */
.price-lhbgtn {
  background: none;
  color: red;
  font-size: 12px;
  font-weight: 400;
  display: table;
  padding: 0;
  margin: 0;
}

.devvn_single_price {
  background-color: #fff;
  border: 1px dashed #1e73be;
  padding: 10px;
  max-width: 100%;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  margin: 0 0 10px;
  color: #777;
}

.devvn_single_price span.label {
  color: #777;
  font-weight: 600;
  font-size: 13px;
  padding: 0;
  margin: 0;
  float: left;
  width: 125px;
  text-align: left;
  line-height: 18px;
}

.devvn_single_price span.devvn_price .amount {
  font-size: 14px;
  font-weight: 600;
  color: red;
}

.devvn_single_price span.devvn_price del .amount,
.devvn_single_price span.devvn_price del {
  font-size: 14px;
  color: #777;
  font-weight: 600;
}

.related.products {
  display: none;
}

.woocommerce-result-count,
.woocommerce-ordering {
  display: none;
}

span.devvn_woocommerce_price_prefix {
  font-size: 0.8em;
  margin: 0 5px 0 0;
  color: blue;
  font-weight: 700;
}

span.devvn_woocommerce_price_suffix {
  font-size: 0.8em;
  margin: 0 0 0 10px;
}

.woocommerce .price > .amount {
  color: red;
}

span.woocommerce-Price-amount.amount {
  color: red;
}

.product_meta > span {
  display: table;
  border: 1px solid #1c72aa;
  border-radius: 5px;
  margin: 0 0 5px;
  padding: 5px 10px;
}

.review-form-inner {
  border-color: #1c72aa;
  border-radius: 5px;
  border-style: dotted;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::before {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after {
  background-color: #1c72aa !important;
}

/* =========================================================
   SOFTVN PRODUCT PAGE - SHORT DESCRIPTION
   Nhiệm vụ:
   - Style khung mô tả ngắn dưới icon sản phẩm
   - Dùng circle-check nhỏ đồng bộ với sidebar
   - Giữ box full width nhưng kéo nội dung gần lề trái hơn
   - Tối ưu thêm độ rõ icon, spacing với CTA và tone border
========================================================= */

.product-short-description{
  position:relative;
  display:block !important;
  width:100%;
  box-sizing:border-box;
  margin:8px 0 22px;
  padding:18px 18px 16px 12px;
  background:#ffffff;
  border:1px solid #d3dbe6;
  border-top:2px solid #c5d0dd;
  border-radius:12px !important;
  box-shadow:none;
  font-size:14px;
  line-height:1.65;
  color:#334155;
  overflow:hidden;
}

/* Notch góc trên phải, nhỏ bằng ngôn ngữ 2 nút phụ */
.product-short-description::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:10px;
  height:10px;
  background:#f6f9fc;
  border-left:1px solid #c5d0dd;
  border-bottom:1px solid #c5d0dd;
  border-bottom-left-radius:6px;
  box-sizing:border-box;
  z-index:1;
}

/* Reset margin cho paragraph nếu có */
.product-short-description p{
  margin:0 0 10px;
}

.product-short-description p:last-child{
  margin-bottom:0;
}

/* Bỏ bullet mặc định để thay bằng icon circle-check custom */
.product-short-description ul{
  margin:0;
  padding:0;
  list-style:none;
  position:relative;
  z-index:2;
}

/* Kéo text gần lề trái hơn nữa */
.product-short-description li{
  position:relative;
  margin:0 0 8px;
  padding-left:20px;
  color:#334155;
}

.product-short-description li:last-child{
  margin-bottom:0;
}

/* Icon circle-check nhỏ, màu cùng màu text nhưng rõ hơn nhẹ */
.product-short-description li::before{
  content:"";
  position:absolute;
  left:0;
  top:.20em;
  width:14px;
  height:14px;
  background-color:currentColor;
  opacity:.9;

  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;

  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><circle cx='12' cy='12' r='8.25' stroke='black' stroke-width='2'/><path d='M8.5 12.2l2.2 2.2 4.8-5' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><circle cx='12' cy='12' r='8.25' stroke='black' stroke-width='2'/><path d='M8.5 12.2l2.2 2.2 4.8-5' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>\");
}

/* Responsive cho tablet/mobile */
@media (max-width: 849px){
  .product-short-description{
    margin:6px 0 18px;
    padding:14px 14px 13px 12px;
    font-size:13px;
    line-height:1.62;
    border-radius:10px !important;
  }

  .product-short-description::before{
    width:10px;
    height:10px;
    border-bottom-left-radius:6px;
  }

  .product-short-description li{
    padding-left:19px;
    margin-bottom:8px;
  }

  .product-short-description li::before{
    width:13px;
    height:13px;
  }
}

.tags,
.tag1s,
.bags {
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.tags li,
.tag1s li,
.bags li {
  float: left;
}

.tag {
  background: red;
  font-size: 12px;
  border-radius: 3px 0 0 3px;
  color: #fff;
  display: inline-block;
  height: 26px;
  line-height: 26px;
  padding: 0 20px 0 23px;
  position: relative;
  margin: 0 10px 0 0;
  text-decoration: none;
  -webkit-transition: color 0.2s;
}

.tag::before {
  background: #fff;
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
  content: '';
  height: 6px;
  left: 10px;
  position: absolute;
  width: 6px;
  top: 10px;
}

.tag::after {
  background-color: transparent;
  border-bottom: 13px solid transparent;
  border-left: 10px solid red;
  border-top: 13px solid transparent;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
}

.tag:hover {
  background-color: crimson;
  color: white;
}

.tag:hover::after {
  border-left-color: crimson;
}

.tag1 {
  background: #1c72aa;
  font-size: 12px;
  border-radius: 3px 0 0 3px;
  color: #fff;
  display: inline-block;
  height: 26px;
  line-height: 26px;
  padding: 0 20px 0 23px;
  position: relative;
  margin: 0 10px 0 0;
  text-decoration: none;
  -webkit-transition: color 0.2s;
}

.tag1::before {
  background: #fff;
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
  content: '';
  height: 6px;
  left: 10px;
  position: absolute;
  width: 6px;
  top: 10px;
}

.tag1::after {
  background-color: transparent;
  border-bottom: 13px solid transparent;
  border-left: 10px solid #1c72aa;
  border-top: 13px solid transparent;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
}

.tag1:hover {
  background-color: crimson;
  color: white;
}

.tag1:hover::after {
  border-left-color: crimson;
}

.bag {
  background: #182f40;
  font-size: 14px;
  border-radius: 3px 0 0 3px;
  color: black;
  display: inline-block;
  height: 26px;
  line-height: 26px;
  padding: 0 20px 0 23px;
  position: relative;
  margin: 0 10px 0 0;
  text-decoration: none;
  -webkit-transition: color 0.2s;
}

.bag::before {
  background: #fff;
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
  content: '';
  height: 6px;
  left: 10px;
  position: absolute;
  width: 6px;
  top: 10px;
}

.bag::after {
  background-color: transparent;
  border-bottom: 13px solid transparent;
  border-left: 10px solid #7a9c59;
  border-top: 13px solid transparent;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
}

.bag:hover {
  background-color: crimson;
  color: white;
}

.bag:hover::after {
  border-left-color: crimson;
}

div.buynow1 {
  border: 1.3px solid #f1592a;
  background: #f1592a;
  border-radius: 5px;
  padding: 10px;
  font-size: 90%;
  font-weight: 700;
  line-height: 1.5em;
}

div.buynow2 {
  border: 1.3px solid #288ad6;
  background: #288ad6;
  border-radius: 5px;
  padding: 10px;
  font-size: 90%;
  font-weight: 700;
  line-height: 1.5em;
}

div.buynow3 {
  border: 1.3px solid #00cc44;
  background: #00cc44;
  border-radius: 5px;
  padding: 10px;
  font-size: 90%;
  font-weight: 700;
  line-height: 1.5em;
}

div.buynow31 {
  border: 1.3px solid #81bf0b;
  background: #81bf0b;
  width: 180px;
  color: black;
  border-radius: 0;
  text-align: center;
  padding: 13px;
  font-size: 100%;
  font-weight: 700;
  line-height: 0.5em;
}

.khuyen-mai-svn {
  margin-bottom: 2px;
  margin-top: 2px;
  background: white;
  padding: 10px;
  border-radius: 5px;
  border: 1px dashed #f15a29;
  font-size: 15px;
  width: 100%;
}

.khuyen-mai-svn .tieu-de {
  background: #f15a29;
  padding: 4px 20px;
  margin-top: -25px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  display: block;
  max-width: 190px;
  border-radius: 5px;
}

.khuyen-mai-svn ul {
  margin-top: 14px;
  margin-bottom: 4px;
  list-style-image: url("https://softvn.vn/wp-content/themes/flatsome-child/assets/css/tick.png");
}

.shop-slidebar-svn {
  margin-bottom: 2px;
  margin-top: 2px;
  background: white;
  padding: 10px;
  border-radius: 5px;
  border: 1px dashed #222c37;
  font-size: 13px;
  width: 100%;
}

.shop-slidebar-svn .tieu-de {
  background: #222c37;
  padding: 3px 15px;
  margin-top: -25px;
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  display: block;
  max-width: 155px;
  border-radius: 5px;
}

.shop-slidebar-svn ul {
  margin-top: 14px;
  margin-bottom: 4px;
  list-style-image: url("https://softvn.vn/wp-content/themes/flatsome-child/assets/css/tick.png");
}

.product-main {
  padding: 40px 0 0 0;
}

.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);
}

@media (max-width: 767px) {
  .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;
  }
}

/* =====================================================
   SoftVN - review initials avatar auto-color
   Mục tiêu:
   - avatar nhỏ, gọn, thẳng hàng với review
   - màu tự đổi theo tên
===================================================== */

.softvn-review-avatar {
    position: absolute;
    left: -50px;
    top: 2px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--softvn-avatar-c1, #f97316) 0%, var(--softvn-avatar-c2, #fb923c) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.10);
    flex-shrink: 0;
}

.woocommerce #reviews #comments .comment-text {
    position: relative;
    margin-left: 58px !important;
}

.woocommerce #reviews #comments img.avatar {
    display: none !important;
}

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

/* Review list layout tweak */
.softvn-review-avatar {
  top: 18px;
}

.woocommerce #reviews #comments .comment-text {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 6px;
  align-items: center;
}

.woocommerce #reviews #comments .star-rating {
  margin: 0 !important;
}

.woocommerce #reviews #comments .meta {
  margin: 0 !important;
}

.woocommerce #reviews #comments .description {
  grid-column: 1 / -1;
}

/* Product title line cleanup */
.product_title:after,
.product-title:after,
.entry-title:after {
  content: none !important;
  display: none !important;
}

.product-main .title-line,
.product-main .is-divider,
.product-main .product-title .is-divider,
.product-main .entry-title + .is-divider {
  display: none !important;
}

/* Product gallery cleanup */
.product-main .zoom-button,
.product-main .zoom,
.product-main .product-lightbox-button,
.product-main .image-tools .zoom,
.product-main .image-tools .open-lightbox,
.single-product .zoom-button,
.single-product .product-lightbox-button {
  display: none !important;
}

.product-gallery .flickity-prev-next-button,
.product-gallery .flickity-button.previous,
.product-gallery .flickity-button.next,
.woocommerce-product-gallery .flickity-prev-next-button,
.woocommerce-product-gallery .flickity-button.previous,
.woocommerce-product-gallery .flickity-button.next {
  display: none !important;
}

.product-thumbnails .flickity-prev-next-button,
.product-thumbnails .flickity-button {
  display: none !important;
}

.product-thumbnails img {
  border-radius: 5px;
}

@media (max-width: 849px) {
  .single-product .product-gallery,
  .single-product .product-thumbnails,
  .single-product .product-images {
    display: none !important;
  }
}

#reviews h2 {
  display: none !important;
}

/* Review section polish */
.woocommerce #reviews #comments ol.commentlist li .comment_container {
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
}

.woocommerce #reviews #comments ol.commentlist li img.avatar {
  width: 48px !important;
  height: 48px !important;
}

#review_form_wrapper {
  padding: 22px 22px 20px;
  border-radius: 18px;
}

#review_form_wrapper .comment-reply-title,
#review_form_wrapper h3 {
  font-size: 20px;
  line-height: 1.3;
  margin-bottom: 14px;
}

#review_form_wrapper .ivole-qa-list a,
#review_form_wrapper .ivole-questions a,
#review_form_wrapper .cr-qna-list a,
#review_form_wrapper .cr-questions a,
#review_form_wrapper .iv-comment-fields__questions a,
#review_form_wrapper .ivole-qa-list span,
#review_form_wrapper .ivole-questions span,
#review_form_wrapper .cr-qna-list span,
#review_form_wrapper .cr-questions span {
  padding: 7px 10px;
  margin: 0 6px 6px 0;
  font-size: 12px;
}

#review_form p {
  margin-bottom: 12px;
}

.comment-form-rating label,
.comment-form-comment label {
  font-size: 14px;
  margin-bottom: 6px;
}

#review_form p.stars {
  margin-bottom: 10px;
}

#review_form p.stars a {
  font-size: 0 !important;
  width: 22px;
  margin-right: 2px;
  text-indent: 0;
}

#review_form p.stars a:after {
  content: "★";
  font-size: 20px;
  color: #d1d5db;
}

#review_form p.stars a:hover:after,
#review_form p.stars a.active:after {
  color: #f59e0b;
}

#review_form textarea {
  min-height: 120px;
  border-radius: 12px;
}

#review_form input#submit,
#review_form input[type="submit"] {
  min-height: 44px;
  padding: 0 20px !important;
  border-radius: 12px !important;
  font-size: 14px;
}

/* Product tabs cleanup */
.woocommerce-tabs {
  margin-top: 6px !important;
  padding-top: 8px !important;
  border-top: 1px solid #e5e7eb !important;
}

.woocommerce-tabs ul.tabs {
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 26px 0 0 !important;
  padding: 0 !important;
}

.woocommerce-tabs ul.tabs li a {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #4b5563 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;
  padding: 0 0 10px 0 !important;
  position: relative !important;
}

.woocommerce-tabs ul.tabs li a:hover {
  color: #1d4f91 !important;
}

.woocommerce-tabs ul.tabs li.active a {
  color: #111827 !important;
  font-weight: 700 !important;
}

.woocommerce-tabs ul.tabs li:before,
.woocommerce-tabs ul.tabs li:after,
.woocommerce-tabs ul.tabs li a:before {
  display: none !important;
  content: none !important;
  border: 0 !important;
  background: transparent !important;
}

.woocommerce-tabs ul.tabs li a:after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -1px !important;
  width: 100% !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: transparent !important;
}

.woocommerce-tabs ul.tabs li.active a:after {
  background: #1d4f91 !important;
}

.woocommerce-Tabs-panel {
  padding-top: 4px !important;
  border: 0 !important;
}

@media (max-width: 849px) {
  .single-product .product-main .row.content-row > .product-info.entry-summary {
    padding-bottom: 6px !important;
  }

  .single-product .product-footer {
    margin-top: -12px;
  }

  .woocommerce-tabs {
    margin-top: -10px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  .woocommerce-tabs ul.tabs {
    margin-bottom: 12px !important;
  }

  .woocommerce-tabs ul.tabs li {
    margin-right: 0 !important;
  }

  .woocommerce-tabs ul.tabs li a {
    display: inline-block;
    font-size: 14px !important;
    padding-bottom: 8px !important;
  }

  .woocommerce-tabs ul.tabs li a:after {
    width: 112px !important;
    max-width: 100% !important;
  }

  .woocommerce-tabs ul.tabs li.reviews_tab {
    display: none !important;
  }
}

/* Product rating inline */
.softvn-product-rating-appstore {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  margin-bottom: 14px;
}

.softvn-product-rating-appstore .star-rating {
  margin: 0 !important;
  font-size: 14px;
  line-height: 1;
  opacity: .9;
}

.softvn-rating-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #475569;
}

.softvn-rating-average {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}

/* Price area */
.product-main .price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin: 8px 0 14px;
  line-height: 1.15;
}

.product-main .price > span:first-child,
.product-main .price .price-label {
  order: 1;
  color: #475569;
  font-weight: 600;
  font-size: 15px;
  margin-right: 2px;
}

.product-main .price .amount {
  white-space: nowrap;
  line-height: 1;
}

.product-main .price ins {
  order: 2;
  color: #e60023;
  text-decoration: none;
  margin: 0;
}

.product-main .price ins .amount,
.product-main .price ins .woocommerce-Price-amount {
  color: #e60023 !important;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.25px;
}

.product-main .price del {
  order: 3;
  position: relative;
  display: inline-block;
  color: #111827 !important;
  opacity: 1;
  margin: 0;
  text-decoration: none;
}

.product-main .price del .amount,
.product-main .price del .woocommerce-Price-amount,
.product-main .price del .woocommerce-Price-currencySymbol {
  color: #111827 !important;
}

.product-main .price del .amount,
.product-main .price del .woocommerce-Price-amount {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  position: relative;
  display: inline-block;
  padding: 0 1px;
}

.product-main .price del .amount::after,
.product-main .price del .woocommerce-Price-amount::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  height: 1.4px;
  background: #94a3b8;
  transform: translateY(-50%);
  pointer-events: none;
}

.product-main .price .woocommerce-Price-currencySymbol {
  font-size: .62em;
  margin-left: 2px;
  position: relative;
  top: -0.06em;
  opacity: .9;
}

.product-main .price > .amount {
  font-size: 24px;
  font-weight: 700;
  color: #e60023;
  letter-spacing: -0.25px;
}

@media (max-width: 849px) {

  #review_form_wrapper {
    margin-top: 18px;
    padding: 18px;
  }

  #review_form_wrapper .comment-reply-title,
  #review_form_wrapper h3 {
    font-size: 18px;
  }

  .product-main .price {
    gap: 10px;
    margin: 8px 0 12px;
  }

  .product-main .price > span:first-child,
  .product-main .price .price-label {
    font-size: 14px;
  }

  .product-main .price del .amount,
  .product-main .price del .woocommerce-Price-amount {
    font-size: 16px;
  }

  .product-main .price del .amount::after,
  .product-main .price del .woocommerce-Price-amount::after {
    height: 1.3px;
    top: 52%;
  }

  .product-main .price ins .amount,
  .product-main .price ins .woocommerce-Price-amount,
  .product-main .price > .amount {
    font-size: 22px;
  }
}

/* =========================================================
   Hộp mô tả ngắn trang SP (2026-09-07): cùng ngôn ngữ thẻ sidebar — bỏ góc khuyết (notch), viền 1px #e5e9ef, bo 10px,
   tick Lucide xanh. Chỉ đổi kiểu hộp này (người dùng khoanh), KHÔNG đụng phần còn lại của cụm tóm tắt (bản v2 đã bị revert).
   ========================================================= */
.single-product .product-info .product-short-description{margin:14px 0 0;padding:14px 16px;border:1px solid #cfd6df;border-radius:10px !important;background:#fff;box-shadow:none;font-size:14px;line-height:1.5;color:#1e293b} /* 2026-09-07: "mờ nhạt" → viền đậm hơn, chữ đậm màu, tick đậm; rồi "nền đậm quá" → nền TRẮNG (bỏ #f8fafc) */
.single-product .product-info .product-short-description::before,.single-product .product-info .product-short-description::after{display:none}
.single-product .product-info .product-short-description p{margin:0 0 8px}
.single-product .product-info .product-short-description p:last-child{margin-bottom:0}
.single-product .product-info .product-short-description ul{list-style:none;margin:0;padding:0}
.single-product .product-info .product-short-description li{position:relative;margin:0 0 8px;padding:0 0 0 27px;font-size:14px;line-height:1.5;color:#1e293b;font-weight:400}
.single-product .product-info .product-short-description li:last-child{margin-bottom:0}
.single-product .product-info .product-short-description li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;background: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%230f7a4f%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%2710%27/%3E%3Cpath d=%27m9 12 2 2 4-4%27/%3E%3C/svg%3E") no-repeat center/16px 16px;border:0;border-radius:0;transform:none;opacity:1}
@media (max-width:549px){.single-product .product-info .product-short-description{padding:12px 14px}}

/* Logo hãng góc phải cụm tóm tắt (Flatsome .ux-product-brands) — 2026-09-07 người dùng: "to quá" → 48px, viền mảnh, bo 8px */
.single-product .product-info .ux-product-brands{margin:0}
.single-product .product-info .ux-product-brands img{width:64px !important;height:64px !important;max-width:64px;object-fit:contain} /* 48px bị chê "nhỏ quá" → 64px (gốc ~80px) */ /* chỉ thu nhỏ; Additional CSS (Customizer) cố ý bỏ viền/bo/padding của logo bằng !important specificity cao hơn — tôn trọng */

/* =========================================================
   ĐÁNH GIÁ SẢN PHẨM — chỉ CSS (2026-09-07, người dùng: "giữ nguyên, chỉ làm css cho chúng"). Đè các luật cũ ở trên
   (Rating summary box / Review section polish: bo 18px, bóng, avatar màu theo tên, form viền cam 2px) bằng specificity cao hơn.
   Ngôn ngữ chung: viền #e5e9ef, bo 10px, không bóng, sao #f59e0b, navy #14355f, nút outline.
   ========================================================= */
/* sao ở cụm tóm tắt */
.single-product .product-info .woocommerce-product-rating{margin:0 0 10px}
.single-product .product-info .woocommerce-product-rating .star-rating{font-size:14px;color:#f59e0b}
/* tiêu đề "N đánh giá cho …" */
.single-product #reviews .woocommerce-Reviews-title{margin:0 0 16px;font-size:16px;line-height:1.3;font-weight:700;color:#0f172a}
/* thẻ đánh giá */
body.single-product.woocommerce #reviews #comments ol.commentlist li .comment_container{padding:16px 18px;border:1px solid #e5e9ef;border-radius:10px;background:#fff;box-shadow:none} /* body.single-product.woocommerce (cùng phần tử) — viết `.single-product .woocommerce` sẽ KHÔNG khớp */
body.single-product.woocommerce #reviews #comments ol.commentlist li{margin:0 0 12px}
.single-product #reviews .softvn-review-avatar{width:38px !important;height:38px !important;border-radius:50% !important;background:transparent !important;overflow:hidden;padding:0;box-shadow:none !important;top:0 !important;margin-top:0} /* 2026-09-07: avatar SVG nhân vật (softvn_review_avatar_svg), nền nằm trong SVG; luật cũ top:18px (di trú từ Additional CSS) đẩy avatar xuống giữa thẻ → top:0 = ngang dòng tên */
.single-product #reviews .softvn-review-avatar svg{display:block;width:100%;height:100%}
body.single-product.woocommerce #reviews #comments ol.commentlist li .comment_container{align-items:flex-start !important}
.single-product #reviews .comment-text{padding:0 0 0 14px}
.single-product #reviews .comment-text .star-rating{font-size:12px;color:#f59e0b;margin:0 0 4px}
.single-product #reviews .comment-text .meta{margin:0 0 6px;font-size:13px;color:#64748b}
.single-product #reviews .comment-text .meta .woocommerce-review__author{font-weight:700;color:#0f172a;font-size:14px}
.single-product #reviews .comment-text .meta .woocommerce-review__published-date{color:#94a3b8}
.single-product #reviews .comment-text .description,.single-product #reviews .comment-text .description p{margin:0;font-size:14px;line-height:1.55;font-style:normal;color:#334155}
/* form thêm đánh giá */
.single-product #review_form_wrapper{padding:0}
.single-product #review_form_wrapper .review-form-inner.has-border{padding:20px 22px 22px;border:1px solid #e5e9ef !important;border-style:solid !important;border-radius:10px !important;background:#fff}
.single-product #review_form_wrapper .comment-reply-title,.single-product #review_form_wrapper h3{margin:0 0 12px;font-size:16px;line-height:1.3;font-weight:700;color:#0f172a}
.single-product #review_form .text-comment-pt{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.single-product #review_form .text-comment-pt .text-comment-pt_item{display:inline-flex;align-items:center;height:32px;margin:0;padding:0 12px;border:1px solid #d5dbe3;border-radius:8px;background:#fff;font-size:12px;font-weight:500;color:#334155;cursor:pointer;transition:border-color .12s,color .12s,background .12s}
.single-product #review_form .text-comment-pt .text-comment-pt_item:hover{border-color:#14355f;color:#14355f;background:#f4f7fb}
.single-product #review_form .comment-form-rating label,.single-product #review_form .comment-form-comment label{margin:0 0 6px;font-size:12px;font-weight:600;color:#334155}
.single-product #review_form p.stars a:after{font-size:22px;color:#cbd5e1}
.single-product #review_form p.stars a:hover:after,.single-product #review_form p.stars a.active:after{color:#f59e0b}
.single-product #review_form textarea{min-height:110px;padding:10px 12px;border:1px solid #d5dbe3;border-radius:8px;box-shadow:none;font-size:14px}
.single-product #review_form textarea:focus{border-color:#14355f;box-shadow:0 0 0 3px rgba(20,53,95,.12)}
.single-product #review_form input#submit,.single-product #review_form input[type="submit"]{min-height:42px;margin:0;padding:0 42px 0 20px !important;border:1.5px solid #14355f !important;border-radius:8px !important;background:#fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2314355f%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 right 17px center/15px 15px !important;color:#14355f !important;font-size:13px;font-weight:700;letter-spacing:.01em;text-transform:none;box-shadow:none;transition:background-color .12s,color .12s} /* nút là <input> nên không có ::after → mũi tên Lucide bằng background-image, cùng icon với nút gửi trang Liên hệ */
.single-product #review_form input#submit:hover,.single-product #review_form input[type="submit"]:hover{background:#14355f 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%23fff%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 right 17px center/15px 15px !important;color:#fff !important}
/* 2026-09-07 bổ sung: sao trong thẻ đánh giá vẫn nâu đỏ (Flatsome tô qua ::before của .star-rating span) + kẻ đứt giữa các li */
body.single-product.woocommerce #reviews .star-rating,body.single-product.woocommerce #reviews .star-rating span,body.single-product.woocommerce #reviews .star-rating::before,body.single-product.woocommerce #reviews .star-rating span::before{color:#f59e0b !important}
body.single-product.woocommerce #reviews #comments ol.commentlist li{border:0 !important;background:transparent !important;padding:0 !important}
body.single-product.woocommerce #reviews #comments ol.commentlist li::before,body.single-product.woocommerce #reviews #comments ol.commentlist li::after{display:none !important}

/* ===== TAB MÔ TẢ / ĐÁNH GIÁ — kiểu SaaS (2026-09-07; người dùng khoanh cụm tab + khoảng trống phía trên) =====
   Đè khối "Product tabs cleanup" ở trên (toàn !important) bằng cách thêm `.single-product` (specificity cao hơn) + !important.
   Mobile (<850px) vẫn theo khối cũ: tab Đánh giá bị ẩn, tab dạng cột. */
.single-product .product-main{padding-bottom:16px !important} /* 40 → 16: khoảng trống giữa cụm tóm tắt và tab bị chê */
.single-product .woocommerce-tabs{margin-top:0 !important;padding-top:0 !important;border-top:0 !important}
.single-product .woocommerce-tabs ul.tabs{display:flex !important;flex-wrap:wrap;margin:0 0 24px !important;border-bottom:1px solid #e5e9ef !important}
.single-product .woocommerce-tabs ul.tabs li{margin:0 28px 0 0 !important}
.single-product .woocommerce-tabs ul.tabs li a{display:inline-flex !important;align-items:center;gap:8px;margin-bottom:-1px;padding:12px 2px 13px !important;font-size:15px !important;font-weight:600 !important;letter-spacing:0 !important;text-transform:none !important;line-height:1.2;color:#64748b !important}
.single-product .woocommerce-tabs ul.tabs li a::before{content:"" !important;display:block !important;width:17px;height:17px;flex:0 0 17px;background:currentColor !important;border:0 !important}
.single-product .woocommerce-tabs ul.tabs li.description_tab a::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/17px 17px;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/17px 17px}
.single-product .woocommerce-tabs ul.tabs li.reviews_tab a::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=%27M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z%27/%3E%3C/svg%3E") no-repeat center/17px 17px;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=%27M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z%27/%3E%3C/svg%3E") no-repeat center/17px 17px}
.single-product .woocommerce-tabs ul.tabs li a:hover{color:#14355f !important}
.single-product .woocommerce-tabs ul.tabs li.active a{color:#14355f !important;font-weight:700 !important}
.single-product .woocommerce-tabs ul.tabs li a::after{height:2px !important;bottom:-1px !important;border-radius:0 !important;background:transparent !important}
.single-product .woocommerce-tabs ul.tabs li.active a::after{background:#14355f !important}
.single-product .woocommerce-tabs .svp-tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#eef2f7;color:#14355f;font-size:12px;font-weight:700;line-height:1}
.single-product .woocommerce-tabs ul.tabs li.active .svp-tab-count{background:#14355f;color:#fff}
.single-product .woocommerce-Tabs-panel{padding-top:0 !important}
/* Flatsome `nav-line` dùng chính `a::before` làm vạch chỉ báo (position:absolute) và luật cũ đầu file
   `.woocommerce div.product … li.active a::before{background:rgba(0,0,0,.05)}` (0,4,5) đè màu icon → phải kéo về static + currentColor
   với selector cùng specificity (0,4,5) đặt SAU. Cùng lý do cho `::after` (#1c72aa cũ). */
.woocommerce div.product .woocommerce-tabs ul.tabs li a::before{position:static !important;top:auto !important;left:auto !important;right:auto !important;bottom:auto !important;transform:none !important;opacity:1 !important;width:17px !important;height:17px !important;margin:0 !important;background:currentColor !important;border:0 !important}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::before{background:currentColor !important}
.woocommerce div.product .woocommerce-tabs ul.tabs li a::after{background:transparent !important}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after{background:#14355f !important}
/* ===== BO GÓC NỘI DUNG MÔ TẢ (2026-09-07, người dùng chỉ banner đầu tab Mô tả: "nên có radius 8px") =====
   Banner Flatsome trong mô tả SP + ảnh nội dung bo 8px; `.banner-inner` là lớp có overflow:hidden nên phải bo cả nó. */
.single-product .woocommerce-Tabs-panel--description .banner,.single-product .woocommerce-Tabs-panel--description .banner .banner-inner,.single-product .woocommerce-Tabs-panel--description .banner .banner-bg{border-radius:8px !important;overflow:hidden}
.single-product .woocommerce-Tabs-panel--description img:not(.emoji){border-radius:8px}

/* ---------------------------------------------------------------------------
   2026-09-08 — TAB TRONG MÔ TẢ SẢN PHẨM (Flatsome [tabgroup], `ul.nav-outline`) kéo về
   cùng kiểu với thanh tab ngoài (Mô tả / Đánh giá). Đo được trên cùng một trang, cách nhau
   ~20px, là hai hệ khác hẳn:
     tab NGOÀI  active navy #14355f 700, không viền, gạch dưới 2px
     tab TRONG  active cam  #d9480f 700, VIỀN 1px #f15a24 (kiểu pill); thường viền #c9d7ea
   Nay tab trong dùng đúng ngữ pháp của tab ngoài. !important vì mô tả sản phẩm có 33 thẻ
   <style> nhúng, đứng sau file CSS này trong DOM.
   --------------------------------------------------------------------------- */
.woocommerce-Tabs-panel .tabbed-content > ul.nav{
  border-bottom:1px solid #e5e9ef !important;margin:0 0 20px !important;gap:4px !important;
}
.woocommerce-Tabs-panel .tabbed-content > ul.nav > li.tab{margin:0 !important;border:0 !important}
.woocommerce-Tabs-panel .tabbed-content > ul.nav > li.tab > a{
  border:0 !important;border-radius:0 !important;background:transparent !important;
  padding:10px 16px !important;font-size:15px !important;font-weight:600 !important;
  color:#64748b !important;box-shadow:none !important;position:relative !important;
}
.woocommerce-Tabs-panel .tabbed-content > ul.nav > li.tab.active > a{
  color:#14355f !important;font-weight:700 !important;
  box-shadow:inset 0 -2px 0 0 #14355f !important;   /* gạch dưới, đè lên đường kẻ của ul */
}
.woocommerce-Tabs-panel .tabbed-content > ul.nav > li.tab > a:hover{color:#14355f !important}


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

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

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


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

html {
  scroll-behavior: smooth;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

body {
  overflow-x: hidden;
}

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

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