<?php
declare(strict_types=1);

/**
 * KHO PREMIUM — ONE FILE PRODUCTION HOMEPAGE
 * PHP + SQLite + HTML5 + CSS + SVG + JavaScript + Three.js
 *
 * Yêu cầu:
 * - PHP 8+
 * - PDO SQLite
 *
 * Toàn bộ code ứng dụng nằm trong index.php.
 * SQLite chỉ là dữ liệu runtime tự sinh cạnh file này.
 */

session_start();

header('X-Content-Type-Options: nosniff');
header('X-Frame-Options: SAMEORIGIN');
header('Referrer-Policy: strict-origin-when-cross-origin');
header('Permissions-Policy: camera=(), microphone=(), geolocation=()');

/* =========================================================
   1. CONFIG
========================================================= */

const APP_NAME = 'KHO PREMIUM';
const DB_FILE = __DIR__ . '/khopremium.sqlite';

/**
 * Sửa route tại đây cho đúng website thực tế.
 * Có thể dùng ENV trên VPS thay vì sửa source.
 */
$toolRoutes = [
    'douyin' => getenv('TOOL_DOUYIN_URL') ?: '',
    'live-tiktok' => getenv('TOOL_LIVE_TIKTOK_URL') ?: '/tiktok_live_downloader/',
    'news' => getenv('TOOL_NEWS_URL') ?: '',
    'vietsub' => getenv('TOOL_VIETSUB_URL') ?: 'https://khopremium.com/vietsub-pro/',
    'review' => 'https://khopremium.com/review-pro/',
    'review-movie' => getenv('TOOL_REVIEW_MOVIE_URL') ?: '',
    'clone-review' => getenv('TOOL_CLONE_URL') ?: '',
    'story-ai' => getenv('TOOL_STORY_URL') ?: '',
    'review-product' => getenv('TOOL_REVIEW_PRODUCT_URL') ?: '/review-san-pham/',
];

$tools = [
    [
        'slug' => 'douyin',
        'name' => 'Tải Douyin Hàng Loạt',
        'short' => 'Douyin Downloader',
        'description' => 'Tải video Douyin theo kênh hoặc danh sách link, hỗ trợ xử lý hàng loạt.',
        'category' => 'download',
        'badge' => 'PRO',
        'icon' => 'download',
        'route' => $toolRoutes['douyin'],
        'featured' => true,
    ],
    [
        'slug' => 'live-tiktok',
        'name' => 'Tải Live TikTok',
        'short' => 'Live Capture',
        'description' => 'Ghi và tải livestream TikTok, quản lý nhiều tác vụ trực tiếp.',
        'category' => 'download',
        'badge' => 'LIVE',
        'icon' => 'live',
        'route' => $toolRoutes['live-tiktok'],
        'featured' => true,
    ],
    [
        'slug' => 'news',
        'name' => 'Tin Tức News',
        'short' => 'News Video',
        'description' => 'Biến nguồn tin, URL và dữ liệu thành video nội dung tự động.',
        'category' => 'content',
        'badge' => 'AI',
        'icon' => 'news',
        'route' => $toolRoutes['news'],
        'featured' => false,
    ],
    [
        'slug' => 'vietsub',
        'name' => 'Vietsub Pro',
        'short' => 'Subtitle AI',
        'description' => 'Nhận diện thoại, dịch và tạo phụ đề theo timeline video.',
        'category' => 'content',
        'badge' => 'AI',
        'icon' => 'subtitle',
        'route' => $toolRoutes['vietsub'],
        'featured' => false,
    ],
    [
        'slug' => 'review',
        'name' => 'Review Pro',
        'short' => 'Review Engine',
        'description' => 'Phân tích video và tạo nội dung review tự nhiên theo workflow.',
        'category' => 'content',
        'badge' => 'PRO',
        'icon' => 'star',
        'route' => $toolRoutes['review'],
        'featured' => false,
    ],
    [
        'slug' => 'review-movie',
        'name' => 'Review Phim TQ',
        'short' => 'Movie Review',
        'description' => 'Workflow xử lý và biên tập video review phim Trung Quốc.',
        'category' => 'content',
        'badge' => 'AI',
        'icon' => 'movie',
        'route' => $toolRoutes['review-movie'],
        'featured' => false,
    ],
    [
        'slug' => 'clone-review',
        'name' => 'Vietsub + Review Nhân Bản',
        'short' => 'Clone Workflow',
        'description' => 'Vietsub, review và tạo nhiều biến thể nội dung theo quy trình.',
        'category' => 'automation',
        'badge' => 'AUTO',
        'icon' => 'clone',
        'route' => $toolRoutes['clone-review'],
        'featured' => false,
    ],
    [
        'slug' => 'story-ai',
        'name' => 'Dựng Chuyện AI',
        'short' => 'AI Story',
        'description' => 'Biến nội dung thành video kể chuyện có cấu trúc bằng AI.',
        'category' => 'creation',
        'badge' => 'AI',
        'icon' => 'story',
        'route' => $toolRoutes['story-ai'],
        'featured' => false,
    ],
    [
        'slug' => 'review-product',
        'name' => 'Review Sản Phẩm PRO',
        'short' => 'Product Review',
        'description' => 'Phân tích sản phẩm, tự động tạo nội dung review bán hàng và dựng video hoàn chỉnh.',
        'category' => 'content',
        'badge' => 'PRO',
        'icon' => 'star',
        'route' => $toolRoutes['review-product'],
        'featured' => false,
    ],
];

/* =========================================================
   2. DATABASE
========================================================= */

try {
    $db = new PDO('sqlite:' . DB_FILE);
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $db->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);

    $db->exec("
        CREATE TABLE IF NOT EXISTS users (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            name TEXT NOT NULL,
            email TEXT NOT NULL UNIQUE,
            password_hash TEXT NOT NULL,
            created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP
        );

        CREATE TABLE IF NOT EXISTS favorites (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            user_id INTEGER NOT NULL,
            tool_slug TEXT NOT NULL,
            created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
            UNIQUE(user_id, tool_slug)
        );

        CREATE TABLE IF NOT EXISTS events (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            user_id INTEGER NULL,
            event_type TEXT NOT NULL,
            tool_slug TEXT NULL,
            visitor_hash TEXT NULL,
            created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP
        );

        CREATE TABLE IF NOT EXISTS contacts (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            name TEXT NOT NULL,
            email TEXT NOT NULL,
            message TEXT NOT NULL,
            created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP
        );
    ");
} catch (Throwable $e) {
    http_response_code(500);
    exit('Database initialization failed.');
}

/* =========================================================
   3. HELPERS
========================================================= */

function e(string $value): string
{
    return htmlspecialchars($value, ENT_QUOTES, 'UTF-8');
}

function csrfToken(): string
{
    if (empty($_SESSION['csrf'])) {
        $_SESSION['csrf'] = bin2hex(random_bytes(32));
    }
    return $_SESSION['csrf'];
}

function verifyCsrf(): void
{
    $token = $_POST['csrf'] ?? '';

    if (!$token || !hash_equals($_SESSION['csrf'] ?? '', (string)$token)) {
        jsonResponse(false, 'Phiên làm việc không hợp lệ.', 419);
    }
}

function jsonResponse(bool $ok, string $message, int $status = 200, array $data = []): never
{
    http_response_code($status);
    header('Content-Type: application/json; charset=utf-8');

    echo json_encode([
        'ok' => $ok,
        'message' => $message,
        'data' => $data,
    ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);

    exit;
}

function currentUserId(): ?int
{
    return isset($_SESSION['user_id']) ? (int)$_SESSION['user_id'] : null;
}

function visitorHash(): string
{
    $ip = $_SERVER['REMOTE_ADDR'] ?? 'unknown';
    $ua = $_SERVER['HTTP_USER_AGENT'] ?? 'unknown';

    return hash('sha256', $ip . '|' . $ua . '|khopremium');
}

function metric(PDO $db, string $sql): int
{
    return (int)$db->query($sql)->fetchColumn();
}

/* =========================================================
   4. AJAX / BACKEND ACTIONS
========================================================= */

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
    $action = (string)$_POST['action'];

    if ($action === 'login') {
        verifyCsrf();

        $email = strtolower(trim((string)($_POST['email'] ?? '')));
        $password = (string)($_POST['password'] ?? '');

        if (!filter_var($email, FILTER_VALIDATE_EMAIL) || $password === '') {
            jsonResponse(false, 'Email hoặc mật khẩu không hợp lệ.', 422);
        }

        $stmt = $db->prepare('SELECT id, name, email, password_hash FROM users WHERE email = ? LIMIT 1');
        $stmt->execute([$email]);
        $user = $stmt->fetch();

        if (!$user || !password_verify($password, $user['password_hash'])) {
            jsonResponse(false, 'Email hoặc mật khẩu không đúng.', 401);
        }

        session_regenerate_id(true);

        $_SESSION['user_id'] = (int)$user['id'];
        $_SESSION['user_name'] = (string)$user['name'];
        $_SESSION['user_email'] = (string)$user['email'];

        jsonResponse(true, 'Đăng nhập thành công.', 200, [
            'name' => $user['name'],
        ]);
    }

    if ($action === 'register') {
        verifyCsrf();

        $name = trim((string)($_POST['name'] ?? ''));
        $email = strtolower(trim((string)($_POST['email'] ?? '')));
        $password = (string)($_POST['password'] ?? '');

        if (strlen($name) < 2 || strlen($name) > 60) {
            jsonResponse(false, 'Tên phải từ 2 đến 60 ký tự.', 422);
        }

        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            jsonResponse(false, 'Email không hợp lệ.', 422);
        }

        if (strlen($password) < 8) {
            jsonResponse(false, 'Mật khẩu phải có ít nhất 8 ký tự.', 422);
        }

        try {
            $stmt = $db->prepare('
                INSERT INTO users (name, email, password_hash)
                VALUES (?, ?, ?)
            ');

            $stmt->execute([
                $name,
                $email,
                password_hash($password, PASSWORD_DEFAULT),
            ]);

            $id = (int)$db->lastInsertId();

            session_regenerate_id(true);

            $_SESSION['user_id'] = $id;
            $_SESSION['user_name'] = $name;
            $_SESSION['user_email'] = $email;

            jsonResponse(true, 'Tạo tài khoản thành công.');
        } catch (PDOException $e) {
            if (str_contains($e->getMessage(), 'UNIQUE')) {
                jsonResponse(false, 'Email này đã được sử dụng.', 409);
            }

            jsonResponse(false, 'Không thể tạo tài khoản.', 500);
        }
    }

    if ($action === 'logout') {
        verifyCsrf();

        $_SESSION = [];

        if (ini_get('session.use_cookies')) {
            $params = session_get_cookie_params();

            setcookie(
                session_name(),
                '',
                time() - 42000,
                $params['path'],
                $params['domain'],
                $params['secure'],
                $params['httponly']
            );
        }

        session_destroy();

        jsonResponse(true, 'Đã đăng xuất.');
    }

    if ($action === 'favorite') {
        verifyCsrf();

        $userId = currentUserId();

        if (!$userId) {
            jsonResponse(false, 'Bạn cần đăng nhập.', 401);
        }

        $slug = preg_replace('/[^a-z0-9\-]/', '', (string)($_POST['tool'] ?? ''));

        if ($slug === '') {
            jsonResponse(false, 'Tool không hợp lệ.', 422);
        }

        $check = $db->prepare('SELECT id FROM favorites WHERE user_id = ? AND tool_slug = ?');
        $check->execute([$userId, $slug]);

        if ($check->fetchColumn()) {
            $delete = $db->prepare('DELETE FROM favorites WHERE user_id = ? AND tool_slug = ?');
            $delete->execute([$userId, $slug]);

            jsonResponse(true, 'Đã bỏ yêu thích.', 200, ['favorite' => false]);
        }

        $insert = $db->prepare('INSERT INTO favorites (user_id, tool_slug) VALUES (?, ?)');
        $insert->execute([$userId, $slug]);

        jsonResponse(true, 'Đã thêm vào yêu thích.', 200, ['favorite' => true]);
    }

    if ($action === 'event') {
        $slug = preg_replace('/[^a-z0-9\-]/', '', (string)($_POST['tool'] ?? ''));
        $type = preg_replace('/[^a-z0-9_\-]/', '', (string)($_POST['type'] ?? 'tool_open'));

        $stmt = $db->prepare('
            INSERT INTO events (user_id, event_type, tool_slug, visitor_hash)
            VALUES (?, ?, ?, ?)
        ');

        $stmt->execute([
            currentUserId(),
            $type,
            $slug ?: null,
            visitorHash(),
        ]);

        jsonResponse(true, 'tracked');
    }

    if ($action === 'contact') {
        verifyCsrf();

        $name = trim((string)($_POST['name'] ?? ''));
        $email = trim((string)($_POST['email'] ?? ''));
        $message = trim((string)($_POST['message'] ?? ''));

        if (strlen($name) < 2) {
            jsonResponse(false, 'Vui lòng nhập tên.', 422);
        }

        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            jsonResponse(false, 'Email không hợp lệ.', 422);
        }

        if (strlen($message) < 10 || strlen($message) > 2000) {
            jsonResponse(false, 'Nội dung phải từ 10 đến 2000 ký tự.', 422);
        }

        $stmt = $db->prepare('
            INSERT INTO contacts (name, email, message)
            VALUES (?, ?, ?)
        ');

        $stmt->execute([$name, $email, $message]);

        jsonResponse(true, 'Đã gửi yêu cầu. Chúng tôi sẽ liên hệ lại.');
    }

    jsonResponse(false, 'Action không tồn tại.', 404);
}

/* =========================================================
   5. REAL METRICS
========================================================= */

$stats = [
    'tools' => count($tools),
    'accounts' => metric($db, 'SELECT COUNT(*) FROM users'),
    'opens' => metric($db, "SELECT COUNT(*) FROM events WHERE event_type = 'tool_open'"),
    'today' => metric($db, "SELECT COUNT(*) FROM events WHERE date(created_at) = date('now')"),
];

$userFavorites = [];

if ($uid = currentUserId()) {
    $stmt = $db->prepare('SELECT tool_slug FROM favorites WHERE user_id = ?');
    $stmt->execute([$uid]);
    $userFavorites = array_column($stmt->fetchAll(), 'tool_slug');
}

$csrf = csrfToken();

?>
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1, viewport-fit=cover">

    <title>Kho Premium — AI, Video & Automation Tools</title>

    <meta name="description"
          content="Hệ sinh thái công cụ AI, video, downloader và tự động hóa dành cho Creator.">

    <meta name="theme-color" content="#ff6a00">

    <style>
        /* =====================================================
           DESIGN TOKENS
        ===================================================== */

        :root {
            --orange: #ff6500;
            --orange-2: #ff7a00;
            --orange-3: #ff9700;
            --amber: #ffb224;
            --coral: #ff4f45;
            --peach: #fff0e5;

            --ink: #16120f;
            --ink-2: #26201b;
            --muted: #756c64;
            --muted-2: #9b9188;

            --white: #ffffff;
            --cream: #fffaf6;
            --cream-2: #fff6ef;
            --surface: rgba(255,255,255,.86);
            --line: rgba(78,52,33,.11);

            --shadow-sm:
                0 8px 22px rgba(81,45,15,.06);

            --shadow:
                0 22px 70px rgba(87,47,16,.10);

            --shadow-orange:
                0 18px 45px rgba(255,101,0,.24);

            --radius-sm: 12px;
            --radius: 18px;
            --radius-lg: 28px;

            --container: 1510px;

            --ease:
                cubic-bezier(.2,.8,.2,1);
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            color: var(--ink);
            font-family:
                Inter,
                ui-sans-serif,
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;

            background:
                radial-gradient(
                    900px 500px at 85% 8%,
                    rgba(255,168,77,.17),
                    transparent 65%
                ),
                radial-gradient(
                    700px 500px at 0% 35%,
                    rgba(255,92,36,.08),
                    transparent 60%
                ),
                #fff;

            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

        button,
        input,
        textarea {
            font: inherit;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        img,
        svg {
            display: block;
        }

        button {
            cursor: pointer;
        }

        ::selection {
            color: #fff;
            background: var(--orange);
        }

        .container {
            width:
                min(
                    calc(100% - 48px),
                    var(--container)
                );

            margin-inline: auto;
        }

        .section {
            position: relative;
            padding: 92px 0;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;

            padding: 8px 12px;

            color: var(--orange);
            background: #fff1e7;

            border:
                1px solid rgba(255,101,0,.12);

            border-radius: 999px;

            font-size: 12px;
            font-weight: 800;
            letter-spacing: .04em;
            text-transform: uppercase;
        }

        .eyebrow-dot {
            width: 7px;
            height: 7px;

            border-radius: 50%;

            background:
                linear-gradient(
                    135deg,
                    var(--orange),
                    var(--amber)
                );

            box-shadow:
                0 0 0 5px rgba(255,101,0,.08);
        }

        .section-title {
            margin: 18px 0 10px;

            font-size:
                clamp(34px, 4vw, 58px);

            line-height: .99;
            letter-spacing: -.045em;
        }

        .section-copy {
            max-width: 680px;
            margin: 0;

            color: var(--muted);

            font-size: 17px;
            line-height: 1.7;
        }

        /* =====================================================
           SVG SPRITE
        ===================================================== */

        .svg-sprite {
            width: 0;
            height: 0;
            position: absolute;
            overflow: hidden;
        }

        .icon {
            width: 22px;
            height: 22px;

            fill: none;
            stroke: currentColor;

            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        /* =====================================================
           HEADER
        ===================================================== */

        .site-header {
            position: sticky;
            top: 0;
            z-index: 1000;

            height: 76px;

            display: flex;
            align-items: center;

            background:
                rgba(255,255,255,.82);

            backdrop-filter:
                blur(18px);

            border-bottom:
                1px solid rgba(56,37,23,.08);
        }

        .nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 28px;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 11px;
            flex-shrink: 0;
        }

        .brand-mark {
            width: 40px;
            height: 40px;

            display: grid;
            place-items: center;

            color: #fff;

            font-size: 20px;
            font-weight: 900;

            border-radius: 11px;

            background:
                linear-gradient(
                    135deg,
                    #ff5700,
                    #ff9d00
                );

            box-shadow:
                0 9px 28px rgba(255,101,0,.24);
        }

        .brand-name {
            font-size: 16px;
            font-weight: 900;
            letter-spacing: -.02em;
        }

        .brand-sub {
            margin-top: 2px;

            color: var(--muted);

            font-size: 11px;
            font-weight: 500;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 8px;

            margin-left: auto;
            margin-right: auto;
        }

        .nav-link {
            position: relative;

            padding: 12px 15px;

            color: #39322d;

            border-radius: 10px;

            font-size: 14px;
            font-weight: 650;

            transition:
                color .18s var(--ease),
                background .18s var(--ease);
        }

        .nav-link:hover {
            color: var(--orange);
            background: #fff5ed;
        }

        .nav-link.active {
            color: var(--orange);
        }

        .nav-link.active::after {
            position: absolute;
            content: "";

            left: 15px;
            right: 15px;
            bottom: 5px;

            height: 2px;

            border-radius: 999px;

            background:
                linear-gradient(
                    90deg,
                    var(--orange),
                    var(--amber)
                );
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .button {
            min-height: 46px;

            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;

            padding: 0 20px;

            border:
                1px solid var(--line);

            border-radius: 12px;

            background: #fff;

            color: var(--ink);

            font-weight: 800;

            transition:
                transform .18s var(--ease),
                box-shadow .18s var(--ease),
                border-color .18s var(--ease);
        }

        .button:hover {
            transform: translateY(-2px);
            border-color:
                rgba(255,101,0,.25);
        }

        .button-primary {
            color: #fff;

            border: 0;

            background:
                linear-gradient(
                    125deg,
                    #ff5900 0%,
                    #ff7900 52%,
                    #ffa21b 100%
                );

            box-shadow:
                var(--shadow-orange);
        }

        .button-primary:hover {
            box-shadow:
                0 22px 52px rgba(255,101,0,.30);
        }

        .user-chip {
            display: flex;
            align-items: center;
            gap: 10px;

            padding: 7px 10px 7px 7px;

            border:
                1px solid var(--line);

            border-radius: 12px;
        }

        .user-avatar {
            width: 34px;
            height: 34px;

            display: grid;
            place-items: center;

            border-radius: 9px;

            background: #fff0e5;

            color: var(--orange);

            font-weight: 900;
        }

        .mobile-toggle {
            display: none;

            width: 44px;
            height: 44px;

            place-items: center;

            border:
                1px solid var(--line);

            border-radius: 10px;

            background: #fff;
        }

        /* =====================================================
           HERO
        ===================================================== */

        .hero {
            position: relative;
            overflow: hidden;

            padding:
                64px 0 48px;
        }

        #three-bg {
            position: absolute;
            inset: 0;
            z-index: -2;

            width: 100%;
            height: 100%;

            pointer-events: none;

            opacity: .7;
        }

        .hero-ombre {
            position: absolute;
            pointer-events: none;
            z-index: -1;

            width: 620px;
            height: 620px;

            right: -220px;
            top: -220px;

            border-radius: 50%;

            background:
                radial-gradient(
                    circle,
                    rgba(255,157,28,.19),
                    rgba(255,92,0,.08) 45%,
                    transparent 70%
                );

            filter: blur(12px);
        }

        .hero-grid {
            display: grid;

            grid-template-columns:
                minmax(0, .88fr)
                minmax(650px, 1.35fr);

            align-items: center;

            gap: 60px;

            min-height: 620px;
        }

        .hero-copy {
            padding: 20px 0;
        }

        .hero h1 {
            max-width: 670px;

            margin:
                22px 0 20px;

            font-size:
                clamp(50px, 5vw, 84px);

            line-height: .94;

            letter-spacing: -.055em;
        }

        .hero-gradient-text {
            color: transparent;

            background:
                linear-gradient(
                    100deg,
                    #ff5400,
                    #ff7a00 45%,
                    #ffad22
                );

            background-clip: text;
            -webkit-background-clip: text;
        }

        .hero-description {
            max-width: 610px;

            margin: 0;

            color: var(--muted);

            font-size:
                clamp(17px, 1.4vw, 20px);

            line-height: 1.7;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;

            margin-top: 30px;
        }

        .hero-actions .button {
            min-height: 54px;
            padding-inline: 24px;
        }

        .hero-features {
            display: flex;
            flex-wrap: wrap;

            gap: 22px;

            margin-top: 30px;
        }

        .hero-feature {
            display: flex;
            align-items: center;
            gap: 9px;

            color: #4e463f;

            font-size: 13px;
            font-weight: 700;
        }

        .hero-feature-icon {
            width: 30px;
            height: 30px;

            display: grid;
            place-items: center;

            color: var(--orange);

            border-radius: 9px;

            background: #fff2e8;
        }

        /* =====================================================
           DASHBOARD HERO
        ===================================================== */

        .dashboard-shell {
            position: relative;

            min-height: 520px;

            overflow: hidden;

            border:
                1px solid rgba(88,55,31,.12);

            border-radius: 24px;

            background:
                rgba(255,255,255,.92);

            box-shadow:
                0 35px 100px rgba(101,53,19,.15);

            backdrop-filter: blur(18px);
        }

        .dashboard-shell::before {
            position: absolute;
            content: "";

            width: 350px;
            height: 350px;

            right: -100px;
            top: -150px;

            border-radius: 50%;

            background:
                radial-gradient(
                    circle,
                    rgba(255,132,0,.13),
                    transparent 70%
                );
        }

        .dash-top {
            height: 61px;

            display: flex;
            align-items: center;
            justify-content: space-between;

            padding: 0 20px;

            border-bottom:
                1px solid var(--line);
        }

        .dash-brand {
            display: flex;
            align-items: center;
            gap: 9px;

            font-size: 12px;
            font-weight: 900;
        }

        .dash-brand-mark {
            width: 25px;
            height: 25px;

            display: grid;
            place-items: center;

            border-radius: 7px;

            color: #fff;

            background:
                linear-gradient(
                    135deg,
                    var(--orange),
                    var(--amber)
                );
        }

        .dash-top-right {
            display: flex;
            align-items: center;
            gap: 14px;

            color: var(--muted);

            font-size: 12px;
        }

        .dash-layout {
            display: grid;

            grid-template-columns:
                175px 1fr;

            min-height: 458px;
        }

        .dash-sidebar {
            padding: 18px 13px;

            background:
                linear-gradient(
                    180deg,
                    #fffaf6,
                    #fff
                );

            border-right:
                1px solid var(--line);
        }

        .dash-nav-item {
            display: flex;
            align-items: center;
            gap: 10px;

            padding: 11px 12px;

            margin-bottom: 4px;

            color: var(--muted);

            border-radius: 10px;

            font-size: 12px;
            font-weight: 650;
        }

        .dash-nav-item.active {
            color: var(--orange);

            background:
                linear-gradient(
                    90deg,
                    #fff0e5,
                    #fff8f2
                );

            font-weight: 850;
        }

        .dash-content {
            padding: 18px 20px 20px;
        }

        .dash-heading-row {
            display: flex;
            align-items: center;
            justify-content: space-between;

            margin-bottom: 16px;
        }

        .dash-heading {
            font-size: 15px;
            font-weight: 900;
        }

        .dash-live {
            display: flex;
            align-items: center;
            gap: 6px;

            color: var(--orange);

            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
        }

        .dash-live::before {
            content: "";

            width: 7px;
            height: 7px;

            border-radius: 50%;

            background: var(--orange);

            box-shadow:
                0 0 0 5px rgba(255,101,0,.09);
        }

        .dash-stats {
            display: grid;

            grid-template-columns:
                repeat(4, minmax(0,1fr));

            gap: 10px;

            margin-bottom: 13px;
        }

        .dash-stat {
            padding: 14px;

            border:
                1px solid var(--line);

            border-radius: 13px;

            background:
                linear-gradient(
                    160deg,
                    #fff,
                    #fffaf6
                );

            box-shadow:
                0 8px 22px rgba(84,46,16,.04);
        }

        .dash-stat-label {
            color: var(--muted-2);

            font-size: 9px;
            font-weight: 700;
        }

        .dash-stat-value {
            margin-top: 7px;

            font-size: 23px;
            font-weight: 900;
            letter-spacing: -.04em;
        }

        .dash-stat-note {
            margin-top: 4px;

            color: var(--orange);

            font-size: 9px;
            font-weight: 800;
        }

        .workflow-panel {
            padding: 16px;

            border:
                1px solid var(--line);

            border-radius: 14px;

            background: #fff;
        }

        .workflow-mini-title {
            margin-bottom: 19px;

            font-size: 12px;
            font-weight: 900;
        }

        .workflow-mini {
            position: relative;

            display: grid;

            grid-template-columns:
                repeat(5,1fr);

            text-align: center;
        }

        .workflow-mini::before {
            position: absolute;
            content: "";

            top: 14px;
            left: 10%;
            right: 10%;

            height: 2px;

            background:
                linear-gradient(
                    90deg,
                    var(--orange),
                    var(--amber),
                    #f0e8e2
                );

            z-index: 0;
        }

        .mini-step {
            position: relative;
            z-index: 1;
        }

        .mini-circle {
            width: 30px;
            height: 30px;

            display: grid;
            place-items: center;

            margin-inline: auto;

            border:
                2px solid #f0e8e2;

            border-radius: 50%;

            color: var(--muted);

            background: #fff;

            font-size: 10px;
            font-weight: 850;
        }

        .mini-step.done .mini-circle {
            color: #fff;

            border-color: var(--orange);

            background:
                linear-gradient(
                    135deg,
                    var(--orange),
                    var(--orange-3)
                );
        }

        .mini-step-name {
            margin-top: 8px;

            color: #574d45;

            font-size: 8px;
            font-weight: 750;
        }

        .task-list {
            display: grid;
            gap: 8px;

            margin-top: 12px;
        }

        .task {
            display: grid;

            grid-template-columns:
                38px 1fr auto;

            align-items: center;

            gap: 10px;

            padding: 9px;

            border:
                1px solid var(--line);

            border-radius: 11px;

            background: #fff;
        }

        .task-thumb {
            width: 38px;
            height: 30px;

            border-radius: 8px;

            background:
                linear-gradient(
                    135deg,
                    #ff7427,
                    #ffd5b3
                );
        }

        .task:nth-child(2) .task-thumb {
            background:
                linear-gradient(
                    135deg,
                    #ffb224,
                    #fff0c0
                );
        }

        .task:nth-child(3) .task-thumb {
            background:
                linear-gradient(
                    135deg,
                    #ff4f45,
                    #ffc6bf
                );
        }

        .task-name {
            font-size: 9px;
            font-weight: 850;
        }

        .progress {
            height: 4px;

            overflow: hidden;

            margin-top: 6px;

            border-radius: 999px;

            background: #f2ebe6;
        }

        .progress-bar {
            height: 100%;

            border-radius: inherit;

            background:
                linear-gradient(
                    90deg,
                    var(--orange),
                    var(--amber)
                );
        }

        .task-status {
            color: var(--orange);

            font-size: 8px;
            font-weight: 850;
        }

        /* =====================================================
           QUICK STRIP
        ===================================================== */

        .benefit-strip {
            display: grid;

            grid-template-columns:
                repeat(4,1fr);

            border:
                1px solid var(--line);

            border-radius: 18px;

            background:
                rgba(255,255,255,.88);

            box-shadow: var(--shadow-sm);
        }

        .benefit {
            display: flex;
            align-items: center;
            justify-content: center;

            gap: 12px;

            padding: 21px 20px;
        }

        .benefit + .benefit {
            border-left:
                1px solid var(--line);
        }

        .benefit-icon {
            width: 36px;
            height: 36px;

            display: grid;
            place-items: center;

            color: var(--orange);

            border-radius: 11px;

            background:
                linear-gradient(
                    135deg,
                    #fff1e6,
                    #fff8f2
                );
        }

        .benefit strong {
            display: block;
            font-size: 13px;
        }

        .benefit span {
            display: block;

            margin-top: 3px;

            color: var(--muted);

            font-size: 11px;
        }

        /* =====================================================
           TOOLS
        ===================================================== */

        .tools-section {
            padding-top: 74px;

            background:
                linear-gradient(
                    180deg,
                    transparent,
                    rgba(255,248,242,.66),
                    transparent
                );
        }

        .section-head {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;

            gap: 24px;

            margin-bottom: 34px;
        }

        .tools-controls {
            display: flex;
            align-items: center;
            gap: 10px;

            flex-wrap: wrap;
        }

        .search-box {
            width: 280px;
            height: 44px;

            display: flex;
            align-items: center;
            gap: 9px;

            padding: 0 13px;

            border:
                1px solid var(--line);

            border-radius: 12px;

            background: #fff;
        }

        .search-box input {
            width: 100%;

            border: 0;
            outline: 0;

            color: var(--ink);
            background: transparent;
        }

        .filter-button {
            height: 44px;

            padding: 0 14px;

            color: var(--muted);

            border:
                1px solid var(--line);

            border-radius: 11px;

            background: #fff;

            font-size: 12px;
            font-weight: 750;
        }

        .filter-button.active {
            color: #fff;
            border-color: transparent;

            background:
                linear-gradient(
                    135deg,
                    var(--orange),
                    var(--orange-3)
                );
        }

        .tools-grid {
            display: grid;

            grid-template-columns:
                repeat(12, 1fr);

            gap: 14px;
        }

        .tool-card {
            position: relative;

            grid-column: span 4;

            min-height: 210px;

            display: flex;
            flex-direction: column;

            padding: 21px;

            overflow: hidden;

            border:
                1px solid var(--line);

            border-radius: 18px;

            background:
                rgba(255,255,255,.94);

            box-shadow:
                0 10px 35px rgba(77,43,18,.05);

            transition:
                transform .22s var(--ease),
                box-shadow .22s var(--ease),
                border-color .22s var(--ease);
        }

        .tool-card:hover {
            transform: translateY(-4px);

            border-color:
                rgba(255,101,0,.27);

            box-shadow:
                0 22px 54px rgba(87,47,17,.10);
        }

        .tool-card.review-product-clickable {
            cursor: pointer;
        }

        .tool-card.featured {
            grid-column: span 6;
            min-height: 235px;
        }

        .tool-card.featured::before {
            position: absolute;
            content: "";

            width: 230px;
            height: 230px;

            right: -75px;
            top: -85px;

            border-radius: 50%;

            background:
                radial-gradient(
                    circle,
                    rgba(255,137,20,.15),
                    transparent 70%
                );
        }

        .tool-card-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;

            gap: 15px;
        }

        .tool-icon {
            width: 48px;
            height: 48px;

            display: grid;
            place-items: center;

            color: var(--orange);

            border-radius: 14px;

            background:
                linear-gradient(
                    145deg,
                    #fff0e4,
                    #fffaf6
                );

            border:
                1px solid rgba(255,101,0,.10);
        }

        .tool-badge {
            padding: 6px 8px;

            color: var(--orange);

            border:
                1px solid rgba(255,101,0,.14);

            border-radius: 999px;

            background: #fff6ee;

            font-size: 9px;
            font-weight: 900;
            letter-spacing: .08em;
        }

        .tool-card h3 {
            margin:
                20px 0 8px;

            font-size: 20px;
            letter-spacing: -.025em;
        }

        .tool-card p {
            max-width: 390px;

            margin: 0;

            color: var(--muted);

            font-size: 13px;
            line-height: 1.6;
        }

        .tool-card-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;

            margin-top: auto;
            padding-top: 18px;
        }

        .tool-category {
            color: var(--muted-2);

            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .08em;
        }

        .tool-actions {
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .favorite-btn,
        .open-tool-btn {
            height: 36px;

            display: inline-flex;
            align-items: center;
            justify-content: center;

            border:
                1px solid var(--line);

            border-radius: 10px;

            background: #fff;
        }

        .favorite-btn {
            width: 36px;
            color: var(--muted);
        }

        .favorite-btn.active {
            color: #fff;
            border-color: var(--orange);
            background: var(--orange);
        }

        .open-tool-btn {
            gap: 7px;

            padding: 0 12px;

            color: var(--orange);

            font-size: 11px;
            font-weight: 850;
        }

        .open-tool-btn.available {
            color: #fff;
            border-color: transparent;

            background:
                linear-gradient(
                    135deg,
                    var(--orange),
                    var(--orange-3)
                );
        }

        /* =====================================================
           WORKFLOW
        ===================================================== */

        .workflow-section {
            overflow: hidden;
        }

        .workflow-grid {
            position: relative;

            display: grid;

            grid-template-columns:
                repeat(5, 1fr);

            gap: 12px;

            margin-top: 38px;
        }

        .workflow-card {
            position: relative;

            min-height: 175px;

            padding: 22px;

            border:
                1px solid var(--line);

            border-radius: 17px;

            background: #fff;

            box-shadow:
                0 10px 30px rgba(70,39,18,.04);
        }

        .workflow-number {
            width: 34px;
            height: 34px;

            display: grid;
            place-items: center;

            color: #fff;

            border-radius: 50%;

            background:
                linear-gradient(
                    135deg,
                    var(--orange),
                    var(--amber)
                );

            font-size: 12px;
            font-weight: 900;
        }

        .workflow-card h3 {
            margin:
                20px 0 7px;

            font-size: 15px;
        }

        .workflow-card p {
            margin: 0;

            color: var(--muted);

            font-size: 12px;
            line-height: 1.55;
        }

        .workflow-arrow {
            position: absolute;

            right: -21px;
            top: 50%;

            z-index: 3;

            width: 30px;

            color: rgba(255,101,0,.45);
        }

        /* =====================================================
           AUDIENCE
        ===================================================== */

        .audience-shell {
            padding: 32px;

            border-radius: 26px;

            background:
                linear-gradient(
                    125deg,
                    #fff5eb,
                    #fff,
                    #fff7f1
                );

            border:
                1px solid rgba(255,101,0,.11);
        }

        .audience-grid {
            display: grid;

            grid-template-columns:
                repeat(4,1fr);

            gap: 12px;

            margin-top: 25px;
        }

        .audience-card {
            padding: 20px;

            border:
                1px solid var(--line);

            border-radius: 16px;

            background: rgba(255,255,255,.9);
        }

        .audience-card-icon {
            width: 42px;
            height: 42px;

            display: grid;
            place-items: center;

            margin-bottom: 16px;

            border-radius: 13px;

            color: var(--orange);

            background:
                linear-gradient(
                    135deg,
                    #ffe9d8,
                    #fff8f2
                );
        }

        .audience-card h3 {
            margin: 0 0 7px;
            font-size: 15px;
        }

        .audience-card p {
            margin: 0;

            color: var(--muted);

            font-size: 12px;
            line-height: 1.55;
        }

        /* =====================================================
           REAL STATS
        ===================================================== */

        .metrics {
            display: grid;

            grid-template-columns:
                repeat(4,1fr);

            overflow: hidden;

            border:
                1px solid var(--line);

            border-radius: 20px;

            background: #fff;

            box-shadow: var(--shadow-sm);
        }

        .metric {
            position: relative;

            padding: 28px;

            text-align: center;
        }

        .metric + .metric::before {
            position: absolute;
            content: "";

            left: 0;
            top: 24px;
            bottom: 24px;

            width: 1px;

            background: var(--line);
        }

        .metric-value {
            color: transparent;

            background:
                linear-gradient(
                    100deg,
                    var(--orange),
                    var(--amber)
                );

            background-clip: text;
            -webkit-background-clip: text;

            font-size: 38px;
            font-weight: 950;
            letter-spacing: -.05em;
        }

        .metric-label {
            margin-top: 4px;

            color: var(--muted);

            font-size: 12px;
            font-weight: 650;
        }

        /* =====================================================
           CTA
        ===================================================== */

        .cta {
            position: relative;

            overflow: hidden;

            padding: 52px;

            border-radius: 30px;

            color: #fff;

            background:
                linear-gradient(
                    120deg,
                    #ff5500 0%,
                    #ff7300 45%,
                    #ff9e19 100%
                );

            box-shadow:
                0 34px 80px rgba(255,101,0,.24);
        }

        .cta::after {
            position: absolute;
            content: "";

            width: 420px;
            height: 420px;

            right: -100px;
            top: -190px;

            border-radius: 50%;

            border:
                70px solid rgba(255,255,255,.08);
        }

        .cta h2 {
            position: relative;
            z-index: 1;

            max-width: 720px;

            margin: 0;

            font-size:
                clamp(36px, 4vw, 60px);

            line-height: 1;
            letter-spacing: -.045em;
        }

        .cta p {
            position: relative;
            z-index: 1;

            max-width: 640px;

            margin: 16px 0 26px;

            color:
                rgba(255,255,255,.85);

            font-size: 16px;
            line-height: 1.65;
        }

        .cta-actions {
            position: relative;
            z-index: 1;

            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .cta .button {
            border: 0;
        }

        .cta .button-light {
            color: var(--orange);
            background: #fff;
        }

        .cta .button-ghost {
            color: #fff;

            background:
                rgba(255,255,255,.10);

            border:
                1px solid rgba(255,255,255,.24);
        }

        /* =====================================================
           FOOTER
        ===================================================== */

        .footer {
            margin-top: 95px;

            padding:
                50px 0 28px;

            border-top:
                1px solid var(--line);

            background: #fffaf6;
        }

        .footer-grid {
            display: grid;

            grid-template-columns:
                1.7fr
                repeat(3,1fr);

            gap: 45px;
        }

        .footer-brand p {
            max-width: 330px;

            color: var(--muted);

            font-size: 12px;
            line-height: 1.65;
        }

        .footer-col h4 {
            margin:
                0 0 15px;

            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: .08em;
        }

        .footer-col a {
            display: block;

            margin-bottom: 10px;

            color: var(--muted);

            font-size: 12px;
        }

        .footer-col a:hover {
            color: var(--orange);
        }

        .footer-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;

            gap: 20px;

            margin-top: 42px;
            padding-top: 20px;

            color: var(--muted-2);

            border-top:
                1px solid var(--line);

            font-size: 11px;
        }

        /* =====================================================
           MODAL
        ===================================================== */

        .modal-overlay {
            position: fixed;
            inset: 0;
            z-index: 3000;

            display: none;
            place-items: center;

            padding: 20px;

            background:
                rgba(24,15,9,.42);

            backdrop-filter:
                blur(8px);
        }

        .modal-overlay.open {
            display: grid;
        }

        .modal {
            width: min(100%, 460px);

            padding: 27px;

            border-radius: 22px;

            background: #fff;

            box-shadow:
                0 40px 120px rgba(42,20,5,.25);
        }

        .modal-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;

            gap: 20px;

            margin-bottom: 22px;
        }

        .modal h3 {
            margin: 0;

            font-size: 25px;
            letter-spacing: -.035em;
        }

        .modal-sub {
            margin-top: 5px;

            color: var(--muted);

            font-size: 12px;
        }

        .close-modal {
            width: 36px;
            height: 36px;

            border:
                1px solid var(--line);

            border-radius: 10px;

            background: #fff;
        }

        .form-grid {
            display: grid;
            gap: 13px;
        }

        .field label {
            display: block;

            margin-bottom: 6px;

            color: #4c433c;

            font-size: 11px;
            font-weight: 800;
        }

        .field input,
        .field textarea {
            width: 100%;

            border:
                1px solid var(--line);

            border-radius: 11px;

            outline: 0;

            background: #fff;

            transition:
                border-color .18s,
                box-shadow .18s;
        }

        .field input {
            height: 47px;
            padding: 0 13px;
        }

        .field textarea {
            min-height: 120px;
            resize: vertical;
            padding: 13px;
        }

        .field input:focus,
        .field textarea:focus {
            border-color:
                rgba(255,101,0,.5);

            box-shadow:
                0 0 0 4px rgba(255,101,0,.08);
        }

        .modal-switch {
            margin-top: 16px;

            color: var(--muted);

            text-align: center;

            font-size: 12px;
        }

        .modal-switch button {
            padding: 0;

            color: var(--orange);

            border: 0;
            background: none;

            font-weight: 800;
        }

        /* =====================================================
           TOAST
        ===================================================== */

        .toast-stack {
            position: fixed;

            right: 20px;
            bottom: 20px;

            z-index: 5000;

            display: grid;
            gap: 9px;
        }

        .toast {
            min-width: 260px;
            max-width: 360px;

            padding: 13px 15px;

            color: #fff;

            border-radius: 12px;

            background: #241d18;

            box-shadow:
                0 20px 55px rgba(0,0,0,.2);

            font-size: 12px;
            font-weight: 650;

            animation:
                toast-in .25s var(--ease);
        }

        .toast.success {
            background:
                linear-gradient(
                    135deg,
                    #ff5c00,
                    #ff8800
                );
        }

        @keyframes toast-in {
            from {
                opacity: 0;
                transform:
                    translateY(12px)
                    scale(.98);
            }
        }

        /* =====================================================
           REVEAL
        ===================================================== */

        .reveal {
            opacity: 0;

            transform:
                translateY(24px);

            transition:
                opacity .6s var(--ease),
                transform .6s var(--ease);
        }

        .reveal.visible {
            opacity: 1;
            transform: none;
        }

        /* =====================================================
           RESPONSIVE
        ===================================================== */

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

            .hero-copy {
                max-width: 820px;
            }

            .dashboard-shell {
                max-width: 1050px;
            }

            .tools-grid .tool-card {
                grid-column: span 6;
            }

            .workflow-grid {
                grid-template-columns:
                    repeat(3,1fr);
            }

            .workflow-arrow {
                display: none;
            }
        }

        @media (max-width: 950px) {
            .nav-links,
            .nav-actions > .button {
                display: none;
            }

            .mobile-toggle {
                display: grid;
            }

            .nav-links.mobile-open {
                position: absolute;

                display: grid;

                top: 74px;
                left: 20px;
                right: 20px;

                padding: 14px;

                border:
                    1px solid var(--line);

                border-radius: 16px;

                background: #fff;

                box-shadow: var(--shadow);
            }

            .benefit-strip {
                grid-template-columns:
                    repeat(2,1fr);
            }

            .benefit:nth-child(3) {
                border-left: 0;
                border-top:
                    1px solid var(--line);
            }

            .benefit:nth-child(4) {
                border-top:
                    1px solid var(--line);
            }

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

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

            .metric:nth-child(3)::before {
                display: none;
            }

            .metric:nth-child(n+3) {
                border-top:
                    1px solid var(--line);
            }

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

        @media (max-width: 720px) {
            .container {
                width:
                    min(
                        calc(100% - 28px),
                        var(--container)
                    );
            }

            .section {
                padding: 66px 0;
            }

            .hero {
                padding-top: 36px;
            }

            .hero-grid {
                min-height: auto;
                gap: 34px;
            }

            .hero h1 {
                font-size:
                    clamp(45px, 14vw, 67px);
            }

            .hero-features {
                display: grid;
                grid-template-columns: 1fr 1fr;
            }

            .dash-layout {
                grid-template-columns: 1fr;
            }

            .dash-sidebar {
                display: none;
            }

            .dash-content {
                padding: 14px;
            }

            .dash-stats {
                grid-template-columns:
                    repeat(2,1fr);
            }

            .dashboard-shell {
                min-height: auto;
            }

            .benefit-strip {
                grid-template-columns: 1fr;
            }

            .benefit {
                justify-content: flex-start;
            }

            .benefit + .benefit {
                border-left: 0;
                border-top:
                    1px solid var(--line);
            }

            .section-head {
                align-items: flex-start;
                flex-direction: column;
            }

            .tools-controls {
                width: 100%;
            }

            .search-box {
                width: 100%;
            }

            .tools-grid .tool-card,
            .tools-grid .tool-card.featured {
                grid-column: 1 / -1;
            }

            .workflow-grid {
                grid-template-columns: 1fr;
            }

            .audience-grid {
                grid-template-columns: 1fr;
            }

            .metrics {
                grid-template-columns: 1fr;
            }

            .metric + .metric::before {
                display: none;
            }

            .metric + .metric {
                border-top:
                    1px solid var(--line);
            }

            .cta {
                padding: 34px 25px;
            }

            .footer-grid {
                grid-template-columns: 1fr;
            }

            .footer-bottom {
                align-items: flex-start;
                flex-direction: column;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                scroll-behavior: auto !important;
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .01ms !important;
            }

            #three-bg {
                display: none;
            }
        }
    

