/* ==========================================================================
   PiPo Horizon Group - Official Pixel-Perfect 1:1 Stylesheet
   Faithful recreation of home.jpg
   ========================================================================== */

:root {
  /* Exact Colors from home.jpg */
  --bg-ocean-top: #001a47;
  --bg-ocean-hero: #0088cc;
  --bg-ocean-mid: #0266b3;
  --bg-ocean-deep: #00183b;
  --bg-footer: #001129;
  
  --color-gold-text: #f59e0b;
  --color-gold-gradient: linear-gradient(180deg, #ffe066 0%, #f59e0b 100%);
  --color-blue-title: #005bb5;
  --color-text-dark: #0f172a;
  --color-text-body: #334155;
  --color-text-muted: #64748b;
  --color-text-light: #e2e8f0;
  
  /* Fonts */
  /* Outfit không có bộ ký tự tiếng Việt — Be Vietnam Pro đứng ngay sau để
     hứng các chữ có dấu (ở, ồ, ế, ạ…) bằng một font sans hình học tương đồng.
     Muốn toàn bộ tiêu đề dùng một font duy nhất: bỏ 'Outfit', đi. */
  --font-heading: 'Outfit', 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 9999px;
  
  --shadow-card: 0 10px 30px rgba(0, 40, 100, 0.15);
  --shadow-subtle: 0 4px 15px rgba(0, 0, 0, 0.06);
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background-color: #001129;
  /* Trình duyệt cũ dùng dòng url() này; trình duyệt hiểu image-set()
     sẽ ghi đè và lấy bản WebP nhẹ hơn khoảng 25%. */
  background-image: url('bg1.jpeg');
  background-image: -webkit-image-set(url('bg1.webp') type('image/webp'), url('bg1.jpeg') type('image/jpeg'));
  background-image: image-set(url('bg1.webp') type('image/webp'), url('bg1.jpeg') type('image/jpeg'));
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  color: #ffffff;
  line-height: 1.5;
  overflow-x: hidden;
  min-height: 100vh;
}

.site-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ==========================================================================
   1. Header & Navigation (Navbar)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(2, 21, 61, 0.75);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(56, 189, 248, 0.2);
}

.site-header .site-container {
  max-width: 1200px;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 16px;
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #ffffff;
  flex-shrink: 0;
  white-space: nowrap;
}

.brand-logo-img {
  width: 38px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 210, 255, 0.5));
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.1;
  color: #ffffff;
}

.brand-sub {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #ffd043;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
}

/* Nav Menu */
.nav-center {
  display: flex;
  align-items: center;
  flex-shrink: 1;
}

.navbar-nav {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 18px;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-link {
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 5px;
  white-space: nowrap;
  transition: color 0.2s;
}

.nav-link:hover, .nav-link.active {
  color: #ffffff;
}

.nav-link:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Dropdown Menu (Open as shown in home.jpg) */
.dropdown-container {
  position: relative;
}

/* Cầu nối vô hình phủ khoảng hở 10px giữa menu cha và menu con, để chuột
   di chuyển xuống không bị rơi ra ngoài vùng hover làm menu đóng đột ngột. */
.dropdown-container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
}

