/*
Theme Name: Mẫu Làm Video
Theme URI: https://maulamvideo.com
Author: Mẫu Làm Video Team
Author URI: https://maulamvideo.com
Description: Theme WordPress cho nền tảng bán Chatbot Prompt & công cụ AI. Dark mode, Dashboard layout, tích hợp thanh toán QR.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GPL v2 or later
Text Domain: maulamvideo
Tags: dark-mode, dashboard, ai-tools, digital-products
*/

/* ========================================
   1. CSS VARIABLES & DESIGN TOKENS
   ======================================== */
:root {
   --color-primary: #0DA2E7;
   --color-primary-hover: #0B8BC7;
   --color-primary-light: rgba(13, 162, 231, 0.15);
   --color-bg: #080C16;
   --color-bg-secondary: #0D1321;
   --color-bg-card: #111827;
   --color-bg-card-hover: #1a2332;
   --color-bg-sidebar: #0B1120;
   --color-bg-input: #1a2332;
   --color-border: rgba(255, 255, 255, 0.08);
   --color-border-hover: rgba(255, 255, 255, 0.15);
   --color-text: #f1f5f9;
   --color-text-secondary: #94a3b8;
   --color-text-muted: #64748b;
   --color-success: #22c55e;
   --color-warning: #f59e0b;
   --color-danger: #ef4444;
   --color-gold: #FFD700;
   --radius: 12px;
   --radius-sm: 8px;
   --radius-lg: 16px;
   --radius-full: 9999px;
   --shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
   --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
   --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   --font-sans: 'Inter', 'DM Sans', system-ui, -apple-system, sans-serif;
   --font-heading: 'Playfair Display', 'Georgia', serif;
   --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
   --sidebar-width: 260px;
   --header-height: 64px;
}

/* ========================================
   2. RESET & BASE
   ======================================== */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0
}

html {
   font-size: 16px;
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%
}

body {
   font-family: var(--font-sans);
   background: var(--color-bg);
   color: var(--color-text);
   line-height: 1.6;
   min-height: 100vh;
   overflow-x: hidden
}

a {
   color: var(--color-primary);
   text-decoration: none;
   transition: var(--transition)
}

a:hover {
   color: var(--color-primary-hover)
}

img {
   max-width: 100%;
   height: auto;
   display: block
}

button,
input,
select,
textarea {
   font-family: inherit;
   font-size: inherit;
   color: inherit;
   border: none;
   outline: none;
   background: none
}

ul,
ol {
   list-style: none
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-weight: 700;
   line-height: 1.2
}

/* ========================================
   3. LAYOUT — DASHBOARD STRUCTURE
   ======================================== */
.mlv-wrapper {
   display: flex;
   min-height: 100vh
}

.mlv-sidebar {
   position: fixed;
   top: 0;
   left: 0;
   width: var(--sidebar-width);
   height: 100vh;
   background: var(--color-bg-sidebar);
   border-right: 1px solid var(--color-border);
   display: flex;
   flex-direction: column;
   z-index: 100;
   transition: transform 0.3s ease
}

.mlv-main {
   margin-left: var(--sidebar-width);
   flex: 1;
   min-height: 100vh;
   display: flex;
   flex-direction: column
}

.mlv-header {
   position: sticky;
   top: 0;
   height: var(--header-height);
   background: rgba(8, 12, 22, 0.85);
   backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--color-border);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 24px;
   z-index: 90
}

.mlv-content {
   flex: 1;
   padding: 24px;
   max-width: 1400px;
   width: 100%;
   margin: 0 auto
}

/* Sidebar Logo */
.sidebar-logo {
   padding: 20px 24px;
   border-bottom: 1px solid var(--color-border)
}

.sidebar-logo img {
   height: 36px;
   width: auto
}

.sidebar-logo .brand-text {
   font-size: 18px;
   font-weight: 700;
   color: var(--color-text);
   margin-top: 4px
}

/* Sidebar Nav */
.sidebar-nav {
   flex: 1;
   padding: 16px 12px;
   overflow-y: auto
}

.sidebar-nav .nav-group {
   margin-bottom: 24px
}

.sidebar-nav .nav-group-title {
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1.2px;
   color: var(--color-text-muted);
   padding: 0 12px;
   margin-bottom: 8px
}

.sidebar-nav .nav-item {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 12px;
   border-radius: var(--radius-sm);
   color: var(--color-text-secondary);
   font-size: 14px;
   font-weight: 500;
   transition: var(--transition);
   cursor: pointer
}

.sidebar-nav .nav-item:hover,
.sidebar-nav .nav-item.active {
   background: var(--color-primary-light);
   color: var(--color-primary)
}

.sidebar-nav .nav-item .nav-icon {
   width: 20px;
   height: 20px;
   flex-shrink: 0
}

/* Header */
.header-search {
   display: flex;
   align-items: center;
   gap: 8px;
   background: var(--color-bg-input);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-full);
   padding: 8px 16px;
   width: 360px;
   transition: var(--transition)
}

.header-search:focus-within {
   border-color: var(--color-primary);
   box-shadow: 0 0 0 3px var(--color-primary-light)
}

.header-search input {
   flex: 1;
   background: none;
   color: var(--color-text);
   font-size: 14px
}

.header-search input::placeholder {
   color: var(--color-text-muted)
}

.header-nav {
   display: flex;
   align-items: center;
   gap: 20px
}

.header-nav a {
   color: var(--color-text-secondary);
   font-size: 14px;
   font-weight: 500;
   transition: var(--transition)
}

.header-nav a:hover,
.header-nav a.active {
   color: var(--color-primary)
}

.header-actions {
   display: flex;
   align-items: center;
   gap: 12px
}

