/* 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, 255, 255, .96) !important;
  border-bottom: 1px solid var(--nx26-line) !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 .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: var(--nx26-soft) !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: var(--nx26-line); 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 var(--nx26-line) !important;
  border-radius: var(--nx26-radius-sm) !important;
  background: #fff !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;
}
.mega-menu--wide { width: min(980px, calc(100vw - 32px)) !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. */
.mega-menu .mm-grid { gap: 3px !important; }
.mega-menu .mm-item {
  min-height: 42px !important;
  padding: 9px 10px !important;
  gap: .6rem !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;
}
.hp-hero-orb { display: none !important; }
.hp-eyebrow,
.hp-kicker { color: var(--nx26-brand) !important; }
.hp-eyebrow { border: 1px solid var(--nx26-line) !important; background: #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; }
.hp-title span { color: var(--nx26-brand) !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; }
.hp-route-card { border: 1px solid var(--nx26-line) !important; border-radius: var(--nx26-radius) !important; box-shadow: var(--nx26-shadow) !important; }
.hp-plan-card { background: var(--nx26-ink) !important; }
.hp-live { color: var(--nx26-brand) !important; background: var(--nx26-soft) !important; }
.home-pro .hp-section { padding: clamp(56px, 7vw, 88px) 0 !important; }
.home-pro .hp-soft { background: 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; }
.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: none !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; }
.home-pro .hp-calculator { background: var(--nx26-ink) !important; }
#top-esim-packages,
#latest-news { background: var(--nx26-canvas) !important; }
#top-esim-packages .esim-card,
#latest-news .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,
.news-card .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: #4b5563 !important;
  background: var(--nx26-canvas) !important;
  border-top: 1px solid var(--nx26-line) !important;
}
.site-footer .ft-trust {
  margin-bottom: 48px !important;
  padding-bottom: 32px !important;
  border-bottom: 1px solid var(--nx26-line) !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: var(--nx26-brand) !important; background: #fff !important; border-color: var(--nx26-line) !important; }
.site-footer .ft-trust-item strong,
.site-footer h2,
.site-footer h5 { color: var(--nx26-ink) !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: #6b7280 !important; }
.site-footer a { color: #4b5563 !important; }
.site-footer a:hover { color: var(--nx26-brand) !important; }
.site-footer .ft-social a { color: var(--nx26-brand) !important; background: #fff !important; border: 1px solid var(--nx26-line); }
.site-footer .ft-bottom { border-top-color: var(--nx26-line) !important; }
.site-footer .pay-pill { color: #4b5563 !important; background: #fff !important; border-color: var(--nx26-line) !important; }
.site-footer .ft-wordmark { color: rgba(79,70,229,.06) !important; }

@media (max-width: 991.98px) {
  .site-header .navbar { min-height: 64px !important; }
  .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: #fff !important;
    box-shadow: var(--nx26-shadow-hover);
  }
  .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; }
  /* 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) {
  .container { width: min(100% - 24px, 1240px); }
  .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; }
}