* {
    font-family: 'nunito-sans';
    font-size: 14px;
}

/* Hệ thống Style chuẩn đồng bộ với Trang chính Pacific Cross */
#travel-stepper-container {
    padding: 50px 0;
    background-color: #f9fbfd;
    color: #2b3d51;
    font-family: inherit;
}

.travel-flex-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.travel-main-pane {
    flex: 0 0 100%;
    max-width: 100%;
    background: #ffffff;
    padding: 40px;
    border: 1px solid #e1e8ed;
    box-shadow: 0 4px 12px rgba(0, 84, 166, 0.03);
}

/* Tối ưu hóa tiêu đề để tự động xuống dòng khi màn hình hẹp */
.travel-main-pane h5.text-secondary {
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.4;
    padding-right: 15px; /* Tạo khoảng cách an toàn với cụm nút bấm */
}

.travel-side-summary {
    flex: 0 0 calc(30% - 30px);
    max-width: calc(30% - 30px);
    background: #ffffff;
    padding: 30px;
    border: 1px solid #e1e8ed;
    box-shadow: 0 4px 12px rgba(0, 84, 166, 0.03);
    height: fit-content;
    position: sticky;
    top: 30px;
    border-top: 4px solid #0054a6;
}

.quote-summary {
    font-size: 15px;
    letter-spacing: 0.5px;
}

/* Stepper Header & Subtitle */
.travel-stepper-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    border-bottom: 2px solid #e1e8ed;
    padding-bottom: 15px;
}

.travel-step-item {
    flex: 1;
    text-align: center;
    font-weight: bold;
    color: #9cb0c3;
    position: relative;
    font-size: 16px;

    /* Sử dụng flex layout mặc định cho Desktop nằm ngang hàng */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.travel-step-item.active {
    color: #0054a6;
}

.travel-step-item.active::after {
    content: '';
    position: absolute;
    bottom: -17px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #f26522;
}

.travel-step-subtitle {
    font-size: 13px;
    color: #617385;
    margin-bottom: 35px;
    text-align: center;
    font-style: italic;
}

/* Form Sections */
.travel-step-content {
    display: none;
}

.travel-step-content.active {
    display: block;
}

.travel-section-title {
    font-size: 18px;
    font-weight: 700;
    color: #0054a6;
    margin-top: 25px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e1e8ed;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Giao diện Choice Cards chuẩn */
.choice-card {
    border: 2px solid #e1e8ed;
    padding: 20px;
    transition: all 0.2s ease-in-out;
    background: #ffffff;
    position: relative;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 280px;
}

.choice-card.active {
    border-color: #f26522;
    background-color: #fffaf7;
}

.card-btn-area {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}

#card-package-basic {
    cursor: pointer;
}

#card-package-custom {
    cursor: default;
    border: 2px dashed #0054a6;
}

/* Khung Tùy chỉnh quyền lợi phụ Travel Flex */
.custom-flex-box {
    background: #f4f7fa;
    border: 1px solid #e1e8ed;
    padding: 25px;
    margin-top: 20px;
    display: none;
}

/* Summary Panel */
.summary-item-label {
    text-align: left;
    color: #617385;
}

.summary-item-row {
    display: flex !important;
    justify-content: space-between; /* Đẩy nhãn sang trái, giá trị sang phải */
    align-items: center;            /* Căn giữa thẳng hàng theo chiều dọc */
    padding: 8px 0;
    border-bottom: 1px dashed #e1e8ed; /* Tạo đường phân cách nhẹ giữa các dòng cho đẹp */
}

/* Xóa đường gạch dưới cho dòng cuối cùng */
.summary-item-row:last-child {
    border-bottom: none;
}

/* Cấu hình cho phần Giá trị (Value) - CHÌA KHÓA CHỐNG RỚT DÒNG */
.summary-item-value {
    text-align: right;
    font-weight: 600;
    color: #0054a6;
    white-space: nowrap; /* Ép toàn bộ số và chữ nằm trên 1 hàng duy nhất */
    font-size: 14px;
}

/* Định dạng riêng cho ô tổng tiền lớn (h2) */
.summary-item-value .sum-premium-txt {
    white-space: nowrap !important; /* Đảm bảo tiền và chữ VNĐ luôn dính liền nhau */
    display: inline-block;          /* Biến h2 thành khối inline để không chiếm full dòng */
}

