:root {
    /* CHẾ ĐỘ MẶC ĐỊNH: SÁNG SANG TRỌNG (LUXURY LIGHT THEME) */
    --c-bg-page: #F8FAFC;
    --c-bg-card: #FFFFFF;
    --c-bg-elevated: #F1F5F9;
    --c-bg-input: #FFFFFF;
    
    --c-text-primary: #0F172A;
    --c-text-secondary: #475569;
    --c-text-muted: #64748B;
    
    --c-gold-primary: #996515;
    --c-gold-gradient: linear-gradient(135deg, #D4AF37 0%, #B48608 100%);
    --c-gold-bg: rgba(180, 134, 8, 0.07);
    --c-gold-border: rgba(180, 134, 8, 0.35);
    
    --c-border-subtle: #E2E8F0;
    --c-border-card: #CBD5E1;
    
    --c-emerald-safe: #059669;
    --c-emerald-bg: rgba(5, 150, 105, 0.07);
    --c-emerald-border: rgba(5, 150, 105, 0.35);

    --c-amber-caution: #D97706;
    --c-amber-bg: rgba(217, 119, 6, 0.07);
    --c-amber-border: rgba(217, 119, 6, 0.35);

    --c-rose-risk: #E11D48;
    --c-rose-bg: rgba(225, 29, 72, 0.07);
    --c-rose-border: rgba(225, 29, 72, 0.35);

    --card-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.04);
    --nav-bg: rgba(255, 255, 255, 0.88);
    --body-bg-gradient: radial-gradient(circle at 50% 0%, rgba(226, 232, 240, 0.6) 0%, transparent 60%), linear-gradient(to bottom, #F8FAFC, #EDF2F7);

    --font-main: 'Plus Jakarta Sans', -apple-system, sans-serif;
    --font-mono: 'Space Grotesk', monospace, sans-serif;
}

[data-theme="dark"] {
    /* CHẾ ĐỘ TỐI (DARK THEME - TÙY CHỌN) */
    --c-bg-page: #080A10;
    --c-bg-card: #10141E;
    --c-bg-elevated: #161B28;
    --c-bg-input: #080A10;
    
    --c-text-primary: #F8FAFC;
    --c-text-secondary: #94A3B8;
    --c-text-muted: #64748B;
    
    --c-gold-primary: #D4AF37;
    --c-gold-gradient: linear-gradient(135deg, #D4AF37 0%, #AA820A 100%);
    --c-gold-bg: rgba(212, 175, 55, 0.15);
    --c-gold-border: rgba(212, 175, 55, 0.4);
    
    --c-border-subtle: #1E2536;
    --c-border-card: #1E2536;
    
    --c-emerald-safe: #10B981;
    --c-emerald-bg: rgba(16, 185, 129, 0.08);
    --c-emerald-border: rgba(16, 185, 129, 0.35);

    --c-amber-caution: #F59E0B;
    --c-amber-bg: rgba(245, 158, 11, 0.08);
    --c-amber-border: rgba(245, 158, 11, 0.35);

    --c-rose-risk: #F43F5E;
    --c-rose-bg: rgba(244, 63, 94, 0.08);
    --c-rose-border: rgba(244, 63, 94, 0.35);

    --card-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    --nav-bg: rgba(16, 20, 30, 0.88);
    --body-bg-gradient: radial-gradient(circle at 50% 0%, rgba(30, 41, 59, 0.3) 0%, transparent 60%), linear-gradient(to bottom, #080A10, #0B0E17);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--c-bg-page);
    color: var(--c-text-primary);
    font-family: var(--font-main);
    line-height: 1.6;
    min-height: 100vh;
    background-image: var(--body-bg-gradient);
    background-attachment: fixed;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.app-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 1. TOP NAVBAR */
.navbar {
    height: 70px;
    border-bottom: 1px solid var(--c-border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: all 0.3s ease;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-crest {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-crest::before {
    content: '';
    position: absolute;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.45) 0%, rgba(16, 185, 129, 0.3) 50%, transparent 75%);
    filter: blur(8px);
    opacity: 0.65;
    animation: logoAuroralPulse 4s ease-in-out infinite alternate;
    z-index: 0;
    pointer-events: none;
}

@keyframes logoAuroralPulse {
    0% { transform: scale(0.92); opacity: 0.45; filter: blur(6px); }
    100% { transform: scale(1.22); opacity: 0.9; filter: blur(12px); }
}

.brand-crest:hover {
    transform: translateY(-2px) scale(1.08);
}

.brand-logo-img {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    display: block;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.28));
    transition: filter 0.3s ease;
}

.brand-crest:hover .brand-logo-img {
    filter: drop-shadow(0 6px 14px rgba(212, 175, 55, 0.45));
}

.brand-titles {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-family: var(--font-mono);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--c-text-primary);
}

.brand-tag {
    font-size: 9px;
    letter-spacing: 1.2px;
    color: var(--c-gold-primary);
    font-weight: 700;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* NÚT TẢI APP LẤP LÁNH HOÀNG GIA TRÊN NAVBAR (CHỈ HIỂN THỊ MÁY TÍNH) */
.btn-tai-app-navbar {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #DFB743 0%, #F5DE7A 45%, #C99718 80%, #996515 100%);
    color: #0F172A;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    padding: 7px 20px;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.8px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-tai-app-navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 80%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
    transform: skewX(-25deg);
    animation: goldShimmerSweep 3.2s ease-in-out infinite;
    pointer-events: none;
}

.btn-tai-app-navbar:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.55), 0 2px 8px rgba(16, 185, 129, 0.2);
    color: #000000;
}

.btn-tai-app-navbar:active {
    transform: translateY(1px) scale(0.98);
}

/* Ẩn hoàn toàn nút TẢI APP trên điện thoại (<= 640px) */
@media (max-width: 640px) {
    .btn-tai-app-navbar {
        display: none !important;
    }
}

.theme-toggle-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--c-bg-elevated);
    border: 1px solid var(--c-border-subtle);
    color: var(--c-text-secondary);
    font-size: 12px;
    font-family: var(--font-mono);
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s;
}

.theme-toggle-btn:hover {
    border-color: var(--c-gold-border);
    color: var(--c-text-primary);
}

.theme-svg {
    display: block;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}

.theme-toggle-btn:hover .theme-svg {
    transform: rotate(25deg);
    color: #D4AF37;
}

.status-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--c-bg-elevated);
    border: 1px solid var(--c-border-subtle);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--c-text-secondary);
}

@media (max-width: 680px) {
    .status-pill {
        display: none;
    }
}

.status-dot {
    width: 7px;
    height: 7px;
    background-color: var(--c-emerald-safe);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--c-emerald-safe);
}

/* 2. MAIN CONTAINER */
.main-container {
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px 80px;
    flex: 1;
}

/* HERO */
.hero-header {
    text-align: center;
    margin-bottom: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #B8860B;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.35);
    box-shadow: 0 2px 10px rgba(212, 175, 55, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 16px;
    transition: all 0.3s ease;
}

[data-theme="dark"] .hero-badge {
    color: #F5DE7A;
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow: 0 2px 14px rgba(212, 175, 55, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.hero-badge:hover {
    border-color: #D4AF37;
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.28);
    transform: translateY(-1px);
}

.badge-insignia-svg {
    stroke: #D4AF37;
    filter: drop-shadow(0 1px 2px rgba(212, 175, 55, 0.3));
}

.hero-title {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.18;
    margin-bottom: 14px;
    position: relative;
    display: inline-block;
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 40%, #0F172A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
}

[data-theme="dark"] .hero-title {
    background: linear-gradient(135deg, #FFFFFF 0%, #F1F5F9 45%, #CBD5E1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 20px rgba(255, 255, 255, 0.08);
}

/* Luxury platinum light shimmer sweep across title */
.hero-title::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.18) 40%, rgba(255, 255, 255, 0.45) 50%, rgba(16, 185, 129, 0.18) 60%, transparent 100%);
    transform: skewX(-25deg);
    animation: titleShimmerWave 7.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes titleShimmerWave {
    0%, 65% { left: -120%; opacity: 0; }
    75% { opacity: 0.85; }
    92% { left: 190%; opacity: 0.85; }
    100% { left: 190%; opacity: 0; }
}

.hero-desc {
    font-size: 15px;
    color: var(--c-text-secondary);
    max-width: 680px;
    margin: 0 auto 20px;
}

.supported-platforms {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.plat-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-primary);
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-subtle);
    padding: 6px 14px;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: all 0.2s ease;
}

.plat-tag:hover {
    border-color: var(--c-gold-border);
    transform: translateY(-1px);
}

.plat-logo {
    width: 16px;
    height: 16px;
    display: inline-block;
    flex-shrink: 0;
}

/* 3. SEARCH SECTION */
.search-section {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-subtle);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--card-shadow);
    margin-bottom: 30px;
}

