commit 141e914d03e9c94f5c250eabeb21667c0c3f180b
Author: Minhnn <ngominh147@gmail.com>
Date:   Tue Mar 10 15:20:38 2026 +0700

    code

diff --git a/Phaha_Cms b/Phaha_Cms
new file mode 160000
index 0000000..995a7e0
--- /dev/null
+++ b/Phaha_Cms
@@ -0,0 +1 @@
+Subproject commit 995a7e075edb35f551c60218897b67f8f4f9d36e
diff --git a/Phaha_Package/.browserslistrc b/Phaha_Package/.browserslistrc
new file mode 100644
index 0000000..4f9ac26
--- /dev/null
+++ b/Phaha_Package/.browserslistrc
@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
diff --git a/Phaha_Package/.editorconfig b/Phaha_Package/.editorconfig
new file mode 100644
index 0000000..59d9a3a
--- /dev/null
+++ b/Phaha_Package/.editorconfig
@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/Phaha_Package/.gitignore b/Phaha_Package/.gitignore
new file mode 100644
index 0000000..1acf4c7
--- /dev/null
+++ b/Phaha_Package/.gitignore
@@ -0,0 +1,48 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
+package-lock.json
+yarn.lock
+src/environments/environment.ts
+yarn.lock
+src/environments/environment.ts
+.vs/
diff --git a/Phaha_Package/.vscode/extensions.json b/Phaha_Package/.vscode/extensions.json
new file mode 100644
index 0000000..77b3745
--- /dev/null
+++ b/Phaha_Package/.vscode/extensions.json
@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}
diff --git a/Phaha_Package/.vscode/launch.json b/Phaha_Package/.vscode/launch.json
new file mode 100644
index 0000000..740e35a
--- /dev/null
+++ b/Phaha_Package/.vscode/launch.json
@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "pwa-chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}
diff --git a/Phaha_Package/.vscode/settings.json b/Phaha_Package/.vscode/settings.json
new file mode 100644
index 0000000..ed80e38
--- /dev/null
+++ b/Phaha_Package/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+    "search.useGlobalIgnoreFiles": true,
+    "search.useParentIgnoreFiles": true
+}
\ No newline at end of file
diff --git a/Phaha_Package/.vscode/tasks.json b/Phaha_Package/.vscode/tasks.json
new file mode 100644
index 0000000..a298b5b
--- /dev/null
+++ b/Phaha_Package/.vscode/tasks.json
@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}
diff --git a/Phaha_Package/README.md b/Phaha_Package/README.md
new file mode 100644
index 0000000..6660e1e
--- /dev/null
+++ b/Phaha_Package/README.md
@@ -0,0 +1,92 @@
+# VNPost - POSTENP
+
+
+
+## Getting started
+
+To make it easy for you to get started with GitLab, here's a list of recommended next steps.
+
+Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
+
+## Add your files
+
+- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
+- [ ] [Add files using the command line](https://docs.gitlab.com/ee/gitlab-basics/add-file.html#add-a-file-using-the-command-line) or push an existing Git repository with the following command:
+
+```
+cd existing_repo
+git remote add origin https://gitlab.com/service30/vnpost-postenp.git
+git branch -M main
+git push -uf origin main
+```
+
+## Integrate with your tools
+
+- [ ] [Set up project integrations](https://gitlab.com/service30/vnpost-postenp/-/settings/integrations)
+
+## Collaborate with your team
+
+- [ ] [Invite team members and collaborators](https://docs.gitlab.com/ee/user/project/members/)
+- [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
+- [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
+- [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)
+- [ ] [Automatically merge when pipeline succeeds](https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html)
+
+## Test and Deploy
+
+Use the built-in continuous integration in GitLab.
+
+- [ ] [Get started with GitLab CI/CD](https://docs.gitlab.com/ee/ci/quick_start/index.html)
+- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing(SAST)](https://docs.gitlab.com/ee/user/application_security/sast/)
+- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
+- [ ] [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/ee/user/clusters/agent/)
+- [ ] [Set up protected environments](https://docs.gitlab.com/ee/ci/environments/protected_environments.html)
+
+***
+
+# Editing this README
+
+When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!). Thank you to [makeareadme.com](https://www.makeareadme.com/) for this template.
+
+## Suggestions for a good README
+Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
+
+## Name
+Choose a self-explaining name for your project.
+
+## Description
+Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
+
+## Badges
+On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
+
+## Visuals
+Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
+
+## Installation
+Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
+
+## Usage
+Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
+
+## Support
+Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
+
+## Roadmap
+If you have ideas for releases in the future, it is a good idea to list them in the README.
+
+## Contributing
+State if you are open to contributions and what your requirements are for accepting them.
+
+For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
+
+You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
+
+## Authors and acknowledgment
+Show your appreciation to those who have contributed to the project.
+
+## License
+For open source projects, say how it is licensed.
+
+## Project status
+If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.
diff --git a/Phaha_Package/angular.json b/Phaha_Package/angular.json
new file mode 100644
index 0000000..a7296d5
--- /dev/null
+++ b/Phaha_Package/angular.json
@@ -0,0 +1,146 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "customer": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/customer",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              "src/firebase-messaging-sw.js",
+              "src/manifest.json",
+              {
+                "glob": "**/*",
+                "input": "node_modules/ngx-extended-pdf-viewer/assets/",
+                "output": "/assets/"
+              }
+            ],
+            "styles": [
+              "src/styles.scss",
+              "node_modules/bootstrap/dist/css/bootstrap.css",
+              "node_modules/ngx-toastr/toastr.css",
+              "node_modules/flatpickr/dist/flatpickr.min.css",
+              "./node_modules/quill/dist/quill.snow.css",
+              "./node_modules/quill/dist/quill.core.css"
+            ],
+            "scripts": [
+              "node_modules/bootstrap/dist/js/bootstrap.js",
+              "./node_modules/quill/dist/quill.min.js"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "optimization": {
+                "scripts": true,
+                "styles": {
+                  "minify": true,
+                  "inlineCritical": false
+                  },
+                "fonts": true
+              },
+              "sourceMap": false,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "4mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "150kb",
+                  "maximumError": "150kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "customer:build:production"
+            },
+            "development": {
+              "browserTarget": "customer:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "customer:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              "src/firebase-messaging-sw.js",
+              "src/manifest.json",
+              {
+                "glob": "**/*",
+                "input": "node_modules/ngx-extended-pdf-viewer/assets/",
+                "output": "/assets/"
+              }
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": "a9c3b5ff-118e-4409-a8fb-d930b33735ca"
+  }
+}
\ No newline at end of file
diff --git a/Phaha_Package/karma.conf.js b/Phaha_Package/karma.conf.js
new file mode 100644
index 0000000..246fc8e
--- /dev/null
+++ b/Phaha_Package/karma.conf.js
@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/customer'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/Phaha_Package/package.json b/Phaha_Package/package.json
new file mode 100644
index 0000000..d782247
--- /dev/null
+++ b/Phaha_Package/package.json
@@ -0,0 +1,82 @@
+{
+  "name": "customer",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test",
+    "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --configuration production --build-optimizer",
+    "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --stats-json",
+    "build:prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --configuration production",
+    "build:prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --configuration production --stats-json",
+    "bundle-analyzer": "webpack-bundle-analyzer dist/sml-vcu/stats.json"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^14.0.5",
+    "@angular/cdk": "^14.2.1",
+    "@angular/common": "^14.0.0",
+    "@angular/compiler": "^14.0.0",
+    "@angular/core": "^14.0.0",
+    "@angular/fire": "^7.4.1",
+    "@angular/forms": "^14.0.0",
+    "@angular/localize": "^14.0.3",
+    "@angular/platform-browser": "^14.0.0",
+    "@angular/platform-browser-dynamic": "^14.0.0",
+    "@angular/router": "^14.0.0",
+    "@fortawesome/angular-fontawesome": "^0.11.1",
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-brands-svg-icons": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@icon/unicons": "^3.0.6-alpha.0",
+    "@ng-bootstrap/ng-bootstrap": "^12.1.2",
+    "@ng-select/ng-select": "^9.0.2",
+    "@ngx-translate/core": "^14.0.0",
+    "@ngx-translate/http-loader": "^7.0.0",
+    "@popperjs/core": "^2.11.5",
+    "@types/file-saver": "^2.0.5",
+    "@types/popper.js": "^1.11.0",
+    "@types/quill": "1.3.10",
+    "angular-snapscroll": "^1.3.1",
+    "bootstrap": "^5.1.3",
+    "bootstrap-icons": "^1.8.3",
+    "file-saver": "^2.0.5",
+    "firebase": "9.8.4",
+    "flatpickr": "^4.6.13",
+    "hammerjs": "^2.0.8",
+    "js-sha256": "^0.9.0",
+    "moment": "^2.29.4",
+    "ng-block-ui": "^3.0.2",
+    "ng2-flatpickr": "^9.0.0",
+    "ng2-pdf-viewer": "^9.1.2",
+    "ngx-device-detector": "^4.0.1",
+    "ngx-extended-pdf-viewer": "^14.0.6",
+    "ngx-loading": "^13.0.1",
+    "ngx-plyr": "4.0.0",
+    "ngx-quill": "^18.0.0",
+    "ngx-sharebuttons": "^11.0.0",
+    "ngx-toastr": "^15.0.0",
+    "plyr": "3.6.4",
+    "quill": "^1.3.7",
+    "rxjs": "~7.5.0",
+    "sweetalert2": "^11.4.24",
+    "swiper": "^8.2.6",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^14.0.2",
+    "@angular/cli": "~14.0.2",
+    "@angular/compiler-cli": "^14.0.0",
+    "@types/hammerjs": "^2.0.41",
+    "@types/jasmine": "~4.0.0",
+    "jasmine-core": "~4.1.0",
+    "karma": "~6.3.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.0.0",
+    "karma-jasmine-html-reporter": "~1.7.0",
+    "typescript": "~4.7.2"
+  }
+}
diff --git a/Phaha_Package/src/app/Models/model.ts b/Phaha_Package/src/app/Models/model.ts
new file mode 100644
index 0000000..27c9f9e
--- /dev/null
+++ b/Phaha_Package/src/app/Models/model.ts
@@ -0,0 +1,16 @@
+export class PageModel {
+  page: number = 1;
+  pageSize: number = 10;
+  keyWord: string = "";
+  sortColumn?: string;
+  sortDirection?: SortDirection;
+  totalRecords: number = 0;
+  firstItemOnPage: number = 0;
+  result: any = [];
+  editorialOfficeId: any = null;
+  pageNumber: number = 1;
+  totalItemCount: number = 0;
+  pageCount: number = 0;
+}
+
+export type SortDirection = 'asc' | 'desc' | '';
diff --git a/Phaha_Package/src/app/app-routing.ts b/Phaha_Package/src/app/app-routing.ts
new file mode 100644
index 0000000..6bde376
--- /dev/null
+++ b/Phaha_Package/src/app/app-routing.ts
@@ -0,0 +1,116 @@
+import { RouterModule, Routes } from '@angular/router';
+import { PackageDetailComponent } from './package/package-detail/package-detail.component';
+import { PackageHistoryComponent } from './package-history/package-history.component';
+import { ViewBookComponent } from "./view-book/view-book.component";
+import { LoginComponent } from './login/login.component';
+import { PackagePaymentComponent } from './package/package-payment/package-payment.component';
+import { PaymentSuccessComponent } from './package/package-payment/payment-success/payment-success.component';
+import { ForgetPasswordComponent } from './forget-password/forget-password.component';
+import { VerifyEmailComponent } from './register-user/verify-email/verify-email.component';
+import { ListPackageComponent } from "./my-package/list-package/list-package.component";
+import { AddUserComponent } from "./my-package/add-user/add-user.component";
+import { PackageTrialComponent } from './package/package-trial/package-trial.component';
+import { EditorialOfficeListComponent } from './editorial-office/editorial-office-list/editorial-office-list.component';
+import { AuthorListComponent } from './home/author-list/author-list.component';
+import { ErrorNotFoundComponent } from './layout/error-not-found/error-not-found.component';
+import { PageNewsPrfeditorialPrfauthorComponent } from './page-news-prfeditorial-prfauthor/page-news-prfeditorial-prfauthor.component';
+import { PagePrfEditorialOfficeComponent } from './page-news-prfeditorial-prfauthor/prf-editorial-office/page-prf-editorial-office/page-prf-editorial-office.component';
+import { PagePrfAuthorComponent } from './page-news-prfeditorial-prfauthor/prf-author/page-prf-author/page-prf-author.component';
+import { PageDetailPrfAuthorComponent } from './page-news-prfeditorial-prfauthor/prf-author/page-prf-author/page-detail-prf-author/page-detail-prf-author.component';
+import { PageDetailPrfEditorialOfficeComponent } from './page-news-prfeditorial-prfauthor/prf-editorial-office/page-prf-editorial-office/page-detail-prf-editorial-office/page-detail-prf-editorial-office.component';
+import { PageNewsCategoryComponent } from './page-news-prfeditorial-prfauthor/page-news/page-news-category/page-news-category.component';
+import { PageNewsDetailComponent } from './page-news-prfeditorial-prfauthor/page-news/page-news-category/page-news-detail/page-news-detail.component';
+import { BookDetailsComponent } from './book/book-details/book-details.component';
+import { BookListByCategoryComponent } from './book/book-list-by-category/book-list-by-category.component';
+import { PackageCodeComponent } from './my-package/package-code/package-code.component';
+import { HonorPressComponent } from './honor-press/honor-press.component';
+import { DetailHonorPressComponent } from './honor-press/detail-honor-press/detail-honor-press.component';
+import { ResetPasswordComponent } from "./reset-password/reset-password.component";
+import { ViewTestComponent } from './view-book/view-test/view-test.component';
+import { AskonomyDetailComponent } from './package/package-askonomy/askonomy-detail/askonomy-detail.component';
+import { AskonomyViewComponent } from './package/package-askonomy/askonomy-view/askonomy-view.component';
+import { HomeV2Component } from './template-2/home-2/home-v2.component';
+import { PackageNewsComponent } from './template-2/package-news/package-news.component';
+import { PackageNewsDetailComponent } from './template-2/package-news/package-news-detail/package-news-detail.component';
+import { VneconomyComponent } from './editorial-office/vneconomy/vneconomy-home/vneconomy.component';
+import { VneconomyProfileComponent } from './editorial-office/vneconomy/vneconomy-profile/vneconomy-profile.component';
+import { VneconomyDetailComponent } from './editorial-office/vneconomy/vneconomy-detail/vneconomy-detail.component';
+import { VneconomyPremiumComponent } from './editorial-office/vneconomy/vneconomy-premium/vneconomy-premium.component';
+import { VneconomyAskonomyComponent } from './editorial-office/vneconomy/vneconomy-askonomy/vneconomy-askonomy.component';
+import { VneconomyPackagesComponent } from './editorial-office/vneconomy/vneconomy-packages/vneconomy-packages.component';
+import { PackageUpgradeComponent } from './package/package-upgrade/package-upgrade.component';
+import { VneconomyNewpaperComponent } from './editorial-office/vneconomy/vneconomy-newpaper/vneconomy-newpaper.component';
+import { EditorialDetailComponent } from './modules/editorial/components/editorial-detail/editorial-detail.component';
+import { NewspaperDetailComponent } from './modules/newspaper/components/newspaper-detail/newspaper-detail.component';
+import { PackageSearchComponent } from './modules/packages/components/package-search/package-search.component';
+import { AccountProfileComponent } from './modules/account/components/account-profile/account-profile.component';
+import { PaymentInfoComponent } from './package/package-payment/payment-info/payment-info.component';
+
+
+const routes: Routes = [
+  { path: '', component: HomeV2Component },
+  { path: 'chi-tiet-goi/:id', component: PackageDetailComponent },
+  // { path: 'chi-tiet-askonomy/:id', component: AskonomyDetailComponent },
+
+  { path: 'tap-chi-kinh-te-viet-nam', component: VneconomyComponent, data: { showAskonomy: false } },
+  { path: 'tap-chi-kinh-te-viet-nam/so-bao', component: VneconomyNewpaperComponent, data: { showAskonomy: false } },
+  { path: 'chi-tiet-toa-soan/tap-chi-kinh-te-viet-nam', component: VneconomyComponent, data: { showAskonomy: false } },
+  { path: 'tap-chi-kinh-te-viet-nam/profile', component: VneconomyProfileComponent, data: { showAskonomy: false } },
+  { path: 'tap-chi-kinh-te-viet-nam/premium', component: VneconomyPremiumComponent, data: { showAskonomy: false } },
+  { path: 'tap-chi-kinh-te-viet-nam/askonomy', component: VneconomyAskonomyComponent, data: { showAskonomy: false } },
+  { path: 'tap-chi-kinh-te-viet-nam/packages', component: VneconomyPackagesComponent, data: { showAskonomy: false } },
+  { path: 'tap-chi-kinh-te-viet-nam/detail/:id', component: VneconomyDetailComponent, data: { showAskonomy: false } },
+
+  { path: 'askonomy', component: AskonomyViewComponent, data: { showHeader: false, showFooter: false, showAskonomy: false } },
+  { path: 'user/package-history', component: PackageHistoryComponent },
+  { path: 'auth/login', component: LoginComponent },
+  { path: 'auth/login?return=', component: LoginComponent },
+  { path: 'view/:id', component: ViewBookComponent, data: { showHeader: false, showFooter: false } },
+  { path: 'view-trial/:id', component: ViewBookComponent, data: { showHeader: false, showFooter: false } },
+  { path: 'view-test/:token', component: ViewTestComponent, data: { showHeader: false, showFooter: false } },
+
+  { path: 'package-upgrade/:id/:packuserid', component: PackageUpgradeComponent },
+  { path: 'package-pay/:id', component: PackagePaymentComponent },
+  { path: 'package-pay/:id/:type', component: PackagePaymentComponent },
+  { path: 'package-pay/:id/:type/:packuserid', component: PackagePaymentComponent },
+  { path: 'package-pay/success/:id', component: PaymentSuccessComponent },
+
+  { path: 'list-news/:id', component: ListPackageComponent },
+  { path: 'search', component: PackageSearchComponent },
+  { path: 'search/:key', component: PackageSearchComponent },
+  { path: 'profile', component: AccountProfileComponent },
+  { path: 'forget-password', component: ForgetPasswordComponent },
+  { path: 'add-user/:id', component: AddUserComponent },
+  { path: 'web/auth/verify-email', component: VerifyEmailComponent },
+  { path: 'package-trial/:id', component: PackageTrialComponent },
+  { path: 'editorial-office', component: EditorialOfficeListComponent },
+  { path: 'tac-gia', component: AuthorListComponent },
+  { path: 'news-profile', component: PageNewsPrfeditorialPrfauthorComponent },
+  { path: 'news-by-category/:id', component: PageNewsCategoryComponent },
+  { path: 'news/detail/:id', component: PageNewsDetailComponent },
+  { path: 'profile-editorial-office', component: PagePrfEditorialOfficeComponent },
+  { path: 'profile-editorial-office/detail/:id', component: PageDetailPrfEditorialOfficeComponent },
+  { path: 'profile-author', component: PagePrfAuthorComponent },
+  { path: 'profile-author/detail/:id', component: PageDetailPrfAuthorComponent },
+  { path: 'chi-tiet-sach', component: BookDetailsComponent },
+  { path: 'the-loai/chu-de-sach', component: BookListByCategoryComponent },
+  { path: 'package-code', component: PackageCodeComponent },
+  { path: 'honor-press', component: HonorPressComponent, data: { showHeader: false, showFooter: false } },
+  { path: 'honor-press/detail/:id', component: DetailHonorPressComponent, data: { showHeader: false, showFooter: false } },
+  { path: 'reset-password/:token', component: ResetPasswordComponent },
+  { path: 'payment-info/:id', component: PaymentInfoComponent },
+
+  { path: 'an-pham', component: PackageNewsComponent },
+  { path: 'an-pham/:cateId', component: PackageNewsComponent },
+  { path: 'chi-tiet/:id', component: NewspaperDetailComponent },
+  { path: ':slug', component: EditorialDetailComponent },
+
+  { path: '**', component: ErrorNotFoundComponent, data: { showHeader: false, showFooter: false } }
+]
+
+export const routing = RouterModule.forRoot(routes, {
+  onSameUrlNavigation: 'reload',
+  anchorScrolling: 'enabled',
+  scrollPositionRestoration: 'enabled',
+});
+
diff --git a/Phaha_Package/src/app/app.component.html b/Phaha_Package/src/app/app.component.html
new file mode 100644
index 0000000..dd3cc3b
--- /dev/null
+++ b/Phaha_Package/src/app/app.component.html
@@ -0,0 +1,20 @@
+<app-header *ngIf="showHeader"></app-header>
+<div [ngClass]="{'main-mobile': isMobile && showHeader}">
+    <router-outlet></router-outlet>
+</div>
+<app-footer *ngIf="showFooter"></app-footer>
+
+<div *ngIf="showAskonomy && currentUser && month" class="box-chat-askonomy">
+    <button class="askonomy_close" *ngIf="isShowAskonomy" (click)="isShowAskonomy = !isShowAskonomy;">
+        <i class="uil uil-times-circle"></i>
+    </button>
+    <div *ngIf="isShowAskonomy" class="box-chat-askonomy-support">
+        <span>Email: support.askonomy@vneconomy.vn</span>
+        <a target="_blank" href="https://docs.google.com/forms/d/e/1FAIpQLSeZYkMiTgjlycw89Jci5EjShrBb9z6SEKbbZ9KnDbCt-bdJ9Q/viewform">Phản hồi</a>
+    </div>
+    <div class="askonomy_iframe" *ngIf="isShowAskonomy" [innerHTML]="pathIframe">
+    </div>
+    <div class="askonomy_icon" *ngIf="!isShowAskonomy" (click)="isShowAskonomy = !isShowAskonomy">
+        <img src="/assets/images/icons/icon_askonomy.png">
+    </div>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/app.component.scss b/Phaha_Package/src/app/app.component.scss
new file mode 100644
index 0000000..36255b6
--- /dev/null
+++ b/Phaha_Package/src/app/app.component.scss
@@ -0,0 +1,79 @@
+.mt-140 {
+    margin-top: 140px;
+}
+
+.mt-60 {
+    margin-top: 60px;
+}
+
+.box-chat-askonomy {
+    position: fixed;
+    bottom: 10px;
+    left: 10px;
+    z-index: 100;
+
+    .askonomy_iframe {
+        background: #fff;
+        width: 360px;
+
+        iframe {
+            height: 500px;
+            width: 100%;
+        }
+    }
+
+    .askonomy_icon {
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+        overflow: hidden;
+        box-shadow: 0 0 5px #d12129;
+
+        img {
+            width: 100%;
+            padding: 10px;
+            background: #d12129;
+        }
+    }
+
+    .askonomy_close {
+        position: absolute;
+        top: -10px;
+        right: -10px;
+        width: 30px;
+        height: 30px;
+        padding: 0;
+        border: none;
+        border-radius: 50%;
+        background: #fff;
+
+        i {
+            font-size: 20px;
+        }
+    }
+
+    .box-chat-askonomy-support {
+
+        padding: 5px 10px;
+        background: #fff;
+        font-weight: 600;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+
+        a {
+
+            border: 1px solid #e09500;
+            padding: 2px 5px;
+            border-radius: 5px;
+            text-decoration: none;
+            color: #e09500;
+            box-shadow: 0 0 5px #e09500;
+
+        }
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/app.component.ts b/Phaha_Package/src/app/app.component.ts
new file mode 100644
index 0000000..18c4c4d
--- /dev/null
+++ b/Phaha_Package/src/app/app.component.ts
@@ -0,0 +1,104 @@
+import { Component, OnInit } from '@angular/core';
+import { DomSanitizer, Meta, MetaDefinition, SafeHtml, Title } from '@angular/platform-browser';
+import { ActivatedRoute, Data, NavigationEnd, Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { DeviceDetectorService } from 'ngx-device-detector';
+import { filter, map, mergeMap, tap } from 'rxjs';
+import { AuthenticationService } from './auth/service/authentication.service';
+import { environment } from 'src/environments/environment';
+import { ToastrService } from 'ngx-toastr';
+import { PackageService } from './package/package.service';
+import Swal from 'sweetalert2';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent implements OnInit {
+  showHeader = false;
+  showFooter = false;
+  isShowAskonomy = false;
+  showAskonomy = false;
+  isMobile: boolean = false;
+  currentUser: any;
+  urlAskonomy = environment.urlAskonomy;
+  private i18nmyPackage: any;
+  month = false;
+  pathIframe: SafeHtml = '';
+
+  constructor(
+    private readonly _router: Router,
+    private readonly _activatedRoute: ActivatedRoute,
+    public readonly _translate: TranslateService,
+    private readonly _authenticationService: AuthenticationService,
+    private readonly _toastrService: ToastrService,
+    private readonly _sanitizer: DomSanitizer,
+    private readonly _packageService: PackageService
+  ) {
+    if (window.location.pathname.startsWith('/en')) {
+      localStorage.setItem("lang", "en");
+      window.location.href = window.location.href.replace('/en', '');
+    } else if (!window.location.pathname.startsWith('/view') && window.location.pathname.startsWith('/vi')) {
+      localStorage.setItem("lang", "vi");
+      window.location.href = window.location.href.replace('/vi', '');
+    }
+
+    if (!localStorage.getItem("lang"))
+      localStorage.setItem("lang", "vi");
+
+    this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    this._translate.addLangs(['en', 'vi']);
+    const langcurrent = localStorage.getItem('lang');
+    this._translate.setDefaultLang(langcurrent ?? 'vi');
+    this._translate.use(langcurrent ?? 'vi');
+    this.currentUser = this._authenticationService.currentUserValue;
+    if (this.currentUser)
+      this.getMonth();
+
+    this.onGetI18n();
+    this.pathIframe = this._sanitizer.bypassSecurityTrustHtml(`<iframe style="width: 100%; height: 500px;" src="${this.urlAskonomy}" title="Trợ lý Thông tin Kinh tế" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`);
+  }
+
+  getMonth() {
+    this._packageService.getMonth()
+      .subscribe(res => {
+        this.currentUser.month = res;
+        if (this.currentUser.month > 5) this.month = true;
+        localStorage.setItem('currentCustomer', JSON.stringify(this.currentUser));
+      })
+  }
+
+
+  showNotiVnaskonomy() {
+    Swal.fire({
+      title: this.i18nmyPackage.sweetAlert.askonomy.title,
+      html: this.i18nmyPackage.sweetAlert.askonomy.html,
+      icon: 'warning',
+      showCancelButton: true,
+      cancelButtonColor: '#fcaf17',
+      showConfirmButton: false,
+      cancelButtonText: this.i18nmyPackage.sweetAlert.askonomy.close,
+      customClass: {
+        confirmButton: 'btn btn-primary',
+        cancelButton: 'btn btn-danger ml-1'
+      }
+    });
+  }
+
+  onGetI18n() {
+    this._translate.get('myPackage').subscribe(data => {
+      this.i18nmyPackage = data;
+    });
+  }
+
+  ngOnInit() {
+    this._router.events.subscribe(event => {
+      if (event instanceof NavigationEnd) {
+        this.showHeader = this._activatedRoute.firstChild?.snapshot.data['showHeader'] !== false;
+        this.showFooter = this._activatedRoute.firstChild?.snapshot.data['showFooter'] !== false;
+        this.showAskonomy = this._activatedRoute.firstChild?.snapshot.data['showAskonomy'] !== false;
+      }
+    });
+  }
+}
diff --git a/Phaha_Package/src/app/app.module.ts b/Phaha_Package/src/app/app.module.ts
new file mode 100644
index 0000000..7c56fa8
--- /dev/null
+++ b/Phaha_Package/src/app/app.module.ts
@@ -0,0 +1,144 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import '@angular/localize/init'
+import { PackageModule } from "./package/package.module";
+import { CommonModule } from '@angular/common';
+import { routing } from './app-routing';
+import { HomeModule } from './home/home.module';
+import { HeaderModule } from './layout/header/header.module';
+import { FooterModule } from './layout/footer/footer.module';
+import { EditorialOfficeModule } from './editorial-office/editorial-office.module';
+import { PackageHistoryComponent } from './package-history/package-history.component'
+import { JwtInterceptor } from "./auth/helpers/jwt.interceptor";
+import { LoginModule } from './login/login.module';
+import { BlockUIModule } from 'ng-block-ui';
+import { ToastrModule } from 'ngx-toastr';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ErrorInterceptor } from './auth/helpers/error.interceptor';
+import { ViewBookModule } from "./view-book/view-book.module";
+import { Ng2FlatpickrModule } from 'ng2-flatpickr';
+import { MyPackageModule } from "./my-package/my-package.module";
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { VerifyEmailComponent } from './register-user/verify-email/verify-email.component';
+import { NgxTranslateModule } from './translate/translate.module';
+import { HTTP_INTERCEPTORS, HttpClientModule, HttpClient } from "@angular/common/http";
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { ErrorNotFoundComponent } from './layout/error-not-found/error-not-found.component';
+import { HomeBookIntroComponent } from './home-book-intro/home-book-intro.component';
+import { BookModule } from './book/book.module';
+import { PageNewsPrfeditorialPrfauthorModule } from './page-news-prfeditorial-prfauthor/page-news-prfeditorial-prfauthor.module';
+import { BookstoreComponent } from './bookstore/bookstore.component';
+import { HeaderBookstoreComponent } from './bookstore/layout-bookstore/header-bookstore/header-bookstore.component';
+import { FooterBookstoreComponent } from './bookstore/layout-bookstore/footer-bookstore/footer-bookstore.component';
+import { BookstoreModule } from './bookstore/bookstore.module';
+import { QuillModule } from 'ngx-quill';
+import { ShareButtonsModule } from 'ngx-sharebuttons/buttons';
+import { ShareIconsModule } from 'ngx-sharebuttons/icons';
+import { HonorPressModule } from './honor-press/honor-press.module';
+import { environment } from 'src/environments/environment';
+import { initializeApp } from "firebase/app";
+import { AngularFireModule } from "@angular/fire/compat";
+import { AngularFireMessagingModule } from '@angular/fire/compat/messaging';
+import { ResetPasswordComponent } from './reset-password/reset-password.component';
+import { RegisterUserModule } from './register-user/register-user.module';
+import { HomeV2Module } from './template-2/home-2/home-v2.module';
+import { PackageNewsModule } from './template-2/package-news/package-news.module';
+import { PackageNewsDetailModule } from './template-2/package-news/package-news-detail/package-news-detail.module';
+import { PackageNewsOfOfficesModule } from './template-2/package-news/package-news-of-offices/package-news-of-offices.module';
+import { VneconomyModule } from './editorial-office/vneconomy/vneconomy-home/vneconomy.module';
+import { VneconomyProfileModule } from './editorial-office/vneconomy/vneconomy-profile/vneconomy-profile.module';
+import { VneconomyDetailModule } from './editorial-office/vneconomy/vneconomy-detail/vneconomy-detail.module';
+import { VneconomyPremiumModule } from './editorial-office/vneconomy/vneconomy-premium/vneconomy-premium.module';
+import { VneconomyAskonomyModule } from './editorial-office/vneconomy/vneconomy-askonomy/vneconomy-askonomy.module';
+import { VneconomyPackagesModule } from './editorial-office/vneconomy/vneconomy-packages/vneconomy-packages.module';
+import { NewspaperModule } from './modules/newspaper/newspaper.module';
+import { EditorialModule } from './modules/editorial/editorial.module';
+import { AccountModule } from './modules/account/account.module';
+
+
+export function httpTranslateLoader(http: HttpClient) {
+  return new TranslateHttpLoader(http, '../assets/i18n/', '.json');
+}
+
+// initializeApp(environment.firebase);
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    PackageHistoryComponent,
+    VerifyEmailComponent,
+    ErrorNotFoundComponent,
+    HomeBookIntroComponent,
+    BookstoreComponent,
+    HeaderBookstoreComponent,
+    FooterBookstoreComponent,
+    ResetPasswordComponent,
+  ],
+  exports: [],
+  imports: [
+    routing,
+    BrowserModule,
+    NgbModule,
+    PackageModule,
+    CommonModule,
+    HonorPressModule,
+    HomeModule,
+    HeaderModule,
+    FooterModule,
+    EditorialOfficeModule,
+    QuillModule.forRoot(),
+    BlockUIModule.forRoot(),
+    ToastrModule.forRoot({ timeOut: 2000, maxOpened: 1 }),
+    BrowserAnimationsModule,
+    LoginModule,
+    ViewBookModule,
+    Ng2FlatpickrModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MyPackageModule,
+    RegisterUserModule,
+    NgSelectModule,
+    NgxTranslateModule,
+    PageNewsPrfeditorialPrfauthorModule,
+    HttpClientModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: httpTranslateLoader,
+        deps: [HttpClient]
+      },
+    }),
+    BookModule,
+    BookstoreModule,
+    ShareButtonsModule.withConfig({
+      debug: true,
+    }),
+    ShareIconsModule,
+    HomeV2Module,
+    PackageNewsModule,
+    PackageNewsDetailModule,
+    PackageNewsOfOfficesModule,
+    VneconomyModule,
+    VneconomyProfileModule,
+    VneconomyDetailModule,
+    VneconomyPremiumModule,
+    VneconomyAskonomyModule,
+    VneconomyPackagesModule,
+    NewspaperModule,
+    EditorialModule,
+    AccountModule
+    // AngularFireModule.initializeApp(environment.firebase),
+    // AngularFireMessagingModule,
+  ],
+  providers: [
+    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
+    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule {
+}
diff --git a/Phaha_Package/src/app/auth/helpers/auth.guards.ts b/Phaha_Package/src/app/auth/helpers/auth.guards.ts
new file mode 100644
index 0000000..9bd33be
--- /dev/null
+++ b/Phaha_Package/src/app/auth/helpers/auth.guards.ts
@@ -0,0 +1,39 @@
+import {Injectable} from '@angular/core';
+import {Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router';
+import {AuthenticationService} from "../service/authentication.service";
+
+
+@Injectable({providedIn: 'root'})
+export class AuthGuard implements CanActivate {
+  /**
+   *
+   * @param _router Router
+   * @param _authenticationService AuthenticationService
+   */
+  constructor(private _router: Router, private _authenticationService: AuthenticationService) {
+  }
+
+  // canActivate
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+    const currentUser = this._authenticationService.currentUserValue;
+    if (currentUser) {
+      // check if route is restricted by role
+      if (route.data['role'] && route.data['role'].indexOf(currentUser.role) === -1) {
+        // role not authorised so redirect to not-authorized page
+        this._router.navigate(['/login']);
+        return false;
+      }
+      // authorised so return true
+      return true;
+    }
+    // not logged in so redirect to login page with the return url
+    this._router.navigate(['/login'], {queryParams: {returnUrl: state.url}});
+    return false;
+  }
+
+  getArraysIntersection(a1: any[], a2: string | any[]) {
+    return a1.filter(function (n) {
+      return a2.indexOf(n) !== -1;
+    });
+  }
+}
diff --git a/Phaha_Package/src/app/auth/helpers/error.interceptor.ts b/Phaha_Package/src/app/auth/helpers/error.interceptor.ts
new file mode 100644
index 0000000..d9e2efe
--- /dev/null
+++ b/Phaha_Package/src/app/auth/helpers/error.interceptor.ts
@@ -0,0 +1,113 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
+import { from, lastValueFrom, Observable, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { AuthenticationService } from "../service/authentication.service";
+import { BlockUI, NgBlockUI } from 'ng-block-ui';
+import { ActiveToast, ToastrService } from 'ngx-toastr';
+import { LoginService } from 'src/app/login/login.service';
+import { TranslateService } from '@ngx-translate/core';
+
+@Injectable()
+export class ErrorInterceptor implements HttpInterceptor {
+  @BlockUI() blockUI: NgBlockUI | undefined;
+  toastrMessage: ActiveToast<any> | undefined;
+  private toastIsVisible: boolean | undefined;
+  private i18n: any;
+  private isLogout: boolean = false;
+  /**
+   * Constructor
+   * @param _router Router
+   * @param _authenticationService AuthenticationService
+   * @param _toastr ToastrService
+   */
+  constructor(
+    private _router: Router,
+    private _toastr: ToastrService,
+    private _translate: TranslateService
+  ) {
+  }
+
+  ngOnInit(): void {
+
+  }
+
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    return from(this.handle(request, next));
+  }
+
+  async handle(req: HttpRequest<any>, next: HttpHandler) {
+    this.onGetI18n();
+    return await lastValueFrom(next.handle(req).pipe(
+      catchError(err => {
+        let errorMessage = '';
+        switch (err.status) {
+          case 0:
+            errorMessage = this.i18n.expiredSignin;
+            localStorage.removeItem("currentCustomer");
+            break;
+          case 401:
+            errorMessage = this.i18n.expiredSignin;
+            localStorage.removeItem("currentCustomer");
+            this._router.navigate(['/']).then(() => { window.location.reload(); });
+            break;
+          case 404:
+            errorMessage = this.i18n.link;
+            this.blockUI?.stop();
+            break;
+          case 500:
+            if (err && err.error && err.error.message == "Tài khoản không hợp lệ") {
+              errorMessage = err.error.message;
+              localStorage.removeItem("currentCustomer");
+              window.location.reload();
+            } else if (err && err.error && err.error.message) 
+              errorMessage = err.error.message;
+            else 
+              errorMessage = "Lỗi máy chủ";
+            break;
+          case 405:
+            errorMessage = this.i18n.access;
+            this.blockUI?.stop();
+            break;
+          case 501:
+            errorMessage = this.i18n.execution;
+            this.blockUI?.stop();
+            break;
+          case 504:
+            errorMessage = this.i18n.server;
+            this.blockUI?.stop();
+            break;
+          case 408:
+            errorMessage = this.i18n.browser;
+            this.blockUI?.stop();
+            break;
+          case 400:
+            errorMessage = `${err.error.message}`;
+            this.blockUI?.stop();
+            break;
+        }
+        setTimeout(() => {
+          if (errorMessage && !this.toastIsVisible) {
+            this.toastrMessage = this._toastr
+              .error(errorMessage, this.i18n.noti, {
+                timeOut: 2000,
+              });
+            this.toastrMessage.onShown.subscribe(() => this.toastIsVisible = true);
+            this.toastrMessage.onHidden.subscribe(() => this.toastIsVisible = false);
+          }
+        }, 200);
+        // throwError
+        const error = errorMessage || err.message || err.error && err.error.message || err.statusText;
+        this.blockUI?.stop();
+        return throwError(error);
+
+      })
+    ));
+  }
+  onGetI18n() {
+    this._translate.get('error-interceptor').subscribe(data => {
+      this.i18n = data;
+    })
+  }
+}
diff --git a/Phaha_Package/src/app/auth/helpers/jwt.interceptor.ts b/Phaha_Package/src/app/auth/helpers/jwt.interceptor.ts
new file mode 100644
index 0000000..5d26eba
--- /dev/null
+++ b/Phaha_Package/src/app/auth/helpers/jwt.interceptor.ts
@@ -0,0 +1,60 @@
+import { Injectable } from '@angular/core';
+import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpResponse } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { finalize } from 'rxjs/operators';
+import { environment } from "../../../environments/environment";
+import { AuthenticationService } from "../service/authentication.service";
+import { extractHostname } from './utils';
+import { BlockUI, NgBlockUI } from 'ng-block-ui';
+import { tap } from 'rxjs/operators';
+
+@Injectable()
+export class JwtInterceptor implements HttpInterceptor {
+  @BlockUI() blockUI: NgBlockUI | undefined;
+  /**
+   *
+   * @param  _authenticationService AuthenticationService
+   */
+  constructor(private _authenticationService: AuthenticationService) {
+  }
+
+  /**
+   * Add auth header with jwt if user is logged in and request is to api url
+   * @param request HttpRequest
+   * @param next HttpHandler
+   */
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    
+    let requestUrl = request.url;
+    
+    if(!requestUrl.startsWith('/package/status-paybill/'))
+      this.blockUI?.start('Đang xử lý...');
+    const currentUser = this._authenticationService.currentUserValue || JSON.parse(localStorage.getItem('currentCustomer') ?? '{}');
+    const isLoggedIn = currentUser && currentUser.jwtToken;
+
+    let langUrl = localStorage.getItem('lang');
+    const requestHostName = extractHostname(requestUrl);
+    if (requestHostName == '' || !requestHostName) {
+      requestUrl = `${environment.apiUrl}/${langUrl}${request.url}`;
+    }
+
+    const isApiUrl = requestUrl.startsWith(environment.apiUrl);
+
+    if (isLoggedIn && isApiUrl) {
+      request = request.clone({
+        url: requestUrl,
+        setHeaders: {
+          Authorization: `Bearer ${currentUser?.jwtToken}`
+        }
+      });
+    } else {
+      request = request.clone({
+        url: requestUrl
+      });
+    }
+
+    return next.handle(request).pipe(finalize(() => {
+      this.blockUI?.stop();
+    }));
+  }
+}
diff --git a/Phaha_Package/src/app/auth/helpers/utils.ts b/Phaha_Package/src/app/auth/helpers/utils.ts
new file mode 100644
index 0000000..1a0101a
--- /dev/null
+++ b/Phaha_Package/src/app/auth/helpers/utils.ts
@@ -0,0 +1,15 @@
+export function extractHostname(url: string) {
+    let hostname;
+    // find & remove protocol (http, ftp, etc.) and get hostname
+
+    if (url.indexOf('//') > -1) {
+        hostname = url.split('/')[2];
+    } else {
+        hostname = url.split('/')[0];
+    }
+
+    // find & remove "?"
+    hostname = hostname.split('?')[0];
+
+    return hostname;
+}
diff --git a/Phaha_Package/src/app/auth/models/newsPaper.ts b/Phaha_Package/src/app/auth/models/newsPaper.ts
new file mode 100644
index 0000000..3c1ecb4
--- /dev/null
+++ b/Phaha_Package/src/app/auth/models/newsPaper.ts
@@ -0,0 +1,25 @@
+export class DetailNewsPaperModel {
+    id?: number;
+    content: string  = '';
+    description: string = '';
+    editorialName: string = '';
+    image: string = '';
+    price: number = 0;
+    promotionPrice: number = 0;
+    title: string = '';
+    countCustomer: number = 0;
+    discountPercent: number = 0;
+    isTrial: boolean = false;
+    isBought: boolean = false;
+    dateCreate: string = '';
+    view: number = 0;
+    imageDataBase64: any = {};
+}
+
+export class PageModel {
+    page: number = 1;
+    pageSize: number = 6;
+    packageId: number = 0;
+    result: any = [];
+    totalRecord: number = 0;
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/auth/models/package.ts b/Phaha_Package/src/app/auth/models/package.ts
new file mode 100644
index 0000000..c6d0806
--- /dev/null
+++ b/Phaha_Package/src/app/auth/models/package.ts
@@ -0,0 +1,6 @@
+export class PageModel {
+    page: number = 1;
+    pageSize: number = 10;
+    result: any = [];
+    totalRecord: number = 0;
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/auth/models/user.ts b/Phaha_Package/src/app/auth/models/user.ts
new file mode 100644
index 0000000..c2ebad8
--- /dev/null
+++ b/Phaha_Package/src/app/auth/models/user.ts
@@ -0,0 +1,28 @@
+export class User {
+  id?: number;
+  email?: string;
+  password?: string;
+  firstName?: string;
+  username?: string;
+  fullName?: string;
+  avatar?: string;
+  token?: string;
+  jwtToken?: string;
+  image?: string;
+  isAdmin?: boolean;
+  isActive?: boolean;
+  isEnable?: boolean;
+  role: any;
+}
+export class registerUser {
+  fullName: string = '';
+  email: string = '';
+  phone: string = '';
+  address: string = '';
+  gender: string = '';
+  birthDay: any;
+  confirmPassword: string = '';
+  password: string = '';
+  enterpriseSignDate: any;
+}
+
diff --git a/Phaha_Package/src/app/auth/service/authentication.service.ts b/Phaha_Package/src/app/auth/service/authentication.service.ts
new file mode 100644
index 0000000..d4bcad7
--- /dev/null
+++ b/Phaha_Package/src/app/auth/service/authentication.service.ts
@@ -0,0 +1,79 @@
+import {Injectable} from '@angular/core';
+import {HttpClient, HttpParams} from '@angular/common/http';
+import {BehaviorSubject, Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
+import {User} from "../models/user";
+
+@Injectable({providedIn: 'root'})
+export class AuthenticationService {
+  public currentUser: Observable<User>;
+  private currentUserSubject: BehaviorSubject<User>;
+
+  /**
+   * Constructor
+   * @param _http HttpClient
+   */
+  constructor(
+    private _http: HttpClient,
+  ) {
+    // @ts-ignore
+    this.currentUserSubject = new BehaviorSubject<User>(JSON.parse(localStorage.getItem('currentCustomer')));
+    this.currentUser = this.currentUserSubject.asObservable();
+  }
+
+  /**
+   * Get current user
+   */
+  public get currentUserValue(): User {
+    return this.currentUserSubject.value;
+  }
+
+  /**
+   *  Confirms if user is admin
+   */
+
+  /**
+   * User login
+   *
+   * @param username username
+   * @param password password
+   * @returns user
+   */
+  loginAccount(username: string, password: string) {
+    return this._http
+      .post<any>(`/api-user/login`, {username, password})
+      .pipe(
+        map(user => {
+          // login successful if there's a jwt token in the response
+          if (user) {
+            if (user.jwtToken) {
+              // store user details and jwt token in local storage to keep user logged in between page refreshes
+              localStorage.setItem('currentCustomer', JSON.stringify(user));
+              // notify
+              this.currentUserSubject.next(user);
+            } else {
+              sessionStorage.setItem('currentCustomer', JSON.stringify(user));
+            }
+          }
+
+          return user;
+        })
+      );
+  }
+
+  forgotPassword(email: string) {
+    return this._http
+      .post<any>(`/user/forgot-password`, {email})
+      .pipe();
+  }
+
+  /**
+   * User logout
+   *
+   */
+  logout() {
+    localStorage.removeItem('currentCustomer');
+    // @ts-ignore
+    this.currentUserSubject.next(null);
+  }
+}
diff --git a/Phaha_Package/src/app/book/book-bestsellers-item/book-bestsellers-item.component.html b/Phaha_Package/src/app/book/book-bestsellers-item/book-bestsellers-item.component.html
new file mode 100644
index 0000000..734209c
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-bestsellers-item/book-bestsellers-item.component.html
@@ -0,0 +1 @@
+<p>book-bestsellers-item works!</p>
diff --git a/Phaha_Package/src/app/book/book-bestsellers-item/book-bestsellers-item.component.scss b/Phaha_Package/src/app/book/book-bestsellers-item/book-bestsellers-item.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/Phaha_Package/src/app/book/book-bestsellers-item/book-bestsellers-item.component.ts b/Phaha_Package/src/app/book/book-bestsellers-item/book-bestsellers-item.component.ts
new file mode 100644
index 0000000..0c5a9d0
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-bestsellers-item/book-bestsellers-item.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-book-bestsellers-item',
+  templateUrl: './book-bestsellers-item.component.html',
+  styleUrls: ['./book-bestsellers-item.component.scss']
+})
+export class BookBestsellersItemComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/book/book-bestsellers/book-bestsellers.component.html b/Phaha_Package/src/app/book/book-bestsellers/book-bestsellers.component.html
new file mode 100644
index 0000000..b5c2374
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-bestsellers/book-bestsellers.component.html
@@ -0,0 +1,62 @@
+<div class="bestsellers">
+    <div class="title-section text-uppercase">
+        <a href="#">Sách bán chạy</a>
+    </div>
+    <div class="book-swiper">
+        <swiper 
+            [slidesPerView]="1" [spaceBetween]="30" [slidesPerGroup]="1" 
+            [loop]="false" [loopFillGroupWithBlank]="true" [pagination]="false" 
+            [navigation]="true" class="mySwiper" 
+            [breakpoints]="
+            {
+                '576': {
+                    slidesPerView: 1,
+                    spaceBetween: 30
+                },
+                '992': {
+                    slidesPerView: 2,
+                    spaceBetween: 30
+                },
+                '1200': {
+                    slidesPerView: 3,
+                    spaceBetween: 30
+                }
+            }
+            "
+        >
+            <ng-template swiperSlide *ngFor="let item of fakeArray; let index = index">
+                <div class="book-item">
+                    <div class="item-details">
+                        <div class="item-img">
+                            <img class="book-cover" routerLink="/chi-tiet-sach" [queryParams]="{ tab: '1'}"
+                                 src="../../../assets/images/book/book-1.jpg" alt="">
+                        </div>
+                        <div class="item-name text-uppercase">
+                            <a routerLink="/chi-tiet-sach" [queryParams]="{ tab: '1'}">
+                                bước chậm lại giữa thế gian
+                            </a>
+                        </div>
+                        <div class="author-name text-capitalize">
+                            <a href="/">
+                                hae min
+                            </a>
+                        </div>
+                        <div class="item-prices d-flex">
+                            <div class="original-price">400,000đ</div>
+                            <div class="sale-price">320,000đ</div>
+                        </div>
+                    </div>
+                    <button type="button" class="btn btn-add">
+                        <i class="bi bi-cart-plus"></i>
+                        giỏ hàng
+                    </button>
+                </div>
+            </ng-template>
+        </swiper>
+    </div>
+    <div class="see-more text-center">
+        <span>
+            <a routerLink="/the-loai/chu-de-sach">xem tất cả</a>
+        </span>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/book/book-bestsellers/book-bestsellers.component.scss b/Phaha_Package/src/app/book/book-bestsellers/book-bestsellers.component.scss
new file mode 100644
index 0000000..56d8673
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-bestsellers/book-bestsellers.component.scss
@@ -0,0 +1,195 @@
+@import "~swiper/css";
+@import "~swiper/css/pagination";
+@import "~swiper/css/navigation";
+
+app-book-bestsellers {
+    a {
+        text-decoration: none;
+    }
+    
+    .bestsellers {
+        .title-section {
+            text-align: center;
+            margin-bottom: 32px;
+            a {
+                font-size: 20px;
+                color: #222;
+                font-weight: 600;
+            }
+        }
+
+        .swiper {
+            width: 100%;
+            height: 100%;
+        }
+
+        .swiper-slide {
+            text-align: center;
+            background: #fff;
+            border-radius: 10px;
+            box-shadow: inset rgba(10, 37, 64, 0.3) 0px -2px 6px 0px;
+
+            /* Center slide text vertically */
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: -webkit-flex;
+            display: flex;
+            -webkit-box-pack: center;
+            -ms-flex-pack: center;
+            -webkit-justify-content: center;
+            justify-content: center;
+            -webkit-box-align: center;
+            -ms-flex-align: center;
+            -webkit-align-items: center;
+            align-items: center;
+        }
+
+        .swiper-slide img {
+            display: block;
+            height: 100%;
+        }
+
+        .book-swiper { 
+            .swiper {
+                padding: 0 60px;
+            }
+
+            .swiper-button-prev, .swiper-button-next {
+                background-position: center;
+                background-color: #9a9a9a;
+                border-radius: 40px;
+                padding: 30px 20px;
+
+                &:hover {
+                    background: #FCAF17;
+                }
+            }
+    
+            .swiper-button-prev {
+                left: 0px;
+            }
+
+            .swiper-button-next {
+                right: 0px;
+            }
+    
+            .swiper-button-next:after, .swiper-button-prev:after {
+                font-family: swiper-icons;
+                font-size: 24px;
+                text-transform: none !important;
+                letter-spacing: 0;
+                font-variant: initial;
+                line-height: 1;
+                color: #fff;
+            }
+    
+            .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
+                opacity: .35;
+                cursor: auto;
+                pointer-events: none;
+            }
+
+            .book-item {
+                padding: 30px 40px;
+                width: 100%;
+
+                .item-details {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                }
+
+                .item-img {
+                    height: 280px;
+                    margin-bottom: 24px;
+                }
+
+                img.book-cover {
+                    border-radius: 0 10px 10px 0;
+                    box-shadow: 4px 0 4px #ccc;
+                    cursor: pointer;
+                    transition: transform 0.6s;
+                    &:hover {
+                        transform: scale(1.1);
+                    }
+                }
+
+                .item-name {
+                    a {
+                        font-size: 15px;
+                        font-weight: 500;
+                        color: #222;
+
+                        &:hover {
+                            color: #E09500;
+                            text-decoration: underline;
+                        }
+                    }
+                }
+
+                .author-name {
+                    padding: 6px 0;
+                    a {
+                        color: #9a9a9a;
+                        font-size: 14px;
+                        font-weight: 500;
+
+                        &:hover {
+                            color: #E09500;
+                            text-decoration: underline;
+                        }
+                    }
+                }
+
+                .item-prices {
+                    .original-price, .sale-price {
+                        font-size: 16px;
+                    }
+                    .original-price {
+                        text-decoration: line-through;
+                        margin-right: 10px;
+                        color: #9a9a9a;
+                    }
+                    .sale-price {
+                        font-weight: 500;
+                    }
+                }
+                .btn-add {
+                    width: 100%;
+                    background-color: #ffe7b8;
+                    color: #e09500;
+                    margin-top: 24px;
+                    padding: 8px 0;
+                    text-transform: uppercase;
+                    font-weight: 500;
+                    border-radius: 24px;
+                    i {
+                        font-size: 18px;
+                        margin-right: 9.75px;
+                    }
+                    &:hover {
+                        border: 1px solid #e09500
+                    }
+                }
+            }
+        }
+
+        .see-more {
+            margin-top: 48px;
+
+            a {
+                padding: 14px 24px;
+                background-color: #222;
+                border-radius: 6px;
+                color: #fff !important;
+                text-transform: uppercase;
+                font-weight: 600;
+                font-size: 12px;
+
+                &:hover {
+                    background-color: #E09500;
+                }
+            }
+        }
+    }
+}
diff --git a/Phaha_Package/src/app/book/book-bestsellers/book-bestsellers.component.ts b/Phaha_Package/src/app/book/book-bestsellers/book-bestsellers.component.ts
new file mode 100644
index 0000000..8811867
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-bestsellers/book-bestsellers.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-book-bestsellers',
+  templateUrl: './book-bestsellers.component.html',
+  styleUrls: ['./book-bestsellers.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class BookBestsellersComponent implements OnInit {
+  fakeArray = new Array(10);
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/book/book-bestsellers/book-bestsellers.module.ts b/Phaha_Package/src/app/book/book-bestsellers/book-bestsellers.module.ts
new file mode 100644
index 0000000..e1900f4
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-bestsellers/book-bestsellers.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SwiperModule } from 'swiper/angular';
+import { BrowserModule } from '@angular/platform-browser';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    SwiperModule,
+    BrowserModule
+  ]
+})
+export class BookBestsellersModule { }
diff --git a/Phaha_Package/src/app/book/book-cart/book-cart.component.html b/Phaha_Package/src/app/book/book-cart/book-cart.component.html
new file mode 100644
index 0000000..6116e04
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-cart/book-cart.component.html
@@ -0,0 +1 @@
+<p>book-cart works!</p>
diff --git a/Phaha_Package/src/app/book/book-cart/book-cart.component.scss b/Phaha_Package/src/app/book/book-cart/book-cart.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/Phaha_Package/src/app/book/book-cart/book-cart.component.spec.ts b/Phaha_Package/src/app/book/book-cart/book-cart.component.spec.ts
new file mode 100644
index 0000000..fcc141b
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-cart/book-cart.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BookCartComponent } from './book-cart.component';
+
+describe('BookCartComponent', () => {
+  let component: BookCartComponent;
+  let fixture: ComponentFixture<BookCartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BookCartComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(BookCartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Phaha_Package/src/app/book/book-cart/book-cart.component.ts b/Phaha_Package/src/app/book/book-cart/book-cart.component.ts
new file mode 100644
index 0000000..0424ece
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-cart/book-cart.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-book-cart',
+  templateUrl: './book-cart.component.html',
+  styleUrls: ['./book-cart.component.scss']
+})
+export class BookCartComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/book/book-checkout/book-checkout.component.html b/Phaha_Package/src/app/book/book-checkout/book-checkout.component.html
new file mode 100644
index 0000000..ea0e4da
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-checkout/book-checkout.component.html
@@ -0,0 +1 @@
+<p>book-checkout works!</p>
diff --git a/Phaha_Package/src/app/book/book-checkout/book-checkout.component.scss b/Phaha_Package/src/app/book/book-checkout/book-checkout.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/Phaha_Package/src/app/book/book-checkout/book-checkout.component.spec.ts b/Phaha_Package/src/app/book/book-checkout/book-checkout.component.spec.ts
new file mode 100644
index 0000000..4488802
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-checkout/book-checkout.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BookCheckoutComponent } from './book-checkout.component';
+
+describe('BookCheckoutComponent', () => {
+  let component: BookCheckoutComponent;
+  let fixture: ComponentFixture<BookCheckoutComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BookCheckoutComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(BookCheckoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Phaha_Package/src/app/book/book-checkout/book-checkout.component.ts b/Phaha_Package/src/app/book/book-checkout/book-checkout.component.ts
new file mode 100644
index 0000000..53bcef7
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-checkout/book-checkout.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-book-checkout',
+  templateUrl: './book-checkout.component.html',
+  styleUrls: ['./book-checkout.component.scss']
+})
+export class BookCheckoutComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/book/book-details/book-details.component.html b/Phaha_Package/src/app/book/book-details/book-details.component.html
new file mode 100644
index 0000000..4f0b23f
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-details/book-details.component.html
@@ -0,0 +1,225 @@
+<block-ui>
+    <div class="container py-4">
+        <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a routerLink="/">{{'breadcrumb.home' | translate}}</a></li>
+                <li class="breadcrumb-item active" aria-current="page">Chi tiết sách</li>
+            </ol>
+        </nav>
+        <div class="book-details">
+            <div class="content-body">
+                <div class="book-title">
+                    Bước chậm lại giữa thế gian vội 
+                </div>
+                <div class="row">
+                    <div class="col-lg-6 col-md-12">
+                        <div class="book-cover">
+                            <div class="book-cover-swiper">
+                                <swiper 
+                                    [slidesPerView]="1" [spaceBetween]="0" [slidesPerGroup]="1" 
+                                    [loop]="false" [loopFillGroupWithBlank]="true" [pagination]="false" 
+                                    [navigation]="true" class="mySwiper" 
+                                    [breakpoints]="
+                                    {
+                                        '640': {
+                                            slidesPerView: 1,
+                                            spaceBetween: 0
+                                        },
+                                        '768': {
+                                            slidesPerView: 1,
+                                            spaceBetween: 0
+                                        },
+                                        '1024': {
+                                            slidesPerView: 1,
+                                            spaceBetween: 0
+                                        }
+                                    }
+                                    "
+                                >
+                                    <ng-template swiperSlide *ngFor="let item of fakeArray; let index = index">
+                                        <div class="book-item">
+                                            <div class="item-details">
+                                                <div class="item-img">
+                                                    <img class="book-cover" src="../../../assets/images/book/book-1.jpg" alt="">
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </ng-template>
+                                </swiper>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-6 col-md-12">
+                        <div class="book-info">
+                            <div class="row">
+                                <div class="col-lg-4">
+                                    <div class="info-title">Giá tiền</div>
+                                    <div class="prices">
+                                        <div class="sale">98,000đ</div>
+                                        <div class="origin">126,000đ</div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-5">
+                                    <div class="info-title">Tác giả</div>
+                                    <div class="author">
+                                        <a href="/">hae min</a>
+                                    </div>
+                                </div>
+                                <div class="col-lg-3">
+                                    <div class="info-title">Tình trạng</div>
+                                    <div class="status">Còn hàng</div>
+                                </div>
+                            </div>
+                            <div class="quantity my-5">
+                                <div class="info-title">Số lượng</div>
+                                <div class="form-check-group">
+                                    <div class="form-check-inline">
+                                        <button class="btn btn-quantity" (click)="minus()"><i class="fa fa-minus"></i></button>
+                                    </div>
+                                    <div class="form-check-inline">
+                                        <input type="text" class="number-count form-control" [(ngModel)]="inputnumber">
+                                    </div>
+                                    <div class="form-check-inline">
+                                        <button class="btn btn-quantity" (click)="plus()"><i class="fa fa-plus"></i></button>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="mb-5 row">
+                                <div class="btn-buy-group col-lg-6 col-md-12">
+                                    <button class="btn btn-buy">Mua ngay</button>
+                                </div>
+                                <div class="btn-buy-group col-lg-6 col-md-12">
+                                    <button class="btn btn-add">Thêm vào giỏ hàng</button>
+                                </div>
+                            </div>
+                            <hr>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="book-details">
+            <div class="content-body">
+                <ul [(activeId)]="activeTab" ngbNav #nav="ngbNav" class="nav-pills" (navChange)="onChangeTab($event)">
+                    <li [ngbNavItem]="1">
+                        <a ngbNavLink>Chi tiết sách</a>
+                        <ng-template ngbNavContent>
+                            <div class="row">
+                                <div class="col-md-4 col-sm-12">
+                                    <table class="table">
+                                        <tbody>
+                                            <tr>
+                                                <th class="table-title">Mã hàng</th>
+                                                <th>8935235217737</th>
+                                            </tr>
+                                            <tr>
+                                                <th class="table-title">Tên nhà cung cấp</th>
+                                                <th>
+                                                    <a href="">
+                                                        Nhã Nam
+                                                    </a>
+                                                </th>
+                                            </tr>
+                                            <tr>
+                                                <th class="table-title">Tác giả</th>
+                                                <th>
+                                                    <a href="">
+                                                        Hae Min
+                                                    </a>
+                                                </th>
+                                            </tr>
+                                            <tr>
+                                                <th class="table-title">Người dịch</th>
+                                                <th>Nguyễn Việt Tú Anh</th>
+                                            </tr>
+                                            <tr>
+                                                <th class="table-title">Nhà xuất bản</th>
+                                                <th>
+                                                    <a href="">
+                                                        NXB Hội Nhà Văn
+                                                    </a>
+                                                </th>
+                                            </tr>
+                                            <tr>
+                                                <th class="table-title">Năm xuất bản</th>
+                                                <th>2018</th>
+                                            </tr>
+                                            <tr>
+                                                <th class="table-title">Ngôn ngữ</th>
+                                                <th>Tiếng Việt</th>
+                                            </tr>
+                                            <tr>
+                                                <th class="table-title">Kích thước</th>
+                                                <th>14 x 20.5 (cm)</th>
+                                            </tr>
+                                            <tr>
+                                                <th class="table-title">Số trang</th>
+                                                <th>254</th>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                                <div class="col-md-8 col-sm-12">
+                                    <div class="book-description">
+                                        <div class="description-title">Nội dung</div>
+                                        <div class="description-content">
+                                            Chen vai thích cánh để có một chỗ bám trên xe buýt giờ đi làm, 
+                                            nhích từng xentimét bánh xe trên đường lúc tan sở, 
+                                            quay cuồng với thi cử và tiến độ công việc, 
+                                            lu bù vướng mắc trong những mối quan hệ cả thân lẫn sơ… 
+                                            bạn có luôn cảm thấy thế gian xung quanh mình đang xoay chuyển quá vội vàng?<br>
+                                            Nếu có thể, hãy tạm dừng một bước.<br>
+                                            Để tự hỏi, là do thế gian này vội vàng hay do chính tâm trí bạn đang quá bận rộn? 
+                                            Để cầm cuốn sách nhỏ dung dị mà lắng đọng này lên, chậm rãi lật giở từng trang, 
+                                            thong thả khám phá những điều mà chỉ khi bước chậm lại mới có thể thấu rõ: về các mối quan hệ, 
+                                            về chính bản thân mình, về những trăn trở trước cuộc đời và nhân thế, 
+                                            về bao điều lý trí rất hiểu nhưng trái tim chưa cách nào nghe theo.
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                        </ng-template>
+                    </li>
+                    <li [ngbNavItem]="2">
+                        <a ngbNavLink>Về tác giả</a>
+                        <ng-template ngbNavContent>
+                            <div class="row">
+                                <div class="col-md-2 col-sm-12">
+                                    <div class="author-ava">
+                                        <img src="../../../assets/images/book/author-img.jpeg" alt="">
+                                    </div>
+                                </div>
+                                <div class="col-md-10 col-sm-12">
+                                    <div class="author-intro">
+                                        Nhà văn Hae Min là một tác giả viết sách, một diễn giả, đồng thời là chuyên gia huấn luyện cấp lãnh đạo. 
+                                        Cô được mệnh danh là “nhà đấu tranh cho người hướng nội”. 
+                                        Điều cô luôn hướng đến là giúp các tổ chức nhìn nhận đúng về người hướng nội và coi trọng họ, 
+                                        và giúp những cá nhân hướng nội tự tin đảm nhiệm vị trí lãnh đạo và các vai trò có tầm ảnh hưởng.<br>
+                                        Cô trở nên am hiểu về người hướng nội trong thời gian làm giám đốc chương trình của 
+                                        chính phủ liên bang và chuyên gia huấn luyện trong lĩnh vực phát triển sự nghiệp. 
+                                        Cô cũng đảm nhiệm vai trò cố vấn học tập và phát triển trong các tổ chức hàng đầu như 
+                                        GE, AT&T, NASA, Turner Broadcasting, và CDC. <br>
+                                        Quyển sách đầu tiên của cô về đề tài người hướng nội, 
+                                        “The Introverted Leader: Building on Your Quiet Strength” 
+                                        (tạm dịch “Người lãnh đạo hướng nội: Phát huy thế mạnh trầm tĩnh của bạn”), 
+                                        thu hút độc giả ở khắp nơi và được dịch ra nhiều thứ tiếng.
+                                    </div>
+                                </div>
+                            </div>
+                        </ng-template>
+                    </li>
+                    <li [ngbNavItem]="3">
+                        <a ngbNavLink>Đánh giá & Bình luận</a>
+                        <ng-template ngbNavContent>
+                            Coming soon! 
+                        </ng-template>
+                    </li>
+                </ul>
+                <div [ngbNavOutlet]="nav"></div>
+            </div>
+        </div>
+
+        <app-book-related></app-book-related>
+    </div>
+</block-ui>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/book/book-details/book-details.component.scss b/Phaha_Package/src/app/book/book-details/book-details.component.scss
new file mode 100644
index 0000000..93bb7fd
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-details/book-details.component.scss
@@ -0,0 +1,269 @@
+@import "~swiper/css";
+@import "~swiper/css/pagination";
+@import "~swiper/css/navigation";
+
+app-book-details {
+    a {
+        text-decoration: none;
+        color: #000;
+    }
+
+    .book-details {
+        background-color: #fff;
+        border-radius: 20px;
+        margin-bottom: 32px;
+        
+        .content-body {
+            padding: 32px;
+
+            .book-title {
+                font-size: 24px;
+                font-weight: 600;
+                text-transform: uppercase;
+                margin-bottom: 32px;
+                text-align: center;
+            }
+
+            .book-cover {
+                background-color: #fff5e2;
+                border-radius: 20px;
+                
+                .swiper {
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 100px 0;
+                }
+            
+                .swiper-slide {
+                    padding: 32px 0;
+                    /* Center slide text vertically */
+                    display: -webkit-box;
+                    display: -ms-flexbox;
+                    display: -webkit-flex;
+                    display: flex;
+                    -webkit-box-pack: center;
+                    -ms-flex-pack: center;
+                    -webkit-justify-content: center;
+                    justify-content: center;
+                    -webkit-box-align: center;
+                    -ms-flex-align: center;
+                    -webkit-align-items: center;
+                    align-items: center;
+                }
+            
+                .swiper-slide img {
+                    display: block;
+                    height: 100%;
+                }
+            
+                .book-cover-swiper { 
+                    .swiper {
+                        padding: 0 !important;
+                    }
+
+                    .swiper-button-prev, .swiper-button-next {
+                        background-position: center;
+                        background-color: #9a9a9a;
+                        border-radius: 40px;
+                        padding: 30px 20px;
+        
+                        &:hover {
+                            background: #FCAF17;
+                        }
+                    }
+            
+                    .swiper-button-prev {
+                        left: 32px;
+                    }
+        
+                    .swiper-button-next {
+                        right: 32px;
+                    }
+            
+                    .swiper-button-next:after, .swiper-button-prev:after {
+                        font-family: swiper-icons;
+                        font-size: 24px;
+                        text-transform: none !important;
+                        letter-spacing: 0;
+                        font-variant: initial;
+                        line-height: 1;
+                        color: #fff;
+                    }
+            
+                    .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
+                        opacity: .35;
+                        cursor: auto;
+                        pointer-events: none;
+                    }
+            
+                    .book-item {
+            
+                        .item-details {
+                            display: flex;
+                            flex-direction: column;
+                            align-items: center;
+                
+                            img.book-cover {
+                                max-width: 100%;
+                                border-radius: 0 10px 10px 0;
+                                box-shadow: 4px 0 4px rgb(180, 180, 180);
+                            }
+                        }
+                    }
+                }
+            }
+
+            .book-info {
+                padding-left: 12px;
+
+                .info-title {
+                    font-size: 14px;
+                    font-weight: 600;
+                    color: #9a9a9a;
+                    margin-bottom: 4px;
+                }
+
+                .prices {
+                    .sale {
+                        font-size: 32px;
+                        font-weight: 600;
+                        color: #E09500;
+                    }
+                    .origin {
+                        font-size: 18px;
+                        text-decoration: line-through;
+                        color: #ccc;
+                        font-weight: 500;
+                    }
+                }
+                .author {
+                    text-transform: capitalize;
+                    a {
+                        font-size: 18px;
+                        font-weight: 600;
+                        &:hover {
+                            color: #E09500;
+                        }
+                    }
+                }
+                .status {
+                    font-size: 18px;
+                    font-weight: 600;
+                    color: #28A745;
+                }
+                .quantity {
+                    .form-check-group {
+                        display: flex;
+                        align-items: center;
+                    }
+                    .form-check-inline {
+                        margin-right: 2px;
+                    }
+                    .number-count {
+                        width: 52px;
+                        border: 1px solid #9a9a9a;
+                        border-radius: 6px;
+                    }
+                    .btn-quantity {
+                        background-color: #9a9a9a; 
+                        border: 1px solid #9a9a9a;
+                        color: #fff;
+                        &:hover {
+                            background-color: #FCAF17; 
+                            border: 1px solid #FCAF17;
+                            color: #222;
+                        }
+                    }
+                }
+                .btn-buy-group {
+                    .btn-buy, .btn-add {
+                        width: 100%;
+                        padding: 14px 24px;
+                        font-size: 12;
+                        font-weight: 600;
+                        text-transform: uppercase;
+                        border-radius: 6px;
+                    }
+                    .btn-buy {
+                        background-color: #FCAF17;
+                        border: 1px solid #FCAF17;
+                        color: #fff;
+                        &:hover {
+                            background-color: #222;
+                            border: 1px solid #222;
+                            color: #fff;
+                        }
+                    }
+                    .btn-add {
+                        border: 1px solid #FCAF17;
+                        &:hover {
+                            background-color: #222;
+                            border: 1px solid #222;
+                            color: #fff;
+                        }
+                    }
+                }
+            }
+
+            .nav-pills .nav-link.active {
+                border-bottom: 2px solid #FCAF17;
+                background-color: #fff;
+                border-radius: 0;
+                color: #E09500;
+            }
+            .nav-pills {
+                border-bottom: 1px solid #ccc;
+            }
+            .nav-link {
+                color: #222;
+                padding: 0 24px 14px 24px;
+                font-weight: 500;
+            }
+            .tab-pane {
+                margin-top: 14px;
+            }
+            table {
+                // width: 40%;
+                thead, tbody, tfoot, tr, td, th {
+                    border: none;
+                    font-weight: normal;
+                    color: #222;
+                }
+                .table-title {
+                    font-weight: 600;
+                }
+                a {
+                    color: #E09500;
+                    &:hover {
+                        text-decoration: underline;
+                    }
+                }
+            }
+            .book-description {
+                .description-title {
+                    font-weight: 600;
+                    margin-bottom: 10px;
+                }
+                .description-content {
+                    text-align: justify;
+                    font-size: 14px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    -webkit-line-clamp: 12;
+                    display: -webkit-box;
+                    -webkit-box-orient: vertical;
+                }
+            }
+            .author-ava {
+                img {
+                    max-width: 100%;
+                    object-fit: cover;
+                    border-radius: 10px;
+                }
+            }
+            .author-intro {
+                text-align: justify;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/book/book-details/book-details.component.ts b/Phaha_Package/src/app/book/book-details/book-details.component.ts
new file mode 100644
index 0000000..c37d9b0
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-details/book-details.component.ts
@@ -0,0 +1,43 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+  selector: 'app-book-details',
+  templateUrl: './book-details.component.html',
+  styleUrls: ['./book-details.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class BookDetailsComponent implements OnInit {
+  fakeArray = new Array(10);
+  inputnumber = 0;
+  public activeTab: number = 1;
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private router: Router
+  ) {
+    this.activatedRoute.queryParams.subscribe((params: any) => {
+      this.activeTab = parseInt(params['tab']);
+    });
+  }
+
+  plus() {
+    this.inputnumber = this.inputnumber + 1;
+  }
+
+  minus() {
+    if(this.inputnumber != 0) { this.inputnumber = this.inputnumber - 1 }
+  }
+
+  onChangeTab($event: any) {
+    this.activeTab = $event.nextId;
+    this.router.navigate(
+      ['/chi-tiet-sach'],
+      { queryParams: { tab: this.activeTab } }
+    );
+  }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/book/book-details/book-details.module.ts b/Phaha_Package/src/app/book/book-details/book-details.module.ts
new file mode 100644
index 0000000..e63146d
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-details/book-details.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+  ]
+})
+export class BookDetailsModule { }
diff --git a/Phaha_Package/src/app/book/book-list-by-category/book-list-by-category.component.html b/Phaha_Package/src/app/book/book-list-by-category/book-list-by-category.component.html
new file mode 100644
index 0000000..eb888ba
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-list-by-category/book-list-by-category.component.html
@@ -0,0 +1,3 @@
+<block-ui>
+    
+</block-ui>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/book/book-list-by-category/book-list-by-category.component.scss b/Phaha_Package/src/app/book/book-list-by-category/book-list-by-category.component.scss
new file mode 100644
index 0000000..c721c7c
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-list-by-category/book-list-by-category.component.scss
@@ -0,0 +1,5 @@
+app-book-list-by-category {
+    
+}
+  
+  
\ No newline at end of file
diff --git a/Phaha_Package/src/app/book/book-list-by-category/book-list-by-category.component.ts b/Phaha_Package/src/app/book/book-list-by-category/book-list-by-category.component.ts
new file mode 100644
index 0000000..538534d
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-list-by-category/book-list-by-category.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-book-list-by-category',
+  templateUrl: './book-list-by-category.component.html',
+  styleUrls: ['./book-list-by-category.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class BookListByCategoryComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/book/book-list-by-category/book-list-by-category.module.ts b/Phaha_Package/src/app/book/book-list-by-category/book-list-by-category.module.ts
new file mode 100644
index 0000000..66615c7
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-list-by-category/book-list-by-category.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class BookListByCategoryModule { }
diff --git a/Phaha_Package/src/app/book/book-new-arrivals-item/book-new-arrivals-item.component.html b/Phaha_Package/src/app/book/book-new-arrivals-item/book-new-arrivals-item.component.html
new file mode 100644
index 0000000..42ba38f
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-new-arrivals-item/book-new-arrivals-item.component.html
@@ -0,0 +1 @@
+<p>book-new-arrivals-item works!</p>
diff --git a/Phaha_Package/src/app/book/book-new-arrivals-item/book-new-arrivals-item.component.scss b/Phaha_Package/src/app/book/book-new-arrivals-item/book-new-arrivals-item.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/Phaha_Package/src/app/book/book-new-arrivals-item/book-new-arrivals-item.component.ts b/Phaha_Package/src/app/book/book-new-arrivals-item/book-new-arrivals-item.component.ts
new file mode 100644
index 0000000..d56ce65
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-new-arrivals-item/book-new-arrivals-item.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-book-new-arrivals-item',
+  templateUrl: './book-new-arrivals-item.component.html',
+  styleUrls: ['./book-new-arrivals-item.component.scss']
+})
+export class BookNewArrivalsItemComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/book/book-new-arrivals/book-new-arrivals.component.html b/Phaha_Package/src/app/book/book-new-arrivals/book-new-arrivals.component.html
new file mode 100644
index 0000000..837f88d
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-new-arrivals/book-new-arrivals.component.html
@@ -0,0 +1,62 @@
+<div class="new-arrivals">
+    <div class="title-section text-uppercase">
+        <a href="#">Sách mới</a>
+    </div>
+    <div class="book-swiper">
+        <swiper 
+            [slidesPerView]="1" [spaceBetween]="30" [slidesPerGroup]="1" 
+            [loop]="false" [loopFillGroupWithBlank]="true" [pagination]="false" 
+            [navigation]="true" class="mySwiper" 
+            [breakpoints]="
+            {
+                '640': {
+                    slidesPerView: 1,
+                    spaceBetween: 30
+                },
+                '768': {
+                    slidesPerView: 2,
+                    spaceBetween: 30
+                },
+                '1024': {
+                    slidesPerView: 3,
+                    spaceBetween: 30
+                }
+            }
+            "
+        >
+            <ng-template swiperSlide *ngFor="let item of fakeArray; let index = index">
+                <div class="book-item">
+                    <div class="item-details">
+                        <div class="item-img">
+                            <img class="book-cover" src="../../../assets/images/book/book-2.jpeg" alt="">
+                        </div>
+                        <div class="item-name text-uppercase">
+                            hai số phận
+                        </div>
+                        <div class="author-name text-capitalize">
+                            jeffrey archer
+                        </div>
+                        <div class="item-prices d-flex">
+                            <div class="sale-price">180,000đ</div>
+                        </div>
+                    </div>
+                    <div class="group-button d-flex justify-content-evenly">
+                        <button type="button" class="btn btn-discover" routerLink="/chi-tiet-sach" [queryParams]="{ tab: '1'}">
+                            <i class="bi bi-eye"></i>
+                            chi tiết
+                        </button>
+                        <button type="button" class="btn btn-add">
+                            <i class="bi bi-cart-plus"></i>
+                            giỏ hàng
+                        </button>
+                    </div>
+                </div>
+            </ng-template>
+        </swiper>
+    </div>
+    <div class="see-more text-center">
+        <span>
+            <a href="#">xem tất cả</a>
+        </span>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/book/book-new-arrivals/book-new-arrivals.component.scss b/Phaha_Package/src/app/book/book-new-arrivals/book-new-arrivals.component.scss
new file mode 100644
index 0000000..ab7824a
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-new-arrivals/book-new-arrivals.component.scss
@@ -0,0 +1,197 @@
+@import "~swiper/css";
+@import "~swiper/css/pagination";
+@import "~swiper/css/navigation";
+
+app-book-new-arrivals {
+    a {
+        text-decoration: none;
+    }
+    
+    .new-arrivals {
+        .title-section {
+            text-align: center;
+            margin-bottom: 32px;
+            a {
+                font-size: 20px;
+                color: #222;
+                font-weight: 600;
+            }
+        }
+
+        .swiper {
+            width: 100%;
+            height: 100%;
+        }
+
+        .swiper-slide {
+            text-align: center;
+            background: #fff;
+            border-radius: 10px;
+            box-shadow: inset rgba(10, 37, 64, 0.3) 0px -2px 6px 0px;
+
+            /* Center slide text vertically */
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: -webkit-flex;
+            display: flex;
+            -webkit-box-pack: center;
+            -ms-flex-pack: center;
+            -webkit-justify-content: center;
+            justify-content: center;
+            -webkit-box-align: center;
+            -ms-flex-align: center;
+            -webkit-align-items: center;
+            align-items: center;
+        }
+
+        .swiper-slide img {
+            display: block;
+            height: 100%;
+        }
+
+        .book-swiper { 
+            .swiper {
+                padding: 0 60px;
+            }
+
+            .swiper-button-prev, .swiper-button-next {
+                background-position: center;
+                background-color: #9a9a9a;
+                border-radius: 40px;
+                padding: 30px 20px;
+
+                &:hover {
+                    background: #FCAF17;
+                }
+            }
+    
+            .swiper-button-prev {
+                left: 0px;
+            }
+
+            .swiper-button-next {
+                right: 0px;
+            }
+    
+            .swiper-button-next:after, .swiper-button-prev:after {
+                font-family: swiper-icons;
+                font-size: 24px;
+                text-transform: none !important;
+                letter-spacing: 0;
+                font-variant: initial;
+                line-height: 1;
+                color: #fff;
+            }
+    
+            .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
+                opacity: .35;
+                cursor: auto;
+                pointer-events: none;
+            }
+
+            .book-item {
+                padding: 30px 40px;
+                width: 100%;
+
+                .item-details {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                }
+
+                .item-img {
+                    height: 280px;
+                    margin-bottom: 24px;
+                }
+
+                img.book-cover {
+                    border-radius: 0 10px 10px 0;
+                    box-shadow: 4px 0 4px #ccc;
+                    cursor: pointer;
+                    transition: transform 0.6s;
+                    &:hover {
+                        transform: scale(1.1);
+                    }
+                }
+
+                .item-name {
+                    a {
+                        font-size: 15px;
+                        font-weight: 500;
+                        color: #222;
+
+                        &:hover {
+                            color: #E09500;
+                            text-decoration: underline;
+                        }
+                    }
+                }
+
+                .author-name {
+                    padding: 6px 0;
+                    a {
+                        color: #9a9a9a;
+                        font-size: 14px;
+                        font-weight: 500;
+
+                        &:hover {
+                            color: #E09500;
+                            text-decoration: underline;
+                        }
+                    }
+                }
+
+                .item-prices {
+                    .original-price, .sale-price {
+                        font-size: 16px;
+                        font-weight: 500;
+                    }
+                    .original-price {
+                        text-decoration: line-through;
+                        margin-right: 10px;
+                        color: #9a9a9a;
+                    }
+                    .sale-price {
+                        font-weight: 500;
+                    }
+                }
+
+                .btn-add {
+                    width: 100%;
+                    background-color: #ffe7b8;
+                    color: #e09500;
+                    margin-top: 24px;
+                    padding: 8px 0;
+                    text-transform: uppercase;
+                    font-weight: 500;
+                    border-radius: 24px;
+                    i {
+                        font-size: 18px;
+                        margin-right: 9.75px;
+                    }
+                    &:hover {
+                        border: 1px solid #e09500
+                    }
+                }
+            }
+        }
+
+        .see-more {
+            margin-top: 48px;
+
+            a {
+                padding: 14px 28px;
+                background-color: #222;
+                border-radius: 6px;
+                color: #fff !important;
+                text-transform: uppercase;
+                font-weight: 600;
+                font-size: 12px;
+
+                &:hover {
+                    background-color: #E09500;
+                }
+            }
+        }
+    }
+}
diff --git a/Phaha_Package/src/app/book/book-new-arrivals/book-new-arrivals.component.ts b/Phaha_Package/src/app/book/book-new-arrivals/book-new-arrivals.component.ts
new file mode 100644
index 0000000..ee6f640
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-new-arrivals/book-new-arrivals.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-book-new-arrivals',
+  templateUrl: './book-new-arrivals.component.html',
+  styleUrls: ['./book-new-arrivals.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class BookNewArrivalsComponent implements OnInit {
+  fakeArray = new Array(10);
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/book/book-new-arrivals/book-new-arrivals.module.ts b/Phaha_Package/src/app/book/book-new-arrivals/book-new-arrivals.module.ts
new file mode 100644
index 0000000..4cfbe13
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-new-arrivals/book-new-arrivals.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SwiperModule } from 'swiper/angular';
+import { BrowserModule } from '@angular/platform-browser';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    SwiperModule,
+    BrowserModule
+  ]
+})
+export class BookNewArrivalsModule { }
diff --git a/Phaha_Package/src/app/book/book-related/book-related.component.html b/Phaha_Package/src/app/book/book-related/book-related.component.html
new file mode 100644
index 0000000..8916d31
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-related/book-related.component.html
@@ -0,0 +1,63 @@
+<div class="book-related">
+    <div class="title-section text-uppercase">
+        <a href="#">Sách liên quan</a>
+    </div>
+    <div class="book-swiper">
+        <swiper 
+            [slidesPerView]="1" [spaceBetween]="30" [slidesPerGroup]="1" 
+            [loop]="false" [loopFillGroupWithBlank]="true" [pagination]="false" 
+            [navigation]="true" class="mySwiper" 
+            [breakpoints]="
+            {
+                '640': {
+                    slidesPerView: 1,
+                    spaceBetween: 30
+                },
+                '768': {
+                    slidesPerView: 1,
+                    spaceBetween: 30
+                },
+                '1024': {
+                    slidesPerView: 3,
+                    spaceBetween: 30
+                }
+            }
+            "
+        >
+            <ng-template swiperSlide *ngFor="let item of fakeArray; let index = index">
+                <div class="book-item">
+                    <div class="item-details">
+                        <div class="item-img">
+                            <img class="book-cover" src="../../../assets/images/book/book-1.jpg" alt="">
+                        </div>
+                        <div class="item-name text-uppercase">
+                            bước chậm lại giữa thế gian 
+                        </div>
+                        <div class="author-name text-capitalize">
+                            hae min
+                        </div>
+                        <div class="item-prices d-flex">
+                            <div class="original-price">400,000đ</div>
+                            <div class="sale-price">320,000đ</div>
+                        </div>
+                    </div>
+                    <div class="group-button d-flex justify-content-evenly">
+                        <button type="button" class="btn btn-discover" routerLink="/chi-tiet-sach" [queryParams]="{ tab: '1'}">
+                            <i class="bi bi-eye"></i>
+                            chi tiết
+                        </button>
+                        <button type="button" class="btn btn-add">
+                            <i class="bi bi-cart-plus"></i>
+                            giỏ hàng
+                        </button>
+                    </div>
+                </div>
+            </ng-template>
+        </swiper>
+    </div>
+    <div class="see-more text-center">
+        <span>
+            <a href="#">xem tất cả</a>
+        </span>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/book/book-related/book-related.component.scss b/Phaha_Package/src/app/book/book-related/book-related.component.scss
new file mode 100644
index 0000000..3d18c96
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-related/book-related.component.scss
@@ -0,0 +1,184 @@
+@import "~swiper/css";
+@import "~swiper/css/pagination";
+@import "~swiper/css/navigation";
+
+app-book-related {
+    a {
+        text-decoration: none;
+    }
+    
+    .book-related {
+        .title-section {
+            margin: 120px 0 20px 0;
+            text-align: center;
+            a {
+                font-size: 20px;
+                color: #222;
+                font-weight: 600;
+            }
+        }
+
+        .swiper {
+            width: 100%;
+            height: 100%;
+        }
+
+        .swiper-slide {
+            text-align: center;
+            background: #fff;
+            border-radius: 10px;
+            box-shadow: inset rgba(10, 37, 64, 0.3) 0px -2px 6px 0px;
+
+            /* Center slide text vertically */
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: -webkit-flex;
+            display: flex;
+            -webkit-box-pack: center;
+            -ms-flex-pack: center;
+            -webkit-justify-content: center;
+            justify-content: center;
+            -webkit-box-align: center;
+            -ms-flex-align: center;
+            -webkit-align-items: center;
+            align-items: center;
+        }
+
+        .swiper-slide img {
+            display: block;
+            height: 100%;
+        }
+
+        .book-swiper { 
+            .swiper {
+                padding: 0 60px;
+            }
+
+            .swiper-button-prev, .swiper-button-next {
+                background-position: center;
+                background-color: #9a9a9a;
+                border-radius: 40px;
+                padding: 30px 20px;
+
+                &:hover {
+                    background: #FCAF17;
+                }
+            }
+    
+            .swiper-button-prev {
+                left: 0px;
+            }
+
+            .swiper-button-next {
+                right: 0px;
+            }
+    
+            .swiper-button-next:after, .swiper-button-prev:after {
+                font-family: swiper-icons;
+                font-size: 24px;
+                text-transform: none !important;
+                letter-spacing: 0;
+                font-variant: initial;
+                line-height: 1;
+                color: #fff;
+            }
+    
+            .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
+                opacity: .35;
+                cursor: auto;
+                pointer-events: none;
+            }
+
+            .book-item {
+                padding: 30px 40px;
+                width: 100%;
+
+                .item-details {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                }
+
+                .item-img {
+                    height: 280px;
+                    margin-bottom: 24px;
+                }
+
+                img.book-cover {
+                    border-radius: 0 10px 10px 0;
+                    box-shadow: 4px 0 4px #ccc;
+                }
+
+                .item-name {
+                    font-size: 15px;
+                    font-weight: 500;
+                }
+
+                .author-name {
+                    color: #9a9a9a;
+                    font-size: 14px;
+                    padding: 6px 0;
+                    cursor: pointer;
+                    font-weight: 500;
+                }
+
+                .item-prices {
+                    .original-price, .sale-price {
+                        font-size: 16px;
+                    }
+                    .original-price {
+                        text-decoration: line-through;
+                        margin-right: 10px;
+                        color: #9a9a9a;
+                    }
+                    .sale-price {
+                        font-weight: 500;
+                    }
+                }
+
+                .group-button {
+                    margin-top: 24px;
+
+                    .btn {
+                        font-size: 12px;
+                        background-color: #ffe7b8;
+                        color: #e09500;
+                        text-transform: uppercase;
+                        font-weight: 500;
+                        display: flex;
+                        align-items: center;
+                        border-radius: 24px;
+                        padding: 6px 20px;
+
+                        i {
+                            font-size: 18px;
+                            margin-right: 9.75px;
+                        }
+
+                        &:hover {
+                            border: 1px solid #e09500;
+                        }
+                    }
+                }
+            }
+        }
+
+        .see-more {
+            margin: 34px 0 134px 0;
+
+            a {
+                padding: 14px 24px;
+                background-color: #222;
+                border-radius: 6px;
+                color: #fff;
+                text-transform: uppercase;
+                font-weight: 600;
+                font-size: 12px;
+
+                &:hover {
+                    background-color: #E09500;
+                }
+            }
+        }
+    }
+}
diff --git a/Phaha_Package/src/app/book/book-related/book-related.component.ts b/Phaha_Package/src/app/book/book-related/book-related.component.ts
new file mode 100644
index 0000000..03b1f58
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-related/book-related.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-book-related',
+  templateUrl: './book-related.component.html',
+  styleUrls: ['./book-related.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class BookRelatedComponent implements OnInit {
+  fakeArray = new Array(10);
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/book/book-related/book-related.module.ts b/Phaha_Package/src/app/book/book-related/book-related.module.ts
new file mode 100644
index 0000000..00b275f
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-related/book-related.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SwiperModule } from 'swiper/angular';
+import { BrowserModule } from '@angular/platform-browser';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    SwiperModule,
+    BrowserModule
+  ]
+})
+export class BookRelatedModule { }
diff --git a/Phaha_Package/src/app/book/book-sale-item/book-sale-item.component.html b/Phaha_Package/src/app/book/book-sale-item/book-sale-item.component.html
new file mode 100644
index 0000000..6894f25
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-sale-item/book-sale-item.component.html
@@ -0,0 +1 @@
+<p>book-sale-item works!</p>
diff --git a/Phaha_Package/src/app/book/book-sale-item/book-sale-item.component.scss b/Phaha_Package/src/app/book/book-sale-item/book-sale-item.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/Phaha_Package/src/app/book/book-sale-item/book-sale-item.component.ts b/Phaha_Package/src/app/book/book-sale-item/book-sale-item.component.ts
new file mode 100644
index 0000000..d8d0497
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-sale-item/book-sale-item.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-book-sale-item',
+  templateUrl: './book-sale-item.component.html',
+  styleUrls: ['./book-sale-item.component.scss']
+})
+export class BookSaleItemComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/book/book-sale/book-sale.component.html b/Phaha_Package/src/app/book/book-sale/book-sale.component.html
new file mode 100644
index 0000000..e9004de
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-sale/book-sale.component.html
@@ -0,0 +1 @@
+<p>book-sale works!</p>
diff --git a/Phaha_Package/src/app/book/book-sale/book-sale.component.scss b/Phaha_Package/src/app/book/book-sale/book-sale.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/Phaha_Package/src/app/book/book-sale/book-sale.component.ts b/Phaha_Package/src/app/book/book-sale/book-sale.component.ts
new file mode 100644
index 0000000..09ff62d
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-sale/book-sale.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-book-sale',
+  templateUrl: './book-sale.component.html',
+  styleUrls: ['./book-sale.component.scss']
+})
+export class BookSaleComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/book/book-subject/book-subject.component.html b/Phaha_Package/src/app/book/book-subject/book-subject.component.html
new file mode 100644
index 0000000..bc0df1e
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-subject/book-subject.component.html
@@ -0,0 +1,52 @@
+<div class="book-subject">
+    <div class="title-section text-uppercase">
+        <a href="#">Thể loại</a>
+    </div>
+    <div class="subject-swiper">
+        <swiper 
+            [slidesPerView]="1" [spaceBetween]="0" [slidesPerGroup]="1" 
+            [loop]="false" [loopFillGroupWithBlank]="true" [pagination]="false" 
+            [navigation]="false" class="mySwiper" 
+            [breakpoints]="
+            {
+                '640': {
+                    slidesPerView: 1,
+                    spaceBetween: 0
+                },
+                '768': {
+                    slidesPerView: 1,
+                    spaceBetween: 0
+                },
+                '1024': {
+                    slidesPerView: 3,
+                    spaceBetween: 0
+                }
+            }
+            "
+        >
+            <ng-template swiperSlide *ngFor="let item of fakeArray; let index = index">
+                <div class="subject-item">
+                    <div class="item-details">
+                        <div class="item-img">
+                            <img class="book-cover" src="../../../assets/images/book/subject-cover.png" alt="">
+                        </div>
+                        <div class="item-desc">
+                            <div class="item-name">tiểu thuyết</div>
+                            <div class="item-content">
+                                Tiểu thuyết thường được trình bày theo dạng tự sự và trần thuật, 
+                                có thể tập trung vào một hoặc một vài cá nhân trong không gian và 
+                                thời gian nghệ thuật. Ngôn ngữ chính để trình bày loại hình văn học 
+                                này chính là ngôn ngữ văn xuôi với độ dài đáng kể.
+                            </div>
+                        </div>
+                        <div class="see-more text-center">
+                            <span>
+                                <a href="#">khám phá</a>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </ng-template>
+        </swiper>
+    </div>
+</div>
diff --git a/Phaha_Package/src/app/book/book-subject/book-subject.component.scss b/Phaha_Package/src/app/book/book-subject/book-subject.component.scss
new file mode 100644
index 0000000..8543fe0
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-subject/book-subject.component.scss
@@ -0,0 +1,110 @@
+@import "~swiper/css";
+@import "~swiper/css/pagination";
+@import "~swiper/css/navigation";
+
+app-book-subject {
+    a {
+        text-decoration: none;
+    }
+
+    .book-subject {
+        .title-section {
+            text-align: center;
+            margin-bottom: 32px;
+            a {
+                font-size: 20px;
+                color: #222;
+                font-weight: 600;
+            }
+        }
+    }
+
+    .swiper {
+        width: 100%;
+        height: 100%;
+        border-radius: 100px 0;
+    }
+
+    .swiper-slide {
+        text-align: center;
+        font-size: 18px;
+        background: #fff;
+
+        /* Center slide text vertically */
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: -webkit-flex;
+        display: flex;
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
+        -webkit-justify-content: center;
+        justify-content: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        -webkit-align-items: center;
+        align-items: center;
+    }
+
+    .swiper-slide img {
+        display: block;
+        height: 100%;
+    }
+
+    .subject-swiper { 
+        .swiper {
+            padding: 0 !important;
+        }
+
+        .subject-item {
+
+            .item-details {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+    
+                img.book-cover {
+                    max-width: 100%;
+                }
+
+                .item-desc {
+                    padding: 10px 40px;
+
+                    .item-name {
+                        text-transform: uppercase;
+                        font-size: 15px;
+                        font-weight: 500;
+                        margin: 10px 0;
+                    }
+
+                    .item-content {
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        -webkit-line-clamp: 3;
+                        display: -webkit-box;
+                        -webkit-box-orient: vertical;
+                        color: #9a9a9a;
+                        font-size: 14px;
+                    }
+                }
+
+                .see-more {
+                    margin: 20px 0 40px 0;
+        
+                    a {
+                        padding: 14px 28px;
+                        background-color: #222;
+                        border-radius: 30px;
+                        color: #fff !important;
+                        text-transform: uppercase;
+                        font-weight: 600;
+                        font-size: 12px;
+        
+                        &:hover {
+                            background-color: #E09500;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/Phaha_Package/src/app/book/book-subject/book-subject.component.ts b/Phaha_Package/src/app/book/book-subject/book-subject.component.ts
new file mode 100644
index 0000000..80671ba
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-subject/book-subject.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-book-subject',
+  templateUrl: './book-subject.component.html',
+  styleUrls: ['./book-subject.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class BookSubjectComponent implements OnInit {
+  fakeArray = new Array(12);
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/book/book-subject/book-subject.module.ts b/Phaha_Package/src/app/book/book-subject/book-subject.module.ts
new file mode 100644
index 0000000..3ecaace
--- /dev/null
+++ b/Phaha_Package/src/app/book/book-subject/book-subject.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SwiperModule } from 'swiper/angular';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    SwiperModule
+  ]
+})
+export class BookSubjectModule { }
diff --git a/Phaha_Package/src/app/book/book.module.ts b/Phaha_Package/src/app/book/book.module.ts
new file mode 100644
index 0000000..e43b904
--- /dev/null
+++ b/Phaha_Package/src/app/book/book.module.ts
@@ -0,0 +1,65 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BookSaleComponent } from './book-sale/book-sale.component';
+import { BookSaleItemComponent } from './book-sale-item/book-sale-item.component';
+import { BookBestsellersComponent } from './book-bestsellers/book-bestsellers.component';
+import { BookBestsellersItemComponent } from './book-bestsellers-item/book-bestsellers-item.component';
+import { BookNewArrivalsComponent } from './book-new-arrivals/book-new-arrivals.component';
+import { BookNewArrivalsItemComponent } from './book-new-arrivals-item/book-new-arrivals-item.component';
+import { BookRelatedComponent } from './book-related/book-related.component';
+import { BookDetailsComponent } from './book-details/book-details.component';
+import { SwiperModule } from 'swiper/angular';
+import { BookSubjectComponent } from './book-subject/book-subject.component';
+import { RouterModule } from '@angular/router';
+import { BlockUIModule } from 'ng-block-ui';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClient } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import { BookRelatedModule } from './book-related/book-related.module';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { BookListByCategoryComponent } from './book-list-by-category/book-list-by-category.component';
+import { BookCartComponent } from './book-cart/book-cart.component';
+import { BookCheckoutComponent } from './book-checkout/book-checkout.component';
+import { BookListByCategoryModule } from './book-list-by-category/book-list-by-category.module';
+
+@NgModule({
+  declarations: [
+    BookSaleComponent,
+    BookSaleItemComponent,
+    BookBestsellersComponent,
+    BookBestsellersItemComponent,
+    BookNewArrivalsComponent,
+    BookNewArrivalsItemComponent,
+    BookRelatedComponent,
+    BookDetailsComponent,
+    BookSubjectComponent,
+    BookListByCategoryComponent,
+    BookCartComponent,
+    BookCheckoutComponent
+  ],
+  imports: [
+    CommonModule,
+    SwiperModule,
+    RouterModule,
+    BlockUIModule.forRoot(),
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    }),
+    FormsModule,
+    NgbModule,
+
+  ],
+  exports: [
+    BookBestsellersComponent,
+    BookSubjectComponent,
+    BookNewArrivalsComponent,
+    BookRelatedModule,
+    BookListByCategoryModule
+  ]
+})
+export class BookModule { }
diff --git a/Phaha_Package/src/app/book/book.service.ts b/Phaha_Package/src/app/book/book.service.ts
new file mode 100644
index 0000000..e93ba9e
--- /dev/null
+++ b/Phaha_Package/src/app/book/book.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BookService {
+
+  constructor() { }
+}
diff --git a/Phaha_Package/src/app/bookstore/bookstore.component.html b/Phaha_Package/src/app/bookstore/bookstore.component.html
new file mode 100644
index 0000000..18a8234
--- /dev/null
+++ b/Phaha_Package/src/app/bookstore/bookstore.component.html
@@ -0,0 +1,3 @@
+<block-ui>
+    <app-header-bookstore></app-header-bookstore>
+</block-ui>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/bookstore/bookstore.component.scss b/Phaha_Package/src/app/bookstore/bookstore.component.scss
new file mode 100644
index 0000000..702f624
--- /dev/null
+++ b/Phaha_Package/src/app/bookstore/bookstore.component.scss
@@ -0,0 +1,3 @@
+app-bookstore {
+    background-color: #FCAF17;
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/bookstore/bookstore.component.ts b/Phaha_Package/src/app/bookstore/bookstore.component.ts
new file mode 100644
index 0000000..a7e26c0
--- /dev/null
+++ b/Phaha_Package/src/app/bookstore/bookstore.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-bookstore',
+  templateUrl: './bookstore.component.html',
+  styleUrls: ['./bookstore.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class BookstoreComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/bookstore/bookstore.module.ts b/Phaha_Package/src/app/bookstore/bookstore.module.ts
new file mode 100644
index 0000000..759708d
--- /dev/null
+++ b/Phaha_Package/src/app/bookstore/bookstore.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BlockUIModule } from 'ng-block-ui';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    BlockUIModule.forRoot()
+  ]
+})
+export class BookstoreModule { }
diff --git a/Phaha_Package/src/app/bookstore/bookstore.service.ts b/Phaha_Package/src/app/bookstore/bookstore.service.ts
new file mode 100644
index 0000000..bb8c1a1
--- /dev/null
+++ b/Phaha_Package/src/app/bookstore/bookstore.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BookstoreService {
+
+  constructor() { }
+}
diff --git a/Phaha_Package/src/app/bookstore/layout-bookstore/footer-bookstore/footer-bookstore.component.html b/Phaha_Package/src/app/bookstore/layout-bookstore/footer-bookstore/footer-bookstore.component.html
new file mode 100644
index 0000000..830403d
--- /dev/null
+++ b/Phaha_Package/src/app/bookstore/layout-bookstore/footer-bookstore/footer-bookstore.component.html
@@ -0,0 +1 @@
+<p>footer-bookstore works!</p>
diff --git a/Phaha_Package/src/app/bookstore/layout-bookstore/footer-bookstore/footer-bookstore.component.scss b/Phaha_Package/src/app/bookstore/layout-bookstore/footer-bookstore/footer-bookstore.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/Phaha_Package/src/app/bookstore/layout-bookstore/footer-bookstore/footer-bookstore.component.ts b/Phaha_Package/src/app/bookstore/layout-bookstore/footer-bookstore/footer-bookstore.component.ts
new file mode 100644
index 0000000..f34d201
--- /dev/null
+++ b/Phaha_Package/src/app/bookstore/layout-bookstore/footer-bookstore/footer-bookstore.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-footer-bookstore',
+  templateUrl: './footer-bookstore.component.html',
+  styleUrls: ['./footer-bookstore.component.scss']
+})
+export class FooterBookstoreComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/bookstore/layout-bookstore/header-bookstore/header-bookstore.component.html b/Phaha_Package/src/app/bookstore/layout-bookstore/header-bookstore/header-bookstore.component.html
new file mode 100644
index 0000000..1081071
--- /dev/null
+++ b/Phaha_Package/src/app/bookstore/layout-bookstore/header-bookstore/header-bookstore.component.html
@@ -0,0 +1,91 @@
+<header>
+    <div class="container">
+        <!-- Navbar -->         
+        <nav class="navbar navbar-expand-lg navbar-light"><!-- Navbar brand -->
+            <a class="navbar-brand mt-2 mt-lg-0" href="#">
+                <img 
+                    src="../../../../assets/images/brand/Logo.png" 
+                    alt="Brand Logo" height="90" loading="lazy" 
+                />
+            </a>
+
+            <!-- Toggle button -->
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false"
+                aria-label="Toggle navigation"
+            >
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <!-- Collapsible wrapper -->
+            <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
+                <!-- Left links -->
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li class="nav-item">
+                      <a class="nav-link active" aria-current="page" href="#">Trang chủ</a>
+                    </li>
+                    <li class="nav-item">
+                      <a class="nav-link" href="#">Link</a>
+                    </li>
+                    <li class="nav-item dropdown">
+                      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                        Danh mục
+                      </a>
+                      <ul class="dropdown-menu">
+                        <li><a class="dropdown-item" href="#">Action</a></li>
+                        <li><a class="dropdown-item" href="#">Another action</a></li>
+                      </ul>
+                    </li>
+                  </ul>
+            </div>
+
+            <!-- Right elements -->
+            <div class="d-flex align-items-center">
+                <!-- Icon -->
+                <a class="text-reset me-3" href="#">
+                    <i class="fas fa-shopping-cart"></i>
+                </a>
+
+                <!-- Notifications -->
+                <div class="dropdown">
+                    <a class="text-reset me-3 dropdown-toggle hidden-arrow" href="#" id="navbarDropdownMenuLink"
+                        role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                        <i class="fas fa-bell"></i>
+                        <span class="badge rounded-pill badge-notification bg-danger">1</span>
+                    </a>
+                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">
+                        <li>
+                            <a class="dropdown-item" href="#">Some news</a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="#">Another news</a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="#">Something else here</a>
+                        </li>
+                    </ul>
+                </div>
+                <button></button>
+                <!-- Avatar
+                <div class="dropdown">
+                    <a class="dropdown-toggle d-flex align-items-center hidden-arrow" href="#"
+                        id="navbarDropdownMenuAvatar" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                        <img src="https://mdbcdn.b-cdn.net/img/new/avatars/2.webp" class="rounded-circle" height="25"
+                            alt="Black and White Portrait of a Man" loading="lazy" />
+                    </a>
+                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuAvatar">
+                        <li>
+                            <a class="dropdown-item" href="#">My profile</a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="#">Settings</a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="#">Logout</a>
+                        </li>
+                    </ul>
+                </div> -->
+            </div>
+        </nav>
+    </div>
+</header>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/bookstore/layout-bookstore/header-bookstore/header-bookstore.component.scss b/Phaha_Package/src/app/bookstore/layout-bookstore/header-bookstore/header-bookstore.component.scss
new file mode 100644
index 0000000..a5111e8
--- /dev/null
+++ b/Phaha_Package/src/app/bookstore/layout-bookstore/header-bookstore/header-bookstore.component.scss
@@ -0,0 +1,8 @@
+app-header-bookstore {
+    header {
+        background-color: #fff;
+    }
+    .nav-link {
+        
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/bookstore/layout-bookstore/header-bookstore/header-bookstore.component.ts b/Phaha_Package/src/app/bookstore/layout-bookstore/header-bookstore/header-bookstore.component.ts
new file mode 100644
index 0000000..e5f6d5d
--- /dev/null
+++ b/Phaha_Package/src/app/bookstore/layout-bookstore/header-bookstore/header-bookstore.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-header-bookstore',
+  templateUrl: './header-bookstore.component.html',
+  styleUrls: ['./header-bookstore.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class HeaderBookstoreComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/bookstore/layout-bookstore/header-bookstore/header-bookstore.module.ts b/Phaha_Package/src/app/bookstore/layout-bookstore/header-bookstore/header-bookstore.module.ts
new file mode 100644
index 0000000..6bd43ba
--- /dev/null
+++ b/Phaha_Package/src/app/bookstore/layout-bookstore/header-bookstore/header-bookstore.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class HeaderBookstoreModule { }
diff --git a/Phaha_Package/src/app/bookstore/layout-bookstore/header-bookstore/header-bookstore.service.ts b/Phaha_Package/src/app/bookstore/layout-bookstore/header-bookstore/header-bookstore.service.ts
new file mode 100644
index 0000000..87b9305
--- /dev/null
+++ b/Phaha_Package/src/app/bookstore/layout-bookstore/header-bookstore/header-bookstore.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HeaderBookstoreService {
+
+  constructor() { }
+}
diff --git a/Phaha_Package/src/app/editorial-office/editorial-office-item/editorial-office-item.component.html b/Phaha_Package/src/app/editorial-office/editorial-office-item/editorial-office-item.component.html
new file mode 100644
index 0000000..8bab41d
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/editorial-office-item/editorial-office-item.component.html
@@ -0,0 +1,15 @@
+<div class="office-item">
+    <div class="item-img">
+        <a routerLink="/{{item.slug}}">
+            <img class="img-fluid" [src]="baseUrl + item.image" (error)="errorHandler($event)">
+        </a>
+    </div>
+    <h3 class="item-title">
+        <a routerLink="/{{item.slug}}">{{item.name}}</a>
+    </h3>
+    <p class="item-total">{{'home.total-package' | translate}}: {{item.total}}</p>
+    <p class="item-total">{{'home.total-newpaper' | translate}}: {{item.totalNewspaper}}</p>
+    <div class="group-button mt-2">
+        <a routerLink="/{{item.slug}}" class="btn btn-detail">{{'cta.detail' | translate}}</a>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/editorial-office/editorial-office-item/editorial-office-item.component.scss b/Phaha_Package/src/app/editorial-office/editorial-office-item/editorial-office-item.component.scss
new file mode 100644
index 0000000..1fbbb04
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/editorial-office-item/editorial-office-item.component.scss
@@ -0,0 +1,68 @@
+app-editorial-office-item {
+    margin-bottom: 16px;
+    .office-item {
+        box-shadow: 0 0 5px #efefef;
+        height: 100%;
+        padding: 8px;
+        border-radius: 5px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        overflow: hidden;
+        &:hover {
+            opacity: 0.8;
+            box-shadow: 0 0 5px #ccc;
+        }
+
+        .item-img {
+            overflow: hidden;
+            border-radius: 5px;
+            min-height: 80px;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: -5px;
+
+            img {
+                width: 100%;
+                object-fit: cover;
+                transition: transform 0.6s;
+                &:hover {
+                    transform: scale(1.1);
+                }
+            }
+        }
+
+        .item-title {
+            text-align: center;
+            text-transform: uppercase;
+            font-weight: 600;
+            margin-bottom: 8px;
+            padding-top: 18px;
+
+            a {
+                text-decoration: none;
+                color: #666;
+                font-size: 14px;
+                display: block;
+                &:hover {
+                    color: #fcaf17;
+                }
+            }
+        }
+
+        .item-total {
+            text-align: center;
+            margin-bottom: 0px;
+        }
+
+        .group-button {
+            text-align: center;
+            a {
+                background: #fcaf17;
+                color: #fff;
+            }
+        }
+    }
+}
diff --git a/Phaha_Package/src/app/editorial-office/editorial-office-item/editorial-office-item.component.ts b/Phaha_Package/src/app/editorial-office/editorial-office-item/editorial-office-item.component.ts
new file mode 100644
index 0000000..ce8d1cb
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/editorial-office-item/editorial-office-item.component.ts
@@ -0,0 +1,23 @@
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { environment } from 'src/environments/environment';
+
+@Component({
+  selector: 'app-editorial-office-item',
+  templateUrl: './editorial-office-item.component.html',
+  styleUrls: ['./editorial-office-item.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class EditorialOfficeItemComponent implements OnInit {
+  @Input() item: any;
+  public baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+
+  constructor() { }
+
+  errorHandler($event: any) {
+    $event.target.src = '/assets/images/background/default-image.png';
+  }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/editorial-office/editorial-office-item/editorial-office-item.service.ts b/Phaha_Package/src/app/editorial-office/editorial-office-item/editorial-office-item.service.ts
new file mode 100644
index 0000000..d651922
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/editorial-office-item/editorial-office-item.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EditorialOfficeItemService {
+
+  constructor() { }
+}
diff --git a/Phaha_Package/src/app/editorial-office/editorial-office-list/editorial-office-list.component.html b/Phaha_Package/src/app/editorial-office/editorial-office-list/editorial-office-list.component.html
new file mode 100644
index 0000000..cd6157e
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/editorial-office-list/editorial-office-list.component.html
@@ -0,0 +1,32 @@
+<block-ui>
+    <div class="container pt-4">
+        <div class="card">
+            <div class="container-fluid">
+                <div class="box-office">
+                    <header class="office-header">
+                        <span>Danh sách tòa soạn</span>
+                    </header>
+                    <div class="office-search">
+                        <input (keyup.enter)="onGetOffice();" type="search" [(ngModel)]="dataModel.keyWord"
+                            class="form-control" placeholder="{{'office-detail.placeholder-search' | translate}}" />
+                        <button type="button" class="btn btn-primary" (click)="onGetOffice();">
+                            <i class="fas fa-search"></i>
+                        </button>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-3 col-sm-6 col-xs-12 mb-4"
+                            *ngFor="let officeItem of dataModel.result; let index = index">
+                            <app-editorial-office-item [item]="officeItem"></app-editorial-office-item>
+                        </div>
+                    </div>
+                    <div class="cus-page">
+                        <ngb-pagination [collectionSize]="dataModel.totalItemCount" [(page)]="dataModel.pageNumber"
+                            [maxSize]="3" [rotate]="true" [pageSize]="dataModel.pageSize"
+                            (pageChange)="onPageChange($event)">
+                        </ngb-pagination>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</block-ui>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/editorial-office/editorial-office-list/editorial-office-list.component.scss b/Phaha_Package/src/app/editorial-office/editorial-office-list/editorial-office-list.component.scss
new file mode 100644
index 0000000..2afc76a
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/editorial-office-list/editorial-office-list.component.scss
@@ -0,0 +1,77 @@
+.card {
+    border: none;
+    .box-office {
+        padding: 16px 0;
+    }
+
+    .office-header {
+        text-transform: uppercase;
+        font-weight: 600;
+        margin-bottom: 20px;
+        padding-bottom: 5px;
+        border-bottom: 1px solid #ccc;
+        span {
+            font-size: 24px;
+            padding-bottom: 8px;
+            color: #666;
+            border-bottom: 3px solid #fcaf17;
+        }
+    }
+
+    .office-search {
+        display: flex;
+        margin-bottom: 20px;
+        input {
+            height: 40px;
+            border: none;
+            border-radius: 0;
+            background: #efefef;
+            font-size: 18px;
+            color: #666;
+        }
+        .form-control:focus {
+            box-shadow: none;
+        }
+        button {
+            width: 50px;
+            border-radius: 0;
+            background: #efefef;
+            border: none;
+            color: #fcaf17;
+            padding-top: 10px;
+            border-left: 1px solid #ccc;
+            &:hover {
+                background: #ccc;
+            }
+        }
+    }
+}
+
+::ng-deep .cus-page {
+    display: flex;
+    justify-content: flex-end;
+    li.page-item,
+    li.page-item.disabled {
+        a,
+        .page-link {
+            background-color: #e9ecef;
+            border-color: #e9ecef;
+            color: #222;
+        }
+    }
+    li.page-item {
+        width: 36px;
+        text-align: center;
+        line-height: 24px;
+        margin: 0 2px;
+        border-radius: 50%;
+        overflow: hidden;
+        font-weight: bold;
+    }
+
+    li.page-item.active .page-link {
+        background-color: #e09500;
+        border-color: #e09500;
+        color: #fff;
+    }
+}
diff --git a/Phaha_Package/src/app/editorial-office/editorial-office-list/editorial-office-list.component.ts b/Phaha_Package/src/app/editorial-office/editorial-office-list/editorial-office-list.component.ts
new file mode 100644
index 0000000..181bf4e
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/editorial-office-list/editorial-office-list.component.ts
@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { PageModel } from 'src/app/Models/model';
+import { EditorialOfficeListService } from './editorial-office-list.service';
+
+@Component({
+  selector: 'app-editorial-office-list',
+  templateUrl: './editorial-office-list.component.html',
+  styleUrls: ['./editorial-office-list.component.scss']
+})
+export class EditorialOfficeListComponent implements OnInit {
+  dataModel: PageModel = new PageModel();
+
+  constructor(private _editorialOfficeListService: EditorialOfficeListService) {
+    this.dataModel.pageSize = 16;
+  }
+
+  onGetOffice() {
+    this._editorialOfficeListService.onGetListOffice(this.dataModel.keyWord, this.dataModel.pageNumber, this.dataModel.pageSize)
+      .subscribe(data => {
+        const keyWord = this.dataModel.keyWord;
+        this.dataModel = data;
+
+        this.dataModel.keyWord = keyWord;
+      });
+  }
+
+  onPageChange(numberPage: number): void {
+    this.dataModel.pageNumber = numberPage;
+    this.onGetOffice();
+  }
+
+  ngOnInit(): void {
+    this.onGetOffice();
+  }
+}
diff --git a/Phaha_Package/src/app/editorial-office/editorial-office-list/editorial-office-list.service.ts b/Phaha_Package/src/app/editorial-office/editorial-office-list/editorial-office-list.service.ts
new file mode 100644
index 0000000..4b0a908
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/editorial-office-list/editorial-office-list.service.ts
@@ -0,0 +1,18 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EditorialOfficeListService {
+
+  constructor(private _httpClient: HttpClient) { }
+ 
+  onGetListOffice(keyWord: string, page: number, pageSize: number) {
+    let params = new HttpParams();
+    params = params.append('keyWord', keyWord);
+    params = params.append('page', page);
+    params = params.append('pageSize', pageSize);
+    return this._httpClient.get<any>(`/editorial-office/list-home`, { params });
+  }
+}
diff --git a/Phaha_Package/src/app/editorial-office/editorial-office.module.ts b/Phaha_Package/src/app/editorial-office/editorial-office.module.ts
new file mode 100644
index 0000000..bb756ee
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/editorial-office.module.ts
@@ -0,0 +1,53 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SwiperModule } from "swiper/angular";
+import { BrowserModule } from "@angular/platform-browser";
+import { NgbModule, NgbNavModule } from "@ng-bootstrap/ng-bootstrap";
+import { PackageModule } from "../package/package.module";
+import { RouterModule } from '@angular/router';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClient } from '@angular/common/http';
+import { EditorialOfficeItemComponent } from './editorial-office-item/editorial-office-item.component';
+import { EditorialOfficeListComponent } from './editorial-office-list/editorial-office-list.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BlockUIModule } from 'ng-block-ui';
+import { QuillModule } from 'ngx-quill';
+import { PackageAskonomyModule } from '../package/package-askonomy/package-askonomy.module';
+import { MyPackageModule } from '../my-package/my-package.module';
+import { VneconomyNewpaperComponent } from './vneconomy/vneconomy-newpaper/vneconomy-newpaper.component';
+import { VneconomyModule } from './vneconomy/vneconomy-home/vneconomy.module';
+import { PackagesModule } from '../modules/packages/packages.module';
+
+@NgModule({
+  declarations: [EditorialOfficeItemComponent, EditorialOfficeListComponent, VneconomyNewpaperComponent],
+  imports: [
+    CommonModule,
+    SwiperModule,
+    BrowserModule,
+    NgbModule,
+    NgbNavModule,
+    PackageModule,
+    PackagesModule,
+    ReactiveFormsModule,
+    RouterModule,
+    BlockUIModule.forRoot(),
+    FormsModule,
+    QuillModule.forRoot(),
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    }),
+    PackageAskonomyModule,
+    MyPackageModule,
+    VneconomyModule
+  ],
+  exports: [
+    EditorialOfficeItemComponent
+  ]
+})
+export class EditorialOfficeModule {
+}
diff --git a/Phaha_Package/src/app/editorial-office/editorial-office.service.ts b/Phaha_Package/src/app/editorial-office/editorial-office.service.ts
new file mode 100644
index 0000000..21f54e0
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/editorial-office.service.ts
@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from "@angular/common/http";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EditorialOfficeService {
+
+  constructor(
+    private _httpClient: HttpClient,
+  ) {
+  }
+
+  getDetailEditorialOffice(id: number) {
+    return this._httpClient.get<any>(`/editorial-office/detail/${id}`);
+  }
+
+  getDetailEditorialOfficeBySlug(slug: string) {
+    let params = new HttpParams();
+    params = params.set('slug', `${slug}`);
+    return this._httpClient.get<any>(`/editorial-office/detail`, { params });
+  }
+
+  getPackageOfEditorial(page: any, id: number) {
+    let params = new HttpParams();
+    if (page.pageNumber) {
+      params = params.append('page', `${page.pageNumber}`);
+    }
+    if (page.pageSize) {
+      params = params.append('pageSize', `${page.pageSize}`);
+    }
+    return this._httpClient.get<any>(`/package/in-editorial/${id}`, { params });
+  }
+}
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-askonomy/vneconomy-askonomy.component.html b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-askonomy/vneconomy-askonomy.component.html
new file mode 100644
index 0000000..1b6596c
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-askonomy/vneconomy-askonomy.component.html
@@ -0,0 +1,64 @@
+<section id="vne-tapchi" class="container mb-3">
+    <div class="vne-tapchi">
+        <a class="back-home-vne" href="/tap-chi-kinh-te-viet-nam"><i class="uil uil-home"></i> {{'VNECONOMY_HOME_PAGE' | translate}}</a>
+        <div class="row askonomy">
+            <div class="col-lg-8 col-12 col-info">
+                <!-- premium -->
+                <div class="row">
+                    <div class="col-12 col-lg-5 text-center">
+                        <img src="../../../../assets/templace/vneconomy/images/askonomyif.jpg" alt=""
+                            class="img-fluid biabao">
+                    </div>
+                    <div class="col-12 col-lg-7 vne-boxinfo mt-3 mt-lg-0">
+                        <h2 class="title text-center text-lg-start">Askonomy</h2>
+                        <p class="sub-title">{{'VNECONOMY.ASKONOMY.SUMMARY1' | translate}}</p>
+
+                        <p class="sub-title">{{'VNECONOMY.ASKONOMY.SUMMARY2' | translate}}</p>
+
+                        <p class="sub-title">{{'VNECONOMY.ASKONOMY.FEATURES.TITLE' | translate}}</p>
+                        <ul>
+                            <li>{{'VNECONOMY.ASKONOMY.FEATURES.FEATURE1' | translate}}</li>
+                            <li>{{'VNECONOMY.ASKONOMY.FEATURES.FEATURE2' | translate}}</li>
+                            <li>{{'VNECONOMY.ASKONOMY.FEATURES.FEATURE3' | translate}}</li>
+                            <li>{{'VNECONOMY.ASKONOMY.FEATURES.FEATURE4' | translate}}</li>
+                            <li>{{'VNECONOMY.ASKONOMY.FEATURES.FEATURE5' | translate}}</li>
+                        </ul>
+
+                        <a href="/tap-chi-kinh-te-viet-nam/premium" style="text-decoration: none; color: #fcaf17; font-size: 14px; ">
+                            {{'VNECONOMY.ASKONOMY.SIGN_UP_FOR_PREMIUM' | translate}}</a>
+                        <div class="group-button text-center text-md-start">
+                            <a name="register" id="register" class="btn btn-warning mt-2" href="/tap-chi-kinh-te-viet-nam/packages" role="button">
+                                {{'VNECONOMY.ASKONOMY.EXPLORE_NOW' | translate}}
+                            </a>
+                        </div>
+
+                    </div>
+                    <!-- <div class="col-12 p-3 ms-2">
+                    <p class="vne-cat">Catalog</p>
+                    <ul class="vne-cats">
+                        <li><a href="#">Business</a></li>
+                        <li><a href="#">Finance</a></li>
+                    </ul>
+                </div> -->
+                </div>
+                <!-- end premium -->
+            </div>
+            <div class="col-lg col-12 pe-md-0 mt-lg-0 mt-4 pt-3 pt-lg-0 col-pack vne-intro">
+                <div class="ratio ratio-16x9 video">
+                    <iframe src="https://www.youtube.com/embed/NO8-yO7Zc90?rel=0"></iframe>
+                </div>
+                <div class="title">
+                    <span>{{'TAP_CHI_KINH_TE_VIET_NAM' | translate}}</span>
+                    <span>Vietnam Economic Times</span>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</section>
+
+<app-vneconomy-package></app-vneconomy-package>
+<app-vneconomy-register></app-vneconomy-register>
+<app-vneconomy-news-hot></app-vneconomy-news-hot>
+<app-vneconomy-comment></app-vneconomy-comment>
+<app-vneconomy-contact></app-vneconomy-contact>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-askonomy/vneconomy-askonomy.component.scss b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-askonomy/vneconomy-askonomy.component.scss
new file mode 100644
index 0000000..55c3b38
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-askonomy/vneconomy-askonomy.component.scss
@@ -0,0 +1,76 @@
+/* ------ askonomy --------- */
+/* -------------------------- */
+
+@media (min-width: 1400px) {
+    .vne-tapchi .askonomy .col-info {
+        max-width: 66%;
+    }
+
+    .vne-tapchi .askonomy .vne-boxinfo h2.title {
+        margin-top: 0px;
+    }
+
+    .vne-tapchi .askonomy .biabao {
+        height: 100%;
+    }
+}
+
+.vne-tapchi .askonomy h2.title {
+    margin-bottom: 5px;
+}
+
+.vne-tapchi .askonomy p.sub-title {
+    margin-bottom: 20px;
+    line-height: 1.6em;
+    text-align: justify;
+}
+
+.vne-tapchi .askonomy ul {
+    padding-left: 1.5rem;
+}
+
+.vne-tapchi .askonomy li {
+    font-size: 0.85em;
+    color: #777;
+}
+
+.vne-tapchi .askonomy li::marker {
+    color: var(--bs-warning);
+    font-size: 1.1rem;
+}
+
+@media (max-width: 992px) {
+    .vne-tapchi .askonomy p.sub-title {
+        font-size: 1em;
+        line-height: 1.3em;
+    }
+
+    .vne-tapchi .askonomy li {
+        font-size: 1em;
+    }
+}
+
+@media (min-width: 1400px) {
+    .vne-tapchi .askonomy .vne-intro .video {
+        margin-top: 50px;
+    }
+}
+
+.vne-tapchi {
+    background: #fff;
+    padding: 40px 40px 40px 40px;
+}
+
+.back-home-vne {
+    margin-bottom: 10px;
+    color: #fcaf17;
+    font-size: 18px;
+    position: sticky;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    i{
+        font-size: 20px;
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-askonomy/vneconomy-askonomy.component.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-askonomy/vneconomy-askonomy.component.ts
new file mode 100644
index 0000000..bb0e720
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-askonomy/vneconomy-askonomy.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-vneconomy-askonomy',
+  templateUrl: './vneconomy-askonomy.component.html',
+  styleUrls: ['./vneconomy-askonomy.component.scss']
+})
+export class VneconomyAskonomyComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-askonomy/vneconomy-askonomy.module.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-askonomy/vneconomy-askonomy.module.ts
new file mode 100644
index 0000000..5529d3d
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-askonomy/vneconomy-askonomy.module.ts
@@ -0,0 +1,46 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { VneconomyAskonomyComponent } from './vneconomy-askonomy.component';
+import { SwiperModule } from 'swiper/angular';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { BlockUIModule } from 'ng-block-ui';
+import { QuillModule } from 'ngx-quill';
+import { Ng2FlatpickrModule } from 'ng2-flatpickr';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { HttpClient } from '@angular/common/http';
+import { LoginModule } from 'src/app/login/login.module';
+import { VneconomyModule } from '../vneconomy-home/vneconomy.module';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+
+
+@NgModule({
+  declarations: [
+    VneconomyAskonomyComponent
+  ],
+  imports: [
+    CommonModule,
+    SwiperModule,
+    BrowserModule,
+    NgbModule,
+    ReactiveFormsModule,
+    RouterModule,
+    BlockUIModule.forRoot(),
+    FormsModule,
+    QuillModule.forRoot(),
+    Ng2FlatpickrModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    }),
+    LoginModule,
+    VneconomyModule
+  ]
+})
+export class VneconomyAskonomyModule { }
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-askonomy/vneconomy-askonomy.service.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-askonomy/vneconomy-askonomy.service.ts
new file mode 100644
index 0000000..36e8be9
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-askonomy/vneconomy-askonomy.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class VneconomyAskonomyService {
+
+  constructor() { }
+}
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-detail/vneconomy-detail.component.html b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-detail/vneconomy-detail.component.html
new file mode 100644
index 0000000..ea35f71
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-detail/vneconomy-detail.component.html
@@ -0,0 +1,8 @@
+<div id="vne">
+    <app-vneconomy-newpaper-detail></app-vneconomy-newpaper-detail>
+    <app-vneconomy-package></app-vneconomy-package>
+    <app-vneconomy-register></app-vneconomy-register>
+    <app-vneconomy-news-hot></app-vneconomy-news-hot>
+    <app-vneconomy-comment></app-vneconomy-comment>
+    <app-vneconomy-contact></app-vneconomy-contact>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-detail/vneconomy-detail.component.scss b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-detail/vneconomy-detail.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-detail/vneconomy-detail.component.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-detail/vneconomy-detail.component.ts
new file mode 100644
index 0000000..1c482ca
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-detail/vneconomy-detail.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-vneconomy-detail',
+  templateUrl: './vneconomy-detail.component.html',
+  styleUrls: ['./vneconomy-detail.component.scss']
+})
+export class VneconomyDetailComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-detail/vneconomy-detail.module.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-detail/vneconomy-detail.module.ts
new file mode 100644
index 0000000..bde596f
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-detail/vneconomy-detail.module.ts
@@ -0,0 +1,39 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { VneconomyDetailComponent } from './vneconomy-detail.component';
+import { VneconomyModule } from '../vneconomy-home/vneconomy.module';
+import { SwiperModule } from 'swiper/angular';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { BlockUIModule } from 'ng-block-ui';
+import { QuillModule } from 'ngx-quill';
+import { Ng2FlatpickrModule } from 'ng2-flatpickr';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { LoginModule } from 'src/app/login/login.module';
+import { HttpClient } from '@angular/common/http';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { VneconomyNewpaperDetailComponent } from './vneconomy-newpaper-detail/vneconomy-newpaper-detail.component';
+
+
+
+@NgModule({
+  declarations: [VneconomyDetailComponent, VneconomyNewpaperDetailComponent],
+  imports: [
+    CommonModule,
+    VneconomyModule,
+    SwiperModule,
+    BrowserModule,
+    NgbModule,
+    ReactiveFormsModule,
+    RouterModule,
+    BlockUIModule.forRoot(),
+    FormsModule,
+    QuillModule.forRoot(),
+    Ng2FlatpickrModule,
+    TranslateModule.forRoot(),
+    LoginModule
+  ]
+})
+export class VneconomyDetailModule { }
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-detail/vneconomy-detail.service.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-detail/vneconomy-detail.service.ts
new file mode 100644
index 0000000..3ffc271
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-detail/vneconomy-detail.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class VneconomyDetailService {
+
+  constructor() { }
+}
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-detail/vneconomy-newpaper-detail/vneconomy-newpaper-detail.component.html b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-detail/vneconomy-newpaper-detail/vneconomy-newpaper-detail.component.html
new file mode 100644
index 0000000..5f5ed36
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-detail/vneconomy-newpaper-detail/vneconomy-newpaper-detail.component.html
@@ -0,0 +1,69 @@
+<section id="vne-tapchi" class="container mb-3">
+    <div class="vne-tapchi">
+        <a class="back-home-vne" href="/tap-chi-kinh-te-viet-nam"><i class="uil uil-home"></i>
+            {{'VNECONOMY_HOME_PAGE' | translate}}</a>
+        <div class="row">
+            <div class="col-lg-8 col-12 col-info">
+                <!-- tạp chí -->
+                <div class="row">
+                    <div class="col-12 col-md-5 text-center">
+                        <img [src]="apiUrl + detail.image" alt="" class="img-fluid biabao">
+                    </div>
+                    <div class="col-12 col-md-7 vne-boxinfo mt-3 mt-md-0">
+                        <h2 class="title text-center text-md-start">{{detail.title}}</h2>
+
+                        <div class="row vne-metas">
+                            <div class="meta-date col-6 col-xl-12">
+                                <p class="sub">{{'RELEASE_DATE' | translate}}</p>
+                                <p class="value">{{detail.strDateCreate}}</p>
+                            </div>
+                            <div class="meta-page col-6 col-xl-12">
+                                <p class="sub">{{'NUMBER_OF_PAGES' | translate}}</p>
+                                <p class="value">{{detail.totalPage}}</p>
+                            </div>
+                            <div class="meta-language col-6 col-xl-12">
+                                <p class="sub">{{'LANGUAGE' | translate}}</p>
+                                <p class="value">{{detail.lang == 'vn' ? 'Việt Nam' : 'English'}}</p>
+                            </div>
+                            <div class="meta-type col-6 col-xl-12">
+                                <p class="sub">{{'TYPE' | translate}}</p>
+                                <p class="value">{{'MAGAZINE' | translate}}</p>
+                            </div>
+                        </div>
+                        <div class="group-button text-center text-md-start">
+                            <a name="preview" type="button" (click)="getViewTrialPdf(detail)" id="preview"
+                                class="btn btn-warning mt-4" role="button">
+                                {{'PROOFREAD' | translate}}
+                            </a>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg col-12 pe-md-0 mt-lg-0 mt-4 pt-3 pt-lg-0 col-pack">
+                <!-- mua gói -->
+                <div class="vne-packages">
+                    <p class="tengoi">{{'PREMIUM_PACKAGE' | translate}}</p>
+                    <p class="sub-tengoi">999k/{{'YEAR' | translate}}</p>
+                    <div class="text-center mb-1">{{'12_MONTH' | translate}}</div>
+                    <div class="text-center mb-1">{{'DAILY_VNECONOMY' | translate}}</div>
+                    <div class="text-center mb-3">{{'12_MONTH_SUBSCRIPTION' | translate}}</div>
+                    <a name="buytrial" id="buytrial" class="btn btn-warning" href="/package-pay/301"
+                        role="button">{{'BUY_NOW' | translate}}</a>
+                    <!-- -- Các gói --- -->
+                    <div *ngFor="let item of packages" class="pakages pb-4 pt-2"
+                        [routerLink]="'/package-pay/' + item.id + '/1'">
+                        <div class="pack-dot"><i class="bi bi-check-lg"></i></div>
+                        <div class="pack-content">
+                            <a href="#">{{item.name}}</a>
+                            <span>{{item.promotionPrice ?? item.price | number}} đ</span>
+                        </div>
+                        <div class="pack-des"></div>
+                    </div>
+                    <!-- -- end Các gói --- -->
+                </div>
+                <!-- end mua gói -->
+            </div>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-detail/vneconomy-newpaper-detail/vneconomy-newpaper-detail.component.scss b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-detail/vneconomy-newpaper-detail/vneconomy-newpaper-detail.component.scss
new file mode 100644
index 0000000..560dc32
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-detail/vneconomy-newpaper-detail/vneconomy-newpaper-detail.component.scss
@@ -0,0 +1,224 @@
+#vne-tapchi {
+    padding-top: 40px;
+}
+
+.vne-tapchi {
+    background: #fff;
+    padding: 40px 40px 40px 40px;
+}
+
+@media (min-width: 992px) {
+    .vne-tapchi .col-info {
+        padding-right: 30px;
+    }
+
+    .vne-tapchi .col-pack {
+        border-left: 1px solid #eee;
+        padding-left: 30px;
+        border-top: 0;
+    }
+}
+
+@media (max-width: 992px) {
+    .vne-tapchi .col-pack {
+        border-top: 1px solid #eee;
+    }
+}
+
+@media (min-width: 1400px) {
+    .vne-tapchi .col-info {
+        max-width: 61%;
+    }
+}
+
+.vne-tapchi .biabao {
+    object-fit: cover;
+    object-position: top center;
+}
+
+.vne-tapchi .vne-boxinfo {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.vne-tapchi .vne-boxinfo h2.title {
+    font-size: 1.2em;
+    font-weight: 700;
+    padding-bottom: 15px;
+    border-bottom: 1px solid #eee;
+    margin-bottom: 20px;
+}
+
+.vne-tapchi .vne-boxinfo .vne-metas div[class^="meta"] {
+    margin-bottom: 12px;
+}
+
+.vne-tapchi .vne-boxinfo .vne-metas p {
+    margin-bottom: 0;
+}
+
+.vne-tapchi .vne-boxinfo .vne-metas .sub {
+    color: #777;
+}
+
+.vne-tapchi .vne-boxinfo .vne-metas .value {
+    font-weight: 700;
+}
+
+.vne-tapchi .vne-boxinfo #preview {
+    padding-left: 30px;
+    padding-right: 30px;
+    color: #fff;
+}
+
+.vne-tapchi .vne-cat,
+.vne-tapchi .vne-cats li a {
+    color: #777;
+}
+
+.vne-tapchi .vne-cats {
+    padding: 0;
+}
+
+.vne-tapchi .vne-cats li {
+    list-style-type: none;
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    text-align: center;
+    padding: 0 10px 3px 10px;
+
+}
+
+.vne-tapchi .vne-cats li a {
+    text-decoration: none;
+}
+
+.vne-tapchi .vne-packages {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.vne-tapchi .vne-packages .tengoi,
+.vne-tapchi .vne-packages .sub-tengoi {
+    text-align: center;
+
+    font-weight: 600;
+    font-size: 18px;
+
+}
+
+.vne-tapchi .vne-packages .tengoi {
+    color: var(--bs-warning);
+    font-weight: 700;
+    font-size: 1.8em;
+    margin-bottom: 10px;
+}
+
+.vne-tapchi .vne-packages .sub-tengoi {
+    color: #777;
+
+    font-weight: 600;
+    font-size: 18px;
+
+}
+
+.vne-tapchi .vne-packages #buytrial {
+    color: #fff;
+    padding-top: 12px;
+    padding-bottom: 12px;
+    margin-bottom: 15px;
+    font-size: 1.5em;
+}
+
+.vne-tapchi .vne-packages .pakages {
+    border-bottom: 1px solid #eee;
+}
+
+.vne-tapchi .vne-packages .pakages:hover {
+    cursor: pointer;
+}
+
+.vne-tapchi .vne-packages .pakages .pack-dot {
+    background: var(--bs-warning);
+    width: 20px;
+    height: 20px;
+    position: relative;
+    border-radius: 50%;
+    float: left;
+    margin-top: 5px;
+}
+
+.vne-tapchi .vne-packages .pakages .pack-dot i {
+    color: #000;
+    position: absolute;
+    right: 2px;
+    top: -2px;
+    font-size: 1.2em;
+}
+
+.vne-tapchi .vne-packages .pakages .pack-content {
+    margin-left: 30px;
+    font-size: 0.95em;
+    padding-top: 3px;
+}
+
+.vne-tapchi .vne-packages .pakages .pack-content a {
+    color: #444;
+    text-decoration: none;
+    font-weight: 700;
+}
+
+.vne-tapchi .vne-packages .pakages .pack-content span {
+    float: right;
+    font-weight: 700;
+    padding-left: 16px;
+    padding-right: 16px;
+    background: #eee;
+    border-left: 1px solid var(--bs-warning);
+    border-right: 1px solid var(--bs-warning);
+    min-width: 105px;
+    text-align: center;
+}
+
+.vne-tapchi .vne-packages .pakages .pack-des {
+    margin-left: 30px;
+    color: #999;
+    margin-top: -2px;
+}
+
+@media (min-width: 1400px) {
+    .vne-tapchi .vne-boxinfo h2.title {
+        margin-top: 30px;
+    }
+}
+
+@media (max-width: 768px) {
+    .vne-tapchi {
+        padding: 40px 20px;
+    }
+}
+
+@media (max-width: 1200px) {
+
+    .vne-tapchi .vne-boxinfo .vne-metas .meta-page,
+    .vne-tapchi .vne-boxinfo .vne-metas .meta-type {
+        border-left: 1px solid #eee;
+    }
+}
+
+.back-home-vne {
+    margin-bottom: 10px;
+    color: #fcaf17;
+    font-size: 18px;
+    position: sticky;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    i{
+        font-size: 20px;
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-detail/vneconomy-newpaper-detail/vneconomy-newpaper-detail.component.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-detail/vneconomy-newpaper-detail/vneconomy-newpaper-detail.component.ts
new file mode 100644
index 0000000..4c78821
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-detail/vneconomy-newpaper-detail/vneconomy-newpaper-detail.component.ts
@@ -0,0 +1,81 @@
+import { Component, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { VneconomyNewpaperDetailService } from './vneconomy-newpaper-detail.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AuthenticationService } from 'src/app/auth/service/authentication.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { environment } from 'src/environments/environment';
+
+@Component({
+  selector: 'app-vneconomy-newpaper-detail',
+  templateUrl: './vneconomy-newpaper-detail.component.html',
+  styleUrls: ['./vneconomy-newpaper-detail.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class VneconomyNewpaperDetailComponent implements OnInit {
+
+  currentUser: any = {};
+  newId = null;
+  detail: any = {};
+  packages: any = [];
+  isLogin: boolean = false;
+  fileName: any;
+  apiUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  @ViewChild('LoginModal') loginModal: TemplateRef<NgbModal> | undefined;
+
+  constructor(
+    private readonly _activatedRoute: ActivatedRoute,
+    private readonly _authenticationService: AuthenticationService,
+    private readonly _router: Router,
+    private readonly _modalService: NgbModal,
+    private readonly _vneconomyNewpaperDetailService: VneconomyNewpaperDetailService
+  ) { }
+
+  ngOnInit(): void {
+    this._activatedRoute.params.subscribe(params => {
+      this.newId = params['id'];
+    });
+
+    this.currentUser = this._authenticationService.currentUserValue;
+    if (this.currentUser && this.currentUser.jwtToken) this.isLogin = true;
+
+    this.getDetail();
+    this.getPackagesOfNew();
+  }
+
+  getDetail() {
+    this._vneconomyNewpaperDetailService.getPackageNewsDetail(this.newId)
+      .subscribe(res => {
+        this.detail = res.data;
+      });
+  }
+
+  getPackagesOfNew() {
+    this._vneconomyNewpaperDetailService.getPackagesOfNew(this.newId)
+      .subscribe(res => {
+        this.packages = res.data;
+      })
+  }
+
+  getViewTrialPdf(e: any) {
+    if (this.isLogin) {
+      if (e.path && e.path.length > 0) {
+        this.fileName = e.path[0].path.replace(/^.*[\\\/]/, '');
+        this.fileName = this.fileName.replace('.pdf', '')
+        this._router.navigate(['view-trial', e.id], {
+          queryParams: {
+            id: e.path[0].id,
+            fileName: this.fileName
+          }
+        })
+      } else {
+        this._router.navigate(['view-trial', e.id])
+      }
+    } else {
+      this.openModalWithSize(this.loginModal);
+    }
+  }
+
+  openModalWithSize(content?: TemplateRef<NgbModal>) {
+    this._modalService.open(content, { size: "md", centered: true });
+  }
+}
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-detail/vneconomy-newpaper-detail/vneconomy-newpaper-detail.service.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-detail/vneconomy-newpaper-detail/vneconomy-newpaper-detail.service.ts
new file mode 100644
index 0000000..5eaa23b
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-detail/vneconomy-newpaper-detail/vneconomy-newpaper-detail.service.ts
@@ -0,0 +1,20 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class VneconomyNewpaperDetailService {
+
+  constructor(
+    private readonly _httpClient: HttpClient,
+  ) { }
+
+  getPackageNewsDetail(id: any) {
+    return this._httpClient.get<any>(`/package-news/detail/${id}`);
+  }
+
+  getPackagesOfNew(id: any){
+    return this._httpClient.get<any>(`/package-news/packages-of-new/${id}`);
+  }
+}
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-comment/vneconomy-comment.component.html b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-comment/vneconomy-comment.component.html
new file mode 100644
index 0000000..5cc435f
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-comment/vneconomy-comment.component.html
@@ -0,0 +1,38 @@
+<section id="vne-nhanxet" class="container mb-0">
+    <div class="vne-nhanxet">
+        <div class="row">
+            <div class="col-4 d-none d-lg-block nhanxet-pic"></div>
+            <div class="col-lg-8 col-12">
+                <swiper [config]="config">
+                    <ng-template swiperSlide>
+                        <div class="swiper-slide">
+                            <div class="items text-center">
+                                <div class="star"><img src="../../../../assets/templace/vneconomy/images/star-5.svg"
+                                        alt=""></div>
+                                <div class="text">{{'THANK_YOU_1' | translate}}</div>
+                            </div>
+                        </div>
+                    </ng-template>
+                    <ng-template swiperSlide>
+                        <div class="swiper-slide">
+                            <div class="items text-center">
+                                <div class="star"><img src="../../../../assets/templace/vneconomy/images/star-5.svg"
+                                        alt=""></div>
+                                <div class="text">{{'THANK_YOU_2' | translate}}</div>
+                            </div>
+                        </div>
+                    </ng-template>
+                    <ng-template swiperSlide>
+                        <div class="swiper-slide">
+                            <div class="items text-center">
+                                <div class="star"><img src="../../../../assets/templace/vneconomy/images/star-5.svg"
+                                        alt=""></div>
+                                <div class="text">{{'THANK_YOU_3' | translate}}</div>
+                            </div>
+                        </div>
+                    </ng-template>
+                </swiper>
+            </div>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-comment/vneconomy-comment.component.scss b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-comment/vneconomy-comment.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-comment/vneconomy-comment.component.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-comment/vneconomy-comment.component.ts
new file mode 100644
index 0000000..47c92b9
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-comment/vneconomy-comment.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { SwiperOptions } from 'swiper';
+
+@Component({
+  selector: 'app-vneconomy-comment',
+  templateUrl: './vneconomy-comment.component.html',
+  styleUrls: ['./vneconomy-comment.component.scss']
+})
+export class VneconomyCommentComponent implements OnInit {
+
+  config: SwiperOptions = {
+    effect: "flip",
+    navigation: true,
+    grabCursor: true,
+    autoplay: {
+      delay: 3000,
+    },
+    loop: true,
+    pagination: {
+      el: ".swiper-pagination",
+      clickable: true,
+    },
+  };
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-contact/vneconomy-contact.component.html b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-contact/vneconomy-contact.component.html
new file mode 100644
index 0000000..35655f6
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-contact/vneconomy-contact.component.html
@@ -0,0 +1,26 @@
+<section id="vne-lienhe" class="container mb-3">
+    <div class="vne-lienhe">
+        <div class="row">
+            <div class="col-lg-3 col-12 text-center"><img src="../../../../assets/templace/vneconomy/images/logotc.png"
+                    class="logo"></div>
+            <div class="col-lg-9 col-12 mt-3 mt-lg-0">
+                <div class="row">
+                    <div class="col-lg-6 col-12 lh-col1 text-lg-start text-center">
+                        <p>
+                            <strong>{{'TAP_CHI_KINH_TE_VIET_NAM' | translate}}</strong><br>
+                            {{'MANAGING_UNIT' | translate}}: {{'VIETNAM_ASSOCIATION_OF_ECONOMIC_SCIENCES' |
+                            translate}}<br>
+                            {{'DOMAIN' | translate}}:
+                            <a href="https://vneconomy.vn" target="_blank">https://vneconomy.vn</a>
+                        </p>
+                    </div>
+                    <div class="col-lg-6 col-12 lh-col2 text-lg-start text-center">
+                        <p>{{'PHONE_NUMBER' | translate}}: 0982898995<br>
+                            Email: <a href="mailto:anhhongtbkt95@gmail.com">anhhongtbkt95@gmail.com</a><br>
+                            {{'ADDRESS' | translate}}: {{'NO_96_98_HOANG_QUOC_VIET' | translate}}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-contact/vneconomy-contact.component.scss b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-contact/vneconomy-contact.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-contact/vneconomy-contact.component.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-contact/vneconomy-contact.component.ts
new file mode 100644
index 0000000..1d9fc67
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-contact/vneconomy-contact.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-vneconomy-contact',
+  templateUrl: './vneconomy-contact.component.html',
+  styleUrls: ['./vneconomy-contact.component.scss']
+})
+export class VneconomyContactComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-news-hot/vneconomy-news-hot-item/vneconomy-news-hot-item.component.html b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-news-hot/vneconomy-news-hot-item/vneconomy-news-hot-item.component.html
new file mode 100644
index 0000000..15f81ad
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-news-hot/vneconomy-news-hot-item/vneconomy-news-hot-item.component.html
@@ -0,0 +1,4 @@
+<div class="title">
+    <a href="{{item.url}}" title="{{item.title}}" target="_blank">{{item.title}}</a>
+</div>
+<div class="content" (click)="openModalView(item)" [innerHTML]="item.content_summary"></div>
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-news-hot/vneconomy-news-hot-item/vneconomy-news-hot-item.component.scss b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-news-hot/vneconomy-news-hot-item/vneconomy-news-hot-item.component.scss
new file mode 100644
index 0000000..fcd8f9d
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-news-hot/vneconomy-news-hot-item/vneconomy-news-hot-item.component.scss
@@ -0,0 +1,15 @@
+.content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 5;
+    -webkit-box-orient: vertical;
+    line-height: 20px;
+    height: 100px;
+}
+
+.content-summary{
+    font-size: 20px;
+    text-align: justify;
+    padding: 0 15px;
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-news-hot/vneconomy-news-hot-item/vneconomy-news-hot-item.component.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-news-hot/vneconomy-news-hot-item/vneconomy-news-hot-item.component.ts
new file mode 100644
index 0000000..4b6e86e
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-news-hot/vneconomy-news-hot-item/vneconomy-news-hot-item.component.ts
@@ -0,0 +1,25 @@
+import { Component, Input, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { VneconomyNewsHotPopupComponent } from './vneconomy-news-hot-popup/vneconomy-news-hot-popup.component';
+
+@Component({
+  selector: 'app-vneconomy-news-hot-item',
+  templateUrl: './vneconomy-news-hot-item.component.html',
+  styleUrls: ['./vneconomy-news-hot-item.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class VneconomyNewsHotItemComponent implements OnInit {
+  @Input() item: any = {};
+
+  constructor(
+    private readonly _modalService: NgbModal,
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+  openModalView(item: any) {
+    const modalRef = this._modalService.open(VneconomyNewsHotPopupComponent, {size: 'lg', centered: true});
+    modalRef.componentInstance.item = this.item;
+  };
+}
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-news-hot/vneconomy-news-hot-item/vneconomy-news-hot-popup/vneconomy-news-hot-popup.component.html b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-news-hot/vneconomy-news-hot-item/vneconomy-news-hot-popup/vneconomy-news-hot-popup.component.html
new file mode 100644
index 0000000..db1d3bb
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-news-hot/vneconomy-news-hot-item/vneconomy-news-hot-popup/vneconomy-news-hot-popup.component.html
@@ -0,0 +1,7 @@
+<div class="modal-header">
+    <h4 class="modal-title title-new-hot">{{item.title | translate}}</h4>
+    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
+</div>
+<div class="modal-body">
+    <div class="content-summary" [innerHTML]="item.content_summary"></div>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-news-hot/vneconomy-news-hot-item/vneconomy-news-hot-popup/vneconomy-news-hot-popup.component.scss b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-news-hot/vneconomy-news-hot-item/vneconomy-news-hot-popup/vneconomy-news-hot-popup.component.scss
new file mode 100644
index 0000000..60e8580
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-news-hot/vneconomy-news-hot-item/vneconomy-news-hot-popup/vneconomy-news-hot-popup.component.scss
@@ -0,0 +1,5 @@
+.title-new-hot{
+    font-weight: 600;
+    text-transform: uppercase;
+    font-size: 22px;
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-news-hot/vneconomy-news-hot-item/vneconomy-news-hot-popup/vneconomy-news-hot-popup.component.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-news-hot/vneconomy-news-hot-item/vneconomy-news-hot-popup/vneconomy-news-hot-popup.component.ts
new file mode 100644
index 0000000..b86008f
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-news-hot/vneconomy-news-hot-item/vneconomy-news-hot-popup/vneconomy-news-hot-popup.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input, OnInit, inject } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-vneconomy-news-hot-popup',
+  templateUrl: './vneconomy-news-hot-popup.component.html',
+  styleUrls: ['./vneconomy-news-hot-popup.component.scss']
+})
+export class VneconomyNewsHotPopupComponent implements OnInit {
+
+  modal = inject(NgbActiveModal);
+  @Input() item: any = [];
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-news-hot/vneconomy-news-hot.component.html b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-news-hot/vneconomy-news-hot.component.html
new file mode 100644
index 0000000..78c530c
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-news-hot/vneconomy-news-hot.component.html
@@ -0,0 +1,49 @@
+<section id="vne-noibat" class="container mb-3">
+    <div class="vne-noibat">
+        <div class="header">
+            <h3>{{'HOT_NEWS' | translate}}</h3>
+            <img src="../../../../assets/templace/vneconomy/images/logovne.png" alt="" class="img-fluid logo">
+        </div>
+        <div class="row">
+            <div class="col-12 noibat-head">
+                <div class="meta-date">
+                    <!-- <span>{{dateFormat}}</span> -->
+                    <!-- |  -->
+                    <!-- <a href="#noibat" class="datedrop">Chọn tin theo ngày <img src=""> </a><input type="hidden" id="datepicker" /> -->
+                    <span>{{'DATE' | translate}}</span>
+                    <ng2-flatpickr [config]="basicDateOptions" [addClass]="'cus-flatpickr'"></ng2-flatpickr>
+                </div>
+                <!-- <div class="meta-more"><a href="#noibat" class="link-more">Xem tất cả</a>
+                    <div class="noibat-button-prev"><i class="bi bi-chevron-left"></i></div>
+                    <div class="noibat-button-next"><i class="bi bi-chevron-right"></i></div>
+                </div> -->
+            </div>
+            <div class="col-12 noibat-content">
+                <swiper [config]="config">
+                    <ng-container *ngFor="let item of dataNews">
+                        <ng-template swiperSlide *ngIf="dataNewIds.includes(item.title)">
+                            <app-vneconomy-news-hot-item [item]="item"></app-vneconomy-news-hot-item>
+                        </ng-template>
+                    </ng-container>
+                </swiper>
+            </div>
+        </div>
+
+        <!-- --- Chưa đăng ký --- -->
+        <div class="rblock" *ngIf="!month">
+            <div class="reg-block"></div>
+            <div class="reg-btn text-center">
+                <a *ngIf="!isLogin" name="dangkyai" id="dangkyai" class="btn btn-danger" href="#noibat" (click)="onLogin()" role="button"
+                    data-bs-toggle="modal" data-bs-target="#regModal">{{'EXPERIENCE_NOW' | translate}}
+                    <i class="bi bi-chevron-right"></i>
+                </a>
+                <a *ngIf="isLogin" name="dangkyai" id="dangkyai" class="btn btn-danger" routerLink="/tap-chi-kinh-te-viet-nam/premium" role="button"
+                    data-bs-toggle="modal" data-bs-target="#regModal">{{'EXPERIENCE_NOW' | translate}}
+                    <i class="bi bi-chevron-right"></i>
+                </a>
+            </div>
+        </div>
+        <!-- --- Chưa đăng ký --- -->
+
+    </div>
+</section>
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-news-hot/vneconomy-news-hot.component.scss b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-news-hot/vneconomy-news-hot.component.scss
new file mode 100644
index 0000000..dedb90d
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-news-hot/vneconomy-news-hot.component.scss
@@ -0,0 +1,7 @@
+.cus-flatpickr{
+    border: none;
+    color: #b5191d;
+    margin-left: 0;
+    padding-left: 0;
+    font-size: 14px;
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-news-hot/vneconomy-news-hot.component.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-news-hot/vneconomy-news-hot.component.ts
new file mode 100644
index 0000000..11c11cc
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-news-hot/vneconomy-news-hot.component.ts
@@ -0,0 +1,114 @@
+import { DatePipe } from '@angular/common';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Component, OnInit, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { FlatpickrOptions, Ng2FlatpickrComponent } from 'ng2-flatpickr';
+import { LoginComponent } from 'src/app/login/login.component';
+import { A11y, Mousewheel, Navigation, Pagination, SwiperOptions } from 'swiper';
+
+@Component({
+  selector: 'app-vneconomy-news-hot',
+  templateUrl: './vneconomy-news-hot.component.html',
+  styleUrls: ['./vneconomy-news-hot.component.scss', '../vneconomy.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class VneconomyNewsHotComponent implements OnInit {
+
+  config: SwiperOptions = {
+    slidesPerView: 1,
+    spaceBetween: 30,
+    navigation: true,
+    grid: {
+      rows: 2,
+      fill: "column"
+    },
+    breakpoints: {
+      768: {
+        slidesPerView: 2,
+        grid: {
+          rows: 2,
+          fill: "column"
+        },
+      },
+      1366: {
+        slidesPerView: 3,
+        grid: {
+          rows: 2,
+          fill: "column"
+        },
+      },
+    },
+  };
+
+  dataNews: any = [];
+  dataNewIds: any = [];
+  date: Date = new Date();
+  date15 = new Date(this.date.getFullYear(), this.date.getMonth(), this.date.getDate(), 11, 59, 0);
+  month = false;
+  currentUser: any = {};
+  isLogin: boolean = false;
+  pickers: QueryList<Ng2FlatpickrComponent> | undefined;
+  basicDateOptions: FlatpickrOptions = {
+    altInput: true,
+    altFormat: "d/m/Y",
+    static: true,
+    mode: 'single',
+    allowInvalidPreload: false,
+    allowInput: true,
+    wrap: true,
+    maxDate: new Date(),
+    dateFormat: 'Y-m-d H:i',
+    defaultDate: this.date,
+    onChange: (selectedDates: any) => {
+      this.date = selectedDates[0];
+      this.getNews();
+    }
+  };
+
+  constructor(
+    private readonly _modalService: NgbModal,
+    private readonly _httpClient: HttpClient,
+    private readonly datepipe: DatePipe
+  ) {
+    this.currentUser = JSON.parse(localStorage.getItem("currentCustomer") ?? "{}");
+    if (typeof (this.currentUser) === 'object' && this.currentUser.jwtToken) {
+      this.isLogin = true;
+      if (this.currentUser.month && this.currentUser.month == 30)
+        this.month = true;
+    };
+  }
+
+  ngOnInit(): void {
+    this.getNews();
+  }
+
+  onLogin() {
+    this._modalService.open(LoginComponent, { size: "md", centered: true });
+  }
+
+  openModalWithSize(content?: TemplateRef<NgbModal>, size?: string) {
+    this._modalService.open(content, { size: size ?? "md", centered: true });
+  }
+
+
+  getNews() {
+    if (this.date < this.date15) {
+      this.date.setDate(this.date.getDate() - 1);
+    }
+
+    let latest_date = this.datepipe.transform(this.date, 'yyyy-MM-dd');
+
+    this._httpClient.get<any>(`https://vneconomy.vn/api/summaries/${latest_date}`)
+      .subscribe(res => {
+        this.dataNewIds = res.map((x: { Title: any; }) => x.Title);
+        let params = new HttpParams();
+        params = params.append('published_date', `${latest_date}`);
+
+        this._httpClient.get<any>(`https://api.chatbd.ai/api/partner/929e7e8f-e40c-4094-891d-490a896594f7/site/558e5029-2f01-4dfd-bbab-fcc304bc7e62/articles`, { params })
+          .subscribe(res => {
+            this.dataNews = res;
+            this.dataNews = this.dataNews.filter((x: { title: string; }) => this.dataNewIds.includes(x.title))
+          });
+      });
+  }
+}
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-package/swiper-slide-item/swiper-slide-item.component.html b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-package/swiper-slide-item/swiper-slide-item.component.html
new file mode 100644
index 0000000..96c3eb7
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-package/swiper-slide-item/swiper-slide-item.component.html
@@ -0,0 +1,13 @@
+<div class="items">
+    <a [href]="item.isBuy ? '/view/' + item.id : '/tap-chi-kinh-te-viet-nam/detail/' + item.id">
+        <img [src]="apiUrl + item.image" alt="" class="img-fluid mw-100" (error)="errorHandler($event)">
+        <p class="title">{{item.title}}</p>
+        <p class="subtitle"><a href="/{{item.editorialOffice.slug}}">{{item.editorialOffice.name}}</a></p>
+    </a>
+    <div class="group-button">
+        <!-- <a type="button" (click)="getViewTrialPdf(item)" class="button dungthu">{{'cta.trial' | translate}}</a> -->
+        <a *ngIf="!item.isBuy" href="/tap-chi-kinh-te-viet-nam/detail/{{item.id}}" class="button chitiet">{{'cta.detail' | translate}}</a>
+        <a *ngIf="!item.isBuy" type="button" href="package-pay/{{item.id}}/2" class="button thanhtoan">{{'cta.register' | translate}}</a>
+        <a *ngIf="item.isBuy" routerLink="/view/{{item.id}}" class="button thanhtoan">{{'cta.read' | translate}}</a>
+    </div>
+</div>
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-package/swiper-slide-item/swiper-slide-item.component.scss b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-package/swiper-slide-item/swiper-slide-item.component.scss
new file mode 100644
index 0000000..736ce06
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-package/swiper-slide-item/swiper-slide-item.component.scss
@@ -0,0 +1,3 @@
+app-swiper-slide-item{
+    width: 100%;
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-package/swiper-slide-item/swiper-slide-item.component.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-package/swiper-slide-item/swiper-slide-item.component.ts
new file mode 100644
index 0000000..7053770
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-package/swiper-slide-item/swiper-slide-item.component.ts
@@ -0,0 +1,63 @@
+import { Component, Input, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Router } from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { environment } from 'src/environments/environment';
+
+@Component({
+  selector: 'app-swiper-slide-item',
+  templateUrl: './swiper-slide-item.component.html',
+  styleUrls: ['./swiper-slide-item.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class SwiperSlideItemComponent implements OnInit {
+  @Input() item: any = {};
+
+  public apiUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  public isLogin: boolean = false;
+  fileName: any;
+
+  @ViewChild('LoginModal') loginModal: TemplateRef<NgbModal> | undefined;
+
+  constructor(
+    private readonly _router: Router,
+    private readonly _modalService: NgbModal,
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+  onRedirectPayLink(a: any) {
+    if (this.isLogin) {
+      this._router.navigate(['package-pay', a.id])
+    } else {
+      this.openModalWithSize(this.loginModal);
+    }
+  }
+
+  openModalWithSize(content?: TemplateRef<NgbModal>) {
+    this._modalService.open(content, { size: "md", centered: true });
+  }
+
+  getViewTrialPdf(e: any) {
+    if (this.isLogin) {
+      if (e.path && e.path.length > 0) {
+        this.fileName = e.path[0].path.replace(/^.*[\\\/]/, '');
+        this.fileName = this.fileName.replace('.pdf', '')
+        this._router.navigate(['view-trial', e.id], {
+          queryParams: {
+            id: e.path[0].id,
+            fileName: this.fileName
+          }
+        })
+      } else {
+        this._router.navigate(['view-trial', e.id])
+      }
+    } else {
+      this.openModalWithSize(this.loginModal);
+    }
+  }
+
+  errorHandler(event: any) {
+    event.target.src = "/assets/images/package/package-default.png";
+  }
+}
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-package/vneconomy-package.component.html b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-package/vneconomy-package.component.html
new file mode 100644
index 0000000..8ded7f1
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-package/vneconomy-package.component.html
@@ -0,0 +1,28 @@
+<section id="vne-anpham" class="container mb-3">
+    <div class="vne-anpham">
+        <div class="row">
+
+            <!-- --- Tab ấn phẩm --- -->
+            <div class="col-12 head-tab">
+                <a type="button" (click)="GetPackageByNameGroup('TCKTVN')" class="tabs" [ngClass]="{'active': nameGroup == 'TCKTVN'}" data-link="package-1">
+                    {{'VNECONOMY.PACKAGE.TCKTVN' | translate}}</a>
+                <a type="button" (click)="GetPackageByNameGroup('VET')" class="tabs" [ngClass]="{'active': nameGroup == 'VET'}" data-link="package-2">
+                    {{'VNECONOMY.PACKAGE.ECONOMIC_TIMES' | translate}}</a>
+                <a type="button" (click)="GetPackageByNameGroup('NGKTVN')" class="tabs" [ngClass]="{'active': nameGroup == 'NGKTVN'}" data-link="package-3">
+                    {{'VNECONOMY.PACKAGE.NGKTVN' | translate}}</a>
+                <a type="button" routerLink="/tap-chi-kinh-te-viet-nam/so-bao" class="link-more">
+                    {{'VNECONOMY.PACKAGE.SHOW_ALL' | translate}}
+                </a>
+            </div>
+            <div class="col-12 content-tab mb-3">
+                <swiper [slidesPerView]="1" [spaceBetween]="30" [slidesPerGroup]="1" [loop]="false"
+                    [loopFillGroupWithBlank]="true" [pagination]="false" [navigation]="true"
+                    [breakpoints]="breakpoints" containerModifierClass="cus">
+                    <ng-template swiperSlide *ngFor="let item of packages">
+                        <app-swiper-slide-item [item]="item"></app-swiper-slide-item>
+                    </ng-template>
+                </swiper>
+            </div>
+        </div>
+    </div>
+</section>
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-package/vneconomy-package.component.scss b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-package/vneconomy-package.component.scss
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-package/vneconomy-package.component.scss
@@ -0,0 +1 @@
+
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-package/vneconomy-package.component.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-package/vneconomy-package.component.ts
new file mode 100644
index 0000000..22e8b39
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-package/vneconomy-package.component.ts
@@ -0,0 +1,46 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { VneconomyService } from '../vneconomy.service';
+
+@Component({
+  selector: 'app-vneconomy-package',
+  templateUrl: './vneconomy-package.component.html',
+  styleUrls: ['./vneconomy-package.component.scss', '../vneconomy.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class VneconomyPackageComponent implements OnInit {
+
+  breakpoints = {
+    '640': {
+      slidesPerView: 1
+    },
+    '768': {
+      slidesPerView: 2
+    },
+    '1024': {
+      slidesPerView: 3
+    },
+    '1366': {
+      slidesPerView: 4
+    }
+  };
+
+  packages: any = [];
+  nameGroup = "";
+
+  constructor(
+    private readonly _vneconomyService: VneconomyService
+  ) { }
+
+  ngOnInit(): void {
+    this.GetPackageByNameGroup(this.nameGroup);
+  }
+
+  GetPackageByNameGroup(nameGroup: string) {
+    this.nameGroup = nameGroup;
+    this._vneconomyService
+      .GetNewsByNameGroup(nameGroup)
+      .subscribe(res => {
+        this.packages = res;
+      });
+  }
+}
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-register/vneconomy-register.component.html b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-register/vneconomy-register.component.html
new file mode 100644
index 0000000..af1db44
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-register/vneconomy-register.component.html
@@ -0,0 +1,54 @@
+<section id="vne-thongtin" class="container mb-3">
+    <div class="vne-thongtin">
+        <div class="row">
+            <div class="col-12 col-md-6 d-block d-lg-none">
+                <a [href]="month ? '/askonomy' : '/tap-chi-kinh-te-viet-nam/askonomy'" [target]="{'_blank': month }">
+                    <img src="/assets/images/advs/adv_1_{{lang}}.png" alt="" class="img-fluid">
+                </a>
+            </div>
+            <div class="col-12 col-md-6 d-lg-block d-none">
+                <a [href]="month ? '/askonomy' : '/tap-chi-kinh-te-viet-nam/askonomy'" [target]="{'_blank': month }">
+                    <img src="/assets/images/advs/adv_1_{{lang}}.png" alt="" class="img-fluid"
+                        style="object-fit: cover; object-position: left bottom; min-height: 320px;">
+                </a>
+            </div>
+            <div class="col-12 col-md-6 datbao">
+                <div class="row me-lg-0">
+                    <div class="col-12 col-md-6 d-none d-lg-block photo"></div>
+                    <!-- --- form --- -->
+                    <div class="col-12 col-lg-6 form-datbao p-3">
+                        <form>
+                            <h3 class="title">{{'REGISTER_NOW' | translate}}</h3>
+                            <p class="subtitle">{{'EXPERIENCE_THE_PACKAGES' | translate}}</p>
+                            <div class="form-group mt-4">
+                                <select class="form-control mb-2" name="package-1" id="package-1">
+                                    <option value="0">{{'TAP_CHI_KINH_TE_VIET_NAM' | translate}}</option>
+                                    <option value="1">Gói 1 số</option>
+                                    <option value="2">Gói 6 tháng</option>
+                                    <option value="2">Gói 1 năm</option>
+                                </select>
+
+                                <select class="form-control mb-2" name="package-2" id="package-2">
+                                    <option value="0">Vietnam Economic Times</option>
+                                    <option value="1">Gói 1 số</option>
+                                    <option value="2">Gói 6 tháng</option>
+                                    <option value="2">Gói 1 năm</option>
+                                </select>
+
+                                <select class="form-control mb-2" name="package-3" id="package-3">
+                                    <option value="0">Niên giám Kinh tế Việt Nam & Thế giới</option>
+                                    <option value="2">Gói 1 năm</option>
+                                </select>
+
+                                <a name="dangky" id="dangky" class="btn btn-dark"
+                                    href="/tap-chi-kinh-te-viet-nam/packages" role="button">{{'SIGN_UP_FOR_PACKAGE' | translate}}</a>
+                            </div>
+                        </form>
+                    </div>
+                    <!-- --- form --- -->
+                </div>
+            </div>
+
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-register/vneconomy-register.component.scss b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-register/vneconomy-register.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-register/vneconomy-register.component.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-register/vneconomy-register.component.ts
new file mode 100644
index 0000000..4e412ba
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-register/vneconomy-register.component.ts
@@ -0,0 +1,27 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-vneconomy-register',
+  templateUrl: './vneconomy-register.component.html',
+  styleUrls: ['./vneconomy-register.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class VneconomyRegisterComponent implements OnInit {
+
+  month = false;
+  currentUser: any = {};
+  lang = 'vi';
+
+  constructor() {
+    this.currentUser = JSON.parse(localStorage.getItem("currentCustomer") ?? "{}");
+    if (typeof (this.currentUser) === 'object' && this.currentUser.month) {
+      if (this.currentUser.month && this.currentUser.month > 5)
+        this.month = true;
+    };
+    this.lang = localStorage.getItem("lang") ?? 'vi';
+  }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-slider/vneconomy-slider.component.html b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-slider/vneconomy-slider.component.html
new file mode 100644
index 0000000..851c29f
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-slider/vneconomy-slider.component.html
@@ -0,0 +1,28 @@
+<section id="vne-header" class="container mb-3 pt-2">
+    <div class="vne-header">
+        <ngb-carousel class="carousel-fade" [interval]="3000" [pauseOnHover]="true">
+            <ng-template ngbSlide>
+                <div class="swiper-slide">
+                    <a [href]="month ? '/askonomy' : '/tap-chi-kinh-te-viet-nam/askonomy'" [target]="{'_blank': month }" title="Gói premium">
+                        <img src="/assets/images/banner/{{isMobile === true ? 'mobile' : 'desktop'}}/banner_1_{{lang}}.png" alt="">
+                    </a>
+                </div>
+            </ng-template>
+            <ng-template ngbSlide>
+                <div class="swiper-slide">
+                    <a href="/tap-chi-kinh-te-viet-nam/premium" title="Gói premium">
+                        <img src="/assets/images/banner/{{isMobile === true ? 'mobile' : 'desktop'}}/banner_2_{{lang}}.png" alt="">
+                    </a>
+                </div>
+            </ng-template>
+            
+            <ng-template ngbSlide>
+                <div class="swiper-slide">
+                    <a [href]="'/tap-chi-kinh-te-viet-nam/packages'" title="Gói askonomy">
+                        <img src="/assets/images/banner/{{isMobile === true ? 'mobile' : 'desktop'}}/banner_3_{{lang}}.png" alt="">
+                    </a>
+                </div>
+            </ng-template>
+        </ngb-carousel>
+    </div>
+</section>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-slider/vneconomy-slider.component.scss b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-slider/vneconomy-slider.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-slider/vneconomy-slider.component.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-slider/vneconomy-slider.component.ts
new file mode 100644
index 0000000..795d0da
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy-slider/vneconomy-slider.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-vneconomy-slider',
+  templateUrl: './vneconomy-slider.component.html',
+  styleUrls: ['./vneconomy-slider.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class VneconomySliderComponent implements OnInit {
+
+  month = false;
+  currentUser: any = {};
+  lang = 'vi';
+  isMobile: boolean = false;
+
+  constructor() {
+    this.currentUser = JSON.parse(localStorage.getItem("currentCustomer") ?? "{}");
+    if (typeof (this.currentUser) === 'object' && this.currentUser.month) {
+      if (this.currentUser.month && this.currentUser.month > 5)
+        this.month = true;
+    };
+
+    this.lang = localStorage.getItem("lang") ?? 'vi';
+    this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+  }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy.component.html b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy.component.html
new file mode 100644
index 0000000..adab8d5
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy.component.html
@@ -0,0 +1,8 @@
+<div id="vne">
+    <app-vneconomy-slider></app-vneconomy-slider>
+    <app-vneconomy-package></app-vneconomy-package>
+    <app-vneconomy-register></app-vneconomy-register>
+    <app-vneconomy-news-hot></app-vneconomy-news-hot>
+    <app-vneconomy-comment></app-vneconomy-comment>
+    <app-vneconomy-contact></app-vneconomy-contact>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy.component.scss b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy.component.scss
new file mode 100644
index 0000000..df922d0
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy.component.scss
@@ -0,0 +1,484 @@
+@font-face {
+    font-family: 'HelveticaWorld';
+    src: url("../../../../assets/templace/vneconomy/fonts/HelveticaWorld-Bold.otf") format('opentype');
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: 'HelveticaWorld';
+    src: url("../../../../assets/templace/vneconomy/fonts/HelveticaWorld-Regular.otf") format('opentype');
+    font-weight: normal;
+}
+
+@import "~swiper/css/bundle";
+
+:root {
+    --swiper-theme-color: #494949;
+}
+
+#vne {
+    background: #eee;
+    font-family: 'HelveticaWorld', sans-serif;
+    font-size: 1em;
+}
+
+/* --- All section --- */
+.vne-anpham,
+.vne-header,
+.vne-thongtin,
+.vne-noibat,
+.vne-lienhe {
+    background: #fff;
+}
+
+
+/* --- Header Home --- */
+.vne-header .swiper,
+.vne-anpham .swiper,
+.vne-nhanxet .swiper {
+    width: 100%;
+    height: 100%;
+}
+
+.vne-header .swiper-slide,
+.vne-anpham .swiper-slide,
+.vne-nhanxet .swiper-slide {
+    text-align: center;
+    font-size: 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+}
+
+.vne-header .swiper-slide,
+.vne-anpham .swiper-slide {
+    background: #fff;
+}
+
+.vne-header .swiper-slide img,
+.vne-anpham .swiper-slide img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+
+/* --- Header Home --- */
+
+/* --- Ấn phẩm Home --- */
+.vne-anpham .head-tab {
+    padding: 50px 50px 30px 50px;
+}
+
+.vne-anpham a {
+    text-decoration: none;
+    color: #222;
+}
+
+/* --- tabs head */
+.vne-anpham .tabs {
+    background: #ddd;
+    display: inline-block;
+    padding: 12px 15px;
+    margin-right: 15px;
+    margin-bottom: 10px;
+    transition: all 0.2s;
+}
+
+.vne-anpham .tabs:hover,
+.vne-anpham .tabs.active {
+    background: #b5191d;
+    color: #fff;
+}
+
+.vne-anpham .link-more {
+    float: right;
+}
+
+@media (max-width: 768px) {
+    .vne-anpham .link-more {
+        float: none;
+    }
+}
+
+/* --- tab content */
+.vne-anpham .content-tab {
+    padding: 0 50px;
+    position: relative;
+}
+
+.vne-anpham .swiper {
+    padding: 10px 15px 25px 15px;
+}
+
+.vne-anpham .swiper-slide {
+    padding: 0 8px 10px 8px;
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 15px -3px, rgba(0, 0, 0, 0.15) 0px 4px 6px -2px;
+    border-radius: 0 0 5px 5px;
+    transition: transform 0.6s;
+
+}
+
+.vne-anpham .swiper-slide:hover {
+    transform: scale(1.03);
+}
+
+.vne-anpham .vnes-button-next,
+.vne-anpham .vnes-button-prev {
+    position: absolute;
+    top: 50%;
+}
+
+.vne-anpham .vnes-button-next img,
+.vne-anpham .vnes-button-prev img {
+    width: 20px;
+}
+
+.vne-anpham .vnes-button-prev {
+    left: 25px;
+    transform: rotate(180deg);
+}
+
+.vne-anpham .vnes-button-next {
+    right: 25px;
+}
+
+.vne-anpham .title {
+    text-align: center;
+    font-weight: 700;
+    margin-bottom: 0;
+    margin-top: 12px;
+    color: #000;
+}
+
+.vne-anpham .subtitle {
+    text-align: center;
+    margin-top: -3px;
+}
+
+.vne-anpham .group-button {
+    display: flex;
+    justify-content: space-around;
+}
+
+.vne-anpham .button {
+    color: #fff;
+    text-align: center;
+    background: #aaa;
+    border-radius: 5px;
+    display: inline-block;
+    min-width: 30%;
+    padding: 2px 5px;
+    transition: all 0.5s;
+}
+
+.vne-anpham .button:hover {
+    background: #b5191d;
+}
+
+
+/* --- Ấn phẩm Home --- */
+
+/* --- Thông tin đặt báo --- */
+.vne-thongtin {
+    padding: 10px;
+}
+
+.vne-thongtin .datbao .row {
+    height: 100%;
+    background: #ff0000;
+}
+
+.vne-thongtin .datbao .photo {
+    background-image: url(../../../../assets/templace/vneconomy/images/datbao1.png);
+    background-size: cover;
+    background-position: center center;
+    background-repeat: no-repeat;
+}
+
+/* --- form đặt báo --- */
+.vne-thongtin .datbao .form-datbao {
+    height: 100%;
+    background-color: #00000030;
+    display: flex;
+    justify-content: center;
+}
+
+.vne-thongtin .datbao .form-datbao form {
+    align-self: center;
+    width: 100%;
+}
+
+.vne-thongtin .datbao .form-datbao .title,
+.vne-thongtin .datbao .form-datbao .subtitle {
+    color: #fff;
+    text-align: center;
+}
+
+.vne-thongtin .datbao .form-datbao .subtitle {
+    line-height: 1;
+}
+
+.vne-thongtin .datbao .form-datbao .btn {
+    width: 100%;
+    background: #fcaf17;
+    border: none;
+}
+
+.vne-thongtin .datbao .form-datbao .btn:hover {
+    background: #ffe7b8;
+}
+
+/* -- Tin nổi bật --- */
+.vne-noibat {
+    padding: 30px 0;
+    position: relative;
+}
+
+.vne-noibat .header {
+    background: #b5191d;
+}
+
+.vne-noibat .header h3 {
+    color: #fff;
+    display: inline-block;
+    margin-bottom: 0;
+    padding: 10px 20px;
+}
+
+.vne-noibat .header .logo {
+    max-height: 40px;
+    float: right;
+}
+
+.vne-noibat .noibat-head {
+    padding: 15px 30px;
+}
+
+.vne-noibat .noibat-head>div {
+    display: inline-block;
+}
+
+.vne-noibat .noibat-head a {
+    text-decoration: none;
+    color: #444;
+}
+
+.vne-noibat .noibat-head .meta-date>span {
+    color: #b5191d;
+    margin-right: 10px;
+}
+
+.vne-noibat .noibat-head .meta-date>a {
+    margin-left: 10px;
+}
+
+.vne-noibat .noibat-head .meta-date>a span {
+    border: 1px solid #444;
+    width: 15px;
+    height: 15px;
+}
+
+.vne-noibat .noibat-head .meta-more {
+    float: right;
+}
+
+@media (max-width: 768px) {
+    .vne-noibat .noibat-head .meta-more {
+        float: none;
+    }
+}
+
+.vne-noibat .noibat-head .meta-more>div {
+    display: inline-block;
+}
+
+.vne-noibat .noibat-head .meta-more .link-more {
+    margin-right: 10px;
+}
+
+.vne-noibat .noibat-content {
+    padding-left: 25px;
+    padding-right: 25px;
+}
+
+.vne-noibat .noibat-content .swiper {
+    width: 100%;
+    height: 500px;
+    padding: 10px;
+}
+
+@media (max-width: 640px) {
+    .vne-noibat .noibat-content .swiper {
+        height: 560px;
+    }
+}
+
+.vne-noibat .noibat-content .swiper-slide {
+    background: #fff;
+    height: calc((100% - 30px) / 2) !important;
+    padding: 25px;
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 15px -3px, rgba(0, 0, 0, 0.15) 0px 4px 6px -2px;
+    border-radius: 0 0 5px 5px;
+    margin-bottom: 15px;
+}
+
+.vne-noibat .noibat-content .swiper-slide .title {
+    font-weight: 700;
+    margin-bottom: 15px;
+    line-height: 1.2;
+    a{
+        color: #222;
+        text-decoration: none;
+        line-height: 22px;
+    }
+}
+
+.vne-noibat .reg-block {
+    position: absolute;
+    width: 100%;
+    background: linear-gradient(#ffffff00, #ffffff30, #ffffffde, #ffffff);
+    height: 100%;
+    bottom: 0;
+    z-index: 9;
+    display: block;
+}
+
+.vne-noibat .reg-btn {
+    position: relative;
+    z-index: 9;
+    margin-top: -20px;
+}
+
+.vne-noibat .reg-btn .btn {
+    margin-top: -80px;
+    padding: 5px 25px;
+}
+
+/* --- Nhận xét --- */
+.vne-nhanxet {
+    background: #b5191d;
+    padding: 0 15px;
+    color: #fff;
+}
+
+.vne-nhanxet .nhanxet-pic {
+    background: url(../../../../assets/templace/vneconomy/images/nhanxet.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+    height: 200px;
+    align-self: center;
+}
+
+.vne-nhanxet .swiper-slide .items .star img {
+    max-height: 25px;
+    margin-bottom: 15px;
+}
+
+.vne-nhanxet .swiper-slide .items {
+    padding: 15px 0 30px 0;
+}
+
+.vne-nhanxet .swiper-slide .items .text {
+    font-weight: 700;
+    padding: 0 50px;
+    line-height: 1.3em;
+    margin-bottom: 12px;
+    max-width: 800px;
+}
+
+.vne-nhanxet .swiper .swiper-button-prev,
+.vne-nhanxet .swiper .swiper-button-next {
+    fill: #fff;
+    color: #fff;
+}
+
+.vne-nhanxet .swiper .swiper-pagination span.swiper-pagination-bullet {
+    background: #ffffffe9;
+}
+
+.vne-nhanxet .swiper .swiper-pagination span.swiper-pagination-bullet-active {
+    background: #ffffff;
+}
+
+/* --- Liên hệ --- */
+.vne-lienhe {
+    padding: 25px 10px;
+}
+
+.vne-lienhe a {
+    color: #222;
+    text-decoration: none;
+}
+
+.vne-lienhe .logo {
+    max-width: 160px;
+}
+
+.vne-lienhe .lh-col1,
+.vne-lienhe .lh-col2 {
+    line-height: 1.3em;
+}
+
+
+/* --- modal đăng ký --- */
+#regModal .modal-header,
+#contentModal .modal-header {
+    justify-content: space-between;
+}
+
+#regModal .modal-header .btn-close,
+#contentModal .modal-header .btn-close {
+    padding: 0;
+    margin: 0 20px 0 0;
+}
+
+#regModal .modal-header .logo,
+#contentModal .modal-header .logo {
+    margin: 0 0 0 20px;
+    max-height: 36px;
+}
+
+#regModal .modal-body {
+    background: #e8e8e8;
+}
+
+#regModal form .email {
+    margin-top: 30px;
+    border-radius: .375rem .375rem 0 0;
+    border-bottom: 0;
+    padding: 15px;
+}
+
+#regModal form .password {
+    border-radius: 0 0 .375rem .375rem;
+    margin-bottom: 15px;
+    padding: 15px;
+}
+
+#regModal form p {
+    line-height: 1.3em;
+    color: #444;
+}
+
+#regModal a {
+    color: var(--bs-warning);
+    text-decoration: none;
+}
+
+#regModal form .btn {
+    color: #fff;
+    padding: 10px 30px;
+}
+
+#regModal .modal-footer {
+    justify-content: center;
+}
+
+#contentModal .modal-body .col {
+    display: flex;
+    align-items: center;
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy.component.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy.component.ts
new file mode 100644
index 0000000..928613f
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-vneconomy',
+  templateUrl: './vneconomy.component.html',
+  styleUrls: ['./vneconomy.component.scss']
+})
+export class VneconomyComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy.module.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy.module.ts
new file mode 100644
index 0000000..fa84376
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy.module.ts
@@ -0,0 +1,53 @@
+import { NgModule } from '@angular/core';
+import { CommonModule, DatePipe } from '@angular/common';
+import { VneconomyComponent } from './vneconomy.component';
+import { SwiperModule } from 'swiper/angular';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { BlockUIModule } from 'ng-block-ui';
+import { QuillModule } from 'ngx-quill';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { HttpClient } from '@angular/common/http';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { VneconomySliderComponent } from './vneconomy-slider/vneconomy-slider.component';
+import { VneconomyPackageComponent } from './vneconomy-package/vneconomy-package.component';
+import { SwiperSlideItemComponent } from './vneconomy-package/swiper-slide-item/swiper-slide-item.component';
+import { VneconomyRegisterComponent } from './vneconomy-register/vneconomy-register.component';
+import { VneconomyNewsHotComponent } from './vneconomy-news-hot/vneconomy-news-hot.component';
+import { VneconomyNewsHotItemComponent } from './vneconomy-news-hot/vneconomy-news-hot-item/vneconomy-news-hot-item.component';
+import { VneconomyCommentComponent } from './vneconomy-comment/vneconomy-comment.component';
+import { VneconomyContactComponent } from './vneconomy-contact/vneconomy-contact.component';
+import { LoginModule } from 'src/app/login/login.module';
+import { Ng2FlatpickrModule } from 'ng2-flatpickr';
+import { VneconomyNewsHotPopupComponent } from './vneconomy-news-hot/vneconomy-news-hot-item/vneconomy-news-hot-popup/vneconomy-news-hot-popup.component';
+
+
+
+@NgModule({
+  declarations: [VneconomyComponent, VneconomySliderComponent, VneconomyPackageComponent, SwiperSlideItemComponent, VneconomyRegisterComponent, VneconomyNewsHotComponent, VneconomyNewsHotItemComponent, VneconomyCommentComponent, VneconomyContactComponent, VneconomyNewsHotPopupComponent],
+  exports: [VneconomySliderComponent, VneconomyPackageComponent, SwiperSlideItemComponent, VneconomyRegisterComponent, VneconomyNewsHotComponent,VneconomyCommentComponent, VneconomyContactComponent],
+  imports: [
+    CommonModule,
+    SwiperModule,
+    BrowserModule,
+    NgbModule,
+    ReactiveFormsModule,
+    RouterModule,
+    BlockUIModule.forRoot(),
+    FormsModule,
+    QuillModule.forRoot(),
+    Ng2FlatpickrModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    }),
+    LoginModule
+  ],
+  providers: [DatePipe]
+})
+export class VneconomyModule { }
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy.service.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy.service.ts
new file mode 100644
index 0000000..7e83c30
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-home/vneconomy.service.ts
@@ -0,0 +1,20 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class VneconomyService {
+
+  constructor(
+    private readonly _httpClient: HttpClient,
+  ) { }
+
+  GetNewsByNameGroup(nameGroup: string) {
+    let params = new HttpParams();
+    params = params.append('nameGroup', nameGroup);
+    params = params.append('oid', '27');
+    
+    return this._httpClient.get<any>(`/package/news-by-name-group`, {params});
+  }
+}
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-newpaper/vneconomy-newpaper.component.html b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-newpaper/vneconomy-newpaper.component.html
new file mode 100644
index 0000000..b4b8d8f
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-newpaper/vneconomy-newpaper.component.html
@@ -0,0 +1,11 @@
+<div class="container vne-newpaper">
+    <div class="row">
+        <div class="col-md-3 col-sm-4 col-sm-12" *ngFor="let item of dataModel.result">
+            <app-swiper-slide-item [item]="item"></app-swiper-slide-item>
+        </div>
+    </div>
+
+    <ngb-pagination [collectionSize]="dataModel.totalItemCount" [(page)]="dataModel.pageNumber" [maxSize]="3"
+        [rotate]="true" [pageSize]="dataModel.pageSize" (pageChange)="onPageChange($event)">
+    </ngb-pagination>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-newpaper/vneconomy-newpaper.component.scss b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-newpaper/vneconomy-newpaper.component.scss
new file mode 100644
index 0000000..06e77fb
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-newpaper/vneconomy-newpaper.component.scss
@@ -0,0 +1,66 @@
+.vne-newpaper {
+    background: #fff;
+    padding: 15px;
+
+    .items .star img {
+        max-height: 25px;
+        margin-bottom: 15px;
+    }
+
+    .items {
+        padding: 0 8px 10px;
+        box-shadow: #0003 0 10px 15px -3px, #00000026 0 4px 6px -2px;
+        border-radius: 0 0 5px 5px;
+        transition: transform .6s;
+        margin-bottom: 15px;
+
+        img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        &:hover {
+            transform: scale(1.03);
+        }
+
+        &>a {
+            text-decoration: none;
+        }
+
+        .title {
+            text-align: center;
+            font-weight: 700;
+            margin-bottom: 0;
+            margin-top: 12px;
+            color: #000;
+        }
+
+        .subtitle {
+            text-align: center;
+            margin-top: -3px;
+        }
+
+        .group-button {
+            display: flex;
+            justify-content: space-around;
+
+            .button {
+                color: #fff;
+                text-align: center;
+                background: #aaa;
+                border-radius: 5px;
+                display: inline-block;
+                min-width: 30%;
+                padding: 2px 5px;
+                transition: all .5s;
+                text-decoration: none;
+
+                &:hover{
+                    background: #fcaf17;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-newpaper/vneconomy-newpaper.component.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-newpaper/vneconomy-newpaper.component.ts
new file mode 100644
index 0000000..06a51bd
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-newpaper/vneconomy-newpaper.component.ts
@@ -0,0 +1,37 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { PageModel } from 'src/app/Models/model';
+import { VneconomyNewpaperService } from './vneconomy-newpaper.service';
+
+@Component({
+  selector: 'app-vneconomy-newpaper',
+  templateUrl: './vneconomy-newpaper.component.html',
+  styleUrls: ['./vneconomy-newpaper.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class VneconomyNewpaperComponent implements OnInit {
+
+  dataModel: PageModel = new PageModel();
+
+  constructor(
+    private readonly _vneconomyNewpaperService: VneconomyNewpaperService
+  ) { }
+
+  ngOnInit(): void {
+    this.dataModel.pageSize = 12;
+    this.GetData();
+  }
+
+  GetData() {
+    this._vneconomyNewpaperService.GetListNewpaper(this.dataModel)
+      .subscribe(res => {
+        this.dataModel.result = res.result;
+        this.dataModel.totalItemCount = res.totalItemCount;
+      })
+  }
+
+  onPageChange(numberPage: number): void {
+    debugger
+    this.dataModel.pageNumber = numberPage;
+    this.GetData();
+  }
+}
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-newpaper/vneconomy-newpaper.service.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-newpaper/vneconomy-newpaper.service.ts
new file mode 100644
index 0000000..c68f448
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-newpaper/vneconomy-newpaper.service.ts
@@ -0,0 +1,22 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { PageModel } from 'src/app/Models/model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class VneconomyNewpaperService {
+
+  constructor(
+    private readonly _http: HttpClient
+  ) { }
+
+  GetListNewpaper(pageModel: PageModel) {
+
+    let params = new HttpParams();
+    params = params.append('page', pageModel.pageNumber);
+    params = params.append('pageSize', pageModel.pageSize);
+
+    return this._http.get<any>(`/newspaper/list/27`, { params });
+  }
+}
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-packages/vneconomy-packages.component.html b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-packages/vneconomy-packages.component.html
new file mode 100644
index 0000000..375c8bb
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-packages/vneconomy-packages.component.html
@@ -0,0 +1,65 @@
+<section id="vne-goibao" class="container mt-5 mb-3">
+    <div class="vne-goibao">
+        <div class="col-info">
+            <div class="row">
+                <div class="col-12">
+                    <h2 class="title text-center text-md-start">{{'VNECONOMY.PAGE_PACKAGES.DIGITAL' | translate}}</h2>
+                </div>
+                <!-- gói -->
+                <div class="col-12 col-lg-4 pack-box">
+                    <div class="b-head">{{'VNECONOMY.PAGE_PACKAGES.TCKTVN' | translate}}</div>
+                    <div class="b-items">
+                        <div class="b-item" *ngFor="let item of tcktvn">
+                            <div class="pack-dot"><i class="bi bi-check-lg"></i></div>
+                            <a href="{{item.isBought ? '/list-news/' + item.packageUserId : '/package-pay/' + item.id}}"
+                                class="pack-value">
+                                <p class="title">{{item.name}}</p>
+                                <p class="price">{{fNumber(item)}} VNĐ</p>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-12 col-lg-4 pack-box">
+                    <div class="b-head">{{'VNECONOMY.PAGE_PACKAGES.ECONOMIC_TIMES' | translate}}</div>
+                    <div class="b-items">
+                        <div class="b-item" *ngFor="let item of vet">
+                            <div class="pack-dot"><i class="bi bi-check-lg"></i></div>
+                            <a href="{{item.isBought ? '/list-news/' + item.packageUserId : '/package-pay/' + item.id}}"
+                                class="pack-value">
+                                <p class="title">{{item.name}}</p>
+                                <p class="price">{{fNumber(item)}} VNĐ</p>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-12 col-lg-4 pack-box">
+                    <div class="b-head">{{'VNECONOMY.PAGE_PACKAGES.PREMIUM' | translate}}</div>
+                    <div class="b-items">
+                        <div class="b-item" *ngFor="let item of premium">
+                            <div class="pack-dot"><i class="bi bi-check-lg"></i></div>
+                            <a href="{{item.isBought ? '/list-news/' + item.packageUserId : '/package-pay/' + item.id}}"
+                                class="pack-value">
+                                <p class="title">{{item.name}}</p>
+                                <p class="price">{{fNumber(item)}} VNĐ</p>
+                            </a>
+                        </div>
+                        <ul>
+                            <li>{{'VNECONOMY.PAGE_PACKAGES.ASKONOMY_AI_CHATBOT' | translate}}</li>
+                            <li>{{'VNECONOMY.PAGE_PACKAGES.DAILY_HIGHLIGHTS' | translate}}</li>
+                            <li>{{'VNECONOMY.PAGE_PACKAGES.DIGITAL_EDITION' | translate}}</li>
+                        </ul>
+                    </div>
+                </div>
+                <!-- end gói -->
+            </div>
+        </div>
+    </div>
+</section>
+
+<app-vneconomy-package></app-vneconomy-package>
+<app-vneconomy-register></app-vneconomy-register>
+<app-vneconomy-news-hot></app-vneconomy-news-hot>
+<app-vneconomy-comment></app-vneconomy-comment>
+<app-vneconomy-contact></app-vneconomy-contact>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-packages/vneconomy-packages.component.scss b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-packages/vneconomy-packages.component.scss
new file mode 100644
index 0000000..bdf4f3a
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-packages/vneconomy-packages.component.scss
@@ -0,0 +1,148 @@
+
+/* --------- Gói báo ----------- */
+/* ------------------------------- */
+
+.vne-goibao {
+    background: #fff;
+    padding: 40px 40px 40px 40px;
+}
+
+.vne-goibao .col-info h2.title {
+    font-size: 1.5em;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #eee;
+    margin-bottom: 25px;
+    display: block;
+}
+
+.vne-goibao .pack-box .b-head {
+    background: var(--bs-warning);
+    border-width: 1px 1px 0 1px;
+    border-style: solid;
+    border-color: #ddd;
+    border-radius: 20px 20px 0 0;
+    text-align: center;
+    padding: 10px 5px;
+    font-weight: 700;
+}
+
+.vne-goibao .pack-box .b-items {
+    border-width: 0 1px 1px 1px;
+    border-style: solid;
+    border-color: #ddd;
+    border-radius: 0 0 20px 20px;
+    padding: 15px 20px;
+}
+
+.vne-goibao .pack-box .b-items .b-item .pack-dot {
+    background: var(--bs-warning);
+    width: 25px;
+    height: 25px;
+    position: relative;
+    border-radius: 50%;
+    float: left;
+    margin-top: 5px;
+}
+
+.vne-goibao .pack-box .b-items .b-item .pack-dot i {
+    color: #fff;
+    position: absolute;
+    right: 2px;
+    top: -2px;
+    font-size: 1.5em;
+}
+
+.vne-goibao .pack-box .b-items .b-item {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #eee;
+}
+
+.vne-goibao .pack-box .b-items .b-item:last-of-type {
+    border-bottom: 0;
+}
+
+.vne-goibao .pack-box .b-items .b-item .pack-value {
+    display: block;
+    margin-left: 50px;
+    text-decoration: none;
+}
+
+.vne-goibao .pack-box .b-items .b-item .pack-value p {
+    margin-bottom: 0;
+}
+
+.vne-goibao .pack-box .b-items .b-item .pack-value .title {
+    color: #777;
+}
+
+.vne-goibao .pack-box .b-items .b-item .pack-value .price {
+    color: #000;
+    font-weight: 700;
+    margin-top: -2px;
+}
+
+
+@media (min-width: 1400px) {
+    .vne-goibao .col-info {
+        padding-right: 30px;
+    }
+
+    .vne-goibao .col-pack {
+        border-left: 1px solid #eee;
+        padding-left: 30px;
+        border-top: 0;
+    }
+
+    .vne-goibao .pack-box {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .vne-goibao .pack-box .b-items {
+        height: 100%;
+    }
+}
+
+@media (max-width: 1400px) {
+    .vne-packages .col-pack {
+        border-top: 1px solid #eee;
+    }
+
+    .vne-goibao .pack-box {
+        margin-top: 15px;
+    }
+}
+
+.vne-goibao .vne-intro {
+    height: 100%;
+    display: block;
+    /* flex to scale title */
+}
+
+.vne-goibao .vne-intro .title {
+    background: #b5191d;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    padding: 40px 0;
+}
+
+.vne-goibao .vne-intro .title span:first-child {
+    font-weight: 700;
+}
+
+@media (min-width: 1400px) {
+    .vne-goibao .premium .vne-intro .video {
+        margin-top: 50px;
+    }
+}
+
+.vne-tapchi {
+    background: #fff;
+    padding: 40px 40px 40px 40px;
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-packages/vneconomy-packages.component.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-packages/vneconomy-packages.component.ts
new file mode 100644
index 0000000..8f2ca62
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-packages/vneconomy-packages.component.ts
@@ -0,0 +1,46 @@
+import { Component, OnInit } from '@angular/core';
+import { VneconomyService } from '../vneconomy-home/vneconomy.service';
+import { VneconomyPackagesService } from './vneconomy-packages.service';
+import { formatNumber } from '@angular/common';
+
+@Component({
+  selector: 'app-vneconomy-packages',
+  templateUrl: './vneconomy-packages.component.html',
+  styleUrls: ['./vneconomy-packages.component.scss']
+})
+export class VneconomyPackagesComponent implements OnInit {
+
+  tcktvn: any = [];
+  vet: any = [];
+  premium: any = [];
+  lang: any;
+
+  constructor(
+    private readonly _vneconomyPackagesService: VneconomyPackagesService
+  ) { 
+    this.lang = localStorage.getItem("lang");
+  }
+
+  ngOnInit(): void {
+    this.onGetPackageByNameGroup('TCKTVN');
+    this.onGetPackageByNameGroup('VET');
+    this.onGetPackageByNameGroup('PREMIUM');
+  }
+
+  onGetPackageByNameGroup(group: string) {
+    this._vneconomyPackagesService.GetPackageByNameGroup(group)
+      .subscribe(res => {
+        if (group == 'TCKTVN') this.tcktvn = res;
+        if (group == 'VET') this.vet = res;
+        if (group == 'PREMIUM') this.premium = res;
+      })
+  }
+
+  fNumber(item: any) {
+    const value = item.promotionPrice && item.promotionPrice > 0 ? item.promotionPrice : item.price;
+    let cst = '';
+    if (value)
+      cst = formatNumber(value, 'en-US', this.lang == 'vi' ? '1.0-2' : '1.2-2').replace(/\,/g, '/').replace(/\./g, ',').replace(/\//g, '.');
+    return cst;
+  }
+}
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-packages/vneconomy-packages.module.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-packages/vneconomy-packages.module.ts
new file mode 100644
index 0000000..2640d48
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-packages/vneconomy-packages.module.ts
@@ -0,0 +1,46 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { VneconomyPackagesComponent } from './vneconomy-packages.component';
+import { SwiperModule } from 'swiper/angular';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { BlockUIModule } from 'ng-block-ui';
+import { QuillModule } from 'ngx-quill';
+import { Ng2FlatpickrModule } from 'ng2-flatpickr';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { HttpClient } from '@angular/common/http';
+import { LoginModule } from 'src/app/login/login.module';
+import { VneconomyModule } from '../vneconomy-home/vneconomy.module';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+
+
+@NgModule({
+  declarations: [
+    VneconomyPackagesComponent
+  ],
+  imports: [
+    CommonModule,
+    SwiperModule,
+    BrowserModule,
+    NgbModule,
+    ReactiveFormsModule,
+    RouterModule,
+    BlockUIModule.forRoot(),
+    FormsModule,
+    QuillModule.forRoot(),
+    Ng2FlatpickrModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    }),
+    LoginModule,
+    VneconomyModule
+  ]
+})
+export class VneconomyPackagesModule { }
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-packages/vneconomy-packages.service.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-packages/vneconomy-packages.service.ts
new file mode 100644
index 0000000..b6573ab
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-packages/vneconomy-packages.service.ts
@@ -0,0 +1,20 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class VneconomyPackagesService {
+
+  constructor(
+    private readonly _httpClient: HttpClient,
+  ) { }
+
+  GetPackageByNameGroup(nameGroup: string) {
+    let params = new HttpParams();
+    params = params.append('nameGroup', nameGroup);
+    params = params.append('oid', '27');
+    
+    return this._httpClient.get<any>(`/package/package-by-name-group`, {params});
+  }
+}
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-premium/vneconomy-premium.component.html b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-premium/vneconomy-premium.component.html
new file mode 100644
index 0000000..1af55cb
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-premium/vneconomy-premium.component.html
@@ -0,0 +1,61 @@
+<section id="vne-tapchi" class="container mb-3">
+    <div class="vne-tapchi">
+        <a class="back-home-vne" href="/tap-chi-kinh-te-viet-nam"><i class="uil uil-home"></i>
+            {{'VNECONOMY_HOME_PAGE' | translate}}</a>
+        <div class="row premium">
+            <div class="col-lg-8 col-12 col-info">
+                <!-- premium -->
+                <div class="row">
+                    <div class="col-12 col-md-5 text-center">
+                        <img src="../../../../assets/templace/vneconomy/images/premium.jpg" alt=""
+                            class="img-fluid biabao">
+                    </div>
+                    <div class="col-12 col-md-7 vne-boxinfo mt-3 mt-md-0">
+                        <h2 class="title text-center text-md-start">{{'PREMIUM_PACKAGE' | translate}}</h2>
+                        <p class="sub-title">{{'BENEFITS_INCLUDE' | translate}}</p>
+
+                        <div class="row vne-metas">
+                            <div class="meta-box col-12">
+                                <img src="../../../../assets/templace/vneconomy/images/p1.svg" class="imgbox">
+                                <p class="title">{{'AI_CHATBOT_12_MONTH' | translate}}</p>
+                                <p class="subtitle">{{'AN_EXCLUSIVE_AI_PRODUCT' | translate}}</p>
+                            </div>
+                            <div class="meta-box col-12">
+                                <img src="../../../../assets/templace/vneconomy/images/p2.svg" class="imgbox">
+                                <p class="title">{{'DAILY_HIGHLIGHTS' | translate}}</p>
+                                <p class="subtitle">{{'AN_EXTENDED_FEATURE_UTILIZING' | translate}}</p>
+                            </div>
+                            <div class="meta-box col-12">
+                                <img src="../../../../assets/templace/vneconomy/images/p3.svg" class="imgbox">
+                                <p class="title">{{'FOR_DIGITAL_EDITION' | translate}}</p>
+                                <p class="subtitle">{{'ENJOY_EXCLUSIVE_BENEFITS' | translate}}</p>
+                            </div>
+                        </div>
+                        <div class="group-button text-center text-md-start">
+                            <a name="register" id="register" class="btn btn-warning mt-4" href="/package-pay/301"
+                                role="button">
+                                {{'SIGN_UP' | translate}}
+                            </a>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg col-12 pe-md-0 mt-lg-0 mt-4 pt-3 pt-lg-0 col-pack vne-intro">
+                <div class="ratio ratio-16x9 video">
+                    <iframe src="https://www.youtube.com/embed/z5duwmCHOgs?rel=0"></iframe>
+                </div>
+                <div class="title">
+                    <span>{{'TAP_CHI_KINH_TE_VIET_NAM' | translate}}</span>
+                    <span>Vietnam Economic Times</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<app-vneconomy-package></app-vneconomy-package>
+<app-vneconomy-register></app-vneconomy-register>
+<app-vneconomy-news-hot></app-vneconomy-news-hot>
+<app-vneconomy-comment></app-vneconomy-comment>
+<app-vneconomy-contact></app-vneconomy-contact>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-premium/vneconomy-premium.component.scss b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-premium/vneconomy-premium.component.scss
new file mode 100644
index 0000000..d6efd83
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-premium/vneconomy-premium.component.scss
@@ -0,0 +1,90 @@
+/* ------ premium --------- */
+/* -------------------------- */
+
+@media (min-width: 1400px) {
+    .vne-tapchi .premium .col-info {
+        max-width: 66%;
+    }
+}
+
+.vne-tapchi .premium h2.title {
+    margin-bottom: 5px;
+}
+
+.vne-tapchi .premium p.sub-title {
+    color: #777;
+    margin-bottom: 20px;
+}
+
+.vne-tapchi .premium .vne-metas div.meta-box {
+    margin-bottom: 15px;
+}
+
+.vne-tapchi .premium .vne-metas .imgbox {
+    max-width: 50px;
+    float: left;
+    margin-right: 12px;
+}
+
+.vne-tapchi .premium .vne-metas .title {
+    font-weight: 700;
+}
+
+.vne-tapchi .premium .vne-metas .subtitle {
+    font-size: 0.9em;
+    color: #777;
+    line-height: 1.2em;
+}
+
+.vne-tapchi .vne-boxinfo #register {
+    padding-left: 30px;
+    padding-right: 30px;
+    color: #fff;
+}
+
+.vne-tapchi .vne-intro {
+    height: 100%;
+    display: block;
+    /* flex to scale title */
+}
+
+.vne-tapchi .vne-intro .title {
+    background: #b5191d;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    padding: 40px 0;
+}
+
+.vne-tapchi .vne-intro .title span:first-child {
+    font-weight: 700;
+}
+
+@media (min-width: 1400px) {
+    .vne-tapchi .premium .vne-intro .video {
+        margin-top: 50px;
+    }
+}
+
+.vne-tapchi {
+    background: #fff;
+    padding: 40px 40px 40px 40px;
+}
+
+.back-home-vne {
+    margin-bottom: 10px;
+    color: #fcaf17;
+    font-size: 18px;
+    position: sticky;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    i{
+        font-size: 20px;
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-premium/vneconomy-premium.component.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-premium/vneconomy-premium.component.ts
new file mode 100644
index 0000000..4933ead
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-premium/vneconomy-premium.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-vneconomy-premium',
+  templateUrl: './vneconomy-premium.component.html',
+  styleUrls: ['./vneconomy-premium.component.scss']
+})
+export class VneconomyPremiumComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-premium/vneconomy-premium.module.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-premium/vneconomy-premium.module.ts
new file mode 100644
index 0000000..ba06375
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-premium/vneconomy-premium.module.ts
@@ -0,0 +1,46 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { VneconomyPremiumComponent } from './vneconomy-premium.component';
+import { SwiperModule } from 'swiper/angular';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { BlockUIModule } from 'ng-block-ui';
+import { QuillModule } from 'ngx-quill';
+import { Ng2FlatpickrModule } from 'ng2-flatpickr';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { LoginModule } from 'src/app/login/login.module';
+import { HttpClient } from '@angular/common/http';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { VneconomyModule } from '../vneconomy-home/vneconomy.module';
+
+
+
+@NgModule({
+  declarations: [
+    VneconomyPremiumComponent
+  ],
+  imports: [
+    CommonModule,
+    SwiperModule,
+    BrowserModule,
+    NgbModule,
+    ReactiveFormsModule,
+    RouterModule,
+    BlockUIModule.forRoot(),
+    FormsModule,
+    QuillModule.forRoot(),
+    Ng2FlatpickrModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    }),
+    LoginModule,
+    VneconomyModule
+  ]
+})
+export class VneconomyPremiumModule { }
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-premium/vneconomy-premium.service.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-premium/vneconomy-premium.service.ts
new file mode 100644
index 0000000..74dc1f0
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-premium/vneconomy-premium.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class VneconomyPremiumService {
+
+  constructor() { }
+}
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-profile/vneconomy-profile.component.html b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-profile/vneconomy-profile.component.html
new file mode 100644
index 0000000..fd55be3
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-profile/vneconomy-profile.component.html
@@ -0,0 +1,10 @@
+<div id="vne">
+    <app-vneconomy-slider></app-vneconomy-slider>
+    <app-vneconomy-package></app-vneconomy-package>
+    <a [href]="month ? '/askonomy' : '/tap-chi-kinh-te-viet-nam/askonomy'" [target]="{'_blank': month }">
+        <img src="../../../../assets/templace/vneconomy/images/askonomy-banner.PNG" alt="" class="img-fluid">
+    </a>
+    <app-vneconomy-news-hot></app-vneconomy-news-hot>
+    <app-vneconomy-comment></app-vneconomy-comment>
+    <app-vneconomy-contact></app-vneconomy-contact>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-profile/vneconomy-profile.component.scss b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-profile/vneconomy-profile.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-profile/vneconomy-profile.component.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-profile/vneconomy-profile.component.ts
new file mode 100644
index 0000000..c5f8e7e
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-profile/vneconomy-profile.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-vneconomy-profile',
+  templateUrl: './vneconomy-profile.component.html',
+  styleUrls: ['./vneconomy-profile.component.scss']
+})
+export class VneconomyProfileComponent implements OnInit {
+  
+  month = false;
+  currentUser: any = {};
+
+  constructor() { 
+    this.currentUser = JSON.parse(localStorage.getItem("currentCustomer") ?? "{}");
+    if (typeof (this.currentUser) === 'object' && this.currentUser.month) {
+      if (this.currentUser.month && this.currentUser.month > 5)
+        this.month = true;
+    }
+  }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-profile/vneconomy-profile.module.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-profile/vneconomy-profile.module.ts
new file mode 100644
index 0000000..9d31d68
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-profile/vneconomy-profile.module.ts
@@ -0,0 +1,44 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { VneconomyProfileComponent } from './vneconomy-profile.component';
+import { VneconomyModule } from '../vneconomy-home/vneconomy.module';
+import { SwiperModule } from 'swiper/angular';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { BlockUIModule } from 'ng-block-ui';
+import { QuillModule } from 'ngx-quill';
+import { Ng2FlatpickrModule } from 'ng2-flatpickr';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { HttpClient } from '@angular/common/http';
+import { LoginModule } from 'src/app/login/login.module';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+
+
+@NgModule({
+  declarations: [VneconomyProfileComponent],
+  imports: [
+    CommonModule,
+    VneconomyModule,
+    SwiperModule,
+    BrowserModule,
+    NgbModule,
+    ReactiveFormsModule,
+    RouterModule,
+    BlockUIModule.forRoot(),
+    FormsModule,
+    QuillModule.forRoot(),
+    Ng2FlatpickrModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    }),
+    LoginModule
+  ]
+})
+export class VneconomyProfileModule { }
diff --git a/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-profile/vneconomy-profile.service.ts b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-profile/vneconomy-profile.service.ts
new file mode 100644
index 0000000..5aa9a1a
--- /dev/null
+++ b/Phaha_Package/src/app/editorial-office/vneconomy/vneconomy-profile/vneconomy-profile.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class VneconomyProfileService {
+
+  constructor() { }
+}
diff --git a/Phaha_Package/src/app/event-news/event-news-item/event-news-item.component.html b/Phaha_Package/src/app/event-news/event-news-item/event-news-item.component.html
new file mode 100644
index 0000000..3ada63e
--- /dev/null
+++ b/Phaha_Package/src/app/event-news/event-news-item/event-news-item.component.html
@@ -0,0 +1,63 @@
+<div class="hot-news box-body">
+  <div class="box-head position-relative">
+    <div class="box-header">
+      <a href="javascript: void(0);">
+        {{'event-news-item.title' | translate}}
+      </a>
+    </div>
+  </div>
+  <div class="content">
+    <div class="row">
+      <div class="col-lg-6 col-md-12 col-12">
+        <div class="new-item-left p-3">
+          <div class="new-left-image" *ngIf="listNewsHot.result[0]">
+            <a routerLink="/news/detail/{{listNewsHot.result[0]?.id}}">
+              <img src="{{baseUrl + listNewsHot.result[0]?.image}}" class="img-hot-news-left"
+                (error)="errorHandler($event)">
+            </a>
+          </div>
+          <div class="new-left-content p-2">
+            <h3 class="new-left-title">
+              <a routerLink="/news/detail/{{listNewsHot.result[0]?.id}}">{{listNewsHot.result[0]?.title}}</a>
+            </h3>
+            <label class="new-left-time">{{listNewsHot.result[0]?.dateCreate | date: 'dd/MM/YYYY hh:ss'}} |
+              {{listNewsHot.result[0]?.view}} lượt xem</label>
+            <div class="new-left-description">{{listNewsHot.result[0]?.description}}</div>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-6 col-md-12 col-12">
+        <ng-container *ngFor="let itemNews of listNewsHot.result; let i = index">
+          <div class="new-right-item p-3" *ngIf="i > 0">
+            <div class="row">
+              <div class="col-md-4 col-12">
+                <div class="new-right-image">
+                  <a routerLink="/news/detail/{{itemNews.id}}">
+                    <img src="{{baseUrl + itemNews.image}}" class="img-hot-news-right w-100"
+                      (error)="errorHandler($event)">
+                  </a>
+                </div>
+              </div>
+              <div class="col-md-8 col-12">
+                <div class="new-right-content">
+                  <h3 class="new-right-title">
+                    <a routerLink="/news/detail/{{itemNews.id}}">{{itemNews.title}}</a>
+                  </h3>
+                  <label class="new-right-time">{{itemNews.dateCreate | date: 'dd/MM/YYYY hh:ss'}} |
+                    {{itemNews.view}} lượt xem</label>
+                  <div class="new-right-description">{{itemNews.description}}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </ng-container>
+
+      </div>
+    </div>
+    <!-- <div class="pagination justify-content-end mt-3">
+      <ngb-pagination [collectionSize]="listNewsHot.totalItemCount" [(page)]="listNewsHot.pageNumber" [maxSize]="3"
+        [rotate]="true" [pageSize]="listNewsHot.pageSize" (pageChange)="onPageChange($event)">
+      </ngb-pagination>
+    </div> -->
+  </div>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/event-news/event-news-item/event-news-item.component.scss b/Phaha_Package/src/app/event-news/event-news-item/event-news-item.component.scss
new file mode 100644
index 0000000..1a75895
--- /dev/null
+++ b/Phaha_Package/src/app/event-news/event-news-item/event-news-item.component.scss
@@ -0,0 +1,255 @@
+app-event-news-item {
+  .hot-news {
+    background: #ffffff;
+    padding: 10px;
+  }
+
+  .img-hot-news-left {
+    max-width: 100%;
+  }
+
+  .content-news-left {
+    .title-news {
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 136.19%;
+      color: #000000;
+      display: block;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      /* số dòng hiển thị */
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      cursor: pointer;
+    }
+
+    .time-news {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 136.19%;
+      color: #808285;
+    }
+
+    .description-news {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 136.19%;
+      text-align: justify;
+      display: block;
+      display: -webkit-box;
+      -webkit-line-clamp: 6;
+      /* số dòng hiển thị */
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .content-news-right {
+    .title-news {
+      font-weight: 400;
+      font-size: 18px;
+      line-height: 136.19%;
+      color: #000000;
+      display: block;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      /* số dòng hiển thị */
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      cursor: pointer;
+    }
+
+    .description-news {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 136.19%;
+      text-align: justify;
+      color: #808285;
+      display: block;
+      display: -webkit-box;
+      -webkit-line-clamp: 4;
+      /* số dòng hiển thị */
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .img-thumbnail {
+    margin-top: 10px;
+  }
+
+  .box-head {
+    margin-bottom: 5px;
+    padding: 5px 0;
+    border-bottom: 1px solid #eeeeee;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0 -10px;
+  }
+
+  .box-header {
+    a {
+      font-weight: 400;
+      font-size: 24px;
+      color: #000000;
+      text-decoration: none;
+      margin-left: 10px;
+    }
+  }
+
+  .box-header::after {
+    content: '';
+    width: 100px;
+    border-top: 2px solid #f26b1b;
+    position: absolute;
+    color: transparent;
+    top: 45px;
+    left: 10px;
+  }
+
+  .see-all {
+    a {
+      display: flex;
+      align-items: center;
+      text-decoration: none;
+      color: #ABB5BE;
+      margin-right: 10px;
+    }
+
+    i {
+      color: #152536;
+      font-size: 24px;
+    }
+  }
+
+  .page-item.active .page-link {
+    background-color: #fcaf17;
+    border: #fcaf17;
+    color: #fff !important;
+    width: 35px;
+    text-align: center;
+    padding-top: 7px !important;
+  }
+
+  .page-item {
+    margin: 0 3px !important;
+    border-radius: 50% !important;
+
+    a {
+      border: none !important;
+      color: #222 !important;
+    }
+  }
+
+  .page-item a.page-link {
+    border-radius: 50%;
+  }
+
+  .page-item:last-child .page-link {
+    border-top-right-radius: 50% !important;
+    border-bottom-right-radius: 50% !important;
+  }
+
+  .page-link:focus {
+    box-shadow: none !important;
+  }
+
+  .page-item:first-child .page-link {
+    border-top-left-radius: 50% !important;
+    border-bottom-left-radius: 50% !important;
+  }
+
+  .page-link:hover {
+    width: 30px;
+    text-align: center;
+  }
+
+  .page-link {
+    width: 35px !important;
+    height: 35px !important;
+    text-align: center;
+    padding-top: 7px !important;
+  }
+
+  .image-news {
+    text-align: center;
+    overflow: hidden !important;
+    width: 100%;
+    height: 100%;
+
+    a {
+      img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        transition: transform .6s;
+      }
+
+      img:hover {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  .image-news-detail {
+    overflow: hidden !important;
+    width: 100%;
+
+    a {
+      img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        transition: transform .6s;
+      }
+
+      img:hover {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  .new-right-content {
+    h3 {
+      a:hover {
+        color: #fcaf17 !important;
+        cursor: pointer !important;
+      }
+    }
+  }
+
+  @media only screen and (max-width: 600px) {
+    .img-hot-news-left {
+      width: 100% !important;
+    }
+
+    .box-header {
+      padding: 0 10px;
+      width: 100%;
+    }
+
+    .box-header::after {
+      border: none;
+    }
+
+    .box-header a {
+      padding: 0;
+      margin-left: 0;
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    .box-head {
+      flex-wrap: wrap;
+    }
+
+    .see-all {
+      padding: 0 10px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/event-news/event-news-item/event-news-item.component.ts b/Phaha_Package/src/app/event-news/event-news-item/event-news-item.component.ts
new file mode 100644
index 0000000..e8480d8
--- /dev/null
+++ b/Phaha_Package/src/app/event-news/event-news-item/event-news-item.component.ts
@@ -0,0 +1,57 @@
+import { Component, DebugElement, OnInit, ViewEncapsulation } from '@angular/core';
+import { PageModel } from 'src/app/Models/model';
+import { environment } from 'src/environments/environment';
+import { EventNewsService } from '../event-news.service';
+
+@Component({
+  selector: 'app-event-news-item',
+  templateUrl: './event-news-item.component.html',
+  styleUrls: ['./event-news-item.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class EventNewsItemComponent implements OnInit {
+  public baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  public listNewsHot: PageModel = new PageModel();
+  public eventNewsHot: any = [{}];
+  public listEventNews: any = {
+    pageNumber: 1,
+    pageSize: 4,
+    result: [],
+    totalRecords: 0,
+  };
+  constructor(
+    private _eventNewsService: EventNewsService,
+  ) {
+    this.listNewsHot.pageSize = 4;
+  }
+
+  errorHandler(event: any) {
+    event.target.src = "/assets/images/news/newspaper-default.png";
+  }
+  onGetListEventNewsService() {
+    this._eventNewsService.getListEventNews(this.listEventNews)
+      .pipe()
+      .subscribe(data => {
+        this.eventNewsHot[0] = data.data.result[0];
+        this.listEventNews.result = data.data.result;
+        this.listEventNews.totalRecords = data.data.totalItemCount;
+      });
+  }
+
+  onPageChange(numberPage: number) {
+    this.listEventNews.pageNumber = numberPage;
+    this.onGetListNewsHot();
+  }
+
+  onGetListNewsHot() {
+    this._eventNewsService.getListHotNews(this.listEventNews).pipe().subscribe(res => {
+      this.listNewsHot.result = res.result;
+      this.listNewsHot.totalItemCount = res.totalItemCount;
+    })
+  }
+
+  ngOnInit(): void {
+    this.onGetListEventNewsService();
+    this.onGetListNewsHot();
+  }
+}
diff --git a/Phaha_Package/src/app/event-news/event-news.module.ts b/Phaha_Package/src/app/event-news/event-news.module.ts
new file mode 100644
index 0000000..ac6fd54
--- /dev/null
+++ b/Phaha_Package/src/app/event-news/event-news.module.ts
@@ -0,0 +1,29 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {EventNewsItemComponent} from "./event-news-item/event-news-item.component";
+import { RouterModule } from '@angular/router';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClient } from '@angular/common/http';
+
+@NgModule({
+  declarations: [EventNewsItemComponent],
+  exports: [
+    EventNewsItemComponent
+  ],
+  imports: [
+    CommonModule,
+    RouterModule,
+    NgbModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    })
+  ]
+})
+export class EventNewsModule {
+}
diff --git a/Phaha_Package/src/app/event-news/event-news.service.ts b/Phaha_Package/src/app/event-news/event-news.service.ts
new file mode 100644
index 0000000..06d0073
--- /dev/null
+++ b/Phaha_Package/src/app/event-news/event-news.service.ts
@@ -0,0 +1,28 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class EventNewsService {
+
+    constructor(
+        private _httpClient: HttpClient,
+    ) {
+    }
+
+    getListEventNews(pageModel: any) {
+        let params = new HttpParams();
+        params = params.append('pageSize', pageModel.pageSize);
+        params = params.append('page', pageModel.pageNumber);
+        return this._httpClient.get<any>(`/newspaper/news-event`, { params });
+    }
+
+    getListHotNews(pageModel: any) {
+        let params = new HttpParams();
+        params = params.append('pageSize', pageModel.pageSize);
+        params = params.append('page', pageModel.pageNumber);
+        return this._httpClient.get<any>(`/tiding/list-hot`, { params });
+    }
+
+}
diff --git a/Phaha_Package/src/app/forget-password/forget-password.component.html b/Phaha_Package/src/app/forget-password/forget-password.component.html
new file mode 100644
index 0000000..9f1066d
--- /dev/null
+++ b/Phaha_Package/src/app/forget-password/forget-password.component.html
@@ -0,0 +1,33 @@
+<div class="modal-header">
+  <h4 class="modal-title" id="modalLabel">Đăng nhập</h4>
+  <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
+</div>
+<div class="modal-body" id="ModalForget">
+  <div class="form-forget">
+    <h4 class="text-center mb- title-foger">{{'forgot-password.title'| translate}}</h4>
+    <p class="mb-2">
+      {{'forgot-password.content'| translate}}
+    </p>
+    <form [formGroup]="formData" (ngSubmit)="onSubmit()">
+      <div class="input-text border-top pt-3 mb-4">
+        <label for="forgetEmail" class="font-custom fs-14">Email <span class="text-danger">(*)</span></label>
+        <input formControlName="email" placeholder=" {{'forgot-password.placeholder'| translate}}" id="forgetEmail"
+          class="form-control" />
+        <div *ngIf="isValidate && f['email'].errors" class="invalid-feedback"
+          [ngClass]="{ 'd-block': isValidate && f['email'].errors }">
+          <div *ngIf="f['email'].errors['pattern']">
+            {{'forgot-password.error-email'| translate}}
+          </div>
+          <div *ngIf="f['email'].errors['required']">
+            {{'forgot-password.blank-email'| translate}}
+          </div>
+        </div>
+      </div>
+      <div class="action-send-mail float-end">
+        <button type="submit" class="btn btn-outline-success"> {{'forgot-password.btn-send'| translate}}</button>
+        <button (click)="onBack()" type="button" class="btn btn-outline-warning"> {{'forgot-password.btn-back'|
+          translate}}</button>
+      </div>
+    </form>
+  </div>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/forget-password/forget-password.component.scss b/Phaha_Package/src/app/forget-password/forget-password.component.scss
new file mode 100644
index 0000000..c96d4f6
--- /dev/null
+++ b/Phaha_Package/src/app/forget-password/forget-password.component.scss
@@ -0,0 +1,21 @@
+.action-send-mail {
+    button {
+        margin: 10px;
+    }
+}
+
+.font-custom {
+    font-size: 14px;
+    font-weight: normal;
+}
+
+.title-foger {
+    font-size: 18px;
+    color: #888;
+    font-weight: bold;
+}
+
+#ModalForget {
+    max-width: 500px !important;
+    margin: auto;
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/forget-password/forget-password.component.ts b/Phaha_Package/src/app/forget-password/forget-password.component.ts
new file mode 100644
index 0000000..aae6d4a
--- /dev/null
+++ b/Phaha_Package/src/app/forget-password/forget-password.component.ts
@@ -0,0 +1,54 @@
+import {Component, EventEmitter, OnInit, Output, ViewEncapsulation, inject} from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {ToastrService} from 'ngx-toastr';
+import {ForgetPasswordService} from "./forget-password.service";
+import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { LoginComponent } from '../login/login.component';
+
+@Component({
+  selector: 'app-forget-password',
+  templateUrl: './forget-password.component.html',
+  styleUrls: ['./forget-password.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class ForgetPasswordComponent implements OnInit {
+  modal = inject(NgbActiveModal);
+  @Output() callBack = new EventEmitter<string>();
+  public formData: FormGroup;
+  public isValidate: boolean = false;
+
+
+  constructor(
+    private readonly _formbuilder: FormBuilder,
+    private readonly _toasrt: ToastrService,
+    private readonly _modalService: NgbModal,
+    private readonly _forgotService: ForgetPasswordService,
+  ) {
+    this.formData = this._formbuilder.group({
+      email: ['', [Validators.required, Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$")]]
+    })
+  }
+
+  ngOnInit(): void {
+  }
+
+  onSubmit() {
+    this.isValidate = true;
+    if (this.formData.valid) {
+      this._forgotService.forgotPassword(this.formData.value['email']).subscribe(data => {
+        if (data.success) {
+          this._toasrt.success('Gửi email thành công', 'Thành công')
+        }
+      })
+    }
+  }
+
+  onBack() {
+    this._modalService.dismissAll(`Close`);
+    this._modalService.open(LoginComponent, { size: 'md', centered: true });
+  }
+
+  get f() {
+    return this.formData.controls;
+  }
+}
diff --git a/Phaha_Package/src/app/forget-password/forget-password.service.ts b/Phaha_Package/src/app/forget-password/forget-password.service.ts
new file mode 100644
index 0000000..d2133c0
--- /dev/null
+++ b/Phaha_Package/src/app/forget-password/forget-password.service.ts
@@ -0,0 +1,17 @@
+import {Injectable} from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ForgetPasswordService {
+
+  constructor(
+    private http: HttpClient,
+  ) {
+  }
+
+  forgotPassword(email: any) {
+    return this.http.post<any>(`/auth/forgot-password`, {email: email});
+  }
+}
diff --git a/Phaha_Package/src/app/home-book-intro/home-book-intro.component.html b/Phaha_Package/src/app/home-book-intro/home-book-intro.component.html
new file mode 100644
index 0000000..bcac28f
--- /dev/null
+++ b/Phaha_Package/src/app/home-book-intro/home-book-intro.component.html
@@ -0,0 +1,54 @@
+<block-ui>
+    <div class="wrapper">
+        <div class="container">
+            <section class="intro-banner">
+                <div class="center-body">
+                    <div class="slogan text-center text-uppercase fs-2">
+                        post enp bookstore - hiệu sách online trực tuyến cho mọi người
+                    </div>
+                    <div id="carouselExampleIndicators" class="banner carousel slide" data-bs-ride="carousel">
+                        <div class="carousel-indicators">
+                            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+                            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
+                            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
+                        </div>
+                        <div class="carousel-inner">
+                            <div class="carousel-item active">
+                                <img src="../../assets/images/banner/banner-bookstore.png" class="d-block w-100" alt="...">
+                            </div>
+                            <div class="carousel-item">
+                                <img src="../../assets/images/banner/banner-dark.png" class="d-block w-100" alt="...">
+                            </div>
+                            <div class="carousel-item">
+                                <img src="../../assets/images/banner/banner-yellow.png" class="d-block w-100" alt="...">
+                            </div>
+                        </div>
+                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
+                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                            <span class="visually-hidden">Previous</span>
+                        </button>
+                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
+                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                            <span class="visually-hidden">Next</span>
+                        </button>
+                    </div>
+                </div>
+            </section>
+            <section id="bestsellers">
+                <div class="center-body">
+                    <app-book-bestsellers></app-book-bestsellers>
+                </div>
+            </section>
+            <section id="subject">
+                <div class="center-body">
+                    <app-book-subject></app-book-subject>
+                </div>
+            </section>
+            <section id="newarrivals">
+                <div class="center-body">
+                    <app-book-new-arrivals></app-book-new-arrivals>
+                </div>
+            </section>
+        </div>
+    </div>
+</block-ui>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/home-book-intro/home-book-intro.component.scss b/Phaha_Package/src/app/home-book-intro/home-book-intro.component.scss
new file mode 100644
index 0000000..cf9fc81
--- /dev/null
+++ b/Phaha_Package/src/app/home-book-intro/home-book-intro.component.scss
@@ -0,0 +1,52 @@
+app-home-book-intro {
+    color: #222222;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    width: 100vw;
+
+    .wrapper {
+        height: 100vh;
+        scroll-snap-type: y mandatory;
+        overflow-y: scroll;
+        scroll-behavior: smooth;
+        transition: all 2s;
+    }
+
+    section {
+        height: 100vh;
+        scroll-snap-align: center;
+        position: relative;
+
+        .center-body {
+            position: absolute;
+            width: 100%;
+            top: 50%;
+            left: 50%;
+            -ms-transform: translate(-50%, -50%);
+            transform: translate(-50%, -50%);
+        }
+    }
+
+    .intro-banner {
+        .slogan {
+            font-weight: 500;
+            margin-bottom: 32px;
+        }
+    
+        .banner {
+            overflow: hidden;
+            border-radius: 24px;
+            border: 6px solid #fff;
+            width: 100%;
+            img {
+                width: 80%;
+                height: auto;
+                object-fit: contain;
+                width: 100%;
+                max-height: 100%;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/home-book-intro/home-book-intro.component.ts b/Phaha_Package/src/app/home-book-intro/home-book-intro.component.ts
new file mode 100644
index 0000000..806c4e9
--- /dev/null
+++ b/Phaha_Package/src/app/home-book-intro/home-book-intro.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-home-book-intro',
+  templateUrl: './home-book-intro.component.html',
+  styleUrls: ['./home-book-intro.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class HomeBookIntroComponent implements OnInit {
+
+  constructor() { }
+
+  scrollHandler(e: any) {
+    clearTimeout(e.target.scrollTimeout); //clear previous timeout
+
+    e.target.scrollTimeout = setTimeout(function() {
+    }, 1000);
+}
+
+  ngOnInit(): void {
+    // window.addEventListener('scroll', this.scrollHandler);
+  }
+
+}
diff --git a/Phaha_Package/src/app/home-book-intro/home-book-intro.module.ts b/Phaha_Package/src/app/home-book-intro/home-book-intro.module.ts
new file mode 100644
index 0000000..bd7a0e1
--- /dev/null
+++ b/Phaha_Package/src/app/home-book-intro/home-book-intro.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BlockUIModule } from 'ng-block-ui';
+
+
+@NgModule({
+  declarations: [
+  ],
+  imports: [
+    CommonModule,
+    BlockUIModule.forRoot()
+  ]
+})
+export class HomeBookIntroModule { }
diff --git a/Phaha_Package/src/app/home-book-intro/home-book-intro.service.ts b/Phaha_Package/src/app/home-book-intro/home-book-intro.service.ts
new file mode 100644
index 0000000..941093d
--- /dev/null
+++ b/Phaha_Package/src/app/home-book-intro/home-book-intro.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HomeBookIntroService {
+
+  constructor() { }
+}
diff --git a/Phaha_Package/src/app/home/author-list/author-list.component.html b/Phaha_Package/src/app/home/author-list/author-list.component.html
new file mode 100644
index 0000000..861fd7b
--- /dev/null
+++ b/Phaha_Package/src/app/home/author-list/author-list.component.html
@@ -0,0 +1,30 @@
+<block-ui>
+    <div class="container pt-4 ">
+        <div class="card page-author">
+            <div class="container-fluid">
+                <header class="office-header">
+                    <span>Danh sách tác giả</span>
+                </header>
+                <div class="box-ketword">
+                    <button type="button" [ngClass]="dataModel.keyWord == '' ? 'btn-active' : ''" (click)="onSetKeyword('');">Tất cả</button>
+                    <button title="button" [ngClass]="dataModel.keyWord == item ? 'btn-active' : ''" *ngFor="let item of keySearch" (click)="onSetKeyword(item);">{{item}}</button>
+                </div>
+                <div class="author-list">
+                    <div class="row">
+                        <div class="col-md-3 col-sm-6 col-xs-6" *ngFor="let item of dataModel.result">
+                            <div class="author-item">
+                                <a routerLink="/chi-tiet-goi/{{item.id}}">{{item.name}}</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="cus-page">
+                    <ngb-pagination [collectionSize]="dataModel.totalItemCount" [(page)]="dataModel.pageNumber"
+                        [maxSize]="3" [rotate]="true" [pageSize]="dataModel.pageSize"
+                        (pageChange)="onPageChange($event)">
+                    </ngb-pagination>
+                </div>
+            </div>
+        </div>
+    </div>
+</block-ui>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/home/author-list/author-list.component.scss b/Phaha_Package/src/app/home/author-list/author-list.component.scss
new file mode 100644
index 0000000..de84231
--- /dev/null
+++ b/Phaha_Package/src/app/home/author-list/author-list.component.scss
@@ -0,0 +1,82 @@
+.page-author {
+    padding: 16px;
+    .office-header {
+        text-transform: uppercase;
+        font-weight: 600;
+        margin-bottom: 20px;
+        padding-bottom: 5px;
+        border-bottom: 1px solid #ccc;
+        span {
+            font-size: 24px;
+            padding-bottom: 8px;
+            color: #666;
+            border-bottom: 3px solid #fcaf17;
+        }
+    }
+
+    .author-list{
+        background: #efefef;
+        padding: 16px;
+        border-radius: 5px;
+        margin-bottom: 20px;
+        .author-item{
+            background: #fff;
+            box-shadow: 0 0 2px #fff;
+
+            a {
+                padding: 8px 15px;
+                font-size: 16px;
+                color: #666;
+                display: block;
+                text-decoration: none;
+                &:hover {
+                    font-weight: 600;
+                }
+            }
+        }
+    }
+
+    .box-ketword{
+        margin-bottom: 10px;
+        button{
+            border: none;
+            background: none;
+            padding: 4px 8px;
+            border-radius: 5px;
+            margin: 0 2px;
+            &.btn-active, &:hover{
+                background: #fcaf17;
+                color: #fff;
+            }
+        }
+    }
+
+    ::ng-deep .cus-page {
+        display: flex;
+        justify-content: flex-end;
+        li.page-item,
+        li.page-item.disabled {
+            a,
+            .page-link {
+                background-color: #e9ecef;
+                border-color: #e9ecef;
+                color: #222;
+            }
+        }
+        li.page-item {
+            width: 36px;
+            text-align: center;
+            line-height: 24px;
+            margin: 0 2px;
+            border-radius: 50%;
+            overflow: hidden;
+            font-weight: bold;
+        }
+    
+        li.page-item.active .page-link {
+            background-color: #e09500;
+            border-color: #e09500;
+            color: #fff;
+        }
+    }
+}
diff --git a/Phaha_Package/src/app/home/author-list/author-list.component.ts b/Phaha_Package/src/app/home/author-list/author-list.component.ts
new file mode 100644
index 0000000..c9dd269
--- /dev/null
+++ b/Phaha_Package/src/app/home/author-list/author-list.component.ts
@@ -0,0 +1,43 @@
+import { Component, OnInit } from '@angular/core';
+import { PageModel } from 'src/app/Models/model';
+import { AuthorListService } from './author-list.service';
+
+@Component({
+  selector: 'app-author-list',
+  templateUrl: './author-list.component.html',
+  styleUrls: ['./author-list.component.scss']
+})
+export class AuthorListComponent implements OnInit {
+  dataModel: PageModel = new PageModel();
+  keySearch = ['A', 'Ă', 'Â', 'B', 'C', 'D', 'Đ', 'E', 'Ê', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'Ô', 'Ơ', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
+
+  constructor(
+    private _authorListService: AuthorListService
+  ) {
+    this.dataModel.pageSize = 40;
+  }
+
+  onGetListData() {
+    this._authorListService.onGetList(this.dataModel.keyWord, this.dataModel.pageNumber, this.dataModel.pageSize)
+      .subscribe(data => {
+        const keyword = this.dataModel.keyWord;
+        this.dataModel = data;
+        this.dataModel.keyWord = keyword;
+      });
+  }
+
+  onPageChange(numberPage: number): void {
+    this.dataModel.pageNumber = numberPage;
+    this.onGetListData();
+  }
+
+  onSetKeyword(keyword: string) {
+    this.dataModel.pageNumber = 1;
+    this.dataModel.keyWord = keyword;
+    this.onGetListData();
+  }
+
+  ngOnInit(): void {
+    this.onGetListData();
+  }
+}
diff --git a/Phaha_Package/src/app/home/author-list/author-list.service.ts b/Phaha_Package/src/app/home/author-list/author-list.service.ts
new file mode 100644
index 0000000..9b5d9bd
--- /dev/null
+++ b/Phaha_Package/src/app/home/author-list/author-list.service.ts
@@ -0,0 +1,18 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthorListService {
+
+  constructor(private _httpClient: HttpClient) { }
+
+  onGetList(keyWord: string, pageNumber: number, pageSize: number) {
+    let params = new HttpParams();
+    params = params.append('keyword', keyWord);
+    params = params.append('pagenumber', pageNumber);
+    params = params.append('pagesize', pageSize);
+    return this._httpClient.get<any>(`/author/list`, { params });
+  }
+}
diff --git a/Phaha_Package/src/app/home/home-book-license/home-book-license.component.html b/Phaha_Package/src/app/home/home-book-license/home-book-license.component.html
new file mode 100644
index 0000000..7d697ed
--- /dev/null
+++ b/Phaha_Package/src/app/home/home-book-license/home-book-license.component.html
@@ -0,0 +1,187 @@
+<div class="home-book-license box-body">
+    <div class="box-head position-relative">
+        <div class="box-header">
+          <a href="#">{{'home-book-license.title' | translate}}</a>
+        </div>
+        <div class="see-all">
+          <a routerLink="#">{{'cta.see-more' | translate}} <i class="uil uil-angle-right"></i></a>
+        </div>
+      </div>
+    <div class="box-body">
+        <div class="row">
+            <div class="box-body-sidebar col-xl-2 col-lg-12">
+                <div class="links mt-4">
+                    <a href="#">{{'home-book-license.best-sellers' | translate}}</a>
+                    <a href="#">{{'home-book-license.sale' | translate}}</a>
+                    <a href="#">{{'home-book-license.science-tech' | translate}}</a>
+                    <a href="#">{{'home-book-license.business' | translate}}</a>
+                    <a href="#">{{'home-book-license.literature' | translate}}</a>
+                    <a href="#">{{'home-book-license.text-book' | translate}}</a>
+                    <a href="#">{{'home-book-license.kids' | translate}}</a>
+                    <a href="#">{{'home-book-license.parenting-family' | translate}}</a>
+                    <a href="#">{{'home-book-license.healthy' | translate}}</a>
+                    <a href="#">{{'home-book-license.biography' | translate}}</a>
+                    <a href="#">{{'home-book-license.poetry' | translate}}</a>
+                    <a href="#">{{'home-book-license.mystery' | translate}}</a>
+                    <a href="#">{{'home-book-license.psychology' | translate}}</a>
+                </div>
+            </div>
+            <div class="box-body-products col-xl-10 col-lg-12">
+                <div class="row">
+                    <div id="book" class="col-sm-12 col-md-12 col-lg-6" >
+                        <img src="../../../assets/images/book/td-nv-dty-184-3.jpg" alt="" />
+                        <div class="book-desc d-flex flex-column justify-content-between">
+                            <ul>
+                                <li><a href="javascript: void(0);" class="book-title">Vật chất </a></li>
+                                <li><a href="javascript: void(0);" class="author">Science Encyclopedia</a></li>
+                                <li>
+                                    <div class="d-flex align-items-center" style="gap: 12px">
+                                        <div class="rating d-flex" style="gap: 4px;">
+                                            <span class="bi-star-fill selected"></span>
+                                            <span class="bi-star-fill selected"></span>
+                                            <span class="bi-star-fill selected"></span>
+                                            <span class="bi-star-fill selected"></span>
+                                            <span class="bi-star-fill non-select"></span>
+                                        </div>
+                                        <p style="margin: 0; color: #808285;">(0 {{'home-book-license.comment' | translate}})</p>
+                                    </div>
+                                </li>
+                            </ul>
+                            <div class="prices">
+                                <label class="price">260,000đ</label>
+                                <div class="d-flex align-items-center" style="gap: 12px">
+                                    <label class="price-sale">231,400đ</label>
+                                    <label class="promotion">-11%</label>
+                                </div>
+                            </div>
+                            <div class="group-button">
+                                <button type="button" class="btn btn-buy">{{'cta.buy' | translate}}</button>
+                                <button type="button" class="btn btn-detail">
+                                    {{'cta.add' | translate}}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="book" class="col-sm-12 col-md-12 col-lg-6" >
+                        <img src="../../../assets/images/book/td-nv-dty-184-2.jpg" alt="" />
+                        <div class="book-desc d-flex flex-column justify-content-between">
+                            <ul>
+                                <li><a href="#" class="book-title">Trái đất và vũ trụ  </a></li>
+                                <li><a href="#" class="author">Science Encyclopedia</a></li>
+                                <li>
+                                    <div class="d-flex align-items-center" style="gap: 12px">
+                                        <div class="rating d-flex" style="gap: 4px;">
+                                            <span class="bi-star-fill selected"></span>
+                                            <span class="bi-star-fill selected"></span>
+                                            <span class="bi-star-fill selected"></span>
+                                            <span class="bi-star-fill selected"></span>
+                                            <span class="bi-star-fill non-select"></span>
+                                        </div>
+                                        <p style="margin: 0; color: #808285;">(0 {{'home-book-license.comment' | translate}})</p>
+                                    </div>
+                                </li>
+                            </ul>
+                            <div class="prices">
+                                <label class="price">118,000đ</label>
+                                <div class="d-flex align-items-center" style="gap: 12px">
+                                    <label class="price-sale">106,000đ</label>
+                                    <label class="promotion">-10%</label>
+                                </div>
+                            </div>
+                            <div class="group-button">
+                                <button type="button" class="btn btn-buy">{{'cta.buy' | translate}}</button>
+                                <button type="button" class="btn btn-detail">
+                                    {{'cta.add' | translate}}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="book" class="col-sm-12 col-md-12 col-lg-6" >
+                        <img src="../../../assets/images/book/td-nv-dty-184-1.jpg" alt="" />
+                        <div class="book-desc d-flex flex-column justify-content-between">
+                            <ul>
+                                <li><a href="#" class="book-title">Năng lượng, các lực và chuyển động </a></li>
+                                <li><a href="#" class="author">Science Encyclopedia</a></li>
+                                <li>
+                                    <div class="d-flex align-items-center" style="gap: 12px">
+                                        <div class="rating d-flex" style="gap: 4px;">
+                                            <span class="bi-star-fill selected"></span>
+                                            <span class="bi-star-fill selected"></span>
+                                            <span class="bi-star-fill selected"></span>
+                                            <span class="bi-star-fill selected"></span>
+                                            <span class="bi-star-fill non-select"></span>
+                                        </div>
+                                        <p style="margin: 0; color: #808285;">(0 {{'home-book-license.comment' | translate}})</p>
+                                    </div>
+                                </li>
+                            </ul>
+                            <div class="prices">
+                                <label class="price">159,000đ</label>
+                                <div class="d-flex align-items-center" style="gap: 12px">
+                                    <label class="price-sale">143,000</label>
+                                    <label class="promotion">-10%</label>
+                                </div>
+                            </div>
+                            <div class="group-button">
+                                <button type="button" class="btn btn-buy">{{'cta.buy' | translate}}</button>
+                                <button type="button" class="btn btn-detail">
+                                    {{'cta.add' | translate}}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="book" class="col-sm-12 col-md-12 col-lg-6" >
+                        <img src="../../../assets/images/book/td-nv-dty-184.jpg" alt="" />
+                        <div class="book-desc d-flex flex-column justify-content-between">
+                            <ul>
+                                <li><a href="#" class="book-title">Ánh sáng, âm thanh và điện</a></li>
+                                <li><a href="#" class="author">Science Encyclopedia</a></li>
+                                <li>
+                                    <div class="d-flex align-items-center" style="gap: 12px">
+                                        <div class="rating d-flex" style="gap: 4px;">
+                                            <span class="bi-star-fill selected"></span>
+                                            <span class="bi-star-fill selected"></span>
+                                            <span class="bi-star-fill selected"></span>
+                                            <span class="bi-star-fill selected"></span>
+                                            <span class="bi-star-fill non-select"></span>
+                                        </div>
+                                        <p style="margin: 0; color: #808285;">(0 {{'home-book-license.comment' | translate}})</p>
+                                    </div>
+                                </li>
+                            </ul>
+                            <div class="prices">
+                                <label class="price">95,000đ</label>
+                                <div class="d-flex align-items-center" style="gap: 12px">
+                                    <label class="price-sale">85,500đ</label>
+                                    <label class="promotion">-10%</label>
+                                </div>
+                            </div>
+                            <div class="group-button">
+                                <button type="button" class="btn btn-buy">{{'cta.buy' | translate}}</button>
+                                <button type="button" class="btn btn-detail">
+                                    {{'cta.add' | translate}}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="pagination" class="col-12">
+                        <nav aria-label="Page navigation example">
+                            <ul class="pagination">
+                              <li class="page-item disabled">
+                                <a class="page-link uil uil-angle-double-left" href="javascript: void(0);" aria-label="Previous">
+                                </a>
+                              </li>
+                              <li class="page-item"><a class="page-link" href="javascript: void(0);">1</a></li>
+                              <li class="page-item"><a class="page-link" href="javascript: void(0);">2</a></li>
+                              <li class="page-item"><a class="page-link" href="javascript: void(0);">3</a></li>
+                              <li class="page-item">
+                                <a class="page-link uil uil-angle-double-right" href="javascript: void(0);" aria-label="Next"></a>
+                              </li>
+                            </ul>
+                          </nav>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/home/home-book-license/home-book-license.component.scss b/Phaha_Package/src/app/home/home-book-license/home-book-license.component.scss
new file mode 100644
index 0000000..151e9a1
--- /dev/null
+++ b/Phaha_Package/src/app/home/home-book-license/home-book-license.component.scss
@@ -0,0 +1,228 @@
+* {
+  background-color: #fff;
+
+  a {
+    text-decoration: none;
+  }
+}
+
+.home-book-license {
+  padding-top: 10px;
+
+  .box-head {
+    margin-bottom: 5px;
+    padding: 5px 10px;
+    border-bottom: 1px solid #eeeeee;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .box-header {
+    a {
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 136.19%;
+      color: #000000;
+      text-decoration: none;
+    }
+  }
+
+  .box-header::after {
+    content: '';
+    width: 100px;
+    border-top: 2px solid #f26b1b;
+    position: absolute;
+    color: transparent;
+    top: 45px;
+    left: 10px;
+  }
+
+  .see-all {
+    a {
+      display: flex;
+      align-items: center;
+      text-decoration: none;
+      color: #ABB5BE;
+    }
+
+    i {
+      color: #152536;
+      font-size: 24px;
+    }
+  }
+
+  .box-body {
+    padding: 0 16px;
+
+    .box-body-sidebar {
+      .links {
+        display: flex;
+        flex-direction: column;
+
+        a {
+          color: #6c757d;
+          font-size: 16px;
+          padding: 4px 0;
+
+          &:hover {
+            font-size: 17px;
+            color: #e09500;
+          }
+        }
+      }
+    }
+
+    .box-body-products {
+      #book {
+        padding: 32px 32px;
+        display: flex;
+        border-bottom: 1px solid #eee;
+        border-left: 1px solid #eee;
+
+        img {
+          height: 240px;
+          width: 180px;
+          padding-right: 16px;
+        }
+
+        .book-desc {
+
+          ul {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+
+            .book-title {
+              font-size: 24px;
+              color: #231f20;
+
+              &:hover {
+                color: #0D6EFD;
+              }
+            }
+
+            .author {
+              color: #6c757d;
+              text-transform: capitalize;
+
+              &:hover {
+                color: #0D6EFD;
+              }
+            }
+          }
+
+          .promotion {
+            font-size: 12px;
+            width: 35px;
+            height: 20px;
+            padding: 2px 4px;
+            vertical-align: middle;
+            border-radius: 8px 0px 9px 0px;
+            background-color: #fcdfd7;
+            color: #f1592b;
+            vertical-align: 4px;
+          }
+
+          .price {
+            font-size: 13px;
+            color: #abb5be;
+            font-weight: 700;
+            text-decoration: line-through;
+          }
+
+          .price-sale {
+            font-size: 20px;
+            color: #231f20;
+          }
+
+          //Rating Star:
+          .selected {
+            color: #fcaf17;
+          }
+
+          .non-select {
+            color: #6c757d;
+          }
+
+          .group-button {
+            margin-bottom: 7px;
+
+            .btn-detail {
+              border-radius: 20px;
+              background: #ffe7b8;
+              color: #e09500;
+              margin-bottom: 10px;
+            }
+
+            .btn-detail:hover {
+              border: 1px solid #e09500;
+            }
+
+            .btn-buy {
+              background: #fcaf17;
+              border-radius: 20px;
+              color: #ffffff;
+              margin-right: 12px;
+              margin-bottom: 10px;
+            }
+
+            .btn-buy:hover {
+              background: #e09500;
+              color: #ffffff;
+            }
+          }
+        }
+      }
+
+      #pagination {
+        border-left: 1px solid #eee;
+        padding: 16px 32px;
+
+        ul {
+          margin: 0;
+          justify-content: flex-end;
+        }
+
+        a {
+          font-size: 18px;
+        }
+      }
+    }
+  }
+
+  .page-item a.page-link {
+    border-radius: 50%;
+    width: 40px;
+    text-align: center;
+  }
+  .page-item {
+    margin: 0 3px;
+    a {
+      color: #e09500;
+    }
+  }
+}
+
+@media only screen and (max-width: 1200px) {
+  .box-body {
+    .box-body-sidebar {
+      border-bottom: 1px solid #eee;
+
+      .links {
+        flex-direction: row !important;
+        flex-wrap: wrap;
+        gap: 16px;
+      }
+    }
+
+    #book {
+      border: none !important;
+      border-bottom: 1px solid #eee !important;
+    }
+
+    #pagination {
+      border: none !important;
+    }
+  }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/home/home-book-license/home-book-license.component.ts b/Phaha_Package/src/app/home/home-book-license/home-book-license.component.ts
new file mode 100644
index 0000000..2527885
--- /dev/null
+++ b/Phaha_Package/src/app/home/home-book-license/home-book-license.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-home-book-license',
+  templateUrl: './home-book-license.component.html',
+  styleUrls: ['./home-book-license.component.scss']
+})
+export class HomeBookLicenseComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/home/home-book-license/home-book-license.module.ts b/Phaha_Package/src/app/home/home-book-license/home-book-license.module.ts
new file mode 100644
index 0000000..ce6fbf9
--- /dev/null
+++ b/Phaha_Package/src/app/home/home-book-license/home-book-license.module.ts
@@ -0,0 +1,38 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HomeBookLicenseComponent } from './home-book-license.component';
+import { NgbModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { BrowserModule } from '@angular/platform-browser';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { BlockUIModule } from 'ng-block-ui';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+@NgModule({
+  declarations: [
+    HomeBookLicenseComponent
+  ],
+  imports: [
+    CommonModule,
+    NgbNavModule,
+    BrowserModule,
+    HttpClientModule,
+    FormsModule,
+    NgbModule,
+    RouterModule,
+    BlockUIModule.forRoot(),
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    })
+  ],
+  exports: [
+    HomeBookLicenseComponent
+  ]
+})
+export class HomeBookLicenseModule { }
diff --git a/Phaha_Package/src/app/home/home-partner-intro/home-partner-intro.component.html b/Phaha_Package/src/app/home/home-partner-intro/home-partner-intro.component.html
new file mode 100644
index 0000000..d3bb266
--- /dev/null
+++ b/Phaha_Package/src/app/home/home-partner-intro/home-partner-intro.component.html
@@ -0,0 +1,32 @@
+<div class="home-partner-intro box-body">
+    <div class="box-head position-relative">
+        <div class="box-header">
+          <a href="#">{{'home-partner-intro.title' | translate}}</a>
+        </div>
+    </div>
+    <div class="box-body" style="padding: 0 40px;">
+        <swiper [slidesPerView]="2" [spaceBetween]="30" [slidesPerGroup]="1" [loop]="false" [loopFillGroupWithBlank]="true"
+          [pagination]="false" [navigation]="false" class="mySwiper" [breakpoints]="{
+          '640': {
+            slidesPerView: 2,
+            spaceBetween: 30
+          },
+          '768': {
+            slidesPerView: 4,
+            spaceBetween: 30
+          },
+          '1024': {
+            slidesPerView: 6,
+            spaceBetween: 30
+          }
+        }">
+          <ng-template swiperSlide *ngFor="let item of listPartner; let index = index">
+            <div class="toa-soan" >
+              <a routerLink="/{{item.slug}}">
+                <img [src]="baseUrl + item.image" alt=""  (error)="errorHandler($event)"/>
+              </a>
+            </div>
+          </ng-template>
+        </swiper>
+      </div>
+</div>
diff --git a/Phaha_Package/src/app/home/home-partner-intro/home-partner-intro.component.scss b/Phaha_Package/src/app/home/home-partner-intro/home-partner-intro.component.scss
new file mode 100644
index 0000000..9b0999a
--- /dev/null
+++ b/Phaha_Package/src/app/home/home-partner-intro/home-partner-intro.component.scss
@@ -0,0 +1,70 @@
+@import "~swiper/css";
+@import "~swiper/css/pagination";
+@import "~swiper/css/navigation";
+
+.home-partner-intro {
+    background-color: #fff;
+    padding: 10px 0;
+
+    .box-head {
+        margin-bottom: 5px;
+        padding: 5px 10px;
+        border-bottom: 1px solid #eeeeee;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .box-header {
+            a {
+                font-weight: 400;
+                font-size: 24px;
+                color: #000000;
+                text-decoration: none;
+            }
+        }
+
+        .box-header::after {
+            content: "";
+            width: 100px;
+            border-top: 2px solid #f26b1b;
+            position: absolute;
+            color: transparent;
+            top: 45px;
+            left: 10px;
+        }
+    }
+
+    .box-body {
+        .toa-soan {
+            border: 1px solid #eee;
+            padding: 2px 4px;
+            margin: 16px 0;
+            box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 12px;
+            border-radius: 6px;
+            height: 90px;
+            overflow: hidden;
+            display: flex;
+            align-content: center;
+            align-items: center;
+            justify-content: center;
+
+            &:hover {
+                border: 1px solid #e09500;
+                box-shadow: rgba(224, 149, 0, 0.4) 0px 5px 12px;
+            }
+            a {
+                text-decoration: none;
+                display: block;
+            }
+            img {
+                transition: transform 0.6s;
+                max-width: 100%;
+                max-height: 80px;
+                border-radius: 6px;
+                &:hover{
+                    transform: scale(1.1);
+                }
+            }
+        }
+    }
+}
diff --git a/Phaha_Package/src/app/home/home-partner-intro/home-partner-intro.component.ts b/Phaha_Package/src/app/home/home-partner-intro/home-partner-intro.component.ts
new file mode 100644
index 0000000..1143c28
--- /dev/null
+++ b/Phaha_Package/src/app/home/home-partner-intro/home-partner-intro.component.ts
@@ -0,0 +1,39 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { HomeService } from '../home.service';
+import { finalize } from 'rxjs/operators';
+import { environment } from 'src/environments/environment';
+
+@Component({
+  selector: 'app-home-partner-intro',
+  templateUrl: './home-partner-intro.component.html',
+  styleUrls: ['./home-partner-intro.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class HomePartnerIntroComponent implements OnInit {
+
+  public listPartner: any = [];
+  public baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+
+  constructor(
+    private _homeService: HomeService
+  ) { }
+
+  errorHandler($event: any) {
+    $event.target.src = '/assets/images/background/default-image.png';
+  }
+  
+  ngOnInit(): void {
+      this.onGetPartnerList();
+  }
+
+  onGetPartnerList() {
+    this._homeService.getPartner().pipe(
+      finalize(() => {
+      }),
+    ).subscribe(data => {
+      this.listPartner = data.data;
+    });
+  }
+
+}
+
diff --git a/Phaha_Package/src/app/home/home-partner-intro/home-partner-intro.module.ts b/Phaha_Package/src/app/home/home-partner-intro/home-partner-intro.module.ts
new file mode 100644
index 0000000..fb9364d
--- /dev/null
+++ b/Phaha_Package/src/app/home/home-partner-intro/home-partner-intro.module.ts
@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+import { SwiperModule } from 'swiper/angular';
+import { HomePartnerIntroComponent } from './home-partner-intro.component';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClient } from '@angular/common/http';
+
+@NgModule({
+  declarations: [
+    HomePartnerIntroComponent
+  ],
+  imports: [
+    SwiperModule,
+    BrowserModule,
+    RouterModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    })
+  ],
+  exports: [
+    HomePartnerIntroComponent
+  ]
+})
+export class HomePartnerIntroModule { }
diff --git a/Phaha_Package/src/app/home/home-tabs/home-tabs.component.html b/Phaha_Package/src/app/home/home-tabs/home-tabs.component.html
new file mode 100644
index 0000000..1c52fe0
--- /dev/null
+++ b/Phaha_Package/src/app/home/home-tabs/home-tabs.component.html
@@ -0,0 +1,245 @@
+<block-ui></block-ui>
+<div class="card box-body" id="HomeTabs">
+    <div class="card-body">
+        <ul ngbNav #nav2="ngbNav" [activeId]="idTab" class="nav-pills navtab-bg nav-justified p-1">
+            <li [ngbNavItem]="1" (click)="onClickTab(1)">
+                <a ngbNavLink>
+                    <span class="d-block d-sm-none">
+                        <i class="uil uil-building"></i>
+                    </span>
+                    <span class="d-none d-sm-block">
+                        <i class="uil uil-building"></i>
+                        <div class="link-name">{{'home.home-tab-linkname.press-agency' | translate}}</div>
+                    </span>
+                </a>
+                <ng-template ngbNavContent>
+                    <ng-container *ngTemplateOutlet="Tab1"></ng-container>
+                </ng-template>
+            </li>
+            <li [ngbNavItem]="2" (click)="onClickTab(2)">
+                <a ngbNavLink>
+                    <span class="d-block d-sm-none">
+                        <i class="uil uil-users-alt"></i>
+                    </span>
+                    <span class="d-none d-sm-block">
+                        <i class="uil  uil-users-alt"></i>
+                        <div class="link-name">{{'home.home-tab-linkname.author' | translate}}</div>
+                    </span>
+                </a>
+                <ng-template ngbNavContent>
+                    <ng-container *ngTemplateOutlet="Tab2"></ng-container>
+                </ng-template>
+            </li>
+            <li [ngbNavItem]="3" (click)="onClickTab(3)">
+                <a ngbNavLink>
+                    <span class="d-block d-sm-none">
+                        <i class="uil uil-bookmark-full"></i>
+                    </span>
+                    <span class="d-none d-sm-block">
+                        <i class="uil uil-bookmark-full"></i>
+                        <div class="link-name">{{'home.home-tab-linkname.category' | translate}}</div>
+                    </span>
+                </a>
+                <ng-template ngbNavContent>
+                    <ng-container *ngTemplateOutlet="Tab3"></ng-container>
+                </ng-template>
+            </li>
+            <li [ngbNavItem]="4" (click)="onClickTab(4)">
+                <a ngbNavLink>
+                    <span class="d-block d-sm-none">
+                        <i class="uil uil-calendar-alt"></i>
+                    </span>
+                    <span class="d-none d-sm-block">
+                        <i class="uil uil-calendar-alt"></i>
+                        <div class="link-name">{{'home.home-tab-linkname.event' | translate}}</div>
+                    </span>
+                </a>
+                <ng-template ngbNavContent>
+                    <ng-container *ngTemplateOutlet="Tab4"></ng-container>
+                </ng-template>
+            </li>
+        </ul>
+        <div [ngbNavOutlet]="nav2" class="text-muted"></div>
+    </div>
+</div>
+
+<ng-template #Tab1>
+    <div class="tab-content-cus">
+        <div class="tab-header">
+            <header routerLink="/editorial-office">{{'detail.press-agency' | translate}}</header>
+            <a routerLink="/editorial-office">{{'cta.see-more' | translate}} <i
+                    class="uil uil-angle-double-right"></i></a>
+        </div>
+        <div class="tab-body">
+            <div class="row">
+                <div class="col-md-3 col-sm-6 col-xs-12 mb-3"
+                    *ngFor="let officeItem of lstOffice.result; let index = index">
+                    <app-editorial-office-item [item]="officeItem"></app-editorial-office-item>
+                </div>
+            </div>
+        </div>
+    </div>
+</ng-template>
+
+<ng-template #Tab2>
+    <div class="view-all">
+        <a routerLink="/tac-gia-test">{{'cta.see-more' | translate}}
+            <i class="uil uil-angle-double-right"></i>
+        </a>
+    </div>
+    <div class="tab-content-author">
+        <div class="row">
+            <div class="col-md-3 col-sm-3 col-xs-12" *ngFor="let item of listPackage">
+                <div class="tab-author-item">
+                    <a routerLink="/chi-tiet-goi-test/{{item.id}}">{{item.name}}</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</ng-template>
+
+<ng-template #Tab3>
+    <div class="tab-content-editor row">
+        <div class="col-md-3 col-sm-4 col-xs-12">
+            <div class="tab-editor-right">
+                <div class="input-group editor-search">
+                    <div class="input-group-text">
+                        <i class="uil uil-search"></i>
+                    </div>
+                    <input type="text" class="form-control" [(ngModel)]="keywordCategories"
+                        (keyup.enter)="onGetCategories()" placeholder="{{'header.search' | translate}}">
+                </div>
+                <div class="lst-editor">
+                    <ul>
+                        <ng-container *ngFor="let item of categories.result let i = index">
+                            <li>
+                                <a (click)="onGetPackageByCate(item.id)"
+                                    [class]="categoryId == item.id ? 'active' : ''">{{item.name}}</a>
+                            </li>
+                        </ng-container>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-9 col-sm-8 col-xs-12">
+            <div class="tab-editor-left">
+                <div class="package-new">{{'home.package' | translate}}</div>
+                <div class="page-list">
+                    <div class="row">
+                        <div class="col-md-3 col-sm-3 col-xs-12 pb-2" *ngFor="let item of packageByCate">
+                            <div class="package-item curson-pointer-custom" routerLink="chi-tiet-goi-test/{{item.id}}">
+                                <div class="image-package">
+                                    <img [src]="baseUrl + item?.image" />
+                                    <ng-container [ngSwitch]="item.type">
+                                        <div *ngSwitchCase="1" class="notifi-notpackage text-center">
+                                            {{'package-type.pdf' | translate}}
+                                        </div>
+                                        <div *ngSwitchCase="2" class="notifi-notpackage text-center">
+                                            {{'package-type.author' | translate}}
+                                        </div>
+                                        <div *ngSwitchCase="3" class="notifi-notpackage text-center">
+                                            {{'package-type.category' | translate}}
+                                        </div>
+                                        <div *ngSwitchCase="4" class="notifi-notpackage text-center">
+                                            {{'package-type.event' | translate}}
+                                        </div>
+                                    </ng-container>
+                                </div>
+                                <h3><a>{{item.name}}</a></h3>
+                                <p *ngIf="item.promotionPrice" class="price-old">
+                                    <span>{{item.price | number}}đ</span>
+                                </p>
+                                <p class="package-price">
+                                    <span>{{item.promotionPrice ?? item.price | number}}đ</span>
+                                    / {{item.strDuration}}
+                                </p>
+                                <div class="package-action">
+                                    <button *ngIf="!isLogin" (click)="openModalLogin();" type="button">
+                                        {{'cta.register' | translate}}
+                                    </button>
+                                    <button *ngIf="isLogin" [routerLink]="['/package-pay-test/' + item.id]"
+                                        type="button">
+                                        {{'cta.register' | translate}}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</ng-template>
+
+<ng-template #Tab4>
+    <div class="tab-content-editor row">
+        <div class="col-md-3 col-sm-4 col-xs-12">
+            <div class="tab-editor-right">
+                <div class="input-group editor-search">
+                    <div class="input-group-text">
+                        <i class="uil uil-search"></i>
+                    </div>
+                    <input type="text" [(ngModel)]="keywordEvents" (keyup.enter)="onGetEvents()" class="form-control"
+                        placeholder="Nhập từ khóa">
+                </div>
+                <div class="lst-editor">
+                    <ul>
+                        <ng-container *ngFor="let item of events.result let i = index">
+                            <li>
+                                <a (click)="onGetPackageByEvent(item.id)"
+                                    [class]="eventId == item.id ? 'active' : ''">{{item.name}}</a>
+                            </li>
+                        </ng-container>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-9 col-sm-8 col-xs-12">
+            <div class="tab-editor-left">
+                <div class="package-new">{{'home.package' | translate}}</div>
+                <div class="page-list">
+                    <div class="row">
+                        <div class="col-md-3 col-sm-3 col-xs-12 pb-2" *ngFor="let item of packageByEvent">
+                            <div class="package-item curson-pointer-custom" routerLink="chi-tiet-goi-test/{{item.id}}">
+                                <div class="image-package">
+                                    <img [src]="baseUrl + item?.image" />
+                                    <ng-container [ngSwitch]="item.type">
+                                        <div *ngSwitchCase="1" class="notifi-notpackage text-center">
+                                            {{'package-type.pdf' | translate}}
+                                        </div>
+                                        <div *ngSwitchCase="2" class="notifi-notpackage text-center">
+                                            {{'package-type.author' | translate}}
+                                        </div>
+                                        <div *ngSwitchCase="3" class="notifi-notpackage text-center">
+                                            {{'package-type.category' | translate}}
+                                        </div>
+                                        <div *ngSwitchCase="4" class="notifi-notpackage text-center">
+                                            {{'package-type.event' | translate}}
+                                        </div>
+                                    </ng-container>
+                                </div>
+                                <h3><a>{{item.name}}</a></h3>
+                                <p *ngIf="item.promotionPrice" class="price-old">
+                                    <span>{{item.price | number}}đ</span>
+                                </p>
+                                <p class="package-price">
+                                    <span>{{item.promotionPrice ?? item.price | number}}đ</span>
+                                    / {{item.strDuration}}
+                                </p>
+                                <div class="package-action">
+                                    <button *ngIf="!isLogin" (click)="openModalLogin();" type="button">
+                                        {{'cta.register' | translate}}
+                                    </button>
+                                    <button *ngIf="isLogin" [routerLink]="['/package-pay-test/' + item.id]"
+                                        type="button">
+                                        {{'cta.register' | translate}}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</ng-template>
diff --git a/Phaha_Package/src/app/home/home-tabs/home-tabs.component.scss b/Phaha_Package/src/app/home/home-tabs/home-tabs.component.scss
new file mode 100644
index 0000000..d8aca6f
--- /dev/null
+++ b/Phaha_Package/src/app/home/home-tabs/home-tabs.component.scss
@@ -0,0 +1,296 @@
+#HomeTabs {
+    border: none;
+
+    .nav-pills .nav-link.active,
+    .nav-pills .show > .nav-link {
+        background: none;
+        border-color: #e09500 !important;
+
+        span {
+            i,
+            div {
+                color: #e09500 !important;
+            }
+        }
+    }
+
+    .nav-fill .nav-item .nav-link,
+    .nav-justified .nav-item .nav-link {
+        border-bottom: 3px solid #ccc;
+        border-radius: 0;
+
+        span {
+            i {
+                background: #fff5e2;
+                border-radius: 50%;
+                padding: 12px;
+            }
+        }
+    }
+
+    .d-sm-block > div {
+        height: 40px;
+        line-height: 20px;
+        font-weight: 600;
+        color: 444;
+        font-size: 16px;
+        overflow: hidden;
+        margin-top: 10px;
+    }
+
+    span > i {
+        font-size: 40px;
+    }
+
+    span.d-sm-none i {
+        font-size: 26px;
+    }
+
+    .d-sm-none {
+        margin-bottom: 10px;
+    }
+
+    .tab-content-cus {
+        padding: 20px 10px 0 10px;
+
+        .tab-header {
+            display: flex;
+            justify-content: space-between;
+
+            header {
+                font-size: 24px;
+                font-weight: 600;
+                color: #222;
+            }
+
+            a {
+                text-decoration: none;
+                color: #444;
+                padding-top: 10px;
+
+                i {
+                    font-size: 20px;
+                    float: right;
+                    line-height: 24px;
+                }
+            }
+        }
+
+        .tab-body {
+            padding: 20px 20px 0 20px;
+        }
+    }
+
+    .tab-content-editor {
+        .tab-editor-left {
+            background: #eee;
+            border-radius: 5px;
+
+            .tab-editor-left-header {
+                display: flex;
+                justify-content: space-around;
+                padding: 10px 0;
+
+                .editor-logo {
+                    width: 120px;
+                    height: 120px;
+                    border-radius: 50%;
+                    background: #fff;
+                    overflow: hidden;
+                    line-height: 100px;
+                    padding: 10px;
+
+                    img {
+                        max-width: 100%;
+                        height: auto;
+                    }
+                }
+
+                .editor-info {
+                    padding: 10px 20px;
+                }
+            }
+
+            .package-new {
+                text-align: center;
+                font-weight: 600;
+                font-size: 24px;
+                padding: 10px 0;
+            }
+
+            .page-list {
+                padding: 10px 20px;
+
+                .package-item {
+                    background: #fff;
+                    padding: 10px;
+                    display: flex;
+                    height: 100%;
+                    flex-direction: column;
+                    justify-content: space-between;
+
+                    h3 {
+                        text-align: center;
+                        font-weight: 600;
+                        line-height: 18px;
+
+                        a {
+                            font-size: 14px;
+                        }
+                    }
+
+                    .price-old {
+                        text-align: center;
+                        margin-bottom: 0;
+                        span {
+                            font-size: 16px;
+                            color: #aaa;
+                            text-decoration: line-through;
+                        }
+                    }
+
+                    .package-price {
+                        text-align: center;
+
+                        span {
+                            font-weight: bold;
+                            font-size: 20px;
+                        }
+                    }
+
+                    .package-action {
+                        text-align: center;
+
+                        button {
+                            padding: 5px 20px;
+                            border-radius: 5px;
+                            border: none;
+                            background: #fcaf17;
+                            color: #fff;
+                            font-weight: 600;
+                        }
+                    }
+                }
+            }
+        }
+
+        .tab-editor-right {
+            .editor-search {
+                .input-group-text,
+                input {
+                    border-radius: 0;
+                }
+            }
+
+            .lst-editor {
+                border-top: none;
+                background: #d9d9d9;
+
+                ul {
+                    padding: 0;
+                    list-style: none;
+                    max-height: 335px;
+                    overflow-y: auto;
+                    margin: 0;
+                    padding: 5px;
+
+                    li {
+                        padding: 4px 5px;
+
+                        a {
+                            display: block;
+                            padding: 6px 10px;
+                            background: #fff;
+                            text-decoration: none;
+                            font-weight: 600;
+                            color: #888;
+                            border-radius: 5px;
+                            cursor: pointer;
+                            
+                            img {
+                                width: 100%;
+                            }
+
+                            &:hover,
+                            &.active {
+                                color: #e09500 !important;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .card-body {
+        .link-name,
+        i {
+            color: #6c757d;
+        }
+    }
+
+    .curson-pointer {
+        cursor: pointer !important;
+    }
+
+    .image-package {
+        max-height: 160px;
+        overflow: hidden;
+        position: relative;
+
+        img {
+            height: 100%;
+            width: 100%;
+            object-fit: cover;
+            border-radius: 5px;
+            transition: transform 0.6s;
+
+            &:hover {
+                transform: scale(1.2);
+            }
+        }
+    }
+
+    .curson-pointer-custom {
+        cursor: pointer;
+    }
+
+    .notifi-notpackage {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        background: #fcaf17;
+        padding: 2px 10px;
+        border-top-left-radius: 5px;
+        color: #fff;
+    }
+
+    .tab-content-author {
+        padding: 15px;
+        background: #efefef;
+        .tab-author-item {
+            background: #fff;
+            box-shadow: 0 0 2px #fff;
+
+            a {
+                padding: 8px 15px;
+                font-size: 16px;
+                color: #666;
+                display: block;
+                text-decoration: none;
+                &:hover {
+                    font-weight: 600;
+                }
+            }
+        }
+    }
+
+    .view-all {
+        text-align: right;
+        padding: 10px 0;
+        a {
+            text-decoration: none;
+            color: #888;
+        }
+    }
+}
diff --git a/Phaha_Package/src/app/home/home-tabs/home-tabs.component.ts b/Phaha_Package/src/app/home/home-tabs/home-tabs.component.ts
new file mode 100644
index 0000000..904242f
--- /dev/null
+++ b/Phaha_Package/src/app/home/home-tabs/home-tabs.component.ts
@@ -0,0 +1,185 @@
+import { Component, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';
+import { HomeTabsService } from './home-tabs.service';
+import { finalize } from 'rxjs/operators';
+import { environment } from 'src/environments/environment';
+import { Router } from '@angular/router';
+import { PageModel } from 'src/app/Models/model';
+import { EditorialOfficeListService } from 'src/app/editorial-office/editorial-office-list/editorial-office-list.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { LoginComponent } from 'src/app/login/login.component';
+
+@Component({
+  selector: 'app-home-tabs',
+  templateUrl: './home-tabs.component.html',
+  styleUrls: ['./home-tabs.component.scss']
+})
+
+export class HomeTabsComponent implements OnInit {
+  @Input() idShowConnect: number = 0;
+  @Input() idTab: number = 1;
+
+  private typeClick: number = 1;
+  private pageSize: number = 4;
+  private pageNumber: number = 1;
+  public listPackage: any = [];
+  public listEditorialOffice: any = [];
+  public baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  public editorId: number = 0;
+  public detailOfficeEditorial: any = {};
+  public currentUser: any = {};
+  public isLogin: boolean = false;
+  public lstOffice: PageModel = new PageModel();
+  public categories: any = {};
+  public events: any = {};
+  public packageByCate: any = [];
+  public packageByEvent: any = [];
+  public categoryId: any = null;
+  public eventId: any = null;
+  public keywordCategories = '';
+  public keywordEvents = '';
+
+  constructor(
+    private _homeTabService: HomeTabsService,
+    private _router: Router,
+    private _editorialOfficeListService: EditorialOfficeListService,
+    private _modalService: NgbModal,
+  ) {
+    this.currentUser = JSON.parse(localStorage.getItem("currentCustomer") ?? "{}");
+    if (typeof (this.currentUser) === 'object' && this.currentUser.jwtToken) {
+      this.isLogin = true;
+    }
+
+  }
+
+  onClickTab(idTab: number) {
+    this.typeClick = idTab;
+    if (idTab == 1) {
+      this.onGetListOfficeInHome();
+    } else if (idTab == 2) {
+      this.onGetPackageByAuthor();
+    } else {
+      this.onGetListPackageByType();
+      if (idTab == 3) {
+        this.onGetCategories();
+      } else if (idTab == 4) {
+        this.onGetEvents();
+      }
+    }
+  }
+
+  onGetCategories() {
+    this._homeTabService.onGetCategories(this.keywordCategories)
+      .subscribe(data => {
+        this.categories = data;
+        if (this.categories && this.categories.result && this.categories.result.length > 0)
+          this.onGetPackageByCate(this.categories.result[0].id);
+        else
+          this.packageByCate = [];
+      });
+  }
+
+  onGetEvents() {
+    this._homeTabService.onGetEvents(this.keywordEvents)
+      .subscribe(data => {
+        this.events = data;
+        if (this.events && this.events.result && this.events.result.length > 0)
+          this.onGetPackageByEvent(this.events.result[0].id);
+        else
+          this.packageByEvent = [];
+      });
+  }
+
+  onGetListOfficeInHome() {
+    this._editorialOfficeListService.onGetListOffice('', 1, 4)
+      .subscribe(data => {
+        this.lstOffice = data;
+      });
+  }
+
+  onGetPackageByAuthor() {
+    this._homeTabService.getListPackageByType(2, 0, 40, 1).pipe(
+      finalize(() => {
+      }),
+    ).subscribe(
+      data => {
+        this.listPackage = data.data;
+      }
+    );
+  }
+
+  onGetListPackageByType() {
+    this._homeTabService.getListPackageByType(this.typeClick, this.editorId, this.pageSize, this.pageNumber).pipe(
+      finalize(() => {
+      }),
+    ).subscribe(
+      data => {
+        this.listPackage = data.data;
+      }
+    );
+  }
+
+  onGetListEditorialOffice() {
+    this._homeTabService.getListOfficeEditorial().pipe(
+      finalize(() => {
+      }),
+    ).subscribe(
+      data => {
+        this.listEditorialOffice = data.data;
+        this.editorId = this.listEditorialOffice[0].Id;
+        this.onActiveLink(this.listEditorialOffice[0]);
+      }
+    );
+  }
+
+  onActiveLink(item: any) {
+    // Call API chi tiet thong toa soan
+    this.editorId = item.id;
+    this.onGetDetailPackage(item.id);
+    this.onGetListPackageByType();
+    // Danh sach goi theo type va toa soan id
+  }
+
+  onGetDetailPackage(id: number) {
+    this._homeTabService.getDetailOfficeEditorial(id).pipe(
+      finalize(() => {
+      }),
+    ).subscribe(
+      data => {
+        this.detailOfficeEditorial = data.data;
+      }
+    );
+  }
+
+  onRedirectLinkOfficeEditorials() {
+    this._router.navigate(['chi-tiet-toa-soan', this.editorId]);
+  }
+
+  onGetPackageByCate(cateId: number) {
+    this.categoryId = cateId;
+    this._homeTabService.onGetPackageByCate(cateId)
+      .subscribe(data => {
+        this.packageByCate = data;
+      })
+  }
+
+  onGetPackageByEvent(eventId: number) {
+    this.eventId = eventId;
+    this._homeTabService.onGetPackageByEvent(eventId)
+      .subscribe(data => {
+        this.packageByEvent = data;
+      })
+  }
+
+  openModalLogin() {
+    this._modalService.open(LoginComponent, { size: "md", centered: true });
+  }
+
+  ngOnInit(): void {
+    this.onGetListPackageByType();
+    if (this.idShowConnect > 0) {
+      this.onClickTab(this.idShowConnect)
+    } else {
+      this.onClickTab(this.idTab);
+    }
+  }
+}
diff --git a/Phaha_Package/src/app/home/home-tabs/home-tabs.module.ts b/Phaha_Package/src/app/home/home-tabs/home-tabs.module.ts
new file mode 100644
index 0000000..2c9783a
--- /dev/null
+++ b/Phaha_Package/src/app/home/home-tabs/home-tabs.module.ts
@@ -0,0 +1,42 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HomeTabsComponent } from './home-tabs.component';
+import { NgbModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { BrowserModule } from '@angular/platform-browser';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { BlockUIModule } from 'ng-block-ui';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { LoginModule } from 'src/app/login/login.module';
+import { EditorialOfficeModule } from 'src/app/editorial-office/editorial-office.module';
+
+
+
+@NgModule({
+  declarations: [HomeTabsComponent],
+  imports: [
+    CommonModule,
+    NgbNavModule,
+    BrowserModule,
+    HttpClientModule,
+    FormsModule,
+    NgbModule,
+    RouterModule,
+    BlockUIModule.forRoot(),
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    }),
+    LoginModule,
+    EditorialOfficeModule
+  ],
+  exports: [
+    HomeTabsComponent
+  ]
+})
+export class HomeTabsModule { }
diff --git a/Phaha_Package/src/app/home/home-tabs/home-tabs.service.ts b/Phaha_Package/src/app/home/home-tabs/home-tabs.service.ts
new file mode 100644
index 0000000..1b95ff4
--- /dev/null
+++ b/Phaha_Package/src/app/home/home-tabs/home-tabs.service.ts
@@ -0,0 +1,51 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HomeTabsService {
+
+  constructor(
+    private _httpClient: HttpClient
+  ) { }
+
+  getListPackageByType(type: number, editorialOfficeId: number, pageSize: number, pageNumber: number) {
+    let params = new HttpParams();
+    params = params.append('type', type);
+    params = params.append('editorialOfficeId', editorialOfficeId);
+    params = params.append('pageSize', pageSize);
+    params = params.append('pageNumber', pageNumber);
+    return this._httpClient.get<any>(`/package/by-type`, { params });
+  }
+
+  getListOfficeEditorial() {
+    return this._httpClient.get<any>(`/editorial-office/list`);
+  }
+
+  getDetailOfficeEditorial(id: number) {
+    return this._httpClient.get<any>(`/editorial-office/detail/${id}`);
+  }
+
+  onGetCategories(keyword: string) {
+    let params = new HttpParams();
+    params = params.append('keyword', keyword);
+    params = params.append('pageSize', 1000);
+    return this._httpClient.get<any>(`/category/list`, {params});
+  }
+
+  onGetEvents(keyword: string) {
+    let params = new HttpParams();
+    params = params.append('keyword', keyword);
+    params = params.append('pageSize', 1000);
+    return this._httpClient.get<any>(`/event/list`, {params});
+  }
+
+  onGetPackageByCate(id: number) {
+    return this._httpClient.get<any>(`/package/package-by-category/${id}`);
+  }
+
+  onGetPackageByEvent(id: number) {
+    return this._httpClient.get<any>(`/package/package-by-event/${id}`);
+  }
+}
diff --git a/Phaha_Package/src/app/home/home.component.html b/Phaha_Package/src/app/home/home.component.html
new file mode 100644
index 0000000..6eb094f
--- /dev/null
+++ b/Phaha_Package/src/app/home/home.component.html
@@ -0,0 +1,89 @@
+<block-ui></block-ui>
+<main>
+  <section class="banner-slider">
+    <ngb-carousel class="carousel-fade" [interval]="3000" [pauseOnHover]="true">
+      <ng-template ngbSlide *ngFor="let item of listImageBanner">
+        <div class="picsum-img-wrapper">
+          <a href="{{item.link}}" target="_blank">
+            <img [src]="baseUrl + item.image" class="d-block w-100" alt="...">
+          </a>
+        </div>
+      </ng-template>
+    </ngb-carousel>
+  </section>
+</main>
+<main style="padding-bottom: 20px;">
+  <div class="container">
+    <div id="tabs-login" class="mt-4" *ngIf="isLogin">
+      <div class="remove-border">
+        <div class="card-body">
+          <ul ngbNav #nav="ngbNav" [activeId]="active" class="nav-pills" style="margin-bottom: -10px;">
+            <li ngbNavItem [ngbNavItem]="1">
+              <a (click)="onActiveNavs(1)" ngbNavLink>{{'home.package-purchased' | translate}}</a>
+              <ng-template ngbNavContent>
+                <app-my-package (onActiveNavs)="onActiveNavs($event)" [isHome]="true"></app-my-package>
+                <app-product-service></app-product-service>
+                <app-event-news-item></app-event-news-item>
+              </ng-template>
+            </li>
+            <li ngbNavItem [ngbNavItem]="2">
+              <a ngbNavLink (click)="pressBuyNews()">{{'home.package-license' | translate}}</a>
+              <ng-template ngbNavContent>
+                <app-package-hot></app-package-hot>
+                <app-home-tabs [idShowConnect]="idShowConnect" *ngIf="showHomeTab || !isLogin"
+                  [idTab]="idTabChild"></app-home-tabs>
+                <app-product-service></app-product-service>
+                <app-home-book-license></app-home-book-license>
+                <app-event-news-item></app-event-news-item>
+                <div class="lst-author-editorial box-body">
+                  <div class="row match-height">
+                    <div class="col-md-6 col-xs-12">
+                      <div class="card">
+                        <div class="profile-editorail-office">
+                          <app-prf-editorial-office></app-prf-editorial-office>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-md-6 col-xs-12">
+                      <div class="card">
+                        <app-prf-author></app-prf-author>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </ng-template>
+            </li>
+          </ul>
+          <div [ngbNavOutlet]="nav"></div>
+        </div>
+      </div>
+    </div>
+    <app-package-hot *ngIf="!isLogin"></app-package-hot>
+    <div id="target" *ngIf="!isLogin">
+      <app-home-tabs [idShowConnect]="idShowConnect" *ngIf="showHomeTab || !isLogin" [idTab]="idTabChild">
+      </app-home-tabs>
+    </div>
+    <app-product-service *ngIf="!isLogin"></app-product-service>
+    <app-home-book-license *ngIf="!isLogin"></app-home-book-license>
+    <app-event-news-item *ngIf="!isLogin"></app-event-news-item>
+    <div *ngIf="!isLogin" class="lst-author-editorial mt-4">
+      <div>
+        <div class="row match-height mt-4">
+          <div class="col-md-6 col-xs-12">
+            <div class="card">
+              <div class="profile-editorail-office">
+                <app-prf-editorial-office></app-prf-editorial-office>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-6 col-xs-12">
+            <div class="card">
+              <app-prf-author></app-prf-author>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <app-home-partner-intro></app-home-partner-intro>
+  </div>
+</main>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/home/home.component.scss b/Phaha_Package/src/app/home/home.component.scss
new file mode 100644
index 0000000..f06c393
--- /dev/null
+++ b/Phaha_Package/src/app/home/home.component.scss
@@ -0,0 +1,27 @@
+.banner-slider {
+    cursor: pointer;
+}
+
+#tabs-login {
+    .nav-pills .nav-link.active {
+        background-color: #fcaf17;
+        color: #ffff !important;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .nav-link {
+        font-size: 16px !important;
+        color: #222 !important;
+        text-transform: uppercase;
+        font-weight: 600;
+    }
+
+    .remove-border {
+        border: none !important;
+    }
+
+    .nav-pills {
+        border-bottom: 2px solid #fcaf17;
+    }
+}
diff --git a/Phaha_Package/src/app/home/home.component.ts b/Phaha_Package/src/app/home/home.component.ts
new file mode 100644
index 0000000..7ebc7a4
--- /dev/null
+++ b/Phaha_Package/src/app/home/home.component.ts
@@ -0,0 +1,105 @@
+import { Component, OnInit } from '@angular/core';
+import { HomeService } from './home.service';
+import { environment } from "../../environments/environment";
+import { ActivatedRoute, Router } from '@angular/router';
+import { DomSanitizer, Meta, MetaDefinition, Title } from '@angular/platform-browser';
+import { HomeTabsService } from './home-tabs/home-tabs.service';
+import { MyPackageService } from '../my-package/my-package.service';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+  public lstCarousel = [1, 2, 3];
+  public listImageBanner: any;
+  public baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  public isLogin: boolean = false;
+  public currentUser: any = {};
+  public active: any;
+  showHomeTab: boolean = false;
+  public idTab: number = 1;
+  public checkMobile: boolean = false;
+  public idTabChild: number = 1;
+  public idOpenTabChild: number = 1;
+  public idShowConnect: number = 0;
+  public totalListByType: any = [];
+
+  constructor(
+    private _homeService: HomeService,
+    private router: Router,
+    private _myPackage: MyPackageService,
+  ) {
+    this.currentUser = JSON.parse(localStorage.getItem("currentCustomer") ?? "{}");
+    if (typeof (this.currentUser) === 'object' && this.currentUser.jwtToken) {
+      this.isLogin = true;
+    }
+    if (!this.currentUser.fullName) {
+      this.showHomeTab = false;
+      this.isLogin = false;
+    }
+
+    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+      this.checkMobile = true;
+    } else {
+      this.checkMobile = false;
+    }
+  }
+
+  ngOnInit(): void {
+    this.getImageBanner();
+    this.onGetListTotalByType();
+    if (this.totalListByType.totalAuthor > 0 || this.totalListByType.totalCategory > 0 || this.totalListByType.totalEvent > 0 || this.totalListByType.totalPdf > 0) {
+      this.idTab = 2;
+      this.onActiveNavs({ nextId: this.idTab, idTabChild: this.idOpenTabChild });
+    } else {
+      this.showHomeTab = false;
+    }
+  }
+
+  getImageBanner() {
+    this._homeService.getImageBanner()
+      .subscribe(data => {
+        this.listImageBanner = data.data;
+      });
+  }
+
+  onRedirectLink(link: any) {
+    this.router.navigate([`${link}`]).then();
+  }
+
+  onActiveNavs(item: any) {
+    if (typeof item === 'object') {
+      this.active = item.nextId;
+    }
+    if (typeof item === 'number') {
+      this.active = item;
+    }
+    if (item.idTabChild) {
+      this.idTabChild = item.idTabChild;
+    }
+    this.idShowConnect = item.idTabChild;
+    if (this.active === 2) {
+      this.showHomeTab = true;
+      setTimeout(() => {
+        window.scrollTo(0, 1500);
+      }, 500);
+    } else {
+      this.showHomeTab = false;
+    }
+  }
+
+  pressBuyNews() {
+    this.showHomeTab = true;
+  }
+
+  onGetListTotalByType() {
+    this._myPackage.getListTotalByType()
+      .pipe()
+      .subscribe(data => {
+        this.totalListByType = data.data
+      });
+  }
+
+}
diff --git a/Phaha_Package/src/app/home/home.module.ts b/Phaha_Package/src/app/home/home.module.ts
new file mode 100644
index 0000000..2bfe604
--- /dev/null
+++ b/Phaha_Package/src/app/home/home.module.ts
@@ -0,0 +1,66 @@
+import { NgModule } from '@angular/core';
+import { HomeComponent } from './home.component';
+import { PackageHotModule } from '../package/package-hot/package-hot.module';
+import { CommonModule } from "@angular/common";
+import { HomeBookLicenseComponent } from './home-book-license/home-book-license.component';
+import { NgbModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { BrowserModule } from '@angular/platform-browser';
+import { HomeTabsComponent } from './home-tabs/home-tabs.component';
+import { HttpClientModule } from '@angular/common/http';
+import { EventNewsModule } from "../event-news/event-news.module";
+import { ProductServiceModule } from "../product-service/product-service.module";
+import { HomePartnerIntroModule } from './home-partner-intro/home-partner-intro.module';
+import { RouterModule } from '@angular/router';
+import { MyPackageModule } from '../my-package/my-package.module';
+import { BlockUIModule } from 'ng-block-ui';
+import { HomeBookLicenseModule } from './home-book-license/home-book-license.module';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClient } from '@angular/common/http';
+import { EditorialOfficeModule } from '../editorial-office/editorial-office.module';
+import { AuthorListComponent } from './author-list/author-list.component';
+import { FormsModule } from '@angular/forms';
+import { PageNewsPrfeditorialPrfauthorModule } from '../page-news-prfeditorial-prfauthor/page-news-prfeditorial-prfauthor.module';
+import { LoginModule } from '../login/login.module';
+import { HomeTabsModule } from './home-tabs/home-tabs.module';
+import { PrfIntroduceModule } from './prf-introduce/prf-introduce.module';
+import { PackagesModule } from '../modules/packages/packages.module';
+
+@NgModule({
+  declarations: [
+    HomeComponent,
+    AuthorListComponent,
+  ],
+  imports: [
+    EditorialOfficeModule,
+    MyPackageModule,
+    PackageHotModule,
+    NgbNavModule,
+    BrowserModule,
+    PackagesModule,
+    CommonModule,
+    HttpClientModule,
+    FormsModule,
+    EventNewsModule,
+    ProductServiceModule,
+    NgbModule,
+    PageNewsPrfeditorialPrfauthorModule,
+    HomePartnerIntroModule,
+    RouterModule,
+    BlockUIModule.forRoot(),
+    LoginModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    }),
+    HomeTabsModule,
+    HomeBookLicenseModule,
+    PrfIntroduceModule
+  ],
+  exports: [
+  ]
+})
+export class HomeModule { }
diff --git a/Phaha_Package/src/app/home/home.service.ts b/Phaha_Package/src/app/home/home.service.ts
new file mode 100644
index 0000000..9d6c327
--- /dev/null
+++ b/Phaha_Package/src/app/home/home.service.ts
@@ -0,0 +1,21 @@
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HomeService {
+
+  constructor(
+    private _httpClient: HttpClient,
+  ) {
+  }
+
+  getImageBanner() {
+    return this._httpClient.get<any>(`/advertisement/list?locationShow=slide`);
+  }
+
+  getPartner() {
+    return this._httpClient.get<any>(`/editorial-office/list`);
+  }
+}
diff --git a/Phaha_Package/src/app/home/prf-introduce/prf-introduce.component.html b/Phaha_Package/src/app/home/prf-introduce/prf-introduce.component.html
new file mode 100644
index 0000000..1ff4fa6
--- /dev/null
+++ b/Phaha_Package/src/app/home/prf-introduce/prf-introduce.component.html
@@ -0,0 +1,16 @@
+<div class="lst-author-editorial box-body">
+    <div class="row match-height">
+        <div class="col-md-6 col-xs-12">
+            <div class="card">
+                <div class="profile-editorail-office">
+                    <app-prf-editorial-office></app-prf-editorial-office>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6 col-xs-12">
+            <div class="card">
+                <app-prf-author></app-prf-author>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/home/prf-introduce/prf-introduce.component.scss b/Phaha_Package/src/app/home/prf-introduce/prf-introduce.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/Phaha_Package/src/app/home/prf-introduce/prf-introduce.component.ts b/Phaha_Package/src/app/home/prf-introduce/prf-introduce.component.ts
new file mode 100644
index 0000000..10720d7
--- /dev/null
+++ b/Phaha_Package/src/app/home/prf-introduce/prf-introduce.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-prf-introduce',
+  templateUrl: './prf-introduce.component.html',
+  styleUrls: ['./prf-introduce.component.scss']
+})
+export class PrfIntroduceComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/home/prf-introduce/prf-introduce.module.ts b/Phaha_Package/src/app/home/prf-introduce/prf-introduce.module.ts
new file mode 100644
index 0000000..06494d4
--- /dev/null
+++ b/Phaha_Package/src/app/home/prf-introduce/prf-introduce.module.ts
@@ -0,0 +1,40 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PrfIntroduceComponent } from './prf-introduce.component';
+import { NgbModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { BrowserModule } from '@angular/platform-browser';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { BlockUIModule } from 'ng-block-ui';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { PageNewsPrfeditorialPrfauthorModule } from 'src/app/page-news-prfeditorial-prfauthor/page-news-prfeditorial-prfauthor.module';
+
+
+
+@NgModule({
+  declarations: [PrfIntroduceComponent],
+  imports: [
+    NgbNavModule,
+    BrowserModule,
+    CommonModule,
+    HttpClientModule,
+    FormsModule,
+    NgbModule,
+    RouterModule,
+    BlockUIModule.forRoot(),
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    }),
+    PageNewsPrfeditorialPrfauthorModule
+  ],
+  exports: [
+    PrfIntroduceComponent
+  ]
+})
+export class PrfIntroduceModule { }
diff --git a/Phaha_Package/src/app/honor-press/detail-honor-press/detail-honor-press.component.html b/Phaha_Package/src/app/honor-press/detail-honor-press/detail-honor-press.component.html
new file mode 100644
index 0000000..4646dc7
--- /dev/null
+++ b/Phaha_Package/src/app/honor-press/detail-honor-press/detail-honor-press.component.html
@@ -0,0 +1,253 @@
+<div class="page-detail-honor-press card">
+    <div class="detail-honor-press-title">
+        <h4>Tượng đài báo chí cách mạng Việt Nam</h4>
+    </div>
+    <div class="detail-honor-press-bg">
+    </div>
+    <div class="container">
+        <div class="detail-honor-press-bg-white">
+            <div class="row">
+                <div class="col-md-8 col-xs-12 col-sm-8">
+                    <div class="detail-honor-press-content-left">
+                        <h4>Chủ tịch Hồ Chí Minh</h4>
+                        <ul>
+                            <li>Quốc tịch Việt Nam</li>
+                            <li>Sinh 19 tháng 5 năm 1890</li>
+                            <li>Mất 2 tháng 9 năm 1969 (79) </li>
+                            <li>Quên quán: Kim Liên, Nam Đàn, Nghệ An, Trung Kỳ, Liên bang Đông Dương</li>
+                            <li>Chức danh: Chủ tịch Đảng Lao động Việt Nam</li>
+                            <li>Nhà văn, nhà thơ và nhà báo với nhiều tác phẩm viết bằng tiếng việt, tiếng hán và tiếng
+                                pháp
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="col-md-4 col-xs-12 col-sm-4">
+                    <div class="detail-honor-press-image">
+                        <img src="../../../assets/fake-data/anh-bac-ho-viet-tuyen-ngon-doc-lap.jpg" />
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="detail-honor-press-white-content">
+            <h4>
+                Xuất thân và quê quán
+            </h4>
+            <div class="content">
+                <div>Bài chi tiết: Gia đình Hồ Chí Minh
+                </div>
+                <div> Theo gia divhả của dòng họ Nguyễn ở làng Sen, xã Kim Liên, huyện Nam Đàn, tỉnh Nghệ An:</div>
+
+                <div class="mt-4">
+                    "Hoàng sơ tổ khảo là Thái bảo Nguyễn Bá Phụ, tổ đời thứ 2 là Nguyễn Bá Bạc, tổ đời thứ 3 là Nguyễn
+                    Bá
+                    Ban,
+                    tổ đời thứ 4 là Nguyễn Văn Dân,... tổ đời thứ 5, Nguyễn Sinh Vật là Giám sinh đời Lê Thánh Đức (tức
+                    Lê
+                    Thần
+                    Tông) năm thứ 3..., tổ đời thứ 6 là Nguyễn Sinh Tài đỗ Hiếu sinh khi 17 tuổi, năm 34 tuổi đỗ Tam
+                    trường
+                    khoa
+                    thi Hội..., tổ đời thứ 10 là Nguyễn Sinh Nhậm."[3]
+                    Theo nhiều tài liệu chính thống cũng như tiểu sử tại Việt Nam, tên lúc nhỏ của Hồ Chí Minh là Nguyễn
+                    Sinh
+                    Cung[4][5] (giọng địa phương phát âm là Côông). Tuy nhiên, một số tài liệu ghi nhận tên lúc nhỏ của
+                    ông
+                    là
+                    Nguyễn Sinh Côn.[6][7][8][9][10] Điều này cũng được chính ông xác nhận bằng chính bút tích của mình
+                    trong
+                    một bài viết năm 1954.[11] Quê nội ông là làng Kim Liên (tên Nôm là làng Sen). Nguyễn Sinh Cung sinh
+                    năm
+                    1890 tại quê ngoại là làng Hoàng Trù (tên Nôm là làng Chùa), nằm cách làng Sen khoảng 2 km) và sống
+                    ở
+                    đây
+                    cho đến năm 1895. Hai làng này vốn cùng nằm trong xã Chung Cự, thuộc tổng Lâm Thịnh, huyện Nam Đàn.
+                    Quê
+                    nội
+                    của ông, làng Kim Liên[12] là một làng quê nghèo khó. Phần lớn dân chúng không có ruộng, phải làm
+                    thuê
+                    cấy
+                    rẽ, mặc quần ít, đóng khố nhiều, bởi thế nên làng này còn có tên là làng Đai Khố.[13] Vào đời ông,
+                    phần
+                    lớn
+                    dòng họ của ông đều cơ hàn, kiếm sống bằng nghề làm thuê, và cũng có người tham gia các hoạt động
+                    chống
+                    Pháp.[14]
+                </div>
+
+                <div class="mt-4">
+                    Cha của Nguyễn Sinh Cung là một nhà Nho tên là Nguyễn Sinh Sắc (1862–1929), từng đỗ Phó bảng.[15] Mẹ
+                    ông
+                    là
+                    bà Hoàng Thị Loan (1868–1901). Nguyễn Sinh Cung có một người chị là Nguyễn Thị Thanh (sinh năm
+                    1884),
+                    một
+                    người anh là Nguyễn Sinh Khiêm (sinh năm 1888, tự Tất Đạt, còn gọi là Cả Khiêm) và một người em trai
+                    mất
+                    sớm
+                    là Nguyễn Sinh Nhuận (1900–1901, tên khi mới lọt lòng là Xin).
+                </div>
+
+                <div class="mt-4">
+                    Tuổi trẻ
+                    Năm 1895, Nguyễn Sinh Cung cùng cha mẹ và anh trai vào Huế lần đầu tiên. Sau khi mẹ mất, (1901), ông
+                    về
+                    Nghệ
+                    An ở với bà ngoại một thời gian ngắn. Không lâu sau thì cha ông đỗ Phó bảng, ông liền theo cha về
+                    quê
+                    nội.
+                    Tại quê nội, cha ông đã làm "lễ vào làng" cho hai người con trai với tên mới là "Tất Đạt" cho Nguyết
+                    Sinh
+                    Khiêm và "Tất Thành" cho Nguyễn Sinh Cung;[11][16] từ đây ông bắt đầu dùng tên Nguyễn Tất Thành. Tất
+                    Thành
+                    theo học cử nhân Hoàng Phạm Quỳnh và một số ông giáo khác.[17]
+                </div>
+
+                <div class="mt-4">
+                    Năm 1906, Nguyễn Sinh Cung theo cha vào Huế lần thứ hai và học ở Trường Tiểu học Pháp-Việt Đông Ba.
+                    Tại
+                    đây,
+                    ông trải qua các niên khóa 1906–1907 lớp nhì và 1907–1908 lớp nhất. Trong kỳ thi primaire (tương
+                    đương
+                    tốt
+                    nghiệp tiểu học) năm 1908 – ông là một trong 10 học trò giỏi nhất của trường Pháp – Việt Đông Ba
+                    được
+                    thi
+                    vượt cấp vào hệ Thành chung trường Quốc Học.[18]
+
+                </div>
+                <div class="mt-4">
+                    Theo nghiên cứu của học giả William J. Duiker, vào tháng 9 năm 1907, Nguyễn Sinh Cung vào học lớp
+                    trung
+                    học
+                    đệ nhị niên tại trường Quốc học Huế, nhưng bị đuổi học vào cuối tháng 5 năm 1908 vì tham gia phong
+                    trào
+                    chống thuế ở Trung Kỳ.[19] Cha ông bị triều đình khiển trách vì "hành vi của hai con trai". Hai anh
+                    em
+                    Tất
+                    Đạt và Tất Thành bị giám sát chặt chẽ. Ông quyết định vào miền Nam để tránh sự kiểm soát của triều
+                    đình.[20]
+                    Tuy nhiên, theo tài liệu hiện lưu trữ tại Trung tâm Lưu trữ Hải ngoại (Centre des archives
+                    d'Outre-mer
+                    hay
+                    CAOM) ở Pháp, Nguyễn Sinh Cung được nhận vào Quốc học Huế vào ngày 7 tháng 8 năm 1908.[6][9][21]
+                    Theo
+                    nhà
+                    nghiên cứu lịch sử Vũ Ngự Chiêu thì như vậy "không có việc Nguyễn Sinh Cung bị trục xuất khỏi trường
+                    Quốc
+                    học vì tham gia vào cuộc biểu tình chống sưu thuế ở Huế — cuộc biểu tình chống sưu dịch xảy ra ngày
+                    9
+                    tới 12
+                    tháng 4 năm 1908; tức gần 4 tháng trước ngày trò Cung được nhận vào trường Quốc học".[6]
+                </div>
+
+                <div class="mt-4">
+                    Đầu năm 1910, Nguyễn Tất Thành đến Phan Thiết. Ông dạy thể dục và chữ Quốc ngữ cho học sinh lớp ba
+                    và tư
+                    tại
+                    trường Dục Thanh của Hội Liên Thành.[note 1][22][23]
+                </div>
+
+                <div class="mt-4">
+                    Trong thời gian này, Nguyễn Tất Thành thường gặp gỡ một số nhà nho yêu nước đương thời, tham gia
+                    công
+                    tác bí
+                    mật, nhận công việc liên lạc và có chí đuổi thực dân Pháp, giải phóng đồng bào. Ông tuy khâm phục Đề
+                    Thám
+                    (Hoàng Hoa Thám), Phan Châu Trinh, Phan Bội Châu nhưng không hoàn toàn tán thành cách làm của một
+                    người
+                    nào
+                    cả. Theo quan điểm của ông, Phan Châu Trinh chỉ yêu cầu người Pháp thực hiện cải cách, điều đó chẳng
+                    khác
+                    nào "xin giặc rủ lòng thương", còn Phan Bội Châu thì hy vọng Đế quốc Nhật Bản giúp đỡ để chống Pháp,
+                    điều đó
+                    nguy hiểm chẳng khác nào "đuổi hổ cửa trước, rước báo cửa sau". Nguyễn Tất Thành thấy rõ là cần
+                    quyết
+                    định
+                    con đường đi của riêng mình.[24]
+                </div>
+            </div>
+            <div class="infomation-other">
+                <h4>Tin tức khác</h4>
+                <div class="items-news-other">
+                    <div class="row">
+                        <div class="col-md-4 col-xs-12 col-sm-4">
+                            <div class="image">
+                                <img src="../../../assets/fake-data/b1.png" />
+                            </div>
+                        </div>
+                        <div class="col-md-8 col-xs-12 col-sm-8">
+                            <div class="content-other-items">
+                                <h4>Vận dụng tư tưởng Hồ Chí Minh “Đảng là đạo đức, là văn minh” trong xây dựng đạo đức
+                                    cách mạng cán bộ, đảng viên</h4>
+                                <div class="text-content">
+                                    Nhắc lại những lời dạy thiêng liêng của Bác nhân kỷ niệm 97 năm Ngày Báo chí cách
+                                    mạng Việt Nam để thấy rằng, trải qua các giai đoạn của cách mạng, trong bất kỳ hoàn
+                                    cảnh nào, Bác đều nghĩ đến báo chí, tác động của báo chí. 97 năm trôi qua, báo chí
+                                    cách mạng đã lơn mạnh, phát triển không ngừng. Nhưng dù công nghệ nào thì những lời
+                                    dạu của Chủ tịch Hồ Chí Minh với báo chí vẫn còn nguyên giá trị và
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row  mt-5">
+                        <div class="col-md-4 col-xs-12 col-sm-4">
+                            <div class="image">
+                                <img src="../../../assets/fake-data/b2.jpg" />
+                            </div>
+                        </div>
+                        <div class="col-md-8 col-xs-12 col-sm-8">
+                            <div class="content-other-items">
+                                <h4>Từ Nguyễn Ái Quốc đến Hồ Chí Minh - Lãnh tụ báo chí cách mạng Việt Nam
+                                </h4>
+                                <div class="text-content">
+                                    Bác nhấn mạnh: viết để nêu cái hay, cái tốt của dân ta, của bộ đội ta, của cán bộ
+                                    ta. Đồng thời để phê bình những khuyết điểm của chúng ta, của cán bộ, của nhân dân,
+                                    của bộ đội. Không nên chỉ viết cái tốt mà giấu cái xấu. Nhưng phê bình phải đúng
+                                    đắn, nêu cái hay, cái tốt thì phải có chừng mực.
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row mt-5">
+                        <div class="col-md-4 col-xs-12 col-sm-4">
+                            <div class="image">
+                                <img src="../../../assets/fake-data/b2jpg.jpg" />
+                            </div>
+                        </div>
+                        <div class="col-md-8 col-xs-12 col-sm-8">
+                            <div class="content-other-items">
+                                <h4>Tư tưởng Hồ Chí Minh về thi đua ái quốc của giới Công thương Việt Nam</h4>
+                                <div class="text-content">
+                                    Bác cũng yêu cầu cán bộ báo chí phải biết tự phê bình và phê bình. Bác coi đó “là vũ
+                                    khí cần thiết và sắc bén nó giúp cho chúng ta sửa chữa sai lầm và phát triển ưu
+                                    điểm.” Đối với nhà báo cách mạng “viết cũng như mọi việc khác, phải có chí, chớ giấu
+                                    dốt, nhờ tự phê bình và phê bình mới tiến bộ".
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row mt-5">
+                        <div class="col-md-4 col-xs-12 col-sm-4">
+                            <div class="image">
+                                <img src="../../../assets/fake-data/b3.jpg" />
+                            </div>
+                        </div>
+                        <div class="col-md-8 col-xs-12 col-sm-8">
+                            <div class="content-other-items">
+                                <h4>Học tập và làm theo gương Bác, đưa Lâm Đồng phát triển nhanh và bền vững
+                                </h4>
+                                <div class="text-content">
+                                    Bác căn dặn các nhà báo: Trước khi đặt bút xuống trang giấy, người viết cần tự mình
+                                    thật sáng tỏ, ta “Viết cho ai? Viết để làm gì? Viết như thế nào?” (Phát biểu tại Đại
+                                    hội lần II Hội Nhà báo Việt Nam, năm 1959), “Cán bộ báo chí cũng là chiến sĩ cách
+                                    mạng”
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/honor-press/detail-honor-press/detail-honor-press.component.scss b/Phaha_Package/src/app/honor-press/detail-honor-press/detail-honor-press.component.scss
new file mode 100644
index 0000000..d9715a1
--- /dev/null
+++ b/Phaha_Package/src/app/honor-press/detail-honor-press/detail-honor-press.component.scss
@@ -0,0 +1,103 @@
+app-detail-honor-press {
+    .detail-honor-press-title {
+        background-color: hsl(353, 82%, 49%);
+        color: #ffff;
+        height: 60px;
+        padding: 18px;
+        text-align: center;
+
+        h4 {
+            font-size: 24px;
+        }
+    }
+
+    .detail-honor-press-bg {
+        background-color: #C21010;
+        height: 400px;
+    }
+
+    .detail-honor-press-bg-white {
+        background-color: #ffff;
+        margin-top: -200px;
+        border: 1px solid #cccc;
+
+        .detail-honor-press-content-left {
+            padding: 20px;
+
+            h4 {
+                font-size: 26px;
+                font-weight: 700;
+            }
+
+            ul {
+                line-height: 35px;
+
+                li {
+                    font-size: 20px;
+                }
+            }
+        }
+
+        .detail-honor-press-image {
+            width: 100%;
+            height: 400px;
+
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+    }
+
+    .detail-honor-press-white-content {
+        padding: 40px;
+
+        h4 {
+            font-size: 22px;
+            font-weight: 700;
+
+        }
+
+        .content {
+            line-height: 30px;
+
+            div {
+                font-size: 18px;
+                padding-bottom: 20px;
+            }
+
+            border-bottom: 2px solid black;
+        }
+
+        .infomation-other {
+            padding-top: 10px;
+
+            h4 {
+                font-size: 24px;
+                padding-bottom: 10px;
+                border-bottom: 1px solid #cccc;
+            }
+
+            .items-news-other {
+                padding-top: 20px;
+                .image {
+                    img {
+                        width: 100%;
+                    }
+                }
+                .content-other-items {
+                    h4 {
+                        border-bottom: none;
+                        font-size: 22px;
+                        font-weight: 700;
+                    }
+                }
+                .text-content {
+                    font-size: 20px;
+                    line-height: 30px;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/honor-press/detail-honor-press/detail-honor-press.component.ts b/Phaha_Package/src/app/honor-press/detail-honor-press/detail-honor-press.component.ts
new file mode 100644
index 0000000..e824b7a
--- /dev/null
+++ b/Phaha_Package/src/app/honor-press/detail-honor-press/detail-honor-press.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-detail-honor-press',
+  templateUrl: './detail-honor-press.component.html',
+  styleUrls: ['./detail-honor-press.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class DetailHonorPressComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/honor-press/honor-press.component.html b/Phaha_Package/src/app/honor-press/honor-press.component.html
new file mode 100644
index 0000000..10cc4e2
--- /dev/null
+++ b/Phaha_Package/src/app/honor-press/honor-press.component.html
@@ -0,0 +1,203 @@
+<div class="honor-press bg-white">
+    <div class="">
+        <div class="honor-press-title">
+            Tượng đài báo chí cách mạng Việt Nam
+        </div>
+        <div class="honor-press-content">
+            <div class="container-fluid">
+                <div class="row box-one">
+                    <div class="col-md-3 col-12 bg-red">
+                        <div class="honor-press-left-title">
+                            <h4>Chủ tịch<br>Hồ Chí Minh</h4>
+                            <p>Người sáng lập<br>nền Báo chí Cách<br>mạng Việt Nam</p>
+                        </div>
+                    </div>
+                    <div class="col-md-9 col-12 pd-0">
+                        <div class="honor-press-right-image">
+                            <img src="../../assets/fake-data/bac-ho-viet-bao.jpg" />
+                        </div>
+                        <div class="honor-press-right-content">
+                            <p>
+                                <span class="honor-press-right-content-text">C</span>
+                                hủ tịch Hồ Chí Minh - Người thầy vĩ đại của báo chí Cách mạng Việt Nam
+                                Không chỉ là một lãnh tụ chính trị kiệt xuất, một danh nhân văn hóa của nhân loại. Chủ
+                                tịch
+                                Hồ Chí Minh còn là một nhà báo vĩ đại. Từ những viên gạch đầu tiên Người xây dựng cho
+                                nền
+                                Báo chí Cách mạng Việt Nam, giờ đây báo chí nước ta đã phát triển mạnh mẽ. Và những lời
+                                căn
+                                dạn của Người là kim chỉ nam cho mọi hoạt động bái chi của nước ta, đó là phụng sự Tổ
+                                quốc,
+                                phục vụ nhân dân.
+                            </p>
+                            <p> Chủ tịch Hồ Chí Minh - Người thầy vĩ đại của những người làm báo cách mạng Việt
+                                Nam.
+                                Ảnh: Tư
+                                liệu TTXVN.</p>
+                            <p>Nhà báo lớn Hồ Chí Minh</p>
+                            <p>Sinh thời. Chủ tịch Hồ Chí Minh sớm nhận ra vai trò và tác động to lớn
+                                của
+                                báo chí trong đấu tranh xã hội. Trong quá trình tìm đường giải phóng dân tộc, giành
+                                độc
+                                lập, tự do cho Tổ quốc, tiếp cận tác phẩm của Lênin. Người tâm đắc câu nói vị lãnh
+                                tụ
+                                lỗi lạc phát biểu từ đầu thế kỷ XX: "Cái mà chung ta nhất thiết phải có lúc này là
+                                một
+                                tờ báo chính trị. Trong thời đại ngày nay, không có tờ báo chính trị thì không thể
+                                có
+                                phong trào gọi là chính trị...Không có tờ báo thì không thể tiến hành hệ thống cuộc
+                                tuyên truyền, cổ động có nguyên tắc và toàn diện..."</p>
+                            <p>
+                                Chính vì vậy, cuối năm 1917, tuy vốn ngôn ngữ chưa đủ để viết báo nhưng với tinh
+                                thần
+                                quyết tâm cao, Bác đã tự học tiếng và học làm báo. Từ những mẫu tin, bài, tư liệu
+                                tản
+                                mạn có chủ đề nhỏ. Bác viêt thành các bài có chủ đề lớn, tập trung.
+                            </p>
+                            <p>
+                                Ngày 28/6/1919, hội nghị các nước thắng trận trong Chiến tranh Thế giới lần thứ nhất
+                                khai mạc tại Versailles. Thay mặt những Việt kiều, Bác viết và gửi đến hội nghị bản
+                                yêu
+                                sách 8 điểm đòi quyền lợi cho nhân dân Việt Nam. Đây cũng là bài viết nổi tiếng đầu
+                                tiên
+                                của Bác được cơ quan ngôn luận Đảng Xã hội Phá đăng dưới nhan đề Quyền các dân tộc.
+                                Trong bài này, Người đã đưa 8 yêu sách thiết thực, đấu tranh đòi Chính phủ Pháp phải
+                                thừa nhận các quyền độc lập tự do, dân chủ và quyền độc quyền bình đắng của dân tộc
+                                Việt
+                                Nam, trong đó có cả quyền tự do tư tưởng và tự do báo chí.
+                            </p>
+
+
+
+                            <p>
+                                Năm 1921, Bác cùng một số nhà hoạt động cách mạng người Maroc, Algeria,
+                                Tunisia...thành
+                                lập Hội Liên hiệp Thuộc địa và lập ra cơ quan ngôn luận của Hội - tờ Le paria (Người
+                                cùng khổ), số đầu tiên xuất bản ngày 1/4/1922. Bác trở thành trụ cột của tờ báo.
+                            </p>
+                        </div>
+                        <div class="honor-press-right-typical-veteran-journalist-title">
+                            Nhà báo lão thành Cách mạng Việt Nam tiêu biểu
+                        </div>
+                    </div>
+                </div>
+                <div class="row box-two">
+                    <div class="col-md-3 col-12 bg-red">
+                        <div class="honor-press-left-image">
+                            <img src="../../assets/fake-data/bac-ho-doc-bao.jpg" />
+                            <p>Tham gia báo chí trước 2/9/1945</p>
+                        </div>
+                    </div>
+                    <div class="col-md-9 col-12">
+                        <div class="table-gold honor-table">
+                            <span class="honor-press-bage">BẢNG VÀNG</span>
+                            <table class="table mt-4">
+                                <thead>
+                                    <tr>
+                                        <th class="stt">STT</th>
+                                        <th class="name">Họ tên</th>
+                                        <th class="birthday">Năm sinh</th>
+                                        <th class="country">Quê quán</th>
+                                        <th class="position">Chức danh</th>
+                                        <th style="width: 140px;"></th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <ng-container *ngFor="let typicalItem of lstTypicalVeteranJournalist">
+                                        <tr>
+                                            <td>{{typicalItem.id}}.</td>
+                                            <td>{{typicalItem.name}}</td>
+                                            <td>{{typicalItem.birthDay}}</td>
+                                            <td>{{typicalItem.country}}</td>
+                                            <td>{{typicalItem.position}}</td>
+                                            <td class="view-detail">
+                                                <a routerLink="/honor-press/detail/1">XEM CHI TIẾT</a>
+                                                </td>
+                                        </tr>
+                                    </ng-container>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-lg-3 col-md-3 col-12 bg-red">
+                        <div class="honor-press-left-image">
+                            <img src="../../assets/fake-data/bachodanhmay.jpg" />
+                            <p>40 năm tham gia báo chí & trên 1000 tác phẩm báo chí</p>
+                        </div>
+                    </div>
+                    <div class="col-lg-9 col-md-9 col-12">
+                        <div class="table-silver honor-table">
+                            <span class="honor-press-bage bg-silver">BẢNG BẠC</span>
+                            <table class="table mt-4">
+                                <thead>
+                                    <tr>
+                                        <th class="stt">STT</th>
+                                        <th class="name">Họ tên</th>
+                                        <th class="birthday">Năm sinh</th>
+                                        <th class="country">Quê quán</th>
+                                        <th class="position">Chức danh</th>
+                                        <th style="width: 140px;"></th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <ng-container *ngFor="let typicalItem of lstTypicalVeteranJournalist">
+                                        <tr>
+                                            <td>{{typicalItem.id}}.</td>
+                                            <td>{{typicalItem.name}}</td>
+                                            <td>{{typicalItem.birthDay}}</td>
+                                            <td>{{typicalItem.country}}</td>
+                                            <td>{{typicalItem.position}}</td>
+                                            <td class="view-detail"><a routerLink="/honor-press/detail/1">XEM CHI
+                                                    TIẾT</a></td>
+                                        </tr>
+                                    </ng-container>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-lg-3 col-md-3 col-12 bg-red">
+                        <div class="honor-press-left-image">
+                            <img src="../../assets/fake-data/bac-ho-doc-bao.jpg" />
+                            <p>Trên 30 năm tham gia báo chí & Trên 1000 tác phẩm báo chí</p>
+                        </div>
+                    </div>
+                    <div class="col-lg-9 col-md-9 col-12">
+                        <div class="table-copper honor-table">
+                            <div class="honor-press-bage bg-copper">BẢNG ĐỒNG</div>
+                            <table class="table mt-4">
+                                <thead>
+                                    <tr>
+                                        <th class="stt">STT</th>
+                                        <th class="name">Họ tên</th>
+                                        <th class="birthday">Năm sinh</th>
+                                        <th class="country">Quê quán</th>
+                                        <th class="position">Chức danh</th>
+                                        <th style="width: 140px;"></th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <ng-container *ngFor="let typicalItem of lstTypicalVeteranJournalist">
+                                        <tr>
+                                            <td>{{typicalItem.id}}.</td>
+                                            <td>{{typicalItem.name}}</td>
+                                            <td>{{typicalItem.birthDay}}</td>
+                                            <td>{{typicalItem.country}}</td>
+                                            <td>{{typicalItem.position}}</td>
+                                            <td class="view-detail"><a routerLink="/honor-press/detail/1">XEM CHI
+                                                    TIẾT</a></td>
+                                        </tr>
+                                    </ng-container>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/honor-press/honor-press.component.scss b/Phaha_Package/src/app/honor-press/honor-press.component.scss
new file mode 100644
index 0000000..dab1a6e
--- /dev/null
+++ b/Phaha_Package/src/app/honor-press/honor-press.component.scss
@@ -0,0 +1,117 @@
+app-honor-press {
+    .bg-red {
+        background: #951a1a;
+    }
+    .pd-0 {
+        padding: 0;
+    }
+
+    .honor-press-title {
+        padding: 15px;
+        text-align: center;
+        background: #c22323;
+        color: #fff;
+        font-size: 30px;
+        font-family: auto;
+    }
+
+    .honor-table {
+        padding: 20px 60px;
+        .table > :not(caption) > * > * {
+            padding: 2rem 0.5rem;
+            font-size: 16px;
+        }
+    }
+
+    .view-detail {
+        a {
+            text-decoration: none;
+            text-transform: uppercase;
+            font-weight: 600;
+            color: #06bffc;
+            font-size: 16px;
+        }
+    }
+
+    .honor-press-left-image {
+        padding: 10px 30px;
+        img {
+            width: 100%;
+        }
+        p {
+            font-size: 20px;
+            font-weight: bold;
+            color: #fff;
+            line-height: 40px;
+            text-align: center;
+        }
+    }
+
+    .box-one {
+        .honor-press-left-title {
+            margin-top: 50%;
+            text-align: center;
+            color: #fff;
+            h4 {
+                font-size: 44px;
+                font-weight: bold;
+            }
+            p {
+                font-size: 28px;
+                color: #ffff4d;
+            }
+        }
+
+        .honor-press-right-image {
+            img {
+                width: 100%;
+            }
+        }
+
+        .honor-press-right-content {
+            padding: 60px;
+            p {
+                font-size: 20px;
+                color: #777;
+            }
+            .honor-press-right-content-text {
+                font-size: 150px;
+                font-weight: bold;
+                float: left;
+                margin-right: 15px;
+                line-height: 120px;
+                color: #06bffc;
+            }
+        }
+
+        .honor-press-right-typical-veteran-journalist-title {
+            padding: 30px 60px;
+            border-top: 1px solid #666;
+            font-size: 40px;
+            font-family: serif;
+            font-weight: bold;
+        }
+    }
+
+    .honor-press-bage {
+        padding: 14px 26px;
+        color: #fff;
+        background: #ffc507;
+        font-size: 26px;
+        font-weight: bold;
+        border-radius: 20px;
+        display: inline-block;
+    }
+
+    .bg-silver{
+        background: #b9b9b9;
+    }
+
+    .bg-copper{
+        background: #d48f29;
+    }
+
+    .bg-white{
+        background: white;
+    }
+}
diff --git a/Phaha_Package/src/app/honor-press/honor-press.component.ts b/Phaha_Package/src/app/honor-press/honor-press.component.ts
new file mode 100644
index 0000000..0e55cb4
--- /dev/null
+++ b/Phaha_Package/src/app/honor-press/honor-press.component.ts
@@ -0,0 +1,73 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-honor-press',
+  templateUrl: './honor-press.component.html',
+  styleUrls: ['./honor-press.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class HonorPressComponent implements OnInit {
+  public lstTypicalVeteranJournalist = [
+    {
+      id: 1,
+      name: "Huỳnh Thúc Kháng",
+      birthDay: "1876 - 1947",
+      country: "Quảng nam",
+      position: "Chủ nhiệm kiêm chủ bút báo Tiếng Dân"
+    },
+    {
+      id: 2,
+      name: "Xuân Thủy",
+      birthDay: "1912 - 1985",
+      country: "Hà Nội",
+      position: "Chủ nhiệm báo Cứu Quốc"
+    },
+    {
+      id: 3,
+      name: "Lưu Qúy Kỳ",
+      birthDay: "1919 - 1982",
+      country: "Quảng nam",
+      position: "Giám đốc đài phát thanh tiếng nói Nam Bộ"
+    },
+    {
+      id: 4,
+      name: "Hoàng Tùng",
+      birthDay: "1920 - 2010",
+      country: "Hà Nam",
+      position: "Gần 30 tổng biên tập báo nhân dân"
+    },
+    {
+      id: 5,
+      name: "Trần Lâm",
+      birthDay: "1922 - 2011",
+      country: "Hải Dương",
+      position: "Tổng biên tập đầu tiên đài tiếng nói Việt Nam"
+    },
+    {
+      id: 6,
+      name: "Đào Tùng",
+      birthDay: "1932 - 2015",
+      country: "Hà Nội",
+      position: "Tổng giám đốc Thông Tấn Xã Việt Nam (1966 - 1990)"
+    },
+    {
+      id: 7,
+      name: "Hữu Thọ",
+      birthDay: "1932-2015",
+      country: "Bình Thuận",
+      position: "Tác giả của những bức ảnh lịch sử"
+    },
+    {
+      id: 8,
+      name: "Lâm Hồng Long",
+      birthDay: "1925 - 1997",
+      country: "Hà Nội",
+      position: "Chủ nhiệm báo Cứu Quốc"
+    }
+  ]
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/honor-press/honor-press.module.ts b/Phaha_Package/src/app/honor-press/honor-press.module.ts
new file mode 100644
index 0000000..22695dd
--- /dev/null
+++ b/Phaha_Package/src/app/honor-press/honor-press.module.ts
@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SwiperModule } from "swiper/angular";
+import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
+import { RouterModule } from '@angular/router';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClient } from '@angular/common/http';
+import { BlockUIModule } from 'ng-block-ui';
+import { QuillModule } from 'ngx-quill';
+import { HonorPressComponent } from './honor-press.component';
+import { DetailHonorPressComponent } from './detail-honor-press/detail-honor-press.component';
+
+@NgModule({
+    declarations: [HonorPressComponent, DetailHonorPressComponent],
+    exports: [
+    ],
+    imports: [
+        CommonModule,
+        SwiperModule,
+        NgbModule,
+        RouterModule,
+        QuillModule.forRoot(),
+        BlockUIModule.forRoot(),
+        TranslateModule.forRoot({
+            loader: {
+                provide: TranslateLoader,
+                useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+                deps: [HttpClient]
+            }
+        }),
+    ]
+})
+export class HonorPressModule { }
diff --git a/Phaha_Package/src/app/honor-press/honor-press.service.ts b/Phaha_Package/src/app/honor-press/honor-press.service.ts
new file mode 100644
index 0000000..e69de29
diff --git a/Phaha_Package/src/app/layout/error-not-found/error-not-found.component.html b/Phaha_Package/src/app/layout/error-not-found/error-not-found.component.html
new file mode 100644
index 0000000..a5fe9a4
--- /dev/null
+++ b/Phaha_Package/src/app/layout/error-not-found/error-not-found.component.html
@@ -0,0 +1,18 @@
+<div class="not-found-body">
+    <div class="bgimg">
+        <div class="topleft">
+            <a href="/">
+                <img src="../../../assets/images/brand/Logo.png">
+            </a>
+        </div>
+        <div class="middle">
+            <h1>COMING SOON</h1>
+            <hr>
+            <p id="time-coming-soon"></p>
+        </div>
+        <div class="bottomleft">
+            <a href="/" title="Come back"><i class="uil uil-angle-double-left"></i>Come back</a>
+        </div>
+    </div>
+</div>
+
diff --git a/Phaha_Package/src/app/layout/error-not-found/error-not-found.component.scss b/Phaha_Package/src/app/layout/error-not-found/error-not-found.component.scss
new file mode 100644
index 0000000..263048e
--- /dev/null
+++ b/Phaha_Package/src/app/layout/error-not-found/error-not-found.component.scss
@@ -0,0 +1,50 @@
+.not-found-body {
+    margin: 0;
+    .bgimg {
+        background-image: url("../../../assets/images/background/forestbridge.jpg");
+        height: 100vh;
+        background-position: center;
+        background-size: cover;
+        position: relative;
+        color: white;
+        font-family: "Courier New", Courier, monospace;
+        font-size: 25px;
+    }
+
+    .topleft {
+        position: absolute;
+        top: 0;
+        left: 16px;
+    }
+
+    .bottomleft {
+        position: absolute;
+        bottom: 0;
+        right: 16px;
+        a{
+            text-decoration: none;
+            padding: 20px 0;
+            font-weight: 600;
+            font-size: 20px;
+            color: #fff;
+            display: flex;
+            line-height: 30px;
+            i{
+                font-size: 30px;
+            }
+        }
+    }
+
+    .middle {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        text-align: center;
+    }
+
+    hr {
+        margin: auto;
+        width: 40%;
+    }
+}
diff --git a/Phaha_Package/src/app/layout/error-not-found/error-not-found.component.ts b/Phaha_Package/src/app/layout/error-not-found/error-not-found.component.ts
new file mode 100644
index 0000000..a348ab9
--- /dev/null
+++ b/Phaha_Package/src/app/layout/error-not-found/error-not-found.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-error-not-found',
+  templateUrl: './error-not-found.component.html',
+  styleUrls: ['./error-not-found.component.scss']
+})
+export class ErrorNotFoundComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/layout/footer/footer.component.html b/Phaha_Package/src/app/layout/footer/footer.component.html
new file mode 100644
index 0000000..a900717
--- /dev/null
+++ b/Phaha_Package/src/app/layout/footer/footer.component.html
@@ -0,0 +1,101 @@
+<footer>
+  <div class="container mt-4" style="padding: 60px 30px">
+    <!--    <a class="logo" href="#">-->
+    <!--      <img-->
+    <!--        src="../../../assets/images/brand/Logo.png"-->
+    <!--        width="120" height="120"-->
+    <!--      />-->
+    <!--    </a>-->
+    <div class="">
+      <div class="row">
+        <div class="col-md-5 col-12">
+          <div class="footer-box-header">
+            <h3>{{'footer.content-title.info' | translate}}</h3>
+            <hr>
+          </div>
+          <div class="footer-box-content">
+            <ul>
+              <li *ngFor="let item of listFooter1">
+                <a href="{{item.link}}" target="_blank">{{item.name}}</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="col-md-5 col-12">
+          <div class="footer-box-header">
+            <h3>{{'footer.content-title.customer-support' | translate}}</h3>
+            <hr>
+          </div>
+          <div class="footer-box-content">
+            <ul>
+              <li *ngFor="let item of listFooter2">
+                <a href="{{item.link}}" target="_blank">{{item.name}}</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="col-md-2 col-12">
+          <div class="footer-box-header">
+            <h3>{{'footer.content-title.follow' | translate}}</h3>
+            <hr>
+          </div>
+          <div class="footer-box-content">
+            <div class="social-media">
+              <a class="logo" href="#">
+                <img src="../../../assets/images/logo/logo-fb.png" width="40" height="40" />
+              </a>
+              <a class="logo" href="#">
+                <img src="../../../assets/images/logo/logo-youtube.png" width="40" height="40" />
+              </a>
+              <a class="logo" href="#">
+                <img src="../../../assets/images/logo/logo-tiktok.png" width="40" height="40" />
+              </a>
+            </div>
+            <div>
+              <a class="logo" href="#">
+                <img src="../../../assets/images/logo/logo-bct.png" width="220" height="80" />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="text-center mt-5 mb-5">
+      <a class="logo" href="/">
+        <img src="../../../assets/images/logo/logo_postenp_new.png" />
+      </a>
+    </div>
+    <div class="d-flex justify-content-evenly" style="flex-wrap: wrap;">
+      <div class="connect">
+        <div class="icon">
+          <span class="uil uil-home-alt"></span>
+        </div>
+        <div class="content">
+          <p>{{'footer.content-link.contact.Hanoi' | translate}}</p>
+        </div>
+      </div>
+      <div class="connect">
+        <div class="icon">
+          <span class="uil uil-phone-alt"></span>
+        </div>
+        <div class="content">
+          <p>1800585855</p>
+        </div>
+      </div>
+      <div class="connect">
+        <div class="icon">
+          <span class="uil uil-envelope"></span>
+        </div>
+        <div class="content">
+          <p>cskh1800585855@gmail.com</p>
+        </div>
+      </div>
+    </div>
+    <div class="text-center others">
+      <label>GCN ĐKDN số 0102595740 do Sở KHĐT Hà Nội cấp lần đầu ngày 24/04/1997, cấp thay đổi lần 7 ngày 10/01/2022</label>
+    </div>
+    <div class="text-center others">
+      <label>© 2022 - Bản quyền thuộc về Công ty Phát hành báo chí trung ương</label>
+    </div>
+  </div>
+</footer>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/layout/footer/footer.component.scss b/Phaha_Package/src/app/layout/footer/footer.component.scss
new file mode 100644
index 0000000..636d679
--- /dev/null
+++ b/Phaha_Package/src/app/layout/footer/footer.component.scss
@@ -0,0 +1,97 @@
+* {
+  color: #d9d9d9;
+
+  span {
+    font-size: 20px;
+  }
+}
+
+footer {
+  background-color: #222222;
+
+  h4 {
+    margin: 0;
+  }
+
+  hr {
+    width: 24%;
+    height: 2px;
+    color: #9a9a9a;
+  }
+
+  .footer-box-content {
+    margin: 12px 0;
+
+    ul, li {
+      margin: 0;
+      padding: 0;
+    }
+
+    ul {
+      list-style: none;
+    }
+
+    li {
+      margin-bottom: 4px;
+    }
+
+    a {
+      text-decoration: none;
+      font-size: 18px;
+
+      &:hover {
+        color: #E09500;
+      }
+    }
+  }
+
+  .connect {
+    display: flex;
+    gap: 8px;
+
+    .content {
+      p {
+        font-size: 20px;
+      }
+    }
+  }
+
+  .download {
+    display: flex;
+    gap: 8px;
+
+    .app-qr {
+      margin-bottom: 8px;
+    }
+  }
+
+  .social-networks {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    h4 {
+      padding-top: 16px;
+    }
+
+    a {
+      font-size: 28px;
+      margin-bottom: 32px;
+
+      &:hover {
+        color: #E09500;
+      }
+    }
+  }
+
+  .social-media {
+    .logo {
+      margin-right: 10px;
+    }
+  }
+  .others {
+    label {
+      font-size: 18px;
+    }
+  }
+}
diff --git a/Phaha_Package/src/app/layout/footer/footer.component.ts b/Phaha_Package/src/app/layout/footer/footer.component.ts
new file mode 100644
index 0000000..0d8922d
--- /dev/null
+++ b/Phaha_Package/src/app/layout/footer/footer.component.ts
@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { FooterService } from "./footer.service";
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent implements OnInit {
+  listFooter1: any
+  listFooter2: any
+
+  constructor(
+    private translate: TranslateService,
+    private _footerService: FooterService
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.getListFooter();
+  }
+
+  getListFooter() {
+    this._footerService.settingFooter(1)
+      .subscribe(data => {
+        this.listFooter1 = data.data;
+      });
+
+    this._footerService.settingFooter(2)
+      .subscribe(data => {
+        this.listFooter2 = data.data;
+      });
+  }
+}
diff --git a/Phaha_Package/src/app/layout/footer/footer.module.ts b/Phaha_Package/src/app/layout/footer/footer.module.ts
new file mode 100644
index 0000000..74245b2
--- /dev/null
+++ b/Phaha_Package/src/app/layout/footer/footer.module.ts
@@ -0,0 +1,32 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FooterComponent} from './footer.component';
+import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+import {HttpClient} from '@angular/common/http';
+import {FormsModule} from "@angular/forms";
+
+@NgModule({
+  declarations: [
+    FooterComponent
+  ],
+  imports: [
+    TranslateModule.forRoot({
+      defaultLanguage: 'vi',
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => {
+          return new TranslateHttpLoader(http, '../../../assets/i18n', '.json');
+        },
+        deps: [HttpClient]
+      }
+    }),
+    CommonModule,
+    FormsModule,
+  ],
+  exports: [
+    FooterComponent
+  ]
+})
+export class FooterModule {
+}
diff --git a/Phaha_Package/src/app/layout/footer/footer.service.ts b/Phaha_Package/src/app/layout/footer/footer.service.ts
new file mode 100644
index 0000000..8cd740f
--- /dev/null
+++ b/Phaha_Package/src/app/layout/footer/footer.service.ts
@@ -0,0 +1,19 @@
+import {Injectable} from '@angular/core';
+import {HttpClient, HttpParams} from "@angular/common/http";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FooterService {
+
+  constructor(
+    private _http: HttpClient
+  ) {
+  }
+
+  settingFooter(type: any) {
+    let params = new HttpParams();
+    params = params.append('type', type);
+    return this._http.get<any>("/setting_footer/list", {params});
+  }
+}
diff --git a/Phaha_Package/src/app/layout/header/header.component.html b/Phaha_Package/src/app/layout/header/header.component.html
new file mode 100644
index 0000000..36d0a96
--- /dev/null
+++ b/Phaha_Package/src/app/layout/header/header.component.html
@@ -0,0 +1,199 @@
+<header id="HeaderMain" [class]="offsetFlag? '' : 'custom-header'">
+  <div class="container" style="position: relative;">
+
+    <div class="changeLang" *ngIf="offsetFlag">
+      <a (click)="switchLang('vi')" [ngClass]="lang == 'vi' ? 'lang-active' : ''">
+        <img src="../../../assets/image/vietnam.png" alt="">
+      </a>
+      <a (click)="switchLang('en')" [ngClass]="lang == 'en' ? 'lang-active' : ''">
+        <img src="../../../assets/image/united-kingdom.png" alt="">
+      </a>
+    </div>
+
+    <nav class="navbar navbar-expand-lg">
+      <a class="navbar-brand" href="#">
+        <img src="../../../assets/images/brand/Logo.png" alt="" width="120" height="120" />
+      </a>
+      <button class="navbar-toggler header-toggle-cus" type="button" data-bs-toggle="collapse"
+        data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false"
+        aria-label="Toggle navigation">
+        <span class="uil uil-bars" id="menu-icon"></span>
+      </button>
+
+      <div class="sign-in" *ngIf="!isLogin">
+        <button type="button" (click)="openModalLogin()" class="btn btn-secondary">
+          {{'header.button.sign-in' | translate}}
+        </button>
+        <button type="button" (click)="openModalRegister()" class="btn btn-primary"
+          style="margin-left: 8px">
+          {{'header.button.sign-up' | translate}}
+        </button>
+      </div>
+      <div ngbDropdown #notificationDropdown="ngbDropdown" class="infomation-current-user sign-in d-flex"
+        *ngIf="isLogin">
+        <div class="btn-group dropstart header-notification">
+          <div class="mr-3 icon-bell" data-bs-toggle="dropdown">
+            <i class="bi bi-bell-fill" aria-expanded="false"></i>
+          </div>
+          <span class="badge badge-pill badge-danger badge-up">{{totalNew}}</span>
+          <ul class="dropdown-menu dropdown-notification">
+            <li class="dropdown-menu-header d-flex">
+              <h4 class="notification-title mb-0 mr-auto">{{'header.notification' | translate}}</h4>
+              <div class="badge badge-primary">{{totalNew}} {{'header.news' | translate}}</div>
+            </li>
+            <li class="header-content-notification" (scroll)="onScroll($event)">
+              <div *ngFor="let item of listNew.result" (click)="onSetReaded(item.id)"
+                [class]="item.isRead ? 'item-notification' : 'item-notification-unRead'" class="item-notification-hover"
+                [routerLink]="item.packageUserId? '/chi-tiet-goi/{{item.packageUserId}}': urlCurrent">
+                <div *ngIf="item.isRead === false" class="notification-not-readed">
+                </div>
+                <div class="detail-item-notification">
+                  {{item.title}}
+                </div>
+                <div class="time-notification">
+                  {{item.timeStamp}} trước
+                </div>
+              </div>
+            </li>
+            <li class="dropdown-menu-footer">
+              <a (click)="onSetReadAll()" type="button" class="btn btn-primary">{{'header.read-all' | translate}}</a>
+            </li>
+          </ul>
+        </div>
+        <div class="d-inline-block mr-2" ngbDropdown #myDrop="ngbDropdown">
+          <button type="button" class="btn custom-button" id="dropdownManual" ngbDropdownToggle (focus)="myDrop.open()">
+            <img (error)="onErrorHandle($event)" width="40" height="40" [src]="baseUrl + currentUser.image"
+              class="avatar avatar-size mr-1" /><span class="uil uil-angle-down custom-span"></span></button>
+          <div ngbDropdownMenu aria-labelledby="dropdownManual" class="custom-dropdown">
+            <a ngbDropdownItem routerLink="/profile" [queryParams]="{ tab: '1'}">
+              {{'header.current-user.profile' | translate}}
+            </a>
+            <a ngbDropdownItem (click)="openModalPackageCode(PackageCode)">
+              {{'header.current-user.code' | translate}}
+            </a>
+            <span (click)="onLogOut();" ngbDropdownItem>{{'header.current-user.log-out' | translate}}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="collapse navbar-collapse" id="navbarScroll">
+        <div style="width: 100%">
+          <div class="row" *ngIf="offsetFlag">
+            <div class="col-md-4 col-sm-4 col-xs-12">
+              <div class="header-item">
+                <div class="icon-services">
+                  <span class="uil uil-users-alt"></span>
+                </div>
+                <div class="header-content">
+                  <p style="font-size: 14px">{{'header.register-member' | translate}}</p>
+                  <a href="javascript: void(0);"
+                    style="font-size: 12px; text-decoration: none; color: #666;">{{'header.get-offer' | translate}}</a>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-4 col-sm-4 col-xs-12">
+              <div class="header-item">
+                <div class="icon-services">
+                  <span class="uil uil-receipt"></span>
+                </div>
+                <div class="header-content">
+                  <p style="font-size: 14px">{{'header.select-payment' | translate}}</p>
+                  <p style="font-size: 12px">{{'header.safe-convenient' | translate}}
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-4 col-sm-4 col-xs-12">
+              <div class="header-item">
+                <div class="icon-services">
+                  <span class="uil uil-book-open"></span>
+                </div>
+                <div class="header-content">
+                  <p style="font-size: 14px">{{'header.read-book-newspaper' | translate}}</p>
+                  <p style="font-size: 12px">{{'header.unlimit' | translate}}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="frm-search-head">
+            <div class="d-flex">
+              <div ngbDropdown class="d-inline-block">
+                <button ngbDropdownToggle type="button" class="btn btn-outline-secondary dropdown">
+                  <span class="uil uil-bars" style="font-size: 16px"></span>
+                </button>
+                <div ngbDropdownMenu class="dropdown-details" aria-labelledby="dropdownBasic1">
+                  <div class="dropdown-title">
+                    <p>{{'header.category-menu.title-main' | translate}}</p>
+                  </div>
+                  <div class="dropdown-content row">
+                    <ul class="col-md-4">
+                      <li class="category-title">{{'header.category-menu.title-newspaper' | translate}}</li>
+                      <li *ngFor="let item of packages"><a href="/chi-tiet-goi/{{item.id}}">{{item.name}}</a></li>
+                    </ul>
+                    <ul class="col-md-4">
+                      <li class="category-title">{{'header.category-menu.title-book' | translate}}</li>
+                      <li><a href="javascript: void(0);">Top sách bán chạy</a></li>
+                      <li><a href="javascript: void(0);">Top sách giảm giá</a></li>
+                      <li><a href="javascript: void(0);">Sách Kỹ năng</a></li>
+                      <li><a href="javascript: void(0);">Sách Kinh doanh</a></li>
+                      <li><a href="javascript: void(0);">Sách Văn học</a></li>
+                      <li><a href="javascript: void(0);">Sách Giáo khoa</a></li>
+                      <li><a href="javascript: void(0);">Sách Thiếu nhi</a></li>
+                      <li><a href="javascript: void(0);">Sách Chăm sóc gia đình</a></li>
+                    </ul>
+                    <ul class="col-md-4">
+                      <li class="category-title">{{'header.category-menu.title-product' | translate}}</li>
+                      <li><a href="javascript: void(0);">Thực phẩm</a></li>
+                      <li><a href="javascript: void(0);">Làm đẹp</a></li>
+                      <li><a href="javascript: void(0);">Chăm sóc sức khoẻ</a></li>
+                      <li><a href="javascript: void(0);">Văn phòng phẩm</a></li>
+                      <li><a href="javascript: void(0);">Chăm sóc nhà cửa</a></li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+              <div class="form-search">
+                <div class="input-group box-input-search">
+                  <button class="btn btn-outline-secondary" type="button" (click)="onSearchData()">
+                    <span class="uil uil-search" id="search-icon"></span>
+                  </button>
+                  <input type="search" class="form-control" placeholder="{{'header.search' | translate}}"
+                    (keyup.enter)="onSearchData()" aria-label="Example text with button addon"
+                    aria-describedby="button-addon1" [(ngModel)]="keyword" [value]="keyword" />
+                </div>
+              </div>
+              <div class="changeLangScroll" *ngIf="!offsetFlag">
+                <a (click)="switchLang('vi')" [ngClass]="lang == 'vi' ? 'lang-active' : ''">
+                  <img src="../../../assets/image/vietnam.png" alt="">
+                </a>
+                <a (click)="switchLang('en')" [ngClass]="lang == 'en' ? 'lang-active' : ''">
+                  <img src="../../../assets/image/united-kingdom.png" alt="">
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  </div>
+</header>
+<ng-template #notificationModal let-modal>
+  <div class="modal-header">
+    <h4 class="modal-title" id="modalLabel" *ngIf="typeModal === 1">{{'modal-login.title' | translate}}</h4>
+    <h4 class="modal-title" *ngIf="typeModal === 2">{{'modal-register.title' | translate}}</h4>
+    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
+  </div>
+</ng-template>
+
+
+<ng-template #PackageCode let-modal>
+  <div id="packageCodeModal">
+    <div class="modal-header">
+      <h4 class="modal-title">Nhập mã code</h4>
+      <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
+    </div>
+    <div class="modal-body">
+      <app-package-code></app-package-code>
+    </div>
+  </div>
+</ng-template>
diff --git a/Phaha_Package/src/app/layout/header/header.component.scss b/Phaha_Package/src/app/layout/header/header.component.scss
new file mode 100644
index 0000000..7364016
--- /dev/null
+++ b/Phaha_Package/src/app/layout/header/header.component.scss
@@ -0,0 +1,432 @@
+#HeaderMain {
+  background-color: #fff;
+  position: sticky;
+  width: 100%;
+  z-index: 9999;
+  top: 0;
+
+  .notification-not-readed {
+    background-color: #fcaf17;
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    border-radius: 50%;
+    top: 10px;
+    right: 10px;
+  }
+
+  .header-notification {
+    i {
+      font-size: 22px;
+      // color: #e09500;
+    }
+  }
+
+  .header-notification {
+    cursor: pointer;
+    font-size: 22px;
+    margin: auto;
+  }
+
+  .changeLang {
+    position: absolute;
+    top: 8px;
+    right: 16px;
+    z-index: 999;
+
+    img {
+      cursor: pointer;
+    }
+
+    a {
+      padding: 0 5px;
+      border-radius: 10px;
+      opacity: 0.6;
+
+      &.lang-active {
+        opacity: 1;
+        display: inline-block;
+        border: 1px solid #fcaf17;
+      }
+    }
+  }
+
+  .badge.badge-up {
+    position: absolute;
+    top: -9px;
+    right: 4px;
+    min-width: 1.429rem;
+    min-height: 1.429rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: .786rem;
+    line-height: .786;
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+  }
+
+  .changeLangScroll {
+    display: flex;
+    margin-left: 10px;
+    gap: 8px;
+
+    a {
+      padding: 2px 7px;
+      border-radius: 10px;
+      opacity: 0.6;
+
+      &.lang-active {
+        opacity: 1;
+        display: inline-block;
+        border: 1px solid #fcaf17;
+      }
+    }
+  }
+
+  .badge-danger {
+    background-color: #fcaf17 !important;
+    font-weight: 700;
+    border-radius: 50%;
+    font-size: 12px !important;
+  }
+
+  #navbarScroll {
+    .navbar-toggler {
+      background-color: #ffe7b8;
+    }
+
+    #menu-icon {
+      font-size: 24px;
+      color: #e09500;
+    }
+
+    #search-icon {
+      font-size: 16px;
+    }
+
+    .frm-search-head>.d-flex {
+      max-width: 88%;
+      margin: auto;
+    }
+
+    .frm-search-head {
+      width: 100%;
+      margin-top: 10px;
+
+      .form-search {
+        width: 100%;
+        margin-left: 10px;
+
+        .box-input-search {
+          width: 100%;
+
+          button {
+            border-color: #ccc;
+          }
+        }
+      }
+    }
+
+    .header-item {
+      display: flex;
+      justify-content: center;
+
+      .icon-services {
+        span {
+          background-color: #fff5e2;
+          border-radius: 50%;
+          padding: 10px;
+          font-size: 35px;
+          color: #e09500;
+        }
+      }
+
+      .header-content {
+        padding-left: 15px;
+
+        p {
+          margin: 0;
+          font-size: 15px;
+          color: #666;
+          line-height: 24px;
+        }
+      }
+    }
+
+    @media screen and (max-width: 600px) {
+      .header-item {
+        justify-content: flex-start;
+        padding: 10px 0;
+        border-top: 1px solid #ccc;
+      }
+
+      .frm-search-head {
+        margin: 0;
+        padding-top: 10px;
+        border-top: 1px solid #ccc;
+
+        .d-flex {
+          max-width: 100%;
+        }
+      }
+    }
+  }
+
+  .header-toggle-cus {
+    border: 1px solid #fcaf17;
+    padding: 7px 16px;
+    background: #fcaf17;
+  }
+
+  .sign-in {
+    order: 3;
+
+    .btn-secondary {
+      background-color: #ffe7b8;
+      border: 1px solid #ffe7b8;
+      color: #e09500;
+
+      &:hover {
+        border: 1px solid #e09500;
+      }
+    }
+
+    .btn-primary {
+      background-color: #fcaf17;
+      border: 1px solid #fcaf17;
+
+      &:hover {
+        background-color: #e09500;
+        border: 1px solid #e09500;
+      }
+    }
+  }
+
+  .avatar-size {
+    border-radius: 50%;
+    margin-right: 10px;
+    object-fit: cover;
+  }
+
+  .custom-button:hover {
+    color: #fcaf17;
+    cursor: pointer;
+  }
+
+  .custom-dropdown {
+    padding: 0;
+    // width: 100%;
+    border: none;
+    box-shadow: 0 0 4px #888;
+    border-radius: 2px;
+
+    a, span {
+      padding: 8px 10px;
+      color: #444;
+      cursor: pointer;
+      font-size: 14px;
+    }
+
+    button:hover,
+    a:hover, 
+    span:hover {
+      color: #fff;
+      background-color: #fcaf17;
+    }
+  }
+
+  .infomation-current-user {
+    .d-inline-block {
+      // background: #eee;
+      border-radius: 5px;
+    }
+  }
+
+  .dropdown-toggle::after {
+    display: none !important;
+  }
+
+  .dropdown-details {
+    width: 600px;
+    max-width: 100vw;
+
+    .dropdown-title {
+      padding: 10px 16px;
+      border-bottom: 1px solid #eee;
+
+      p {
+        font-size: 24px;
+        font-weight: 400;
+        margin: 0;
+      }
+    }
+
+    .dropdown-content {
+      padding: 10px 16px;
+
+      ul {
+        list-style: none;
+        margin: 0;
+      }
+
+      .category-title {
+        font-size: 16px;
+        font-weight: bold;
+      }
+
+      li {
+        margin-bottom: 8px;
+      }
+
+      a {
+        text-decoration: none;
+        color: #000;
+
+        &:hover {
+          color: #e09500;
+        }
+      }
+    }
+  }
+
+  &.custom-header {
+    height: 60px !important;
+
+    .navbar-brand {
+      img {
+        width: auto !important;
+        height: 50px !important;
+      }
+    }
+
+    .navbar {
+      padding-top: 0 !important;
+      padding-bottom: 0 !important;
+    }
+  }
+
+  .custom-span {
+    font-size: 20px !important;
+    position: absolute;
+    top: 10px;
+  }
+
+  @media screen and (max-width: 600px) {
+    .sign-in {
+      order: initial;
+    }
+  }
+
+  .dropdown-notification {
+    top: 140% !important;
+    box-shadow: 0 3px 5px 3px #ccc !important;
+    border: none !important;
+    width: 400px !important;
+
+    .dropdown-menu-header {
+      padding: 10px;
+      justify-content: space-between;
+      border-top-left-radius: 0.358rem;
+      border-top-right-radius: 0.358rem;
+
+      h4 {
+        font-weight: 700;
+      }
+
+      .badge-primary {
+        background-color: #fcaf17 !important;
+        font-size: 14px;
+
+      }
+    }
+
+
+    .header-content-notification {
+      height: 300px;
+      overflow: auto;
+
+      .item-notification {
+        padding: 10px;
+        text-decoration: none !important;
+        color: #000;
+        border-bottom: 1px solid #cccc;
+        position: relative;
+
+        .detail-item-notification {
+          font-size: 16px;
+          font-weight: 500;
+        }
+
+        .time-notification {
+          font-size: 14px;
+          margin-top: 10px;
+          color: #6e6b7b !important;
+          text-align: right;
+        }
+      }
+
+      .item-notification-unRead {
+        padding: 10px;
+        background-color: #f8f8f8;
+        border-bottom: 1px solid #cccc;
+        text-decoration: none !important;
+        color: #000;
+        position: relative;
+
+        .detail-item-notification {
+          font-size: 16px;
+          font-weight: 500;
+        }
+
+        .time-notification {
+          font-size: 14px;
+          margin-top: 10px;
+          color: #6e6b7b !important;
+          text-align: right;
+        }
+      }
+    }
+
+    .dropdown-menu-footer {
+      padding: 10px;
+
+      a {
+        width: 100%;
+      }
+    }
+  }
+
+  .icon-bell {
+    margin-right: 10px !important;
+  }
+
+  .item-notification-hover:hover {
+    background-color: #fafafa !important;
+  }
+
+}
+
+
+#packageCodeModal {
+  .modal-header {
+    background: #fcaf17;
+    color: #fff;
+    text-transform: uppercase;
+
+    h4 {
+      font-weight: bold;
+    }
+  }
+}
+
+@media screen and (max-width: 844px) {
+  .navbar-collapse {
+    background-color: #fff !important;
+  }
+}
+
+.modal {
+  //top: 20%;
+  z-index: 999999;
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/layout/header/header.component.ts b/Phaha_Package/src/app/layout/header/header.component.ts
new file mode 100644
index 0000000..4cca776
--- /dev/null
+++ b/Phaha_Package/src/app/layout/header/header.component.ts
@@ -0,0 +1,231 @@
+import {
+  Component,
+  OnInit,
+  HostListener,
+  Inject,
+  LOCALE_ID,
+  TemplateRef,
+  ViewEncapsulation,
+  ViewChild
+} from '@angular/core';
+import { Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { LoginService } from 'src/app/login/login.service';
+import { environment } from 'src/environments/environment';
+import { HeaderService } from './header.service';
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import { getMessaging, getToken, onMessage } from "firebase/messaging";
+import { AngularFireMessaging } from "@angular/fire/compat/messaging";
+import { PageModel } from 'src/app/Models/model';
+import moment from 'moment';
+import { LoginComponent } from 'src/app/login/login.component';
+import { RegisterUserComponent } from 'src/app/register-user/register-user.component';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class HeaderComponent implements OnInit {
+  currentUser: any = { image: '' };
+  @HostListener('window:scroll', ['$event']) // for window scroll events
+  isLogin = false;
+  baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  offsetFlag: boolean = true;
+  currentLang = '';
+  urlCurrent: any;
+  packages: any = [];
+  lang: string = "vi";
+  keyword: string = '';
+  listNew: any = { pageNumber: 1, pageSize: 6, result: [], totalItemCount: 0 };
+  pageCount: number = 0;
+  totalNew = 0;
+  typeModal: number = 0;
+  @ViewChild('LoginModal') templateRef: TemplateRef<NgbModal> | undefined;
+
+
+  constructor(
+    private loginService: LoginService,
+    private router: Router,
+    private translate: TranslateService,
+    private _headerService: HeaderService,
+    // private afMessaging: AngularFireMessaging,
+    @Inject(LOCALE_ID) public locale: string,
+    private modalService: NgbModal,
+  ) {
+    this.lang = localStorage.getItem("lang") ?? "vi";
+    this.currentUser = JSON.parse(localStorage.getItem("currentCustomer") ?? "{}");
+    if (typeof (this.currentUser) === 'object' && this.currentUser.jwtToken) {
+      this.isLogin = true;
+    }
+    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+      this.offsetFlag = false;
+    } else {
+      this.offsetFlag = true;
+    }
+    this.urlCurrent = this.router.url;
+  }
+
+  switchLang(lang: string) {
+    this.translate.use(lang);
+    localStorage.setItem('lang', lang);
+    // this.router.navigate(['/'])
+    //   .then(() => {
+        window.location.reload();
+      // });
+  }
+
+  onErrorHandle($event: any) {
+    $event.target.src = '/assets/image/avatar.jpg';
+  }
+
+  onLogOut() {
+    this.loginService.logOut().subscribe(() => {
+      localStorage.clear();
+      // this.router.navigate(['/']).then(() => {
+        window.location.reload();
+      // });
+    });
+  };
+
+  onSearchData() {
+    window.location.href = '/search?keyword=' + encodeURIComponent(this.keyword || '');
+  };
+
+  @HostListener('window:scroll', ['$event']) getScrollHeight(event: any) {
+    if (window.pageYOffset > 150 || /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
+      this.offsetFlag = false;
+    if (window.pageYOffset < 60 && !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+      this.offsetFlag = true;
+    }
+  };
+
+  onReturnLink() {
+    this.openModalWithSize(this.templateRef, 'md', 1);
+  };
+
+  onGetPackageHot() {
+    this._headerService.onGetPackageHot()
+      .subscribe(data => {
+        this.packages = data;
+      });
+  };
+
+  async openModalWithSize(content?: TemplateRef<NgbModal>, size?: string, type?: number): Promise<void> {
+    if (type) {
+      this.typeModal = type;
+      if (type === 1) {
+        this.modalService.open(content, { size: size, centered: true });
+      } else {
+        this.modalService.open(content, { size: size, centered: true });
+      }
+    }
+  };
+
+  openModalLogin() {
+    this.modalService.open(LoginComponent, { size: 'md', centered: true });
+  };
+
+  openModalRegister() {
+    this.modalService.open(RegisterUserComponent, { size: 'lg', centered: true });
+  };
+
+  openModalPackageCode(content: TemplateRef<NgbModal>) {
+    this.modalService.open(content, { size: 'lg', centered: true });
+  };
+
+  onGetListNotification() {
+    this._headerService.getListNewNotification(this.listNew)
+      .subscribe(
+        data => {
+          this.listNew.result = this.listNew.result.concat(data.data.result);
+          this.listNew.result.filter((x: any) => {
+            x.timeStamp = this.onTimeSince(x.dateCreate);
+          });
+          this.listNew.pageCount = data.data.pageCount;
+          this.pageCount = data.data.pageCount;
+        }
+      );
+  };
+
+  onTimeSince(date: any) {
+    const valueDateItem = new Date(date).valueOf();
+    const valueDate = new Date().valueOf();
+    var seconds = Math.floor((valueDate - valueDateItem) / 1000);
+
+    var interval = seconds / 31536000;
+
+    if (interval > 1) {
+      return Math.floor(interval) + " năm";
+    }
+    interval = seconds / 2592000;
+    if (interval > 1) {
+      return Math.floor(interval) + " tháng";
+    }
+    interval = seconds / 86400;
+    if (interval > 1) {
+      return Math.floor(interval) + " ngày";
+    }
+    interval = seconds / 3600;
+    if (interval > 1) {
+      return Math.floor(interval) + " tiếng";
+    }
+    interval = seconds / 60;
+    if (interval > 1) {
+      return Math.floor(interval) + " phút";
+    }
+    interval = seconds / 1000;
+    if (interval > 0) {
+      return Math.floor(seconds) + " giây";
+    }
+    if (interval < 1) {
+      return Math.floor(1) + " giây";
+    }
+    return;
+  };
+
+  onScroll(event: any) {
+    if (event.target.offsetHeight + 100 + event.target.scrollTop >= event.target.scrollHeight) {
+      if (this.listNew.pageNumber < this.pageCount) {
+        this.listNew.pageNumber++;
+        this.onGetListNotification();
+      }
+    }
+  };
+
+  onSetReaded(id: number) {
+    this._headerService.readedItemNews(id).subscribe(success => {
+      this.onGetListNotification();
+      // this.onGetTotalCount();
+    });
+  };
+
+  onSetReadAll() {
+    this._headerService.readAllNews().subscribe(success => {
+      this.onGetListNotification();
+      // this.onGetTotalCount();
+    });
+  };
+
+  // onGetTotalCount() {
+  //   this._headerService.onGetCountTotalNew().subscribe(success => {
+  //     this.totalNew = success.data
+  //   });
+  // };
+
+  ngOnInit(): void {
+    this.currentLang = this.translate.currentLang;
+    this.onGetPackageHot();
+    if (this.currentUser && this.currentUser.id) {
+      this.onGetListNotification();
+    }
+    ;
+    // this.onGetTotalCount();
+    // this.afMessaging.messages.subscribe((message: any) => {
+    //   message.data.timeStamp = this.onTimeSince(message.data.dateCreate);
+    //   this.listNew.unshift(message.data);
+    //   this.onGetTotalCount();
+    // });
+  };
+}
diff --git a/Phaha_Package/src/app/layout/header/header.module.ts b/Phaha_Package/src/app/layout/header/header.module.ts
new file mode 100644
index 0000000..14b6aac
--- /dev/null
+++ b/Phaha_Package/src/app/layout/header/header.module.ts
@@ -0,0 +1,42 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HeaderComponent } from './header.component';
+import { RouterModule } from '@angular/router';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { FormsModule } from '@angular/forms';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClient } from '@angular/common/http';
+import { LoginModule } from "../../login/login.module";
+import { MyPackageModule } from 'src/app/my-package/my-package.module';
+import { RegisterUserModule } from 'src/app/register-user/register-user.module';
+
+
+@NgModule({
+  declarations: [
+    HeaderComponent
+  ],
+  imports: [
+    RouterModule,
+    NgbModule,
+    CommonModule,
+    FormsModule,
+    RegisterUserModule,
+    TranslateModule.forRoot({
+      // defaultLanguage: 'vi',
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => {
+          return new TranslateHttpLoader(http, '../../../assets/i18n', '.json');
+        },
+        deps: [HttpClient]
+      }
+    }),
+    LoginModule,
+    MyPackageModule
+  ],
+  exports: [
+    HeaderComponent
+  ]
+})
+export class HeaderModule { }
diff --git a/Phaha_Package/src/app/layout/header/header.service.ts b/Phaha_Package/src/app/layout/header/header.service.ts
new file mode 100644
index 0000000..116cdb0
--- /dev/null
+++ b/Phaha_Package/src/app/layout/header/header.service.ts
@@ -0,0 +1,44 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { PageModel } from 'src/app/Models/model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HeaderService {
+
+  constructor(
+    private _http: HttpClient
+  ) {
+
+  }
+
+  onGetPackageHot() {
+    return this._http.get<any>("/package/package-hot");
+  };
+
+  getListNewNotification(model: any) {
+    let params = new HttpParams();
+    if (model.pageNumber) {
+      params = params.append('page', `${model.pageNumber}`);
+    };
+    if (model.pageSize) {
+      params = params.append('pageSize', `${model.pageSize}`);
+    };
+    if (model.keyWord) {
+      params = params.append('keyWord', `${model.keyWord}`);
+    };
+    return this._http.get<any>(`/notification/listnew`, { params });
+  };
+
+  onGetCountTotalNew() {
+    return this._http.get<any>('/notification/count-new')
+  }
+
+  readedItemNews(id: number) {
+    return this._http.get<any>(`/notification/read/` + id);
+  }
+  readAllNews() {
+    return this._http.get<any>('/notification/read-all');
+  }
+}
diff --git a/Phaha_Package/src/app/login/login.component.html b/Phaha_Package/src/app/login/login.component.html
new file mode 100644
index 0000000..baaa26d
--- /dev/null
+++ b/Phaha_Package/src/app/login/login.component.html
@@ -0,0 +1,98 @@
+<div class="modal-header">
+  <h4 class="modal-title" id="modalLabel">Đăng nhập</h4>
+  <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
+</div>
+<div class="modal-body" id="modal-add-edit">
+  <block-ui></block-ui>
+  <div id="page-login">
+    <div>
+      <form [formGroup]="formDataLogin" (ngSubmit)="onSubmitLogin()" class="ng-untouched ng-pristine ng-valid">
+        <div class="mb-3">
+          <div class="alert-body">
+            <ngb-alert *ngIf="textErrors">
+              {{ textErrors}}
+            </ngb-alert>
+          </div>
+          <label for="username" class="form-label">{{'sign-in.usename' | translate}}</label>
+          <input formControlName="username" type="email" id="username" placeholder="Email hoặc số điện thoại..."
+            class="form-control">
+          <div *ngIf="isValidate && fl['username'].errors" class="invalid-feedback"
+            [ngClass]="{ 'd-block': isValidate && fl['username'].errors }">
+            <div *ngIf="fl['username'].errors['required']" class="error-notification">
+              {{'sign-in.error-messages.error-username' | translate}}
+            </div>
+          </div>
+        </div>
+        <div class="mb-3">
+          <label for="password" class="form-label">{{'sign-in.password' | translate}}</label>
+          <div class="input-group">
+            <input formControlName="password" type="password" class="form-control bp-0" id="password"
+              placeholder="Xác nhận mật khẩu" [type]="passwordType ? 'text' : 'password'">
+            <span (click)="passwordType = ! passwordType" class="input-group-text background-icon-input custom-span">
+              <i [class]="passwordType? 'uil uil-eye-slash custom-icon' : 'uil uil-eye custom-icon'"></i>
+            </span>
+          </div>
+          <div *ngIf="isValidate && fl['password'].errors" class="invalid-feedback"
+            [ngClass]="{ 'd-block': isValidate && fl['password'].errors }">
+            <div *ngIf="fl['password'].errors['required']" class="error-notification">
+              {{'sign-in.error-messages.error-password' | translate}}
+            </div>
+          </div>
+        </div>
+        <div class="forget-password d-flex justify-content-between">
+          <div class="mb-3">
+            <div class="form-check">
+              <input [checked]="rememberMe" (change)="onCheckRemember($event)" type="checkbox" id="remember"
+                class="form-check-input">
+              <label for="remember" class="form-check-label">{{'sign-in.remember' | translate}}</label>
+            </div>
+          </div>
+          <div class="forget">
+            <a (click)="onForgetPassword()">{{'sign-in.forgot-password' | translate}}</a>
+          </div>
+        </div>
+        <div class="register-now">
+          <span>{{'sign-in.not-account' | translate}}
+            <a type="button" (click)="onRegister()">
+              {{'sign-in.register-now' | translate}}</a>
+          </span>
+        </div>
+        <div class="frm-action">
+          <button type="submit" class="btn btn-warning rounded-pill">{{'sign-in.title' | translate}}</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+<ng-template #devicesModal let-modal>
+  <div class="modal-header">
+    <h4 class="modal-title" id="modalLabel">Danh sách thiết bị đã đăng nhập</h4>
+    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
+  </div>
+  <div class="modal-body">
+    <div>
+      <div class="warning-login-device"><i>Tài khoản đã đăng nhập tối đa thiết bị/tối đa số lần trên 1 thiết bị, vui
+          lòng bấm vào "Thoát" để đăng nhập tiếp!</i></div>
+      <table class="table table-bordered">
+        <tbody>
+          <tr *ngFor="let item of devices">
+            <td>
+              <div>Browser: {{item.browser}}, Browser Version: {{item.browser_Version}}</div>
+              <div>Device Type: {{item.device_Type}}</div>
+              <div>Os: {{item.os}}, Os Version: {{item.os_Version}}</div>
+              <div>User: {{item.userAgent}}</div>
+              <div>Time login: {{item.timeLogin}}</div>
+            </td>
+            <td>
+              <button (click)="onDeleteDevice(item.device)" type="button" class="btn btn-warning">Thoát</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-danger" (click)="modal.dismiss('Cross click') ">Đóng</button>
+  </div>
+</ng-template>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/login/login.component.scss b/Phaha_Package/src/app/login/login.component.scss
new file mode 100644
index 0000000..21c6043
--- /dev/null
+++ b/Phaha_Package/src/app/login/login.component.scss
@@ -0,0 +1,125 @@
+#page-login {
+    margin-bottom: 20px;
+
+    height: 100%;
+
+    .header-title {
+        text-align: center;
+        font-size: 30px;
+    }
+
+    form {
+        max-width: 500px;
+        margin: auto;
+    }
+
+    .frm-action {
+        text-align: center;
+
+        .btn {
+            color: #fff;
+            width: 200px;
+            line-height: 30px;
+            font-weight: 600;
+            font-size: 20px;
+        }
+    }
+
+    .custom-radio:checked,
+    [type="radio"]:not(:checked) {
+        position: absolute;
+        left: -9999px;
+    }
+
+    .form-check-input {
+        width: 15px;
+        height: 15px;
+    }
+
+    .checkbox-custom {
+        opacity: 0;
+        position: absolute;
+    }
+
+    .checkbox-custom,
+    .checkbox-custom-label {
+        display: inline-block;
+        vertical-align: middle;
+        margin: 5px;
+        cursor: pointer;
+    }
+
+    .checkbox-custom+.checkbox-custom-label:before {
+        content: "";
+        background: #fff;
+        border-radius: 5px;
+        border: 2px solid #ddd;
+        display: inline-block;
+        vertical-align: middle;
+        width: 10px;
+        height: 10px;
+        padding: 2px;
+        margin-right: 10px;
+        text-align: center;
+    }
+
+    .checkbox-custom:checked+.checkbox-custom-label:before {
+        content: "";
+        display: inline-block;
+        width: 1px;
+        height: 5px;
+        border: solid #ffa900;
+        border-width: 0 3px 3px 0;
+        transform: rotate(45deg);
+        -webkit-transform: rotate(45deg);
+        -ms-transform: rotate(45deg);
+        border-radius: 0px;
+        margin: 0px 15px 5px 5px;
+    }
+
+    .forget {
+        a:hover {
+            color: #ffa900;
+            cursor: pointer;
+        }
+    }
+
+    .custom-icon {
+        font-size: 16px;
+    }
+}
+
+.form-control:focus {
+    color: #212529;
+    background-color: #fff;
+    border-color: #ffa900 !important;
+    outline: 0;
+    box-shadow: none !important;
+}
+
+.form-check-input:focus {
+    border-color: #ffa900 !important;
+    outline: 0;
+    box-shadow: none !important;
+}
+
+.warning-login-device {
+    font-weight: 600;
+    color: red;
+    margin-bottom: 10px;
+
+    i {
+        font-size: 16px;
+    }
+}
+
+.register-now {
+    text-align: center;
+    margin-bottom: 15px;
+
+    span {
+        a {
+            color: #ffc107 !important;
+        }
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/login/login.component.ts b/Phaha_Package/src/app/login/login.component.ts
new file mode 100644
index 0000000..635fc21
--- /dev/null
+++ b/Phaha_Package/src/app/login/login.component.ts
@@ -0,0 +1,211 @@
+import { Component, Input, OnInit, TemplateRef, ViewChild, ViewEncapsulation, inject } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { LoginService } from './login.service';
+import { BlockUI, NgBlockUI } from 'ng-block-ui';
+import { ToastrService } from 'ngx-toastr';
+import { finalize } from 'rxjs/operators';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NgbActiveModal, NgbAlertConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { FlatpickrOptions } from 'ng2-flatpickr';
+import { Meta, Title } from '@angular/platform-browser';
+import { DeviceDetectorService } from 'ngx-device-detector';
+import { getMessaging, getToken } from 'firebase/messaging';
+import { environment } from 'src/environments/environment';
+import firebase from 'firebase/compat/app';
+import { HttpClient } from '@angular/common/http';
+import { RegisterUserComponent } from '../register-user/register-user.component';
+import { ForgetPasswordComponent } from '../forget-password/forget-password.component';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss'],
+  providers: [NgbAlertConfig],
+  encapsulation: ViewEncapsulation.None,
+})
+
+export class LoginComponent implements OnInit {
+
+  modal = inject(NgbActiveModal);
+
+  @Input() public alerts: Array<string> = [];
+
+  @BlockUI() blockUI: NgBlockUI | undefined;
+  passwordType: boolean = false;
+  isValidate: boolean = false;
+  isValidateRegister: boolean = false;
+  rememberMe: boolean = false;
+  formDataLogin: FormGroup;
+  modelUser: any = { username: '', password: '' }
+  textErrors: any;
+  textErrorsRegister: any;
+  basicDateOptions: FlatpickrOptions = {
+    altInput: true,
+    altFormat: 'd/m/Y',
+    static: true,
+    mode: "single",
+    allowInvalidPreload: false,
+    allowInput: true,
+    wrap: true,
+    maxDate: new Date(),
+  };
+  returnUrl: string = '';
+  currentUser: any = {};
+  devices: any = [];
+  @ViewChild('devicesModal', { static: true }) devicesModal: any;
+  ipAddress: string = '';
+
+  constructor(
+    private _loginService: LoginService,
+    private _formBuilder: FormBuilder,
+    private _router: Router,
+    private _alertConfig: NgbAlertConfig,
+    private _title: Title,
+    private _meta: Meta,
+    private _toastrService: ToastrService,
+    private _activeModal: NgbModal,
+    private _httpClient: HttpClient,
+    private route: ActivatedRoute
+  ) {
+    this.currentUser = JSON.parse(localStorage.getItem("currentCustomer") ?? "{}");
+    this._alertConfig.type = 'danger';
+    this._alertConfig.dismissible = false;
+    this.formDataLogin = this._formBuilder.group({
+      username: ['', [Validators.required]],
+      password: ['', [Validators.required]],
+      removeDevice: [null]
+    });
+  }
+
+  onSubmitLogin() {
+    this.isValidate = true;
+    if (this.rememberMe) {
+      localStorage.setItem('rememberCustomer', JSON.stringify({
+        username: this.formDataLogin.value.username,
+        password: this.formDataLogin.value.password,
+      }));
+    } else {
+      localStorage.removeItem('rememberCustomer');
+    }
+
+    if (this.formDataLogin.valid) {
+      this._loginService.onSubmit(this.formDataLogin.value)
+        .subscribe(res => {
+          if (res.success == true) {
+            localStorage.setItem('currentCustomer', JSON.stringify(res));
+            this._activeModal.dismissAll("Thành công!");
+            // this.onRequestPermission();
+            this.onReload();
+            // this._activeModal.dismissAll("Thành công!");
+            // this._router.navigate([`/profile?tab=1`], {relativeTo: this.route}).then(() => {
+            //   window.location.reload();
+            // });
+
+            // this._router.navigate([`/profile`], { relativeTo: this.route });
+          } else {
+            this._activeModal.dismissAll("Thất bại!");
+            this.devices = res.devices;
+            this._toastrService.error(res.messages, 'Lỗi', {
+              timeOut: 2000
+            });
+
+            this._activeModal.open(this.devicesModal, { size: 'lg', centered: true });
+          }
+        }, error => {
+          if (error) {
+            this.textErrors = error;
+          }
+        }
+        );
+    }
+  }
+
+  onCheckRemember(e: any) {
+    this.rememberMe = e.target.value;
+  }
+
+  onForgetPassword() {
+    this._activeModal.dismissAll(`Close`);
+    this._activeModal.open(ForgetPasswordComponent, { size: 'md', centered: true });
+  }
+
+  onRegister() {
+    this._activeModal.dismissAll(`Close`);
+    this._activeModal.open(RegisterUserComponent, { size: 'lg', centered: true });
+  }
+
+  get fl() {
+    return this.formDataLogin.controls;
+  }
+
+  // saveTokenFirebase(currentToken: any) {
+  //   this._loginService.saveTokenFireBase(currentToken)
+  //     .pipe(finalize(() => {
+  //       this.onReload();
+  //     }))
+  //     .subscribe(
+  //       data => {
+  //       }
+  //     );
+  // };
+
+  // onRequestPermission() {
+  //   const messaging = getMessaging();
+  //   getToken(messaging, { vapidKey: environment.firebase.vapidKey })
+  //     .finally(() => { })
+  //     .then(
+  //       (currentToken) => {
+  //         if (currentToken) {
+  //           this.saveTokenFirebase(currentToken);
+  //         } else {
+  //           console.log('No registration token available. Request permission to generate one.');
+  //         }
+  //       }).catch((err) => {
+  //         console.log('An error occurred while retrieving token. ', err);
+  //       });
+  // }
+
+  onReload() {
+    if (this.returnUrl) {
+      this._router.navigateByUrl(this.returnUrl)
+        .then(() => {
+          window.location.reload();
+        });
+    } else {
+      window.location.reload();
+    }
+  }
+
+  onDeleteDevice(token: string) {
+    this.formDataLogin.controls['removeDevice'].setValue(token);
+    this.onSubmitLogin();
+  }
+
+  ngOnInit(): void {
+    this.returnUrl = this.route.snapshot.queryParams['returnUrl'];
+    const rememberUserStr = localStorage.getItem('rememberCustomer');
+    if (rememberUserStr) {
+      const rememberUser = JSON.parse(rememberUserStr);
+      this.formDataLogin.patchValue(rememberUser);
+      if (rememberUser.username) {
+        this.rememberMe = true;
+      }
+    }
+    //SEO:
+    this._title.setTitle('Đăng nhập, đăng ký thành viên tại Post ENP');
+    this._meta.addTags([
+      { name: 'description', content: 'Đăng ký thành viên, nhận ngay nhiều ưu đãi.' },
+      { name: 'keyWords', content: 'báo bản quyền, sách bản quyền, thông tin, thông tin uy tín, báo pdf, báo điện tử, sách pdf, sách điện tử' },
+
+      { property: 'og:url', content: 'https://postenp.intlabs.vn' },
+      { property: 'og:title', content: 'Đăng nhập, đăng ký thành viên tại Post ENP' },
+      { property: 'og:description', content: 'Đăng ký thành viên, nhận ngay nhiều ưu đãi.' },
+      { property: 'og:image', content: 'https://postenp.intlabs.vn/assets/images/brand/brand-logo.png' },
+
+      { property: 'twitter:card', content: 'summary_large_image' },
+      { property: 'twitter:title', content: 'Đăng nhập, đăng ký thành viên tại Post ENP' },
+      { property: 'twitter:description', content: 'Đăng ký thành viên, nhận ngay nhiều ưu đãi.' },
+      { property: 'twitter:image', content: 'https://postenp.intlabs.vn/assets/images/brand/brand-logo.png' },
+    ]);
+  }
+}
diff --git a/Phaha_Package/src/app/login/login.module.ts b/Phaha_Package/src/app/login/login.module.ts
new file mode 100644
index 0000000..10189aa
--- /dev/null
+++ b/Phaha_Package/src/app/login/login.module.ts
@@ -0,0 +1,40 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { LoginComponent } from './login.component';
+import { BlockUIModule } from 'ng-block-ui';
+import { Ng2FlatpickrModule } from 'ng2-flatpickr';
+import { RegisterUserComponent } from '../register-user/register-user.component';
+import { ForgetPasswordComponent } from '../forget-password/forget-password.component';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClient } from '@angular/common/http';
+import { RegisterUserModule } from '../register-user/register-user.module';
+
+
+@NgModule({
+    declarations: [LoginComponent, ForgetPasswordComponent],
+    exports: [
+        LoginComponent,
+    ],
+    imports: [
+        CommonModule,
+        NgbModule,
+        FormsModule,
+        ReactiveFormsModule,
+        BlockUIModule.forRoot(),
+        Ng2FlatpickrModule,
+        TranslateModule.forRoot({
+            loader: {
+                provide: TranslateLoader,
+                useFactory: (http: HttpClient) => {
+                    return new TranslateHttpLoader(http, '../../../assets/i18n', '.json');
+                },
+                deps: [HttpClient]
+            }
+        }),
+        RegisterUserModule
+    ]
+})
+export class LoginModule { }
diff --git a/Phaha_Package/src/app/login/login.service.ts b/Phaha_Package/src/app/login/login.service.ts
new file mode 100644
index 0000000..81696aa
--- /dev/null
+++ b/Phaha_Package/src/app/login/login.service.ts
@@ -0,0 +1,69 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import moment from 'moment';
+import { DeviceDetectorService } from 'ngx-device-detector';
+import { registerUser } from '../auth/models/user';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoginService {
+
+  constructor(
+    private http: HttpClient,
+    private router: Router,
+    private deviceService: DeviceDetectorService
+  ) { }
+
+  onSubmit(model: any) {
+    model.type = 1;
+    let deviceInfo = this.deviceService.getDeviceInfo();
+    deviceInfo.deviceType = this.deviceService.isDesktop() ? 'Desktop' : (this.deviceService.isTablet() ? 'Tablet' : (this.deviceService.isMobile() ? 'Mobile' : ''));
+    return this.http.post<any>(`/auth/login`, Object.assign(model, deviceInfo));
+  }
+
+  logOut() {
+    return this.http.get<any>(`/auth/logout`);
+  }
+
+  registerUser(model: registerUser) {
+    if (model['birthDay'] instanceof Array) {
+      model['birthDay'] = model['birthDay'][0];
+      const convertStrDate = model.birthDay.toString();
+      model.birthDay = moment(convertStrDate).format('DD/MM/yyyy');
+    }
+    if (model['enterpriseSignDate'] instanceof Array) {
+      model['enterpriseSignDate'] = model['enterpriseSignDate'][0];
+      const convertStrDate = model.enterpriseSignDate.toString();
+      model.enterpriseSignDate = moment(convertStrDate).format('DD/MM/yyyy');
+    }
+    return this.http.post<any>(`/auth/register`, model);
+  }
+
+  // saveTokenFireBase(currentToken: any) {
+  //   return this.http.post<any>(`/auth/save-token-firebase`, { tokenNew: currentToken });
+  // };
+
+  getDataProvince() {
+    return this.http.get<any>('/province/listitem');
+  }
+  getDataDistrict(id: any) {
+    return this.http.get<any>(`/district/listitem/${id}`);
+  }
+
+  getDataWards(id: any) {
+    return this.http.get<any>(`/wards/listitem/${id}`);
+  }
+
+  getDataSchool(model: any) {
+    let params = new HttpParams();
+    const names = Object.keys(model);
+    names.forEach(name => {
+      if (model[name]) {
+        params = params.append(name, `${model[name]}`)
+      }
+    });
+    return this.http.get<any>('/school/listitem', { params });
+  }
+}
diff --git a/Phaha_Package/src/app/modules/account/account.module.ts b/Phaha_Package/src/app/modules/account/account.module.ts
new file mode 100644
index 0000000..42cbdf5
--- /dev/null
+++ b/Phaha_Package/src/app/modules/account/account.module.ts
@@ -0,0 +1,44 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AccountProfileComponent } from './components/account-profile/account-profile.component';
+import { AccountPackageBoughtComponent } from './components/account-package-bought/account-package-bought.component';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { QuillModule } from 'ngx-quill';
+import { BlockUIModule } from 'ng-block-ui';
+import { ToastrModule } from 'ngx-toastr';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Ng2FlatpickrModule } from 'ng2-flatpickr';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { NgxTranslateModule } from 'src/app/translate/translate.module';
+import { HttpClientModule } from '@angular/common/http';
+import { RouterModule } from '@angular/router';
+import { VneconomyModule } from 'src/app/editorial-office/vneconomy/vneconomy-home/vneconomy.module';
+
+
+
+@NgModule({
+  declarations: [
+    AccountProfileComponent,
+    AccountPackageBoughtComponent
+  ],
+  imports: [
+    CommonModule,
+    BrowserModule,
+    NgbModule,
+    QuillModule.forRoot(),
+    BlockUIModule.forRoot(),
+    ToastrModule.forRoot({ timeOut: 2000, maxOpened: 1 }),
+    BrowserAnimationsModule,
+    Ng2FlatpickrModule,
+    FormsModule,
+    ReactiveFormsModule,
+    NgSelectModule,
+    NgxTranslateModule,
+    HttpClientModule,
+    RouterModule,
+    VneconomyModule
+  ]
+})
+export class AccountModule { }
diff --git a/Phaha_Package/src/app/modules/account/components/account-package-bought/account-package-bought.component.html b/Phaha_Package/src/app/modules/account/components/account-package-bought/account-package-bought.component.html
new file mode 100644
index 0000000..b00a6a5
--- /dev/null
+++ b/Phaha_Package/src/app/modules/account/components/account-package-bought/account-package-bought.component.html
@@ -0,0 +1 @@
+<p>account-package-bought works!</p>
diff --git a/Phaha_Package/src/app/modules/account/components/account-package-bought/account-package-bought.component.scss b/Phaha_Package/src/app/modules/account/components/account-package-bought/account-package-bought.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/Phaha_Package/src/app/modules/account/components/account-package-bought/account-package-bought.component.ts b/Phaha_Package/src/app/modules/account/components/account-package-bought/account-package-bought.component.ts
new file mode 100644
index 0000000..e559b1f
--- /dev/null
+++ b/Phaha_Package/src/app/modules/account/components/account-package-bought/account-package-bought.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-account-package-bought',
+  templateUrl: './account-package-bought.component.html',
+  styleUrls: ['./account-package-bought.component.scss']
+})
+export class AccountPackageBoughtComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/modules/account/components/account-profile/account-profile.component.html b/Phaha_Package/src/app/modules/account/components/account-profile/account-profile.component.html
new file mode 100644
index 0000000..eac6bec
--- /dev/null
+++ b/Phaha_Package/src/app/modules/account/components/account-profile/account-profile.component.html
@@ -0,0 +1,576 @@
+<block-ui>
+    <div class="page-profile">
+        <div class="container">
+            <div class="infomation-profile">
+                <div class="row match-height">
+                    <div class="col-md-4">
+                        <div class="card" *ngIf="inforDetail">
+                            <div class="card-body">
+                                <div class="image-show">
+                                    <img (error)="onHadleErros($event)" [src]="imageDetail" />
+                                </div>
+                                <div class="action-choice-image text-center mt-3">
+                                    <input (change)="onFileProgress($event)" class="hidden"
+                                        accept="image/png, image/gif, image/jpeg" [(ngModel)]="resetImage" #file
+                                        type="file" />
+                                    <button *ngIf="!showImage" class="btn btn-warning btn-custom"
+                                        (click)="file.click()">
+                                        <span data-feather="image"></span>
+                                        {{'cta.select' | translate}}
+                                    </button>
+                                    <button *ngIf="showImage" class="btn btn-success custom-margin "
+                                        (click)="onSaveImage()">
+                                        <span data-feather="check"></span>
+                                        {{'cta.save' | translate}}
+                                    </button>
+                                    <button *ngIf="showImage" class="btn btn-danger" (click)="onRemoveImage()">
+                                        <span data-feather="x-circle"></span>
+                                        {{'cta.delete' | translate}}
+                                    </button>
+                                </div>
+                                <div class="infomation-profile-detail mt-3 border-top p-2">
+                                    <p>{{'detail.fullname' | translate}}: {{inforDetail.fullName}} </p>
+                                    <p *ngIf="!isEnterprise">{{'detail.dob' | translate}}: {{inforDetail.birthDay |
+                                        date: 'dd/MM/yyyy'}} </p>
+                                    <p *ngIf="isEnterprise">{{'detail.sign-date' | translate}}: {{inforDetail.birthDay |
+                                        date: 'dd/MM/yyyy'}} </p>
+                                    <p>{{'detail.phone' | translate}}: {{inforDetail.phone}} </p>
+                                    <p>{{'detail.email' | translate}}: {{inforDetail.email}} </p>
+                                    <p>{{'detail.address' | translate}}: {{inforDetail.address}} </p>
+                                    <p>{{'profile.registered-package' | translate}}: {{inforDetail.totalPackageBought}}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-8">
+                        <div class="card">
+                            <div class="card-body">
+                                <ul [(activeId)]="activeTab" ngbNav #nav="ngbNav" class="nav-pills"
+                                    (navChange)="onChangeTab($event)">
+                                    <li [ngbNavItem]="1">
+                                        <a ngbNavLink>{{'profile.registered-history' | translate}}</a>
+                                        <ng-template ngbNavContent>
+                                            <div class="chk-get-all">
+                                                <input id="GetAll" type="checkbox" (change)="getPackageExpire($event)">
+                                                <label for="GetAll">{{'profile.get-all' | translate}}</label>
+                                            </div>
+                                            <div class="data-table-history">
+                                                <table class="table custom-table mt-3">
+                                                    <thead class="custom-thead">
+                                                        <tr>
+                                                            <th scope="col">{{'detail.numerical-order' | translate}}
+                                                            </th>
+                                                            <th scope="col">{{'detail.package-name' | translate}}</th>
+                                                            <th scope="col">{{'detail.expire-date' | translate}}</th>
+                                                            <th scope="col">{{'detail.amount' | translate}}</th>
+                                                            <th scope="col">{{'detail.price' | translate}}</th>
+                                                            <th scope="col"></th>
+                                                        </tr>
+                                                    </thead>
+                                                    <tbody>
+                                                        <tr *ngFor="let item of packageBought.result; let i = index">
+                                                            <th scope="row">{{(10 * (packageBought.page - 1)) + i + 1}}</th>
+                                                            <td>
+                                                                <a href="/chi-tiet-goi/{{item.packageId}}">
+                                                                    <b>{{item.packageName}}</b>
+                                                                </a>
+                                                            </td>
+                                                            <td>{{item.dateExpire | date: 'dd/MM/yyyy HH:mm'}}</td>
+                                                            <td>{{item.total}}</td>
+                                                            <td class="text-right">{{item.price * item.total | number}}</td>
+                                                            <td>
+                                                                <a *ngIf="item.hasUpgrade" routerLink="/package-upgrade/{{item.packageId}}/{{item.id}}">{{'cta.upgrade' | translate}}</a>
+                                                            </td>
+                                                        </tr>
+                                                        <tr>
+                                                            <td colspan="4" class="text-right"><span>
+                                                                    {{'payment.total' | translate}}:
+                                                                </span>
+                                                            </td>
+                                                            <td class="text-right">
+                                                                {{totalMoney | number}}
+                                                            </td>
+                                                        </tr>
+                                                    </tbody>
+                                                </table>
+                                                <div class="footer-table float-end">
+                                                    <ngb-pagination [collectionSize]="packageBought.totalItemCount"
+                                                        [(page)]="packageBought.page" [maxSize]="3" [rotate]="true"
+                                                        [pageSize]="packageBought.pageSize"
+                                                        (pageChange)="changePagePackageBought($event)">
+                                                    </ngb-pagination>
+                                                </div>
+                                            </div>
+                                        </ng-template>
+                                    </li>
+                                    <li [ngbNavItem]="2">
+                                        <a ngbNavLink>{{'profile.change-info' | translate}}</a>
+                                        <ng-template ngbNavContent>
+                                            <div class="change-info mt-4">
+                                                <form [formGroup]="formProfile" (ngSubmit)="onSubmitProfile()">
+                                                    <div *ngIf="!isEnterprise">
+                                                        <div class="form-group mb-3 row">
+                                                            <label class="col-md-4 col-xs-12" for="fullName">
+                                                                {{'detail.fullname' | translate}}
+                                                                <span class="text-danger">(*)</span>
+                                                            </label>
+                                                            <div class="col-md-6 col-xs-12">
+                                                                <input formControlName="fullName" class="form-control" id="fullName" />
+                                                                <div *ngIf="submitProfile && f['fullName'].errors"
+                                                                    class="invalid-feedback"
+                                                                    [ngClass]="{ 'd-block': submitProfile && f['fullName'].errors }">
+                                                                    <div *ngIf="f['fullName'].errors['required']" class="error-notification">
+                                                                        {{'sign-up.error-messages.error-fullname.blank' | translate}}
+                                                                    </div>
+                                                                    <div *ngIf="f['fullName'].errors['maxlength']" class="error-notification">
+                                                                        Họ và tên không được phép nhập quá 250 ký tự!
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="form-group mb-3 row">
+                                                            <label class="col-md-4 col-xs-12" for="birthDay">
+                                                                {{'detail.dob' | translate}}
+                                                            </label>
+                                                            <div class="col-md-6 col-xs-12">
+                                                                <ng2-flatpickr formControlName="birthDay"
+                                                                    [setDate]="inforDetail.birthDay"
+                                                                    [config]="basicDateOptions">
+                                                                </ng2-flatpickr>
+                                                            </div>
+                                                        </div>
+                                                        <div class="form-group mb-3 row">
+                                                            <label class="col-md-4 col-xs-12" for="phone">
+                                                                {{'detail.phone' | translate}}
+                                                            </label>
+                                                            <div class="col-md-6 col-xs-12">
+                                                                <input readonly formControlName="phone" class="form-control" id="phone" />
+                                                            </div>
+                                                        </div>
+                                                        <div class="form-group mb-3 row">
+                                                            <label class="col-md-4 col-xs-12" for="email">{{'detail.email' | translate}}</label>
+                                                            <div class="col-md-6 col-xs-12">
+                                                                <input readonly formControlName="email" class="form-control" id="email" />
+                                                            </div>
+                                                        </div>
+                                                        <div class="form-group mb-3 row">
+                                                            <label class="col-md-4 col-xs-12" for="address">
+                                                                {{'detail.address' | translate}}
+                                                            </label>
+                                                            <div class="col-md-6 col-xs-12">
+                                                                <input formControlName="address" class="form-control" id="address" />
+                                                                <div *ngIf="submitProfile && f['address'].errors" class="invalid-feedback"
+                                                                    [ngClass]="{ 'd-block': submitProfile && f['address'].errors }">
+                                                                    <div *ngIf="f['address'].errors['maxlength']" class="error-notification">
+                                                                        {{'profile.err-address' | translate}}
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="row" *ngIf="isEnterprise">
+                                                        <div class="col-md-6 col-12 mt-3">
+                                                            <label for="enterpriseEmail" class="form-label">
+                                                                {{'sign-up.email' | translate}}
+                                                                <span class="text-danger">(*)</span>
+                                                            </label>
+                                                            <input id="enterpriseEmail"
+                                                                formControlName="enterpriseEmail" type="email" readonly
+                                                                placeholder="{{'sign-up.email-placeholder' | translate}}"
+                                                                class="form-control">
+                                                        </div>
+                                                        <div class="col-md-6 col-12 mt-3">
+                                                            <label for="enterprisePhone" class="form-label">
+                                                                {{'sign-up.phone' | translate}}
+                                                                <span class="text-danger">(*)</span>
+                                                            </label>
+                                                            <input id="enterprisePhone"
+                                                                formControlName="enterprisePhone" type="text"
+                                                                placeholder="{{'sign-up.phone-placeholder' | translate}}"
+                                                                class="form-control" maxlength="50">
+                                                            <div *ngIf="submitProfile && f['enterprisePhone'].errors"
+                                                                class="invalid-feedback"
+                                                                [ngClass]="{ 'd-block': submitProfile && f['enterprisePhone'].errors }">
+                                                                <div *ngIf="f['enterprisePhone'].errors['maxLength']"
+                                                                    class="error-notification">
+                                                                    {{'sign-up.error-messages.error-phone.maxlength' |
+                                                                    translate}}
+                                                                </div>
+                                                                <div *ngIf="f['enterprisePhone'].errors['required']"
+                                                                    class="error-notification">
+                                                                    {{'sign-up.error-messages.error-phone.blank' |
+                                                                    translate}}
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-md-6 col-12 mt-3">
+                                                            <label for="enterpriseName" class="form-label">
+                                                                {{'sign-up.enterprise-name' | translate}}
+                                                                <span class="text-danger">(*)</span>
+                                                            </label>
+                                                            <input id="enterpriseName" formControlName="enterpriseName"
+                                                                type="text"
+                                                                placeholder="{{'sign-up.enterprise-name-placeholder' | translate}}"
+                                                                class="form-control">
+                                                            <div *ngIf="submitProfile && f['enterpriseName'].errors"
+                                                                class="invalid-feedback"
+                                                                [ngClass]="{ 'd-block': submitProfile && f['enterpriseName'].errors }">
+                                                                <div *ngIf="f['enterpriseName'].errors['required']"
+                                                                    class="error-notification">
+                                                                    {{'sign-up.error-messages.error-enterprise-name.blank'
+                                                                    | translate}}
+                                                                </div>
+                                                                <div *ngIf="f['enterpriseName'].errors['minlength']"
+                                                                    class="error-notification">
+                                                                    {{'sign-up.error-messages.error-enterprise-name.minimum'
+                                                                    | translate}}
+                                                                </div>
+                                                                <div *ngIf="f['enterpriseName'].errors['maxlength']"
+                                                                    class="error-notification">
+                                                                    {{'sign-up.error-messages.error-enterprise-name.maximum'
+                                                                    | translate}}
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-md-6 col-12 mt-3">
+                                                            <label for="enterpriseTaxCode"
+                                                                class="form-label">{{'sign-up.taxcode' |
+                                                                translate}}</label>
+                                                            <input id="enterpriseTaxCode"
+                                                                formControlName="enterpriseTaxCode" type="text"
+                                                                placeholder="{{'sign-up.taxcode-placeholder' | translate}}"
+                                                                class="form-control">
+                                                        </div>
+                                                        <div class="col-md-6 col-12 mt-3">
+                                                            <label for="enterpriseAddress"
+                                                                class="form-label">{{'sign-up.address' |
+                                                                translate}}</label>
+                                                            <input formControlName="enterpriseAddress" type="text"
+                                                                placeholder="{{'sign-up.address-placeholder' | translate}}"
+                                                                class="form-control">
+                                                            <div *ngIf="submitProfile && f['enterpriseAddress'].errors"
+                                                                class="invalid-feedback"
+                                                                [ngClass]="{ 'd-block': submitProfile && f['address'].errors }">
+                                                                <div *ngIf="f['enterpriseAddress'].errors['maxlength']"
+                                                                    class="error-notification">
+                                                                    {{'sign-up.error-messages.error-address' |
+                                                                    translate}}
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-md-6 col-12 mt-3">
+                                                            <label for="enterpriseHeadQuarters"
+                                                                class="form-label">{{'sign-up.headquarters' |
+                                                                translate}}</label>
+                                                            <input formControlName="enterpriseHeadQuarters" type="text"
+                                                                placeholder="{{'sign-up.headquarters-placeholder' | translate}}"
+                                                                class="form-control">
+                                                        </div>
+                                                        <div class="col-md-6 col-12 mt-3">
+                                                            <label for="enterpriseLegalRepresentative"
+                                                                class="form-label">{{'sign-up.legal-representative' |
+                                                                translate}}</label>
+                                                            <input formControlName="enterpriseLegalRepresentative"
+                                                                type="text"
+                                                                placeholder="{{'sign-up.legal-representative-placeholder' | translate}}"
+                                                                class="form-control">
+                                                        </div>
+                                                        <div class="col-md-6 col-12 mt-3">
+                                                            <label for="enterprisePosition"
+                                                                class="form-label">{{'sign-up.position' |
+                                                                translate}}</label>
+                                                            <input formControlName="enterprisePosition" type="text"
+                                                                placeholder="{{'sign-up.position-placeholder' | translate}}"
+                                                                class="form-control">
+                                                        </div>
+                                                        <div class="col-md-6 col-12 mt-3">
+                                                            <label class="form-label">{{'sign-up.authorization-letter' |
+                                                                translate}}</label>
+                                                            <input formControlName="enterpriseAuthorizationLetter"
+                                                                type="text"
+                                                                placeholder="{{'sign-up.authorization-letter-placeholder' | translate}}"
+                                                                class="form-control">
+                                                        </div>
+                                                        <div class="col-md-6 col-12 mt-3">
+                                                            <div>
+                                                                <label for="enterpriseSignDate"
+                                                                    class="form-label">{{'sign-up.sign-date' |
+                                                                    translate}}</label>
+                                                            </div>
+                                                            <ng2-flatpickr formControlName="enterpriseSignDate"
+                                                                [config]="basicDateOptions">
+                                                                <i class="bi bi-calendar2"></i>
+                                                            </ng2-flatpickr>
+                                                        </div>
+                                                    </div>
+                                                    <div class="mt-3 action-changeInf">
+                                                        <button type="submit" class="btn btn-success margin-custom">
+                                                            {{'cta.save' | translate}}
+                                                        </button>
+                                                    </div>
+                                                </form>
+                                            </div>
+                                        </ng-template>
+                                    </li>
+                                    <li [ngbNavItem]="3">
+                                        <a ngbNavLink>{{'profile.change-password' | translate}}</a>
+                                        <ng-template ngbNavContent>
+                                            <form [formGroup]="formResetValue" (ngSubmit)="onSubmitResetPassword()">
+                                                <div class="change-password mt-4">
+                                                    <div class="form-group mb-3 row">
+                                                        <label class="col-md-4 col-xs-12" for="passwordCurrent">
+                                                            {{'profile.old-password' | translate}}
+                                                            <span class="text-danger">(*)</span>
+                                                        </label>
+                                                        <div class="col-md-6 col-xs-12">
+                                                            <div class="input-group">
+                                                                <input formControlName="passwordOld" type="password"
+                                                                    class="form-control bp-0" id="passwordCurrent"
+                                                                    placeholder="{{'profile.placeholder-old-password' | translate}}"
+                                                                    [type]="passwordInput ? 'text' : 'password'">
+                                                                <span (click)="passwordInput = ! passwordInput"
+                                                                    class="input-group-text background-icon-input custom-span">
+                                                                    <i
+                                                                        [class]="passwordInput? 'uil uil-eye-slash custom-icon' : 'uil uil-eye custom-icon'"></i>
+                                                                </span>
+                                                            </div>
+                                                            <div *ngIf="isValidateRs && fp['passwordOld'].errors"
+                                                                class="invalid-feedback"
+                                                                [ngClass]="{ 'd-block': isValidateRs && fp['passwordOld'].errors }">
+                                                                <div *ngIf="fp['passwordOld'].errors['required']"
+                                                                    class="error-notification">
+                                                                    {{'sign-up.error-messages.error-password.blank' |
+                                                                    translate}}
+                                                                </div>
+                                                                <div *ngIf="fp['passwordOld'].errors['maxlength']"
+                                                                    class="error-notification">
+                                                                    {{'sign-up.error-messages.error-password.maximum' |
+                                                                    translate}}
+                                                                </div>
+                                                                <div *ngIf="fp['passwordOld'].errors['pattern']"
+                                                                    class="error-notification">
+                                                                    {{'sign-up.error-messages.error-password.format' |
+                                                                    translate}}
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="form-group mb-3 row">
+                                                        <label class="col-md-4 col-xs-12" for="passwordNew">
+                                                            {{'profile.new-password' | translate}}
+                                                            <span class="text-danger">(*)</span></label>
+                                                        <div class="col-md-6 col-xs-12">
+                                                            <div class="input-group">
+                                                                <input formControlName="passwordNew" type="password"
+                                                                    class="form-control bp-0" id="passwordNew"
+                                                                    placeholder="{{'profile.placeholder-new-password' | translate}}"
+                                                                    [type]="passwordNew ? 'text' : 'password'">
+                                                                <span (click)="passwordNew = ! passwordNew"
+                                                                    class="input-group-text background-icon-input custom-span">
+                                                                    <i
+                                                                        [class]="passwordNew? 'uil uil-eye-slash custom-icon' : 'uil uil-eye custom-icon'"></i>
+                                                                </span>
+                                                            </div>
+                                                            <div *ngIf="isValidateRs && fp['passwordNew'].errors"
+                                                                class="invalid-feedback"
+                                                                [ngClass]="{ 'd-block': isValidateRs && fp['passwordNew'].errors }">
+                                                                <div *ngIf="fp['passwordNew'].errors['required']"
+                                                                    class="error-notification">
+                                                                    {{'sign-up.error-messages.error-password.blank' |
+                                                                    translate}}
+                                                                </div>
+                                                                <div *ngIf="fp['passwordNew'].errors['maxlength']"
+                                                                    class="error-notification">
+                                                                    {{'sign-up.error-messages.error-password.maximum' |
+                                                                    translate}}
+                                                                </div>
+                                                                <div *ngIf="fp['passwordNew'].errors['pattern']"
+                                                                    class="error-notification">
+                                                                    {{'sign-up.error-messages.error-password.format' |
+                                                                    translate}}
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="form-group mb-3 row">
+                                                        <label class="col-md-4 col-xs-12" for="confirmPassword">
+                                                            {{'profile.confirm-password' | translate}}
+                                                            <span class="text-danger">(*)</span>
+                                                        </label>
+                                                        <div class="col-md-6 col-xs-12">
+                                                            <div class="input-group">
+                                                                <input formControlName="confirmPassword" type="password"
+                                                                    class="form-control bp-0" id="confirmPassword"
+                                                                    placeholder="{{'profile.placeholder-confirm-password' | translate}}"
+                                                                    [type]="confirmPassword ? 'text' : 'password'">
+                                                                <span (click)="confirmPassword = ! confirmPassword"
+                                                                    class="input-group-text background-icon-input custom-span">
+                                                                    <i
+                                                                        [class]="confirmPassword? 'uil uil-eye-slash custom-icon' : 'uil uil-eye custom-icon'"></i>
+                                                                </span>
+                                                            </div>
+                                                            <div *ngIf="isValidateRs && fp['confirmPassword'].errors"
+                                                                class="invalid-feedback"
+                                                                [ngClass]="{ 'd-block': isValidateRs && fp['confirmPassword'].errors }">
+                                                                <div *ngIf="fp['confirmPassword'].errors['required']"
+                                                                    class="error-notification">
+                                                                    {{'sign-up.error-messages.error-confirm-password.blank'
+                                                                    | translate}}
+                                                                </div>
+                                                                <div *ngIf="fp['confirmPassword'].errors['maxlength']"
+                                                                    class="error-notification">
+                                                                    {{'sign-up.error-messages.error-confirm-password.maximum'
+                                                                    | translate}}
+                                                                </div>
+
+
+                                                                <div
+                                                                    *ngIf="fp['confirmPassword'].errors['confirmedValidator']">
+                                                                    {{'sign-up.error-messages.error-confirm-password.valid'
+                                                                    | translate}}
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="mt-3 action-changeInf">
+                                                        <button type="submit" class="btn btn-success margin-custom">
+                                                            {{'cta.save' | translate}}</button>
+                                                    </div>
+                                                </div>
+                                            </form>
+                                        </ng-template>
+                                    </li>
+                                    <li [ngbNavItem]="4">
+                                        <a ngbNavLink>Thông báo</a>
+                                        <ng-template ngbNavContent>
+                                            <div class="search-table mt-4">
+                                                <div class="row">
+                                                    <div class="col-md-4 col-xs-12">
+                                                        <div class="row">
+                                                            <div class="col-md-4 col-xs-12 m-auto">
+                                                                <label class="">Từ ngày</label>
+                                                            </div>
+                                                            <div class="col-md-8 col-xs-12">
+                                                                <div class="search-date">
+                                                                    <ng2-flatpickr (change)="onGetLstNotification()"
+                                                                        #DateFrom placeholder="Chọn ngày"
+                                                                        [(ngModel)]="lstDataNotification.fromDate"
+                                                                        [config]="basicDateOptions">
+                                                                    </ng2-flatpickr>
+                                                                    <a (click)="onRemoveConditionSearch(1)"
+                                                                        *ngIf="lstDataNotification.fromDate"
+                                                                        type="button" class="icon-calendar">
+                                                                        <i class="bi bi-calendar2-x"></i>
+                                                                    </a>
+                                                                    <a *ngIf="!lstDataNotification.fromDate"
+                                                                        type="button" class="icon-calendar">
+                                                                        <i class="bi bi-calendar2"></i>
+                                                                    </a>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="col-md-4 col-xs-12">
+                                                        <div class="row">
+                                                            <div class="col-md-4 col-xs-12 m-auto">
+                                                                <label class="">đến ngày</label>
+                                                            </div>
+                                                            <div class="col-md-8 col-xs-12">
+                                                                <div class="search-date">
+                                                                    <ng2-flatpickr (change)="onGetLstNotification()"
+                                                                        #DateTo placeholder="Chọn ngày"
+                                                                        [(ngModel)]="lstDataNotification.toDate"
+                                                                        [config]="basicDateOptions">
+                                                                    </ng2-flatpickr>
+                                                                    <a (click)="onRemoveConditionSearch(2)"
+                                                                        *ngIf="lstDataNotification.toDate" type="button"
+                                                                        class="icon-calendar">
+                                                                        <i class="bi bi-calendar2-x"></i>
+                                                                    </a>
+                                                                    <a *ngIf="!lstDataNotification.toDate" type="button"
+                                                                        class="icon-calendar">
+                                                                        <i class="bi bi-calendar2"></i>
+                                                                    </a>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="data-notification-table">
+                                                <table class="table custom-table mt-3">
+                                                    <thead class="custom-thead">
+                                                        <tr>
+                                                            <th scope="col">STT
+                                                            </th>
+                                                            <th scope="col">Tiêu đề</th>
+                                                            <th scope="col">Ngày thông báo</th>
+                                                        </tr>
+                                                    </thead>
+                                                    <tbody>
+                                                        <tr [class]="item.isRead? 'text-readed-table' : ''"
+                                                            *ngFor="let item of lstDataNotification.result; let i = index">
+                                                            <th scope="row">{{(10 * (paingList.page - 1)) + i + 1}}</th>
+                                                            <td>
+                                                                <a (click)="onGetDetailNotifi(item, dialogNotifi)">{{item.title}}</a>
+                                                            </td>
+                                                            <td>{{item.dateCreate | date: 'dd/MM/yyyy HH:mm'}}</td>
+                                                        </tr>
+                                                    </tbody>
+                                                </table>
+                                                <div class="footer-table float-end">
+                                                    <ngb-pagination
+                                                        [collectionSize]="lstDataNotification.totalItemCount"
+                                                        [(page)]="lstDataNotification.pageNumber" [maxSize]="3"
+                                                        [rotate]="true" [pageSize]="lstDataNotification.pageSize"
+                                                        (pageChange)="onPageChangeLstNotifi($event)">
+                                                    </ngb-pagination>
+                                                </div>
+                                            </div>
+                                        </ng-template>
+                                    </li>
+                                </ul>
+                                <div [ngbNavOutlet]="nav"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div id="vne">
+            <app-vneconomy-package></app-vneconomy-package>
+            <section id="vne-anpham" class="container mb-3">
+                <div class="vne-anpham">
+                    <a [href]="month ? '/askonomy' : '/tap-chi-kinh-te-viet-nam/askonomy'"  [target]="{'_blank': month }">
+                        <img src="../../../../assets/templace/vneconomy/images/askonomy-banner.PNG" alt="" class="img-fluid">
+                    </a>
+                </div>
+            </section>
+            <app-vneconomy-news-hot></app-vneconomy-news-hot>
+            <app-vneconomy-comment></app-vneconomy-comment>
+            <app-vneconomy-contact></app-vneconomy-contact>
+        </div>
+    </div>
+</block-ui>
+
+<ng-template #dialogNotifi let-modal>
+    <div class="modal-header">
+        <h4 class="modal-title" id="modal-basic-title">Chi tiết thông báo</h4>
+        <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
+    </div>
+    <div class="modal-body">
+        <div class="mb-3 detail-notification">
+            <div>Tiêu đề: <span>{{dataDetailNoti.title}}</span></div>
+            <div>Nội dung: <span>{{dataDetailNoti.content}}</span></div>
+            <!-- <div>Ngày thông báo: <span>{{dataDetailNoti.dateCreate | Date: 'dd/MM/yyyy hh:ss'}}</span></div> -->
+            <div>Trạng thái xem: <span>{{dataDetailNoti.isRead? 'Đã đọc' : 'Chưa đọc'}}</span></div>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="button" (click)="onReadNotifiById()" class="btn btn-success"
+            *ngIf="!dataDetailNoti.isRead">Đọc</button>
+        <button type="button" class="btn btn-warning" (click)="modal.close('Save click')">Đóng</button>
+    </div>
+</ng-template>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/modules/account/components/account-profile/account-profile.component.scss b/Phaha_Package/src/app/modules/account/components/account-profile/account-profile.component.scss
new file mode 100644
index 0000000..e06c949
--- /dev/null
+++ b/Phaha_Package/src/app/modules/account/components/account-profile/account-profile.component.scss
@@ -0,0 +1,222 @@
+app-account-profile {
+    .search-date {
+        position: relative;
+
+        .flatpickr-wrapper {
+            width: 100%;
+        }
+
+        .icon-calendar {
+            position: absolute;
+            top: 0;
+            right: 10px;
+
+            i {
+                font-size: 18px;
+                color: #212529;
+            }
+        }
+    }
+
+
+    .flatpickr-mobile {
+
+        width: 100%;
+        padding: 5px 10px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+
+    }
+
+    .infomation-profile {
+        background: #fff;
+        margin-bottom: 16px;
+    }
+
+    .image-show {
+        width: 200px;
+        height: 200px;
+        margin: auto;
+
+        img {
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            object-fit: cover;
+            border: 1px solid #ccc;
+            padding: 10px;
+            box-shadow: 0 2px 2px #ccc;
+        }
+    }
+
+    .nav-pills .nav-link.active {
+        background-color: #fcaf17;
+        color: #ffff !important;
+    }
+
+    .nav-link {
+        color: black !important;
+        font-weight: 600;
+        font-size: 14px;
+    }
+
+    .margin-custom {
+        margin-right: 15px !important;
+    }
+
+    .match-height {
+        >[class*='col'] {
+            display: flex;
+            flex-flow: column;
+
+            >.card {
+                flex: 1 1 auto;
+            }
+        }
+    }
+
+    .action-changeInf {
+        position: absolute;
+        bottom: 5%;
+        left: 80%;
+    }
+
+    .custom-thead {
+        background-color: #cccc !important;
+    }
+
+    .custom-table {
+        border: 1px solid #cccc;
+    }
+
+    .hidden {
+        display: none !important;
+    }
+
+    .custom-margin {
+        margin-right: 20px !important;
+    }
+
+    .page-item.active .page-link {
+        background-color: #fcaf17;
+        border: #fcaf17;
+        color: #fff !important;
+        width: 35px;
+        text-align: center;
+        padding-top: 7px !important;
+    }
+
+
+    .page-item {
+        margin: 0 3px !important;
+        border-radius: 50% !important;
+
+        a {
+            border: none !important;
+            color: #222 !important;
+        }
+    }
+
+    .page-item a.page-link {
+        border-radius: 50%;
+    }
+
+    .page-item:last-child .page-link {
+        border-top-right-radius: 50% !important;
+        border-bottom-right-radius: 50% !important;
+    }
+
+    .page-link:focus {
+        box-shadow: none !important;
+    }
+
+    .page-item:first-child .page-link {
+        border-top-left-radius: 50% !important;
+        border-bottom-left-radius: 50% !important;
+    }
+
+    .page-link:hover {
+        width: 30px;
+        text-align: center;
+    }
+
+    .page-link {
+        width: 35px !important;
+        height: 35px !important;
+        text-align: center;
+        padding-top: 7px !important;
+    }
+
+    .text-right {
+        text-align: right;
+
+        span {
+            font-size: 16px;
+        }
+    }
+
+    .custom-icon {
+        font-size: 16px !important;
+    }
+
+    .btn-custom {
+        background-color: #fcaf17 !important;
+        color: #ffff !important;
+    }
+
+    .invalid-feedback {
+        display: block !important;
+    }
+
+    .form-control:focus {
+        color: #212529;
+        background-color: #fff;
+        border-color: #ffa900 !important;
+        outline: 0;
+        box-shadow: none !important;
+    }
+
+    .infomation-profile-detail {
+        a {
+            color: #fcaf17;
+        }
+    }
+
+    .data-notification-table {
+        tbody {
+            td {
+                a {
+                    cursor: pointer;
+                }
+
+                a:hover {
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+
+    .text-readed-table {
+        color: #fcaf17;
+        text-decoration: none;
+    }
+
+    @media only screen and (max-width: 768px) {
+        .action-changeInf {
+            position: inherit !important;
+            bottom: 0;
+            left: 0;
+        }
+    }
+
+    .chk-get-all {
+        padding: 10px 0;
+        display: flex;
+        gap: 10px;
+        font-weight: 600;
+    }
+}
+
+.btn-warning {
+    color: #fff !important;
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/modules/account/components/account-profile/account-profile.component.ts b/Phaha_Package/src/app/modules/account/components/account-profile/account-profile.component.ts
new file mode 100644
index 0000000..0a84de4
--- /dev/null
+++ b/Phaha_Package/src/app/modules/account/components/account-profile/account-profile.component.ts
@@ -0,0 +1,401 @@
+import { ChangeDetectorRef, Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { DataModel, ProfileUser } from '../../models/account-profile.model';
+import { environment } from 'src/environments/environment';
+import { PackageSearch } from 'src/app/modules/packages/models/package-search.model';
+import { FlatpickrOptions } from 'ng2-flatpickr';
+import { AccountProfileService } from '../../services/account-profile.service';
+import { ToastrService } from 'ngx-toastr';
+import { LoginService } from 'src/app/login/login.service';
+import { Title } from '@angular/platform-browser';
+import { TranslateService } from '@ngx-translate/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { HeaderService } from 'src/app/layout/header/header.service';
+import { removeSpaces } from 'src/app/register-user/register-user.component';
+import { PackageBought } from '../../models/account-package-bought.model';
+
+@Component({
+  selector: 'app-account-profile',
+  templateUrl: './account-profile.component.html',
+  styleUrls: ['./account-profile.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class AccountProfileComponent implements OnInit {
+
+  @ViewChild('DateFrom') fromDate: any;
+  @ViewChild('DateTo') toDate: any;
+
+  private i18n: any;
+
+  packageBought: PackageBought = new PackageBought();
+  formProfile: FormGroup;
+  submitProfile: boolean = false;
+
+  inforDetail: ProfileUser = new ProfileUser();
+  showImage: boolean = false;
+  imageDetail: any;
+  fileData: any;
+  resetImage: any;
+  baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  userLogin: any;
+  paingList: PackageSearch = new PackageSearch();
+  totalMoney: number = 0;
+  passwordInput: boolean = false;
+  confirmPassword: boolean = false;
+  passwordNew: boolean = false;
+  formResetValue: FormGroup;
+  isValidateRs: boolean = false;
+  activeTab: number = 1;
+  pageSize: number = 4;
+  page: number = 1;
+  isEnterprise = false;
+  basicDateOptions: FlatpickrOptions = {
+    altInput: true,
+    altFormat: 'd/m/Y',
+    static: true,
+    mode: "single",
+    allowInvalidPreload: true,
+    allowInput: true,
+    wrap: true,
+    maxDate: new Date(),
+    disableMobile: true,
+  };
+  dataDetailNoti: any;
+  lstDataNotification: DataModel = new DataModel();
+  month = false;
+  currentUser: any = {};
+
+  constructor(
+    private _accountProfileService: AccountProfileService,
+    private _formBuilder: FormBuilder,
+    private _changeDetectorRef: ChangeDetectorRef,
+    private _toastr: ToastrService,
+    private _loginService: LoginService,
+    private _title: Title,
+    private _translate: TranslateService,
+    private _activatedRoute: ActivatedRoute,
+    private _router: Router,
+    private _ngbModal: NgbModal,
+    private _headerService: HeaderService
+  ) {
+    this.formProfile = this._formBuilder.group({
+      id: [null],
+      fullName: [null, [Validators.required, Validators.maxLength(250), removeSpaces]],
+      birthDay: [null],
+      phone: [null],
+      email: [null],
+      address: [null, [Validators.maxLength(250), removeSpaces]],
+      image: [null],
+      enterpriseName: [null, [Validators.maxLength(250)]],
+      enterpriseEmail: [null, [Validators.maxLength(250), Validators.pattern('^[A-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$'), removeSpaces]],
+      enterprisePhone: [null, [Validators.maxLength(50), removeSpaces]],
+      enterpriseAddress: [null, [Validators.maxLength(250), removeSpaces]],
+      enterpriseSignDate: [null],
+      enterpriseHeadQuarters: [null],
+      enterpriseTaxCode: [null],
+      enterpriseLegalRepresentative: [null],
+      enterprisePosition: [null],
+      enterpriseAuthorizationLetter: [null],
+    });
+    this.userLogin = JSON.parse(localStorage.getItem('currentCustomer')!);
+    this.formProfile.value.id = this.userLogin.id;
+    this.formResetValue = this._formBuilder.group({
+      passwordOld: ['', [Validators.required, Validators.maxLength(250), Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/)]],
+      passwordNew: ['', [Validators.required, Validators.maxLength(250), Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/)]],
+      confirmPassword: ['', [Validators.required, Validators.maxLength(250),]],
+    },
+      {
+        validator: this.confirmedValidator('passwordNew', 'confirmPassword'),
+      }
+    );
+    this._activatedRoute.queryParams.subscribe((params: any) => {
+      this.activeTab = parseInt(params['tab']);
+    });
+
+    if (!this.activeTab)
+      this.activeTab = 1;
+
+    this.currentUser = JSON.parse(localStorage.getItem("currentCustomer") ?? "{}");
+    if (typeof (this.currentUser) === 'object' && this.currentUser.month) {
+      if (this.currentUser.month && this.currentUser.month > 5)
+        this.month = true;
+    }
+  }
+
+  get f() {
+    return this.formProfile.controls;
+  }
+
+  get fp() {
+    return this.formResetValue.controls;
+  }
+  
+  /**
+   * Lấy thông tin profile
+   */
+  onGetDetailUser() {
+    this._accountProfileService.getDetailUser()
+      .subscribe(res => {
+          this.imageDetail = this.baseUrl + res.image;
+          this.inforDetail = res;
+          this.isEnterprise = res.enterpriseEmail && res.enterpriseEmail.length > 1;
+          if (this.isEnterprise) {
+            this.inforDetail.phone = res.enterprisePhone;
+            this.inforDetail.email = res.enterpriseEmail;
+            this.inforDetail.address = res.enterpriseAddress;
+            this.inforDetail.birthDay = res.enterpriseSignDate;
+          }
+          this.formProfile.patchValue(res);
+          let dataLocal = JSON.parse(localStorage.getItem('currentCustomer') ?? "{}");
+          localStorage.setItem('currentCustomer', JSON.stringify(Object.assign(dataLocal, res)));
+        }
+      );
+  }
+
+  /**
+   * Upload ảnh avatar để preview
+   * @param event 
+   * @returns 
+   */
+  onFileProgress(event: any) {
+    this.showImage = true;
+    const mimeType = event.target.files[0].type;
+    if (event.target.files && event.target.files[0]) {
+      const reader = new FileReader();
+      reader.readAsDataURL(event.target.files[0]);
+      reader.onload = (event) => {
+        this.imageDetail = event.target?.result;
+        this._changeDetectorRef.detectChanges();
+      };
+    }
+    if (mimeType.match(/image\/*/) == null) {
+      this._toastr.error(this.i18n.invalidImgFile, this.i18n.uploadFileFail, {
+        timeOut: 2000
+      });
+      return;
+    }
+    const sizeInBytes: number = event.target.files[0].size;
+    if (sizeInBytes > 5242880) {
+      this._toastr.error(this.i18n.invalidSizeImgFile, this.i18n.uploadFileFail, {
+        timeOut: 2000
+      });
+    }
+    this.fileData = event.target.files[0];
+  }
+
+  /**
+   * Lưu ảnh avatar mới vào server
+   */
+  onSaveImage() {
+    this._accountProfileService.changeAvatar(this.fileData)
+    .subscribe(
+      data => {
+        this._toastr.success(this.i18n.imgChangedSuccess, this.i18n.success, {
+          timeOut: 2000
+        });
+        this.showImage = false;
+        this.onGetDetailUser();
+      }
+    );
+  }
+
+  /**
+   * Xóa file avatar nếu dùng ảnh cũ
+   */
+  onRemoveImage() {
+    if (this.inforDetail.image) {
+      this.imageDetail = this.baseUrl + this.inforDetail.image;
+    } else {
+      this.imageDetail = '';
+    }
+    this.resetImage = '';
+    this.showImage = false;
+  }
+
+  /**
+   * Lấy danh sách các gói đã mua
+   */
+  onGetListPackage() {
+    this._accountProfileService.getPackageBought(this.packageBought)
+      .subscribe(res => {
+        this.packageBought.result = res.data.result;
+        this.packageBought.totalItemCount = res.data.totalItemCount;
+        this.totalMoney = res.totalMoney;
+      });
+  }
+
+  /**
+   * Lấy danh sách các gói đã mua, bao gồm cả các gói đã hết hạn
+   * @param e 
+   */
+  getPackageExpire(e: any) {
+    if (e && e.target.checked) {
+      this.packageBought.isExpire = true;
+    } else {
+      this.packageBought.isExpire = false;
+    }
+
+    this.onGetListPackage();
+  }
+
+  /**
+   * Lưu thông tin profile
+   */
+  onSubmitProfile() {
+    this.submitProfile = true;
+    if (this.formProfile.valid) {
+      this._accountProfileService
+        .changeInfo(Object.assign({}, this.formProfile.value))
+        .subscribe(() => {
+            this._toastr.success(this.i18n.infoChangedSuccess, this.i18n.success, {
+              timeOut: 2000
+            });
+            this.onGetDetailUser();
+          })
+    }
+  }
+
+  /**
+   * Update page package bought
+   * @param numberPage 
+   */
+  changePagePackageBought(numberPage: number) {
+    this.packageBought.page = numberPage;
+    this.onGetListPackage();
+  }
+
+
+  
+
+  
+
+
+  
+
+  onSubmitResetPassword() {
+    this.isValidateRs = true;
+    if (this.formResetValue.valid) {
+      this._accountProfileService.onResetPassword(this.formResetValue.value)
+      .subscribe(
+        data => {
+          this._toastr.success(this.i18n.passwordChangedSuccess, this.i18n.success, {
+            timeOut: 2000,
+          });
+          setTimeout(() => {
+            this._loginService.logOut();
+          }, 1500);
+        }
+      );
+    }
+  };
+
+  confirmedValidator(controlName: string, matchingControlName: string) {
+    return (formGroup: FormGroup) => {
+      const control = formGroup.controls[controlName];
+      const matchingControl = formGroup.controls[matchingControlName];
+      if (matchingControl.errors && !matchingControl.errors['confirmedValidator']) {
+        return;
+      }
+      if (control.value !== matchingControl.value) {
+        matchingControl.setErrors({ confirmedValidator: true });
+      } else {
+        matchingControl.setErrors(null);
+      }
+    };
+  }
+
+  onGetI18n() {
+    this._translate.get('errToastrProfile').subscribe(data => {
+      this.i18n = data;
+    })
+  }
+
+  onChangeTab($event: any) {
+    this.activeTab = $event.nextId;
+    this._router.navigate(
+      ['/profile'],
+      { queryParams: { tab: this.activeTab } }
+    );
+  };
+
+  onRemoveConditionSearch(type: number) {
+    if (type === 1) {
+      this.fromDate.flatpickr.clear();
+      this.lstDataNotification.fromDate = '';
+      this.onGetLstNotification();
+    } else if (type === 2) {
+      this.toDate.flatpickr.clear();
+      this.lstDataNotification.toDate = '';
+      this.onGetLstNotification();
+    };
+  };
+
+  onGetLstNotification() {
+    let fromDateConvert: any = '';
+    let toDateConvert: any = '';
+    if (this.lstDataNotification.fromDate) {
+      fromDateConvert = new Date(this.lstDataNotification.fromDate);
+    };
+    if (this.lstDataNotification.toDate) {
+      toDateConvert = new Date(this.lstDataNotification.toDate);
+    };
+    if (this.lstDataNotification.fromDate && this.lstDataNotification.toDate) {
+      if (fromDateConvert > toDateConvert) {
+        this._toastr.warning('Ngày bắt đầu không được lớn hơn ngày kết thúc!', 'Lỗi');
+        return
+      };
+    };
+    if (this.lstDataNotification['fromDate'] instanceof Array) {
+      this.lstDataNotification['fromDate'] = this.lstDataNotification['fromDate'][0];
+    };
+    if (this.lstDataNotification['toDate'] instanceof Array) {
+      this.lstDataNotification['toDate'] = this.lstDataNotification['toDate'][0];
+    };
+    this._accountProfileService.getLstAllNotification(this.lstDataNotification).subscribe(success => {
+      const fromDate = this.lstDataNotification.fromDate;
+      const toDate = this.lstDataNotification.toDate;
+      this.lstDataNotification = success.data;
+      this.lstDataNotification.fromDate = fromDate;
+      this.lstDataNotification.toDate = toDate;
+    });
+  };
+
+  onPageChangeLstNotifi(numberPage: number) {
+    this.lstDataNotification.pageNumber = numberPage;
+    this.onGetLstNotification();
+  };
+
+  onGetDetailNotifi(item: any, content: any) {
+    if (item.id) {
+      this.onGetDetailNotifiById(item.id, content);
+    }
+  }
+
+  onGetDetailNotifiById(id: number, content: any) {
+    this._accountProfileService.getDetailNotiById(id).subscribe(success => {
+      this.dataDetailNoti = success;
+      this._ngbModal.open(content, { size: 'lg' });
+    });
+  }
+
+  onReadNotifiById() {
+    this._headerService.readedItemNews(this.dataDetailNoti.id).subscribe(success => {
+      this._toastr.success('Đã thay đổi trạng thái đọc của thông báo !', 'Thành công');
+      this._ngbModal.dismissAll();
+      this.onGetLstNotification();
+    })
+  }
+
+  onHadleErros($event: any) {
+    $event.target.src = '../../../assets/image/avatar.jpg';
+  }
+
+  ngOnInit(): void {
+    this.onGetDetailUser();
+    this.onGetListPackage();
+    this.onGetI18n();
+    this.onGetLstNotification();
+    this._title.setTitle('Post ENP - Trang thông tin cá nhân')
+  }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/modules/account/models/account-package-bought.model.ts b/Phaha_Package/src/app/modules/account/models/account-package-bought.model.ts
new file mode 100644
index 0000000..0f9d64f
--- /dev/null
+++ b/Phaha_Package/src/app/modules/account/models/account-package-bought.model.ts
@@ -0,0 +1,7 @@
+export class PackageBought {
+    page: number = 1;
+    pageSize: number = 10;
+    totalItemCount: number = 0;
+    result?: any;
+    isExpire: boolean = false;
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/modules/account/models/account-profile.model.ts b/Phaha_Package/src/app/modules/account/models/account-profile.model.ts
new file mode 100644
index 0000000..22d86a5
--- /dev/null
+++ b/Phaha_Package/src/app/modules/account/models/account-profile.model.ts
@@ -0,0 +1,20 @@
+export class ProfileUser {
+    id?: number;
+    fullName: string = '';
+    birthDay: any;
+    phone: string = '';
+    email: string = '';
+    totalPackageBought: number = 0;
+    image: string = '';
+    address: string = '';
+}
+
+export class DataModel {
+    pageSize: number = 10;
+    pageNumber: number = 1;
+    pageCount: number = 1;
+    totalItemCount: number = 0;
+    result: any[] = [];
+    toDate: any = "";
+    fromDate: any = "";
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/modules/account/services/account-profile.service.ts b/Phaha_Package/src/app/modules/account/services/account-profile.service.ts
new file mode 100644
index 0000000..734806c
--- /dev/null
+++ b/Phaha_Package/src/app/modules/account/services/account-profile.service.ts
@@ -0,0 +1,79 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import moment from 'moment';
+import { PackageSearch } from '../../packages/models/package-search.model';
+import { DataModel } from '../models/account-profile.model';
+import { PackageBought } from '../models/account-package-bought.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AccountProfileService {
+
+  constructor(
+    private _httpClient: HttpClient,
+  ) {
+  }
+
+  getDetailUser() {
+    return this._httpClient.get<any>(`/auth/detail`);
+  }
+
+  changeInfo(model: any) {
+    if (model['birthDay'] instanceof Array) {
+      model['birthDay'] = model['birthDay'][0];
+    }
+    model.birthDay = moment(`${model.birthDay}`).format('DD/MM/yyyy');
+
+    if (model['enterpriseSignDate'] instanceof Array) {
+      model['enterpriseSignDate'] = model['enterpriseSignDate'][0];
+    }
+    model.enterpriseSignDate = moment(`${model.enterpriseSignDate}`).format('DD/MM/yyyy');
+
+    return this._httpClient.post<any>(`/auth/add-or-edit`, model);
+  }
+
+  changeAvatar(fileData: any) {
+    const formData: FormData = new FormData();
+    if (fileData) {
+      formData.append('fileData', fileData);
+    }
+    return this._httpClient.post<any>(`/auth/postfile`, formData);
+  }
+
+  getPackageBought(model: PackageBought) {
+    let params = new HttpParams();
+    params = params.append('page', model.page);
+    params = params.append('pageSize', model.pageSize);
+    params = params.append('isExpire', `${model.isExpire}`);
+    return this._httpClient.get<any>(`/package/history-register`, { params });
+  }
+
+  onResetPassword(model: any) {
+    return this._httpClient.put<any>(`/auth/changepassword`, model);
+  }
+
+  getLstAllNotification(pageModel: DataModel) {
+    let params = new HttpParams();
+    params = params.append('pageSize', pageModel.pageSize);
+    params = params.append('pageNumber', pageModel.pageNumber);
+    if (pageModel.fromDate) {
+      if (pageModel['fromDate'] instanceof Array) {
+        pageModel['fromDate'] = pageModel['fromDate'][0]
+      };
+      params = params.append('fromDate', moment(pageModel['fromDate']).format('DD/MM/yyyy'));
+    };
+    if (pageModel.toDate) {
+      if (pageModel['toDate'] instanceof Array) {
+        pageModel['toDate'] = pageModel['toDate'][0]
+      };
+      params = params.append('toDate', moment(pageModel['toDate']).format('DD/MM/yyyy'));
+    };
+    return this._httpClient.get<any>(`/notification/list-all`, { params });
+  }
+
+  getDetailNotiById(id: number) {
+    return this._httpClient.get<any>(`/notification/detail/` + id);
+  }
+
+}
diff --git a/Phaha_Package/src/app/modules/editorial/components/editorial-detail/editorial-detail.component.html b/Phaha_Package/src/app/modules/editorial/components/editorial-detail/editorial-detail.component.html
new file mode 100644
index 0000000..981a1b0
--- /dev/null
+++ b/Phaha_Package/src/app/modules/editorial/components/editorial-detail/editorial-detail.component.html
@@ -0,0 +1,109 @@
+<div class="container pt-4 pb-4">
+    <nav aria-label="breadcrumb">
+      <ol class="breadcrumb">
+        <li class="breadcrumb-item"><a routerLink="/">{{'breadcrumb.home' | translate}}</a></li>
+        <li class="breadcrumb-item active" aria-current="page">
+          {{editorialOffice.name}}
+        </li>
+      </ol>
+    </nav>
+    <div class="detail-editorial-office">
+      <div class="img-banner" *ngIf="editorialOffice.imageBanner">
+        <img [src]="baseUrl + editorialOffice.imageBanner">
+      </div>
+      <div class="main-content box-body">
+        <div class="row">
+          <div class="col-md-2 col-sm-4 col-xs-12">
+            <div class="img-avatar">
+              <img [src]="baseUrl + editorialOffice.image">
+            </div>
+          </div>
+          <div class="col-md-4 col-sm-8 col-xs-12">
+            <div class="main-description">
+              <h4>{{editorialOffice.name}}</h4>
+              <div>
+                <span class="fw-bold">
+                  {{'office-detail.host-unit' | translate}} : </span>
+                <span>{{editorialOffice.ownerAgency}}</span>
+              </div>
+              <div class="mt-2">
+                <span class="fw-bold">
+                  {{'office-detail.domain' | translate}} : </span>
+                <span>{{editorialOffice.domain}}</span>
+              </div>
+              <div class="mt-2">
+                <span class="fw-bold">
+                  {{'office-detail.phone' | translate}} : </span>
+                <span>{{editorialOffice.phone}}</span>
+              </div>
+              <div class="mt-2">
+                <span class="fw-bold">
+                  {{'office-detail.email' | translate}} : </span>
+                <span>{{editorialOffice.email}}</span>
+              </div>
+              <div class="mt-2">
+                <span class="fw-bold">
+                  {{'office-detail.address' | translate}} : </span>
+                <span>{{editorialOffice.address}}</span>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-6 col-sm-12">
+            <div class="row">
+              <div class="col-md-8 col-12 mb-2">
+                <div class="video-trailer" *ngIf="editorialOffice.pathVideo1" [innerHTML]="pathVideo1"></div>
+              </div>
+              <div class="col-md-4 col-12">
+                <div class="video-trailer" *ngIf="editorialOffice.pathVideo2" [innerHTML]="pathVideo2"></div>
+                <div class="video-trailer mt-2" *ngIf="editorialOffice.pathVideo3" [innerHTML]="pathVideo3"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <app-my-package *ngIf="isLogin" (onActiveNavs)="onActiveNavs($event)" [isHome]="true"></app-my-package>
+      <div class="our-package box-body">
+        <nav>
+          <div class="nav nav-tabs tab-action" role="tablist">
+            <button class="nav-link active" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button"
+              role="tab" aria-controls="nav-profile">
+              {{'office-detail.intro' | translate}}
+            </button>
+            <button class="nav-link" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home"
+              type="button" role="tab" aria-controls="nav-home">
+              {{'office-detail.package-list' | translate}}
+            </button>
+            <button class="nav-link" id="nav-newpaper-tab" data-bs-toggle="tab" data-bs-target="#nav-newpaper"
+              type="button" role="tab" aria-controls="nav-home">
+              {{'office-detail.NEWPAPER_LIST' | translate}}
+            </button>
+          </div>
+        </nav>
+        <div class="tab-content" id="nav-tabContent">
+          <div class="tab-pane fade show active" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
+            <div class="p-4 information-editorial-office ql-editor" [innerHTML]="editorialOffice.introduce"></div>
+          </div>
+          <div class="tab-pane fade" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
+            <div>
+              <div class="row">
+                <ng-container *ngFor="let itemPackage of package">
+                  <div class="col-md-3 col-xs-12 mt-4">
+                    <app-askonomy-hot *ngIf="this.editorialOffice.id == 27 && itemPackage.isAskonomy" [item]="itemPackage"></app-askonomy-hot>
+                    <app-package-item *ngIf="!itemPackage.isAskonomy" [item]="itemPackage"></app-package-item>
+                  </div>
+                </ng-container>
+              </div>
+              <div class="justify-content-end pagination mt-4">
+                <ngb-pagination [collectionSize]="pagePackage.totalRecords" [(page)]="pagePackage.pageNumber"
+                  [maxSize]="3" [rotate]="true" [pageSize]="pagePackage.pageSize" (pageChange)="onPageChange($event)">
+                </ngb-pagination>
+              </div>
+            </div>
+          </div>
+          <div class="tab-pane fade" id="nav-newpaper" role="tabpanel" aria-labelledby="nav-home-tab">
+            <app-newspaper-list *ngIf="this.editorialOffice && this.editorialOffice.id" [id]="this.editorialOffice.id"></app-newspaper-list>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/modules/editorial/components/editorial-detail/editorial-detail.component.scss b/Phaha_Package/src/app/modules/editorial/components/editorial-detail/editorial-detail.component.scss
new file mode 100644
index 0000000..a7d0f0d
--- /dev/null
+++ b/Phaha_Package/src/app/modules/editorial/components/editorial-detail/editorial-detail.component.scss
@@ -0,0 +1,250 @@
+@import "~quill/dist/quill.core.css";
+@import "~quill/dist/quill.bubble.css";
+@import "~quill/dist/quill.snow.css";
+@import "~swiper/css";
+@import "~swiper/css/pagination";
+@import "~swiper/css/navigation";
+
+
+.tab-action {
+    button {
+        font-weight: bold;
+        text-transform: uppercase;
+        color: #222;
+
+        &.active {
+            color: #fff !important;
+            background-color: #fcaf17 !important;
+            border-color: #fcaf17 !important;
+        }
+    }
+}
+
+.breadcrumb {
+    .breadcrumb-item a {
+        text-decoration: none;
+        color: #222;
+        font-weight: 600;
+    }
+}
+
+.detail-editorial-office {
+    .img-banner {
+        img {
+            width: 100%;
+        }
+
+        margin-bottom: 16px;
+    }
+
+    .img-avatar {
+        padding: 20px;
+        border-radius: 50%;
+        box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.1);
+        width: 160px;
+        height: 160px;
+        position: relative;
+        margin: auto;
+
+        img {
+            width: 100%;
+            position: absolute;
+            padding: 0 12px;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+    }
+
+    .main-description {
+        span {
+            font-size: 16px;
+        }
+    }
+
+    .nav-tabs .nav-link {
+        margin-bottom: -1px;
+        background: none;
+        border: none;
+        border-bottom: 1px solid transparent;
+    }
+
+    .nav-link {
+        color: #171725;
+        font-size: 16px;
+    }
+
+    .nav-tabs .nav-link.active,
+    .nav-tabs .nav-item.show .nav-link {
+        color: #B27A03;
+        border: 0;
+        border-bottom: 4px solid #FCB71E;
+    }
+
+    .nav-tabs .nav-link:hover,
+    .nav-tabs .nav-link:focus {
+        color: #B27A03;
+        border: 0;
+        border-bottom: 4px solid #FCB71E;
+        isolation: unset;
+    }
+
+    .swiper {
+        width: 100%;
+        height: 100%;
+    }
+
+    .swiper-slide {
+        text-align: center;
+        font-size: 18px;
+        background: #fff;
+
+        /* Center slide text vertically */
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: -webkit-flex;
+        display: flex;
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
+        -webkit-justify-content: center;
+        justify-content: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        -webkit-align-items: center;
+        align-items: center;
+    }
+
+    .swiper-slide img {
+        display: block;
+        height: 100%;
+    }
+
+    .package-swiper {
+        swiper {
+            padding: 0 30px;
+        }
+
+        .swiper-button-prev {
+            left: 0px;
+            background-position: center;
+            background-color: #ABB5BE;
+            ;
+        }
+
+        .swiper-button-next:after,
+        .swiper-button-prev:after {
+            font-family: swiper-icons;
+            font-size: 24px;
+            text-transform: none !important;
+            letter-spacing: 0;
+            font-variant: initial;
+            line-height: 1;
+            color: #ffffff;
+        }
+
+        .swiper-button-next {
+            right: 0px;
+            background-position: center;
+            background-color: #ABB5BE;
+            ;
+        }
+
+        .swiper-button-next.swiper-button-disabled,
+        .swiper-button-prev.swiper-button-disabled {
+            opacity: .35;
+            cursor: auto;
+            pointer-events: none;
+        }
+
+        .swiper-button-next:hover,
+        .swiper-button-prev:hover {
+            background: #FCAF17;
+        }
+    }
+
+    .information-editorial-office {
+        text-align: justify;
+        font-size: 16px;
+        line-height: 24px;
+
+        img {
+            max-width: 100% !important;
+        }
+    }
+
+    .page-item.active .page-link {
+        background-color: #fcaf17;
+        border: #fcaf17;
+        color: #fff !important;
+        width: 35px;
+        text-align: center;
+        padding-top: 7px !important;
+    }
+
+    .notifi-notpackage {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        background: #fcaf17;
+        padding: 2px 10px;
+        border-top-left-radius: 5px;
+        color: #fff;
+    }
+
+    .page-item {
+        margin: 0 3px !important;
+        border-radius: 50% !important;
+
+        a {
+            border: none !important;
+            color: #222 !important;
+        }
+    }
+
+    .page-item a.page-link {
+        border-radius: 50%;
+    }
+
+    .page-item:last-child .page-link {
+        border-top-right-radius: 50% !important;
+        border-bottom-right-radius: 50% !important;
+    }
+
+    .page-link:focus {
+        box-shadow: none !important;
+    }
+
+    .page-item:first-child .page-link {
+        border-top-left-radius: 50% !important;
+        border-bottom-left-radius: 50% !important;
+    }
+
+    .page-link:hover {
+        width: 35px;
+        height: 35px;
+        text-align: center;
+    }
+
+    .page-link {
+        width: 35px !important;
+        line-height: 25px !important;
+        text-align: center;
+        padding-top: 7px !important;
+    }
+
+    .video-trailer {
+        position: relative;
+        padding-bottom: 56.25%;
+        /* 16:9 */
+        height: 0;
+    }
+
+    .video-trailer iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border: 1px solid #ddd;
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/modules/editorial/components/editorial-detail/editorial-detail.component.ts b/Phaha_Package/src/app/modules/editorial/components/editorial-detail/editorial-detail.component.ts
new file mode 100644
index 0000000..dceb0d3
--- /dev/null
+++ b/Phaha_Package/src/app/modules/editorial/components/editorial-detail/editorial-detail.component.ts
@@ -0,0 +1,160 @@
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { DomSanitizer, Meta, SafeHtml, Title } from '@angular/platform-browser';
+import { PageModel } from 'src/app/Models/model';
+import { environment } from 'src/environments/environment';
+import { EditorialService } from '../../services/editorial.service';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-editorial-detail',
+  templateUrl: './editorial-detail.component.html',
+  styleUrls: ['./editorial-detail.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+
+export class EditorialDetailComponent implements OnInit {
+  @Input() idShowConnect: number = 0;
+  @Input() idTab: number = 1;
+  showHomeTab: boolean = false;
+  idTabChild: number = 1;
+
+  public editorialOffice = {
+    id: null,
+    name: '',
+    imageBanner: '',
+    image: '',
+    ownerAgency: '',
+    domain: '',
+    phone: '',
+    email: '',
+    address: '',
+    introduce: '',
+    pathVideo1: '',
+    pathVideo2: '',
+    pathVideo3: ''
+  };
+  pathVideo1: SafeHtml = ''
+  pathVideo2: SafeHtml = ''
+  pathVideo3: SafeHtml = ''
+  baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  package: any;
+  pagePackage: PageModel = new PageModel();
+  slug: string = '';
+  isLogin = false;
+  active: any;
+
+  constructor(
+    private readonly _editorialService: EditorialService,
+    private readonly _activatedRoute: ActivatedRoute,
+    private readonly _title: Title,
+    private readonly _meta: Meta,
+    private readonly _sanitizer: DomSanitizer,
+  ) {
+    this._activatedRoute.params.subscribe(params => {
+      this.slug = params['slug'];
+    });
+    this.pagePackage.pageSize = 8;
+
+    const currUser = localStorage.getItem("currentCustomer");
+    if (currUser && currUser.length > 1) {
+      this.isLogin = true;
+    }
+  }
+
+  onActiveNavs(item: any) {
+    if (typeof item === 'object') {
+      this.active = item.nextId;
+    }
+    if (typeof item === 'number') {
+      this.active = item;
+    }
+    if (item.idTabChild) {
+      this.idTabChild = item.idTabChild;
+    }
+    this.idShowConnect = item.idTabChild;
+    if (this.active === 2) {
+      this.showHomeTab = true;
+      setTimeout(() => {
+        window.scrollTo(0, 1500);
+      }, 500);
+    } else {
+      this.showHomeTab = false;
+    }
+  }
+
+  onGetDetailPackage() {
+    if (!isNaN(Number(this.slug))) {
+      this._editorialService.getDetailEditorialOffice(Number(this.slug))
+        .subscribe(data => {
+          this.editorialOffice = data.data;
+          const office = localStorage.getItem("office")
+          if (!office)
+            localStorage.setItem("office", data.data.id);
+          this.pathVideo1 = this._sanitizer.bypassSecurityTrustHtml(this.editorialOffice.pathVideo1);
+          this.pathVideo2 = this._sanitizer.bypassSecurityTrustHtml(this.editorialOffice.pathVideo2);
+          this.pathVideo3 = this._sanitizer.bypassSecurityTrustHtml(this.editorialOffice.pathVideo3);
+          //SEO:
+          this._title.setTitle(data.data.name);
+          this.getPackageOfEditorial(data.data.id);
+
+          this._meta.addTags([
+            { property: 'og:image', content: data.data.image },
+            { property: 'og:image:secure_url', content: data.data.image },
+            { property: 'og:image:width', content: '1055' },
+            { property: 'og:image:height', content: '559' },
+            { property: 'og:image:type', content: 'image/png' },
+            { property: 'twitter:card', content: 'summary_large_image' },
+            { property: 'twitter:title', content: data.data.name },
+            { property: 'twitter:description', content: 'Post ENP là nơi khám phá những tin tức, thông tin uy tín.' },
+            { property: 'twitter:image', content: data.data.image },
+          ])
+        });
+    } else {
+      this._editorialService.getDetailEditorialOfficeBySlug(this.slug)
+        .subscribe(data => {
+          this.editorialOffice = data.data;
+          const office = localStorage.getItem("office")
+          if (!office)
+            localStorage.setItem("office", data.data.id);
+          this.pathVideo1 = this._sanitizer.bypassSecurityTrustHtml(this.editorialOffice.pathVideo1);
+          this.pathVideo2 = this._sanitizer.bypassSecurityTrustHtml(this.editorialOffice.pathVideo2);
+          this.pathVideo3 = this._sanitizer.bypassSecurityTrustHtml(this.editorialOffice.pathVideo3);
+          //SEO:
+          this._title.setTitle(data.data.name);
+          this.getPackageOfEditorial(data.data.id);
+
+          this._meta.addTags([
+            { property: 'og:image', content: data.data.image },
+            { property: 'og:image:secure_url', content: data.data.image },
+            { property: 'og:image:width', content: '1055' },
+            { property: 'og:image:height', content: '559' },
+            { property: 'og:image:type', content: 'image/png' },
+            { property: 'twitter:card', content: 'summary_large_image' },
+            { property: 'twitter:title', content: data.data.name },
+            { property: 'twitter:description', content: 'Post ENP là nơi khám phá những tin tức, thông tin uy tín.' },
+            { property: 'twitter:image', content: data.data.image },
+          ])
+        });
+    }
+
+  }
+
+  getPackageOfEditorial(id: any) {
+    this._editorialService.getPackageOfEditorial(this.pagePackage, id)
+      .subscribe(data => {
+        this.pagePackage = data.data;
+        this.package = data.data.result;
+        this.pagePackage.totalRecords = data.data.totalItemCount;
+      });
+  }
+
+  onPageChange(numberPage: number): void {
+    this.pagePackage.pageNumber = numberPage;
+    this.getPackageOfEditorial(this.editorialOffice.id);
+    window.scroll({ top: 0, behavior: 'smooth' })
+  }
+
+  ngOnInit(): void {
+    this.onGetDetailPackage();
+  }
+}
diff --git a/Phaha_Package/src/app/modules/editorial/components/editorial-list/editorial-list.component.html b/Phaha_Package/src/app/modules/editorial/components/editorial-list/editorial-list.component.html
new file mode 100644
index 0000000..37bed12
--- /dev/null
+++ b/Phaha_Package/src/app/modules/editorial/components/editorial-list/editorial-list.component.html
@@ -0,0 +1 @@
+<p>editorial-list works!</p>
diff --git a/Phaha_Package/src/app/modules/editorial/components/editorial-list/editorial-list.component.scss b/Phaha_Package/src/app/modules/editorial/components/editorial-list/editorial-list.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/Phaha_Package/src/app/modules/editorial/components/editorial-list/editorial-list.component.ts b/Phaha_Package/src/app/modules/editorial/components/editorial-list/editorial-list.component.ts
new file mode 100644
index 0000000..dd06179
--- /dev/null
+++ b/Phaha_Package/src/app/modules/editorial/components/editorial-list/editorial-list.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-editorial-list',
+  templateUrl: './editorial-list.component.html',
+  styleUrls: ['./editorial-list.component.scss']
+})
+export class EditorialListComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/modules/editorial/editorial.component.html b/Phaha_Package/src/app/modules/editorial/editorial.component.html
new file mode 100644
index 0000000..e4cf6dd
--- /dev/null
+++ b/Phaha_Package/src/app/modules/editorial/editorial.component.html
@@ -0,0 +1 @@
+<p>editorial works!</p>
diff --git a/Phaha_Package/src/app/modules/editorial/editorial.component.scss b/Phaha_Package/src/app/modules/editorial/editorial.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/Phaha_Package/src/app/modules/editorial/editorial.component.ts b/Phaha_Package/src/app/modules/editorial/editorial.component.ts
new file mode 100644
index 0000000..a9c880c
--- /dev/null
+++ b/Phaha_Package/src/app/modules/editorial/editorial.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-editorial',
+  templateUrl: './editorial.component.html',
+  styleUrls: ['./editorial.component.scss']
+})
+export class EditorialComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/modules/editorial/editorial.module.ts b/Phaha_Package/src/app/modules/editorial/editorial.module.ts
new file mode 100644
index 0000000..3e48022
--- /dev/null
+++ b/Phaha_Package/src/app/modules/editorial/editorial.module.ts
@@ -0,0 +1,53 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { EditorialDetailComponent } from './components/editorial-detail/editorial-detail.component';
+import { EditorialListComponent } from './components/editorial-list/editorial-list.component';
+import { EditorialComponent } from './editorial.component';
+import { SwiperModule } from 'swiper/angular';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgbModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { BlockUIModule } from 'ng-block-ui';
+import { QuillModule } from 'ngx-quill';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { HttpClient } from '@angular/common/http';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { PackageModule } from 'src/app/package/package.module';
+import { PackageAskonomyModule } from 'src/app/package/package-askonomy/package-askonomy.module';
+import { MyPackageModule } from 'src/app/my-package/my-package.module';
+import { NewspaperModule } from '../newspaper/newspaper.module';
+import { PackagesModule } from '../packages/packages.module';
+
+@NgModule({
+  declarations: [
+    EditorialComponent,
+    EditorialDetailComponent,
+    EditorialListComponent
+  ],
+  imports: [
+    CommonModule,
+    SwiperModule,
+    BrowserModule,
+    NgbModule,
+    NgbNavModule,
+    ReactiveFormsModule,
+    RouterModule,
+    BlockUIModule.forRoot(),
+    FormsModule,
+    QuillModule.forRoot(),
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    }),
+    PackageModule,
+    PackagesModule,
+    PackageAskonomyModule,
+    MyPackageModule,
+    NewspaperModule
+  ]
+})
+export class EditorialModule { }
diff --git a/Phaha_Package/src/app/modules/editorial/services/editorial.service.ts b/Phaha_Package/src/app/modules/editorial/services/editorial.service.ts
new file mode 100644
index 0000000..ac125ce
--- /dev/null
+++ b/Phaha_Package/src/app/modules/editorial/services/editorial.service.ts
@@ -0,0 +1,34 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EditorialService {
+
+  constructor(
+    private _httpClient: HttpClient,
+  ) {
+  }
+
+  getDetailEditorialOffice(id: number) {
+    return this._httpClient.get<any>(`/editorial-office/detail/${id}`);
+  }
+
+  getDetailEditorialOfficeBySlug(slug: string) {
+    let params = new HttpParams();
+    params = params.set('slug', `${slug}`);
+    return this._httpClient.get<any>(`/editorial-office/detail`, { params });
+  }
+
+  getPackageOfEditorial(page: any, id: number) {
+    let params = new HttpParams();
+    if (page.pageNumber) {
+      params = params.append('page', `${page.pageNumber}`);
+    }
+    if (page.pageSize) {
+      params = params.append('pageSize', `${page.pageSize}`);
+    }
+    return this._httpClient.get<any>(`/package/in-editorial/${id}`, { params });
+  }
+}
diff --git a/Phaha_Package/src/app/modules/newspaper/components/newspaper-detail/newspaper-detail.component.html b/Phaha_Package/src/app/modules/newspaper/components/newspaper-detail/newspaper-detail.component.html
new file mode 100644
index 0000000..725bba0
--- /dev/null
+++ b/Phaha_Package/src/app/modules/newspaper/components/newspaper-detail/newspaper-detail.component.html
@@ -0,0 +1,64 @@
+<div class="container-fluid">
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="/">Trang chủ</a></li>
+            <li class="breadcrumb-item"><a href="/an-pham">Ấn phẩm</a></li>
+            <li class="breadcrumb-item active" aria-current="page">{{detail.title}}</li>
+        </ol>
+    </nav>
+
+    <div class="card" style="background: white !important;">
+        <div class="card-body">
+            <div class="row package-news-detail">
+                <div class="col-lg-3 col-md-3 col-sm-6 col-12 mb-3">
+                    <div class="package-news-detail__image">
+                        <img [src]="apiUrl + detail.image" class="img-response">
+                    </div>
+                </div>
+                <div class="col-lg-3 col-md-3 col-sm-6 col-12 mb-3">
+                    <div class="package-news-detail__info">
+                        <h3 class="package-news-detail__title mb-3">
+                            <span>{{detail.title}}</span>
+                        </h3>
+                        <p><i class="uil uil-calendar-alt"></i> {{detail.strDateCreate}}</p>
+                        <p class="link-editor">
+                            <i class="uil uil-user-square"></i> 
+                            <a href="/{{detail.editorialOffice?.slug}}">
+                                {{detail.editorialOffice?.name}}
+                            </a>
+                        </p>
+                        <p *ngIf="!detail.isBuy"><i class="uil uil-eye"></i> <a (click)="getViewTrialPdf(detail)">{{'cta.preview' | translate}}</a></p>
+                        <a *ngIf="!detail.isBuy" href="package-pay/{{newId}}/2" class="btn btn-primary btn-register-now"
+                            type="button">
+                            <i class="uil uil-shopping-cart"></i> {{'cta.register' | translate}}</a>
+                        <a *ngIf="detail.isBuy" href="view/{{newId}}" class="btn btn-primary btn-register-now"
+                            type="button">
+                            <i class="uil uil-eye"></i> {{'cta.read' | translate}}</a>
+                    </div>
+                </div>
+                <div class="col-lg-3 col-md-3 col-sm-6 col-12 mb-3" *ngIf="!detail.isBuy">
+                    <div class="lst-package">
+                        <header class="header-register-more">Đăng ký để đọc</header>
+                        <ng-container *ngFor="let item of packages">
+                            <a href="/package-pay/{{item.id}}" class="btn btn-primary" type="button">
+                                <i class="uil uil-shopping-cart"></i> {{item.name}}</a>
+                        </ng-container>
+                    </div>
+                </div>
+                <div class="col-lg-3 col-md-3 col-sm-6 col-12 mb-3" *ngIf="!detail.isBuy">
+                    <div class="ql-container ql-snow" style="border-width: 0;">
+                        <div class="ql-editor" [innerHTML]="detail.description"></div>
+                    </div>
+                </div>
+                <div class="col-lg-6 col-md-6 col-sm-12 col-12 mb-3" *ngIf="detail.isBuy">
+                    <div class="ql-container ql-snow" style="border-width: 0;">
+                        <div class="ql-editor" [innerHTML]="detail.description"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <app-package-news-of-offices *ngIf="detail.editorialOffice" [newId]="newId" [editorialOffice]="detail.editorialOffice">
+    </app-package-news-of-offices>
+    <app-newspaper-related *ngIf="newId && newId > 0" [id]="newId"></app-newspaper-related>
+</div>
diff --git a/Phaha_Package/src/app/modules/newspaper/components/newspaper-detail/newspaper-detail.component.scss b/Phaha_Package/src/app/modules/newspaper/components/newspaper-detail/newspaper-detail.component.scss
new file mode 100644
index 0000000..2342f70
--- /dev/null
+++ b/Phaha_Package/src/app/modules/newspaper/components/newspaper-detail/newspaper-detail.component.scss
@@ -0,0 +1,117 @@
+.package-news-detail {
+    padding-top: 20px;
+    padding-bottom: 20px;
+
+    .package-news-detail__image {
+        text-align: center;
+
+        img {
+
+            box-shadow: 0px 0 10px #000;
+            width: 350px;
+            max-width: 100%;
+            border-radius: 5px;
+
+        }
+    }
+
+    .package-news-detail__info {
+        .package-news-detail__title {
+            span {
+                border-bottom: 1px solid #ccc;
+                padding: 5px 0;
+                font-size: 20px;
+                font-weight: bold;
+                display: inline-block;
+            }
+        }
+
+        p {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+
+            &>i {
+                width: 40px;
+                height: 40px;
+                border-radius: 50%;
+                border: 1px solid #e09500;
+                text-align: center;
+                line-height: 38px;
+                font-size: 18px;
+                color: #e09500;
+            }
+        }
+
+        .btn-register-now {
+            background: #fcaf17;
+            border: none;
+            padding: 2px 40px;
+            font-weight: 600;
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            font-size: 20px;
+            justify-content: center;
+
+            i {
+                font-size: 30px;
+            }
+        }
+    }
+
+    .lst-package {
+
+        display: flex;
+        flex-direction: column;
+        height: 89%;
+        justify-content: center;
+        text-align: center;
+
+        .header-register-more {
+            font-size: 26px;
+            padding: 6px 0;
+            margin-bottom: 20px;
+            border-bottom: 1px solid #ccc;
+        }
+
+        a[type="button"] {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 10px;
+            font-size: 18px;
+            background: #fcaf17;
+            border: none;
+            border-radius: 50px;
+            margin-bottom: 16px;
+            padding: 8px 0;
+
+            i {
+                font-size: 24px;
+            }
+        }
+    }
+
+    .link-editor a {
+        text-decoration: none;
+        color: #fcaf17;
+        font-weight: bold;
+    }
+}
+
+.breadcrumb {
+    padding: 10px;
+    padding-left: 20px;
+
+    li {
+        font-size: 16px;
+    }
+
+    a {
+        font-size: 16px;
+        text-decoration: none;
+        color: #fcaf17;
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/modules/newspaper/components/newspaper-detail/newspaper-detail.component.ts b/Phaha_Package/src/app/modules/newspaper/components/newspaper-detail/newspaper-detail.component.ts
new file mode 100644
index 0000000..7d0c397
--- /dev/null
+++ b/Phaha_Package/src/app/modules/newspaper/components/newspaper-detail/newspaper-detail.component.ts
@@ -0,0 +1,77 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { AuthenticationService } from 'src/app/auth/service/authentication.service';
+import { LoginComponent } from 'src/app/login/login.component';
+import { PackageNewsDetailService } from 'src/app/template-2/package-news/package-news-detail/package-news-detail.service';
+import { environment } from 'src/environments/environment';
+
+@Component({
+  selector: 'app-newspaper-detail',
+  templateUrl: './newspaper-detail.component.html',
+  styleUrls: ['./newspaper-detail.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class NewspaperDetailComponent implements OnInit {
+
+  newId = null;
+  detail: any = {};
+  packages: any = [];
+  apiUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  isLogin: boolean = false;
+  currentUser: any = {};
+  fileName: any;
+
+  constructor(
+    private readonly _activatedRoute: ActivatedRoute,
+    private readonly _packageNewsDetailService: PackageNewsDetailService,
+    private readonly _authenticationService: AuthenticationService,
+    private readonly _router: Router,
+    private readonly _modalService: NgbModal,
+  ) {
+    this._activatedRoute.params.subscribe(params => {
+      this.newId = params['id'];
+    });
+    this.currentUser = this._authenticationService.currentUserValue;
+    if (this.currentUser && this.currentUser.jwtToken) this.isLogin = true;
+  }
+
+  getDetail() {
+    this._packageNewsDetailService.getPackageNewsDetail(this.newId)
+      .subscribe(res => {
+        this.detail = res.data;
+      });
+  }
+
+  getPackagesOfNew() {
+    this._packageNewsDetailService.getPackagesOfNew(this.newId)
+      .subscribe(res => {
+        this.packages = res.data;
+      })
+  }
+
+  getViewTrialPdf(e: any) {
+    if (this.isLogin) {
+      if (e.path && e.path.length > 0) {
+        this.fileName = e.path[0].path.replace(/^.*[\\\/]/, '');
+        this.fileName = this.fileName.replace('.pdf', '')
+        this._router.navigate(['view-trial', e.id], {
+          queryParams: {
+            id: e.path[0].id,
+            fileName: this.fileName
+          }
+        })
+      } else {
+        this._router.navigate(['view-trial', e.id])
+      }
+    } else {
+      this._modalService.open(LoginComponent, { size: "md", centered: true });
+    }
+  }
+
+  ngOnInit(): void {
+    this.getDetail();
+    this.getPackagesOfNew();
+  }
+
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/modules/newspaper/components/newspaper-item/newspaper-item.component.html b/Phaha_Package/src/app/modules/newspaper/components/newspaper-item/newspaper-item.component.html
new file mode 100644
index 0000000..9136424
--- /dev/null
+++ b/Phaha_Package/src/app/modules/newspaper/components/newspaper-item/newspaper-item.component.html
@@ -0,0 +1,16 @@
+<div class="newpaper-item" *ngIf="item">
+    <a [href]="item.isBuy ? '/view/' + item.id : '/chi-tiet/' + item.id">
+        <img [src]="apiUrl + item.image" alt="" class="img-fluid mw-100" (error)="errorHandler($event)">
+        <p class="title">{{item.title}}</p>
+    </a>
+    <p class="subtitle">
+        <a href="/{{item.editorial?.slug}}">
+            {{item.editorial?.name}}
+        </a>
+    </p>
+    <div class="group-button">
+        <a *ngIf="!item.isBuy" href="/chi-tiet/{{item.id}}" class="button chitiet">{{'cta.detail' | translate}}</a>
+        <a *ngIf="!item.isBuy" type="button" href="package-pay/{{item.id}}/2" class="button thanhtoan">{{'cta.register' | translate}}</a>
+        <a *ngIf="item.isBuy" routerLink="/view/{{item.id}}" class="button thanhtoan">{{'cta.read' | translate}}</a>
+    </div>
+</div>
diff --git a/Phaha_Package/src/app/modules/newspaper/components/newspaper-item/newspaper-item.component.scss b/Phaha_Package/src/app/modules/newspaper/components/newspaper-item/newspaper-item.component.scss
new file mode 100644
index 0000000..dbcfacb
--- /dev/null
+++ b/Phaha_Package/src/app/modules/newspaper/components/newspaper-item/newspaper-item.component.scss
@@ -0,0 +1,47 @@
+.newpaper-item {
+    padding: 10px;
+    box-shadow: 0px 0px 10px #ccc;
+    border-radius: 10px;
+    text-align: center;
+    background: #fff;
+
+    a {
+
+        text-decoration: none;
+        color: #222;
+
+        .title {
+            font-weight: 600;
+            font-size: 14px;
+        }
+    }
+
+    .subtitle {
+        text-transform: uppercase;
+        font-weight: bold;
+
+        a {
+            color: #fcaf17;
+        }
+    }
+
+    .group-button {
+        display: flex;
+        justify-content: space-evenly;
+
+        a {
+            padding: 5px 12px;
+            border-radius: 20px;
+            font-weight: 600;
+
+            &.chitiet {
+                background: #ffe7b8;
+            }
+
+            &.thanhtoan {
+                background: #fcaf17;
+                color: #fff;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/modules/newspaper/components/newspaper-item/newspaper-item.component.ts b/Phaha_Package/src/app/modules/newspaper/components/newspaper-item/newspaper-item.component.ts
new file mode 100644
index 0000000..affb1e7
--- /dev/null
+++ b/Phaha_Package/src/app/modules/newspaper/components/newspaper-item/newspaper-item.component.ts
@@ -0,0 +1,37 @@
+import { Component, Input, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Router } from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { LoginComponent } from 'src/app/login/login.component';
+import { environment } from 'src/environments/environment';
+import { Newspaper } from '../../models/newspaper.model';
+
+@Component({
+  selector: 'app-newspaper-item',
+  templateUrl: './newspaper-item.component.html',
+  styleUrls: ['./newspaper-item.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+
+export class NewspaperItemComponent implements OnInit {
+  @Input() item?: Newspaper;
+  apiUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  isLogin: boolean = false;
+  fileName: any;
+
+  constructor(
+    private readonly _router: Router,
+    private readonly _modalService: NgbModal,
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+  openModalWithSize() {
+    this._modalService.open(LoginComponent, { size: "md", centered: true });
+  }
+
+  errorHandler(event: any) {
+    event.target.src = "/assets/images/package/package-default.png";
+  }
+}
+
diff --git a/Phaha_Package/src/app/modules/newspaper/components/newspaper-list/newspaper-list.component.html b/Phaha_Package/src/app/modules/newspaper/components/newspaper-list/newspaper-list.component.html
new file mode 100644
index 0000000..4a584a4
--- /dev/null
+++ b/Phaha_Package/src/app/modules/newspaper/components/newspaper-list/newspaper-list.component.html
@@ -0,0 +1,12 @@
+<div class="row p-2">
+    <ng-container *ngFor="let item of pageModel.result">
+        <div class="col-md-3 col-xs-12 mt-4">
+            <app-newspaper-item [item]="item"></app-newspaper-item>
+        </div>
+    </ng-container>
+</div>
+<div class="justify-content-end pagination mt-4">
+    <ngb-pagination [collectionSize]="pageModel.totalItemCount" [(page)]="pageModel.pageNumber"
+      [maxSize]="3" [rotate]="true" [pageSize]="pageModel.pageSize" (pageChange)="onPageChange($event)">
+    </ngb-pagination>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/modules/newspaper/components/newspaper-list/newspaper-list.component.scss b/Phaha_Package/src/app/modules/newspaper/components/newspaper-list/newspaper-list.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/Phaha_Package/src/app/modules/newspaper/components/newspaper-list/newspaper-list.component.ts b/Phaha_Package/src/app/modules/newspaper/components/newspaper-list/newspaper-list.component.ts
new file mode 100644
index 0000000..d075290
--- /dev/null
+++ b/Phaha_Package/src/app/modules/newspaper/components/newspaper-list/newspaper-list.component.ts
@@ -0,0 +1,38 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { NewspaperService } from '../../services/newspaper.service';
+import { PageModel } from 'src/app/Models/model';
+
+@Component({
+  selector: 'app-newspaper-list',
+  templateUrl: './newspaper-list.component.html',
+  styleUrls: ['./newspaper-list.component.scss']
+})
+export class NewspaperListComponent implements OnInit {
+
+  pageModel: PageModel = new PageModel();
+  @Input() id: number = 0;
+
+  constructor(
+    private readonly _newspaperService: NewspaperService,
+  ) {
+    this.pageModel.pageSize = 12;
+  }
+
+  ngOnInit(): void {
+    this.getData();
+  }
+
+  getData() {
+    this._newspaperService
+      .GetListNewpaperByEditorId(this.pageModel, this.id)
+      .subscribe(res => {
+        this.pageModel.totalItemCount = res.totalItemCount;
+        this.pageModel.result = res.result;
+      })
+  }
+
+  onPageChange(numberPage: number): void {
+    this.pageModel.pageNumber = numberPage;
+    this.getData();
+  }
+}
diff --git a/Phaha_Package/src/app/modules/newspaper/components/newspaper-related/newspaper-related.component.html b/Phaha_Package/src/app/modules/newspaper/components/newspaper-related/newspaper-related.component.html
new file mode 100644
index 0000000..181ff08
--- /dev/null
+++ b/Phaha_Package/src/app/modules/newspaper/components/newspaper-related/newspaper-related.component.html
@@ -0,0 +1,16 @@
+<div class="card mt-3">
+    <div class="card-header">
+        <div class="card-title">{{'NEWSPAPER.RELATED.TITLE' | translate}}</div>
+    </div>
+    <div class="card-body">
+        <div class="row custom-col">
+            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6 mb-4" *ngFor="let item of packagenews.result">
+                <app-newspaper-item [item]="item"></app-newspaper-item>
+            </div>
+        </div>
+        <ngb-pagination class="pagination-rounded custom-pagination" [collectionSize]="packagenews.totalItemCount"
+            [(page)]="packagenews.page" [maxSize]="3" (pageChange)="onPaginate($event)" [rotate]="true"
+            [pageSize]="packagenews.pageSize">
+        </ngb-pagination>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/modules/newspaper/components/newspaper-related/newspaper-related.component.scss b/Phaha_Package/src/app/modules/newspaper/components/newspaper-related/newspaper-related.component.scss
new file mode 100644
index 0000000..75023f4
--- /dev/null
+++ b/Phaha_Package/src/app/modules/newspaper/components/newspaper-related/newspaper-related.component.scss
@@ -0,0 +1,7 @@
+@media (min-width: 1366px) {
+    .custom-col {
+        .col-lg-3 {
+            width: 20%;
+        }
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/modules/newspaper/components/newspaper-related/newspaper-related.component.ts b/Phaha_Package/src/app/modules/newspaper/components/newspaper-related/newspaper-related.component.ts
new file mode 100644
index 0000000..4b60d7b
--- /dev/null
+++ b/Phaha_Package/src/app/modules/newspaper/components/newspaper-related/newspaper-related.component.ts
@@ -0,0 +1,41 @@
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { PageModel } from 'src/app/Models/model';
+import { PackageNewsRelatedService } from 'src/app/template-2/package-news/package-news-detail/package-news-related/package-news-related.service';
+import { NewspaperRelatedService } from '../../services/newspaper-related.service';
+
+@Component({
+  selector: 'app-newspaper-related',
+  templateUrl: './newspaper-related.component.html',
+  styleUrls: ['./newspaper-related.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class NewspaperRelatedComponent implements OnInit {
+
+  @Input() id: number = 0;
+  packagenews: PageModel = new PageModel();
+
+  constructor(
+    private readonly _newspaperRelatedService: NewspaperRelatedService
+  ) {
+    this.packagenews.pageSize = 10;
+  }
+
+  ngOnInit(): void {
+    this.getPackageNewsRelated();
+  }
+
+  getPackageNewsRelated() {
+    this._newspaperRelatedService
+      .GetNewsRelated(this.packagenews, this.id)
+      .subscribe(res => {
+        this.packagenews.result = res.result;
+        this.packagenews.totalItemCount = res.totalItemCount;
+      })
+  }
+
+  onPaginate(e: any) {
+    this.packagenews.page = e;
+    this.getPackageNewsRelated();
+  }
+
+}
diff --git a/Phaha_Package/src/app/modules/newspaper/models/newspaper.model.ts b/Phaha_Package/src/app/modules/newspaper/models/newspaper.model.ts
new file mode 100644
index 0000000..c96a5e1
--- /dev/null
+++ b/Phaha_Package/src/app/modules/newspaper/models/newspaper.model.ts
@@ -0,0 +1,22 @@
+export class Newspaper {
+    id?: number;
+    title?: string;
+    description?: string;
+    image?: string;
+    order?: number;
+    type?: number;
+    dateCreate?: string;
+    strDateCreate?: string;
+    view?: number;
+    isBuy?: boolean;
+    price?: number;
+    promotionPrice?: number;
+    editorial?: EditorialOffice;
+    totalPage?: number;
+}
+
+export class EditorialOffice {
+    id?: number;
+    name?: string;
+    slug?: string;
+}
diff --git a/Phaha_Package/src/app/modules/newspaper/modules/newspaper-item.module.ts b/Phaha_Package/src/app/modules/newspaper/modules/newspaper-item.module.ts
new file mode 100644
index 0000000..c72787c
--- /dev/null
+++ b/Phaha_Package/src/app/modules/newspaper/modules/newspaper-item.module.ts
@@ -0,0 +1,41 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NewspaperItemComponent } from '../components/newspaper-item/newspaper-item.component';
+import { SwiperModule } from 'swiper/angular';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { BlockUIModule } from 'ng-block-ui';
+import { QuillModule } from 'ngx-quill';
+import { Ng2FlatpickrModule } from 'ng2-flatpickr';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { HttpClient } from '@angular/common/http';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+
+
+@NgModule({
+  declarations: [NewspaperItemComponent],
+  exports: [NewspaperItemComponent],
+  imports: [
+    CommonModule,
+    SwiperModule,
+    BrowserModule,
+    NgbModule,
+    ReactiveFormsModule,
+    RouterModule,
+    BlockUIModule.forRoot(),
+    FormsModule,
+    QuillModule.forRoot(),
+    Ng2FlatpickrModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    }),
+  ]
+})
+export class NewspaperItemModule { }
diff --git a/Phaha_Package/src/app/modules/newspaper/newspaper.component.html b/Phaha_Package/src/app/modules/newspaper/newspaper.component.html
new file mode 100644
index 0000000..48478af
--- /dev/null
+++ b/Phaha_Package/src/app/modules/newspaper/newspaper.component.html
@@ -0,0 +1 @@
+<p>newspaper works!</p>
diff --git a/Phaha_Package/src/app/modules/newspaper/newspaper.component.scss b/Phaha_Package/src/app/modules/newspaper/newspaper.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/Phaha_Package/src/app/modules/newspaper/newspaper.component.ts b/Phaha_Package/src/app/modules/newspaper/newspaper.component.ts
new file mode 100644
index 0000000..f44cf15
--- /dev/null
+++ b/Phaha_Package/src/app/modules/newspaper/newspaper.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-newspaper',
+  templateUrl: './newspaper.component.html',
+  styleUrls: ['./newspaper.component.scss']
+})
+export class NewspaperComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/modules/newspaper/newspaper.module.ts b/Phaha_Package/src/app/modules/newspaper/newspaper.module.ts
new file mode 100644
index 0000000..2e3913b
--- /dev/null
+++ b/Phaha_Package/src/app/modules/newspaper/newspaper.module.ts
@@ -0,0 +1,55 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClient } from '@angular/common/http';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { SwiperModule } from 'swiper/angular';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BlockUIModule } from 'ng-block-ui';
+import { QuillModule } from 'ngx-quill';
+import { Ng2FlatpickrModule } from 'ng2-flatpickr';
+import { NewspaperListComponent } from './components/newspaper-list/newspaper-list.component';
+import { NewspaperComponent } from './newspaper.component';
+import { NewspaperDetailComponent } from './components/newspaper-detail/newspaper-detail.component';
+import { NewspaperRelatedComponent } from './components/newspaper-related/newspaper-related.component';
+import { PackageNewsOfOfficesModule } from 'src/app/template-2/package-news/package-news-of-offices/package-news-of-offices.module';
+import { NewspaperItemModule } from './modules/newspaper-item.module';
+
+
+
+@NgModule({
+  declarations: [
+    NewspaperComponent,
+    NewspaperListComponent,
+    NewspaperDetailComponent,
+    NewspaperRelatedComponent
+  ],
+  exports: [
+    NewspaperListComponent
+  ],
+  imports: [
+    CommonModule,
+    SwiperModule,
+    BrowserModule,
+    NgbModule,
+    ReactiveFormsModule,
+    RouterModule,
+    BlockUIModule.forRoot(),
+    FormsModule,
+    QuillModule.forRoot(),
+    Ng2FlatpickrModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    }),
+    PackageNewsOfOfficesModule,
+    NewspaperItemModule
+  ]
+})
+export class NewspaperModule { }
diff --git a/Phaha_Package/src/app/modules/newspaper/services/newspaper-related.service.ts b/Phaha_Package/src/app/modules/newspaper/services/newspaper-related.service.ts
new file mode 100644
index 0000000..0694ea5
--- /dev/null
+++ b/Phaha_Package/src/app/modules/newspaper/services/newspaper-related.service.ts
@@ -0,0 +1,22 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { PageModel } from 'src/app/Models/model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NewspaperRelatedService {
+
+  constructor(
+    private readonly _httpClient: HttpClient
+  ) { }
+
+  GetNewsRelated(pageModel: PageModel, id: number) {
+
+    let params = new HttpParams();
+    params = params.append('page', pageModel.pageNumber);
+    params = params.append('pageSize', pageModel.pageSize);
+
+    return this._httpClient.get<any>(`/package-news/newspaper-related/${id}`, {params});
+  }
+}
diff --git a/Phaha_Package/src/app/modules/newspaper/services/newspaper.service.ts b/Phaha_Package/src/app/modules/newspaper/services/newspaper.service.ts
new file mode 100644
index 0000000..7a22db4
--- /dev/null
+++ b/Phaha_Package/src/app/modules/newspaper/services/newspaper.service.ts
@@ -0,0 +1,27 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { PageModel } from 'src/app/Models/model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NewspaperService {
+
+  constructor(
+    private readonly _http: HttpClient
+  ) { }
+
+  /**
+   * Lấy danh sách số báo theo id của tòa soạn
+   * @param id 
+   * @param pageModel 
+   * @returns 
+   */
+  GetListNewpaperByEditorId(pageModel: PageModel, id: number) {
+    let params = new HttpParams();
+    params = params.append('page', pageModel.pageNumber);
+    params = params.append('pageSize', pageModel.pageSize);
+
+    return this._http.get<PageModel>(`/newspaper/list/${id}`, { params });
+  }
+}
diff --git a/Phaha_Package/src/app/modules/packages/components/package-item/package-item.component.html b/Phaha_Package/src/app/modules/packages/components/package-item/package-item.component.html
new file mode 100644
index 0000000..92a14e7
--- /dev/null
+++ b/Phaha_Package/src/app/modules/packages/components/package-item/package-item.component.html
@@ -0,0 +1,63 @@
+<div class="package-item">
+    <div class="package-img">
+      <a href="/chi-tiet-goi/{{item.id}}">
+        <img class="img-response" [src]="baseUrl + item?.image" (error)="errorHandler($event)">
+      </a>
+      <ng-container [ngSwitch]="item.type">
+        <div *ngSwitchCase="1" class="notifi-notpackage text-center">
+          {{'package-type.pdf' | translate}}
+        </div>
+        <div *ngSwitchCase="2" class="notifi-notpackage text-center">
+          {{'package-type.author' | translate}}
+        </div>
+        <div *ngSwitchCase="3" class="notifi-notpackage text-center">
+          {{'package-type.category' | translate}}
+        </div>
+        <div *ngSwitchCase="4" class="notifi-notpackage text-center">
+          {{'package-type.event' | translate}}
+        </div>
+      </ng-container>
+    </div>
+    <h3 class="package-title text-center">
+      <a href="/chi-tiet-goi/{{item.id}}">{{item.name}}</a>
+    </h3>
+    <h5 class="editorial">
+      <a *ngFor="let editorial of item.editorials"
+        routerLink="/{{editorial.slug}}">{{editorial.name}}</a>
+    </h5>
+    <div class="price-info">
+      <p *ngIf="item.promotionPrice" [ngClass]="item.promotionPrice ? 'package-price-sale' : 'package-price'">
+        <span>{{item.price | number}}VNĐ</span>
+      </p>
+      <p class="package-price-final">
+        <span>
+          {{fNumber(item)}}VNĐ
+        </span>
+        / {{item.strDuration}}
+      </p>
+    </div>
+    <div class="group-button mt-2">
+      <a type="button" routerLink="/package-trial/{{item.id}}" class="btn btn-trial"
+        *ngIf="item.isTrial && !item.isBought">
+        {{'cta.trial' | translate}}
+      </a>
+      <a type="button" class="btn btn-detail" href="/chi-tiet-goi/{{item.id}}">
+        {{'cta.detail' | translate}}</a>
+  
+      <a *ngIf="!item.isBought && !isLogin" (click)="openModalLogin();" type="button" class="btn btn-buy">
+        {{'cta.register' | translate}}
+      </a>
+      <a *ngIf="!item.isBought && isLogin" [routerLink]="['/package-pay/' + item.id]" type="button" class="btn btn-buy">
+        {{'cta.register' | translate}}
+      </a>
+      <a *ngIf="item.isBought" routerLink="/list-news/{{item.packageUserId}}" type="button" class="btn btn-buy">
+        {{'cta.read' | translate}}</a>
+    </div>
+    <ng-container *ngIf="item.promotionPrice">
+      <div class="percent-sale text-center">
+        <span *ngIf="item.promotionPrice" class="top-right badge-sale"> - {{(item.price -
+          item.promotionPrice) / item.price * 100 | number : '0.0-0'}}
+          %</span>
+      </div>
+    </ng-container>
+  </div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/modules/packages/components/package-item/package-item.component.scss b/Phaha_Package/src/app/modules/packages/components/package-item/package-item.component.scss
new file mode 100644
index 0000000..55f4bae
--- /dev/null
+++ b/Phaha_Package/src/app/modules/packages/components/package-item/package-item.component.scss
@@ -0,0 +1,128 @@
+app-package-item {
+    width: 100%;
+    margin-top: 15px;
+    margin-bottom: 15px;
+  
+    .package-title {
+      display: inline !important;
+    }
+  
+    .package-item {
+      padding: 10px;
+      background: #fff;
+      border-radius: 5px;
+      box-shadow: 0px 0px 10px #ccc;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+  
+      .package-item-img {
+        overflow: hidden;
+        height: 250px;
+        width: 100%;
+        border-radius: 5px;
+        position: relative;
+        text-align: center;
+  
+        img {
+          height: 100%;
+          transition: transform 0.6s;
+          margin: auto;
+  
+          &:hover {
+            transform: scale(1.1);
+          }
+        }
+      }
+  
+      .package-item-title {
+        text-align: center;
+        padding: 10px 0;
+        margin-bottom: 10px;
+  
+        a {
+          font-size: 18px;
+          color: #888;
+          font-weight: bold;
+          text-decoration: none;
+  
+          &:hover {
+            color: #444;
+          }
+        }
+      }
+  
+      .package-item-price {
+        text-align: center;
+        color: #444;
+        font-size: 18px;
+  
+        span {
+          font-size: 18px;
+          font-weight: 600;
+        }
+  
+        .package-item-price-old {
+          color: #ccc;
+          font-size: 16px;
+          font-weight: 100;
+          margin-right: 10px;
+          text-decoration: line-through;
+        }
+      }
+  
+      .package-item-sold {
+        background: #fcaf17;
+        text-align: center;
+        padding: 4px 0;
+        border-radius: 20px;
+        margin-top: 5px;
+  
+        span {
+          color: #fff;
+        }
+      }
+  
+      .btn-trial,
+      .btn-detail {
+        border-radius: 20px;
+        background: #ffe7b8;
+        color: #6c757d;
+        font-size: 13px;
+      }
+  
+      .btn-trial:hover,
+      .btn-detail:hover {
+        background: #e09500;
+        color: #ffffff;
+      }
+  
+      .btn-buy {
+        background: #fcaf17;
+        border-radius: 20px;
+        color: #ffffff;
+        font-size: 13px;
+      }
+  
+      .btn-buy:hover {
+        background: #e09500;
+        color: #ffffff;
+      }
+  
+      .group-button {
+        display: flex;
+        justify-content: space-around;
+      }
+    }
+  
+    .notifi-notpackage {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      background: #fcaf17;
+      padding: 2px 10px;
+      border-top-left-radius: 5px;
+      color: #fff;
+    }
+  }
\ No newline at end of file
diff --git a/Phaha_Package/src/app/modules/packages/components/package-item/package-item.component.ts b/Phaha_Package/src/app/modules/packages/components/package-item/package-item.component.ts
new file mode 100644
index 0000000..3d0f1ce
--- /dev/null
+++ b/Phaha_Package/src/app/modules/packages/components/package-item/package-item.component.ts
@@ -0,0 +1,68 @@
+import { Component, Input, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { environment } from 'src/environments/environment';
+import { Router } from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { formatNumber } from '@angular/common';
+import { LoginComponent } from 'src/app/login/login.component';
+
+@Component({
+  selector: 'app-package-item',
+  templateUrl: './package-item.component.html',
+  styleUrls: ['./package-item.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class PackageItemComponent implements OnInit {
+  fakeArray = new Array(10);
+  @Input() item: any = {};
+  public listEditorialOffice: any = [];
+  public baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  public idOfficeEditorial: any = null;
+
+  public currentUser: any = {};
+  public isLogin: boolean = false;
+  @ViewChild('LoginModal') templateRef: TemplateRef<NgbModal> | undefined;
+  lang: any;
+  constructor(
+    private router: Router,
+    private _modalService: NgbModal,
+  ) {
+    this.lang = localStorage.getItem("lang");
+    this.currentUser = JSON.parse(localStorage.getItem("currentCustomer") ?? "{}");
+    if (typeof (this.currentUser) === 'object' && this.currentUser.jwtToken) {
+      this.isLogin = true;
+    }
+  }
+
+  errorHandler(event: any) {
+    event.target.src = "/assets/images/package/package-default.png";
+  }
+
+  onRedirectPayLink(a: any) {
+    if (this.isLogin) {
+      this.router.navigate(['package-pay', a.id])
+    } else {
+      this.openModalLogin();
+    }
+  }
+
+  openModalLogin() {
+    this._modalService.open(LoginComponent, { size: "md", centered: true });
+  }
+
+  fNumber(item: any) {
+    const value = item.promotionPrice && item.promotionPrice > 0 ? item.promotionPrice : item.price;
+    let cst = '';
+    if (value)
+      cst = formatNumber(value, 'en-US', this.lang == 'vi' ? '1.0-2' : '1.2-2').replace(/\,/g, '/').replace(/\./g, ',').replace(/\//g, '.');
+    return cst;
+  }
+
+  ngOnInit(): void {
+    if (this.lang == 'en') {
+      {
+        this.item.price = this.item.price / 24780;
+        this.item.promotionPrice = this.item.promotionPrice / 24780;
+      }
+    }
+  }
+}
diff --git a/Phaha_Package/src/app/modules/packages/components/package-search/package-search.component.html b/Phaha_Package/src/app/modules/packages/components/package-search/package-search.component.html
new file mode 100644
index 0000000..eb0fa94
--- /dev/null
+++ b/Phaha_Package/src/app/modules/packages/components/package-search/package-search.component.html
@@ -0,0 +1,58 @@
+<div class="search-page">
+    <div class="container">
+        <div class="search-head">
+            <div class="result-search-count">
+                {{'search-page.showing' | translate}}
+                {{packageSearch.totalItemCount}}
+                {{'search-page.result-count' | translate}}
+            </div>
+            <div class="input-group box-input-search">
+                <input id="input-field" [(ngModel)]="keyword" (keyup.enter)="getListPackageSearch()" type="search"
+                    class="form-control" placeholder="{{'header.search' | translate}}"
+                    aria-label="Example text with button addon" aria-describedby="button-addon1" />
+            </div>
+            <div id="sorting" class="sorting-categories">
+                    <button type="button" (click)="search(1)" [ngClass]="{'active-type': this.searchType == 1}">
+                        {{'TYPES.PDF' | translate}}
+                    </button>
+                    <button type="button" (click)="search(2)" [ngClass]="{'active-type': this.searchType == 2}">
+                        {{'TYPES.NEWPAPER' | translate}}
+                    </button>
+                <ng-select class="sorting-office" [(ngModel)]="editorialOfficeSelected" bindLabel="text"
+                    placeholder="{{'search-page.select-office' | translate}}" bindValue="value" [multiple]="true"
+                    [items]="editorialOffices" (change)="onChangeOffice($event)">
+                </ng-select>
+            </div>
+        </div>
+        <block-ui>
+            <div class="search-body mt-1">
+                <div *ngIf="packageSearch.totalItemCount == 0" class="notification-not-found text-center m-5 p-4">
+                    <h4 class="m-0">{{'search-page.noti-not-found-large' | translate}}</h4>
+                    <p>{{'search-page.noti-not-found-small' | translate}}</p>
+                </div>
+                <div *ngIf="packageSearch.totalItemCount > 0">
+                    <div class="pagination cus-page">
+                        <ngb-pagination [collectionSize]="packageSearch.totalItemCount" [(page)]="packageSearch.page"
+                            [maxSize]="3" [rotate]="true" [pageSize]="packageSearch.pageSize"
+                            (pageChange)="onPageChange($event)">
+                        </ngb-pagination>
+                    </div>
+                    <div class="row">
+                        <ng-container *ngFor="let item of packageSearch.result">
+                            <div class="col-md-3 col-xs-12 mt-4">
+                                <app-package-item *ngIf="searchType == 1" [item]="item"></app-package-item>
+                                <app-newspaper-item *ngIf="searchType == 2" [item]="item"></app-newspaper-item>
+                            </div>
+                        </ng-container>
+                    </div>
+                    <div class="pagination cus-page mt-3">
+                        <ngb-pagination [collectionSize]="packageSearch.totalItemCount" [(page)]="packageSearch.page"
+                            [maxSize]="3" [rotate]="true" [pageSize]="packageSearch.pageSize"
+                            (pageChange)="onPageChange($event)">
+                        </ngb-pagination>
+                    </div>
+                </div>
+            </div>
+        </block-ui>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/modules/packages/components/package-search/package-search.component.scss b/Phaha_Package/src/app/modules/packages/components/package-search/package-search.component.scss
new file mode 100644
index 0000000..5a7e556
--- /dev/null
+++ b/Phaha_Package/src/app/modules/packages/components/package-search/package-search.component.scss
@@ -0,0 +1,320 @@
+@import "~@ng-select/ng-select/themes/default.theme.css";
+
+app-package-search {
+    .search-head {
+        background-color: #fff;
+        margin-top: 165px;
+        padding: 24px 16px;
+
+        .result-search-count {
+            font-size: 14px;
+            color: #a7aeb2;
+        }
+
+        #input-field {
+            font-size: 28px;
+            border: none;
+            margin: 10px 0;
+            background: #efefef;
+            padding: 5px 20px;
+        }
+
+        input::placeholder {
+            color: #ccc;
+        }
+
+        .sorting-office {
+            width: 100%;
+        }
+        .sorting-categories {
+            margin-top: 6px;
+            display: flex;
+            gap: 10px;
+
+            button {
+                border: 1px solid #ccc;
+                border-radius: 4px;
+                padding: 7px 14px;
+                cursor: pointer;
+                color: #444;
+                text-wrap: nowrap;
+
+                &:hover {
+                    background-color: #e09500;
+                    color: #fff;
+                }
+            }
+
+            .active-type {
+                background-color: #e09500;
+                color: #fff;
+            }
+        }
+    }
+
+    .search-body {
+        padding: 24px 16px;
+        background-color: #fff;
+
+        .notification-not-found {
+            font-size: 16px;
+        }
+
+        .product-item {
+            padding: 10px;
+            background: #fff;
+            border-radius: 5px;
+            box-shadow: 0px 0px 10px #ccc;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+
+            .product-img {
+                overflow: hidden;
+                height: 250px;
+                width: 100%;
+                border-radius: 5px;
+                position: relative;
+                text-align: center;
+
+                img {
+                    height: 100%;
+                    transition: transform 0.6s;
+                    margin: auto;
+
+                    &:hover {
+                        transform: scale(1.1);
+                    }
+                }
+            }
+
+            .product-title {
+                text-align: center;
+                padding: 10px 4px 0;
+                margin-bottom: 10px;
+
+                a {
+                    font-size: 18px;
+                    color: #888;
+                    font-weight: bold;
+                    text-decoration: none;
+
+                    &:hover {
+                        color: #444;
+                    }
+                }
+            }
+
+            .editorial {
+                padding-bottom: 4px;
+                text-align: center;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                text-overflow: ellipsis;
+
+                a {
+                    text-decoration: none;
+                    color: #6c757d;
+                    margin-right: 10px;
+
+                    &:hover {
+                        text-decoration: underline;
+                        font-weight: 600;
+                    }
+                }
+            }
+
+            .product-price {
+                text-align: center;
+                color: #444;
+                margin-bottom: 5px;
+
+                span {
+                    font-size: 16px;
+                    font-weight: 600;
+                }
+            }
+
+            .product-sold {
+                background: #eee;
+                text-align: center;
+                // padding: 4px 0;
+                border-radius: 20px;
+                margin-top: 5px;
+
+                span {
+                    color: #6c757d;
+                    font-size: 12px;
+                }
+            }
+
+            .group-button {
+                display: flex;
+                justify-content: space-around;
+
+                .btn-trial,
+                .btn-detail {
+                    border-radius: 20px;
+                    background: #ffe7b8;
+                    color: #6c757d;
+                }
+
+                .btn-trial:hover,
+                .btn-detail:hover {
+                    background: #e09500;
+                    color: #ffffff;
+                }
+
+                .btn-buy {
+                    background: #fcaf17;
+                    border-radius: 20px;
+                    color: #ffffff;
+                }
+
+                .btn-buy:hover {
+                    background: #e09500;
+                    color: #ffffff;
+                }
+            }
+        }
+    }
+
+    #item-prod {
+        margin-bottom: 20px;
+    }
+
+    .notifi-notpackage {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        background: #fcaf17;
+        padding: 2px 10px;
+        border-top-left-radius: 5px;
+        color: #fff;
+    }
+
+    .image-show {
+        min-width: 120px !important;
+
+        img {
+            width: 100%;
+            transition: transform 0.6s;
+
+            &:hover {
+                transform: scale(1.1);
+            }
+        }
+    }
+
+    .product-title {
+        // text-align: center;
+        font-size: 26px;
+        color: #888;
+        font-weight: bold;
+        text-decoration: none;
+        margin-bottom: 10px;
+    }
+
+    .infomation-item {
+        margin-left: 15px;
+    }
+
+    .text-information {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+        line-height: 20px;
+        height: 80px;
+    }
+
+    .product-price {
+        color: #444;
+        margin-bottom: 5px;
+
+        span {
+            font-size: 16px;
+            font-weight: 600;
+        }
+    }
+
+    .product-sold {
+        background: #eee;
+        // padding: 4px 0;
+        border-radius: 20px;
+        margin-top: 5px;
+
+        span {
+            color: #6c757d;
+            font-size: 12px;
+        }
+    }
+
+    .btn-trial,
+    .btn-detail {
+        border-radius: 20px;
+        background: #ffe7b8;
+        color: #6c757d;
+        font-size: 13px;
+    }
+
+    .btn-trial:hover,
+    .btn-detail:hover {
+        background: #e09500;
+        color: #ffffff;
+    }
+
+    .btn-buy {
+        background: #fcaf17;
+        border-radius: 20px;
+        color: #ffffff;
+        font-size: 13px;
+    }
+
+    .btn-buy:hover {
+        background: #e09500;
+        color: #ffffff;
+    }
+
+    .group-button {
+        display: flex;
+
+        a {
+            margin-right: 10px;
+        }
+    }
+
+    .cus-page {
+
+        li.page-item,
+        li.page-item.disabled {
+
+            a,
+            .page-link {
+                background-color: #e9ecef;
+                border-color: #e9ecef;
+                color: #222;
+            }
+        }
+
+        li.page-item {
+            width: 36px;
+            text-align: center;
+            line-height: 24px;
+            margin: 0 2px;
+            border-radius: 50%;
+            overflow: hidden;
+            font-weight: bold;
+        }
+
+        li.page-item.active .page-link {
+            background-color: #e09500;
+            border-color: #e09500;
+            color: #fff;
+        }
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/modules/packages/components/package-search/package-search.component.ts b/Phaha_Package/src/app/modules/packages/components/package-search/package-search.component.ts
new file mode 100644
index 0000000..3381cbb
--- /dev/null
+++ b/Phaha_Package/src/app/modules/packages/components/package-search/package-search.component.ts
@@ -0,0 +1,109 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { PackageSearch } from '../../models/package-search.model';
+import { environment } from 'src/environments/environment';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Title } from '@angular/platform-browser';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { finalize } from 'rxjs';
+import { LoginComponent } from 'src/app/login/login.component';
+import { PackageSearchService } from '../../services/package-search.service';
+import { NewspaperSearch } from '../../models/newspaper-search.model';
+import { SEARCH_TYPE } from '../../enums/search.enum';
+
+@Component({
+  selector: 'app-package-search',
+  templateUrl: './package-search.component.html',
+  styleUrls: ['./package-search.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+
+export class PackageSearchComponent implements OnInit {
+
+  packageSearch: PackageSearch = new PackageSearch();
+  editorialOffices: any = [];
+  editorialOfficeSelected: number[] = [];
+  keyword = '';
+
+  baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  listSearch: any;
+  currentUser: any = {};
+  isLogin: boolean = false;
+  searchType: SEARCH_TYPE = 1;
+
+  constructor(
+    private readonly _router: Router,
+    private readonly _searchDataService: PackageSearchService,
+    private readonly _title: Title,
+    private readonly _modalService: NgbModal,
+  ) {
+    this.packageSearch.pageSize = 12;
+    this.currentUser = JSON.parse(localStorage.getItem("currentCustomer") ?? "{}");
+    if (typeof (this.currentUser) === 'object' && this.currentUser.jwtToken) {
+      this.isLogin = true;
+    }
+  }
+
+  ngOnInit(): void {
+    this.getEditorialOffices();
+    this._title.setTitle('Tìm kiếm');
+    this.search();
+  }
+
+  getListPackageSearch() {
+    this.packageSearch.keyWord = this.packageSearch.keyWord?.trim();
+    window.location.href = "/search?keyword=" + encodeURIComponent(this.packageSearch.keyWord || '');
+  }
+
+  search(searchType?: SEARCH_TYPE) {
+    if(searchType) this.searchType = searchType;
+
+    if(this.searchType == 1)
+      this.getPackageSearch();
+    else
+      this.getNewspaperSearch();
+  }
+
+  getPackageSearch() {
+    this._searchDataService
+      .getListPackageSearch(this.packageSearch)
+      .subscribe((res) => {
+        this.packageSearch.result = res.result;
+        this.packageSearch.totalItemCount = res.totalItemCount;
+      });
+  }
+
+  getNewspaperSearch() {
+    this._searchDataService
+      .getNewspaperSearch(this.packageSearch)
+      .subscribe(res => {
+        this.packageSearch.result = res.result;
+        this.packageSearch.totalItemCount = res.totalItemCount;
+      })
+  }
+
+  getEditorialOffices() {
+    this._searchDataService
+      .getListEditorialOffice()
+      .subscribe((data) => {
+        this.editorialOffices = data.data;
+      });
+  }
+
+  onPageChange(numberPage: number): void {
+    this.packageSearch.page = numberPage;
+    this.search();
+    window.scroll({ top: 0, behavior: 'smooth' })
+  }
+
+  onRedirectPayLink(a: any) {
+    if (this.isLogin)
+      this._router.navigate(['package-pay', a.id])
+    else
+      this._modalService.open(LoginComponent, { size: "md", centered: true });
+  }
+
+  onChangeOffice(e: any) {
+    this.packageSearch.editorialIds = this.editorialOfficeSelected;
+    this.search();
+  }
+}
diff --git a/Phaha_Package/src/app/modules/packages/enums/search.enum.ts b/Phaha_Package/src/app/modules/packages/enums/search.enum.ts
new file mode 100644
index 0000000..5cb9e58
--- /dev/null
+++ b/Phaha_Package/src/app/modules/packages/enums/search.enum.ts
@@ -0,0 +1,4 @@
+export enum SEARCH_TYPE {
+    PACKAGE = 1,
+    NEWSPAPER = 2
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/modules/packages/models/newspaper-search.model.ts b/Phaha_Package/src/app/modules/packages/models/newspaper-search.model.ts
new file mode 100644
index 0000000..1521051
--- /dev/null
+++ b/Phaha_Package/src/app/modules/packages/models/newspaper-search.model.ts
@@ -0,0 +1,8 @@
+export class NewspaperSearch {
+    page: number = 1;
+    pageSize: number = 10;
+    totalItemCount: number = 0;
+    result?: any;
+    keyWord?: string;
+    editorialIds?: number[];
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/modules/packages/models/package-search.model.ts b/Phaha_Package/src/app/modules/packages/models/package-search.model.ts
new file mode 100644
index 0000000..b2275ea
--- /dev/null
+++ b/Phaha_Package/src/app/modules/packages/models/package-search.model.ts
@@ -0,0 +1,8 @@
+export class PackageSearch {
+    page: number = 1;
+    pageSize: number = 10;
+    totalItemCount: number = 0;
+    result?: any;
+    keyWord?: string = '';
+    editorialIds?: number[];
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/modules/packages/packages.module.ts b/Phaha_Package/src/app/modules/packages/packages.module.ts
new file mode 100644
index 0000000..008b5d5
--- /dev/null
+++ b/Phaha_Package/src/app/modules/packages/packages.module.ts
@@ -0,0 +1,64 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PackageSearchComponent } from './components/package-search/package-search.component';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { QuillModule } from 'ngx-quill';
+import { BlockUIModule } from 'ng-block-ui';
+import { ToastrModule } from 'ngx-toastr';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ViewBookModule } from 'src/app/view-book/view-book.module';
+import { Ng2FlatpickrModule } from 'ng2-flatpickr';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { NgxTranslateModule } from 'src/app/translate/translate.module';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { httpTranslateLoader } from 'src/app/app.module';
+import { ShareButtonsModule } from 'ngx-sharebuttons/buttons';
+import { PackageItemComponent } from './components/package-item/package-item.component';
+import { RouterModule } from '@angular/router';
+import { NewspaperModule } from '../newspaper/newspaper.module';
+import { VneconomyModule } from 'src/app/editorial-office/vneconomy/vneconomy-home/vneconomy.module';
+import { NewspaperItemModule } from '../newspaper/modules/newspaper-item.module';
+
+
+
+@NgModule({
+  declarations: [
+    PackageSearchComponent,
+    PackageItemComponent
+  ],
+  exports: [
+    PackageItemComponent
+  ],
+  imports: [
+    CommonModule,
+    BrowserModule,
+    NgbModule,
+    QuillModule.forRoot(),
+    BlockUIModule.forRoot(),
+    ToastrModule.forRoot({ timeOut: 2000, maxOpened: 1 }),
+    BrowserAnimationsModule,
+    ViewBookModule,
+    Ng2FlatpickrModule,
+    FormsModule,
+    ReactiveFormsModule,
+    NgSelectModule,
+    NgxTranslateModule,
+    HttpClientModule,
+    RouterModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: httpTranslateLoader,
+        deps: [HttpClient]
+      },
+    }),
+    ShareButtonsModule.withConfig({
+      debug: true,
+    }),
+    NewspaperItemModule
+  ]
+})
+export class PackagesModule { }
diff --git a/Phaha_Package/src/app/modules/packages/services/package-search.service.ts b/Phaha_Package/src/app/modules/packages/services/package-search.service.ts
new file mode 100644
index 0000000..76d6701
--- /dev/null
+++ b/Phaha_Package/src/app/modules/packages/services/package-search.service.ts
@@ -0,0 +1,32 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { NewspaperSearch } from '../models/newspaper-search.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PackageSearchService {
+  constructor(private _httpClient: HttpClient) { }
+
+  getListEditorialOffice() {
+    return this._httpClient.get<any>(`/editorial-office/listitem`);
+  }
+
+  getListPackageSearch(page: any) {
+    return this._httpClient.post<any>("/search/package", { 
+      keyWord: page.keyWord,
+      page: page.page,
+      pageSize: page.pageSize,
+      EditorialIds: page.editorialIds
+   });
+  }
+
+  getNewspaperSearch(page: NewspaperSearch) {
+    return this._httpClient.post<any>("/search/newspaper", { 
+        keyWord: page.keyWord,
+        page: page.page,
+        pageSize: page.pageSize,
+        EditorialIds: page.editorialIds
+     });
+  }
+}
diff --git a/Phaha_Package/src/app/my-package/add-user/add-user.component.html b/Phaha_Package/src/app/my-package/add-user/add-user.component.html
new file mode 100644
index 0000000..26afb3e
--- /dev/null
+++ b/Phaha_Package/src/app/my-package/add-user/add-user.component.html
@@ -0,0 +1,63 @@
+<block-ui>
+  <div class="container">
+    <nav aria-label="breadcrumb">
+      <ol class="breadcrumb">
+        <li class="breadcrumb-item"><a routerLink="/">{{'breadcrumb.home' | translate}}</a></li>
+        <li class="breadcrumb-item active" aria-current="page">{{'breadcrumb.reader-manage' | translate}}</li>
+      </ol>
+    </nav>
+    <div class="card">
+      <div class="card-body">
+        <header class="my-package-header"><span>{{'add-user.reader-list' | translate}}</span>
+        </header>
+        <div class="row">
+          <div class="col-md-3 col-sm-3 col-xs-12">
+            <div class="box-editor">
+              <div class="box-img-package">
+                <img class="img-package" [src]="baseUrl + package?.image" title="{{package?.name}}">
+              </div>
+              <div class="link-name">
+                <h3>{{package?.name}}</h3>
+              </div>
+              <div>{{'detail.amount' | translate}}: {{package?.total}}</div>
+              <div>{{'detail.granted' | translate}}: {{package?.allocated}}</div>
+              <div>{{'detail.duration' | translate}}: {{package?.dateExpire | date : 'dd/MM/yyyy'}}</div>
+            </div>
+          </div>
+          <div class="col-md-9 col-sm-9 col-xs-12">
+            <div class="input-group box-input-search">
+              <input type="search" class="form-control" placeholder="Nhập email người dùng"
+                [(ngModel)]="modelAddUser.userName" (keyup.enter)="addUser()"
+                aria-label="Example text with button addon" aria-describedby="button-addon1" />
+              <button class="btn btn-outline-secondary btn-add-user" type="button" (click)="addUser()">
+                <span class="uil uil-user-plus" id="search-icon"></span>
+              </button>
+            </div>
+            <div class="text-center" style="line-height: 40px; font-size: 15px;">{{'add-user.notice' | translate}} <span class="fw-bold">postenp.phaha.vn</span>
+            </div>
+            <div class="table-add-user">
+              <table class="table table-hover">
+                <tbody>
+                  <ng-container *ngFor="let user of listUser; let i = index">
+                    <tr [ngClass]="user.canDelete ? '' : 'isUser'">
+                      <td class="text-center">
+                        <span class="order-user">{{i + 1}}</span>
+                      </td>
+                      <td>
+                        <span class="email-user">{{hiddenEmail(user.email)}}</span>
+                        <span *ngIf="!user.canDelete">({{'add-user.subscribers' | translate}})</span></td>
+                      <td class="text-center p-0">
+                        <span class="remove-user" *ngIf="user.canDelete" (click)="deleteUser(user.id)"><i
+                            class="uil uil-user-minus"></i></span>
+                      </td>
+                    </tr>
+                  </ng-container>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</block-ui>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/my-package/add-user/add-user.component.scss b/Phaha_Package/src/app/my-package/add-user/add-user.component.scss
new file mode 100644
index 0000000..ecb635e
--- /dev/null
+++ b/Phaha_Package/src/app/my-package/add-user/add-user.component.scss
@@ -0,0 +1,129 @@
+app-add-user {
+  .box-img-package {
+    margin: auto;
+    text-align: center;
+    .img-package {
+      width: 100%;
+      max-width: 200px;
+    }
+  }
+
+  .form-control:focus {
+    color: #212529;
+    background-color: #fff;
+    border-color: #fcaf17;
+    outline: 0;
+    box-shadow: none !important;
+  }
+
+  .breadcrumb {
+    margin-top: 13px;
+
+    a {
+      text-decoration: none;
+      color: #000;
+    }
+  }
+
+  .my-package-header {
+    font-weight: 600;
+    margin-bottom: 20px;
+    text-transform: uppercase;
+    border-bottom: 1px solid #bbb;
+    cursor: pointer;
+
+    span {
+      font-size: 20px;
+      border-bottom: 3px solid #fcaf17;
+      padding-bottom: 2px;
+    }
+  }
+
+  .btn-add-user {
+    border-color: #ccc;
+  }
+
+  .remove-user {
+    cursor: pointer;
+
+    i {
+      font-size: 20px;
+      color: red;
+    }
+  }
+
+  .responsive {
+    width: 100%;
+    height: auto;
+  }
+
+  .box-editor {
+    margin-bottom: 10px;
+    border-right: 1px solid #efefef;
+    padding: 10px;
+    height: 100%;
+
+    .editor-item {
+      text-align: center;
+      cursor: pointer;
+      max-width: 140px;
+      margin: auto;
+
+      .editor-item-cus {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        height: 100%;
+      }
+
+      .img-avatar {
+        width: 100%;
+        object-fit: cover;
+        overflow: hidden;
+        border-radius: 5px;
+        box-shadow: 0 0 4px #999;
+        margin: 0 auto;
+        border-radius: 5px;
+        position: relative;
+
+        img {
+          transition: transform 0.6s;
+
+          &:hover {
+            transform: scale(1.1);
+          }
+        }
+      }
+
+      .link-name {
+        font-weight: 600;
+        font-size: 14px;
+        margin-top: 10px;
+      }
+
+      &:hover,
+      &.active {
+        background: #eee;
+      }
+    }
+  }
+
+  .box-input-search {
+    margin: auto;
+  }
+
+  #search-icon {
+    font-size: 16px;
+  }
+
+  .table-add-user {
+    margin: auto;
+  }
+
+  .isUser {
+    background: bisque;
+  }
+
+  @media only screen and (max-width: 768px) {
+  }
+}
diff --git a/Phaha_Package/src/app/my-package/add-user/add-user.component.ts b/Phaha_Package/src/app/my-package/add-user/add-user.component.ts
new file mode 100644
index 0000000..7e178ae
--- /dev/null
+++ b/Phaha_Package/src/app/my-package/add-user/add-user.component.ts
@@ -0,0 +1,96 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { environment } from "../../../environments/environment";
+import { PackageService } from "../../package/package.service";
+import { ActivatedRoute, Router } from "@angular/router";
+import { MyPackageService } from "../my-package.service";
+import { ToastrService } from "ngx-toastr";
+
+@Component({
+  selector: 'app-add-user',
+  templateUrl: './add-user.component.html',
+  styleUrls: ['./add-user.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class AddUserComponent implements OnInit {
+  public baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  public package: any;
+  public idPackage: number = 0;
+  public modelAddUser = {
+    packageId: 0,
+    userName: ''
+  }
+  public listUser: any;
+
+  constructor(
+    private _packageService: PackageService,
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
+    private _myPackage: MyPackageService,
+    private _toastr: ToastrService,
+  ) {
+    this.activatedRoute.params.subscribe(params => {
+      this.idPackage = params['id'];
+    });
+  }
+
+  ngOnInit(): void {
+    this.onGetDetailPackage();
+    this.getListUser();
+  }
+
+  hiddenEmail(email: string) {
+    const emailSplit = email.split("@");
+
+    if(emailSplit.length != 2)
+      return email.substring(0, 4) + '...';
+
+    return emailSplit[0].substring(0, 4) + '...@...' + emailSplit[1].substring(emailSplit[1].length - 3, emailSplit[1].length);
+  }
+
+  onGetDetailPackage() {
+    this._packageService.getDetailPackageOfUser(this.idPackage)
+      .subscribe(data => {
+        this.package = data.data;
+      });
+  }
+
+  addUser() {
+    this.modelAddUser.packageId = this.idPackage;
+    if (this.modelAddUser.userName) {
+      this.modelAddUser.userName = this.modelAddUser.userName.trim();
+    }
+    this._myPackage.addUser(this.modelAddUser)
+      .pipe()
+      .subscribe(data => {
+        if (data.success) {
+          this._toastr.success(data.message, 'Thông báo', { timeOut: 2000, });
+          this.modelAddUser = {
+            packageId: 0,
+            userName: ''
+          }
+          this.getListUser();
+          this.onGetDetailPackage();
+        }
+      });
+  }
+
+  getListUser() {
+    this._myPackage.getUser(this.idPackage)
+      .pipe()
+      .subscribe(data => {
+        this.listUser = data.data;
+      });
+  }
+
+  deleteUser(userId: number) {
+    this._myPackage.deleteUser(this.idPackage, userId)
+      .pipe()
+      .subscribe(data => {
+        if (data.success) {
+          this._toastr.success(data.message, 'Thông báo', { timeOut: 2000, });
+          this.getListUser();
+          this.onGetDetailPackage();
+        }
+      });
+  }
+}
diff --git a/Phaha_Package/src/app/my-package/list-package/list-package.component.html b/Phaha_Package/src/app/my-package/list-package/list-package.component.html
new file mode 100644
index 0000000..7010d50
--- /dev/null
+++ b/Phaha_Package/src/app/my-package/list-package/list-package.component.html
@@ -0,0 +1,86 @@
+<div class="container">
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item"><a routerLink="/">{{'breadcrumb.home' | translate}}</a></li>
+      <li class="breadcrumb-item"><a routerLink="/">{{'breadcrumb.purchased-package' | translate}}</a></li>
+      <li class="breadcrumb-item active" aria-current="page">{{package?.name}}</li>
+    </ol>
+  </nav>
+  <div class="card">
+    <div class="card-body">
+      <div class="row">
+        <div class="col-md-3 col-sm-4 col-xs-12">
+          <header class="my-package-header"><span>{{'detail.package-info' | translate}}</span></header>
+          <div class="box-editor">
+            <div class="row">
+              <div class="col-12">
+                <div class="editor-item">
+                  <a>
+                    <div class="editor-item-cus">
+                      <div class="img-avatar">
+                        <img [src]="baseUrl + package?.image" class="responsive">
+                        <ng-container [ngSwitch]="package?.type">
+                          <div *ngSwitchCase="1" class="notifi-notpackage text-center">
+                            {{'package-type.pdf' | translate}}
+                          </div>
+                          <div *ngSwitchCase="2" class="notifi-notpackage text-center">
+                            {{'package-type.author' | translate}}
+                          </div>
+                          <div *ngSwitchCase="3" class="notifi-notpackage text-center">
+                            {{'package-type.category' | translate}}
+                          </div>
+                          <div *ngSwitchCase="4" class="notifi-notpackage text-center">
+                            {{'package-type.event' | translate}}
+                          </div>
+                        </ng-container>
+                      </div>
+                    </div>
+                  </a>
+                </div>
+              </div>
+              <div class="col-12">
+                <div class="link-name">
+                  <h3>{{package?.name}}</h3>
+                </div>
+                <div>
+                  <span>{{'detail.office' | translate}}: </span>
+                  <a *ngFor="let item of package?.editorials"
+                     routerLink="/{{item.slug}}">{{item.name}}</a>
+                </div>
+                <div>{{'detail.amount' | translate}}: {{package?.total}}</div>
+                <div>{{'detail.duration' | translate}}: {{package?.dateExpire | date : 'dd/MM/yyyy'}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-9 col-sm-8 col-xs-12">
+          <div class="my-package-news">
+            <header class="my-package-header"><span>{{'detail.articles-list' | translate}}
+              ({{news.totalRecords}})</span></header>
+            <ng-container *ngFor="let item of news.result">
+              <div class="row new-item">
+                <div class="col-md-2 col-sm-3 col-xs-12">
+                  <div class="new-image">
+                    <a (click)="getViewPdf(item)" style="cursor: pointer">
+                      <img class="responsive" [src]="baseUrl + item.image">
+                    </a>
+                  </div>
+                </div>
+                <div class="col-md-10 col-sm-9 col-xs-12">
+                  <h3 class="new-title"><a style="cursor: pointer" (click)="getViewPdf(item)">{{item.title}}</a></h3>
+                  <p class="new-date">{{item.dateCreate | date : 'dd/MM/yyyy HH:mm'}}</p>
+                  <p class="new-content">{{item.description}}</p>
+                </div>
+              </div>
+            </ng-container>
+          </div>
+          <div class="pagination mt-4 float-end">
+            <ngb-pagination [collectionSize]="news.totalRecords" [(page)]="news.page" [maxSize]="3" [rotate]="true"
+                            [pageSize]="news.pageSize" (pageChange)="onPageChange($event)">
+            </ngb-pagination>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/Phaha_Package/src/app/my-package/list-package/list-package.component.scss b/Phaha_Package/src/app/my-package/list-package/list-package.component.scss
new file mode 100644
index 0000000..5564960
--- /dev/null
+++ b/Phaha_Package/src/app/my-package/list-package/list-package.component.scss
@@ -0,0 +1,219 @@
+app-list-package {
+  .breadcrumb {
+    padding-top: 13px;
+
+    a {
+      text-decoration: none;
+      color: #000;
+    }
+  }
+
+  .responsive {
+    width: 100%;
+    height: auto;
+  }
+
+  .new-item {
+    padding-top: 10px;
+    padding-bottom: 10px;
+
+    &:hover {
+      background: #efefef;
+    }
+  }
+
+  .box-editor {
+    padding: 10px;
+
+    .editor-item {
+      text-align: center;
+      cursor: pointer;
+      margin: auto;
+
+      .editor-item-cus {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        height: 100%;
+      }
+
+      .img-avatar {
+        width: 100%;
+        object-fit: cover;
+        overflow: hidden;
+        border-radius: 5px;
+        box-shadow: 0 0 4px #999;
+        margin: 0 auto;
+        border-radius: 5px;
+        position: relative;
+
+        img {
+          transition: transform 0.6s;
+
+          &:hover {
+            transform: scale(1.1);
+          }
+        }
+      }
+
+      &:hover,
+      &.active {
+        background: #eee;
+      }
+    }
+
+    .link-name {
+      font-weight: 600;
+      font-size: 14px;
+      margin-top: 10px;
+    }
+  }
+
+  .my-package-header {
+    font-weight: 600;
+    margin-bottom: 10px;
+    text-transform: uppercase;
+    border-bottom: 1px solid #bbb;
+    cursor: pointer;
+
+    span {
+      font-size: 20px;
+      border-bottom: 3px solid #fcaf17;
+      padding-bottom: 2px;
+    }
+  }
+
+  .my-package-news {
+    padding: 0 10px;
+
+    .new-title {
+      a {
+        font-size: 20px;
+        text-decoration: none;
+        color: #222;
+
+        &:hover {
+          color: #fcaf17;
+        }
+      }
+    }
+
+    .new-date {
+      color: #888;
+    }
+  }
+
+  .new-image {
+    overflow: hidden;
+    max-height: 150px;
+    border-radius: 5px;
+
+    img {
+      transition: transform 0.6s;
+
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  .page-item.active .page-link {
+    background-color: #fcaf17;
+    border: #fcaf17;
+    color: #fff !important;
+    width: 35px;
+    height: 35px;
+    text-align: center;
+  }
+
+  .page-item {
+    margin: 0 3px !important;
+    border-radius: 50% !important;
+
+    a {
+      border: none !important;
+      color: #222 !important;
+    }
+  }
+
+  .page-item a.page-link {
+    border-radius: 50%;
+  }
+
+  .page-item:last-child .page-link {
+    border-top-right-radius: 50% !important;
+    border-bottom-right-radius: 50% !important;
+  }
+
+  .page-link:focus {
+    box-shadow: none !important;
+  }
+
+
+  .page-link {
+    width: 35px !important;
+    line-height: 25px !important;
+    text-align: center;
+    padding-top: 7px !important;
+  }
+
+  .page-item:first-child .page-link {
+    border-top-left-radius: 50% !important;
+    border-bottom-left-radius: 50% !important;
+  }
+
+  .page-link:hover {
+    width: 35px;
+    height: 35px;
+    text-align: center;
+  }
+
+  .btn-view-book,
+  .btn-add-user {
+    i {
+      font-size: 20px;
+      color: #e09500;
+    }
+  }
+
+  .btn-publisher {
+    border: 1px solid #6C757D;
+    border-radius: 50px;
+    margin-right: 10px;
+  }
+
+  .btn-publisher:hover {
+    background: #FFE7B8;
+    border-radius: 50px;
+    border: 1px solid #FFE7B8;
+    color: #E09500;
+  }
+
+  .notifi-notpackage {
+    font-size: 12px !important;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    background: #fcaf17;
+    padding: 2px 10px;
+    border-top-left-radius: 5px;
+    color: #fff;
+  }
+
+  @media only screen and (max-width: 768px) {
+    .new-title {
+      padding-top: 10px;
+    }
+
+    .new-content {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 4;
+      -webkit-box-orient: vertical;
+      line-height: 20px;
+      height: 80px;
+    }
+  }
+
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/my-package/list-package/list-package.component.ts b/Phaha_Package/src/app/my-package/list-package/list-package.component.ts
new file mode 100644
index 0000000..de79bc8
--- /dev/null
+++ b/Phaha_Package/src/app/my-package/list-package/list-package.component.ts
@@ -0,0 +1,80 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { PageModel } from "../../Models/model";
+import { environment } from "../../../environments/environment";
+import { MyPackageService } from "../my-package.service";
+import { ActivatedRoute, Router } from "@angular/router";
+import { PackageService } from "../../package/package.service";
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-list-package',
+  templateUrl: './list-package.component.html',
+  styleUrls: ['./list-package.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class ListPackageComponent implements OnInit {
+  public idPackage: number = 0;
+  public news: PageModel = new PageModel();
+  public baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  public package: any;
+  public fileName: any;
+  constructor(
+    private _myPackage: MyPackageService,
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
+    private _packageService: PackageService,
+    private _ngbModal: NgbModal,
+  ) {
+    this.activatedRoute.params.subscribe(params => {
+      this.idPackage = params['id'];
+    });
+
+    this.news.pageSize = 5;
+  }
+
+  ngOnInit(): void {
+    this._ngbModal.dismissAll('');
+    this.onGetDetailPackage();
+  }
+
+  onGetNews() {
+    this._myPackage.onGetNewsByPackage(this.package.packageId, this.news.page, this.news.pageSize)
+      .subscribe(data => {
+        if (data.success == true) {
+          this.news.result = data.data.result;
+          this.news.firstItemOnPage = data.data.result;
+          this.news.totalRecords = data.data.totalItemCount;
+        } else {
+          this.router.navigate(['chi-tiet-goi', this.package.packageId]);
+        }
+      });
+  }
+
+  onGetDetailPackage() {
+    this._packageService.getDetailPackageOfUser(this.idPackage)
+      .subscribe(data => {
+        this.package = data.data;
+        this.onGetNews();
+      });
+  }
+
+  onPageChange(numberPage: any) {
+    this.news.page = numberPage;
+    this.onGetNews();
+  }
+
+  getViewPdf(e: any) {
+    if (e.pathPdf.length > 0) {
+      this.fileName = e.pathPdf[0].pathPdf.replace(/^.*[\\\/]/, '');
+      this.fileName = this.fileName.replace('.pdf', '')
+      this.router.navigate(['view', e.id], {
+        queryParams: {
+          id: e.pathPdf[0].idPath,
+          fileName: this.fileName
+        }
+      })
+    } else {
+      this.router.navigate(['view', e.id])
+    }
+  }
+}
diff --git a/Phaha_Package/src/app/my-package/my-package.component.html b/Phaha_Package/src/app/my-package/my-package.component.html
new file mode 100644
index 0000000..eb4bda6
--- /dev/null
+++ b/Phaha_Package/src/app/my-package/my-package.component.html
@@ -0,0 +1,157 @@
+<block-ui></block-ui>
+<div *ngIf="!checkHasPackage" class="notification-not-buy text-center box-body">
+  {{'my-package.noti-not-subscript' | translate}}
+</div>
+<div class="package-buyed box-body" *ngIf="checkHasPackage">
+  <header class="my-package-header" routerLink="/my-package" *ngIf="!isHome">
+    <span>{{'my-package.packages-purchased' | translate}}</span>
+  </header>
+  <div class="search-condition d-flex mb-2">
+    <button [ngClass]="{'active': this.typeCondition=== 1}" (click)="getPackageByUser(1)" type="button"
+      class="btn btn-outline-warning">{{'package-type.pdf' | translate}} ({{totalListByType.totalPdf}})
+    </button>
+  </div>
+  <app-askonomy-default></app-askonomy-default>
+  <div class="show-package-expired">
+    <input id="showPackageExpired" type="checkbox" [(ngModel)]="showPackageExpired">
+    <label for="showPackageExpired">{{'package-type.showPackageExpired' | translate}}</label>
+  </div>
+  <div class="content-custom">
+    <ng-container *ngFor="let item of package; let index = index">
+      <div class="box-editor" *ngIf="!item.isPackage || item.isExpire || (!item.isExpire && showPackageExpired)">
+        <div class="row">
+          <div class="col-md-2 col-12">
+            <div class="editor-item">
+              <a [routerLink]="item.isPackage ? '/list-news/' + item.id : '/view/' + item.packageId">
+                <div class="editor-item-cus">
+                  <div class="package-register-img">
+                    <img [src]="baseUrl + item.image" class="responsive">
+                  </div>
+                </div>
+              </a>
+            </div>
+          </div>
+          <div class="col-md-3 col-12">
+            <div class="link-name">
+              <h4>{{item.packageName}}</h4>
+            </div>
+            <div *ngIf="item.isPackage">
+              {{'my-package.there-are' | translate}} {{item.totalNews}} {{'my-package.newspaper' | translate}}
+            </div>
+            <div>
+              <span *ngIf="item.isPackage && item.isCreated" style="color: blue;">
+                ({{'my-package.status.subscriber' | translate}})
+              </span>
+              <span *ngIf="item.isPackage && !item.isCreated" style="color: green;">
+                ({{'my-package.status.reader' | translate}})
+              </span>
+              <span *ngIf="item.isPackage && item.isTrial" style="color: red;">
+                ({{'my-package.status.trial' | translate}})
+              </span>
+              <span *ngIf="item.isPackage && !item.isExpire" style="color: red;">
+                ({{'my-package.status.expired' | translate}})
+              </span>
+            </div>
+            <div *ngIf="item.isPackage">{{'my-package.duration' | translate}}: {{'my-package.con' | translate}}
+              {{item.totalDate > 0 ? item.totalDate : 0}} {{'my-package.day' | translate}}</div>
+          </div>
+          <div class="col-md-3 col-12">
+            <div class="btn-publisher-group">
+              <span *ngFor="let editorial of item.editorials">
+                <button type="button" routerLink="/{{editorial.slug}}"
+                  class="btn btn-publisher">{{editorial.name}}</button>
+              </span>
+            </div>
+          </div>
+          <div class="col-md-2 col-12">
+            <div class="info-package" *ngIf="item.isPackage">
+              <div>{{'my-package.amount' | translate}}: {{item.total}}</div>
+              <div>{{'my-package.granted' | translate}}: {{item.allocated}}</div>
+              <div>{{'my-package.can-grant' | translate}}: {{item.total - item.allocated}}</div>
+            </div>
+          </div>
+          <div class="col-md-2 col-12">
+            <div class="button-group">
+              <div class="text-end">
+                <button *ngIf="item.isPackage" type="button" routerLink="/list-news/{{item.id}}"
+                  class="btn btn-view-book">
+                  <i class="uil uil-book-open"></i>
+                  <span>{{'cta.read' | translate}}</span>
+                </button>
+                <button *ngIf="!item.isPackage" type="button" routerLink="/view/{{item.packageId}}"
+                  class="btn btn-view-book">
+                  <i class="uil uil-book-open"></i>
+                  <span>{{'cta.read' | translate}}</span>
+                </button>
+              </div>
+              <div class="text-end" *ngIf="item.isPackage && !item.isExpire">
+                <button type="button" class="btn btn-register" routerLink="/package-pay/{{item.packageId}}">
+                  <i class="uil uil-file-redo-alt"></i>
+                  <span>{{'cta.re-register' | translate}}</span>
+                </button>
+              </div>
+              <div class="text-end" *ngIf="item.hasUpgrade">
+                <button type="button" class="btn btn-register" routerLink="/package-upgrade/{{item.packageId}}/{{item.id}}">
+                  <i class="uil uil-cloud-upload"></i>
+                  <span>{{'cta.upgrade' | translate}}</span>
+                </button>
+              </div>
+              <div class="text-end" *ngIf="item.isPackage && !item.isExpire">
+                <button type="button" class="btn btn-delete" (click)="onDeletePackage(item);">
+                  <i class="uil uil-trash-alt"></i>
+                  <span>{{'cta.cancel' | translate}}</span>
+                </button>
+              </div>
+              <div class="text-end" *ngIf="item.total > 1 && item.isCreated && item.isExpire">
+                <button type="button" class="btn btn-add-user" routerLink="/add-user/{{item.id}}">
+                  <i class="uil uil-user-plus"></i>
+                  <span>{{'cta.add-reader' | translate}}</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ng-container>
+  </div>
+  <ng-container *ngIf="package.length === 0" [ngSwitch]="typeCondition">
+    <div *ngSwitchCase="1" class="text-not-buy text-center">
+      {{'my-package.message.message-buy-package-by-office' | translate}}
+      <a class="cursor-poitert" (click)="onClickRegisterPackage(2,1)">{{'cta.register' | translate}}</a>
+      {{'cta.buy2' | translate}}
+    </div>
+    <div *ngSwitchCase="2" class="text-not-buy text-center">
+      {{'my-package.message.message-buy-package-by-author' | translate}}
+      <a class="cursor-poitert" (click)="onClickRegisterPackage(2,2)">{{'cta.register' | translate}}</a>
+      {{'cta.buy2' | translate}}
+    </div>
+    <div *ngSwitchCase="3" class="text-not-buy text-center">
+      {{'my-package.message.message-buy-package-by-category' | translate}}
+      <a class="cursor-poitert" (click)="onClickRegisterPackage(2,3)">{{'cta.register' | translate}}</a>
+      {{'cta.buy2' | translate}}
+    </div>
+    <div *ngSwitchCase="4" class="text-not-buy text-center">
+      {{'my-package.message.message-buy-package-by-event' | translate}}
+      <a class="cursor-poitert" (click)="onClickRegisterPackage(2,4)">{{'cta.register' | translate}}</a>
+      {{'cta.buy2' | translate}}
+    </div>
+  </ng-container>
+</div>
+<!-- <div class="newspaper-relative box-body" *ngIf="lstSuggestions.result.length > 0">
+  <header class="my-package-header" routerLink="/my-package">
+    <span>{{'my-package.care' | translate}}</span>
+  </header>
+  <div class="row">
+    <ng-container *ngFor="let itemPackage of lstSuggestions.result">
+      <div class="col-md-3 col-12 mb-3">
+        <app-askonomy-hot *ngIf="itemPackage.isAskonomy" [item]="itemPackage"></app-askonomy-hot>
+        <app-package-item *ngIf="!itemPackage.isAskonomy" [item]="itemPackage"></app-package-item>
+      </div>
+    </ng-container>
+  </div>
+  <div class="justify-content-end pagination mt-4">
+    <ngb-pagination [collectionSize]="lstSuggestions.totalRecords" [(page)]="lstSuggestions.page" [maxSize]="3"
+      [rotate]="true" [pageSize]="lstSuggestions.pageSize" (pageChange)="onPageChange($event, 1)">
+    </ngb-pagination>
+  </div>
+</div> -->
\ No newline at end of file
diff --git a/Phaha_Package/src/app/my-package/my-package.component.scss b/Phaha_Package/src/app/my-package/my-package.component.scss
new file mode 100644
index 0000000..43ceef8
--- /dev/null
+++ b/Phaha_Package/src/app/my-package/my-package.component.scss
@@ -0,0 +1,544 @@
+app-my-package {
+  .newspaper-relative {
+    padding-top: 40px;
+  }
+
+  .content-custom {
+    max-height: 460px;
+    overflow: auto;
+  }
+
+  .remove-border {
+    border: none !important;
+  }
+
+  .breadcrumb {
+    padding-top: 15px;
+
+    a {
+      text-decoration: none;
+      color: #222;
+      font-weight: 600;
+    }
+  }
+
+  .responsive {
+    width: 100%;
+  }
+
+  .new-item {
+    padding-top: 10px;
+    padding-bottom: 10px;
+
+    &:hover {
+      background: #fff;
+    }
+  }
+
+  .box-editor {
+    border-bottom: 1px solid #efefef;
+    padding: 10px;
+
+    .editor-item {
+      text-align: center;
+      cursor: pointer;
+      max-width: 100px;
+      margin: auto;
+
+      .editor-item-cus {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        height: 100%;
+      }
+
+      .package-register-img {
+        // width: 100%;
+        object-fit: cover;
+        overflow: hidden;
+        border-radius: 5px;
+        box-shadow: 0 0 4px #999;
+        margin: 0 auto;
+        position: relative !important;
+
+        img {
+          transition: transform 0.6s;
+
+          &:hover {
+            transform: scale(1.1);
+          }
+        }
+      }
+
+      .link-name {
+        font-weight: 600;
+        font-size: 14px;
+        margin-top: 10px;
+      }
+
+      &:hover,
+      &.active {
+        background: #eee;
+      }
+    }
+
+    &:hover {
+      background: #efefef;
+    }
+  }
+
+  .my-package-header {
+    font-weight: 600;
+    margin-bottom: 20px;
+    text-transform: uppercase;
+    border-bottom: 1px solid #bbb;
+    cursor: pointer;
+
+    span {
+      font-size: 20px;
+      border-bottom: 3px solid #fcaf17;
+      padding-bottom: 2px;
+    }
+  }
+
+  .box-content {
+    padding: 0 16px;
+  }
+
+  .new-title {
+    a {
+      font-size: 20px;
+      text-decoration: none;
+      color: #222;
+
+      &:hover {
+        color: #fcaf17;
+      }
+    }
+  }
+
+  .new-date {
+    color: #888;
+  }
+
+  .new-image {
+    overflow: hidden;
+    max-height: 150px;
+
+    img {
+      transition: transform 0.6s;
+
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  .page-item.active .page-link {
+    background-color: #fcaf17;
+    border: #fcaf17;
+    color: #fff !important;
+    width: 35px;
+    text-align: center;
+    padding-top: 7px !important;
+  }
+
+  .page-item {
+    margin: 0 3px !important;
+    border-radius: 50% !important;
+
+    a {
+      border: none !important;
+      color: #222 !important;
+    }
+  }
+
+  .page-item a.page-link {
+    border-radius: 50%;
+  }
+
+  .page-item:last-child .page-link {
+    border-top-right-radius: 50% !important;
+    border-bottom-right-radius: 50% !important;
+  }
+
+  .page-link:focus {
+    box-shadow: none !important;
+  }
+
+  .page-item:first-child .page-link {
+    border-top-left-radius: 50% !important;
+    border-bottom-left-radius: 50% !important;
+  }
+
+  .page-link:hover {
+    width: 35px;
+    height: 35px;
+    text-align: center;
+    padding-top: 7px !important;
+  }
+
+  .btn-view-book,
+  .btn-add-user,
+  .btn-register,
+  .btn-delete {
+    display: flex;
+    justify-content: space-evenly;
+    width: 140px;
+    background: #e09500;
+    margin-bottom: 5px;
+    padding: 0;
+
+    i {
+      font-size: 20px;
+      color: #fff;
+    }
+
+    span {
+      line-height: 30px;
+      color: #fff;
+      font-weight: 600;
+    }
+  }
+
+  .btn-register {
+    background: #43d39e;
+  }
+
+  .btn-delete {
+    background: #ff5c75;
+  }
+
+  .btn-publisher {
+    border: 1px solid #87ceeb;
+    border-radius: 50px;
+    margin-right: 10px;
+    background-color: #87ceeb;
+    color: #ffff;
+  }
+
+  .btn-publisher:hover {
+    background: #ffe7b8;
+    border-radius: 50px;
+    border: 1px solid #ffe7b8;
+    color: #e09500;
+  }
+
+  .cursor-poitert:hover {
+    cursor: pointer !important;
+  }
+
+  .custom-radio:checked+label,
+  .custom-radio:not(:checked)+label {
+    position: relative;
+    padding-left: 28px;
+    cursor: pointer;
+    line-height: 20px;
+    display: inline-block;
+    color: #666;
+    margin: 0 12px;
+  }
+
+  .custom-radio:checked+label:before,
+  .custom-radio:not(:checked)+label:before {
+    content: "";
+    position: absolute;
+    left: 1px;
+    top: 1px;
+    width: 18px;
+    height: 18px;
+    border: 1px solid #ddd;
+    border-radius: 100%;
+    background: #fff;
+  }
+
+  .form-check-input:checked {
+    background-color: #ffa900;
+    border-color: #ffa900;
+  }
+
+  .custom-radio:not(:checked)+label:after {
+    opacity: 0;
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+
+  .custom-radio:checked+label:after {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+
+  .custom-radio:checked+label:after,
+  .custom-radio:not(:checked)+label:after {
+    content: "";
+    width: 12px;
+    height: 12px;
+    background: #ffa900;
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    border-radius: 100%;
+    -webkit-transition: all 0.2s ease;
+    transition: all 0.2s ease;
+  }
+
+  .custom-radio {
+    display: none !important;
+  }
+
+  @media only screen and (max-width: 768px) {
+    .new-title {
+      padding-top: 10px;
+    }
+
+    .link-name {
+      margin-top: 10px !important;
+    }
+
+    .search-condition {
+      display: contents !important;
+
+      button {
+        margin-right: 6px !important;
+      }
+    }
+
+    .new-content {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 4;
+      -webkit-box-orient: vertical;
+      line-height: 20px;
+      height: 80px;
+    }
+
+    .info-package {
+      margin-top: 10px;
+
+      &>div {
+        margin-bottom: 5px;
+      }
+    }
+
+    .button-group {
+      text-align: center;
+    }
+
+    .box-editor {
+      .editor-item {
+        max-width: 100% !important;
+      }
+
+      .button-group {
+        display: flex;
+        justify-content: space-around;
+      }
+    }
+  }
+
+  .text-not-buy {
+    font-size: 16px;
+
+    a {
+      font-size: 18px !important;
+      text-decoration: underline !important;
+      font-weight: 600;
+      color: #000 !important;
+    }
+  }
+
+  .search-condition {
+    button {
+      margin-right: 15px;
+      margin-bottom: 10px !important;
+    }
+  }
+
+  .btn-outline-warning.active {
+    color: #ffff;
+  }
+
+  .btn-outline-warning:hover {
+    color: #ffff;
+  }
+
+  .btn-outline-warning {
+    border: none !important;
+    color: #222;
+    font-weight: 600;
+    background: #efefef;
+  }
+
+  .notifi-notpackage {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    background: #fcaf17;
+    padding: 2px 10px;
+    border-top-left-radius: 5px;
+    color: #fff;
+  }
+
+  .page-item.active .page-link {
+    background-color: #fcaf17;
+    border: #fcaf17;
+    color: #fff !important;
+    width: 35px;
+    text-align: center;
+    padding-top: 7px !important;
+  }
+
+  .page-item {
+    margin: 0 3px !important;
+    border-radius: 50% !important;
+
+    a {
+      border: none !important;
+      color: #222 !important;
+    }
+  }
+
+  .page-item a.page-link {
+    border-radius: 50%;
+  }
+
+  .page-item:last-child .page-link {
+    border-top-right-radius: 50% !important;
+    border-bottom-right-radius: 50% !important;
+  }
+
+  .page-link:focus {
+    box-shadow: none !important;
+  }
+
+  .page-item:first-child .page-link {
+    border-top-left-radius: 50% !important;
+    border-bottom-left-radius: 50% !important;
+  }
+
+  .page-link:hover {
+    width: 35px;
+    height: 35px;
+    text-align: center;
+  }
+
+  .page-link {
+    width: 35px !important;
+    line-height: 25px !important;
+    text-align: center;
+    padding-top: 7px !important;
+  }
+
+  .my-package-news {
+    .img-thumbnail {
+      padding: 0.25rem;
+      background-color: #fff;
+      border: 1px solid #dee2e6;
+      border-radius: 0.25rem;
+      max-width: 100%;
+      height: auto;
+      margin-top: 15px !important;
+    }
+
+    .image-news {
+      overflow: hidden !important;
+      width: 100%;
+
+      a {
+        img {
+          height: 100%;
+          width: 100%;
+          object-fit: cover;
+          transition: transform 0.6s;
+        }
+
+        img:hover {
+          transform: scale(1.1);
+        }
+      }
+    }
+
+    .image-package-detail {
+      overflow: hidden !important;
+      width: 100%;
+      position: relative;
+
+      img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        transition: transform 0.6s;
+      }
+
+      img:hover {
+        transform: scale(1.1);
+      }
+    }
+
+    .image-news-detail {
+      overflow: hidden !important;
+      width: 140px;
+      height: 100px;
+      position: relative;
+      border-radius: 5px;
+
+      img {
+        width: 100%;
+        transition: transform 0.6s;
+
+        &:hover {
+          transform: scale(1.1);
+        }
+      }
+    }
+
+    .content-news-right {
+      width: 100%;
+      padding: 0 15px;
+    }
+  }
+
+  .notification-not-buy {
+    font-weight: bold;
+    font-size: 20px;
+  }
+
+  .show-package-expired {
+    display: flex;
+
+    label {
+      margin-left: 10px;
+      cursor: pointer;
+    }
+  }
+
+  .pack-askonomy {
+    background: #efefef;
+
+    .package-register-img {
+      img {
+        max-width: 100%;
+      }
+    }
+
+    .link-name {
+      h4 {
+        padding-top: 10px;
+
+        a {
+          text-decoration: none;
+          font-size: 1.5rem;
+          color: #222;
+        }
+      }
+    }
+  }
+}
+
+
+.askonomy-hdsd{
+  font-weight: 600;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/my-package/my-package.component.ts b/Phaha_Package/src/app/my-package/my-package.component.ts
new file mode 100644
index 0000000..5d53602
--- /dev/null
+++ b/Phaha_Package/src/app/my-package/my-package.component.ts
@@ -0,0 +1,169 @@
+import { Component, EventEmitter, Input, OnInit, Output, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { MyPackageService } from "./my-package.service";
+import { environment } from "../../environments/environment";
+import { PageModel } from '../Models/model';
+import { ActivatedRoute, Router } from "@angular/router";
+import { Title } from '@angular/platform-browser';
+import Swal from 'sweetalert2';
+import { ToastrService } from 'ngx-toastr';
+import { TranslateService } from '@ngx-translate/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-my-package',
+  templateUrl: './my-package.component.html',
+  styleUrls: ['./my-package.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class MyPackageComponent implements OnInit {
+  public package: any = [];
+  public news: PageModel = new PageModel();
+  public baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  public idPackage: number = 0;
+  @Input() isHome: boolean = false;
+  @Output() onActiveNavs = new EventEmitter<any>();
+  public typeCondition: number = 1;
+  public lstSuggestions: PageModel = new PageModel();
+  public isLogin: boolean = false;
+  public checkMobile: boolean = false;
+  public target = 'target';
+  public currentUser: any;
+  public checkHasPackage = false;
+  public showPackageExpired = false;
+  private i18n: any;
+  urlAskonomy = environment.urlAskonomy;
+
+  public totalListByType: any = {
+    totalAuthor: 0,
+    totalCategory: 0,
+    totalEvent: 0,
+    totalPdf: 0
+  };
+  constructor(
+    private readonly _myPackage: MyPackageService,
+    private readonly _router: Router,
+    private readonly _activatedRoute: ActivatedRoute,
+    private readonly _toastrService: ToastrService,
+    private readonly _translate: TranslateService,
+    private readonly _modalService: NgbModal,
+  ) {
+    this.onGetI18n();
+    this._activatedRoute.params.subscribe(params => {
+      this.idPackage = params['id'];
+    });
+    this.currentUser = JSON.parse(localStorage.getItem("currentCustomer") ?? "{}");
+    if (typeof (this.currentUser) === 'object' && this.currentUser.jwtToken) {
+      this.isLogin = true;
+    }
+    this.lstSuggestions.pageSize = 4;
+    this.news.pageSize = 4;
+    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+      this.checkMobile = true;
+    } else {
+      this.checkMobile = false;
+    }
+  }
+
+  getPackageByUser(type: number) {
+    this.typeCondition = type;
+    this._myPackage.getPackageByUser(this.typeCondition)
+      .subscribe(data => {
+        this.package = data.data;
+        this.onGetListSuggestByPackage(type);
+        this.onGetListTotalByType();
+      });
+  }
+
+  onGetListSuggestByPackage(type: number) {
+    this._myPackage
+      .getListSuggestion(this.lstSuggestions, type)
+      .subscribe(data => {
+        this.lstSuggestions.result = data.data.result;
+        this.lstSuggestions.totalRecords = data.data.totalItemCount;
+      });
+  }
+
+  onClickRegisterPackage(idTab: number, idOpenTabChild: any) {
+    if (!this.isHome) {
+      this._router.navigate(['/'], { queryParams: { nextId: idTab, idTabChild: idOpenTabChild } }).then(() => {
+      });
+    } else {
+      this.onActiveNavs.emit({ nextId: idTab, idTabChild: idOpenTabChild });
+    }
+  }
+
+  onGetNews() {
+    this._myPackage.onGetNews(this.idPackage, this.news.page, this.news.pageSize)
+      .subscribe(data => {
+        this.news.result = data.data.result;
+        this.news.firstItemOnPage = data.data.firstItemOnPage;
+        this.news.totalRecords = data.data.totalItemCount;
+      });
+  }
+
+  onPageChange(numberPage: any, type: number) {
+    if (type == 2) {
+      this.news.page = numberPage;
+      this.onGetNews();
+    }
+    if (type == 1) {
+      this.lstSuggestions.page = numberPage;
+      this.onGetListSuggestByPackage(this.typeCondition);
+    }
+  }
+
+  onGetListTotalByType() {
+    this._myPackage.getListTotalByType()
+      .subscribe(data => {
+        this.totalListByType = data.data
+        if (this.totalListByType.totalAuthor > 0 || this.totalListByType.totalCategory > 0 || this.totalListByType.totalEvent > 0 || this.totalListByType.totalPdf > 0 || this.totalListByType.totalTidding > 0)
+          this.checkHasPackage = true;
+      });
+  }
+
+  onDeletePackage(item: any) {
+    Swal.fire({
+      title: this.i18n.sweetAlert.delete.title,
+      text: this.i18n.sweetAlert.delete.text,
+      icon: 'warning',
+      showCancelButton: true,
+      confirmButtonColor: '#3085d6',
+      cancelButtonColor: '#d33',
+      cancelButtonText: this.i18n.sweetAlert.cancelButtonColor,
+      confirmButtonText: this.i18n.sweetAlert.confirmButtonText,
+      customClass: {
+        confirmButton: 'btn btn-primary',
+        cancelButton: 'btn btn-danger ml-1'
+      }
+    }).then((result: { isConfirmed: any; }) => {
+      if (result.isConfirmed) {
+        this._myPackage.onDeletePackage(item.id)
+          .subscribe(data => {
+            this._toastrService.success(this.i18n.toastr.textDeleteSuccess, this.i18n.toastr.titleSuccess, {
+              timeOut: 2000,
+            });
+
+            this.getPackageByUser(this.typeCondition);
+          });
+      }
+    });
+  }
+
+  checkAskonomy(){
+    this._toastrService.success(this.i18n.detail, this.i18n.message, {
+      timeOut: 2000,
+    });
+  }
+
+  onGetI18n() {
+    this._translate.get('myPackage').subscribe(data => {
+      this.i18n = data;
+    });
+  }
+
+  ngOnInit(): void {
+      this.getPackageByUser(1);
+      if (!this.isHome)
+        this.onGetNews();
+  }
+}
diff --git a/Phaha_Package/src/app/my-package/my-package.module.ts b/Phaha_Package/src/app/my-package/my-package.module.ts
new file mode 100644
index 0000000..eed07a4
--- /dev/null
+++ b/Phaha_Package/src/app/my-package/my-package.module.ts
@@ -0,0 +1,47 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {MyPackageComponent} from "./my-package.component";
+import {NgbModule, NgbNavModule} from "@ng-bootstrap/ng-bootstrap";
+import {BrowserModule} from "@angular/platform-browser";
+import { RouterModule } from '@angular/router';
+import { ListPackageComponent } from './list-package/list-package.component';
+import { AddUserComponent } from './add-user/add-user.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BlockUIModule } from 'ng-block-ui';
+import { SwiperModule } from 'swiper/angular';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClient } from '@angular/common/http';
+import { PackageCodeComponent } from './package-code/package-code.component';
+import { PackageAskonomyModule } from '../package/package-askonomy/package-askonomy.module';
+import { PackagesModule } from '../modules/packages/packages.module';
+
+@NgModule({
+  declarations: [MyPackageComponent, ListPackageComponent, AddUserComponent, PackageCodeComponent],
+  imports: [
+    CommonModule,
+    NgbModule,
+    NgbNavModule,
+    BrowserModule,
+    RouterModule,
+    PackagesModule,
+    FormsModule,
+    ReactiveFormsModule,
+    BlockUIModule.forRoot(),
+    SwiperModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    }),
+    PackageAskonomyModule
+  ],
+  exports: [
+    MyPackageComponent,
+    PackageCodeComponent
+  ]
+})
+export class MyPackageModule {
+}
diff --git a/Phaha_Package/src/app/my-package/my-package.service.ts b/Phaha_Package/src/app/my-package/my-package.service.ts
new file mode 100644
index 0000000..420e6bd
--- /dev/null
+++ b/Phaha_Package/src/app/my-package/my-package.service.ts
@@ -0,0 +1,76 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from "@angular/common/http";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MyPackageService {
+
+  constructor(
+    private _httpClient: HttpClient,
+  ) {
+  }
+
+  getPackageByUser(type?: number) {
+    let params = new HttpParams();
+    if (type) {
+      params = params.append('type', type);
+    }
+    return this._httpClient.get<any>(`/package/by-user`, { params });
+  }
+
+  onGetNews(packageId: number, page: number, pageSize: number) {
+    let params = new HttpParams();
+    if (packageId !== undefined) {
+      params = params.append('packageId', packageId);
+    }
+    params = params.append('page', page);
+    params = params.append('pageSize', pageSize);
+    return this._httpClient.get<any>(`/package/news-by-user`, { params });
+  }
+
+  onGetNewsByPackage(packageId: number, page: number, pageSize: number) {
+    let params = new HttpParams();
+    if (packageId !== undefined) {
+      params = params.append('packageId', packageId);
+    }
+    params = params.append('page', page);
+    params = params.append('pageSize', pageSize);
+    return this._httpClient.get<any>(`/newspaper/news-by-package`, { params });
+  }
+
+  addUser(model: any) {
+    return this._httpClient.post<any>(`/package/allocate`, model);
+  }
+
+  getUser(id: number) {
+    let params = new HttpParams();
+    params = params.append('packageId', id);
+
+    return this._httpClient.get<any>(`/package/get-user-of-package`, { params });
+  }
+
+  deleteUser(packageId: number, userId: number) {
+    let params = new HttpParams();
+    params = params.append('packageId', packageId);
+    params = params.append('userId', userId);
+
+    return this._httpClient.delete<any>(`/package/delete-user-of-package`, { params });
+  }
+
+  getListSuggestion(pageModel: any, type: number) {
+    let params = new HttpParams();
+    params = params.append('type', type);
+    params = params.append('page', pageModel.page);
+    params = params.append('pageSize', pageModel.pageSize);
+    return this._httpClient.get<any>(`/package/suggest`, { params });
+  }
+
+  getListTotalByType() {
+    return this._httpClient.get<any>(`/package/total-by-type`);
+  }
+
+  onDeletePackage(packageUserId: number) {
+    return this._httpClient.delete<any>(`/package/delete/${packageUserId}`);
+  }
+}
diff --git a/Phaha_Package/src/app/my-package/package-code/package-code.component.html b/Phaha_Package/src/app/my-package/package-code/package-code.component.html
new file mode 100644
index 0000000..fa831a1
--- /dev/null
+++ b/Phaha_Package/src/app/my-package/package-code/package-code.component.html
@@ -0,0 +1,14 @@
+<div class="pt-3" id="packageCode">
+    <form [formGroup]="formData" class="g-3" id="frmPackageCode" (ngSubmit)="onSubmit()">
+        <input type="text" formControlName="code" class="form-control" placeholder="Nhập mã code..."
+            maxlength="200"
+            [ngClass]="{ 'is-valid': isSubmit && f['code'].valid , 'is-invalid': isSubmit && f['code'].invalid }">
+        <div *ngIf="isSubmit && f['code'].errors" class="invalid-feedback"
+            [ngClass]="{ 'd-block': isSubmit && f['code'].errors }">
+            <div *ngIf="f['code'].errors['required']" class="error-notification">
+                Mã khuyến mại không được để trống!
+            </div>
+        </div>
+        <button type="submit" class="btn btn-primary">Đồng ý</button>
+    </form>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/my-package/package-code/package-code.component.scss b/Phaha_Package/src/app/my-package/package-code/package-code.component.scss
new file mode 100644
index 0000000..b0e956b
--- /dev/null
+++ b/Phaha_Package/src/app/my-package/package-code/package-code.component.scss
@@ -0,0 +1,29 @@
+#packageCode {
+    min-height: 40vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    #frmPackageCode {
+        width: 100%;
+        max-width: 500px;
+        padding: 30px;
+        box-shadow: 0px 0px 5px #eee;
+        border-radius: 5px;
+        background: #efefef;
+        button {
+            width: 100%;
+            margin-top: 20px;
+            line-height: 40px;
+            font-size: 20px;
+            text-transform: uppercase;
+            background: #fcaf17;
+            border: none;
+            font-weight: 600;
+        }
+        input {
+            line-height: 50px;
+            padding: 0 20px;
+            font-size: 20px;
+        }
+    }
+}
diff --git a/Phaha_Package/src/app/my-package/package-code/package-code.component.ts b/Phaha_Package/src/app/my-package/package-code/package-code.component.ts
new file mode 100644
index 0000000..ca923f7
--- /dev/null
+++ b/Phaha_Package/src/app/my-package/package-code/package-code.component.ts
@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
+import { PackageCodeService } from './package-code.service';
+
+@Component({
+  selector: 'app-package-code',
+  templateUrl: './package-code.component.html',
+  styleUrls: ['./package-code.component.scss']
+})
+export class PackageCodeComponent implements OnInit {
+  formData: FormGroup;
+  private packageId: number = 0;
+  isSubmit: boolean = false;
+
+  constructor(
+    private _formBuilder: FormBuilder,
+    private _packageCodeService: PackageCodeService,
+    private _router: Router,
+    private _toastrService: ToastrService,
+  ) {
+    this.formData = this._formBuilder.group({
+      code: [null, [Validators.required]],
+    });
+  }
+
+  get f() {
+    return this.formData.controls;
+  }
+
+  onSubmit() {
+    this.isSubmit = true;
+    if (this.formData.invalid) {
+      return;
+    }
+
+    this._packageCodeService
+      .onAccessCode(this.formData.value.code)
+      .subscribe(result => {
+        this.packageId = result.id;
+        this._router.navigate([`/list-news/${this.packageId}`]);
+      });
+  }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/my-package/package-code/package-code.service.ts b/Phaha_Package/src/app/my-package/package-code/package-code.service.ts
new file mode 100644
index 0000000..dbc8b4d
--- /dev/null
+++ b/Phaha_Package/src/app/my-package/package-code/package-code.service.ts
@@ -0,0 +1,16 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PackageCodeService {
+
+  constructor(
+    private _httpClient: HttpClient,
+  ) { }
+
+  onAccessCode(code: string) {
+    return this._httpClient.post<any>(`/package/access-code/${code}`, {});
+  }
+}
diff --git a/Phaha_Package/src/app/package-history/package-history.component.html b/Phaha_Package/src/app/package-history/package-history.component.html
new file mode 100644
index 0000000..d62717f
--- /dev/null
+++ b/Phaha_Package/src/app/package-history/package-history.component.html
@@ -0,0 +1,13 @@
+<div class="package-detail container">
+    <div class="router-page-breadcrumb">
+        <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+              <li class="breadcrumb-item"><a href="#">{{'breadcrumb.home' | translate}}</a></li>
+              <li class="breadcrumb-item"><a>{{'breadcrumb.package-history' | translate}}</a></li>
+            </ol>
+          </nav>
+    </div>
+    <div class="card">
+        <div class="card-body"></div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/package-history/package-history.component.scss b/Phaha_Package/src/app/package-history/package-history.component.scss
new file mode 100644
index 0000000..1586c71
--- /dev/null
+++ b/Phaha_Package/src/app/package-history/package-history.component.scss
@@ -0,0 +1,3 @@
+.router-page-breadcrumb {
+    padding: 10px !important
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/package-history/package-history.component.ts b/Phaha_Package/src/app/package-history/package-history.component.ts
new file mode 100644
index 0000000..d6d43cb
--- /dev/null
+++ b/Phaha_Package/src/app/package-history/package-history.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-package-history',
+  templateUrl: './package-history.component.html',
+  styleUrls: ['./package-history.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class PackageHistoryComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/package/newspaper-detail/newspaper-detail.component.html b/Phaha_Package/src/app/package/newspaper-detail/newspaper-detail.component.html
new file mode 100644
index 0000000..76a492f
--- /dev/null
+++ b/Phaha_Package/src/app/package/newspaper-detail/newspaper-detail.component.html
@@ -0,0 +1,114 @@
+<block-ui>
+  <div class="container mt-4">
+    <nav aria-label="breadcrumb">
+      <ol class="breadcrumb">
+        <li class="breadcrumb-item custom-link"><a routerLink="/">{{'breadcrumb.home' | translate}}</a></li>
+        <li class="breadcrumb-item active" aria-current="page">{{'breadcrumb.magazine-detail' | translate}}</li>
+      </ol>
+    </nav>
+    <div class="detail-newspaper-page card">
+      <div class="content-page card-body">
+        <div class="package-detail">
+          <div class="row">
+            <div class="col-md-4 col-12">
+              <div class="image-detail-center">
+                <img [src]="baseUrl + detailNews.imageDataBase64.path" class="img-package">
+              </div>
+            </div>
+            <div class="col-md-8 col-12">
+              <div class="package-content">
+                <div class="package-title">
+                  <div>
+                    <h1>{{detailNews.title}}</h1>
+                  </div>
+                  <div>
+                    <img src="../../../assets/image/new.png">
+                    <img src="../../../assets/image/hot.png">
+                  </div>
+                </div>
+                <div>
+                  <label>
+                    <span>{{detailNews.dateCreate | date : 'dd/MM/YYYY - hh:mm'}}</span>
+                    <span *ngIf="detailNews.editorialOfficeId != 35"> | {{detailNews.view}} {{'detail.view' | translate}}</span>
+                  </label>
+                </div>
+                <div>
+                  <span class="badge bg-warning" *ngIf="detailNews.countCustomer > 0">
+                    {{detailNews.countCustomer}} {{'detail.register-person' | translate}}
+                  </span>
+                </div>
+                <div class="editorialOficeName mb-2">
+                  <label>{{'newspaper-detail.editorial-office' | translate}}: {{detailNews.editorialName}}</label>
+                </div>
+                <div class="button-group">
+                  <button type="button" class="btn btn-trial" (click)="getViewTrialPdf(detailNews)">
+                    {{'cta.preview' | translate}}
+                  </button>
+                  <button type="button" class="btn btn-register" *ngIf="!detailNews.isBought"
+                    (click)="onRedirectPayLink(detailNews)">
+                    {{'cta.register' | translate}}
+                  </button>
+                  <button type="button" class="btn btn-register" *ngIf="detailNews.isBought"
+                    routerLink="/my-package/{{detailNews.id}}">
+                    {{'cta.read' | translate}}
+                  </button>
+                </div>
+                <div class="description-package mt-4" *ngIf="detailNews.description">
+                  <h4>{{'newspaper-detail.description' | translate}}:</h4>
+                  <div class="description-news" [innerHTML]="detailNews.description"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="newspaper-relate mt-4">
+      <div class="box-head position-relative">
+        <div class="box-header">
+          <a href="#">{{'newspaper-detail.magazine-related' | translate}}</a>
+        </div>
+      </div>
+      <div class="box-content">
+        <div class="row">
+          <ng-container *ngFor="let newspaper of listNewspaperRelate.result">
+            <div class="col-md-6 col-12 d-flex flex-column justify-content-between">
+              <div class="img-thumbnail p-3">
+                <div class="row">
+                  <div class="col-md-4 col-12">
+                    <a (click)="onRedirectDetailNews(newspaper.id)" class="curson-pointer">
+                      <img [src]="baseUrl + newspaper.image" class="img-hot-news-right w-100">
+                    </a>
+                  </div>
+                  <div class="col-md-8 col-12">
+                    <div class="content-news-right">
+                      <h4 class="title-news" (click)="onRedirectDetailNews(newspaper.id)">
+                        {{newspaper.title}}
+                      </h4>
+                      <label>
+                        <span>{{newspaper.dateCreate | date : 'dd/MM/YYYY - hh:mm'}}</span>
+                        <span *ngIf="newspaper.editorialOfficeId != 35"> | {{newspaper.view}} {{'detail.view' | translate}}</span>
+                      </label>
+                      <div class="description-news" [innerHTML]="newspaper.description"></div>
+                      <div class="group-button mt-2">
+                        <a type="button" class="btn btn-trial" (click)="trialPdf(newspaper)">
+                          {{(newspaper.isBought ? 'cta.read' : 'cta.preview' | translate)}}
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </ng-container>
+        </div>
+        <div class="pagination justify-content-end mt-4">
+          <ngb-pagination [collectionSize]="listNewspaperRelate.totalRecord" [(page)]="listNewspaperRelate.page"
+            [maxSize]="3" [rotate]="true" [pageSize]="listNewspaperRelate.pageSize" (pageChange)="onPageChange($event)">
+          </ngb-pagination>
+        </div>
+      </div>
+    </div>
+    <app-package-hot></app-package-hot>
+  </div>
+</block-ui>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/package/newspaper-detail/newspaper-detail.component.scss b/Phaha_Package/src/app/package/newspaper-detail/newspaper-detail.component.scss
new file mode 100644
index 0000000..f3e3850
--- /dev/null
+++ b/Phaha_Package/src/app/package/newspaper-detail/newspaper-detail.component.scss
@@ -0,0 +1,306 @@
+app-newspaper-detail {
+    .breadcrumb{
+        padding-top: 15px;
+        a{
+            text-decoration: none;
+            font-weight: 600;
+        }
+    }
+    .package-title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .btn-register {
+        background: #FCAF17;
+        font-weight: 700;
+        color: #ffffff;
+    }
+
+    .btn-register:hover {
+        background: #E09500;
+    }
+
+    .img-package {
+        width: 100%;
+    }
+
+    .newspaper-relate {
+        background-color: #fff;
+        padding: 10px 0;
+
+        .box-head {
+            margin-bottom: 5px;
+            padding: 5px 10px;
+            border-bottom: 1px solid #eeeeee;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .box-header {
+            a {
+                font-weight: 400;
+                font-size: 24px;
+                color: #000000;
+                text-decoration: none;
+            }
+        }
+
+        .box-header::after {
+            content: '';
+            width: 100px;
+            border-top: 2px solid #f26b1b;
+            position: absolute;
+            color: transparent;
+            top: 45px;
+            left: 10px;
+        }
+
+        .see-all {
+            a {
+                display: flex;
+                align-items: center;
+                text-decoration: none;
+                color: #ABB5BE;
+            }
+
+            i {
+                color: #152536;
+                font-size: 24px;
+            }
+        }
+
+        .box-content {
+            padding: 0 16px;
+        }
+    }
+
+    .img-thumbnail {
+        margin-top: 15px;
+        height: 100%;
+    }
+
+
+    .content-news-right {
+        .title-news {
+            font-weight: 400;
+            font-size: 18px;
+            line-height: 136.19%;
+            color: #000000;
+            display: block;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            /* số dòng hiển thị */
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            cursor: pointer;
+        }
+
+        .description-news {
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 136.19%;
+            text-align: justify;
+            color: #808285;
+            display: block;
+            display: -webkit-box;
+            -webkit-line-clamp: 4;
+            /* số dòng hiển thị */
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+
+    .btn-trial,
+    .btn-detail {
+        border-radius: 20px;
+        background: #FFE7B8;
+        color: #6C757D;
+        font-size: 13px;
+    }
+
+    .btn-trial:hover,
+    .btn-detail:hover {
+        background: #E09500;
+        color: #FFFFFF;
+    }
+
+    .btn-buy {
+        background: #FCAF17;
+        border-radius: 20px;
+        color: #FFFFFF;
+        font-size: 13px;
+    }
+
+    .btn-buy:hover {
+        background: #E09500;
+        color: #FFFFFF;
+    }
+
+    .group-button {
+        display: flex;
+
+        a {
+            margin-right: 10px;
+        }
+    }
+
+    .page-item.active .page-link {
+        background-color: #fcaf17;
+        border: #fcaf17;
+        color: #fff !important;
+        width: 35px;
+        text-align: center;
+        padding-top: 7px !important;
+    }
+
+
+    .page-item {
+        margin: 0 3px !important;
+        border-radius: 50% !important;
+
+        a {
+            border: none !important;
+            color: #222 !important;
+        }
+    }
+
+    .page-item a.page-link {
+        border-radius: 50%;
+    }
+
+    .page-link {
+        width: 35px !important;
+        height: 35px !important;
+        text-align: center;
+        padding-top: 7px !important;
+    }
+
+    .page-item:last-child .page-link {
+        border-top-right-radius: 50% !important;
+        border-bottom-right-radius: 50% !important;
+    }
+
+    .page-link:focus {
+        box-shadow: none !important;
+    }
+
+    .page-item:first-child .page-link {
+        border-top-left-radius: 50% !important;
+        border-bottom-left-radius: 50% !important;
+    }
+
+    .page-link:hover {
+        width: 30px;
+        text-align: center;
+    }
+
+    .button-group {
+        button {
+            margin-right: 10px;
+        }
+    }
+
+    .custom-link {
+        a {
+            color: #FCAF17;
+        }
+    }
+
+    .package-price {
+        span {
+            font-weight: bold;
+            font-size: 20px;
+        }
+
+        label {
+            margin-right: 20px;
+        }
+
+        .promotion {
+            font-size: 12px;
+            width: 40px;
+            height: 20px;
+            padding: 2px 4px;
+            vertical-align: middle;
+            border-radius: 8px 0px 9px 0px;
+            background-color: #fcdfd7;
+            color: #f1592b;
+        }
+
+        .price {
+            font-size: 13px;
+            color: #abb5be;
+            font-weight: 700;
+            text-decoration: line-through;
+        }
+
+        .price-sale {
+            font-size: 20px;
+            color: #231f20;
+        }
+    }
+
+    .package-price-relate {
+        font-size: 12px !important;
+
+        span {
+            font-weight: bold;
+        }
+
+        label {
+            margin-right: 10px;
+        }
+
+
+        .promotion {
+            width: 40px;
+            height: 20px;
+            padding: 1px 4px;
+            vertical-align: middle;
+            border-radius: 8px 0px 9px 0px;
+            background-color: #fcdfd7;
+            color: #f1592b;
+        }
+
+        .price {
+            font-size: 12px;
+            color: #abb5be;
+            font-weight: normal;
+            text-decoration: line-through;
+        }
+
+        .price-sale {
+            font-size: 14px;
+            font-weight: bold;
+            color: #231f20;
+        }
+    }
+
+    .curson-pointer {
+        cursor: pointer !important;
+    }
+
+
+    .image-detail-center {
+        overflow: hidden !important;
+        width: 100%;
+
+        img {
+            height: 100%;
+            width: 100%;
+            object-fit: cover;
+            transition: transform .6s;
+        }
+
+        img:hover {
+            transform: scale(1.1);
+        }
+    }
+
+
+}
diff --git a/Phaha_Package/src/app/package/newspaper-detail/newspaper-detail.component.ts b/Phaha_Package/src/app/package/newspaper-detail/newspaper-detail.component.ts
new file mode 100644
index 0000000..ae61746
--- /dev/null
+++ b/Phaha_Package/src/app/package/newspaper-detail/newspaper-detail.component.ts
@@ -0,0 +1,151 @@
+import { Component, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Meta, Title } from '@angular/platform-browser';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DetailNewsPaperModel, PageModel } from 'src/app/auth/models/newsPaper';
+import { environment } from 'src/environments/environment';
+import { PackageService } from '../package.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { LoginComponent } from 'src/app/login/login.component';
+
+@Component({
+  selector: 'app-newspaper-detail',
+  templateUrl: './newspaper-detail.component.html',
+  styleUrls: ['./newspaper-detail.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+
+export class NewspaperDetailComponent implements OnInit {
+  idNewsPaper: number = 0;
+  detailNews: any = {};
+  baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  listNewspaperRelate: PageModel = new PageModel();
+  isLogin: boolean = false;
+  currentUser: any = {};
+  relatePackage: any = [];
+  idPackage: number = 0;
+  percentPromotion: number = 0;
+  fileName: any
+
+  constructor(
+    private readonly _packageService: PackageService,
+    private readonly _activatedRoute: ActivatedRoute,
+    private readonly _router: Router,
+    private readonly _title: Title,
+    private readonly _meta: Meta,
+    private readonly _modalService: NgbModal,
+  ) {
+    this._activatedRoute.params.subscribe(params => {
+      this.idNewsPaper = params['id'];
+      this.listNewspaperRelate.packageId = params['idpackage'];
+    });
+    this.currentUser = JSON.parse(localStorage.getItem("currentCustomer") ?? "{}");
+    if (typeof (this.currentUser) === 'object' && this.currentUser.jwtToken) {
+      this.isLogin = true;
+    };
+  }
+
+  onRedirectPayLink(a: any) {
+    if (this.isLogin) {
+      this._router.navigate(['package-pay', a.id, 2])
+    } else {
+      this._modalService.open(LoginComponent, { size: "md", centered: true });
+    }
+  }
+
+  ngOnInit(): void {
+    this.onGetNewspaper();
+    this.onGetListNewspaperRelate();
+  }
+
+  onGetNewspaper() {
+    this._packageService.getDetailNewsPaper(this.idNewsPaper)
+      .pipe()
+      .subscribe(data => {
+        this.detailNews = data.data;
+        this._title.setTitle(data.data.title);
+        this._meta.addTags([
+          {
+            name: 'keyWords',
+            content: 'báo bản quyền, sách bản quyền, thông tin, thông tin uy tín, báo pdf, báo điện tử, sách pdf, sách điện tử'
+          },
+          { name: 'description', content: data.data.description },
+
+          { property: 'og:image', content: data.data.image },
+          { property: 'og:image:secure_url', content: data.data.image },
+          { property: 'og:image:width', content: '1055' },
+          { property: 'og:image:height', content: '559' },
+          { property: 'og:image:type', content: 'image/png' },
+
+          { property: 'article:published_time', content: data.data.dateCreate },
+          // { property: 'article:modified_time', content: ''},
+
+          { property: 'twitter:card', content: 'summary_large_image' },
+          { property: 'twitter:title', content: data.data.name },
+          { property: 'twitter:description', content: data.data.description },
+          { property: 'twitter:image', content: data.data.image },
+        ])
+
+        if (this.detailNews.promotionPrice) {
+          this.percentPromotion = ((this.detailNews.price - this.detailNews.promotionPrice) / this.detailNews.price) * 100;
+        }
+        if (!this.detailNews.price) {
+          this.detailNews.price = 0;
+        }
+      })
+  }
+
+  onGetListNewspaperRelate() {
+    this._packageService.getListNewspaperRelate(this.idNewsPaper, this.listNewspaperRelate)
+      .subscribe(data => {
+        this.listNewspaperRelate.result = data.data.result;
+        this.listNewspaperRelate.totalRecord = data.data.totalItemCount;
+        this.listNewspaperRelate.result.forEach((x: any) => {
+          if (x.promotionPrice) {
+            x.percentPromotion = ((x.price - x.promotionPrice) / x.price) * 100;
+          }
+        });
+      })
+  }
+
+  onRedirectDetailNews(id: number) {
+    this._router.navigate([`newspaper/detail`, id]).then(() => {
+      window.location.reload();
+    });
+    ;
+  }
+
+  onPageChange(number: number) {
+    this.listNewspaperRelate.page = number;
+    this.onGetListNewspaperRelate();
+  }
+
+  getViewTrialPdf(e: any) {
+    if (e.pdfDataBase64.length > 0) {
+      this.fileName = e.pdfDataBase64[0].name.replace(/^.*[\\\/]/, '');
+      this.fileName = this.fileName.replace('.pdf', '')
+      this._router.navigate(['view-trial', e.id], {
+        queryParams: {
+          id: e.pdfDataBase64[0].id,
+          fileName: this.fileName
+        }
+      })
+    } else {
+      this._router.navigate(['view-trial', e.id])
+    }
+  }
+
+  trialPdf(e: any) {
+    if (e.path.length > 0) {
+      this.fileName = e.path[0].path.replace(/^.*[\\\/]/, '');
+      this.fileName = this.fileName.replace('.pdf', '')
+      this._router.navigate(['view-trial', e.id], {
+        queryParams: {
+          id: e.path[0].id,
+          fileName: this.fileName
+        }
+      })
+    } else {
+      this._router.navigate(['view-trial', e.id])
+    }
+  }
+}
diff --git a/Phaha_Package/src/app/package/newspaper-detail/newspaper-detail.module.ts b/Phaha_Package/src/app/package/newspaper-detail/newspaper-detail.module.ts
new file mode 100644
index 0000000..ca8812f
--- /dev/null
+++ b/Phaha_Package/src/app/package/newspaper-detail/newspaper-detail.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    RouterModule
+  ]
+})
+export class NewspaperDetailModule { }
diff --git a/Phaha_Package/src/app/package/package-askonomy/askonomy-default/askonomy-default.component.html b/Phaha_Package/src/app/package/package-askonomy/askonomy-default/askonomy-default.component.html
new file mode 100644
index 0000000..e3b5d1b
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-askonomy/askonomy-default/askonomy-default.component.html
@@ -0,0 +1,46 @@
+<div class="box-editor pack-askonomy">
+    <div class="row">
+        <div class="col-md-2 col-12">
+            <div class="editor-item">
+                <a href="#" (click)="openModal(modalAskonomyPreview)">
+                    <div class="editor-item-cus">
+                        <div class="package-register-img">
+                            <img src="/assets/images/logo/logo_askonomy.PNG" style="max-width: 100%;">
+                        </div>
+                    </div>
+                </a>
+            </div>
+        </div>
+        <div class="col-md-3 col-12">
+            <div class="link-name">
+                <h4 *ngIf="month"><a href="#">Trợ lý Thông tin Kinh tế</a></h4>
+                <p class="askonomy-hdsd" (click)="openModal(modalAskonomyPreview)">Hướng dẫn sử dụng</p>
+                <p>Thời hạn: Coming soon</p>
+            </div>
+        </div>
+        <div class="col-md-3 col-12"></div>
+        <div class="col-md-2 col-12">Số lượng: 1</div>
+        <div class="col-md-2 col-12">
+            <div class="button-group">
+                <div class="text-end">
+                    <a *ngIf="month" href="/askonomy" type="button" class="btn btn-view-book" target="_blank">
+                        <i class="uil uil-book-open"></i>
+                        <span>{{'cta.trial_2' | translate}}</span>
+                    </a>
+                    <a *ngIf="!month" [href]="" (click)="openError()" type="button" class="btn btn-view-book">
+                        <i class="uil uil-book-open"></i>
+                        <span>{{'cta.trial_2' | translate}}</span>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<ng-template #modalAskonomyPreview let-modal>
+    <div class="modal-header">
+        <h4 class="modal-title" id="modalLabel">HƯỚNG DẪN KHAI THÁC ASKONOMY HIỆU QUẢ</h4>
+        <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
+    </div>
+    <app-askonomy-hdsd></app-askonomy-hdsd>
+</ng-template>
diff --git a/Phaha_Package/src/app/package/package-askonomy/askonomy-default/askonomy-default.component.scss b/Phaha_Package/src/app/package/package-askonomy/askonomy-default/askonomy-default.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/Phaha_Package/src/app/package/package-askonomy/askonomy-default/askonomy-default.component.ts b/Phaha_Package/src/app/package/package-askonomy/askonomy-default/askonomy-default.component.ts
new file mode 100644
index 0000000..fb2d8bc
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-askonomy/askonomy-default/askonomy-default.component.ts
@@ -0,0 +1,68 @@
+import { Component, OnInit, TemplateRef } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
+import { ToastrService } from 'ngx-toastr';
+import { environment } from 'src/environments/environment';
+import Swal from 'sweetalert2';
+
+@Component({
+  selector: 'app-askonomy-default',
+  templateUrl: './askonomy-default.component.html',
+  styleUrls: ['./askonomy-default.component.scss'],
+
+})
+export class AskonomyDefaultComponent implements OnInit {
+
+  urlAskonomy = environment.urlAskonomy;
+  month = false;
+  currentUser: any = {};
+  private i18nmyPackage: any;
+  
+  constructor(
+    private readonly _modalService: NgbModal,
+    private readonly _toastr: ToastrService,
+    public readonly _translate: TranslateService,
+  ) { 
+    this.currentUser = JSON.parse(localStorage.getItem("currentCustomer") ?? "{}");
+    if (typeof (this.currentUser) === 'object' && this.currentUser.month) {
+      if(this.currentUser.month && this.currentUser.month > 5)
+        this.month = true;
+    };
+    this.onGetI18n();
+  }
+
+
+  openModal(content?: TemplateRef<NgbModal>) {
+    this._modalService.open(content, { size: "lg", centered: true });
+  }
+
+  openError(){
+    this._toastr.error('Vui lòng đăng ký Premium để sử dụng chức năng', 'Thông báo', { timeOut: 2000 })
+  }
+
+  showNotiVnaskonomy() {
+    Swal.fire({
+      title: this.i18nmyPackage.sweetAlert.askonomy.title,
+      html: this.i18nmyPackage.sweetAlert.askonomy.html,
+      icon: 'warning',
+      showCancelButton: true,
+      cancelButtonColor: '#fcaf17',
+      showConfirmButton: false,
+      cancelButtonText: this.i18nmyPackage.sweetAlert.askonomy.close,
+      customClass: {
+        confirmButton: 'btn btn-primary',
+        cancelButton: 'btn btn-danger ml-1'
+      }
+    });
+  }
+
+  onGetI18n() {
+    this._translate.get('myPackage').subscribe(data => {
+      this.i18nmyPackage = data;
+    });
+  }
+  
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/package/package-askonomy/askonomy-detail/askonomy-detail.component.html b/Phaha_Package/src/app/package/package-askonomy/askonomy-detail/askonomy-detail.component.html
new file mode 100644
index 0000000..6786cb2
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-askonomy/askonomy-detail/askonomy-detail.component.html
@@ -0,0 +1,94 @@
+<block-ui>
+  <div class="container pt-4 pb-4">
+    <nav aria-label="breadcrumb">
+      <ol class="breadcrumb">
+        <li class="breadcrumb-item"><a routerLink="/">{{'breadcrumb.home' | translate}}</a></li>
+        <li class="breadcrumb-item active" aria-current="page">{{'breadcrumb.package-detail' | translate}}</li>
+      </ol>
+    </nav>
+    <div class="content-page">
+      <div class="package-detail">
+        <div class="row">
+          <div class="col-md-2 col-sm-6 col-12">
+            <div *ngIf="!month" class="image-package-detail" (click)="openModal(modalAskonomyPreview)">
+              <img [src]="baseUrl + package?.image" class="img-package">
+            </div>
+            <a *ngIf="month" class="image-package-detail" href="/askonomy" target="_blank">
+              <img [src]="baseUrl + package?.image" class="img-package">
+            </a>
+          </div>
+          <div class="col-md-5 col-sm-6 col-12">
+            <div class="package-content">
+              <div class="package-title">
+                <h3>{{package?.name}}</h3>
+              </div>
+              <p (click)="openModal(modalAskonomyPreview)"><b style="text-transform: uppercase; color: #f25a29; text-decoration: underline;">Hướng dẫn sử dụng</b></p>
+              <div class="askonomy-detail">
+                <h4>Askonomy là chatbot AI được phát triển độc quyền bởi VnEconomy.</h4>
+                <p><i class="uil uil-presentation-check"></i>Askonomy khai thác kho dữ liệu kinh tế tổng hợp, chuyên sâu và tin cậy từ các nguồn đăng tải trên các
+                  ấn phẩm của Thời báo Kinh tế Việt Nam (nay là Tạp chí Kinh tế Việt Nam) và VnEconomy trong hơn 30 năm
+                  qua.</p>
+                <ul>
+                  <li>
+                    <p>Cập nhật dữ liệu theo thời gian thực mỗi giờ.</p>
+                  </li>
+                  <li>
+                    <p>Có khả năng đồ thị hóa số liệu trực quan.</p>
+                  </li>
+                  <li>
+                    <p>Dữ liệu kinh tế độc quyền của Trung tâm Phân tích dữ liệu kinh tế thuộc Tạp chí Kinh tế Việt Nam.
+                    </p>
+                  </li>
+                  <li>
+                    <p>Hiểu và xử lý thông tin với các ngôn ngữ phổ biến trên thế giới. </p>
+                  </li>
+                </ul>
+                <br>
+                <p><i class="uil uil-presentation-check"></i>Askonomy được thiết kế để trở thành một “Trợ lý thông tin kinh tế” thông minh, thay đổi trải nghiệm
+                  tiếp cận thông tin trong lĩnh vực kinh tế của bạn đọc. Thay vì phải mất thời gian đọc hàng ngàn trang
+                  kết quả tìm kiếm qua các công cụ tìm kiếm, Askonomy sẽ trực tiếp trả lời phù hợp với câu hỏi và hỗ trợ
+                  người dùng có được kết quả nhanh nhất. </p>
+                <br>
+                <p><i class="uil uil-presentation-check"></i>Tạp chí Kinh tế Việt Nam trân trọng dành tặng các độc giả báo số với account gói 6-12 tháng trải
+                  nghiệm dùng thử Askonomy miễn phí.. </p>
+                <p>Để trải nghiệm dùng thử, vui lòng đăng ký gói đọc tạp chí in tại đây:</p>
+                <p>Link 1: <a href="/chi-tiet-goi/108">6 tháng - Kinh tế Việt Nam</a></p>
+                <p>Link 2: <a href="/chi-tiet-goi/103">1 năm - Kinh tế Việt Nam</a></p>
+                <p>Link 3: <a href="/chi-tiet-goi/97">6 tháng -Vietnam Economic Times</a></p>
+                <p>Link 4: <a href="/chi-tiet-goi/98">1 Năm - Vietnam Economic Times</a></p>
+              </div>
+              <div class="publisher-group mt-4">
+                <div class="btn-publisher-group">
+                  <span *ngFor="let item of package.editorials">
+                    <button routerLink="/{{item.slug}}" type="button"
+                      class="btn btn-publisher">{{item.name}}</button>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-5 col-sm-12">
+            <div class="video-trailer" *ngIf="pathVideo1" [innerHTML]="pathVideo1"></div>
+            <div class="row">
+              <div class="col-md-6 col-12">
+                <div class="video-trailer mt-2" *ngIf="pathVideo2" [innerHTML]="pathVideo2"></div>
+              </div>
+              <div class="col-md-6 col-12">
+                <div class="video-trailer mt-2" *ngIf="pathVideo3" [innerHTML]="pathVideo3"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</block-ui>
+
+
+<ng-template #modalAskonomyPreview let-modal>
+  <div class="modal-header">
+    <h4 class="modal-title" id="modalLabel">HƯỚNG DẪN KHAI THÁC ASKONOMY HIỆU QUẢ</h4>
+    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
+  </div>
+  <app-askonomy-hdsd></app-askonomy-hdsd>
+</ng-template>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/package/package-askonomy/askonomy-detail/askonomy-detail.component.scss b/Phaha_Package/src/app/package/package-askonomy/askonomy-detail/askonomy-detail.component.scss
new file mode 100644
index 0000000..efb1f08
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-askonomy/askonomy-detail/askonomy-detail.component.scss
@@ -0,0 +1,523 @@
+@import "~swiper/css";
+@import "~swiper/css/pagination";
+@import "~swiper/css/navigation";
+
+app-askonomy-detail {
+  nav {
+    a {
+      text-decoration: none;
+      color: #000;
+    }
+  }
+
+  .package-detail {
+    background-color: #fff !important;
+    padding: 16px;
+  }
+
+  .img-package {
+    width: 100%;
+  }
+
+  .package-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .package-price {
+    margin-top: 10px;
+
+    label {
+      margin-right: 20px;
+    }
+  }
+
+  .promotion {
+    font-size: 12px;
+    width: 35px;
+    height: 20px;
+    padding: 2px 4px;
+    vertical-align: middle;
+    border-radius: 8px 0px 9px 0px;
+    background-color: #fcdfd7;
+    color: #f1592b;
+    vertical-align: 4px;
+  }
+
+  .price {
+    font-size: 24px;
+    color: #ABB5BE;
+    font-weight: 700;
+    text-decoration: line-through;
+  }
+
+  .price-sale {
+    font-size: 24px;
+    color: #231f20;
+    font-weight: 700;
+  }
+
+  .btn:focus {
+    box-shadow: none;
+  }
+
+  .button-group {
+    margin-top: 10px;
+
+    button {
+      margin-right: 20px;
+    }
+
+    .btn-trial {
+      background: #FFE7B8;
+      color: #E09500;
+      font-weight: 700;
+    }
+
+    .btn-trial:hover {
+      border: 1px #E09500 solid;
+    }
+
+    .btn-register:hover {
+      background: #E09500;
+    }
+  }
+
+  .btn-publisher {
+    border: 1px solid #6C757D;
+    border-radius: 50px;
+    margin-right: 10px;
+  }
+
+  .btn-publisher:hover {
+    background: #FFE7B8;
+    border-radius: 50px;
+    border: 1px solid #FFE7B8;
+    color: #E09500;
+  }
+
+  .description-package {
+    h4 {
+      font-weight: 700;
+      font-size: 20px;
+      line-height: 27px;
+      color: #000000;
+    }
+  }
+
+  .text-description {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 28px;
+    color: #6C757D;
+  }
+
+  .image-news {
+    text-align: center;
+  }
+
+  .hot-news {
+    background-color: #fff;
+    padding: 10px 0;
+
+    .box-head {
+      margin-bottom: 5px;
+      padding: 5px 10px;
+      border-bottom: 1px solid #eeeeee;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .box-header {
+      a {
+        font-weight: 400;
+        font-size: 24px;
+        color: #000000;
+        text-decoration: none;
+      }
+    }
+
+    .box-header::after {
+      content: '';
+      width: 100px;
+      border-top: 2px solid #f26b1b;
+      position: absolute;
+      color: transparent;
+      top: 45px;
+      left: 10px;
+    }
+
+    .see-all {
+      a {
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        color: #ABB5BE;
+      }
+
+      i {
+        color: #152536;
+        font-size: 24px;
+      }
+    }
+
+    .box-content {
+      padding: 0 16px;
+    }
+  }
+
+  .img-hot-news-left {
+    width: 100%;
+  }
+
+  .content-news-left {
+    .title-news {
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 136.19%;
+      color: #000000;
+      display: block;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      /* số dòng hiển thị */
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      cursor: pointer;
+    }
+
+    .time-news {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 136.19%;
+      color: #808285;
+    }
+
+    .description-news {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 136.19%;
+      text-align: justify;
+      display: block;
+      display: -webkit-box;
+      -webkit-line-clamp: 6;
+      /* số dòng hiển thị */
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .content-news-right {
+    .title-news {
+      font-weight: 400;
+      font-size: 18px;
+      line-height: 136.19%;
+      color: #000000;
+      display: block;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      /* số dòng hiển thị */
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      cursor: pointer;
+    }
+
+    .description-news {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 136.19%;
+      text-align: justify;
+      color: #808285;
+      display: block;
+      display: -webkit-box;
+      -webkit-line-clamp: 4;
+      /* số dòng hiển thị */
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .img-thumbnail {
+    margin-top: 15px;
+    height: 100%;
+  }
+
+  .product-price {
+    color: #444;
+
+    span {
+      font-size: 14px;
+      font-weight: 600;
+    }
+  }
+
+  .btn-trial,
+  .btn-detail {
+    border-radius: 20px;
+    background: #FFE7B8;
+    color: #6C757D;
+    font-size: 13px;
+  }
+
+  .btn-trial:hover,
+  .btn-detail:hover {
+    background: #E09500;
+    color: #FFFFFF;
+  }
+
+  .btn-buy {
+    background: #FCAF17;
+    border-radius: 20px;
+    color: #FFFFFF;
+    font-size: 13px;
+  }
+
+  .btn-buy:hover {
+    background: #E09500;
+    color: #FFFFFF;
+  }
+
+  .group-button {
+    display: flex;
+
+    a {
+      margin-right: 10px;
+    }
+  }
+
+  .page-item.active .page-link {
+    background-color: #fcaf17;
+    border: #fcaf17;
+    color: #fff !important;
+    width: 35px;
+    text-align: center;
+    padding-top: 7px !important;
+  }
+
+
+  .page-item {
+    margin: 0 3px !important;
+    border-radius: 50% !important;
+
+    a {
+      border: none !important;
+      color: #222 !important;
+    }
+  }
+
+  .page-item a.page-link {
+    border-radius: 50%;
+  }
+
+  .page-link {
+    width: 35px !important;
+    height: 35px !important;
+    text-align: center;
+    padding-top: 7px !important;
+  }
+
+  .page-item:last-child .page-link {
+    border-top-right-radius: 50% !important;
+    border-bottom-right-radius: 50% !important;
+  }
+
+  .page-link:focus {
+    box-shadow: none !important;
+  }
+
+  .page-item:first-child .page-link {
+    border-top-left-radius: 50% !important;
+    border-bottom-left-radius: 50% !important;
+  }
+
+  .page-link:hover {
+    width: 30px;
+    text-align: center;
+  }
+
+  .package-price-relate {
+    font-size: 12px !important;
+
+    span {
+      font-weight: bold;
+    }
+
+    label {
+      margin-right: 10px;
+    }
+
+
+    .promotion {
+      width: 40px;
+      height: 20px;
+      padding: 1px 4px;
+      vertical-align: middle;
+      border-radius: 8px 0px 9px 0px;
+      background-color: #fcdfd7;
+      color: #f1592b;
+    }
+
+    .price {
+      font-size: 12px;
+      color: #abb5be;
+      font-weight: normal;
+      text-decoration: line-through;
+    }
+
+    .price-sale {
+      font-size: 14px;
+      font-weight: bold;
+      color: #231f20;
+    }
+  }
+
+  .image-package-detail {
+    overflow: hidden !important;
+    width: 100%;
+    position: relative;
+
+    img {
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
+      transition: transform .6s;
+    }
+
+    img:hover {
+      transform: scale(1.1);
+    }
+  }
+
+  .image-magazine {
+    overflow: hidden !important;
+    width: 100%;
+
+    a {
+      img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        transition: transform .6s;
+      }
+
+      img:hover {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  .image-news {
+    overflow: hidden !important;
+    width: 100%;
+
+    a {
+      img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        transition: transform .6s;
+      }
+
+      img:hover {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  .image-news-hot {
+    overflow: hidden !important;
+    width: 100%;
+
+    a {
+      img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        transition: transform .6s;
+      }
+
+      img:hover {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  .notifi-notpackage {
+    font-size: 15px !important;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    background: #fcaf17;
+    padding: 2px 10px;
+    border-top-left-radius: 5px;
+    color: #fff;
+  }
+
+  .video-trailer {
+    position: relative;
+    padding-bottom: 56.25%;
+    /* 16:9 */
+    height: 0;
+  }
+
+  .video-trailer iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 1px solid #ddd;
+  }
+
+  .contact-to-buy {
+    padding: 5px 15px;
+    margin-top: 5px;
+    border-radius: 10px;
+    background: #efefef;
+    display: inline-block;
+    font-weight: bold;
+    font-style: italic;
+  }
+
+  @media only screen and (max-width: 600px) {
+    .img-hot-news-left {
+      width: 100% !important;
+    }
+  }
+}
+
+.btn-register {
+  background: #FCAF17;
+  font-weight: 700;
+  color: #ffffff;
+  border-radius: 20px;
+
+  &:hover {
+    background: #fcaf17d1;
+  }
+
+  
+}
+
+.askonomy-detail {
+  ul {
+    list-style: square;
+
+    li {
+      font-weight: 600;
+    }
+  }
+
+  p {
+    i.uil-presentation-check {
+      font-size: 18px;
+      margin-right: 10px;
+      color: #f25a29;
+    }
+  }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/package/package-askonomy/askonomy-detail/askonomy-detail.component.ts b/Phaha_Package/src/app/package/package-askonomy/askonomy-detail/askonomy-detail.component.ts
new file mode 100644
index 0000000..840d897
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-askonomy/askonomy-detail/askonomy-detail.component.ts
@@ -0,0 +1,214 @@
+import { Component, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { DomSanitizer, Meta, SafeHtml, Title } from '@angular/platform-browser';
+import { PageModel } from 'src/app/Models/model';
+import { environment } from 'src/environments/environment';
+import { PackageService } from '../../package.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { AuthenticationService } from 'src/app/auth/service/authentication.service';
+import { LoginComponent } from 'src/app/login/login.component';
+
+@Component({
+  selector: 'app-askonomy-detail',
+  templateUrl: './askonomy-detail.component.html',
+  styleUrls: ['./askonomy-detail.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class AskonomyDetailComponent implements OnInit {
+  public package: any = {
+    content: '',
+    description: '',
+    editorials: [],
+    image: '',
+    name: '',
+    price: '',
+    promotionPrice: '',
+    strDuration: '',
+  };
+  public relatePackage: any = [];
+  public idAds: number = 0;
+  public baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  public listPaperByPackage: any = {
+    result: []
+  };
+  public percentPromotion: number = 0;
+
+  public currentUser: any = {};
+  public isLogin: boolean = false;
+
+  public newspaperLatest: PageModel = new PageModel();
+  public listNewspaperNew: PageModel = new PageModel();
+  public newspaperLeft = { image: '', title: '', description: '', dateCreate: '', view: 0 };
+  public newspaperRight: any;
+  public fileName: any;
+
+  public pathVideo1: SafeHtml = '';
+  public pathVideo2: SafeHtml = '';
+  public pathVideo3: SafeHtml = '';
+  lang: any;
+  askonomyId = 299;
+  month = false;
+
+  constructor(
+    private readonly _packageService: PackageService,
+    private readonly _activatedRoute: ActivatedRoute,
+    private readonly _router: Router,
+    private readonly _title: Title,
+    private readonly _meta: Meta,
+    private readonly _sanitizer: DomSanitizer,
+    private readonly _modalService: NgbModal,
+    private readonly _authenticationService: AuthenticationService
+  ) {
+    this._activatedRoute.params.subscribe(params => {
+      this.idAds = params['id'];
+    });
+    this.lang = localStorage.getItem("lang")
+    this.currentUser = this._authenticationService.currentUserValue;
+    if (this.currentUser && this.currentUser.jwtToken) this.isLogin = true;
+    this.listNewspaperNew.pageSize = 4;
+    this.newspaperLatest.pageSize = 6;
+    
+    if (this.currentUser && this.currentUser.month && this.currentUser.month > 5) this.month = true;
+  }
+
+  onGetDetailPackage(id: number) {
+    this._packageService.getDetailPackage(id)
+      .subscribe(data => {
+        this.package = data.data;
+        if (this.lang == 'en') {
+          this.package.price = this.package.price / 24780;
+          this.package.promotionPrice = this.package.promotionPrice / 24780;
+        }
+        if (this.package.editorialIds.length > 0)
+          this.getPathVideo(this.package.editorialIds[0])
+        // SEO:
+        this._title.setTitle(data.data.name);
+        this._meta.addTags([
+          { name: 'keyWords', content: 'báo bản quyền, sách bản quyền, thông tin, thông tin uy tín, báo pdf, báo điện tử, sách pdf, sách điện tử' },
+
+          { property: 'og:image', content: data.data.image },
+          { property: 'og:image:secure_url', content: data.data.image },
+          { property: 'og:image:width', content: '1055' },
+          { property: 'og:image:height', content: '559' },
+          { property: 'og:image:type', content: 'image/png' },
+
+          { property: 'twitter:card', content: 'summary_large_image' },
+          { property: 'twitter:title', content: data.data.name },
+          { property: 'twitter:description', content: 'Post ENP là nơi khám phá những tin tức, thông tin uy tín.' },
+          { property: 'twitter:image', content: data.data.image },
+        ]);
+
+        if (this.package.promotionPrice) {
+          this.percentPromotion = ((this.package.price - this.package.promotionPrice) / this.package.price) * 100;
+        }
+      });
+  }
+
+  onGetRelatePackage(id: number) {
+    this._packageService.getRelatePackage(id)
+      .pipe()
+      .subscribe(data => {
+        this.relatePackage = data.data;
+      })
+  }
+
+  onRedirectPayLink(a: any, type?: number) {
+    if (this.isLogin) {
+      this._router.navigate(['package-pay', a.id, type ?? 1])
+    } else {
+      this._modalService.open(LoginComponent, { size: "md", centered: true });
+    }
+  }
+
+  openModal(content?: TemplateRef<NgbModal>) {
+    this._modalService.open(content, { size: "lg", centered: true });
+  }
+
+  getNewspaper() {
+    this._packageService.getNewspaper(this.idAds, this.newspaperLatest)
+      .subscribe(data => {
+        this.newspaperLatest.result = data.data.result;
+        this.newspaperLatest.totalRecords = data.data.totalItemCount;
+        this.newspaperLatest.result.forEach((x: any) => {
+          if (x.promotionPrice) {
+            x.percentPromotion = ((x.price - x.promotionPrice) / x.price) * 100;
+          }
+        })
+        if (this.newspaperLatest.result.length > 0) {
+          this.newspaperLeft = this.newspaperLatest.result[0];
+        }
+        this.newspaperRight = this.newspaperLatest.result.slice(1);
+      })
+  }
+
+  onGetListLatest() {
+    this._packageService.getListNewspaperLatest(this.idAds, this.listNewspaperNew)
+      .pipe()
+      .subscribe(data => {
+        this.listNewspaperNew.result = data.data.result;
+        this.listNewspaperNew.totalRecords = data.data.totalItemCount;
+      })
+  }
+
+  onPageChange(numberPage: number) {
+    this.newspaperLatest.page = numberPage;
+    this.getNewspaper();
+  }
+
+  onPageChangeNewspaperList(numberPage: number) {
+    this.listNewspaperNew.page = numberPage;
+    this.onGetListLatest();
+  }
+
+  getViewTrialPdf(e: any) {
+    if (this.isLogin) {
+      if (e.path.length > 0) {
+        this.fileName = e.path[0].path.replace(/^.*[\\\/]/, '');
+        this.fileName = this.fileName.replace('.pdf', '')
+        this._router.navigate(['view-trial', e.id], {
+          queryParams: {
+            id: e.path[0].id,
+            fileName: this.fileName
+          }
+        })
+      } else {
+        this._router.navigate(['view-trial', e.id])
+      }
+    } else {
+      this._modalService.open(LoginComponent, { size: "md", centered: true });
+    }
+  }
+
+  getViewPdf(e: any) {
+    if (e.path.length > 0) {
+      let name = e.path[0].path.replace(/^.*[\\\/]/, '');
+      name = name.replace('.pdf', '')
+      this._router.navigate(['view', e.id], {
+        queryParams: {
+          id: e.path[0].id,
+          fileName: name
+        }
+      });
+    } else {
+      this._router.navigate(['view', e.id])
+    }
+  }
+
+  getPathVideo(id: number) {
+    this._packageService.getPathVideoByEditorial(id)
+      .subscribe(data => {
+        this.pathVideo1 = this._sanitizer.bypassSecurityTrustHtml(`<iframe src="https://www.youtube.com/embed/Y3enJ_oBWkg" title="Ra mắt ASKONOMY Sản phẩm Trí Tuệ Nhân Tạo AI của Tạp chí Kinh Tế Việt Nam | VNECONOMY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`);
+        this.pathVideo2 = this._sanitizer.bypassSecurityTrustHtml(`<iframe src="https://www.youtube.com/embed/WoID73nCUfM" title="Công nghệ trí tuệ nhân tạo AI độc quyền của Tạp chí Kinh tế Việt Nam có giống Chat GPT?" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`);
+        this.pathVideo3 = this._sanitizer.bypassSecurityTrustHtml(`<iframe src="https://www.youtube.com/embed/JlcgUEX1QsY" title="Hội thảo Trí tuệ nhân tạo AI và quản trị sáng tạo nội dung trong Tòa soạn - Hội báo Toàn quốc 2023" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`);
+      })
+  }
+
+
+
+  ngOnInit(): void {
+    this.onGetDetailPackage(this.idAds);
+    this.onGetRelatePackage(this.idAds);
+    // this.onGetListLatest();
+    this.getNewspaper();
+  }
+}
diff --git a/Phaha_Package/src/app/package/package-askonomy/askonomy-hdsd/askonomy-hdsd.component.html b/Phaha_Package/src/app/package/package-askonomy/askonomy-hdsd/askonomy-hdsd.component.html
new file mode 100644
index 0000000..974c0bd
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-askonomy/askonomy-hdsd/askonomy-hdsd.component.html
@@ -0,0 +1,5 @@
+<div class="modal-body">
+    <div class="askonomy-preview" >
+      <img src="/assets/images/askonomy/hdsd_askonomy.png">
+    </div>
+  </div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/package/package-askonomy/askonomy-hdsd/askonomy-hdsd.component.scss b/Phaha_Package/src/app/package/package-askonomy/askonomy-hdsd/askonomy-hdsd.component.scss
new file mode 100644
index 0000000..6d15f06
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-askonomy/askonomy-hdsd/askonomy-hdsd.component.scss
@@ -0,0 +1,6 @@
+.askonomy-preview{
+    margin: -12px;
+    img{
+        max-width: 100%;
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/package/package-askonomy/askonomy-hdsd/askonomy-hdsd.component.ts b/Phaha_Package/src/app/package/package-askonomy/askonomy-hdsd/askonomy-hdsd.component.ts
new file mode 100644
index 0000000..06b5904
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-askonomy/askonomy-hdsd/askonomy-hdsd.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-askonomy-hdsd',
+  templateUrl: './askonomy-hdsd.component.html',
+  styleUrls: ['./askonomy-hdsd.component.scss']
+})
+export class AskonomyHdsdComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/package/package-askonomy/askonomy-hot/askonomy-hot.component.html b/Phaha_Package/src/app/package/package-askonomy/askonomy-hot/askonomy-hot.component.html
new file mode 100644
index 0000000..b5f870f
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-askonomy/askonomy-hot/askonomy-hot.component.html
@@ -0,0 +1,30 @@
+<div class="package-item">
+    <div class="package-item-img">
+        <a href="/chi-tiet-askonomy/{{item.id}}">
+            <img class="img-response" [src]="apiUrl + item.image" (error)="errorHandler($event)">
+        </a>
+    </div>
+    <h3 class="package-item-title">
+        <a href="/chi-tiet-askonomy/{{item.id}}">{{item.name}}</a>
+    </h3>
+    <h5 class="editorial">
+        <a *ngFor="let editorial of item.lstEditorials" routerLink="/{{editorial.slug}}">
+            {{editorial.name}}
+        </a>
+    </h5>
+    <p class="preview-askonomy" (click)="openModal(modalAskonomyPreview)">Hướng dẫn sử dụng</p>
+    <div class="group-button">
+        <a [href]="'/askonomy'" type="button" class="btn btn-trial" target="_blank">
+            {{'cta.trial' | translate}}
+        </a>
+        <a href="/chi-tiet-askonomy/{{item.id}}" class="btn btn-detail">{{'cta.detail' | translate}}</a>
+    </div>
+</div>
+
+<ng-template #modalAskonomyPreview let-modal>
+    <div class="modal-header">
+        <h4 class="modal-title" id="modalLabel">HƯỚNG DẪN KHAI THÁC ASKONOMY HIỆU QUẢ</h4>
+        <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
+    </div>
+    <app-askonomy-hdsd></app-askonomy-hdsd>
+</ng-template>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/package/package-askonomy/askonomy-hot/askonomy-hot.component.scss b/Phaha_Package/src/app/package/package-askonomy/askonomy-hot/askonomy-hot.component.scss
new file mode 100644
index 0000000..622e595
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-askonomy/askonomy-hot/askonomy-hot.component.scss
@@ -0,0 +1,186 @@
+app-askonomy-hot {
+    width: 100%;
+    margin-top: 15px;
+    margin-bottom: 15px;
+  
+    .package-item {
+      padding: 10px;
+      background: #fff;
+      border-radius: 5px;
+      box-shadow: 0px 0px 10px #ccc;
+      height: 100%;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+  
+      .package-item-img {
+        overflow: hidden;
+        width: 100%;
+        border-radius: 5px;
+        position: relative;
+        text-align: center;
+  
+        img {
+          width: 100%;
+          transition: transform 0.6s;
+          margin: auto;
+  
+          &:hover {
+            transform: scale(1.1);
+          }
+        }
+      }
+  
+      .package-item-title {
+        text-align: center;
+        padding: 10px 4px 0;
+        margin-bottom: 10px;
+  
+        a {
+          font-size: 18px;
+          color: #888;
+          font-weight: bold;
+          text-decoration: none;
+  
+          &:hover {
+            color: #444;
+          }
+        }
+      }
+  
+      .editorial {
+        padding-bottom: 4px;
+        height: 40px;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+  
+        a {
+          text-decoration: none;
+          color: #6C757D;
+          margin-right: 10px;
+  
+          &:hover {
+            text-decoration: underline;
+            font-weight: 600;
+          }
+        }
+      }
+  
+      .package-item-price {
+        text-align: center;
+        color: #444;
+        margin-bottom: 5px;
+  
+        span {
+          font-size: 16px;
+          font-weight: 600;
+        }
+      }
+  
+      .package-item-sold {
+        background: #eee;
+        text-align: center;
+        // padding: 4px 0;
+        border-radius: 20px;
+        margin-top: 5px;
+  
+        span {
+          color: #6C757D;
+          font-size: 12px;
+        }
+      }
+  
+      .group-button {
+        display: flex;
+        justify-content: space-around;
+  
+        .btn-trial,
+        .btn-detail {
+          border-radius: 20px;
+          background: #ffe7b8;
+          color: #6c757d;
+        }
+  
+        .btn-trial:hover,
+        .btn-detail:hover {
+          background: #e09500;
+          color: #ffffff;
+        }
+  
+        .btn-buy {
+          background: #fcaf17;
+          border-radius: 20px;
+          color: #ffffff;
+        }
+  
+        .btn-buy:hover {
+          background: #e09500;
+          color: #ffffff;
+        }
+      }
+    }
+  
+    .price {
+      font-size: 13px;
+      color: #abb5be;
+      font-weight: 700;
+      text-decoration: line-through;
+    }
+  
+    .notifi-notpackage {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      background: #fcaf17;
+      padding: 2px 10px;
+      border-top-left-radius: 5px;
+      color: #fff;
+    }
+  
+    .price-info {
+      display: flex;
+      justify-content: space-evenly;
+    }
+  
+    .package-item-price {
+      text-align: center;
+      color: #444;
+  
+      span {
+        font-size: 16px;
+        font-weight: 600;
+      }
+    }
+  
+    .package-item-price-sale {
+      text-align: center;
+      color: #808285;
+      text-decoration: line-through;
+  
+      span {
+        font-size: 14px;
+        font-weight: 400;
+      }
+    }
+  
+    .package-item-price-final {
+      text-align: center;
+      color: #444;
+  
+      span {
+        font-size: 16px;
+        font-weight: 600;
+      }
+    }
+
+    .preview-askonomy{
+        cursor: pointer;
+        text-align: center;
+        font-weight: 600;
+    }
+  }
+  
\ No newline at end of file
diff --git a/Phaha_Package/src/app/package/package-askonomy/askonomy-hot/askonomy-hot.component.ts b/Phaha_Package/src/app/package/package-askonomy/askonomy-hot/askonomy-hot.component.ts
new file mode 100644
index 0000000..0987f70
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-askonomy/askonomy-hot/askonomy-hot.component.ts
@@ -0,0 +1,54 @@
+import { Component, Input, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Router } from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { LoginComponent } from 'src/app/login/login.component';
+import { environment } from 'src/environments/environment';
+
+@Component({
+  selector: 'app-askonomy-hot',
+  templateUrl: './askonomy-hot.component.html',
+  styleUrls: ['./askonomy-hot.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class AskonomyHotComponent implements OnInit {
+
+  @Input() item: any = {};
+  public currentUser: any = {};
+  public isLogin: boolean = false;
+  public apiUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  lang: any;
+  urlAskonomy = environment.urlAskonomy;
+  month = false;
+
+  constructor(
+    private readonly _router: Router,
+    private readonly _modalService: NgbModal,
+  ) {
+    this.lang = localStorage.getItem("lang");
+    this.currentUser = JSON.parse(localStorage.getItem("currentCustomer") ?? "{}");
+    if (typeof (this.currentUser) === 'object' && this.currentUser.jwtToken) {
+      this.isLogin = true;
+      if(this.currentUser.month && this.currentUser.month > 5)
+        this.month = true;
+    };
+  }
+
+  errorHandler(event: any) {
+    event.target.src = "/assets/images/package/package-default.png";
+  }
+
+  onRedirectPayLink(a: any) {
+    if (this.isLogin) {
+      this._router.navigate(['package-pay', a.id])
+    } else {
+      this._modalService.open(LoginComponent, { size: "md", centered: true });
+    }
+  }
+
+  openModal(content?: TemplateRef<NgbModal>) {
+    this._modalService.open(content, { size: "lg", centered: true });
+  }
+
+  ngOnInit(): void {
+  }
+}
diff --git a/Phaha_Package/src/app/package/package-askonomy/askonomy-view/askonomy-view.component.html b/Phaha_Package/src/app/package/package-askonomy/askonomy-view/askonomy-view.component.html
new file mode 100644
index 0000000..bfcac0e
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-askonomy/askonomy-view/askonomy-view.component.html
@@ -0,0 +1,17 @@
+<div class="askonomy-view">
+    <div class="askonomy-view-cus">
+        <span style="color: white;">Email: support.askonomy@vneconomy.vn</span>
+        <a class="askonomy-view-go-home" href="/" title="Trang chủ">
+            <i class="uil uil-home-alt"></i>
+            <span>Trang chủ</span>
+        </a>
+        <a target="_blank" class="askonomy-view-go-home" href="https://docs.google.com/forms/d/e/1FAIpQLSeZYkMiTgjlycw89Jci5EjShrBb9z6SEKbbZ9KnDbCt-bdJ9Q/viewform">
+            <i class="uil uil-book-reader"></i>
+            <span>Phản hồi</span>
+        </a>
+    </div>
+    <div class="askonomy-view-box" *ngIf="month" [innerHTML]="pathIframe"></div>
+    <div class="askonomy-box-login" *ngIf="!month">
+        <app-login></app-login>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/package/package-askonomy/askonomy-view/askonomy-view.component.scss b/Phaha_Package/src/app/package/package-askonomy/askonomy-view/askonomy-view.component.scss
new file mode 100644
index 0000000..e1c69de
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-askonomy/askonomy-view/askonomy-view.component.scss
@@ -0,0 +1,69 @@
+.askonomy-view {
+    .askonomy-view-box {
+        height: calc(100vh - 6px);
+    }
+}
+
+.askonomy-box-login {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 400px;
+    max-width: 100%;
+    background: #fff;
+    padding: 15px;
+    border-radius: 5px;
+    box-shadow: 0 0 5px #222;
+}
+
+.askonomy-view-go-home {
+    border: 1px solid #fff;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    gap: 6px;
+    padding: 0 10px;
+    border-radius: 5px;
+
+    i {
+        font-size: 24px;
+    }
+
+    span {
+        padding-top: 2px;
+    }
+}
+
+.askonomy-view-cus {
+    position: fixed;
+    top: 7px;
+    right: 90px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+@media only screen and (max-width: 600px) {
+    .askonomy-view {
+        .askonomy-view-box {
+            height: calc(100vh - 60px);
+        }
+
+        .askonomy-view-cus {
+            top: 57px;
+            right: 0;
+            flex-wrap: wrap;
+            justify-content: flex-end;
+            background: #9f191f;
+            padding: 10px;
+
+            span {
+                text-align: right;
+                width: 100%;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/package/package-askonomy/askonomy-view/askonomy-view.component.ts b/Phaha_Package/src/app/package/package-askonomy/askonomy-view/askonomy-view.component.ts
new file mode 100644
index 0000000..e760088
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-askonomy/askonomy-view/askonomy-view.component.ts
@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { AuthenticationService } from 'src/app/auth/service/authentication.service';
+import { environment } from 'src/environments/environment';
+
+@Component({
+  selector: 'app-askonomy-view',
+  templateUrl: './askonomy-view.component.html',
+  styleUrls: ['./askonomy-view.component.scss']
+})
+export class AskonomyViewComponent implements OnInit {
+  urlAskonomy = environment.urlAskonomy;
+  currentUser: any = {};
+  month = false;
+  pathIframe: SafeHtml = '';
+  
+  constructor(
+    private readonly _authenticationService: AuthenticationService,
+    private readonly _sanitizer: DomSanitizer,
+  ) { 
+    this.currentUser = this._authenticationService.currentUserValue;
+    if(this.currentUser && this.currentUser.month && this.currentUser.month > 5)
+      this.month = true;
+
+    this.pathIframe = this._sanitizer.bypassSecurityTrustHtml(`<iframe style="width: 100%; height: 100%;" src="${this.urlAskonomy}" title="Trợ lý Thông tin Kinh tế" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`);
+  }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/package/package-askonomy/package-askonomy.module.ts b/Phaha_Package/src/app/package/package-askonomy/package-askonomy.module.ts
new file mode 100644
index 0000000..362eb55
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-askonomy/package-askonomy.module.ts
@@ -0,0 +1,51 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { SwiperModule } from 'swiper/angular';
+import { PackageItemHotModule } from '../package-item-hot/package-item-hot.module';
+import { RouterModule } from '@angular/router';
+import { BlockUIModule } from 'ng-block-ui';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClient } from '@angular/common/http';
+import { CommonModule } from '@angular/common';
+import { LoginModule } from 'src/app/login/login.module';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { AskonomyHdsdComponent } from './askonomy-hdsd/askonomy-hdsd.component';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { AskonomyHotComponent } from './askonomy-hot/askonomy-hot.component';
+import { AskonomyDetailComponent } from './askonomy-detail/askonomy-detail.component';
+import { AskonomyDefaultComponent } from './askonomy-default/askonomy-default.component';
+import { AskonomyViewComponent } from './askonomy-view/askonomy-view.component';
+
+@NgModule({
+  declarations: [
+    AskonomyHdsdComponent,
+    AskonomyHotComponent,
+    AskonomyDetailComponent,
+    AskonomyDefaultComponent,
+    AskonomyViewComponent
+  ],
+  imports: [
+    CommonModule,
+    NgbModule,
+    BrowserModule,
+    LoginModule,
+    FormsModule,
+    ReactiveFormsModule,
+    RouterModule,
+    BlockUIModule.forRoot(),
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    })
+  ],
+  exports: [
+    AskonomyHdsdComponent,
+    AskonomyHotComponent,
+    AskonomyDefaultComponent
+  ]
+})
+export class PackageAskonomyModule { }
diff --git a/Phaha_Package/src/app/package/package-detail/package-detail.component.html b/Phaha_Package/src/app/package/package-detail/package-detail.component.html
new file mode 100644
index 0000000..1b8e729
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-detail/package-detail.component.html
@@ -0,0 +1,218 @@
+<block-ui>
+    <div class="container pt-4 pb-4">
+        <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a routerLink="/">{{'breadcrumb.home' | translate}}</a></li>
+                <li class="breadcrumb-item active" aria-current="page">{{'breadcrumb.package-detail' | translate}}</li>
+            </ol>
+        </nav>
+        <div class="content-page">
+            <div class="package-detail">
+                <div class="row">
+                    <div class="col-md-2 col-sm-6 col-12">
+                        <div class="image-package-detail">
+                            <img [src]="baseUrl + package?.image" class="img-package">
+                            <ng-container [ngSwitch]="package?.type">
+                                <div *ngSwitchCase="1" class="notifi-notpackage text-center">
+                                    {{'package-type.pdf' | translate}}
+                                </div>
+                                <div *ngSwitchCase="2" class="notifi-notpackage text-center">
+                                    {{'package-type.author' | translate}}
+                                </div>
+                                <div *ngSwitchCase="3" class="notifi-notpackage text-center">
+                                    {{'package-type.category' | translate}}
+                                </div>
+                                <div *ngSwitchCase="4" class="notifi-notpackage text-center">
+                                    {{'package-type.event' | translate}}
+                                </div>
+                            </ng-container>
+                        </div>
+                    </div>
+                    <div class="col-md-4 col-sm-6 col-12">
+                        <div class="package-content">
+                            <div class="package-title">
+                                <div>
+                                    <h3>{{package?.name}}</h3>
+                                </div>
+                                <div>
+                                    <img src="../../../assets/image/new.png">
+                                    <img src="../../../assets/image/hot.png">
+                                </div>
+                            </div>
+                            <div>
+                                <span>({{'package-detail.duration' | translate}} {{package.strDuration}})</span>
+                            </div>
+                            <div class="package-price">
+                                <div *ngIf="!package.promotionPrice">
+                                    <label class="price-sale">
+                                        {{'package-detail.price' | translate}}: {{package.price | number}}VNĐ</label>
+                                </div>
+                                <div *ngIf="package.promotionPrice">
+                                    <label>{{'package-detail.price' | translate}}: </label>
+                                    <label class="price">{{package.price | number}}VNĐ</label>
+                                    <label class="promotion"
+                                        *ngIf="package.discountPercent">-{{percentPromotion}}%</label>
+                                    <label class="price-sale">{{package.promotionPrice | number}}VNĐ</label>
+                                </div>
+                            </div>
+
+                            <div class="button-group" style="display: flex; align-items: flex-start;">
+                                <button type="button" routerLink="/package-trial/{{package.id}}" class="btn btn-trial"
+                                    *ngIf="package.isTrial && !package.isBought">
+                                    {{'cta.trial' | translate}}
+                                </button>
+                                <div>
+                                    <button type="button" class="btn btn-register" *ngIf="!package.isBought"
+                                        (click)="onRedirectPayLink(package)">
+                                        {{'cta.register' | translate}}
+                                    </button>
+                                    <div style="padding: 10px 0;" *ngIf="!package.isBought">({{'cta.read_one_new' |
+                                        translate}})</div>
+                                </div>
+                                <a class="btn btn-register" *ngIf="package.isBought"
+                                    href="/view/{{newspaperLatest.result[0]?.id}}">
+                                    {{'cta.read' | translate}}
+                                </a>
+                            </div>
+                            <div class="publisher-group mt-4">
+                                <div class="btn-publisher-group">
+                                    <span *ngFor="let item of package.editorials">
+                                        <button routerLink="/{{item.slug}}" type="button"
+                                            class="btn btn-publisher">{{item.name}}</button>
+                                    </span>
+                                </div>
+                            </div>
+                            <div class="description-package mt-4" *ngIf="package.description">
+                                <h4>{{'package-detail.description' | translate}}:</h4>
+                                <label class="text-description">
+                                    {{package.description}}
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-6 col-sm-12">
+                        <!-- <div class="row">
+                            <div class="col-md-8 col-12 mb-2"> -->
+                                <div class="video-trailer" *ngIf="pathVideo1" [innerHTML]="pathVideo1"></div>
+                            <!-- </div>
+                            <div class="col-md-4 col-12">
+                                <div class="video-trailer" *ngIf="pathVideo2" [innerHTML]="pathVideo2"></div>
+                                <div class="video-trailer mt-2" *ngIf="pathVideo3" [innerHTML]="pathVideo3"></div>
+                            </div>
+                        </div> -->
+                    </div>
+                </div>
+            </div>
+            <div class="hot-news mt-4">
+                <div class="box-head position-relative">
+                    <div class="box-header">
+                        <a href="#">{{'package-detail.magazine' | translate}} ({{newspaperLatest.totalRecords}})</a>
+                    </div>
+                </div>
+                <div class="box-content">
+                    <div class="row">
+                        <ng-container *ngFor="let itemByPacek of newspaperLatest.result; let i = index;">
+                            <div class="col-md-6 col-12 d-flex flex-column justify-content-between">
+                                <div class="img-thumbnail p-3">
+                                    <div class="row">
+                                        <div class="col-md-4 col-12">
+                                            <div class="image-magazine">
+                                                <a *ngIf="!itemByPacek.isBuy" routerLink="/chi-tiet/{{itemByPacek.id}}">
+                                                    <img [src]="baseUrl + itemByPacek.image" class="img-hot-news-right w-100">
+                                                </a>
+                                                <a *ngIf="itemByPacek.isBuy" [href]="'/view/' + itemByPacek.id">
+                                                    <img [src]="baseUrl + itemByPacek.image" class="img-hot-news-right w-100">
+                                                </a>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-8 col-12">
+                                            <div class="content-news-right">
+                                                <h4 class="title-news"
+                                                    routerLink="/chi-tiet/{{itemByPacek.id}}">
+                                                    {{itemByPacek.title}}
+                                                </h4>
+                                                <label>
+                                                    <span>{{itemByPacek.dateCreate | date : 'dd/MM/YYYY - hh:mm'}}</span>
+                                                    <span *ngIf="itemByPacek.editorialOfficeId != 35">|
+                                                        {{itemByPacek.view}} {{'package-detail.view' | translate}}</span>
+                                                </label>
+                                                <div class="description-news" [innerHTML]="itemByPacek.description"></div>
+                                                <div class="group-button mt-2">
+                                                    <a *ngIf="!itemByPacek.isBuy" class="btn btn-trial"
+                                                        (click)="getViewTrialPdf(itemByPacek)">
+                                                        {{'cta.preview' | translate}}
+                                                    </a>
+                                                    <button type="button" class="btn btn-register"
+                                                        *ngIf="!itemByPacek.isBuy"
+                                                        (click)="onRedirectPayLink(itemByPacek, 2)">
+                                                        {{'cta.register' | translate}}
+                                                    </button>
+                                                    <a *ngIf="itemByPacek.isBuy" class="btn btn-trial"
+                                                        [href]="'/view/' + itemByPacek.id">
+                                                        {{'cta.read' | translate}}
+                                                    </a>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </ng-container>
+                        <div class="pagination justify-content-end mt-4">
+                            <ngb-pagination [collectionSize]="newspaperLatest.totalRecords"
+                                [(page)]="newspaperLatest.page" [maxSize]="3" [rotate]="true"
+                                [pageSize]="newspaperLatest.pageSize" (pageChange)="onPageChange($event)">
+                            </ngb-pagination>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <app-package-related [relatePackage]="relatePackage"></app-package-related>
+        <app-package-hot></app-package-hot>
+    </div>
+</block-ui>
+
+
+<ng-template #modalAskonomyPreview let-modal>
+    <div class="modal-header">
+        <h4 class="modal-title" id="modalLabel">HƯỚNG DẪN KHAI THÁC ASKONOMY HIỆU QUẢ</h4>
+        <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
+    </div>
+    <div class="modal-body">
+        <div class="askonomy-preview">
+            <p>Askonomy là trợ lý thông tin về kinh tế, sử dụng các nguồn tin chính thống được đăng tải trên các ấn phẩm
+                của Tạp chí Kinh tế Việt Nam và VnEconomy, cùng nguồn dữ liệu riêng của Trung tâm phân tích kinh tế
+                thuộc Tạp chí Kinh tế Việt Nam xây
+                dựng.
+            </p>
+            <p>Để khai thác hiệu quả các tính năng, các câu hỏi nên:</p>
+            <p>Chỉ tập trung đặt câu hỏi về các dữ kiện kinh tế. Askonomy được huấn luyện với các dữ liệu kinh tế nên sẽ
+                không thể trả lời những câu hỏi ngoài kinh tế (ví dụ yêu cầu viết văn, viết thơ, câu hỏi về quan điểm
+                chính trị…)</p>
+            <p>Sử dụng đúng thuật ngữ kinh tế, ví dụ: Chỉ số giá tiêu dùng CPI, Chỉ số Nhà quản trị mua hàng PMI, Chỉ số
+                sản xuất công nghiệp IIP, Tổng sản phẩm trong nước GDP…</p>
+            <p>Vui lòng đặt các câu hỏi đơn, tập trung vào 1 vấn đề, tránh hỏi nhiều thông tin, số liệu khác nhau trong
+                cùng một câu hỏi.</p>
+            <p>Vui lòng đợi câu trả lời rồi mới tiếp tục đặt các câu hỏi tiếp theo. Trong giai đoạn thử nghiệm Askonomy
+                sẽ mất khoảng 30-40s để đưa ra 1 câu trả lời.</p>
+            <p>Vui lòng đặt các câu hỏi càng cụ thể càng tốt, ví dụ không nên hỏi chung chung như “Tình hình kinh tế xã
+                hội Việt Nam trong quý 1/2023”? Mà nên ghi rõ các chỉ số kinh tế hoặc tình hình sản xuất kinh doanh cụ
+                thể từng lĩnh vực hoặc chia thành
+                các câu hỏi về từng chủ đề: Ví dụ hỏi riêng về tăng trưởng GDP quý 1/2023; kim ngạch xuất khẩu quý
+                1/2023; Tổng mức bán lẻ hàng hóa và doanh thu dịch vụ tiêu dùng quý 1/2023…</p>
+            <p>Xác định rõ thời gian nếu truy vấn số liệu tại một thời điểm cụ thể, chú ý tần suất cập nhật số liệu để
+                có yêu cầu cụ thể. Ví dụ: Tăng trưởng GDP có tần suất cập nhật hàng quý, hàng năm; CPI, PMI… là hàng
+                tháng hoặc hàng quý...
+            </p>
+            <p>Trong trường hợp hỏi số liệu theo chuỗi thời gian, nên xác định khoảng thời gian cụ thể, phù hợp với tần
+                suất cập nhật của số liệu.</p>
+            <p>Trong một vài trường hợp số liệu bị thiếu, nên đặt câu hỏi lại với từng thời điểm cụ thể.</p>
+            <p>Askonomy không cập nhật các số liệu thời sự cụ thể liên tục như biến động giá vàng, giá chứng khoán, giá
+                hàng hóa… hàng ngày.</p>
+            <p>Để sao chép câu trả lời của Askonomy khi sử dụng máy tính, ấn giữ chuột trái trong vòng 3s đến khi trên
+                màn hình hiện nút “Copied”. Khi sử dụng trên điện thoại, ấn giữ vào phần câu trả lời trong 3s để thực
+                hiện sao chép</p>
+        </div>
+    </div>
+</ng-template>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/package/package-detail/package-detail.component.scss b/Phaha_Package/src/app/package/package-detail/package-detail.component.scss
new file mode 100644
index 0000000..e190f11
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-detail/package-detail.component.scss
@@ -0,0 +1,508 @@
+@import "~swiper/css";
+@import "~swiper/css/pagination";
+@import "~swiper/css/navigation";
+
+app-package-detail {
+  nav {
+    a {
+      text-decoration: none;
+      color: #000;
+    }
+  }
+
+  .package-detail {
+    background-color: #fff !important;
+    padding: 16px;
+  }
+
+  .img-package {
+    width: 100%;
+  }
+
+  .package-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .package-price {
+    margin-top: 10px;
+
+    label {
+      margin-right: 20px;
+    }
+  }
+
+  .promotion {
+    font-size: 12px;
+    width: 35px;
+    height: 20px;
+    padding: 2px 4px;
+    vertical-align: middle;
+    border-radius: 8px 0px 9px 0px;
+    background-color: #fcdfd7;
+    color: #f1592b;
+    vertical-align: 4px;
+  }
+
+  .price {
+    font-size: 24px;
+    color: #ABB5BE;
+    font-weight: 700;
+    text-decoration: line-through;
+  }
+
+  .price-sale {
+    font-size: 24px;
+    color: #231f20;
+    font-weight: 700;
+  }
+
+  .btn:focus {
+    box-shadow: none;
+  }
+
+  .button-group {
+    margin-top: 10px;
+
+    button {
+      margin-right: 20px;
+    }
+
+    .btn-trial {
+      background: #FFE7B8;
+      color: #E09500;
+      font-weight: 700;
+    }
+
+    .btn-trial:hover {
+      border: 1px #E09500 solid;
+    }
+
+    .btn-register:hover {
+      background: #E09500;
+    }
+  }
+
+  .btn-publisher {
+    border: 1px solid #6C757D;
+    border-radius: 50px;
+    margin-right: 10px;
+  }
+
+  .btn-publisher:hover {
+    background: #FFE7B8;
+    border-radius: 50px;
+    border: 1px solid #FFE7B8;
+    color: #E09500;
+  }
+
+  .description-package {
+    h4 {
+      font-weight: 700;
+      font-size: 20px;
+      line-height: 27px;
+      color: #000000;
+    }
+  }
+
+  .text-description {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 28px;
+    color: #6C757D;
+  }
+
+  .image-news {
+    text-align: center;
+  }
+
+  .hot-news {
+    background-color: #fff;
+    padding: 10px 0;
+
+    .box-head {
+      margin-bottom: 5px;
+      padding: 5px 10px;
+      border-bottom: 1px solid #eeeeee;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .box-header {
+      a {
+        font-weight: 400;
+        font-size: 24px;
+        color: #000000;
+        text-decoration: none;
+      }
+    }
+
+    .box-header::after {
+      content: '';
+      width: 100px;
+      border-top: 2px solid #f26b1b;
+      position: absolute;
+      color: transparent;
+      top: 45px;
+      left: 10px;
+    }
+
+    .see-all {
+      a {
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        color: #ABB5BE;
+      }
+
+      i {
+        color: #152536;
+        font-size: 24px;
+      }
+    }
+
+    .box-content {
+      padding: 0 16px;
+    }
+  }
+
+  .img-hot-news-left {
+    width: 100%;
+  }
+
+  .content-news-left {
+    .title-news {
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 136.19%;
+      color: #000000;
+      display: block;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      /* số dòng hiển thị */
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      cursor: pointer;
+    }
+
+    .time-news {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 136.19%;
+      color: #808285;
+    }
+
+    .description-news {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 136.19%;
+      text-align: justify;
+      display: block;
+      display: -webkit-box;
+      -webkit-line-clamp: 6;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      ::ng-deep {
+        h3 {
+          font-size: 14px !important;
+        }
+      }
+    }
+  }
+
+  .content-news-right {
+    .title-news {
+      font-weight: 400;
+      font-size: 18px;
+      line-height: 136.19%;
+      color: #000000;
+      display: block;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      /* số dòng hiển thị */
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      cursor: pointer;
+    }
+
+    .description-news {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 136.19%;
+      text-align: justify;
+      color: #808285;
+      display: block;
+      display: -webkit-box;
+      -webkit-line-clamp: 4;
+      /* số dòng hiển thị */
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .img-thumbnail {
+    margin-top: 15px;
+    height: 100%;
+  }
+
+  .product-price {
+    color: #444;
+
+    span {
+      font-size: 14px;
+      font-weight: 600;
+    }
+  }
+
+  .btn-trial,
+  .btn-detail {
+    border-radius: 20px;
+    background: #FFE7B8;
+    color: #6C757D;
+    font-size: 13px;
+  }
+
+  .btn-trial:hover,
+  .btn-detail:hover {
+    background: #E09500;
+    color: #FFFFFF;
+  }
+
+  .btn-buy {
+    background: #FCAF17;
+    border-radius: 20px;
+    color: #FFFFFF;
+    font-size: 13px;
+  }
+
+  .btn-buy:hover {
+    background: #E09500;
+    color: #FFFFFF;
+  }
+
+  .group-button {
+    display: flex;
+
+    a {
+      margin-right: 10px;
+    }
+  }
+
+  .page-item.active .page-link {
+    background-color: #fcaf17;
+    border: #fcaf17;
+    color: #fff !important;
+    width: 35px;
+    text-align: center;
+    padding-top: 7px !important;
+  }
+
+
+  .page-item {
+    margin: 0 3px !important;
+    border-radius: 50% !important;
+
+    a {
+      border: none !important;
+      color: #222 !important;
+    }
+  }
+
+  .page-item a.page-link {
+    border-radius: 50%;
+  }
+
+  .page-link {
+    width: 35px !important;
+    height: 35px !important;
+    text-align: center;
+    padding-top: 7px !important;
+  }
+
+  .page-item:last-child .page-link {
+    border-top-right-radius: 50% !important;
+    border-bottom-right-radius: 50% !important;
+  }
+
+  .page-link:focus {
+    box-shadow: none !important;
+  }
+
+  .page-item:first-child .page-link {
+    border-top-left-radius: 50% !important;
+    border-bottom-left-radius: 50% !important;
+  }
+
+  .page-link:hover {
+    width: 30px;
+    text-align: center;
+  }
+
+  .package-price-relate {
+    font-size: 12px !important;
+
+    span {
+      font-weight: bold;
+    }
+
+    label {
+      margin-right: 10px;
+    }
+
+
+    .promotion {
+      width: 40px;
+      height: 20px;
+      padding: 1px 4px;
+      vertical-align: middle;
+      border-radius: 8px 0px 9px 0px;
+      background-color: #fcdfd7;
+      color: #f1592b;
+    }
+
+    .price {
+      font-size: 12px;
+      color: #abb5be;
+      font-weight: normal;
+      text-decoration: line-through;
+    }
+
+    .price-sale {
+      font-size: 14px;
+      font-weight: bold;
+      color: #231f20;
+    }
+  }
+
+  .image-package-detail {
+    overflow: hidden !important;
+    width: 100%;
+    position: relative;
+
+    img {
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
+      transition: transform .6s;
+    }
+
+    img:hover {
+      transform: scale(1.1);
+    }
+  }
+
+  .image-magazine {
+    overflow: hidden !important;
+    width: 100%;
+
+    a {
+      img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        transition: transform .6s;
+      }
+
+      img:hover {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  .image-news {
+    overflow: hidden !important;
+    width: 100%;
+
+    a {
+      img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        transition: transform .6s;
+      }
+
+      img:hover {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  .image-news-hot {
+    overflow: hidden !important;
+    width: 100%;
+
+    a {
+      img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        transition: transform .6s;
+      }
+
+      img:hover {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  .notifi-notpackage {
+    font-size: 15px !important;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    background: #fcaf17;
+    padding: 2px 10px;
+    border-top-left-radius: 5px;
+    color: #fff;
+  }
+
+  .video-trailer {
+    position: relative;
+    padding-bottom: 56.25%;
+    /* 16:9 */
+    height: 0;
+  }
+
+  .video-trailer iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 1px solid #ddd;
+  }
+
+  .contact-to-buy {
+    padding: 5px 15px;
+    margin-top: 5px;
+    border-radius: 10px;
+    background: #efefef;
+    display: inline-block;
+    font-weight: bold;
+    font-style: italic;
+  }
+
+  @media only screen and (max-width: 600px) {
+    .img-hot-news-left {
+      width: 100% !important;
+    }
+  }
+}
+
+.btn-register {
+  background: #FCAF17;
+  font-weight: 700;
+  color: #ffffff;
+  border-radius: 20px;
+
+  &:hover {
+    background: #fcaf17d1;
+  }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/package/package-detail/package-detail.component.ts b/Phaha_Package/src/app/package/package-detail/package-detail.component.ts
new file mode 100644
index 0000000..2e465eb
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-detail/package-detail.component.ts
@@ -0,0 +1,216 @@
+import { Component, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { environment } from 'src/environments/environment';
+import SwiperCore, { Pagination, Navigation } from "swiper";
+import { PackageService } from "../package.service";
+import { Router } from '@angular/router';
+import { PageModel } from 'src/app/Models/model';
+import { DomSanitizer, Meta, SafeHtml, Title } from '@angular/platform-browser';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { AuthenticationService } from 'src/app/auth/service/authentication.service';
+import { LoginComponent } from 'src/app/login/login.component';
+
+SwiperCore.use([Pagination, Navigation]);
+
+@Component({
+  selector: 'app-package-detail',
+  templateUrl: './package-detail.component.html',
+  styleUrls: ['./package-detail.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class PackageDetailComponent implements OnInit {
+  public package: any = {
+    content: '',
+    description: '',
+    editorials: [],
+    image: '',
+    name: '',
+    price: '',
+    promotionPrice: '',
+    strDuration: '',
+  };
+  public relatePackage: any = [];
+  public idAds: number = 0;
+  public baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  public listPaperByPackage: any = {
+    result: []
+  };
+  public percentPromotion: number = 0;
+
+  public currentUser: any = {};
+  public isLogin: boolean = false;
+
+  public newspaperLatest: PageModel = new PageModel();
+  public listNewspaperNew: PageModel = new PageModel();
+  public newspaperLeft = { image: '', title: '', description: '', dateCreate: '', view: 0 };
+  public newspaperRight: any;
+  public fileName: any;
+
+  pathVideo1: SafeHtml = '';
+  pathVideo2: SafeHtml = '';
+  pathVideo3: SafeHtml = '';
+  lang: any;
+
+  constructor(
+    private readonly _packageService: PackageService,
+    private readonly _activatedRoute: ActivatedRoute,
+    private readonly _router: Router,
+    private readonly _title: Title,
+    private readonly _meta: Meta,
+    private readonly _sanitizer: DomSanitizer,
+    private readonly _modalService: NgbModal,
+    private readonly _authenticationService: AuthenticationService
+  ) {
+    this._activatedRoute.params.subscribe(params => {
+      this.idAds = params['id'];
+    });
+    this.lang = localStorage.getItem("lang")
+    this.currentUser = this._authenticationService.currentUserValue;
+    if (this.currentUser && this.currentUser.jwtToken) this.isLogin = true;
+    this.listNewspaperNew.pageSize = 4;
+    this.newspaperLatest.pageSize = 6;
+  }
+
+  onGetDetailPackage(id: number) {
+    this._packageService.getDetailPackage(id)
+      .subscribe(data => {
+        this.package = data.data;
+
+        if (this.package.isAskonomy) {
+          this._router.navigate(['chi-tiet-askonomy', id])
+        }
+        
+        if (this.lang == 'en') {
+          this.package.price = this.package.price / 24780;
+          this.package.promotionPrice = this.package.promotionPrice / 24780;
+        }
+        if (this.package.editorialIds.length > 0)
+          this.getPathVideo(this.package.editorialIds[0])
+        // SEO:
+        this._title.setTitle(data.data.name);
+        this._meta.addTags([
+          { name: 'keyWords', content: 'báo bản quyền, sách bản quyền, thông tin, thông tin uy tín, báo pdf, báo điện tử, sách pdf, sách điện tử' },
+
+          { property: 'og:image', content: data.data.image },
+          { property: 'og:image:secure_url', content: data.data.image },
+          { property: 'og:image:width', content: '1055' },
+          { property: 'og:image:height', content: '559' },
+          { property: 'og:image:type', content: 'image/png' },
+
+          { property: 'twitter:card', content: 'summary_large_image' },
+          { property: 'twitter:title', content: data.data.name },
+          { property: 'twitter:description', content: 'Post ENP là nơi khám phá những tin tức, thông tin uy tín.' },
+          { property: 'twitter:image', content: data.data.image },
+        ]);
+
+        if (this.package.promotionPrice) {
+          this.percentPromotion = ((this.package.price - this.package.promotionPrice) / this.package.price) * 100;
+        }
+      });
+  }
+
+  onGetRelatePackage(id: number) {
+    this._packageService.getRelatePackage(id)
+      .subscribe(data => {
+        this.relatePackage = data.data;
+      })
+  }
+
+  onRedirectPayLink(a: any, type?: number) {
+    if (this.isLogin) {
+      this._router.navigate(['package-pay', a.id, type ?? 1])
+    } else {
+      this._modalService.open(LoginComponent, { size: "md", centered: true });
+    }
+  }
+
+  openModal(content?: TemplateRef<NgbModal>) {
+    this._modalService.open(content, { size: "lg", centered: true });
+  }
+
+  getNewspaper() {
+    this._packageService.getNewspaper(this.idAds, this.newspaperLatest)
+      .subscribe(data => {
+        this.newspaperLatest.result = data.data.result;
+        this.newspaperLatest.totalRecords = data.data.totalItemCount;
+        this.newspaperLatest.result.forEach((x: any) => {
+          if (x.promotionPrice) { x.percentPromotion = ((x.price - x.promotionPrice) / x.price) * 100; }
+        })
+        if (this.newspaperLatest.result.length > 0) {
+          this.newspaperLeft = this.newspaperLatest.result[0];
+        }
+        this.newspaperRight = this.newspaperLatest.result.slice(1);
+      })
+  }
+
+  onGetListLatest() {
+    this._packageService.getListNewspaperLatest(this.idAds, this.listNewspaperNew)
+      .pipe()
+      .subscribe(data => {
+        this.listNewspaperNew.result = data.data.result;
+        this.listNewspaperNew.totalRecords = data.data.totalItemCount;
+      })
+  }
+
+  onPageChange(numberPage: number) {
+    this.newspaperLatest.page = numberPage;
+    this.getNewspaper();
+  }
+
+  onPageChangeNewspaperList(numberPage: number) {
+    this.listNewspaperNew.page = numberPage;
+    this.onGetListLatest();
+  }
+
+  getViewTrialPdf(e: any) {
+    if (this.isLogin) {
+      if (e.path.length > 0) {
+        this.fileName = e.path[0].path.replace(/^.*[\\\/]/, '');
+        this.fileName = this.fileName.replace('.pdf', '')
+        this._router.navigate(['view-trial', e.id], {
+          queryParams: {
+            id: e.path[0].id,
+            fileName: this.fileName
+          }
+        })
+      } else {
+        this._router.navigate(['view-trial', e.id])
+      }
+    } else {
+      this._modalService.open(LoginComponent, { size: "md", centered: true });
+    }
+  }
+
+  getViewPdf(e: any) {
+    if (e.path.length > 0) {
+      let name = e.path[0].path.replace(/^.*[\\\/]/, '');
+      name = name.replace('.pdf', '')
+      this._router.navigate(['view', e.id], {
+        queryParams: {
+          id: e.path[0].id,
+          fileName: name
+        }
+      });
+    } else {
+      this._router.navigate(['view', e.id])
+    }
+  }
+
+  getPathVideo(id: number) {
+    this._packageService.getPathVideoByEditorial(id)
+      .subscribe(data => {
+        this.pathVideo1 = this._sanitizer.bypassSecurityTrustHtml(data.pathVideo1);
+        this.pathVideo2 = this._sanitizer.bypassSecurityTrustHtml(data.pathVideo2);
+        this.pathVideo3 = this._sanitizer.bypassSecurityTrustHtml(data.pathVideo3);
+      })
+  }
+
+
+
+  ngOnInit(): void {
+    this.onGetDetailPackage(this.idAds);
+    this.onGetRelatePackage(this.idAds);
+    // this.onGetListLatest();
+    this.getNewspaper();
+  }
+}
diff --git a/Phaha_Package/src/app/package/package-detail/package-detail.module.ts b/Phaha_Package/src/app/package/package-detail/package-detail.module.ts
new file mode 100644
index 0000000..f557d88
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-detail/package-detail.module.ts
@@ -0,0 +1,40 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { BlockUIModule } from 'ng-block-ui';
+import { SwiperModule } from 'swiper/angular';
+import { PackageHotModule } from '../package-hot/package-hot.module';
+import { PackageRelatedModule } from '../package-related/package-related.module';
+import { PackageDetailComponent } from './package-detail.component';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClient } from '@angular/common/http';
+import { LoginModule } from 'src/app/login/login.module';
+
+@NgModule({
+  declarations: [
+    PackageDetailComponent
+  ],
+  imports: [
+    PackageHotModule,
+    PackageRelatedModule,
+    SwiperModule,
+    RouterModule,
+    CommonModule,
+    NgbModule,
+    LoginModule,
+    BlockUIModule.forRoot(),
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    })
+  ],
+  exports: [
+    PackageDetailComponent
+  ]
+})
+export class PackageDetailModule { }
diff --git a/Phaha_Package/src/app/package/package-hot/package-hot.component.html b/Phaha_Package/src/app/package/package-hot/package-hot.component.html
new file mode 100644
index 0000000..8c63007
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-hot/package-hot.component.html
@@ -0,0 +1,29 @@
+<div class="package-hot box-body">
+  <div class="box-head position-relative">
+    <div class="box-header">
+      <a href="javascript: void(0);">{{'package-hot.title' | translate}}</a>
+    </div>
+  </div>
+  <div class="package-swiper">
+    <swiper [slidesPerView]="1" [spaceBetween]="30" [slidesPerGroup]="1" [loop]="false" [loopFillGroupWithBlank]="true"
+      [pagination]="false" [navigation]="true" class="mySwiper" [breakpoints]="{
+      '640': {
+        slidesPerView: 1,
+        spaceBetween: 30
+      },
+      '768': {
+        slidesPerView: 1,
+        spaceBetween: 30
+      },
+      '1024': {
+        slidesPerView: 4,
+        spaceBetween: 30
+      }
+    }">
+      <ng-template swiperSlide *ngFor="let item of lstHotPackage; let index = index">
+        <app-askonomy-hot *ngIf="item.isAskonomy" [item]="item"></app-askonomy-hot>
+        <app-package-item-hot *ngIf="!item.isAskonomy" [item]="item"></app-package-item-hot>
+      </ng-template>
+    </swiper>
+  </div>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/package/package-hot/package-hot.component.scss b/Phaha_Package/src/app/package/package-hot/package-hot.component.scss
new file mode 100644
index 0000000..f7dff87
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-hot/package-hot.component.scss
@@ -0,0 +1,176 @@
+@import "~swiper/css";
+@import "~swiper/css/pagination";
+@import "~swiper/css/navigation";
+
+app-package-hot {
+  .package-hot {
+    background: #ffffff !important;
+    padding: 10px 0;
+
+    .swiper {
+      width: 100%;
+      height: 100%;
+    }
+
+    .swiper-slide {
+      text-align: center;
+      font-size: 18px;
+      background: #fff;
+
+      /* Center slide text vertically */
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: -webkit-flex;
+      display: flex;
+      -webkit-box-pack: center;
+      -ms-flex-pack: center;
+      -webkit-justify-content: center;
+      justify-content: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      -webkit-align-items: center;
+      align-items: center;
+      align-items: stretch;
+      height: auto;
+    }
+
+    .swiper-slide img {
+      display: block;
+      height: 100%;
+    }
+
+    .package-time {
+      font-weight: 600;
+      font-size: 20px;
+      line-height: 24px;
+      text-align: center;
+      color: #6C757D;
+    }
+
+    .package-price {
+      font-weight: 600;
+      font-size: 20px;
+      line-height: 24px;
+      text-align: center;
+      color: #000000;
+    }
+
+    .total-sell {
+      width: 100%;
+      font-size: 12px;
+    }
+
+    .box-head {
+      margin-bottom: 5px;
+      padding: 5px 10px;
+      border-bottom: 1px solid #eeeeee;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .box-header {
+      a {
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 136.19%;
+        color: #000000;
+        text-decoration: none;
+      }
+    }
+
+    .box-header::after {
+      content: '';
+      width: 100px;
+      border-top: 2px solid #f26b1b;
+      position: absolute;
+      color: transparent;
+      top: 45px;
+      left: 10px;
+    }
+
+    .see-all {
+      a {
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        color: #ABB5BE;
+      }
+
+      i {
+        color: #152536;
+        font-size: 24px;
+      }
+    }
+
+    .package-swiper { 
+      swiper {
+        padding: 0 30px;
+      }
+
+      .swiper-button-prev {
+        left: 0px;
+        background-position: center;
+        background-color: #ABB5BE;;
+      }
+
+      .swiper-button-next:after, .swiper-button-prev:after {
+        font-family: swiper-icons;
+        font-size: 24px;
+        text-transform: none !important;
+        letter-spacing: 0;
+        font-variant: initial;
+        line-height: 1;
+        color: #ffffff;
+      }
+
+      .swiper-button-next {
+        right: 0px;
+        background-position: center;
+        background-color: #ABB5BE;;
+      }
+
+      .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
+        opacity: .35;
+        cursor: auto;
+        pointer-events: none;
+      }
+
+      .swiper-button-next:hover, .swiper-button-prev:hover {
+        background: #FCAF17;
+      }
+
+      .product-image {
+        a {
+          position: relative;
+        }
+
+        position: relative;
+      }
+
+      .product-image:hover .buy-now {
+        top: 47%;
+        opacity: 1;
+        transition: all 300ms;
+        position: absolute;
+      }
+
+      .buy-now {
+        position: absolute;
+        top: 0px;
+        opacity: 0;
+        border: none;
+        -webkit-transform: translateX(-50%);
+        -moz-transform: translateX(-50%);
+        -ms-transform: translateX(-50%);
+        -o-transform: translateX(-50%);
+        transform: translateX(-50%);
+        white-space: nowrap;
+        background-color: #f1592b;
+        padding: 5px 20px;
+        color: #fff;
+        border-radius: 5px;
+      }
+    }
+  }
+}
diff --git a/Phaha_Package/src/app/package/package-hot/package-hot.component.ts b/Phaha_Package/src/app/package/package-hot/package-hot.component.ts
new file mode 100644
index 0000000..24789ae
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-hot/package-hot.component.ts
@@ -0,0 +1,28 @@
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { PackageService } from '../package.service';
+import { finalize } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-package-hot',
+  templateUrl: './package-hot.component.html',
+  styleUrls: ['./package-hot.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class PackageHotComponent implements OnInit {
+  public lstHotPackage: any = [];
+
+  constructor(
+    private _packageService: PackageService,
+  ) { }
+
+  ngOnInit(): void {
+    this.getListHotPackage();
+  }
+
+  getListHotPackage(): void {
+    this._packageService.getListHotPackage()
+      .subscribe(res => {
+        this.lstHotPackage = res.data;
+      });
+  }
+}
diff --git a/Phaha_Package/src/app/package/package-hot/package-hot.module.ts b/Phaha_Package/src/app/package/package-hot/package-hot.module.ts
new file mode 100644
index 0000000..4c6ed6e
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-hot/package-hot.module.ts
@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { SwiperModule } from 'swiper/angular';
+import { PackageItemHotModule } from '../package-item-hot/package-item-hot.module';
+import { PackageHotComponent } from './package-hot.component';
+import { RouterModule } from '@angular/router';
+import { BlockUIModule } from 'ng-block-ui';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClient } from '@angular/common/http';
+import { PackageAskonomyModule } from '../package-askonomy/package-askonomy.module';
+
+@NgModule({
+  declarations: [
+    PackageHotComponent
+  ],
+  imports: [
+    PackageItemHotModule,
+    PackageAskonomyModule,
+    SwiperModule,
+    BrowserModule,
+    RouterModule,
+    BlockUIModule.forRoot(),
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    })
+  ],
+  exports: [
+    PackageHotComponent
+  ]
+})
+export class PackageHotModule { }
diff --git a/Phaha_Package/src/app/package/package-item-hot/package-item-hot.component.html b/Phaha_Package/src/app/package/package-item-hot/package-item-hot.component.html
new file mode 100644
index 0000000..ca402d5
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-item-hot/package-item-hot.component.html
@@ -0,0 +1,56 @@
+<div class="package-item">
+  <div class="package-item-img">
+    <a href="/chi-tiet-goi/{{item.id}}">
+      <img class="img-response" [src]="apiUrl + item.image" (error)="errorHandler($event)">
+    </a>
+
+    <ng-container [ngSwitch]="item.type">
+      <div *ngSwitchCase="1" class="notifi-notpackage text-center">
+        {{'package-type.pdf' | translate}}
+      </div>
+      <div *ngSwitchCase="2" class="notifi-notpackage text-center">
+        {{'package-type.author' | translate}}
+      </div>
+      <div *ngSwitchCase="3" class="notifi-notpackage text-center">
+        {{'package-type.category' | translate}}
+      </div>
+      <div *ngSwitchCase="4" class="notifi-notpackage text-center">
+        {{'package-type.event' | translate}}
+      </div>
+    </ng-container>
+  </div>
+  <h3 class="package-item-title">
+    <a href="/chi-tiet-goi/{{item.id}}">{{item.name}}</a>
+  </h3>
+  <h5 class="editorial">
+    <a *ngFor="let editorial of item.lstEditorials" routerLink="/{{editorial.slug}}">
+      {{editorial.name}}
+    </a>
+  </h5>
+  <div class="price-info">
+    <p *ngIf="item.promotionPrice" [ngClass]="item.promotionPrice ? 'package-item-price-sale' : 'package-item-price'">
+      <span>{{item.price | number}}VNĐ</span>
+    </p>
+    <p class="package-item-price-final">
+      <span>{{item.promotionPrice ?? item.price | number}}VNĐ</span>
+      / {{item.strDuration}}</p>
+  </div>
+  <div class="group-button mt-2">
+    <a href="{{'/package-trial/' + item.id}}" type="button" class="btn btn-trial" *ngIf="item.isTrial && !item.isBought">
+      {{'cta.trial' | translate}}
+    </a>
+    <a href="/chi-tiet-goi/{{item.id}}" class="btn btn-detail">{{'cta.detail' | translate}}</a>
+    <button *ngIf="!item.isBought" (click)="onRedirectPayLink(item)" type="button" class="btn btn-buy">
+      {{'cta.register' | translate}}
+    </button>
+    <button *ngIf="item.isBought" routerLink="/list-news/{{item.id}}" type="button" class="btn btn-buy">
+      {{'cta.read' | translate}}
+    </button>
+  </div>
+  <ng-container *ngIf="item.promotionPrice">
+    <div class="percent-sale text-center">
+      <span class="top-right badge-sale"> - {{(item.price - item.promotionPrice) / item.price * 100 | number : '0.0-0'}}
+        %</span>
+    </div>
+  </ng-container>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/package/package-item-hot/package-item-hot.component.scss b/Phaha_Package/src/app/package/package-item-hot/package-item-hot.component.scss
new file mode 100644
index 0000000..1853c3e
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-item-hot/package-item-hot.component.scss
@@ -0,0 +1,179 @@
+app-package-item-hot {
+  width: 100%;
+  margin-top: 15px;
+  margin-bottom: 15px;
+
+  .package-item {
+    padding: 10px;
+    background: #fff;
+    border-radius: 5px;
+    box-shadow: 0px 0px 10px #ccc;
+    height: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .package-item-img {
+      overflow: hidden;
+      width: 100%;
+      border-radius: 5px;
+      position: relative;
+      text-align: center;
+
+      img {
+        width: 100%;
+        transition: transform 0.6s;
+        margin: auto;
+
+        &:hover {
+          transform: scale(1.1);
+        }
+      }
+    }
+
+    .package-item-title {
+      text-align: center;
+      padding: 10px 4px 0;
+      margin-bottom: 10px;
+
+      a {
+        font-size: 18px;
+        color: #888;
+        font-weight: bold;
+        text-decoration: none;
+
+        &:hover {
+          color: #444;
+        }
+      }
+    }
+
+    .editorial {
+      padding-bottom: 4px;
+      height: 40px;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      a {
+        text-decoration: none;
+        color: #6C757D;
+        margin-right: 10px;
+
+        &:hover {
+          text-decoration: underline;
+          font-weight: 600;
+        }
+      }
+    }
+
+    .package-item-price {
+      text-align: center;
+      color: #444;
+      margin-bottom: 5px;
+
+      span {
+        font-size: 16px;
+        font-weight: 600;
+      }
+    }
+
+    .package-item-sold {
+      background: #eee;
+      text-align: center;
+      // padding: 4px 0;
+      border-radius: 20px;
+      margin-top: 5px;
+
+      span {
+        color: #6C757D;
+        font-size: 12px;
+      }
+    }
+
+    .group-button {
+      display: flex;
+      justify-content: space-around;
+
+      .btn-trial,
+      .btn-detail {
+        border-radius: 20px;
+        background: #ffe7b8;
+        color: #6c757d;
+      }
+
+      .btn-trial:hover,
+      .btn-detail:hover {
+        background: #e09500;
+        color: #ffffff;
+      }
+
+      .btn-buy {
+        background: #fcaf17;
+        border-radius: 20px;
+        color: #ffffff;
+      }
+
+      .btn-buy:hover {
+        background: #e09500;
+        color: #ffffff;
+      }
+    }
+  }
+
+  .price {
+    font-size: 13px;
+    color: #abb5be;
+    font-weight: 700;
+    text-decoration: line-through;
+  }
+
+  .notifi-notpackage {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    background: #fcaf17;
+    padding: 2px 10px;
+    border-top-left-radius: 5px;
+    color: #fff;
+  }
+
+  .price-info {
+    display: flex;
+    justify-content: space-evenly;
+  }
+
+  .package-item-price {
+    text-align: center;
+    color: #444;
+
+    span {
+      font-size: 16px;
+      font-weight: 600;
+    }
+  }
+
+  .package-item-price-sale {
+    text-align: center;
+    color: #808285;
+    text-decoration: line-through;
+
+    span {
+      font-size: 14px;
+      font-weight: 400;
+    }
+  }
+
+  .package-item-price-final {
+    text-align: center;
+    color: #444;
+
+    span {
+      font-size: 16px;
+      font-weight: 600;
+    }
+  }
+}
diff --git a/Phaha_Package/src/app/package/package-item-hot/package-item-hot.component.ts b/Phaha_Package/src/app/package/package-item-hot/package-item-hot.component.ts
new file mode 100644
index 0000000..5918e65
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-item-hot/package-item-hot.component.ts
@@ -0,0 +1,48 @@
+import { Component, Input, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Router, RouterStateSnapshot } from '@angular/router';
+import { environment } from 'src/environments/environment';
+import { query } from "@angular/animations";
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { LoginComponent } from 'src/app/login/login.component';
+
+@Component({
+  selector: 'app-package-item-hot',
+  templateUrl: './package-item-hot.component.html',
+  styleUrls: ['./package-item-hot.component.scss'],
+  encapsulation: ViewEncapsulation.None
+
+})
+export class PackageItemHotComponent implements OnInit {
+
+  @Input() item: any = {};
+  public currentUser: any = {};
+  public isLogin: boolean = false;
+  public apiUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  lang: any;
+
+  constructor(
+    private router: Router,
+    private _modalService: NgbModal,
+  ) {
+    this.lang = localStorage.getItem("lang");
+    this.currentUser = JSON.parse(localStorage.getItem("currentCustomer") ?? "{}");
+    if (typeof (this.currentUser) === 'object' && this.currentUser.jwtToken) {
+      this.isLogin = true;
+    };
+  }
+
+  errorHandler(event: any) {
+    event.target.src = "/assets/images/package/package-default.png";
+  }
+
+  onRedirectPayLink(a: any) {
+    if (this.isLogin) {
+      this.router.navigate(['package-pay', a.id])
+    } else {
+      this._modalService.open(LoginComponent, { size: "md", centered: true });
+    }
+  }
+
+  ngOnInit(): void {
+  }
+}
diff --git a/Phaha_Package/src/app/package/package-item-hot/package-item-hot.module.ts b/Phaha_Package/src/app/package/package-item-hot/package-item-hot.module.ts
new file mode 100644
index 0000000..be72174
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-item-hot/package-item-hot.module.ts
@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PackageItemHotComponent } from './package-item-hot.component';
+import { BrowserModule } from '@angular/platform-browser';
+import { ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClient } from '@angular/common/http';
+import { LoginModule } from 'src/app/login/login.module';
+
+@NgModule({
+  declarations: [
+    PackageItemHotComponent
+  ],
+  imports: [
+    CommonModule,
+    BrowserModule,
+    LoginModule,
+    ReactiveFormsModule,
+    RouterModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    })
+  ],
+  exports: [
+    PackageItemHotComponent
+  ]
+})
+export class PackageItemHotModule { }
diff --git a/Phaha_Package/src/app/package/package-models/GenVietQR.ts b/Phaha_Package/src/app/package/package-models/GenVietQR.ts
new file mode 100644
index 0000000..b9fba37
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-models/GenVietQR.ts
@@ -0,0 +1,23 @@
+export class GenVietQRResponse {
+    msg?: GenVietQRMsgResponse;
+}
+
+export class GenVietQRMsgResponse {
+    header?: GenVietQRHeaderResponse;
+    body?: GenVietQRBodyResponse;
+}
+export class GenVietQRHeaderResponse {
+    requestId?: string;
+    errorCode?: string;
+    errorDesc?: string;
+    secureCode?: string;
+}
+export class GenVietQRBodyResponse {
+    vietQR?: string;
+    vietQRImage?: string;
+    extraInfo1?: string;
+    extraInfo2?: string;
+    extraInfo3?: string;
+    extraInfo4?: string;
+    extraInfo5?: string;
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/package/package-payment/package-payment.component.html b/Phaha_Package/src/app/package/package-payment/package-payment.component.html
new file mode 100644
index 0000000..1be7612
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-payment/package-payment.component.html
@@ -0,0 +1,144 @@
+<block-ui>
+  <div class="container">
+    <nav aria-label="breadcrumb">
+      <ol class="breadcrumb">
+        <li class="breadcrumb-item"><a routerLink="/" style="color: #000;">{{'breadcrumb.home' | translate}}</a>
+        </li>
+        <li class="breadcrumb-item active" aria-current="page">{{'breadcrumb.payment' | translate}}</li>
+      </ol>
+    </nav>
+    <div class="card box-payment">
+      <form [formGroup]="formData" class="form-horizontal needs-validation">
+        <header class="payment-header">{{'payment.title' | translate}}</header>
+        <div *ngIf="!accessPayment">
+          <img style="width: 100%;" [src]="'/assets/images/background/maxresdefault.png'">
+        </div>
+        <div *ngIf="accessPayment">
+          <div class="row">
+            <div class="col-md-1 col-sm-2 col-12">
+              <img [src]="baseUrl + infoDetailPackage?.image" class="img-response mb-2">
+            </div>
+            <div class="col-md-11 col-sm-10 col-12">
+              <div class="row">
+                <div class="col-lg-7 col-md-12 col-12">
+                  <h3>{{infoDetailPackage?.name}}</h3>
+                  <p class="payment-price">
+                    <span class="promotional-price">
+                      {{infoDetailPackage?.promotionPrice ?? infoDetailPackage?.price |
+                      number}}VNĐ
+                    </span>
+                    <span class="old-price" *ngIf="infoDetailPackage?.promotionPrice">
+                      {{infoDetailPackage?.price | number}}VNĐ
+                    </span>
+                    <span class="percent-discount" *ngIf="infoDetailPackage?.promotionPrice">
+                      (<i>- {{percentPromotion | number : '0.0-0'}}%</i>)
+                    </span>
+                  </p>
+                  <p *ngIf="packageId == 301">{{'PROMOTION_UNTIL_MAY_40' | translate}}</p>
+                  <div class="link-office">
+                    <a *ngFor="let item of infoDetailPackage?.editorials"
+                      routerLink="/{{item.slug}}" [title]="item.name">
+                      {{item.name}}
+                    </a>
+                  </div>
+                </div>
+                <div class="col-lg-2 col-md-6 col-12">
+                  <div class="d-flex mt-2" *ngIf="type != 2">
+                    <label style="width: 80px; line-height: 32px; font-weight: 600;">{{'payment.amount' | translate}}</label>
+                    <input *ngIf="!packuserid" style="width: calc(100% - 80px);" type="number" class="form-control" formControlName="total">
+                    <span style="line-height: 34px;" *ngIf="packuserid && packuserid > 0">{{f_value.total}}</span>
+                  </div>
+                </div>
+                <div class="col-lg-3 col-md-6 col-12">
+                  <div class="d-flex mt-2">
+                    <label style="width: 80px; line-height: 32px; font-weight: 600;">
+                      {{'payment.money' | translate}}</label>
+                    <div style="width: calc(100% - 80px)" class="into-money">
+                      {{(infoDetailPackage?.promotionPrice ?? infoDetailPackage?.price)
+                      * f['total'].value | number}}VNĐ
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="payment-total-money">
+            <div class="row">
+              <div class="offset-md-8 col-md-2 col-6">{{'payment.total' | translate}}</div>
+              <div class="col-md-2 col-6">
+                {{(infoDetailPackage?.promotionPrice ?? infoDetailPackage?.price) * f['total'].value | number}}VNĐ
+              </div>
+            </div>
+          </div>
+          <div style="border-top: 3px solid #222; border-bottom: 1px solid #ccc; margin: 10px 0; padding: 10px 0;">
+            <div class="align-items-center">
+              <div class="row">
+                <div class="col-4">
+                  <div class="input-group mt-2">
+                    <input type="text" class="form-control input-code" [(ngModel)]="codePayment"
+                      formControlName="codePayment" placeholder="{{'payment.placeholder-code' | translate}}">
+                    <div class="input-group-append">
+                      <button class="btn btn-code" type="button" (click)="paymentByCode()">{{'payment.apply' |
+                        translate}}</button>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-8">
+                  <div class="box-action-payment d-flex">
+                    <!-- <button type="button" class="btn btn-success rounded-pill" (click)="onPaymentPackage(2)">
+                      {{'payment.bank-transfer' | translate}}
+                    </button> -->
+                    <button type="button" class="btn btn-success rounded-pill" (click)="onPaymentPackage(1)">
+                      {{'payment.payment-gateway' | translate}}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div>
+            <input type="checkbox" class="form-check-input" id="customCheck1" (change)="showExportBill()">
+            <label style="padding: 1px 5px;" class="col-form-label" for="customCheck1">
+              {{'payment.invoice' | translate}}
+            </label>
+          </div>
+          <div class="export-bill" *ngIf="isShow">
+            <label for="packageName" class="col-md-8 col-form-label">
+              {{'payment.info-company.name' | translate}}
+              <!-- <span class="text-danger">(*)</span> -->
+            </label>
+            <div class="col-md-12">
+              <input class="input-export-bill" id="packageName"
+                placeholder="{{'payment.info-company.name-placeholder' | translate}}"
+                formControlName="enterpriseName" />
+            </div>
+            <label for="packageName" class="col-md-8 col-form-label">
+              {{'payment.info-company.address' | translate}}
+              <!-- <span class="text-danger">(*)</span> -->
+            </label>
+            <div class="col-md-12">
+              <input class="input-export-bill" placeholder="{{'payment.info-company.address-placeholder' | translate}}"
+                formControlName="enterpriseAddress" />
+            </div>
+            <label for="packageName" class="col-md-8 col-form-label">
+              {{'payment.info-company.tax-code' | translate}}
+              <!-- <span class="text-danger">(*)</span> -->
+            </label>
+            <div class="col-md-12">
+              <input class="input-export-bill" placeholder="{{'payment.info-company.tax-code-placeholder' | translate}}"
+                formControlName="enterpriseTaxCode" />
+            </div>
+            <label for="packageName" class="col-md-8 col-form-label">
+              {{'payment.info-company.email' | translate}}
+              <!-- <span class="text-danger">(*)</span> -->
+            </label>
+            <div class="col-md-12">
+              <input class="input-export-bill" placeholder="{{'payment.info-company.email-placeholder' | translate}}"
+                formControlName="enterpriseEmail" />
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</block-ui>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/package/package-payment/package-payment.component.scss b/Phaha_Package/src/app/package/package-payment/package-payment.component.scss
new file mode 100644
index 0000000..12c705d
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-payment/package-payment.component.scss
@@ -0,0 +1,226 @@
+app-package-payment {
+  .box-payment {
+    padding: 15px;
+    overflow: auto;
+    background: #fff !important;
+
+    & > table {
+      min-width: 500px;
+      box-shadow: 0 0 3px #ccc;
+      border-radius: 5px;
+      margin-top: 20px;
+    }
+
+    .box-action-payment {
+      text-align: right;
+      padding: 5px 0;
+      justify-content: flex-end;
+
+      button,
+      a {
+        margin-left: 10px;
+        padding-left: 10px;
+        padding-right: 10px;
+        font-weight: 600;
+        font-size: 15px;
+      }
+    }
+
+    .payment-price {
+      span {
+        margin-right: 10px;
+      }
+
+      .promotional-price {
+        font-weight: 600;
+        font-size: 16px;
+      }
+
+      .old-price {
+        color: #555;
+        text-decoration: line-through;
+      }
+
+      .percent-discount {
+        font-weight: 600;
+        color: #444;
+        font-size: 16px;
+      }
+    }
+
+    .payment-header {
+      text-align: center;
+      font-size: 30px;
+      font-weight: 600;
+      border-bottom: 3px solid #222;
+      margin-bottom: 10px;
+    }
+
+    .payment-total-money {
+      padding-top: 10px;
+      border-top: 1px solid #ccc;
+
+      div {
+        font-size: 18px;
+      }
+    }
+  }
+
+  .breadcrumb-item {
+    font-size: 15px !important;
+
+    a {
+      text-decoration: none;
+      color: #666;
+      font-size: 15px !important;
+    }
+  }
+
+  .link-office {
+    padding-bottom: 8px;
+    a {
+      text-decoration: none;
+      color: #333;
+      font-weight: 600;
+      padding: 4px 10px;
+      background: #efefef;
+      border-radius: 3px;
+      margin-right: 4px;
+    }
+  }
+
+  .custom-radio:checked,
+  [type="radio"]:not(:checked) {
+    position: absolute;
+    left: -9999px;
+  }
+
+  .custom-radio:checked + label,
+  .custom-radio:not(:checked) + label {
+    position: relative;
+    padding-left: 28px;
+    cursor: pointer;
+    line-height: 20px;
+    display: inline-block;
+    color: #666;
+    margin: 0 15px;
+    margin-left: 0;
+  }
+
+  .custom-radio:checked + label:before,
+  .custom-radio:not(:checked) + label:before {
+    content: "";
+    position: absolute;
+    left: 1px;
+    top: 1px;
+    width: 18px;
+    height: 18px;
+    border: 1px solid #ddd;
+    border-radius: 100%;
+    background: #fff;
+  }
+
+  .custom-radio:checked + label:after,
+  .custom-radio:not(:checked) + label:after {
+    content: "";
+    width: 12px;
+    height: 12px;
+    background: #ffa900;
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    border-radius: 100%;
+    -webkit-transition: all 0.2s ease;
+    transition: all 0.2s ease;
+  }
+
+  .custom-radio:not(:checked) + label:after {
+    opacity: 0;
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+
+  .custom-radio:checked + label:after {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+
+  .checkbox-custom {
+    opacity: 0;
+    position: absolute;
+  }
+
+  .checkbox-custom,
+  .checkbox-custom-label {
+    display: inline-block;
+    vertical-align: middle;
+    margin: 5px;
+    cursor: pointer;
+  }
+
+  .checkbox-custom + .checkbox-custom-label:before {
+    content: "";
+    background: #fff;
+    border-radius: 5px;
+    border: 2px solid #ddd;
+    display: inline-block;
+    vertical-align: middle;
+    width: 10px;
+    height: 10px;
+    padding: 2px;
+    margin-right: 10px;
+    text-align: center;
+  }
+
+  .checkbox-custom:checked + .checkbox-custom-label:before {
+    content: "";
+    display: inline-block;
+    width: 1px;
+    height: 5px;
+    border: solid #ffa900;
+    border-width: 0 3px 3px 0;
+    transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    border-radius: 0px;
+    margin: 0px 15px 5px 5px;
+  }
+
+  .into-money {
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 32px;
+  }
+
+  .btn-code {
+    background: #ffa900;
+    color: white;
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+  .input-code:focus {
+    outline: none;
+    box-shadow: none;
+    border: 1px solid #ced4da;;
+  }
+}
+
+.input-export-bill {
+  width: 100%;
+  padding: 6px;
+  border: 1px solid #8a9fb3;
+  border-radius: 4px;
+}
+
+.export-bill {
+  padding: 18px 13px;
+  border: 1px solid #8a9fb3;
+  border-radius: 4px;
+  max-width: 500px;
+}
+
+.img-response {
+  max-width: 100%;
+}
diff --git a/Phaha_Package/src/app/package/package-payment/package-payment.component.ts b/Phaha_Package/src/app/package/package-payment/package-payment.component.ts
new file mode 100644
index 0000000..18e4c79
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-payment/package-payment.component.ts
@@ -0,0 +1,185 @@
+import { Component, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { PackagePaymentService } from './package-payment.service';
+import { finalize } from 'rxjs/operators';
+import { environment } from 'src/environments/environment';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ToastrService } from 'ngx-toastr';
+import { Title } from '@angular/platform-browser';
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import { AuthenticationService } from 'src/app/auth/service/authentication.service';
+import { LoginComponent } from 'src/app/login/login.component';
+
+
+@Component({
+  selector: 'app-package-payment',
+  templateUrl: './package-payment.component.html',
+  styleUrls: ['./package-payment.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class PackagePaymentComponent implements OnInit {
+  @ViewChild('paymentTransfer') paymentTransfer: TemplateRef<any> | undefined;
+  packageId: any = null;
+  type: any = null;
+  packuserid: any = null;
+  public infoDetailPackage: any = {};
+  public percentPromotion: number = 0;
+  public baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  public formData: FormGroup;
+  public paymentTransferModel: any;
+  public isShow: boolean = false;
+  public codePayment: any;
+  submitted = false;
+  accessPayment = false;
+  lang: any;
+  officePaymentIds = environment.editor_payment_ids;
+  currentUser: any = {};
+  isLogin: boolean = false;
+
+  constructor(
+    private readonly _packagePaymentService: PackagePaymentService,
+    private readonly _router: Router,
+    private readonly _formBuilder: FormBuilder,
+    private readonly _toart: ToastrService,
+    private readonly title: Title,
+    private readonly router: Router,
+    private readonly _modalService: NgbModal,
+    private readonly _route: ActivatedRoute,
+    private readonly _authenticationService: AuthenticationService,
+  ) {
+    this.lang = localStorage.getItem("lang");
+
+    this.packageId = this._route.snapshot.paramMap.get('id');
+    this.type = this._route.snapshot.paramMap.get('type') ?? 1;
+    this.packuserid = this._route.snapshot.paramMap.get('packuserid');
+
+    if (this.packuserid) {
+      // Lấy số lượng
+      this.getTotal();
+    }
+
+    this.formData = this._formBuilder.group({
+      total: [1, [Validators.pattern("^[0-9]*$"), Validators.min(1), Validators.required, Validators.max(1000)]],
+      promotionPrice: [this.infoDetailPackage?.promotionPrice, [Validators.pattern("^[0-9]*$")]],
+      price: [this.infoDetailPackage?.price, [Validators.pattern("^[0-9]*$")]],
+      name: [this.infoDetailPackage?.name, [Validators.required]],
+      enterpriseName: [''],
+      enterpriseTaxCode: [''],
+      enterpriseAddress: [''],
+      enterpriseEmail: [''],
+      codePayment: [''],
+      type: [1],
+    });
+
+    this.currentUser = this._authenticationService.currentUserValue;
+    if (this.currentUser && this.currentUser.jwtToken) this.isLogin = true;
+
+    // Kiểm tra xem đã login hay chưa
+    if (!this.isLogin)
+      this._modalService.open(LoginComponent, { size: "md", centered: true });
+  }
+
+  get f() {
+    return this.formData.controls;
+  }
+
+  get f_value() {
+    return this.formData.value;
+  }
+
+  getTotal() {
+    this._packagePaymentService.getTotal(this.packuserid)
+      .subscribe(res => {
+        this.formData.controls['total'].setValue(res);
+      })
+  }
+
+  onPaymentPackage(payType: number) {
+    if (!this.isLogin) {
+      this._modalService.open(LoginComponent, { size: "md", centered: true });
+      return;
+    }
+
+    if (payType) {
+      if (this.formData.value.total < 1) {
+        this._toart.error('Số lượng không được nhỏ hơn 1', 'Lỗi', { timeOut: 2000 })
+      }
+      if (!Number.isInteger(this.formData.value.total)) {
+        this._toart.error('Số lượng phải là số nguyên', 'Lỗi', { timeOut: 2000 })
+      }
+      this.infoDetailPackage.total = this.formData.controls['total'].value;
+      if (this.formData.valid) {
+        if (payType === 1) {
+          this._packagePaymentService.onPayment({
+            id: this.packageId,
+            total: this.formData.controls['total'].value,
+            type: this.type,
+            packuserid: this.packuserid
+          })
+            .subscribe((res: any) => {
+              window.open(res.data, '_self');
+            });
+        } else if (payType === 2) {
+          this._packagePaymentService.onPaymentTransfer({
+            id: this.packageId, total: this.formData.controls['total'].value,
+            enterpriseName: this.formData.controls['enterpriseName'].value,
+            type: this.type,
+            packuserid: this.packuserid
+          })
+            .subscribe((res: any) => {
+              this.paymentTransferModel = res.data;
+              this.router.navigate(['payment-info', this.paymentTransferModel.id])
+            });
+        }
+
+      }
+    } else {
+      this._toart.error('Bắt buộc chọn hình thức thanh toán', 'Lỗi', {
+        timeOut: 2000
+      })
+    }
+  }
+
+  onGetDetailPackage() {
+    this._packagePaymentService.getDetailPackage(this.packageId, this.type)
+      .subscribe(res => {
+        if (res.data.editorialIds.some((x: number) => this.officePaymentIds.indexOf(x) != -1) && res.data.editorialIds.length == 1)
+          this.accessPayment = true;
+        this.infoDetailPackage = res.data;
+        this.formData.patchValue({
+          total: 1,
+          promotionPrice: res.data.promotionPrice,
+          price: res.data.price,
+          name: res.data.name,
+          type: this.type
+        });
+        if (this.infoDetailPackage.promotionPrice) {
+          this.percentPromotion = ((this.infoDetailPackage.price - this.infoDetailPackage.promotionPrice) / this.infoDetailPackage.price) * 100;
+        }
+      });
+  }
+
+  onUpdateTotal() {
+  }
+
+  showExportBill() {
+    this.isShow = !this.isShow;
+  }
+
+  paymentByCode() {
+    this._packagePaymentService.paymentByCode(this.packageId, this.codePayment)
+      .subscribe(res => {
+        this._router.navigate([`/list-news/${res.id}`]);
+      });
+  }
+
+  ngOnInit(): void {
+    this._modalService.dismissAll('');
+
+    if (this.packageId) {
+      this.onGetDetailPackage();
+    }
+
+    this.title.setTitle('Post ENP - Thanh toán');
+  }
+}
diff --git a/Phaha_Package/src/app/package/package-payment/package-payment.service.ts b/Phaha_Package/src/app/package/package-payment/package-payment.service.ts
new file mode 100644
index 0000000..802ee00
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-payment/package-payment.service.ts
@@ -0,0 +1,47 @@
+import {HttpClient, HttpParams} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+
+export class PackagePaymentService {
+  constructor(
+    private _client: HttpClient
+  ) {
+  }
+
+  onPayment(payments: any) {
+    return this._client.post<any>("/package/payment", payments);
+  }
+
+  onPaymentTransfer(payments: any) {
+    return this._client.post<any>("/package/payment-transfer", payments);
+  }
+
+  onConfirmPayment(txnResponseCode: any, merchTxnRef: any, secureHash: any) {
+    let params = new HttpParams();
+    params = params.append('vpc_TxnResponseCode', txnResponseCode.code);
+    params = params.append('vpc_MerchTxnRef', merchTxnRef);
+    params = params.append('vpc_SecureHash', secureHash);
+
+    return this._client.get(`/package/payment-confirm`, {params});
+  }
+
+  getDetailPackage(id: number, type: number) {
+    let params = new HttpParams();
+    if(type)
+      params = params.append('type', `${type}`);
+    return this._client.get<any>(`/package/detail/${id}`, {params});
+  }
+
+  paymentByCode(id: number, code: any) {
+    let params = new HttpParams();
+    params = params.append('code', code);
+    return this._client.get<any>(`/package/payment-by-access-code/${id}`, {params});
+  }
+
+  getTotal(packuserid: any){
+    return this._client.get<any>(`/package/get-total/${packuserid}`);
+  }
+}
diff --git a/Phaha_Package/src/app/package/package-payment/payment-info/payment-info.component.html b/Phaha_Package/src/app/package/package-payment/payment-info/payment-info.component.html
new file mode 100644
index 0000000..56c6b8c
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-payment/payment-info/payment-info.component.html
@@ -0,0 +1,94 @@
+<block-ui></block-ui>
+<div class="container" style="background: white;">
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item"><a routerLink="/" style="color: #000;">{{'breadcrumb.home' | translate}}</a>
+      </li>
+      <li class="breadcrumb-item active" aria-current="page">{{'breadcrumb.payment' | translate}}</li>
+    </ol>
+  </nav>
+  <div class="d-flex">
+    <div class="card box-payment">
+      <div class="box-head position-relative mb-3">
+        <div class="box-header">
+          <a href="#">{{'payment-info.package-info' | translate}}</a>
+        </div>
+      </div>
+      <div class="image-package-detail">
+        <img [src]="baseUrl + packageDetail?.image" class="img-package">
+      </div>
+      <div class="form-group">
+        <label>{{'payment-info.package-name' | translate}}</label>
+        <span>{{packageModel?.packageName}}</span>
+      </div>
+      <div class="form-group d-flex">
+        <label>{{'payment-info.editorials' | translate}}</label>
+        <div class="btn-publisher-group">
+          <span *ngFor="let item of packageDetail?.editorials">
+            <button routerLink="/{{item.slug}}" type="button"
+              class="btn btn-publisher">{{item.name}}</button>
+          </span>
+        </div>
+      </div>
+      <div class="form-group">
+        <label>{{'payment-info.price' | translate}}</label>
+        <span>{{packageModel?.price | number}} VNĐ</span>
+      </div>
+      <div class="form-group">
+        <label>{{'payment-info.amount' | translate}}</label>
+        <span>{{packageModel?.total}}</span>
+      </div>
+      <div class="total-price">
+        <label>{{'payment-info.total' | translate}}</label>
+        <span>{{packageModel?.total * packageModel?.price | number}} VNĐ</span>
+      </div>
+    </div>
+    <div class="card box-bank">
+      <div>
+        <div class="box-head position-relative mb-3">
+          <div class="box-header">
+            <a href="#">{{'payment-info.transfer-info' | translate}}</a>
+          </div>
+        </div>
+        <div class="form-group">
+          <label>{{'payment-info.bank-name' | translate}}</label>
+          <span>{{bankName}}</span>
+        </div>
+        <div class="form-group">
+          <label>{{'payment-info.bank-number' | translate}}</label>
+          <span>{{bankNumber}}</span>
+        </div>
+        <div class="form-group">
+          <label>{{'payment-info.bank-account' | translate}}</label>
+          <span>{{bankUser}}</span>
+        </div>
+      </div>
+      <div>
+        <div>
+          <div style="font-size: 16px">{{'payment-info.content-transfer' | translate}}
+            (<i>{{'payment-info.copy-content' | translate}}</i>)
+          </div>
+          <div class="code-bank">
+            <span>{{packageModel?.merchTxnRef}}</span>
+            <button placement="top" ngbTooltip="Copy" (click)="copyMessage(packageModel?.merchTxnRef)"><i
+                class="uil uil-copy"></i>
+            </button>
+          </div>
+          <div *ngIf="packageModel" style="text-align: center;">
+            <img [src]="qrCode" style="max-width: 200px;">
+          </div>
+          <i>{{'payment-info.note-1' | translate}}</i>
+          <br>
+          <b><i>{{'payment-info.note-2' | translate}}</i></b>
+        </div>
+      </div>
+      <div>
+        <div class="box-action-payment">
+          <button type="button" class="btn btn-success rounded-pill" routerLink="/"
+            style="color: white">{{'payment-info.home' | translate}}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/package/package-payment/payment-info/payment-info.component.scss b/Phaha_Package/src/app/package/package-payment/payment-info/payment-info.component.scss
new file mode 100644
index 0000000..e1d15a6
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-payment/payment-info/payment-info.component.scss
@@ -0,0 +1,160 @@
+app-payment-info {
+  .box-payment {
+    padding: 10px 15px;
+    overflow: auto;
+    margin-right: 20px;
+    width: 100%;
+
+    .form-group {
+      margin-bottom: 10px;
+
+      span {
+        padding: 0 10px;
+        font-weight: bold;
+        font-size: 14px;
+      }
+
+      label {
+        font-size: 15px;
+        line-height: 26px;
+      }
+    }
+  }
+
+  .box-bank {
+    padding: 10px 15px;
+    overflow: auto;
+    width: 100%;
+    max-width: 600px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .form-group {
+      margin-bottom: 10px;
+
+      span {
+        padding: 0 10px;
+        font-weight: bold;
+        font-size: 16px;
+        text-transform: uppercase;
+      }
+
+      label {
+        font-size: 15px;
+        line-height: 26px;
+      }
+    }
+  }
+
+
+  .box-action-payment {
+    text-align: center;
+    padding: 5px 0;
+
+    button,
+    a {
+      margin-left: 10px;
+      padding-left: 30px;
+      padding-right: 30px;
+      font-weight: 600;
+      font-size: 16px;
+    }
+  }
+
+  .box-head {
+    margin-bottom: 5px;
+    border-bottom: 1px solid #eeeeee;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-right: -15px;
+    margin-left: -15px;
+    padding: 0px 10px;
+  }
+
+  .box-header {
+    a {
+      font-weight: 400;
+      font-size: 24px;
+      color: #000000;
+      text-decoration: none;
+    }
+  }
+
+  .box-header::after {
+    content: '';
+    width: 150px;
+    border-top: 2px solid #f26b1b;
+    position: absolute;
+    color: transparent;
+    top: 35px;
+    left: 10px;
+  }
+
+  .image-package-detail {
+    overflow: hidden !important;
+    width: 100%;
+    position: relative;
+    text-align: center;
+
+    img {
+      height: 100%;
+      width: 150px;
+      transition: transform .6s;
+    }
+
+    img:hover {
+      transform: scale(1.1);
+    }
+  }
+
+  .btn-publisher {
+    border: 1px solid #6C757D;
+    border-radius: 50px;
+    margin-right: 10px;
+  }
+
+  .btn-publisher:hover {
+    background: #FFE7B8;
+    border-radius: 50px;
+    border: 1px solid #FFE7B8;
+    color: #E09500;
+  }
+
+  .total-price {
+    border-top: 1px solid #ccc;
+    margin: 0 -15px;
+    padding: 15px;
+    display: flex;
+    justify-content: space-between;
+
+    label, span {
+      font-size: 24px;
+    }
+  }
+
+  .code-bank {
+    background: #FFE7B8;
+    border-radius: 5px;
+    padding: 0 10px !important;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 6px;
+
+    span {
+      font-size: 16px !important;
+    }
+
+    button {
+      background: none;
+      border: none;
+
+      i {
+        font-size: 24px;
+      }
+    }
+  }
+}
+
diff --git a/Phaha_Package/src/app/package/package-payment/payment-info/payment-info.component.ts b/Phaha_Package/src/app/package/package-payment/payment-info/payment-info.component.ts
new file mode 100644
index 0000000..ddbdd4c
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-payment/payment-info/payment-info.component.ts
@@ -0,0 +1,96 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { environment } from "../../../../environments/environment";
+import { finalize } from "rxjs/operators";
+import { PaymentInfoService } from "./payment-info.service";
+import { ActivatedRoute, Router } from "@angular/router";
+import { PackageService } from "../../package.service";
+import { ToastrService } from "ngx-toastr";
+import { GenVietQRResponse } from "../../package-models/GenVietQR";
+
+
+@Component({
+  selector: 'app-payment-info',
+  templateUrl: './payment-info.component.html',
+  styleUrls: ['./payment-info.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class PaymentInfoComponent implements OnInit {
+  public packageModel: any;
+  public packageDetail: any;
+  public bankName: any;
+  public bankNumber: any;
+  public bankUser: any;
+  public baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  public id: number = 0;
+  qrCode = '';
+  genVietQR: GenVietQRResponse = new GenVietQRResponse();
+
+  constructor(
+    private _paymentInfoService: PaymentInfoService,
+    private _activatedRoute: ActivatedRoute,
+    private _packageService: PackageService,
+    private _toart: ToastrService,
+    private _router: Router
+  ) {
+    this._activatedRoute.params.subscribe(params => {
+      this.id = params['id'];
+    });
+  }
+
+  ngOnInit(): void {
+    this.detailBank();
+    this.detailPackage();
+  }
+
+  detailBank() {
+    this._paymentInfoService.getDetailBank()
+      .subscribe(res => {
+        this.bankName = res.data.bankValue[0].value;
+        this.bankNumber = res.data.bankValue[1].value;
+        this.bankUser = res.data.bankValue[2].value;
+      });
+  }
+
+  detailPackage() {
+    this._paymentInfoService.getPackageInfo(this.id)
+      .subscribe(res => {
+        this.packageModel = res.data;
+        this.genVietQR = res.vietQR as GenVietQRResponse;
+        this.qrCode = `data:image/png;base64,${this.genVietQR.msg?.body?.vietQRImage}`.replace(' (see https://g.co/ng/security#xss)', '');
+        // this.qrCode = `https://img.vietqr.io/image/bidv-22010007056733-compact.jpg?amount=${this.packageModel.price * this.packageModel.total}&addInfo=${this.packageModel.merchTxnRef}`;
+        this.onGetDetailPackage(this.packageModel.packageId);
+      });
+  }
+
+  onGetDetailPackage(id: number) {
+    this._packageService.getDetailPackage(id)
+      .subscribe(res => {
+        this.packageDetail = res.data;
+
+        // setInterval(() => {
+        //   this._paymentInfoService.checkStatusPaybill(this.packageModel.merchTxnRef)
+        //     .subscribe(res => {
+        //       if(res == true)
+        //         this._router.navigate([`/chi-tiet-goi/${this.packageModel.packageId}`]);
+        //     });
+        // }, 60000);
+      });
+  }
+
+  copyMessage(val: string) {
+    const selBox = document.createElement('textarea');
+    selBox.style.position = 'fixed';
+    selBox.style.left = '0';
+    selBox.style.top = '0';
+    selBox.style.opacity = '0';
+    selBox.value = val;
+    document.body.appendChild(selBox);
+    selBox.focus();
+    selBox.select();
+    document.execCommand('copy');
+    document.body.removeChild(selBox);
+    this._toart.success('Copy nội dung thành công!', 'Thành công', {
+      timeOut: 2000
+    })
+  }
+}
diff --git a/Phaha_Package/src/app/package/package-payment/payment-info/payment-info.service.ts b/Phaha_Package/src/app/package/package-payment/payment-info/payment-info.service.ts
new file mode 100644
index 0000000..f579245
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-payment/payment-info/payment-info.service.ts
@@ -0,0 +1,25 @@
+import {Injectable} from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PaymentInfoService {
+
+  constructor(
+    private _client: HttpClient
+  ) {
+  }
+
+  getDetailBank() {
+    return this._client.get<any>(`/package/bank-setting`);
+  }
+
+  getPackageInfo(id: number) {
+    return this._client.get<any>(`/package/detail-package-user/${id}`);
+  }
+
+  checkStatusPaybill(code: number){
+    return this._client.get<any>(`/package/status-paybill/${code}`);
+  }
+}
diff --git a/Phaha_Package/src/app/package/package-payment/payment-success/payment-success.component.html b/Phaha_Package/src/app/package/package-payment/payment-success/payment-success.component.html
new file mode 100644
index 0000000..2239955
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-payment/payment-success/payment-success.component.html
@@ -0,0 +1,18 @@
+<block-ui>
+  <div class="success-popup">
+    <div class="container">
+      <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+          <li class="breadcrumb-item"><a routerLink="/">{{'breadcrumb.home' | translate}}</a></li>
+          <li class="breadcrumb-item"><a href="/list-news/{{id}}">{{'cta.read' | translate}}</a></li>
+          <li class="breadcrumb-item active" aria-current="page">{{'breadcrumb.payment' | translate}}</li>
+        </ol>
+      </nav>
+      <div id="content-payment" class="mb-5 text-center">
+        <img [src]="txnResponseCode.success ? '../../../../assets/image/success-popup.png' : '../../../../assets/image/cancel-logo.png'" alt="" [width]="checkMobile? '100' : '280'" [height]="checkMobile? '100' : '280'">
+        <div class="payment-messages" [innerHTML]="currentLang == 'vi' ? txnResponseCode.messages_vi : txnResponseCode.messages_en" ></div>
+        <a href="/list-news/{{id}}">{{'cta.read' | translate}}</a>
+      </div>
+    </div>
+  </div>
+</block-ui>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/package/package-payment/payment-success/payment-success.component.scss b/Phaha_Package/src/app/package/package-payment/payment-success/payment-success.component.scss
new file mode 100644
index 0000000..23752d7
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-payment/payment-success/payment-success.component.scss
@@ -0,0 +1,45 @@
+.success-popup {
+    .breadcrumb {
+        margin: 0;
+        padding: 16px 0;
+
+        a {
+            text-decoration: none;
+        }
+    }
+
+    #content-payment {
+        background-color: #fff;
+        padding: 64px 0;
+        gap: 24px;
+
+        a {
+            padding: 10px 20px;
+            font-size: 16px;
+            border: none;
+            background-color: #fcaf17;
+            border-radius: 4px;
+            cursor: pointer;
+            text-decoration: none;
+            color: #fff;
+
+            &:hover {
+                background-color: #e09500;
+            }
+        }
+
+        .payment-messages::ng-deep {
+            padding-bottom: 20px;
+            p {
+                font-size: 16px;
+                margin-bottom: 5px;
+            }
+            p:first-child {
+                font-size: 30px;
+                font-weight: 600;
+                line-height: 40px;
+                margin-top: 20px;
+            }
+        }
+    }
+}
diff --git a/Phaha_Package/src/app/package/package-payment/payment-success/payment-success.component.ts b/Phaha_Package/src/app/package/package-payment/payment-success/payment-success.component.ts
new file mode 100644
index 0000000..1445174
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-payment/payment-success/payment-success.component.ts
@@ -0,0 +1,80 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { PackagePaymentService } from '../package-payment.service';
+
+@Component({
+  selector: 'app-payment-success',
+  templateUrl: './payment-success.component.html',
+  styleUrls: ['./payment-success.component.scss']
+})
+export class PaymentSuccessComponent implements OnInit {
+  id: any;
+  messagePayment: any;
+  statusPayment: boolean = true;
+  public checkMobile: boolean = false;
+  txnResponseCodes: any[] = [
+    { success: true, code: '0', messages_en: "<p>Transaction is successful</p>", messages_vi: "<p>Giao dịch thành công</p>" },
+    { success: false, code: '1', messages_en: "<p>The transaction is unsuccessful.</p><p>This transaction has been declined by issuer bank or card have been not registered online payment services.</p><p>Please contact your bank for further clarification.</p>", messages_vi: "<p>Giao dịch không thành công</p><p>Ngân hàng phát hành thẻ không cấp phép cho giao dịch hoặc thẻ chưa được kích hoạt dịch vụ thanh toán trên Internet.</p><p>Vui lòng liên hệ ngân hàng theo số điện thoại sau mặt thẻ được hỗ trợ chi tiết.</p>" },
+    { success: false, code: '2', messages_en: "<p>The transaction is unsuccessful.</p><p>This transaction has been declined by issuer bank.</p><p>Please contact your bank for further clarification.</p>", messages_vi: "<p>Giao dịch không thành công</p><p>Ngân hàng phát hành thẻ từ chối cấp phép cho giao dịch.</p><p>Vui lòng liên hệ ngân hàng theo số điện thoại sau mặt thẻ để biết chính xác nguyên nhân Ngân hàng từ chối.</p>" },
+    { success: false, code: '3', messages_en: "<p>The transaction is unsuccessful.</p><p>OnePAY did not received payment result from Issuer bank.</p><p>Please contact your bank for details and try again.</p>", messages_vi: "<p>Giao dịch không thành công</p><p>Cổng thanh toán không nhận được kết quả trả về từ ngân hàng phát hành thẻ.</p><p>Vui lòng liên hệ với ngân hàng theo số điện thoại sau mặt thẻ để biết chính xác trạng thái giao dịch và thực hiện thanh toán lại</p>" },
+    { success: false, code: '4', messages_en: "<p>The transaction is unsuccessful.</p><p>Your card is expired or You have entered incorrect expired date.</p><p>Please check and try again.</p>", messages_vi: "<p>Giao dịch không thành công</p><p>do thẻ hết hạn sử dụng hoặc nhập sai thông tin tháng/ năm hết hạn của thẻ.</p><p>Vui lòng kiểm tra lại thông tin và thanh toán lại</p>" },
+    { success: false, code: '5', messages_en: "<p>The transaction is unsuccessful.</p><p>This transaction cannot be processed due to insufficient funds.</p><p>Please try another card.</p>", messages_vi: "<p>Giao dịch không thành công</p><p>Thẻ không đủ hạn mức hoặc tài khoản không đủ số dư để thanh toán.</p><p>Vui lòng kiểm tra lại thông tin và thanh toán lại</p>" },
+    { success: false, code: '6', messages_en: "<p>The transaction is unsuccessful.</p><p>An error was encountered while processing your transaction.</p><p>Please contact your bank for further clarification.</p>", messages_vi: "<p>Giao dịch không thành công</p><p>Quá trình xử lý giao dịch phát sinh lỗi từ ngân hàng phát hành thẻ.</p><p>Vui lòng liên hệ ngân hàng theo số điện thoại sau mặt thẻ được hỗ trợ chi tiết.</p>" },
+    { success: false, code: '7', messages_en: "<p>The transaction is unsuccessful.</p><p>An error was encountered while processing your transaction.</p><p>Please contact your bank for further clarification.</p>", messages_vi: "<p>Giao dịch không thành công</p><p>Đã có lỗi phát sinh trong quá trình xử lý giao dịch.</p><p>Vui lòng thực hiện thanh toán lại.</p>" },
+    { success: false, code: '8', messages_en: "<p>The transaction is unsuccessful.</p><p>You have entered incorrect card number. Please try again.</p>", messages_vi: "<p>Giao dịch không thành công.</p><p>Số thẻ không đúng.</p><p>Vui lòng kiểm tra và thực hiện thanh toán lại</p>" },
+    { success: false, code: '9', messages_en: "<p>The transaction is unsuccessful.</p><p>You have entered incorrect card holder name.</p><p>Please try again.</p>", messages_vi: "<p>Giao dịch không thành công.</p><p>Tên chủ thẻ không đúng.</p><p>Vui lòng kiểm tra và thực hiện thanh toán lại</p>" },
+    { success: false, code: '10', messages_en: "<p>The transaction is unsuccessful.</p><p>The card is expired/locked.</p><p>Please try again.</p>", messages_vi: "<p>Giao dịch không thành công.</p><p>Thẻ hết hạn/Thẻ bị khóa.</p><p>Vui lòng kiểm tra và thực hiện thanh toán lại</p>" },
+    { success: false, code: '11', messages_en: "<p>The transaction is unsuccessful.</p><p>You have been not registered online payment services.</p><p>Please contact your bank for details.</p>", messages_vi: "<p>Giao dịch không thành công.</p><p>Thẻ chưa đăng ký sử dụng dịch vụ thanh toán trên Internet.</p><p>Vui lòng liên hê ngân hàng theo số điện thoại sau mặt thẻ để được hỗ trợ.</p>" },
+    { success: false, code: '12', messages_en: "<p>The transaction is unsuccessful.</p><p>You have entered incorrect Issue date or Expire date.</p><p>Please try again.</p>", messages_vi: "<p>Giao dịch không thành công.</p><p>Ngày phát hành/Hết hạn không đúng.</p><p>Vui lòng kiểm tra và thực hiện thanh toán lại</p>" },
+    { success: false, code: '13', messages_en: "<p>The transaction is unsuccessful.</p><p>The transaction amount exceeds the maximum transaction/amount limit.</p><p>Please try another card.</p>", messages_vi: "<p>Giao dịch không thành công.</p><p>thẻ/ tài khoản đã vượt quá hạn mức thanh toán.</p><p>Vui lòng kiểm tra và thực hiện thanh toán lại</p>" },
+    { success: false, code: '21', messages_en: "<p>The transaction is unsuccessful.</p><p>This transaction cannot be processed due to insufficient funds in your account.</p><p>Please try another card.</p>", messages_vi: "<p>Giao dịch không thành công.</p><p>Số tiền không đủ để thanh toán.</p><p>Vui lòng kiểm tra và thực hiện thanh toán lại</p>" },
+    { success: false, code: '22', messages_en: "<p>The transaction is unsuccessful.</p><p>This transaction cannot be processed due to invalid account.</p><p>Please try again.</p>", messages_vi: "<p>Giao dịch không thành công.</p><p>Thông tin tài khoản không đúng.</p><p>Vui lòng kiểm tra và thực hiện thanh toán lại</p>" },
+    { success: false, code: '23', messages_en: "<p>The transaction is unsuccessful.</p><p>This transaction cannot be processed due to account locked.</p><p>Please contact your bank for further clarification.</p>", messages_vi: "<p>Giao dịch không thành công.</p><p>Tài khoản bị khóa.</p><p>Vui lòng liên hê ngân hàng theo số điện thoại sau mặt thẻ để được hỗ trợ</p>" },
+    { success: false, code: '24', messages_en: "<p>The transaction is unsuccessful.</p><p>You have entered incorrect card number.</p><p>Please try again</p>", messages_vi: "<p>Giao dịch không thành công.</p><p>Thông tin thẻ không đúng.</p><p>Vui lòng kiểm tra và thực hiện thanh toán lại</p>" },
+    { success: false, code: '25', messages_en: "<p>The transaction is unsuccessful.</p><p>You have entered incorrect OTP.</p><p>Please try again.</p>", messages_vi: "<p>Giao dịch không thành công.</p><p>OTP không đúng.</p><p>Vui lòng kiểm tra và thực hiện thanh toán lại</p>" },
+    { success: false, code: '253', messages_en: "<p>The transaction is unsuccessful.</p><p>Transaction timed out.</p><p>Please try again.</p>", messages_vi: "<p>Giao dịch không thành công.</p><p>Quá thời gian thanh toán.</p><p>Vui lòng thực hiện thanh toán lại</p>" },
+    { success: false, code: '99', messages_en: "<p>The transaction is unsuccessful.</p><p>The transaction has been cancelled by card holder.</p><p>Please try again.</p>", messages_vi: "<p>Giao dịch không thành công.</p><p>Người sử dụng hủy giao dịch</p>" },
+    { success: false, code: 'B', messages_en: "<p>The transaction is unsuccessful.</p><p>The card used in this transaction is not authorized 3D-Secure complete.</p><p>Please contact your bank for further clarification.</p>", messages_vi: "<p>Giao dịch không thành công do không xác thực được 3D-Secure.</p><p>Vui lòng liên hệ ngân hàng theo số điện thoại sau mặt thẻ được hỗ trợ chi tiết.</p>" },
+    { success: false, code: 'E', messages_en: "<p>The transaction is unsuccessful.</p><p>You have entered wrong CSC or Issuer Bank declided transaction.</p><p>Please contact your bank for further clarification.</p>", messages_vi: "<p>Giao dịch không thành công do nhập sai CSC (Card Security Card) hoặc ngân hàng từ chối cấp phép cho giao dịch.</p><p>Vui lòng liên hệ ngân hàng theo số điện thoại sau mặt thẻ được hỗ trợ chi tiết.</p>" },
+    { success: false, code: 'F', messages_en: "<p>The transaction is unsuccessful.</p><p>Due to 3D Secure Authentication Failed.</p><p>Please contact your bank for further clarification.</p>", messages_vi: "<p>Giao dịch không thành công do không xác thực được 3D-Secure.</p><p>Vui lòng liên hệ ngân hàng theo số điện thoại sau mặt thẻ được hỗ trợ chi tiết.</p>" },
+    { success: false, code: 'Z', messages_en: "<p>The transaction is unsuccessful.</p><p>This transaction has been declined.</p><p>Please contact OnePAY for details (Hotline 1900 633 927)</p>", messages_vi: "<p>Giao dịch của bạn bị từ chối.</p><p>Vui lòng liên hệ Đơn vị chấp nhận thẻ để được hỗ trợ.</p><p>Vui lòng liên hệ với OnePAY để được hỗ trợ (Hotline: 1900 633 927)</p>" },
+    { success: false, code: 'Other', messages_en: "<p>The transaction is unsuccessful.</p><p>Please contact OnePAY for details (Hotline 1900 633 927)</p>", messages_vi: "<p>Giao dịch không thành công.</p><p>Vui lòng liên hệ với OnePAY để được hỗ trợ (Hotline: 1900 633 927)</p>" },
+  ];
+
+  txnResponseCode: any = null;
+  merchTxnRef: any = null;
+  secureHash: any = null;
+  currentLang: string = 'vi';
+
+  constructor(
+    private _packagePaymentService: PackagePaymentService,
+    private activatedRoute: ActivatedRoute,
+  ) {
+    this.activatedRoute.params.subscribe(params => {
+      this.id = params['id'];
+    });
+
+    this.activatedRoute.queryParams.subscribe(params => {
+      this.messagePayment = params['vpc_Message'];
+      this.txnResponseCode = this.txnResponseCodes.find(x => x.code == params['vpc_TxnResponseCode']);
+      this.merchTxnRef = params['vpc_MerchTxnRef'];
+      this.secureHash = params['vpc_SecureHash'];
+    });
+
+    if (this.messagePayment == 'Canceled') {
+      this.statusPayment = false;
+    }
+
+    this.currentLang = localStorage.getItem('lang') ?? 'vi';
+
+    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+      this.checkMobile = true;
+    } else {
+      this.checkMobile = false;
+    }
+  }
+
+  ngOnInit(): void {
+  }
+}
diff --git a/Phaha_Package/src/app/package/package-related/package-related.component.html b/Phaha_Package/src/app/package/package-related/package-related.component.html
new file mode 100644
index 0000000..4a607f7
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-related/package-related.component.html
@@ -0,0 +1,33 @@
+<div class="package-hot mt-4">
+  <div class="box-head position-relative">
+    <div class="box-header">
+      <a routerLink="/search">{{'package-related.title' | translate}}</a>
+    </div>
+    <div class="see-all">
+      <a routerLink="/search">{{'cta.see-more' | translate}}<i class="uil uil-angle-right"></i></a>
+    </div>
+  </div>
+  <div class="package-swiper">
+    <swiper [slidesPerView]="1" [spaceBetween]="30" [slidesPerGroup]="1" [loop]="false"
+            [loopFillGroupWithBlank]="true" [pagination]="false" [navigation]="true" class="mySwiper"
+            [breakpoints]="{
+      '640': {
+        slidesPerView: 1,
+        spaceBetween: 30
+      },
+      '768': {
+        slidesPerView: 1,
+        spaceBetween: 30
+      },
+      '1024': {
+        slidesPerView: 4,
+        spaceBetween: 30
+      }
+    }">
+      <ng-template swiperSlide *ngFor="let item of relatePackage; let index = index">
+        <app-askonomy-hot *ngIf="item.isAskonomy" [item]="item"></app-askonomy-hot>
+        <app-package-item *ngIf="!item.isAskonomy" [item]="item"></app-package-item>
+      </ng-template>
+    </swiper>
+  </div>
+</div>
diff --git a/Phaha_Package/src/app/package/package-related/package-related.component.scss b/Phaha_Package/src/app/package/package-related/package-related.component.scss
new file mode 100644
index 0000000..2d9d9c7
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-related/package-related.component.scss
@@ -0,0 +1,174 @@
+@import "~swiper/css";
+@import "~swiper/css/pagination";
+@import "~swiper/css/navigation";
+
+app-package-related {
+  .package-hot {
+    background: #ffffff !important;
+    padding: 10px 0;
+
+    .swiper {
+      width: 100%;
+      height: 100%;
+    }
+
+    .swiper-slide {
+      text-align: center;
+      font-size: 18px;
+      background: #fff;
+
+      /* Center slide text vertically */
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: -webkit-flex;
+      display: flex;
+      -webkit-box-pack: center;
+      -ms-flex-pack: center;
+      -webkit-justify-content: center;
+      justify-content: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      -webkit-align-items: center;
+      align-items: center;
+    }
+
+    .swiper-slide img {
+      display: block;
+      height: 100%;
+    }
+
+    .package-time {
+      font-weight: 600;
+      font-size: 20px;
+      line-height: 24px;
+      text-align: center;
+      color: #6C757D;
+    }
+
+    .package-price {
+      font-weight: 600;
+      font-size: 20px;
+      line-height: 24px;
+      text-align: center;
+      color: #000000;
+    }
+
+    .total-sell {
+      width: 100%;
+      font-size: 12px;
+    }
+
+    .box-head {
+      margin-bottom: 5px;
+      padding: 5px 10px;
+      border-bottom: 1px solid #eeeeee;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .box-header {
+      a {
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 136.19%;
+        color: #000000;
+        text-decoration: none;
+      }
+    }
+
+    .box-header::after {
+      content: '';
+      width: 100px;
+      border-top: 2px solid #f26b1b;
+      position: absolute;
+      color: transparent;
+      top: 45px;
+      left: 10px;
+    }
+
+    .see-all {
+      a {
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        color: #ABB5BE;
+      }
+
+      i {
+        color: #152536;
+        font-size: 24px;
+      }
+    }
+
+    .package-swiper {
+      swiper {
+        padding: 0 30px;
+      }
+
+      .swiper-button-prev {
+        left: 0px;
+        background-position: center;
+        background-color: #ABB5BE;;
+      }
+
+      .swiper-button-next:after, .swiper-button-prev:after {
+        font-family: swiper-icons;
+        font-size: 24px;
+        text-transform: none !important;
+        letter-spacing: 0;
+        font-variant: initial;
+        line-height: 1;
+        color: #ffffff;
+      }
+
+      .swiper-button-next {
+        right: 0px;
+        background-position: center;
+        background-color: #ABB5BE;;
+      }
+
+      .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
+        opacity: .35;
+        cursor: auto;
+        pointer-events: none;
+      }
+
+      .swiper-button-next:hover, .swiper-button-prev:hover {
+        background: #FCAF17;
+      }
+
+      .product-image {
+        a {
+          position: relative;
+        }
+
+        position: relative;
+      }
+
+      .product-image:hover .buy-now {
+        top: 47%;
+        opacity: 1;
+        transition: all 300ms;
+        position: absolute;
+      }
+
+      .buy-now {
+        position: absolute;
+        top: 0px;
+        opacity: 0;
+        border: none;
+        -webkit-transform: translateX(-50%);
+        -moz-transform: translateX(-50%);
+        -ms-transform: translateX(-50%);
+        -o-transform: translateX(-50%);
+        transform: translateX(-50%);
+        white-space: nowrap;
+        background-color: #f1592b;
+        padding: 5px 20px;
+        color: #fff;
+        border-radius: 5px;
+      }
+    }
+  }
+}
diff --git a/Phaha_Package/src/app/package/package-related/package-related.component.ts b/Phaha_Package/src/app/package/package-related/package-related.component.ts
new file mode 100644
index 0000000..06daa0e
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-related/package-related.component.ts
@@ -0,0 +1,18 @@
+import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
+
+@Component({
+  selector: 'app-package-related',
+  templateUrl: './package-related.component.html',
+  styleUrls: ['./package-related.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class PackageRelatedComponent implements OnInit {
+  fakeArray = new Array(10);
+  @Input() relatePackage: any;
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/package/package-related/package-related.module.ts b/Phaha_Package/src/app/package/package-related/package-related.module.ts
new file mode 100644
index 0000000..8a5b1eb
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-related/package-related.module.ts
@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { SwiperModule } from 'swiper/angular';
+import { PackageRelatedComponent } from './package-related.component';
+import {PackageItemHotModule} from "../package-item-hot/package-item-hot.module";
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClient } from '@angular/common/http';
+import { PackageAskonomyModule } from '../package-askonomy/package-askonomy.module';
+import { PackagesModule } from 'src/app/modules/packages/packages.module';
+
+@NgModule({
+  declarations: [
+    PackageRelatedComponent
+  ],
+  imports: [
+    SwiperModule,
+    PackagesModule,
+    BrowserModule,
+    PackageItemHotModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    }),
+    PackageAskonomyModule
+  ],
+  exports: [
+    PackageRelatedComponent
+  ]
+})
+export class PackageRelatedModule { }
diff --git a/Phaha_Package/src/app/package/package-trial/package-trial.component.html b/Phaha_Package/src/app/package/package-trial/package-trial.component.html
new file mode 100644
index 0000000..658d616
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-trial/package-trial.component.html
@@ -0,0 +1,118 @@
+<div class="container pt-3">
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a routerLink="/" style="color: #000;">{{'breadcrumb.home' | translate}}</a></li>
+            <li class="breadcrumb-item active" aria-current="page">{{'breadcrumb.trial-package' | translate}} {{dataModel?.name}}</li>
+        </ol>
+    </nav>
+
+    <block-ui>
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-md-3 col-sm-4 col-xs-12">
+                        <div>
+                            <header class="header-trial">
+                                <span>{{'detail.package-info' | translate}}</span>
+                            </header>
+                            <div class="image-detail">
+                                <img class="img-response" [src]="baseUrl + dataModel?.image">
+                                <ng-container [ngSwitch]="dataModel.type">
+                                    <div *ngSwitchCase="1" class="notifi-notpackage text-center">
+                                        {{'package-type.pdf' | translate}}
+                                    </div>
+                                    <div *ngSwitchCase="2" class="notifi-notpackage text-center">
+                                        {{'package-type.author' | translate}}
+                                    </div>
+                                    <div *ngSwitchCase="3" class="notifi-notpackage text-center">
+                                        {{'package-type.category' | translate}}
+                                    </div>
+                                    <div *ngSwitchCase="4" class="notifi-notpackage text-center">
+                                        {{'package-type.event' | translate}}
+                                    </div>
+                                </ng-container>
+                            </div>
+                            <div class="mt-2 mb-2">
+                                <h4>{{dataModel?.name}}</h4>
+                                <div class="editorial-office">
+                                    <div>
+                                        <ng-container *ngFor="let item of dataModel?.editorials">
+                                            <button routerLink="/{{item.slug}}"
+                                                type="button" class="btn btn-office-editorial">{{item.name}}</button>
+                                        </ng-container>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="price-trial">
+                                <span 
+                                    class="text-price-promotion mr-1"
+                                    *ngIf="dataModel && dataModel.promotionPrice"
+                                >
+                                    {{dataModel?.price | number}} VNĐ
+                                </span>
+                                <span class="percent-promotion">
+                                    {{dataModel?.promotionPrice ?? dataModel?.price | number : '0.0-0'}} VNĐ
+                                </span>
+                                <span 
+                                    class="percent-promotion percent-background" 
+                                    *ngIf="dataModel && dataModel.promotionPrice"
+                                >
+                                    -{{((dataModel?.price - dataModel?.promotionPrice) / dataModel?.price) * 100 | number : '0.0-0'}}%
+                                </span>
+                            </div>
+                            <div class="info-trial">
+                                <ul class="info-detail-trial">
+                                    <li>
+                                        <i class="uil uil-check custom-icon"></i>
+                                        {{'package-trial.status' | translate}}: <span>{{'package-trial.trial' | translate}}</span>
+                                    </li>
+                                    <li>
+                                        <i class="uil uil-check custom-icon"></i>
+                                        {{'package-trial.duration' | translate}}: <span>3 {{'package-trial.days' | translate}}</span>
+                                    </li>
+                                    <li>
+                                        <i class="uil uil-check custom-icon"></i>
+                                        <span>{{'package-trial.register-notice' | translate}}</span>
+                                    </li>
+                                    <li>
+                                        <i class="uil uil-check custom-icon"></i>
+                                        {{'package-trial.money-pay' | translate}}: <span>0VNĐ</span>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div>
+                                <button  (click)="onRedirectTrialLink(dataModel)" type="button" class="btn btn-buy-package-trial">
+                                    {{'cta.trial' | translate}}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-9 col-xs-12 col-sm-8">
+                        <div class="list-newspaper">
+                            <header class="header-trial">
+                                <span>{{'package-trial.articles-list' | translate}} ({{listNewspaperTrial.totalRecord}})</span>
+                            </header>
+                        </div>
+                        <div class="item-newspaper">
+                            <ng-container *ngFor="let newspapers of listNewspaperTrial.result">
+                                <div class="newspaper-detail">
+                                    <h5 class="title-newspaper">{{newspapers.title}}</h5>
+                                    <div class="content-newspaper">
+                                        <div class="mb-2">{{newspapers.dateCreate | date: 'dd/MM/yyyy HH:ss'}}</div>
+                                        <div class="color-description">{{newspapers.description}}</div>
+                                    </div>
+                                </div>
+                            </ng-container>
+                        </div>
+                        <div class="pagination justify-content-end">
+                            <ngb-pagination [collectionSize]="listNewspaperTrial.totalRecord"
+                                [(page)]="listNewspaperTrial.page" [maxSize]="3" [rotate]="true"
+                                [pageSize]="listNewspaperTrial.pageSize" (pageChange)="onPageChange($event)">
+                            </ngb-pagination>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </block-ui>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/package/package-trial/package-trial.component.scss b/Phaha_Package/src/app/package/package-trial/package-trial.component.scss
new file mode 100644
index 0000000..5cb8738
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-trial/package-trial.component.scss
@@ -0,0 +1,191 @@
+app-package-trial {
+    .image-detail {
+        position: relative;
+    }
+
+    .img-response {
+        max-width: 100%;
+    }
+
+    .header-trial {
+        border-bottom: 1px solid #ccc;
+        margin-bottom: 10px;
+        padding: 4px 0px;
+
+        span {
+            border-bottom: 2px solid #f26b1b;
+            padding-bottom: 7px;
+            text-transform: uppercase;
+            font-size: 18px;
+            font-weight: 600;
+            color: #222;
+        }
+    }
+
+    .btn-buy-package-trial {
+        background: #fcaf17;
+        border-radius: 20px;
+        color: #ffffff;
+        margin-right: 12px;
+        width: 100%;
+        font-weight: 600;
+        line-height: 30px;
+        font-size: 20px;
+    }
+
+    .btn-buy-package-trial:hover {
+        background: #e09500;
+        color: #ffffff;
+    }
+
+    .btn-office-editorial {
+        border: 1px solid #87ceeb;
+        border-radius: 50px;
+        margin-right: 10px;
+        background-color: #87ceeb;
+        color: white;
+    }
+
+    .btn-office-editorial:hover {
+        background: #ffe7b8;
+        border-radius: 50px;
+        border: 1px solid #ffe7b8;
+        color: #e09500;
+    }
+
+    .text-price-promotion {
+        text-decoration: line-through;
+        color: #cccc;
+        padding-right: 5px;
+    }
+
+    .percent-promotion {
+        font-size: 16px !important;
+        font-weight: 700;
+        padding-right: 5px;
+    }
+
+    .price-trial {
+        font-size: 14px !important;
+    }
+
+    .info-detail-trial {
+        list-style-type: none;
+        padding: 0 !important;
+
+        li {
+            font-size: 14px !important;
+            font-weight: normal;
+            padding-left: 10px;
+
+            i {
+                font-size: 16px !important;
+                font-weight: normal;
+                margin-right: 10px;
+            }
+
+            span {
+                font-weight: 700 !important;
+                font-size: 14px !important;
+            }
+        }
+    }
+
+    .text-editorial-offcie {
+        font-size: 14px !important;
+    }
+
+    .newspaper-detail {
+        border-bottom: 1px solid #cccc;
+        margin-bottom: 10px;
+        padding-bottom: 10px;
+
+        .title-newspaper {
+            font-weight: bold !important;
+        }
+    }
+
+    .item-newspaper {
+        padding: 10px !important;
+    }
+
+    .page-item.active .page-link {
+        background-color: #fcaf17;
+        border: #fcaf17;
+        color: #fff !important;
+        width: 30px;
+        text-align: center;
+        padding-top: 7px !important;
+    }
+
+    .page-item {
+        margin: 0 3px !important;
+        border-radius: 50% !important;
+
+        a {
+            border: none !important;
+            color: #222 !important;
+        }
+    }
+
+    .page-item a.page-link {
+        border-radius: 50%;
+    }
+
+    .page-link {
+        width: 35px !important;
+        height: 35px !important;
+        text-align: center;
+        padding-top: 7px !important;
+    }
+
+    .page-item:last-child .page-link {
+        border-top-right-radius: 50% !important;
+        border-bottom-right-radius: 50% !important;
+    }
+
+    .page-link:focus {
+        box-shadow: none !important;
+    }
+
+    .page-item:first-child .page-link {
+        border-top-left-radius: 50% !important;
+        border-bottom-left-radius: 50% !important;
+    }
+
+    .page-link:hover {
+        width: 30px;
+        text-align: center;
+    }
+
+    .notifi-notpackage {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        background: #fcaf17;
+        padding: 2px 10px;
+        border-top-left-radius: 5px;
+        color: #fff;
+    }
+
+    .info-trial {
+        padding: 5px;
+        margin: 10px 0;
+        background: #efefef;
+        border-radius: 5px;
+        line-height: 30px;
+    }
+
+    .percent-background {
+        background: #fcdfd7;
+        color: #f1592b;
+        padding: 4px;
+        border-radius: 15px;
+        font-size: 14px !important;
+        font-weight: normal !important;
+    }
+
+    .color-description {
+        color: #ccc;
+    }
+}
diff --git a/Phaha_Package/src/app/package/package-trial/package-trial.component.ts b/Phaha_Package/src/app/package/package-trial/package-trial.component.ts
new file mode 100644
index 0000000..4e9a7bf
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-trial/package-trial.component.ts
@@ -0,0 +1,86 @@
+import { Component, Input, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ToastrService } from 'ngx-toastr';
+import { environment } from 'src/environments/environment';
+import { PackageTrialService } from './package-trial.service';
+import { LoginComponent } from 'src/app/login/login.component';
+
+@Component({
+  selector: 'app-package-trial',
+  templateUrl: './package-trial.component.html',
+  styleUrls: ['./package-trial.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class PackageTrialComponent implements OnInit {
+  @Input() id: number = 0;
+  public dataModel: any = {};
+  public baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  public listNewspaperTrial: any = {
+    page: 1,
+    pageSize: 6,
+    totalRecord: 0,
+    result: [],
+  };
+  public currentUser: any = {};
+  public isLogin: boolean = false;
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private _packageTrialService: PackageTrialService,
+    private _router: Router,
+    private _toart: ToastrService,
+    private _modalService: NgbModal,
+  ) {
+    this.activatedRoute.params.subscribe(params => {
+      this.id = params['id'];
+    });
+    this.currentUser = JSON.parse(localStorage.getItem("currentCustomer") ?? "{}");
+    if (typeof (this.currentUser) === 'object' && this.currentUser.jwtToken) {
+      this.isLogin = true;
+    }
+  }
+
+  ngOnInit(): void {
+    this.onGetPackageDetail();
+  }
+
+  onGetPackageDetail() {
+    this._packageTrialService.onGetPackageDetail(this.id)
+      .subscribe(res => {
+        this.dataModel = res.data;
+        this.onGetListNewspaper();
+      });
+  }
+
+  onRedirectTrialLink(a: any) {
+    if (this.isLogin)
+      this.onBuyNow()
+    else
+      this._modalService.open(LoginComponent, { size: "md", centered: true });
+  }
+
+  onBuyNow() {
+    this._packageTrialService.onBuyNow(this.id)
+      .subscribe(res => {
+        this._router.navigate(['/']).then(() => {
+          this._toart.success('Đăng ký dùng thử thành công!', 'Thành công', {
+            timeOut: 2000
+          });
+        });
+      });
+  }
+
+  onGetListNewspaper() {
+    this._packageTrialService.onGetListNewspaper(this.id, this.listNewspaperTrial)
+      .subscribe(res => {
+        this.listNewspaperTrial.result = res.result;
+        this.listNewspaperTrial.totalRecord = res.totalItemCount;
+      });
+  }
+  onPageChange(numberPage: number) {
+    this.listNewspaperTrial.page = numberPage;
+    this.onGetListNewspaper();
+  }
+
+}
diff --git a/Phaha_Package/src/app/package/package-trial/package-trial.service.ts b/Phaha_Package/src/app/package/package-trial/package-trial.service.ts
new file mode 100644
index 0000000..519da04
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-trial/package-trial.service.ts
@@ -0,0 +1,26 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PackageTrialService {
+
+  constructor(
+    private _http: HttpClient,
+  ) { }
+
+  onGetPackageDetail(packageId: number) {
+    return this._http.get<any>(`/package/detail/${packageId}`);
+  }
+
+  onBuyNow(packageId: number) {
+    return this._http.post<any>(`/package/register-trial/${packageId}`, {});
+  }
+  onGetListNewspaper(packageId: number, pageModel: any) {
+    let params = new HttpParams();
+    params = params.append('pageSize', pageModel.pageSize);
+    params = params.append('page', pageModel.page);
+    return this._http.get<any>(`/package/news-in-package/${packageId}`, { params });
+  }
+}
diff --git a/Phaha_Package/src/app/package/package-upgrade/package-upgrade.component.html b/Phaha_Package/src/app/package/package-upgrade/package-upgrade.component.html
new file mode 100644
index 0000000..cfd0db0
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-upgrade/package-upgrade.component.html
@@ -0,0 +1,104 @@
+<block-ui>
+  <div class="container bg-white mt-4 p-4">
+    <nav aria-label="breadcrumb">
+      <ol class="breadcrumb">
+        <li class="breadcrumb-item"><a routerLink="/" style="color: #000;">{{'breadcrumb.home' | translate}}</a>
+        </li>
+        <li class="breadcrumb-item active" aria-current="page">{{'breadcrumb.payment' | translate}}</li>
+      </ol>
+    </nav>
+    <div class="card box-payment">
+      <form [formGroup]="formData" class="form-horizontal needs-validation">
+        <header class="payment-header">{{'payment.title' | translate}}</header>
+        <div *ngIf="!accessPayment">
+          <img style="width: 100%;" [src]="'/assets/images/background/maxresdefault.png'">
+        </div>
+        <div *ngIf="accessPayment">
+          <div class="row">
+            <div class="col-md-1 col-sm-2 col-12">
+              <img [src]="baseUrl + infoDetailPackage?.image" class="img-response mb-2">
+            </div>
+            <div class="col-md-11 col-sm-10 col-12">
+              <div class="row">
+                <div class="col-lg-7 col-md-12 col-12">
+                  <h3>{{infoDetailPackage?.name}}</h3>
+                  <p class="payment-price">
+                    <span class="promotional-price">
+                      {{infoDetailPackage?.promotionPrice ?? infoDetailPackage?.price |
+                      number}}VNĐ
+                    </span>
+                    <span class="old-price" *ngIf="infoDetailPackage?.promotionPrice">
+                      {{infoDetailPackage?.price | number}}VNĐ
+                    </span>
+                    <span class="percent-discount" *ngIf="infoDetailPackage?.promotionPrice">
+                      (<i>- {{percentPromotion | number : '0.0-0'}}%</i>)
+                    </span>
+                  </p>
+                  <div class="link-office">
+                    <a *ngFor="let item of infoDetailPackage?.editorials" routerLink="/{{item.slug}}"
+                      [title]="item.name">
+                      {{item.name}}
+                    </a>
+                  </div>
+                </div>
+                <div class="col-lg-2 col-md-6 col-12">
+                  <div class="d-flex mt-2" *ngIf="type != 2">
+                    <label style="width: 80px; line-height: 32px; font-weight: 600;">
+                      {{'payment.amount' | translate}}
+                    </label>
+                    <span style="line-height: 34px;">{{f_value.total}}</span>
+                  </div>
+                </div>
+                <div class="col-lg-3 col-md-6 col-12">
+                  <div class="d-flex mt-2">
+                    <label style="width: 80px; line-height: 32px; font-weight: 600;">
+                      {{'payment.money' | translate}}</label>
+                    <div style="width: calc(100% - 80px)" class="into-money">
+                      {{(infoDetailPackage?.promotionPrice ?? infoDetailPackage?.price)
+                      * f['total'].value | number}} VNĐ
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="payment-total-money">
+            <div class="row">
+              <div class="offset-md-8 col-md-2 col-6">{{'payment.total' | translate}}</div>
+              <div class="col-md-2 col-6">
+                {{(infoDetailPackage?.promotionPrice ?? infoDetailPackage?.price) * f['total'].value | number}}VNĐ
+              </div>
+            </div>
+          </div>
+          <div style="border-top: 3px solid #222; border-bottom: 1px solid #ccc; margin: 10px 0; padding: 10px 0;">
+            <div class="align-items-center">
+              <div class="row">
+                <div class="col-4">
+                  <!-- <div class="input-group mt-2">
+                    <input type="text" class="form-control input-code" [(ngModel)]="codePayment"
+                      formControlName="codePayment" placeholder="{{'payment.placeholder-code' | translate}}">
+                    <div class="input-group-append">
+                      <button class="btn btn-code" type="button" (click)="paymentByCode()">
+                        {{'payment.apply' | translate}}
+                      </button>
+                    </div>
+                  </div> -->
+                </div>
+                <div class="col-8">
+                  <div class="box-action-payment d-flex">
+                    <!-- <button type="button" class="btn btn-success rounded-pill" (click)="onPaymentPackage(2)">
+                        {{'payment.bank-transfer' | translate}}
+                      </button> -->
+                    <button type="button" class="btn btn-success rounded-pill" (click)="onPaymentPackage(1)">
+                      {{'payment.payment-gateway' | translate}}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</block-ui>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/package/package-upgrade/package-upgrade.component.scss b/Phaha_Package/src/app/package/package-upgrade/package-upgrade.component.scss
new file mode 100644
index 0000000..ce660f3
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-upgrade/package-upgrade.component.scss
@@ -0,0 +1,228 @@
+app-package-upgrade {
+    .box-payment {
+        padding: 15px;
+        overflow: auto;
+        background: #fff !important;
+
+        &>table {
+            min-width: 500px;
+            box-shadow: 0 0 3px #ccc;
+            border-radius: 5px;
+            margin-top: 20px;
+        }
+
+        .box-action-payment {
+            text-align: right;
+            padding: 5px 0;
+            justify-content: flex-end;
+
+            button,
+            a {
+                margin-left: 10px;
+                padding-left: 10px;
+                padding-right: 10px;
+                font-weight: 600;
+                font-size: 15px;
+            }
+        }
+
+        .payment-price {
+            span {
+                margin-right: 10px;
+            }
+
+            .promotional-price {
+                font-weight: 600;
+                font-size: 16px;
+            }
+
+            .old-price {
+                color: #555;
+                text-decoration: line-through;
+            }
+
+            .percent-discount {
+                font-weight: 600;
+                color: #444;
+                font-size: 16px;
+            }
+        }
+
+        .payment-header {
+            text-align: center;
+            font-size: 30px;
+            font-weight: 600;
+            border-bottom: 3px solid #222;
+            margin-bottom: 10px;
+        }
+
+        .payment-total-money {
+            padding-top: 10px;
+            border-top: 1px solid #ccc;
+
+            div {
+                font-size: 18px;
+            }
+        }
+    }
+
+    .breadcrumb-item {
+        font-size: 15px !important;
+
+        a {
+            text-decoration: none;
+            color: #666;
+            font-size: 15px !important;
+        }
+    }
+
+    .link-office {
+        padding-bottom: 8px;
+
+        a {
+            text-decoration: none;
+            color: #333;
+            font-weight: 600;
+            padding: 4px 10px;
+            background: #efefef;
+            border-radius: 3px;
+            margin-right: 4px;
+        }
+    }
+
+    .custom-radio:checked,
+    [type="radio"]:not(:checked) {
+        position: absolute;
+        left: -9999px;
+    }
+
+    .custom-radio:checked+label,
+    .custom-radio:not(:checked)+label {
+        position: relative;
+        padding-left: 28px;
+        cursor: pointer;
+        line-height: 20px;
+        display: inline-block;
+        color: #666;
+        margin: 0 15px;
+        margin-left: 0;
+    }
+
+    .custom-radio:checked+label:before,
+    .custom-radio:not(:checked)+label:before {
+        content: "";
+        position: absolute;
+        left: 1px;
+        top: 1px;
+        width: 18px;
+        height: 18px;
+        border: 1px solid #ddd;
+        border-radius: 100%;
+        background: #fff;
+    }
+
+    .custom-radio:checked+label:after,
+    .custom-radio:not(:checked)+label:after {
+        content: "";
+        width: 12px;
+        height: 12px;
+        background: #ffa900;
+        position: absolute;
+        top: 4px;
+        left: 4px;
+        border-radius: 100%;
+        -webkit-transition: all 0.2s ease;
+        transition: all 0.2s ease;
+    }
+
+    .custom-radio:not(:checked)+label:after {
+        opacity: 0;
+        -webkit-transform: scale(0);
+        transform: scale(0);
+    }
+
+    .custom-radio:checked+label:after {
+        opacity: 1;
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+
+    .checkbox-custom {
+        opacity: 0;
+        position: absolute;
+    }
+
+    .checkbox-custom,
+    .checkbox-custom-label {
+        display: inline-block;
+        vertical-align: middle;
+        margin: 5px;
+        cursor: pointer;
+    }
+
+    .checkbox-custom+.checkbox-custom-label:before {
+        content: "";
+        background: #fff;
+        border-radius: 5px;
+        border: 2px solid #ddd;
+        display: inline-block;
+        vertical-align: middle;
+        width: 10px;
+        height: 10px;
+        padding: 2px;
+        margin-right: 10px;
+        text-align: center;
+    }
+
+    .checkbox-custom:checked+.checkbox-custom-label:before {
+        content: "";
+        display: inline-block;
+        width: 1px;
+        height: 5px;
+        border: solid #ffa900;
+        border-width: 0 3px 3px 0;
+        transform: rotate(45deg);
+        -webkit-transform: rotate(45deg);
+        -ms-transform: rotate(45deg);
+        border-radius: 0px;
+        margin: 0px 15px 5px 5px;
+    }
+
+    .into-money {
+        font-size: 16px;
+        font-weight: bold;
+        line-height: 32px;
+    }
+
+    .btn-code {
+        background: #ffa900;
+        color: white;
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+    }
+
+    .input-code:focus {
+        outline: none;
+        box-shadow: none;
+        border: 1px solid #ced4da;
+        ;
+    }
+}
+
+.input-export-bill {
+    width: 100%;
+    padding: 6px;
+    border: 1px solid #8a9fb3;
+    border-radius: 4px;
+}
+
+.export-bill {
+    padding: 18px 13px;
+    border: 1px solid #8a9fb3;
+    border-radius: 4px;
+    max-width: 500px;
+}
+
+.img-response {
+    max-width: 100%;
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/package/package-upgrade/package-upgrade.component.ts b/Phaha_Package/src/app/package/package-upgrade/package-upgrade.component.ts
new file mode 100644
index 0000000..da27a08
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-upgrade/package-upgrade.component.ts
@@ -0,0 +1,163 @@
+import { Component, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Title } from '@angular/platform-browser';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ToastrService } from 'ngx-toastr';
+import { AuthenticationService } from 'src/app/auth/service/authentication.service';
+import { environment } from 'src/environments/environment';
+import { PackageUpgradeService } from './package-upgrade.service';
+import { LoginComponent } from 'src/app/login/login.component';
+
+@Component({
+  selector: 'app-package-upgrade',
+  templateUrl: './package-upgrade.component.html',
+  styleUrls: ['./package-upgrade.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class PackageUpgradeComponent implements OnInit {
+  @ViewChild('paymentTransfer') paymentTransfer: TemplateRef<any> | undefined;
+  packageId: any = null;
+  type: any = null;
+  packageUserId: any = null;
+  public infoDetailPackage: any = {};
+  public percentPromotion: number = 0;
+  public baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  public formData: FormGroup;
+  public paymentTransferModel: any;
+  public codePayment: any;
+  submitted = false;
+  accessPayment = false;
+  lang: any;
+  officePaymentIds = environment.editor_payment_ids;
+  currentUser: any = {};
+  isLogin: boolean = false;
+
+  constructor(
+    private readonly _packageUpgradeService: PackageUpgradeService,
+    private readonly _router: Router,
+    private readonly _formBuilder: FormBuilder,
+    private readonly _toart: ToastrService,
+    private readonly _title: Title,
+    private readonly _modalService: NgbModal,
+    private readonly _route: ActivatedRoute,
+    private readonly _authenticationService: AuthenticationService,
+  ) {
+    this.lang = localStorage.getItem("lang");
+
+    this.packageId = this._route.snapshot.paramMap.get('id');
+    this.packageUserId = this._route.snapshot.paramMap.get('packuserid');
+
+    this.formData = this._formBuilder.group({
+      total: [1, [Validators.pattern("^[0-9]*$"), Validators.min(1), Validators.required, Validators.max(1000)]],
+      promotionPrice: [this.infoDetailPackage?.promotionPrice, [Validators.pattern("^[0-9]*$")]],
+      price: [this.infoDetailPackage?.price, [Validators.pattern("^[0-9]*$")]],
+      name: [this.infoDetailPackage?.name, [Validators.required]],
+      enterpriseName: [''],
+      enterpriseTaxCode: [''],
+      enterpriseAddress: [''],
+      enterpriseEmail: [''],
+      codePayment: [''],
+      type: [1],
+    });
+
+    this.currentUser = this._authenticationService.currentUserValue;
+    if (this.currentUser && this.currentUser.jwtToken) this.isLogin = true;
+
+    // Kiểm tra xem đã login hay chưa
+    if (!this.isLogin)
+      this._modalService.open(LoginComponent, { size: "md", centered: true });
+  }
+
+  get f() {
+    return this.formData.controls;
+  }
+
+  get f_value() {
+    return this.formData.value;
+  }
+
+  onPaymentPackage(payType: number) {
+    if (!this.isLogin) {
+      this._modalService.open(LoginComponent, { size: "md", centered: true });
+      return;
+    }
+
+    if (payType) {
+      if (this.formData.value.total < 1)
+        this._toart.error('Số lượng không được nhỏ hơn 1', 'Lỗi', { timeOut: 2000 })
+
+      if (!Number.isInteger(this.formData.value.total))
+        this._toart.error('Số lượng phải là số nguyên', 'Lỗi', { timeOut: 2000 })
+
+      this.infoDetailPackage.total = this.formData.controls['total'].value;
+      if (this.formData.valid) {
+        if (payType === 1) {
+          this._packageUpgradeService.onPayment({
+            id: this.packageId,
+            total: this.formData.controls['total'].value,
+            type: 1,
+            packageUserId: this.packageUserId,
+            isUpgrade: true
+          }).subscribe((res: any) => {
+            window.open(res.data, '_self');
+          });
+        } else if (payType === 2) {
+          this._packageUpgradeService.onPaymentTransfer({
+            id: this.packageId, 
+            total: this.formData.controls['total'].value,
+            enterpriseName: this.formData.controls['enterpriseName'].value,
+            type: 2,
+            packageUserId: this.packageUserId,
+            isUpgrade: true
+          }).subscribe((res: any) => {
+            this.paymentTransferModel = res.data;
+            this._router.navigate(['payment-info', this.paymentTransferModel.id])
+          });
+        }
+
+      }
+    } else {
+      this._toart.error('Bắt buộc chọn hình thức thanh toán', 'Lỗi', {
+        timeOut: 2000
+      })
+    }
+  }
+
+  onGetDetailPackage() {
+    this._packageUpgradeService.getDetailPackageUpgrade(this.packageId, this.packageUserId)
+      .subscribe(res => {
+        if (res.editorialIds.some((x: number) => this.officePaymentIds.indexOf(x) != -1) && res.editorialIds.length == 1)
+          this.accessPayment = true;
+        this.infoDetailPackage = res;
+        this.formData.patchValue({
+          total: res.total,
+          promotionPrice: res.promotionPrice,
+          price: res.price,
+          name: res.name,
+          type: this.type
+        });
+        if (this.infoDetailPackage.promotionPrice) {
+          this.percentPromotion = ((this.infoDetailPackage.price - this.infoDetailPackage.promotionPrice) / this.infoDetailPackage.price) * 100;
+        }
+      })
+  }
+
+  paymentByCode() {
+    this._packageUpgradeService.paymentByCode(this.packageId, this.codePayment)
+      .subscribe(res => {
+        this._router.navigate([`/list-news/${res.id}`]);
+      });
+  }
+
+  ngOnInit(): void {
+    this._modalService.dismissAll('');
+
+    if (this.packageId) {
+      this.onGetDetailPackage();
+    }
+
+    this._title.setTitle('Post ENP - Thanh toán');
+  }
+}
+
diff --git a/Phaha_Package/src/app/package/package-upgrade/package-upgrade.service.ts b/Phaha_Package/src/app/package/package-upgrade/package-upgrade.service.ts
new file mode 100644
index 0000000..600fb97
--- /dev/null
+++ b/Phaha_Package/src/app/package/package-upgrade/package-upgrade.service.ts
@@ -0,0 +1,32 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PackageUpgradeService {
+
+  constructor(private _client: HttpClient) { }
+
+  getTotal(packuserid: any){
+    return this._client.get<any>(`/package/get-total/${packuserid}`);
+  }
+
+  onPayment(payments: any) {
+    return this._client.post<any>("/package/payment", payments);
+  }
+
+  onPaymentTransfer(payments: any) {
+    return this._client.post<any>("/package/payment-transfer", payments);
+  }
+
+  getDetailPackageUpgrade(id: number, puid: number) {
+    return this._client.get<any>(`/package/package-upgrade/${id}/${puid}`);
+  }
+
+  paymentByCode(id: number, code: any) {
+    let params = new HttpParams();
+    params = params.append('code', code);
+    return this._client.get<any>(`/package/payment-by-access-code/${id}`, {params});
+  }
+}
diff --git a/Phaha_Package/src/app/package/package.module.ts b/Phaha_Package/src/app/package/package.module.ts
new file mode 100644
index 0000000..eddb6d1
--- /dev/null
+++ b/Phaha_Package/src/app/package/package.module.ts
@@ -0,0 +1,57 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {SwiperModule} from "swiper/angular";
+import {BrowserModule} from "@angular/platform-browser";
+import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
+import { PackageDetailModule } from './package-detail/package-detail.module';
+import { PackagePaymentComponent } from './package-payment/package-payment.component';
+import { RouterModule } from '@angular/router';
+import { PaymentSuccessComponent } from './package-payment/payment-success/payment-success.component';
+import { BlockUIModule } from 'ng-block-ui';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NewspaperDetailComponent } from './newspaper-detail/newspaper-detail.component';
+import { PackageHotModule } from './package-hot/package-hot.module';
+import { PackageRelatedModule } from './package-related/package-related.module';
+import { PackageTrialComponent } from './package-trial/package-trial.component';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClient } from '@angular/common/http';
+import { NewspaperDetailModule } from './newspaper-detail/newspaper-detail.module';
+import { PaymentInfoComponent } from './package-payment/payment-info/payment-info.component';
+import { LoginModule } from '../login/login.module';
+import { PackageUpgradeComponent } from './package-upgrade/package-upgrade.component';
+
+@NgModule({
+  declarations: [
+    PackagePaymentComponent,
+    PaymentSuccessComponent,
+    NewspaperDetailComponent,
+    PackageTrialComponent,
+    PaymentInfoComponent,
+    PackageUpgradeComponent,
+  ],
+  imports: [
+    CommonModule,
+    SwiperModule,
+    BrowserModule,
+    NgbModule,
+    RouterModule,
+    FormsModule,
+    LoginModule,
+    ReactiveFormsModule,
+    BlockUIModule.forRoot(),
+    PackageHotModule,
+    PackageRelatedModule,
+    NewspaperDetailModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    }),
+    PackageDetailModule,
+  ]
+})
+export class PackageModule {
+}
diff --git a/Phaha_Package/src/app/package/package.service.ts b/Phaha_Package/src/app/package/package.service.ts
new file mode 100644
index 0000000..bd996d8
--- /dev/null
+++ b/Phaha_Package/src/app/package/package.service.ts
@@ -0,0 +1,65 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from "@angular/common/http";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PackageService {
+
+  constructor(
+    private _httpClient: HttpClient,
+  ) {
+  }
+
+  getListHotPackage() {
+    return this._httpClient.get<any>(`/package/hot`);
+  }
+
+  getDetailPackage(id: number) {
+    return this._httpClient.get<any>(`/package/detail/${id}`);
+  }
+
+  getDetailPackageOfUser(id: number) {
+    return this._httpClient.get<any>(`/package/detail-package-of-user/${id}`);
+  }
+
+  getRelatePackage(id: number) {
+    return this._httpClient.get<any>(`/package/relate/${id}`);
+  }
+
+  getNewspaper(id: number, pageModel: any) {
+    let params = new HttpParams();
+    params = params.append('page', pageModel.page);
+    params = params.append('pageSize', pageModel.pageSize);
+    params = params.append('packageId', id);
+
+    return this._httpClient.get<any>(`/newspaper/list`, { params });
+  }
+
+  getListNewspaperLatest(id: number, pageModel: any) {
+    let params = new HttpParams();
+    params = params.append('page', pageModel.page);
+    params = params.append('pageSize', pageModel.pageSize);
+    return this._httpClient.get<any>(`/newspaper/latest/${id}`, { params });
+  }
+
+  getDetailNewsPaper(id: number) {
+    return this._httpClient.get<any>(`/newspaper/detail/${id}`);
+  }
+
+  getListNewspaperRelate(id: number, pageModel: any) {
+    let params = new HttpParams();
+    params = params.append('page', pageModel.page);
+    params = params.append('pageSize', pageModel.pageSize);
+    params = params.append('packageId', pageModel.packageId);
+    return this._httpClient.get<any>(`/newspaper/relate/${id}`, { params });
+  }
+
+  getPathVideoByEditorial(id: number) {
+    return this._httpClient.get<any>(`/editorial-office/path-video/${id}`);
+  }
+
+  getMonth() {
+    return this._httpClient.get<number>(`/package/get-month`);
+  }
+}
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news-prfeditorial-prfauthor.component.html b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news-prfeditorial-prfauthor.component.html
new file mode 100644
index 0000000..986a633
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news-prfeditorial-prfauthor.component.html
@@ -0,0 +1,60 @@
+<div class="container pt-4">
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb page-news-prfeditorial-prfauthor-breadcrumb">
+            <li class="breadcrumb-item"><a href="/home">{{'page-news.home' | translate}}</a></li>
+            <li class="breadcrumb-item active" aria-current="page">{{'page-news.title-breadcrumb' | translate}}</li>
+        </ol>
+    </nav>
+    <div class="card p-2">
+        <div class="box-head position-relative">
+            <div class="box-header">
+                <a>{{'page-news.news-new' | translate}}</a>
+            </div>
+        </div>
+
+        <div class="card-body">
+            <div class="row">
+                <div class="col-md-8 col-xs-12 pb-5">
+                    <ngb-carousel [pauseOnHover]="false" class="new-carousel">
+                        <ng-container *ngFor="let items of listNewsHot">
+                            <ng-template ngbSlide>
+                                <div class="new-carousel-img">
+                                    <a routerLink="/news/detail/{{items.id}}">
+                                        <img [src]="items.image" />
+                                    </a>
+                                </div>
+                                <div class="new-carousel-content pt-2">
+                                    <h3 class="new-carousel-title">
+                                        <a routerLink="/news/detail/{{items.id}}">
+                                            {{items.title}}
+                                        </a>
+                                    </h3>
+                                    <p class="new-carousel-time">({{items.dateCreate}})</p>
+                                    <div class="new-carousel-description">{{items.description}}</div>
+                                </div>
+                            </ng-template>
+                        </ng-container>
+                    </ngb-carousel>
+                </div>
+                <div class="col-md-4 col-xs-12">
+                    <div class="lst-item">
+                        <ng-container *ngFor="let itemsNews of listData">
+                            <div class="new-item mb-3">
+                                <h3 class="new-title">
+                                    <a routerLink="/news/detail/{{itemsNews.id}}">{{itemsNews.title}}</a>
+                                </h3>
+                                <p class="new-description">{{itemsNews.description}}</p>
+                            </div>
+                        </ng-container>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <div class="content-news mt-4">
+        <app-page-news></app-page-news>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news-prfeditorial-prfauthor.component.scss b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news-prfeditorial-prfauthor.component.scss
new file mode 100644
index 0000000..11dce38
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news-prfeditorial-prfauthor.component.scss
@@ -0,0 +1,148 @@
+@import "~quill/dist/quill.core.css";
+@import "~quill/dist/quill.bubble.css";
+@import "~quill/dist/quill.snow.css";
+
+app-page-news-prfeditorial-prfauthor {
+    .margin-top {
+        margin-top: 10px;
+    }
+
+    .lst-item {
+        height: 600px;
+        overflow: auto;
+    }
+
+    .box-head {
+        margin-bottom: 5px;
+        padding: 5px 0;
+        border-bottom: 1px solid #eeeeee;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin: 0 -10px;
+    }
+
+    .box-header {
+        a {
+            font-weight: 400;
+            font-size: 24px;
+            color: #000000;
+            text-decoration: none;
+            margin-left: 10px;
+        }
+    }
+
+    .box-header::after {
+        content: '';
+        width: 100px;
+        border-top: 2px solid #f26b1b;
+        position: absolute;
+        color: transparent;
+        top: 45px;
+        left: 10px;
+    }
+
+    .custom {
+        text-align: justify;
+
+        .hastag {
+            padding: 3px 20px 3px 0;
+            border-radius: 4px;
+            display: inline-block;
+            color: #666;
+            font-weight: 600;
+            text-decoration: none;
+            line-height: 28px;
+            font-size: 14px;
+
+            &:hover {
+                color: #222;
+                text-decoration: underline;
+            }
+        }
+
+        cursor: pointer;
+    }
+
+    .pagination {
+        justify-content: end;
+    }
+
+    .page-item.active .page-link {
+        background-color: #fcaf17;
+        border: #fcaf17;
+        color: #fff !important;
+        width: 35px;
+        text-align: center;
+        padding-top: 7px !important;
+    }
+
+    .page-item {
+        margin: 0 3px !important;
+        border-radius: 50% !important;
+
+        a {
+            border: none !important;
+            color: #222 !important;
+        }
+    }
+
+    .page-item a.page-link {
+        border-radius: 50%;
+    }
+
+    .page-item:last-child .page-link {
+        border-top-right-radius: 50% !important;
+        border-bottom-right-radius: 50% !important;
+    }
+
+    .page-link:focus {
+        box-shadow: none !important;
+    }
+
+    .page-item:first-child .page-link {
+        border-top-left-radius: 50% !important;
+        border-bottom-left-radius: 50% !important;
+    }
+
+    .page-link:hover {
+        width: 35px;
+        height: 35px;
+        text-align: center;
+    }
+
+    .page-link {
+        width: 35px !important;
+        line-height: 25px !important;
+        text-align: center;
+        padding-top: 7px !important;
+    }
+
+    .page-news-prfeditorial-prfauthor-breadcrumb {
+        li {
+            a {
+                color: #000000;
+                text-decoration: none !important;
+            }
+
+            a:hover {
+                color: #f26b1b;
+            }
+        }
+    }
+
+}
+
+
+
+
+.match-height {
+    >[class*="col"] {
+        display: flex;
+        flex-flow: column;
+
+        >.card {
+            flex: 1 1 auto;
+        }
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news-prfeditorial-prfauthor.component.ts b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news-prfeditorial-prfauthor.component.ts
new file mode 100644
index 0000000..13b81c1
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news-prfeditorial-prfauthor.component.ts
@@ -0,0 +1,174 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { PageNewsPrfeditorialPrfauthorService } from './page-news-prfeditorial-prfauthor.service';
+import { finalize } from 'rxjs';
+import { environment } from 'src/environments/environment';
+
+@Component({
+  selector: 'app-page-news-prfeditorial-prfauthor',
+  templateUrl: './page-news-prfeditorial-prfauthor.component.html',
+  styleUrls: ['./page-news-prfeditorial-prfauthor.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+
+export class PageNewsPrfeditorialPrfauthorComponent implements OnInit {
+  private pageModel = {
+    pageNumber: 1,
+    pageSize: 10,
+  }
+  public pageNumber: number = 1;
+  public pageSize: number = 10;
+  public baseApi = environment.apiUrl.replace('/web', '');
+  public listNewsHot: any = [
+    {
+      id: 1,
+      image: '../../../assets/fake-data/news1.jpg',
+      title: 'Nhiều cao tốc không có trạm dừng nghỉ',
+      dateCreate: '23/08/2022 16:04',
+      description: "Tuyến cao tốc Bắc Giang - Lạng Sơn dài 64 km đã hoạt động được 3 năm, nhưng chưa có trạm dừng nghỉ. Thống kê của Công ty HHV, đơn vị vận hành cao tốc, lưu lượng trên tuyến khoảng 6.000-8.000 lượt xe mỗi ngày."
+    },
+    {
+      id: 2,
+      image: '../../../assets/fake-data/news2.jpg',
+      title: 'Bộ Công an đột kích nhiều lò làm giấy tờ giả',
+      dateCreate: '23/08/2022 16:04',
+      description: "Tuyến cao tốc Bắc Giang - Lạng Sơn dài 64 km đã hoạt động được 3 năm, nhưng chưa có trạm dừng nghỉ. Thống kê của Công ty HHV, đơn vị vận hành cao tốc, lưu lượng trên tuyến khoảng 6.000-8.000 lượt xe mỗi ngày."
+    },
+    {
+      id: 3,
+      image: '../../../assets/fake-data/news3.jpg',
+      title: 'OPEC+ có thể giảm sản lượng để kéo giá dầu lên',
+      dateCreate: '23/08/2022 16:04',
+      description: "Tổ chức các nước Xuất khẩu Dầu mỏ (OPEC) hiện có 13 thành viên. OPEC và 10 nước đồng minh - dẫn đầu bởi Nga - tháng trước thống nhất nâng sản lượng thêm 100.000 thùng một ngày sau khi phương Tây kêu gọi tăng sản xuất. Giá dầu đầu năm nay tăng cao do xung đột Nga - Ukraine và nhu cầu dầu sau đại dịch."
+    },
+    {
+      id: 4,
+      image: '../../../assets/fake-data/news1.jpg',
+      title: 'Nhiều cao tốc không có trạm dừng nghỉ',
+      dateCreate: '23/08/2022 16:04',
+      description: "Tuyến cao tốc Bắc Giang - Lạng Sơn dài 64 km đã hoạt động được 3 năm, nhưng chưa có trạm dừng nghỉ. Thống kê của Công ty HHV, đơn vị vận hành cao tốc, lưu lượng trên tuyến khoảng 6.000-8.000 lượt xe mỗi ngày."
+    },
+  ];
+  public listData: any[] = [];
+  public listWord = [
+    {
+      id: 2,
+      name: 'A',
+    },
+    {
+      id: 3,
+      name: 'B',
+    },
+    {
+      id: 4,
+      name: 'C',
+    },
+    {
+      id: 5,
+      name: 'D',
+    },
+    {
+      id: 6,
+      name: 'E',
+    },
+    {
+      id: 7,
+      name: 'F',
+    },
+    {
+      id: 8,
+      name: 'G',
+    },
+    {
+      id: 9,
+      name: 'H',
+    },
+    {
+      id: 10,
+      name: 'I',
+    },
+    {
+      id: 11,
+      name: 'J',
+    }, {
+      id: 12,
+      name: 'K',
+    },
+    {
+      id: 13,
+      name: 'L',
+    },
+    {
+      id: 14,
+      name: 'M',
+    },
+    {
+      id: 15,
+      name: 'N',
+    },
+    {
+      id: 16,
+      name: 'O',
+    },
+    {
+      id: 17,
+      name: 'P',
+    },
+    {
+      id: 18,
+      name: 'Q',
+    },
+    {
+      id: 19,
+      name: 'R',
+    },
+    {
+      id: 20,
+      name: 'S',
+    },
+    {
+      id: 21,
+      name: 'T',
+    },
+
+    {
+      id: 22,
+      name: 'U',
+    }, {
+      id: 23,
+      name: 'V',
+    },
+
+    {
+      id: 24,
+      name: 'W',
+    },
+    {
+      id: 25,
+      name: 'X',
+    }, {
+      id: 26,
+      name: 'Y',
+    },
+    {
+      id: 27,
+      name: 'Z',
+    },
+  ]
+  constructor(
+    private _apiService: PageNewsPrfeditorialPrfauthorService,
+  ) {
+
+  }
+
+
+  ngOnInit(): void {
+    this.onGetListNewsHot();
+  }
+
+  onGetListNewsHot() {
+    this._apiService.getLstNewsHot().pipe(finalize(() => {
+    })).subscribe(success => {
+      this.listData = success.data;
+    });
+  }
+}
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news-prfeditorial-prfauthor.module.ts b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news-prfeditorial-prfauthor.module.ts
new file mode 100644
index 0000000..86c257a
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news-prfeditorial-prfauthor.module.ts
@@ -0,0 +1,50 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SwiperModule } from "swiper/angular";
+import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
+import { RouterModule } from '@angular/router';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClient } from '@angular/common/http';
+import { PageNewsPrfeditorialPrfauthorComponent } from './page-news-prfeditorial-prfauthor.component';
+import { PrfEditorialOfficeComponent } from './prf-editorial-office/prf-editorial-office.component';
+import { PagePrfEditorialOfficeComponent } from './prf-editorial-office/page-prf-editorial-office/page-prf-editorial-office.component';
+import { PrfAuthorComponent } from './prf-author/prf-author.component';
+import { PageNewsComponent } from './page-news/page-news.component';
+import { BlockUIModule } from 'ng-block-ui';
+import { PagePrfAuthorComponent } from './prf-author/page-prf-author/page-prf-author.component';
+import { PageDetailPrfAuthorComponent } from './prf-author/page-prf-author/page-detail-prf-author/page-detail-prf-author.component';
+import { PageDetailPrfEditorialOfficeComponent } from './prf-editorial-office/page-prf-editorial-office/page-detail-prf-editorial-office/page-detail-prf-editorial-office.component';
+import { PageNewsCategoryComponent } from './page-news/page-news-category/page-news-category.component';
+import { PageNewsDetailComponent } from './page-news/page-news-category/page-news-detail/page-news-detail.component';
+import { QuillModule } from 'ngx-quill';
+import { ShareButtonsModule } from 'ngx-sharebuttons/buttons';
+
+@NgModule({
+  declarations: [PageNewsPrfeditorialPrfauthorComponent, PrfEditorialOfficeComponent,
+    PagePrfEditorialOfficeComponent, PrfAuthorComponent, PageNewsComponent, PagePrfAuthorComponent,
+    PageDetailPrfAuthorComponent, PageDetailPrfEditorialOfficeComponent, PageNewsCategoryComponent, PageNewsDetailComponent, PageNewsDetailComponent],
+  exports: [
+    PrfEditorialOfficeComponent,
+    PagePrfEditorialOfficeComponent, PrfAuthorComponent, PageNewsComponent,
+    PagePrfAuthorComponent, PageDetailPrfAuthorComponent,
+    PageDetailPrfEditorialOfficeComponent, PageNewsCategoryComponent, PageNewsDetailComponent
+  ],
+  imports: [
+    CommonModule,
+    SwiperModule,
+    NgbModule,
+    RouterModule,
+    QuillModule.forRoot(),
+    BlockUIModule.forRoot(),
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    }),
+    ShareButtonsModule
+  ]
+})
+export class PageNewsPrfeditorialPrfauthorModule { }
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news-prfeditorial-prfauthor.service.ts b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news-prfeditorial-prfauthor.service.ts
new file mode 100644
index 0000000..94f4fb0
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news-prfeditorial-prfauthor.service.ts
@@ -0,0 +1,109 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from "@angular/common/http";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class PageNewsPrfeditorialPrfauthorService {
+
+    constructor(
+        private _httpClient: HttpClient,
+    ) {
+    }
+
+    getListHotNews(pageModel: any) {
+        let params = new HttpParams();
+        params = params.append('pageSize', pageModel.pageSize);
+        params = params.append('page', pageModel.pageNumber);
+        return this._httpClient.get<any>(`/tiding/list-hot`, { params });
+    }
+
+    getListCategoryOfNews() {
+        return this._httpClient.get<any>(`/tiding-category/list`);
+    }
+
+    getListNew(pageModel: any) {
+        let params = new HttpParams();
+        params = params.append('pageSize', pageModel.pageSize);
+        params = params.append('page', pageModel.pageNumber);
+        return this._httpClient.get<any>(`/tiding/list-by-category`, { params });
+    }
+
+    getListEditorialOffice(pageModel: any) {
+        let params = new HttpParams();
+        params = params.append('pageSize', pageModel.pageSize);
+        params = params.append('page', pageModel.pageNumber);
+        params = params.append('keyWord', pageModel.keyWord);
+        return this._httpClient.get<any>(`/tiding-editorial/list`, { params });
+    }
+
+    getListAuthor(pageModel: any) {
+        let params = new HttpParams();
+        params = params.append('pageSize', pageModel.pageSize);
+        params = params.append('page', pageModel.pageNumber);
+        params = params.append('keyWord', pageModel.keyWord);
+        return this._httpClient.get<any>(`/tiding-journalist/list`, { params });
+    }
+
+    getListNewsByHome() {
+        return this._httpClient.get<any>('tiding/new');
+    }
+
+    getDetailNews(id: number) {
+        return this._httpClient.get<any>('/tiding/detail/' + id)
+    }
+    getListMostView() {
+        return this._httpClient.get<any>('/tiding/most-view')
+    }
+    getListInterst(id: number) {
+        return this._httpClient.get<any>('/tiding/interest/' + id)
+    }
+
+    getListNewsInDay() {
+        return this._httpClient.get<any>('/tiding/in-day')
+    }
+
+    getDetailAuthor(idAuthor: number) {
+        return this._httpClient.get<any>('/tiding-journalist/detail/' + idAuthor);
+    }
+
+    getLstWorkAuthor(idAuthor: number) {
+        return this._httpClient.get<any>('/tiding-journalist/book-by-journalist/' + idAuthor);
+    }
+    getLstAuthorOther(idAuthor: number) {
+        return this._httpClient.get<any>('/tiding-journalist/other/' + idAuthor);
+    }
+    getListInterest() {
+        return this._httpClient.get<any>('/tiding-journalist-book/hot');
+    }
+
+    getListEditorialOfficeIntroduce() {
+        return this._httpClient.get<any>('/tiding-editorial/list-introduce');
+    }
+
+    getDetailNewsroomProfile(idNewsroomProfile: number) {
+        return this._httpClient.get<any>(`/tiding-editorial/detail/` + idNewsroomProfile);
+    }
+
+    getLstNewsHot() {
+        return this._httpClient.get<any>(`/tiding/hot`);
+    }
+
+    getDetailCateById(id: number,) {
+        return this._httpClient.get<any>(`/tiding-category/detail/${id}`);
+    }
+
+    getLstNewsByIdOfCate(id: number, pageModel: any) {
+        let params = new HttpParams();
+        params = params.append('pageNumber', pageModel.pageNumber);
+        params = params.append('pageSize', pageModel.pageSize);
+        return this._httpClient.get<any>(`/tiding/detail-by-category/${id}`, { params });
+    }
+
+    getLstNewsNest(pageModel: any) {
+        let params = new HttpParams();
+        params = params.append('pageNumber', pageModel.pageNumber);
+        params = params.append('pageSize', pageModel.pageSize);
+        return this._httpClient.get<any>(`/tiding/newest`, { params });
+    }
+}
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news/page-news-category/page-news-category.component.html b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news/page-news-category/page-news-category.component.html
new file mode 100644
index 0000000..f648674
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news/page-news-category/page-news-category.component.html
@@ -0,0 +1,116 @@
+<block-ui>
+    <div class="page-news-by-category pt-4">
+        <div class="container">
+            <nav aria-label="breadcrumb">
+                <ol class="breadcrumb page-news-by-category">
+                    <li class="breadcrumb-item"><a href="/home">{{'page-news.home' | translate}}</a></li>
+                    <li class="breadcrumb-item active" aria-current="page">{{'page-news.title' | translate}}</li>
+                </ol>
+            </nav>
+            <div class="bg-card">
+                <div class="header-page-category ">
+                    <div class="title" (click)="onTakeNewsByIdOfCate(modelDataDetail)">
+                        <h4>{{modelDataDetail.name}}</h4>
+                    </div>
+                    <div class="category-header d-flex justify-content-center">
+                        <ng-container *ngFor="let cate of modelDataDetail.children">
+                            <div [class]="idCate === cate.id? 'category-header-active' : ''"
+                                (click)="onTakeNewsByIdOfCate(cate)" class="items-cate">{{cate.name}}</div>
+                        </ng-container>
+                    </div>
+                </div>
+                <div class="lst-news-by-cate mt-4">
+                    <div class="row">
+                        <div class="col-lg-5 col-md-12 col-12">
+                            <div class="img-thumbnail p-3">
+                                <div class="image-news" *ngIf="lstNewsOfCateById.result[0]">
+                                    <a routerLink="/news/detail/{{lstNewsOfCateById.result[0]?.id}}">
+                                        <img src="{{baseUrl + lstNewsOfCateById.result[0]?.image}}"
+                                            class="img-hot-news-left" (error)="errorHandler($event)">
+                                    </a>
+                                </div>
+                                <div class="content-news-left p-2"
+                                    routerLink="/news/detail/{{lstNewsOfCateById.result[0]?.id}}">
+                                    <h4 class="title-news">{{lstNewsOfCateById.result[0]?.title}}</h4>
+                                    <label class="time-news">{{lstNewsOfCateById.result[0]?.dateCreate | date:
+                                        'dd/MM/YYYY hh:ss'}} |
+                                        {{lstNewsOfCateById.result[0]?.view}} lượt xem</label>
+                                    <label class="description-news">{{lstNewsOfCateById.result[0]?.description}}</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-lg-7 col-md-12 col-12">
+                            <ng-container *ngFor="let itemNews of lstNewsOfCateById.result; let i = index">
+                                <div routerLink="/news/detail/{{itemNews.id}}"
+                                    class="img-thumbnail items-news-by-cate p-3" *ngIf="i > 0">
+                                    <div class="row">
+                                        <div class="col-md-3 col-3">
+                                            <div class="image-news">
+                                                <a>
+                                                    <img src="{{baseUrl + itemNews.image}}"
+                                                        class="img-hot-news-right w-100" (error)="errorHandler($event)">
+                                                </a>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-9 col-9">
+                                            <div class="content-news-right">
+                                                <h4 class="title-news">{{itemNews.title}}</h4>
+                                                <label class="time-news">{{itemNews.dateCreate | date: 'dd/MM/YYYY
+                                                    hh:ss'}}
+                                                    |
+                                                    {{itemNews.view}} lượt xem</label>
+                                                <label class="description-news">{{itemNews.description}}</label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </ng-container>
+                        </div>
+                    </div>
+                </div>
+                <div class="paging-lstNewsOfCateById">
+                    <ngb-pagination [collectionSize]="lstNewsOfCateById.totalItemCount"
+                        [(page)]="lstNewsOfCateById.pageNumber" [maxSize]="3" [rotate]="true"
+                        [pageSize]="lstNewsOfCateById.pageSize" (pageChange)="onPageChangeLstNewsByIdOfCate($event)">
+                    </ngb-pagination>
+                </div>
+            </div>
+            <div class="bg-card mt-4">
+                <div class="box-head position-relative">
+                    <div class="box-header">
+                        <a>{{'page-news.hot' | translate}}</a>
+                    </div>
+                </div>
+                <div class="lst-news-hot">
+                    <div class="row">
+                        <ng-container *ngFor="let newsNest of lstNewsNest.result">
+                            <div class="col-md-6 col-xs-12 pb-3">
+                                <div class="content-news-cate" routerLink="/news/detail/{{newsNest.id}}">
+                                    <div class="row">
+                                        <div class="col-3">
+                                            <div class="image-news">
+                                                <img (error)="errorHandler($event)" src="{{newsNest.image}}" />
+                                            </div>
+                                        </div>
+                                        <div class="col-9">
+                                            <div class="content-newsC">
+                                                <h4 class="title-news">{{newsNest.title}}</h4>
+                                                <label class="time-news mb-1">{{newsNest.dateCreate}} |
+                                                    {{newsNest.view}} lượt xem</label>
+                                                <label class="description-news">{{newsNest.description}}</label>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                </div>
+                            </div>
+                        </ng-container>
+                    </div>
+                    <div class="view-more" *ngIf="lstNewsNest.pageNumber < lstNewsNest.pageCount">
+                        <a type="button" (click)="onTakeMoreLstNewsNest()">{{'page-news.view-more' | translate}}</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</block-ui>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news/page-news-category/page-news-category.component.scss b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news/page-news-category/page-news-category.component.scss
new file mode 100644
index 0000000..e74c0a8
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news/page-news-category/page-news-category.component.scss
@@ -0,0 +1,243 @@
+@import "~quill/dist/quill.core.css";
+@import "~quill/dist/quill.bubble.css";
+@import "~quill/dist/quill.snow.css";
+
+app-page-news-category {
+    .bg-card {
+        background-color: #ffff;
+        padding: 10px;
+    }
+
+    .box-head {
+        margin-bottom: 5px;
+        padding: 5px 0;
+        border-bottom: 1px solid #eeeeee;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin: 0 -10px;
+    }
+
+    .box-header {
+        a {
+            font-weight: 400;
+            font-size: 24px;
+            color: #000000;
+            text-decoration: none;
+            margin-left: 10px;
+        }
+    }
+
+    .box-header::after {
+        content: "";
+        width: 100px;
+        border-top: 2px solid #f26b1b;
+        position: absolute;
+        color: transparent;
+        top: 45px;
+        left: 10px;
+    }
+
+    .items-news-by-cate {
+        margin-bottom: 10px;
+    }
+
+    .header-page-category {
+        .title {
+            text-align: center;
+            border-bottom: 2px solid #f26b1b;
+            text-transform: uppercase;
+            cursor: pointer;
+
+            h4 {
+                font-size: 26px;
+                font-weight: 700;
+            }
+        }
+
+        .category-header {
+            margin-top: 10px;
+
+            .items-cate {
+                padding: 10px;
+            }
+
+            .items-cate:hover {
+                color: #f26b1b;
+                font-weight: 700;
+                cursor: pointer;
+            }
+        }
+    }
+
+
+    .description-news {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 136.19%;
+        text-align: justify;
+        display: block;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .time-news {
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 136.19%;
+        color: #808285;
+    }
+
+    .title-news {
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 136.19%;
+        color: #000000;
+        display: block;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        /* số dòng hiển thị */
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        cursor: pointer;
+    }
+
+    .lst-news-hot {
+        margin-top: 10px;
+        margin-bottom: 10px;
+
+        .content-news-cate {
+            padding: 10px !important;
+            border: 1px #dee2e6 solid;
+            border-radius: 5px;
+            margin-bottom: 15px;
+            height: 100%;
+
+            .image-news {
+                overflow: hidden !important;
+                width: 100%;
+
+                img {
+                    width: 100%;
+                    object-fit: cover;
+                    transition: transform 0.6s;
+                }
+
+                img:hover {
+                    transform: scale(1.1);
+                }
+            }
+        }
+
+        .view-more {
+            text-align: right;
+
+            a {
+                font-size: 14px;
+                cursor: pointer;
+                border: 1px solid #f26b1b;
+                padding: 5px;
+                border-radius: 10px;
+            }
+
+            a:hover {
+                color: #fff;
+                background-color: #f26b1b;
+            }
+        }
+    }
+
+    .image-news {
+        overflow: hidden !important;
+        width: 100%;
+
+        img {
+            width: 100%;
+            object-fit: cover;
+            transition: transform 0.6s;
+        }
+
+        img:hover {
+            transform: scale(1.1);
+        }
+    }
+
+    .page-news-by-category {
+        li {
+            a {
+                color: #000000;
+                text-decoration: none !important;
+            }
+
+            a:hover {
+                color: #f26b1b;
+            }
+        }
+    }
+
+    .category-header-active {
+        color: #f26b1b;
+        font-weight: 700;
+    }
+
+    .paging-lstNewsOfCateById {
+        margin-top: 10px;
+    }
+
+    .pagination {
+        justify-content: end !important;
+    }
+
+    .page-item.active .page-link {
+        background-color: #fcaf17;
+        border: #fcaf17;
+        color: #fff !important;
+        width: 35px;
+        text-align: center;
+        padding-top: 7px !important;
+    }
+
+    .page-item {
+        margin: 0 3px !important;
+        border-radius: 50% !important;
+
+        a {
+            border: none !important;
+            color: #222 !important;
+        }
+    }
+
+    .page-item a.page-link {
+        border-radius: 50%;
+    }
+
+    .page-item:last-child .page-link {
+        border-top-right-radius: 50% !important;
+        border-bottom-right-radius: 50% !important;
+    }
+
+    .page-link:focus {
+        box-shadow: none !important;
+    }
+
+    .page-item:first-child .page-link {
+        border-top-left-radius: 50% !important;
+        border-bottom-left-radius: 50% !important;
+    }
+
+    .page-link:hover {
+        width: 30px;
+        text-align: center;
+    }
+
+    .page-link {
+        width: 35px !important;
+        height: 35px !important;
+        text-align: center;
+        padding-top: 7px !important;
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news/page-news-category/page-news-category.component.ts b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news/page-news-category/page-news-category.component.ts
new file mode 100644
index 0000000..6fd2c5e
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news/page-news-category/page-news-category.component.ts
@@ -0,0 +1,123 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { environment } from 'src/environments/environment';
+import { PageNewsPrfeditorialPrfauthorService } from '../../page-news-prfeditorial-prfauthor.service';
+import { finalize } from 'rxjs';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-page-news-category',
+  templateUrl: './page-news-category.component.html',
+  styleUrls: ['./page-news-category.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class PageNewsCategoryComponent implements OnInit {
+  lstNewsNest: any = {
+    firstItemOnPage: 1,
+    result: [],
+    totalItemCount: 0,
+    pageCount: 0,
+    pageNumber: 1,
+    pageSize: 4,
+  };
+  baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 3);
+  listCategory = [
+    {
+      id: 1,
+      name: 'BẤT ĐỘNG SẢN'
+    },
+    {
+      id: 2,
+      name: 'TÀI CHÍNH - CHỨNG KHOÁN'
+    },
+    {
+      id: 3,
+      name: 'TIỀN CỦA TÔI'
+    },
+    {
+      id: 4,
+      name: 'TIÊU DÙNG'
+    },
+    {
+      id: 5,
+      name: 'KINH TẾ SỐ'
+    },
+    {
+      id: 6,
+      name: 'THÔNG TIN DOANH NGHIỆP'
+    },
+  ];
+  idCate: number = 0;
+  modelDataDetail: any = {
+    children: [],
+    id: 0,
+    name: ''
+  };
+  lstNewsOfCateById: any = {
+    firstItemOnPage: 1,
+    result: [],
+    totalItemCount: 0,
+    pageCount: 0,
+    pageNumber: 1,
+    pageSize: 4,
+  };
+
+  constructor(
+    private _apiService: PageNewsPrfeditorialPrfauthorService,
+    private _route: ActivatedRoute
+  ) {
+    this._route.params.subscribe(success => {
+      this.idCate = success['id'];
+    });
+  }
+
+  onGetDetailCateById() {
+    this._apiService.getDetailCateById(this.idCate).subscribe(success => {
+      this.modelDataDetail = success.data;
+    });
+  };
+
+
+  errorHandler(e: any) {
+    return e.target.src = "/assets/images/news/newspaper-default.png";
+  };
+
+  onTakeNewsByIdOfCate(item: any) {
+    this.idCate = item.id;
+    this.onGetLstNewsbyIdOfcate();
+  };
+
+  onGetLstNewsbyIdOfcate() {
+    this._apiService.getLstNewsByIdOfCate(this.idCate, this.lstNewsOfCateById).subscribe(success => {
+      this.lstNewsOfCateById = success.data;
+    });
+  };
+
+  onPageChangeLstNewsByIdOfCate(numberPage: number) {
+    this.lstNewsOfCateById.pageNumber = numberPage;
+    this.onGetLstNewsbyIdOfcate();
+  };
+
+  onGetLstNewsNest() {
+    this._apiService.getLstNewsNest(this.lstNewsNest).subscribe(success => {
+      this.lstNewsNest.result = this.lstNewsNest.result.concat(success.data.result);
+      this.lstNewsNest.pageCount = success.data.pageCount;
+      this.lstNewsNest.totalItemCount = success.data.totalItemCount;
+    });
+  };
+
+  onTakeMoreLstNewsNest() {
+    if (this.lstNewsNest.pageNumber < this.lstNewsNest.pageCount) {
+      this.lstNewsNest.pageNumber++;
+      this.onGetLstNewsNest();
+    }
+  }
+
+
+  ngOnInit(): void {
+    if (this.idCate > 0) {
+      this.onGetDetailCateById();
+      this.onGetLstNewsbyIdOfcate();
+    };
+    this.onGetLstNewsNest();
+  };
+}
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news/page-news-category/page-news-detail/page-news-detail.component.html b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news/page-news-category/page-news-detail/page-news-detail.component.html
new file mode 100644
index 0000000..6e74c75
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news/page-news-category/page-news-detail/page-news-detail.component.html
@@ -0,0 +1,140 @@
+<div class="page-news-detail pt-4">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-8 col-xs-12 col-sm-8">
+                <div>
+                    <div class="bg-card d-flex">
+                        <div *ngIf="!checkMobile" class="social_pin">
+                            <share-buttons theme="modern-light" [show]="11"
+                                [include]="['facebook', 'email', 'messenger', 'twitter', 'viber']"></share-buttons>
+                            <ul class="social_left">
+                                <li>
+                                    <a (click)="onPrint();" class="uil uil-print" data-type="in"
+                                        data-url="https://bit.ly/3PVk03N"
+                                        data-desc="Ông Nguyễn Trí Tuệ cho biết cụm từ " title="In"></a>
+                                </li>
+                                <li>
+                                    <a (click)="onBackClicked()" class="uil uil-arrow-left" data-type="in"
+                                        data-url="https://bit.ly/3PVk03N"
+                                        data-desc="Ông Nguyễn Trí Tuệ cho biết cụm từ " title="Quay lại trang chủ"></a>
+                                </li>
+                            </ul>
+                        </div>
+                        <div id="NewDetailContent">
+                            <div class="box-head position-relative">
+                                <div class="box-header d-flex justify-content-between">
+                                    <a>{{dataDetailNews?.categoryName[0]}}</a>
+                                    <div class="p-2 mt-auto">
+                                        <span>
+                                            {{onFormatDate(dataDetailNews?.dateCreate)}}{{dataDetailNews?.dateCreate |
+                                            date: 'dd/MM/yyy hh:mm'}}
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="card-body" style="padding: 20px 0">
+                                <h4 class="title-news-detail">{{dataDetailNews?.title}}</h4>
+                                <div id="new-content" class="ql-editor" style="width: 100%;"
+                                    [innerHTML]="dataDetailNews?.content"></div>
+                                <nav aria-label="breadcrumb d-flex">
+                                    <ol class="breadcrumb m-auto">
+                                        <li class="breadcrumb-item active">
+                                            <h3 class="">Tags:</h3>
+                                        </li>
+                                        <li class="breadcrumb-item"><a href="#">nhà báo</a></li>
+                                        <li class="breadcrumb-item"><a href="#">livestream</a></li>
+                                        <li class="breadcrumb-item" aria-current="page">cản
+                                            trở tố tụng</li>
+                                    </ol>
+                                </nav>
+                                <div *ngIf="checkMobile" class="share-bottom">
+                                    <share-buttons theme="modern-light" [show]="11"
+                                        [include]="['facebook', 'email', 'messenger', 'twitter', 'viber']">
+                                    </share-buttons>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-4 col-xs-12 col-sm-4">
+                <div class="bg-card box-new-detail-right">
+                    <div class="box-head position-relative">
+                        <div class="box-header">
+                            <a>Xem nhiều</a>
+                        </div>
+                    </div>
+                    <div style="border-top: none;" class="news-detail-items p-2 cate cursor-pointer"
+                        (click)="onRedirectLink(listMostView[0]?.id)">
+                        <div class="news-most-view-image">
+                            <img (error)="errorHandler($event)" src="{{baseApi + listMostView[0]?.image}}" />
+                        </div>
+                        <div class="see-more-first-title mt-3">
+                            <h5>{{listMostView[0]?.title}}</h5>
+                        </div>
+                    </div>
+                    <ng-container *ngFor="let newsMostView of listMostView; let i = index">
+                        <div *ngIf="i > 1" class="news-detail-items p-2 cate cursor-pointer"
+                            (click)="onRedirectLink(newsMostView.id)">
+                            <div class="news-detail-items-content mt-1">
+                                {{newsMostView.title}}
+                            </div>
+                        </div>
+                    </ng-container>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-8 col-sm-8 col-xs-12">
+                <div class="mt-4 bg-card">
+                    <div class="box-head position-relative">
+                        <div class="box-header">
+                            <a>Có thể bạn quan tâm</a>
+                        </div>
+                    </div>
+                    <div class="lst-news-care mt-4">
+                        <ng-container *ngFor="let newsHot of listInterest">
+                            <div class="content-news-cate cursor-pointer mb-3" (click)="onRedirectLink(newsHot.id)">
+                                <div class="row">
+                                    <div class="col-9">
+                                        <div class="content-newsC">
+                                            <h4 class="title-news">
+                                                {{newsHot.title}}</h4>
+                                            <label class="time-news mb-1">{{newsHot.dateCreate | date: "dd/MM/yyyy hh:ss" }} | {{newsHot.view}} lượt xem
+                                                <span>{{newsHot.categoriesName}}</span></label>
+                                            <label class="description-news">{{newsHot.description}}</label>
+                                        </div>
+                                    </div>
+                                    <div class="col-3">
+                                        <div class="image-news">
+                                            <img (error)="errorHandler($event)" src="{{baseApi + newsHot.image}}" />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </ng-container>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-4 col-sm-4 col-12">
+                <div class="box-new-right-maybe">
+                    <div class="box-head position-relative">
+                        <div class="box-header">
+                            <a>Tin tức nổi bật trong ngày</a>
+                        </div>
+                    </div>
+                    <ul>
+                        <ng-container *ngFor="let newsInDay of listNewsInDay">
+                            <li class="cate cursor-pointer" (click)="onRedirectLink(newsInDay.id)">
+                                <a>{{newsInDay.title}}</a>
+                                <a>
+                                    <img (error)="errorHandler($event)" src="{{baseApi + newsInDay.image}}">
+                                </a>
+                            </li>
+                        </ng-container>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news/page-news-category/page-news-detail/page-news-detail.component.scss b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news/page-news-category/page-news-detail/page-news-detail.component.scss
new file mode 100644
index 0000000..1f8b81e
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news/page-news-category/page-news-detail/page-news-detail.component.scss
@@ -0,0 +1,351 @@
+@import "~quill/dist/quill.core.css";
+
+app-page-news-detail {
+    #NewDetailContent{
+        padding: 0 20px;  width: 100%;
+        .ql-editor{
+            padding: 0;
+        }
+
+        .share-bottom{
+            share-button{
+                margin-right: 10px;
+            }
+        }
+    }
+    .bg-card {
+        background-color: #ffff;
+        padding: 10px;
+    }
+
+    .box-head {
+        margin-bottom: 5px;
+        padding: 5px 0;
+        border-bottom: 1px solid #eeeeee;
+        align-items: center;
+    }
+
+    .box-header {
+        a {
+            font-weight: 400;
+            font-size: 24px;
+            color: #000000;
+            text-decoration: none;
+        }
+    }
+
+    .box-header::after {
+        content: "";
+        width: 100px;
+        border-top: 2px solid #f26b1b;
+        position: absolute;
+        color: transparent;
+        top: 45px;
+        left: 0;
+    }
+
+    .title {
+        h4 {
+            font-weight: 700;
+            font-size: 22px;
+        }
+
+        p {
+            font-weight: 700;
+
+            span {
+                color: #888;
+                font-weight: 500;
+            }
+        }
+    }
+
+    .content-summary {
+        font-size: 16px;
+        font-weight: 700;
+    }
+
+    .text-content {
+        line-height: 25px;
+        font-size: 14px;
+    }
+
+    .image {
+        margin-top: 10px;
+        max-width: 800px;
+        margin: auto;
+
+        img {
+            width: 100%;
+        }
+
+        p {
+            color: #888;
+        }
+    }
+
+    .content-news-cate {
+        padding: 10px !important;
+        border: 1px #efefef solid;
+        border-radius: 5px;
+        height: 100%;
+
+        .image-news {
+            overflow: hidden !important;
+            width: 100%;
+
+            img {
+                width: 100%;
+                object-fit: cover;
+                transition: transform 0.6s;
+            }
+
+            img:hover {
+                transform: scale(1.1);
+            }
+        }
+    }
+
+    .content-news-cate:hover {
+        background-color: #eeeeee;
+    }
+
+    .cate:hover {
+        background-color: #eeeeee !important;
+    }
+
+    .fck_detail {
+        p {
+            font-size: 18px;
+            line-height: 30px;
+        }
+    }
+
+    .time-news {
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 136.19%;
+        color: #808285;
+
+        span {
+            text-transform: uppercase;
+            font-size: 12px;
+        }
+    }
+
+    .description-news {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 136.19%;
+        text-align: justify;
+        display: block;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .news-most-view-image {
+        img {
+            width: 100%;
+        }
+    }
+
+    .news-detail-items {
+        border-top: 1px solid #dee2e6;
+    }
+
+    .news-detail-items:hover {
+        background-color: #efefef;
+        cursor: pointer;
+    }
+
+    .social_left {
+        text-align: center;
+        padding: 0;
+        margin: 0;
+
+        li {
+            list-style: none !important;
+
+            a {
+                font-size: 18px;
+                border-radius: 50%;
+                display: block;
+                width: 40px;
+                height: 40px;
+                line-height: 40px;
+                margin-bottom: 10px;
+                background: #fcaf17;
+                color: white !important;
+                cursor: pointer;
+            }
+        }
+    }
+
+    .social_pin {
+        width: 65px;
+        padding-top: 80px;
+        position: sticky;
+        top: 0;
+        left: 0;
+        height: 100%;
+        padding-bottom: 20px;
+        opacity: 1;
+        visibility: visible;
+        z-index: 1;
+        transition-duration: 250ms;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+
+    .breadcrumb {
+        li {
+            a {
+                text-decoration: none !important;
+                color: #808285;
+            }
+        }
+    }
+
+    .breadcrumb-item + .breadcrumb-item {
+        padding-top: 5px !important;
+    }
+
+    .box-new-right-maybe {
+        padding: 20px 10px;
+        background: #fff;
+        margin-top: 1.5rem !important;
+        padding-bottom: 5px;
+        position: sticky;
+        top: 0;
+        left: 0;
+
+        ul {
+            padding: 0;
+
+            li {
+                display: flex;
+                border-bottom: 1px solid #efefef;
+                padding: 15px 0;
+                justify-content: space-between;
+
+                a {
+                    display: block;
+
+                    &:first-child {
+                        padding: 0 10px;
+                        width: calc(100% - 90px);
+                    }
+
+                    &:last-child {
+                        width: 90px;
+
+                        img {
+                            width: 100%;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .box-new-detail-right {
+        position: sticky;
+        top: 70px;
+        left: 0;
+    }
+
+    .uil-zalo {
+        img {
+            width: 20px;
+            padding-bottom: 5px;
+        }
+    }
+
+    .page-news-right {
+        position: sticky;
+        top: 70px;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+
+    .title-news-detail {
+        font-size: 30px;
+        font-weight: 600;
+        margin-bottom: 40px;
+        color: #444;
+        line-height: 40px;
+    }
+
+    .cursor-pointer {
+        cursor: pointer;
+    }
+
+    .see-more-first-title {
+        h5 {
+            line-height: 1.6;
+        }
+    }
+
+    .sb-modern-dark .sb-wrapper,
+    .sb-modern-light .sb-wrapper {
+        --sb-border-radius: 3px;
+        --sb-transition: box-shadow ease-in 150ms, transform ease-in 150ms;
+        --sb-box-shadow: 0 0.1em 0.5em rgba(165, 165, 165, 0.6);
+    }
+    .sb-modern-dark .sb-wrapper:active,
+    .sb-modern-light .sb-wrapper:active {
+        --sb-box-shadow: 0 0.4em 1em rgba(165, 165, 165, 0.9);
+    }
+    .sb-modern-dark .sb-wrapper .sb-icon,
+    .sb-modern-light .sb-wrapper .sb-icon {
+        min-width: 2em;
+    }
+    .sb-modern-dark .sb-wrapper.sb-show-text,
+    .sb-modern-light .sb-wrapper.sb-show-text {
+        padding: 0;
+    }
+    .sb-modern-dark .sb-wrapper.sb-show-text .sb-icon,
+    .sb-modern-light .sb-wrapper.sb-show-text .sb-icon {
+        box-shadow: 1px 0 1px -1px rgba(0, 0, 0, 0.3);
+    }
+    .sb-modern-dark .sb-wrapper {
+        --sb-color: #fff;
+        --sb-background: var(--button-color);
+    }
+    .sb-modern-dark .sb-wrapper .sb-text,
+    .sb-modern-dark .sb-wrapper .sb-count {
+        background: rgba(0, 0, 0, 0.1);
+    }
+    .sb-modern-dark .sb-wrapper.sb-show-text .sb-text {
+        border-bottom-right-radius: 3px;
+        border-top-right-radius: 3px;
+    }
+    .sb-modern-light .sb-wrapper {
+        min-width: auto;
+        border-radius: 50%;
+        width: 40px;
+        height: 38px;
+        background: #fcaf17;
+        margin-left: 0;
+        margin-right: 0;
+        box-shadow: none;
+    }
+
+    @media screen and (max-width: 600px){
+        #NewDetailContent{
+            padding: 0;
+        }
+    }
+}
+
+#new-content {
+    img {
+        max-width: 100% !important;
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news/page-news-category/page-news-detail/page-news-detail.component.ts b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news/page-news-category/page-news-detail/page-news-detail.component.ts
new file mode 100644
index 0000000..98e8604
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news/page-news-category/page-news-detail/page-news-detail.component.ts
@@ -0,0 +1,156 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { PageNewsPrfeditorialPrfauthorService } from 'src/app/page-news-prfeditorial-prfauthor/page-news-prfeditorial-prfauthor.service';
+import { environment } from 'src/environments/environment';
+import { finalize } from 'rxjs';
+import { ActivatedRoute, Router } from '@angular/router';
+import moment from 'moment';
+import { Location } from '@angular/common';
+
+@Component({
+  selector: 'app-page-news-detail',
+  templateUrl: './page-news-detail.component.html',
+  styleUrls: ['./page-news-detail.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class PageNewsDetailComponent implements OnInit {
+  public baseApi = environment.apiUrl.replace('/web', '');
+  public listMostView: any = [];
+  public listInterest: any = [];
+  public listNewsInDay: any = [];
+  private idNews: number = 0;
+  public baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 3);
+  public dataDetailNews: any;
+  public pageModel = { pageSize: 4, pageNumber: 1 }
+  checkMobile: boolean = false;
+
+  constructor(
+    private _apiService: PageNewsPrfeditorialPrfauthorService,
+    private _activeRouter: ActivatedRoute,
+    private _router: Router,
+    private _location: Location
+  ) {
+    this._activeRouter.params.subscribe(params => {
+      this.idNews = params['id'];
+    });
+    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+      this.checkMobile = true;
+    } else {
+      this.checkMobile = false;
+    };
+  }
+
+  onPrint() {
+    const printContent = <HTMLElement>document.getElementById("componentID");
+    const WindowPrt = window.open('', '', 'left=0,top=0,width=900,height=900,toolbar=0,scrollbars=0,status=0');
+    WindowPrt?.document.write(printContent.innerHTML);
+    WindowPrt?.document.close();
+    WindowPrt?.focus();
+    WindowPrt?.print();
+    WindowPrt?.close();
+  }
+  ngOnInit(): void {
+    this.onGetDetailNews();
+    this.onGetListMostView();
+    this.onGetListInterest();
+    this.onGetListNewInDay();
+  }
+
+  onGetDetailNews() {
+    this._apiService.getDetailNews(this.idNews).subscribe(success => {
+      this.dataDetailNews = success.data;
+    })
+  }
+  onGetListMostView() {
+    this._apiService.getListMostView().subscribe(success => {
+      this.listMostView = success.data;
+    })
+  }
+
+  onGetListInterest() {
+    this._apiService.getListInterst(this.idNews).subscribe(success => {
+      this.listInterest = success.data;
+    })
+  }
+
+  onGetListNewInDay() {
+    this._apiService.getListNewsInDay().subscribe(success => {
+      this.listNewsInDay = success.data;
+    })
+  }
+
+  errorHandler(event: any) {
+    event.target.src = "/assets/images/news/newspaper-default.png";
+  }
+
+  onBackClicked() {
+    this._location.back();
+  }
+
+  onRedirectLink(id: number) {
+    this._router.navigate(['/news/detail/', id]).then(() => {
+      window.location.reload();
+    })
+  }
+
+  onFormatDate(strdate?: string) {
+    if (strdate) {
+      const date = new Date(strdate);
+      const lang = localStorage.getItem('lang');
+      const day = date.getDay();
+      let strDay = '';
+      if (lang == 'vi') {
+        switch (day) {
+          case 0:
+            strDay = 'Chủ nhật';
+            break;
+          case 1:
+            strDay = 'Thứ hai';
+            break;
+          case 2:
+            strDay = 'Thứ ba';
+            break;
+          case 3:
+            strDay = 'Thứ tư';
+            break;
+          case 4:
+            strDay = 'Thứ năm';
+            break;
+          case 5:
+            strDay = 'Thứ sáu';
+            break;
+          case 6:
+            strDay = 'Thứ bảy';
+            break;
+        }
+      } else {
+        switch (day) {
+          case 0:
+            strDay = 'Sunday';
+            break;
+          case 1:
+            strDay = 'Monday';
+            break;
+          case 2:
+            strDay = 'Tuesday';
+            break;
+          case 3:
+            strDay = 'Wednesday';
+            break;
+          case 4:
+            strDay = 'Thursday';
+            break;
+          case 5:
+            strDay = 'Friday';
+            break;
+          case 6:
+            strDay = 'Saturday';
+            break;
+        }
+      }
+      return `${strDay}, `;
+    }
+
+    return '';
+  }
+
+}
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news/page-news.component.html b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news/page-news.component.html
new file mode 100644
index 0000000..38e4ef9
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news/page-news.component.html
@@ -0,0 +1,115 @@
+<block-ui>
+    <div class="news-hot bg-white">
+        <div class="box-head position-relative">
+            <div class="box-header">
+                <a>{{'page-news.news-hot' | translate}}</a>
+            </div>
+        </div>
+        <div class="lst-news-hot">
+            <div class="row">
+                <div class="col-lg-5 col-md-12 col-12">
+                    <div class="new-item-left p-3" *ngIf="listNewsHot[0]">
+                        <div class="new-left-image">
+                            <a routerLink="/news/detail/{{listNewsHot[0].id}}">
+                                <img src="{{baseUrl + listNewsHot[0]?.image}}" class="img-hot-news-left"
+                                    (error)="errorHandler($event)">
+                            </a>
+                        </div>
+                        <div class="new-left-content p-2">
+                            <h3 class="new-left-title">
+                                <a routerLink="/news/detail/{{listNewsHot[0]?.id}}">
+                                    {{listNewsHot[0]?.title}}
+                                </a>
+                            </h3>
+                            <label class="new-left-time">
+                                {{listNewsHot[0]?.dateCreate | date: 'dd/MM/YYYY hh:ss'}} | {{listNewsHot[0]?.view}}
+                                {{'page-news.view' | translate}}
+                            </label>
+                            <label class="new-left-description">{{listNewsHot[0]?.description}}</label>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-7 col-md-12 col-12">
+                    <ng-container *ngFor="let itemNews of listNewsHot; let i = index">
+                        <div class="new-right-item p-3" *ngIf="i > 0">
+                            <div class="row">
+                                <div class="col-md-3 col-3">
+                                    <div class="new-right-image">
+                                        <a routerLink="/news/detail/{{itemNews.id}}">
+                                            <img src="{{baseUrl + itemNews.image}}" class="img-hot-news-right w-100"
+                                                (error)="errorHandler($event)">
+                                        </a>
+                                    </div>
+                                </div>
+                                <div class="col-md-9 col-9">
+                                    <div class="new-right-content">
+                                        <h3 class="new-right-title">
+                                            <a routerLink="/news/detail/{{itemNews.id}}">{{itemNews.title}}</a>
+                                        </h3>
+                                        <label class="new-right-time">
+                                            {{itemNews.dateCreate | date: 'dd/MM/YYYY hh:ss'}} | {{itemNews.view}}
+                                            {{'page-news.view' | translate}}
+                                        </label>
+                                        <div class="new-right-description">{{itemNews.description}}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </ng-container>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="news-categories bg-white mt-4">
+        <div class="box-head position-relative">
+            <div class="box-header">
+                <a> {{'page-news.news-by-category' | translate}}</a>
+            </div>
+        </div>
+        <div class="list-category-button d-flex">
+            <ng-container *ngFor="let categories of lstCategory">
+                <div class="margin-right">
+                    <button (click)="onGetListNewsByCategory(categories)"
+                        [ngClass]=" {'bg-button-active' : this.idNews === categories.id}"
+                        class="btn-primary btn bg-button">{{categories.name}}</button>
+                </div>
+            </ng-container>
+        </div>
+        <div class="lst-news-categories">
+            <div class="row">
+                <ng-container *ngFor="let newC of lstNewsCategories.result">
+                    <div class="col-md-6 col-xs-12 pb-3">
+                        <div class="new-item new-item-cate">
+                            <div class="row">
+                                <div class="col-3">
+                                    <div class="new-image">
+                                        <a routerLink="/news/detail/{{newC.id}}">
+                                            <img (error)="errorHandler($event)" src=" {{baseUrl + newC.image}}" />
+                                        </a>
+                                    </div>
+                                </div>
+                                <div class="col-9">
+                                    <div class="new-item-content">
+                                        <h3 class="new-title">
+                                            <a routerLink="/news/detail/{{newC.id}}">{{newC.title}}</a>
+                                        </h3>
+                                        <label class="new-time mb-1">
+                                            {{newC.dateCreate | date: 'dd/MM/yyyy hh:ss'}} | {{newC.view}}
+                                            {{'page-news.view' | translate}}
+                                        </label>
+                                        <div class="new-description">{{newC.description}}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </ng-container>
+            </div>
+            <div class="news-categories-view-more">
+                <button *ngIf="totalPage < lstNewsCategories.pageCount" (click)="onViewMore()"
+                    class="btn-primary btn bg-button-view-more"> {{'page-news.view-more' | translate}}</button>
+            </div>
+        </div>
+    </div>
+</block-ui>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news/page-news.component.scss b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news/page-news.component.scss
new file mode 100644
index 0000000..3a6a5cb
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news/page-news.component.scss
@@ -0,0 +1,134 @@
+@import "~quill/dist/quill.core.css";
+@import "~quill/dist/quill.bubble.css";
+@import "~quill/dist/quill.snow.css";
+app-page-news {
+    .bg-white {
+        background-color: #ffff;
+        padding: 10px;
+    }
+
+    .box-head {
+        margin-bottom: 5px;
+        padding: 5px 0;
+        border-bottom: 1px solid #eeeeee;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin: 0 -10px;
+    }
+
+    .img-hot-news-left {
+        max-width: 100%;
+        margin: auto;
+    }
+
+    .box-header {
+        a {
+            font-weight: 400;
+            font-size: 24px;
+            color: #000000;
+            text-decoration: none;
+            margin-left: 10px;
+        }
+    }
+
+    .box-header::after {
+        content: "";
+        width: 100px;
+        border-top: 2px solid #f26b1b;
+        position: absolute;
+        color: transparent;
+        top: 45px;
+        left: 10px;
+    }
+
+
+
+    .list-category-button {
+        padding-top: 15px;
+        padding-bottom: 15px;
+        flex-flow: wrap;
+
+        .margin-right {
+            margin-right: 10px;
+        }
+
+        .bg-button {
+            background-color: #fff;
+            color: #000000;
+            border: #e09500 1px solid;
+            border-radius: 10px;
+            margin-top: 10px;
+        }
+
+        .bg-button:hover {
+            color: #000000 !important;
+            background-color: #e09500 !important;
+            border-color: #e09500 !important;
+        }
+
+        .bg-button:focus {
+            box-shadow: none !important;
+        }
+
+        .bg-button-active {
+            background-color: #e09500;
+            color: #ffff;
+        }
+    }
+
+    .lst-news-categories {
+        .content-news-cate {
+            padding: 10px !important;
+            border: 1px #dee2e6 solid;
+            border-radius: 5px;
+            margin-bottom: 15px;
+            height: 100%;
+
+            .image-news {
+                overflow: hidden !important;
+                width: 100%;
+
+                img {
+                    width: 100%;
+                    object-fit: cover;
+                    transition: transform 0.6s;
+                }
+
+                img:hover {
+                    transform: scale(1.1);
+                }
+            }
+        }
+    }
+
+    .view-more {
+        margin-top: 10px;
+        text-align: right;
+
+        a {
+            color: #f26b1b;
+        }
+    }
+
+    .new-item-cate {
+        height: 100%;
+    }
+
+    .news-categories-view-more {
+        text-align: end;
+
+        .bg-button-view-more {
+            border-radius: 10px;
+            background-color: #fff;
+            border: 1px solid #e09500;
+            color: #000000;
+        }
+
+        .bg-button-view-more:hover {
+            border-radius: 10px;
+            background-color: #e09500;
+            color: #fff;
+        }
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news/page-news.component.ts b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news/page-news.component.ts
new file mode 100644
index 0000000..9e4d94a
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/page-news/page-news.component.ts
@@ -0,0 +1,73 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Router } from '@angular/router';
+import { finalize } from 'rxjs';
+import { PageModel } from 'src/app/Models/model';
+import { environment } from 'src/environments/environment';
+import { PageNewsPrfeditorialPrfauthorService } from '../page-news-prfeditorial-prfauthor.service';
+
+@Component({
+  selector: 'app-page-news',
+  templateUrl: './page-news.component.html',
+  styleUrls: ['./page-news.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class PageNewsComponent implements OnInit {
+  public listNewsHot: any = [];
+  public baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  public lstCategory: any = [];
+  public lstNewsCategories: PageModel = new PageModel();
+  public totalPage: number = 0;
+  public pageModel = {
+    pageSize: 4,
+    pageNumber: 1
+  }
+  public idNews: number = 0;
+
+  constructor(
+    private _apiService: PageNewsPrfeditorialPrfauthorService,
+    private _router: Router
+  ) {
+    this.lstNewsCategories.pageSize = 4;
+  }
+
+  ngOnInit(): void {
+    this.onGetListNewsHot();
+    this.onGetListNews();
+    this.onGetListCategoryOfNews();
+  }
+
+  errorHandler(e: any) {
+    return e.target.src = "/assets/images/news/newspaper-default.png";
+  }
+
+  onGetListNewsHot() {
+    this._apiService.getListHotNews(this.pageModel).pipe(finalize(() => {
+    })).subscribe(success => {
+      this.listNewsHot = success.data.result;
+    });
+  }
+
+  onGetListNewsByCategory(item: any) {
+    this.idNews = item.id;
+    this._router.navigate(['/news-by-category', this.idNews]).then();
+  }
+
+  onGetListCategoryOfNews() {
+    this._apiService.getListCategoryOfNews().subscribe(success => {
+      this.lstCategory = success.data;
+    })
+  }
+  onViewMore() {
+    this.lstNewsCategories.pageNumber++;
+    this.onGetListNews();
+  }
+
+  onGetListNews() {
+    this._apiService.getListNew(this.lstNewsCategories).subscribe(success => {
+      this.lstNewsCategories.result = this.lstNewsCategories.result.concat(success.data.result);
+      this.totalPage++;
+      this.lstNewsCategories.pageCount = success.data.pageCount;
+    });
+  };
+
+}
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-author/page-prf-author/page-detail-prf-author/page-detail-prf-author.component.html b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-author/page-prf-author/page-detail-prf-author/page-detail-prf-author.component.html
new file mode 100644
index 0000000..080069e
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-author/page-prf-author/page-detail-prf-author/page-detail-prf-author.component.html
@@ -0,0 +1,150 @@
+<div class="page-prf-detail pt-4">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-8 col-xs-12 col-sm-8">
+                <div class="bg-card">
+                    <div class="box-head position-relative">
+                        <div class="box-header">
+                            <a href="javascript: void(0);">Tác giả</a>
+                        </div>
+                    </div>
+                    <div class="info-author mt-4">
+                        <div class="row">
+                            <div class="col-md-3 col-xs-12 col-sm-3">
+                                <div class="image-author">
+                                    <img (error)="onHandleError($event)" src="{{apiUrl + datailDetailAuthor?.image}}" />
+                                </div>
+                            </div>
+                            <div class="col-md-9 col-xs-12 col-sm-9">
+                                <div class="content-author">
+                                    <div class="text-style">
+                                        <h4>{{datailDetailAuthor?.fullName}}</h4>
+                                        <div class="mb-1 color-product">{{datailDetailAuthor?.countBook}} tác phẩm</div>
+                                        <div>{{datailDetailAuthor?.birthDay | date: 'dd/MM/yyyy'}}</div>
+                                    </div>
+                                    <div class="text-style mt-2" style="max-height: 300px; overflow: auto;" [innerHTML]="datailDetailAuthor?.description">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-card mt-4">
+                    <div class="box-head position-relative">
+                        <div class="box-header">
+                            <a href="javascript: void(0);">Tác phẩm</a>
+                        </div>
+                    </div>
+                    <div class="lst-product mt-4">
+                        <div class="row">
+                            <ng-container *ngFor="let item of lstWorkAuthor">
+                                <div class="col-md-3 col-xs-12 col-sm-3">
+                                    <div class="item-authors">
+                                        <img (error)="errorHandlerNews($event)" src="{{apiUrl + item.image}}" />
+                                        <div class="text-description">
+                                            {{item.name}}
+                                        </div>
+                                        <div class="author-product">
+                                            {{item.fullName}}
+                                        </div>
+                                    </div>
+                                </div>
+                            </ng-container>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-card mt-4">
+                    <div class="box-head position-relative">
+                        <div class="box-header">
+                            <a href="javascript: void(0);">Có thể bạn quan tâm</a>
+                        </div>
+                    </div>
+                    <div class="lst-product mt-4">
+                        <div class="row">
+                            <ng-container *ngFor="let interes of listInterest">
+                                <div class="col-md-3 col-xs-12 col-sm-3">
+                                    <div class="item-authors">
+                                        <img (error)="errorHandlerNews($event)" src="{{apiUrl + interes.image}}" />
+                                        <div class="text-description">
+                                            {{interes.name}}
+                                        </div>
+                                        <div class="author-product">
+                                            {{interes.fullName}}
+                                        </div>
+                                    </div>
+                                </div>
+                            </ng-container>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-card mt-4">
+                    <div class="box-head position-relative">
+                        <div class="box-header">
+                            <a href="javascript: void(0);">Tác giả khác</a>
+                        </div>
+                    </div>
+                    <div class="lst-author mt-4">
+                        <div class="swiper-product swiper-css">
+                            <swiper [slidesPerView]="1" [spaceBetween]="30" [slidesPerGroup]="1" [loop]="false"
+                                [loopFillGroupWithBlank]="true" [pagination]="false" [navigation]="true"
+                                class="mySwiper" [breakpoints]="{
+                              '640': {
+                                slidesPerView: 1
+                              },
+                              '768': {
+                                slidesPerView: 1
+                              },
+                              '1024': {
+                                slidesPerView: 5
+                              }
+                            }">
+                                <ng-template swiperSlide *ngFor="let item of listAuthor">
+                                    <div class="product-item">
+                                        <div class="product-img">
+                                            <a href="profile-author/detail/{{item.id}}">
+                                                <img (error)="onHandleError($event)" class="img-response"
+                                                    [src]="apiUrl + item.image" />
+                                            </a>
+                                        </div>
+                                        <div class="product-title mb-1">
+                                            <a href="#">{{item.fullName}}</a>
+                                            <p class="color-product">Có {{item.countBook}} tác phẩm</p>
+                                        </div>
+                                    </div>
+
+                                </ng-template>
+                            </swiper>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-4 col-xs-12 col-sm-8">
+                <div class="bg-card box-new-detail-right">
+                    <div class="box-head position-relative">
+                        <div class="box-header">
+                            <a>Xem nhiều</a>
+                        </div>
+                    </div>
+                    <div style="border-top: none" class="news-detail-items p-2 cate cursor-pointer"
+                        (click)="onRedirectLink(listMostView[0]?.id)">
+                        <div class="news-most-view-image">
+                            <img (error)="errorHandlerNews($event)" [src]="apiUrl + listMostView[0]?.image" />
+                        </div>
+                        <div class="news-detail-items-title mt-1">
+                            <h5>{{listMostView[0]?.title}}
+                            </h5>
+                        </div>
+                    </div>
+                    <ng-container *ngFor="let newsMostView of listMostView; let i = index">
+                        <div *ngIf="i > 1" class="news-detail-items p-2 cate cursor-pointer"
+                            (click)="onRedirectLink(newsMostView.id)">
+                            <div class="news-detail-items-content mt-1">
+                                {{newsMostView.title}}
+                            </div>
+                        </div>
+                    </ng-container>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-author/page-prf-author/page-detail-prf-author/page-detail-prf-author.component.scss b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-author/page-prf-author/page-detail-prf-author/page-detail-prf-author.component.scss
new file mode 100644
index 0000000..3663e1f
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-author/page-prf-author/page-detail-prf-author/page-detail-prf-author.component.scss
@@ -0,0 +1,220 @@
+@import "~swiper/css";
+@import "~swiper/css/pagination";
+@import "~swiper/css/navigation";
+
+app-page-detail-prf-author {
+    .bg-card {
+        background-color: #ffff;
+        padding: 10px;
+    }
+
+    .box-head {
+        margin-bottom: 5px;
+        padding: 5px 0;
+        border-bottom: 1px solid #eeeeee;
+        align-items: center;
+        margin: 0 -10px;
+    }
+
+    .box-header {
+        a {
+            font-weight: 400;
+            font-size: 24px;
+            color: #000000;
+            text-decoration: none;
+            margin-left: 10px;
+        }
+    }
+
+    .box-header::after {
+        content: "";
+        width: 100px;
+        border-top: 2px solid #f26b1b;
+        position: absolute;
+        color: transparent;
+        top: 45px;
+        left: 10px;
+    }
+
+    .news-most-view-image {
+        img {
+            width: 100%;
+        }
+    }
+
+
+    .news-detail-items {
+        border-top: 1px solid #dee2e6;
+    }
+
+    .news-detail-items:hover {
+        background-color: #efefef;
+        cursor: pointer;
+    }
+
+    .image-author {
+        img {
+            width: 100%;
+            border-radius: 5px;
+            box-shadow: 0px 0px 0px 3px #eeeeee;
+        }
+    }
+
+    .lst-product {
+        .item-authors {
+            border: 1px solid #fff;
+            padding: 10px;
+
+            img {
+                width: 100%;
+            }
+        }
+
+        .item-authors:hover {
+            cursor: pointer;
+            border-radius: 5px;
+            background-color: #eeeeee;
+        }
+
+        .author-product {
+            color: #888;
+        }
+    }
+
+    .text-description {
+        margin-top: 10px;
+        font-weight: 400;
+        color: #3a4752;
+        display: block;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        /* số dòng hiển thị */
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        cursor: pointer;
+    }
+
+    .swiper-slide img {
+        display: block;
+        height: 100%;
+    }
+
+    .product-item {
+        background: #fff;
+        border-radius: 5px;
+        box-shadow: 0px 0px 10px #ccc;
+        height: 100%;
+        margin: 2px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .product-img {
+            overflow: hidden;
+            border-radius: 5px;
+            text-align: center;
+
+            img {
+                transition: transform 0.6s;
+                width: 100%;
+                margin: auto;
+
+                &:hover {
+                    transform: scale(1.1);
+                }
+            }
+        }
+
+        .product-title {
+            text-align: center;
+
+            a {
+                font-weight: 700;
+                color: #000000;
+                text-decoration: none;
+                display: block;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                /* số dòng hiển thị */
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                height: 100%;
+            }
+        }
+    }
+
+    .swiper-product {
+        padding: 10px 0;
+        margin: 0 -10px;
+    }
+
+    .swiper-css {
+        swiper {
+            padding: 0 15px;
+        }
+
+        .swiper-button-prev {
+            left: 0px;
+            background-position: center;
+            background-color: #abb5be;
+        }
+
+        .swiper-button-next:after,
+        .swiper-button-prev:after {
+            font-family: swiper-icons;
+            font-size: 24px;
+            text-transform: none !important;
+            letter-spacing: 0;
+            font-variant: initial;
+            line-height: 1;
+            color: #ffffff;
+        }
+
+        .swiper-button-next {
+            right: 0px;
+            background-position: center;
+            background-color: #abb5be;
+        }
+
+        .swiper-button-next.swiper-button-disabled,
+        .swiper-button-prev.swiper-button-disabled {
+            opacity: 0.35;
+            cursor: auto;
+            pointer-events: none;
+        }
+
+        .swiper-button-next:hover,
+        .swiper-button-prev:hover {
+            background: #fcaf17;
+        }
+    }
+
+    .item-news {
+        padding: 10px;
+        border-radius: 5px;
+        color: #5e5873;
+
+        h5 {
+            font-weight: 700;
+        }
+    }
+
+    .item-news:nth-child(odd) {
+        background-color: #eee;
+    }
+
+    .item-news:nth-child(even) {
+        background-color: #ffff;
+    }
+
+    .item-news:hover {
+        color: orange;
+        background-color: #eee;
+    }
+
+    .color-product {
+        color: #888;
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-author/page-prf-author/page-detail-prf-author/page-detail-prf-author.component.ts b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-author/page-prf-author/page-detail-prf-author/page-detail-prf-author.component.ts
new file mode 100644
index 0000000..819e53b
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-author/page-prf-author/page-detail-prf-author/page-detail-prf-author.component.ts
@@ -0,0 +1,83 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { PageNewsPrfeditorialPrfauthorService } from 'src/app/page-news-prfeditorial-prfauthor/page-news-prfeditorial-prfauthor.service';
+import { environment } from 'src/environments/environment';
+
+@Component({
+  selector: 'app-page-detail-prf-author',
+  templateUrl: './page-detail-prf-author.component.html',
+  styleUrls: ['./page-detail-prf-author.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class PageDetailPrfAuthorComponent implements OnInit {
+  private idAuthor: number = 0;
+
+  listAuthor: any = [];
+  apiUrl = environment.apiUrl.replace('/web', '');
+  listMostView: any = [];
+  listInterest: any = [];
+  datailDetailAuthor: any;
+  lstWorkAuthor: any[] = [];
+
+  constructor(
+    private readonly _apiService: PageNewsPrfeditorialPrfauthorService,
+    private readonly _activatedRoute: ActivatedRoute,
+    private readonly _router: Router
+  ) {
+    this._activatedRoute.params.subscribe(params => {
+      this.idAuthor = params['id'];
+    });
+  }
+
+  ngOnInit(): void {
+    this.onGetListAuthor();
+    this.onGetDetailAuthor();
+    this.onGetLstWorkAuthor();
+    this.onGetListMostView();
+    this.onGetListInterest();
+  }
+
+  onHandleError(e: any) {
+    return e.target.src = "/assets/fake-data/author.png";
+  }
+  errorHandlerNews(event: any) {
+    event.target.src = "/assets/images/news/newspaper-default.png";
+  }
+
+  onGetDetailAuthor() {
+    this._apiService.getDetailAuthor(this.idAuthor).subscribe(success => {
+      this.datailDetailAuthor = success.data;
+    })
+  }
+
+  onGetLstWorkAuthor() {
+    this._apiService.getLstWorkAuthor(this.idAuthor).subscribe(success => {
+      this.lstWorkAuthor = success.data.result;
+    })
+  }
+
+  onGetListAuthor() {
+    this._apiService.getLstAuthorOther(this.idAuthor).subscribe(success => {
+      this.listAuthor = success.data;
+    })
+  }
+
+  onRedirectLink(id: number) {
+    this._router.navigate(['/news/detail/', id]).then(() => {
+      window.location.reload();
+    })
+  }
+
+  onGetListMostView() {
+    this._apiService.getListMostView().subscribe(success => {
+      this.listMostView = success.data;
+    })
+  }
+
+  onGetListInterest() {
+    this._apiService.getListInterest().subscribe(success => {
+      this.listInterest = success.data.result;
+    })
+  }
+
+}
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-author/page-prf-author/page-prf-author.component.html b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-author/page-prf-author/page-prf-author.component.html
new file mode 100644
index 0000000..d03103b
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-author/page-prf-author/page-prf-author.component.html
@@ -0,0 +1,45 @@
+<div class="page-profile-author pt-4">
+    <div class="container">
+        <nav aria-label="breadcrumb">
+            <ol class="breadcrumb page-prfAuthor">
+                <li class="breadcrumb-item"><a href="/home">Trang chủ</a></li>
+                <li class="breadcrumb-item active" aria-current="page"><a href="/news-profile">Tin tức</a></li>
+                <li class="breadcrumb-item active" aria-current="page">Giới thiệu tác giả</li>
+            </ol>
+        </nav>
+        <div class="bg-card">
+            <div class="box-head position-relative">
+                <div class="box-header">
+                    <a href="javascript: void(0);">{{i18n?.title}}</a>
+                </div>
+            </div>
+            <div class="search-key">
+                <ul class="custom-ul d-flex">
+                    <!-- <li class="all-li">Tất cả</li> -->
+                    <li [class]="{'activeWord': this.idWord === 1}" (click)="onGetListAuthor(i18n.allSearch)"
+                        class="li-custom">{{i18n?.allSearch.name}}</li>
+                    <ng-container *ngFor="let words of listWord; let i = index">
+                        <li *ngIf="i > 1" [class]="{'activeWord': this.idWord === words.id}"
+                            (click)="onGetListAuthor(words)" class="li-custom">{{words.name}}</li>
+                    </ng-container>
+                </ul>
+            </div>
+            <div class="result-search">
+                <div class="row">
+                    <ng-container *ngFor="let items of listAuthor.result">
+                        <div class="col-md-3 col-sm-3 col-xs-12">
+                            <div class="items-result">
+                                <a routerLink="/profile-author/detail/{{items.id}}">{{items.fullName}}</a>
+                            </div>
+                        </div>
+                    </ng-container>
+                </div>
+            </div>
+            <div class="mt-4">
+                <ngb-pagination [collectionSize]="listAuthor.totalItemCount" [(page)]="listAuthor.pageNumber"
+                    [maxSize]="3" [rotate]="true" [pageSize]="listAuthor.pageSize">
+                </ngb-pagination>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-author/page-prf-author/page-prf-author.component.scss b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-author/page-prf-author/page-prf-author.component.scss
new file mode 100644
index 0000000..78a543d
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-author/page-prf-author/page-prf-author.component.scss
@@ -0,0 +1,159 @@
+app-page-prf-author {
+
+    .bg-card {
+        background-color: #ffff;
+        padding: 10px;
+    }
+
+    .box-head {
+        margin-bottom: 5px;
+        padding: 5px 0;
+        border-bottom: 1px solid #eeeeee;
+        align-items: center;
+        margin: 0 -10px;
+    }
+
+    .box-header {
+        a {
+            font-weight: 400;
+            font-size: 24px;
+            color: #000000;
+            text-decoration: none;
+            margin-left: 10px;
+        }
+    }
+
+    .box-header::after {
+        content: '';
+        width: 100px;
+        border-top: 2px solid #f26b1b;
+        position: absolute;
+        color: transparent;
+        top: 45px;
+        left: 10px;
+    }
+
+    .search-key {
+        margin-top: 10px;
+        border: 2px #fcaf17 solid;
+        border-radius: 5px;
+
+        .custom-ul {
+            margin-bottom: 0;
+            flex-flow: wrap;
+            padding-left: 5px !important;
+
+            .all-li {
+                color: #fcaf17;
+                font-weight: 700;
+            }
+
+            li {
+                cursor: pointer !important;
+                padding: 8px;
+                list-style: none !important;
+            }
+
+            li:hover {
+                color: #ffff;
+                background-color: #fcaf17;
+            }
+        }
+    }
+
+    .result-search {
+        margin-top: 10px;
+
+        .items-result {
+            background-color: #eeeeee;
+            padding: 5px;
+            height: 100%;
+            text-align: left;
+
+            a {
+                font-size: 14px;
+                color: #666;
+                font-weight: 500;
+                text-decoration: none;
+                padding: 10px;
+            }
+
+            a:hover {
+                color: #fcaf17 !important;
+            }
+        }
+    }
+
+    .pagination {
+        justify-content: end;
+    }
+
+    .page-item.active .page-link {
+        background-color: #fcaf17;
+        border: #fcaf17;
+        color: #fff !important;
+        width: 35px;
+        text-align: center;
+        padding-top: 7px !important;
+    }
+
+    .page-item {
+        margin: 0 3px !important;
+        border-radius: 50% !important;
+
+        a {
+            border: none !important;
+            color: #222 !important;
+        }
+    }
+
+    .page-item a.page-link {
+        border-radius: 50%;
+    }
+
+    .page-item:last-child .page-link {
+        border-top-right-radius: 50% !important;
+        border-bottom-right-radius: 50% !important;
+    }
+
+    .page-link:focus {
+        box-shadow: none !important;
+    }
+
+    .page-item:first-child .page-link {
+        border-top-left-radius: 50% !important;
+        border-bottom-left-radius: 50% !important;
+    }
+
+    .page-link:hover {
+        width: 35px;
+        height: 35px;
+        text-align: center;
+    }
+
+    .page-link {
+        width: 35px !important;
+        line-height: 25px !important;
+        text-align: center;
+        padding-top: 7px !important;
+    }
+
+    .page-prfAuthor {
+        li {
+            a {
+                color: #000000;
+                text-decoration: none !important;
+            }
+
+            a:hover {
+                color: #f26b1b;
+            }
+        }
+    }
+
+    .activeWord {
+        background-color: #fcaf17;
+        color: #fff;
+    }
+
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-author/page-prf-author/page-prf-author.component.ts b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-author/page-prf-author/page-prf-author.component.ts
new file mode 100644
index 0000000..c4a7df3
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-author/page-prf-author/page-prf-author.component.ts
@@ -0,0 +1,166 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { PageModel } from 'src/app/Models/model';
+import { PageNewsPrfeditorialPrfauthorService } from '../../page-news-prfeditorial-prfauthor.service';
+
+@Component({
+  selector: 'app-page-prf-author',
+  templateUrl: './page-prf-author.component.html',
+  styleUrls: ['./page-prf-author.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class PagePrfAuthorComponent implements OnInit {
+
+  public listAuthor: PageModel = new PageModel();
+  public i18n: any;
+  public listWord = [
+    {
+      id: 1,
+      name: 'Tất cả'
+    },
+    {
+      id: 2,
+      name: 'A',
+    },
+    {
+      id: 3,
+      name: 'B',
+    },
+    {
+      id: 4,
+      name: 'C',
+    },
+    {
+      id: 5,
+      name: 'D',
+    },
+    {
+      id: 6,
+      name: 'E',
+    },
+    {
+      id: 7,
+      name: 'F',
+    },
+    {
+      id: 8,
+      name: 'G',
+    },
+    {
+      id: 9,
+      name: 'H',
+    },
+    {
+      id: 10,
+      name: 'I',
+    },
+    {
+      id: 11,
+      name: 'J',
+    }, {
+      id: 12,
+      name: 'K',
+    },
+    {
+      id: 13,
+      name: 'L',
+    },
+    {
+      id: 14,
+      name: 'M',
+    },
+    {
+      id: 15,
+      name: 'N',
+    },
+    {
+      id: 16,
+      name: 'O',
+    },
+    {
+      id: 17,
+      name: 'P',
+    },
+    {
+      id: 18,
+      name: 'Q',
+    },
+    {
+      id: 19,
+      name: 'R',
+    },
+    {
+      id: 20,
+      name: 'S',
+    },
+    {
+      id: 21,
+      name: 'T',
+    },
+
+    {
+      id: 22,
+      name: 'U',
+    }, {
+      id: 23,
+      name: 'V',
+    },
+
+    {
+      id: 24,
+      name: 'W',
+    },
+    {
+      id: 25,
+      name: 'X',
+    }, {
+      id: 26,
+      name: 'Y',
+    },
+    {
+      id: 27,
+      name: 'Z',
+    },
+  ];
+  public idWord: number = 1;
+  constructor(
+    private _apiService: PageNewsPrfeditorialPrfauthorService,
+    private translate: TranslateService
+  ) {
+    this.listAuthor.pageSize = 20;
+  }
+
+  ngOnInit(): void {
+    this.onGetI18n();
+    this.onGetListAuthor(-1);
+  }
+
+  onGetListAuthor(e: any) {
+    if (e?.id > 1) {
+      this.listAuthor.keyWord = e.name;
+      this.idWord = e.id;
+    }
+    if (e?.id <= 1) {
+      this.listAuthor.keyWord = '';
+      this.idWord = 1;
+    }
+    this._apiService.getListAuthor(this.listAuthor).subscribe(success => {
+      this.listAuthor.result = success.data.result;
+      this.listAuthor.totalItemCount = success.data.totalItemCount;
+    })
+  }
+
+  onPageChange(numberPage: number) {
+    this.listAuthor.pageNumber = numberPage;
+    this.onGetListAuthor(null);
+  }
+
+  onGetI18n() {
+    this.translate.get('introduceAuthor').subscribe(success => {
+      this.i18n = success;
+    })
+  }
+
+
+
+}
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-author/prf-author.component.html b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-author/prf-author.component.html
new file mode 100644
index 0000000..de6c045
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-author/prf-author.component.html
@@ -0,0 +1,37 @@
+<div class="box-profile author-list">
+    <div class="box-head position-relative">
+        <div class="box-header">
+            <a href="javascript: void(0);">{{i18n?.title}}</a>
+        </div>
+    </div>
+    <div class="lst mt-4">
+        <div class="search-key">
+            <div class="row">
+                <div class="col-md-12 col-xs-12">
+                    <div class="card">
+                        <ul class="custom-ul d-flex">
+                            <li (click)="onGetListAuthor(i18n?.allSearch)" [class]="{'activeWord': this.idWord === 1}"
+                                class="li-custom">
+                                {{i18n?.allSearch.name}}</li>
+                            <ng-container *ngFor="let words of listWord; let i = index">
+                                <li *ngIf="i > 0" (click)="onGetListAuthor(words)"
+                                    [class]="{'activeWord': this.idWord === words.id}" class="li-custom">{{words.name}}
+                                </li>
+                            </ng-container>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="custom-profile">
+            <ng-container *ngFor="let items of listAuthor.result">
+                <a href="javascript: void(0);" class="hastag">{{items.fullName}}</a>
+            </ng-container>
+        </div>
+        <div class="mt-4">
+            <ngb-pagination [collectionSize]="listAuthor.totalItemCount" [(page)]="listAuthor.pageNumber" [maxSize]="3"
+                [rotate]="true" [pageSize]="listAuthor.pageSize" (pageChange)="onPageChange($event)">
+            </ngb-pagination>
+        </div>
+    </div>
+</div>
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-author/prf-author.component.scss b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-author/prf-author.component.scss
new file mode 100644
index 0000000..7efa4ef
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-author/prf-author.component.scss
@@ -0,0 +1,73 @@
+app-prf-author {
+    .author-list {
+        background-color: #ffff;
+        padding: 10px;
+    }
+
+    .box-head {
+        margin-bottom: 5px;
+        padding: 5px 0;
+        border-bottom: 1px solid #eeeeee;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin: 0 -10px;
+    }
+
+    .custom-ul {
+        margin-bottom: 0;
+        flex-flow: wrap;
+        padding-left: 5px !important;
+
+        .all-li {
+            color: #f26b1b;
+            font-weight: 700;
+        }
+
+        li {
+            cursor: pointer !important;
+            padding: 5px;
+            list-style: none !important;
+        }
+
+        li:hover {
+            background-color: #e09500;
+            color: #fff !important;
+            cursor: pointer;
+        }
+    }
+
+    .box-header {
+        a {
+            font-weight: 400;
+            font-size: 24px;
+            color: #000000;
+            text-decoration: none;
+            margin-left: 10px;
+        }
+    }
+
+    .box-header::after {
+        content: '';
+        width: 100px;
+        border-top: 2px solid #f26b1b;
+        position: absolute;
+        color: transparent;
+        top: 45px;
+        left: 10px;
+    }
+
+    .view-more {
+        text-align: right;
+
+        a {
+            color: #f26b1b;
+        }
+    }
+
+    .activeWord {
+        background-color: #e09500;
+        color: #fff;
+    }
+
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-author/prf-author.component.ts b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-author/prf-author.component.ts
new file mode 100644
index 0000000..5b89ed3
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-author/prf-author.component.ts
@@ -0,0 +1,163 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { PageModel } from 'src/app/Models/model';
+import { PageNewsPrfeditorialPrfauthorService } from '../page-news-prfeditorial-prfauthor.service';
+
+@Component({
+  selector: 'app-prf-author',
+  templateUrl: './prf-author.component.html',
+  styleUrls: ['./prf-author.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class PrfAuthorComponent implements OnInit {
+  public listWord = [
+    {
+      id: 1,
+      name: 'Tất cả',
+    },
+    {
+      id: 2,
+      name: 'A',
+    },
+    {
+      id: 3,
+      name: 'B',
+    },
+    {
+      id: 4,
+      name: 'C',
+    },
+    {
+      id: 5,
+      name: 'D',
+    },
+    {
+      id: 6,
+      name: 'E',
+    },
+    {
+      id: 7,
+      name: 'F',
+    },
+    {
+      id: 8,
+      name: 'G',
+    },
+    {
+      id: 9,
+      name: 'H',
+    },
+    {
+      id: 10,
+      name: 'I',
+    },
+    {
+      id: 11,
+      name: 'J',
+    }, {
+      id: 12,
+      name: 'K',
+    },
+    {
+      id: 13,
+      name: 'L',
+    },
+    {
+      id: 14,
+      name: 'M',
+    },
+    {
+      id: 15,
+      name: 'N',
+    },
+    {
+      id: 16,
+      name: 'O',
+    },
+    {
+      id: 17,
+      name: 'P',
+    },
+    {
+      id: 18,
+      name: 'Q',
+    },
+    {
+      id: 19,
+      name: 'R',
+    },
+    {
+      id: 20,
+      name: 'S',
+    },
+    {
+      id: 21,
+      name: 'T',
+    },
+
+    {
+      id: 22,
+      name: 'U',
+    }, {
+      id: 23,
+      name: 'V',
+    },
+
+    {
+      id: 24,
+      name: 'W',
+    },
+    {
+      id: 25,
+      name: 'X',
+    }, {
+      id: 26,
+      name: 'Y',
+    },
+    {
+      id: 27,
+      name: 'Z',
+    },
+  ];
+  public idWord: number = 1;
+  public listAuthor: PageModel = new PageModel();
+  public i18n: any;
+  constructor(
+    private _apiService: PageNewsPrfeditorialPrfauthorService,
+    private translate: TranslateService
+  ) {
+    this.listAuthor.pageSize = 20;
+  }
+
+  ngOnInit(): void {
+    this.onGetListAuthor(null);
+    this.onGetI18n();
+  }
+
+  onGetListAuthor(e: any) {
+    if (e?.id > 1) {
+      this.listAuthor.keyWord = e.name;
+      this.idWord = e.id;
+    }
+    if (e?.id <= 1) {
+      this.listAuthor.keyWord = '';
+      this.idWord = 1;
+    }
+    this._apiService.getListAuthor(this.listAuthor).subscribe(success => {
+      this.listAuthor.result = success.data.result;
+      this.listAuthor.totalItemCount = success.data.totalItemCount;
+    })
+  }
+
+  onPageChange(numberPage: number) {
+    this.listAuthor.pageNumber = numberPage;
+    this.onGetListAuthor(null);
+  }
+
+  onGetI18n() {
+    this.translate.get('introduceAuthor').subscribe(success => {
+      this.i18n = success;
+    })
+  }
+
+}
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-editorial-office/page-prf-editorial-office/page-detail-prf-editorial-office/page-detail-prf-editorial-office.component.html b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-editorial-office/page-prf-editorial-office/page-detail-prf-editorial-office/page-detail-prf-editorial-office.component.html
new file mode 100644
index 0000000..7977efb
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-editorial-office/page-prf-editorial-office/page-detail-prf-editorial-office/page-detail-prf-editorial-office.component.html
@@ -0,0 +1,44 @@
+<div class="page-detail-prf-editorial-office pt-4">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-9 col-sm-9 col-xs-12">
+                <div class="introduce-page bg-card">
+                    <div class="box-head position-relative">
+                        <div class="box-header">
+                            <a>Giới thiệu</a>
+                        </div>
+                    </div>
+                    <div class="content-introduce mt-4">
+                        <h4>{{detailData?.name}}</h4>
+                        <div class="text-content" [innerHTML]="detailData?.introduce">
+
+                        </div>
+                    </div>
+                </div>
+                <div class="history bg-card mt-4" *ngIf="detailData?.otherIntroduce">
+                    <div class="box-head position-relative">
+                        <div class="box-header">
+                            <a>Lịch sử hình thành và phát triển</a>
+                        </div>
+                    </div>
+                    <div class="content-history" [innerHTML]="detailData?.otherIntroduce">
+
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-3 col-sm-3 col-xs-12">
+                <div class="bg-card">
+                    <div class="title-editorial text-center">
+                        <h4>{{detailData?.name}}</h4>
+                    </div>
+                    <div class="img-editorial">
+                        <img (error)="onHandleErrors($event)" src="{{apiUrl + detailData?.image}}" />
+                    </div>
+                    <div class="content-page-right" [innerHTML]="detailData?.generalIntroduce">
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-editorial-office/page-prf-editorial-office/page-detail-prf-editorial-office/page-detail-prf-editorial-office.component.scss b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-editorial-office/page-prf-editorial-office/page-detail-prf-editorial-office/page-detail-prf-editorial-office.component.scss
new file mode 100644
index 0000000..5b0fe13
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-editorial-office/page-prf-editorial-office/page-detail-prf-editorial-office/page-detail-prf-editorial-office.component.scss
@@ -0,0 +1,74 @@
+app-page-detail-prf-editorial-office {
+    .bg-card {
+        background-color: #fff;
+        padding: 10px;
+    }
+
+    .box-head {
+        margin-bottom: 5px;
+        padding: 5px 0;
+        border-bottom: 1px solid #eeeeee;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin: 0 -10px;
+
+        .box-header {
+            a {
+                font-weight: 400;
+                font-size: 24px;
+                color: #000000;
+                text-decoration: none;
+                margin-left: 10px;
+            }
+        }
+
+        .box-header::after {
+            content: '';
+            width: 100px;
+            border-top: 2px solid #f26b1b;
+            position: absolute;
+            color: transparent;
+            top: 45px;
+            left: 10px;
+        }
+    }
+
+    .content-introduce {
+        h4 {
+            font-weight: 700;
+        }
+
+        .text-content {
+            line-height: 25px;
+            color: #202122;
+        }
+    }
+
+    .img-editorial {
+        margin: auto;
+        max-width: 250px;
+
+        img {
+            width: 100%;
+        }
+    }
+
+    .title-editorial {
+        h4 {
+            padding: 10px;
+            font-weight: 700;
+            text-transform: uppercase;
+        }
+    }
+
+    .content-page-right {
+        .text-content-right {
+            line-height: 25px;
+
+            label {
+                font-weight: 700;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-editorial-office/page-prf-editorial-office/page-detail-prf-editorial-office/page-detail-prf-editorial-office.component.ts b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-editorial-office/page-prf-editorial-office/page-detail-prf-editorial-office/page-detail-prf-editorial-office.component.ts
new file mode 100644
index 0000000..0369d80
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-editorial-office/page-prf-editorial-office/page-detail-prf-editorial-office/page-detail-prf-editorial-office.component.ts
@@ -0,0 +1,38 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { PageNewsPrfeditorialPrfauthorService } from 'src/app/page-news-prfeditorial-prfauthor/page-news-prfeditorial-prfauthor.service';
+import { environment } from 'src/environments/environment';
+
+@Component({
+  selector: 'app-page-detail-prf-editorial-office',
+  templateUrl: './page-detail-prf-editorial-office.component.html',
+  styleUrls: ['./page-detail-prf-editorial-office.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class PageDetailPrfEditorialOfficeComponent implements OnInit {
+  public idNewsroom: number = 0;
+  public detailData: any;
+  public apiUrl = environment.apiUrl.replace('/web', '')
+  constructor(
+    private _apiService: PageNewsPrfeditorialPrfauthorService,
+    private activatedRoute: ActivatedRoute
+  ) {
+    this.activatedRoute.params.subscribe(params => {
+      this.idNewsroom = params['id'];
+    });
+  }
+
+  ngOnInit(): void {
+    this.OnGetDetail();
+  }
+
+  OnGetDetail() {
+    this._apiService.getDetailNewsroomProfile(this.idNewsroom).subscribe(success => {
+      this.detailData = success.data;
+    })
+  }
+
+  onHandleErrors(e: any) {
+    e.target.src = "/assets/image/default_logo.png";
+  }
+}
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-editorial-office/page-prf-editorial-office/page-prf-editorial-office.component.html b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-editorial-office/page-prf-editorial-office/page-prf-editorial-office.component.html
new file mode 100644
index 0000000..9047c92
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-editorial-office/page-prf-editorial-office/page-prf-editorial-office.component.html
@@ -0,0 +1,88 @@
+<div class="page-profile-editorial-office pt-4">
+    <div class="container">
+        <nav aria-label="breadcrumb">
+            <ol class="breadcrumb page-prfeditorial">
+                <li class="breadcrumb-item"><a href="/home">Trang chủ</a></li>
+                <li class="breadcrumb-item active" aria-current="page">
+                    <a href="/news-profile">Tin tức</a>
+                </li>
+                <li class="breadcrumb-item active" aria-current="page">Giới thiệu tòa soạn</li>
+            </ol>
+        </nav>
+        <div class="introduce-page bg-card">
+            <div class="box-head position-relative">
+                <div class="box-header">
+                    <a>Danh sách báo chí Việt Nam</a>
+                </div>
+            </div>
+            <div class="content-introduce">
+                <div class="row">
+                    <div class="col-md-12 col-xs-12">
+                        <div class="text-introduce">
+                            <label>Dưới đây là <span>danh sách báo chí Việt Nam</span> hiện nay, gồm các tờ báo, tạp chí
+                                và
+                                ấn phụ
+                                phẩm đã được
+                                cấp phép phát hành. Theo thông tin từ Bộ Thông tin và Truyền thông Việt Nam, tính đến
+                                năm
+                                2015, cả
+                                nước Việt Nam có 858 cơ quan báo chí in. Trong đó có: 199 cơ quan báo in chiếm 24% (86
+                                báo
+                                trung
+                                ương và các bộ, ngành, đoàn thể; 113 báo địa phương) và 659 tạp chí chiếm 76% (522 tạp
+                                chí
+                                trung
+                                ương, các bộ, ngành, trường đại học và viện nghiên cứu; 137 tạp chí địa phương); 105 cơ
+                                quan
+                                báo
+                                điện tử (Trong đó có: 83 báo, tạp chí điện tử của cơ quan báo chí in và 22 báo, tạp chí
+                                điện
+                                tử độc
+                                lập), 207 trang thông tin điện tử tổng hợp của các cơ quan báo chí; với gần 18.000 nhà
+                                báo
+                                được cấp
+                                thẻ đang hoạt động trên khắp mọi vùng miền của Tổ quốc và ở nước ngoài.</label>
+                            <label class="mt-4">Danh sách dưới đây được phân chia một cách tương đối theo thể loại, nội
+                                dung tờ báo,
+                                tôn chỉ, mục đích, phương châm hoạt động và cơ quan chủ quản.</label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <ng-container *ngFor="let editorial of listData">
+            <div class="news-synthetic bg-card mt-4">
+                <div class="box-head position-relative">
+                    <div class="box-header">
+                        <a>{{editorial.name}}</a>
+                    </div>
+                </div>
+                <div class="content-news-synthetic mt-4">
+                    <h5 class="text-center">Danh sách các tờ báo {{editorial.name}}</h5>
+                    <table class="table table-bordered table-custom">
+                        <thead>
+                            <tr>
+                                <th>Tên tờ báo</th>
+                                <th>Cơ quan phát hành</th>
+                                <th>Phiên bản web</th>
+                                <th>Ghi chú</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <ng-container *ngFor="let editorialDetail of editorial.listEditorials">
+                                <tr>
+                                    <td><a
+                                            routerLink="/profile-editorial-office/detail/{{editorialDetail.id}}">{{editorialDetail.name}}</a>
+                                    </td>
+                                    <td>{{editorialDetail.issuingAgency}}</td>
+                                    <td><a href="{{editorialDetail.domain}}">{{editorialDetail.domain}}</a></td>
+                                    <td>{{editorialDetail.note}}</td>
+                                </tr>
+                            </ng-container>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </ng-container>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-editorial-office/page-prf-editorial-office/page-prf-editorial-office.component.scss b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-editorial-office/page-prf-editorial-office/page-prf-editorial-office.component.scss
new file mode 100644
index 0000000..a2d5998
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-editorial-office/page-prf-editorial-office/page-prf-editorial-office.component.scss
@@ -0,0 +1,137 @@
+app-page-prf-editorial-office {
+    .page-profile-editorial-office {
+        .bg-card {
+            background-color: #fff;
+            padding: 10px;
+        }
+
+        .box-head {
+            margin-bottom: 5px;
+            padding: 5px 0;
+            border-bottom: 1px solid #eeeeee;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin: 0 -10px;
+
+            .box-header {
+                a {
+                    font-weight: 400;
+                    font-size: 24px;
+                    color: #000000;
+                    text-decoration: none;
+                    margin-left: 10px;
+                }
+            }
+
+            .box-header::after {
+                content: '';
+                width: 100px;
+                border-top: 2px solid #f26b1b;
+                position: absolute;
+                color: transparent;
+                top: 45px;
+                left: 10px;
+            }
+        }
+
+        .introduce-page {
+
+            .content-introduce {
+                margin-top: 10px;
+
+                .text-introduce {
+                    label {
+                        span {
+                            font-weight: 700;
+                            cursor: pointer;
+                        }
+                    }
+                }
+
+                .image-introduce {
+                    max-width: 200px;
+                    margin: auto;
+                    background-color: #eeeeee;
+                    border: 1px #ccc solid;
+
+                    img {
+                        width: 100%;
+                    }
+
+                    p {
+                        padding: 5px !important;
+                        margin-bottom: 0px !important;
+                    }
+                }
+
+            }
+        }
+
+        h5 {
+            font-weight: 700;
+        }
+
+        .table-custom {
+            width: 100%;
+            line-height: 20px;
+            padding: 10px;
+
+            thead {
+                tr {
+                    th {
+                        vertical-align: bottom;
+                        border-bottom: 2px solid #dee2e6;
+                        background-color: #eaecf0;
+                    }
+                }
+            }
+
+            tbody {
+                tr {
+                    td {
+                        a {
+                            text-decoration: none;
+                            color: #000;
+                        }
+
+                        a:hover {
+                            color: #f26b1b;
+                            text-decoration: underline;
+                        }
+                    }
+                }
+            }
+        }
+
+        .bonus-info {
+            ul {
+                li {
+                    font-weight: 700;
+                    line-height: 20px;
+                }
+            }
+        }
+
+        .according-readers {
+            .content-according-readers {
+                .teenager {
+                    font-weight: 700;
+                }
+            }
+        }
+    }
+
+    .page-prfeditorial {
+        li {
+            a {
+                color: #000000;
+                text-decoration: none !important;
+            }
+
+            a:hover {
+                color: #f26b1b;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-editorial-office/page-prf-editorial-office/page-prf-editorial-office.component.ts b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-editorial-office/page-prf-editorial-office/page-prf-editorial-office.component.ts
new file mode 100644
index 0000000..615f720
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-editorial-office/page-prf-editorial-office/page-prf-editorial-office.component.ts
@@ -0,0 +1,27 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { PageNewsPrfeditorialPrfauthorService } from '../../page-news-prfeditorial-prfauthor.service';
+
+@Component({
+  selector: 'app-page-prf-editorial-office',
+  templateUrl: './page-prf-editorial-office.component.html',
+  styleUrls: ['./page-prf-editorial-office.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class PagePrfEditorialOfficeComponent implements OnInit {
+  public listData: any = [];
+
+  constructor(
+    private _apiService: PageNewsPrfeditorialPrfauthorService
+  ) { }
+
+  ngOnInit(): void {
+    this.onGetListDataEditorialOffice();
+  }
+
+  onGetListDataEditorialOffice() {
+    this._apiService.getListEditorialOfficeIntroduce().subscribe(success => {
+      this.listData = success.data;
+    })
+  }
+
+}
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-editorial-office/prf-editorial-office.component.html b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-editorial-office/prf-editorial-office.component.html
new file mode 100644
index 0000000..fe7d36c
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-editorial-office/prf-editorial-office.component.html
@@ -0,0 +1,39 @@
+<div class="box-profile prf-editorial-office">
+    <div class="box-head position-relative">
+        <div class="box-header">
+            <a href="javascript: void(0);">{{i18?.title}}</a>
+        </div>
+    </div>
+    <div class="lst mt-4">
+        <div class="search-key">
+            <div class="row">
+                <div class="col-md-12 col-xs-12">
+                    <div class="card">
+                        <ul class="custom-ul d-flex">
+                            <li [class]="{'activeWord': this.idWord === 1}"
+                                (click)="onGetListEditorialOffice(i18.allSearch)" class="li-custom">
+                                {{i18?.allSearch.name}}
+                            </li>
+                            <ng-container *ngFor="let words of listWord; let i = index">
+                                <li *ngIf="i > 0" [class]="{'activeWord': this.idWord === words.id}"
+                                    (click)="onGetListEditorialOffice(words)" class="li-custom">{{words.name}}</li>
+                            </ng-container>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="custom-profile">
+            <ng-container *ngFor="let items of listEditorialOffice.result">
+                <a href="javascript: void(0);" class="hastag">{{items.name}}</a>
+            </ng-container>
+        </div>
+        <div class="mt-4">
+            <ngb-pagination [collectionSize]="listEditorialOffice.totalItemCount"
+                [(page)]="listEditorialOffice.pageNumber" [maxSize]="3" [rotate]="true"
+                [pageSize]="listEditorialOffice.pageSize" (pageChange)="onPageChange($event)">
+            </ngb-pagination>
+        </div>
+    </div>
+</div>
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-editorial-office/prf-editorial-office.component.scss b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-editorial-office/prf-editorial-office.component.scss
new file mode 100644
index 0000000..80af407
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-editorial-office/prf-editorial-office.component.scss
@@ -0,0 +1,204 @@
+@import "~swiper/css";
+@import "~swiper/css/pagination";
+@import "~swiper/css/navigation";
+
+app-prf-editorial-office {
+    .prf-editorial-office {
+        padding: 10px;
+        background-color: #fff;
+
+        .box-head {
+            margin-bottom: 5px;
+            padding: 5px 0;
+            border-bottom: 1px solid #eeeeee;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin: 0 -10px;
+        }
+
+        .box-header {
+            a {
+                font-weight: 400;
+                font-size: 24px;
+                color: #000000;
+                text-decoration: none;
+            }
+        }
+
+        .box-header::after {
+            content: '';
+            width: 100px;
+            border-top: 2px solid #f26b1b;
+            position: absolute;
+            color: transparent;
+            top: 45px;
+            left: 0;
+        }
+    }
+
+    .box-body {
+        .swiper-button-prev {
+            left: 0px;
+            background-position: center;
+            background-color: #ABB5BE;
+            ;
+        }
+
+        .swiper-button-next:after,
+        .swiper-button-prev:after {
+            font-family: swiper-icons;
+            font-size: 24px;
+            text-transform: none !important;
+            letter-spacing: 0;
+            font-variant: initial;
+            line-height: 1;
+            color: #ffffff;
+        }
+
+        .swiper-button-next {
+            right: 0px;
+            background-position: center;
+            background-color: #ABB5BE;
+            ;
+        }
+
+        .swiper-button-next.swiper-button-disabled,
+        .swiper-button-prev.swiper-button-disabled {
+            opacity: .35;
+            cursor: auto;
+            pointer-events: none;
+        }
+
+        .swiper-button-next:hover,
+        .swiper-button-prev:hover {
+            background: #FCAF17;
+        }
+
+        .toa-soan {
+            border: 1px solid #eee;
+            padding: 2px 4px;
+            margin: 16px 0;
+            box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 12px;
+            border-radius: 6px;
+            height: 90px;
+            overflow: hidden;
+            display: flex;
+            align-content: center;
+            align-items: center;
+            justify-content: center;
+
+            &:hover {
+                border: 1px solid #e09500;
+                box-shadow: rgba(224, 149, 0, 0.4) 0px 5px 12px;
+            }
+
+            a {
+                text-decoration: none;
+                display: block;
+            }
+
+            img {
+                transition: transform 0.6s;
+                max-width: 100%;
+                max-height: 80px;
+                border-radius: 6px;
+
+                &:hover {
+                    transform: scale(1.1);
+                }
+            }
+        }
+    }
+
+    .view-more {
+        text-align: right;
+
+        a {
+            color: #f26b1b;
+        }
+    }
+
+    .custom-ul {
+        margin-bottom: 0;
+        flex-flow: wrap;
+        padding-left: 5px !important;
+
+        .all-li {
+            color: #f26b1b;
+            font-weight: 700;
+        }
+
+        li {
+            cursor: pointer !important;
+            padding: 5px;
+            list-style: none !important;
+        }
+
+        li:hover {
+            background-color: #e09500;
+            color: #fff !important;
+            cursor: pointer;
+        }
+    }
+
+    .pagination {
+        justify-content: end;
+    }
+
+    .page-item.active .page-link {
+        background-color: #fcaf17;
+        border: #fcaf17;
+        color: #fff !important;
+        width: 40px;
+        text-align: center;
+        padding-top: 7px !important;
+    }
+
+    .page-item {
+        margin: 0 3px !important;
+        border-radius: 50% !important;
+
+        a {
+            border: none !important;
+            color: #222 !important;
+        }
+    }
+
+    .page-item a.page-link {
+        border-radius: 50%;
+    }
+
+    .page-item:last-child .page-link {
+        border-top-right-radius: 50% !important;
+        border-bottom-right-radius: 50% !important;
+    }
+
+    .page-link:focus {
+        box-shadow: none !important;
+    }
+
+    .page-item:first-child .page-link {
+        border-top-left-radius: 50% !important;
+        border-bottom-left-radius: 50% !important;
+    }
+
+    .page-link:hover {
+        width: 40px;
+        //height: 40px;
+        text-align: center;
+    }
+
+    .page-link {
+        width: 40px !important;
+        line-height: 25px !important;
+        text-align: center;
+        padding-top: 7px !important;
+    }
+
+    .activeWord {
+        background-color: #e09500;
+        color: #fff;
+    }
+
+}
diff --git a/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-editorial-office/prf-editorial-office.component.ts b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-editorial-office/prf-editorial-office.component.ts
new file mode 100644
index 0000000..fac82c4
--- /dev/null
+++ b/Phaha_Package/src/app/page-news-prfeditorial-prfauthor/prf-editorial-office/prf-editorial-office.component.ts
@@ -0,0 +1,164 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { PageModel } from 'src/app/Models/model';
+import { PageNewsPrfeditorialPrfauthorService } from '../page-news-prfeditorial-prfauthor.service';
+
+@Component({
+  selector: 'app-prf-editorial-office',
+  templateUrl: './prf-editorial-office.component.html',
+  styleUrls: ['./prf-editorial-office.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class PrfEditorialOfficeComponent implements OnInit {
+  pageSize = 1;
+  pageNumber = 1;
+  public i18: any;
+  public listWord = [
+    {
+      id: 1,
+      name: 'Tất cả'
+    },
+    {
+      id: 2,
+      name: 'A',
+    },
+    {
+      id: 3,
+      name: 'B',
+    },
+    {
+      id: 4,
+      name: 'C',
+    },
+    {
+      id: 5,
+      name: 'D',
+    },
+    {
+      id: 6,
+      name: 'E',
+    },
+    {
+      id: 7,
+      name: 'F',
+    },
+    {
+      id: 8,
+      name: 'G',
+    },
+    {
+      id: 9,
+      name: 'H',
+    },
+    {
+      id: 10,
+      name: 'I',
+    },
+    {
+      id: 11,
+      name: 'J',
+    }, {
+      id: 12,
+      name: 'K',
+    },
+    {
+      id: 13,
+      name: 'L',
+    },
+    {
+      id: 14,
+      name: 'M',
+    },
+    {
+      id: 15,
+      name: 'N',
+    },
+    {
+      id: 16,
+      name: 'O',
+    },
+    {
+      id: 17,
+      name: 'P',
+    },
+    {
+      id: 18,
+      name: 'Q',
+    },
+    {
+      id: 19,
+      name: 'R',
+    },
+    {
+      id: 20,
+      name: 'S',
+    },
+    {
+      id: 21,
+      name: 'T',
+    },
+
+    {
+      id: 22,
+      name: 'U',
+    }, {
+      id: 23,
+      name: 'V',
+    },
+
+    {
+      id: 24,
+      name: 'W',
+    },
+    {
+      id: 25,
+      name: 'X',
+    }, {
+      id: 26,
+      name: 'Y',
+    },
+    {
+      id: 27,
+      name: 'Z',
+    },
+  ];
+  public idWord: number = 1;
+  public listEditorialOffice: PageModel = new PageModel();
+  constructor(
+    private _apiService: PageNewsPrfeditorialPrfauthorService,
+    private translateService: TranslateService
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.onGetListTranslate();
+    this.onGetListEditorialOffice(null);
+  }
+  onGetListEditorialOffice(e: any) {
+    if (e?.id > 1) {
+      this.listEditorialOffice.keyWord = e.name;
+      this.idWord = e.id;
+    }
+    if (e?.id <= 1) {
+      this.listEditorialOffice.keyWord = '';
+      this.idWord = 1;
+    }
+    this.listEditorialOffice.pageSize = 20;
+    this._apiService.getListEditorialOffice(this.listEditorialOffice).subscribe(success => {
+      this.listEditorialOffice.result = success.data.result;
+      this.listEditorialOffice.totalItemCount = success.data.totalItemCount;
+    })
+  }
+
+  onPageChange(numberPage: number) {
+    this.listEditorialOffice.pageNumber = numberPage;
+    this.onGetListEditorialOffice(null);
+  }
+
+  onGetListTranslate() {
+    this.translateService.get('introduceEditorialOffice').subscribe(success => {
+      this.i18 = success;
+    })
+  }
+
+}
diff --git a/Phaha_Package/src/app/product-service/product-item/product-item.component.html b/Phaha_Package/src/app/product-service/product-item/product-item.component.html
new file mode 100644
index 0000000..80bf23c
--- /dev/null
+++ b/Phaha_Package/src/app/product-service/product-item/product-item.component.html
@@ -0,0 +1,33 @@
+<div class="product-item">
+  <div class="product-img">
+    <a href="#">
+      <img class="img-response" [src]="item.image">
+    </a>
+  </div>
+  <div class="product-title mt-2 mb-2">
+    <a href="#">{{item.title}}</a>
+  </div>
+  <div class="product-status">
+    <div class="donors">{{'product-service.product-item.donors' | translate}}</div>
+    <span>{{'product-service.product-item.status' | translate}}: </span>
+    <span>{{'product-service.product-item.status-content' | translate}}</span>
+  </div>
+  <div class="product-price">
+    <label class="price-sale">{{item.priceSale}}</label>
+    <label class="price">{{item.price}}</label>
+    <label class="promotion">{{item.promotion}}</label>
+  </div>
+  <div class="rating">
+    <ngb-rating [(rate)]="item.rate" [max]="5">
+      <ng-template let-fill="fill" let-index="index">
+        <span class="star" [class.filled]="fill === 100"><i class="fa-solid fa-star"></i></span>
+      </ng-template>
+    </ngb-rating>
+    <span class="mx-2">(<span>{{item.feedback}}</span> {{'product-service.product-item.comment' | translate}})</span>
+  </div>
+  <p class="product-sold mt-2"><span>{{'product-service.product-item.sold' | translate}}: <span>{{item.bought}}</span> {{'product-service.product-item.product' | translate}}</span></p>
+  <div class="group-button mt-2">
+    <button type="button" class="btn btn-sm btn-buy">{{'cta.buy' | translate}}</button>
+    <button type="button" class="btn btn-sm btn-add-to-cart">{{'cta.add' | translate}}</button>
+  </div>
+</div>
diff --git a/Phaha_Package/src/app/product-service/product-item/product-item.component.scss b/Phaha_Package/src/app/product-service/product-item/product-item.component.scss
new file mode 100644
index 0000000..baeba1b
--- /dev/null
+++ b/Phaha_Package/src/app/product-service/product-item/product-item.component.scss
@@ -0,0 +1,203 @@
+app-product-item {
+  width: 100%;
+  margin: 15px 0;
+
+  .product-item {
+    padding: 10px;
+    background: #fff;
+    border-radius: 5px;
+    box-shadow: 0px 0px 10px #ccc;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .product-img {
+      overflow: hidden;
+      height: 200px;
+      border-radius: 5px;
+      text-align: center;
+      position: relative;
+      a {
+        transform: translate(-50%, -50%);
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 100%;
+      }
+      img {
+        transition: transform 0.6s;
+        height: 100%;
+        margin: auto;
+        max-width: 100%;
+
+        &:hover {
+          transform: scale(1.1);
+        }
+      }
+    }
+
+    .product-title {
+      text-align: left;
+      margin-bottom: 10px;
+
+      a {
+        font-weight: 500;
+        font-size: 18px;
+        color: #000000;
+        text-decoration: none;
+        line-height: 24px;
+        display: block;
+        display: -webkit-box;
+        -webkit-line-clamp: 2; /* số dòng hiển thị */
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        height: 50px;
+      }
+    }
+
+    .product-price {
+      text-align: center;
+      color: #444;
+      margin-bottom: 0;
+
+      span {
+        font-size: 20px;
+        font-weight: 600;
+      }
+    }
+
+    .product-status {
+      text-align: left;
+      margin-bottom: 10px;
+
+      span {
+        font-weight: 400;
+        font-size: 12px;
+        color: #808285;
+        text-align: start;
+      }
+
+      .donors {
+        background-color: #0dcaf0;
+        text-align: center;
+        border-radius: 24px;
+        color: #fff;
+        font-size: 12px;
+        padding: 2px 0;
+        margin-bottom: 10px;
+      }
+    }
+
+    .product-sold {
+      background: #fcaf17;
+      text-align: center;
+      padding: 4px 0;
+      border-radius: 20px;
+      margin-top: 5px;
+
+      span {
+        color: #fff;
+      }
+    }
+
+    .group-button {
+      display: flex;
+      justify-content: space-around;
+    }
+  }
+
+  .star {
+    font-size: 1.5rem;
+    padding: 3px;
+
+    i {
+      color: #b0c4de;
+    }
+  }
+
+  .filled {
+    i {
+      color: #fd890c;
+    }
+  }
+
+  .product-price {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    label {
+      margin-right: 5px;
+    }
+  }
+
+  .promotion {
+    font-size: 12px;
+    width: 35px;
+    height: 20px;
+    padding: 2px 4px;
+    vertical-align: middle;
+    border-radius: 8px 0px 9px 0px;
+    background-color: #fcdfd7;
+    color: #f1592b;
+    vertical-align: 4px;
+  }
+
+  .price {
+    font-size: 13px;
+    color: #808285;
+    font-weight: 400;
+    text-decoration: line-through;
+  }
+
+  .price-sale {
+    font-size: 15px;
+    color: #231f20;
+    font-weight: 700;
+  }
+
+  .rating {
+    text-align: start;
+    margin-top: 5px;
+
+    span {
+      font-size: 12px;
+    }
+  }
+
+  .group-button {
+    display: flex;
+    justify-content: space-around;
+
+    .btn-add-to-cart {
+      border-radius: 20px;
+      background: #ffe7b8;
+      color: #6c757d;
+    }
+
+    .btn-add-to-cart:hover {
+      background: #e09500;
+      color: #ffffff;
+    }
+
+    .btn-buy {
+      background: #fcaf17;
+      border-radius: 20px;
+      color: #ffffff;
+    }
+
+    .btn-buy:hover {
+      background: #e09500;
+      color: #ffffff;
+    }
+  }
+
+  @media only screen and (max-width: 768px) {
+    .product-item .product-img img {
+      width: auto;
+      height: 240px;
+    }
+  }
+}
diff --git a/Phaha_Package/src/app/product-service/product-item/product-item.component.ts b/Phaha_Package/src/app/product-service/product-item/product-item.component.ts
new file mode 100644
index 0000000..c91c385
--- /dev/null
+++ b/Phaha_Package/src/app/product-service/product-item/product-item.component.ts
@@ -0,0 +1,19 @@
+import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
+
+@Component({
+  selector: 'app-product-item',
+  templateUrl: './product-item.component.html',
+  styleUrls: ['./product-item.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class ProductItemComponent implements OnInit {
+  currentRate = 0;
+  @Input() item: any;
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/product-service/product-service.component.html b/Phaha_Package/src/app/product-service/product-service.component.html
new file mode 100644
index 0000000..7e1198c
--- /dev/null
+++ b/Phaha_Package/src/app/product-service/product-service.component.html
@@ -0,0 +1,67 @@
+<div class="product-service box-body">
+  <div class="box-head position-relative">
+    <div class="box-header">
+      <a href="#">{{'product-service.title' | translate}}</a>
+    </div>
+    <div class="see-all">
+      <a routerLink="#">{{'cta.see-more' | translate}}<i class="uil uil-angle-right"></i></a>
+    </div>
+  </div>
+  <div class="swiper-service swiper-css">
+    <swiper [slidesPerView]="1" [spaceBetween]="0" [slidesPerGroup]="1" [loop]="false"
+            [loopFillGroupWithBlank]="true" [pagination]="false" [navigation]="false" class="mySwiper"
+            [breakpoints]="{
+      '640': {
+        slidesPerView: 1,
+        spaceBetween: 0
+      },
+      '768': {
+        slidesPerView: 1,
+        spaceBetween: 0
+      },
+      '1024': {
+        slidesPerView: 10,
+        spaceBetween: 0
+      }
+    }">
+      <ng-template swiperSlide *ngFor="let item of listService; let index = index">
+        <div class="service-item">
+          <div class="service-img">
+            <a href="#">
+              <img [src]="item.image">
+            </a>
+          </div>
+          <h3 class="service-title">
+            <a href="#">{{item.name}}</a>
+          </h3>
+        </div>
+      </ng-template>
+    </swiper>
+  </div>
+  <div class="swiper-product swiper-css">
+    <swiper [slidesPerView]="1" [spaceBetween]="30" [slidesPerGroup]="1" [loop]="false"
+            [loopFillGroupWithBlank]="true" [pagination]="false" [navigation]="true" class="mySwiper"
+            [breakpoints]="{
+      '@0.00': {
+        slidesPerView: 1,
+        spaceBetween: 10
+      },
+      '@0.75': {
+        slidesPerView: 2,
+        spaceBetween: 20
+      },
+      '@1.00': {
+        slidesPerView: 3,
+        spaceBetween: 30
+      },
+      '@1.50': {
+        slidesPerView: 5,
+        spaceBetween: 30
+      }
+    }">
+      <ng-template swiperSlide *ngFor="let item of array; let index = index">
+        <app-product-item [item]="item"></app-product-item>
+      </ng-template>
+    </swiper>
+  </div>
+</div>
diff --git a/Phaha_Package/src/app/product-service/product-service.component.scss b/Phaha_Package/src/app/product-service/product-service.component.scss
new file mode 100644
index 0000000..7f0ce7b
--- /dev/null
+++ b/Phaha_Package/src/app/product-service/product-service.component.scss
@@ -0,0 +1,212 @@
+@import "~swiper/css";
+@import "~swiper/css/pagination";
+@import "~swiper/css/navigation";
+
+app-product-service {
+  .product-service {
+    background: #ffffff;
+    padding: 10px;
+  }
+
+  .box-head {
+    padding: 5px 0;
+    border-bottom: 1px solid #eeeeee;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0 -10px;
+  }
+
+  .box-header {
+    a {
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 136.19%;
+      color: #000000;
+      text-decoration: none;
+      margin-left: 10px;
+    }
+  }
+
+  .box-header::after {
+    content: '';
+    width: 100px;
+    border-top: 2px solid #f26b1b;
+    position: absolute;
+    color: transparent;
+    top: 45px;
+    left: 10px;
+  }
+
+  .see-all {
+    a {
+      display: flex;
+      align-items: center;
+      text-decoration: none;
+      color: #ABB5BE;
+      margin-right: 10px;
+    }
+
+    i {
+      color: #152536;
+      font-size: 24px;
+    }
+  }
+
+  .swiper {
+    width: 100%;
+    height: 100%;
+  }
+
+  .swiper-slide {
+    text-align: center;
+    font-size: 18px;
+    background: #fff;
+
+    /* Center slide text vertically */
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+  }
+
+  .swiper-slide img {
+    display: block;
+    height: 100%;
+  }
+
+  .swiper-service {
+    swiper {
+      padding: 0 !important;
+      .swiper-slide {
+        border-right: 1px #eee solid;
+        height: 150px;
+      }
+    }
+
+    border-bottom: 1px #eee solid;
+    margin: 0 -10px;
+  }
+
+  .swiper-product {
+    padding: 10px 0;
+    margin: 0 -10px;
+  }
+
+  .swiper-css {
+    swiper {
+      padding: 0 30px;
+    }
+
+    .swiper-button-prev {
+      left: 0px;
+      background-position: center;
+      background-color: #ABB5BE;;
+    }
+
+    .swiper-button-next:after, .swiper-button-prev:after {
+      font-family: swiper-icons;
+      font-size: 24px;
+      text-transform: none !important;
+      letter-spacing: 0;
+      font-variant: initial;
+      line-height: 1;
+      color: #ffffff;
+    }
+
+    .swiper-button-next {
+      right: 0px;
+      background-position: center;
+      background-color: #ABB5BE;;
+    }
+
+    .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
+      opacity: .35;
+      cursor: auto;
+      pointer-events: none;
+    }
+
+    .swiper-button-next:hover, .swiper-button-prev:hover {
+      background: #FCAF17;
+    }
+
+    .product-image {
+      a {
+        position: relative;
+      }
+
+      position: relative;
+    }
+
+    .product-image:hover .buy-now {
+      top: 47%;
+      opacity: 1;
+      transition: all 300ms;
+      position: absolute;
+    }
+
+    .buy-now {
+      position: absolute;
+      top: 0px;
+      opacity: 0;
+      border: none;
+      -webkit-transform: translateX(-50%);
+      -moz-transform: translateX(-50%);
+      -ms-transform: translateX(-50%);
+      -o-transform: translateX(-50%);
+      transform: translateX(-50%);
+      white-space: nowrap;
+      background-color: #f1592b;
+      padding: 5px 20px;
+      color: #fff;
+      border-radius: 5px;
+    }
+  }
+
+  .service-item {
+    padding: 10px;
+
+    .service-img {
+      padding: 20px;
+      border-radius: 50%;
+      box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.1);
+      width: 70px;
+      height: 70px;
+      position: relative;
+      margin: auto;
+
+      a {
+        img {
+          width: 100%;
+          position: absolute;
+          padding: 0 12px;
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          height: auto;
+        }
+      }
+    }
+
+    .service-title {
+      height: 50px;
+      line-height: 25px;
+      a {
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 136.19%;
+        text-align: center;
+        color: #808285;
+        text-decoration: none;
+      }
+    }
+  }
+}
diff --git a/Phaha_Package/src/app/product-service/product-service.component.ts b/Phaha_Package/src/app/product-service/product-service.component.ts
new file mode 100644
index 0000000..dff1344
--- /dev/null
+++ b/Phaha_Package/src/app/product-service/product-service.component.ts
@@ -0,0 +1,170 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import SwiperCore, { Pagination, Navigation } from "swiper";
+
+SwiperCore.use([Pagination, Navigation]);
+
+@Component({
+  selector: 'app-product-service',
+  templateUrl: './product-service.component.html',
+  styleUrls: ['./product-service.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class ProductServiceComponent implements OnInit {
+  fakeArray = new Array(20);
+  array = [
+    {
+      image: '/assets/images/products/images.jfif',
+      title: 'IPHONE 13 PRO MAX – 128 GB – VÀNG MỚI ( VN/A )',
+      priceSale: '30,968,000đ',
+      price: '',
+      promotion: '-11%',
+      bought: '190',
+      rate: 3,
+      feedback: 12
+    },
+    {
+      image: '/assets/images/products/637702664477698071_macbook-pro-14-2021-xam-1.png',
+      title: 'MacBook Pro 2021 1TB (14 inch, M1 Pro)',
+      priceSale: '60,990,000đ',
+      price: '',
+      promotion: '-11%',
+      bought: '200',
+      rate: 4,
+      feedback: 20
+    },
+    {
+      image: '/assets/images/products/dong-ho-garmin-venu-black-slate.jpg',
+      title: 'Đồng hồ Garmin Venu',
+      priceSale: '5,390,000đ',
+      price: '6,390,000đ',
+      promotion: '-11%',
+      bought: '69',
+      rate: 3,
+      feedback: 12
+    },
+    {
+      image: '/assets/images/products/images-ve-may-bay.jfif',
+      title: 'Vé máy bay',
+      priceSale: '115,700đ',
+      price: '130,000đ',
+      promotion: '-11%',
+      bought: '190',
+      rate: 2,
+      feedback: 19
+    },
+    {
+      image: '/assets/images/products/toukyco.jpg',
+      title: 'Kỳ nghỉ du lịch',
+      priceSale: '105,900đ',
+      price: '119,000đ',
+      promotion: '-11%',
+      bought: '96',
+      rate: 4,
+      feedback: 120
+    },
+    {
+      image: '/assets/images/products/images-ky-nghi.jfif',
+      title: 'Bàn ghế ngồi tre đan mây Hồng Sơn',
+      priceSale: '151,300đ',
+      price: '170,000đ',
+      promotion: '-11%',
+      bought: '999',
+      rate: 1,
+      feedback: 22
+    },
+    {
+      image: '/assets/images/products/lactaytihuu.jpeg',
+      title: 'Lắc Tay Tỳ Hưu Opal Vàng 10mm',
+      priceSale: '160,200đ',
+      price: '180,000đ',
+      promotion: '-11%',
+      bought: '99',
+      rate: 5,
+      feedback: 100
+    },
+    {
+      image: '/assets/images/products/vongco.jpeg',
+      title: 'Vòng cổ ngọc trai trắng mặt sao biển',
+      priceSale: '69,520đ',
+      price: '88,000đ',
+      promotion: '-21%',
+      bought: '90',
+      rate: 3,
+      feedback: 12
+    },
+    {
+      image: '/assets/images/products/xedap.jpeg',
+      title: 'Xe Đạp Bánh Béo Cho Nam Và Nữ Cao Từ 1m6',
+      priceSale: '323,190đ',
+      price: '399,000đ',
+      promotion: '-19%',
+      bought: '190',
+      rate: 0,
+      feedback: 0
+    }
+  ]
+  listService = [
+    {
+      id: 1,
+      name: 'Thời trang nam',
+      image: '/assets/image/logo-fk1.png'
+    },
+    {
+      id: 2,
+      name: 'Điện thoại phụ kiện',
+      image: '/assets/image/logo-fk2.png'
+    },
+    {
+      id: 3,
+      name: 'Thiết bị điện tử',
+      image: '/assets/image/logo-fk3.png'
+    },
+    {
+      id: 4,
+      name: 'Máy tính và laptop',
+      image: '/assets/image/logo-fk4.png'
+    },
+    {
+      id: 5,
+      name: 'Đồng hồ',
+      image: '/assets/image/logo-fk5.png'
+    },
+    {
+      id: 6,
+      name: 'Giày dép nam',
+      image: '/assets/image/logo-fk6.png'
+    },
+    {
+      id: 7,
+      name: 'Thiết bị gia dụng',
+      image: '/assets/image/logo-fk7.png'
+    },
+    {
+      id: 8,
+      name: 'Dịch vụ tiêu dùng',
+      image: '/assets/image/logo-fk8.png'
+    },
+    {
+      id: 9,
+      name: 'Dịch vụ thương mại',
+      image: '/assets/image/logo-fk9.png'
+    },
+    {
+      id: 10,
+      name: 'Dịch vụ sản xuất',
+      image: '/assets/image/logo-fk10.png'
+    },
+    {
+      id: 11,
+      name: 'Nhà sách online',
+      image: '/assets/image/nhasach.png'
+    }
+  ]
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/product-service/product-service.module.ts b/Phaha_Package/src/app/product-service/product-service.module.ts
new file mode 100644
index 0000000..fca9979
--- /dev/null
+++ b/Phaha_Package/src/app/product-service/product-service.module.ts
@@ -0,0 +1,32 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ProductServiceComponent} from "./product-service.component";
+import {SwiperModule} from "swiper/angular";
+import { ProductItemComponent } from './product-item/product-item.component';
+import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
+import { RouterModule } from '@angular/router';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClient } from '@angular/common/http';
+
+@NgModule({
+  declarations: [ProductServiceComponent, ProductItemComponent],
+  exports: [
+    ProductServiceComponent
+  ],
+  imports: [
+    CommonModule,
+    SwiperModule,
+    NgbModule,
+    RouterModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    })
+  ]
+})
+export class ProductServiceModule {
+}
diff --git a/Phaha_Package/src/app/product-service/product-service.service.ts b/Phaha_Package/src/app/product-service/product-service.service.ts
new file mode 100644
index 0000000..735dc67
--- /dev/null
+++ b/Phaha_Package/src/app/product-service/product-service.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProductServiceService {
+
+  constructor() { }
+}
diff --git a/Phaha_Package/src/app/register-user/register-user-school/register-user-school.component.html b/Phaha_Package/src/app/register-user/register-user-school/register-user-school.component.html
new file mode 100644
index 0000000..32fa59d
--- /dev/null
+++ b/Phaha_Package/src/app/register-user/register-user-school/register-user-school.component.html
@@ -0,0 +1,178 @@
+<form [formGroup]="formDataSchool" class="row g-3" style="max-height: 65vh; overflow: auto">
+    <div class="col-md-6 col-12">
+        <label for="email" class="form-label">{{'sign-up.email' | translate}} <span
+                class="text-danger">(*)</span></label>
+        <input formControlName="enterpriseEmail" type="email" placeholder="{{'sign-up.email-placeholder' | translate}}"
+            class="form-control">
+        <div *ngIf="isValidate && frSchool['enterpriseEmail'].errors" class="invalid-feedback"
+            [ngClass]="{ 'd-block': isValidate && frSchool['enterpriseEmail'].errors }">
+            <div *ngIf="frSchool['enterpriseEmail'].errors['required']" class="error-notification">
+                {{'sign-up.error-messages.error-email.blank' | translate}}
+            </div>
+            <div *ngIf="frSchool['enterpriseEmail'].errors['pattern']" class="error-notification">
+                {{'sign-up.error-messages.error-email.valid' | translate}}
+            </div>
+            <div *ngIf="frSchool['enterpriseEmail'].errors['maxlength']" class="error-notification">
+                {{'sign-up.error-messages.error-email.maximum' | translate}}
+            </div>
+        </div>
+    </div>
+    <div class="col-md-6 col-12">
+        <label for="phone" class="form-label">{{'sign-up.phone' | translate}} <span
+                class="text-danger">(*)</span></label>
+        <input formControlName="enterprisePhone" type="text" placeholder="{{'sign-up.phone-placeholder' | translate}}"
+            class="form-control" maxlength="50">
+        <div *ngIf="isValidate && frSchool['enterprisePhone'].errors" class="invalid-feedback"
+            [ngClass]="{ 'd-block': isValidate && frSchool['enterprisePhone'].errors }">
+            <div *ngIf="frSchool['enterprisePhone'].errors['maxLength']" class="error-notification">
+                {{'sign-up.error-messages.error-phone.maxlength' | translate}}
+            </div>
+            <div *ngIf="frSchool['enterprisePhone'].errors['required']" class="error-notification">
+                {{'sign-up.error-messages.error-phone.blank' | translate}}
+            </div>
+        </div>
+    </div>
+    <div class="col-md-6 col-12">
+        <label class="form-label">{{'sign-up.taxcode' | translate}}</label>
+        <input formControlName="enterpriseTaxCode" type="text"
+            placeholder="{{'sign-up.taxcode-placeholder' | translate}}" class="form-control">
+    </div>
+    <div class="col-md-6 col-12">
+        <label class="form-label">{{'sign-up.headquarters' | translate}}</label>
+        <input formControlName="enterpriseHeadQuarters" type="text"
+            placeholder="{{'sign-up.headquarters-placeholder' | translate}}" class="form-control">
+    </div>
+    <div class="col-md-6 col-12">
+        <label class="form-label">{{'sign-up.legal-representative' | translate}}</label>
+        <input formControlName="enterpriseLegalRepresentative" type="text"
+            placeholder="{{'sign-up.legal-representative-placeholder' | translate}}" class="form-control">
+    </div>
+    <div class="col-md-6 col-12">
+        <label class="form-label">{{'sign-up.position' | translate}}</label>
+        <input formControlName="enterprisePosition" type="text"
+            placeholder="{{'sign-up.position-placeholder' | translate}}" class="form-control">
+    </div>
+    <div class="col-md-6 col-12">
+        <label class="form-label">{{'sign-up.authorization-letter' | translate}}</label>
+        <input formControlName="enterpriseAuthorizationLetter" type="text"
+            placeholder="{{'sign-up.authorization-letter-placeholder' | translate}}" class="form-control">
+    </div>
+    <div class="col-md-6 col-12">
+        <div>
+            <label class="form-label">{{'sign-up.sign-date' | translate}}</label>
+        </div>
+        <ng2-flatpickr formControlName="enterpriseSignDate" [config]="basicDateOptions">
+        </ng2-flatpickr>
+    </div>
+    <div class="col-md-6 col-12">
+        <label for="provinceId" class="form-label">{{'sign-up.province' | translate}} <span
+                class="text-danger">(*)</span></label>
+        <ng-select formControlName="provinceId" (change)="onGetDataDistrict($event)" bindValue="value" bindLabel="text"
+            placeholder="{{'sign-up.placeholder-province' | translate}}" [items]="lstProvince"></ng-select>
+        <div *ngIf="isValidate && frSchool['provinceId'].errors" class="invalid-feedback"
+            [ngClass]="{ 'd-block': isValidate && frSchool['provinceId'].errors }">
+            <div *ngIf="frSchool['provinceId'].errors['required']" class="error-notification">
+                {{'sign-up.error-messages.error-required.province' | translate}}
+            </div>
+        </div>
+    </div>
+    <div class="col-md-6 col-12">
+        <label for="districtId" class="form-label">{{'sign-up.district' | translate}} <span
+                class="text-danger">(*)</span></label>
+        <ng-select formControlName="districtId" (change)="onGetDataWards($event)" bindValue="value" bindLabel="text"
+            placeholder="{{'sign-up.placeholder-district' | translate}}" [items]="lstDistrict"></ng-select>
+        <div *ngIf="isValidate && frSchool['districtId'].errors" class="invalid-feedback"
+            [ngClass]="{ 'd-block': isValidate && frSchool['districtId'].errors }">
+            <div *ngIf="frSchool['districtId'].errors['required']" class="error-notification">
+                {{'sign-up.error-messages.error-required.district' | translate}}
+            </div>
+        </div>
+
+    </div>
+    <div class="col-md-6 col-12">
+        <label for="wardsId" class="form-label">{{'sign-up.wards' | translate}} <span
+                class="text-danger">(*)</span></label>
+        <ng-select (change)="onStringAddress($event)" formControlName="wardId" bindValue="value" bindLabel="text"
+            placeholder="{{'sign-up.placeholder-wards' | translate}}" [items]="lstWards"></ng-select>
+        <div *ngIf="isValidate && frSchool['wardId'].errors" class="invalid-feedback"
+            [ngClass]="{ 'd-block': isValidate && frSchool['wardId'].errors }">
+            <div *ngIf="frSchool['wardId'].errors['required']" class="error-notification">
+                {{'sign-up.error-messages.error-required.wards' | translate}}
+            </div>
+        </div>
+    </div>
+    <div class="col-md-6 col-12">
+        <label for="wardsId" class="form-label">{{'sign-up.school' | translate}} <span
+                class="text-danger">(*)</span></label>
+        <ng-select formControlName="schoolId" bindValue="value" bindLabel="text"
+            placeholder="{{'sign-up.placeholder-school' | translate}}" [items]="lstSchool"></ng-select>
+        <div *ngIf="isValidate && frSchool['schoolId'].errors" class="invalid-feedback"
+            [ngClass]="{ 'd-block': isValidate && frSchool['schoolId'].errors }">
+            <div *ngIf="frSchool['schoolId'].errors['required']" class="error-notification">
+                {{'sign-up.error-messages.error-required.school' | translate}}
+            </div>
+        </div>
+    </div>
+    <div class="row mt-2">
+        <div class="col-6">
+            <label for="password" class="form-label">
+                {{'sign-up.password' | translate}}
+                <span class="text-danger">(*)</span>
+            </label>
+            <div class="input-group">
+                <input formControlName="password" type="password" class="form-control bp-0"
+                    placeholder="{{'sign-up.password-placeholder' | translate}}"
+                    [type]="passwordInput? 'text' : 'password'">
+                <span (click)="passwordInput = !passwordInput"
+                    class="input-group-text background-icon-input custom-span">
+                    <i [class]="passwordInput? 'uil uil-eye-slash custom-icon' : 'uil uil-eye custom-icon'"></i>
+                </span>
+            </div>
+            <div *ngIf="isValidate && frSchool['password'].errors" class="invalid-feedback"
+                [ngClass]="{ 'd-block': isValidate && frSchool['password'].errors }">
+                <div *ngIf="frSchool['password'].errors['required']" class="error-notification">
+                    {{'sign-up.error-messages.error-password.blank' | translate}}
+                </div>
+                <div *ngIf="frSchool['password'].errors['pattern']" class="error-notification">
+                    {{'sign-up.error-messages.error-password.format' | translate}}
+                </div>
+                <div *ngIf="frSchool['password'].errors['maxlength']" class="error-notification">
+                    {{'sign-up.error-messages.error-password.maximum' | translate}}
+                </div>
+            </div>
+        </div>
+        <div class="col-6">
+            <label class="form-label">{{'sign-up.confirm-password' | translate}} <span
+                    class="text-danger">(*)</span></label>
+            <div class="input-group">
+                <input formControlName="confirmPassword" type="password" class="form-control bp-0"
+                    placeholder="{{'sign-up.confirm-password-placeholder' | translate}}"
+                    [type]="passwordConfim? 'text' : 'password'">
+                <span (click)="passwordConfim = ! passwordConfim"
+                    class="input-group-text background-icon-input custom-span">
+                    <i [class]="passwordConfim? 'uil uil-eye-slash custom-icon' : 'uil uil-eye custom-icon'"></i>
+                </span>
+            </div>
+
+            <div *ngIf="isValidate && frSchool['confirmPassword'].errors" class="invalid-feedback"
+                [ngClass]="{ 'd-block': isValidate && frSchool['confirmPassword'].errors }">
+                <div *ngIf="frSchool['confirmPassword'].errors['required']" class="error-notification">
+                    {{'sign-up.error-messages.error-confirm-password.blank' | translate}}
+                </div>
+                <div *ngIf="frSchool['confirmPassword'].errors['pattern']" class="error-notification">
+                    {{'sign-up.error-messages.error-confirm-password.format' | translate}}
+                </div>
+                <div *ngIf="frSchool['confirmPassword'].errors['maxlength']" class="error-notification">
+                    {{'sign-up.error-messages.error-confirm-password.maximum' | translate}}
+                </div>
+                <div *ngIf="frSchool['confirmPassword'].errors['confirmedValidator']">
+                    {{'sign-up.error-messages.error-confirm-password.valid' | translate}}
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="frm-action col-12">
+        <button type="button" class="btn btn-warning rounded-pill" (click)="onSubmitRegisterSchool()">{{'sign-up.title'
+            | translate}}</button>
+    </div>
+</form>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/register-user/register-user-school/register-user-school.component.ts b/Phaha_Package/src/app/register-user/register-user-school/register-user-school.component.ts
new file mode 100644
index 0000000..6976caa
--- /dev/null
+++ b/Phaha_Package/src/app/register-user/register-user-school/register-user-school.component.ts
@@ -0,0 +1,154 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { FlatpickrOptions } from 'ng2-flatpickr';
+import { ToastrService } from 'ngx-toastr';
+import { finalize } from 'rxjs';
+import { LoginService } from 'src/app/login/login.service';
+import { FormService } from 'src/app/service/form.service';
+
+@Component({
+  selector: 'app-register-user-school',
+  templateUrl: './register-user-school.component.html',
+  styleUrls: ['../register-user.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class RegisterUserSchoolComponent implements OnInit {
+  formDataSchool: FormGroup;
+  isValidate: boolean = false;
+  public passwordInput: boolean = false;
+  public passwordConfim: boolean = false;
+  basicDateOptions: FlatpickrOptions = {
+    altInput: true,
+    altFormat: 'd/m/Y',
+    static: true,
+    mode: 'single',
+    allowInvalidPreload: false,
+    allowInput: true,
+    wrap: true,
+    maxDate: new Date(),
+    dateFormat: 'Y-m-d H:i',
+  };
+  lstProvince: any = [];
+  lstDistrict: any = [];
+  lstWards: any = [];
+  lstSchool: any = [];
+  provinceName: string = '';
+  districtName: string = '';
+  wardsName: string = '';
+  modelGetSchool: any = {
+    provinceId: null,
+    districtId: null,
+    wardId: null
+  };
+
+  constructor(
+    private _formbuilder: FormBuilder,
+    private _loginService: LoginService,
+    private _toastr: ToastrService,
+    private _router: Router,
+    private _modalService: NgbModal,
+    private _formService: FormService
+  ) {
+    const office = localStorage.getItem("office");
+    this.formDataSchool = this._formbuilder.group({
+      // enterpriseName: ['', [Validators.required, Validators.maxLength(250)]],
+      password: ['', [Validators.required, Validators.pattern(/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d].{7,}$/), Validators.maxLength(250)]],
+      confirmPassword: ['', [Validators.required]],
+      enterpriseEmail: ['', [Validators.required, Validators.maxLength(250), Validators.pattern('^[A-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$')]],
+      enterprisePhone: ['', [Validators.maxLength(50), Validators.required]],
+      enterpriseAddress: ['', [Validators.maxLength(250)]],
+      enterpriseSignDate: [''],
+      enterpriseHeadQuarters: ['', []],
+      enterpriseTaxCode: ['', []],
+      enterpriseAccountName: ['', []],
+      enterpriseAccountNumber: ['', []],
+      enterpriseBank: ['', []],
+      enterpriseBankBranch: ['', []],
+      enterpriseLegalRepresentative: ['', []],
+      enterprisePosition: ['', []],
+      enterpriseAuthorizationLetter: ['', []],
+      provinceId: [null, [Validators.required]],
+      districtId: [null, [Validators.required]],
+      wardId: [null, [Validators.required]],
+      schoolId: [null, [Validators.required]],
+      accountType: [4],
+      officeId: [office]
+    })
+  }
+
+  ngOnInit(): void {
+    this.onGetDataProvice();
+    this.onGetDataSchool();
+  }
+
+  onSubmitRegisterSchool() {
+    this.isValidate = true;
+    this._formService.onTrimDataForm(this.formDataSchool);
+    if (this.formDataSchool.valid) {
+      this._loginService.registerUser(this.formDataSchool.value).pipe(
+        finalize(() => {
+        }),
+      ).subscribe(
+        data => {
+          localStorage.removeItem("office");
+          this._toastr.success('Đăng ký tài khoản thành công', 'Thành công');
+          this._router.navigate(['web/auth/verify-email']);
+          this._modalService.dismissAll('Thành Công !');
+        });
+    }
+  }
+
+
+  onGetDataProvice() {
+    this._loginService.getDataProvince().subscribe(result => {
+      this.lstProvince = result;
+      this.onGetDataSchool();
+    })
+  }
+
+  onGetDataDistrict(province: any) {
+    if (province) {
+      this.modelGetSchool.provinceId = province.value;
+      this._loginService.getDataDistrict(province.value).subscribe(result => {
+        this.lstDistrict = result;
+        this.onGetDataSchool();
+      });
+    } else {
+      this.formDataSchool.controls['districtId'].setValue(null);
+      this.formDataSchool.controls['wardId'].setValue(null);
+    }
+
+  }
+
+  onGetDataWards(district: any) {
+    if (district) {
+      this.modelGetSchool.districtId = district.value;
+      this._loginService.getDataWards(district.value)
+      .subscribe(res => {
+        this.lstWards = res;
+        this.onGetDataSchool();
+      });
+    }
+
+  }
+
+  onStringAddress(wards: any) {
+    if (wards) {
+      this.modelGetSchool.wardId = wards.value;
+      this.onGetDataSchool();
+    };
+  }
+
+  onGetDataSchool() {
+    this._loginService.getDataSchool(this.modelGetSchool).subscribe(result => {
+      this.lstSchool = result.data;
+    });
+  }
+
+  get frSchool() {
+    return this.formDataSchool.controls;
+  }
+
+}
diff --git a/Phaha_Package/src/app/register-user/register-user-student/register-user-student.component.html b/Phaha_Package/src/app/register-user/register-user-student/register-user-student.component.html
new file mode 100644
index 0000000..c53cdfe
--- /dev/null
+++ b/Phaha_Package/src/app/register-user/register-user-student/register-user-student.component.html
@@ -0,0 +1,185 @@
+<form [formGroup]="formDataStudent" class="row g-3" style="max-height: 65vh; overflow: auto">
+    <div class="col-md-6 col-12">
+        <label for="emailS" class="form-label">{{'sign-up.email' | translate}} <span
+                class="text-danger">(*)</span></label>
+        <input formControlName="email" type="email" id="emailS"
+            placeholder="{{'sign-up.email-placeholder' | translate}}" class="form-control">
+        <div *ngIf="isValidate && formControl['email'].errors" class="invalid-feedback"
+            [ngClass]="{ 'd-block': isValidate && formControl['email'].errors }">
+            <div *ngIf="formControl['email'].errors['required']" class="error-notification">
+                {{'sign-up.error-messages.error-email.blank' | translate}}
+            </div>
+            <div *ngIf="formControl['email'].errors['pattern']" class="error-notification">
+                {{'sign-up.error-messages.error-email.valid' | translate}}
+            </div>
+            <div *ngIf="formControl['email'].errors['maxlength']" class="error-notification">
+                {{'sign-up.error-messages.error-email.maximum' | translate}}
+            </div>
+        </div>
+    </div>
+    <div class="col-md-6 col-12">
+        <label for="phoneS" class="form-label">{{'sign-up.phone' | translate}} <span
+                class="text-danger">(*)</span></label>
+        <input formControlName="phone" type="text" id="phoneS" placeholder="{{'sign-up.phone-placeholder' | translate}}"
+            class="form-control" maxlength="50">
+        <div *ngIf="isValidate && formControl['phone'].errors" class="invalid-feedback"
+            [ngClass]="{ 'd-block': isValidate && formControl['phone'].errors }">
+            <div *ngIf="formControl['phone'].errors['maxLength']" class="error-notification">
+                {{'sign-up.error-messages.error-phone.maxlength' | translate}}
+            </div>
+            <div *ngIf="formControl['phone'].errors['required']" class="error-notification">
+                {{'sign-up.error-messages.error-phone.blank' | translate}}
+            </div>
+        </div>
+    </div>
+    <div class="col-md-6 col-12">
+        <label for="fullNameStudent" class="form-label">{{'sign-up.fullname' | translate}} <span
+                class="text-danger">(*)</span></label>
+        <input formControlName="fullName" type="text" id="fullNameStudent"
+            placeholder="{{'sign-up.fullname-placeholder' | translate}}" class="form-control">
+        <div *ngIf="isValidate && formControl['fullName'].errors" class="invalid-feedback"
+            [ngClass]="{ 'd-block': isValidate && formControl['fullName'].errors }">
+            <div *ngIf="formControl['fullName'].errors['required']" class="error-notification">
+                {{'sign-up.error-messages.error-fullname.blank' | translate}}
+            </div>
+            <div *ngIf="formControl['fullName'].errors['minlength']" class="error-notification">
+                {{'sign-up.error-messages.error-fullname.minimum' | translate}}
+            </div>
+            <div *ngIf="formControl['fullName'].errors['maxlength']" class="error-notification">
+                {{'sign-up.error-messages.error-fullname.maximum' | translate}}
+            </div>
+        </div>
+    </div>
+    <div class="col-md-6 col-12">
+        <div>
+            <label class="form-label">{{'sign-up.dob' | translate}}</label>
+        </div>
+        <ng2-flatpickr formControlName="birthDay" [config]="basicDateOptions">
+        </ng2-flatpickr>
+    </div>
+    <div class="col-md-6 col-12">
+        <label class="form-label">{{'sign-up.gender' | translate}}</label>
+        <div class="d-flex">
+            <div style="margin-right: 10px" class="check-radio">
+                <input formControlName="gender" [value]="'male'" class="custom-radio" type="radio" id="smale">
+                <label class="form-check-label" for="smale">
+                    {{'sign-up.male' | translate}}
+                </label>
+            </div>
+            <div class="check-radio">
+                <input formControlName="gender" [value]="'female'" class="custom-radio" type="radio" id="fsemale">
+                <label class="form-check-label" for="fsemale">
+                    {{'sign-up.female' | translate}}
+                </label>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-6 col-12"></div>
+    <div class="col-md-6 col-12">
+        <label for="provinceId" class="form-label">{{'sign-up.province' | translate}} <span
+                class="text-danger">(*)</span></label>
+        <ng-select formControlName="provinceId" (change)="onGetDataDistrict($event)" bindValue="value" bindLabel="text"
+            placeholder="{{'sign-up.placeholder-province' | translate}}" [items]="lstProvince"></ng-select>
+        <div *ngIf="isValidate && formControl['provinceId'].errors" class="invalid-feedback"
+            [ngClass]="{ 'd-block': isValidate && formControl['provinceId'].errors }">
+            <div *ngIf="formControl['provinceId'].errors['required']" class="error-notification">
+                {{'sign-up.error-messages.error-required.province' | translate}}
+            </div>
+        </div>
+    </div>
+    <div class="col-md-6 col-12">
+        <label for="districtId" class="form-label">{{'sign-up.district' | translate}} <span
+                class="text-danger">(*)</span></label>
+        <ng-select formControlName="districtId" (change)="onGetDataWards($event)" bindValue="value" bindLabel="text"
+            placeholder="{{'sign-up.placeholder-district' | translate}}" [items]="lstDistrict"></ng-select>
+        <div *ngIf="isValidate && formControl['districtId'].errors" class="invalid-feedback"
+            [ngClass]="{ 'd-block': isValidate && formControl['districtId'].errors }">
+            <div *ngIf="formControl['districtId'].errors['required']" class="error-notification">
+                {{'sign-up.error-messages.error-required.district' | translate}}
+            </div>
+        </div>
+    </div>
+    <div class="col-md-6 col-12">
+        <label for="wardId" class="form-label">{{'sign-up.wards' | translate}} <span
+                class="text-danger">(*)</span></label>
+        <ng-select (change)="onStringAddress($event)" formControlName="wardId" bindValue="value" bindLabel="text"
+            placeholder="{{'sign-up.placeholder-wards' | translate}}" [items]="lstWards"></ng-select>
+        <div *ngIf="isValidate && formControl['wardId'].errors" class="invalid-feedback"
+            [ngClass]="{ 'd-block': isValidate && formControl['wardId'].errors }">
+            <div *ngIf="formControl['wardId'].errors['required']" class="error-notification">
+                {{'sign-up.error-messages.error-required.wards' | translate}}
+            </div>
+        </div>
+    </div>
+    <div class="col-md-6 col-12">
+        <label for="provinceId" class="form-label">{{'sign-up.school' | translate}} <span
+                class="text-danger">(*)</span></label>
+        <ng-select formControlName="schoolId" bindValue="value" bindLabel="text"
+            placeholder="{{'sign-up.placeholder-school' | translate}}" [items]="lstSchool"></ng-select>
+        <div *ngIf="isValidate && formControl['schoolId'].errors" class="invalid-feedback"
+            [ngClass]="{ 'd-block': isValidate && formControl['schoolId'].errors }">
+            <div *ngIf="formControl['schoolId'].errors['required']" class="error-notification">
+                {{'sign-up.error-messages.error-required.school' | translate}}
+            </div>
+        </div>
+    </div>
+    <div class="col-md-6 col-12">
+        <label for="passwordStudent" class="form-label">
+            {{'sign-up.password' | translate}}
+            <span class="text-danger">(*)</span>
+        </label>
+        <div class="input-group">
+            <input id="passwordStudent" formControlName="password" type="password" class="form-control bp-0"
+                placeholder="{{'sign-up.password-placeholder' | translate}}"
+                [type]="passwordInput? 'text' : 'password'">
+            <span (click)="passwordInput = !passwordInput" class="input-group-text background-icon-input custom-span">
+                <i [class]="passwordInput? 'uil uil-eye-slash custom-icon' : 'uil uil-eye custom-icon'"></i>
+            </span>
+        </div>
+        <div *ngIf="isValidate && formControl['password'].errors" class="invalid-feedback"
+            [ngClass]="{ 'd-block': isValidate && formControl['password'].errors }">
+            <div *ngIf="formControl['password'].errors['required']" class="error-notification">
+                {{'sign-up.error-messages.error-password.blank' | translate}}
+            </div>
+            <div *ngIf="formControl['password'].errors['pattern']" class="error-notification">
+                {{'sign-up.error-messages.error-password.format' | translate}}
+            </div>
+            <div *ngIf="formControl['password'].errors['maxlength']" class="error-notification">
+                {{'sign-up.error-messages.error-password.maximum' | translate}}
+            </div>
+        </div>
+    </div>
+    <div class="col-md-6 col-12">
+        <label for="confirmPasswordStudent" class="form-label">{{'sign-up.confirm-password' | translate}} <span
+                class="text-danger">(*)</span></label>
+        <div class="input-group">
+            <input formControlName="confirmPassword" type="password" class="form-control bp-0"
+                id="confirmPasswordStudent" placeholder="{{'sign-up.confirm-password-placeholder' | translate}}"
+                [type]="passwordConfim? 'text' : 'password'">
+            <span (click)="passwordConfim = ! passwordConfim"
+                class="input-group-text background-icon-input custom-span">
+                <i [class]="passwordConfim? 'uil uil-eye-slash custom-icon' : 'uil uil-eye custom-icon'"></i>
+            </span>
+        </div>
+        <div *ngIf="isValidate && formControl['confirmPassword'].errors" class="invalid-feedback"
+            [ngClass]="{ 'd-block': isValidate && formControl['confirmPassword'].errors }">
+            <div *ngIf="formControl['confirmPassword'].errors['required']" class="error-notification">
+                {{'sign-up.error-messages.error-confirm-password.blank' | translate}}
+            </div>
+            <div *ngIf="formControl['confirmPassword'].errors['pattern']" class="error-notification">
+                {{'sign-up.error-messages.error-confirm-password.format' | translate}}
+            </div>
+            <div *ngIf="formControl['confirmPassword'].errors['maxlength']" class="error-notification">
+                {{'sign-up.error-messages.error-confirm-password.maximum' | translate}}
+            </div>
+            <div *ngIf="formControl['confirmPassword'].errors['confirmedValidator']">
+                {{'sign-up.error-messages.error-confirm-password.valid' | translate}}
+            </div>
+        </div>
+    </div>
+    <div class="frm-action col-12">
+        <button type="button" class="btn btn-warning rounded-pill" (click)="onSubmitRegister()">
+            {{'sign-up.title' | translate}}
+        </button>
+    </div>
+</form>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/register-user/register-user-student/register-user-student.component.ts b/Phaha_Package/src/app/register-user/register-user-student/register-user-student.component.ts
new file mode 100644
index 0000000..6c54e57
--- /dev/null
+++ b/Phaha_Package/src/app/register-user/register-user-student/register-user-student.component.ts
@@ -0,0 +1,156 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { NgbAlertConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { FlatpickrOptions } from 'ng2-flatpickr';
+import { ToastrService } from 'ngx-toastr';
+import { finalize } from 'rxjs';
+import { LoginService } from 'src/app/login/login.service';
+import { FormService } from 'src/app/service/form.service';
+
+@Component({
+  selector: 'app-register-user-student',
+  templateUrl: './register-user-student.component.html',
+  styleUrls: ['../register-user.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class RegisterUserStudentComponent implements OnInit {
+  isValidate: boolean = false;
+  formDataStudent: FormGroup;
+  passwordConfim: boolean = false;
+  passwordInput: boolean = false;
+  basicDateOptions: FlatpickrOptions = {
+    altInput: true,
+    altFormat: 'd/m/Y',
+    static: true,
+    mode: 'single',
+    allowInvalidPreload: false,
+    allowInput: true,
+    wrap: true,
+    maxDate: new Date(),
+    dateFormat: 'Y-m-d H:i',
+  };
+  lstProvince: any = [];
+  lstDistrict: any = [];
+  lstWards: any = [];
+  lstSchool: any = [];
+  provinceName: string = '';
+  districtName: string = '';
+  wardsName: string = '';
+  modelGetSchool: any = {
+    provinceId: null,
+    districtId: null,
+    wardId: null
+  };
+  constructor(
+    private _loginService: LoginService,
+    private _formBuilder: FormBuilder,
+    private alertConfig: NgbAlertConfig,
+    private toarts: ToastrService,
+    private router: Router,
+    private _modalService: NgbModal,
+    private _formService: FormService
+  ) {
+    const office = localStorage.getItem("office");
+    this.formDataStudent = this._formBuilder.group({
+      fullName: ['', [Validators.required, Validators.maxLength(250), Validators.pattern(/^[a-zA-ZÀÁÂÃÈÉÊÌÍÒÓÔÕÙÚĂĐĨŨƠàáâãèéêìíòóôõùúăđĩũơƯĂẠẢẤẦẨẪẬẮẰẲẴẶẸẺẼỀỀỂẾưăạảấầẩẫậắằẳẵặẹẻẽềềểếỄỆỈỊỌỎỐỒỔỖỘỚỜỞỠỢỤỦỨỪễệỉịọỏốồổỗộớờởỡợụủứừỬỮỰỲỴÝỶỸửữựỳỵỷỹ\s\W|_]/),]],
+      password: ['', [Validators.required, Validators.pattern(/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d].{7,}$/), Validators.maxLength(250)]],
+      confirmPassword: ['', [Validators.required]],
+      email: ['', [Validators.required, Validators.maxLength(250), Validators.pattern('^[A-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$'),]],
+      phone: ['', [Validators.maxLength(50), Validators.required]],
+      address: ['', [Validators.maxLength(250)]],
+      birthDay: [''],
+      gender: [''],
+      provinceId: [null, [Validators.required,]],
+      districtId: [null, [Validators.required,]],
+      wardId: [null, [Validators.required,]],
+      schoolId: [null, [Validators.required,]],
+      accountType: [3],
+      officeId: [office]
+    })
+  }
+
+  ngOnInit(): void {
+    this.onGetDataProvice();
+    this.onGetDataSchool();
+  }
+
+  onSubmitRegister() {
+    this.isValidate = true;
+    this._formService.onTrimDataForm(this.formDataStudent);
+    if (this.formDataStudent.valid) {
+      this.formDataStudent.value.fullName = this.formDataStudent.value.fullName.trim();
+      this._loginService.registerUser(this.formDataStudent.value).pipe(
+        finalize(() => {
+        }),
+      ).subscribe(
+        data => {
+          localStorage.removeItem("office");
+          this.toarts.success('Đăng ký tài khoản thành công', 'Thành công');
+          const obj = {
+            username: this.formDataStudent.value.phone,
+            password: this.formDataStudent.value.password,
+          };
+          // this.onLogin(obj);
+          this.router.navigate(['web/auth/verify-email']);
+          this._modalService.dismissAll('Thành Công !');
+
+        });
+    }
+  }
+
+  onGetDataProvice() {
+    this._loginService.getDataProvince().subscribe(result => {
+      this.lstProvince = result;
+      this.onGetDataSchool();
+    })
+  }
+
+  onGetDataDistrict(province: any) {
+    if (province) {
+      this.provinceName = province.text;
+      this.modelGetSchool.provinceId = province.value;
+      this._loginService.getDataDistrict(province.value).subscribe(result => {
+        this.lstDistrict = result;
+        this.onGetDataSchool();
+      });
+    } else {
+      this.formDataStudent.controls['districtId'].setValue(null);
+      this.formDataStudent.controls['wardId'].setValue(null);
+      this.formDataStudent.controls['address'].setValue('');
+    }
+
+  }
+
+  onGetDataWards(district: any) {
+    if (district) {
+      this.districtName = district.text;
+      this.modelGetSchool.districtId = district.value;
+      this._loginService.getDataWards(district.value).subscribe(result => {
+        this.lstWards = result;
+        this.onGetDataSchool();
+      });
+    }
+
+  }
+
+  onStringAddress(wards: any) {
+    if (wards) {
+      this.wardsName = wards.text;
+      this.modelGetSchool.wardId = wards.value;
+      this.formControl['address'].setValue(`${this.wardsName}, ${this.districtName}, ${this.provinceName}`);
+      this.onGetDataSchool();
+    };
+  }
+
+  onGetDataSchool() {
+    this._loginService.getDataSchool(this.modelGetSchool).subscribe(result => {
+      this.lstSchool = result.data;
+    });
+  }
+
+  get formControl() {
+    return this.formDataStudent.controls;
+  }
+
+}
diff --git a/Phaha_Package/src/app/register-user/register-user.component.html b/Phaha_Package/src/app/register-user/register-user.component.html
new file mode 100644
index 0000000..b9458dc
--- /dev/null
+++ b/Phaha_Package/src/app/register-user/register-user.component.html
@@ -0,0 +1,355 @@
+<block-ui>
+  <div class="modal-header">
+    <h4 class="modal-title">{{'modal-register.title' | translate}}</h4>
+    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
+  </div>
+  <div class="modal-body" id="modal-add-edit">
+    <div id="page-register">
+      <nav class="nav-register">
+        <div class="nav nav-tabs" id="nav-tab" role="tablist">
+          <button class="nav-link active" id="nav-user-tab" data-bs-toggle="tab" data-bs-target="#registerUser"
+            type="button" role="tab" aria-controls="nav-user-tab" aria-selected="true">
+            {{'sign-up.personal' | translate}}
+          </button>
+          <button class="nav-link" id="nav-company-tab" data-bs-toggle="tab" data-bs-target="#registerCompany"
+            type="button" role="tab" aria-controls="nav-company-tab" aria-selected="false">
+            {{'sign-up.enterprise' | translate}}
+          </button>
+          <button class="nav-link" id="nav-student-tab" data-bs-toggle="tab" data-bs-target="#registerStudent"
+            type="button" role="tab" aria-controls="nav-student-tab" aria-selected="false">
+            {{'sign-up.student' | translate}}
+          </button>
+          <button class="nav-link" id="nav-school-tab" data-bs-toggle="tab" data-bs-target="#registerSchool"
+            type="button" role="tab" aria-controls="nav-school-tab" aria-selected="false">
+            {{'sign-up.school' | translate}}
+          </button>
+        </div>
+      </nav>
+      <div class="tab-content">
+        <div class="tab-pane fade show active" id="registerUser" role="tabpanel" aria-labelledby="nav-user-tab">
+          <form [formGroup]="formDataRegister" class="row g-3" style="max-height: 65vh; overflow: auto">
+            <div class="col-md-6 col-12">
+              <label for="email" class="form-label">{{'sign-up.email' | translate}} <span
+                  class="text-danger">(*)</span></label>
+              <input formControlName="email" type="email" id="email"
+                placeholder="{{'sign-up.email-placeholder' | translate}}" class="form-control">
+              <div *ngIf="isValidate && fr['email'].errors" class="invalid-feedback"
+                [ngClass]="{ 'd-block': isValidate && fr['email'].errors }">
+                <div *ngIf="fr['email'].errors['required']" class="error-notification">
+                  {{'sign-up.error-messages.error-email.blank' | translate}}
+                </div>
+                <div *ngIf="fr['email'].errors['pattern']" class="error-notification">
+                  {{'sign-up.error-messages.error-email.valid' | translate}}
+                </div>
+                <div *ngIf="fr['email'].errors['maxlength']" class="error-notification">
+                  {{'sign-up.error-messages.error-email.maximum' | translate}}
+                </div>
+              </div>
+            </div>
+            <div class="col-md-6 col-12">
+              <label for="phone" class="form-label">{{'sign-up.phone' | translate}} <span
+                  class="text-danger">(*)</span></label>
+              <input formControlName="phone" type="text" id="phone"
+                placeholder="{{'sign-up.phone-placeholder' | translate}}" class="form-control" maxlength="50">
+              <div *ngIf="isValidate && fr['phone'].errors" class="invalid-feedback"
+                [ngClass]="{ 'd-block': isValidate && fr['phone'].errors }">
+                <div *ngIf="fr['phone'].errors['maxLength']" class="error-notification">
+                  {{'sign-up.error-messages.error-phone.maxlength' | translate}}
+                </div>
+                <div *ngIf="fr['phone'].errors['required']" class="error-notification">
+                  {{'sign-up.error-messages.error-phone.blank' | translate}}
+                </div>
+              </div>
+            </div>
+            <div class="col-md-6 col-12">
+              <label for="fullName" class="form-label">{{'sign-up.fullname' | translate}} <span
+                  class="text-danger">(*)</span></label>
+              <input formControlName="fullName" type="text" id="fullName"
+                placeholder="{{'sign-up.fullname-placeholder' | translate}}" class="form-control">
+              <div *ngIf="isValidate && fr['fullName'].errors" class="invalid-feedback"
+                [ngClass]="{ 'd-block': isValidate && fr['fullName'].errors }">
+                <div *ngIf="fr['fullName'].errors['required']" class="error-notification">
+                  {{'sign-up.error-messages.error-fullname.blank' | translate}}
+                </div>
+                <div *ngIf="fr['fullName'].errors['minlength']" class="error-notification">
+                  {{'sign-up.error-messages.error-fullname.minimum' | translate}}
+                </div>
+                <div *ngIf="fr['fullName'].errors['maxlength']" class="error-notification">
+                  {{'sign-up.error-messages.error-fullname.maximum' | translate}}
+                </div>
+              </div>
+            </div>
+            <div class="col-md-6 col-12">
+              <label for="address" class="form-label">{{'sign-up.address' | translate}}</label>
+              <input formControlName="address" type="text" id="address"
+                placeholder="{{'sign-up.address-placeholder' | translate}}" class="form-control">
+              <div *ngIf="isValidate && fr['address'].errors" class="invalid-feedback"
+                [ngClass]="{ 'd-block': isValidate && fr['address'].errors }">
+                <div *ngIf="fr['address'].errors['maxlength']" class="error-notification">
+                  {{'sign-up.error-messages.error-address' | translate}}
+                </div>
+              </div>
+            </div>
+            <div class="col-md-6 col-12">
+              <div>
+                <label class="form-label">{{'sign-up.dob' | translate}}</label>
+              </div>
+              <ng2-flatpickr formControlName="birthDay" [config]="basicDateOptions">
+              </ng2-flatpickr>
+            </div>
+            <div class="col-md-6 col-12">
+              <label class="form-label">{{'sign-up.gender' | translate}}</label>
+              <div class="d-flex">
+                <div style="margin-right: 10px" class="check-radio">
+                  <input formControlName="gender" [value]="'male'" class="custom-radio" type="radio" id="male">
+                  <label class="form-check-label" for="male">
+                    {{'sign-up.male' | translate}}
+                  </label>
+                </div>
+                <div class="check-radio">
+                  <input formControlName="gender" [value]="'female'" class="custom-radio" type="radio" id="female">
+                  <label class="form-check-label" for="female">
+                    {{'sign-up.female' | translate}}
+                  </label>
+                </div>
+              </div>
+
+            </div>
+            <div class="col-md-6 col-12">
+              <label for="password" class="form-label">
+                {{'sign-up.password' | translate}}
+                <span class="text-danger">(*)</span>
+              </label>
+              <div class="input-group">
+                <input formControlName="password" type="password" class="form-control bp-0"
+                  placeholder="{{'sign-up.password-placeholder' | translate}}"
+                  [type]="passwordInput? 'text' : 'password'">
+                <span (click)="passwordInput = !passwordInput"
+                  class="input-group-text background-icon-input custom-span">
+                  <i [class]="passwordInput? 'uil uil-eye-slash custom-icon' : 'uil uil-eye custom-icon'"></i>
+                </span>
+              </div>
+              <!-- <input formControlName="password" type="password" id="password" class="form-control" /> -->
+              <div *ngIf="isValidate && fr['password'].errors" class="invalid-feedback"
+                [ngClass]="{ 'd-block': isValidate && fr['password'].errors }">
+                <div *ngIf="fr['password'].errors['required']" class="error-notification">
+                  {{'sign-up.error-messages.error-password.blank' | translate}}
+                </div>
+                <div *ngIf="fr['password'].errors['pattern']" class="error-notification">
+                  {{'sign-up.error-messages.error-password.format' | translate}}
+                </div>
+                <div *ngIf="fr['password'].errors['maxlength']" class="error-notification">
+                  {{'sign-up.error-messages.error-password.maximum' | translate}}
+                </div>
+              </div>
+            </div>
+            <div class="col-md-6 col-12">
+              <label class="form-label">{{'sign-up.confirm-password' | translate}} <span
+                  class="text-danger">(*)</span></label>
+              <div class="input-group">
+                <input formControlName="confirmPassword" type="password" class="form-control bp-0" id="password"
+                  placeholder="{{'sign-up.confirm-password-placeholder' | translate}}"
+                  [type]="passwordConfim? 'text' : 'password'">
+                <span (click)="passwordConfim = ! passwordConfim"
+                  class="input-group-text background-icon-input custom-span">
+                  <i [class]="passwordConfim? 'uil uil-eye-slash custom-icon' : 'uil uil-eye custom-icon'"></i>
+                </span>
+              </div>
+              <div *ngIf="isValidate && fr['confirmPassword'].errors" class="invalid-feedback"
+                [ngClass]="{ 'd-block': isValidate && fr['confirmPassword'].errors }">
+                <div *ngIf="fr['confirmPassword'].errors['required']" class="error-notification">
+                  {{'sign-up.error-messages.error-confirm-password.blank' | translate}}
+                </div>
+                <div *ngIf="fr['confirmPassword'].errors['pattern']" class="error-notification">
+                  {{'sign-up.error-messages.error-confirm-password.format' | translate}}
+                </div>
+                <div *ngIf="fr['confirmPassword'].errors['maxlength']" class="error-notification">
+                  {{'sign-up.error-messages.error-confirm-password.maximum' | translate}}
+                </div>
+                <div *ngIf="fr['confirmPassword'].errors['confirmedValidator']">
+                  {{'sign-up.error-messages.error-confirm-password.valid' | translate}}
+                </div>
+              </div>
+            </div>
+            <div class="frm-action col-12">
+              <button type="button" class="btn btn-warning rounded-pill" (click)="onSubmitRegister()">
+                {{'sign-up.title' | translate}}
+              </button>
+            </div>
+          </form>
+        </div>
+        <div class="tab-pane fade" id="registerCompany" role="tabpanel" aria-labelledby="nav-company-tab">
+          <form [formGroup]="formDataRegisterEnterprise" class="row g-3" style="max-height: 65vh; overflow: auto">
+            <input formControlName="accountType" type="hidden" [value]="2">
+            <div class="col-md-6 col-12">
+              <label for="email" class="form-label">{{'sign-up.email' | translate}} <span
+                  class="text-danger">(*)</span></label>
+              <input formControlName="enterpriseEmail" type="email"
+                placeholder="{{'sign-up.email-placeholder' | translate}}" class="form-control">
+              <div *ngIf="isValidate && frEnterprise['enterpriseEmail'].errors" class="invalid-feedback"
+                [ngClass]="{ 'd-block': isValidate && frEnterprise['enterpriseEmail'].errors }">
+                <div *ngIf="frEnterprise['enterpriseEmail'].errors['required']" class="error-notification">
+                  {{'sign-up.error-messages.error-email.blank' | translate}}
+                </div>
+                <div *ngIf="frEnterprise['enterpriseEmail'].errors['pattern']" class="error-notification">
+                  {{'sign-up.error-messages.error-email.valid' | translate}}
+                </div>
+                <div *ngIf="frEnterprise['enterpriseEmail'].errors['maxlength']" class="error-notification">
+                  {{'sign-up.error-messages.error-email.maximum' | translate}}
+                </div>
+              </div>
+            </div>
+            <div class="col-md-6 col-12">
+              <label for="phone" class="form-label">{{'sign-up.phone' | translate}} <span
+                  class="text-danger">(*)</span></label>
+              <input formControlName="enterprisePhone" type="text"
+                placeholder="{{'sign-up.phone-placeholder' | translate}}" class="form-control" maxlength="50">
+              <div *ngIf="isValidate && frEnterprise['enterprisePhone'].errors" class="invalid-feedback"
+                [ngClass]="{ 'd-block': isValidate && frEnterprise['enterprisePhone'].errors }">
+                <div *ngIf="frEnterprise['enterprisePhone'].errors['maxLength']" class="error-notification">
+                  {{'sign-up.error-messages.error-phone.maxlength' | translate}}
+                </div>
+                <div *ngIf="frEnterprise['enterprisePhone'].errors['required']" class="error-notification">
+                  {{'sign-up.error-messages.error-phone.blank' | translate}}
+                </div>
+              </div>
+            </div>
+            <div class="col-md-6 col-12">
+              <label class="form-label">
+                {{'sign-up.enterprise-name' | translate}}
+                <span class="text-danger">(*)</span>
+              </label>
+              <input formControlName="enterpriseName" type="text"
+                placeholder="{{'sign-up.enterprise-name-placeholder' | translate}}" class="form-control">
+              <div *ngIf="isValidate && frEnterprise['enterpriseName'].errors" class="invalid-feedback"
+                [ngClass]="{ 'd-block': isValidate && frEnterprise['enterpriseName'].errors }">
+                <div *ngIf="frEnterprise['enterpriseName'].errors['required']" class="error-notification">
+                  {{'sign-up.error-messages.error-enterprise-name.blank' | translate}}
+                </div>
+                <div *ngIf="frEnterprise['enterpriseName'].errors['minlength']" class="error-notification">
+                  {{'sign-up.error-messages.error-enterprise-name.minimum' | translate}}
+                </div>
+                <div *ngIf="frEnterprise['enterpriseName'].errors['maxlength']" class="error-notification">
+                  {{'sign-up.error-messages.error-enterprise-name.maximum' | translate}}
+                </div>
+              </div>
+            </div>
+            <div class="col-md-6 col-12">
+              <label class="form-label">{{'sign-up.taxcode' | translate}}</label>
+              <input formControlName="enterpriseTaxCode" type="text"
+                placeholder="{{'sign-up.taxcode-placeholder' | translate}}" class="form-control">
+            </div>
+            <div class="col-md-6 col-12">
+              <label for="address" class="form-label">{{'sign-up.address' | translate}}</label>
+              <input formControlName="enterpriseAddress" type="text"
+                placeholder="{{'sign-up.address-placeholder' | translate}}" class="form-control">
+              <div *ngIf="isValidate && frEnterprise['enterpriseAddress'].errors" class="invalid-feedback"
+                [ngClass]="{ 'd-block': isValidate && frEnterprise['address'].errors }">
+                <div *ngIf="frEnterprise['enterpriseAddress'].errors['maxlength']" class="error-notification">
+                  {{'sign-up.error-messages.error-address' | translate}}
+                </div>
+              </div>
+            </div>
+            <div class="col-md-6 col-12">
+              <label class="form-label">{{'sign-up.headquarters' | translate}}</label>
+              <input formControlName="enterpriseHeadQuarters" type="text"
+                placeholder="{{'sign-up.headquarters-placeholder' | translate}}" class="form-control">
+            </div>
+            <div class="col-md-6 col-12">
+              <label class="form-label">{{'sign-up.legal-representative' | translate}}</label>
+              <input formControlName="enterpriseLegalRepresentative" type="text"
+                placeholder="{{'sign-up.legal-representative-placeholder' | translate}}" class="form-control">
+            </div>
+            <div class="col-md-6 col-12">
+              <label class="form-label">{{'sign-up.position' | translate}}</label>
+              <input formControlName="enterprisePosition" type="text"
+                placeholder="{{'sign-up.position-placeholder' | translate}}" class="form-control">
+            </div>
+            <div class="col-md-6 col-12">
+              <label class="form-label">{{'sign-up.authorization-letter' | translate}}</label>
+              <input formControlName="enterpriseAuthorizationLetter" type="text"
+                placeholder="{{'sign-up.authorization-letter-placeholder' | translate}}" class="form-control">
+            </div>
+            <div class="col-md-6 col-12">
+              <div>
+                <label class="form-label">{{'sign-up.sign-date' | translate}}</label>
+              </div>
+              <ng2-flatpickr formControlName="enterpriseSignDate" [config]="basicDateOptions">
+              </ng2-flatpickr>
+            </div>
+            <div class="col-12">
+              <label for="password" class="form-label">{{'sign-up.password' | translate}} <span
+                  class="text-danger">(*)</span></label>
+              <div class="input-group">
+                <input formControlName="password" type="password" class="form-control bp-0"
+                  placeholder="{{'sign-up.password-placeholder' | translate}}"
+                  [type]="passwordInput? 'text' : 'password'">
+                <span (click)="passwordInput = !passwordInput"
+                  class="input-group-text background-icon-input custom-span">
+                  <i [class]="passwordInput? 'uil uil-eye-slash custom-icon' : 'uil uil-eye custom-icon'"></i>
+                </span>
+              </div>
+              <div *ngIf="isValidate && frEnterprise['password'].errors" class="invalid-feedback"
+                [ngClass]="{ 'd-block': isValidate && frEnterprise['password'].errors }">
+                <div *ngIf="frEnterprise['password'].errors['required']" class="error-notification">
+                  {{'sign-up.error-messages.error-password.blank' | translate}}
+                </div>
+                <div *ngIf="frEnterprise['password'].errors['pattern']" class="error-notification">
+                  {{'sign-up.error-messages.error-password.format' | translate}}
+                </div>
+                <div *ngIf="frEnterprise['password'].errors['maxlength']" class="error-notification">
+                  {{'sign-up.error-messages.error-password.maximum' | translate}}
+                </div>
+              </div>
+            </div>
+            <div class="col-12">
+              <label class="form-label">{{'sign-up.confirm-password' | translate}} <span
+                  class="text-danger">(*)</span></label>
+              <div class="input-group">
+                <input formControlName="confirmPassword" type="password" class="form-control bp-0"
+                  placeholder="{{'sign-up.confirm-password-placeholder' | translate}}"
+                  [type]="passwordConfim? 'text' : 'password'">
+                <span (click)="passwordConfim = ! passwordConfim"
+                  class="input-group-text background-icon-input custom-span">
+                  <i [class]="passwordConfim? 'uil uil-eye-slash custom-icon' : 'uil uil-eye custom-icon'"></i>
+                </span>
+              </div>
+              <div *ngIf="isValidate && frEnterprise['confirmPassword'].errors" class="invalid-feedback"
+                [ngClass]="{ 'd-block': isValidate && frEnterprise['confirmPassword'].errors }">
+                <div *ngIf="frEnterprise['confirmPassword'].errors['required']" class="error-notification">
+                  {{'sign-up.error-messages.error-confirm-password.blank' | translate}}
+                </div>
+                <div *ngIf="frEnterprise['confirmPassword'].errors['pattern']" class="error-notification">
+                  {{'sign-up.error-messages.error-confirm-password.format' | translate}}
+                </div>
+                <div *ngIf="frEnterprise['confirmPassword'].errors['maxlength']" class="error-notification">
+                  {{'sign-up.error-messages.error-confirm-password.maximum' | translate}}
+                </div>
+                <div *ngIf="frEnterprise['confirmPassword'].errors['confirmedValidator']">
+                  {{'sign-up.error-messages.error-confirm-password.valid' | translate}}
+                </div>
+              </div>
+            </div>
+            <div class="frm-action col-12">
+              <button type="button" class="btn btn-warning rounded-pill"
+                (click)="onSubmitRegisterEnterprise()">{{'sign-up.title' | translate}}
+              </button>
+            </div>
+          </form>
+        </div>
+        <div class="tab-pane fade" id="registerStudent" role="tabpanel" aria-labelledby="nav-student-tab">
+          <app-register-user-student></app-register-user-student>
+        </div>
+        <div class="tab-pane fade" id="registerSchool" role="tabpanel" aria-labelledby="nav-school-tab">
+          <app-register-user-school></app-register-user-school>
+        </div>
+        <div class="register-now">
+          <span>
+            {{'sign-up.has-account' | translate}}
+            <a type="button" (click)="onBack()"> {{'sign-up.login-now' | translate}}</a>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</block-ui>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/register-user/register-user.component.scss b/Phaha_Package/src/app/register-user/register-user.component.scss
new file mode 100644
index 0000000..956cc8e
--- /dev/null
+++ b/Phaha_Package/src/app/register-user/register-user.component.scss
@@ -0,0 +1,201 @@
+@import "~@ng-select/ng-select/themes/default.theme.css";
+
+app-register-user {
+  margin-bottom: 20px;
+
+  .header-title {
+    text-align: center;
+    font-size: 30px;
+  }
+
+  form {
+    margin: auto;
+  }
+
+  .frm-action {
+    text-align: center;
+
+    .btn {
+      color: #fff;
+      width: 200px;
+      line-height: 30px;
+      font-weight: 600;
+      font-size: 20px;
+    }
+  }
+
+
+
+  .nav-tabs .nav-link {
+    margin-bottom: -1px;
+    background: none;
+    border: none;
+    border-bottom: 1px solid transparent;
+  }
+
+  .nav-link {
+    color: #171725;
+    font-size: 16px;
+  }
+
+  .nav-tabs .nav-link.active,
+  .nav-tabs .nav-item.show .nav-link {
+    color: #b27a03;
+    border: 0;
+    border-bottom: 4px solid #fcb71e;
+  }
+
+  .nav-tabs .nav-link:hover,
+  .nav-tabs .nav-link:focus {
+    color: #b27a03;
+    border: 0;
+    border-bottom: 4px solid #fcb71e;
+    isolation: unset;
+  }
+
+  .nav-register {
+    margin: auto;
+    margin-bottom: 20px;
+  }
+
+  .register-now {
+    text-align: center;
+    margin-top: 15px;
+
+    a {
+      color: #ffc107 !important;
+    }
+  }
+}
+
+.form-control:focus {
+  color: #212529;
+  background-color: #fff;
+  border-color: #ffa900 !important;
+  outline: 0;
+  box-shadow: none !important;
+}
+
+.form-check-input:focus {
+  border-color: #ffa900 !important;
+  outline: 0;
+  box-shadow: none !important;
+}
+
+.custom-radio:checked,
+[type="radio"]:not(:checked) {
+  position: absolute;
+  left: -9999px;
+}
+
+.form-check-input {
+  width: 15px;
+  height: 15px;
+}
+
+.checkbox-custom {
+  opacity: 0;
+  position: absolute;
+}
+
+.checkbox-custom,
+.checkbox-custom-label {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 5px;
+  cursor: pointer;
+}
+
+.checkbox-custom+.checkbox-custom-label:before {
+  content: "";
+  background: #fff;
+  border-radius: 5px;
+  border: 2px solid #ddd;
+  display: inline-block;
+  vertical-align: middle;
+  width: 10px;
+  height: 10px;
+  padding: 2px;
+  margin-right: 10px;
+  text-align: center;
+}
+
+.checkbox-custom:checked+.checkbox-custom-label:before {
+  content: "";
+  display: inline-block;
+  width: 1px;
+  height: 5px;
+  border: solid #ffa900;
+  border-width: 0 3px 3px 0;
+  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  border-radius: 0px;
+  margin: 0px 15px 5px 5px;
+}
+
+.forget {
+  a:hover {
+    color: #ffa900;
+    cursor: pointer;
+  }
+}
+
+.custom-icon {
+  font-size: 16px;
+}
+
+.custom-radio:checked+label,
+.custom-radio:not(:checked)+label {
+  position: relative;
+  padding-left: 28px;
+  cursor: pointer;
+  line-height: 20px;
+  display: inline-block;
+  color: #666;
+  margin: 0 12px;
+}
+
+.custom-radio:checked+label:before,
+.custom-radio:not(:checked)+label:before {
+  content: "";
+  position: absolute;
+  left: 1px;
+  top: 1px;
+  width: 18px;
+  height: 18px;
+  border: 1px solid #ddd;
+  border-radius: 100%;
+  background: #fff;
+}
+
+.form-check-input:checked {
+  background-color: #ffa900;
+  border-color: #ffa900;
+}
+
+.custom-radio:not(:checked)+label:after {
+  opacity: 0;
+  -webkit-transform: scale(0);
+  transform: scale(0);
+}
+
+.custom-radio:checked+label:after {
+  opacity: 1;
+  -webkit-transform: scale(1);
+  transform: scale(1);
+}
+
+.custom-radio:checked+label:after,
+.custom-radio:not(:checked)+label:after {
+  content: "";
+  width: 12px;
+  height: 12px;
+  background: #ffa900;
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  border-radius: 100%;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/register-user/register-user.component.ts b/Phaha_Package/src/app/register-user/register-user.component.ts
new file mode 100644
index 0000000..0cd69f3
--- /dev/null
+++ b/Phaha_Package/src/app/register-user/register-user.component.ts
@@ -0,0 +1,191 @@
+import { Component, EventEmitter, OnInit, Output, ViewEncapsulation, inject } from '@angular/core';
+import {
+  AbstractControl,
+  FormBuilder,
+  FormGroup,
+  Validators,
+} from '@angular/forms';
+import { BlockUI, NgBlockUI } from 'ng-block-ui';
+import { ToastrService } from 'ngx-toastr';
+import { finalize } from 'rxjs/operators';
+import { Router } from '@angular/router';
+import { NgbActiveModal, NgbAlertConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { FlatpickrOptions } from 'ng2-flatpickr';
+import { LoginService } from '../login/login.service';
+import { LoginComponent } from '../login/login.component';
+
+export function removeSpaces(control: AbstractControl) {
+  if (control && control.value && !control.value.replace(/\s/g, '').length) {
+    control.setValue(null);
+  }
+  return null;
+}
+
+@Component({
+  selector: 'app-register-user',
+  templateUrl: './register-user.component.html',
+  styleUrls: ['./register-user.component.scss'],
+  providers: [NgbAlertConfig],
+  encapsulation: ViewEncapsulation.None,
+})
+export class RegisterUserComponent implements OnInit {
+  modal = inject(NgbActiveModal);
+
+  @Output() callBack = new EventEmitter<string>();
+  
+  public formDataRegister: FormGroup;
+  public formDataRegisterEnterprise: FormGroup;
+  public textErrorsRegister: any;
+  public isValidate: boolean = false;
+  public passwordInput: boolean = false;
+  public passwordConfim: boolean = false;
+
+  public basicDateOptions: FlatpickrOptions = {
+    altInput: true,
+    altFormat: 'd/m/Y',
+    static: true,
+    mode: 'single',
+    allowInvalidPreload: false,
+    allowInput: true,
+    wrap: true,
+    maxDate: new Date(),
+    dateFormat: 'Y-m-d H:i',
+  };
+
+  constructor(
+    private readonly _loginService: LoginService,
+    private readonly _formBuilder: FormBuilder,
+    private readonly _alertConfig: NgbAlertConfig,
+    private readonly _toarts: ToastrService,
+    private readonly _router: Router,
+    private readonly _modalService: NgbModal,
+  ) {
+    _alertConfig.type = 'danger';
+    _alertConfig.dismissible = false;
+    const office = localStorage.getItem("office");
+    this.formDataRegister = this._formBuilder.group(
+      {
+        fullName: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(250), Validators.pattern(/^[a-zA-ZÀÁÂÃÈÉÊÌÍÒÓÔÕÙÚĂĐĨŨƠàáâãèéêìíòóôõùúăđĩũơƯĂẠẢẤẦẨẪẬẮẰẲẴẶẸẺẼỀỀỂẾưăạảấầẩẫậắằẳẵặẹẻẽềềểếỄỆỈỊỌỎỐỒỔỖỘỚỜỞỠỢỤỦỨỪễệỉịọỏốồổỗộớờởỡợụủứừỬỮỰỲỴÝỶỸửữựỳỵỷỹ\s\W|_]/), removeSpaces]],
+        password: ['', [Validators.required, Validators.pattern(/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d].{7,}$/), Validators.maxLength(250)]],
+        confirmPassword: ['', [Validators.required]],
+        email: ['', [Validators.required, Validators.maxLength(250), Validators.pattern('^[A-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$'), removeSpaces]],
+        phone: ['', [Validators.maxLength(50), Validators.required, removeSpaces]],
+        address: ['', [Validators.maxLength(250), removeSpaces]],
+        birthDay: [''],
+        gender: [''],
+        isEnterprise: [false],
+        officeId: [office]
+      },
+      {
+        validator: this.confirmedValidator('password', 'confirmPassword'),
+      }
+    );
+    this.formDataRegisterEnterprise = this._formBuilder.group(
+      {
+        enterpriseName: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(250), removeSpaces]],
+        password: ['', [Validators.required, Validators.pattern(/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d].{7,}$/), Validators.maxLength(250)]],
+        confirmPassword: ['', [Validators.required]],
+        enterpriseEmail: ['', [Validators.required, Validators.maxLength(250), Validators.pattern('^[A-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$'), removeSpaces]],
+        enterprisePhone: ['', [Validators.maxLength(50), Validators.required, removeSpaces]],
+        enterpriseAddress: ['', [Validators.maxLength(250), removeSpaces]],
+        enterpriseSignDate: [''],
+        enterpriseHeadQuarters: ['', []],
+        enterpriseTaxCode: ['', []],
+        enterpriseAccountName: ['', []],
+        enterpriseAccountNumber: ['', []],
+        enterpriseBank: ['', []],
+        enterpriseBankBranch: ['', []],
+        enterpriseLegalRepresentative: ['', []],
+        enterprisePosition: ['', []],
+        enterpriseAuthorizationLetter: ['', []],
+        isEnterprise: [true],
+        officeId: [office],
+        accountType: [2]
+      },
+      {
+        validator: this.confirmedValidator('password', 'confirmPassword'),
+      }
+    );
+  }
+
+  ngOnInit(): void {
+  }
+
+  confirmedValidator(controlName: string, matchingControlName: string) {
+    return (formGroup: FormGroup) => {
+      const control = formGroup.controls[controlName];
+      const matchingControl = formGroup.controls[matchingControlName];
+      if (
+        matchingControl.errors &&
+        !matchingControl.errors['confirmedValidator']
+      ) {
+        return;
+      }
+      if (control.value !== matchingControl.value) {
+        matchingControl.setErrors({ confirmedValidator: true });
+      } else {
+        matchingControl.setErrors(null);
+      }
+    };
+  }
+
+  onSubmitRegister() {
+    this.isValidate = true;
+    if (this.formDataRegister.valid) {
+      this.formDataRegister.value.fullName = this.formDataRegister.value.fullName.trim();
+      this._loginService.registerUser(this.formDataRegister.value)
+        .subscribe(res => {
+          localStorage.removeItem("office");
+          this._toarts.success('Đăng ký tài khoản thành công', 'Thành công');
+          const obj = {
+            username: this.formDataRegister.value.phone,
+            password: this.formDataRegister.value.password,
+          };
+          this._router.navigate(['web/auth/verify-email']);
+          this._modalService.dismissAll('Thành Công !');
+        });
+    }
+  }
+
+  onSubmitRegisterEnterprise() {
+    this.isValidate = true;
+    if (this.formDataRegisterEnterprise.valid) {
+      this.formDataRegisterEnterprise.value.enterpriseName = this.formDataRegisterEnterprise.value.enterpriseName.trim();
+      this._loginService
+      .registerUser(this.formDataRegisterEnterprise.value)
+      .subscribe(
+        data => {
+          localStorage.removeItem("office");
+          this._toarts.success('Đăng ký tài khoản thành công', 'Thành công');
+          this._router.navigate(['web/auth/verify-email']);
+          this._modalService.dismissAll('Thành Công !');
+        });
+    }
+  }
+
+  onLogin(modelLogin: any) {
+    this._loginService
+      .onSubmit(modelLogin)
+      .pipe(finalize(() => {
+      }))
+      .subscribe((data) => {
+        localStorage.setItem('currentCustomer', JSON.stringify(data));
+        this._router.navigate(['/']).then(() => {
+          window.location.reload();
+        });
+      });
+  }
+
+  onBack() {
+    this._modalService.dismissAll(`Close`);
+    this._modalService.open(LoginComponent, { size: 'md', centered: true });
+  }
+
+  get fr() {
+    return this.formDataRegister.controls;
+  }
+
+  get frEnterprise() {
+    return this.formDataRegisterEnterprise.controls;
+  }
+}
diff --git a/Phaha_Package/src/app/register-user/register-user.module.ts b/Phaha_Package/src/app/register-user/register-user.module.ts
new file mode 100644
index 0000000..c4066c2
--- /dev/null
+++ b/Phaha_Package/src/app/register-user/register-user.module.ts
@@ -0,0 +1,47 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClient } from '@angular/common/http';
+import { RegisterUserStudentComponent } from './register-user-student/register-user-student.component';
+import { RegisterUserComponent } from './register-user.component';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BlockUIModule } from 'ng-block-ui';
+import { Ng2FlatpickrModule } from 'ng2-flatpickr';
+import { environment } from 'src/environments/environment';
+import { initializeApp } from 'firebase/app';
+import { NgSelectModule } from "@ng-select/ng-select";
+import { RegisterUserSchoolComponent } from './register-user-school/register-user-school.component';
+
+export function httpTranslateLoader(http: HttpClient) {
+  return new TranslateHttpLoader(http, '../assets/i18n/', '.json');
+}
+
+// initializeApp(environment.firebase);
+
+@NgModule({
+  declarations: [
+    RegisterUserComponent, RegisterUserStudentComponent, RegisterUserSchoolComponent
+  ],
+  exports: [RegisterUserComponent],
+  imports: [
+    CommonModule,
+    NgbModule,
+    FormsModule,
+    ReactiveFormsModule,
+    NgSelectModule,
+    BlockUIModule.forRoot(),
+    Ng2FlatpickrModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => {
+          return new TranslateHttpLoader(http, '../../../assets/i18n', '.json');
+        },
+        deps: [HttpClient]
+      }
+    })
+  ]
+})
+export class RegisterUserModule { }
diff --git a/Phaha_Package/src/app/register-user/verify-email/verify-email.component.html b/Phaha_Package/src/app/register-user/verify-email/verify-email.component.html
new file mode 100644
index 0000000..f0b3784
--- /dev/null
+++ b/Phaha_Package/src/app/register-user/verify-email/verify-email.component.html
@@ -0,0 +1,38 @@
+<block-ui>
+  <div class="verify-email-popup pt-4 pb-4">
+    <div class="container">
+      <div id="content" class="mt-4 d-flex flex-column align-items-center" *ngIf="!isActive">
+        <img src="../../../assets/image/verify-mail.png" alt="" width="160" height="160">
+        <h1>{{'verify-email.msg-success' | translate}}</h1>
+        <div class="notice-sentences text-center">
+          <div innerHTML="{{'verify-email.msg-success-sentences' | translate}}"></div>
+        </div>
+        <div innerHTML="{{'verify-email.msg-check' | translate}}"></div>
+        <div innerHTML="{{'verify-email.msg-verify-success' | translate}}"></div>
+        <div innerHTML="{{'verify-email.msg-verify-fail' | translate}}"></div>
+        <div>
+          <button routerLink="/" class="btn btn-success">{{'breadcrumb.home' | translate}}</button>
+        </div>
+      </div>
+      <div id="content" class="mt-4" *ngIf="isActive">
+        <div *ngIf="!isSubmit" class="d-flex flex-column align-items-center" style="gap: 16px">
+          <img src="../../../assets/image/error.png" alt="" width="160" height="160">
+          <div innerHTML="{{'verify-email.msg-verify-fail' | translate}}"></div>
+          <div class="input-group">
+            <input type="text" class="form-control" placeholder="Nhập email xác thực ..." [(ngModel)]="email">
+            <div class="input-group-append">
+              <button class="btn btn-outline-secondary" type="button" (click)="resendEmail()">
+                <i class="uil uil-message"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div *ngIf="isSubmit" class="d-flex flex-column align-items-center" style="gap: 16px">
+          <img src="../../../assets/image/success.png" alt="" width="160" height="160">
+          <div innerHTML="{{'verify-email.msg-verify-success' | translate}}"></div>
+          <a href="/">{{'verify-email.return-home-btn' | translate}}</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</block-ui>
diff --git a/Phaha_Package/src/app/register-user/verify-email/verify-email.component.scss b/Phaha_Package/src/app/register-user/verify-email/verify-email.component.scss
new file mode 100644
index 0000000..48e4e8a
--- /dev/null
+++ b/Phaha_Package/src/app/register-user/verify-email/verify-email.component.scss
@@ -0,0 +1,39 @@
+.verify-email-popup {
+  #content {
+    background-color: #fff;
+    padding: 64px 15px;
+    gap: 16px;
+  }
+
+  .countdown {
+    margin-left: 16px;
+  }
+
+  .input-group {
+    width: 320px;
+
+    button {
+      width: 40px;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  button {
+    width: 160px;
+    height: 32px;
+    border-radius: 4px;
+    background: #e9ecef;
+    border: 1px solid #ced4da;
+    color: #000;
+
+    &:hover {
+      color: #000;
+    }
+  }
+
+  .notice {
+    font-size: 13px;
+    color: #6c757d;
+  }
+}
diff --git a/Phaha_Package/src/app/register-user/verify-email/verify-email.component.ts b/Phaha_Package/src/app/register-user/verify-email/verify-email.component.ts
new file mode 100644
index 0000000..7e5ab88
--- /dev/null
+++ b/Phaha_Package/src/app/register-user/verify-email/verify-email.component.ts
@@ -0,0 +1,56 @@
+import {Component, OnInit, TemplateRef} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
+import {ToastrService} from 'ngx-toastr';
+import {VerifyEmailService} from './verify-email.service';
+
+@Component({
+  selector: 'app-verify-email',
+  templateUrl: './verify-email.component.html',
+  styleUrls: ['./verify-email.component.scss'],
+})
+export class VerifyEmailComponent implements OnInit {
+  token: string = '';
+  public isActive: boolean = false;
+  public isSubmit: boolean = false;
+  email: string = '';
+
+  constructor(
+    private _verifyEmail: VerifyEmailService,
+    private _route: ActivatedRoute,
+    private _modalService: NgbModal,
+  ) {
+    this._route.queryParams.subscribe((params) => {
+      this.token = params['token'];
+    });
+  }
+
+  openModalWithSize(content: TemplateRef<NgbModal>) {
+    this._modalService.open(content, {size: "md", centered: true});
+  }
+
+  ngOnInit(): void {
+    if (this.token && this.token.length > 0) {
+      this.isActive = true;
+      this.onActiveAccount();
+    }
+  }
+
+  onActiveAccount() {
+    this._verifyEmail
+      .activeAccount(this.token)
+      .pipe()
+      .subscribe((data) => {
+        this.isSubmit = true;
+      });
+  }
+
+  resendEmail() {
+    this._verifyEmail
+      .resendEmailVerify(this.email)
+      .pipe()
+      .subscribe((data) => {
+        this.isSubmit = true;
+      });
+  }
+}
diff --git a/Phaha_Package/src/app/register-user/verify-email/verify-email.service.ts b/Phaha_Package/src/app/register-user/verify-email/verify-email.service.ts
new file mode 100644
index 0000000..a5dd0b1
--- /dev/null
+++ b/Phaha_Package/src/app/register-user/verify-email/verify-email.service.ts
@@ -0,0 +1,25 @@
+import {HttpClient, HttpParams} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class VerifyEmailService {
+
+  constructor(
+    private _http: HttpClient
+  ) {
+  }
+
+  activeAccount(token: any) {
+    return this._http.post<any>('/auth/verify-email', {token: token})
+  }
+
+  resendEmailVerify(email: any) {
+    let params = new HttpParams();
+    if (email)
+      params = params.append('mail', `${email}`);
+    return this._http.get<any>(`/auth/resend-email`, {params});
+  }
+
+}
diff --git a/Phaha_Package/src/app/reset-password/reset-password.component.html b/Phaha_Package/src/app/reset-password/reset-password.component.html
new file mode 100644
index 0000000..fe0741b
--- /dev/null
+++ b/Phaha_Package/src/app/reset-password/reset-password.component.html
@@ -0,0 +1,76 @@
+<block-ui>
+  <div class="container">
+    <nav aria-label="breadcrumb">
+      <ol class="breadcrumb">
+        <li class="breadcrumb-item"><a routerLink="/" style="color: #000;">{{'breadcrumb.home' | translate}}</a>
+        </li>
+        <li class="breadcrumb-item active" aria-current="page">{{'breadcrumb.payment' | translate}}</li>
+      </ol>
+    </nav>
+    <div class="card box-reset-pasword">
+      <div class="w-100 d-lg-flex align-items-center justify-content-center">
+        <img src="assets/image/lock-removebg-preview.png" alt="Login V2" class="img-reset-password"/>
+      </div>
+      <header class="reset-header">Đặt lại mật khẩu</header>
+      <p class="text-center">Nhập lại mật khẩu mới của bạn và xác nhận ở bên dưới</p>
+      <form [formGroup]="formDataResetPassword">
+        <div class="row">
+          <div class="mb-3 col-md-4 offset-md-4">
+            <label for="password" class="form-label">{{'sign-in.password' | translate}} <span
+              class="text-danger">(*)</span></label>
+            <div class="input-group">
+              <input formControlName="password" type="password" class="form-control bp-0" id="password"
+                     placeholder="Xác nhận mật khẩu" [type]="passwordType ? 'text' : 'password'">
+              <span (click)="passwordType = ! passwordType" class="input-group-text background-icon-input custom-span">
+              <i [class]="passwordType? 'uil uil-eye-slash custom-icon' : 'uil uil-eye custom-icon'"></i>
+            </span>
+            </div>
+            <div *ngIf="isValidate && fr['password'].errors" class="invalid-feedback"
+                 [ngClass]="{ 'd-block': isValidate && fr['password'].errors }">
+              <div *ngIf="fr['password'].errors['required']" class="error-notification">
+                {{'sign-up.error-messages.error-password.blank' | translate}}
+              </div>
+              <div *ngIf="fr['password'].errors['pattern']" class="error-notification">
+                {{'sign-up.error-messages.error-password.format' | translate}}
+              </div>
+              <div *ngIf="fr['password'].errors['maxlength']" class="error-notification">
+                {{'sign-up.error-messages.error-password.maximum' | translate}}
+              </div>
+            </div>
+          </div>
+          <div class="mb-3 col-md-4 offset-md-4">
+            <label class="form-label">{{'sign-up.confirm-password' | translate}} <span
+              class="text-danger">(*)</span></label>
+            <div class="input-group">
+              <input formControlName="confirmPassword" type="password" class="form-control bp-0"
+                     placeholder="{{'sign-up.confirm-password-placeholder' | translate}}"
+                     [type]="passwordConfim? 'text' : 'password'">
+              <span (click)="passwordConfim = ! passwordConfim"
+                    class="input-group-text background-icon-input custom-span">
+                <i [class]="passwordConfim? 'uil uil-eye-slash custom-icon' : 'uil uil-eye custom-icon'"></i>
+              </span>
+            </div>
+            <div *ngIf="isValidate && fr['confirmPassword'].errors" class="invalid-feedback"
+                 [ngClass]="{ 'd-block': isValidate && fr['confirmPassword'].errors }">
+              <div *ngIf="fr['confirmPassword'].errors['required']" class="error-notification">
+                {{'sign-up.error-messages.error-confirm-password.blank' | translate}}
+              </div>
+              <div *ngIf="fr['confirmPassword'].errors['pattern']" class="error-notification">
+                {{'sign-up.error-messages.error-confirm-password.format' | translate}}
+              </div>
+              <div *ngIf="fr['confirmPassword'].errors['maxlength']" class="error-notification">
+                {{'sign-up.error-messages.error-confirm-password.maximum' | translate}}
+              </div>
+              <div *ngIf="fr['confirmPassword'].errors['confirmedValidator']">
+                {{'sign-up.error-messages.error-confirm-password.valid' | translate}}
+              </div>
+            </div>
+          </div>
+          <div class="frm-action col-12">
+            <button type="button" class="btn btn-warning rounded-pill" (click)="onSubmit()">Xác nhận</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</block-ui>
diff --git a/Phaha_Package/src/app/reset-password/reset-password.component.scss b/Phaha_Package/src/app/reset-password/reset-password.component.scss
new file mode 100644
index 0000000..66f8932
--- /dev/null
+++ b/Phaha_Package/src/app/reset-password/reset-password.component.scss
@@ -0,0 +1,40 @@
+app-reset-password {
+  .box-reset-pasword {
+    padding: 20px 0;
+  }
+  .breadcrumb {
+    margin-top: 155px;
+  }
+
+  .breadcrumb-item {
+    font-size: 15px !important;
+
+    a {
+      text-decoration: none;
+      color: #666;
+      font-size: 15px !important;
+    }
+  }
+  .img-reset-password {
+    width: 90px;
+  }
+  .reset-header {
+    text-align: center;
+    font-size: 24px;
+    font-weight: 600;
+    margin-bottom: 10px;
+    color: #e09500;
+  }
+
+  .frm-action {
+    text-align: center;
+
+    .btn {
+      color: #fff;
+      width: 200px;
+      line-height: 30px;
+      font-weight: 600;
+      font-size: 20px;
+    }
+  }
+}
diff --git a/Phaha_Package/src/app/reset-password/reset-password.component.ts b/Phaha_Package/src/app/reset-password/reset-password.component.ts
new file mode 100644
index 0000000..2d078d0
--- /dev/null
+++ b/Phaha_Package/src/app/reset-password/reset-password.component.ts
@@ -0,0 +1,76 @@
+import {Component, OnInit, ViewEncapsulation} from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from "@angular/forms";
+import {removeSpaces} from "../register-user/register-user.component";
+import {ResetPasswordService} from "./reset-password.service";
+import {ActivatedRoute} from "@angular/router";
+import {ToastrService} from "ngx-toastr";
+
+@Component({
+  selector: 'app-reset-password',
+  templateUrl: './reset-password.component.html',
+  styleUrls: ['./reset-password.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class ResetPasswordComponent implements OnInit {
+
+  passwordType: boolean = false;
+  formDataResetPassword: FormGroup;
+  isValidate: boolean = false;
+  passwordConfim: boolean = false;
+  token: any
+
+  constructor(
+    private _formBuilder: FormBuilder,
+    private _resetPasswordService: ResetPasswordService,
+    private _route: ActivatedRoute,
+    private toasrt: ToastrService,
+  ) {
+    this.formDataResetPassword = this._formBuilder.group(
+      {
+        password: ['', [Validators.required, Validators.pattern(/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d].{7,}$/), Validators.maxLength(250)]],
+        confirmPassword: ['', [Validators.required]],
+      },
+      {
+        validator: this.confirmedValidator('password', 'confirmPassword'),
+      }
+    );
+    this.token = this._route.snapshot.params['token'];
+  }
+
+  ngOnInit(): void {
+  }
+
+  confirmedValidator(controlName: string, matchingControlName: string) {
+    return (formGroup: FormGroup) => {
+      const control = formGroup.controls[controlName];
+      const matchingControl = formGroup.controls[matchingControlName];
+      if (
+        matchingControl.errors &&
+        !matchingControl.errors['confirmedValidator']
+      ) {
+        return;
+      }
+      if (control.value !== matchingControl.value) {
+        matchingControl.setErrors({confirmedValidator: true});
+      } else {
+        matchingControl.setErrors(null);
+      }
+    };
+  }
+
+  get fr() {
+    return this.formDataResetPassword.controls;
+  }
+
+  onSubmit() {
+    this.isValidate = true;
+    if (this.formDataResetPassword.valid) {
+      this._resetPasswordService
+        .resetPassword(this.token, this.formDataResetPassword.value['password'], this.formDataResetPassword.value['confirmPassword'])
+        .subscribe(() => {
+          this.toasrt.success('Gửi email thành công', 'Thành công');
+          window.location.href = "/";
+        })
+    }
+  }
+}
diff --git a/Phaha_Package/src/app/reset-password/reset-password.service.ts b/Phaha_Package/src/app/reset-password/reset-password.service.ts
new file mode 100644
index 0000000..e268f48
--- /dev/null
+++ b/Phaha_Package/src/app/reset-password/reset-password.service.ts
@@ -0,0 +1,21 @@
+import {Injectable} from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ResetPasswordService {
+
+  constructor(
+    private _http: HttpClient,
+  ) {
+  }
+
+  resetPassword(token: any, password: any, confirmPassword: any) {
+    return this._http.post<any>(`/auth/reset-password`, {
+      token: token,
+      password: password,
+      confirmPassword: confirmPassword
+    });
+  }
+}
diff --git a/Phaha_Package/src/app/service/form.service.ts b/Phaha_Package/src/app/service/form.service.ts
new file mode 100644
index 0000000..766466a
--- /dev/null
+++ b/Phaha_Package/src/app/service/form.service.ts
@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { FormArray, FormGroup } from '@angular/forms';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class FormService {
+
+    constructor() { }
+
+    onTrimDataForm(formData: FormGroup) {
+        let formGroup: any = formData;
+        Object.keys(formGroup.controls).forEach((key) => {
+            if (formData.controls[key] instanceof FormArray) {
+                let forms = formData.controls[key] as FormArray;
+                for (let control of forms.controls) {
+                    if (control instanceof FormGroup) {
+                        this.onTrimDataForm(control);
+                    }
+                }
+            } else if (formData.controls[key] instanceof FormGroup) {
+                let formg = formData.controls[key] as FormGroup;
+                this.onTrimDataForm(formg);
+            } else if (formGroup.get(key).value != null && typeof formGroup.get(key).value == 'string')
+                formGroup.get(key).setValue(formGroup.get(key).value.trim());
+        });
+    }
+}
diff --git a/Phaha_Package/src/app/template-2/home-2/home-slider/home-slider.component.html b/Phaha_Package/src/app/template-2/home-2/home-slider/home-slider.component.html
new file mode 100644
index 0000000..0a03a22
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/home-2/home-slider/home-slider.component.html
@@ -0,0 +1,11 @@
+<section class="banner-slider">
+    <ngb-carousel class="carousel-fade" [interval]="3000" [pauseOnHover]="true">
+      <ng-template ngbSlide *ngFor="let item of listImageBanner">
+        <div class="picsum-img-wrapper">
+          <a href="{{item.link}}" target="_blank">
+            <img [src]="baseUrl + item.image" class="d-block w-100" alt="...">
+          </a>
+        </div>
+      </ng-template>
+    </ngb-carousel>
+  </section>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/template-2/home-2/home-slider/home-slider.component.scss b/Phaha_Package/src/app/template-2/home-2/home-slider/home-slider.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/Phaha_Package/src/app/template-2/home-2/home-slider/home-slider.component.ts b/Phaha_Package/src/app/template-2/home-2/home-slider/home-slider.component.ts
new file mode 100644
index 0000000..e87fea1
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/home-2/home-slider/home-slider.component.ts
@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+import { HomeV2Service } from '../home-v2.service';
+import { environment } from 'src/environments/environment';
+
+@Component({
+  selector: 'app-home-slider',
+  templateUrl: './home-slider.component.html',
+  styleUrls: ['./home-slider.component.scss']
+})
+export class HomeSliderComponent implements OnInit {
+  
+  listImageBanner: any = [];
+  baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+
+  constructor(
+    private _homeV2Service: HomeV2Service,
+    ) {
+
+     }
+
+  
+  getImageBanner() {
+    this._homeV2Service.getImageBanner()
+      .subscribe(data => {
+        this.listImageBanner = data.data;
+      });
+  }
+
+  ngOnInit(): void {
+    this.getImageBanner();
+  }
+
+}
diff --git a/Phaha_Package/src/app/template-2/home-2/home-v2.component.html b/Phaha_Package/src/app/template-2/home-2/home-v2.component.html
new file mode 100644
index 0000000..c2d9538
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/home-2/home-v2.component.html
@@ -0,0 +1,28 @@
+<block-ui>
+  <app-home-slider></app-home-slider>
+  <div class="container-fluid">
+    <div id="tabs-login" class="mt-4" *ngIf="isLogin">
+      <div class="remove-border">
+        <div class="">
+          <ul ngbNav #nav="ngbNav" [activeId]="active" class="nav-pills" style="margin-bottom: -10px;">
+            <li ngbNavItem [ngbNavItem]="1">
+              <a (click)="onActiveNavs(1)" ngbNavLink>{{'home.package-purchased' | translate}}</a>
+              <ng-template ngbNavContent>
+                <app-my-package (onActiveNavs)="onActiveNavs($event)" [isHome]="true"></app-my-package>
+              </ng-template>
+            </li>
+          </ul>
+          <div [ngbNavOutlet]="nav"></div>
+        </div>
+      </div>
+    </div>
+    <app-package-news-hot></app-package-news-hot>
+    <app-package-news-of-categories></app-package-news-of-categories>
+    <app-home-tabs></app-home-tabs>
+    <!-- <app-product-service></app-product-service> -->
+    <!-- <app-home-book-license></app-home-book-license> -->
+    <app-event-news-item></app-event-news-item>
+    <!-- <app-prf-introduce></app-prf-introduce> -->
+    <app-home-partner-intro></app-home-partner-intro>
+  </div>
+</block-ui>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/template-2/home-2/home-v2.component.scss b/Phaha_Package/src/app/template-2/home-2/home-v2.component.scss
new file mode 100644
index 0000000..123bb47
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/home-2/home-v2.component.scss
@@ -0,0 +1,27 @@
+@import "~swiper/css";
+@import "~swiper/css/pagination";
+@import "~swiper/css/navigation";
+
+#tabs-login {
+    .nav-pills .nav-link.active {
+        background-color: #fcaf17;
+        color: #ffff !important;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .nav-link {
+        font-size: 16px !important;
+        color: #222 !important;
+        text-transform: uppercase;
+        font-weight: 600;
+    }
+
+    .remove-border {
+        border: none !important;
+    }
+
+    .nav-pills {
+        border-bottom: 2px solid #fcaf17;
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/template-2/home-2/home-v2.component.ts b/Phaha_Package/src/app/template-2/home-2/home-v2.component.ts
new file mode 100644
index 0000000..e815013
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/home-2/home-v2.component.ts
@@ -0,0 +1,94 @@
+import { Component, OnInit } from '@angular/core';
+import { HomeV2Service } from './home-v2.service';
+import { environment } from 'src/environments/environment';
+import { Router } from '@angular/router';
+import { MyPackageService } from 'src/app/my-package/my-package.service';
+
+@Component({
+  selector: 'app-home-v2',
+  templateUrl: './home-v2.component.html',
+  styleUrls: ['./home-v2.component.scss']
+})
+export class HomeV2Component implements OnInit {
+  lstCarousel = [1, 2, 3];
+  
+  baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  isLogin: boolean = false;
+  currentUser: any = {};
+  active: any;
+  showHomeTab: boolean = false;
+  idTab: number = 1;
+  checkMobile: boolean = false;
+  idTabChild: number = 1;
+  idOpenTabChild: number = 1;
+  idShowConnect: number = 0;
+  totalListByType: any = [];
+
+  constructor(
+    private _router: Router,
+    private _myPackage: MyPackageService,
+  ) {
+    this.currentUser = JSON.parse(localStorage.getItem("currentCustomer") ?? "{}");
+    if (typeof (this.currentUser) === 'object' && this.currentUser.jwtToken) {
+      this.isLogin = true;
+    }
+    if (!this.currentUser.fullName) {
+      this.showHomeTab = false;
+      this.isLogin = false;
+    }
+
+    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+      this.checkMobile = true;
+    } else {
+      this.checkMobile = false;
+    }
+  }
+
+
+  onRedirectLink(link: any) {
+    this._router.navigate([`${link}`]).then();
+  }
+
+  onActiveNavs(item: any) {
+    if (typeof item === 'object') {
+      this.active = item.nextId;
+    }
+    if (typeof item === 'number') {
+      this.active = item;
+    }
+    if (item.idTabChild) {
+      this.idTabChild = item.idTabChild;
+    }
+    this.idShowConnect = item.idTabChild;
+    if (this.active === 2) {
+      this.showHomeTab = true;
+      setTimeout(() => {
+        window.scrollTo(0, 1500);
+      }, 500);
+    } else {
+      this.showHomeTab = false;
+    }
+  }
+
+  pressBuyNews() {
+    this.showHomeTab = true;
+  }
+
+  onGetListTotalByType() {
+    this._myPackage.getListTotalByType()
+      .subscribe(data => {
+        this.totalListByType = data.data
+      });
+  }
+
+  ngOnInit(): void {
+    this.onGetListTotalByType();
+    if (this.totalListByType.totalAuthor > 0 || this.totalListByType.totalCategory > 0 || this.totalListByType.totalEvent > 0 || this.totalListByType.totalPdf > 0) {
+      this.idTab = 2;
+      this.onActiveNavs({ nextId: this.idTab, idTabChild: this.idOpenTabChild });
+    } else {
+      this.showHomeTab = false;
+    }
+  }
+}
+
diff --git a/Phaha_Package/src/app/template-2/home-2/home-v2.module.ts b/Phaha_Package/src/app/template-2/home-2/home-v2.module.ts
new file mode 100644
index 0000000..c99643b
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/home-2/home-v2.module.ts
@@ -0,0 +1,73 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HomeV2Component } from './home-v2.component';
+import { NgbModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { BrowserModule } from '@angular/platform-browser';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { BlockUIModule } from 'ng-block-ui';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { PackageHotModule } from 'src/app/package/package-hot/package-hot.module';
+import { MyPackageModule } from 'src/app/my-package/my-package.module';
+import { ProductServiceModule } from 'src/app/product-service/product-service.module';
+import { EventNewsModule } from 'src/app/event-news/event-news.module';
+import { HomeTabsModule } from 'src/app/home/home-tabs/home-tabs.module';
+import { HomeBookLicenseModule } from 'src/app/home/home-book-license/home-book-license.module';
+import { PageNewsPrfeditorialPrfauthorModule } from 'src/app/page-news-prfeditorial-prfauthor/page-news-prfeditorial-prfauthor.module';
+import { HomePartnerIntroModule } from 'src/app/home/home-partner-intro/home-partner-intro.module';
+import { HomeSliderComponent } from './home-slider/home-slider.component';
+import { PackageNewsHotComponent } from './package-news-hot/package-news-hot.component';
+import { SwiperModule } from 'swiper/angular';
+import { PackageNewsHotItemComponent } from './package-news-hot/package-news-hot-item/package-news-hot-item.component';
+import { LoginModule } from 'src/app/login/login.module';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { PrfIntroduceModule } from 'src/app/home/prf-introduce/prf-introduce.module';
+import { PackageNewsOfCategoryModule } from '../package-news/package-news-of-category/package-news-of-category.module';
+import { PackageNewsOfCategoriesModule } from '../package-news/package-news-of-categories/package-news-of-categories.module';
+import { PackagesModule } from 'src/app/modules/packages/packages.module';
+
+
+
+@NgModule({
+  declarations: [
+    HomeV2Component, 
+    HomeSliderComponent, 
+    PackageNewsHotComponent, 
+    PackageNewsHotItemComponent
+  ],
+  imports: [
+    CommonModule,
+    NgbNavModule,
+    BrowserModule,
+    PackagesModule,
+    HttpClientModule,
+    FormsModule,
+    NgbModule,
+    RouterModule,
+    BlockUIModule.forRoot(),
+    SwiperModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    }),
+    NgSelectModule,
+    PackageHotModule,
+    MyPackageModule,
+    ProductServiceModule,
+    EventNewsModule,
+    HomeTabsModule,
+    HomeBookLicenseModule,
+    PageNewsPrfeditorialPrfauthorModule,
+    LoginModule,
+    HomePartnerIntroModule,
+    PrfIntroduceModule,
+    PackageNewsOfCategoryModule,
+    PackageNewsOfCategoriesModule
+  ]
+})
+export class HomeV2Module { }
diff --git a/Phaha_Package/src/app/template-2/home-2/home-v2.service.ts b/Phaha_Package/src/app/template-2/home-2/home-v2.service.ts
new file mode 100644
index 0000000..627e4d4
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/home-2/home-v2.service.ts
@@ -0,0 +1,28 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HomeV2Service {
+
+  constructor(
+    private readonly _httpClient: HttpClient,
+  ) { }
+
+  getImageBanner() {
+    return this._httpClient.get<any>(`/advertisement/list?locationShow=slide`);
+  }
+
+  getPartner() {
+    return this._httpClient.get<any>(`/editorial-office/list`);
+  }
+
+  getListHotPackage() {
+    return this._httpClient.get<any>(`/package/hot`);
+  }
+
+  getListPackageNewsHot() {
+    return this._httpClient.get<any>(`/package-news/hot`);
+  }
+}
diff --git a/Phaha_Package/src/app/template-2/home-2/package-news-hot/package-news-hot-item/package-news-hot-item.component.html b/Phaha_Package/src/app/template-2/home-2/package-news-hot/package-news-hot-item/package-news-hot-item.component.html
new file mode 100644
index 0000000..ceb23bb
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/home-2/package-news-hot/package-news-hot-item/package-news-hot-item.component.html
@@ -0,0 +1,10 @@
+<div class="package-new-item">
+    <div class="package-new-item__img">
+        <a [href]="item.isVnE ? '/tap-chi-kinh-te-viet-nam/detail/' + item.id : '/chi-tiet/' + item.id">
+            <img class="img-response" [src]="apiUrl + item.image" (error)="errorHandler($event)">
+        </a>
+    </div>
+    <h3 class="package-new-item__title">
+        <a [href]="item.isVnE ? '/tap-chi-kinh-te-viet-nam/detail/' + item.id : '/chi-tiet/' + item.id">{{item.title}}</a>
+    </h3>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/template-2/home-2/package-news-hot/package-news-hot-item/package-news-hot-item.component.scss b/Phaha_Package/src/app/template-2/home-2/package-news-hot/package-news-hot-item/package-news-hot-item.component.scss
new file mode 100644
index 0000000..67e786b
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/home-2/package-news-hot/package-news-hot-item/package-news-hot-item.component.scss
@@ -0,0 +1,43 @@
+app-package-news-hot-item {
+    .package-new-item {
+        position: relative;
+        transition: transform 0.6s;
+
+        &:hover{
+            box-shadow: 0px 0px 10px #ddd;
+        }
+
+        .package-new-item__img {
+            img {
+                width: 100%;
+            }
+        }
+
+        .package-new-item__title {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            text-align: center;
+            margin: 0;
+            background: #fcaf17c9;
+            display: none;
+            padding: 10px 0;
+            transition: display 0.6s;
+
+            a {
+                text-decoration: none;
+                color: #fff;
+                line-height: 20px;
+                font-size: 16px;
+            }
+        }
+
+        &:hover {
+            transform: scale(1.03);
+            .package-new-item__title {
+                display: block;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/template-2/home-2/package-news-hot/package-news-hot-item/package-news-hot-item.component.ts b/Phaha_Package/src/app/template-2/home-2/package-news-hot/package-news-hot-item/package-news-hot-item.component.ts
new file mode 100644
index 0000000..ce8311a
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/home-2/package-news-hot/package-news-hot-item/package-news-hot-item.component.ts
@@ -0,0 +1,47 @@
+import { Component, Input, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Router } from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { LoginComponent } from 'src/app/login/login.component';
+import { environment } from 'src/environments/environment';
+
+@Component({
+  selector: 'app-package-news-hot-item',
+  templateUrl: './package-news-hot-item.component.html',
+  styleUrls: ['./package-news-hot-item.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class PackageNewsHotItemComponent implements OnInit {
+
+  @Input() item: any = {};
+  currentUser: any = {};
+  isLogin: boolean = false;
+  apiUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  lang: any;
+
+  constructor(
+    private _router: Router,
+    private _modalService: NgbModal,
+  ) {
+    this.lang = localStorage.getItem("lang");
+    this.currentUser = JSON.parse(localStorage.getItem("currentCustomer") ?? "{}");
+    if (typeof (this.currentUser) === 'object' && this.currentUser.jwtToken) {
+      this.isLogin = true;
+    };
+  }
+
+  errorHandler(event: any) {
+    event.target.src = "/assets/images/package/package-default.png";
+  }
+
+  onRedirectPayLink(a: any) {
+    if (this.isLogin) {
+      this._router.navigate(['package-pay', a.id])
+    } else {
+      this._modalService.open(LoginComponent, { size: "md", centered: true });
+    }
+  }
+
+  ngOnInit(): void {
+  }
+}
+
diff --git a/Phaha_Package/src/app/template-2/home-2/package-news-hot/package-news-hot.component.html b/Phaha_Package/src/app/template-2/home-2/package-news-hot/package-news-hot.component.html
new file mode 100644
index 0000000..3dbbc74
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/home-2/package-news-hot/package-news-hot.component.html
@@ -0,0 +1,14 @@
+<div class="card mt-4" style="background: white !important;">
+  <div class="card-header">
+    <a [href]="'an-pham'" class="card-title">{{'package-new-hot' | translate}}</a>
+  </div>
+  <div class="card-body">
+    <swiper [slidesPerView]="1" [spaceBetween]="30" [slidesPerGroup]="1" [loop]="false" [loopFillGroupWithBlank]="true"
+      [pagination]="false" [navigation]="true" class="mySwiper" [breakpoints]="breakpoints"
+      containerModifierClass="cus">
+      <ng-template swiperSlide *ngFor="let item of lstPackageNewHot; let index = index">
+        <app-package-news-hot-item [item]="item"></app-package-news-hot-item>
+      </ng-template>
+    </swiper>
+  </div>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/template-2/home-2/package-news-hot/package-news-hot.component.scss b/Phaha_Package/src/app/template-2/home-2/package-news-hot/package-news-hot.component.scss
new file mode 100644
index 0000000..4a8c353
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/home-2/package-news-hot/package-news-hot.component.scss
@@ -0,0 +1,33 @@
+
+
+.cusinitialized {
+    padding: 16px 40px !important;
+
+    .swiper-button-next,
+    .swiper-button-prev {
+        padding: 40px 18px;
+        background: #fcaf1720;
+        color: #fff;
+
+        &:hover {
+            background: #fcaf1780;
+            color: #fff;
+        }
+
+        &:after {
+            font-size: 20px;
+        }
+    }
+
+    .swiper-button-prev {
+        left: 0;
+        border-top-left-radius: 5px;
+        border-bottom-left-radius: 5px;
+    }
+
+    .swiper-button-next {
+        right: 0;
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/template-2/home-2/package-news-hot/package-news-hot.component.ts b/Phaha_Package/src/app/template-2/home-2/package-news-hot/package-news-hot.component.ts
new file mode 100644
index 0000000..fb6913f
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/home-2/package-news-hot/package-news-hot.component.ts
@@ -0,0 +1,43 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { HomeV2Service } from '../home-v2.service';
+
+@Component({
+  selector: 'app-package-news-hot',
+  templateUrl: './package-news-hot.component.html',
+  styleUrls: ['./package-news-hot.component.scss', '../home-v2.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class PackageNewsHotComponent implements OnInit {
+
+  lstPackageNewHot: any = [];
+  breakpoints = {
+    '640': {
+      slidesPerView: 1
+    },
+    '768': {
+      slidesPerView: 2
+    },
+    '1024': {
+      slidesPerView: 4
+    },
+    '1366': {
+      slidesPerView: 5
+    }
+  };
+
+  constructor(
+    private _packageService: HomeV2Service,
+  ) { }
+
+  ngOnInit(): void {
+    this.getListPackageNewsHot();
+  }
+
+  getListPackageNewsHot(): void {
+    this._packageService.getListPackageNewsHot()
+      .subscribe(res => {
+        this.lstPackageNewHot = res.data;
+      });
+  }
+}
+
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-detail/package-news-detail.component.html b/Phaha_Package/src/app/template-2/package-news/package-news-detail/package-news-detail.component.html
new file mode 100644
index 0000000..bd6d47b
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-detail/package-news-detail.component.html
@@ -0,0 +1,66 @@
+<div class="container-fluid">
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="/">Trang chủ</a></li>
+            <li class="breadcrumb-item"><a href="/an-pham">Ấn phẩm</a></li>
+            <li class="breadcrumb-item active" aria-current="page">{{detail.title}}</li>
+        </ol>
+    </nav>
+
+    <div class="card" style="background: white !important;">
+        <div class="card-body">
+            <div class="row package-news-detail">
+                <div class="col-lg-3 col-md-3 col-sm-6 col-12 mb-3">
+                    <div class="package-news-detail__image">
+                        <img [src]="apiUrl + detail.image" class="img-response">
+                    </div>
+                </div>
+                <div class="col-lg-3 col-md-3 col-sm-6 col-12 mb-3">
+                    <div class="package-news-detail__info">
+                        <h3 class="package-news-detail__title mb-3">
+                            <span>{{detail.title}}</span>
+                        </h3>
+                        <p><i class="uil uil-calendar-alt"></i> {{detail.strDateCreate}}</p>
+                        <p class="link-editor">
+                            <i class="uil uil-user-square"></i>
+                            <a href="/{{detail.editorialOffice?.slug}}">
+                                {{detail.editorialOffice?.name}}
+                            </a>
+                        </p>
+                        <p *ngIf="!detail.isBuy"><i class="uil uil-eye"></i> <a
+                                (click)="getViewTrialPdf(detail)">{{'cta.preview' | translate}}</a></p>
+                        <a *ngIf="!detail.isBuy" href="package-pay/{{newId}}/2" class="btn btn-primary btn-register-now"
+                            type="button">
+                            <i class="uil uil-shopping-cart"></i> {{'cta.register' | translate}}</a>
+                        <a *ngIf="detail.isBuy" href="view/{{newId}}" class="btn btn-primary btn-register-now"
+                            type="button">
+                            <i class="uil uil-eye"></i> {{'cta.read' | translate}}</a>
+                    </div>
+                </div>
+                <div class="col-lg-3 col-md-3 col-sm-6 col-12 mb-3" *ngIf="!detail.isBuy">
+                    <div class="lst-package">
+                        <header class="header-register-more">Đăng ký để đọc</header>
+                        <ng-container *ngFor="let item of packages">
+                            <a href="/package-pay/{{item.id}}" class="btn btn-primary" type="button">
+                                <i class="uil uil-shopping-cart"></i> {{item.name}}</a>
+                        </ng-container>
+                    </div>
+                </div>
+                <div class="col-lg-3 col-md-3 col-sm-6 col-12 mb-3" *ngIf="!detail.isBuy">
+                    <div class="ql-container ql-snow" style="border-width: 0;">
+                        <div class="ql-editor" [innerHTML]="detail.description"></div>
+                    </div>
+                </div>
+                <div class="col-lg-6 col-md-6 col-sm-12 col-12 mb-3" *ngIf="detail.isBuy">
+                    <div class="ql-container ql-snow" style="border-width: 0;">
+                        <div class="ql-editor" [innerHTML]="detail.description"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <app-package-news-of-offices *ngIf="detail.editorial" [newId]="newId" [id]="detail.editorial.id">
+    </app-package-news-of-offices>
+    <app-package-news-related *ngIf="detail.cateIds" [cateids]="detail.cateIds"></app-package-news-related>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-detail/package-news-detail.component.scss b/Phaha_Package/src/app/template-2/package-news/package-news-detail/package-news-detail.component.scss
new file mode 100644
index 0000000..d482895
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-detail/package-news-detail.component.scss
@@ -0,0 +1,118 @@
+.package-news-detail {
+    padding-top: 20px;
+    padding-bottom: 20px;
+
+    .package-news-detail__image {
+
+        text-align: center;
+
+        img {
+
+            box-shadow: 0px 0 10px #000;
+            width: 350px;
+            max-width: 100%;
+            border-radius: 5px;
+
+        }
+    }
+
+    .package-news-detail__info {
+        .package-news-detail__title {
+            span {
+                border-bottom: 1px solid #ccc;
+                padding: 5px 0;
+                font-size: 20px;
+                font-weight: bold;
+                display: inline-block;
+            }
+        }
+
+        p {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+
+            &>i {
+                width: 40px;
+                height: 40px;
+                border-radius: 50%;
+                border: 1px solid #e09500;
+                text-align: center;
+                line-height: 38px;
+                font-size: 18px;
+                color: #e09500;
+            }
+        }
+
+        .btn-register-now {
+            background: #fcaf17;
+            border: none;
+            padding: 2px 40px;
+            font-weight: 600;
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            font-size: 20px;
+            justify-content: center;
+
+            i {
+                font-size: 30px;
+            }
+        }
+    }
+
+    .lst-package {
+
+        display: flex;
+        flex-direction: column;
+        height: 89%;
+        justify-content: center;
+        text-align: center;
+
+        .header-register-more {
+            font-size: 26px;
+            padding: 6px 0;
+            margin-bottom: 20px;
+            border-bottom: 1px solid #ccc;
+        }
+
+        a[type="button"] {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 10px;
+            font-size: 18px;
+            background: #fcaf17;
+            border: none;
+            border-radius: 50px;
+            margin-bottom: 16px;
+            padding: 8px 0;
+
+            i {
+                font-size: 24px;
+            }
+        }
+    }
+
+    .link-editor a{
+        text-decoration: none;
+        color: #fcaf17;
+        font-weight: bold;
+    }
+}
+
+.breadcrumb {
+    padding: 10px;
+    padding-left: 20px;
+
+    li {
+        font-size: 16px;
+    }
+
+    a {
+        font-size: 16px;
+        text-decoration: none;
+        color: #fcaf17;
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-detail/package-news-detail.component.ts b/Phaha_Package/src/app/template-2/package-news/package-news-detail/package-news-detail.component.ts
new file mode 100644
index 0000000..ff744e7
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-detail/package-news-detail.component.ts
@@ -0,0 +1,77 @@
+import { Component, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { PackageNewsDetailService } from './package-news-detail.service';
+import { environment } from 'src/environments/environment';
+import { AuthenticationService } from 'src/app/auth/service/authentication.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { LoginComponent } from 'src/app/login/login.component';
+
+@Component({
+  selector: 'app-package-news-detail',
+  templateUrl: './package-news-detail.component.html',
+  styleUrls: ['./package-news-detail.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class PackageNewsDetailComponent implements OnInit {
+
+  newId = null;
+  detail: any = {};
+  packages: any = [];
+  apiUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  isLogin: boolean = false;
+  currentUser: any = {};
+  fileName: any;
+
+  constructor(
+    private readonly _activatedRoute: ActivatedRoute,
+    private readonly _packageNewsDetailService: PackageNewsDetailService,
+    private readonly _authenticationService: AuthenticationService,
+    private readonly _router: Router,
+    private readonly _modalService: NgbModal,
+  ) {
+    this._activatedRoute.params.subscribe(params => {
+      this.newId = params['id'];
+    });
+    this.currentUser = this._authenticationService.currentUserValue;
+    if (this.currentUser && this.currentUser.jwtToken) this.isLogin = true;
+  }
+
+  getDetail() {
+    this._packageNewsDetailService.getPackageNewsDetail(this.newId)
+      .subscribe(res => {
+        this.detail = res.data;
+      });
+  }
+
+  getPackagesOfNew() {
+    this._packageNewsDetailService.getPackagesOfNew(this.newId)
+      .subscribe(res => {
+        this.packages = res.data;
+      })
+  }
+
+  getViewTrialPdf(e: any) {
+    if (this.isLogin) {
+      if (e.path && e.path.length > 0) {
+        this.fileName = e.path[0].path.replace(/^.*[\\\/]/, '');
+        this.fileName = this.fileName.replace('.pdf', '')
+        this._router.navigate(['view-trial', e.id], {
+          queryParams: {
+            id: e.path[0].id,
+            fileName: this.fileName
+          }
+        })
+      } else {
+        this._router.navigate(['view-trial', e.id])
+      }
+    } else {
+      this._modalService.open(LoginComponent, { size: "md", centered: true });
+    }
+  }
+
+  ngOnInit(): void {
+    this.getDetail();
+    this.getPackagesOfNew();
+  }
+
+}
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-detail/package-news-detail.module.ts b/Phaha_Package/src/app/template-2/package-news/package-news-detail/package-news-detail.module.ts
new file mode 100644
index 0000000..081be76
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-detail/package-news-detail.module.ts
@@ -0,0 +1,47 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PackageNewsDetailComponent } from './package-news-detail.component';
+import { NgbModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { BrowserModule } from '@angular/platform-browser';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { BlockUIModule } from 'ng-block-ui';
+import { SwiperModule } from 'swiper/angular';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { PackageNewsOfOfficesModule } from '../package-news-of-offices/package-news-of-offices.module';
+import { PackageNewsRelatedComponent } from './package-news-related/package-news-related.component';
+import { PackageNewsItemModule } from '../package-news-item/package-news-item.module';
+import { LoginModule } from 'src/app/login/login.module';
+
+
+
+@NgModule({
+  declarations: [
+    PackageNewsDetailComponent,
+    PackageNewsRelatedComponent
+  ],
+  imports: [
+    CommonModule,
+    NgbNavModule,
+    BrowserModule,
+    HttpClientModule,
+    FormsModule,
+    NgbModule,
+    RouterModule,
+    BlockUIModule.forRoot(),
+    SwiperModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    }),
+    PackageNewsItemModule,
+    PackageNewsOfOfficesModule,
+    LoginModule
+  ]
+})
+export class PackageNewsDetailModule { }
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-detail/package-news-detail.service.ts b/Phaha_Package/src/app/template-2/package-news/package-news-detail/package-news-detail.service.ts
new file mode 100644
index 0000000..7932882
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-detail/package-news-detail.service.ts
@@ -0,0 +1,21 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PackageNewsDetailService {
+
+  constructor(
+    private readonly _httpClient: HttpClient
+  ) { }
+
+
+  getPackageNewsDetail(id: any) {
+    return this._httpClient.get<any>(`/package-news/detail/${id}`);
+  }
+
+  getPackagesOfNew(id: any){
+    return this._httpClient.get<any>(`/package-news/packages-of-new/${id}`);
+  }
+}
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-detail/package-news-related/package-news-related.component.html b/Phaha_Package/src/app/template-2/package-news/package-news-detail/package-news-related/package-news-related.component.html
new file mode 100644
index 0000000..d4e3145
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-detail/package-news-related/package-news-related.component.html
@@ -0,0 +1,16 @@
+<div class="card mt-3">
+    <div class="card-header">
+        <div class="card-title">Nội dung liên quan</div>
+    </div>
+    <div class="card-body">
+        <div class="row custom-col">
+            <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6 mb-4" *ngFor="let item of packagenews.result">
+                <app-package-news-item [item]="item"></app-package-news-item>
+            </div>
+        </div>
+        <ngb-pagination class="pagination-rounded custom-pagination" [collectionSize]="packagenews.totalItemCount"
+            [(page)]="packagenews.page" [maxSize]="3" (pageChange)="onPaginate($event)" [rotate]="true"
+            [pageSize]="packagenews.pageSize">
+        </ngb-pagination>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-detail/package-news-related/package-news-related.component.scss b/Phaha_Package/src/app/template-2/package-news/package-news-detail/package-news-related/package-news-related.component.scss
new file mode 100644
index 0000000..665d5e1
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-detail/package-news-related/package-news-related.component.scss
@@ -0,0 +1,8 @@
+@media (min-width: 992px) {
+    .custom-col {
+        .col-lg-2 {
+            flex: 0 0 auto;
+            width: 12.5%;
+        }
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-detail/package-news-related/package-news-related.component.ts b/Phaha_Package/src/app/template-2/package-news/package-news-detail/package-news-related/package-news-related.component.ts
new file mode 100644
index 0000000..126fee4
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-detail/package-news-related/package-news-related.component.ts
@@ -0,0 +1,42 @@
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { PackageNewsRelatedService } from './package-news-related.service';
+import { PageModel } from 'src/app/Models/model';
+
+@Component({
+  selector: 'app-package-news-related',
+  templateUrl: './package-news-related.component.html',
+  styleUrls: ['./package-news-related.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class PackageNewsRelatedComponent implements OnInit {
+
+  @Input() cateids = null;
+  packagenews: PageModel = new PageModel();
+
+  constructor(
+    private readonly _packageNewsRelatedService: PackageNewsRelatedService
+  ) {
+    this.packagenews.pageSize = 8;
+   }
+
+
+  getPackageNewsRelated() {
+    this._packageNewsRelatedService.getPackageNewsRelated(this.cateids, this.packagenews)
+      .subscribe(res => {
+        this.packagenews.result = res.data.result;
+        this.packagenews.pageNumber = res.data.pageNumber;
+        this.packagenews.totalItemCount = res.data.totalItemCount;
+        this.packagenews.pageCount = res.data.pageCount;
+      })
+  }
+
+  onPaginate(e: any) {
+    this.packagenews.page = e;
+    this.getPackageNewsRelated();
+  }
+
+  ngOnInit(): void {
+    this.getPackageNewsRelated();
+  }
+
+}
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-detail/package-news-related/package-news-related.service.ts b/Phaha_Package/src/app/template-2/package-news/package-news-detail/package-news-related/package-news-related.service.ts
new file mode 100644
index 0000000..26252f2
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-detail/package-news-related/package-news-related.service.ts
@@ -0,0 +1,26 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PackageNewsRelatedService {
+
+  constructor(
+    private readonly _httpClient: HttpClient
+  ) { }
+
+  getPackageNewsRelated(cateids: any, model: any) {
+    let params = new HttpParams();
+    params = params.append('cateids', `${JSON.stringify(cateids)}`);
+
+    const names = Object.keys(model);
+    names.forEach(name => {
+      if (model[name]) {
+        params = params.append(name, `${model[name]}`);
+      }
+    });
+
+    return this._httpClient.get<any>(`/package-news/package-news-related`, {params});
+  }
+}
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-item/package-news-item.component.html b/Phaha_Package/src/app/template-2/package-news/package-news-item/package-news-item.component.html
new file mode 100644
index 0000000..ceb23bb
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-item/package-news-item.component.html
@@ -0,0 +1,10 @@
+<div class="package-new-item">
+    <div class="package-new-item__img">
+        <a [href]="item.isVnE ? '/tap-chi-kinh-te-viet-nam/detail/' + item.id : '/chi-tiet/' + item.id">
+            <img class="img-response" [src]="apiUrl + item.image" (error)="errorHandler($event)">
+        </a>
+    </div>
+    <h3 class="package-new-item__title">
+        <a [href]="item.isVnE ? '/tap-chi-kinh-te-viet-nam/detail/' + item.id : '/chi-tiet/' + item.id">{{item.title}}</a>
+    </h3>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-item/package-news-item.component.scss b/Phaha_Package/src/app/template-2/package-news/package-news-item/package-news-item.component.scss
new file mode 100644
index 0000000..cd58cf5
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-item/package-news-item.component.scss
@@ -0,0 +1,42 @@
+    .package-new-item {
+        position: relative;
+        transition: transform 0.6s;
+
+        &:hover {
+            box-shadow: 0px 0px 10px #ddd;
+        }
+
+        .package-new-item__img {
+            img {
+                width: 100%;
+            }
+        }
+
+        .package-new-item__title {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            text-align: center;
+            margin: 0;
+            background: #fcaf17c9;
+            display: none;
+            padding: 10px 0;
+            transition: display 0.6s;
+
+            a {
+                text-decoration: none;
+                color: #fff;
+                line-height: 20px;
+                font-size: 16px;
+            }
+        }
+
+        &:hover {
+            transform: scale(1.03);
+
+            .package-new-item__title {
+                display: block;
+            }
+        }
+    }
\ No newline at end of file
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-item/package-news-item.component.ts b/Phaha_Package/src/app/template-2/package-news/package-news-item/package-news-item.component.ts
new file mode 100644
index 0000000..e85cd4b
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-item/package-news-item.component.ts
@@ -0,0 +1,53 @@
+import { Component, Input, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Router } from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { environment } from 'src/environments/environment';
+
+@Component({
+  selector: 'app-package-news-item',
+  templateUrl: './package-news-item.component.html',
+  styleUrls: ['./package-news-item.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class PackageNewsItemComponent implements OnInit {
+
+  @Input() item: any = {};
+  currentUser: any = {};
+  isLogin: boolean = false;
+  apiUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  @ViewChild('LoginModal') templateRef: TemplateRef<NgbModal> | undefined;
+  lang: any;
+
+  constructor(
+    private readonly _router: Router,
+    private readonly _modalService: NgbModal,
+  ) {
+    this.lang = localStorage.getItem("lang");
+    this.currentUser = JSON.parse(localStorage.getItem("currentCustomer") ?? "{}");
+    if (typeof (this.currentUser) === 'object' && this.currentUser.jwtToken) {
+      this.isLogin = true;
+    };
+  }
+
+  errorHandler(event: any) {
+    event.target.src = "/assets/images/package/package-default.png";
+  }
+
+  onRedirectPayLink(a: any) {
+    if (this.isLogin) {
+      this._router.navigate(['package-pay', a.id])
+    } else {
+      this.openModalWithSize(this.templateRef);
+    }
+  }
+
+  openModalWithSize(content?: TemplateRef<NgbModal>) {
+    this._modalService.open(content, { size: "md", centered: true });
+  }
+
+  ngOnInit(): void {
+  }
+}
+
+
+
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-item/package-news-item.module.ts b/Phaha_Package/src/app/template-2/package-news/package-news-item/package-news-item.module.ts
new file mode 100644
index 0000000..cb4818c
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-item/package-news-item.module.ts
@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PackageNewsItemComponent } from './package-news-item.component';
+import { NgbModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { BrowserModule } from '@angular/platform-browser';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+
+
+@NgModule({
+  declarations: [PackageNewsItemComponent],
+  imports: [
+    CommonModule,
+    NgbNavModule,
+    BrowserModule,
+    HttpClientModule,
+    FormsModule,
+    NgbModule,
+    RouterModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    })
+  ],
+  exports: [PackageNewsItemComponent]
+})
+export class PackageNewsItemModule { }
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-item/package-news-item.service.ts b/Phaha_Package/src/app/template-2/package-news/package-news-item/package-news-item.service.ts
new file mode 100644
index 0000000..af11c12
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-item/package-news-item.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PackageNewsItemService {
+
+  constructor() { }
+}
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-of-categories/package-news-of-categories.component.html b/Phaha_Package/src/app/template-2/package-news/package-news-of-categories/package-news-of-categories.component.html
new file mode 100644
index 0000000..d7434d3
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-of-categories/package-news-of-categories.component.html
@@ -0,0 +1,46 @@
+<div class="box-catalog">
+    <a href="/an-pham">Ấn phẩm</a>
+    <div class="box-search">
+        <ng-select placeholder="Chọn nhà xuất bản" [(ngModel)]="officeIds" [multiple]="true" bindLabel="text"
+            bindValue="value" [items]="offices" (change)="getPackageNewsByCate()">
+        </ng-select>
+        <ng-select placeholder="Chọn chuyên mục" [(ngModel)]="cateIds" [multiple]="true" bindLabel="name" bindValue="id"
+            [items]="categoriesListItem" (change)="getCategories()">
+        </ng-select>
+    </div>
+</div>
+
+<ng-container *ngFor="let item of categories; let i = index;">
+    <div class="card mt-4" *ngIf="item.news">
+        <div class="card-header">
+            <a class="card-title">{{item.name}}</a>
+            <a class="view-more" href="/an-pham/{{item.id}}">Hiển thị tất cả <i class="uil uil-angle-double-right"></i></a>
+        </div>
+        <div class="card-body">
+            <swiper [slidesPerView]="1" [spaceBetween]="30" [slidesPerGroup]="1" [loop]="false"
+                [loopFillGroupWithBlank]="true" [pagination]="false" [navigation]="true" [breakpoints]="breakpoints"
+                containerModifierClass="cus">
+                <ng-template swiperSlide *ngFor="let newItem of item.news.result; let index = index">
+                    <app-package-news-item [item]="newItem"></app-package-news-item>
+                </ng-template>
+            </swiper>
+        </div>
+    </div>
+    <div *ngIf="i == 1">
+        <div class="card mt-4">
+            <div class="card-header">
+                <a class="card-title">Danh mục</a>
+            </div>
+            <div class="card-body list-cate">
+                <ul>
+                    <li *ngFor="let cate of categoriesListItem">
+                        <a href="/an-pham/{{cate.id}}" [title]="cate.name">
+                            <img [src]="apiUrl + cate.image" (error)="errorHandler($event)" width="25">
+                            {{cate.name}}
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</ng-container>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-of-categories/package-news-of-categories.component.scss b/Phaha_Package/src/app/template-2/package-news/package-news-of-categories/package-news-of-categories.component.scss
new file mode 100644
index 0000000..469b7f9
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-of-categories/package-news-of-categories.component.scss
@@ -0,0 +1,38 @@
+@import "~@ng-select/ng-select/themes/default.theme.css";
+@import "~swiper/css";
+@import "~swiper/css/pagination";
+@import "~swiper/css/navigation";
+
+.list-cate {
+
+    background: white;
+
+    ul {
+
+        padding: 0;
+        margin: 0;
+        list-style: none;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        justify-content: flex-start;
+
+        li {
+            width: 250px;
+
+            a {
+                display: flex;
+                align-items: center;
+                gap: 10px;
+                text-decoration: none;
+                color: #222;
+                font-weight: 600;
+
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-of-categories/package-news-of-categories.component.ts b/Phaha_Package/src/app/template-2/package-news/package-news-of-categories/package-news-of-categories.component.ts
new file mode 100644
index 0000000..d232df3
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-of-categories/package-news-of-categories.component.ts
@@ -0,0 +1,75 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { PackageNewsOfCategoriesService } from './package-news-of-categories.service';
+import { environment } from 'src/environments/environment';
+
+@Component({
+  selector: 'app-package-news-of-categories',
+  templateUrl: './package-news-of-categories.component.html',
+  styleUrls: ['./package-news-of-categories.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class PackageNewsOfCategoriesComponent implements OnInit {
+
+  breakpoints = {
+    '640': {
+      slidesPerView: 1
+    },
+    '768': {
+      slidesPerView: 3
+    },
+    '1024': {
+      slidesPerView: 5
+    },
+    '1366': {
+      slidesPerView: 7
+    }
+  };
+  categoriesListItem: any = [];
+  categories: any = [];
+  offices: any = [];
+  cateIds: any = [];
+  officeIds: any = [];
+  apiUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+
+  constructor(
+    private readonly _packageNewsOfCategoriesService: PackageNewsOfCategoriesService
+  ) { }
+
+
+  getCategories() {
+    this._packageNewsOfCategoriesService.getCategories(this.cateIds)
+      .subscribe(res => {
+        this.categories = res.data;
+        if (this.categoriesListItem.length == 0)
+          this.categoriesListItem = res.data;
+
+        this.getPackageNewsByCate();
+      });
+  }
+
+  getPackageNewsByCate() {
+    this.categories.forEach((category: any) => {
+      this._packageNewsOfCategoriesService.getListPackageNewsByCate(this.officeIds, category.id)
+        .subscribe(res => {
+          category.news = res.data;
+        });
+    });
+  }
+
+  getOffices() {
+    this._packageNewsOfCategoriesService.getOffices()
+      .subscribe(res => {
+        this.offices = res.data;
+      })
+  }
+
+  errorHandler(event: any) {
+    event.target.src = "/assets/images/package/list-icon-default.png";
+  }
+
+  ngOnInit(): void {
+    this.getCategories();
+    this.getOffices();
+  }
+
+}
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-of-categories/package-news-of-categories.module.ts b/Phaha_Package/src/app/template-2/package-news/package-news-of-categories/package-news-of-categories.module.ts
new file mode 100644
index 0000000..7aef783
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-of-categories/package-news-of-categories.module.ts
@@ -0,0 +1,46 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PackageNewsOfCategoriesComponent } from './package-news-of-categories.component';
+import { NgbModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { BlockUIModule } from 'ng-block-ui';
+import { SwiperModule } from 'swiper/angular';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { PackageNewsItemModule } from '../package-news-item/package-news-item.module';
+import { BrowserModule } from '@angular/platform-browser';
+import { PackagesModule } from 'src/app/modules/packages/packages.module';
+
+
+
+@NgModule({
+  declarations: [
+    PackageNewsOfCategoriesComponent
+  ],
+  imports: [
+    CommonModule,
+    NgbNavModule,
+    BrowserModule,
+    PackagesModule,
+    HttpClientModule,
+    FormsModule,
+    NgbModule,
+    RouterModule,
+    BlockUIModule.forRoot(),
+    SwiperModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    }),
+    NgSelectModule,
+    PackageNewsItemModule
+  ],
+  exports: [PackageNewsOfCategoriesComponent]
+})
+export class PackageNewsOfCategoriesModule { }
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-of-categories/package-news-of-categories.service.ts b/Phaha_Package/src/app/template-2/package-news/package-news-of-categories/package-news-of-categories.service.ts
new file mode 100644
index 0000000..3965dd6
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-of-categories/package-news-of-categories.service.ts
@@ -0,0 +1,29 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PackageNewsOfCategoriesService {
+
+  constructor(
+    private readonly _httpClient: HttpClient
+  ) { }
+
+  getCategories(cateIds: any) {
+    let params = new HttpParams();
+    params = params.append('cateIds', `${JSON.stringify(cateIds)}`);
+    return this._httpClient.get<any>(`/package-news/categories`, {params});
+  }
+
+  getListPackageNewsByCate(officeIds: any, cateid: number) {
+    let params = new HttpParams();
+    params = params.append('officeIds', `${JSON.stringify(officeIds)}`);
+    params = params.append('cateid', `${cateid}`);
+    return this._httpClient.get<any>(`/package-news/new-of-category`, {params});
+  }
+
+  getOffices() {
+    return this._httpClient.get<any>(`/package-news/offices`);
+  }
+}
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-of-category/package-news-of-category.component.html b/Phaha_Package/src/app/template-2/package-news/package-news-of-category/package-news-of-category.component.html
new file mode 100644
index 0000000..c63a379
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-of-category/package-news-of-category.component.html
@@ -0,0 +1,17 @@
+<div class="box-catalog mb-4">
+    <a href="/an-pham">{{categoryDetail.name}}</a>
+    <div class="box-search">
+        <ng-select placeholder="Chọn nhà xuất bản" [(ngModel)]="officeIds" [multiple]="true"
+            bindLabel="text" bindValue="value" [items]="offices" (change)="getPackageNewsByCate()">
+        </ng-select>
+    </div>
+</div>
+<div class="row custom-col">
+    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6 mb-4" *ngFor="let item of newsOfCate.result">
+        <app-package-news-item [item]="item"></app-package-news-item>
+    </div>
+</div>
+<ngb-pagination class="pagination-rounded custom-pagination" [collectionSize]="newsOfCate.totalItemCount"
+    [(page)]="newsOfCate.page" [maxSize]="3" (pageChange)="onPaginate($event)" [rotate]="true"
+    [pageSize]="newsOfCate.pageSize">
+</ngb-pagination>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-of-category/package-news-of-category.component.scss b/Phaha_Package/src/app/template-2/package-news/package-news-of-category/package-news-of-category.component.scss
new file mode 100644
index 0000000..bd7fcaf
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-of-category/package-news-of-category.component.scss
@@ -0,0 +1,12 @@
+@import "~@ng-select/ng-select/themes/default.theme.css";
+
+
+
+@media (min-width: 992px) {
+    .custom-col {
+        .col-lg-2 {
+            flex: 0 0 auto;
+            width: 12.5%;
+        }
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-of-category/package-news-of-category.component.ts b/Phaha_Package/src/app/template-2/package-news/package-news-of-category/package-news-of-category.component.ts
new file mode 100644
index 0000000..623c8f4
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-of-category/package-news-of-category.component.ts
@@ -0,0 +1,82 @@
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { PackageNewsOfCategoryService } from './package-news-of-category.service';
+import { ActivatedRoute } from '@angular/router';
+import { PageModel } from 'src/app/Models/model';
+
+@Component({
+  selector: 'app-package-news-of-category',
+  templateUrl: './package-news-of-category.component.html',
+  styleUrls: ['./package-news-of-category.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class PackageNewsOfCategoryComponent implements OnInit {
+
+  @Input() cateId: any;
+  newsOfCate: PageModel = new PageModel();
+  categoryDetail: any = {};
+  categories: any = [];
+  offices: any = [];
+  cateIds: any = [];
+  officeIds: any = [];
+  categoriesListItem: any = [];
+
+  constructor(
+    private readonly _activatedRoute: ActivatedRoute,
+    private readonly _packageNewsOfCategoryService: PackageNewsOfCategoryService
+  ) {
+    this._activatedRoute.params.subscribe(params => {
+      this.cateId = params['cateId'];
+    });
+
+    this.newsOfCate.pageSize = 16;
+  }
+
+  getPackageNewsByCate() {
+    this._packageNewsOfCategoryService
+      .getNewsByCate(this.newsOfCate, this.cateId, this.officeIds)
+      .subscribe(res => {
+        this.newsOfCate.result = res.data.result;
+        this.newsOfCate.pageNumber = res.data.pageNumber;
+        this.newsOfCate.totalItemCount = res.data.totalItemCount;
+        this.newsOfCate.pageCount = res.data.pageCount;
+      });
+  }
+
+  onPaginate(e: any) {
+    this.newsOfCate.page = e;
+    this.getPackageNewsByCate();
+  }
+
+  getCategoryDetail() {
+    this._packageNewsOfCategoryService.getCategoryDetail(this.cateId)
+      .subscribe(res => {
+        this.categoryDetail = res.data;
+      })
+  }
+
+  getCategories() {
+    this._packageNewsOfCategoryService.getCategories(this.cateIds)
+      .subscribe(res => {
+        this.categories = res.data;
+        if (this.categoriesListItem.length == 0)
+          this.categoriesListItem = res.data;
+
+        this.getPackageNewsByCate();
+      });
+  }
+
+  getOffices() {
+    this._packageNewsOfCategoryService.getOffices()
+      .subscribe(res => {
+        this.offices = res.data;
+      })
+  }
+
+  ngOnInit(): void {
+    this.getPackageNewsByCate();
+    this.getOffices();
+    this.getCategoryDetail();
+  }
+
+}
+
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-of-category/package-news-of-category.module.ts b/Phaha_Package/src/app/template-2/package-news/package-news-of-category/package-news-of-category.module.ts
new file mode 100644
index 0000000..6e98bba
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-of-category/package-news-of-category.module.ts
@@ -0,0 +1,44 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PackageNewsOfCategoryComponent } from './package-news-of-category.component';
+import { NgbModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { BrowserModule } from '@angular/platform-browser';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { BlockUIModule } from 'ng-block-ui';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { SwiperModule } from 'swiper/angular';
+import { PackageNewsItemModule } from '../package-news-item/package-news-item.module';
+import { PackagesModule } from 'src/app/modules/packages/packages.module';
+
+
+
+@NgModule({
+  declarations: [PackageNewsOfCategoryComponent],
+  imports: [
+    CommonModule,
+    NgbNavModule,
+    BrowserModule,
+    PackagesModule,
+    HttpClientModule,
+    FormsModule,
+    NgbModule,
+    RouterModule,
+    BlockUIModule.forRoot(),
+    SwiperModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    }),
+    NgSelectModule,
+    PackageNewsItemModule
+  ],
+  exports: [PackageNewsOfCategoryComponent]
+})
+export class PackageNewsOfCategoryModule { }
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-of-category/package-news-of-category.service.ts b/Phaha_Package/src/app/template-2/package-news/package-news-of-category/package-news-of-category.service.ts
new file mode 100644
index 0000000..0db04e0
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-of-category/package-news-of-category.service.ts
@@ -0,0 +1,44 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PackageNewsOfCategoryService {
+
+  constructor(
+    private readonly _httpClient: HttpClient
+  ) { }
+
+  getNewsByCate(model: any, cateId: any, officeIds: any) {
+
+    let params = new HttpParams();
+    const names = Object.keys(model);
+    names.forEach(name => {
+      if (model[name]) {
+        params = params.append(name, `${model[name]}`);
+      }
+    });
+
+    if (cateId)
+      params = params.append('cateId', `${cateId}`);
+    if (officeIds)
+      params = params.append('officeIds', `${JSON.stringify(officeIds)}`);
+
+    return this._httpClient.get<any>(`/package-news/new-of-category`, { params });
+  }
+
+  getCategoryDetail(cateid: any) {
+    return this._httpClient.get<any>(`/package-news/category-detail/${cateid}`);
+  }
+
+  getCategories(cateIds: any) {
+    let params = new HttpParams();
+    params = params.append('cateIds', `${JSON.stringify(cateIds)}`);
+    return this._httpClient.get<any>(`/package-news/categories`, { params });
+  }
+
+  getOffices() {
+    return this._httpClient.get<any>(`/package-news/offices`);
+  }
+}
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-of-offices/package-news-of-offices.component.html b/Phaha_Package/src/app/template-2/package-news/package-news-of-offices/package-news-of-offices.component.html
new file mode 100644
index 0000000..ea336f2
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-of-offices/package-news-of-offices.component.html
@@ -0,0 +1,16 @@
+<div class="card">
+    <div class="card-header">
+        <a class="card-title">Các bản phát hành mới nhất của {{editorialOffice.name}}</a>
+        <a class="view-more" href="/{{editorialOffice.slug}}">Hiển thị tất cả <i class="uil uil-angle-double-right"></i></a>
+    </div>
+
+    <div class="card-body">
+        <swiper [slidesPerView]="1" [spaceBetween]="30" [slidesPerGroup]="1" [loop]="false"
+            [loopFillGroupWithBlank]="true" [pagination]="false" [navigation]="true" [breakpoints]="breakpoints"
+            containerModifierClass="cus">
+            <ng-template swiperSlide *ngFor="let item of packageNews; let index = index">
+                <app-package-news-item [item]="item"></app-package-news-item>
+            </ng-template>
+        </swiper>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-of-offices/package-news-of-offices.component.scss b/Phaha_Package/src/app/template-2/package-news/package-news-of-offices/package-news-of-offices.component.scss
new file mode 100644
index 0000000..922e889
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-of-offices/package-news-of-offices.component.scss
@@ -0,0 +1,38 @@
+@import "~@ng-select/ng-select/themes/default.theme.css";
+@import "~swiper/css";
+@import "~swiper/css/pagination";
+@import "~swiper/css/navigation";
+
+
+
+.cusinitialized {
+    padding: 16px 40px !important;
+
+    .swiper-button-next,
+    .swiper-button-prev {
+        padding: 40px 18px;
+        background: #fcaf1720;
+        color: #fff;
+
+        &:hover {
+            background: #fcaf1780;
+            color: #fff;
+        }
+
+        &:after {
+            font-size: 20px;
+        }
+    }
+
+    .swiper-button-prev {
+        left: 0;
+        border-top-left-radius: 5px;
+        border-bottom-left-radius: 5px;
+    }
+
+    .swiper-button-next {
+        right: 0;
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+    }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-of-offices/package-news-of-offices.component.ts b/Phaha_Package/src/app/template-2/package-news/package-news-of-offices/package-news-of-offices.component.ts
new file mode 100644
index 0000000..756a465
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-of-offices/package-news-of-offices.component.ts
@@ -0,0 +1,47 @@
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { PackageNewsOfOfficesService } from './package-news-of-offices.service';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-package-news-of-offices',
+  templateUrl: './package-news-of-offices.component.html',
+  styleUrls: ['./package-news-of-offices.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class PackageNewsOfOfficesComponent implements OnInit {
+
+  @Input() editorialOffice: any;
+  @Input() newId: any;
+  packageNews: any = [];
+  breakpoints = {
+    '640': {
+      slidesPerView: 1
+    },
+    '768': {
+      slidesPerView: 2
+    },
+    '1024': {
+      slidesPerView: 4
+    },
+    '1366': {
+      slidesPerView: 6
+    }
+  };
+
+  constructor(
+    private readonly _packageNewsOfOfficesService: PackageNewsOfOfficesService
+  ) { 
+  }
+
+
+  getNewsOfOffice() {
+    this._packageNewsOfOfficesService.getNewsOfOffice(this.editorialOffice?.id, this.newId)
+      .subscribe(res => {
+        this.packageNews = res.data;
+      })
+  }
+
+  ngOnInit(): void {
+    this.getNewsOfOffice();
+  }
+}
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-of-offices/package-news-of-offices.module.ts b/Phaha_Package/src/app/template-2/package-news/package-news-of-offices/package-news-of-offices.module.ts
new file mode 100644
index 0000000..d315d26
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-of-offices/package-news-of-offices.module.ts
@@ -0,0 +1,44 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PackageNewsOfOfficesComponent } from './package-news-of-offices.component';
+import { NgbModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { BrowserModule } from '@angular/platform-browser';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import { PackageNewsItemModule } from '../package-news-item/package-news-item.module';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { SwiperModule } from 'swiper/angular';
+import { BlockUIModule } from 'ng-block-ui';
+import { RouterModule } from '@angular/router';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { PackagesModule } from 'src/app/modules/packages/packages.module';
+
+
+
+@NgModule({
+  declarations: [PackageNewsOfOfficesComponent],
+  imports: [
+    CommonModule,
+    NgbNavModule,
+    BrowserModule,
+    HttpClientModule,
+    FormsModule,
+    NgbModule,
+    RouterModule,
+    BlockUIModule.forRoot(),
+    SwiperModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    }),
+    NgSelectModule,
+    PackagesModule,
+    PackageNewsItemModule
+  ],
+  exports: [PackageNewsOfOfficesComponent]
+})
+export class PackageNewsOfOfficesModule { }
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news-of-offices/package-news-of-offices.service.ts b/Phaha_Package/src/app/template-2/package-news/package-news-of-offices/package-news-of-offices.service.ts
new file mode 100644
index 0000000..bd23670
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news-of-offices/package-news-of-offices.service.ts
@@ -0,0 +1,21 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PackageNewsOfOfficesService {
+
+  constructor(
+    private readonly _httpClient: HttpClient
+  ) { }
+
+  getNewsOfOffice(officeId: any, id: any) {
+    let params = new HttpParams();
+    if (id)
+      params = params.append(`id`, `${id}`);
+    params = params.append(`officeId`, `${officeId}`);
+
+    return this._httpClient.get<any>(`/package-news/news-of-office/${officeId}`, { params });
+  }
+}
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news.component.html b/Phaha_Package/src/app/template-2/package-news/package-news.component.html
new file mode 100644
index 0000000..0724ed8
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news.component.html
@@ -0,0 +1,6 @@
+<div class="card">
+    <div class="card-body">
+        <app-package-news-of-category [cateId]="cateId" *ngIf="cateId"></app-package-news-of-category>
+        <app-package-news-of-categories *ngIf="!cateId"></app-package-news-of-categories>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news.component.scss b/Phaha_Package/src/app/template-2/package-news/package-news.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news.component.ts b/Phaha_Package/src/app/template-2/package-news/package-news.component.ts
new file mode 100644
index 0000000..e88113f
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news.component.ts
@@ -0,0 +1,27 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { HomeV2Service } from '../home-2/home-v2.service';
+import { PageModel } from 'src/app/Models/model';
+import { PackageNewsService } from './package-news.service';
+
+@Component({
+  selector: 'app-package-news',
+  templateUrl: './package-news.component.html',
+  styleUrls: ['./package-news.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class PackageNewsComponent implements OnInit {
+  cateId = null;
+
+  constructor(
+    private readonly _activatedRoute: ActivatedRoute,
+  ) {
+    this._activatedRoute.params.subscribe(params => {
+      this.cateId = params['cateId'];
+    });
+  }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news.module.ts b/Phaha_Package/src/app/template-2/package-news/package-news.module.ts
new file mode 100644
index 0000000..7b3ec89
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news.module.ts
@@ -0,0 +1,43 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PackageNewsComponent } from './package-news.component';
+import { NgbModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { BrowserModule } from '@angular/platform-browser';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { BlockUIModule } from 'ng-block-ui';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { PackageNewsItemModule } from './package-news-item/package-news-item.module';
+import { PackageNewsOfCategoryModule } from './package-news-of-category/package-news-of-category.module';
+import { PackageNewsOfCategoriesModule } from './package-news-of-categories/package-news-of-categories.module';
+
+
+
+@NgModule({
+  declarations: [PackageNewsComponent],
+  imports: [
+    CommonModule,
+    NgbModule,
+    NgbNavModule,
+    BrowserModule,
+    HttpClientModule,
+    FormsModule,
+    RouterModule,
+    BlockUIModule.forRoot(),
+    NgSelectModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http, '../../../assets/i18n', '.json'); },
+        deps: [HttpClient]
+      }
+    }),
+    PackageNewsItemModule,
+    PackageNewsOfCategoryModule,
+    PackageNewsOfCategoriesModule
+  ]
+})
+export class PackageNewsModule { }
diff --git a/Phaha_Package/src/app/template-2/package-news/package-news.service.ts b/Phaha_Package/src/app/template-2/package-news/package-news.service.ts
new file mode 100644
index 0000000..1a10be8
--- /dev/null
+++ b/Phaha_Package/src/app/template-2/package-news/package-news.service.ts
@@ -0,0 +1,15 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable, Input } from '@angular/core';
+import { PageModel } from 'src/app/Models/model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PackageNewsService {
+
+
+  constructor(
+    private readonly _httpClient: HttpClient,
+  ) { }
+
+}
diff --git a/Phaha_Package/src/app/translate/translate.module.ts b/Phaha_Package/src/app/translate/translate.module.ts
new file mode 100644
index 0000000..655ab52
--- /dev/null
+++ b/Phaha_Package/src/app/translate/translate.module.ts
@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClientModule, HttpClient } from '@angular/common/http';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    HttpClientModule,
+    TranslateModule.forRoot({
+      defaultLanguage: 'vi',
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient],
+      },
+    }),
+  ],
+  exports: [TranslateModule],
+})
+export class NgxTranslateModule { }
\ No newline at end of file
diff --git a/Phaha_Package/src/app/view-book/extended-pdf/extended-pdf.component.html b/Phaha_Package/src/app/view-book/extended-pdf/extended-pdf.component.html
new file mode 100644
index 0000000..46144b4
--- /dev/null
+++ b/Phaha_Package/src/app/view-book/extended-pdf/extended-pdf.component.html
@@ -0,0 +1,11 @@
+<!-- <ngx-extended-pdf-viewer [(src)]="baseUrl + pathPdf" [useBrowserLocale]="true"
+                         [height]="'calc(100vh - 1px)'" [pageViewMode]="checkMobile ? 'multiple' : 'book'"
+                         [showBorders]="false"
+                         [zoom]="'page-fit'" [showOpenFileButton]="false" [mobileFriendlyZoom]="'120%'"
+                         [zoomLevels]="zoomLevels">
+</ngx-extended-pdf-viewer> -->
+
+<block-ui></block-ui>
+<ngx-extended-pdf-viewer [height]="'calc(100vh - 1px)'" [src]="base64" [useBrowserLocale]="true" [authorization]="'Bearer ' + currentUser.jwtToken"
+    (pagesLoaded)="onPagesLoaded()" (pdfLoadingFailed)="onPdfLoadingFailed()" [sidebarVisible]="checkMobile ? false : true">
+</ngx-extended-pdf-viewer>
diff --git a/Phaha_Package/src/app/view-book/extended-pdf/extended-pdf.component.scss b/Phaha_Package/src/app/view-book/extended-pdf/extended-pdf.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/Phaha_Package/src/app/view-book/extended-pdf/extended-pdf.component.ts b/Phaha_Package/src/app/view-book/extended-pdf/extended-pdf.component.ts
new file mode 100644
index 0000000..4da7fd4
--- /dev/null
+++ b/Phaha_Package/src/app/view-book/extended-pdf/extended-pdf.component.ts
@@ -0,0 +1,58 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { environment } from "../../../environments/environment";
+import { ActivatedRoute, Router } from "@angular/router";
+import { ViewBookService } from "../view-book.service";
+import { Meta, Title } from "@angular/platform-browser";
+import { PdfDocumentInfo, PdfDocumentPropertiesExtractor } from 'ngx-extended-pdf-viewer';
+import { BlockUI, NgBlockUI } from 'ng-block-ui';
+
+@Component({
+  selector: 'app-extended-pdf',
+  templateUrl: './extended-pdf.component.html',
+  styleUrls: ['./extended-pdf.component.scss']
+})
+export class ExtendedPdfComponent implements OnInit {
+  @BlockUI() blockUI: NgBlockUI | undefined;
+  @Input() base64: any;
+  public baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  public zoomLevels = ['page-fit'];
+  public checkMobile: boolean = false;
+  public id: number = 0;
+  public fileInfo: PdfDocumentInfo;
+  currentUser: any = {};
+
+  constructor(
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
+    private _viewBookService: ViewBookService,
+  ) {
+    this.currentUser = JSON.parse(localStorage.getItem("currentCustomer") ?? "{}");
+    this.activatedRoute.params.subscribe((params) => {
+      this.id = params['id'];
+    });
+    this.fileInfo = {};
+  }
+
+  onPagesLoaded() {
+    new PdfDocumentPropertiesExtractor()
+      .getDocumentProperties()
+      .then((result) => {
+        this.fileInfo = result;
+      })
+      .finally(() => {
+        this.blockUI?.stop();
+      });
+  }
+
+  onPdfLoadingFailed() {
+    this.blockUI?.stop();
+  }
+
+  ngOnInit(): void {
+    this.checkMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent
+    );
+    this.blockUI?.start('Tải dữ liệu...');
+  }
+
+}
diff --git a/Phaha_Package/src/app/view-book/view-book.component.html b/Phaha_Package/src/app/view-book/view-book.component.html
new file mode 100644
index 0000000..93381d5
--- /dev/null
+++ b/Phaha_Package/src/app/view-book/view-book.component.html
@@ -0,0 +1,151 @@
+<block-ui></block-ui>
+<div style="height: 100vh" class="container-fluid">
+  <ng-container *ngIf="listPathPdf.length > 0">
+    <div class="row box-view-newpaper">
+      <div [ngClass]="toggleShow ? (checkMobile ? 'col-mobile' : 'col-2') : 'hidden'" class=" left-full">
+        <button type="button" (click)="toggleShow = !toggleShow;" class="btn-close-toggle">
+          <i class="uil uil-times-circle"></i>
+        </button>
+        <!-- <button type="button" [ngClass]="!toggleShow ? 'btn-hidden' : ''" class="btn-toggle-news-info " (click)="toggleShow = !toggleShow;">
+          <i class="uil uil-arrows-h-alt"></i>
+        </button> -->
+        <nav aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a routerLink="/">{{'breadcrumb.home' | translate}}</a></li>
+            <li class="breadcrumb-item"><a routerLink="/">{{'breadcrumb.license-newspaper' | translate}}</a></li>
+            <li class="breadcrumb-item active" aria-current="page">{{'breadcrumb.read-newspaper' | translate}}</li>
+          </ol>
+        </nav>
+        <div class="left-info">
+          <div class="info-news-group">
+            <div class="info-news" style="text-transform: uppercase;">
+              <span>{{newspaper.editorialName}}</span>
+            </div>
+            <div class="info-news">
+              <span>{{newspaper.title}}</span>
+            </div>
+            <div class="info-news" *ngIf="newspaper.promotionPrice">
+              <label>{{'view-book.price-sale' | translate}}</label><span>{{newspaper.promotionPrice | number :
+                '0.0-0'}}&nbsp;VNĐ</span>
+            </div>
+            <div *ngIf="newspaper.editorialOfficeId != 35">
+              <span>{{'view-book.view' | translate}}<b>{{newspaper.view}}</b></span>
+            </div>
+          </div>
+          <div class="audio-news" *ngIf="!isTrial && newspaper.audioDataBase64.path">
+            <div plyr plyrTitle="Audio" plyrType="audio" [plyrOptions]="audioOption" [plyrSources]="audioSources">
+            </div>
+          </div>
+          <div class="list-file">
+            <h3>{{'view-book.content' | translate}}</h3>
+            <ul>
+              <li *ngIf="isTrial">
+                <a [ngClass]="'active-path'">
+                  {{'view-book.preview' | translate}}
+                </a>
+              </li>
+              <ng-container *ngFor="let item of listPathPdf; let i = index;">
+                <li *ngIf="isTrial">
+                  <a (click)="onCheckLogin();">{{'view-book.part' | translate}} {{i + 1}}</a>
+                </li>
+                <li *ngIf="!isTrial">
+                  <a (click)="changePathPdf(item, i)" [ngClass]="item.id == pathId ? 'active-path' : ''">
+                    <img *ngIf="item.pathImage" [src]="baseUrl + item.pathImage" width="80">
+                    <p>{{'view-book.part' | translate}} {{i + 1}}</p>
+                  </a>
+                </li>
+              </ng-container>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div [ngClass]="(toggleShow && !checkMobile) ? 'col-10' : 'col-12'"
+        style="padding-left: 0; padding-right: 0; position: relative;" class="swipe" (swipe)="onSwipe($event)">
+        <ngx-extended-pdf-viewer [height]="'calc(100vh - 1px)'" [mobileFriendlyZoom]="!checkMobile ? 'true': 'false'" [src]="baseUrl + pathPdf"
+          [authorization]="'Bearer ' + currentUser.jwtToken" [useBrowserLocale]="true" [customToolbar]="multiToolbar"
+          (pdfLoadingStarts)="pdfLoadingStarts()" (pagesLoaded)="onPagesLoaded()"
+          (pdfLoadingFailed)="onPdfLoadingFailed()" [sidebarVisible]="false">
+        </ngx-extended-pdf-viewer>
+        <ng-template #multiToolbar>
+          <div id="toolbarViewer">
+            <div id="toolbarViewerLeft">
+              <button type="button" id="toggleSidebar" (click)="toggleShow = !toggleShow;">
+                <i class="uil uil-align"></i>
+              </button>
+            </div>
+            <div id="toolbarViewerRight">
+              <div class="page-current">{{'view-book.part' | translate}} {{currentIndex + 1}}/{{listPathPdf.length}}
+              </div>
+              <button type="button" id="pdfDownload" (click)="downloadFile()" *ngIf="newspaper.allowDownload">
+                <i class="uil uil-file-download"></i>
+              </button>
+            </div>
+            <pdf-zoom-toolbar></pdf-zoom-toolbar>
+          </div>
+        </ng-template>
+        <div class="view-book-actions" [ngClass]="{'view-book-actions__mobiles': checkMobile}" *ngIf="isTrial == false">
+          <button [disabled]="currentIndex - 1 < 0" type="button" (click)="onNextPrev(currentIndex - 1)">
+            <i class="uil uil-angle-double-left"></i>
+          </button>
+          <button [disabled]="currentIndex + 1 >= listPathPdf.length" type="button"
+            (click)="onNextPrev(currentIndex + 1)">
+            <i class="uil uil-angle-double-right"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+  <div *ngIf="listPathPdf.length < 1" class="container">
+    <div class="newspaper-wrapper">
+      <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+          <li class="breadcrumb-item"><a routerLink="/">{{'breadcrumb.home' | translate}}</a></li>
+          <li class="breadcrumb-item"><a routerLink="/">{{'breadcrumb.license-newspaper' | translate}}</a>
+          </li>
+          <li class="breadcrumb-item active" aria-current="page">{{'breadcrumb.read-newspaper' | translate}}</li>
+        </ol>
+      </nav>
+      <h3>{{newspaper.title}}</h3>
+      <div class="date-post">{{newspaper.dateCreate | date: "dd/MM/yyyy HH:mm" }}</div>
+      <div class="desc" [innerHTML]="newspaper.description"></div>
+      <div class="audio-news" *ngIf="newspaper.audioDataBase64.path">
+        <div plyr plyrTitle="Audio" plyrType="audio" [plyrOptions]="audioOption" [plyrSources]="audioSources"></div>
+      </div>
+      <div [innerHTML]="newspaper.content"></div>
+    </div>
+  </div>
+</div>
+
+<ng-template #PackageOfNewpaper let-modal>
+  <div class="modal-header">
+    <h4 class="modal-title" id="modalLabel">Danh sách gói</h4>
+    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
+  </div>
+  <div class="modal-body" id="modal-add-edit">
+    <div class="packages-of-newpaper">
+      <table class="table table-striped table-hover">
+        <thead>
+          <tr>
+            <th>Tên gói</th>
+            <th>Giá</th>
+            <th>Thời gian</th>
+            <th style="width: 100px;"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let item of packages">
+            <td>{{item.name}}</td>
+            <td>
+              <span class="promotion-price">{{item.promotionPrice ?? item.price | number}}đ</span>
+              <span class="price" *ngIf="item.promotionPrice">{{item.price | number}}đ</span>
+            </td>
+            <td>{{item.time}}</td>
+            <td>
+              <a type="button" class="btn btn-success" routerLink="/package-pay/{{item.packageId}}">Đăng ký</a>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</ng-template>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/view-book/view-book.component.scss b/Phaha_Package/src/app/view-book/view-book.component.scss
new file mode 100644
index 0000000..fb47d22
--- /dev/null
+++ b/Phaha_Package/src/app/view-book/view-book.component.scss
@@ -0,0 +1,349 @@
+@import "@ng-select/ng-select/themes/default.theme.css";
+
+.breadcrumb {
+  a {
+    text-decoration: none;
+    color: #000;
+  }
+}
+
+.newspaper-wrapper {
+  background-color: #fff;
+  padding: 10px;
+  min-height: 100vh;
+
+  .desc {
+    font-weight: 600;
+    margin-bottom: 10px;
+  }
+
+  .date-post {
+    color: #6c757d;
+    margin-bottom: 4px;
+    font-size: 12px;
+  }
+}
+
+.box-view-newpaper {
+  .breadcrumb {
+    margin-top: 13px;
+    padding: 0 16px;
+
+    a {
+      text-decoration: none;
+      color: #000;
+    }
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  .list-file {
+    overflow: auto;
+    max-height: 82vh;
+    overflow-x: hidden;
+
+    h3 {
+      font-size: 16px;
+      font-weight: bold;
+      padding: 10px;
+      margin: 0;
+      text-transform: uppercase;
+    }
+
+    ul {
+      list-style: none;
+      padding-left: 0;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-around;
+
+      li {
+        width: 45%;
+        text-align: center;
+
+        a {
+          p {
+            margin: 0;
+            margin-top: 5px;
+          }
+        }
+      }
+    }
+
+    li a {
+      text-decoration: none;
+      font-size: 14px;
+      cursor: pointer;
+      padding: 10px;
+      display: block;
+      color: #222;
+
+      &:hover {
+        background: rgba(252, 175, 23, 0.5) !important;
+      }
+    }
+
+    li a.active-path {
+      background: #fcaf17 !important;
+      color: #fff;
+    }
+  }
+
+  .info-news {
+    margin-bottom: 4px;
+
+    label {
+      font-size: 14px;
+    }
+
+    span {
+      font-size: 16px;
+      font-weight: 600;
+    }
+  }
+
+  .left-full {
+    background: #fff;
+    padding-right: 0;
+    padding-left: 0;
+    position: relative;
+
+    .btn-toggle-news-info {
+      border: none;
+      padding: 2px 10px;
+      position: absolute;
+      top: 2px;
+      right: 2px;
+      z-index: 10000;
+      border-radius: 5px;
+      opacity: 0.6;
+      background: #e09500;
+
+      i {
+        color: #fff;
+        font-size: 20px;
+      }
+
+      &.btn-hidden {
+        padding: 1px 10px;
+        top: 68px;
+        right: -50px;
+
+        i {
+          font-size: 26px;
+        }
+      }
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
+    &.col-mobile {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 1000;
+      height: 100vh;
+      width: 80%;
+    }
+  }
+
+  .info-news-group {
+    padding: 24px 16px;
+    border-bottom: 1px solid #f2f2f2;
+  }
+
+  .btn-buy-news {
+    border-radius: 5px;
+    background: #ffe7b8;
+    color: #6c757d;
+    padding: 4px 20px;
+    width: 45%;
+    font-size: 14px;
+  }
+
+  .btn-buy-news:hover {
+    background: #e09500;
+    color: #ffffff;
+  }
+
+  .btn-buy-package {
+    background: #fcaf17;
+    border-radius: 5px;
+    color: #ffffff;
+    display: block;
+    width: 100%;
+    font-size: 20px;
+    font-weight: 600;
+    padding: 15px 0;
+    text-transform: uppercase;
+  }
+
+  .btn-buy-package:hover {
+    background: #e09500;
+    color: #ffffff;
+  }
+
+  .group-button {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .price {
+    text-decoration: line-through;
+  }
+
+  .promotion {
+    font-size: 12px !important;
+    width: 35px;
+    height: 20px;
+    padding: 2px 4px;
+    vertical-align: middle;
+    border-radius: 8px 0 9px;
+    background-color: #fcdfd7;
+    color: #f1592b;
+    vertical-align: 4px;
+    margin-left: 20px;
+  }
+
+  .hidden {
+    width: 0;
+
+    nav[aria-label="breadcrumb"],
+    .left-info {
+      display: none;
+    }
+  }
+}
+
+.audio-news {
+  .plyr--audio .plyr__controls {
+    background: #f4f4f4;
+  }
+}
+
+ngx-extended-pdf-viewer .spread .page,
+ngx-extended-pdf-viewer .pdfViewer.scrollHorizontal .page,
+ngx-extended-pdf-viewer .pdfViewer.scrollWrapped .page {
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+ngx-extended-pdf-viewer .pdfViewer .page {
+  border-left: none;
+  border-right: none;
+}
+
+.packages-of-newpaper {
+  .promotion-price {
+    font-size: 16px;
+    font-weight: 600;
+    margin-right: 10px;
+  }
+
+  .price {
+    text-decoration: line-through;
+    color: #808285;
+  }
+}
+
+.view-book-actions {
+  position: absolute;
+  bottom: 20px;
+  left: 0px;
+  z-index: 100;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 20px;
+  height: 50px;
+
+  button {
+    padding: 0px 24px;
+    height: 40px;
+    border: none;
+    margin: 0 5px;
+    border-radius: 5px;
+    background: rgb(0 0 0 / 50%);
+
+    i {
+      font-size: 26px;
+      color: #fff;
+    }
+
+    &:hover {
+      background: rgb(0 0 0 / 80%);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.2;
+    }
+  }
+}
+
+.view-book-actions__mobiles {
+  justify-content: flex-end !important;
+}
+
+.view-book-actions-top {
+  top: 41px;
+  bottom: auto;
+  display: flex;
+  justify-content: center;
+}
+
+#toggleSidebar {
+  border: none;
+  background: none;
+  margin-top: 2px;
+  margin-left: 5px;
+
+  i {
+    font-size: 26px;
+  }
+}
+
+#pdfDownload {
+  border: none;
+  background: no-repeat;
+  margin-top: 2px;
+
+  i {
+    font-size: 26px;
+  }
+}
+
+.btn-close-toggle {
+  float: right;
+  border: none;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: none;
+  line-height: 36px;
+  margin: 3px;
+
+  i {
+    font-size: 30px;
+    color: #f90;
+  }
+}
+
+#toolbarViewerRight {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.page-current {
+  font-size: 16px;
+  color: #666;
+}
+
+ngx-extended-pdf-viewer .pdfViewer .page {
+  margin-top: 20px !important;
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/app/view-book/view-book.component.ts b/Phaha_Package/src/app/view-book/view-book.component.ts
new file mode 100644
index 0000000..90b82fe
--- /dev/null
+++ b/Phaha_Package/src/app/view-book/view-book.component.ts
@@ -0,0 +1,213 @@
+import { Component, Input, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { DomSanitizer, Meta, Title } from '@angular/platform-browser';
+import { ActivatedRoute, Router } from '@angular/router';
+import { PageViewModeType, PdfDocumentPropertiesExtractor } from 'ngx-extended-pdf-viewer';
+import { environment } from 'src/environments/environment';
+import { ViewBookService } from './view-book.service';
+import { ExtendedPdfComponent } from "./extended-pdf/extended-pdf.component";
+import * as Plyr from "plyr";
+import { fromEvent, Subject, withLatestFrom, zipWith } from 'rxjs';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { BlockUI, NgBlockUI } from 'ng-block-ui';
+import { LoginComponent } from '../login/login.component';
+
+@Component({
+  selector: 'app-view-book',
+  templateUrl: './view-book.component.html',
+  styleUrls: ['./view-book.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class ViewBookComponent implements OnInit {
+  @BlockUI() blockUI: NgBlockUI | undefined;
+  @ViewChild(ExtendedPdfComponent, { static: false }) childC: ExtendedPdfComponent | undefined;
+  public id: number = 0;
+  listPathPdf: any = [];
+  pathPdf: any;
+  pathId: any;
+  fileName: any;
+  public baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  public zoomLevels = ['page-fit'];
+  public checkMobile: boolean = false;
+  public newspaper: any = {
+    content: '',
+    audioDataBase64: {},
+    dateCreate: '',
+    description: '',
+    discountPercent: '',
+    editorialName: '',
+    image: '',
+    title: '',
+    view: 0,
+    pdfDataBase64: []
+  };
+  public toggleShow = true;
+  public audioOption: Plyr.Options = {
+    i18n: {
+      speed: 'Tốc độ',
+      normal: 'Mặc định',
+    }
+  };
+  public audioSources: any = [];
+  public isTrial = true;
+  public pdfBase64: any = null;
+  public base64 = new Subject<string>();
+  public packages: any = [];
+  @ViewChild('PackageOfNewpaper') templatePackage: TemplateRef<NgbModal> | undefined;
+  public currentIndex = 0;
+  currentUser: any = {};
+  isLogin: boolean = false;
+  public zoom = '150%';
+
+  constructor(
+    private readonly _router: Router,
+    private readonly _activatedRoute: ActivatedRoute,
+    private readonly _viewBookService: ViewBookService,
+    private readonly _title: Title,
+    private readonly _httpClient: HttpClient,
+    private readonly _modalService: NgbModal,
+    private readonly _sanitizer: DomSanitizer,
+  ) {
+    this._activatedRoute.params.subscribe((params) => {
+      this.id = params['id'];
+    });
+
+    this.checkMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent
+    );
+    this.currentUser = JSON.parse(localStorage.getItem("currentCustomer") ?? "{}");
+    if (typeof (this.currentUser) === 'object' && this.currentUser.jwtToken) {
+      this.isLogin = true;
+    }
+    if (this.checkMobile)
+      this.toggleShow = false;
+    this.isTrial = this._router.url.startsWith("/view-trial/");
+  }
+
+  onGetNewspaperDetail() {
+    this._viewBookService.onGetNewspaperDetail(this.id, this.isTrial)
+      .subscribe((res) => {
+        this.listPathPdf = this.checkMobile && res.data.pdfMobileDataBase64.length > 0 ?  res.data.pdfMobileDataBase64 : res.data.pdfDataBase64;
+        this.newspaper = res.data;
+        if (this.isTrial) {
+          this.pathPdf = this.newspaper.pdfTrialDataBase64.path;
+          this.pathId = this.newspaper.pdfTrialDataBase64.id;
+        } else {
+          this.pathPdf = this.listPathPdf[0].path;
+          this.pathId = this.listPathPdf[0].id;
+        }
+
+        this.audioSources.push({ src: this.baseUrl + this.newspaper.audioDataBase64.path });
+
+        if (res.data.isAuth == false)
+          this._modalService.open(LoginComponent, { size: "md", centered: true, backdrop: 'static', keyboard: false });
+
+        this._title.setTitle(res.data.title);
+      });
+  }
+
+  openModalWithSize(content?: TemplateRef<NgbModal>, size?: string) {
+    this._modalService.open(content, { size: size ?? "md", centered: true, backdrop: 'static', keyboard: false });
+  }
+
+  changePathPdf(item: any, i: number) {
+    if (this.isLogin && this.pathPdf != item.path) {
+      this.pdfLoadingStarts();
+      this.pathPdf = item.path;
+      this.pathId = item.id;
+      this.currentIndex = i;
+    } else {
+      return
+    }
+  }
+
+  getFileName(path: any) {
+    if (path) {
+      this.fileName = path.replace(/^.*[\\\/]/, '');
+      return this.fileName = this.fileName.replace('.pdf', '');
+    } else {
+      return "";
+    }
+  }
+
+  onToggle() {
+    this.toggleShow = !this.toggleShow;
+  }
+
+  onCheckLogin() {
+    this.currentUser = JSON.parse(localStorage.getItem('currentCustomer') || "{}");
+    if (this.currentUser && this.currentUser.jwtToken) {
+      this._viewBookService.getPackageOfNewpaper(this.id)
+        .subscribe(result => {
+          this.packages = result;
+        });
+
+      this.openModalWithSize(this.templatePackage, 'lg');
+    } else
+      this._modalService.open(LoginComponent, { size: "md", centered: true, backdrop: 'static', keyboard: false });
+  }
+
+  onNextPrev(i: number) {
+    this.pdfLoadingStarts();
+    this.currentIndex = i;
+    this.pathPdf = this.listPathPdf[i].path;
+    this.pathId = this.listPathPdf[i].id;
+  }
+
+  onPagesLoaded() {
+    new PdfDocumentPropertiesExtractor()
+      .getDocumentProperties()
+      .then(() => {
+      })
+      .finally(() => {
+        this.blockUI?.stop();
+      });
+  }
+
+  pdfLoadingStarts() {
+    this.blockUI?.start("Đang tải dữ liệu!...");
+  }
+
+  onPdfLoadingFailed() {
+    this.blockUI?.stop();
+  }
+
+  onSwipe(event: any) {
+    const x = Math.abs(event.deltaX) > 180 ? (event.deltaX > 0 ? "Right" : "Left") : "";
+    if (x == "Right") {
+      if (this.currentIndex - 1 >= 0)
+        this.onNextPrev(this.currentIndex - 1);
+    } else if (x == "Left") {
+      if (this.currentIndex + 1 < this.listPathPdf.length)
+        this.onNextPrev(this.currentIndex + 1);
+    }
+  }
+
+  downloadFile() {
+    const headers = new HttpHeaders().set('authorization', 'Bearer ' + this.currentUser.jwtToken);
+    const arr: any = [...new Set(this.listPathPdf.map((item: { pathOriginal: string; }) => item.pathOriginal))];
+    arr.forEach((path: string) => {
+      const name = path.split('/').pop();
+      if (name) {
+        this._httpClient.get(`${this.baseUrl}${path}`, { headers, responseType: 'blob' as 'json' })
+          .subscribe((res: any) => {
+            let dataType = res.type;
+            let binaryData = [];
+            binaryData.push(res);
+
+            let downloadLink = document.createElement('a');
+            downloadLink.href = window.URL.createObjectURL(new Blob(binaryData, { type: dataType }));
+            downloadLink.setAttribute('download', name);
+            document.body.appendChild(downloadLink);
+            downloadLink.click();
+          }
+          )
+      }
+    });
+  }
+  
+
+  ngOnInit(): void {
+    this.onGetNewspaperDetail();
+  }
+}
diff --git a/Phaha_Package/src/app/view-book/view-book.module.ts b/Phaha_Package/src/app/view-book/view-book.module.ts
new file mode 100644
index 0000000..25d0237
--- /dev/null
+++ b/Phaha_Package/src/app/view-book/view-book.module.ts
@@ -0,0 +1,62 @@
+import { Injectable, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ViewBookComponent } from "./view-book.component";
+import { NgxExtendedPdfViewerModule } from "ngx-extended-pdf-viewer";
+import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
+import { RouterModule } from '@angular/router';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClient } from '@angular/common/http';
+import { NgSelectModule } from "@ng-select/ng-select";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { ExtendedPdfComponent } from './extended-pdf/extended-pdf.component';
+import {BlockUIModule} from "ng-block-ui";
+import {PlyrModule} from "ngx-plyr";
+import { LoginModule } from '../login/login.module';
+import { PdfViewerModule } from 'ng2-pdf-viewer';
+import * as Hammer from 'hammerjs';
+import { BrowserModule, HammerGestureConfig, HammerModule, HAMMER_GESTURE_CONFIG } from "@angular/platform-browser";
+import { ViewTestComponent } from './view-test/view-test.component';
+
+@Injectable()
+export class MyHammerConfig extends HammerGestureConfig {
+  override overrides = <any> {
+    swipe: { direction: Hammer.DIRECTION_ALL },
+  };
+}
+
+@NgModule({
+  declarations: [ViewBookComponent, ExtendedPdfComponent, ViewTestComponent],
+  imports: [
+    BrowserModule,
+    CommonModule,
+    NgbModule,
+    NgxExtendedPdfViewerModule,
+    RouterModule,
+    BlockUIModule.forRoot(),
+    LoginModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => {
+          return new TranslateHttpLoader(http, '../../../assets/i18n', '.json');
+        },
+        deps: [HttpClient]
+      }
+    }),
+    NgSelectModule,
+    FormsModule,
+    ReactiveFormsModule,
+    PlyrModule,
+    PdfViewerModule,
+    HammerModule 
+  ],
+  providers: [
+    {
+      provide: HAMMER_GESTURE_CONFIG,
+      useClass: MyHammerConfig,
+    },
+  ],
+})
+export class ViewBookModule {
+}
diff --git a/Phaha_Package/src/app/view-book/view-book.service.ts b/Phaha_Package/src/app/view-book/view-book.service.ts
new file mode 100644
index 0000000..715f6d4
--- /dev/null
+++ b/Phaha_Package/src/app/view-book/view-book.service.ts
@@ -0,0 +1,24 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ViewBookService {
+
+  constructor(
+    private _client: HttpClient,
+  ) {
+  }
+
+  onGetNewspaperDetail(id: number, isTrial: boolean) {
+    let params = new HttpParams();
+    params = params.append('isTrial', `${isTrial}`);
+
+    return this._client.get<any>(`/newspaper/detail/${id}`, {params})
+  }
+
+  getPackageOfNewpaper(id: number){
+    return this._client.get<any>(`/newspaper/package-of-newpaper/${id}`);
+  }
+}
diff --git a/Phaha_Package/src/app/view-book/view-test/view-test.component.html b/Phaha_Package/src/app/view-book/view-test/view-test.component.html
new file mode 100644
index 0000000..e22e8fb
--- /dev/null
+++ b/Phaha_Package/src/app/view-book/view-test/view-test.component.html
@@ -0,0 +1,149 @@
+<div style="height: 100vh" class="container-fluid">
+    <ng-container *ngIf="listPathPdf.length > 0">
+        <div class="row box-view-newpaper">
+            <div [ngClass]="toggleShow ? (checkMobile ? 'col-mobile' : 'col-2') : 'hidden'" class=" left-full">
+                <button type="button" (click)="toggleShow = !toggleShow;" class="btn-close-toggle">
+                    <i class="uil uil-times-circle"></i>
+                </button>
+                <!-- <button type="button" [ngClass]="!toggleShow ? 'btn-hidden' : ''" class="btn-toggle-news-info " (click)="toggleShow = !toggleShow;">
+            <i class="uil uil-arrows-h-alt"></i>
+          </button> -->
+                <nav aria-label="breadcrumb">
+                    <ol class="breadcrumb">
+                        <li class="breadcrumb-item"><a routerLink="/">{{'breadcrumb.home' | translate}}</a></li>
+                        <li class="breadcrumb-item"><a routerLink="/">{{'breadcrumb.license-newspaper' |
+                                translate}}</a></li>
+                        <li class="breadcrumb-item active" aria-current="page">{{'breadcrumb.read-newspaper' |
+                            translate}}</li>
+                    </ol>
+                </nav>
+                <div class="left-info">
+                    <div class="info-news-group">
+                        <div class="info-news" style="text-transform: uppercase;">
+                            <span>{{newspaper.editorialName}}</span>
+                        </div>
+                        <div class="info-news">
+                            <span>{{newspaper.title}}</span>
+                        </div>
+                        <div class="info-news" *ngIf="newspaper.promotionPrice">
+                            <label>{{'view-book.price-sale' | translate}}</label><span>{{newspaper.promotionPrice |
+                                number :
+                                '0.0-0'}}&nbsp;VNĐ</span>
+                        </div>
+                        <div>
+                            <span>{{'view-book.view' | translate}}<b>{{newspaper.view}}</b></span>
+                        </div>
+                    </div>
+                    <div class="audio-news" *ngIf="newspaper.audioDataBase64.path">
+                        <div plyr plyrTitle="Audio" plyrType="audio" [plyrOptions]="audioOption"
+                            [plyrSources]="audioSources">
+                        </div>
+                    </div>
+                    <div class="list-file">
+                        <h3>{{'view-book.content' | translate}}</h3>
+                        <ul>
+                            <ng-container *ngFor="let item of listPathPdf; let i = index;">
+                                <li>
+                                    <a (click)="changePathPdf(item, i)"
+                                        [ngClass]="item.id == pathId ? 'active-path' : ''">
+                                        <img *ngIf="item.pathImage" [src]="baseUrl + item.pathImage" width="80">
+                                        <p> {{getFileName(item.name)}}</p>
+                                    </a>
+                                </li>
+                            </ng-container>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div [ngClass]="(toggleShow && !checkMobile) ? 'col-10' : 'col-12'"
+                style="padding-left: 0; padding-right: 0; position: relative;" class="swipe" (swipe)="onSwipe($event)">
+                <block-ui>
+                    <ngx-extended-pdf-viewer [height]="checkMobile ?'calc(100vh - 50px)' : 'calc(100vh - 1px)'"
+                        [src]="baseUrl + pathPdf" [useBrowserLocale]="true" [customToolbar]="multiToolbar"
+                        (pdfLoadingStarts)="pdfLoadingStarts()" (pagesLoaded)="onPagesLoaded()"
+                        (pdfLoadingFailed)="onPdfLoadingFailed()" [sidebarVisible]="false">
+                    </ngx-extended-pdf-viewer>
+                    <ng-template #multiToolbar>
+                        <div id="toolbarViewer">
+                            <div id="toolbarViewerLeft">
+                                <button type="button" id="toggleSidebar" (click)="toggleShow = !toggleShow;">
+                                    <i class="uil uil-align"></i>
+                                </button>
+                            </div>
+                            <div id="toolbarViewerRight">
+                                <button type="button" id="pdfDownload" (click)="DownloadFile()">
+                                    <i class="uil uil-file-download"></i>
+                                </button>
+                            </div>
+                            <pdf-zoom-toolbar></pdf-zoom-toolbar>
+                        </div>
+                    </ng-template>
+                    <div class="view-book-actions">
+                        <button [disabled]="currentIndex - 1 < 0" type="button" (click)="onNextPrev(currentIndex - 1)">
+                            <i class="uil uil-angle-double-left"></i>
+                        </button>
+                        <button [disabled]="currentIndex + 1 >= listPathPdf.length" type="button"
+                            (click)="onNextPrev(currentIndex + 1)">
+                            <i class="uil uil-angle-double-down"></i>
+                        </button>
+                        <button [disabled]="currentIndex + 1 >= listPathPdf.length" type="button"
+                            (click)="onNextPrev(currentIndex + 1)">
+                            <i class="uil uil-angle-double-right"></i>
+                        </button>
+                    </div>
+                </block-ui>
+            </div>
+        </div>
+    </ng-container>
+    <div *ngIf="listPathPdf.length < 1" class="container">
+        <div class="newspaper-wrapper">
+            <nav aria-label="breadcrumb">
+                <ol class="breadcrumb">
+                    <li class="breadcrumb-item"><a routerLink="/">{{'breadcrumb.home' | translate}}</a></li>
+                    <li class="breadcrumb-item active" aria-current="page">
+                        {{'breadcrumb.read-newspaper' | translate}}
+                    </li>
+                </ol>
+            </nav>
+            <h3>{{newspaper.title}}</h3>
+            <div class="date-post">{{newspaper.dateCreate | date: "dd/MM/yyyy HH:mm" }}</div>
+            <div class="desc">{{newspaper.description}}</div>
+            <div class="audio-news" *ngIf="newspaper.audioDataBase64.path">
+                <div plyr plyrTitle="Audio" plyrType="audio" [plyrOptions]="audioOption" [plyrSources]="audioSources">
+                </div>
+            </div>
+            <div [innerHTML]="newspaper.content"></div>
+        </div>
+    </div>
+</div>
+
+<ng-template #EmailModal let-modal>
+    <div class="modal-header">
+        <h4 class="modal-title">Nhập email</h4>
+    </div>
+    <form [formGroup]="formData" (ngSubmit)="onGetData()">
+        <div class="modal-body">
+            <div class="mb-3">
+                <label for="txtEmail" class="form-label">Email</label>
+                <input
+                    [ngClass]="{ 'is-valid': submitted && f['email'].valid , 'is-invalid': submitted && f['email'].invalid }"
+                    type="email" formControlName="email" class="form-control" id="txtEmail" placeholder="Nhập email...">
+                <div *ngIf="submitted && f['email'].errors" class="invalid-feedback"
+                    [ngClass]="{ 'd-block': submitted && f['email'].errors }">
+                    <div *ngIf="f['email'].errors['required']" class="form-text text-danger">
+                        Email không được để trống!
+                    </div>
+                    <div *ngIf="f['email'].errors['pattern']" class="form-text text-danger">
+                        Email không đúng định dạng!
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="modal-footer">
+            <button type="submit" class="btn btn-success" style="margin-right: 10px;;">
+                <span data-feather="check" class="icon-dual" appFeatherIcon></span>
+                Đồng ý
+            </button>
+        </div>
+    </form>
+</ng-template>
\ No newline at end of file
diff --git a/Phaha_Package/src/app/view-book/view-test/view-test.component.ts b/Phaha_Package/src/app/view-book/view-test/view-test.component.ts
new file mode 100644
index 0000000..227bb21
--- /dev/null
+++ b/Phaha_Package/src/app/view-book/view-test/view-test.component.ts
@@ -0,0 +1,204 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Component, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Title } from '@angular/platform-browser';
+import { ActivatedRoute, Router } from '@angular/router';
+import { faL } from '@fortawesome/free-solid-svg-icons';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { BlockUI, NgBlockUI } from 'ng-block-ui';
+import { PdfDocumentPropertiesExtractor } from 'ngx-extended-pdf-viewer';
+import { ToastrService } from 'ngx-toastr';
+import { environment } from 'src/environments/environment';
+import { ViewTestService } from './view-test.service';
+
+@Component({
+  selector: 'app-view-test',
+  templateUrl: './view-test.component.html',
+  styleUrls: ['../view-book.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class ViewTestComponent implements OnInit {
+
+  @BlockUI() blockUI: NgBlockUI | undefined;
+
+
+  token: string = '';
+  hasEmail: boolean = false;
+  formData: FormGroup;
+  submitted: boolean = false;
+  checkMobile: boolean = false;
+  toggleShow = true;
+  pathPdf: any;
+  pathId: any;
+  audioSources: any = [];
+  baseUrl = environment.apiUrl.substring(0, environment.apiUrl.length - 4);
+  currentIndex = 0;
+  fileName: any;
+  email: any = null;
+
+  listPathPdf: any = [];
+  newspaper: any = {
+    content: '',
+    audioDataBase64: {},
+    dateCreate: '',
+    description: '',
+    discountPercent: '',
+    editorialName: '',
+    image: '',
+    title: '',
+    view: 0,
+    pdfDataBase64: []
+  };
+  audioOption: Plyr.Options = { i18n: { speed: 'Tốc độ', normal: 'Mặc định' } };
+
+  @ViewChild('EmailModal') templateRef: TemplateRef<NgbModal> | undefined;
+
+
+  constructor(
+    private readonly _formBuilder: FormBuilder,
+    private readonly _activatedRoute: ActivatedRoute,
+    private readonly _router: Router,
+    private readonly _viewTestService: ViewTestService,
+    private readonly _modalService: NgbModal,
+    private readonly _title: Title,
+    private readonly _httpClient: HttpClient,
+    private readonly _toastrService: ToastrService,
+  ) {
+    this._activatedRoute.params.subscribe((params) => {
+      this.token = params['token'];
+    });
+
+    if (!this.token || this.token.length == 0) {
+      this._router.navigate(['/']);
+    }
+
+    // Kiểm tra xem đã điền email chưa
+    if (localStorage.getItem('ViewTest')) {
+      this.hasEmail = true;
+      this.email = localStorage.getItem('ViewTest');
+    }
+
+    this.formData = this._formBuilder.group({
+      token: [this.token],
+      email: [this.email, [Validators.required, Validators.maxLength(250), Validators.pattern('^[A-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$')]],
+    });
+
+    this.checkMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    if (this.checkMobile)
+      this.toggleShow = false;
+  }
+
+  get f() {
+    return this.formData.controls;
+  }
+
+  onGetData() {
+    this._viewTestService.onTrimDataForm(this.formData);
+
+    this.submitted = true;
+
+    if (this.formData.invalid) {
+      this._toastrService.error("Email hoặc đường dẫn không đúng", 'Lỗi', {
+        timeOut: 2000
+      });
+      return;
+    }
+
+    localStorage.setItem('ViewTest', this.formData.value.email);
+
+    this._viewTestService.GetData(this.formData.value)
+      .subscribe((data) => {
+        this.listPathPdf = data.data.pdfDataBase64;
+        this.newspaper = data.data;
+        this.pathPdf = this.listPathPdf[0].path;
+        this.pathId = this.listPathPdf[0].id;
+        this.audioSources.push({ src: this.baseUrl + this.newspaper.audioDataBase64.path });
+
+        this._title.setTitle(data.data.title);
+        this._modalService.dismissAll('Thành công!');
+      });
+  }
+
+  openModalWithSize(content?: TemplateRef<NgbModal>, size?: string) {
+    this._modalService.open(content, { size: size ?? "md", centered: true, backdrop: 'static', keyboard: false });
+  }
+
+  changePathPdf(item: any, i: number) {
+    this.pdfLoadingStarts();
+    this.pathPdf = item.path;
+    this.pathId = item.id;
+    this.currentIndex = i;
+  }
+
+  pdfLoadingStarts() {
+    this.blockUI?.start("Đang tải dữ liệu!...");
+  }
+
+  getFileName(path: any) {
+    if (path) {
+      this.fileName = path.replace(/^.*[\\\/]/, '');
+      return this.fileName = this.fileName.replace('.pdf', '');
+    } else {
+      return "";
+    }
+  }
+
+  onPagesLoaded() {
+    new PdfDocumentPropertiesExtractor()
+      .getDocumentProperties()
+      .then(() => {
+      })
+      .finally(() => {
+        this.blockUI?.stop();
+      });
+  }
+
+
+  onPdfLoadingFailed() {
+    this.blockUI?.stop();
+  }
+
+  DownloadFile() {
+    this._httpClient.get(`${this.baseUrl}${this.listPathPdf[this.currentIndex].pathOriginal}`, { responseType: 'blob' as 'json' }).subscribe(
+      (response: any) => {
+        let dataType = response.type;
+        let binaryData = [];
+        binaryData.push(response);
+
+        let downloadLink = document.createElement('a');
+        downloadLink.href = window.URL.createObjectURL(new Blob(binaryData, { type: dataType }));
+        downloadLink.setAttribute('download', this.listPathPdf[this.currentIndex].pathOriginal.split('/').pop());
+        document.body.appendChild(downloadLink);
+        downloadLink.click();
+      }
+    )
+  }
+
+  onNextPrev(i: number) {
+    this.pdfLoadingStarts();
+    this.currentIndex = i;
+    this.pathPdf = this.listPathPdf[i].path;
+    this.pathId = this.listPathPdf[i].id;
+  }
+
+  onSwipe(event: any) {
+    const x = Math.abs(event.deltaX) > 180 ? (event.deltaX > 0 ? "Right" : "Left") : "";
+    if (x == "Right") {
+      if (this.currentIndex - 1 >= 0)
+        this.onNextPrev(this.currentIndex - 1);
+    } else if (x == "Left") {
+      if (this.currentIndex + 1 < this.listPathPdf.length)
+        this.onNextPrev(this.currentIndex + 1);
+    }
+  }
+
+  ngOnInit(): void {
+  }
+
+  ngAfterViewInit(): void {
+    if (!this.hasEmail)
+      this.openModalWithSize(this.templateRef);
+    else
+      this.onGetData();
+  }
+}
diff --git a/Phaha_Package/src/app/view-book/view-test/view-test.service.ts b/Phaha_Package/src/app/view-book/view-test/view-test.service.ts
new file mode 100644
index 0000000..deed95f
--- /dev/null
+++ b/Phaha_Package/src/app/view-book/view-test/view-test.service.ts
@@ -0,0 +1,44 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { FormArray, FormGroup } from '@angular/forms';
+import { token } from 'flatpickr/dist/utils/formatting';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ViewTestService {
+
+  constructor(
+    private readonly _httpClient: HttpClient
+  ) { }
+
+
+
+  onTrimDataForm(formData: FormGroup) {
+    let formGroup: any = formData;
+    Object.keys(formGroup.controls).forEach((key) => {
+        if (formData.controls[key] instanceof FormArray) {
+            let forms = formData.controls[key].value as FormArray;
+            for (let control of forms.controls) {
+                if (control instanceof FormGroup) {
+                    this.onTrimDataForm(control);
+                }
+            }
+        } else if (formData.controls[key].value instanceof FormGroup) {
+            let formg = formData.controls[key].value as FormGroup;
+            this.onTrimDataForm(formg);
+        } else if (formGroup.get(key).value != null && typeof formGroup.get(key).value == 'string')
+            formGroup.get(key).setValue(formGroup.get(key).value.trim());
+    });
+}
+
+
+  GetData(model: any) {
+
+    let params = new HttpParams();
+    params = params.append('token', `${model.token}`);
+    params = params.append('email', `${model.email}`);
+
+    return this._httpClient.get<any>(`/newspaper/detail-test`, { params });
+  }
+}
diff --git a/Phaha_Package/src/assets/.gitkeep b/Phaha_Package/src/assets/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/Phaha_Package/src/assets/css/style.css b/Phaha_Package/src/assets/css/style.css
new file mode 100644
index 0000000..e0f162e
--- /dev/null
+++ b/Phaha_Package/src/assets/css/style.css
@@ -0,0 +1,4 @@
+.btn-primary
+{
+  background-color: black;
+}
diff --git a/Phaha_Package/src/assets/demo.pdf b/Phaha_Package/src/assets/demo.pdf
new file mode 100644
index 0000000..62c9cf9
--- /dev/null
+++ b/Phaha_Package/src/assets/demo.pdf
@@ -0,0 +1,1329 @@
+Hướng dẫn sử dụng
+Thông tin sáng chế
+
+www.wipo.int
+2
+
+   Giới hạn trách nhiệm. Án phẩm này nhằm cung cấp các thông tin cơ bản về tra cứu thông tin sáng
+   chế, mà không nhằm thay thế ý kiến tư vấn pháp lý. Việc đề cập đến tên công ty, tổ chức và trang
+   web của họ trong ấn phẩm này không có ý nghĩa là sự xác nhận của WIPO .
+                                                               3
+
+Nội dung
+
+Giới thiệu chung                                           4
+
+Hệ thống sáng chế hoạt động như thế nào?                   4
+
+          Bảo hộ                                           4
+
+          Bộc lộ thông tin                                 7
+
+Tại sao phải sử dụng thông tin sáng chế?                   7
+
+Thông tin sáng chế bao gồm những gì?                       8
+
+Có thể tìm thông tin sáng chế ở đâu?                       11
+
+Có thể tra cứu thông tin sáng chế bằng cách nào?
+
+Tra cứu theo từ khóa                                       12
+
+Tra cứu theo phân loại sáng chế                            13
+
+Tra cứu theo số đơn/ngày nộp đơn                           16
+
+Tra cứu theo tên người nộp đơn/người được                  19
+
+chuyển nhượng hoặc tác giả sáng chế                        20
+
+Tra cứu theo các trường dữ liệu cụ thể                     21
+
+Sử dụng trích dẫn và thông tin tham khảo                   22
+
+Kinh nghiệm hữu ích đối với việc tra cứu tư liệu sáng chế  24
+
+Thông tin sáng chế có thể được sử dụng như thế nào?        26
+
+Tra cứu tình trạng kỹ thuật                                26
+
+Thu thập thông tin kinh doanh                              32
+
+Tránh xâm phạm độc quyền sáng chế                          37
+
+Định giá sáng chế                                          37
+
+Xác định xu hướng phát triển chủ yếu của công nghệ         38
+
+Có thể tìm được tài liệu phi sáng chế ở đâu?               43
+4
+
+      uu Giới thiệu chung
+
+       Những năm gần đây, việc tiếp cận các thông tin công nghệ đang gia tăng
+       một cách nhanh chóng nhờ ngày càng có nhiều tài liệu kỹ thuật tồn tại dưới
+       định dạng kỹ thuật số và sự phát triển vượt bậc của các thiết bị điện tử phục
+       vụ cho việc phân phối và tiếp nhận thông tin. Vì số lượng nguồn thông tin
+       phục vụ cho công chúng ngày càng gia tăng nên việc tìm kiếm những thông
+       tin hữu ích có liên quan lại trở nên khó khăn hơn.
+
+       Tài liệu hướng dẫn này có mục đích hỗ trợ người sử dụng trong việc tra cứu
+       thông tin công nghệ có trong các tư liệu sáng chế - một nguồn thông tin kỹ
+       thuật, pháp lý và kinh doanh dồi dào được trình bày trong các định dạng
+       chuẩn và chưa được công bố ở bất cử nơi nào khác. Mặc dù tài liệu này chỉ
+       tập trung vào thông tin sáng chế, nhưng nhiều kỹ năng tra cứu nêu trên
+       cũng có thể được áp dụng để tra cứu các nguồn thông tin công nghệ phi
+       sáng chế khác.
+
+      uu Hệ thống sáng chế hoạt động như thế nào?
+
+       Bằng độc quyền sáng chế có hai chức năng chính:
+
+       • Chức năng bảo hộ: Bằng độc quyền sáng chế cho phép chủ sở hữu sáng
+            chế ngăn chặn người khác khai thác sáng chế được bảo hộ ở một quốc
+            gia hoặc khu vực nhất định, và trong một thời hạn nhất định, thường là
+            không quá 20 năm.
+
+       • Chức năng bộc lộ thông tin: Bằng độc quyền sáng chế cho phép công
+            chúng tiếp cận các thông tin liên quan đến các công nghệ mới nhằm
+            kích thích sáng tạo và góp phần phát triển kinh tế.
+
+       Bảo hộ
+       Đơn sáng chế có thể nộp qua các con đường sau:
+
+       • Con đường quốc gia: Đơn sáng chế thường được nộp tại Cơ quan Sáng
+            chế quốc gia. Bằng độc quyền sáng chế có thể được cấp và chỉ có hiệu lực
+            trong lãnh thổ quốc gia đó, phù hợp với pháp luật của quốc gia đó. Đơn
+            sáng chế đó cũng có thể nộp tại nhiều quốc gia khác theo quy định của
+            pháp luật sáng chế tại từng quốc gia có liên quan.
+                                                                                                               5
+
+• Con đường khu vực: ở một số khu vực, đơn sáng chế có thể nộp tại Cơ
+    quan Sáng chế của khu vực, ví dụ, Tổ chức Sở hữu trí tuệ khu vực châu
+    Phi (ARIPO) hoặc Cơ quan Sáng chế châu Âu (EPO). Đơn sáng chế khu
+    vực có hiệu lực giống như đơn được nộp tại các quốc gia thành viên của
+    Hiệp ước hợp tác sáng chế khu vực và, trong nhiều trường hợp, được Cơ
+    quan Sáng chế khu vực cấp “một nhóm” bằng độc quyền sáng chế một
+    cách tập trung. Để có hiệu lực ở cấp quốc gia, bản dịch bằng ngôn ngữ
+    quốc gia sở tại của bằng độc quyền sáng chế có thể được yêu cầu nộp
+
+• Con đường quốc tế: Bất kỳcông dân hoặc cư dân nào của nước thành
+    viên Hiệp ước PCT đều có thể nộp đơn sáng chế quốc tế tại Cơ quan
+    Sáng chế của nước sở tại hoặc tại Văn phòng quốc tế của Tổ chức Sở hữu
+    trí tuệ thế giới (WIPO) hoặc Cơ quan Sáng chế khu vực. Chỉ bằng việc
+    nộp một đơn sáng chế quốc tế duy nhất, đơn sẽ có hiệu lực như đơn
+    quốc gia được nộp tại các nước thành viên PCT được chỉ định. Mặc dù
+    phần lớn thủ tục nộp đơn sáng chế được thực hiện trong pha quốc tế,
+    nhưng bằng độc quyền sáng chế chỉ được cấp bởi mỗi Cơ quan Sáng chế
+    của nước thành viên được chỉ định trong pha quốc gia.
+
+Mặc dù thủ tục cấp bằng độc quyền sáng chế giữa các cơ quan sáng
+chế là khác nhau nhưng có thể khái quát hóa theo các bước sau:
+
+• Nộp đơn: Người nộp đơn có thể lựa chọn con đường nộp đơn, ví dụ,
+    theo con đường quốc gia, khu vực hay quốc tế và tiến hành nộp đơn.
+    Bước nộp đơn đầu tiên được gọi là nộp đơn để hưởng “quyền ưu tiên”,
+    từ đó lần lượt nộp đơn quốc gia, khu vực hoặc quốc tế trong thời hạn
+    hưởng quyền ưu tiên là 1 năm theo Công ước Paris về bảo hộ sở hữu
+    công nghiệp.
+
+• Thẩm định hình thức: Cơ quan sáng chế phải đảm bảo rằng mọi
+    thủ tục hành chính phù hợp, ví dụ, các tài liệu có liên quan đã có
+    đủ trong đơn và các loại phí đã được nộp.
+
+• Tra cửu tình trạng kỹ thuật: Ở nhiều quốc gia, nhưng không phải tất cả, cơ
+    quan sáng chế tiến hành tra cứu tình trạng kỹ thuật, cụ thể là tình trạng kỹ
+    thuật của tất cả các thông tin công nghệ có liên quan được công chúng biết
+    đến tại thời điểm nộp đơn sáng chế. Bằng cách sử dụng cơ sở dữ liệu và thẩm
+    định viên có năng lực trong lĩnh vực kỹ thuật cụ thể của đơn, “báo cáo tra
+    cứu” được soạn thảo để so sánh các dấu hiệu kỹ thuật của sáng chế được yêu
+    cầu bảo hộ với các dấu hiệu của giải pháp kỹ thuật đã biết.
+
+• Công bố đơn: ở hầu hết các nước, đơn sáng chế được công bố sau 18
+    tháng kể từ ngày ưu tiên, nghĩa là sau ngày nộp đơn đầu tiên.
+6
+
+       • Thẩm định nội dung: Nếu báo cáo tra cứu tình trạng kỹ thuật đã có sẵn,
+            thẩm định viên sẽ kiểm tra xem đơn có đáp ứng các yêu cầu về khả năng
+            bảo hộ độc quyền hay không, nghĩa là sáng chế có tính mới, trình độ
+            sáng tạo và khả năng áp dụng công nghiệp hay không so với các giải
+            pháp kỹ thuật được liệt kê trong báo cáo tra cứu. Thẩm định viên có thể
+            đồng ý cấp bằng độc quyền sáng chế mà không yêu cầu việc sửa chữa
+            nào, hay có thể thay đổi phạm vi của các điểm yêu cầu bảo hộ để phản
+            ánh giải pháp kỹ thuật đã biết, hoặc từ chối bảo hộ.
+
+       • Cấp bằng/từ chối: Thẩm định viên có thể đồng ý cấp bằng độc quyền
+            sáng chế mà không yêu cầu việc sửa chữa nào, hay có thể thay đổi
+            phạm vi của các điểm yêu cầu bảo hộ để phản ánh giải pháp kỹ thuật
+            đã biết, hoặc từ chối bảo hộ.
+
+       • Phản đối: Trong thời hạn nhất định, nhiều Cơ quan Sáng chế cho phép
+            bên thứ ba phản đối việc cấp bằng độc quyền sáng chế với lý do rằng
+            trên thực tế sáng chế không đáp ứng các điều kiện bảo hộ đối với sáng
+            chế.
+
+       • Khiếu nại: Nhiều Cơ quan Sáng chế cho phép thủ tục khiếu nại
+            sau khi thẩm định nội dung hoặc sau thủ tục phản đối đơn.
+
+                                     Hình 1. Thủ tục cấp bằng sáng chế
+
+                                                     Nộp đơn
+
+                                                     Thẩm định
+                                                      hình thức
+
+                                                Tra cứu tình trạng
+                                                      kỹ thuật
+
+                                                     Công bố
+
+                                                    Thẩm định
+                                                      nội dung
+                                                       Cấp/
+                                                      Từ chối
+                                                     Phản đối
+
+                                                           (trong một số trường hợp)
+
+                                                    Khiếu nại
+
+                                                            (trong một số trường hợp)
+                                                                                                               7
+
+Bộc lộ thông tin
+Chức năng quan trọng thứ hai của hệ thống sáng chế là bộc lộ thông tin,
+nghĩa là bằng độc quyền sáng chế cho phép công chúng tiếp cận thông tin
+về các công nghệ mới nhằm kích thích sáng tạo và góp phần tăng trưởng
+kinh tế.
+
+Mặc dù bảo hộ sáng chế mang tính chất lãnh thổ, chỉ có hiệu lực pháp luật
+tại quốc gia nơi bằng độc quyền sáng chế đó được cấp, nhưng thông tin có
+trong tài liệu sáng chế thì có tính chất toàn cầu, được cung cấp cho tất cả cá
+nhânhoặc tổ chức trên thế giới, nhằm cho phép người bất kỳtìm hiểu và
+học tập những kiến thức này.
+
+uu Tại sao phải sử dụng thông tin sáng chế?
+
+Thông tin sáng chế là một nguồn thông tin quan trọng đối với các nhà
+nghiên cứu, tác giả sáng chế, doanh nhân, các doanh nghiệp thương mại,
+cũng như các chuyên gia sáng chế. Thông tin sáng chế có thể hỗ trợ những
+người sử dụng thông tin để:
+• Tránh những nỗ lực nghiên cứu và triển khai trùng lặp;
+• Xác định rõ khả năng bảo hộ của sáng chế;
+• Tránh xâm phạm độc quyền sáng chế của người khác;
+• Xác định được giá trị sáng chế của mình, cũng như của những người khác;
+• Khai thác công nghệ có trong đơn sáng chế không được cấp bằng độc
+
+    quyền sáng chế hoặc không được bảo hộ độc quyền ở một số nước
+    nhất định, hoặc bằng độc quyền sáng chế đã hết hiệu lực bảo hộ;
+• Thu thập thông tin về các hoạt động sáng tạo và định hướng kinh
+    doanh của đối thủ cạnh tranh trong tương lai;
+• Nâng cao chất lượng của các quyết định kinh doanh, ví dụ, ký kết hợp đồng
+    li-xăng, thiết lập quan hệ đối tác về công nghệ, mua lại và sáp nhập doanh
+    nghiệp;
+• Xác định xu hướng phát triển chủ đạo của các lĩnh vực công nghệ cụ
+    thể, ví dụ, các lĩnh vực công nghệ liên quan đến việc bảo vệ sức khỏe
+    công đồng, bảo vệ môi trường, và xây dựng cơ sở cho việc hoạch định
+    chính sách.
+8
+
+      uu Thông tin sáng chế bao gồm những gì?
+
+       Thông tin sáng chế có chứa tất cả thông tin đã được công bố
+       trong tài liệu sáng chế hoặc thông tin thu được từ việc phân tích số liệu
+       thống kê về nộp đơn sáng chế, bao gồm:
+
+       • Thông tin kỹ thuật có chứa trong các bản mô tả và hình vẽ minh
+            họa sáng chế;
+
+       • Thông tin pháp lý chứa trong các điểm yêu cầu bảo hộ xác định
+            phạm vi bảo hộ của sáng chế và tình trạng pháp lý của sáng chế;
+
+       • Thông tin liên quan đến kinh doanh chứa trong dữ liệu viện dẫn,
+            xác định tác giả sáng chế, ngày nộp đơn, nước xuất xứ, v.v..
+
+       • Thông tin liên quan đến chính sách công thu được từ việc phân tích
+            xu hướng nộp đơn mà các nhà hoạch định chính sách sẽ sử dụng, ví
+            dụ, chính sách công nghiệp quốc gia.
+
+        Cụ thể, thông tin sáng chế còn đề cập đến:
+
+       • Người nộp đơn: Tên của cá nhân hoặc công ty nộp đơn đăng ký sáng
+            chế cụ thể;
+
+       • Tác giả sáng chế: Tên của một hoặc nhiều người đã tạo công nghệ
+            mới và phát triển sáng chế;
+
+       • Bản mô tả sáng chế: Sự giải thích rõ ràng và súc tích về các công
+            nghệ hiện có liên quan đến sáng chế mới, và sự giải thích về cách
+            thức mà sáng chế sẽ được sử dụng để giải quyết những vấn đề kỹ
+            thuật mà những công nghệ hiện có chưa giải quyết được; các ví dụ cụ
+            thể về công nghệ mới cũng thường sẽ được đưa ra;
+
+       • Yêu cầu bảo hộ: Xác định tình trạng pháp lý của đối tượng được yêu
+            cầu bảo hộ mà người nộp đơn xem đó là sáng chế của mình và hình
+            thức bảo hộ được yêu cầu và được cấp; mỗi điểm yêu cầu bảo hộ là một
+            câu đơn theo mẫu chuẩn nhằm xác định rõ sáng chế và những dấu hiệu
+            kỹ thuật duy nhất của sáng chế; yêu cầu bảo hộ phải rõ ràng, súc tích và
+            được minh họa một cách đầy đủ trong bản mô tả;
+
+       • Nộp đơn để hưởng quyền ưu tiên: là việc nộp đơn đầu
+            tiên mà trên cơ sở đó việc nộp tiếp theo trong pha quốc gia, khu vực
+            hoặc quốc tế có thể được thực hiện trong thời hạn ưu tiên 1 năm;1
+
+       • Ngày ưu tiên: là ngày nộp đơn đầu tiên mà kể từ ngày đó thời hạn bảo
+            hộ độc quyền sáng chế sẽ được tính nếu sáng chế được cấp bằng độc
+            quyền, và cũng là ngày bắt đầu của thời hạn 1 năm ưu tiên cho các đơn
+            nộp sau đó;
+
+           1 Nhóm các đơn sáng chế mà dựa trên một đơn duy nhất như được mô tả trên đây được gọi là “sáng chế
+                đồng dạng”. Việc xác định các đơn của sáng chế đồng dạng không chỉ cho biết những nước hoặc khu
+                vực mà đơn sáng chế được nộp, mà còn chỉ ra các bản dịch của đơn ở các ngôn ngữ khác nhau.
+                                                                           9
+
+• Ngày nộp đơn: là ngày nộp đơn sáng chế riêng biệt tại một Cơ quan nhận đơn
+    cụ thể, và là ngày mà thời hạn bảo hộ độc quyền sáng chế sẽ được tính nếu sáng
+    chế được cấp bằng độc quyền sáng chế;
+
+• Quốc gia được chỉ định: đó là những nước mà độc quyền sáng chế có thể được
+    mở rộng nếu đơn sáng chế được nộp theo con đường khu vực hoặc quốc tế;
+
+• Tình trạng pháp lý: Cho biết sáng chế có được cấp bằng độc quyền hay không;
+    nếu có, thì những quốc gia hay khu vực nào bằng độc quyền sáng chế đã được
+    cấp; và liệu bằng độc quyền sáng chế còn hay hết hiệu lực, hay đã bị hủy hiệu lực
+    tại một quốc gia hoặc lãnh thổ nhất định;
+
+• Trích dẫn và tài liệu tham khảo: Một số tài liệu sáng chế nhất định có thể dẫn
+    chiếu đến các thông tin công nghệ có liên quan khác được người nộp đơn hoặc
+    thẩm định viên sáng chế tìm ra trong quá trình thực hiện thủ tục cấp bằng độc
+    quyền sáng chế; các trích dẫn và tài liệu tham khảo đó bao gồm tài liệu sáng chế
+    và tài liệu phi sáng chế;
+
+• Dữ liệu thư mục: đề cập đến nhiều dữ liệu xuất hiện ở trang đầu tiên của tài
+    liệu sáng chế hoặc của đơn tương ứng, và có thể bao gồm dữ liệu nhận dạng về
+    tác giả, dữ liệu về nộp đơn quốc gia, dữ liệu về quyền ưu tiên, dữ liệu công bố
+    đơn, dữ liệu phân loại và các dữ liệu khác liên quan đến nội dung kỹ thuật của
+    đơn;
+
+• Mã loại tài liệu: được sử dụng để phân biệt các tài liệu sáng chế được
+    công bố theo loại và tình trạng pháp lý (xem Tiêu chuẩn ST.16 của
+    WIPO); ví dụ, mã A1 được sử dụng cho đơn đã được công bố có kèm
+    theo Báo cáo tra cứu quốc tế; mã A2 được sử dụng cho đơn đã được
+    công bố nhưng không có Báo cáo tra cứu quốc tế, và mã A3 được sử
+    dụng cho Báo cáo tra cứu quốc tế được công bố độc lập với đơn;
+
+• Mã nhận dạng quốc tế (INID - được dùng để xác định các dữ liệu thư
+
+mục): để nhận biết các nội dung khác nhau của dữ liệu thư mục (xem
+
+Tiêu chuẩn ST.9 của WIPO); ví dụ, “11” là số bằng độc quyền sáng chế,
+
+“54” là tên sáng chế; danh mục đầy đủ về mã nhận dạng quốc tế có thể
+
+được  tìm  thấy                                  tại:
+
+www.wipo.int/standards/en/pdf/03-09-01.pdf#INID
+
+• Mã quốc gia: để chỉ các quốc gia khác nhau bằng 2 ký tự, ví dụ, “WO” là
+    Văn phòng quốc tế của WIPO; danh mục mã quốc gia có thể xem tại
+    Tiêu chuẩn ST.3 của WIPO.
+10                                                Các quốc gia
+                                                  được chỉ định
+         Hình 2. Trang đầu tiên của đơn sáng chế
+                                                  Tóm tắt
+       Phân loại
+
+        Ngày nộp đơn
+         Ngày ưu tiên
+        Người nộp đơn
+       Tác giả sáng chế
+         Tên sáng chế
+                                                                              11
+
+uu Có thể tìm thông tin sáng chế?
+
+Thông tin sáng chế được đưa đến với công chúng thông qua một loạt cơ sở
+dữ liệu. Mỗi cơ sở dữ liệu chứa một tập hợp các tư liệu sáng chế nhất định.
+Hiện tại, không có cơ sở dữ liệu nào chứa tất cả tư liệu sáng chế đã được
+công bố trên toàn thế giới từ trước đến nay. Vì vậy, có thể phải tham vấn
+nhiều cơ sở dữ liệu khác nhau để tìm ra và truy cập các tài liệu sáng chế mà
+bạn quan tâm.
+
+Nhiều Cơ quan Sáng chế quốc gia và khu vực cho phép truy cập miễn phí
+
+các cơ sở dữ liệu sáng chế trực tuyến của họ, cũng như các tư liệu sáng chế
+
+chọn lọc từ các Cơ quan Sáng chế khác. Danh mục các cơ sở dữ liệu sáng
+
+chế  quốc  gia                                                   có  tại:
+
+www.wipo.int/patentscope/en/dbsearch/national_databases.html
+
+WIPO cho phép truy cập miễn phí tất cả đơn sáng chế quốc tế được nộp
+theo PCT và các tài liệu khác liên quan đến đơn, và tập hợp các dữ liệu
+sáng chế của nhiều quốc gia và khu vực thông qua dịch vụ tra cứu
+PATENTSCOPE®:
+http://patentscope.wipo.int/search/en/search.jsf
+
+Một số tổ chức thương mại hoặc phi lợi nhuận cũng cung cấp dịch vụ truy
+cập miễn phí vào các cơ sở dữ liệu thông tin sáng chế. Một số tổ chức
+thương mại đã xây dựng và cung cấp các dịch vụ giá trị gia tăng đối với
+việc truy cập thông tin này trên cơ sở khách hàng phải trả một khoản phí
+nhất định, kể cả dịch vụ cung cấp các bản dịch thông tin sáng chế và phân
+loại thêm một cách có hệ thống, ví dụ, thành phần và phản ứng hóa học
+hay các trình tự sinh học.
+
+Ngoài ra, các dịch vụ tra cứu chuyên nghiệp cũng được cung cấp nhằm
+thực hiện những tra cứu về tình trạng kỹ thuật cho người nộp đơn tiềm
+năng, và điều đó có thể là hữu ích nếu việc tra cứu ban đầu này không đem
+lại kết quả mong muốn. Danh sách các tổ chức cấp dịch vụ thông tin sáng
+chế có thể được tìm thấy tại: www.piug.org/vendors.php
+
+2 Có thể xem thêm thông tin về Hiệp ước Hợp tác về sáng chế tại
+     www.wipo.int/pct/en/treaty/about.htm
+12
+
+       uu Có thể tra cứu thông tin sáng chế bằng cách nào?
+
+        Việc tra cứu tư liệu sáng chế sẽ cho phép bạn tìm thấy các thông tin về xu
+        hướng phát triển gần đây của một loạt lĩnh vực kỹ thuật. Trên thực tế,
+        trong một số lĩnh vực công nghệ, những phát triển mới đầu tiên và đôi khi
+        chỉ được bộc lộ trong tài liệu sáng chế. Tuy nhiên, điều cần lưu ý là sự có
+        hạn của dữ liệu đang được tra cứu. Không có bất cứ dữ liệu nào chứa tất cả
+        thông tin kỹ thuật hiện có, hay toàn bộ thông tin sáng chế hiện có. Thông
+        tin có thể bị giới hạn về thời gian lưu trữ hay quốc gia cung cấp nguồn
+        thông tin hoặc các công cụ được sử dụng để tra cứu.
+
+        Việc tra cứu hiệu quả tư liệu sáng chế và các nguồn thông tin công nghệ
+        khác thường đòi hỏi nền kiến thức vững về lĩnh vực kỹ thuật liên quan đến
+        sáng chế. Hiểu biết về thuật ngữ và các vấn đề liên quan trong lĩnh vực này
+        cũng là rất cần thiết nếu phải xác định các tiêu chuẩn tra cứu phù hợp.
+
+        Các tiêu chuẩn mà có thể được sử dụng để tra cứu các sáng chế có liên
+        quan là:
+
+        • Từ khóa
+        • Phân loại sáng chế
+        • Ngày (ví dụ, ngày ưu tiên, ngày nộp đơn, ngày công bố, ngày cấp bằng)
+        • Các số tham chiếu hay nhận dạng sáng chế (ví dụ, số đơn, số công bố,
+
+            số bằng)
+        • Tên người nộp đơn/người được chuyển nhượng hay tác giả sáng chế
+        Các tiêu chuẩn tra cứu khác nhau có thể được hỗ trợ bởi các dịch vụ tra
+        cứu khác nhau. Một số dịch vụ tra cứu có thể cho phép tra cứu tài liệu sáng
+        chế ở phạm vi rộng, trong khi một số dịch vụ khác lại giới hạn các tiêu
+        chuẩn tra cứu.
+                                                                                                              13
+
+Các nội dung có trên tài liệu sáng chế có thể được tra cứu bằng cách sử
+dụng các điều kiện tra cứu nêu trên, và các điều kiện tra cứu này cũng là
+khác nhau giữa các dịch vụ tra cứu. Hầu hết các dịch vụ tra cứu cho phép
+người sử dụng tra cứu dữ liệu thư mục/trang đầu của tài liệu, nghĩa là tất cả
+dữ liệu có trong đơn sáng chế trừ bản mô tả và yêu cầu bảo hộ. Một số dịch
+vụ tra cứu, kể cả PATENTSCOPE của WIPO, cho phép tra cứu toàn văn,
+bao gồm bản mô tả và yêu cầu bảo hộ của sáng chế. Phạm vi các dữ liệu tra
+cứu có thể cũng giới hạn hơn đối với những tài liệu sáng chế cũ. Ví dụ,
+trong một số trường hợp, những tài liệu sáng chế cũ chỉ có thể tra cứu được
+theo tên sáng chế hay theo số tham chiếu của sáng chế.
+
+Lưu ý!
+
+  Khoảng thời gian từ ngày nộp đơn và ngày công bố. Giai đoạn từ ngày ưu tiên
+  của đơn đến ngày công bố đơn là 18 tháng. Tuy nhiên, nếu bằng độc quyền sáng
+  chế được cấp thì chủ sở hữu sáng chế được phép ngăn cấm bên thứ ba khai thác
+  thương mại đối với công nghệ có liên quan kể từ ngày ưu tiên. Để giảm nguy cơ
+  xâm phạm quyền của người khác, cần được giám sát tư liệu sáng chế ở nước
+  hoặc khu vực có liên quan để biết được các tài liệu sáng chế mới nhất được công
+  bố.
+
+         Một số dịch vụ tra cứu sẽ cho phép bạn sử dụng các hệ thống thông báo,
+         như RSS feeds, để theo dõi sự phát triển của một lĩnh vực công nghệ cụ
+         thể.
+
+Tra cứu bằng từ khóa
+Nhìn chung, cơ sở dữ liệu sáng chế có thể tra cứu được bằng cách sử dụng
+các từ khóa mô tả công nghệ hay về các vấn đề mà công nghệ sẽ giải
+quyết.
+
+Để việc tra cứu có hiệu quả, nên sử dụng các công cụ sau:
+
+• Các từ khóa (toán tử Boolean): Các từ khóa có thể được kết hợp với
+    nhau và/hoặc loại trừ nhau bằng cách sử dụng “toán tử Boolean”, như:
+    “AND”, “ANDNOT” (hay đơn giản là “NOT”), “OR”, “XOR” và
+    “NEAR”, ví dụ:
+14
+
+    tennis VÀ quả bóng è    Các tài liệu chứa cả hai từ “tennis” và “quả
+
+                            bóng”
+
+    tennis VÀ KHÔNG quả bóng è Các tài liệu chứa từ “tennis” nhưng không
+
+                            chứa từ “quả bóng”
+
+    tennis HOẶC quả bóng è  Các tài liệu chứa từ “tennis” hoặc “quả
+
+                            bóng” hoặc cả hai từ này
+
+    tennis XOR ball   è     Các tài liệu chứa từ “tennis” hoặc “quả
+
+                            bóng” nhưng không chứa cả hai từ này
+
+    tennis NEAR ball  è     Các tài liệu chứa cả hai từ "tennis" hoặc quả
+
+                            bóng nằm trong 1 số lượng từ nhất định
+
+                            khác3
+
+    Toán tử “NEAR” có thể hữu ích để tìm kiếm những tư liệu chứa cả hai
+    thuật ngữ (ví dụ, “cắt kim loại”, “kim loại dùng để cắt” và “cắt bằng kim
+    loại”), nhưng lại bỏ qua các tài liệu trong đó các thuật ngữ xuất hiện
+    trong bối cảnh không liên quan đến nhau, mà việc tra cứu này có thể
+    phải sử dụng toán tử “VÀ”.
+
+    • Sử dụng ký tự cụt: Các từ ngữ có thể được thông qua các ký tự cụt,
+        nghĩa là cắt ngắn thuật ngữ gốc hay số lượng ký tự ban đầu, bằng cách rút
+        gọn số lượng ký tự thông qua việc sử dụng toán tử đại diện, thường là
+        dấu sao (*), dấu hỏi (?), ký hiệu đồng đôla ($), hay ký hiệu phần trăm (%),
+        để làm tăng phạm vi kết quả tra cứu, ví dụ:
+
+    elect* è  Tất cả tài liệu chứa từ “elect,” ví dụ,
+              “electricity”, “electrical”, “electron” (nhưng cũng
+              có thể bao gồm cả các từ như “election”,
+              “electoral”, v.v., mà không liên quan đến nội dung
+              cần tra cứu, đó là các công nghệ liên quan đến
+              điện)
+
+    Một số dịch vụ tra cứu cho phép sử dụng các ký tự cụt ở cả trước và
+    sau của cụm từ cần tra cứu, nhưng nhiều dịch vụ như Dịch vụ tra cứu
+    PATENTSCOPE® của WIPO chỉ cho phép sử dụng ký tự cụt ở bên
+    phải của cụm từ cần tra cứu. Một số dịch vụ tra cứu coi tất cả thuật
+    ngữ tra cứu là chính bản thân của thuật ngữ mà không cần sử dụng
+    toán tử đại diện.
+
+    3. Trong Dịch vụ tra cứu PATENTSCOPE® của WIPO, dãy mặc định mà trong đó thuật ngữ tra cứu kết hợp với toán tử
+    NEAR phải có ít nhất 5 ký tự. Một dãy ký tự do người sử dụng thiết lập có thể được xác định bằng cách thêm dấu ngã (~)
+    và con số tương ứng vào sau thuật ngữ tra cứu (ví dụ, "bóng tennis” ~10).
+                                                                           15
+
+• Sử dụng toán tử lồng nhau. Sử dụng toán tử lồng nhau là việc sử
+    dụng toán tử nhằm tổ chức các yêu cầu tra cứu để giải quyết các
+    cú pháp tra cứu có thể gây ra sự nhầm lẫn, ví dụ:
+
+tennis AND quả bóng OR vợt è    Hai kết quả tra cứu cần được giải
+(tennis AND quả bóng) OR vợt è  quyết
+                                Các tài liệu chứa từ “tennis” và
+                                “bóng" hoặc “vợt” sẽ hiển thị
+
+tennis AND (quả bóng OR vợt) è  Các tài liệu chứa từ “tennis” và
+                                hoặc từ “bóng” hoặc “vợt” sẽ
+                                được hiển thị
+
+    Thứ tự mặc định khi các toán tử được sử dụng trong trường hợp
+    không có các từ ngữ cần tra cứu là khác nhau giữa các dịch vụ tra
+    cứu. Do đó, các toán tử lồng nhau sẽ được sử dụng khi phối hợp
+    toán tử Boolean nhằm đảm bảo rằng việc tra cứu được thực hiện
+    như mong muốn.
+
+• Sử dụng cụm từ. Nếu bạn sử dụng một nhóm từ trong dấu ngoặc kép (“ ”)
+    thì những từ nằm trong dấu ngoặc kép sẽ được coi là một thuật ngữ duy
+    nhất. Điều này cho phép bạn tra cứu một cụm từ gồm nhiều từ hơn là sử
+    dụng từng từ cụ thể như những thuật ngữ riêng biệt, ví dụ:
+
+bóng tennis    è  Các tài liệu chứa cả từ “tennis" và
+“bóng tennis”
+                  “bóng” (được mặc định là có toán tử
+
+                  "AND" sẽ được hiển thị
+
+               è  Chỉ các tài liệu chứa cụm từ “bóng
+
+                  tennis” hiền thị
+16
+
+      Lưu ý!
+
+            Đa ngôn ngữ. Tư liệu sáng chế tồn tại dưới nhiều ngôn ngữ. Thực tế này cần
+            được lưu ý khi tiến hành tra cứu sáng chế. Ví dụ, đơn quốc tế được nộp theo
+            Hiệp ước Hợp tác về sáng chế (PCT) phải có tên sáng chế và bản tóm tắt bằng cả
+            tiếng Anh và tiếng Pháp, nhưng các nội dung khác của đơn (ví dụ, bản mô tả và
+            yêu cầu bảo hộ) có thế dùng các ngôn ngữ khác. Vì vậy, việc sử dụng các thuật
+            ngữ bằng tiếng Anh để tra cứu chi có thể mang lại kết quả là các tài liệu bằng
+            tiếng Anh. Một vài thuật ngữ nhất định có thể tồn tại ở nhiều ngôn ngữ nhưng
+            lại có nghĩa khác nhau trong từng ngôn ngữ. Ví dụ, thuật ngữ “vent” trong tiếng
+            Anh được sử dụng để mô tả hành vi mở hay đề cập đến một cửa hàng, nhưng lại
+            có nghĩa là “gió” trong tiếng Pháp.
+
+            Sai chính tả. Mặc dù đã có các cơ chế kiểm soát chất lượng trong quá trình cấp
+            bằng độc quyền sáng chế, nhưng không phái lúc nào các thuật ngữ cũng được
+            đánh máy đúng.
+            Từ đồng nghĩa hoặc tên khoa học. Các công nghệ có thể được mô tả bằng cách
+            sử dụng nhiều thuật ngữ thông dụng hoặc kỹ thuật khác nhau.
+
+                  Hãy lưu ý đến các từ đồng nghĩa (ví dụ, bằng cách sử dụng từ điển kỹ thuật
+                  chuyên ngành) và cố gắng tìm ra khái niệm có tính tổng quát liên quan
+                  đến sáng chế (các dấu hiệu kỹ thuật cơ bản hay kỹ thuật chủ yếu). Các từ
+                  khóa được sử dụng theo cách này có thể được sử dụng kết hợp với các
+                  công cụ tra cứu nêu trên (toán tử Boolean, ký tự cụt và toán tử lồng nhau).
+
+      Tra cứu theo phân loại sáng chế
+
+        Tất cả tài liệu sáng chế đều được phân loại riêng bằng cách sử dụng một hệ
+        thống đã được chuẩn hóa để xác định nhóm hay các nhóm công nghệ mà
+        việc cải tiến công nghệ đó được mô tả trong tài liệu tương ứng. Những hệ
+        thống phân loại này là độc lập về ngôn ngữ và thuật ngữ, và được thẩm
+        định viên sáng chế có chuyên môn áp dụng đối với sáng chế và các tài liệu
+        kỹ thuật khác. Do đó, việc tra cứu các tài liệu theo phân loại sáng chế có
+        thể giúp vượt qua một số bẫy khi tra cứu bằng từ khóa.
+
+        Hệ thống phân loại sáng chế được sử dụng rộng rãi nhất là Hệ thống Phân
+        loại sáng chế quốc tế (IPC). Thông tin thêm về Hệ thống IPC có thể được
+        tìm thấy tại: www.wipo.int/classifications/ipc/en
+
+        Hệ thống IPC bao trùm hầu hết mọi lĩnh vực công nghệ hiện tại. IPC
+        thường xuyên được cập nhật để nâng cao chất lượng của Hệ thống này và
+        đáp ứng sự phát triển của khoa học và công nghệ. Trong phiên bản mới
+        nhất, IPC chia công nghệ ra thành gần 70.000 lĩnh vực hoặc nhóm. Mỗi
+        nhóm mô tả một lĩnh vực công nghệ cụ thể và được xác định bằng một “ký
+        hiệu phân nhóm”, bao gồm một chuỗi con số và ký tự. Các ký hiệu của
+        IPC có thể được tìm thấy trong dữ liệu thư mục có trong các tài liệu sáng
+        chế đã được công bố.
+                                                                                                              17
+
+Hệ thống IPC được tổ chức theo cấu trúc thứ bậc. Từ bậc cao nhất đến bậc
+thấp nhất, bao gồm: phần, lớp, phân lớp và nhóm (nhóm chính và phân
+nhóm). Mỗi phần đều có tiêu đề và mã ký tự như sau:
+
+     A Các nhu cầu của đời sống của con người
+     B Các quy trình công nghệ; Giao thông vận tải
+     C Hóa học và luyện kim
+     D Dệt; Giấy
+     E Xây dựng; Mỏ
+     F Cơ khí; Chiếu sáng; Cấp nhiệt; Vũ khí; Kỹ thuật nổ
+     G Vật lý
+     H Điện
+
+Từ phần (bậc cao nhất) đến phân nhóm (phân cấp thấp nhất), ví dụ, mã
+“C21B 7/10” có thể được phân nhỏ ra như sau:
+
+     è Phần C: Hóa học và luyện kim
+     è Lớp C21: Luyện sắt
+     è Phân lớp C21B: Sản xuất sắt, gang hay thép
+     è Nhóm chính C21B 7/00: Lò cao
+     è Phân nhóm C21B 7/00: Các phương pháp và thiết bị làm nguội
+
+Ví dụ, một tra cứu được thực hiện bằng cách sử dụng phân lớp C21B sẽ
+cho ra tất cả các dữ liệu được phân nhóm theo nhóm chính C21B 7/00
+cũng như các nhóm chính C21B 3/00, C21B 5/00 và v.v...
+
+Phân nhóm được tiếp tục phân nhỏ bằng một hay nhiều dấu chấm nằm
+trước tiêu đề của phân nhóm để chỉ ra vị trí bậc của mỗi phân nhóm. Một
+phân nhóm với một số dấu chấm sẽ tạo nên những phân nhóm gần nhất
+trên nó mà có ít hơn một chấm. Trong ví dụ ở trang sau, các phân nhóm
+C02F 1/461 và C02F 1/469 (cấp độ hai dấu chấm) biểu thị sự phân nhỏ của
+phân nhóm C02F 1 /46 (mức độ một dấu chấm).
+18
+
+                             Hình 3. Các mức độ dấu chấm của Bảng phân loại IPC
+
+        Để xác định các chỉ số IPC liên quan, có thể tiến hành tra cứu chỉ số IPC
+        theo từ khóa tại website của WIPO có địa chỉ: http://web2.wipo.int/
+        ipcpub/#refresh=page&notion=scheme&version=”0 140101 sử dụng
+        chức năng “STATS”. Nhập từ khóa và hệ thống sẽ cung cấp danh sách các
+        chỉ số IPC liên quan đến từ khóa đã nhập.
+        Các hệ thống phân loại đáng lưu ý khác được các Cơ quan Sáng chế sử dụng
+        bao gồm:
+        • Hệ thống Phân loại sáng chế châu Âu (ECLA), dựa trên IPC nhưng chia
+
+            các phân nhóm cụ thể hơn;
+
+        • Hệ thống Danh mục tập tin (FI), do Cơ quan Sáng chế Nhật Bản sử
+            dụng, dựa trên IPC nhưng có các phân nhóm phụ và các yếu tố phân
+            loại bổ sung (“thuật ngữ F”) được sử dụng nhằm để chỉ ra các dấu hiệu
+            hay khía cạnh kỹ thuật cụ thể của sáng chế;
+
+       Lưu ý!
+
+            Sự thiếu hụt của việc phân loại lại IPC. IPC được sửa đổi định kỳ nhằm đáp ứng
+            sự phát triển các công nghệ mới. Đơn sáng chế được công bố sau ngày ban hành
+            phiên bản mới của IPC thường sẽ mang ký hiệu cùa phiên bản mới nhất, nhưng
+            một số tài liệu sáng chế cũ có thể không được phân loại lại ngay lập tức (hoặc có
+            thể sẽ không được phân loại lại) và do đó, chỉ có thể tra cứu được khi sử dụng
+            các ký hiệu của IPC trong các phiên bản cũ hơn hoặc sử dụng các công cụ tra
+            cứu khác (không sử dụng IPC).
+                                                                            19
+
+Tra cứu theo số/ngày nộp đơn
+Các tài liệu sáng chế đều được gắn các số nhận dạng riêng trong mỗi giai
+đoạn thẩm định sáng chế, cụ thể là:
+
+• số đơn;
+• số công bố; và
+• số bằng, nếu bằng độc quyền được một Cơ quan Sáng chế quốc gia hay
+
+    khu vực cấp.
+
+Tài liệu sáng chế cũng lưu trữ các ngày quan trọng, bao gồm:
+
+• ngày nộp đơn;
+• ngày công bố; và
+• ngày ưu tiên (ngày nộp đơn sáng chế trên cơ sở yêu cầu hưởng quyền
+
+    ưu tiên).
+
+Khi được cấp bằng độc quyền, đơn sáng chế quốc gia hoặc khu vực sẽ có
+ngày cấp bằng. Đơn sáng chế quốc tế vào pha quốc gia cũng được cấp số
+đơn quốc gia và ngày vào pha quốc gia, sau đó sẽ được gắn các thông tin
+liên quan đến khả năng cấp bằng, từ chối hay rút đơn.
+
+Tài liệu sáng chế có thể được tìm thấy thông qua việc sử dụng các thông số
+nhận dạng và các ngày quan trọng có liên quan. Một số dịch vụ tra cứu có
+hỗ trợ việc sử dụng các toán tử nhằm thu hẹp các trường tra cứu, kể cả
+trường ngày. Các toán tử phổ biến bao gồm: lớn hơn (>), nhỏ hơn (<), lớn
+hơn hoặc bằng (>=), nhỏ hơn hoặc bằng (<=) và không bằng (<>). Dịch vụ
+tra cứu PATENTSCOPE® của WIPO có thể sử dụng ngoặc đơn [... TO...] và
+toán tử -> để xác định ngày, ví dụ:
+
+     DP:[20070908 TO 20071231] các tài liệu công bố (DP) giữa
+     8/9/2007 đến 31/12/2007
+
+Dịch vụ tra cứu PATENTSCOPE® của WIPO hỗ trợ nhiều định dạng về
+ngày, bao gồm:
+
+YYYY                    e.g.: DP:2000
+YYYYMM                  e.g.: DP:200002
+MM.YYYY                 e.g.: DP:02.2000
+YYYYMMDD                e.g.: DP:19981201
+DD-MM-YYYY              e.g.: 01-12-1997
+DD.MM.YY or DD.MM.YYYY  e.g.: DP:01.12.97 or 01.12.1997
+DD/MM/YY or DD/MM/YYYY  e.g.: DP:01/12/97 or 01/12/1997
+20
+
+       Lưu ý!
+
+            Sự đa dạng về định dạng số và ngày. Các định dạng về số và ngày trong các cơ
+            sở dữ liệu có thể là khác nhau. Các số nhận dạng sáng chế có thể là khác nhau về
+            độ dài và có thể bao gồm mã nước, mã vùng, mã ký tự nhằm thể hiện loại hình
+            bảo hộ, các số 0, dấu cách, các ký hiệu đặc biệt (gạch chéo, dấu phảy, dấu chấm,
+            v.v.) và mã các loại tài liệu. Mỗi Cơ quan Sáng chế sẽ quyết định định dạng thể
+            hiện con số riêng để sử dụng cho các tài liệu sáng chế do họ công bố mà trên
+            thực tế những định dạng này có thể thay đổi qua thời gian khi các Cơ quan Sáng
+            chế thay đổi cách đánh số hoặc là hệ quả của việc thay đổi quy định của pháp
+            luật. Mặc dù có một số cơ sở dữ liệu sáng chế vẫn duy trì số tham chiếu sáng chế
+            dưới cùng một định dạng giống như Cơ quan Sáng chế cấp bằng, nhiều cơ sở dữ
+            liệu, đặc biệt là những cơ sở dữ liệu chứa tài liệu từ nhiều cơ quan sáng chế khác
+            nhau, đã điều chỉnh số tham chiếu sáng chế theo định dạng của họ.
+
+            Ví dụ, một đơn sáng chế do Cơ quan Sáng chế và Nhãn hiệu Italia công bố có số
+            công bố là MO2006A000199 (bao gồm mã vùng, năm, mã ký tự thể hiện loại đối
+            tượng bảo hộ, và số seri có ba số 0) nhưng được lưu trữ trong Cơ sở dữ liệu
+            esp@cenet của EPO với số công bố là IT2006MO00199 (bổ sung mã nước, và bỏ
+            mã ký tự thể hiện loại đối tượng bảo hộ và một số 0 trong số seri).
+
+                   Một biện pháp đế thể hiện số tham chiếu sáng chế theo Tiêu chuẩn ST.
+                   10/C của WIPO đăng tải tại: http://www.wipo.int/standards/en/
+                   pdf/03-10-c.pdf. Tuy nhiên, do không có chuẩn về định dạng số và
+                   ngày áp dụng trên phạm vi toàn cầu, nên điều quan trọng là lưu ý đến
+                   loại tư liệu sáng chế đề có được kết quả tra cứu mong muốn.
+
+       Tra cứu theo tên người nộp đơn/người được chuyển nhượng hoặc tên
+       tác giả
+        Thông tin về các hoạt động sáng chế của mỗi cá nhân, công ty hay tổ chức
+        cụ thể có thể được tìm thấy một cách nhanh chóng bằng cách tra cứu các
+        tài liệu sáng chế theo tên của họ. Kỹ thuật tra cứu theo tên cũng tương tự
+        như tra cứu theo từ khóa (từ khóa, ký tự cụt, kết hợp các từ ngữ và sử dụng
+        cụm từ).
+
+       Lưu ý!
+
+            Sự đa dạng về tên gọi. Việc tên của người nộp đơn xuất hiện dưới nhiều tên gọi
+            khác nhau trong tài liệu sáng chế không phải là hiếm. Đơn giản là tên của họ có
+            thể bị đánh sai, hay viết tắt (ví dụ, “trách nhiệm hữu hạn” hay “TNHH”) hoặc
+            được thay đổi theo thời gian (ví dụ, “International Harvester” được đổi tên
+            thành “Navistar International Corporation” vào năm 1986).
+                                                                                                              21
+
+Tra cứu theo các trường dữ liệu cụ thể
+Thông thường, nên tra cứu theo từ ngữ, con số hay sự kết hợp các thông
+số trên ở một trường dữ liệu hơn là tra cứu toàn bộ tài liệu. Ví dụ, người
+dùng có thể muốn tra cứu một từ khóa nào đó có trong tên sáng chế hay
+bản tóm tắt của một tập hợp tài liệu sáng chế.
+Ở một số dịch vụ tra cứu, các thông số tra cứu có thể được nhập vào
+nhiều trường tra cứu có sẵn khác nhau.
+
+              Hình 4. Tra cứu theo trường trên PATENTSCOPE của WIPO
+
+Một số dịch vụ tra cứu cho phép người dùng tra cứu một
+cách linh hoạt hơn thông qua việc sử dụng mã trường. Mã trường sẽ xác
+định một trường dữ liệu cụ thể duy nhất trong tài liệu và được nhập vào
+phía trước của các thông số tra cứu (ví dụ, từ khóa), thường cách nhau
+bằng gạch chéo (/) hoặc dấu hai chấm (:). Các mã trường trong các dịch vụ
+tra cứu là khác nhau và phải lấy mã trường từ các tài liệu hướng dẫn của
+mỗi dịch vụ tra cứu. Các thông số tra cứu không có chèn thêm mã trường
+nằm trước được tra cứu đối với tất cả các trường dữ liệu.
+22
+
+    Ví dụ, trong công cụ tra cứu nâng cao của dịch vụ tra cứu
+    PATENTSCOPE® của WIPO, mã trường “DE” có nghĩa là
+
+    chất bán dẫn     è  Tài liệu chứa cụm từ “chất bán dẫn” trong
+    DE/chất bán dẫn
+                        bất cứ trường dữ liệu nào
+
+                     è  Tài liệu chứa cụm từ “chất bán dẫn" trong
+
+                        trường dữ liệu “Bản mô tả”
+
+    Tra cứu đầu tiên sẽ cho ra tất cả tài liệu sáng chế chứa cụm từ “chất bán
+    dẫn”, kể cả các tài liệu không có cụm từ nêu trên trong trường “Bản mô tả”.
+    Vì vậy, bất cứ đơn sáng chế nào do Công ty Freescale Semiconductor nộp
+    cũng sẽ hiển thị trong kết quả tra cứu, thậm chí cả những đơn không liên
+    quan đến công nghệ bán dẫn, vì cụm từ “chất bán dẫn” cũng sẽ xuất hiện
+    trong trường “Tên người nộp đơn”.
+
+    Sử dụng trích dẫn và thông tin tham khảo
+
+    Đơn sáng chế thường có chứa các tham chiếu đến các tài liệu sáng chế sớm
+    hơn (ví dụ, đơn sáng chế hay bằng độc quyền sáng chế đã cấp) hoặc đến các
+    thông tin được công bố trong các tài liệu khoa học và kỹ thuật (ví dụ, tạp chí
+    hay cẩm nang chuyên ngành), đặc biệt là trong phần bản mô tả của đơn.
+    Ngoài ra, trong quá trình thẩm định đơn, thẩm định viên sáng chế sẽ chuẩn
+    bị các báo cáo mà trong đó họ có thể trích dẫn các tài liệu sáng chế hoặc các
+    tài liệu khác có mô tả giải pháp kỹ thuật tương tự hay có liên quan mật thiết
+    đến giải pháp đang yêu cầu bảo hộ độc quyền. Những báo cáo đó sẽ được
+    hầu hết các Cơ quan Sáng chế công bố công khai. Các trích dẫn có trong tài
+    liệu sáng chế có thể là cách hữu ích để xác định các tài liệu bổ sung liên
+    quan đến công nghệ đang được tìm kiếm hoặc giúp tìm ra thêm các tiêu
+    chuẩn để tra cứu sâu hơn.
+
+    Một tiêu chuẩn phổ biến mà các thẩm định viên sáng chế hay sử dụng để
+    phân loại tài liệu được trích dẫn trong báo cáo tra cứu là theo mức độ liên
+    quan của tài liệu nhằm phân thành một vài loại tài liệu, những loại tài liệu
+    phổ biến nhất là:
+    • Loại X: là tài liệu mà chỉ một mình nó làm cho sáng chế đang được yêu
+
+        cầu bảo hộ bị mất tính mới; do đó, sáng chế đang được yêu cầu bảo hộ
+        có thể bị coi là mất tính mới;
+
+    • Loại Y: là tài liệu mà khi được kết hợp với một hay nhiều tài liệu khác sẽ
+        làm cho sáng chế đang được yêu cầu bảo hộ trở thành kiến thức đã biết;
+        và đến thời điểm đó, việc kết hợp đó là hiển nhiên đối với người có trình
+        độ trong lĩnh kỹ thuật đó;
+
+    • Loại A: là tài liệu chứa thông tin kỹ thuật cơ bản liên quan đến sáng chế
+        đang được yêu cầu bảo hộ.
+                                                                                                              23
+
+Ví dụ dưới đây sẽ minh họa về cách sử dụng các loại tài liệu khác nhau.
+Để biết thêm về hệ thống phân loại đối với các tài liệu được trích dẫn, hãy
+xem tại: www.wipo.int/standards/en/pdf/03-14-01.pdf
+
+                   Hình 5. Mẫu Báo cáo tra cứu quốc tế (ISR)
+24
+
+       Kinh nghiệm hữu ích đối với việc tra cứu tư liệu sáng chế
+        Cách tra cứu hiệu quả nhất là sử dụng tất cả biện pháp tra cứu nêu trên,
+        bằng cách sử dụng và kết hợp các từ khóa, ký hiệu IPC, và các dãy số/ngày,
+        v.v. được hỗ trợ bởi các dịch vụ tra cứu.
+
+        Tra cứu tư liệu sáng chế hiệu quả là một quá trình từngbước, từtra cứu
+        rộng ban đầu đến tra cứu chuyên sâu. Việc tra cứu mở rộng ban đầu sẽ cho
+        phépbạn tìm ra các kết quả tra cứu bất ngờ nhưng có thể có liên quan,
+        cũngnhư xác định thêm các tiêu chuẩn cho các tra cứu tiếp theo. Tuy
+        nhiên, cuối cùng thì số lượng kết quả tra cứu phải được giới hạn ở một con
+        số hợp lý để cho phép thẩm định một cách chi tiết và lưu lại riêng biệt.
+
+        Để đạt được việc này, cần lưu ý các vấn đề sau khi xây dựng chiến lược tra
+        cứu:
+
+        • Các thuật ngữ tra cứu rộng và thuật ngữ tra cứu cụ thể: Các từ khóa
+            và ký hiệu IPC được sử dụng ở những lần tra cứu đầu tiên phải bao
+            trùm lĩnh vực công nghệ rộng mà sáng chế liên quan. Ví dụ, nếu bạn
+            đang tra cứu thông tin về đi-ốt phát sáng, ban đầu bạn có thể sử dụng
+            từ khóa “chất bán dẫn” hay ký hiệu IPC như phân lớp “H01L” (chất bán
+            dẫn) thay vì sử dụng nhóm "H01L 33/00” (chất bán dẫn đặc biệt có
+            chức năng phát sáng).
+
+        • Các toán tử tra cứu kết hợp/loại trừ: Các toán tử tra cứu nhất định có
+            thể được sử dụng để mở rộng phạm vi tra cứu (toán tử kết hợp), trong
+            khi các toán tử khác lại được sử dụng để thu hẹpphạm vi tra cứu (toán
+            tử loại trừ).
+            Toán tử kết hợp là, ví dụ, toán tử “OR” và bất cứ toán tử thay thế nào (vì
+            tất cả sự kết hợp từ ngữ dựa trên cụm từ được áp dụng toán tử thay thế
+            đều hiện trong kết quả tra cứu).
+
+            Toán tử loại trừ là, ví dụ, toán tử “AND”, do kết quả tra cứu phải chứa
+            cả từ hoặc cụm từ tham gia vào toán tử đó, và dấu ngoặc kép, vì kết quả
+            tra cứu phải bao gồm cụm từ chính xác bên trong dấu ngoặc kép.
+                                                                                                         25
+
+Như minh họa trong sơ đồ dưới đây, việc thu hẹp phạm vi tra cứu sẽ
+làm tăng số lượng tài liệu có liên quan trong phần kết quả tra cứu, nghĩa
+là làm tăng tính chính xác của việc tra cứu. Tuy nhiên, việc thu hẹp
+phạm vi tra cứu cũng có thể làm giảm số lượng tài liệu có liên quan tìm
+được, có nghĩa là làm giảm chất lượng tra cứu.
+
+                       Hình 6. Tính chính xác của kết quả tra cứu
+
+            Kết quả không liên
+            quan
+            Kết quả có liên quan
+
+Tính chính xác. Trong sơ đồ trên, việc tra cứu rộng hơn (được biểu thị
+bằng đường chấm) đã cho ra 23 kết quả, trong đó chỉ 5, khoảng 20%,
+là có liên quan; trong khi tra cứu hẹp hơn (được biểu thị bởi đường nét
+đứt) cho ra 7 kết quả, trong đó 4, tức là hơn một nửa, là có liên quan.
+
+Kết quả. Cũng trong sơ đồ trên, việc tra cứu rộng hơn cho ra 5, tức là
+100% kết quả là có liên quan; trong khi tra cứu hẹp hơn chỉ cho ra 4
+hoặc 5, tức là 80% kết quả là có liên quan.
+26
+
+       uu Thông tin sáng chế có thể được sử dụng như thế nào?
+
+        Tư liệu sáng chế bao gồm rất nhiều loại thông tin kỹ thuật và pháp lý có
+        thể được sử dụng cho nhiều mục đích khác nhau bao gồm:
+
+        • Tra cứu tình trạng kỹ thuật;
+        • Thu thập thông tin kinh doanh;
+        • Tránh xâm phạm độc quyền sáng chế;
+        • Định giá sáng chế;
+        • Xác định các xu hướng chủ đạo về sự phát triển của công nghệ.
+
+               Trong các ví dụ dưới đây, Dịch vụ tra cứu PATENTSCOPE của WIPO sẽ được
+               sử dụng cho mục đích minh họa cho, nhưng những biện pháp tương tự cũng
+               có thể được sử dụng đối với các dịch vụ tra cứu thông tin sáng chế và phi sáng
+               chế khác.
+               Các bước được mô tả trong các trường hợp cụ thể có thể được sử dụng làm
+               hướng dẫn để bạn tự thực hiện việc tra cứu.
+
+       Tra cứu tình trạng kỹ thuật
+        Các tiêu chuẩn được sử dụng để xác định khả năng bảo hộ đối với sáng
+        chế gồm:
+
+        • Tính mới: Sáng chế có mới không?
+        • Tính không hiển nhiên/Trình độ sáng tạo: Sáng chế có đủ khác biệt
+
+            so với công nghệ hiện có hay không?
+
+        Để xác định liệu sáng chế được yêu cầu bảo hộ có đáp ứng các tiêu chuẩn
+        nêu trên hay không thì cần phải so sánh với tình trạng kỹ thuật, tức là tri
+        thức hiện tại của công chúng trên toàn thế giới. Tư liệu sáng chế là một
+        kênh quan trọng để thông tin kỹ thuật được đưa đến với công chúng. Vì thế,
+        việc tra cứu tư liệu sáng chế là một bước quan trọng để xác định liệu một
+        sáng chế có khả năng được bảo hộ độc quyền hay không.
+                                                                                                              27
+
+Trước khi tra cứu về khả năng bảo hộ độc quyền đối với các tư liệu sáng
+chế hiện có, điều quan trọng là phải xác định được các đặc điểm của giải
+pháp kỹ thuật đang được yêu cầu bảo hộ độc quyền sáng chế:4
+
+• Sáng chế của bạn giải quyết vấn đề kỹ thuật gì?
+• Sáng chế của bạn hoạt động như thế nào?
+• Sáng chế của bạn có hiệu quả gì?
+• Sáng chế của bạn có kết cấu như thế nào?
+• Loại vật liệu hoặc những biện pháp nào được áp dụng để tạo ra sáng
+
+    chế của bạn?
+
+Đáp án cho những câu hỏi trên sẽ được chắt lọc thành những từ ngữ và
+cụm từ cần thiết, được sử dụng trong quá trình tra cứu tư liệu sáng chế
+hiện có.
+Cần ghi nhớ rằng các bằng độc quyền sáng chế trong các lĩnh vực công
+nghệ hiện tại mà liên quan một cách không rõ ràng đến giải pháp kỹ thuật
+đang được yêu cầu bảo hộ có thể chứa đựng những thông tin về khả năng
+bảo hộ độc quyền đối với sáng chế của bạn. Ví dụ, sáng chế của bạn liên
+quan đến thiết kế mới lạ về chiếc cánh quạt của chiếc tuốc-bin chạy bằng
+gió. Các bằng độc quyền về thiết kế cánh quạt của máy bay lên thẳng, cánh
+máy bay hoặc các kết cấu khí động lực học có thể chứa đựng những thông
+tin về giải pháp kỹ thuật có liên quan. Vì thế, phạm vi tra cứu của bạn
+không nên bị giới hạn quá mức để tránh bỏ qua các tư liệu có liên quan
+khác.
+
+Lưu ý!
+
+  Tư liệu phi sáng chế. Tư liệu phi sáng chế, bao gồm các tạp chí khoa học và
+  thương mại, đóng vai trò quan trọng đối với tình trạng kỹ thuật của nhiều lĩnh
+  vực kỹ thuật. Do đó, một tra cứu tình trạng kỹ thuật toàn diện cần phải lưu ý
+  đến nguồn thông tin này.
+  Các dạng bảo hộ quyền sở hữu trí tuệ khác nhau. Ngoài bằng độc quyền sáng
+  chế, một số nước còn quy định bảo hộ quyền sở hữu trí tuệ dưới các hình thức
+  khác, như mẫu hữu ích, sáng chế nhỏ hoặc các hình thức tương tự. Các thông
+  tin được bộc lộ trong đơn đăng ký các đối tượng này cũng được coi là tinh trạng
+  kỹ thuật và cần được xem xét khi đánh giá khả năng bảo hộ độc quyền đổi với
+  sáng chế.
+  Pháp luật về sáng chế. Những yêu cầu pháp lý về khả năng bảo hộ sáng chế,
+  như mức độ của trình độ sáng tạo cần thiết để cấp bằng độc quyền cho một
+  sáng chế cụ thể, có thề là khác nhau giữa các hệ thống pháp luật. Vì thế, có thể
+  là hữu ích nếu tham vấn ý kiến của chuyên gia sáng chế trong trường hợp tra
+  cứu sơ bộ về khả năng bảo hộ sáng chế không tìm ra được tình trạng kỹ thuật
+  đã biết bất kỳ mà thực sự làm mất hiệu lực các điểm yêu cầu bảo hộ sáng chế
+  tiềm năng của bạn.
+
+4 Việc xem xét các vấn đề này cũng có thể giúp bạn cải thiện chất lượng của đơn đăng ký sáng chế cụ
+     thể
+28
+
+    : Ví dụ thực tiễn
+
+    Bạn đã phát triển được một công nghệ gắn pin mặt trời vào lá nhôm ở
+    nhiệt độ thấp bằng cách sử dụng các hạt “mực” nano.
+
+    Bước 1. Xác định các ý tưởng chính liên quan đến giải pháp của bạn
+
+    Từ phần mô tả nêu trên, các ý tưởng chính có thể bao gồm: “pin mặt
+    trời” (sản phẩm), “lá nhôm”, “hạt mực nano” (nguyên liệu được sử dụng
+    trong quy trình sản xuất).
+
+    Bước 2. Xác định các từ khóa tra cứu
+
+    Bước tiếp theo là tìm các thuật ngữ đồng nghĩa, các từ và cụm từ khóa có
+    liên quan đến các ý tưởng đã được xác định ở bước thứ nhất:
+
+    pin mặt trời  è  tế bào quang điện (từ đồng nghĩa)
+    lá nhôm
+                  è  lá nhôm (cách đọc khác), lá kim loại (từ
+    hạt mực nano
+                     có liên quan)
+
+                  è  dung dịch hạt nano (từ có liên quan),
+
+                     huyền phù hạt nano (từ có liên quan)
+
+    Bước 3. Xác định ký hiệu trong Bảng phân loại sáng chế quốc tế (IPC) để
+    thực hiện việc tra cứu
+
+    Bằng cách sử dụng các từ và cụm từ được xác định ở các bước nêu trên, các
+
+    ký hiệu IPC phù hợp có thể được tìm thấy khi tra cứu từ khóa trong IPC
+
+    (xem:         http://web2.wipo.int/ipcpub/#refresh=page&notion=
+
+    scheme&version=20140101). Để tra cứu cụm từ “pin mặt trời”, hãy sử
+
+    dụng chế độ mặc định để tìm ra nhóm H01L31 trong phân loại IPC có liên
+
+    quan:
+
+                  Hình 7: Tra cứu IPC dùng từ khóa
+                                                                                                              29
+
+Bước 4: Thực hiện việc tra cứu đầu tiên
+Những tra cứu đầu tiên thường có phạm vi tương đối rộng, bằng cách sử
+dụng (i) các toán tử Boolean “OR” để liên kết các từ khóa hoặc ký hiệu IPC
+liên quan; và (ii) các toán tử thay thế để kết hợp dạng số nhiều của từ và
+cụm từ. Vì các ký hiệu IPC chỉ nằm trong trường phân loại quốc tế trong
+các tư liệu sáng chế được tra cứu, toán tử “Phân loại quốc tế” (International
+Class - “IC”) có thể được sử dụng trong Dịch vụ tra cứu PATENTSCOPE®
+của WIPO (chức năng tra cứu nâng cao) để giới hạn phạm vi tra cứu đối
+với các ký hiệu IPC trong trường này.
+Tra cứu đầu tiên sẽ tập trung vào việc tìm ra một loạt đơn đăng ký sáng chế
+có liên quan đến đối tượng được đề cập:
+
+     “pin mặt trời*” OR “tế bào quang điện*” OR IC/H01L-31*
+                   Hình 8. Bảng tra cứu nâng cao WIPO PATENTSCOPE
+
+Tra cứu này tìm được hơn 210.000 kết quả - một số lượng quá lớn để có thể
+xem xét chi tiết từng kết quả. Việc xem xét các kết quả này cho thấy chúng
+bao gồm các đơn không những liên quan đến phương pháp sản xuất pin
+mặt trời mà còn liên quan đến việc bố trí và sử dụng pin mặt trời. Các kết
+quả này cũng liên quan đến vật liệu xây dựng cơ bản nhiều hơn là ứng dụng
+giải pháp mà bạn đang thẩm định về khả năng bảo hộ độc quyền sáng chế.
+30
+
+                               Hình 9: Kết quả tra cứu trên PATENTSCOPE của WIPO
+
+        Bước 5: Tra cứu nâng cao
+        Trên cơ sở xem xét kết quả tra cứu ban đầu, việc tra cứu sẽ được thu hẹp
+        bằng cách sử dụng các thuật ngữ tra cứu chi tiết hơn và liên kết với nhau
+        bằng các toán tử Boolean “AND". Việc lồng nhau nên được sử dụng để giải
+        quyết cú pháp tra cứu mơ hồ bất kỳ có thể.
+        Để thu được kết quả chứa các từ như “dung dịch chứa hạt nano” hay “dung
+        dịch chứa hạt nano”, chúng ta sẽ phải sử dụng các dấu ngã (~) để xác định
+        khoảng cách giữa 2 từ (trong ví dụ là 5 từ):
+
+               ("nanoparticle suspension"~5 OR "nanoparticle solution"~5 AND
+               "nanoparticle ink"~5) AND (IC/"H01L31" OR "solar cell"~5 OR
+               "photovoltaic cell"~5) AND ("aluminum foil" OR "metal foil")
+                                                                                                              31
+                  Hình 10: Tra cứu nâng cao trên PATENTSCOPE của WIPO
+
+Việc tra cứu này cho ra 117 kết quả, một con số dễ xử lý hơn.
+                    Hình 11: Kết quả tra cứu trên PATENTSCOPE của WIPO
+32
+
+       Thu thập thông tin kinh doanh
+        Việc biết được công ty hoặccá nhânnào dẫnđầu về công nghệ trong lĩnh
+        vực kinh doanh của bạn có thể đóng một vai tròquan trọngtrong việc xây
+        dựng kế hoạch cho các hoạt động kinh doanh, cũng như các hoạt động
+        nghiên cứu - triển khai. Hoạt động sáng chế và quyền sở hữu sáng chế có
+        thể là rất quan trọng trong việc xác định những tác giả sáng chế tiềm năng
+        trong nhiều lĩnh vực công nghệ khác nhau
+        Mặc dù một tra cứu có thể cho thấy các tư liệu sáng chế bất kỳ đáp ứng các
+        điều kiện tra cứu mà được công bố tại thời điểm tra cứu thì các đơn đăng
+        ký sáng chế mới được nộp tiếp theo có thể sẽ liên quan đến việc kinh
+        doanh của bạn. Để theo kịp những phát triển này, một số dịch vụ tra cứu
+        cung cấp khả năng về yêu cầu cập nhật qua e-mail hoặc thiết lập công cụ
+        RSS (RSS feeds) theo đơn đặt hàng để cập nhật liên tục về các tài liệu mới
+        được công bố và có thể truy vấn được bằng các ứng dụng phần mềm thông
+        thường
+
+       Lưu ý!
+
+            Bí mật thương mại. Ngoài việc đăng ký bảo hộ độc quyền sáng chế cho một
+            sáng tạo và chấp nhận bộc lộ các thông tin có liên quan khi nộp đơn sáng chế,
+            một số doanh nghiệp có thể bảo vệ các ý tưởng của mình bằng cách giữ bí mật,
+            đặc biệt nếu sáng tạo này dễ được nhận biết bằng kỹ thuật phân thích ngược.
+            Do đó, một số hoạt động sáng tạo và chiến lược của đối thủ cạnh tranh trong
+            tưong lai có thể không được tìm thấy khi tiến hành tra cứu sáng chế
+
+            Thương mại hóa. Một công nghệ không nhất thiết phải được thương mại hóa
+            bởi chính chủ sở hữu bằng độc quyền sáng chế mà có thể được li-xăng cho một
+            hoặc nhiều người khác. Vì thế, không phải lúc nào đơn đăng kỷ sáng chế được
+            công bố cũng chứa đựng hết hoạt động kinh doanh của đối thủ cạnh tranh.
+                                                                                                              33
+
+: Ví dụ thực tiễn
+
+Công ty của bạn đang sản xuất nông cụ và muốn biết xu hướng phát triển
+mới trong lĩnh vực công nghệ cày trên thị trường quốc tế.
+
+Bước 1. Xác định các điều kiện tra cứu
+Một sự lựa chọn rõ ràng là tra cứu đối với các đơn sáng chế chứa từ khóa
+“cày”. Tuy nhiên, việc tra cứu bằng cách sử dụng từ khóa có thể dễ bị nhầm
+lẫn với từ khóa khác (ví dụ, “cái cày”), các thuật ngữ kỹ thuật, nghĩa đen của
+từ đó hoặc các đơn bằng ngôn ngữ nước ngoài. Do vậy, bạn nên sử dụng
+các ký hiệu IPC để tìm ra những đơn có liên quan.
+Tra cứu theo IPC bằng từ khóa (xem: http://web2.wipo.int/ipcpub/
+#refresh=page&notion=scheme&version=20 140101 ) sẽ thu được một
+số nhóm ký hiệu IPC có liên quan đến công nghệ cày:
+
+                           Hình 12: Tra cứu IPC dùng từ khóa
+34
+
+        Bước 2: Tiến hành tra cứu
+        Vì nhiều nhóm IPC có vẻ liên quan đến công nghệ cần tra cứu nên bạn có
+        thể sử dụng tất cả các nhóm IPC tìm thấy này cho bước tra cứu đầu tiên.
+        Việc này có thể được thực hiện bằng cách sử dụng toán tử “OR”.
+        Vì bạn chỉ quan tâm đến tra cứu các phân nhóm quốc tế của tư liệu sáng
+        chế nên bạn có thể giới hạn tra cứu của mình ở trường thích hợp của Dịch
+        vụ tra cứu PATENTSCOPE® của WIPO (chức năng tra cứu nâng cao) bằng
+        cách sử dụng các trường “Phân loại quốc tế” đặt trước các ký hiệu IPC có
+        liên quan như sau:
+
+               IC/"A01B 3" OR IC/"A01B 5" OR IC/"A01B 7" OR IC/"A01B 9" OR
+               IC/"A01B 11" OR IC/"A01B 13" OR IC/"A01B 15" OR IC/"A01B 17"
+
+                            Hình 13: Tra cứu nâng cao trên PATENTSCOPE của WIPO
+
+        Việc tra cứu này thu được khoảng 6200 kết quả, kể cả những đơn sáng chế
+        chứa "các công cụ và máy đào nền hoặc làm đất" và "công cụ cắt trong
+        nông nghiệp liên quan đến đất".
+                                                                                                              35
+
+Bước 3: Phân tích dữ liệu
+Từ kết quả tra cứu trên PATENTSCOPE® của WIPO, bạn có thể dễ dàng
+thực hiện việc phân tích sâu về các kết quả thu được và hình dung được
+hoạt động sáng chế trong lĩnh vực mà bạn quan tâm theo biểu đồ dưới đây.
+
+                   Hình 14a: Kết quả tra cứu trên PATENTSCOPE của WIPO
+
+               Hình 14b. Biểu đồ về kết quả tra cứu theo người nộp đơn
+
+Công cụ này cung cấp các thông tin hữu ích liên quan đến 10 Cơ quan
+sáng chế hàng đầu, các phân nhóm IPC chính, những người/tổ chức
+nộp đơn nhiều nhất, các tác giả sáng chế quan trọng nhất và ngày công
+bố đơn trong khuôn khổ các kết quả tra cứu tìm được.
+36
+
+        Bước 4. Cập nhật thông tin hiện có
+        Từ trang kết quả tra cứu của PATENTSCOPE, bạn có thể đăng ký RSS
+        như hướng dẫn dưới đây. Bằng cách đăng ký dịch vụ RSS, bạn sẽ được cập
+        nhật thông tin về các đơn đăng ký sáng chế quốc tế mới nhất mà công ty
+        bạn quan tâm do nội dung đường dẫn này thường xuyên được cập nhật từ
+        các đơn đăng ký mới được công bố mà đáp ứng các tiêu chuẩn đặt ra của
+        tra cứu gốc.
+
+                              Hình 15: Kết quả tra cứu trên PATENTSCOPE của WIPO
+                                                                                                              37
+
+Tránh xâm phạm độc quyền sáng chế
+Có thể thường xuyên tránh được các thủ tục pháp lý tốn kém liên quan đến
+việc xâm phạm độc quyền sáng chế bằng cách thu thập thông tin về phạm
+vi bảo hộ của các bằng độc quyền sáng chế hiện có và tình trạng pháp lý của
+chúng tại các nước khác nhau để bạn lên kế hoạch kinh doanh tại các nước
+đó. Thông tin này có thể thu được bằng cách tra cứu một cách có hệ thống
+các tư liệu sáng chế. Việc tra cứu như vậy có thể được thực hiện trên cơ sở
+các tư liệu sáng chế của Hệ thống PCT, cũng như tại các cơ sở dữ liệu của
+các quốc gia hoặc khu vực mà bạn muốn thương mại hóa công nghệ của
+mình. Khi đã có được các tư liệu sáng chế thích hợp, bước đầu tiên là thẩm
+định tình trạng pháp lý của đơn sáng chế:
+• Bằng độc quyền sáng chế đã được cấp, bị từ chối, rút bỏ hay đang chờ
+
+    cấp?
+• Ở những quốc gia nào?
+• Bằng độc quyền sáng chế vẫn còn hay đã hết hiệu lực?
+• Sáng chế đó có gia hạn hay không, có thể tồn tại trong các trường hợp
+
+    cụ thể?
+
+Nếu bằng độc quyền sáng chế vẫn còn có hiệu lực pháp lý ở nước mà bạn
+muốn bán sản phẩm thì bước thứ hai là đánh giá các điểm yêu cầu bảo hộ
+của sáng chế đó. Có thể tránh được những xâm phạm tiềm năng bằng cách
+điều chỉnh sản phẩm của bạn có lưu ý đến các điểm yêu cầu bảo hộ có liên
+quan.
+Vì đơn đăng ký sáng chế chỉ được công bố sau 18 tháng kể từ ngày nộp đơn
+nên điều quan trọng là phải tiếp tục giám sát tư liệu sáng chế trong các lĩnh
+vực công nghệ có liên quan đến sản phẩm của bạn. Nhiều dịch vụ tra cứu
+có tích hợp các công cụ thông báo, ví dụ, công cụ RSS (RSS feeds) có thể hỗ
+trợ tích cực cho việc này
+
+Định giá sáng chế
+
+Tư liệu sáng chế có thể cung cấp chỉ dẫn về giá trị sáng chế của bạn hoặc
+của các đối thủ cạnh tranh. Đặc biệt, những thông tin được trích dẫn có
+trong tư liệu sáng chế - cụ thể là các bằng độc quyền sáng chế, đơn sáng chế
+khác, hoặc Báo cáo tra cứu quốc tế hoặc quốc gia (ISR) - kèm theo một sáng
+chế cụ thể là rất hữu ích để xác định giá trị của sáng chế có liên quan. Ví dụ,
+số lần sáng chế được trích dẫn trong các tư liệu sáng chế sau đó thể hiện sự
+liên quan về mặt kỹ thuật và đó chính là giá trị của sáng chế.
+38
+
+        Một số dịch vụ tra cứu do các Cơ quan sáng chế hoặc tổ chức dịch vụ
+        thông tin thương mại cung cấp cho phép phân tích thông tin trích dẫn, đặc
+        biệt là thông qua việc xác định các tài liệu sáng chế sau đó có trích dẫn
+        sáng chế này. Một trong số các dịch vụ kiểu này được Cơ quan Sáng chế
+        châu Âu cung cấp tại địa chỉ: www.epoline.org/portal/public/registerplus
+
+       Lưu ý!
+
+            Giá trị của sáng chế. Giá trị thương mại của một sáng chế phụ thuộc vào nhiều
+            yếu tố mà có thể không được đề cập trong tư liệu sáng chế, bao gồm khả năng
+            phát triển sản phẩm dựa trên công nghệ được bảo hộ độc quyền bởi chủ sở hữu
+            sáng chế hoặc người nhận li-xăng, cũng như quy mô của thị trường tiềm năng.
+
+       Xác định xu hướng phát triển chủ yếu của công nghệ
+        Dữ liệu thống kê có được từ tư liệu sáng chế có thể được sử dụng để mô tả
+        xu hướng phát triển chủ đạo của các lĩnh vực công nghệ và cả các quốc gia
+        khác nhau; qua đó, giúp các nhà hoạch định chính sách đưa ra các quyết
+        định chính xác hơn.
+        Dữ liệu sáng chế có thể có được từ các ấn phẩm thống kê được công bố trên
+        trang web của các Cơ quan Sáng chế quốc gia và khu vực, nhất là Báo cáo
+        hằng năm của các Cơ quan đó. WIPO cho phép truy cập một cách rộng rãi
+        các số liệu thống kê về hoạt động sáng chế trên thế giới tại địa chỉ:
+        www.wipo.int/ipstats/en/
+
+        Nói chung, dữ liệu mô tả số lượng đơn sáng chế được nộp, số lượng bằng
+        độc quyền sáng chế đã được cấp và đang có hiệu lực ở các nước khác nhau,
+        và có thể được phân loại theo các tiêu chí khác nhau, như theo nhóm công
+        nghệ hoặc theo nước xuất xứ của người nộp đơn hoặc tác giả sáng chế.
+
+        Ví dụ, tùy thuộc vào các tiêu chí phân loại, dữ liệu sáng chế có thể được
+        dùng để theo dõi sự tăng trưởng và thay đổi về hoạt động sáng chế theo thời
+        gian, xem xét sự phân bố đơn sáng chế trong một quốc gia bằng cách so
+        sánh giữa công dân và những người nước ngoài, hoặc xác định các lĩnh vực
+        kỹ thuật mà nước đó chiếm ưu thế trong hoạt động sáng chế.
+                                                                                                              39
+
+Một dữ liệu thống kê về sáng chế có thể được nhiều cơ quan của Chính phủ
+sử dụng để hoạch định chiến lược phát triển công nghiệp của mình là “chỉ
+số chuyên môn hóa so sánh” như mô tả dưới đây. Chỉ số này so sánh thị
+phần của một quốc gia trong hoạt động sáng chế toàn cầu trong một lĩnh
+vực công nghệ nhất định với thị phần của quốc gia trong hoạt động sáng
+chế toàn cầu trong mọi lĩnh vực. Nó có thể là hữu ích khi xem xét điểm
+mạnh và điểm yếu tương đối của một quốc gia liên quan đến hoạt động
+sáng chế, và do đó, biết được các lĩnh vực đầu tư tiềm năng.
+
+           Hình 16. Chỉ số chuyên môn hóa tương đối mô tả hoạt động sáng
+                                  chế của một quốc gia cụ thể
+
+Nguồn: Báo cáo PCT hằng quý: Những xu hướng và phân tích, WIPO
+40
+
+   : Ví dụ thực tiễn
+
+        Chính phủ bạn đã xác định rằng việc thiếu hụt các công nghệ bảo quản
+        thực phẩm là một trở ngại lớn để khu vực nông nghiệp xuất khẩu phát triển
+        hơn nữa và đang xem xét đàm phán các hợp đồng chuyển giao công nghệ
+        với các nước khác nhằm có thể tiếp cận tốt hơn các công nghệ có liên quan.
+
+        Bước 1: Xác định các tiêu chí tra cứu
+        Trong trường hợp này, Bảng IPC cho thấy một nhóm IPC chỉ ra lĩnh
+        vực công nghệ đang được đề cập đến là nhóm A23L 3/00.
+
+                              Hình 17. Tìm ký hiệu IPC phù hợp
+                                                                                                              41
+
+Bước 2. Thực hiện việc tra cứu
+Vì chỉ một nhóm IPC duy nhất là cần thiết để bao trùm lĩnh vực công nghệ
+có liên quan nên các tiêu chí tra cứu cần thiết để tìm kiếm các tài liệu phù
+hợp là rất đơn giản trong trường hợp này. Đầu tiên, nhập ký hiệu IPC có
+được vào trường thích hợp trong Dịch vụ tra cứu PATENTSCOPE® của
+WIPO (trong chức năng tra cứu nâng cao).
+
+          Hình 18. Tra cứu nâng cao trên trang PATENTSCOPE của WIPO
+
+Bước 3: Phân tích dữ liệu
+Bản tóm tắt dữ liệu và các mô tả bằng hình họa của các đơn đăng ký
+sáng chế quốc tế đã tìm được ở các bước trước có thể thấy được một
+cách nhanh chóng ở trang kết quả, như được thể hiện dưới đây
+
+                Hình 19. Kết quả tra cứu trên PATENTSCOPE® của WIPO
+42
+
+        Thông tin thu được bằng cách sử dụng công cụ phân tích đồ họa chứa số
+        lượng và đồ thị phân bố đơn sáng chế liên quan đến các tiêu chí tra cứu
+        được sử dụng ở bước thứ hai, tức là trong lĩnh vực công nghệ bảo quản thực
+        phẩm.
+
+                          Hình 20. Biểu đồ kết quả tra cứu theo Cơ quan nộp đơn
+
+        Nó cũng bao gồm thông tin về các xu hướng trong quá khứ về việc nộp
+        đơn quốc tế trong lĩnh vực này. Số lượng đơn của năm hiện tại phản ánh
+        số lượng đơn sáng chế đã được công bố tại thời điểm tra cứu, và do đó có
+        thể là ít một cách lạ thường.
+
+                     Hình 21. Biểu đồ kết quả tra cứu theo theo năm công bố
+                                                                                                              43
+
+uu Có thể tìm được tư liệu phi sáng chế ở đâu?
+
+Tư liệu phi sáng chế bao gồm các tạp chí khoa học, sách giáo khoa và các
+nguồn tri thức khoa học và kỹthuật khác. Trong nhiều lĩnh vực công
+nghệ, tài liệu phi sáng chế có vai trò quyết định trong việc xác định tình
+trạng kỹ thuật, và vì thế nó là một bộ phận không thể thiếu được khi đánh
+giá khả năng bảo hộ độc quyền đối với sáng chế bất k.ỳ
+WIPO đã xây dựng một danh mục tạp chí khoa học định kỳ mà các Cơ
+quan Sở hữu trí tuệ nên tham khảo khi thực hiện việc tra cứu quốc tế
+trong quá trình xử lý đơn sáng chế theo Hệ thống PCT. Danh mục này,
+thường được gọi là Tài liệu tối thiểu PCT, có tại địa chỉ: www.wipo.int/
+standards/en/part_04.html
+Việc tham khảo kỹ lưỡng các tài liệu định kỳ có trong danh mục tài liệu
+phi sáng chế tối thiểu là một công việc cần thiết để xác định xem có giải
+pháp kỹ thuật đã biết liên quan đến sáng chế hay không. Tuy nhiên, cũng
+cần xem xét các nguồn thông tin bổ sung để xác định tính mới của sáng
+chế.
+Rất nhiều công cụ tra cứu tư liệu phi sáng chế trực tuyến được cung cấp
+bởi các tổ chức thương mại kể cả Tạp chí Google và Scirus. Các tổ chức
+thương mại cũng cung cấp các dịch vụ tra cứu nâng cao, bao gồm các tài
+liệu tham khảo chéo và tài liệu phi sáng chế được phân loại theo IPC.
+
+          Các kiến nghị hoặc câu hỏi có thể gửi qua địa chỉ email:
+                                tentscope@wipo.int
+Các thông tin chi tiết có thể tham khảo thêm tại website www.wipo.int
+
+Tổ chức Sở hữu trí tuệ thế giới (WIPO)
+Địa chỉ: 34, chemin des Colombettes
+P.O. Box 18
+CH-1211 Geneva 20
+Switzerland
+
+Điện thoại:
++41 22 338 91 11
+
+fax:
++41 22 733 54 28
+
+WIPO Publication No. L434/3(E)  ISBN 978-92-805-2190-0
+2013 Edition
+
diff --git a/Phaha_Package/src/assets/font/Averta.otf b/Phaha_Package/src/assets/font/Averta.otf
new file mode 100644
index 0000000..6205d13
Binary files /dev/null and b/Phaha_Package/src/assets/font/Averta.otf differ
diff --git a/Phaha_Package/src/assets/i18n/en.json b/Phaha_Package/src/assets/i18n/en.json
new file mode 100644
index 0000000..74877ac
--- /dev/null
+++ b/Phaha_Package/src/assets/i18n/en.json
@@ -0,0 +1,627 @@
+{
+  "PROMOTION_UNTIL_MAY_40": "Promotion until May 40",
+  "RELEASE_DATE": "Release date",
+  "NUMBER_OF_PAGES": "Number of pages",
+  "LANGUAGE": "Language",
+  "TYPE": "Type",
+  "MAGAZINE": "Magazine",
+  "PROOFREAD": "Proofread",
+  "PREMIUM_PACKAGE": "Premium Package",
+  "YEAR": "Year",
+  "12_MONTH": "Askonomy AI Chatbot - 12-Month Subscription",
+  "DAILY_VNECONOMY": "Daily Highlights by VnEconomy",
+  "12_MONTH_SUBSCRIPTION": "Tap chi Kinh te Vietnam - 12-Month Subscription for Digital Edition",
+  "BUY_NOW": "Buy now",
+  "VNECONOMY_HOME_PAGE": "VnEconomy home page",
+  "BENEFITS_INCLUDE": "Benefits include:",
+  "AI_CHATBOT_12_MONTH": "Askonomy AI Chatbot - 12-Month Subscription",
+  "AN_EXCLUSIVE_AI_PRODUCT": "An exclusive AI product developed by VnEconomy to provide users with accurate and comprehensive economic data, statistics, and analysis, extracted from Tap chi Kinh te Vietnam / VnEconomy's 30 years++ database, in less than a second.",
+  "DAILY_HIGHLIGHTS": "Daily Highlights by VnEconomy",
+  "AN_EXTENDED_FEATURE_UTILIZING": "An extended feature utilizing AI Askonomy to deliver a daily brief and concise summary of the most prominent news on VnEconomy, to allow ease of access from anywhere, at anytime, and on any device.",
+  "FOR_DIGITAL_EDITION": "Tap chi Kinh te Vietnam - 12-Month Subscription for Digital Edition",
+  "ENJOY_EXCLUSIVE_BENEFITS": "Enjoy exclusive benefits when subscribing to our digital publication, including exclusive articles, two days earlier than the print edition, easy to access from anywhere and on any device.",
+  "SIGN_UP": "Buy now",
+  "TAP_CHI_KINH_TE_VIET_NAM": "Tap chi Kinh te Viet Nam",
+  "HOT_NEWS": "Hot news",
+  "DATE": "Date",
+  "EXPERIENCE_NOW": "Experience now",
+  "THANK_YOU_1": "Vneconomy is a very reputable newspaper with a lot of in-depth analytical information. During the process of writing my master's thesis, I consulted a lot of useful information, thank you VnEconomy",
+  "THANK_YOU_2": "Vietnam Economic Magazine is not only a place to read news but also helps me gain a lot of new knowledge. Specialized content routes help businesses like us take new steps and strategies in line with general economic developments.",
+  "THANK_YOU_3": "Một trải nghiệm đọc báo mới và hiện đại, trước giờ chỉ có được khi đọc những tờ báo quốc tế",
+  "MANAGING_UNIT": "Managing unit",
+  "VIETNAM_ASSOCIATION_OF_ECONOMIC_SCIENCES": "Vietnam Association of Economic Sciences",
+  "PHONE_NUMBER": "Phone number",
+  "ADDRESS": "Address",
+  "NO_96_98_HOANG_QUOC_VIET": "No. 96-98 Hoang Quoc Viet, Cau Giay, Hanoi",
+  "DOMAIN": "Domain",
+  "REGISTER_NOW": "REGISTER NOW",
+  "EXPERIENCE_THE_PACKAGES": "Experience the packages of Vietnam Economic Magazine",
+  "SIGN_UP_FOR_PACKAGE": "SIGN UP FOR PACKAGE",
+  "header": {
+    "register-member": "Sign up account",
+    "get-offer": "Get a quick offer",
+    "select-payment": "Selection & Payment",
+    "safe-convenient": "Safe, convenient",
+    "read-book-newspaper": "Copyrighted books/newspapers",
+    "unlimit": "Unlimited, diverse",
+    "notification": "Notification",
+    "news": "new",
+    "read-all": "Read all",
+    "button": {
+      "sign-in": "Sign in",
+      "sign-up": "Sign up"
+    },
+    "search": "Enter keywords",
+    "current-user": {
+      "profile": "Profile",
+      "my-package": "Copyrighted newspapers",
+      "my-newspaper": "Magazine bought",
+      "log-out": "Log out",
+      "code": "Enter your code"
+    },
+    "category-menu": {
+      "title-main": "Categories",
+      "title-newspaper": "Newspapers - Magazines",
+      "title-book": "Books",
+      "title-product": "Products"
+    }
+  },
+  "footer": {
+    "content-title": {
+      "info": "About POSTENP",
+      "customer-support": "Customer support",
+      "contact": "Contact address",
+      "process-policy": "Process - Policy",
+      "follow": "Follow us"
+    },
+    "content-link": {
+      "info": {
+        "link": "Terms of use & privacy policy"
+      },
+      "contact": {
+        "Hanoi": "No.17 Dinh Le, Hoan Kiem Dist, Ha Noi",
+        "Danang": "No.377 Nguyen Van Linh, Hai Chau Dist, Da Nang",
+        "HCM": "No.43 Van Hue, Phu Nhuan Dist, TP.HCM"
+      },
+      "process-policy": {
+        "payment": "Payment policy",
+        "delivery": "Delivery policy",
+        "exchange": "Exchange policy",
+        "warranty": "Warranty Policy"
+      },
+      "mobile-app": {
+        "ios": "IOS",
+        "android": "Android",
+        "version": "Version",
+        "release-dates": "Release dates"
+      }
+    }
+  },
+  "sign-in": {
+    "title": "Sign in",
+    "usename": "Usename",
+    "password": "Password",
+    "remember": "Keep me signed in",
+    "forgot-password": "Forgot password?",
+    "register-now": "Register now.",
+    "not-account": "Do not have an account?",
+    "error-messages": {
+      "error-username": "Username cannot be blank!",
+      "error-password": "Password cannot be blank!"
+    }
+  },
+  "sign-up": {
+    "login-now": "Login now.",
+    "has-account": "Do you already have an account?",
+    "placeholder-school": "Selecte a school",
+    "placeholder-province": "Selecte a province",
+    "placeholder-district": "Selecte a district",
+    "placeholder-wards": "Selecte a wards",
+    "school": "School",
+    "province": "Province",
+    "district": "District",
+    "wards": "Wards",
+    "title-item-1": "Enterprise information",
+    "title-item-2": "Bank-information",
+    "personal": "Personal",
+    "enterprise": "Enterprise",
+    "student": "Student",
+    "title": "Sign up",
+    "fullname": "Fullname",
+    "fullname-placeholder": "Enter your fullname",
+    "email": "Email",
+    "email-placeholder": "Enter your email",
+    "taxcode": "Tax code",
+    "taxcode-placeholder": "Enter your tax code",
+    "headquarters": "Headquarters",
+    "headquarters-placeholder": "Enter your headquarters",
+    "phone": "Phone number",
+    "phone-placeholder": "Enter your phone number",
+    "address": "Address",
+    "address-placeholder": "Enter your address",
+    "account-name": "Account name",
+    "account-name-placeholder": "Enter your account name",
+    "account-number": "Account number",
+    "account-number-placeholder": "Enter your accoutn number",
+    "bank": "Bank",
+    "bank-placeholder": "Enter your bank",
+    "bank-branch": "Bank branch",
+    "bank-branch-placeholder": "Enter your bank branch",
+    "legal-representative": "Legal representative",
+    "legal-representative-placeholder": "Enter your name legal representative",
+    "position": "Position",
+    "position-placeholder": "Enter your position",
+    "authorization-letter": "Authorization letter",
+    "authorization-letter-placeholder": "Enter your authorization letter",
+    "sign-date": "Sign-date",
+    "dob": "D.O.B",
+    "gender": "Gender",
+    "male": "Male",
+    "female": "Female",
+    "password": "Password",
+    "password-placeholder": "Enter password",
+    "confirm-password": "Confirm password",
+    "confirm-password-placeholder": "Enter confirm password",
+    "error-messages": {
+      "error-fullname": {
+        "blank": "Fullname cannot be blank!",
+        "minimum": "Fullname must be at least 2 characters!",
+        "maximum": "Fullname can only enter up to 250 characters!",
+        "type": "Fullname can only be entered in letters!"
+      },
+      "error-email": {
+        "blank": "Email cannot be blank!",
+        "valid": "Email must be a valid email address!",
+        "maximum": "Email can only enter up to 250 characters!"
+      },
+      "error-phone": {
+        "blank": "Phone number cannot be blank!",
+        "maxlength": "Phone number can only enter up to 10 characters!",
+        "format": "Invalid phone number!"
+      },
+      "error-address": "The address is only allowed to enter up to 250 characters!",
+      "error-password": {
+        "blank": "Password cannot be blank!",
+        "format": "Password must have at least 8 characters, 1 lowercase character and 1 number.",
+        "maximum": "Password cannot be more than 250 characters!"
+      },
+      "error-confirm-password": {
+        "blank": "Confirm password cannot be blank!",
+        "format": "Confirm password must have at least 8 characters, 1 lowercase character, 1 uppercase character, 1 special character, and 1 number.",
+        "maximum": "Confirm password cannot be more than 250 characters!",
+        "valid": "Incorrect confirm password!"
+      },
+      "error-school-name": {
+        "blank": "School name cannot be blank!",
+        "maximum": "School name cannot be more than 250 characters!"
+      },
+      "error-required": {
+        "province": "Province cannot be blank !",
+        "district": "District cannot be blank !",
+        "wards": "Wards cannot be blank !",
+        "school": "School cannot be blank !"
+      }
+    },
+    "enterprise-name": "Enterprise Name",
+    "enterprise-name-placeholder": "Enter your enterprise name",
+    "enterprise-code": "Enterprise Code",
+    "enterprise-date-register": "Enterprise registration date",
+    "school-name": "School name",
+    "school-name-placeholder": "Input school name"
+  },
+  "home": {
+    "package-purchased": "Purchased newspapers/books",
+    "package-license": "Buy license newspapers/books",
+    "home-tab-linkname": {
+      "press-agency": "Package by press agency",
+      "author": "Package by author",
+      "category": "Package by category",
+      "event": "Package by event"
+    },
+    "package": "Package",
+    "total-package": "Total Packages",
+    "total-newpaper": "Total number of newspapers"
+  },
+  "package-hot": {
+    "title": "Hot package"
+  },
+  "home-book-license": {
+    "title": "License book",
+    "comment": "comment",
+    "best-sellers": "Best sellers",
+    "sale": "Top sale",
+    "science-tech": "Science & Technology",
+    "business": "Business",
+    "literature": "Literature",
+    "text-book": "Textbook",
+    "kids": "Kids",
+    "parenting-family": "Parenting & Family",
+    "healthy": "Diet, Health & Fitness",
+    "biography": "Biography",
+    "poetry": "Poetry",
+    "mystery": "Mystery & Crime",
+    "psychology": "Psychology"
+  },
+  "product-service": {
+    "title": "Offers for readers (Coming soon)",
+    "product-item": {
+      "donors": "Sponsored by VnEconomy",
+      "status": "Status",
+      "status-content": "Stocking",
+      "comment": "comment",
+      "sold": "Sold",
+      "product": "products"
+    },
+    "categories": {
+      "men-clothes": "Men Clothes",
+      "mobile": "Mobile & Gadgets",
+      "electronics": "Consumer Electronics",
+      "computer": "Computer & Accessories",
+      "watches": "Watches",
+      "men-shoes": "Men Shoes",
+      "home-app": "Home Application",
+      "outdoor": "Sport & Outdoor",
+      "automotive": "Automotive",
+      "home-living": "Home & Living"
+    }
+  },
+  "event-news-item": {
+    "title": "News"
+  },
+  "home-partner-intro": {
+    "title": "Featured editorial office"
+  },
+  "package-detail": {
+    "duration": "Duration",
+    "registered-count": "registered person",
+    "price": "Price",
+    "publishing-company": "Publishing company",
+    "description": "Description",
+    "magazine": "Magazine",
+    "view": "views",
+    "latest-newspapers": "Latest newspapers"
+  },
+  "newspaper-detail": {
+    "magazine-related": "Related Magazine",
+    "description": "Description",
+    "editorial-office": "Editorial office"
+  },
+  "office-detail": {
+    "host-unit": "Host unit",
+    "domain": "Web",
+    "phone": "Phone number",
+    "email": "Email",
+    "address": "Address",
+    "package-list": "Package list",
+    "NEWPAPER_LIST": "Issue list",
+    "intro": "Introduction",
+    "placeholder-search": "Enter the name of the editorial office...",
+    "lst-of-user": "PACKAGE LIST CURRENTLY REGISTERED"
+  },
+  "my-package": {
+    "noti-not-subscript": "You don't have any subscriptions yet.",
+    "packages-purchased": "Packages purchased",
+    "amount": "Amount",
+    "duration": "Duration",
+    "day": "days left",
+    "con": "",
+    "granted": "Granted",
+    "can-grant": "Can grant",
+    "message": {
+      "message-buy-package-by-office": "You have not purchased any package according to the press, please click",
+      "message-buy-package-by-author": "You have not purchased any packages by author, please click",
+      "message-buy-package-by-category": "You have not purchased any package by category, please click",
+      "message-buy-package-by-event": "You have not purchased any package according to the event, please click"
+    },
+    "care": "Maybe you are interested",
+    "articles-list": "List of newspaper",
+    "expired-package": "Expired package",
+    "newspaper": "newspaper",
+    "there-are": "There are",
+    "status": {
+      "subscriber": "Subscriber",
+      "reader": "Reader",
+      "trial": "Trial",
+      "expired": "Expired"
+    }
+  },
+  "package-related": {
+    "title": "Related packages"
+  },
+  "package-trial": {
+    "status": "Status",
+    "days": "days",
+    "trial": "Trial",
+    "duration": "Duration",
+    "register-notice": "You can only register for a trial once",
+    "money-pay": "The money have to pay",
+    "articles-list": "News articles list"
+  },
+  "add-user": {
+    "reader-list": "Reader list",
+    "notice": "User must be in the system",
+    "subscribers": "Subscribers"
+  },
+  "payment": {
+    "title": "Payment",
+    "total-product-cost": "Total Product Cost",
+    "total": "Total",
+    "amount": "Amount:",
+    "money": "Money:",
+    "placeholder-code": "Enter your code",
+    "apply": "Apply",
+    "bank-transfer": "Bank transfer",
+    "payment-gateway": "Payment gateway",
+    "invoice": "Invoice",
+    "msg": {
+      "success": "You have successfully paid",
+      "fail": "Payment failed"
+    },
+    "info-company": {
+      "name": "Company name",
+      "name-placeholder": "Enter at least 2 words",
+      "address": "Company address",
+      "address-placeholder": "Enter company address",
+      "tax-code": "Tax code",
+      "tax-code-placeholder": "Enter tax code",
+      "email": "Email (receive e-invoice)",
+      "email-placeholder": "Enter your email"
+    }
+  },
+  "payment-info": {
+    "package-info": "Package information",
+    "package-name": "Package name:",
+    "price": "Price:",
+    "editorials": "Editorials:",
+    "amount": "Amount:",
+    "total": "Total",
+    "transfer-info": "Bank transfer information",
+    "bank-name": "Bank name:",
+    "bank-number": "Bank number:",
+    "bank-account": "Bank account:",
+    "content-transfer": "Transfer content",
+    "copy-content": "copy transfer content",
+    "note-1": "Transfer content must be exactly above",
+    "note-2": "We will quickly approve the package once payment information is received",
+    "home": "Home"
+  },
+  "search-page": {
+    "showing": "Showing",
+    "result-count": " results for:",
+    "select-office": "Select editorial offices",
+    "noti-not-found-large": "Hmm, we didn't find anything",
+    "noti-not-found-small": "Widen your search, or check back later."
+  },
+  "error-interceptor": {
+    "expiredSignin": "Login session has expired, please signin again!",
+    "link": "Link not found!",
+    "access": "Access is not allowed!",
+    "execution": "Execution not allowed!",
+    "server": "Server-side response error!",
+    "browser": "The webside you requested cannot be downloaded in your current browser!",
+    "noti": "Notify",
+    "processing": "Processing..."
+  },
+  "profile": {
+    "info": "Current information",
+    "registered-package": "Registered package",
+    "registered-history": "Registration history",
+    "get-all": "all",
+    "change-info": "Change personal information",
+    "change-password": "Change password",
+    "old-password": "Old password",
+    "new-password": "New password",
+    "confirm-password": "Confirm password",
+    "err-address": "Address cannot be blank!",
+    "placeholder-old-password": "Enter the old password",
+    "placeholder-new-password": "Enter the new password",
+    "placeholder-confirm-password": "Enter the confirm password"
+  },
+  "verify-email": {
+    "msg-success": "Successful account registration",
+    "msg-success-sentences": "<h5>Thank you for registering an account on Post ENP.<br>We have sent an account verification email to your registered email address.<br>Please check your email inbox to complete the authentication and use your account on Post ENP. Thank you!</h5>",
+    "msg-check": "<p>If you cannot find it, please check your <span>Spam/Junk mailbox</span>.</p>",
+    "msg-verify-success": "<h3>Your registered email address has been verified.<br>Please login to use the services of Post ENP</h3>",
+    "msg-verify-fail": "<h6>Your authentication period has expired. Please re-verify your email!</h6>",
+    "return-home-btn": "Back to Sign in page"
+  },
+  "cta": {
+    "see-more": "See more",
+    "buy": "Buy now",
+    "buy2": ", buy now",
+    "add": "Add to cart",
+    "trial": "Free trial",
+    "register": "Buy",
+    "read": "Read",
+    "preview": "Preview",
+    "detail": "Detail",
+    "cancel": "Cancel",
+    "re-register": "Re-register",
+    "upgrade": "Upgrade",
+    "add-reader": "Add reader",
+    "return": "Return",
+    "pay": "Pay",
+    "select": "Select file",
+    "save": "Save",
+    "delete": "Delete",
+    "read_one_new": "To read the latest post",
+    "contact_to_buy": "Contact 1800585855 to buy",
+    "trial_2": "Trial"
+  },
+  "breadcrumb": {
+    "home": "Home",
+    "package-detail": "Package detail",
+    "magazine-detail": "Magazine detail",
+    "office-detail": "Editorial office detail",
+    "my-package": "My package",
+    "my-newspaper": "My newspaper",
+    "trial-package": "Trial the",
+    "purchased-package": "Purchased package",
+    "reader-manage": "Reader manage",
+    "payment": "Payment",
+    "package-history": "Package history",
+    "license-newspaper": "License newspaper",
+    "read-newspaper": "Read newspaper"
+  },
+  "package-type": {
+    "pdf": "PDF",
+    "author": "Author",
+    "category": "Category",
+    "event": "Event",
+    "showPackageExpired": "Show expired packages"
+  },
+  "TYPES": {
+    "PDF": "Long term package PDF",
+    "AUTHOR": "Author",
+    "CATEGORY": "Category",
+    "EVENT": "Event",
+    "NEWPAPER": "Newpaper"
+  },
+  "detail": {
+    "package-info": "Package information",
+    "registered-count": "registered person",
+    "price": "Price",
+    "numerical-order": "No.",
+    "package-name": "Package name",
+    "expire-date": "Expire date",
+    "view": "views",
+    "sold": "Sold",
+    "products": "products",
+    "publishing-company": "Publishing company",
+    "office": "Editorial office",
+    "amount": "Amount",
+    "duration": "Duration",
+    "articles-list": "News articles list",
+    "host-unit": "Host unit",
+    "domain": "Domain",
+    "press-agency": "Press agency",
+    "granted": "Granted",
+    "can-grant": "Can grant",
+    "fullname": "Fullname",
+    "dob": "Day of birth",
+    "sign-date": "Sign-date",
+    "phone": "Phone number",
+    "email": "Email",
+    "address": "Address"
+  },
+  "myPackage": {
+    "sweetAlert": {
+      "delete": {
+        "title": "Cancel package",
+        "text": "Do you want to cancel package?"
+      },
+      "cancelButtonColor": "Cancel",
+      "confirmButtonText": "Accept",
+      "askonomy": {
+        "title": "Coming soon",
+        "html": "Testing period is over</br>The official version will be updated soon</br>Best regards!",
+        "close": "Đóng"
+      }
+    },
+    "toastr": {
+      "titleSuccess": "Success",
+      "textDeleteSuccess": "Delete package successfully"
+    }
+  },
+  "errToastrProfile": {
+    "success": "Successful",
+    "infoChangedSuccess": "Change profile information successfully!",
+    "uploadFileFail": "Error uploading image file",
+    "invalidImgFile": "Uploaded image is not an image file",
+    "invalidSizeImgFile": "Uploaded photos must not exceed 5Mb",
+    "imgChangedSuccess": "Change photo successfully!",
+    "passwordChangedSuccess": "Change password successfully!"
+  },
+  "my-newspaper": {
+    "title": "Purchased newspaper",
+    "msg-empty": "You have not subscribed to any newspapers yet!"
+  },
+  "introduceEditorialOffice": {
+    "title": "About the editorial office",
+    "allSearch": {
+      "id": 1,
+      "name": "All"
+    }
+  },
+  "introduceAuthor": {
+    "title": "About the author",
+    "allSearch": {
+      "id": 1,
+      "name": "All"
+    }
+  },
+  "view-book": {
+    "price-sale": "Sale:",
+    "view": "View:",
+    "content": "Content",
+    "preview": "Preview",
+    "part": "Part"
+  },
+  "modal-login": {
+    "title": "Login",
+    "forgot": "Forgot password?"
+  },
+  "modal-register": {
+    "title": "Register"
+  },
+  "forgot-password": {
+    "title": "Forgot password?",
+    "content": "Enter the email that you registered before and click restore. You will receive an email with your username and a link to set a new password for your account.",
+    "placeholder": "Enter your email",
+    "btn-send": "Send mail",
+    "btn-back": "Back",
+    "error-mail": "Email must be a valid address",
+    "blank-email": "Email cannot be blank"
+  },
+  "page-news": {
+    "home": "Home",
+    "title": "News",
+    "hot": "Latest",
+    "view-more": "View more",
+    "view": "view",
+    "title-breadcrumb": "News, Profile newsroom, journalists",
+    "news-by-category": "News by category",
+    "news-new": "News",
+    "news-hot": "Featured news"
+  },
+  "price": {
+    "name": "$"
+  },
+  "package-new-hot": "New Posts",
+  "NEWSPAPER": {
+    "RELATED": {
+      "TITLE": "Related content"
+    }
+  },
+  "VNECONOMY": {
+    "ASKONOMY": {
+      "SUMMARY1": "Askonomy is an AI chatbot exclusively developed by VnEconomy.",
+      "SUMMARY2": "Askonomy is designed to be everyone's ”Economic Information Assistant”, and is capable of harnessing the huge, comprehensive, and reliable database of Vietnam Economic Times and VnEconomy over the past 30 years to provide a precise answer immediately upon request.",
+      "FEATURES": {
+        "TITLE": "Exclusive Features of Askonomy:",
+        "FEATURE1": "Extract accurate economic data immediately.",
+        "FEATURE2": "Real-time updates.",
+        "FEATURE3": "Data visualization in charts and graphs.",
+        "FEATURE4": "Utilizes exclusive and credible data from Vietnam Economic Times / VnEconomy.",
+        "FEATURE5": "Capable of processing information in both Vietnamese and English."
+      },
+      "SIGN_UP_FOR_PREMIUM": "Sign up for Premium Package to explore Askonomy!",
+      "EXPLORE_NOW": "Explore now"
+    },
+    "PACKAGE": {
+      "TCKTVN": "Tap Chi Kinh Te Viet Nam",
+      "ECONOMIC_TIMES": "Vietnam Economic Times",
+      "NGKTVN": "Nien Giam Kinh Te Viet Nam & The Gioi",
+      "SHOW_ALL": "Show all"
+    },
+    "PAGE_PACKAGES": {
+      "DIGITAL": "Digital Subscription Packages",
+      "TCKTVN": "Tap Chi Kinh Te Viet Nam",
+      "ECONOMIC_TIMES": "Vietnam Economic Times",
+      "PREMIUM": "Premium Package",
+      "ASKONOMY_AI_CHATBOT": "Askonomy AI Chatbot - 12-Month Subscription",
+      "DAILY_HIGHLIGHTS": "Daily Highlights by VnEconomy",
+      "DIGITAL_EDITION": "Tap Chi Kinh Te Vietnam - 12-Month Subscription for Digital Edition"
+    }
+  }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/assets/i18n/vi.json b/Phaha_Package/src/assets/i18n/vi.json
new file mode 100644
index 0000000..4d1ed25
--- /dev/null
+++ b/Phaha_Package/src/assets/i18n/vi.json
@@ -0,0 +1,637 @@
+{
+  "PROMOTION_UNTIL_MAY_40": "Promotion until May 40",
+  "RELEASE_DATE": "Ngày phát hành",
+  "NUMBER_OF_PAGES": "Số trang",
+  "LANGUAGE": "Ngôn ngữ",
+  "TYPE": "Loại hình",
+  "MAGAZINE": "Tạp chí",
+  "PROOFREAD": "Đọc thử",
+  "PREMIUM_PACKAGE": "Gói Premium",
+  "YEAR": "Năm",
+  "12_MONTH": "12 tháng sử dụng Chatbot AI Askonomy",
+  "DAILY_VNECONOMY": "Tin nổi bật hàng ngày của VnEconomy",
+  "12_MONTH_SUBSCRIPTION": "12 tháng đọc Tạp chí Kinh tế Việt Nam trên nền tảng số",
+  "BUY_NOW": "Mua ngay",
+  "VNECONOMY_HOME_PAGE": "Trang chủ VnEconomy",
+  "BENEFITS_INCLUDE": "Gói Premium bao gồm các quyền lợi sau:",
+  "AI_CHATBOT_12_MONTH": "12 tháng sử dụng Chatbot AI Askonomy",
+  "AN_EXCLUSIVE_AI_PRODUCT": "Đây là trợ lý thông tin kinh tế độc quyền do VnEconomy phát triển nhằm khai thác kho dữ liệu kinh tế tổng hợp, chuyên sâu trên các ấn phẩm của Tạp chí Kinh tế Việt Nam / VnEconomy trong hơn 30 năm và các nguồn chính thống khác nhằm cung cấp cho độc giả các dữ liệu, số liệu về kinh tế nhanh chóng và chính xác",
+  "DAILY_HIGHLIGHTS": "Tin nổi bật hàng ngày của VnEconomy",
+  "AN_EXTENDED_FEATURE_UTILIZING": "Đây là chức năng mở rộng của chatbot AI Askonomy - tự động tóm tắt ngắn gọn, súc tích, có chọn lọc các tin tức nổi bật nhất trên VnEconomy hàng ngày, giúp độc giả cập nhật được những thông tin quan trọng nhất trong khoảng thời gian ngắn nhất",
+  "FOR_DIGITAL_EDITION": "12 tháng đọc Tạp chí Kinh tế Việt Nam trên nền tảng số",
+  "ENJOY_EXCLUSIVE_BENEFITS": "Trải nghiệm cảm xúc đọc ấn phẩm in trên nền tảng số (bản PDF) với nhiều lợi ích như: các bài viết độc quyền, được đọc sớm trước 02 ngày so với ấn phẩm in, đọc mọi lúc mọi nơi và trên mọi thiết bị",
+  "SIGN_UP": "Mua ngay",
+  "TAP_CHI_KINH_TE_VIET_NAM": "Tạp chí Kinh tế Việt Nam",
+  "HOT_NEWS": "Tin nổi bật",
+  "DATE": "Ngày",
+  "EXPERIENCE_NOW": "Trải nghiệm ngay",
+  "THANK_YOU_1": "Vneconomy là trang báo rất uy tín với nhiều thông tin phân tích sâu. Trong quá trình làm khóa luận thạc sĩ, tôi đã tham khảo rất nhiều thông tin hữu ích, cảm ơn VnEconomy",
+  "THANK_YOU_2": "Tạp chí Kinh Tế Việt Nam không chỉ là nơi đọc tin tức và còn giúp tôi có thêm rất nhiều kiến thức mới. Tuyến nội dung chuyên biệt giúp doanh nghiệp như chúng tôi có những bước đi, chiến lược mới phù hợp với diễn biến kinh tế chung.",
+  "THANK_YOU_3": "A new and modern newspaper reading experience, previously only available when reading international newspapers",
+  "MANAGING_UNIT": "Đơn vị chủ quản",
+  "VIETNAM_ASSOCIATION_OF_ECONOMIC_SCIENCES": "Hội Khoa học Kinh tế Việt Nam",
+  "PHONE_NUMBER": "Số điện thoại",
+  "ADDRESS": "Địa chỉ",
+  "NO_96_98_HOANG_QUOC_VIET": "Số 96-98 Hoàng Quốc Việt, Cầu Giấy, Hà Nội",
+  "DOMAIN": "Tên miền",
+  "REGISTER_NOW": "ĐĂNG KÝ NGAY",
+  "EXPERIENCE_THE_PACKAGES": "Trải nghiệm các gói của Tạp chí Kinh tế Việt Nam",
+  "SIGN_UP_FOR_PACKAGE": "ĐĂNG KÝ GÓI",
+  "header": {
+    "register-member": "Đăng ký thành viên",
+    "get-offer": "Nhận liền ưu đãi",
+    "select-payment": "Lựa chọn & Thanh toán",
+    "safe-convenient": "An toàn, tiện lợi",
+    "read-book-newspaper": "Đọc sách/báo bản quyền",
+    "unlimit": "Không giới hạn, đa dạng",
+    "button": {
+      "sign-in": "Đăng nhập",
+      "sign-up": "Đăng ký"
+    },
+    "search": "Nhập từ khoá",
+    "notification": "Thông báo",
+    "news": "mới",
+    "read-all": "Đọc tất cả",
+    "current-user": {
+      "profile": "Trang cá nhân",
+      "my-package": "Đọc báo bản quyền",
+      "my-newspaper": "Tạp chí đã mua",
+      "log-out": "Đăng xuất",
+      "code": "Nhập mã code"
+    },
+    "category-menu": {
+      "title-main": "Danh mục",
+      "title-newspaper": "Báo - Tạp chí",
+      "title-book": "Sách",
+      "title-product": "Hàng hoá"
+    }
+  },
+  "footer": {
+    "content-title": {
+      "info": "Về POSTENP",
+      "customer-support": "Hỗ trợ khách hàng",
+      "contact": "Địa chỉ liên hệ",
+      "process-policy": "Quy trình - Chính sách",
+      "follow": "Theo dõi"
+    },
+    "content-link": {
+      "info": {
+        "link": "Điều khoản sử dụng & chính sách bảo mật"
+      },
+      "contact": {
+        "Hanoi": "Số 17 phố Đinh Lễ, quận Hoàn Kiếm, Hà Nội",
+        "Danang": "377 Nguyễn Văn Linh, Hải Châu, Đà Nẵng",
+        "HCM": "43 Hồ Văn Huê, Phú Nhuận, TP.HCM"
+      },
+      "process-policy": {
+        "payment": "Chính sách thanh toán",
+        "delivery": "Chính sách vận chuyển",
+        "exchange": "Chính sách đổi trả",
+        "warranty": "Chính sách bảo hành"
+      },
+      "mobile-app": {
+        "ios": "Hệ điều hành IOS",
+        "android": "Hệ điều hành Android",
+        "version": "Phiên bản ứng dụng",
+        "release-dates": "Ngày đăng"
+      }
+    }
+  },
+  "sign-in": {
+    "title": "Đăng nhập",
+    "usename": "Tên đăng nhập",
+    "password": "Mật khẩu",
+    "remember": "Ghi nhớ đăng nhập",
+    "forgot-password": "Quên mật khẩu?",
+    "register-now": "Đăng ký ngay.",
+    "not-account": "Bạn chưa có tài khoản?",
+    "error-messages": {
+      "error-username": "Tên đăng nhập không được để trống!",
+      "error-password": "Mật khẩu không được để trống!"
+    }
+  },
+  "sign-up": {
+    "login-now": "Đăng nhập ngay.",
+    "has-account": "Bạn đã có tài khoản?",
+    "placeholder-school": "Chọn trường học",
+    "placeholder-province": "Chọn tỉnh/thành phố",
+    "placeholder-district": "Chọn quận/huyên",
+    "placeholder-wards": "Chọn xã/phường",
+    "school": "Trường học",
+    "province": "Tỉnh/Thành phố",
+    "district": "Quận/Huyện",
+    "wards": "Xã/phường",
+    "title-item-1": "Thông tin doanh nghiệp",
+    "title-item-2": "Thông tin ngân hàng",
+    "personal": "Cá nhân",
+    "enterprise": "Doanh nghiệp",
+    "student": "Học sinh",
+    "title": "Đăng ký",
+    "fullname": "Họ và tên",
+    "fullname-placeholder": "Nhập họ và tên",
+    "email": "Email",
+    "taxcode": "Mã số thuế",
+    "taxcode-placeholder": "Nhập mã số thuế",
+    "email-placeholder": "Nhập địa chỉ email",
+    "headquarters": "Trụ sở chính",
+    "headquarters-placeholder": "Nhập địa chỉ trụ sở chính",
+    "phone": "Số điện thoại",
+    "phone-placeholder": "Nhập số điện thoại",
+    "address": "Địa chỉ",
+    "address-placeholder": "Nhập địa chỉ hiện tại",
+    "account-name": "Tên tài khoản",
+    "account-name-placeholder": "Nhập tên tài khoản",
+    "account-number": "Số tài khoản",
+    "account-number-placeholder": "Nhập số tài khoản",
+    "bank": "Ngân hàng",
+    "bank-placeholder": "Nhập tên ngân hàng",
+    "bank-branch": "Chi nhánh",
+    "bank-branch-placeholder": "Nhập chi nhánh ngân hàng",
+    "legal-representative": "Người đại diện",
+    "legal-representative-placeholder": "Nhập tên người đại diện",
+    "position": "Vị trí",
+    "position-placeholder": "Nhập vị trí",
+    "authorization-letter": "Giấy tờ ủy quyền số",
+    "authorization-letter-placeholder": "Nhập số giấy tờ ủy quyền",
+    "sign-date": "Ngày ký",
+    "dob": "Ngày sinh",
+    "gender": "Giới tính",
+    "male": "Nam",
+    "female": "Nữ",
+    "password": "Mật khẩu",
+    "password-placeholder": "Nhập mật khẩu",
+    "confirm-password": "Xác nhận lại mật khẩu",
+    "confirm-password-placeholder": "Nhập lại mật khẩu",
+    "error-messages": {
+      "error-fullname": {
+        "blank": "Họ và tên không được để trống!",
+        "minimum": "Họ và tên tối thiểu phải 2 ký tự!",
+        "maximum": "Họ và tên chỉ được nhập tối đa 250 ký tự!",
+        "type": "Họ và tên chỉ được nhập chữ!"
+      },
+      "error-email": {
+        "blank": "Email không được để trống!",
+        "valid": "Email phải là một địa email hợp lệ!",
+        "maximum": "Email chỉ được nhập tối đa 250 ký tự!"
+      },
+      "error-phone": {
+        "blank": "Điện thoại không được để trống!",
+        "maxlength": "Điện thoại tối đa 10 ký tự!",
+        "format": "Số điện thoại không đúng định dạng!"
+      },
+      "error-address": "Địa chỉ chỉ được phép nhập tối đa 250 ký tự!",
+      "error-password": {
+        "blank": "Mật khẩu không được để trống!",
+        "format": "Mật khẩu tối thiểu phải có 8 ký tự, 1 ký tự thường, 1 chữ số.",
+        "maximum": "Mật khẩu không được nhập quá 250 ký tự!"
+      },
+      "error-confirm-password": {
+        "blank": "Xác nhận mật khẩu không được để trống!",
+        "format": "Xác nhận mật khẩu tối thiểu phải có 8 ký tự, 1 ký tự thường, 1 ký tự in hoa, 1 ký tự đặc biệt, 1 chữ số.",
+        "maximum": "Xác nhận mật khẩu không được nhập quá 250 ký tự!",
+        "valid": "Xác nhận mật khẩu không đúng!"
+      },
+      "error-enterprise-name": {
+        "blank": "Tên doanh nghiệp không được để trống!",
+        "minimum": "Tên doanh nghiệp phải tối thiểu 2 ký tự!",
+        "maximum": "Tên doanh nghiệp chỉ được nhập tối đa 250 ký tự!"
+      },
+      "error-school-name": {
+        "blank": "Tên trường học không được để trống!",
+        "minimum": "Tên trường học phải tối thiểu 2 ký tự!",
+        "maximum": "Tên trường học chỉ được nhập tối đa 250 ký tự!"
+      },
+      "error-required": {
+        "province": "Tỉnh/Thành phố không được để trống !",
+        "district": "Quận/Huyện không được để trống!",
+        "wards": "Xã/phường không được để trống !",
+        "school": "Trường học không được để trống !"
+      }
+    },
+    "enterprise-name": "Tên doanh nghiệp",
+    "enterprise-name-placeholder": "Nhập tên doanh nghiệp",
+    "enterprise-code": "Mã số doanh nghiệp",
+    "enterprise-date-register": "Ngày đăng ký",
+    "school-name": "Tên trường học",
+    "school-name-placeholder": "Nhập tên trường học"
+  },
+  "home": {
+    "package-purchased": "Báo/sách đã mua",
+    "package-license": "Mua báo/sách bản quyền",
+    "home-tab-linkname": {
+      "press-agency": "Gói theo cơ quan báo chí",
+      "author": "Gói theo tác giả",
+      "category": "Gói theo chuyên mục",
+      "event": "Gói theo sự kiện"
+    },
+    "package": "Gói tin",
+    "total-package": "Tổng số gói",
+    "total-newpaper": "Tổng số tạp chí"
+  },
+  "package-hot": {
+    "title": "Gói nổi bật"
+  },
+  "home-book-license": {
+    "title": "Sách bản quyền",
+    "comment": "nhận xét",
+    "best-sellers": "Top sách bán chạy",
+    "sale": "Top sách giảm giá",
+    "science-tech": "Sách Khoa học và Kỹ thuật",
+    "business": "Sách Kinh doanh",
+    "literature": "Sách Văn học",
+    "text-book": "Sách Giáo khoa",
+    "kids": "Sách Thiếu nhi",
+    "parenting-family": "Sách Chăm sóc gia đình",
+    "healthy": "Sách Sức khoẻ",
+    "biography": "Sách Tiểu sử",
+    "poetry": "Tập thơ",
+    "mystery": "Sách Trinh thám",
+    "psychology": "Sách Tâm lý"
+  },
+  "product-service": {
+    "title": "Ưu đãi độc giả (Coming soon)",
+    "product-item": {
+      "donors": "Được tài trợ bởi VnEconomy",
+      "status": "Tình trạng",
+      "status-content": "Còn hàng",
+      "comment": "nhận xét",
+      "sold": "Đã bán",
+      "product": "sản phẩm"
+    },
+    "categories": {
+      "men-clothes": "Thời Trang Nam",
+      "mobile": "Điện Thoại & Phụ Kiện",
+      "electronics": "Thiết Bị Điện Tử",
+      "computer": "Máy Tính & Laptop",
+      "watches": "Đồng Hồ",
+      "men-shoes": "Giày Dép Nam",
+      "home-app": "Thiết Bị Điện Gia Dụng",
+      "outdoor": "Thể Thao & Du Lịch",
+      "automotive": "Ô Tô & Xe Máy & Xe Đạp",
+      "home-living": "Nhà Cửa & Đời Sống"
+    }
+  },
+  "event-news-item": {
+    "title": "Tin tức"
+  },
+  "home-partner-intro": {
+    "title": "Toà soạn nổi bật"
+  },
+  "package-detail": {
+    "duration": "Thời hạn",
+    "registered-count": "người đã đăng ký",
+    "price": "Giá",
+    "publishing-company": "Nhà xuất bản",
+    "description": "Mô tả",
+    "magazine": "Tạp chí",
+    "view": "lượt xem",
+    "latest-newspapers": "Báo mới nhất"
+  },
+  "newspaper-detail": {
+    "magazine-related": "Tạp chí liên quan",
+    "description": "Mô tả",
+    "editorial-office": "Toà soạn"
+  },
+  "office-detail": {
+    "host-unit": "Đơn vị chủ quản",
+    "domain": "Tên miền",
+    "phone": "Số điện thoại",
+    "email": "Email",
+    "address": "Địa chỉ",
+    "package-list": "Danh sách gói",
+    "NEWPAPER_LIST": "Danh sách số báo",
+    "intro": "Giới thiệu",
+    "placeholder-search": "Nhập tên tòa soạn...",
+    "lst-of-user": "DANH SÁCH GÓI HIỆN ĐANG ĐĂNG KÝ"
+  },
+  "my-package": {
+    "noti-not-subscript": "Bạn chưa có gói nào được đăng ký",
+    "packages-purchased": "Các gói đã mua",
+    "amount": "Số lượng",
+    "duration": "Thời hạn",
+    "day": "Ngày",
+    "con": "Còn",
+    "granted": "Đã cấp",
+    "can-grant": "Có thể cấp",
+    "message": {
+      "message-buy-package-by-office": "Bạn chưa mua gói nào theo cơ quan báo chí, vui lòng click",
+      "message-buy-package-by-author": "Bạn chưa mua gói nào theo tác giả, vui lòng click",
+      "message-buy-package-by-category": "Bạn chưa mua gói nào theo chuyên mục, vui lòng click",
+      "message-buy-package-by-event": "Bạn chưa mua gói nào theo sự kiện, vui lòng click"
+    },
+    "care": "Có thể bạn quan tâm",
+    "articles-list": "Danh sách tạp chí",
+    "expired-package": "Gói hết hạn",
+    "newspaper": "tạp chí",
+    "there-are": "Có",
+    "status": {
+      "subscriber": "Người đăng ký",
+      "reader": "Người đọc",
+      "trial": "Dùng thử",
+      "expired": "Gói hết hạn"
+    }
+  },
+  "package-related": {
+    "title": "Gói liên quan"
+  },
+  "package-trial": {
+    "status": "Trạng thái",
+    "days": "ngày",
+    "trial": "Dùng thử",
+    "duration": "Thời hạn",
+    "register-notice": "Chỉ được đăng ký dùng thử 1 lần",
+    "money-pay": "Số tiền phải trả",
+    "articles-list": "Danh sách tin bài"
+  },
+  "add-user": {
+    "reader-list": "Danh sách người đọc",
+    "notice": "Người dùng phải có trong hệ thống",
+    "subscribers": "Người đăng ký"
+  },
+  "payment": {
+    "title": "Thanh toán",
+    "total-product-cost": "Thành tiền",
+    "total": "Tổng tiền",
+    "money": "Thành tiền:",
+    "amount": "Số lượng:",
+    "placeholder-code": "Nhập mã code",
+    "apply": "Áp dụng",
+    "bank-transfer": "Chuyển khoản",
+    "payment-gateway": "Cổng thanh toán",
+    "invoice": "Xuất hóa đơn",
+    "msg": {
+      "success": "Bạn đã thanh toán thành công",
+      "fail": "Thanh toán không thành công"
+    },
+    "info-company": {
+      "name": "Tên công ty",
+      "name-placeholder": "Tối thiểu 2 từ",
+      "address": "Địa chỉ",
+      "address-placeholder": "Địa chỉ công ty",
+      "tax-code": "Mã số thuế",
+      "tax-code-placeholder": "Nhập mã số thuế",
+      "email": "Email (Nhận hóa đơn điện tử)",
+      "email-placeholder": "Nhập địa chỉ email"
+    }
+  },
+  "payment-info": {
+    "package-info": "Thông tin gói",
+    "package-name": "Tên gói:",
+    "price": "Giá tiền:",
+    "editorials": "Tòa soạn:",
+    "amount": "Số lượng:",
+    "total": "Tổng tiền",
+    "transfer-info": "Thông tin chuyển khoản",
+    "bank-name": "Ngân hàng:",
+    "bank-number": "Số tài khoản:",
+    "bank-account": "Chủ tài khoản:",
+    "content-transfer": "Nội dung chuyển khoản",
+    "copy-content": "copy nội dung chuyển khoản",
+    "note-1": "Nội dung chuyển khoản phải chính xác phía trên",
+    "note-2": "Chúng tôi sẽ nhanh chóng duyệt gói sau khi nhận được thông tin thanh toán",
+    "home": "Trang chủ"
+  },
+  "search-page": {
+    "showing": "Tìm thấy",
+    "result-count": " kết quả tìm kiếm với:",
+    "select-office": "Chọn toà soạn",
+    "noti-not-found-large": "Không có kết quả tìm kiếm phù hợp với từ khoá.",
+    "noti-not-found-small": "Vui lòng thử lại với từ khoá khác hoặc kiểm tra lại sau."
+  },
+  "error-interceptor": {
+    "expiredSignin": "Phiên đăng nhập đã hết hạn, bạn vui lòng đăng nhập lại!",
+    "link": "Không tìm thấy đường dẫn!",
+    "access": "Không được phép truy cập!",
+    "execution": "Không được phép thực thi!",
+    "server": "Lỗi phản hồi từ phía máy chủ!",
+    "browser": "Trang web bạn yêu cầu không thể tải xuống trình duyệt web hiện tại!",
+    "noti": "Thông báo",
+    "processing": "Đang xử lý..."
+  },
+  "profile": {
+    "info": "Thông tin hiện tại",
+    "registered-package": "Gói đã đăng ký",
+    "registered-history": "Lịch sử đăng ký",
+    "get-all": "Toàn bộ",
+    "change-info": "Thay đổi thông tin cá nhân",
+    "change-password": "Thay đổi mật khẩu",
+    "old-password": "Mật khẩu cũ",
+    "new-password": "Mật khẩu mới",
+    "confirm-password": "Xác nhận lại mật khẩu",
+    "err-address": "Địa chỉ không được để trống!",
+    "placeholder-old-password": "Nhập mật khẩu cũ",
+    "placeholder-new-password": "Nhập mật khẩu mới",
+    "placeholder-confirm-password": "Xác nhận mật khẩu"
+  },
+  "verify-email": {
+    "msg-success": "Bạn đã đăng ký thành công tài khoản trên PostEnp của Bưu điện Việt Nam!",
+    "msg-success-sentences": "Vui lòng kiểm tra email đã đăng ký để xác thực tài khoản!",
+    "msg-check": "Đăng nhập hệ thống bằng email và mật khẩu bạn đã đăng ký",
+    "msg-verify-success": "Chúc bạn có những trải nghiệm tuyệt vời cùng PostEnp!",
+    "msg-verify-fail": "<h6>Thời gian xác thực của bạn đã hết hạn. Vui lòng xác thực lại email!</h6>",
+    "return-home-btn": "Trở về trang Đăng nhập"
+  },
+  "cta": {
+    "see-more": "Xem tất cả",
+    "buy": "Mua ngay",
+    "buy2": ", mua ngay",
+    "add": "Thêm vào giỏ",
+    "trial": "Dùng thử",
+    "register": "Thanh toán",
+    "read": "Đọc báo",
+    "preview": "Xem trước",
+    "detail": "Chi tiết",
+    "cancel": "Huỷ",
+    "re-register": "Đăng ký lại",
+    "upgrade": "Nâng cấp",
+    "add-reader": "Thêm người đọc",
+    "return": "Quay lại",
+    "pay": "Thanh toán",
+    "select": "Chọn file",
+    "save": "Lưu",
+    "delete": "Xoá",
+    "read_one_new": "Để đọc số mới nhất",
+    "contact_to_buy": "Liên hệ 1800585855 để mua",
+    "trial_2": "Trải nghiệm thử"
+  },
+  "breadcrumb": {
+    "home": "Trang chủ",
+    "package-detail": "Chi tiết gói",
+    "magazine-detail": "Chi tiết tạp chí",
+    "office-detail": "Chi tiết toà soạn",
+    "my-package": "Gói của tôi",
+    "my-newspaper": "Tạp chí của tôi",
+    "trial-package": "Dùng thử gói",
+    "purchased-package": "Gói đã mua",
+    "reader-manage": "Quản lý người đọc",
+    "payment": "Thanh toán",
+    "package-history": "Lịch sử gói",
+    "license-newspaper": "Báo bản quyền",
+    "read-newspaper": "Đọc báo"
+  },
+  "package-type": {
+    "pdf": "Báo PDF",
+    "author": "Gói theo tác giả",
+    "category": "Gói theo chuyên mục",
+    "event": "Gói theo sự kiện",
+    "showPackageExpired": "Hiển thị gói hết hạn"
+  },
+  "TYPES": {
+    "PDF": "Gói dài hạn PDF",
+    "AUTHOR": "Tác giả",
+    "CATEGORY": "Chuyên mục",
+    "EVENT": "Sự kiện",
+    "NEWPAPER": "Số báo mới"
+  },
+  "detail": {
+    "package-info": "Thông tin gói",
+    "registered-count": "người đã đăng ký",
+    "price": "Giá",
+    "numerical-order": "STT",
+    "package-name": "Tên gói",
+    "expire-date": "Ngày hết hạn",
+    "view": "lượt xem",
+    "sold": "Đã bán",
+    "products": "sản phẩm",
+    "publishing-company": "Nhà xuất bản",
+    "office": "Tòa soạn",
+    "amount": "Số lượng",
+    "duration": "Thời hạn",
+    "articles-list": "Danh sách tin bài",
+    "host-unit": "Đơn vị chủ quản",
+    "domain": "Web",
+    "press-agency": "Cơ quan báo chí",
+    "granted": "Đã cấp",
+    "can-grant": "Có thể cấp",
+    "fullname": "Họ và tên",
+    "dob": "Ngày sinh",
+    "sign-date": "Ngày ký",
+    "phone": "Số điện thoại",
+    "email": "Email",
+    "address": "Địa chỉ"
+  },
+  "myPackage": {
+    "sweetAlert": {
+      "delete": {
+        "title": "Huỷ gói",
+        "text": "Bạn có muốn huỷ gói?"
+      },
+      "cancelButtonColor": "Hủy bỏ",
+      "confirmButtonText": "Đồng ý",
+      "askonomy": {
+        "title": "Coming soon",
+        "html": "Thời gian thử nghiệm kết thúc</br>Phiên bản chính thức sẽ sớm cập nhật</br>Trân trọng!",
+        "close": "Đóng"
+      }
+    },
+    "toastr": {
+      "titleSuccess": "Thành công",
+      "textDeleteSuccess": "Xóa gói thành công"
+    }
+  },
+  "errToastrProfile": {
+    "success": "Thành công",
+    "infoChangedSuccess": "Thay đổi thông tin cá nhân thành công!",
+    "uploadFileFail": "Lỗi tải file",
+    "invalidImgFile": "Ảnh tải lên không phải file ảnh",
+    "invalidSizeImgFile": "Ảnh tải lên không được vượt quá 5Mb",
+    "imgChangedSuccess": "Thay đổi ảnh thành công",
+    "passwordChangedSuccess": "Thay đổi mật khẩu thành công!"
+  },
+  "my-newspaper": {
+    "title": "Các tạp chí đã mua",
+    "msg-empty": "Bạn chưa có tạp chí nào được đăng ký!"
+  },
+  "introduceEditorialOffice": {
+    "title": "Giới thiệu tòa soạn",
+    "allSearch": {
+      "id": 1,
+      "name": "Tất cả"
+    }
+  },
+  "introduceAuthor": {
+    "title": "Giới thiệu tác giả",
+    "allSearch": {
+      "id": 1,
+      "name": "Tất cả"
+    }
+  },
+  "view-book": {
+    "price-sale": "Giá khuyếm mãi:",
+    "view": "Lượt xem:",
+    "content": "Nội dung",
+    "preview": "Bản xem trước",
+    "part": "Phần"
+  },
+  "modal-login": {
+    "title": "Đăng nhập",
+    "forgot": "Quên mật khẩu?"
+  },
+  "modal-register": {
+    "title": "Đăng ký"
+  },
+  "forgot-password": {
+    "title": "Quên mật khẩu?",
+    "content": "Nhập email mà bạn đã đăng ký trước đây và bấm khôi phục. Bạn sẽ nhận được 1 email bao gồm tên đăng nhập và 1 đường link để đặt mật khẩu mới cho tài khoản của bạn.",
+    "placeholder": "Nhập email đăng ký",
+    "btn-send": "Gửi mail",
+    "btn-back": "Quay lại",
+    "error-mail": "Email phải là 1 địa chỉ hợp lệ",
+    "blank-email": "Email không được để trống"
+  },
+  "page-news": {
+    "home": "Trang chủ",
+    "title": "Tin tức",
+    "hot": "Mới nhất",
+    "view-more": "Xem thêm",
+    "view": "lượt xem",
+    "news-new": "Tin tức mới",
+    "news-hot": "Tin tức nổi bật",
+    "news-by-category": "Tin tức theo danh mục",
+    "title-breadcrumb": "Tin tức, Profile toà soạn, nhà báo"
+  },
+  "price": {
+    "name": "đ"
+  },
+  "askonomy": {
+    "message": "Thông báo",
+    "detail": "Ban phải đăng ký gói 6 tháng trở lên mới sử dụng được"
+  },
+  "package-new-hot": "Số báo mới",
+  "NEWSPAPER": {
+    "RELATED": {
+      "TITLE": "Nội dung liên quan"
+    }
+  },
+  "VNECONOMY": {
+    "ASKONOMY": {
+      "SUMMARY1": "Askonomy là chatbot AI được phát triển độc quyền bởi Tạp chí Kinh tế Việt Nam / VnEconomy - cơ quan báo chí truyền thông hàng đầu về kinh tế của Việt Nam.",
+      "SUMMARY2": "Asskonomy được thiết kế để trở thành một ”Trợ lý thông tin kinh tế” thông minh và là công cụ hiệu quả, hữu ích khai thác kho dữ liệu kinh tế tổng hợp, chuyên sâu và tin cậy từ các nguồn đăng tải trên các ấn phẩm của Thời báo Kinh tế Việt Nam (nay là Tạp chí Kinh tế Việt Nam) và VnEconomy trong hơn 30 năm qua. Thay vì phải mất thời gian đọc hàng ngàn trang kết quả tìm kiếm qua các công cụ tìm kiếm, Askonomy sẽ trực tiếp trả lời phù hợp với câu hỏi và hỗ trợ người dùng có được kết quả nhanh nhất.",
+      "FEATURES": {
+        "TITLE": "Những ưu điểm đặc biệt của Askonomy",
+        "FEATURE1": "Đưa ra câu trả lời về dữ liệu kinh tế nhanh và chính xác.",
+        "FEATURE2": "Cập nhật dữ liệu theo thời gian thực mỗi giờ.",
+        "FEATURE3": "Có khả năng đồ thị hóa số liệu trực quan.",
+        "FEATURE4": "Sử dụng dữ liệu độc quyền của Tạp chí Kinh tế Việt Nam/VnEconomy.",
+        "FEATURE5": "Hiểu và xử lý thông tin bằng tiếng Việt và tiếng Anh."
+      },
+      "SIGN_UP_FOR_PREMIUM": "Độc giả muốn trải nghiệm Askonomy, vui lòng mua gói Premium",
+      "EXPLORE_NOW": "Trải nghiệm ngay"
+    },
+    "PACKAGE": {
+      "TCKTVN": "Tạp chí Kinh tế Việt Nam",
+      "ECONOMIC_TIMES": "Vietnam Economic Times",
+      "NGKTVN": "Niêm giám Kinh tế Việt Nam & Thế giới",
+      "SHOW_ALL": "Xem tất cả"
+    },
+    "PAGE_PACKAGES": {
+      "DIGITAL": "Các gói báo số",
+      "TCKTVN": "Tạp chí Kinh tế Việt Nam",
+      "ECONOMIC_TIMES": "Vietnam Economic Times",
+      "PREMIUM": "Gói Premium",
+      "ASKONOMY_AI_CHATBOT": "12 tháng sử dụng Chatbot AI Askonomy",
+      "DAILY_HIGHLIGHTS": "Tin nổi bật hàng ngày của VnEconomy",
+      "DIGITAL_EDITION": "12 tháng đọc Tạp chí Kinh tế Việt Nam trên nền tảng số"
+    }
+  }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/assets/image/Squid-Game-4507-1657683437.png b/Phaha_Package/src/assets/image/Squid-Game-4507-1657683437.png
new file mode 100644
index 0000000..ab0a666
Binary files /dev/null and b/Phaha_Package/src/assets/image/Squid-Game-4507-1657683437.png differ
diff --git a/Phaha_Package/src/assets/image/anh-2.jpg b/Phaha_Package/src/assets/image/anh-2.jpg
new file mode 100644
index 0000000..5bc93c4
Binary files /dev/null and b/Phaha_Package/src/assets/image/anh-2.jpg differ
diff --git a/Phaha_Package/src/assets/image/anh-bao.jpeg b/Phaha_Package/src/assets/image/anh-bao.jpeg
new file mode 100644
index 0000000..a2794a5
Binary files /dev/null and b/Phaha_Package/src/assets/image/anh-bao.jpeg differ
diff --git a/Phaha_Package/src/assets/image/anh-sea-game.jpeg b/Phaha_Package/src/assets/image/anh-sea-game.jpeg
new file mode 100644
index 0000000..fda1341
Binary files /dev/null and b/Phaha_Package/src/assets/image/anh-sea-game.jpeg differ
diff --git a/Phaha_Package/src/assets/image/avatar.jpg b/Phaha_Package/src/assets/image/avatar.jpg
new file mode 100644
index 0000000..b7f2442
Binary files /dev/null and b/Phaha_Package/src/assets/image/avatar.jpg differ
diff --git a/Phaha_Package/src/assets/image/b3c21bf3b4e7c8a1f6d1462854f9c295.jpg b/Phaha_Package/src/assets/image/b3c21bf3b4e7c8a1f6d1462854f9c295.jpg
new file mode 100644
index 0000000..fa19826
Binary files /dev/null and b/Phaha_Package/src/assets/image/b3c21bf3b4e7c8a1f6d1462854f9c295.jpg differ
diff --git a/Phaha_Package/src/assets/image/book.png b/Phaha_Package/src/assets/image/book.png
new file mode 100644
index 0000000..4892933
Binary files /dev/null and b/Phaha_Package/src/assets/image/book.png differ
diff --git a/Phaha_Package/src/assets/image/bqdnd_doi hinh u23 vn.jpg b/Phaha_Package/src/assets/image/bqdnd_doi hinh u23 vn.jpg
new file mode 100644
index 0000000..7a4188a
Binary files /dev/null and b/Phaha_Package/src/assets/image/bqdnd_doi hinh u23 vn.jpg differ
diff --git a/Phaha_Package/src/assets/image/calendarIcon.png b/Phaha_Package/src/assets/image/calendarIcon.png
new file mode 100644
index 0000000..4d81992
Binary files /dev/null and b/Phaha_Package/src/assets/image/calendarIcon.png differ
diff --git a/Phaha_Package/src/assets/image/cancel-logo.png b/Phaha_Package/src/assets/image/cancel-logo.png
new file mode 100644
index 0000000..d57cfbc
Binary files /dev/null and b/Phaha_Package/src/assets/image/cancel-logo.png differ
diff --git a/Phaha_Package/src/assets/image/default-thumbnail.jpeg b/Phaha_Package/src/assets/image/default-thumbnail.jpeg
new file mode 100644
index 0000000..b6f2279
Binary files /dev/null and b/Phaha_Package/src/assets/image/default-thumbnail.jpeg differ
diff --git a/Phaha_Package/src/assets/image/default_logo.png b/Phaha_Package/src/assets/image/default_logo.png
new file mode 100644
index 0000000..35e829e
Binary files /dev/null and b/Phaha_Package/src/assets/image/default_logo.png differ
diff --git a/Phaha_Package/src/assets/image/error.png b/Phaha_Package/src/assets/image/error.png
new file mode 100644
index 0000000..0c5d33b
Binary files /dev/null and b/Phaha_Package/src/assets/image/error.png differ
diff --git a/Phaha_Package/src/assets/image/hot.png b/Phaha_Package/src/assets/image/hot.png
new file mode 100644
index 0000000..88db0c6
Binary files /dev/null and b/Phaha_Package/src/assets/image/hot.png differ
diff --git a/Phaha_Package/src/assets/image/image-avatar.png b/Phaha_Package/src/assets/image/image-avatar.png
new file mode 100644
index 0000000..8e84a0c
Binary files /dev/null and b/Phaha_Package/src/assets/image/image-avatar.png differ
diff --git a/Phaha_Package/src/assets/image/image-test.png b/Phaha_Package/src/assets/image/image-test.png
new file mode 100644
index 0000000..bb05005
Binary files /dev/null and b/Phaha_Package/src/assets/image/image-test.png differ
diff --git a/Phaha_Package/src/assets/image/image2.png b/Phaha_Package/src/assets/image/image2.png
new file mode 100644
index 0000000..4a2f094
Binary files /dev/null and b/Phaha_Package/src/assets/image/image2.png differ
diff --git a/Phaha_Package/src/assets/image/img-banner.png b/Phaha_Package/src/assets/image/img-banner.png
new file mode 100644
index 0000000..fd66ba6
Binary files /dev/null and b/Phaha_Package/src/assets/image/img-banner.png differ
diff --git a/Phaha_Package/src/assets/image/ios-qr.png b/Phaha_Package/src/assets/image/ios-qr.png
new file mode 100644
index 0000000..5d334ae
Binary files /dev/null and b/Phaha_Package/src/assets/image/ios-qr.png differ
diff --git a/Phaha_Package/src/assets/image/lock-and-key.jpg b/Phaha_Package/src/assets/image/lock-and-key.jpg
new file mode 100644
index 0000000..d59c86f
Binary files /dev/null and b/Phaha_Package/src/assets/image/lock-and-key.jpg differ
diff --git a/Phaha_Package/src/assets/image/lock-removebg-preview.png b/Phaha_Package/src/assets/image/lock-removebg-preview.png
new file mode 100644
index 0000000..57c2de2
Binary files /dev/null and b/Phaha_Package/src/assets/image/lock-removebg-preview.png differ
diff --git a/Phaha_Package/src/assets/image/lock.jpeg b/Phaha_Package/src/assets/image/lock.jpeg
new file mode 100644
index 0000000..123dfc8
Binary files /dev/null and b/Phaha_Package/src/assets/image/lock.jpeg differ
diff --git a/Phaha_Package/src/assets/image/logo-fk1.png b/Phaha_Package/src/assets/image/logo-fk1.png
new file mode 100644
index 0000000..55189b6
Binary files /dev/null and b/Phaha_Package/src/assets/image/logo-fk1.png differ
diff --git a/Phaha_Package/src/assets/image/logo-fk10.png b/Phaha_Package/src/assets/image/logo-fk10.png
new file mode 100644
index 0000000..b606e6c
Binary files /dev/null and b/Phaha_Package/src/assets/image/logo-fk10.png differ
diff --git a/Phaha_Package/src/assets/image/logo-fk2.png b/Phaha_Package/src/assets/image/logo-fk2.png
new file mode 100644
index 0000000..70ac838
Binary files /dev/null and b/Phaha_Package/src/assets/image/logo-fk2.png differ
diff --git a/Phaha_Package/src/assets/image/logo-fk3.png b/Phaha_Package/src/assets/image/logo-fk3.png
new file mode 100644
index 0000000..d9d9703
Binary files /dev/null and b/Phaha_Package/src/assets/image/logo-fk3.png differ
diff --git a/Phaha_Package/src/assets/image/logo-fk4.png b/Phaha_Package/src/assets/image/logo-fk4.png
new file mode 100644
index 0000000..b589f26
Binary files /dev/null and b/Phaha_Package/src/assets/image/logo-fk4.png differ
diff --git a/Phaha_Package/src/assets/image/logo-fk5.png b/Phaha_Package/src/assets/image/logo-fk5.png
new file mode 100644
index 0000000..9fcd4bc
Binary files /dev/null and b/Phaha_Package/src/assets/image/logo-fk5.png differ
diff --git a/Phaha_Package/src/assets/image/logo-fk6.png b/Phaha_Package/src/assets/image/logo-fk6.png
new file mode 100644
index 0000000..8778560
Binary files /dev/null and b/Phaha_Package/src/assets/image/logo-fk6.png differ
diff --git a/Phaha_Package/src/assets/image/logo-fk7.png b/Phaha_Package/src/assets/image/logo-fk7.png
new file mode 100644
index 0000000..cfcea97
Binary files /dev/null and b/Phaha_Package/src/assets/image/logo-fk7.png differ
diff --git a/Phaha_Package/src/assets/image/logo-fk8.png b/Phaha_Package/src/assets/image/logo-fk8.png
new file mode 100644
index 0000000..974b2d5
Binary files /dev/null and b/Phaha_Package/src/assets/image/logo-fk8.png differ
diff --git a/Phaha_Package/src/assets/image/logo-fk9.png b/Phaha_Package/src/assets/image/logo-fk9.png
new file mode 100644
index 0000000..f29c266
Binary files /dev/null and b/Phaha_Package/src/assets/image/logo-fk9.png differ
diff --git a/Phaha_Package/src/assets/image/mnu3.jpg b/Phaha_Package/src/assets/image/mnu3.jpg
new file mode 100644
index 0000000..185c215
Binary files /dev/null and b/Phaha_Package/src/assets/image/mnu3.jpg differ
diff --git a/Phaha_Package/src/assets/image/new.png b/Phaha_Package/src/assets/image/new.png
new file mode 100644
index 0000000..2ee35f8
Binary files /dev/null and b/Phaha_Package/src/assets/image/new.png differ
diff --git a/Phaha_Package/src/assets/image/newsToday.jpg b/Phaha_Package/src/assets/image/newsToday.jpg
new file mode 100644
index 0000000..0167bb1
Binary files /dev/null and b/Phaha_Package/src/assets/image/newsToday.jpg differ
diff --git a/Phaha_Package/src/assets/image/nhasach.png b/Phaha_Package/src/assets/image/nhasach.png
new file mode 100644
index 0000000..095b62a
Binary files /dev/null and b/Phaha_Package/src/assets/image/nhasach.png differ
diff --git a/Phaha_Package/src/assets/image/sach-1.jpg b/Phaha_Package/src/assets/image/sach-1.jpg
new file mode 100644
index 0000000..a023039
Binary files /dev/null and b/Phaha_Package/src/assets/image/sach-1.jpg differ
diff --git a/Phaha_Package/src/assets/image/seagame-p1.jpg b/Phaha_Package/src/assets/image/seagame-p1.jpg
new file mode 100644
index 0000000..e961f4f
Binary files /dev/null and b/Phaha_Package/src/assets/image/seagame-p1.jpg differ
diff --git a/Phaha_Package/src/assets/image/seagame-p2.jpg b/Phaha_Package/src/assets/image/seagame-p2.jpg
new file mode 100644
index 0000000..b332744
Binary files /dev/null and b/Phaha_Package/src/assets/image/seagame-p2.jpg differ
diff --git a/Phaha_Package/src/assets/image/success-popup.png b/Phaha_Package/src/assets/image/success-popup.png
new file mode 100644
index 0000000..0ff9ef9
Binary files /dev/null and b/Phaha_Package/src/assets/image/success-popup.png differ
diff --git a/Phaha_Package/src/assets/image/success.png b/Phaha_Package/src/assets/image/success.png
new file mode 100644
index 0000000..3a510ed
Binary files /dev/null and b/Phaha_Package/src/assets/image/success.png differ
diff --git a/Phaha_Package/src/assets/image/united-kingdom.png b/Phaha_Package/src/assets/image/united-kingdom.png
new file mode 100644
index 0000000..df20d07
Binary files /dev/null and b/Phaha_Package/src/assets/image/united-kingdom.png differ
diff --git a/Phaha_Package/src/assets/image/united-states.png b/Phaha_Package/src/assets/image/united-states.png
new file mode 100644
index 0000000..f6dc38a
Binary files /dev/null and b/Phaha_Package/src/assets/image/united-states.png differ
diff --git a/Phaha_Package/src/assets/image/verify-mail.png b/Phaha_Package/src/assets/image/verify-mail.png
new file mode 100644
index 0000000..2ea1db6
Binary files /dev/null and b/Phaha_Package/src/assets/image/verify-mail.png differ
diff --git a/Phaha_Package/src/assets/image/vietnam.png b/Phaha_Package/src/assets/image/vietnam.png
new file mode 100644
index 0000000..172640e
Binary files /dev/null and b/Phaha_Package/src/assets/image/vietnam.png differ
diff --git a/Phaha_Package/src/assets/image/vneconomy.png b/Phaha_Package/src/assets/image/vneconomy.png
new file mode 100644
index 0000000..b9cfe07
Binary files /dev/null and b/Phaha_Package/src/assets/image/vneconomy.png differ
diff --git a/Phaha_Package/src/assets/images/advs/adv_1_en.png b/Phaha_Package/src/assets/images/advs/adv_1_en.png
new file mode 100644
index 0000000..1ca2956
Binary files /dev/null and b/Phaha_Package/src/assets/images/advs/adv_1_en.png differ
diff --git a/Phaha_Package/src/assets/images/advs/adv_1_vi.png b/Phaha_Package/src/assets/images/advs/adv_1_vi.png
new file mode 100644
index 0000000..fd61e63
Binary files /dev/null and b/Phaha_Package/src/assets/images/advs/adv_1_vi.png differ
diff --git a/Phaha_Package/src/assets/images/advs/adv_2_en.png b/Phaha_Package/src/assets/images/advs/adv_2_en.png
new file mode 100644
index 0000000..36fe189
Binary files /dev/null and b/Phaha_Package/src/assets/images/advs/adv_2_en.png differ
diff --git a/Phaha_Package/src/assets/images/advs/adv_2_vi.png b/Phaha_Package/src/assets/images/advs/adv_2_vi.png
new file mode 100644
index 0000000..f13fedd
Binary files /dev/null and b/Phaha_Package/src/assets/images/advs/adv_2_vi.png differ
diff --git a/Phaha_Package/src/assets/images/askonomy/hdsd_askonomy.png b/Phaha_Package/src/assets/images/askonomy/hdsd_askonomy.png
new file mode 100644
index 0000000..3cb38ec
Binary files /dev/null and b/Phaha_Package/src/assets/images/askonomy/hdsd_askonomy.png differ
diff --git a/Phaha_Package/src/assets/images/background/default-image.png b/Phaha_Package/src/assets/images/background/default-image.png
new file mode 100644
index 0000000..e6cbfdd
Binary files /dev/null and b/Phaha_Package/src/assets/images/background/default-image.png differ
diff --git a/Phaha_Package/src/assets/images/background/forestbridge.jpg b/Phaha_Package/src/assets/images/background/forestbridge.jpg
new file mode 100644
index 0000000..62370b3
Binary files /dev/null and b/Phaha_Package/src/assets/images/background/forestbridge.jpg differ
diff --git a/Phaha_Package/src/assets/images/background/maxresdefault.png b/Phaha_Package/src/assets/images/background/maxresdefault.png
new file mode 100644
index 0000000..af736a8
Binary files /dev/null and b/Phaha_Package/src/assets/images/background/maxresdefault.png differ
diff --git a/Phaha_Package/src/assets/images/banner/banner-bookstore.png b/Phaha_Package/src/assets/images/banner/banner-bookstore.png
new file mode 100644
index 0000000..f860ced
Binary files /dev/null and b/Phaha_Package/src/assets/images/banner/banner-bookstore.png differ
diff --git a/Phaha_Package/src/assets/images/banner/banner-dark.png b/Phaha_Package/src/assets/images/banner/banner-dark.png
new file mode 100644
index 0000000..8684278
Binary files /dev/null and b/Phaha_Package/src/assets/images/banner/banner-dark.png differ
diff --git a/Phaha_Package/src/assets/images/banner/banner-violet.png b/Phaha_Package/src/assets/images/banner/banner-violet.png
new file mode 100644
index 0000000..ca1382b
Binary files /dev/null and b/Phaha_Package/src/assets/images/banner/banner-violet.png differ
diff --git a/Phaha_Package/src/assets/images/banner/banner-yellow.png b/Phaha_Package/src/assets/images/banner/banner-yellow.png
new file mode 100644
index 0000000..ef60da9
Binary files /dev/null and b/Phaha_Package/src/assets/images/banner/banner-yellow.png differ
diff --git a/Phaha_Package/src/assets/images/banner/bg.png b/Phaha_Package/src/assets/images/banner/bg.png
new file mode 100644
index 0000000..16a7392
Binary files /dev/null and b/Phaha_Package/src/assets/images/banner/bg.png differ
diff --git a/Phaha_Package/src/assets/images/banner/desktop/banner_1_en.png b/Phaha_Package/src/assets/images/banner/desktop/banner_1_en.png
new file mode 100644
index 0000000..0191e5c
Binary files /dev/null and b/Phaha_Package/src/assets/images/banner/desktop/banner_1_en.png differ
diff --git a/Phaha_Package/src/assets/images/banner/desktop/banner_1_vi.png b/Phaha_Package/src/assets/images/banner/desktop/banner_1_vi.png
new file mode 100644
index 0000000..f2a6a73
Binary files /dev/null and b/Phaha_Package/src/assets/images/banner/desktop/banner_1_vi.png differ
diff --git a/Phaha_Package/src/assets/images/banner/desktop/banner_2_en.png b/Phaha_Package/src/assets/images/banner/desktop/banner_2_en.png
new file mode 100644
index 0000000..e5deb48
Binary files /dev/null and b/Phaha_Package/src/assets/images/banner/desktop/banner_2_en.png differ
diff --git a/Phaha_Package/src/assets/images/banner/desktop/banner_2_vi.png b/Phaha_Package/src/assets/images/banner/desktop/banner_2_vi.png
new file mode 100644
index 0000000..b4a844d
Binary files /dev/null and b/Phaha_Package/src/assets/images/banner/desktop/banner_2_vi.png differ
diff --git a/Phaha_Package/src/assets/images/banner/desktop/banner_3_en.png b/Phaha_Package/src/assets/images/banner/desktop/banner_3_en.png
new file mode 100644
index 0000000..8d2a62d
Binary files /dev/null and b/Phaha_Package/src/assets/images/banner/desktop/banner_3_en.png differ
diff --git a/Phaha_Package/src/assets/images/banner/desktop/banner_3_vi.png b/Phaha_Package/src/assets/images/banner/desktop/banner_3_vi.png
new file mode 100644
index 0000000..f0ae6f2
Binary files /dev/null and b/Phaha_Package/src/assets/images/banner/desktop/banner_3_vi.png differ
diff --git a/Phaha_Package/src/assets/images/banner/img1.png b/Phaha_Package/src/assets/images/banner/img1.png
new file mode 100644
index 0000000..c5a8094
Binary files /dev/null and b/Phaha_Package/src/assets/images/banner/img1.png differ
diff --git a/Phaha_Package/src/assets/images/banner/img2.png b/Phaha_Package/src/assets/images/banner/img2.png
new file mode 100644
index 0000000..29a67ae
Binary files /dev/null and b/Phaha_Package/src/assets/images/banner/img2.png differ
diff --git a/Phaha_Package/src/assets/images/banner/mobile/banner_1_en.png b/Phaha_Package/src/assets/images/banner/mobile/banner_1_en.png
new file mode 100644
index 0000000..b28371f
Binary files /dev/null and b/Phaha_Package/src/assets/images/banner/mobile/banner_1_en.png differ
diff --git a/Phaha_Package/src/assets/images/banner/mobile/banner_1_vi.png b/Phaha_Package/src/assets/images/banner/mobile/banner_1_vi.png
new file mode 100644
index 0000000..3e32864
Binary files /dev/null and b/Phaha_Package/src/assets/images/banner/mobile/banner_1_vi.png differ
diff --git a/Phaha_Package/src/assets/images/banner/mobile/banner_2_en.png b/Phaha_Package/src/assets/images/banner/mobile/banner_2_en.png
new file mode 100644
index 0000000..a888b06
Binary files /dev/null and b/Phaha_Package/src/assets/images/banner/mobile/banner_2_en.png differ
diff --git a/Phaha_Package/src/assets/images/banner/mobile/banner_2_vi.png b/Phaha_Package/src/assets/images/banner/mobile/banner_2_vi.png
new file mode 100644
index 0000000..2239a4a
Binary files /dev/null and b/Phaha_Package/src/assets/images/banner/mobile/banner_2_vi.png differ
diff --git a/Phaha_Package/src/assets/images/banner/mobile/banner_3_en.png b/Phaha_Package/src/assets/images/banner/mobile/banner_3_en.png
new file mode 100644
index 0000000..2d8e442
Binary files /dev/null and b/Phaha_Package/src/assets/images/banner/mobile/banner_3_en.png differ
diff --git a/Phaha_Package/src/assets/images/banner/mobile/banner_3_vi.png b/Phaha_Package/src/assets/images/banner/mobile/banner_3_vi.png
new file mode 100644
index 0000000..b540a77
Binary files /dev/null and b/Phaha_Package/src/assets/images/banner/mobile/banner_3_vi.png differ
diff --git a/Phaha_Package/src/assets/images/book/author-img.jpeg b/Phaha_Package/src/assets/images/book/author-img.jpeg
new file mode 100644
index 0000000..5c30f7c
Binary files /dev/null and b/Phaha_Package/src/assets/images/book/author-img.jpeg differ
diff --git a/Phaha_Package/src/assets/images/book/book-1.jpg b/Phaha_Package/src/assets/images/book/book-1.jpg
new file mode 100644
index 0000000..9a8543f
Binary files /dev/null and b/Phaha_Package/src/assets/images/book/book-1.jpg differ
diff --git a/Phaha_Package/src/assets/images/book/book-2.jpeg b/Phaha_Package/src/assets/images/book/book-2.jpeg
new file mode 100644
index 0000000..187c558
Binary files /dev/null and b/Phaha_Package/src/assets/images/book/book-2.jpeg differ
diff --git a/Phaha_Package/src/assets/images/book/subject-cover.jpeg b/Phaha_Package/src/assets/images/book/subject-cover.jpeg
new file mode 100644
index 0000000..9b06099
Binary files /dev/null and b/Phaha_Package/src/assets/images/book/subject-cover.jpeg differ
diff --git a/Phaha_Package/src/assets/images/book/subject-cover.png b/Phaha_Package/src/assets/images/book/subject-cover.png
new file mode 100644
index 0000000..02e69a9
Binary files /dev/null and b/Phaha_Package/src/assets/images/book/subject-cover.png differ
diff --git a/Phaha_Package/src/assets/images/book/td-nv-dty-184-1.jpg b/Phaha_Package/src/assets/images/book/td-nv-dty-184-1.jpg
new file mode 100644
index 0000000..96c6f18
Binary files /dev/null and b/Phaha_Package/src/assets/images/book/td-nv-dty-184-1.jpg differ
diff --git a/Phaha_Package/src/assets/images/book/td-nv-dty-184-2.jpg b/Phaha_Package/src/assets/images/book/td-nv-dty-184-2.jpg
new file mode 100644
index 0000000..5561d2c
Binary files /dev/null and b/Phaha_Package/src/assets/images/book/td-nv-dty-184-2.jpg differ
diff --git a/Phaha_Package/src/assets/images/book/td-nv-dty-184-3.jpg b/Phaha_Package/src/assets/images/book/td-nv-dty-184-3.jpg
new file mode 100644
index 0000000..f8a34e6
Binary files /dev/null and b/Phaha_Package/src/assets/images/book/td-nv-dty-184-3.jpg differ
diff --git a/Phaha_Package/src/assets/images/book/td-nv-dty-184.jpg b/Phaha_Package/src/assets/images/book/td-nv-dty-184.jpg
new file mode 100644
index 0000000..50ba354
Binary files /dev/null and b/Phaha_Package/src/assets/images/book/td-nv-dty-184.jpg differ
diff --git a/Phaha_Package/src/assets/images/brand/Logo.png b/Phaha_Package/src/assets/images/brand/Logo.png
new file mode 100644
index 0000000..0d566c2
Binary files /dev/null and b/Phaha_Package/src/assets/images/brand/Logo.png differ
diff --git a/Phaha_Package/src/assets/images/brand/brand-logo.png b/Phaha_Package/src/assets/images/brand/brand-logo.png
new file mode 100644
index 0000000..96a94a7
Binary files /dev/null and b/Phaha_Package/src/assets/images/brand/brand-logo.png differ
diff --git a/Phaha_Package/src/assets/images/brand/editor-1.png b/Phaha_Package/src/assets/images/brand/editor-1.png
new file mode 100644
index 0000000..4e0017f
Binary files /dev/null and b/Phaha_Package/src/assets/images/brand/editor-1.png differ
diff --git a/Phaha_Package/src/assets/images/brand/editor-2.png b/Phaha_Package/src/assets/images/brand/editor-2.png
new file mode 100644
index 0000000..7b22662
Binary files /dev/null and b/Phaha_Package/src/assets/images/brand/editor-2.png differ
diff --git a/Phaha_Package/src/assets/images/brand/editor-3.png b/Phaha_Package/src/assets/images/brand/editor-3.png
new file mode 100644
index 0000000..1922ca0
Binary files /dev/null and b/Phaha_Package/src/assets/images/brand/editor-3.png differ
diff --git a/Phaha_Package/src/assets/images/brand/editor-4.png b/Phaha_Package/src/assets/images/brand/editor-4.png
new file mode 100644
index 0000000..6b0b15f
Binary files /dev/null and b/Phaha_Package/src/assets/images/brand/editor-4.png differ
diff --git a/Phaha_Package/src/assets/images/brand/logo-1.png b/Phaha_Package/src/assets/images/brand/logo-1.png
new file mode 100644
index 0000000..26f9dc7
Binary files /dev/null and b/Phaha_Package/src/assets/images/brand/logo-1.png differ
diff --git a/Phaha_Package/src/assets/images/icons/icon_askonomy.png b/Phaha_Package/src/assets/images/icons/icon_askonomy.png
new file mode 100644
index 0000000..a1dcbe3
Binary files /dev/null and b/Phaha_Package/src/assets/images/icons/icon_askonomy.png differ
diff --git a/Phaha_Package/src/assets/images/logo/logo-bct.png b/Phaha_Package/src/assets/images/logo/logo-bct.png
new file mode 100644
index 0000000..f7170f9
Binary files /dev/null and b/Phaha_Package/src/assets/images/logo/logo-bct.png differ
diff --git a/Phaha_Package/src/assets/images/logo/logo-fb.png b/Phaha_Package/src/assets/images/logo/logo-fb.png
new file mode 100644
index 0000000..bef6b15
Binary files /dev/null and b/Phaha_Package/src/assets/images/logo/logo-fb.png differ
diff --git a/Phaha_Package/src/assets/images/logo/logo-tiktok.png b/Phaha_Package/src/assets/images/logo/logo-tiktok.png
new file mode 100644
index 0000000..1cf9337
Binary files /dev/null and b/Phaha_Package/src/assets/images/logo/logo-tiktok.png differ
diff --git a/Phaha_Package/src/assets/images/logo/logo-youtube.png b/Phaha_Package/src/assets/images/logo/logo-youtube.png
new file mode 100644
index 0000000..b1d2aba
Binary files /dev/null and b/Phaha_Package/src/assets/images/logo/logo-youtube.png differ
diff --git a/Phaha_Package/src/assets/images/logo/logo_askonomy.PNG b/Phaha_Package/src/assets/images/logo/logo_askonomy.PNG
new file mode 100644
index 0000000..3f5b229
Binary files /dev/null and b/Phaha_Package/src/assets/images/logo/logo_askonomy.PNG differ
diff --git a/Phaha_Package/src/assets/images/logo/logo_postenp_new.png b/Phaha_Package/src/assets/images/logo/logo_postenp_new.png
new file mode 100644
index 0000000..2347f69
Binary files /dev/null and b/Phaha_Package/src/assets/images/logo/logo_postenp_new.png differ
diff --git a/Phaha_Package/src/assets/images/news/newspaper-default.png b/Phaha_Package/src/assets/images/news/newspaper-default.png
new file mode 100644
index 0000000..0400774
Binary files /dev/null and b/Phaha_Package/src/assets/images/news/newspaper-default.png differ
diff --git a/Phaha_Package/src/assets/images/package/list-icon-default.png b/Phaha_Package/src/assets/images/package/list-icon-default.png
new file mode 100644
index 0000000..9c6ca6e
Binary files /dev/null and b/Phaha_Package/src/assets/images/package/list-icon-default.png differ
diff --git a/Phaha_Package/src/assets/images/package/package-default.png b/Phaha_Package/src/assets/images/package/package-default.png
new file mode 100644
index 0000000..92c15d0
Binary files /dev/null and b/Phaha_Package/src/assets/images/package/package-default.png differ
diff --git a/Phaha_Package/src/assets/images/products/15yeuto.jpeg b/Phaha_Package/src/assets/images/products/15yeuto.jpeg
new file mode 100644
index 0000000..ee4568f
Binary files /dev/null and b/Phaha_Package/src/assets/images/products/15yeuto.jpeg differ
diff --git a/Phaha_Package/src/assets/images/products/637702664477698071_macbook-pro-14-2021-xam-1.png b/Phaha_Package/src/assets/images/products/637702664477698071_macbook-pro-14-2021-xam-1.png
new file mode 100644
index 0000000..46f2f41
Binary files /dev/null and b/Phaha_Package/src/assets/images/products/637702664477698071_macbook-pro-14-2021-xam-1.png differ
diff --git a/Phaha_Package/src/assets/images/products/banner-dat-ve-don-gian.jpg b/Phaha_Package/src/assets/images/products/banner-dat-ve-don-gian.jpg
new file mode 100644
index 0000000..38575c3
Binary files /dev/null and b/Phaha_Package/src/assets/images/products/banner-dat-ve-don-gian.jpg differ
diff --git a/Phaha_Package/src/assets/images/products/benrangtuyetson.jpeg b/Phaha_Package/src/assets/images/products/benrangtuyetson.jpeg
new file mode 100644
index 0000000..a802ffa
Binary files /dev/null and b/Phaha_Package/src/assets/images/products/benrangtuyetson.jpeg differ
diff --git a/Phaha_Package/src/assets/images/products/binhnuoc.jpeg b/Phaha_Package/src/assets/images/products/binhnuoc.jpeg
new file mode 100644
index 0000000..8e59271
Binary files /dev/null and b/Phaha_Package/src/assets/images/products/binhnuoc.jpeg differ
diff --git a/Phaha_Package/src/assets/images/products/chaochongdinh.jpeg b/Phaha_Package/src/assets/images/products/chaochongdinh.jpeg
new file mode 100644
index 0000000..02cbaac
Binary files /dev/null and b/Phaha_Package/src/assets/images/products/chaochongdinh.jpeg differ
diff --git a/Phaha_Package/src/assets/images/products/chinphuckhonggian.jpeg b/Phaha_Package/src/assets/images/products/chinphuckhonggian.jpeg
new file mode 100644
index 0000000..e7ab9e1
Binary files /dev/null and b/Phaha_Package/src/assets/images/products/chinphuckhonggian.jpeg differ
diff --git a/Phaha_Package/src/assets/images/products/coc.jpeg b/Phaha_Package/src/assets/images/products/coc.jpeg
new file mode 100644
index 0000000..20ab303
Binary files /dev/null and b/Phaha_Package/src/assets/images/products/coc.jpeg differ
diff --git a/Phaha_Package/src/assets/images/products/dautuchatluong.jpeg b/Phaha_Package/src/assets/images/products/dautuchatluong.jpeg
new file mode 100644
index 0000000..7e7b012
Binary files /dev/null and b/Phaha_Package/src/assets/images/products/dautuchatluong.jpeg differ
diff --git a/Phaha_Package/src/assets/images/products/dong-ho-garmin-venu-black-slate.jpg b/Phaha_Package/src/assets/images/products/dong-ho-garmin-venu-black-slate.jpg
new file mode 100644
index 0000000..573deb5
Binary files /dev/null and b/Phaha_Package/src/assets/images/products/dong-ho-garmin-venu-black-slate.jpg differ
diff --git a/Phaha_Package/src/assets/images/products/dongianhieuqua.jpeg b/Phaha_Package/src/assets/images/products/dongianhieuqua.jpeg
new file mode 100644
index 0000000..e853a76
Binary files /dev/null and b/Phaha_Package/src/assets/images/products/dongianhieuqua.jpeg differ
diff --git a/Phaha_Package/src/assets/images/products/ghengoi.jpeg b/Phaha_Package/src/assets/images/products/ghengoi.jpeg
new file mode 100644
index 0000000..339c3a2
Binary files /dev/null and b/Phaha_Package/src/assets/images/products/ghengoi.jpeg differ
diff --git a/Phaha_Package/src/assets/images/products/image-02 1.png b/Phaha_Package/src/assets/images/products/image-02 1.png
new file mode 100644
index 0000000..8c67a59
Binary files /dev/null and b/Phaha_Package/src/assets/images/products/image-02 1.png differ
diff --git a/Phaha_Package/src/assets/images/products/images-ky-nghi.jfif b/Phaha_Package/src/assets/images/products/images-ky-nghi.jfif
new file mode 100644
index 0000000..ee83d0f
Binary files /dev/null and b/Phaha_Package/src/assets/images/products/images-ky-nghi.jfif differ
diff --git a/Phaha_Package/src/assets/images/products/images-ve-may-bay.jfif b/Phaha_Package/src/assets/images/products/images-ve-may-bay.jfif
new file mode 100644
index 0000000..72f0570
Binary files /dev/null and b/Phaha_Package/src/assets/images/products/images-ve-may-bay.jfif differ
diff --git a/Phaha_Package/src/assets/images/products/images.jfif b/Phaha_Package/src/assets/images/products/images.jfif
new file mode 100644
index 0000000..807ffce
Binary files /dev/null and b/Phaha_Package/src/assets/images/products/images.jfif differ
diff --git a/Phaha_Package/src/assets/images/products/lactaytihuu.jpeg b/Phaha_Package/src/assets/images/products/lactaytihuu.jpeg
new file mode 100644
index 0000000..aa7c25e
Binary files /dev/null and b/Phaha_Package/src/assets/images/products/lactaytihuu.jpeg differ
diff --git a/Phaha_Package/src/assets/images/products/mockhoa.jpeg b/Phaha_Package/src/assets/images/products/mockhoa.jpeg
new file mode 100644
index 0000000..815d063
Binary files /dev/null and b/Phaha_Package/src/assets/images/products/mockhoa.jpeg differ
diff --git a/Phaha_Package/src/assets/images/products/nghethuatgiangday.jpeg b/Phaha_Package/src/assets/images/products/nghethuatgiangday.jpeg
new file mode 100644
index 0000000..30ff395
Binary files /dev/null and b/Phaha_Package/src/assets/images/products/nghethuatgiangday.jpeg differ
diff --git a/Phaha_Package/src/assets/images/products/samsungs22.webp b/Phaha_Package/src/assets/images/products/samsungs22.webp
new file mode 100644
index 0000000..e083c48
Binary files /dev/null and b/Phaha_Package/src/assets/images/products/samsungs22.webp differ
diff --git a/Phaha_Package/src/assets/images/products/suatam.jpeg b/Phaha_Package/src/assets/images/products/suatam.jpeg
new file mode 100644
index 0000000..aa50f17
Binary files /dev/null and b/Phaha_Package/src/assets/images/products/suatam.jpeg differ
diff --git a/Phaha_Package/src/assets/images/products/sucmanhtangtruong.jpeg b/Phaha_Package/src/assets/images/products/sucmanhtangtruong.jpeg
new file mode 100644
index 0000000..f5d0fff
Binary files /dev/null and b/Phaha_Package/src/assets/images/products/sucmanhtangtruong.jpeg differ
diff --git a/Phaha_Package/src/assets/images/products/toukyco.jpg b/Phaha_Package/src/assets/images/products/toukyco.jpg
new file mode 100644
index 0000000..143a947
Binary files /dev/null and b/Phaha_Package/src/assets/images/products/toukyco.jpg differ
diff --git a/Phaha_Package/src/assets/images/products/trucgiacchienluoc.jpeg b/Phaha_Package/src/assets/images/products/trucgiacchienluoc.jpeg
new file mode 100644
index 0000000..3717168
Binary files /dev/null and b/Phaha_Package/src/assets/images/products/trucgiacchienluoc.jpeg differ
diff --git a/Phaha_Package/src/assets/images/products/vongco.jpeg b/Phaha_Package/src/assets/images/products/vongco.jpeg
new file mode 100644
index 0000000..a798c5c
Binary files /dev/null and b/Phaha_Package/src/assets/images/products/vongco.jpeg differ
diff --git a/Phaha_Package/src/assets/images/products/vuotnguctuduy.jpeg b/Phaha_Package/src/assets/images/products/vuotnguctuduy.jpeg
new file mode 100644
index 0000000..ce92687
Binary files /dev/null and b/Phaha_Package/src/assets/images/products/vuotnguctuduy.jpeg differ
diff --git a/Phaha_Package/src/assets/images/products/xedap.jpeg b/Phaha_Package/src/assets/images/products/xedap.jpeg
new file mode 100644
index 0000000..352550a
Binary files /dev/null and b/Phaha_Package/src/assets/images/products/xedap.jpeg differ
diff --git a/Phaha_Package/src/assets/images/tabs/calendar.svg b/Phaha_Package/src/assets/images/tabs/calendar.svg
new file mode 100644
index 0000000..e2ce493
--- /dev/null
+++ b/Phaha_Package/src/assets/images/tabs/calendar.svg
@@ -0,0 +1,13 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_180_5141)">
+<path d="M5.19379 0.084383C4.72504 0.253134 4.33598 0.651571 4.21879 1.07813C4.19535 1.1672 4.15785 1.43907 4.14379 1.67345L4.11098 2.10938H3.55785C2.80785 2.10938 2.37191 2.19845 1.82816 2.46563C1.45785 2.64845 1.31254 2.75626 0.979726 3.08907C0.646914 3.42188 0.539101 3.5672 0.356289 3.93751C-0.0233986 4.71095 3.88868e-05 4.11563 3.88868e-05 13.0547C3.88868e-05 21.9938 -0.0233986 21.3984 0.356289 22.1719C0.539101 22.5422 0.646914 22.6875 0.979726 23.0203C1.31723 23.3578 1.45785 23.4609 1.82816 23.6391C2.62035 24.0281 1.87504 24 12 24C21.7641 24 21.3469 24.0094 21.961 23.7516C22.6829 23.4469 23.3016 22.8656 23.6438 22.1625C24.0235 21.3844 24 21.9984 24 13.0547C24 4.11095 24.0235 4.72501 23.6438 3.94688C23.2969 3.23907 22.6829 2.66251 21.9469 2.34845C21.5719 2.19376 21.0563 2.10938 20.4422 2.10938H19.8891L19.8563 1.67345C19.8235 1.1672 19.7813 1.00313 19.6172 0.72657C19.2797 0.145321 18.4782 -0.145304 17.85 0.084383C17.3813 0.253134 16.9922 0.651571 16.875 1.07813C16.8516 1.1672 16.8141 1.43907 16.8 1.67345L16.7672 2.10938H16.2188H15.6704L15.6375 1.67345C15.6047 1.1672 15.5625 1.00313 15.3985 0.72657C15.061 0.145321 14.2594 -0.145304 13.6313 0.084383C13.1625 0.253134 12.7735 0.651571 12.6563 1.07813C12.6329 1.1672 12.5954 1.43907 12.5813 1.67345L12.5485 2.10938H12H11.4516L11.4188 1.67345C11.386 1.1672 11.3438 1.00313 11.1797 0.72657C10.8422 0.145321 10.0407 -0.145304 9.41254 0.084383C8.94379 0.253134 8.55473 0.651571 8.43754 1.07813C8.4141 1.1672 8.3766 1.43907 8.36254 1.67345L8.32973 2.10938H7.78129H7.23285L7.20004 1.67345C7.16723 1.1672 7.12504 1.00313 6.96098 0.72657C6.62348 0.145321 5.82191 -0.145304 5.19379 0.084383ZM5.93441 1.01251C6.22035 1.14845 6.23441 1.21407 6.23441 2.57813C6.23441 3.55782 6.22035 3.8297 6.1641 3.93282C6.09379 4.07345 5.84066 4.21876 5.67191 4.21876C5.50316 4.21876 5.25004 4.07345 5.17973 3.93282C5.12348 3.8297 5.10941 3.55782 5.10941 2.57813C5.10941 1.22345 5.12348 1.15313 5.40004 1.0172C5.59691 0.918758 5.73285 0.918758 5.93441 1.01251ZM10.1532 1.01251C10.4391 1.14845 10.4532 1.21407 10.4532 2.57813C10.4532 3.55782 10.4391 3.8297 10.3829 3.93282C10.3125 4.07345 10.0594 4.21876 9.89066 4.21876C9.72191 4.21876 9.46879 4.07345 9.39848 3.93282C9.34223 3.8297 9.32816 3.55782 9.32816 2.57813C9.32816 1.22345 9.34223 1.15313 9.61879 1.0172C9.81566 0.918758 9.9516 0.918758 10.1532 1.01251ZM14.3719 1.01251C14.6579 1.14845 14.6719 1.21407 14.6719 2.57813C14.6719 3.55782 14.6579 3.8297 14.6016 3.93282C14.5313 4.07345 14.2782 4.21876 14.1094 4.21876C13.9407 4.21876 13.6875 4.07345 13.6172 3.93282C13.561 3.8297 13.5469 3.55782 13.5469 2.57813C13.5469 1.22345 13.561 1.15313 13.8375 1.0172C14.0344 0.918758 14.1704 0.918758 14.3719 1.01251ZM18.5907 1.01251C18.8766 1.14845 18.8907 1.21407 18.8907 2.57813C18.8907 3.55782 18.8766 3.8297 18.8204 3.93282C18.75 4.07345 18.4969 4.21876 18.3282 4.21876C18.1594 4.21876 17.9063 4.07345 17.836 3.93282C17.7797 3.8297 17.7657 3.55782 17.7657 2.57813C17.7657 1.22345 17.7797 1.15313 18.0563 1.0172C18.2532 0.918758 18.3891 0.918758 18.5907 1.01251ZM4.12504 3.2672C4.12973 4.17188 4.41566 4.71095 5.05785 5.02032C5.36723 5.17501 5.9766 5.17501 6.28598 5.02032C6.92816 4.71095 7.2141 4.17188 7.21879 3.2672V3.04688H7.78129H8.34379V3.2672C8.34848 4.17188 8.63441 4.71095 9.2766 5.02032C9.58598 5.17501 10.1954 5.17501 10.5047 5.02032C11.1469 4.71095 11.4329 4.17188 11.4375 3.2672V3.04688H12H12.5625V3.2672C12.5672 4.17188 12.8532 4.71095 13.4954 5.02032C13.7907 5.16563 14.4094 5.17032 14.7188 5.0297C15.3469 4.73907 15.6516 4.1672 15.6563 3.2672V3.04688H16.2188H16.7813V3.2672C16.786 4.17188 17.0719 4.71095 17.7141 5.02032C18.0094 5.16563 18.6282 5.17032 18.9375 5.0297C19.5657 4.73907 19.8704 4.1672 19.875 3.2672V3.04688H20.4141C20.7047 3.04688 21.061 3.07032 21.1969 3.09845C22.0735 3.28126 22.8282 4.03595 23.011 4.91251C23.0485 5.08595 23.0625 7.47657 23.0625 13.0688C23.0625 20.0203 23.0532 21.0141 22.9922 21.2578C22.7625 22.1438 22.0594 22.8328 21.1969 23.0109C20.8407 23.0859 3.15004 23.0859 2.80316 23.0109C1.91723 22.8234 1.17191 22.0734 0.989101 21.1969C0.914101 20.8453 0.914101 5.26407 0.989101 4.91251C1.16723 4.05938 1.88441 3.31876 2.73285 3.11251C2.86879 3.0797 3.23441 3.05157 3.55316 3.05157L4.12504 3.04688V3.2672Z" fill="black"/>
+<path d="M2.86404 6.40783C2.75154 6.45002 2.56873 6.5719 2.46092 6.67971C2.08123 7.05471 2.10935 6.49221 2.10935 14.1094C2.10935 21.7266 2.08123 21.1641 2.46092 21.5391C2.8406 21.9188 2.02029 21.8906 12 21.8906C21.9797 21.8906 21.1594 21.9188 21.539 21.5391C21.9187 21.1641 21.8906 21.7266 21.8906 14.1094C21.8906 6.49221 21.9187 7.05471 21.539 6.67971C21.1687 6.30471 21.5765 6.32815 15.3469 6.32815C11.1469 6.32815 9.77342 6.34221 9.67967 6.3844C9.54373 6.44533 9.42185 6.64221 9.42185 6.7969C9.42185 6.95158 9.54373 7.14846 9.67967 7.2094C9.77342 7.25158 11.1375 7.26565 15.3 7.26565C20.5687 7.26565 20.8031 7.27033 20.8734 7.35002C20.9484 7.42971 20.9531 7.96877 20.9531 14.1188C20.9531 20.5313 20.9484 20.8031 20.8687 20.8735C20.789 20.9485 20.1047 20.9531 11.9906 20.9531C3.53435 20.9531 3.19685 20.9485 3.12654 20.8688C3.05154 20.7891 3.04685 20.25 3.04685 14.1C3.04685 7.68752 3.05154 7.41565 3.13123 7.34533C3.20623 7.27502 3.37498 7.26565 4.49529 7.26565C5.50779 7.26565 5.79842 7.25158 5.90154 7.20002C6.21092 7.03596 6.21092 6.55783 5.90154 6.39377C5.70467 6.29533 3.15467 6.30471 2.86404 6.40783Z" fill="black"/>
+<path d="M7.55155 6.39375C7.14373 6.61875 7.31717 7.26562 7.78123 7.26562C8.0203 7.26562 8.24998 7.03594 8.24998 6.80156C8.24998 6.45 7.86092 6.22031 7.55155 6.39375Z" fill="black"/>
+<path d="M11.6484 9.9797C11.5453 10.0266 11.4188 10.1109 11.3672 10.1672C11.3156 10.2234 11.0531 10.6875 10.7766 11.1938L10.275 12.1172L9.22032 12.3047C8.04845 12.5156 7.87032 12.5906 7.71095 12.9234C7.59376 13.1578 7.59845 13.5422 7.71564 13.7297C7.7672 13.8094 8.11407 14.1938 8.48907 14.5875C8.86407 14.9813 9.18282 15.3281 9.20626 15.3609C9.22501 15.3938 9.17345 15.8906 9.08907 16.4625C8.92032 17.6578 8.9297 17.775 9.22032 18.0609C9.39376 18.2391 9.61407 18.3281 9.8672 18.3281C9.94689 18.3281 10.4391 18.1266 11.0063 17.8547L12.0094 17.3859L12.2438 17.4844C12.375 17.5406 12.8156 17.7516 13.2281 17.9578C14.025 18.3516 14.1938 18.3938 14.4984 18.2625C14.7141 18.1734 14.9484 17.9156 15.0047 17.6953C15.0469 17.5406 15.0328 17.3109 14.9156 16.4297L14.775 15.3516L15.4172 14.6813C15.7688 14.3156 16.1156 13.9406 16.1859 13.8563C16.5281 13.4531 16.4016 12.7969 15.9469 12.5672C15.8484 12.5203 15.4172 12.4125 14.9766 12.3328C14.5406 12.2484 14.0719 12.1641 13.9359 12.1359L13.6922 12.0891L13.2141 11.1891C12.9516 10.6922 12.6938 10.2375 12.6375 10.1766C12.5063 10.0266 12.2016 9.89063 12 9.89063C11.9109 9.89063 11.7516 9.93282 11.6484 9.9797ZM12.45 11.7516C12.9609 12.7359 13.0547 12.8859 13.1906 12.9328C13.2469 12.9563 13.7156 13.0547 14.2313 13.1484C14.7422 13.2422 15.2156 13.3313 15.2766 13.3453C15.375 13.3688 15.3375 13.4203 14.85 13.9172C13.9266 14.8594 13.8281 14.9766 13.8281 15.15C13.8281 15.2344 13.8844 15.7406 13.9547 16.275C14.0203 16.8094 14.0672 17.2594 14.0531 17.2734C14.0391 17.2875 13.6125 17.1 13.1016 16.8516C12.5156 16.5703 12.1219 16.4063 12.0234 16.4063C11.925 16.4063 11.5219 16.575 10.9266 16.8563C10.4063 17.1047 9.96564 17.2969 9.95157 17.2781C9.93282 17.2641 9.98907 16.7859 10.0688 16.2188C10.1719 15.4781 10.2047 15.1547 10.1719 15.0703C10.1484 15.0047 9.7922 14.5969 9.3797 14.1656C8.9672 13.7344 8.63907 13.3781 8.64376 13.3734C8.64845 13.3641 9.12657 13.275 9.69845 13.1766C10.275 13.0734 10.7906 12.9609 10.8422 12.9234C10.8984 12.8859 11.175 12.4313 11.4516 11.9109C11.7328 11.3953 11.9813 10.9688 12 10.9688C12.0234 10.9688 12.225 11.3203 12.45 11.7516Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_180_5141">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/Phaha_Package/src/assets/images/tabs/office-building.svg b/Phaha_Package/src/assets/images/tabs/office-building.svg
new file mode 100644
index 0000000..725fa6b
--- /dev/null
+++ b/Phaha_Package/src/assets/images/tabs/office-building.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.32813 0.562487C5.94844 0.61405 5.63906 0.848425 5.47969 1.1953C5.40469 1.35936 5.39062 1.51874 5.39062 2.56405V3.74061L4.58438 4.0078C4.13906 4.1578 3.68906 4.32655 3.58125 4.38749C3.3375 4.52811 3.06094 4.82811 2.93438 5.10468L2.83594 5.3203L2.82188 11.6109L2.8125 17.9062H2.65781C2.40938 17.9062 1.97344 18.0375 1.59375 18.2203C1.09688 18.4594 0.548438 19.0125 0.309375 19.5094C0.0421875 20.0672 0 20.3484 0 21.6328C0 22.6312 0.0140625 22.7812 0.0890625 22.95C0.196875 23.1891 0.426563 23.3719 0.703125 23.4328C0.998438 23.5031 23.0016 23.5031 23.2969 23.4328C23.5734 23.3719 23.8031 23.1891 23.9109 22.95C23.9906 22.7766 24 22.6219 24 21.3516C24 19.8187 23.9813 19.65 23.7281 19.1344C23.5734 18.8109 23.1281 18.3516 22.8 18.1781C22.4672 18 22.0734 17.9062 21.6469 17.9062H21.2812V14.939C21.2812 11.7234 21.2812 11.7094 21.0234 11.3765C20.9578 11.2828 20.7891 11.1562 20.6578 11.0859L20.4188 10.9687H17.2172H14.0156V6.57655V2.17967L14.4281 2.5828C14.6531 2.80311 15.2672 3.40311 15.7969 3.90936C16.3266 4.4203 16.7953 4.90311 16.8375 4.9828C16.9125 5.11874 16.9172 5.3578 16.9219 7.44374V9.75467L17.0391 9.86718C17.1844 10.0172 17.3859 10.0219 17.5266 9.87655L17.6297 9.76405L17.6156 7.35468L17.6016 4.9453L17.475 4.68749C17.3672 4.46717 17.0578 4.14374 15.6281 2.76561C14.6859 1.85155 13.8516 1.07343 13.7813 1.03592C13.6547 0.974987 13.4766 1.02655 10.6453 1.97811L7.64063 2.98124V2.27342C7.64063 1.78592 7.61719 1.49061 7.57031 1.33124C7.41094 0.787487 6.90938 0.478111 6.32813 0.562487ZM6.67969 1.29374C6.77813 1.34061 6.85781 1.4203 6.88594 1.50936C6.91406 1.58905 6.9375 2.00155 6.9375 2.44217V3.22499L6.51563 3.36561L6.09375 3.51093V2.51249C6.09375 1.57967 6.09844 1.50467 6.1875 1.39217C6.23906 1.32655 6.32813 1.26093 6.38906 1.25155C6.44531 1.24217 6.50156 1.22811 6.50625 1.22342C6.51563 1.22342 6.59531 1.25155 6.67969 1.29374ZM13.3125 2.78436V3.74061L11.3344 4.40155C6.99844 5.84999 5.5125 6.36561 5.45156 6.44999C5.29688 6.66561 5.45156 6.98436 5.71406 6.98436C5.78906 6.98436 7.51406 6.42655 9.54844 5.74217C11.5781 5.0578 13.2563 4.49999 13.2797 4.49999C13.2984 4.49999 13.3125 4.89842 13.3125 5.38593V6.27186L11.0531 7.02655C6.80625 8.44217 5.51719 8.89217 5.45156 8.98124C5.29688 9.19686 5.45156 9.51561 5.71406 9.51561C5.78906 9.51561 7.51406 8.9578 9.55313 8.27343C11.5875 7.58905 13.2703 7.03124 13.2844 7.03124C13.2984 7.03124 13.3125 7.42967 13.3125 7.91717V8.80311L10.8422 9.62811C6.6375 11.0297 5.51719 11.4234 5.45156 11.5125C5.29688 11.7281 5.45156 12.0469 5.71406 12.0469C5.78906 12.0469 7.51406 11.489 9.55313 10.8047C11.5875 10.1203 13.2656 9.56249 13.2797 9.56249C13.2984 9.56249 13.3125 9.96093 13.3125 10.4437V11.3297L9.43594 12.6281C6.74063 13.5328 5.53125 13.9594 5.475 14.025C5.29219 14.2312 5.44688 14.5781 5.71875 14.5781C5.78906 14.5781 7.51406 14.0203 9.54844 13.3359C11.5828 12.6516 13.2609 12.0937 13.2797 12.0937C13.2984 12.0937 13.3125 12.4828 13.3125 12.9609C13.3125 13.7531 13.3031 13.8281 13.2234 13.8703C13.1766 13.8984 12.0984 14.2687 10.8234 14.6953C9.55313 15.1219 8.46563 15.5016 8.40938 15.5391C8.26875 15.6281 8.22656 15.825 8.32031 15.9703C8.48906 16.2281 8.43281 16.2422 10.9219 15.4031C12.1922 14.9766 13.2469 14.625 13.2703 14.625C13.2938 14.625 13.3078 16.3406 13.3031 18.6891L13.2891 22.7578L11.7797 22.7719L10.2656 22.7812V20.9203C10.2656 19.8422 10.2469 18.9844 10.2188 18.8906C10.1297 18.5672 9.68438 18.2859 9.37969 18.3609C8.8875 18.4734 5.93438 19.3172 5.83125 19.3734C5.75625 19.4109 5.6625 19.4812 5.62031 19.5281C5.41875 19.7578 5.41406 19.8047 5.39062 21.3047L5.36719 22.7578H4.45312H3.53906L3.525 14.1562L3.51563 5.54999L3.61875 5.34374C3.67969 5.23124 3.78281 5.0953 3.84844 5.04842C3.91875 4.99686 5.7 4.37811 7.80938 3.6703C9.92344 2.96249 12.0094 2.25936 12.4453 2.10936C12.8859 1.95936 13.2563 1.8328 13.2797 1.8328C13.2984 1.82811 13.3125 2.25936 13.3125 2.78436ZM20.4563 11.8172L20.5781 11.9625V15.014V18.0703L20.3391 18.2109C19.6172 18.6328 19.1766 19.4297 19.1719 20.3062V20.5781H16.5938H14.0156V16.125V11.6719H17.175H20.3344L20.4563 11.8172ZM2.8125 19.5937V20.5781H1.75781H0.703125L0.73125 20.4469C0.848438 19.9219 1.06875 19.5141 1.41094 19.2C1.78125 18.8578 2.27813 18.6281 2.68594 18.614L2.8125 18.6094V19.5937ZM22.3969 18.7641C22.9547 19.0547 23.2547 19.5328 23.2875 20.1891L23.3109 20.5781H21.5859H19.8609L19.8891 20.2078C19.9172 19.7625 20.0766 19.3781 20.3344 19.1109C20.7141 18.7172 21.0281 18.6047 21.6797 18.6234C22.0828 18.6375 22.1813 18.6562 22.3969 18.7641ZM9.55313 20.9344L9.53906 22.7578H8.85938H8.17969L8.16563 21.0891L8.15625 19.425L8.82188 19.2328C9.19219 19.1297 9.50625 19.0594 9.52969 19.0734C9.54844 19.0922 9.55781 19.9266 9.55313 20.9344ZM7.45313 21.2109V22.7812H6.77344H6.09375L6.10313 21.3891L6.11719 19.9922L6.72656 19.8187C7.06406 19.725 7.36406 19.6453 7.39688 19.6453C7.43906 19.6406 7.45313 19.9828 7.45313 21.2109ZM2.8125 22.0312V22.7812H1.87969C1.36406 22.7812 0.890625 22.7625 0.825 22.7344L0.703125 22.6875V21.9844V21.2812H1.75781H2.8125V22.0312ZM19.1719 22.0312V22.7812H16.5938H14.0156V22.0312V21.2812H16.5938H19.1719V22.0312ZM23.2969 21.9469C23.2969 22.3172 23.2734 22.65 23.25 22.6875C23.2125 22.7484 22.9734 22.7578 21.5531 22.7578H19.8984L19.8844 22.0172L19.8703 21.2812H21.5859H23.2969V21.9469Z" fill="black"/>
+<path d="M6.23904 16.2375C5.8031 16.3828 5.49372 16.5141 5.45622 16.5703C5.30154 16.7812 5.45622 17.1094 5.70935 17.1094C5.89216 17.1094 7.24685 16.65 7.31716 16.5609C7.34997 16.5234 7.3781 16.4156 7.3781 16.3266C7.3781 16.1391 7.23279 15.9797 7.05935 15.9891C7.00779 15.9891 6.63747 16.1016 6.23904 16.2375Z" fill="black"/>
+<path d="M15.2297 12.6234C14.9859 12.7875 14.9531 12.8953 14.9531 13.5375C14.9531 14.175 14.9953 14.3109 15.2344 14.4562C15.3516 14.5219 15.5906 14.5312 17.2641 14.5312H19.1578L19.3172 14.4234C19.5469 14.2687 19.6031 14.0531 19.5844 13.4531C19.5609 12.8859 19.4953 12.7078 19.2469 12.5906C19.1062 12.525 18.8531 12.5156 17.2359 12.5156C15.3891 12.5156 15.3891 12.5156 15.2297 12.6234ZM18.8906 13.5234V13.8281H17.2734H15.6562V13.5234V13.2188H17.2734H18.8906V13.5234Z" fill="black"/>
+<path d="M15.2297 15.2953C15.1453 15.3516 15.0469 15.4547 15.0141 15.5156C14.925 15.6937 14.9344 16.7484 15.0235 16.9219C15.1688 17.2031 15.1828 17.2031 17.2922 17.2031H19.2094L19.3547 17.0812C19.5469 16.9172 19.6078 16.6687 19.5844 16.1016C19.561 15.5578 19.4906 15.3797 19.2469 15.2625C19.1063 15.1969 18.8531 15.1875 17.236 15.1875C15.3891 15.1875 15.3891 15.1875 15.2297 15.2953ZM18.8906 16.1953V16.5H17.2735H15.6563V16.1953V15.8906H17.2735H18.8906V16.1953Z" fill="black"/>
+<path d="M15.2297 17.9859C14.9953 18.1312 14.9531 18.2672 14.9531 18.9C14.9531 19.5469 14.9859 19.65 15.2344 19.8187C15.3938 19.9219 15.4266 19.9265 16.1625 19.9125L16.9313 19.8984L17.0906 19.725L17.25 19.5469V18.9375C17.25 17.9484 17.2031 17.9062 16.0922 17.9062C15.4922 17.9062 15.3281 17.925 15.2297 17.9859ZM16.5469 18.914V19.2187H16.1016H15.6562V18.914V18.6094H16.1016H16.5469V18.914Z" fill="black"/>
+</svg>
diff --git a/Phaha_Package/src/assets/images/tabs/people.svg b/Phaha_Package/src/assets/images/tabs/people.svg
new file mode 100644
index 0000000..bc3c4f2
--- /dev/null
+++ b/Phaha_Package/src/assets/images/tabs/people.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_180_5144)">
+<path d="M3.77349 0.0468712C2.88286 0.224997 2.16099 0.904684 1.8938 1.80468C1.77192 2.22187 1.77192 3.70781 1.8938 4.10156C1.99692 4.44375 2.12817 4.70156 2.3063 4.93125C2.4563 5.12343 2.47036 5.11406 2.09067 5.20312C1.36411 5.37187 0.656299 5.94375 0.314111 6.63281C0.0328613 7.2 0.0281738 7.22343 0.00942383 8.78437C4.88278e-05 9.58125 0.00473633 10.2797 0.0187988 10.3406C0.0984863 10.6406 0.464111 10.7437 0.679736 10.5234L0.796924 10.4109V9.075C0.796924 8.27812 0.815674 7.64062 0.848486 7.49062C1.00317 6.76406 1.62661 6.12187 2.34849 5.95781C2.46567 5.92968 3.29536 5.90625 4.2938 5.90625C6.27192 5.90625 6.40317 5.925 6.89536 6.27656C7.18599 6.4875 7.33599 6.66562 7.50942 7.00781C7.72505 7.42968 7.72505 7.42031 7.37817 7.51875C6.82036 7.67812 6.19692 8.18906 5.93911 8.7C5.71411 9.14531 5.67192 9.38437 5.66724 10.3125C5.65786 11.4375 5.73286 11.7469 6.12661 12.2906L6.28599 12.5109L6.15474 12.5437C5.63442 12.6562 5.32505 12.8016 4.90317 13.125C4.59849 13.3594 4.5938 13.3594 4.25161 13.3594C3.30942 13.3594 2.47974 13.8797 2.06255 14.7375C1.83286 15.2062 1.78599 15.5109 1.80474 16.5C1.8188 17.3578 1.89849 17.6812 2.22192 18.1594C2.44224 18.4922 2.45161 18.4734 2.10942 18.5391C1.8188 18.5953 1.29849 18.8672 1.00317 19.1109C0.651611 19.4062 0.318799 19.8891 0.150049 20.3437C0.0234863 20.6953 0.0234863 20.7 0.00942383 22.2094L-0.00463867 23.7187L0.131299 23.8594C0.281299 24.0094 0.393799 24.0328 0.576611 23.9484C0.782861 23.8547 0.796924 23.7422 0.796924 22.3828C0.796924 21.6187 0.820361 21 0.848486 20.85C0.975049 20.2406 1.38755 19.725 1.95474 19.4437L2.27349 19.2891L4.16724 19.275C5.85005 19.2609 6.08911 19.2703 6.3188 19.3406C6.88599 19.5187 7.36411 19.9641 7.59849 20.5312C7.70161 20.775 7.71099 20.8594 7.73442 22.2797L7.75786 23.775L7.88911 23.8875C8.05786 24.0281 8.20786 24.0281 8.37661 23.8875L8.50786 23.775L8.5313 22.2797C8.55474 20.8594 8.56411 20.775 8.66724 20.5312C8.90161 19.9641 9.37974 19.5187 9.94692 19.3406C10.1766 19.2703 10.4157 19.2609 12.0985 19.275L13.9922 19.2891L14.311 19.4437C14.8594 19.7156 15.286 20.2406 15.4172 20.8172C15.4454 20.9297 15.4688 21.6328 15.4688 22.3734V23.7281L15.6047 23.8641C15.7735 24.0328 15.9329 24.0375 16.111 23.8875L16.2422 23.775L16.2657 22.2797C16.2891 20.8922 16.2985 20.7703 16.3922 20.5406C16.6172 19.9828 17.1141 19.5187 17.6813 19.3406C17.911 19.2703 18.15 19.2609 19.8329 19.275L21.7266 19.2891L22.0407 19.4437C22.6079 19.7203 23.0204 20.2453 23.1516 20.85C23.1844 21 23.2032 21.6094 23.2032 22.3828C23.2032 23.7422 23.2172 23.8547 23.4235 23.9484C23.6063 24.0328 23.7188 24.0094 23.8688 23.8594L24.0047 23.7187L23.9907 22.2094C23.9766 20.7 23.9766 20.6953 23.85 20.3437C23.611 19.6875 23.1188 19.1016 22.5516 18.8016C22.0032 18.5156 21.9188 18.5016 20.625 18.4687C19.5375 18.4406 19.4063 18.4266 19.1625 18.3328C18.7875 18.1875 18.4266 17.8453 18.2532 17.475C18.1172 17.1797 18.1172 17.175 18.1172 16.2891C18.1172 15.4266 18.1219 15.3891 18.2391 15.1406C18.4219 14.7562 18.661 14.5078 19.0219 14.3344C19.3032 14.1937 19.3735 14.1797 19.7579 14.1797C20.2688 14.1797 20.5032 14.2734 20.8641 14.6109C21.2954 15.0141 21.4219 15.4125 21.4219 16.4062C21.4219 17.025 21.4641 17.1328 21.7266 17.1844C21.8391 17.2031 21.9282 17.1891 22.0032 17.1375C22.1954 17.0156 22.2329 16.7906 22.2047 16.0312C22.1766 15.3 22.0969 14.9766 21.825 14.5125C21.4172 13.8187 20.5922 13.3641 19.7344 13.3594C18.5954 13.3594 17.55 14.2312 17.3485 15.3469C17.2735 15.75 17.2875 16.9312 17.3672 17.3109C17.4422 17.6625 17.611 18.0328 17.8125 18.2859L17.9485 18.4547L17.6813 18.5109C17.0579 18.6469 16.3829 19.0922 15.975 19.6312L15.8579 19.7859L15.661 19.5281C15.3422 19.1016 14.8969 18.7875 14.3204 18.5859C14.1282 18.5156 13.8657 18.4969 12.8672 18.4687L11.6485 18.4406L11.3438 18.3C10.9735 18.1219 10.6641 17.8266 10.5047 17.4844C10.3875 17.2359 10.3829 17.1984 10.3829 16.2891V15.3516L10.5188 15.0797C10.6829 14.7609 10.9547 14.4984 11.3063 14.3109C11.5266 14.1937 11.6016 14.1797 12 14.1797C12.3985 14.1797 12.4735 14.1937 12.6938 14.3109C13.05 14.4984 13.3219 14.7656 13.4766 15.0797C13.6079 15.3422 13.6172 15.3844 13.6407 16.1625L13.6641 16.9781L13.7954 17.0906C13.8657 17.1516 13.9688 17.2031 14.0204 17.2031C14.1516 17.2031 14.3719 17.0812 14.4094 16.9922C14.4657 16.8375 14.4375 15.45 14.3672 15.1922C14.2219 14.6437 13.7954 14.0391 13.3735 13.7766L13.2094 13.6734L13.3454 13.5891C13.4157 13.5375 13.6125 13.4578 13.7766 13.4062C14.0297 13.3266 14.2079 13.3125 15.0422 13.3125C16.1344 13.3125 16.4907 13.2562 16.9641 13.0266C17.3485 12.8391 17.8032 12.3937 17.986 12.0234C18.2485 11.5078 18.2813 11.3156 18.2813 10.3594C18.2813 9.09375 18.1688 8.74687 17.5547 8.12812C17.2079 7.77656 16.8844 7.58906 16.4719 7.49062C16.2375 7.43437 16.2282 7.42968 16.1813 7.21406C15.961 6.26718 15.1172 5.41875 14.1704 5.19843C14.0438 5.17031 13.9172 5.14218 13.8891 5.12812C13.8469 5.11875 13.8891 5.01562 14.0157 4.82343C14.3672 4.275 14.4047 4.12031 14.4282 3.10781C14.4469 2.08593 14.4141 1.85625 14.175 1.35937C13.7016 0.365622 12.5344 -0.187504 11.4469 0.0703087C10.7813 0.229685 10.111 0.74531 9.82974 1.32187C9.59067 1.82343 9.55317 2.07656 9.57192 3.08906C9.59536 4.125 9.63755 4.31718 9.9938 4.84218C10.111 5.02031 10.1532 5.11875 10.1157 5.12812C10.0829 5.1375 9.9188 5.17968 9.75005 5.22656C9.31411 5.33906 9.00005 5.52187 8.92505 5.70468C8.76099 6.08906 9.19224 6.37968 9.5813 6.14531C9.94224 5.925 10.1297 5.90625 12.0047 5.90625C13.6454 5.90625 13.7954 5.91093 14.0813 6C14.6766 6.1875 15.2063 6.72656 15.375 7.31718C15.4079 7.43437 15.3985 7.44843 15.2625 7.47187C14.7047 7.575 13.9735 8.15156 13.6922 8.70937C13.4532 9.1875 13.4063 9.44531 13.4063 10.3359C13.4063 11.4 13.5282 11.8781 13.9032 12.3234C13.9688 12.4078 14.0157 12.4828 14.0063 12.4969C13.9922 12.5062 13.8563 12.5484 13.7063 12.5906C13.3079 12.6937 13.0032 12.8437 12.6422 13.1156C12.3235 13.3594 12.3235 13.3594 11.9766 13.3594C10.8938 13.3594 9.91411 14.1234 9.63286 15.1922C9.53442 15.5484 9.53911 17.0391 9.63286 17.4047C9.71255 17.7187 9.88599 18.0703 10.05 18.2719C10.1204 18.3469 10.1719 18.4219 10.1719 18.4359C10.1719 18.45 10.0594 18.4875 9.92817 18.5156C9.31411 18.6609 8.69536 19.0547 8.33442 19.5281L8.13755 19.7953L8.02036 19.6359C7.80474 19.3406 7.37817 18.9609 7.09692 18.8109C6.53911 18.5156 6.45474 18.5016 5.13286 18.4687C3.78755 18.4312 3.67036 18.4078 3.27192 18.1172C3.02349 17.9344 2.7938 17.625 2.69067 17.3344C2.59224 17.0625 2.55005 16.0547 2.62036 15.6187C2.71411 15.0141 3.03755 14.5641 3.56255 14.3062C3.78286 14.1984 3.87661 14.1797 4.24224 14.1797C4.60317 14.1797 4.70161 14.1984 4.9313 14.3062C5.27349 14.4656 5.59692 14.7937 5.7563 15.1312C5.87349 15.3797 5.88286 15.4547 5.89692 16.1484C5.90161 16.5609 5.93442 16.9453 5.96255 16.9969C6.01411 17.1094 6.18755 17.2031 6.33286 17.2031C6.38442 17.2031 6.49224 17.1422 6.56724 17.0672L6.70317 16.9312V16.2469C6.70317 15.8719 6.67974 15.4547 6.65161 15.3187C6.52974 14.7516 6.15474 14.1609 5.71411 13.8422L5.47974 13.6734L5.61099 13.5844C5.93442 13.3687 6.2813 13.3125 7.26099 13.3125C8.39536 13.3125 8.6813 13.2703 9.16411 13.0359C9.75005 12.7453 10.1907 12.2625 10.4157 11.6484C10.5047 11.4047 10.5235 11.25 10.5375 10.5C10.5563 9.51093 10.5047 9.17812 10.2563 8.7C9.9563 8.1375 9.21099 7.55625 8.67192 7.47187C8.50786 7.44375 8.4938 7.42968 8.44224 7.20937C8.30161 6.59062 7.86567 5.98125 7.29849 5.59218C6.97036 5.37187 6.64692 5.23593 6.17817 5.1375L6.05161 5.10937L6.23442 4.86093C6.61411 4.36406 6.72192 3.85312 6.6938 2.72812C6.67505 2.09531 6.65161 1.89375 6.57192 1.67812C6.14536 0.496872 4.96411 -0.19219 3.77349 0.0468712ZM4.85161 0.914059C5.34849 1.125 5.70942 1.54218 5.84067 2.05781C5.9438 2.47031 5.91099 3.7125 5.78911 4.04531C5.66724 4.37812 5.27349 4.78125 4.91255 4.95C4.6688 5.05781 4.55161 5.08125 4.24224 5.08593C3.90942 5.08593 3.82974 5.06718 3.55317 4.93125C3.17349 4.74375 2.85942 4.41093 2.71411 4.04062C2.61567 3.80156 2.6063 3.69375 2.6063 2.95312C2.6063 2.2125 2.61567 2.10468 2.71411 1.86562C2.89692 1.39219 3.29536 1.03593 3.82036 0.857809C4.05942 0.778122 4.59849 0.810934 4.85161 0.914059ZM12.7313 0.984371C13.0735 1.15312 13.3219 1.41093 13.4954 1.77656C13.6125 2.02968 13.6172 2.0625 13.6172 2.95312C13.6172 3.84375 13.6125 3.87187 13.4907 4.13437C13.2563 4.63593 12.8157 4.96406 12.2438 5.07187C11.7047 5.17031 11.011 4.89375 10.6875 4.44843C10.3969 4.04062 10.35 3.825 10.3688 2.85937L10.3829 1.99218L10.5422 1.69687C10.9829 0.885935 11.9157 0.581247 12.7313 0.984371ZM8.8313 8.38593C9.18286 8.55937 9.4313 8.8125 9.60474 9.18281C9.72192 9.44062 9.72661 9.46875 9.72661 10.3594C9.72661 11.4187 9.6938 11.5359 9.2813 11.9719C8.43286 12.8719 6.94224 12.5484 6.5438 11.3766C6.48755 11.2031 6.4688 10.9687 6.4688 10.3359C6.4688 9.62812 6.48286 9.4875 6.56724 9.2625C6.73599 8.80781 7.22349 8.37187 7.71099 8.24531C7.79067 8.22187 8.00161 8.2125 8.18911 8.22187C8.4563 8.23125 8.59224 8.26875 8.8313 8.38593ZM16.5329 8.36718C16.875 8.51718 17.2032 8.84531 17.3579 9.17812C17.4516 9.375 17.461 9.49218 17.475 10.2469C17.4938 11.1844 17.4704 11.3344 17.2407 11.7187C16.8235 12.4078 15.9141 12.6844 15.1829 12.3422C14.8172 12.1687 14.5313 11.8922 14.3579 11.5406C14.2266 11.2781 14.2266 11.2641 14.2266 10.3594C14.2266 9.47343 14.2313 9.43593 14.3485 9.1875C14.7469 8.32968 15.6797 7.98281 16.5329 8.36718Z" fill="black"/>
+<path d="M19.186 0.06563C18.2673 0.300005 17.5079 1.09219 17.3485 1.9875C17.2876 2.32969 17.2829 3.4875 17.3392 3.84375C17.4048 4.22344 17.5548 4.58438 17.7657 4.86094L17.9485 5.10938L17.822 5.1375C17.461 5.2125 17.0251 5.37657 16.936 5.47032C16.786 5.61563 16.7907 5.87344 16.9454 6.02344C17.086 6.16875 17.2032 6.16875 17.5314 6.0375C17.7798 5.93438 17.8501 5.92969 19.5845 5.91563C20.7564 5.90625 21.4689 5.92032 21.6235 5.95313C22.3548 6.10313 22.997 6.75469 23.1517 7.49063C23.1845 7.64063 23.2032 8.27813 23.2032 9.075V10.4109L23.3204 10.5234C23.536 10.7438 23.9017 10.6406 23.9814 10.3406C23.9954 10.2797 24.0001 9.58125 23.9907 8.78438C23.972 7.21875 23.9673 7.19063 23.672 6.60938C23.3345 5.93438 22.6267 5.36719 21.9095 5.20313C21.5298 5.11407 21.5439 5.12344 21.6939 4.93125C21.8767 4.70157 22.0032 4.44375 22.1064 4.10157C22.2282 3.70313 22.2235 2.21719 22.1064 1.80469C21.9845 1.39688 21.8345 1.125 21.5579 0.825005C21.2485 0.487505 20.9907 0.30938 20.5923 0.15938C20.2032 0.0140676 19.5564 -0.0328074 19.186 0.06563ZM20.4282 0.960942C20.7985 1.125 21.136 1.48594 21.286 1.86563C21.3845 2.10469 21.3939 2.2125 21.3939 2.95313C21.3939 3.69375 21.3845 3.80157 21.286 4.04063C21.1407 4.41094 20.8267 4.74375 20.447 4.93125C20.1704 5.06719 20.0907 5.08594 19.7579 5.08594C19.2517 5.08125 18.8954 4.92188 18.5439 4.54219C18.1829 4.15313 18.1314 3.975 18.1032 3.06563C18.0892 2.45157 18.0985 2.25469 18.1642 2.03438C18.3329 1.42969 18.8017 0.98438 19.4298 0.825005C19.6595 0.768755 20.1423 0.83438 20.4282 0.960942Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_180_5144">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/Phaha_Package/src/assets/images/tabs/tag.svg b/Phaha_Package/src/assets/images/tabs/tag.svg
new file mode 100644
index 0000000..af5c216
--- /dev/null
+++ b/Phaha_Package/src/assets/images/tabs/tag.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.87347 2.01562C4.87972 2.27812 4.13441 3.05156 3.9141 4.05469C3.84847 4.34531 3.84378 5.32969 3.85316 12.5859L3.86722 20.7891L4.00316 21.0609C4.39222 21.825 5.32035 22.1766 6.04691 21.8391C6.18753 21.7688 6.48285 21.5578 6.70316 21.3656C7.15316 20.9672 9.26254 19.1016 10.6547 17.8641C11.1657 17.4094 11.6532 17.0016 11.7328 16.9547C11.911 16.8563 12.1172 16.8516 12.2907 16.9406C12.361 16.9781 13.5891 18.0469 15.0235 19.3219C17.9719 21.9422 18.0047 21.9609 18.6047 21.9563C19.2328 21.9516 19.7438 21.6281 20.025 21.0563L20.1797 20.7422L20.1938 12.6328C20.2032 7.04531 20.1891 4.42969 20.1563 4.21875C19.9782 3.11719 19.125 2.21719 18.061 1.99219C17.7938 1.93594 16.8188 1.92188 11.9766 1.92656C6.49222 1.92656 6.19691 1.93125 5.87347 2.01562ZM18.0422 2.98594C18.5625 3.19687 18.886 3.52031 19.0875 4.02188L19.1953 4.28906L19.2094 12.3188C19.2141 17.5828 19.2047 20.4094 19.1719 20.5266C19.1063 20.775 18.8953 20.9578 18.6422 20.9859C18.5297 21 18.3891 20.9859 18.3328 20.9578C18.2766 20.925 17.0391 19.8469 15.5766 18.5531C13.5891 16.7953 12.8532 16.1766 12.6657 16.0875C12.1735 15.8625 11.5594 15.9094 11.1235 16.2047C11.0203 16.275 9.77816 17.3578 8.36253 18.6094C6.9516 19.8609 5.7516 20.9063 5.70003 20.9391C5.64378 20.9719 5.51253 20.9953 5.40472 21C5.15628 21 4.89847 20.7938 4.82816 20.5406C4.76253 20.3016 4.76253 4.70156 4.82816 4.35938C4.97347 3.6 5.53597 3.03281 6.27191 2.90625C6.39378 2.8875 9.03285 2.87344 12.1407 2.87813L17.7891 2.88281L18.0422 2.98594Z" fill="black"/>
+</svg>
diff --git a/Phaha_Package/src/assets/templace/vneconomy/fonts/HelveticaWorld-Bold.otf b/Phaha_Package/src/assets/templace/vneconomy/fonts/HelveticaWorld-Bold.otf
new file mode 100644
index 0000000..a85dda9
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/fonts/HelveticaWorld-Bold.otf differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/fonts/HelveticaWorld-Regular.otf b/Phaha_Package/src/assets/templace/vneconomy/fonts/HelveticaWorld-Regular.otf
new file mode 100644
index 0000000..d9d2af6
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/fonts/HelveticaWorld-Regular.otf differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/askonomy-banner.PNG b/Phaha_Package/src/assets/templace/vneconomy/images/askonomy-banner.PNG
new file mode 100644
index 0000000..5a3e6bd
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/images/askonomy-banner.PNG differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/askonomy.jpg b/Phaha_Package/src/assets/templace/vneconomy/images/askonomy.jpg
new file mode 100644
index 0000000..18015af
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/images/askonomy.jpg differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/askonomy1.jpg b/Phaha_Package/src/assets/templace/vneconomy/images/askonomy1.jpg
new file mode 100644
index 0000000..570f59b
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/images/askonomy1.jpg differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/askonomy2.jpg b/Phaha_Package/src/assets/templace/vneconomy/images/askonomy2.jpg
new file mode 100644
index 0000000..897316f
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/images/askonomy2.jpg differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/askonomyif.jpg b/Phaha_Package/src/assets/templace/vneconomy/images/askonomyif.jpg
new file mode 100644
index 0000000..96db0ec
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/images/askonomyif.jpg differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/banner-01.jpg b/Phaha_Package/src/assets/templace/vneconomy/images/banner-01.jpg
new file mode 100644
index 0000000..94b3be5
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/images/banner-01.jpg differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/banner-01.png b/Phaha_Package/src/assets/templace/vneconomy/images/banner-01.png
new file mode 100644
index 0000000..c5dfa51
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/images/banner-01.png differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/banner-03.png b/Phaha_Package/src/assets/templace/vneconomy/images/banner-03.png
new file mode 100644
index 0000000..9033617
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/images/banner-03.png differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/banner1.jpg b/Phaha_Package/src/assets/templace/vneconomy/images/banner1.jpg
new file mode 100644
index 0000000..69ea172
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/images/banner1.jpg differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/banner2.jpg b/Phaha_Package/src/assets/templace/vneconomy/images/banner2.jpg
new file mode 100644
index 0000000..205a589
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/images/banner2.jpg differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/datbao1.jpg b/Phaha_Package/src/assets/templace/vneconomy/images/datbao1.jpg
new file mode 100644
index 0000000..cd77900
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/images/datbao1.jpg differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/datbao1.png b/Phaha_Package/src/assets/templace/vneconomy/images/datbao1.png
new file mode 100644
index 0000000..b481d67
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/images/datbao1.png differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/diembao1.jpg b/Phaha_Package/src/assets/templace/vneconomy/images/diembao1.jpg
new file mode 100644
index 0000000..1c6d934
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/images/diembao1.jpg differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/logotc.png b/Phaha_Package/src/assets/templace/vneconomy/images/logotc.png
new file mode 100644
index 0000000..81f76b3
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/images/logotc.png differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/logovne.png b/Phaha_Package/src/assets/templace/vneconomy/images/logovne.png
new file mode 100644
index 0000000..ef395fe
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/images/logovne.png differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/nhanxet.png b/Phaha_Package/src/assets/templace/vneconomy/images/nhanxet.png
new file mode 100644
index 0000000..8e0c1ee
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/images/nhanxet.png differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/p1.svg b/Phaha_Package/src/assets/templace/vneconomy/images/p1.svg
new file mode 100644
index 0000000..74a02f0
--- /dev/null
+++ b/Phaha_Package/src/assets/templace/vneconomy/images/p1.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 37.6 44.7" style="enable-background:new 0 0 37.6 44.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFB900;}
+</style>
+<g>
+	<path class="st0" d="M26,25c0,0-0.3-1.1,1-1.5c0.7-0.1,1.4,0.6,1.5,2.1s0.7,5.3,0.7,5.3s0.2,0.9,0.9,0.8c0.7-0.1,0-1.7,0-1.7l-1-6
+		l3.2,3.2c0,0,2.1,1.8,1.3,5c-0.8,3.2,0.1,7.4,1,8.4c-3.6,1.3-5.6,2-5.6,2s-0.3-2.8-1.8-5.2C25.6,35,26,32.5,26,30.7
+		C26,28.9,26,25,26,25z"/>
+	<path class="st0" d="M24.2,34.2H6.7c-0.2,0-0.4-0.2-0.4-0.4V7.4C6.3,7.2,6.5,7,6.7,7h18.9C25.8,7,26,7.2,26,7.4v14.4
+		c0.8-0.3,1.5-0.3,2.1-0.1V7.4c0-1.4-1.1-2.5-2.5-2.5H6.7c-1.4,0-2.5,1.1-2.5,2.5v26.4c0,1.4,1.1,2.5,2.5,2.5h18
+		C24.5,35.6,24.3,34.9,24.2,34.2z"/>
+	<path class="st0" d="M22.8,12.3H9.7c-0.3,0-0.5-0.2-0.5-0.5v0c0-0.3,0.2-0.5,0.5-0.5h13.1c0.3,0,0.5,0.2,0.5,0.5v0
+		C23.3,12,23,12.3,22.8,12.3z"/>
+	<path class="st0" d="M22.8,15.1H9.7c-0.3,0-0.5-0.2-0.5-0.5v0c0-0.3,0.2-0.5,0.5-0.5h13.1c0.3,0,0.5,0.2,0.5,0.5v0
+		C23.3,14.8,23,15.1,22.8,15.1z"/>
+	<path class="st0" d="M22.8,17.8H9.7c-0.3,0-0.5-0.2-0.5-0.5l0,0c0-0.3,0.2-0.5,0.5-0.5h13.1c0.3,0,0.5,0.2,0.5,0.5l0,0
+		C23.3,17.6,23,17.8,22.8,17.8z"/>
+	<path class="st0" d="M22.8,20.6H9.7c-0.3,0-0.5-0.2-0.5-0.5l0,0c0-0.3,0.2-0.5,0.5-0.5h13.1c0.3,0,0.5,0.2,0.5,0.5l0,0
+		C23.3,20.4,23,20.6,22.8,20.6z"/>
+	<path class="st0" d="M22.8,23.4H9.7c-0.3,0-0.5-0.2-0.5-0.5l0,0c0-0.3,0.2-0.5,0.5-0.5h13.1c0.3,0,0.5,0.2,0.5,0.5l0,0
+		C23.3,23.2,23,23.4,22.8,23.4z"/>
+	<path class="st0" d="M19.2,26.2H9.7c-0.3,0-0.5-0.2-0.5-0.5l0,0c0-0.3,0.2-0.5,0.5-0.5h9.6c0.3,0,0.5,0.2,0.5,0.5l0,0
+		C19.7,26,19.5,26.2,19.2,26.2z"/>
+</g>
+</svg>
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/p2.svg b/Phaha_Package/src/assets/templace/vneconomy/images/p2.svg
new file mode 100644
index 0000000..663165f
--- /dev/null
+++ b/Phaha_Package/src/assets/templace/vneconomy/images/p2.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 37.6 39.4" style="enable-background:new 0 0 37.6 39.4;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFB900;}
+</style>
+<g>
+	<path class="st0" d="M23.9,10.1H6.5c-2,0-3.7,1.6-3.7,3.7v11.3c0,2,1.6,3.7,3.7,3.7h5.6v-2.4H6.5c-0.7,0-1.2-0.6-1.2-1.2V13.8
+		c0-0.7,0.6-1.2,1.2-1.2h17.4c0.7,0,1.2,0.6,1.2,1.2v11.3c0,0.7-0.6,1.2-1.2,1.2h-6.5l-5.3,2.4v2.9l5.3-2.9h6.5c2,0,3.7-1.6,3.7-3.7
+		V13.8C27.5,11.7,25.9,10.1,23.9,10.1z"/>
+	<g>
+		<path class="st0" d="M30.1,4.7H12.7c-2,0-3.7,1.6-3.7,3.7v0.8h2.4V8.4c0-0.7,0.6-1.2,1.2-1.2H30c0.7,0,1.2,0.6,1.2,1.2v11.3
+			c0,0.7-0.6,1.2-1.2,1.2h-1.6v2.4H30c2,0,3.7-1.6,3.7-3.7V8.3C33.7,6.3,32.1,4.7,30.1,4.7z"/>
+	</g>
+</g>
+</svg>
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/p3.svg b/Phaha_Package/src/assets/templace/vneconomy/images/p3.svg
new file mode 100644
index 0000000..49d7ace
--- /dev/null
+++ b/Phaha_Package/src/assets/templace/vneconomy/images/p3.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 37.6 44.7" style="enable-background:new 0 0 37.6 44.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFB900;}
+</style>
+<g>
+	<path class="st0" d="M26.3,7.9C25.8,7.7,25.4,7.7,25,8c-4.5,3.2-10.1,4.3-11.7,4.6c0,0,0,0,0,0H5.5c-0.4,0-0.7,0.3-0.7,0.7v1.4H3.4
+		c-0.2,0-0.4,0.2-0.4,0.4v8.5C3,23.8,3.2,24,3.4,24h1.4v1.3c0,0.4,0.3,0.7,0.7,0.7h2.3l2.9,10.3c0.1,0.4,0.4,0.6,0.8,0.6h3.8
+		c0.5,0,0.9-0.5,0.8-1.1l-2.9-9.8c4.5,0.8,9.8,3.5,11.9,4.7c0.2,0.1,0.4,0.2,0.6,0.2c0.2,0,0.4-0.1,0.6-0.2c0.4-0.2,0.6-0.6,0.6-1V9
+		C26.9,8.5,26.7,8.1,26.3,7.9z M24.9,28.4c-2.3-1.2-6.6-3.7-11-4.6v-9.1c2-0.4,6.6-1.6,11-4.5V28.4z"/>
+	<rect x="28.7" y="10.4" transform="matrix(0.8127 -0.5827 0.5827 0.8127 -0.6577 20.1754)" class="st0" width="4.7" height="1.4"/>
+	<rect x="29" y="18.5" class="st0" width="5.6" height="1.4"/>
+	<rect x="30.4" y="24.5" transform="matrix(0.5378 -0.8431 0.8431 0.5378 -8.4059 38.6946)" class="st0" width="1.4" height="5"/>
+</g>
+</svg>
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/premium.jpg b/Phaha_Package/src/assets/templace/vneconomy/images/premium.jpg
new file mode 100644
index 0000000..6a1cca2
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/images/premium.jpg differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/sobao1.jpg b/Phaha_Package/src/assets/templace/vneconomy/images/sobao1.jpg
new file mode 100644
index 0000000..a384d4a
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/images/sobao1.jpg differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/sobao2.jpg b/Phaha_Package/src/assets/templace/vneconomy/images/sobao2.jpg
new file mode 100644
index 0000000..6c56270
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/images/sobao2.jpg differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/sobao3.jpg b/Phaha_Package/src/assets/templace/vneconomy/images/sobao3.jpg
new file mode 100644
index 0000000..3c45900
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/images/sobao3.jpg differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/sobao4.jpg b/Phaha_Package/src/assets/templace/vneconomy/images/sobao4.jpg
new file mode 100644
index 0000000..6191855
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/images/sobao4.jpg differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/star-1.png b/Phaha_Package/src/assets/templace/vneconomy/images/star-1.png
new file mode 100644
index 0000000..2f1e629
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/images/star-1.png differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/star-1.svg b/Phaha_Package/src/assets/templace/vneconomy/images/star-1.svg
new file mode 100644
index 0000000..a8734a6
--- /dev/null
+++ b/Phaha_Package/src/assets/templace/vneconomy/images/star-1.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 38.5 36.6" style="enable-background:new 0 0 38.5 36.6;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<polygon class="st0" points="19.2,0 25.2,14 38.5,15 27.8,23.3 31.1,36.6 19.2,30.3 7.3,36.6 10.6,23.3 0,15 13.3,14 "/>
+</svg>
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/star-2.png b/Phaha_Package/src/assets/templace/vneconomy/images/star-2.png
new file mode 100644
index 0000000..fb4e26c
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/images/star-2.png differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/star-2.svg b/Phaha_Package/src/assets/templace/vneconomy/images/star-2.svg
new file mode 100644
index 0000000..2c75671
--- /dev/null
+++ b/Phaha_Package/src/assets/templace/vneconomy/images/star-2.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 87.9 36.6" style="enable-background:new 0 0 87.9 36.6;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<polygon class="st0" points="19.2,0 25.2,14.1 38.5,15 27.8,23.4 31.1,36.6 19.2,30.3 7.3,36.6 10.6,23.4 0,15 13.3,14.1 "/>
+<polygon class="st0" points="68.7,0 74.6,14.1 87.9,15 77.3,23.4 80.6,36.6 68.7,30.3 56.8,36.6 60.1,23.4 49.5,15 62.7,14.1 "/>
+</svg>
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/star-3.png b/Phaha_Package/src/assets/templace/vneconomy/images/star-3.png
new file mode 100644
index 0000000..c9b77e5
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/images/star-3.png differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/star-3.svg b/Phaha_Package/src/assets/templace/vneconomy/images/star-3.svg
new file mode 100644
index 0000000..e36e773
--- /dev/null
+++ b/Phaha_Package/src/assets/templace/vneconomy/images/star-3.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 137.3 36.6" style="enable-background:new 0 0 137.3 36.6;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<polygon class="st0" points="19.2,0 25.2,14.1 38.4,15 27.8,23.4 31.1,36.6 19.2,30.3 7.3,36.6 10.6,23.4 0,15 13.3,14.1 "/>
+<polygon class="st0" points="68.7,0 74.6,14.1 87.9,15 77.3,23.4 80.5,36.6 68.7,30.3 56.8,36.6 60,23.4 49.4,15 62.7,14.1 "/>
+<polygon class="st0" points="118.1,0 124.1,14.1 137.3,15 126.7,23.4 130,36.6 118.1,30.3 106.2,36.6 109.5,23.4 98.9,15 
+	112.2,14.1 "/>
+</svg>
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/star-4.png b/Phaha_Package/src/assets/templace/vneconomy/images/star-4.png
new file mode 100644
index 0000000..3ebadbb
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/images/star-4.png differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/star-4.svg b/Phaha_Package/src/assets/templace/vneconomy/images/star-4.svg
new file mode 100644
index 0000000..2ee0a2e
--- /dev/null
+++ b/Phaha_Package/src/assets/templace/vneconomy/images/star-4.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 186.8 36.6" style="enable-background:new 0 0 186.8 36.6;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<polygon class="st0" points="19.2,0 25.1,14.1 38.4,15 27.8,23.4 31.1,36.6 19.2,30.3 7.3,36.6 10.6,23.4 0,15 13.2,14.1 "/>
+<polygon class="st0" points="68.6,0 74.6,14.1 87.9,15 77.2,23.4 80.5,36.6 68.6,30.3 56.7,36.6 60,23.4 49.4,15 62.7,14.1 "/>
+<polygon class="st0" points="118.1,0 124,14.1 137.3,15 126.7,23.4 130,36.6 118.1,30.3 106.2,36.6 109.5,23.4 98.9,15 112.1,14.1 
+	"/>
+<polygon class="st0" points="167.5,0 173.5,14.1 186.8,15 176.1,23.4 179.4,36.6 167.5,30.3 155.7,36.6 158.9,23.4 148.3,15 
+	161.6,14.1 "/>
+</svg>
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/star-5.png b/Phaha_Package/src/assets/templace/vneconomy/images/star-5.png
new file mode 100644
index 0000000..1f99ac8
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/images/star-5.png differ
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/star-5.svg b/Phaha_Package/src/assets/templace/vneconomy/images/star-5.svg
new file mode 100644
index 0000000..bc7d2e5
--- /dev/null
+++ b/Phaha_Package/src/assets/templace/vneconomy/images/star-5.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 236.3 36.6" style="enable-background:new 0 0 236.3 36.6;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<polygon class="st0" points="19.3,0 25.2,14.1 38.5,15 27.9,23.4 31.1,36.6 19.3,30.3 7.4,36.6 10.6,23.4 0,15 13.3,14.1 "/>
+<polygon class="st0" points="68.7,0 74.7,14.1 87.9,15 77.3,23.4 80.6,36.6 68.7,30.3 56.8,36.6 60.1,23.4 49.5,15 62.8,14.1 "/>
+<polygon class="st0" points="118.2,0 124.1,14.1 137.4,15 126.8,23.4 130,36.6 118.2,30.3 106.3,36.6 109.5,23.4 98.9,15 
+	112.2,14.1 "/>
+<polygon class="st0" points="167.6,0 173.6,14.1 186.8,15 176.2,23.4 179.5,36.6 167.6,30.3 155.7,36.6 159,23.4 148.4,15 
+	161.7,14.1 "/>
+<polygon class="st0" points="217.1,0 223,14.1 236.3,15 225.7,23.4 228.9,36.6 217.1,30.3 205.2,36.6 208.4,23.4 197.8,15 
+	211.1,14.1 "/>
+</svg>
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/swbutton.svg b/Phaha_Package/src/assets/templace/vneconomy/images/swbutton.svg
new file mode 100644
index 0000000..00d4d79
--- /dev/null
+++ b/Phaha_Package/src/assets/templace/vneconomy/images/swbutton.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 13.3 30" style="enable-background:new 0 0 13.3 30;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F5F5F5;}
+	.st1{fill:none;stroke:#7A7A7A;stroke-width:2;stroke-miterlimit:10;}
+</style>
+<rect y="0" class="st0" width="13.3" height="30"/>
+<polyline class="st1" points="2.5,6.7 10.8,15 2.5,23.3 "/>
+</svg>
diff --git a/Phaha_Package/src/assets/templace/vneconomy/images/vnpost.jpg b/Phaha_Package/src/assets/templace/vneconomy/images/vnpost.jpg
new file mode 100644
index 0000000..26b958b
Binary files /dev/null and b/Phaha_Package/src/assets/templace/vneconomy/images/vnpost.jpg differ
diff --git a/Phaha_Package/src/environments/environment.prod.ts b/Phaha_Package/src/environments/environment.prod.ts
new file mode 100644
index 0000000..aae9c19
--- /dev/null
+++ b/Phaha_Package/src/environments/environment.prod.ts
@@ -0,0 +1,19 @@
+export const environment = {
+  production: true,
+  ty_gia: 24780,
+  //apiUrl: 'https://admin.postenp.phaha.vn/web',
+  apiUrl: 'https://adpostenp.phaha.vn/web',
+  // apiUrl: 'https://adtest.postenp.vn/web',
+  urlAskonomy: 'https://app.chatbd.ai/929e7e8f-e40c-4094-891d-490a896594f7',
+  editor_payment_ids: [27, 31, 33, 35, 100, 101, 102],
+  firebase: {
+    apiKey: "AIzaSyCyFyVN76PA0CQ1Xbxh6unTuoBmwozvRFw",
+    authDomain: "postenp-d9645.firebaseapp.com",
+    projectId: "postenp-d9645",
+    storageBucket: "postenp-d9645.appspot.com",
+    messagingSenderId: "224827359176",
+    appId: "1:224827359176:web:428e4de0a08e8503008afd",
+    measurementId: "G-2C3X4L2SWV",
+    vapidKey: "BBe1tMef88oI0Y_uPIEOsBk4rBsnqExcQBUDdjCc1ka0quWewBbsPF7uPAEpOtskoJiIGmpLyKkbeK-OOifwYQo"
+  }
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/firebase-messaging-sw.js b/Phaha_Package/src/firebase-messaging-sw.js
new file mode 100644
index 0000000..97d2782
--- /dev/null
+++ b/Phaha_Package/src/firebase-messaging-sw.js
@@ -0,0 +1,12 @@
+importScripts("https://www.gstatic.com/firebasejs/9.8.4/firebase-app-compat.js");
+importScripts("https://www.gstatic.com/firebasejs/9.8.4/firebase-messaging-compat.js");
+firebase.initializeApp({
+    apiKey: "AIzaSyCyFyVN76PA0CQ1Xbxh6unTuoBmwozvRFw",
+    authDomain: "postenp-d9645.firebaseapp.com",
+    projectId: "postenp-d9645",
+    storageBucket: "postenp-d9645.appspot.com",
+    messagingSenderId: "224827359176",
+    appId: "1:224827359176:web:428e4de0a08e8503008afd",
+    measurementId: "G-2C3X4L2SWV"
+});
+const messaging = firebase.messaging();
diff --git a/Phaha_Package/src/index.html b/Phaha_Package/src/index.html
new file mode 100644
index 0000000..c0d56b5
--- /dev/null
+++ b/Phaha_Package/src/index.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <base href="/">
+  <title>Công Ty Phát hành Báo Chí Trung Ương</title>
+  <meta name="revisit-after" , content="1 days">
+  <meta name="copyright" , content="Post ENP">
+  <meta name="resource-type" , content="Document">
+  <meta name="distribution" , content="Global">
+  <link rel="manifest"  href="./manifest.json">
+
+  <link rel="icon" type="image/x-icon" href="assets/images/brand/Logo.png">
+  <link rel="canonical" href="https://postenp.phaha.vn/">
+  <link rel="shortlink" href="https://postenp.phaha.vn/">
+  <!-- Bootstrap Icons -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
+  <!-- Kit Fontawesome -->
+  <script src="https://kit.fontawesome.com/ffbe9c763a.js" crossorigin="anonymous"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
+    rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.plyr.io/3.7.2/plyr.css" />
+</head>
+
+<body>
+  <app-root></app-root>
+  <div id="fb-root"></div>
+</body>
+
+<!-- Google tag (gtag.js) -->
+<!-- Google tag (gtag.js) -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-TTX18YP673"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'G-TTX18YP673');
+</script>
+<script>
+  setTimeout(() => {
+    if (document.getElementById("time-coming-soon")) {
+      // Set the date we're counting down to
+      var countDownDate = new Date("Dec 5, 2022 15:37:25").getTime();
+
+      // Update the count down every 1 second
+      var x = setInterval(function () {
+
+        // Get todays date and time
+        var now = new Date().getTime();
+
+        // Find the distance between now an the count down date
+        var distance = countDownDate - now;
+
+        // Time calculations for days, hours, minutes and seconds
+        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
+        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+        // Display the result in an element with id="demo"
+        document.getElementById("time-coming-soon").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
+
+        // If the count down is finished, write some text
+        if (distance < 0) {
+          clearInterval(x);
+          document.getElementById("time-coming-soon").innerHTML = "EXPIRED";
+        }
+      }, 1000);
+    }
+  }, 1000)
+</script>
+
+</html>
\ No newline at end of file
diff --git a/Phaha_Package/src/main.ts b/Phaha_Package/src/main.ts
new file mode 100644
index 0000000..c7b673c
--- /dev/null
+++ b/Phaha_Package/src/main.ts
@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));
diff --git a/Phaha_Package/src/manifest.json b/Phaha_Package/src/manifest.json
new file mode 100644
index 0000000..a948680
--- /dev/null
+++ b/Phaha_Package/src/manifest.json
@@ -0,0 +1,3 @@
+{
+  "gcm_sender_id": "224827359176"
+}
diff --git a/Phaha_Package/src/polyfills.ts b/Phaha_Package/src/polyfills.ts
new file mode 100644
index 0000000..429bb9e
--- /dev/null
+++ b/Phaha_Package/src/polyfills.ts
@@ -0,0 +1,53 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
+ * Opera), Edge on the desktop, and iOS and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
diff --git a/Phaha_Package/src/styles.scss b/Phaha_Package/src/styles.scss
new file mode 100644
index 0000000..4b88871
--- /dev/null
+++ b/Phaha_Package/src/styles.scss
@@ -0,0 +1,620 @@
+@import "node_modules/bootstrap/scss/bootstrap";
+@import "@icon/unicons/unicons.css";
+/* You can add global styles to this file, and also import other style files */
+
+* {
+  font-size: 13px;
+
+  margin: 0;
+  padding: 0;
+  font-family: 'HelveticaWorld', sans-serif;
+}
+
+html body {
+  background: #eee;
+  font-family: 'HelveticaWorld', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: #222;
+}
+
+button:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+app-package-item {
+  width: 100%;
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+.package-item {
+  padding: 10px;
+  background: #fff;
+  border-radius: 5px;
+  box-shadow: 0px 0px 10px #ccc;
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .package-img {
+    overflow: hidden;
+    border-radius: 5px;
+    position: relative;
+    text-align: center;
+
+    img {
+      transition: transform 0.6s;
+      margin: auto;
+      width: 100%;
+
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  .package-title {
+    text-align: center;
+    padding: 10px 4px 0;
+
+    a {
+      font-size: 15px;
+      color: #888;
+      font-weight: bold;
+      text-decoration: none;
+
+      &:hover {
+        color: #444;
+      }
+    }
+  }
+
+  .editorial {
+    padding-bottom: 4px;
+    text-align: center;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    a {
+      text-decoration: none;
+      color: #6c757d;
+      margin-right: 10px;
+
+      &:hover {
+        text-decoration: underline;
+        font-weight: 600;
+      }
+    }
+  }
+
+  .price-info {
+    display: flex;
+    justify-content: space-evenly;
+  }
+
+  .package-price {
+    text-align: center;
+    color: #444;
+
+    span {
+      font-size: 16px;
+      font-weight: 600;
+    }
+  }
+
+  .package-price-sale {
+    text-align: center;
+    color: #808285;
+    text-decoration: line-through;
+
+    span {
+      font-size: 14px;
+      font-weight: 400;
+    }
+  }
+
+  .package-price-final {
+    text-align: center;
+    color: #444;
+    margin-bottom: 0;
+
+    span {
+      font-size: 16px;
+      font-weight: 600;
+    }
+  }
+
+  .package-sold {
+    background: #eee;
+    text-align: center;
+    // padding: 4px 0;
+    border-radius: 20px;
+    margin-top: 5px;
+
+    span {
+      color: #6c757d;
+      font-size: 12px;
+    }
+  }
+
+  .group-button {
+    display: flex;
+    justify-content: space-around;
+
+    .btn-trial,
+    .btn-detail {
+      border-radius: 20px;
+      background: #ffe7b8;
+      color: #6c757d;
+    }
+
+    .btn-trial:hover,
+    .btn-detail:hover {
+      background: #e09500;
+      color: #ffffff;
+    }
+
+    .btn-buy {
+      background: #fcaf17;
+      border-radius: 20px;
+      color: #ffffff;
+    }
+
+    .btn-buy:hover {
+      background: #e09500;
+      color: #ffffff;
+    }
+  }
+
+  .percent-sale {
+    position: absolute;
+    left: 0%;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    pointer-events: none;
+    z-index: 100;
+    -webkit-transition: width 1s ease, height 1s ease;
+    -moz-transition: width 1s ease, height 1s ease;
+    -o-transition: width 1s ease, height 1s ease;
+    transition: width 0.4s ease, height 0.4s ease;
+
+    .top-right {
+      position: absolute;
+      top: 0;
+      right: 0;
+      -ms-transform: translateX(30%) translateY(0%) rotate(45deg);
+      -webkit-transform: translateX(30%) translateY(0%) rotate(45deg);
+      transform: translateX(30%) translateY(0%) rotate(45deg);
+      -ms-transform-origin: top left;
+      -webkit-transform-origin: top left;
+      transform-origin: top left;
+    }
+
+    .badge-sale {
+      margin: 0;
+      padding: 5px 5px;
+      font-size: 12px;
+      text-align: center;
+      line-height: normal;
+      text-transform: uppercase;
+      background: #ed1b24;
+      color: white;
+    }
+
+    .badge-sale::before,
+    .badge-sale::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      margin: 0 -1px;
+      width: 100%;
+      height: 100%;
+      background: inherit;
+      min-width: 55px;
+    }
+
+    .badge-sale::before {
+      right: 100%;
+    }
+
+    .badge-sale::after {
+      left: 100%;
+    }
+  }
+}
+
+.new-item {
+  padding: 10px;
+  border-radius: 5px;
+  color: #5e5873;
+
+  &:nth-child(odd) {
+    background-color: #eee;
+  }
+
+  &:nth-child(even) {
+    background-color: #ffff;
+  }
+
+  &:hover {
+    color: orange;
+    background-color: #eee;
+  }
+
+  .new-image {
+    img {
+      width: 100%;
+    }
+  }
+
+  .new-title {
+    a {
+      color: #222;
+      font-weight: 600;
+      text-decoration: none;
+      font-size: 16px;
+    }
+  }
+
+  .new-description {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    line-height: 20px;
+    height: 40px;
+    cursor: pointer;
+  }
+}
+
+.new-carousel {
+  .new-carousel-img {
+    img {
+      width: 100%;
+    }
+  }
+
+  .new-carousel-content {
+    .new-carousel-title a {
+      text-transform: uppercase;
+      text-decoration: none;
+      color: #222;
+      font-size: 16px;
+    }
+
+    .new-carousel-description {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      line-height: 20px;
+      height: 60px;
+    }
+  }
+
+  .carousel-indicators [data-bs-target] {
+    margin-top: 20px !important;
+    border-color: #f26b1b;
+    border-bottom: none !important;
+  }
+
+  .carousel-indicators {
+    top: auto !important;
+    bottom: -40px;
+  }
+}
+
+.new-item-left {
+  .new-left-image {
+    a {
+      display: block;
+      overflow: hidden;
+      border-radius: 5px;
+
+      img {
+        width: 100%;
+        transition: transform 0.6s;
+
+        &:hover {
+          transform: scale(1.1);
+        }
+      }
+    }
+  }
+
+  .new-left-content {
+    .new-left-title {
+      a {
+        text-transform: uppercase;
+        font-weight: 600;
+        text-decoration: none;
+        font-size: 18px;
+        color: #000000;
+        display: block;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        cursor: pointer;
+      }
+    }
+
+    .new-left-time {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 136.19%;
+      color: #808285;
+    }
+
+    .new-left-description {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 136.19%;
+      text-align: justify;
+      display: block;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.new-right-item {
+  .new-right-image {
+    a {
+      display: block;
+      overflow: hidden;
+      border-radius: 5px;
+
+      img {
+        max-width: 100%;
+        transition: transform 0.6s;
+
+        &:hover {
+          transform: scale(1.1);
+        }
+      }
+    }
+  }
+
+  .new-right-content {
+    .new-right-title {
+      a {
+        font-weight: 400;
+        font-size: 18px;
+        color: #000000;
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        line-height: 26px;
+        height: 52px;
+        cursor: pointer;
+        text-decoration: none;
+      }
+    }
+
+    .new-right-description {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      line-height: 20px;
+      height: 40px;
+      text-align: justify;
+    }
+  }
+}
+
+.box-profile {
+  .custom-ul {
+    margin-bottom: 0;
+    flex-flow: wrap;
+    padding-left: 5px !important;
+
+    .all-li {
+      color: #f26b1b;
+      font-weight: 700;
+    }
+
+    li {
+      cursor: pointer !important;
+      padding: 5px;
+      list-style: none !important;
+    }
+
+    li:hover {
+      color: #f26b1b;
+    }
+  }
+
+  .pagination {
+    justify-content: end;
+  }
+
+  .page-item.active .page-link {
+    background-color: #fcaf17;
+    border: #fcaf17;
+    color: #fff !important;
+    width: 38px;
+    text-align: center;
+    padding-top: 7px !important;
+  }
+
+  .page-item {
+    margin: 0 3px !important;
+    border-radius: 50% !important;
+
+    a {
+      border: none !important;
+      color: #222 !important;
+    }
+  }
+
+  .page-item a.page-link {
+    border-radius: 50%;
+  }
+
+  .page-item:last-child .page-link {
+    border-top-right-radius: 50% !important;
+    border-bottom-right-radius: 50% !important;
+  }
+
+  .page-link:focus {
+    box-shadow: none !important;
+  }
+
+  .page-item:first-child .page-link {
+    border-top-left-radius: 50% !important;
+    border-bottom-left-radius: 50% !important;
+  }
+
+  .page-link:hover {
+    width: 40px;
+    //height: 40px;
+    text-align: center;
+  }
+
+  .page-link {
+    width: 38px !important;
+    line-height: 25px !important;
+    text-align: center;
+    padding-top: 7px !important;
+  }
+
+  .custom-profile {
+    text-align: justify;
+
+    .hastag {
+      padding: 8px 20px 0px 0;
+      border-radius: 4px;
+      display: inline-block;
+      color: #666;
+      text-decoration: none;
+      line-height: 22px;
+      font-size: 14px;
+
+      &:hover {
+        color: #222 !important;
+        font-weight: 600;
+        padding-right: 13px;
+      }
+    }
+
+    cursor: pointer;
+  }
+}
+
+.box-body {
+  padding: 10px;
+  background: white;
+  border-radius: 5px;
+  margin-top: 10px;
+}
+
+.card {
+  border: none !important;
+  background: none !important;
+
+  .card-header {
+    border: none;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .card-title {
+      font-size: 24px;
+      text-decoration: none;
+      color: #333;
+      border-bottom: 2px solid #fcaf17;
+    }
+
+    .view-more {
+      display: flex;
+      align-items: center;
+      text-decoration: none;
+      color: #fcaf17;
+      font-weight: 600;
+
+      i {
+        font-size: 24px;
+      }
+    }
+  }
+}
+
+.bg-white {
+  background: white !important;
+}
+
+.box-catalog {
+  display: flex;
+  padding: 20px 16px 0 16px;
+  justify-content: space-between;
+  align-items: center;
+
+  a {
+    text-decoration: none;
+    font-weight: 600;
+    color: #444;
+    font-size: 26px;
+  }
+
+  .box-search {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    .ng-select {
+      min-width: 260px;
+    }
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .box-catalog {
+    display: block;
+
+    .box-search {
+      display: block;
+
+      ng-select {
+        margin-bottom: 10px;
+      }
+    }
+  }
+}
+
+
+.img-response {
+  max-width: 100%;
+}
+
+.page-link.active,
+.active>.page-link {
+  background-color: #fcaf17 !important;
+  color: white !important;
+  border-color: #fcaf17 !important;
+}
+
+.page-link {
+  color: #fcaf17 !important;
+}
\ No newline at end of file
diff --git a/Phaha_Package/src/test.ts b/Phaha_Package/src/test.ts
new file mode 100644
index 0000000..c04c876
--- /dev/null
+++ b/Phaha_Package/src/test.ts
@@ -0,0 +1,26 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().forEach(context);
diff --git a/Phaha_Package/tsconfig.app.json b/Phaha_Package/tsconfig.app.json
new file mode 100644
index 0000000..82d91dc
--- /dev/null
+++ b/Phaha_Package/tsconfig.app.json
@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}
diff --git a/Phaha_Package/tsconfig.json b/Phaha_Package/tsconfig.json
new file mode 100644
index 0000000..e718b46
--- /dev/null
+++ b/Phaha_Package/tsconfig.json
@@ -0,0 +1,33 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "allowSyntheticDefaultImports": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2017",
+    "module": "es2020",
+    "lib": [
+      "es2020",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
diff --git a/Phaha_Package/tsconfig.spec.json b/Phaha_Package/tsconfig.spec.json
new file mode 100644
index 0000000..092345b
--- /dev/null
+++ b/Phaha_Package/tsconfig.spec.json
@@ -0,0 +1,18 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}
diff --git a/Phaha_Server b/Phaha_Server
new file mode 160000
index 0000000..d2a9043
--- /dev/null
+++ b/Phaha_Server
@@ -0,0 +1 @@
+Subproject commit d2a904362ccbfcc728ae0642488152d3b4807e37