/* ========================================
   4. BUTTONS
   ======================================== */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 10px 20px;
   border-radius: var(--radius-sm);
   font-weight: 600;
   font-size: 14px;
   cursor: pointer;
   transition: var(--transition);
   white-space: nowrap
}

.btn-primary {
   background: var(--color-primary);
   color: #fff
}

.btn-primary:hover {
   background: var(--color-primary-hover);
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(13, 162, 231, 0.4)
}

.btn-outline {
   border: 1px solid var(--color-border);
   color: var(--color-text-secondary);
   background: transparent
}

.btn-outline:hover {
   border-color: var(--color-primary);
   color: var(--color-primary)
}

.btn-ghost {
   color: var(--color-text-secondary);
   background: transparent
}

.btn-ghost:hover {
   background: var(--color-bg-card);
   color: var(--color-text)
}

.btn-success {
   background: var(--color-success);
   color: #fff
}

.btn-danger {
   background: var(--color-danger);
   color: #fff
}

.btn-gold {
   background: linear-gradient(135deg, #FFD700, #FFA500);
   color: #000;
   font-weight: 700
}

.btn-lg {
   padding: 14px 28px;
   font-size: 16px;
   border-radius: var(--radius)
}

.btn-sm {
   padding: 6px 12px;
   font-size: 12px
}

.btn-icon {
   width: 40px;
   height: 40px;
   padding: 0;
   border-radius: var(--radius-sm)
}

.btn[disabled] {
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none
}

/* ========================================
   5. CARDS
   ======================================== */
.card {
   background: var(--color-bg-card);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   overflow: hidden;
   transition: var(--transition)
}

.card:hover {
   border-color: var(--color-border-hover);
   transform: translateY(-2px);
   box-shadow: var(--shadow)
}

.card-img {
   position: relative;
   overflow: hidden;
   aspect-ratio: 9/16;
   background: var(--color-bg-secondary)
}

.card-img img,
.card-img video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.5s ease
}

.card:hover .card-img img,
.card:hover .card-img video {
   transform: scale(1.05)
}

.card-badge {
   position: absolute;
   top: 12px;
   left: 12px;
   padding: 4px 10px;
   border-radius: var(--radius-full);
   font-size: 11px;
   font-weight: 600;
   backdrop-filter: blur(8px)
}

.card-badge.free {
   background: rgba(34, 197, 94, 0.2);
   color: var(--color-success)
}

.card-badge.premium {
   background: rgba(255, 215, 0, 0.2);
   color: var(--color-gold)
}

.card-badge.hot {
   background: rgba(239, 68, 68, 0.2);
   color: var(--color-danger)
}

.card-body {
   padding: 16px
}

.card-title {
   font-size: 15px;
   font-weight: 600;
   margin-bottom: 6px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden
}

.card-desc {
   font-size: 13px;
   color: var(--color-text-secondary);
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   margin-bottom: 12px
}

.card-meta {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 13px
}

.card-price {
   font-weight: 700;
   color: var(--color-primary)
}

.card-price .old {
   text-decoration: line-through;
   color: var(--color-text-muted);
   font-weight: 400;
   margin-right: 6px;
   font-size: 12px
}

/* Card Grid */
.cards-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: 20px
}

.cards-grid.wide {
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))
}

/* ========================================
   6. FORMS & INPUTS
   ======================================== */
.form-group {
   margin-bottom: 20px
}

.form-label {
   display: block;
   font-size: 14px;
   font-weight: 500;
   margin-bottom: 6px;
   color: var(--color-text-secondary)
}

.form-input,
.form-select,
.form-textarea {
   width: 100%;
   padding: 12px 16px;
   background: var(--color-bg-input);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   color: var(--color-text);
   font-size: 14px;
   transition: var(--transition)
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
   border-color: var(--color-primary);
   box-shadow: 0 0 0 3px var(--color-primary-light)
}

.form-textarea {
   min-height: 120px;
   resize: vertical
}

.form-error {
   font-size: 12px;
   color: var(--color-danger);
   margin-top: 4px
}

.form-hint {
   font-size: 12px;
   color: var(--color-text-muted);
   margin-top: 4px
}

/* ========================================
   7. AUTH PAGES (Login/Register)
   ======================================== */
.auth-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: calc(100vh - var(--header-height) - 48px);
   padding: 24px;
   margin: -24px;
   background: var(--color-bg)
}

.auth-card {
   background: var(--color-bg-card);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: 40px;
   width: 100%;
   max-width: 440px;
   box-shadow: var(--shadow-lg)
}

.auth-card .logo {
   text-align: center;
   margin-bottom: 32px
}

.auth-card .logo img {
   height: 48px;
   margin: 0 auto
}

.auth-card h1 {
   font-size: 24px;
   text-align: center;
   margin-bottom: 8px
}

.auth-card .subtitle {
   text-align: center;
   color: var(--color-text-secondary);
   margin-bottom: 32px;
   font-size: 14px
}

.auth-divider {
   display: flex;
   align-items: center;
   gap: 12px;
   margin: 24px 0;
   color: var(--color-text-muted);
   font-size: 13px
}

.auth-divider::before,
.auth-divider::after {
   content: '';
   flex: 1;
   height: 1px;
   background: var(--color-border)
}

.btn-google {
   width: 100%;
   background: var(--color-bg-input);
   border: 1px solid var(--color-border);
   color: var(--color-text);
   padding: 12px
}

.btn-google:hover {
   background: var(--color-bg-card-hover);
   border-color: var(--color-border-hover)
}

.btn-google img {
   width: 20px;
   height: 20px
}

/* ========================================
   8. PRICING PAGE
   ======================================== */
.pricing-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 24px;
   max-width: 1000px;
   margin: 0 auto
}

