/* ============================================================
   assets/css/homepage.css — VoyageCore
   Shared styles for all homepage sections
   ============================================================ */

/* ── Container ──────────────────────────────────────────── */
.vc-container {
    max-width: var(--vc-container, 1200px);
    margin: 0 auto;
    padding: 0 24px;
}

.vc-container--wide {
    max-width: 90vw;
}

/* ══════════════════════════════════════════════════════════
   SECTION HEADINGS
   ══════════════════════════════════════════════════════════ */
.vc-section-heading {
    margin-bottom: 36px;
}

/* Centered + divider (travel blog style) */
.vc-section-heading--centered,
.vc-section-heading--centered-script,
.vc-section-heading--centered-plain {
    text-align: center;
}

.vc-section-heading--centered-script .vc-section-heading__title,
.vc-section-heading--script .vc-section-heading__title {
    font-family: var(--vc-font, 'Be Vietnam Pro', sans-serif);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
}

.vc-section-heading__divider {
    width: 48px;
    height: 2px;
    background: #ccc;
    margin: 12px auto;
}

.vc-section-heading--centered .vc-section-heading__divider,
.vc-section-heading--centered-script .vc-section-heading__divider {
    margin: 12px auto;
}

.vc-section-heading__subtitle {
    color: #777;
    font-size: 15px;
    max-width: 480px;
    margin: 0 auto;
}

/* Left bold */
.vc-section-heading--left-bold,
.vc-section-heading--bold-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.vc-section-heading--left-bold .vc-section-heading__title,
.vc-section-heading--bold-left .vc-section-heading__title {
    font-size: clamp(18px, 2.5vw, 26px);
    font-weight: 800;
    margin: 0;
}

.vc-section-heading--left-bold .vc-section-heading__divider,
.vc-section-heading--bold-left .vc-section-heading__divider {
    display: none;
}

.vc-section-heading--left-bold .vc-section-heading__line,
.vc-section-heading--bold-left .vc-section-heading__line {
    flex: 1;
    height: 1px;
    background: #e5e5e5;
}

/* Left bar */
.vc-section-heading--left-bar {
    border-left: 4px solid var(--vc-primary, #00b4cc);
    padding-left: 14px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.vc-section-heading--left-bar .vc-section-heading__title {
    font-size: clamp(16px, 2vw, 22px);
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.vc-section-heading--left-bar .vc-section-heading__divider {
    display: none;
}

.vc-section-heading--left-bar .vc-section-heading__line {
    flex: 1;
    height: 1px;
    background: #e5e5e5;
}

/* Tab label */
.vc-section-heading--tab-label,
.vc-section-heading--tab-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 12px;
    flex-wrap: wrap;
}

.vc-section-heading--tab-label .vc-section-heading__title,
.vc-section-heading--tab-bar .vc-section-heading__title {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #222;
    color: #fff;
    padding: 6px 14px;
    margin: 0;
}

.vc-section-heading--tab-label .vc-section-heading__divider,
.vc-section-heading--tab-bar .vc-section-heading__divider {
    display: none;
}

.vc-section-heading__viewall {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--vc-primary, #00b4cc);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: gap .2s;
}

.vc-section-heading__viewall:hover {
    gap: 9px;
}

.vc-section-heading__title {
    margin: 0 0 4px;
}

/* ══════════════════════════════════════════════════════════
   CATEGORIES SECTION
   ══════════════════════════════════════════════════════════ */
.vc-cats-section {
    overflow: hidden;
}

.vc-cat-card {
    display: block;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
}

.vc-cat-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .5s ease;
}

.vc-cat-card__bg--placeholder {
    background: #ccc;
}

.vc-cats--hover-zoom .vc-cat-card:hover .vc-cat-card__bg {
    transform: scale(1.06);
}

.vc-cats--hover-fade .vc-cat-card__overlay {
    opacity: 0;
    transition: opacity .3s;
}

.vc-cats--hover-fade .vc-cat-card:hover .vc-cat-card__overlay {
    opacity: 1;
}

.vc-cats--hover-slide .vc-cat-card__body {
    transform: translateY(10px);
    opacity: .8;
    transition: all .3s;
}

.vc-cats--hover-slide .vc-cat-card:hover .vc-cat-card__body {
    transform: translateY(0);
    opacity: 1;
}

/* Overlay style */
.vc-cat-card--style-overlay .vc-cat-card__overlay,
.vc-cat-card--style-gradient .vc-cat-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .7) 0%, transparent 60%);
    z-index: 1;
}

