@charset "UTF-8";
/* sm-front-page-css */
/**
 * Front Page Optimized Stylesheet
 * Contains cinematic video intro overlay styles and banner subtitle tweaks
 */

.dmaic-intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background-color: #0b0f19;
    overflow: hidden;
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 1;
}

.dmaic-intro-overlay.fade-out {
    opacity: 0;
    transform: scale(1.05);
    pointer-events: none;
}

.dmaic-intro-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dmaic-intro-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: transparent;
}

/* Cinematic Text Reveal (Option 1) */
.dmaic-intro-text-reveal {
    position: absolute;
    top: 66%; /* Positions text elegantly below the logo */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    text-align: center;
    width: 100%;
    pointer-events: none;
}

.dmaic-word {
    font-family: var(--font-display);
    font-size: 2.2rem; /* Adjusted to look like a clean sub-headline */
    font-weight: 700;
    letter-spacing: 14px; /* Spacious spacing */
    color: #ffffff; /* Correct theme solid white color */
    opacity: 0;
    transform: scale(0.95);
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
    filter: blur(6px);
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.25);
}

.dmaic-word.active {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

.dmaic-word.fade-out-word {
    opacity: 0;
    transform: scale(1.03);
    filter: blur(3px);
}

@media (max-width: 767px) {
    .dmaic-intro-text-reveal {
        top: 62%;
    }
    .dmaic-word {
        font-size: 1.4rem;
        letter-spacing: 8px;
    }
}

.dmaic-intro-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0b0f19;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 1;
}

.dmaic-intro-placeholder.hide {
    opacity: 0;
    pointer-events: none;
}

.dmaic-loader {
    width: 250px;
    height: 250px;
    border: 2px solid rgba(255, 255, 255, 0.02);
    border-top: 2px solid var(--accent-secondary, #06b6d4);
    border-radius: 50%;
    animation: dmaic-spin 2.5s linear infinite;
    position: absolute;
}

@keyframes dmaic-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Floating Controls (Option 3) */
.dmaic-intro-controls {
    position: absolute;
    bottom: 40px;
    right: 40px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 15px;
}

.dmaic-intro-audio {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.dmaic-intro-audio:hover {
    background: #ffffff;
    color: #0b0f19;
    border-color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(255, 255, 255, 0.2);
}

.dmaic-intro-skip {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    padding: 13px 26px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    border-radius: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.dmaic-intro-skip:hover {
    background: #ffffff;
    color: #0b0f19;
    border-color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(255, 255, 255, 0.2);
}

.dmaic-intro-skip i {
    font-size: 11px;
    transition: transform 0.3s ease;
}

.dmaic-intro-skip:hover i {
    transform: translateX(3px);
}

@media (max-width: 767px) {
    .dmaic-intro-controls {
        bottom: 30px;
        right: 50%;
        transform: translateX(50%);
        width: auto;
        justify-content: center;
    }
}

/* Pulsing effect for active audio button */
@keyframes dmaic-pulse {
    0% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(6, 182, 212, 0); }
    100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0); }
}

/* ─── Impact Metrics Counter Strip ───────────────────────────────────── */
.sm-metrics-strip {
    position: relative;
    overflow: hidden;
}
.sm-metrics-strip::before,
.sm-metrics-strip::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent-primary, #005eff) 25%, transparent) 30%, color-mix(in srgb, var(--accent-primary, #005eff) 25%, transparent) 70%, transparent 100%);
    z-index: 1;
}
.sm-metrics-strip::before { top: 0; }
.sm-metrics-strip::after  { bottom: 0; }
.sm-metrics-inner {
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0 40px;
    background: var(--bg-primary, #1c1d1f);
}
[data-theme="light"] .sm-metrics-inner {
    background: #f8f9fb;
}
.sm-metric-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    position: relative;
    min-width: 0;
    transition: background 0.25s ease;
}
.sm-metric-cell + .sm-metric-cell::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 1px;
    background: rgba(255,255,255,0.07);
}
[data-theme="light"] .sm-metric-cell + .sm-metric-cell::before {
    background: rgba(0,0,0,0.07);
}
.sm-metric-cell:hover {
    background: rgba(0,94,255,0.04);
}
.sm-metric-cell:hover .sm-metric-value {
    color: var(--accent-primary, #005eff);
}
.sm-metric-number-row {
    display: flex;
    align-items: baseline;
    line-height: 1;
    margin-bottom: 6px;
}
.sm-metric-value {
    font-size: clamp(36px, 4.5vw, 56px);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-primary, #fafafa);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease;
}
[data-theme="light"] .sm-metric-value {
    color: #0f172a;
}
.sm-metric-suffix {
    font-size: clamp(20px, 2.5vw, 30px);
    font-weight: 700;
    color: var(--accent-primary, #005eff);
    line-height: 1;
    margin-left: 2px;
    align-self: flex-start;
    margin-top: 4px;
}
.sm-metric-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.72);
    line-height: 1.4;
    text-align: center;
    max-width: 110px;
}
[data-theme="light"] .sm-metric-label {
    color: rgba(15,23,42,0.72);
}
@media (max-width: 767px) {
    .sm-metrics-inner { flex-wrap: wrap; padding: 0 16px; }
    .sm-metric-cell { flex: 0 0 50%; padding: 28px 16px; }
    .sm-metric-cell:nth-child(1),
    .sm-metric-cell:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.06); }
    [data-theme="light"] .sm-metric-cell:nth-child(1),
    [data-theme="light"] .sm-metric-cell:nth-child(2) { border-bottom-color: rgba(0,0,0,0.06); }
    .sm-metric-cell:nth-child(5) { flex: 0 0 100%; border-bottom: none !important; }
    .sm-metric-cell:nth-child(5)::before { display: none; }
}