.pricing-card {
   background: var(--color-bg-card);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: 32px;
   text-align: center;
   transition: var(--transition);
   position: relative
}

.pricing-card.featured {
   border-color: var(--color-primary);
   box-shadow: 0 0 30px rgba(13, 162, 231, 0.15)
}

.pricing-card.featured::before {
   content: 'PHỔ BIẾN NHẤT';
   position: absolute;
   top: -12px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--color-primary);
   color: #fff;
   padding: 4px 16px;
   border-radius: var(--radius-full);
   font-size: 11px;
   font-weight: 700
}

.pricing-card h3 {
   font-size: 20px;
   margin-bottom: 8px
}

.pricing-card .price {
   font-size: 36px;
   font-weight: 800;
   color: var(--color-primary);
   margin: 16px 0
}

.pricing-card .price span {
   font-size: 14px;
   color: var(--color-text-muted);
   font-weight: 400
}

.pricing-card .features {
   text-align: left;
   margin: 24px 0
}

.pricing-card .features li {
   padding: 8px 0;
   font-size: 14px;
   color: var(--color-text-secondary);
   display: flex;
   align-items: center;
   gap: 8px
}

.pricing-card .features li::before {
   content: '✓';
   color: var(--color-success);
   font-weight: 700
}

/* ========================================
   9. AFFILIATE / CTV PAGE
   ======================================== */
.ctv-hero {
   text-align: center;
   padding: 60px 24px;
   background: linear-gradient(135deg, rgba(13, 162, 231, 0.1), rgba(255, 215, 0, 0.05));
   border-radius: var(--radius-lg);
   margin-bottom: 40px
}

.ctv-hero h1 {
   font-size: 36px;
   font-family: var(--font-heading);
   margin-bottom: 16px
}

.ctv-hero h1 span {
   color: var(--color-primary)
}

.ctv-stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   margin: 32px 0
}

.ctv-stat {
   text-align: center
}

.ctv-stat .number {
   font-size: 32px;
   font-weight: 800;
   color: var(--color-primary)
}

.ctv-stat .label {
   font-size: 14px;
   color: var(--color-text-secondary)
}

.ctv-steps {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 24px
}

.ctv-step {
   background: var(--color-bg-card);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   padding: 24px;
   text-align: center
}

.ctv-step .step-num {
   width: 48px;
   height: 48px;
   background: var(--color-primary-light);
   color: var(--color-primary);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   font-size: 18px;
   margin: 0 auto 16px
}

/* ========================================
   10. USER DASHBOARD
   ======================================== */
.dash-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 20px;
   margin-bottom: 32px
}

.dash-stat {
   background: var(--color-bg-card);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   padding: 20px
}

.dash-stat .stat-label {
   font-size: 13px;
   color: var(--color-text-muted);
   margin-bottom: 4px
}

.dash-stat .stat-value {
   font-size: 28px;
   font-weight: 700
}

.dash-stat .stat-change {
   font-size: 12px;
   margin-top: 4px
}

.dash-stat .stat-change.up {
   color: var(--color-success)
}

.dash-stat .stat-change.down {
   color: var(--color-danger)
}

.dash-tabs {
   display: flex;
   gap: 4px;
   border-bottom: 1px solid var(--color-border);
   margin-bottom: 24px;
   overflow-x: auto
}

.dash-tab {
   padding: 12px 20px;
   font-size: 14px;
   font-weight: 500;
   color: var(--color-text-muted);
   cursor: pointer;
   border-bottom: 2px solid transparent;
   white-space: nowrap;
   transition: var(--transition)
}

.dash-tab:hover {
   color: var(--color-text)
}

.dash-tab.active {
   color: var(--color-primary);
   border-bottom-color: var(--color-primary)
}

.dash-table {
   width: 100%;
   border-collapse: collapse
}

.dash-table th {
   text-align: left;
   padding: 12px 16px;
   font-size: 13px;
   font-weight: 600;
   color: var(--color-text-muted);
   border-bottom: 1px solid var(--color-border)
}

.dash-table td {
   padding: 12px 16px;
   font-size: 14px;
   border-bottom: 1px solid var(--color-border)
}

.status-badge {
   padding: 4px 10px;
   border-radius: var(--radius-full);
   font-size: 11px;
   font-weight: 600
}

.status-badge.active {
   background: rgba(34, 197, 94, 0.15);
   color: var(--color-success)
}

.status-badge.pending {
   background: rgba(245, 158, 11, 0.15);
   color: var(--color-warning)
}

.status-badge.expired {
   background: rgba(239, 68, 68, 0.15);
   color: var(--color-danger)
}

/* ========================================
   11. SINGLE PRODUCT PAGE
   ======================================== */
.product-detail {
   display: grid;
   grid-template-columns: 1fr 380px;
   gap: 32px
}

.product-gallery {
   aspect-ratio: 9/16;
   border-radius: var(--radius-lg);
   overflow: hidden;
   background: var(--color-bg-secondary);
   max-height: 600px
}

