/* =========================================
   FILE: public/css/section3.css
   Chứa style cho Section 3 (Ảnh & Nút bấm)
========================================= */

/* Xóa khoảng trắng dưới ảnh để nối liền khối ảnh với khối nút bấm */
.section-3-quality .show-pc,
.section-3-quality .show-mobile {
    margin-bottom: 0 !important;
}

/* Khối dải nền chứa nút bấm */
.quality-action-wrap {
    background-image: url('../images/background-slogam.jpg');
    /* Sử dụng nền gỗ/slogan */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 50px 20px;
    text-align: center;
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    /* Căn giữa màn hình */
}

/* Lớp phủ đen mờ để làm nổi bật nút bấm trên nền ảnh */
.quality-action-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.quality-action-wrap .container-action {
    position: relative;
    z-index: 2;
    /* Đảm bảo nút bấm nổi lên trên lớp phủ đen */
}

/* --- STYLE MỚI CHO NÚT MORE ABOUT... --- */
.btn-more-about {
    display: inline-block;
    /* Hiệu ứng nền quét sáng sang trọng */
    background: linear-gradient(45deg, #d89f3c, #f9d976, #d89f3c);
    background-size: 200% auto;
    color: #000;
    text-transform: uppercase;
    font-weight: 900;
    text-decoration: none;
    padding: 15px 45px;
    border-radius: 12px;
    font-size: 1.1rem;
    transition: 0.5s;
    /* Chuyển động mượt */
    box-shadow: 0 4px 15px rgba(216, 159, 60, 0.4);
}

.btn-more-about:hover {
    background-position: right center;
    /* Chạy dải màu sáng qua phải */
    transform: translateY(-4px);
    /* Nảy lên nhẹ */
    box-shadow: 0 8px 25px rgba(216, 159, 60, 0.7);
}

/* Responsive cho Mobile */
@media (max-width: 768px) {
    .quality-action-wrap {
        padding: 25px 10px;
        /* Thu gọn cả khoảng trống của dải nền đen cho cân đối */
    }

    .btn-more-about {
        padding: 8px 15px;
        /* Bóp hẹp viền nút lại tối đa */
        font-size: 12px;
        /* Hạ cỡ chữ xuống mức nhỏ vừa đủ đọc (tương đương 0.75rem) */
        border-radius: 6px;
        /* Bo góc nhỏ lại cho hợp với tỷ lệ nút */
        white-space: normal;
        /* Quan trọng: Cho phép rớt 2 dòng nếu màn hình điện thoại quá hẹp */
        line-height: 1.4;
        /* Giãn dòng ra một chút nếu chữ bị rớt dòng */
        letter-spacing: 0.5px;
        /* Giãn khoảng cách các chữ cái ra một chút cho thoáng */
    }
}