﻿/* Scope toàn bộ dưới #priority-section */
#priority-section .custom-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 30px 40px;
    font-size: 24px;
    border: none;
    border-radius: 15px;
    color: white;
    transition: background 0.5s, transform 0.3s;
    cursor: pointer;
    width: 100%; /* full container width */
    max-width: 1000px; /* nếu container rộng hơn thì giới hạn */
    text-transform: uppercase;
    margin: 0 auto; /* căn giữa trong container */
    font-family: Arial, Helvetica, sans-serif;
}

    #priority-section .custom-button .badge_item {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        margin-right: 24px;
        border-radius: 50%;
        font-size: 48px;
        font-weight: bold;
    }

    #priority-section .custom-button .text {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    #priority-section .custom-button .title {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 8px;
    }

    #priority-section .custom-button .subtitle {
        font-size: 20px;
        opacity: .8;
        line-height: 1.2;
    }

    #priority-section .custom-button .highlight {
        font-weight: 800;
        background-color: rgba(255,255,255,0.3);
        padding: 0 4px;
        border-radius: 4px;
    }

    /* Nút 1: xanh dương */
    #priority-section .custom-button.priority_1 {
        background: linear-gradient(45deg, #007bff, #0056b3);
        margin-bottom: 16px;
    }

        #priority-section .custom-button.priority_1:hover {
            background: linear-gradient(45deg, #0056b3, #003d80);
            transform: scale(1.05);
        }

    /* Nút 2: xanh lá */
    #priority-section .custom-button.priority_2 {
        background: linear-gradient(45deg, #9ccc65, #689f38);
    }

        #priority-section .custom-button.priority_2:hover {
            background: linear-gradient(45deg, #689f38, #33691e);
            transform: scale(1.05);
        }

    /* Active chung */
    #priority-section .custom-button:active {
        transform: scale(1.03);
    }

/* Responsive: ≤992px dùng 90vw */
@media (max-width: 992px) {
    #priority-section .custom-button .title{
        font-size: 20px;
    }
    #priority-section .custom-button .subtitle {
        font-size: 16px;
    }
    #priority-section .custom-button {
        font-size: 20px;
        padding: 25px 35px;
        width: 90vw;
        max-width: none;
        white-space: unset !important;
    }

        #priority-section .custom-button .badge_item {
            width: 56px;
            height: 56px;
            font-size: 48px;
            margin-right: 16px;
        }
}

/* Responsive nhỏ hơn: badge xuống dưới */
@media (max-width: 576px) {
   
    #priority-section .custom-button {
        flex-direction: column;
        text-align: center;
    }

        #priority-section .custom-button .badge_item {
            margin-right: 0;
            margin-bottom: 12px;
        }
}