/* ======================================================= */
/* CẤU HÌNH RIÊNG CHO CLASS TRONG MODAL ĐỂ CHỐNG BỂ KHUNG */
/* ======================================================= */
/* Đảm bảo hàng (row) trong modal luôn là flexbox */
#travel-summary-box-content .summary-item-row {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start !important; /* Canh đều từ đỉnh dòng xuống khi chữ dài bị rớt dòng */
    width: 100%;
}

/* Cấu hình Nhãn (Label) chiếm đúng 50% */
#travel-summary-box-content .summary-item-label {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    text-align: left;
    padding-right: 15px; /* Tạo khoảng cách an toàn ở giữa tránh dính chữ */
    white-space: normal !important; /* Cho phép nhãn xuống dòng nếu quá dài */
    word-break: break-word;
}

/* Cấu hình Giá trị (Value) chiếm đúng 50% */
#travel-summary-box-content .summary-item-value {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    text-align: right; /* Ép nội dung dạt hết về bên phải */
    white-space: normal !important; /* Cho phép chữ xuống hàng tự nhiên bên trong modal */
    word-break: break-word;        /* Tự bẻ từ dài xuống hàng */
}

/* Fix riêng cho thẻ H2 tổng tiền không vượt quá 50% của cha */
#travel-summary-box-content .summary-item-value .sum-premium-txt {
    font-size: 1.5rem !important; /* Thu nhỏ bớt size chữ trong modal để ko phá hàng */
    white-space: normal !important;
    word-break: break-word;
    display: block;
    width: 100%;
}

.total-premium-box {
    background-color: #f4f7fa;
    padding: 15px;
    margin-top: 20px;
    border: 1px solid #e1e8ed;
}

/* Hệ thống nút của Pacific Cross */
.btn-pc-main {
    background: #0054a6;
    color: #fff;
    border: none;
    padding: 12px 25px;
    font-weight: bold;
    transition: 0.2s;
}

.btn-pc-main:hover {
    background: #003b75;
    color: #fff;
}

.btn-pc-secondary {
    background: #fff;
    color: #0054a6;
    border: 1px solid #0054a6;
    padding: 12px 25px;
    font-weight: bold;
}

.btn-pc-secondary:hover {
    background: #f4f7fa;
}

.btn-pc-accent {
    background: #f26522;
    color: #fff;
    border: none;
    padding: 12px 25px;
    font-weight: bold;
}

.btn-pc-accent:hover {
    background: #d44e11;
    color: #fff;
}

.btn-pc-text-danger {
    background: none;
    border: none;
    color: #d9534f;
    font-weight: bold;
    padding: 5px;
    cursor: pointer;
}

.btn-pc-success {
    background: #28a745;
    color: #fff;
    border: 1px solid #28a745;
    padding: 12px 25px;
    font-weight: bold;
}

.btn-pc-success:hover {
    background: #175f28;
    color: #fff;
}

/* Khung thông tin người được bảo hiểm động */
.insured-person-frame {
    border: 1px solid #bbd0e5 !important;
    padding: 25px;
    margin-bottom: 25px;
    background: #ffffff;
    position: relative;
}

.btn-trigger-ekyc {
    padding: 4px 10px;
    font-size: 12px;
}

.btn-delete-frame {
    padding: 4px 10px;
    font-size: 12px;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    margin-top: 5px;
    margin-left: 5px;
}

/* Khung Single (Nước khởi hành) - Giữ nguyên chiều cao cố định */
.select2-container--bootstrap4 .select2-selection--single {
    height: calc(1.5em + .75rem + 5.5px) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    display: flex !important;
    align-items: center !important;
}

/* Khung Multiple (Nước đến) - BỎ height cố định, dùng min-height để tự kéo dài khi rớt dòng */
.select2-container--bootstrap4 .select2-selection--multiple {
    min-height: calc(1.5em + .75rem + 5.5px) !important;
    height: auto !important; /* Ép nhận diện chiều cao tự động */
    padding: 2px 8px !important; /* Tạo khoảng cách đệm trên dưới trái phải thống nhất */
    display: flex !important;
    align-items: center !important;
}

