/* =========================================================
 * MUSKIS - HEADER
 *
 * Chỉ CSS. Không sửa HTML, không sửa JS của Flatsome.
 * Sticky do JS Flatsome lo: nó thêm class .stuck vào
 * .header-wrapper và tự chừa chiều cao chống giật.
 *
 * Markup Flatsome:
 *   #header.header.has-sticky
 *     .header-wrapper[.stuck]
 *       #masthead.header-main
 *         .header-inner            <- viên pill
 *           #logo
 *           .flex-col.hide-for-medium  <- menu desktop
 *           .flex-col.show-for-medium  <- nút hamburger mobile
 *
 * Hai trạng thái desktop và mobile đều là một viên pill nổi,
 * chỉ khác kích thước.
 *
 * CÔNG TẮC: --musk-position
 *   relative  = header nằm trong luồng trang (mặc định)
 *   absolute  = header nổi đè lên banner
 * ========================================================= */

#header {
  --musk-position: relative;

  /* Chiều cao viên pill. Tổng chiều cao header = giá trị này
     cộng 2 lần đệm của wrapper.
     Desktop: 66 + 24 = 90px, khớp margin-top âm của banner.

     Cuộn hay không cuộn đều dùng chung con số này - khi cuộn
     chỉ đổi màu, không đổi kích thước. */
  --musk-h: 66px;

  /* CHIỀU CAO logo, đặt thẳng lên thẻ <img>.
     Không đi vòng qua bề ngang thẻ <a> nữa: Flatsome có tuỳ
     chọn riêng cho logo lúc sticky, cứ để kích thước phụ
     thuộc thẻ bao là còn đường cho nó chen vào. */
  --musk-logo-h: 30px;

  --musk-max: 1840px;

  --musk-text: #ffffff;
  --musk-text-soft: rgba(255, 255, 255, 0.82);

  --musk-normal-bg: rgba(4, 12, 22, 0.45);
  --musk-normal-border: rgba(255, 255, 255, 0.09);
  --musk-sticky-border: rgba(255, 255, 255, 0.16);

  --musk-ease: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  position: var(--musk-position);
  top: 0;
  right: 0;
  left: 0;

  /* Phải THẤP hơn menu off-canvas của Flatsome (khoảng 1040),
     không thì header đè lên bảng menu khi mở trên mobile. */
  z-index: 900;

  width: 100%;
  background: transparent;
  box-shadow: none;
}

/* Bắt buộc. Không có dòng này thì thẻ <a> trong submenu đặt
   width: 100% sẽ CỘNG thêm padding, tràn ra khỏi khung đúng
   bằng phần padding - nhìn ra là ô hover dính sát mép phải
   trong khi mép trái vẫn có khoảng cách. */

#header,
#header *,
#header *::before,
#header *::after {
  box-sizing: border-box;
}

/* Submenu phải tràn ra ngoài được. Flatsome hay đặt
   overflow: hidden làm mất dropdown. */

#header,
#header .header-wrapper,
#header .header-main,
#header .header-inner,
#header .flex-row,
#header .flex-col,
#header .header-nav,
#header .header-nav > li {
  overflow: visible;
}

/* Nền mặc định của Flatsome: tắt hẳn, nền nằm ở viên pill. */

#header .header-bg-container,
#header .header-bg-image,
#header .header-bg-color {
  display: none;
}

/* =========================================================
 * WRAPPER - KHOẢNG ĐỆM QUANH VIÊN PILL
 * ========================================================= */

#header .header-wrapper {
  display: block;
  width: 100%;
  background: transparent;
}

#header .header-wrapper:not(.stuck) {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  padding: 12px 24px;
  opacity: 1;
  visibility: visible;
  transform: none;
}

#header .header-wrapper.stuck {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 900;
  width: 100%;
  padding: 12px 24px;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  animation: none;
}

/* Flatsome ẩn masthead khi stuck. Không cho ẩn. */

#header #masthead,
#header #masthead.hide-for-sticky,
#header .header-wrapper.stuck #masthead.hide-for-sticky {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Chiều cao phải !important và phải nêu cả trạng thái stuck.
   Customizer của Flatsome có ô riêng cho chiều cao header lúc
   sticky, không chặn thì cuộn xuống header tự phình to. */

#header #masthead.header-main,
#header .header-wrapper.stuck #masthead.header-main {
  position: relative;
  width: 100%;
  height: var(--musk-h) !important;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* =========================================================
 * VIÊN PILL
 * ========================================================= */

