/* ─────────────────────────────────────────────────────────────────────
   VN Affiliate Pro — affiliate-style.css
   Image-overlay card UI + pill tabs + Listeo single-page layout.
   ───────────────────────────────────────────────────────────────────── */

/* ── Card base (image-overlay) ───────────────────────────────────── */
.vn-aff-card {
    position      : relative;
    border-radius : 16px;
    overflow      : hidden;
    aspect-ratio  : 4 / 5;
    cursor        : pointer;
    background    : #e8eaed;
    box-shadow    : 0 4px 20px rgba(0, 0, 0, .10);
    transition    : transform .22s ease, box-shadow .22s ease;
    display       : block;
    outline       : none;
    -webkit-tap-highlight-color: transparent;
}

.vn-aff-card:hover {
    transform  : translateY(-4px);
    box-shadow : 0 12px 32px rgba(0, 0, 0, .18);
}

.vn-aff-card:focus-visible {
    outline        : 2px solid #ef4444;
    outline-offset : 2px;
}

/* ── Card image ───────────────────────────────────────────────────── */
.vn-aff-card__img {
    position   : absolute;
    inset      : 0;
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    display    : block;
    transition : transform .36s ease;
}

.vn-aff-card:hover .vn-aff-card__img {
    transform : scale(1.06);
}

