/* ═══════════════════════════════════════════════════════════
   VINHGROUP Xuất Khẩu Quốc Tế — Flatsome Custom CSS
   Prefix: vxi- (Vinh International)
═══════════════════════════════════════════════════════════ */

:root {
  --vxi-navy:      #0D1B2A;
  --vxi-navy-l:    #1A2E44;
  --vxi-crimson:   #8B1A2B;
  --vxi-crimson-l: #B02436;
  --vxi-crimson-p: #F9ECEE;
  --vxi-red-lt:    #E8A0A0;
  --vxi-gold:      #C9A840;
  --vxi-white:     #FAF7F2;
  --vxi-gray-100:  #F5EFE3;
  --vxi-gray:      #6B5E4E;
  --vxi-radius:    16px;
  --vxi-radius-sm: 8px;
  --vxi-shadow-sm: 0 2px 12px rgba(0,0,0,0.06);
  --vxi-shadow:    0 8px 32px rgba(0,0,0,0.10);
  --vxi-shadow-lg: 0 24px 64px rgba(0,0,0,0.14);
  --vxi-trans:     0.4s cubic-bezier(0.4,0,0.2,1);
}

/* ── GLOBAL ──────────────────────────────────────────────── */
[class*="vxi-"] h1,
[class*="vxi-"] h2,
[class*="vxi-"] h3,
[class*="vxi-"] h4 {
  font-family: 'Playfair Display', Georgia, serif !important;
}

/* ── HERO ────────────────────────────────────────────────── */

/* Overlay tối phủ lên ảnh nền hero để chữ dễ đọc */
.vxi-hero { position: relative; }
.vxi-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(13,27,42,0.85) 0%,
    rgba(13,27,42,0.60) 55%,
    rgba(13,27,42,0.25) 100%
  );
  z-index: 1;
  pointer-events: none;
}
.vxi-hero .section-inner { position: relative; z-index: 2; }

.vxi-breadcrumb {
  font-size: 11px !important; letter-spacing: 3.5px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.4) !important; margin-bottom: 14px;
}
.vxi-breadcrumb span { color: var(--vxi-red-lt); margin: 0 6px; }

.vxi-hero-tag {
  display: flex !important; align-items: center; gap: 10px;
  font-size: 11px !important; letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--vxi-red-lt) !important; margin-bottom: 20px;
}
.vxi-hero-tag::before {
  content: ''; display: inline-block; width: 32px; height: 1px;
  background: var(--vxi-red-lt); flex-shrink: 0;
}

.vxi-hero-h1 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(2.4rem, 5vw, 3.875rem) !important;
  line-height: 1.08 !important; font-weight: 700 !important;
  color: #FAF7F2 !important; margin-bottom: 22px !important;
}
.vxi-hero-h1 em { color: var(--vxi-red-lt); font-style: italic; }

.vxi-hero-desc {
  color: rgba(255,255,255,0.62) !important; font-size: 17px !important;
  line-height: 1.85; font-weight: 300; max-width: 520px; margin-bottom: 32px !important;
}

/* KPI */
.vxi-kpi-block { text-align: right; }
.vxi-kpi-item { margin-bottom: 28px; }
.vxi-kpi-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem; font-weight: 700; color: #fff; line-height: 1;
}
.vxi-kpi-num span { color: var(--vxi-red-lt); }
.vxi-kpi-label {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); margin-top: 4px;
}

.vxi-btn-primary { transition: var(--vxi-trans) !important; }
.vxi-btn-primary:hover {
  background: var(--vxi-crimson-l) !important; transform: translateY(-2px);
  box-shadow: 0 4px 24px rgba(139,26,43,0.4);
}
.vxi-btn-outline-white:hover { border-color: #fff !important; background: rgba(255,255,255,0.1) !important; }

/* ── OVERVIEW ────────────────────────────────────────────── */
.vxi-overview-img-col { position: relative; }

.vxi-overview-badge {
  position: absolute !important; top: 2rem; left: -1.5rem; z-index: 5;
}
.vxi-badge-inner {
  background: var(--vxi-crimson); padding: 20px 24px;
  border-radius: var(--vxi-radius-sm); box-shadow: var(--vxi-shadow-lg); text-align: center;
}
.vxi-badge-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.875rem; font-weight: 700; color: #fff; line-height: 1;
}
.vxi-badge-text {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); margin-top: 4px; display: block;
}

