/* --- 1. THIẾT LẬP CHUNG & MÀU SẮC --- */
:root {
    --primary-color: #228b22; /* Xanh rêu thương hiệu */
    --accent-color: #d4af37;  /* Vàng Gold sang trọng */
    --text-color: #333;       /* Màu chữ đen xám */
    --light-bg: #ffffff;      /* Nền trắng */
    --white: #ffffff;
    --red-sale: #c0392b;      /* Màu đỏ giá/nút */
}

html { scroll-behavior: smooth; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: 'Roboto', sans-serif; 
    color: var(--text-color); 
    line-height: 1.6; 
    background-color: var(--light-bg); 
    overflow-x: hidden; 
}

/* Typography chuẩn */
h1, h2, h3 { 
    font-family: 'Playfair Display', serif; 
    color: var(--primary-color); 
    line-height: 1.3;
}

img { max-width: 100%; display: block; border-radius: 8px; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.mt-20 { margin-top: 20px; }
.text-red { color: #d32f2f; }

/* CSS TỪ PHẦN HTML CŨ (GỘP VÀO ĐÂY) */
.images-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 30px;
}
.images-container .product-img {
    max-width: 450px;
    flex: 1;
    min-width: 300px;
}
.info-container {
    max-width: 900px;
    margin: 0 auto 50px auto;
}

/* CSS MỚI CHO PHẦN DẪN DẮT (STORY TELLING) */
.story-section {
    background: #fdfbf7; /* Màu kem nhạt cổ điển */
    border-top: 1px solid #efebe0;
    border-bottom: 1px solid #efebe0;
}
.story-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.story-content h3 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif;
}
.story-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
    text-align: justify; /* Căn đều 2 bên cho giống trang sách */
    margin-bottom: 20px;
}
.highlight-quote {
    background: rgba(34, 139, 34, 0.1);
    padding: 20px;
    border-left: 5px solid var(--primary-color);
    margin: 30px 0;
    border-radius: 5px;
    font-style: italic;
    font-weight: 500;
    color: #1b5e20;
    text-align: center;
}
.story-illustration {
    display: block;
    margin: 0 auto 20px auto;
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* --- 2. NÚT BẤM (BUTTONS) --- */
.btn {
    display: inline-block; padding: 15px 40px;
    background: linear-gradient(45deg, var(--red-sale), #e74c3c);
    color: var(--white); text-decoration: none; font-weight: bold;
    border-radius: 50px; text-transform: uppercase; border: none; cursor: pointer;
    box-shadow: 0 4px 15px rgba(192, 57, 43, 0.4);
    transition: all 0.4s ease;
    position: relative; overflow: hidden; z-index: 1; font-size: 1.1rem;
}
.btn::after {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: 0.5s; z-index: -1;
}
.btn:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(192, 57, 43, 0.6); }
.btn:hover::after { left: 100%; }
.btn-full { width: 100%; border-radius: 8px; text-align: center; }

/* --- 3. HEADER (DESKTOP) --- */
header {
    background: rgba(255, 255, 255, 0.98); padding: 15px 0;
    box-shadow: 0 2px 20px rgba(0,0,0,0.05); position: fixed; 
    top: 0; 
    left: 0;
    width: 100%; /* Bắt buộc có width 100% khi dùng fixed */
    z-index: 1000;
    
    /* Thêm hiệu ứng trượt mượt mà */
    transition: transform 0.3s ease-in-out;
}

/* Class này sẽ được JS tự động thêm vào khi cuộn xuống */
.header-hidden {
    transform: translateY(-100%); /* Dịch chuyển header lên trên để khuất khỏi màn hình */
    box-shadow: none; /* Tắt bóng đổ cho gọn */
}

.nav-flex { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.4rem; font-weight: 900; color: var(--primary-color); display: flex; align-items: center; gap: 10px; }
.logo img {
    height: 50px;
    width: auto;
    object-fit: contain;
    max-width: 200px;
}
.hotline-btn {
    background: var(--primary-color); color: var(--white);
    padding: 8px 20px; border-radius: 30px; font-size: 0.9rem;
    text-decoration: none; display: flex; align-items: center; gap: 8px; transition: 0.3s;
}
.hotline-btn:hover { background: var(--accent-color); }

/* --- 4. HERO SECTION (BANNER) --- */
.hero {
    background: url('img/banner.jpg');
    background-size: cover; background-attachment: fixed; background-position: center;
    color: var(--white); padding: 120px 0 100px; text-align: center; position: relative;
}
.overlay-dark {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.85), rgba(184, 134, 11, 0.4));
}
.hero-content { position: relative; z-index: 2; }
.hero h1 { color: var(--white); font-size: 3.5rem; margin-bottom: 20px; line-height: 1.2; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.text-gold { color: var(--accent-color); }
.hero p { font-size: 1.3rem; margin-bottom: 40px; opacity: 0.95; max-width: 1000px; margin-left: auto; margin-right: auto; }

.trust-badge { display: flex; justify-content: center; gap: 30px; margin-top: 50px; flex-wrap: wrap; }
.badge-item { background: rgba(255,255,255,0.15); padding: 12px 25px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(5px); }

/* --- 5. PAIN POINTS (VẤN ĐỀ) --- */
.section-padding { padding: 70px 0; }
.pain-points { background: var(--white); }
.section-title { 
    font-size: 2.2rem; margin-bottom: 50px; 
    position: relative; display: inline-block; 
    text-transform: uppercase;
}
.section-title::after { content: ''; display: block; width: 80px; height: 4px; background: var(--accent-color); margin: 15px auto 0; }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }

