/* =========================================================
   CODEMARKET — Index page styles (ThemeWagon light style)
========================================================= */

/* ---------- Promo top bar ---------- */
.cm-topbar-promo{
    background:#0b1020; color:#e5e7eb; text-align:center;
    font-size:13.5px; padding:9px 16px;
}
.cm-topbar-promo a{
    color:#fff; border:1px solid rgba(255,255,255,.35);
    padding:3px 12px; border-radius:999px; margin-left:10px; font-weight:600;
}
.cm-topbar-promo a:hover{background:rgba(255,255,255,.12);}

/* ---------- Category strip (secondary nav) ---------- */
.cm-catbar{border-bottom:1px solid var(--border); background:#fff;}
.cm-catbar-inner{
    display:flex; align-items:center; gap:22px; flex-wrap:wrap;
    padding:10px 0; font-size:13.5px; font-weight:500;
}
.cm-catbar-inner a{color:var(--muted); transition:color .15s;}
.cm-catbar-inner a:hover{color:var(--text);}
.cm-catbar-bundle{
    margin-left:auto; background:#fef3c7; color:#92400e;
    border:1px solid #fde68a; border-radius:999px;
    padding:5px 14px; font-weight:700; font-size:12.5px;
}

/* ---------- Hero (ThemeWagon purple gradient) ---------- */
.hero-modern{
    position:relative; text-align:center; color:var(--text);
    padding:20px 20px 40px;
    background:#ffffff;
    border-bottom:1px solid var(--border);
    overflow:hidden;
    isolation:isolate;
}
/* Tia sáng xoay từ đỉnh */
.hero-modern::before{
    content:""; position:absolute; top:-45%; left:50%; z-index:0;
    width:130%; height:150%; transform:translateX(-50%);
    background:conic-gradient(from 180deg at 50% 0%,
        rgba(124,58,237,0) 0deg,
        rgba(124,58,237,.18) 60deg,
        rgba(79,70,229,.22) 120deg,
        rgba(124,58,237,.10) 180deg,
        rgba(124,58,237,0) 240deg,
        rgba(79,70,229,.14) 300deg,
        rgba(124,58,237,0) 360deg);
    filter:blur(30px); opacity:.7; pointer-events:none;
    animation:hero-beam-rotate 22s linear infinite;
}
@keyframes hero-beam-rotate{to{transform:translateX(-50%) rotate(360deg);}}

.hero-bg-grid{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:
        linear-gradient(to right, rgba(79,70,229,.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(79,70,229,.06) 1px, transparent 1px);
    background-size:56px 56px;
    mask-image:radial-gradient(circle at 50% 15%, black 25%, transparent 75%);
    -webkit-mask-image:radial-gradient(circle at 50% 15%, black 25%, transparent 75%);
    animation:hero-grid-drift 18s linear infinite;
    transition:transform .35s ease-out;
}
@keyframes hero-grid-drift{
    from{background-position:0 0, 0 0;}
    to{background-position:56px 56px, 56px 56px;}
}

/* ===== Lưới ô vuông tương tác: rê chuột vào ô nào thì ô đó sáng xanh ===== */
.hero-grid-cells{
    position:absolute; inset:0; z-index:1;
    display:grid; justify-content:start; align-content:start;
    pointer-events:none;
    mask-image:radial-gradient(circle at 50% 15%, black 25%, transparent 75%);
    -webkit-mask-image:radial-gradient(circle at 50% 15%, black 25%, transparent 75%);
    transition:transform .35s ease-out;
}
.hero-cell{
    pointer-events:auto; background:transparent;
    transition:background-color .45s ease, box-shadow .45s ease;
}
.hero-cell:hover{
    background:rgba(34,211,238,.30);
    box-shadow:inset 0 0 0 1px rgba(34,211,238,.7), 0 0 22px rgba(34,211,238,.45);
}
/* Cho phép rê chuột xuyên qua vùng chữ để chạm tới ô lưới bên dưới */
.hero-content{pointer-events:none;}
.hero-content a, .hero-content button{pointer-events:auto;}
@media (prefers-reduced-motion: reduce){
    .hero-grid-cells{transition:none;}
    .hero-cell{transition:background-color .2s linear, box-shadow .2s linear;}
}

/* Quầng sáng aurora trôi nổi */
.hero-aurora{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; transition:transform .35s ease-out;}
.aurora-blob{
    position:absolute; border-radius:50%; filter:blur(64px); opacity:.55;
    mix-blend-mode:multiply; will-change:transform;
}
.aurora-blob.blob-1{
    width:420px; height:420px; top:-130px; left:6%;
    background:radial-gradient(circle at 30% 30%, #8b5cf6, transparent 70%);
    animation:blob-float-1 16s ease-in-out infinite;
}
.aurora-blob.blob-2{
    width:380px; height:380px; top:-90px; right:5%;
    background:radial-gradient(circle at 70% 30%, #6366f1, transparent 70%);
    animation:blob-float-2 19s ease-in-out infinite;
}
.aurora-blob.blob-3{
    width:460px; height:460px; top:30px; left:50%; margin-left:-230px;
    background:radial-gradient(circle at 50% 50%, #c084fc, transparent 70%);
    animation:blob-float-3 21s ease-in-out infinite;
}
@keyframes blob-float-1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(45px,55px) scale(1.15);}}
@keyframes blob-float-2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-55px,45px) scale(1.1);}}
@keyframes blob-float-3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(35px,-35px) scale(1.2);}}

