/* ===== ClipViet brand design system (dùng chung Web / Dashboard / Admin) ===== */
:root {
    --cv-1: #7c3aed;          /* violet */
    --cv-2: #ec4899;          /* pink   */
    --cv-grad: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
    --cv-grad-soft: linear-gradient(135deg, #f5f3ff 0%, #fdf2f8 100%);
    --cv-ink: #1e1b2e;
    --cv-muted: #6b7280;
    --cv-bg: #f7f7fb;
    --cv-card: #ffffff;
    --cv-border: #ece9f3;
    --cv-radius: 14px;
    --cv-shadow: 0 8px 30px rgba(31, 23, 51, .08);
    --cv-shadow-sm: 0 2px 10px rgba(31, 23, 51, .06);
}

* { box-sizing: border-box; }

body {
    font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--cv-ink);
    background: var(--cv-bg);
    margin: 0;
}

a { color: var(--cv-1); text-decoration: none; }
a:hover { color: var(--cv-2); }

.cv-grad-text {
    background: var(--cv-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- Brand wordmark ---- */
.cv-brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.25rem; color: var(--cv-ink) !important; letter-spacing: -.02em; }
.cv-brand .cv-logo { height: 30px; width: auto; display: block; }
.cv-brand:hover { color: var(--cv-ink) !important; }

/* ---- Navbar ---- */
.cv-nav { background: rgba(255,255,255,.85); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--cv-border); position: sticky; top: 0; z-index: 100; }
.cv-nav .nav-link { color: #44405a !important; font-weight: 500; }
.cv-nav .nav-link:hover { color: var(--cv-1) !important; }
.cv-burger { background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--cv-ink); cursor: pointer; padding: .25rem .5rem; }
/* Mobile: khi mở, menu xổ xuống full-width theo cột. Trên desktop .d-md-flex (!important) luôn thắng. */
@media (max-width: 767.98px) {
    .cv-menu { display: flex; width: 100%; flex-direction: column; align-items: stretch; gap: .35rem; padding: .6rem 0 .3rem; }
    .cv-menu .nav-link { padding: .45rem .2rem !important; }
    .cv-menu .btn-cv, .cv-menu .btn-cv-outline { text-align: center; }
}

