.begin-date-input {
   position: relative;
   width: 100%;
}

.begin-date-input .form-control {
   padding-right: 36px;
}

.begin-date-input__icon {
   position: absolute;
   right: 12px;
   top: 0;
   height: 100%;
   display: flex;
   align-items: center;
   color: #8993A4;
   pointer-events: none;
   line-height: 1;
   z-index: 2;
}
* {
   padding: 0;
   margin: 0;
}

.color-default {
   color: #061839;
}

.title-heading {
   color: #061839;
   font-weight: 500;
   font-style: normal;
   font-size: 16px;
   line-height: 28px;
   letter-spacing: 0.5px;
}

.infor-detail {
   color: #8993A4;
   font-weight: 400;
   font-style: normal;
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0.2px;
}

.categoris.distance.news {
   display: none;
}

.insurance.banners {
   margin-top: 24px;
}

.banner-bh {
   position: relative;
   height: 333px;
   border-radius: 20px;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-image: url(../image/banner/banner_bh.png);
}

.banner-bh.banner-motor {
   background-image: url(../image/content/motor/banner/bannerMotor.png);
}

.banner-bh.banner-cardBody {
   background-image: url(../image/content/oto/than_vo/bh_thanvo.png);
}

.banner-bh.banner-travel-international {
   background-image: url(../image/content/prs/item/item_8.jpg);
}