.dropdown-box {
  position: absolute;
  top: calc(100% + 10px);
  left: -10px;
  /* Rộng theo nội dung dài nhất, không ép 200px cố định để nhãn
     như "Đồ chơi & Merchandise" không tràn viền. */
  min-width: 240px;
  width: max-content;
  max-width: 320px;
  background: rgba(3, 24, 68, 0.96);
  backdrop-filter: blur(16px);
  border: 1.5px solid #0284c7;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(2, 132, 199, 0.4);
  padding: 12px 8px;
  list-style: none;
  z-index: 200;

  /* Mặc định ẩn — chỉ sổ ra khi rê chuột vào menu cha.
     visibility (thay vì display) để có hiệu ứng mượt và không bắt tiêu điểm
     bàn phím khi đang đóng. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

/* Hover bằng chuột · focus bằng bàn phím · .open cho lần chạm trên điện thoại */
.dropdown-container:hover > .dropdown-box,
.dropdown-container:focus-within > .dropdown-box,
.dropdown-container.open > .dropdown-box {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

/* Mũi tên chỉ xuống xoay 180° khi menu đang mở */
.dropdown-container > .nav-link img {
  transition: transform .18s ease;
}
.dropdown-container:hover > .nav-link img,
.dropdown-container:focus-within > .nav-link img,
.dropdown-container.open > .nav-link img {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .dropdown-box,
  .dropdown-container > .nav-link img { transition: none; }
}

.dropdown-box li a {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Chữ cách viền hộp khoảng 20px (12px padding hộp + 8px padding mục) */
  padding: 10px 12px;
  white-space: nowrap;
  color: #e2e8f0;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: background 0.2s, transform 0.2s;
}

.dropdown-box li a:hover {
  background: rgba(14, 165, 233, 0.2);
  color: #ffffff;
  transform: translateX(3px);
}

.dropdown-box li a img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* Header Right */
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  white-space: nowrap;
}

.lang-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #94a3b8;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Nút chuyển ngôn ngữ là liên kết thật tới bản VI/EN của cùng trang. */
.lang-badge a {
  color: rgba(226, 232, 240, 0.65);
  text-decoration: none;
  transition: color 0.2s;
}
.lang-badge a:hover { color: #ffffff; }
.lang-badge a.active { color: #ffe066; font-weight: 700; }

.lang-badge .active {
  color: #ffffff;
}

.btn-free-app {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ff7e00 0%, #ea580c 100%);
  color: #ffffff;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.3);
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-free-app:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(234, 88, 12, 0.6);
}

/* ==========================================================================
   2. Hero Banner Section (Single Background Image with overlaid Text & Buttons)
   ========================================================================== */
.hero-banner-section {
  position: relative;
  width: 100%;
  min-height: 420px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 0 40px 0;
}

.hero-content-overlay {
  max-width: 580px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 10;
  padding: 10px 16px;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: 2.35rem;
  font-weight: 800;
  line-height: 1.25;
  color: #ffffff;
  margin-bottom: 14px;
  text-shadow: 0 2px 10px rgba(3, 44, 110, 0.7), 0 4px 20px rgba(0, 30, 80, 0.5);
}

.hero-title .brand-accent {
  display: inline-block;
  background: linear-gradient(180deg, #fff775 0%, #ffc800 45%, #ff8c00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 1px #ffffff) 
          drop-shadow(0 0 1.5px #ffffff) 
          drop-shadow(0 3px 6px rgba(0, 35, 95, 0.55));
}

.hero-subtitle {
  font-size: 1.02rem;
  color: #ffffff;
  line-height: 1.55;
  margin: 0 auto 26px auto;
  text-shadow: 0 2px 8px rgba(3, 44, 110, 0.75), 0 1px 4px rgba(0, 30, 80, 0.5);
  font-weight: 500;
}

.hero-actions-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-explore-orange {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #ff8800 0%, #ea580c 100%);
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 11px 24px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(234, 88, 12, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-explore-orange:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(234, 88, 12, 0.8);
}

.btn-download-blue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 11px 24px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.55);
  border: 1px solid rgba(56, 189, 248, 0.5);
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-download-blue:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(56, 189, 248, 0.7);
}

/* ==========================================================================
   3. Highlights Bar (White floating card with 3 columns)
   ========================================================================== */
.highlights-wrap {
  margin: 15px 0 25px 0;
}

.highlights-white-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr;
  align-items: center;
  gap: 16px;
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.highlight-col {
  display: flex;
  align-items: center;
  gap: 14px;
}

.highlight-col:not(:last-child) {
  border-right: 1px solid #e2e8f0;
  padding-right: 14px;
}

.hl-icon-img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 10px rgba(0, 40, 100, 0.12));
}

.hl-text-box h3 {
  font-family: var(--font-heading);
  font-size: 0.96rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hl-text-box h3 .hl-number {
  color: #0284c7;
  font-size: 1.1rem;
}

.hl-text-box p {
  font-size: 0.78rem;
  color: #475569;
  line-height: 1.35;
}

/* ==========================================================================
   4. Section: Khám Phá Hệ Sinh Thái (White container, 4 cards)
   ========================================================================== */
.section-white-panel {
  background: #ffffff;
  border-radius: 22px;
  box-shadow: var(--shadow-card);
  padding: 24px 20px 28px 20px;
  margin-bottom: 25px;
}

.panel-header-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: #0284c7;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  text-align: center;
}

.panel-header-title img {
  width: 36px;
  height: 10px;
}

.ecosystem-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.eco-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid #e2e8f0;
  box-shadow: var(--shadow-subtle);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  transition: transform 0.2s, box-shadow 0.2s;
}

.eco-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0, 40, 100, 0.12);
}