.product-gallery img,
.product-gallery video {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.product-info h1 {
   font-size: 24px;
   margin-bottom: 12px
}

.product-price-box {
   background: var(--color-bg-card);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   padding: 24px;
   margin-top: 20px
}

.product-price-box .price-now {
   font-size: 32px;
   font-weight: 800;
   color: var(--color-primary)
}

.product-price-box .price-old {
   font-size: 16px;
   text-decoration: line-through;
   color: var(--color-text-muted);
   margin-left: 8px
}

.qr-payment {
   background: var(--color-bg-card);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   padding: 24px;
   text-align: center;
   margin-top: 20px
}

.qr-payment img {
   width: 200px;
   height: 200px;
   margin: 16px auto;
   border-radius: var(--radius-sm);
   background: #fff;
   padding: 8px
}

.qr-payment .bank-info {
   font-size: 13px;
   color: var(--color-text-secondary);
   margin-top: 12px
}

/* ========================================
   12. FILTER BAR
   ======================================== */
.filter-bar {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 24px;
   padding: 16px;
   background: var(--color-bg-card);
   border: 1px solid var(--color-border);
   border-radius: var(--radius)
}

.filter-chip {
   padding: 8px 16px;
   border-radius: var(--radius-full);
   font-size: 13px;
   font-weight: 500;
   background: var(--color-bg-input);
   color: var(--color-text-secondary);
   cursor: pointer;
   border: 1px solid transparent;
   transition: var(--transition)
}

.filter-chip:hover {
   border-color: var(--color-border-hover);
   color: var(--color-text)
}

.filter-chip.active {
   background: var(--color-primary-light);
   color: var(--color-primary);
   border-color: var(--color-primary)
}

/* ========================================
   13. FLASH SALE BANNER
   ======================================== */
.flash-sale {
   background: linear-gradient(135deg, #1a0000, #2a0a0a);
   border: 1px solid rgba(239, 68, 68, 0.3);
   border-radius: var(--radius-lg);
   padding: 24px;
   margin-bottom: 32px
}

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

.flash-sale h3 {
   color: var(--color-danger);
   font-size: 18px;
   display: flex;
   align-items: center;
   gap: 8px
}

.flash-countdown {
   display: flex;
   gap: 8px
}

.flash-countdown .cd-item {
   background: var(--color-danger);
   color: #fff;
   padding: 6px 10px;
   border-radius: var(--radius-sm);
   font-weight: 700;
   font-size: 14px;
   min-width: 36px;
   text-align: center
}

/* ========================================
   14. HERO / HOMEPAGE
   ======================================== */
.hero {
   text-align: center;
   padding: 60px 24px 40px;
   position: relative
}

.hero h1 {
   font-size: 42px;
   font-family: var(--font-heading);
   font-weight: 700;
   margin-bottom: 16px;
   line-height: 1.2
}

.hero h1 .gradient-text {
   background: linear-gradient(135deg, var(--color-primary), #6366f1);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text
}

.hero p {
   font-size: 18px;
   color: var(--color-text-secondary);
   max-width: 600px;
   margin: 0 auto 32px
}

.section-title {
   font-size: 22px;
   font-weight: 700;
   margin-bottom: 20px;
   display: flex;
   align-items: center;
   gap: 10px
}

.section-title .emoji {
   font-size: 24px
}

/* ========================================
   15. FOOTER (inside sidebar)
   ======================================== */
.sidebar-footer {
   padding: 16px 24px;
   border-top: 1px solid var(--color-border)
}

.sidebar-footer .social-links {
   display: flex;
   gap: 12px;
   margin-bottom: 12px
}

.sidebar-footer .social-links a {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: var(--color-bg-input);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--color-text-muted);
   transition: var(--transition)
}

.sidebar-footer .social-links a:hover {
   background: var(--color-primary-light);
   color: var(--color-primary)
}

.sidebar-footer .copyright {
   font-size: 11px;
   color: var(--color-text-muted)
}

/* Copy button */
.copy-btn {
   position: relative;
   cursor: pointer;
   padding: 6px 12px;
   border-radius: var(--radius-sm);
   background: var(--color-bg-input);
   border: 1px solid var(--color-border);
   color: var(--color-text-secondary);
   font-size: 12px;
   transition: var(--transition)
}

.copy-btn:hover {
   border-color: var(--color-primary);
   color: var(--color-primary)
}

.copy-btn.copied {
   background: rgba(34, 197, 94, 0.1);
   border-color: var(--color-success);
   color: var(--color-success)
}

/* Zalo floating button */
.zalo-float {
   position: fixed;
   bottom: 24px;
   right: 24px;
   width: 56px;
   height: 56px;
   background: var(--color-primary);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 20px rgba(13, 162, 231, 0.4);
   z-index: 1000;
   transition: var(--transition);
   animation: zalo-pulse 2s infinite
}

.zalo-float:hover {
   transform: scale(1.1)
}

.zalo-float img {
   width: 32px;
   height: 32px
}

@keyframes zalo-pulse {

   0%,
   100% {
      box-shadow: 0 4px 20px rgba(13, 162, 231, 0.4)
   }

   50% {
      box-shadow: 0 4px 30px rgba(13, 162, 231, 0.7)
   }
}

/* Mobile menu toggle */
.mobile-toggle {
   display: none;
   width: 40px;
   height: 40px;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   color: var(--color-text)
}

.mobile-toggle span {
   width: 20px;
   height: 2px;
   background: currentColor;
   position: relative;
   display: block
}

.mobile-toggle span::before,
.mobile-toggle span::after {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   background: currentColor;
   left: 0
}

.mobile-toggle span::before {
   top: -6px
}

.mobile-toggle span::after {
   top: 6px
}

/* Mobile home button */
.mobile-home-btn {
   display: none;
   width: 40px;
   height: 40px;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   color: var(--color-text);
   text-decoration: none;
   border-radius: var(--radius-sm);
   transition: var(--transition)
}

.mobile-home-btn:hover {
   background: var(--color-bg-card);
   color: var(--color-primary)
}

/* ========================================
   16. SKELETON LOADING
   ======================================== */
.skeleton {
   background: linear-gradient(90deg, var(--color-bg-card) 25%, var(--color-bg-card-hover) 50%, var(--color-bg-card) 75%);
   background-size: 200% 100%;
   animation: shimmer 1.5s infinite;
   border-radius: var(--radius-sm)
}

@keyframes shimmer {
   0% {
      background-position: 200% 0
   }

   100% {
      background-position: -200% 0
   }
}

/* ========================================
   17. SCROLLBAR
   ======================================== */
::-webkit-scrollbar {
   width: 6px;
   height: 6px
}

::-webkit-scrollbar-track {
   background: var(--color-bg)
}

::-webkit-scrollbar-thumb {
   background: var(--color-border);
   border-radius: 3px
}

::-webkit-scrollbar-thumb:hover {
   background: var(--color-text-muted)
}

/* ========================================
   18. RESPONSIVE — COMPREHENSIVE MOBILE
   ======================================== */

/* --- Tablet (≤1024px) --- */
@media(max-width:1024px) {
   .product-detail {
      grid-template-columns: 1fr
   }

   .cards-grid {
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr))
   }

   .cards-grid.wide {
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr))
   }

   .pricing-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .ctv-steps {
      grid-template-columns: repeat(2, 1fr)
   }

   .header-search {
      max-width: 280px
   }
}