/* BRAND PREMIUM PATCH START */

/* =========================================================
   PREMIUM CENTER BRAND HEADER
========================================================= */

.premium-header {
    height: 92px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.96),
            rgba(255,255,255,.88)
        );

    border-bottom:
        1px solid rgba(67,43,27,.08);

    box-shadow:
        0 8px 34px rgba(84,45,17,.035);
}

.nav-premium {
    height: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: center;

    gap: 30px;
}


/* menu trái */

.nav-premium .nav-left {
    justify-self: start;

    margin: 0;

    gap: 2px;
}

.nav-premium .nav-left .nav-link {
    padding:
        12px 13px;

    font-size: 13px;

    font-weight: 720;
}


/* =========================================================
   BRAND CENTER
========================================================= */

.brand-center {
    position: relative;

    justify-self: center;

    display: inline-flex;
    align-items: center;

    gap: 13px;

    min-width: max-content;

    padding:
        7px 14px 7px 7px;

    border-radius: 18px;

    isolation: isolate;

    transition:
        transform .24s var(--ease),
        background .24s var(--ease),
        box-shadow .24s var(--ease);
}

.brand-center::before {
    position: absolute;

    content: "";

    inset: 0;

    z-index: -1;

    border-radius: inherit;

    opacity: 0;

    background:
        linear-gradient(
            105deg,
            rgba(255,91,0,.06),
            rgba(255,172,45,.035),
            rgba(255,255,255,.5)
        );

    border:
        1px solid rgba(255,102,0,.06);

    transition:
        opacity .24s var(--ease);
}

.brand-center:hover {
    transform:
        translateY(-1px);
}

.brand-center:hover::before {
    opacity: 1;
}


/* =========================================================
   THREE.JS / SVG LOGO HOLDER
========================================================= */

.brand-visual {
    position: relative;

    width: 62px;
    height: 62px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;
}

#brand-three {
    position: absolute;

    inset: -14px;

    width:
        calc(100% + 28px);

    height:
        calc(100% + 28px);

    pointer-events: none;

    opacity: .9;

    filter:
        saturate(1.08);
}

.brand-emblem {
    position: relative;

    z-index: 2;

    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    filter:
        drop-shadow(
            0 11px 14px rgba(255,101,0,.16)
        );

    transition:
        transform .28s var(--ease);
}

.brand-emblem svg {
    width: 100%;
    height: 100%;
}

.brand-center:hover
.brand-emblem {
    transform:
        rotate(-2deg)
        scale(1.045);
}


/* =========================================================
   WORDMARK
========================================================= */

.brand-copy {
    display: flex;
    flex-direction: column;

    justify-content: center;

    min-width: 0;

    transform:
        translateY(1px);
}

.brand-name {
    display: flex;
    align-items: baseline;

    gap: 6px;

    margin: 0;

    white-space: nowrap;

    font-size: 20px;

    font-weight: 950;

    line-height: 1;

    letter-spacing: -.055em;
}

.brand-name-kho {
    color: transparent;

    background:
        linear-gradient(
            110deg,
            #ff4f00,
            #ff7800,
            #ffa116
        );

    background-clip: text;
    -webkit-background-clip: text;
}

.brand-name-premium {
    color: #18120e;
}

.brand-sub {
    display: block;

    margin-top: 6px;

    color: #9b8575;

    font-size: 8px;

    line-height: 1;

    font-weight: 850;

    letter-spacing: .19em;

    white-space: nowrap;
}


/* =========================================================
   ACTION PHẢI
========================================================= */

.nav-premium .nav-actions {
    justify-self: end;

    margin: 0;
}


/* button header tinh hơn */

.premium-header
.nav-actions
.button {
    min-height: 42px;

    border-radius: 11px;

    padding-inline: 17px;

    font-size: 12px;
}


/* =========================================================
   DECORATIVE BRAND LINES
========================================================= */

.brand-center::after {
    position: absolute;

    content: "";

    width: 80px;
    height: 1px;

    left: 50%;

    bottom: -8px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,99,0,.7),
            rgba(255,174,35,.9),
            rgba(255,99,0,.7),
            transparent
        );

    opacity: .55;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 1180px) {

    .nav-premium {
        gap: 15px;
    }

    .nav-premium
    .nav-left
    .nav-link {
        padding-inline: 9px;

        font-size: 12px;
    }

    .brand-name {
        font-size: 17px;
    }

    .brand-sub {
        letter-spacing: .12em;
    }

    .brand-visual {
        width: 54px;
        height: 54px;
    }

    .brand-emblem {
        width: 45px;
        height: 45px;
    }
}


@media (max-width: 950px) {

    .premium-header {
        height: 76px;
    }

    .nav-premium {
        grid-template-columns:
            1fr
            auto;

        gap: 12px;
    }

    .brand-center {
        grid-column: 1;

        grid-row: 1;

        justify-self: start;

        padding-left: 0;

        gap: 8px;
    }

    .nav-premium .nav-actions {
        grid-column: 2;

        grid-row: 1;
    }

    .nav-premium .nav-left {
        position: absolute;

        display: none;

        top: 76px;
        left: 14px;
        right: 14px;

        z-index: 100;

        padding: 12px;

        border:
            1px solid var(--line);

        border-radius: 16px;

        background:
            rgba(255,255,255,.98);

        box-shadow:
            0 25px 60px rgba(55,30,13,.14);

        backdrop-filter:
            blur(18px);
    }

    .nav-premium
    .nav-left.mobile-open {
        display: grid;
    }

    .brand-visual {
        width: 46px;
        height: 46px;
    }

    .brand-emblem {
        width: 41px;
        height: 41px;
    }

    .brand-name {
        font-size: 15px;

        letter-spacing: -.04em;
    }

    .brand-sub {
        display: none;
    }

    .brand-center::after {
        display: none;
    }

}


@media (max-width: 430px) {

    .brand-name {
        font-size: 14px;
    }

    .brand-name {
        gap: 4px;
    }

    .brand-visual {
        width: 42px;
        height: 42px;
    }

    .brand-emblem {
        width: 38px;
        height: 38px;
    }

}


/* HIEU PHAM DEV SIDEKICK START */

/* brand tổng thể rộng hơn một chút */
.brand-center {
    gap: 16px;
}

/* khói quanh logo chính */
.brand-visual::before,
.brand-visual::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 1;
    border-radius: 999px;
    filter: blur(14px);
    opacity: .38;
    animation: brandSmokeOrbit 8.5s ease-in-out infinite;
}

.brand-visual::before {
    width: 38px;
    height: 18px;
    left: -8px;
    top: 6px;
    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.72) 0%,
            rgba(255,208,176,.28) 42%,
            rgba(255,164,99,0) 76%
        );
}

.brand-visual::after {
    width: 44px;
    height: 22px;
    right: -10px;
    bottom: 0;
    background:
        radial-gradient(
            circle,
            rgba(255,244,235,.72) 0%,
            rgba(255,191,138,.25) 45%,
            rgba(255,150,84,0) 78%
        );
    animation-delay: -2.4s;
}

/* cụm Hieu Pham Dev bên phải */
.brand-sidekick {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 14px;

    margin-left: 8px;
}

.brand-divider {
    width: 1px;
    height: 34px;
    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            rgba(255,121,0,0),
            rgba(255,121,0,.58),
            rgba(255,171,26,.9),
            rgba(255,121,0,.58),
            rgba(255,121,0,0)
        );
}

.dev-mark-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 0;
}

.dev-pill {
    position: relative;
    z-index: 3;

    min-height: 42px;

    display: inline-flex;
    align-items: center;

    padding: 0 16px 0 38px;

    overflow: hidden;

    border:
        1px solid rgba(255,122,0,.24);

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            rgba(24,18,14,.98),
            rgba(50,35,24,.96)
        );

    box-shadow:
        0 14px 34px rgba(255,102,0,.16),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.dev-pill::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,0)
        );

    pointer-events: none;
}

.dev-pill-glow {
    position: absolute;
    inset: auto auto 0 0;
    width: 54px;
    height: 54px;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,138,29,.36),
            rgba(255,138,29,.0) 70%
        );

    transform:
        translate(-6px, 8px);

    filter: blur(8px);

    animation: devGlowPulse 3.2s ease-in-out infinite;
}

.dev-pill-label {
    position: relative;
    z-index: 4;

    color: #fff7f2;

    font-size: 14px;
    font-weight: 950;
    letter-spacing: -.03em;

    text-shadow:
        0 0 10px rgba(255,148,54,.18);
}

/* lightning */
.dev-bolt-group {
    position: absolute;
    z-index: 5;

    left: 10px;
    top: 50%;

    width: 20px;
    height: 20px;

    transform: translateY(-50%);
}

.dev-bolt {
    position: absolute;
    display: block;

    transform-origin: center center;
    will-change: opacity, transform, filter;
}

.bolt-main {
    width: 16px;
    height: 16px;
    left: 0;
    top: 0;

    color: #ffb52e;

    filter:
        drop-shadow(0 0 8px rgba(255,167,39,.78))
        drop-shadow(0 0 16px rgba(255,102,0,.35));

    animation: boltFlicker 2.1s linear infinite;
}

.bolt-mini {
    width: 10px;
    height: 10px;
    left: 10px;
    top: 9px;

    color: #fff0b6;

    opacity: .92;

    filter:
        drop-shadow(0 0 7px rgba(255,196,76,.75));

    animation: boltFlickerMini 1.6s linear infinite;
}

/* smoke quanh cụm dev */
.dev-smoke {
    position: absolute;
    pointer-events: none;
    z-index: 2;

    border-radius: 999px;
    filter: blur(10px);

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.70) 0%,
            rgba(255,220,192,.23) 42%,
            rgba(255,166,92,0) 78%
        );

    opacity: .32;
}

.dev-smoke-1 {
    width: 34px;
    height: 18px;

    left: -8px;
    top: -8px;

    animation: devSmokeFloat 6.8s ease-in-out infinite;
}

.dev-smoke-2 {
    width: 42px;
    height: 21px;

    right: -6px;
    top: -10px;

    opacity: .26;
    animation: devSmokeFloat 7.4s ease-in-out infinite reverse;
}

.dev-smoke-3 {
    width: 36px;
    height: 20px;

    left: 28px;
    bottom: -10px;

    opacity: .24;
    animation: devSmokeFloat 8.1s ease-in-out infinite;
}

/* hover tăng chất */
.brand-center:hover .dev-pill {
    box-shadow:
        0 18px 42px rgba(255,102,0,.22),
        inset 0 1px 0 rgba(255,255,255,.10);
}

.brand-center:hover .bolt-main,
.brand-center:hover .bolt-mini {
    animation-duration: .95s;
}

.brand-center:hover .dev-pill-label {
    color: #ffffff;
    text-shadow:
        0 0 12px rgba(255,171,77,.28);
}

/* animation */
@keyframes boltFlicker {
    0%, 17%, 24%, 50%, 100% {
        opacity: .92;
        transform: scale(1) rotate(-4deg);
    }
    18%, 21% {
        opacity: .26;
        transform: scale(.92) rotate(3deg);
    }
    22%, 23% {
        opacity: 1;
        transform: scale(1.10) rotate(-6deg);
    }
    51%, 55% {
        opacity: .42;
        transform: scale(.96) rotate(5deg);
    }
    56% {
        opacity: 1;
        transform: scale(1.08) rotate(-5deg);
    }
}