.eco-card-header {
  padding: 10px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.2;
}

.eco-card-header .circle-badge {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  border: 1.5px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  flex-shrink: 0;
}

/* 4 Themes */
.theme-purple .eco-card-header { background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%); }
.theme-purple .btn-card-pill { background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%); }

.theme-blue .eco-card-header { background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%); }
.theme-blue .btn-card-pill { background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%); }

.theme-green .eco-card-header { background: linear-gradient(135deg, #059669 0%, #10b981 100%); }
.theme-green .btn-card-pill { background: linear-gradient(135deg, #059669 0%, #10b981 100%); }

.theme-orange .eco-card-header { background: linear-gradient(135deg, #ea580c 0%, #f97316 100%); }
.theme-orange .btn-card-pill { background: linear-gradient(135deg, #ea580c 0%, #f97316 100%); }

.eco-card-img-wrap {
  width: 100%;
  height: 140px;
  background: #02122b;
  overflow: hidden;
}

.eco-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eco-card-body {
  padding: 12px 10px 14px 10px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  background: #ffffff;
}

.eco-card-body p {
  font-size: 0.78rem;
  color: #334155;
  line-height: 1.4;
  margin-bottom: 12px;
  min-height: 48px;
}

.btn-card-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  transition: opacity 0.2s;
}

.btn-card-pill:hover {
  opacity: 0.9;
}

/* ==========================================================================
   5. Section: Hành Trình Trải Nghiệm Khách Hàng (5 Steps)
   ========================================================================== */
.journey-steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  position: relative;
}

.journey-step-item {
  display: flex;
  flex-direction: column;
}

.step-top-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.step-circle-num {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  font-weight: 800;
  flex-shrink: 0;
}

.step-circle-num.c-purple { background: #4338ca; }
.step-circle-num.c-blue { background: #0284c7; }
.step-circle-num.c-green { background: #10b981; }
.step-circle-num.c-yellow { background: #f59e0b; }
.step-circle-num.c-red { background: #ef4444; }

.step-title-text {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 800;
  color: #0f172a;
  text-transform: uppercase;
  line-height: 1.15;
}

.step-description-text {
  font-size: 0.72rem;
  color: #475569;
  line-height: 1.35;
  margin-bottom: 10px;
  min-height: 40px;
}

.step-img-box {
  width: 100%;
  height: 75px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #f1f5f9;
}

.step-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   6. Section: Đầu Tư Vào Tương Lai (Dark Navy + Gold Border)
   ========================================================================== */
.investor-banner-box {
  background: linear-gradient(135deg, #00122e 0%, #021a42 100%);
  border: 2px solid #f59e0b;
  border-radius: 22px;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.25), 0 10px 30px rgba(0, 0, 0, 0.6);
  padding: 24px 28px;
  margin-bottom: 25px;
  display: grid;
  grid-template-columns: 1.15fr 2fr;
  gap: 24px;
  align-items: center;
}

.investor-left-pane h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffd043;
  line-height: 1.25;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.investor-left-pane p {
  font-size: 0.8rem;
  color: #ffffff;
  line-height: 1.45;
  margin-bottom: 14px;
  opacity: 0.95;
}

.investor-pitch-form {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: var(--radius-pill);
  padding: 3px;
  border: 1px solid #fbbf24;
  max-width: 380px;
  margin-bottom: 6px;
}

.investor-pitch-form input {
  flex-grow: 1;
  border: none;
  background: transparent;
  padding: 8px 12px;
  font-size: 0.8rem;
  color: #0f172a;
  outline: none;
}

.btn-pitch-submit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  border: none;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.investor-security-text {
  font-size: 0.68rem;
  color: #94a3b8;
  font-style: italic;
}

/* 4 Metrics Columns */
.investor-metrics-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.metric-inner-card {
  background: rgba(2, 24, 61, 0.6);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: var(--radius-md);
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.metric-inner-card img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  margin-bottom: 6px;
}

.m-label-text {
  font-size: 0.62rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  line-height: 1.25;
  min-height: 32px;
  margin-bottom: 4px;
}

.m-huge-number {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 800;
  color: #fbbf24;
  line-height: 1.1;
  margin-bottom: 2px;
}

.m-sub-text {
  font-size: 0.62rem;
  color: #cbd5e1;
  line-height: 1.2;
}

/* ==========================================================================
   7. Footer Section
   ========================================================================== */
.footer-wrap {
  background: rgba(0, 17, 41, 0.88); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(56, 189, 248, 0.2);
  padding: 30px 0 16px 0;
  margin-top: 20px;
}

.footer-columns-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 25px;
  margin-bottom: 25px;
}

.footer-col-1 .brand-group {
  margin-bottom: 12px;
}

.footer-col-1 p {
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.45;
  margin-bottom: 14px;
}

.footer-loc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.loc-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.74rem;
  color: #cbd5e1;
  line-height: 1.35;
}

.loc-item img {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Hotline & email ở chân trang: cùng dáng với dòng địa chỉ nhưng bấm được. */
.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

a.loc-item {
  text-decoration: none;
  color: #cbd5e1;
  transition: color 0.2s ease;
}

a.loc-item:hover .footer-hotline,
a.loc-item:hover {
  color: #ffffff;
}

.footer-hotline {
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--color-gold-text);
  letter-spacing: 0.01em;
}

.footer-col-title {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.footer-links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-links-list a {
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.76rem;
  transition: color 0.2s;
}

.footer-links-list a:hover {
  color: #ffffff;
}

.footer-sub-form {
  display: flex;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-pill);
  padding: 3px;
  margin-bottom: 14px;
}

.footer-sub-form input {
  flex-grow: 1;
  background: transparent;
  border: none;
  padding: 6px 10px;
  font-size: 0.76rem;
  color: #ffffff;
  outline: none;
}

.footer-sub-form button {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
  color: #ffffff;
  border: none;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}

.social-icons-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.social-circle-link {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, background 0.2s;
}

.social-circle-link:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.2);
}

.social-circle-link img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.footer-bottom-line {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  color: #64748b;
}

.footer-bottom-line a {
  color: #64748b;
  text-decoration: none;
}

.footer-bottom-line a:hover {
  color: #ffffff;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .site-header .site-container {
    padding: 0 12px;
  }
  .navbar-nav {
    gap: 12px;
  }
  .nav-link {
    font-size: 0.8rem;
    padding: 4px 3px;
  }
  .btn-free-app {
    font-size: 0.78rem;
    padding: 6px 11px;
  }
  .brand-title {
    font-size: 1.25rem;
  }
  .brand-sub {
    font-size: 0.56rem;
  }
}

@media (max-width: 920px) {
  .navbar-nav {
    gap: 8px;
  }
  .nav-link {
    font-size: 0.76rem;
    padding: 3px 2px;
  }
  .btn-free-app {
    font-size: 0.74rem;
    padding: 5px 9px;
  }
  .header-inner {
    gap: 8px;
  }
}

@media (max-width: 900px) {
  .highlights-white-card {
    grid-template-columns: 1fr;
  }
  .highlight-col:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 10px;
  }
  .ecosystem-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .journey-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .investor-banner-box {
    grid-template-columns: 1fr;
  }
  .investor-metrics-4col {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-columns-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   Menu di động — ngăn kéo trượt từ bên trái.
   Bản thiết kế gốc chỉ ẩn .navbar-nav ở ≤780px mà không có gì thay thế,
   nghĩa là trên điện thoại không có cách nào điều hướng. Khối dưới đây
   bổ sung nút hamburger, ngăn kéo và lớp phủ.
   ============================================================ */
/* Bản sao nút "Trải nghiệm App AI" do main.js chèn vào ngăn kéo di động.
   Ẩn mặc định để desktop không hiện hai nút giống nhau; quy tắc trong
   @media (max-width:780px) bên dưới sẽ bật lại khi mở ngăn kéo. */
.nav-center .btn-free-app {
  display: none;
}

.nav-toggle,
.nav-close {
  display: none;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--radius-sm);
  place-items: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(125, 211, 252, .45);
  color: #e2e8f0;
  cursor: pointer;
}
.nav-toggle:hover,
.nav-close:hover { background: rgba(255, 255, 255, .18); }

@media (max-width: 780px) {
  .nav-toggle { display: grid; }
  .site-header.open .nav-toggle { display: none; }
  .site-header.open .nav-close { display: grid; }

  /* Nút "Trải nghiệm App AI" chiếm nhiều chỗ trên màn hình nhỏ —
     đã có trong ngăn kéo nên ẩn ở thanh header. */
  .header-right .btn-free-app { display: none; }

  .nav-center {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 86vw);
    padding: 78px 14px 28px;
    background: linear-gradient(170deg, #0266b3 0%, #001a47 55%, #00183b 100%);
    border-right: 1px solid rgba(125, 211, 252, .35);
    box-shadow: 22px 0 60px rgba(0, 10, 40, .55);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translate3d(-101%, 0, 0);
    visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    transition: transform .28s cubic-bezier(.32, .72, .3, 1), visibility 0s linear .28s;
    z-index: 1100;
  }
  .site-header.open .nav-center {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    transition: transform .28s cubic-bezier(.32, .72, .3, 1), visibility 0s;
  }

  .navbar-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .navbar-nav > li { width: 100%; }
  .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    font-size: 1rem;
    border-radius: var(--radius-sm);
  }
  .navbar-nav .nav-link.active { background: rgba(125, 211, 252, .16); }

  /* Menu con: trải phẳng ngay dưới mục cha thay vì thả nổi */
  .dropdown-container::after { display: none; }
  .dropdown-box {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: rgba(0, 24, 59, .5);
    border: 0;
    border-left: 2px solid rgba(125, 211, 252, .4);
    border-radius: 0;
    box-shadow: none;
    margin: 4px 0 8px 16px;
    padding: 4px;
    transition: none;
  }
  .dropdown-container > .nav-link img { display: none; }

  /* Nút kêu gọi đặt ở cuối ngăn kéo */
  .nav-center .btn-free-app {
    display: inline-flex;
    margin-top: 18px;
    width: 100%;
    justify-content: center;
  }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 10, 35, .7);
    opacity: 0;
    visibility: hidden;
    transition: opacity .26s ease, visibility 0s linear .26s;
    z-index: 1050;
    border: 0;
    padding: 0;
  }
  body.nav-open .nav-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity .26s ease, visibility 0s;
  }
  body.nav-open { overflow: hidden; }
  body.nav-open .site-header { z-index: 1200; }
}

@media (max-width: 780px) and (prefers-reduced-motion: reduce) {
  .nav-center, .nav-backdrop { transition: none; }
}

@media (max-width: 600px) {
  .ecosystem-cards-grid {
    grid-template-columns: 1fr;
  }
  .journey-steps-grid {
    grid-template-columns: 1fr;
  }
  .investor-metrics-4col {
    grid-template-columns: 1fr;
  }
  .footer-columns-grid {
    grid-template-columns: 1fr;
  }
}