/* Định dạng vùng chứa các option đã chọn bên trong khung multiple */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important; /* Cho phép các badge quốc gia tự động xuống dòng */
    gap: 4px !important; /* Tạo khoảng cách đều giữa các badge */
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

/* Fix lỗi dính viền tuyệt đối cho các item đã chọn (Dùng đúng selector của bạn) */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    margin-left: 0 !important;
    margin-right: 4px !important;
    padding: 2px 8px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* Định dạng ô input tìm kiếm nhỏ gọn bên trong Select2 multiple */
.select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline {
    display: inline-flex !important;
    align-items: center !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin: 0 !important;
    padding-left: 4px !important;
    height: 24px !important;
    line-height: 24px !important;
}

.select2-single-itinerary, .select2-multiple-itinerary {
    width: 100%;
}

/* Biến nút Details thành dạng Link text nhỏ gọn, loại bỏ lỗi tràn viền phải */
.btn-trigger-details-link {
    background: none !important;
    border: none !important;
    color: #0054a6 !important;
    text-decoration: underline !important;
    font-size: 11.5px !important;
    padding: 0 !important;
    cursor: pointer;
    font-weight: 500;
}

.btn-trigger-details-link:hover {
    color: #f26522 !important;
}

/* Trạng thái card plan mặc định khi bị loại trừ / vô hiệu hóa do sai vùng địa lý */
.choice-card.package-card.disabled {
    opacity: 0.55;
    pointer-events: none;
    background-color: #f4f6f8 !important;
    border-color: #ccd6dd !important;
}

.choice-card.package-card.disabled .btn-select-package {
    background: #ccd6dd !important;
    color: #777 !important;
    border: none !important;
}

/* Đảm bảo layout Title bên trái, Selection bên phải trên PC và Responsive đẹp trên Mobile */
.customize-benefit-row {
    border-bottom: 1px solid #f0f4f8;
    padding-bottom: 15px;
}

.customize-benefit-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.country-list-subtext {
    font-size: 11px;
    line-height: 1.4;
}

/* Kiểu dáng khối Suggested coverage area */
.suggested-coverage-box {
    color: #4a5568;
    font-size: 12px;
}

/* Đóng khung và in đậm nội dung Medical Expenses nằm sát dưới Title */
.medical-limit-badge-box {
    border: 1px dashed #0054a6;
    background-color: #f0f7ff;
    color: #004085;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    word-break: break-word;
}

.med-std {
    border-color: #28a745;
    background-color: #f4fff6;
    color: #19692c;
}

.med-premium {
    border-color: #ffc107;
    background-color: #fffdf0;
    color: #856404;
}

/* Định dạng danh sách liệt kê đầu dòng */
.list-benefit-items {
    list-style-type: disc !important;
    padding-left: 18px !important;
    margin-bottom: 0;
}
.list-benefit-items li {
    margin-bottom: 4px;
    font-size: 11.5px;
    line-height: 1.3;
    word-break: break-word; /* Chống tràn chữ tuyệt đối */
}

/* Đảm bảo các cột chiều cao tương đương và phân bổ nút bấm xuống đáy */
.row-equal-height-cards {
    display: flex;
    flex-wrap: wrap;
}
.package-card {
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    padding: 16px;
    transition: all 0.2s ease-in-out;
}
.package-card.active {
    border-color: #0054a6;
    box-shadow: 0 4px 12px rgba(0, 84, 166, 0.15);
}

.p-basic {
    margin-bottom: 25px !important;
}

/* Đảm bảo các dòng benefit ở 2 bên card có chiều cao bằng nhau */
.package-card .customize-benefit-row {
    min-height: 37px; /* Chiều cao chuẩn của ô select-sm bao gồm cả border */
    display: flex;
    align-items: center; /* Căn giữa text theo chiều dọc */
}

/* Căn lề cho text hiển thị đẹp, không bị dính sát */
.package-card .customize-benefit-row strong.text-right {
    display: block;
    width: 100%;
    line-height: 37px;
}

/* Rút nhỏ kích thước text nút bấm hành động để không bị tràn lệch */
.card-btn-area .btn-select-package {
    font-size: 11px !important;
    padding: 4px 8px !important;
    white-space: nowrap;
}

.modal .close {
    height: 2rem;
    top: 0rem;
    right: 0rem;
}
.modal .close span {
    margin-top: -.8rem;
}

