/* ============================================================
   VoyageCore — Header CSS v1.4.0
   6 layouts + topbar + nav styles + hover effects + dropdown
   + mega menu + offcanvas + search overlay + responsive
   ============================================================ */

/* ── CSS Variables (set via inline style từ customizer) ── */
:root {
  --vc-primary: #00b4cc;
  --vc-font: 'Be Vietnam Pro', sans-serif;
  --vc-hdr-bg: #ffffff;
  --vc-hdr-text: #222222;
  --vc-topbar-bg: #1a2035;
  --vc-topbar-txt: #ffffff;
  --vc-hover-clr: #00b4cc;
  --vc-logo-w: 180px;
  --vc-hdr-h: 68px;
  --vc-topbar-h: 36px;
  --vc-radius: 8px;
  --vc-radius-sm: 5px;
  --vc-transition: 0.2s ease;
  --vc-shadow: 0 2px 20px rgba(0, 0, 0, .09);
  --vc-border: #e5e7eb;
  --vc-submenu-bg: #ffffff;
  --vc-submenu-text: #333333;
}

/* ── Fix: bỏ margin mặc định của browser ── */
body {
  margin: 0;
}

/* ── Fix: bỏ underline cho tất cả link trong header ── */
.site-header a,
.vc-menu a,
.vc-menu .sub-menu a,
.vc-topbar-nav a,
.vc-offcanvas a {
  text-decoration: none;
}

/* ════════════════════════════════════════
   TOPBAR
   ════════════════════════════════════════ */
.vc-topbar {
  width: 100%;
  font-size: 12.5px;
  background: var(--vc-topbar-bg);
  color: var(--vc-topbar-txt);
}

.vc-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--vc-topbar-h);
  gap: 16px;
}

.vc-topbar-left,
.vc-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vc-topbar-phone {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  opacity: .9;
  transition: opacity var(--vc-transition);
}

.vc-topbar-phone:hover {
  opacity: 1;
}

.vc-topbar-nav,
.vc-topbar-nav ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vc-topbar-nav li a {
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: var(--vc-topbar-h);
  font-size: 12px;
  color: inherit;
  border-right: 1px solid rgba(255, 255, 255, .15);
  opacity: .85;
  transition: opacity var(--vc-transition);
}

.vc-topbar-nav li:first-child a {
  border-left: 1px solid rgba(255, 255, 255, .15);
}

.vc-topbar-nav li a:hover {
  opacity: 1;
}

/* ════════════════════════════════════════
   HEADER SHELL
   ════════════════════════════════════════ */
.site-header {
  position: relative;
  z-index: 900;
  background: var(--vc-hdr-bg);
  transition: box-shadow var(--vc-transition), transform var(--vc-transition);
}

/* Layout 3 nav bar cần position relative để dropdown định vị đúng */
.layout-3 .vc-header-nav-bar {
  position: relative;
}

.site-header.has-shadow {
  box-shadow: var(--vc-shadow);
}

.site-header.has-border {
  border-bottom: 2px solid var(--vc-border);
}

.site-header.sticky-header {
  position: sticky;
  top: 0;
}

.site-header.sticky-header.is-scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, .13);
}

/* ── Header inner row ── */
.vc-header-inner {
  display: flex;
  align-items: center;
  height: var(--vc-hdr-h);
  gap: 20px;
}

/* ════════════════════════════════════════
   LOGO
   ════════════════════════════════════════ */
.vc-logo {
  flex-shrink: 0;
}

.vc-logo a {
  display: block;
  line-height: 0;
}

.vc-logo img {
  height: 52px;
  width: auto;
  display: block;
  max-width: var(--vc-logo-w);
}

.vc-logo-text strong {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: var(--vc-primary);
  line-height: 1.2;
}

.vc-logo-text span {
  display: block;
  font-size: 11px;
  color: #888;
}

/* ════════════════════════════════════════
   NAVIGATION BASE
   ════════════════════════════════════════ */
.vc-nav {
  display: flex;
  align-items: stretch;
}

.vc-menu {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vc-menu>li {
  position: relative;
  display: flex;
  align-items: center;
}

.vc-menu>li>a {
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--vc-hdr-h);
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vc-hdr-text);
  white-space: nowrap;
  position: relative;
  transition: color var(--vc-transition);
}

/* Caret arrow */
.vc-menu>li.menu-item-has-children>a::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 5px;
  position: relative;
  top: -1px;
  transition: transform var(--vc-transition);
}

.vc-menu>li.menu-item-has-children:hover>a::after {
  transform: rotate(-135deg);
}

/* ── Header Actions ── */
.vc-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

.vc-search-btn,
.vc-hamburger {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--vc-hdr-text);
  padding: 8px;
  border-radius: var(--vc-radius-sm);
  line-height: 0;
  transition: background var(--vc-transition), color var(--vc-transition);
}

