/* 
 * 多語言版本按鈕響應式修正
 * 解決問題：長文字按鈕在小螢幕會斷行
 * 適用範圍：各語言版本首頁 hero-buttons
 * 主要針對：越南文 "Chơi Đơn" 和 "Đấu Trường Online"
 * 可擴展至：日文、韓文、中文等其他語言版本
 */

/* 基礎樣式 - 針對越南文版的hero-buttons */
.hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: nowrap; /* 防止按鈕換行 */
}

/* 針對越南文的按鈕文字設定 */
.hero-buttons .btn {
    white-space: nowrap; /* 保持文字在一行內 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* 圖標和文字間距 */
    min-width: 0; /* 允許flex收縮 */
    flex: 0 1 auto; /* 讓按鈕根據內容自適應寬度 */
}

/* 小螢幕響應式調整 */
@media (max-width: 768px) {
    .hero-buttons {
        gap: 10px; /* 減小按鈕間距 */
        width: 100%;
    }
    
    .hero-buttons .btn {
        padding: 8px 12px; /* 減小padding讓按鈕更緊湊 */
        font-size: 16px; /* 保持原本字體大小 */
        min-width: 0;
        flex: 0 1 auto; /* 按鈕根據內容自適應寬度 */
        text-align: center;
    }
    
    /* 特別針對短文字按鈕（Chơi Đơn）允許更緊湊 */
    .hero-buttons .btn.primary-btn {
        flex-shrink: 2; /* 允許更多收縮 */
    }
    
    /* 特別針對長文字按鈕（Đấu Trường Online）保持更多空間 */
    .hero-buttons .btn.secondary-btn {
        flex-shrink: 1; /* 較少收縮，保持更多空間 */
    }
    
    /* 確保圖標不會太大 */
    .hero-buttons .btn i {
        font-size: 14px;
    }
}

/* 更小螢幕的進一步調整 */
@media (max-width: 480px) {
    .hero-buttons {
        gap: 8px; /* 進一步減小間距 */
    }
    
    .hero-buttons .btn {
        padding: 6px 10px; /* 更小的padding */
        font-size: 15px; /* 盡量保持較大字體 */
        gap: 6px; /* 圖標和文字間距更小 */
    }
    
    /* 在更小螢幕上進一步優化按鈕收縮比例 */
    .hero-buttons .btn.primary-btn {
        flex-shrink: 3; /* 短文字按鈕允許更多收縮 */
        padding: 6px 8px; /* 更緊湊的padding */
    }
    
    .hero-buttons .btn i {
        font-size: 12px; /* 更小的圖標 */
    }
}

/* 非常小的螢幕（320px以下）*/
@media (max-width: 320px) {
    .hero-buttons .btn {
        padding: 5px 8px;
        font-size: 14px; /* 仍盡量保持可讀性 */
        gap: 4px;
    }
    
    /* 極小螢幕上短按鈕進一步收縮 */
    .hero-buttons .btn.primary-btn {
        padding: 4px 6px; /* 最緊湊設定 */
        flex-shrink: 4; /* 最大收縮比例 */
    }
    
    .hero-buttons .btn i {
        font-size: 11px;
    }
}