.search-box {
    display: flex;
    gap: 12px;
    flex-direction: column;
}

@media (min-width: 720px) {
    .search-box {
        flex-direction: row;
    }
}

.input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--c-bg-input);
    border: 1px solid var(--c-border-card);
    border-radius: 12px;
    padding: 0 16px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.input-wrapper:focus-within {
    border-color: #D4AF37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15), 0 4px 16px rgba(0, 0, 0, 0.06);
}

.input-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    color: #D4AF37;
    opacity: 0.85;
    transition: transform 0.25s ease, color 0.25s ease;
}

.input-wrapper:focus-within .input-icon {
    transform: scale(1.12);
    color: #10B981;
}

.input-wrapper input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    padding: 16px 0;
    color: var(--c-text-primary);
    font-size: 15px;
    font-family: inherit;
}

.input-wrapper input::placeholder {
    color: var(--c-text-muted);
}

.btn-audit {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #DFB743 0%, #F5DE7A 45%, #C99718 80%, #996515 100%);
    color: #0F172A;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 12px;
    padding: 16px 30px;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 10px 24px -4px rgba(212, 175, 55, 0.45), 0 3px 8px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Metallic Gleam Shimmer running diagonally */
.btn-audit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 80%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    transform: skewX(-25deg);
    animation: goldShimmerSweep 3.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes goldShimmerSweep {
    0% { left: -150%; }
    35%, 100% { left: 200%; }
}

.btn-audit:hover {
    transform: translateY(-2px) scale(1.025);
    box-shadow: 0 16px 32px -4px rgba(212, 175, 55, 0.6), 0 6px 14px rgba(16, 185, 129, 0.25), inset 0 1px 0 #FFFFFF;
}

.btn-audit:active {
    transform: translateY(1px) scale(0.99);
    box-shadow: 0 6px 16px -4px rgba(212, 175, 55, 0.35);
}

.btn-audit .btn-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
}

.btn-audit:hover .btn-arrow {
    transform: translateX(3px);
}

.demo-platforms-row {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.demo-label {
    font-size: 12px;
    color: var(--c-text-muted);
    font-weight: 600;
}

.demo-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--c-bg-elevated);
    border: 1px solid var(--c-border-subtle);
    color: var(--c-text-secondary);
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.demo-chip:hover {
    color: var(--c-text-primary);
    border-color: var(--c-gold-border);
    background: var(--c-bg-card);
}

/* 4. LOADING STATE */
.loading-panel {
    text-align: center;
    padding: 50px 20px;
}

.audit-scanner {
    width: 200px;
    height: 4px;
    background: var(--c-border-subtle);
    border-radius: 2px;
    margin: 0 auto 20px;
    overflow: hidden;
    position: relative;
}

.scanner-line {
    width: 60px;
    height: 100%;
    background: var(--c-gold-primary);
    box-shadow: 0 0 12px var(--c-gold-primary);
    position: absolute;
    animation: scan 1.2s infinite ease-in-out;
}

@keyframes scan {
    0% { left: -60px; }
    50% { left: 200px; }
    100% { left: -60px; }
}

.loading-title {
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 1.2px;
    color: var(--c-gold-primary);
}

.loading-subtitle {
    font-size: 13px;
    color: var(--c-text-muted);
    margin-top: 6px;
}

/* 5. CERTIFICATE CARD (AUDIT RESULTS) */
.certificate-card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-gold-border);
    border-radius: 20px;
    padding: 28px;
    box-shadow: var(--card-shadow);
}

.cert-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--c-border-subtle);
    padding-bottom: 18px;
    margin-bottom: 24px;
}

.cert-subtitle {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--c-text-muted);
    display: block;
    margin-bottom: 6px;
}