.vc-search-btn:hover {
  background: color-mix(in srgb, var(--vc-primary) 12%, transparent);
  color: var(--vc-primary);
}

.vc-search-btn i {
  font-size: 17px;
}

.vc-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px 6px;
}

.vc-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--vc-hdr-text);
  border-radius: 2px;
  transition: all .22s;
}

.vc-hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.vc-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.vc-hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ════════════════════════════════════════
   LAYOUT 1 — Logo trái · Nav phải
   FIX: căn đều khoảng cách logo / nav / search
   ════════════════════════════════════════ */
.layout-1 .vc-header-inner {
  flex-direction: row;
}

.layout-1 .vc-nav {
  margin-left: auto;
}

.layout-1 .vc-header-actions {
  margin-left: 24px;
  flex-shrink: 0;
}

/* ════════════════════════════════════════
   LAYOUT 2 — Logo phải · Nav trái
   ════════════════════════════════════════ */
.layout-2 .layout-2-inner {
  flex-direction: row;
}

.layout-2 .vc-nav {
  margin-right: auto;
}

.layout-2 .vc-header-actions {
  margin-left: 24px;
  flex-shrink: 0;
}

.layout-2 .vc-logo {
  order: 3;
  flex-shrink: 0;
}

/* ════════════════════════════════════════
   LAYOUT 3 — Logo giữa · Nav hàng dưới
   ════════════════════════════════════════ */
.layout-3 .vc-header-logo-row {
  width: 100%;
}

.layout-3 .vc-header-logo-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  position: relative;
}

.layout-3 .vc-header-actions {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.layout-3 .vc-header-nav-bar {
  border-top: 1px solid var(--vc-border);
}

.layout-3 .vc-nav-center {
  display: flex;
  justify-content: center;
}

.layout-3 .vc-nav-center .vc-menu {
  justify-content: center;
}

.layout-3 .vc-nav-center .vc-menu>li>a {
  height: 46px;
}

/* ════════════════════════════════════════
   LAYOUT 4 — Topbar + Logo trái · Nav phải
   FIX: căn đều khoảng cách logo / nav / search
   ════════════════════════════════════════ */
.layout-4 .vc-header-inner {
  flex-direction: row;
}

.layout-4 .vc-nav {
  margin-left: auto;
}

.layout-4 .vc-header-actions {
  margin-left: 24px;
  flex-shrink: 0;
}

/* ════════════════════════════════════════
   LAYOUT 5 — Topbar + Logo giữa · Nav 2 bên (split)
   ════════════════════════════════════════ */
.layout-5 .vc-header-split {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: var(--vc-hdr-h);
}

.layout-5 .vc-nav-split-left,
.layout-5 .vc-nav-split-right {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
}

.layout-5 .vc-nav-split-left {
  justify-content: flex-end;
}

.layout-5 .vc-nav-split-right {
  justify-content: flex-start;
}

.layout-5 .vc-nav-split-left .vc-menu {
  justify-content: flex-end;
}

.layout-5 .vc-nav-split-right .vc-menu {
  justify-content: flex-start;
}

/* Logo giữa: không flex-grow, không shrink */
.layout-5 .vc-logo {
  flex: 0 0 auto;
  margin: 0 20px;
  display: flex;
  align-items: center;
}

.layout-5 .vc-header-actions {
  flex: 0 0 auto;
  margin-left: 12px;
}

/* ════════════════════════════════════════
   LAYOUT 6 — Menu 2 bên · Logo giữa (no topbar)
   ════════════════════════════════════════ */
.layout-6 .vc-header-split {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: var(--vc-hdr-h);
}

.layout-6 .vc-nav-split-left,
.layout-6 .vc-nav-split-right {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
}

.layout-6 .vc-nav-split-left {
  justify-content: flex-end;
}

.layout-6 .vc-nav-split-right {
  justify-content: flex-start;
}

.layout-6 .vc-nav-split-left .vc-menu {
  justify-content: flex-end;
}

.layout-6 .vc-nav-split-right .vc-menu {
  justify-content: flex-start;
}

/* Logo giữa: cố định, không bị ép */
.layout-6 .vc-logo {
  flex: 0 0 auto;
  margin: 0 20px;
  display: flex;
  align-items: center;
}

.layout-6 .vc-header-actions {
  flex: 0 0 auto;
  margin-left: 12px;
}

/* Split menu: JS sẽ chia items; show by default, JS hides extras */
.vc-menu-left>li,
.vc-menu-right>li {
  display: flex;
}

/* ════════════════════════════════════════
   NAV STYLE VARIANTS
   ════════════════════════════════════════ */
.vc-nav.nav-style-uppercase .vc-menu>li>a {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .6px;
}

.vc-nav.nav-style-rounded .vc-menu>li>a {
  border-radius: 20px;
  margin: 0 2px;
  padding: 0 16px;
}

.vc-nav.nav-style-spaced .vc-menu>li>a {
  padding: 0 20px;
}

.vc-nav.nav-style-pill .vc-menu>li>a {
  border-radius: 20px;
  padding: 6px 18px;
}

.vc-nav.nav-style-pill .vc-menu>li.current-menu-item>a {
  background: color-mix(in srgb, var(--vc-hover-clr) 12%, transparent);
  color: var(--vc-hover-clr);
}

/* ════════════════════════════════════════
   HOVER EFFECTS
   ════════════════════════════════════════ */

/* underline slide */
.vc-nav.nav-hover-underline .vc-menu>li>a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--vc-hover-clr);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--vc-transition);
}