@keyframes boltFlickerMini {
    0%, 35%, 39%, 74%, 100% {
        opacity: .85;
        transform: scale(1) rotate(6deg);
    }
    36%, 38% {
        opacity: .18;
        transform: scale(.88) rotate(-3deg);
    }
    75%, 78% {
        opacity: 1;
        transform: scale(1.12) rotate(10deg);
    }
}

@keyframes devSmokeFloat {
    0% {
        transform: translate(0, 0) scale(.95);
        opacity: .12;
    }
    28% {
        opacity: .34;
    }
    55% {
        transform: translate(10px, -8px) scale(1.10);
        opacity: .24;
    }
    100% {
        transform: translate(20px, -15px) scale(1.22);
        opacity: 0;
    }
}

@keyframes brandSmokeOrbit {
    0% {
        transform: translate(0, 0) scale(.96);
        opacity: .14;
    }
    35% {
        opacity: .34;
    }
    60% {
        transform: translate(8px, -6px) scale(1.08);
        opacity: .22;
    }
    100% {
        transform: translate(14px, -12px) scale(1.16);
        opacity: 0;
    }
}

@keyframes devGlowPulse {
    0%, 100% {
        opacity: .35;
        transform: translate(-6px, 8px) scale(.94);
    }
    50% {
        opacity: .56;
        transform: translate(-2px, 6px) scale(1.10);
    }
}

/* responsive */
@media (max-width: 1280px) {
    .brand-sidekick {
        margin-left: 4px;
        gap: 10px;
    }

    .dev-pill {
        min-height: 38px;
        padding: 0 14px 0 34px;
    }

    .dev-pill-label {
        font-size: 13px;
    }
}

@media (max-width: 1100px) {
    .brand-divider {
        display: none;
    }

    .brand-sidekick {
        margin-left: 0;
    }

    .dev-pill {
        padding: 0 13px 0 32px;
    }

    .dev-pill-label {
        font-size: 12px;
    }
}

@media (max-width: 950px) {
    .brand-sidekick {
        display: none;
    }
}

/* HIEU PHAM DEV SIDEKICK END */


/* BRAND PREMIUM PATCH END */


/* TOOL VIDEO PROOF PATCH START */

/* bỏ grid card cũ */
.tool-showcase-list {
    display: grid;
    gap: 22px;
}

/* mỗi tool là một hàng riêng */
.tool-showcase-row {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        112px
        minmax(390px, .95fr);

    align-items: stretch;

    gap: 12px;

    min-height: 290px;
}


/* =========================================================
   TOOL CARD
========================================================= */

.tool-showcase-row .tool-card,
.tool-showcase-row .tool-card.featured {
    grid-column: auto;

    min-height: 290px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffaf6
        );

    border:
        1px solid rgba(255,101,0,.13);

    box-shadow:
        0 16px 44px rgba(91,49,17,.055);

    padding: 24px;
}

.tool-showcase-row
.tool-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(255,101,0,.32);

    box-shadow:
        0 24px 60px rgba(89,46,13,.095);
}

.tool-proof-note {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    width: fit-content;

    margin-top: 20px;

    padding: 7px 10px;

    border:
        1px solid rgba(255,101,0,.10);

    border-radius: 999px;

    color: #9b6848;

    background:
        rgba(255,244,235,.72);

    font-size: 10px;
    font-weight: 750;
}

.proof-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #ff5900,
            #ffa11e
        );

    box-shadow:
        0 0 0 4px rgba(255,101,0,.08);
}


/* =========================================================
   SVG CONNECTOR
========================================================= */

.tool-proof-connector {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 0;
}

.connector-label {
    margin-bottom: -2px;

    color: #c58455;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .17em;
}

.connector-svg {
    width: 100%;
    height: 62px;

    overflow: visible;
}

.connector-shadow,
.connector-line {
    fill: none;

    stroke-linecap: round;
}

.connector-shadow {
    stroke:
        rgba(255,101,0,.10);

    stroke-width: 8;
}

.connector-line {
    stroke:
        url(#none);

    stroke: #ff7500;

    stroke-width: 2;

    stroke-dasharray:
        6 7;

    animation:
        connectorMove
        1.7s
        linear
        infinite;
}

.connector-arrow {
    fill: none;

    stroke: #ff7200;

    stroke-width: 2.3;

    stroke-linecap: round;
    stroke-linejoin: round;

    filter:
        drop-shadow(
            0 0 5px rgba(255,101,0,.32)
        );
}

.connector-node {
    fill: #fff;

    stroke: #ff7900;

    stroke-width: 2;
}

.connector-node-a {
    animation:
        connectorPulse
        2s
        ease-in-out
        infinite;
}

.connector-node-b {
    animation:
        connectorPulse
        2s
        .5s
        ease-in-out
        infinite;
}

@keyframes connectorMove {
    to {
        stroke-dashoffset: -26;
    }
}

@keyframes connectorPulse {

    0%,
    100% {
        opacity: .55;
        transform: scale(.88);
        transform-origin: center;
    }

    50% {
        opacity: 1;
        transform: scale(1.18);
        transform-origin: center;
    }
}


/* =========================================================
   VIDEO CARD
========================================================= */

.tool-demo-card {
    position: relative;

    min-width: 0;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    border:
        1px solid rgba(96,58,31,.11);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(255,247,240,.94)
        );

    box-shadow:
        0 16px 44px rgba(91,49,17,.065);

    transition:
        transform .22s var(--ease),
        box-shadow .22s var(--ease),
        border-color .22s var(--ease);
}

.tool-demo-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(255,101,0,.24);

    box-shadow:
        0 25px 65px rgba(91,47,15,.11);
}

.tool-demo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding:
        15px 17px 13px;

    border-bottom:
        1px solid rgba(91,54,28,.08);
}

.tool-demo-header > div {
    min-width: 0;
}

.tool-demo-header strong {
    display: block;

    margin-top: 3px;

    overflow: hidden;

    color: #211712;

    font-size: 12px;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.demo-kicker {
    color: #ff6a00;

    font-size: 8px;
    font-weight: 950;

    letter-spacing: .12em;
}

.demo-status {
    flex: 0 0 auto;

    padding: 5px 8px;

    border-radius: 999px;

    font-size: 8px;

    font-weight: 950;

    letter-spacing: .08em;
}

.demo-status.ready {
    color: #ff6500;

    border:
        1px solid rgba(255,101,0,.15);

    background: #fff0e5;
}

.demo-status.missing {
    color: #9a7963;

    border:
        1px solid rgba(76,51,35,.10);

    background: #f8f3ef;
}


/* =========================================================
   VIDEO FRAME
========================================================= */

.tool-video-frame {
    position: relative;

    flex: 1;

    min-height: 205px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            #2f2118,
            #120c08
        );
}

.tool-proof-video {
    width: 100%;
    height: 100%;

    min-height: 205px;

    display: block;

    object-fit: contain;

    background: #0d0907;
}

.video-corner-badge {
    position: absolute;

    top: 11px;
    left: 11px;

    padding:
        6px 8px;

    pointer-events: none;

    border:
        1px solid rgba(255,255,255,.18);

    border-radius: 8px;

    color: #fff;

    background:
        rgba(20,12,7,.62);

    backdrop-filter:
        blur(9px);

    font-size: 7px;
    font-weight: 950;

    letter-spacing: .09em;
}

.demo-caption {
    display: flex;
    align-items: center;

    gap: 7px;

    padding:
        10px 15px;

    color: #897062;

    font-size: 9px;
}

.demo-caption-dot {
    width: 6px;
    height: 6px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #ff6a00;

    box-shadow:
        0 0 0 4px rgba(255,101,0,.08);
}


/* =========================================================
   VIDEO MISSING
========================================================= */

.tool-video-missing {
    flex: 1;

    min-height: 225px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 25px;

    text-align: center;

    background:
        radial-gradient(
            350px 190px at 50% 45%,
            rgba(255,147,63,.10),
            transparent 70%
        ),
        repeating-linear-gradient(
            -45deg,
            rgba(255,101,0,.018),
            rgba(255,101,0,.018) 8px,
            transparent 8px,
            transparent 16px
        );
}

.missing-play {
    width: 54px;
    height: 54px;

    margin-bottom: 4px;

    color: #ff6a00;

    opacity: .72;
}

.missing-play svg {
    width: 100%;
    height: 100%;
}

.tool-video-missing strong {
    color: #3b2d24;

    font-size: 12px;
}

.tool-video-missing span {
    color: #a78b77;

    font-size: 9px;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
}


/* =========================================================
   ALTERNATE ROW BACKDROP
========================================================= */

.tool-showcase-row:nth-child(even)
.tool-card {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fff7f0
        );
}

.tool-showcase-row:nth-child(even)
.tool-demo-card {
    background:
        linear-gradient(
            145deg,
            #fffaf6,
            #ffffff
        );
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1150px) {

    .tool-showcase-row {
        grid-template-columns:
            minmax(0, 1fr)
            72px
            minmax(330px, .88fr);
    }

}


@media (max-width: 880px) {

    .tool-showcase-row {
        grid-template-columns: 1fr;

        gap: 4px;
    }

    .tool-showcase-row .tool-card,
    .tool-showcase-row .tool-card.featured {
        min-height: auto;
    }

    .tool-proof-connector {
        height: 72px;
    }

    .connector-label {
        margin-bottom: -12px;
    }

    .connector-svg {
        width: 70px;

        transform:
            rotate(90deg);
    }

    .tool-demo-card {
        min-height: 300px;
    }

}


@media (prefers-reduced-motion: reduce) {

    .connector-line,
    .connector-node {
        animation: none !important;
    }

}

/* TOOL VIDEO PROOF PATCH END */


/* FLOAT SOCIAL START */

.social-float {
    position: fixed;

    right: 18px;
    top: 50%;

    z-index: 2500;

    display: flex;
    flex-direction: column;

    gap: 12px;

    transform: translateY(-50%);
}

.social-float-item {
    position: relative;

    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    color: #fff;

    box-shadow:
        0 15px 35px rgba(34, 24, 18, .17);

    transition:
        transform .22s cubic-bezier(.2,.8,.2,1),
        box-shadow .22s cubic-bezier(.2,.8,.2,1);
}

.social-float-item::before {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: inherit;

    border: 1px solid rgba(255,255,255,.25);

    pointer-events: none;
}

.social-float-item:hover {
    transform:
        translateX(-5px)
        scale(1.05);

    box-shadow:
        0 20px 45px rgba(34,24,18,.23);
}

.social-float-item svg {
    position: relative;

    z-index: 2;

    width: 29px;
    height: 29px;
}

/* =========================================================
   ZALO
========================================================= */

.social-zalo {
    background:
        linear-gradient(
            145deg,
            #1688f8,
            #0068ff
        );
}

.social-zalo::after {
    content: "";

    position: absolute;

    width: 64px;
    height: 64px;

    border:
        1px solid rgba(0,104,255,.24);

    border-radius: 20px;

    animation:
        socialPulseBlue
        2.4s
        ease-out
        infinite;

    pointer-events: none;
}

/* =========================================================
   FACEBOOK
========================================================= */

.social-facebook {
    background:
        linear-gradient(
            145deg,
            #2477ec,
            #0866ff
        );
}

/* =========================================================
   TOOLTIP
========================================================= */

.social-tooltip {
    position: absolute;

    right: 66px;
    top: 50%;

    transform:
        translateY(-50%)
        translateX(8px);

    min-width: max-content;

    padding:
        8px 11px;

    border:
        1px solid rgba(80,53,35,.10);

    border-radius: 9px;

    color: #2b211b;

    background:
        rgba(255,255,255,.97);

    box-shadow:
        0 10px 28px rgba(72,41,20,.11);

    font-size: 11px;
    font-weight: 800;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s ease;
}

.social-tooltip::after {
    content: "";

    position: absolute;

    right: -5px;
    top: 50%;

    width: 9px;
    height: 9px;

    transform:
        translateY(-50%)
        rotate(45deg);

    background: #fff;

    border-top:
        1px solid rgba(80,53,35,.08);

    border-right:
        1px solid rgba(80,53,35,.08);
}

.social-float-item:hover
.social-tooltip {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(-50%)
        translateX(0);
}

/* =========================================================
   ONLINE DOT
========================================================= */

.social-online {
    position: absolute;

    z-index: 4;

    width: 11px;
    height: 11px;

    right: -1px;
    top: -1px;

    border:
        2px solid #fff;

    border-radius: 50%;

    background: #22c55e;

    box-shadow:
        0 3px 8px rgba(34,197,94,.30);
}

/* =========================================================
   PULSE
========================================================= */

@keyframes socialPulseBlue {

    0% {
        opacity: .42;
        transform: scale(.80);
    }

    70% {
        opacity: 0;
        transform: scale(1.22);
    }

    100% {
        opacity: 0;
        transform: scale(1.22);
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .social-float {
        right: 10px;

        gap: 9px;
    }

    .social-float-item {
        width: 46px;
        height: 46px;

        border-radius: 14px;
    }

    .social-float-item svg {
        width: 25px;
        height: 25px;
    }

    .social-tooltip {
        display: none;
    }

    .social-zalo::after {
        width: 54px;
        height: 54px;

        border-radius: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .social-zalo::after {
        animation: none;
    }

}

/* FLOAT SOCIAL END */


/* DOUYIN GUIDE PATCH START */

/* =========================================================
   DOUYIN PRODUCT INFORMATION
========================================================= */

.douyin-sales-panel {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 19px;

    margin-top: 23px;

    padding-top: 21px;

    border-top:
        1px solid rgba(255,101,0,.11);
}


/* heading */

.douyin-guide-head {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.douyin-guide-label {
    width: fit-content;

    padding:
        6px 9px;

    color: #ff6500;

    border:
        1px solid rgba(255,101,0,.14);

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #fff0e5,
            #fff8f2
        );

    font-size: 8px;
    font-weight: 950;

    letter-spacing: .11em;
}

.douyin-guide-head > strong {
    color: #1d1510;

    font-size: 17px;

    line-height: 1.35;

    letter-spacing: -.02em;
}


/* =========================================================
   BULLET STEPS
========================================================= */

.douyin-guide-list {
    display: grid;

    gap: 14px;

    margin: 0;

    padding: 0;

    list-style: none;
}

.douyin-guide-list li {
    display: grid;

    grid-template-columns:
        29px
        minmax(0,1fr);

    align-items: flex-start;

    gap: 11px;
}

.douyin-check {
    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;

    margin-top: 1px;

    border-radius: 9px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #ff5900,
            #ff9800
        );

    box-shadow:
        0 7px 18px rgba(255,101,0,.17);

    font-size: 11px;
    font-weight: 950;
}

.douyin-guide-list li > div {
    min-width: 0;
}

.douyin-guide-list strong {
    display: block;

    margin-bottom: 3px;

    color: #2b211b;

    font-size: 12px;
    font-weight: 850;
}

.douyin-guide-list span:not(.douyin-check) {
    display: block;

    color: #88766a;

    font-size: 11px;

    line-height: 1.55;
}

.douyin-guide-list b {
    color: #f15c00;

    font-weight: 850;
}


/* =========================================================
   FEATURE CHIPS
========================================================= */

.douyin-feature-strip {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}

.douyin-feature-strip span {
    padding:
        7px 10px;

    color: #9a5f36;

    border:
        1px solid rgba(255,101,0,.12);

    border-radius: 9px;

    background:
        rgba(255,244,235,.75);

    font-size: 9px;

    font-weight: 800;
}


/* =========================================================
   PRICE
========================================================= */

.douyin-price-card {
    display: grid;

    grid-template-columns:
        auto
        minmax(0,1fr);

    align-items: center;

    gap: 24px;

    margin-top: auto;

    padding: 18px 19px;

    overflow: hidden;

    border:
        1px solid rgba(255,101,0,.18);

    border-radius: 17px;

    background:
        radial-gradient(
            300px 120px at 0% 50%,
            rgba(255,118,0,.11),
            transparent 72%
        ),
        linear-gradient(
            135deg,
            #fff7f0,
            #ffffff
        );

    box-shadow:
        0 13px 35px rgba(91,47,14,.055);
}

.douyin-price-left {
    padding-right: 23px;

    border-right:
        1px solid rgba(255,101,0,.12);
}

.douyin-price-eyebrow {
    display: block;

    margin-bottom: 5px;

    color: #bd7550;

    font-size: 7px;

    font-weight: 950;

    letter-spacing: .13em;
}

.douyin-price {
    display: flex;

    align-items: baseline;

    gap: 7px;
}

.douyin-price strong {
    color: transparent;

    background:
        linear-gradient(
            100deg,
            #ff5100,
            #ff8600
        );

    background-clip: text;
    -webkit-background-clip: text;

    font-size: 27px;

    font-weight: 950;

    letter-spacing: -.045em;
}

.douyin-price span {
    color: #78675c;

    font-size: 9px;

    font-weight: 800;
}


/* unlimited side */

.douyin-price-benefit {
    display: flex;

    align-items: center;

    gap: 10px;
}

.price-check {
    width: 31px;
    height: 31px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color: #ff6500;

    background: #fff0e4;

    font-size: 13px;

    font-weight: 950;
}

.douyin-price-benefit strong {
    display: block;

    color: #30241d;

    font-size: 11px;
}

.douyin-price-benefit small {
    display: block;

    margin-top: 3px;

    color: #9a887c;

    font-size: 8px;
}


/* =========================================================
   TOOL FOOTER
========================================================= */

/*
 * Với Douyin, phần footer luôn nằm sát đáy
 * để card trái đầy và cân hơn video dọc.
 */

.tool-card-proof:has(.douyin-sales-panel)
.tool-card-footer {
    margin-top: 20px;

    padding-top: 16px;

    border-top:
        1px solid rgba(84,54,32,.07);
}


/* =========================================================
   LARGE SCREEN
========================================================= */

@media (min-width: 881px) {

    /*
     * Card bên trái sẽ giãn bằng chiều cao video bên phải.
     */
    .tool-showcase-row:has(.douyin-sales-panel) {
        align-items: stretch;
    }

    .tool-showcase-row:has(.douyin-sales-panel)
    .tool-card-proof {
        height: 100%;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .douyin-price-card {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .douyin-price-left {
        padding-right: 0;
        padding-bottom: 13px;

        border-right: 0;

        border-bottom:
            1px solid rgba(255,101,0,.12);
    }

    .douyin-price strong {
        font-size: 25px;
    }

}

/* DOUYIN GUIDE PATCH END */


/* DOUYIN BALANCE PATCH START */

/* =========================================================
   CÂN CHIỀU CAO TOOL DOUYIN + VIDEO DỌC
========================================================= */

@media (min-width: 881px) {

    /*
     * Không để video dọc kéo cả hàng cao vô tận.
     * 760px đủ lớn để khách xem rõ nhưng bố cục vẫn gọn.
     */
    .tool-showcase-row:has(.douyin-sales-panel) {
        min-height: 760px;
        height: 760px;
        align-items: stretch;
    }

    .tool-showcase-row:has(.douyin-sales-panel)
    .tool-card-proof {
        height: 760px;
        min-height: 760px;

        display: flex;
        flex-direction: column;
    }

    .tool-showcase-row:has(.douyin-sales-panel)
    .tool-demo-card {
        height: 760px;
        min-height: 760px;
    }

    .tool-showcase-row:has(.douyin-sales-panel)
    .tool-video-frame {
        flex: 1;
        min-height: 0;
        height: auto;
    }

    .tool-showcase-row:has(.douyin-sales-panel)
    .tool-proof-video {
        width: 100%;
        height: 100%;
        min-height: 0;

        object-fit: contain;
        object-position: center;

        background:
            linear-gradient(
                145deg,
                #047fba,
                #015e99
            );
    }

}


/* =========================================================
   SALES PANEL LẤP ĐẦY KHÔNG GIAN
========================================================= */

.tool-card-proof:has(.douyin-sales-panel)
.douyin-sales-panel {
    flex: 1;

    min-height: 0;

    display: flex;
    flex-direction: column;

    gap: 14px;

    margin-top: 18px;
}


/* =========================================================
   TITLE
========================================================= */

.tool-card-proof:has(.douyin-sales-panel)
.douyin-guide-head {
    flex: 0 0 auto;
}

.tool-card-proof:has(.douyin-sales-panel)
.douyin-guide-head > strong {
    font-size: 18px;

    letter-spacing: -.025em;
}


/* =========================================================
   TIMELINE 4 BƯỚC
========================================================= */

.tool-card-proof:has(.douyin-sales-panel)
.douyin-guide-list {
    position: relative;

    flex: 1;

    min-height: 0;

    display: flex;
    flex-direction: column;

    justify-content: space-evenly;

    gap: 0;

    margin: 0;

    padding:
        10px 0;
}


/*
 * đường timeline dọc
 */
.tool-card-proof:has(.douyin-sales-panel)
.douyin-guide-list::before {
    position: absolute;

    content: "";

    left: 13px;

    top: 44px;
    bottom: 44px;

    width: 1px;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,101,0,.28) 0,
            rgba(255,101,0,.28) 5px,
            transparent 5px,
            transparent 10px
        );
}


/*
 * mỗi bước trở thành một block lớn,
 * khoảng cách được chia đều chiều cao
 */
.tool-card-proof:has(.douyin-sales-panel)
.douyin-guide-list li {
    position: relative;
    z-index: 2;

    grid-template-columns:
        34px
        minmax(0,1fr);

    align-items: center;

    gap: 14px;

    min-height: 88px;

    padding:
        12px 15px 12px 0;

    border-bottom:
        1px solid rgba(91,55,31,.055);
}

.tool-card-proof:has(.douyin-sales-panel)
.douyin-guide-list li:last-child {
    border-bottom: 0;
}


/* icon check lớn hơn */
.tool-card-proof:has(.douyin-sales-panel)
.douyin-check {
    width: 30px;
    height: 30px;

    margin: 0;

    border-radius: 10px;

    box-shadow:
        0 8px 20px rgba(255,101,0,.20);

    font-size: 12px;
}


/* title từng bước */
.tool-card-proof:has(.douyin-sales-panel)
.douyin-guide-list strong {
    margin-bottom: 5px;

    font-size: 13px;

    line-height: 1.25;
}


/* mô tả */
.tool-card-proof:has(.douyin-sales-panel)
.douyin-guide-list span:not(.douyin-check) {
    max-width: 520px;

    font-size: 11px;

    line-height: 1.55;
}


/* =========================================================
   FEATURE TAG
========================================================= */

.tool-card-proof:has(.douyin-sales-panel)
.douyin-feature-strip {
    flex: 0 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 8px;
}

.tool-card-proof:has(.douyin-sales-panel)
.douyin-feature-strip span {
    min-height: 39px;

    display: flex;

    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 8px;

    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            #fff1e6,
            #fff9f4
        );

    font-size: 9px;
}


/* =========================================================
   PRICE
========================================================= */

.tool-card-proof:has(.douyin-sales-panel)
.douyin-price-card {
    flex: 0 0 auto;

    margin-top: 2px;

    min-height: 84px;

    padding: 16px 18px;

    border-radius: 15px;

    background:
        radial-gradient(
            260px 100px at 0% 50%,
            rgba(255,113,0,.13),
            transparent 72%
        ),
        linear-gradient(
            130deg,
            #fff6ee,
            #ffffff
        );
}

.tool-card-proof:has(.douyin-sales-panel)
.douyin-price strong {
    font-size: 30px;
}


/* =========================================================
   FOOTER TOOL
========================================================= */

.tool-card-proof:has(.douyin-sales-panel)
.tool-card-footer {
    flex: 0 0 auto;

    margin-top: 13px;

    padding-top: 13px;
}


/* =========================================================
   CONNECTOR
========================================================= */

.tool-showcase-row:has(.douyin-sales-panel)
.tool-proof-connector {
    height: 760px;

    align-self: stretch;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .tool-showcase-row:has(.douyin-sales-panel),
    .tool-showcase-row:has(.douyin-sales-panel)
    .tool-card-proof,
    .tool-showcase-row:has(.douyin-sales-panel)
    .tool-demo-card {
        height: 790px;
        min-height: 790px;
    }

    .tool-showcase-row:has(.douyin-sales-panel)
    .tool-proof-connector {
        height: 790px;
    }

}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 880px) {

    .tool-showcase-row:has(.douyin-sales-panel) {
        height: auto;
        min-height: auto;
    }

    .tool-showcase-row:has(.douyin-sales-panel)
    .tool-card-proof,
    .tool-showcase-row:has(.douyin-sales-panel)
    .tool-demo-card {
        height: auto;
        min-height: auto;
    }

    .tool-card-proof:has(.douyin-sales-panel)
    .douyin-guide-list {
        gap: 13px;
    }

    .tool-card-proof:has(.douyin-sales-panel)
    .douyin-guide-list li {
        min-height: auto;
    }

    .tool-showcase-row:has(.douyin-sales-panel)
    .tool-video-frame {
        height: 620px;
    }

    .tool-showcase-row:has(.douyin-sales-panel)
    .tool-proof-video {
        height: 620px;
    }

    .tool-showcase-row:has(.douyin-sales-panel)
    .tool-proof-connector {
        height: 72px;
    }

}

/* DOUYIN BALANCE PATCH END */


/* DOUYIN PRICE OVERLAP FIX START */

/* chỉnh lại block bên trái để không bị chồng giá */
.tool-card-proof:has(.douyin-sales-panel) .douyin-sales-panel {
    gap: 18px !important;
}

/* bỏ kiểu dàn đều quá mạnh gây đè */
.tool-card-proof:has(.douyin-sales-panel) .douyin-guide-list {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 6px 0 0 0 !important;
}

/* mỗi step tự co theo nội dung */
.tool-card-proof:has(.douyin-sales-panel) .douyin-guide-list li {
    min-height: auto !important;
    padding: 14px 0 !important;
    align-items: flex-start !important;
}

/* line timeline gọn lại */
.tool-card-proof:has(.douyin-sales-panel) .douyin-guide-list::before {
    top: 34px !important;
    bottom: 34px !important;
}

/* nhóm chip */
.tool-card-proof:has(.douyin-sales-panel) .douyin-feature-strip {
    margin-top: 2px !important;
    margin-bottom: 0 !important;
}

/* FIX CHÍNH: card giá tách hẳn xuống dưới */
.tool-card-proof:has(.douyin-sales-panel) .douyin-price-card {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 14px !important;
    min-height: unset !important;
    height: auto !important;
    align-self: stretch !important;
}

/* chia cột card giá ổn định hơn */
.tool-card-proof:has(.douyin-sales-panel) .douyin-price-card {
    grid-template-columns: minmax(170px, auto) minmax(0, 1fr) !important;
    gap: 18px !important;
}

/* cột trái card giá */
.tool-card-proof:has(.douyin-sales-panel) .douyin-price-left {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
}

/* cột phải card giá */
.tool-card-proof:has(.douyin-sales-panel) .douyin-price-benefit {
    min-width: 0 !important;
    align-items: center !important;
}

/* text giá gọn hơn, bớt tràn */
.tool-card-proof:has(.douyin-sales-panel) .douyin-price {
    flex-wrap: wrap !important;
    row-gap: 3px !important;
}

.tool-card-proof:has(.douyin-sales-panel) .douyin-price strong {
    line-height: 1 !important;
}

/* footer dưới cùng cách ra */
.tool-card-proof:has(.douyin-sales-panel) .tool-card-footer {
    margin-top: 16px !important;
}

/* mobile */
@media (max-width: 600px) {
    .tool-card-proof:has(.douyin-sales-panel) .douyin-price-card {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .tool-card-proof:has(.douyin-sales-panel) .douyin-price-left {
        padding-right: 0 !important;
        padding-bottom: 12px !important;
    }
}

/* DOUYIN PRICE OVERLAP FIX END */


/* LIVE TIKTOK GUIDE PATCH START */


/* =========================================================
   LIVE SALES PANEL
========================================================= */

.live-sales-panel {
    flex: 1;

    min-height: 0;

    display: flex;
    flex-direction: column;

    gap: 15px;

    margin-top: 20px;

    padding-top: 20px;

    border-top:
        1px solid rgba(255,101,0,.10);
}


/* =========================================================
   HEADING
========================================================= */

.live-guide-head {
    flex: 0 0 auto;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.live-guide-label {
    width: fit-content;

    padding:
        6px 9px;

    color: #ff6500;

    border:
        1px solid rgba(255,101,0,.15);

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #fff0e5,
            #fff9f4
        );

    font-size: 8px;
    font-weight: 950;

    letter-spacing: .11em;
}

.live-guide-head > strong {
    color: #1e1510;

    font-size: 17px;

    line-height: 1.35;

    letter-spacing: -.025em;
}


/* =========================================================
   URL EXAMPLE
========================================================= */

.live-url-example {
    display: grid;

    grid-template-columns:
        auto
        minmax(0,1fr);

    align-items: center;

    gap: 12px;

    padding:
        11px 13px;

    border:
        1px solid rgba(255,101,0,.13);

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #fff5ed,
            #ffffff
        );
}

