@charset "UTF-8";
body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  color: #333;
}

.btn-yellow-linear {
  background: var(--btn, linear-gradient(92deg, #FFC700 0%, #FCFF6F 100%));
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  max-width: 242px;
  padding: 13px 40px;
}

.logo span {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}

.header__contact span {
  font-family: "Noto Sans JP", sans-serif;
}

/* =========================================
   1. COMMON & RESET
========================================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Container dùng chung thay cho Bootstrap */
.container-custom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  width: 100%;
}

/* =========================================
   2. HEADER TÙY CHỈNH (STICKY ANIMATION)
========================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background-color: transparent;
  padding: 20px 0;
  transition: all 0.4s ease-in-out;
}
.site-header.is-sticky {
  background-color: rgba(255, 255, 255, 0.95);
  padding: 10px 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(8px);
}
.site-header.is-sticky .logo .logo-img {
  max-width: 140px;
}
.site-header.is-sticky .logo .logo-text,
.site-header.is-sticky .header__contact .contact-time {
  color: #222;
}
.site-header .header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 30px;
  padding-right: 30px;
}
.site-header .logo {
  display: flex;
  align-items: center;
  gap: 15px;
}
.site-header .logo .logo-img {
  max-width: 180px;
  height: auto;
  transition: all 0.4s ease-in-out;
}
.site-header .logo .logo-text {
  font-size: 14px;
  color: #333;
  transition: color 0.4s;
}
.site-header .header__contact {
  display: flex;
  align-items: center;
  gap: 20px;
}
.site-header .header__contact .contact-time {
  font-size: 12px;
  color: #333;
  transition: color 0.4s;
  margin-right: 0;
}
.site-header .header__contact .btn-yellow-linear {
  background: var(--btn, linear-gradient(92deg, #FFC700 0%, #FCFF6F 100%));
  color: #333;
  padding: 13px 40px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  transition: opacity 0.3s, transform 0.3s;
}
.site-header .header__contact .btn-yellow-linear:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}

/* Ẩn liên hệ trên màn hình nhỏ */
@media (max-width: 768px) {
  .site-header .header-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
  .site-header .header__contact {
    width: 100%;
    justify-content: flex-end;
  }
  .site-header .header__contact .contact-time {
    display: none;
  }
  .site-header .header__contact .btn-yellow-linear {
    padding: 12.5px 10px;
    font-size: 15px;
    line-height: 1em;
    letter-spacing: inherit;
    max-width: 170px;
  }
  .site-header .logo .logo-img {
    max-width: 160px;
  }
  .site-header .logo .logo-text {
    display: none;
  }
}
/* =========================================
   3. HERO BANNER
========================================= */
.hero-banner .banner-image {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  animation: fadeInSlideUp 0.8s ease-out;
}
.hero-banner .banner-image.desktop-only {
  display: block;
}
.hero-banner .banner-image.mobile-only {
  display: none;
}
@keyframes fadeInSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================
   4. RESPONSIVE BANNER
========================================= */
@media (max-width: 991px) {
  .hero-banner {
    padding-top: 84px;
  }
  .hero-banner .banner-image.desktop-only {
    display: none;
  }
  .hero-banner .banner-image.mobile-only {
    display: block;
  }
}
/* =========================================
   PROPOSAL SECTION (GIẢI PHÁP ĐỀ XUẤT)
========================================= */
.proposal-section {
  background-color: #f4f5f7;
  /* Màu nền xám nhạt */
  padding: 100px 0;
  text-align: center;
  color: #333;
  /* Tiện ích màu chữ xanh */
}
.proposal-section .text-blue {
  color: #0080C8;
}
.proposal-section {
  /* Tiêu đề chính */
}
.proposal-section .main-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 100px;
  letter-spacing: 2px;
}
.proposal-section .sub-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 1.6px;
  margin-bottom: 32px;
}
.proposal-section {
  /* Layout hàng ngang chung cho các card */
}
.proposal-section .card-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.proposal-section {
  /* --- 1. PROBLEM CARDS (Phần Vấn Đề) --- */
}
.proposal-section .problem-row {
  margin-bottom: 32px;
}
.proposal-section .problem-card {
  flex: 1;
  min-width: 280px;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.proposal-section .problem-card .card-img {
  height: 160px;
  position: relative;
  z-index: 2;
  /* Hình nằm trên */
}
.proposal-section .problem-card .card-img img {
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.proposal-section .problem-card .card-box {
  background: #ffffff;
  width: 100%;
  padding: 24px 20px;
  border-radius: 16px;
  box-shadow: 10px 10px 50px 0 rgba(0, 0, 0, 0.25);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.6;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100px;
}
.proposal-section .problem-card .card-box div {
  display: contents;
}
.proposal-section {
  /* --- 2. TRANSITION AREA (Phần Chuyển Giao) --- */
}
.proposal-section .transition-area {
  margin-bottom: 32px;
}
.proposal-section .transition-area .transition-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 32px;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 0;
}
.proposal-section .transition-area .transition-title div {
  display: contents;
}
.proposal-section .transition-area .transition-title span {
  display: block;
}
.proposal-section .transition-area {
  /* Vẽ mũi tên chỉ xuống bằng CSS thuần */
}
.proposal-section .transition-area .down-arrow {
  margin: 0 auto;
}
@media (max-width: 991px) {
  .proposal-section .transition-area .down-arrow svg {
    width: 100px;
    height: auto;
  }
}
.proposal-section {
  /* --- 3. SOLUTION CARDS (Phần Giải Pháp) --- */
}
.proposal-section .solution-row {
  margin-bottom: 100px;
  align-items: stretch;
  /* Đảm bảo 3 thẻ giải pháp luôn bằng chiều cao nhau */
}
.proposal-section .solution-card {
  flex: 1;
  min-width: 280px;
  max-width: 350px;
  background: #ffffff;
  padding: 32px 24px 24px 24px;
  border-radius: 16px;
  box-shadow: 10px 10px 50px 0 rgba(0, 0, 0, 0.25);
  text-align: left;
  display: flex;
  flex-direction: column;
}
.proposal-section .solution-card .solution-title {
  font-family: "Noto Sans JP", sans-serif;
  color: #0080C8;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 25px;
  text-align: center;
  min-height: 54px;
}
.proposal-section .solution-card .solution-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  text-align: justify;
  line-height: 1.9;
  color: #333;
  margin-bottom: 0;
}
.proposal-section {
  /* Tiêu đề chốt dưới cùng */
}
.proposal-section .bottom-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 0;
}