.vc-nav.nav-hover-underline .vc-menu>li:hover>a::before,
.vc-nav.nav-hover-underline .vc-menu>li.current-menu-item>a::before {
  transform: scaleX(1);
}

.vc-nav.nav-hover-underline .vc-menu>li:hover>a,
.vc-nav.nav-hover-underline .vc-menu>li.current-menu-item>a {
  color: var(--vc-hover-clr);
}

/* color */
.vc-nav.nav-hover-color .vc-menu>li:hover>a,
.vc-nav.nav-hover-color .vc-menu>li.current-menu-item>a {
  color: var(--vc-hover-clr);
}

/* bg-fill */
.vc-nav.nav-hover-bg-fill .vc-menu>li>a {
  border-radius: var(--vc-radius-sm);
}

.vc-nav.nav-hover-bg-fill .vc-menu>li:hover>a,
.vc-nav.nav-hover-bg-fill .vc-menu>li.current-menu-item>a {
  background: var(--vc-hover-clr);
  color: #fff;
}

/* border-bottom */
.vc-nav.nav-hover-border-bottom .vc-menu>li>a {
  border-bottom: 2px solid transparent;
}

.vc-nav.nav-hover-border-bottom .vc-menu>li:hover>a,
.vc-nav.nav-hover-border-bottom .vc-menu>li.current-menu-item>a {
  border-color: var(--vc-hover-clr);
  color: var(--vc-hover-clr);
}

/* scale */
.vc-nav.nav-hover-scale .vc-menu>li>a {
  transition: transform .18s;
}

.vc-nav.nav-hover-scale .vc-menu>li:hover>a {
  transform: scale(1.07);
}

/* ════════════════════════════════════════
   DROPDOWN — Standard
   ════════════════════════════════════════ */
[data-dropdown="standard"] .vc-menu li {
  position: relative;
}

[data-dropdown="standard"] .vc-menu .sub-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 215px;
  background: var(--vc-submenu-bg);
  border: 1px solid var(--vc-border);
  border-top: 2px solid var(--vc-primary);
  border-radius: 0 0 var(--vc-radius) var(--vc-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
  list-style: none;
  padding: 8px 0;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}

[data-dropdown="standard"] .vc-menu li:hover>.sub-menu,
[data-dropdown="standard"] .vc-menu li:focus-within>.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

[data-dropdown="standard"] .vc-menu .sub-menu li a {
  display: block;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--vc-submenu-text);
  transition: background .15s, color .15s, padding-left .15s;
}

[data-dropdown="standard"] .vc-menu .sub-menu li a:hover {
  background: color-mix(in srgb, var(--vc-primary) 8%, transparent);
  color: var(--vc-primary);
  padding-left: 22px;
}

/* ════════════════════════════════════════
   MEGA MENU — Base shell (dùng chung)
   ════════════════════════════════════════ */
[data-dropdown="mega-cols"] .vc-menu>li,
[data-dropdown="mega-tabs"] .vc-menu>li,
[data-dropdown="mega-featured"] .vc-menu>li {
  position: static;
}

[data-dropdown="mega-cols"] .vc-menu>li>.sub-menu,
[data-dropdown="mega-tabs"] .vc-menu>li>.sub-menu,
[data-dropdown="mega-featured"] .vc-menu>li>.sub-menu {
  position: fixed;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, 96vw);
  max-width: 96vw;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--vc-submenu-bg);
  border-top: 3px solid var(--vc-primary);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 999;
  display: none;
  border-radius: 0 0 var(--vc-radius) var(--vc-radius);
}

[data-dropdown="mega-cols"] .vc-menu>li:hover>.sub-menu,
[data-dropdown="mega-tabs"] .vc-menu>li:hover>.sub-menu,
[data-dropdown="mega-featured"] .vc-menu>li:hover>.sub-menu {
  display: block;
}

/* Spinner */
.vc-mega-loading {
  padding: 32px 24px;
  font-size: 12px;
  color: #aaa;
  text-align: center;
}

.vc-mega-empty {
  padding: 40px 20px;
  font-size: 13px;
  color: #888;
  text-align: center;
}

