/* ===== BẢO HIỂM NHÀ Ở - HOME INSURANCE ===== */

.nav-tabs {
   border-bottom: none;
}

/* --- Utilities --- */
.hi-color-primary { color: #061839; }
.hi-color-accent { color: #2E90FA; }
.hi-font-semibold { font-weight: 600; }
.hi-d-flex { display: flex; }
.hi-align-center { align-items: center; }
.hi-mt-3 { margin-top: 12px; }
.hi-mb-0 { margin-bottom: 0; }
.hi-ms-1 { margin-left: 4px; }
.hi-me-1 { margin-right: 4px; }

/* --- Banner --- */
.hi-banner {
   margin-top: 24px;
}

.hi-banner__wrapper {
   position: relative;
   border-radius: 20px;
   overflow: hidden;
   min-height: 333px;
}

.hi-banner__bg {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   z-index: 0;
}

.hi-banner__overlay {
   position: absolute;
   inset: 0;
   z-index: 1;
   border-radius: 20px;
}

.hi-banner__overlay--gradient {
   background: linear-gradient(to right, #CFE6E9, rgba(207, 230, 233, 0));
}

.hi-banner__content {
   position: relative;
   z-index: 2;
   padding: 24px 32px;
}

.hi-banner__text {
   padding-top: 40px;
   margin-bottom: 24px;
}

.hi-banner__subtitle {
   font-family: 'Inter', sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: 20px;
   line-height: 28px;
   letter-spacing: 0px;
   text-transform: uppercase;
   color: #061839;
}

.hi-banner__title {
   font-family: 'Inter', sans-serif;
   margin: 0;
   font-size: 40px;
   font-weight: 800;
   line-height: 50px;
   font-style: normal;
   letter-spacing: -0.4px;
   color: #061839;
}

.hi-banner__btn {
   display: inline-flex;
   align-items: center;
   font-family: 'Inter', sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: 16px;
   line-height: 24px;
   letter-spacing: 0px;
   text-align: center;
   height: 44px;
   min-width: 129px;
   color: #fff;
   padding: 10px 12px;
   gap: 8px;
   border: none;
   border-radius: 10px;
   background: #2cb5d2;
   cursor: pointer;
   text-decoration: none;
}
.hi-banner__btn:hover {
   color: #fff;
}

#cccd_avatar_area .cccd-frame {
   gap: 10px;
}

.hi-banner__btn img {
   width: 20px;
}

/* --- Intro section --- */
.hi-intro {
   margin-top: 40px;
}

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

.hi-intro__card {
   flex: 1 1 0%;
   height: auto;
   padding: 24px;
   border: 1px solid #DEE5EF;
   border-left: none;
}

.hi-intro__card:first-child {
   border-left: 1px solid #DEE5EF;
   border-top-left-radius: 20px;
   border-bottom-left-radius: 20px;
}

.hi-intro__card:last-child {
   border-top-right-radius: 20px;
   border-bottom-right-radius: 20px;
}

.hi-intro__img {
   width: 100%;
   height: 297px;
   display: flex;
   margin-bottom: 16px;
   justify-content: center;
}

.hi-intro__img-file {
   object-fit: cover;
   border-radius: 10px;
   width: 100%;
}

.hi-intro__label {
   display: block;
   color: #061839;
   font-weight: 700;
   font-style: normal;
   font-size: 20px;
   line-height: 28px;
   letter-spacing: 0.01em;
   margin-bottom: 0;
}

.hi-intro__desc {
   font-size: 14px;
   -webkit-line-clamp: inherit;
}

/* --- Why section --- */
.hi-why {
   margin-top: 40px;
}

.hi-why__grid {
   display: flex;
   margin: 0;
   box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
}

.hi-why__card {
   flex: 0 0 25%;
   max-width: 25%;
   padding: 32px 24px;
   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;
}

.hi-why__card--bg1 { background-color: #FFFFFF; }
.hi-why__card--bg2 { background-color: #F7F8F9; }
.hi-why__card--bg3 { background-color: #FFFFF2; }
.hi-why__card--bg4 { background-color: #FBF3FF; }

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

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

.hi-why__label {
   display: block;
   color: #061839;
   font-weight: 700;
   font-style: normal;
   font-size: 20px;
   line-height: 28px;
   letter-spacing: 0.01em;
}

.hi-why__value {
   min-height: 30px;
}

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

/* --- Tabs section (giống insurance.css gốc) --- */
.insurance.contents {
   margin-top: 40px;
}

.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.nav-tabs {
   justify-content: center;
}

.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: 303px;
}

.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;
   width: auto;
   justify-content: left;
   background: none;
}

.handle-hotline .btn-getquote,
.handle-hotline .btn-getquote:hover {
   color: #fff;
   text-decoration: 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;
}

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



@media (max-width: 991px) {
    .hi-banner__wrapper {
        min-height: 260px;
    }

    .hi-banner__title {
        font-size: 30px;
        line-height: 40px;
    }

    .hi-banner__subtitle {
        font-size: 16px;
        line-height: 24px;
    }

    .hi-banner__text {
        padding-top: 24px;
        margin-bottom: 16px;
    }

    .hi-intro__grid {
        flex-direction: column;
    }

    .hi-intro__card {
        border-left: 1px solid #DEE5EF;
        border-top: none;
        border-bottom: 1px solid #DEE5EF;
    }

    .hi-intro__card:first-child {
        border-top: 1px solid #DEE5EF;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 0;
    }

    .hi-intro__card:last-child {
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        border-top-right-radius: 0;
    }

    .hi-intro__img {
        height: 220px;
    }

    .hi-why__grid {
        flex-wrap: wrap;
    }

    .hi-why__card {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .hi-section-heading {
        font-size: 22px;
        line-height: 32px;
    }

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

    .details .item-left {
        height: auto;
    }

    .details .iconic-photo {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-radius: 10px;
    }

    .tab-content .details {
        flex-direction: column;
    }

    .details .item-right {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-radius: 10px;
    }

}

@media (max-width: 575px) {
    .hi-banner__wrapper {
        min-height: 200px;
    }

    .hi-banner__title {
        font-size: 24px;
        line-height: 32px;
    }

    .hi-banner__subtitle {
        font-size: 14px;
        line-height: 20px;
    }

    .hi-banner__content {
        padding: 16px;
    }

    .hi-why__card {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .hi-intro__img {
        height: 180px;
    }
}