.elementor-181 .elementor-element.elementor-element-36f5ace{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:69px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-181 .elementor-element.elementor-element-d7a5ab8{--display:flex;--margin-top:81px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-181 .elementor-element.elementor-element-e52845e{--display:flex;}.elementor-181 .elementor-element.elementor-element-59ab4c7{--display:flex;--margin-top:60px;--margin-bottom:60px;--margin-left:0px;--margin-right:0px;--padding-top:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-181 .elementor-element.elementor-element-59ab4c7:not(.elementor-motion-effects-element-type-background), .elementor-181 .elementor-element.elementor-element-59ab4c7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0A0F0C;}.elementor-181 .elementor-element.elementor-element-154fc82{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}body.elementor-page-181:not(.elementor-motion-effects-element-type-background), body.elementor-page-181 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#102218;}/* Start custom CSS for html, class: .elementor-element-58ccd16 *//* --- CẤU HÌNH SECTION TỔNG --- */
.strategy-hero {
  font-family: 'Noto Sans', sans-serif;
  box-sizing: border-box;
  width: 100%;
  
  /* Bảng màu */
  --sh-primary: #13ec6d;      /* Xanh Neon */
  --sh-text-white: #ffffff;
  --sh-text-gray: #d1d5db;    /* Gray-300 */
  --sh-bg-dark: #111814;      /* Màu nền chính */
  --sh-border: #3b5445;       /* Viền Badge */
  
  /* Layout Flexbox căn giữa */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  position: relative;
  min-height: 500px;
  padding: 3rem 1rem;
}

@media (min-width: 1024px) {
  .strategy-hero {
    min-height: 600px;
    padding: 3rem 10rem;
  }
}

/* --- LỚP NỀN (BACKGROUND) --- */
.hero-bg-wrapper {
  position: absolute;
  /* Tạo khoảng cách lề (margin) để tạo hiệu ứng khung viền */
  top: 1rem; 
  left: 1rem; 
  right: 1rem; 
  bottom: 0;
  
  /* Bo tròn 2 góc dưới */
  border-bottom-left-radius: 3rem;
  border-bottom-right-radius: 3rem;
  overflow: hidden;
  z-index: 0;
}

@media (min-width: 768px) {
  .hero-bg-wrapper {
    /* Trên PC lề rộng hơn */
    left: 2.5rem; 
    right: 2.5rem;
  }
}

/* Ảnh nền */
.hero-bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  opacity: 0.6;
  transform: scale(1.05); /* Zoom nhẹ 105% */
}

/* Gradient phủ lên ảnh */
.hero-overlay {
  position: absolute;
  inset: 0;
  /* Chuyển mã màu hex #111814 sang rgba(17, 24, 20) để chỉnh độ mờ */
  background: linear-gradient(
    to bottom,
    rgba(17, 24, 20, 0.9), /* 90% opacity */
    rgba(17, 24, 20, 0.7), /* 70% opacity */
    #111814                /* 100% opacity */
  );
}

/* --- LỚP NỘI DUNG (CONTENT) --- */
.hero-content {
  position: relative;
  z-index: 10; /* Nổi lên trên nền */
  
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem; /* gap-6 */
  max-width: 56rem; /* max-w-4xl */
  
  /* Đẩy nội dung xuống một chút trên mobile */
  margin-top: 2.5rem;
}

@media (min-width: 768px) {
  .hero-content {
    margin-top: 0;
  }
}

/* Badge (Định hướng chiến lược) */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  
  background-color: rgba(28, 42, 35, 0.8); /* Nền mờ */
  backdrop-filter: blur(4px);
  border: 1px solid var(--sh-border);
  border-radius: 999px;
  
  /* Animation nhún nhẹ */
  animation: bounce-subtle 3s infinite;
}

.hero-badge .material-symbols-outlined {
  color: var(--sh-primary);
  font-size: 0.875rem; /* text-sm */
}

.badge-text {
  color: #e5e7eb; /* gray-200 */
  font-family: 'Spline Sans', sans-serif;
  font-size: 0.75rem; /* text-xs */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Tiêu đề lớn */
.hero-title {
  font-family: 'Spline Sans', sans-serif;
  color: var(--sh-text-white);
  font-size: 2.25rem; /* text-4xl */
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0;
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 4.5rem; /* text-7xl */
  }
}