/* ─── Light/Dark mode Workspace Image Switcher ───────────────────────── */
.workspace-img-light {
    display: none !important;
}
.workspace-img-dark {
    display: block !important;
}
html[data-theme="light"] .workspace-img-light {
    display: block !important;
}
html[data-theme="light"] .workspace-img-dark {
    display: none !important;
}
/* Không phóng quá cỡ ảnh gốc (đã tính hiệu ứng parallax scale 1.1), giới hạn chiều cao theo màn hình */
.workspace-img-light,
.workspace-img-dark {
    width: auto;
    height: auto;
    max-width: min(100%, 90%);
    max-height: min(680px, 75vh);
    margin-left: auto;
    margin-right: auto;
}

/* ─── Labs Section ───────────────────────────────────────────────────── */
.sm-labs-section {
    position: relative;
    overflow: hidden;
}
.sm-labs-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}
.sm-labs-section::after {
    content: '';
    position: absolute;
    bottom: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 300px;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent-primary, #005eff) 15%, transparent) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.sm-labs-section > .container {
    position: relative;
    z-index: 1;
}

/* Đầu mục: kicker + tiêu đề + mô tả, canh trái ở mọi cỡ màn hình */
.sm-labs-kicker {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-primary, #005eff);
}
.sm-labs-heading {
    letter-spacing: -0.03em;
    text-wrap: balance;
}
.sm-labs-tagline {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 16px 0 0;
    font-weight: 400;
    max-width: 540px;
}
.sm-labs-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent);
    color: var(--text-primary) !important;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, gap 0.25s ease;
}
.sm-labs-all-btn:hover {
    background: var(--accent-primary, #005eff);
    border-color: var(--accent-primary, #005eff);
    color: #fff !important;
    gap: 12px;
}

/* Thẻ sản phẩm: ảnh giao diện thật ở trên, nội dung bên dưới; bấm được cả thẻ (link tiêu đề phủ toàn thẻ) */
.sm-labs-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-secondary, #fff);
    transition: border-color 0.3s ease, box-shadow 0.35s ease, transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.sm-labs-card:hover {
    border-color: color-mix(in srgb, var(--accent-primary, #005eff) 40%, transparent);
    box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--accent-primary, #005eff) 45%, transparent);
    transform: translateY(-4px);
}
.sm-labs-shot {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-primary, #005eff) 14%, transparent), color-mix(in srgb, var(--accent-primary, #005eff) 4%, transparent));
}
.sm-labs-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sm-labs-card:hover .sm-labs-shot img { transform: scale(1.04); }
/* Ảnh bìa (khi chưa công khai sản phẩm): nền gradient thương hiệu + lưới chấm + khung UI gợi ý + icon kính mờ */
.sm-labs-cover {
    --cv-a: #0b1a3a;
    --cv-b: #005eff;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.14) 1px, transparent 0) 0 0 / 18px 18px,
        radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--cv-b) 85%, transparent) 0%, transparent 60%),
        linear-gradient(160deg, var(--cv-a) 0%, color-mix(in srgb, var(--cv-a) 70%, var(--cv-b)) 100%);
}
.sm-labs-cover-2 { --cv-b: #2f6bff; --cv-a: #0a1f45; }
.sm-labs-cover-3 { --cv-b: #4f46e5; --cv-a: #0d1638; }
.sm-labs-cover-ui {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -14%;
    height: 58%;
    border-radius: 12px 12px 0 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02));
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sm-labs-cover-ui i {
    display: block;
    height: 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.16);
}
.sm-labs-cover-ui i:nth-child(1) { width: 38%; background: rgba(190, 255, 1, 0.75); }
.sm-labs-cover-ui i:nth-child(2) { width: 82%; }
.sm-labs-cover-ui i:nth-child(3) { width: 64%; }
.sm-labs-cover-icon {
    position: relative;
    top: -10%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 30px;
    transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.sm-labs-card:hover .sm-labs-cover-ui { transform: translateY(-6px); }
.sm-labs-card:hover .sm-labs-cover-icon { transform: translateY(-4px) scale(1.06); }

/* Trạng thái: chấm tròn + chữ, xanh lá = đang chạy, vàng = thử nghiệm */
.sm-labs-status {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 8px rgba(11, 26, 58, 0.12);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    color: #0b1a3a;
}
.sm-labs-status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f59e0b;
}
.sm-labs-status.is-live::before {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.sm-labs-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 24px 26px 26px;
}
.sm-labs-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.sm-labs-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, #3d8cff 0%, #005eff 60%, #0038a8 100%);
    color: #fff;
    font-size: 15px;
    flex: 0 0 32px;
}
.sm-labs-type {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-secondary);
}
.sm-labs-card-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.sm-labs-card-link {
    color: var(--text-primary) !important;
    text-decoration: none !important;
}
.sm-labs-card-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
.sm-labs-card:hover .sm-labs-card-link { color: var(--accent-primary, #005eff) !important; }
.sm-labs-card-desc {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sm-labs-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
.sm-labs-tech li {
    padding: 3px 9px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Chân thẻ: nút chính (mở công cụ) + link phụ (chi tiết), nằm trên lớp link phủ thẻ */
.sm-labs-card-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: auto;
    padding-top: 22px;
}
.sm-labs-cta-primary,
.sm-labs-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    transition: background 0.25s ease, color 0.25s ease, gap 0.25s ease;
}
.sm-labs-cta-primary {
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--accent-primary, #005eff);
    color: #fff !important;
}
.sm-labs-cta-primary:hover {
    background: #0049c7;
    gap: 9px;
}
.sm-labs-cta-secondary {
    color: var(--text-primary) !important;
}
.sm-labs-cta-secondary:hover {
    color: var(--accent-primary, #005eff) !important;
    gap: 9px;
}
.sm-labs-cta-secondary i { font-size: 15px; }

html[data-theme="dark"] .sm-labs-card { background: color-mix(in srgb, #ffffff 3%, transparent); }
html[data-theme="dark"] .sm-labs-status { background: rgba(11, 18, 32, 0.85); color: #fff; box-shadow: none; }
html[data-theme="dark"] .sm-labs-tech li { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.72); }

/* Mobile: thẻ vuốt ngang, lộ mép thẻ sau để gợi ý còn nội dung */
@media (max-width: 767px) {
    .sm-labs-tagline { font-size: 14px; }
    .sm-labs-grid {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-left: -15px;
        margin-right: -15px;
        padding: 4px 8px 16px;
        --bs-gutter-x: 14px;
    }
    .sm-labs-grid::-webkit-scrollbar { display: none; }
    .sm-labs-grid > .col {
        flex: 0 0 84%;
        max-width: 340px;
        scroll-snap-align: start;
    }
    .sm-labs-body { padding: 20px 20px 22px; }
    .sm-labs-card-title { font-size: 20px; }
    .sm-labs-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sm-labs-card, .sm-labs-shot img, .sm-labs-cover-ui, .sm-labs-cover-icon { transition: none; }
    .sm-labs-card:hover, .sm-labs-card:hover .sm-labs-shot img, .sm-labs-card:hover .sm-labs-cover-ui, .sm-labs-card:hover .sm-labs-cover-icon { transform: none; }
}

/* Nhãn "Lite" cạnh tiêu đề mục phương pháp, cùng kiểu badge ở hero */
.sm-lite-pill {
    display: inline-block;
    vertical-align: 0.35em;
    margin-left: 0.15em;
    padding: 0.16em 0.5em 0.2em;
    border-radius: 999px;
    background: #beff01;
    color: #0b1a3a;
    font-size: 0.42em;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    transform: rotate(-6deg);
    box-shadow: 0 0.12em 0.4em rgba(0, 30, 90, 0.2);
}

/* ─── Hero V5.1: chữ dmaic nền + đường cong DMAIC (mô hình minh hoạ) ─────────
   Màu theo token, light mặc định, dark ghi đè. Logic ở front-page.js (mục 2). */
.sm-h5 {
    --h-bg: #ffffff;
    --h-fg: #0b1220;
    --h-text: #2b3140;
    --h-muted: #5b6270;
    --h-line: rgba(11, 18, 32, 0.12);
    --h-blue: #005eff;
    --h-blue-hover: #1a78ff;
    --h-curve: #005eff;
    --h-glow: rgba(0, 94, 255, 0.45);
    --h-area: rgba(0, 94, 255, 0.22);
    --h-lime: #beff01;
    --h-good: #3f6b00;
    --h-loss: #c23d14;
    --h-loss-soft: rgba(194, 61, 20, 0.10);
    --h-warn: #b26a00;
    --h-l-off: rgba(0, 94, 255, 0.22);
    --h-l-done: rgba(0, 94, 255, 0.38);
    --h-l-on: rgba(0, 94, 255, 0.75);
    --h-f-done: rgba(0, 94, 255, 0.08);
    --h-f-on: rgba(0, 94, 255, 0.16);
    --h-spot: rgba(0, 94, 255, 0.42);
    --h-chip-bg: rgba(255, 255, 255, 0.75);
    --h-tip-bg: #0b1220;
    --h-tip-fg: #ffffff;
    --h-shadow: 0 4px 40px rgba(255, 255, 255, 0.9);
    --h-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    --mx: -999px;
    --my: -999px;
    position: relative;
    overflow: hidden;
    padding: 150px 0 40px;
    background: var(--h-bg);
    color: var(--h-fg);
    font-family: var(--font-primary);
}
html[data-theme="dark"] .sm-h5 {
    --h-bg: #1c1d1f;
    --h-fg: #ffffff;
    --h-text: #e1e3e8;
    --h-muted: #9ea2ac;
    --h-line: rgba(255, 255, 255, 0.12);
    --h-curve: #8fb0ff;
    --h-glow: rgba(77, 124, 255, 0.6);
    --h-area: rgba(47, 107, 255, 0.35);
    --h-lime: #c8f542;
    --h-good: #c8f542;
    --h-loss: #ff9578;
    --h-loss-soft: rgba(255, 122, 89, 0.12);
    --h-warn: #f5b83d;
    --h-l-off: rgba(91, 134, 255, 0.5);
    --h-l-done: #2a4aa8;
    --h-l-on: #4d7cff;
    --h-f-done: #1b2f68;
    --h-f-on: #2a52c4;
    --h-spot: #5b86ff;
    --h-chip-bg: rgba(28, 29, 31, 0.7);
    --h-tip-bg: #f2f3f5;
    --h-tip-fg: #111214;
    --h-shadow: 0 4px 40px rgba(28, 29, 31, 0.9);
}
@keyframes sm-h5-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes sm-h5-spin { to { transform: rotate(360deg); } }
@keyframes sm-h5-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sm-h5-fill { from { background-position: 0 0%; } to { background-position: 0 100%; } }
@keyframes sm-h5-prog { from { width: 0; } to { width: 100%; } }

.sm-h5-mono { font-family: var(--h-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--h-muted); }
.sm-h5-dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--h-lime); animation: sm-h5-float 7s ease-in-out infinite; }
.sm-h5-dot.is-blue { width: 4px; height: 4px; background: var(--h-blue); }

/* Chữ dmaic nền: viền + tô dần theo bước; lớp spotlight lộ ra quanh con trỏ */
.sm-h5-ghost { position: absolute; inset: 0; display: flex; justify-content: center; padding-top: 140px; pointer-events: none; }
.sm-h5-word { font-family: var(--font-primary); font-weight: 800; font-size: clamp(120px, 29vw, 430px); line-height: 0.8; letter-spacing: -0.045em; white-space: nowrap; user-select: none; }
.sm-h5-letter {
    display: inline-block;
    color: transparent;
    -webkit-text-stroke: 2px var(--h-l-off);
    background-image: linear-gradient(to top, var(--h-f-done) 50%, transparent 50%);
    background-size: 100% 200%;
    background-position: 0 0%;
    -webkit-background-clip: text;
    background-clip: text;
}
.sm-h5-letter.is-done { -webkit-text-stroke-color: var(--h-l-done); background-position: 0 100%; }
.sm-h5-letter.is-on { -webkit-text-stroke-color: var(--h-l-on); background-image: linear-gradient(to top, var(--h-f-on) 50%, transparent 50%); background-position: 0 100%; }
.sm-h5-letter.is-on.is-run { animation: sm-h5-fill 3.6s linear both; }
.sm-h5-spot { -webkit-mask-image: radial-gradient(circle 240px at var(--mx) var(--my), #000 0%, transparent 100%); mask-image: radial-gradient(circle 240px at var(--mx) var(--my), #000 0%, transparent 100%); }
.sm-h5-spot .sm-h5-word { color: var(--h-spot); }


.sm-h5-main { position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; padding: 0 44px; display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; }
.sm-h5-title { margin: 0; max-width: 900px; font-family: var(--font-display); font-size: clamp(36px, 5vw, 72px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 600; color: var(--h-fg); text-shadow: var(--h-shadow); text-wrap: balance; }
.sm-h5-lead { margin: 24px 0 0; max-width: 620px; font-size: 17px; line-height: 1.6; color: var(--h-text); text-wrap: balance; text-shadow: var(--h-shadow); }
.sm-h5-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; pointer-events: auto; }
.sm-h5-btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; transition: transform .2s, background-color .2s; }
.sm-h5-btn:hover { transform: translateY(-2px); }
.sm-h5-btn.is-primary { background: var(--h-blue); color: #fff; box-shadow: 0 8px 30px rgba(0, 94, 255, 0.35); }
.sm-h5-btn.is-primary:hover { background: var(--h-blue-hover); color: #fff; }
.sm-h5-btn.is-ghost { border: 1px solid var(--h-line); background: var(--h-chip-bg); color: var(--h-fg); }
.sm-h5-btn.is-ghost:hover { color: var(--h-fg); }

/* Con dấu DMAIC Lite: vòng chữ xoay + vòng tiến độ theo bước */
.sm-h5-sealwrap { position: absolute; z-index: 3; right: 6%; top: 360px; }
.sm-h5-seal { position: relative; display: block; width: 164px; height: 164px; padding: 0; border: 0; border-radius: 50%; background: var(--h-chip-bg); cursor: pointer; transition: transform .35s cubic-bezier(.2, .7, .1, 1); }
.sm-h5-seal:hover { transform: scale(1.07) rotate(-6deg); }
.sm-h5-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sm-h5-ring { animation: sm-h5-spin 24s linear infinite; }
.sm-h5-ring text { font-family: var(--h-mono); font-size: 7.6px; fill: var(--h-muted); }
.sm-h5-progress { transform: rotate(-90deg); }
.sm-h5-progress circle { fill: none; stroke-width: 2.5; }
.sm-h5-progress .is-track { stroke: rgba(190, 255, 1, 0.25); }
.sm-h5-progress .is-bar { stroke: var(--h-lime); stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.65, 0, .25, 1); }
.sm-h5-seal-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 78px; height: 78px; border-radius: 50%; background: var(--h-lime); color: #111214; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 10px 30px rgba(190, 255, 1, 0.3); }
.sm-h5-seal-core b { font-weight: 800; font-size: 23px; letter-spacing: -0.02em; }
.sm-h5-seal-core small { font-family: var(--h-mono); font-size: 9px; margin-top: 4px; }
.sm-h5-pop { position: absolute; z-index: 4; right: 180px; top: 0; width: 270px; text-align: left; background: var(--h-tip-bg); color: var(--h-tip-fg); border-radius: 14px; padding: 14px 16px; font-size: 13px; line-height: 1.5; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); animation: sm-h5-in .45s ease both; }
.sm-h5-pop[hidden] { display: none; }
.sm-h5-pop-note { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(128, 128, 128, 0.35); opacity: .85; }

/* Bước DMAIC + đường cong */
.sm-h5-sec { position: relative; z-index: 2; max-width: 1320px; margin: 40px auto 0; padding: 0 44px; }
.sm-h5-steps { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.sm-h5-step { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--h-line); background: var(--h-chip-bg); color: var(--h-text); font-family: var(--font-primary); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.sm-h5-step:hover { border-color: var(--h-muted); }
.sm-h5-step .sm-h5-mono { font-size: 13px; letter-spacing: 0; color: inherit; font-weight: 500; }
.sm-h5-step[aria-pressed="true"]:not(.sm-h5-auto) { background: var(--h-fg); border-color: var(--h-fg); color: var(--h-bg); }
.sm-h5-prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--h-lime); }
.sm-h5-step.is-run .sm-h5-prog { animation: sm-h5-prog 3.6s linear both; }
.sm-h5-auto { min-width: 44px; padding: 0; justify-content: center; background: transparent; }
.sm-h5-auto .is-play, .sm-h5-auto[aria-pressed="true"] .is-pause { display: none; }
.sm-h5-auto[aria-pressed="true"] .is-play { display: block; }
.sm-h5-desc { margin: 14px auto 0; max-width: 660px; min-height: 45px; text-align: center; font-size: 15px; line-height: 1.5; color: var(--h-text); }
.sm-h5-desc .sm-h5-mono { margin-right: 8px; }
.sm-h5-desc.is-in { animation: sm-h5-in .45s ease both; }

.sm-h5-chart { position: relative; margin-top: 10px; }
.sm-h5-stats { position: absolute; z-index: 1; inset: 34px 0 auto 0; display: flex; justify-content: space-between; gap: 16px; pointer-events: none; }
.sm-h5-stat { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.sm-h5-stat.is-right { align-items: flex-end; text-align: right; }
.sm-h5-big { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--h-fg); }
.sm-h5-big .is-sigma { color: var(--h-curve); }
.sm-h5-big[data-tone="loss"] { color: var(--h-loss); }
.sm-h5-big[data-tone="warn"] { color: var(--h-warn); }
.sm-h5-big[data-tone="good"] { color: var(--h-good); }
.sm-h5-big[data-tone="none"] { color: var(--h-muted); }
.sm-h5-bigrow { display: flex; align-items: center; gap: 10px; }
.sm-h5-chip { align-self: center; line-height: 1; font-family: var(--h-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--h-bg); background: var(--h-muted); border-radius: 4px; padding: 3px 6px; }
.sm-h5-note { font-size: 12px; color: var(--h-muted); }

.sm-h5-curve { position: relative; height: 290px; cursor: crosshair; }
.sm-h5-curve svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sm-h5-curve .is-a0 { stop-color: var(--h-area); }
.sm-h5-curve .is-a1 { stop-color: var(--h-area); stop-opacity: 0; }
.sm-h5-curve .is-t0 { fill: var(--h-loss-soft); }
.sm-h5-curve .is-t1 { fill: var(--h-loss); }
.sm-h5-curve .is-base { stroke: var(--h-line); }
.sm-h5-curve .is-area, .sm-h5-curve .is-tail, .sm-h5-curve .is-glow { transition: opacity .4s; }
.sm-h5-curve .is-glow { fill: none; stroke: var(--h-glow); stroke-width: 8; }
.sm-h5-curve .is-line { fill: none; stroke: var(--h-curve); stroke-width: 2.2; }
.sm-h5-curve .is-lsl { stroke: var(--h-loss); stroke-dasharray: 5 6; }
.sm-h5-lsl { position: absolute; left: 31.67%; top: 0; transform: translateX(-50%); padding: 2px 6px; background: var(--h-bg); font-family: var(--h-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--h-loss); white-space: nowrap; }
.sm-h5-taillbl { position: absolute; left: 15.8%; top: 80%; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--h-loss); white-space: nowrap; transition: font-size .3s, opacity .4s; }
.sm-h5-taillbl.is-strong { font-size: 14px; }
.sm-h5-mark { position: absolute; bottom: 7.7%; width: 1px; border-left: 1px dashed var(--h-curve); opacity: 0; transition: opacity .4s; pointer-events: none; }
.sm-h5-mark.is-mu { border-left-color: var(--h-fg); }
.sm-h5-mark.is-ctl { border-left-color: var(--h-good); }
.sm-h5-mark > span { position: absolute; top: -20px; left: 0; transform: translateX(-50%); font-family: var(--h-mono); font-size: 11px; color: var(--h-curve); white-space: nowrap; }
.sm-h5-mark.is-mu > span { color: var(--h-fg); }
.sm-h5-mark.is-ctl > span { color: var(--h-good); }
.sm-h5-hline, .sm-h5-hdot, .sm-h5-tip { position: absolute; display: none; pointer-events: none; }
.sm-h5-curve.is-hover .sm-h5-hline, .sm-h5-curve.is-hover .sm-h5-hdot, .sm-h5-curve.is-hover .sm-h5-tip { display: block; }
.sm-h5-hline { top: 0; bottom: 7.7%; width: 1px; background: var(--h-muted); opacity: .6; }
.sm-h5-hdot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--h-bg); transform: translate(-50%, -50%); background: var(--h-curve); }
.sm-h5-hdot[data-zone="below"] { background: var(--h-loss); }
.sm-h5-hdot[data-zone="above"] { background: var(--h-good); }
.sm-h5-tip { transform: translate(-50%, -115%); background: var(--h-tip-bg); color: var(--h-tip-fg); border-radius: 10px; padding: 8px 12px; font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
.sm-h5-axis { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; font-family: var(--h-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--h-muted); }

.sm-h5 :focus-visible { outline: 2px solid var(--h-blue); outline-offset: 3px; }
html[data-theme="dark"] .sm-h5 :focus-visible { outline-color: #8fb0ff; }

@media (max-width: 1200px) {
    .sm-h5-sealwrap { position: relative; right: auto; top: auto; width: 164px; margin: 32px auto 0; }
    .sm-h5-pop { right: auto; top: 178px; left: 50%; margin-left: -135px; }
}
@media (max-width: 767px) {
    .sm-h5 { padding: 170px 0 24px; }
    .sm-h5-ghost { padding-top: 150px; }
    .sm-h5-main, .sm-h5-sec { padding: 0 16px; }
    .sm-h5-lead { font-size: 16px; margin-top: 16px; }
    .sm-h5-stats { position: static; margin-top: 18px; }
    .sm-h5-big { font-size: 34px; }
    .sm-h5-note { display: none; }
    .sm-h5-curve { height: 200px; }
    .sm-h5-axis > span:nth-child(2) { display: none; }
    .sm-h5-tip { white-space: normal; width: 200px; }
    .sm-h5-taillbl { left: 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sm-h5-dot, .sm-h5-ring, .sm-h5-pop, .sm-h5-desc.is-in, .sm-h5-letter.is-on.is-run, .sm-h5-step.is-run .sm-h5-prog { animation: none; }
    .sm-h5-btn, .sm-h5-seal, .sm-h5-step, .sm-h5-mark, .sm-h5-progress .is-bar { transition: none; }
    .sm-h5-btn:hover, .sm-h5-seal:hover { transform: none; }
}
/* sm-intro-mascot-css */
/**
 * Intro "Đổi màu" (template-parts/intro-mascot.php). Timeline vào cảnh chạy bằng CSS khi có .is-playing;
 * intro-mascot.js thêm .is-leaving ở 3s (vòng tròn mở, Kè X bay về nút mascot) và lo nút bỏ qua.
 * Không có JS: tự tắt ở 4,3s.
 *
 *   0–0,75s    logo X lắp ráp (3 mảnh bay vào, nảy khi khớp)
 *   0,75–1,3s  X lùi thành phông, Kè X bật ra (co giãn), đang ngụy trang cùng màu xanh sân khấu
 *   1,35–1,9s  sóng xanh chanh quét qua người → màu thật + vòng sáng; chip "mình là Kè X" hiện ở 1,55s
 *   1,9–2,5s   "Soi. Tìm. Thử. Nhân." dập vào từng chữ; dòng giải nghĩa hiện ở 2,2s, đứng yên tới 3s
 *   3–3,65s    trang lộ ra qua vòng tròn mở rộng từ giữa, Kè X thu nhỏ bay về nút mascot góc phải dưới
 */
@property --sm-reveal {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}
@property --sm-hole {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

.sm-intro { display: none; }
.sm-intro.is-playing {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    animation: sm-intro-autoclose 0.4s ease 4.1s forwards;
}
html.sm-intro-lock, html.sm-intro-lock body { overflow: hidden !important; }

/* Sân khấu xanh thương hiệu (cùng ngôn ngữ với ảnh bìa thẻ game) */
.sm-intro-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 42%, rgba(190, 255, 1, 0.16) 0, rgba(190, 255, 1, 0) 32%),
        radial-gradient(rgba(255, 255, 255, 0.12) 1.2px, transparent 1.4px) 0 0 / 22px 22px,
        linear-gradient(135deg, #00287a 0%, #0047c9 45%, #005eff 75%, #3d8cff 100%);
}

.sm-intro-stage {
    --size: min(46vh, 400px, 78vw);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sm-intro-hero {
    position: relative;
    width: var(--size);
    height: var(--size);
}

/* 1. Logo X lắp ráp */
.sm-intro-x {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--size) * 0.62);
    height: auto;
    aspect-ratio: 418 / 482;
    transform: translate(-50%, -50%);
    overflow: visible;
    filter: drop-shadow(0 12px 30px rgba(0, 20, 80, 0.35));
    animation: sm-intro-x-back 0.5s cubic-bezier(.4, 0, .2, 1) 0.75s forwards;
}
.sm-intro-x polygon {
    fill: url(#sm-intro-x-fill);
    stroke: url(#sm-intro-x-fill);
    stroke-width: 10;
    stroke-linejoin: round;
    transform-box: fill-box;
    opacity: 0;
    animation: sm-intro-piece 0.55s cubic-bezier(.25, 1.45, .45, 1) forwards;
}
.sm-intro-x .sm-x-a { --from: translateX(-70%); }
.sm-intro-x .sm-x-b { --from: translate(80%, -80%) rotate(12deg); animation-delay: 0.1s; }
.sm-intro-x .sm-x-c { --from: translate(80%, 80%) rotate(-12deg); animation-delay: 0.18s; }

/* Lớp bọc để bay về nút mascot khi thoát (JS đặt --fx/--fy/--fs theo vị trí nút); tách khỏi animation của mascot */
.sm-intro-fly { position: absolute; inset: 0; }

/* 2. Mascot bật ra, ngụy trang cùng màu sân khấu */
.sm-intro-mascot {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform-origin: 50% 95%;
    animation: sm-intro-pop 0.55s cubic-bezier(.3, 0, .3, 1) 0.75s forwards,
               sm-intro-bounce 0.35s cubic-bezier(.3, 1.6, .5, 1) 1.88s;
}
.sm-intro-mascot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(0 0 2.5% 0); /* ảnh gốc có 1 hàng pixel mờ ở mép dưới */
}
.sm-intro-camo { filter: grayscale(1) sepia(1) hue-rotate(178deg) saturate(3.2) brightness(0.95) contrast(1.05); }

/* 3. Sóng đổi màu: lớp màu thật lộ dần theo đường chéo, viền sóng xanh chanh chạy theo dáng mascot */
.sm-intro-color {
    -webkit-mask-image: linear-gradient(115deg, #000 calc(var(--sm-reveal) - 12%), transparent var(--sm-reveal));
    mask-image: linear-gradient(115deg, #000 calc(var(--sm-reveal) - 12%), transparent var(--sm-reveal));
    animation: sm-intro-reveal 0.55s cubic-bezier(.5, 0, .4, 1) 1.35s forwards;
}
.sm-intro-wave {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 42%, rgba(220, 255, 120, 0.95) 49%, #beff01 50%, transparent 58%) 120% 0 / 300% 100% no-repeat;
    -webkit-mask: var(--mascot) center / 100% 100% no-repeat;
    mask: var(--mascot) center / 100% 100% no-repeat;
    opacity: 0;
    animation: sm-intro-wave 0.55s cubic-bezier(.5, 0, .4, 1) 1.35s;
}
.sm-intro-burst {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.3);
    background: radial-gradient(circle, rgba(190, 255, 1, 0) 40%, rgba(190, 255, 1, 0.55) 62%, rgba(190, 255, 1, 0) 72%);
    opacity: 0;
    animation: sm-intro-burst 0.6s cubic-bezier(.2, .8, .3, 1) 1.6s;
}

/* 4. Bốn bước DMAIC Lite, font như wordmark logo */
.sm-intro-words {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 0.45em;
    margin: 12px 16px 0;
    font-family: var(--font-display);
    font-size: clamp(30px, 3.4vw + 10px, 64px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
/* Theme ép color + -webkit-text-fill-color cho chữ trong nội dung: đặt lại cho intro */
.sm-intro-words,
.sm-intro-words span { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
.sm-intro-words span {
    opacity: 0;
    transform: scale(1.7);
    filter: blur(6px);
    animation: sm-intro-slam 0.3s cubic-bezier(.2, .9, .3, 1.2) forwards;
    animation-delay: calc(1.9s + var(--i) * 0.1s);
}
.sm-intro-words b { color: #beff01 !important; -webkit-text-fill-color: #beff01 !important; }

/* Chip tên nhân vật: hiện đúng lúc Kè X bừng màu */
.sm-intro-chip {
    position: absolute;
    left: 66%;
    top: 6%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 16px 16px 16px 4px;
    background: #ffffff;
    box-shadow: 0 12px 30px -10px rgba(0, 20, 80, 0.55);
    font-family: var(--font-display);
    font-size: clamp(13px, 0.6vw + 9px, 16px);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    color: #0b1a3a !important;
    -webkit-text-fill-color: #0b1a3a !important;
    opacity: 0;
    transform: translateY(10px) scale(0.8);
    transform-origin: 0% 100%;
    animation: sm-intro-chip 0.4s cubic-bezier(.3, 1.5, .5, 1) 1.55s forwards;
}
.sm-intro-chip-wave { display: inline-block; transform-origin: 70% 80%; animation: sm-intro-hand 0.9s ease-in-out 1.85s 1; }
/* Màn hẹp: chip đặt trên đầu mascot cho khỏi tràn mép phải */
@media (max-width: 640px) {
    .sm-intro-chip { left: 50%; top: -4%; transform: translate(-50%, 10px) scale(0.8); transform-origin: 50% 100%; animation-name: sm-intro-chip-center; border-radius: 16px; }
}

/* Dòng giải nghĩa 4 bước */
.sm-intro-tagline {
    max-width: min(560px, 86vw);
    margin: 10px 16px 0;
    text-align: center;
    font-size: clamp(14px, 0.5vw + 11px, 18px);
    font-weight: 500;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.88) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
    opacity: 0;
    transform: translateY(8px);
    animation: sm-intro-rise 0.4s ease-out 2.2s forwards;
}

.sm-intro-skip {
    position: absolute;
    right: 24px;
    bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.sm-intro-skip:hover { color: #fff; border-color: #fff; }

/* 5. Thoát: lỗ hình chữ X ở giữa phóng to, trang lộ ra bên trong (không chớp sáng cả màn hình) */
.sm-intro.is-leaving { pointer-events: none; }
/* Phần tử không có animation: chuyển tiếp thường. Phần tử đang giữ animation (forwards): thay bằng animation rút ra có điểm đầu rõ ràng */
.sm-intro.is-leaving .sm-intro-words,
.sm-intro.is-leaving .sm-intro-skip {
    transition: opacity 0.22s ease, transform 0.45s cubic-bezier(.6, 0, .3, 1);
    opacity: 0;
    transform: scale(1.08);
}
.sm-intro.is-leaving .sm-intro-tagline,
.sm-intro.is-leaving .sm-intro-chip { animation: sm-intro-out 0.22s ease forwards; }
.sm-intro.is-leaving .sm-intro-x { animation: sm-intro-x-out 0.3s ease forwards; }
/* Vòng tròn mở rộng từ giữa sân khấu: trang lộ ra gọn, không còn vạch chéo của lỗ hình chữ X */
.sm-intro.is-leaving .sm-intro-bg {
    -webkit-mask: radial-gradient(circle at 50% 46%, transparent var(--sm-hole), #000 calc(var(--sm-hole) + 1px));
    mask: radial-gradient(circle at 50% 46%, transparent var(--sm-hole), #000 calc(var(--sm-hole) + 1px));
    animation: sm-intro-hole 0.62s cubic-bezier(.6, 0, .3, 1) forwards, sm-intro-fade-out 0.18s ease 0.5s forwards;
}
/* Kè X thu nhỏ, bay về nút mascot; mờ dần ở chặng cuối để nút "nhận" lấy */
.sm-intro.is-leaving .sm-intro-fly {
    transition: transform 0.62s cubic-bezier(.55, 0, .25, 1), opacity 0.16s ease 0.48s;
    transform: translate(var(--fx, 0px), var(--fy, 40vh)) scale(var(--fs, 0.2));
    opacity: 0;
}
.sm-intro.is-skipped { transition: opacity 0.3s ease; opacity: 0; }

@keyframes sm-intro-piece {
    from { opacity: 0; transform: var(--from); }
    40% { opacity: 1; }
    to { opacity: 1; transform: none; }
}
@keyframes sm-intro-x-back { to { transform: translate(-50%, -50%) scale(2.4); opacity: 0.08; filter: none; } }
@keyframes sm-intro-pop {
    0% { opacity: 0; transform: translateY(30%) scale(0.5, 0.35); }
    45% { opacity: 1; transform: translateY(-7%) scale(0.92, 1.1); }
    72% { transform: translateY(0) scale(1.06, 0.94); }
    100% { opacity: 1; transform: none; }
}
@keyframes sm-intro-bounce { 50% { transform: translateY(-3%) scale(1.03); } }
@keyframes sm-intro-reveal { to { --sm-reveal: 125%; } }
@keyframes sm-intro-wave {
    0% { opacity: 1; background-position: 120% 0; }
    85% { opacity: 1; }
    100% { opacity: 0; background-position: -20% 0; }
}
@keyframes sm-intro-burst {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.3); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
}
@keyframes sm-intro-slam { to { opacity: 1; transform: none; filter: none; } }
@keyframes sm-intro-hole {
    0% { --sm-hole: 0px; }
    100% { --sm-hole: 120vmax; }
}
@keyframes sm-intro-chip { to { opacity: 1; transform: none; } }
@keyframes sm-intro-chip-center { to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes sm-intro-rise { to { opacity: 1; transform: none; } }
@keyframes sm-intro-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes sm-intro-x-out {
    from { opacity: 0.08; transform: translate(-50%, -50%) scale(2.4); }
    to { opacity: 0; transform: translate(-50%, -50%) scale(2.7); }
}
@keyframes sm-intro-hand { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(18deg); } 40%, 80% { transform: rotate(-10deg); } }
@keyframes sm-intro-fade-out { to { opacity: 0; } }
@keyframes sm-intro-autoclose { to { opacity: 0; visibility: hidden; } }
/* sm-game-cards-css */
/**
 * Thẻ "Giải pháp minigame chủ lực" (template-parts/game-featured-cards.php): dùng chung trang chủ + /gamification/.
 * Ảnh bìa = hình game vẽ bằng CSS + mascot, đồng bộ màu thương hiệu.
 */
.sm-cover { position: relative; display: block; container-type: inline-size; background:
    radial-gradient(circle at 74% 62%, rgba(190, 255, 1, 0.28) 0, rgba(190, 255, 1, 0) 34%),
    radial-gradient(rgba(255, 255, 255, 0.13) 1.2px, transparent 1.4px) 0 0 / 18px 18px,
    linear-gradient(135deg, #0038a8 0%, #005eff 55%, #3d8cff 100%) !important; }
.sm-cover-mascot { position: absolute; right: 3cqw; bottom: 0; width: auto !important; height: 90% !important; object-fit: contain !important; filter: drop-shadow(0 10px 14px rgba(0, 20, 70, 0.35)); transition: transform .3s; transform-origin: bottom center; }
.sm-game-feature:hover .sm-cover-mascot { transform: scale(1.04) rotate(-2deg); }
.sm-cover-motif { position: absolute; top: 50%; transform: translateY(-50%); }
/* Vòng quay */
.sm-cover-wheel { left: 9cqw; width: 37cqw; aspect-ratio: 1; border-radius: 50%; border: 1.6cqw solid #fff; box-shadow: 0 10px 24px rgba(0, 20, 70, 0.35);
    background: conic-gradient(#beff01 0 45deg, #fff 0 90deg, #7fb0ff 0 135deg, #e8f0ff 0 180deg, #beff01 0 225deg, #fff 0 270deg, #7fb0ff 0 315deg, #e8f0ff 0 360deg); transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.sm-cover-wheel::after { content: ''; position: absolute; inset: 38%; border-radius: 50%; background: #005eff; border: 1cqw solid #fff; }
.sm-cover-wheel i { position: absolute; left: 50%; top: -4.2cqw; width: 5cqw; height: 6cqw; transform: translateX(-50%); background: #beff01; clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
.sm-game-feature:hover .sm-cover-wheel { transform: translateY(-50%) rotate(135deg); }
/* Quiz */
.sm-cover-quiz { left: 7cqw; width: 42cqw; display: flex; flex-direction: column; gap: 2.2cqw; }
.sm-cover-quiz b { display: flex; align-items: center; gap: 2.4cqw; height: 8.6cqw; padding: 0 2cqw; border-radius: 2.4cqw; background: rgba(255, 255, 255, 0.94); box-shadow: 0 6px 14px rgba(0, 20, 70, 0.25); font-size: 3.6cqw; color: #005eff; }
.sm-cover-quiz b::before { content: attr(data-k); flex: none; width: 5cqw; height: 5cqw; border-radius: 50%; background: rgba(0, 94, 255, 0.12); display: flex; align-items: center; justify-content: center; }
.sm-cover-quiz b::after { content: ''; height: 1.4cqw; flex: 1; border-radius: 1cqw; background: rgba(0, 94, 255, 0.18); }
.sm-cover-quiz b.on { background: #beff01; color: #0b1a3a; transform: translateX(3cqw); }
.sm-cover-quiz b.on::before { content: '✓'; background: #0b1a3a; color: #beff01; }
.sm-cover-quiz b.on::after { background: rgba(11, 26, 58, 0.25); }
/* Cào thẻ */
.sm-cover-scratch { left: 7cqw; width: 44cqw; height: 28cqw; margin-top: -14cqw; transform: rotate(-7deg); border-radius: 2.6cqw; background: #fff; box-shadow: 0 12px 26px rgba(0, 20, 70, 0.35); display: flex; align-items: center; padding-left: 4cqw; overflow: hidden; top: 50%; }
.sm-cover-scratch b { font-size: 8.6cqw; line-height: 1; font-weight: 800; color: #005eff; letter-spacing: -0.04em; }
.sm-cover-scratch::after { content: ''; position: absolute; top: 0; bottom: 0; left: 68%; right: 0; background: repeating-linear-gradient(45deg, #c7cfdb 0 6px, #b5bfcd 6px 12px); clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%, 10% 82%, 4% 64%, 12% 46%, 3% 28%, 11% 12%); transition: clip-path .5s; }
.sm-cover-scratch::before { content: ''; position: absolute; right: 4cqw; top: 2.4cqw; width: 6cqw; height: 6cqw; border-radius: 50%; background: #beff01; z-index: 1; box-shadow: 0 0 0 1cqw rgba(190, 255, 1, 0.3); }
.sm-game-feature:hover .sm-cover-scratch::after { clip-path: polygon(60% 0, 100% 0, 100% 100%, 50% 100%, 58% 82%, 52% 64%, 60% 46%, 52% 28%, 58% 12%); }
@media (prefers-reduced-motion: reduce) { .sm-cover *, .sm-cover *::after { transition: none !important; } }
.sm-game-featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sm-game-feature { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); transition: transform .25s, box-shadow .25s; }
.sm-game-feature:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -14px rgba(0, 40, 120, 0.3); }
.sm-game-feature-media { aspect-ratio: 16 / 10; overflow: hidden; background: #eef3ff; }
.sm-game-feature-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-game-feature-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sm-game-feature-label { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #0047c2; background: rgba(0, 94, 255, 0.08); border-radius: 6px; padding: 3px 9px; }
.sm-game-feature h3 { font-size: 22px; line-height: 1.3; margin: 0; }
.sm-game-feature ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sm-game-feature li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.5; color: #4b5563; }
.sm-game-feature li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 2px solid #005eff; border-bottom: 2px solid #005eff; transform: rotate(-45deg); }
.sm-game-feature .btn { margin-top: 8px; align-self: flex-start; text-transform: none; background: #005eff !important; border-color: #005eff !important; color: #fff !important; }
.sm-game-feature .btn:hover { background: #1a78ff !important; border-color: #1a78ff !important; }
html[data-theme="dark"] .sm-game-feature { background: var(--bg-secondary, #151d30); border-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .sm-game-feature li { color: #cbd5e1 !important; }
html[data-theme="dark"] .sm-game-feature-label { color: #9cc2ff; background: rgba(0, 94, 255, 0.18); }
html[data-theme="dark"] .sm-game-feature-media { background: #0f1626; }
@media (max-width: 991px) {
    .sm-game-featured { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(280px, 82%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
    .sm-game-feature { scroll-snap-align: start; }
}