.detail-ser {
    background-color: #fff;
    background-image: url(/Design/img/home-bg-2.png);
    background-size: cover;
}

.detail-ser-options {
    display: flex;
    align-items: center;
    border: 1px solid #33333312;
    border-left: 0;
    border-right: 0;
    padding: 10px 0px;
    margin-top: 20px;
}

.detail-ser-img {
    height: 420px;
    margin-top: 25px;
}

.detail-ser-content section {
    font-size: 16px;
    color: #333;
    line-height: 176%;
}

    .detail-ser-content section h3 {
        font-weight: 100;
        color: var(--default-color-1);
        font-family: interSB;
    }

.detail-ser-content {
    padding: 5px 0;
}

    .detail-ser-content p {
        margin: 10px 0;
        margin: 0;
    }

.container h3 {
    font-size: 22px;
    color: var(--default-color-2);
    font-family: 'interM';
}

.same-cate {
    padding-bottom: 54px;
}

.detail-ser-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-ser-options .options-item {
    margin-right: 15px;
    color: #333333d4;
    font-size: 14px;
    display: flex;
    align-items: center;
}

    .detail-ser-options .options-item i {
        color: var(--default-color-1);
    }

    .detail-ser-options .options-item span {
        display: block;
        margin-left: 7px;
    }

.detail-ser-top {
}

    .detail-ser-top .top-title {
        margin: 0;
        color: var(--default-color-2);
        font-family: interB;
        font-size: 32px;
        font-weight: 100;
        text-transform: capitalize;
        line-height: 153%;
        text-align: center;
    }

.detail-ser-container {
    padding: 50px 0;
}

.detail-ser-top .top-descript {
    font-weight: 100;
    font-size: 18px;
    color: #333;
    line-height: 164%;
    padding: 8px 15px;
    text-align: center;
    padding-bottom: 18px;
}
/* Container bao ngoài */
.pricing-container {
    margin-bottom: 3rem; /* mb-12 */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Thẻ Card trắng chứa bảng */
.pricing-card {
    background-color: #ffffff;
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    padding: 2rem; /* p-8 */
}

/* Header của Card */
.card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* gap-3 */
    margin-bottom: 1.5rem; /* mb-6 */
}