.cert-platform-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.platform-badge {
    display: inline-flex;
    align-items: center;
    background: var(--c-bg-elevated);
    border: 1px solid var(--c-border-subtle);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.badge-shopee { color: #EE4D2D; border-color: rgba(238, 77, 45, 0.4); }
.badge-tiktok { color: #0F172A; border-color: rgba(15, 23, 42, 0.3); }
[data-theme="dark"] .badge-tiktok { color: #25F4EE; border-color: rgba(37, 244, 238, 0.4); }
.badge-lazada { color: #4B6BFB; border-color: rgba(75, 107, 251, 0.4); }
.badge-tiki { color: #0284C7; border-color: rgba(2, 132, 199, 0.4); }

.mall-badge {
    background: rgba(225, 29, 72, 0.08);
    border: 1px solid rgba(225, 29, 72, 0.35);
    color: #E11D48;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
}

.verified-live-tag {
    font-size: 11px;
    color: var(--c-emerald-safe);
    font-family: var(--font-mono);
    font-weight: 700;
}

.cert-watermark {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--c-gold-primary);
    opacity: 0.6;
    text-transform: uppercase;
}

/* PRODUCT IDENTITY SHOWCASE (HIỂN THỊ ẢNH SHOP THẬT) */
.product-identity-showcase {
    display: grid;
    grid-template-columns: 140px 1fr 120px;
    gap: 20px;
    align-items: center;
    background: var(--c-bg-elevated);
    border: 1px solid var(--c-border-subtle);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .product-identity-showcase {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

.product-image-frame {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--c-bg-card);
    border: 1px solid var(--c-gold-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

@media (max-width: 768px) {
    .product-image-frame {
        margin: 0 auto;
    }
}

.product-real-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.88);
    font-size: 10px;
    font-family: var(--font-mono);
    color: #F8FAFC;
    text-align: center;
    padding: 3px 0;
    border-top: 1px solid var(--c-gold-border);
}

.product-specs {
    flex: 1;
}

.product-fullname {
    font-size: 17px;
    font-weight: 700;
    color: var(--c-text-primary);
    margin-bottom: 12px;
    line-height: 1.4;
}

.specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

@media (max-width: 600px) {
    .specs-grid {
        grid-template-columns: 1fr;
    }
}

.spec-item {
    font-size: 12px;
}

.spec-label {
    color: var(--c-text-muted);
    display: block;
    margin-bottom: 2px;
}

.spec-value {
    color: var(--c-text-primary);
    font-weight: 600;
}

.spec-value.highlight {
    color: var(--c-gold-primary);
}

.font-mono {
    font-family: var(--font-mono);
}

/* SCORE SEAL BOX */
.score-seal-box {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.seal-ring {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    border: 3px solid var(--c-gold-primary);
    background: var(--c-gold-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    box-shadow: 0 4px 15px rgba(180, 134, 8, 0.12);
}

.score-number {
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 700;
    color: var(--c-text-primary);
    line-height: 1;
}

.score-denom {
    font-size: 10px;
    color: var(--c-gold-primary);
    font-family: var(--font-mono);
}

.verdict-banner {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 4px;
}

.banner-safe { background: var(--c-emerald-bg); color: var(--c-emerald-safe); border: 1px solid var(--c-emerald-border); }
.banner-caution { background: var(--c-amber-bg); color: var(--c-amber-caution); border: 1px solid var(--c-amber-border); }
.banner-risk { background: var(--c-rose-bg); color: var(--c-rose-risk); border: 1px solid var(--c-rose-border); }

/* ADVICE PANEL */
.audit-advice-panel {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--c-gold-bg);
    border: 1px solid var(--c-gold-border);
    border-left: 4px solid var(--c-gold-primary);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 24px;
    font-size: 13px;
    color: var(--c-text-primary);
}

.advice-icon {
    font-size: 18px;
}

/* METRICS ROW */
.audit-metrics-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.metric-card {
    background: var(--c-bg-elevated);
    border: 1px solid var(--c-border-subtle);
    padding: 16px;
    border-radius: 12px;
}

.metric-header {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--c-text-muted);
    display: block;
    margin-bottom: 6px;
}

.metric-main {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 700;
    color: var(--c-text-primary);
    margin-bottom: 4px;
}

.font-safe { color: var(--c-emerald-safe); }
.font-gold { color: var(--c-gold-primary); }

.metric-footer {
    font-size: 12px;
    color: var(--c-text-secondary);
}

/* FINDINGS GRID */
.findings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .findings-grid {
        grid-template-columns: 1fr;
    }
}

.finding-column {
    background: var(--c-bg-elevated);
    border: 1px solid var(--c-border-subtle);
    border-radius: 14px;
    padding: 18px;
}

.column-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.column-header h3 {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.8px;
    font-weight: 700;
    color: var(--c-text-primary);
}

.col-sub {
    font-size: 12px;
    color: var(--c-text-muted);
    margin-bottom: 12px;
}

.findings-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.findings-list li {
    font-size: 13px;
    line-height: 1.5;
    padding: 10px 12px;
    border-radius: 8px;
}

.list-defects li {
    background: var(--c-rose-bg);
    border-left: 3px solid var(--c-rose-risk);
    color: #9F1239;
}
[data-theme="dark"] .list-defects li {
    color: #FECDD3;
}

.list-positives li {
    background: var(--c-emerald-bg);
    border-left: 3px solid var(--c-emerald-safe);
    color: #065F46;
}
[data-theme="dark"] .list-positives li {
    color: #A7F3D0;
}

/* ACTIONS */
.cert-footer-strip {
    border-top: 1px solid var(--c-border-subtle);
    padding-top: 20px;
    text-align: center;
}

.footer-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.btn-cert-primary {
    background: var(--c-gold-gradient);
    color: #FFFFFF;
    text-decoration: none;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    padding: 12px 24px;
    border-radius: 8px;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(180, 134, 8, 0.25);
}

.btn-cert-primary:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.btn-cert-secondary {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-card);
    color: var(--c-text-primary);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 13px;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cert-secondary:hover {
    border-color: var(--c-gold-border);
    background: var(--c-bg-elevated);
}

.security-seal {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--c-text-muted);
}

/* =========================================================================
   COMPACT CORPORATE 4-COLUMN FOOTER BANNER (LUXURY LIGHT / DARK COMPATIBLE)
   FULL-WIDTH EDGE-TO-EDGE EXPANDED LAYOUT
   ========================================================================= */
.corporate-footer {
    border-top: 1px solid var(--c-border-subtle);
    background: var(--c-bg-card);
    width: 100%;
    margin-top: 48px;
    padding: 44px 0 26px 0;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    box-sizing: border-box;
}

.footer-inner-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
    width: 100%;
    box-sizing: border-box;
}

.mega-footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
    margin-bottom: 28px;
}

.mega-footer-col {
    display: flex;
    flex-direction: column;
}

.mega-col-title {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: var(--c-text-primary);
    text-transform: uppercase;
    margin-bottom: 14px;
    border-left: 3px solid var(--c-gold-primary);
    padding-left: 8px;
    line-height: 1.2;
}

.mega-col-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mega-col-list li a {
    font-size: 12.5px;
    color: var(--c-text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-block;
    line-height: 1.5;
}

.mega-col-list li a:hover {
    color: var(--c-gold-primary);
    transform: translateX(3px);
}

.mega-item-highlight {
    margin-top: 4px;
}

.mega-item-highlight .btn-appeal-link {
    background: var(--c-gold-bg);
    border: 1px solid var(--c-gold-border);
    color: var(--c-gold-primary);
    font-size: 11px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
}

.mega-item-highlight .btn-appeal-link:hover {
    background: var(--c-gold-primary);
    color: #FFFFFF;
    box-shadow: 0 4px 10px rgba(180, 134, 8, 0.25);
    transform: translateY(-1px);
}

/* Nền tảng đối soát & Chips */
.platform-badges-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.group-sublabel {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--c-text-muted);
    text-transform: uppercase;
}

.platform-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.platform-chip {
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--c-bg-elevated);
    border: 1px solid var(--c-border-subtle);
    color: var(--c-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.platform-chip:hover {
    transform: translateY(-1px);
}

.chip-shopee {
    border-color: rgba(238, 77, 45, 0.3);
    color: #EE4D2D;
    background: rgba(238, 77, 45, 0.05);
}

.chip-tiktok {
    border-color: rgba(15, 23, 42, 0.25);
    color: var(--c-text-primary);
}

.chip-lazada {
    border-color: rgba(15, 20, 110, 0.25);
    color: #0F146E;
    background: rgba(15, 20, 110, 0.04);
}

.chip-tiki {
    border-color: rgba(26, 148, 255, 0.3);
    color: #1A94FF;
    background: rgba(26, 148, 255, 0.05);
}

.chip-tech {
    border-color: var(--c-gold-border);
    color: var(--c-gold-primary);
    background: var(--c-gold-bg);
}

/* Dải Sub-Footer */
.mega-footer-bottom {
    border-top: 1px solid var(--c-border-subtle);
    padding-top: 20px;
}

.footer-copyright-row {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.5px;
    color: var(--c-text-muted);
}

/* =========================================================================
   MOBILE COMPACT FOOTER STRIP (PHƯƠNG ÁN A - CHO ĐIỆN THOẠI <= 640PX)
   ========================================================================= */
.mobile-footer-compact {
    display: none; /* Mặc định ẩn trên Desktop */
}

@media (max-width: 900px) and (min-width: 641px) {
    .mega-footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 640px) {
    .corporate-footer {
        margin-top: 24px;
        padding: 22px 0 18px 0;
    }

    .footer-inner-wrap {
        padding: 0 16px;
    }

    /* Ẩn hoàn toàn 4 cột dài & dòng copyright desktop */
    .mega-footer-grid,
    .mega-footer-bottom {
        display: none !important;
    }

    /* Kích hoạt Chân Trang Tinh Gọn Mobile */
    .mobile-footer-compact {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        text-align: center;
    }

    .mobile-legal-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 6px 8px;
        font-size: 11.5px;
        line-height: 1.6;
    }

    .mobile-legal-links a {
        color: var(--c-text-secondary);
        text-decoration: none;
        font-weight: 600;
        transition: color 0.2s ease;
    }

    .mobile-legal-links a:hover {
        color: var(--c-gold-primary);
    }

    .mobile-legal-links .m-divider {
        color: var(--c-border-subtle);
        font-size: 10px;
    }

    .mobile-actions-row {
        margin: 2px 0;
    }

    .btn-appeal-mobile-compact {
        background: var(--c-gold-bg);
        border: 1px solid var(--c-gold-border);
        color: var(--c-gold-primary);
        font-size: 11px;
        font-weight: 700;
        padding: 5px 14px;
        border-radius: 6px;
        cursor: pointer;
        font-family: inherit;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        transition: all 0.2s ease;
    }

    .btn-appeal-mobile-compact:hover {
        background: var(--c-gold-primary);
        color: #FFFFFF;
    }

    .mobile-platforms-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        margin-top: 2px;
    }

    .m-plat-chip {
        font-size: 10px;
        font-weight: 700;
        padding: 2px 7px;
        border-radius: 4px;
        background: var(--c-bg-elevated);
        border: 1px solid var(--c-border-subtle);
        color: var(--c-text-muted);
    }

    .mobile-copyright-text {
        font-size: 10.5px;
        font-family: var(--font-mono);
        color: var(--c-text-muted);
        letter-spacing: 0.3px;
        margin-top: 2px;
    }
}

/* =========================================================================
   ENTERPRISE LEGAL CENTER & COMPLIANCE PORTAL STYLES (TRANG CON PHÁP LÝ)
   ========================================================================= */
.legal-page-body {
    background: var(--c-bg-page);
    color: var(--c-text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.legal-center-container {
    max-width: 1240px;
    width: 100%;
    margin: 36px auto;
    padding: 0 24px;
    box-sizing: border-box;
    flex: 1;
}

.legal-grid-layout {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 32px;
    align-items: start;
}

/* Legal Sidebar */
.legal-sidebar {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.legal-menu-box {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-subtle);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--card-shadow);
}

.legal-menu-header {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: var(--c-text-muted);
    text-transform: uppercase;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--c-border-subtle);
    display: flex;
    align-items: center;
    gap: 6px;
}

.legal-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.legal-nav-item a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.legal-nav-item a:hover {
    color: var(--c-gold-primary);
    background: var(--c-bg-elevated);
    border-color: var(--c-border-subtle);
    transform: translateX(2px);
}

.legal-nav-item.active a {
    background: var(--c-gold-bg);
    border-color: var(--c-gold-border);
    color: var(--c-gold-primary);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(180, 134, 8, 0.1);
}

.legal-nav-icon {
    font-size: 15px;
    flex-shrink: 0;
}

.legal-help-card {
    background: var(--c-bg-card);
    border: 1px dashed var(--c-gold-border);
    border-radius: 12px;
    padding: 16px 18px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--c-text-secondary);
}

.legal-help-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--c-gold-primary);
    text-transform: uppercase;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Legal Paper Whitepaper Card */
.legal-paper-card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-subtle);
    border-radius: 16px;
    padding: 44px 48px;
    box-shadow: var(--card-shadow);
    position: relative;
    overflow: hidden;
}

.legal-paper-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--c-border-subtle);
}

.legal-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 9999px;
    background: var(--c-gold-bg);
    border: 1px solid var(--c-gold-border);
    color: var(--c-gold-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.legal-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--c-text-primary);
    line-height: 1.35;
    margin: 0 0 12px 0;
    font-family: var(--font-heading);
}

.legal-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: var(--c-text-muted);
}

.legal-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Digital Seal / Verified Stamp */
.legal-seal-stamp {
    flex-shrink: 0;
    width: 90px;
    height: 90px;
    border: 2px dashed var(--c-gold-primary);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--c-gold-primary);
    padding: 6px;
    background: var(--c-gold-bg);
    transform: rotate(-6deg);
    user-select: none;
}