.btn-trigger-summary-details {
    width: 100%;
    margin-top: 20px;
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    color: white;
}

.suggested-coverage-title {
    font-size: 10px;
}

.suggested-coverage-result {
    font-size: 11px;
    padding: 5px 10px;
}

#payment-info {
    border: 0px !important;
    width: 1px !important;
    min-width: 100% !important;
    max-width: 100% !important; /* Ép tuyệt đối không tràn khung hình */
    box-sizing: border-box !important; /* Tính cả border/padding vào 100% chiều rộng */
    overflow: hidden !important;
}

/* TRÊN DESKTOP */
#btn-separator {
    flex-grow: 1; /* Ép cái div này giãn to hết cỡ để đẩy cụm nút phải và nút trái ra xa nhau */
    pointer-events: none; /* Tránh cản trở việc click chuột vào vùng trống */
}

#travel-step-3 .btn-back-step {
    margin-left: 15px;
}

/* Cấu hình riêng cho Mobile (< 576px) để giao diện nhìn cân đối hơn */
@media (max-width: 575.98px) {
    /* Nếu text tiêu đề và nút vẫn quá khít, chuyển Flexbox thành hàng dọc */
    .d-flex.justify-content-between.align-items-center.border-bottom {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px; /* Tạo khoảng cách giữa hàng chữ và hàng nút */
    }
    
    /* Cho cụm nút dàn hàng ngang đều bên dưới */
    .d-flex.justify-content-between.align-items-center.border-bottom > div {
        width: 100%;
        display: flex;
        justify-content: flex-start !important; /* Đẩy các nút về bên trái */
    }

    .total-premium-inline-box {
        padding: 15px !important; /* Thu nhỏ padding của box ngoài để tăng diện tích hiển thị */
    }
    
    .summary-item-value .sum-premium-txt {
        font-size: 1.6rem !important; /* Thu nhỏ nhẹ cỡ chữ tổng tiền từ 2.25rem xuống 1.6rem trên mobile để vừa vặn */
    }
}

/* TRÊN MOBILE (< 768px) */
@media (max-width: 767.98px) {
    #modal-pakage-details {
        padding: 15px;
    }

    #package-detail-body {
        margin: -15px;
    }

    .travel-stepper-header {
        padding-bottom: 12px; /* Giảm nhẹ khoảng đệm viền dưới */
    }

    .travel-step-item {
        flex-direction: column !important; /* Ép Số lên trên, Chữ xuống hàng dưới */
        align-items: center !important;
        justify-content: flex-start !important;
        font-size: 15px !important;        /* Cân đối lại cỡ kích thước của số */
        gap: 2px !important;               /* Khoảng cách dọc giữa số và chữ bên dưới */
    }

    .travel-step-item .step-label {
        display: block !important;
        font-size: 11px !important;        /* Thu nhỏ chữ trên mobile một chút để thanh thoát */
        font-weight: 600 !important;       /* Giảm bớt độ dày để chữ không bị dính cục */
        line-height: 1.2 !important;
        white-space: normal !important;    /* Cho phép chữ xuống hàng tự nhiên nếu quá dài */
        max-width: 90px;                   /* Giới hạn độ rộng vùng chữ để canh đều 3 cột */
    }

    .travel-step-item.active::after {
        bottom: -14px; /* Điều chỉnh lại vị trí thanh gạch cam cho khít với border-bottom */
    }

    /* Đảm bảo khoảng cách lề dưới của cụm nút mobile không bị dính cục */
    .btn-back-step,  #btn-add-insured-person {
        margin-bottom: 8px !important; 
    }

    #travel-step-3 .btn-back-step {
        display: block !important;    /* Loại bỏ thuộc tính flexbox của cha lên nút */
        width: calc(100% + 40px) !important; /* Mở rộng chiều rộng bù cho lề âm 2 bên */
        margin-left: -3px !important; /* Kéo sát về lề trái */
        margin-right: -3px !important;/* Kéo sát về lề phải */
    }

    .travel-main-pane {
        padding: 20px;
    }

    #payment-info {
        /* Kéo giãn khung iframe tràn lề trái phải */
        margin-left: -20px !important;
        margin-right: -20px !important;

        /* QUAN TRỌNG: Ép độ rộng của iframe lớn hơn 100% của khung cha */
        width: calc(100% + 40px) !important; 
        min-width: calc(100% + 40px) !important;
        max-width: calc(100% + 40px) !important;
        
        box-sizing: border-box !important;
    }
}

