.ha-list-wrap{width:100%}
.ha-list{
list-style:none !important; padding:0; margin:0;
display:grid; gap:18px;
}
.ha-list-item{margin:0;  list-style:none !important;}
.ha-list-link{
display:grid;
grid-template-columns:1fr auto;
align-items:center;
gap:16px;
padding:20px 22px;
border:1px solid #d8d8d8;
border-radius:10px;
background:#f6f6f6;
text-decoration:none !important; color:inherit;
transition:
box-shadow .2s ease,
border-color .2s ease,
background .2s ease,
transform .05s ease;
}
.ha-list-link:hover{
background:#eaf7ee;
border-color:#15803d;
box-shadow:0 6px 24px rgba(0,0,0,.06);
transform:translateY(-1px);
}
.ha-list-text{display:grid; gap:2px}
.ha-list-title{
font-weight:600;
font-size:20px;
line-height:1.2;
color:#0d642f;
}
.ha-list-sub{
font-size:13px;
color:#404041;
} .ha-sort-wrap {
display:flex;
align-items:center;
justify-content:flex-end;
gap:8px;
margin-bottom:20px;
}
.ha-sort-wrap label {
font-weight:600;
color:#333;
}
.ha-sort-wrap select {
border:none;
border-bottom:2px solid #ccc;
padding:4px 6px;
font-size:14px;
background:transparent;
cursor:pointer;
width:auto
}
.ha-sort-wrap select:focus {
outline:none;
border-color:#15803d;
} .ha-cta{
width:52px; height:52px;
border-radius:999px;
border:1px solid #000; display:flex; align-items:center; justify-content:center;
background:transparent;
color:#000; transition:
transform .15s ease,
background .15s ease,
color .15s ease,
border-color .15s ease;
}
.ha-cta svg{display:block;margin-left: 2px;} .ha-list-link:hover .ha-cta{
background:#0f6a2b;
border-color:#0f6a2b;
color:#fff;
} .ha-accordion-wrap {
display: flex;
width: 100%;
max-height: 60vh;
min-height: 340px;
align-items: stretch;
box-sizing: border-box;
}
.ha-tab {
flex: 0 0 54px;
min-width: 0;
background: #fff;
border-radius: 10px;
border: 1.5px solid #ddd;
margin-right: -1px;
position: relative;
display: flex; 
justify-content: flex-start;
transition: cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s;
overflow: visible;
z-index: 1;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
flex-direction: column;
}
.ha-tab.active {
flex: 1 1 520px;
border: 1.5px solid #15803d;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.09);
z-index: 2;
min-width: 400px;
max-width: 400px;
}
.ha-tab-label {
cursor: pointer;
display: flex; 
align-items: center;
justify-content: space-between;
height: 100%;
min-height: 200px;
width: 56px;
background: none;
padding: 38px 0 22px 0;
writing-mode: vertical-rl;
text-orientation: mixed;
position: absolute;
right: 0;
top: 0;
bottom: 0;
flex-direction: row;
transform: revert;
}
.ha-tab-label .ha-tab-number {
font-size: 17px;
font-weight: 600;
letter-spacing: 2px;
color: #15803d;
margin-bottom: 6px;
line-height: 1;
transform: rotate(180deg);
}
.ha-tab-label .ha-tab-tema {
font-size: 17px;
font-weight: 600;
color: #15803d;
letter-spacing: 0.5px;
margin-top: 8px;
line-height: 1.05;
transform: rotate(180deg);
}
.ha-tab:not(.active) .ha-tab-label .ha-tab-number,
.ha-tab:not(.active) .ha-tab-label .ha-tab-tema {
color: #555;
}
.ha-tab-content {
display: none;
padding: 35px 55px 25px 35px;
flex-direction: column;
justify-content: flex-start;
overflow-y: auto;
width: 100%;
box-sizing: border-box;
margin-right: 20px;
}
.ha-tab.active .ha-tab-content {
display: flex;
}
.ha-tab-content a > .ha-img { cursor: pointer; }
.ha-img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 12px;
margin-bottom: 28px;
margin-top: 0;
box-shadow: 0 4px 24px rgba(0,0,0,0.09);
align-self: flex-start;
border: 1px solid #d8d8d8;
}
.ha-tab-content h2 {
display: none;
}
.ha-tab-content .ha-desc {
font-size: inherit;
color: #232323;
margin-bottom: 10px;
} @media (max-width: 768px) { .ha-accordion-wrap{
flex-direction: column;
max-height: none;
gap: 0;
} .ha-tab{
flex: 1 1 auto;
min-width: 100%;
min-height: 0;
border-radius: 10px;
border-color: #e5e7eb;
box-shadow: 0 2px 10px rgba(0,0,0,.06);
position: relative;
overflow: hidden;
}
.ha-tab.active{
border-color: #15803d;
box-shadow: 0 6px 20px rgba(0,0,0,.08);
min-width: 100%;
max-height: fit-content;
} .ha-tab-content{
order: 1; display: none;
width: 100%;
padding: 16px 16px 0 16px;
margin: 0;
box-sizing: border-box;
}
.ha-tab.active .ha-tab-content{ display: block; } .ha-img{
width: 100%;
height: auto; max-height: 420px; object-fit: cover;
border-radius: 12px;
border: 1px solid #d8d8d8;
margin: 12px 0 0 0;
box-shadow: 0 4px 24px rgba(0,0,0,.08);
} .ha-tab-label{
order: 2; position: static; width: 100%;
min-height: 0;
height: auto;
padding: 20px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-direction: row-reverse;
writing-mode: horizontal-tb; text-orientation: initial;
transform: none;
background: #fff;
border-top: 1px solid #e5e7eb;
border-radius: 0 0 14px 14px;
}
.ha-tab.active .ha-tab-label{ border:0; flex-direction: row-reverse;padding: 0 17px 17px;} .ha-tab-label .ha-tab-tema,
.ha-tab-label .ha-tab-number{
transform: none; margin: 0;
line-height: 1.1;
}
.ha-tab-label .ha-tab-tema{
font-size: 18px;
font-weight: 700;
letter-spacing: .2px;
color: #0f6a2b; }
.ha-tab-label .ha-tab-number{
font-size: 16px;
font-weight: 700;
letter-spacing: .06em;
color: #0f6a2b;
} .ha-tab:not(.active) .ha-tab-label .ha-tab-tema{ color: #111827; }
.ha-tab:not(.active) .ha-tab-label .ha-tab-number{ color: #374151; } .ha-tab-content a > .ha-img{ cursor: pointer; width: 100% !important;}
}