.seal-icon {
    font-size: 16px;
}

.seal-text {
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.15;
    margin-top: 2px;
}

/* Document Content Typography */
.legal-content h2 {
    font-size: 17px;
    font-weight: 800;
    color: var(--c-text-primary);
    margin: 32px 0 14px 0;
    border-left: 3.5px solid var(--c-gold-primary);
    padding-left: 12px;
    line-height: 1.4;
    font-family: var(--font-heading);
}

.legal-content h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-text-primary);
    margin: 20px 0 10px 0;
}

.legal-content p {
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--c-text-secondary);
    margin: 0 0 16px 0;
}

.legal-content strong {
    color: var(--c-text-primary);
    font-weight: 700;
}

.legal-content ul, .legal-content ol {
    margin: 0 0 18px 24px;
    padding: 0;
    color: var(--c-text-secondary);
    font-size: 14.5px;
    line-height: 1.8;
}

.legal-content li {
    margin-bottom: 8px;
}

.legal-callout-box {
    background: var(--c-bg-elevated);
    border-left: 4px solid var(--c-gold-primary);
    border-radius: 0 12px 12px 0;
    padding: 20px 24px;
    margin: 24px 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.legal-callout-box.callout-emerald {
    border-left-color: #10B981;
    background: rgba(16, 185, 129, 0.04);
}

.legal-callout-box p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--c-text-secondary);
}

.legal-action-bar {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--c-border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.btn-print-doc {
    background: var(--c-bg-elevated);
    border: 1px solid var(--c-border-subtle);
    color: var(--c-text-secondary);
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}

.btn-print-doc:hover {
    border-color: var(--c-gold-primary);
    color: var(--c-gold-primary);
}

.btn-legal-back-home {
    background: var(--c-gold-bg);
    border: 1px solid var(--c-gold-border);
    color: var(--c-gold-primary);
    padding: 9px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-legal-back-home:hover {
    background: var(--c-gold-primary);
    color: #FFFFFF;
    box-shadow: 0 4px 10px rgba(180, 134, 8, 0.25);
    transform: translateY(-1px);
}

@media (max-width: 900px) {
    .legal-grid-layout {
        grid-template-columns: 1fr;
    }
    .legal-sidebar {
        position: static;
    }
    .legal-paper-card {
        padding: 28px 24px;
    }
    .legal-seal-stamp {
        display: none;
    }
}
    .footer-copyright-row {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
}

/* =========================================================================
   BEECOST, MUATHONGMINH & LEGIT CHECK ENTERPRISE EXTENSIONS
   ========================================================================= */

/* 1. PRICE RADAR CARD */
.price-radar-card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-card);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--card-shadow);
}

.section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.title-with-badge {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sec-icon {
    font-size: 22px;
}

.sec-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--c-text-primary);
    margin-bottom: 2px;
}

.sec-sub {
    font-size: 12px;
    color: var(--c-text-secondary);
}

.price-verdict-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    letter-spacing: 0.5px;
}

.badge-real-sale {
    background: var(--c-emerald-bg);
    color: var(--c-emerald-safe);
    border: 1px solid var(--c-emerald-border);
}

.badge-fake-sale {
    background: var(--c-rose-bg);
    color: var(--c-rose-risk);
    border: 1px solid var(--c-rose-border);
    animation: pulse 1.5s infinite;
}

.badge-stable {
    background: var(--c-gold-bg);
    color: var(--c-gold-primary);
    border: 1px solid var(--c-gold-border);
}

.price-range-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.12);
    color: var(--c-gold-primary);
    border: 1px dashed var(--c-gold-border);
    letter-spacing: 0.3px;
}

.pmetric-hint {
    font-size: 11px;
    color: #F59E0B;
    margin-top: 4px;
    line-height: 1.3;
    display: block;
}

.price-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.pmetric-item {
    background: var(--c-bg-elevated);
    border: 1px solid var(--c-border-subtle);
    border-radius: 12px;
    padding: 16px;
}

.pmetric-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--c-text-muted);
    display: block;
    margin-bottom: 6px;
}

.pmetric-val {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 800;
    color: var(--c-text-primary);
    margin-bottom: 4px;
}

.pmetric-sub {
    font-size: 11px;
    color: var(--c-text-secondary);
}

.price-chart-wrapper {
    background: var(--c-bg-elevated);
    border: 1px solid var(--c-border-subtle);
    border-radius: 12px;
    padding: 16px;
}

.chart-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 12px;
}

.chart-tag {
    font-weight: 700;
    color: var(--c-text-secondary);
}

.chart-tag-right {
    font-size: 11px;
    color: var(--c-text-muted);
    font-style: italic;
}

.price-chart-svg-box {
    width: 100%;
    height: 160px;
    position: relative;
}

/* 2. FLAW BREAKDOWN (LEGIT CHECK) */
.flaw-breakdown-card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-card);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--card-shadow);
}

.flaw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.flaw-card {
    background: var(--c-bg-elevated);
    border: 1px solid var(--c-border-subtle);
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.flaw-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.flaw-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text-primary);
}

.flaw-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
}

.flaw-tag-pass {
    background: var(--c-emerald-bg);
    color: var(--c-emerald-safe);
    border: 1px solid var(--c-emerald-border);
}

.flaw-tag-check {
    background: var(--c-amber-bg);
    color: var(--c-amber-caution);
    border: 1px solid var(--c-amber-border);
}

.flaw-row {
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 8px;
}

.flaw-row strong {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.row-standard strong { color: var(--c-emerald-safe); }
.row-standard { color: var(--c-text-secondary); }

.row-defect strong { color: var(--c-rose-risk); }
.row-defect { color: var(--c-text-secondary); }

/* 2.5. 5-AXIS TRUST RADAR CARD */
.trust-radar-card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-card);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.radar-metrics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 18px;
}