.live-url-icon {
    min-width: 42px;
    height: 27px;

    display: grid;
    place-items: center;

    padding:
        0 8px;

    color: #fff;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #ff4d00,
            #ff8500
        );

    box-shadow:
        0 7px 17px rgba(255,101,0,.17);

    font-size: 8px;
    font-weight: 950;
}

.live-url-example small {
    display: block;

    margin-bottom: 3px;

    color: #ae7c5d;

    font-size: 7px;

    font-weight: 950;

    letter-spacing: .10em;
}

.live-url-example code {
    display: block;

    overflow: hidden;

    color: #50382a;

    font-size: 10px;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* =========================================================
   STEPS
========================================================= */

.live-guide-list {
    position: relative;

    flex: 1;

    min-height: 0;

    display: flex;
    flex-direction: column;

    justify-content: space-evenly;

    gap: 0;

    margin: 0;

    padding: 4px 0;

    list-style: none;
}

.live-guide-list::before {
    position: absolute;

    content: "";

    left: 14px;

    top: 38px;
    bottom: 38px;

    width: 1px;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,101,0,.28) 0,
            rgba(255,101,0,.28) 5px,
            transparent 5px,
            transparent 10px
        );
}

.live-guide-list li {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        32px
        minmax(0,1fr);

    align-items: center;

    gap: 13px;

    padding:
        10px 0;

    border-bottom:
        1px solid rgba(88,52,28,.05);
}

.live-guide-list li:last-child {
    border-bottom: 0;
}

.live-step-number {
    width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    color: #fff;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #ff5700,
            #ff9700
        );

    box-shadow:
        0 7px 18px rgba(255,101,0,.18);

    font-size: 10px;

    font-weight: 950;
}

.live-guide-list strong {
    display: block;

    margin-bottom: 3px;

    color: #2b2019;

    font-size: 12px;

    font-weight: 880;
}

.live-guide-list
span:not(.live-step-number) {
    display: block;

    color: #8b786c;

    font-size: 10px;

    line-height: 1.48;
}

.live-guide-list b {
    color: #f15a00;

    font-weight: 900;
}


/* =========================================================
   FEATURE STRIP
========================================================= */

.live-feature-strip {
    flex: 0 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 7px;
}

.live-feature-strip span {
    min-height: 37px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 7px;

    text-align: center;

    color: #9a6038;

    border:
        1px solid rgba(255,101,0,.13);

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            #fff0e5,
            #fff9f4
        );

    font-size: 8px;

    font-weight: 850;
}


/* =========================================================
   PRICING
========================================================= */

.live-pricing {
    flex: 0 0 auto;

    padding: 14px;

    border:
        1px solid rgba(255,101,0,.14);

    border-radius: 16px;

    background:
        radial-gradient(
            300px 130px at 0% 0%,
            rgba(255,112,0,.10),
            transparent 72%
        ),
        linear-gradient(
            145deg,
            #fff8f2,
            #ffffff
        );
}

.live-pricing-title {
    margin-bottom: 11px;
}

.live-pricing-title span {
    display: block;

    margin-bottom: 3px;

    color: #ff6500;

    font-size: 7px;

    font-weight: 950;

    letter-spacing: .13em;
}

.live-pricing-title strong {
    color: #302219;

    font-size: 11px;
}


.live-price-grid {
    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 8px;
}

.live-price-item {
    position: relative;

    min-width: 0;

    padding:
        12px;

    border:
        1px solid rgba(88,54,31,.09);

    border-radius: 12px;

    background:
        rgba(255,255,255,.91);
}

.live-price-item.recommended {
    border-color:
        rgba(255,101,0,.35);

    background:
        linear-gradient(
            145deg,
            #fff0e4,
            #ffffff
        );
}

.live-price-item.source {
    background:
        linear-gradient(
            135deg,
            #2b1b12,
            #47301f
        );

    border-color:
        rgba(255,153,34,.22);
}

.live-plan-name {
    display: block;

    margin-bottom: 6px;

    color: #ba7143;

    font-size: 7px;

    font-weight: 950;

    letter-spacing: .10em;
}

.live-price-item.source
.live-plan-name {
    color: #ffb35d;
}

.live-plan-price {
    color: transparent;

    background:
        linear-gradient(
            100deg,
            #ff5100,
            #ff8d00
        );

    background-clip: text;
    -webkit-background-clip: text;

    font-size: 20px;

    line-height: 1;

    font-weight: 950;

    letter-spacing: -.045em;
}

.live-price-item.source
.live-plan-price {
    background:
        linear-gradient(
            100deg,
            #ff8d23,
            #ffd073
        );

    background-clip: text;
    -webkit-background-clip: text;
}

.live-plan-price small {
    color: #967d6d;

    font-size: 7px;

    font-weight: 750;

    letter-spacing: 0;
}

.live-price-item.source
.live-plan-price small {
    color: #cdb4a2;
}

.live-price-item p {
    margin:
        7px 0 0;

    color: #8b786c;

    font-size: 8px;

    line-height: 1.4;
}

.live-price-item.source p {
    color: #d2c1b5;
}

.live-price-item p b {
    color: #e95c06;
}

.live-price-item.source p b {
    color: #ffb258;
}


/* popular label */

.live-popular {
    position: absolute;

    right: 7px;
    top: 7px;

    padding:
        4px 5px;

    color: #fff;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #ff5700,
            #ff9400
        );

    font-size: 5px;

    font-weight: 950;

    letter-spacing: .08em;
}


/* =========================================================
   BALANCE WITH VERTICAL VIDEO
========================================================= */

@media (min-width: 881px) {

    .tool-showcase-row:has(.live-sales-panel) {
        height: 790px;
        min-height: 790px;

        align-items: stretch;
    }

    .tool-showcase-row:has(.live-sales-panel)
    .tool-card-proof {
        height: 790px;
        min-height: 790px;

        display: flex;
        flex-direction: column;
    }

    .tool-showcase-row:has(.live-sales-panel)
    .tool-demo-card {
        height: 790px;
        min-height: 790px;
    }

    .tool-showcase-row:has(.live-sales-panel)
    .tool-video-frame {
        flex: 1;

        height: auto;
        min-height: 0;
    }

    .tool-showcase-row:has(.live-sales-panel)
    .tool-proof-video {
        width: 100%;
        height: 100%;

        min-height: 0;

        object-fit: contain;

        background: #110b07;
    }

    .tool-showcase-row:has(.live-sales-panel)
    .tool-proof-connector {
        height: 790px;
    }

}


/* tool footer */

.tool-card-proof:has(.live-sales-panel)
.tool-card-footer {
    flex: 0 0 auto;

    margin-top: 13px;

    padding-top: 13px;

    border-top:
        1px solid rgba(91,54,31,.07);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 880px) {

    .tool-showcase-row:has(.live-sales-panel),
    .tool-showcase-row:has(.live-sales-panel)
    .tool-card-proof,
    .tool-showcase-row:has(.live-sales-panel)
    .tool-demo-card {
        height: auto;
        min-height: auto;
    }

    .live-guide-list {
        gap: 6px;

        justify-content: flex-start;
    }

    .live-guide-list li {
        padding:
            11px 0;
    }

    .tool-showcase-row:has(.live-sales-panel)
    .tool-proof-connector {
        height: 72px;
    }

}

@media (max-width: 520px) {

    .live-price-grid {
        grid-template-columns: 1fr;
    }

    .live-feature-strip {
        grid-template-columns: 1fr;
    }

}

/* LIVE TIKTOK GUIDE PATCH END */


/* LIVE OVERLAP FINAL FIX START */

/* =========================================================
   FIX CHỒNG STEPS + BẢNG GIÁ
========================================================= */

.tool-card-proof:has(.live-sales-panel) {
    overflow: visible !important;
}

/* panel chạy theo flow thật, không ép/nén */
.tool-card-proof:has(.live-sales-panel)
.live-sales-panel {
    flex: 0 0 auto !important;
    min-height: auto !important;
    height: auto !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 18px !important;

    overflow: visible !important;
}


/* =========================================================
   5 BƯỚC: KHÔNG ĐƯỢC FLEX NÉN
========================================================= */

.tool-card-proof:has(.live-sales-panel)
.live-guide-list {
    flex: 0 0 auto !important;

    height: auto !important;
    min-height: auto !important;

    justify-content: flex-start !important;

    gap: 0 !important;

    padding: 4px 0 !important;

    overflow: visible !important;
}

.tool-card-proof:has(.live-sales-panel)
.live-guide-list li {
    flex: 0 0 auto !important;

    min-height: 63px !important;
    height: auto !important;

    padding: 12px 0 !important;

    align-items: flex-start !important;
}

.tool-card-proof:has(.live-sales-panel)
.live-guide-list::before {
    top: 32px !important;
    bottom: 32px !important;
}


/* =========================================================
   FEATURE TAG
========================================================= */

.tool-card-proof:has(.live-sales-panel)
.live-feature-strip {
    flex: 0 0 auto !important;

    position: relative !important;

    margin: 0 !important;

    z-index: 1 !important;
}


/* =========================================================
   BẢNG GIÁ LUÔN NẰM SAU 5 BƯỚC
========================================================= */

.tool-card-proof:has(.live-sales-panel)
.live-pricing {
    position: relative !important;

    flex: 0 0 auto !important;

    height: auto !important;
    min-height: auto !important;

    margin-top: 4px !important;

    z-index: 2 !important;

    overflow: visible !important;
}

.tool-card-proof:has(.live-sales-panel)
.live-price-grid {
    position: relative !important;

    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 9px !important;

    height: auto !important;

    overflow: visible !important;
}

.tool-card-proof:has(.live-sales-panel)
.live-price-item {
    position: relative !important;

    min-height: 91px !important;
    height: auto !important;

    padding: 12px !important;

    overflow: hidden !important;
}

.tool-card-proof:has(.live-sales-panel)
.live-plan-price {
    margin-top: 3px !important;

    line-height: 1.05 !important;
}

.tool-card-proof:has(.live-sales-panel)
.live-price-item p {
    position: static !important;

    margin: 8px 0 0 !important;

    line-height: 1.45 !important;
}


/* =========================================================
   QUAN TRỌNG: BỎ KHÓA 790PX
========================================================= */

@media (min-width: 881px) {

    .tool-showcase-row:has(.live-sales-panel) {
        height: auto !important;
        min-height: 880px !important;

        align-items: stretch !important;
    }

    .tool-showcase-row:has(.live-sales-panel)
    .tool-card-proof {
        height: auto !important;
        min-height: 880px !important;

        display: flex !important;
        flex-direction: column !important;
    }

    .tool-showcase-row:has(.live-sales-panel)
    .tool-demo-card {
        height: auto !important;
        min-height: 880px !important;

        align-self: stretch !important;
    }

    .tool-showcase-row:has(.live-sales-panel)
    .tool-video-frame {
        flex: 1 1 auto !important;

        height: auto !important;
        min-height: 760px !important;
    }

    .tool-showcase-row:has(.live-sales-panel)
    .tool-proof-video {
        width: 100% !important;
        height: 100% !important;

        min-height: 760px !important;

        object-fit: contain !important;
    }

    .tool-showcase-row:has(.live-sales-panel)
    .tool-proof-connector {
        height: auto !important;

        align-self: stretch !important;
    }

}


/* footer không đè bảng giá */
.tool-card-proof:has(.live-sales-panel)
.tool-card-footer {
    position: relative !important;

    flex: 0 0 auto !important;

    margin-top: 18px !important;

    padding-top: 15px !important;

    z-index: 1 !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 880px) {

    .tool-showcase-row:has(.live-sales-panel),
    .tool-showcase-row:has(.live-sales-panel)
    .tool-card-proof,
    .tool-showcase-row:has(.live-sales-panel)
    .tool-demo-card {
        min-height: 0 !important;
        height: auto !important;
    }

}

@media (max-width: 560px) {

    .tool-card-proof:has(.live-sales-panel)
    .live-price-grid {
        grid-template-columns: 1fr !important;
    }

}

/* LIVE OVERLAP FINAL FIX END */


/* LIVE BOTTOM BLANK FIX START */

/* =========================================================
   LIVE TIKTOK:
   CARD TRÁI CHỈ CAO THEO NỘI DUNG THẬT
========================================================= */

@media (min-width: 881px) {

    /* Row vẫn lấy chiều cao từ video bên phải */
    .tool-showcase-row:has(.live-sales-panel) {
        height: auto !important;
        min-height: 0 !important;

        align-items: start !important;
    }

    /* QUAN TRỌNG:
       bỏ toàn bộ chiều cao cưỡng bức ở card bên trái */
    .tool-showcase-row:has(.live-sales-panel)
    .tool-card-proof {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        align-self: start !important;

        display: flex !important;
        flex-direction: column !important;
    }

    /* sales panel chỉ cao đúng theo nội dung */
    .tool-card-proof:has(.live-sales-panel)
    .live-sales-panel {
        flex: 0 0 auto !important;

        height: auto !important;
        min-height: 0 !important;

        margin-bottom: 0 !important;
    }

    /* bảng giá không kéo card */
    .tool-card-proof:has(.live-sales-panel)
    .live-pricing {
        flex: 0 0 auto !important;

        margin-bottom: 0 !important;
    }

    /* footer nằm ngay sau bảng giá */
    .tool-card-proof:has(.live-sales-panel)
    .tool-card-footer {
        position: static !important;

        flex: 0 0 auto !important;

        margin-top: 18px !important;
        margin-bottom: 0 !important;

        padding-top: 15px !important;
        padding-bottom: 0 !important;
    }

    /*
     * Video bên phải vẫn giữ nguyên chiều cao tự nhiên.
     * Không ép card trái chạy theo video nữa.
     */
    .tool-showcase-row:has(.live-sales-panel)
    .tool-demo-card {
        height: auto !important;

        min-height: 0 !important;

        align-self: start !important;
    }

    .tool-showcase-row:has(.live-sales-panel)
    .tool-video-frame {
        height: auto !important;
        min-height: 0 !important;

        flex: 0 0 auto !important;
    }

    .tool-showcase-row:has(.live-sales-panel)
    .tool-proof-video {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        max-height: none !important;

        object-fit: contain !important;
    }

    /* connector căn theo phần trên thay vì kéo full chiều cao */
    .tool-showcase-row:has(.live-sales-panel)
    .tool-proof-connector {
        height: auto !important;
        min-height: 0 !important;

        align-self: center !important;

        margin-top: 260px !important;
    }

}

/* MOBILE */
@media (max-width: 880px) {

    .tool-showcase-row:has(.live-sales-panel)
    .tool-card-proof,

    .tool-showcase-row:has(.live-sales-panel)
    .tool-demo-card {

        height: auto !important;
        min-height: 0 !important;
    }

}

/* LIVE BOTTOM BLANK FIX END */


/* LIVE EXACT HEIGHT SYNC START */

@media (min-width: 881px) {

    /* Hàng Live không lấy chiều cao từ video nữa */
    .tool-showcase-row:has(.live-sales-panel) {
        align-items: start !important;
        height: auto !important;
        min-height: 0 !important;
    }

    /* Card trái tự cao đúng nội dung */
    .tool-showcase-row:has(.live-sales-panel)
    .tool-card-proof {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        align-self: start !important;
    }

    /*
     * Card video lấy chiều cao chính xác từ JS:
     * --live-card-height = chiều cao card trái
     */
    .tool-showcase-row:has(.live-sales-panel)
    .tool-demo-card {
        height: var(--live-card-height) !important;
        min-height: var(--live-card-height) !important;
        max-height: var(--live-card-height) !important;

        align-self: start !important;

        display: flex !important;
        flex-direction: column !important;

        overflow: hidden !important;
    }

    /* header video không co */
    .tool-showcase-row:has(.live-sales-panel)
    .tool-demo-header {
        flex: 0 0 auto !important;
    }

    /* vùng video ăn toàn bộ chiều cao còn lại */
    .tool-showcase-row:has(.live-sales-panel)
    .tool-video-frame {
        flex: 1 1 0 !important;

        width: 100% !important;

        height: 0 !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: hidden !important;

        background: #100a07 !important;
    }

    /*
     * Video không được tự kéo card cao thêm.
     * Giữ đúng tỷ lệ và nằm gọn trong khung.
     */
    .tool-showcase-row:has(.live-sales-panel)
    .tool-proof-video {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        min-height: 0 !important;
        max-height: 100% !important;

        object-fit: contain !important;
        object-position: center center !important;

        background: #100a07 !important;
    }

    /* caption video không co */
    .tool-showcase-row:has(.live-sales-panel)
    .demo-caption {
        flex: 0 0 auto !important;
    }

    /* Mũi tên nằm chính giữa đúng hai card */
    .tool-showcase-row:has(.live-sales-panel)
    .tool-proof-connector {
        height: var(--live-card-height) !important;

        min-height: 0 !important;

        margin-top: 0 !important;

        align-self: start !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

}


/* MOBILE: trở về chiều cao tự nhiên */
@media (max-width: 880px) {

    .tool-showcase-row:has(.live-sales-panel)
    .tool-demo-card {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .tool-showcase-row:has(.live-sales-panel)
    .tool-video-frame {
        height: auto !important;
        min-height: 500px !important;
    }

    .tool-showcase-row:has(.live-sales-panel)
    .tool-proof-video {
        height: 500px !important;
        object-fit: contain !important;
    }

}

/* LIVE EXACT HEIGHT SYNC END */


/* NEWS GUIDE PATCH START */


/* =========================================================
   NEWS PANEL
========================================================= */

.news-sales-panel {
    flex: 0 0 auto;

    display: flex;
    flex-direction: column;

    gap: 17px;

    margin-top: 21px;

    padding-top: 21px;

    border-top:
        1px solid rgba(255,101,0,.10);
}


/* =========================================================
   TITLE
========================================================= */

.news-guide-head {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.news-guide-label {
    width: fit-content;

    padding:
        6px 9px;

    color: #ff6500;

    border:
        1px solid rgba(255,101,0,.15);

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #fff0e5,
            #fff9f4
        );

    font-size: 8px;

    font-weight: 950;

    letter-spacing: .11em;
}

.news-guide-head > strong {
    max-width: 570px;

    color: #1e1510;

    font-size: 18px;

    line-height: 1.35;

    letter-spacing: -.025em;
}


/* =========================================================
   SOURCE BOX
========================================================= */

.news-source-box {
    display: grid;

    grid-template-columns:
        45px
        minmax(0,1fr);

    align-items: center;

    gap: 13px;

    padding: 13px 14px;

    border:
        1px solid rgba(255,101,0,.13);

    border-radius: 14px;

    background:
        radial-gradient(
            190px 90px at 0% 50%,
            rgba(255,111,0,.10),
            transparent 75%
        ),
        #fff;
}

.news-source-icon {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    color: #fff;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #ff5600,
            #ff9800
        );

    box-shadow:
        0 9px 23px rgba(255,101,0,.18);

    font-size: 10px;

    font-weight: 950;
}

.news-source-box small {
    display: block;

    margin-bottom: 3px;

    color: #b77b57;

    font-size: 7px;

    font-weight: 950;

    letter-spacing: .11em;
}

.news-source-box strong {
    display: block;

    color: #33251c;

    font-size: 12px;
}

.news-source-box span {
    display: block;

    margin-top: 3px;

    color: #947e70;

    font-size: 9px;

    line-height: 1.4;
}


/* =========================================================
   WORKFLOW
========================================================= */

.news-flow {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 9px;
}

.news-flow-item {
    position: relative;

    display: grid;

    grid-template-columns:
        31px
        minmax(0,1fr);

    gap: 10px;

    min-height: 89px;

    padding: 12px;

    border:
        1px solid rgba(83,52,31,.075);

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffaf6
        );
}

.news-flow-number {
    width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #ff5700,
            #ff9b00
        );

    box-shadow:
        0 7px 17px rgba(255,101,0,.17);

    font-size: 9px;

    font-weight: 950;
}

.news-flow-item strong {
    display: block;

    margin-bottom: 4px;

    color: #2d211a;

    font-size: 11px;

    line-height: 1.25;
}

.news-flow-item div > span {
    display: block;

    color: #8e7a6d;

    font-size: 9px;

    line-height: 1.45;
}


/* =========================================================
   PLATFORMS
========================================================= */

.news-platforms {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 8px;
}

.news-platform {
    min-height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    border:
        1px solid rgba(79,50,31,.09);

    border-radius: 11px;

    background: #fff;

    color: #40342d;

    font-size: 9px;

    font-weight: 850;
}

.news-platform b {
    width: 22px;
    height: 22px;

    display: grid;
    place-items: center;

    border-radius: 7px;

    color: #fff;

    font-size: 11px;
}

.news-platform.tiktok b {
    background:
        linear-gradient(
            135deg,
            #111,
            #353535
        );
}

.news-platform.facebook b {
    background: #0866ff;

    font-family:
        Arial,
        sans-serif;

    font-size: 15px;
}

.news-platform.youtube b {
    background: #ff0033;
}


/* =========================================================
   FEATURE CHIPS
========================================================= */

.news-features {
    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 7px;
}

.news-features span {
    min-height: 35px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 6px;

    text-align: center;

    color: #9b6039;

    border:
        1px solid rgba(255,101,0,.12);

    border-radius: 9px;

    background:
        linear-gradient(
            145deg,
            #fff1e6,
            #fff9f4
        );

    font-size: 8px;

    font-weight: 850;
}


/* =========================================================
   PRICE
========================================================= */

.news-price-card {
    display: grid;

    grid-template-columns:
        auto
        minmax(0,1fr);

    align-items: center;

    gap: 24px;

    padding:
        17px 19px;

    border:
        1px solid rgba(255,101,0,.18);

    border-radius: 16px;

    background:
        radial-gradient(
            300px 110px at 0% 50%,
            rgba(255,112,0,.13),
            transparent 72%
        ),
        linear-gradient(
            135deg,
            #fff6ee,
            #ffffff
        );

    box-shadow:
        0 13px 35px rgba(91,47,14,.055);
}

.news-price-card > div:first-child {
    min-width: 205px;

    padding-right: 22px;

    border-right:
        1px solid rgba(255,101,0,.12);
}

.news-price-label {
    display: block;

    margin-bottom: 5px;

    color: #ba7350;

    font-size: 7px;

    font-weight: 950;

    letter-spacing: .12em;
}

.news-price {
    display: flex;

    align-items: baseline;

    gap: 6px;
}

.news-price small {
    color: #8c7566;

    font-size: 9px;

    font-weight: 800;
}

.news-price strong {
    color: transparent;

    background:
        linear-gradient(
            100deg,
            #ff5000,
            #ff9200
        );

    background-clip: text;
    -webkit-background-clip: text;

    font-size: 28px;

    line-height: 1;

    font-weight: 950;

    letter-spacing: -.045em;
}

.news-price > span {
    color: #75655b;

    font-size: 8px;

    font-weight: 850;
}


.news-price-copy {
    display: flex;

    align-items: center;

    gap: 11px;
}

.news-price-check {
    width: 32px;
    height: 32px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    color: #ff6500;

    border-radius: 10px;

    background: #fff0e5;

    font-weight: 950;
}

.news-price-copy strong {
    display: block;

    color: #30231c;

    font-size: 11px;
}

.news-price-copy small {
    display: block;

    margin-top: 3px;

    color: #927e70;

    font-size: 8px;

    line-height: 1.4;
}


/* =========================================================
   FOOTER
========================================================= */

.tool-card-proof:has(.news-sales-panel)
.tool-card-footer {
    margin-top: 16px !important;

    padding-top: 14px !important;

    border-top:
        1px solid rgba(91,54,31,.07);
}


/* =========================================================
   NEWS VIDEO HEIGHT = CARD LEFT
========================================================= */

@media (min-width: 881px) {

    .tool-showcase-row:has(.news-sales-panel) {
        align-items: start !important;

        height: auto !important;
        min-height: 0 !important;
    }

    .tool-showcase-row:has(.news-sales-panel)
    .tool-card-proof {
        height: auto !important;
        min-height: 0 !important;

        align-self: start !important;
    }

    .tool-showcase-row:has(.news-sales-panel)
    .tool-demo-card {
        height: var(--news-card-height) !important;
        min-height: var(--news-card-height) !important;
        max-height: var(--news-card-height) !important;

        display: flex !important;
        flex-direction: column !important;

        align-self: start !important;

        overflow: hidden !important;
    }

    .tool-showcase-row:has(.news-sales-panel)
    .tool-demo-header,
    .tool-showcase-row:has(.news-sales-panel)
    .demo-caption {
        flex: 0 0 auto !important;
    }

    .tool-showcase-row:has(.news-sales-panel)
    .tool-video-frame {
        flex: 1 1 0 !important;

        height: 0 !important;
        min-height: 0 !important;

        overflow: hidden !important;

        background: #100a07;
    }

    .tool-showcase-row:has(.news-sales-panel)
    .tool-proof-video {
        width: 100% !important;
        height: 100% !important;

        min-height: 0 !important;

        object-fit: contain !important;
        object-position: center !important;
    }

    .tool-showcase-row:has(.news-sales-panel)
    .tool-proof-connector {
        height: var(--news-card-height) !important;

        margin-top: 0 !important;

        align-self: start !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .news-flow {
        grid-template-columns: 1fr;
    }

    .news-features {
        grid-template-columns:
            repeat(2,1fr);
    }

    .news-price-card {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .news-price-card > div:first-child {
        min-width: 0;

        padding-right: 0;
        padding-bottom: 13px;

        border-right: 0;

        border-bottom:
            1px solid rgba(255,101,0,.12);
    }

}

@media (max-width: 480px) {

    .news-platforms {
        grid-template-columns: 1fr;
    }

}

/* NEWS GUIDE PATCH END */


/* NEWS LIFETIME CSS START */

.news-lifetime-benefits {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 9px;
}

.news-lifetime-benefits span {
    display: inline-flex;
    align-items: center;

    padding: 6px 9px;

    color: #e95b00;

    border:
        1px solid rgba(255,101,0,.14);

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #fff0e5,
            #fff8f2
        );

    font-size: 8px;
    font-weight: 900;
}

/* NEWS LIFETIME CSS END */


/* VIETSUB PRO GUIDE PATCH START */

/* =========================================================
   MAIN
========================================================= */

.vietsub-sales-panel {
    flex: 0 0 auto;

    display: flex;
    flex-direction: column;

    gap: 15px;

    margin-top: 20px;

    padding-top: 20px;

    border-top:
        1px solid rgba(255,101,0,.10);
}

.vietsub-guide-head {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.vietsub-guide-label {
    width: fit-content;

    padding:
        6px 9px;

    color: #ff6500;

    border:
        1px solid rgba(255,101,0,.15);

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #fff0e5,
            #fff9f4
        );

    font-size: 8px;
    font-weight: 950;

    letter-spacing: .11em;
}

.vietsub-guide-head > strong {
    color: #201710;

    font-size: 17px;

    line-height: 1.35;

    letter-spacing: -.025em;
}


/* =========================================================
   SOURCE CARDS
========================================================= */

.vietsub-source-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap: 7px;
}

.vietsub-source-card {
    display: flex;
    align-items: center;

    gap: 8px;

    min-width: 0;

    padding:
        9px 9px;

    border:
        1px solid rgba(78,50,31,.08);

    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffaf6
        );
}

.vietsub-source-icon {
    width: 27px;
    height: 27px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 8px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #ff5900,
            #ff9800
        );

    font-size: 10px;
    font-weight: 950;
}

.vietsub-source-card strong {
    display: block;

    color: #33251d;

    font-size: 9px;
}

.vietsub-source-card small {
    display: block;

    margin-top: 2px;

    color: #9b8170;

    font-size: 7px;

    line-height: 1.3;
}


/* upload nổi bật */
.vietsub-source-card.upload {
    border-color:
        rgba(255,101,0,.18);

    background:
        linear-gradient(
            145deg,
            #fff1e5,
            #fff9f4
        );
}


/* =========================================================
   FLOW
========================================================= */

.vietsub-flow {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 8px;
}

.vietsub-flow-item {
    display: grid;

    grid-template-columns:
        30px
        minmax(0,1fr);

    gap: 9px;

    min-height: 76px;

    padding: 10px;

    border:
        1px solid rgba(78,50,31,.075);

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffaf6
        );
}

