/* ================================
CONTENT TABS
================================ */

.vc-content-tabs{
display:flex;
gap:10px;
margin-bottom:20px;
overflow-x:auto;
padding-bottom:5px;
}

.vc-content-tabs::-webkit-scrollbar{
display:none;
}

.vc-content-tab{
padding:8px 14px;
border-radius:20px;
border:none;
background:#f2f2f2;
cursor:pointer;
font-size:14px;
white-space:nowrap;
transition:all .2s ease;
}

.vc-content-tab:hover{
background:#e5e5e5;
}

.vc-content-tab.active{
background:#111;
color:#fff;
}


/* ================================
CONTENT GRID
================================ */

.vc-content-library{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:20px;
}


/* ================================
CONTENT CARD
================================ */

.vc-content-card{
display:block;
background:#fff;
border-radius:12px;
overflow:hidden;
text-decoration:none;
color:#111;
box-shadow:0 4px 12px rgba(0,0,0,0.06);
transition:all .2s ease;
}

.vc-content-card:hover{
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(0,0,0,0.1);
}


/* ================================
CARD IMAGE
================================ */

.vc-card-thumb img{
width:100%;
height:150px;
object-fit:cover;
}


/* ================================
CARD BODY
================================ */

.vc-card-body{
padding:14px;
}

.vc-card-type{
font-size:12px;
text-transform:uppercase;
opacity:.6;
display:block;
margin-bottom:6px;
}

.vc-card-body h4{
font-size:16px;
margin:0;
line-height:1.4;
}


.vc-card-body h4{
font-size:16px;
margin:0;
line-height:1.4;

display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

.vc-card-thumb{
aspect-ratio:16/9;
overflow:hidden;
}

.vc-card-thumb img{
width:100%;
height:100%;
object-fit:cover;
}


.vc-card-body h4{
font-size:16px;
line-height:1.4;
margin:0;

display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;

}



/* MOBILE */

/* MOBILE */

@media (max-width:768px){

.vc-content-library{
gap:14px;
}

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

.vc-card-thumb img{
height:120px;
}

.vc-bundle-card .vc-card-thumb{
aspect-ratio:16/9;
}
}

.vc-read {
    position: relative;
    font-weight: 500;
}

.vc-read::before {
    content: "\2714";
    color: #16a34a;
    margin-right: 6px;
    font-weight: bold;
}

.vc-progress-wrap {
    margin: 15px 0 25px;
}

.vc-progress-text::before {
    content: none !important;
}

.vc-progress-text {
    font-size: 18px;
    color: #333;
    margin-bottom: 6px;
    font-weight: bold;

}

.vc-progress-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* icon fix cứng */
.vc-icon::before {
    content: "🎉";
    display: inline-block;
    width: 20px;   /* fix width để không nhảy */
    text-align: center;
}

/* nếu muốn xịn hơn */
.vc-icon {
    font-size: 18px;
    line-height: 1;
}

.vc-completed .vc-progress-text {
    color: #16a34a;
    font-weight: 600;
}

.vc-progress-bar {
    width: 100%;
    height: 18px;
    background: #eee;
    border-radius: 999px;
    overflow: hidden;
}

.vc-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #16a34a);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.vc-item {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

/* hover */
.vc-item:hover {
    background: #f9fafb;
}


/* link */
.vc-item a {
    text-decoration: none;
    color: #111;
    font-size: 16px;
}

.vc-continue-box {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.vc-continue-label::before {
        content: "\1F525"; /* ⏳ 🔥*/
    color: #16a34a;
    margin-right: 6px;
    font-weight: bold;
}

.vc-continue-label {
    font-size: 19px;
    color: #0369a1;
    margin-bottom: 4px;
}

.vc-continue-title {
    font-weight: 600;
    margin-bottom: 10px;
}

.vc-continue-btn {
    display: inline-block;
    background: #2563eb;
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
}


.vc-item.vc-next a::before {
    content: "\1F449";
    margin-right: 6px;
    display: inline-block;
    transform: translateX(0);
    transition: transform 0.2s ease;
}

.vc-next:hover a::before {
    transform: translateX(4px);
}



.vc-continue-btn {
    background: linear-gradient(90deg, #2563eb, #1d4ed8);
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 8px;
    transition: all 0.2s;
}

.vc-continue-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37,99,235,0.3);
}



.vc-content-library {
    max-width: 1140px;
    margin: 0 auto;
}



.vc-content-library {
    display: block !important;
    width: 100%;
}

.vc-locked a {
    
    font-weight: 500;
}

.vc-locked a::before {
    content: "🔒";
    margin-right: 6px;
}

/* default */
.vc-item a {
    font-weight: 600;
}

/* read */
.vc-read {
    font-weight: 500;
}


/* next (override tất cả) */
.vc-item.vc-next {
    background: linear-gradient(90deg, #eaf3fb, #f8fbff);

    padding: 10px 0; /* 👈 QUAN TRỌNG */
    
        transition: all 0.2s ease;


    font-weight: 600;
}


.vc-completed .vc-progress-fill {
    background: linear-gradient(90deg, #22c55e, #16a34a);

}

@keyframes vcPulse {
    0%   { transform: scaleX(1); }
    50%  { transform: scaleX(1.02); }
    100% { transform: scaleX(1); }
}


.vc-animate-once .vc-progress-fill {
    animation: vcPulse 1.2s ease 3;
    animation-fill-mode: forwards;
}

.vc-completed .vc-progress-fill {
    box-shadow: 0 0 10px rgba(34,197,94,0.4);
}

.vc-completed .vc-progress-text {
    color: #16a34a;
    font-weight: 600;
}

.vc-completed .vc-progress-text::before {
    content: "\2714";
    margin-right: 6px;
}

.guten-column-wrapper {
    display: flex !important;
}

.guten-column-wrapper > div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}


body[class*="library"] .addtoany_share_save_container,
body[class*="library"] .addtoany_content,
body[class*="library"] .a2a_kit {
    display: none !important;
}







.vc-congrats-box {
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    text-align: center;
    width: 340px;

    animation: vcPop 0.5s cubic-bezier(.22,1,.36,1);
}

@keyframes vcPop {
    0% {
        transform: scale(0.7) translateY(40px);
        opacity: 0;
    }
    60% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}


.vc-congrats-icon {
    font-size: 42px;
    margin-bottom: 10px;
    animation: bounce 1s infinite alternate;
}

@keyframes bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-6px); }
}



.vc-completed .vc-progress-fill {
    position: relative;
}

.vc-completed .vc-progress-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.3);
animation: shine 2s ease 3;
animation-fill-mode: forwards;}

@keyframes shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}



.vc-badge {
animation: glow 1.5s ease 3;
    
}

@keyframes glow {
    from { box-shadow: 0 0 0 rgba(34,197,94,0); }
    to { box-shadow: 0 0 12px rgba(34,197,94,0.5); }
}


/* remove padding từ guten container chỉ cho library page */
/* kill toàn bộ layout Gutenberg trong library */
body[class*="library"] .entry-content,
body[class*="library"] .wp-block-post-content,
body[class*="library"] .is-layout-flow {

    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body[class*="library"] .section-wrapper,
body[class*="library"] .guten-container,
body[class*="library"] .guten-column,
body[class*="library"] .guten-column-wrapper {

    padding-left: 0 !important;
    margin-left: 0 !important;
}