#header .header-inner {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  max-width: var(--musk-max);
  height: 100%;
  padding: 0 18px 0 22px;
  margin: 0 auto;
  border: 1px solid var(--musk-normal-border);
  border-radius: 999px;
  background: var(--musk-normal-bg);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  box-shadow: none;
  transition:
    border-color var(--musk-ease),
    background var(--musk-ease),
    box-shadow var(--musk-ease);
}

/* Khi cuộn CHỈ đổi màu. Kích thước giữ nguyên: pill, logo và
   chữ menu không co lại, tránh giật một nhịp lúc chuyển. */

#header .header-wrapper.stuck .header-inner {
  border-color: var(--musk-sticky-border);
  backdrop-filter: blur(24px);
  background: var(--musk-normal-bg);
  box-shadow:
    0 14px 32px #0006,
    inset 0 1px #ffffff14;
}

/* =========================================================
 * LOGO
 * ========================================================= */

#header #logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  width: auto !important;
  min-width: 0;
  max-width: none;
  padding: 0;
  margin: 0 34px 0 0;
}

#header #logo a,
#header .header-wrapper.stuck #logo a {
  display: flex;
  width: auto !important;
  max-width: 100%;
  align-items: center;
  height: auto;
  margin: 0;
}

/* Ép thẳng height lên thẻ <img>, không dùng max-height.
   max-height chỉ là trần: Flatsome đặt #logo img { width: 100% }
   nên ảnh giãn theo thẻ bao và chưa bao giờ chạm trần đó.
   Đặt height cố định thì bề ngang tự suy ra theo tỉ lệ, mọi
   tuỳ chọn của Flatsome thành vô hiệu.

   Liệt kê cả trạng thái stuck và mọi biến thể logo mà Flatsome
   có thể xuất ra. */

#header #logo img,
#header #logo img.header_logo,
#header #logo img.header-logo,
#header #logo img.header-logo-sticky,
#header .header-wrapper.stuck #logo img {
  display: block;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: var(--musk-logo-h) !important;
  max-height: none !important;
  margin: 0;
  object-fit: contain;
  opacity: 1;
  visibility: visible;
  transform: none !important;
}

/* Flatsome xuất hai thẻ img giống hệt nhau. Tắt cái thứ hai
   ở MỌI kích thước màn hình. */

#header #logo img.header-logo-dark {
  display: none;
}

/* =========================================================
 * CỘT MENU
 * ========================================================= */

#header .header-inner > .flex-col.hide-for-medium.flex-left {
  min-width: 0;
  flex: 1 1 auto;
  justify-content: center;
}

#header .header-inner > .flex-col.hide-for-medium.flex-right {
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-left: 24px;
}

/* =========================================================
 * LINK MENU CHÍNH
 * ========================================================= */

#header .header-nav-main {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  height: auto;
  padding: 0;
  margin: 0 auto;
}

/* Mục menu cao bằng viên pill: rê chuột vào bất cứ đâu trong
   ô là mở được submenu, không phải trúng đúng chữ. */

#header .header-nav-main > li {
  position: relative;
  display: flex;
  align-self: stretch;
  align-items: center;
  height: auto;
  margin: 0;
}

#header .header-nav-main > li > a.nav-top-link {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 44px;
  padding: 0 11px;
  color: var(--musk-text-soft);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: capitalize;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* Cuộn rồi thì nền đã đặc, bỏ đổ bóng chữ cho sạch. */

#header .header-wrapper.stuck .header-nav-main > li > a.nav-top-link {
  text-shadow: none;
}

#header .header-nav-main > li > a.nav-top-link:hover,
#header .header-nav-main > li > a.nav-top-link:focus-visible,
#header .header-nav-main > li.active > a.nav-top-link,
#header .header-nav-main > li.current-menu-item > a.nav-top-link,
#header .header-nav-main > li.current-menu-parent > a.nav-top-link {
  color: var(--musk-text);
}

#header .header-nav-main > li > a.nav-top-link:focus-visible {
  border-radius: 6px;
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

/* Không dùng gạch chân hay chấm đánh dấu. Trang hiện tại đã
   phân biệt bằng màu chữ sáng hơn. */

#header .header-nav-main > li > a.nav-top-link::after,
#header .header-nav-main > li > a.nav-top-link::before,
#header .header-bottom-nav > li > a::after,
#header .header-bottom-nav > li > a::before {
  display: none;
  content: none;
}

