/* ==============================================================
   VƯỜN MAI ANH DŨNG Q.12 - PHƯỜNG THỚI AN, TP. HỒ CHÍ MINH
   THEME RIÊNG: NỀN XANH LÁ BÓNG BẨY (LUXURY GLOSSY EMERALD GREEN)
   TẾT GIÁP THÌN - SẮC XUÂN MAI VÀNG TRÊN NỀN NGỌC BÍCH HOÀNG GIA
   ============================================================== */

:root {
    --green-gloss-deep: #011d0a;
    --green-gloss-dark: #042e14;
    --green-gloss-primary: #0b5e28;
    --green-gloss-vibrant: #13773c;
    --green-gloss-bright: #1da352;
    --green-gloss-light: #28c76f;
    --green-mint-glow: #70f3a8;
    
    --tet-red: #0b5e28;
    --tet-dark-red: #042e14;
    --tet-crimson: #0d6e35;
    --tet-light-red: #168f43;
    
    --tet-red-grad: linear-gradient(135deg, #032b13 0%, #0b5e28 50%, #168f43 100%);
    --shadow-red: 0 10px 25px rgba(11, 94, 40, 0.35);
    --shadow-green-gloss: 0 15px 35px rgba(11, 94, 40, 0.45);
}

/* ==============================================================
   1. TOPBAR NỀN XANH BÓNG BẨY
   ============================================================== */
.tet-topbar {
    background: linear-gradient(90deg, #021e0b 0%, #094a1f 35%, #0e6b30 50%, #094a1f 65%, #021e0b 100%) !important;
    border-bottom: 2px solid var(--tet-gold) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.topbar-badge {
    background: var(--tet-gold) !important;
    color: #042e14 !important;
}

.topbar-link:hover {
    color: var(--tet-gold-bright) !important;
}

/* ==============================================================
   2. MAIN HEADER & LOGO BRAND
   ============================================================== */
.tet-header {
    border-bottom: 3px solid #0b5e28 !important;
}

.brand-title {
    color: #0b5e28 !important;
    text-shadow: 0 2px 4px rgba(11, 94, 40, 0.15) !important;
}

.brand-slogan {
    color: #d49300 !important;
}

.brand-logo-img {
    border-color: #ffc107 !important;
    box-shadow: 0 4px 14px rgba(11, 94, 40, 0.3) !important;
}

.tet-nav .nav-item i {
    color: #0b5e28 !important;
}

.tet-nav .nav-item:hover,
.tet-nav .nav-item.active {
    color: #0b5e28 !important;
    background: rgba(11, 94, 40, 0.08) !important;
}

.nav-badge-hot {
    background: linear-gradient(135deg, #e53935 0%, #c61d23 100%) !important;
}

/* Header Hotline Button */
.btn-tet-hotline {
    background: linear-gradient(135deg, #042e14 0%, #0b5e28 50%, #168f43 100%) !important;
    border: 2px solid var(--tet-gold) !important;
    box-shadow: 0 6px 20px rgba(11, 94, 40, 0.4) !important;
}

.btn-tet-hotline:hover {
    box-shadow: 0 8px 25px rgba(22, 143, 67, 0.6) !important;
    border-color: #fff !important;
}

.btn-hotline-icon {
    background: var(--tet-gold) !important;
    color: #042e14 !important;
}

.tet-toggle {
    background: #0b5e28 !important;
    border-color: var(--tet-gold) !important;
}

/* Mobile Drawer */
.mobile-nav-header {
    background: linear-gradient(135deg, #032b13 0%, #0b5e28 100%) !important;
}

.mobile-nav-links a i {
    color: #0b5e28 !important;
}

.mobile-nav-links a:hover,
.mobile-nav-links a.active {
    background: rgba(11, 94, 40, 0.08) !important;
    color: #0b5e28 !important;
}

.btn-mobile-call {
    background: linear-gradient(135deg, #042e14 0%, #0b5e28 100%) !important;
}

/* ==============================================================
   3. HERO BANNER: NỀN XANH LÁ BÓNG BẨY ĐỈNH CAO (EMERALD GLOSS)
   ============================================================== */
.tet-hero-section {
    background: 
        radial-gradient(circle at 75% 20%, rgba(40, 199, 111, 0.35) 0%, transparent 45%),
        radial-gradient(circle at 20% 80%, rgba(255, 215, 0, 0.18) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, #0e6b30 0%, #084c20 40%, #042e14 75%, #011d0a 100%) !important;
    position: relative;
    border-bottom: 4px solid var(--tet-gold) !important;
    overflow: hidden;
}

/* Lớp phủ ánh gương bóng bẩy (Glossy Glass Sheen) */
.tet-hero-section::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -20%;
    width: 850px;
    height: 850px;
    background: radial-gradient(circle, rgba(112, 243, 168, 0.28) 0%, rgba(255, 215, 0, 0.12) 30%, transparent 70%);
    filter: blur(50px);
    pointer-events: none;
    z-index: 1;
    animation: glossyLightPulse 6s ease-in-out infinite alternate;
}

.tet-hero-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -15%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(46, 204, 113, 0.2) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 1;
}

@keyframes glossyLightPulse {
    0% { transform: scale(0.95) translate(0, 0); opacity: 0.7; }
    50% { transform: scale(1.08) translate(-15px, 15px); opacity: 1; }
    100% { transform: scale(0.95) translate(0, 0); opacity: 0.7; }
}

.tet-hero-badge {
    background: rgba(255, 215, 0, 0.2) !important;
    border: 1px solid #ffd54f !important;
    color: #ffecb3 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

.tet-hero-title {
    color: #ffffff !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 35px rgba(40, 199, 111, 0.3) !important;
}

.tet-hero-title .highlight-gold {
    color: #ffd54f !important;
    text-shadow: 0 0 25px rgba(255, 213, 79, 0.8), 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

.tet-hero-location {
    color: #dcedc8 !important;
}

.slogan-ribbon {
    background: linear-gradient(90deg, #b8860b 0%, #ffc107 35%, #ffe082 50%, #ffc107 65%, #b8860b 100%) !important;
    color: #022310 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 15px rgba(255, 193, 7, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

.slogan-ribbon h2 {
    color: #022310 !important;
}

.tet-hero-desc {
    color: #e8f5e9 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

.commit-item {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(8px) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.commit-item:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: var(--tet-gold) !important;
}

/* Nút Hero CTA */
.btn-tet-primary {
    background: linear-gradient(135deg, #ffe082 0%, #ffb300 40%, #ff8f00 100%) !important;
    color: #022310 !important;
    border: 2px solid #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 25px rgba(255, 179, 0, 0.5), 0 0 15px rgba(255, 213, 79, 0.4) !important;
}

.btn-tet-primary:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 12px 30px rgba(255, 179, 0, 0.7) !important;
}

.btn-tet-secondary {
    background: rgba(3, 43, 19, 0.75) !important;
    border: 2px solid var(--tet-gold) !important;
    color: #ffffff !important;
    backdrop-filter: blur(8px) !important;
}

.btn-tet-secondary:hover {
    background: rgba(11, 94, 40, 0.9) !important;
    border-color: #fff !important;
}

.btn-tet-call {
    color: #ffe082 !important;
}

/* Frame ảnh Logo góc tròn */
.hero-image-frame {
    border-color: rgba(255, 215, 0, 0.6) !important;
    background: radial-gradient(circle, rgba(40, 199, 111, 0.15) 0%, rgba(0, 0, 0, 0.2) 100%) !important;
}

.hero-image-wrapper {
    border-color: var(--tet-gold) !important;
    box-shadow: 0 0 45px rgba(40, 199, 111, 0.5), 0 0 25px rgba(255, 193, 7, 0.6) !important;
}

.hero-floating-card .card-icon {
    background: #0b5e28 !important;
    color: var(--tet-gold) !important;
}

.hero-floating-card .card-text strong {
    color: #0b5e28 !important;
}

/* ==============================================================
   4. STATS COUNTER BAR
   ============================================================== */
.stat-number {
    color: #0b5e28 !important;
}

.stat-icon {
    background: rgba(11, 94, 40, 0.12) !important;
    color: #0b5e28 !important;
}

/* ==============================================================
   5. SECTIONS & CARDS GIỚI THIỆU
   ============================================================== */
.sub-title {
    color: #0b5e28 !important;
}

.section-title {
    color: #042e14 !important;
}

.card-icon-wrap {
    background: linear-gradient(135deg, #042e14 0%, #0b5e28 50%, #168f43 100%) !important;
    color: var(--tet-gold-bright) !important;
    box-shadow: 0 6px 18px rgba(11, 94, 40, 0.35) !important;
}

.about-card h3 {
    color: #042e14 !important;
}

.about-card:hover {
    border-color: #0b5e28 !important;
    box-shadow: 0 15px 35px rgba(11, 94, 40, 0.15) !important;
}

/* ==============================================================
   6. CHAPTER BANNERS & NỖI ĐAU KHÁCH HÀNG
   ============================================================== */
.chapter-1-banner {
    background: linear-gradient(135deg, #032b13 0%, #084c20 50%, #13773c 100%) !important;
    border-color: #a5d6a7 !important;
    box-shadow: var(--shadow-green-gloss) !important;
}

.pain-header {
    background: #e8f5e9 !important;
    border-bottom: 1px solid #c8e6c9 !important;
}

.pain-icon-circle {
    background: #0b5e28 !important;
}

.pain-num {
    color: #81c784 !important;
}

.pain-title {
    color: #042e14 !important;
}

.pain-box {
    border-color: #c8e6c9 !important;
}

.pain-box:hover {
    border-color: #0b5e28 !important;
    box-shadow: 0 15px 30px rgba(11, 94, 40, 0.2) !important;
}

.chapter-callout-box .callout-icon {
    background: #0b5e28 !important;
}

.chapter-callout-box h4 {
    color: #042e14 !important;
}

/* Chapter 2: Lợi ích ký gửi */
.chapter-2-banner {
    background: linear-gradient(135deg, #01280f 0%, #095925 50%, #178a46 100%) !important;
    border-color: #a5d6a7 !important;
}

.benefit-title {
    color: #042e14 !important;
}

.benefit-accent-label {
    background: #0b5e28 !important;
}

.step-circle {
    background: linear-gradient(135deg, #032b13 0%, #0b5e28 100%) !important;
    box-shadow: 0 4px 15px rgba(11, 94, 40, 0.4) !important;
}

.step-card.highlight-step .step-circle {
    background: linear-gradient(135deg, #d49300 0%, #ffc107 100%) !important;
    color: #022310 !important;
}

/* Chapter 3: Mua bán & Cho thuê */
.chapter-3-banner {
    background: linear-gradient(135deg, #022610 0%, #084c20 50%, #0e6b30 100%) !important;
    border-color: #81c784 !important;
}

.service-box-header {
    background: linear-gradient(135deg, #032b13 0%, #0b5e28 100%) !important;
}

.service-badge-icon {
    background: var(--tet-gold) !important;
    color: #042e14 !important;
}

.btn-service-call {
    background: linear-gradient(135deg, #042e14 0%, #0b5e28 100%) !important;
}

.demand-card .demand-icon {
    background: linear-gradient(135deg, #042e14 0%, #0b5e28 100%) !important;
    color: var(--tet-gold-bright) !important;
}

.demand-card h4 {
    color: #042e14 !important;
}

/* ==============================================================
   7. BẢNG GIÁ DỊCH VỤ
   ============================================================== */
.pricing-card.featured {
    border-color: #0b5e28 !important;
    box-shadow: 0 12px 35px rgba(11, 94, 40, 0.25) !important;
}

.popular-ribbon {
    background: linear-gradient(135deg, #053b1b 0%, #0b5e28 100%) !important;
}

.pricing-card.featured .plan-badge {
    background: #e8f5e9 !important;
    color: #0b5e28 !important;
}

.plan-name {
    color: #042e14 !important;
}

.plan-price .amount {
    color: #0b5e28 !important;
}

.btn-pricing {
    color: #0b5e28 !important;
    border-color: #0b5e28 !important;
}

.btn-pricing:hover,
.btn-pricing.btn-featured {
    background: linear-gradient(135deg, #042e14 0%, #0b5e28 100%) !important;
    color: #fff !important;
    border-color: #0b5e28 !important;
}

/* ==============================================================
   8. FORM ĐĂNG KÝ: NỀN XANH NGỌC SANG TRỌNG
   ============================================================== */
.section-contact-form {
    background: 
        radial-gradient(circle at 80% 20%, rgba(40, 199, 111, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 20% 80%, rgba(255, 215, 0, 0.15) 0%, transparent 35%),
        linear-gradient(135deg, #021e0b 0%, #06401a 50%, #021e0b 100%) !important;
}

.badge-contact {
    background: rgba(255, 215, 0, 0.2) !important;
    border-color: var(--tet-gold) !important;
    color: #ffecb3 !important;
}

.form-title {
    color: #042e14 !important;
}

.form-group label i {
    color: #0b5e28 !important;
}

.form-control:focus {
    border-color: #0b5e28 !important;
    box-shadow: 0 0 0 3px rgba(11, 94, 40, 0.18) !important;
}

.btn-submit-tet {
    background: linear-gradient(135deg, #042e14 0%, #0b5e28 50%, #168f43 100%) !important;
    border-color: var(--tet-gold) !important;
    box-shadow: 0 8px 25px rgba(11, 94, 40, 0.45) !important;
}

.btn-submit-tet:hover {
    box-shadow: 0 10px 30px rgba(22, 143, 67, 0.65) !important;
    border-color: #fff !important;
}

/* ==============================================================
   9. FOOTER & CTA ĐÓN XUÂN
   ============================================================== */
.tet-footer {
    background: linear-gradient(180deg, #021d0a 0%, #011206 100%) !important;
    border-top: 4px solid var(--tet-gold) !important;
}

.tet-footer-cta-card {
    background: linear-gradient(135deg, #032b13 0%, #0a5223 50%, #11682f 100%) !important;
    border-color: var(--tet-gold) !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.45) !important;
}

.cta-tag {
    background: var(--tet-gold) !important;
    color: #022310 !important;
}

.btn-cta-phone {
    background: var(--mai-gold-grad) !important;
    color: #022310 !important;
    box-shadow: 0 6px 20px rgba(255, 179, 0, 0.5) !important;
}

.footer-col-title {
    color: var(--tet-gold-bright) !important;
}

.footer-col-title::after {
    background: var(--tet-gold) !important;
}

/* Floating Actions */
.float-btn.float-call {
    background: linear-gradient(135deg, #042e14 0%, #0b5e28 50%, #168f43 100%) !important;
    border-color: var(--tet-gold) !important;
}