/* Hạt sáng bay lên */
.hero-particles{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;}
.hero-particles span{
    position:absolute; bottom:-12px; width:6px; height:6px; border-radius:50%;
    background:radial-gradient(circle, #a78bfa 0%, rgba(167,139,250,0) 70%);
    opacity:0; animation:particle-rise linear infinite;
}
@keyframes particle-rise{
    0%{transform:translateY(0) scale(.6); opacity:0;}
    12%{opacity:.9;}
    88%{opacity:.6;}
    100%{transform:translateY(-480px) scale(1.15); opacity:0;}
}

.hero-content{position:relative; max-width:900px; margin:0 auto; z-index:3; transition:transform .35s ease-out;}

/* Tắt hiệu ứng cho người thiết lập giảm chuyển động */
@media (prefers-reduced-motion: reduce){
    .hero-modern::before, .hero-bg-grid, .aurora-blob,
    .hero-particles span, .hero-title span, .badge-dot{animation:none !important;}
}

.hero-badge{
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 16px; background:#fff;
    border:1px solid var(--border); border-radius:999px;
    font-size:.85rem; font-weight:600; color:var(--accent-dim);
    box-shadow:0 4px 16px rgba(79,70,229,.1); margin-bottom:22px;
}
.badge-dot{width:7px; height:7px; background:var(--accent); border-radius:50%; box-shadow:0 0 8px var(--accent); animation:badge-pulse 1.8s ease-in-out infinite;}
@keyframes badge-pulse{0%,100%{box-shadow:0 0 0 0 rgba(79,70,229,.55);}50%{box-shadow:0 0 0 7px rgba(79,70,229,0);}}

.hero-title{
    font-size:clamp(2.2rem, 5vw, 3.6rem); font-weight:800;
    line-height:1.12; letter-spacing:-1.5px; margin-bottom:18px;
    color:#312e81;
}
.hero-title span{
    background:linear-gradient(100deg, #4f46e5 0%, #7c3aed 28%, #c084fc 50%, #7c3aed 72%, #4f46e5 100%);
    background-size:200% auto;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    animation:title-shimmer 6s linear infinite;
}
@keyframes title-shimmer{to{background-position:200% center;}}
/* ---- Hero title: scramble roi tung -> hop the lai ---- */
.hero-modern{overflow:hidden;}
.hero-title .hc{
    display:inline-block;
    transform:translate(var(--tx,0px),var(--ty,0px)) rotate(var(--rot,0deg)) scale(var(--sc,1));
    opacity:0;
    transition:transform .95s cubic-bezier(.2,.75,.25,1), opacity .55s ease;
    transition-delay:var(--d,0s);
    will-change:transform,opacity;
}
.hero-title.scramble .hc{opacity:1;}
.hero-title.assembled .hc{opacity:1; transform:translate(0,0) rotate(0deg) scale(1);}
.hero-title .hc.hc-grad{
    background:linear-gradient(100deg,#4f46e5 0%,#7c3aed 35%,#c084fc 50%,#7c3aed 65%,#4f46e5 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
}
@media (prefers-reduced-motion: reduce){
    .hero-title .hc{transition:none !important; transform:none !important; opacity:1 !important;}
}
.hero-desc{
    font-size:clamp(1rem, 1.5vw, 1.15rem); color:#475569;
    max-width:660px; margin:0 auto 30px; line-height:1.6;
}
.hero-desc b{color:#0f172a; font-weight:600;}
.hero-actions{display:flex; justify-content:center; gap:14px; margin-bottom:8px; flex-wrap:wrap;}

.btn-hero-primary{
    background:var(--accent); color:#fff; font-weight:700;
    padding:13px 30px; border-radius:10px; text-decoration:none;
    box-shadow:0 10px 24px rgba(79,70,229,.3);
    transition:transform .2s, box-shadow .2s, background .2s;
}
.btn-hero-primary:hover{transform:translateY(-2px); background:var(--accent-dim); color:#fff; box-shadow:0 14px 30px rgba(79,70,229,.4);}
.btn-hero-outline{
    background:#fff; border:1px solid var(--border); color:var(--text);
    font-weight:700; padding:13px 30px; border-radius:10px; text-decoration:none;
    transition:all .2s;
}
.btn-hero-outline:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px);}

/* ===== Hero redesign: clean light hero (kieu anh financial) ===== */
.hero-modern::before,
.hero-bg-grid,
.hero-grid-cells,
.hero-particles,
.hero-aurora{display:none !important;}

.hero-title,
.hero-title span,
.hero-title .hc,
.hero-title .hc.hc-grad{
    -webkit-text-fill-color:#0f1222 !important;
    color:#0f1222 !important;
    background:none !important;
    animation:none !important;
}
.hero-title{
    font-size:clamp(2.4rem, 6vw, 4rem);
    font-weight:700; letter-spacing:-1.5px; line-height:1.1;
    margin-bottom:20px;
}
.hero-desc{color:#4b5563; max-width:560px; margin:0 auto 26px;}

/* Cho phep tuong tac voi form (hero-content dang pointer-events:none) */
.hero-content form,
.hero-content input,
.hero-content .hero-email{pointer-events:auto;}

/* O nhap email + nut trong 1 vien bo tron (giong anh) */
.hero-email{
    display:inline-flex; align-items:center; gap:8px;
    width:min(520px, 94%); margin:6px auto 4px;
    background:#fff; border:1px solid #e5e7eb; border-radius:999px;
    padding:7px 7px 7px 20px;
    box-shadow:0 12px 34px rgba(17,24,39,.09);
}
.hero-email-input{
    flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent;
    font-size:15px; color:#111827;
}
.hero-email-input::placeholder{color:#9ca3af;}
.hero-email-btn{
    flex:0 0 auto; border:0; cursor:pointer;
    background:#2563eb; color:#fff; font-weight:600; font-size:14.5px;
    padding:11px 22px; border-radius:999px;
    transition:background .2s, transform .2s;
}
.hero-email-btn:hover{background:#1d4ed8; transform:translateY(-1px);}

/* Khoi 3D chu thap xep lop: 4 khoi tu ro->mo, to->nho (giong anh) */
.hero-shapes{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.hero-stack{position:absolute; top:50%; width:360px; height:430px; transform:translateY(-50%);}
.hero-stack-left{left:-40px;}
.hero-stack-right{right:-40px; transform:translateY(-50%) scaleX(-1);}
.hs{
    position:absolute; display:block;
    clip-path:polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%);
}
/* 1 = truoc nhat: to nhat, ro nhat, mau trang */
.hs-1{
    width:210px; height:210px; left:46px; top:184px; z-index:4; opacity:1;
    background:radial-gradient(circle at 36% 28%, #ffffff 0%, #eef1f6 52%, #d3d9e4 100%);
    filter:drop-shadow(0 20px 32px rgba(30,41,59,.20));
    transform:rotate(20deg);
}
/* 2 = cam, nho hon, mo nhe */
.hs-2{
    width:176px; height:176px; left:74px; top:84px; z-index:3; opacity:.96;
    background:radial-gradient(circle at 38% 28%, #ffa477 0%, #f2531f 72%);
    filter:blur(2.5px); transform:rotate(-10deg);
}
/* 3 = xanh, nho hon nua, mo hon */
.hs-3{
    width:132px; height:132px; left:18px; top:22px; z-index:2; opacity:.75;
    background:radial-gradient(circle at 38% 28%, #79a6f7 0%, #2f5fd0 72%);
    filter:blur(7px); transform:rotate(14deg);
}
/* 4 = trang mo nhat, nho nhat, mo nhat */
.hs-4{
    width:96px; height:96px; left:132px; top:0; z-index:1; opacity:.5;
    background:radial-gradient(circle at 38% 28%, #ffffff 0%, #ccd4e0 78%);
    filter:blur(12px); transform:rotate(-18deg);
}
@media (max-width:900px){
    .hero-stack-left{left:-120px; transform:translateY(-50%) scale(.62);}
    .hero-stack-right{right:-120px; transform:translateY(-50%) scaleX(-1) scale(.62);}
}
@media (max-width:600px){ .hero-shapes{display:none;} }

/* ===== Hero nen gradient chuyen dong, tron lan nhau (kieu ThemeWagon) ===== */
.hero-shapes{display:none !important;}
.hero-aurora{display:block !important; z-index:0 !important;}
.aurora-blob{filter:blur(90px) !important; opacity:.72 !important; mix-blend-mode:multiply;}
.aurora-blob.blob-1{
    width:680px !important; height:540px !important; top:-170px !important; left:-6% !important;
    background:radial-gradient(circle at 40% 40%, #f9a8d4, transparent 70%) !important;
    animation:hero-mesh-1 17s ease-in-out infinite !important;
}
.aurora-blob.blob-2{
    width:700px !important; height:560px !important; top:-190px !important; right:-8% !important; left:auto !important;
    background:radial-gradient(circle at 60% 40%, #60a5fa, transparent 70%) !important;
    animation:hero-mesh-2 21s ease-in-out infinite !important;
}
.aurora-blob.blob-3{
    width:780px !important; height:600px !important; top:-140px !important; left:50% !important; margin-left:-390px !important;
    background:radial-gradient(circle at 50% 50%, #b58cf0, transparent 70%) !important;
    animation:hero-mesh-3 19s ease-in-out infinite !important;
}
@keyframes hero-mesh-1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(130px,40px) scale(1.15);}}
@keyframes hero-mesh-2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-130px,30px) scale(1.12);}}
@keyframes hero-mesh-3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(0,55px) scale(1.2);}}
.hero-title,.hero-title span,.hero-title .hc,.hero-title .hc.hc-grad{
    -webkit-text-fill-color:#211d63 !important; color:#211d63 !important;
}
.hero-desc{color:#3b3a5a;}
@media (prefers-reduced-motion: reduce){ .aurora-blob{animation:none !important;} }



/* ---------- Trusted-by logos ---------- */
.cm-trusted{padding:34px 0 8px; text-align:center;}
.cm-trusted .cm-trusted-label{
    color:var(--muted); font-size:12.5px; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; margin-bottom:18px;
}
.cm-trusted-marquee{
    overflow:hidden; width:100%;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.cm-trusted-track{
    display:flex; align-items:center; width:max-content;
    animation:cm-marquee 32s linear infinite;
}
.cm-trusted-marquee:hover .cm-trusted-track{animation-play-state:paused;}
.cm-trusted-track span{
    font-family:var(--font-display); font-weight:800; font-size:22px;
    color:#9aa2b1; letter-spacing:-.02em; filter:grayscale(1);
    white-space:nowrap; flex:0 0 auto; margin-right:52px; transition:color .2s;
}
.cm-trusted-track span:hover{color:#475569;}
@keyframes cm-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){.cm-trusted-track{animation:none;}}

/* ---------- Animations ---------- */
@keyframes fadeUp{from{opacity:0; transform:translateY(25px);}to{opacity:1; transform:translateY(0);}}
@keyframes fadeDown{from{opacity:0; transform:translateY(-20px);}to{opacity:1; transform:translateY(0);}}
.animate-fade-down{animation:fadeDown .8s cubic-bezier(.16,1,.3,1) forwards;}
.animate-fade-up{animation:fadeUp .8s cubic-bezier(.16,1,.3,1) forwards; opacity:0;}
.delay-1{animation-delay:.15s;} .delay-2{animation-delay:.3s;} .delay-3{animation-delay:.45s;}

/* ---------- Features section ---------- */
.features-section{padding:64px 20px; text-align:center; border-bottom:1px solid var(--border);}
.features-badge{
    display:inline-flex; padding:6px 16px; background:rgba(79,70,229,.08);
    border:1px solid rgba(79,70,229,.2); border-radius:999px;
    font-size:.85rem; font-weight:600; color:var(--accent); margin-bottom:16px;
}
.features-title{font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; letter-spacing:-1px; margin-bottom:12px;}
.features-subtitle{font-size:1.05rem; color:var(--muted); max-width:600px; margin:0 auto 44px; line-height:1.5;}
.features-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
    gap:20px; max-width:100%; margin:0 auto 40px; text-align:left;
}
.feature-card{
    background:#fff; border:1px solid var(--border); border-radius:16px;
    padding:28px; transition:all .3s cubic-bezier(.4,0,.2,1);
    box-shadow:0 1px 2px rgba(15,23,41,.04);
}
.feature-card:hover{transform:translateY(-6px); border-color:rgba(79,70,229,.4); box-shadow:0 18px 40px -18px rgba(79,70,229,.35);}
.feature-icon{
    width:46px; height:46px; background:rgba(79,70,229,.1);
    border:1px solid rgba(79,70,229,.2); border-radius:12px;
    display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:18px;
}
.feature-card h3{font-size:1.2rem; font-weight:700; margin-bottom:10px;}
.feature-card p{font-size:.92rem; color:var(--muted); line-height:1.6; margin-bottom:18px;}
.feature-link{display:inline-flex; align-items:center; font-size:.9rem; font-weight:600; color:var(--accent); transition:color .2s;}
.feature-link:hover{color:var(--accent-dim); text-decoration:underline;}
.features-cta{margin-top:24px;}
/* ---------- Features Section Design ---------- */
.features-section {
    position: relative;
    padding: 100px 20px;
    text-align: center;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 0.8) 100%);
    border-bottom: 1px solid var(--border, #e2e8f0);
    overflow: hidden;
}

/* Container giới hạn độ rộng */
.features-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Badge trang trí */
.features-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    background: rgba(79, 70, 229, 0.08);
    border: 1px solid rgba(79, 70, 229, 0.2);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent, #4f46e5);
    margin-bottom: 20px;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

.badge-dot {
    width: 6px;
    height: 6px;
    background-color: var(--accent, #4f46e5);
    border-radius: 50%;
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(79, 70, 229, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}

/* Tiêu đề & Subtitle */
.features-title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -1.5px;
    color: #0f172a;
    margin-bottom: 16px;
    line-height: 1.2;
}

.gradient-text {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.features-subtitle {
    font-size: 1.1rem;
    color: var(--muted, #64748b);
    max-width: 640px;
    margin: 0 auto 56px;
    line-height: 1.6;
}

/* Grid layout card */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    text-align: left;
}

/* Thẻ Feature Card */
.feature-card {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 20px;
    padding: 32px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 6px -1px rgba(15, 23, 41, 0.02), 0 2px 4px -2px rgba(15, 23, 41, 0.02);
    overflow: hidden;
}

/* Hiệu ứng ánh sáng nền mờ khi hover */
.feature-card .glow-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 0%), rgba(79, 70, 229, 0.04), transparent 40%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.feature-card:hover {
    transform: translateY(-8px);
    border-color: rgba(79, 70, 229, 0.35);
    box-shadow: 0 20px 35px -10px rgba(79, 70, 229, 0.15), 0 0 1px 1px rgba(79, 70, 229, 0.1);
}

.feature-card:hover .glow-effect {
    opacity: 1;
}

/* Icon box */
.feature-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(124, 58, 237, 0.05) 100%);
    border: 1px solid rgba(79, 70, 229, 0.15);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 22px;
    transition: transform 0.3s ease;
}

.feature-card:hover .feature-icon {
    transform: scale(1.08) rotate(3deg);
}

/* Tiêu đề & nội dung trong card */
.feature-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
    letter-spacing: -0.3px;
}

.feature-card p {
    font-size: 0.95rem;
    color: var(--muted, #64748b);
    line-height: 1.65;
    margin-bottom: 24px;
}

/* Link hành động */
.feature-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent, #4f46e5);
    text-decoration: none;
    transition: all 0.2s ease;
}

.link-icon {
    transition: transform 0.2s ease;
}

.feature-link:hover .link-icon {
    transform: translateX(4px);
}

.feature-link:hover {
    color: #4338ca;
}
/* ---------- Thiết kế Ngăn Tủ (Cabinet Drawer Effect) ---------- */

.features-section {
    padding: 64px 20px;
    text-align: center;
    border-bottom: 1px solid var(--border, #e2e8f0);
    background: #fcfcfd;
}

.features-badge {
    display: inline-flex;
    padding: 6px 16px;
    background: rgba(79, 70, 229, .08);
    border: 1px solid rgba(79, 70, 229, .2);
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--accent, #4f46e5);
    margin-bottom: 16px;
}

.features-title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 12px;
    color: #0f172a;
}

.features-subtitle {
    font-size: 1.05rem;
    color: var(--muted, #64748b);
    max-width: 600px;
    margin: 0 auto 44px;
    line-height: 1.5;
}

/* Lưới bọc các card */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
}

/* Khung chính của tủ - QUAN TRỌNG: overflow: hidden để che phần nội dung bên trong */
.cabinet-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    min-height: 280px;
    overflow: hidden; 
    box-shadow: 0 1px 3px rgba(15, 23, 41, 0.04);
    transition: all 0.35s ease;
}

/* Mặt trước của tủ (thấy đầu tiên) */
.cabinet-front {
    padding: 28px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-icon {
    width: 46px;
    height: 46px;
    background: rgba(79, 70, 229, .1);
    border: 1px solid rgba(79, 70, 229, .2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 18px;
}

.cabinet-front h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #0f172a;
}

.cabinet-front p {
    font-size: .92rem;
    color: var(--muted, #64748b);
    line-height: 1.6;
    margin-bottom: auto; /* Đẩy hint xuống đáy */
}

.cabinet-hint {
    font-size: 0.8rem;
    color: var(--accent, #4f46e5);
    font-weight: 600;
    margin-top: 12px;
    display: inline-block;
}

/* Phần nội dung kéo ra từ ngăn tủ (Drawer) */
.cabinet-drawer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #4f46e5; /* Màu nền khi mở tủ */
    color: #ffffff;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateY(100%); /* Mặc định giấu ở dưới đáy */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cabinet-drawer h4 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #ffffff;
}

.cabinet-drawer p {
    font-size: .9rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: 16px;
}

.cabinet-drawer .feature-link {
    display: inline-flex;
    align-items: center;
    font-size: .9rem;
    font-weight: 600;
    color: #ffffff;
    text-decoration: underline;
}

/* --- HIỆU ỨNG KHI RÊ CHUỘT (MỞ TỦ) --- */
.cabinet-card:hover {
    border-color: var(--accent, #4f46e5);
    box-shadow: 0 16px 30px -10px rgba(79, 70, 229, 0.3);
}

/* Đẩy mặt trước lên trên */
.cabinet-card:hover .cabinet-front {
    transform: translateY(-100%);
}

/* Kéo ngăn tủ (drawer) trồi lên từ dưới */
.cabinet-card:hover .cabinet-drawer {
    transform: translateY(0);
}
/* Đảm bảo khung cha có position: relative */
.cabinet-card {
    position: relative;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    height: 320px; /* Cố định chiều cao để không bị lệch */
    overflow: hidden; /* QUAN TRỌNG: Che giấu nội dung thừa */
    transition: all 0.4s ease;
}

/* Mặt trước: Nằm ở vị trí bình thường */
.cabinet-front {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 28px;
    background: #fff;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

/* Ngăn kéo (Nội dung ẩn): Nằm chồng bên dưới */
.cabinet-drawer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 28px;
    background: #4f46e5; /* Màu nền khi mở */
    color: #fff;
    transform: translateY(100%); /* Đẩy nó xuống dưới để giấu đi */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

/* Hiệu ứng khi rê chuột */
.cabinet-card:hover .cabinet-front {
    transform: translateY(-100%); /* Đẩy mặt trước lên trên và mất đi */
}

.cabinet-card:hover .cabinet-drawer {
    transform: translateY(0); /* Kéo ngăn nội dung trượt lên */
}
/* ---------- Category / section head on listings ---------- */
.cm-category-block{margin-bottom:46px;}
.cm-section-head{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:18px; border-bottom:1px solid var(--border); padding-bottom:12px;
}
.cm-section-head h2{font-size:1.4rem; font-weight:700; margin:0; color:var(--text);}
.cm-section-head .desc a{color:var(--accent); font-weight:600; font-size:.9rem;}
.cm-section-head .desc a:hover{text-decoration:underline;}

/* ---------- Popular searches ---------- */
.cm-popular-searches{margin:8px 0 30px;}
.cm-popular-searches h4{font-size:1rem; font-weight:700; margin:0 0 12px; color:var(--text);}
.cm-tags-list{display:flex; flex-wrap:wrap; gap:10px;}
.cm-tag-pill{
    display:inline-block; padding:7px 16px; border-radius:999px;
    background:#fff; border:1px solid var(--border); color:var(--muted);
    font-size:.85rem; font-weight:500; text-decoration:none; transition:all .2s;
}
.cm-tag-pill:hover{background:var(--accent); color:#fff; border-color:var(--accent); transform:translateY(-2px);}

/* ---------- Code cards grid ---------- */
.grid.cm-code-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}

.card.cm-code-card{
    position:relative; display:flex; flex-direction:column;
    background:#fff; border:1px solid var(--border); border-radius:14px;
    overflow:hidden; text-decoration:none; transition:all .3s cubic-bezier(.25,.8,.25,1);
    box-shadow:0 1px 2px rgba(15,23,41,.04);
}
.card.cm-code-card:hover{transform:translateY(-6px); border-color:rgba(79,70,229,.4); box-shadow:0 18px 40px -18px rgba(79,70,229,.35);}

.cm-code-thumb{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface-2);}
.cm-code-thumb img{width:100%; height:100%; object-fit:contain; transition:transform .4s ease;}
.card.cm-code-card:hover .cm-code-thumb img{transform:scale(1.03);}
.cm-code-noimg{height:100%; display:flex; align-items:center; justify-content:center; font-family:monospace; font-size:.85rem; color:#94a3b8;}

.cm-carousel{position:relative; width:100%; height:100%; overflow:hidden;}
.cm-carousel-inner{display:flex; width:100%; height:100%; transition:transform .4s cubic-bezier(.25,1,.5,1);}
.cm-carousel-inner img{flex:0 0 100%; width:100%; height:100%; object-fit:contain;}
.cm-nav-btn{
    position:absolute; top:50%; transform:translateY(-50%);
    background:rgba(255,255,255,.9); color:#0f172a; border:1px solid var(--border);
    width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:13px; cursor:pointer; z-index:20; box-shadow:0 2px 8px rgba(0,0,0,.15);
    transition:all .2s; opacity:0;
}
.card.cm-code-card:hover .cm-nav-btn{opacity:1;}
.cm-nav-btn:hover{background:var(--accent); color:#fff; border-color:var(--accent); transform:translateY(-50%) scale(1.1);}
.cm-prev{left:8px;} .cm-next{right:8px;}

.badge.cm-badge-code{
    position:absolute; top:12px; right:12px;
    background:#fff; border:1px solid rgba(79,70,229,.3); color:var(--accent);
    font-family:monospace; font-size:.65rem; font-weight:800;
    padding:4px 10px; border-radius:6px; z-index:10; box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.badge.cm-badge-code.cm-badge-free{border-color:rgba(22,163,74,.5); color:var(--accent-2); background:#fff;}

.card.cm-code-card .card-body{padding:16px 16px 18px; display:flex; flex-direction:column; flex-grow:1;}
.card.cm-code-card .card-title{
    color:var(--text); font-size:1rem; font-weight:700; margin-bottom:6px; line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.card.cm-code-card .card-desc{
    color:var(--muted); font-size:.85rem; line-height:1.5; margin-bottom:12px; flex-grow:1;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card.cm-code-card .card-meta{
    display:flex; justify-content:space-between; align-items:center;
    gap:10px; padding-top:14px; border-top:1px solid var(--border);
}
.card.cm-code-card .card-seller{
    display:flex; align-items:center; gap:8px; min-width:0; flex:1;
    color:var(--muted); font-size:.82rem; line-height:1.3;
    overflow-wrap:anywhere; word-break:break-word;
}
.card.cm-code-card .card-seller img{flex-shrink:0; width:24px; height:24px; border-radius:50%; object-fit:cover;}

.cm-code-price, .cm-code-price-free{white-space:nowrap; flex-shrink:0; text-align:right;}
.cm-code-price{font-size:1.1rem; font-weight:800; color:var(--accent);}
.cm-code-price::after{content:' \20AB'; font-size:.8rem; color:var(--muted);}
.cm-code-price-free{font-size:1rem; font-weight:800; color:var(--accent-2);}

/* ---------- Newsletter ---------- */
.cm-newsletter{
    background:linear-gradient(180deg,#f6f4ff 0%, #ffffff 100%);
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
    padding:44px 0;
}
.cm-newsletter-inner{
    display:flex; align-items:center; justify-content:space-between;
    gap:24px; flex-wrap:wrap;
}
.cm-newsletter h3{font-size:1.5rem; font-weight:800; margin:0 0 4px;}
.cm-newsletter p{color:var(--muted); margin:0; font-size:.95rem;}
.cm-newsletter form{display:flex; gap:10px; flex:1; min-width:280px; max-width:460px;}
.cm-newsletter input{flex:1; border-radius:10px;}

/* ---------- Responsive ---------- */
@media (max-width:1024px){.grid.cm-code-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:768px){.grid.cm-code-grid{grid-template-columns:repeat(2,1fr); gap:16px;}}
@media (max-width:560px){
    /* 1 cột — card rộng, dễ đọc giống ảnh */
    .grid.cm-code-grid{grid-template-columns:1fr; gap:16px;}
    .card.cm-code-card{border-radius:16px;}
    .cm-code-thumb{aspect-ratio:16/9;}
    .card.cm-code-card .card-body{padding:16px;}
    .card.cm-code-card .card-title{font-size:1.02rem; -webkit-line-clamp:2;}
    .card.cm-code-card .card-desc{font-size:.86rem; -webkit-line-clamp:2;}
    /* nút carousel luôn hiện trên mobile (không có hover) */
    .card.cm-code-card .cm-nav-btn{opacity:1; width:30px; height:30px;}
    /* meta: cho phép seller xuống dòng, giá luôn bên phải */
    .card.cm-code-card .card-meta{align-items:flex-start;}
    .card.cm-code-card .card-seller{font-size:.85rem;}
    .cm-code-price{font-size:1.15rem;}
}

/* ============================================================
   FIX: Bảng dài tự cuộn ngang trong khung của nó, không kéo giãn
   cả trang (không đụng .container để tránh lặp lỗi max-width cũ).
   ============================================================ */
table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
}
table thead, table tbody{
    display:table;
    width:100%;
    table-layout:auto;
}
table::-webkit-scrollbar,
div[style*="overflow-x:auto"]::-webkit-scrollbar,
div[style*="overflow-x: auto"]::-webkit-scrollbar{
    height:6px;
}
table::-webkit-scrollbar-thumb,
div[style*="overflow-x:auto"]::-webkit-scrollbar-thumb,
div[style*="overflow-x: auto"]::-webkit-scrollbar-thumb{
    background:rgba(15,23,42,.25);
    border-radius:4px;
}
@media (max-width:640px){
    table{ font-size:13px; }
    table th, table td{ padding:8px 10px !important; }
}

/* Fix: .profile-head (avatar + tên + nút hành động) không tự xuống dòng
   trên mobile, làm tràn ngang cả trang (profile.php). */
.profile-head{ flex-wrap:wrap; }
@media (max-width:640px){
    .profile-head{ flex-direction:column; align-items:flex-start; gap:16px; }
    .profile-head > div[style*="margin-left:auto"],
    .profile-head > div[style*="margin-left: auto"]{
        margin-left:0 !important;
        width:100%;
    }
    .profile-head > div[style*="margin-left:auto"] a,
    .profile-head > div[style*="margin-left: auto"] a{
        flex:1;
        text-align:center;
    }
}

/* ============================================================
   FIX MẠNH: cột nội dung trong .dash-layout phải co lại được,
   không để bảng dài đẩy giãn cả trang.
   Nguyên nhân: grid-template-columns:220px 1fr -> track 1fr có
   min-width:auto nên không nhỏ hơn nội dung. Dùng minmax(0,1fr).
   ============================================================ */
.dash-layout{ grid-template-columns:220px minmax(0,1fr) !important; }
@media (max-width:760px){
    .dash-layout{ grid-template-columns:minmax(0,1fr) !important; }
}
.dash-layout > *{ min-width:0; }

/* Khung tự cuộn ngang (ví dụ bảng hosting được bọc div overflow-x:auto)
   không được vượt quá bề ngang khung cha. */
div[style*="overflow-x:auto"], div[style*="overflow-x: auto"]{
    max-width:100%;
    -webkit-overflow-scrolling:touch;
}

/* Chặn cứng: cả trang KHÔNG bao giờ cuộn ngang (navbar không dính
   nên an toàn). Đây là lưới an toàn cuối cùng cho mỏi trang. */
html, body{ max-width:100%; overflow-x:hidden; }
/* === FIX: bo khoang trong lon tren/duoi chu & logo (PC + mobile) === */
.hero-modern{
    padding:86px 20px 22px !important;
    min-height:0 !important;
}
/* =========================================================
   CODEMARKET — Next-Gen Hosting Section (x10 UI/UX)
========================================================= */
.cm-hosting-section {
    position: relative;
    padding-bottom: 20px;
}

/* Tiêu đề section sang trọng */
.cm-sh-badge {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--accent);
    text-transform: uppercase;
    background: rgba(79, 70, 229, 0.08);
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 6px;
    border: 1px solid rgba(79, 70, 229, 0.15);
}

/* Thanh Tabs hiện đại kiểu kính mờ */
.hosting-tabs-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 36px;
}

.hosting-tabs {
    display: inline-flex;
    background: rgba(241, 245, 249, 0.8);
    backdrop-filter: blur(10px);
    padding: 6px;
    border-radius: 16px;
    gap: 8px;
    border: 1px solid var(--border);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.hosting-tab {
    background: transparent;
    border: none;
    padding: 11px 26px;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.hosting-tab:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.5);
}

.hosting-tab.active {
    background: #fff;
    color: var(--accent);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    font-weight: 700;
}

.hosting-panel {
    display: none;
}

.hosting-panel.active {
    display: block;
    animation: fadeInPanel 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInPanel {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Lưới card hosting */
.hosting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 28px;
}

/* Card Hosting Cực Đỉnh */
.hosting-card {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 34px 28px 28px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.04);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
}

/* Họa tiết chấm bi mờ tạo chiều sâu bên trong card */
.hosting-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(79, 70, 229, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.5;
    pointer-events: none;
}

.hosting-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 24px 50px -12px rgba(79, 70, 229, 0.18);
    border-color: rgba(79, 70, 229, 0.4);
}

/* Gói Phổ Biến (Nổi bật nhất với hiệu ứng Glow viền sáng) */
.hosting-card.popular {
    background: linear-gradient(180deg, #ffffff 0%, #f7f5ff 100%);
    border: 2px solid var(--accent);
    box-shadow: 0 15px 40px rgba(79, 70, 229, 0.15);
}

.hosting-card.popular:hover {
    box-shadow: 0 30px 60px -15px rgba(79, 70, 229, 0.3);
}

.hosting-popular-badge {
    position: absolute;
    top: 0;
    right: 28px;
    background: linear-gradient(135deg, var(--accent), #7c3aed);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    padding: 6px 14px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    letter-spacing: 0.06em;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}

.hosting-card-header {
    margin-bottom: 22px;
    position: relative;
    z-index: 1;
}

.hosting-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.hosting-desc {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.55;
    min-height: 44px;
    margin: 0;
}

/* Vùng giá tiền được thiết kế lại bắt mắt */
.hosting-pricing {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 18px 0;
    border-top: 1px dashed rgba(15, 23, 42, 0.1);
    border-bottom: 1px dashed rgba(15, 23, 42, 0.1);
    margin-bottom: 22px;
    background: rgba(255, 255, 255, 0.6);
    margin-left: -28px;
    margin-right: -28px;
    padding-left: 28px;
    padding-right: 28px;
}

.hosting-price-wrap {
    display: flex;
    align-items: baseline;
    color: var(--accent);
}

.hosting-currency {
    font-size: 1.1rem;
    font-weight: 700;
    margin-right: 2px;
}

.hosting-price {
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.hosting-period {
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 500;
    margin-left: 4px;
}

/* Thông số kỹ thuật (Specs) */
.hosting-specs {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 22px;
}

.hosting-spec-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.hosting-spec-item span {
    color: var(--muted);
}

.hosting-spec-item b {
    color: var(--text);
    font-weight: 700;
}

.hosting-spec-item b.ssl-active {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.82rem;
}

/* Danh sách tính năng kèm icon check tròn */
.hosting-features-list {
    position: relative;
    z-index: 1;
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid var(--border);
    padding-top: 18px;
}

.hosting-features-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.89rem;
    color: var(--text);
}

.check-icon {
    width: 20px;
    height: 20px;
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Nút Đăng ký cao cấp kèm hiệu ứng icon */
.hosting-card-footer {
    position: relative;
    z-index: 1;
    margin-top: auto;
}

.hosting-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 20px;
    border-radius: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: all 0.25s ease;
}

.hosting-cta-btn svg {
    transition: transform 0.25s ease;
}

.hosting-cta-btn:hover svg {
    transform: translateX(4px);
}
/* =========================================================
   CODEMARKET — Modern Minimalist & Glass Card Style
========================================================= */

.grid.cm-code-grid-alt {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.cm-alt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.04);
}

.cm-alt-card:hover {
    transform: translateY(-8px);
    border-color: rgba(79, 70, 229, 0.4);
    box-shadow: 0 25px 50px -12px rgba(79, 70, 229, 0.16);
}

/* Thumbnail phong cách mới */
.cm-alt-thumb {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #0f172a;
}

.cm-alt-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.cm-alt-card:hover .cm-alt-thumb img {
    transform: scale(1.05);
}

.cm-alt-noimg {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: monospace;
    font-size: 0.85rem;
    color: #64748b;
    background: #f8fafc;
}

/* Nhóm Badge nổi trên ảnh */
.cm-alt-badge-group {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    pointer-events: none;
}

.cm-alt-badge {
    font-family: monospace;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cm-alt-badge.verified {
    background: rgba(16, 185, 129, 0.9);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.cm-alt-badge.type, .cm-alt-badge.free {
    background: rgba(15, 23, 42, 0.8);
    color: #ffffff;
    margin-left: auto;
}

.cm-alt-badge.free {
    background: rgba(16, 185, 129, 0.9);
}

/* Thân Card */
.cm-alt-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background: #ffffff;
}

.cm-alt-title {
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 6px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -0.2px;
}

.cm-alt-desc {
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.55;
    margin-bottom: 14px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Thống kê nhỏ */
.cm-alt-stats {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: #94a3b8;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #f1f5f9;
}

.cm-alt-stats .rating {
    color: #f59e0b;
    font-weight: 600;
}

/* Phần Footer (Tác giả + Giá) */
.cm-alt-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.cm-alt-seller {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 500;
}

.cm-alt-seller img {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}

.cm-alt-price {
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--accent);
    white-space: nowrap;
}

.cm-alt-price.free {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 1200px) {
    .grid.cm-code-grid-alt { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .grid.cm-code-grid-alt { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 580px) {
    .grid.cm-code-grid-alt { grid-template-columns: 1fr; gap: 16px; }
    .cm-alt-body { padding: 16px; }
}
/* =========================================================
   FIX & STYLE: Nút chuyển ảnh Carousel (Prev / Next)
========================================================= */

/* Đảm bảo khung thumbnail có thể chứa nút định vị tuyệt đối */
.cm-alt-thumb {
    position: relative;
    overflow: hidden;
}

/* Kiểu dáng nút bấm chuyển ảnh */
.cm-alt-thumb .cm-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(6px);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: all 0.25s ease;
    opacity: 0; /* Mặc định ẩn đi để giao diện gọn gàng */
}

/* Khi rê chuột vào card sản phẩm, nút chuyển ảnh sẽ hiện lên mượt mà */
.cm-alt-card:hover .cm-alt-thumb .cm-nav-btn {
    opacity: 1;
}

/* Hiệu ứng khi rê chuột trực tiếp vào nút */
.cm-alt-thumb .cm-nav-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    transform: translateY(-50%) scale(1.1);
}

/* Vị trí nút trái và phải */
.cm-alt-thumb .cm-prev {
    left: 10px;
}

.cm-alt-thumb .cm-next {
    right: 10px;
}

/* Trên thiết bị di động (màn hình cảm ứng), luôn hiển thị nút để dễ bấm */
@media (max-width: 768px) {
    .cm-alt-thumb .cm-nav-btn {
        opacity: 0.9 !important;
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
}
/* =========================================================
   FIX: Hiển thị FULL toàn bộ ảnh không bị cắt (contain)
========================================================= */

.cm-alt-thumb img,
.cm-alt-thumb .cm-carousel-inner img {
    object-fit: contain !important; /* Hiển thị toàn bộ ảnh, không bị cắt xén */
    width: 100%;
    height: 100%;
    background: #0f172a; /* Màu nền lót xung quanh nếu tỷ lệ ảnh không khớp khung */
}

/* Tùy chọn nếu bạn muốn khung hiển thị ảnh cao hơn hoặc rộng hơn để đỡ bị dư nền nhiều,
   có thể giữ nguyên aspect-ratio hoặc chỉnh lại tùy ý: */
/* =========================================================
   HIỆU ỨNG BLUR CHO KHUNG ẢNH FULL (CONTAIN)
========================================================= */

.cm-alt-thumb {
    position: relative;
    overflow: hidden;
    background: #0f172a;
}

/* Tạo lớp nền blur tự động từ chính bức ảnh hiển thị */
.cm-alt-thumb::before {
    content: "";
    position: absolute;
    inset: -20px; /* Tràn ra ngoài một chút để che viền khi bị blur */
    background-image: var(--bg-blur-img, none);
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.65); /* Độ mờ và độ tối nền */
    z-index: 1;
    pointer-events: none;
}

/* Trường hợp dùng cho carousel ảnh */
.cm-alt-thumb .cm-carousel,
.cm-alt-thumb .cm-carousel-inner,
.cm-alt-thumb img,
.cm-alt-noimg {
    position: relative;
    z-index: 2; /* Đẩy ảnh chính lên trên lớp nền blur */
}

/* Đảm bảo ảnh hiển thị đầy đủ, không bị cắt xén */
.cm-alt-thumb img,
.cm-alt-thumb .cm-carousel-inner img {
    object-fit: contain !important;
    width: 100%;
    height: 100%;
    background: transparent !important;
}
/* Khung card với viền đậm hơn và KHÔNG PHÓNG TO khi hover */
.cm-alt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #cbd5e1; /* Tăng độ dày viền lên 2px và màu đậm hơn rõ rệt */
    border-radius: 10px; /* Độ bo tròn nhẹ nhàng (có thể đổi thành 6px hoặc 8px tùy ý) */
    overflow: hidden;
    text-decoration: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease; /* Chỉ chuyển động màu viền và bóng đổ, không dịch chuyển vị trí */
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

/* Khi rê chuột vào: Không nhấc lên (bỏ transform), chỉ đổi màu viền sang màu accent/tím và sáng bóng đổ */
.cm-alt-card:hover {
    transform: none !important; /* Chặn hoàn toàn hiệu ứng phóng to/nhấc lên */
    border-color: var(--accent); /* Đổi sang màu viền chủ đạo */
    box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.15);
}

/* Khớp độ bo tròn của ảnh phía trên theo card */
.cm-alt-thumb {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #0f172a;
    border-top-left-radius: 9px;  /* Sát với border-radius của card */
    border-top-right-radius: 9px; /* Sát với border-radius của card */
}
/* Chặn đứng hiệu ứng phóng to ảnh khi rê chuột vào card */
.cm-alt-card:hover .cm-alt-thumb img,
.cm-alt-card .cm-alt-thumb img {
    transform: none !important;
    transition: none !important;
}