.highlight {
  color: var(--sh-primary);
}

/* Mô tả */
.hero-desc {
  color: var(--sh-text-gray);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 42rem;
  margin: 0;
  padding: 0 1rem;
}

@media (min-width: 768px) {
  .hero-desc {
    font-size: 1.25rem; /* text-xl */
  }
}

/* --- ANIMATION (Keyframes) --- */
@keyframes bounce-subtle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px); /* Nhảy lên 5px */
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3313460 *//* --- CẤU HÌNH KHUNG HEADER --- */
.activity-header {
  font-family: 'Noto Sans', sans-serif;
  box-sizing: border-box;
  width: 100%;

  /* Bảng màu */
  --ah-primary: #13ec6d;      /* Xanh Neon */
  --ah-dark-text: #111814;    /* Chữ đen trên nền xanh */
  --ah-btn-bg: #28392f;       /* Nền nút thường */
  --ah-btn-hover: #344a3d;    /* Nền nút khi hover */
  --ah-border: #28392f;       /* Viền gạch chân */
  --ah-text-white: #ffffff;
  --ah-text-gray: #9ca3af;

  /* Layout Flexbox */
  display: flex;
  flex-direction: column; /* Mobile: Xếp dọc */
  gap: 2rem;
  
  /* Đường gạch chân dưới */
  border-bottom: 1px solid var(--ah-border);
  padding-bottom: 2rem;
  margin-bottom: 3rem;
}

/* Desktop: Xếp ngang và căn đáy */
@media (min-width: 768px) {
  .activity-header {
    flex-direction: row;
    align-items: flex-end; /* Căn đáy để nút thẳng hàng với chữ */
    justify-content: space-between;
  }
}

/* --- PHẦN THÔNG TIN (TIÊU ĐỀ) --- */
.ah-info {
  max-width: 36rem; /* Giới hạn chiều rộng đoạn văn cho dễ đọc */
}

.ah-title {
  font-family: 'Spline Sans', sans-serif; /* Font tiêu đề riêng */
  color: var(--ah-text-white);
  font-size: 1.875rem; /* 30px */
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.75rem 0;
}

@media (min-width: 768px) {
  .ah-title {
    font-size: 2.25rem; /* 36px trên Desktop */
  }
}

.ah-desc {
  color: var(--ah-text-gray);
  font-size: 1rem;
  margin: 0;
  line-height: 1.6;
}

/* --- PHẦN BỘ LỌC (BUTTONS) --- */
.ah-filter {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap; /* Tự xuống dòng nếu hết chỗ */
  
  /* Cho phép cuộn ngang trên mobile nếu quá dài */
  overflow-x: auto;
  padding-bottom: 0.5rem; /* Chừa chỗ cho thanh cuộn nếu có */
  
  /* Ẩn thanh cuộn (cho gọn) */
  scrollbar-width: none; /* Firefox */
}
.ah-filter::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Style chung cho nút */
.filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem; /* 40px */
  padding: 0 1.5rem;
  border-radius: 999px; /* Hình viên thuốc */
  border: none;
  cursor: pointer;
  white-space: nowrap; /* Không ngắt dòng chữ */
  
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
  transition: all 0.3s ease;
  
  /* Mặc định (Chưa Active) */
  background-color: var(--ah-btn-bg);
  color: var(--ah-text-white);
}

/* Hiệu ứng Hover nút thường */
.filter-btn:hover {
  background-color: var(--ah-btn-hover);
}