/* --- Mobile (≤768px) --- */
@media(max-width:768px) {

   /* Sidebar */
   .mlv-sidebar {
      transform: translateX(-100%);
      width: 280px
   }

   .mlv-sidebar.open {
      transform: translateX(0)
   }

   .mlv-sidebar .collapse-btn {
      display: none
   }

   .mlv-main {
      margin-left: 0
   }

   .mlv-main.sidebar-collapsed {
      margin-left: 0
   }

   /* Sidebar overlay */
   .mlv-sidebar.open::after {
      content: '';
      position: fixed;
      top: 0;
      left: 280px;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 99;
      backdrop-filter: blur(2px)
   }

   /* Header */
   .mobile-toggle {
      display: flex
   }

   .mobile-home-btn {
      display: flex
   }

   .header-nav {
      display: none
   }

   .header-search {
      width: 100%;
      max-width: none;
      flex: 1;
      margin: 0 8px
   }

   .header-search input {
      font-size: 16px
   }

   /* prevents zoom on iOS */
   .header-actions .btn {
      padding: 6px 10px;
      font-size: 12px
   }

   /* Hide "Đăng nhập" text, show icon only on mobile to save space */
   .header-actions .btn-outline {
      font-size: 0;
      padding: 6px 10px;
      min-height: 34px
   }

   .header-actions .btn-outline::before {
      content: '🔑';
      font-size: 14px
   }

   .header-actions .btn-primary {
      padding: 6px 12px;
      font-size: 12px;
      min-height: 34px
   }

   /* Auth pages — full width on mobile */
   .auth-wrapper {
      padding: 16px;
      min-height: calc(100vh - 64px - 70px);
      margin: -16px
   }

   .auth-card {
      padding: 28px 20px;
      max-width: 100%;
      border: none;
      box-shadow: none;
      background: transparent
   }

   .auth-card h1 {
      font-size: 24px
   }

   .mlv-header {
      gap: 8px;
      padding: 0 12px
   }

   /* Hero */
   .hero {
      padding: 40px 16px 32px
   }

   .hero h1 {
      font-size: 26px
   }

   .hero p {
      font-size: 14px;
      margin-bottom: 24px
   }

   .hero .flex {
      flex-direction: column;
      gap: 12px;
      align-items: stretch
   }

   .hero .btn-lg {
      width: 100%;
      justify-content: center
   }

   /* Cards */
   .cards-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px
   }

   .cards-grid.wide {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px
   }

   .card-body {
      padding: 12px
   }

   .card-title {
      font-size: 13px
   }

   .card-desc {
      font-size: 12px;
      -webkit-line-clamp: 1
   }

   .card-meta {
      font-size: 12px
   }

   .card-price {
      font-size: 13px
   }

   .card-badge {
      font-size: 10px;
      padding: 3px 8px;
      top: 8px;
      left: 8px
   }

   .bookmark-btn {
      width: 32px;
      height: 32px;
      bottom: 8px;
      right: 8px
   }

   /* Filter bar */
   .filter-bar {
      overflow-x: auto;
      flex-wrap: nowrap;
      padding: 12px;
      gap: 6px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none
   }

   .filter-bar::-webkit-scrollbar {
      display: none
   }

   .filter-chip {
      flex-shrink: 0;
      padding: 8px 14px;
      font-size: 12px
   }

   /* Pricing */
   .pricing-grid {
      grid-template-columns: 1fr;
      gap: 16px
   }

   .pricing-card {
      padding: 24px
   }

   .pricing-card .price {
      font-size: 28px
   }

   /* CTV */
   .ctv-hero {
      padding: 40px 16px
   }

   .ctv-hero h1 {
      font-size: 28px
   }

   .ctv-stats {
      grid-template-columns: repeat(3, 1fr);
      gap: 12px
   }

   .ctv-stat .number {
      font-size: 24px
   }

   .ctv-stat .label {
      font-size: 12px
   }

   .ctv-steps {
      grid-template-columns: 1fr;
      gap: 16px
   }

   .ctv-step {
      padding: 20px
   }

   /* Dashboard */
   .dash-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px
   }

   .dash-stat {
      padding: 16px
   }

   .dash-stat .stat-value {
      font-size: 22px
   }

   .dash-tabs {
      gap: 0;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none
   }

   .dash-tabs::-webkit-scrollbar {
      display: none
   }

   .dash-tab {
      padding: 10px 14px;
      font-size: 13px
   }

   /* Table horizontal scroll */
   .dash-table {
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      white-space: nowrap
   }

   .dash-table thead,
   .dash-table tbody,
   .dash-table tr {
      display: table;
      width: 100%;
      table-layout: fixed
   }

   .dash-table {
      font-size: 13px
   }

   .dash-table th,
   .dash-table td {
      padding: 10px 12px;
      min-width: 80px
   }

   /* Product detail */
   .product-detail {
      grid-template-columns: 1fr;
      gap: 20px
   }

   .product-gallery {
      max-height: 400px
   }

   .product-info h1 {
      font-size: 20px
   }

   .product-price-box {
      padding: 20px
   }

   .product-price-box .price-now {
      font-size: 26px
   }

   /* Auth pages */
   .auth-wrapper {
      padding: 16px;
      min-height: auto
   }

   .auth-card {
      padding: 28px 20px;
      max-width: 100%
   }

   .auth-card h1 {
      font-size: 22px
   }

   /* Forms — touch-friendly */
   .form-input,
   .form-select,
   .form-textarea {
      padding: 14px 16px;
      font-size: 16px;
      min-height: 48px
   }

   .btn {
      min-height: 44px;
      padding: 12px 20px
   }

   .btn-lg {
      min-height: 52px;
      padding: 14px 24px;
      font-size: 15px
   }

   .btn-sm {
      min-height: 36px;
      padding: 8px 14px;
      font-size: 12px
   }

   .copy-btn {
      min-height: 36px;
      padding: 8px 14px
   }

   /* Section titles */
   .section-title {
      font-size: 18px;
      margin-bottom: 16px
   }

   /* Flash sale */
   .flash-sale {
      padding: 16px
   }

   .flash-sale .sale-header {
      flex-direction: column;
      gap: 12px;
      align-items: flex-start
   }

   .flash-countdown .cd-item {
      padding: 4px 8px;
      font-size: 13px;
      min-width: 32px
   }

   /* Breadcrumbs */
   .breadcrumbs {
      font-size: 12px;
      margin-bottom: 12px
   }

   /* Zalo float — above bottom nav */
   .zalo-float {
      bottom: 80px;
      right: 16px;
      width: 48px;
      height: 48px
   }

   .zalo-float svg {
      width: 26px;
      height: 26px
   }

   /* Toast */
   .mlv-toast {
      max-width: calc(100vw - 32px);
      font-size: 13px;
      padding: 10px 16px;
      bottom: 80px
   }

   /* QR payment */
   .qr-payment {
      padding: 16px
   }

   .qr-payment img {
      width: 160px;
      height: 160px
   }

   /* Spacing reductions */
   .mb-48 {
      margin-bottom: 32px
   }

   .mb-32 {
      margin-bottom: 24px
   }
}