.banner-wrapper::before {
   content: "";
   padding: 24px 32px;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(271.05deg, rgba(6, 24, 57, 0) 38.01%, #021F58 78.28%);
   z-index: 1;
   border-radius: 20px;
}

.banner-wrapper.motor::before,
.banner-wrapper.cardBody::before {
   background: none;
}

.banner-wrapper.travel-international::before {
   background: linear-gradient(271.05deg, rgba(6, 24, 57, 0) 38.01%, #021F58 78.28%);
}

.item-banners .text-logo {
   position: absolute;
   top: 24px;
   right: 32px;
   font-size: 22px;
   font-weight: 600;
   color: #ffffffad;
   line-height: 24px;

}

.item-banners .data-banner {
   position: absolute;
   top: 64px;
   z-index: 1;
   left: 32px;
   color: #fff;
   margin-bottom: 24px;
}

.data-banner .title-heading {
   font-family: 'Inter', sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: 20px;
   line-height: 28px;
   letter-spacing: 0px;
   text-transform: uppercase;
}

.data-banner .bold-heading {
   font-family: 'Inter', sans-serif;
   margin: 0;
   font-size: 40px;
   font-weight: 800;
   line-height: 50px;
   font-style: normal;
   letter-spacing: -0.4px;
}

.item-banners .buy-now {
   position: absolute;
   font-family: 'Inter', sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: 16px;
   line-height: 24px;
   letter-spacing: 0px;
   text-align: center;
   top: 175px;
   left: 32px;
   z-index: 1;
   height: 44px;
   width: 129px;
   color: #fff;
   padding: 10px 12px;
   border: #2cb5d2;
   border-radius: 10px;
   background: #2cb5d2;
}

.insurance.contents {
   margin-top: 40px;
}

.title.heading {
   margin: 0;
   padding: 10px;
   font-size: 28px;
   font-weight: 700;
   color: #000000;
   margin-bottom: 10px;
   letter-spacing: 0.02em;
}

.item-insurance .img-insurance {
   width: 384px;
   height: 181px;
   display: flex;
   margin-bottom: 16px;
   justify-content: center;
}

.img-insurance.item-cardBody {
   width: 100%;
}

.list-insurance .item-insurance {
   height: auto;
   padding: 32px 24px;
}

.item-insurance .img-insurance .img {
   object-fit: cover;
   border-radius: 10px;
}

.item-insurance .title-insurance {
   color: #061839;
   font-weight: 700;
   font-style: normal;
   font-size: 20px;
   line-height: 28px;
   letter-spacing: 0.01em;
}

.list-insurance .item-insurance {
   border: 1px solid #DEE5EF;
   border-left: none;
}

.list-insurance .item-insurance:first-child {
   border-left: 1px solid #DEE5EF;
   border-top-left-radius: 20px;
   border-bottom-left-radius: 20px;
}

.list-insurance .item-insurance:last-child {
   border-top-right-radius: 20px;
   border-bottom-right-radius: 20px;
}

.item-insurance .description {
   font-size: 14px;
   -webkit-line-clamp: inherit;
}

.item-insurance .img-utilities {
   display: flex;
   width: 80px;
   height: 80px;
   padding: 16px;
   border-radius: 50%;
   margin-bottom: 16px;
   align-items: center;
   justify-content: center;
   background-color: #2CB5D233;
}

.img-utilities .img {
   width: 48px;
   height: 48px;
   object-fit: cover;
}

.description .outstanding {
   color: #2E90FA;
   font-weight: 700;
   font-style: normal;
   font-size: 16px;
   line-height: 24px;
   letter-spacing: 0.01em;
}

.utilities .description {
   min-height: 30px;
}

.list-insurance .utilities:first-child,
.list-insurance .utilities:last-child {
   border-radius: 0;
}

.list-insurance .utilities:first-child,
.list-insurance .utilities {
   border: none;
}

.bg-insurance {
   box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
}

.item-insurance {
   padding: 32px 24px;
}

.item-insurance.item1 {
   background: #FFFFFF;
}

.item-insurance.item2 {
   background: #F7F8F9;
}

.item-insurance.item3 {
   background: #FFFFF2;
}

.item-insurance.item4 {
   background: #FBF3FF;
}

.item-insurance.utilities {
   position: relative;
   background-size: 55% !important;
   background-position: right bottom !important;
   background-repeat: no-repeat !important;
   background-image: url(../image/content/card/bg-request.png) !important;
}

.content-news .highlights .nav-tabs {
   gap: 16px;
   margin-bottom: 24px;
   border-bottom: none;
   align-items: center;
}

.content-news .list-news .distance {
   padding-top: 24px;
}

.distance {
   margin-top: 24px;
}

.tab-news .nav-tabs {
   justify-content: flex-start;
}

.tab-news .tab-content {
   margin: 24px 0 !important;
}

.insurance .highlights {
   padding: 24px;
   border-radius: 20px;
   background-color: #fff;
   border: 1px solid #DEE5EF;
   box-shadow: 0px 4px 20px 0px #0000000D;
}

.highlights .nav-highlight.active {
   position: relative;
   color: #fff;
   font-size: 16px;
   font-weight: 500;
   line-height: 24px;
   padding: 4px 12px;
   text-align: center;
   font-style: normal;
   border-radius: 10px;
   border-color: #2CB5D2;
   letter-spacing: 0.01em;
   background-color: #2CB5D2;
}

.nav-highlight.active::after {
   content: "";
   position: absolute;
   bottom: -6px;
   left: 50%;
   transform: translateX(-50%);
   width: 0;
   height: 0;
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
   border-top: 7px solid #18B3D6;
}

.nav-highlight {
   border: none;
   color: #072A6C;
   background: none;
   font-weight: 500;
   padding: 4px 12px;
}

.item-highlight .nav-tabs .nav-highlight:hover {
   border: none;
}

.nav-highlight:hover {
   color: #18B3D6;
}

.tab-highlights .tab-content {
   margin: 24px 64px;
}

.tab-content .details {
   display: flex;
}

.details .item-left {
   height: 100%;
}

.details .iconic-photo {
   height: 100%;
   border-top-left-radius: 15px;
   border-bottom-left-radius: 15px;
}

.details .item-right {
   padding: 24px 32px 0;
   border-top-right-radius: 25px;
   border-bottom-right-radius: 25px;
   background-color: #F7F8F9;
}

.details .title-heading {
   color: #061839;
   font-weight: 600;
   font-style: normal;
   font-size: 24px;
   line-height: 32px;
   margin-bottom: 24px;
   letter-spacing: 0.02em;
}

.see-details {
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
   font-style: normal;
   text-decoration: underline;
}

.details .handle-hotline {
   color: #061839;
   margin-top: 24px;
}

.handle-hotline .btn-getquote,
.handle-hotline .btn-getquote:hover {
   color: #fff;
   text-decoration: none;
}

.details .handle-hotline {
   width: auto;
   justify-content: left;
   background: none;
}

.handle-hotline .item-hotline {
   display: flex;
   align-items: center;
   border-top-left-radius: 30px;
   border-bottom-left-radius: 30px;
   background: rgba(3, 133, 255, 0.1);
}

.handle-hotline .hotline-number {
   padding-right: 4px;
   display: contents;
}

.insurance-group {
   display: flex;
   border-radius: 20px;
   background-color: #fff;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.size-contents.header-detail {
   padding-top: 24px;
   padding-bottom: 24px;
}

/* Mua bảo hiểm */
.buy-insurances {
   padding-top: 32px;
   padding-bottom: 5px;
   background: #F2F2F5;
}

.header-step {
   display: flex;
   /* padding-top: 24px;
   padding-bottom: 24px; */
}

.buy-insurances .link-home {
   text-decoration: none;
}

.header-step .title-header {
   margin: 0;
   font-weight: 600;
   color: #061839;
   text-transform: capitalize;
}

.divider {
   color: #ccc;
   font-weight: 400;
}

a {
   text-decoration: none;
}

.news-left .title,
.news-right .title {
   color: #061839;
   transition: all .2s ease;
}

.news-left .title:hover,
.news-right .title:hover {
   color: #2cb5d2;
   text-shadow: 0px 0px 2px rgba(44, 181, 210, 0.5);
}

.news-right .item-featured.mt-3:first-child {
   margin-top: 0 !important;
}

.header-step .link-home {
   color: #8993A4;
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
   text-decoration: none;
   transition: all .2s ease-in-out;
}

.header-step .link-home:hover {
   color: #061839;
}

.detail-news {
    padding-top: 24px;
    padding-bottom: 40px;
    background: #F2F2F5;
}

.detail-news .bg-detail {
    background-color: #FFFFFF;
}

.list-news .items {
   margin-top: 24px;
}

.steps {
   gap: 2px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.steps .item-step {
   margin: 0;
   width: 30px;
   height: 30px;
   display: flex;
   font-size: 15px;
   font-weight: 600;
   color: #A6AEBB;
   border-radius: 50%;
   align-items: center;
   justify-content: center;
   border: 2px solid #A6AEBB;
}

.color-white {
   color: #fff;
}

.steps .item-step.active {
   color: #2cb5d2;
   border: 2px solid #2cb5d2;
}

.steps .boder-step.active {
   background-color: #2cb5d2;
}

.steps .item-step.complete {
   position: relative;
   background-color: #2cb5d2;
   border: 2px solid #2cb5d2;
}

.item-step.complete::after {
   content: "";
   position: absolute;
   top: 3px;
   left: 8px;
   width: 10px;
   height: 15px;
   border: solid white;
   border-width: 0 3px 3px 0;
   transform: rotate(45deg);
}

.steps .item-step:hover {
   color: #2cb5d2;
   border: 2px solid #2cb5d2;
}


.boder-step {
   height: 2px;
   width: 150px;
   background-color: #A6AEBB;
}

.buy-insurances .detail-content {
   padding: 16px;
   border-radius: 10px;
   background: #fff;
   border: 1px solid #DEE5EF;
}

.detail-content .title {
   color: #061839;
   font-weight: 500;
   font-size: 18px;
   line-height: 28px;
}

.vehicle-registration {
   display: flex;
   width: 330px;
   height: 84px;
   padding: 16px;
   gap: 8px;
   border-radius: 10px;
   background: #2CB5D20D;
   border: 1px solid #2CB5D2;
   justify-content: space-between;
   cursor: pointer;
}

.scan-online .card-photo {
   width: 48px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.title-card .title {
   color: #061839;
   font-weight: 500;
   font-size: 16px;
   line-height: 25px;
}

.title-card .note {
   color: #8993A4;
   font-weight: 400;
   font-style: normal;
   font-size: 14px;
   line-height: 22px;
}

.distance-top {
   margin-top: 16px;
}

.dividing-line {
   height: 1px;
   background-color: #DEE5EF;
}

.custom-radio-group {
   gap: 48px;
   display: flex;
}

.banner-wrapper .data-banner .text-shadow {
   text-shadow: 0px 0px 10px rgba(44, 181, 210, 0.5);
}

.custom-radio {
   display: inline-flex;
   align-items: center;
   cursor: pointer;
   position: relative;
   font-size: 16px;
}

.custom-radio input[type="radio"] {
   appearance: none;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   margin-right: 10px;
   position: relative;
   transition: all 0.3s ease;
   border: 2px solid #9ea0a3;
}

.custom-radio input[type="radio"]:checked {
   border-width: 2px;
   background-color: #fff;
   border-radius: 50%;
   border: 2px solid #2cb5d2;
   transition: background-color 0.3s;
}

.custom-radio input[type="radio"]:checked::after {
   content: "";
   top: 50%;
   left: 50%;
   width: 8px;
   height: 8px;
   position: absolute;
   border-radius: 50%;
   background-color: #2CB5D2;
   transform: translate(-50%, -50%);
}

.focus-none:focus {
   box-shadow: none;
   border-color: #2cb5d2;
}

.h-input {
   line-height: 40px;
}

.h-input .select2-container,
.select-fe + .select2-container {
   display: block;
}

input.h-input {
   font-size: 14px;
}

.detail-vehicle,
.radio-label {
   font-size: 14px;
}

.border-radius {
   font-size: 14px;
   line-height: 18px;
   padding: 10px 16px;
   border-radius: 8px;
   border: 1px solid #DEE5EF;
}

.boder-item {
   border-radius: 6px;
   border: 1px solid #DEE5EF;
}


.detail-vehicle>.col-md-3 {
   padding-left: 8px;
   padding-right: 8px;
}

.detail-vehicle .title-heading {
   margin: 0;
}

.form-switch {
   position: relative;
   display: inline-block;
   width: 60px;
   height: 28px;
}

.form-switch input {
   opacity: 0;
   width: 0;
   height: 0;
}

.slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #ccc;
   transition: 0.4s;
   border-radius: 34px;
   font-size: 12px;
   font-weight: 600;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
}

/* Viên tròn gạt */
.slider::before {
   content: "";
   position: absolute;
   height: 22px;
   width: 22px;
   left: 3px;
   bottom: 3px;
   background-color: white;
   transition: 0.4s;
   border-radius: 50%;
   z-index: 2;
}

.form-switch input:checked+.slider {
   background-color: #2CB5D2;
}

.form-switch input:checked+.slider::before {
   transform: translateX(32px);
}

.item-compulsory {
   display: flex;
   height: 48px;
   align-items: center;
}

.text-level {
   display: flex;
   margin-top: 8px;
   color: #8993A4;
   justify-content: space-between;
}

.img-warning {
   width: 24px;
   height: 24px;
}

.item-compulsory .item-left {
   display: flex;
   align-items: center;
}

/* Đồng bộ style checkbox */
.custom-checkbox,
.travel-intl-step2 .travel-intl-checkline input[type="checkbox"],
.travel-intl-payment .travel-intl-checkline input[type="checkbox"] {
   appearance: none;
   -webkit-appearance: none;
   width: 20px;
   height: 20px;
   border: 1px solid #2CB5D2;
   border-radius: 4px;
   cursor: pointer;
   position: relative;
   transition: all 0.2s ease-in-out;
   flex-shrink: 0;
}

/* Khi được check */
.custom-checkbox:checked,
.travel-intl-step2 .travel-intl-checkline input[type="checkbox"]:checked,
.travel-intl-payment .travel-intl-checkline input[type="checkbox"]:checked {
   background-color: #2cb5d2;
   border-color: #2cb5d2;
}

/* Dấu tick */
.custom-checkbox:checked::after,
.travel-intl-step2 .travel-intl-checkline input[type="checkbox"]:checked::after,
.travel-intl-payment .travel-intl-checkline input[type="checkbox"]:checked::after {
   content: "";
   position: absolute;
   top: 1px;
   left: 6px;
   width: 7px;
   height: 12px;
   border: solid white;
   border-width: 0 3px 3px 0;
   transform: rotate(45deg);
}

/* Checkbox tròn (dùng cho icon tổng phí) */
.pjico-round-checkbox {
   appearance: none;
   -webkit-appearance: none;
   width: 22px;
   height: 22px;
   border: 4px solid #35b7d6;
   border-radius: 50%;
   background: #d9f5fc;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin: 0;
   pointer-events: none;
   flex-shrink: 0;
}

.pjico-round-checkbox:checked::after {
   content: "";
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #35b7d6;
}

.content-footer .handle-footer {
   padding: 12px 16px;
}

.handle-footer.promotional-code {
   display: flex;
   justify-content: space-between;
   border-bottom: 1px solid #ddd;
}

.promotional-code .img-code {
   width: 24px;
   height: 24px;
}

.content-footer .link-promotional {
   display: flex;
   align-items: center;
   text-decoration: none;
}

.link-promotional .text-code {
   margin: 0;
   font-size: 16px;
   font-weight: 500;
   line-height: 1.5;
   letter-spacing: 0.5px;
   vertical-align: middle;
   color: #2cb5d2;
}

.handle-footer .handle-click {
   display: flex;
   margin-top: 10px;
   justify-content: space-between;
}


.handle-footer.handle {
   background: #fff;
   padding: 12px;
}

.handle-footer.handle button,
.handle-steps button {
   border-radius: 10px;
   font-size: 16px;
   color: #2cb5d2;
   background: #fff;
   border: 1px solid;
   font-weight: 500;
   display: flex;
   align-items: center;
   justify-content: center;
}

.handle-steps .handle-back,
.handle .handle-back {
   height: 44px;
   width: 115px;

}

.handle-steps .handle-continue,
.handle .handle-continue {
   height: 44px;
   width: 200px;
}

.handle-footer.handle button:hover,
.handle-footer.handle button:hover .arrow-icon,
.handle-steps button:hover,
.handle-steps button:hover .arrow-icon {
   color: #fff;
   background: #2cb5d2;
}

.distance.content-footer {
   margin-bottom: 24px;
   background: #fff;
   border-radius: 5px;
   border: 1px solid #DEE5EF;
}

.distance.handle-footer {
   margin-bottom: 24px;
}

.arrow-icon {
   font-size: 24px;
   line-height: 1;
}

.arrow-icon.arrow-back {
   color: #2cb5d3;
}

.arrow-icon.arrow-continue {
   color: #6B788E;
}

.promotional-code a {
   text-decoration: none;
}

.circle-arrow-up {
   display: inline-block;
   width: 24px;
   height: 24px;
   border: 2px solid #061839;
   border-radius: 50%;
   position: relative;
   box-sizing: border-box;
}

/* Thân mũi tên */
.circle-arrow-up::before {
   content: "";
   position: absolute;
   left: 50%;
   top: 35%;
   transform: translateX(-50%);
   width: 2px;
   height: 8px;
   background-color: #061839;
}

/* Đầu mũi tên */
.circle-arrow-up::after {
   content: "";
   position: absolute;
   left: 50%;
   top: 25%;
   transform: translateX(-50%) rotate(45deg);
   width: 8px;
   height: 8px;
   border-top: 2px solid #061839;
   border-left: 2px solid #061839;
}

.total-cost .text-left {
   color: #061839;
   font-weight: 500;
}

.handle-footer .total-cost {
   display: flex;
   padding: 10px 0;
   justify-content: space-between;
}

.total-cost .text-money {
   color: #061839;
   font-weight: 700;
   font-size: 20px;
   line-height: 32px;
   letter-spacing: 0px;
   text-align: right;
   vertical-align: middle;
}

/* Modal */
.modal-promotional {
   padding: 16px;
   border-radius: 15px;
}

.modal-promotional .modal-header {
   border: none;
   padding: 10px 0;
   padding-bottom: 16px;
}

.modal-promotional .modal-footer {
   border: none;
}

.modal-promotional .modal-title {
   font-size: 18px;
   font-weight: 600;
   line-height: 40px;
   color: #061839;
   line-height: 24px;
}

.modal-promotional .btn-close {
   width: 8px;
   height: 8px;
   padding: 10px;
   margin: inherit;
}

.modal-promotional .input-promotional {
   margin-top: 8px;
   display: flex;
   padding: 12px 16px;
   border-radius: 10px;
   justify-content: space-between;
   border: 1px solid rgba(0, 0, 0, .2);
}

.modal-promotional .input-promotional:first-child {
   margin-top: 0;
}

.item-input .percent-reduction {
   color: #061839;
   font-size: 16px;
   font-weight: 600;
}

.expiry {
   font-size: 14px;
   font-weight: 500;
   color: #8993A4;
}

.item-input .date {
   font-size: 15px;
   font-weight: 500;
   color: #061839;
}

.modal-discount {
   display: flex;
   justify-content: center;
}

.modal-discount .modal-promotional {
   width: 598px;
}

.input-promotional.disable {
   opacity: 0.5;
   pointer-events: none;
}

.btn-habdle {
   padding: 12px 0;
   justify-content: center;
}

.btn-habdle button {
   height: 44px;
   width: 100%;
   border-radius: 10px;
   color: #2cb5d3;
   background: #fff;
   border: 1px solid #2cb5d3;
   transition: all .2s ease-in-out;
}

.btn-habdle button:hover {
   color: #fff;
   background: #2cb5d3;
}

.reduce-money {
   margin: 0;
   font-size: 14px;
   color: #F04438;
   font-weight: 500;
}

.voucher-discount .item-money {
   color: #8993A4;
   display: flex;
   justify-content: space-between;
   font-weight: 400;
   font-style: normal;
   font-size: 15px;
   line-height: 24px;
   letter-spacing: 0.5px;
   vertical-align: middle;
}

.item-money .money-discount {
   color: #F04438;
}

.voucher-discount {
   margin-left: 30px;
}

.handle-upload {
   height: 44px;
   width: 150px;
   border-radius: 10px;
   color: #2cb5d3;
   background: #fff;
   border: 1px solid #2cb5d3;
   transition: all .2s ease-in-out;
}

.handle-steps {
   padding: 0 4px;
}


.categoris.bg-footer,
.footer.bg-footer {
   background-color: #fff;
}

.modal-cccd .bg-cccd {
   width: 100%;
   height: 230px;
   border-radius: 5px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.bg-cccd .img-cccd {
   cursor: pointer;
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 5px;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}

.handle-upload:hover {
   color: #fff;
   background-color: #2cb5d3;
}


#vehicle_registration .preview-img {
   height: 190px;
}

#vehicle_registration .preview-img img {
   object-fit: cover;
}

.max-width-700 {
   max-width: 700px;
}

.item .infor-detail {
   display: flex;
   justify-content: space-between;
}

.bg-none {
   background: none;
}

.handle-edit {
   color: #2cb5d3;
}

.item-buyer {
   padding: 16px;
}

.insurance-infor {
   border-radius: 6px;
   background: #EAF4FF;
   border: 1px solid #2CB5D2;
}

.total-VAT {
   display: flex;
   justify-content: space-between;
   font-weight: 600;
   font-style: normal;
   font-size: 14px;
   line-height: 30px;
   letter-spacing: 0.2px;
}

.divider-dotted {
   border-top: 1px dotted #2CB5D2;
}

.button-handle {
   display: flex;
   justify-content: space-around;
}

.button-handle {
   margin-top: 18%;
}

.m-footer {
   margin-bottom: 40px;
}

.categoris.bg-footer.m-footer-step {
   margin-top: 0;
}

.content-news .title-heading {
   font-weight: 700;
   font-style: normal;
   font-size: 30px;
   line-height: 32px;
   letter-spacing: -0.02em;
}

/* .featured-news .img-featured {
   height: 306px;
} */

.img-featured .img {
   object-fit: cover;
   border-radius: 16px;
}

.featured-news .news-left .title {
   font-weight: 600;
   font-style: normal;
   font-size: 20px;
   line-height: 28px;
   letter-spacing: 0em;
   transition: all .2s ease;
}

.featured-news .text-date {
   font-weight: 500;
   font-style: normal;
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0em;
   margin-bottom: 18px;
}

.text-date {
   color: #8993A4;
}

.item-news .body-hotdeal .title {
   min-height: 60px;
   font-size: 16px;
   line-height: 20px;
   color: #061839;
   text-align: justify;
   text-decoration: none;
   -webkit-line-clamp: 3;
   transition: all .2s ease-in-out;
}

.item-news .body-hotdeal .title:hover {
   color: #2CB5D2;
   text-shadow: 0px 0px 2px rgba(44, 181, 210, 0.5);
}

.featured-news .item-featured {
   display: flex;
   justify-content: space-between;
   padding-bottom: 16px;
   border-bottom: 1px solid #DEE5EF;
}

.highlights.mb-tabs {
   border-bottom: 1px solid #DEE5EF;
}

.row.featured-news>.col-md-6:first-child {
   border-right: 1px solid #DEE5EF;
}

.news-right .item-featured:last-child {
   border-bottom: none;
}

.item-featured .item-left {
   width: 393px;
}

.item-featured .item-right {
   width: 207px;
}

.list-news .item-news {
   background: #fff;
   border-radius: 10px;
   box-shadow: 0px 4px 8px 0px #0112221A;
}

.item-news .img-featured {
   height: 200px;
}

.item-news .img-featured img {
   border-top-right-radius: 10px;
   border-top-left-radius: 10px;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
   aspect-ratio: 3 / 2;
}

.title-heading.title-detail-heading {
   margin-top: 24px;
   font-size: 25px;
   color: #2E3A5B;
}

.highlights .nav.nav-tabs {
   border: none;
   justify-content: center;
}

.distance.news .nav.nav-tabs {
   justify-content: flex-start;
}

.item-featured .item-right img {
   width: 100%;
   object-fit: cover;
   border-radius: 8px;
   aspect-ratio: 3 / 2;
}

.item-featured .title {
   font-weight: 500;
   font-style: normal;
   font-size: 16px;
   line-height: 24px;
   letter-spacing: 0em;
}

.content-news .see-more {
   color: #fff;
   background: #2CB5D2;
   border: 1px solid #2CB5D2;
   padding: 10px 12px;
}

.content-detail .title-heading {
    font-weight: 700;
    color: #2E3A5B;
    font-size: 30px;
    margin-bottom: 8px;
    line-height: 40px;
    letter-spacing: -0.02em;
}

.detail-banner {
    margin-top: 24px;
}

.detail-banner-img {
   width: 100%;
   /* max-width: 1152px;
   height: 200px; */
   object-fit: cover;
    /* object-position: center -30px; */
}

.detail-share {
    display: flex;
    align-items: center;
    height: 56px;
    color: #061839;
}

.item-interest {
    padding: 0 24px 24px;
}

.item-interest .content-news {
    padding: 0;
}

.content-detail.distance {
    margin-top: 28px;
    text-align: justify;
}

.article-tags {
    margin: 8px 0;
}

.bg-detail .size-contents {
   width: 1152px;
}

.content-detail .notes {
   color: #061839;
   font-weight: 400;
   font-style: italic;
   font-size: 16px;
   line-height: 24px;
   letter-spacing: 0;
   margin-top: 8px;
}

.content-detail .description {
   font-weight: 400;
   font-style: normal;
   font-size: 16px;
   line-height: 24px;
   letter-spacing: 0;
   color: #061839;
}

.content-detail-news {
   text-align: justify;
}

.nav-tabs.tab-news {
   gap: 0;
}

/* css trang bồi thường */

.compensations .contents {
   border-radius: 20px;
}

.compensations {
   background: #F2F2F5;
   padding-top: 24px;
   padding-bottom: 40px;
}

.compensations .title-heading {
   color: #061839;
   font-weight: 700;
   font-size: 32px;
   line-height: 40px;
   text-align: center;
   font-style: normal;
   letter-spacing: -0.02em;
}

.tab-compensations .highlights {
   padding: 0;
   border: none;
   background: none;
   box-shadow: none;
}

.tab-compensations .nav-tabs {
   margin-bottom: 30px;
}

.tab-compensations .tab-content {
   border-radius: 20px;
   background-color: #F7F8F9;
}

.instructional-content .item-left {
   display: flex;
   align-items: center;
   justify-content: end;
}

.instructional-content .item-right {
   border-left: 1px solid #DEE5EF;
}

.instructional-content .image-app {
   width: 206px;
   height: 419px;
}

.instructional-content .instruction-infor {
   width: 684px;
}

.instructional-content {
   align-items: center;
   --bs-gutter-x: 48px;
   padding-top: 56px;
   padding-bottom: 56px;
}

.instructional-content .image-app {
   border-radius: 24px;
}

.compensations .item-right .item {
   width: 660px;
   display: flex;
}

.compensations .item.active {
   padding: 16px;
   border-radius: 16px;
   background-color: #FFFFFF !important;
   border: 1px solid #DEE5EF;
}

.compensations .item.outer-shell {
   padding: 16px;
   cursor: pointer;
   border-radius: 16px;
   border: 1px solid #DEE5EF;
   background-color: #F7F8F9;
}


.instructional-content .orders.left {
   width: 41px;
}

.orders.left .order {
   display: flex;
   width: 29px;
   color: #ffffff;
   font-weight: 700;
   letter-spacing: 0;
   font-size: 24px;
   letter-spacing: 0;
   text-align: center;
   justify-content: center;
   align-items: center;
   height: 29px;
   border-radius: 50%;
   background-color: #2CB5D2;
}

.item.active .orders.left .order {
   background-color: #2CB5D2 !important;
}

.item.active .step-right .title {
   color: #061839 !important;
}

.item.outer-shell .orders.left .order {
   background-color: #A6AEBB;
}

.item.outer-shell .step-right .title {
   color: #6B788E;
}

.step-right .title {
   color: #061839;
   font-weight: 500;
   font-size: 16px;
   line-height: 24px;
   letter-spacing: 0.2px;
}

.item-right .step-right {
   width: 571px;
}

.nav-link.step-outer-shell.active .info-step .health-compensation {
   font-weight: 700;
   color: #061839;
}

.info-step .health-compensation {
   color: #8993A4;
   font-weight: 700;
}

.step-right .step-active,
.step-right .step-outer-shell {
   display: flex;
   cursor: pointer;
   padding: 8px 0;
}

.step-active .order-step {
   width: 40px;
   height: 40px;
   display: flex;
   color: #2CB5D2;
   justify-content: center;
}

.step-outer-shell .order-step {
   width: 40px;
   height: 40px;
   display: flex;
   color: #C2C7D0;
   justify-content: center;
}

.nav-link.step-outer-shell .order-step .arrow {
   border-color: #C2C7D0;
}

.nav-link.step-outer-shell.active .order-step .arrow {
   border-color: #2CB5D2;
}

.nav-link.step-outer-shell.active .order-step {
   color: #2CB5D2;
}

.nav-link.step-outer-shell.active .order-step .order {
   border: 2px solid #2CB5D2;
}

.step-outer-shell.active .buoc .handle-step {
   background-color: #2CB5D2;
}

.order-step .order {
   width: 20px;
   height: 20px;
   display: flex;
   font-size: 14px;
   align-items: center;
   border-radius: 50%;
   justify-content: center;
   border: 2px solid #2CB5D2;
}

.step-outer-shell .order-step .order {
   width: 20px;
   height: 20px;
   display: flex;
   padding-bottom: 2px;
   align-items: center;
   border-radius: 50%;
   justify-content: center;
   border: 2px solid #C2C7D0;
}

.order-step .arrow {
   width: 14px;
   margin-top: 10px;
   margin-left: 3px;
   height: 0;
   border-width: 1px;
   border-style: solid;
   border-color: #2CB5D2;
   transform: rotate(-90deg);
   opacity: 1;
}

.step-active .buoc,
.step-outer-shell .buoc {
   width: 90px;
   display: flex;
   justify-content: center;
}

.step-active .info-step,
.step-outer-shell .info-step {
   width: 455px;
}

.buoc .handle-step {
   width: 60px;
   height: 24px;
   padding: 4px 8px;
   text-align: center;
   color: #fff;
   border-radius: 16px;
   font-size: 12px;
   background-color: #2CB5D2;
   display: flex;
   align-items: center;
   justify-content: center;
}

.step-outer-shell .buoc .handle-step {
   background-color: #C2C7D0;
}

.info-step {
   color: #061839;
   font-weight: 400;
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0.1px;
   vertical-align: middle;
}

.step-outer-shell.active .info-step {
   color: #061839;
}

.step-outer-shell .info-step {
   color: #8993A4;
   font-weight: 400;
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0.1px;
   vertical-align: middle;
}

.step-right .steps-handle {
   display: none;
}

.nav-link.item.active .steps-handle {
   display: block;
}

.item-right .title-contact {
   font-weight: 600;
   font-style: normal;
   font-size: 16px;
   line-height: 24px;
   letter-spacing: 0px;
}

.title-contact .hotline {
   color: #0385FF;
}

.item-right .infor-hotline {
   display: flex;

   font-style: normal;
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0px;
   vertical-align: middle;
}

.item-right .infor-hotline .choose-branch {
   font-weight: 700;
   color: #0385FF;
}

.font-14 {
   font-size: 14px;
}

.benefits.detail-vehicle {
   margin-top: 16px;
   border-radius: 8px;
   border: 1px solid #DEE5EF;
}

.benefits .item-benefit {
   height: auto;
   width: 100%;
   display: flex;
   padding: 8px 16px;
   align-items: center;
   border-bottom: 1px solid #DEE5EF;
}

.benefits .item-benefit:last-child {
   border-bottom: none;
}

.item-benefit .input-checkbox {
   padding: 0 16px;
   display: flex;
   height: 100%;
   align-items: center;
   justify-content: center;
}

.item-benefit .custom-checkbox {
   width: 24px;
   height: 24px;
}

.item-benefit .custom-checkbox:checked::after {
   content: "";
   position: absolute;
   top: 1px;
   left: 7px;
   width: 8px;
   height: 14px;
   border: solid white;
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
}

.item-benefit .header-fee {
   width: 100%;
   display: flex;
   padding-left: 16px;
   justify-content: space-between;
}

.item-benefit.title-header {
   color: #061839;
   font-weight: 600;
   background: #F7F8F9;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
}

/* --- Bảo hiểm du lịch quốc tế – bước 1 (mock design) --- */
.travel-intl-step1 .travel-intl-panel {
   padding: 24px 24px 20px;
   border-radius: 12px;
   border: 1px solid #DEE5EF;
   background: #fff;
   box-shadow: 0 2px 16px rgba(6, 24, 57, 0.06);
}

.travel-intl-step1 .travel-intl-split-row {
   margin-top: 8px;
}

/* .travel-intl-step1 .travel-intl-panel--plans .vehicle-infor > .title,
.travel-intl-step1 .travel-intl-panel--benefits .vehicle-infor > .title {
   border-bottom: 1px solid #eef1f5;
} */

.travel-intl-step1 .header-step .title-header {
   font-size: 18px;
   font-weight: 600;
   text-transform: none;
   color: #061839;
}

.travel-intl-step1 .distance.steps {
   margin: 18px 0 22px;
}

.travel-intl-step1 .vehicle-infor > .title {
   font-size: 18px;
   font-weight: 600;
   color: #061839;
   padding-bottom: 8px;
   margin-bottom: 4px;
   /* border-bottom: 1px solid #eef1f5; */
   display: flex;
   justify-content: space-between;
}

.travel-intl-step1 .detail-vehicle label,
.travel-intl-step1 .travel-intl-field-label {
   color: #061839;
   font-weight: 500;
   font-size: 14px;
   line-height: 20px;
}

.travel-intl-step1 .travel-intl-einvoice span {
   color: #061839;
   font-size: 14px;
   font-weight: 400;
}

/* Thẻ chọn chương trình */
.travel-intl-step1 .program-cards {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 12px;
}

/* Trong cột nửa màn hình: bố trí 3 + 2 cho 5 gói */
.travel-intl-step1 .travel-intl-panel--plans .program-cards {
   grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1199px) {
   .travel-intl-step1 .program-cards {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }
}

@media (max-width: 767px) {
   .travel-intl-step1 .program-cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

.travel-intl-step1 .program-card {
   min-height: 92px;
   border: 1px solid #f7f8f9;
   border-radius: 12px;
   padding: 16px 12px;
   cursor: pointer;
   background: #f7f8f9;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
   gap: 10px;
   text-align: left;
   transition: border-color .2s, box-shadow .2s, background .25s, color .2s;
   box-sizing: border-box;
}

.travel-intl-step1 .program-card:hover {
   border-color: #2cb5d2;
   box-shadow: 0 4px 14px rgba(44, 181, 210, .18);
}

.travel-intl-step1 .program-card.is-active {
   border-color: transparent;
   color: #fff;
   background: linear-gradient(160deg, #2cb5d2 0%, #0385ff 100%);
   box-shadow: 0 10px 28px rgba(3, 133, 255, .35);
}

.travel-intl-step1 .program-card .program-medal {
   width: 40px;
   height: 40px;
   object-fit: contain;
   flex-shrink: 0;
   pointer-events: none;
   user-select: none;
}

.travel-intl-step1 .program-card .program-card-body {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   flex: 1;
   min-width: 0;
   text-align: left;
}

.travel-intl-step1 .program-card.is-active .program-medal {
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.travel-intl-step1 .program-card .program-name {
   font-weight: 600;
   font-size: 15px;
   line-height: 22px;
}

.travel-intl-step1 .program-card .program-price {
   font-size: 14px;
   margin-top: 2px;
   line-height: 20px;
   opacity: .95;
}

.travel-intl-step1 .program-card.is-active .program-price {
   opacity: 1;
}

.travel-intl-step1 .travel-intl-panel--plans .program-card {
   min-height: 72px;
   padding: 10px 12px;
}

/* Quyền lợi */
.travel-intl-step1 .benefit-rows .row-item {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 12px;
   font-size: 14px;
   color: #6B788E;
   margin-bottom: 8px;
   line-height: 20px;
   letter-spacing: -0.42px;
   font-weight: 400;
}

.travel-intl-step1 .benefit-rows .row-item > span{
   font-weight: 600;
   color: #061839;
   white-space: nowrap;
}

.travel-intl-step1 .benefit-rows .row-item--child > span:first-child {
   font-weight: 500;
   color: #6B788E;
   white-space: normal;
}

.travel-intl-step1 .benefit-rows .row-item--child > span:last-child {
   font-weight: 500;
   font-size: 13px;
   color: #425466;
   white-space: nowrap;
}

.travel-intl-step1 .benefit-rows .row-item--child {
   padding-left: 20px;
   margin-bottom: 6px;
}

.travel-intl-step1 .benefit-rows .row-item--child span:first-child::before {
   content: '– ';
   color: #9aa5b5;
}

.travel-intl-step1 .benefit-rows .row-item:last-child {
   border-bottom: none;
}

.travel-intl-step1 .travel-intl-benefit-link {
   color: #2cb5d2;
   font-weight: 500;
   font-size: 14px;
   text-decoration: underline;
}

.travel-intl-step1 .travel-intl-benefit-link:hover,
.travel-intl-step1 .travel-intl-benefit-link:focus,
.travel-intl-step1 .travel-intl-benefit-link:active {
   background: none;
   color: #2E90FA;
}
/* Khối mã KM + phí */
.travel-intl-step1 .travel-intl-step1-footer.distance.content-footer {
   background: transparent;
   border: none;
   margin: 16px 0 0;
   padding: 0;
   box-shadow: none;
}

.travel-intl-step1 .travel-intl-fee-footer.handle-footer.handle {
   border-radius: 12px;
   border: 1px solid #DEE5EF;
   background: #fff;
   padding: 0;
   box-shadow: none;
}

.travel-intl-step1 .travel-intl-promo-field {
   display: flex;
   align-items: center;
   gap: 4px;
   margin: 0 !important;
   padding: 10px 14px;
   border-bottom: 1px solid #E9EDF3;
}

.travel-intl-step1 .travel-intl-promo-icon {
   width: 18px;
   height: 18px;
   object-fit: contain;
   flex-shrink: 0;
}

.travel-intl-step1 .travel-intl-promo-field .travel-intl-field-label {
   margin: 0 !important;
   white-space: nowrap;
   color: #26A9C7;
   font-weight: 600;
   font-size: 15px;
}

.travel-intl-step1 .travel-intl-promo-arrow {
   margin-left: auto;
   color: #9CA3AF;
   font-size: 18px;
   line-height: 1;
}

.travel-intl-step1 .travel-intl-input-promo {
   max-width: none;
   border: none;
   box-shadow: none;
   padding: 0;
   height: auto;
   font-size: 14px;
   color: #6B7280;
}

.travel-intl-step1 .travel-intl-input-promo:focus {
   border: none;
   box-shadow: none;
}

.travel-intl-step1 .voucher-discount {
   margin: 0 0 6px;
}

.travel-intl-step1 .travel-intl-fee-summary {
   width: 520px;
   margin-left: auto;
   padding: 10px 14px 0;
}

.travel-intl-step1 .travel-intl-fee-summary .voucher-discount .item-money {
   padding: 2px 0;
   color: #6B7280;
   font-size: 14px;
}

.travel-intl-step1 .travel-intl-fee-summary .voucher-discount .item-money span {
   font-size: 14px;
   line-height: 1.35;
}

.travel-intl-step1 .handle-footer .total-cost {
   padding-top: 4px;
   margin-top: 0;
   border-top: none;
}

.travel-intl-step1 .handle-footer .total-cost > div:first-child {
   color: #111827;
   font-weight: 600;
}

.travel-intl-step1 .handle-footer .total-cost .text-money {
   font-weight: 700;
   font-size: 20px;
   color: #111827;
}

.travel-intl-step1 .handle-click {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 20px;
   padding-top: 16px;
   border-top: 1px solid #DEE5EF;
}

.travel-intl-step1 .handle-footer .handle-click {
   margin-top: 8px;
   padding: 12px 14px;
   border-top: 1px solid #DEE5EF;
}

.travel-intl-step1 .handle-footer .handle-click .handle-back,
.travel-intl-step1 .handle-footer .handle-click .handle-continue {
   margin: 0;
}

/* Đồng bộ giao diện khối phí step2 giống step1 */
.travel-intl-step2 .travel-intl-panel {
   padding: 24px 24px 20px;
   border-radius: 12px;
   border: 1px solid #DEE5EF;
   background: #fff;
   box-shadow: 0 2px 16px rgba(6, 24, 57, 0.06);
}

.travel-intl-step2 .travel-intl-step1-footer.distance.content-footer {
   background: transparent;
   border: none;
   margin: 16px 0 0;
   padding: 0;
   box-shadow: none;
}

.travel-intl-step2 .travel-intl-fee-footer.handle-footer.handle {
   border-radius: 12px;
   border: 1px solid #DEE5EF;
   background: #fff;
   padding: 0;
   box-shadow: none;
}

.travel-intl-step2 .travel-intl-promo-field {
   display: flex;
   align-items: center;
   gap: 4px;
   margin: 0 !important;
   padding: 10px 14px;
   border-bottom: 1px solid #E9EDF3;
}

.travel-intl-step2 .travel-intl-promo-icon {
   width: 18px;
   height: 18px;
   object-fit: contain;
   flex-shrink: 0;
}

.travel-intl-step2 .travel-intl-promo-field .travel-intl-field-label {
   margin: 0 !important;
   white-space: nowrap;
   color: #26A9C7;
   font-weight: 600;
   font-size: 15px;
}

.travel-intl-step2 .travel-intl-promo-arrow {
   margin-left: auto;
   color: #9CA3AF;
   font-size: 18px;
   line-height: 1;
}

.travel-intl-step2 .voucher-discount {
   margin: 0 0 6px;
}

.travel-intl-step2 .travel-intl-fee-summary {
   width: 520px;
   margin-left: auto;
   padding: 10px 14px 0;
}

.travel-intl-step2 .travel-intl-fee-summary .voucher-discount .item-money {
   padding: 2px 0;
   color: #6B7280;
   font-size: 14px;
}

.travel-intl-step2 .travel-intl-fee-summary .voucher-discount .item-money span {
   font-size: 14px;
   line-height: 1.35;
}

.travel-intl-step2 .handle-footer .total-cost {
   padding-top: 4px;
   margin-top: 0;
   border-top: none;
}

.travel-intl-step2 .handle-footer .total-cost > div:first-child {
   color: #111827;
   font-weight: 600;
}

.travel-intl-step2 .handle-footer .total-cost .text-money {
   font-weight: 700;
   font-size: 20px;
   color: #111827;
}

.travel-intl-step2 .handle-click {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 20px;
   padding-top: 16px;
   border-top: 1px solid #DEE5EF;
}

.travel-intl-step2 .handle-footer .handle-click {
   margin-top: 8px;
   padding: 12px 14px;
   border-top: 1px solid #DEE5EF;
}

.travel-intl-step2 .handle-footer .handle-click .handle-back,
.travel-intl-step2 .handle-footer .handle-click .handle-continue {
   margin: 0;
}

@media (max-width: 991px) {
   .travel-intl-step1 .travel-intl-promo-field {
      display: block;
      padding: 12px;
   }

   .travel-intl-step1 .travel-intl-promo-field .travel-intl-field-label {
      margin-bottom: 8px !important;
   }

   .travel-intl-step1 .travel-intl-fee-summary {
      width: 100%;
      padding: 10px 12px 0;
   }

   .travel-intl-step2 .travel-intl-promo-field {
      display: block;
      padding: 12px;
   }

   .travel-intl-step2 .travel-intl-promo-field .travel-intl-field-label {
      margin-bottom: 8px !important;
   }

   .travel-intl-step2 .travel-intl-fee-summary {
      width: 100%;
      padding: 10px 12px 0;
   }
}

/* --- Bảo hiểm du lịch quốc tế – bước 2 (tĩnh theo mock) --- */
.travel-intl-step2 .travel-intl-step2-panel {
   border: 1px solid #DEE5EF;
   border-radius: 12px;
   background: #fff;
   box-shadow: 0 2px 16px rgba(6, 24, 57, 0.06);
}

.travel-intl-step2 .travel-intl-step2-section {
   padding: 16px 12px;
   border-bottom: 1px solid #E9EDF3;
}

.travel-intl-step2 .travel-intl-step2-section:last-child {
   border-bottom: none;
}

.travel-intl-step2 .travel-intl-step2-section .title {
   font-size: 16px;
   font-weight: 500;
   line-height: 28px;
   margin-bottom: 8px;
}

.travel-intl-step2 .travel-intl-info-icon {
   width: 18px;
   height: 18px;
   border-radius: 50%;
   border: 1px solid #2CB5D2;
   color: #2CB5D2;
   font-size: 12px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

.travel-intl-step2 .travel-intl-insured-card {
   border: 1px solid #D9E2EC;
   border-radius: 10px;
   padding: 12px;
   margin-top: 10px;
}

.travel-intl-step2 .travel-intl-insured-card--collapsed {
   padding: 10px 12px;
}

.travel-intl-step2 .travel-intl-insured-body {
   display: block;
}

.travel-intl-step2 .travel-intl-insured-card--collapsed .travel-intl-insured-body {
   display: none;
}

.travel-intl-step2 .travel-intl-insured-chevron-btn .travel-intl-chevron {
   display: inline-block;
   transition: transform 0.2s ease;
   transform: rotate(0deg);
}

.travel-intl-step2 .travel-intl-insured-card--collapsed .travel-intl-chevron {
   transform: rotate(-90deg);
}

.travel-intl-step2 .travel-intl-insured-chevron-btn {
   border: 0;
   padding: 4px 6px;
   margin: 0;
   background: transparent;
   line-height: 1;
   cursor: pointer;
   border-radius: 6px;
   color: inherit;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

.travel-intl-step2 .travel-intl-insured-chevron-btn:focus-visible {
   outline: 2px solid #2CB5D2;
   outline-offset: 2px;
}

.travel-intl-step2 .travel-intl-insured-chevron-btn:hover .travel-intl-chevron {
   color: #061839;
}

.travel-intl-step2 .travel-intl-insured-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   color: #061839;
   font-weight: 500;
}

.travel-intl-step2 .travel-intl-chevron {
   color: #8A99AE;
   font-size: 18px;
}

.travel-intl-step2 .travel-intl-remove-person {
   color: #EF4444;
   font-size: 13px;
}


.travel-intl-step2 .travel-intl-health-row {
   color: #334155;
   font-size: 13px;
   display: flex;
   align-items: center;
   gap: 10px;
}

.travel-intl-step2 .travel-intl-edit-btn {
   border: 1px solid #2CB5D2;
   background: #fff;
   color: #2CB5D2;
   border-radius: 6px;
   font-size: 13px;
   padding: 4px 12px;
}

.travel-intl-step2 .travel-intl-checkline {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: #334155;
   font-size: 13px;
}

.travel-intl-step2 .travel-intl-checkline input {
   accent-color: #2CB5D2;
}

.travel-intl-step2 .travel-intl-radio-line {
   display: flex;
   align-items: center;
   gap: 22px;
   min-height: 41px;
}

.travel-intl-step2 .travel-intl-radio-line label {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   color: #334155;
   font-size: 14px;
}

.travel-intl-step2 .travel-intl-radio-line input[type="radio"] {
   appearance: none;
   -webkit-appearance: none;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   border: 2px solid #2CB5D2;
   background: #fff;
   position: relative;
   cursor: pointer;
   flex-shrink: 0;
}

.travel-intl-step2 .travel-intl-radio-line input[type="radio"]:checked::after {
   content: "";
   position: absolute;
   top: 3px;
   left: 3px;
   right: 3px;
   bottom: 3px;
   border-radius: 50%;
   background: #2CB5D2;
}

.travel-intl-step2 .travel-intl-add-person {
   color: #2E90FA;
   display: inline-block;
   margin-top: 10px;
   font-weight: 500;
}

/* --- Bảo hiểm du lịch quốc tế – bước 3 (tĩnh theo mock) --- */
.travel-intl-step3 .travel-intl-step3-card {
   background: #fff;
   border: 1px solid #DEE5EF;
   border-radius: 10px;
   padding: 12px;
   height: 100%;
}

.travel-intl-step3 .travel-intl-step3-card--primary {
   border-color: #2CB5D2;
}

.travel-intl-step3 .travel-intl-step3-box {
   position: relative;
}

.travel-intl-step3 .travel-intl-step3-box .title-heading {
   color: #061839;
   font-size: 22px;
   line-height: 30px;
   margin-bottom: 8px;
}

.travel-intl-step3 .travel-intl-step3-avatar {
   position: absolute;
   right: 0;
   top: 0;
   width: 52px;
   height: 32px;
   border-radius: 24px;
   background: linear-gradient(135deg, #16B7D8, #ff2ea6);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
}

.travel-intl-step3 .travel-intl-step3-card .infor-detail {
   display: flex;
   justify-content: space-between;
   gap: 12px;
   color: #6B788E;
   font-size: 13px;
   line-height: 20px;
   margin-bottom: 2px;
}

.travel-intl-step3 .travel-intl-step3-card .infor-detail span:last-child {
   text-align: right;
   color: #344054;
}

/* .travel-intl-step3 .travel-intl-step3-action {
   display: block;
   margin-top: 10px;
   text-align: center;
   color: #2CB5D2;
   font-weight: 500;
} */

.travel-intl-step3-card {
   position: relative;
   padding-bottom: 60px; /* chừa chỗ cho nút */
}

.travel-intl-step3-action {
   position: absolute;
   left: 24px;
   right: 24px;
   bottom: 20px;
   text-align: center;
   color: rgb(44, 181, 210);
}

.travel-intl-step3 .travel-intl-step3-footer-actions {
   border-top: 1px dashed #B9E7F2;
   margin-top: 10px;
   padding-top: 8px;
   display: flex;
   justify-content: space-around;
}

.travel-intl-step3 .travel-intl-step3-footer-actions a {
   color: #2CB5D2;
   font-weight: 500;
}

.travel-intl-step3 .travel-intl-step3-note {
   color: #6B788E;
   font-size: 16px;
   line-height: 25px;
}

/* --- Bảo hiểm du lịch quốc tế – trang thanh toán --- */
.travel-intl-payment .travel-intl-payment-panel {
   border: 1px solid #DEE5EF;
   border-radius: 10px;
   background: #fff;
}

.travel-intl-payment .travel-intl-payment-panel .title {
   font-size: 20px;
   line-height: 28px;
   margin-bottom: 8px;
}

.travel-intl-payment .travel-intl-pay-method {
   border: 1px solid #DEE5EF;
   border-radius: 10px;
   min-height: 56px;
   padding: 0 14px;
   display: flex;
   align-items: center;
   gap: 12px;
   margin-top: 10px;
   cursor: pointer;
   color: #344054;
}

.travel-intl-payment .travel-intl-pay-method.is-active {
   border-color: #2CB5D2;
   background: #EEF8FB;
}

.travel-intl-payment .travel-intl-pay-method input {
   display: none;
}

.travel-intl-payment .travel-intl-pay-dot {
   width: 18px;
   height: 18px;
   border-radius: 50%;
   border: 1px solid #A7B6CB;
   position: relative;
   flex-shrink: 0;
}

.travel-intl-payment .travel-intl-pay-method.is-active .travel-intl-pay-dot {
   border-color: #2CB5D2;
}

.travel-intl-payment .travel-intl-pay-method.is-active .travel-intl-pay-dot::after {
   content: "";
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #2CB5D2;
   position: absolute;
   left: 4px;
   top: 4px;
}

.travel-intl-payment .travel-intl-pay-icon {
   width: 28px;
   height: 28px;
   object-fit: contain;
   flex-shrink: 0;
}

.travel-intl-payment .travel-intl-checkline {
   color: #8A99AE;
}

.travel-intl-payment .travel-intl-checkline input {
   accent-color: #2CB5D2;
}

.travel-intl-payment .travel-intl-card-form {
   background: #F8FAFC;
   border-radius: 12px;
   padding: 14px;
}

.travel-intl-payment .travel-intl-card-fields {
   display: block;
}

.travel-intl-payment .travel-intl-qr-panel {
   display: none;
}

.travel-intl-payment .travel-intl-card-preview {
   height: 212px;
   width: 361px;
   margin:0 auto;
   border-radius: 14px;
   background: linear-gradient(120deg, #C7D3E4 0%, #B9C6DA 45%, #AEBAD0 100%);
   padding: 18px 20px;
   color: #fff;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
   position: relative;
}

.travel-intl-payment .travel-intl-card-preview-bank {
   font-size: 18px;
}

.travel-intl-payment .travel-intl-card-preview-visa-logo {
   position: absolute;
   top: -10px;
   right: 8px;
   width: 73px;
   height: auto;
   display: none;
   filter: brightness(0) invert(1);
}

.travel-intl-payment .travel-intl-card-preview-number {
   margin-top: 24px;
   font-size: 22px;
   font-weight: 700;
   letter-spacing: 1.4px;
   font-family: "Courier New", monospace;
}

.travel-intl-payment .travel-intl-card-preview-name {
   margin-top: 14px;
   font-size: 15px;
   font-weight: 700;
   letter-spacing: 0.8px;
}

.travel-intl-payment .travel-intl-card-preview-exp {
   margin-top: 14px;
   font-size: 13px;
   line-height: 18px;
   color: rgba(255, 255, 255, 0.95);
}

.travel-intl-payment .travel-intl-card-preview.is-visa {
   background: #0C2E78;
}

.travel-intl-payment .travel-intl-card-preview.is-visa .travel-intl-card-preview-bank {
   display: none;
}

.travel-intl-payment .travel-intl-card-preview.is-visa .travel-intl-card-preview-visa-logo {
   display: block;
}

.travel-intl-payment .travel-intl-card-preview.is-visa .travel-intl-card-preview-number {
   margin-top: 54px;
}

.travel-intl-payment .travel-intl-card-preview.is-visa .travel-intl-card-preview-name {
   position: absolute;
   left: 20px;
   bottom: 36px;
   margin-top: 0;
}

.travel-intl-payment .travel-intl-card-preview.is-visa .travel-intl-card-preview-exp {
   position: absolute;
   left: 20px;
   bottom: 14px;
   margin-top: 0;
}

.travel-intl-payment .travel-intl-card-form.mode-qr .travel-intl-card-preview,
.travel-intl-payment .travel-intl-card-form.mode-qr .travel-intl-card-fields {
   display: none;
}

.travel-intl-payment .travel-intl-card-form.mode-qr .travel-intl-qr-panel {
   display: block;
}

.travel-intl-payment .travel-intl-qr-brand {
   text-align: center;
   color: #0F4E97;
   font-weight: 700;
   font-size: 32px;
   line-height: 1.1;
   margin: 4px 0 8px;
}

.travel-intl-payment .travel-intl-qr-box {
   padding: 10px;
   text-align: center;
}

.travel-intl-payment .travel-intl-qr-title {
   color: #061839;
   font-weight: 500;
   margin-bottom: 8px;
}

.travel-intl-payment .travel-intl-qr-image {
   width: 200px;
   height: 200px;
   object-fit: cover;
}

.travel-intl-payment .travel-intl-qr-note {
   margin-top: 8px;
   font-size: 18px;
   color: #F79009;
}

.travel-intl-payment .travel-intl-qr-note b {
   color: #2E90FA;
}

.travel-intl-payment .travel-intl-qr-actions {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
   margin-top: 12px;
}

.travel-intl-payment .travel-intl-qr-btn {
   min-height: 48px;
   border: 1px solid #2CB5D2;
   border-radius: 8px;
   color: #2CB5D2;
   background: #fff;
   font-weight: 500;
}

.travel-intl-payment .travel-intl-modal-test-actions {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
}

.travel-intl-modal-backdrop {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.55);
   display: none;
   align-items: center;
   justify-content: center;
   z-index: 9999;
}

.travel-intl-modal-backdrop.is-open {
   display: flex;
}

.travel-intl-modal {
   width: 100%;
   max-width: 430px;
   background: #fff;
   border-radius: 16px;
   padding: 20px 16px 14px;
   position: relative;
}

.travel-intl-modal-close {
   position: absolute;
   top: 10px;
   right: 10px;
   width: 32px;
   height: 32px;
   border: none;
   border-radius: 50%;
   background: #F2F4F7;
   color: #98A2B3;
   font-size: 24px;
   line-height: 1;
}

.travel-intl-modal-title {
   color: #101828;
   font-size: 26px;
   font-weight: 700;
}

.travel-intl-modal-icon {
   margin: 14px auto 10px;
   width: 96px;
   height: 96px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.travel-intl-modal-icon img {
   width: 96px;
   height: 96px;
   object-fit: contain;
}

.travel-intl-modal-icon--warn {
   background: #FFEFEF;
   border-radius: 50%;
   font-size: 40px;
}

.travel-intl-modal-message {
   text-align: center;
   color: #344054;
   font-size: 22px;
   line-height: 1.4;
}

.travel-intl-modal-confirm {
   margin-top: 14px;
   width: 100%;
   height: 44px;
   border: none;
   border-radius: 8px;
   background: #2CB5D2;
   color: #fff;
   font-size: 16px;
   font-weight: 500;
}

/* Đồng bộ block phí các bước giống step 1 */
.travel-intl-step1 .travel-intl-step1-footer.distance.content-footer,
.travel-intl-step2 .travel-intl-step1-footer.distance.content-footer,
.travel-intl-step3 .travel-intl-step1-footer.distance.content-footer,
.travel-intl-payment .travel-intl-step1-footer.distance.content-footer {
   background: transparent;
   border: none;
   margin: 16px 0 0;
   padding: 0;
   box-shadow: none;
}

.travel-intl-step1 .travel-intl-fee-footer.handle-footer.handle,
.travel-intl-step2 .travel-intl-fee-footer.handle-footer.handle,
.travel-intl-step3 .travel-intl-fee-footer.handle-footer.handle,
.travel-intl-payment .travel-intl-fee-footer.handle-footer.handle {
   border-radius: 12px;
   border: 1px solid #DEE5EF;
   background: #fff;
   padding: 0;
   box-shadow: none;
}

.travel-intl-step1 .travel-intl-promo-field,
.travel-intl-step2 .travel-intl-promo-field,
.travel-intl-step3 .travel-intl-promo-field,
.travel-intl-payment .travel-intl-promo-field {
   display: flex;
   align-items: center;
   gap: 4px;
   margin: 0 !important;
   padding: 10px 14px;
   border-bottom: 1px solid #E9EDF3;
}

.travel-intl-step1 .travel-intl-promo-field .travel-intl-field-label,
.travel-intl-step2 .travel-intl-promo-field .travel-intl-field-label,
.travel-intl-step3 .travel-intl-promo-field .travel-intl-field-label,
.travel-intl-payment .travel-intl-promo-field .travel-intl-field-label {
   margin: 0 !important;
   white-space: nowrap;
   color: #26A9C7;
   font-weight: 600;
   font-size: 15px;
}

.travel-intl-step1 .travel-intl-promo-arrow,
.travel-intl-step2 .travel-intl-promo-arrow,
.travel-intl-step3 .travel-intl-promo-arrow,
.travel-intl-payment .travel-intl-promo-arrow {
   margin-left: auto;
   color: #9CA3AF;
   font-size: 18px;
   line-height: 1;
}

.travel-intl-step1 .travel-intl-fee-summary,
.travel-intl-step2 .travel-intl-fee-summary,
.travel-intl-step3 .travel-intl-fee-summary,
.travel-intl-payment .travel-intl-fee-summary {
   width: 520px;
   margin-left: auto;
   padding: 10px 14px 0;
}

.travel-intl-step1 .travel-intl-fee-summary .voucher-discount .item-money,
.travel-intl-step2 .travel-intl-fee-summary .voucher-discount .item-money,
.travel-intl-step3 .travel-intl-fee-summary .voucher-discount .item-money,
.travel-intl-payment .travel-intl-fee-summary .voucher-discount .item-money {
   padding: 2px 0;
   color: #6B7280;
   font-size: 14px;
}

.travel-intl-step1 .handle-footer .total-cost .text-money,
.travel-intl-step2 .handle-footer .total-cost .text-money,
.travel-intl-step3 .handle-footer .total-cost .text-money,
.travel-intl-payment .handle-footer .total-cost .text-money {
   font-weight: 700;
   font-size: 20px;
   color: #111827;
}

.travel-intl-step1 .handle-footer .handle-click,
.travel-intl-step2 .handle-footer .handle-click,
.travel-intl-step3 .handle-footer .handle-click,
.travel-intl-payment .handle-footer .handle-click {
   margin-top: 8px;
   padding: 12px 14px;
   border-top: none;
}

@media (max-width: 991px) {
   .travel-intl-step1 .travel-intl-fee-summary,
   .travel-intl-step2 .travel-intl-fee-summary,
   .travel-intl-step3 .travel-intl-fee-summary,
   .travel-intl-payment .travel-intl-fee-summary {
      width: 100%;
      padding: 10px 12px 0;
   }
}

/* --- Bảo hiểm du lịch quốc tế – thanh toán thành công --- */
.travel-intl-payment-success .travel-intl-success-card {
   max-width: 700px;
   margin: 20px auto 30px;
   border: 2px solid #7DD3FC;
   border-radius: 18px;
   background: radial-gradient(circle at center, #EAFBFF 0%, #DDF5FB 65%, #D4EEF7 100%);
   padding: 18px 18px 20px;
}

.travel-intl-payment-success .travel-intl-success-logo {
   display: inline-flex;
   align-items: center;
}

.travel-intl-payment-success .travel-intl-success-logo img {
   width: 154px;
   height: auto;
}

.travel-intl-payment-success .travel-intl-success-check {
   width: 96px;
   height: 96px;
   margin: 8px auto 8px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.travel-intl-payment-success .travel-intl-success-check img {
   width: 72px;
   height: 72px;
   object-fit: contain;
}

.travel-intl-payment-success .travel-intl-success-title {
   text-align: center;
   color: #061839;
   font-size: 20px;
   font-weight: 700;
   margin: 8px 0 16px;
}

.travel-intl-payment-success .travel-intl-success-info {
   background: #fff;
   border-radius: 12px;
   padding: 14px;
}

.travel-intl-payment-success .travel-intl-success-row {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 16px;
   color: #4B5563;
   font-size: 14px;
   line-height: 30px;
   margin-bottom: 4px;
}

.travel-intl-payment-success .travel-intl-success-row strong {
   color: #111827;
   text-align: right;
}

.travel-intl-payment-success .travel-intl-success-badge {
   background: #DCFCE7;
   color: #16A34A;
   border-radius: 999px;
   padding: 2px 10px;
   font-size: 16px;
   font-weight: 600;
}

.travel-intl-payment-success .travel-intl-success-actions {
   margin-top: 14px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
}

.travel-intl-payment-success .travel-intl-success-btn {
   width: 100%;
   height: 52px;
   border: none;
   border-radius: 10px;
   background: #2CB5D2;
   color: #fff;
   font-size: 14px;
   font-weight: 500;
}

.travel-intl-payment-success .travel-intl-success-btn--ghost {
   border: 1px solid #2CB5D2;
   background: #fff;
   color: #2CB5D2;
}

/* --- Landing du lịch quốc tế --- */
.travel-intl-landing .banner-bh.banner-travel-international {
   background-image: linear-gradient(90deg, #0e4da3 0%, #5ad0ff 100%);
}

.travel-intl-landing .banner-wrapper.travel-international::before {
   background: none;
}

.travel-intl-landing .item-banners .data-banner {
   max-width: 560px;
}

.travel-intl-landing .item-banners .buy-now {
   top: 195px;
}

.travel-intl-landing .travel-intl-intro-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
}

.travel-intl-landing .travel-intl-intro-grid--single {
   gap: 0;
   border: 1px solid #DEE5EF;
   border-radius: 12px;
   overflow: hidden;
   background: #fff;
   box-shadow: 0 4px 16px rgba(6, 24, 57, 0.08);
}

.travel-intl-landing .travel-intl-intro-card {
   border: 1px solid #DEE5EF;
   border-radius: 12px;
   background: #fff;
   padding: 12px;
   box-shadow: 0 4px 16px rgba(6, 24, 57, 0.08);
}

.travel-intl-landing .travel-intl-intro-grid--single .travel-intl-intro-card {
   border: 0;
   border-radius: 0;
   box-shadow: none;
   padding: 14px;
}

.travel-intl-landing .travel-intl-intro-grid--single .travel-intl-intro-card:first-child {
   border-right: 1px solid #DEE5EF;
}

.travel-intl-landing .travel-intl-intro-card img {
   width: 100%;
   height: 170px;
   object-fit: cover;
   border-radius: 10px;
}

.travel-intl-landing .travel-intl-intro-card h4 {
   font-size: 22px;
   line-height: 30px;
   font-weight: 700;
   color: #061839;
   margin: 10px 0 6px;
}

.travel-intl-landing .travel-intl-intro-card p {
   color: #516178;
   font-size: 14px;
   line-height: 22px;
   margin: 0;
}

.travel-intl-landing .travel-intl-feature-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 10px;
}

.travel-intl-landing .travel-intl-feature-card {
   border: 1px solid #7DD3FC;
   border-radius: 12px;
   background: #fff;
   overflow: hidden;
   padding: 10px 10px 12px;
   min-height: 100%;
   display: flex;
   flex-direction: column;
}

.travel-intl-landing .travel-intl-feature-card img {
   width: 100%;
   height: 142px;
   object-fit: cover;
   border-radius: 8px;
}

.travel-intl-landing .travel-intl-feature-card h5 {
   margin: 10px 0 4px;
   font-size: 19px;
   line-height: 26px;
   color: #061839;
   font-weight: 700;
}

.travel-intl-landing .travel-intl-feature-card p {
   margin: 0 0 8px;
   color: #6B788E;
   font-size: 14px;
   line-height: 20px;
   min-height: 44px;
}

.travel-intl-landing .travel-intl-feature-card a {
   display: inline-flex;
   align-items: center;
    gap: 8px;
   background: #063E91;
   color: #fff;
   font-size: 13px;
   font-weight: 500;
   border-radius: 22px;
   padding: 6px 14px 6px 10px;
   margin-top: auto;
   align-self: flex-start;
}

.travel-intl-landing .travel-intl-feature-card a::before {
    content: "★";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #F5B300;
    color: #063E91;
    font-size: 12px;
    flex-shrink: 0;
}

.health-landing .banner-bh.banner-travel-international {
    background-image: url(../image/content/healthInsurance/_BG.png);
}

.health-landing .banner-wrapper.travel-international::before {
    background: linear-gradient(271.05deg, rgba(6, 24, 57, 0) 38.01%, #021F58 78.28%);
}

.health-landing .item-banners .data-banner {
    max-width: 560px;
}

.health-landing .item-banners .buy-now {
    top: 195px;
}

.health-landing .travel-intl-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.health-landing .travel-intl-intro-grid--single {
    gap: 0;
    border: 1px solid #DEE5EF;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 16px rgba(6, 24, 57, 0.08);
}

.health-landing .travel-intl-intro-card {
    border: 1px solid #DEE5EF;
    border-radius: 12px;
    background: #fff;
    padding: 12px;
    box-shadow: 0 4px 16px rgba(6, 24, 57, 0.08);
}

.health-landing .travel-intl-intro-grid--single .travel-intl-intro-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 14px;
}

.health-landing .travel-intl-intro-grid--single .travel-intl-intro-card:first-child {
    border-right: 1px solid #DEE5EF;
}

.health-landing .travel-intl-intro-card img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: 10px;
}

.health-landing .travel-intl-intro-card h4 {
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
    color: #061839;
    margin: 10px 0 6px;
}

.health-landing .travel-intl-intro-card p {
    color: #516178;
    font-size: 14px;
    line-height: 22px;
    margin: 0;
}

@media (max-width: 991px) {
    .travel-intl-landing .travel-intl-intro-grid {
       grid-template-columns: 1fr;
    }

    .travel-intl-landing .travel-intl-feature-grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .health-landing .travel-intl-intro-grid {
       grid-template-columns: 1fr;
    }
}

/* Home insurance step 2 */
.home-insurance-step2 .home-insurance-panel {
   background: #fff;
   border: 1px solid #dee5ef;
   border-radius: 12px;
   padding: 16px;
}

.home-insurance-step2 .field-with-unit {
   position: relative;
   width: 100%;
}

.home-insurance-step2 .field-with-unit .form-control {
   padding-right: 52px;
}

.home-insurance-step2 .field-with-unit__suffix {
   position: absolute;
   right: 16px;
   top: 50%;
   transform: translateY(-50%);
   color: #a6aebb;
   font-size: 16px;
   pointer-events: none;
}

.home-insurance-step2 .home-insurance-checkline label {
   font-size: 14px;
   color: #061839;
}

.home-insurance-step2-footer .handle-footer.handle {
   background: #fff;
   border: 1px solid #dee5ef;
   border-radius: 12px;
   padding: 12px 16px;
}

.img-utilities{
   background: #d8eff6;
   border-radius: 50%;
   width: 80px;
   height: 80px;
   justify-content: center;
   display: flex;
   align-items: center;
}

.insurance .title-insurance{
   font-weight: 600;
   line-height: 24px;
   letter-spacing: -0.27px;
}

.insurance .outstanding{
   font-weight: 600;
   line-height: 24px;
   letter-spacing: -0.27px;
   color: rgba(46, 144, 250, 1);
}

.begin-date-input:has(.flatpickr-input.is-invalid) .begin-date-input__icon,
.begin-date-input:has(.form-control.is-invalid) .begin-date-input__icon {
    display: none;
}

.title-interest {
   color: #25a2bd; 
   font-weight: 700;
   font-size: 14px;
}

.hotline-context{
   margin-bottom: 0;
   font-weight: 300;
   font-size: 16px;
}

/* Modal upload ảnh xe (bước 3 - bảo hiểm thân vỏ) */
.upload-photos-modal .modal-title {
   color: #061839;
}

.upload-photos-grid {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 24px;
}

.upload-photos-col {
   display: flex;
   flex-direction: column;
   gap: 20px;
   flex: 1 1 0;
   min-width: 0;
}

/* Cột giữa (hình xe) rộng gấp đôi 1 cột ảnh (flex: 2 so với flex: 1 của .upload-photos-col) */
.upload-photos-illustration {
   flex: 2 1 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 12px;
}

.upload-photos-guide-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 18px;
   font-weight: 600;
   color: #2cb5d2;
   text-decoration: underline;
}

.upload-photos-guide-link:hover {
   color: #1f8ea6;
}

.car-illustration-img {
   width: 100%;
   height: auto;
}

.upload-photo-card {
   position: relative;
   background: #eef1f6;
   border-radius: 12px;
   text-align: center;
   height: 180px;
   overflow: hidden;
   border: 2px solid transparent;
   transition: background-color .15s ease, border-color .15s ease;
}

.upload-photo-card.is-active {
   background: #2cb5d2;
}

.upload-photo-card.is-uploaded {
   border-color: #2cb5d2;
}

.upload-photo-card.is-failed {
   border-color: #d9534f;
}

/* Tiêu đề + icon trạng thái nổi đè lên trên ảnh (thanh gradient tối phía trên). pointer-events:
   none để lớp này không "ăn" click — bấm vào đâu trên card cũng phải xuyên xuống được nút ảnh
   bên dưới, tránh vùng overlay che mất nút không bấm được. */
.upload-photo-header {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 2;
   pointer-events: none;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 8px;
   font-weight: 600;
   font-size: 12px;
   line-height: 1.3;
   text-align: left;
   padding: 8px 10px;
   color: #fff;
   background: linear-gradient(180deg, rgba(6, 24, 57, .7) 0%, rgba(6, 24, 57, 0) 100%);
}

.upload-photo-check {
   font-size: 15px;
   flex-shrink: 0;
   color: #fff;
}

.upload-photo-card.is-uploaded .upload-photo-check {
   color: #4ade80;
}

.upload-photo-card.is-failed .upload-photo-check {
   color: #ff8080;
}

/* Nút = full card, ảnh preview lấp đầy toàn bộ; chưa có ảnh thì hiện icon camera to giữa card */
.upload-photo-btn {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: none;
   border-radius: 0;
   background: transparent;
   color: #2cb5d2;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 34px;
   padding: 0;
}

.upload-photo-card.is-active .upload-photo-btn {
   color: #fff;
}

.upload-photo-btn:disabled {
   opacity: .7;
}

.upload-photo-preview {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 0;
}

.upload-photo-status-text {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 2;
   pointer-events: none;
   margin-top: 0;
   padding: 5px 10px;
   font-size: 11px;
   line-height: 1.3;
   color: #fff;
   background: rgba(6, 24, 57, .7);
   max-height: 60%;
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
}

.upload-photo-status-text:empty {
   display: none;
}

.upload-photo-retry-link {
   pointer-events: auto;
   color: #fff;
   text-decoration: underline;
   font-weight: 600;
   white-space: nowrap;
}

.upload-photo-retry-link:hover {
   color: #fff;
}

/* Nút "Tiếp tục" trong modal — nằm trong .modal-footer, ngoài bối cảnh .handle-footer.handle
   nên .handle-continue không tự có style, phải khai báo riêng ở đây. */
.upload-photos-confirm {
   height: 44px;
   padding: 0 32px;
   border-radius: 10px;
   font-size: 16px;
   font-weight: 500;
   border: 1px solid #2cb5d2;
   color: #fff;
   background: #2cb5d2;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: opacity .15s ease;
}

.upload-photos-confirm:disabled {
   opacity: .4;
   cursor: not-allowed;
}

@media (max-width: 575px) {
   .upload-photos-grid {
      flex-wrap: wrap;
   }
   .upload-photos-illustration {
      order: -1;
      flex-basis: 100%;
   }
}