/* FSC Học phí - frontend */
.fsc-hp-wrap{
    --hp-orange:#ee7428;
    --hp-orange-soft:#fff3e9;
    --hp-blue:#2e79c7;
    --hp-blue-soft:#eef6ff;
    --hp-green:#49a75b;
    --hp-green-soft:#effaf1;
    --hp-text:#171717;
    --hp-muted:#5f6268;
    --hp-line:#ececec;
    width:100%;
    color:var(--hp-text);
    font-family: 'Be Vietnam Pro', sans-serif;
}

.fsc-hp-wrap *{box-sizing:border-box}

.fsc-hp-heading{
    text-align:center;
    padding:0 18px 34px;
}
.fsc-hp-heading h2{
    margin:0 0 8px;
    font-size:38px;
    line-height:1.15;
    letter-spacing:-.03em;
    font-weight:800;
    color:#181818;
}
.fsc-hp-heading p{
    margin:0;
    font-size:16px;
    line-height:1.55;
    color:#55595f;
}

.fsc-hp-toolbar{
    background: #fff;
    border-top: none;
    border-bottom: none;
    padding: 23px 22px 20px;
    margin-bottom: 20px;
    border-radius: 20px;
}
.fsc-hp-search-wrap{
    position:relative;
    width:100%;
}
.fsc-hp-search{
    width:100%;
    height:50px !important;
    min-height:50px;
    margin:0 !important;
    padding:0 48px 0 43px !important;
    border:0 !important;
    border-radius:12px !important;
    background:#f4f4f4 !important;
    box-shadow:none !important;
    font-size:15px !important;
    color:#272727 !important;
}
.fsc-hp-search:focus{
    outline:0;
    box-shadow:0 0 0 2px rgba(238,116,40,.12) !important;
}
.fsc-hp-search::placeholder{color:#94979c}
.fsc-hp-search-icon{
    position:absolute;
    top:50%;
    left:15px;
    transform:translateY(-50%);
    display:flex;
    color:#8b8f94;
    pointer-events:none;
}
.fsc-hp-search-spinner{
    display:none;
    position:absolute;
    width:18px;
    height:18px;
    top:50%;
    right:16px;
    margin-top:-9px;
    border:2px solid #ddd;
    border-top-color:var(--hp-orange);
    border-radius:50%;
    animation:fscHpSpin .7s linear infinite;
}

.fsc-hp-filter-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-top:16px;
}
.fsc-hp-filter-group{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:9px;
}
.fsc-hp-filter-label{
   margin-right: 4px;
    font-size: 16px;
    font-weight: 600;
    color: #8C8C8C;
    font-family: 'Be Vietnam Pro', sans-serif;
}
.fsc-hp-chip{
    appearance:none;
    border:1px solid #ededed !important;
    border-radius:999px !important;
    background:#fff !important;
    color:#373737 !important;
    min-height:36px !important;
    height:36px !important;
    line-height:36px !important;
    padding:0 17px !important;
    margin:0 !important;
    box-shadow:none !important;
    text-shadow:none !important;
    font-size:14px !important;
    font-weight:500 !important;
    text-transform:none !important;
    letter-spacing:0 !important;
    cursor:pointer;
    transition:.2s ease;font-family: 'Be Vietnam Pro', sans-serif;
}
.fsc-hp-chip:hover{
    border-color:#ddd !important;
    background:#fafafa !important;
}
.fsc-hp-chip.active,
.fsc-hp-chip.active:hover{
    border-color:var(--hp-orange) !important;
    background:var(--hp-orange) !important;
    color:#fff !important;
}

.fsc-hp-results-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:28px 0 24px;
    font-size:14px;
}
.fsc-hp-results-head strong{
    font-size:16px;
    font-weight:800;
}
.fsc-hp-results-head>span{
    color:#3D3D3D;font-size:14px
}

.fsc-hp-results-shell{position:relative}
.fsc-hp-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    transition:opacity .15s ease;
}
.fsc-hp-wrap.is-loading .fsc-hp-grid{opacity:.45}
.fsc-hp-wrap.is-loading .fsc-hp-search-spinner{display:block}

.fsc-hp-loading-overlay{
    display:none;
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
    align-items:flex-start;
    justify-content:center;
    padding-top:80px;
}
.fsc-hp-wrap.is-loading .fsc-hp-loading-overlay{display:flex}
.fsc-hp-loader{
    width:34px;
    height:34px;
    border-radius:50%;
    border:3px solid #e7e7e7;
    border-top-color:var(--hp-orange);
    animation:fscHpSpin .7s linear infinite;
}
@keyframes fscHpSpin{to{transform:rotate(360deg)}}