.vietsub-flow-number {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #ff5700,
            #ff9a00
        );

    box-shadow:
        0 7px 16px rgba(255,101,0,.16);

    font-size: 9px;
    font-weight: 950;
}

.vietsub-flow-item strong {
    display: block;

    margin-bottom: 3px;

    color: #2d2119;

    font-size: 10px;
}

.vietsub-flow-item div > span {
    display: block;

    color: #8e796b;

    font-size: 8px;

    line-height: 1.45;
}


/* =========================================================
   FEATURES
========================================================= */

.vietsub-feature-strip {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap: 7px;
}

.vietsub-feature-strip span {
    min-height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 6px;

    text-align: center;

    color: #985e39;

    border:
        1px solid rgba(255,101,0,.12);

    border-radius: 9px;

    background:
        linear-gradient(
            145deg,
            #fff0e5,
            #fff9f4
        );

    font-size: 7px;

    font-weight: 850;
}


/* =========================================================
   QUALITY
========================================================= */

.vietsub-quality-box {
    display: grid;

    grid-template-columns:
        auto
        minmax(0,1fr);

    align-items: center;

    gap: 19px;

    padding:
        13px 15px;

    border:
        1px solid rgba(255,101,0,.14);

    border-radius: 14px;

    background:
        radial-gradient(
            270px 110px at 0% 50%,
            rgba(255,107,0,.11),
            transparent 72%
        ),
        #fff;
}

.vietsub-quality-main {
    min-width: 145px;

    padding-right: 20px;

    border-right:
        1px solid rgba(255,101,0,.11);
}

.vietsub-quality-label {
    display: block;

    margin-bottom: 3px;

    color: #bc7652;

    font-size: 6px;
    font-weight: 950;

    letter-spacing: .11em;
}

.vietsub-quality-main strong {
    display: block;

    color: transparent;

    background:
        linear-gradient(
            100deg,
            #ff5000,
            #ff9700
        );

    background-clip: text;
    -webkit-background-clip: text;

    font-size: 26px;

    line-height: 1;

    font-weight: 950;

    letter-spacing: -.05em;
}

.vietsub-quality-main small {
    display: block;

    max-width: 220px;

    margin-top: 5px;

    color: #8f7b6e;

    font-size: 7px;

    line-height: 1.4;
}

.vietsub-quality-side {
    display: flex;
    align-items: center;

    gap: 9px;
}

.vietsub-check {
    width: 29px;
    height: 29px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 9px;

    color: #ff6500;

    background: #fff0e5;

    font-size: 12px;
    font-weight: 950;
}

.vietsub-quality-side strong {
    display: block;

    color: #32251d;

    font-size: 9px;
}

.vietsub-quality-side small {
    display: block;

    margin-top: 3px;

    color: #927f72;

    font-size: 7px;
}


/* =========================================================
   PRICE
========================================================= */

.vietsub-price-card {
    display: grid;

    grid-template-columns:
        auto
        minmax(0,1fr);

    align-items: center;

    gap: 20px;

    padding:
        15px 17px;

    border:
        1px solid rgba(255,101,0,.18);

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #fff4eb,
            #ffffff
        );

    box-shadow:
        0 10px 30px rgba(91,47,14,.05);
}

.vietsub-price-left {
    min-width: 190px;

    padding-right: 19px;

    border-right:
        1px solid rgba(255,101,0,.11);
}

.vietsub-price-label {
    display: block;

    margin-bottom: 4px;

    color: #b96f4a;

    font-size: 7px;
    font-weight: 950;

    letter-spacing: .12em;
}

.vietsub-price {
    display: flex;
    align-items: baseline;

    gap: 5px;
}

.vietsub-price strong {
    color: transparent;

    background:
        linear-gradient(
            100deg,
            #ff5000,
            #ff9200
        );

    background-clip: text;
    -webkit-background-clip: text;

    font-size: 27px;

    line-height: 1;

    font-weight: 950;

    letter-spacing: -.045em;
}

.vietsub-price span {
    color: #77675d;

    font-size: 8px;
    font-weight: 800;
}

.vietsub-price-right {
    display: grid;

    gap: 7px;
}

.vietsub-benefit {
    display: flex;
    align-items: center;

    gap: 8px;
}

.vietsub-benefit span {
    width: 22px;
    height: 22px;

    display: grid;
    place-items: center;

    border-radius: 7px;

    color: #ff6500;

    background: #fff0e5;

    font-size: 9px;
    font-weight: 950;
}

.vietsub-benefit strong {
    color: #31241c;

    font-size: 8px;
}


/* =========================================================
   FOOTER
========================================================= */

.tool-card-proof:has(.vietsub-sales-panel)
.tool-card-footer {
    margin-top: 15px !important;

    padding-top: 13px !important;
}


/* =========================================================
   VIDEO = CHIỀU CAO CARD TRÁI
========================================================= */

@media (min-width: 881px) {

    .tool-showcase-row:has(.vietsub-sales-panel) {
        align-items: start !important;

        height: auto !important;
        min-height: 0 !important;
    }

    .tool-showcase-row:has(.vietsub-sales-panel)
    .tool-card-proof {
        height: auto !important;
        min-height: 0 !important;

        align-self: start !important;
    }

    .tool-showcase-row:has(.vietsub-sales-panel)
    .tool-demo-card {
        height: var(--vietsub-card-height) !important;

        min-height: var(--vietsub-card-height) !important;
        max-height: var(--vietsub-card-height) !important;

        display: flex !important;
        flex-direction: column !important;

        align-self: start !important;

        overflow: hidden !important;
    }

    .tool-showcase-row:has(.vietsub-sales-panel)
    .tool-demo-header,
    .tool-showcase-row:has(.vietsub-sales-panel)
    .demo-caption {
        flex: 0 0 auto !important;
    }

    .tool-showcase-row:has(.vietsub-sales-panel)
    .tool-video-frame {
        flex: 1 1 0 !important;

        height: 0 !important;
        min-height: 0 !important;

        overflow: hidden !important;
    }

    .tool-showcase-row:has(.vietsub-sales-panel)
    .tool-proof-video {
        width: 100% !important;
        height: 100% !important;

        min-height: 0 !important;

        object-fit: contain !important;
    }

    .tool-showcase-row:has(.vietsub-sales-panel)
    .tool-proof-connector {
        height: var(--vietsub-card-height) !important;

        margin-top: 0 !important;

        align-self: start !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;
    }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .vietsub-source-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .vietsub-flow {
        grid-template-columns:
            1fr;
    }

}

@media (max-width: 650px) {

    .vietsub-feature-strip {
        grid-template-columns:
            repeat(2,1fr);
    }

    .vietsub-quality-box,
    .vietsub-price-card {
        grid-template-columns:
            1fr;
    }

    .vietsub-quality-main,
    .vietsub-price-left {
        min-width: 0;

        padding-right: 0;
        padding-bottom: 11px;

        border-right: 0;

        border-bottom:
            1px solid rgba(255,101,0,.11);
    }

}

@media (max-width: 430px) {

    .vietsub-source-grid {
        grid-template-columns:
            1fr;
    }

}

/* VIETSUB PRO GUIDE PATCH END */


/* REVIEW PRO GUIDE PATCH START */

.review-sales-panel {
    flex: 0 0 auto;

    display: flex;
    flex-direction: column;

    gap: 14px;

    margin-top: 20px;

    padding-top: 20px;

    border-top:
        1px solid rgba(255,101,0,.10);
}

.review-guide-head {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.review-guide-label {
    width: fit-content;

    padding:
        6px 9px;

    color: #ff6500;

    border:
        1px solid rgba(255,101,0,.15);

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #fff0e5,
            #fff9f4
        );

    font-size: 8px;
    font-weight: 950;

    letter-spacing: .11em;
}

.review-guide-head > strong {
    color: #211710;

    font-size: 17px;

    line-height: 1.35;

    letter-spacing: -.025em;
}


/* =========================================================
   SOURCE
========================================================= */

.review-source-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap: 7px;
}

.review-source-card {
    display: flex;
    align-items: center;

    gap: 8px;

    padding:
        9px;

    border:
        1px solid rgba(79,50,31,.08);

    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffaf6
        );
}

.review-source-card.upload {
    border-color:
        rgba(255,101,0,.18);

    background:
        linear-gradient(
            145deg,
            #fff0e5,
            #fff9f4
        );
}

.review-source-icon {
    width: 27px;
    height: 27px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    color: #fff;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #ff5700,
            #ff9900
        );

    font-size: 9px;

    font-weight: 950;
}

.review-source-card strong {
    display: block;

    color: #36271f;

    font-size: 9px;
}

.review-source-card small {
    display: block;

    margin-top: 2px;

    color: #9a8171;

    font-size: 7px;
}


/* =========================================================
   FLOW
========================================================= */

.review-flow {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 8px;
}

.review-flow-item {
    display: grid;

    grid-template-columns:
        29px
        minmax(0,1fr);

    gap: 9px;

    min-height: 73px;

    padding: 10px;

    border:
        1px solid rgba(79,50,31,.075);

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffaf6
        );
}

.review-flow-number {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    color: #fff;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #ff5700,
            #ff9a00
        );

    box-shadow:
        0 7px 16px rgba(255,101,0,.17);

    font-size: 9px;

    font-weight: 950;
}

.review-flow-item strong {
    display: block;

    margin-bottom: 3px;

    color: #2e211a;

    font-size: 10px;
}

.review-flow-item div > span {
    display: block;

    color: #8e796b;

    font-size: 8px;

    line-height: 1.45;
}


/* =========================================================
   FEATURES
========================================================= */

.review-feature-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 7px;
}

.review-feature-grid span {
    min-height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 6px;

    text-align: center;

    color: #985d37;

    border:
        1px solid rgba(255,101,0,.12);

    border-radius: 9px;

    background:
        linear-gradient(
            145deg,
            #fff0e5,
            #fff9f4
        );

    font-size: 7px;

    font-weight: 850;
}


/* =========================================================
   QUALITY
========================================================= */

.review-quality-box {
    display: grid;

    grid-template-columns:
        auto
        minmax(0,1fr);

    align-items: center;

    gap: 18px;

    padding:
        12px 14px;

    border:
        1px solid rgba(255,101,0,.14);

    border-radius: 14px;

    background:
        radial-gradient(
            280px 110px at 0% 50%,
            rgba(255,107,0,.11),
            transparent 72%
        ),
        #fff;
}

.review-quality-main {
    min-width: 150px;

    padding-right: 18px;

    border-right:
        1px solid rgba(255,101,0,.11);
}

.review-quality-label {
    display: block;

    color: #b97653;

    font-size: 6px;

    font-weight: 950;

    letter-spacing: .11em;
}

.review-quality-main strong {
    display: block;

    margin-top: 3px;

    color: transparent;

    background:
        linear-gradient(
            100deg,
            #ff5000,
            #ff9700
        );

    background-clip: text;
    -webkit-background-clip: text;

    font-size: 21px;

    font-weight: 950;
}

.review-quality-main small {
    display: block;

    max-width: 220px;

    margin-top: 4px;

    color: #917d70;

    font-size: 7px;

    line-height: 1.4;
}

.review-quality-side {
    display: flex;
    align-items: center;

    gap: 9px;
}

.review-quality-check {
    width: 29px;
    height: 29px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 9px;

    color: #ff6500;

    background: #fff0e5;

    font-size: 11px;

    font-weight: 950;
}

.review-quality-side strong {
    display: block;

    color: #33261e;

    font-size: 9px;
}

.review-quality-side small {
    display: block;

    margin-top: 3px;

    color: #927e70;

    font-size: 7px;
}


/* =========================================================
   PRICE
========================================================= */

.review-price-card {
    display: grid;

    grid-template-columns:
        auto
        minmax(0,1fr);

    align-items: center;

    gap: 20px;

    padding:
        14px 17px;

    border:
        1px solid rgba(255,101,0,.18);

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #fff4eb,
            #ffffff
        );

    box-shadow:
        0 10px 30px rgba(91,47,14,.05);
}

.review-price-left {
    min-width: 205px;

    padding-right: 19px;

    border-right:
        1px solid rgba(255,101,0,.11);
}

.review-price-label {
    display: block;

    margin-bottom: 4px;

    color: #b96f4a;

    font-size: 7px;

    font-weight: 950;

    letter-spacing: .12em;
}

.review-price {
    display: flex;
    align-items: baseline;

    gap: 5px;
}

.review-price > span {
    color: #8a7567;

    font-size: 8px;

    font-weight: 800;
}

.review-price strong {
    color: transparent;

    background:
        linear-gradient(
            100deg,
            #ff5000,
            #ff9200
        );

    background-clip: text;
    -webkit-background-clip: text;

    font-size: 27px;

    line-height: 1;

    font-weight: 950;

    letter-spacing: -.045em;
}

.review-price small {
    color: #77675b;

    font-size: 8px;

    font-weight: 800;
}

.review-price-right {
    display: grid;

    gap: 6px;
}

.review-benefit {
    display: flex;
    align-items: center;

    gap: 8px;
}

.review-benefit > span {
    width: 21px;
    height: 21px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 7px;

    color: #ff6500;

    background: #fff0e5;

    font-size: 8px;

    font-weight: 950;
}

.review-benefit strong {
    color: #30231c;

    font-size: 8px;
}


/* =========================================================
   FOOTER
========================================================= */

.tool-card-proof:has(.review-sales-panel)
.tool-card-footer {
    margin-top: 15px !important;

    padding-top: 13px !important;
}


/* =========================================================
   VIDEO = CHIỀU CAO CARD TRÁI
========================================================= */

@media (min-width: 881px) {

    .tool-showcase-row:has(.review-sales-panel) {
        align-items: start !important;

        height: auto !important;

        min-height: 0 !important;
    }

    .tool-showcase-row:has(.review-sales-panel)
    .tool-card-proof {
        height: auto !important;

        min-height: 0 !important;

        align-self: start !important;
    }

    .tool-showcase-row:has(.review-sales-panel)
    .tool-demo-card {
        height:
            var(--review-card-height) !important;

        min-height:
            var(--review-card-height) !important;

        max-height:
            var(--review-card-height) !important;

        display: flex !important;

        flex-direction: column !important;

        align-self: start !important;

        overflow: hidden !important;
    }

    .tool-showcase-row:has(.review-sales-panel)
    .tool-demo-header,
    .tool-showcase-row:has(.review-sales-panel)
    .demo-caption {
        flex: 0 0 auto !important;
    }

    .tool-showcase-row:has(.review-sales-panel)
    .tool-video-frame {
        flex: 1 1 0 !important;

        height: 0 !important;

        min-height: 0 !important;

        overflow: hidden !important;
    }

    .tool-showcase-row:has(.review-sales-panel)
    .tool-proof-video {
        width: 100% !important;

        height: 100% !important;

        min-height: 0 !important;

        object-fit: contain !important;

        object-position: center !important;
    }

    .tool-showcase-row:has(.review-sales-panel)
    .tool-proof-connector {
        height:
            var(--review-card-height) !important;

        margin-top: 0 !important;

        align-self: start !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;
    }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .review-source-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .review-flow {
        grid-template-columns:
            1fr;
    }

}

@media (max-width: 650px) {

    .review-feature-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .review-quality-box,
    .review-price-card {
        grid-template-columns:
            1fr;
    }

    .review-quality-main,
    .review-price-left {
        min-width: 0;

        padding-right: 0;
        padding-bottom: 11px;

        border-right: 0;

        border-bottom:
            1px solid rgba(255,101,0,.11);
    }

}

@media (max-width: 430px) {

    .review-source-grid {
        grid-template-columns:
            1fr;
    }

}

/* REVIEW PRO GUIDE PATCH END */


/* REVIEW PUBLISH PATCH START */

.review-publish-box {
    padding:
        13px 14px;

    border:
        1px solid rgba(255,101,0,.13);

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #fff9f4,
            #ffffff
        );
}

.review-publish-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 10px;
}

.review-publish-label {
    color: #ff6500;

    font-size: 7px;

    font-weight: 950;

    letter-spacing: .12em;
}

.review-publish-head strong {
    margin-left: auto;

    color: #35271f;

    font-size: 9px;
}

.review-publish-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 8px;
}

.review-publish-option {
    display: flex;
    align-items: center;

    gap: 9px;

    padding:
        10px;

    border:
        1px solid rgba(79,50,31,.08);

    border-radius: 11px;

    background: #fff;
}

.review-publish-option.active {
    border-color:
        rgba(255,101,0,.22);

    background:
        linear-gradient(
            145deg,
            #fff0e5,
            #fff9f4
        );
}

.review-publish-icon {
    width: 28px;
    height: 28px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    color: #fff;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #ff5700,
            #ff9b00
        );

    font-size: 11px;
    font-weight: 950;
}

.review-publish-option strong {
    display: block;

    color: #30231c;

    font-size: 9px;
}

.review-publish-option small {
    display: block;

    margin-top: 3px;

    color: #8e796b;

    font-size: 7px;

    line-height: 1.4;
}

.review-publish-platforms {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 7px;

    margin-top: 8px;
}

.review-publish-platform {
    min-height: 33px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    border:
        1px solid rgba(79,50,31,.08);

    border-radius: 9px;

    background: #fff;

    color: #42352d;

    font-size: 8px;
    font-weight: 850;
}

.review-publish-platform b {
    width: 20px;
    height: 20px;

    display: grid;
    place-items: center;

    color: #fff;

    border-radius: 6px;

    font-size: 10px;
}

.review-publish-platform.tiktok b {
    background: #151515;
}

.review-publish-platform.facebook b {
    background: #0866ff;

    font-family: Arial, sans-serif;

    font-size: 13px;
}

.review-publish-platform.youtube b {
    background: #ff0033;
}

.review-publish-note {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-top: 9px;

    padding-top: 8px;

    border-top:
        1px solid rgba(79,50,31,.07);
}

.review-publish-note > span {
    width: 20px;
    height: 20px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    color: #ff6500;

    border-radius: 6px;

    background: #fff0e5;

    font-size: 8px;

    font-weight: 950;
}

.review-publish-note strong {
    color: #362820;

    font-size: 8px;
}

.review-publish-note small {
    color: #8e796b;

    font-size: 7px;
}

@media (max-width: 650px) {

    .review-publish-head {
        align-items: flex-start;

        flex-direction: column;
    }

    .review-publish-head strong {
        margin-left: 0;
    }

    .review-publish-grid {
        grid-template-columns: 1fr;
    }

    .review-publish-platforms {
        grid-template-columns: 1fr;
    }

}

/* REVIEW PUBLISH PATCH END */


/* VIETSUB PUBLISH PATCH START */

.vietsub-publish-box {
    padding:
        13px 14px;

    border:
        1px solid rgba(255,101,0,.13);

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #fff9f4,
            #ffffff
        );
}

.vietsub-publish-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 10px;
}

.vietsub-publish-head > span {
    color: #ff6500;

    font-size: 7px;
    font-weight: 950;

    letter-spacing: .12em;
}

.vietsub-publish-head > strong {
    margin-left: auto;

    color: #362820;

    font-size: 9px;
}

.vietsub-publish-options {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 8px;
}

.vietsub-publish-option {
    display: flex;
    align-items: center;

    gap: 9px;

    padding: 10px;

    border:
        1px solid rgba(79,50,31,.08);

    border-radius: 11px;

    background: #fff;
}

.vietsub-publish-option.active {
    border-color:
        rgba(255,101,0,.22);

    background:
        linear-gradient(
            145deg,
            #fff0e5,
            #fff9f4
        );
}

.vietsub-publish-icon {
    width: 28px;
    height: 28px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    color: #fff;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #ff5700,
            #ff9b00
        );

    font-size: 11px;
    font-weight: 950;
}

.vietsub-publish-option strong {
    display: block;

    color: #30231c;

    font-size: 9px;
}

.vietsub-publish-option small {
    display: block;

    margin-top: 3px;

    color: #8e796b;

    font-size: 7px;

    line-height: 1.4;
}

.vietsub-publish-platforms {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 7px;

    margin-top: 8px;
}

.vietsub-publish-platform {
    min-height: 33px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    color: #42352d;

    border:
        1px solid rgba(79,50,31,.08);

    border-radius: 9px;

    background: #fff;

    font-size: 8px;
    font-weight: 850;
}

.vietsub-publish-platform b {
    width: 20px;
    height: 20px;

    display: grid;
    place-items: center;

    color: #fff;

    border-radius: 6px;

    font-size: 10px;
}

.vietsub-publish-platform.tiktok b {
    background: #151515;
}

.vietsub-publish-platform.facebook b {
    background: #0866ff;

    font-family: Arial, sans-serif;

    font-size: 13px;
}

.vietsub-publish-platform.youtube b {
    background: #ff0033;
}

.vietsub-publish-note {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-top: 9px;
    padding-top: 8px;

    border-top:
        1px solid rgba(79,50,31,.07);
}

.vietsub-publish-note > span {
    width: 20px;
    height: 20px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    color: #ff6500;

    border-radius: 6px;

    background: #fff0e5;

    font-size: 8px;
    font-weight: 950;
}

.vietsub-publish-note strong {
    display: block;

    color: #362820;

    font-size: 8px;
}

.vietsub-publish-note small {
    display: block;

    margin-top: 3px;

    color: #8e796b;

    font-size: 7px;

    line-height: 1.35;
}

@media (max-width: 650px) {

    .vietsub-publish-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .vietsub-publish-head > strong {
        margin-left: 0;
    }

    .vietsub-publish-options {
        grid-template-columns: 1fr;
    }

    .vietsub-publish-platforms {
        grid-template-columns: 1fr;
    }

}

/* VIETSUB PUBLISH PATCH END */

</style>
</head>

<body>

<!-- =========================================================
     SVG SPRITE
========================================================= -->

<svg class="svg-sprite"
     xmlns="http://www.w3.org/2000/svg">

    <symbol id="i-download" viewBox="0 0 24 24">
        <path d="M12 3v11"/>
        <path d="m7 10 5 5 5-5"/>
        <path d="M5 20h14"/>
    </symbol>

    <symbol id="i-live" viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="2"/>
        <path d="M8.5 8.5a5 5 0 0 0 0 7"/>
        <path d="M15.5 8.5a5 5 0 0 1 0 7"/>
        <path d="M5.5 5.5a9 9 0 0 0 0 13"/>
        <path d="M18.5 5.5a9 9 0 0 1 0 13"/>
    </symbol>

    <symbol id="i-news" viewBox="0 0 24 24">
        <rect x="3" y="4" width="18" height="16" rx="2"/>
        <path d="M7 8h10"/>
        <path d="M7 12h10"/>
        <path d="M7 16h6"/>
    </symbol>

    <symbol id="i-subtitle" viewBox="0 0 24 24">
        <rect x="3" y="4" width="18" height="16" rx="3"/>
        <path d="M6.5 13.5h4"/>
        <path d="M13.5 13.5h4"/>
        <path d="M8 16.5h8"/>
    </symbol>

    <symbol id="i-star" viewBox="0 0 24 24">
        <path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.3l-5.6 2.9 1.1-6.2L3 9.6l6.2-.9z"/>
    </symbol>

    <symbol id="i-movie" viewBox="0 0 24 24">
        <rect x="3" y="6" width="18" height="14" rx="2"/>
        <path d="m3 10 4-4"/>
        <path d="m8 10 4-4"/>
        <path d="m13 10 4-4"/>
        <path d="m18 10 3-3"/>
    </symbol>

    <symbol id="i-clone" viewBox="0 0 24 24">
        <rect x="4" y="4" width="11" height="11" rx="2"/>
        <rect x="9" y="9" width="11" height="11" rx="2"/>
    </symbol>

    <symbol id="i-story" viewBox="0 0 24 24">
        <path d="M4 5.5A3.5 3.5 0 0 1 7.5 2H12v18H7.5A3.5 3.5 0 0 0 4 23z"/>
        <path d="M20 5.5A3.5 3.5 0 0 0 16.5 2H12v18h4.5A3.5 3.5 0 0 1 20 23z"/>
    </symbol>

    <symbol id="i-code" viewBox="0 0 24 24">
        <path d="m8 9-4 3 4 3"/>
        <path d="m16 9 4 3-4 3"/>
        <path d="m14 5-4 14"/>
    </symbol>

    <symbol id="i-search" viewBox="0 0 24 24">
        <circle cx="11" cy="11" r="7"/>
        <path d="m20 20-4-4"/>
    </symbol>

    <symbol id="i-arrow" viewBox="0 0 24 24">
        <path d="M5 12h14"/>
        <path d="m14 7 5 5-5 5"/>
    </symbol>

    <symbol id="i-heart" viewBox="0 0 24 24">
        <path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z"/>
    </symbol>

    <symbol id="i-menu" viewBox="0 0 24 24">
        <path d="M4 7h16"/>
        <path d="M4 12h16"/>
        <path d="M4 17h16"/>
    </symbol>

    <symbol id="i-close" viewBox="0 0 24 24">
        <path d="m6 6 12 12"/>
        <path d="m18 6-12 12"/>
    </symbol>

</svg>

<!-- =========================================================
     HEADER
========================================================= -->


<header class="site-header premium-header">

    <div class="container nav nav-premium">

        <!-- MENU TRÁI -->
        <nav class="nav-links nav-left"
             id="mainNav">

            <a href="#home"
               class="nav-link active">
                Trang chủ
            </a>

            <a href="#tools"
               class="nav-link">
                Công cụ
            </a>

            <a href="#workflow"
               class="nav-link">
                Quy trình
            </a>

            <a href="#solutions"
               class="nav-link">
                Giải pháp
            </a>

            <a href="#contact"
               class="nav-link">
                Liên hệ
            </a>

        </nav>


        <!-- BRAND GIỮA -->
        <a href="#home"
           class="brand brand-center"
           aria-label="Kho Premium">

            <span class="brand-visual">

                <canvas
                    id="brand-three"
                    aria-hidden="true">
                </canvas>

                <span class="brand-emblem">

                    <svg
                        viewBox="0 0 72 72"
                        role="img"
                        aria-label="Kho Premium logo"
                        xmlns="http://www.w3.org/2000/svg">

                        <defs>

                            <linearGradient
                                id="kpLogoGradient"
                                x1="8"
                                y1="8"
                                x2="64"
                                y2="64"
                                gradientUnits="userSpaceOnUse">

                                <stop
                                    offset="0%"
                                    stop-color="#FF4D00"/>

                                <stop
                                    offset="48%"
                                    stop-color="#FF7200"/>

                                <stop
                                    offset="100%"
                                    stop-color="#FFAA1A"/>

                            </linearGradient>

                            <linearGradient
                                id="kpLogoLight"
                                x1="18"
                                y1="16"
                                x2="48"
                                y2="56"
                                gradientUnits="userSpaceOnUse">

                                <stop
                                    stop-color="#FFFFFF"/>

                                <stop
                                    offset="1"
                                    stop-color="#FFF2E7"/>

                            </linearGradient>

                            <filter
                                id="kpLogoShadow"
                                x="-40%"
                                y="-40%"
                                width="180%"
                                height="180%">

                                <feDropShadow
                                    dx="0"
                                    dy="5"
                                    stdDeviation="5"
                                    flood-color="#FF6600"
                                    flood-opacity=".28"/>

                            </filter>

                        </defs>

                        <!-- outer -->
                        <path
                            d="
                            M36 4
                            C48 4 59 8 65 17
                            C70 25 70 47 64 56
                            C57 66 47 69 36 69
                            C23 69 13 66 7 56
                            C2 47 2 25 8 16
                            C14 8 24 4 36 4Z"
                            fill="url(#kpLogoGradient)"
                            filter="url(#kpLogoShadow)"/>

                        <!-- glass highlight -->
                        <path
                            d="
                            M14 18
                            C19 10 28 8 38 8
                            C48 8 56 11 61 18
                            C47 13 28 13 14 18Z"
                            fill="white"
                            opacity=".18"/>

                        <!-- custom K -->
                        <path
                            d="
                            M21 19
                            H29
                            V32
                            L42 19
                            H53
                            L38 34
                            L55 53
                            H44
                            L29 37
                            V53
                            H21
                            Z"
                            fill="url(#kpLogoLight)"/>

                        <!-- micro accent -->
                        <circle
                            cx="56"
                            cy="16"
                            r="3"
                            fill="#FFFFFF"
                            opacity=".9"/>

                    </svg>

                </span>

            </span>


            <span class="brand-copy">

                <span class="brand-name">

                    <span class="brand-name-kho">
                        KHO
                    </span>

                    <span class="brand-name-premium">
                        PREMIUM
                    </span>

                </span>

                <span class="brand-sub">
                    CREATOR AUTOMATION SYSTEM
                </span>

            </span>
            <!-- HIEU PHAM DEV SIDEKICK START -->
            <span class="brand-sidekick"
                  aria-label="Hieu Pham Dev">

                <span class="brand-divider"></span>

                <span class="dev-mark-wrap">

                    <span class="dev-smoke dev-smoke-1"></span>
                    <span class="dev-smoke dev-smoke-2"></span>
                    <span class="dev-smoke dev-smoke-3"></span>

                    <span class="dev-bolt-group"
                          aria-hidden="true">

                        <svg
                            class="dev-bolt bolt-main"
                            viewBox="0 0 24 24"
                            xmlns="http://www.w3.org/2000/svg">

                            <path
                                d="M13 2L4 13h6l-1 9 11-13h-6l1-7z"
                                fill="currentColor"/>

                        </svg>

                        <svg
                            class="dev-bolt bolt-mini"
                            viewBox="0 0 24 24"
                            xmlns="http://www.w3.org/2000/svg">

                            <path
                                d="M13 2L6 11h4l-1 7 8-9h-4l1-7z"
                                fill="currentColor"/>

                        </svg>

                    </span>

                    <span class="dev-pill">

                        <span class="dev-pill-glow"></span>

                        <span class="dev-pill-label">
                            Hieu Pham Dev
                        </span>

                    </span>

                </span>

            </span>
            <!-- HIEU PHAM DEV SIDEKICK END -->


        </a>


        <!-- ACTION PHẢI -->
        <div class="nav-actions">

            <?php if (currentUserId()): ?>

                <div class="user-chip">

                    <div class="user-avatar">
                        <?= e(strtoupper(substr($_SESSION['user_name'] ?? 'U', 0, 1))) ?>
                    </div>

                    <strong>
                        <?= e($_SESSION['user_name'] ?? 'Tài khoản') ?>
                    </strong>

                </div>

                <button
                    class="button"
                    id="logoutBtn">
                    Đăng xuất
                </button>

            <?php else: ?>

                <button
                    class="button"
                    data-open-auth="login">
                    Đăng nhập
                </button>

                <button
                    class="button button-primary"
                    data-open-auth="register">
                    Đăng ký
                </button>

            <?php endif; ?>


            <button
                class="mobile-toggle"
                id="mobileToggle"
                aria-label="Menu">

                <svg class="icon">
                    <use href="#i-menu"></use>
                </svg>

            </button>

        </div>

    </div>