/* Style cho nút đang chọn (Active) */
.filter-btn.active {
  background-color: var(--ah-primary);
  color: var(--ah-dark-text);
  font-weight: 700;
  
  /* Bóng đổ nhẹ và phóng to chút */
  box-shadow: 0 10px 15px -3px rgba(19, 236, 109, 0.2);
  transform: scale(1.05);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9b634a4 *//* --- CẤU HÌNH GRID TỔNG --- */
.activity-grid {
  font-family: 'Noto Sans', sans-serif;
  box-sizing: border-box;
  width: 100%;
  
  /* Bảng màu */
  --ac-primary: #13ec6d;      /* Xanh Neon */
  --ac-bg: #1c2720;           /* Nền Card thường */
  --ac-bg-hover: #23332c;     /* Nền Card khi Hover */
  --ac-border: #3b5445;       /* Viền Card */
  --ac-text-white: #ffffff;
  --ac-text-gray: #9ca3af;
  
  /* Grid Responsive */
  display: grid;
  grid-template-columns: 1fr; /* Mobile: 1 cột */
  gap: 2rem; /* gap-8 */
}

@media (min-width: 768px) {
  .activity-grid {
    grid-template-columns: repeat(2, 1fr); /* Tablet: 2 cột */
  }
}

@media (min-width: 1024px) {
  .activity-grid {
    grid-template-columns: repeat(3, 1fr); /* Desktop: 3 cột */
  }
}

/* --- STYLE CHUNG CHO CARD --- */
.activity-card {
  background-color: var(--ac-bg);
  border: 1px solid var(--ac-border);
  border-radius: 1rem; /* rounded-2xl */
  overflow: hidden;
  
  display: flex;
  flex-direction: column;
  
  transition: all 0.5s ease;
  cursor: pointer;
}

/* Hover Effect chung */
.activity-card:hover {
  background-color: var(--ac-bg-hover);
  border-color: rgba(19, 236, 109, 0.4); /* border-primary/40 */
  box-shadow: 0 25px 50px -12px rgba(19, 236, 109, 0.05); /* shadow-primary/5 */
  transform: translateY(-4px);
}

/* --- PHẦN ẢNH (MEDIA) --- */
.card-media {
  width: 100%;
  aspect-ratio: 16 / 10; /* Tỷ lệ khung hình */
  overflow: hidden;
}

.card-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s duration-700 ease;
}

/* Hover: Zoom ảnh */
.activity-card:hover .card-img {
  transform: scale(1.1);
}

/* --- PHẦN NỘI DUNG (BODY) --- */
.card-body {
  padding: 1.75rem; /* p-7 */
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* gap-3 */
  flex-grow: 1;
}

/* Tag danh mục */
.card-tag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  
  color: var(--ac-primary);
  font-family: 'Spline Sans', sans-serif;
  font-size: 0.75rem; /* text-xs */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.card-tag .material-symbols-outlined {
  font-size: 1.25rem; /* text-xl */
}

/* Tiêu đề */
.card-title {
  color: var(--ac-text-white);
  font-family: 'Spline Sans', sans-serif;
  font-size: 1.25rem; /* text-xl */
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  transition: color 0.3s;
}

.activity-card:hover .card-title {
  color: var(--ac-primary);
}