.vc-cat-card--style-gradient .vc-cat-card__overlay {
    background: linear-gradient(135deg, rgba(var(--vc-primary-rgb, 0, 180, 204), .75), rgba(0, 0, 0, .5));
}

.vc-cat-card__body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.vc-cat-card__name {
    font-size: clamp(13px, 1.5vw, 16px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.vc-cat-card__count {
    font-size: 11px;
    opacity: .75;
}

/* Caption style */
.vc-cat-card--style-caption .vc-cat-card__body {
    position: static;
    color: #222;
    padding: 10px 4px;
}

.vc-cat-card--style-caption .vc-cat-card__name {
    text-transform: none;
    letter-spacing: 0;
}

/* Badge style */
.vc-cat-card--style-badge .vc-cat-card__body {
    top: 12px;
    bottom: auto;
    left: 12px;
    right: auto;
    background: rgba(0, 0, 0, .65);
    padding: 6px 12px;
    border-radius: 4px;
}

/* Boxed style */
.vc-cat-card--style-boxed {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    color: #222;
    padding: 24px;
    transition: border-color .2s, box-shadow .2s;
}

.vc-cat-card--style-boxed:hover {
    border-color: var(--vc-primary, #00b4cc);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}

.vc-cat-card--style-boxed .vc-cat-card__bg {
    border-radius: 50%;
    width: 64px;
    height: 64px;
    position: static;
}

.vc-cat-card--style-boxed .vc-cat-card__body {
    position: static;
    color: #222;
    text-align: center;
    padding: 0;
}

.vc-cat-card--style-boxed .vc-cat-card__name {
    font-size: 14px;
}

/* List style */
.vc-cats--layout-list .vc-cats__inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vc-cats--layout-list .vc-cat-card {
    border-radius: 0;
}

/* ══════════════════════════════════════════════════════════
   POST CARDS (Latest / Category sections)
   ══════════════════════════════════════════════════════════ */
.vc-post-card {
    overflow: hidden;
    background: #fff;
    transition: transform .2s, box-shadow .2s;
}

.vc-post-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .1);
}

/* Caption / editorial */
.vc-post-card--card-caption .vc-post-card__image,
.vc-post-card--card-editorial .vc-post-card__image {
    overflow: hidden;
    position: relative;
    aspect-ratio: 16/9;
}

.vc-post-card--card-caption .vc-post-card__image img,
.vc-post-card--card-editorial .vc-post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

.vc-post-card--card-caption:hover .vc-post-card__image img,
.vc-post-card--card-editorial:hover .vc-post-card__image img {
    transform: scale(1.04);
}

.vc-post-card--card-editorial {
    background: transparent;
}

.vc-post-card--card-editorial:hover {
    box-shadow: none;
    transform: none;
}

/* Overlay */
.vc-post-card--card-overlay,
.vc-post-card--card-magazine {
    position: relative;
    aspect-ratio: 4/3;
}

.vc-post-card--card-overlay .vc-post-card__bg,
.vc-post-card--card-magazine .vc-post-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .4s;
}

.vc-post-card--card-overlay:hover .vc-post-card__bg,
.vc-post-card--card-magazine:hover .vc-post-card__bg {
    transform: scale(1.04);
}

.vc-post-card--card-overlay .vc-post-card__overlay,
.vc-post-card--card-magazine .vc-post-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .8), transparent);
}