@keyframes vcSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ════════════════════════════════════════
   MEGA-COLS — Panel nhiều cột, mỗi cột có
   heading category + grid bài viết bên dưới
   ════════════════════════════════════════ */
[data-dropdown="mega-cols"] .vc-menu>li>.sub-menu {
  display: none;
  padding: 0;
}

[data-dropdown="mega-cols"] .vc-menu>li:hover>.sub-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 24px;
  gap: 0;
}

/* Mỗi cột = 1 sub-menu > li */
[data-dropdown="mega-cols"] .vc-menu>li>.sub-menu>li {
  flex: 1;
  min-width: 180px;
  max-width: 260px;
  padding: 0 16px 16px;
  border-right: 1px solid var(--vc-border);
}

[data-dropdown="mega-cols"] .vc-menu>li>.sub-menu>li:last-child {
  border-right: none;
}

/* Heading của mỗi cột (link category) */
[data-dropdown="mega-cols"] .vc-menu>li>.sub-menu>li>a {
  display: block;
  padding: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--vc-primary);
  border-bottom: 2px solid var(--vc-primary);
  margin-bottom: 14px;
  text-decoration: none;
}

/* Sub-menu links gốc của WP (vẫn hiện trước khi AJAX load) */
[data-dropdown="mega-cols"] .vc-menu>li>.sub-menu>li>.sub-menu {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border: 0;
  padding: 0;
  background: transparent;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

[data-dropdown="mega-cols"] .vc-menu>li>.sub-menu>li>.sub-menu li a {
  padding: 4px 0;
  font-size: 13px;
  color: var(--vc-submenu-text);
  text-decoration: none;
  display: block;
  transition: color .15s, padding-left .15s;
}

[data-dropdown="mega-cols"] .vc-menu>li>.sub-menu>li>.sub-menu li a:hover {
  color: var(--vc-primary);
  padding-left: 5px;
}

/* Grid bài viết được inject bởi JS */
.vc-mega-cols-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}

.vc-mega-cols-grid .vc-mega-post-card--col {
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
}

.vc-mega-cols-grid .vc-mega-post-card--col .vc-mega-post-thumb {
  width: 72px;
  height: 56px;
  flex-shrink: 0;
  aspect-ratio: unset;
}

.vc-mega-cols-grid .vc-mega-post-card--col .vc-mega-post-title {
  font-size: 12.5px;
  -webkit-line-clamp: 2;
}

/* ════════════════════════════════════════
   MEGA-TABS — Tab sidebar trái + grid bài phải
   JS inject .vc-mega-tabs-wrap vào sub-menu
   ════════════════════════════════════════ */
[data-dropdown="mega-tabs"] .vc-menu>li>.sub-menu {
  min-height: 320px;
}

[data-dropdown="mega-tabs"] .vc-menu>li:hover>.sub-menu {
  display: block;
}

/* JS-injected wrapper */
.vc-mega-tabs-wrap {
  display: flex;
  min-height: 320px;
}

/* Tab list bên trái */
.vc-mega-tabs-list {
  width: 190px;
  flex-shrink: 0;
  background: #f8fafc;
  border-right: 1px solid var(--vc-border);
  list-style: none;
  margin: 0;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
}

/* Tab item */
.vc-mega-tab-item {
  position: relative;
  list-style: none;
}

.vc-mega-tab-item>a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 18px;
  border-left: 3px solid transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--vc-submenu-text);
  transition: background .15s, color .15s, border-color .15s;
  text-decoration: none;
  cursor: pointer;
}

.vc-mega-tab-item>a:hover,
.vc-mega-tab-item.is-active>a {
  background: #fff;
  color: var(--vc-primary);
  border-left-color: var(--vc-primary);
}

/* Ẩn sub-menu gốc trong tab (JS sẽ dùng pane thay thế) */
.vc-mega-tab-item>.sub-menu {
  display: none !important;
}

/* Pane bên phải — hiển thị grid bài */
.vc-mega-tabs-pane {
  flex: 1;
  padding: 20px 24px;
  overflow-y: auto;
  background: var(--vc-submenu-bg);
}

.vc-mega-tabs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  align-content: start;
}

/* ════════════════════════════════════════
   MEGA-FEATURED — Hero ảnh lớn + list bài
   JS inject .vc-mega-featured-wrap vào sub-menu > li
   ════════════════════════════════════════ */
[data-dropdown="mega-featured"] .vc-menu>li>.sub-menu {
  padding: 24px;
  min-height: 320px;
}

[data-dropdown="mega-featured"] .vc-menu>li:hover>.sub-menu {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Mỗi sub-item sẽ chứa .vc-mega-featured-wrap */
[data-dropdown="mega-featured"] .vc-menu>li>.sub-menu>li {
  flex: 1;
  min-width: 260px;
  list-style: none;
}

/* Ẩn link category heading gốc, JS sẽ render lại */
[data-dropdown="mega-featured"] .vc-menu>li>.sub-menu>li>a {
  display: none;
}

/* Ẩn sub-menu gốc */
[data-dropdown="mega-featured"] .vc-menu>li>.sub-menu>li>.sub-menu {
  display: none !important;
}

/* JS-injected featured wrap */
.vc-mega-featured-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 960px) {
  .vc-mega-featured-wrap {
    grid-template-columns: 280px 1fr;
    align-items: start;
  }
}

