/* --- ContentVietWeb Styles V3.3.0 --- */
:root {
    --cvw-primary: #2563eb;
    --cvw-secondary: #facc15;
    --cvw-dark: #111827;
    --cvw-text-main: #334155;
}

.cvw-funnel-box, .cvw-order-summary-box, .cvw-alert-box, .cvw-hero-optin-section,
.cvw-service-hero, .cvw-feature-grid-section, .cvw-solution-pricing-section, .cvw-expert-contact-section,
.cvw-wcu-section, .cvw-sg-section, .cvw-promo-card-wrapper, .cvw-lead-form-section, .cvw-testi-section, .cvw-steps-section {
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box; margin-bottom: 30px; position: relative;
    line-height: 1.6;
}
.cvw-funnel-box *, .cvw-service-hero *, .cvw-wcu-section *, .cvw-sg-section *, .cvw-promo-card-wrapper *, .cvw-lead-form-section *, .cvw-testi-section *, .cvw-steps-section * { 
    box-sizing: border-box; 
}
h1, h2, h3, h4, h5, h6, .cvw-font-heading { font-family: 'Montserrat', sans-serif; }

/* =========================================
   BẢN CŨ CÓ SỬ DỤNG CSS VARIABLES (Custom Color)
   ========================================= */
.cvw-funnel-box.style_bonus { background: var(--cvw-bg, #fff); border-radius: 8px; border: 1px solid #e0e0e0; box-shadow: 0 5px 20px rgba(0,0,0,0.08); }
.cvw-funnel-box.style_bonus .cvw-box-header { background: var(--cvw-bg, #001f5b); color: var(--cvw-text, #fff); padding: 15px 20px; }
.cvw-funnel-box.style_bonus .cvw-headline { color: var(--cvw-text, #fff); font-weight: 800; font-size: 20px; margin: 0; text-transform: uppercase; }
.cvw-order-summary-box { background: var(--cvw-bg, #fff); border-radius: 8px; border: 1px solid #eee; }
.cvw-os-headline, .cvw-os-sub { color: var(--cvw-accent, #c0392b); font-weight: 800; text-transform: uppercase; text-align: center;}
.cvw-alert-yellow { background: var(--cvw-bg, #fff9c4); color: var(--cvw-text, #333); }
.cvw-alert-dark { background: var(--cvw-bg, #111); color: var(--cvw-text, #fff); }
.cvw-service-hero { background: var(--cvw-bg, linear-gradient(135deg, #f8f9fa 0%, #eef2f3 100%)); padding: 80px 20px; border-radius: 12px; }
.cvw-service-hero .cvw-btn-primary { background: var(--cvw-btn, #f39c12); border-color: var(--cvw-btn, #f39c12); }

/* =========================================
   MODULE MỚI 1 - WHY CHOOSE US
   ========================================= */
.cvw-wcu-section { background: var(--cvw-bg, #111827); color: #fff; padding: 80px 20px; border-radius: 0px; overflow: hidden; }
.cvw-wcu-container { max-width: 1200px; margin: 0 auto; }
.cvw-wcu-section.layout-grid_square .cvw-wcu-container { display: flex; align-items: center; gap: 60px; }
.cvw-wcu-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cvw-wcu-card { background: var(--cvw-card, #1f2937); padding: 30px; border-radius: 12px; transition: transform 0.3s; }
.cvw-wcu-card:hover { transform: translateY(-5px); }
.cvw-wcu-icon { font-size: 30px; color: var(--cvw-accent, #ea580c); margin-bottom: 20px; }
.cvw-wcu-card h4 { font-size: 18px; font-weight: 700; margin: 0 0 10px 0; color: #fff; }
.cvw-wcu-card p { font-size: 14px; color: #9ca3af; margin: 0; }
.cvw-wcu-text { flex: 1; }
.cvw-wcu-text h2 { font-size: 40px; font-weight: 800; line-height: 1.2; margin-bottom: 20px; color: #fff; }
.cvw-wcu-text p { font-size: 16px; color: #cbd5e1; margin-bottom: 30px; }
.cvw-wcu-list-item { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; font-weight: 600; font-size: 16px; }
.cvw-wcu-num { background: rgba(234,88,12,0.2); color: var(--cvw-accent, #ea580c); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-family: 'Montserrat'; font-weight: 700; }
.cvw-wcu-header-center { text-align: center; margin-bottom: 50px; }
.cvw-wcu-header-center h2 { font-size: 36px; font-weight: 800; color: #fff; margin-bottom: 15px; }
.cvw-wcu-header-center p { font-size: 16px; color: #9ca3af; }
.cvw-wcu-grid-horz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }
.cvw-wcu-accent { color: var(--cvw-accent, #ea580c) !important; font-size: 24px !important; font-weight: 700 !important; margin-bottom: 15px !important; }
.cvw-wcu-card-horz p { color: #cbd5e1; font-size: 15px; }

/* =========================================
   MODULE MỚI 2 - SPECIAL GIFT
   ========================================= */
.cvw-sg-section { background: var(--cvw-bg, #ea580c); border-radius: 20px; padding: 60px 20px; text-align: center; color: #fff; position: relative; overflow: hidden; }
.cvw-sg-bg-icon { position: absolute; top: -30px; right: 20px; font-size: 200px; color: rgba(255,255,255,0.1); transform: rotate(15deg); pointer-events: none; }
.cvw-sg-content { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; }
.cvw-sg-content h2 { font-size: 36px; font-weight: 900; margin-bottom: 10px; color: #fff; text-transform: uppercase; }
.cvw-sg-sub { font-size: 16px; font-weight: 500; margin-bottom: 40px; }
.cvw-sg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
.cvw-sg-item { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); border-radius: 12px; padding: 30px 20px; backdrop-filter: blur(5px); }
.cvw-sg-item i { font-size: 30px; margin-bottom: 15px; }
.cvw-sg-item h4 { font-size: 18px; font-weight: 700; margin-bottom: 10px; color: #fff; }
.cvw-sg-item p { font-size: 14px; opacity: 0.9; margin: 0; }
.cvw-sg-btn { display: inline-block; background: #fff; color: var(--cvw-bg, #ea580c); font-family: 'Montserrat'; font-weight: 800; padding: 15px 40px; border-radius: 30px; font-size: 16px; text-decoration: none; text-transform: uppercase; box-shadow: 0 10px 20px rgba(0,0,0,0.1); transition: transform 0.3s; }
.cvw-sg-btn:hover { transform: translateY(-3px); color: var(--cvw-bg, #ea580c); }

/* =========================================
   MODULE MỚI 3 - PROMO CARD
   ========================================= */
.cvw-promo-card-wrapper { padding: 40px 20px; background: linear-gradient(to bottom right, #f8fafc, #eff6ff); border-radius: 20px; display: flex; justify-content: center; }
.cvw-promo-card { background: #fff; box-shadow: 0 20px 50px rgba(0,0,0,0.05); border-radius: 20px; display: flex; max-width: 900px; width: 100%; overflow: hidden; padding: 50px; gap: 50px; align-items: center; }
.cvw-promo-left { flex: 1.2; }
.cvw-promo-tag { background: var(--cvw-accent, #facc15); color: #000; font-size: 12px; font-weight: 800; font-family: 'Montserrat'; padding: 6px 15px; border-radius: 20px; display: inline-block; margin-bottom: 20px; text-transform: uppercase; }
.cvw-promo-left h2 { font-size: 32px; font-weight: 800; color: #0f172a; line-height: 1.3; margin-bottom: 15px; }
.cvw-promo-left p { color: #64748b; font-size: 15px; margin-bottom: 30px; }
.cvw-promo-btn { display: block; text-align: center; background: var(--cvw-accent, #facc15); color: #000; font-family: 'Montserrat'; font-weight: 800; padding: 15px; border-radius: 8px; text-decoration: none; text-transform: uppercase; margin-bottom: 10px; transition: opacity 0.3s; }
.cvw-promo-btn:hover { opacity: 0.9; color: #000; }
.cvw-promo-note { text-align: center; font-size: 12px; color: #94a3b8; font-style: italic; }
.cvw-promo-right { flex: 1; display: flex; flex-direction: column; gap: 15px; }
.cvw-promo-item { display: flex; align-items: center; background: #fff; border: 1px solid #e2e8f0; padding: 15px 20px; border-radius: 12px; gap: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.02); }
.cvw-promo-icon { color: var(--cvw-icon, #38bdf8); font-size: 24px; }
.cvw-promo-text { font-size: 14px; font-weight: 600; color: #334155; }

/* =========================================
   MODULE LEAD FORM & CRM BUILT-IN (FIX LỖI SELECT BỊ CHE)
   ========================================= */
.cvw-lead-form-section { display: flex; background: #fff; border-radius: 20px; overflow: hidden; align-items: stretch; max-width: 1100px; margin: 0 auto; box-shadow: 0 20px 40px rgba(0,0,0,0.12); }
.cvw-lf-left { flex: 1; position: relative; background-color: var(--cvw-bg, #2563eb); background-size: cover; background-position: center; display: flex; align-items: center; }
.cvw-lf-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.85; z-index: 1; transition: opacity 0.3s; }
.cvw-lf-left-content { position: relative; z-index: 2; padding: 60px; color: #fff; width: 100%; }
.cvw-lf-left-content h2 { font-size: 36px; font-weight: 800; color: #fff; margin-bottom: 20px; line-height: 1.25; }
.cvw-lf-left-content p { font-size: 16px; opacity: 0.9; margin-bottom: 40px; line-height: 1.6; }
.cvw-lf-contact div { font-size: 16px; font-weight: 600; margin-bottom: 15px; display: flex; align-items: center; gap: 12px; }
.cvw-lf-contact i { background: rgba(255,255,255,0.2); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 14px; }

.cvw-lf-right { flex: 1; padding: 50px 40px; background: #fff; display: flex; align-items: center; justify-content: center; }
.cvw-lf-box { width: 100%; max-width: 450px; } 

.cvw-form-title { font-size: 22px; font-weight: 800; color: #1e293b; text-align: center; margin-bottom: 25px; text-transform: uppercase; }
.cvw-form-group { margin-bottom: 15px; width: 100%; display: block; }

/* Fix cho Input và Textarea */
.cvw-builtin-form input, .cvw-builtin-form textarea { width: 100%; border: 1px solid #cbd5e1; padding: 14px 15px; border-radius: 8px; font-family: 'Open Sans', sans-serif; font-size: 14px; outline: none; background: #f8fafc; transition: all 0.3s; box-sizing: border-box; }

/* FIX TUYỆT ĐỐI CHO Ô SELECT ĐỂ KHÔNG BỊ CHE KHUẤT CHỮ TRÊN BẤT KỲ TRÌNH DUYỆT NÀO */
.cvw-builtin-form select { 
    width: 100%; 
    height: 48px; 
    padding: 0 15px; 
    padding-right: 40px;
    border: 1px solid #cbd5e1; 
    border-radius: 8px; 
    font-family: 'Open Sans', sans-serif; 
    font-size: 14px; 
    color: #334155;
    background-color: #f8fafc; 
    outline: none; 
    box-sizing: border-box; 
    transition: all 0.3s;
    appearance: none; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23334155%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
}

.cvw-builtin-form input:focus, .cvw-builtin-form select:focus, .cvw-builtin-form textarea:focus { border-color: var(--cvw-bg, #2563eb); background: #fff; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
.cvw-submit-btn { width: 100%; background: var(--cvw-bg, #2563eb); color: #fff; border: none; padding: 16px; border-radius: 8px; font-weight: 800; font-family: 'Montserrat', sans-serif; font-size: 16px; cursor: pointer; text-transform: uppercase; transition: transform 0.2s, background 0.3s; margin-top: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.cvw-submit-btn:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
.cvw-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

/* Styles cho Thông báo thành công & Pháo giấy */
.cvw-form-success { text-align: center; padding: 30px 10px; }
.cvw-success-icon { font-size: 60px; color: #10b981; margin-bottom: 20px; animation: scaleUp 0.5s ease-out; }
.cvw-form-success h3 { font-size: 24px; font-weight: 800; color: #0f172a; margin-bottom: 15px; }
.cvw-form-success p { font-size: 15px; color: #475569; line-height: 1.6; }
@keyframes scaleUp { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* Styles Admin Dashboard (Database List) */
.cvw-admin-wrap .cvw-badge-service { background: #e0f2fe; color: #0284c7; padding: 5px 10px; border-radius: 20px; font-weight: 600; font-size: 12px; display: inline-block; }
.cvw-admin-header-actions { margin-top: 10px; margin-bottom: 20px; background: #fff; padding: 15px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); border-left: 4px solid #2563eb; }

/* =========================================
   MODULE MỚI 5 - TESTIMONIALS
   ========================================= */
.cvw-testi-section { background: var(--cvw-bg, #f8fafc); padding: 60px 20px; border-radius: 16px; text-align: center; }
.cvw-testi-title { font-size: 32px; font-weight: 800; color: #0f172a; margin-bottom: 50px; }
.cvw-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1100px; margin: 0 auto; }
.cvw-testi-card { background: #fff; padding: 40px 30px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); text-align: left; position: relative; }
.cvw-testi-quote-icon { font-size: 24px; color: var(--cvw-quote, #fbbf24); margin-bottom: 20px; }
.cvw-testi-content { font-size: 15px; color: #475569; font-style: italic; margin-bottom: 30px; min-height: 80px; }
.cvw-testi-user { display: flex; align-items: center; gap: 15px; border-top: 1px solid #f1f5f9; padding-top: 20px; }
.cvw-testi-user img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.cvw-testi-user h4 { margin: 0; font-size: 16px; font-weight: 700; color: #0f172a; }
.cvw-testi-user span { font-size: 13px; color: #64748b; }

/* =========================================
   MODULE MỚI 6 - STEPS IMAGE
   ========================================= */
.cvw-steps-section { display: flex; align-items: center; gap: 60px; max-width: 1100px; margin: 0 auto; padding: 60px 20px; }
.cvw-steps-left { flex: 1; }
.cvw-steps-sub { color: var(--cvw-num, #2563eb); font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; display: block; }
.cvw-steps-left h2 { font-size: 36px; font-weight: 800; color: #0f172a; line-height: 1.3; margin-bottom: 40px; }
.cvw-step-item { display: flex; gap: 20px; margin-bottom: 30px; }
.cvw-step-num { width: 40px; height: 40px; background: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-family: 'Montserrat'; font-weight: 800; color: var(--cvw-num, #2563eb); box-shadow: 0 5px 15px rgba(0,0,0,0.08); flex-shrink: 0; }
.cvw-step-text h4 { font-size: 18px; font-weight: 700; color: #1e293b; margin: 0 0 5px 0; }
.cvw-step-text p { font-size: 14px; color: #64748b; margin: 0; }
.cvw-steps-right { flex: 1; }
.cvw-steps-img-wrap { position: relative; padding: 20px; background: #f8fafc; border-radius: 20px; }
.cvw-steps-img-wrap img { width: 100%; border-radius: 12px; display: block; }
.cvw-steps-badge { position: absolute; bottom: -20px; right: -20px; background: var(--cvw-badge, #facc15); padding: 20px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); max-width: 250px; }
.cvw-steps-badge h4 { margin: 0 0 5px 0; font-size: 16px; font-weight: 800; color: #000; }
.cvw-steps-badge p { margin: 0; font-size: 13px; color: rgba(0,0,0,0.8); }

/* =========================================
   RESPONSIVE (MOBILE & TABLET)
   ========================================= */
@media (max-width: 991px) {
    .cvw-wcu-section.layout-grid_square .cvw-wcu-container { flex-direction: column-reverse; }
    .cvw-sg-grid, .cvw-testi-grid, .cvw-wcu-grid-horz { grid-template-columns: repeat(2, 1fr); }
    .cvw-promo-card { flex-direction: column; padding: 30px; gap: 30px; }
    .cvw-lead-form-section, .cvw-steps-section { flex-direction: column; }
    .cvw-steps-badge { right: 20px; bottom: 10px; }
}
@media (max-width: 768px) {
    .cvw-sg-grid, .cvw-testi-grid, .cvw-wcu-grid-horz, .cvw-wcu-grid { grid-template-columns: 1fr; }
    .cvw-wcu-text h2, .cvw-sg-content h2, .cvw-promo-left h2, .cvw-lf-left h2, .cvw-testi-title, .cvw-steps-left h2 { font-size: 28px; }
    .cvw-lf-left, .cvw-lf-right { padding: 30px; }
    .cvw-promo-card-wrapper { padding: 20px 10px; }
}