@media (min-width: 640px) {
    .radar-metrics-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

.radar-metric-item {
    background: var(--c-bg-elevated);
    border: 1px solid var(--c-border-subtle);
    border-radius: 12px;
    padding: 16px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.radar-metric-item:hover {
    transform: translateY(-2px);
    border-color: rgba(212, 175, 55, 0.35);
}

.radar-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.radar-item-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.radar-score-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.radar-score-val {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 800;
    color: var(--c-text-primary);
}

.radar-status-tag {
    font-size: 10px;
    font-weight: 800;
    font-family: var(--font-mono);
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.5px;
}

.radar-tag-emerald { background: rgba(16, 185, 129, 0.15); color: #10B981; }
.radar-tag-amber { background: rgba(245, 158, 11, 0.15); color: #F59E0B; }
.radar-tag-rose { background: rgba(244, 63, 94, 0.15); color: #F43F5E; }

.radar-progress-bar {
    width: 100%;
    height: 7px;
    background: var(--c-border-subtle);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 8px;
}

.radar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.bar-emerald { background: linear-gradient(90deg, #10B981, #34D399); }
.bar-amber { background: linear-gradient(90deg, #F59E0B, #FBBF24); }
.bar-rose { background: linear-gradient(90deg, #E11D48, #FB7185); }

.radar-item-desc {
    font-size: 12px;
    color: var(--c-text-muted);
    line-height: 1.4;
    margin: 0;
}

/* 2.6. TOP COMPLAINTS FROM 1-2 STAR REVIEWS */
.top-complaints-card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-card);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.top-complaints-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 18px;
}

@media (min-width: 768px) {
    .top-complaints-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.complaint-card {
    background: var(--c-bg-elevated);
    border: 1px solid rgba(225, 29, 72, 0.2);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Multi-Tier Review Cards (1 - 5 Sao) */
.complaint-card.card-pos {
    border: 1px solid rgba(16, 185, 129, 0.3);
    background: linear-gradient(180deg, var(--c-bg-elevated) 0%, rgba(16, 185, 129, 0.03) 100%);
}
.complaint-card.card-pos:hover {
    transform: translateY(-2px);
    border-color: rgba(16, 185, 129, 0.65);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.12);
}

.complaint-card.card-neutral {
    border: 1px solid rgba(217, 119, 6, 0.3);
    background: linear-gradient(180deg, var(--c-bg-elevated) 0%, rgba(217, 119, 6, 0.03) 100%);
}
.complaint-card.card-neutral:hover {
    transform: translateY(-2px);
    border-color: rgba(217, 119, 6, 0.65);
    box-shadow: 0 6px 18px rgba(217, 119, 6, 0.12);
}

.complaint-card.card-neg {
    border: 1px solid rgba(225, 29, 72, 0.3);
    background: linear-gradient(180deg, var(--c-bg-elevated) 0%, rgba(225, 29, 72, 0.03) 100%);
}
.complaint-card.card-neg:hover {
    transform: translateY(-2px);
    border-color: rgba(225, 29, 72, 0.65);
    box-shadow: 0 6px 18px rgba(225, 29, 72, 0.12);
}

.complaint-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.complaint-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.complaint-rank {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 800;
    color: #E11D48;
    background: rgba(225, 29, 72, 0.1);
    padding: 3px 8px;
    border-radius: 6px;
}

.complaint-rank.rank-card-pos {
    color: #059669;
    background: rgba(16, 185, 129, 0.12);
}

.complaint-rank.rank-card-neutral {
    color: #D97706;
    background: rgba(217, 119, 6, 0.12);
}

.complaint-rank.rank-card-neg {
    color: #E11D48;
    background: rgba(225, 29, 72, 0.12);
}

.complaint-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--c-text-primary);
    line-height: 1.45;
    margin: 2px 0 0 0;
}

.complaint-freq-row {
    display: flex;
    align-items: center;
}

.complaint-freq {
    font-size: 11px;
    font-weight: 700;
    color: #E11D48;
}

.card-pos .complaint-freq {
    color: #059669;
}

.card-neutral .complaint-freq {
    color: #D97706;
}

.card-neg .complaint-freq {
    color: #E11D48;
}

.complaint-sev {
    font-size: 9px;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 4px;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.sev-pos { 
    background: rgba(16, 185, 129, 0.15); 
    color: #059669; 
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.sev-med { 
    background: rgba(245, 158, 11, 0.15); 
    color: #D97706; 
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.sev-high { 
    background: rgba(225, 29, 72, 0.15); 
    color: #E11D48; 
    border: 1px solid rgba(225, 29, 72, 0.3);
}

.complaint-freq-bar {
    width: 100%;
    height: 4px;
    background: var(--c-border-subtle);
    border-radius: 999px;
    margin-bottom: 12px;
    overflow: hidden;
}

.complaint-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #E11D48, #FB7185);
    border-radius: 999px;
    transition: width 0.5s ease;
}

.complaint-bar-fill.complaint-bar-pos {
    background: linear-gradient(90deg, #059669, #10B981);
}

.complaint-bar-fill.complaint-bar-med {
    background: linear-gradient(90deg, #D97706, #F59E0B);
}

.complaint-bar-fill.complaint-bar-neg {
    background: linear-gradient(90deg, #E11D48, #FB7185);
}

.complaint-quote-box {
    background: rgba(0, 0, 0, 0.03);
    border-left: 3px solid rgba(225, 29, 72, 0.4);
    padding: 10px 12px;
    border-radius: 0 8px 8px 0;
    position: relative;
    font-style: italic;
}

.card-pos .complaint-quote-box {
    border-left-color: #10B981;
}

.card-neutral .complaint-quote-box {
    border-left-color: #D97706;
}

.card-neg .complaint-quote-box {
    border-left-color: #E11D48;
}

[data-theme="dark"] .complaint-quote-box {
    background: rgba(255, 255, 255, 0.03);
}

.quote-icon {
    font-size: 16px;
    color: #E11D48;
    font-family: Georgia, serif;
    line-height: 0;
    margin-right: 4px;
}

.card-pos .quote-icon {
    color: #10B981;
}

.card-neutral .quote-icon {
    color: #D97706;
}

.card-neg .quote-icon {
    color: #E11D48;
}

.quote-text {
    font-size: 12px;
    color: var(--c-text-secondary);
    line-height: 1.45;
    margin: 0 0 8px 0;
}

.quote-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.buyer-verified {
    font-size: 10px;
    font-weight: 700;
    color: #059669;
    font-style: normal;
    display: inline-flex;
    align-items: center;
    background: rgba(16, 185, 129, 0.1);
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.2px;
}

/* 3. COA CERTIFICATE (CHECK CHECK) - LUXURY LIGHT MODE PARCHMENT */
.coa-card {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 55%, #FFFDF7 100%);
    border: 2px solid #D4AF37;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.15), 0 2px 10px rgba(15, 23, 42, 0.04);
    position: relative;
    overflow: hidden;
    color: #0F172A;
}

.coa-card::before {
    content: "AUTHENTICITY COA";
    position: absolute;
    right: -20px;
    bottom: -15px;
    font-family: var(--font-mono);
    font-size: 52px;
    font-weight: 900;
    color: rgba(212, 175, 55, 0.06);
    pointer-events: none;
    letter-spacing: 4px;
}

.coa-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 1.5px dashed rgba(212, 175, 55, 0.4);
    padding-bottom: 16px;
    margin-bottom: 20px;
}

.coa-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.coa-crest {
    display: flex;
    align-items: center;
    justify-content: center;
}

.coa-brand-emblem-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(212, 175, 55, 0.35));
}

.coa-title {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #926C08;
}

.coa-subtitle {
    font-size: 10px;
    letter-spacing: 1px;
    color: #64748B;
    font-weight: 600;
}

.coa-id-tag {
    font-family: var(--font-mono);
    font-size: 12px;
    color: #334155;
    background: #FFFBEB;
    border: 1px solid #D4AF37;
    padding: 6px 14px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(212, 175, 55, 0.1);
}

.coa-id-tag strong {
    color: #926C08;
    font-size: 13px;
    font-weight: 800;
    margin-left: 4px;
}

.coa-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: center;
}

@media (min-width: 680px) {
    .coa-body {
        grid-template-columns: 1fr 140px;
    }
}

.coa-badge-pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 8px 18px;
    border-radius: 999px;
    background: #ECFDF5;
    color: #047857;
    border: 1px solid #10B981;
    margin-bottom: 12px;
}

.coa-desc {
    font-size: 13px;
    line-height: 1.6;
    color: #334155;
    margin-bottom: 16px;
    font-weight: 500;
}

.coa-specs {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 11px;
    color: #64748B;
}

.coa-specs strong {
    color: #0F172A;
}

.coa-qr-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.qr-frame {
    width: 100px;
    height: 100px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.qr-caption {
    font-size: 9px;
    color: #64748B;
    margin-top: 6px;
    letter-spacing: 0.5px;
}

/* Price Radar Empty State & Badge when no 90-day history */
.radar-empty-state {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(212, 175, 55, 0.05);
    border: 1px dashed rgba(212, 175, 55, 0.4);
    border-radius: 12px;
    padding: 18px 22px;
    margin: 12px 0 8px 0;
}

.empty-state-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(212, 175, 55, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.empty-state-content {
    flex: 1;
}

.empty-state-title {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--c-gold-primary);
    margin-bottom: 4px;
}

.empty-state-desc {
    font-size: 12px;
    color: var(--c-text-secondary);
    line-height: 1.5;
}

.badge-no-history {
    background: rgba(148, 163, 184, 0.15) !important;
    color: var(--c-text-secondary) !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
}
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-caption {
    font-size: 10px;
    color: var(--c-text-muted);
    max-width: 110px;
    line-height: 1.3;
}

.btn-cert-dispute {
    background: rgba(225, 29, 72, 0.08);
    color: var(--c-rose-risk);
    border: 1px solid rgba(225, 29, 72, 0.35);
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cert-dispute:hover {
    background: rgba(225, 29, 72, 0.16);
    border-color: var(--c-rose-risk);
    transform: translateY(-1px);
}

.btn-cert-gold {
    background: var(--c-gold-gradient);
    color: #FFFFFF;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(180, 134, 8, 0.25);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-cert-gold:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(180, 134, 8, 0.35);
}

/* NAVBAR ACTION BUTTON */
.nav-action-btn {
    background: var(--c-gold-bg);
    border: 1px solid var(--c-gold-border);
    color: var(--c-gold-primary);
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-action-btn:hover {
    background: rgba(212, 175, 55, 0.18);
    transform: translateY(-1px);
}

/* RECENT AUDITS SECTION */
.recent-audits-section {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--c-border-subtle);
}

.recent-audits-section.hidden {
    display: none !important;
}

.recent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.recent-title {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--c-text-muted);
}

.btn-clear-history {
    background: none;
    border: none;
    font-size: 11px;
    color: var(--c-text-muted);
    cursor: pointer;
    text-decoration: underline;
}

.btn-clear-history:hover {
    color: var(--c-rose-risk);
}

.recent-chips-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.recent-chip {
    background: var(--c-bg-elevated);
    border: 1px solid var(--c-border-subtle);
    padding: 6px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    font-size: 12px;
}

.recent-chip:hover {
    border-color: var(--c-gold-primary);
    background: var(--c-bg-card);
}

.recent-chip-thumb {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    object-fit: cover;
}

.recent-chip-score {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

/* CROSS-PLATFORM PRICE MATCH */
.cross-compare-card {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed var(--c-border-card);
}

.cross-platform-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.cross-btn {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-subtle);
    border-radius: 10px;
    padding: 10px 14px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s;
}

.cross-btn:hover {
    border-color: var(--c-gold-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.cross-btn-text {
    font-size: 12px;
    font-weight: 700;
    color: var(--c-text-primary);
}

.cross-btn-arrow {
    color: var(--c-gold-primary);
    font-weight: 800;
}

/* BOOKMARKLET MODAL */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.modal-card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-gold-primary);
    border-radius: 20px;
    max-width: 500px;
    width: 100%;
    padding: 26px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    animation: modalIn 0.2s ease-out;
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.modal-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--c-text-primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--c-text-muted);
}

.modal-desc {
    font-size: 13px;
    line-height: 1.5;
    color: var(--c-text-secondary);
    margin-bottom: 20px;
}

.bookmarklet-box {
    background: var(--c-bg-elevated);
    border: 1.5px dashed var(--c-gold-primary);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.step-guide {
    font-size: 12px;
    color: var(--c-text-secondary);
    margin-bottom: 12px;
}

.btn-drag-bookmarklet {
    display: inline-block;
    background: var(--c-gold-gradient);
    color: #FFFFFF;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 14px;
    padding: 12px 24px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(180, 134, 8, 0.35);
    cursor: grab;
    transition: all 0.2s;
}

.btn-drag-bookmarklet:hover {
    filter: brightness(1.1);
    transform: scale(1.03);
}

.instructions-steps {
    font-size: 12px;
    line-height: 1.6;
    color: var(--c-text-muted);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.instructions-steps code {
    background: var(--c-bg-elevated);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    color: var(--c-gold-primary);
}

.hidden {
    display: none !important;
}

/* ==========================================================================
   6. TRUST VAULT & BLACKLIST STYLES (SỔ ĐEN GIAN HÀNG)
   ========================================================================== */

/* Navbar Button */
.btn-vault-pill {
    background: rgba(225, 29, 72, 0.08) !important;
    border-color: rgba(225, 29, 72, 0.3) !important;
    color: #e11d48 !important;
    font-weight: 700;
}

[data-theme="dark"] .btn-vault-pill {
    background: rgba(225, 29, 72, 0.15) !important;
    border-color: rgba(225, 29, 72, 0.4) !important;
    color: #fb7185 !important;
}

.btn-vault-pill:hover {
    background: rgba(225, 29, 72, 0.18) !important;
    border-color: #e11d48 !important;
    transform: translateY(-1px);
}

.vault-pulse-icon {
    animation: vaultPulse 2.4s infinite ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #e11d48;
}

.vault-icon-svg {
    display: block;
}

@keyframes vaultPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
    50% { transform: scale(1.15); filter: drop-shadow(0 0 6px rgba(225, 29, 72, 0.45)); }
}

/* Blacklist Live Ticker Bar */
.blacklist-ticker-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(225, 29, 72, 0.04);
    border: 1.5px solid rgba(225, 29, 72, 0.42);
    border-radius: 10px;
    padding: 7px 16px 7px 10px;
    margin: 16px auto 0;
    max-width: 720px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(225, 29, 72, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .blacklist-ticker-bar {
    background: rgba(225, 29, 72, 0.08);
    border-color: rgba(244, 63, 94, 0.45);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.blacklist-ticker-bar:hover {
    background: rgba(225, 29, 72, 0.07);
    border-color: #E11D48;
    transform: translateY(-1.5px);
    box-shadow: 0 6px 18px rgba(225, 29, 72, 0.16);
}

.ticker-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    white-space: nowrap;
    background: linear-gradient(135deg, #E11D48 0%, #BE123C 100%);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 800;
    font-family: var(--font-mono);
    letter-spacing: 0.6px;
    padding: 5px 12px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(190, 18, 60, 0.3);
}

.ticker-track {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text-primary);
    padding: 0 4px;
}

.ticker-arrow {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: #E11D48;
    white-space: nowrap;
    transition: transform 0.2s ease, color 0.2s ease;
}

.blacklist-ticker-bar:hover .ticker-arrow {
    transform: translateX(3px);
    color: #BE123C;
}

/* High Priority Blacklist Alert Banner (Inside Result Card) */
.blacklist-alert-card {
    display: flex;
    gap: 18px;
    background: linear-gradient(135deg, rgba(225, 29, 72, 0.12), rgba(225, 29, 72, 0.04));
    border: 2px solid #e11d48;
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 24px;
    box-shadow: 0 8px 24px rgba(225, 29, 72, 0.15);
    animation: alertPulseBorder 3s infinite alternate;
}

@keyframes alertPulseBorder {
    0% { border-color: #e11d48; box-shadow: 0 0 15px rgba(225, 29, 72, 0.2); }
    100% { border-color: #f43f5e; box-shadow: 0 0 25px rgba(244, 63, 94, 0.4); }
}

.bl-alert-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bl-alert-icon {
    font-size: 36px;
    animation: vaultPulse 1.5s infinite;
}

.bl-alert-content {
    flex: 1;
}

.bl-alert-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.bl-alert-badge {
    background: #e11d48;
    color: #FFFFFF;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.8px;
}

.bl-alert-count {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: #e11d48;
    background: rgba(225, 29, 72, 0.1);
    padding: 3px 8px;
    border-radius: 4px;
}

.bl-alert-title {
    font-size: 16px;
    font-weight: 800;
    color: #e11d48;
    margin: 0 0 6px 0;
}

.bl-alert-desc {
    font-size: 13px;
    line-height: 1.5;
    color: var(--c-text-primary);
    margin: 0 0 10px 0;
}

.bl-alert-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bl-flag-pill {
    background: rgba(225, 29, 72, 0.1);
    border: 1px solid rgba(225, 29, 72, 0.3);
    color: #e11d48;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}

/* Blacklist & Trust Vault Modal */
.modal-vault-card {
    max-width: 860px !important;
    width: 95% !important;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.modal-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vault-modal-crest {
    font-size: 32px;
}

.modal-subtitle {
    font-size: 12px;
    color: var(--c-text-muted);
    margin: 4px 0 0;
    line-height: 1.4;
}

.vault-modal-body {
    overflow-y: auto;
    padding-right: 4px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Vault Stats Grid */
.vault-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 640px) {
    .vault-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.vstat-card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-subtle);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vstat-num {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 800;
    color: var(--c-text-primary);
}

.font-rose { color: #e11d48 !important; }

.vstat-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--c-text-muted);
}

/* Vault Toolbar */
.vault-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-subtle);
    padding: 10px 14px;
    border-radius: 12px;
}

.vault-filter-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.vault-tab {
    background: transparent;
    border: 1px solid transparent;
    color: var(--c-text-secondary);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.vault-tab:hover {
    background: var(--c-bg-elevated);
    color: var(--c-text-primary);
}

.vault-tab.active {
    background: #e11d48;
    color: #FFFFFF;
    font-weight: 700;
}

.vault-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--c-bg-main);
    border: 1px solid var(--c-border-subtle);
    border-radius: 999px;
    padding: 6px 14px;
    flex: 1;
    min-width: 200px;
    max-width: 320px;
}

.vault-search-box input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 12px;
    color: var(--c-text-primary);
    width: 100%;
}

/* Feed Container */
.blacklist-feed-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 380px;
    overflow-y: auto;
    padding-right: 4px;
}

.blacklist-feed-container::-webkit-scrollbar {
    width: 6px;
}

.blacklist-feed-container::-webkit-scrollbar-thumb {
    background: var(--c-border-subtle);
    border-radius: 4px;
}

.vault-card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-subtle);
    border-left: 4px solid #e11d48;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    transition: all 0.2s ease;
}

.vault-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border-color: rgba(225, 29, 72, 0.5);
}

.vcard-main {
    flex: 1;
}

.vcard-tags-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.vcard-platform {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--c-bg-elevated);
}

.vcard-times-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: #e11d48;
    background: rgba(225, 29, 72, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

.vcard-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-text-primary);
    margin: 0 0 6px 0;
    line-height: 1.4;
}

.vcard-details {
    font-size: 12px;
    color: var(--c-text-muted);
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.vcard-flags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vcard-flag-chip {
    font-size: 11px;
    color: #e11d48;
    background: rgba(225, 29, 72, 0.08);
    border: 1px solid rgba(225, 29, 72, 0.2);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.vcard-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    min-width: 110px;
}

.vcard-score-box {
    text-align: center;
}

.vcard-score-val {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 800;
    color: #e11d48;
}

.vcard-score-label {
    font-size: 10px;
    color: var(--c-text-muted);
}

.btn-vcard-audit {
    background: var(--c-gold-gradient);
    color: #FFFFFF;
    border: none;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.btn-vcard-audit:hover {
    filter: brightness(1.1);
    transform: scale(1.03);
}

/* Community Report Accordion */
.vault-report-section {
    background: var(--c-bg-card);
    border: 1px dashed var(--c-border-subtle);
    border-radius: 12px;
    overflow: hidden;
}

.report-section-header {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: rgba(225, 29, 72, 0.03);
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text-primary);
}

.report-section-header:hover {
    background: rgba(225, 29, 72, 0.06);
}

.report-form-container {
    padding: 16px;
    border-top: 1px solid var(--c-border-subtle);
}

.report-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 600px) {
    .report-form-grid {
        grid-template-columns: 1fr;
    }
}

.rform-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rform-group.full-width {
    grid-column: 1 / -1;
}

.rform-group label {
    font-size: 11px;
    font-weight: 700;
    color: var(--c-text-secondary);
}

.rform-group input, .rform-group select, .rform-group textarea {
    background: var(--c-bg-main);
    border: 1px solid var(--c-border-subtle);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--c-text-primary);
    outline: none;
    font-family: inherit;
}

.rform-group input:focus, .rform-group select:focus, .rform-group textarea:focus {
    border-color: #e11d48;
}

.rform-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
}

.btn-submit-report {
    background: #e11d48;
    color: #FFFFFF;
    border: none;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-submit-report:hover {
    background: #be123c;
    transform: translateY(-1px);
}

.report-status-msg {
    font-size: 12px;
    font-weight: 600;
    color: var(--c-emerald-safe);
}

/* Speed Cache Tag for 1,000+ Concurrent Scalability */
.speed-cache-tag {
    font-size: 11px;
    color: #06b6d4;
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.35);
    padding: 2px 8px;
    border-radius: 9999px;
    font-family: var(--font-mono);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ==============================================================================
   MODULE 2.6: ẢNH THỰC TẾ KHÁCH HÀNG CHỤP (VISUAL REVIEW FILTER - LUXURY GALLERY)
   ============================================================================== */
.visual-review-card {
    background: var(--c-surface-card);
    border: 1px solid var(--c-border-subtle);
    border-radius: 14px;
    padding: 20px;
    margin-top: 24px;
    position: relative;
    box-shadow: var(--shadow-card);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.buyer-photo-count-badge {
    font-size: 11px;
    font-weight: 800;
    color: #10B981;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    font-family: var(--font-mono);
}

.buyer-photo-gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-top: 16px;
}

@media (max-width: 1024px) {
    .buyer-photo-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .buyer-photo-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

.buyer-photo-card {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--c-border-subtle);
    background: var(--c-bg-main);
    transition: all 0.25s ease;
}

.buyer-photo-card:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    border-color: var(--c-gold-accent);
}

.buyer-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.buyer-photo-card:hover .buyer-photo-img {
    transform: scale(1.08);
}

.buyer-star-pill {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.star-pill-pos {
    background: #10B981;
    color: #FFFFFF;
}

.star-pill-neutral {
    background: #F59E0B;
    color: #0F172A;
}

.star-pill-neg {
    background: #EF4444;
    color: #FFFFFF;
}

.buyer-photo-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.88) 100%);
    padding: 20px 8px 6px 8px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 2;
}