/* Hero ảnh lớn */
.vc-mega-featured-hero {
  display: block;
  text-decoration: none;
  border-radius: var(--vc-radius);
  overflow: hidden;
  position: relative;
}

.vc-mega-featured-hero-img {
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #f1f5f9;
}

.vc-mega-featured-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s;
}

.vc-mega-featured-hero:hover .vc-mega-featured-hero-img img {
  transform: scale(1.04);
}

.vc-mega-featured-hero-info {
  padding: 12px 4px 4px;
}

.vc-mega-featured-hero-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--vc-hdr-text);
  margin: 4px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vc-mega-featured-hero:hover .vc-mega-featured-hero-title {
  color: var(--vc-primary);
}

/* List bài phụ bên phải */
.vc-mega-featured-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vc-mega-featured-list li {
  border-bottom: 1px solid var(--vc-border);
}

.vc-mega-featured-list li:last-child {
  border-bottom: none;
}

.vc-mega-featured-list .vc-mega-post-card--featured-list {
  flex-direction: row;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-radius: 0;
}

.vc-mega-featured-list .vc-mega-post-card--featured-list .vc-mega-post-thumb {
  width: 64px;
  height: 50px;
  flex-shrink: 0;
  aspect-ratio: unset;
}

.vc-mega-featured-list .vc-mega-post-card--featured-list .vc-mega-post-title {
  font-size: 13px;
  -webkit-line-clamp: 2;
}

/* ════════════════════════════════════════
   POST CARD — dùng chung tất cả mega types
   ════════════════════════════════════════ */
.vc-mega-post-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-radius: var(--vc-radius-sm);
  overflow: hidden;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}

.vc-mega-post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}

.vc-mega-post-thumb {
  width: 100%;
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: var(--vc-radius-sm);
  background: #f1f5f9;
  flex-shrink: 0;
}

.vc-mega-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}

.vc-mega-post-card:hover .vc-mega-post-thumb img {
  transform: scale(1.05);
}

.vc-mega-post-info {
  padding: 0 2px 4px;
  min-width: 0;
}

.vc-mega-post-cat {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--vc-primary);
  background: color-mix(in srgb, var(--vc-primary) 10%, transparent);
  padding: 2px 7px;
  border-radius: 10px;
  margin-bottom: 4px;
}

.vc-mega-post-title {
  font-size: 13px;
  font-weight: 600;
  color: #000 !important;
  line-height: 1.4;
  margin: 0 0 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vc-mega-post-card:hover .vc-mega-post-title {
  color: var(--vc-primary);
}

.vc-mega-post-date {
  font-size: 11px;
  color: #aaa;
  display: block;
}

/* ════════════════════════════════════════
   DROPDOWN — Offcanvas (slide-in từ phải, desktop, click-based)
   ════════════════════════════════════════ */

/* ════════════════════════════════════════
   DROPDOWN — Offcanvas (slide-in từ phải, desktop, click-based)
   ════════════════════════════════════════ */
[data-dropdown="offcanvas"] .vc-menu>li {
  position: static;
}

/* Overlay mờ khi offcanvas dropdown mở */
.vc-nav-offcanvas-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 1040;
}

.vc-nav-offcanvas-overlay.is-open {
  display: block;
}

[data-dropdown="offcanvas"] .vc-menu>li>.sub-menu {
  position: fixed;
  top: 0;
  right: -400px;
  bottom: 0;
  width: 340px;
  max-width: 90vw;
  background: var(--vc-submenu-bg);
  box-shadow: -4px 0 32px rgba(0, 0, 0, .18);
  list-style: none;
  padding: 56px 0 20px;
  margin: 0;
  z-index: 1050;
  overflow-y: auto;
  display: block !important;
  transition: right .3s cubic-bezier(.4, 0, .2, 1);
  opacity: 1;
  visibility: visible;
  transform: none;
}

[data-dropdown="offcanvas"] .vc-menu>li>.sub-menu.is-open {
  right: 0;
}

/* Close button bên trong panel */
[data-dropdown="offcanvas"] .vc-menu>li>.sub-menu>.vc-oc-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: #888;
  padding: 6px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-dropdown="offcanvas"] .vc-menu>li>.sub-menu>.vc-oc-close:hover {
  color: var(--vc-primary);
}

/* Tiêu đề panel */
[data-dropdown="offcanvas"] .vc-menu>li>.sub-menu>.vc-oc-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--vc-submenu-text);
  border-bottom: 1px solid var(--vc-border);
  background: var(--vc-submenu-bg);
}

