/*
Theme Name: imta-theme
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

.menu-container {
        max-width: 900px;
        margin: 0 auto;
        font-family: 'Cinzel', serif; /* Font chữ có chân phong cách cổ điển */
    }

    .menu-item {
        margin-bottom: 30px;
    }

    .menu-main {
        display: flex;
        align-items: baseline;
    }

    .service-name {
        font-size: 20px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #1a1a1a;
        white-space: nowrap;
    }

    /* Tạo dòng kẻ chấm co giãn linh hoạt */
    .spacer {
        flex-grow: 1;
        border-bottom: 1.5px dotted #a0a0a0;
        margin: 0 15px;
        position: relative;
        top: -4px;
    }

    .price {
        font-size: 24px;
        color: #1a1a1a;
        font-weight: 400;
        display: flex;
        align-items: flex-start;
    }

    .price sup {
        font-size: 14px;
        margin-top: 4px;
        margin-right: 2px;
    }

    .service-time {
        font-family: 'Lora', serif;
        font-style: italic;
        font-size: 15px;
        color: #555;
        margin-top: 4px;
        letter-spacing: 0.5px;
    }

    /* Responsive cho màn hình nhỏ hơn (như điện thoại) */
    @media (max-width: 600px) {
        .service-name {
            font-size: 14px;
            white-space: normal; /* Cho phép rớt dòng nếu tên quá dài trên mobile */
        }
        .price {
            font-size: 18px;
        }
        .spacer {
            margin: 0 8px;
        }
    }
/* Container chính - Dàn thanh lịch 4 cột trên một hàng */
.service-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px; /* Khoảng cách giữa các ô dịch vụ */
    padding: 40px 15px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Định dạng từng ô dịch vụ (Service Item) */
.service-item {
    background: #ffffff; /* Nền trắng sang trọng */
    border: 1px solid #f0f0f0; /* Viền mờ tinh tế */
    border-radius: 8px; /* Bo góc nhẹ hiện đại */
    padding: 35px 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); /* Đổ bóng cực nhẹ tạo độ nổi */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Hiệu ứng mượt mà */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Định dạng khu vực bọc Icon/Hình ảnh */
.service-icon {
    width: 70px; /* Độ rộng của vùng chứa icon */
    height: 70px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
}

/* Tối ưu hình ảnh icon bên trong */
.service-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Định dạng Tiêu đề dịch vụ */
.service-title {
    font-size: 1rem;
    font-weight: 600;
    color: #333333; /* Màu chữ tối sang trọng */
    letter-spacing: 1.5px; /* Giãn chữ nhẹ kiểu Luxury */
    margin: 0;
    text-transform: uppercase; /* Viết hoa toàn bộ tiêu đề */
    position: relative;
    padding-bottom: 10px;
}

/* Thêm một đường gạch chân nhỏ trang trí dưới tiêu đề (Có thể bỏ nếu thích tối giản) */
.service-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 2px;
    background-color: #d4af37; /* Màu vàng gold làm điểm nhấn (Bạn có thể đổi mã màu tùy ý) */
    transition: width 0.3s ease;
}


/* ================= EFFET HOVER (KHI RÊ CHUỘT VÀO) ================= */

.service-item:hover {
    transform: translateY(-8px); /* Hộp dịch vụ nhấc nhẹ lên */
    background: #ffffff; 
    border-color: #d4af37; /* Viền chuyển sang màu Gold (hoặc màu chủ đạo của bạn) */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); /* Đổ bóng sâu hơn tạo cảm giác nổi khối */
}

/* Khi hover vào item thì icon nhấc nhẹ lên thêm chút nữa */
.service-item:hover .service-icon {
    transform: scale(1.08);
}

/* Đường gạch chân dưới tiêu đề dài ra khi hover */
.service-item:hover .service-title::after {
    width: 50px;
}


/* ================= RESPONSIVE (TỰ ĐỘNG CO GIÃN THEO MÀN HÌNH) ================= */

/* Trên máy tính bảng (Tablet): Chia thành 2 hàng, mỗi hàng 2 ô */
@media (max-width: 991px) {
    .service-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 30px 15px;
    }
}

/* Trên điện thoại (Mobile): Thẳng tuột 1 hàng dọc để không bị bóp nghẹt chữ */
@media (max-width: 575px) {
    .service-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .service-item {
        padding: 25px 15px;
    }
}