/* =========================================
   RESPONSIVE (Mobile & Tablet)
========================================= */
@media (max-width: 991px) {
  .proposal-section {
    padding: 50px 0;
  }
  .proposal-section .main-title {
    font-size: 28px;
    margin-bottom: 50px;
  }
  .proposal-section .main-title span {
    display: block;
  }
  .proposal-section .sub-title {
    font-size: 24px;
    letter-spacing: inherit;
  }
  .proposal-section .transition-area .transition-title {
    font-size: 20px;
  }
  .proposal-section .transition-area .transition-title div {
    display: block;
  }
  .proposal-section .transition-area .transition-title span {
    display: inline-block;
  }
  .proposal-section .bottom-title {
    font-size: 24px;
    line-height: 1.5;
    letter-spacing: inherit;
  }
  .proposal-section .bottom-title span {
    display: block;
  }
  .proposal-section .card-row {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .proposal-section .card-row.solution-row {
    gap: 25px;
    margin-bottom: 50px;
  }
  .proposal-section .problem-card,
  .proposal-section .solution-card {
    width: 100%;
    max-width: 450px;
    flex-direction: row;
  }
  .proposal-section .problem-card {
    gap: 10px;
  }
  .proposal-section .problem-card:nth-child(2) {
    flex-direction: row-reverse;
  }
  .proposal-section .problem-card .card-img {
    width: 110px;
    height: auto;
  }
  .proposal-section .problem-card .card-box {
    padding: 20px;
    font-size: 16px;
    line-height: 1.4;
  }
  .proposal-section .problem-card .card-box div {
    display: block;
  }
  .proposal-section .solution-card {
    padding: 30px 20px;
    flex-direction: column;
  }
}
/* =========================================
   PROCESS SECTION (QUY TRÌNH)
========================================= */
.process-section {
  background-color: #f4f5f7;
  padding: 60px 0 100px;
  position: relative;
  color: #333;
}
.process-section .container-custom {
  max-width: 1608px;
}
.process-section .text-blue {
  color: #0080C8;
}
.process-section {
  /* --- 1. Phần Giới thiệu & Nhân vật --- */
}
.process-section .intro-area {
  position: relative;
  text-align: center;
  padding-bottom: 60px;
  z-index: 2;
  /* Để text và ảnh đè lên viền khối trắng */
}
.process-section .intro-text {
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}
.process-section .intro-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 25px;
}
.process-section .intro-desc {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  font-weight: 400;
  color: #4F4F4F;
  margin-bottom: 0;
}
.process-section .intro-model {
  position: absolute;
  bottom: -60px;
  /* Đẩy sâu xuống để đè vào khối trắng */
  height: 380px;
  width: auto;
  z-index: 2;
  -o-object-fit: contain;
     object-fit: contain;
}
.process-section .intro-model.model-left {
  left: 0;
  bottom: -130px;
}
.process-section .intro-model.model-right {
  right: 0;
  bottom: -90px;
}
.process-section .intro-model.mobile-only {
  display: none;
}
.process-section {
  /* --- 2. Khối Trắng Nội Dung --- */
}
.process-section .process-box {
  background: #ffffff;
  border-radius: 50px;
  padding: 100px 0;
  position: relative;
  z-index: 2;
  /* Nằm dưới người mẫu */
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04);
  margin-top: -30px;
  /* Kéo lên một chút */
}
.process-section .box-header {
  max-width: 1030px;
  margin: 0 auto 60px;
}
.process-section .box-header .box-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 20px;
}
.process-section .box-header .box-subtitle {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 30px;
  color: #333;
}
.process-section .box-header .box-desc {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.9;
  color: #333;
  text-align: left;
}
.process-section {
  /* --- 3. Timeline Quy Trình --- */
}
.process-section .timeline-wrapper {
  max-width: 1030px;
  margin: 0 auto;
}
.process-section .timeline-phase {
  display: flex;
  gap: 50px;
  margin-bottom: 8px;
}
.process-section {
  /* Thanh Nhãn Dọc (Phase Label) */
}
.process-section .phase-label {
  width: 38px;
  border-radius: 40px 0;
  color: #fff;
  display: flex;
  justify-content: start;
  align-items: center;
  writing-mode: vertical-rl;
  /* Viết chữ dọc */
  text-orientation: upright;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 2px;
  padding: 25px 0 35px;
  position: relative;
}
.process-section {
  /* Cài đặt màu Gradient và màu Mũi tên riêng cho từng Phase */
}
.process-section .bg-gradient-1 {
  background: linear-gradient(180deg, #0080C8 0%, #FCFF6F 100%);
}
.process-section .bg-gradient-1::after {
  border-top-color: #7dc988;
}
.process-section .bg-gradient-1 {
  /* Bắt màu của đuôi gradient */
}
.process-section .bg-gradient-2 {
  background: linear-gradient(180deg, #57c09b 0%, #d5ef66 100%);
}
.process-section .bg-gradient-2::after {
  border-top-color: #d5ef66;
}
.process-section .bg-gradient-3 {
  background: linear-gradient(180deg, #1085c2 0%, #aae16f 100%);
}
.process-section .bg-gradient-3::after {
  border-top-color: #aae16f;
}
.process-section {
  /* Các Bước (Steps) */
}
.process-section .phase-steps {
  flex: 1;
  padding-top: 5px;
  padding-bottom: 40px;
}
.process-section .step-item {
  margin-bottom: 35px;
}
.process-section .step-item:last-child {
  margin-bottom: 0;
}
.process-section .step-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}
.process-section .step-header .step-badge {
  background: #0080C8;
  color: #fff;
  padding: 2px 15px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
}
.process-section .step-header .step-title {
  font-family: "Noto Sans JP", sans-serif;
  color: #0080C8;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}
.process-section .step-desc {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  margin: 0;
}
.process-section {
  /* --- 4. CTA BÊN TRONG KHỐI TRẮNG --- */
}
.process-section .dashed-divider {
  border: none;
  border-top: 1px dashed #ccc;
  margin: 60px 0;
}
.process-section .box-cta .cta-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 20px;
}
.process-section .box-cta .cta-desc {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.8px;
  margin-bottom: 30px;
  color: #333;
  font-weight: 350;
}
.process-section .box-cta .cta-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
}
.process-section .box-cta .cta-actions .btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 40px;
  border-radius: 100px;
  font-weight: bold;
  font-size: 16px;
  text-decoration: none;
  min-width: 300px;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 10px 10px 50px 0 rgba(0, 0, 0, 0.25);
}
.process-section .box-cta .cta-actions .btn-action:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.process-section .box-cta .cta-actions .btn-yellow {
  background: var(--btn, linear-gradient(92deg, #FFC700 0%, #FCFF6F 100%));
  color: #333;
}
.process-section .box-cta .cta-actions .btn-blue {
  background-color: #0080C8;
  color: #fff;
  letter-spacing: 1.6px;
  font-weight: 700;
}

/* =========================================
   RESPONSIVE (Mobile & Tablet)
========================================= */
@media (max-width: 991px) {
  .process-section {
    padding: 40px 0 60px;
  }
  .process-section .intro-title {
    font-size: 24px;
    line-height: 1.4;
  }
  .process-section .intro-title span {
    display: block;
  }
  .process-section {
    /* Điều chỉnh ảnh người mẫu trên Mobile */
  }
  .process-section .intro-model {
    position: relative;
    bottom: 0;
    height: 220px;
    margin-top: 30px;
    z-index: 1;
  }
  .process-section .intro-model.model-left, .process-section .intro-model.model-right {
    display: none;
  }
  .process-section .intro-model.mobile-only {
    display: block;
    width: 100%;
    height: auto;
    max-width: 400px;
    -o-object-fit: contain;
       object-fit: contain;
    bottom: -90px;
    margin-top: 0;
  }
  .process-section {
    /* Group 2 người mẫu lại bằng flex để căn giữa */
  }
  .process-section .intro-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 30px;
  }
  .process-section .process-box {
    padding: 40px 20px;
    border-radius: 25px;
    margin-top: 0;
  }
  .process-section .box-header .box-title {
    font-size: 24px;
  }
  .process-section .box-header .box-subtitle {
    font-size: 24px;
  }
  .process-section .box-header .box-subtitle span {
    display: block;
  }
  .process-section .timeline-phase {
    margin-bottom: 40px;
    gap: 15px;
  }
  .process-section .phase-steps {
    padding-bottom: 0;
  }
  .process-section .step-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .process-section .box-cta .cta-title {
    font-size: 24px;
  }
  .process-section .box-cta .cta-desc {
    text-align: justify;
  }
  .process-section .box-cta .cta-actions {
    flex-direction: column;
    align-items: center;
  }
  .process-section .box-cta .cta-actions .btn-action {
    width: 100%;
  }
}
/* =========================================
   MANAGEMENT METHOD SECTION (HÌNH THỨC QUẢN LÝ)
========================================= */
.management-method-section {
  background-color: #e2e8f0;
  /* Màu nền xanh xám nhạt */
  padding: 80px 0;
  color: #333;
}
.management-method-section .text-center {
  text-align: center;
}
.management-method-section .text-blue {
  color: #0080C8;
}
.management-method-section .font-weight-normal {
  font-weight: normal;
}
.management-method-section {
  /* --- 1. Phần Giới thiệu --- */
}
.management-method-section .method-intro {
  margin-bottom: 50px;
}
.management-method-section .method-intro .main-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.5;
  margin-bottom: 50px;
  color: #0080C8;
}
.management-method-section .method-intro .main-desc {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.9;
  color: #333;
  text-align: justify;
  max-width: 1030px;
  margin: 0 auto;
}
.management-method-section .section-subtitle {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 50px;
  letter-spacing: 1.6px;
}
.management-method-section {
  /* --- 2. Phần So sánh (Comparison) --- */
}
.management-method-section .method-comparison {
  margin-bottom: 50px;
}
.management-method-section .method-comparison .compare-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  max-width: 1030px;
  margin: 0 auto;
}
.management-method-section .method-comparison .compare-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 35px 40px;
  flex: 1;
  min-height: 250px;
}
.management-method-section .method-comparison .compare-card .card-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px dotted #cce5f4;
  color: #0080C8;
  display: block;
}
.management-method-section .method-comparison {
  /* Mũi tên gradient ở giữa */
}
.management-method-section .method-comparison .compare-arrow {
  flex-shrink: 0;
}
@media (max-width: 991px) {
  .management-method-section .method-comparison .compare-arrow {
    transform: rotate(90deg);
  }
}
.management-method-section .method-comparison {
  /* Card Phải có Layout chia 2 cột (Chữ - Logo) */
}
.management-method-section .method-comparison .card-right .card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.management-method-section .method-comparison .card-right .card-content .list-area {
  flex: 1;
}
.management-method-section .method-comparison .card-right .card-content .logo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 120px;
  flex-shrink: 0;
}
.management-method-section .method-comparison .card-right .card-content .logo-area .company-logo {
  width: 123px;
  /* Chỉnh kích thước logo cho phù hợp */
  height: auto;
}
@media (max-width: 991px) {
  .management-method-section .method-comparison .card-right .card-content {
    gap: 10px;
  }
}
.management-method-section .method-comparison {
  /* Style cho danh sách (Check & Target) */
}
.management-method-section .method-comparison .custom-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.management-method-section .method-comparison .custom-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}
.management-method-section .method-comparison .custom-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0px;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
}
@media (max-width: 991px) {
  .management-method-section .method-comparison .custom-list li {
    margin-bottom: 5px;
    padding-left: 25px;
  }
}
.management-method-section .method-comparison .custom-list {
  /* Icon Dấu tích xanh */
}
.management-method-section .method-comparison .custom-list.list-check li::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3e%3cg clip-path='url(%23clip0_1967_9407)'%3e%3cpath opacity='0.1' d='M11 22C17.0751 22 22 17.0751 22 11C22 4.92487 17.0751 0 11 0C4.92487 0 0 4.92487 0 11C0 17.0751 4.92487 22 11 22Z' fill='%230080C8'/%3e%3cpath d='M7 10.6667L9.52533 13.192C9.56283 13.2295 9.61367 13.2505 9.66667 13.2505C9.71967 13.2505 9.7705 13.2295 9.808 13.192L15 8' stroke='%230080C8' stroke-width='1.2'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_1967_9407'%3e%3crect width='22' height='22' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
}
.management-method-section .method-comparison .custom-list {
  /* Icon Vòng tròn đỏ (Target) */
}
.management-method-section .method-comparison .custom-list.list-target li::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3e%3cg clip-path='url(%23clip0_1967_9433)'%3e%3cpath d='M10 0C8.68678 0 7.38642 0.258658 6.17317 0.761205C4.95991 1.26375 3.85752 2.00035 2.92893 2.92893C1.05357 4.8043 0 7.34784 0 10C0 12.6522 1.05357 15.1957 2.92893 17.0711C3.85752 17.9997 4.95991 18.7362 6.17317 19.2388C7.38642 19.7413 8.68678 20 10 20C12.6522 20 15.1957 18.9464 17.0711 17.0711C18.9464 15.1957 20 12.6522 20 10C20 8.68678 19.7413 7.38642 19.2388 6.17317C18.7362 4.95991 17.9997 3.85752 17.0711 2.92893C16.1425 2.00035 15.0401 1.26375 13.8268 0.761205C12.6136 0.258658 11.3132 0 10 0ZM10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2ZM10 4C8.4087 4 6.88258 4.63214 5.75736 5.75736C4.63214 6.88258 4 8.4087 4 10C4 11.5913 4.63214 13.1174 5.75736 14.2426C6.88258 15.3679 8.4087 16 10 16C11.5913 16 13.1174 15.3679 14.2426 14.2426C15.3679 13.1174 16 11.5913 16 10C16 8.4087 15.3679 6.88258 14.2426 5.75736C13.1174 4.63214 11.5913 4 10 4ZM10 6C11.0609 6 12.0783 6.42143 12.8284 7.17157C13.5786 7.92172 14 8.93913 14 10C14 11.0609 13.5786 12.0783 12.8284 12.8284C12.0783 13.5786 11.0609 14 10 14C8.93913 14 7.92172 13.5786 7.17157 12.8284C6.42143 12.0783 6 11.0609 6 10C6 8.93913 6.42143 7.92172 7.17157 7.17157C7.92172 6.42143 8.93913 6 10 6Z' fill='%23EB5757'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_1967_9433'%3e%3crect width='20' height='20' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
}
.management-method-section {
  /* --- 3. Phần Lợi ích (Merits) --- */
}
.management-method-section .method-merits {
  max-width: 1000px;
  margin: 0 auto;
  /* Sử dụng CSS Grid để tạo layout 2 cột */
}
.management-method-section .method-merits .merits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 2 cột đều nhau */
  gap: 25px;
}
.management-method-section .method-merits .merit-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 30px 35px;
  display: flex;
  flex-direction: column;
}
.management-method-section .method-merits .merit-card .merit-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}
.management-method-section .method-merits .merit-card .merit-icon {
  width: 40px;
  height: 40px;
  background-color: #e6f4fc;
  /* Màu nền xanh nhạt của icon */
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.management-method-section .method-merits .merit-card .merit-icon svg {
  width: 20px;
  height: 20px;
  color: #007bc7;
  /* Màu icon xanh đậm */
}
.management-method-section .method-merits .merit-card .merit-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}
.management-method-section .method-merits .merit-card .merit-desc {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  margin: 0;
}

