/* CSS custom cho trang TaaS (thêm vào main.min.css sau nếu cần) */

 :root {
     --color-primary: #199744;
     --color-primary-light: #dff5e9;
     --color-secondary: #f97316;
     --color-accent: #1b3bf0;
     --color-accent-light: #9da9ef5b;
     --color-white: #ffffff;
     --color-black: #000000;
     --color-gray-100: #f8fafc;
     --color-gray-200: #f1f5f9;
     --color-gray-300: #e2e8f0;
     --color-gray-400: #cbd5e1;
     --color-gray-500: #94a3b8;
     --color-gray-600: #64748b;
     --color-gray-700: #475569;
     --color-gray-800: #334155;
     --color-gray-900: #1e293b;
     --color-white-100: #f0f9f4;
     --color-red: #ff0000;
     --background-gray: #f9fafb
 }


 /* btn outline */

 .btn.btn-outline {
     display: flex;
     position: relative;
     gap: 0.625rem;
     z-index: 2;
     border-color: transparent;
     background-color: var(--color-white);
     width: -moz-fit-content;
     width: fit-content;
     overflow: hidden;
     color: var(--color-black);

 }

 /*H2*/
 .taas-why .section-header h2,
 .taas-faq .section-header h2,
 .taas-workflow .section-header h2,
 .service-packages .section-header h2,
 .taas-services .section-header h2 {
     font-size: 2.5rem;
     color: var(--color-primary);
 }

 /* thẻ p*/
 .taas-why .section-header p,
 .taas-services .section-header p,
 .service-packages .section-header p {
     font-size: 1.125rem;
     /* rem:text-[18px] */
     color: var(--color-black);
 }

 /* Hero Section */
 .taas-hero {
     background: linear-gradient(to bottom, #0d6e26 0%, #199744 20%, #e8f5e9 75%, #ffffff 100%);
     position: relative;
 }

 .taas-hero::after {
     content: "";
     position: absolute;
     inset: 0;
     background:
         radial-gradient(white 1px, transparent 1px),
         radial-gradient(white 1px, transparent 1px);
     background-size: 60px 60px, 40px 40px;
     background-position: 0 0, 30px 30px;
     opacity: 0.15;
     animation: floatParticles 25s infinite linear;
 }

 @keyframes floatParticles {
     0% {
         transform: translate(0, 0);
     }

     100% {
         transform: translate(-30px, -30px);
     }
 }

 .taas-hero .title-40 {
     font-size: 2.5rem;
     color: var(--color-white);
 }

 .taas-hero .title-50 {
     font-size: 3.125rem;
     /* ~50px */
     color: var(--color-white);
 }

 @media (min-width: 1024px) {
     .taas-hero .title-50 {
         font-size: 3.75rem;
         /* điều chỉnh nếu cần to hơn */
     }
 }

 /* Đảm bảo hình ảnh responsive và không bị méo */
 .image-wrapper {
     position: relative;
     width: 100%;
     overflow: hidden;
 }

 .image-wrapper img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: contain;
     /* giữ nguyên tỷ lệ, không crop */
     object-position: center;
 }

 /* Animation cho item-right (combo: fadeUp khi load + float nhẹ liên tục) */
 .taas-hero .item-right {
     opacity: 0;
     transform: translateY(40px);
     animation:
         fadeUp 1.4s ease-out forwards,
         float 8s ease-in-out infinite;
     animation-delay: 0.5s, 2s;
     /* fadeUp nhanh, float bắt đầu sau khi load xong */
     position: relative;
     z-index: 1;
 }

 @keyframes fadeUp {
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-18px);
     }

     /* độ nhấc nhẹ, không quá cao */
 }

 /* Glow + Scale khi hover */
 .taas-hero .item-right:hover {
     transform: scale(1.05);
     transition: transform 0.5s ease;
 }

 .taas-hero .item-right:hover::before {
     content: "";
     position: absolute;
     inset: -40px;
     /* glow lan rộng hơn một chút */
     border-radius: 50%;
     background: radial-gradient(circle at 50% 50%,
             rgba(25, 151, 68, 0.45) 10%,
             rgba(25, 151, 68, 0.20) 50%,
             transparent 80%);
     opacity: 0.9;
     z-index: -1;
     animation: pulseGlow 3.5s ease-in-out infinite;
 }

 @keyframes pulseGlow {

     0%,
     100% {
         opacity: 0.7;
         transform: scale(1);
     }

     50% {
         opacity: 1;
         transform: scale(1.08);
     }
 }


 /* Future Badge - đơn giản, nằm ngay trên h1 */
 .future-badge {
     margin-bottom: 1.5rem;
     /* khoảng cách dưới badge và h1 */
 }

 .future-badge .inline-flex {
     transition: all 0.3s ease;
 }

 .future-badge:hover .inline-flex {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(25, 151, 68, 0.3);
 }

 /* Pulse chấm tròn */
 .future-badge .animate-pulse {
     animation: pulseDot 2s infinite;
 }

 @keyframes pulseDot {

     0%,
     100% {
         opacity: 0.5;
         transform: scale(0.9);
     }

     50% {
         opacity: 1;
         transform: scale(1.4);
     }
 }


 /* Why Section */

 .taas-why,
 .taas-comparison {
     background-color: var(--background-gray);
 }

 .taas-why .section-header {
     max-width: 80%;
     /* Giới hạn width để không quá rộng */
     margin-left: auto;
     margin-right: auto;
 }

 /* Fix padding cho item-left image */
 .taas-why .item-left {
     transition: all 0.3s ease;
     /* Thêm hiệu ứng mượt */
 }

 @media (max-width: 1023px) {
     .taas-why .item-left {
         padding: 1rem;
         /* Giảm padding trên mobile để khoảng cách ổn, không chiếm chỗ */
     }
 }

 .taas-why .item-left:hover {
     box-shadow: 0 4px 12px rgba(25, 151, 68, 0.1);
     /* Thêm shadow hover để nổi bật */
 }

 /* Đảm bảo image không bị méo và có khoảng cách nội bộ */
 .taas-why .image-wrapper img {
     padding: 0.5rem;
     /* Thêm padding nội bộ cho image nếu cần khoảng cách với border */
 }

 .taas-why .benefits-list {
     display: flex;
     flex-direction: column;
     padding-top: 4rem;
 }

 .taas-benefit {
     background-color: var(--color-white-100);
     /* Nền xanh nhạt nhẹ */
     padding: 1.5rem;
     border-radius: 12px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
     transition: transform 0.3s ease;
 }

 .taas-benefit:hover {
     transform: translateY(-5px);
 }

 /* CSS cho Comparison Table */

 .taas-table {
     width: 100%;
     border-collapse: separate;
     border-spacing: 0;
     border-radius: 8px;
     overflow: hidden;
 }

 .taas-table th,
 .taas-table td {
     padding: 1.25rem 1.5rem;
     text-align: left;
     font-size: 1rem;
 }

 .taas-table th {
     background-color: var(--color-primary);
     /* Xanh lá chủ đạo */
     color: var(--color-white);
 }

 .self-host-col {
     background-color: var(--color-white-100);
     /* Xanh nhạt */
 }

 .saas-col {
     background-color: var(--color-accent-light);
     /* Xanh dương nhạt */
 }

 .taas-check {
     color: var(--color-primary);
     font-weight: bold;
 }

 .taas-x {
     color: var(--color-red);
     font-weight: bold;
 }

 /* Responsive cho bảng */
 @media (max-width: 768px) {
     .taas-table {
         font-size: 0.875rem;
     }

     .taas-table th,
     .taas-table td {
         padding: 1rem;
     }
 }



 /* TaaS Services - Card Style*/


 .taas-service-card {
     position: relative;
     overflow: hidden;
     border-radius: 1rem;
     /* rounded-2xl ~16px */
     box-shadow: 0 4px 6px 1px rgba(0, 0, 0, 0.1), 0 2px 4px 1px rgba(0, 0, 0, 0.05);
     /* Shadow nhẹ, blur */
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     padding: 1.25rem;
 }

 .taas-service-card:hover {
     transform: translateY(-6px);
     /* Lift nhẹ thay tilt để tránh lỗi */
     box-shadow: 0 10px 15px -3px rgba(107, 236, 129, 0.178), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
 }

 /* Badge chung cho tất cả card */
 .taas-service-card .badge {
     position: absolute;
     /* Nổi lên trên card khoảng 12px */
     font-size: 0.65rem;
     /* Nhỏ gọn */
     font-weight: 600;
     padding: 0.25rem 0.75rem;
     border-radius: 9999px;
     /* Oval tròn hoàn toàn, giống thiết kế */
     color: var(--color-white);
     z-index: 10;
     /* Đảm bảo nổi lên trên icon */
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     /* Shadow nhẹ để nổi bật */
     right: 16px;
 }

 /* Badge ở góc trên TRÁI (HIGH CONVERSION, NEW ERA) */
 .taas-service-card .badge-waas {
     background-color: var(--color-primary);
     /* Xanh chủ đạo */
 }

 /* Badge ở góc trên PHẢI (HOT) */
 .taas-service-card .badge-automation {
     /* Cách lề phải 16px */
     background-color: var(--color-secondary);
     /* Cam cho HOT */
 }

 .taas-service-card .badge-agentic {
     /* Cách lề phải 16px */
     background-color: var(--color-accent);
     /* Cam cho HOT */
 }

 /* Điều chỉnh icon để badge chồng lên */
 .taas-service-card img {
     position: relative;
     z-index: 1;
     /* Icon nằm dưới badge */
 }

 .transition-colors {
     color: var(--color-primary);
     transition: all 0.3s ease;
 }

 .transition-colors:hover {
     font-weight: bold;
     transform: translateY(-2px);

 }

 /* Responsive cho card nội dung */
 @media (max-width: 767px) {
     .taas-service-card {
         padding: 1.25rem;
         /* Giảm padding trên mobile */
     }

     .taas-service-card h3 {
         font-size: 1.25rem;
     }

     .taas-service-card p,
     .taas-service-card a {
         font-size: 0.875rem;
     }
 }

 /* Modal */
 .modal {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.6);
     z-index: 9999;
     align-items: center;
     justify-content: center;
     backdrop-filter: blur(4px);
 }

 .modal.active {
     display: flex;
 }

 .modal-content {
     background: white;
     border-radius: 16px;
     max-width: 1200px;
     width: 90%;
     padding: 2rem;
     position: relative;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
     transform: scale(0.95);
     transition: transform 0.3s ease;
 }

 .modal.active .modal-content {
     transform: scale(1);
 }

 .modal-close {
     position: absolute;
     top: 1rem;
     right: 1.5rem;
     font-size: 2rem;
     color: #666;
     cursor: pointer;
     line-height: 1;
 }

 .modal h3 {
     font-size: 1.75rem;
     margin-bottom: 0.5rem;
 }

 .modal .subtitle {
     font-size: 0.875rem;
     text-transform: uppercase;
     color: #666;
     margin-bottom: 1.5rem;
 }

 .modal-checklist li {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     margin-bottom: 0.75rem;
     font-size: 1rem;
 }

 .modal-checklist .check {
     color: #199744;
     font-size: 1.25rem;
 }

 .modal .btn-primary {
     background-color: #199744;
     color: white;
     padding: 1rem;
     border-radius: 9999px;
     font-weight: 600;
     width: 100%;
     text-align: center;
     transition: all 0.3s;
 }

 .modal .btn-primary:hover {
     background-color: #166d38;
 }


 /* ====================== SERVICE PACKAGES ====================== */

 .service-packages .tab-btn {
     transition: all 0.3s ease;
     display: flex;
     margin: 0.25rem;
     padding: 0.75rem;
     border-radius: 9999px;
     background-color: var(--color-white);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

 }

 .service-packages .tab-btn.active {
     background-color: var(--color-primary);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     color: var(--color-white);
     font-weight: 600;
 }

 .package-card {
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .package-card:hover {
     transform: translateY(-12px);
     box-shadow: 0 25px 50px -12px rgb(25 151 68 / 0.15);
 }

 .package-card .text-4xl {
     line-height: 1;
 }

 .package-card .rounded-full {
     background-color: var(--color-primary);
     margin-left: 120px;
 }

 /* Feature Comparison Table */
 .service-packages table th,
 .service-packages table td {
     vertical-align: middle;
 }

 .service-packages table thead th {
     background-color: var(--color-primary);
     /* #199744 */
     color: white;
     font-weight: 600;
 }

 .service-packages table tbody tr.bg-gray-50 {
     background-color: #f8fafc;
     font-weight: 600;
     color: #1e293b;
 }

 .service-packages table td.text-center {
     font-size: 1.5rem;
     line-height: 1;
 }

 .service-packages table .text-green-600 {
     color: #199744;
 }

 .service-packages table .text-gray-400 {
     color: #9ca3af;
     font-size: 1.5rem;
 }

 /* Responsive nhỏ gọn hơn trên mobile */
 @media (max-width: 767px) {
     .service-packages table {
         font-size: 0.875rem;
     }

     .service-packages table th,
     .service-packages table td {
         padding: 0.75rem 1rem;
     }

     .service-packages table td.text-center {
         font-size: 1.25rem;
     }
 }

 /* ====================== QUY TRÌNH TRIỂN KHAI ====================== */
 .taas-workflow {
     background-color: var(--background-gray);
 }


 /* Timeline đường kẻ dọc */
 .workflow-steps::before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 4px;
     background: linear-gradient(to bottom, var(--color-primary), var(--color-gray-100));
     border-radius: 9999px;
 }

 @media (min-width: 1024px) {
     .workflow-steps::before {
         left: 50%;
         transform: translateX(-50%);
     }
 }

 /* Dot số bước */
 .step-dot {
     width: 3rem;
     height: 3rem;
     background-color: var(--color-primary);
     color: var(--color-white);
     font-size: 1.25rem;
     font-weight: bold;
     box-shadow: 0 4px 12px rgba(25, 151, 68, 0.25);
     transition: all 0.3s ease;
 }

 .step-item:hover .step-dot {
     transform: scale(1.15);
     box-shadow: 0 8px 20px rgba(25, 151, 68, 0.35);
 }

 /* Zigzag layout trên desktop */
 @media (min-width: 1024px) {
     .step-item:nth-child(odd) {
         padding-right: 55%;
         text-align: right;
     }

     .step-item:nth-child(odd) .step-dot {
         right: 0rem;
         left: auto;
     }

     .step-item:nth-child(even) {
         padding-left: 55%;
     }

     /* .step-item:nth-child(even) .step-dot {
         left: -1.5rem;
     } */
 }

 /* Mobile: xếp dọc, dot bên trái */
 @media (max-width: 1023px) {
     .step-item {
         padding-left: 4rem !important;
         text-align: left !important;
     }

     .step-dot {
         left: 0 !important;
     }

     .workflow-steps::before {
         left: 1.5rem;
     }
 }

 /* Hover effect cho text */
 .step-item:hover h4 {
     color: var(--color-primary);
 }


 /* FAQ Section */
 .faq-toggle {
     transition: all 0.3s ease;
 }

 .faq-title {
     transition: color 0.3s ease;
 }

 .faq-toggle:hover .faq-title,
 .faq-item.active .faq-title {
     color: #199744 !important;
 }

 .faq-toggle:hover i,
 .faq-item.active i {
     color: #199744 !important;
     transform: rotate(180deg);
 }

 .faq-content {
     transition: max-height 0.5s ease-in-out, padding 0.3s ease;
 }

 .faq-item.active .faq-content {
     max-height: 500px;
     /* đủ lớn để chứa nội dung, hoặc dùng JS tính động */
     padding-bottom: 1.5rem;
 }


 /* Contact Section */
 .taas-contact {
     background: var(--background-gray);
 }

 .taas-contact input::placeholder,
 .taas-contact textarea::placeholder {
     color: #cbd5e1;
 }

 .taas-contact select {
     cursor: pointer;
 }

 .taas-contact .form-group:focus-within label {
     color: var(--color-primary);
 }

 .taas-contact .custom-pd {
     padding: 0.75rem;
 }

 .taas-contact .btn-form {
     background-color: var(--color-primary);
     border-radius: 9999px;
     padding: 0.75rem;
 }

 .taas-contact .icon-box {
    width: 64px;
    height: 64px;
    background: #e8f7ef;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.15);
}

.taas-contact .icon-box i {
    font-size: 24px;
    color: var(--color-primary);
}

.taas-contact .border-form {
    border-radius: 1rem;
}

 /* Responsive */
 @media (max-width: 1023px) {
     .taas-hero .item-right {
         margin-bottom: 2rem;
     }

     .taas-hero .container {
         margin-top: 2.5rem;
     }

     .taas-why .benefits-list {
         padding-top: 0rem;
     }

     .package-card .rounded-full {
         margin-left: 0px;
     }

     .taas-workflow .workflow-intro.sticky {
         position: relative;
         top: 0;
         margin-bottom: 3rem;
     }

     .faq-toggle {
         padding: 1.25rem 0;
     }

     .faq-title {
         font-size: 1.125rem;
     }

     /* Giảm độ nhấc float trên mobile để tránh chiếm chỗ */
     @keyframes float {

         0%,
         100% {
             transform: translateY(0);
         }

         50% {
             transform: translateY(-12px);
         }
     }
 }