.pain-card { 
    background: #faf9f3; 
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-bottom: 4px solid var(--primary-color);
    color: var(--text-color); 
    padding: 30px; 
    border-radius: 15px; 
    transition: all 0.4s ease;  
    height: 100%;
}
.pain-card h3 { color: var(--primary-color); margin-bottom: 10px; font-size: 1.4rem; font-weight: 700; }
.pain-card p { color: #555; font-size: 1rem; line-height: 1.6; }
.pain-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); }
.pain-img {
    width: 100%; height: 200px; object-fit: cover; border-radius: 12px;
    margin-bottom: 25px; box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

/* --- 6. SẢN PHẨM & TÍNH NĂNG --- */
.product-showcase { background: var(--light-bg); overflow: hidden; }
.product-flex { display: flex; flex-wrap: wrap; align-items: center; gap: 50px; }
.product-img { flex: 1; min-width: 300px; position: relative; perspective: 1000px; }
.product-img img { 
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); border-radius: 20px; 
    transition: 0.5s; transform: rotateY(-5deg);
}
.product-img:hover img { transform: rotateY(0deg) scale(1.02); }

/* Nhãn giá */
.price-tag {
    position: absolute; top: -20px; right: -25px;
    background: linear-gradient(135deg, var(--red-sale), #ff6b6b);
    color: white; padding: 10px 25px; border-radius: 50px;
    font-weight: bold; font-size: 1rem;
    box-shadow: 0 10px 20px rgba(192, 57, 43, 0.4);
    animation: pulse-red 2s infinite; z-index: 2;
}
.old-price { text-decoration: line-through; font-size: 0.7em; opacity: 0.9; }

.left-align { text-align: left; margin: 0; }
.sub-heading { margin-bottom: 20px; font-weight: 300; color: #555; font-size: 1.2rem; }
.desc-text { margin-bottom: 20px; font-size: 1.1rem; text-align: justify; }

.info-box {
    background: #fff3cd; border: 1px solid #ffeeba; color: #856404;
    padding: 15px; border-radius: 8px; margin-bottom: 20px; display: flex; gap: 10px;
}

/* Feature List */
.feature-list li {
    margin-bottom: 20px; display: flex; flex-direction: column;
    align-items: center; text-align: center; gap: 15px;
    background: #fff; padding: 15px; border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: 0.3s; border: 1px solid #eee;
}
.feature-list li:hover { transform: translateY(-5px); border-color: var(--accent-color); }
.feature-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #f9f9f9; }
.feature-list li span { font-size: 1.1rem; font-weight: 600; color: #333; display: flex; align-items: center; gap: 10px; }
.feature-list span i { color: var(--accent-color); }

/* --- CSS CHO ẢNH THỰC TẾ --- */
.real-img-box img { 
    max-width: 800px; width: 100%; 
    border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); border: 4px solid #fff; 
}
.real-images { background: #fff; padding-bottom: 50px; text-align: center; }


/* --- 7. COMBO GIÁ --- */
.combo-section { margin: 30px 0; }
.combo-title { text-align: center; margin-bottom: 20px; color: var(--red-sale); font-weight: 900; text-transform: uppercase; }

.combo-grid { 
    display: grid; 
    grid-template-columns: repeat(5, 1fr); 
    gap: 12px; 
    align-items: stretch; 
}

.combo-card { 
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative; cursor: pointer; 
    border: 1px solid #ddd; border-radius: 12px; overflow: hidden; 
    background: #fff; transition: 0.3s; height: 100%;
}
.combo-card input { display: none; }
.combo-card:has(input:checked) { border-color: var(--red-sale); background: #fff5f5; transform: scale(1.02); z-index: 2; }
.combo-card:has(input:checked) .check-icon { display: block; }

.combo-content { padding: 15px; text-align: center; }
.combo-header { font-weight: bold; font-size: 1.1rem; margin-bottom: 10px; color: var(--primary-color); }
.combo-img img { height: 100px; width: auto; margin: 0 auto 10px; object-fit: contain; }
.combo-price { font-size: 1.3rem; font-weight: 900; color: var(--red-sale); }
.old-price-small { font-size: 0.8rem; text-decoration: line-through; color: #888; font-weight: normal; }
.combo-gift { font-size: 0.9rem; margin-top: 5px; font-weight: bold; color: #333; }



/* --- 8. TESTIMONIALS & FORM --- */
.testimonials { background: var(--primary-color); color: var(--white); }
.white-text { color: white; }
.white-text::after { background: white; }
.review-card { 
    background: var(--white); color: var(--text-color); 
    padding: 30px; border-radius: 15px; margin-top: 20px; 
    position: relative; transition: 0.3s;
}
.review-card:hover { transform: scale(1.03); }
.avatar-box img { width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--accent-color); margin: 0 auto 15px; }
.stars { color: #f1c40f; margin-bottom: 10px; }
.author { font-weight: bold; margin-top: 15px; color: var(--primary-color); }

.cta-section { background: url('img/backgroundform.jpg'); background-attachment: fixed; position: relative; }
.cta-overlay { 
    background: rgba(255,255,255,0.96); max-width: 100%; margin: 0 auto; 
    padding: 40px; border-radius: 20px; 
    box-shadow: 0 20px 60px rgba(0,0,0,0.3); text-align: center; border: 2px solid var(--accent-color);
}
.cta-title { color: var(--red-sale); margin-bottom: 5px; }
.timer { font-size: 1.5rem; font-weight: 900; color: var(--red-sale); margin: 15px 0; padding: 10px; border: 2px dashed var(--red-sale); border-radius: 8px; }
.form-control { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 1rem; margin-bottom: 0; outline: none; background: #f9f9f9; }
.form-group { margin-bottom: 15px; }
.form-control:focus { border-color: var(--primary-color); background: #fff; box-shadow: 0 0 8px rgba(34, 139, 34, 0.2); }
.secure-text { font-size: 0.85rem; margin-top: 15px; color: #666; display: flex; align-items: center; justify-content: center; gap: 5px; }

/* --- 9. FOOTER --- */
footer { 
    background: #0f3d0f; 
    color: #e0e0e0; 
    padding: 60px 0 20px; 
    border-top: 5px solid var(--accent-color); 
}
.footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; }
.footer-content h3 { color: var(--white); margin-bottom: 20px; font-size: 1.1rem; border-bottom: 1px solid #333; padding-bottom: 10px; display: inline-block; }
.col p { margin-bottom: 10px; display: flex; gap: 10px; }
.copyright { text-align: center; margin-top: 40px; border-top: 1px solid #333; padding-top: 20px; color: #666; font-size: 0.85rem; }
.copyright p { margin: 5px 0; }
.developer-credit a { color: #4CAF50; text-decoration: none; font-weight: 600; transition: 0.3s; }
.developer-credit a:hover { color: #fff; text-shadow: 0 0 5px #4CAF50; }

/* --- 10. ANIMATION & FLOATING BTN --- */
/* Optimization: Thêm will-change để báo trình duyệt render trước */
.reveal-item { 
    opacity: 0; 
    transform: translateY(40px); 
    transition: all 0.8s ease-out; 
    will-change: transform, opacity; 
}
.reveal-item.active { opacity: 1; transform: translateY(0); }

.floating-contact { position: fixed; bottom: 20px; left: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 12px; }
.call-btn-animated, .zalo-btn-animated { width: 55px; height: 55px; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white; font-size: 24px; text-decoration: none; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.call-btn-animated { background: #2ecc71; animation: pulse-green 2s infinite; }
.zalo-btn-animated { background: #0068ff; font-weight: bold; font-size: 14px; border: 2px solid white; }

@keyframes pulse-red {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(192, 57, 43, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
}
@keyframes pulse-green {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 20px rgba(46, 204, 113, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

/* CSS CHO CHI TIẾT SẢN PHẨM */
.detail-section { background: #fff; }
.text-center { text-align: center; }

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Chia đôi màn hình */
    gap: 50px;
    align-items: start;
}

.intro-text { font-size: 1.1rem; color: #555; margin-bottom: 30px; text-align: justify; line-height: 1.8; }
.detail-content h3 { font-size: 1.8rem; margin-bottom: 20px; border-bottom: 2px solid #eee; padding-bottom: 10px; }

.feature-box {
    background: #f9f9f9; padding: 20px; border-radius: 10px; margin-bottom: 20px; border-left: 5px solid var(--primary-color);
}
.feature-box h4, .guide-box h4 {
    color: var(--primary-color); margin-bottom: 15px; font-size: 1.2rem; display: flex; align-items: center; gap: 10px;
}
.feature-box ul { list-style: none; }
.feature-box ul li { margin-bottom: 10px; position: relative; padding-left: 20px; }
.feature-box ul li::before {
    content: '•'; color: var(--accent-color); font-weight: bold; font-size: 1.5rem; position: absolute; left: 0; top: -5px;
}
.detail-img img { width: 100%; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); margin-bottom: 20px; }
.guide-box { background: #e8f5e9; padding: 20px; border-radius: 10px; border: 1px dashed var(--primary-color); }

/* --- CSS HIỆU ỨNG CUỘN CỬA CUỐN --- */
.mobile-fixed-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background: url('img/banner.jpg') no-repeat center top/cover;
    z-index: -1; display: none;
}
    
/* ==========================================================================
   MOBILE RESPONSIVE (BẢN FINAL SẠCH SẼ - ĐÃ SỬA MỌI LỖI)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. KÍCH HOẠT HIỆU ỨNG CUỘN & SỬA HERO */
    .mobile-fixed-bg { display: block; }
    .hero { background: transparent !important; padding: 150px 0 60px; min-height: 450px; }
    .hero h1 { font-size: 2rem; line-height: 1.3; margin-bottom: 15px; white-space: normal; text-align: center; }
    .text-gold { color: #FFD700; text-shadow: none !important; font-weight: 900; font-size: 2.2rem; display: block; margin-top: 10px; }
    .hero p { font-size: 1rem; padding: 0 10px; text-align: justify; }

    /* 2. HEADER: CĂN GIỮA - CHỮ THẲNG HÀNG - NÚT NHỎ */
    header { padding: 10px 0; }
    .nav-flex { flex-direction: column; gap: 8px; }
    
    .logo { 
        display: flex; align-items: center; justify-content: center; 
        width: 100%; gap: 10px; 
    }
    .logo img { height: 55px; width: auto; flex-shrink: 0; }
    /* QUAN TRỌNG: Căn giữa 2 dòng chữ */
    .logo span {
        font-size: 1.1rem; font-weight: 900; line-height: 1.3;
        color: var(--primary-color); display: grid; justify-items: center; text-align: center;
    }
    
    .hotline-btn {
        width: auto; display: inline-flex; padding: 6px 20px;
        font-size: 0.85rem; border-radius: 50px; margin-top: 0;
    }
    .hotline-btn i { margin-right: 6px; font-size: 0.85rem; }

    /* 3. COMBO GIÁ: CĂN ĐỀU CẢ 3 Ô (THẲNG HÀNG) */
    .combo-grid { grid-template-columns: 1fr; gap: 20px; }
    .badge-hot {
        font-size: 0.65rem; padding: 4px 10px;
        right: -5px; top: -5px; border-bottom-left-radius: 8px;
    }
    /* 👇 QUAN TRỌNG: Lệnh này ép cả 3 ô tụt xuống 50px để né nhãn */
    .combo-content { 
        padding: 50px 10px 20px 10px !important; 
        text-align: center;
    }
    .combo-header { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* 4. CÁC PHẦN KHÁC */
    .section-title { font-size: 1.45rem; margin-bottom: 25px; line-height: 1.4; } /* Đã giảm size để không bị xuống dòng */
    .price-tag { top: -5px; left: 5px; right: auto; font-size: 0.8rem; padding: 5px 12px; }
    .detail-grid { grid-template-columns: 1fr; gap: 30px; }
    .detail-content h3 { font-size: 1.5rem; }
    
    .floating-contact { bottom: 15px; left: 15px; }
    .call-btn-animated, .zalo-btn-animated { width: 45px; height: 45px; font-size: 18px; }
    .zalo-btn-animated { font-size: 11px; display: flex; align-items: center; justify-content: center; }

    .submit-btn {
        font-size: 0.9rem !important; padding: 15px 5px !important;
        white-space: nowrap; width: 100%; display: block;
    }
    .story-content h3 {
        font-size: 1.4rem !important;
        line-height: 1.4 !important;
        padding: 0 10px;
    }
    .story-section {
        padding-top: 40px !important;    /* Giảm từ 70px xuống 20px để đẩy sát lên */
        padding-bottom: 30px !important; /* Thu gọn luôn phần dưới cho cân đối */
    }
    /* 5. Đoạn văn mô tả (Phần chữ bên trên khung vàng) */
    .desc-text {
        text-align: justify !important; /* Lệnh căn đều */
        text-justify: inter-word;       /* Giúp khoảng cách giữa các từ đều hơn */
        padding: 0 5px;                 /* Thêm chút lề để chữ không sát mép màn hình */
    }

    /* 6. Chữ trong khung màu vàng (Info box) */
    .info-box {
        text-align: justify !important;
    }
    
    /* Đảm bảo icon dấu chấm than vẫn nằm đẹp ở góc */
    .info-box i {
        margin-top: 5px; /* Chỉnh icon xuống xíu cho cân với dòng chữ đầu tiên */
    }
    /* 7. XÓA MỤC BÁN CHẠY NHẤT (Ẩn đi luôn) */
    .badge-hot { 
        display: none !important; 
    }

    /* 8. CĂN CHỈNH LẠI CÁC Ô GIÁ (Cho đều nhau tăm tắp) */
    .combo-content { 
        padding: 20px 10px !important; /* Reset khoảng cách về chuẩn */
        text-align: center !important;
    }
    
    /* Xóa bỏ khoảng trống thừa ở ô giữa (do lúc trước đẩy xuống) */
    .combo-card.best-choice .combo-content {
        padding-top: 20px !important; 
    }

    /* 9. SỬA DÒNG "ƯU ĐÃI SẮP KẾT THÚC" (Cho nhỏ lại để thành 1 dòng) */
    .cta-title {
        font-size: 1.3rem !important;  /* Giảm cỡ chữ xuống */
        white-space: nowrap !important; /* Cấm xuống dòng */
        margin-bottom: 5px !important;
        letter-spacing: -0.5px !important; /* Thu hẹp khoảng cách chữ xíu cho gọn */
    }
    
    /* 10. ĐẢM BẢO HEADER ĐẸP */
    header { padding: 10px 0 !important; }
    .nav-flex { flex-direction: column !important; gap: 8px !important; }
    .logo { display: flex !important; align-items: center !important; justify-content: center !important; }
    .logo span { text-align: center !important; display: block !important; }

    /* 11. Căn đều đoạn văn trên Banner (Ảnh nền cô gái) */
    .hero p {
        text-align: justify !important; /* Căn đều 2 bên */
        text-justify: inter-word !important;
        padding: 0 15px !important; /* Cách lề 2 bên 1 chút cho đẹp */
    }

    /* 12. Căn đều đoạn trích dẫn (Khung viền xanh lá) */
    .highlight-quote {
        text-align: justify !important;
        text-justify: inter-word !important;
    }
    /* 13. Căn đều các đoạn văn chính (Chỗ bạn vừa khoanh vùng) */
    .story-text {
        text-align: justify !important;
        text-justify: inter-word !important;
    }
    /* 14. Căn đều đoạn mô tả sản phẩm & khung vàng */
    .desc-text, .info-box {
        text-align: justify !important;
        text-justify: inter-word !important;
    }
    /* 1. Đẩy chữ Công ty xuống một chút */
    .logo span {
        margin-top: 6px !important;      /* Dịch xuống 6px */
        padding-bottom: 0 !important;
        line-height: 1.2 !important;     /* Co dòng lại cho gọn */
    }

    /* 2. Kéo nút gọi lên gần hơn */
    .nav-flex {
        gap: 5px !important; /* Giảm khoảng cách giữa cụm Logo và Nút (cũ là 8px) */
    }
    
    /* (Tùy chọn) Nếu muốn nút gọi sát hơn nữa thì thêm dòng này */
    .hotline-btn {
        margin-top: 0 !important; 
    }
}