/* =========================================
   RESPONSIVE (Mobile & Tablet)
========================================= */
@media (max-width: 991px) {
  .management-method-section {
    padding: 50px 0;
  }
  .management-method-section .method-intro .main-title {
    font-size: 24px;
  }
  .management-method-section .method-intro .main-title span {
    display: block;
  }
  .management-method-section .section-subtitle {
    font-size: 24px;
  }
  .management-method-section {
    /* Bảng so sánh rớt xuống hàng dọc */
  }
  .management-method-section .method-comparison .compare-wrapper {
    flex-direction: column;
    gap: 0;
  }
  .management-method-section .method-comparison .compare-card {
    width: 100%;
    padding: 24px 15px;
    min-height: auto;
  }
  .management-method-section {
    /* Danh sách Merits rớt xuống 1 cột */
  }
  .management-method-section .method-merits .merits-grid {
    grid-template-columns: 1fr;
    /* 1 cột duy nhất */
  }
  .management-method-section .method-merits .merit-card {
    padding: 25px;
  }
}
/* =========================================
   WE HAVE SECTION (Sử dụng 1 ảnh đơn)
========================================= */
.sp-no-padding .container {
  max-width: 1608px;
}
.sp-no-padding .arrow-down {
  background: none;
  margin: 50px auto;
}
.sp-no-padding .system-group h2 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #0080C8;
}
.sp-no-padding .system-group .description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
  line-height: 1.8;
  color: #4F4F4F;
  margin-bottom: 50px;
}
.sp-no-padding .system-group .system-group__content {
  max-width: 1070px;
  padding-bottom: 75px;
}
.sp-no-padding .system-group .system-group__content .row [class^=col] {
  padding-left: 15px;
  padding-right: 15px;
}
.sp-no-padding .system-group .article {
  max-width: 100%;
}
.sp-no-padding .system-group .article:before {
  border-radius: 10px;
  background: rgba(47, 128, 237, 0.05);
}
.sp-no-padding .system-group .article .article__img img {
  width: 280px;
  height: 180px;
  border-radius: 16px;
}
.sp-no-padding .system-group .article__item h3 {
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #0080C8;
  letter-spacing: 1px;
}
.sp-no-padding .system-group .article__item h3 div {
  display: inline;
}
.sp-no-padding .system-group .article__item h3 span {
  display: block;
}
.sp-no-padding .system-group .article__item p {
  font-family: "Noto Sans JP", sans-serif;
}
@media (max-width: 991px) {
  .sp-no-padding .system-group h2 {
    font-size: 24px;
  }
  .sp-no-padding .system-group h2 span {
    display: block;
  }
  .sp-no-padding .system-group .description {
    font-size: 16px;
  }
  .sp-no-padding .system-group .system-group__content {
    padding-bottom: 20px;
  }
  .sp-no-padding .system-group .article__item {
    padding-left: 15px;
    padding-right: 15px;
  }
  .sp-no-padding .system-group .article__item h3 div {
    display: block;
  }
  .sp-no-padding .system-group .article__item h3 span {
    display: inline-block;
  }
}