.vxi-overview-float img {
  position: absolute !important; bottom: -2rem; right: -2rem;
  width: 200px !important; height: 200px !important; object-fit: cover;
  border-radius: var(--vxi-radius-sm); border: 6px solid var(--vxi-white);
  box-shadow: var(--vxi-shadow-lg);
}

.vxi-section-label {
  font-size: 11px !important; letter-spacing: 4px !important;
  text-transform: uppercase !important; color: var(--vxi-crimson) !important;
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.vxi-section-label::before {
  content: ''; display: inline-block; width: 28px; height: 1px;
  background: var(--vxi-crimson);
}
.vxi-section-label-light {
  color: rgba(232,160,160,0.85) !important;
}
.vxi-section-label-light::before { background: rgba(232,160,160,0.5); }

.vxi-feature-box {
  background: var(--vxi-crimson-p) !important;
  border-left: 3px solid var(--vxi-crimson) !important;
  border-radius: var(--vxi-radius-sm); padding: 14px 18px; margin-bottom: 12px;
}
.vxi-feature-box strong { color: var(--vxi-navy); }

/* ── SERVICES ────────────────────────────────────────────── */
/* Force grid 2 cột cho service cards */
.vxi-services .ux-text > div[style*="grid"] {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}
.vxi-service-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}
.vxi-service-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: var(--vxi-radius) !important; padding: 36px 28px !important;
  transition: var(--vxi-trans); height: 100%;
  display: block !important;
}
.vxi-service-card:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(139,26,43,0.5) !important;
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.vxi-service-icon {
  width: 56px; height: 56px; background: var(--vxi-crimson);
  border-radius: var(--vxi-radius-sm); margin-bottom: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
.vxi-service-name {
  font-family: 'Playfair Display', serif; font-size: 1.125rem;
  font-weight: 700; color: #fff; margin-bottom: 10px;
}
.vxi-service-desc { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.7; }


/* ── MARKETS ─────────────────────────────────────────────── */
.vxi-market-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;
  margin-top: 40px;
}
.vxi-region-card {
  background: #fff; border-radius: var(--vxi-radius-sm);
  padding: 24px 20px; border: 1px solid #EDE8DC;
  transition: var(--vxi-trans);
}
.vxi-region-card:hover {
  border-color: var(--vxi-crimson);
  box-shadow: 0 4px 20px rgba(139,26,43,0.1);
  transform: translateY(-2px);
}
.vxi-region-flag { font-size: 1.75rem; margin-bottom: 10px; display: block; }
.vxi-region-name {
  font-family: 'Playfair Display', serif; font-size: 1.0625rem;
  font-weight: 700; color: var(--vxi-navy); margin-bottom: 8px;
}
.vxi-region-countries { font-size: 13px; color: var(--vxi-gray); margin-bottom: 12px; line-height: 1.6; }
.vxi-region-pct {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--vxi-crimson);
  padding-top: 10px; border-top: 1px solid #EDE8DC;
}

/* ── PROCESS / TIMELINE ──────────────────────────────────── */
.vxi-timeline { max-width: 800px; margin: 0 auto; }
.vxi-timeline-item {
  display: flex; gap: 32px; position: relative; padding-bottom: 40px;
}
.vxi-timeline-item:not(:last-child)::after {
  content: ''; position: absolute;
  left: 39px; top: 80px; width: 1px;
  height: calc(100% - 60px); background: #EDE8DC;
}
.vxi-timeline-left { flex-shrink: 0; text-align: center; }
.vxi-timeline-circle {
  width: 80px; height: 80px; background: var(--vxi-crimson);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700;
  color: #fff; position: relative; z-index: 1;
}
.vxi-timeline-step-label {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--vxi-gray); margin-top: 6px;
}
.vxi-timeline-right { padding-top: 16px; }
.vxi-timeline-title {
  font-family: 'Playfair Display', serif; font-size: 1.125rem;
  font-weight: 700; color: var(--vxi-navy); margin-bottom: 8px;
}
.vxi-timeline-desc { font-size: 14px; color: var(--vxi-gray); line-height: 1.7; margin-bottom: 12px; }
.vxi-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.vxi-tag {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--vxi-crimson); background: var(--vxi-crimson-p);
  padding: 3px 10px; border-radius: 20px;
}