.vc-post-card--card-overlay .vc-post-card__body,
.vc-post-card--card-magazine .vc-post-card__body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 20px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vc-post-card--card-caption .vc-post-card__body,
.vc-post-card--card-editorial .vc-post-card__body,
.vc-post-card--card-horizontal .vc-post-card__body,
.vc-post-card--card-numbered .vc-post-card__body {
    position: static;
    color: #222;
    padding: 12px 14px;
    display: block;
    gap: 0;
}

.vc-post-card--card-caption .vc-post-card__title,
.vc-post-card--card-editorial .vc-post-card__title {
    font-size: 16px;
    margin: 0;
    line-height: 1.4;
}

.vc-post-card--card-caption .vc-post-card__excerpt,
.vc-post-card--card-editorial .vc-post-card__excerpt,
.vc-post-card--card-caption .vc-post-card__meta,
.vc-post-card--card-editorial .vc-post-card__meta {
    display: none;
}

/* Horizontal */
.vc-post-card--horizontal {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: transparent;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
}

.vc-post-card--horizontal:last-child {
    border-bottom: none;
}

.vc-post-card--horizontal:hover {
    transform: none;
    box-shadow: none;
}

.vc-post-card__thumb img {
    width: 100px;
    height: 72px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.vc-post-card--horizontal .vc-post-card__body {
    position: static;
    color: #222;
    padding: 0;
    gap: 4px;
}

/* Numbered — card dạng đứng: số lớn trên, ảnh giữa, title dưới
   Cấu trúc: .vc-post-card--numbered
     └── .vc-post-card__num-wrap (relative, chứa số + ảnh + badge)
           ├── .vc-post-card__num (absolute, góc trên trái)
           ├── .vc-post-card__thumb (ảnh 4:3)
           └── .vc-post-card__cat-badge (absolute, góc dưới trái)
     └── .vc-post-card__body (title + date)
*/
.vc-post-card--numbered {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-bottom: none;
    background: var(--vc-card-bg, #fff);
    border-radius: var(--radius, 8px);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    transition: transform .2s, box-shadow .2s;
}

.vc-post-card--numbered:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(0,0,0,.11);
}

/* Số thứ tự nằm ở góc trên ảnh, overlay */
.vc-post-card--numbered .vc-post-card__num-wrap {
    position: relative;
}

.vc-post-card__num {
    position: absolute;
    top: 10px;
    left: 14px;
    font-size: 28px;
    font-weight: 900;
    color: rgba(255,255,255,.9);
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
    z-index: 2;
    pointer-events: none;
}

/* Ảnh full width, tỉ lệ 4:3 */
.vc-post-card--numbered .vc-post-card__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f1f5f9;
}

.vc-post-card--numbered .vc-post-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.vc-post-card--numbered:hover .vc-post-card__thumb img {
    transform: scale(1.05);
}

.vc-post-card--numbered .vc-post-card__body {
    position: static;
    color: #222;
    padding: 14px 16px 16px;
    gap: 6px;
    display: flex;
    flex-direction: column;
}


/* num-wrap: relative container cho số + ảnh + badge */
.vc-post-card--numbered .vc-post-card__num-wrap {
    position: relative;
    overflow: hidden;
}