</header>


<!-- =========================================================
     HERO
========================================================= -->

<main id="home">

<section class="hero">

    <canvas id="three-bg"></canvas>

    <div class="hero-ombre"></div>

    <div class="container hero-grid">

        <div class="hero-copy reveal">

            <div class="eyebrow">
                <span class="eyebrow-dot"></span>

                AI • VIDEO • AUTOMATION
            </div>

            <h1>
                Bộ công cụ
                <span class="hero-gradient-text">
                    tăng tốc workflow
                </span>
                content cho Creator
            </h1>

            <p class="hero-description">
                Tải nội dung, xử lý video, vietsub, review,
                viết kịch bản, lồng tiếng và dựng video trong
                một hệ sinh thái duy nhất.
            </p>

            <div class="hero-actions">

                <a
                    href="#tools"
                    class="button button-primary">

                    Khám phá toàn bộ tools

                    <svg class="icon">
                        <use href="#i-arrow"></use>
                    </svg>

                </a>

                <a
                    href="#workflow"
                    class="button">

                    Xem cách hoạt động

                </a>

            </div>

            <div class="hero-features">

                <div class="hero-feature">

                    <span class="hero-feature-icon">
                        <svg class="icon">
                            <use href="#i-clone"></use>
                        </svg>
                    </span>

                    Xử lý hàng loạt

                </div>

                <div class="hero-feature">

                    <span class="hero-feature-icon">
                        <svg class="icon">
                            <use href="#i-live"></use>
                        </svg>
                    </span>

                    Queue tự động

                </div>

                <div class="hero-feature">

                    <span class="hero-feature-icon">
                        <svg class="icon">
                            <use href="#i-story"></use>
                        </svg>
                    </span>

                    AI workflow

                </div>

                <div class="hero-feature">

                    <span class="hero-feature-icon">
                        <svg class="icon">
                            <use href="#i-movie"></use>
                        </svg>
                    </span>

                    Render hoàn chỉnh

                </div>

            </div>

        </div>


        <!-- PRODUCT DASHBOARD -->

        <div class="dashboard-shell reveal">

            <div class="dash-top">

                <div class="dash-brand">

                    <span class="dash-brand-mark">
                        K
                    </span>

                    KHO PREMIUM

                </div>

                <div class="dash-top-right">

                    Workspace

                    <div class="user-avatar">
                        <?= currentUserId() ? e(strtoupper(substr($_SESSION['user_name'] ?? 'H',0,1))) : 'H' ?>
                    </div>

                </div>

            </div>

            <div class="dash-layout">

                <aside class="dash-sidebar">

                    <div class="dash-nav-item active">
                        Tổng quan
                    </div>

                    <div class="dash-nav-item">
                        Công cụ
                    </div>

                    <div class="dash-nav-item">
                        Hàng chờ
                    </div>

                    <div class="dash-nav-item">
                        Dự án
                    </div>

                    <div class="dash-nav-item">
                        Lịch sử
                    </div>

                    <div class="dash-nav-item">
                        Tài khoản
                    </div>

                </aside>

                <div class="dash-content">

                    <div class="dash-heading-row">

                        <div class="dash-heading">
                            Tổng quan hệ thống
                        </div>

                        <div class="dash-live">
                            Active
                        </div>

                    </div>

                    <div class="dash-stats">

                        <div class="dash-stat">

                            <div class="dash-stat-label">
                                TOOLS
                            </div>

                            <div class="dash-stat-value">
                                <?= $stats['tools'] ?>
                            </div>

                            <div class="dash-stat-note">
                                registry
                            </div>

                        </div>

                        <div class="dash-stat">

                            <div class="dash-stat-label">
                                TOOL OPENS
                            </div>

                            <div class="dash-stat-value">
                                <?= number_format($stats['opens']) ?>
                            </div>

                            <div class="dash-stat-note">
                                tracked
                            </div>

                        </div>

                        <div class="dash-stat">

                            <div class="dash-stat-label">
                                ACCOUNTS
                            </div>

                            <div class="dash-stat-value">
                                <?= number_format($stats['accounts']) ?>
                            </div>

                            <div class="dash-stat-note">
                                real data
                            </div>

                        </div>

                        <div class="dash-stat">

                            <div class="dash-stat-label">
                                TODAY
                            </div>

                            <div class="dash-stat-value">
                                <?= number_format($stats['today']) ?>
                            </div>

                            <div class="dash-stat-note">
                                events
                            </div>

                        </div>

                    </div>

                    <div class="workflow-panel">

                        <div class="workflow-mini-title">
                            Quy trình hoạt động
                        </div>

                        <div class="workflow-mini">

                            <div class="mini-step done">
                                <div class="mini-circle">✓</div>
                                <div class="mini-step-name">
                                    Nguồn
                                </div>
                            </div>

                            <div class="mini-step done">
                                <div class="mini-circle">✓</div>
                                <div class="mini-step-name">
                                    AI
                                </div>
                            </div>

                            <div class="mini-step done">
                                <div class="mini-circle">3</div>
                                <div class="mini-step-name">
                                    Script
                                </div>
                            </div>

                            <div class="mini-step">
                                <div class="mini-circle">4</div>
                                <div class="mini-step-name">
                                    TTS
                                </div>
                            </div>

                            <div class="mini-step">
                                <div class="mini-circle">5</div>
                                <div class="mini-step-name">
                                    Render
                                </div>
                            </div>

                        </div>

                    </div>

                    <div class="task-list">

                        <div class="task">

                            <div class="task-thumb"></div>

                            <div>

                                <div class="task-name">
                                    Vietsub video • timeline
                                </div>

                                <div class="progress">
                                    <div
                                        class="progress-bar"
                                        style="width:72%">
                                    </div>
                                </div>

                            </div>

                            <div class="task-status">
                                PROCESSING
                            </div>

                        </div>


                        <div class="task">

                            <div class="task-thumb"></div>

                            <div>

                                <div class="task-name">
                                    Review • script generation
                                </div>

                                <div class="progress">
                                    <div
                                        class="progress-bar"
                                        style="width:48%">
                                    </div>
                                </div>

                            </div>

                            <div class="task-status">
                                RUNNING
                            </div>

                        </div>


                        <div class="task">

                            <div class="task-thumb"></div>

                            <div>

                                <div class="task-name">
                                    TikTok Live • capture
                                </div>

                                <div class="progress">
                                    <div
                                        class="progress-bar"
                                        style="width:91%">
                                    </div>
                                </div>

                            </div>

                            <div class="task-status">
                                CAPTURE
                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>


<!-- =========================================================
     BENEFITS
========================================================= -->

<section class="container">

    <div class="benefit-strip reveal">

        <div class="benefit">

            <div class="benefit-icon">
                <svg class="icon">
                    <use href="#i-live"></use>
                </svg>
            </div>

            <div>
                <strong>Xử lý tự động</strong>
                <span>Queue theo workflow</span>
            </div>

        </div>

        <div class="benefit">

            <div class="benefit-icon">
                <svg class="icon">
                    <use href="#i-code"></use>
                </svg>
            </div>

            <div>
                <strong>Hệ thống rõ ràng</strong>
                <span>Tool theo từng nghiệp vụ</span>
            </div>

        </div>

        <div class="benefit">

            <div class="benefit-icon">
                <svg class="icon">
                    <use href="#i-clone"></use>
                </svg>
            </div>

            <div>
                <strong>Tối ưu production</strong>
                <span>Phù hợp xử lý hàng loạt</span>
            </div>

        </div>

        <div class="benefit">

            <div class="benefit-icon">
                <svg class="icon">
                    <use href="#i-star"></use>
                </svg>
            </div>

            <div>
                <strong>Một hệ sinh thái</strong>
                <span>Không phải ghép nhiều app</span>
            </div>

        </div>

    </div>

</section>


<!-- =========================================================
     TOOLS
========================================================= -->

<section
    id="tools"
    class="section tools-section">

    <div class="container">

        <div class="section-head reveal">

            <div>

                <div class="eyebrow">
                    <span class="eyebrow-dot"></span>
                    Tool Ecosystem
                </div>

                <h2 class="section-title">
                    Toàn bộ công cụ
                </h2>

                <p class="section-copy">
                    Từ tải dữ liệu đến xử lý nội dung,
                    AI, giọng nói và render video.
                </p>

            </div>

            <div class="tools-controls">

                <label class="search-box">

                    <svg class="icon">
                        <use href="#i-search"></use>
                    </svg>

                    <input
                        id="toolSearch"
                        type="search"
                        placeholder="Tìm công cụ...">

                </label>

                <button
                    class="filter-button active"
                    data-filter="all">
                    Tất cả
                </button>

                <button
                    class="filter-button"
                    data-filter="download">
                    Downloader
                </button>

                <button
                    class="filter-button"
                    data-filter="content">
                    Content
                </button>

                <button
                    class="filter-button"
                    data-filter="automation">
                    Automation
                </button>

                <button
                    class="filter-button"
                    data-filter="creation">
                    Creation
                </button>

            </div>

        </div>


        <div class="tool-showcase-list">

            <?php foreach ($tools as $tool): ?>

                <?php
                    $routeAvailable =
                        trim((string)$tool['route']) !== '';

                    $isFavorite =
                        in_array(
                            $tool['slug'],
                            $userFavorites,
                            true
                        );

                    $demoRelative =
                        'assets/tool-demos/' .
                        $tool['slug'] .
                        '.mp4';

                    $demoAbsolute =
                        __DIR__ . '/' . $demoRelative;

                    $demoExists =
                        is_file($demoAbsolute);

                    $symbol = match ($tool['icon']) {
                        'download' => 'i-download',
                        'live' => 'i-live',
                        'news' => 'i-news',
                        'subtitle' => 'i-subtitle',
                        'star' => 'i-star',
                        'movie' => 'i-movie',
                        'clone' => 'i-clone',
                        'story' => 'i-story',
                        'code' => 'i-code',
                        default => 'i-star',
                    };
                ?>

                <div
                    class="tool-showcase-row reveal"
                    data-tool-row
                    data-category="<?= e($tool['category']) ?>"
                    data-name="<?= e(strtolower($tool['name'])) ?>">

                    <!-- TOOL -->
                    <article
                        class="
                            tool-card
                            tool-card-proof
                            <?= $tool['featured'] ? 'featured' : '' ?>
                            <?= ((($tool['slug'] ?? '') === 'review-product' || ($tool['slug'] ?? '') === 'review' || ($tool['slug'] ?? '') === 'vietsub') && $routeAvailable) ? 'review-product-clickable' : '' ?>
                        "
                        data-card-route="<?= ((($tool['slug'] ?? '') === 'review-product' || ($tool['slug'] ?? '') === 'review' || ($tool['slug'] ?? '') === 'vietsub') && $routeAvailable) ? e((string)$tool['route']) : '' ?>"
                        <?= ((($tool['slug'] ?? '') === 'review-product' || ($tool['slug'] ?? '') === 'review' || ($tool['slug'] ?? '') === 'vietsub') && $routeAvailable) ? 'tabindex="0" role="link"' : '' ?>
                    >

                        <div class="tool-card-head">

                            <div class="tool-icon">

                                <svg class="icon">
                                    <use href="#<?= $symbol ?>"></use>
                                </svg>

                            </div>

                            <span class="tool-badge">
                                <?= e($tool['badge']) ?>
                            </span>

                        </div>

                        <h3>
                            <?= e($tool['name']) ?>
                        </h3>

                        <p>
                            <?= e($tool['description']) ?>
                        </p>

                        <!-- DOUYIN GUIDE PATCH START -->

                        <?php if (($tool['slug'] ?? '') === 'douyin'): ?>

                            <div class="douyin-sales-panel">

                                <div class="douyin-guide-head">

                                    <span class="douyin-guide-label">
                                        HƯỚNG DẪN NHANH
                                    </span>

                                    <strong>
                                        Tải cả kênh Douyin chỉ trong vài bước
                                    </strong>

                                </div>


                                <ul class="douyin-guide-list">

                                    <li>

                                        <span class="douyin-check">
                                            ✓
                                        </span>

                                        <div>
                                            <strong>
                                                Dán link kênh Douyin
                                            </strong>

                                            <span>
                                                Chỉ cần sao chép link kênh
                                                bạn muốn tải và dán vào tool.
                                            </span>
                                        </div>

                                    </li>


                                    <li>

                                        <span class="douyin-check">
                                            ✓
                                        </span>

                                        <div>
                                            <strong>
                                                Chọn số lượng video
                                            </strong>

                                            <span>
                                                Tải từ
                                                <b>10 – 100 video / 1 lần</b>
                                                theo nhu cầu.
                                            </span>
                                        </div>

                                    </li>


                                    <li>

                                        <span class="douyin-check">
                                            ✓
                                        </span>

                                        <div>
                                            <strong>
                                                Đợi hệ thống xử lý
                                            </strong>

                                            <span>
                                                Tool tự động tải hàng loạt,
                                                chỉ cần chờ vài phút.
                                            </span>
                                        </div>

                                    </li>


                                    <li>

                                        <span class="douyin-check">
                                            ✓
                                        </span>

                                        <div>
                                            <strong>
                                                Nhận video hoàn chỉnh
                                            </strong>

                                            <span>
                                                Độ sắc nét
                                                <b>1:1 với bản gốc</b>,
                                                video sạch logo nền tảng.
                                            </span>
                                        </div>

                                    </li>

                                </ul>


                                <div class="douyin-feature-strip">

                                    <span>
                                        10–100 video/lần
                                    </span>

                                    <span>
                                        Chất lượng 1:1
                                    </span>

                                    <span>
                                        Sạch logo
                                    </span>

                                </div>


                                <div class="douyin-price-card">

                                    <div class="douyin-price-left">

                                        <span class="douyin-price-eyebrow">
                                            GÓI KHÔNG GIỚI HẠN
                                        </span>

                                        <div class="douyin-price">

                                            <strong>
                                                200.000
                                            </strong>

                                            <span>
                                                VNĐ / tháng
                                            </span>

                                        </div>

                                    </div>


                                    <div class="douyin-price-benefit">

                                        <span class="price-check">
                                            ✓
                                        </span>

                                        <div>

                                            <strong>
                                                Không giới hạn lượt tải
                                            </strong>

                                            <small>
                                                Dùng thoải mái trong thời hạn gói
                                            </small>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        <?php endif; ?>

                        <!-- DOUYIN GUIDE PATCH END -->

                        <!-- LIVE TIKTOK GUIDE PATCH START -->

                        <?php if (($tool['slug'] ?? '') === 'live-tiktok'): ?>

                            <div class="live-sales-panel">

                                <div class="live-guide-head">

                                    <span class="live-guide-label">
                                        CÁCH SỬ DỤNG
                                    </span>

                                    <strong>
                                        Ghi toàn bộ phiên TikTok Live chỉ với vài thao tác
                                    </strong>

                                </div>


                                <div class="live-url-example">

                                    <span class="live-url-icon">
                                        LIVE
                                    </span>

                                    <div>

                                        <small>
                                            LINK KÊNH ĐANG LIVE
                                        </small>

                                        <code>
                                            https://www.tiktok.com/@tenkenh/live
                                        </code>

                                    </div>

                                </div>


                                <ul class="live-guide-list">

                                    <li>

                                        <span class="live-step-number">
                                            1
                                        </span>

                                        <div>

                                            <strong>
                                                Dán link TikTok Live
                                            </strong>

                                            <span>
                                                Sao chép link kênh đang phát live
                                                và dán trực tiếp vào tool.
                                            </span>

                                        </div>

                                    </li>


                                    <li>

                                        <span class="live-step-number">
                                            2
                                        </span>

                                        <div>

                                            <strong>
                                                Nhấn “Ghi Live”
                                            </strong>

                                            <span>
                                                Hệ thống tự động bắt đầu ghi ngầm
                                                toàn bộ phiên livestream.
                                            </span>

                                        </div>

                                    </li>


                                    <li>

                                        <span class="live-step-number">
                                            3
                                        </span>

                                        <div>

                                            <strong>
                                                Tool tự chạy trong nền
                                            </strong>

                                            <span>
                                                Không cần mở video liên tục.
                                                Phiên live vẫn được ghi tự động.
                                            </span>

                                        </div>

                                    </li>


                                    <li>

                                        <span class="live-step-number">
                                            4
                                        </span>

                                        <div>

                                            <strong>
                                                Khi muốn kết thúc → nhấn “Dừng”
                                            </strong>

                                            <span>
                                                Tool kết thúc quá trình ghi và
                                                hoàn thiện file video.
                                            </span>

                                        </div>

                                    </li>


                                    <li>

                                        <span class="live-step-number">
                                            5
                                        </span>

                                        <div>

                                            <strong>
                                                Tải file MP4 về máy
                                            </strong>

                                            <span>
                                                Video sắc nét
                                                <b>1:1 với phiên live gốc</b>.
                                            </span>

                                        </div>

                                    </li>

                                </ul>


                                <div class="live-feature-strip">

                                    <span>
                                        Ghi ngầm tự động
                                    </span>

                                    <span>
                                        Xuất MP4
                                    </span>

                                    <span>
                                        Chất lượng 1:1
                                    </span>

                                </div>


                                <div class="live-pricing">

                                    <div class="live-pricing-title">

                                        <div>

                                            <span>
                                                BẢNG GIÁ
                                            </span>

                                            <strong>
                                                Chọn số phiên live chạy cùng lúc
                                            </strong>

                                        </div>

                                    </div>


                                    <div class="live-price-grid">

                                        <article class="live-price-item">

                                            <span class="live-plan-name">
                                                1 LIVE
                                            </span>

                                            <div class="live-plan-price">
                                                300.000
                                                <small>VNĐ/tháng</small>
                                            </div>

                                            <p>
                                                Ghi tối đa
                                                <b>1 phiên live</b>
                                                tại một thời điểm.
                                            </p>

                                        </article>


                                        <article class="live-price-item">

                                            <span class="live-plan-name">
                                                2 LIVE
                                            </span>

                                            <div class="live-plan-price">
                                                400.000
                                                <small>VNĐ/tháng</small>
                                            </div>

                                            <p>
                                                Ghi
                                                <b>2 phiên live cùng lúc</b>.
                                            </p>

                                        </article>


                                        <article class="live-price-item recommended">

                                            <span class="live-popular">
                                                PHỔ BIẾN
                                            </span>

                                            <span class="live-plan-name">
                                                3 LIVE
                                            </span>

                                            <div class="live-plan-price">
                                                500.000
                                                <small>VNĐ/tháng</small>
                                            </div>

                                            <p>
                                                Ghi
                                                <b>3 phiên live cùng lúc</b>.
                                            </p>

                                        </article>


                                        <article class="live-price-item source">

                                            <span class="live-plan-name">
                                                FULL SOURCE
                                            </span>

                                            <div class="live-plan-price">
                                                799.000
                                                <small>VNĐ</small>
                                            </div>

                                            <p>
                                                Source chạy trực tiếp
                                                <b>trên máy tính</b>,
                                                không giới hạn.
                                            </p>

                                        </article>

                                    </div>

                                </div>

                            </div>

                        <?php endif; ?>

                        <!-- LIVE TIKTOK GUIDE PATCH END -->

                        <!-- NEWS GUIDE PATCH START -->

                        <?php if (($tool['slug'] ?? '') === 'news'): ?>

                            <div class="news-sales-panel">

                                <div class="news-guide-head">

                                    <span class="news-guide-label">
                                        AUTO NEWS VIDEO
                                    </span>

                                    <strong>
                                        Từ một bài viết thành video hoàn chỉnh
                                        và tự động xuất bản
                                    </strong>

                                </div>


                                <div class="news-source-box">

                                    <div class="news-source-icon">
                                        URL
                                    </div>

                                    <div>

                                        <small>
                                            NGUỒN NỘI DUNG
                                        </small>

                                        <strong>
                                            Dán link bài viết hoặc chọn chủ đề
                                        </strong>

                                        <span>
                                            Website tin tức, bài viết,
                                            chủ đề hoặc nội dung muốn sản xuất.
                                        </span>

                                    </div>

                                </div>


                                <div class="news-flow">

                                    <div class="news-flow-item">

                                        <span class="news-flow-number">
                                            1
                                        </span>

                                        <div>

                                            <strong>
                                                Nhập bài viết / chọn chủ đề
                                            </strong>

                                            <span>
                                                Dán URL bài viết website
                                                hoặc chọn chủ đề cần làm video.
                                            </span>

                                        </div>

                                    </div>


                                    <div class="news-flow-item">

                                        <span class="news-flow-number">
                                            2
                                        </span>

                                        <div>

                                            <strong>
                                                AI tự động phân tích
                                            </strong>

                                            <span>
                                                Đọc nội dung, lọc thông tin chính
                                                và xác định cấu trúc video.
                                            </span>

                                        </div>

                                    </div>


                                    <div class="news-flow-item">

                                        <span class="news-flow-number">
                                            3
                                        </span>

                                        <div>

                                            <strong>
                                                Tự động lên kịch bản
                                            </strong>

                                            <span>
                                                Viết lại nội dung theo format
                                                video ngắn, rõ ràng và dễ xem.
                                            </span>

                                        </div>

                                    </div>


                                    <div class="news-flow-item">

                                        <span class="news-flow-number">
                                            4
                                        </span>

                                        <div>

                                            <strong>
                                                Tạo Voice AI
                                            </strong>

                                            <span>
                                                Kịch bản được chuyển thành
                                                giọng đọc AI tự động.
                                            </span>

                                        </div>

                                    </div>


                                    <div class="news-flow-item">

                                        <span class="news-flow-number">
                                            5
                                        </span>

                                        <div>

                                            <strong>
                                                Dựng video Final
                                            </strong>

                                            <span>
                                                Hệ thống ghép hình ảnh,
                                                voice và nội dung thành video hoàn chỉnh.
                                            </span>

                                        </div>

                                    </div>


                                    <div class="news-flow-item">

                                        <span class="news-flow-number">
                                            6
                                        </span>

                                        <div>

                                            <strong>
                                                Đăng hoặc hẹn giờ tự động
                                            </strong>

                                            <span>
                                                Xuất bản theo lịch lên
                                                TikTok, Facebook và YouTube.
                                            </span>

                                        </div>

                                    </div>

                                </div>


                                <div class="news-platforms">

                                    <span class="news-platform tiktok">
                                        <b>T</b>
                                        TikTok
                                    </span>

                                    <span class="news-platform facebook">
                                        <b>f</b>
                                        Facebook
                                    </span>

                                    <span class="news-platform youtube">
                                        <b>▶</b>
                                        YouTube
                                    </span>

                                </div>


                                <div class="news-features">

                                    <span>
                                        AI phân tích
                                    </span>

                                    <span>
                                        Voice tự động
                                    </span>

                                    <span>
                                        Render Final
                                    </span>

                                    <span>
                                        Auto Post
                                    </span>

                                </div>


                                <div class="news-price-card">

                                    <div>

                                        <span class="news-price-label">
                                            GIẢI PHÁP TỰ ĐỘNG HÓA
                                        </span>

                                        <div class="news-price">

                                            <small>
                                                Chỉ từ
                                            </small>

                                            <strong>
                                               ĐANG CẬP NHẬT
                                            </strong>

                                            <span>
                                                VNĐ
                                            </span>

                                        </div>

                                    </div>


                                    <div class="news-price-copy">

                                        <span class="news-price-check">
                                            ✓
                                        </span>

                                        <div>

                                            <strong>
                                                Một quy trình từ A → Z
                                            </strong>

                                            <small>
                                                Tạo nội dung, voice, video
                                                và xuất bản tự động.
                                            </small>

                                        <!-- NEWS LIFETIME START -->
                                        <div class="news-lifetime-benefits">

                                            <span>
                                                ✓ Sử dụng vĩnh viễn
                                            </span>

                                            <span>
                                                ✓ Không phát sinh thêm bất kỳ chi phí nào
                                            </span>

                                        </div>
                                        <!-- NEWS LIFETIME END -->


                                        </div>

                                    </div>

                                </div>

                            </div>

                        <?php endif; ?>

                        <!-- NEWS GUIDE PATCH END -->
                        <!-- VIETSUB PRO GUIDE PATCH START -->

                        <?php if (($tool['slug'] ?? '') === 'vietsub'): ?>

                            <div class="vietsub-sales-panel">

                                <div class="vietsub-guide-head">

                                    <span class="vietsub-guide-label">
                                        VIETSUB PRO
                                    </span>

                                    <strong>
                                        Biến video tiếng nước ngoài thành bản Việt hóa tự nhiên
                                    </strong>

                                </div>


                                <div class="vietsub-source-grid">

                                    <div class="vietsub-source-card">

                                        <span class="vietsub-source-icon">
                                            D
                                        </span>

                                        <div>
                                            <strong>Douyin</strong>
                                            <small>
                                                Dán link video
                                            </small>
                                        </div>

                                    </div>


                                    <div class="vietsub-source-card">

                                        <span class="vietsub-source-icon">
                                            B
                                        </span>

                                        <div>
                                            <strong>Bilibili</strong>
                                            <small>
                                                Dán link video
                                            </small>
                                        </div>

                                    </div>


                                    <div class="vietsub-source-card">

                                        <span class="vietsub-source-icon">
                                            R
                                        </span>

                                        <div>
                                            <strong>Rednote</strong>
                                            <small>
                                                Dán link video
                                            </small>
                                        </div>

                                    </div>


                                    <div class="vietsub-source-card upload">

                                        <span class="vietsub-source-icon">
                                            ↑
                                        </span>

                                        <div>
                                            <strong>Upload</strong>
                                            <small>
                                                Tải trực tiếp từ thiết bị
                                            </small>
                                        </div>

                                    </div>

                                </div>


                                <div class="vietsub-flow">

                                    <div class="vietsub-flow-item">

                                        <span class="vietsub-flow-number">
                                            1
                                        </span>

                                        <div>

                                            <strong>
                                                Dán link hoặc upload video
                                            </strong>

                                            <span>
                                                Hỗ trợ nguồn từ Douyin, Bilibili,
                                                Rednote hoặc file trực tiếp từ máy.
                                            </span>

                                        </div>

                                    </div>


                                    <div class="vietsub-flow-item">

                                        <span class="vietsub-flow-number">
                                            2
                                        </span>

                                        <div>

                                            <strong>
                                                Tự động nhận diện nội dung
                                            </strong>

                                            <span>
                                                Hệ thống phân tích nội dung,
                                                ngôn ngữ và phụ đề gốc.
                                            </span>

                                        </div>

                                    </div>


                                    <div class="vietsub-flow-item">

                                        <span class="vietsub-flow-number">
                                            3
                                        </span>

                                        <div>

                                            <strong>
                                                Dịch sang tiếng Việt tự nhiên
                                            </strong>

                                            <span>
                                                Tự động xử lý câu thoại theo ngữ cảnh
                                                để bản dịch dễ hiểu và tự nhiên hơn.
                                            </span>

                                        </div>

                                    </div>


                                    <div class="vietsub-flow-item">

                                        <span class="vietsub-flow-number">
                                            4
                                        </span>

                                        <div>

                                            <strong>
                                                Khớp timeline phụ đề
                                            </strong>

                                            <span>
                                                Giữ timing theo video gốc,
                                                phù hợp video dài và nhiều đoạn thoại.
                                            </span>

                                        </div>

                                    </div>


                                    <div class="vietsub-flow-item">

                                        <span class="vietsub-flow-number">
                                            5
                                        </span>

                                        <div>

                                            <strong>
                                                Xử lý video 30–60 phút
                                            </strong>

                                            <span>
                                                Có thể dùng cho các video dài,
                                                không chỉ các clip ngắn.
                                            </span>

                                        </div>

                                    </div>


                                    <div class="vietsub-flow-item">

                                        <span class="vietsub-flow-number">
                                            6
                                        </span>

                                        <div>

                                            <strong>
                                                Xuất bản Việt hóa hoàn chỉnh
                                            </strong>

                                            <span>
                                                Nhận video đã được xử lý phụ đề
                                                và sẵn sàng sử dụng.
                                            </span>

                                        </div>

                                    </div>

                                </div>


                                <div class="vietsub-feature-strip">

                                    <span>
                                        Nhận diện ngôn ngữ
                                    </span>

                                    <span>
                                        Phân tích phụ đề gốc
                                    </span>

                                    <span>
                                        Việt hóa tự nhiên
                                    </span>

                                    <span>
                                        Video 30–60 phút
                                    </span>

                                </div>


                                <!-- VIETSUB PUBLISH PATCH START -->

                                <div class="vietsub-publish-box">

                                    <div class="vietsub-publish-head">

                                        <span>
                                            XUẤT BẢN
                                        </span>

                                        <strong>
                                            Đăng ngay hoặc hẹn giờ lên nền tảng
                                        </strong>

                                    </div>


                                    <div class="vietsub-publish-options">

                                        <div class="vietsub-publish-option active">

                                            <span class="vietsub-publish-icon">
                                                ⚡
                                            </span>

                                            <div>

                                                <strong>
                                                    Đăng ngay
                                                </strong>

                                                <small>
                                                    Xuất video và đăng ngay
                                                    lên các nền tảng đã kết nối.
                                                </small>

                                            </div>

                                        </div>


                                        <div class="vietsub-publish-option">

                                            <span class="vietsub-publish-icon">
                                                ◷
                                            </span>

                                            <div>

                                                <strong>
                                                    Hẹn giờ đăng
                                                </strong>

                                                <small>
                                                    Chọn ngày và giờ để video
                                                    tự động đăng theo lịch.
                                                </small>

                                            </div>

                                        </div>

                                    </div>


                                    <div class="vietsub-publish-platforms">

                                        <span class="vietsub-publish-platform tiktok">

                                            <b>T</b>

                                            TikTok

                                        </span>


                                        <span class="vietsub-publish-platform facebook">

                                            <b>f</b>

                                            Facebook

                                        </span>


                                        <span class="vietsub-publish-platform youtube">

                                            <b>▶</b>

                                            YouTube

                                        </span>

                                    </div>


                                    <div class="vietsub-publish-note">

                                        <span>
                                            ✓
                                        </span>

                                        <div>

                                            <strong>
                                                Một video — nhiều nền tảng
                                            </strong>

                                            <small>
                                                Có thể đăng ngay hoặc lập lịch
                                                đăng riêng cho TikTok, Facebook
                                                và YouTube.
                                            </small>

                                        </div>

                                    </div>

                                </div>

                                <!-- VIETSUB PUBLISH PATCH END -->

                                <div class="vietsub-quality-box">

                                    <div class="vietsub-quality-main">

                                        <span class="vietsub-quality-label">
                                            ĐỘ CHÍNH XÁC BẢN DỊCH
                                        </span>

                                        <strong>
                                            95–99%
                                        </strong>

                                        <small>
                                            Tùy chất lượng nguồn, ngôn ngữ
                                            và nội dung video.
                                        </small>

                                    </div>


                                    <div class="vietsub-quality-side">

                                        <span class="vietsub-check">
                                            ✓
                                        </span>

                                        <div>

                                            <strong>
                                                Giữ ngữ cảnh & timeline
                                            </strong>

                                            <small>
                                                Tập trung vào bản Việt hóa
                                                dễ đọc và tự nhiên.
                                            </small>

                                        </div>

                                    </div>

                                </div>


                                <div class="vietsub-price-card">

                                    <div class="vietsub-price-left">

                                        <span class="vietsub-price-label">
                                            BẢN QUYỀN TRỌN ĐỜI
                                        </span>

                                        <div class="vietsub-price">

                                            <strong>
                                                ĐANG CẬP NHẬT
                                            </strong>

                                            <span>
                                                VNĐ
                                            </span>

                                        </div>

                                    </div>


                                    <div class="vietsub-price-right">

                                        <div class="vietsub-benefit">

                                            <span>✓</span>

                                            <strong>
                                                Sử dụng vĩnh viễn
                                            </strong>

                                        </div>

                                        <div class="vietsub-benefit">

                                            <span>✓</span>

                                            <strong>
                                                Không phát sinh thêm bất kỳ chi phí nào
                                            </strong>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        <?php endif; ?>

                        <!-- VIETSUB PRO GUIDE PATCH END -->
                        <!-- REVIEW PRO GUIDE PATCH START -->

                        <?php if (($tool['slug'] ?? '') === 'review'): ?>

                            <div class="review-sales-panel">

                                <div class="review-guide-head">

                                    <span class="review-guide-label">
                                        REVIEW PRO
                                    </span>

                                    <strong>
                                        Tự động phân tích và review khớp từng phân cảnh
                                    </strong>

                                </div>


                                <!-- NGUỒN VIDEO -->

                                <div class="review-source-grid">

                                    <div class="review-source-card">

                                        <span class="review-source-icon">
                                            D
                                        </span>

                                        <div>
                                            <strong>Douyin</strong>
                                            <small>
                                                Dán link video
                                            </small>
                                        </div>

                                    </div>


                                    <div class="review-source-card">

                                        <span class="review-source-icon">
                                            R
                                        </span>

                                        <div>
                                            <strong>Rednote</strong>
                                            <small>
                                                Dán link video
                                            </small>
                                        </div>

                                    </div>


                                    <div class="review-source-card">

                                        <span class="review-source-icon">
                                            B
                                        </span>

                                        <div>
                                            <strong>Bilibili</strong>
                                            <small>
                                                Dán link video
                                            </small>
                                        </div>

                                    </div>


                                    <div class="review-source-card upload">

                                        <span class="review-source-icon">
                                            ↑
                                        </span>

                                        <div>
                                            <strong>Upload</strong>
                                            <small>
                                                Từ thiết bị
                                            </small>
                                        </div>

                                    </div>

                                </div>


                                <!-- WORKFLOW -->

                                <div class="review-flow">

                                    <div class="review-flow-item">

                                        <span class="review-flow-number">
                                            1
                                        </span>

                                        <div>

                                            <strong>
                                                Nhập video gốc
                                            </strong>

                                            <span>
                                                Dán link từ Douyin, Rednote,
                                                Bilibili hoặc upload trực tiếp.
                                            </span>

                                        </div>

                                    </div>


                                    <div class="review-flow-item">

                                        <span class="review-flow-number">
                                            2
                                        </span>

                                        <div>

                                            <strong>
                                                AI nhận diện nội dung
                                            </strong>

                                            <span>
                                                Phân tích hình ảnh, thoại,
                                                hành động và từng phân cảnh.
                                            </span>

                                        </div>

                                    </div>


                                    <div class="review-flow-item">

                                        <span class="review-flow-number">
                                            3
                                        </span>

                                        <div>

                                            <strong>
                                                Phân tích & viết Review
                                            </strong>

                                            <span>
                                                Tạo nội dung review theo đúng
                                                những gì đang xuất hiện trong video.
                                            </span>

                                        </div>

                                    </div>


                                    <div class="review-flow-item">

                                        <span class="review-flow-number">
                                            4
                                        </span>

                                        <div>

                                            <strong>
                                                Khớp từng phân cảnh
                                            </strong>

                                            <span>
                                                Nội dung review được căn theo
                                                từng đoạn và diễn biến video gốc.
                                            </span>

                                        </div>

                                    </div>


                                    <div class="review-flow-item">

                                        <span class="review-flow-number">
                                            5
                                        </span>

                                        <div>

                                            <strong>
                                                Chọn Voice AI
                                            </strong>

                                            <span>
                                                Có sẵn nhiều giọng đọc tự nhiên
                                                để lựa chọn.
                                            </span>

                                        </div>

                                    </div>


                                    <div class="review-flow-item">

                                        <span class="review-flow-number">
                                            6
                                        </span>

                                        <div>

                                            <strong>
                                                Upload MP3 / Clone Voice
                                            </strong>

                                            <span>
                                                Có thể dùng file MP3 riêng để
                                                tạo giọng đọc theo workflow của bạn.
                                            </span>

                                        </div>

                                    </div>

                                </div>


                                <!-- STYLE / OUTPUT -->

                                <div class="review-feature-grid">

                                    <span>
                                        Khớp từng phân cảnh
                                    </span>

                                    <span>
                                        Review theo video gốc
                                    </span>

                                    <span>
                                        Voice tự nhiên
                                    </span>

                                    <span>
                                        MP3 / Clone Voice
                                    </span>

                                    <span>
                                        Mẫu phụ đề có sẵn
                                    </span>

                                    <span>
                                        Mẫu tiêu đề có sẵn
                                    </span>

                                </div>


                                <!-- QUALITY BOX -->


                                <!-- REVIEW PUBLISH PATCH START -->

                                <div class="review-publish-box">

                                    <div class="review-publish-head">

                                        <span class="review-publish-label">
                                            XUẤT BẢN
                                        </span>

                                        <strong>
                                            Đăng ngay hoặc hẹn giờ lên nền tảng
                                        </strong>

                                    </div>


                                    <div class="review-publish-grid">

                                        <div class="review-publish-option active">

                                            <span class="review-publish-icon">
                                                ⚡
                                            </span>

                                            <div>

                                                <strong>
                                                    Đăng ngay
                                                </strong>

                                                <small>
                                                    Xuất video và đăng trực tiếp
                                                    lên các nền tảng đã kết nối.
                                                </small>

                                            </div>

                                        </div>


                                        <div class="review-publish-option">

                                            <span class="review-publish-icon">
                                                ◷
                                            </span>

                                            <div>

                                                <strong>
                                                    Hẹn giờ đăng
                                                </strong>

                                                <small>
                                                    Chọn ngày và giờ để video
                                                    tự động đăng theo lịch.
                                                </small>

                                            </div>

                                        </div>

                                    </div>


                                    <div class="review-publish-platforms">

                                        <span class="review-publish-platform tiktok">

                                            <b>
                                                T
                                            </b>

                                            TikTok

                                        </span>


                                        <span class="review-publish-platform facebook">

                                            <b>
                                                f
                                            </b>

                                            Facebook

                                        </span>


                                        <span class="review-publish-platform youtube">

                                            <b>
                                                ▶
                                            </b>

                                            YouTube

                                        </span>

                                    </div>


                                    <div class="review-publish-note">

                                        <span>
                                            ✓
                                        </span>

                                        <strong>
                                            Một video — nhiều nền tảng
                                        </strong>

                                        <small>
                                            Có thể chọn đăng ngay hoặc lập lịch
                                            cho từng nền tảng trong workflow.
                                        </small>

                                    </div>

                                </div>

                                <!-- REVIEW PUBLISH PATCH END -->

                                <div class="review-quality-box">

                                    <div class="review-quality-main">

                                        <span class="review-quality-label">
                                            ĐIỂM MẠNH
                                        </span>

                                        <strong>
                                            KHỚP VIDEO
                                        </strong>

                                        <small>
                                            Review được xây dựng dựa trên
                                            nội dung và diễn biến thực tế
                                            của từng cảnh.
                                        </small>

                                    </div>


                                    <div class="review-quality-side">

                                        <span class="review-quality-check">
                                            ✓
                                        </span>

                                        <div>

                                            <strong>
                                                Có sẵn subtitle & title template
                                            </strong>

                                            <small>
                                                Chọn mẫu có sẵn để tăng tốc
                                                quá trình xuất video.
                                            </small>

                                        </div>

                                    </div>

                                </div>


                                <!-- PRICE -->

                                <div class="review-price-card">

                                    <div class="review-price-left">

                                        <span class="review-price-label">
                                            GÓI SỬ DỤNG VĨNH VIỄN
                                        </span>

                                        <div class="review-price">

                                            <span>
                                                Chỉ từ
                                            </span>

                                            <strong>
                                                ĐANG CẬP NHẬT
                                            </strong>

                                            <small>
                                                VNĐ
                                            </small>

                                        </div>

                                    </div>


                                    <div class="review-price-right">

                                        <div class="review-benefit">

                                            <span>✓</span>

                                            <strong>
                                                Sử dụng vĩnh viễn
                                            </strong>

                                        </div>

                                        <div class="review-benefit">

                                            <span>✓</span>

                                            <strong>
                                                Không phát sinh thêm bất kỳ chi phí nào
                                            </strong>

                                        </div>

                                        <div class="review-benefit">

                                            <span>✓</span>

                                            <strong>
                                                Bao gồm workflow Review Pro
                                            </strong>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        <?php endif; ?>

                        <!-- REVIEW PRO GUIDE PATCH END -->


                        <div class="tool-proof-note">

                            <span class="proof-dot"></span>

                            Quy trình thực tế của công cụ

                        </div>

                        <div class="tool-card-footer">

                            <span class="tool-category">
                                <?= e($tool['category']) ?>
                            </span>

                            <div class="tool-actions">

                                <button
                                    class="
                                        favorite-btn
                                        <?= $isFavorite ? 'active' : '' ?>
                                    "
                                    data-favorite="<?= e($tool['slug']) ?>"
                                    aria-label="Yêu thích">

                                    <svg class="icon">
                                        <use href="#i-heart"></use>
                                    </svg>

                                </button>

                                <?php if ($routeAvailable): ?>

                                    <a
                                        href="<?= e($tool['route']) ?>"
                                        class="open-tool-btn available"
                                        data-open-tool="<?= e($tool['slug']) ?>">

                                        Mở tool

                                        <svg class="icon">
                                            <use href="#i-arrow"></use>
                                        </svg>

                                    </a>

                                <?php else: ?>

                                    <button
                                        class="open-tool-btn"
                                        data-missing-route="<?= e($tool['name']) ?>">

                                        Chưa gắn route

                                    </button>

                                <?php endif; ?>

                            </div>

                        </div>

                    </article>


                    <!-- CONNECTOR SVG -->
                    <div
                        class="tool-proof-connector"
                        aria-hidden="true">

                        <div class="connector-label">
                            KẾT QUẢ
                        </div>

                        <svg
                            class="connector-svg"
                            viewBox="0 0 120 56"
                            xmlns="http://www.w3.org/2000/svg">

                            <path
                                class="connector-shadow"
                                d="
                                    M5 28
                                    C32 28 44 28 61 28
                                    C78 28 86 28 101 28
                                "
                            />

                            <path
                                class="connector-line"
                                d="
                                    M5 28
                                    C32 28 44 28 61 28
                                    C78 28 86 28 101 28
                                "
                            />

                            <path
                                class="connector-arrow"
                                d="
                                    M93 20
                                    L104 28
                                    L93 36
                                "
                            />

                            <circle
                                class="connector-node connector-node-a"
                                cx="16"
                                cy="28"
                                r="4"
                            />

                            <circle
                                class="connector-node connector-node-b"
                                cx="63"
                                cy="28"
                                r="3"
                            />

                        </svg>

                    </div>


                    <!-- VIDEO PROOF -->
                    <article class="tool-demo-card">

                        <div class="tool-demo-header">

                            <div>

                                <span class="demo-kicker">
                                    VIDEO MINH CHỨNG
                                </span>

                                <strong>
                                    <?= e($tool['name']) ?>
                                </strong>

                            </div>

                            <?php if ($demoExists): ?>

                                <span class="demo-status ready">
                                    MP4
                                </span>

                            <?php else: ?>

                                <span class="demo-status missing">
                                    CHƯA CÓ VIDEO
                                </span>

                            <?php endif; ?>

                        </div>


                        <?php if ($demoExists): ?>

                            <div class="tool-video-frame">

                                <video
                                    class="tool-proof-video"
                                    data-demo-video
                                    muted
                                    playsinline
                                    loop
                                    controls
                                    preload="metadata"
                                    controlsList="nodownload">

                                    <source
                                        src="/<?= e($demoRelative) ?>"
                                        type="video/mp4">

                                </video>

                                <div class="video-corner-badge">
                                    DEMO THỰC TẾ
                                </div>

                            </div>

                            <div class="demo-caption">

                                <span class="demo-caption-dot"></span>

                                Video tham khảo kết quả xử lý
                                từ <?= e($tool['name']) ?>

                            </div>

                        <?php else: ?>

                            <div class="tool-video-missing">

                                <div class="missing-play">

                                    <svg
                                        viewBox="0 0 50 50"
                                        xmlns="http://www.w3.org/2000/svg">

                                        <circle
                                            cx="25"
                                            cy="25"
                                            r="23"
                                            fill="none"
                                            stroke="currentColor"
                                            stroke-width="1.5"/>

                                        <path
                                            d="M21 17L34 25L21 33Z"
                                            fill="currentColor"/>

                                    </svg>

                                </div>

                                <strong>
                                    Thêm video minh chứng
                                </strong>

                                <span>
                                    <?= e($tool['slug']) ?>.mp4
                                </span>

                            </div>

                        <?php endif; ?>

                    </article>

                </div>

            <?php endforeach; ?>

        </div>


    </div>