.buyer-name-tag {
    font-size: 10px;
    font-weight: 700;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-mono);
}

/* ==============================================================================
   LIGHTBOX MODAL FOR REAL BUYER PHOTOS
   ============================================================================== */
.lightbox-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lightbox-card {
    background: var(--c-surface-card);
    border: 1px solid var(--c-border-subtle);
    border-radius: 16px;
    max-width: 600px;
    width: 100%;
    overflow: hidden;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: zoomInLight 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes zoomInLight {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.lightbox-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: #FFFFFF;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s;
}

.lightbox-close-btn:hover {
    background: #EF4444;
    transform: scale(1.1);
}

.lightbox-img-box {
    width: 100%;
    max-height: 480px;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-real-image {
    max-width: 100%;
    max-height: 480px;
    object-fit: contain;
}

.lightbox-footer {
    padding: 16px 20px;
    background: var(--c-surface-card);
}

.lightbox-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.lightbox-star-pill {
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    background: #10B981;
    color: #FFFFFF;
}

.lightbox-buyer-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--c-text-primary);
    font-family: var(--font-mono);
}

.lightbox-snippet-text {
    font-size: 13px;
    color: var(--c-text-secondary);
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}

/* ==========================================================================
   AI TRANSPARENCY & LEGAL COMPLIANCE STYLES (v3.6.0)
   ========================================================================== */