/* Vòng tròn Icon Gradient */
.icon-box {
    width: 3rem; /* w-12 */
    height: 3rem; /* h-12 */
    background: linear-gradient(to bottom right, #facc15, #f97316); /* yellow-400 to orange-500 */
    border-radius: 0.75rem; /* rounded-xl */
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-svg {
    color: #ffffff;
}

.title {
    font-size: 1.25rem; /* text-xl */
    color: #111827; /* gray-900 */
    margin: 0;
}

.subtitle {
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* gray-600 */
    margin: 0;
}

/* Table Responsive */
.table-responsive {
    overflow-x: auto;
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
}

    /* Cấu trúc Table Head */
    .pricing-table thead tr {
        border-bottom: 2px solid #e5e7eb; /* border-gray-200 */
    }

    .pricing-table th {
        padding: 1rem; /* py-4 px-4 */
        color: #374151; /* gray-700 */
        font-weight: 600;
    }

    /* Cấu trúc Table Body */
    .pricing-table tbody tr {
        border-bottom: 1px solid #f3f4f6; /* border-gray-100 */
        transition: background-color 0.2s;
    }

        .pricing-table tbody tr:hover {
            background-color: #f9fafb; /* hover:bg-gray-50 */
        }

    .pricing-table td {
        padding: 1rem; /* py-4 px-4 */
    }

.table-scroll-wrapper {
    max-height: 600px; /* Chiều cao tối đa bạn muốn hiển thị trước khi cuộn */
    overflow-y: auto; /* Hiện thanh cuộn dọc khi nội dung vượt quá max-height */
    overflow-x: auto; /* Hiện thanh cuộn ngang nếu bảng quá rộng trên mobile */
    position: relative;
    border: 1px solid #eee;
}

/* 2. Giữ tiêu đề bảng cố định ở trên cùng khi cuộn (Sticky Header) */
.pricing-table thead th {
    position: sticky;
    top: 0; /* Cố định ở vị trí 0 khi cuộn */
    background: #f8f9fa; /* Phải có màu nền để không bị nội dung bên dưới đè lên chữ */
    z-index: 10; /* Đảm bảo tiêu đề nằm trên cùng */
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); /* Tạo đường kẻ dưới tiêu đề cho đẹp */
}

/* 3. Tùy chỉnh thanh cuộn đẹp hơn (tùy chọn) */
.table-scroll-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.table-scroll-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.table-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

    .table-scroll-wrapper::-webkit-scrollbar-thumb:hover {
        background: #999;
    }

/* 4. Đảm bảo bảng hiển thị tốt */
.pricing-table {
    width: 100%;
    border-collapse: collapse;
}
/* Định dạng nội dung ô */
.route-name {
    color: #111827; /* gray-900 */
    font-weight: 500;
}

.route-direction {
    font-size: 0.875rem; /* text-sm */
    color: #6b7280; /* gray-500 */
}

.text-gray {
    color: #4b5563; /* gray-600 */
}

.price {
    color: #ea580c; /* text-orange-600 */
    font-weight: 600;
}

/* Căn lề */
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.detail-ser-left {
    float: left;
    width: 100%;
}

.detail-ser-right {
    float: right;
    width: 320px;
}


@media(max-width:1023px) {
    .detail-ser-left,
    .detail-ser-right {
        width: 100%;
        float: unset;
        padding: 0;
    }
}

@media(min-width:740px) and (max-width:1023px) {

    .detail-ser-container {
        padding: 35px 0;
    }
}

@media(max-width:739px) {
    .detail-ser-container {
        padding: 25px 0;
    }

    .price-row {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .options-grid {
        display: flex !important;
        flex-direction: column;
    }

    .detail-ser-top .top-title {
        font-size: 22px;
    }

    .detail-ser-top .top-descript {
        font-size: 14px;
        padding: 8px 15px;
    }

    .detail-ser-img {
        height: 250px;
    }

    .detail-ser-options .options-item {
        font-size: 12px;
    }

    .detail-ser-content section {
        font-size: 15px;
    }

    .detail-ser-content {
        padding-bottom: 20px
    }
}
/* Container chung */
.route-section {
    margin-bottom: 3rem; /* mb-12 */
    font-family: sans-serif;
}

/* Thẻ card nền trắng */
.route-card {
    background-color: #ffffff;
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* shadow-lg */
    padding: 2rem; /* p-8 */
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.route-header {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* gap-3 */
    margin-bottom: 1.5rem; /* mb-6 */
}

.icon-car-box {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(to bottom right, #facc15, #f97316);
    border-radius: 0.75rem; /* rounded-xl */
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-white {
    color: #fff;
}

.route-title {
    font-size: 1.25rem;
    color: #111827;
    margin: 0;
}

.route-subtitle {
    font-size: 0.875rem;
    color: #4b5563;
    margin: 0;
}

/* Grid Layout */
.route-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 cột trên điện thoại */
    gap: 1rem; /* gap-4 */
}

/* Từng item tuyến đường */
.route-item {
    background-color: #f9fafb; /* bg-gray-50 */
    padding: 1rem;
    border-radius: 0.75rem; /* rounded-xl */
    transition: background-color 0.3s ease;
}

    .route-item:hover {
        background-color: #f3f4f6; /* hover:bg-gray-100 */
    }

.destination {
    color: #111827;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Nhóm giá */
.price-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.875rem;
}

.price-type {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #4b5563;
}

.icon-small {
    color: #9ca3af;
}
/* gray-400 */

.highlight {
    color: #ea580c; /* orange-600 */
    font-weight: 600;
}

/* Responsive cho máy tính (md:grid-cols-2) */
@media (min-width: 768px) {
    .route-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* Layout chung */
.service-section {
    margin-bottom: 3rem; /* mb-12 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.service-card {
    background-color: #ffffff;
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    padding: 2rem; /* p-8 */
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* gap-3 */
    margin-bottom: 1.5rem; /* mb-6 */
}

.icon-clock-wrapper {
    width: 3rem; /* w-12 */
    height: 3rem; /* h-12 */
    background: linear-gradient(to bottom right, #facc15, #f97316); /* yellow-400 to orange-500 */
    border-radius: 0.75rem; /* rounded-xl */
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-white {
    color: white;
}

.header-title {
    font-size: 1.25rem; /* text-xl */
    color: #111827; /* gray-900 */
    margin: 0;
}

.header-subtitle {
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* gray-600 */
    margin: 0;
}

/* Grid Layout */
.options-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem; /* gap-6 */
}

@media (min-width: 768px) {
    .options-grid {
        grid-template-columns: 1fr 1fr; /* md:grid-cols-2 */
    }
}

/* Option Box */
.option-box {
    padding: 1.5rem; /* p-6 */
    border: 2px solid #e5e7eb; /* border-gray-200 */
    border-radius: 0.75rem; /* rounded-xl */
    transition: all 0.2s ease-in-out; /* transition-all */
}

    .option-box:hover {
        border-color: #fdba74; /* hover:border-orange-300 */
    }

.option-title {
    font-size: 1.125rem; /* text-lg */
    color: #111827; /* gray-900 */
    margin-top: 0;
    margin-bottom: 0.75rem;
}

/* Pricing Row */
.price-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.price-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.icon-gray {
    color: #9ca3af;
}
/* gray-400 */

.label {
    color: #4b5563;
}
/* gray-600 */

.price-tag {
    font-size: 1.125rem; /* text-xl */
    color: #ea580c; /* text-orange-600 */
    font-weight: 600;
}

/* Features List */
.features-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* space-y-2 */
}

.feature-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem; /* text-sm */
    color: #4b5563;
}

.icon-green {
    color: #22c55e;
}
/* text-green-500 */
.cta-section {
    /* margin-top: 3rem; */ /* mt-12 */
    text-align: center;
    font-family: sans-serif;
}

/* Nút đặt xe ngay */
.btn-call {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem; /* gap-3 */
    padding: 1rem 2rem; /* py-4 px-8 */
    background: linear-gradient(to right, #eab308, #f97316); /* yellow-500 to orange-500 */
    color: #ffffff;
    text-decoration: none;
    border-radius: 9999px; /* rounded-full */
    font-size: 1.125rem; /* text-lg */
    font-weight: 500;
    transition: all 0.3s ease; /* transition-all */
    margin-bottom: 1rem;
}

    /* Hiệu ứng khi di chuột qua nút */
    .btn-call:hover {
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-xl */
        transform: translateY(-2px); /* Nhấc nhẹ nút lên */
    }

/* Icon điện thoại */
.icon-phone {
    flex-shrink: 0;
}

/* Dòng ghi chú nhỏ phía dưới */
.cta-note {
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* gray-600 */
    margin-top: 1rem; /* mt-4 */
}