.we-have {
  border-radius: 100px;
  padding-top: 100px;
  margin-top: 0;
}
.we-have .quote-group p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
}
@media (max-width: 991px) {
  .we-have {
    padding-top: 50px;
    border-radius: 50px;
  }
  .we-have .quote-group p {
    font-size: 16px;
    margin-bottom: 50px;
  }
  .we-have .arrow-down {
    width: 80px;
  }
}

/* =========================================
   GROUP SECTION (Sử dụng 1 ảnh đơn)
========================================= */
.group {
  background: rgba(47, 128, 237, 0.1);
  padding: 0 0 100px;
}
.group .logo-lgps {
  margin-top: 30px;
}
.group p {
  font-family: "Noto Sans JP", sans-serif;
}
.group::before {
  display: none;
}
.group .mark-group__title {
  color: #0080C8;
  opacity: 0.1;
}
.group .mark-group h2 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 32px;
  letter-spacing: 1.6px;
}
.group .group__two h3 {
  font-family: "Noto Sans JP", sans-serif;
}
.group .group__two img {
  border-radius: 16px;
}

@media (max-width: 991px) {
  .group .mark-group h2 {
    font-size: 24px;
    max-width: 100%;
  }
  .group .group__one p {
    text-align: justify;
  }
  .group .group__two img {
    width: 100%;
    height: auto;
  }
  .group .logo-lgps img {
    width: 100%;
    height: auto;
  }
}
/* =========================================
   VOICE SECTION (Sử dụng 1 ảnh đơn)
========================================= */
.voice {
  padding-top: 50px;
}
.voice .container {
  max-width: 1160px;
}
.voice .mark-group h2 {
  font-family: "Noto Sans JP", sans-serif;
}
.voice .mark-group__title {
  color: #E0E0E0;
  opacity: 1;
}
.voice p strong {
  font-family: "Noto Sans JP", sans-serif;
}
.voice p span {
  font-family: "Noto Sans JP", sans-serif;
  color: #4F4F4F;
}
.voice .voice__txt {
  padding: 20px;
}