</section>


<!-- =========================================================
     WORKFLOW
========================================================= -->

<section
    id="workflow"
    class="section workflow-section">

    <div class="container">

        <div class="reveal">

            <div class="eyebrow">
                <span class="eyebrow-dot"></span>
                Workflow
            </div>

            <h2 class="section-title">
                Một quy trình xuyên suốt
            </h2>

            <p class="section-copy">
                Thay vì phải chuyển qua nhiều phần mềm,
                các công cụ được tổ chức quanh cùng một luồng xử lý.
            </p>

        </div>


        <div class="workflow-grid">

            <?php

            $workflowSteps = [
                [
                    'title' => 'Nhập dữ liệu',
                    'text' => 'URL, video, bài viết hoặc livestream.'
                ],
                [
                    'title' => 'AI phân tích',
                    'text' => 'Hiểu nội dung, thoại và cấu trúc video.'
                ],
                [
                    'title' => 'Tạo nội dung',
                    'text' => 'Dịch, review, script và tối ưu kịch bản.'
                ],
                [
                    'title' => 'TTS / Voice',
                    'text' => 'Biến văn bản thành giọng nói.'
                ],
                [
                    'title' => 'Render',
                    'text' => 'Ghép và xuất video hoàn chỉnh.'
                ],
            ];

            foreach ($workflowSteps as $index => $step):
            ?>

                <article class="workflow-card reveal">

                    <div class="workflow-number">
                        <?= $index + 1 ?>
                    </div>

                    <h3>
                        <?= e($step['title']) ?>
                    </h3>

                    <p>
                        <?= e($step['text']) ?>
                    </p>

                    <?php if ($index < 4): ?>

                        <svg
                            class="icon workflow-arrow">
                            <use href="#i-arrow"></use>
                        </svg>

                    <?php endif; ?>

                </article>

            <?php endforeach; ?>

        </div>

    </div>

</section>


<!-- =========================================================
     AUDIENCE
========================================================= -->

<section
    id="solutions"
    class="section">

    <div class="container">

        <div class="audience-shell reveal">

            <div class="eyebrow">
                <span class="eyebrow-dot"></span>
                Giải pháp
            </div>

            <h2 class="section-title">
                Dành cho nhiều workflow khác nhau
            </h2>

            <div class="audience-grid">

                <article class="audience-card">

                    <div class="audience-card-icon">
                        <svg class="icon">
                            <use href="#i-star"></use>
                        </svg>
                    </div>

                    <h3>Creator</h3>

                    <p>
                        Tạo nhiều nội dung hơn mà không
                        tăng thao tác thủ công.
                    </p>

                </article>

                <article class="audience-card">

                    <div class="audience-card-icon">
                        <svg class="icon">
                            <use href="#i-movie"></use>
                        </svg>
                    </div>

                    <h3>Seller / Affiliate</h3>

                    <p>
                        Tải nguồn, review sản phẩm và
                        sản xuất video bán hàng.
                    </p>

                </article>

                <article class="audience-card">

                    <div class="audience-card-icon">
                        <svg class="icon">
                            <use href="#i-clone"></use>
                        </svg>
                    </div>

                    <h3>Agency</h3>

                    <p>
                        Quản lý nhiều tác vụ và sản xuất
                        nội dung hàng loạt.
                    </p>

                </article>

                <article class="audience-card">

                    <div class="audience-card-icon">
                        <svg class="icon">
                            <use href="#i-code"></use>
                        </svg>
                    </div>

                    <h3>Developer</h3>

                    <p>
                        Kết nối workflow, automation
                        và pipeline video bằng code.
                    </p>

                </article>

            </div>

        </div>

    </div>

</section>


<!-- =========================================================
     REAL METRICS
========================================================= -->

<section class="container">

    <div class="metrics reveal">

        <div class="metric">

            <div
                class="metric-value"
                data-count="<?= $stats['tools'] ?>">
                <?= $stats['tools'] ?>
            </div>

            <div class="metric-label">
                Tool trong hệ sinh thái
            </div>

        </div>

        <div class="metric">

            <div
                class="metric-value"
                data-count="<?= $stats['opens'] ?>">
                <?= number_format($stats['opens']) ?>
            </div>

            <div class="metric-label">
                Lượt mở tool đã ghi nhận
            </div>

        </div>

        <div class="metric">

            <div
                class="metric-value"
                data-count="<?= $stats['accounts'] ?>">
                <?= number_format($stats['accounts']) ?>
            </div>

            <div class="metric-label">
                Tài khoản thực tế
            </div>

        </div>

        <div class="metric">

            <div
                class="metric-value"
                data-count="<?= $stats['today'] ?>">
                <?= number_format($stats['today']) ?>
            </div>

            <div class="metric-label">
                Hoạt động hôm nay
            </div>

        </div>

    </div>

</section>


<!-- =========================================================
     CTA + CONTACT
========================================================= -->

<section
    id="contact"
    class="section">

    <div class="container">

        <div class="cta reveal">

            <h2>
                Bắt đầu với workflow của bạn
            </h2>

            <p>
                Chọn công cụ phù hợp và xử lý nội dung
                trong một hệ sinh thái duy nhất.
            </p>

            <div class="cta-actions">

                <a
                    href="#tools"
                    class="button button-light">

                    Khám phá công cụ

                </a>

                <button
                    class="button button-ghost"
                    id="contactOpen">

                    Liên hệ

                </button>

            </div>

        </div>

    </div>

</section>

</main>


<!-- =========================================================
     FOOTER
========================================================= -->

<footer class="footer">

    <div class="container">

        <div class="footer-grid">

            <div class="footer-brand">

                <div class="brand">

                    <div class="brand-mark">
                        K
                    </div>

                    <div>

                        <div class="brand-name">
                            KHO PREMIUM
                        </div>

                        <div class="brand-sub">
                            Creator Automation Platform
                        </div>

                    </div>

                </div>

                <p>
                    Hệ sinh thái tool AI, downloader,
                    video và automation cho Creator Việt Nam.
                </p>

            </div>

            <div class="footer-col">

                <h4>Sản phẩm</h4>

                <a href="#tools">Công cụ</a>
                <a href="#workflow">Workflow</a>
                <a href="#solutions">Giải pháp</a>

            </div>

            <div class="footer-col">

                <h4>Tài nguyên</h4>

                <a href="#">Hướng dẫn</a>
                <a href="#">Tài liệu</a>
                <a href="#">Blog</a>

            </div>

            <div class="footer-col">

                <h4>Hỗ trợ</h4>

                <a href="#contact">Liên hệ</a>
                <a href="#">Chính sách</a>
                <a href="#">Điều khoản</a>

            </div>

        </div>

        <div class="footer-bottom">

            <span>
                © <?= date('Y') ?> Kho Premium.
                All rights reserved.
            </span>

            <span>
                PHP • HTML5 • SVG • Three.js
            </span>

        </div>

    </div>

</footer>


<!-- =========================================================
     AUTH MODAL
========================================================= -->

<div
    class="modal-overlay"
    id="authModal">

    <div class="modal">

        <div class="modal-head">

            <div>

                <h3 id="authTitle">
                    Đăng nhập
                </h3>

                <div
                    class="modal-sub"
                    id="authSubtitle">
                    Truy cập tài khoản Kho Premium.
                </div>

            </div>

            <button
                class="close-modal"
                data-close-modal>

                <svg class="icon">
                    <use href="#i-close"></use>
                </svg>

            </button>

        </div>

        <form
            id="authForm"
            class="form-grid">

            <input
                type="hidden"
                name="csrf"
                value="<?= e($csrf) ?>">

            <input
                type="hidden"
                name="action"
                id="authAction"
                value="login">

            <div
                class="field"
                id="nameField"
                hidden>

                <label>
                    Tên của bạn
                </label>

                <input
                    type="text"
                    name="name"
                    autocomplete="name">

            </div>

            <div class="field">

                <label>
                    Email
                </label>

                <input
                    type="email"
                    name="email"
                    required
                    autocomplete="email">

            </div>

            <div class="field">

                <label>
                    Mật khẩu
                </label>

                <input
                    type="password"
                    name="password"
                    required
                    minlength="8"
                    autocomplete="current-password">

            </div>

            <button
                class="button button-primary"
                type="submit"
                id="authSubmit">

                Đăng nhập

            </button>

        </form>

        <div class="modal-switch">

            <span id="authSwitchText">
                Chưa có tài khoản?
            </span>

            <button
                type="button"
                id="authSwitch">
                Đăng ký
            </button>

        </div>

    </div>

</div>


<!-- =========================================================
     CONTACT MODAL
========================================================= -->

<div
    class="modal-overlay"
    id="contactModal">

    <div class="modal">

        <div class="modal-head">

            <div>

                <h3>Liên hệ Kho Premium</h3>

                <div class="modal-sub">
                    Gửi yêu cầu trực tiếp tới hệ thống.
                </div>

            </div>

            <button
                class="close-modal"
                data-close-modal>

                <svg class="icon">
                    <use href="#i-close"></use>
                </svg>

            </button>

        </div>

        <form
            id="contactForm"
            class="form-grid">

            <input
                type="hidden"
                name="csrf"
                value="<?= e($csrf) ?>">

            <input
                type="hidden"
                name="action"
                value="contact">

            <div class="field">

                <label>Tên</label>

                <input
                    name="name"
                    required>

            </div>

            <div class="field">

                <label>Email</label>

                <input
                    name="email"
                    type="email"
                    required>

            </div>

            <div class="field">

                <label>Nội dung</label>

                <textarea
                    name="message"
                    required>
                </textarea>

            </div>

            <button
                class="button button-primary"
                type="submit">

                Gửi yêu cầu

            </button>

        </form>

    </div>

</div>


<div
    class="toast-stack"
    id="toastStack">
</div>


<!-- =========================================================
     MAIN JAVASCRIPT
========================================================= -->