/* Tắt tam giác nhọn Flatsome vẽ trên thẻ <li>.
   Phải tắt vì nó không đều: mục trỏ tới URL thật được gắn
   thêm class nav-dropdown-toggle và Flatsome bỏ qua nhóm đó,
   thành ra chỗ có chỗ không.
   Dropdown đã cách viên pill 10px nên tam giác dính vào cũng
   không còn hợp. */

#header .header-nav-main > li::before,
#header .header-nav-main > li::after {
  display: none !important;
  content: none !important;
}

#header .nav-top-link .icon-angle-down {
  display: inline-flex;
  margin-left: 5px;
  font-size: 11px;
  opacity: 0.7;
}

/* =========================================================
 * DROPDOWN
 * ========================================================= */

#header .header-nav-main > li.has-dropdown,
#header .header-nav-main > li.menu-item-has-children {
  position: relative;
}

#header .header-nav-main > li > ul.nav-dropdown {
  position: absolute;

  /* Cách viên pill một chút cho thoáng. Khoảng hở này được
     cầu nối vô hình ::before che lại nên rê chuột xuống
     không bị mất hover. */
  top: calc(100% + 10px);

  right: auto;
  left: 6px;
  z-index: 999999;
  width: max-content;
  min-width: 280px;
  max-width: 490px;
  padding: 10px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(10, 20, 38, 0.78);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
  backdrop-filter: blur(26px) saturate(145%);
  box-shadow: 0 16px 40px rgba(3, 8, 20, 0.26);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transform-origin: top left;
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.18s ease;
}

/* Cầu nối vô hình: rê chuột từ menu xuống submenu không mất hover. */

#header .header-nav-main > li > ul.nav-dropdown::before {
  position: absolute;
  top: -14px;
  right: 0;
  left: 0;
  height: 14px;
  content: "";
}

#header .header-nav-main > li:hover > ul.nav-dropdown,
#header .header-nav-main > li:focus-within > ul.nav-dropdown,
#header .header-nav-main > li.current-dropdown > ul.nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Hai mục cuối đổ sang trái để không tràn khỏi màn hình. */

#header .header-nav-main > li:nth-last-child(-n + 2) > ul.nav-dropdown {
  right: 6px;
  left: auto;
  transform-origin: top right;
}

#header ul.nav-dropdown > li {
  display: block;
  width: 100%;
  border: 0;
  margin: 0;
}

/* Khoảng cách đều giữa các mục, kể cả mục cuối. */

#header ul.nav-dropdown > li + li {
  margin-top: 2px;
}

#header ul.nav-dropdown > li > a {
  display: block;
  width: auto;
  padding: 11px 13px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0.03em;
  text-transform: capitalize;
  white-space: normal;
  transition:
    color 0.18s ease,
    background 0.18s ease;
}

#header ul.nav-dropdown > li > a:hover,
#header ul.nav-dropdown > li > a:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  color: var(--musk-text);
}

/* =========================================================
 * NÚT HAMBURGER
 * ========================================================= */

#header .header-nav-main > li.nav-icon,
#header .mobile-nav > li.nav-icon {
  height: auto;
}

#header .nav-icon > a,
#header .nav-icon .header-button > a {
  display: flex;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  margin: 0;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  color: var(--musk-text);
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

#header .nav-icon > a:hover,
#header .nav-icon .header-button > a:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: scale(1.04);
}

#header .nav-icon .icon-menu {
  color: var(--musk-text);
  font-size: 24px;
}

/* =========================================================
 * DESKTOP - ẨN NAV MOBILE
 * ========================================================= */

@media (min-width: 850px) {
  #header .header-inner > .flex-col.show-for-medium {
    display: none;
  }

  #header .header-inner > .flex-col.hide-for-medium {
    display: flex;
    align-items: center;
    opacity: 1;
    visibility: visible;
  }
}

/* =========================================================
 * MÀN HÌNH HẸP 850 - 1250px
 * Menu nhiều mục, thu nhỏ lại cho khỏi tràn.
 * ========================================================= */

@media (min-width: 850px) and (max-width: 1250px) {
  #header .header-wrapper:not(.stuck),
  #header .header-wrapper.stuck {
    padding: 10px 12px;
  }

  #header .header-inner {
    padding: 0 10px;
  }

  #header #logo {
    margin-right: 18px;
  }

  #header {
    --musk-logo-h: 28px;
  }

  #header .header-nav-main > li > a.nav-top-link {
    padding: 0 6px;
    font-size: 11px;
    letter-spacing: 0.02em;
  }

  #header .header-inner > .flex-col.hide-for-medium.flex-right {
    margin-left: 10px;
  }
}

