/* NexaEsim design system — modern minimalist (Stripe/Linear-inspired).
   White canvas, hairline borders, small radius, one restrained indigo accent,
   no decorative gradients or heavy shadows. Applies site-wide: header, footer,
   product/blog/account pages, and the homepage sections below. */
:root {
  --nx26-ink: #0b0d12;
  --nx26-muted: #6b7280;
  --nx26-line: #e5e7eb;
  --nx26-canvas: #f9fafb;
  --nx26-surface: #fff;
  --nx26-soft: #eef2ff;
  --nx26-brand: #4f46e5;
  --nx26-brand-dark: #4338ca;
  --nx26-accent: #d97706;
  --nx26-accent-soft: #fffbeb;
  --nx26-focus: #4f46e5;
  --nx26-radius-sm: 6px;
  --nx26-radius: 10px;
  --nx26-radius-lg: 12px;
  --nx26-shadow: 0 4px 10px -4px rgba(11,13,18,.08);
  --nx26-shadow-hover: 0 8px 20px -6px rgba(11,13,18,.1);
}

html { background: var(--nx26-canvas); }
body {
  background: var(--nx26-canvas) !important;
  color: var(--nx26-ink) !important;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection { color: #fff; background: var(--nx26-brand); }
a { color: var(--nx26-brand); text-underline-offset: 3px; }
a:hover { color: var(--nx26-brand-dark); }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--nx26-focus) 55%, transparent); outline-offset: 2px; }
.container { width: min(100% - 32px, 1240px); max-width: 1240px !important; }