/* 1. AI Transparency Banner (Chuẩn Google Gemini) */
.ai-transparency-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    margin-top: 14px;
    border-radius: 10px;
    background: rgba(241, 245, 249, 0.7);
    border: 1px solid rgba(203, 213, 225, 0.6);
    font-size: 12px;
    line-height: 1.5;
    color: var(--c-text-secondary);
    transition: all 0.2s ease;
}

[data-theme="dark"] .ai-transparency-banner {
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(51, 65, 85, 0.5);
    color: #94A3B8;
}

.ai-transparency-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.ai-transparency-text strong {
    color: var(--c-text-primary);
    font-weight: 700;
}

/* 2. COA Disclaimer Note */
.coa-disclaimer-note {
    margin-top: 8px;
    font-size: 11px;
    color: var(--c-text-muted);
    font-style: italic;
    letter-spacing: 0.2px;
}

/* 3. Footer Legal Disclaimer */
.footer-legal-disclaimer {
    background: var(--c-surface-card);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 28px;
    text-align: left;
}

.fdisclaimer-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.fdisclaimer-icon {
    font-size: 15px;
}

.fdisclaimer-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--c-gold-accent);
    text-transform: uppercase;
    margin: 0;
}

.fdisclaimer-text {
    font-size: 12px;
    line-height: 1.65;
    color: var(--c-text-secondary);
    margin: 0 0 14px 0;
}

.fdisclaimer-text strong {
    color: var(--c-text-primary);
}

.footer-appeal-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--c-border);
    font-size: 12px;
    color: var(--c-text-muted);
}

.btn-appeal-link {
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.35);
    color: var(--c-gold-accent);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.btn-appeal-link:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: var(--c-gold-accent);
    transform: translateY(-1px);
}

/* 4. Merchant Appeal Modal */
.modal-appeal-card {
    max-width: 640px;
    width: 95%;
}

.appeal-modal-crest {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.3);
    margin-right: 12px;
    font-size: 18px;
}

.appeal-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 12px;
    color: var(--c-text-secondary);
    line-height: 1.5;
    margin-bottom: 20px;
}

.appeal-info-icon {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.appeal-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.appeal-actions-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-submit-appeal {
    background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
    color: #0F172A;
    font-weight: 800;
    font-size: 13px;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.25);
    transition: all 0.2s ease;
    font-family: inherit;
}

.btn-submit-appeal:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(212, 175, 55, 0.35);
}

.appeal-status-msg {
    font-size: 12px;
    font-weight: 600;
}

@media (max-width: 640px) {
    .appeal-form-grid {
        grid-template-columns: 1fr;
    }
    .footer-appeal-strip {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   BROWSER BRIDGE & DIRECT REVIEW INPUT STYLES (v3.7.0)
   ========================================================================== */

/* 1. Search Tools Strip */
.search-tools-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.tool-chip-btn {
    background: rgba(241, 245, 249, 0.8);
    border: 1px solid var(--c-border);
    color: var(--c-text-secondary);
    font-size: 11px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

[data-theme="dark"] .tool-chip-btn {
    background: rgba(30, 41, 59, 0.7);
    color: #94A3B8;
}

.tool-chip-btn:hover {
    border-color: var(--c-gold-accent);
    color: var(--c-text-primary);
    transform: translateY(-1px);
}

.tool-chip-btn.active {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
    border-color: var(--c-gold-accent);
    color: var(--c-gold-accent);
}

.btn-bookmarklet-tool {
    margin-left: auto;
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(212, 175, 55, 0.4);
    color: var(--c-gold-accent);
}

/* 2. Direct Review Paste Drawer */
.direct-review-box {
    background: var(--c-surface-card);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 16px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.direct-input-row {
    display: flex;
    gap: 10px;
}

.direct-input-row input {
    flex: 1;
    background: var(--c-bg-primary);
    border: 1px solid var(--c-border);
    color: var(--c-text-primary);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-family: inherit;
    outline: none;
}

.direct-input-row input:focus, .direct-review-box textarea:focus {
    border-color: var(--c-gold-accent);
}

.direct-review-box textarea {
    width: 100%;
    background: var(--c-bg-primary);
    border: 1px solid var(--c-border);
    color: var(--c-text-primary);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-family: inherit;
    resize: vertical;
    outline: none;
    line-height: 1.5;
}

.direct-actions-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-audit-direct {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 12px;
    padding: 8px 18px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
    font-family: inherit;
}

.btn-audit-direct:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
}

.direct-hint {
    font-size: 11px;
    color: var(--c-text-muted);
}

/* 3. Bookmarklet Modal */
.modal-bookmarklet-card {
    max-width: 580px;
    width: 95%;
}

.bookmarklet-crest {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.4);
    font-size: 18px;
    margin-right: 12px;
}

.bm-instructions {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bm-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.bm-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--c-gold-accent);
    color: #0F172A;
    font-weight: 800;
    font-size: 11px;
    flex-shrink: 0;
    margin-top: 2px;
}

.bm-step p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--c-text-secondary);
}