/* ---- Buttons ---- */
.btn-cv { background: var(--cv-grad); border: none; color: #fff; font-weight: 600; border-radius: 999px; padding: .55rem 1.4rem; box-shadow: var(--cv-shadow-sm); transition: transform .12s ease, box-shadow .12s ease; }
.btn-cv:hover { color: #fff; transform: translateY(-1px); box-shadow: var(--cv-shadow); }
.btn-cv-outline { background: #fff; border: 1.5px solid var(--cv-border); color: var(--cv-ink); font-weight: 600; border-radius: 999px; padding: .5rem 1.3rem; }
.btn-cv-outline:hover { border-color: var(--cv-1); color: var(--cv-1); }

/* ---- Cards / sections ---- */
.cv-card { background: var(--cv-card); border: 1px solid var(--cv-border); border-radius: var(--cv-radius); box-shadow: var(--cv-shadow-sm); }
.cv-section { padding: 5rem 0; }
.cv-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 700; color: var(--cv-2); }

/* ---- Hero ---- */
.cv-hero { background: var(--cv-grad-soft); padding: 5.5rem 0 4.5rem; position: relative; overflow: hidden; }
.cv-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; }
.cv-hero p.lead { font-size: 1.18rem; color: var(--cv-muted); max-width: 38rem; }
.cv-hero .cv-phone { width: 230px; aspect-ratio: 9/16; border-radius: 26px; background: #111; border: 7px solid #1a1a22; box-shadow: 0 30px 60px rgba(31,23,51,.25); overflow: hidden; }
.cv-hero .cv-phone .scene { width: 100%; height: 100%; background: var(--cv-grad); display: grid; place-items: end center; padding-bottom: 18%; }
.cv-hero .cv-phone .cap { background: rgba(0,0,0,.45); color: #fff; padding: .35rem .6rem; border-radius: 8px; font-size: .8rem; max-width: 80%; text-align: center; }

/* ---- Feature tiles ---- */
.cv-feature { padding: 1.5rem; height: 100%; }
.cv-feature .ico { width: 44px; height: 44px; border-radius: 11px; background: var(--cv-grad-soft); color: var(--cv-1); display: grid; place-items: center; font-size: 1.3rem; margin-bottom: .9rem; }

/* ---- Steps ---- */
.cv-step .num { width: 40px; height: 40px; border-radius: 50%; background: var(--cv-grad); color: #fff; font-weight: 700; display: grid; place-items: center; }

/* ---- Pricing ---- */
.cv-price { padding: 2rem 1.6rem; height: 100%; display: flex; flex-direction: column; }
.cv-price.popular { border: 2px solid var(--cv-1); box-shadow: var(--cv-shadow); position: relative; }
.cv-price .tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--cv-grad); color: #fff; font-size: .75rem; font-weight: 700; padding: .25rem .8rem; border-radius: 999px; }
.cv-price .amt { font-size: 2rem; font-weight: 800; }
.cv-price ul { list-style: none; padding: 0; margin: 1rem 0; }
.cv-price li { padding: .35rem 0; color: #4b465c; border-bottom: 1px dashed var(--cv-border); font-size: .95rem; }
.cv-price li::before { content: "✓"; color: var(--cv-1); font-weight: 800; margin-right: .5rem; }

/* ---- App shell (Dashboard / Admin) ---- */
.cv-app { display: flex; min-height: 100vh; }
.cv-side { width: 240px; background: #fff; border-right: 1px solid var(--cv-border); padding: 1rem .8rem; flex-shrink: 0; }
.cv-side .menu a { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: 10px; color: #44405a; font-weight: 500; margin-bottom: .15rem; }
.cv-side .menu a:hover { background: var(--cv-grad-soft); color: var(--cv-1); }
.cv-side .menu a.active { background: var(--cv-grad); color: #fff; }
.cv-main { flex: 1; min-width: 0; }
.cv-topbar { background: #fff; border-bottom: 1px solid var(--cv-border); padding: .7rem 1.5rem; display: flex; align-items: center; justify-content: space-between; }
.cv-content { padding: 1.6rem; }
.cv-stat { padding: 1.2rem 1.4rem; }
.cv-stat .v { font-size: 1.9rem; font-weight: 800; line-height: 1; }
.cv-stat .k { color: var(--cv-muted); font-size: .85rem; margin-top: .3rem; }

.cv-chip { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.cv-chip.ok { background: #ecfdf3; color: #027a48; }
.cv-chip.run { background: #eff8ff; color: #175cd3; }
.cv-chip.warn { background: #fffaeb; color: #b54708; }
.cv-chip.err { background: #fef3f2; color: #b42318; }
.cv-chip.muted { background: #f2f4f7; color: #475467; }

footer.cv-foot { border-top: 1px solid var(--cv-border); color: var(--cv-muted); padding: 2rem 0; background: #fff; }
footer.cv-foot a { color: #44405a; }
footer.cv-foot a:hover { color: var(--cv-1); }

/* ---- Trang pháp lý / nội dung dài (Bảo mật, Điều khoản, Liên hệ) ---- */
.cv-legal { max-width: 52rem; }
.cv-prose { color: #3a3650; line-height: 1.75; }
.cv-prose h2 { font-size: 1.2rem; font-weight: 700; margin: 1.8rem 0 .6rem; color: var(--cv-ink); }
.cv-prose p { margin: 0 0 .9rem; }
.cv-prose ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.cv-prose li { margin: .3rem 0; }
.cv-prose a { color: var(--cv-1); text-decoration: underline; }
.cv-prose a:hover { color: var(--cv-2); }

@media (max-width: 768px) {
    .cv-side { display: none; }
}