/*
Theme Name: Share123.vn - Chia sẻ tiện ích
Theme URI: https://share123.vn
Description: Nền tảng tiện ích trực tuyến - Child Theme of Twenty Twenty-Three
Author: WebSEO
Author URI: https://webseo.com.vn
Template: twentytwentythree
Version: 2.0.0
Text Domain: share123
*/

/* ============================================
   🎨 DESIGN TOKENS
   ============================================ */
:root {
    /* Brand */
    --c-primary: #0c1322;
    --c-primary-50: #1a2540;
    --c-accent: #ff5722;
    --c-accent-dark: #e64a19;
    --c-accent-10: rgba(255,87,34,.08);
    --c-accent-soft: #fff3ef;

    /* Semantic */
    --c-success: #00c853;
    --c-success-bg: #ecfdf5;
    --c-warning: #ff9800;
    --c-warning-bg: #fffbeb;
    --c-danger: #ef4444;
    --c-info: #2563eb;

    /* Neutral */
    --c-bg: #f7f8fc;
    --c-surface: #ffffff;
    --c-border: #e4e8f1;
    --c-border-hover: #cbd1de;
    --c-text: #1a2332;
    --c-text-2: #475569;
    --c-text-3: #8392a5;
    --c-text-4: #adb5c4;

    /* Layout */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --r-2xl: 28px;
    --sidebar-w: 250px;

    /* Shadows */
    --sh-xs: 0 1px 2px rgba(12,19,34,.04);
    --sh-sm: 0 2px 6px rgba(12,19,34,.05);
    --sh-md: 0 4px 16px rgba(12,19,34,.07);
    --sh-lg: 0 12px 32px rgba(12,19,34,.1);
    --sh-accent: 0 6px 24px rgba(255,87,34,.2);

    /* Motion */
    --ease: cubic-bezier(.4,0,.2,1);
    --tr: .2s var(--ease);
}

/* ============================================
   🔄 RESET & BASE
   ============================================ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    overflow-x: hidden;
}
a { text-decoration:none; color:inherit; transition:color var(--tr); }
img { max-width:100%; height:auto; }
button { font-family:inherit; cursor:pointer; }
ul { list-style:none; }

/* WP chrome off */
body.page-template-page-home .wp-site-header,
body.page-template-page-home .wp-site-footer,
body.page-template-page-pdf-tools .wp-site-header,
body.page-template-page-pdf-tools .wp-site-footer { display:none; }

/* ============================================
   🧭 HEADER
   ============================================ */