/* --- Small Mobile (≤480px) --- */
@media(max-width:480px) {
   .mlv-content {
      padding: 12px
   }

   .mlv-header {
      padding: 0 10px;
      height: 56px
   }

   .header-search {
      padding: 6px 12px
   }

   .header-search input {
      font-size: 14px
   }

   /* Cards single column on very small screens OR 2 cols tight */
   .cards-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 8px
   }

   .cards-grid.wide {
      grid-template-columns: 1fr
   }

   .card-img {
      aspect-ratio: 3/4
   }

   /* Dashboard */
   .dash-grid {
      grid-template-columns: 1fr
   }

   .dash-stat .stat-value {
      font-size: 20px
   }

   /* Auth */
   .auth-card {
      padding: 20px 16px;
      border-radius: var(--radius)
   }

   .auth-wrapper {
      padding: 12px
   }

   /* Hero */
   .hero h1 {
      font-size: 22px
   }

   .hero p {
      font-size: 13px
   }

   .hero {
      padding: 32px 12px 24px
   }

   /* CTV */
   .ctv-hero {
      padding: 32px 12px
   }

   .ctv-hero h1 {
      font-size: 24px
   }

   .ctv-stats {
      grid-template-columns: repeat(3, 1fr);
      gap: 8px
   }

   .ctv-stat .number {
      font-size: 20px
   }

   /* Pricing */
   .pricing-card {
      padding: 20px
   }

   .pricing-card .price {
      font-size: 24px
   }

   .pricing-card .features li {
      font-size: 13px
   }

   /* Product */
   .product-gallery {
      max-height: 320px;
      aspect-ratio: 1/1
   }

   .product-price-box .price-now {
      font-size: 22px
   }

   /* Section title */
   .section-title {
      font-size: 16px
   }

   /* Smaller buttons */
   .btn-lg {
      font-size: 14px;
      padding: 12px 20px
   }
}

/* --- Bottom Navigation Bar for Mobile --- */
@media(max-width:768px) {
   .mlv-bottom-nav {
      display: flex !important
   }

   .mlv-content {
      padding-bottom: 80px
   }
}

/* --- Safe area for notched phones (iPhone X+) --- */
@supports(padding-bottom: env(safe-area-inset-bottom)) {
   @media(max-width:768px) {
      .mlv-bottom-nav {
         padding-bottom: calc(8px + env(safe-area-inset-bottom))
      }

      .mlv-content {
         padding-bottom: calc(80px + env(safe-area-inset-bottom))
      }
   }
}

/* ========================================
   19. BOOKMARK BUTTON
   ======================================== */
.bookmark-btn {
   position: absolute;
   bottom: 12px;
   right: 12px;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(8px);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   color: var(--color-text-secondary);
   border: none;
   transition: var(--transition);
   z-index: 5
}

.bookmark-btn:hover {
   background: rgba(255, 215, 0, 0.2);
   color: var(--color-gold);
   transform: scale(1.1)
}

.bookmark-btn.bookmarked {
   color: var(--color-gold);
   background: rgba(255, 215, 0, 0.2)
}

.bookmark-btn.bookmarked svg {
   fill: var(--color-gold)
}

/* ========================================
   20. BREADCRUMBS
   ======================================== */