/* Category badge dưới ảnh */
.vc-post-card--numbered .vc-post-card__cat-badge {
    position: absolute;
    bottom: 10px;
    left: 12px;
    background: var(--vc-primary, #c57a2a);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: 4px;
    text-decoration: none;
    z-index: 2;
    line-height: 1.4;
}

/* Title trong numbered card */
.vc-post-card--numbered .vc-post-card__title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vc-post-card--numbered .vc-post-card__title a {
    color: inherit;
    text-decoration: none;
}
.vc-post-card--numbered .vc-post-card__title a:hover {
    color: var(--vc-primary, #c57a2a);
}

.vc-post-card--numbered .vc-post-card__meta {
    font-size: 11.5px;
    color: #888;
    margin: 0;
}

/* Shared body elements */
.vc-post-card__cat {
    display: inline-block;
    background: var(--vc-primary, #00b4cc);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: 3px 8px;
    text-decoration: none;
    border-radius: 2px;
    width: fit-content;
}

.vc-post-card__title {
    font-size: clamp(14px, 1.8vw, 18px);
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.vc-post-card__title a {
    color: inherit;
    text-decoration: none;
}

.vc-post-card__title a:hover {
    opacity: .8;
}

.vc-post-card__excerpt {
    font-size: 13px;
    line-height: 1.6;
    opacity: .8;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vc-post-card__meta {
    display: flex;
    gap: 10px;
    font-size: 11px;
    opacity: .7;
    flex-wrap: wrap;
}

.vc-post-card__meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ══════════════════════════════════════════════════════════
   CATEGORY SECTION CARDS
   ══════════════════════════════════════════════════════════ */
.vc-catsec-card {
    overflow: hidden;
    position: relative;
    background: #fff;
}

.vc-catsec-card--card-overlay,
.vc-catsec-card--card-magazine {
    aspect-ratio: 4/3;
    transition: transform .2s;
}

.vc-catsec-card--card-overlay:hover,
.vc-catsec-card--card-magazine:hover {
    transform: translateY(-2px);
}

.vc-catsec-card.is-main {
    aspect-ratio: unset;
}

.vc-catsec-card.is-main {
    min-height: 400px;
}

.vc-catsec-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .5s;
}

.vc-catsec-card--card-overlay:hover .vc-catsec-card__bg {
    transform: scale(1.03);
}

.vc-catsec-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, transparent 55%);
    z-index: 1;
}

.vc-catsec-card__body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 18px 22px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vc-catsec-card--card-caption .vc-catsec-card__body,
.vc-catsec-card--card-horizontal .vc-catsec-card__body,
.vc-catsec-card--card-list .vc-catsec-card__body {
    position: static;
    color: #222;
    padding: 12px 0;
}

.vc-catsec-card--card-caption .vc-catsec-card__img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9;
}

.vc-catsec-card--card-caption .vc-catsec-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
    display: block;
}

.vc-catsec-card--card-caption:hover .vc-catsec-card__img-wrap img {
    transform: scale(1.04);
}

.vc-catsec-card__cat-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--vc-primary, #00b4cc);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    text-decoration: none;
    z-index: 2;
}

.vc-catsec-card--card-horizontal {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    background: transparent;
}

.vc-catsec-card--card-horizontal .vc-catsec-card__hthumb img {
    width: 90px;
    height: 65px;
    object-fit: cover;
    flex-shrink: 0;
}

.vc-catsec-card--card-list {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    background: transparent;
}

.vc-catsec-card--card-list .vc-catsec-card__thumb img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 3px;
}