.s-header {
    position:fixed; top:0; left:0; right:0; z-index:100;
    height:60px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border-bottom:1px solid var(--c-border);
    transition:box-shadow var(--tr);
}
.s-header.scrolled { box-shadow:var(--sh-md); }
.s-header-inner {
    max-width:1280px; margin:0 auto; padding:0 24px;
    display:flex; align-items:center; justify-content:space-between; height:100%;
}
.s-logo {
    display:flex; align-items:center; gap:9px;
    font-weight:900; font-size:21px; color:var(--c-primary); letter-spacing:-.4px;
}
.s-logo-mark {
    width:34px; height:34px;
    background:linear-gradient(135deg,var(--c-accent),#ff8a50);
    border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:16px; font-weight:900;
    box-shadow:0 3px 10px rgba(255,87,34,.25);
}
.s-logo em { font-style:normal; color:var(--c-accent); }
.s-nav { display:flex; align-items:center; gap:4px; }
.s-nav a {
    padding:7px 16px; border-radius:var(--r-sm);
    color:var(--c-text-3); font-weight:600; font-size:13px;
    transition:all var(--tr);
}
.s-nav a:hover { color:var(--c-text); background:var(--c-bg); }
.s-nav a.active { color:var(--c-accent); background:var(--c-accent-soft); }
.s-nav .s-btn-cta {
    background:var(--c-primary); color:#fff;
    padding:7px 20px; border-radius:var(--r-sm); font-weight:700;
}
.s-nav .s-btn-cta:hover { background:var(--c-primary-50); color:#fff; }

/* ============================================
   ⭐ HERO (homepage)
   ============================================ */
.s-hero {
    padding:120px 24px 48px; text-align:center;
    position:relative; overflow:hidden;
    background:linear-gradient(180deg,#fff 0%,var(--c-bg) 100%);
}
.s-hero::before,
.s-hero::after {
    content:''; position:absolute; pointer-events:none; border-radius:50%;
}
.s-hero::before {
    top:-20%; left:8%; width:420px; height:420px;
    background:radial-gradient(circle,var(--c-accent-10),transparent 70%);
    animation:heroGlow 8s ease-in-out infinite;
}
.s-hero::after {
    top:15%; right:5%; width:360px; height:360px;
    background:radial-gradient(circle,rgba(37,99,235,.04),transparent 70%);
    animation:heroGlow 10s ease-in-out infinite reverse;
}
@keyframes heroGlow {
    0%,100% { transform:translateY(0) scale(1); }
    50% { transform:translateY(-20px) scale(1.03); }
}
.s-hero-badge {
    display:inline-flex; align-items:center; gap:7px;
    background:var(--c-accent-soft); color:var(--c-accent);
    padding:6px 16px; border-radius:100px;
    font-size:12px; font-weight:700; letter-spacing:.2px;
    border:1px solid var(--c-accent-10);
    margin-bottom:24px; position:relative;
    animation:fadeUp .5s var(--ease) both;
}
.s-hero h1 {
    font-size:clamp(30px,5vw,52px); font-weight:900;
    color:var(--c-primary); letter-spacing:-1.2px; line-height:1.1;
    margin-bottom:16px; position:relative;
    animation:fadeUp .5s var(--ease) .08s both;
}
.s-hero h1 em {
    font-style:normal;
    background:linear-gradient(135deg,var(--c-accent),#ff8a50);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.s-hero p {
    font-size:16px; color:var(--c-text-2);
    max-width:500px; margin:0 auto 32px; line-height:1.7;
    position:relative;
    animation:fadeUp .5s var(--ease) .16s both;
}
.s-hero .breadcrumb {
    font-size:13px; color:var(--c-text-4); margin-bottom:18px; position:relative;
}
.s-hero .breadcrumb a { color:var(--c-accent); font-weight:600; }
@keyframes fadeUp {
    from { opacity:0; transform:translateY(14px); }
    to { opacity:1; transform:translateY(0); }
}

/* Trust strip */
.s-trust {
    display:flex; align-items:center; justify-content:center;
    gap:24px; flex-wrap:wrap; margin-top:24px;
    animation:fadeUp .5s var(--ease) .24s both;
}
.s-trust-item {
    display:flex; align-items:center; gap:6px;
    font-size:12px; color:var(--c-text-4); font-weight:600;
}
.s-trust-item .material-symbols-outlined { font-size:15px; color:var(--c-success); }

/* ============================================
   📦 SECTIONS
   ============================================ */
.s-section {
    max-width:1280px; margin:0 auto; padding:16px 24px 72px;
}
.s-section-label {
    font-size:11px; font-weight:800; text-transform:uppercase;
    letter-spacing:2.5px; color:var(--c-text-4); margin-bottom:18px;
}

/* ============================================
   📊 STATS
   ============================================ */
.s-stats-grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px;
}
.s-stat-card {
    background:var(--c-surface); border:1px solid var(--c-border);
    border-radius:var(--r-lg); padding:24px; text-align:center;
}
.s-stat-num { font-size:32px; font-weight:900; color:var(--c-primary); line-height:1; }
.s-stat-num em { font-style:normal; color:var(--c-accent); }
.s-stat-label { font-size:12px; color:var(--c-text-3); font-weight:600; margin-top:6px; }

/* ============================================
   🗂️ CATEGORY CARDS (homepage)
   ============================================ */
.s-cat-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px;
}
.s-cat-card {
    background:var(--c-surface); border:1px solid var(--c-border);
    border-radius:var(--r-xl); padding:28px;
    cursor:pointer; transition:all var(--tr);
    position:relative; overflow:hidden; display:block;
}
.s-cat-card:hover {
    border-color:var(--c-accent); box-shadow:var(--sh-md);
    transform:translateY(-2px);
}
.s-cat-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--cat-c1,var(--c-accent)),var(--cat-c2,#ff8a50));
    transform:scaleX(0); transform-origin:left;
    transition:transform .3s var(--ease);
}
.s-cat-card:hover::before { transform:scaleX(1); }
.s-cat-icon {
    width:52px; height:52px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    font-size:24px; margin-bottom:16px; transition:transform var(--tr);
}
.s-cat-card:hover .s-cat-icon { transform:scale(1.06); }
.s-cat-card h3 { font-size:18px; font-weight:800; color:var(--c-primary); margin-bottom:6px; }
.s-cat-card p { font-size:13px; color:var(--c-text-2); line-height:1.6; margin-bottom:12px; }
.s-cat-tags { display:flex; flex-wrap:wrap; gap:5px; }
.s-cat-tag {
    font-size:10px; font-weight:700; padding:3px 8px;
    border-radius:5px; background:var(--c-bg); color:var(--c-text-2);
}
.s-cat-status {
    position:absolute; top:14px; right:14px;
    font-size:10px; font-weight:800; padding:3px 9px;
    border-radius:5px; text-transform:uppercase; letter-spacing:.5px;
}
.s-cat-status.live { background:var(--c-success-bg); color:#16a34a; }
.s-cat-status.soon { background:var(--c-warning-bg); color:#d97706; }

/* Icon colors */
.s-cat-icon.pdf { background:#fbe9e7; color:#d84315; }
.s-cat-icon.img { background:#e3f2fd; color:#1565c0; }
.s-cat-icon.video { background:#f3e5f5; color:#6a1b9a; }
.s-cat-icon.ai { background:linear-gradient(135deg,#fff3ef,#fce4ec); color:var(--c-accent); }
.s-cat-icon.qr { background:#f5f5f5; color:#212121; }
.s-cat-icon.seo { background:#e8eaf6; color:#283593; }
.s-cat-icon.dev { background:#e0f2f1; color:#00695c; }
.s-cat-icon.doc { background:#fff8e1; color:#f57f17; }

/* ============================================
   🚀 CTA BANNER
   ============================================ */
.s-cta { max-width:1280px; margin:0 auto 72px; padding:0 24px; }
.s-cta-inner {
    background:linear-gradient(135deg,var(--c-primary) 0%,#162040 100%);
    border-radius:var(--r-xl); padding:48px 44px;
    display:flex; align-items:center; justify-content:space-between; gap:28px;
    position:relative; overflow:hidden;
}
.s-cta-inner::before {
    content:''; position:absolute; top:-40%; right:-8%;
    width:360px; height:360px;
    background:radial-gradient(circle,rgba(255,87,34,.12),transparent 70%);
    pointer-events:none;
}
.s-cta-text h2 { font-size:26px; font-weight:900; color:#fff; margin-bottom:8px; letter-spacing:-.4px; }
.s-cta-text p { font-size:15px; color:rgba(255,255,255,.55); max-width:400px; }
.s-cta-btn {
    display:inline-flex; align-items:center; gap:9px;
    padding:14px 32px; background:var(--c-accent); color:#fff;
    border:none; border-radius:var(--r-md); font-size:15px; font-weight:800;
    transition:all var(--tr); box-shadow:var(--sh-accent); white-space:nowrap;
}
.s-cta-btn:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(255,87,34,.3); color:#fff; }

/* ============================================
   📋 PDF LAYOUT (sidebar + main)
   ============================================ */
.pdf-layout {
    display:flex; min-height:100vh; padding-top:60px;
}

/* --- Sidebar --- */
.pdf-sidebar {
    width:var(--sidebar-w); background:var(--c-surface);
    border-right:1px solid var(--c-border);
    position:fixed; top:60px; left:0; bottom:0;
    overflow-y:auto; z-index:10;
    padding:16px 0;
    scrollbar-width:thin; scrollbar-color:var(--c-border) transparent;
}
.pdf-sidebar::-webkit-scrollbar { width:4px; }
.pdf-sidebar::-webkit-scrollbar-thumb { background:var(--c-border); border-radius:4px; }

.pdf-sidebar-title {
    font-size:10px; font-weight:800; text-transform:uppercase;
    letter-spacing:2.5px; color:var(--c-text-4);
    padding:0 16px; margin-bottom:10px;
}
.pdf-sidebar-item {
    display:flex; align-items:center; gap:10px;
    padding:10px 16px; cursor:pointer;
    transition:all var(--tr);
    border-left:3px solid transparent;
    color:var(--c-text-2);
}
.pdf-sidebar-item:hover { background:var(--c-bg); color:var(--c-text); }
.pdf-sidebar-item.active {
    background:var(--c-accent-soft); color:var(--c-accent);
    border-left-color:var(--c-accent);
}
.pdf-sidebar-item .si-icon {
    width:34px; height:34px; min-width:34px;
    border-radius:var(--r-sm);
    display:flex; align-items:center; justify-content:center;
    font-size:17px; transition:all var(--tr);
}
.pdf-sidebar-item.active .si-icon { background:var(--c-accent); color:#fff; }
.pdf-sidebar-item:not(.active) .si-icon { background:var(--c-bg); color:var(--c-text-3); }
.pdf-sidebar-item .si-info { flex:1; min-width:0; }
.pdf-sidebar-item .si-name {
    font-size:13px; font-weight:700; line-height:1.2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pdf-sidebar-item .si-desc {
    font-size:10px; color:var(--c-text-4); font-weight:500;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px;
}
.pdf-sidebar-item .si-badge {
    font-size:9px; font-weight:800; padding:2px 6px;
    border-radius:4px; text-transform:uppercase; letter-spacing:.4px;
    flex-shrink:0;
}
.si-badge.free { background:var(--c-success-bg); color:#16a34a; }
.si-badge.paid { background:var(--c-accent-soft); color:var(--c-accent); }
.si-badge.ai { background:linear-gradient(135deg,#fce4ec,#e3f2fd); color:#7c3aed; }

.pdf-sidebar-divider { height:1px; background:var(--c-border); margin:14px 16px; }
.pdf-sidebar-help { padding:8px 16px; }
.pdf-sidebar-help a {
    display:flex; align-items:center; gap:7px;
    font-size:12px; color:var(--c-text-4); font-weight:600;
    padding:7px 0; transition:color var(--tr);
}
.pdf-sidebar-help a:hover { color:var(--c-accent); }

/* --- Main area --- */
.pdf-main {
    flex:1; margin-left:var(--sidebar-w);
    padding:28px 36px; max-width:calc(100% - var(--sidebar-w));
}
.pdf-main-inner { max-width:700px; margin:0 auto; }

/* Tool header */
.tool-header { margin-bottom:24px; }
.tool-header h1 {
    font-size:24px; font-weight:900; color:var(--c-primary);
    display:flex; align-items:center; gap:10px; margin-bottom:4px;
}
.tool-header h1 .material-symbols-outlined { font-size:24px; color:var(--c-accent); }
.tool-header p { font-size:14px; color:var(--c-text-2); }

/* How-to steps */
.how-steps { display:flex; gap:10px; margin-bottom:24px; }
.how-step {
    flex:1; background:var(--c-surface); border:1px solid var(--c-border);
    border-radius:var(--r-md); padding:14px 10px; text-align:center;
}
.how-step-num {
    width:26px; height:26px; border-radius:50%;
    background:var(--c-accent); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:900; margin:0 auto 6px;
}
.how-step h4 { font-size:12px; font-weight:800; color:var(--c-primary); margin-bottom:2px; }
.how-step p { font-size:10px; color:var(--c-text-4); }

/* Info cards */
.info-section {
    margin-top:28px;
    display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.info-card {
    background:var(--c-surface); border:1px solid var(--c-border);
    border-radius:var(--r-md); padding:18px;
}
.info-card h4 {
    font-size:13px; font-weight:800; color:var(--c-primary);
    margin-bottom:8px; display:flex; align-items:center; gap:7px;
}
.info-card h4 .material-symbols-outlined { font-size:16px; color:var(--c-accent); }
.info-card li {
    padding:3px 0; font-size:12px; color:var(--c-text-2);
    display:flex; align-items:center; gap:5px;
}
.info-card li .material-symbols-outlined { font-size:13px; color:var(--c-success); }

/* Mobile sidebar */
.pdf-sidebar-toggle {
    display:none; position:fixed; bottom:20px; left:20px; z-index:20;
    width:46px; height:46px; border-radius:50%;
    background:var(--c-accent); color:#fff; border:none;
    box-shadow:var(--sh-accent); font-size:20px;
    align-items:center; justify-content:center;
}
.sidebar-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.25); z-index:40;
}
.sidebar-overlay.active { display:block; }

/* ============================================
   📤 UPLOAD ZONE
   ============================================ */
.s-upload-zone {
    border:2px dashed var(--c-border);
    border-radius:var(--r-xl); padding:48px 32px;
    text-align:center; background:var(--c-surface);
    transition:all var(--tr); cursor:pointer; position:relative;
}
.s-upload-zone:hover, .s-upload-zone.dragover {
    border-color:var(--c-accent); background:var(--c-accent-soft);
}
.s-upload-icon {
    width:68px; height:68px; margin:0 auto 16px;
    background:var(--c-bg); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:30px; color:var(--c-accent); transition:all var(--tr);
}
.s-upload-zone:hover .s-upload-icon {
    background:var(--c-accent); color:#fff;
    transform:scale(1.04); box-shadow:var(--sh-accent);
}
.s-upload-zone h3 { font-size:17px; font-weight:800; color:var(--c-primary); margin-bottom:6px; }
.s-upload-zone p { font-size:13px; color:var(--c-text-3); }
.s-upload-zone p strong { color:var(--c-accent); }
.s-upload-zone input { position:absolute; inset:0; opacity:0; cursor:pointer; }

/* ============================================
   📄 FILE LIST
   ============================================ */
.s-file-list { margin-top:16px; display:flex; flex-direction:column; gap:6px; }
.s-file-item {
    background:var(--c-surface); border:1px solid var(--c-border);
    border-radius:var(--r-md); padding:12px 14px;
    display:flex; align-items:center; gap:10px;
    animation:slideUp .25s var(--ease);
}
@keyframes slideUp {
    from { opacity:0; transform:translateY(6px); }
    to { opacity:1; transform:translateY(0); }
}
.s-file-icon {
    width:38px; height:38px; background:#fbe9e7; color:#d84315;
    border-radius:var(--r-sm); display:flex; align-items:center;
    justify-content:center; font-size:18px; flex-shrink:0;
}
.s-file-info { flex:1; min-width:0; }
.s-file-name {
    font-size:13px; font-weight:700; color:var(--c-primary);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.s-file-size { font-size:11px; color:var(--c-text-4); margin-top:1px; }
.s-file-remove {
    background:none; border:none; color:var(--c-text-4);
    padding:4px; border-radius:4px; transition:all var(--tr);
}
.s-file-remove:hover { color:var(--c-danger); background:#fef2f2; }

/* ============================================
   💰 PRICING BREAKDOWN
   ============================================ */
.s-breakdown {
    background:var(--c-surface); border:1px solid var(--c-border);
    border-radius:var(--r-md); padding:18px; margin-top:16px;
}
.s-breakdown h4 {
    font-size:11px; font-weight:800; color:var(--c-text-3);
    margin-bottom:10px; text-transform:uppercase; letter-spacing:1px;
}
.s-breakdown-row {
    display:flex; justify-content:space-between;
    padding:5px 0; font-size:13px; color:var(--c-text-2);
}
.s-breakdown-row.total {
    border-top:1.5px solid var(--c-border); margin-top:8px; padding-top:10px;
    font-weight:800; color:var(--c-primary); font-size:15px;
}

/* ============================================
   🔘 BUTTONS
   ============================================ */
.s-btn-process {
    display:flex; align-items:center; justify-content:center; gap:9px;
    width:100%; padding:15px; margin-top:20px;
    background:linear-gradient(135deg,var(--c-accent),#ff8a50);
    color:#fff; border:none; border-radius:var(--r-md);
    font-size:15px; font-weight:800;
    transition:all var(--tr); box-shadow:var(--sh-accent);
}
.s-btn-process:hover { transform:translateY(-1px); box-shadow:0 10px 28px rgba(255,87,34,.3); }
.s-btn-process:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

.s-btn-back {
    background:none; border:none; color:var(--c-text-3);
    font-size:13px; font-weight:600; display:flex; align-items:center; gap:5px;
    padding:7px 12px; border-radius:var(--r-sm); transition:all var(--tr);
}
.s-btn-back:hover { background:var(--c-bg); color:var(--c-text); }

.s-btn-download {
    display:inline-flex; align-items:center; gap:9px;
    padding:15px 40px; background:var(--c-success); color:#fff;
    border:none; border-radius:var(--r-md); font-size:15px; font-weight:800;
    transition:all var(--tr); box-shadow:0 6px 18px rgba(0,200,83,.25);
}
.s-btn-download:hover { background:#00b848; transform:translateY(-1px); color:#fff; }

/* ============================================
   ⏳ PROCESSING
   ============================================ */
.s-processing { text-align:center; padding:56px 16px; display:none; }
.s-processing.active { display:block; }
.s-spinner {
    width:48px; height:48px;
    border:3px solid var(--c-border); border-top-color:var(--c-accent);
    border-radius:50%; margin:0 auto 24px;
    animation:spin .65s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.s-progress {
    width:100%; max-width:340px; height:5px;
    background:var(--c-border); border-radius:100px;
    margin:20px auto 0; overflow:hidden;
}
.s-progress-bar {
    height:100%; background:linear-gradient(90deg,var(--c-accent),#ff8a50);
    border-radius:100px; width:0%; transition:width .35s ease;
}

/* ============================================
   ✅ RESULT PREVIEW
   ============================================ */
.s-result {
    background:var(--c-surface); border:1px solid var(--c-border);
    border-radius:var(--r-lg); padding:24px;
    margin-top:20px; text-align:center; display:none;
}
.s-result.active { display:block; animation:slideUp .35s var(--ease); }
.s-result-stats { display:flex; justify-content:center; gap:32px; margin:16px 0; }
.s-result-stat { text-align:center; }
.s-result-stat .label {
    font-size:11px; color:var(--c-text-4); font-weight:700;
    text-transform:uppercase; letter-spacing:.5px;
}
.s-result-stat .value { font-size:22px; font-weight:900; color:var(--c-primary); margin-top:3px; }
.s-result-stat .value.reduced { color:var(--c-success); }
.s-savings-badge {
    display:inline-flex; align-items:center; gap:5px;
    background:var(--c-success-bg); color:#16a34a;
    padding:6px 16px; border-radius:100px;
    font-size:13px; font-weight:800; margin-bottom:16px;
}

/* ============================================
   💳 PAYMENT MODAL
   ============================================ */
.s-pay-overlay {
    display:none; position:fixed; inset:0; z-index:300;
    background:rgba(12,19,34,.5); backdrop-filter:blur(8px);
    align-items:center; justify-content:center; padding:20px;
}
.s-pay-overlay.active { display:flex; }
.s-pay-modal {
    background:var(--c-surface); border-radius:var(--r-2xl);
    padding:36px; max-width:400px; width:100%; text-align:center;
    box-shadow:var(--sh-lg);
    animation:modalIn .35s cubic-bezier(.34,1.56,.64,1);
    position:relative;
}
@keyframes modalIn {
    from { opacity:0; transform:scale(.93) translateY(12px); }
    to { opacity:1; transform:scale(1) translateY(0); }
}
.s-modal-close {
    position:absolute; top:14px; right:14px;
    background:var(--c-bg); border:none;
    width:30px; height:30px; border-radius:50%;
    font-size:14px; color:var(--c-text-3);
    display:flex; align-items:center; justify-content:center;
    transition:all var(--tr);
}
.s-modal-close:hover { background:var(--c-border); }
.s-pay-amount { font-size:36px; font-weight:900; color:var(--c-accent); margin:14px 0; }
.s-pay-amount small { font-size:15px; color:var(--c-text-4); font-weight:500; }
.s-qr-box {
    background:var(--c-bg); border-radius:var(--r-md);
    padding:20px; margin:20px 0;
}
.s-qr-box img { width:180px; height:180px; border-radius:8px; border:1px solid var(--c-border); }
.s-pay-status {
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:12px; border-radius:var(--r-md);
    font-size:13px; font-weight:700; transition:all var(--tr);
}
.s-pay-status.waiting { background:var(--c-warning-bg); color:#c2410c; }
.s-pay-status.checking { background:#eff6ff; color:#1d4ed8; }
.s-pay-status.success { background:var(--c-success-bg); color:#166534; }
.s-pay-dot {
    width:8px; height:8px; border-radius:50%;
    animation:pulse 1.3s ease infinite;
}
.s-pay-status.waiting .s-pay-dot { background:var(--c-warning); }
.s-pay-status.success .s-pay-dot { background:var(--c-success); animation:none; }
@keyframes pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50% { opacity:.35; transform:scale(.7); }
}

/* ============================================
   🎉 DOWNLOAD SUCCESS
   ============================================ */
.s-download { text-align:center; padding:56px 16px; display:none; }
.s-download.active { display:block; animation:fadeUp .4s var(--ease); }
.s-success-icon {
    width:72px; height:72px; background:var(--c-success-bg);
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    margin:0 auto 24px; font-size:36px; color:var(--c-success);
    animation:bounceIn .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes bounceIn { from { transform:scale(0); } to { transform:scale(1); } }

/* ============================================
   📊 PRICING CARDS
   ============================================ */
.s-pricing-grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px;
}
.s-pricing-card {
    background:var(--c-surface); border:1px solid var(--c-border);
    border-radius:var(--r-xl); padding:32px;
    position:relative; transition:all var(--tr);
}
.s-pricing-card.featured {
    border-color:var(--c-accent);
    box-shadow:0 0 0 1px var(--c-accent), var(--sh-md);
}
.s-pricing-card.featured::before {
    content:'Phổ biến'; position:absolute; top:-10px; right:20px;
    background:var(--c-accent); color:#fff;
    padding:3px 12px; border-radius:5px;
    font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
}

/* ============================================
   🦶 FOOTER
   ============================================ */
.s-footer { background:var(--c-primary); color:var(--c-text-4); padding:48px 24px 24px; }
.s-footer-inner {
    max-width:1280px; margin:0 auto;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:36px;
}
.s-footer h4 {
    color:#fff; font-size:12px; font-weight:800;
    text-transform:uppercase; letter-spacing:1.5px; margin-bottom:14px;
}
.s-footer a { display:block; padding:3px 0; font-size:13px; transition:color var(--tr); }
.s-footer a:hover { color:#fff; }
.s-footer-bottom {
    max-width:1280px; margin:36px auto 0; padding-top:20px;
    border-top:1px solid var(--c-primary-50);
    display:flex; justify-content:space-between;
    font-size:12px; flex-wrap:wrap; gap:10px;
}

/* ============================================
   📱 RESPONSIVE
   ============================================ */
@media (max-width:900px) {
    .pdf-sidebar {
        transform:translateX(-100%); transition:transform .3s var(--ease);
        z-index:50; box-shadow:none;
    }
    .pdf-sidebar.open { transform:translateX(0); box-shadow:var(--sh-lg); }
    .pdf-main { margin-left:0; max-width:100%; padding:20px 16px; }
    .pdf-sidebar-toggle { display:flex; }
    .how-steps { flex-wrap:wrap; }
    .how-step { min-width:calc(50% - 6px); }
    .info-section { grid-template-columns:1fr; }
}
@media (max-width:768px) {
    .s-nav a:not(.s-btn-cta) { display:none; }
    .s-hero h1 { font-size:28px; }
    .s-cat-grid { grid-template-columns:1fr; }
    .s-cta-inner { flex-direction:column; text-align:center; padding:36px 24px; }
    .s-pricing-grid { grid-template-columns:1fr; }
    .s-upload-zone { padding:36px 20px; }
    .s-pay-modal { padding:28px 20px; }
    .s-result-stats { gap:16px; }
}
@media (max-width:480px) {
    .how-steps { flex-direction:column; }
    .s-result-stats { flex-direction:column; gap:8px; }
}

/* ============================================
   🔧 UTILITIES
   ============================================ */
.s-container { max-width:1280px; margin:0 auto; padding:0 24px; }
.s-hidden { display:none !important; }