.vn-aff-card__img-placeholder {
    position   : absolute;
    inset      : 0;
    background : linear-gradient(135deg, #d0d3d9 0%, #e8eaed 50%, #d0d3d9 100%);
}

/* ── Gradient overlay ─────────────────────────────────────────────── */
.vn-aff-card__overlay {
    position        : absolute;
    inset           : 0;
    background      : linear-gradient(
                        to top,
                        rgba(0, 0, 0, .80) 0%,
                        rgba(0, 0, 0, .25) 55%,
                        transparent       85%
                      );
    display         : flex;
    flex-direction  : column;
    justify-content : flex-end;
    padding         : 16px;
    gap             : 8px;
}

/* ── Date badge ───────────────────────────────────────────────────── */
.vn-aff-card__date-badge {
    display         : inline-flex;
    align-items     : center;
    gap             : 5px;
    background      : rgba(255, 255, 255, .90);
    border-radius   : 20px;
    padding         : 4px 10px 4px 8px;
    font-size       : 12px;
    font-weight     : 600;
    color           : #333;
    align-self      : flex-start;
    backdrop-filter : blur(4px);
    line-height     : 1.3;
}

/* ── Card bottom (title + excerpt + footer row) ───────────────────── */
.vn-aff-card__bottom {
    display        : flex;
    flex-direction : column;
    gap            : 5px;
}

.vn-aff-card__title {
    font-size           : 15px;
    font-weight         : 700;
    color               : #fff;
    line-height         : 1.4;
    margin              : 0;
    display             : -webkit-box;
    -webkit-line-clamp  : 2;
    -webkit-box-orient  : vertical;
    overflow            : hidden;
    text-shadow         : 0 1px 6px rgba(0, 0, 0, .5);
}

/* ── Card footer row (price left, CTA pill right) ─────────────────── */
.vn-aff-card__footer {
    display     : flex;
    align-items : center;
    gap         : 8px;
    margin-top  : 2px;
}

.vn-aff-card__price {
    font-size   : 16px;
    font-weight : 800;
    color       : #fff;
    text-shadow : 0 1px 6px rgba(0, 0, 0, .5);
    line-height : 1.2;
    flex        : 1 1 auto;
}

.vn-aff-card__cta-pill {
    flex-shrink    : 0;
    margin-left    : auto;
    padding        : 5px 13px;
    background     : rgba(255, 255, 255, .18);
    border         : 1px solid rgba(255, 255, 255, .45);
    border-radius  : 20px;
    font-size      : 12px;
    font-weight    : 600;
    color          : #fff;
    white-space    : nowrap;
    backdrop-filter: blur(6px);
    letter-spacing : .2px;
    line-height    : 1.4;
    pointer-events : none;
}

.vn-aff-card__cta-pill--popup {
    padding       : 5px 14px;
    font-size     : 14px;
    font-weight   : 700;
    letter-spacing: 2px;
}

/* ── Grid layout ──────────────────────────────────────────────────── */
.vn-aff-grid {
    display : grid;
    gap     : 24px;
}

.vn-aff-cols-2 { grid-template-columns: repeat(2, 1fr); }
.vn-aff-cols-3 { grid-template-columns: repeat(3, 1fr); }
.vn-aff-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Carousel layout (Swiper) ─────────────────────────────────────── */
.vn-aff-carousel {
    position      : relative;
    padding-bottom: 42px;
}

.vn-aff-carousel .swiper-slide {
    height : auto;
}

.vn-aff-carousel .swiper-slide .vn-aff-card {
    height : 100%;
}

.vn-aff-carousel .swiper-button-prev,
.vn-aff-carousel .swiper-button-next {
    color : #ef4444;
}

.vn-aff-carousel .swiper-button-prev::after,
.vn-aff-carousel .swiper-button-next::after {
    font-size : 18px;
}

.vn-aff-carousel .swiper-pagination-bullet-active {
    background : #ef4444;
}

/* ── Toolbar (tabs + filter selects — centered) ───────────────────── */
/* ── Toolbar (tabs + filter selects) ──────────────────────────────── */
.vn-aff-toolbar {
    display         : flex;
    align-items     : center;
    justify-content : space-between; /* Trải đều 2 bên: Tab bên trái, Filter bên phải */
    gap             : 20px;
    margin-bottom   : 35px;
    flex-wrap       : wrap;
    background      : #ffffff;
    padding         : 8px 24px;
    border-radius   : 50px; /* Bo tròn nguyên khối toolbar */
    box-shadow      : 0 4px 20px rgba(0, 0, 0, 0.04); /* Đổ bóng sang trọng */
}

.vn-aff-toolbar .vn-aff-tabs {
    margin-bottom : 0;
    padding       : 0;
    flex          : 1;
    overflow-x    : auto;
}

/* ── Category Tabs (Pill style chuẩn Hình 1) ──────────────────────── */
.vn-aff-tabs {
    display         : flex;
    gap             : 5px;
    scrollbar-width : none;
    align-items     : center;
}
.vn-aff-tabs::-webkit-scrollbar { display: none; }

.vn-aff-tab {
    flex-shrink   : 0;
    padding       : 10px 24px;
    border-radius : 40px;
    background    : transparent; /* Trong suốt khi chưa chọn */
    border        : none;
    color         : #555;
    font-size     : 15px;
    font-weight   : 600;
    cursor        : pointer;
    white-space   : nowrap;
    transition    : all 0.3s ease;
    display       : flex;
    align-items   : center;
    gap           : 8px; /* Khoảng cách cho Icon nếu có */
}
.vn-aff-tab:hover {
    color      : #ef4444; /* Đổi màu chữ khi hover */
    background : rgba(239, 68, 68, 0.05); /* Nền đỏ cực nhạt */
}

/* Tab Active (Viên thuốc đỏ) */
.vn-aff-tab.is-active,
.vn-aff-tab.active {
    background : #e60023; /* Đỏ rực chủ đạo */
    color      : #ffffff;
    box-shadow : 0 4px 15px rgba(230, 0, 35, 0.35); /* Đổ bóng cho tab active */
}
.vn-aff-tab:focus-visible {
    outline        : 2px solid #ef4444;
    outline-offset : 2px;
}

/* ── Filters Section ──────────────────────────────────────────────── */
.vn-aff-filters {
    display     : flex;
    align-items : center;
    gap         : 12px;
    flex-shrink : 0;
}

.vn-aff-filter-label {
    font-size   : 14px;
    font-weight : 600;
    color       : #777;
    margin-right: 5px;
}

/* FIX LỖI CANH GIỮA CHỮ CHO Ô SELECT (Hình 4) */
.vn-aff-filter-select {
    -webkit-appearance : none;
    appearance         : none;
    background         : #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 16px center;
    background-size    : 10px;
    border             : 1px solid #e0e0e0;
    border-radius      : 40px;
    
    /* Bí quyết ép chữ ra chính giữa */
    height             : 42px;         /* Khóa cứng chiều cao */
    line-height        : 40px;         /* Line-height bằng chiều cao (-2px viền) */
    padding            : 0 40px 0 20px; /* Chỉ đẩy trái/phải, không đẩy trên/dưới */
    
    font-size          : 14px;
    font-weight        : 500;
    color              : #333;
    cursor             : pointer;
    outline            : none;
    transition         : border-color .2s ease, box-shadow .2s ease;
    min-width          : 160px;
    font-family        : inherit;
    margin-bottom: 0;
}

.vn-aff-filter-select:hover,
.vn-aff-filter-select:focus { 
    border-color : #ef4444; 
    box-shadow   : 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* ── Responsive cho Toolbar ───────────────────────────────────────── */
@media ( max-width: 767px ) {
    .vn-aff-toolbar {
        flex-direction : column;
        align-items    : stretch;
        padding        : 15px;
        border-radius  : 20px;
    }
    .vn-aff-filters {
        flex-wrap       : wrap;
        justify-content : space-between;
        width           : 100%;
        border-top      : 1px solid #eee;
        padding-top     : 15px;
        margin-top      : 5px;
    }
    .vn-aff-filter-select {
        flex: 1; /* Trải đều ô select trên mobile */
    }
}

/* ── Tab icon (emoji) ─────────────────────────────────────────────── */
.vn-aff-tab__icon {
    margin-right : 5px;
    font-style   : normal;
    line-height  : 1;
}

/* ── Card excerpt ─────────────────────────────────────────────────── */
.vn-aff-card__excerpt {
    font-size           : 12px;
    color               : rgba(255, 255, 255, .75);
    line-height         : 1.5;
    margin              : 0;
    display             : -webkit-box;
    -webkit-line-clamp  : 2;
    -webkit-box-orient  : vertical;
    overflow            : hidden;
}

/* ── Category Tabs (pill style) ───────────────────────────────────── */
.vn-aff-tabs {
    display         : flex;
    gap             : 10px;
    overflow-x      : auto;
    padding         : 10px 0;
    margin-bottom   : 20px;
    scrollbar-width : none;
}
.vn-aff-tabs::-webkit-scrollbar { display: none; }

.vn-aff-tab {
    flex-shrink   : 0;
    padding       : 8px 24px;
    border-radius : 40px;
    background    : #eee;
    border        : none;
    color         : #555;
    font-size     : 13px;
    font-weight   : 500;
    cursor        : pointer;
    white-space   : nowrap;
    transition    : background .16s ease, color .16s ease, box-shadow .16s ease;
    outline       : none;
}
.vn-aff-tab:hover {
    background : #e0e0e0;
    color      : #333;
}
.vn-aff-tab.is-active {
    background : #ef4444;
    color      : #fff;
    box-shadow : 0 4px 12px rgba(239, 68, 68, .30);
}
.vn-aff-tab:focus-visible {
    outline        : 2px solid #ef4444;
    outline-offset : 2px;
}

/* ── Grid loading state ───────────────────────────────────────────── */
.vn-aff-loading {
    opacity       : .45;
    pointer-events: none;
    transition    : opacity .2s ease;
}

/* ── No results ───────────────────────────────────────────────────── */
.vn-aff-no-results {
    text-align : center;
    color      : #aaa;
    padding    : 40px 20px;
    font-size  : 15px;
}

/* ── Popup Modal ──────────────────────────────────────────────────── */
.vn-aff-modal-overlay {
    position        : fixed;
    inset           : 0;
    background      : rgba(0, 0, 0, .55);
    display         : flex;
    align-items     : center;
    justify-content : center;
    z-index         : 99999;
    padding         : 16px;
}

.vn-aff-modal-box {
    background    : #fff;
    border-radius : 14px;
    padding       : 0;
    max-width     : 480px;
    width         : 100%;
    position      : relative;
    overflow      : hidden;
    box-shadow    : 0 12px 48px rgba(0, 0, 0, .22);
    animation     : vn-aff-modal-in .22s ease;
}

.vn-aff-modal__img {
    width      : 100%;
    height     : 220px;
    overflow   : hidden;
    flex-shrink: 0;
    line-height: 0;
}
.vn-aff-modal__img img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    display    : block;
}

.vn-aff-modal__content {
    padding : 22px 24px 24px;
}

.vn-aff-modal__excerpt {
    font-size    : 13px;
    color        : #777;
    line-height  : 1.65;
    margin       : 0 0 14px;
}

@keyframes vn-aff-modal-in {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.vn-aff-modal-close {
    position        : absolute;
    top             : 10px;
    right           : 10px;
    z-index         : 2;
    background      : rgba(255, 255, 255, .85);
    backdrop-filter : blur(4px);
    border          : none;
    font-size       : 20px;
    line-height     : 1;
    color           : #555;
    cursor          : pointer;
    padding         : 4px 8px;
    border-radius   : 50%;
    transition      : background .14s ease, color .14s ease;
    width           : 32px;
    height          : 32px;
    display         : flex;
    align-items     : center;
    justify-content : center;
}
.vn-aff-modal-close:hover { background: #fff; color: #111; }

.vn-aff-modal__title {
    font-size   : 17px;
    font-weight : 700;
    color       : #1a1a2e;
    margin      : 0 0 10px;
    line-height : 1.4;
}

.vn-aff-modal__price {
    font-size    : 26px;
    font-weight  : 700;
    color        : #ef4444;
    margin-bottom: 14px;
}

.vn-aff-modal__info-row {
    display      : flex;
    align-items  : flex-start;
    gap          : 8px;
    font-size    : 14px;
    color        : #555;
    margin-bottom: 10px;
}
.vn-aff-modal__info-row .dashicons {
    color      : #ef4444;
    flex-shrink: 0;
    margin-top : 1px;
}

.vn-aff-modal__voucher {
    display    : flex;
    align-items: center;
    gap        : 8px;
    flex-wrap  : wrap;
    margin     : 14px 0;
}

.vn-aff-copy-btn {
    padding      : 3px 12px;
    background   : #f0f0f0;
    border       : 1px solid #ddd;
    border-radius: 4px;
    font-size    : 12px;
    cursor       : pointer;
    transition   : background .14s ease;
}
.vn-aff-copy-btn:hover    { background: #e0e0e0; }
.vn-aff-copy-btn:disabled { opacity: .6; cursor: default; }

.vn-aff-voucher-label {
    color          : #999;
    font-size      : 12px;
    text-transform : uppercase;
    letter-spacing : .4px;
}

.vn-aff-voucher-code {
    background     : #fff8e1;
    border         : 1px dashed #f9a825;
    border-radius  : 4px;
    padding        : 2px 9px;
    font-family    : 'Courier New', Courier, monospace;
    font-size      : 13px;
    font-weight    : 700;
    color          : #e65100;
    letter-spacing : .6px;
    user-select    : all;
}

.vn-aff-modal__cta {
    display        : block;
    margin-top     : 18px;
    padding        : 13px 16px;
    background     : #ef4444;
    color          : #fff;
    border-radius  : 8px;
    font-size      : 15px;
    font-weight    : 700;
    text-align     : center;
    text-decoration: none;
    transition     : background .16s ease;
}
.vn-aff-modal__cta:hover { background: #dc2626; color: #fff; }

/* ── Responsive ───────────────────────────────────────────────────── */

@media ( max-width: 1199px ) {
    .vn-aff-cols-4 { grid-template-columns: repeat(3, 1fr); }
}

@media ( max-width: 1023px ) {
    .vn-aff-cols-3,
    .vn-aff-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .vn-aff-grid   { gap: 18px; }
}

@media ( max-width: 767px ) {
    .vn-aff-carousel .swiper-button-prev,
    .vn-aff-carousel .swiper-button-next { display: none; }
    .vn-aff-grid { gap: 14px; }

    .vn-aff-toolbar {
        flex-direction : column;
        align-items    : center;
    }
    .vn-aff-toolbar .vn-aff-tabs { width: 100%; justify-content: center; }
    .vn-aff-filters { flex-wrap: wrap; justify-content: center; }
}

@media ( max-width: 479px ) {
    .vn-aff-cols-2,
    .vn-aff-cols-3,
    .vn-aff-cols-4 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Single Post Page  (single-vn_affiliate.php — Listeo Bootstrap grid)
   ═══════════════════════════════════════════════════════════════════════ */

.vn-aff-single__title {
    font-size   : 30px;
    font-weight : 700;
    color       : #1a1a2e;
    line-height : 1.3;
    margin      : 0 0 10px;
}

.vn-aff-single__price-big {
    font-size   : 34px;
    font-weight : 800;
    color       : #ef4444;
    line-height : 1;
    margin-bottom: 4px;
}

/* ── Main column ── */
.vn-aff-single__thumbnail {
    width         : 100%;
    border-radius : 12px;
    overflow      : hidden;
    margin-bottom : 28px;
    aspect-ratio  : 16 / 9;
    background    : #f0f2f5;
}
.vn-aff-single__thumbnail img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    display    : block;
}

.vn-aff-single__content {
    line-height : 1.75;
    color       : #333;
    font-size   : 15px;
}
.vn-aff-single__content p { margin-bottom: 16px; }

/* ── Sidebar ── */
.vn-aff-single__sidebar { position: sticky; top: 100px; }

.vn-aff-single__action-box {
    background    : #fff;
    border        : 1px solid #eee;
    border-radius : 14px;
    padding       : 24px 22px;
    box-shadow    : 0 4px 24px rgba(0, 0, 0, .07);
    margin-bottom : 20px;
}

.vn-aff-single__action-box .vn-aff-sidebar-price {
    font-size    : 28px;
    font-weight  : 800;
    color        : #ef4444;
    margin-bottom: 16px;
}

.vn-aff-single__buy-btn {
    display        : block;
    width          : 100%;
    padding        : 14px 20px;
    background     : #ef4444;
    color          : #fff;
    border         : none;
    border-radius  : 10px;
    font-size      : 16px;
    font-weight    : 700;
    text-align     : center;
    cursor         : pointer;
    text-decoration: none;
    letter-spacing : .3px;
    transition     : background .18s ease, transform .1s ease;
    margin-bottom  : 16px;
    outline        : none;
}
.vn-aff-single__buy-btn:hover  { background: #dc2626; color: #fff; }
.vn-aff-single__buy-btn:active { transform: scale(.98); }
.vn-aff-single__buy-btn:focus-visible {
    outline        : 2px solid #ef4444;
    outline-offset : 3px;
}

/* ── Sidebar voucher ── */
.vn-aff-single__voucher-box {
    margin-bottom : 20px;
    padding       : 14px;
    background    : #fff8e1;
    border        : 1px dashed #f9a825;
    border-radius : 8px;
}
.vn-aff-single__voucher-label {
    font-size      : 11px;
    color          : #888;
    text-transform : uppercase;
    letter-spacing : .5px;
    margin-bottom  : 6px;
}
.vn-aff-single__voucher-row {
    display     : flex;
    align-items : center;
    gap         : 8px;
}
.vn-aff-single__voucher-code {
    font-family    : 'Courier New', Courier, monospace;
    font-size      : 16px;
    font-weight    : 700;
    color          : #e65100;
    letter-spacing : .6px;
    flex           : 1;
}
.vn-aff-single__copy-btn {
    padding       : 5px 14px;
    background    : #fff;
    border        : 1px solid #f9a825;
    border-radius : 6px;
    font-size     : 12px;
    font-weight   : 600;
    color         : #e65100;
    cursor        : pointer;
    transition    : background .14s ease;
    white-space   : nowrap;
}
.vn-aff-single__copy-btn:hover { background: #fff3cd; }

/* ── Sidebar meta (address / phone) ── */
.vn-aff-single__meta {
    border-top     : 1px solid #f0f0f0;
    padding-top    : 16px;
    display        : flex;
    flex-direction : column;
    gap            : 10px;
}
.vn-aff-single__meta-row {
    display     : flex;
    align-items : flex-start;
    gap         : 10px;
    font-size   : 13px;
    color       : #555;
    line-height : 1.5;
}
.vn-aff-single__meta-icon {
    color      : #ef4444;
    flex-shrink: 0;
    margin-top : 2px;
    font-size  : 16px;
}
.vn-aff-single__meta-row a { color: #ef4444; text-decoration: none; }
.vn-aff-single__meta-row a:hover { text-decoration: underline; }

/* ── Map (sidebar, below action box) ── */
.vn-aff-single__maps {
    border-radius : 12px;
    overflow      : hidden;
    line-height   : 0;
}
.vn-aff-single__maps iframe {
    width   : 100%;
    height  : 300px;
    border  : 0;
    display : block;
}

/* ── Single page responsive ── */
@media ( max-width: 900px ) {
    .vn-aff-single__sidebar { position: static; }
}

@media ( max-width: 767px ) {
    .vn-aff-single__title     { font-size: 24px; }
    .vn-aff-single__price-big { font-size: 26px; }
}

@media ( max-width: 479px ) {
    .vn-aff-single__title     { font-size: 20px; }
    .vn-aff-single__price-big { font-size: 22px; }
}