/* Mô tả */
.card-desc {
  color: var(--ac-text-gray);
  font-size: 0.875rem; /* text-sm */
  line-height: 1.6;
  margin: 0;
  
  /* Giới hạn 3 dòng */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Nút xem chi tiết */
.card-link {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  
  color: var(--ac-text-white);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.3s;
}

.activity-card:hover .card-link {
  color: var(--ac-primary);
}

.icon-arrow {
  font-size: 0.875rem;
  transition: transform 0.3s;
}

.activity-card:hover .icon-arrow {
  transform: translateX(4px);
}

/* --- STYLE CHO CARD HỢP TÁC (CTA CARD) --- */
.activity-card.cta-card {
  background-color: #28392f;
  border: 1px dashed #6b7280; /* Viền nét đứt */
  padding: 2rem;
  
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 400px; /* Đảm bảo chiều cao tối thiểu */
}

.activity-card.cta-card:hover {
  border-color: var(--ac-primary);
  border-style: solid; /* Hover thành viền liền */
}

/* Icon tròn */
.cta-icon-box {
  width: 5rem; height: 5rem;
  background-color: rgba(19, 236, 109, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: all 0.5s;
}

.activity-card.cta-card:hover .cta-icon-box {
  background-color: rgba(19, 236, 109, 0.2);
}

.cta-icon-box .material-symbols-outlined {
  font-size: 2.25rem; /* text-4xl */
  color: var(--ac-primary);
  transition: transform 0.3s;
}

.activity-card.cta-card:hover .cta-icon-box .material-symbols-outlined {
  transform: scale(1.1);
}

/* Title trong CTA Card */
.cta-card .card-title {
  font-size: 1.5rem; /* text-2xl */
  margin-bottom: 0.75rem;
}

/* Desc trong CTA Card */
.cta-card .card-desc {
  max-width: 240px;
  margin-bottom: 2rem;
  color: #d1d5db; /* Sáng hơn gray thường */
}

/* Button CTA */
.cta-btn {
  height: 3rem; /* h-12 */
  padding: 0 2rem;
  border-radius: 99px;
  
  background-color: transparent;
  border: 1px solid var(--ac-primary);
  color: var(--ac-primary);
  
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
}

.cta-btn:hover {
  background-color: var(--ac-primary);
  color: #111814;
}

.cta-btn:active {
  transform: scale(0.95);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-fd99d65 *//* --- CẤU HÌNH CARD TỔNG --- */
.ai-vision-card {
  font-family: 'Noto Sans', sans-serif;
  box-sizing: border-box;
  
  /* Bảng màu */
  --ai-primary: #13ec6d;      /* Xanh Neon */
  --ai-bg: #1c2720;           /* Nền Card */
  --ai-border: #3b5445;       /* Viền Card */
  --ai-btn-bg: #28392f;       /* Nền nút thường */
  --ai-btn-hover: #344a3d;    /* Nền nút Hover */
  --ai-text-white: #ffffff;
  --ai-text-gray: #9ca3af;
  
  /* Layout & Box Model */
  position: relative;
  max-width: 1390px;
  margin: 0 auto;
  padding: 2rem; /* Mobile padding */
  
  background-color: var(--ai-bg);
  border: 1px solid rgba(19, 236, 109, 0.2); /* Viền xanh mờ */
  border-radius: 1.5rem; /* rounded-3xl */
  
  overflow: hidden; /* Cắt phần icon trang trí thừa */
}

@media (min-width: 768px) {
  .ai-vision-card {
    padding: 3rem; /* Desktop padding lớn hơn */
  }
}

/* --- ICON TRANG TRÍ (NỀN) --- */
.card-deco-icon {
  position: absolute;
  top: 0; right: 0;
  padding: 1rem;
  opacity: 0.1; /* Mờ 10% */
  pointer-events: none; /* Không chặn click */
  z-index: 0;
}

.card-deco-icon .material-symbols-outlined {
  font-size: 8rem; /* text-9xl */
  color: var(--ai-primary);
}

/* --- BỐ CỤC NỘI DUNG (INNER) --- */
.card-inner {
  position: relative;
  z-index: 1; /* Nổi lên trên icon nền */
  
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 768px) {
  .card-inner {
    flex-direction: row;
    align-items: center; /* Căn giữa theo chiều dọc */
    gap: 3rem;
  }
}

/* --- CỘT TRÁI (CONTENT) --- */
.vision-content {
  flex: 1; /* Chiếm phần lớn diện tích */
}

/* Badge AI */
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  margin-bottom: 1rem;
  
  background-color: rgba(19, 236, 109, 0.2);
  color: var(--ai-primary);
  border-radius: 99px;
  
  font-size: 0.75rem; /* text-xs */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.ai-badge .material-symbols-outlined {
  font-size: 0.875rem;
}

/* Tiêu đề */
.ai-title {
  font-family: 'Spline Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ai-text-white);
  margin: 0 0 1.5rem 0;
}

@media (min-width: 768px) {
  .ai-title {
    font-size: 1.875rem; /* text-3xl */
  }
}

.ai-title .highlight {
  color: var(--ai-primary);
}

/* Hộp nội dung text */
.ai-text-box {
  min-height: 100px; /* Giữ chiều cao cố định để không bị giật khi đổi tab */
  transition: opacity 0.5s;
}

.ai-quote {
  color: #d1d5db; /* gray-300 */
  font-size: 1.125rem; /* text-lg */
  font-style: italic;
  line-height: 1.6;
  margin: 0;
}

/* --- CỘT PHẢI (NAV BUTTONS) --- */
.vision-nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 240px; /* Đảm bảo cột nút không quá bé */
}

.nav-label {
  color: #6b7280; /* gray-500 */
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}

.nav-list {
  display: flex;
  flex-wrap: wrap; /* Mobile: Nút tự xuống dòng */
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .nav-list {
    flex-direction: column; /* Desktop: Xếp dọc */
  }
}

/* Style Button */
.nav-btn {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem; /* rounded-lg */
  border: none;
  cursor: pointer;
  text-align: left;
  
  font-size: 0.875rem; /* text-sm */
  transition: all 0.3s ease;
  
  /* Mặc định (Inactive) */
  background-color: var(--ai-btn-bg);
  color: #9ca3af; /* gray-400 */
}

/* Hover Button thường */
.nav-btn:hover {
  background-color: var(--ai-btn-hover);
  color: var(--ai-text-white);
}

/* Button Đang chọn (Active) */
.nav-btn.active {
  background-color: var(--ai-primary);
  color: #000000; /* Chữ đen trên nền xanh */
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(19, 236, 109, 0.3);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e58e4d1 *//* --- CẤU HÌNH SECTION --- */
.cta-gradient-section {
  font-family: 'Noto Sans', sans-serif;
  box-sizing: border-box;
  width: 100%;
  
  /* Bảng màu */
  --cg-primary: #13ec6d;       /* Xanh Neon */
  --cg-text-dark: #111814;     /* Chữ đen */
  --cg-text-white: #ffffff;
  --cg-text-gray: #9ca3af;
  --cg-border: #28392f;        /* Màu viền trên */
  


  display: flex;
  justify-content: center;
}

@media (min-width: 768px) {
  .cta-gradient-section {
    padding-left: 2.5rem; /* px-10 */
    padding-right: 2.5rem;
  }
}

/* --- KHUNG NỘI DUNG (INNER) --- */
.cta-inner {
  max-width: 1392px;
  width: 100%;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem; /* gap-8 */
}

/* --- TYPOGRAPHY --- */
.cta-heading {
  font-family: 'Spline Sans', sans-serif; /* Font hiển thị */
  color: var(--cg-text-white);
  font-size: 1.875rem; /* text-3xl */
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

@media (min-width: 768px) {
  .cta-heading {
    font-size: 3rem; /* text-5xl trên PC */
  }
}

.cta-description {
  color: var(--cg-text-gray);
  font-size: 1.125rem; /* text-lg */
  line-height: 1.6;
  max-width: 42rem; /* max-w-2xl */
  margin: 0;
}

@media (min-width: 768px) {
  .cta-description {
    font-size: 1.25rem; /* text-xl */
  }
}

/* --- BUTTONS --- */
.cta-buttons {
  display: flex;
  flex-direction: column; /* Mobile: Dọc */
  gap: 1rem;
  width: 100%;
  margin-top: 1rem;
}

@media (min-width: 640px) {
  .cta-buttons {
    flex-direction: row; /* Tablet+: Ngang */
    width: auto;
  }
}

/* Style chung cho nút */
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  height: 3.5rem; /* h-14 */
  padding: 0 2rem; /* px-8 */
  min-width: 180px;
  
  border-radius: 999px;
  border: none;
  cursor: pointer;
  
  font-size: 1.125rem; /* text-lg */
  font-weight: 700;
  white-space: nowrap;
  
  transition: all 0.3s ease;
}

/* Hiệu ứng Active (Nhấn) */
.cta-btn:active {
  transform: scale(0.95);
}

/* Nút Chính (Primary) */
.btn-primary {
  background-color: var(--cg-primary);
  color: var(--cg-text-dark);
  box-shadow: 0 20px 25px -5px rgba(19, 236, 109, 0.2); /* shadow-xl */
}

.btn-primary:hover {
  transform: scale(1.05);
}

/* Nút Phụ (Secondary) */
.btn-secondary {
  background-color: #28392f;
  color: var(--cg-text-white);
}

.btn-secondary:hover {
  background-color: #344a3d;
}/* End custom CSS */