/*
 * ============================================
 * FILE TÙY CHỈNH MOBILE: BANNER HOME → DANH SÁCH SÀN
 * ============================================
 * 
 * File này chứa TẤT CẢ CSS để tùy chỉnh phần Banner Home
 * cho mobile (width < 900px), bao gồm:
 * - H1 (tiêu đề)
 * - Paragraph (mô tả)
 * - Buttons (Bắt đầu ngay, Nhận tư vấn)
 * - Coming Soon box
 * - 4 icon featured (Auto, +12 Sàn, Up to 60%, 99%)
 * - Đối tác logo slider
 * - Danh Sách Sàn Giao Dịch
 * 
 * CÁCH SỬ DỤNG:
 * 1. Sửa các giá trị trong file này
 * 2. Save file
 * 3. Refresh trình duyệt (Empty Cache and Hard Reload)
 */

/* ============================================
   1. BANNER HOME - CONTAINER
   ============================================ */
@media (max-width: 899px) {
    section.banner-home {
        /* Khoảng cách trên/dưới - GIẢM ĐỂ BỚT TRỐNG */
        padding-top: -40px !important;
        padding-bottom: 40px !important;
        
        /* Khoảng cách trái/phải */
        padding-left: 20px !important;
        padding-right: 20px !important;
        
        /* Background */
        background: #F5F1EA !important;
    }
}

/* ============================================
   2. H1 - TIÊU ĐỀ CHÍNH
   ============================================ */
@media (max-width: 899px) {
    section.banner-home h1 {
        /* Font size - Tự động responsive */
        font-size: clamp(18px, 5vw, 48px) !important;
        
        /* Line height - Khoảng cách giữa các dòng */
        line-height: 1.2 !important;
        
        /* Khoảng cách dưới tiêu đề */
        margin-bottom: 20px !important;
        
        /* Căn giữa */
        text-align: center !important;
        
        /* Font weight */
        font-weight: 700 !important;
    }
    
    /* Dòng 1: "GIAO DỊCH THÔNG MINH" */
    section.banner-home h1 .line1 {
        color: #000000 !important;
        display: block !important;
    }
    
    /* Dòng 2: "NHẬN NGAY HOÀN PHÍ" */
    section.banner-home h1 .line2 {
        color: #FDB022 !important; /* Màu vàng */
        display: block !important;
    }
}

/* ============================================
   3. PARAGRAPH - MÔ TẢ
   ============================================ */
@media (max-width: 899px) {
    section.banner-home .banner-content p {
        /* Font size */
        font-size: 15px !important;
        
        /* Line height */
        line-height: 1.6 !important;
        
        /* Màu chữ */
        color: #475467 !important;
        
        /* Khoảng cách dưới */
        margin-bottom: 24px !important;
        
        /* Căn giữa */
        text-align: center !important;
        
        /* Padding trái/phải để text không sát mép */
        padding: 0 10px !important;
    }
}

/* ============================================
   4. BUTTONS - NÚT BẤT ĐẦU NGAY & NHẬN TƯ VẤN
   ============================================ */
@media (max-width: 899px) {
    section.banner-home .start-button {
        /* Layout */
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        
        /* Căn giữa */
        align-items: center !important;
        justify-content: center !important;
        
        /* Khoảng cách dưới */
        margin-bottom: 32px !important;
    }
    
    /* Style chung cho cả 2 button */
    section.banner-home .start-button a {
        /* Size */
        width: 100% !important;
        max-width: 320px !important;
        padding: 14px 28px !important;
        
        /* Font */
        font-size: 16px !important;
        font-weight: 600 !important;
        
        /* Border & Border radius */
        border-radius: 12px !important;
        
        /* Căn giữa text */
        text-align: center !important;
        display: block !important;
        
        /* Transition */
        transition: all 0.3s ease !important;
    }
    
    /* Button "Bắt đầu ngay" - Nền Navy Blue */
    section.banner-home .start-button a:first-child {
        background: #0f172a !important;
        color: #FFFFFF !important;
        border: 2px solid #0f172a !important;
    }
    
    section.banner-home .start-button a:first-child:hover {
        background: #1e293b !important;
        border-color: #1e293b !important;
        transform: translateY(-2px) !important;
    }
    
    /* Button "Nhận tư vấn" - Viền đen */
    section.banner-home .start-button a.consult-button {
        background: transparent !important;
        color: #0f172a !important;
        border: 2px solid #0f172a !important;
    }
    
    section.banner-home .start-button a.consult-button:hover {
        background: #0f172a !important;
        color: #FFFFFF !important;
    }
}

/* ============================================
   5. COMING SOON BOX
   ============================================ */