<script>
(() => {

    const csrf =
        <?= json_encode($csrf) ?>;

    const loggedIn =
        <?= currentUserId() ? 'true' : 'false' ?>;


    /* -----------------------------------------
       Toast
    ----------------------------------------- */

    const toastStack =
        document.getElementById('toastStack');

    function toast(message, success = false) {

        const element =
            document.createElement('div');

        element.className =
            'toast' + (success ? ' success' : '');

        element.textContent =
            message;

        toastStack.appendChild(element);

        setTimeout(() => {
            element.remove();
        }, 3200);
    }


    /* -----------------------------------------
       AJAX
    ----------------------------------------- */

    async function post(data) {

        const body =
            new URLSearchParams();

        Object.entries(data)
            .forEach(([key, value]) => {
                body.append(key, value);
            });

        const response =
            await fetch(location.pathname, {
                method: 'POST',
                headers: {
                    'Content-Type':
                        'application/x-www-form-urlencoded;charset=UTF-8'
                },
                body
            });

        const result =
            await response.json();

        if (!response.ok) {
            throw new Error(
                result.message ||
                'Có lỗi xảy ra.'
            );
        }

        return result;
    }


    /* -----------------------------------------
       Mobile navigation
    ----------------------------------------- */

    const mobileToggle =
        document.getElementById('mobileToggle');

    const mainNav =
        document.getElementById('mainNav');

    mobileToggle?.addEventListener(
        'click',
        () => {
            mainNav.classList.toggle(
                'mobile-open'
            );
        }
    );


    mainNav?.querySelectorAll('a')
        .forEach(link => {

            link.addEventListener(
                'click',
                () => {

                    mainNav.classList.remove(
                        'mobile-open'
                    );

                }
            );

        });


    /* -----------------------------------------
       Scroll navigation active
    ----------------------------------------- */

    const sections =
        [...document.querySelectorAll(
            'main section[id]'
        )];

    const navLinks =
        [...document.querySelectorAll(
            '.nav-link'
        )];

    const sectionObserver =
        new IntersectionObserver(
            entries => {

                entries.forEach(entry => {

                    if (!entry.isIntersecting) {
                        return;
                    }

                    const id =
                        entry.target.id;

                    navLinks.forEach(link => {

                        link.classList.toggle(
                            'active',
                            link.getAttribute('href')
                                === '#' + id
                        );

                    });

                });

            },
            {
                rootMargin:
                    '-30% 0px -60% 0px'
            }
        );

    sections.forEach(section => {
        sectionObserver.observe(section);
    });


    /* -----------------------------------------
       Reveal
    ----------------------------------------- */

    const revealObserver =
        new IntersectionObserver(
            entries => {

                entries.forEach(entry => {

                    if (entry.isIntersecting) {

                        entry.target
                            .classList.add('visible');

                        revealObserver
                            .unobserve(entry.target);
                    }

                });

            },
            {
                threshold: .08
            }
        );

    document
        .querySelectorAll('.reveal')
        .forEach(element => {

            revealObserver.observe(element);

        });


    /* -----------------------------------------
       Tool filters
    ----------------------------------------- */

    const searchInput =
        document.getElementById('toolSearch');

    const filterButtons =
        [...document.querySelectorAll(
            '[data-filter]'
        )];

    const toolCards =
        [...document.querySelectorAll(
            '[data-tool-row]'
        )];

    let activeFilter = 'all';

    function filterTools() {

        const query =
            (
                searchInput?.value || ''
            )
            .trim()
            .toLowerCase();

        toolCards.forEach(card => {

            const category =
                card.dataset.category;

            const name =
                card.dataset.name;

            const filterMatch =
                activeFilter === 'all'
                || activeFilter === category;

            const searchMatch =
                !query
                || name.includes(query)
                || card.textContent
                    .toLowerCase()
                    .includes(query);

            card.style.display =
                filterMatch && searchMatch
                ? ''
                : 'none';

        });
    }

    searchInput?.addEventListener(
        'input',
        filterTools
    );

    filterButtons.forEach(button => {

        button.addEventListener(
            'click',
            () => {

                activeFilter =
                    button.dataset.filter;

                filterButtons.forEach(item => {
                    item.classList.remove('active');
                });

                button.classList.add('active');

                filterTools();

            }
        );

    });


    /* -----------------------------------------
       Tool tracking
    ----------------------------------------- */

    document
        .querySelectorAll('[data-open-tool]')
        .forEach(link => {

            link.addEventListener(
                'click',
                () => {

                    const body =
                        new URLSearchParams();

                    body.append(
                        'action',
                        'event'
                    );

                    body.append(
                        'type',
                        'tool_open'
                    );

                    body.append(
                        'tool',
                        link.dataset.openTool
                    );

                    fetch(
                        location.pathname,
                        {
                            method: 'POST',
                            headers: {
                                'Content-Type':
                                    'application/x-www-form-urlencoded;charset=UTF-8'
                            },
                            body,
                            keepalive: true
                        }
                    ).catch(() => {});

                }
            );

        });


    document
        .querySelectorAll('[data-card-route]')
        .forEach(card => {

            const openCardRoute = () => {
                const route = card.dataset.cardRoute;

                if (route) {
                    window.location.assign(route);
                }
            };

            card.addEventListener('click', event => {
                if (event.target.closest('a, button, input, video, summary, details')) {
                    return;
                }

                openCardRoute();
            });

            card.addEventListener('keydown', event => {
                if (event.key === 'Enter' || event.key === ' ') {
                    event.preventDefault();
                    openCardRoute();
                }
            });

        });


    document
        .querySelectorAll(
            '[data-missing-route]'
        )
        .forEach(button => {

            button.addEventListener(
                'click',
                () => {

                    toast(
                        button.dataset.missingRoute
                        + ' chưa được gắn route production.'
                    );

                }
            );

        });


    /* -----------------------------------------
       Favorites
    ----------------------------------------- */

    document
        .querySelectorAll('[data-favorite]')
        .forEach(button => {

            button.addEventListener(
                'click',
                async () => {

                    if (!loggedIn) {

                        openAuth('login');

                        toast(
                            'Đăng nhập để lưu tool yêu thích.'
                        );

                        return;
                    }

                    try {

                        const result =
                            await post({
                                action:
                                    'favorite',
                                csrf,
                                tool:
                                    button.dataset.favorite
                            });

                        button.classList.toggle(
                            'active',
                            result.data.favorite
                        );

                        toast(
                            result.message,
                            true
                        );

                    } catch (error) {

                        toast(error.message);

                    }

                }
            );

        });


    /* -----------------------------------------
       Auth
    ----------------------------------------- */

    const authModal =
        document.getElementById('authModal');

    const authForm =
        document.getElementById('authForm');

    const authAction =
        document.getElementById('authAction');

    const authTitle =
        document.getElementById('authTitle');

    const authSubtitle =
        document.getElementById('authSubtitle');

    const authSubmit =
        document.getElementById('authSubmit');

    const authSwitch =
        document.getElementById('authSwitch');

    const authSwitchText =
        document.getElementById(
            'authSwitchText'
        );

    const nameField =
        document.getElementById('nameField');

    let authMode = 'login';


    function openAuth(mode = 'login') {

        authMode = mode;

        const register =
            mode === 'register';

        authAction.value =
            register
            ? 'register'
            : 'login';

        authTitle.textContent =
            register
            ? 'Tạo tài khoản'
            : 'Đăng nhập';

        authSubtitle.textContent =
            register
            ? 'Tạo tài khoản Kho Premium.'
            : 'Truy cập tài khoản Kho Premium.';

        authSubmit.textContent =
            register
            ? 'Đăng ký'
            : 'Đăng nhập';

        nameField.hidden =
            !register;

        authSwitchText.textContent =
            register
            ? 'Đã có tài khoản?'
            : 'Chưa có tài khoản?';

        authSwitch.textContent =
            register
            ? 'Đăng nhập'
            : 'Đăng ký';

        authModal.classList.add('open');

    }


    document
        .querySelectorAll(
            '[data-open-auth]'
        )
        .forEach(button => {

            button.addEventListener(
                'click',
                () => {

                    openAuth(
                        button.dataset.openAuth
                    );

                }
            );

        });


    authSwitch?.addEventListener(
        'click',
        () => {

            openAuth(
                authMode === 'login'
                ? 'register'
                : 'login'
            );

        }
    );


    authForm?.addEventListener(
        'submit',
        async event => {

            event.preventDefault();

            const formData =
                new FormData(authForm);

            try {

                const result =
                    await post(
                        Object.fromEntries(
                            formData.entries()
                        )
                    );

                toast(
                    result.message,
                    true
                );

                setTimeout(() => {
                    location.reload();
                }, 500);

            } catch (error) {

                toast(error.message);

            }

        }
    );


    /* -----------------------------------------
       Logout
    ----------------------------------------- */

    document
        .getElementById('logoutBtn')
        ?.addEventListener(
            'click',
            async () => {

                try {

                    await post({
                        action: 'logout',
                        csrf
                    });

                    location.reload();

                } catch (error) {

                    toast(error.message);

                }

            }
        );


    /* -----------------------------------------
       Contact
    ----------------------------------------- */

    const contactModal =
        document.getElementById(
            'contactModal'
        );

    document
        .getElementById('contactOpen')
        ?.addEventListener(
            'click',
            () => {

                contactModal.classList.add(
                    'open'
                );

            }
        );


    document
        .getElementById('contactForm')
        ?.addEventListener(
            'submit',
            async event => {

                event.preventDefault();

                const form =
                    event.currentTarget;

                try {

                    const result =
                        await post(
                            Object.fromEntries(
                                new FormData(form)
                                    .entries()
                            )
                        );

                    toast(
                        result.message,
                        true
                    );

                    form.reset();

                    contactModal
                        .classList
                        .remove('open');

                } catch (error) {

                    toast(error.message);

                }

            }
        );


    /* -----------------------------------------
       Modal close
    ----------------------------------------- */

    document
        .querySelectorAll(
            '[data-close-modal]'
        )
        .forEach(button => {

            button.addEventListener(
                'click',
                () => {

                    button
                        .closest('.modal-overlay')
                        ?.classList
                        .remove('open');

                }
            );

        });


    document
        .querySelectorAll(
            '.modal-overlay'
        )
        .forEach(overlay => {

            overlay.addEventListener(
                'click',
                event => {

                    if (event.target === overlay) {

                        overlay.classList
                            .remove('open');

                    }

                }
            );

        });


    document.addEventListener(
        'keydown',
        event => {

            if (event.key === 'Escape') {

                document
                    .querySelectorAll(
                        '.modal-overlay.open'
                    )
                    .forEach(modal => {
                        modal.classList.remove(
                            'open'
                        );
                    });

            }

        });

})();
</script>


<!-- TOOL VIDEO JS START -->

<script>
(() => {

    const videos =
        [...document.querySelectorAll(
            '[data-demo-video]'
        )];

    if (!videos.length) {
        return;
    }

    /*
     * Desktop:
     * hover video -> chạy muted.
     * rời chuột -> pause.
     *
     * Nếu user bấm controls thì browser vẫn hoạt động bình thường.
     */

    videos.forEach(video => {

        const card =
            video.closest('.tool-demo-card');

        if (!card) {
            return;
        }

        card.addEventListener(
            'mouseenter',
            () => {

                if (
                    window.matchMedia(
                        '(hover:hover)'
                    ).matches
                ) {

                    video.muted = true;

                    const play =
                        video.play();

                    if (
                        play &&
                        typeof play.catch === 'function'
                    ) {
                        play.catch(() => {});
                    }

                }

            }
        );

        card.addEventListener(
            'mouseleave',
            () => {

                if (
                    window.matchMedia(
                        '(hover:hover)'
                    ).matches
                ) {
                    video.pause();
                }

            }
        );

    });


    /*
     * Video ngoài viewport sẽ tự pause
     * để không ăn CPU/băng thông vô ích.
     */

    const observer =
        new IntersectionObserver(
            entries => {

                entries.forEach(entry => {

                    if (!entry.isIntersecting) {

                        const video =
                            entry.target;

                        video.pause();

                    }

                });

            },
            {
                threshold: .05
            }
        );

    videos.forEach(video => {
        observer.observe(video);
    });

})();
</script>

<!-- TOOL VIDEO JS END -->


<!-- =========================================================
     THREE.JS — SUBTLE ORANGE DATA FIELD
========================================================= -->

<script type="module">

import * as THREE
from "https://cdn.jsdelivr.net/npm/three@0.179.1/build/three.module.js";

const canvas =
    document.getElementById('three-bg');

const reduceMotion =
    window.matchMedia(
        '(prefers-reduced-motion: reduce)'
    ).matches;

if (
    canvas
    && !reduceMotion
    && window.WebGLRenderingContext
) {

    const renderer =
        new THREE.WebGLRenderer({
            canvas,
            alpha: true,
            antialias: true
        });

    renderer.setPixelRatio(
        Math.min(
            window.devicePixelRatio || 1,
            1.5
        )
    );

    const scene =
        new THREE.Scene();

    const camera =
        new THREE.PerspectiveCamera(
            42,
            1,
            .1,
            100
        );

    camera.position.set(
        0,
        0,
        13
    );


    /* -----------------------------------------
       Particle field
    ----------------------------------------- */

    const count = 140;

    const positions =
        new Float32Array(
            count * 3
        );

    for (
        let i = 0;
        i < count;
        i++
    ) {

        positions[i * 3] =
            (Math.random() - .5) * 22;

        positions[i * 3 + 1] =
            (Math.random() - .5) * 10;

        positions[i * 3 + 2] =
            (Math.random() - .5) * 5;

    }

    const geometry =
        new THREE.BufferGeometry();

    geometry.setAttribute(
        'position',
        new THREE.BufferAttribute(
            positions,
            3
        )
    );

    const material =
        new THREE.PointsMaterial({
            color: 0xff7a00,
            size: .045,
            transparent: true,
            opacity: .20
        });

    const points =
        new THREE.Points(
            geometry,
            material
        );

    scene.add(points);


    /* -----------------------------------------
       Soft wire geometry
    ----------------------------------------- */

    const ringGeometry =
        new THREE.TorusGeometry(
            3.8,
            .007,
            8,
            100
        );

    const ringMaterial =
        new THREE.MeshBasicMaterial({
            color: 0xff9800,
            transparent: true,
            opacity: .07
        });

    const rings = [];

    for (
        let i = 0;
        i < 3;
        i++
    ) {

        const ring =
            new THREE.Mesh(
                ringGeometry,
                ringMaterial
            );

        ring.position.set(
            5 + i * .5,
            -1 + i * .8,
            -1.5
        );

        ring.rotation.x =
            Math.PI * .32;

        ring.rotation.y =
            Math.PI * (.12 + i * .09);

        ring.scale.setScalar(
            .8 + i * .35
        );

        scene.add(ring);

        rings.push(ring);

    }


    function resize() {

        const width =
            canvas.clientWidth;

        const height =
            canvas.clientHeight;

        if (!width || !height) {
            return;
        }

        renderer.setSize(
            width,
            height,
            false
        );

        camera.aspect =
            width / height;

        camera.updateProjectionMatrix();

    }

    resize();

    window.addEventListener(
        'resize',
        resize,
        {
            passive: true
        }
    );


    let running = true;

    document.addEventListener(
        'visibilitychange',
        () => {

            running =
                !document.hidden;

        }
    );


    const pointer = {
        x: 0,
        y: 0
    };

    window.addEventListener(
        'pointermove',
        event => {

            pointer.x =
                (
                    event.clientX /
                    window.innerWidth
                    - .5
                );

            pointer.y =
                (
                    event.clientY /
                    window.innerHeight
                    - .5
                );

        },
        {
            passive: true
        }
    );


    function animate(time) {

        requestAnimationFrame(
            animate
        );

        if (!running) {
            return;
        }

        const t =
            time * .00012;

        points.rotation.y =
            t * .13
            + pointer.x * .04;

        points.rotation.x =
            pointer.y * .025;

        rings.forEach(
            (ring, index) => {

                ring.rotation.z =
                    t
                    * (
                        .15
                        + index * .05
                    );

            }
        );

        camera.position.x +=
            (
                pointer.x * .22
                - camera.position.x
            )
            * .025;

        camera.position.y +=
            (
                -pointer.y * .13
                - camera.position.y
            )
            * .025;

        camera.lookAt(
            0,
            0,
            0
        );

        renderer.render(
            scene,
            camera
        );

    }

    requestAnimationFrame(
        animate
    );

}

</script>


<!-- BRAND THREE PATCH START -->

<script type="module">

import * as THREE
from "https://cdn.jsdelivr.net/npm/three@0.179.1/build/three.module.js";

const brandCanvas =
    document.getElementById('brand-three');

const brandReducedMotion =
    window.matchMedia(
        '(prefers-reduced-motion: reduce)'
    ).matches;

if (
    brandCanvas
    && !brandReducedMotion
    && window.WebGLRenderingContext
) {

    const renderer =
        new THREE.WebGLRenderer({
            canvas: brandCanvas,
            alpha: true,
            antialias: true
        });

    renderer.setPixelRatio(
        Math.min(
            window.devicePixelRatio || 1,
            1.5
        )
    );

    const scene =
        new THREE.Scene();

    const camera =
        new THREE.PerspectiveCamera(
            35,
            1,
            .1,
            30
        );

    camera.position.z = 8;


    /* ---------------------------------------
       RING 1
    --------------------------------------- */

    const ringGeometry1 =
        new THREE.TorusGeometry(
            2.15,
            .028,
            8,
            90
        );

    const ringMaterial1 =
        new THREE.MeshBasicMaterial({
            color: 0xff6800,
            transparent: true,
            opacity: .26
        });

    const ring1 =
        new THREE.Mesh(
            ringGeometry1,
            ringMaterial1
        );

    ring1.rotation.x =
        Math.PI * .66;

    ring1.rotation.y =
        Math.PI * .12;

    scene.add(ring1);


    /* ---------------------------------------
       RING 2
    --------------------------------------- */

    const ringGeometry2 =
        new THREE.TorusGeometry(
            2.55,
            .018,
            8,
            90
        );

    const ringMaterial2 =
        new THREE.MeshBasicMaterial({
            color: 0xffaa22,
            transparent: true,
            opacity: .18
        });

    const ring2 =
        new THREE.Mesh(
            ringGeometry2,
            ringMaterial2
        );

    ring2.rotation.x =
        Math.PI * .42;

    ring2.rotation.y =
        Math.PI * .65;

    scene.add(ring2);


    /* ---------------------------------------
       SMALL ORANGE PARTICLES
    --------------------------------------- */

    const particleCount = 18;

    const particlePositions =
        new Float32Array(
            particleCount * 3
        );

    for (
        let i = 0;
        i < particleCount;
        i++
    ) {

        const angle =
            (
                i /
                particleCount
            )
            * Math.PI
            * 2;

        const radius =
            2.25 +
            Math.random() * .65;

        particlePositions[i * 3] =
            Math.cos(angle)
            * radius;

        particlePositions[i * 3 + 1] =
            Math.sin(angle)
            * radius;

        particlePositions[i * 3 + 2] =
            (
                Math.random() - .5
            )
            * .7;

    }

    const particleGeometry =
        new THREE.BufferGeometry();

    particleGeometry.setAttribute(
        'position',
        new THREE.BufferAttribute(
            particlePositions,
            3
        )
    );

    const particleMaterial =
        new THREE.PointsMaterial({
            color: 0xff7a00,
            size: .075,
            transparent: true,
            opacity: .48
        });

    const particles =
        new THREE.Points(
            particleGeometry,
            particleMaterial
        );

    scene.add(particles);


    /* ---------------------------------------
       RESIZE
    --------------------------------------- */

    function brandResize() {

        const rect =
            brandCanvas.getBoundingClientRect();

        if (
            rect.width < 1
            || rect.height < 1
        ) {
            return;
        }

        renderer.setSize(
            rect.width,
            rect.height,
            false
        );

        camera.aspect =
            rect.width /
            rect.height;

        camera.updateProjectionMatrix();

    }

    brandResize();

    const brandResizeObserver =
        new ResizeObserver(
            brandResize
        );

    brandResizeObserver.observe(
        brandCanvas
    );


    /* ---------------------------------------
       VISIBILITY PERFORMANCE
    --------------------------------------- */

    let brandRunning = true;

    document.addEventListener(
        'visibilitychange',
        () => {

            brandRunning =
                !document.hidden;

        }
    );


    /* ---------------------------------------
       ANIMATION
    --------------------------------------- */

    function animateBrand(time) {

        requestAnimationFrame(
            animateBrand
        );

        if (!brandRunning) {
            return;
        }

        const t =
            time * .00035;

        ring1.rotation.z =
            t * .72;

        ring1.rotation.y =
            Math.sin(t * .5)
            * .16;

        ring2.rotation.z =
            -t * .48;

        ring2.rotation.x =
            Math.PI * .42
            +
            Math.sin(t)
            * .06;

        particles.rotation.z =
            t * .27;

        particles.rotation.y =
            Math.sin(t * .45)
            * .12;

        renderer.render(
            scene,
            camera
        );

    }

    requestAnimationFrame(
        animateBrand
    );

}

</script>

<!-- BRAND THREE PATCH END -->


<!-- FLOAT SOCIAL START -->

<aside
    class="social-float"
    aria-label="Liên hệ nhanh">

    <!-- ZALO -->

    <a
        class="social-float-item social-zalo"
        href="https://zalo.me/0866261009"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="Liên hệ Zalo 0866261009">

        <span class="social-online"></span>

        <span class="social-tooltip">
            Zalo: 0866261009
        </span>

        <svg
            viewBox="0 0 64 64"
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true">

            <!-- white speech bubble -->
            <path
                d="
                    M13 11
                    H46
                    C53 11 57 15 57 22
                    V39
                    C57 46 53 50 46 50
                    H31
                    L21 57
                    L23 50
                    H13
                    C6 50 3 46 3 39
                    V22
                    C3 15 6 11 13 11Z"
                fill="#ffffff"/>

            <!-- ZALO word -->
            <text
                x="30"
                y="37"
                text-anchor="middle"
                font-family="Arial, sans-serif"
                font-size="17"
                font-weight="900"
                fill="#0068ff">
                Zalo
            </text>

        </svg>

    </a>


    <!-- FACEBOOK -->

    <a
        class="social-float-item social-facebook"
        href="https://www.facebook.com/hieuphamdev"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="Facebook Hieu Pham Dev">

        <span class="social-tooltip">
            Facebook Hieu Pham Dev
        </span>

        <svg
            viewBox="0 0 64 64"
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true">

            <circle
                cx="32"
                cy="32"
                r="29"
                fill="#ffffff"/>

            <path
                d="
                    M37.8 17
                    H44
                    V8.6
                    C42.9 8.4 39.1 8 34.6 8
                    C25.2 8 18.8 13.7 18.8 24.2
                    V33.2
                    H8
                    V42.6
                    H18.8
                    V66
                    H31.9
                    V42.6
                    H42.2
                    L43.8 33.2
                    H31.9
                    V25.1
                    C31.9 22.4 32.7 17 37.8 17Z"
                fill="#0866ff"
                transform="scale(.78) translate(10 6)"/>

        </svg>

    </a>

</aside>

<!-- FLOAT SOCIAL END -->


<!-- LIVE EXACT HEIGHT JS START -->

<script>
(() => {

    const row =
        document.querySelector(
            '.tool-showcase-row:has(.live-sales-panel)'
        );

    if (!row) {
        return;
    }

    const leftCard =
        row.querySelector('.tool-card-proof');

    const videoCard =
        row.querySelector('.tool-demo-card');

    if (!leftCard || !videoCard) {
        return;
    }


    let frame = null;

    function syncLiveProofHeight() {

        if (frame) {
            cancelAnimationFrame(frame);
        }

        frame = requestAnimationFrame(() => {

            if (window.innerWidth <= 880) {

                row.style.removeProperty(
                    '--live-card-height'
                );

                return;
            }

            /*
             * Đọc đúng chiều cao render thực tế
             * của card thông tin bên trái.
             */
            const height =
                Math.ceil(
                    leftCard.getBoundingClientRect().height
                );

            if (height > 0) {

                row.style.setProperty(
                    '--live-card-height',
                    height + 'px'
                );

            }

        });

    }


    /* chạy lần đầu */
    syncLiveProofHeight();


    /* khi font/layout load xong */
    window.addEventListener(
        'load',
        syncLiveProofHeight
    );


    /* resize màn hình */
    window.addEventListener(
        'resize',
        syncLiveProofHeight,
        { passive: true }
    );


    /*
     * Card trái thay đổi nội dung / chiều cao
     * thì video tự cập nhật theo.
     */
    if ('ResizeObserver' in window) {

        const observer =
            new ResizeObserver(
                syncLiveProofHeight
            );

        observer.observe(leftCard);

    }


    /*
     * Sau khi metadata video tải xong,
     * chạy lại một lần để tránh browser
     * dùng intrinsic video ratio làm lệch layout.
     */
    const video =
        videoCard.querySelector('video');

    if (video) {

        video.addEventListener(
            'loadedmetadata',
            syncLiveProofHeight,
            { once: true }
        );

    }

})();
</script>

<!-- LIVE EXACT HEIGHT JS END -->


<!-- NEWS HEIGHT SYNC START -->

<script>
(() => {

    const row =
        document.querySelector(
            '.tool-showcase-row:has(.news-sales-panel)'
        );

    if (!row) {
        return;
    }

    const left =
        row.querySelector(
            '.tool-card-proof'
        );

    const right =
        row.querySelector(
            '.tool-demo-card'
        );

    if (!left || !right) {
        return;
    }

    let raf = 0;

    function syncNewsHeight() {

        cancelAnimationFrame(raf);

        raf =
            requestAnimationFrame(() => {

                if (
                    window.innerWidth <= 880
                ) {

                    row.style.removeProperty(
                        '--news-card-height'
                    );

                    return;
                }

                const height =
                    Math.ceil(
                        left
                            .getBoundingClientRect()
                            .height
                    );

                if (height > 0) {

                    row.style.setProperty(
                        '--news-card-height',
                        height + 'px'
                    );

                }

            });

    }

    syncNewsHeight();

    window.addEventListener(
        'load',
        syncNewsHeight
    );

    window.addEventListener(
        'resize',
        syncNewsHeight,
        {
            passive: true
        }
    );

    if (
        'ResizeObserver'
        in window
    ) {

        const observer =
            new ResizeObserver(
                syncNewsHeight
            );

        observer.observe(left);

    }

    const video =
        right.querySelector('video');

    if (video) {

        video.addEventListener(
            'loadedmetadata',
            syncNewsHeight,
            {
                once: true
            }
        );

    }

})();
</script>

<!-- NEWS HEIGHT SYNC END -->


<!-- VIETSUB HEIGHT SYNC START -->

<script>
(() => {

    const row =
        document.querySelector(
            '.tool-showcase-row:has(.vietsub-sales-panel)'
        );

    if (!row) {
        return;
    }

    const left =
        row.querySelector(
            '.tool-card-proof'
        );

    const right =
        row.querySelector(
            '.tool-demo-card'
        );

    if (!left || !right) {
        return;
    }

    let frame = 0;

    function syncVietsubHeight() {

        cancelAnimationFrame(frame);

        frame = requestAnimationFrame(() => {

            if (window.innerWidth <= 880) {

                row.style.removeProperty(
                    '--vietsub-card-height'
                );

                return;
            }

            const height =
                Math.ceil(
                    left
                        .getBoundingClientRect()
                        .height
                );

            if (height > 0) {

                row.style.setProperty(
                    '--vietsub-card-height',
                    height + 'px'
                );

            }

        });

    }

    syncVietsubHeight();

    window.addEventListener(
        'load',
        syncVietsubHeight
    );

    window.addEventListener(
        'resize',
        syncVietsubHeight,
        { passive: true }
    );

    if ('ResizeObserver' in window) {

        const observer =
            new ResizeObserver(
                syncVietsubHeight
            );

        observer.observe(left);

    }

    const video =
        right.querySelector('video');

    if (video) {

        video.addEventListener(
            'loadedmetadata',
            syncVietsubHeight,
            { once: true }
        );

    }

})();
</script>

<!-- VIETSUB HEIGHT SYNC END -->


<!-- REVIEW HEIGHT SYNC START -->

<script>
(() => {

    const row =
        document.querySelector(
            '.tool-showcase-row:has(.review-sales-panel)'
        );

    if (!row) {
        return;
    }

    const left =
        row.querySelector(
            '.tool-card-proof'
        );

    const right =
        row.querySelector(
            '.tool-demo-card'
        );

    if (!left || !right) {
        return;
    }

    let raf = 0;

    function syncReviewHeight() {

        cancelAnimationFrame(raf);

        raf = requestAnimationFrame(() => {

            if (window.innerWidth <= 880) {

                row.style.removeProperty(
                    '--review-card-height'
                );

                return;
            }

            const height =
                Math.ceil(
                    left
                        .getBoundingClientRect()
                        .height
                );

            if (height > 0) {

                row.style.setProperty(
                    '--review-card-height',
                    height + 'px'
                );

            }

        });

    }

    syncReviewHeight();

    window.addEventListener(
        'load',
        syncReviewHeight
    );

    window.addEventListener(
        'resize',
        syncReviewHeight,
        {
            passive: true
        }
    );

    if ('ResizeObserver' in window) {

        const observer =
            new ResizeObserver(
                syncReviewHeight
            );

        observer.observe(left);

    }

    const video =
        right.querySelector('video');

    if (video) {

        video.addEventListener(
            'loadedmetadata',
            syncReviewHeight,
            {
                once: true
            }
        );

    }

})();
</script>

<!-- REVIEW HEIGHT SYNC END -->

</body>
</html>