/* Minimal commerce header */
.topbar { display: none !important; }
.site-header {
  position: sticky !important;
  top: 0;
  z-index: 1040;
  background: rgba(255, 248, 220, .97) !important;
  border-bottom: 1px solid #fde68a !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-header.header-scrolled { box-shadow: var(--nx26-shadow) !important; }
.site-header .container,
.site-header .navbar,
.site-header .navbar-collapse,
.site-header .main-nav { background-color: transparent !important; }
.site-header .navbar { min-height: 68px !important; padding: 8px 0 !important; }
.brand-logo { flex: 0 0 auto; padding: 0 !important; }
.brand-logo img { width: 148px !important; height: auto !important; max-height: 42px !important; object-fit: contain; }
.main-nav { gap: 2px !important; align-items: center; }
.main-nav .nav-link {
  color: #374151 !important;
  background: transparent !important;
  border-radius: var(--nx26-radius-sm) !important;
  padding: 9px 12px !important;
  font-size: 14px !important;
  font-weight: 550 !important;
  line-height: 1.2;
}
.main-nav .nav-link i { color: #9ca3af; }
.main-nav .nav-link:hover,
.main-nav .nav-link.active,
.main-nav .show > .nav-link {
  color: var(--nx26-brand) !important;
  background: rgba(254, 243, 199, .9) !important;
}
.main-nav .nav-link:hover i,
.main-nav .nav-link.active i { color: var(--nx26-brand); }
/* Caret vốn được Bootstrap vẽ bằng border (dùng currentColor nên đã ăn theo màu chữ) —
   chỉ cần thêm chuyển động xoay khi dropdown mở để có phản hồi rõ ràng hơn.
   Dùng aria-expanded thay vì .show trên <li>: Bootstrap 5 chỉ gắn .show cho chính
   .dropdown-menu, không gắn lên phần tử cha .dropdown — chọn theo .show sẽ không bao giờ khớp. */
/* transform: rotate(0deg) tường minh (thay vì để ngầm định "none") — transition giữa
   "none" và rotate(180deg) nội suy không ổn định trên một số engine, để lại dư lượng
   translate sau khi đóng; hai đầu đều là rotate() thì nội suy thuần xoay, sạch sẽ. */
.main-nav .dropdown-toggle::after { transform: rotate(0deg); transition: transform .18s ease; }
.main-nav .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

/* Vạch phân tách nhẹ giữa menu điều hướng và cụm icon hành động — chỉ hiện ở desktop,
   giúp header đọc thành 2 nhóm rõ ràng thay vì một dải nút liền mạch. */
.nav-divider { display: none; }
@media (min-width: 992px) {
  .nav-divider { display: inline-block; width: 1px; height: 24px; margin: 0 4px 0 8px; background: #f5d77a; flex-shrink: 0; }
}

.header-actions { gap: 8px !important; align-items: center; }
/* Icon phụ trợ (tìm kiếm, giỏ hàng) dùng chung một kiểu nút vuông trung tính —
   trước đây nút giỏ hàng là pill đặc màu còn nút tìm kiếm là ô viền trắng, 2 trọng lượng
   thị giác khác nhau nằm sát nhau trông rối. Đưa cả hai về cùng một kiểu. */
.header-icon-btn {
  min-height: 40px;
  min-width: 40px;
  border: 1px solid #f3d77b !important;
  border-radius: var(--nx26-radius-sm) !important;
  background: rgba(255,255,255,.72) !important;
  color: #4b5563 !important;
  box-shadow: none !important;
}
.header-icon-btn:hover {
  border-color: var(--nx26-brand) !important;
  color: var(--nx26-brand) !important;
  background: var(--nx26-soft) !important;
}
.header-icon-btn .cart-count { font-size: 10px !important; padding: .3em .48em !important; }

/* Đăng nhập là hành động chính duy nhất trong cụm — tô đặc để nổi bật hơn hẳn
   các icon trung tính bên cạnh, thay vì cùng kiểu viền trắng như trước. */
.header-login-btn {
  min-height: 40px;
  border: 1px solid var(--nx26-brand) !important;
  border-radius: var(--nx26-radius-sm) !important;
  background: var(--nx26-brand) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.header-login-btn:hover {
  background: var(--nx26-brand-dark) !important;
  border-color: var(--nx26-brand-dark) !important;
}
.navbar-toggler { width: 40px; height: 40px; border-radius: var(--nx26-radius-sm) !important; background: var(--nx26-soft) !important; transition: background .15s ease; }
.navbar-toggler:hover { background: #e0e7ff !important; }

/* Destination mega menu */
.main-nav .dropdown-menu,
.mega-menu {
  margin-top: 8px !important;
  padding: 16px !important;
  border: 1px solid var(--nx26-line) !important;
  border-radius: var(--nx26-radius-lg) !important;
  background: #fff !important;
  box-shadow: var(--nx26-shadow-hover) !important;
}
/* site-pro.css định nghĩa .mega-menu.mega-menu--wide (2 class, specificity 0,2,0) cho width/
   max-height — cao hơn .mega-menu--wide đứng một mình (0,1,0) ở đây, nên trước giờ rule width
   980px này chưa bao giờ thắng: kích thước thật vẫn là 1120px của site-pro. Khớp lại selector
   2-class để nx26 (load sau) thắng theo đúng thứ tự nạp. */
.mega-menu.mega-menu--wide {
  width: min(1320px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 100px) !important;
  overflow-y: auto !important;
}
/* Bug có sẵn: Bootstrap định nghĩa .navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}
   (3 class, specificity 0,3,0) — cao hơn .mega-menu.mega-menu--wide{position:fixed;...} ở
   _Layout.cshtml (0,2,0), nên rule căn giữa bằng position:fixed chưa từng thắng thật sự; menu
   luôn rơi về absolute-positioning mặc định neo theo link kích hoạt. Ở bề rộng cũ (980–1120px)
   độ lệch không đủ để tràn khỏi màn hình nên không lộ ra; mở rộng lên 1320px thì lộ rõ menu bị
   đẩy che khuất bên trái. Ép !important để thắng bất kể specificity của Bootstrap. */
@media (min-width: 992px) {
  .mega-menu.mega-menu--wide {
    position: fixed !important;
    /* .topbar bị ẩn (display:none) trong hệ thiết kế mới nhưng biến --topbar-h vẫn còn giá
       trị cũ — không cộng vào đây nữa để khoảng cách dưới header không bị thừa. */
    top: calc(var(--header-h, 68px) + 6px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}
.mm-header { padding: 4px 4px 14px !important; border-bottom: 1px solid var(--nx26-line) !important; }
.mm-kicker { color: var(--nx26-brand) !important; }
.mm-view-all { color: var(--nx26-brand) !important; background: var(--nx26-soft) !important; border-radius: var(--nx26-radius-sm) !important; }
.mm-popular { margin: 12px 0 !important; padding: 10px !important; border-radius: var(--nx26-radius-sm) !important; background: var(--nx26-canvas) !important; }
.mm-popular a,
.mm-item,
.dropdown-item { border-radius: var(--nx26-radius-sm) !important; }
.mm-popular a:hover,
.mm-item:hover,
.dropdown-item:hover { color: var(--nx26-brand) !important; background: var(--nx26-soft) !important; }
.mm-title { color: var(--nx26-ink) !important; }
/* site-pro.css (older override layer, still loaded) paints a decorative multi-colour
   gradient stripe + gradient hover on the CTA bar — kill both so the mega menu reads
   as one flat, single-accent system. */
.mega-menu.mega-menu--wide:before { display: none !important; }
.mega-menu .mm-cta,
.mega-menu .mm-cta:hover { background: var(--nx26-brand-dark) !important; }

/* The country list read as a dense, cramped wall of text (36px rows, ~2px gap) —
   give each row real breathing room and a defined flag chip so scanning 40+
   destinations feels smooth instead of rough. */
/* Cột Châu Á/Châu Âu có 12 quốc gia xếp 1 cột dọc khiến cả mega-menu cao gần 900px, tràn quá
   nửa màn hình — trong khi 2 cột Châu Mỹ/Châu Đại Dương ngắn hơn nhiều để lại khoảng trắng lớn
   phía dưới, rất lệch. Xếp 2 quốc gia/hàng để giảm chiều cao ~một nửa và cân bằng 4 cột hơn. */
.mega-menu .mm-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 3px 10px !important; }
.mega-menu .mm-item {
  min-height: 42px !important;
  min-width: 0 !important;
  padding: 9px 8px !important;
  gap: .5rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: background .15s ease, color .15s ease, transform .15s ease !important;
}
.mega-menu .mm-item .fi { box-shadow: 0 0 0 1px rgba(11,13,18,.08); border-radius: 3px !important; }

/* Smooth entrance instead of an instant snap-open */
.dropdown-menu-soft.show,
.dd-menu.show { animation: nx26DdSlide .16s cubic-bezier(.2,.8,.2,1); }
.mega-menu.show { animation: nx26DdFade .16s ease; }
@keyframes nx26DdSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nx26DdFade { from { opacity: 0; } to { opacity: 1; } }

/* Compact utility dropdowns (Hướng dẫn / Hỗ trợ) — small context header + optional
   highlighted hotline row, so they read as considered as the destination mega menu. */
.dd-menu { padding: 6px !important; min-width: 280px !important; }
.dd-head { padding: 8px 10px 12px !important; margin-bottom: 4px; border-bottom: 1px solid var(--nx26-line); }
.dd-head .dd-kicker { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--nx26-brand); margin-bottom: 3px; }
.dd-head strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--nx26-ink); letter-spacing: -.01em; }
.dd-head small { display: block; font-size: 12px; color: var(--nx26-muted); margin-top: 2px; }
.dd-hotline {
  display: flex; align-items: center; gap: 10px;
  padding: 10px !important; margin: 2px 0 6px;
  border-radius: var(--nx26-radius-sm) !important;
  background: var(--nx26-soft) !important;
  text-decoration: none;
}
.dd-hotline:hover { background: #e0e7ff !important; }
.dd-hotline-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  background: var(--nx26-brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
.dd-hotline strong { display: block; font-size: 15px; font-weight: 700; color: var(--nx26-ink); }
.dd-hotline small { display: block; font-size: 11.5px; color: var(--nx26-muted); }

/* Page canvas */
.page-shell { padding: 0 !important; }
.page-shell--full,
.page-shell--two-col { width: 100% !important; max-width: none !important; display: block !important; }
.shell-main { min-width: 0; }
.page-shell--two-col > .shell-main { width: 100%; }
main > section:first-child:not(.hp-hero),
main > .container:first-child { scroll-margin-top: 84px; }

/* Shared typography and controls */
h1, h2, h3, h4, h5, h6 { color: var(--nx26-ink); letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.12; }
h2 { line-height: 1.16; }
.text-muted { color: var(--nx26-muted) !important; }
.btn {
  border-radius: var(--nx26-radius-sm) !important;
  min-height: 40px;
  padding: .6rem 1.05rem;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.btn-primary,
.btn-success {
  border-color: var(--nx26-brand) !important;
  background: var(--nx26-brand) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-success:hover { border-color: var(--nx26-brand-dark) !important; background: var(--nx26-brand-dark) !important; }
.btn-outline-primary {
  --bs-btn-color: var(--nx26-brand);
  --bs-btn-border-color: var(--nx26-line);
  --bs-btn-hover-bg: var(--nx26-brand);
  --bs-btn-hover-border-color: var(--nx26-brand);
}
.btn-link { color: var(--nx26-brand) !important; }
.form-control,
.form-select {
  min-height: 44px;
  border: 1px solid var(--nx26-line) !important;
  border-radius: var(--nx26-radius-sm) !important;
  background-color: #fff !important;
  color: var(--nx26-ink) !important;
  box-shadow: none !important;
}
.form-control:focus,
.form-select:focus { border-color: var(--nx26-brand) !important; box-shadow: 0 0 0 3px rgba(79,70,229,.12) !important; }
.card {
  border: 1px solid var(--nx26-line) !important;
  border-radius: var(--nx26-radius) !important;
  background: var(--nx26-surface) !important;
  box-shadow: none !important;
}
.card:hover { border-color: #c7d2fe !important; }
.badge { border-radius: var(--nx26-radius-sm); padding: .42em .65em; }
.bg-primary { background-color: var(--nx26-brand) !important; }
.text-primary { color: var(--nx26-brand) !important; }
.alert { border: 1px solid var(--nx26-line) !important; border-radius: var(--nx26-radius) !important; }
.breadcrumb { font-size: 13px; }
.pagination { gap: 4px; }
.page-link { min-width: 34px; border-radius: var(--nx26-radius-sm) !important; border: 1px solid transparent !important; color: var(--nx26-ink) !important; text-align: center; }
.page-item.active .page-link { color: #fff !important; background: var(--nx26-brand) !important; }

/* Homepage: focused store search, calm sections, destination cards */
.home-pro { background: var(--nx26-canvas) !important; }
.home-pro .hp-hero {
  min-height: auto !important;
  padding: clamp(56px, 7vw, 92px) 0 64px !important;
  overflow: hidden;
  background: var(--nx26-canvas) !important;
}
/* Trước đây .hp-hero-orb bị display:none — hero là 2 khối chữ/nền phẳng tuyệt đối,
   không có chiều sâu. Bật lại làm 2 quầng gradient mờ, trôi rất chậm, để tạo không khí
   mà không làm rối nội dung (chữ luôn nằm trên nhờ overflow:hidden + DOM order). */
.hp-hero-orb {
  display: block !important;
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .6;
  pointer-events: none;
}
.hp-hero-orb--one { width: 440px; height: 440px; top: -180px; right: -100px; background: radial-gradient(circle at 30% 30%, #a5b4fc, transparent 70%); animation: nx26OrbFloat 16s ease-in-out infinite; }
.hp-hero-orb--two { width: 340px; height: 340px; bottom: -160px; left: -80px; background: radial-gradient(circle at 60% 40%, #c4b5fd, transparent 70%); animation: nx26OrbFloat 20s ease-in-out infinite reverse; }
@keyframes nx26OrbFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(24px, -28px) scale(1.08); } }
.hp-eyebrow,
.hp-kicker { color: var(--nx26-brand) !important; }
.hp-eyebrow { border: 1px solid var(--nx26-line) !important; background: linear-gradient(90deg, #eef2ff, #fff) !important; }
.hp-title { max-width: 720px; color: var(--nx26-ink) !important; font-size: clamp(2.1rem, 4.4vw, 3.4rem) !important; line-height: 1.1 !important; letter-spacing: -.03em !important; }
/* Điểm nhấn gradient trên cụm chữ chính thay vì 1 màu phẳng — tín hiệu "hiện đại" rõ và rẻ nhất. */
.hp-title span {
  background: linear-gradient(90deg, var(--nx26-brand), #7c3aed) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.hp-lead { max-width: 620px !important; color: var(--nx26-muted) !important; font-size: 17px !important; }
.hp-search { max-width: 640px !important; margin-top: 26px !important; }
.hp-search-label { color: var(--nx26-ink) !important; font-weight: 600 !important; }
.hp-searchbox {
  min-height: 56px;
  padding: 5px 5px 5px 16px !important;
  border: 1px solid #d1d5db !important;
  border-radius: var(--nx26-radius) !important;
  background: #fff !important;
  box-shadow: none !important;
}
.hp-searchbox:focus-within { border-color: var(--nx26-brand) !important; box-shadow: 0 0 0 3px rgba(79,70,229,.12) !important; }
.hp-searchbox input { color: var(--nx26-ink) !important; font-size: 15px !important; }
.hp-searchbox .btn { min-height: 44px; padding-inline: 18px !important; }
.hp-results { border: 1px solid var(--nx26-line) !important; border-radius: var(--nx26-radius) !important; box-shadow: var(--nx26-shadow-hover) !important; }
.hp-result:hover { color: var(--nx26-brand) !important; background: var(--nx26-soft) !important; }
.hp-trust { color: #374151 !important; }
.hp-trust i { color: var(--nx26-brand) !important; }
.hp-corp { border-color: var(--nx26-line) !important; background: #fff !important; }
/* Thẻ lộ trình là tiêu điểm thị giác của hero — bóng đổ màu thương hiệu thay vì bóng xám
   trung tính giúp nó "nổi" khỏi nền thay vì chỉ đứng cạnh nền. */
.hp-route-card {
  border: 1px solid var(--nx26-line) !important;
  border-radius: var(--nx26-radius-lg) !important;
  box-shadow: 0 24px 48px -22px rgba(79, 70, 229, .35), 0 6px 16px -6px rgba(11, 13, 18, .08) !important;
}
.hp-plan-card { background: linear-gradient(135deg, #0b0d12, #211c4f) !important; }
.hp-live { color: var(--nx26-brand) !important; background: var(--nx26-soft) !important; }
.home-pro .hp-section { padding: clamp(56px, 7vw, 88px) 0 !important; }
/* Dải "soft" trước là 1 mảng xám phẳng tuyệt đối — thêm 2 quầng gradient rất nhạt để có
   chiều sâu nhẹ mà vẫn giữ nền tổng thể trung tính, không phá vỡ tính "thương mại nghiêm túc". */
.home-pro .hp-soft {
  background:
    radial-gradient(640px 320px at 12% 0%, rgba(99, 102, 241, .07), transparent 70%),
    radial-gradient(560px 300px at 100% 100%, rgba(168, 85, 247, .06), transparent 70%),
    var(--nx26-canvas) !important;
}
.home-pro .hp-heading { color: var(--nx26-ink) !important; font-size: clamp(1.65rem, 3.2vw, 2.5rem) !important; }
.home-pro .hp-sub { color: var(--nx26-muted) !important; }
/* Gạch ngang trước hp-kicker vốn là 1px phẳng màu brand — đổi sang gradient 2px cho đồng bộ
   với điểm nhấn gradient của hero, và làm mốc thị giác mở đầu mỗi section rõ hơn. */
.home-pro .hp-kicker:before { height: 2px !important; background: linear-gradient(90deg, var(--nx26-brand), #a855f7) !important; }
.home-pro .hp-dest {
  padding: 18px !important;
  border: 1px solid var(--nx26-line) !important;
  border-radius: var(--nx26-radius) !important;
  background: #fff !important;
  box-shadow: none !important;
}
.home-pro .hp-dest:before { display: none !important; }
.home-pro .hp-dest:hover {
  border-color: #c7d2fe !important;
  box-shadow: 0 16px 32px -18px rgba(79, 70, 229, .32) !important;
  transform: translateY(-2px) !important;
}
.home-pro .hp-dest h3 { color: var(--nx26-ink) !important; }
.home-pro .hp-dest .arrow { color: var(--nx26-brand) !important; background: var(--nx26-soft) !important; }
.home-pro .hp-feature-icon { color: var(--nx26-brand) !important; background: var(--nx26-soft) !important; box-shadow: none !important; }
.home-pro .hp-step { border: 1px solid var(--nx26-line) !important; background: #fff !important; backdrop-filter: none !important; }
.home-pro .hp-step:before { color: #fff !important; background: var(--nx26-brand) !important; box-shadow: 0 0 0 4px #fff !important; }
/* .hp-heading dùng chung màu --nx26-ink (gần đen) cho mọi section — nhưng thẻ calculator
   lại bị ép nền đen (--nx26-ink) ở dưới đây, nên tiêu đề vô hình (đen trên đen). Đổi màu
   chữ sang trắng riêng cho card tối này, đồng thời thêm gradient nhẹ cho đỡ phẳng. */
.home-pro .hp-calculator { background: linear-gradient(135deg, #0b0d12, #1e1b4b) !important; }
.home-pro .hp-calculator-copy .hp-heading { color: #fff !important; }
.home-pro .hp-calculator p { color: #c7cad4 !important; }
/* Icon tròn dùng chung trong Info card / Guide step / Region link — trước là hình tròn nền
   tint phẳng 1 màu, đổi sang khối gradient đặc + icon trắng để làm điểm neo thị giác mạnh
   hơn cho mỗi card, đúng ngôn ngữ "premium SaaS" thay vì phẳng đơn sắc. */
.home-pro .hp-info-icon,
.home-pro .hp-flight-badge,
.home-pro .hp-region-link-icon {
  background: linear-gradient(135deg, var(--nx26-brand), #7c3aed) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px -8px rgba(79, 70, 229, .5) !important;
}
/* Flight-path badges sit on top of a dashed connector line — layer a ring matching the
   section canvas on top of the shared icon-circle shadow so the line reads as "passing
   behind" the badge instead of touching it. */
.home-pro .hp-flight-badge {
  box-shadow: 0 0 0 8px var(--nx26-canvas), 0 8px 18px -8px rgba(79, 70, 229, .5) !important;
}
.home-pro .hp-info-card:hover { box-shadow: 0 18px 36px -20px rgba(79, 70, 229, .3) !important; }
.home-pro .hp-region-link:hover { box-shadow: 0 12px 26px -16px rgba(79, 70, 229, .28) !important; }
.home-pro .hp-entity { box-shadow: 0 16px 36px -24px rgba(11, 13, 18, .16) !important; }
.home-pro .hp-faq-list summary:hover { color: var(--nx26-brand) !important; }
/* Đăng nhập/CTA chính trên trang chủ đổi sang gradient + glow thay vì phẳng 1 màu — chỉ áp
   dụng trong .home-pro để không ảnh hưởng nút primary ở các trang khác (giỏ hàng, checkout...). */
.home-pro .btn-primary,
.home-pro .btn-success {
  background: linear-gradient(135deg, var(--nx26-brand), #6d28d9) !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px -12px rgba(79, 70, 229, .55) !important;
}
.home-pro .btn-primary:hover,
.home-pro .btn-success:hover {
  background: linear-gradient(135deg, var(--nx26-brand-dark), #5b21b6) !important;
  box-shadow: 0 12px 28px -10px rgba(79, 70, 229, .6) !important;
}
#top-esim-packages { background: var(--nx26-canvas) !important; }
#top-esim-packages .esim-card { border-radius: var(--nx26-radius) !important; background: #fff !important; }
/* Package cards render a per-item inline rainbow gradient (GetGradientStyle()) — flatten to
   one solid tone so the storefront reads as a single system, not a mixed palette. */
.esim-card-header { background: var(--nx26-ink) !important; }

/* Product, blog and account pages inherit one visual language */
.pd-page,
.blog-page,
.blog-detail,
.account-page,
.checkout-page { color: var(--nx26-ink); }
.product-card,
.plan-card,
.pd-card,
.blog-card { border-radius: var(--nx26-radius) !important; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--nx26-ink); }
.table > :not(caption) > * > * { padding: .9rem .8rem; border-bottom-color: var(--nx26-line); }
.modal-content { border: 1px solid var(--nx26-line) !important; border-radius: var(--nx26-radius-lg) !important; box-shadow: var(--nx26-shadow-hover) !important; }
.accordion-item { overflow: hidden; border: 1px solid var(--nx26-line) !important; border-radius: var(--nx26-radius-sm) !important; background: #fff; }
.accordion-button { color: var(--nx26-ink) !important; background: #fff !important; font-weight: 600; }
.accordion-button:not(.collapsed) { color: var(--nx26-brand) !important; box-shadow: inset 0 -1px 0 var(--nx26-line); }

/* Floating support becomes a quiet vertical utility */
.float-contacts { right: 18px !important; bottom: 22px !important; gap: 8px !important; }
.float-contacts a {
  width: 44px !important;
  height: 44px !important;
  border: 1px solid var(--nx26-line) !important;
  border-radius: 50% !important;
  color: var(--nx26-brand) !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: var(--nx26-shadow) !important;
}
.float-contacts a:hover { color: #fff !important; background: var(--nx26-brand) !important; }

/* Light, information-first footer */
.site-footer {
  margin-top: 0 !important;
  padding-top: 56px !important;
  color: #36556f !important;
  background: #eaf6ff !important;
  border-top: 1px solid #bfdbfe !important;
}
.site-footer .ft-trust {
  margin-bottom: 48px !important;
  padding-bottom: 32px !important;
  border-bottom: 1px solid #bfdbfe !important;
  border-top: 0 !important;
}
.site-footer .ft-trust-item { padding: 0 !important; border: 0 !important; background: transparent !important; }
.site-footer .ft-trust-icon { color: #0369a1 !important; background: rgba(255,255,255,.78) !important; border-color: #bae6fd !important; }
.site-footer .ft-trust-item strong,
.site-footer h2,
.site-footer h5 { color: #0c4a6e !important; }
.site-footer .ft-trust-item small,
.site-footer p,
.site-footer ul li a,
.site-footer .ft-contact-item,
.site-footer .ft-bottom { color: #52718a !important; }
.site-footer a { color: #285674 !important; }
.site-footer a:hover { color: #0369a1 !important; }
.site-footer .ft-social a { color: #0369a1 !important; background: rgba(255,255,255,.82) !important; border: 1px solid #bae6fd; }
.site-footer .ft-bottom { border-top-color: #bfdbfe !important; }
.site-footer .pay-pill { color: #285674 !important; background: rgba(255,255,255,.82) !important; border-color: #bae6fd !important; }
.site-footer .ft-wordmark { color: rgba(3,105,161,.08) !important; }

@media (max-width: 991.98px) {
  .site-header .navbar { min-height: 64px !important; }
  .site-header .navbar-collapse {
    position: fixed;
    inset: 65px 12px auto;
    max-height: calc(100vh - 80px) !important;
    padding: 12px !important;
    overflow-y: auto;
    border: 1px solid var(--nx26-line) !important;
    border-radius: var(--nx26-radius) !important;
    background: #fff8dc !important;
    border-color: #fde68a !important;
    box-shadow: var(--nx26-shadow-hover);
  }
  .site-header .navbar-collapse .main-nav {
    background: transparent !important;
  }
  .site-header .navbar-collapse .main-nav .nav-link {
    color: #243447 !important;
    -webkit-text-fill-color: #243447 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .site-header .navbar-collapse .main-nav .nav-link i,
  .site-header .navbar-collapse .main-nav .dropdown-toggle::after {
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
  }
  .site-header .navbar-collapse .main-nav .nav-link:hover,
  .site-header .navbar-collapse .main-nav .nav-link.active,
  .site-header .navbar-collapse .main-nav .nav-link[aria-expanded="true"] {
    color: #1d4ed8 !important;
    -webkit-text-fill-color: #1d4ed8 !important;
  }
  .site-header .navbar-collapse .dropdown-menu {
    background-color: #fffdf5 !important;
  }
  .site-header .navbar-collapse .dropdown-item,
  .site-header .navbar-collapse .mm-title,
  .site-header .navbar-collapse .mm-item,
  .site-header .navbar-collapse .mm-header strong,
  .site-header .navbar-collapse .mm-header small {
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
    opacity: 1 !important;
  }
  .main-nav { align-items: stretch !important; gap: 0 !important; }
  .main-nav .nav-item { border-bottom: 1px solid var(--nx26-line); }
  .main-nav .nav-item:last-child { border-bottom: 0; }
  .main-nav .nav-link { padding: 13px 6px !important; border-radius: 0 !important; font-size: 15px !important; }
  .main-nav .nav-link:hover,
  .main-nav .nav-link.active,
  .main-nav .show > .nav-link { background: transparent !important; }
  .main-nav .dropdown-menu,
  .mega-menu { width: 100% !important; max-width: 100% !important; margin-top: 4px !important; padding: 10px !important; border-radius: var(--nx26-radius-sm) !important; box-shadow: none !important; }
  .mm-columns { grid-template-columns: 1fr !important; }
  /* 2 cột quốc gia hợp lý ở desktop nhưng chật/khó chạm trên mobile — giữ 1 cột full-width
     cho dễ bấm, vì mobile không bị áp lực chiều cao (menu cuộn theo trang, không phải panel nổi).
     Phải khớp specificity với rule ".mega-menu .mm-grid" (2 class) ở trên — chỉ ".mm-grid" một
     mình (1 class) sẽ thua dù đứng sau, vì thứ tự chỉ phân định khi specificity bằng nhau. */
  .mega-menu .mm-grid { grid-template-columns: 1fr !important; }
  /* Nhóm cụm search/giỏ hàng/đăng nhập thành một hàng riêng bên dưới danh sách menu,
     có vạch phân tách để không bị đọc lẫn vào các mục điều hướng phía trên. */
  .header-actions {
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--nx26-line) !important;
    justify-content: flex-end !important;
  }
  .nav-divider { display: none !important; }
  .home-pro .hp-hero { padding-top: 48px !important; }
  .hp-title { font-size: clamp(1.9rem, 8vw, 3rem) !important; }
  .hp-visual { margin-top: 8px !important; }
}

@media (max-width: 575.98px) {
  /* Mobile: khong thu hep width va padding cung luc.
     Bootstrap can gutter 12px de cac .row/.col can thang, vi vay container
     chi can full width voi padding 12px moi ben. */
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .brand-logo img { width: 128px !important; }
  .hp-searchbox { min-height: 52px; padding-left: 14px !important; }
  .hp-searchbox .btn { width: 46px; min-width: 46px; padding: 0 !important; }
  .hp-searchbox .btn span { display: none; }
  .home-pro .hp-section { padding: 48px 0 !important; }
  .float-contacts { right: 12px !important; bottom: 14px !important; }
  .float-contacts a { width: 40px !important; height: 40px !important; }
  .site-footer { padding-top: 40px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}