.vc-catsec-card__title {
    font-size: clamp(13px, 1.6vw, 17px);
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.vc-catsec-card__title a {
    color: inherit;
    text-decoration: none;
}

.vc-catsec-card__title a:hover {
    opacity: .8;
}

.vc-catsec-card__excerpt {
    font-size: 13px;
    opacity: .8;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vc-catsec-card__date {
    font-size: 11px;
    opacity: .65;
}

/* Category section layout grids */
.vc-catsec__inner--big-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.vc-catsec__inner--big-grid .vc-catsec__main {
    grid-row: span 2;
}

.vc-catsec__sub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.vc-catsec__inner--featured {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.vc-catsec__inner--grid {
    display: grid;
}

.vc-catsec__inner--hlist {
    display: flex;
    flex-direction: column;
}

.vc-catsec__inner--2col-mixed {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.vc-catsec__inner--2col-mixed .vc-catsec-card:first-child {
    grid-row: span 2;
}

/* ══════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════ */
/* Wrapper ngoài: flex row, buttons trái — info phải */
.vc-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 40px;
}

/* ul.page-numbers do WP render ra trực tiếp */
.vc-pagination ul.page-numbers {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: auto !important;
    height: auto !important;
    border: none !important;
    background: transparent !important;
}

/* Mỗi <li> trong ul.page-numbers */
.vc-pagination ul.page-numbers>li {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
}

/* Base: chỉ apply cho <a> và <span> page-numbers, KHÔNG apply cho <ul> */
.vc-pagination ul.page-numbers .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    background: #fff;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
    white-space: nowrap;
    box-sizing: border-box;
}

.vc-pagination ul.page-numbers .page-numbers:hover {
    background: var(--vc-primary, #7a5c44);
    border-color: var(--vc-primary, #7a5c44);
    color: #fff;
}

/* Trang hiện tại */
.vc-pagination ul.page-numbers .page-numbers.current {
    background: var(--vc-primary, #7a5c44);
    border-color: var(--vc-primary, #7a5c44);
    color: #fff;
    pointer-events: none;
}

/* Dấu ... */
.vc-pagination ul.page-numbers .page-numbers.dots {
    width: auto;
    border: none;
    background: transparent;
    color: #999;
    pointer-events: none;
    padding: 0 4px;
}

/* Nút Prev / Next */
.vc-pagination ul.page-numbers .page-numbers.prev,
.vc-pagination ul.page-numbers .page-numbers.next {
    width: 36px;
    background: var(--vc-primary, #7a5c44);
    border-color: var(--vc-primary, #7a5c44);
    color: #fff;
}

.vc-pagination ul.page-numbers .page-numbers.prev:hover,
.vc-pagination ul.page-numbers .page-numbers.next:hover {
    opacity: 0.8;
}

/* Info PAGE X OF Y */
.vc-pagination__info {
    flex-shrink: 0;
    font-size: 12px;
    color: #777;
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
}

.vc-loadmore-wrap,
.vc-viewall-wrap {
    text-align: center;
    margin-top: 36px;
}

.vc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: all .2s;
    border-radius: 2px;
}

.vc-btn--primary {
    background: var(--vc-primary, #00b4cc);
    color: #fff;
}

.vc-btn--primary:hover {
    opacity: .85;
}

.vc-btn--outline {
    background: transparent;
    border: 2px solid var(--vc-primary, #00b4cc);
    color: var(--vc-primary, #00b4cc);
}

.vc-btn--outline:hover {
    background: var(--vc-primary, #00b4cc);
    color: #fff;
}

/* ══════════════════════════════════════════════════════════
   FILTER TABS
   ══════════════════════════════════════════════════════════ */
.vc-filter-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 28px;
    flex-wrap: wrap;
    border-bottom: 2px solid #eee;
}

.vc-filter-tab {
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 13px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    transition: all .2s;
}

.vc-filter-tab:hover {
    color: #222;
}

.vc-filter-tab.is-active {
    color: var(--vc-primary, #00b4cc);
    border-bottom-color: var(--vc-primary, #00b4cc);
}

/* ══════════════════════════════════════════════════════════
   FAQ SECTION
   ══════════════════════════════════════════════════════════ */
.vc-faq-section {
    overflow: hidden;
}

/* Accordion */
.vc-faq-accordion {
    max-width: 760px;
    margin: 0 auto;
}

.vc-faq-item {
    border-bottom: 1px solid var(--faq-border, #e5e5e5);
}

.vc-faq-item:first-child {
    border-top: 1px solid var(--faq-border, #e5e5e5);
}

.vc-faq-item__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 18px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    transition: color .2s;
}

.vc-faq-item.is-open .vc-faq-item__header {
    color: var(--faq-active, var(--vc-primary, #00b4cc));
}

.vc-faq-item__q {
    flex: 1;
}

.vc-faq-item__icon {
    flex-shrink: 0;
    font-size: 13px;
    transition: transform .3s;
}

.vc-faq-item.is-open .vc-faq-item__icon--open {
    display: none !important;
}

.vc-faq-item:not(.is-open) .vc-faq-item__icon--close {
    display: none !important;
}

.vc-faq-item.is-open .vc-faq-item__icon--close {
    display: flex !important;
    color: var(--faq-active);
}

.vc-faq-item__body {
    overflow: hidden;
    transition: max-height .35s ease;
}

.vc-faq-item__a {
    padding: 0 0 20px;
    font-size: 14px;
    line-height: 1.75;
    color: #555;
}

/* With image */
.vc-faq__with-image {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.vc-faq__image-col img {
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
    max-height: 480px;
}

.vc-faq__with-image .vc-faq-accordion {
    max-width: 100%;
    margin: 0;
}

/* Grid */
.vc-faq-card {
    background: #f9f9f9;
    padding: 24px;
    border-radius: 8px;
    border-top: 3px solid var(--vc-primary, #00b4cc);
}

.vc-faq-card__q {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #222;
}

.vc-faq-card__a {
    font-size: 13px;
    line-height: 1.7;
    color: #666;
    margin: 0;
}

/* Tabs */
.vc-faq-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.vc-faq-tab {
    padding: 10px 22px;
    border: 1px solid #ddd;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    transition: all .2s;
    border-radius: 4px;
}

.vc-faq-tab:hover {
    border-color: var(--vc-primary, #00b4cc);
    color: var(--vc-primary, #00b4cc);
}

.vc-faq-tab.is-active {
    background: var(--vc-primary, #00b4cc);
    border-color: var(--vc-primary, #00b4cc);
    color: #fff;
}

.vc-faq-tab-panel {
    display: none;
}

.vc-faq-tab-panel.is-active {
    display: block;
}

/* ══════════════════════════════════════════════════════════
   MAGAZINE LAYOUT (latest posts)
   ══════════════════════════════════════════════════════════ */
.vc-latest--magazine {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gap, 24px);
}

.vc-latest--magazine .vc-latest__item.is-main {
    grid-column: span 2;
    grid-row: span 2;
}

.vc-latest--magazine .vc-latest__item.is-main .vc-post-card {
    height: 100%;
    aspect-ratio: unset;
    min-height: 400px;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

    .vc-catsec__inner--big-grid,
    .vc-catsec__inner--featured {
        grid-template-columns: 1fr;
    }

    .vc-catsec__inner--big-grid .vc-catsec__main {
        grid-row: span 1;
    }

    .vc-latest--magazine {
        grid-template-columns: 1fr 1fr;
    }

    .vc-latest--magazine .vc-latest__item.is-main {
        grid-column: span 2;
    }

    .vc-faq__with-image {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .vc-faq__image-col {
        display: none;
    }
}

@media (max-width: 768px) {
    .vc-cats__inner[style*="grid-template-columns"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .vc-catsec__inner--grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* Sidebar UI */
.vc-sidebar-trigger {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 12;
    border: 0;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    border-radius: 28px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vc-sidebar-trigger:hover {
    background: rgba(0, 0, 0, .8);
}

.vc-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 330px;
    max-width: 92vw;
    background: #fff;
    z-index: 9999;
    transform: translateX(100%);
    transition: transform .35s ease, opacity .35s ease;
    box-shadow: -4px 0 24px rgba(0, 0, 0, .25);
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
}

.vc-sidebar.vc-sidebar--left {
    right: auto;
    left: 0;
    transform: translateX(-100%);
    box-shadow: 4px 0 24px rgba(0, 0, 0, .25);
}

.vc-sidebar.vc-sidebar--right {
    right: 0;
    left: auto;
    transform: translateX(100%);
}

.vc-sidebar.vc-sidebar--open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.vc-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
    z-index: 9998;
}

.vc-sidebar-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.vc-catsec__inner--2col-mixed {
    grid-template-columns: 1fr;
}

.vc-latest--magazine {
    grid-template-columns: 1fr;
}

.vc-latest--magazine .vc-latest__item.is-main {
    grid-column: span 1;
}

.vc-latest__inner[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
}

.vc-faq__grid {
    grid-template-columns: 1fr !important;
}

.vc-sub-grid {
    grid-template-columns: 1fr 1fr;
}
}

@media (max-width: 480px) {
    .vc-cats__inner[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    .vc-latest__inner[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    .vc-catsec__inner--grid {
        grid-template-columns: 1fr !important;
    }

    .vc-container {
        padding: 0 16px;
    }
}

/* Sidebar drawer visual */
/* (Duplicate block removed; styling already in .vc-sidebar/.vc-sidebar-overlay above) */
.vc-sidebar__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: 0;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
}

.vc-sidebar__content {
    padding: 22px;
}

.vc-sidebar-block+.vc-sidebar-block {
    margin-top: 24px;
}

/* Inline sidebar in section layout */
.vc-cats-layout {
    display: grid;
    gap: 24px;
}

/* Latest Posts — sidebar layout */
.vc-latest__layout {
    display: grid;
    gap: 24px;
    align-items: start;
}

.vc-latest__layout--sidebar-left {
    grid-template-columns: 300px minmax(0, 1fr);
}

.vc-latest__layout--sidebar-right {
    grid-template-columns: minmax(0, 1fr) 300px;
}

.vc-latest__layout--sidebar-none {
    grid-template-columns: 1fr;
}

.vc-latest__content {
    min-width: 0;
}

.vc-catsec {
    position: relative;
    display: block;
}

.vc-catsec__layout {
    display: grid;
    gap: 24px;
    align-items: start;
}

.vc-catsec--with-sidebar-left .vc-catsec__layout {
    grid-template-columns: 320px minmax(0, 1fr);
}

.vc-catsec--with-sidebar-right .vc-catsec__layout {
    grid-template-columns: minmax(0, 1fr) 320px;
}

.vc-catsec--with-sidebar-none .vc-catsec__layout {
    grid-template-columns: 1fr;
}

.vc-catsec__content {
    min-width: 0;
}

.vc-sidebar-inline {
    width: 100%;
    max-width: 320px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
    padding: 18px;
}

/* Style options from customize */
.vc-sidebar-inline--style-1 {
    background: #fff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
}

.vc-sidebar-inline--style-2 {
    background: linear-gradient(145deg, #f2f8ff, #ffffff);
    border: 1px solid #d1e4ff;
    box-shadow: 0 8px 24px rgba(25, 78, 146, 0.2);
}

.vc-sidebar-inline--style-3 {
    background: #1f2937;
    color: #f9fafb;
    border: 1px solid rgba(255, 255, 255, .15);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .2);
}

.vc-sidebar-inline--style-3 .vc-sidebar-title,
.vc-sidebar-inline--style-3 .vc-sidebar-list li a {
    color: #f9fafb;
}

.vc-sidebar-inline--style-4 {
    background: #fff;
    border: none;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
    border-radius: 16px;
    padding: 20px;
}

.vc-sidebar-inline .vc-sidebar-block {
    margin-bottom: 22px;
}

.vc-sidebar-inline .vc-sidebar-block:last-child {
    margin-bottom: 0;
}

.vc-sidebar-inline .vc-sidebar-title {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 700;
}

.vc-sidebar-inline .vc-sidebar-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vc-sidebar-inline .vc-sidebar-list li {
    margin-bottom: 8px;
}

.vc-sidebar-inline .vc-sidebar-list li a {
    color: #0b63c9;
    text-decoration: none;
}

.vc-sidebar-inline .vc-sidebar-list li a:hover {
    text-decoration: underline;
}

.vc-sidebar-trigger {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 12;
}

.vc-sidebar-trigger--catsec {
    display: inline-flex;
}

.vc-cats-layout--with-sidebar-left {
    grid-template-columns: 320px minmax(0, 1fr);
}

.vc-cats-layout--with-sidebar-right {
    grid-template-columns: minmax(0, 1fr) 320px;
}

.vc-cats-layout--with-sidebar-none {
    grid-template-columns: 1fr;
}

.vc-sidebar-inline {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    max-height: 100%;
}

.vc-sidebar-inline .vc-sidebar-title {
    margin-top: 0;
}

@media (max-width: 1024px) {

    .vc-cats-layout--with-sidebar-left,
    .vc-cats-layout--with-sidebar-right {
        grid-template-columns: 1fr;
    }
}