.breadcrumbs {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   color: var(--color-text-muted);
   margin-bottom: 16px;
   flex-wrap: wrap
}

.breadcrumbs a {
   color: var(--color-text-secondary)
}

.breadcrumbs a:hover {
   color: var(--color-primary)
}

.breadcrumbs span {
   color: var(--color-text-muted)
}

/* ========================================
   21. SIDEBAR COLLAPSE
   ======================================== */
.mlv-sidebar .collapse-btn {
   position: absolute;
   bottom: 60px;
   right: -12px;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: var(--color-bg-card);
   border: 1px solid var(--color-border);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   color: var(--color-text-muted);
   font-size: 12px;
   z-index: 101;
   transition: var(--transition)
}

.mlv-sidebar .collapse-btn:hover {
   background: var(--color-primary);
   color: #fff;
   border-color: var(--color-primary)
}

.mlv-sidebar.collapsed {
   width: 72px
}

.mlv-sidebar.collapsed .sidebar-logo .brand-text,
.mlv-sidebar.collapsed .nav-group-title,
.mlv-sidebar.collapsed .nav-item span:not(.nav-icon),
.mlv-sidebar.collapsed .sidebar-footer .copyright,
.mlv-sidebar.collapsed .sidebar-footer .social-links {
   display: none
}

.mlv-sidebar.collapsed .nav-item {
   justify-content: center;
   padding: 10px
}

.mlv-sidebar.collapsed .nav-icon {
   margin: 0
}

.mlv-main.sidebar-collapsed {
   margin-left: 72px
}

/* ========================================
   22. TOAST NOTIFICATIONS
   ======================================== */
.mlv-toast {
   position: fixed;
   bottom: 24px;
   left: 50%;
   transform: translateX(-50%) translateY(20px);
   padding: 12px 24px;
   border-radius: var(--radius);
   font-size: 14px;
   font-weight: 500;
   z-index: 9999;
   opacity: 0;
   transition: all 0.3s ease;
   pointer-events: none;
   max-width: 400px
}

.mlv-toast.show {
   opacity: 1;
   transform: translateX(-50%) translateY(0)
}

.mlv-toast-success {
   background: var(--color-success);
   color: #fff
}

.mlv-toast-error {
   background: var(--color-danger);
   color: #fff
}

.mlv-toast-info {
   background: var(--color-primary);
   color: #fff
}

/* ========================================
   23. PAGINATION STYLES
   ======================================== */
.page-numbers {
   display: inline-flex;
   list-style: none;
   gap: 4px;
   justify-content: center
}

.page-numbers li a,
.page-numbers li span {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 36px;
   height: 36px;
   padding: 0 8px;
   border-radius: var(--radius-sm);
   font-size: 13px;
   font-weight: 500;
   color: var(--color-text-secondary);
   background: var(--color-bg-card);
   border: 1px solid var(--color-border);
   transition: var(--transition)
}

.page-numbers li a:hover {
   border-color: var(--color-primary);
   color: var(--color-primary)
}

.page-numbers li span.current {
   background: var(--color-primary);
   color: #fff;
   border-color: var(--color-primary)
}

/* ========================================
   24. UTILITIES
   ======================================== */
.text-center {
   text-align: center
}

.text-primary {
   color: var(--color-primary)
}

.text-muted {
   color: var(--color-text-muted)
}

.text-success {
   color: var(--color-success)
}

.text-danger {
   color: var(--color-danger)
}

.mb-8 {
   margin-bottom: 8px
}

.mb-16 {
   margin-bottom: 16px
}

.mb-24 {
   margin-bottom: 24px
}

.mb-32 {
   margin-bottom: 32px
}

.mb-48 {
   margin-bottom: 48px
}

.mt-16 {
   margin-top: 16px
}

.mt-24 {
   margin-top: 24px
}

.gap-12 {
   gap: 12px
}

.gap-24 {
   gap: 24px
}

.flex {
   display: flex
}

.flex-col {
   flex-direction: column
}

.items-center {
   align-items: center
}

.justify-between {
   justify-content: space-between
}

.w-full {
   width: 100%
}

.hidden {
   display: none !important
}

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   border: 0
}

/* ========================================
   25. MOBILE BOTTOM NAVIGATION BAR
   ======================================== */
.mlv-bottom-nav {
   display: none;
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   height: 64px;
   background: rgba(11, 17, 32, 0.95);
   backdrop-filter: blur(16px);
   border-top: 1px solid var(--color-border);
   z-index: 200;
   align-items: center;
   justify-content: space-around;
   padding: 0 4px
}

.mlv-bottom-nav a {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 2px;
   color: var(--color-text-muted);
   font-size: 10px;
   font-weight: 500;
   text-decoration: none;
   padding: 8px 4px;
   min-width: 56px;
   transition: color 0.2s ease;
   -webkit-tap-highlight-color: transparent
}

.mlv-bottom-nav a .nav-emoji {
   font-size: 20px;
   line-height: 1;
   display: block
}

.mlv-bottom-nav a:hover,
.mlv-bottom-nav a.active {
   color: var(--color-primary)
}

.mlv-bottom-nav a.active::after {
   content: '';
   display: block;
   width: 4px;
   height: 4px;
   background: var(--color-primary);
   border-radius: 50%;
   margin-top: 2px
}

/* ========================================
   26. PREMIUM ANIMATIONS & EFFECTS
   ======================================== */

/* Scroll reveal — cards and sections fade in on scroll */
.mlv-reveal {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1)
}

.mlv-reveal.revealed {
   opacity: 1;
   transform: translateY(0)
}

.mlv-reveal:nth-child(2) {
   transition-delay: 0.08s
}

.mlv-reveal:nth-child(3) {
   transition-delay: 0.16s
}