/* ── COMPLIANCE ──────────────────────────────────────────── */
.vxi-compliance-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 20px;
  margin-top: 40px;
}
.vxi-compliance-card {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--vxi-radius-sm); padding: 28px 20px; text-align: center;
  transition: var(--vxi-trans);
}
.vxi-compliance-card:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(139,26,43,0.45);
  transform: translateY(-3px);
}
.vxi-compliance-badge {
  font-family: 'Playfair Display', serif; font-size: 1.375rem; font-weight: 700;
  color: var(--vxi-red-lt); margin-bottom: 10px; display: block;
}
.vxi-compliance-name {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: #fff; margin-bottom: 10px;
}
.vxi-compliance-desc { font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.6; }

/* ── GALLERY ─────────────────────────────────────────────── */
.row:has(.vxi-gallery-main) {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch !important;
}
.row:has(.vxi-gallery-main) > .col > .col-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.vxi-gallery-main {
  flex-grow: 1;
  height: 100% !important;
  overflow: hidden; 
  border-radius: var(--vxi-radius-sm);
}
.vxi-gallery-main .img-inner {
  height: 100% !important;
}
.vxi-gallery-main img { 
  height: 100% !important;
  object-fit: cover; 
  width: 100%; 
  transition: transform 0.6s ease; 
}
.vxi-gallery-sm { overflow: hidden; border-radius: var(--vxi-radius-sm); }
.vxi-gallery-sm img  { height: 100%; object-fit: cover; width: 100%; transition: transform 0.6s ease; }
.vxi-gallery-main:hover img,
.vxi-gallery-sm:hover img { transform: scale(1.04); }

/* ── STATS STRIP (crimson bg) ────────────────────────────── */
.vxi-stats-strip { overflow: hidden; }
.vxi-stat-col {
  text-align: center; padding: 24px 16px;
  border-right: 1px solid rgba(255,255,255,0.18);
}
.vxi-stat-col--last { border-right: none; }
.vxi-stat-num {
  font-family: 'Playfair Display', serif; font-size: 2.75rem;
  font-weight: 700; color: #fff; line-height: 1; display: block;
}
.vxi-stat-num span { font-size: 1.1rem; color: rgba(255,255,255,0.75); }
.vxi-stat-label {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.72); margin-top: 6px; display: block;
}

/* ── CTA ─────────────────────────────────────────────────── */
.vxi-cta { background: linear-gradient(135deg, #8B1A2B 0%, #6B1422 100%) !important; }
.vxi-cta-label {
  font-size: 11px !important; letter-spacing: 4px; text-transform: uppercase;
  color: rgba(255,255,255,0.65) !important; margin-bottom: 16px; display: block;
}
.vxi-btn-white { background: #FAF7F2 !important; color: var(--vxi-crimson) !important; font-weight: 600 !important; }
.vxi-btn-white:hover { background: var(--vxi-crimson-p) !important; transform: translateY(-2px); }
.vxi-btn-outline-white { border-color: rgba(255,255,255,0.4) !important; color: #fff !important; }
.vxi-btn-outline-white:hover { border-color: #fff !important; background: rgba(255,255,255,0.1) !important; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .vxi-hero-kpi { display: none !important; }
  .vxi-overview-float { display: none !important; }
  .vxi-overview-badge { left: 0 !important; }
  .vxi-market-grid { grid-template-columns: 1fr 1fr; }
  .vxi-compliance-grid { grid-template-columns: 1fr 1fr; }
  .vxi-timeline-item { gap: 20px; }
}
@media (max-width: 600px) {
  .vxi-hero-h1 { font-size: clamp(2rem, 9vw, 3rem) !important; }
  .vxi-market-grid { grid-template-columns: 1fr; }
  .vxi-compliance-grid { grid-template-columns: 1fr 1fr; }
  .vxi-stat-col { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); }
}