@media (max-width: 899px) {
    section.banner-home .banner-video {
        /* Khoảng cách */
        margin-bottom: 32px !important;
    }
    
    section.banner-home .coming-soon-box {
        /* Tỷ lệ 16:9 */
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        
        /* Background */
        background: #0f172a !important;
        
        /* Border */
        border: 3px solid #FFD230 !important;
        border-radius: 16px !important;
        
        /* Căn giữa text */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    section.banner-home .coming-soon-box span {
        /* Font */
        font-size: 28px !important;
        font-weight: 800 !important;
        color: #FFD230 !important;
        
        /* Letter spacing */
        letter-spacing: 4px !important;
    }
}

/* ============================================
   6. LIST ICON FEATURED - 4 ICON (Auto, +12 Sàn, 60%, 99%)
   ============================================ */
@media (max-width: 899px) {
    section.banner-home .list-icon-featured {
        /* Khoảng cách trên */
        margin-top: 0 !important;
    }
    
    section.banner-home .list-icon-featured ul {
        /* Layout: 2x2 grid */
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
        
        /* Reset list style */
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    section.banner-home .list-icon-featured li {
        /* Background & Border */
        background: #FFFFFF !important;
        border: 2px solid #E5E7EB !important;
        border-radius: 12px !important;
        
        /* Padding */
        padding: 16px 12px !important;
        
        /* Layout */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        
        /* Transition */
        transition: all 0.3s ease !important;
    }
    
    section.banner-home .list-icon-featured li:hover {
        border-color: #FDB022 !important;
        transform: translateY(-4px) !important;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Icon container */
    section.banner-home .list-icon-featured .icon-image {
        /* Size */
        width: 48px !important;
        height: 48px !important;
        
        /* Background */
        background: #FFF7E6 !important;
        border-radius: 50% !important;
        
        /* Căn giữa icon */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        /* Khoảng cách dưới */
        margin-bottom: 12px !important;
    }
    
    section.banner-home .list-icon-featured .icon-inner img {
        width: 28px !important;
        height: 28px !important;
        object-fit: contain !important;
    }
    
    /* Text */
    section.banner-home .list-icon-featured .info h3 {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #000000 !important;
        margin: 0 0 4px 0 !important;
        line-height: 1.3 !important;
    }
    
    section.banner-home .list-icon-featured .info p {
        font-size: 12px !important;
        color: #6B7280 !important;
        margin: 0 !important;
        line-height: 1.4 !important;
    }
}

/* ============================================
   7. ĐỐI TÁC LOGO SLIDER
   ============================================ */
@media (max-width: 899px) {
    /* Section đối tác */
    section[style*="Đối Tác"] {
        padding: 32px 0 !important;
        margin-top: 40px !important;
    }
    
    /* Tiêu đề */
    section[style*="Đối Tác"] h2 {
        font-size: 24px !important;
        margin-bottom: 24px !important;
    }
    
    /* Logo */
    .logo-slider img {
        height: 60px !important;
    }
}

/* ============================================
   8. DANH SÁCH SÀN GIAO DỊCH
   ============================================ */
@media (max-width: 899px) {
    section.list-cat-trading-floors {
        /* Khoảng cách trên/dưới */
        padding-top: 50px !important;
        padding-bottom: 40px !important;
        
        /* Padding trái/phải */
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Tiêu đề section */
    section.list-cat-trading-floors .entry-header h2,
    section.list-cat-trading-floors .section-heading h2 {
        font-size: 28px !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }
    
    /* Filter tabs */
    section.list-cat-trading-floors .filter-control-trading-floors {
        margin-top: 20px !important;
        margin-bottom: 24px !important;
    }
    
    section.list-cat-trading-floors .filter-control-trading-floors ul {
        display: flex !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    section.list-cat-trading-floors .filter-control-trading-floors ul li a {
        padding: 8px 16px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }
    
    /* ===== CHỈ SỬA LAYOUT: 2 CỘT THAY VÌ 4 CỘT ===== */
    section.list-cat-trading-floors .list-tab-contents ul {
        grid-template-columns: 1fr 1fr !important; /* 2 cột thay vì 4 */
        gap: 16px !important;
    }
}

/* ============================================
   9. WIDTH-SPECIFIC ADJUSTMENTS
   ============================================ */

/* Điện thoại nhỏ (< 400px) */
@media (max-width: 399px) {
    section.banner-home h1 {
        font-size: 24px !important;
    }
    
    section.banner-home .banner-content p {
        font-size: 14px !important;
    }
    
    section.banner-home .start-button a {
        padding: 12px 24px !important;
        font-size: 15px !important;
    }
    
    section.banner-home .coming-soon-box span {
        font-size: 22px !important;
    }
    
    section.banner-home .list-icon-featured .info h3 {
        font-size: 14px !important;
    }
    
    section.banner-home .list-icon-featured .info p {
        font-size: 11px !important;
    }
}

/* Tablet (600px - 899px) */
@media (min-width: 600px) and (max-width: 899px) {
    section.banner-home h1 {
        font-size: 40px !important;
    }
    
    section.banner-home .banner-content p {
        font-size: 16px !important;
        padding: 0 40px !important;
    }
    
    section.banner-home .start-button {
        flex-direction: row !important;
        gap: 16px !important;
    }
    
    section.banner-home .start-button a {
        max-width: 200px !important;
    }
    
    section.banner-home .list-icon-featured ul {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ============================================
   8. DANH SÁCH SÀN GIAO DỊCH - MOBILE 2 CỘT
   ============================================ */
@media (max-width: 899px) {
    /* Layout 2 cột cho mobile - SELECTOR MẠNH HƠN */
    section.list-cat-trading-floors .list-tab-contents .item.active ul,
    section.list-cat-trading-floors .list-tab-contents .item ul,
    section.list-cat-trading-floors .list-tab-contents ul {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }
}