Spaces:
Running
Running
File size: 68,720 Bytes
7ac93f9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 |
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FBSocialTool VIP PRO - Công Cụ Facebook Marketing Cao Cấp</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.gradient-bg {
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
}
.tool-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.vip-badge {
position: absolute;
top: -10px;
right: -10px;
background: linear-gradient(45deg, #f59e0b, #f97316);
color: white;
padding: 5px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.pricing-card:hover {
transform: scale(1.03);
}
.feature-list li:before {
content: "✓";
color: #10b981;
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
}
.ai-feature {
border-left: 4px solid #8b5cf6;
background-color: #f5f3ff;
}
.vip-feature {
background: linear-gradient(45deg, #f5f3ff, #e9d8fd);
border-left: 4px solid #8b5cf6;
}
.dashboard-preview {
background: linear-gradient(145deg, #1e293b, #0f172a);
border-radius: 12px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.tool-running {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.console-output {
font-family: monospace;
background-color: #1e293b;
color: #f8fafc;
height: 300px;
overflow-y: auto;
padding: 1rem;
border-radius: 0.5rem;
white-space: pre-wrap;
}
.console-line {
margin-bottom: 0.5rem;
line-height: 1.5;
}
.console-success {
color: #10b981;
}
.console-warning {
color: #f59e0b;
}
.console-error {
color: #ef4444;
}
.console-info {
color: #3b82f6;
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<!-- Header -->
<header class="gradient-bg text-white shadow-lg">
<div class="container mx-auto px-4 py-6">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fab fa-facebook-square text-3xl"></i>
<h1 class="text-2xl font-bold">FBSocialTool <span class="bg-yellow-500 text-black px-2 py-1 rounded-md ml-1">VIP PRO</span></h1>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#features" class="hover:text-gray-200 transition">Tính năng</a>
<a href="#tools" class="hover:text-gray-200 transition">Công cụ</a>
<a href="#dashboard" class="hover:text-gray-200 transition">Dashboard</a>
<a href="#faq" class="hover:text-gray-200 transition">Hỗ trợ</a>
</nav>
<div class="flex items-center space-x-4">
<div class="hidden md:flex items-center space-x-2 bg-green-600 px-3 py-1 rounded-full">
<div class="w-2 h-2 bg-green-300 rounded-full animate-pulse"></div>
<span class="text-sm">Đang hoạt động</span>
</div>
<button class="px-4 py-2 rounded-full bg-white text-blue-600 font-semibold hover:bg-gray-100 transition" id="account-button">
<i class="fas fa-user-circle mr-2"></i>Tài khoản
</button>
<button class="md:hidden text-2xl" id="mobile-menu-button">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div class="md:hidden hidden bg-indigo-800 py-4 px-4" id="mobile-menu">
<div class="flex flex-col space-y-3">
<a href="#features" class="text-white hover:text-gray-200">Tính năng</a>
<a href="#tools" class="text-white hover:text-gray-200">Công cụ</a>
<a href="#dashboard" class="text-white hover:text-gray-200">Dashboard</a>
<a href="#faq" class="text-white hover:text-gray-200">Hỗ trợ</a>
<div class="flex items-center space-x-2 bg-green-600 px-3 py-1 rounded-full w-max">
<div class="w-2 h-2 bg-green-300 rounded-full animate-pulse"></div>
<span class="text-sm">Đang hoạt động</span>
</div>
</div>
</div>
</header>
<!-- Account Modal -->
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="account-modal">
<div class="bg-white rounded-xl p-8 w-full max-w-md">
<div class="flex justify-between items-center mb-6">
<h3 class="text-2xl font-bold">Tài khoản VIP PRO</h3>
<button class="text-gray-500 hover:text-gray-700" id="close-account-modal">
<i class="fas fa-times"></i>
</button>
</div>
<div class="space-y-6">
<div class="flex items-center space-x-4">
<div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center">
<i class="fas fa-crown text-yellow-500 text-2xl"></i>
</div>
<div>
<h4 class="font-bold">Tài khoản VIP PRO</h4>
<p class="text-sm text-gray-600">Đã kích hoạt toàn bộ tính năng</p>
</div>
</div>
<div class="bg-gray-100 p-4 rounded-lg">
<div class="flex justify-between items-center mb-2">
<span class="font-medium">Hạn dùng:</span>
<span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-sm">30 ngày còn lại</span>
</div>
<div class="w-full bg-gray-300 rounded-full h-2.5">
<div class="bg-green-600 h-2.5 rounded-full" style="width: 75%"></div>
</div>
</div>
<div>
<h4 class="font-bold mb-2">Thống kê sử dụng</h4>
<div class="grid grid-cols-2 gap-4">
<div class="bg-blue-50 p-3 rounded-lg">
<p class="text-sm text-gray-600">Khách hàng tìm thấy</p>
<p class="font-bold text-blue-600">12,345</p>
</div>
<div class="bg-purple-50 p-3 rounded-lg">
<p class="text-sm text-gray-600">Tin nhắn đã gửi</p>
<p class="font-bold text-purple-600">8,765</p>
</div>
<div class="bg-green-50 p-3 rounded-lg">
<p class="text-sm text-gray-600">Bài viết đã phân tích</p>
<p class="font-bold text-green-600">23,456</p>
</div>
<div class="bg-yellow-50 p-3 rounded-lg">
<p class="text-sm text-gray-600">Đối thủ theo dõi</p>
<p class="font-bold text-yellow-600">47</p>
</div>
</div>
</div>
<div class="pt-4 border-t border-gray-200">
<button class="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition mb-3">
<i class="fas fa-sync-alt mr-2"></i>Gia hạn tài khoản
</button>
<button class="w-full bg-gray-200 text-gray-800 py-3 rounded-lg font-semibold hover:bg-gray-300 transition">
<i class="fas fa-sign-out-alt mr-2"></i>Đăng xuất
</button>
</div>
</div>
</div>
</div>
<!-- Account Linking Section -->
<section id="account-linking" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Liên Kết Tài Khoản Mạng Xã Hội</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Kết nối tất cả tài khoản mạng xã hội của bạn để sử dụng đầy đủ tính năng VIP PRO</p>
</div>
<div class="bg-gray-50 rounded-xl shadow-lg p-8 max-w-4xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<!-- Facebook Account -->
<div class="bg-white p-6 rounded-lg shadow-sm flex items-center justify-between">
<div class="flex items-center">
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
<i class="fab fa-facebook-f text-blue-600 text-xl"></i>
</div>
<div>
<h3 class="font-bold">Facebook</h3>
<p class="text-sm text-gray-600" id="facebook-status">Chưa kết nối</p>
</div>
</div>
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition" id="connect-facebook">
<i class="fab fa-facebook-f mr-2"></i>Kết nối
</button>
</div>
<!-- Instagram Account -->
<div class="bg-white p-6 rounded-lg shadow-sm flex items-center justify-between">
<div class="flex items-center">
<div class="w-12 h-12 bg-pink-100 rounded-full flex items-center justify-center mr-4">
<i class="fab fa-instagram text-pink-600 text-xl"></i>
</div>
<div>
<h3 class="font-bold">Instagram</h3>
<p class="text-sm text-gray-600" id="instagram-status">Chưa kết nối</p>
</div>
</div>
<button class="px-4 py-2 bg-pink-600 text-white rounded-lg hover:bg-pink-700 transition" id="connect-instagram">
<i class="fab fa-instagram mr-2"></i>Kết nối
</button>
</div>
<!-- Twitter Account -->
<div class="bg-white p-6 rounded-lg shadow-sm flex items-center justify-between">
<div class="flex items-center">
<div class="w-12 h-12 bg-blue-400 rounded-full flex items-center justify-center mr-4">
<i class="fab fa-twitter text-white text-xl"></i>
</div>
<div>
<h3 class="font-bold">Twitter</h3>
<p class="text-sm text-gray-600" id="twitter-status">Chưa kết nối</p>
</div>
</div>
<button class="px-4 py-2 bg-blue-400 text-white rounded-lg hover:bg-blue-500 transition" id="connect-twitter">
<i class="fab fa-twitter mr-2"></i>Kết nối
</button>
</div>
<!-- LinkedIn Account -->
<div class="bg-white p-6 rounded-lg shadow-sm flex items-center justify-between">
<div class="flex items-center">
<div class="w-12 h-12 bg-blue-700 rounded-full flex items-center justify-center mr-4">
<i class="fab fa-linkedin-in text-white text-xl"></i>
</div>
<div>
<h3 class="font-bold">LinkedIn</h3>
<p class="text-sm text-gray-600" id="linkedin-status">Chưa kết nối</p>
</div>
</div>
<button class="px-4 py-2 bg-blue-700 text-white rounded-lg hover:bg-blue-800 transition" id="connect-linkedin">
<i class="fab fa-linkedin-in mr-2"></i>Kết nối
</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm p-6">
<h3 class="text-xl font-bold mb-4">Bảng Điều Khiển Full Quyền</h3>
<div class="mb-6">
<label class="block text-gray-700 mb-2">Lệnh thực thi:</label>
<div class="flex">
<select class="border border-gray-300 rounded-l-lg px-4 py-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500" id="command-select">
<option value="full-scan">Quét toàn bộ khách hàng tiềm năng</option>
<option value="auto-message">Tự động gửi tin nhắn hàng loạt</option>
<option value="competitor-analysis">Phân tích đối thủ cạnh tranh</option>
<option value="content-schedule">Lập lịch nội dung tự động</option>
<option value="full-auto">Chế độ tự động hoàn toàn</option>
</select>
<button class="px-4 py-2 bg-green-600 text-white rounded-r-lg hover:bg-green-700 transition" id="execute-command">
<i class="fas fa-play mr-2"></i>Thực thi
</button>
</div>
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Bỏ hạn chế tính năng:</label>
<div class="flex flex-wrap gap-2">
<button class="px-4 py-2 bg-red-100 text-red-800 rounded-lg hover:bg-red-200 transition" id="remove-rate-limit">
<i class="fas fa-bolt mr-2"></i>Bỏ giới hạn tốc độ
</button>
<button class="px-4 py-2 bg-purple-100 text-purple-800 rounded-lg hover:bg-purple-200 transition" id="remove-api-limit">
<i class="fas fa-plug mr-2"></i>Bỏ giới hạn API
</button>
<button class="px-4 py-2 bg-yellow-100 text-yellow-800 rounded-lg hover:bg-yellow-200 transition" id="remove-search-limit">
<i class="fas fa-search mr-2"></i>Bỏ giới hạn tìm kiếm
</button>
<button class="px-4 py-2 bg-green-100 text-green-800 rounded-lg hover:bg-green-200 transition" id="remove-all-limits">
<i class="fas fa-unlock mr-2"></i>Mở tất cả hạn chế
</button>
</div>
</div>
<div>
<label class="block text-gray-700 mb-2">Kết quả thực thi:</label>
<div class="console-output" id="command-output">
<div class="console-line console-info">FBSocialTool VIP PRO Console - Phiên bản 2.4.1</div>
<div class="console-line console-info">Đang khởi động hệ thống...</div>
<div class="console-line console-success">✓ Đã tải xong module AI Marketing</div>
<div class="console-line console-success">✓ Đã tải xong module Auto Messenger</div>
<div class="console-line console-success">✓ Đã tải xong module Competitor Analysis</div>
<div class="console-line console-warning">⚠ Một số tính năng đang bị hạn chế</div>
<div class="console-line console-info">Sẵn sàng nhận lệnh thực thi...</div>
</div>
</div>
<div class="mt-6 flex justify-end space-x-3">
<button class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition" id="clear-console">
<i class="fas fa-broom mr-2"></i>Xóa console
</button>
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition" id="run-full-program">
<i class="fas fa-play-circle mr-2"></i>Chạy full chương trình
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Tính Năng Độc Quyền VIP PRO</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Công nghệ AI tiên tiến đã được kích hoạt đầy đủ cho tài khoản của bạn.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- AI Feature 1 -->
<div class="vip-feature p-8 rounded-xl hover:shadow-lg transition relative">
<div class="absolute top-4 right-4">
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Đang hoạt động</span>
</div>
<div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-search-dollar text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">AI Tìm Kiếm Khách Hàng</h3>
<p class="text-gray-600">Tự động quét các bài quảng cáo, bài viết yêu thích và hội nhóm (cả công khai lẫn riêng tư) để tìm khách hàng tiềm năng phù hợp với sản phẩm/dịch vụ của bạn.</p>
<div class="mt-4">
<span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">VIP PRO</span>
<span class="inline-block ml-2 text-xs text-gray-500">Độ chính xác 98%</span>
</div>
</div>
<!-- AI Feature 2 -->
<div class="vip-feature p-8 rounded-xl hover:shadow-lg transition relative">
<div class="absolute top-4 right-4">
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Đang hoạt động</span>
</div>
<div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-id-card text-purple-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">AI Thu Thập Thông Tin</h3>
<p class="text-gray-600">Phân tích và trích xuất thông tin khách hàng bao gồm SĐT, email, giới tính, địa chỉ từ hồ sơ Facebook và các tương tác công khai.</p>
<div class="mt-4">
<span class="inline-block bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">VIP PRO</span>
<span class="inline-block ml-2 text-xs text-gray-500">10,000+ hồ sơ/ngày</span>
</div>
</div>
<!-- AI Feature 3 -->
<div class="vip-feature p-8 rounded-xl hover:shadow-lg transition relative">
<div class="absolute top-4 right-4">
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Đang hoạt động</span>
</div>
<div class="w-14 h-14 bg-pink-100 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-sitemap text-pink-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">AI Phân Loại Khách Hàng</h3>
<p class="text-gray-600">Tự động phân nhóm khách hàng theo độ tuổi, sở thích, hành vi mua sắm và mức độ quan tâm để có chiến lược tiếp cận phù hợp.</p>
<div class="mt-4">
<span class="inline-block bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded-full">VIP PRO</span>
<span class="inline-block ml-2 text-xs text-gray-500">25 tiêu chí phân loại</span>
</div>
</div>
<!-- AI Feature 4 -->
<div class="vip-feature p-8 rounded-xl hover:shadow-lg transition relative">
<div class="absolute top-4 right-4">
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Đang hoạt động</span>
</div>
<div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-puzzle-piece text-green-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">AI Ghép Nối Sản Phẩm</h3>
<p class="text-gray-600">Phân tích nhu cầu và đề xuất sản phẩm/dịch vụ phù hợp nhất với từng khách hàng dựa trên lịch sử tương tác và hồ sơ cá nhân.</p>
<div class="mt-4">
<span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">VIP PRO</span>
<span class="inline-block ml-2 text-xs text-gray-500">Tỷ lệ chuyển đổi +45%</span>
</div>
</div>
<!-- AI Feature 5 -->
<div class="vip-feature p-8 rounded-xl hover:shadow-lg transition relative">
<div class="absolute top-4 right-4">
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Đang hoạt động</span>
</div>
<div class="w-14 h-14 bg-yellow-100 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-robot text-yellow-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">AI Tương Tác Tự Động</h3>
<p class="text-gray-600">Tự động bình luận, gửi tin nhắn cá nhân hóa và gửi lời mời kết bạn với nội dung được tối ưu cho từng đối tượng khách hàng.</p>
<div class="mt-4">
<span class="inline-block bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">VIP PRO</span>
<span class="inline-block ml-2 text-xs text-gray-500">5000+ tin nhắn/ngày</span>
</div>
</div>
<!-- AI Feature 6 -->
<div class="vip-feature p-8 rounded-xl hover:shadow-lg transition relative">
<div class="absolute top-4 right-4">
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Đang hoạt động</span>
</div>
<div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-chart-network text-indigo-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Báo Cáo Thông Minh</h3>
<p class="text-gray-600">Theo dõi hiệu quả chiến dịch với báo cáo chi tiết về tỷ lệ chuyển đổi, phản hồi và ROI được phân tích tự động bởi AI.</p>
<div class="mt-4">
<span class="inline-block bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded-full">VIP PRO</span>
<span class="inline-block ml-2 text-xs text-gray-500">30+ chỉ số phân tích</span>
</div>
</div>
</div>
</div>
</section>
<!-- Tools Section -->
<section id="tools" class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Bộ Công Cụ VIP PRO Đã Kích Hoạt</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Tất cả tính năng cao cấp đã được mở khóa và sẵn sàng sử dụng.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- VIP Tool Card 1 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden tool-card transition duration-300 relative tool-running">
<div class="vip-badge">VIP PRO</div>
<div class="p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
<i class="fas fa-users text-blue-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold">Phân Tích Đối Tượng</h3>
</div>
<p class="text-gray-600 mb-6">Khám phá thông tin chi tiết về người theo dõi và nhân khẩu học của họ với độ chính xác cao.</p>
<div class="flex justify-between items-center">
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Đang chạy</span>
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center">
<i class="fas fa-play-circle mr-1"></i> Mở
</button>
</div>
</div>
</div>
<!-- VIP Tool Card 2 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden tool-card transition duration-300 relative">
<div class="vip-badge">VIP PRO</div>
<div class="p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">
<i class="fas fa-calendar-alt text-green-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold">Lập Lịch Bài Đăng</h3>
</div>
<p class="text-gray-600 mb-6">Lên kế hoạch và lập lịch nội dung của bạn cho các thời điểm tương tác tối ưu với AI đề xuất.</p>
<div class="flex justify-between items-center">
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Sẵn sàng</span>
<button class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition flex items-center">
<i class="fas fa-play-circle mr-1"></i> Mở
</button>
</div>
</div>
</div>
<!-- VIP Tool Card 3 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden tool-card transition duration-300 relative tool-running">
<div class="vip-badge">VIP PRO</div>
<div class="p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
<i class="fas fa-trophy text-purple-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold">Theo Dõi Đối Thủ</h3>
</div>
<p class="text-gray-600 mb-6">Phân tích chiến lược và chỉ số hiệu suất của đối thủ cạnh tranh với báo cáo chi tiết.</p>
<div class="flex justify-between items-center">
<span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full">Đang chạy</span>
<button class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition flex items-center">
<i class="fas fa-play-circle mr-1"></i> Mở
</button>
</div>
</div>
</div>
<!-- VIP AI Tool Card 1 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden tool-card transition duration-300 relative">
<div class="vip-badge">VIP AI</div>
<div class="p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center mr-4">
<i class="fas fa-user-plus text-pink-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold">Tìm Khách Hàng AI</h3>
</div>
<p class="text-gray-600 mb-6">Quét tự động các bài viết, quảng cáo và nhóm để tìm khách hàng tiềm năng với AI thông minh.</p>
<div class="flex justify-between items-center">
<span class="text-xs bg-pink-100 text-pink-800 px-2 py-1 rounded-full">Sẵn sàng</span>
<button class="px-4 py-2 bg-pink-600 text-white rounded-lg hover:bg-pink-700 transition flex items-center">
<i class="fas fa-play-circle mr-1"></i> Mở
</button>
</div>
</div>
</div>
<!-- VIP AI Tool Card 2 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden tool-card transition duration-300 relative tool-running">
<div class="vip-badge">VIP AI</div>
<div class="p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mr-4">
<i class="fas fa-comments text-yellow-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold">Tương Tác Tự Động AI</h3>
</div>
<p class="text-gray-600 mb-6">Tự động bình luận, nhắn tin và kết bạn với khách hàng tiềm năng với nội dung cá nhân hóa.</p>
<div class="flex justify-between items-center">
<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Đang chạy</span>
<button class="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition flex items-center">
<i class="fas fa-play-circle mr-1"></i> Mở
</button>
</div>
</div>
</div>
<!-- VIP AI Tool Card 3 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden tool-card transition duration-300 relative">
<div class="vip-badge">VIP AI</div>
<div class="p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mr-4">
<i class="fas fa-chart-network text-indigo-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold">Phân Tích Kinh Doanh AI</h3>
</div>
<p class="text-gray-600 mb-6">Đề xuất chiến lược tiếp thị tối ưu dựa trên phân tích dữ liệu AI và xu hướng thị trường.</p>
<div class="flex justify-between items-center">
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">Sẵn sàng</span>
<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center">
<i class="fas fa-play-circle mr-1"></i> Mở
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Dashboard Section -->
<section id="dashboard" class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Bảng Điều Khiển VIP PRO</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Trung tâm kiểm soát tất cả công cụ và chiến dịch của bạn</p>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 mb-8">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
<div>
<h3 class="text-xl font-bold mb-2">Tổng quan chiến dịch</h3>
<p class="text-gray-600">Hiệu suất tổng thể các công cụ đang chạy</p>
</div>
<div class="mt-4 md:mt-0">
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
<i class="fas fa-plus-circle mr-2"></i>Tạo chiến dịch mới
</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
<div class="bg-gray-50 p-4 rounded-lg shadow-sm">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-600 text-sm">Khách hàng tiềm năng</p>
<p class="text-2xl font-bold">1,245</p>
</div>
<div class="bg-blue-100 text-blue-800 p-2 rounded-lg">
<i class="fas fa-user-plus"></i>
</div>
</div>
<div class="mt-2">
<span class="text-green-500 text-sm font-medium">+12%</span>
<span class="text-gray-500 text-sm ml-1">so với hôm qua</span>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg shadow-sm">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-600 text-sm">Tin nhắn đã gửi</p>
<p class="text-2xl font-bold">876</p>
</div>
<div class="bg-green-100 text-green-800 p-2 rounded-lg">
<i class="fas fa-comment-dots"></i>
</div>
</div>
<div class="mt-2">
<span class="text-green-500 text-sm font-medium">+24%</span>
<span class="text-gray-500 text-sm ml-1">so với hôm qua</span>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg shadow-sm">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-600 text-sm">Tỷ lệ phản hồi</p>
<p class="text-2xl font-bold">38%</p>
</div>
<div class="bg-purple-100 text-purple-800 p-2 rounded-lg">
<i class="fas fa-chart-line"></i>
</div>
</div>
<div class="mt-2">
<span class="text-green-500 text-sm font-medium">+5%</span>
<span class="text-gray-500 text-sm ml-1">so với hôm qua</span>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg shadow-sm">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-600 text-sm">Đối thủ theo dõi</p>
<p class="text-2xl font-bold">24</p>
</div>
<div class="bg-yellow-100 text-yellow-800 p-2 rounded-lg">
<i class="fas fa-eye"></i>
</div>
</div>
<div class="mt-2">
<span class="text-green-500 text-sm font-medium">+2</span>
<span class="text-gray-500 text-sm ml-1">so với hôm qua</span>
</div>
</div>
</div>
<div class="bg-gray-50 rounded-lg shadow-sm p-4">
<div class="flex justify-between items-center mb-4">
<h4 class="font-bold">Hoạt động gần đây</h4>
<button class="text-blue-600 text-sm hover:text-blue-800">Xem tất cả</button>
</div>
<div class="space-y-4">
<div class="flex items-start">
<div class="bg-green-100 text-green-800 p-2 rounded-lg mr-3">
<i class="fas fa-check-circle"></i>
</div>
<div>
<p class="font-medium">Tìm kiếm khách hàng hoàn thành</p>
<p class="text-sm text-gray-600">Đã tìm thấy 245 khách hàng tiềm năng mới</p>
<p class="text-xs text-gray-500 mt-1">5 phút trước</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-100 text-blue-800 p-2 rounded-lg mr-3">
<i class="fas fa-comments"></i>
</div>
<div>
<p class="font-medium">Tin nhắn tự động đã gửi</p>
<p class="text-sm text-gray-600">Đã gửi 87 tin nhắn đến khách hàng tiềm năng</p>
<p class="text-xs text-gray-500 mt-1">12 phút trước</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-purple-100 text-purple-800 p-2 rounded-lg mr-3">
<i class="fas fa-user-friends"></i>
</div>
<div>
<p class="font-medium">Phân tích đối thủ cập nhật</p>
<p class="text-sm text-gray-600">Đã phân tích 3 đối thủ cạnh tranh mới</p>
<p class="text-xs text-gray-500 mt-1">25 phút trước</p>
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-white rounded-xl shadow-lg p-6">
<div class="flex justify-between items-center mb-6">
<h3 class="text-xl font-bold">Chiến dịch đang chạy</h3>
<button class="text-blue-600 hover:text-blue-800 text-sm">Quản lý</button>
</div>
<div class="space-y-4">
<div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
<div class="flex items-center">
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
<i class="fas fa-users text-blue-600"></i>
</div>
<div>
<p class="font-medium">Tìm KH bất động sản</p>
<p class="text-sm text-gray-600">Đang chạy - 72%</p>
</div>
</div>
<div class="flex space-x-2">
<button class="w-8 h-8 flex items-center justify-center bg-gray-100 hover:bg-gray-200 rounded-lg">
<i class="fas fa-pause text-gray-600"></i>
</button>
<button class="w-8 h-8 flex items-center justify-center bg-blue-100 hover:bg-blue-200 rounded-lg">
<i class="fas fa-chart-bar text-blue-600"></i>
</button>
</div>
</div>
<div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
<div class="flex items-center">
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
<i class="fas fa-comments text-green-600"></i>
</div>
<div>
<p class="font-medium">Tự động tin nhắn</p>
<p class="text-sm text-gray-600">Đang chạy - 45%</p>
</div>
</div>
<div class="flex space-x-2">
<button class="w-8 h-8 flex items-center justify-center bg-gray-100 hover:bg-gray-200 rounded-lg">
<i class="fas fa-pause text-gray-600"></i>
</button>
<button class="w-8 h-8 flex items-center justify-center bg-blue-100 hover:bg-blue-200 rounded-lg">
<i class="fas fa-chart-bar text-blue-600"></i>
</button>
</div>
</div>
<div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
<div class="flex items-center">
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
<i class="fas fa-trophy text-purple-600"></i>
</div>
<div>
<p class="font-medium">Theo dõi đối thủ</p>
<p class="text-sm text-gray-600">Hoàn thành - 100%</p>
</div>
</div>
<div class="flex space-x-2">
<button class="w-8 h-8 flex items-center justify-center bg-gray-100 hover:bg-gray-200 rounded-lg">
<i class="fas fa-redo text-gray-600"></i>
</button>
<button class="w-8 h-8 flex items-center justify-center bg-blue-100 hover:bg-blue-200 rounded-lg">
<i class="fas fa-chart-bar text-blue-600"></i>
</button>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg p-6">
<div class="flex justify-between items-center mb-6">
<h3 class="text-xl font-bold">Báo cáo hiệu suất</h3>
<button class="text-blue-600 hover:text-blue-800 text-sm">Xuất báo cáo</button>
</div>
<div class="mb-6">
<div class="flex justify-between mb-2">
<span class="text-sm text-gray-600">Tỷ lệ chuyển đổi</span>
<span class="text-sm font-medium">42%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-green-500 h-2 rounded-full" style="width: 42%"></div>
</div>
</div>
<div class="mb-6">
<div class="flex justify-between mb-2">
<span class="text-sm text-gray-600">Tương tác trung bình</span>
<span class="text-sm font-medium">78%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-blue-500 h-2 rounded-full" style="width: 78%"></div>
</div>
</div>
<div class="mb-6">
<div class="flex justify-between mb-2">
<span class="text-sm text-gray-600">Tăng trưởng KH</span>
<span class="text-sm font-medium">+28%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-purple-500 h-2 rounded-full" style="width: 28%"></div>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<div class="flex items-center">
<div class="bg-yellow-100 text-yellow-800 p-2 rounded-lg mr-3">
<i class="fas fa-lightbulb"></i>
</div>
<div>
<p class="text-sm font-medium">Đề xuất từ AI</p>
<p class="text-xs text-gray-600">Tăng tần suất tin nhắn vào buổi tối để đạt hiệu quả cao hơn</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Khách Hàng Nói Gì Về VIP PRO</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Tham gia cùng hàng nghìn người dùng hài lòng đã tăng cường sự hiện diện trên Facebook với công cụ của chúng tôi.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="bg-gray-50 p-8 rounded-xl shadow-sm">
<div class="flex items-center mb-6">
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold mr-4">TN</div>
<div>
<h4 class="font-bold">Trần Ngọc</h4>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<p class="text-gray-600 mb-4">"Công cụ tìm kiếm khách hàng AI đã giúp tôi tăng gấp 3 doanh số chỉ trong 2 tháng. Đáng đồng tiền bát gạo!"</p>
<div class="text-sm text-gray-500">Chủ shop thời trang</div>
</div>
<!-- Testimonial 2 -->
<div class="bg-gray-50 p-8 rounded-xl shadow-sm">
<div class="flex items-center mb-6">
<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold mr-4">LM</div>
<div>
<h4 class="font-bold">Lê Minh</h4>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<p class="text-gray-600 mb-4">"Công cụ phân tích đối thủ cho tôi thông tin mà không nơi nào khác có. Chiến lược nội dung của tôi cải thiện đáng kể."</p>
<div class="text-sm text-gray-500">Agency Digital Marketing</div>
</div>
<!-- Testimonial 3 -->
<div class="bg-gray-50 p-8 rounded-xl shadow-sm">
<div class="flex items-center mb-6">
<div class="w-12 h-12 rounded-full bg-pink-100 flex items-center justify-center text-pink-600 font-bold mr-4">PH</div>
<div>
<h4 class="font-bold">Phạm Hương</h4>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
<p class="text-gray-600 mb-4">"Tính năng tự động trả lời tin nhắn tiết kiệm cho tôi hàng giờ mỗi tuần. Bản miễn phí đã tốt nhưng nâng cấp VIP mới thực sự thay đổi cuộc chơi."</p>
<div class="text-sm text-gray-500">Nhà bán hàng online</div>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section id="faq" class="py-20 bg-gray-50">
<div class="container mx-auto px-4 max-w-4xl">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Hỗ Trợ VIP PRO</h2>
<p class="text-gray-600">Chúng tôi luôn sẵn sàng hỗ trợ bạn 24/7 với đội ngũ chuyên gia.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
<div class="bg-white p-8 rounded-xl shadow-sm">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-headset text-blue-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold">Hỗ trợ trực tiếp</h3>
</div>
<p class="text-gray-600 mb-4">Đội ngũ hỗ trợ VIP luôn sẵn sàng giúp bạn qua nhiều kênh:</p>
<ul class="space-y-2">
<li class="flex items-center">
<i class="fas fa-comment-dots text-blue-500 mr-2"></i>
<span>Chat trực tuyến 24/7</span>
</li>
<li class="flex items-center">
<i class="fas fa-phone-alt text-blue-500 mr-2"></i>
<span>Hotline: 1900 1234</span>
</li>
<li class="flex items-center">
<i class="fas fa-envelope text-blue-500 mr-2"></i>
<span>Email: [email protected]</span>
</li>
</ul>
</div>
<div class="bg-white p-8 rounded-xl shadow-sm">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-book text-purple-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold">Tài nguyên VIP</h3>
</div>
<p class="text-gray-600 mb-4">Tài liệu hướng dẫn chi tiết cho tài khoản VIP PRO:</p>
<ul class="space-y-2">
<li class="flex items-center">
<i class="fas fa-video text-purple-500 mr-2"></i>
<span>Video hướng dẫn từ A-Z</span>
</li>
<li class="flex items-center">
<i class="fas fa-file-pdf text-purple-500 mr-2"></i>
<span>Tài liệu PDF chi tiết</span>
</li>
<li class="flex items-center">
<i class="fas fa-users text-purple-500 mr-2"></i>
<span>Cộng đồng VIP PRO</span>
</li>
</ul>
</div>
</div>
<div class="space-y-4">
<!-- FAQ Item 1 -->
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button class="faq-toggle w-full flex justify-between items-center p-6 hover:bg-gray-50 transition">
<h3 class="text-lg font-semibold text-left">Tôi có thể sử dụng tất cả tính năng ngay lập tức không?</h3>
<i class="fas fa-chevron-down transition-transform"></i>
</button>
<div class="faq-content hidden px-6 pb-6 pt-0">
<p class="text-gray-600">Có, tất cả các tính năng bao gồm AI Tìm Kiếm Khách Hàng, AI Thu Thập Thông Tin, AI Phân Loại Khách Hàng, AI Ghép Nối Sản Phẩm, AI Tương Tác Tự Động và Báo Cáo Thông Minh đã được mở khóa và sẵn sàng sử dụng ngay lập tức.</p>
</div>
</div>
<!-- FAQ Item 2 -->
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button class="faq-toggle w-full flex justify-between items-center p-6 hover:bg-gray-50 transition">
<h3 class="text-lg font-semibold text-left">Tài khoản Facebook của tôi có an toàn với công cụ của bạn không?</h3>
<i class="fas fa-chevron-down transition-transform"></i>
</button>
<div class="faq-content hidden px-6 pb-6 pt-0">
<p class="text-gray-600">Hoàn toàn an toàn. Chúng tôi sử dụng API chính thức của Facebook và tuân thủ tất cả các hướng dẫn của nền tảng. Chúng tôi không bao giờ lưu trữ mật khẩu của bạn và chỉ yêu cầu các quyền tối thiểu cần thiết để công cụ hoạt động. Tài khoản VIP có thêm các tính năng bảo mật như cảnh báo đăng nhập và giám sát hoạt động.</p>
</div>
</div>
<!-- FAQ Item 3 -->
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button class="faq-toggle w-full flex justify-between items-center p-6 hover:bg-gray-50 transition">
<h3 class="text-lg font-semibold text-left">Giới hạn sử dụng các tính năng AI là bao nhiêu?</h3>
<i class="fas fa-chevron-down transition-transform"></i>
</button>
<div class="faq-content hidden px-6 pb-6 pt-0">
<p class="text-gray-600">Với tài khoản VIP PRO, bạn có thể sử dụng tất cả tính năng AI không giới hạn. Cụ thể: AI Tìm Kiếm Khách Hàng (10,000+ KH/ngày), AI Thu Thập Thông Tin (10,000+ hồ sơ/ngày), AI Tương Tác Tự Động (5,000+ tin nhắn/ngày). Nếu cần mở rộng giới hạn, vui lòng liên hệ bộ phận hỗ trợ.</p>
</div>
</div>
<!-- FAQ Item 4 -->
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button class="faq-toggle w-full flex justify-between items-center p-6 hover:bg-gray-50 transition">
<h3 class="text-lg font-semibold text-left">Làm thế nào để tối ưu hiệu quả các công cụ AI?</h3>
<i class="fas fa-chevron-down transition-transform"></i>
</button>
<div class="faq-content hidden px-6 pb-6 pt-0">
<p class="text-gray-600">Chúng tôi cung cấp hướng dẫn chi tiết và video tutorial trong mục Tài Nguyên. Ngoài ra, với tài khoản VIP PRO, bạn sẽ được hỗ trợ 1:1 từ chuyên gia để thiết lập và tối ưu hệ thống AI cho nhu cầu cụ thể của bạn. Chúng tôi khuyến nghị bắt đầu với AI Phân Tích Đối Tượng trước khi sử dụng các công cụ tự động hóa.</p>
</div>
</div>
<!-- FAQ Item 5 -->
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button class="faq-toggle w-full flex justify-between items-center p-6 hover:bg-gray-50 transition">
<h3 class="text-lg font-semibold text-left">Tôi có thể tích hợp với các nền tảng khác không?</h3>
<i class="fas fa-chevron-down transition-transform"></i>
</button>
<div class="faq-content hidden px-6 pb-6 pt-0">
<p class="text-gray-600">Có, chúng tôi hỗ trợ tích hợp với Google Sheets, Zapier, và nhiều nền tảng CRM phổ biến. Với tài khoản VIP PRO, bạn còn có quyền truy cập API để tự động hóa quy trình làm việc của mình. Vui lòng truy cập mục Tài Liệu API để biết thêm chi tiết.</p>
</div>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-gray-600 mb-6">Vẫn còn thắc mắc? Đội ngũ hỗ trợ VIP của chúng tôi sẵn lòng giúp đỡ.</p>
<button class="px-8 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition">
<i class="fas fa-headset mr-2"></i>Liên Hệ Hỗ Trợ VIP
</button>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="gradient-bg text-white py-16">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Sẵn Sàng Khám Phá Sức Mạnh AI?</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto text-gray-100">Bắt đầu ngay với tất cả tính năng cao cấp đã được mở khóa trong tài khoản của bạn.</p>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
<a href="#dashboard" class="px-8 py-3 bg-white text-blue-600 rounded-full font-bold hover:bg-gray-100 transition flex items-center justify-center">
<i class="fas fa-rocket mr-2"></i>Truy Cập Bảng Điều Khiển
</a>
<a href="#tools" class="px-8 py-3 border-2 border-white text-white rounded-full font-bold hover:bg-white hover:text-blue-600 transition flex items-center justify-center">
<i class="fas fa-tools mr-2"></i>Xem Công Cụ VIP
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<div>
<div class="flex items-center space-x-2 mb-4">
<i class="fab fa-facebook-square text-2xl text-blue-400"></i>
<h3 class="text-xl font-bold text-white">FBSocialTool <span class="bg-yellow-500 text-black px-2 py-1 rounded-md ml-1 text-sm">VIP PRO</span></h3>
</div>
<p class="mb-4">Công cụ mạnh mẽ để phân tích, phát triển và quản lý sự hiện diện trên Facebook của bạn.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div>
<h4 class="text-white font-bold mb-4">Công Cụ</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-white transition">Phân Tích Đối Tượng</a></li>
<li><a href="#" class="hover:text-white transition">Lập Lịch Bài Đăng</a></li>
<li><a href="#" class="hover:text-white transition">Tìm Khách Hàng AI</a></li>
<li><a href="#" class="hover:text-white transition">Tương Tác Tự Động AI</a></li>
<li><a href="#" class="hover:text-white transition">Phân Tích Kinh Doanh AI</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4">Tài Nguyên VIP</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-white transition">Hướng Dẫn VIP</a></li>
<li><a href="#" class="hover:text-white transition">Case Study</a></li>
<li><a href="#" class="hover:text-white transition">Webinar</a></li>
<li><a href="#" class="hover:text-white transition">Tài Liệu API</a></li>
<li><a href="#" class="hover:text-white transition">Cộng Đồng VIP</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4">Hỗ Trợ VIP</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-white transition">Hỗ Trợ 24/7</a></li>
<li><a href="#" class="hover:text-white transition">Đào Tạo 1:1</a></li>
<li><a href="#" class="hover:text-white transition">Liên Hệ</a></li>
<li><a href="#" class="hover:text-white transition">Chính Sách Bảo Mật</a></li>
<li><a href="#" class="hover:text-white transition">Điều Khoản VIP</a></li>
</ul>
</div>
</div>
<div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
<p>© 2023 FBSocialTool VIP PRO. All rights reserved.</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="#" class="hover:text-white transition">Bảo Mật</a>
<a href="#" class="hover:text-white transition">Điều Khoản</a>
<a href="#" class="hover:text-white transition">Cookies</a>
</div>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// Account modal toggle
document.getElementById('account-button').addEventListener('click',
</html> |