/* =========================================================
 * MOBILE / TABLET (< 850px)
 *
 * Vẫn là viên pill nổi, chỉ nhỏ lại. Sticky do JS Flatsome
 * thêm class .stuck - phải bật "Sticky Header" cho mobile
 * trong Customizer thì class đó mới có.
 * ========================================================= */

@media (max-width: 849px) {
  #header {
    --musk-h: 56px;
  }

  #header .header-wrapper:not(.stuck),
  #header .header-wrapper.stuck {
    padding: 10px 12px;
  }

  #header .header-inner {
    padding: 0 10px 0 14px;
    border-radius: 999px;
  }

  /* Menu desktop tắt, nav mobile bật. */

  #header .header-inner > .flex-col.hide-for-medium {
    display: none;
  }

  #header .header-inner > .flex-col.show-for-medium {
    display: flex;
    align-items: center;
  }

  #header .header-inner > .flex-col.show-for-medium.flex-left {
    flex: 0 0 auto;
  }

  #header .header-inner > .flex-col.show-for-medium.flex-right {
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-left: auto;
  }

  /* Logo canh trái, không để Flatsome kéo ra giữa. */

  #header .header-inner.medium-logo-center #logo {
    flex: 0 1 auto;
    order: 0;
    margin: 0 12px 0 0;
    text-align: left;
  }

  #header {
    --musk-logo-h: 27px;
  }

  /* Logo khi cuộn y hệt lúc chưa cuộn. Chặn nốt đường phóng
     to bằng transform nếu Flatsome có dùng. */

  #header .header-wrapper.stuck #logo,
  #header .header-wrapper.stuck #logo a,
  #header .header-wrapper.stuck #logo img {
    transform: none !important;
  }

  #header .nav-icon > a,
  #header .nav-icon .header-button > a {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }

  #header .nav-icon .icon-menu {
    font-size: 22px;
  }
}

/* =========================================================
 * MOBILE NHỎ
 * ========================================================= */

@media (max-width: 420px) {
  #header .header-wrapper:not(.stuck),
  #header .header-wrapper.stuck {
    padding: 8px 10px;
  }

  #header {
    --musk-logo-h: 23px;
  }
}

/* =========================================================
 * GIẢM CHUYỂN ĐỘNG
 * ========================================================= */

@media (prefers-reduced-motion: reduce) {
  #header,
  #header * {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
 * MENU MOBILE (OFF-CANVAS CỦA FLATSOME)
 *
 * Bảng menu trượt ra khi bấm nút hamburger. Chỉ CSS, không sửa
 * HTML / JS của Flatsome.
 *
 * Markup:
 *   .mfp-wrap.off-canvas
 *     .mfp-content
 *       #main-menu.mobile-sidebar.mobile-sidebar-slide
 *         .sidebar-menu > ul.nav-sidebar.nav-slide
 *           li.has-child > a + button.toggle + ul.sub-menu
 *             li.nav-slide-header > button.toggle   <- nút quay lại
 *     button.mfp-close
 *
 * Menu 2 cấp kiểu trượt: bấm mũi tên thì danh sách con trượt
 * vào thay chỗ danh sách cha.
 * ========================================================= */

.mfp-wrap.off-canvas .mfp-content {
  width: min(86vw, 360px);
  background:
    radial-gradient(circle at 100% 0%, rgba(21, 88, 244, 0.28) 0%, rgba(21, 88, 244, 0) 55%),
    linear-gradient(165deg, #060f33 0%, #0a1c55 100%);
  box-shadow: -18px 0 40px rgba(3, 8, 25, 0.35);
}

/* Lớp tối phía sau bảng menu. */
.mfp-wrap.off-canvas ~ .mfp-bg,
.mfp-bg.off-canvas {
  background: #030819;
  opacity: 0.65;
}

#main-menu.mobile-sidebar,
#main-menu .sidebar-menu,
#main-menu .nav-sidebar,
#main-menu .sub-menu {
  background: transparent;
}

/* Chừa chỗ trên cùng cho nhãn "MENU" và nút đóng. */
#main-menu .sidebar-menu {
  padding-top: 72px;
}

#main-menu::before {
  content: "MENU";
  position: absolute;
  top: 26px;
  left: 24px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  line-height: 1;
}

/* ---------- Nút đóng ---------- */

.mfp-wrap.off-canvas .mfp-close {
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  opacity: 1;
  transition: background 0.2s ease;
}