[data-dropdown="offcanvas"] .vc-menu>li>.sub-menu>li>a {
  display: block;
  padding: 13px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vc-submenu-text);
  border-bottom: 1px solid var(--vc-border);
  transition: background .15s, color .15s, padding-left .15s;
  text-decoration: none;
}

[data-dropdown="offcanvas"] .vc-menu>li>.sub-menu>li>a:hover {
  background: color-mix(in srgb, var(--vc-primary) 8%, transparent);
  color: var(--vc-primary);
  padding-left: 30px;
}

[data-dropdown="offcanvas"] .vc-menu>li>.sub-menu>li>.sub-menu {
  position: static;
  display: block;
  padding: 0;
  margin: 0;
  background: #f8fafc;
  list-style: none;
  box-shadow: none;
  border: none;
  opacity: 1;
  visibility: visible;
  transform: none;
}

[data-dropdown="offcanvas"] .vc-menu>li>.sub-menu>li>.sub-menu li a {
  display: block;
  padding: 9px 24px 9px 36px;
  font-size: 13px;
  color: #666;
  border-bottom: 1px solid var(--vc-border);
  transition: color .15s, background .15s;
  text-decoration: none;
}

[data-dropdown="offcanvas"] .vc-menu>li>.sub-menu>li>.sub-menu li a:hover {
  color: var(--vc-primary);
  background: #fff;
}

/* Posts mới nhất trong offcanvas panel */
.vc-oc-posts {
  padding: 12px 16px;
}

.vc-oc-posts-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--vc-primary);
  letter-spacing: .5px;
  padding: 8px 0 6px;
  border-bottom: 1px solid var(--vc-border);
  margin-bottom: 8px;
}

.vc-oc-post-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--vc-border);
  text-decoration: none;
  transition: background .15s;
}

.vc-oc-post-item:last-child {
  border-bottom: none;
}

.vc-oc-post-thumb {
  width: 52px;
  height: 40px;
  border-radius: var(--vc-radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: #f1f5f9;
}

.vc-oc-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vc-oc-post-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--vc-submenu-text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vc-oc-post-item:hover .vc-oc-post-title {
  color: var(--vc-primary);
}

/* Posts inject vào mega-cols */
[data-dropdown="mega-cols"] .vc-menu>li>.sub-menu>li>.sub-menu .vc-mega-post-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-radius: var(--vc-radius-sm);
  overflow: hidden;
  text-decoration: none;
  margin-bottom: 8px;
  transition: transform .15s;
}

[data-dropdown="mega-cols"] .vc-menu>li>.sub-menu>li>.sub-menu .vc-mega-post-card:hover {
  transform: translateY(-2px);
}

[data-dropdown="mega-cols"] .vc-menu>li>.sub-menu>li>.sub-menu .vc-mega-post-thumb {
  width: 100%;
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: var(--vc-radius-sm);
  background: #f1f5f9;
}

[data-dropdown="mega-cols"] .vc-menu>li>.sub-menu>li>.sub-menu .vc-mega-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

[data-dropdown="mega-cols"] .vc-menu>li>.sub-menu>li>.sub-menu .vc-mega-post-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--vc-submenu-text);
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[data-dropdown="mega-cols"] .vc-menu>li>.sub-menu>li>.sub-menu .vc-mega-post-card:hover .vc-mega-post-title {
  color: var(--vc-primary);
}

[data-dropdown="mega-cols"] .vc-menu>li>.sub-menu>li>.sub-menu .vc-mega-post-date {
  font-size: 11px;
  color: #888;
}

/* Posts inject vào mega-tabs sub-menu dạng grid */
[data-dropdown="mega-tabs"] .vc-menu>li>.sub-menu>li>.sub-menu .vc-mega-post-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  border-radius: var(--vc-radius-sm);
  overflow: hidden;
  transition: transform .15s;
}

[data-dropdown="mega-tabs"] .vc-menu>li>.sub-menu>li>.sub-menu .vc-mega-post-card:hover {
  transform: translateY(-2px);
}

[data-dropdown="mega-tabs"] .vc-menu>li>.sub-menu>li>.sub-menu .vc-mega-post-thumb {
  width: 100%;
  aspect-ratio: 3/2;
  background: #f1f5f9;
  border-radius: var(--vc-radius-sm);
  overflow: hidden;
}

[data-dropdown="mega-tabs"] .vc-menu>li>.sub-menu>li>.sub-menu .vc-mega-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

[data-dropdown="mega-tabs"] .vc-menu>li>.sub-menu>li>.sub-menu .vc-mega-post-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--vc-submenu-text);
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[data-dropdown="mega-tabs"] .vc-menu>li>.sub-menu>li>.sub-menu .vc-mega-post-card:hover .vc-mega-post-title {
  color: var(--vc-primary);
}