.fsc-hp-card{
    --region-color:#cfd4da;
    min-height:190px;
    display:flex;
    flex-direction:column;
    padding:19px 20px 17px;
    border:1px solid #ececec;
    border-left:4px solid var(--region-color);
    border-radius:14px;
    background:#fff;
    box-shadow:0 1px 0 rgba(0,0,0,.015);
    transition:transform .2s ease,box-shadow .2s ease;
}
.fsc-hp-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.fsc-hp-card.has-card-link{cursor:pointer}
.fsc-hp-card.has-card-link:focus{
    outline:2px solid rgba(46,121,199,.28);
    outline-offset:2px;
}
.fsc-hp-card.region-north{--region-color:#F37021}
.fsc-hp-card.region-central{--region-color:#18A043}
.fsc-hp-card.region-south{--region-color:#0066B3}

.fsc-hp-province{
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--region-color);
    font-size:12px;
    line-height:1.2;
    font-weight:800;
    margin-bottom:8px;
}
.fsc-hp-dot{
    width:7px;
    height:7px;
    flex:0 0 7px;
    border-radius:50%;
    background:var(--region-color);
}
.fsc-hp-card-title{
    margin:0 0 13px !important;
    color:#171717;
    font-size:18px !important;
    line-height:1.32;
    font-weight:800;
    letter-spacing:-.01em;
}
.fsc-hp-address{
    display:flex;
    align-items:flex-start;
    gap:8px;
    color:#3D3D3D;
    font-size:14px;
    line-height:1.48;
}
.fsc-hp-pin{
    flex:0 0 16px;
    display:flex;
    margin-top:1px;
    color:#555a60;
}
.fsc-hp-levels{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:9px;
    margin-top:15px;
    padding-top:0px;
}
.fsc-hp-level{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:31px;
    padding:5px 12px;
    border:1px solid;
    border-radius:7px;
    font-size:13px;
    line-height:1;
    font-weight:500;
    text-decoration:none !important;
    transition:.18s ease;
}
.fsc-hp-level:hover{
    transform:translateY(-1px);
    filter:brightness(.98);
}
.fsc-hp-level-tieu-hoc{
    border-color:#5bbb69;
    background:var(--hp-green-soft);
    color:#38994b !important;
}
.fsc-hp-level-thcs{
    border-color:#4d8ed8;
    background:var(--hp-blue-soft);
    color:#2872c2 !important;
}
.fsc-hp-level-thpt{
    border-color:#f28a4a;
    background:var(--hp-orange-soft);
    color:#e86e24 !important;
}
.fsc-hp-level.is-disabled{
    opacity:1;font-size: 14px;
    font-weight: 600;
    cursor:default;
}
.fsc-hp-level.is-disabled:hover{transform:none}

.fsc-hp-empty{
    grid-column:1/-1;
    display:flex;
    min-height:180px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:30px;
    border:1px dashed #ddd;
    border-radius:14px;
    color:#666;
    text-align:center;
}
.fsc-hp-empty strong{color:#222}

.fsc-hp-footnote{
    margin-top: 20px;
    color: #3D3D3D;
    font-size: 14px;
    line-height: 1.5;
    font-style: italic;
}

@media (max-width: 1024px){
    .fsc-hp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .fsc-hp-filter-row{align-items:flex-start;flex-direction:column}
    .fsc-hp-filter-level{width:100%}
}

@media (max-width: 640px){
    .fsc-hp-heading{padding:0 15px 24px}
    .fsc-hp-heading h2{font-size:28px}
    .fsc-hp-heading p{font-size:14px}
    .fsc-hp-toolbar{padding:16px 14px}
    .fsc-hp-filter-row{gap:15px}
    .fsc-hp-filter-group{gap:7px}
    .fsc-hp-filter-label{
        flex:0 0 100%;
        margin:0 0 1px;
    }
    .fsc-hp-chip{
        min-height:32px !important;
        height:32px !important;
        line-height:30px !important;
        padding:0 13px !important;
        font-size:12px !important;
    }
    .fsc-hp-results-head{
        align-items:flex-start;
        flex-direction:column;
        gap:6px;
        padding:20px 0 16px;
    }
    .fsc-hp-results-head>span{font-size:12px}
    .fsc-hp-grid{grid-template-columns:1fr;gap:12px}
    .fsc-hp-card{min-height:175px;padding:17px 16px 15px}
}