.hc-hero {
     background: linear-gradient(135deg, #f0f7ec 0%, #e6f2df 100%);
     padding: 64px 20px 48px;
     text-align: center;
 }

 .hc-hero__title {
     font-size: 34px;
     font-weight: 700;
     color: #1e293b;
     margin-bottom: 28px;
     letter-spacing: -0.3px;
 }

 .hc-hero__search {
     max-width: 600px;
     margin: 0 auto;
     position: relative;
 }

 .hc-hero__input {
     width: 100%;
     padding: 16px 52px 16px 24px;
     border-radius: 50px;
     border: none;
     background: #fff;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
     font-size: 16px;
     outline: none;
     color: #334155;
     box-sizing: border-box;
 }

 .hc-hero__input::placeholder {
     color: #94a3b8;
 }

 .hc-hero__btn {
     position: absolute;
     right: 6px;
     top: 50%;
     transform: translateY(-50%);
     background: transparent;
     border: none;
     cursor: pointer;
     padding: 10px;
     color: #64748b;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     transition: background 0.2s;
 }

 .hc-hero__btn:hover {
     background: #f1f5f9;
 }

 /* ---- Tabs ---- */
 .hc-tabs-section {
    /* Thiết lập ảnh nền */
    background-color: #187455;
    background-image: url('https://s2-static-app.s3.ap-southeast-1.amazonaws.com/BadoSite/HDSD/tabs-img.webp');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: clamp(20px, 2.5vw, 28px) 20px;
    text-align: center;
    width: 100%;
    overflow: hidden;
 }

 .hc-tabs {
     display: flex;
     justify-content: center;
     gap: 12px;
     flex-wrap: wrap;
     max-width: 800px;
     margin: 0 auto;
 }

 .hc-tabs__btn {
     padding: 10px 28px;
     border-radius: 999px;
     font-weight: 700;
     font-size: 14px;
     cursor: pointer;
     transition: all 0.25s ease;
     border: 1.5px solid rgba(255, 255, 255, 0.7);
     background: transparent;
     color: #fff;
     letter-spacing: 0.2px;
     white-space: nowrap;
 }

 .hc-tabs__btn:hover {
     background: rgba(255, 255, 255, 0.12);
 }

 .hc-tabs__btn.active {
     background: #fff;
     color: #187455;
     border-color: #fff;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }

 .hc-tabs__btn:focus {
     outline: none;
     /* Xóa viền mặc định */
 }

 /* ---- Content ---- */
 .hc-content {
     background: #fff;
     padding: 48px 20px 64px;
 }

 .hc-grid {
     max-width: 1140px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 28px;
 }

 @media (max-width: 1023px) {
     .hc-grid {
         grid-template-columns: repeat(2, 1fr);
     }
    .hc-hero__title{
        font-size: 28px;
    }
 }

 @media (max-width: 767px) {
     .hc-grid {
         grid-template-columns: repeat(2, 1fr);
     }
    .hc-hero__title {
             font-size: 24px;
         }
 }

 @media (max-width: 480px) {
     .hc-grid {
         grid-template-columns: 1fr;
     }
    .hc-hero__title {
             font-size: 20px;
         }
 }

 /* ---- Card ---- */
 .hc-card {
     background: #fafbf9;
     border-radius: 10px;
     padding: 28px 24px 56px;
     border: 1px solid #e8f0e8;
     position: relative;
     transition: box-shadow 0.25s ease;
 }

 .hc-card:hover {
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
 }

 .hc-card__head {
     display: flex;
     align-items: center;
     gap: 12px;
     padding-bottom: 14px;
     margin-bottom: 16px;
     border-bottom: 1px solid #e2ebe2;
 }

 .hc-card__icon {
     font-size: 24px;
     line-height: 1;
     flex-shrink: 0;
 }

 .hc-card__title {
     font-weight: 700;
     font-size: 18px;
     color: #1e293b;
     margin: 0;
     line-height: 1.3;
 }

 .hc-card__body {
     padding-left: 4px;
 }

 .hc-card__list {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .cursor-pointer {
     cursor: pointer;
 }

 .hc-card__item {
     font-size: 17px;
     color: #475569;
     padding: 5px 0;
     line-height: 1.5;
     position: relative;
     padding-left: 16px;
 }

 .hc-card__item::before {
     content: '•';
     position: absolute;
     left: 0;
     color: #64748b;
     font-weight: 700;
 }

.hc-card__parent {
    font-weight: 600;
    color: #475569;
}
.hc-card__parent:hover {
    color: #23745d;
}

 .hc-card__sublist {
     list-style: none;
     padding: 0;
     margin: 4px 0 0 16px;
 }

 .hc-card__subitem {
    font-size: 14px;
    color: #64748b;
    padding: 2px 0;
    line-height: 1.4;
    position: relative;
    padding-left: 16px;
 }

 .hc-card__subitem::before {
    content: none;
}

.hc-card__subicon {
    position: absolute;
    left: 0;
    top: 0;
    color: #94a3b8;
    font-weight: 700;
}

.hc-card__sublink {
    color: #64748b;
    text-decoration: none;
}

.hc-card__sublink:hover {
    color: #187455;
    text-decoration: underline;
}

.hc-card__subtext {
    color: #64748b;
 }

 .hc-card__arrow {
     position: absolute;
     bottom: 22px;
     right: 22px;
     width: 32px;
     height: 32px;
     border-radius: 50%;
     border: 1px solid #cbd5e1;
     background: #fff;
     color: #187455;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     transition: all 0.2s ease;
 }

 .hc-card__arrow:hover {
     background: #187455;
     color: #fff;
     border-color: #187455;
 }

 /* ---- Tab panels ---- */
 .hc-panel {
     display: none;
 }

 .hc-panel.active {
     display: block;
 }

 .hc-card__link {
     color: #475569;
     text-decoration: none;
     transition: color 0.2s;
     cursor: pointer;
 }

 .hc-card__link:hover {
     color: #187455;
     text-decoration: underline;
 }

 .hc-empty {
     max-width: 1140px;
     margin: 0 auto;
     text-align: center;
     padding: 64px 20px;
     color: #94a3b8;
     font-size: 18px;
 }

 /* Container chứa icon/ảnh */
 .hc-card__icon-container {
     width: 3rem;
     /* Điều chỉnh kích thước khung cho phù hợp */
     height: 3rem;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     /* Không cho icon bị bóp méo */
 }

 /* Style cho ảnh custom từ API */
 .hc-card__custom-img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     /* Đảm bảo ảnh nằm gọn trong khung không bị mất góc */
     display: block;
 }