/* ========================================
   PAGE-SPECIFIC STYLES
   Bà Nà Hills Landing Page
======================================== */

/* ========== CUSTOMIZE: Hero Background Image ========== */
.hero {
    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.45) 100%), 
                      url('../../img/ba-na-hills.jpg');
}

/* ========== OPTIONAL: Custom Color Scheme ========== */
/* Uncomment and modify if you want different colors for this page */

/*
.hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.urgency-banner {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
}

.btn-cta {
    background: linear-gradient(135deg, #ff6f00 0%, #ff8f00 100%);
}

.feature-title {
    color: #ff6f00;
}
*/

/* ========== PAGE-SPECIFIC: Make Low-Profit Card Less Attractive ========== */
/* Target the second product card (800.000đ - lowest price, least profit) */
.product-card:nth-of-type(2) {
    opacity: 0.85;
    filter: grayscale(10%);
}

.product-card:nth-of-type(2):hover {
    opacity: 0.92;
    filter: grayscale(5%);
}

.product-card:nth-of-type(2) .btn-cta {
    background: linear-gradient(135deg, var(--color-hot-deal) 0%, #ff6b81 100%) !important;
}

.product-card:nth-of-type(2) .btn-cta:hover {
    background: linear-gradient(135deg, #bdbdbd 0%, #9e9e9e 100%);
}

/* ========== OPTIONAL: Page-Specific Overrides ========== */
/* Add any custom styles specific to this landing page here */

/* --- Comparison & FAQ --- */

/* 1. Comparison Table */
.comparison-section { margin-bottom: 40px; background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.comparison-table { width: 100%; border-collapse: collapse; margin-top: 15px; }
.comparison-table th { background: #f4f6f8; padding: 15px; text-align: left; color: #333; font-weight: 700; border-radius: 8px 8px 0 0; }
.comparison-table td { padding: 15px; border-bottom: 1px solid #eee; color: #555; font-size: 14px; }
.comparison-table tr:last-child td { border-bottom: none; }
.check-icon { color: #2ecc71; font-weight: bold; margin-right: 5px; }
.cross-icon { color: #e74c3c; font-weight: bold; margin-right: 5px; }
.highlight-cell { color: #d32f2f; font-weight: bold; background: #fff5f5; }

/* 2.Expert Tips */
/* .tips-section { background: #e3f2fd; padding: 25px; border-radius: 12px; border-left: 5px solid #2196f3; margin-bottom: 30px; } */
.tips-title { font-weight: bold; color: #1565c0; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.tips-content { font-size: 14px; color: #333; line-height: 1.6; }

/* 3. FAQ - Using default HTML5 details tag */
.faq-section { margin-bottom: 40px; }
.faq-item { background: white; border: 1px solid #eee; border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.faq-item summary { padding: 15px; cursor: pointer; font-weight: 600; color: #333; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; } /* Hide default arrow */
.faq-item summary::after { content: '+'; font-size: 20px; color: #ff6f00; font-weight: bold; }
.faq-item[open] summary::after { content: '-'; }
.faq-item[open] summary { border-bottom: 1px solid #eee; background: #fafafa; }
.faq-content { padding: 15px; font-size: 14px; color: #666; line-height: 1.5; }

/* Mobile Responsive */
@media (max-width: 600px) {
    .comparison-table th, .comparison-table td { padding: 10px 5px; font-size: 12px; }
    .hide-mobile { display: none; } /* Hide extra columns if needed */
}

/* Sử dụng biến từ core-theme.css */
.tech-badge {
    background: rgba(26, 26, 46, 0.8); /* Dùng mã rgba của màu tối */
    color: var(--color-primary); 
    font-family: var(--font-code);
    border: 1px solid var(--color-primary);
    box-shadow: 0 0 10px rgba(0, 230, 118, 0.2);
    /* ... các thuộc tính khác giữ nguyên ... */
}

.tips-section {
    background: #fff;
    border-left: 5px solid var(--color-primary);
}