@media (max-width: 991px) {
    .travel-main-pane, .travel-side-summary {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .travel-side-summary {
        position: static;
    }
}

/* Select Plan cards */
.text-blue-main { color: #0750a4 !important; }
.bg-blue-light { background-color: #e6f0fa !important; }
.text-orange-main { color: #FF9124 !important; }
.bg-orange-light { background-color: #faf1e6 !important; }

/* Cấu hình mặc định của Card: Viền xám nhạt, thay đổi con trỏ sang pointer */
.choice-card.package-card {
    border: 1px solid #e1e8ed !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.01) !important;
    position: relative;
    overflow: hidden;
    cursor: pointer !important; /* Cả 2 card đều bấm chọn được */
    transition: all 0.25s ease-in-out !important;
}

/* Hiệu ứng khi Card được kích hoạt (Active) */
.choice-card.package-card.active {
    border: 2px solid #0054a6 !important;
    background-color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(0, 84, 166, 0.08) !important;
}
#card-package-custom.active {
    border: 2px solid #FF9124 !important; /* Custom active lên viền cam mượt */
}

/* Box bọc tiêu đề và icon nằm ngang hàng */
.plan-header-title-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 25px;
}

#card-package-basic .plan-header-title-box {
    margin-bottom: 30px;
}

#card-package-basic .customize-benefit-row {
    min-height: 50px;
}

#card-package-basic .customize-benefit-row .text-right {
    color: #003b75;
}

/* Tạo hình tròn bọc Icon */
.icon-circle-wrapper {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-circle-wrapper i {
    font-size: 18px;
}

/* Thẻ ribbon Đề xuất góc trái */
.badge-recommended {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: #0054a6;
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    z-index: 2;
}

/* CSS CHO KHUNG 4 CAM KẾT (TRUST BANNER) */
.trust-commitments-banner {
    display: flex;
    flex-wrap: wrap;
    background: #ffffff;
    border: 1px solid #e1e8ed;
    border-radius: 12px;
    padding: 20px;
    margin-top: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
}

.commitment-item {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    border-right: 1px solid #edf2f7;
}

.commitment-item:last-child {
    border-right: none;
}

.commitment-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e6f0fa;
    color: #0750a4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.commitment-text h6 {
    margin: 0 0 2px 0;
    font-size: 13.5px;
    font-weight: 700;
    color: #2b3d51;
}

.commitment-text p {
    margin: 0;
    font-size: 11.5px;
    color: #718096;
}

/* RESPONSIVE TRÊN MOBILE (< 768px) */
@media (max-width: 767.98px) {
    .trust-commitments-banner {
        padding: 10px;
    }
    .commitment-item {
        flex: 0 0 100%;
        max-width: 100%;
        border-right: none;
        border-bottom: 1px solid #edf2f7;
    }
    .commitment-item:last-child {
        border-bottom: none;
    }
}

.total-premium-inline-box {
    margin-top: 40px;
}

/* Box canh đều ngang hàng giữa icon tròn nhỏ và chữ quyền lợi */
.benefit-label-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Vòng tròn nhỏ bọc icon quyền lợi */
.benefit-icon-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #f0f4f8; /* Màu nền xám xanh nhạt nhẹ nhàng */
    color: #4a5568;            /* Màu icon trầm dịu mắt */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;            /* Không cho vòng tròn méo khi text dài xuống hàng */
}

.benefit-icon-circle i {
    font-size: 11px;           /* Kích thước icon nhỏ vừa vặn */
}

/* Khi card Basic hoạt động: Làm nổi bật nhẹ vòng tròn icon của nó */
.choice-card.package-card.active .benefit-icon-circle {
    background-color: #e6f0fa;
    color: #0750a4;
}

/* Khi card Custom hoạt động: Đổi vòng tròn icon sang tông xanh lá */
#card-package-custom.active .benefit-icon-circle {
    background-color: #faf1e6;
    color: #FF9124;
}

/* Căn chữ cột bên phải thẳng lề trên desktop cho cân xứng */
@media (min-width: 576px) {
    .text-sm-right {
        text-align: right !important;
    }
}