/* --- ContentViet Styles V2.6.0 (Dịch Vụ Web Chuyên Nghiệp) --- */

/* Thiết lập Font chữ tổng thể sang trọng (Be Vietnam Pro) */
.cv-service-hero, .cv-feature-grid-section, .cv-solution-pricing-section, .cv-expert-contact-section {
    font-family: 'Be Vietnam Pro', sans-serif;
    box-sizing: border-box; 
    margin-bottom: 30px; 
    position: relative;
}
.cv-service-hero *, .cv-feature-grid-section *, .cv-solution-pricing-section *, .cv-expert-contact-section * { 
    box-sizing: border-box; 
}

/* Font cho Tiêu đề (Montserrat) */
.cv-sh-headline, .cv-section-title, .cv-sp-card-head h3, .cv-ec-title, .cv-btn, .cv-fg-title, .cv-ec-details h4 {
    font-family: 'Montserrat', sans-serif;
}

/* =========================================
   DÙNG CHUNG (GLOBAL BUTTONS & TITLES)
   ========================================= */

.cv-btn {
    display: inline-block; padding: 12px 28px; border-radius: 30px;
    font-weight: 700; font-size: 14px; text-transform: uppercase; text-decoration: none; text-align: center;
    transition: all 0.3s ease; border: 2px solid transparent; cursor: pointer;
}
.cv-btn-dark { background: #1a252f; color: #fff !important; border-color: #1a252f; }
.cv-btn-dark:hover { background: #2c3e50; border-color: #2c3e50; }
.cv-btn-block { display: block; width: 100%; }

.cv-section-title { font-weight: 800; font-size: 32px; color: var(--cv-fg-title, var(--cv-sp-title, #2c3e50)); margin-bottom: 10px; text-align: center; }
.cv-section-subtitle { font-size: 16px; color: #7f8c8d; text-align: center; margin-bottom: 40px; line-height: 1.5; }


/* =========================================
   1. SERVICE HERO
   ========================================= */
.cv-service-hero { background: linear-gradient(135deg, #f8f9fa 0%, #eef2f3 100%); padding: 80px 20px; border-radius: 12px; overflow: hidden; }
.cv-sh-container { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 50px; }
.cv-sh-content { flex: 1; }

.cv-sh-tagline { 
    display: inline-block; background: #fff; color: var(--cv-sh-tagline, #f39c12); 
    padding: 6px 15px; border-radius: 20px; font-weight: 700; font-size: 12px; 
    margin-bottom: 20px; letter-spacing: 1px;
    border: 1px solid var(--cv-sh-tagline, #f39c12);
}
.cv-sh-headline { font-weight: 900; font-size: 42px; line-height: 1.3; color: var(--cv-sh-title, #2c3e50); margin-bottom: 20px; }
.cv-sh-headline span { color: var(--cv-sh-tagline, #3498db); } 
.cv-sh-desc { font-size: 17px; color: #555; line-height: 1.6; margin-bottom: 30px; }
.cv-sh-buttons { display: flex; gap: 15px; flex-wrap: wrap; }

/* Nút Hero dùng Biến CSS */
.cv-sh-buttons .cv-btn-primary { 
    background: var(--cv-sh-btn1, #f39c12); color: #fff !important; border-color: var(--cv-sh-btn1, #f39c12); 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
}
.cv-sh-buttons .cv-btn-primary:hover { opacity: 0.9; transform: translateY(-2px); }
.cv-sh-buttons .cv-btn-outline { 
    background: transparent; color: var(--cv-sh-btn2, #2c3e50) !important; border-color: var(--cv-sh-btn2, #2c3e50); 
}
.cv-sh-buttons .cv-btn-outline:hover { background: var(--cv-sh-btn2, #2c3e50); color: #fff !important; }

.cv-sh-image { flex: 1; position: relative; }
.cv-sh-mockup-wrap { position: relative; text-align: center; }
.cv-sh-mockup-wrap img { width: 100%; max-width: 500px; height: auto; filter: drop-shadow(0 20px 30px rgba(0,0,0,0.15)); }
.cv-sh-stat-badge { 
    position: absolute; bottom: 20px; left: -20px; background: #fff; padding: 15px 20px; border-radius: 8px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 10px; 
    font-weight: 800; color: #27ae60; font-size: 16px; z-index: 2; animation: floatUp 3s ease-in-out infinite; 
}
@keyframes floatUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }


/* =========================================
   2. FEATURE GRID
   ========================================= */
.cv-feature-grid-section { padding: 60px 0; }
.cv-fg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; max-width: 1100px; margin: 0 auto; }
.cv-fg-card { background: #fff; padding: 30px 20px; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); text-align: center; transition: transform 0.3s, box-shadow 0.3s; border: 1px solid #f1f1f1; }
.cv-fg-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.cv-fg-icon { 
    width: 60px; height: 60px; margin: 0 auto 20px; 
    background: var(--cv-fg-icon-bg, rgba(231,76,60,0.1)); 
    color: var(--cv-fg-icon, #e74c3c); 
    font-size: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; 
}
.cv-fg-title { font-weight: 700; font-size: 18px; color: var(--cv-fg-title, #2c3e50); margin-bottom: 10px; }
.cv-fg-desc { font-size: 14.5px; color: #666; line-height: 1.6; margin: 0; }


/* =========================================
   3. SOLUTION PRICING
   ========================================= */
.cv-solution-pricing-section { padding: 60px 0; background: #fafafa; border-radius: 12px; }
.cv-sp-wrapper { display: flex; max-width: 900px; margin: 0 auto; gap: 30px; justify-content: center; align-items: stretch; }
.cv-sp-card { flex: 1; background: #fff; border-radius: 12px; border: 1px solid #e0e0e0; box-shadow: 0 5px 15px rgba(0,0,0,0.05); padding: 40px 30px; position: relative; transition: all 0.3s; display: flex; flex-direction: column; }
.cv-sp-card.cv-sp-popular { 
    border: 2px solid var(--cv-sp-popular, #f39c12); 
    transform: scale(1.03); box-shadow: 0 15px 35px rgba(0,0,0,0.1); z-index: 2; 
}
.cv-sp-badge { 
    position: absolute; top: -15px; left: 50%; transform: translateX(-50%); 
    background: var(--cv-sp-popular, #f39c12); color: #fff; font-size: 12px; font-weight: 800; 
    padding: 6px 16px; border-radius: 20px; 
}
.cv-sp-card-head { text-align: center; margin-bottom: 30px; border-bottom: 1px solid #eee; padding-bottom: 20px; }
.cv-sp-card-head h3 { font-size: 22px; font-weight: 800; color: var(--cv-sp-title, #2c3e50); margin: 0 0 10px 0; }
.cv-sp-card-head p { font-size: 14px; color: #7f8c8d; margin: 0 0 15px 0; }
.cv-sp-price { font-size: 28px; font-weight: 800; color: var(--cv-sp-price, #e74c3c); }
.cv-sp-card-body { flex-grow: 1; margin-bottom: 30px; }
.cv-sp-card-body ul { list-style: none; padding: 0; margin: 0; }
.cv-sp-card-body ul li { position: relative; padding-left: 30px; margin-bottom: 15px; font-size: 15px; color: #444; line-height: 1.5; }
.cv-sp-card-body ul li::before { content: '\f058'; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 2px; color: #27ae60; font-size: 18px; }
.cv-sp-card-foot { margin-top: auto; }

/* Nút Pricing dùng Biến CSS */
.cv-btn-popular { background: var(--cv-sp-popular, #f39c12); color: #fff !important; border-color: var(--cv-sp-popular, #f39c12); box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.cv-btn-popular:hover { opacity: 0.9; transform: translateY(-2px); }
.cv-btn-outline-popular { background: transparent; color: var(--cv-sp-popular, #f39c12) !important; border-color: var(--cv-sp-popular, #f39c12); }
.cv-btn-outline-popular:hover { background: var(--cv-sp-popular, #f39c12); color: #fff !important; }


/* =========================================
   4. EXPERT CONTACT
   ========================================= */
.cv-expert-contact-section { padding: 60px 0; }
.cv-ec-container { max-width: 1000px; margin: 0 auto; display: flex; background: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); overflow: hidden; }
.cv-ec-info { flex: 1; padding: 50px; background: #fafafa; border-right: 1px solid #eee; }
.cv-ec-title { font-weight: 800; font-size: 28px; color: var(--cv-ec-title, #2c3e50); margin: 0 0 15px 0; line-height: 1.3; }
.cv-ec-desc { font-size: 15.5px; color: #666; margin-bottom: 40px; line-height: 1.6; }
.cv-ec-profile { display: flex; align-items: center; gap: 20px; }
.cv-ec-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.cv-ec-details h4 { font-weight: 700; font-size: 18px; margin: 0 0 5px 0; color: #111; }
.cv-ec-details p { font-size: 13.5px; color: var(--cv-ec-btn, #e74c3c); font-weight: 600; margin: 0 0 10px 0; }
.cv-ec-social i { color: #aaa; margin-right: 10px; cursor: pointer; transition: color 0.3s; font-size: 16px; }
.cv-ec-social i:hover { color: var(--cv-ec-btn, #3498db); }
.cv-ec-form-wrapper { flex: 1; padding: 50px; display: flex; flex-direction: column; justify-content: center; }

/* Customize form inputs specifically to ensure elegance */
.cv-ec-form-wrapper input:not([type="submit"]), .cv-ec-form-wrapper textarea { 
    width: 100%; padding: 14px 18px; border: 1px solid #ddd; border-radius: 8px; 
    margin-bottom: 18px; font-family: 'Be Vietnam Pro', sans-serif; font-size: 14.5px; 
    outline: none; transition: border 0.3s, box-shadow 0.3s; background: #fdfdfd; 
}
.cv-ec-form-wrapper input:not([type="submit"]):focus, .cv-ec-form-wrapper textarea:focus { 
    border-color: var(--cv-ec-btn, #3498db); box-shadow: 0 0 0 3px rgba(0,0,0,0.03); 
}
.cv-ec-form-wrapper input[type="submit"], .cv-ec-form-wrapper button[type="submit"] { 
    width: 100%; background: var(--cv-ec-btn, #e67e22); color: #fff; font-weight: 700; 
    border: none; cursor: pointer; text-transform: uppercase; font-family: 'Montserrat', sans-serif; 
    padding: 16px; border-radius: 8px; transition: opacity 0.3s; font-size: 15px; letter-spacing: 0.5px;
}
.cv-ec-form-wrapper input[type="submit"]:hover, .cv-ec-form-wrapper button[type="submit"]:hover { 
    opacity: 0.9; 
}


/* =========================================
   RESPONSIVE MOBILE
   ========================================= */
@media (max-width: 768px) {
    .cv-sh-container { flex-direction: column; text-align: center; }
    .cv-sh-buttons { justify-content: center; }
    .cv-sh-stat-badge { left: 50%; transform: translateX(-50%); bottom: -20px; animation: none; width: max-content; }
    
    .cv-sp-wrapper { flex-direction: column; }
    .cv-sp-card.cv-sp-popular { transform: none; }
    
    .cv-ec-container { flex-direction: column; }
    .cv-ec-info { border-right: none; border-bottom: 1px solid #eee; padding: 35px 25px; }
    .cv-ec-form-wrapper { padding: 35px 25px; }
}