.mfp-wrap.off-canvas .mfp-close:hover,
.mfp-wrap.off-canvas .mfp-close:focus-visible {
  background: rgba(255, 255, 255, 0.16);
}

.mfp-wrap.off-canvas .mfp-close svg {
  width: 22px;
  height: 22px;
}

/* ---------- Mục cấp 1 ---------- */

#main-menu .nav-sidebar > li {
  position: relative;
  margin: 0;
  border: 0;
}

#main-menu .nav-sidebar > li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

#main-menu .nav-sidebar > li > a {
  display: block;
  min-height: 0;
  padding: 17px 64px 17px 24px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;

  /* In hoa chữ cái đầu mỗi từ: "Tư Vấn An Ninh". */
  text-transform: capitalize;
  transition: color 0.2s ease, background 0.2s ease;
}

#main-menu .nav-sidebar > li > a:hover,
#main-menu .nav-sidebar > li > a:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
}

/* Trang đang xem: chữ xanh sáng + vạch nhấn bên trái. */
#main-menu .nav-sidebar > li.current-menu-item > a,
#main-menu .nav-sidebar > li.current-menu-ancestor > a {
  color: #8fb2ff;
}

#main-menu .nav-sidebar > li.current-menu-item::before,
#main-menu .nav-sidebar > li.current-menu-ancestor::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #1558f4;
}

/* Nút mũi tên mở menu con: tròn nhỏ ở mép phải. */
#main-menu .nav-sidebar > li.has-child > .toggle {
  position: absolute;
  top: 50%;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  opacity: 1;
  transform: translateY(-50%);
  transition: background 0.2s ease;
}

#main-menu .nav-sidebar > li.has-child > .toggle:hover,
#main-menu .nav-sidebar > li.has-child > .toggle:focus-visible {
  background: #1558f4;
}

#main-menu .nav-sidebar > li.has-child > .toggle i {
  margin: 0;
  color: inherit;
  font-size: 16px;
  opacity: 1;
}

/* ---------- Menu con (cấp 2) ---------- */

/* Nút quay lại ở đầu menu con. */
#main-menu .sub-menu .nav-slide-header {
  padding: 0 !important;
  margin: 0 0 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#main-menu .sub-menu .nav-slide-header .toggle {
  position: static;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 0;
  padding: 4px 24px 18px;
  margin: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: left;
  text-transform: capitalize;
  opacity: 1;
  gap: 12px;
}

#main-menu .sub-menu .nav-slide-header .toggle i {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 15px;
  opacity: 1;
}

#main-menu .sub-menu > li:not(.nav-slide-header) {
  margin: 0;
  border: 0;
}

#main-menu .sub-menu > li:not(.nav-slide-header) > a {
  position: relative;
  display: block;
  padding: 13px 24px 13px 42px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: capitalize;
  transition: color 0.2s ease, background 0.2s ease;
}

#main-menu .sub-menu > li:not(.nav-slide-header) > a::before {
  content: "";
  position: absolute;
  top: calc(13px + 0.72em - 3px);
  left: 25px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(143, 178, 255, 0.55);
  transition: background 0.2s ease;
}

#main-menu .sub-menu > li:not(.nav-slide-header) > a:hover,
#main-menu .sub-menu > li:not(.nav-slide-header) > a:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
}

#main-menu .sub-menu > li:not(.nav-slide-header) > a:hover::before,
#main-menu .sub-menu > li.current-menu-item > a::before {
  background: #1558f4;
}

#main-menu .sub-menu > li.current-menu-item > a {
  color: #8fb2ff;
}

/* Menu con là khối position: fixed dính sát mép trên - chừa
   đúng khoảng trống như danh sách cấp 1, không thì tiêu đề menu
   con đè lên chữ "MENU" và nút đóng. */
#main-menu .nav-sidebar > li > .sub-menu {
  padding-top: 72px;
}

/* Khi menu đang mở: ẩn các nút nổi (thanh liên hệ, nút cookie)
   để chúng không đè lên menu. Đóng menu là hiện lại. */
html.has-off-canvas .mk-bar,
html.has-off-canvas .mk-dock,
html.has-off-canvas .musk-cc-fab {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Flatsome gắn mix-blend-mode: difference cho nút đóng (để nổi
   trên mọi nền) - trên nền xanh nó ra màu vàng. Trả về bình
   thường, nút trắng trên nền tròn mờ. */
.mfp-wrap.off-canvas .mfp-close {
  mix-blend-mode: normal;
}