/* ===== Container ===== */
.v-wrap{
  min-height:auto;
  background:#f5f7fb;
  padding:18px 12px 38px;
  font-family:Arial, sans-serif;
}
.v-title{
  text-align:center;
  color:#0d47a1;
  font-size:24px;
  margin:6px 0 12px;
}

/* ===== State Switch ===== */
.v-states{
  display:flex; gap:10px; justify-content:center; margin-bottom:12px;
}
.v-state-btn{
  border:none; padding:10px 16px; border-radius:10px;
  background:#e8eefc; color:#0d47a1; font-weight:700; cursor:pointer;
  box-shadow:0 2px 5px rgba(0,0,0,.08); transition:.25s;
}
.v-state-btn.active{ background:#0d47a1; color:#fff; }

/* ===== Category Tabs (scrollable on mobile) ===== */
.v-tabs{
  display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:8px; border-radius:12px; margin:0 auto 12px; max-width:1100px;
}
.v-tabs::-webkit-scrollbar{ height:8px; }
.v-tabs::-webkit-scrollbar-thumb{ background:#cfd8dc; border-radius:8px; }
.v-tab{
  flex:0 0 auto; scroll-snap-align:center;
  border:none; padding:10px 14px; border-radius:999px;
  background:#eef2f8; color:#334; font-weight:700; cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.08); transition:.25s;
}
.v-tab.active{ background:#ffcf4d; color:#111; transform:translateY(-1px); }

/* ===== Accordion Cards ===== */
.v-content{ max-width:1100px; margin:0 auto; padding:6px; }
.v-acc{
  background:#fff; border-radius:14px; margin:10px 0;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  overflow:hidden; transition:box-shadow .25s;
}
.v-acc:hover{ box-shadow:0 12px 28px rgba(0,0,0,.12); }

.v-acc-h{
  width:100%; display:flex; gap:10px; align-items:center; justify-content:space-between;
  background:#fff; border:none; padding:14px 16px; cursor:pointer; text-align:left;
}
.v-acc-h .v-num{
  min-width:30px; height:30px; border-radius:50%; background:#eaf1ff;
  color:#0a3e91; display:flex; align-items:center; justify-content:center; font-weight:800;
}
.v-acc-h .v-h{
  flex:1; font-size:16px; font-weight:800; color:#143b86;
}
.v-acc-h .v-arrow{ transition:transform .25s; }
.v-acc.open .v-acc-h .v-arrow{ transform:rotate(180deg); }

.v-acc-b{
  max-height:0; overflow:hidden; transition:max-height .35s ease, padding .25s;
  padding:0 16px; color:#333;
}
.v-acc.open .v-acc-b{ max-height:800px; padding:0 16px 14px; }

.v-acc-b p{ margin:8px 0; }
.v-acc-b ul{ margin:6px 0 0 20px; }
.v-acc-b li{ margin:6px 0; list-style:disc; }

/* ===== Responsive ===== */
@media (min-width:900px){
  .v-title{ font-size:28px; }
  .v-acc-h .v-h{ font-size:18px; }
}


/* ===== Common Note Box ===== */
.v-note {
  margin-top: 18px;
  padding: 14px 16px;
  background: #fff3cd;
  border: 1px solid #ffeeba;
  border-radius: 10px;
  color: #856404;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
.v-note b {
  font-weight: 800;
  color: #664d03;
}