[data-dropdown="mega-tabs"] .vc-menu>li>.sub-menu>li>.sub-menu .vc-mega-post-date {
  font-size: 11px;
  color: #888;
}

/* Posts inject vào mega-featured */
[data-dropdown="mega-featured"] .vc-menu>li>.sub-menu>li>.sub-menu .vc-mega-post-card {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid var(--vc-border);
  transition: background .15s;
}

[data-dropdown="mega-featured"] .vc-menu>li>.sub-menu>li>.sub-menu .vc-mega-post-thumb {
  width: 60px;
  height: 46px;
  flex-shrink: 0;
  border-radius: var(--vc-radius-sm);
  overflow: hidden;
  background: #f1f5f9;
}

[data-dropdown="mega-featured"] .vc-menu>li>.sub-menu>li>.sub-menu .vc-mega-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

[data-dropdown="mega-featured"] .vc-menu>li>.sub-menu>li>.sub-menu .vc-mega-post-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--vc-submenu-text);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ════════════════════════════════════════
   SEARCH OVERLAY
   ════════════════════════════════════════ */
.vc-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .72);
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s, visibility .22s;
  backdrop-filter: blur(4px);
}

.vc-search-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.vc-search-inner {
  width: 100%;
  max-width: 640px;
  padding: 0 20px;
}

.vc-search-form {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: var(--vc-radius);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .25);
}

.vc-search-input {
  flex: 1;
  border: none;
  padding: 16px 20px;
  font-size: 17px;
  font-family: var(--vc-font);
  color: #222;
  outline: none;
  background: transparent;
}

.vc-search-submit,
.vc-search-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 18px;
  height: 56px;
  font-size: 18px;
  display: flex;
  align-items: center;
}

.vc-search-submit {
  color: var(--vc-primary);
}

.vc-search-close {
  color: #888;
  border-left: 1px solid var(--vc-border);
}

.vc-search-suggest {
  background: #fff;
  border-radius: var(--vc-radius);
  margin-top: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
  max-height: 380px;
  overflow-y: auto;
}

.vc-suggest-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--vc-border);
  text-decoration: none;
  color: #222;
  transition: background .15s;
}

.vc-suggest-item:last-child {
  border-bottom: none;
}

.vc-suggest-item:hover {
  background: color-mix(in srgb, var(--vc-primary) 8%, transparent);
}

.vc-suggest-thumb {
  width: 52px;
  height: 40px;
  border-radius: var(--vc-radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.vc-suggest-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vc-suggest-cat {
  font-size: 11px;
  color: var(--vc-primary);
  font-weight: 600;
  margin-bottom: 2px;
}

.vc-suggest-title {
  font-size: 13.5px;
  font-weight: 600;
}

/* Category suggest icon placeholder */
.vc-suggest-thumb--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--vc-primary) 10%, transparent);
  color: var(--vc-primary);
  font-size: 15px;
  width: 52px;
  height: 40px;
  border-radius: var(--vc-radius-sm);
  flex-shrink: 0;
}

/* Category suggest row highlight */
.vc-suggest-item--cat {
  background: color-mix(in srgb, var(--vc-primary) 4%, transparent);
}

.vc-suggest-item--cat .vc-suggest-cat {
  color: #888;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.vc-suggest-item--cat .vc-suggest-title {
  color: var(--vc-primary);
}

/* Sidebar suggest dropdown */
.vc-sidebar-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 9999;
  margin-top: 4px;
  border-radius: var(--vc-radius);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .14);
  background: #fff;
  max-height: 340px;
  overflow-y: auto;
}

/* ════════════════════════════════════════
   OFFCANVAS
   ════════════════════════════════════════ */
.vc-offcanvas-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 9998;
}

.vc-offcanvas-overlay.is-open {
  display: block;
}

.vc-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  max-width: 90vw;
  height: 100%;
  background: #fff;
  z-index: 9999;
  overflow-y: auto;
  box-shadow: -4px 0 24px rgba(0, 0, 0, .15);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
}

.vc-offcanvas.is-open {
  transform: translateX(0);
}

.vc-offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--vc-border);
  flex-shrink: 0;
}

.vc-offcanvas-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: #888;
  padding: 6px;
  line-height: 1;
}

.vc-offcanvas-body {
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
}

.vc-offcanvas-menu {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vc-offcanvas-menu>li>a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 600;
  color: #222;
  border-bottom: 1px solid var(--vc-border);
  transition: background .15s, color .15s;
}

.vc-offcanvas-menu>li>a:hover {
  background: #f8fafc;
  color: var(--vc-primary);
}

.vc-offcanvas-menu .sub-menu {
  display: none;
  flex-direction: column;
  background: #f8fafc;
  list-style: none;
  padding: 0;
  margin: 0;
}

.vc-offcanvas-menu>li.is-open>.sub-menu {
  display: flex;
}