@media (max-width: 991px) {
  .voice {
    padding-top: 0;
  }
  .voice p {
    text-align: justify;
  }
}
/* =========================================
   CONTACT CTA SECTION (Sử dụng 1 ảnh đơn)
========================================= */
.contact-cta-section {
  background: linear-gradient(93deg, #0080C8 0%, #FCFF6F 70.14%, #0080C8 100%);
  overflow: hidden;
  position: relative;
}
.contact-cta-section .cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.contact-cta-section .cta-content {
  flex: 1;
  color: #ffffff;
  z-index: 2;
}
.contact-cta-section .cta-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 2px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .contact-cta-section .cta-title {
    font-size: 24px;
    text-align: left;
  }
}
.contact-cta-section .cta-desc {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 15px;
}
@media (max-width: 768px) {
  .contact-cta-section .cta-desc {
    text-align: left;
  }
}
.contact-cta-section .cta-actions {
  display: flex;
  gap: 20px;
}
.contact-cta-section .cta-actions .btn-action {
  font-family: "Noto Sans JP", sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 35px;
  border-radius: 50px;
  font-weight: bold;
  text-decoration: none;
  min-width: 295px;
  box-shadow: 10px 10px 50px 0 rgba(0, 0, 0, 0.25);
  transition: all 0.3s;
}
.contact-cta-section .cta-actions .btn-action:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
.contact-cta-section .cta-actions .btn-yellow {
  background: var(--btn, linear-gradient(92deg, #FFC700 0%, #FCFF6F 100%));
  color: #333;
}
.contact-cta-section .cta-actions .btn-blue {
  background-color: #0080C8;
  color: #fff;
  letter-spacing: 1.6px;
  font-weight: 700;
}
.contact-cta-section .cta-models {
  flex: 0 0 50%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.contact-cta-section .cta-models .model-pair {
  display: block;
  height: 450px;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
  margin-bottom: -5px;
  opacity: 0;
  animation: slideUpFadeCombined 0.8s ease-out 0.4s forwards;
}

/* Animation cho cụm người */
@keyframes slideUpFadeCombined {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================================
   RESPONSIVE (Đưa hình lên trên nội dung)
========================================= */
@media (max-width: 991px) {
  .contact-cta-section {
    padding-top: 40px;
    background: linear-gradient(93deg, #0080C8 0%, #FCFF6F 140.14%, #0080C8 170%);
  }
  .contact-cta-section .cta-inner {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .contact-cta-section .cta-models {
    order: 1;
    width: 100%;
    justify-content: center;
    margin-bottom: 20px;
  }
  .contact-cta-section .cta-models .model-pair {
    height: 320px;
    margin-bottom: 0;
  }
  .contact-cta-section .cta-content {
    order: 2;
    padding-bottom: 40px;
  }
  .contact-cta-section .cta-actions {
    flex-direction: column;
  }
  .contact-cta-section .cta-actions .btn-action {
    width: 100%;
    min-width: 280px;
  }
}
.address {
  background: #fff;
}
.address .mark-group h2 {
  color: #4F4F4F;
}
.address .address__table table th,
.address .address__table table td {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 16px;
}
@media (max-width: 991px) {
  .address .address__table table th,
  .address .address__table table td {
    font-size: 14px;
    font-weight: 700;
  }
}
.address .address__table table th {
  font-weight: 700;
}
.address .address__table table td a {
  font-size: 16px;
}
@media (max-width: 991px) {
  .address .address__table table td a {
    font-size: 14px;
    font-weight: 700;
  }
}
.address .address__table table td p {
  font-weight: 400;
  font-size: 16px;
}
@media (max-width: 991px) {
  .address .address__table table td p {
    font-size: 14px;
    font-weight: 700;
  }
}

.mark-group__title {
  color: #f2f2f2;
  opacity: 1;
}

footer .footer-top {
  background: #0080C8;
}
footer .footer-top .social li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  transition: background-color 0.3s;
}
footer .footer-top .social li a:hover {
  background-color: #f0f0f0;
}
footer .footer-top .social li a svg {
  width: 20px;
  height: 20px;
  fill: #0080C8;
}
footer .copyright {
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.5px;
  font-weight: 400;
}
@media (max-width: 991px) {
  footer .footer-top ul li a.nav-link {
    font-size: 14px;
    font-weight: 400;
  }
}

.footer-action__call {
  display: flex;
  align-items: center;
  gap: 20px;
}
.footer-action__call .btn-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  padding: 10px 20px;
  border-radius: 50px;
  text-decoration: none;
  line-height: 1.3em;
  font-weight: bold;
  max-width: 240px;
  transition: opacity 0.3s, transform 0.3s;
  background: var(--btn, linear-gradient(92deg, #FFC700 0%, #FCFF6F 100%));
  margin: 0;
}
.footer-action__call .btn-action:hover {
  opacity: 0.8;
  transform: translateY(-2px);
  transition: opacity 0.3s, transform 0.3s;
}
.footer-action__call .btn-action:last-of-type {
  background: var(--btn-last, #0080C8);
  color: #fff;
}

.footer-action {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  /* Thiết lập mặc định là bị ẩn (trượt xuống dưới và mờ đi) */
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
  /* Class này sẽ được JS thêm vào khi cuộn qua banner */
}
.footer-action.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
@media (max-width: 767px) {
  .footer-action::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70px;
    height: 70px;
    background: url("../images/home/man-women-footer.png") no-repeat center center;
    background-size: 100% 100%;
    z-index: 1;
  }
  .footer-action {
    background: var(--btn, linear-gradient(92deg, #0080C8 0%, #FCFF6F 100%));
  }
  .footer-action .btn-action:first-child {
    display: none;
  }
  .footer-action .btn-action {
    max-width: none;
  }
  .footer-action .btn-action:last-child {
    gap: 0;
    flex-wrap: wrap;
    width: 100%;
    background: none;
    color: #644F21;
    font-family: "SF Pro Display", sans-serif;
  }
  .footer-action .btn-action span {
    line-height: 1.5em;
    font-family: "SF Pro", sans-serif;
  }
  .footer-action .btn-action span::before {
    right: 20px;
  }
  .footer-action a i {
    top: -3px;
  }
}

.i-email {
  width: 18px;
  height: 13px;
}
.i-email::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 16px;
  background: url("../images/icons/mail-black.svg") no-repeat center center;
}

.phone-desktop {
  display: block;
}
@media (max-width: 768px) {
  .phone-desktop {
    display: none;
  }
}

.phone-mobile {
  display: none;
}
@media (max-width: 768px) {
  .phone-mobile {
    display: block;
    margin-right: 10px;
  }
}/*# sourceMappingURL=fe.css.map */