.bm-draggable-box {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    background: rgba(212, 175, 55, 0.08);
    border: 2px dashed rgba(212, 175, 55, 0.4);
    border-radius: 10px;
    margin: 4px 0;
}

.bookmarklet-pill-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
    color: #0F172A !important;
    font-weight: 800;
    font-size: 13px;
    padding: 8px 18px;
    border-radius: 20px;
    text-decoration: none !important;
    cursor: move;
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.3);
    user-select: none;
}

.bm-drag-hint {
    font-size: 12px;
    color: var(--c-gold-accent);
    font-weight: 600;
}

/* -------------------------------------------------------------
   MODULE 2.8: REAL BUYER COMMENTS SHOWCASE (1 - 5 SAO)
------------------------------------------------------------- */
.real-buyer-reviews-card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-card);
    border-radius: 16px;
    padding: 24px;
    margin-top: 24px;
    box-shadow: var(--card-shadow);
}

.review-filter-tabs {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-tab-btn {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--c-border-subtle);
    background: var(--c-bg-elevated);
    color: var(--c-text-secondary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-tab-btn:hover {
    border-color: var(--c-gold-primary);
    color: var(--c-text-primary);
}

.filter-tab-btn.active {
    background: var(--c-gold-gradient);
    color: #FFFFFF !important;
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(180, 134, 8, 0.25);
}

.real-buyer-comments-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.buyer-comment-item {
    background: var(--c-bg-elevated);
    border: 1px solid var(--c-border-subtle);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.buyer-comment-item:hover {
    transform: translateY(-2px);
    border-color: var(--c-gold-border);
}

.comment-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.buyer-profile-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.buyer-avatar-bubble {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #059669 0%, #10B981 100%);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.buyer-avatar-bubble.avatar-neg {
    background: linear-gradient(135deg, #E11D48 0%, #F43F5E 100%);
}

.buyer-avatar-bubble.avatar-med {
    background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%);
}

.buyer-meta-info {
    display: flex;
    flex-direction: column;
}

.buyer-name-masked {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text-primary);
}

.buyer-variation-text {
    font-size: 11px;
    color: var(--c-text-muted);
}

.buyer-star-badge {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.star-badge-pos {
    background: var(--c-emerald-bg);
    color: var(--c-emerald-safe);
    border: 1px solid var(--c-emerald-border);
}

.star-badge-med {
    background: var(--c-amber-bg);
    color: var(--c-amber-caution);
    border: 1px solid var(--c-amber-border);
}

.star-badge-neg {
    background: var(--c-rose-bg);
    color: var(--c-rose-risk);
    border: 1px solid var(--c-rose-border);
}

.comment-content-text {
    font-size: 13px;
    line-height: 1.55;
    color: var(--c-text-secondary);
    position: relative;
    padding-left: 14px;
    border-left: 2px solid var(--c-border-subtle);
}

.buyer-comment-item:hover .comment-content-text {
    border-left-color: var(--c-gold-primary);
    color: var(--c-text-primary);
}

.comments-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 30px 20px;
    background: var(--c-bg-elevated);
    border: 1px dashed var(--c-border-subtle);
    border-radius: 12px;
}

.comments-empty-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-text-primary);
    margin-bottom: 6px;
}

.comments-empty-desc {
    font-size: 12px;
    color: var(--c-text-muted);
    max-width: 500px;
    margin: 0 auto;
}

.curated-count-badge {
    background: var(--c-emerald-bg);
    color: var(--c-emerald-safe);
    border: 1px solid var(--c-emerald-border);
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* =========================================================================
   APP SHOWCASE & DIRECT APK DOWNLOAD LANDING PAGE STYLES (/tai-app)
   ========================================================================= */
.app-showcase-page {
    background: var(--c-bg-page);
    color: var(--c-text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-showcase-container {
    max-width: 1200px;
    width: 100%;
    margin: 40px auto 80px auto;
    padding: 0 24px;
    box-sizing: border-box;
    flex: 1;
}

/* Hero Showcase Grid */
.app-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-subtle);
    border-radius: 24px;
    padding: 56px 48px;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.app-hero-grid::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.18) 0%, rgba(16, 185, 129, 0.12) 50%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

.app-hero-content {
    position: relative;
    z-index: 1;
}

.app-badge-gold {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--c-gold-bg);
    border: 1px solid var(--c-gold-border);
    color: var(--c-gold-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.app-hero-title {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--c-text-primary);
    margin-bottom: 16px;
    font-family: var(--font-heading);
}

.app-hero-desc {
    font-size: 16px;
    line-height: 1.7;
    color: var(--c-text-secondary);
    margin-bottom: 32px;
}

/* Big Action Download Button with Gold Shimmer Sweep */
.app-download-action-box {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px;
}

.btn-download-apk-huge {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #DFB743 0%, #F5DE7A 45%, #C99718 80%, #996515 100%);
    color: #0F172A;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 14px;
    padding: 18px 36px;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.6px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 10px 28px rgba(212, 175, 55, 0.4), inset 0 1px 0 #FFFFFF;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: 440px;
}

.btn-download-apk-huge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 80%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    transform: skewX(-25deg);
    animation: goldShimmerSweep 3.2s ease-in-out infinite;
    pointer-events: none;
}

.btn-download-apk-huge:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 16px 36px rgba(212, 175, 55, 0.6), 0 4px 12px rgba(16, 185, 129, 0.25);
    color: #000000;
}

.download-status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--c-text-muted);
}

.status-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 8px #10B981;
    animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.8; }
}

/* Mockup Smartphone Visual */
.app-mockup-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.phone-mockup-frame {
    width: 290px;
    height: 580px;
    background: #0B0F19;
    border-radius: 44px;
    padding: 12px;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(212, 175, 55, 0.4), inset 0 0 0 2px rgba(255, 255, 255, 0.1);
    position: relative;
    transform: perspective(1000px) rotateY(-8deg) rotateX(4deg);
    transition: transform 0.4s ease;
}

.phone-mockup-frame:hover {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg) translateY(-8px);
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: var(--c-bg-card);
    border-radius: 34px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--c-border-subtle);
}

.phone-screen-header {
    background: #0F172A;
    padding: 18px 14px 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}

.phone-screen-body {
    flex: 1;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--c-bg-elevated);
}

.mini-score-card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-gold-border);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.mini-score-val {
    font-size: 32px;
    font-weight: 800;
    color: var(--c-gold-primary);
    font-family: var(--font-heading);
}

.mini-score-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--c-text-secondary);
    text-transform: uppercase;
}

.mini-badge-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mini-badge-item {
    font-size: 11px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-subtle);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

/* Section 2: 4 Core App Advantages Grid */
.app-features-section {
    margin-top: 64px;
}

.section-head-center {
    text-align: center;
    margin-bottom: 36px;
}

.section-head-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--c-text-primary);
    margin-bottom: 8px;
    font-family: var(--font-heading);
}

.section-head-sub {
    font-size: 14.5px;
    color: var(--c-text-muted);
}

.features-quad-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.feature-quad-card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-subtle);
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: var(--card-shadow);
    transition: transform 0.25s ease, border-color 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feature-quad-card:hover {
    transform: translateY(-4px);
    border-color: var(--c-gold-border);
}

.feature-quad-icon {
    font-size: 32px;
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: var(--c-gold-bg);
    border: 1px solid var(--c-gold-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-quad-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--c-text-primary);
}

.feature-quad-desc {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--c-text-secondary);
}

/* Section 3: 3 Easy Steps to Install */
.app-steps-section {
    margin-top: 64px;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-subtle);
    border-radius: 20px;
    padding: 44px 40px;
}

.steps-triple-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 32px;
}

.step-item-card {
    background: var(--c-bg-elevated);
    border: 1px solid var(--c-border-subtle);
    border-radius: 14px;
    padding: 24px;
    position: relative;
}

.step-num-badge {
    position: absolute;
    top: -14px;
    left: 20px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--c-gold-primary);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(180, 134, 8, 0.35);
}

.step-item-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-text-primary);
    margin: 8px 0 8px 0;
}

.step-item-desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--c-text-secondary);
}

@media (max-width: 960px) {
    .app-hero-grid {
        grid-template-columns: 1fr;
        padding: 40px 28px;
    }
    .app-mockup-wrapper {
        display: none;
    }
    .features-quad-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .steps-triple-grid {
        grid-template-columns: 1fr;
    }
}