.vc-offcanvas-menu .sub-menu li a {
  display: block;
  padding: 10px 32px;
  font-size: 13.5px;
  color: #555;
  border-bottom: 1px solid var(--vc-border);
  transition: color .15s, background .15s;
}

.vc-offcanvas-menu .sub-menu li a:hover {
  color: var(--vc-primary);
  background: #fff;
}

/* ════════════════════════════════════════
   MOBILE OVERLAY
   ════════════════════════════════════════ */
.vc-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 800;
}

.vc-mobile-overlay.is-open {
  display: block;
}

/* ════════════════════════════════════════
   RESPONSIVE — Tablet 960px
   ════════════════════════════════════════ */
@media (max-width: 960px) {

  /* Hiện hamburger, ẩn desktop nav */
  .vc-hamburger {
    display: flex;
  }

  .vc-nav {
    display: none !important;
  }

  /* ── Layout 1 & 4: Logo trái, actions phải ── */
  .layout-1 .vc-header-inner,
  .layout-4 .vc-header-inner {
    flex-direction: row;
    gap: 12px;
  }

  .layout-1 .vc-nav,
  .layout-4 .vc-nav {
    margin-left: 0;
  }

  .layout-1 .vc-header-actions,
  .layout-4 .vc-header-actions {
    margin-left: auto;
  }

  /* ── Layout 2: Logo phải, actions giữa ── */
  .layout-2 .vc-logo {
    order: unset;
  }

  .layout-2 .vc-header-inner {
    flex-direction: row;
  }

  .layout-2 .vc-header-actions {
    margin-left: auto;
  }

  /* ── Layout 3: Logo row giữa, hide nav bar ── */
  .layout-3 .vc-header-nav-bar {
    display: none;
  }

  .layout-3 .vc-header-logo-inner {
    justify-content: flex-start;
    gap: 12px;
    height: var(--vc-hdr-h);
  }

  .layout-3 .vc-header-actions {
    position: static;
    transform: none;
    margin-left: auto;
  }

  /* ── Layout 5 & 6: Split menu → logo trái, actions phải ── */
  .layout-5 .vc-header-split,
  .layout-6 .vc-header-split {
    flex-direction: row;
    justify-content: flex-start;
  }

  /* Ẩn cả 2 nav split */
  .layout-5 .vc-nav-split-left,
  .layout-5 .vc-nav-split-right,
  .layout-6 .vc-nav-split-left,
  .layout-6 .vc-nav-split-right {
    display: none !important;
  }

  /* Logo về trái */
  .layout-5 .vc-logo,
  .layout-6 .vc-logo {
    flex: 0 0 auto;
    margin: 0;
    order: 1;
  }

  /* Actions về phải */
  .layout-5 .vc-header-actions,
  .layout-6 .vc-header-actions {
    margin-left: auto;
    order: 2;
  }

  /* Tất cả dropdown panels ẩn trên mobile */
  .vc-menu>li>.sub-menu {
    display: none !important;
  }

  [data-dropdown="offcanvas"] .vc-menu>li>.sub-menu {
    display: none !important;
  }
}

/* ════════════════════════════════════════
   RESPONSIVE — Mobile 640px
   ════════════════════════════════════════ */
@media (max-width: 640px) {

  /* Header container gap nhỏ lại */
  .vc-header-inner {
    gap: 8px;
  }

  .vc-header-split {
    gap: 8px;
  }

  /* Logo nhỏ hơn */
  .vc-logo img {
    height: 42px;
  }

  /* Layout 5 & 6 mobile */
  .layout-5 .vc-logo img,
  .layout-6 .vc-logo img {
    height: 38px;
  }

  /* Search button nhỏ hơn */
  .vc-search-btn i {
    font-size: 15px;
  }

  /* Mega dropdown trên mobile: ẩn hoàn toàn */
  [data-dropdown="mega-cols"] .vc-menu>li>.sub-menu,
  [data-dropdown="mega-tabs"] .vc-menu>li>.sub-menu,
  [data-dropdown="mega-featured"] .vc-menu>li>.sub-menu {
    display: none !important;
  }
}

/* ════════════════════════════════════════
   RESPONSIVE — Small mobile 480px
   ════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Ẩn topbar trên màn nhỏ */
  .vc-topbar {
    display: none;
  }

  /* Header chiều cao nhỏ lại */
  :root {
    --vc-hdr-h: 58px;
  }

  /* Container padding nhỏ */
  .container {
    padding: 0 14px;
  }

  /* Offcanvas width đầy màn */
  .vc-offcanvas {
    width: 100%;
    max-width: 100vw;
    transform: translateX(100%);
  }

  /* Search overlay padding top nhỏ */
  .vc-search-overlay {
    padding-top: 56px;
  }

  .vc-search-input {
    font-size: 15px;
    padding: 14px 16px;
  }
}