.mlv-reveal:nth-child(4) {
   transition-delay: 0.24s
}

.mlv-reveal:nth-child(5) {
   transition-delay: 0.32s
}

.mlv-reveal:nth-child(6) {
   transition-delay: 0.4s
}

/* Card hover glow */
.card {
   position: relative
}

.card::before {
   content: '';
   position: absolute;
   inset: -1px;
   border-radius: var(--radius);
   background: linear-gradient(135deg, var(--color-primary), #6366f1);
   opacity: 0;
   z-index: -1;
   transition: opacity 0.4s ease;
   filter: blur(8px)
}

.card:hover::before {
   opacity: 0.15
}

/* Hero animated gradient background */
.hero {
   position: relative;
   overflow: hidden
}

.hero::before {
   content: '';
   position: absolute;
   top: -50%;
   left: -50%;
   width: 200%;
   height: 200%;
   background: radial-gradient(ellipse at 30% 50%, rgba(13, 162, 231, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 70% 50%, rgba(99, 102, 241, 0.06) 0%, transparent 50%);
   animation: hero-glow 8s ease-in-out infinite alternate;
   z-index: 0;
   pointer-events: none
}

.hero>* {
   position: relative;
   z-index: 1
}

@keyframes hero-glow {
   0% {
      transform: translate(0, 0) scale(1)
   }

   100% {
      transform: translate(-5%, 3%) scale(1.1)
   }
}

/* Gradient text animation */
.gradient-text {
   background: linear-gradient(135deg, var(--color-primary), #6366f1, #a855f7, var(--color-primary));
   background-size: 300% 300%;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   animation: gradient-shift 6s ease infinite
}

@keyframes gradient-shift {

   0%,
   100% {
      background-position: 0% 50%
   }

   50% {
      background-position: 100% 50%
   }
}

/* Page load animation */
.mlv-content {
   animation: page-fade-in 0.4s ease-out
}

@keyframes page-fade-in {
   from {
      opacity: 0;
      transform: translateY(8px)
   }

   to {
      opacity: 1;
      transform: translateY(0)
   }
}

/* Scroll-to-top button */
.scroll-top {
   position: fixed;
   bottom: 24px;
   left: 24px;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: var(--color-bg-card);
   border: 1px solid var(--color-border);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   color: var(--color-text-secondary);
   font-size: 18px;
   z-index: 190;
   opacity: 0;
   pointer-events: none;
   transform: translateY(12px);
   transition: all 0.3s ease;
   box-shadow: var(--shadow)
}

.scroll-top.visible {
   opacity: 1;
   pointer-events: auto;
   transform: translateY(0)
}

.scroll-top:hover {
   background: var(--color-primary);
   color: #fff;
   border-color: var(--color-primary);
   transform: translateY(-2px);
   box-shadow: 0 4px 16px rgba(13, 162, 231, 0.3)
}

/* Search spotlight effect */
.header-search:focus-within {
   box-shadow: 0 0 0 3px var(--color-primary-light), 0 8px 24px rgba(13, 162, 231, 0.15);
   border-color: var(--color-primary)
}

/* Search keyboard shortcut badge */
.search-shortcut {
   display: inline-flex;
   align-items: center;
   gap: 2px;
   padding: 2px 6px;
   border-radius: 4px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid var(--color-border);
   font-size: 11px;
   color: var(--color-text-muted);
   font-family: var(--font-mono);
   pointer-events: none;
   flex-shrink: 0
}

/* Pricing card enhanced hover */
.pricing-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3)
}

.pricing-card.featured:hover {
   box-shadow: 0 12px 40px rgba(13, 162, 231, 0.2)
}

/* CTA pulse on gold buttons */
.btn-gold {
   position: relative;
   overflow: hidden
}

.btn-gold::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
   transform: translateX(-100%);
   transition: none
}

.btn-gold:hover::after {
   animation: btn-shine 0.6s ease;
   transform: translateX(100%)
}

@keyframes btn-shine {
   from {
      transform: translateX(-100%)
   }

   to {
      transform: translateX(100%)
   }
}

/* Smooth image loading */
.card-img img,
.product-gallery img {
   opacity: 0;
   transition: opacity 0.4s ease
}

.card-img img.loaded,
.product-gallery img.loaded,
.card-img img[src],
.product-gallery img[src] {
   opacity: 1
}

/* Status badge pulse for pending */
.status-badge.pending {
   animation: badge-pulse 2s ease-in-out infinite
}

@keyframes badge-pulse {

   0%,
   100% {
      opacity: 1
   }

   50% {
      opacity: 0.6
   }
}

/* Filter chip ripple */
.filter-chip {
   position: relative;
   overflow: hidden
}

.filter-chip::after {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.15), transparent 60%);
   opacity: 0;
   transition: opacity 0.3s ease
}

.filter-chip:active::after {
   opacity: 1
}

/* Smooth focus styles for accessibility */
a:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px
}

/* Transition for tab content */
.tab-content {
   animation: tab-fadein 0.3s ease
}

@keyframes tab-fadein {
   from {
      opacity: 0;
      transform: translateY(8px)
   }

   to {
      opacity: 1;
      transform: translateY(0)
   }
}

/* ========================================
   27. MOBILE PREMIUM ADJUSTMENTS
   ======================================== */
@media(max-width:768px) {
   .scroll-top {
      bottom: 80px;
      left: 16px;
      width: 40px;
      height: 40px;
      font-size: 16px
   }

   .search-shortcut {
      display: none
   }

   .hero::before {
      display: none
   }

   /* save GPU on mobile */
   .card::before {
      display: none
   }

   /* save GPU on mobile */
   .mlv-reveal {
      transition-delay: 0s !important
   }

   /* no stagger delay on mobile for speed */
}