เกือบเสร็จ

README.md

-# communutyTOPIC
-
+# topic1
+for select topic1

mean4thai/.dockerignore

+.git/
+dist/
+examples/
+node_modules/

mean4thai/.editorconfig

+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

mean4thai/.env

+NODE_ENV=development
+SERVER_PORT=4040
+JWT_SECRET=0a6b944d-d2fb-46fc-a85e-0295c986cd9f
+MONGO_HOST=mongodb://localhost/odmp
+MEAN_FRONTEND=angular

mean4thai/.gitignore

+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/dist-server
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+# System Files
+.DS_Store
+Thumbs.db
+
+# Env file
+#*.env

mean4thai/CNAME

+www.mean.io

mean4thai/Dockerfile

+FROM node:lts-buster
+
+WORKDIR /usr/src/app
+ADD . /usr/src/app
+
+RUN yarn
+RUN yarn build
+
+EXPOSE 4040
+
+CMD ["yarn", "serve"]

mean4thai/README-original.md

+## Welcome to the mean stack
+
+The mean stack is intended to provide a simple and fun starting point for cloud native fullstack javascript applications.   
+MEAN is a set of Open Source components that together, provide an end-to-end framework for building dynamic web applications; starting from the top (code running in the browser) to the bottom (database). The stack is made up of:
+
+- **M**ongoDB : Document database – used by your back-end application to store its data as JSON (JavaScript Object Notation) documents
+- **E**xpress (sometimes referred to as Express.js): Back-end web application framework running on top of Node.js
+- **A**ngular (formerly Angular.js): Front-end web app framework; runs your JavaScript code in the user's browser, allowing your application UI to be dynamic
+- **N**ode.js : JavaScript runtime environment – lets you implement your application back-end in JavaScript
+
+### Pre-requisites
+* git - [Installation guide](https://www.linode.com/docs/development/version-control/how-to-install-git-on-linux-mac-and-windows/) .  
+* node.js - [Download page](https://nodejs.org/en/download/) .  
+* npm - comes with node or download yarn - [Download page](https://yarnpkg.com/lang/en/docs/install) .  
+* mongodb - [Download page](https://www.mongodb.com/download-center/community) .  
+
+### Installation 
+``` 
+git clone https://github.com/linnovate/mean
+cd mean
+cp .env.example .env
+yarn
+yarn start (for development)
+```
+### Docker based 
+``` 
+git clone https://github.com/linnovate/mean
+cd mean
+cp .env.example .env
+docker-compose up -d
+```
+### Credits 
+- The MEAN name was coined by Valeri Karpov.
+- Initial concept and development was done by Amos Haviv and sponsered by Linnovate.
+- Inspired by the great work of Madhusudhan Srinivasa.

mean4thai/README.md

+# การเพิ่ม model ชื่อ Student ใน project
+
+## 1. เพิ่มไฟล์ `server/models/student.model.js` 
+
+```js
+const mongoose = require('mongoose');
+
+/**
+ * อ่านเพิ่มเติม https://mongoosejs.com/docs/guide.html
+ */
+const StudentSchema = new mongoose.Schema(
+  {
+    sid:       { type: String, required: true },
+    first:     { type: String, required: true },
+    last:      { type: String, required: true },
+    createdAt: { type: Date, default: Date.now },
+  },
+  {
+    versionKey: false
+  }
+);
+
+
+module.exports = mongoose.model('Student', StudentSchema);
+```
+
+## 2. เพิ่มไฟล์ `server/controllers/student.controller.js`
+
+```js
+const Joi = require('joi');
+const Student = require('../models/student.model');
+
+const studentSchema = Joi.object({
+  sid: Joi.number().integer().required(),
+  first: Joi.string().required(),
+  last: Joi.string().required()
+})
+
+
+module.exports = {
+  insert,
+  get,
+  getAll,
+  search,
+}
+
+async function insert(student) {
+  student = await Joi.validate(student, studentSchema, { abortEarly: false });
+  return await new Student(student).save();
+}
+
+/**
+ * อ่านเพิ่มเติม https://mongoosejs.com/docs/api.html
+ */
+async function get(sid) {
+  return await Student.find({sid: sid});
+}
+
+async function getAll() {
+  return await Student.find();
+}
+
+async function search(key, value) {
+  let query = {};
+  query[key] = value;
+  return await Student.find(query);
+}
+
+```
+
+## 3. เพิ่มไฟล์ `server/routes/student.route.js`
+
+```js
+const express = require('express');
+const asyncHandler = require('express-async-handler');
+const studentCtrl = require('../controllers/student.controller');
+
+const router = express.Router();
+module.exports = router;
+
+//router.use(passport.authenticate('jwt', { session: false }))
+
+router.route('/').post(asyncHandler(insert));
+router.route('/get/:sid(\d+)').get(asyncHandler(get));
+router.route('/all').get(asyncHandler(getAll));
+router.route('/search').get(asyncHandler(search));
+
+
+async function insert(req, res) {
+  let student = await studentCtrl.insert(req.body);
+  res.json(student);
+}
+
+async function get(req, res) {
+  let all_students = await studentCtrl.get(req.params['sid']);
+  res.json(all_students);
+}
+
+async function getAll(req, res) {
+  let all_students = await studentCtrl.getAll();
+  res.json(all_students);
+}
+
+async function search(req, res) {
+  let result = await studentCtrl.search(req.params['key'], req.params['value']);
+  res.json(result);
+}
+
+```
+
+## 4. เพิ่มเส้นทางการเรียกในไฟล์ `server/routes/index.route.js`
+
+```js
+const express = require('express');
+const userRoutes = require('./user.route');
+const studentRoutes = require('./student.route');
+const authRoutes = require('./auth.route');
+
+const router = express.Router(); // eslint-disable-line new-cap
+
+/** GET /health-check - Check service health */
+router.get('/health-check', (req, res) =>
+  res.send('OK')
+);
+
+router.use('/auth', authRoutes);
+router.use('/user', userRoutes);
+router.use('/student', studentRoutes);
+
+module.exports = router;
+```
+
+## 5. ตัวอย่างสคริปเพื่อกำหนดข้อมูลเบื้องต้น `scripts/init-students.js`
+
+```js
+const mongoose = require('mongoose');
+const util = require('util');
+const debug = require('debug')('express-mongoose-es6-rest-api:index');
+
+const config = require('../server/config/config');
+
+const Student = require('../server/models/student.model');
+
+// connect to mongo db
+const mongoUri = config.mongo.host;
+mongoose.connect(mongoUri, { keepAlive: 1 });
+mongoose.connection.on('error', () => {
+  throw new Error(`unable to connect to database: ${mongoUri}`);
+});
+
+
+const students = [
+  { sid: 60112233440, first: 'ชูใจ', last: 'เลิศล้ำ' },
+  { sid: 60112233441, first: 'มานี', last: 'รักเผ่าไทย' },
+  { sid: 60112233442, first: 'ปิติ', last: 'พิทักษ์ถิ่น' },
+  { sid: 60112233443, first: 'มานะ', last: 'รักเผ่าไทย' },
+  { sid: 60112233444, first: 'วีระ', last: 'ประสงค์สุข' }
+];
+
+Student.insertMany(students, (error, docs) => {
+  if (error) {
+    console.error(error);
+  } else {
+    console.log(docs);
+  }
+  mongoose.connection.close();
+});
+```
+
+## 6. เรียกใช้ `scripts/init-students.js` 
+
+```sh
+node scripts/init-students.js
+```
+
+## 7. เรียกดูข้อมูลได้จาก `http://localhost:4000/api/student/all`

mean4thai/_config.yml

+theme: jekyll-theme-minimal
+logo: https://www.linnovate.net/sites/all/themes/linnovate/images/mean-picture.png

mean4thai/_layouts/default.html

+<!DOCTYPE html>
+<html lang="{{ site.lang | default: "en-US" }}">
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+{% seo %}
+    <link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}">
+    <!--[if lt IE 9]>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
+    <![endif]-->
+  </head>
+  <body>
+    <div class="wrapper">
+      <header>
+        {% if site.logo %}
+          <img class="logo"  src="{{site.logo | relative_url}}" alt="Logo" />
+        {% endif %}
+        <p>{{ site.description | default: site.github.project_tagline }}</p>
+
+        {% if site.github.is_project_page %}
+        <p class="view"><a href="{{ site.github.repository_url }}">View the Project on GitHub <small>{{ site.github.repository_nwo }}</small></a></p>
+        {% endif %}
+
+        <!-- Place this tag where you want the button to render. -->
+        <a class="github-button" href="https://github.com/linnovate/mean" data-show-count="true" aria-label="Star ntkme/github-buttons on GitHub">Star</a>
+
+        {% if site.github.is_user_page %}
+        <p class="view"><a href="{{ site.github.owner_url }}">View My GitHub Profile</a></p>
+        {% endif %}
+
+        {% if site.show_downloads %}
+        <ul class="downloads">
+          <li><a href="{{ site.github.zip_url }}">Download <strong>ZIP File</strong></a></li>
+          <li><a href="{{ site.github.tar_url }}">Download <strong>TAR Ball</strong></a></li>
+          <li><a href="{{ site.github.repository_url }}">View On <strong>GitHub</strong></a></li>
+        </ul>
+        {% endif %}
+        <img class="ninja" src="/assets/img/ninja.jpg"/>
+
+      </header>
+      <section>
+
+      {{ content }}
+      {% if site.github.is_project_page %}
+      <p>This project is maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a></p>
+      {% endif %}
+      </section>
+    </div>
+    <script src="{{ "/assets/js/scale.fix.js" | relative_url }}"></script>
+   <!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=UA-36499287-4"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+ // gtag('config', 'UA-XXXXXX-XX'); // change this to your own UA config
+</script>
+
+    <!-- Place this tag in your head or just before your close body tag. -->
+<script async defer src="https://buttons.github.io/buttons.js"></script>
+  </body>
+</html>

mean4thai/angular.json

+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "mean": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "./tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "mean:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "mean:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "mean:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "./tsconfig.spec.json",
+            "scripts": [],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "./tsconfig.app.json",
+              "./tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "mean",
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "scss"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  },
+  "cli": {
+    "analytics": "c4b1fc92-ebd6-4fa9-a8a1-067afbef23d9"
+  }
+}
\ No newline at end of file

mean4thai/assets/css/style.scss

+---
+---
+
+@import "{{ site.theme }}";
+h1 {
+  a {
+    color:#00758f;
+    text-size:40px;
+  }
+}
+header {
+ img.logo {
+    margin-left:30px;
+    display:block;
+    height: auto; 
+    width: auto; 
+    max-width: 150px; 
+    max-height: 200px;
+    margin-bottom: 17%;
+ }
+ img.ninja {
+  margin-top: 20px;
+  height: auto; 
+  width: auto; 
+  max-width: 350px; 
+  max-height: 200px;
+  margin-bottom: 50px;
+ }
+
+} 

mean4thai/browserslist

+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11

mean4thai/docker-compose.yml

+version: '3'
+
+services:
+
+  app:
+    build: ./
+    image: mean
+    container_name: mean
+    ports:
+      - 80:4040
+    expose:
+      - 4040
+    environment:
+      NODE_ENV: production
+      SERVER_PORT: 4040
+      JWT_SECRET: 0a6b944d-d2fb-46fc-a85e-0295c986cd9f
+      MONGO_HOST: mongodb://mongo/odmp
+    restart: always
+    depends_on:
+      - mongo
+
+  meanexpress:
+    container_name: meanexpress
+    image: mongo-express
+    ports:
+      - 8081:8081
+    environment:
+      ME_CONFIG_MONGODB_AUTH_DATABASE: odmp
+      #ME_CONFIG_MONGODB_AUTH_USERNAME: admin
+      #ME_CONFIG_MONGODB_AUTH_PASSWORD: pass
+    restart: always
+    depends_on:
+      - mongo
+
+  mongo:
+    container_name: meanmongo
+    image: mongo:3.6
+    ports:
+      - 27017:27017
+    expose:
+      - 27017

mean4thai/karma.conf.js

+// 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-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

mean4thai/package-lock.json

+{
+  "name": "mean",
+  "version": "2.0.2",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "yarn": {
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/yarn/-/yarn-1.22.10.tgz",
+      "integrity": "sha512-IanQGI9RRPAN87VGTF7zs2uxkSyQSrSPsju0COgbsKQOOXr5LtcVPeyXWgwVa0ywG3d8dg6kSYKGBuYK021qeA=="
+    }
+  }
+}

mean4thai/package.json

+{
+  "name": "mean",
+  "version": "2.0.2",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "serve": "node server",
+    "import student": "node scripts/init-students.js",
+    "start": "concurrently -c \"yellow.bold,green.bold\" -n \"SERVER,BUILD\" \"nodemon server\" \"ng build --watch\"",
+    "build": "ng build --prod",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e",
+    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^9.1.4",
+    "@angular/cdk": "^9.2.1",
+    "@angular/common": "^9.1.4",
+    "@angular/compiler": "^9.1.4",
+    "@angular/core": "^9.1.4",
+    "@angular/forms": "^9.1.4",
+    "@angular/material": "^9.2.1",
+    "@angular/platform-browser": "^9.1.4",
+    "@angular/platform-browser-dynamic": "^9.1.4",
+    "@angular/router": "^9.1.4",
+    "bcrypt": "^3.0.2",
+    "body-parser": "^1.18.2",
+    "compression": "^1.7.2",
+    "cookie-parser": "^1.4.3",
+    "cors": "^2.8.4",
+    "dotenv": "^6.0.0",
+    "events": "^3.0.0",
+    "express": "^4.16.3",
+    "express-async-handler": "^1.1.3",
+    "express-jwt": "^5.3.1",
+    "express-validation": "^1.0.2",
+    "formidable": "^1.2.1",
+    "helmet": "^3.21.1",
+    "http-errors": "^1.6.3",
+    "joi": "^13.3.0",
+    "jsonwebtoken": "^8.2.1",
+    "method-override": "^2.3.10",
+    "mongoose": "^5.7.5",
+    "morgan": "^1.9.1",
+    "nodemon": "^1.17.5",
+    "passport": "^0.4.0",
+    "passport-jwt": "^4.0.0",
+    "passport-local": "^1.0.0",
+    "rxjs": "^6.5.5",
+    "swagger-ui-express": "^3.0.9",
+    "yarn": "^1.22.10",
+    "zone.js": "~0.10.3"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.901.4",
+    "@angular/cli": "^9.1.4",
+    "@angular/compiler-cli": "^9.1.4",
+    "@angular/language-service": "^9.1.4",
+    "@types/jasmine": "~2.8.3",
+    "@types/jasminewd2": "~2.0.2",
+    "@types/node": "~12.12.14",
+    "codelyzer": "^5.2.0",
+    "concurrently": "^3.5.1",
+    "jasmine-core": "~3.1.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "^3.1.3",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "2.0.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "1.1.0",
+    "ts-node": "~6.1.0",
+    "tslint": "^5.20.1",
+    "typescript": "3.8.3"
+  }
+}

mean4thai/protractor.conf.js

+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

mean4thai/scripts/init-students.js

+const mongoose = require('mongoose');
+const util = require('util');
+const debug = require('debug')('express-mongoose-es6-rest-api:index');
+
+const config = require('../server/config/config');
+
+const Student = require('../server/models/student.model');
+
+// connect to mongo db
+const mongoUri = config.mongo.host;
+mongoose.connect(mongoUri, { keepAlive: 1 });
+mongoose.connection.on('error', () => {
+  throw new Error(`unable to connect to database: ${mongoUri}`);
+});
+
+
+const students = [
+  { sid: 60112233440, first: 'ชูใจ', last: 'เลิศล้ำ' },
+  { sid: 60112233441, first: 'มานี', last: 'รักเผ่าไทย' },
+  { sid: 60112233442, first: 'ปิติ', last: 'พิทักษ์ถิ่น' },
+  { sid: 60112233443, first: 'มานะ', last: 'รักเผ่าไทย' },
+  { sid: 60112233444, first: 'วีระ', last: 'ประสงค์สุข' }
+];
+
+Student.insertMany(students, (error, docs) => {
+  if (error) {
+    console.error(error);
+  } else {
+    console.log(docs);
+  }
+  mongoose.connection.close();
+});

mean4thai/server/config/config.js

+const Joi = require('joi');
+
+// require and configure dotenv, will load vars in .env in PROCESS.ENV
+require('dotenv').config();
+
+// define validation for all the env vars
+const envVarsSchema = Joi.object({
+  NODE_ENV: Joi.string()
+    .allow(['development', 'production', 'test', 'provision'])
+    .default('development'),
+  SERVER_PORT: Joi.number()
+    .default(4040),
+  MONGOOSE_DEBUG: Joi.boolean()
+    .when('NODE_ENV', {
+      is: Joi.string().equal('development'),
+      then: Joi.boolean().default(true),
+      otherwise: Joi.boolean().default(false)
+    }),
+  JWT_SECRET: Joi.string().required()
+    .description('JWT Secret required to sign'),
+  MONGO_HOST: Joi.string().required()
+    .description('Mongo DB host url'),
+  MONGO_PORT: Joi.number()
+    .default(27017)
+}).unknown()
+  .required();
+
+const { error, value: envVars } = Joi.validate(process.env, envVarsSchema);
+if (error) {
+  throw new Error(`Config validation error: ${error.message}`);
+}
+
+const config = {
+  env: envVars.NODE_ENV,
+  port: envVars.SERVER_PORT,
+  mongooseDebug: envVars.MONGOOSE_DEBUG,
+  jwtSecret: envVars.JWT_SECRET,
+  frontend: envVars.MEAN_FRONTEND || 'angular',
+  mongo: {
+    host: envVars.MONGO_HOST,
+    port: envVars.MONGO_PORT
+  }
+};
+
+module.exports = config;

mean4thai/server/config/express.js

+const path = require('path');
+const express = require('express');
+const httpError = require('http-errors');
+const logger = require('morgan');
+const bodyParser = require('body-parser');
+const cookieParser = require('cookie-parser');
+const compress = require('compression');
+const methodOverride = require('method-override');
+const cors = require('cors');
+const helmet = require('helmet');
+const swaggerUi = require('swagger-ui-express');
+const swaggerDocument = require('./swagger.json');
+const routes = require('../routes/index.route');
+const config = require('./config');
+const passport = require('./passport')
+
+const app = express();
+
+if (config.env === 'development') {
+  app.use(logger('dev'));
+}
+
+// Choose what fronten framework to serve the dist from
+var distDir = '../../dist/';
+if (config.frontend == 'react'){
+  distDir ='../../node_modules/material-dashboard-react/dist'
+ }else{
+  distDir ='../../dist/' ;
+ }
+
+// 
+app.use(express.static(path.join(__dirname, distDir)))
+app.use(/^((?!(api)).)*/, (req, res) => {
+  res.sendFile(path.join(__dirname, distDir + '/index.html'));
+});
+
+console.log(distDir);
+ //React server
+app.use(express.static(path.join(__dirname, '../../node_modules/material-dashboard-react/dist')))
+app.use(/^((?!(api)).)*/, (req, res) => {
+res.sendFile(path.join(__dirname, '../../dist/index.html'));
+}); 
+
+
+app.use(bodyParser.json());
+app.use(bodyParser.urlencoded({ extended: true }));
+
+app.use(cookieParser());
+app.use(compress());
+app.use(methodOverride());
+
+// secure apps by setting various HTTP headers
+app.use(helmet());
+
+// enable CORS - Cross Origin Resource Sharing
+app.use(cors());
+
+app.use(passport.initialize());
+
+app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument));
+
+// API router
+app.use('/api/', routes);
+
+// catch 404 and forward to error handler
+app.use((req, res, next) => {
+  const err = new httpError(404)
+  return next(err);
+});
+
+// error handler, send stacktrace only during development
+app.use((err, req, res, next) => {
+
+  // customize Joi validation errors
+  if (err.isJoi) {
+    err.message = err.details.map(e => e.message).join("; ");
+    err.status = 400;
+  }
+
+  res.status(err.status || 500).json({
+    message: err.message
+  });
+  next(err);
+});
+
+module.exports = app;

mean4thai/server/config/mongoose.js

+const mongoose = require('mongoose');
+const util = require('util');
+const debug = require('debug')('express-mongoose-es6-rest-api:index');
+
+const config = require('./config');
+
+// connect to mongo db
+const mongoUri = config.mongo.host;
+mongoose.connect(mongoUri, { keepAlive: 1 });
+mongoose.connection.on('error', () => {
+  throw new Error(`unable to connect to database: ${mongoUri}`);
+});
+
+// print mongoose logs in dev env
+if (config.MONGOOSE_DEBUG) {
+  mongoose.set('debug', (collectionName, method, query, doc) => {
+    debug(`${collectionName}.${method}`, util.inspect(query, false, 20), doc);
+  });
+}
+

mean4thai/server/config/passport.js

+const passport = require('passport');
+const LocalStrategy = require('passport-local');
+const JwtStrategy = require('passport-jwt').Strategy;
+const ExtractJwt = require('passport-jwt').ExtractJwt;
+const bcrypt = require('bcrypt');
+
+const User = require('../models/user.model');
+const config = require('./config');
+
+const localLogin = new LocalStrategy({
+  usernameField: 'email'
+}, async (email, password, done) => {
+  let user = await User.findOne({ email });
+  if (!user || !bcrypt.compareSync(password, user.hashedPassword)) {
+    return done(null, false, { error: 'Your login details could not be verified. Please try again.' });
+  }
+  user = user.toObject();
+  delete user.hashedPassword;
+  done(null, user);
+});
+
+const jwtLogin = new JwtStrategy({
+  jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
+  secretOrKey: config.jwtSecret
+}, async (payload, done) => {
+  let user = await User.findById(payload._id);
+  if (!user) {
+    return done(null, false);
+  }
+  user = user.toObject();
+  delete user.hashedPassword;
+  done(null, user);
+});
+
+passport.use(jwtLogin);
+passport.use(localLogin);
+
+module.exports = passport;

mean4thai/server/config/swagger.json

+{
+    "swagger": "2.0",
+    "info": {
+      "version": "1.0.0",
+      "title": "Mean Application API",
+      "description": "Mean Application API",
+      "license": {
+        "name": "MIT",
+        "url": "https://opensource.org/licenses/MIT"
+      }
+    },
+    "host": "localhost:4040",
+    "basePath": "/api/",
+    "tags": [
+      {
+        "name": "Users",
+        "description": "API for users in the system"
+      },
+      {
+        "name": "Auth",
+        "description": "API for auth in the system"
+      }
+    ],
+    "schemes": [
+      "http"
+    ],
+    "consumes": [
+      "application/json"
+    ],
+    "produces": [
+      "application/json"
+    ],
+    "securityDefinitions": {
+      "AuthHeader": {
+        "type": "apiKey",
+        "in": "header",
+        "name": "Authorization"
+      }
+    },
+    "paths": {
+      "/auth/login": {
+        "post": {
+          "tags": ["Auth"],
+          "description": "Login to the system",
+        "parameters": [{
+          "name": "auth",
+          "in": "body",
+          "description": "User auth details",
+          "schema": {
+            "type": "object",
+            "required": ["email", "password"],
+            "properties": {
+              "email": {
+                "type": "string"
+              },
+              "password": {
+                "type": "string"
+              }
+            }
+          }
+        }],
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "User is loggedin",
+            "schema": {
+              "$ref": "#/definitions/User"
+            }
+          }
+        }
+      }
+      }
+    },
+    "definitions": {
+      "User": {
+        "required": [
+          "email",
+          "fullname"
+        ],
+        "properties": {
+          "_id": {
+            "type": "string",
+            "uniqueItems": true
+          },
+          "email": {
+            "type": "string",
+            "uniqueItems": true
+          },
+          "fullname": {
+            "type": "string"
+          },
+          "createdAt": {
+            "type": "string"
+          },
+          "roles": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          }
+        }
+      },
+      "Users": {
+        "type": "array",
+        "$ref": "#/definitions/User"
+      },
+      "Auth": {
+        "type": "object",
+        "properties": [{
+          "token": {
+            "type": "string"
+          },
+          "user": {
+            "$ref": "#/definitions/User"
+          }
+        }]
+      }
+  }
+}
\ No newline at end of file

mean4thai/server/controllers/auth.controller.js

+const jwt = require('jsonwebtoken');
+const config = require('../config/config');
+
+
+module.exports = {
+  generateToken
+}
+
+
+function generateToken(user) {
+  const payload = JSON.stringify(user);
+  return jwt.sign(payload, config.jwtSecret);
+}

mean4thai/server/controllers/review.controller.js

+const Joi = require("joi");
+const Review = require("../models/review.model");
+
+const reviewSchema = Joi.object({
+  // sid: Joi.number().integer().required(),
+  user_id: Joi.string().required(),
+  catagory: Joi.string().required(),
+  namemovie: Joi.string().required(),
+  title: Joi.string().required(),
+  description: Joi.string().required(),
+});
+
+module.exports = {
+  insert,
+  get,
+  getAll,
+  search,
+  deleteData,
+  updateData,
+};
+
+async function insert(review) {
+  review = await Joi.validate(review, reviewSchema, { abortEarly: false });
+  return await new Review(review).save();
+}
+/**
+ * อ่านเพิ่มเติม https://mongoosejs.com/docs/api.html
+ */
+async function get(_id) {
+  return await Review.find({ _id: _id });
+}
+
+async function getAll() {
+  return await Review.find();
+}
+
+async function search(key, value) {
+  let query = {};
+  query[key] = value;
+  return await Review.find(query);
+}
+
+async function deleteData(_id) {
+  return await Review.findByIdAndDelete(_id);
+}
+
+async function updateData(_id,data) {
+  return Review.findByIdAndUpdate(_id, data);
+}

mean4thai/server/controllers/user.controller.js

+const bcrypt = require('bcrypt');
+const Joi = require('joi');
+const User = require('../models/user.model');
+
+const userSchema = Joi.object({
+  fullname: Joi.string().required(),
+  email: Joi.string().email(),
+  mobileNumber: Joi.string().regex(/^[1-9][0-9]{9}$/),
+  password: Joi.string().required(),
+  repeatPassword: Joi.string().required().valid(Joi.ref('password'))
+})
+
+
+module.exports = {
+  insert
+}
+
+async function insert(user) {
+  user = await Joi.validate(user, userSchema, { abortEarly: false });
+  user.hashedPassword = bcrypt.hashSync(user.password, 10);
+  delete user.password;
+  return await new User(user).save();
+}

mean4thai/server/index.js

+// config should be imported before importing any other file
+const config = require('./config/config');
+const app = require('./config/express');
+require('./config/mongoose');
+
+// module.parent check is required to support mocha watch
+// src: https://github.com/mochajs/mocha/issues/1912
+if (!module.parent) {
+  app.listen(config.port, () => {
+    console.info(`server started on port ${config.port} (${config.env})`);
+  });
+}
+
+module.exports = app;

mean4thai/server/middleware/require-admin.js

+const httpError = require('http-errors');
+
+const requireAdmin = function (req, res, next) {
+  if (req.user && req.user.roles.indexOf('admin') > -1) 
+    return next();
+  const err = new httpError(401);
+  return next(err);
+}
+
+module.exports = requireAdmin;

mean4thai/server/models/review.model.js

+const mongoose = require("mongoose");
+
+/**
+ * อ่านเพิ่มเติม https://mongoosejs.com/docs/guide.html
+ */
+const ReviewSchema = new mongoose.Schema(
+  {
+    user_id: { type: String, required: true },
+    catagory: { type: String, required: true },
+    namemovie: { type: String, required: true },
+    title: { type: String, required: true },
+    description: { type: String, required: true },
+    createdAt: { type: Date, default: Date.now },
+  },
+  {
+    versionKey: false,
+  }
+);
+
+module.exports = mongoose.model("Review", ReviewSchema);

mean4thai/server/models/user.model.js

+const mongoose = require('mongoose');
+
+const UserSchema = new mongoose.Schema({
+  fullname: {
+    type: String,
+    required: true
+  },
+  email: {
+    type: String,
+    required: true,
+    unique: true,
+    // Regexp to validate emails with more strict rules as added in tests/users.js which also conforms mostly with RFC2822 guide lines
+    match: [/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, 'Please enter a valid email'],
+  },
+  hashedPassword: {
+    type: String,
+    required: true
+  },
+  createdAt: {
+    type: Date,
+    default: Date.now
+  },
+  roles: [{
+    type: String,
+  }]
+}, {
+  versionKey: false
+});
+
+
+module.exports = mongoose.model('User', UserSchema);

mean4thai/server/routes/auth.route.js

+const express = require('express');
+const asyncHandler = require('express-async-handler')
+const passport = require('passport');
+const userCtrl = require('../controllers/user.controller');
+const authCtrl = require('../controllers/auth.controller');
+const config = require('../config/config');
+
+const router = express.Router();
+module.exports = router;
+
+router.post('/register', asyncHandler(register), login);
+router.post('/login', passport.authenticate('local', { session: false }), login);
+router.get('/me', passport.authenticate('jwt', { session: false }), login);
+
+
+async function register(req, res, next) {
+  let user = await userCtrl.insert(req.body);
+  user = user.toObject();
+  delete user.hashedPassword;
+  req.user = user;
+  next()
+}
+
+function login(req, res) {
+  let user = req.user;
+  let token = authCtrl.generateToken(user);
+  res.json({ user, token });
+}

mean4thai/server/routes/index.route.js

+const express = require('express');
+const userRoutes = require('./user.route');
+const reviewRoutes = require('./review.route');
+const authRoutes = require('./auth.route');
+
+const router = express.Router(); // eslint-disable-line new-cap
+
+/** GET /health-check - Check service health */
+router.get('/health-check', (req, res) =>
+  res.send('OK')
+);
+
+router.use('/auth', authRoutes);
+router.use('/user', userRoutes);
+router.use('/review', reviewRoutes);
+
+module.exports = router;

mean4thai/server/routes/review.route.js

+const express = require('express');
+const asyncHandler = require('express-async-handler');
+const reviewCtrl = require('../controllers/review.controller');
+
+const router = express.Router();
+module.exports = router;
+
+//router.use(passport.authenticate('jwt', { session: false }))
+
+router.route('/').post(asyncHandler(insert));
+router.route('/get/:_id').get(asyncHandler(get));
+router.route('/all').get(asyncHandler(getAll));
+router.route('/search').get(asyncHandler(search));
+router.route('/delete/:_id').delete(asyncHandler(deleteData));
+router.route('/update/:_id').put(asyncHandler(updateData));
+
+
+async function insert(req, res) {
+  let review = await reviewCtrl.insert(req.body);
+  res.json(review);
+}
+
+async function get(req, res) {
+  let all_reviews = await reviewCtrl.get(req.params['_id']);
+  res.json(all_reviews);
+}
+
+async function getAll(req, res) {
+  let all_reviews = await reviewCtrl.getAll();
+  res.json(all_reviews);
+}
+
+async function search(req, res) {
+  let result = await reviewCtrl.search(req.params['key'], req.params['value']);
+  res.json(result);
+}
+
+async function deleteData(req, res) {
+  let all_reviews = await reviewCtrl.deleteData(req.params['_id']);
+  res.json(all_reviews);
+}
+
+async function updateData(req, res) {
+  let all_reviews = await reviewCtrl.updateData(req.params['_id'],req.body);
+  res.json(all_reviews);
+}
+

mean4thai/server/routes/user.route.js

+const express = require('express');
+const passport = require('passport');
+const asyncHandler = require('express-async-handler');
+const userCtrl = require('../controllers/user.controller');
+
+const router = express.Router();
+module.exports = router;
+
+router.use(passport.authenticate('jwt', { session: false }))
+
+router.route('/')
+  .post(asyncHandler(insert));
+
+
+async function insert(req, res) {
+  let user = await userCtrl.insert(req.body);
+  res.json(user);
+}

mean4thai/src/_settings.scss

+/*-----------------------------------------------
+                   Variables
+-----------------------------------------------*/
+$linesColor: #dbdbdb;
+$categoryTitleColor: #686868;
+$categoryEntityColor: #3F3F3F;
\ No newline at end of file

mean4thai/src/app/admin/admin-routing.module.ts

+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { AdminComponent } from './admin.component';
+import { OnlyAdminUsersGuard } from './admin-user-guard';
+
+const routes: Routes = [{
+  path: 'admin',
+  canActivate: [OnlyAdminUsersGuard],
+  children: [{
+    path: '',
+    component: AdminComponent,
+  }]
+}];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+
+export class AdminRoutingModule {}

mean4thai/src/app/admin/admin-user-guard.ts

+import { Injectable } from '@angular/core';
+import { CanActivate } from '@angular/router';
+
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { AuthService } from '@app/shared/services';
+
+@Injectable()
+export class OnlyAdminUsersGuard implements CanActivate {
+  constructor(private authService: AuthService) {}
+
+  canActivate(): Observable<boolean> {
+    return this.authService.getUser().pipe(map(user => !!user?.isAdmin));
+  }
+}

mean4thai/src/app/admin/admin.component.html

+<h4>HELLO FROM ADMIN PAGE</h4>
\ No newline at end of file

mean4thai/src/app/admin/admin.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-admin',
+  templateUrl: './admin.component.html',
+})
+export class AdminComponent implements OnInit {
+
+  constructor() {}
+
+  public ngOnInit() {
+  }
+}
+
+

mean4thai/src/app/admin/admin.module.ts

+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+import { AdminRoutingModule } from './admin-routing.module';
+import {AdminComponent} from './admin.component';
+import {OnlyAdminUsersGuard} from './admin-user-guard';
+
+@NgModule({
+  declarations: [
+    AdminComponent
+  ],
+  imports: [
+    CommonModule,
+    AdminRoutingModule,
+  ],
+  providers: [
+    OnlyAdminUsersGuard
+  ]})
+export class AdminModule {}

mean4thai/src/app/app-routing.module.ts

+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { AuthGuard } from './shared/guards';
+import { HomeComponent } from './home/home.component';
+import { HeroComponent } from './hero/hero.component';
+import { CreateComponent } from './create/create.component';
+import { ViewdataComponent } from './viewdata/viewdata.component';
+import { EditComponent } from './edit/edit.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: HomeComponent,
+    canActivate: [AuthGuard],
+  },
+  {
+    path: 'create',
+    component: CreateComponent,
+    canActivate: [AuthGuard],
+  },
+  {
+    path: 'viewdata/:dataId',
+    component: ViewdataComponent,
+    canActivate: [AuthGuard],
+  },
+  {
+    path: 'edit/:dataId',
+    component: EditComponent,
+    canActivate: [AuthGuard],
+  },
+  {
+    path: 'hero',
+    component: HeroComponent,
+  },
+  {
+    path: 'auth',
+    loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule),
+  },
+  {
+    path: 'admin',
+    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}

mean4thai/src/app/app.component.html

+<app-header [user]="user$ | async"></app-header>
+<div class="wrapper-app">
+  <router-outlet></router-outlet>
+</div>
+<footer></footer>

mean4thai/src/app/app.component.scss

+.wrapper-app {
+}
\ No newline at end of file

mean4thai/src/app/app.component.ts

+import { Component } from '@angular/core';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
+
+import { merge, Observable } from 'rxjs';
+
+import { User } from './shared/interfaces';
+import { AuthService } from './shared/services';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+})
+export class AppComponent {
+  user$: Observable<User | null> = merge(
+    // Init on startup
+    this.authService.me(),
+    // Update after login/register/logout
+    this.authService.getUser()
+  );
+
+  constructor(
+    private domSanitizer: DomSanitizer,
+    private matIconRegistry: MatIconRegistry,
+    private authService: AuthService
+  ) {
+    this.registerSvgIcons();
+  }
+
+  registerSvgIcons() {
+    [
+      'close',
+      'add',
+      'add-blue',
+      'airplane-front-view',
+      'air-station',
+      'balloon',
+      'boat',
+      'cargo-ship',
+      'car',
+      'catamaran',
+      'clone',
+      'convertible',
+      'delete',
+      'drone',
+      'fighter-plane',
+      'fire-truck',
+      'horseback-riding',
+      'motorcycle',
+      'railcar',
+      'railroad-train',
+      'rocket-boot',
+      'sailing-boat',
+      'segway',
+      'shuttle',
+      'space-shuttle',
+      'steam-engine',
+      'suv',
+      'tour-bus',
+      'tow-truck',
+      'transportation',
+      'trolleybus',
+      'water-transportation',
+    ].forEach(icon => {
+      this.matIconRegistry.addSvgIcon(
+        icon,
+        this.domSanitizer.bypassSecurityTrustResourceUrl(`assets/icons/${icon}.svg`)
+      );
+    });
+  }
+}

mean4thai/src/app/app.module.ts

+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgModule, APP_INITIALIZER } from '@angular/core';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+
+import { SharedModule } from './shared/shared.module';
+
+import { AppComponent } from './app.component';
+import { AuthHeaderInterceptor } from './interceptors/header.interceptor';
+import { CatchErrorInterceptor } from './interceptors/http-error.interceptor';
+
+import { AppRoutingModule } from './app-routing.module';
+import { HeaderComponent } from './header/header.component';
+import { HomeComponent } from './home/home.component';
+import { AuthService } from './shared/services';
+import { HeroComponent } from './hero/hero.component';
+import { CreateComponent } from './create/create.component';
+import { ViewdataComponent } from './viewdata/viewdata.component';
+import { EditComponent } from './edit/edit.component';
+
+export function appInitializerFactory(authService: AuthService) {
+  return () => authService.checkTheUserOnTheFirstLoad();
+}
+
+@NgModule({
+  imports: [BrowserAnimationsModule, HttpClientModule, SharedModule, AppRoutingModule],
+  declarations: [AppComponent, HeaderComponent, HomeComponent, HeroComponent, CreateComponent, ViewdataComponent, EditComponent],
+  providers: [
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: AuthHeaderInterceptor,
+      multi: true,
+    },
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: CatchErrorInterceptor,
+      multi: true,
+    },
+    {
+      provide: APP_INITIALIZER,
+      useFactory: appInitializerFactory,
+      multi: true,
+      deps: [AuthService],
+    },
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}

mean4thai/src/app/auth/auth-routing.module.ts

+import { Routes, RouterModule } from '@angular/router';
+
+import { LoginComponent } from './login/login.component';
+import { RegisterComponent } from './register/register.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    children: [
+      {
+        path: '',
+        redirectTo: '/auth/login',
+        pathMatch: 'full',
+      },
+      {
+        path: 'login',
+        component: LoginComponent,
+      },
+      {
+        path: 'register',
+        component: RegisterComponent,
+      },
+    ],
+  },
+];
+
+export const AuthRoutingModule = RouterModule.forChild(routes);

mean4thai/src/app/auth/auth.component.scss

+.example-icon {
+  padding: 0 14px;
+}
+
+.example-spacer {
+  flex: 1 1 auto;
+}
+
+.example-card {
+  width: 400px;
+  margin: 10% auto;
+}
+
+.mat-card-title {
+  font-size: 16px;
+}

mean4thai/src/app/auth/auth.module.ts

+import { NgModule } from '@angular/core';
+
+import { SharedModule } from '../shared/shared.module';
+
+import { LoginComponent } from './login/login.component';
+import { RegisterComponent } from './register/register.component';
+import { AuthRoutingModule } from './auth-routing.module';
+
+@NgModule({
+  imports: [SharedModule, AuthRoutingModule],
+  declarations: [LoginComponent, RegisterComponent],
+})
+export class AuthModule {}

mean4thai/src/app/auth/login/login.component.html

+<main id="tt-pageContent" class="tt-offset-none">
+
+  <div class="container">
+    <div class="tt-loginpages-wrapper">
+      <div class="tt-loginpages">
+        <a href="/" class="tt-block-title">
+          <img src="../../assets/images/logo.png" alt="">
+          <div class="tt-title">
+            Welcome to Topic
+          </div>
+          <div class="tt-description">
+            Log into your account to unlock true power of community.
+          </div>
+        </a>
+        <form class="form-default">
+          <div class="form-group">
+            <label for="loginUserName">Email*</label>
+            <input [(ngModel)]="email" name="email" required type="text" class="form-control" id="loginEmail"
+              placeholder="">
+          </div>
+          <div class="form-group">
+            <label for="loginUserPassword">Password*</label>
+            <input [(ngModel)]="password" type="password" required name="password" class="form-control"
+              id="loginUserPassword" placeholder="">
+          </div>
+          <div class="row">
+            <div class="col">
+              <div class="form-group">
+                <div class="checkbox-group">
+                  <input type="checkbox" id="settingsCheckBox01" name="checkbox">
+                  <label for="settingsCheckBox01">
+                    <span class="check"></span>
+                    <span class="box"></span>
+                    <span class="tt-text">Remember me</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div class="col ml-auto text-right">
+              <a href="#" class="tt-underline">Forgot Password</a>
+            </div>
+          </div>
+          <div class="form-group">
+            <a (click)="login()" class="btn btn-primary  btn-block">Log in</a>
+          </div>
+  
+          <span>Don't have an account ? <a [routerLink]="['/auth/register']">Signup here</a> here</span>
+
+          <div class="tt-notes">
+            By Logging in, signing in or continuing, I agree to
+            Topic’s <a routerLink="/about" class="tt-underline">Terms of Use</a> and <a routerLink="/about" class="tt-underline">Privacy
+              Policy.</a>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</main>

mean4thai/src/app/auth/login/login.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoginComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

mean4thai/src/app/auth/login/login.component.ts

+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { AuthService } from '@app/shared/services';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['../auth.component.scss'],
+})
+export class LoginComponent {
+  email: string | null = null;
+  password: string | null = null;
+
+  constructor(private router: Router, private authService: AuthService) {}
+
+  login(): void {
+    this.authService.login(this.email!, this.password!).subscribe(() => {
+      this.router.navigateByUrl('/');
+    });
+  }
+}

mean4thai/src/app/auth/register/register.component.html

+<!-- tt-mobile menu -->
+<nav class="panel-menu" id="mobile-menu">
+  <ul>
+
+  </ul>
+  <div class="mm-navbtn-names">
+    <div class="mm-closebtn">
+      Close
+      <div class="tt-icon">
+        <svg>
+          <use xlink:href="#icon-cancel"></use>
+        </svg>
+      </div>
+    </div>
+    <div class="mm-backbtn">Back</div>
+  </div>
+</nav>
+<main id="tt-pageContent" class="tt-offset-none">
+  <div class="container">
+    <div class="tt-loginpages-wrapper">
+      <div class="tt-loginpages">
+        <a routerLink="/" class="tt-block-title">
+          <img src="../../assets/images/logo.png" alt="">
+          <div class="tt-title">
+            Welcome to Topic
+          </div>
+          <div class="tt-description">
+            Join the forum to unlock true power of community.
+          </div>
+        </a>
+        <form class="form-default" [formGroup]="userForm">
+          <div class="form-group">
+            <label for="loginUserName">FullName*</label>
+            <input formControlName="fullname" name="fullname" required type="text" class="form-control" id="FullName"
+              placeholder="">
+          </div>
+          <div class="form-group">
+            <label for="loginUserEmail">Email*</label>
+            <input formControlName="email" name="email" required type="text" class="form-control" id="loginUserEmail"
+              placeholder="">
+          </div>
+          <div class="form-group">
+            <label for="loginUserPassword">Password</label>
+            <input formControlName="password" type="password" name="password" required type="password"
+              class="form-control" id="loginUserPassword" placeholder="">
+          </div>
+          <div class="form-group">
+            <label for="loginUserPassword">Repeat Password</label>
+            <input formControlName="repeatPassword" type="password" name="repeatPassword" required type="password"
+              required class="form-control" id="loginUserPassword" placeholder="">
+            <mat-error *ngIf="repeatPassword.invalid && repeatPassword.hasError('passwordMatch')">Password mismatch
+            </mat-error>
+          </div>
+          <div class="form-group">
+            <a (click)="register()" class="btn btn-secondary btn-block">Create my account</a>
+          </div>
+          
+          <p>Already have an account? <a [routerLink]="['/auth/login']" class="tt-underline">Login here</a></p>
+          <div class="tt-notes">
+            By signing up, signing in or continuing, I agree to
+            Topic’s <a [routerLink]="['/auth/login']" class="tt-underline">Terms of Use</a> and <a [routerLink]="['/auth/login']" class="tt-underline">Privacy
+              Policy.</a>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</main>

mean4thai/src/app/auth/register/register.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegisterComponent } from './register.component';
+
+describe('RegisterComponent', () => {
+  let component: RegisterComponent;
+  let fixture: ComponentFixture<RegisterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RegisterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RegisterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

mean4thai/src/app/auth/register/register.component.ts

+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import {
+  FormGroup,
+  FormControl,
+  Validators,
+  ValidationErrors,
+  AbstractControl,
+} from '@angular/forms';
+
+import { AuthService } from '@app/shared/services';
+
+@Component({
+  selector: 'app-register',
+  templateUrl: './register.component.html',
+  styleUrls: ['../auth.component.scss'],
+})
+export class RegisterComponent {
+  constructor(private router: Router, private authService: AuthService) {}
+
+  passwordsMatchValidator(control: FormControl): ValidationErrors | null {
+    const password = control.root.get('password');
+    return password && control.value !== password.value
+      ? {
+          passwordMatch: true,
+        }
+      : null;
+  }
+
+  userForm = new FormGroup({
+    fullname: new FormControl('', [Validators.required]),
+    email: new FormControl('', [Validators.required, Validators.email]),
+    password: new FormControl('', [Validators.required]),
+    repeatPassword: new FormControl('', [Validators.required, this.passwordsMatchValidator]),
+  });
+
+  get fullname(): AbstractControl {
+    return this.userForm.get('fullname')!;
+  }
+
+  get email(): AbstractControl {
+    return this.userForm.get('email')!;
+  }
+
+  get password(): AbstractControl {
+    return this.userForm.get('password')!;
+  }
+
+  get repeatPassword(): AbstractControl {
+    return this.userForm.get('repeatPassword')!;
+  }
+
+  register(): void {
+    if (this.userForm.invalid) {
+      return;
+    }
+
+    const { fullname, email, password, repeatPassword } = this.userForm.getRawValue();
+
+    this.authService.register(fullname, email, password, repeatPassword).subscribe(data => {
+      this.router.navigate(['']);
+    });
+  }
+}

mean4thai/src/app/create/create.component.css

+.example-icon {
+  padding: 0 14px;
+}
+
+.example-spacer {
+  flex: 1 1 auto;
+}
+
+.example-card {
+  width: 800px;
+  margin: auto;
+  margin-top: 4%;
+}
\ No newline at end of file

mean4thai/src/app/create/create.component.html

+<main id="tt-pageContent">
+  <div class="container">
+      <div class="tt-wrapper-inner">
+          <h1 class="tt-title-border">
+              Create New Topic
+          </h1>
+          <div class="tt-topic-list">
+            <div class="tt-list-header">
+                <div class="tt-col-topic">Topic</div>
+                <div class="tt-col-category">Category</div>
+              
+            </div>
+          
+            <div class="tt-item tt-itemselect">
+                <div class="tt-col-avatar">
+                    <svg class="tt-icon">
+                        <use xlink:href="#icon-heading"></use>
+                    </svg>
+                </div>
+                <div class="tt-col-description">
+                    <h6 class="tt-title"><a  [routerLink]="['/']">
+                            <svg class="tt-icon">
+                                <use xlink:href="#icon-pinned"></use>
+                            </svg>
+                            
+                           <strong> {{ reviewAdd.namemovie}}</strong>
+                        </a></h6>
+                    <div class="row align-items-center no-gutters">
+                        <div class="col-11">
+                            <ul class="tt-list-badge">
+                                <li class="show-mobile"><a href="#"><span
+                                            class="tt-color01 tt-badge">politics</span></a></li>
+                                <li><a href="#"><span class="tt-badge">#{{reviewAdd.description}}</span></a></li>
+                               
+                            </ul>
+                        </div>
+                        
+                    </div>
+                </div>
+                <div class="tt-col-category"><span class="tt-color01 tt-badge">{{ reviewAdd.catagory }}</span></div>
+              
+            </div>
+            <div class="tt-item">
+              <div class="tt-col-avatar">
+                  <svg class="tt-icon">
+                      <use xlink:href="#icon-performatted"></use>
+                  </svg>
+              </div>
+              <div class="tt-col-description">
+                  <h6 class="tt-title"><a >
+                         {{ reviewAdd.title}}
+                      </a></h6>
+                  <div class="row align-items-center no-gutters  hide-desktope">
+                      <div class="col-11">
+                          <ul class="tt-list-badge">
+                              <li class="show-mobile"><a href="#"><span class="tt-color05 tt-badge">music</span></a>
+                              </li>
+                          </ul>
+                      </div>
+                      <div class="col-1 ml-auto show-mobile">
+                          <div class="tt-value">1d</div>
+                      </div>
+                  </div>
+              </div>
+              
+          </div>
+            </div>
+<br><br>
+          <form class="form-default form-create-topic">
+              <div class="form-group">
+                  <label for="inputTopicTitle">Topic Title</label>
+                  <div class="tt-value-wrapper">
+                      <input type="text"  matInput
+                      placeholder="Placeholder"
+                      name="namemovie"
+                      [(ngModel)]="reviewAdd.namemovie" class="form-control" id="inputTopicTitle" placeholder="Subject of your topic">
+                      <span class="tt-value-input">99</span>
+                  </div>
+                  <div class="tt-note">Describe your topic well, while keeping the subject as short as possible.</div>
+              </div>
+
+              <div class="pt-editor">
+                  <h6 class="pt-title">Topic Body</h6>
+                  <div class="pt-row">
+                      <div class="col-left">
+                         
+                      </div>
+                  </div>
+                  <div class="form-group">
+                      <textarea  matInput
+                      placeholder="Placeholder"
+                      name="title"
+                      [(ngModel)]="reviewAdd.title" class="form-control" rows="5" placeholder="Lets get started"></textarea>
+                  </div>
+                  <div class="row">
+                      <div class="col-md-4">
+                          <div class="form-group">
+                              <label for="inputTopicTitle">Category</label>
+                              <select class="form-control"  [(ngModel)]="reviewAdd.catagory" name="catagory">
+                                  <option   value="option"
+                                  *ngFor="let catagory of catagorys"
+                                  [value]="catagory.type"
+                                  >{{ catagory.type }}</option>
+                                  
+                              </select>
+                          </div>
+                      </div>
+                      <div class="col-md-8">
+                          <div class="form-group">
+                              <label for="inputTopicTags">Tags</label>
+                              <input type="text" name="description" [(ngModel)]="reviewAdd.description" class="form-control" id="inputTopicTags" placeholder=" #tags">
+                          </div>
+                      </div> 
+                  </div>
+                   <div class="row">
+                      <div class="col-auto ml-md-auto">
+                          <a (click)="submitReviewAdd()"
+                          color="primary"
+                          *ngIf="
+                            reviewAdd.catagory &&
+                            reviewAdd.namemovie &&
+                            reviewAdd.title &&
+                            reviewAdd.description
+                          " class="btn btn-secondary btn-width-lg">Create Post</a>
+                      </div>
+                     </div>
+                     
+              </div>
+          </form>
+      </div>
+      <div class="tt-topic-list tt-offset-top-30"></div>
+
+  </div>
+</main>
+<div id="js-popup-settings" class="tt-popup-settings">
+<div class="tt-btn-col-close">
+  <a href="#">
+    <span class="tt-icon-title">
+      <svg>
+        <use xlink:href="#icon-settings_fill"></use>
+      </svg>
+    </span>
+    <span class="tt-icon-text">
+      Settings
+    </span>
+    <span class="tt-icon-close">
+      <svg>
+        <use xlink:href="#icon-cancel"></use>
+      </svg>
+    </span>
+  </a>
+</div>
+<form class="form-default">
+  <div class="tt-form-upload">
+    <div class="row no-gutter">
+      <div class="col-auto">
+        <div class="tt-avatar">
+                  <svg>
+                    <use xlink:href="#icon-ava-d"></use>
+                  </svg>
+              </div>
+      </div>
+      <div class="col-auto ml-auto">
+        <a href="#" class="btn btn-primary">Upload Picture</a>
+      </div>
+    </div>
+  </div>
+  <div class="form-group">
+      <label for="settingsUserName">Username</label>
+     <input type="text" name="name" class="form-control" id="settingsUserName" placeholder="azyrusmax">
+  </div>
+  <div class="form-group">
+      <label for="settingsUserEmail">Email</label>
+     <input type="text" name="name" class="form-control" id="settingsUserEmail" placeholder="Sample@sample.com">
+  </div>
+  <div class="form-group">
+      <label for="settingsUserPassword">Password</label>
+     <input type="password" name="name" class="form-control" id="settingsUserPassword" placeholder="************">
+  </div>
+  <div class="form-group">
+      <label for="settingsUserLocation">Location</label>
+     <input type="text" name="name" class="form-control" id="settingsUserLocation" placeholder="Slovakia">
+  </div>
+  <div class="form-group">
+      <label for="settingsUserWebsite">Website</label>
+     <input type="text" name="name" class="form-control" id="settingsUserWebsite" placeholder="Sample.com">
+  </div>
+  <div class="form-group">
+      <label for="settingsUserAbout">About</label>
+      <textarea name="" placeholder="Few words about you" class="form-control" id="settingsUserAbout"></textarea>
+  </div>
+  <div class="form-group">
+    <label for="settingsUserAbout">Notify me via Email</label>
+    <div class="checkbox-group">
+          <input type="checkbox" id="settingsCheckBox01" name="checkbox">
+          <label for="settingsCheckBox01">
+              <span class="check"></span>
+              <span class="box"></span>
+              <span class="tt-text">When someone replies to my thread</span>
+          </label>
+      </div>
+      <div class="checkbox-group">
+          <input type="checkbox" id="settingsCheckBox02" name="checkbox">
+          <label for="settingsCheckBox02">
+              <span class="check"></span>
+              <span class="box"></span>
+              <span class="tt-text">When someone likes my thread or reply</span>
+          </label>
+      </div>
+      <div class="checkbox-group">
+          <input type="checkbox" id="settingsCheckBox03" name="checkbox">
+          <label for="settingsCheckBox03">
+              <span class="check"></span>
+              <span class="box"></span>
+              <span class="tt-text">When someone mentions me</span>
+          </label>
+      </div>
+  </div>
+  <div class="form-group">
+    <a href="#" class="btn btn-secondary">Save</a>
+  </div>
+  </form>
+</div>
+

mean4thai/src/app/create/create.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateComponent } from './create.component';
+
+describe('CreateComponent', () => {
+  let component: CreateComponent;
+  let fixture: ComponentFixture<CreateComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreateComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

mean4thai/src/app/create/create.component.ts

+import { Component, OnInit , Input} from '@angular/core';
+import { catagory } from '../../catagory';
+import { CreateService } from '../service/create.service';
+import { AuthService } from '@app/shared/services';
+import { Router } from '@angular/router';
+import { User } from '@app/shared/interfaces';
+@Component({
+  selector: 'app-create',
+  templateUrl: './create.component.html',
+  styleUrls: ['./create.component.css']
+})
+export class CreateComponent implements OnInit {
+  @Input() user: User | null = null;
+  user_data: any;
+  reviewAdd = {
+    'user_id': '',
+   
+    'catagory': '',
+    'namemovie': '',
+    'title': '',
+    'description': ''
+  };
+  catagorys = catagory;
+  constructor(private createService: CreateService, private authService: AuthService ,private router: Router,) { }
+
+  ngOnInit(): void {
+    this.authService.getUser().subscribe(data => this.user_data = data);
+    this.reviewAdd = {
+      'user_id': this.user_data._id,
+   
+      'catagory': '',
+      'namemovie': '',
+      'title': '',
+      'description': '' 
+    };
+  }
+  submitReviewAdd() {
+    this.createService.postReview(this.reviewAdd).subscribe((response: {}) =>
+      {alert('บันทึกเรียบร้อย'),
+      this.router.navigateByUrl('/');
+  }
+    );
+    console.warn(this.createService.postReview(this.reviewAdd));
+    console.warn(this.reviewAdd);
+    
+  };
+ 
+  
+  
+}

mean4thai/src/app/edit/edit.component.css

+.example-icon {
+  padding: 0 14px;
+}
+
+.example-spacer {
+  flex: 1 1 auto;
+}
+
+.example-card {
+  width: 800px;
+  margin: auto;
+  margin-top: 4%;
+}

mean4thai/src/app/edit/edit.component.html

+<!-- ........................................ -->
+<main id="tt-pageContent">
+  <div class="container">
+      <div class="tt-wrapper-inner">
+          <h1 class="tt-title-border">
+              Update Topic Post
+          </h1>
+          <div class="tt-topic-list">
+            <div class="tt-list-header">
+                <div class="tt-col-topic">Topic</div>
+                <div class="tt-col-category">Category</div>
+              
+            </div>
+          
+            <div class="tt-item tt-itemselect">
+                <div class="tt-col-avatar">
+                    <svg class="tt-icon">
+                        <use xlink:href="#icon-heading"></use>
+                    </svg>
+                </div>
+                <div class="tt-col-description">
+                    <h6 class="tt-title"><a  [routerLink]="['/']">
+                            <svg class="tt-icon">
+                                <use xlink:href="#icon-pinned"></use>
+                            </svg>
+                           <strong> {{ data.namemovie}}</strong>
+                        </a></h6>
+                    <div class="row align-items-center no-gutters">
+                        <div class="col-11">
+                            <ul class="tt-list-badge">
+                                <li class="show-mobile"><a href="#"><span
+                                            class="tt-color01 tt-badge">politics</span></a></li>
+                                <li><a href="#"><span class="tt-badge">{{data.description}}</span></a></li>
+                               
+                            </ul>
+                        </div>
+                        
+                    </div>
+                </div>
+                <div class="tt-col-category"><span class="tt-color01 tt-badge">{{ data.catagory }}</span></div>
+              
+            </div>
+            <div class="tt-item">
+              <div class="tt-col-avatar">
+                  <svg class="tt-icon">
+                      <use xlink:href="#icon-performatted"></use>
+                  </svg>
+              </div>
+              <div class="tt-col-description">
+                  <h6 class="tt-title"><a >
+                         {{ data.title}}
+                      </a></h6>
+                  <div class="row align-items-center no-gutters  hide-desktope">
+                      <div class="col-11">
+                          <ul class="tt-list-badge">
+                              <li class="show-mobile"><a href="#"><span class="tt-color05 tt-badge">music</span></a>
+                              </li>
+                          </ul>
+                      </div>
+                      <div class="col-1 ml-auto show-mobile">
+                          <div class="tt-value">1d</div>
+                      </div>
+                  </div>
+              </div>
+              
+          </div>
+            </div>
+<br><br>
+          <form class="form-default form-create-topic">
+              <div class="form-group">
+                  <label for="inputTopicTitle">Topic Title</label>
+                  <div class="tt-value-wrapper">
+                      <input type="text"  matInput
+                      placeholder="Placeholder"
+                      name="namemovie"
+                      [(ngModel)]="data.namemovie" class="form-control" id="inputTopicTitle" placeholder="Subject of your topic">
+                      <span class="tt-value-input">99</span>
+                  </div>
+                  <div class="tt-note">Describe your topic well, while keeping the subject as short as possible.</div>
+              </div>
+
+              <div class="pt-editor">
+                  <h6 class="pt-title">Topic Body</h6>
+                  <div class="pt-row">
+                      <div class="col-left">
+                         
+                      </div>
+                  </div>
+                  <div class="form-group">
+                      <textarea  matInput
+                      placeholder="Placeholder"
+                      name="title"
+                      [(ngModel)]="data.title" class="form-control" rows="5" placeholder="Lets get started"></textarea>
+                  </div>
+                  <div class="row">
+                      <div class="col-md-4">
+                          <div class="form-group">
+                              <label for="inputTopicTitle">Category</label>
+                              <select class="form-control"  [(ngModel)]="data.catagory" name="catagory">
+                                  <option   value="option"
+                                  *ngFor="let catagory of catagorys"
+                                  [value]="catagory.type"
+                                  >{{ catagory.type }}</option>
+                                  
+                              </select>
+                          </div>
+                      </div>
+                      <div class="col-md-8">
+                          <div class="form-group">
+                              <label for="inputTopicTags">Tags</label>
+                              <input type="text" name="description" [(ngModel)]="data.description" class="form-control" id="inputTopicTags" placeholder="Use comma to separate tags">
+                          </div>
+                      </div> 
+                  </div>
+                   <div class="row">
+                      <div class="col-auto ml-md-auto">
+                          <a (click)="submitUpdate()"
+                          color="primary"
+                          *ngIf="
+                            data.catagory &&
+                            data.namemovie &&
+                            data.title &&
+                            data.description
+                          " class="btn btn-primary btn-width-lg">Update Post</a>
+                      </div>
+                     </div>
+                     
+              </div>
+          </form>
+      </div>
+      <div class="tt-topic-list tt-offset-top-30"></div>
+
+  </div>
+</main>
+<div id="js-popup-settings" class="tt-popup-settings">
+<div class="tt-btn-col-close">
+  <a href="#">
+    <span class="tt-icon-title">
+      <svg>
+        <use xlink:href="#icon-settings_fill"></use>
+      </svg>
+    </span>
+    <span class="tt-icon-text">
+      Settings
+    </span>
+    <span class="tt-icon-close">
+      <svg>
+        <use xlink:href="#icon-cancel"></use>
+      </svg>
+    </span>
+  </a>
+</div>
+<form class="form-default">
+  <div class="tt-form-upload">
+    <div class="row no-gutter">
+      <div class="col-auto">
+        <div class="tt-avatar">
+                  <svg>
+                    <use xlink:href="#icon-ava-d"></use>
+                  </svg>
+              </div>
+      </div>
+      <div class="col-auto ml-auto">
+        <a href="#" class="btn btn-primary">Upload Picture</a>
+      </div>
+    </div>
+  </div>
+  <div class="form-group">
+      <label for="settingsUserName">Username</label>
+     <input type="text" name="name" class="form-control" id="settingsUserName" placeholder="azyrusmax">
+  </div>
+  <div class="form-group">
+      <label for="settingsUserEmail">Email</label>
+     <input type="text" name="name" class="form-control" id="settingsUserEmail" placeholder="Sample@sample.com">
+  </div>
+  <div class="form-group">
+      <label for="settingsUserPassword">Password</label>
+     <input type="password" name="name" class="form-control" id="settingsUserPassword" placeholder="************">
+  </div>
+  <div class="form-group">
+      <label for="settingsUserLocation">Location</label>
+     <input type="text" name="name" class="form-control" id="settingsUserLocation" placeholder="Slovakia">
+  </div>
+  <div class="form-group">
+      <label for="settingsUserWebsite">Website</label>
+     <input type="text" name="name" class="form-control" id="settingsUserWebsite" placeholder="Sample.com">
+  </div>
+  <div class="form-group">
+      <label for="settingsUserAbout">About</label>
+      <textarea name="" placeholder="Few words about you" class="form-control" id="settingsUserAbout"></textarea>
+  </div>
+  <div class="form-group">
+    <label for="settingsUserAbout">Notify me via Email</label>
+    <div class="checkbox-group">
+          <input type="checkbox" id="settingsCheckBox01" name="checkbox">
+          <label for="settingsCheckBox01">
+              <span class="check"></span>
+              <span class="box"></span>
+              <span class="tt-text">When someone replies to my thread</span>
+          </label>
+      </div>
+      <div class="checkbox-group">
+          <input type="checkbox" id="settingsCheckBox02" name="checkbox">
+          <label for="settingsCheckBox02">
+              <span class="check"></span>
+              <span class="box"></span>
+              <span class="tt-text">When someone likes my thread or reply</span>
+          </label>
+      </div>
+      <div class="checkbox-group">
+          <input type="checkbox" id="settingsCheckBox03" name="checkbox">
+          <label for="settingsCheckBox03">
+              <span class="check"></span>
+              <span class="box"></span>
+              <span class="tt-text">When someone mentions me</span>
+          </label>
+      </div>
+  </div>
+  <div class="form-group">
+    <a href="#" class="btn btn-secondary">Save</a>
+  </div>
+  </form>
+</div>
+
+

mean4thai/src/app/edit/edit.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditComponent } from './edit.component';
+
+describe('EditComponent', () => {
+  let component: EditComponent;
+  let fixture: ComponentFixture<EditComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

mean4thai/src/app/edit/edit.component.ts

+import { Component, OnInit } from '@angular/core';
+import { catagory } from '../../catagory';
+import { EditService } from '../service/edit.service';
+import { ActivatedRoute } from '@angular/router';
+import { Router } from '@angular/router';
+@Component({
+  selector: 'app-edit',
+  templateUrl: './edit.component.html',
+  styleUrls: ['./edit.component.css']
+})
+export class EditComponent implements OnInit {
+  catagorys = catagory;
+  dataId: any;
+  data: any;
+  constructor(private route: ActivatedRoute, private editService: EditService,private router: Router) { }
+
+  ngOnInit(): void {
+    this.route.paramMap.subscribe(params => {
+      this.dataId = params.get('dataId');
+    });
+    this.editService.getReviewsById(this.dataId).subscribe(response => {
+      this.data = response[0];
+      console.log(this.data);
+    });
+  }
+
+  submitUpdate() {
+    this.editService.putUpdate(this.data).subscribe(response => {
+      alert('แก้ไขเรียบร้อย'),
+      this.router.navigateByUrl('/');
+    });
+  }
+}

mean4thai/src/app/header/header.component.html

+<!-- tt-mobile menu -->
+<nav class="panel-menu" id="mobile-menu">
+  <ul>
+
+  </ul>
+  <div class="mm-navbtn-names">
+    <div class="mm-closebtn">
+      Close
+      <div class="tt-icon">
+        <svg>
+          <use xlink:href="#icon-cancel"></use>
+        </svg>
+      </div>
+    </div>
+    <div class="mm-backbtn">Back</div>
+  </div>
+</nav>
+
+<header id="tt-header">
+  <div class="container">
+    <div class="row tt-row no-gutters">
+      <div class="col-auto">
+        <!-- toggle mobile menu -->
+        <a class="toggle-mobile-menu" id="tt-desktop-menu">
+          <svg class="tt-icon">
+            <use xlink:href="#icon-menu_icon"></use>
+          </svg>
+        </a>
+        <!-- /toggle mobile menu -->
+        <!-- logo -->
+        <div class="tt-logo" *ngIf="!user">
+          <a ><img src="../../assets/images/logo.png" alt=""></a>
+        </div>
+        <div class="tt-logo" *ngIf="user">
+          <a routerLink="/"><img src="../../assets/images/logo.png" alt=""></a>
+        </div>
+        <!-- /logo -->
+        <!-- desctop menu -->
+        <div class="tt-desktop-menu" *ngIf="!user">
+          <nav id="tt-desktop-m enu" >
+            <ul>
+
+              <li><a routerLink="/cate"><span>Categories</span></a></li>
+              <li><a routerLink="/about"><span>About</span></a></li>
+
+            </ul>
+          </nav>
+        </div>
+        <div class="tt-desktop-menu" *ngIf="user">
+          <nav id="tt-desktop-menu" >
+            <ul>
+              <li><a routerLink="/create"><span>Create-Topic</span></a></li>
+              <li><a routerLink="/cate"><span>Categories</span></a></li>
+              <li><a routerLink="/about"><span>About</span></a></li>
+
+            </ul>
+          </nav>
+        </div>
+        <!-- /desctop menu -->
+<!-- Search form -->
+<div class="tt-search">
+  <!-- toggle -->          <div class="col-auto ml-auto"></div>          <div class="col-auto ml-auto"></div>          <div class="col-auto ml-auto"></div>
+  <button class="tt-search-toggle" data-toggle="modal" data-target="#modalAdvancedSearch">
+     <svg class="tt-icon">
+        <use xlink:href="#icon-search"></use>
+      </svg>
+  </button>
+  <!-- /toggle -->
+  <form class="search-wrapper">
+      <div class="search-form">
+          <input type="text" class="tt-search__input" placeholder="Search">
+          <button class="tt-search__btn" type="submit">
+             <svg class="tt-icon">
+                <use xlink:href="#icon-search"></use>
+              </svg>
+          </button>
+           <button class="tt-search__close">
+             <svg class="tt-icon">
+                <use xlink:href="#cancel"></use>
+              </svg>
+          </button>
+      </div>
+
+  </form>
+</div>
+<!-- /tt-search -->
+        <!-- /tt-search -->
+
+
+
+
+
+        <div class="col-auto ml-auto">
+          <div class="tt-user-info d-flex justify-content-center">
+
+
+            <div class="tt-account-btn">
+              <div class="col-auto ml-auto"></div>
+
+              <a class="btn btn-primary" routerLink="/auth/login" *ngIf="!user">Log in</a>
+              <a [routerLink]="['/auth/register']" *ngIf="!user" class="btn btn-secondary">Sign up</a>
+            </div>
+
+          </div>
+        </div>
+
+
+
+        <div class="col-auto ml-auto">
+    
+      
+          <div class="tt-user-info d-flex justify-content-center"  *ngIf="user">
+
+            <div  class="tt-desktop-menu">
+              <i>{{ user.fullname }}</i>
+
+            </div>
+
+            <!-- <div class="tt-avatar-icon tt-size-md ">
+              <i class="tt-icon "><svg>
+                  <use xlink:href="#icon-ava-u"></use>
+                </svg></i>
+
+            </div> -->
+
+            <div class="tt-avatar-icon tt-size-md"  (click)="logout()">
+              <i class="tt-btn-icon"><svg>
+                  <use xlink:href="#icon-exit"></use>
+                </svg>LogOut</i>
+
+            </div>
+            <!-- <div class="custom-select-01" >
+              {{ user.fullname }}
+              <select >
+                <option >{{ user.fullname }}</option>
+                <option  *ngIf="user?.isAdmin" routerLink="/admin">admin</option>
+                <option routerLink="logout()"  (click)="logout()">logout</option>
+              
+                
+              </select>
+              <div  routerLink="logout()" (click)="logout()">LogOut</div>
+              
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</header>
+

mean4thai/src/app/header/header.component.scss

+header {
+    width: 100%;
+    .logo {
+      background-image: url('../../assets/logo.png');
+      width: 50px;
+      height: 50px;
+      background-size: contain;
+      background-repeat: no-repeat;
+    }
+    .example-spacer {
+      flex: 1 1 auto;
+    }
+    .links {
+      color: white;
+      font-family: 'Helvetica Neue', sans-serif;
+      font-size: 15px;
+      font-weight: initial;
+      letter-spacing: -1px;
+      line-height: 1;
+      text-align: center;
+      padding: 15px;
+      &.side {
+        padding: 0 14px;
+      }
+    }
+    .mat-toolbar {
+      background: black;
+    }
+    .mat-icon {
+      vertical-align: middle;
+      margin: 0 5px;
+    }
+    a {
+      cursor: pointer;
+    }
+  }
+ 
\ No newline at end of file

mean4thai/src/app/header/header.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

mean4thai/src/app/header/header.component.ts

+import { Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { User } from '@app/shared/interfaces';
+
+import { AuthService } from '@app/shared/services';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss'],
+})
+export class HeaderComponent {
+  @Input() user: User | null = null;
+
+  constructor(private router: Router, private authService: AuthService) {}
+
+  logout(): void {
+    console.warn("out");
+    this.authService.signOut();
+    this.router.navigateByUrl('/auth/login');
+  }
+}

mean4thai/src/app/hero/hero.component.html

+<p>Hero Update works!</p>

mean4thai/src/app/hero/hero.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroComponent } from './hero.component';
+
+describe('HeroComponent', () => {
+  let component: HeroComponent;
+  let fixture: ComponentFixture<HeroComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeroComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeroComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

mean4thai/src/app/hero/hero.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-hero',
+  templateUrl: './hero.component.html',
+  styleUrls: ['./hero.component.css']
+})
+export class HeroComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

mean4thai/src/app/home/home.component.html

+
+
+
+<main id="tt-pageContent" class="tt-offset-small">
+  <div class="container" >
+      <div class="tt-topic-list" >
+          <div class="tt-list-header" >
+              <div class="tt-col-topic">Topic</div>
+              <div class="tt-col-category">Category</div>
+              <div class="tt-col-value hide-mobile">Likes</div>
+          
+              <div class="tt-col-value hide-mobile">Views</div>
+              <div class="tt-col-value">Activity</div>
+              <!-- <div class="tt-col-value"  *ngIf="user_data._id == review.user_id">Edited</div>
+              <div class="tt-col-value" *ngIf="user_data._id == review.user_id" >Delete</div> -->
+
+          </div>
+       
+          <div class="tt-item tt-itemselect" *ngFor="let review of reviews">
+              <div class="tt-col-avatar">
+                  <svg class="tt-icon">
+                      <use xlink:href="#icon-ava-k"></use>
+                  </svg>
+              </div>
+              <div class="tt-col-description">
+                  <h6 class="tt-title"><a  [routerLink]="['/viewdata', review._id]">
+                          <svg class="tt-icon">
+                              <use xlink:href="#icon-pinned"></use>
+                          </svg>
+                          <strong>{{ review.namemovie }}</strong>
+
+                        
+                      </a> <div [routerLink]="['/edit', review._id]" class="tt-color05 tt-badge btn btn-secondary btn-width-lg"  *ngIf="user_data._id == review.user_id">แก้ไข</div>
+                      <div (click)="deleteData(review._id)" class="tt-color06 tt-badge btn btn-primary btn-width-lg" *ngIf="user_data._id == review.user_id">ลบ</div></h6>  
+                     
+                  <div class="row align-items-center no-gutters">
+                      <div class="col-11">
+                          <ul class="tt-list-badge">
+                              <li class="show-mobile"><a href="#"><span
+                                          class="tt-color05 tt-badge">{{ review.catagory }}</span></a></li>
+                              <li><a ><span class="tt-badge">#{{ review.description }}</span></a></li>
+                             
+                          </ul>
+                      </div>
+                    
+                  </div>
+              </div>
+             
+            
+              <div class="tt-col-category"><span class="tt-color01 tt-badge">{{ review.catagory }}</span></div>
+              <div class="tt-col-value hide-mobile">985</div>
+              
+              <div class="tt-col-value hide-mobile">25 k</div>
+              <div class="tt-col-value hide-mobile">{{ review.createdAt | date }}</div>
+              <!-- <div [routerLink]="['/edit', review._id]" class="tt-col-value btn btn-secondary btn-width-lg"  *ngIf="user_data._id == review.user_id">แก้ไข</div>
+              <div  (click)="deleteData(review._id)" class="tt-col-value btn btn-primary btn-width-lg" *ngIf="user_data._id == review.user_id">ลบ</div> -->
+          
+          </div>
+        
+   
+         
+          <div class="tt-row-btn">
+              <button type="button" class="btn-icon js-topiclist-showmore">
+                  <svg class="tt-icon">
+                      <use xlink:href="#icon-load_lore_icon"></use>
+                  </svg>
+              </button>
+          </div>
+      </div>
+  </div>
+</main>
+<a routerLink="/create" class="tt-btn-create-topic" >
+  <span class="tt-icon">
+      <svg>
+          <use xlink:href="#icon-create_new"></use>
+      </svg>
+  </span>
+</a>
+
+
+

mean4thai/src/app/home/home.component.scss

+.example-icon {
+    padding: 0 14px;
+  }
+  
+  .example-spacer {
+    flex: 1 1 auto;
+  }
+  
+  .example-card {
+    width: 400px;
+    margin: 10% auto;
+  }
+  
+  .mat-card-title {
+    font-size: 16px;
+  }
+  table {
+    border-collapse: collapse;
+    width: 100%;
+  }
+  
+  th,
+  td {
+    padding: 8px;
+    text-align: center;
+    border-bottom: 1px solid #ddd;
+  }
+  
\ No newline at end of file

mean4thai/src/app/home/home.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

mean4thai/src/app/home/home.component.ts

+import { Component, OnInit, Input } from '@angular/core';
+import { HomeService } from '../service/home.service';
+import { catagory } from '../../catagory';
+import { AuthService } from '@app/shared/services';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+  reviews: any;
+  user_data: any;
+  catagorys = catagory;
+
+  constructor(private homeService: HomeService, private authService: AuthService) { }
+
+  ngOnInit() {
+    this.fetchData();
+    this.authService.getUser().subscribe(data => this.user_data = data);
+  }
+  fetchData() {
+    this.homeService.getReviews().subscribe(response => {
+      this.reviews = response;
+    });
+  }
+  pageroute(data: any) {
+    console.log(data);
+  }
+
+  deleteData(data: any) {
+    console.log(data);
+    this.homeService.deleteReview(data).subscribe((response: {}) => alert('ลบเรียบร้อย'));
+    this.fetchData();
+  }
+}

mean4thai/src/app/interceptors/header.interceptor.ts

+import { Injectable } from '@angular/core';
+import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
+
+import { Observable } from 'rxjs';
+
+import { AuthService } from '@app/shared/services';
+
+@Injectable()
+export class AuthHeaderInterceptor implements HttpInterceptor {
+  constructor(private authService: AuthService) {}
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    req = req.clone({
+      setHeaders: this.authService.getAuthorizationHeaders(),
+    });
+
+    return next.handle(req);
+  }
+}

mean4thai/src/app/interceptors/http-error.interceptor.ts

+import { Injectable } from '@angular/core';
+import {
+  HttpEvent,
+  HttpInterceptor,
+  HttpHandler,
+  HttpRequest,
+  HttpErrorResponse,
+} from '@angular/common/http';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+import { Observable, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+
+@Injectable()
+export class CatchErrorInterceptor implements HttpInterceptor {
+  constructor(private snackBar: MatSnackBar) {}
+
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    return next.handle(request).pipe(catchError(this.showSnackBar));
+  }
+
+  private showSnackBar = (response: HttpErrorResponse): Observable<never> => {
+    const text: string | undefined = response.error?.message ?? response.error.statusText;
+
+    if (text) {
+      this.snackBar.open(text, 'Close', {
+        duration: 2000,
+      });
+    }
+
+    return throwError(response);
+  };
+}

mean4thai/src/app/service/create.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { CreateService } from './create.service';
+
+describe('CreateService', () => {
+  let service: CreateService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CreateService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

mean4thai/src/app/service/create.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CreateService {
+  baseUrl = 'http://localhost:4040/api/review';
+
+  constructor(public http: HttpClient) { }
+
+  httpOptions = {
+    headers: new HttpHeaders({
+      'Content-Type': 'application/json',
+      'Accept': 'application/json'
+    })
+  };
+  postReview(data: any): Observable<any> {
+    return this.http.post<any>(`${this.baseUrl}`, JSON.stringify(data), this.httpOptions);
+  }
+}

mean4thai/src/app/service/edit.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { EditService } from './edit.service';
+
+describe('EditService', () => {
+  let service: EditService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(EditService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

mean4thai/src/app/service/edit.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EditService {
+  baseUrl = 'http://localhost:4040/api/review';
+
+  constructor(public http: HttpClient) { }
+
+  httpOptions = {
+    headers: new HttpHeaders({
+      'Content-Type': 'application/json',
+      'Accept': 'application/json'
+    })
+  };
+
+  getReviewsById(_id: any): Observable<any> {
+    return this.http.get<any>(`${this.baseUrl}/get/${_id}`);
+  }
+
+  putUpdate(data: any): Observable<any> {
+    return this.http.put(`${this.baseUrl}/update/${data._id}`, data);
+  }
+}

mean4thai/src/app/service/home.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { HomeService } from './home.service';
+
+describe('HomeService', () => {
+  let service: HomeService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(HomeService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

mean4thai/src/app/service/home.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HomeService {
+  baseUrl = 'http://localhost:4040/api/review';
+
+  constructor(public http: HttpClient) { }
+
+  httpOptions = {
+    headers: new HttpHeaders({
+      'Content-Type': 'application/json',
+      'Accept': 'application/json'
+    })
+  };
+  getReviews(): Observable<any> {
+    return this.http.get<any>(`${this.baseUrl}/all`);
+  }
+  deleteReview(data: any): Observable<any> {
+    return this.http.delete<any>(`${this.baseUrl}/delete/${data}`, this.httpOptions);
+  }
+}

mean4thai/src/app/service/viewdata.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { ViewdataService } from './viewdata.service';
+
+describe('ViewdataService', () => {
+  let service: ViewdataService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ViewdataService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

mean4thai/src/app/service/viewdata.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ViewdataService {
+  baseUrl = 'http://localhost:4040/api/review';
+
+  constructor(public http: HttpClient) { }
+
+  httpOptions = {
+    headers: new HttpHeaders({
+      'Content-Type': 'application/json',
+      'Accept': 'application/json'
+    })
+  };
+  getReviews(): Observable<any> {
+    return this.http.get<any>(`${this.baseUrl}/all`);
+  }
+
+  getReviewsById(_id: any): Observable<any> {
+    return this.http.get<any>(`${this.baseUrl}/get/${_id}`,this.httpOptions);
+  }
+}

mean4thai/src/app/shared/guards/auth.guard.ts

+import { Injectable } from '@angular/core';
+import { CanActivate, Router } from '@angular/router';
+
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { AuthService } from '../services';
+
+@Injectable({ providedIn: 'root' })
+export class AuthGuard implements CanActivate {
+  constructor(private router: Router, private authService: AuthService) {}
+
+  canActivate(): Observable<boolean> {
+    return this.authService.getUser().pipe(
+      map(user => {
+        if (user !== null) {
+          return true;
+        }
+
+        this.router.navigateByUrl('/auth/login');
+        return false;
+      })
+    );
+  }
+}

mean4thai/src/app/shared/guards/index.ts

+export * from './auth.guard';

mean4thai/src/app/shared/interfaces/index.ts

+export * from './user.interface';

mean4thai/src/app/shared/interfaces/user.interface.ts

+export interface User {
+  _id: string;
+  fullname: string;
+  createdAt: string;
+  roles: string[];
+  isAdmin: boolean;
+}

mean4thai/src/app/shared/services/auth/auth.service.spec.ts

+import { TestBed, inject } from '@angular/core/testing';
+
+import { AuthService } from './auth.service';
+
+describe('AuthService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [AuthService]
+    });
+  });
+
+  it('should be created', inject([AuthService], (service: AuthService) => {
+    expect(service).toBeTruthy();
+  }));
+});

mean4thai/src/app/shared/services/auth/auth.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { Observable, BehaviorSubject, EMPTY } from 'rxjs';
+import { tap, pluck } from 'rxjs/operators';
+
+import { User } from '@app/shared/interfaces';
+
+import { TokenStorage } from './token.storage';
+
+interface AuthResponse {
+  token: string;
+  user: User;
+}
+
+@Injectable({ providedIn: 'root' })
+export class AuthService {
+  private user$ = new BehaviorSubject<User | null>(null);
+
+  constructor(private http: HttpClient, private tokenStorage: TokenStorage) {}
+
+  login(email: string, password: string): Observable<User> {
+    return this.http
+      .post<AuthResponse>('/api/auth/login', { email, password })
+      .pipe(
+        tap(({ token, user }) => {
+          this.setUser(user);
+          this.tokenStorage.saveToken(token);
+        }),
+        pluck('user')
+      );
+  }
+
+  register(
+    fullname: string,
+    email: string,
+    password: string,
+    repeatPassword: string
+  ): Observable<User> {
+    return this.http
+      .post<AuthResponse>('/api/auth/register', {
+        fullname,
+        email,
+        password,
+        repeatPassword,
+      })
+      .pipe(
+        tap(({ token, user }) => {
+          this.setUser(user);
+          this.tokenStorage.saveToken(token);
+        }),
+        pluck('user')
+      );
+  }
+
+  setUser(user: User | null): void {
+    if (user) {
+      user.isAdmin = user.roles.includes('admin');
+    }
+
+    this.user$.next(user);
+    window.user = user;
+  }
+
+  getUser(): Observable<User | null> {
+    return this.user$.asObservable();
+  }
+
+  me(): Observable<User> {
+    const token: string | null = this.tokenStorage.getToken();
+
+    if (token === null) {
+      return EMPTY;
+    }
+
+    return this.http.get<AuthResponse>('/api/auth/me').pipe(
+      tap(({ user }) => this.setUser(user)),
+      pluck('user')
+    );
+  }
+
+  signOut(): void {
+    this.tokenStorage.signOut();
+    this.setUser(null);
+    delete window.user;
+  }
+
+  getAuthorizationHeaders() {
+    const token: string | null = this.tokenStorage.getToken() || '';
+    return { Authorization: `Bearer ${token}` };
+  }
+
+  /**
+   * Let's try to get user's information if he was logged in previously,
+   * thus we can ensure that the user is able to access the `/` (home) page.
+   */
+  checkTheUserOnTheFirstLoad(): Promise<User> {
+    return this.me().toPromise();
+  }
+}

mean4thai/src/app/shared/services/auth/token.storage.ts

+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class TokenStorage {
+  private tokenKey = 'authToken';
+
+  signOut(): void {
+    localStorage.removeItem(this.tokenKey);
+    localStorage.clear();
+  }
+
+  saveToken(token?: string): void {
+    if (!token) return;
+    localStorage.setItem(this.tokenKey, token);
+  }
+
+  getToken(): string | null {
+    return localStorage.getItem(this.tokenKey);
+  }
+}

mean4thai/src/app/shared/services/index.ts

+export * from './auth/auth.service';

mean4thai/src/app/shared/shared.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatCardModule } from '@angular/material/card';
+import { MatListModule } from '@angular/material/list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTreeModule } from '@angular/material/tree';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+
+@NgModule({
+  exports: [
+    FormsModule,
+    ReactiveFormsModule,
+    CommonModule,
+    MatMenuModule,
+    MatTabsModule,
+    MatCardModule,
+    MatListModule,
+    MatIconModule,
+    MatTreeModule,
+    MatInputModule,
+    MatSelectModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatDividerModule,
+    MatToolbarModule,
+    MatSidenavModule,
+    MatSnackBarModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatProgressBarModule,
+  ],
+})
+export class SharedModule {}

mean4thai/src/app/viewdata/viewdata.component.html

+
+<main id="tt-pageContent">
+    <div class="container">
+        <div class="tt-single-topic-list">
+            <div class="tt-item">
+                 <div class="tt-single-topic">
+                    <div class="tt-item-header">
+                        <div class="tt-item-info info-top">
+                            <div class="tt-avatar-icon">
+                                <i class="tt-icon"><svg><use xlink:href="#icon-ava-d"></use></svg></i>
+                            </div>
+                            <div class="tt-avatar-title">
+                               <a >{{ data._id }}</a>
+                            </div>
+                            <a href="#" class="tt-info-time">
+                                <i class="tt-icon"><svg><use xlink:href="#icon-time"></use></svg></i>{{ data.createAt| date }}
+                            </a>
+                        </div>
+                        <h2 class="tt-item-title">
+                            <a ><strong>{{ data.namemovie}}</strong></a>
+                        </h2>
+                        <div class="tt-item-tag">
+                            <ul class="tt-list-badge">
+                                <li><a ><span class="tt-color03 tt-badge">#{{ data.description }}</span></a></li>
+                                <!-- <li><a href="#"><span class="tt-badge">themeforest</span></a></li>
+                                <li><a href="#"><span class="tt-badge">elements</span></a></li> -->
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="tt-item-description">
+                        
+                        <p>
+                            {{ data.title }}
+                        </p>
+                        
+                    </div>
+                    <div class="tt-item-info info-bottom">
+                        <a href="#" class="tt-icon-btn">
+                            <i class="tt-icon"><svg><use xlink:href="#icon-like"></use></svg></i>
+                            <span class="tt-text">671</span>
+                        </a>
+                        <a href="#" class="tt-icon-btn">
+                             <i class="tt-icon"><svg><use xlink:href="#icon-dislike"></use></svg></i>
+                            <span class="tt-text">39</span>
+                        </a>
+                        <a href="#" class="tt-icon-btn">
+                             <i class="tt-icon"><svg><use xlink:href="#icon-favorite"></use></svg></i>
+                            <span class="tt-text">12</span>
+                        </a>
+                        <div class="col-separator"></div>
+                        <a href="#" class="tt-icon-btn tt-hover-02 tt-small-indent">
+                            <i class="tt-icon"><svg><use xlink:href="#icon-share"></use></svg></i>
+                        </a>
+                        <a href="#" class="tt-icon-btn tt-hover-02 tt-small-indent">
+                            <i class="tt-icon"><svg><use xlink:href="#icon-flag"></use></svg></i>
+                        </a>
+                        <a href="#" class="tt-icon-btn tt-hover-02 tt-small-indent">
+                             <i class="tt-icon"><svg><use xlink:href="#icon-reply"></use></svg></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="tt-wrapper-inner">
+                <h4 class="tt-title-separator"><span>สามารถแสดงความคิดเห็นได้</span></h4>
+            </div>
+           
+            <div class="tt-item">
+                 <div class="tt-single-topic">
+                
+                           <div class="tt-item-description">
+                        
+                        <div class="topic-inner-list">
+                            
+                            <div class="topic-inner">
+                                <div class="topic-inner-title">
+                                    <div class="topic-inner-avatar">
+                                        <i class="tt-icon"><svg><use xlink:href="#icon-ava-s"></use></svg></i>
+                                    </div>
+                                    <div class="topic-inner-title"><a href="#">summit92</a></div>
+                                </div>
+                                <div class="topic-inner-description">
+                                    Finally!<br>
+                                    Are there any special recommendations for design or an updated guide that includes new preview sizes, including retina displays?
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="tt-item-info info-bottom">
+                        <a href="#" class="tt-icon-btn">
+                            <i class="tt-icon"><svg><use xlink:href="#icon-like"></use></svg></i>
+                            <span class="tt-text">671</span>
+                        </a>
+                        <a href="#" class="tt-icon-btn">
+                             <i class="tt-icon"><svg><use xlink:href="#icon-dislike"></use></svg></i>
+                            <span class="tt-text">39</span>
+                        </a>
+                        <a href="#" class="tt-icon-btn">
+                             <i class="tt-icon"><svg><use xlink:href="#icon-favorite"></use></svg></i>
+                            <span class="tt-text">12</span>
+                        </a>
+                        <div class="col-separator"></div>
+                        <a href="#" class="tt-icon-btn tt-hover-02 tt-small-indent">
+                            <i class="tt-icon"><svg><use xlink:href="#icon-time"></use></svg></i>
+                            6 Jan,2019
+                        </a>
+                       
+                    </div>
+                </div>
+            </div>
+         
+        </div>
+     
+   
+        <div class="tt-wrapper-inner">
+            <div class="pt-editor form-default">
+                <h6 class="pt-title">Post Your Reply</h6>
+              
+                <div class="form-group">
+                    <textarea name="message" class="form-control" rows="5" placeholder="Lets get started"></textarea>
+                </div>
+                <div class="pt-row">
+                    <div class="col-auto">
+                        <div class="checkbox-group">
+                            <input type="checkbox" id="checkBox21" name="checkbox" checked="">
+                            <label for="checkBox21">
+                                <span class="check"></span>
+                                <span class="box"></span>
+                                <span class="tt-text">Subscribe to this topic.</span>
+                            </label>
+                        </div>
+                    </div>
+                    <div class="col-auto">
+                        <a href="#" class="btn btn-secondary btn-width-lg">แสดงความคิดเห็น</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+ 
+    </div>
+</main>
\ No newline at end of file

mean4thai/src/app/viewdata/viewdata.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ViewdataComponent } from './viewdata.component';
+
+describe('ViewdataComponent', () => {
+  let component: ViewdataComponent;
+  let fixture: ComponentFixture<ViewdataComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ViewdataComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ViewdataComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

mean4thai/src/app/viewdata/viewdata.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { create } from 'domain';
+import { ViewdataService } from '../service/viewdata.service';
+import { catagory } from '../../catagory'; 
+import { AuthService } from '@app/shared/services';
+@Component({
+  selector: 'app-viewdata',
+  templateUrl: './viewdata.component.html',
+  styleUrls: ['./viewdata.component.css']
+})
+export class ViewdataComponent implements OnInit {
+  constructor(private route: ActivatedRoute, private reviewdataService: ViewdataService,private authService: AuthService) { }
+  dataId: any;
+  data: any;
+  user_data: any;
+  catagorys = catagory;
+ 
+  ngOnInit(): void {
+    this.authService.getUser().subscribe(data => this.user_data = data);
+    this.route.paramMap.subscribe(params => {
+      this.dataId = params.get('dataId');
+    });
+    this.reviewdataService.getReviewsById(this.dataId).subscribe(response => {
+      this.data = response[0];
+      console.warn(this.data);
+
+    });
+
+  }
+}

mean4thai/src/assets/external/perfect-scrollbar/perfect-scrollbar.min.js

+/* perfect-scrollbar v0.6.10 */
+(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+'use strict';
+
+var ps = require('../main')
+  , psInstances = require('../plugin/instances');
+
+function mountJQuery(jQuery) {
+  jQuery.fn.perfectScrollbar = function (settingOrCommand) {
+    return this.each(function () {
+      if (typeof settingOrCommand === 'object' ||
+          typeof settingOrCommand === 'undefined') {
+        // If it's an object or none, initialize.
+        var settings = settingOrCommand;
+
+        if (!psInstances.get(this)) {
+          ps.initialize(this, settings);
+        }
+      } else {
+        // Unless, it may be a command.
+        var command = settingOrCommand;
+
+        if (command === 'update') {
+          ps.update(this);
+        } else if (command === 'destroy') {
+          ps.destroy(this);
+        }
+      };
+      return jQuery(this);
+    });
+  };
+}
+
+if (typeof define === 'function' && define.amd) {
+  // AMD. Register as an anonymous module.
+  define(['jquery'], mountJQuery);
+} else {
+  var jq = window.jQuery ? window.jQuery : window.$;
+  if (typeof jq !== 'undefined') {
+    mountJQuery(jq);
+  }
+}
+
+module.exports = mountJQuery;
+
+},{"../main":7,"../plugin/instances":18}],2:[function(require,module,exports){
+'use strict';
+
+function oldAdd(element, className) {
+  var classes = element.className.split(' ');
+  if (classes.indexOf(className) < 0) {
+    classes.push(className);
+  }
+  element.className = classes.join(' ');
+}
+
+function oldRemove(element, className) {
+  var classes = element.className.split(' ');
+  var idx = classes.indexOf(className);
+  if (idx >= 0) {
+    classes.splice(idx, 1);
+  }
+  element.className = classes.join(' ');
+}
+
+exports.add = function (element, className) {
+  if (element.classList) {
+    element.classList.add(className);
+  } else {
+    oldAdd(element, className);
+  }
+};
+
+exports.remove = function (element, className) {
+  if (element.classList) {
+    element.classList.remove(className);
+  } else {
+    oldRemove(element, className);
+  }
+};
+
+exports.list = function (element) {
+  if (element.classList) {
+    return Array.prototype.slice.apply(element.classList);
+  } else {
+    return element.className.split(' ');
+  }
+};
+
+},{}],3:[function(require,module,exports){
+'use strict';
+
+var DOM = {};
+
+DOM.e = function (tagName, className) {
+  var element = document.createElement(tagName);
+  element.className = className;
+  return element;
+};
+
+DOM.appendTo = function (child, parent) {
+  parent.appendChild(child);
+  return child;
+};
+
+function cssGet(element, styleName) {
+  return window.getComputedStyle(element)[styleName];
+}
+
+function cssSet(element, styleName, styleValue) {
+  if (typeof styleValue === 'number') {
+    styleValue = styleValue.toString() + 'px';
+  }
+  element.style[styleName] = styleValue;
+  return element;
+}
+
+function cssMultiSet(element, obj) {
+  for (var key in obj) {
+    var val = obj[key];
+    if (typeof val === 'number') {
+      val = val.toString() + 'px';
+    }
+    element.style[key] = val;
+  }
+  return element;
+}
+
+DOM.css = function (element, styleNameOrObject, styleValue) {
+  if (typeof styleNameOrObject === 'object') {
+    // multiple set with object
+    return cssMultiSet(element, styleNameOrObject);
+  } else {
+    if (typeof styleValue === 'undefined') {
+      return cssGet(element, styleNameOrObject);
+    } else {
+      return cssSet(element, styleNameOrObject, styleValue);
+    }
+  }
+};
+
+DOM.matches = function (element, query) {
+  if (typeof element.matches !== 'undefined') {
+    return element.matches(query);
+  } else {
+    if (typeof element.matchesSelector !== 'undefined') {
+      return element.matchesSelector(query);
+    } else if (typeof element.webkitMatchesSelector !== 'undefined') {
+      return element.webkitMatchesSelector(query);
+    } else if (typeof element.mozMatchesSelector !== 'undefined') {
+      return element.mozMatchesSelector(query);
+    } else if (typeof element.msMatchesSelector !== 'undefined') {
+      return element.msMatchesSelector(query);
+    }
+  }
+};
+
+DOM.remove = function (element) {
+  if (typeof element.remove !== 'undefined') {
+    element.remove();
+  } else {
+    if (element.parentNode) {
+      element.parentNode.removeChild(element);
+    }
+  }
+};
+
+DOM.queryChildren = function (element, selector) {
+  return Array.prototype.filter.call(element.childNodes, function (child) {
+    return DOM.matches(child, selector);
+  });
+};
+
+module.exports = DOM;
+
+},{}],4:[function(require,module,exports){
+'use strict';
+
+var EventElement = function (element) {
+  this.element = element;
+  this.events = {};
+};
+
+EventElement.prototype.bind = function (eventName, handler) {
+  if (typeof this.events[eventName] === 'undefined') {
+    this.events[eventName] = [];
+  }
+  this.events[eventName].push(handler);
+  this.element.addEventListener(eventName, handler, false);
+};
+
+EventElement.prototype.unbind = function (eventName, handler) {
+  var isHandlerProvided = (typeof handler !== 'undefined');
+  this.events[eventName] = this.events[eventName].filter(function (hdlr) {
+    if (isHandlerProvided && hdlr !== handler) {
+      return true;
+    }
+    this.element.removeEventListener(eventName, hdlr, false);
+    return false;
+  }, this);
+};
+
+EventElement.prototype.unbindAll = function () {
+  for (var name in this.events) {
+    this.unbind(name);
+  }
+};
+
+var EventManager = function () {
+  this.eventElements = [];
+};
+
+EventManager.prototype.eventElement = function (element) {
+  var ee = this.eventElements.filter(function (eventElement) {
+    return eventElement.element === element;
+  })[0];
+  if (typeof ee === 'undefined') {
+    ee = new EventElement(element);
+    this.eventElements.push(ee);
+  }
+  return ee;
+};
+
+EventManager.prototype.bind = function (element, eventName, handler) {
+  this.eventElement(element).bind(eventName, handler);
+};
+
+EventManager.prototype.unbind = function (element, eventName, handler) {
+  this.eventElement(element).unbind(eventName, handler);
+};
+
+EventManager.prototype.unbindAll = function () {
+  for (var i = 0; i < this.eventElements.length; i++) {
+    this.eventElements[i].unbindAll();
+  }
+};
+
+EventManager.prototype.once = function (element, eventName, handler) {
+  var ee = this.eventElement(element);
+  var onceHandler = function (e) {
+    ee.unbind(eventName, onceHandler);
+    handler(e);
+  };
+  ee.bind(eventName, onceHandler);
+};
+
+module.exports = EventManager;
+
+},{}],5:[function(require,module,exports){
+'use strict';
+
+module.exports = (function () {
+  function s4() {
+    return Math.floor((1 + Math.random()) * 0x10000)
+               .toString(16)
+               .substring(1);
+  }
+  return function () {
+    return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
+           s4() + '-' + s4() + s4() + s4();
+  };
+})();
+
+},{}],6:[function(require,module,exports){
+'use strict';
+
+var cls = require('./class')
+  , d = require('./dom');
+
+exports.toInt = function (x) {
+  return parseInt(x, 10) || 0;
+};
+
+exports.clone = function (obj) {
+  if (obj === null) {
+    return null;
+  } else if (typeof obj === 'object') {
+    var result = {};
+    for (var key in obj) {
+      result[key] = this.clone(obj[key]);
+    }
+    return result;
+  } else {
+    return obj;
+  }
+};
+
+exports.extend = function (original, source) {
+  var result = this.clone(original);
+  for (var key in source) {
+    result[key] = this.clone(source[key]);
+  }
+  return result;
+};
+
+exports.isEditable = function (el) {
+  return d.matches(el, "input,[contenteditable]") ||
+         d.matches(el, "select,[contenteditable]") ||
+         d.matches(el, "textarea,[contenteditable]") ||
+         d.matches(el, "button,[contenteditable]");
+};
+
+exports.removePsClasses = function (element) {
+  var clsList = cls.list(element);
+  for (var i = 0; i < clsList.length; i++) {
+    var className = clsList[i];
+    if (className.indexOf('ps-') === 0) {
+      cls.remove(element, className);
+    }
+  }
+};
+
+exports.outerWidth = function (element) {
+  return this.toInt(d.css(element, 'width')) +
+         this.toInt(d.css(element, 'paddingLeft')) +
+         this.toInt(d.css(element, 'paddingRight')) +
+         this.toInt(d.css(element, 'borderLeftWidth')) +
+         this.toInt(d.css(element, 'borderRightWidth'));
+};
+
+exports.startScrolling = function (element, axis) {
+  cls.add(element, 'ps-in-scrolling');
+  if (typeof axis !== 'undefined') {
+    cls.add(element, 'ps-' + axis);
+  } else {
+    cls.add(element, 'ps-x');
+    cls.add(element, 'ps-y');
+  }
+};
+
+exports.stopScrolling = function (element, axis) {
+  cls.remove(element, 'ps-in-scrolling');
+  if (typeof axis !== 'undefined') {
+    cls.remove(element, 'ps-' + axis);
+  } else {
+    cls.remove(element, 'ps-x');
+    cls.remove(element, 'ps-y');
+  }
+};
+
+exports.env = {
+  isWebKit: 'WebkitAppearance' in document.documentElement.style,
+  supportsTouch: (('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch),
+  supportsIePointer: window.navigator.msMaxTouchPoints !== null
+};
+
+},{"./class":2,"./dom":3}],7:[function(require,module,exports){
+'use strict';
+
+var destroy = require('./plugin/destroy')
+  , initialize = require('./plugin/initialize')
+  , update = require('./plugin/update');
+
+module.exports = {
+  initialize: initialize,
+  update: update,
+  destroy: destroy
+};
+
+},{"./plugin/destroy":9,"./plugin/initialize":17,"./plugin/update":21}],8:[function(require,module,exports){
+'use strict';
+
+module.exports = {
+  maxScrollbarLength: null,
+  minScrollbarLength: null,
+  scrollXMarginOffset: 0,
+  scrollYMarginOffset: 0,
+  stopPropagationOnClick: true,
+  suppressScrollX: false,
+  suppressScrollY: false,
+  swipePropagation: true,
+  useBothWheelAxes: false,
+  useKeyboard: true,
+  useSelectionScroll: false,
+  wheelPropagation: false,
+  wheelSpeed: 1,
+  theme: 'default'
+};
+
+},{}],9:[function(require,module,exports){
+'use strict';
+
+var d = require('../lib/dom')
+  , h = require('../lib/helper')
+  , instances = require('./instances');
+
+module.exports = function (element) {
+  var i = instances.get(element);
+
+  if (!i) {
+    return;
+  }
+
+  i.event.unbindAll();
+  d.remove(i.scrollbarX);
+  d.remove(i.scrollbarY);
+  d.remove(i.scrollbarXRail);
+  d.remove(i.scrollbarYRail);
+  h.removePsClasses(element);
+
+  instances.remove(element);
+};
+
+},{"../lib/dom":3,"../lib/helper":6,"./instances":18}],10:[function(require,module,exports){
+'use strict';
+
+var h = require('../../lib/helper')
+  , instances = require('../instances')
+  , updateGeometry = require('../update-geometry')
+  , updateScroll = require('../update-scroll');
+
+function bindClickRailHandler(element, i) {
+  function pageOffset(el) {
+    return el.getBoundingClientRect();
+  }
+  var stopPropagation = window.Event.prototype.stopPropagation.bind;
+
+  if (i.settings.stopPropagationOnClick) {
+    i.event.bind(i.scrollbarY, 'click', stopPropagation);
+  }
+  i.event.bind(i.scrollbarYRail, 'click', function (e) {
+    var halfOfScrollbarLength = h.toInt(i.scrollbarYHeight / 2);
+    var positionTop = i.railYRatio * (e.pageY - window.pageYOffset - pageOffset(i.scrollbarYRail).top - halfOfScrollbarLength);
+    var maxPositionTop = i.railYRatio * (i.railYHeight - i.scrollbarYHeight);
+    var positionRatio = positionTop / maxPositionTop;
+
+    if (positionRatio < 0) {
+      positionRatio = 0;
+    } else if (positionRatio > 1) {
+      positionRatio = 1;
+    }
+
+    updateScroll(element, 'top', (i.contentHeight - i.containerHeight) * positionRatio);
+    updateGeometry(element);
+
+    e.stopPropagation();
+  });
+
+  if (i.settings.stopPropagationOnClick) {
+    i.event.bind(i.scrollbarX, 'click', stopPropagation);
+  }
+  i.event.bind(i.scrollbarXRail, 'click', function (e) {
+    var halfOfScrollbarLength = h.toInt(i.scrollbarXWidth / 2);
+    var positionLeft = i.railXRatio * (e.pageX - window.pageXOffset - pageOffset(i.scrollbarXRail).left - halfOfScrollbarLength);
+    var maxPositionLeft = i.railXRatio * (i.railXWidth - i.scrollbarXWidth);
+    var positionRatio = positionLeft / maxPositionLeft;
+
+    if (positionRatio < 0) {
+      positionRatio = 0;
+    } else if (positionRatio > 1) {
+      positionRatio = 1;
+    }
+
+    updateScroll(element, 'left', ((i.contentWidth - i.containerWidth) * positionRatio) - i.negativeScrollAdjustment);
+    updateGeometry(element);
+
+    e.stopPropagation();
+  });
+}
+
+module.exports = function (element) {
+  var i = instances.get(element);
+  bindClickRailHandler(element, i);
+};
+
+},{"../../lib/helper":6,"../instances":18,"../update-geometry":19,"../update-scroll":20}],11:[function(require,module,exports){
+'use strict';
+
+var d = require('../../lib/dom')
+  , h = require('../../lib/helper')
+  , instances = require('../instances')
+  , updateGeometry = require('../update-geometry')
+  , updateScroll = require('../update-scroll');
+
+function bindMouseScrollXHandler(element, i) {
+  var currentLeft = null;
+  var currentPageX = null;
+
+  function updateScrollLeft(deltaX) {
+    var newLeft = currentLeft + (deltaX * i.railXRatio);
+    var maxLeft = Math.max(0, i.scrollbarXRail.getBoundingClientRect().left) + (i.railXRatio * (i.railXWidth - i.scrollbarXWidth));
+
+    if (newLeft < 0) {
+      i.scrollbarXLeft = 0;
+    } else if (newLeft > maxLeft) {
+      i.scrollbarXLeft = maxLeft;
+    } else {
+      i.scrollbarXLeft = newLeft;
+    }
+
+    var scrollLeft = h.toInt(i.scrollbarXLeft * (i.contentWidth - i.containerWidth) / (i.containerWidth - (i.railXRatio * i.scrollbarXWidth))) - i.negativeScrollAdjustment;
+    updateScroll(element, 'left', scrollLeft);
+  }
+
+  var mouseMoveHandler = function (e) {
+    updateScrollLeft(e.pageX - currentPageX);
+    updateGeometry(element);
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  var mouseUpHandler = function () {
+    h.stopScrolling(element, 'x');
+    i.event.unbind(i.ownerDocument, 'mousemove', mouseMoveHandler);
+  };
+
+  i.event.bind(i.scrollbarX, 'mousedown', function (e) {
+    currentPageX = e.pageX;
+    currentLeft = h.toInt(d.css(i.scrollbarX, 'left')) * i.railXRatio;
+    h.startScrolling(element, 'x');
+
+    i.event.bind(i.ownerDocument, 'mousemove', mouseMoveHandler);
+    i.event.once(i.ownerDocument, 'mouseup', mouseUpHandler);
+
+    e.stopPropagation();
+    e.preventDefault();
+  });
+}
+
+function bindMouseScrollYHandler(element, i) {
+  var currentTop = null;
+  var currentPageY = null;
+
+  function updateScrollTop(deltaY) {
+    var newTop = currentTop + (deltaY * i.railYRatio);
+    var maxTop = Math.max(0, i.scrollbarYRail.getBoundingClientRect().top) + (i.railYRatio * (i.railYHeight - i.scrollbarYHeight));
+
+    if (newTop < 0) {
+      i.scrollbarYTop = 0;
+    } else if (newTop > maxTop) {
+      i.scrollbarYTop = maxTop;
+    } else {
+      i.scrollbarYTop = newTop;
+    }
+
+    var scrollTop = h.toInt(i.scrollbarYTop * (i.contentHeight - i.containerHeight) / (i.containerHeight - (i.railYRatio * i.scrollbarYHeight)));
+    updateScroll(element, 'top', scrollTop);
+  }
+
+  var mouseMoveHandler = function (e) {
+    updateScrollTop(e.pageY - currentPageY);
+    updateGeometry(element);
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  var mouseUpHandler = function () {
+    h.stopScrolling(element, 'y');
+    i.event.unbind(i.ownerDocument, 'mousemove', mouseMoveHandler);
+  };
+
+  i.event.bind(i.scrollbarY, 'mousedown', function (e) {
+    currentPageY = e.pageY;
+    currentTop = h.toInt(d.css(i.scrollbarY, 'top')) * i.railYRatio;
+    h.startScrolling(element, 'y');
+
+    i.event.bind(i.ownerDocument, 'mousemove', mouseMoveHandler);
+    i.event.once(i.ownerDocument, 'mouseup', mouseUpHandler);
+
+    e.stopPropagation();
+    e.preventDefault();
+  });
+}
+
+module.exports = function (element) {
+  var i = instances.get(element);
+  bindMouseScrollXHandler(element, i);
+  bindMouseScrollYHandler(element, i);
+};
+
+},{"../../lib/dom":3,"../../lib/helper":6,"../instances":18,"../update-geometry":19,"../update-scroll":20}],12:[function(require,module,exports){
+'use strict';
+
+var h = require('../../lib/helper')
+  , d = require('../../lib/dom')
+  , instances = require('../instances')
+  , updateGeometry = require('../update-geometry')
+  , updateScroll = require('../update-scroll');
+
+function bindKeyboardHandler(element, i) {
+  var hovered = false;
+  i.event.bind(element, 'mouseenter', function () {
+    hovered = true;
+  });
+  i.event.bind(element, 'mouseleave', function () {
+    hovered = false;
+  });
+
+  var shouldPrevent = false;
+  function shouldPreventDefault(deltaX, deltaY) {
+    var scrollTop = element.scrollTop;
+    if (deltaX === 0) {
+      if (!i.scrollbarYActive) {
+        return false;
+      }
+      if ((scrollTop === 0 && deltaY > 0) || (scrollTop >= i.contentHeight - i.containerHeight && deltaY < 0)) {
+        return !i.settings.wheelPropagation;
+      }
+    }
+
+    var scrollLeft = element.scrollLeft;
+    if (deltaY === 0) {
+      if (!i.scrollbarXActive) {
+        return false;
+      }
+      if ((scrollLeft === 0 && deltaX < 0) || (scrollLeft >= i.contentWidth - i.containerWidth && deltaX > 0)) {
+        return !i.settings.wheelPropagation;
+      }
+    }
+    return true;
+  }
+
+  i.event.bind(i.ownerDocument, 'keydown', function (e) {
+    if (e.isDefaultPrevented && e.isDefaultPrevented()) {
+      return;
+    }
+
+    var focused = d.matches(i.scrollbarX, ':focus') ||
+                  d.matches(i.scrollbarY, ':focus');
+
+    if (!hovered && !focused) {
+      return;
+    }
+
+    var activeElement = document.activeElement ? document.activeElement : i.ownerDocument.activeElement;
+    if (activeElement) {
+      // go deeper if element is a webcomponent
+      while (activeElement.shadowRoot) {
+        activeElement = activeElement.shadowRoot.activeElement;
+      }
+      if (h.isEditable(activeElement)) {
+        return;
+      }
+    }
+
+    var deltaX = 0;
+    var deltaY = 0;
+
+    switch (e.which) {
+    case 37: // left
+      deltaX = -30;
+      break;
+    case 38: // up
+      deltaY = 30;
+      break;
+    case 39: // right
+      deltaX = 30;
+      break;
+    case 40: // down
+      deltaY = -30;
+      break;
+    case 33: // page up
+      deltaY = 90;
+      break;
+    case 32: // space bar
+      if (e.shiftKey) {
+        deltaY = 90;
+      } else {
+        deltaY = -90;
+      }
+      break;
+    case 34: // page down
+      deltaY = -90;
+      break;
+    case 35: // end
+      if (e.ctrlKey) {
+        deltaY = -i.contentHeight;
+      } else {
+        deltaY = -i.containerHeight;
+      }
+      break;
+    case 36: // home
+      if (e.ctrlKey) {
+        deltaY = element.scrollTop;
+      } else {
+        deltaY = i.containerHeight;
+      }
+      break;
+    default:
+      return;
+    }
+
+    updateScroll(element, 'top', element.scrollTop - deltaY);
+    updateScroll(element, 'left', element.scrollLeft + deltaX);
+    updateGeometry(element);
+
+    shouldPrevent = shouldPreventDefault(deltaX, deltaY);
+    if (shouldPrevent) {
+      e.preventDefault();
+    }
+  });
+}
+
+module.exports = function (element) {
+  var i = instances.get(element);
+  bindKeyboardHandler(element, i);
+};
+
+},{"../../lib/dom":3,"../../lib/helper":6,"../instances":18,"../update-geometry":19,"../update-scroll":20}],13:[function(require,module,exports){
+'use strict';
+
+var instances = require('../instances')
+  , updateGeometry = require('../update-geometry')
+  , updateScroll = require('../update-scroll');
+
+function bindMouseWheelHandler(element, i) {
+  var shouldPrevent = false;
+
+  function shouldPreventDefault(deltaX, deltaY) {
+    var scrollTop = element.scrollTop;
+    if (deltaX === 0) {
+      if (!i.scrollbarYActive) {
+        return false;
+      }
+      if ((scrollTop === 0 && deltaY > 0) || (scrollTop >= i.contentHeight - i.containerHeight && deltaY < 0)) {
+        return !i.settings.wheelPropagation;
+      }
+    }
+
+    var scrollLeft = element.scrollLeft;
+    if (deltaY === 0) {
+      if (!i.scrollbarXActive) {
+        return false;
+      }
+      if ((scrollLeft === 0 && deltaX < 0) || (scrollLeft >= i.contentWidth - i.containerWidth && deltaX > 0)) {
+        return !i.settings.wheelPropagation;
+      }
+    }
+    return true;
+  }
+
+  function getDeltaFromEvent(e) {
+    var deltaX = e.deltaX;
+    var deltaY = -1 * e.deltaY;
+
+    if (typeof deltaX === "undefined" || typeof deltaY === "undefined") {
+      // OS X Safari
+      deltaX = -1 * e.wheelDeltaX / 6;
+      deltaY = e.wheelDeltaY / 6;
+    }
+
+    if (e.deltaMode && e.deltaMode === 1) {
+      // Firefox in deltaMode 1: Line scrolling
+      deltaX *= 10;
+      deltaY *= 10;
+    }
+
+    if (deltaX !== deltaX && deltaY !== deltaY/* NaN checks */) {
+      // IE in some mouse drivers
+      deltaX = 0;
+      deltaY = e.wheelDelta;
+    }
+
+    return [deltaX, deltaY];
+  }
+
+  function shouldBeConsumedByTextarea(deltaX, deltaY) {
+    var hoveredTextarea = element.querySelector('textarea:hover');
+    if (hoveredTextarea) {
+      var maxScrollTop = hoveredTextarea.scrollHeight - hoveredTextarea.clientHeight;
+      if (maxScrollTop > 0) {
+        if (!(hoveredTextarea.scrollTop === 0 && deltaY > 0) &&
+            !(hoveredTextarea.scrollTop === maxScrollTop && deltaY < 0)) {
+          return true;
+        }
+      }
+      var maxScrollLeft = hoveredTextarea.scrollLeft - hoveredTextarea.clientWidth;
+      if (maxScrollLeft > 0) {
+        if (!(hoveredTextarea.scrollLeft === 0 && deltaX < 0) &&
+            !(hoveredTextarea.scrollLeft === maxScrollLeft && deltaX > 0)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  function mousewheelHandler(e) {
+    var delta = getDeltaFromEvent(e);
+
+    var deltaX = delta[0];
+    var deltaY = delta[1];
+
+    if (shouldBeConsumedByTextarea(deltaX, deltaY)) {
+      return;
+    }
+
+    shouldPrevent = false;
+    if (!i.settings.useBothWheelAxes) {
+      // deltaX will only be used for horizontal scrolling and deltaY will
+      // only be used for vertical scrolling - this is the default
+      updateScroll(element, 'top', element.scrollTop - (deltaY * i.settings.wheelSpeed));
+      updateScroll(element, 'left', element.scrollLeft + (deltaX * i.settings.wheelSpeed));
+    } else if (i.scrollbarYActive && !i.scrollbarXActive) {
+      // only vertical scrollbar is active and useBothWheelAxes option is
+      // active, so let's scroll vertical bar using both mouse wheel axes
+      if (deltaY) {
+        updateScroll(element, 'top', element.scrollTop - (deltaY * i.settings.wheelSpeed));
+      } else {
+        updateScroll(element, 'top', element.scrollTop + (deltaX * i.settings.wheelSpeed));
+      }
+      shouldPrevent = true;
+    } else if (i.scrollbarXActive && !i.scrollbarYActive) {
+      // useBothWheelAxes and only horizontal bar is active, so use both
+      // wheel axes for horizontal bar
+      if (deltaX) {
+        updateScroll(element, 'left', element.scrollLeft + (deltaX * i.settings.wheelSpeed));
+      } else {
+        updateScroll(element, 'left', element.scrollLeft - (deltaY * i.settings.wheelSpeed));
+      }
+      shouldPrevent = true;
+    }
+
+    updateGeometry(element);
+
+    shouldPrevent = (shouldPrevent || shouldPreventDefault(deltaX, deltaY));
+    if (shouldPrevent) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }
+
+  if (typeof window.onwheel !== "undefined") {
+    i.event.bind(element, 'wheel', mousewheelHandler);
+  } else if (typeof window.onmousewheel !== "undefined") {
+    i.event.bind(element, 'mousewheel', mousewheelHandler);
+  }
+}
+
+module.exports = function (element) {
+  var i = instances.get(element);
+  bindMouseWheelHandler(element, i);
+};
+
+},{"../instances":18,"../update-geometry":19,"../update-scroll":20}],14:[function(require,module,exports){
+'use strict';
+
+var instances = require('../instances')
+  , updateGeometry = require('../update-geometry');
+
+function bindNativeScrollHandler(element, i) {
+  i.event.bind(element, 'scroll', function () {
+    updateGeometry(element);
+  });
+}
+
+module.exports = function (element) {
+  var i = instances.get(element);
+  bindNativeScrollHandler(element, i);
+};
+
+},{"../instances":18,"../update-geometry":19}],15:[function(require,module,exports){
+'use strict';
+
+var h = require('../../lib/helper')
+  , instances = require('../instances')
+  , updateGeometry = require('../update-geometry')
+  , updateScroll = require('../update-scroll');
+
+function bindSelectionHandler(element, i) {
+  function getRangeNode() {
+    var selection = window.getSelection ? window.getSelection() :
+                    document.getSelection ? document.getSelection() : '';
+    if (selection.toString().length === 0) {
+      return null;
+    } else {
+      return selection.getRangeAt(0).commonAncestorContainer;
+    }
+  }
+
+  var scrollingLoop = null;
+  var scrollDiff = {top: 0, left: 0};
+  function startScrolling() {
+    if (!scrollingLoop) {
+      scrollingLoop = setInterval(function () {
+        if (!instances.get(element)) {
+          clearInterval(scrollingLoop);
+          return;
+        }
+
+        updateScroll(element, 'top', element.scrollTop + scrollDiff.top);
+        updateScroll(element, 'left', element.scrollLeft + scrollDiff.left);
+        updateGeometry(element);
+      }, 50); // every .1 sec
+    }
+  }
+  function stopScrolling() {
+    if (scrollingLoop) {
+      clearInterval(scrollingLoop);
+      scrollingLoop = null;
+    }
+    h.stopScrolling(element);
+  }
+
+  var isSelected = false;
+  i.event.bind(i.ownerDocument, 'selectionchange', function () {
+    if (element.contains(getRangeNode())) {
+      isSelected = true;
+    } else {
+      isSelected = false;
+      stopScrolling();
+    }
+  });
+  i.event.bind(window, 'mouseup', function () {
+    if (isSelected) {
+      isSelected = false;
+      stopScrolling();
+    }
+  });
+
+  i.event.bind(window, 'mousemove', function (e) {
+    if (isSelected) {
+      var mousePosition = {x: e.pageX, y: e.pageY};
+      var containerGeometry = {
+        left: element.offsetLeft,
+        right: element.offsetLeft + element.offsetWidth,
+        top: element.offsetTop,
+        bottom: element.offsetTop + element.offsetHeight
+      };
+
+      if (mousePosition.x < containerGeometry.left + 3) {
+        scrollDiff.left = -5;
+        h.startScrolling(element, 'x');
+      } else if (mousePosition.x > containerGeometry.right - 3) {
+        scrollDiff.left = 5;
+        h.startScrolling(element, 'x');
+      } else {
+        scrollDiff.left = 0;
+      }
+
+      if (mousePosition.y < containerGeometry.top + 3) {
+        if (containerGeometry.top + 3 - mousePosition.y < 5) {
+          scrollDiff.top = -5;
+        } else {
+          scrollDiff.top = -20;
+        }
+        h.startScrolling(element, 'y');
+      } else if (mousePosition.y > containerGeometry.bottom - 3) {
+        if (mousePosition.y - containerGeometry.bottom + 3 < 5) {
+          scrollDiff.top = 5;
+        } else {
+          scrollDiff.top = 20;
+        }
+        h.startScrolling(element, 'y');
+      } else {
+        scrollDiff.top = 0;
+      }
+
+      if (scrollDiff.top === 0 && scrollDiff.left === 0) {
+        stopScrolling();
+      } else {
+        startScrolling();
+      }
+    }
+  });
+}
+
+module.exports = function (element) {
+  var i = instances.get(element);
+  bindSelectionHandler(element, i);
+};
+
+},{"../../lib/helper":6,"../instances":18,"../update-geometry":19,"../update-scroll":20}],16:[function(require,module,exports){
+'use strict';
+
+var instances = require('../instances')
+  , updateGeometry = require('../update-geometry')
+  , updateScroll = require('../update-scroll');
+
+function bindTouchHandler(element, i, supportsTouch, supportsIePointer) {
+  function shouldPreventDefault(deltaX, deltaY) {
+    var scrollTop = element.scrollTop;
+    var scrollLeft = element.scrollLeft;
+    var magnitudeX = Math.abs(deltaX);
+    var magnitudeY = Math.abs(deltaY);
+
+    if (magnitudeY > magnitudeX) {
+      // user is perhaps trying to swipe up/down the page
+
+      if (((deltaY < 0) && (scrollTop === i.contentHeight - i.containerHeight)) ||
+          ((deltaY > 0) && (scrollTop === 0))) {
+        return !i.settings.swipePropagation;
+      }
+    } else if (magnitudeX > magnitudeY) {
+      // user is perhaps trying to swipe left/right across the page
+
+      if (((deltaX < 0) && (scrollLeft === i.contentWidth - i.containerWidth)) ||
+          ((deltaX > 0) && (scrollLeft === 0))) {
+        return !i.settings.swipePropagation;
+      }
+    }
+
+    return true;
+  }
+
+  function applyTouchMove(differenceX, differenceY) {
+    updateScroll(element, 'top', element.scrollTop - differenceY);
+    updateScroll(element, 'left', element.scrollLeft - differenceX);
+
+    updateGeometry(element);
+  }
+
+  var startOffset = {};
+  var startTime = 0;
+  var speed = {};
+  var easingLoop = null;
+  var inGlobalTouch = false;
+  var inLocalTouch = false;
+
+  function globalTouchStart() {
+    inGlobalTouch = true;
+  }
+  function globalTouchEnd() {
+    inGlobalTouch = false;
+  }
+
+  function getTouch(e) {
+    if (e.targetTouches) {
+      return e.targetTouches[0];
+    } else {
+      // Maybe IE pointer
+      return e;
+    }
+  }
+  function shouldHandle(e) {
+    if (e.targetTouches && e.targetTouches.length === 1) {
+      return true;
+    }
+    if (e.pointerType && e.pointerType !== 'mouse' && e.pointerType !== e.MSPOINTER_TYPE_MOUSE) {
+      return true;
+    }
+    return false;
+  }
+  function touchStart(e) {
+    if (shouldHandle(e)) {
+      inLocalTouch = true;
+
+      var touch = getTouch(e);
+
+      startOffset.pageX = touch.pageX;
+      startOffset.pageY = touch.pageY;
+
+      startTime = (new Date()).getTime();
+
+      if (easingLoop !== null) {
+        clearInterval(easingLoop);
+      }
+
+      e.stopPropagation();
+    }
+  }
+  function touchMove(e) {
+    if (!inGlobalTouch && inLocalTouch && shouldHandle(e)) {
+      var touch = getTouch(e);
+
+      var currentOffset = {pageX: touch.pageX, pageY: touch.pageY};
+
+      var differenceX = currentOffset.pageX - startOffset.pageX;
+      var differenceY = currentOffset.pageY - startOffset.pageY;
+
+      applyTouchMove(differenceX, differenceY);
+      startOffset = currentOffset;
+
+      var currentTime = (new Date()).getTime();
+
+      var timeGap = currentTime - startTime;
+      if (timeGap > 0) {
+        speed.x = differenceX / timeGap;
+        speed.y = differenceY / timeGap;
+        startTime = currentTime;
+      }
+
+      if (shouldPreventDefault(differenceX, differenceY)) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    }
+  }
+  function touchEnd() {
+    if (!inGlobalTouch && inLocalTouch) {
+      inLocalTouch = false;
+
+      clearInterval(easingLoop);
+      easingLoop = setInterval(function () {
+        if (!instances.get(element)) {
+          clearInterval(easingLoop);
+          return;
+        }
+
+        if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) {
+          clearInterval(easingLoop);
+          return;
+        }
+
+        applyTouchMove(speed.x * 30, speed.y * 30);
+
+        speed.x *= 0.8;
+        speed.y *= 0.8;
+      }, 10);
+    }
+  }
+
+  if (supportsTouch) {
+    i.event.bind(window, 'touchstart', globalTouchStart);
+    i.event.bind(window, 'touchend', globalTouchEnd);
+    i.event.bind(element, 'touchstart', touchStart);
+    i.event.bind(element, 'touchmove', touchMove);
+    i.event.bind(element, 'touchend', touchEnd);
+  }
+
+  if (supportsIePointer) {
+    if (window.PointerEvent) {
+      i.event.bind(window, 'pointerdown', globalTouchStart);
+      i.event.bind(window, 'pointerup', globalTouchEnd);
+      i.event.bind(element, 'pointerdown', touchStart);
+      i.event.bind(element, 'pointermove', touchMove);
+      i.event.bind(element, 'pointerup', touchEnd);
+    } else if (window.MSPointerEvent) {
+      i.event.bind(window, 'MSPointerDown', globalTouchStart);
+      i.event.bind(window, 'MSPointerUp', globalTouchEnd);
+      i.event.bind(element, 'MSPointerDown', touchStart);
+      i.event.bind(element, 'MSPointerMove', touchMove);
+      i.event.bind(element, 'MSPointerUp', touchEnd);
+    }
+  }
+}
+
+module.exports = function (element, supportsTouch, supportsIePointer) {
+  var i = instances.get(element);
+  bindTouchHandler(element, i, supportsTouch, supportsIePointer);
+};
+
+},{"../instances":18,"../update-geometry":19,"../update-scroll":20}],17:[function(require,module,exports){
+'use strict';
+
+var cls = require('../lib/class')
+  , h = require('../lib/helper')
+  , instances = require('./instances')
+  , updateGeometry = require('./update-geometry');
+
+// Handlers
+var clickRailHandler = require('./handler/click-rail')
+  , dragScrollbarHandler = require('./handler/drag-scrollbar')
+  , keyboardHandler = require('./handler/keyboard')
+  , mouseWheelHandler = require('./handler/mouse-wheel')
+  , nativeScrollHandler = require('./handler/native-scroll')
+  , selectionHandler = require('./handler/selection')
+  , touchHandler = require('./handler/touch');
+
+module.exports = function (element, userSettings) {
+  userSettings = typeof userSettings === 'object' ? userSettings : {};
+
+  cls.add(element, 'ps-container');
+
+  // Create a plugin instance.
+  var i = instances.add(element);
+
+  i.settings = h.extend(i.settings, userSettings);
+  cls.add(element, 'ps-theme-' + i.settings.theme);
+
+  clickRailHandler(element);
+  dragScrollbarHandler(element);
+  mouseWheelHandler(element);
+  nativeScrollHandler(element);
+
+  if (i.settings.useSelectionScroll) {
+    selectionHandler(element);
+  }
+
+  if (h.env.supportsTouch || h.env.supportsIePointer) {
+    touchHandler(element, h.env.supportsTouch, h.env.supportsIePointer);
+  }
+  if (i.settings.useKeyboard) {
+    keyboardHandler(element);
+  }
+
+  updateGeometry(element);
+};
+
+},{"../lib/class":2,"../lib/helper":6,"./handler/click-rail":10,"./handler/drag-scrollbar":11,"./handler/keyboard":12,"./handler/mouse-wheel":13,"./handler/native-scroll":14,"./handler/selection":15,"./handler/touch":16,"./instances":18,"./update-geometry":19}],18:[function(require,module,exports){
+'use strict';
+
+var cls = require('../lib/class')
+  , d = require('../lib/dom')
+  , defaultSettings = require('./default-setting')
+  , EventManager = require('../lib/event-manager')
+  , guid = require('../lib/guid')
+  , h = require('../lib/helper');
+
+var instances = {};
+
+function Instance(element) {
+  var i = this;
+
+  i.settings = h.clone(defaultSettings);
+  i.containerWidth = null;
+  i.containerHeight = null;
+  i.contentWidth = null;
+  i.contentHeight = null;
+
+  i.isRtl = d.css(element, 'direction') === "rtl";
+  i.isNegativeScroll = (function () {
+    var originalScrollLeft = element.scrollLeft;
+    var result = null;
+    element.scrollLeft = -1;
+    result = element.scrollLeft < 0;
+    element.scrollLeft = originalScrollLeft;
+    return result;
+  })();
+  i.negativeScrollAdjustment = i.isNegativeScroll ? element.scrollWidth - element.clientWidth : 0;
+  i.event = new EventManager();
+  i.ownerDocument = element.ownerDocument || document;
+
+  function focus() {
+    cls.add(element, 'ps-focus');
+  }
+
+  function blur() {
+    cls.remove(element, 'ps-focus');
+  }
+
+  i.scrollbarXRail = d.appendTo(d.e('div', 'ps-scrollbar-x-rail'), element);
+  i.scrollbarX = d.appendTo(d.e('div', 'ps-scrollbar-x'), i.scrollbarXRail);
+  i.scrollbarX.setAttribute('tabindex', 0);
+  i.event.bind(i.scrollbarX, 'focus', focus);
+  i.event.bind(i.scrollbarX, 'blur', blur);
+  i.scrollbarXActive = null;
+  i.scrollbarXWidth = null;
+  i.scrollbarXLeft = null;
+  i.scrollbarXBottom = h.toInt(d.css(i.scrollbarXRail, 'bottom'));
+  i.isScrollbarXUsingBottom = i.scrollbarXBottom === i.scrollbarXBottom; // !isNaN
+  i.scrollbarXTop = i.isScrollbarXUsingBottom ? null : h.toInt(d.css(i.scrollbarXRail, 'top'));
+  i.railBorderXWidth = h.toInt(d.css(i.scrollbarXRail, 'borderLeftWidth')) + h.toInt(d.css(i.scrollbarXRail, 'borderRightWidth'));
+  // Set rail to display:block to calculate margins
+  d.css(i.scrollbarXRail, 'display', 'block');
+  i.railXMarginWidth = h.toInt(d.css(i.scrollbarXRail, 'marginLeft')) + h.toInt(d.css(i.scrollbarXRail, 'marginRight'));
+  d.css(i.scrollbarXRail, 'display', '');
+  i.railXWidth = null;
+  i.railXRatio = null;
+
+  i.scrollbarYRail = d.appendTo(d.e('div', 'ps-scrollbar-y-rail'), element);
+  i.scrollbarY = d.appendTo(d.e('div', 'ps-scrollbar-y'), i.scrollbarYRail);
+  i.scrollbarY.setAttribute('tabindex', 0);
+  i.event.bind(i.scrollbarY, 'focus', focus);
+  i.event.bind(i.scrollbarY, 'blur', blur);
+  i.scrollbarYActive = null;
+  i.scrollbarYHeight = null;
+  i.scrollbarYTop = null;
+  i.scrollbarYRight = h.toInt(d.css(i.scrollbarYRail, 'right'));
+  i.isScrollbarYUsingRight = i.scrollbarYRight === i.scrollbarYRight; // !isNaN
+  i.scrollbarYLeft = i.isScrollbarYUsingRight ? null : h.toInt(d.css(i.scrollbarYRail, 'left'));
+  i.scrollbarYOuterWidth = i.isRtl ? h.outerWidth(i.scrollbarY) : null;
+  i.railBorderYWidth = h.toInt(d.css(i.scrollbarYRail, 'borderTopWidth')) + h.toInt(d.css(i.scrollbarYRail, 'borderBottomWidth'));
+  d.css(i.scrollbarYRail, 'display', 'block');
+  i.railYMarginHeight = h.toInt(d.css(i.scrollbarYRail, 'marginTop')) + h.toInt(d.css(i.scrollbarYRail, 'marginBottom'));
+  d.css(i.scrollbarYRail, 'display', '');
+  i.railYHeight = null;
+  i.railYRatio = null;
+}
+
+function getId(element) {
+  if (typeof element.dataset === 'undefined') {
+    return element.getAttribute('data-ps-id');
+  } else {
+    return element.dataset.psId;
+  }
+}
+
+function setId(element, id) {
+  if (typeof element.dataset === 'undefined') {
+    element.setAttribute('data-ps-id', id);
+  } else {
+    element.dataset.psId = id;
+  }
+}
+
+function removeId(element) {
+  if (typeof element.dataset === 'undefined') {
+    element.removeAttribute('data-ps-id');
+  } else {
+    delete element.dataset.psId;
+  }
+}
+
+exports.add = function (element) {
+  var newId = guid();
+  setId(element, newId);
+  instances[newId] = new Instance(element);
+  return instances[newId];
+};
+
+exports.remove = function (element) {
+  delete instances[getId(element)];
+  removeId(element);
+};
+
+exports.get = function (element) {
+  return instances[getId(element)];
+};
+
+},{"../lib/class":2,"../lib/dom":3,"../lib/event-manager":4,"../lib/guid":5,"../lib/helper":6,"./default-setting":8}],19:[function(require,module,exports){
+'use strict';
+
+var cls = require('../lib/class')
+  , d = require('../lib/dom')
+  , h = require('../lib/helper')
+  , instances = require('./instances')
+  , updateScroll = require('./update-scroll');
+
+function getThumbSize(i, thumbSize) {
+  if (i.settings.minScrollbarLength) {
+    thumbSize = Math.max(thumbSize, i.settings.minScrollbarLength);
+  }
+  if (i.settings.maxScrollbarLength) {
+    thumbSize = Math.min(thumbSize, i.settings.maxScrollbarLength);
+  }
+  return thumbSize;
+}
+
+function updateCss(element, i) {
+  var xRailOffset = {width: i.railXWidth};
+  if (i.isRtl) {
+    xRailOffset.left = i.negativeScrollAdjustment + element.scrollLeft + i.containerWidth - i.contentWidth;
+  } else {
+    xRailOffset.left = element.scrollLeft;
+  }
+  if (i.isScrollbarXUsingBottom) {
+    xRailOffset.bottom = i.scrollbarXBottom - element.scrollTop;
+  } else {
+    xRailOffset.top = i.scrollbarXTop + element.scrollTop;
+  }
+  d.css(i.scrollbarXRail, xRailOffset);
+
+  var yRailOffset = {top: element.scrollTop, height: i.railYHeight};
+  if (i.isScrollbarYUsingRight) {
+    if (i.isRtl) {
+      yRailOffset.right = i.contentWidth - (i.negativeScrollAdjustment + element.scrollLeft) - i.scrollbarYRight - i.scrollbarYOuterWidth;
+    } else {
+      yRailOffset.right = i.scrollbarYRight - element.scrollLeft;
+    }
+  } else {
+    if (i.isRtl) {
+      yRailOffset.left = i.negativeScrollAdjustment + element.scrollLeft + i.containerWidth * 2 - i.contentWidth - i.scrollbarYLeft - i.scrollbarYOuterWidth;
+    } else {
+      yRailOffset.left = i.scrollbarYLeft + element.scrollLeft;
+    }
+  }
+  d.css(i.scrollbarYRail, yRailOffset);
+
+  d.css(i.scrollbarX, {left: i.scrollbarXLeft, width: i.scrollbarXWidth - i.railBorderXWidth});
+  d.css(i.scrollbarY, {top: i.scrollbarYTop, height: i.scrollbarYHeight - i.railBorderYWidth});
+}
+
+module.exports = function (element) {
+  var i = instances.get(element);
+
+  i.containerWidth = element.clientWidth;
+  i.containerHeight = element.clientHeight;
+  i.contentWidth = element.scrollWidth;
+  i.contentHeight = element.scrollHeight;
+
+  var existingRails;
+  if (!element.contains(i.scrollbarXRail)) {
+    existingRails = d.queryChildren(element, '.ps-scrollbar-x-rail');
+    if (existingRails.length > 0) {
+      existingRails.forEach(function (rail) {
+        d.remove(rail);
+      });
+    }
+    d.appendTo(i.scrollbarXRail, element);
+  }
+  if (!element.contains(i.scrollbarYRail)) {
+    existingRails = d.queryChildren(element, '.ps-scrollbar-y-rail');
+    if (existingRails.length > 0) {
+      existingRails.forEach(function (rail) {
+        d.remove(rail);
+      });
+    }
+    d.appendTo(i.scrollbarYRail, element);
+  }
+
+  if (!i.settings.suppressScrollX && i.containerWidth + i.settings.scrollXMarginOffset < i.contentWidth) {
+    i.scrollbarXActive = true;
+    i.railXWidth = i.containerWidth - i.railXMarginWidth;
+    i.railXRatio = i.containerWidth / i.railXWidth;
+    i.scrollbarXWidth = getThumbSize(i, h.toInt(i.railXWidth * i.containerWidth / i.contentWidth));
+    i.scrollbarXLeft = h.toInt((i.negativeScrollAdjustment + element.scrollLeft) * (i.railXWidth - i.scrollbarXWidth) / (i.contentWidth - i.containerWidth));
+  } else {
+    i.scrollbarXActive = false;
+  }
+
+  if (!i.settings.suppressScrollY && i.containerHeight + i.settings.scrollYMarginOffset < i.contentHeight) {
+    i.scrollbarYActive = true;
+    i.railYHeight = i.containerHeight - i.railYMarginHeight;
+    i.railYRatio = i.containerHeight / i.railYHeight;
+    i.scrollbarYHeight = getThumbSize(i, h.toInt(i.railYHeight * i.containerHeight / i.contentHeight));
+    i.scrollbarYTop = h.toInt(element.scrollTop * (i.railYHeight - i.scrollbarYHeight) / (i.contentHeight - i.containerHeight));
+  } else {
+    i.scrollbarYActive = false;
+  }
+
+  if (i.scrollbarXLeft >= i.railXWidth - i.scrollbarXWidth) {
+    i.scrollbarXLeft = i.railXWidth - i.scrollbarXWidth;
+  }
+  if (i.scrollbarYTop >= i.railYHeight - i.scrollbarYHeight) {
+    i.scrollbarYTop = i.railYHeight - i.scrollbarYHeight;
+  }
+
+  updateCss(element, i);
+
+  if (i.scrollbarXActive) {
+    cls.add(element, 'ps-active-x');
+  } else {
+    cls.remove(element, 'ps-active-x');
+    i.scrollbarXWidth = 0;
+    i.scrollbarXLeft = 0;
+    updateScroll(element, 'left', 0);
+  }
+  if (i.scrollbarYActive) {
+    cls.add(element, 'ps-active-y');
+  } else {
+    cls.remove(element, 'ps-active-y');
+    i.scrollbarYHeight = 0;
+    i.scrollbarYTop = 0;
+    updateScroll(element, 'top', 0);
+  }
+};
+
+},{"../lib/class":2,"../lib/dom":3,"../lib/helper":6,"./instances":18,"./update-scroll":20}],20:[function(require,module,exports){
+'use strict';
+
+var instances = require('./instances');
+
+var upEvent = document.createEvent('Event')
+  , downEvent = document.createEvent('Event')
+  , leftEvent = document.createEvent('Event')
+  , rightEvent = document.createEvent('Event')
+  , yEvent = document.createEvent('Event')
+  , xEvent = document.createEvent('Event')
+  , xStartEvent = document.createEvent('Event')
+  , xEndEvent = document.createEvent('Event')
+  , yStartEvent = document.createEvent('Event')
+  , yEndEvent = document.createEvent('Event')
+  , lastTop
+  , lastLeft;
+
+upEvent.initEvent('ps-scroll-up', true, true);
+downEvent.initEvent('ps-scroll-down', true, true);
+leftEvent.initEvent('ps-scroll-left', true, true);
+rightEvent.initEvent('ps-scroll-right', true, true);
+yEvent.initEvent('ps-scroll-y', true, true);
+xEvent.initEvent('ps-scroll-x', true, true);
+xStartEvent.initEvent('ps-x-reach-start', true, true);
+xEndEvent.initEvent('ps-x-reach-end', true, true);
+yStartEvent.initEvent('ps-y-reach-start', true, true);
+yEndEvent.initEvent('ps-y-reach-end', true, true);
+
+module.exports = function (element, axis, value) {
+  if (typeof element === 'undefined') {
+    throw 'You must provide an element to the update-scroll function';
+  }
+
+  if (typeof axis === 'undefined') {
+    throw 'You must provide an axis to the update-scroll function';
+  }
+
+  if (typeof value === 'undefined') {
+    throw 'You must provide a value to the update-scroll function';
+  }
+
+  if (axis === 'top' && value <= 0) {
+    element.scrollTop = value = 0; // don't allow negative scroll
+    element.dispatchEvent(yStartEvent);
+  }
+
+  if (axis === 'left' && value <= 0) {
+    element.scrollLeft = value = 0; // don't allow negative scroll
+    element.dispatchEvent(xStartEvent);
+  }
+
+  var i = instances.get(element);
+
+  if (axis === 'top' && value >= i.contentHeight - i.containerHeight) {
+    element.scrollTop = value = i.contentHeight - i.containerHeight; // don't allow scroll past container
+    element.dispatchEvent(yEndEvent);
+  }
+
+  if (axis === 'left' && value >= i.contentWidth - i.containerWidth) {
+    element.scrollLeft = value = i.contentWidth - i.containerWidth; // don't allow scroll past container
+    element.dispatchEvent(xEndEvent);
+  }
+
+  if (!lastTop) {
+    lastTop = element.scrollTop;
+  }
+
+  if (!lastLeft) {
+    lastLeft = element.scrollLeft;
+  }
+
+  if (axis === 'top' && value < lastTop) {
+    element.dispatchEvent(upEvent);
+  }
+
+  if (axis === 'top' && value > lastTop) {
+    element.dispatchEvent(downEvent);
+  }
+
+  if (axis === 'left' && value < lastLeft) {
+    element.dispatchEvent(leftEvent);
+  }
+
+  if (axis === 'left' && value > lastLeft) {
+    element.dispatchEvent(rightEvent);
+  }
+
+  if (axis === 'top') {
+    element.scrollTop = lastTop = value;
+    element.dispatchEvent(yEvent);
+  }
+
+  if (axis === 'left') {
+    element.scrollLeft = lastLeft = value;
+    element.dispatchEvent(xEvent);
+  }
+
+};
+
+},{"./instances":18}],21:[function(require,module,exports){
+'use strict';
+
+var d = require('../lib/dom')
+  , h = require('../lib/helper')
+  , instances = require('./instances')
+  , updateGeometry = require('./update-geometry')
+  , updateScroll = require('./update-scroll');
+
+module.exports = function (element) {
+  var i = instances.get(element);
+
+  if (!i) {
+    return;
+  }
+
+  // Recalcuate negative scrollLeft adjustment
+  i.negativeScrollAdjustment = i.isNegativeScroll ? element.scrollWidth - element.clientWidth : 0;
+
+  // Recalculate rail margins
+  d.css(i.scrollbarXRail, 'display', 'block');
+  d.css(i.scrollbarYRail, 'display', 'block');
+  i.railXMarginWidth = h.toInt(d.css(i.scrollbarXRail, 'marginLeft')) + h.toInt(d.css(i.scrollbarXRail, 'marginRight'));
+  i.railYMarginHeight = h.toInt(d.css(i.scrollbarYRail, 'marginTop')) + h.toInt(d.css(i.scrollbarYRail, 'marginBottom'));
+
+  // Hide scrollbars not to affect scrollWidth and scrollHeight
+  d.css(i.scrollbarXRail, 'display', 'none');
+  d.css(i.scrollbarYRail, 'display', 'none');
+
+  updateGeometry(element);
+
+  // Update top/left scroll to trigger events
+  updateScroll(element, 'top', element.scrollTop);
+  updateScroll(element, 'left', element.scrollLeft);
+
+  d.css(i.scrollbarXRail, 'display', '');
+  d.css(i.scrollbarYRail, 'display', '');
+};
+
+},{"../lib/dom":3,"../lib/helper":6,"./instances":18,"./update-geometry":19,"./update-scroll":20}]},{},[1]);
\ No newline at end of file

mean4thai/src/assets/external/perfect-scrollbar/perfect-scrollbar.scss

+/* perfect-scrollbar v0.6.10 */
+
+.ps-container {
+  -ms-touch-action: none;
+  touch-action: none;
+  overflow: hidden !important;
+  -ms-overflow-style: none;
+}
+@supports (-ms-overflow-style: none) {
+  .ps-container {
+    overflow: auto !important;
+  }
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .ps-container {
+    overflow: auto !important;
+  }
+}
+.ps-container.ps-active-x>.ps-scrollbar-x-rail, .ps-container.ps-active-y>.ps-scrollbar-y-rail {
+  display: block;
+  background-color: transparent;
+}
+.ps-container.ps-in-scrolling {
+  pointer-events: none;
+}
+.ps-container.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail {
+  background-color: #eee;
+  opacity: 0.9;
+}
+.ps-container.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail>.ps-scrollbar-x {
+  background-color: #999;
+}
+.ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail {
+  background-color: #eee;
+  opacity: 0.9;
+}
+.ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y {
+  background-color: #999;
+}
+.ps-container>.ps-scrollbar-x-rail {
+  display: none;
+  position: absolute;
+  /* please don't change 'position' */
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  opacity: 0;
+  -webkit-transition: background-color .2s linear, opacity .2s linear;
+  -moz-transition: background-color .2s linear, opacity .2s linear;
+  -o-transition: background-color .2s linear, opacity .2s linear;
+  transition: background-color .2s linear, opacity .2s linear;
+  bottom: 3px;
+  /* there must be 'bottom' for ps-scrollbar-x-rail */
+  height: 8px;
+}
+.ps-container>.ps-scrollbar-x-rail>.ps-scrollbar-x {
+  position: absolute;
+  /* please don't change 'position' */
+  background-color: #aaa;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-transition: background-color .2s linear;
+  -moz-transition: background-color .2s linear;
+  -o-transition: background-color .2s linear;
+  transition: background-color .2s linear;
+  bottom: 0;
+  /* there must be 'bottom' for ps-scrollbar-x */
+  height: 8px;
+}
+.ps-container>.ps-scrollbar-y-rail {
+  display: none;
+  position: absolute;
+  z-index: 21;
+  /* please don't change 'position' */
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  opacity: 0;
+  -webkit-transition: background-color .2s linear, opacity .2s linear;
+  -moz-transition: background-color .2s linear, opacity .2s linear;
+  -o-transition: background-color .2s linear, opacity .2s linear;
+  transition: background-color .2s linear, opacity .2s linear;
+  right: 3px;
+  /* there must be 'right' for ps-scrollbar-y-rail */
+  width: 8px;
+}
+.ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y {
+  position: absolute;
+  /* please don't change 'position' */
+  background-color: #aaa;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-transition: background-color .2s linear;
+  -moz-transition: background-color .2s linear;
+  -o-transition: background-color .2s linear;
+  transition: background-color .2s linear;
+  right: 0;
+  /* there must be 'right' for ps-scrollbar-y */
+  width: 5px;
+}
+.ps-container:hover.ps-in-scrolling {
+  pointer-events: none;
+}
+.ps-container:hover.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail {
+  background-color: #eee;
+  opacity: 0.9;
+}
+.ps-container:hover.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail>.ps-scrollbar-x {
+  background-color: #999;
+}
+.ps-container:hover.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail {
+  background-color: #eee;
+  opacity: 0.9;
+}
+.ps-container:hover.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y {
+  background-color: #999;
+}
+.ps-container:hover>.ps-scrollbar-x-rail, .ps-container:hover>.ps-scrollbar-y-rail {
+  opacity: 0.6;
+}
+.ps-container:hover>.ps-scrollbar-x-rail:hover {
+  background-color: #eee;
+  opacity: 0.9;
+}
+.ps-container:hover>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x {
+  background-color: #999;
+}
+.ps-container:hover>.ps-scrollbar-y-rail:hover {
+  background-color: #eee;
+  opacity: 0.9;
+}
+.ps-container:hover>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y {
+  background-color: #999;
+}
\ No newline at end of file

mean4thai/src/assets/icons/add-blue.svg

+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 5H9V9H5V11H9V15H11V11H15V9H11V5ZM10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18Z" transform="translate(0.97168 0.970551)" fill="#2D9CDB"/>
+</svg>

mean4thai/src/assets/icons/add.svg

+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.89626 5.39898H8.09694V8.09847H5.39796V9.89813H8.09694V12.5976H9.89626V9.89813H12.5952V8.09847H9.89626V5.39898ZM8.9966 0C4.04847 0 0 4.04923 0 8.9983C0 13.9474 4.04847 17.9966 8.9966 17.9966C13.9447 17.9966 17.9932 13.9474 17.9932 8.9983C17.9932 4.04923 13.9447 0 8.9966 0ZM8.9966 16.1969C5.0381 16.1969 1.79932 12.9575 1.79932 8.9983C1.79932 5.03905 5.0381 1.79966 8.9966 1.79966C12.9551 1.79966 16.1939 5.03905 16.1939 8.9983C16.1939 12.9575 12.9551 16.1969 8.9966 16.1969Z" transform="translate(-0.000488281 -0.000610352)" fill="black"/>
+</svg>

mean4thai/src/assets/icons/air-station.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#B6DCFE;" d="M 24.117188 35.5 L 15.882813 35.5 L 10.5 38.191406 L 10.5 36.234375 L 16.179688 31.5 L 23.820313 31.5 L 29.5 36.234375 L 29.5 38.191406 Z "></path>
+<path style=" fill:#4788C7;" d="M 23.636719 32 L 29 36.46875 L 29 37.382813 L 24.234375 35 L 15.765625 35 L 11 37.382813 L 11 36.46875 L 16.363281 32 L 23.636719 32 M 24 31 L 16 31 L 10 36 L 10 39 L 16 36 L 24 36 L 30 39 L 30 36 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 24.070313 23.5 L 15.929688 23.5 L 2.5 27.335938 L 2.5 24.289063 L 16.132813 16.5 L 23.867188 16.5 L 37.5 24.289063 L 37.5 27.335938 Z "></path>
+<path style=" fill:#4788C7;" d="M 23.734375 17 L 37 24.578125 L 37 26.675781 L 24.273438 23.039063 L 24.140625 23 L 15.859375 23 L 15.726563 23.039063 L 3 26.675781 L 3 24.578125 L 16.265625 17 L 23.734375 17 M 24 16 L 16 16 L 2 24 L 2 28 L 16 24 L 24 24 L 38 28 L 38 24 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 16.5 35.5 L 16.5 5 C 16.5 3.070313 18.070313 1.5 20 1.5 C 21.929688 1.5 23.5 3.070313 23.5 5 L 23.5 35.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 20 2 C 21.652344 2 23 3.347656 23 5 L 23 35 L 17 35 L 17 5 C 17 3.347656 18.347656 2 20 2 M 20 1 C 17.789063 1 16 2.789063 16 5 L 16 36 L 24 36 L 24 5 C 24 2.789063 22.210938 1 20 1 Z "></path>
+</g>
+</svg>
\ No newline at end of file

mean4thai/src/assets/icons/airplane-front-view.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#4788C7;" d="M 25.5 14 L 14.5 14 C 14.222656 14 14 13.777344 14 13.5 C 14 13.222656 14.222656 13 14.5 13 L 25.5 13 C 25.777344 13 26 13.222656 26 13.5 C 26 13.777344 25.777344 14 25.5 14 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 17.605469 18.5 L 18.96875 11.414063 C 19.046875 10.882813 19.488281 10.5 20 10.5 C 20.511719 10.5 20.953125 10.882813 21.027344 11.390625 L 22.394531 18.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 20 11 C 20.265625 11 20.492188 11.199219 20.539063 11.507813 L 21.789063 18 L 18.210938 18 L 19.46875 11.460938 C 19.507813 11.199219 19.734375 11 20 11 M 20 10 C 19.234375 10 18.585938 10.5625 18.476563 11.320313 L 17 19 L 23 19 L 21.523438 11.320313 C 21.414063 10.5625 20.765625 10 20 10 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 17.058594 25.5 L 0.5 21.605469 L 0.5 19.5 L 39.5 19.5 L 39.5 21.605469 L 22.941406 25.503906 Z "></path>
+<path style=" fill:#4788C7;" d="M 39 20 L 39 21.207031 L 22.882813 25.003906 L 17.117188 25 L 1 21.207031 L 1 20 L 39 20 M 40 19 L 0 19 L 0 22 L 17 26 L 23 26.003906 L 40 22 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 20 29.5 C 17.039063 29.5 14.5 26.109375 14.5 23.332031 C 14.5 20.667969 16.96875 18.5 20 18.5 C 23.03125 18.5 25.5 20.667969 25.5 23.332031 C 25.5 26.109375 22.960938 29.5 20 29.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 20 19 C 22.757813 19 25 20.945313 25 23.332031 C 25 25.832031 22.644531 29 20 29 C 17.355469 29 15 25.832031 15 23.332031 C 15 20.945313 17.242188 19 20 19 M 20 18 C 16.6875 18 14 20.386719 14 23.332031 C 14 26.277344 16.6875 30 20 30 C 23.3125 30 26 26.277344 26 23.332031 C 26 20.386719 23.3125 18 20 18 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 35.5 25.5 C 35.5 27.15625 34.15625 28.5 32.5 28.5 C 30.84375 28.5 29.5 27.15625 29.5 25.5 C 29.5 23.84375 30.84375 22.5 32.5 22.5 C 34.15625 22.5 35.5 23.84375 35.5 25.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 32.5 23 C 33.878906 23 35 24.121094 35 25.5 C 35 26.878906 33.878906 28 32.5 28 C 31.121094 28 30 26.878906 30 25.5 C 30 24.121094 31.121094 23 32.5 23 M 32.5 22 C 30.566406 22 29 23.566406 29 25.5 C 29 27.433594 30.566406 29 32.5 29 C 34.433594 29 36 27.433594 36 25.5 C 36 23.566406 34.433594 22 32.5 22 Z "></path>
+<path style=" fill:#4788C7;" d="M 21.25 26 C 21.25 26.691406 20.691406 27.25 20 27.25 C 19.308594 27.25 18.75 26.691406 18.75 26 C 18.75 25.308594 19.308594 24.75 20 24.75 C 20.691406 24.75 21.25 25.308594 21.25 26 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 10.5 25.5 C 10.5 27.15625 9.15625 28.5 7.5 28.5 C 5.84375 28.5 4.5 27.15625 4.5 25.5 C 4.5 23.84375 5.84375 22.5 7.5 22.5 C 9.15625 22.5 10.5 23.84375 10.5 25.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 7.5 23 C 8.878906 23 10 24.121094 10 25.5 C 10 26.878906 8.878906 28 7.5 28 C 6.121094 28 5 26.878906 5 25.5 C 5 24.121094 6.121094 23 7.5 23 M 7.5 22 C 5.566406 22 4 23.566406 4 25.5 C 4 27.433594 5.566406 29 7.5 29 C 9.433594 29 11 27.433594 11 25.5 C 11 23.566406 9.433594 22 7.5 22 Z "></path>
+<path style=" fill:#4788C7;" d="M 23 23 L 17 23 L 18 22 L 22 22 Z "></path>
+</g>
+</svg>
\ No newline at end of file

mean4thai/src/assets/icons/balloon.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#4788C7;" d="M 23 29.5 L 24 29.5 L 24 36.285156 L 23 36.285156 Z "></path>
+<path style=" fill:#4788C7;" d="M 16 29.5 L 17 29.5 L 17 36.285156 L 16 36.285156 Z "></path>
+<path style=" fill:#98CCFD;" d="M 16.25 30.5 C 15.375 29.351563 14.421875 28.175781 13.492188 27.035156 C 10.054688 22.808594 6.5 18.433594 6.5 14.570313 C 6.5 7.363281 12.554688 1.5 20 1.5 C 27.445313 1.5 33.5 7.363281 33.5 14.570313 C 33.5 18.433594 29.945313 22.808594 26.507813 27.035156 C 25.578125 28.175781 24.625 29.347656 23.75 30.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 20 2 C 27.167969 2 33 7.640625 33 14.570313 C 33 18.257813 29.503906 22.558594 26.117188 26.71875 C 25.242188 27.796875 24.339844 28.90625 23.503906 30 L 16.496094 30 C 15.660156 28.90625 14.757813 27.796875 13.882813 26.71875 C 10.496094 22.558594 7 18.257813 7 14.570313 C 7 7.640625 12.832031 2 20 2 M 20 1 C 12.269531 1 6 7.074219 6 14.570313 C 6 19.753906 11.867188 25.507813 16 31 L 24 31 C 28.132813 25.507813 34 19.753906 34 14.570313 C 34 7.074219 27.730469 1 20 1 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 22 30 C 36.5625 1.9375 20 2 20 2 C 20 2 30.59375 4.78125 21.023438 30 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 18 30 C 3.4375 1.9375 20 2 20 2 C 20 2 9.40625 4.78125 18.976563 30 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 18 38.5 C 17.171875 38.5 16.5 37.828125 16.5 37 L 16.5 33.5 L 23.5 33.5 L 23.5 37 C 23.5 37.828125 22.828125 38.5 22 38.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 23 34 L 23 37 C 23 37.550781 22.550781 38 22 38 L 18 38 C 17.449219 38 17 37.550781 17 37 L 17 34 L 23 34 M 24 33 L 16 33 L 16 37 C 16 38.105469 16.894531 39 18 39 L 22 39 C 23.105469 39 24 38.105469 24 37 Z "></path>
+</g>
+</svg>
\ No newline at end of file

mean4thai/src/assets/icons/boat.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#DFF0FE;" d="M 17.738281 8.585938 C 20.917969 8.996094 32.84375 11.085938 35.371094 19.585938 L 22.335938 21.445313 Z "></path>
+<path style=" fill:#4788C7;" d="M 18.488281 9.195313 C 22.335938 9.789063 32.125 11.992188 34.710938 19.175781 L 22.667969 20.894531 L 18.488281 9.195313 M 17 8 L 22 22 L 36 20 C 33.382813 9.257813 17 8 17 8 Z "></path>
+<path style=" fill:#4788C7;" d="M 12 2 L 13 2 L 13 27 L 12 27 Z "></path>
+<path style=" fill:#4788C7;" d="M 12 6 C 16.132813 3.425781 17.769531 5.980469 21.5 4.5 C 20.121094 4.480469 17.003906 2 13.355469 2 C 12.09375 2 12 2 12 2 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 12.859375 23.140625 C 16.355469 16.285156 14.050781 9.386719 12.9375 6.8125 C 16.449219 7.980469 27.5625 12.4375 29.414063 22.523438 Z "></path>
+<path style=" fill:#4788C7;" d="M 13.835938 7.65625 C 17.953125 9.191406 26.882813 13.457031 28.808594 22.042969 L 13.671875 22.609375 C 16.421875 16.558594 14.984375 10.699219 13.835938 7.65625 M 12 6 C 12 6 17.03125 14.957031 12 23.675781 L 30 23 C 28.109375 10.140625 12 6 12 6 Z "></path>
+<path style=" fill:#98CCFD;" d="M 6.25 34.5 C 5.570313 33.578125 2.695313 29.390625 2.511719 24.5 L 8.792969 24.5 L 10.792969 26.5 L 26.207031 26.5 L 28.207031 24.5 L 36.488281 24.5 C 36.191406 30.480469 30.703125 33.996094 29.863281 34.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 35.949219 25 C 35.40625 30.191406 30.765625 33.351563 29.722656 34 L 6.503906 34 C 5.695313 32.855469 3.371094 29.246094 3.039063 25 L 8.585938 25 L 10.585938 27 L 26.414063 27 L 28.414063 25 L 35.949219 25 M 37 24 L 28 24 L 26 26 L 11 26 L 9 24 L 2 24 C 2 29.988281 6 35 6 35 L 30 35 C 30 35 37 31.144531 37 24 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 1 39 L 39 39 L 39 31.878906 C 37.691406 31.613281 36.148438 31 35 31 C 33.542969 31 31.4375 32 30 32 C 28.5625 32 26.457031 31 25 31 C 23.542969 31 21.4375 32 20 32 C 18.5625 32 16.457031 31 15 31 C 13.542969 31 11.4375 32 10 32 C 8.5625 32 6.457031 31 5 31 C 3.851563 31 2.308594 31.613281 1 31.878906 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 1.5 32.277344 C 1.863281 32.191406 2.238281 32.085938 2.613281 31.980469 C 3.460938 31.746094 4.335938 31.5 5 31.5 C 5.664063 31.5 6.535156 31.746094 7.382813 31.984375 C 8.28125 32.238281 9.214844 32.5 10 32.5 C 10.785156 32.5 11.71875 32.238281 12.617188 31.984375 C 13.464844 31.746094 14.335938 31.5 15 31.5 C 15.664063 31.5 16.535156 31.746094 17.382813 31.984375 C 18.28125 32.238281 19.214844 32.5 20 32.5 C 20.785156 32.5 21.71875 32.238281 22.617188 31.984375 C 23.464844 31.746094 24.335938 31.5 25 31.5 C 25.664063 31.5 26.535156 31.746094 27.382813 31.984375 C 28.28125 32.238281 29.214844 32.5 30 32.5 C 30.785156 32.5 31.71875 32.238281 32.617188 31.984375 C 33.464844 31.746094 34.335938 31.5 35 31.5 C 35.664063 31.5 36.539063 31.746094 37.386719 31.980469 C 37.761719 32.085938 38.136719 32.191406 38.5 32.277344 "></path>
+</g>
+</svg>
\ No newline at end of file

mean4thai/src/assets/icons/car.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#98CCFD;" d="M 4 28.5 C 2.070313 28.5 0.5 26.929688 0.5 25 L 0.5 19.753906 C 0.5 18.757813 1.175781 17.890625 2.144531 17.652344 L 6.328125 16.421875 L 8.429688 12.875 C 9.296875 11.410156 10.890625 10.5 12.59375 10.5 L 21.992188 10.5 C 23.273438 10.5 24.523438 11.019531 25.425781 11.929688 L 29.730469 16.441406 L 37.914063 18.929688 C 38.851563 19.195313 39.5 20.050781 39.5 21.015625 L 39.5 26.332031 C 39.5 27.527344 38.527344 28.5 37.332031 28.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 21.992188 11 C 23.140625 11 24.261719 11.46875 25.058594 12.269531 L 29.277344 16.691406 L 29.457031 16.878906 L 29.707031 16.957031 L 37.785156 19.410156 C 38.503906 19.613281 39 20.273438 39 21.015625 L 39 26.332031 C 39 27.253906 38.253906 28 37.332031 28 L 4 28 C 2.347656 28 1 26.652344 1 25 L 1 19.753906 C 1 18.988281 1.519531 18.320313 2.308594 18.125 L 6.28125 16.960938 L 6.660156 16.847656 L 6.859375 16.511719 L 8.863281 13.128906 C 9.636719 11.816406 11.066406 11 12.59375 11 L 21.992188 11 M 21.992188 10 L 12.59375 10 C 10.707031 10 8.960938 10.996094 8 12.621094 L 6 16 L 2.027344 17.164063 C 0.835938 17.460938 0 18.527344 0 19.753906 L 0 25 C 0 27.210938 1.789063 29 4 29 L 37.332031 29 C 38.804688 29 40 27.804688 40 26.332031 L 40 21.015625 C 40 19.824219 39.210938 18.773438 38.0625 18.449219 L 30 16 L 25.78125 11.578125 C 24.777344 10.570313 23.414063 10 21.992188 10 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 35.5 27.5 C 35.5 29.710938 33.710938 31.5 31.5 31.5 C 29.289063 31.5 27.5 29.710938 27.5 27.5 C 27.5 25.289063 29.289063 23.5 31.5 23.5 C 33.710938 23.5 35.5 25.289063 35.5 27.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 31.5 24 C 33.429688 24 35 25.570313 35 27.5 C 35 29.429688 33.429688 31 31.5 31 C 29.570313 31 28 29.429688 28 27.5 C 28 25.570313 29.570313 24 31.5 24 M 31.5 23 C 29.015625 23 27 25.015625 27 27.5 C 27 29.984375 29.015625 32 31.5 32 C 33.984375 32 36 29.984375 36 27.5 C 36 25.015625 33.984375 23 31.5 23 Z "></path>
+<path style=" fill:#4788C7;" d="M 33 27.5 C 33 28.328125 32.328125 29 31.5 29 C 30.671875 29 30 28.328125 30 27.5 C 30 26.671875 30.671875 26 31.5 26 C 32.328125 26 33 26.671875 33 27.5 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 12.5 27.5 C 12.5 29.710938 10.710938 31.5 8.5 31.5 C 6.289063 31.5 4.5 29.710938 4.5 27.5 C 4.5 25.289063 6.289063 23.5 8.5 23.5 C 10.710938 23.5 12.5 25.289063 12.5 27.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 8.5 24 C 10.429688 24 12 25.570313 12 27.5 C 12 29.429688 10.429688 31 8.5 31 C 6.570313 31 5 29.429688 5 27.5 C 5 25.570313 6.570313 24 8.5 24 M 8.5 23 C 6.015625 23 4 25.015625 4 27.5 C 4 29.984375 6.015625 32 8.5 32 C 10.984375 32 13 29.984375 13 27.5 C 13 25.015625 10.984375 23 8.5 23 Z "></path>
+<path style=" fill:#4788C7;" d="M 10 27.5 C 10 28.328125 9.328125 29 8.5 29 C 7.671875 29 7 28.328125 7 27.5 C 7 26.671875 7.671875 26 8.5 26 C 9.328125 26 10 26.671875 10 27.5 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 5.890625 16.5 L 8.410156 12.90625 C 9.296875 11.410156 10.890625 10.5 12.59375 10.5 L 21.992188 10.5 C 23.273438 10.5 24.523438 11.019531 25.425781 11.929688 L 30.0625 16.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 21.992188 11 C 23.140625 11 24.261719 11.46875 25.078125 12.292969 L 28.84375 16 L 6.851563 16 L 8.816406 13.195313 L 8.839844 13.164063 L 8.859375 13.128906 C 9.636719 11.816406 11.066406 11 12.59375 11 L 21.992188 11 M 21.992188 10 L 12.59375 10 C 10.707031 10 8.960938 10.996094 8 12.621094 L 5.394531 16.332031 L 3 17 L 33 17 L 30.605469 16.332031 L 25.78125 11.578125 C 24.777344 10.570313 23.414063 10 21.992188 10 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 16.5 17 L 16.5 10.332031 "></path>
+<path style=" fill:#FFFFFF;" d="M 2.5 23 L 1 23 L 1 20 L 2.5 20 C 3.328125 20 4 20.671875 4 21.5 C 4 22.328125 3.328125 23 2.5 23 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 38.5 21 C 37.671875 21 37 21.671875 37 22.5 C 37 23.328125 37.671875 24 38.5 24 L 39 24 L 39 21.5 C 39 21.324219 38.964844 21.160156 38.921875 21 Z "></path>
+</g>
+</svg>
\ No newline at end of file

mean4thai/src/assets/icons/cargo-ship.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#4788C7;" d="M 5.5 8 C 5.226563 8 5 7.773438 5 7.5 L 5 1.5 C 5 1.226563 5.226563 1 5.5 1 C 5.773438 1 6 1.226563 6 1.5 L 6 7.5 C 6 7.773438 5.773438 8 5.5 8 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 16.5 7.5 L 22.5 7.5 L 22.5 13.5 L 16.5 13.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 22 8 L 22 13 L 17 13 L 17 8 L 22 8 M 23 7 L 16 7 L 16 14 L 23 14 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 22.5 7.5 L 28.5 7.5 L 28.5 13.5 L 22.5 13.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 28 8 L 28 13 L 23 13 L 23 8 L 28 8 M 29 7 L 22 7 L 22 14 L 29 14 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 28.5 7.5 L 34.5 7.5 L 34.5 13.5 L 28.5 13.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 34 8 L 34 13 L 29 13 L 29 8 L 34 8 M 35 7 L 28 7 L 28 14 L 35 14 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 16.5 13.5 L 22.5 13.5 L 22.5 19.5 L 16.5 19.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 22 14 L 22 19 L 17 19 L 17 14 L 22 14 M 23 13 L 16 13 L 16 20 L 23 20 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 22.5 13.5 L 28.5 13.5 L 28.5 19.5 L 22.5 19.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 28 14 L 28 19 L 23 19 L 23 14 L 28 14 M 29 13 L 22 13 L 22 20 L 29 20 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 28.5 13.5 L 34.5 13.5 L 34.5 19.5 L 28.5 19.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 34 14 L 34 19 L 29 19 L 29 14 L 34 14 M 35 13 L 28 13 L 28 20 L 35 20 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 1.5 19.5 L 1.5 6.5 L 12.390625 6.5 L 11.511719 10.902344 L 11.5 19.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 11.78125 7 L 11.019531 10.804688 L 11 10.902344 L 11 19 L 2 19 L 2 7 L 11.78125 7 M 13 6 L 1 6 L 1 20 L 12 20 L 12 11 Z "></path>
+<path style=" fill:#98CCFD;" d="M 4.207031 34.558594 C 4.148438 32.5 3.695313 31.261719 3.175781 29.839844 C 2.449219 27.859375 1.550781 25.410156 1.503906 19.5 C 1.503906 19.5 24.003906 19.5 24.007813 19.5 C 24.671875 19.5 27.613281 19.34375 30.222656 16.5 L 38.496094 16.5 C 38.417969 24.304688 36.503906 27.332031 34.957031 29.777344 C 34.015625 31.269531 33.1875 32.574219 33.082031 34.558594 L 19.207031 36.394531 Z "></path>
+<path style=" fill:#4788C7;" d="M 37.988281 17 C 37.835938 24.289063 36.015625 27.171875 34.535156 29.511719 C 33.65625 30.902344 32.820313 32.226563 32.617188 34.117188 L 19.203125 35.890625 L 4.6875 34.113281 C 4.578125 32.21875 4.121094 30.972656 3.644531 29.667969 C 2.914063 27.683594 2.097656 25.453125 2.007813 20 L 23.949219 20 C 23.949219 20 23.992188 20 24.074219 20 C 24.675781 20 27.714844 19.851563 30.4375 17 L 37.988281 17 M 39 16 C 39 16 32.554688 16 30 16 C 27.46875 18.871094 24.574219 19 24.074219 19 C 24.027344 19 24 19 24 19 L 1 19 C 1 29.855469 3.714844 29.59375 3.714844 35 L 19.207031 36.898438 L 33.570313 35 C 33.570313 29.59375 39 29.570313 39 16 Z "></path>
+<path style=" fill:#98CCFD;" d="M 5 9 L 7 9 L 7 12 L 5 12 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 1.691406 23.5 C 1.5625 22.339844 1.507813 21.199219 1.5 19.5 L 24.300781 19.5 L 24.445313 19.230469 C 24.503906 19.121094 25.921875 16.5 29.5 16.5 L 38.496094 16.5 C 38.472656 19.253906 38.230469 21.503906 37.746094 23.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 37.988281 17 C 37.945313 19.316406 37.738281 21.257813 37.347656 23 L 2.140625 23 C 2.058594 22.121094 2.019531 21.207031 2.003906 20 L 24 20 L 24.601563 19.992188 L 24.886719 19.464844 C 24.9375 19.363281 26.242188 17 29.5 17 L 37.988281 17 M 39 16 C 39 16 32.054688 16 29.5 16 C 25.554688 16 24 19 24 19 L 1 19 C 1 21.222656 1.0625 22.546875 1.246094 24 L 38.132813 24 C 38.660156 22 39 19.515625 39 16 Z "></path>
+<path style=" fill:#98CCFD;" d="M 30 23 C 30 21.894531 30.894531 21 32 21 L 33 21 C 34.105469 21 35 21.894531 35 23 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 1 39 L 39 39 L 39 32.878906 C 37.691406 32.613281 36.148438 32 35 32 C 33.542969 32 31.4375 33 30 33 C 28.5625 33 26.457031 32 25 32 C 23.542969 32 21.4375 33 20 33 C 18.5625 33 16.457031 32 15 32 C 13.542969 32 11.4375 33 10 33 C 8.5625 33 6.457031 32 5 32 C 3.851563 32 2.308594 32.613281 1 32.878906 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 1.5 33.277344 C 1.863281 33.191406 2.238281 33.085938 2.613281 32.980469 C 3.460938 32.746094 4.335938 32.5 5 32.5 C 5.664063 32.5 6.535156 32.746094 7.382813 32.984375 C 8.28125 33.238281 9.214844 33.5 10 33.5 C 10.785156 33.5 11.71875 33.238281 12.617188 32.984375 C 13.464844 32.746094 14.335938 32.5 15 32.5 C 15.664063 32.5 16.535156 32.746094 17.382813 32.984375 C 18.28125 33.238281 19.214844 33.5 20 33.5 C 20.785156 33.5 21.71875 33.238281 22.617188 32.984375 C 23.464844 32.746094 24.335938 32.5 25 32.5 C 25.664063 32.5 26.535156 32.746094 27.382813 32.984375 C 28.28125 33.238281 29.214844 33.5 30 33.5 C 30.785156 33.5 31.71875 33.238281 32.617188 32.984375 C 33.464844 32.746094 34.335938 32.5 35 32.5 C 35.664063 32.5 36.539063 32.746094 37.386719 32.980469 C 37.761719 33.085938 38.136719 33.191406 38.5 33.277344 "></path>
+<path style=" fill:#98CCFD;" d="M 9 12 L 11 12 L 11 10.902344 L 11.019531 10.804688 L 11.378906 9 L 9 9 Z "></path>
+</g>
+</svg>
\ No newline at end of file

mean4thai/src/assets/icons/catamaran.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 19.539063 1.375 L 25.605469 15.417969 L 20.429688 27.460938 "></path>
+<path style=" fill:#DFF0FE;" d="M 2.664063 22.636719 C 7.933594 8.601563 16.949219 3.109375 19.5 1.792969 L 19.5 26.378906 Z "></path>
+<path style=" fill:#4788C7;" d="M 19 2.636719 L 19 25.753906 L 3.339844 22.273438 C 8.136719 9.921875 15.871094 4.433594 19 2.636719 M 20 1 C 20 1 8.25 5.78125 1.996094 23 L 20 27 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 38.5 13 C 38.5 14.378906 37.378906 15.5 36 15.5 C 34.621094 15.5 33.5 14.378906 33.5 13 C 33.5 11.621094 34.621094 10.5 36 10.5 C 37.378906 10.5 38.5 11.621094 38.5 13 Z "></path>
+<path style=" fill:#4788C7;" d="M 36 11 C 37.101563 11 38 11.898438 38 13 C 38 14.101563 37.101563 15 36 15 C 34.898438 15 34 14.101563 34 13 C 34 11.898438 34.898438 11 36 11 M 36 10 C 34.34375 10 33 11.34375 33 13 C 33 14.65625 34.34375 16 36 16 C 37.65625 16 39 14.65625 39 13 C 39 11.34375 37.65625 10 36 10 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 23.855469 30.5 C 23.554688 30.5 23.257813 30.394531 23.019531 30.203125 C 22.722656 29.964844 22.546875 29.621094 22.523438 29.242188 C 22.503906 28.859375 22.636719 28.503906 22.90625 28.230469 L 26.769531 24.8125 C 26.933594 24.652344 27.039063 24.578125 27.148438 24.539063 L 27.285156 24.5 L 30.324219 24.5 L 32.113281 20.5 L 29.203125 20.5 C 28.984375 20.5 28.777344 20.429688 28.601563 20.300781 L 25.140625 18.125 C 24.867188 17.910156 24.664063 17.5625 24.613281 17.171875 C 24.566406 16.777344 24.671875 16.390625 24.914063 16.078125 C 25.195313 15.71875 25.617188 15.511719 26.074219 15.511719 C 26.394531 15.511719 26.699219 15.613281 26.957031 15.808594 L 29.863281 17.5 L 35.820313 17.5 C 36.3125 17.5 36.753906 17.734375 37.027344 18.144531 C 37.304688 18.550781 37.355469 19.042969 37.171875 19.496094 C 36.007813 22.382813 34.3125 26.558594 34.3125 26.558594 C 34.191406 26.835938 34.003906 27.078125 33.753906 27.261719 C 33.558594 27.40625 33.304688 27.449219 32.980469 27.496094 L 32.871094 27.519531 C 32.851563 27.515625 31.933594 27.515625 31.65625 27.515625 C 30.457031 27.515625 28.804688 27.507813 28.226563 27.503906 L 27.941406 27.5 L 24.835938 30.078125 C 24.546875 30.359375 24.214844 30.5 23.855469 30.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 26.074219 16.011719 C 26.285156 16.011719 26.488281 16.078125 26.65625 16.207031 L 26.703125 16.242188 L 26.753906 16.269531 L 29.496094 17.863281 L 29.730469 18 L 35.820313 18 C 36.144531 18 36.433594 18.152344 36.613281 18.421875 C 36.792969 18.6875 36.828125 19.011719 36.707031 19.308594 C 35.546875 22.1875 33.855469 26.351563 33.855469 26.351563 C 33.765625 26.554688 33.632813 26.726563 33.453125 26.859375 C 33.355469 26.929688 33.144531 26.964844 32.898438 27.003906 L 32.882813 27.003906 C 32.800781 27.007813 32.53125 27.011719 31.648438 27.011719 C 30.371094 27.011719 28.582031 27.003906 28.125 27 L 27.761719 26.996094 L 27.480469 27.230469 L 24.515625 29.695313 L 24.480469 29.722656 L 24.445313 29.757813 C 24.289063 29.914063 24.078125 30 23.855469 30 C 23.722656 30 23.523438 29.96875 23.335938 29.816406 C 23.148438 29.664063 23.039063 29.453125 23.023438 29.214844 C 23.011719 28.984375 23.089844 28.769531 23.242188 28.601563 L 27.101563 25.1875 L 27.125 25.167969 L 27.148438 25.144531 C 27.257813 25.035156 27.300781 25.015625 27.308594 25.011719 L 27.351563 25 L 30.648438 25 L 30.914063 24.40625 L 32.253906 21.40625 L 32.882813 20 L 29.203125 20 C 29.128906 20 29.015625 19.984375 28.902344 19.898438 L 28.871094 19.875 L 28.835938 19.851563 L 25.453125 17.730469 C 25.265625 17.574219 25.144531 17.351563 25.113281 17.105469 C 25.078125 16.847656 25.148438 16.589844 25.3125 16.386719 C 25.496094 16.148438 25.773438 16.011719 26.074219 16.011719 M 26.074219 15.011719 C 25.488281 15.011719 24.910156 15.273438 24.519531 15.769531 C 23.847656 16.636719 24.007813 17.882813 24.875 18.546875 L 28.304688 20.699219 C 28.574219 20.902344 28.890625 21 29.203125 21 C 29.253906 21 29.433594 21 29.472656 21 L 31.339844 21 L 30 24 L 27.285156 24 C 27.210938 24 27.085938 24.011719 26.988281 24.066406 C 26.777344 24.140625 26.609375 24.269531 26.441406 24.441406 L 22.550781 27.878906 C 21.789063 28.652344 21.863281 29.914063 22.707031 30.59375 C 23.042969 30.867188 23.449219 31 23.855469 31 C 24.328125 31 24.796875 30.820313 25.152344 30.464844 L 28.121094 28 C 28.578125 28.003906 30.371094 28.011719 31.652344 28.011719 C 32.390625 28.011719 32.960938 28.011719 33 28 C 33.382813 27.9375 33.742188 27.890625 34.050781 27.660156 C 34.359375 27.433594 34.613281 27.125 34.773438 26.746094 C 34.773438 26.746094 36.472656 22.570313 37.636719 19.683594 C 38.15625 18.398438 37.207031 17 35.820313 17 L 30 17 L 27.257813 15.40625 C 26.902344 15.140625 26.488281 15.011719 26.074219 15.011719 Z "></path>
+<path style=" fill:#4788C7;" d="M 11 27 L 29 27 L 29 28 L 11 28 Z "></path>
+<path style=" fill:#98CCFD;" d="M 31 34.5 C 29.539063 34.5 27.671875 31.171875 27.511719 27.5 L 34.488281 27.5 C 34.328125 31.171875 32.460938 34.5 31 34.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 33.957031 28 C 33.667969 31.292969 32.027344 34 31 34 C 29.972656 34 28.332031 31.292969 28.042969 28 L 33.957031 28 M 35 27 L 27 27 C 27 30.839844 28.953125 35 31 35 C 33.046875 35 35 30.839844 35 27 Z "></path>
+<path style=" fill:#98CCFD;" d="M 9 34.5 C 7.539063 34.5 5.671875 31.171875 5.511719 27.5 L 12.488281 27.5 C 12.328125 31.171875 10.460938 34.5 9 34.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 11.957031 28 C 11.667969 31.292969 10.027344 34 9 34 C 7.972656 34 6.332031 31.292969 6.042969 28 L 11.957031 28 M 13 27 L 5 27 C 5 30.839844 6.953125 35 9 35 C 11.046875 35 13 30.839844 13 27 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 1 38 L 39 38 L 39 32.878906 C 37.691406 32.613281 36.148438 32 35 32 C 33.542969 32 31.4375 33 30 33 C 28.5625 33 26.457031 32 25 32 C 23.542969 32 21.4375 33 20 33 C 18.5625 33 16.457031 32 15 32 C 13.542969 32 11.4375 33 10 33 C 8.5625 33 6.457031 32 5 32 C 3.851563 32 2.308594 32.613281 1 32.878906 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 1.5 33.277344 C 1.863281 33.191406 2.238281 33.085938 2.613281 32.980469 C 3.460938 32.746094 4.335938 32.5 5 32.5 C 5.664063 32.5 6.535156 32.746094 7.382813 32.984375 C 8.28125 33.238281 9.214844 33.5 10 33.5 C 10.785156 33.5 11.71875 33.238281 12.617188 32.984375 C 13.464844 32.746094 14.335938 32.5 15 32.5 C 15.664063 32.5 16.535156 32.746094 17.382813 32.984375 C 18.28125 33.238281 19.214844 33.5 20 33.5 C 20.785156 33.5 21.71875 33.238281 22.617188 32.984375 C 23.464844 32.746094 24.335938 32.5 25 32.5 C 25.664063 32.5 26.535156 32.746094 27.382813 32.984375 C 28.28125 33.238281 29.214844 33.5 30 33.5 C 30.785156 33.5 31.71875 33.238281 32.617188 32.984375 C 33.464844 32.746094 34.335938 32.5 35 32.5 C 35.664063 32.5 36.539063 32.746094 37.386719 32.980469 C 37.761719 33.085938 38.136719 33.191406 38.5 33.277344 "></path>
+<path style=" fill:#4788C7;" d="M 34 26 L 35 26 L 35 27 L 34 27 Z "></path>
+</g>
+</svg>
\ No newline at end of file

mean4thai/src/assets/icons/clone.svg

+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.2 2.4V16.8H2.4V2.4H13.2ZM13.2 0H2.4C1.08 0 0 1.08 0 2.4V16.8C0 18.12 1.08 19.2 2.4 19.2H13.2C14.52 19.2 15.6 18.12 15.6 16.8V2.4C15.6 1.08 14.52 0 13.2 0Z" transform="translate(10.7998 8.80005)" fill="black"/>
+<path d="M2.4 18V2.4H14.4V0H2.4C1.08 0 0 1.08 0 2.4V18H2.4Z" transform="translate(6 4)" fill="black"/>
+</svg>

mean4thai/src/assets/icons/close.svg

+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 5H9V9H5V11H9V15H11V11H15V9H11V5ZM10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18Z" transform="translate(10.9707 -3.17157) rotate(45)" fill="#BDBDBD"/>
+</svg>

mean4thai/src/assets/icons/convertible.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#DFF0FE;" d="M 9.441406 19.5 L 8.511719 12.101563 C 8.484375 11.933594 8.523438 11.789063 8.617188 11.675781 C 8.714844 11.5625 8.851563 11.5 9 11.5 L 11.097656 11.5 C 11.316406 11.5 11.503906 11.636719 11.574219 11.84375 L 14.292969 19.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 11.097656 12 L 11.105469 12.019531 L 13.585938 19 L 9.882813 19 L 9 12 L 11.097656 12 M 11.097656 11 L 9 11 C 8.382813 11 7.910156 11.554688 8.015625 12.164063 L 9 20 L 15 20 L 12.046875 11.683594 C 11.910156 11.273438 11.527344 11 11.097656 11 Z "></path>
+<path style=" fill:#98CCFD;" d="M 3 27.5 C 1.621094 27.5 0.5 26.378906 0.5 25 L 0.5 19.167969 C 0.5 18.085938 1.1875 17.132813 2.214844 16.792969 L 7.976563 14.546875 L 11.882813 16.5 L 24.117188 16.5 L 28.03125 14.542969 L 37.773438 18.121094 C 38.8125 18.464844 39.5 19.417969 39.5 20.496094 L 39.5 25 C 39.5 26.378906 38.378906 27.5 37 27.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 28.0625 15.089844 L 37.628906 18.601563 C 38.449219 18.871094 39 19.636719 39 20.5 L 39 25 C 39 26.101563 38.101563 27 37 27 L 3 27 C 1.898438 27 1 26.101563 1 25 L 1 19.167969 C 1 18.304688 1.550781 17.539063 2.371094 17.269531 L 2.398438 17.261719 L 2.421875 17.25 L 7.949219 15.09375 L 11.554688 16.894531 L 11.765625 17 L 24.234375 17 L 24.445313 16.894531 L 28.0625 15.089844 M 28 14 L 24 16 L 12 16 L 8 14 L 2.058594 16.320313 C 0.828125 16.726563 0 17.875 0 19.167969 L 0 25 C 0 26.65625 1.34375 28 3 28 L 37 28 C 38.65625 28 40 26.65625 40 25 L 40 20.5 C 40 19.207031 39.171875 18.058594 37.945313 17.652344 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 35.5 26.5 C 35.5 28.710938 33.710938 30.5 31.5 30.5 C 29.289063 30.5 27.5 28.710938 27.5 26.5 C 27.5 24.289063 29.289063 22.5 31.5 22.5 C 33.710938 22.5 35.5 24.289063 35.5 26.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 31.5 23 C 33.429688 23 35 24.570313 35 26.5 C 35 28.429688 33.429688 30 31.5 30 C 29.570313 30 28 28.429688 28 26.5 C 28 24.570313 29.570313 23 31.5 23 M 31.5 22 C 29.015625 22 27 24.015625 27 26.5 C 27 28.984375 29.015625 31 31.5 31 C 33.984375 31 36 28.984375 36 26.5 C 36 24.015625 33.984375 22 31.5 22 Z "></path>
+<path style=" fill:#4788C7;" d="M 33 26.5 C 33 27.328125 32.328125 28 31.5 28 C 30.671875 28 30 27.328125 30 26.5 C 30 25.671875 30.671875 25 31.5 25 C 32.328125 25 33 25.671875 33 26.5 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 12.5 26.5 C 12.5 28.710938 10.710938 30.5 8.5 30.5 C 6.289063 30.5 4.5 28.710938 4.5 26.5 C 4.5 24.289063 6.289063 22.5 8.5 22.5 C 10.710938 22.5 12.5 24.289063 12.5 26.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 8.5 23 C 10.429688 23 12 24.570313 12 26.5 C 12 28.429688 10.429688 30 8.5 30 C 6.570313 30 5 28.429688 5 26.5 C 5 24.570313 6.570313 23 8.5 23 M 8.5 22 C 6.015625 22 4 24.015625 4 26.5 C 4 28.984375 6.015625 31 8.5 31 C 10.984375 31 13 28.984375 13 26.5 C 13 24.015625 10.984375 22 8.5 22 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 23.5 9.5 L 28 14.480469 "></path>
+<path style=" fill:#4788C7;" d="M 10 26.5 C 10 27.328125 9.328125 28 8.5 28 C 7.671875 28 7 27.328125 7 26.5 C 7 25.671875 7.671875 25 8.5 25 C 9.328125 25 10 25.671875 10 26.5 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 2.5 22 L 1 22 L 1 19 L 2.5 19 C 3.328125 19 4 19.671875 4 20.5 C 4 21.328125 3.328125 22 2.5 22 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 38.5 20 C 37.671875 20 37 20.671875 37 21.5 C 37 22.328125 37.671875 23 38.5 23 L 39 23 L 39 20.5 C 39 20.324219 38.964844 20.160156 38.921875 20 Z "></path>
+<path style=" fill:#4788C7;" d="M 20.5 20 L 18.5 20 C 18.222656 20 18 19.777344 18 19.5 C 18 19.222656 18.222656 19 18.5 19 L 20.5 19 C 20.777344 19 21 19.222656 21 19.5 C 21 19.777344 20.777344 20 20.5 20 Z "></path>
+</g>
+</svg>
\ No newline at end of file

mean4thai/src/assets/icons/delete.svg

+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.2727 20.7273H2.18182C0.981818 20.7273 0 19.7455 0 18.5455V0H17.4545V18.5455C17.4545 19.7455 16.4727 20.7273 15.2727 20.7273Z" transform="translate(7.18164 7.27271)" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M21.8182 0H0" transform="translate(5 7.27271)" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M0 3.27273V1.09091C0 0.436364 0.436364 0 1.09091 0H5.45455C6.10909 0 6.54545 0.436364 6.54545 1.09091V3.27273" transform="translate(12.6367 4)" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M0 12V0" transform="translate(15.9092 11.6364)" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M0 12V0" transform="translate(20.2725 11.6364)" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M0 12V0" transform="translate(11.5459 11.6364)" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
+</svg>

mean4thai/src/assets/icons/drone.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#4788C7;" d="M 8.5 3 C 8.222656 3 8 3.222656 8 3.5 L 8 9.5 C 8 9.777344 8.222656 10 8.5 10 C 8.777344 10 9 9.777344 9 9.5 L 9 3.5 C 9 3.222656 8.777344 3 8.5 3 Z "></path>
+<path style=" fill:#4788C7;" d="M 1.5 5 L 15.5 5 C 15.777344 5 16 4.777344 16 4.5 C 16 4.222656 15.777344 4 15.5 4 L 1.5 4 C 1.222656 4 1 4.222656 1 4.5 C 1 4.777344 1.222656 5 1.5 5 Z "></path>
+<path style=" fill:#4788C7;" d="M 31.5 3 C 31.222656 3 31 3.222656 31 3.5 L 31 9.5 C 31 9.777344 31.222656 10 31.5 10 C 31.777344 10 32 9.777344 32 9.5 L 32 3.5 C 32 3.222656 31.777344 3 31.5 3 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 4.5 36.5 L 4.5 29 C 4.5 21.585938 10.585938 16 18 16 L 22 16 C 29.414063 16 35.5 21.585938 35.5 29 L 35.5 36.5 "></path>
+<path style=" fill:#B6DCFE;" d="M 15.371094 19.5 C 14.285156 19.5 13.367188 18.722656 13.1875 17.648438 L 12.628906 13.023438 L 7.046875 12.503906 C 5.210938 12.351563 4.5 11.558594 4.5 9.683594 L 4.5 9.355469 C 4.5 8.882813 4.882813 8.5 5.355469 8.5 L 34.644531 8.5 C 35.117188 8.5 35.5 8.882813 35.5 9.355469 L 35.5 9.683594 C 35.5 11.558594 34.789063 12.347656 32.957031 12.503906 L 27.316406 13.027344 L 26.527344 17.648438 C 26.347656 18.722656 25.429688 19.5 24.34375 19.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 34.644531 9 C 34.839844 9 35 9.160156 35 9.355469 L 35 9.683594 C 35 11.308594 34.492188 11.871094 32.90625 12.003906 L 27.652344 12.496094 L 26.886719 12.566406 L 26.757813 13.320313 L 26.035156 17.566406 C 25.894531 18.398438 25.183594 19 24.34375 19 L 15.371094 19 C 14.53125 19 13.816406 18.398438 13.6875 17.613281 L 13.171875 13.363281 L 13.074219 12.5625 L 12.273438 12.488281 L 7.082031 12.003906 C 5.507813 11.871094 5 11.308594 5 9.683594 L 5 9.355469 C 5 9.160156 5.160156 9 5.355469 9 L 34.644531 9 M 34.644531 8 L 5.355469 8 C 4.605469 8 4 8.609375 4 9.355469 L 4 9.683594 C 4 11.800781 4.890625 12.824219 7 13 L 12.179688 13.484375 L 12.695313 17.730469 C 12.910156 19.039063 14.042969 20 15.371094 20 L 24.34375 20 C 25.671875 20 26.804688 19.039063 27.019531 17.730469 L 27.746094 13.492188 L 33 13 C 35.109375 12.824219 36 11.800781 36 9.683594 L 36 9.355469 C 36 8.609375 35.390625 8 34.644531 8 Z "></path>
+<path style=" fill:#4788C7;" d="M 24.5 5 L 38.5 5 C 38.777344 5 39 4.777344 39 4.5 C 39 4.222656 38.777344 4 38.5 4 L 24.5 4 C 24.222656 4 24 4.222656 24 4.5 C 24 4.777344 24.222656 5 24.5 5 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 27 9 L 30 9 L 30 11 L 27 11 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 10 9 L 13 9 L 13 11 L 10 11 Z "></path>
+</g>
+</svg>
\ No newline at end of file

mean4thai/src/assets/icons/fighter-plane.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#98CCFD;" d="M 13.5 9.5 L 13.5 6.5 L 21 6.5 C 21.726563 6.5 23.132813 7.304688 24.140625 7.996094 C 23.117188 8.691406 21.699219 9.5 21 9.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 21 7 C 21.4375 7 22.335938 7.4375 23.226563 7.996094 C 22.320313 8.554688 21.40625 9 21 9 L 14 9 L 14 7 L 21 7 M 21 6 C 19.632813 6 13 6 13 6 L 13 10 C 13 10 19.675781 10 21 10 C 22.324219 10 25 8 25 8 C 25 8 22.367188 6 21 6 Z "></path>
+<path style=" fill:#98CCFD;" d="M 13.5 33.5 L 13.5 30.5 L 21 30.5 C 21.726563 30.5 23.132813 31.304688 24.140625 31.996094 C 23.117188 32.691406 21.699219 33.5 21 33.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 21 31 C 21.4375 31 22.335938 31.4375 23.226563 31.996094 C 22.320313 32.554688 21.40625 33 21 33 L 14 33 L 14 31 L 21 31 M 21 30 C 19.632813 30 13 30 13 30 L 13 34 C 13 34 19.675781 34 21 34 C 22.324219 34 25 32 25 32 C 25 32 22.367188 30 21 30 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 1.691406 27.5 L 3.5 22.082031 L 3.5 17.917969 L 1.691406 12.5 L 3.792969 12.5 L 7.5 16.207031 L 7.5 23.792969 L 3.792969 27.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 3.585938 13 L 7 16.414063 L 7 23.585938 L 3.585938 27 L 2.386719 27 L 3.949219 22.316406 L 4 22.160156 L 4 17.839844 L 3.949219 17.683594 L 2.386719 13 L 3.585938 13 M 4 12 L 1 12 L 3 18 L 3 22 L 1 28 L 4 28 L 8 24 L 8 16 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 9.5 38.5 L 9.5 1.5 L 11.761719 1.5 L 23.5 16.175781 L 23.5 23.824219 L 11.761719 38.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 11.519531 2 L 23 16.351563 L 23 23.648438 L 11.519531 38 L 10 38 L 10 2 L 11.519531 2 M 12 1 L 9 1 L 9 39 L 12 39 L 24 24 L 24 16 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 6 23.5 C 4.621094 23.5 3.5 22.378906 3.5 21 L 3.5 19 C 3.5 17.621094 4.621094 16.5 6 16.5 L 27 16.5 C 34.503906 16.5 37.546875 19.121094 38.351563 19.996094 C 37.539063 20.867188 34.464844 23.5 27 23.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 27 17 C 33.453125 17 36.507813 19 37.632813 20 C 36.503906 21.003906 33.449219 23 27 23 L 6 23 C 4.898438 23 4 22.101563 4 21 L 4 19 C 4 17.898438 4.898438 17 6 17 L 27 17 M 27 16 L 6 16 C 4.34375 16 3 17.34375 3 19 L 3 21 C 3 22.65625 4.34375 24 6 24 L 27 24 C 36.332031 24 39 20 39 20 C 39 20 36.332031 16 27 16 Z "></path>
+<path style=" fill:#4788C7;" d="M 7 21 L 1 21 C 0.449219 21 0 20.550781 0 20 C 0 19.449219 0.449219 19 1 19 L 7 19 C 7.550781 19 8 19.449219 8 20 C 8 20.550781 7.550781 21 7 21 Z "></path>
+<path style=" fill:#4788C7;" d="M 14 2 L 10.667969 2 L 10.667969 1 L 13.332031 1 Z "></path>
+<path style=" fill:#4788C7;" d="M 14 38 L 10 38 L 10 39 L 13.332031 39 Z "></path>
+<path style=" fill:#4788C7;" d="M 29 21 L 27 21 C 26.449219 21 26 20.550781 26 20 C 26 19.449219 26.449219 19 27 19 L 29 19 C 29.550781 19 30 19.449219 30 20 C 30 20.550781 29.550781 21 29 21 Z "></path>
+<path style=" fill:#4788C7;" d="M 11.5 1 L 15.5 1 C 15.773438 1 16 1.226563 16 1.5 C 16 1.773438 15.773438 2 15.5 2 L 11.5 2 C 11.226563 2 11 1.773438 11 1.5 C 11 1.226563 11.226563 1 11.5 1 Z "></path>
+<path style=" fill:#4788C7;" d="M 13.5 38 L 15.5 38 C 15.773438 38 16 38.226563 16 38.5 C 16 38.773438 15.773438 39 15.5 39 L 13.5 39 C 13.226563 39 13 38.773438 13 38.5 C 13 38.226563 13.226563 38 13.5 38 Z "></path>
+</g>
+</svg>
\ No newline at end of file

mean4thai/src/assets/icons/fire-truck.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#4788C7;" d="M 23.53125 4.148438 L 27.21875 8.457031 L 1 15.746094 L 1 11.148438 L 23.53125 4.148438 M 23.863281 3 L 0 10.410156 L 0 17.0625 L 29 9 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 23.605469 3.847656 L 21.546875 10.03125 L 15.585938 6.386719 L 13.460938 12.421875 L 8.066406 8.707031 L 5.640625 14.746094 L 0.667969 10.902344 "></path>
+<path style=" fill:#98CCFD;" d="M 3 34.5 C 1.621094 34.5 0.5 33.378906 0.5 32 L 0.5 16.5 L 3.859375 16.5 L 8.5 19.28125 L 8.5 22.5 L 16.5 22.5 L 16.5 14 C 16.5 12.621094 17.621094 11.5 19 11.5 L 33.972656 11.5 C 34.96875 11.5 35.867188 12.089844 36.265625 13.003906 L 39.105469 19.191406 C 39.367188 19.792969 39.5 20.441406 39.5 21.109375 L 39.5 32 C 39.5 33.378906 38.378906 34.5 37 34.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 33.972656 12 C 34.769531 12 35.488281 12.472656 35.816406 13.21875 L 38.640625 19.382813 C 38.878906 19.929688 39 20.511719 39 21.109375 L 39 32 C 39 33.101563 38.101563 34 37 34 L 3 34 C 1.898438 34 1 33.101563 1 32 L 1 17 L 3.722656 17 L 8 19.566406 L 8 23 L 17 23 L 17 14 C 17 12.898438 17.898438 12 19 12 L 33.972656 12 M 33.972656 11 L 19 11 C 17.34375 11 16 12.34375 16 14 L 16 22 L 9 22 L 9 19 L 4 16 L 0 16 L 0 32 C 0 33.65625 1.34375 35 3 35 L 37 35 C 38.65625 35 40 33.65625 40 32 L 40 21.109375 C 40 20.378906 39.847656 19.652344 39.558594 18.980469 L 36.722656 12.804688 C 36.246094 11.707031 35.167969 11 33.972656 11 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 32 22.5 C 31.171875 22.5 30.5 21.828125 30.5 21 L 30.5 16 C 30.5 15.171875 31.171875 14.5 32 14.5 L 36.929688 14.5 L 39.105469 19.191406 C 39.367188 19.792969 39.5 20.441406 39.5 21.109375 L 39.5 22.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 36.609375 15 L 38.640625 19.382813 C 38.878906 19.929688 39 20.511719 39 21.109375 L 39 22 L 32 22 C 31.449219 22 31 21.550781 31 21 L 31 16 C 31 15.449219 31.449219 15 32 15 L 36.609375 15 M 37.25 14 L 32 14 C 30.894531 14 30 14.894531 30 16 L 30 21 C 30 22.105469 30.894531 23 32 23 L 40 23 L 40 21.109375 C 40 20.378906 39.847656 19.652344 39.558594 18.980469 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 35.5 33.5 C 35.5 35.710938 33.710938 37.5 31.5 37.5 C 29.289063 37.5 27.5 35.710938 27.5 33.5 C 27.5 31.289063 29.289063 29.5 31.5 29.5 C 33.710938 29.5 35.5 31.289063 35.5 33.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 31.5 30 C 33.429688 30 35 31.570313 35 33.5 C 35 35.429688 33.429688 37 31.5 37 C 29.570313 37 28 35.429688 28 33.5 C 28 31.570313 29.570313 30 31.5 30 M 31.5 29 C 29.015625 29 27 31.015625 27 33.5 C 27 35.984375 29.015625 38 31.5 38 C 33.984375 38 36 35.984375 36 33.5 C 36 31.015625 33.984375 29 31.5 29 Z "></path>
+<path style=" fill:#4788C7;" d="M 33 33.5 C 33 34.328125 32.328125 35 31.5 35 C 30.671875 35 30 34.328125 30 33.5 C 30 32.671875 30.671875 32 31.5 32 C 32.328125 32 33 32.671875 33 33.5 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 11.5 33.5 C 11.5 35.710938 9.710938 37.5 7.5 37.5 C 5.289063 37.5 3.5 35.710938 3.5 33.5 C 3.5 31.289063 5.289063 29.5 7.5 29.5 C 9.710938 29.5 11.5 31.289063 11.5 33.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 7.5 30 C 9.429688 30 11 31.570313 11 33.5 C 11 35.429688 9.429688 37 7.5 37 C 5.570313 37 4 35.429688 4 33.5 C 4 31.570313 5.570313 30 7.5 30 M 7.5 29 C 5.015625 29 3 31.015625 3 33.5 C 3 35.984375 5.015625 38 7.5 38 C 9.984375 38 12 35.984375 12 33.5 C 12 31.015625 9.984375 29 7.5 29 Z "></path>
+<path style=" fill:#4788C7;" d="M 9 33.5 C 9 34.328125 8.328125 35 7.5 35 C 6.671875 35 6 34.328125 6 33.5 C 6 32.671875 6.671875 32 7.5 32 C 8.328125 32 9 32.671875 9 33.5 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 22 22.5 C 21.171875 22.5 20.5 21.828125 20.5 21 L 20.5 16 C 20.5 15.171875 21.171875 14.5 22 14.5 L 26 14.5 C 26.828125 14.5 27.5 15.171875 27.5 16 L 27.5 21 C 27.5 21.828125 26.828125 22.5 26 22.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 26 15 C 26.550781 15 27 15.449219 27 16 L 27 21 C 27 21.550781 26.550781 22 26 22 L 22 22 C 21.449219 22 21 21.550781 21 21 L 21 16 C 21 15.449219 21.449219 15 22 15 L 26 15 M 26 14 L 22 14 C 20.894531 14 20 14.894531 20 16 L 20 21 C 20 22.105469 20.894531 23 22 23 L 26 23 C 27.105469 23 28 22.105469 28 21 L 28 16 C 28 14.894531 27.105469 14 26 14 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 1 25 L 39 25 L 39 27 L 1 27 Z "></path>
+</g>
+</svg>
\ No newline at end of file

mean4thai/src/assets/icons/horseback-riding.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#B6DCFE;" d="M 29.304688 37.5 L 27.367188 30.503906 L 26.570313 21.519531 L 28.792969 20.3125 L 29.5 30.035156 L 31.359375 37.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 28.351563 21.121094 L 29.003906 30.074219 L 29.007813 30.160156 L 29.027344 30.242188 L 30.71875 37 L 29.683594 37 L 27.871094 30.460938 L 27.097656 21.800781 L 28.351563 21.121094 M 29.234375 19.503906 L 26.042969 21.234375 L 26.882813 30.640625 L 28.921875 38 L 32 38 L 30 30 Z "></path>
+<path style=" fill:#4788C7;" d="M 29.523438 38 L 31.09375 38 C 31.054688 37.484375 30.699219 36.4375 30.625 36 L 29.015625 36 C 29.109375 36.4375 29.476563 37.484375 29.523438 38 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 3.386719 29.378906 C 2.234375 27.75 0.5 24.828125 0.5 22.042969 C 0.5 17.703125 2.378906 15.503906 6.085938 15.503906 C 7.683594 15.503906 9.226563 15.917969 10.089844 16.203125 L 9.789063 16.503906 C 8.246094 16.554688 6.953125 17.152344 5.9375 18.289063 C 3.40625 21.121094 3.269531 26.605469 3.386719 29.378906 Z "></path>
+<path style=" fill:#4788C7;" d="M 6.085938 16.003906 C 6.84375 16.003906 7.59375 16.101563 8.257813 16.234375 C 7.222656 16.53125 6.324219 17.105469 5.566406 17.953125 C 3.390625 20.390625 2.902344 24.644531 2.863281 27.65625 C 1.929688 26.082031 1 24.015625 1 22.042969 C 1 17.976563 2.664063 16.003906 6.085938 16.003906 M 6.085938 15.003906 C 3.15625 15.003906 0 16.328125 0 22.042969 C 0 26.425781 4 31 4 31 C 4 31 2.417969 17 10 17 L 11 16 C 11 16 8.628906 15.003906 6.085938 15.003906 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 12.441406 37.5 L 11.257813 28.144531 C 11.496094 27.535156 12.492188 24.835938 12.855469 21.832031 L 16.148438 22.539063 C 15.964844 25.523438 13.804688 27.617188 13.78125 27.640625 L 13.605469 27.808594 L 14.574219 37.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 13.277344 22.433594 L 15.605469 22.933594 C 15.273438 25.484375 13.457031 27.257813 13.4375 27.273438 L 13.082031 27.613281 L 13.132813 28.101563 L 14.019531 37 L 12.882813 37 L 11.769531 28.207031 C 12.054688 27.449219 12.886719 25.109375 13.277344 22.433594 M 12.414063 21.222656 C 12.09375 24.757813 10.746094 28.078125 10.746094 28.078125 L 12 38 L 15.125 38 L 14.125 28 C 14.125 28 16.660156 25.601563 16.660156 22.136719 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 23.269531 38.5 L 22.335938 31.011719 L 23 27.28125 L 22.355469 27.332031 C 22.011719 27.359375 21.671875 27.371094 21.335938 27.371094 C 16.449219 27.371094 12.445313 24.617188 12.40625 24.589844 L 11.890625 24.230469 L 11.65625 24.816406 C 10.394531 27.96875 8.78125 29.632813 8.765625 29.652344 L 8.640625 29.773438 L 7.671875 38.5 L 5.542969 38.5 L 6.320313 29.367188 L 7.546875 24.890625 L 7.394531 24.691406 C 7.375 24.667969 5.5 22.230469 5.5 20 C 5.5 15.203125 8.464844 13.5 11 13.5 C 12.238281 13.5 13.609375 14.003906 14.9375 14.488281 C 16.289063 14.984375 17.691406 15.5 19 15.5 C 20.921875 15.5 22.070313 15.113281 22.503906 14.316406 C 22.789063 13.796875 22.671875 13.238281 22.511719 12.894531 C 22.628906 11.746094 23.59375 4.5 29.546875 4.5 C 31.308594 4.5 32.78125 6.316406 32.796875 6.335938 L 37.367188 12.128906 C 37.542969 12.347656 37.554688 12.804688 37.324219 13.035156 L 36.332031 13.941406 C 35.839844 13.714844 34.859375 13.335938 33.804688 13.335938 L 32.90625 13.34375 C 31.910156 13.34375 31.257813 13.222656 30.636719 12.566406 L 30.074219 11.980469 L 29.800781 12.742188 C 28.753906 15.671875 29.066406 17.554688 29.347656 19.21875 C 29.480469 20.023438 29.609375 20.78125 29.554688 21.578125 C 29.410156 23.800781 28.183594 26.195313 26.113281 26.476563 L 25.78125 26.523438 L 24.636719 30.898438 L 25.445313 38.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 29.546875 5 C 30.804688 5 32.039063 6.191406 32.402344 6.644531 L 36.976563 12.441406 C 37.011719 12.492188 37.007813 12.640625 37.003906 12.648438 L 36.234375 13.355469 C 35.65625 13.117188 34.769531 12.835938 33.804688 12.835938 C 33.644531 12.835938 33.484375 12.839844 33.328125 12.84375 C 33.183594 12.84375 33.042969 12.847656 32.90625 12.847656 C 32.011719 12.847656 31.5 12.753906 30.996094 12.222656 L 29.878906 11.046875 L 29.332031 12.574219 C 28.238281 15.625 28.578125 17.660156 28.851563 19.300781 C 28.988281 20.109375 29.105469 20.804688 29.058594 21.546875 C 28.929688 23.515625 27.832031 25.738281 26.046875 25.984375 L 25.382813 26.074219 L 25.214844 26.722656 L 24.179688 30.6875 L 24.132813 30.863281 L 24.152344 31.046875 L 24.886719 38 L 23.710938 38 L 22.839844 31.027344 L 23.378906 28.003906 L 23.605469 26.730469 L 22.3125 26.832031 C 21.992188 26.859375 21.660156 26.871094 21.335938 26.871094 C 16.617188 26.871094 12.730469 24.207031 12.691406 24.179688 L 11.660156 23.457031 L 11.191406 24.628906 C 9.972656 27.675781 8.421875 29.285156 8.410156 29.296875 L 8.164063 29.542969 L 8.125 29.890625 L 7.226563 38 L 6.089844 38 L 6.8125 29.5 L 7.964844 25.261719 L 8.097656 24.777344 L 7.789063 24.386719 C 7.289063 23.746094 6 21.714844 6 20 C 6 15.570313 8.691406 14 11 14 C 12.148438 14 13.476563 14.488281 14.765625 14.960938 C 16.160156 15.472656 17.601563 16 19 16 C 21.121094 16 22.410156 15.527344 22.941406 14.558594 C 23.273438 13.953125 23.214844 13.304688 23.023438 12.816406 C 23.183594 11.414063 24.214844 5 29.546875 5 M 29.546875 4 C 22.667969 4 22 13 22 13 C 22 13 23.277344 15 19 15 C 16.523438 15 13.613281 13 11 13 C 8.210938 13 5 14.941406 5 20 C 5 22.433594 7 25 7 25 L 5.824219 29.324219 L 5 39 L 8.121094 39 L 9.121094 30 C 9.121094 30 10.800781 28.300781 12.121094 25 C 12.121094 25 16.222656 27.871094 21.335938 27.871094 C 21.683594 27.871094 22.035156 27.859375 22.394531 27.828125 L 21.828125 31 L 22.828125 39 L 26 39 L 25.144531 30.9375 L 26.179688 26.972656 C 28.574219 26.644531 29.902344 23.945313 30.054688 21.609375 C 30.21875 19.085938 28.75 17.152344 30.269531 12.910156 C 31.066406 13.746094 31.933594 13.84375 32.902344 13.84375 C 33.195313 13.84375 33.496094 13.835938 33.804688 13.835938 C 35.164063 13.835938 36.414063 14.542969 36.414063 14.542969 L 37.679688 13.386719 C 38.089844 12.976563 38.089844 12.234375 37.761719 11.820313 L 33.1875 6.023438 C 33.1875 6.023438 31.578125 4 29.546875 4 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 21.175781 14.898438 C 22.035156 14.097656 22.429688 12.585938 22.867188 10.902344 C 23.765625 7.464844 24.785156 3.566406 29.867188 3.5 L 30.917969 4.105469 L 31.144531 4.015625 C 31.535156 3.855469 31.882813 3.777344 32.183594 3.777344 C 32.75 3.777344 33.09375 4.0625 33.453125 4.363281 C 33.703125 4.566406 33.976563 4.796875 34.320313 4.898438 C 33.972656 5.5625 33.226563 6.027344 32.410156 6.027344 C 32.285156 6.027344 32.15625 6.015625 32.027344 5.996094 C 31.753906 5.976563 31.546875 5.972656 31.351563 5.972656 C 27.5625 5.972656 26.828125 7.949219 26.117188 9.863281 C 25.632813 11.167969 25.128906 12.515625 23.695313 13.601563 C 22.8125 14.273438 21.855469 14.761719 21.175781 14.898438 Z "></path>
+<path style=" fill:#4788C7;" d="M 29.738281 4.003906 L 30.457031 4.417969 L 30.878906 4.660156 L 31.328125 4.476563 C 31.660156 4.34375 31.945313 4.277344 32.183594 4.277344 C 32.550781 4.277344 32.761719 4.4375 33.132813 4.746094 C 33.257813 4.847656 33.398438 4.964844 33.558594 5.074219 C 33.273438 5.339844 32.875 5.527344 32.410156 5.527344 C 32.3125 5.527344 32.210938 5.519531 32.113281 5.503906 L 32.050781 5.492188 L 31.988281 5.488281 C 31.769531 5.476563 31.558594 5.472656 31.355469 5.472656 C 27.21875 5.472656 26.382813 7.710938 25.648438 9.6875 C 25.167969 10.980469 24.710938 12.203125 23.394531 13.203125 C 23.082031 13.441406 22.769531 13.644531 22.476563 13.816406 C 22.835938 12.996094 23.089844 12.027344 23.351563 11.027344 C 24.238281 7.636719 25.152344 4.132813 29.738281 4.003906 M 30 3 C 20.988281 3 23.578125 14.25 20 14.964844 C 20.109375 15.296875 20.402344 15.441406 20.808594 15.441406 C 21.613281 15.441406 22.859375 14.867188 24 14 C 27.804688 11.109375 25.550781 6.472656 31.355469 6.472656 C 31.542969 6.472656 31.738281 6.476563 31.941406 6.488281 C 32.101563 6.515625 32.257813 6.527344 32.410156 6.527344 C 33.746094 6.527344 34.835938 5.535156 35 4.390625 C 34.886719 4.433594 34.78125 4.449219 34.6875 4.449219 C 33.898438 4.449219 33.507813 3.277344 32.183594 3.277344 C 31.84375 3.277344 31.441406 3.355469 30.957031 3.550781 Z "></path>
+<path style="fill:#DFF0FE;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 31.414063 6.496094 L 30.21875 3.128906 C 30.21875 3.128906 27.878906 4.214844 28.585938 7.367188 "></path>
+<path style=" fill:#4788C7;" d="M 23.683594 39 L 24.984375 39 C 24.949219 38.484375 24.910156 37.4375 24.847656 37 L 23.515625 37 C 23.59375 37.4375 23.644531 38.484375 23.683594 39 Z "></path>
+<path style=" fill:#4788C7;" d="M 5.878906 39 L 8.007813 39 C 8.09375 38.484375 8.269531 37.4375 8.304688 37 L 6.144531 37 C 6.121094 37.4375 5.957031 38.484375 5.878906 39 Z "></path>
+<path style=" fill:#4788C7;" d="M 12.84375 38 L 14.101563 38 C 14.054688 37.484375 14.050781 36.4375 13.972656 36 L 12.683594 36 C 12.773438 36.4375 12.792969 37.484375 12.84375 38 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 21.5 3 C 21.5 4.378906 20.378906 5.5 19 5.5 C 17.621094 5.5 16.5 4.378906 16.5 3 C 16.5 1.621094 17.621094 0.5 19 0.5 C 20.378906 0.5 21.5 1.621094 21.5 3 Z "></path>
+<path style=" fill:#4788C7;" d="M 19 1 C 20.101563 1 21 1.898438 21 3 C 21 4.101563 20.101563 5 19 5 C 17.898438 5 17 4.101563 17 3 C 17 1.898438 17.898438 1 19 1 M 19 0 C 17.34375 0 16 1.34375 16 3 C 16 4.65625 17.34375 6 19 6 C 20.65625 6 22 4.65625 22 3 C 22 1.34375 20.65625 0 19 0 Z "></path>
+<path style="fill:#98CCFD;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 15.058594 8.34375 L 13.558594 14.808594 C 13.386719 15.535156 13.726563 16.285156 14.386719 16.632813 L 18.054688 18.59375 L 17.582031 22.820313 C 17.488281 23.625 18.054688 24.355469 18.855469 24.460938 C 19.652344 24.566406 20.386719 24.015625 20.511719 23.222656 L 21.265625 17.886719 C 21.363281 17.246094 21.050781 16.613281 20.484375 16.304688 L 17.992188 14.9375 L 18.871094 10.886719 L 23.414063 12.101563 C 24.203125 12.292969 25.007813 11.835938 25.246094 11.058594 C 25.5 10.234375 25.03125 9.367188 24.207031 9.128906 L 17.261719 7.066406 C 16.296875 6.785156 15.292969 7.367188 15.058594 8.34375 Z "></path>
+</g>
+</svg>
\ No newline at end of file

mean4thai/src/assets/icons/motorcycle.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#98CCFD;" d="M 28.460938 14.5 C 27.648438 14.5 26.984375 13.839844 26.984375 13.023438 C 26.984375 12.160156 27.648438 11.5 28.460938 11.5 L 30.5 11.5 L 30.5 14.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 30 12 L 30 14 L 28.460938 14 C 27.921875 14 27.484375 13.5625 27.484375 13.027344 L 27.484375 12.976563 C 27.484375 12.4375 27.921875 12 28.460938 12 L 30 12 M 31 11 L 28.460938 11 C 27.371094 11 26.484375 11.882813 26.484375 12.972656 L 26.484375 13.023438 C 26.484375 14.113281 27.371094 15 28.460938 15 L 31 15 Z "></path>
+<path style=" fill:#98CCFD;" d="M 32.5 21 C 34.980469 21 37 23.019531 37 25.5 C 37 27.980469 34.980469 30 32.5 30 C 30.019531 30 28 27.980469 28 25.5 C 28 23.019531 30.019531 21 32.5 21 M 32.5 18 C 28.359375 18 25 21.359375 25 25.5 C 25 29.640625 28.359375 33 32.5 33 C 36.640625 33 40 29.640625 40 25.5 C 40 21.359375 36.640625 18 32.5 18 Z "></path>
+<path style=" fill:#4788C7;" d="M 32.5 19 C 36.085938 19 39 21.914063 39 25.5 C 39 29.085938 36.085938 32 32.5 32 C 28.914063 32 26 29.085938 26 25.5 C 26 21.914063 28.914063 19 32.5 19 M 32.5 18 C 28.359375 18 25 21.359375 25 25.5 C 25 29.640625 28.359375 33 32.5 33 C 36.640625 33 40 29.640625 40 25.5 C 40 21.359375 36.640625 18 32.5 18 Z "></path>
+<path style=" fill:#98CCFD;" d="M 7.5 21 C 9.980469 21 12 23.019531 12 25.5 C 12 27.980469 9.980469 30 7.5 30 C 5.019531 30 3 27.980469 3 25.5 C 3 23.019531 5.019531 21 7.5 21 M 7.5 18 C 3.359375 18 0 21.359375 0 25.5 C 0 29.640625 3.359375 33 7.5 33 C 11.640625 33 15 29.640625 15 25.5 C 15 21.359375 11.640625 18 7.5 18 Z "></path>
+<path style=" fill:#4788C7;" d="M 7.5 19 C 11.085938 19 14 21.914063 14 25.5 C 14 29.085938 11.085938 32 7.5 32 C 3.914063 32 1 29.085938 1 25.5 C 1 21.914063 3.914063 19 7.5 19 M 7.5 18 C 3.359375 18 0 21.359375 0 25.5 C 0 29.640625 3.359375 33 7.5 33 C 11.640625 33 15 29.640625 15 25.5 C 15 21.359375 11.640625 18 7.5 18 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 9.359375 18.832031 L 6.019531 14.5 L 11.351563 14.5 C 12.179688 14.5 12.921875 14.960938 13.289063 15.695313 L 14.859375 18.832031 Z "></path>
+<path style=" fill:#4788C7;" d="M 11.351563 15 C 11.988281 15 12.558594 15.351563 12.84375 15.921875 L 14.050781 18.332031 L 9.605469 18.332031 L 7.035156 15 L 11.351563 15 M 11.351563 14 L 5 14 L 9.113281 19.332031 L 15.664063 19.332031 L 13.734375 15.472656 C 13.285156 14.570313 12.363281 14 11.351563 14 Z "></path>
+<path style=" fill:#4788C7;" d="M 34.5 25.5 C 34.5 26.605469 33.605469 27.5 32.5 27.5 C 31.394531 27.5 30.5 26.605469 30.5 25.5 C 30.5 24.394531 31.394531 23.5 32.5 23.5 C 33.605469 23.5 34.5 24.394531 34.5 25.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 9.5 25.5 C 9.5 26.605469 8.605469 27.5 7.5 27.5 C 6.394531 27.5 5.5 26.605469 5.5 25.5 C 5.5 24.394531 6.394531 23.5 7.5 23.5 C 8.605469 23.5 9.5 24.394531 9.5 25.5 Z "></path>
+<path style=" fill:#98CCFD;" d="M 9.5 24.5 L 9.5 22 C 9.5 21.941406 9.5 20.484375 8.261719 19.230469 C 7.164063 18.125 5.480469 17.542969 3.25 17.503906 L 1 14.5 L 5 14.5 C 7.664063 14.5 8.707031 15.503906 9.914063 16.671875 C 10.160156 16.902344 10.40625 17.140625 10.667969 17.375 L 10.8125 17.5 L 17.34375 17.5 L 18.082031 15.789063 C 18.683594 14.398438 20.054688 13.5 21.566406 13.5 L 27.085938 13.5 C 27.222656 14.101563 27.515625 15.269531 27.878906 16.265625 C 27.304688 18.15625 25.140625 23.5 19 23.5 L 18.882813 23.5 L 16.882813 24.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 26.6875 14 C 26.839844 14.613281 27.070313 15.484375 27.347656 16.277344 C 26.738281 18.195313 24.644531 23 19 23 L 18.765625 23 L 16.765625 24 L 10 24 L 10 22.011719 C 10.003906 21.835938 9.980469 20.253906 8.617188 18.878906 C 7.46875 17.71875 5.75 17.089844 3.507813 17.007813 L 2 15 L 5 15 C 7.460938 15 8.390625 15.894531 9.566406 17.027344 C 9.816406 17.269531 10.066406 17.511719 10.335938 17.746094 L 10.621094 18 L 17.671875 18 L 17.933594 17.398438 L 18.539063 15.988281 C 19.0625 14.78125 20.25 14 21.566406 14 L 26.6875 14 M 27.484375 13 L 21.566406 13 C 19.851563 13 18.304688 14.019531 17.621094 15.59375 L 17.015625 17 L 11 17 C 9.40625 15.589844 8.417969 14 5 14 C 3.050781 14 0 14 0 14 L 3 18 C 9.042969 18 9 22 9 22 L 9 25 L 17 25 L 19 24 C 26.125 24 28.148438 17.136719 28.402344 16.246094 C 27.878906 14.867188 27.484375 13 27.484375 13 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 32.5 25.5 C 27.566406 18.980469 26.507813 10.921875 26.15625 8.378906 C 26.089844 7.882813 25.5 7.5 25 7.5 L 20.105469 7.5 "></path>
+<path style=" fill:#4788C7;" d="M 23 7 L 20 7 C 19.449219 7 19 7.449219 19 8 C 19 8.550781 19.449219 9 20 9 L 22 9 C 22.550781 9 23 8.550781 23 8 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 17.5 17 L 17.5 25 "></path>
+<path style=" fill:#DFF0FE;" d="M 5.5 27.5 L 5.5 24.5 L 15 24.5 C 15.828125 24.5 16.5 23.828125 16.5 23 L 16.5 22 C 16.5 21.171875 17.171875 20.5 18 20.5 C 18.828125 20.5 19.5 21.171875 19.5 22 L 19.5 23 C 19.5 25.480469 17.480469 27.5 15 27.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 18 21 C 18.550781 21 19 21.449219 19 22 L 19 23 C 19 25.207031 17.207031 27 15 27 L 6 27 L 6 25 L 15 25 C 16.101563 25 17 24.101563 17 23 L 17 22 C 17 21.449219 17.449219 21 18 21 M 18 20 C 16.894531 20 16 20.894531 16 22 L 16 23 C 16 23.550781 15.550781 24 15 24 L 5 24 L 5 28 L 15 28 C 17.761719 28 20 25.761719 20 23 L 20 22 C 20 20.894531 19.105469 20 18 20 Z "></path>
+</g>
+</svg>
\ No newline at end of file

mean4thai/src/assets/icons/railcar.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#4788C7;" d="M 11 10 L 6 10 L 6 7 C 6 6.449219 6.449219 6 7 6 L 10 6 C 10.550781 6 11 6.449219 11 7 Z "></path>
+<path style=" fill:#4788C7;" d="M 34 10 L 29 10 L 29 7 C 29 6.449219 29.449219 6 30 6 L 33 6 C 33.550781 6 34 6.449219 34 7 Z "></path>
+<path style=" fill:#4788C7;" d="M 5.332031 27 L 34.664063 27 L 34.664063 31 L 5.332031 31 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 37.5 30.5 C 37.5 32.15625 36.15625 33.5 34.5 33.5 C 32.84375 33.5 31.5 32.15625 31.5 30.5 C 31.5 28.84375 32.84375 27.5 34.5 27.5 C 36.15625 27.5 37.5 28.84375 37.5 30.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 34.5 28 C 35.878906 28 37 29.121094 37 30.5 C 37 31.878906 35.878906 33 34.5 33 C 33.121094 33 32 31.878906 32 30.5 C 32 29.121094 33.121094 28 34.5 28 M 34.5 27 C 32.566406 27 31 28.566406 31 30.5 C 31 32.433594 32.566406 34 34.5 34 C 36.433594 34 38 32.433594 38 30.5 C 38 28.566406 36.433594 27 34.5 27 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 30.5 30.5 C 30.5 32.15625 29.15625 33.5 27.5 33.5 C 25.84375 33.5 24.5 32.15625 24.5 30.5 C 24.5 28.84375 25.84375 27.5 27.5 27.5 C 29.15625 27.5 30.5 28.84375 30.5 30.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 27.5 28 C 28.878906 28 30 29.121094 30 30.5 C 30 31.878906 28.878906 33 27.5 33 C 26.121094 33 25 31.878906 25 30.5 C 25 29.121094 26.121094 28 27.5 28 M 27.5 27 C 25.566406 27 24 28.566406 24 30.5 C 24 32.433594 25.566406 34 27.5 34 C 29.433594 34 31 32.433594 31 30.5 C 31 28.566406 29.433594 27 27.5 27 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 15.5 30.5 C 15.5 32.15625 14.15625 33.5 12.5 33.5 C 10.84375 33.5 9.5 32.15625 9.5 30.5 C 9.5 28.84375 10.84375 27.5 12.5 27.5 C 14.15625 27.5 15.5 28.84375 15.5 30.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 12.5 28 C 13.878906 28 15 29.121094 15 30.5 C 15 31.878906 13.878906 33 12.5 33 C 11.121094 33 10 31.878906 10 30.5 C 10 29.121094 11.121094 28 12.5 28 M 12.5 27 C 10.566406 27 9 28.566406 9 30.5 C 9 32.433594 10.566406 34 12.5 34 C 14.433594 34 16 32.433594 16 30.5 C 16 28.566406 14.433594 27 12.5 27 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 8.5 30.5 C 8.5 32.15625 7.15625 33.5 5.5 33.5 C 3.84375 33.5 2.5 32.15625 2.5 30.5 C 2.5 28.84375 3.84375 27.5 5.5 27.5 C 7.15625 27.5 8.5 28.84375 8.5 30.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 5.5 28 C 6.878906 28 8 29.121094 8 30.5 C 8 31.878906 6.878906 33 5.5 33 C 4.121094 33 3 31.878906 3 30.5 C 3 29.121094 4.121094 28 5.5 28 M 5.5 27 C 3.566406 27 2 28.566406 2 30.5 C 2 32.433594 3.566406 34 5.5 34 C 7.433594 34 9 32.433594 9 30.5 C 9 28.566406 7.433594 27 5.5 27 Z "></path>
+<path style=" fill:#98CCFD;" d="M 1 28.5 C 0.722656 28.5 0.5 28.273438 0.5 28 L 0.5 11 C 0.5 9.070313 2.070313 7.5 4 7.5 L 36 7.5 C 37.929688 7.5 39.5 9.070313 39.5 11 L 39.5 28 C 39.5 28.273438 39.277344 28.5 39 28.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 36 8 C 37.652344 8 39 9.347656 39 11 L 39 28 L 1 28 L 1 11 C 1 9.347656 2.347656 8 4 8 L 36 8 M 36 7 L 4 7 C 1.789063 7 0 8.789063 0 11 L 0 28 C 0 28.550781 0.449219 29 1 29 L 39 29 C 39.550781 29 40 28.550781 40 28 L 40 11 C 40 8.789063 38.210938 7 36 7 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 30 20.5 C 29.171875 20.5 28.5 19.828125 28.5 19 L 28.5 13 C 28.5 12.171875 29.171875 11.5 30 11.5 L 34 11.5 C 34.828125 11.5 35.5 12.171875 35.5 13 L 35.5 19 C 35.5 19.828125 34.828125 20.5 34 20.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 34 12 C 34.550781 12 35 12.449219 35 13 L 35 19 C 35 19.550781 34.550781 20 34 20 L 30 20 C 29.449219 20 29 19.550781 29 19 L 29 13 C 29 12.449219 29.449219 12 30 12 L 34 12 M 34 11 L 30 11 C 28.894531 11 28 11.894531 28 13 L 28 19 C 28 20.105469 28.894531 21 30 21 L 34 21 C 35.105469 21 36 20.105469 36 19 L 36 13 C 36 11.894531 35.105469 11 34 11 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 23 20.5 C 22.171875 20.5 21.5 19.828125 21.5 19 L 21.5 13 C 21.5 12.171875 22.171875 11.5 23 11.5 L 27 11.5 C 27.828125 11.5 28.5 12.171875 28.5 13 L 28.5 19 C 28.5 19.828125 27.828125 20.5 27 20.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 27 12 C 27.550781 12 28 12.449219 28 13 L 28 19 C 28 19.550781 27.550781 20 27 20 L 23 20 C 22.449219 20 22 19.550781 22 19 L 22 13 C 22 12.449219 22.449219 12 23 12 L 27 12 M 27 11 L 23 11 C 21.894531 11 21 11.894531 21 13 L 21 19 C 21 20.105469 21.894531 21 23 21 L 27 21 C 28.105469 21 29 20.105469 29 19 L 29 13 C 29 11.894531 28.105469 11 27 11 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 6 20.5 C 5.171875 20.5 4.5 19.828125 4.5 19 L 4.5 13 C 4.5 12.171875 5.171875 11.5 6 11.5 L 10 11.5 C 10.828125 11.5 11.5 12.171875 11.5 13 L 11.5 19 C 11.5 19.828125 10.828125 20.5 10 20.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 10 12 C 10.550781 12 11 12.449219 11 13 L 11 19 C 11 19.550781 10.550781 20 10 20 L 6 20 C 5.449219 20 5 19.550781 5 19 L 5 13 C 5 12.449219 5.449219 12 6 12 L 10 12 M 10 11 L 6 11 C 4.894531 11 4 11.894531 4 13 L 4 19 C 4 20.105469 4.894531 21 6 21 L 10 21 C 11.105469 21 12 20.105469 12 19 L 12 13 C 12 11.894531 11.105469 11 10 11 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 13 20.5 C 12.171875 20.5 11.5 19.828125 11.5 19 L 11.5 13 C 11.5 12.171875 12.171875 11.5 13 11.5 L 17 11.5 C 17.828125 11.5 18.5 12.171875 18.5 13 L 18.5 19 C 18.5 19.828125 17.828125 20.5 17 20.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 17 12 C 17.550781 12 18 12.449219 18 13 L 18 19 C 18 19.550781 17.550781 20 17 20 L 13 20 C 12.449219 20 12 19.550781 12 19 L 12 13 C 12 12.449219 12.449219 12 13 12 L 17 12 M 17 11 L 13 11 C 11.894531 11 11 11.894531 11 13 L 11 19 C 11 20.105469 11.894531 21 13 21 L 17 21 C 18.105469 21 19 20.105469 19 19 L 19 13 C 19 11.894531 18.105469 11 17 11 Z "></path>
+<path style=" fill:#4788C7;" d="M 35.5 25 L 4.5 25 C 4.226563 25 4 24.773438 4 24.5 C 4 24.226563 4.226563 24 4.5 24 L 35.5 24 C 35.773438 24 36 24.226563 36 24.5 C 36 24.773438 35.773438 25 35.5 25 Z "></path>
+</g>
+</svg>
\ No newline at end of file

mean4thai/src/assets/icons/railroad-train.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#4788C7;" d="M 7.90625 40 C 8.199219 40 8.476563 39.859375 8.644531 39.621094 L 13.375 33 L 11.144531 33 L 7.171875 38.566406 C 6.742188 39.164063 7.171875 40 7.90625 40 Z "></path>
+<path style=" fill:#4788C7;" d="M 28.855469 33 L 26.625 33 L 31.355469 39.621094 C 31.523438 39.859375 31.800781 40 32.09375 40 C 32.828125 40 33.257813 39.164063 32.828125 38.566406 Z "></path>
+<path style=" fill:#98CCFD;" d="M 10 36.5 C 7.519531 36.5 5.5 34.480469 5.5 32 L 5.5 9 C 5.5 6.519531 7.519531 4.5 10 4.5 L 15.75 4.5 L 15.878906 4.199219 C 16.597656 2.558594 18.214844 1.5 20 1.5 C 21.785156 1.5 23.402344 2.558594 24.121094 4.199219 L 24.25 4.5 L 30 4.5 C 32.480469 4.5 34.5 6.519531 34.5 9 L 34.5 32 C 34.5 34.480469 32.480469 36.5 30 36.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 20 2 C 21.585938 2 23.023438 2.941406 23.660156 4.402344 L 23.925781 5 L 30 5 C 32.207031 5 34 6.792969 34 9 L 34 32 C 34 34.207031 32.207031 36 30 36 L 10 36 C 7.792969 36 6 34.207031 6 32 L 6 9 C 6 6.792969 7.792969 5 10 5 L 16.074219 5 L 16.339844 4.402344 C 16.976563 2.941406 18.414063 2 20 2 M 20 1 C 17.949219 1 16.195313 2.234375 15.421875 4 L 10 4 C 7.238281 4 5 6.238281 5 9 L 5 32 C 5 34.761719 7.238281 37 10 37 L 30 37 C 32.761719 37 35 34.761719 35 32 L 35 9 C 35 6.238281 32.761719 4 30 4 L 24.578125 4 C 23.804688 2.234375 22.050781 1 20 1 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 11 23.5 C 9.621094 23.5 8.5 22.378906 8.5 21 L 8.5 13 C 8.5 11.621094 9.621094 10.5 11 10.5 L 18.5 10.5 L 18.5 23.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 18 11 L 18 23 L 11 23 C 9.898438 23 9 22.101563 9 21 L 9 13 C 9 11.898438 9.898438 11 11 11 L 18 11 M 19 10 L 11 10 C 9.34375 10 8 11.34375 8 13 L 8 21 C 8 22.65625 9.34375 24 11 24 L 19 24 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 21.5 23.5 L 21.5 10.5 L 29 10.5 C 30.378906 10.5 31.5 11.621094 31.5 13 L 31.5 21 C 31.5 22.378906 30.378906 23.5 29 23.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 29 11 C 30.101563 11 31 11.898438 31 13 L 31 21 C 31 22.101563 30.101563 23 29 23 L 22 23 L 22 11 L 29 11 M 29 10 L 21 10 L 21 24 L 29 24 C 30.65625 24 32 22.65625 32 21 L 32 13 C 32 11.34375 30.65625 10 29 10 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 22 6 C 22 7.105469 21.105469 8 20 8 C 18.894531 8 18 7.105469 18 6 C 18 4.894531 18.894531 4 20 4 C 21.105469 4 22 4.894531 22 6 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 31 29.5 C 31 30.878906 29.878906 32 28.5 32 C 27.121094 32 26 30.878906 26 29.5 C 26 28.121094 27.121094 27 28.5 27 C 29.878906 27 31 28.121094 31 29.5 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 14 29.5 C 14 30.878906 12.878906 32 11.5 32 C 10.121094 32 9 30.878906 9 29.5 C 9 28.121094 10.121094 27 11.5 27 C 12.878906 27 14 28.121094 14 29.5 Z "></path>
+</g>
+</svg>
\ No newline at end of file

mean4thai/src/assets/icons/rocket-boot.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#DFF0FE;" d="M 4.5 31.5 L 4.5 5.347656 L 12.089844 2.5 L 20.5625 2.5 L 22.542969 17.34375 L 35.128906 22.949219 C 37.179688 23.808594 38.5 25.785156 38.5 28 L 38.5 31.523438 Z "></path>
+<path style=" fill:#4788C7;" d="M 20.125 3 L 22.007813 17.132813 L 22.082031 17.6875 L 22.59375 17.914063 L 34.945313 23.417969 C 36.800781 24.191406 38 25.988281 38 28 L 38 31.023438 L 5 31 L 5 5.691406 L 12.179688 3 L 20.125 3 M 21 2 L 12 2 L 4 5 L 4 32 L 39 32.023438 L 39 28 C 39 25.59375 37.550781 23.421875 35.328125 22.492188 L 23 17 Z "></path>
+<path style=" fill:#98CCFD;" d="M 4 18 L 13.585938 18 C 15.925781 18 18.113281 19.171875 19.414063 21.121094 L 26 31 L 26 32 L 4 32 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 17 25 C 17 27.210938 15.210938 29 13 29 C 10.789063 29 9 27.210938 9 25 C 9 22.789063 10.789063 21 13 21 C 15.210938 21 17 22.789063 17 25 Z "></path>
+<path style=" fill:#4788C7;" d="M 14 25 C 14 25.550781 13.550781 26 13 26 C 12.449219 26 12 25.550781 12 25 C 12 24.449219 12.449219 24 13 24 C 13.550781 24 14 24.449219 14 25 Z "></path>
+<path style=" fill:#98CCFD;" d="M 4.5 31.5 L 39.5 31.5 L 39.5 34.5 L 4.5 34.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 39 32 L 39 34 L 5 34 L 5 32 L 39 32 M 40 31 L 4 31 L 4 35 L 40 35 Z "></path>
+<path style=" fill:#4788C7;" d="M 21 9 L 12.5 9 C 12.222656 9 12 8.777344 12 8.5 C 12 8.222656 12.222656 8 12.5 8 L 21 8 Z "></path>
+<path style=" fill:#4788C7;" d="M 22 12 L 12.5 12 C 12.222656 12 12 11.777344 12 11.5 C 12 11.222656 12.222656 11 12.5 11 L 22 11 Z "></path>
+<path style=" fill:#4788C7;" d="M 22 15 L 12.5 15 C 12.222656 15 12 14.777344 12 14.5 C 12 14.222656 12.222656 14 12.5 14 L 22 14 Z "></path>
+<path style=" fill:#4788C7;" d="M 3.5 21.832031 L 4.5 21.832031 L 4.5 25.832031 L 3.5 25.832031 Z "></path>
+<path style=" fill:#4788C7;" d="M 4 22.332031 L 4 25.332031 L 4 22.332031 M 5 21.332031 L 3 21.332031 L 3 26.332031 L 5 26.332031 Z "></path>
+<path style=" fill:#98CCFD;" d="M 0.5 5.5 L 7.5 5.5 L 7.5 23.5 L 0.5 23.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 7 6 L 7 23 L 1 23 L 1 6 L 7 6 M 8 5 L 0 5 L 0 24 L 8 24 Z "></path>
+<path style=" fill:#4788C7;" d="M 0 8 L 8 8 L 8 9 L 0 9 Z "></path>
+<path style=" fill:#4788C7;" d="M 0 11 L 8 11 L 8 12 L 0 12 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 4.007813 37.300781 C 3.257813 36.523438 1.5 34.5 1.5 32.667969 C 1.5 31.472656 2.621094 30.5 4 30.5 C 5.378906 30.5 6.5 31.472656 6.5 32.667969 C 6.5 34.585938 4.757813 36.546875 4.007813 37.300781 Z "></path>
+<path style=" fill:#4788C7;" d="M 4 31 C 5.101563 31 6 31.746094 6 32.667969 C 6 34.066406 4.871094 35.628906 4.011719 36.578125 C 3.144531 35.601563 2 34.011719 2 32.667969 C 2 31.746094 2.898438 31 4 31 M 4 30 C 2.34375 30 1 31.195313 1 32.667969 C 1 35.238281 4 38 4 38 C 4 38 7 35.355469 7 32.667969 C 7 31.195313 5.65625 30 4 30 Z "></path>
+<path style=" fill:#98CCFD;" d="M 0.5 31.5 L 0.5 29 C 0.5 27.070313 2.070313 25.5 4 25.5 C 5.929688 25.5 7.5 27.070313 7.5 29 L 7.5 31.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 4 26 C 5.652344 26 7 27.347656 7 29 L 7 31 L 1 31 L 1 29 C 1 27.347656 2.347656 26 4 26 M 4 25 C 1.789063 25 0 26.789063 0 29 L 0 32 L 8 32 L 8 29 C 8 26.789063 6.210938 25 4 25 Z "></path>
+</g>
+</svg>
\ No newline at end of file

mean4thai/src/assets/icons/sailing-boat.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#4788C7;" d="M 6 2 L 7 2 L 7 21 L 6 21 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 1.703125 16.5 C 2.011719 15.53125 2.5 13.644531 2.5 11.5 C 2.5 9.355469 2.007813 7.46875 1.703125 6.5 L 15.664063 6.5 C 15.980469 7.289063 16.785156 9.554688 16.785156 11.855469 C 16.785156 14.117188 16.015625 15.878906 15.703125 16.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 15.324219 7 C 15.671875 7.941406 16.285156 9.882813 16.285156 11.855469 C 16.285156 13.730469 15.722656 15.257813 15.386719 16 L 2.371094 16 C 2.664063 14.917969 3 13.296875 3 11.5 C 3 9.703125 2.664063 8.082031 2.371094 7 L 15.324219 7 M 16 6 L 1 6 C 1 6 2 8.507813 2 11.5 C 2 14.492188 1 17 1 17 L 16 17 C 16 17 17.285156 14.847656 17.285156 11.855469 C 17.285156 8.863281 16 6 16 6 Z "></path>
+<path style=" fill:#4788C7;" d="M 30 5 L 31 5 L 31 25.355469 L 30 25.355469 Z "></path>
+<path style=" fill:#4788C7;" d="M 17 1 L 18 1 L 18 25.429688 L 17 25.429688 Z "></path>
+<path style=" fill:#98CCFD;" d="M 4.519531 33.5 C 4.574219 31.734375 4.582031 25.976563 2.765625 21.5 L 8.910156 21.5 L 9.941406 23.296875 C 10.339844 24.046875 11.140625 24.5 12.078125 24.5 L 26.207031 24.5 L 28.183594 22.523438 L 36.15625 23.410156 C 33.132813 28.367188 32.609375 32.167969 32.519531 33.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 8.621094 22 L 9.492188 23.519531 C 9.984375 24.445313 10.949219 25 12.078125 25 L 26.414063 25 L 28.367188 23.046875 L 35.328125 23.820313 C 32.886719 28.050781 32.234375 31.398438 32.0625 33 L 5.03125 33 C 5.058594 30.898438 4.941406 26.066406 3.488281 22 L 8.621094 22 M 9.199219 21 L 2 21 C 4.449219 26.234375 4 34 4 34 L 33 34 C 33 34 32.90625 29.375 37 23 L 28 22 L 26 24 L 12.078125 24 C 11.363281 24 10.710938 23.679688 10.375 23.050781 Z "></path>
+<path style=" fill:#98CCFD;" d="M 3 23.5 C 2.230469 23.5 1.5 22.769531 1.5 22 L 1.5 19.5 L 7.71875 19.5 L 10.117188 23.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 7.433594 20 L 9.234375 23 L 3 23 C 2.515625 23 2 22.484375 2 22 L 2 20 L 7.433594 20 M 8 19 L 1 19 L 1 22 C 1 23.039063 1.960938 24 3 24 L 11 24 Z "></path>
+<path style=" fill:#98CCFD;" d="M 27 23.5 L 29.25 20.5 L 38.230469 20.5 L 37.332031 22.507813 C 37.125 23.121094 36.597656 23.5 36 23.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 37.457031 21 L 36.875 22.304688 L 36.855469 22.347656 L 36.839844 22.394531 C 36.71875 22.757813 36.382813 23 36 23 L 28 23 L 29.5 21 L 37.457031 21 M 39 20 L 29 20 L 26 24 L 36 24 C 36.8125 24 37.53125 23.480469 37.785156 22.710938 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 11.652344 20.5 C 11.941406 19.308594 12.5 16.570313 12.5 13 C 12.5 9.429688 11.941406 6.691406 11.652344 5.5 L 26.617188 5.5 C 26.863281 6.460938 27.5 9.296875 27.5 13 C 27.5 16.703125 26.863281 19.539063 26.617188 20.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 26.226563 6 C 26.503906 7.183594 27 9.75 27 13 C 27 16.25 26.503906 18.816406 26.226563 20 L 12.277344 20 C 12.585938 18.582031 13 16.09375 13 13 C 13 9.90625 12.585938 7.417969 12.277344 6 L 26.226563 6 M 27 5 L 11 5 C 11 5 12 8.285156 12 13 C 12 17.714844 11 21 11 21 L 27 21 C 27 21 28 17.714844 28 13 C 28 8.285156 27 5 27 5 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 23.714844 18.5 C 24.023438 17.578125 24.5 15.855469 24.5 14 C 24.5 12.144531 24.023438 10.421875 23.714844 9.5 L 36.757813 9.5 C 37.191406 10.082031 38.5 11.988281 38.5 14 C 38.5 16.015625 37.195313 17.921875 36.757813 18.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 36.503906 10 C 36.996094 10.699219 38 12.324219 38 14 C 38 15.675781 36.996094 17.300781 36.503906 18 L 24.394531 18 C 24.683594 16.992188 25 15.539063 25 14 C 25 12.460938 24.683594 11.007813 24.394531 10 L 36.503906 10 M 37 9 L 23 9 C 23 9 24 11.382813 24 14 C 24 16.617188 23 19 23 19 L 37 19 C 37 19 39 16.617188 39 14 C 39 11.382813 37 9 37 9 Z "></path>
+<path style=" fill:#4788C7;" d="M 6 6.070313 C 8.625 3.625 8.324219 6.558594 12 5 C 10.621094 4.980469 9.4375 2 7.355469 2 C 6.09375 2 6 2 6 2 Z "></path>
+<path style=" fill:#4788C7;" d="M 30 9.070313 C 32.625 6.625 32.324219 9.558594 36 8 C 34.621094 7.980469 33.4375 5 31.355469 5 C 30.09375 5 30 5 30 5 Z "></path>
+<path style=" fill:#4788C7;" d="M 17 5 C 21.132813 2.425781 22.769531 4.980469 26.5 3.5 C 25.121094 3.480469 22.003906 1 18.355469 1 C 17.09375 1 17 1 17 1 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 1 39 L 39 39 L 39 31.878906 C 37.691406 31.613281 36.148438 31 35 31 C 33.542969 31 31.4375 32 30 32 C 28.5625 32 26.457031 31 25 31 C 23.542969 31 21.4375 32 20 32 C 18.5625 32 16.457031 31 15 31 C 13.542969 31 11.4375 32 10 32 C 8.5625 32 6.457031 31 5 31 C 3.851563 31 2.308594 31.613281 1 31.878906 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 1.5 32.277344 C 1.863281 32.191406 2.238281 32.085938 2.613281 31.980469 C 3.460938 31.746094 4.335938 31.5 5 31.5 C 5.664063 31.5 6.535156 31.746094 7.382813 31.984375 C 8.28125 32.238281 9.214844 32.5 10 32.5 C 10.785156 32.5 11.71875 32.238281 12.617188 31.984375 C 13.464844 31.746094 14.335938 31.5 15 31.5 C 15.664063 31.5 16.535156 31.746094 17.382813 31.984375 C 18.28125 32.238281 19.214844 32.5 20 32.5 C 20.785156 32.5 21.71875 32.238281 22.617188 31.984375 C 23.464844 31.746094 24.335938 31.5 25 31.5 C 25.664063 31.5 26.535156 31.746094 27.382813 31.984375 C 28.28125 32.238281 29.214844 32.5 30 32.5 C 30.785156 32.5 31.71875 32.238281 32.617188 31.984375 C 33.464844 31.746094 34.335938 31.5 35 31.5 C 35.664063 31.5 36.539063 31.746094 37.386719 31.980469 C 37.761719 32.085938 38.136719 32.191406 38.5 32.277344 "></path>
+</g>
+</svg>
\ No newline at end of file

mean4thai/src/assets/icons/segway.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#4788C7;" d="M 19 3.203125 L 21 3.203125 L 21 23.847656 L 19 23.847656 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 10.5 38.5 C 9.398438 38.5 8.5 37.601563 8.5 36.5 L 8.5 24.972656 C 8.5 23.867188 9.398438 22.972656 10.5 22.972656 C 11.601563 22.972656 12.5 23.867188 12.5 24.972656 L 12.5 36.5 C 12.5 37.601563 11.601563 38.5 10.5 38.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 10.5 23.472656 C 11.328125 23.472656 12 24.144531 12 24.972656 L 12 36.5 C 12 37.328125 11.328125 38 10.5 38 C 9.671875 38 9 37.328125 9 36.5 L 9 24.972656 C 9 24.144531 9.671875 23.472656 10.5 23.472656 M 10.5 22.472656 C 9.117188 22.472656 8 23.589844 8 24.972656 L 8 36.5 C 8 37.882813 9.117188 39 10.5 39 C 11.882813 39 13 37.882813 13 36.5 L 13 24.972656 C 13 23.589844 11.882813 22.472656 10.5 22.472656 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 29.5 38.5 C 28.398438 38.5 27.5 37.601563 27.5 36.5 L 27.5 24.972656 C 27.5 23.867188 28.398438 22.972656 29.5 22.972656 C 30.601563 22.972656 31.5 23.867188 31.5 24.972656 L 31.5 36.5 C 31.5 37.601563 30.601563 38.5 29.5 38.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 29.5 23.472656 C 30.328125 23.472656 31 24.144531 31 24.972656 L 31 36.5 C 31 37.328125 30.328125 38 29.5 38 C 28.671875 38 28 37.328125 28 36.5 L 28 24.972656 C 28 24.144531 28.671875 23.472656 29.5 23.472656 M 29.5 22.472656 C 28.117188 22.472656 27 23.589844 27 24.972656 L 27 36.5 C 27 37.882813 28.117188 39 29.5 39 C 30.882813 39 32 37.882813 32 36.5 L 32 24.972656 C 32 23.589844 30.882813 22.472656 29.5 22.472656 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 12.367188 33.5 L 8.675781 21.5 L 9.96875 21.5 C 11.683594 21.5 13.140625 22.667969 13.511719 24.34375 L 14.363281 28.5 L 17.5 28.5 L 17.5 18.5 L 22.5 18.5 L 22.5 28.5 L 25.636719 28.5 L 26.488281 24.335938 C 26.859375 22.667969 28.316406 21.5 30.035156 21.5 L 31.324219 21.5 L 27.632813 33.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 22 19 L 22 29 L 26.046875 29 L 26.210938 28.199219 L 26.976563 24.453125 C 27.296875 23.007813 28.554688 22 30.035156 22 L 30.644531 22 L 27.261719 33 L 12.738281 33 L 9.355469 22 L 9.964844 22 C 11.445313 22 12.703125 23.007813 13.019531 24.4375 L 13.789063 28.199219 L 13.953125 29 L 18 29 L 18 19 L 22 19 M 23 18 L 17 18 L 17 28 L 14.769531 28 L 14 24.234375 C 13.578125 22.34375 11.902344 21 9.964844 21 L 8 21 L 12 34 L 28 34 L 32 21 L 30.035156 21 C 28.097656 21 26.421875 22.34375 26 24.234375 L 25.230469 28 L 23 28 Z "></path>
+<path style="fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 9.75 4.25 L 14.5 2.75 L 20 4.25 L 25.5 2.75 L 30.25 4.25 "></path>
+</g>
+</svg>
\ No newline at end of file

mean4thai/src/assets/icons/shuttle.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#98CCFD;" d="M 2.667969 30.5 C 1.472656 30.5 0.5 29.527344 0.5 28.332031 L 0.5 9.667969 C 0.5 8.472656 1.472656 7.5 2.667969 7.5 L 32.441406 7.5 C 34.367188 7.5 36.109375 8.640625 36.875 10.40625 L 39.097656 15.515625 C 39.363281 16.128906 39.5 16.777344 39.5 17.441406 L 39.5 28.332031 C 39.5 29.527344 38.527344 30.5 37.332031 30.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 32.445313 8 C 34.167969 8 35.730469 9.023438 36.417969 10.605469 L 38.640625 15.714844 C 38.878906 16.265625 39 16.84375 39 17.445313 L 39 28.335938 C 39 29.253906 38.253906 30 37.332031 30 L 2.667969 30 C 2.222656 30 1.804688 29.828125 1.488281 29.511719 C 1.171875 29.195313 1 28.777344 1 28.332031 L 1 9.667969 C 1 8.746094 1.746094 8 2.667969 8 L 32.445313 8 M 32.445313 7 L 2.667969 7 C 1.195313 7 0 8.195313 0 9.667969 L 0 28.335938 C 0 29.804688 1.195313 31 2.667969 31 L 37.335938 31 C 38.804688 31 40 29.804688 40 28.332031 L 40 17.441406 C 40 16.710938 39.847656 15.988281 39.558594 15.316406 L 37.335938 10.203125 C 36.488281 8.257813 34.566406 7 32.445313 7 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 30.332031 20.5 C 29.875 20.5 29.5 20.125 29.5 19.667969 L 29.5 11.332031 C 29.5 10.875 29.875 10.5 30.332031 10.5 L 36.769531 10.5 L 39.097656 15.847656 C 39.363281 16.460938 39.5 17.109375 39.5 17.777344 L 39.5 20.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 36.445313 11 L 38.640625 16.046875 C 38.878906 16.597656 39 17.179688 39 17.777344 L 39 20 L 30.332031 20 C 30.214844 20 30.132813 19.9375 30.097656 19.902344 C 30.0625 19.867188 30 19.785156 30 19.667969 L 30 11.335938 C 30 11.148438 30.148438 11 30.335938 11 L 36.445313 11 M 37.101563 10 L 30.335938 10 C 29.597656 10 29 10.597656 29 11.332031 L 29 19.664063 C 29 20.402344 29.597656 21 30.332031 21 L 40 21 L 40 17.777344 C 40 17.042969 39.847656 16.320313 39.558594 15.648438 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 35.5 30.5 C 35.5 32.710938 33.710938 34.5 31.5 34.5 C 29.289063 34.5 27.5 32.710938 27.5 30.5 C 27.5 28.289063 29.289063 26.5 31.5 26.5 C 33.710938 26.5 35.5 28.289063 35.5 30.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 31.5 27 C 33.429688 27 35 28.570313 35 30.5 C 35 32.429688 33.429688 34 31.5 34 C 29.570313 34 28 32.429688 28 30.5 C 28 28.570313 29.570313 27 31.5 27 M 31.5 26 C 29.015625 26 27 28.015625 27 30.5 C 27 32.984375 29.015625 35 31.5 35 C 33.984375 35 36 32.984375 36 30.5 C 36 28.015625 33.984375 26 31.5 26 Z "></path>
+<path style=" fill:#4788C7;" d="M 33 30.5 C 33 31.328125 32.328125 32 31.5 32 C 30.671875 32 30 31.328125 30 30.5 C 30 29.671875 30.671875 29 31.5 29 C 32.328125 29 33 29.671875 33 30.5 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 12.5 30.5 C 12.5 32.710938 10.710938 34.5 8.5 34.5 C 6.289063 34.5 4.5 32.710938 4.5 30.5 C 4.5 28.289063 6.289063 26.5 8.5 26.5 C 10.710938 26.5 12.5 28.289063 12.5 30.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 8.5 27 C 10.429688 27 12 28.570313 12 30.5 C 12 32.429688 10.429688 34 8.5 34 C 6.570313 34 5 32.429688 5 30.5 C 5 28.570313 6.570313 27 8.5 27 M 8.5 26 C 6.015625 26 4 28.015625 4 30.5 C 4 32.984375 6.015625 35 8.5 35 C 10.984375 35 13 32.984375 13 30.5 C 13 28.015625 10.984375 26 8.5 26 Z "></path>
+<path style=" fill:#4788C7;" d="M 10 30.5 C 10 31.328125 9.328125 32 8.5 32 C 7.671875 32 7 31.328125 7 30.5 C 7 29.671875 7.671875 29 8.5 29 C 9.328125 29 10 29.671875 10 30.5 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 17.5 20.5 C 16.949219 20.5 16.5 20.050781 16.5 19.5 L 16.5 11.5 C 16.5 10.949219 16.949219 10.5 17.5 10.5 L 25.5 10.5 C 26.050781 10.5 26.5 10.949219 26.5 11.5 L 26.5 19.5 C 26.5 20.050781 26.050781 20.5 25.5 20.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 25.5 11 C 25.777344 11 26 11.222656 26 11.5 L 26 19.5 C 26 19.777344 25.777344 20 25.5 20 L 17.5 20 C 17.222656 20 17 19.777344 17 19.5 L 17 11.5 C 17 11.222656 17.222656 11 17.5 11 L 25.5 11 M 25.5 10 L 17.5 10 C 16.671875 10 16 10.671875 16 11.5 L 16 19.5 C 16 20.328125 16.671875 21 17.5 21 L 25.5 21 C 26.328125 21 27 20.328125 27 19.5 L 27 11.5 C 27 10.671875 26.328125 10 25.5 10 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 4.5 20.5 C 3.949219 20.5 3.5 20.050781 3.5 19.5 L 3.5 11.5 C 3.5 10.949219 3.949219 10.5 4.5 10.5 L 12.5 10.5 C 13.050781 10.5 13.5 10.949219 13.5 11.5 L 13.5 19.5 C 13.5 20.050781 13.050781 20.5 12.5 20.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 12.5 11 C 12.777344 11 13 11.222656 13 11.5 L 13 19.5 C 13 19.777344 12.777344 20 12.5 20 L 4.5 20 C 4.222656 20 4 19.777344 4 19.5 L 4 11.5 C 4 11.222656 4.222656 11 4.5 11 L 12.5 11 M 12.5 10 L 4.5 10 C 3.671875 10 3 10.671875 3 11.5 L 3 19.5 C 3 20.328125 3.671875 21 4.5 21 L 12.5 21 C 13.328125 21 14 20.328125 14 19.5 L 14 11.5 C 14 10.671875 13.328125 10 12.5 10 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 1.5 25 L 1 25 L 1 22 L 1.5 22 C 2.328125 22 3 22.671875 3 23.5 C 3 24.328125 2.328125 25 1.5 25 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 38.5 22 L 39 22 L 39 25 L 38.5 25 C 37.671875 25 37 24.328125 37 23.5 C 37 22.671875 37.671875 22 38.5 22 Z "></path>
+</g>
+</svg>
\ No newline at end of file

mean4thai/src/assets/icons/space-shuttle.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#B6DCFE;" d="M 1.5 15.5 L 6.285156 15.5 L 6.285156 18.5 L 1.5 18.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 5.785156 16 L 5.785156 18 L 2 18 L 2 16 L 5.785156 16 M 6.785156 15 L 1 15 L 1 19 L 6.785156 19 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 1.5 21.5 L 6.285156 21.5 L 6.285156 24.5 L 1.5 24.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 5.785156 22 L 5.785156 24 L 2 24 L 2 22 L 5.785156 22 M 6.785156 21 L 1 21 L 1 25 L 6.785156 25 Z "></path>
+<path style=" fill:#98CCFD;" d="M 5.5 35.5 L 5.5 25.5 L 4.5 25.5 L 4.5 14.5 L 5.5 14.5 L 5.5 4.5 L 8.523438 4.5 C 10.175781 4.5 11.710938 5.304688 12.625 6.65625 L 17.785156 14.5 L 29.570313 14.5 C 34.367188 14.5 37.644531 18.882813 38.402344 20 C 37.648438 21.117188 34.386719 25.5 29.570313 25.5 L 17.785156 25.5 L 12.621094 33.351563 C 11.710938 34.695313 10.175781 35.5 8.523438 35.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 8.523438 5 C 10.011719 5 11.390625 5.722656 12.203125 6.925781 L 17.21875 14.550781 L 17.515625 15 L 29.570313 15 C 33.785156 15 36.808594 18.636719 37.796875 20.003906 C 36.816406 21.375 33.828125 25 29.570313 25 L 17.515625 25 L 17.21875 25.449219 L 12.214844 33.0625 C 11.390625 34.277344 10.011719 35 8.523438 35 L 6 35 L 6 25 L 5 25 L 5 15 L 6 15 L 6 5 L 8.523438 5 M 8.523438 4 L 5 4 L 5 14 L 4 14 L 4 26 L 5 26 L 5 36 L 8.523438 36 C 10.339844 36 12.03125 35.109375 13.039063 33.625 L 18.054688 26 L 29.570313 26 C 35.421875 26 39 20 39 20 C 39 20 35.386719 14 29.570313 14 L 18.054688 14 L 13.039063 6.375 C 12.03125 4.890625 10.339844 4 8.523438 4 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 30.5 17.640625 L 31.9375 18 C 32.855469 18.230469 33.5 19.050781 33.5 20 C 33.5 20.949219 32.855469 21.769531 31.9375 22 L 30.5 22.359375 Z "></path>
+<path style=" fill:#4788C7;" d="M 31 18.28125 L 31.816406 18.484375 C 32.515625 18.660156 33 19.28125 33 20 C 33 20.71875 32.515625 21.339844 31.816406 21.515625 L 31 21.71875 L 31 18.28125 M 30 17 L 30 23 L 32.058594 22.484375 C 33.199219 22.199219 34 21.175781 34 20 C 34 18.824219 33.199219 17.800781 32.058594 17.515625 Z "></path>
+<path style=" fill:#4788C7;" d="M 5 15 L 11.5 15 C 11.773438 15 12 14.773438 12 14.5 C 12 14.226563 11.773438 14 11.5 14 L 5 14 C 4.726563 14 4.5 14.226563 4.5 14.5 C 4.5 14.773438 4.726563 15 5 15 Z "></path>
+<path style=" fill:#4788C7;" d="M 5 26 L 11.5 26 C 11.773438 26 12 25.773438 12 25.5 C 12 25.226563 11.773438 25 11.5 25 L 5 25 C 4.726563 25 4.5 25.226563 4.5 25.5 C 4.5 25.773438 4.726563 26 5 26 Z "></path>
+</g>
+</svg>
\ No newline at end of file

mean4thai/src/assets/icons/steam-engine.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#DFF0FE;" d="M 25.5 17.5 L 25.5 12.890625 L 22.570313 6.542969 L 25.269531 2.5 L 30.730469 2.5 L 33.429688 6.542969 L 30.5 12.890625 L 30.5 17.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 30.464844 3 L 32.859375 6.589844 L 30.09375 12.582031 L 30 12.78125 L 30 17 L 26 17 L 26 12.78125 L 25.90625 12.582031 L 23.144531 6.589844 L 25.535156 3 L 30.464844 3 M 31 2 L 25 2 L 22 6.5 L 25 13 L 25 18 L 31 18 L 31 13 L 34 6.5 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 18.5 12.5 L 21.5 12.5 L 21.5 18.5 L 18.5 18.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 21 13 L 21 18 L 19 18 L 19 13 L 21 13 M 22 12 L 18 12 L 18 19 L 22 19 Z "></path>
+<path style=" fill:#4788C7;" d="M 39 24.5 C 39 25.878906 37.878906 27 36.5 27 C 35.121094 27 34 25.878906 34 24.5 C 34 23.121094 35.121094 22 36.5 22 C 37.878906 22 39 23.121094 39 24.5 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 1.5 2.5 L 15.5 2.5 L 15.5 19.5 L 1.5 19.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 15 3 L 15 19 L 2 19 L 2 3 L 15 3 M 16 2 L 1 2 L 1 20 L 16 20 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 1.5 32.5 L 1.5 17.5 L 29 17.5 C 33.136719 17.5 36.5 20.863281 36.5 25 C 36.5 29.136719 33.136719 32.5 29 32.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 29 18 C 32.859375 18 36 21.140625 36 25 C 36 28.859375 32.859375 32 29 32 L 2 32 L 2 18 L 29 18 M 29 17 L 1 17 L 1 33 L 29 33 C 33.417969 33 37 29.417969 37 25 C 37 20.582031 33.417969 17 29 17 Z "></path>
+<path style=" fill:#98CCFD;" d="M 32.5 37.5 L 32.5 29.5 L 35.675781 29.5 L 39.230469 37.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 35.351563 30 L 38.460938 37 L 33 37 L 33 30 L 35.351563 30 M 36 29 L 32 29 L 32 38 L 40 38 Z "></path>
+<path style=" fill:#98CCFD;" d="M 15.5 32 C 15.5 35.039063 13.039063 37.5 10 37.5 C 6.960938 37.5 4.5 35.039063 4.5 32 C 4.5 28.960938 6.960938 26.5 10 26.5 C 13.039063 26.5 15.5 28.960938 15.5 32 Z "></path>
+<path style=" fill:#4788C7;" d="M 10 27 C 12.757813 27 15 29.242188 15 32 C 15 34.757813 12.757813 37 10 37 C 7.242188 37 5 34.757813 5 32 C 5 29.242188 7.242188 27 10 27 M 10 26 C 6.6875 26 4 28.6875 4 32 C 4 35.3125 6.6875 38 10 38 C 13.3125 38 16 35.3125 16 32 C 16 28.6875 13.3125 26 10 26 Z "></path>
+<path style=" fill:#98CCFD;" d="M 29.5 32 C 29.5 35.039063 27.039063 37.5 24 37.5 C 20.960938 37.5 18.5 35.039063 18.5 32 C 18.5 28.960938 20.960938 26.5 24 26.5 C 27.039063 26.5 29.5 28.960938 29.5 32 Z "></path>
+<path style=" fill:#4788C7;" d="M 24 27 C 26.757813 27 29 29.242188 29 32 C 29 34.757813 26.757813 37 24 37 C 21.242188 37 19 34.757813 19 32 C 19 29.242188 21.242188 27 24 27 M 24 26 C 20.6875 26 18 28.6875 18 32 C 18 35.3125 20.6875 38 24 38 C 27.3125 38 30 35.3125 30 32 C 30 28.6875 27.3125 26 24 26 Z "></path>
+<path style=" fill:#4788C7;" d="M 26 32 C 26 33.105469 25.105469 34 24 34 C 22.894531 34 22 33.105469 22 32 C 22 30.894531 22.894531 30 24 30 C 25.105469 30 26 30.894531 26 32 Z "></path>
+<path style=" fill:#4788C7;" d="M 12 32 C 12 33.105469 11.105469 34 10 34 C 8.894531 34 8 33.105469 8 32 C 8 30.894531 8.894531 30 10 30 C 11.105469 30 12 30.894531 12 32 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 10.414063 32.5 L 22.519531 32.5 "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 6.378906 2.5 L 18 2.5 "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 22.417969 6.5 L 33.375 6.5 "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 25.207031 12.5 L 30.585938 12.5 "></path>
+<path style=" fill:#DFF0FE;" d="M 8 12.5 C 6.621094 12.5 5.5 11.378906 5.5 10 L 5.5 2.5 L 15.5 2.5 L 15.5 12.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 15 3 L 15 12 L 8 12 C 6.898438 12 6 11.101563 6 10 L 6 3 L 15 3 M 16 2 L 5 2 L 5 10 C 5 11.65625 6.34375 13 8 13 L 16 13 Z "></path>
+<path style=" fill:#4788C7;" d="M 35.5 38 C 35.226563 38 35 37.773438 35 37.5 L 35 35.5 C 35 35.226563 35.226563 35 35.5 35 C 35.773438 35 36 35.226563 36 35.5 L 36 37.5 C 36 37.773438 35.773438 38 35.5 38 Z "></path>
+</g>
+</svg>
\ No newline at end of file

mean4thai/src/assets/icons/suv.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#98CCFD;" d="M 3 28.5 C 1.621094 28.5 0.5 27.378906 0.5 26 L 0.5 17.273438 L 3.730469 9.988281 C 4.128906 9.085938 5.027344 8.5 6.015625 8.5 L 24.011719 8.5 C 25.101563 8.5 26.144531 9.019531 26.800781 9.886719 L 31.660156 16.292969 L 37.621094 17.335938 C 38.699219 17.488281 39.5 18.410156 39.5 19.480469 L 39.5 25 C 39.5 26.929688 37.929688 28.5 36 28.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 24.011719 9 C 24.945313 9 25.839844 9.445313 26.402344 10.1875 L 31.144531 16.4375 L 31.378906 16.75 L 31.765625 16.816406 L 37.566406 17.832031 C 38.382813 17.945313 39 18.65625 39 19.480469 L 39 25 C 39 26.652344 37.652344 28 36 28 L 3 28 C 1.898438 28 1 27.101563 1 26 L 1 17.378906 L 4.1875 10.1875 C 4.507813 9.46875 5.222656 9 6.015625 9 L 24.011719 9 M 24.011719 8 L 6.015625 8 C 4.828125 8 3.753906 8.699219 3.273438 9.785156 L 0 17.167969 L 0 26 C 0 27.65625 1.34375 29 3 29 L 36 29 C 38.210938 29 40 27.210938 40 25 L 40 19.480469 C 40 18.152344 39.023438 17.027344 37.707031 16.84375 L 31.9375 15.835938 L 27.199219 9.582031 C 26.445313 8.585938 25.265625 8 24.011719 8 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 4 19.832031 C 4 19.097656 3.550781 18.5 3 18.5 L 1 18.5 L 1 22.5 L 3 22.5 C 3.550781 22.5 4 21.902344 4 21.167969 C 4 20.917969 4 20.082031 4 19.832031 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 36 20.5 L 36 21.5 C 36 22.328125 36.671875 23 37.5 23 L 39 23 C 39 23 39 20.328125 39 19.523438 C 39 19.175781 38.929688 19 38.929688 19 L 37.5 19 C 36.671875 19 36 19.671875 36 20.5 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 7.605469 16.5 C 7.148438 16.5 6.722656 16.296875 6.4375 15.945313 C 6.152344 15.589844 6.042969 15.132813 6.136719 14.6875 L 7.449219 8.5 L 24.011719 8.5 C 25.101563 8.5 26.144531 9.019531 26.800781 9.886719 L 31.660156 16.292969 L 32.851563 16.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 24.011719 9 C 24.945313 9 25.839844 9.445313 26.402344 10.1875 L 30.8125 16 L 7.605469 16 C 7.300781 16 7.019531 15.863281 6.828125 15.628906 C 6.636719 15.394531 6.5625 15.089844 6.625 14.792969 L 7.855469 9 L 24.011719 9 M 24.011719 8 L 7.046875 8 L 5.648438 14.585938 C 5.382813 15.828125 6.332031 17 7.605469 17 L 38.289063 17 C 38.105469 16.929688 37.910156 16.871094 37.707031 16.839844 L 31.9375 15.832031 L 27.199219 9.582031 C 26.445313 8.585938 25.265625 8 24.011719 8 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 20.5 16.5 L 20.5 8.5 "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 13.5 16.5 L 13.5 8.5 "></path>
+<path style=" fill:#DFF0FE;" d="M 35.5 28 C 35.5 30.484375 33.484375 32.5 31 32.5 C 28.515625 32.5 26.5 30.484375 26.5 28 C 26.5 25.515625 28.515625 23.5 31 23.5 C 33.484375 23.5 35.5 25.515625 35.5 28 Z "></path>
+<path style=" fill:#4788C7;" d="M 31 24 C 33.207031 24 35 25.792969 35 28 C 35 30.207031 33.207031 32 31 32 C 28.792969 32 27 30.207031 27 28 C 27 25.792969 28.792969 24 31 24 M 31 23 C 28.238281 23 26 25.238281 26 28 C 26 30.761719 28.238281 33 31 33 C 33.761719 33 36 30.761719 36 28 C 36 25.238281 33.761719 23 31 23 Z "></path>
+<path style=" fill:#4788C7;" d="M 32 28 C 32 28.550781 31.550781 29 31 29 C 30.449219 29 30 28.550781 30 28 C 30 27.449219 30.449219 27 31 27 C 31.550781 27 32 27.449219 32 28 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 13.5 28 C 13.5 30.484375 11.484375 32.5 9 32.5 C 6.515625 32.5 4.5 30.484375 4.5 28 C 4.5 25.515625 6.515625 23.5 9 23.5 C 11.484375 23.5 13.5 25.515625 13.5 28 Z "></path>
+<path style=" fill:#4788C7;" d="M 9 24 C 11.207031 24 13 25.792969 13 28 C 13 30.207031 11.207031 32 9 32 C 6.792969 32 5 30.207031 5 28 C 5 25.792969 6.792969 24 9 24 M 9 23 C 6.238281 23 4 25.238281 4 28 C 4 30.761719 6.238281 33 9 33 C 11.761719 33 14 30.761719 14 28 C 14 25.238281 11.761719 23 9 23 Z "></path>
+<path style=" fill:#4788C7;" d="M 10 28 C 10 28.550781 9.550781 29 9 29 C 8.449219 29 8 28.550781 8 28 C 8 27.449219 8.449219 27 9 27 C 9.550781 27 10 27.449219 10 28 Z "></path>
+</g>
+</svg>
\ No newline at end of file

mean4thai/src/assets/icons/tour-bus.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#98CCFD;" d="M 4 33.5 C 2.621094 33.5 1.5 32.378906 1.5 31 L 1.5 7 C 1.5 5.070313 3.070313 3.5 5 3.5 L 31.722656 3.5 C 33.382813 3.5 34.828125 4.683594 35.152344 6.3125 L 38.511719 23.097656 L 38.5 31 C 38.5 32.378906 37.378906 33.5 36 33.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 31.722656 4 C 33.144531 4 34.382813 5.015625 34.664063 6.410156 L 38 23.097656 L 38 31 C 38 32.101563 37.101563 33 36 33 L 4 33 C 2.898438 33 2 32.101563 2 31 L 2 7 C 2 5.347656 3.347656 4 5 4 L 31.722656 4 M 31.722656 3 L 5 3 C 2.789063 3 1 4.789063 1 7 L 1 31 C 1 32.65625 2.34375 34 4 34 L 36 34 C 37.65625 34 39 32.65625 39 31 L 39 23 L 35.644531 6.214844 C 35.269531 4.347656 33.628906 3 31.722656 3 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 33.5 33.5 C 33.5 35.710938 31.710938 37.5 29.5 37.5 C 27.289063 37.5 25.5 35.710938 25.5 33.5 C 25.5 31.289063 27.289063 29.5 29.5 29.5 C 31.710938 29.5 33.5 31.289063 33.5 33.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 29.5 30 C 31.429688 30 33 31.570313 33 33.5 C 33 35.429688 31.429688 37 29.5 37 C 27.570313 37 26 35.429688 26 33.5 C 26 31.570313 27.570313 30 29.5 30 M 29.5 29 C 27.015625 29 25 31.015625 25 33.5 C 25 35.984375 27.015625 38 29.5 38 C 31.984375 38 34 35.984375 34 33.5 C 34 31.015625 31.984375 29 29.5 29 Z "></path>
+<path style=" fill:#4788C7;" d="M 31 33.5 C 31 34.328125 30.328125 35 29.5 35 C 28.671875 35 28 34.328125 28 33.5 C 28 32.671875 28.671875 32 29.5 32 C 30.328125 32 31 32.671875 31 33.5 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 13.5 33.5 C 13.5 35.710938 11.710938 37.5 9.5 37.5 C 7.289063 37.5 5.5 35.710938 5.5 33.5 C 5.5 31.289063 7.289063 29.5 9.5 29.5 C 11.710938 29.5 13.5 31.289063 13.5 33.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 9.5 30 C 11.429688 30 13 31.570313 13 33.5 C 13 35.429688 11.429688 37 9.5 37 C 7.570313 37 6 35.429688 6 33.5 C 6 31.570313 7.570313 30 9.5 30 M 9.5 29 C 7.015625 29 5 31.015625 5 33.5 C 5 35.984375 7.015625 38 9.5 38 C 11.984375 38 14 35.984375 14 33.5 C 14 31.015625 11.984375 29 9.5 29 Z "></path>
+<path style=" fill:#4788C7;" d="M 11 33.5 C 11 34.328125 10.328125 35 9.5 35 C 8.671875 35 8 34.328125 8 33.5 C 8 32.671875 8.671875 32 9.5 32 C 10.328125 32 11 32.671875 11 33.5 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 2.5 28 L 2 28 L 2 25 L 2.5 25 C 3.328125 25 4 25.671875 4 26.5 C 4 27.328125 3.328125 28 2.5 28 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 37.5 25 L 38 25 L 38 28 L 37.5 28 C 36.671875 28 36 27.328125 36 26.5 C 36 25.671875 36.671875 25 37.5 25 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 1.5 22.5 L 1.5 14.5 L 36.789063 14.5 L 38.390625 22.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 36.378906 15 L 37.78125 22 L 2 22 L 2 15 L 36.378906 15 M 37.199219 14 L 1 14 L 1 23 L 39 23 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 1.5 11.5 L 1.5 7 C 1.5 5.070313 3.070313 3.5 5 3.5 L 31.691406 3.5 C 33.367188 3.5 34.8125 4.695313 35.128906 6.34375 L 36.109375 11.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 31.691406 4 C 33.128906 4 34.367188 5.027344 34.636719 6.4375 L 35.507813 11 L 2 11 L 2 7 C 2 5.347656 3.347656 4 5 4 L 31.691406 4 M 31.691406 3 L 5 3 C 2.789063 3 1 4.789063 1 7 L 1 12 L 36.714844 12 L 35.617188 6.253906 C 35.261719 4.363281 33.609375 3 31.691406 3 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 9.5 11.179688 L 9.5 3.035156 "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 18.5 11.179688 L 18.5 3.035156 "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 27.5 11.179688 L 27.5 3.035156 "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 9.5 22.285156 L 9.5 14.714844 "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 18.5 22.285156 L 18.5 14.714844 "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 27.5 22.285156 L 27.5 14.714844 "></path>
+</g>
+</svg>
\ No newline at end of file

mean4thai/src/assets/icons/tow-truck.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#DFF0FE;" d="M 11.285156 22.5 L 1.5 5.863281 L 1.5 3.5 L 3.761719 3.5 L 18.960938 22.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 3.519531 4 L 17.917969 22 L 11.570313 22 L 2 5.726563 L 2 4 L 3.519531 4 M 4 3 L 1 3 L 1 6 L 11 23 L 20 23 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 9.5 21.5 L 19.5 21.5 L 19.5 25.5 L 9.5 25.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 19 22 L 19 25 L 10 25 L 10 22 L 19 22 M 20 21 L 9 21 L 9 26 L 20 26 Z "></path>
+<path style=" fill:#98CCFD;" d="M 3 32.5 C 1.621094 32.5 0.5 31.378906 0.5 30 L 0.5 24.5 L 22.5 24.5 L 22.5 12 C 22.5 10.621094 23.621094 9.5 25 9.5 L 34.699219 9.5 C 35.292969 9.5 35.828125 9.851563 36.070313 10.390625 L 39.027344 17.039063 C 39.339844 17.746094 39.5 18.5 39.5 19.273438 L 39.5 30 C 39.5 31.378906 38.378906 32.5 37 32.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 34.699219 10 C 35.09375 10 35.453125 10.234375 35.613281 10.59375 L 38.570313 17.242188 C 38.855469 17.886719 39 18.570313 39 19.273438 L 39 30 C 39 31.101563 38.101563 32 37 32 L 3 32 C 1.898438 32 1 31.101563 1 30 L 1 25 L 23 25 L 23 12 C 23 10.898438 23.898438 10 25 10 L 34.699219 10 M 34.699219 9 L 25 9 C 23.34375 9 22 10.34375 22 12 L 22 24 L 0 24 L 0 30 C 0 31.65625 1.34375 33 3 33 L 37 33 C 38.65625 33 40 31.65625 40 30 L 40 19.273438 C 40 18.433594 39.824219 17.601563 39.484375 16.835938 L 36.527344 10.1875 C 36.207031 9.464844 35.492188 9 34.699219 9 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 29.5 21.5 C 28.949219 21.5 28.5 21.050781 28.5 20.5 L 28.5 13.5 C 28.5 12.949219 28.949219 12.5 29.5 12.5 L 37.007813 12.5 L 39.027344 17.039063 C 39.339844 17.746094 39.5 18.5 39.5 19.273438 L 39.5 21.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 36.683594 13 L 38.570313 17.242188 C 38.855469 17.886719 39 18.570313 39 19.273438 L 39 21 L 29.5 21 C 29.222656 21 29 20.777344 29 20.5 L 29 13.5 C 29 13.222656 29.222656 13 29.5 13 L 36.683594 13 M 37.332031 12 L 29.5 12 C 28.671875 12 28 12.671875 28 13.5 L 28 20.5 C 28 21.328125 28.671875 22 29.5 22 L 40 22 L 40 19.273438 C 40 18.433594 39.824219 17.601563 39.484375 16.835938 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 1.5 4 L 1.5 15.5 "></path>
+<path style=" fill:#FFFFFF;" d="M 38.5 24 L 39 24 L 39 27 L 38.5 27 C 37.671875 27 37 26.328125 37 25.5 C 37 24.671875 37.671875 24 38.5 24 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 1.5 29 L 1 29 L 1 26 L 1.5 26 C 2.328125 26 3 26.671875 3 27.5 C 3 28.328125 2.328125 29 1.5 29 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 35.5 32.5 C 35.5 34.710938 33.710938 36.5 31.5 36.5 C 29.289063 36.5 27.5 34.710938 27.5 32.5 C 27.5 30.289063 29.289063 28.5 31.5 28.5 C 33.710938 28.5 35.5 30.289063 35.5 32.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 31.5 29 C 33.429688 29 35 30.570313 35 32.5 C 35 34.429688 33.429688 36 31.5 36 C 29.570313 36 28 34.429688 28 32.5 C 28 30.570313 29.570313 29 31.5 29 M 31.5 28 C 29.015625 28 27 30.015625 27 32.5 C 27 34.984375 29.015625 37 31.5 37 C 33.984375 37 36 34.984375 36 32.5 C 36 30.015625 33.984375 28 31.5 28 Z "></path>
+<path style=" fill:#4788C7;" d="M 33 32.5 C 33 33.328125 32.328125 34 31.5 34 C 30.671875 34 30 33.328125 30 32.5 C 30 31.671875 30.671875 31 31.5 31 C 32.328125 31 33 31.671875 33 32.5 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 14.5 32.5 C 14.5 34.710938 12.710938 36.5 10.5 36.5 C 8.289063 36.5 6.5 34.710938 6.5 32.5 C 6.5 30.289063 8.289063 28.5 10.5 28.5 C 12.710938 28.5 14.5 30.289063 14.5 32.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 10.5 29 C 12.429688 29 14 30.570313 14 32.5 C 14 34.429688 12.429688 36 10.5 36 C 8.570313 36 7 34.429688 7 32.5 C 7 30.570313 8.570313 29 10.5 29 M 10.5 28 C 8.015625 28 6 30.015625 6 32.5 C 6 34.984375 8.015625 37 10.5 37 C 12.984375 37 15 34.984375 15 32.5 C 15 30.015625 12.984375 28 10.5 28 Z "></path>
+<path style=" fill:#4788C7;" d="M 12 32.5 C 12 33.328125 11.328125 34 10.5 34 C 9.671875 34 9 33.328125 9 32.5 C 9 31.671875 9.671875 31 10.5 31 C 11.328125 31 12 31.671875 12 32.5 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 1.5 15.5 L 2.5 15.5 C 3.605469 15.5 4.5 16.394531 4.5 17.5 L 4.5 18.5 C 4.5 19.605469 3.605469 20.5 2.5 20.5 C 1.394531 20.5 0.5 19.605469 0.5 18.5 "></path>
+</g>
+</svg>
\ No newline at end of file

mean4thai/src/assets/icons/transportation.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#98CCFD;" d="M 3 19.5 C 2.171875 19.5 1.5 18.828125 1.5 18 L 1.5 16 C 1.5 15.171875 2.171875 14.5 3 14.5 L 37 14.5 C 37.828125 14.5 38.5 15.171875 38.5 16 L 38.5 18 C 38.5 18.828125 37.828125 19.5 37 19.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 37 15 C 37.550781 15 38 15.449219 38 16 L 38 18 C 38 18.550781 37.550781 19 37 19 L 3 19 C 2.449219 19 2 18.550781 2 18 L 2 16 C 2 15.449219 2.449219 15 3 15 L 37 15 M 37 14 L 3 14 C 1.894531 14 1 14.894531 1 16 L 1 18 C 1 19.105469 1.894531 20 3 20 L 37 20 C 38.105469 20 39 19.105469 39 18 L 39 16 C 39 14.894531 38.105469 14 37 14 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 30 38.5 C 29.726563 38.5 29.5 38.277344 29.5 38 L 29.5 35 C 29.5 34.722656 29.726563 34.5 30 34.5 L 35 34.5 C 35.273438 34.5 35.5 34.722656 35.5 35 L 35.5 38 C 35.5 38.277344 35.273438 38.5 35 38.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 35 35 L 35 38 L 30 38 L 30 35 L 35 35 M 35 34 L 30 34 C 29.449219 34 29 34.449219 29 35 L 29 38 C 29 38.550781 29.449219 39 30 39 L 35 39 C 35.550781 39 36 38.550781 36 38 L 36 35 C 36 34.449219 35.550781 34 35 34 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 5 38.5 C 4.726563 38.5 4.5 38.277344 4.5 38 L 4.5 35 C 4.5 34.722656 4.726563 34.5 5 34.5 L 10 34.5 C 10.273438 34.5 10.5 34.722656 10.5 35 L 10.5 38 C 10.5 38.277344 10.273438 38.5 10 38.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 10 35 L 10 38 L 5 38 L 5 35 L 10 35 M 10 34 L 5 34 C 4.449219 34 4 34.449219 4 35 L 4 38 C 4 38.550781 4.449219 39 5 39 L 10 39 C 10.550781 39 11 38.550781 11 38 L 11 35 C 11 34.449219 10.550781 34 10 34 Z "></path>
+<path style=" fill:#98CCFD;" d="M 4.5 35.5 L 4.5 21 L 6.296875 5.769531 C 6.621094 3.339844 8.722656 1.5 11.183594 1.5 L 28.820313 1.5 C 31.277344 1.5 33.378906 3.339844 33.703125 5.777344 L 35.503906 21.058594 L 35.5 35.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 28.820313 2 C 31.027344 2 32.917969 3.652344 33.207031 5.828125 L 35 21.058594 L 35 35 L 5 35 L 5 21.058594 L 6.792969 5.84375 C 7.085938 3.652344 8.972656 2 11.179688 2 L 28.820313 2 M 28.820313 1 L 11.179688 1 C 8.460938 1 6.160156 3.015625 5.800781 5.710938 L 4 21 L 4 36 L 36 36 L 36 21 L 34.199219 5.710938 C 33.839844 3.015625 31.539063 1 28.820313 1 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 4.5625 20.5 L 6.070313 7.5 L 33.90625 7.5 L 35.4375 20.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 33.460938 8 L 34.875 20 L 5.121094 20 L 6.515625 8 L 33.460938 8 M 34.347656 7 L 5.625 7 L 4 21 L 36 21 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 33 26 C 33 27.105469 32.105469 28 31 28 C 29.894531 28 29 27.105469 29 26 C 29 24.894531 29.894531 24 31 24 C 32.105469 24 33 24.894531 33 26 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 11 26 C 11 27.105469 10.105469 28 9 28 C 7.894531 28 7 27.105469 7 26 C 7 24.894531 7.894531 24 9 24 C 10.105469 24 11 24.894531 11 26 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 12.582031 35.5 L 13.804688 27.421875 C 13.953125 26.324219 14.898438 25.5 16 25.5 L 24 25.5 C 25.101563 25.5 26.046875 26.324219 26.195313 27.414063 L 27.417969 35.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 24 26 C 24.851563 26 25.582031 26.636719 25.699219 27.496094 L 26.835938 35 L 13.164063 35 L 14.300781 27.484375 C 14.417969 26.636719 15.148438 26 16 26 L 24 26 M 24 25 L 16 25 C 14.644531 25 13.492188 26.003906 13.3125 27.347656 L 12 36 L 28 36 L 26.6875 27.347656 C 26.507813 26.003906 25.355469 25 24 25 Z "></path>
+</g>
+</svg>
\ No newline at end of file

mean4thai/src/assets/icons/trolleybus.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#4788C7;" d="M 24.785156 6 L 23.265625 6 C 22.988281 6 22.765625 5.777344 22.765625 5.5 C 22.765625 5.222656 22.988281 5 23.265625 5 L 24.300781 5 L 28.109375 0.1875 C 28.28125 -0.0273438 28.59375 -0.0625 28.8125 0.105469 C 29.027344 0.277344 29.0625 0.59375 28.890625 0.808594 Z "></path>
+<path style=" fill:#4788C7;" d="M 15.214844 6 L 16.734375 6 C 17.011719 6 17.234375 5.777344 17.234375 5.5 C 17.234375 5.222656 17.011719 5 16.734375 5 L 15.699219 5 L 11.890625 0.1875 C 11.71875 -0.0273438 11.40625 -0.0625 11.1875 0.105469 C 10.972656 0.277344 10.9375 0.59375 11.109375 0.808594 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 5 38.5 C 4.726563 38.5 4.5 38.277344 4.5 38 L 4.5 35 C 4.5 34.722656 4.726563 34.5 5 34.5 L 11 34.5 C 11.273438 34.5 11.5 34.722656 11.5 35 L 11.5 38 C 11.5 38.277344 11.273438 38.5 11 38.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 11 35 L 11 38 L 5 38 L 5 35 L 11 35 M 11 34 L 5 34 C 4.449219 34 4 34.449219 4 35 L 4 38 C 4 38.550781 4.449219 39 5 39 L 11 39 C 11.550781 39 12 38.550781 12 38 L 12 35 C 12 34.449219 11.550781 34 11 34 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 29 38.5 C 28.726563 38.5 28.5 38.277344 28.5 38 L 28.5 35 C 28.5 34.722656 28.726563 34.5 29 34.5 L 35 34.5 C 35.273438 34.5 35.5 34.722656 35.5 35 L 35.5 38 C 35.5 38.277344 35.273438 38.5 35 38.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 35 35 L 35 38 L 29 38 L 29 35 L 35 35 M 35 34 L 29 34 C 28.449219 34 28 34.449219 28 35 L 28 38 C 28 38.550781 28.449219 39 29 39 L 35 39 C 35.550781 39 36 38.550781 36 38 L 36 35 C 36 34.449219 35.550781 34 35 34 Z "></path>
+<path style=" fill:#98CCFD;" d="M 4.5 35.5 L 4.5 8 C 4.5 6.070313 6.070313 4.5 8 4.5 L 12.535156 4.5 L 12.652344 4.167969 C 13.007813 3.171875 13.949219 2.5 15 2.5 L 25 2.5 C 26.050781 2.5 26.992188 3.171875 27.347656 4.167969 L 27.464844 4.5 L 32 4.5 C 33.929688 4.5 35.5 6.070313 35.5 8 L 35.5 35.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 25 3 C 25.835938 3 26.589844 3.535156 26.875 4.335938 L 27.109375 5 L 32 5 C 33.652344 5 35 6.347656 35 8 L 35 35 L 5 35 L 5 8 C 5 6.347656 6.347656 5 8 5 L 12.890625 5 L 13.125 4.335938 C 13.410156 3.535156 14.164063 3 15 3 L 25 3 M 25 2 L 15 2 C 13.695313 2 12.597656 2.835938 12.183594 4 L 8 4 C 5.789063 4 4 5.789063 4 8 L 4 36 L 36 36 L 36 8 C 36 5.789063 34.210938 4 32 4 L 27.816406 4 C 27.402344 2.835938 26.304688 2 25 2 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 4.5 8.5 L 35.5 8.5 L 35.5 23.5 L 4.5 23.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 35 9 L 35 23 L 5 23 L 5 9 L 35 9 M 36 8 L 4 8 L 4 24 L 36 24 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 28 29 L 33 29 L 33 32 L 28 32 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 7 29 L 12 29 L 12 32 L 7 32 Z "></path>
+<path style=" fill:#98CCFD;" d="M 2 20.5 C 1.726563 20.5 1.5 20.277344 1.5 20 L 1.5 15 C 1.5 14.722656 1.726563 14.5 2 14.5 L 4.5 14.5 L 4.5 20.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 4 15 L 4 20 L 2 20 L 2 15 L 4 15 M 5 14 L 2 14 C 1.449219 14 1 14.449219 1 15 L 1 20 C 1 20.550781 1.449219 21 2 21 L 5 21 Z "></path>
+<path style=" fill:#98CCFD;" d="M 35.5 20.5 L 35.5 14.5 L 38 14.5 C 38.273438 14.5 38.5 14.722656 38.5 15 L 38.5 20 C 38.5 20.277344 38.273438 20.5 38 20.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 38 15 L 38 20 L 36 20 L 36 15 L 38 15 M 38 14 L 35 14 L 35 21 L 38 21 C 38.550781 21 39 20.550781 39 20 L 39 15 C 39 14.449219 38.550781 14 38 14 Z "></path>
+</g>
+</svg>
\ No newline at end of file

mean4thai/src/assets/icons/water-transportation.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#4788C7;" d="M 21 7 L 19 7 L 19 2 C 19 1.449219 19.449219 1 20 1 C 20.550781 1 21 1.449219 21 2 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 7.5 21.5 L 7.5 8.5 L 11.5 8.5 L 11.5 4.5 L 28.5 4.5 L 28.5 8.5 L 32.5 8.5 L 32.5 21.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 28 5 L 28 9 L 32 9 L 32 21 L 8 21 L 8 9 L 12 9 L 12 5 L 28 5 M 29 4 L 11 4 L 11 8 L 7 8 L 7 22 L 33 22 L 33 8 L 29 8 Z "></path>
+<path style=" fill:#4788C7;" d="M 19 8 L 21 8 L 21 10 L 19 10 Z "></path>
+<path style=" fill:#4788C7;" d="M 23 8 L 25 8 L 25 10 L 23 10 Z "></path>
+<path style=" fill:#4788C7;" d="M 15 8 L 17 8 L 17 10 L 15 10 Z "></path>
+<path style=" fill:#4788C7;" d="M 11 12 L 13 12 L 13 14 L 11 14 Z "></path>
+<path style=" fill:#4788C7;" d="M 23 12 L 25 12 L 25 14 L 23 14 Z "></path>
+<path style=" fill:#4788C7;" d="M 27 12 L 29 12 L 29 14 L 27 14 Z "></path>
+<path style=" fill:#4788C7;" d="M 15 12 L 17 12 L 17 14 L 15 14 Z "></path>
+<path style=" fill:#4788C7;" d="M 19 12 L 21 12 L 21 14 L 19 14 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 4.5 37.5 L 4.5 25.871094 L 1.734375 20.855469 C 1.429688 20.230469 1.441406 19.496094 1.78125 18.859375 C 2.121094 18.226563 2.726563 17.808594 3.441406 17.710938 L 20 15.503906 L 36.558594 17.710938 C 37.273438 17.808594 37.878906 18.226563 38.21875 18.859375 C 38.558594 19.496094 38.570313 20.230469 38.257813 20.878906 L 35.5 25.871094 L 35.5 37.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 20 16.007813 L 36.492188 18.207031 C 37.046875 18.28125 37.515625 18.605469 37.777344 19.097656 C 38.035156 19.582031 38.050781 20.144531 37.816406 20.640625 L 35.125 25.515625 L 35 25.742188 L 35 37 L 5 37 L 5 25.742188 L 4.875 25.515625 L 2.195313 20.65625 C 1.949219 20.15625 1.960938 19.585938 2.222656 19.097656 C 2.488281 18.605469 2.957031 18.28125 3.507813 18.207031 L 20 16.007813 M 20 15 L 3.375 17.21875 C 1.539063 17.460938 0.484375 19.433594 1.296875 21.097656 L 4 26 L 4 38 L 36 38 L 36 26 L 38.707031 21.097656 C 39.519531 19.433594 38.460938 17.460938 36.625 17.21875 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 2.222656 19.097656 C 1.960938 19.589844 1.949219 20.15625 2.195313 20.660156 L 4.875 25.515625 L 5 25.742188 L 5 37 L 20 37 L 20 16.007813 L 3.507813 18.207031 C 2.953125 18.28125 2.488281 18.605469 2.222656 19.097656 Z "></path>
+<path style=" fill:#4788C7;" d="M 31 23 C 31 21.894531 30.328125 21 29.5 21 C 28.671875 21 28 21.894531 28 23 C 28 24.105469 28.671875 25 29.5 25 C 30.328125 25 31 24.105469 31 23 Z "></path>
+<path style=" fill:#4788C7;" d="M 12 23 C 12 21.894531 11.328125 21 10.5 21 C 9.671875 21 9 21.894531 9 23 C 9 24.105469 9.671875 25 10.5 25 C 11.328125 25 12 24.105469 12 23 Z "></path>
+<path style=" fill:#98CCFD;" d="M 4.5 28.5 L 35.5 28.5 L 35.5 37.5 L 4.5 37.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 35 29 L 35 37 L 5 37 L 5 29 L 35 29 M 36 28 L 4 28 L 4 38 L 36 38 Z "></path>
+<path style=" fill:#98CCFD;" d="M 5 28 L 35 28 L 35 38 L 5 38 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 5 28 L 20 28 L 20 38 L 5 38 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 1 39 L 39 39 L 39 31.878906 C 37.691406 31.613281 36.148438 31 35 31 C 33.542969 31 31.4375 32 30 32 C 28.5625 32 26.457031 31 25 31 C 23.542969 31 21.4375 32 20 32 C 18.5625 32 16.457031 31 15 31 C 13.542969 31 11.4375 32 10 32 C 8.5625 32 6.457031 31 5 31 C 3.851563 31 2.308594 31.613281 1 31.878906 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 1.5 32.277344 C 1.863281 32.191406 2.238281 32.085938 2.613281 31.980469 C 3.460938 31.746094 4.335938 31.5 5 31.5 C 5.664063 31.5 6.535156 31.746094 7.382813 31.984375 C 8.28125 32.238281 9.214844 32.5 10 32.5 C 10.785156 32.5 11.71875 32.238281 12.617188 31.984375 C 13.464844 31.746094 14.335938 31.5 15 31.5 C 15.664063 31.5 16.535156 31.746094 17.382813 31.984375 C 18.28125 32.238281 19.214844 32.5 20 32.5 C 20.785156 32.5 21.71875 32.238281 22.617188 31.984375 C 23.464844 31.746094 24.335938 31.5 25 31.5 C 25.664063 31.5 26.535156 31.746094 27.382813 31.984375 C 28.28125 32.238281 29.214844 32.5 30 32.5 C 30.785156 32.5 31.71875 32.238281 32.617188 31.984375 C 33.464844 31.746094 34.335938 31.5 35 31.5 C 35.664063 31.5 36.539063 31.746094 37.386719 31.980469 C 37.761719 32.085938 38.136719 32.191406 38.5 32.277344 "></path>
+</g>
+</svg>
\ No newline at end of file

mean4thai/src/assets/scss/_badge.scss

+.tt-badge{
+	font-size: 14px;
+    padding: 1px 7px 2px;
+    color: #ffffff;
+    line-height: 1;
+    font-weight: 500;
+    height: 25px;
+    border: none;
+    outline: none;
+    position: relative;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    cursor: pointer;
+    white-space: nowrap;
+    border-radius: $base-radius;
+    color: #ffffff;
+    &:not([class^="tt-color"]){
+    	color:#d7dadc;
+    	background-color: #d7dadc;
+    	color: #182730;
+    }
+    &.tt-color01{
+    	background-color:#2e3192;
+    }
+    &.tt-color02{
+    	background-color:#4436f8;
+    }
+    &.tt-color03{
+    	background-color:#3ebafa;
+    }
+    &.tt-color04{
+    	background-color:#777da7;
+    }
+    &.tt-color05{
+    	background-color:#f26522;
+    }
+    &.tt-color06{
+    	background-color:#464646;
+    }
+    &.tt-color07{
+    	background-color:#1cbbb4;
+    }
+    &.tt-color08{
+    	background-color:#f4555b;
+    }
+    &.tt-color09{
+    	background-color:#00746b;
+    }
+    &.tt-color10{
+    	background-color:#f69679;
+    }
+    &.tt-color11{
+    	background-color:#7e7b47;
+    }
+    &.tt-color12{
+        background-color:#5674b9;
+    }
+    &.tt-color13{
+        background-color:#3cb878;
+    }
+    &.tt-color14{
+        background-color:#92278f;
+    }
+    &.tt-color15{
+        background-color:#00a651;
+    }
+    &.tt-color16{
+        background-color:#a864a8;
+    }
+    &.tt-color17{
+        background-color:#92278f;
+    }
+    &.tt-color18{
+        background-color:#448ccb;
+    }
+    &.tt-color19{
+        background-color:#39b54a;
+    }
+    &.tt-color20{
+        background-color:#ed9731;
+    }
+    &.tt-color21{
+        background-color:#8781bd;
+    }
+
+}
+.tt-list-badge{
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+    align-items: flex-start;
+	list-style: none;
+	padding: 0;
+	margin: -8px 0 0 -8px;
+	li{
+		margin-left: 8px;
+		margin-top: 8px;
+	}
+    &.tt-size-lg{
+        margin: -15px 0 0 -15px;
+        li{
+            margin: 15px 0 0 15px;
+        }
+        .tt-badge{
+            height: 39px;
+            font-size: 16px;
+            padding: 1px 14px 2px;
+            letter-spacing: 0.01em;
+        }
+    }
+}
+
+
+.nav-mytabs {
+  margin-top: 2rem;
+}
+
+.nav-mytabs li:not(:last-child) {
+  margin-right: 7px;
+}
+
+.nav-mytabs a {
+  position: relative;
+  top: 4px;
+  padding: 10px 25px;
+  border-radius: 2px 2px 0 0;
+  background: white;
+  color: black;
+  opacity: 0.7;
+  transition: all 0.1s ease-in-out;
+}
+
+.nav-mytabs a.active,
+.nav-mytabs a:hover {
+  opacity: 1;
+  top: 0;
+}
+
+.mytab-content {
+  position: relative;
+  z-index: 2;
+  padding: 25px;
+  border-radius: 0 4px 4px 4px;
+  background: white;
+}
\ No newline at end of file

mean4thai/src/assets/scss/_btn-create-topic.scss

+.tt-btn-create-topic{
+    display: inline-block;
+    position: fixed;
+    z-index: 23;
+    right: 15px;
+    @media (max-width: 1282px){
+        &.column-open{
+            z-index: 13;
+        }
+    }
+    .tt-icon{
+        transition: fill $speed linear;
+        fill:#ffffff;
+        svg{
+            width: 40px;
+            height: 40px;
+
+        }
+        &:hover{
+            fill:$default_color2;
+        }
+    }
+    @media (min-width: 1283px){
+        top: 14px;
+    }
+    @media (max-width: 1282px){
+        bottom: 20px;
+    }
+    &.column-open{
+        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5);
+      -webkit-transform: rotate(45deg);
+      -moz-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+      -o-transform: rotate(45deg);
+      transform: rotate(45deg);
+    }
+}

mean4thai/src/assets/scss/_categories_list.scss

+.tt-categories-title{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-content: stretch;
+    align-items: center;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #e2e7ea;
+    margin-bottom: 30px;
+    .tt-title{
+        color: $default_color_title;
+        font-size: 18px;
+        font-weight: 500;
+        letter-spacing: 0.01em;
+    }
+    .tt-search{
+        width: 255px;
+    }
+}
+.tt-categories-list{
+    .tt-item{
+        background-color: #ffffff;
+        border-radius:3px;
+        .tt-item-header{
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+            align-content: center;
+            align-items: center;
+            padding-bottom: 21px;
+            .tt-title{
+                color: $default_color2;
+                font-size: 14px;
+                line-height: 26px;
+                margin-bottom: 0;
+                font-weight: 400;
+                a{
+                    color: $default_color2;
+                    transition: color .2s linear;
+                    &:hover{
+                        color: $default_color;
+                    }
+                }
+            }
+        }
+        .tt-item-layout{
+            .tt-title{
+                font-size: 14px;
+                line-height: 26px;
+                color: $default_color2;
+                font-weight: 700;
+                margin-bottom: 6px;
+            }
+            .innerwrapper{
+                letter-spacing: 0.01em;
+                &:not(:first-child){
+                    margin-top: 12px;
+                }
+            }
+            .tt-btn-icon{
+               margin-top: 19px;
+               padding-left: 0;
+               padding-bottom: 0;
+               height: auto;
+               svg{
+                    width: 20px;
+                    height: 18px;
+               }
+            }
+        }
+    }
+    @media (min-width: 576px){
+        margin-top: -30px;
+        .tt-item{
+            padding: 30px;
+            margin-top: 30px;
+        }
+    }
+    @media (max-width: 575px){
+        margin-top: -20px;
+        .tt-item{
+            padding: 20px;
+            margin-top: 20px;
+            .tt-item-header{
+                padding-bottom: 11px;
+            }
+            .tt-item-layout{
+                .innerwrapper{
+                    &:not(:first-child){
+                        margin-top: 2px;
+                    }
+                }
+                .tt-btn-icon{
+                    margin-top: 16px;
+                }
+            }
+        }
+    }
+}

mean4thai/src/assets/scss/_categories_single.scss

+.tt-catSingle-title{
+    padding: 0 0 30px;
+    letter-spacing: 0.01em;
+    border-bottom: 1px solid $border;
+    .tt-row{
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        align-content: center;
+        align-items: center;
+        .tt-col-left{
+            flex: 2 1 auto;
+        }
+        .tt-col-item{
+            display: inline-block;
+        }
+        .tt-search{
+            width: 255px;
+        }
+    }
+    .tt-value{
+        color: $default_color2;
+        font-size: 14px;
+        line-height: 26px;
+        font-weight: 400;
+    }
+    .tt-title{
+        color: $default_color2;
+        font-size: 14px;
+        font-weight: 700;
+        padding-bottom: 6px;
+        margin-bottom: 0;
+    }
+    .tt-btn-icon .tt-icon svg{
+        width: 20px;
+        height: 18px;
+    }
+    .tt-innerwrapper{
+        &:not(:first-child){
+            margin-top: 13px;
+        }
+    }
+    @media (min-width: 768px){
+        margin-left: 30px;
+        margin-right: 30px;
+        .tt-row{
+            .tt-col-right{
+                .tt-col-item{
+                    margin-left: 11px;
+                }
+            }
+        }
+    }
+    @media (max-width: 767px){
+        margin-left: 10px;
+        margin-right: 10px;
+        .tt-search{
+            width: auto !important;
+            .search-wrapper{
+                display: none;
+            }
+            .tt-search-toggle{
+                display: inline-block;
+            }
+        }
+        .tt-btn-icon{
+            padding-left: 10px;
+            padding-right: 10px;
+        }
+    }
+}
\ No newline at end of file

mean4thai/src/assets/scss/_custom_magnific_popup.scss

+.mfp-gallery{
+	button{
+		outline: none;
+	}
+}
+.mfp-with-zoom .mfp-container,
+.mfp-with-zoom.mfp-bg {
+	opacity: 0;
+	-webkit-backface-visibility: hidden;
+	transition: all 0.3s ease-out;
+}
+.mfp-with-zoom.mfp-ready .mfp-container {
+ 	opacity: 1;
+}
+.mfp-with-zoom.mfp-ready.mfp-bg {
+	opacity: 0.8;
+}
+.mfp-with-zoom.mfp-removing .mfp-container,
+.mfp-with-zoom.mfp-removing.mfp-bg {
+	opacity: 0;
+}
\ No newline at end of file

mean4thai/src/assets/scss/_default_tabs.scss

+/*
+    default tabs
+*/
+.tt-tab-wrapper{
+    .nav-tabs{
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        align-content: flex-start;
+        align-items: center;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        border-bottom:1px solid $border;
+        .nav-item{
+            a{
+                color: $default_color2;
+                display: inline-block;
+                transition: color 0.2s linear;
+                font-weight: 500;
+                span{
+                    padding-top: 22px;
+                    padding-bottom: 23px;
+                    display: inline-block;
+                    position: relative;
+                    letter-spacing: 0.01em;
+                    &:after{
+                        content: '';
+                        display: block;
+                        position: absolute;
+                        background-color: transparent;
+                        bottom: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 2px;
+                        transition: background-color 0.2s linear;
+                    }
+                }
+                &:hover{
+                    color: $default_color;
+                }
+                &.active{
+                    color: $default_color;
+                    span{
+                        &:after{
+                             background-color: $default_color;
+                        }
+                    }
+                }
+            }
+            &:first-child{
+                a{
+                    padding-left: 0;
+                }
+            }
+            &:last-child{
+                a{
+                    padding-right: 0;
+                }
+            }
+            @media (min-width: 992px){
+                padding-left: 14px;
+                padding-right: 14px;
+                &:first-child{
+                    padding-left: 0;
+                }
+            }
+            @media (max-width: 991px){
+                padding-left: 12px;
+                padding-right: 12px;
+                &:first-child{
+                    padding-left: 0;
+                }
+            }
+            @media (max-width: 767px){
+              &.tt-hide-md{
+                display: none;
+              }
+            }
+            @media (max-width: 575px){
+                &.tt-hide-xs{
+                    display: none;
+               }
+            }
+        }
+    }
+    .tab-content{
+        .tab-pane{
+            &:not(.active){
+                display: none;
+            }
+            &:not(.tt-indent-none){
+                padding: 40px 0 0 0;
+            }
+        }
+    }
+}

mean4thai/src/assets/scss/_editor.scss

+/*
+    Editor
+*/
+.pt-editor{
+    padding-top: 36px;
+    .pt-title{
+        color: $default_color2;
+        font-weight: 600;
+        font-size: 16px;
+        line-height: 26px;
+        margin: 0;
+        padding: 0 0 12px 0;
+        letter-spacing: 0.01em;
+    }
+    .pt-row{
+        padding-bottom: 12px;
+        [class^=col]{
+            &:first-child{
+                padding-left: 0;
+            }
+            &:last-child{
+                padding-right: 0;
+            }
+        }
+        @media (min-width: 576px){
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+            align-content: stretch;
+            align-items: flex-start;
+        }
+        @media (max-width: 575px){
+            display: flex;
+            flex-direction: column;
+            flex-wrap: wrap;
+        }
+        > *:not(:last-child){
+            margin-bottom: 10px;
+        }
+    }
+    textarea{
+        height:169px;
+    }
+    .btn-custom{
+        min-width: 97px;
+    }
+    .pt-edit-btn{
+        padding: 0 0 8px 0;
+        margin: 0 0 0 -14px;
+        list-style: none;
+        .btn-icon{
+            background: none;
+            outline: none;
+            border: none;
+            padding: 5px 14px;
+            svg{
+                width: 18px;
+                height: 18px;
+                transition:fill $speed linear
+            }
+            & + .btn-icon{
+                margin-right: 22px;
+            }
+            &:hover{
+                fill: $default_color;
+            }
+        }
+        hr{
+            display: none;
+        }
+    }
+    .btn-width-lg{
+        min-width: 160px;
+    }
+    @media (min-width: 576px){
+        .pt-edit-btn{
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            justify-content: flex-start;
+            align-content: stretch;
+            align-items: flex-start;
+        }
+    }
+    @media (max-width: 575px){
+        .pt-edit-btn{
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            justify-content: space-around;
+            align-content: stretch;
+            align-items: center;
+            padding-bottom: 3px;
+            li.hr{
+                display: block;
+                width: 100%;
+                height: 1px;
+                margin:12px 0 10px;
+                background-color: $border;
+            }
+            .btn-icon{
+                padding-left: 8px;
+                padding-right: 8px;
+            }
+        }
+    }
+}

mean4thai/src/assets/scss/_followers_list.scss

+/*
+	Followers List
+*/
+.tt-followers-list{
+	> .tt-item{
+		&:nth-child(odd){
+			background-color: $default_color3;
+		}
+		&:nth-child(even){
+			background-color: #ffffff;
+		}
+	}
+	.tt-list-header{
+		display: flex;
+	    flex-direction: row;
+	    flex-wrap: nowrap;
+	    justify-content: space-between;
+	    align-content: center;
+	    align-items: center;
+		padding-left: 15px;
+		padding-right: 15px;
+		color: $default_color_title;
+		font-weight: 500;
+		font-size: 14px;
+		letter-spacing: 0.01em;
+		> [class^="tt-col"]{
+			padding: 20px 15px 22px;
+		}
+		&.tt-border-bottom{
+			border-bottom:2px solid $border02;
+			margin-bottom: 30px;
+		}
+		.tt-col-name{
+			width: 22.666%;
+		}
+		.tt-col-value-large{
+			width: 16.666%;
+		}
+		.tt-col-value{
+			width: 10%;
+			max-width: 95px;
+			width: 95px;
+		}
+	}
+	.tt-item{
+		display: flex;
+	    flex-direction: row;
+	    flex-wrap: nowrap;
+	    justify-content: space-between;
+	    align-content: center;
+	    align-items: center;
+	    min-height: 101px;
+	    padding: 20px 15px;
+	    @media (max-width: 767px){
+	    	padding-left: 10px;
+	    	padding-right: 10px;
+	    }
+		> [class^="tt-col"]{
+			@media (min-width: 1025px){
+				padding-left: 15px;
+				padding-right: 15px;
+			}
+			@media (max-width: 1024px){
+				padding-left: 10px;
+				padding-right: 10px;
+			}
+		}
+		.tt-col-avatar{
+	   		.tt-icon{
+				width: 40px;
+				height: 40px;
+			}
+		}
+		.tt-col-description{
+			@media (min-width: 1025px){
+				padding-left: 30px;
+			}
+			@media (max-width: 1024px){
+				padding-left: 15px;
+			}
+			.tt-title{
+				color: $default_color_title;
+				font-size: 16px;
+				line-height: 20px;
+				font-weight: 500;
+				margin: 0;
+				padding: 0 0 0px 0;
+				letter-spacing: 0.01em;
+				a{
+					color: $default_color_title;
+					display: inline-block;
+					position: relative;
+					&:before{
+						content: '';
+					    display: block;
+					    position: absolute;
+					    bottom: 2px;
+					    width: 0%;
+					    height: 1px;
+					    margin: auto;
+					    left: 0;
+					    right: 0;
+					    background-color: $default_color_title;
+					    transition: width .2s linear;
+					}
+					&:hover{
+						&:before{
+							width: 100%;
+						}
+					}
+				}
+			}
+			ul{
+				list-style: none;
+				margin: 0;
+				padding: 0;
+				li{
+					a{
+						color: #666f74;
+						font-size: 14px;
+						transition: color .2s linear;
+						&:hover{
+							color: #2172cd;
+						}
+					}
+				}
+			}
+		}
+		.tt-col-merged{
+			display: flex;
+		    flex-direction: row;
+		    flex-wrap: nowrap;
+		    justify-content: flex-start;
+		    align-content: center;
+		    align-items: center;
+		    width: 22.666%;
+		}
+		.tt-col-value-large{
+			width: 16.666%;
+		}
+		.tt-col-value{
+			width: 10%;
+			max-width: 95px;
+			width: 95px;
+		}
+		.tt-color-select{
+			color: #182730;
+    		font-weight: 500;
+		}
+	}
+	.show-mobile{
+		@media (min-width: 992px){
+			display: none;
+		}
+	}
+	.hide-mobile{
+		@media (max-width: 991px){
+			display: none;
+		}
+	}
+}
+.tt-row-btn{
+	text-align: center;
+	padding: 65px 0;
+	.btn-icon{
+		background-color: transparent;
+		border: none;
+		padding: 5px;
+		display: inline-block;
+		outline: none;
+		svg{
+			width: 23px;
+			height: 29px;
+			fill: #666f74;
+			transition: fill 0.2s linear;
+		}
+		&:hover{
+			svg{
+				fill: $default_color2;
+			}
+		}
+	}
+	@media (max-width: 767px){
+		padding: 45px 0;
+	}
+}

mean4thai/src/assets/scss/_form.scss

+/*
+	Form
+*/
+
+/* form_placeholder */
+$form_placeholder:									#666f74;
+
+::-webkit-input-placeholder{color:$form_placeholder;}
+::-moz-placeholder      {color:$form_placeholder;}
+:-moz-placeholder       {color:$form_placeholder;}
+:-ms-input-placeholder  {color:$form_placeholder;}
+
+::-moz-placeholder, :-moz-placeholder {
+    opacity: 1;
+}
+
+input:focus::-webkit-input-placeholder{color:transparent;}
+input:focus:-moz-placeholder{color:transparent;}
+input:focus::-moz-placeholder{color:transparent;}
+input:focus:-ms-input-placeholder{color:transparent;}
+
+
+textarea:focus::-webkit-input-placeholder{color:transparent;}
+textarea:focus:-moz-placeholder{color:transparent;}
+textarea:focus::-moz-placeholder{color:transparent;}
+textarea:focus:-ms-input-placeholder{color:transparent;}
+
+
+/*
+    Default form
+*/
+.form-default{
+    position: relative;
+    .form-group{
+        margin-bottom: 13px;
+        label:not(.error){
+            font-size: 16px;
+            line-height: 26px;
+            font-weight: 600;
+            color: $default_color2;
+            padding-bottom: 14px;
+            margin-bottom: 0;
+            letter-spacing: 0.01em;
+        }
+    }
+    .form-control{
+        font-family: $default_font;
+        background: #e2e7ea;
+        color: #666f74;
+        font-size: 16px;
+        line-height: 25px;
+        border: none;
+        box-shadow:none;
+        outline: none;
+        width: 100%;
+        font-weight: 500;
+        letter-spacing: 0.01em;
+        border-radius:3px;
+        border:1px solid #e2e7ea;
+        transition: border-color 0.2s linear;
+    }
+    .tt-note{
+        color: #666f74;
+        font-size: 14px;
+        margin-top: 5px;
+        letter-spacing: 0.01em;
+    }
+    .form-control:not(textarea){
+        padding:7px 12px 10px 13px;
+        height: 39px;
+    }
+    input.form-control,
+    textarea.form-control{
+        -webkit-appearance: none;
+    }
+    textarea.form-control{
+        padding:20px 30px 23px 28px;
+    }
+    select.form-control{
+        padding:7px 12px 10px 10px;
+        cursor: pointer;
+    }
+    .form-control.error{
+        border-color: red;
+    }
+    .form-control:focus{
+        border-color:#2172cd;
+    }
+    .pt-required{
+        display: inline-block;
+        float: right;
+        position: relative;
+        top: 4px;
+        color: #777777;
+        padding-left: 5px;
+        font-size: 14px;
+        line-height: 22px;
+    }
+    .tt-value-wrapper{
+        position: relative;
+        .tt-value-input{
+            position: absolute;
+            top: 10px;
+            right: 15px;
+            color: #666f74;
+            font-size: 14px;
+            line-height: 18px;
+            pointer-events: none;
+        }
+    }
+    /* Custom Input Search */
+    .form-control.pt-customInputSearch{
+        padding-left: 48px;
+    }
+    .pt-customInputIcon{
+        position: absolute;
+        top: 5px;
+        left: 15px;
+        svg{
+            width: 18px;
+            height: 18px;
+            fill: #666f74;
+        }
+    }
+}
+/* checkbox-group */
+.checkbox-group{
+    position: relative;
+    display: inline-block;
+    z-index: 1;
+    width: 100%;
+    label{
+        cursor: pointer;
+        text-align: left;
+        position: relative;
+        transition:all $speed linear;
+        padding-bottom: 0;
+        .box,
+        .check{
+            position: absolute;
+            display: inline-block;
+            left: 0;
+            top: 0px;
+            left: 0px;
+            height: 26px;
+            width: 26px;
+            transition-duration: 0.12s;
+        }
+        .box{
+            background-color: #e2e7ea;
+            z-index: 2;
+            border-radius: $base-radius;
+        }
+        .check{
+            opacity: 0;
+            z-index: 10;
+            line-height: 1;
+            transform: scale(0);
+            &:before{
+                position: relative;
+                display: block;
+                pointer-events: none;
+                content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxNiAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgNS4xNjY2N0w2LjM4NDYyIDExTDE1IDEiIHN0cm9rZT0iIzE4MjczMCIgc3Ryb2tlLXdpZHRoPSIxLjYiLz4KPC9zdmc+Cg==');
+                left:5px;
+                top: 7px;
+            }
+        }
+        .tt-text{
+            padding-left: 41px;
+             font-size: 16px;
+            line-height: 23px;
+            color: #666f74;
+            position: relative;
+            display: inline-block;
+            top: 1px;
+            letter-spacing: 0.01em;
+        }
+    }
+    &:hover{
+        label{
+            color: $default_color;
+        }
+    }
+    input[type=checkbox]{
+        display: none;
+        &:checked ~ label .check{
+            opacity: 1;
+            transform: scale(1);
+        }
+    }
+}
+.form-control + .checkbox-group{
+    margin-top: 14px;
+}
+
+/*Custom select (*header)*/
+select:disabled.simple-control::-ms-expand {
+    display: none;
+}
+.custom-select-01{
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+    select{
+        outline: none;
+        border: none;
+        border-color:transparent;
+        background:transparent;
+        font-weight: 500;
+        line-height: 22px;
+        font-size: 16px;
+        padding: 8px 22px 5px 10px;
+        color: $default_color2;
+        cursor: pointer;
+       appearance: none;
+       transition: color 0.2s linear;
+       letter-spacing: 0.01em;
+        option {
+            background-color: #ffffff;
+            border: 0;
+            color: #333333;
+            padding: 10px;
+        }
+    }
+    select:hover{
+        color: #2172cd;
+    }
+    &::before,
+    &::after{
+        content: "";
+        position: absolute;
+        pointer-events: none;
+    }
+    &::before{
+        content:'';
+        display: block;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width:12px;
+        height: 12px;
+        background: #ffffff;
+    }
+    &::after{
+        content: "";
+        background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_25' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 81 45' style='enable-background:new 0 0 81 45;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23666F74;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M40.5,45c-1.15,0-2.3-0.44-3.18-1.32l-36-36c-1.76-1.76-1.76-4.61,0-6.36c1.76-1.76,4.61-1.76,6.36,0 L40.5,34.13L73.32,1.32c1.76-1.76,4.61-1.76,6.36,0c1.76,1.76,1.76,4.61,0,6.36l-36,36C42.8,44.56,41.65,45,40.5,45z'/%3E%3C/g%3E%3C/svg%3E%0A");
+        width:12px;
+        height: 7px;
+        line-height: 1;
+        right: 0px;
+        position: absolute;
+        top: 50%;
+        margin-top:-4px;
+    }
+}
+
+
+/*
+    Form Create Topic
+*/
+.form-create-topic{
+    &.form-default{
+        .form-group label:not(.error){
+            padding-bottom: 22px;
+        }
+    }
+    .btn{
+        margin-top: 17px;
+    }
+}
+

mean4thai/src/assets/scss/_gallery.scss

+/*
+    Gallery
+ */
+.tt-gallery-layout{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-content: stretch;
+    align-items: flex-start;
+    @media (min-width: 1025px){
+        margin-top: -30px;
+        margin-left: -30px;
+        .tt-item{
+            margin-top: 30px;
+            margin-left: 30px;
+            width: calc(33.333% - 30px);
+        }
+    }
+    @media (max-width: 1024px){
+        margin-top: -20px;
+        margin-left: -20px;
+        .tt-item{
+            margin-top: 20px;
+            margin-left: 20px;
+            width: calc(33.333% - 20px);
+        }
+    }
+    @media (max-width: 470px){
+        .tt-item{
+            width: calc(50% - 20px);
+        }
+    }
+}
+.tt-gallery-obj{
+    display: block;
+    position: relative;
+    transition: all 0.3s linear;
+    img{
+        width: 100%;
+        height: auto;
+    }
+    &:before{
+        content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTQ0IDkwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxNDQgOTA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNmZmZmZmY7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik03MiwwQzMyLjI0LDAsMCwzNiwwLDQ1czMyLjI0LDQ1LDcyLDQ1czcyLTM2LDcyLTQ1UzExMS43NiwwLDcyLDB6IE03Miw3MmMtMTQuOTEsMC0yNy0xMi4wOS0yNy0yNw0KCWMwLTE0LjkxLDEyLjA5LTI3LDI3LTI3YzE0LjkxLDAsMjcsMTIuMDksMjcsMjdDOTksNTkuOTEsODYuOTEsNzIsNzIsNzJ6Ii8+DQo8L3N2Zz4NCg==');
+        display: block;
+        top: 50%;
+        left: 50%;
+        margin-top: -13px;
+        margin-left: -20px;
+        width: 40px;
+        height: 25px;
+        position: absolute;
+        display: block;
+        transition: all 0.1s linear;
+        pointer-events: none;
+    }
+    @media (min-width: 1025px){
+        &:before{
+            transform: scale(0);
+        }
+        &:hover{
+            &:before{
+                transform: scale(1);
+            }
+        }
+    }
+}
\ No newline at end of file

mean4thai/src/assets/scss/_header.scss

+/*
+	Header
+*/
+#tt-header{
+	position: fixed;
+	top: 0;
+	width: 100%;
+	background-color:#ffffff;
+	border-bottom: 1px solid #e2e7ea;
+	z-index: 17;
+	.tt-row > .col-auto{
+		min-height: 69px;
+	    align-items: center;
+	    display: flex;
+	}
+	> [class^="container"]{
+		@media (min-width: 1025px){
+			padding-left: 45px;
+			padding-right: 45px;
+		}
+		@media (max-width: 1024px){
+			padding-left: 25px;
+			padding-right: 25px;
+		}
+		@media (max-width: 575px){
+			padding-left: 10px;
+			padding-right: 10px;
+		}
+	}
+	// additional styles for objects
+	.tt-logo{
+		& + *{
+			margin-left: 45px;
+		}
+		@media (max-width: 1229px){
+			& + *{
+				margin-left: 26px;
+			}
+		}
+		@media (max-width: 1024px){
+			& + *{
+				margin-left: 10px;
+			}
+		}
+		img{
+			max-width:36px;
+			height: auto;
+		}
+	}
+	.tt-desktop-menu{
+		& + *{
+			margin-left: 36px;
+		}
+		@media (max-width: 1229px){
+			& + *{
+				margin-left: 25px;
+			}
+			nav > ul > li > a{
+				padding-left: 7px;
+				padding-right: 7px;
+			}
+		}
+		@media (max-width: 767px){
+			& + *{
+				margin-left: 20px;
+			}
+		}
+	}
+	.tt-search{
+		@media (max-width: 1229px){
+			width: 250px;
+		}
+		@media (max-width: 767px){
+			width: 210px;
+		}
+		@media (max-width: 575px){
+			width: 142px;
+		}
+		@media (max-width: 440px){
+			width: 137px;
+		}
+		@media (max-width: 413px){
+			width: inherit;
+		}
+		@media (max-width: 413px){
+		&{
+			position: static;
+			.search-wrapper{
+				display: none;
+				display: -ms-flexbox;
+			      display: -webkit-flex;
+			      display: flex;
+			      -webkit-flex-direction: row;
+			      -ms-flex-direction: row;
+			      flex-direction: row;
+			      -webkit-flex-wrap: nowrap;
+			      -ms-flex-wrap: nowrap;
+			      flex-wrap: nowrap;
+			      -webkit-justify-content: flex-start;
+			      -ms-flex-pack: start;
+			      justify-content: flex-start;
+			      -webkit-align-content: flex-start;
+			      -ms-flex-line-pack: start;
+			      align-content: flex-start;
+			      -webkit-align-items: center;
+			      -ms-flex-align: center;
+			      align-items: center;
+			      background: #ffffff;
+			      position: absolute;
+			      z-index: -2;
+			      opacity: 0;
+			      width: 100vh;
+			      top: 15px;
+			      left: 0;
+			      .tt-search__close{
+			      	display: inline-block;
+			      }
+				}
+				&.tt-open-popup{
+					.search-wrapper{
+						top: 0;
+						height: 100%;
+						z-index: 3;
+	    				opacity: 1;
+					}
+				}
+			}
+		}
+	}
+	.tt-account-btn{
+		@media (max-width: 767px){
+			[class^="btn"]{
+				background: transparent;
+				color: #182730;
+				padding-left: 9px;
+				padding-right: 9px;
+				&:not(:first-child){
+					margin-left: 0px;
+				}
+				&:hover{
+					color: #2172cd;
+				}
+			}
+		}
+		@media (max-width: 440px){
+			[class^="btn"]{
+				padding-left: 7px;
+				padding-right: 7px;
+			}
+		}
+	}
+}

mean4thai/src/assets/scss/_header_objects.scss

+/* header logo*/
+.tt-logo{
+	display: inline-block;
+	position: relative;
+}
+/* header desktop-menu*/
+.tt-desktop-menu{
+	@media (max-width: 1024px){
+		display: none;
+	}
+	display: inline-block;
+	position: relative;
+    nav{
+    	> ul{
+    		display: flex;
+		    flex-direction: row;
+		    flex-wrap: wrap;
+		    justify-content: flex-start;
+		    align-content: flex-start;
+		    align-items: flex-start;
+		    list-style: none;
+		    padding: 0;
+		    margin: 0;
+		    > li{
+		    	position: relative;
+		    	> a{
+		    		font-size: 16px;
+		    		line-height: 30px;
+		    		color: #182730;
+		    		font-weight: 500;
+		    		padding: 0px 15px;
+		    		display: inline-block;
+		    		text-decoration:none;
+		    		letter-spacing: 0.01em;
+		    		transition: all $speed linear;
+		    		span{
+		    			display: inline-block;
+		    			position: relative;
+		    			padding-top: 18px;
+		    			padding-bottom: 20px;
+						&:before{
+							content: '';
+						    display: block;
+						    position: absolute;
+						    bottom: -2px;
+						    width: 0%;
+						    height: 2px;
+						    margin: auto;
+						    left: 0;
+						    right: 0;
+						    z-index: 10;
+						    background-color: $default_color;
+						    transition: width $speed linear;
+						}
+		    		}
+		    		&.is-hover{
+						span{
+		    				&:before{
+		    					width: 100%;
+		    				}
+		    			}
+					}
+		    		&:hover{
+		    			span{
+		    				&:before{
+		    					width: 100%;
+		    				}
+		    			}
+		    		}
+		    	}
+		    	ul{
+	                visibility: hidden;
+	                pointer-events: none;
+	                opacity:0;
+	                transition: opacity .2s linear;
+	                display: block;
+	                margin: 0;
+	                padding: 17px 0 19px 0;
+	                width: 255px;
+	                position: absolute;
+	                z-index: 7;
+	                top: auto;
+	                left: 0px;
+	                background-color: #ffffff;
+	                border-top:1px solid $border;
+	                box-shadow: 0 2px 3px rgba(0,0,0,.09);
+	                li{
+	                    display: block;
+	                    position: relative;
+	                    a{
+	                        color: $default_text;
+	                        font-size: 16px;
+	                        line-height:22px;
+	                        padding: 5px 10px 5px 30px;
+	                        display: block;
+	                        position: relative;
+	                        transition: all .2s linear;
+	                        &:hover,
+	                        &.active,
+	                        &.is-hover{
+	                            color: #182730;
+	                            font-weight: 600;
+	                        }
+	                    }
+	                }
+	                ul{
+	                	margin-top: -18px;
+	                    &:not(.right-popup){
+	                        top: 0;
+	                        left: 100%;
+	                    }
+	                    &.right-popup{
+	                        left: -100%;
+	                        top: 0;
+	                    }
+	                }
+	            }
+		    	&.active{
+		    		> a{
+		    			span{
+		    				&:before{
+		    					width: 100%;
+		    				}
+		    			}
+		    		}
+		    	}
+		    }
+		    li{
+		    	&:hover{
+		    		> ul{
+                    	visibility: visible;
+                    	pointer-events: auto;
+                    	opacity:1;
+                    	z-index: 9;
+                    	transition: opacity .2s linear;
+                    }
+		    	}
+		    }
+    	}
+    }
+}
+/* header search*/
+.tt-search{
+	display: inline-block;
+	position: relative;
+	width: 350px;
+	form{
+		display: block;
+	}
+	.tt-search__input{
+		border: none;
+		background-color: transparent;
+		border: none;
+		outline: none;
+		font-size: 16px;
+		color: #182730;
+		font-weight: 500;
+		letter-spacing: 0.01em;
+		padding: 3px 15px 5px 47px;
+		width: 100%;
+		background-color: #e2e7ea;
+		border-radius: $base-radius;
+		height: 39px;
+	}
+	.tt-search__btn{
+		background:none;
+		border: none;
+		outline: none;
+		position: absolute;
+		left: 0;
+		top: 0;
+		padding: 5px 5px 7px 15px;
+		.tt-icon{
+			width: 18px;
+			height: 18px;
+			fill:#666f74;
+		}
+		&:hover{
+			.tt-icon{
+				fill: #2172cd;
+			}
+		}
+	}
+	.tt-search__close{
+		position: absolute;
+		right: -43px;
+		top: 2px;
+		display: none;
+		background: none;
+		border:none;
+		outline: none;
+		padding: 5px 15px;
+		.tt-icon{
+			width: 13px;
+			height: 13px;
+			transition: fill 0.2s linear;
+		}
+		&:hover{
+			.tt-icon{
+				fill: #2172cd;
+			}
+		}
+	}
+	.search-form{
+		position: relative;
+	}
+	.search-wrapper{
+		display: block;
+	}
+	.search-results{
+		position: absolute;
+		background-color: #ffffff;
+		border-left:1px solid #e2e7ea;
+		border-right:1px solid #e2e7ea;
+		border-bottom:1px solid #e2e7ea;
+		top: auto;
+		left: 0;
+		margin-top: -2px;
+		width: 100%;
+		padding: 1px;
+		border-radius:3px;
+		display: none;
+		ul{
+			list-style: none;
+			padding: 0;
+			margin: 0;
+			background-color: #ffffff;
+			overflow: hidden;
+			li{
+				&:not(:last-child){
+					border-bottom: 1px solid #e2e7ea;
+				}
+				a{
+					color: #666f74;
+					display: block;
+					padding:24px 30px 22px;
+					transition: color .2s linear;
+					.tt-title{
+						color: #182730;
+						font-size: 16px;
+						line-height: 1;
+						padding: 0;
+						margin: 0;
+						position: relative;
+						display: inline-block;
+						transition: color .2s linear;
+					}
+					&:hover{
+						.tt-title{
+							color: #2172cd;
+						}
+					}
+				}
+				.tt-description{
+					font-size: 14px;
+					line-height: 1;
+				}
+				> a,
+				.tt-title,
+				.tt-description{
+				 	white-space: nowrap;
+				    overflow: hidden;
+				    text-overflow: ellipsis;
+				}
+				&:nth-child(odd){
+					background-color: #f8f9fa;
+				}
+			}
+		}
+		.tt-view-all{
+			background-color: #ffffff;
+			border: none;
+			outline: none;
+			padding: 0;
+			margin: 0;
+			text-align: center;
+			color: #666f74;
+			font-size: 16px;
+			line-height: 1.1;
+			height: 39px;
+			width: 100%;
+			font-weight: 500;
+			transition: color .2s linear;
+			&:hover{
+				color: #182730;
+			}
+		}
+	}
+	.tt-search-scroll{
+		height: 261px;
+		overflow: hidden;
+		position: relative;
+	}
+}
+.tt-search-toggle{
+	@media (min-width: 414px){
+		display: none;
+	}
+	background: none;
+	border: none;
+	outline: none;
+	.tt-icon{
+		width: 18px;
+		height: 18px;
+		fill:#666f74;
+	}
+	&:hover{
+		.tt-icon{
+			fill: #2172cd;
+		}
+	}
+	&:focus{
+		outline: none;
+	}
+}
+/*tt-account-btn*/
+.tt-account-btn{
+	display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+    align-items: flex-start;
+	[class^="btn"]{
+		margin-top: 7px;
+		margin-bottom: 7px;
+		&:not(:first-child){
+			margin-left: 15px;
+		}
+	}
+}
+/* toggle-mobile-menu */
+.toggle-mobile-menu{
+	@media (min-width: 1025px){
+		display: none;
+	}
+	padding: 10px;
+	margin-right: 10px;
+	.tt-icon{
+		width: 16px;
+		height: 14px;
+		fill:#666f74;
+		transition: fill $speed linear;
+	}
+	&:hover{
+		.tt-icon{
+			fill:#2172cd;
+		}
+	}
+}
+/* tt-user-info */
+.tt-user-info{
+	select{
+		max-width: 120px;
+		overflow: hidden;
+	}
+	> *:not(:first-child){
+		@media (min-width: 1230px){
+			margin-left: 12px;
+		}
+		@media (max-width: 1229px){
+			margin-left: 0px;
+		}
+		&.custom-select-01{
+			margin-left: 6px;
+		}
+	}
+	@media (max-width: 767px){
+		.custom-select-01{
+			select{
+				width: 23px;
+				padding-left: 10px;
+				padding-right: 0;
+				font-size: 0;
+				option{
+					font-size: 16px;
+				}
+			}
+		}
+	}
+}

mean4thai/src/assets/scss/_layout-tab.scss

+.tt-layout-tab{
+    letter-spacing: 0.01em;
+    .tt-title{
+        color: $default_color_title;
+        font-size: 16px;
+        line-height: 26px;
+        font-weight: 600;
+        padding: 0 0 0px 0;
+        margin-bottom: -1px;
+        &:not(:first-child){
+            margin-top: 28px;
+        }
+        &.tt-size-lg{
+            font-size: 18px;
+            line-height: 28px;
+            padding-bottom: 29px;
+        }
+    }
+    .table-responsive{
+        margin-top: 15px;
+    }
+    .tt-indent-top{
+        margin-top: 38px;
+    }
+}
+.table-01{
+    width: 100%;
+    caption{
+        color: $default_text;
+        font-size: 16px;
+        line-height: 1.1;
+        font-weight:600;
+        caption-side: top;
+        margin: 0;
+        padding-top: 0;
+    }
+    tr{
+        th{
+            color: $default_text;
+            font-weight: 500;
+            font-size: 14px;
+            line-height: 1.1;
+            padding: 12px 0 25px;
+        }
+        td{
+            color: #666f74;
+            font-size: 16px;
+            line-height: 1.1;
+            padding: 27px 0;
+            padding-right: 5px;
+            &:first-child{
+                color: $default_text;
+                font-weight: 500;
+                padding-left: 30px;
+                width: 28%;
+            }
+            &:not(:first-child){
+                width: 24%;
+            }
+        }
+    }
+    @media (min-width: 768px){
+        caption{
+            padding-left: 30px;
+        }
+        tr{
+            th{
+                &:first-child{
+                    padding-left: 30px;
+                }
+            }
+            td{
+                &:first-child{
+                    padding-left: 30px;
+                }
+            }
+        }
+    }
+    @media (max-width: 767px){
+        caption{
+            padding-left: 20px;
+        }
+        tr{
+            th{
+                &:first-child{
+                    padding-left: 20px;
+                }
+            }
+            td{
+                &:first-child{
+                    padding-left: 20px;
+                }
+            }
+        }
+    }
+}
+.table-zebra{
+    tr{
+        &:nth-child(even){
+            background-color: #ffffff;
+        }
+        &:nth-child(odd){
+            background-color: $default_color3;
+        }
+    }
+}
+/* list avatar */
+.tt-list-avatar{
+    margin-top: -7px;
+    .tt-avatar{
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        align-content: center;
+        align-items: center;
+        margin-top: 24px;
+        .tt-col-icon{
+            .tt-icon{
+                width: 40px;
+                height: 40px;
+            }
+            + .tt-col-description{
+                margin-left: 30px;
+            }
+        }
+        .tt-col-description{
+            .tt-title{
+                color: $default_color2;
+                font-size: 16px;
+                line-height: 1.1;
+                position: relative;
+                display: inline-block;
+                padding: 0;
+                margin: 0;
+                &:before{
+                    content: '';
+                    display: block;
+                    position: absolute;
+                    bottom: 0px;
+                    width: 0%;
+                    height: 1px;
+                    margin: auto;
+                    left: 0;
+                    right: 0;
+                    background-color: $default_color2;
+                    -webkit-transition: width .2s linear;
+                    transition: width .2s linear;
+                }
+            }
+            .tt-value{
+                color: #666f74;
+                font-size: 14px;
+                line-height: 1.1;
+                margin-top: 3px;
+            }
+            *:nth-child(1){
+                margin-top: 0;
+            }
+        }
+        &:hover{
+            .tt-title{
+                &:before{
+                    width: 100%;
+                }
+            }
+        }
+    }
+    @media (max-width: 767px){
+        .tt-avatar{
+            .tt-col-icon{
+                + .tt-col-description{
+                    margin-left: 25px;
+                }
+            }
+        }
+    }
+    @media (max-width: 400px){
+        [class^=col]{
+            -ms-flex: 0 0 100%;
+            flex: 0 0 100%;
+            max-width: 100%;
+        }
+    }
+}

mean4thai/src/assets/scss/_layout404.scss

+/*
+    Page 404
+*/
+.tt-layout-404{
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-content: stretch;
+    align-items: center;
+    text-align: center;
+    letter-spacing: 0.01em;
+    .tt-title{
+        color: $default_color_title;
+        font-size: 18px;
+        line-height: 1.3;
+        font-weight: 500;
+        margin-top: 64px;
+        padding-bottom: 8px;
+    }
+    @media (min-width: 576px){
+        padding: 112px 0 17px 0;
+    }
+    @media (max-width: 575px){
+        padding: 17px 0 17px 0;
+        .tt-icon{
+            svg{
+                width: 200px;
+                height: 100px;
+            }
+        }
+    }
+}
\ No newline at end of file

mean4thai/src/assets/scss/_login.scss

+/* Login page*/
+.tt-loginpages{
+	letter-spacing: 0.01em;
+	@media (min-width: 576px){
+		background-color:#ffffff;
+		box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.09);
+		padding: 30px 30px 37px;
+		margin-top: 50px;
+		margin-bottom: 50px;
+	}
+	@media (max-width: 575px){
+		padding: 30px 20px 37px;
+		margin-top: 30px;
+		margin-bottom: 30px;
+	}
+	.tt-block-title{
+		position: relative;
+		padding-bottom: 23px;
+		margin-bottom: 21px;
+		display: block;
+		&:before{
+			content: '';
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width: 160px;
+			height: 1px;
+			background-color:$border;
+		}
+		.tt-title{
+			color: #303344;
+			font-size: 18px;
+			line-height: 26px;
+			font-weight: 600;
+			margin-top: 21px;
+			padding: 0;
+			letter-spacing: 0.01em;
+		}
+		> *:nth-child(1){
+			margin-top: 0;
+		}
+		& .tt-title{
+			position: relative;
+			transition: color .2s linear;
+		}
+		&:hover{
+			.tt-title{
+				color: $default_color;
+			}
+		}
+	}
+	.tt-description{
+		color: $default_text;
+	}
+	.form-default{
+		.form-group{
+			margin-bottom: 21px;
+			label:not(.error){
+				padding-bottom: 7px;
+			}
+			.btn{
+				margin-top: 9px;
+			}
+			.checkbox-group{
+				label:not(.error){
+					padding-bottom: 0;
+				}
+			}
+		}
+		p{
+			margin-bottom: 13px !important;
+		}
+	}
+	.tt-notes{
+		position: relative;
+		font-size: 14px;
+		line-height: 26px;
+		padding-top: 21px;
+		margin-top: 22px;
+		&:before{
+			content: '';
+			display: block;
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 65px;
+			height: 1px;
+			background-color: $border;
+		}
+	}
+}
+.tt-loginpages-wrapper{
+	display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-content: stretch;
+    align-items: flex-start;
+	.tt-loginpages{
+		@media (min-width: 471px){
+			width: 410px;
+		}
+		@media (max-width: 470px){
+			width: 100%;
+		}
+	}
+}

mean4thai/src/assets/scss/_messages_layout.scss

+.tt-messages-layout{
+	.tt-aside{
+		@media (max-width: 767px){
+			background-color: #ffffff;
+			position: fixed;
+			width: 100%;
+			left: -150%;
+			top: 0;
+			z-index: 12;
+			-moz-transition: left 0.3s linear;
+		    -o-transition: left 0.3s linear;
+		    -webkit-transition: left 0.3s linear;
+		    transition: left 0.3s linear;
+			&.column-open{
+				left: 0;
+			}
+		}
+	}
+	// aside
+	.tt-aside{
+		border-right:1px solid $border02;
+		.tt-title-aside{
+			display: flex;
+		    flex-direction: column;
+		    flex-wrap: wrap;
+		    justify-content: center;
+		    align-content: flex-start;
+		    align-items: flex-start;
+			border-bottom: 1px solid $border02;
+			padding: 9px 0 9px 30px;
+			min-height: 71px;
+			.tt-title{
+				color: $default_color2;
+				font-size: 16px;
+				line-height: 26px;
+				font-weight: 600;
+				padding: 0;
+				margin: 0;
+			}
+			.tt-icon{
+				position: absolute;
+				top: 0;
+				right: 0;
+				padding: 21px 30px 10px 10px;
+				transition: fill .2s linear;
+				fill:#666f74;
+				svg{
+					width: 19px;
+					height: 18px;
+				}
+			}
+			&:hover{
+				.tt-icon{
+					 fill:#3571b8;
+				}
+			}
+		}
+	}
+	// content
+	.tt-title-content{
+		display: flex;
+	    flex-direction: column;
+	    flex-wrap: wrap;
+	    justify-content: center;
+	    align-content: flex-start;
+	    align-items: flex-start;
+		border-bottom: 1px solid #e2e7ea;
+		padding: 9px 0 9px 30px;
+		min-height: 71px;
+		margin-bottom: 17px;
+		.tt-title{
+			color: $default_color2;
+			font-size: 16px;
+			line-height: 24px;
+			font-weight: 600;
+			letter-spacing: 0.01em;
+			padding: 0;
+			margin: 0;
+		}
+		.tt-description{
+			color: #666f74;
+			font-size: 14px;
+			line-height: 22px;
+		}
+		.tt-icon-link{
+			position: absolute;
+			top: 0;
+			right: 0;
+			padding: 21px 20px 10px 10px;
+			fill:#666f74;
+			svg{
+				width: 3px;
+				height: 18px;
+			}
+			&:hover{
+				fill:#3571b8;
+			}
+		}
+		.tt-toggle-aside{
+			position: absolute;
+			top: 0;
+			left: 0;
+			padding: 20px 10px 15px 0;
+			display: inline-block;
+			color:#666f74;
+			transition: color .2s linear;
+			display: none;
+			svg{
+				width: 10px;
+				height: 18px;
+
+			}
+			&:hover{
+				color:#2172cd;
+			}
+			@media (max-width: 767px){
+				display: block;
+			}
+		}
+	}
+	@media (max-width: 767px){
+		.tt-title-content{
+			padding-left: 20px;
+		}
+	}
+}
+
+.tt-list-time-topic{
+	.tt-item-title{
+		position: relative;
+		color: #666f74;
+		font-size: 14px;
+		line-height: 24px;
+		text-align: center;
+		margin-bottom: 12px;
+		letter-spacing: 0.01em;
+		&:before{
+			content:'';
+			width: 100%;
+			height: 1px;
+			background-color: #e2e7ea;
+			top: 50%;
+			left: 0;
+			right: 0;
+			position: absolute;
+			display: block;
+		}
+		span{
+			display: inline-block;
+			position: relative;
+			padding: 5px 15px;
+			background-color: #f8f9fa;
+		}
+	}
+	.tt-item{
+		display: flex;
+	    flex-direction: row;
+	    flex-wrap: nowrap;
+	    justify-content: flex-start;
+	    align-content: center;
+	    align-items: center;
+	    padding: 0 0 0 30px;
+	    letter-spacing: 0.01em;
+	   	&:not(:first-child){
+			margin-top: 30px;
+		}
+		.tt-col-avatar{
+	   		.tt-icon{
+				width: 40px;
+				height: 40px;
+			}
+		}
+		.tt-col-description{
+			padding: 0 0 0 53px;
+			.tt-title{
+				padding: 0 0 2px 0;
+				margin: 0;
+				a{
+					position: relative;
+					display: inline-block;
+					color: $default_color2;
+					&:before{
+					    content: '';
+					    display: block;
+					    position: absolute;
+					    bottom: 5px;
+					    width: 0%;
+					    height: 1px;
+					    margin: auto;
+					    left: 0;
+					    right: 0;
+					    background-color: $default_color2;
+					    -webkit-transition: width .2s linear;
+					    transition: width .2s linear;
+					}
+					&:hover{
+						&:before{
+							width: 100%;
+						}
+					}
+				}
+				.time{
+					display: inline-block;
+					font-size: 14px;
+					padding-left: 5px;
+					font-weight: normal;
+				}
+			}
+		}
+	}
+	.tt-item-title + .tt-item{
+		margin-top: 0;
+	}
+	.tt-item + .tt-item-title{
+		margin-top: 26px;
+	}
+	@media (max-width: 1024px){
+		.tt-item{
+			.tt-col-description{
+				padding: 0 0 0 30px;
+			}
+		}
+	}
+	@media (max-width: 767px){
+		.tt-item{
+			padding-left: 15px;
+			.tt-col-description{
+				padding: 0 0 0 15px;
+			}
+		}
+	}
+}
+.tt-list-time-topic + .tt-wrapper-inner{
+	margin-top: 35px;
+}
+.tt-all-avatar{
+	.tt-box-search{
+		position: relative;
+		height:76px;
+		.tt-input{
+			background:transparent;
+			border: none;
+			outline: none;
+			height: 73px;
+			padding:0 0 6px 63px;
+			color: $default_color2;
+			font-size: 16px;
+			line-height: 1;
+			font-weight: 500;
+			width: calc(100% - 43px);
+			letter-spacing: 0.01em;
+			position: relative;
+			z-index: 1;
+		}
+		.tt-btn-input{
+			position: absolute;
+			z-index: 2;
+			top: 20px;
+			left: 30px;
+			svg{
+				width: 18px;
+				height: 18px;
+			}
+			fill:#666f74;
+			&:hover{
+				fill:#2172cd;
+			}
+			transition: fill .2s linear;
+		}
+		.tt-btn-icon{
+			position: absolute;
+			z-index: 2;
+			top: 15px;
+			right: 20px;
+			display: inline-block;
+			padding: 10px;
+			svg{
+				width: 18px;
+				height: 18px;
+			}
+			fill:#666f74;
+			transition: fill .2s linear;
+			&:hover{
+				fill:#2172cd;
+			}
+		}
+	}
+	.tt-list-avatar{
+		overflow: hidden;
+		position: relative;
+		@media (min-width: 768px){
+			height: calc(100vh - 210px);
+		}
+		@media (max-width: 767px){
+			height: calc(100vh - 140px);
+		}
+		.tt-item{
+	    	display: flex;
+		    flex-direction: row;
+		    flex-wrap: nowrap;
+		    justify-content: flex-start;
+		    align-content: center;
+		    align-items: center;
+		    padding: 24px 30px 27px 30px;
+		    position: relative;
+		    cursor: pointer;
+		    .tt-col-avatar{
+		    	margin-top: 2px;
+				.tt-icon{
+					width: 40px;
+					height: 40px;
+					display: inline-block;
+				}
+			}
+			.tt-col-description{
+				flex: 2 1 auto;
+				padding: 0 0 0 30px;
+				.tt-title{
+					display: flex;
+				    flex-direction: row;
+				    flex-wrap: wrap;
+				    justify-content: space-between;
+				    align-content: center;
+				    align-items: center;
+					padding: 0;
+					margin: 0;
+					width: 100%;
+					color: $default_color2;
+					font-size: 16px;
+					line-height: 26px;
+					span:not([class]){
+						position: relative;
+						&:before{
+							content: '';
+						    display: block;
+						    position: absolute;
+						    bottom: 5px;
+						    width: 0%;
+						    height: 1px;
+						    margin: auto;
+						    left: 0;
+						    right: 0;
+						    background-color: $default_color2;
+						    -webkit-transition: width .2s linear;
+						    transition: width .2s linear;
+						}
+					}
+					.time{
+						display: inline-block;
+						color: #666f74;
+						font-size: 14px;
+						line-height: 24px;
+						font-weight: normal;
+					}
+				}
+				.tt-message{
+					margin-top: -3px;
+					color: #666f74;
+					font-size: 14px;
+					letter-spacing: 0.01em;
+					&.tt-select{
+						color: #2172cd;
+					}
+				}
+			}
+			&:nth-child(odd){
+				background-color: #f2f4f6;
+			}
+			&:nth-child(even){
+				background-color: #ffffff;
+			}
+			&:before{
+				content: '';
+				width: 2px;
+				height: 100%;
+				display: block;
+				position: absolute;
+				top: 0;
+				left: 0;
+				background-color: transparent;
+				transition: background-color .2s linear;
+			}
+			&:hover{
+				&:before{
+					background-color: #2172cd;
+				}
+				.tt-col-description{
+					.tt-title{
+						span{
+							&:before{
+								width: 100%;
+							}
+						}
+					}
+				}
+			}
+	    }
+	}
+	@media (max-width: 1024px){
+		.tt-list-avatar{
+			.tt-item{
+	    		padding-left: 15px;
+	    		.tt-col-description{
+	    			padding-left: 15px;
+	    			.tt-message{
+	    				line-height: 20px;
+	    				margin-top: 0;
+	    			}
+	    		}
+	    	}
+		}
+	}
+	@media (max-width: 1024px) and (min-width: 768px){
+		.tt-box-search{
+			.tt-input{
+				padding-left: 40px;
+			}
+			.tt-btn-input{
+				left: 10px;
+			}
+			.tt-btn-icon{
+				right: 15px;
+			}
+		}
+	}
+	@media (max-width: 767px){
+		.tt-box-search{
+			.tt-btn-icon{
+				right: 20px;
+			}
+		}
+	}
+}
+
+.tt-search-compose{
+	position: relative;
+	.tt-input{
+		height: 69px;
+		border-bottom:1px solid #e2e7ea;
+		.tt-search-input{
+			border: none;
+			background-color: transparent;
+			color: $default_color2;
+			font-size: 16px;
+			font-weight: 500;
+			letter-spacing: 0.01em;
+			padding: 20px 0 20px 30px;
+			outline: none;
+			width: 100%;
+			&:not(:focus)::-webkit-input-placeholder{color:$default_color2;}
+			&:not(:focus)::-moz-placeholder      {color:$default_color2;}
+			&:not(:focus):-moz-placeholder       {color:$default_color2;}
+			&:not(:focus):-ms-input-placeholder  {color:$default_color2;}
+		}
+	}
+	.tt-search-results{
+		margin: 0 0 0 30px;
+		background-color: #ffffff;
+		height: 290px;
+		overflow: hidden;
+		position: relative;
+		.tt-item{
+			display: flex;
+		    flex-direction: row;
+		    flex-wrap: nowrap;
+		    justify-content: flex-start;
+		    align-content: center;
+		    align-items: center;
+			transition: background-color .2s linear;
+			padding: 8px 30px 7px;
+			&:first-child{
+				padding-top: 16px;
+			}
+			&:last-child{
+				padding-bottom: 16px;
+			}
+			.tt-col-avatar{
+				.tt-icon{
+					width: 40px;
+					height: 40px;
+				}
+			}
+			.tt-col-description{
+				padding: 0 0 0 25px;
+				.tt-title{
+					padding: 0;
+					margin: 0;
+					color: $default_color2;
+					font-size: 16px;
+					line-height: 20px;
+				}
+				.tt-value{
+					color: #666f74;
+					font-size: 14px;
+					line-height: 19px;
+				}
+			}
+			&:hover{
+				background-color: #f2f4f6;
+			}
+		}
+	}
+	@media (max-width: 767px){
+		.tt-input{
+			.tt-search-input{
+				padding-left: 20px;
+				padding-right: 20px;
+			}
+		}
+		.tt-search-results{
+			margin-left: 20px;
+			margin-right: 20px;
+		}
+	}
+}
+.tt-title-content + .tt-search-compose{
+	margin-top: -17px;
+}
\ No newline at end of file

mean4thai/src/assets/scss/_mobile-menu.scss

+/*
+    Mobile menu
+*/
+$mobile_toggle_menu:											$default_color2;
+$mobile_menu_bg:												#ffffff;
+$mobile_menu_fullscreen_bg:										rgba(0, 0, 0, 0.5);
+$mobile_menu_btn_text:											$default_color2;
+$mobile_menu_btn_text_hover:									$default_color;
+$mobile_menu_btn_bg:											transparent;
+$mobile_menu_btn_bg_hover:										transparent;
+$mobile_menu_btn_icon:											$mobile_menu_btn_text;
+$mobile_menu_btn_icon_hover:									$mobile_menu_btn_text_hover;
+$mobile_menu_btn_separator:										$border;
+$mobile_menu_close_text:										$mobile_menu_btn_text;
+$mobile_menu_close_text_hover:									$mobile_menu_btn_text_hover;
+$mobile_menu_close_bg:											$mobile_menu_btn_bg;
+$mobile_menu_close_bg_hover:									$mobile_menu_btn_bg_hover;
+$mobile_menu_close_icon:										$mobile_menu_btn_icon;
+$mobile_menu_close_icon_hover:									$mobile_menu_btn_icon_hover;
+$mobile_menu_close_separator:									$mobile_menu_btn_separator;
+$mobile_menu_prev_text:											$mobile_menu_btn_text;
+$mobile_menu_prev_text_hover:									$mobile_menu_btn_text_hover;
+$mobile_menu_prev_bg:											$mobile_menu_btn_bg;
+$mobile_menu_prev_bg_hover:										$mobile_menu_btn_bg_hover;
+$mobile_menu_prev_icon:											$mobile_menu_btn_icon;
+$mobile_menu_prev_icon_hover:									$mobile_menu_btn_icon_hover;
+$mobile_menu_prev_separator:									$mobile_menu_btn_separator;
+$mobile_menu_next_text:											$default_color2;
+$mobile_menu_next_text_hover:									$mobile_menu_btn_text_hover;
+$mobile_menu_next_bg:											$mobile_menu_btn_bg;
+$mobile_menu_next_bg_hover:										$mobile_menu_btn_bg_hover;
+$mobile_menu_next_icon:											$mobile_menu_btn_icon;
+$mobile_menu_next_icon_hover:									$mobile_menu_btn_icon_hover;
+$mobile_menu_next_separator:									$mobile_menu_btn_separator;
+$mobile_menu_original_link_text:								$default_color2;
+$mobile_menu_original_link_text_hover:							$mobile_menu_btn_text_hover;
+$mobile_menu_original_link_bg:									$mobile_menu_btn_bg;
+$mobile_menu_original_link_bg_hover:							$mobile_menu_btn_bg_hover;
+$mobile_menu_original_link_icon:								$mobile_menu_btn_icon;
+$mobile_menu_original_link_icon_hover:							$mobile_menu_btn_icon_hover;
+$mobile_menu_original_link_separator:							$mobile_menu_btn_separator;
+$mobile_menu_link:												$default_color2;
+$mobile_menu_link_hover:										$default_color;
+$mobile_menu_link_bg:											transparent;
+$mobile_menu_link_bg_hover:										transparent;
+$mobile_menu_link_level_01:										$mobile_menu_link;
+$mobile_menu_link_level_01_hover:								$mobile_menu_link_hover;
+$mobile_menu_link_level_01_bg:									$mobile_menu_link_bg;
+$mobile_menu_link_level_01__bg_hover:							$mobile_menu_link_bg_hover;
+$mobile_menu_link_level_01_icon:								$mobile_menu_link_level_01;
+$mobile_menu_link_level_01_icon_hover:							$mobile_menu_link_level_01_hover;
+
+.panel-menu,
+.mmpanels,
+.mmpanels > .mmpanel{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: inherit;
+}
+.panel-menu{
+    width: 270px;
+    background: $mobile_menu_bg;
+    position: fixed;
+    z-index: 50;
+    box-shadow: 0 2px 2px rgba(0,0,0,0.06);
+    // level default
+    ul{
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        li{
+            margin: 0;
+            width: 100%;
+            a{
+                display: flex;
+                padding: 9px 27px 9px 29px;
+                font-size: 16px;
+                line-height: 22px;
+                text-decoration: none;
+                color: $mobile_menu_link;
+                background:$mobile_menu_link_bg;
+                position: relative;
+                font-weight: 500;
+                transition: all 0.2s linear;
+            }
+            a:hover{
+                color: $mobile_menu_link_hover;
+                 background:$mobile_menu_link_bg_hover;
+            }
+
+        }
+    }
+    // level - 01
+    #mm0.mmpanel{
+        a:not(.mm-close){
+            color: $mobile_menu_link_level_01;
+            background-color: $mobile_menu_link_level_01_bg;
+            &:after{
+                color: $mobile_menu_link_level_01_icon;
+            }
+        }
+        a:not(.mm-close):hover{
+            color: $mobile_menu_link_level_01_hover;
+            background-color: $mobile_menu_link_level_01__bg_hover;
+            &:after{
+                color: $mobile_menu_link_level_01_icon_hover;
+            }
+        }
+        .mm-next-level:after{
+            top: 12px;
+        }
+    }
+    // level - 02
+    .mmpanel{
+        .mm-original-link{
+            .tt-badge{
+                top:-1px;
+            }
+        }
+    }
+
+    // nav
+    .mm-close,
+    .mm-prev-level,
+    .mm-original-link{
+        display: block;
+        color: $mobile_menu_btn_text;
+        background-color: $mobile_menu_btn_bg;
+        background-color: $mobile_menu_btn_bg;
+    }
+    .mm-close:before,
+    .mm-prev-level:before,
+    .mm-next-level:after{
+        font-size: 14px;
+        line-height: 14px;
+        font-weight: bold;
+        transition: all 0.2s linear;
+        color: $mobile_menu_btn_icon;
+    }
+    .mm-close:hover,
+    .mm-prev-level:hover,
+    .mm-next-level:hover{
+        color: $mobile_menu_btn_text_hover;
+        background-color: $mobile_menu_btn_bg_hover;
+    }
+    .mm-close:hover:before
+    .mm-prev-level:hover:before,
+    .mm-next-level:hover:after{
+        color: $mobile_menu_btn_icon_hover;
+    }
+
+    // btn close
+    li.mm-close-parent{
+        margin-bottom: 15px;
+        .mm-close{
+            padding: 24px 16px 23px 29px;
+            color:  $mobile_menu_close_text;
+            border-bottom: 1px solid $mobile_menu_close_separator;
+            background-color: $mobile_menu_close_bg;
+            .tt-icon{
+                position: absolute;
+                right: 10px;
+                top: 0;
+                padding: 23px 10px 23px;
+                svg{
+                    width: 14px;
+                    height: 14px;
+                    fill:#687176;
+                }
+            }
+        }
+        .mm-close:hover{
+            color:  $mobile_menu_close_text_hover;
+            background-color: $mobile_menu_close_bg_hover;
+            svg{
+                fill:#2172cd;
+            }
+        }
+    }
+    //prev level
+    .mm-prev-level{
+        padding: 14px 16px 15px 29px;
+        color:  $mobile_menu_prev_text;
+        background-color: $mobile_menu_prev_bg;
+        border-bottom: 1px solid $mobile_menu_prev_separator;
+         margin-bottom: 15px;
+    }
+    .mm-prev-level:before{
+        content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8L3.43431 7.43431L2.86863 8L3.43431 8.56569L4 8ZM10.4343 0.434315L3.43431 7.43431L4.56569 8.56569L11.5657 1.56569L10.4343 0.434315ZM3.43431 8.56569L10.4343 15.5657L11.5657 14.4343L4.56569 7.43431L3.43431 8.56569Z' fill='%23666f74'/%3E%3C/svg%3E%0A");
+        padding-right: 10px;
+        position: relative;
+        top: 2px;
+        color: $mobile_menu_prev_icon;
+        display: inline-block;
+    }
+    .mm-prev-level:hover{
+        color:  $mobile_menu_prev_text_hover;
+        background-color: $mobile_menu_prev_bg_hover;
+        &:before{
+            color:  $mobile_menu_prev_icon_hover;
+        }
+    }
+    //next level
+    .mm-next-level{
+        color: $mobile_menu_next_text;
+        background-color: $mobile_menu_next_bg;
+    }
+    .mm-next-level:after{
+        content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 1L11 8L4 15' stroke='%23666f74' stroke-width='1.6'/%3E%3C/svg%3E%0A");
+        padding-left: 10px;
+        top: 10px;
+        right: 30px;
+        position: absolute;
+        color: $mobile_menu_next_icon;
+    }
+    .mm-next-level:hover{
+        color: $mobile_menu_next_text_hover;
+        background-color: $mobile_menu_next_bg_hover;
+        &:after{
+            color: $mobile_menu_next_icon_hover;
+        }
+    }
+
+    //original link
+    .mm-original-link{
+        font-weight: 700;
+        color: $mobile_menu_original_link_text;
+        background-color: $mobile_menu_original_link_bg;
+    }
+    .mm-original-link:before{
+        padding-right: 10px;
+        color: $mobile_menu_original_link_icon;
+    }
+    .mm-original-link:hover{
+        color: $mobile_menu_original_link_text_hover;
+        background-color: $mobile_menu_original_link_bg_hover;
+        &:before{
+            color: $mobile_menu_original_link_icon_hover;
+        }
+    }
+}
+.mm-open{
+    overflow: hidden;
+    .mm-fullscreen-bg{
+        cursor: pointer;
+        background-color: $mobile_menu_fullscreen_bg;
+        position: fixed;
+        top: 0;
+        left: 0;
+        overflow: hidden;
+        width: 100%;
+        height: 100%;
+        z-index: 23;
+        display: none;
+    }
+}
+.mmitemopen.panel-menu,
+.mmitemopen.panel-menu.mm-right{
+    -webkit-transition: -webkit-transform .3s ease;
+    transition: -webkit-transform .3s ease;
+    transition: transform .3s ease;
+    transition: transform .3s ease,-webkit-transform .3s ease;
+    -webkit-transform: translate(0,0);
+    -ms-transform: translate(0,0);
+    transform: translate(0,0);
+    -webkit-transform: translate3d(0,0,0);
+    transform: translate3d(0,0,0);
+}
+.panel-menu{
+    -webkit-transform: translate(-100%,0);
+    -ms-transform: translate(-100%,0);
+    transform: translate(-100%,0);
+    -webkit-transform: translate3d(-100%,0,0);
+    transform: translate3d(-100%,0,0);
+}
+.panel-menu.mm-right,
+.mmitemopen.panel-menu.mm-right.mmhide{
+    left: auto;
+    right: 0;
+    -webkit-transform: translate(100%,0);
+    -ms-transform: translate(100%,0);
+    transform: translate(100%,0);
+    -webkit-transform: translate3d(100%,0,0);
+    transform: translate3d(100%,0,0);
+}
+.mmitemopen.panel-menu.mmhide{
+    -webkit-transform: translate(-100%,0);
+    -ms-transform: translate(-100%,0);
+    transform: translate(-100%,0);
+    -webkit-transform: translate3d(-100%,0,0);
+    transform: translate3d(-100%,0,0);
+}
+.mmpanel{
+    -webkit-transition: -webkit-transform .3s ease;
+    transition: -webkit-transform .3s ease;
+    transition: transform .3s ease;
+    transition: transform .3s ease,-webkit-transform .3s ease;
+    -webkit-transform: translate(100%,0);
+    -ms-transform: translate(100%,0);
+    transform: translate(100%,0);
+    -webkit-transform: translate3d(100%,0,0);
+    transform: translate3d(100%,0,0);
+}
+.mmpanels{
+    overflow: hidden;
+}
+.mmpanel.mmopened{
+    -webkit-transform: translate(0,0);
+    -ms-transform: translate(0,0);
+    transform: translate(0,0);
+    -webkit-transform: translate3d(0,0,0);
+    transform: translate3d(0,0,0);
+}
+.mmpanel.mmsubopened{
+    -webkit-transform: translate(-80%,0);
+    -ms-transform: translate(-80%,0);
+    transform: translate(-80%,0);
+    -webkit-transform: translate3d(-80%,0,0);
+    transform: translate3d(-80%,0,0);
+}
+.mmpanels > .mmpanel{
+    overflow: scroll;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+.mmpanels,
+.mmpanels >
+.mmpanel{
+    background: inherit;
+    border-color: inherit;
+}
+.mmpanels > .mmpanel:not(.mmhidden){
+    display: block;
+}
+.mmpanels >.mmpanel:after{
+    content: '';
+    display: block;
+    height: 20px
+}
+.mmhidden,
+.mm-nav-btn{
+    display: none;
+}
+.mm-fullscreen-bg,
+.mm-fullscreen-bg:focus,
+.mm-fullscreen-bg:active,
+.mm-fullscreen-bg:hover{
+    outline: none;
+}
+
+
+.tt-menu-slider {
+    max-height: 389px;
+}

mean4thai/src/assets/scss/_modal.scss

+/*
+	Modal
+*/
+$modal_btn_close_icon:											#ffffff;
+$modal_btn_close_icon_hover:									$default_color;
+$modal_bg:														#ffffff;
+$modal_backdrop:												#000000;
+.modal{
+    display: none;
+    overflow: hidden;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 25;
+    -webkit-overflow-scrolling: touch;
+    outline: none;
+    text-align: center;
+    padding: 10px;
+    transition: opacity 0.15s linear;
+    opacity:0;
+    &.show {
+        opacity: 1;
+    }
+    &:before{
+        content: '';
+        display: inline-block;
+        height: 100%;
+        vertical-align: middle;
+        margin-right: -4px;
+    }
+    .modal-dialog{
+        display: inline-block;
+        vertical-align: middle;
+        @media (min-width: 576px){
+            max-width: inherit;
+        }
+    }
+    .modal-sm{
+        @media (min-width: 460px){
+            width: 410px;
+        }
+        @media (max-width: 459px){
+            width: 370px;
+        }
+        @media (max-width: 420px){
+            width: 280px;
+        }
+    }
+    .modal-md{
+        @media (min-width: 780px){
+            width: 730px;
+        }
+        @media (max-width: 779px){
+            width: 410px;
+        }
+        @media (max-width: 420px){
+            width: 280px;
+        }
+    }
+    .modal-title{
+        font-size: 20px;
+        line-height: 26px;
+        margin: 34px 0 0 0;
+        padding-bottom: 19px;
+        letter-spacing: 0.02em;
+    }
+    .close{
+        width: 56px;
+        height: 56px;
+        line-height: 1;
+        position: absolute;
+        top: 0px;
+        right: 0;
+        text-decoration: none;
+        background:none;
+        border:none;
+        cursor: pointer;
+        z-index: 1;
+        outline: none;
+        &:before,
+        &:after{
+            position: absolute;
+            top: 18px;
+            right: 20px;
+            transition:0.2s linear;
+        }
+        &:before{
+            content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0LjQzNDMgMC40MzQzMTVMMC40MzQzMTUgMTQuNDM0M0wxLjU2NTY5IDE1LjU2NTdMMTUuNTY1NyAxLjU2NTY5TDE0LjQzNDMgMC40MzQzMTVaTTAuNDM0MzE1IDEuNTY1NjlMMTQuNDM0MyAxNS41NjU3TDE1LjU2NTcgMTQuNDM0M0wxLjU2NTY5IDAuNDM0MzE1TDAuNDM0MzE1IDEuNTY1NjlaIiBmaWxsPSIjRDBEMEQwIi8+Cjwvc3ZnPgo=');
+        }
+        &:after{
+            content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0LjQzNDMgMC40MzQzMTVMMC40MzQzMTUgMTQuNDM0M0wxLjU2NTY5IDE1LjU2NTdMMTUuNTY1NyAxLjU2NTY5TDE0LjQzNDMgMC40MzQzMTVaTTAuNDM0MzE1IDEuNTY1NjlMMTQuNDM0MyAxNS41NjU3TDE1LjU2NTcgMTQuNDM0M0wxLjU2NTY5IDAuNDM0MzE1TDAuNDM0MzE1IDEuNTY1NjlaIiBmaWxsPSIjMzMzMzMzIi8+Cjwvc3ZnPgo=');
+            opacity:0;
+        }
+        &:hover{
+            &:before{
+                opacity:0;
+            }
+            &:after{
+                opacity:1;
+            }
+        }
+        &.pt-color-white{
+            &:before{
+                content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0LjQzNDMgMC40MzQzMTVMMC40MzQzMTUgMTQuNDM0M0wxLjU2NTY5IDE1LjU2NTdMMTUuNTY1NyAxLjU2NTY5TDE0LjQzNDMgMC40MzQzMTVaTTAuNDM0MzE1IDEuNTY1NjlMMTQuNDM0MyAxNS41NjU3TDE1LjU2NTcgMTQuNDM0M0wxLjU2NTY5IDAuNDM0MzE1TDAuNDM0MzE1IDEuNTY1NjlaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
+            }
+        }
+    }
+    .modal-header{
+        border: none;
+    }
+    .modal-content{
+       border-radius:0;
+        border:none;
+    }
+    .modal-content{
+        background-color:$modal_bg;
+        &.noindent{
+            padding: 0;
+        }
+        &:not(.noindent){
+            @media (min-width: 1025px){
+                padding: 30px;
+            }
+            @media (max-width: 1024px){
+                padding: 40px 30px;
+            }
+            @media (max-width: 767px){
+                padding: 40px 20px;
+            }
+        }
+    }
+    .modal-footer{
+        border: none;
+    }
+}
+.modal-backdrop{
+    background:$modal_backdrop;
+    position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 24;
+    &.show {
+        opacity: 0.5;
+    }
+}
+/* Modal layout */
+.modal{
+    .modal-content{
+        text-align: left;
+        position: relative;
+        .tt-modal-title{
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            justify-content: flex-start;
+            align-content: flex-start;
+            align-items: flex-start;
+            position: relative;
+            color: $default_color_title;
+            font-size: 16px;
+            line-height: 22px;
+            font-weight: 600;
+            padding:0 27px 24px 0;
+            border-bottom: 1px solid $border02;
+            margin-bottom: 30px;
+            margin-top: -3px;
+            .pt-icon{
+                padding-right: 27px;
+                svg{
+                    width: 18px;
+                    height: 18px;
+                }
+            }
+            .pt-close-modal{
+                color: #687176;
+                display: inline-block;
+                position: absolute;
+                padding: 5px;
+                right: -5px;
+                top: -4px;
+                svg{
+                    width: 13px;
+                    height: 13px;
+                }
+                &:hover{
+                    color: $default_color;
+                }
+            }
+        }
+        .form-default{
+            .form-group{
+                margin-bottom: 21px;
+                .checkbox-group:last-child label{
+                    padding-bottom: 0 !important;
+                    margin-bottom: 0;
+                }
+            }
+            .form-group label:not(.error){
+                padding-bottom: 7px;
+                + .checkbox-group{
+                    margin-top: 6px;
+                }
+            }
+            .form-group .checkbox-group label:not(.error){
+                padding-bottom: 15px;
+            }
+            .checkbox-group + .form-group{
+                margin-top: 25px;
+            }
+            .btn{
+                margin-top: 9px;
+            }
+        }
+    }
+}
+/* open modal mobile menu */
+ body:not(.touch-device).mm-open{
+    padding-right: 17px;
+     .pt-stuck-nav.stuck{
+        padding-right: 17px;
+    }
+}
+/* open modal bootstrap */
+.modal-open{
+    overflow: hidden;
+    .modal{
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+}
+body:not(.touch-device).modal-open{
+    overflow-x: hidden;
+    padding-right: 17px;
+   .pt-stuck-nav.stuck{
+        padding-right: 17px;
+    }
+}
+html.ie.gecko{
+    body.modal-open{
+        padding-right: 0px !important;
+    }
+}
+
+
+/* Modal Age Confirmation */
+.tt-modal-confirmation{
+    padding: 6px 0 40px 0;
+    letter-spacing: 0.01em;
+    .tt-title{
+        text-align: center;
+        font-size: 16px;
+        line-height: 26px;
+        color: #303344;
+        font-weight: 600;
+        margin: 0;
+        padding: 0;
+    }
+    .tt-confirmation-btn{
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        align-content: flex-start;
+        align-items: flex-start;
+        margin-top: 38px;
+        > *:first-child{
+            .tt-icon{
+                &:before{
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    right: -1px;
+                    width: 1px;
+                    height: 100%;
+                    background-color: #e2e7ea;
+                }
+            }
+        }
+        .tt-col{
+            width: 50%;
+        }
+        @media (min-width: 768px){
+            .btn{
+                width:151px;
+            }
+        }
+    }
+    .tt-option-btn{
+        text-align: center;
+        display: block;
+        .tt-icon{
+            position: relative;
+            display: block;
+            padding:55px 0 70px;
+            svg{
+                width: auto;
+                height: 186px;
+            }
+        }
+        .btn{
+            margin-top: 30px;
+        }
+        &:hover .btn{
+            background-color: $default_color;
+            color: #ffffff;
+        }
+    }
+    @media (max-width: 779px){
+        padding: 0 0px 7px;
+         .tt-option-btn{
+            .tt-icon{
+                padding:15px 0;
+                svg{
+                    max-width: 80px;
+                }
+            }
+         }
+    }
+    @media (max-width: 420px){
+        .tt-confirmation-btn{
+            margin-top: 28px;
+            >:first-child .tt-icon:before{
+                display: none;
+            }
+        }
+        .tt-option-btn{
+            .tt-icon{
+                padding: 0;
+            }
+            .tt-icon{
+                svg{
+                    width: auto;
+                    height: 70px;
+                }
+            }
+            .btn{
+                font-size: 14px;
+                padding-left: 10px;
+                padding-right: 10px;
+            }
+        }
+    }
+}
+/* Modal Level Up */
+.tt-modal-level-up{
+    padding: 6px 0 40px 0;
+    letter-spacing: 0.01em;
+    .tt-title{
+        text-align: center;
+        font-size: 16px;
+        line-height: 26px;
+        color: #303344;
+        font-weight: 600;
+        margin: 0;
+        padding: 0;
+    }
+    .tt-option-btn{
+        text-align: center;
+        display: block;
+        .tt-icon{
+            position: relative;
+            display: block;
+            padding:77px 0 29px;
+            svg{
+                width: auto;
+                height: 133px;
+            }
+        }
+        .btn{
+            margin-top: 70px;
+            width: 151px;
+        }
+        &:hover .btn{
+            background-color: $default_color;
+            color: #ffffff;
+        }
+    }
+    @media (max-width: 779px){
+       .tt-option-btn{
+            .tt-icon{
+                padding: 29px 0;
+                svg{
+                     height: 100px;
+                }
+            }
+            .btn{
+               margin-top: 53px;
+           }
+       }
+       padding-bottom: 20px;
+    }
+    @media (max-width: 420px){
+        .tt-option-btn{
+             .tt-icon{
+                padding: 29px 0;
+                svg{
+                    width: 70px;
+                    height: 80px;
+                }
+            }
+            .btn{
+                font-size: 14px;
+                padding-left: 10px;
+                padding-right: 10px;
+            }
+        }
+    }
+}
+/* Modal Advanced Search */
+.tt-modal-advancedSearch{
+    // .form-group{
+    //     + .checkbox-group{
+    //         margin-top: -4px;
+    //     }
+    // }
+    .form-default .checkbox-group +.form-group{
+        margin-top: 13px !important;
+    }
+}

mean4thai/src/assets/scss/_pageContent.scss

+#tt-pageContent{
+    &:not([class^="tt-offset"]){
+        padding-top:100px;
+    }
+    &.tt-offset-small{
+        padding-top: 70px;
+    }
+    @media (max-width: 575px){
+    	.container[class^="tt-custom-"]{
+    		padding-left: 0;
+    		padding-right: 0;
+    	}
+    }
+    p{
+    	margin-bottom: 26px;
+    }
+    p:last-child{
+    	margin-bottom: 0;
+    }
+    .container.tt-custom-mobile-indent{
+        padding-left: 22px;
+        padding-right: 22px;
+    }
+}

mean4thai/src/assets/scss/_popup_settings.scss

+.tt-popup-settings{
+    position: fixed;
+    display: block;
+    margin: 0;
+    padding: 70px 30px;
+    background: #ffffff;
+    z-index: 14;
+    top: 0;
+    right: -150%;
+    height: 100%;
+    max-width: inherit;
+    text-align: left;
+    transition: right 0.3s linear;
+    &.column-open{
+        right: 0;
+    }
+    .tt-btn-col-close{
+        margin-bottom: 25px;
+        position: relative;
+        .tt-icon-title{
+            pointer-events: none;
+            position: relative;
+            top: -1px;
+            svg{
+                width: 17px;
+                height: 18px;
+                fill:#666f74;
+            }
+            margin-right: 30px;
+        }
+        .tt-icon-close{
+            pointer-events: none;
+            position: absolute;
+            right: 0px;
+            top: 35px;
+             svg{
+                width: 13px;
+                height: 12px;
+                fill:#70797d;
+                transition: fill $speed linear;
+            }
+        }
+        a{
+            display: block;
+            color: #303344;
+            font-weight: 600;
+            font-size: 16px;
+            line-height: 26px;
+            padding: 36px 0 22px;
+            border-bottom: 1px solid $border02;
+            transition: color $speed linear;
+            &:hover{
+                color: $default_color;
+                .tt-icon-close{
+                     svg{
+                         fill:$default_color2;
+                     }
+                }
+            }
+        }
+    }
+    .tt-form-upload{
+        padding-bottom: 27px;
+        .tt-avatar{
+            svg{
+                width: 40px;
+                height: 40px;
+            }
+        }
+        .btn{
+            min-width: 170px;
+        }
+    }
+    .form-default{
+        .form-group{
+            margin-bottom: 21px;
+            label:not(.error){
+                padding-bottom: 7px;
+                + .checkbox-group{
+                    margin-top: 7px;
+                }
+            }
+        }
+        .btn{
+            min-width: 160px;
+        }
+    }
+    .checkbox-group{
+        + .checkbox-group{
+            margin-top: 8px;
+        }
+    }
+    textarea.form-control{
+        height: 129px;
+        padding: 19px 12px 12px 28px;
+    }
+
+    @media (min-width: 451px){
+        width: 410px;
+    }
+    @media (max-width: 450px){
+        width: 320px;
+        padding-left: 20px;
+        padding-right: 20px;
+        .form-group{
+            .btn{
+                width: 100%;
+            }
+        }
+    }
+}
+.modal-filter{
+  background: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  top: 0;
+  right: 0;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  z-index: 11;
+  display: block;
+  opacity: 0;
+  transition: background 0.2s linear;
+}

mean4thai/src/assets/scss/_single-topic.scss

+/*
+	Single-Topic
+*/
+.tt-single-topic-list{
+	> .tt-item{
+		&:not(:first-child){
+			margin-top: 30px;
+		}
+		&:not([class^="tt-wrapper-success"]){
+			background-color:#ffffff;
+		}
+		&.tt-wrapper-success{
+			border: 1px solid #68c193;
+			background-color: #e6fbf0;
+		}
+		&.tt-wrapper-danger{
+			border: 1px dashed #f56e6f;
+			background-color: #fff2f2;
+		}
+	}
+}
+.tt-single-topic{
+	position: relative;
+	.tt-item-header{
+		.tt-item-info{
+			&.info-top{
+				display: flex;
+			    flex-direction: row;
+			    flex-wrap: nowrap;
+			    justify-content: space-between;
+			    align-content: center;
+			    align-items: center;
+				padding-top: 6px;
+				padding-bottom: 8px;
+			    .tt-avatar-icon{
+					.tt-icon{
+						svg{
+							width: 40px;
+							height: 40px;
+						}
+					}
+				}
+				.tt-avatar-title{
+					color: #666f74;
+					font-size: 14px;
+					line-height: 26px;
+					letter-spacing: 0.01em;
+					padding-right: 15px;
+					a{
+						color: #666f74;
+						display: inline-block;
+						&:hover{
+							color: $default_color;
+						}
+						margin-right: 11px;
+					}
+				}
+				.tt-info-time{
+					white-space: nowrap;
+					font-size: 14px;
+					color: #666f74;
+					padding: 0 0px 0 0;
+					.tt-icon{
+						margin-right: 16px;
+						svg{
+							width: 16px;
+							height: 16px;
+						}
+					}
+				}
+			}
+		}
+		.tt-item-title{
+			font-size: 18px;
+			line-height: 30px;
+			font-weight: 500;
+			margin: 3px 0 0 0;
+			letter-spacing: 0.01em;
+			a{
+				display: inline-block;
+				color: $default_color_title;
+				transition:color $speed linear;
+				&:hover{
+					color: $default_color;
+				}
+			}
+		}
+		.tt-item-tag{
+			margin-top: 12px;
+		}
+		&:not(.pt-noborder){
+			border-bottom:1px solid $border;
+			padding: 0 0 30px 0;
+		}
+		&.pt-noborder + .tt-item-description{
+			padding-top: 5px;
+		}
+	}
+	.tt-item-description{
+		padding-top: 21px;
+		letter-spacing: 0.01em;
+		.tt-title{
+			font-size: 16px;
+			line-height: 26px;
+			font-weight: 600;
+			color: $default_color2;
+			padding: 0;
+			margin: 0;
+			a{
+				color: $default_color2;
+				&:hover{
+					color: $default_color;
+				}
+			}
+		}
+		img{
+			max-width: 100%;
+			height: auto;
+		}
+		.video-container{
+			max-width: 713px;
+		}
+		.topic-inner-list{
+			margin-top: 37px;
+			padding-bottom: 8px;
+			.topic-inner:not(:first-child){
+				margin-top: 30px;
+			}
+		}
+		.topic-inner{
+			background-color: #f7f8fa;
+			border-left:2px solid #2172cd;
+			padding: 30px 43px 22px 28px;
+			.topic-inner-title{
+				display: flex;
+			    flex-direction: row;
+			    flex-wrap: nowrap;
+			    justify-content: flex-start;
+			    align-content: stretch;
+			    align-items: center;
+				.topic-inner-avatar{
+					svg{
+						width: 40px;
+						height: 40px;
+					}
+					@media (min-width: 1025px){
+						margin-right: 30px;
+					}
+					@media (max-width: 1024px){
+						margin-right: 25px;
+					}
+				}
+				.topic-inner-title{
+					color: #666f74;
+					font-size: 14px;
+					a{
+						color: #666f74;
+						&:hover{
+							color: $default_color;
+						}
+					}
+				}
+			}
+			.topic-inner-description{
+				@media (min-width: 576px){
+					padding: 5px 0 0 70px;
+				}
+				@media (max-width: 575px){
+					padding: 13px 0 0 0px;
+				}
+			}
+		}
+		.pt-gallery-layout{
+			margin-top: 7px;
+		}
+	}
+	.tt-item-info.info-bottom{
+		margin-top: 34px;
+	}
+	@media (min-width: 1025px){
+		padding:30px 30px 40px 125px;
+		.tt-avatar-icon{
+	    	position: absolute;
+	    	top: 30px;
+	    	left: 30px;
+	    }
+	}
+	@media (max-width: 1024px){
+		padding:30px 20px 40px 20px;
+	    .tt-item-header .tt-item-info.info-top{
+	    	.tt-avatar-title{
+	    		-webkit-flex: 2 1 auto;
+			    -ms-flex: 2 1 auto;
+			    flex: 2 1 auto;
+			    padding-left: 25px;
+	    	}
+	    }
+	}
+	@media (min-width: 576px){
+		.tt-item-info.info-bottom{
+ 			display: flex;
+		    flex-direction: row;
+		    flex-wrap: nowrap;
+		    justify-content: flex-start;
+		    align-content: flex-start;
+		    align-items: flex-start;
+		    .col-separator{
+		    	background: red;
+				-webkit-flex: 2 1 auto;
+			    -ms-flex: 2 1 auto;
+			    flex: 2 1 auto;
+			}
+		}
+	}
+	@media (max-width: 575px){
+		.tt-item-info.info-bottom{
+			display: flex;
+		    flex-direction: row;
+		    flex-wrap: wrap;
+		    justify-content: space-between;
+		    align-content: flex-start;
+		    align-items: flex-start;
+		    .col-separator{
+		    	background: green;
+				-webkit-flex: 2 1 auto;
+			    -ms-flex: 2 1 auto;
+			    flex: 2 1 auto;
+			}
+			.col-separator{
+				display: none;
+			}
+			.tt-icon-btn{
+				margin-left: 0px;
+			}
+		}
+        &:not(.tt-small-indent){
+            & + .tt-icon-btn{
+                margin-left: 18px;
+            }
+        }
+        .tt-text{
+            display: none;
+        }
+    }
+}
+.tt-info-box{
+	background-color: #ffffff;
+	.tt-title{
+		color: $default_color2;
+		font-size: 16px;
+		line-height: 26px;
+		font-weight: 500;
+		padding: 0 0 19px 0;
+		margin: 0;
+		letter-spacing: 0.01em;
+	}
+	.tt-title +
+	hr + .row-object-inline{
+		margin-top: -2px;
+	}
+	@media (min-width: 576px){
+		padding: 21px 30px 30px;
+		.row-object-inline{
+			.tt-select{display: none;}
+		}
+	}
+	@media (max-width: 575px){
+		padding: 21px 20px 30px;
+		.row-object-inline{
+			.tt-list-badge{
+				display: none;
+			}
+		}
+	}
+}
+.tt-row-icon{
+	display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+    align-items: flex-start;
+	margin-left: -15px;
+	margin-top: -15px;
+	.tt-item{
+		margin-left: 15px;
+		margin-top: 15px;
+	}
+}
+.tt-icon-avatar{
+	svg{
+		width: 40px;
+		height: 40px;
+	}
+}
+.row-object-inline{
+	display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-content: center;
+    align-items: center;
+    .tt-title{
+		padding-right: 15px;
+		position: relative;
+		top: 9px;
+    }
+}
+
+

mean4thai/src/assets/scss/_topic_list_item.scss

+/* Topic list item */
+.tt-topic-list{
+	.tt-list-search{
+	    .tt-title{
+	    	color: $default_color_title;
+	    	font-size: 16px;
+	    	font-weight: 500;
+	    }
+	    @media (min-width: 768px){
+	    	padding: 0 30px;
+	    }
+	    @media (max-width: 767px){
+	    	padding: 0 20px;
+	    	.tt-search{
+	    		width: 244px;
+	    	}
+	    }
+	    @media (min-width: 576px){
+	    	display: flex;
+		    flex-direction: row;
+		    flex-wrap: wrap;
+		    justify-content: space-between;
+		    align-content: stretch;
+		    align-items: center;
+	    }
+	    @media (max-width: 575px){
+	    	display: flex;
+		    flex-direction: column;
+		    flex-wrap: wrap;
+		    > *:not(:first-child){
+		    	margin-top: 10px;
+		    }
+	    }
+	}
+	.tt-topic-alert{
+		font-size: 16px;
+	    line-height: 26px;
+	    letter-spacing: 0.01em;
+	    padding: 6px 6px 7px 123px;
+	    width: 100%;
+	    &.tt-alert-default{
+	        background-color: #d1e4f9;
+	        border-left:2px solid $default_color;
+	        a{
+	            color: $default_color2;
+	            display: inline-block;
+	            position: relative;
+	            &:before{
+	                content: '';
+	                display: block;
+	                position: absolute;
+	                bottom: 5px;
+	                width: 0%;
+	                height: 1px;
+	                margin: auto;
+	                left: 0;
+	                right: 0;
+	                background-color: $default_color2;
+	                transition: width $speed linear;
+	            }
+	            &:hover{
+	                &:before{
+	                    width: 100%;
+	                }
+	            }
+	        }
+	    }
+	    @media (max-width: 1229px){
+	        padding: 6px 6px 7px 103px;
+	    }
+	    @media (max-width: 1024px){
+	        padding-left: 23px;
+	    }
+	    @media (max-width: 370px){
+	        font-size: 14px;
+	        line-height: 20px;
+	         &.tt-alert-default{
+		        a{
+		        	&:before{
+		        		bottom: 3px;
+		        	}
+		        }
+		    }
+	    }
+	}
+	.tt-list-header{
+		display: flex;
+	    flex-direction: row;
+	    flex-wrap: nowrap;
+	    justify-content: flex-start;
+	    align-content: center;
+	    align-items: center;
+		padding-left: 15px;
+		padding-right: 15px;
+		color: #303344;
+		font-weight: 500;
+		font-size: 14px;
+		letter-spacing: 0.01em;
+		.tt-col-topic{
+			width: 50%;
+			flex: 2 1 auto;
+		}
+		.tt-col-category{
+			width: 16.66667%;
+			@media (max-width: 991px){
+				display: none;
+			}
+		}
+		.tt-col-value{
+			width: 8.33333%;
+		}
+		.tt-col-value-large{
+			width: 95px;
+			min-width: 95px;
+		}
+		> [class^="tt-col"]{
+			padding: 20px 15px 22px;
+		}
+		@media (max-width: 991px){
+			.tt-col-topic{
+				width: 68.66666%;
+			}
+			.tt-col-category{
+				width: 23%;
+			}
+			.tt-col-value{
+				text-align: right;
+			}
+		}
+		@media (max-width: 991px){
+			.tt-col-category,
+			.tt-col-value{
+				display: none;
+			}
+		}
+		&.tt-border-bottom{
+			border-bottom:2px solid $border02;
+			margin-bottom: 30px;
+		}
+	}
+	.tt-item{
+		display: flex;
+	    flex-direction: row;
+	    flex-wrap: nowrap;
+	    justify-content: flex-start;
+	    align-content: center;
+	    align-items: center;
+	    position: relative;
+	    min-height: 101px;
+	    padding: 20px 15px;
+	    @media (max-width: 767px){
+	    	padding-left: 10px;
+	    	padding-right: 10px;
+	    }
+	    &.tt-itemselect{
+	    	background-color: #f9efe3;
+	    	border-bottom:1px solid $border02;
+	    }
+	    &:nth-child(even):not(.tt-itemselect):not(.tt-item-popup){
+	    	background-color: #f2f4f6;
+	    }
+	    &:nth-child(odd):not(.tt-itemselect):not(.tt-item-popup){
+	    	background-color: #ffffff;
+	    }
+	   .tt-col-avatar{
+	   		.tt-icon{
+				width: 40px;
+				height: 40px;
+			}
+    		@media (min-width: 992px){
+				width: 8.33333%;
+			}
+			@media (max-width: 991px){
+				width: 10.33333%;
+			}
+			@media (max-width: 767px){
+				width: 12.33333%;
+				min-width: 50px;
+			}
+			@media (max-width: 575px){
+				.tt-icon{
+					width: 30px;
+					height: 30px;
+				}
+			}
+		}
+		.tt-col-description{
+			@media (min-width: 992px){
+				width: 41.66667%;
+			}
+			@media (max-width: 991px){
+				width: 58.33333%;
+			}
+			@media (max-width: 767px){
+				width: 76.33333%;
+			}
+			flex: 2 1 auto;
+			padding-bottom: 2px;
+			.tt-title{
+				color: $default_color_title;
+				font-size: 16px;
+				font-weight: 500;
+				margin: 0;
+				padding: 0 0 0 0;
+				letter-spacing: 0.01em;
+				a{
+	    			color: $default_color_title;
+	    			transition: color .2s linear;
+		    		&:hover{
+		    			color: $default_color_title_hover;
+		    		}
+		    	}
+				.tt-icon{
+					width: 18px;
+					height: 18px;
+					fill:#666f74;
+					margin-right: 8px;
+					position: relative;
+					top: -1px;
+				}
+				@media (max-width: 370px){
+					font-size: 14px;
+					line-height: 22px;
+					.tt-icon{
+						width: 15px;
+						height: 15px;
+						margin-right: 4px;
+					}
+				}
+			}
+			> *:last-child{
+				padding-bottom: 0;
+			}
+			> .row{
+				> [class^="col"]:first-child{
+					padding-right: 15px;
+				}
+				.ml-auto{
+					text-align: right;
+				}
+			}
+			.tt-content{
+				color: #666f74;
+				font-size: 16px;
+				line-height: 26px;
+				margin-top: 6px;
+			}
+			.tt-value{
+				white-space: nowrap;
+				@media (max-width: 370px){
+					font-size: 14px;
+				}
+			}
+			> *:nth-child(1){
+				margin-top: 0;
+			}
+			> *:not(:first-child){
+				margin-top: 6px;
+			}
+		}
+		.tt-desktop-hide{
+			@media (min-width: 992px){
+				display: none;
+			}
+		}
+		.tt-col-category{
+			&:not(.tt-col-value-large){
+				@media (min-width: 992px){
+					width: 16.66667%;
+				}
+				@media (max-width: 991px){
+					width: 23%;
+				}
+			}
+			@media (max-width: 991px){
+				display: none;
+			}
+		}
+		.tt-btn-icon{
+			.tt-icon{
+				svg{
+					width: 22px;
+					height:18px;
+				}
+			}
+		}
+		.tt-col-value{
+			width: 8.33333%;
+		}
+		.tt-col-value-large{
+			width: 95px;
+			min-width: 95px;
+		}
+		> [class^="tt-col"]{
+			@media (min-width: 1025px){
+				padding-left: 15px;
+				padding-right: 15px;
+			}
+			@media (max-width: 1024px){
+				padding-left: 10px;
+				padding-right: 10px;
+			}
+		}
+		&.tt-item-popup{
+		    background-color: #1cbbb4;
+		    color: #ffffff;
+		    .tt-col-message{
+				@media (min-width: 992px){
+					width: 61.33334%;
+				}
+				@media (max-width: 991px){
+					width: 53.66667%;
+				}
+			}
+			.tt-col-btn{
+				display: flex;
+			    flex-direction: row;
+			    flex-wrap: wrap;
+			    justify-content: flex-end;
+			    align-content: center;
+			    align-items: center;
+				text-align: right;
+				@media (min-width: 992px){
+					width: 33.33332%;
+				}
+				@media (max-width: 991px){
+					width: 40.99999%;
+				}
+				> [class^="btn"]:not(.btn-icon){
+					margin-left: 15px;
+				}
+				.btn-icon{
+					margin-left: 5px;
+				}
+			}
+		    .btn-icon{
+		    	background: no-repeat;
+		    	border: none;
+		    	outline: none;
+		    	padding: 15px 0px 15px 10px;
+		    	margin: 0;
+				.tt-icon{
+					width: 13px;
+					height: 18px;
+					fill:#ffffff;
+					transition: fill $speed linear;
+				}
+				&:hover{
+					.tt-icon{
+						fill:#333333;
+					}
+				}
+			}
+			@media (max-width: 767px){
+				flex-wrap: wrap;
+				.tt-col-message{
+					width: 81.99998%;
+					padding-right: 24px;
+					@media (max-width: 370px){
+						font-size: 14px;
+						line-height: 22px;
+					}
+				}
+				.tt-col-btn{
+					display: block;
+					text-align: left;
+					width: 81.99998%;
+					margin-left: 12.33333%;
+					margin-top: 13px;
+					.btn-icon{
+						position: absolute;
+						right: 0;
+						top: 50%;
+						margin-top: -28px;
+						padding-left: 22px;
+						padding-right: 22px;
+					}
+					[class^="btn"]{
+						float: left;
+					}
+					[class^="btn"]:first-child{
+						margin-left: 0;
+					}
+				}
+			}
+		}
+	}
+	.tt-color-select{
+		color: $default_color2;
+		font-weight: 500;
+	}
+	.tt-list-badge{
+		margin-top: -8px;
+	}
+	.show-mobile{
+		@media (min-width: 992px){
+			display: none;
+		}
+	}
+	.hide-desktope{
+		@media (min-width: 992px){
+			display: none;
+		}
+	}
+	.hide-mobile{
+		@media (max-width: 991px){
+			display: none;
+		}
+	}
+}
+.tt-row-btn{
+	text-align: center;
+	padding: 65px 0;
+	.btn-icon{
+		background-color: transparent;
+		border: none;
+		padding: 5px;
+		display: inline-block;
+		outline: none;
+		svg{
+			width: 23px;
+			height: 29px;
+			fill: #666f74;
+			transition: fill 0.2s linear;
+		}
+		&:hover{
+			svg{
+				fill: $default_color2;
+			}
+		}
+	}
+	@media (max-width: 767px){
+		padding: 45px 0;
+	}
+}

mean4thai/src/assets/scss/_typography.scss

+html.touch-device{
+    overflow-x: hidden;
+    height: 100%;
+}
+@-webkit-keyframes fade-in {   0% { opacity: 0.1; }   100% { opacity: 1; }   }
+@-moz-keyframes    fade-in {   0% { opacity: 0.1; }   100% { opacity: 1; }   }
+@-o-keyframes      fade-in {   0% { opacity: 0.1; }   100% { opacity: 1; }   }
+@keyframes         fade-in {   0% { opacity: 0.1; }   100% { opacity: 1; }   }
+body{
+    margin: 0;
+    overflow-x: hidden;
+    font-size: 16px;
+    line-height: 26px;
+    -webkit-animation: fade-in 0.3s linear;
+    -moz-animation: fade-in 0.3s linear;
+    -o-animation: fade-in 0.3s linear;
+    animation: fade-in 0.3s linear;
+}
+body.no-scroll{
+  overflow: hidden;
+  width: 100%;
+  position: fixed;
+  z-index: 0;
+}
+body.no-scroll:not(.touch-device),
+html.win.ie body.no-scroll{
+  padding-right: 17px;
+  #tt-header{
+    padding-right: 17px;
+  }
+}
+@media (max-width: 767px){
+    [class^="col"],
+    .container-fluid,
+    .container{
+        padding-right: 10px;
+        padding-left: 10px;
+    }
+    > .row{
+        margin-right: 0px;
+        margin-left: 0px;
+    }
+}
+/*
+	Typography
+*/
+a{
+    text-decoration: none;
+    outline:none;
+    color: #2172cd;
+}
+a:hover{
+    outline: none;
+    text-decoration: none;
+    outline:none;
+}
+a:active,
+a:visited,
+a:focus{
+    text-decoration: none;
+    outline: none;
+}
+hr{
+    background-color: #e2e7ea;
+    border: none;
+    display: block;
+    width: 100%;
+    height: 1px;
+    z-index: 0;
+    line-height: 0;
+    margin:22px 0 21px;
+}
+.tt-offset-5{
+    margin-top: 15px;
+}
+.tt-offset-11{
+    margin-top: 11px;
+}
+.tt-ofset-30{
+    margin-top: 30px;
+}
+.tt-offset-37{
+    margin-top: 37px;
+}
+.tt-btn-icon{
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    cursor: pointer;
+    padding: 4px 15px 5px;
+    line-height: 1;
+    height: 39px;
+    .tt-icon{
+        fill:#666f74;
+        transition: fill 0.2s linear;
+        svg{
+            width: 18px;
+            height: 18px;
+        }
+    }
+    &:hover{
+        .tt-icon{
+            fill:#2172cd;
+        }
+    }
+}
+.btn{
+    font-size: 16px;
+    padding: 4px 15px 5px;
+    line-height: 1;
+    font-weight: 500;
+    height: 39px;
+    letter-spacing: 0.01em;
+    border: none;
+    outline: none;
+    position: relative;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    cursor: pointer;
+    border-radius: $base-radius;
+    transition:all $speed linear;
+    box-shadow: none;
+    i{
+        margin-right: 3px;
+    }
+    &.btn-primary{
+    	background-color:#e2e7ea;
+    	color: #182730;
+    	&:hover{
+    		background-color: #333333;
+    		color: #ffffff;
+    	}
+    }
+    &.btn-secondary{
+    	background-color:#2172cd;
+    	color: #ffffff;
+    	&:hover{
+    		background-color: #333333;
+    		color: #ffffff;
+    	}
+    }
+    &.btn-color01{
+        background-color:#3b5998;
+        color: #ffffff;
+        &:hover{
+            background-color: #333333;
+            color: #ffffff;
+        }
+    }
+    &.btn-color02{
+        background-color:#00aced;
+        color: #ffffff;
+        &:hover{
+            background-color: #333333;
+            color: #ffffff;
+        }
+    }
+    &:focus{
+        outline: none;
+    }
+    i{
+        display: inline-block;
+        position: relative;
+        top: -1px;
+        svg{
+            width: 16px;
+            height: 15px;
+        }
+    }
+}
+.btn-block{
+    width: 100%;
+}
+
+.row.no-gutters {
+   margin-right: 0;
+   margin-left: 0;
+}
+.row.no-gutters > [class^="col-"],
+.row.no-gutters > [class*=" col-"] {
+   padding-right: 0;
+   padding-left: 0;
+}
+.text-right{
+    text-align: right;
+}
+.text-left{
+    text-align: right;
+}
+.text-center{
+    text-align: center;
+}
+.tt-underline{
+    position: relative;
+    display: inline-block;
+    color: #2172cd;
+    &:before{
+        position: absolute;
+        bottom: 5px;
+        left: 0;
+        right: 0;
+        margin: auto;
+        width: 0%;
+        content: '';
+        color: transparent;
+        height: 1px;
+        transition: width 0.2s linear;
+        left: 0;
+    }
+    &:hover{
+        &:before{
+            width: 100%;
+        }
+    }
+    &:not([class^="tt-color-"]){
+        &:before{
+            background: #2172cd;
+        }
+        &:hover{
+            color: #2172cd;
+        }
+    }
+    &.tt-color-dark{
+        color: #182730;
+        &:before{
+            background: #182730;
+        }
+        &:hover{
+            color: #182730;
+        }
+    }
+}
+.tt-underline-02{
+    position: relative;
+    display: inline-block;
+    &:before{
+        position: absolute;
+        bottom: 4px;
+        left: 0;
+        right: 0;
+        margin: auto;
+        width: 100%;
+        content: '';
+        color: transparent;
+        height: 1px;
+        transition: width 0.2s linear;
+        left: 0;
+    }
+    &:hover{
+        &:before{
+            width: 0%;
+        }
+    }
+    &:not([class^="tt-color-"]){
+        color: #2172cd;
+        &:before{
+            background: #2172cd;
+        }
+        &:hover{
+            color: #2172cd;
+        }
+    }
+    &.tt-color-dark{
+        color: #182730;
+        &:before{
+            background: #182730;
+        }
+        &:hover{
+            color: #182730;
+        }
+    }
+}
+.tt-icon-btn{
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-content: center;
+    align-items: center;
+    display: inline-block;
+    vertical-align: middle;
+    .tt-icon{
+        position: relative;
+        top: -2px;
+        svg{
+            width: 23px;
+            height: 18px;
+            fill: #666f74;
+            transition:fill $speed linear
+        }
+        & + .tt-text{
+            margin-left: 10px;
+        }
+    }
+    .tt-text{
+        color: #666f74;
+        transition:text $speed linear
+    }
+    &:hover{
+        &{
+            .tt-text{
+                color: $default_color;
+            }
+            .tt-icon{
+                svg{
+                    fill: $default_color;
+                    path{
+                        fill: $default_color;
+                    }
+                }
+            }
+        }
+        &.tt-hover-02{
+            .tt-text{
+                color: $default_color2;
+            }
+            .tt-icon{
+                svg{
+                    fill: $default_color2;
+                    path{
+                        fill: $default_color2;
+                    }
+                }
+            }
+        }
+    }
+    &:not(.tt-small-indent){
+        & + .tt-icon-btn{
+            margin-left: 29px;
+        }
+    }
+    &.tt-small-indent{
+        & + .tt-icon-btn{
+            margin-left: 22px;
+        }
+    }
+    &.tt-position-bottom{
+        @media (min-width: 576px){
+            flex-wrap: wrap;
+            justify-content: center;
+            padding-left: 24px;
+            padding-right: 24px;
+            text-align: center;
+            .tt-text{
+                display: block;
+                padding-top: 4px;
+                width: 100%;
+                margin-left: 0;
+                color: #303344;
+                letter-spacing: 0.01em;
+            }
+        }
+    }
+}
+.tt-title-border{
+    border-bottom:1px solid $border;
+    color: #303344;
+    font-size: 18px;
+    line-height: 26px;
+    font-weight: 500;
+    padding: 0 0 23px 0;
+    margin-bottom: 21px;
+    letter-spacing: 0.01em;
+}
+
+/*
+    Title separator
+*/
+.tt-title-separator{
+    color: #666f74;
+    font-size: 16px;
+    position: relative;
+    text-align: center;
+    margin-bottom: 37px;
+    span{
+        background-color:$body-bg;
+        position: relative;
+        z-index: 2;
+        display: inline-block;
+    }
+    &:before {
+        border-top: 1px solid $border;
+        content:"";
+        margin: 0 auto;
+        position: absolute;
+        top: 50%;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 95%;
+        z-index: -1;
+    }
+    margin-top: 35px;
+    & + .tt-topic-list{
+        margin-top: 37px;
+    }
+    @media (min-width: 576px){
+        span{
+            padding: 0 30px;
+        }
+    }
+    @media (max-width: 575px){
+        span{
+            padding: 0 20px;
+        }
+    }
+}
+.tt-wrapper-inner{
+    @media (min-width: 576px){
+        margin-left: 30px;
+        margin-right: 30px;
+    }
+    @media (max-width: 575px){
+        margin-left: 20px;
+        margin-right: 20px;
+    }
+}
+
+/*
+    Video responsive
+*/
+.video-container{
+    position:relative;
+    padding-bottom:56.25%;
+    padding-top:30px;
+    height:0;
+    overflow:hidden;
+    iframe,
+    object,
+    embed{
+        position:absolute;
+        top:0;
+        left:0;
+        width:100%;
+        height:100%;
+        border: none;
+        outline: none;
+    }
+}
+/* button-icon (*page-create-topic.html)*/
+@media (max-width: 410px){
+    .tt-w410-col-02{
+        [class^="col"]{
+            flex: 0 0 50%;
+            max-width: 50%;
+        }
+    }
+}
+
+.tt-button-icon{
+    background-color: #e2e7ea;
+    border-radius: 3px;
+    border:2px solid #e2e7ea;
+    display: block;
+    padding-top: 28px;
+    padding-bottom: 19px;
+    transition: border 0.2s linear;
+    .tt-icon{
+        display: block;
+        text-align: center;
+        svg{
+            max-width: 78px;
+            max-height: 78px;
+            fill:#666e74;
+        }
+    }
+    .tt-text{
+        color: #182730;
+        display: block;
+        text-align: center;
+        margin-top: 21px;
+        font-weight: 600;
+        font-size: 16px;
+        letter-spacing: 0.01em;
+    }
+    &:hover,
+    &.active{
+        border-color:#2172cd;
+    }
+    @media (max-width: 767px){
+        padding-top: 17px;
+        padding-bottom: 9px;
+        .tt-icon{
+            svg{
+                max-width: 55px;
+                max-height: 55px;
+            }
+        }
+        .tt-text{
+            margin-top: 11px;
+        }
+    }
+    @media (max-width: 575px){
+        .tt-icon{
+            svg{
+                max-width: 60px;
+                max-height: 60px;
+            }
+        }
+    }
+}
+.tt-wrapper-btnicon{
+    padding-bottom: 5px;
+    @media (min-width: 576px){
+        margin-top: -30px;
+        .tt-button-icon{
+            margin-top: 30px;
+        }
+    }
+    @media (max-width: 575px){
+        margin-top: -20px;
+        .tt-button-icon{
+            margin-top: 20px;
+        }
+    }
+}
+
+
+@media (max-width: 575px){
+    .tt-hidden-mobile{
+        display: none;
+    }
+}
+.tt-offset-top-30{
+    margin-top: 30px;
+}
+.tt-offset-top-55{
+    margin-top: 55px;
+}
+
+.tt-wrapper-section{
+    background-color: #f2f4f6;
+    position: relative;
+}
+
+/* tt-list-btn */
+.tt-list-btn{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+    align-items: flex-start;
+    margin-top: -15px;
+    [class^="btn"],
+    .tt-btn-icon{
+        margin-top: 15px;
+    }
+    [class^="btn"]:not(.btn-icon):not(:last-child){
+        margin-right: 15px;
+    }
+}
+.tt-avatar-icon{
+    &.tt-size-md{
+        svg{
+            width: 40px;
+            height: 40px;
+        }
+    }
+}
+
+/*
+    Responsive Table
+*/
+
+@media (max-width: 575px){
+    .table-responsive-sm{
+        display: block;
+        width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        -ms-overflow-style: -ms-autohiding-scrollbar;
+        table{
+            width: 575px;
+        }
+    }
+}
+
+
+/* dl-layout-01 */
+.dl-layout-01{
+    dt{
+        color: #182730;
+        font-weight: 600;
+        &:not(:first-child){
+            margin-top: 25px;
+        }
+    }
+}
+
+/*
+    List
+*/
+/* tt-list-dot */
+.tt-list-dot{
+    list-style: none;
+    padding: 0;
+    li{
+        position: relative;
+        &:not(:last-child){
+            padding-bottom: 8px;
+        }
+        &:before{
+            content: '';
+            width: 8px;
+            height: 8px;
+            background-color: #666f74;
+            border-radius:50%;
+            display: inline-block;
+            position: absolute;
+            top: 8px;
+            left: 0;
+        }
+        padding: 0 0 0 19px;
+        color: #666f74;
+    }
+    @media (min-width: 1025px){
+        margin: 0 0 0 35px;
+    }
+    @media (max-width: 1024px) and (min-width: 576px){
+        margin: 0 0 0 25px;
+    }
+}
+.tt-indent-top01{
+    margin-top: 42px;
+}
+.tt-indent-top02{
+    margin-top: 26px;
+}
\ No newline at end of file

mean4thai/src/assets/scss/_user_header.scss

+/*
+    user-header(*page-single-user.html)
+*/
+.tt-user-header{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-content: center;
+    align-items: center;
+    padding: 29px 0 29px 15px;
+    .tt-col-avatar{
+    	padding-left: 15px;
+	    padding-right: 15px;
+	    width: 8.33333%;
+		.tt-icon{
+			width: 40px;
+			height: 40px;
+            @media (max-width: 575px){
+                width: 30px;
+                height: 30px;
+            }
+		}
+        @media (max-width: 991px){
+            width: 10.33333%;
+        }
+        @media (max-width: 767px){
+            width: 12.33333%;
+            min-width: 50px;
+        }
+
+    }
+    .tt-col-title{
+    	display: flex;
+	    flex-direction: row;
+	    flex-wrap: nowrap;
+	    justify-content: flex-start;
+	    align-content: center;
+	    align-items: center;
+    	padding-left: 15px;
+    	padding-right: 15px;
+    	flex: 2 1 auto;
+    	.tt-title{
+    		color: #182730;
+			font-weight: 600;
+    		a{
+    			color: #182730;
+    			transition: color 0.2s linear;
+    			&:hover{
+    				color: #2172cd;
+    			}
+    		}
+    	}
+    	> *:not(:first-child){
+    		margin-left: 15px;
+    	}
+    }
+    .tt-btn-icon{
+        svg{
+            width: 18px;
+            height: 18px;
+        }
+    }
+     @media (min-width: 768px){
+        .btn{
+            min-width: 110px;
+        }
+    }
+    @media (max-width: 767px){
+        flex-wrap: wrap;
+        .tt-col-btn{
+            width: 100%;
+            display: block;
+            margin-top: 20px;
+            .tt-btn-icon{
+                padding-left: 0;
+            }
+         }
+    }
+    @media (max-width: 1024px){
+        >[class^=tt-col] {
+            padding-left: 10px;
+            padding-right: 10px;
+        }
+    }
+}

mean4thai/src/assets/scss/_variables.scss

+@import url('https://fonts.googleapis.com/css?family=Krub:400,500,600');
+
+/* Bootstrap variables */
+$font-family-sans-serif: 'Krub', sans-serif;
+$default_font:				$font-family-sans-serif;
+$body-bg:                   #f8f9fb !default;
+$body-color:                #666f74 !default;
+
+/* Colors */
+$default_color:                  					#2172cd;
+$default_color2:                    				#182730;
+$border:											#e2e7ea;
+/* Grid */
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1230px
+) !default;
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1200px
+) !default;
+$grid-columns:                12 !default;
+$grid-gutter-width:           30px !default;
+
+
+/* Custom variables */
+$base-radius: 3px;
+$speed:							0.2s;
+
+

mean4thai/src/assets/scss/style.scss

+/*---------------------------------------*/
+/*--------   Table of contents   --------*/
+/*
+1. External module
+	1.1 Bootstrap
+	1.2 Magnific Popup
+	1.3 Perfect scrollbar
+	1.4 Form
+	1.5 typography
+2. Header
+3. Page Content
+	3.1 Basic settings for page content
+	3.2 Topic list item
+	3.3 Single Topic
+	3.4 Badge
+	3.5 Modal
+	3.6 Popup Settings
+	3.7 User header
+	3.8 Default Tabs
+	3.9 Editor
+	3.10 Gallery
+	3.11 Login
+	3.12 Categories List
+	3.13 Categories Singles
+	3.14 Layout Tab
+	3.15 Layout404
+	3.16 Followers List
+	3.17 Messages Layout
+	3.18 Create Topic
+---------------------------------------*/
+/* Colors */
+$default_color:                                     #2172cd;
+$default_color2:                                    #182730;
+$default_color3:                                    #f2f4f6;
+$default_color_title:								#303344;
+$default_color_title_hover:							$default_color;
+$default_text:										#303344;
+$border:                                            #666f74;
+$border02:                                          #e2e7ea;
+/*-------  1.1 Bootstrap  --------*/
+@import "variables";
+@import "../../node_modules/bootstrap/scss/bootstrap-reboot";
+@import "../../node_modules/bootstrap/scss/bootstrap-grid";
+/*-------  1.2 Magnific Popup  --------*/
+@import "../../node_modules/magnific-popup/dist/magnific-popup.css";
+@import "_custom_magnific_popup";
+/*-------  1.3 Perfect scrollbar  --------*/
+@import "../external/perfect-scrollbar/perfect-scrollbar.scss";
+/*-------  1.4 Form  --------*/
+@import "_form";
+/*-------  1.5 typography  --------*/
+@import "_typography";
+/*---------------------------------------*/
+/*--------     2. Header         --------*/
+/*---------------------------------------*/
+@import "_header";
+@import "_header_objects";
+@import "_mobile-menu";
+/*---------------------------------------*/
+/*--------   3. Page Content     --------*/
+/*---------------------------------------*/
+/*-------  3.1 Basic settings for page content  --------*/
+@import "_pageContent";
+/*-------  3.2 Topic list item                  --------*/
+@import "_topic_list_item";
+/*-------  3.3 Single Topic                     --------*/
+@import "_single-topic";
+/*-------  3.4 Badge                            --------*/
+@import "_badge";
+/*-------  3.5 Modal                            --------*/
+@import "_modal";
+/*-------  3.6 Popup Settings                   --------*/
+@import "_popup_settings";
+/*-------  3.7 User header                      --------*/
+@import "_user_header";
+/*-------  3.8 Default Tabs                     --------*/
+@import "_default_tabs";
+/*-------  3.9 Editor  ---                         -----*/
+@import "_editor";
+/*-------  3.10 Gallery                         --------*/
+@import "_gallery";
+/*-------  3.11 Login                           --------*/
+@import "_login";
+/*-------  3.12 Categories List                 --------*/
+@import "_categories_list";
+/*-------  3.13 Categories Singles               --------*/
+@import "_categories_single";
+/*-------  3.14 Layout Tab                      --------*/
+@import "_layout-tab.scss";
+/*-------  3.15 Layout404                       --------*/
+@import "_layout404.scss";
+/*-------  3.16 Followers List                  --------*/
+@import "_followers_list.scss";
+/*-------  3.17 Messages Layout                 --------*/
+@import "_messages_layout.scss";
+/*-------  3.18 Create Topic                    --------*/
+@import "_btn-create-topic.scss";

mean4thai/src/catagory.ts

+export const catagory = [
+    {
+        type: 'การบ้านการเมือง',
+    },
+    {
+        type: 'ความรู้และการเรียน',
+    },
+    {
+        type: 'ดาม่าชีวิต',
+    },
+    {
+        type: 'เม่ามอย',
+    },
+    {
+        type: 'ความรัก',
+    },
+    {
+        type: 'ชีวะประวัติ',
+    },
+];
\ No newline at end of file

mean4thai/src/environments/environment.prod.ts

+export const environment = {
+  production: true
+};

mean4thai/src/environments/environment.ts

+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+export const environment = {
+  production: false
+};

mean4thai/src/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Community little</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <link rel="icon" type="image/x-icon" href="src/favicon.ico" />
+
+    <link
+      rel="prefetch"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      as="style"
+      crossorigin
+    />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+
+    <link
+      rel="preload"
+      href="https://fonts.googleapis.com/css?family=Exo:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i"
+      as="style"
+      crossorigin
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Exo:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="assets/css/style.css">
+  </head>
+  <body>
+    <app-root></app-root>
+    <script src="assets/js/bundle.js"></script>
+     
+    <svg width="0" height="0" class="hidden">
+     <symbol aria-hidden="true" data-prefix="fab" data-icon="facebook-f" xmlns="http://www.w3.org/2000/svg"
+       viewBox="0 0 264 512" id="facebook-f-brands">
+       <path fill="currentColor"
+         d="M215.8 85H264V3.6C255.7 2.5 227.1 0 193.8 0 124.3 0 76.7 42.4 76.7 120.3V192H0v91h76.7v229h94V283h73.6l11.7-91h-85.3v-62.7c0-26.3 7.3-44.3 45.1-44.3z">
+       </path>
+     </symbol>
+     <symbol aria-hidden="true" data-prefix="fab" data-icon="twitter" xmlns="http://www.w3.org/2000/svg"
+       viewBox="0 0 512 512" id="twitter-brands">
+       <path fill="currentColor"
+         d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 117 117" id="icon-advanced_search">
+       <path
+         d="M54 108C24.22 108 0 83.78 0 54S24.22 0 54 0s54 24.22 54 54-24.22 54-54 54zm0-99C29.19 9 9 29.19 9 54s20.19 45 45 45 45-20.19 45-45S78.81 9 54 9z">
+       </path>
+       <path
+         d="M112.5 117c-1.15 0-2.3-.44-3.18-1.32l-23.5-23.5a4.49 4.49 0 0 1 0-6.36 4.49 4.49 0 0 1 6.36 0l23.5 23.5a4.49 4.49 0 0 1 0 6.36c-.88.88-2.03 1.32-3.18 1.32zm-40-72h-37c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5h37c2.49 0 4.5 2.01 4.5 4.5S74.99 45 72.5 45zm-14 27h-23c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5h23c2.49 0 4.5 2.01 4.5 4.5S60.99 72 58.5 72z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81 45" id="icon-arrow_below">
+       <path
+         d="M40.5 45c-1.15 0-2.3-.44-3.18-1.32l-36-36a4.49 4.49 0 0 1 0-6.36 4.49 4.49 0 0 1 6.36 0L40.5 34.13 73.32 1.32a4.49 4.49 0 0 1 6.36 0 4.49 4.49 0 0 1 0 6.36l-36 36c-.88.88-2.03 1.32-3.18 1.32z"
+         fill="#666f74"></path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 81" id="icon-arrow_left">
+       <path
+         d="M40.5 81c-1.15 0-2.3-.44-3.18-1.32l-36-36a4.49 4.49 0 0 1 0-6.36l36-36a4.49 4.49 0 0 1 6.36 0 4.49 4.49 0 0 1 0 6.36L10.86 40.5l32.82 32.82a4.49 4.49 0 0 1 0 6.36c-.88.88-2.03 1.32-3.18 1.32z"
+         fill="#666f74"></path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" id="icon-ava-a">
+       <circle fill="#D81159" cx="72" cy="72" r="72"></circle>
+       <path fill="#FFF"
+         d="M90.854 98.959l-5.68-13.199h-27.44l-5.68 13.199h-10.4l25.52-56.399h8.4l25.521 56.399H90.854zM61.094 77.76h20.64l-10.32-24-10.32 24z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" id="icon-ava-b">
+       <circle fill="#218380" cx="72" cy="72" r="72"></circle>
+       <path fill="#FFF"
+         d="M92.375 74.799c1.785 2.4 2.68 5.334 2.68 8.801 0 4.8-1.721 8.561-5.16 11.279-3.439 2.721-8.174 4.08-14.2 4.08h-25.6V42.56h24.8c5.865 0 10.467 1.293 13.799 3.88 3.334 2.587 5 6.2 5 10.84 0 2.988-.787 5.574-2.359 7.76-1.574 2.188-3.748 3.788-6.52 4.8 3.251.907 5.771 2.559 7.56 4.959zm-32.201-8.48h13.041c7.092 0 10.639-2.64 10.639-7.92 0-2.666-.879-4.64-2.639-5.92s-4.428-1.92-8-1.92H60.174v15.76zm22.56 22.64c1.705-1.332 2.561-3.412 2.561-6.24 0-2.826-.869-4.932-2.602-6.319-1.732-1.386-4.439-2.08-8.119-2.08h-14.4v16.64h14.4c3.733-.001 6.453-.667 8.16-2.001z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" id="icon-ava-c">
+       <circle fill="#679436" cx="72" cy="72" r="72"></circle>
+       <path fill="#FFF"
+         d="M61.375 96.119c-4.134-2.372-7.308-5.746-9.52-10.119-2.214-4.373-3.32-9.467-3.32-15.281 0-5.812 1.106-10.892 3.32-15.239 2.212-4.346 5.386-7.706 9.52-10.08 4.132-2.373 8.972-3.56 14.52-3.56 3.785 0 7.359.587 10.721 1.76 3.359 1.174 6.186 2.827 8.479 4.96l-3.439 7.52c-2.561-2.026-5.094-3.506-7.6-4.44-2.508-.933-5.174-1.4-8-1.4-5.44 0-9.64 1.76-12.6 5.28-2.96 3.52-4.44 8.587-4.44 15.199 0 6.668 1.48 11.761 4.44 15.281 2.96 3.52 7.16 5.279 12.6 5.279 2.826 0 5.492-.467 8-1.4 2.506-.932 5.039-2.412 7.6-4.439l3.439 7.52c-2.293 2.135-5.119 3.788-8.479 4.961-3.361 1.172-6.936 1.76-10.721 1.76-5.548-.001-10.388-1.188-14.52-3.562z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" id="icon-ava-d">
+       <circle fill="#73D2DE" cx="72" cy="72" r="72"></circle>
+       <path fill="#FFF"
+         d="M49.254 42.56h20.8c9.227 0 16.387 2.467 21.48 7.4 5.092 4.934 7.64 11.854 7.64 20.759 0 8.908-2.548 15.841-7.64 20.801-5.094 4.96-12.254 7.439-21.48 7.439h-20.8V42.56zm20.16 48c12.96 0 19.439-6.612 19.439-19.841 0-13.172-6.479-19.759-19.439-19.759h-9.84v39.6h9.84z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" id="icon-ava-e">
+       <circle fill="#ABD1B5" cx="72" cy="72" r="72"></circle>
+       <path fill="#FFF" d="M53.854 98.959V42.56h37.76v8.16h-27.68v15.52h26.08v8.08h-26.08v16.479h27.68v8.16h-37.76z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" id="icon-ava-f">
+       <circle fill="#9067C6" cx="72" cy="72" r="72"></circle>
+       <path fill="#FFF" d="M54.774 98.959V42.56h36.96v8.24h-26.8v15.36h25.2v8.24h-25.2v24.56h-10.16z"></path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" id="icon-ava-g">
+       <circle fill="#CAC4CE" cx="72" cy="72" r="72"></circle>
+       <path fill="#FFF"
+         d="M95.135 68.479v27.04c-2.561 1.279-5.668 2.293-9.32 3.04a55.641 55.641 0 0 1-11.16 1.12c-5.813 0-10.854-1.16-15.12-3.48-4.268-2.32-7.534-5.652-9.8-10-2.268-4.346-3.4-9.506-3.4-15.48 0-5.919 1.133-11.052 3.4-15.399 2.266-4.346 5.492-7.68 9.68-10 4.187-2.32 9.106-3.48 14.76-3.48 3.946 0 7.652.574 11.12 1.72 3.466 1.147 6.346 2.788 8.64 4.92l-3.439 7.44c-2.614-2.026-5.188-3.48-7.721-4.36s-5.319-1.32-8.36-1.32c-5.813 0-10.199 1.72-13.159 5.16-2.96 3.44-4.44 8.547-4.44 15.319 0 13.868 6.08 20.801 18.24 20.801 3.626 0 7.253-.506 10.88-1.52V75.84h-12.16v-7.36h21.359z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" id="icon-ava-h">
+       <circle fill="#86BA90" cx="72" cy="72" r="72"></circle>
+       <path fill="#FFF" d="M85.814 42.56h10.08v56.399h-10.08v-24.48h-28.88v24.479h-10.16V42.56h10.16v23.6h28.88v-23.6z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" id="icon-ava-i">
+       <circle fill="#DFA06E" cx="72" cy="72" r="72"></circle>
+       <path fill="#FFF" d="M66.174 98.959V42.56h10.32v56.399h-10.32z"></path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" id="icon-ava-j">
+       <circle fill="#FC814A" cx="72" cy="72" r="72"></circle>
+       <path fill="#FFF"
+         d="M56.535 91.359l5.6-.4c4.746-.319 7.12-2.932 7.12-7.84V42.56h10.319v40.479c0 5.014-1.319 8.895-3.959 11.641-2.641 2.747-6.574 4.279-11.801 4.6l-6.56.4-.719-8.321z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" id="icon-ava-k">
+       <circle fill="#564256" cx="72" cy="72" r="72"></circle>
+       <path fill="#FFF"
+         d="M100.055 98.959H87.494l-26.16-26.24v26.24h-10.32V42.56h10.32v25.2l25.12-25.2h12.32l-27.28 27.12 28.561 29.279z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" id="icon-ava-l">
+       <circle fill="#2E6171" cx="72" cy="72" r="72"></circle>
+       <path fill="#FFF" d="M55.214 98.959V42.56h10.32v47.92h26.319v8.479H55.214z"></path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" id="icon-ava-m">
+       <circle fill="#D4AFCD" cx="72" cy="72" r="72"></circle>
+       <path fill="#FFF"
+         d="M90.734 42.56h8.08v56.399h-9.12V61.68l-14.88 28.16h-6.88l-14.96-27.76.08 36.879h-9.12V42.56h8.16l19.36 36.88 19.28-36.88z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" id="icon-ava-n">
+       <circle fill="#7F7EFF" cx="72" cy="72" r="72"></circle>
+       <path fill="#FFF" d="M85.454 42.56h9.68v56.399h-7.76L57.134 59.6v39.359h-9.6V42.56h7.68l30.24 39.28V42.56z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" id="icon-ava-o">
+       <circle fill="#CC8B8C" cx="72" cy="72" r="72"></circle>
+       <path fill="#FFF"
+         d="M57.094 96.16c-4.027-2.348-7.134-5.707-9.32-10.08-2.188-4.373-3.28-9.493-3.28-15.361 0-5.866 1.08-10.972 3.24-15.319 2.16-4.346 5.266-7.692 9.32-10.04 4.053-2.346 8.826-3.52 14.321-3.52 5.492 0 10.252 1.174 14.279 3.52 4.025 2.348 7.119 5.694 9.279 10.04 2.16 4.348 3.24 9.454 3.24 15.319 0 5.868-1.094 10.988-3.279 15.361-2.188 4.373-5.295 7.732-9.32 10.08-4.027 2.347-8.76 3.52-14.199 3.52-5.495 0-10.254-1.173-14.281-3.52zm26.4-10.08c2.906-3.573 4.359-8.693 4.359-15.361 0-6.666-1.453-11.772-4.359-15.319-2.908-3.546-6.947-5.32-12.119-5.32-5.228 0-9.294 1.773-12.201 5.32-2.908 3.547-4.36 8.654-4.36 15.319 0 6.668 1.452 11.788 4.36 15.361 2.906 3.573 6.973 5.359 12.201 5.359 5.172 0 9.211-1.786 12.119-5.359z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" id="icon-ava-p">
+       <circle fill="#598181" cx="72" cy="72" r="72"></circle>
+       <path fill="#FFF"
+         d="M51.015 42.56h24.64c6.026 0 10.721 1.507 14.08 4.52 3.36 3.014 5.04 7.24 5.04 12.68 0 5.44-1.68 9.68-5.04 12.72-3.359 3.04-8.054 4.56-14.08 4.56h-14.32v21.92h-10.32v-56.4zm23.36 26.559c7.092 0 10.64-3.092 10.64-9.28 0-3.146-.88-5.48-2.64-7-1.761-1.52-4.428-2.28-8-2.28H61.334v18.56h13.041z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" id="icon-ava-q">
+       <circle fill="#4B244A" cx="72" cy="72" r="72"></circle>
+       <path fill="#FFF"
+         d="M86.814 98.92c.959.826 1.893 1.986 2.801 3.479l5.76 9.36-8.641 4.16-7.76-12.561c-1.494-2.453-4.027-3.68-7.6-3.68-5.495 0-10.254-1.173-14.281-3.52-4.027-2.348-7.134-5.707-9.32-10.08-2.188-4.373-3.28-9.493-3.28-15.361 0-5.866 1.093-10.972 3.28-15.319 2.186-4.346 5.292-7.692 9.32-10.04 4.026-2.346 8.786-3.52 14.281-3.52 5.439 0 10.172 1.174 14.199 3.52 4.025 2.348 7.133 5.694 9.32 10.04 2.186 4.348 3.279 9.454 3.279 15.319 0 6.4-1.268 11.881-3.799 16.441-2.535 4.559-6.174 7.879-10.92 9.959 1.281.376 2.401.977 3.361 1.803zm-3.32-12.84c2.906-3.573 4.359-8.693 4.359-15.361 0-6.666-1.453-11.772-4.359-15.319-2.908-3.546-6.947-5.32-12.119-5.32-5.228 0-9.294 1.773-12.201 5.32-2.908 3.547-4.36 8.654-4.36 15.319 0 6.668 1.452 11.788 4.36 15.361 2.906 3.573 6.973 5.359 12.201 5.359 5.172 0 9.211-1.786 12.119-5.359z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" id="icon-ava-r">
+       <circle fill="#7180B9" cx="72" cy="72" r="72"></circle>
+       <path fill="#FFF"
+         d="M96.895 98.959h-11.2l-9.681-18c-.907-1.705-2.027-2.906-3.359-3.6-1.334-.692-3.014-1.04-5.04-1.04h-7.84v22.64h-10.16V42.56h24.96c6.4 0 11.267 1.427 14.6 4.28 3.333 2.854 5 6.974 5 12.36 0 4.32-1.214 7.88-3.64 10.679-2.428 2.801-5.854 4.628-10.28 5.48 2.986.801 5.387 2.908 7.2 6.32l9.44 17.28zM81.694 66.2c1.813-1.466 2.72-3.72 2.72-6.76 0-3.092-.907-5.346-2.72-6.76-1.813-1.413-4.667-2.12-8.56-2.12h-13.44V68.4h13.44c3.893-.001 6.747-.733 8.56-2.2z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" id="icon-ava-s">
+       <circle fill="#69747C" cx="72" cy="72" r="72"></circle>
+       <path fill="#FFF"
+         d="M58.854 97.92c-3.788-1.173-6.987-2.826-9.6-4.961l3.44-7.52c2.72 2.08 5.586 3.6 8.6 4.561 3.013.959 6.28 1.439 9.799 1.439 3.893 0 6.894-.68 9.001-2.04 2.106-1.36 3.16-3.267 3.16-5.72 0-2.133-.975-3.76-2.921-4.881-1.947-1.119-5.188-2.186-9.72-3.199-4.693-1.013-8.507-2.187-11.44-3.52-2.934-1.333-5.147-3.041-6.64-5.121-1.494-2.08-2.24-4.72-2.24-7.92 0-3.306.906-6.266 2.72-8.88 1.813-2.613 4.372-4.653 7.68-6.12 3.306-1.466 7.12-2.2 11.44-2.2 3.945 0 7.706.6 11.279 1.8 3.573 1.2 6.507 2.84 8.801 4.92l-3.44 7.52c-5.014-4-10.56-6-16.64-6-3.628 0-6.494.733-8.6 2.2-2.108 1.468-3.16 3.508-3.16 6.12 0 2.188.933 3.868 2.8 5.04 1.866 1.174 5.04 2.268 9.52 3.28 4.747 1.068 8.601 2.254 11.561 3.56 2.96 1.308 5.226 2.975 6.8 5 1.572 2.027 2.359 4.588 2.359 7.68 0 3.36-.894 6.309-2.68 8.84-1.787 2.534-4.374 4.48-7.76 5.841-3.388 1.36-7.374 2.04-11.96 2.04-4.319.001-8.372-.587-12.159-1.759z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" id="icon-ava-t">
+       <circle fill="#00BD9D" cx="72" cy="72" r="72"></circle>
+       <path fill="#FFF" d="M66.174 98.959V51.04h-18.4v-8.48h47.12v8.48h-18.4v47.919h-10.32z"></path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" id="icon-ava-u">
+       <circle fill="#F9BC64" cx="72" cy="72" r="72"></circle>
+       <path fill="#FFF"
+         d="M53.774 93.68c-4-4-6-9.84-6-17.52v-33.6h10.08v34.159c0 4.854 1.146 8.521 3.44 11 2.292 2.48 5.653 3.721 10.081 3.721 4.372 0 7.706-1.252 10-3.76 2.292-2.506 3.439-6.16 3.439-10.961V42.56h10.08v33.6c0 7.627-2 13.453-6 17.479-4 4.027-9.84 6.04-17.52 6.04-7.733.001-13.6-1.999-17.6-5.999z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" id="icon-ava-v">
+       <circle fill="#4A6FA5" cx="72" cy="72" r="72"></circle>
+       <path fill="#FFF" d="M90.215 42.56h10.479l-25.12 56.399h-8.4L42.054 42.56h10.64l18.72 43.601L90.215 42.56z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" id="icon-ava-w">
+       <circle fill="#D9B26F" cx="72" cy="72" r="72"></circle>
+       <path fill="#FFF"
+         d="M103.975 42.56h9.84l-19.92 56.399h-8.4l-14.16-40.56-14.239 40.56h-8.4L28.854 42.56h10.4l14 42 14.72-42h7.279l14.32 42.239 14.402-42.239z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" id="icon-ava-x">
+       <circle fill="#9B6A6C" cx="72" cy="72" r="72"></circle>
+       <path fill="#FFF"
+         d="M77.174 70.319l21.44 28.64h-12L71.334 77.84 55.975 98.959h-12l21.52-28.72-20.72-27.68h12l14.56 20.24 14.641-20.24h12l-20.802 27.76z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" id="icon-ava-y">
+       <circle fill="#A15E49" cx="72" cy="72" r="72"></circle>
+       <path fill="#FFF" d="M99.375 42.56L76.494 72.959v26h-10.32v-26l-22.8-30.399h11.6l16.32 22.16 16.4-22.16h11.681z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" id="icon-ava-z">
+       <circle fill="#84A2A3" cx="72" cy="72" r="72"></circle>
+       <path fill="#FFF" d="M62.614 90.719h30.001v8.24H51.094v-7.52l28.96-40.64h-28.96v-8.24h40.64V50l-29.12 40.719z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126 108" id="icon-blockquote">
+       <path
+         d="M112.5 54h-27C75.6 54 72 45.93 72 40.5v-27C72 3.6 80.07 0 85.5 0h27c9.9 0 13.5 8.07 13.5 13.5v27c0 9.9-8.07 13.5-13.5 13.5z">
+       </path>
+       <path
+         d="M85.5 108c-2.48 0-4.5-2.02-4.5-4.5s2.02-4.5 4.5-4.5c31.14 0 31.5-30.21 31.5-31.5v-27a4.5 4.5 0 0 1 9 0v27c0 .41-.06 10.18-4.97 20.01C116.35 96.86 106.4 108 85.5 108zm-45-54h-27C3.6 54 0 45.93 0 40.5v-27C0 3.6 8.07 0 13.5 0h27C50.4 0 54 8.07 54 13.5v27C54 50.4 45.93 54 40.5 54z">
+       </path>
+       <path
+         d="M13.5 108c-2.48 0-4.5-2.02-4.5-4.5s2.02-4.5 4.5-4.5C44.64 99 45 68.79 45 67.5v-27c0-2.49 2.01-4.5 4.5-4.5s4.5 2.01 4.5 4.5v27c0 .41-.06 10.18-4.97 20.01C44.35 96.86 34.4 108 13.5 108z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 117" id="icon-bold">
+       <path
+         d="M58.5 117h-45a4.5 4.5 0 0 1-4.5-4.5V4.5C9 2.02 11.02 0 13.5 0h45C75.87 0 90 14.13 90 31.5c0 11.44-6.14 21.48-15.29 27C83.86 64.02 90 74.06 90 85.5c0 17.37-14.13 31.5-31.5 31.5zM18 108h40.5C70.91 108 81 97.91 81 85.5S70.91 63 58.5 63h-18c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5h18C70.91 54 81 43.91 81 31.5S70.91 9 58.5 9H18v99z">
+       </path>
+       <path
+         d="M13.5 9h-9a4.5 4.5 0 0 1 0-9h9C15.98 0 18 2.02 18 4.5S15.98 9 13.5 9zm0 108h-9a4.5 4.5 0 0 1 0-9h9a4.5 4.5 0 0 1 0 9z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112.5 108" id="icon-bullet_list">
+       <circle cx="9" cy="9" r="9"></circle>
+       <path d="M108 13.5H36a4.5 4.5 0 0 1 0-9h72a4.5 4.5 0 0 1 0 9z"></path>
+       <circle cx="9" cy="54" r="9"></circle>
+       <path d="M90 58.5H36c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5h54c2.49 0 4.5 2.01 4.5 4.5s-2.01 4.5-4.5 4.5z">
+       </path>
+       <circle cx="9" cy="99" r="9"></circle>
+       <path d="M108 103.5H36c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5h72c2.49 0 4.5 2.01 4.5 4.5s-2.01 4.5-4.5 4.5z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81 81" id="icon-cancel">
+       <path
+         d="M76.5 81c-1.15 0-2.3-.44-3.18-1.32l-72-72a4.49 4.49 0 0 1 0-6.36 4.49 4.49 0 0 1 6.36 0l72 72a4.49 4.49 0 0 1 0 6.36c-.88.88-2.03 1.32-3.18 1.32z">
+       </path>
+       <path
+         d="M4.5 81c-1.15 0-2.3-.44-3.18-1.32a4.49 4.49 0 0 1 0-6.36l72-72a4.49 4.49 0 0 1 6.36 0 4.49 4.49 0 0 1 0 6.36l-72 72C6.8 80.56 5.65 81 4.5 81z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.9 122.79" id="icon-color_picker">
+       <path
+         d="M67.61 36.38a5.003 5.003 0 0 1 0-7.07l25.1-25.1c5.75-5.75 14.91-5.59 20.86.35l4.95 4.95c5.85 5.85 5.85 15.36 0 21.21L93.77 55.48c-.98.98-2.26 1.46-3.54 1.46s-2.56-.49-3.54-1.46">
+       </path>
+       <path
+         d="M96.6 62.81c-1.15 0-2.31-.44-3.18-1.32L61.59 29.67a4.49 4.49 0 0 1 0-6.36 4.49 4.49 0 0 1 6.36 0l31.82 31.82a4.49 4.49 0 0 1 0 6.36c-.87.88-2.02 1.32-3.17 1.32z">
+       </path>
+       <path
+         d="M34.82 113.72H18.36l-9-9V88.26l58.59-58.59a4.49 4.49 0 0 1 6.36 0 4.49 4.49 0 0 1 0 6.36L18.36 91.99v9l3.73 3.73h9l55.96-55.96a4.49 4.49 0 0 1 6.36 0 4.49 4.49 0 0 1 0 6.36l-58.59 58.6z">
+       </path>
+       <path
+         d="M6.5 122.79a6.53 6.53 0 0 1-4.6-1.9 6.494 6.494 0 0 1 0-9.19l8.51-8.51a6.494 6.494 0 0 1 9.19 0 6.494 6.494 0 0 1 0 9.19l-8.51 8.51a6.49 6.49 0 0 1-4.59 1.9z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 161.51 161.51" id="icon-create_new">
+       <circle cx="80.76" cy="80.76" r="80.76" fill="#3571b8"></circle>
+       <path d="M80.76 121.26c-2.49 0-4.5-2.01-4.5-4.5v-72a4.5 4.5 0 0 1 9 0v72c0 2.48-2.02 4.5-4.5 4.5z"></path>
+       <path d="M116.76 85.26h-72a4.5 4.5 0 0 1 0-9h72a4.5 4.5 0 0 1 0 9z"></path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111 111" id="icon-discussion">
+       <path
+         d="M5.5 2C3.3 2 1 3.3 1 5.5v82C1 89.7 3.3 92 5.5 92H70c2.2 0 4.81 1.36 5.81 3.32l5.38 10.49c.99 1.96 2.62 1.9 3.62-.06l5.38-10.4C91.19 93.39 93.8 92 96 92h9.5c2.2 0 3.5-2.3 3.5-4.5v-82c0-2.2-1.3-3.5-3.5-3.5H5.5z"
+         fill="#fff"></path>
+       <path
+         d="M83 108.65c-1.26 0-2.41-.84-3.15-2.29l-5.38-10.61C73.73 94.28 71.64 93 70 93H5.5A5.51 5.51 0 0 1 0 87.5v-82C0 2.47 2.47 0 5.5 0h100c3.03 0 5.5 2.47 5.5 5.5v82c0 3.03-2.47 5.5-5.5 5.5H96c-1.64 0-3.73 1.28-4.47 2.75l-5.38 10.62c-.74 1.45-1.89 2.28-3.15 2.28zM5.5 3A2.5 2.5 0 0 0 3 5.5v82A2.5 2.5 0 0 0 5.5 90H70c2.76 0 5.9 1.93 7.15 4.39L82.53 105c.24.47.46.63.51.66-.03-.02.19-.19.43-.66l5.38-10.62C90.1 91.93 93.24 90 96 90h9.5a2.5 2.5 0 0 0 2.5-2.5v-82a2.5 2.5 0 0 0-2.5-2.5H5.5z">
+       </path>
+       <path
+         d="M101 111H56c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5h45c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5zm-54 0H29c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5h18c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5zm36-81H20c-.83 0-1.5-.67-1.5-1.5S19.17 27 20 27h63c.83 0 1.5.67 1.5 1.5S83.83 30 83 30zM65 48H20c-.83 0-1.5-.67-1.5-1.5S19.17 45 20 45h45c.83 0 1.5.67 1.5 1.5S65.83 48 65 48zm18 18H20c-.83 0-1.5-.67-1.5-1.5S19.17 63 20 63h63c.83 0 1.5.67 1.5 1.5S83.83 66 83 66z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 79" id="icon-dislike">
+       <path
+         d="M12 0h56c1.66 0 3 1.34 3 3v45c0 1.66-1.34 3-3 3h-9.73L32.16 78.08c-.57.59-1.35.92-2.16.92h-.01c-.82 0-1.6-.34-2.16-.94l-9-9.5a3 3 0 0 1-.52-3.38L25.2 51H3c-.9 0-1.75-.4-2.32-1.1-.57-.69-.8-1.61-.62-2.49l9-45C9.34 1.01 10.57 0 12 0zm74 0h9c1.66 0 3 1.34 3 3v45c0 1.66-1.34 3-3 3h-9c-1.66 0-3-1.34-3-3V3c0-1.66 1.34-3 3-3z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 135 135" id="icon-emoticon">
+       <path
+         d="M67.5 135C30.28 135 0 104.72 0 67.5S30.28 0 67.5 0 135 30.28 135 67.5 104.72 135 67.5 135zm0-126C35.24 9 9 35.24 9 67.5S35.24 126 67.5 126 126 99.76 126 67.5 99.76 9 67.5 9z">
+       </path>
+       <path
+         d="M96 63c-4.96 0-9-4.04-9-9s4.04-9 9-9 9 4.04 9 9-4.04 9-9 9zm-57 0c-4.96 0-9-4.04-9-9s4.04-9 9-9 9 4.04 9 9-4.04 9-9 9zm29.52 43c-4.67 0-8.94-.9-12.57-2.1-11.01-3.67-18.33-10.91-18.63-11.21a4.49 4.49 0 0 1 0-6.36 4.509 4.509 0 0 1 6.36-.01c.98.97 24.22 23.43 47.65.01a4.49 4.49 0 0 1 6.36 0 4.49 4.49 0 0 1 0 6.36C87.52 102.84 77.3 106 68.52 106z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 159 186" id="icon-enter">
+       <path fill="#3471b8" d="M84 183V39l72-36v144z" opacity=".4"></path>
+       <path
+         d="M156 150c-1.66 0-3-1.34-3-3V6H33v33c0 1.66-1.34 3-3 3s-3-1.34-3-3V3c0-1.66 1.34-3 3-3h126c1.66 0 3 1.34 3 3v144c0 1.66-1.34 3-3 3z">
+       </path>
+       <path
+         d="M84 186a2.995 2.995 0 0 1-3-3V39c0-1.14.64-2.17 1.66-2.68l72-36a3.01 3.01 0 0 1 4.03 1.34 3.01 3.01 0 0 1-1.34 4.03L87 40.85v137.29l67.66-33.83a3.01 3.01 0 0 1 4.03 1.34 3.01 3.01 0 0 1-1.34 4.03l-72 36c-.43.21-.89.32-1.35.32z">
+       </path>
+       <path
+         d="M84 150H30c-1.66 0-3-1.34-3-3v-36c0-1.66 1.34-3 3-3s3 1.34 3 3v33h51c1.66 0 3 1.34 3 3s-1.34 3-3 3zm18-27c-1.66 0-3-1.34-3-3v-18c0-1.66 1.34-3 3-3s3 1.34 3 3v18c0 1.66-1.34 3-3 3zM57 78H3c-1.66 0-3-1.34-3-3s1.34-3 3-3h54c1.66 0 3 1.34 3 3s-1.34 3-3 3z">
+       </path>
+       <path
+         d="M39 96c-.77 0-1.54-.29-2.12-.88a3 3 0 0 1 0-4.24L52.76 75 36.88 59.12a3 3 0 0 1 0-4.24 3 3 0 0 1 4.24 0l18 18a3 3 0 0 1 0 4.24l-18 18c-.58.59-1.35.88-2.12.88z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 353.07 183.57" id="icon-error_404">
+       <style type="text/css">
+         .st0 {
+           fill: #E6E6E6;
+         }
+ 
+         .st1 {
+           fill: #CCCCCC;
+         }
+ 
+         .st2 {
+           fill: #B3B3B3;
+         }
+ 
+         .st3 {
+           fill: #3471B8;
+         }
+ 
+         .st4 {
+           fill: #F2F2F2;
+         }
+ 
+         .st5 {
+           opacity: 0.35;
+         }
+ 
+         .st6 {
+           opacity: 0.42;
+         }
+ 
+         .st7 {
+           fill: #808080;
+         }
+ 
+         .st8 {
+           fill: #677075;
+         }
+       </style>
+       <g>
+         <path class="st0" d="M290.06,54H40.94C37.66,54,35,51.34,35,48.06V5.94C35,2.66,37.66,0,40.94,0h249.13c3.28,0,5.94,2.66,5.94,5.94
+ v42.13C296,51.34,293.34,54,290.06,54z" />
+       </g>
+       <g>
+         <path class="st1"
+           d="M62,38.5c-6.34,0-11.5-5.16-11.5-11.5S55.66,15.5,62,15.5S73.5,20.66,73.5,27S68.34,38.5,62,38.5z" />
+       </g>
+       <g>
+         <path class="st2"
+           d="M270,20.5H89c-1.38,0-2.5-1.12-2.5-2.5s1.12-2.5,2.5-2.5h181c1.38,0,2.5,1.12,2.5,2.5S271.38,20.5,270,20.5z" />
+       </g>
+       <g>
+         <path class="st2"
+           d="M143,38.5H89c-1.38,0-2.5-1.12-2.5-2.5s1.12-2.5,2.5-2.5h54c1.38,0,2.5,1.12,2.5,2.5S144.38,38.5,143,38.5z" />
+       </g>
+       <g>
+         <path class="st3" d="M255.06,118H5.94C2.66,118,0,115.34,0,112.06V69.94C0,66.66,2.66,64,5.94,64h249.13
+ c3.28,0,5.94,2.66,5.94,5.94v42.13C261,115.34,258.34,118,255.06,118z" />
+       </g>
+       <g>
+         <path class="st4"
+           d="M27,102.5c-6.34,0-11.5-5.16-11.5-11.5S20.66,79.5,27,79.5S38.5,84.66,38.5,91S33.34,102.5,27,102.5z" />
+       </g>
+       <g>
+         <g>
+           <path class="st4"
+             d="M60,84.5h-6c-1.38,0-2.5-1.12-2.5-2.5s1.12-2.5,2.5-2.5h6c1.38,0,2.5,1.12,2.5,2.5S61.38,84.5,60,84.5z" />
+         </g>
+         <g>
+           <path class="st4" d="M189.73,84.5h-12.16c-1.38,0-2.5-1.12-2.5-2.5s1.12-2.5,2.5-2.5h12.16c1.38,0,2.5,1.12,2.5,2.5
+   S191.11,84.5,189.73,84.5z M157.3,84.5h-12.16c-1.38,0-2.5-1.12-2.5-2.5s1.12-2.5,2.5-2.5h12.16c1.38,0,2.5,1.12,2.5,2.5
+   S158.68,84.5,157.3,84.5z M124.87,84.5H112.7c-1.38,0-2.5-1.12-2.5-2.5s1.12-2.5,2.5-2.5h12.16c1.38,0,2.5,1.12,2.5,2.5
+   S126.25,84.5,124.87,84.5z M92.43,84.5H80.27c-1.38,0-2.5-1.12-2.5-2.5s1.12-2.5,2.5-2.5h12.16c1.38,0,2.5,1.12,2.5,2.5
+   S93.81,84.5,92.43,84.5z" />
+         </g>
+         <g>
+           <path class="st4"
+             d="M216,84.5h-6c-1.38,0-2.5-1.12-2.5-2.5s1.12-2.5,2.5-2.5h6c1.38,0,2.5,1.12,2.5,2.5S217.38,84.5,216,84.5z" />
+         </g>
+       </g>
+       <g class="st5">
+         <path class="st4" d="M134,102.5h-16c-1.38,0-2.5-1.12-2.5-2.5s1.12-2.5,2.5-2.5h16c1.38,0,2.5,1.12,2.5,2.5S135.38,102.5,134,102.5
+ z M102,102.5H86c-1.38,0-2.5-1.12-2.5-2.5s1.12-2.5,2.5-2.5h16c1.38,0,2.5,1.12,2.5,2.5S103.38,102.5,102,102.5z M70,102.5H54
+ c-1.38,0-2.5-1.12-2.5-2.5s1.12-2.5,2.5-2.5h16c1.38,0,2.5,1.12,2.5,2.5S71.38,102.5,70,102.5z" />
+       </g>
+       <g>
+         <path class="st0" d="M290.06,181H40.94c-3.28,0-5.94-2.66-5.94-5.94v-42.13c0-3.28,2.66-5.94,5.94-5.94h249.13
+ c3.28,0,5.94,2.66,5.94,5.94v42.13C296,178.34,293.34,181,290.06,181z" />
+       </g>
+       <g>
+         <path class="st1"
+           d="M62,165.5c-6.34,0-11.5-5.16-11.5-11.5s5.16-11.5,11.5-11.5s11.5,5.16,11.5,11.5S68.34,165.5,62,165.5z" />
+       </g>
+       <g>
+         <path class="st2" d="M224,147.5H89c-1.38,0-2.5-1.12-2.5-2.5s1.12-2.5,2.5-2.5h135c1.38,0,2.5,1.12,2.5,2.5S225.38,147.5,224,147.5
+ z" />
+       </g>
+       <g>
+         <path class="st2" d="M152,165.5H89c-1.38,0-2.5-1.12-2.5-2.5s1.12-2.5,2.5-2.5h63c1.38,0,2.5,1.12,2.5,2.5S153.38,165.5,152,165.5z
+ " />
+       </g>
+       <g class="st6">
+         <path class="st7" d="M276.02,166.51c-15.37,0-30.74-5.85-42.44-17.55c-23.4-23.4-23.4-61.48,0-84.88c23.4-23.4,61.48-23.4,84.88,0
+ l0,0c23.4,23.4,23.4,61.48,0,84.88C306.76,160.66,291.39,166.51,276.02,166.51z M276.02,50.53c-14.35,0-28.69,5.46-39.61,16.38
+ c-21.84,21.84-21.84,57.38,0,79.22c21.84,21.84,57.38,21.84,79.22,0c21.84-21.84,21.84-57.38,0-79.22
+ C304.71,55.99,290.36,50.53,276.02,50.53z" />
+       </g>
+       <g>
+         <circle class="st4" cx="276.02" cy="106.52" r="36" />
+         <path class="st8" d="M276.02,145.52c-10.42,0-20.21-4.06-27.58-11.42s-11.42-17.16-11.42-27.58c0-10.42,4.06-20.21,11.42-27.58
+ c7.37-7.37,17.16-11.42,27.58-11.42c10.42,0,20.21,4.06,27.58,11.42l0,0l0,0c7.37,7.37,11.42,17.16,11.42,27.58
+ c0,10.42-4.06,20.21-11.42,27.58C296.23,141.46,286.44,145.52,276.02,145.52z M276.02,73.52c-8.81,0-17.1,3.43-23.33,9.67
+ c-6.23,6.23-9.67,14.52-9.67,23.33c0,8.82,3.43,17.1,9.67,23.33c6.23,6.23,14.52,9.67,23.33,9.67c8.82,0,17.1-3.43,23.33-9.67
+ s9.67-14.52,9.67-23.33c0-8.81-3.43-17.1-9.67-23.33l0,0C293.12,76.95,284.83,73.52,276.02,73.52z" />
+       </g>
+       <g>
+         <path class="st8" d="M301.48,143.97c-3.07,0-6.15-1.17-8.49-3.51c-1.17-1.17-1.17-3.07,0-4.24c1.17-1.17,3.07-1.17,4.24,0
+ c2.34,2.34,6.15,2.34,8.49,0c2.34-2.34,2.34-6.15,0-8.49c-1.17-1.17-1.17-3.07,0-4.24c1.17-1.17,3.07-1.17,4.24,0
+ c4.68,4.68,4.68,12.29,0,16.97C307.62,142.8,304.55,143.97,301.48,143.97z" />
+       </g>
+       <g>
+         <path class="st8" d="M341.07,183.57c-3.07,0-6.15-1.17-8.48-3.51l-18.38-18.38c-4.68-4.68-4.68-12.29,0-16.97
+ c4.68-4.68,12.29-4.68,16.97,0l18.38,18.38c4.68,4.68,4.68,12.29,0,16.97C347.22,182.4,344.15,183.57,341.07,183.57z
+  M322.69,147.19c-1.54,0-3.07,0.58-4.24,1.75c-2.34,2.34-2.34,6.15,0,8.49l18.38,18.38c2.34,2.34,6.15,2.34,8.49,0
+ c2.34-2.34,2.34-6.15,0-8.49l-18.38-18.38C325.76,147.78,324.22,147.19,322.69,147.19z" />
+       </g>
+       <g>
+         <path class="st8" d="M316.32,149.82c-0.77,0-1.54-0.29-2.12-0.88l-8.49-8.49c-1.17-1.17-1.17-3.07,0-4.24
+ c1.17-1.17,3.07-1.17,4.24,0l8.49,8.49c1.17,1.17,1.17,3.07,0,4.24C317.86,149.53,317.09,149.82,316.32,149.82z" />
+       </g>
+       <g>
+         <path class="st8" d="M339.66,173.16c-0.77,0-1.54-0.29-2.12-0.88c-1.17-1.17-1.17-3.07,0-4.24l6.36-6.36
+ c1.17-1.17,3.07-1.17,4.24,0c1.17,1.17,1.17,3.07,0,4.24l-6.36,6.36C341.19,172.87,340.43,173.16,339.66,173.16z" />
+       </g>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 159 186" id="icon-exit">
+       <path fill="#980b3e" d="M84 183V39l72-36v144z" opacity=".4"></path>
+       <path
+         d="M156 150c-1.66 0-3-1.34-3-3V6H33v33c0 1.66-1.34 3-3 3s-3-1.34-3-3V3c0-1.66 1.34-3 3-3h126c1.66 0 3 1.34 3 3v144c0 1.66-1.34 3-3 3z">
+       </path>
+       <path
+         d="M84 186c-.55 0-1.1-.15-1.58-.45A3.008 3.008 0 0 1 81 183V39c0-1.14.64-2.17 1.66-2.68l72-36c1.48-.74 3.28-.14 4.02 1.34a3.01 3.01 0 0 1-1.34 4.03L87 40.85v137.29l67.66-33.83c1.48-.74 3.28-.14 4.02 1.34a3.01 3.01 0 0 1-1.34 4.03l-72 36c-.42.21-.88.32-1.34.32z">
+       </path>
+       <path
+         d="M84 150H30c-1.66 0-3-1.34-3-3v-36c0-1.66 1.34-3 3-3s3 1.34 3 3v33h51c1.66 0 3 1.34 3 3s-1.34 3-3 3zm18-27c-1.66 0-3-1.34-3-3v-18c0-1.66 1.34-3 3-3s3 1.34 3 3v18c0 1.66-1.34 3-3 3zM57 78H3c-1.66 0-3-1.34-3-3s1.34-3 3-3h54c1.66 0 3 1.34 3 3s-1.34 3-3 3z">
+       </path>
+       <path
+         d="M21 96c-.77 0-1.54-.29-2.12-.88l-18-18a3 3 0 0 1 0-4.24l18-18a3 3 0 0 1 4.24 0 3 3 0 0 1 0 4.24L7.24 75l15.88 15.88a3 3 0 0 1 0 4.24c-.58.59-1.35.88-2.12.88z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 117 103.5" id="icon-favorite">
+       <path
+         d="M58.5 103.5c-8.9 0-23.73-8.36-35.24-19.88C8.26 68.62 0 50.11 0 31.5 0 14.13 14.13 0 31.5 0c11.44 0 21.48 6.14 27 15.29C64.02 6.14 74.06 0 85.5 0 102.87 0 117 14.13 117 31.5c0 18.61-8.26 37.12-23.26 52.12C82.22 95.14 67.4 103.5 58.5 103.5z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 71.67" id="icon-filter">
+       <path
+         d="M9.5 40.67h-5c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5h5c2.49 0 4.5 2.01 4.5 4.5s-2.01 4.5-4.5 4.5zm58 0H46.17c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5H67.5c2.49 0 4.5 2.01 4.5 4.5s-2.01 4.5-4.5 4.5zM28.5 45c-4.87 0-8.83-3.96-8.83-8.83s3.96-8.83 8.83-8.83 8.83 3.96 8.83 8.83S33.37 45 28.5 45zm0-9c-.09 0-.17.07-.17.17 0 .18.33.18.33 0 .01-.1-.07-.17-.16-.17zm-1-22.67h-23c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5h23c2.49 0 4.5 2.01 4.5 4.5s-2.01 4.5-4.5 4.5zm40 0h-3.33c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5h3.33c2.49 0 4.5 2.01 4.5 4.5s-2.01 4.5-4.5 4.5zm-21 4.34c-4.87 0-8.83-3.96-8.83-8.83S41.63 0 46.5 0s8.83 3.96 8.83 8.83-3.96 8.84-8.83 8.84zm0-9c-.09 0-.17.07-.17.17 0 .18.33.18.33 0 .01-.1-.07-.17-.16-.17zm-19 58.66h-23c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5h23c2.49 0 4.5 2.01 4.5 4.5s-2.01 4.5-4.5 4.5zm40 0h-3.33c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5h3.33c2.49 0 4.5 2.01 4.5 4.5s-2.01 4.5-4.5 4.5zm-21 4.34c-4.87 0-8.83-3.96-8.83-8.83S41.63 54 46.5 54s8.83 3.96 8.83 8.83-3.96 8.84-8.83 8.84zm0-9c-.09 0-.17.08-.17.17 0 .18.33.18.33 0 .01-.1-.07-.17-.16-.17z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81 117" id="icon-flag">
+       <path
+         d="M4.5 117c-2.49 0-4.5-2.01-4.5-4.5V4.5C0 2.94.81 1.49 2.13.67c1.33-.82 2.98-.89 4.38-.2l72 36c1.53.77 2.49 2.33 2.49 4.03s-.96 3.26-2.49 4.02L9 79.28v33.22c0 2.49-2.01 4.5-4.5 4.5z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111 111" id="icon-gallery">
+       <path
+         d="M5.5 2C3.3 2 1 3.3 1 5.5v82C1 89.7 3.3 92 5.5 92H70c2.2 0 4.81 1.36 5.81 3.32l5.38 10.49c.99 1.96 2.62 1.9 3.62-.06l5.38-10.4C91.19 93.39 93.8 92 96 92h9.5c2.2 0 3.5-2.3 3.5-4.5v-82c0-2.2-1.3-3.5-3.5-3.5H5.5z"
+         fill="#fff"></path>
+       <path
+         d="M83 108.65c-1.26 0-2.41-.84-3.15-2.29l-5.38-10.61C73.73 94.28 71.64 93 70 93H5.5A5.51 5.51 0 0 1 0 87.5v-82C0 2.47 2.47 0 5.5 0h100c3.03 0 5.5 2.47 5.5 5.5v82c0 3.03-2.47 5.5-5.5 5.5H96c-1.64 0-3.73 1.28-4.47 2.75l-5.38 10.62c-.74 1.45-1.89 2.28-3.15 2.28zM5.5 3A2.5 2.5 0 0 0 3 5.5v82A2.5 2.5 0 0 0 5.5 90H70c2.76 0 5.9 1.93 7.15 4.39L82.53 105c.24.47.46.63.51.66-.03-.02.19-.19.43-.66l5.38-10.62C90.1 91.93 93.24 90 96 90h9.5a2.5 2.5 0 0 0 2.5-2.5v-82a2.5 2.5 0 0 0-2.5-2.5H5.5z">
+       </path>
+       <path
+         d="M101 111H56c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5h45c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5zm-54 0H29c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5h18c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5zM11 18h24.55v24.55H11zm32.73 0h24.55v24.55H43.73zm32.73 0H101v24.55H76.46zM11 50.46h24.55V75H11zm32.73 0h24.55V75H43.73z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99 117" id="icon-heading">
+       <path d="M22.5 9h-18a4.5 4.5 0 0 1 0-9h18a4.5 4.5 0 0 1 0 9z"></path>
+       <path d="M13.5 117a4.5 4.5 0 0 1-4.5-4.5V4.5C9 2.02 11.02 0 13.5 0S18 2.02 18 4.5v108a4.5 4.5 0 0 1-4.5 4.5z">
+       </path>
+       <path
+         d="M22.5 117h-18a4.5 4.5 0 0 1 0-9h18c2.49 0 4.5 2.01 4.5 4.5s-2.01 4.5-4.5 4.5zm72-108h-18C74.01 9 72 6.99 72 4.5S74.01 0 76.5 0h18a4.5 4.5 0 0 1 0 9z">
+       </path>
+       <path d="M85.5 117c-2.49 0-4.5-2.01-4.5-4.5V4.5a4.5 4.5 0 0 1 9 0v108c0 2.49-2.01 4.5-4.5 4.5z"></path>
+       <path
+         d="M94.5 117h-18c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5h18c2.49 0 4.5 2.01 4.5 4.5s-2.01 4.5-4.5 4.5zm-9-54h-72a4.5 4.5 0 0 1 0-9h72c2.49 0 4.5 2.01 4.5 4.5S87.99 63 85.5 63z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 117 9" id="icon-horizontal_line">
+       <path d="M112.5 9H4.5a4.5 4.5 0 0 1 0-9h108a4.5 4.5 0 0 1 0 9z" fill="#666f74"></path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81 117" id="icon-italic">
+       <path
+         d="M76.5 9h-45C29.01 9 27 6.99 27 4.5S29.01 0 31.5 0h45a4.5 4.5 0 0 1 0 9zm-27 108h-45a4.5 4.5 0 0 1 0-9h45c2.49 0 4.5 2.01 4.5 4.5s-2.01 4.5-4.5 4.5z">
+       </path>
+       <path
+         d="M22.5 117a4.504 4.504 0 0 1-4.27-5.92l36-108A4.508 4.508 0 0 1 59.92.23c2.36.79 3.63 3.33 2.85 5.69l-36 108A4.496 4.496 0 0 1 22.5 117z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 79" id="icon-like">
+       <path
+         d="M86 79H30c-1.66 0-3-1.34-3-3V31c0-1.66 1.34-3 3-3h9.73L65.84.92C66.41.33 67.19 0 68 0h.01c.82 0 1.6.34 2.16.94l9 9.5a3 3 0 0 1 .52 3.38L72.8 28H95c.9 0 1.75.4 2.32 1.1.57.69.8 1.61.62 2.49l-9 45A2.999 2.999 0 0 1 86 79zm-74 0H3c-1.66 0-3-1.34-3-3V31c0-1.66 1.34-3 3-3h9c1.66 0 3 1.34 3 3v45c0 1.66-1.34 3-3 3z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 86" id="icon-load_lore_icon">
+       <path
+         d="M65 86H3c-1.66 0-3-1.34-3-3V21c0-1.66 1.34-3 3-3h62c1.66 0 3 1.34 3 3v62c0 1.66-1.34 3-3 3zM6 80h56V24H6v56z">
+       </path>
+       <path
+         d="M47 15c-1.66 0-3-1.34-3-3V6H24v6c0 1.66-1.34 3-3 3s-3-1.34-3-3V3c0-1.66 1.34-3 3-3h26c1.66 0 3 1.34 3 3v9c0 1.66-1.34 3-3 3z"
+         opacity=".25"></path>
+       <path
+         d="M34 69.33c-.77 0-1.54-.29-2.12-.88L21.21 57.79a3 3 0 0 1 0-4.24 3 3 0 0 1 4.24 0L34 62.09l8.54-8.54a3 3 0 0 1 4.24 0 3 3 0 0 1 0 4.24L36.12 68.45c-.58.59-1.35.88-2.12.88z">
+       </path>
+       <path d="M34 66c-1.66 0-3-1.34-3-3V37c0-1.66 1.34-3 3-3s3 1.34 3 3v26c0 1.66-1.34 3-3 3z"></path>
+       <path
+         d="M56 24c-1.66 0-3-1.34-3-3v-6H15v6c0 1.66-1.34 3-3 3s-3-1.34-3-3v-9c0-1.66 1.34-3 3-3h44c1.66 0 3 1.34 3 3v9c0 1.66-1.34 3-3 3z"
+         opacity=".5"></path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99 130.16" id="icon-locked">
+       <path
+         d="M84.5 130.16h-70c-7.99 0-14.5-6.5-14.5-14.5v-52c0-7.99 6.51-14.5 14.5-14.5h70c8 0 14.5 6.51 14.5 14.5v52c0 7.99-6.5 14.5-14.5 14.5z">
+       </path>
+       <path
+         d="M75.49 64.32c-3.04 0-5.5-2.46-5.5-5.5V31.49C69.99 20.19 60.8 11 49.5 11s-20.49 9.19-20.49 20.49v27.33c0 3.04-2.46 5.5-5.5 5.5s-5.5-2.46-5.5-5.5V31.49C18.01 14.13 32.14 0 49.5 0s31.49 14.13 31.49 31.49v27.33c0 3.04-2.46 5.5-5.5 5.5z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73 63" id="icon-menu_icon">
+       <path
+         d="M68.5 9h-64a4.5 4.5 0 0 1 0-9h64a4.5 4.5 0 0 1 0 9zm0 27h-64a4.5 4.5 0 0 1 0-9h64c2.49 0 4.5 2.01 4.5 4.5S70.99 36 68.5 36zm0 27h-64a4.5 4.5 0 0 1 0-9h64c2.49 0 4.5 2.01 4.5 4.5S70.99 63 68.5 63z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 108" id="icon-more_options">
+       <circle cx="9" cy="9" r="9"></circle>
+       <circle cx="9" cy="54" r="9"></circle>
+       <circle cx="9" cy="99" r="9"></circle>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 117.97 144.98" id="icon-notification">
+       <path
+         d="M58.91 122.04c-29.78 0-50.46-7.89-51.75-8.4-.64-.25-1.23-.63-1.71-1.12-9.2-9.2-5.04-20.03 0-25.07 5.68-5.68 10.73-29.47 12.58-43.14.04-.31.11-.61.21-.91C25.37 22 37.99 15.65 44.98 13.77V8.98c0-1.33.53-2.6 1.46-3.54 5.04-5.04 15.88-9.2 25.07 0 .94.94 1.46 2.21 1.46 3.54v4.79c7 1.88 19.61 8.23 26.74 29.63.1.3.17.6.21.91 1.85 13.66 6.9 37.45 12.58 43.14 5.04 5.04 9.2 15.87 0 25.07-.55.55-1.22.96-1.95 1.21-18.67 6.23-36.36 8.31-51.64 8.31zm.57 22.94c-10.37 0-18.5-6.15-18.5-14 0-2.76 2.24-5 5-5h27c2.76 0 5 2.24 5 5 0 7.85-8.12 14-18.5 14z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113.66 113.66" id="icon-pencil">
+       <path
+         d="M4.5 113.66c-1.18 0-2.33-.47-3.18-1.32a4.516 4.516 0 0 1-1.23-4.06l6.36-31.82a4.5 4.5 0 0 1 7.6-2.29L39.5 99.61c1.17 1.17 1.6 2.9 1.13 4.49a4.51 4.51 0 0 1-3.42 3.11l-31.82 6.36c-.3.06-.6.09-.89.09zm9.13-27.19l-3.39 16.96 16.96-3.39-13.57-13.57z">
+       </path>
+       <path
+         d="M36.32 107.29c-1.15 0-2.3-.44-3.18-1.32a4.49 4.49 0 0 1 0-6.36l54.09-54.09-19.09-19.09-54.09 54.09a4.49 4.49 0 0 1-6.36 0 4.49 4.49 0 0 1 0-6.36l57.28-57.28c.84-.84 1.99-1.32 3.18-1.32 1.19 0 2.34.47 3.18 1.32l25.46 25.46a4.49 4.49 0 0 1 0 6.36L39.5 105.97c-.88.88-2.03 1.32-3.18 1.32z">
+       </path>
+       <path
+         d="M93.6 50.02c-1.15 0-2.3-.44-3.18-1.32a4.49 4.49 0 0 1 0-6.36l12.73-12.73c1.39-1.47 2.56-3.8 0-6.36L90.41 10.52c-1.47-1.39-3.8-2.56-6.36 0L71.32 23.24a4.49 4.49 0 0 1-6.36 0 4.49 4.49 0 0 1 0-6.36L77.69 4.15C81.52.32 86.27-.92 91.05.68c3.23 1.08 5.35 3.08 5.74 3.47l12.73 12.73c3.83 3.83 5.07 8.58 3.47 13.35-1.08 3.23-3.08 5.35-3.47 5.74L96.78 48.7c-.88.88-2.03 1.32-3.18 1.32z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 153 117" id="icon-performatted">
+       <path
+         d="M112.5 99c-1.15 0-2.3-.44-3.18-1.32a4.49 4.49 0 0 1 0-6.36l32.82-32.82-32.82-32.82a4.49 4.49 0 0 1 0-6.36 4.49 4.49 0 0 1 6.36 0l36 36a4.49 4.49 0 0 1 0 6.36l-36 36c-.88.88-2.03 1.32-3.18 1.32zm-72 0c-1.15 0-2.3-.44-3.18-1.32l-36-36a4.49 4.49 0 0 1 0-6.36l36-36a4.49 4.49 0 0 1 6.36 0 4.49 4.49 0 0 1 0 6.36L10.86 58.5l32.82 32.82a4.49 4.49 0 0 1 0 6.36c-.88.88-2.03 1.32-3.18 1.32zm18 18a4.504 4.504 0 0 1-4.27-5.92l36-108A4.508 4.508 0 0 1 95.92.23c2.36.79 3.63 3.33 2.85 5.69l-36 108A4.505 4.505 0 0 1 58.5 117z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81 123" id="icon-pinned">
+       <path
+         d="M76.5 61h-5.24l-7.38-41h3.62c2.48 0 4.5-2.02 4.5-4.5v-11C72 2.02 69.98 0 67.5 0h-54C11.02 0 9 2.02 9 4.5v11c0 2.48 2.02 4.5 4.5 4.5h3.62L9.74 61H4.5A4.5 4.5 0 0 0 0 65.5v11C0 78.98 2.02 81 4.5 81h72c2.48 0 4.5-2.02 4.5-4.5v-11c0-2.48-2.02-4.5-4.5-4.5zM36 54c0 2.48-2.02 4.5-4.5 4.5S27 56.48 27 54V27c0-2.48 2.02-4.5 4.5-4.5S36 24.51 36 27v27zm4.5 69c-3.04 0-5.5-2.46-5.5-5.5v-25c0-3.04 2.46-5.5 5.5-5.5s5.5 2.46 5.5 5.5v25c0 3.04-2.46 5.5-5.5 5.5z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 98" id="icon-quote">
+       <path
+         d="M94 98c-1.04 0-2.06-.41-2.83-1.17L74.34 80H4c-2.21 0-4-1.79-4-4V4c0-2.21 1.79-4 4-4h90c2.21 0 4 1.79 4 4v90c0 1.62-.97 3.08-2.47 3.69-.49.21-1.01.31-1.53.31zM8 72h68c1.06 0 2.08.42 2.83 1.17L90 84.34V8H8v64z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 117 101.57" id="icon-reply">
+       <path
+         d="M112.5 101.57c-1.91 0-3.65-1.22-4.27-3.08-5.81-17.44-16.92-27.46-33.01-29.75-8.34-1.19-15.9.02-19.94.93v27.4c0 1.82-1.1 3.46-2.78 4.16-1.68.7-3.62.31-4.9-.98L1.32 53.97C.47 53.13 0 51.98 0 50.79s.47-2.34 1.32-3.18L47.6 1.32a4.503 4.503 0 0 1 4.9-.98c1.68.7 2.78 2.34 2.78 4.16v26.61c6 .55 17.14 2.32 28.37 7.94C98.87 46.65 117 62.89 117 97.07c0 2.21-1.6 4.09-3.78 4.44-.24.04-.48.06-.72.06z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 117 117" id="icon-search">
+       <path
+         d="M54 108C24.22 108 0 83.78 0 54S24.22 0 54 0s54 24.22 54 54-24.22 54-54 54zm0-99C29.19 9 9 29.19 9 54s20.19 45 45 45 45-20.19 45-45S78.81 9 54 9z">
+       </path>
+       <path
+         d="M112.5 117c-1.15 0-2.3-.44-3.18-1.32l-23.5-23.5a4.49 4.49 0 0 1 0-6.36 4.49 4.49 0 0 1 6.36 0l23.5 23.5a4.49 4.49 0 0 1 0 6.36c-.88.88-2.03 1.32-3.18 1.32z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111.53 117" id="icon-settings">
+       <path
+         d="M55.77 81c-12.41 0-22.5-10.09-22.5-22.5S43.36 36 55.77 36s22.5 10.09 22.5 22.5S68.17 81 55.77 81zm0-36c-7.44 0-13.5 6.06-13.5 13.5S48.32 72 55.77 72s13.5-6.06 13.5-13.5S63.21 45 55.77 45zm18-16.79c-1.69 0-3.31-.96-4.08-2.59L61.9 9H49.37l-9.7 16.94a4.5 4.5 0 0 1-6.14 1.67 4.503 4.503 0 0 1-1.67-6.14l11-19.21A4.49 4.49 0 0 1 46.76 0h18c1.75 0 3.33 1.01 4.07 2.59l9 19.21a4.5 4.5 0 0 1-2.17 5.98c-.6.29-1.25.43-1.89.43z">
+       </path>
+       <path
+         d="M17.02 63c-1.47 0-2.91-.72-3.77-2.04L.73 41.75a4.49 4.49 0 0 1-.13-4.71l9-15.59c.8-1.39 2.29-2.25 3.9-2.25h22.27c2.49 0 4.5 2.01 4.5 4.5s-2.01 4.5-4.5 4.5H16.1L9.78 39.15l11.01 16.89c1.36 2.08.77 4.87-1.31 6.23-.77.49-1.62.73-2.46.73z">
+       </path>
+       <path
+         d="M37.77 97.79H13.5c-1.61 0-3.09-.86-3.9-2.25l-9-15.59a4.49 4.49 0 0 1 .13-4.71l12.52-19.21a4.501 4.501 0 0 1 6.23-1.31 4.503 4.503 0 0 1 1.31 6.23L9.78 77.85 16.1 88.8h21.67c2.49 0 4.5 2.01 4.5 4.5s-2.02 4.49-4.5 4.49z">
+       </path>
+       <path
+         d="M64.77 117h-18c-1.75 0-3.33-1.01-4.08-2.59l-9-19.21a4.492 4.492 0 0 1 2.17-5.98 4.492 4.492 0 0 1 5.98 2.17L49.63 108H61.9l7.78-16.61c1.06-2.25 3.74-3.22 5.98-2.17a4.503 4.503 0 0 1 2.17 5.98l-9 19.21a4.474 4.474 0 0 1-4.06 2.59z">
+       </path>
+       <path
+         d="M98.03 97.79H73.76c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5h21.67l6.31-10.92-11.22-16.88c-1.38-2.07-.81-4.86 1.26-6.24 2.07-1.38 4.86-.81 6.24 1.26l12.77 19.21a4.5 4.5 0 0 1 .15 4.74l-9 15.59a4.521 4.521 0 0 1-3.91 2.24z">
+       </path>
+       <path
+         d="M94.26 63c-.86 0-1.72-.24-2.49-.75a4.508 4.508 0 0 1-1.26-6.24l11.22-16.88-6.31-10.92H73.77c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5h24.27c1.61 0 3.09.86 3.9 2.25l9 15.59a4.5 4.5 0 0 1-.15 4.74l-12.77 19.2A4.52 4.52 0 0 1 94.26 63z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111.53 117" id="icon-settings_fill">
+       <path
+         d="M64.77 117h-18c-1.75 0-3.33-1.01-4.07-2.59l-7.8-16.62H13.5c-1.61 0-3.09-.86-3.9-2.25l-9-15.59a4.49 4.49 0 0 1 .13-4.71L11.64 58.5.73 41.75a4.511 4.511 0 0 1-.13-4.71l9-15.59c.8-1.39 2.29-2.25 3.9-2.25h19.66l9.7-16.94A4.49 4.49 0 0 1 46.76 0h18c1.75 0 3.33 1.01 4.08 2.59l7.79 16.62h21.41c1.61 0 3.09.86 3.9 2.25l9 15.59a4.5 4.5 0 0 1-.15 4.74L99.67 58.5l11.11 16.71a4.5 4.5 0 0 1 .15 4.74l-9 15.59a4.502 4.502 0 0 1-3.9 2.25h-21.4l-7.79 16.61a4.492 4.492 0 0 1-4.07 2.6zm-9-75.75c-9.51 0-17.25 7.74-17.25 17.25s7.74 17.25 17.25 17.25 17.25-7.74 17.25-17.25c-.01-9.51-7.74-17.25-17.25-17.25z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 117 117" id="icon-share">
+       <path
+         d="M22.5 81C10.09 81 0 70.91 0 58.5S10.09 36 22.5 36 45 46.09 45 58.5 34.91 81 22.5 81zm72-36C82.09 45 72 34.91 72 22.5S82.09 0 94.5 0 117 10.09 117 22.5 106.91 45 94.5 45zm0 72C82.09 117 72 106.91 72 94.5S82.09 72 94.5 72 117 82.09 117 94.5 106.91 117 94.5 117z">
+       </path>
+       <path
+         d="M76.61 96.98c-.8 0-1.61-.21-2.35-.67l-39.14-24c-2.12-1.3-2.78-4.07-1.48-6.19s4.07-2.78 6.19-1.48l39.14 24a4.499 4.499 0 0 1 1.48 6.19 4.492 4.492 0 0 1-3.84 2.15zM38.7 55.15a4.5 4.5 0 0 1-3.88-2.21 4.502 4.502 0 0 1 1.58-6.17L75 23.92c2.13-1.27 4.9-.56 6.17 1.58 1.27 2.14.56 4.9-1.58 6.17l-38.6 22.85c-.72.43-1.51.63-2.29.63z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 102.04 102.03" id="icon-share_topic">
+       <path
+         d="M75.6 102.03c-6.78 0-13.55-2.58-18.7-7.74L46.54 83.95a4.49 4.49 0 0 1 0-6.36 4.49 4.49 0 0 1 6.36 0l10.35 10.35c6.81 6.8 17.88 6.8 24.68 0 6.8-6.8 6.8-17.88 0-24.68L72.41 47.73c-3.3-3.3-7.68-5.11-12.34-5.11s-9.04 1.81-12.34 5.11a4.49 4.49 0 0 1-6.36 0 4.49 4.49 0 0 1 0-6.36c5-5 11.64-7.75 18.71-7.75s13.71 2.75 18.71 7.75L94.3 56.89c10.31 10.31 10.31 27.1 0 37.41-5.16 5.15-11.93 7.73-18.7 7.73z">
+       </path>
+       <path
+         d="M41.96 68.41c-7.07 0-13.71-2.75-18.7-7.75L7.73 45.14c-10.31-10.31-10.31-27.09 0-37.41 10.31-10.31 27.1-10.31 37.41 0l11.21 11.21a4.49 4.49 0 0 1 0 6.36 4.49 4.49 0 0 1-6.36 0L38.78 14.1c-6.81-6.8-17.88-6.8-24.68 0-6.8 6.81-6.8 17.88 0 24.68L29.62 54.3c3.3 3.3 7.68 5.11 12.34 5.11s9.05-1.81 12.34-5.11a4.49 4.49 0 0 1 6.36 0 4.49 4.49 0 0 1 0 6.36c-4.99 5-11.63 7.75-18.7 7.75z">
+       </path>
+       <path
+         d="M75.6 49.05c-1.15 0-2.3-.44-3.18-1.32-3.3-3.3-7.68-5.11-12.34-5.11s-9.04 1.81-12.34 5.11a4.49 4.49 0 0 1-6.36 0 4.49 4.49 0 0 1 0-6.36c5-5 11.64-7.75 18.71-7.75s13.71 2.75 18.71 7.75a4.49 4.49 0 0 1 0 6.36c-.9.88-2.05 1.32-3.2 1.32z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126 126" id="icon-time">
+       <path
+         d="M63 0C28.21 0 0 28.21 0 63s28.21 63 63 63 63-28.21 63-63S97.79 0 63 0zm31.6 94.6a6.471 6.471 0 0 1-4.6 1.9c-1.66 0-3.33-.63-4.6-1.9l-27-27a6.507 6.507 0 0 1-1.55-6.72l10-29a6.499 6.499 0 1 1 12.29 4.23l-8.67 25.16L94.6 85.4a6.525 6.525 0 0 1 0 9.2z"
+         fill="#666f75"></path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99 108" id="icon-upload_files">
+       <path
+         d="M85.5 45c-1.15 0-2.3-.44-3.18-1.32L49.5 10.86 16.68 43.68a4.49 4.49 0 0 1-6.36 0 4.49 4.49 0 0 1 0-6.36l36-36a4.49 4.49 0 0 1 6.36 0l36 36a4.49 4.49 0 0 1 0 6.36c-.88.88-2.03 1.32-3.18 1.32z">
+       </path>
+       <path
+         d="M49.5 81c-2.49 0-4.5-2.01-4.5-4.5v-72a4.5 4.5 0 0 1 9 0v72c0 2.49-2.01 4.5-4.5 4.5zm45 27h-90a4.5 4.5 0 0 1-4.5-4.5v-9a4.5 4.5 0 0 1 9 0V99h81v-4.5c0-2.49 2.01-4.5 4.5-4.5s4.5 2.01 4.5 4.5v9c0 2.49-2.01 4.5-4.5 4.5z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 102.04 117.01" id="icon-user">
+       <path
+         d="M50.69 58.22c-14.61 0-26.38-17.42-26.38-31.85C24.31 11.83 36.14 0 50.69 0c14.54 0 26.37 11.83 26.37 26.38 0 14.42-11.76 31.84-26.37 31.84zm.33 58.79c-.22 0-.44-.02-.66-.05-22.3-3.27-46.36-11.8-47.37-12.16a4.502 4.502 0 0 1-2.94-4.89c1.19-8.14 3.67-22.39 6.85-26.28.95-1.16 2.18-2.28 3.66-3.34 8.98-6.41 21.6-10.32 22.14-10.48 1.86-.57 3.88.12 5 1.72 1.75 2.46 7.67 8.85 13.95 8.85h.03c4.29-.01 8.55-2.99 12.67-8.85a4.51 4.51 0 0 1 5-1.72c.53.16 13.16 4.08 22.13 10.48 1.5 1.07 2.72 2.19 3.66 3.34 3.18 3.91 5.66 18.15 6.86 26.29.31 2.12-.92 4.17-2.94 4.89-1.01.36-25.08 8.89-47.38 12.17-.22.02-.44.03-.66.03z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108 108" id="icon-verified">
+       <path
+         d="M54 0C24.18 0 0 24.18 0 54s24.18 54 54 54 54-24.18 54-54S83.82 0 54 0zm31.6 40.6l-36 36a6.471 6.471 0 0 1-4.6 1.9c-1.66 0-3.33-.63-4.6-1.9l-18-18a6.494 6.494 0 0 1 0-9.19 6.494 6.494 0 0 1 9.19 0L45 62.81l31.4-31.4a6.494 6.494 0 0 1 9.19 0c2.54 2.53 2.54 6.65.01 9.19z"
+         fill="#666f75"></path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 90" id="icon-view">
+       <path
+         d="M72 0C32.24 0 0 36 0 45s32.24 45 72 45 72-36 72-45S111.76 0 72 0zm0 72c-14.91 0-27-12.09-27-27s12.09-27 27-27 27 12.09 27 27-12.09 27-27 27z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 132" id="Level_Up">
+       <path
+         d="M66 123H30c-1.66 0-3-1.34-3-3V60H3c-1.16 0-2.22-.67-2.72-1.73s-.33-2.3.41-3.19l45-54C46.27.4 47.11 0 48 0s1.73.4 2.3 1.08l45 54c.75.89.91 2.14.41 3.19S94.16 60 93 60H69v60c0 1.66-1.34 3-3 3zm-33-6h30V57c0-1.66 1.34-3 3-3h20.59L48 7.69 9.41 54H30c1.66 0 3 1.34 3 3v60z">
+       </path>
+       <path
+         d="M57 132H39c-.8 0-1.56-.32-2.12-.88l-9-9a3 3 0 0 1 0-4.24 3 3 0 0 1 4.24 0l8.12 8.12h15.52l8.12-8.12a3 3 0 0 1 4.24 0 3 3 0 0 1 0 4.24l-9 9c-.56.56-1.32.88-2.12.88zM30 69H12c-.8 0-1.56-.32-2.12-.88l-9-9a3 3 0 0 1 0-4.24 3 3 0 0 1 4.24 0L13.24 63H30c1.66 0 3 1.34 3 3s-1.34 3-3 3zm54 0H66c-1.66 0-3-1.34-3-3s1.34-3 3-3h16.76l8.12-8.12a3 3 0 0 1 4.24 0 3 3 0 0 1 0 4.24l-9 9c-.56.56-1.32.88-2.12.88z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111 111" id="Others">
+       <path
+         d="M5.5 2C3.3 2 1 3.3 1 5.5v82C1 89.7 3.3 92 5.5 92H70c2.2 0 4.81 1.36 5.81 3.32l5.38 10.49c.99 1.96 2.62 1.9 3.62-.06l5.38-10.4C91.19 93.39 93.8 92 96 92h9.5c2.2 0 3.5-2.3 3.5-4.5v-82c0-2.2-1.3-3.5-3.5-3.5H5.5z"
+         fill="#fff"></path>
+       <path
+         d="M83 108.65c-1.26 0-2.41-.84-3.15-2.29l-5.38-10.61C73.73 94.28 71.64 93 70 93H5.5A5.51 5.51 0 0 1 0 87.5v-82C0 2.47 2.47 0 5.5 0h100c3.03 0 5.5 2.47 5.5 5.5v82c0 3.03-2.47 5.5-5.5 5.5H96c-1.64 0-3.73 1.28-4.47 2.75l-5.38 10.62c-.74 1.45-1.89 2.28-3.15 2.28zM5.5 3A2.5 2.5 0 0 0 3 5.5v82A2.5 2.5 0 0 0 5.5 90H70c2.76 0 5.9 1.93 7.15 4.39L82.53 105c.24.47.46.63.51.66-.03-.02.19-.19.43-.66l5.38-10.62C90.1 91.93 93.24 90 96 90h9.5a2.5 2.5 0 0 0 2.5-2.5v-82a2.5 2.5 0 0 0-2.5-2.5H5.5z">
+       </path>
+       <path
+         d="M101 111H56c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5h45c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5zm-54 0H29c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5h18c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5zM20 28h63m0 1.5H20c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5h63c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5zM20 46h45m0 1.5H20c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5h45c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5zM20 64h54m0 1.5H20c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5h54c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z">
+       </path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111 111" id="Poll">
+       <path
+         d="M5.5 2C3.3 2 1 3.3 1 5.5v82C1 89.7 3.3 92 5.5 92H70c2.2 0 4.81 1.36 5.81 3.32l5.38 10.49c.99 1.96 2.62 1.9 3.62-.06l5.38-10.4C91.19 93.39 93.8 92 96 92h9.5c2.2 0 3.5-2.3 3.5-4.5v-82c0-2.2-1.3-3.5-3.5-3.5H5.5z"
+         fill="#fff"></path>
+       <path
+         d="M83 108.65c-1.26 0-2.41-.84-3.15-2.29l-5.38-10.61C73.73 94.28 71.64 93 70 93H5.5A5.51 5.51 0 0 1 0 87.5v-82C0 2.47 2.47 0 5.5 0h100c3.03 0 5.5 2.47 5.5 5.5v82c0 3.03-2.47 5.5-5.5 5.5H96c-1.64 0-3.73 1.28-4.47 2.75l-5.38 10.62c-.74 1.45-1.89 2.28-3.15 2.28zM5.5 3A2.5 2.5 0 0 0 3 5.5v82A2.5 2.5 0 0 0 5.5 90H70c2.76 0 5.9 1.93 7.15 4.39L82.53 105c.24.47.46.63.51.66-.03-.02.19-.19.43-.66l5.38-10.62C90.1 91.93 93.24 90 96 90h9.5a2.5 2.5 0 0 0 2.5-2.5v-82a2.5 2.5 0 0 0-2.5-2.5H5.5z">
+       </path>
+       <path
+         d="M101 111H56c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5h45c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5zm-54 0H29c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5h18c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5zm21-59H20c-2.76 0-5-2.24-5-5s2.24-5 5-5h48">
+       </path>
+       <path d="M68 42h27c2.76 0 5 2.24 5 5s-2.24 5-5 5H68" fill="#b9c2c6"></path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111 111" id="Question">
+       <path
+         d="M5.5 1.5c-2.2 0-4 1.8-4 4v82c0 2.2 1.8 4 4 4H70c2.2 0 4.81 1.61 5.81 3.57l5.38 10.61c.99 1.96 2.62 1.96 3.62 0l5.38-10.61c.99-1.96 3.61-3.57 5.81-3.57h9.5c2.2 0 4-1.8 4-4v-82c0-2.2-1.8-4-4-4H5.5z"
+         fill="#fff"></path>
+       <path
+         d="M83 108.65c-1.26 0-2.41-.84-3.15-2.29l-5.38-10.61C73.73 94.28 71.64 93 70 93H5.5A5.51 5.51 0 0 1 0 87.5v-82C0 2.47 2.47 0 5.5 0h100c3.03 0 5.5 2.47 5.5 5.5v82c0 3.03-2.47 5.5-5.5 5.5H96c-1.64 0-3.73 1.28-4.47 2.75l-5.38 10.62c-.74 1.45-1.89 2.28-3.15 2.28zM5.5 3A2.5 2.5 0 0 0 3 5.5v82A2.5 2.5 0 0 0 5.5 90H70c2.76 0 5.9 1.93 7.15 4.39L82.53 105c.24.47.46.63.51.66-.03-.02.19-.19.43-.66l5.38-10.62C90.1 91.93 93.24 90 96 90h9.5a2.5 2.5 0 0 0 2.5-2.5v-82a2.5 2.5 0 0 0-2.5-2.5H5.5z">
+       </path>
+       <path
+         d="M101 111H66c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5h35c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5zm-44 0H29c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5h28c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z">
+       </path>
+       <path
+         d="M52.36 54.22c0-1.36.25-2.59.74-3.69s1.09-2.04 1.79-2.84c.7-.79 1.64-1.74 2.81-2.84 1.44-1.32 2.5-2.47 3.21-3.43.7-.96 1.05-2.09 1.05-3.38 0-3.52-1.83-5.28-5.5-5.28-1.82 0-3.18.53-4.09 1.59-.91 1.06-1.53 2.5-1.87 4.31l-6.01-1.65c.3-2.72 1.56-4.95 3.77-6.69 2.21-1.74 5.04-2.61 8.48-2.61 3.52 0 6.4.91 8.65 2.72s3.38 4.31 3.38 7.49c0 1.66-.27 3.08-.79 4.25-.53 1.17-1.16 2.14-1.9 2.89-.74.76-1.73 1.63-2.98 2.61-1.59 1.21-2.77 2.33-3.55 3.35-.78 1.02-1.16 2.35-1.16 3.97v1.08h-6.01v-1.85zm-1.02 10.16v-.74c0-2.53 1.27-3.8 3.8-3.8h.68c2.53 0 3.8 1.27 3.8 3.8v.74c0 2.53-1.27 3.8-3.8 3.8h-.68c-2.54 0-3.8-1.27-3.8-3.8z"
+         fill="#b9c2c6"></path>
+     </symbol>
+     <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111 111" id="Video">
+       <path
+         d="M5.5 1.5c-2.2 0-4 1.8-4 4v82c0 2.2 1.8 4 4 4H70c2.2 0 4.81 1.61 5.81 3.57l5.38 10.61c.99 1.96 2.62 1.96 3.62 0l5.38-10.61c.99-1.96 3.61-3.57 5.81-3.57h9.5c2.2 0 4-1.8 4-4v-82c0-2.2-1.8-4-4-4H5.5z"
+         fill="#fff"></path>
+       <path
+         d="M83 108.65c-1.26 0-2.41-.84-3.15-2.29l-5.38-10.61C73.73 94.28 71.64 93 70 93H5.5A5.51 5.51 0 0 1 0 87.5v-82C0 2.47 2.47 0 5.5 0h100c3.03 0 5.5 2.47 5.5 5.5v82c0 3.03-2.47 5.5-5.5 5.5H96c-1.64 0-3.73 1.28-4.47 2.75l-5.38 10.62c-.74 1.45-1.89 2.28-3.15 2.28zM5.5 3A2.5 2.5 0 0 0 3 5.5v82A2.5 2.5 0 0 0 5.5 90H70c2.76 0 5.9 1.93 7.15 4.39L82.53 105c.24.47.46.63.51.66-.03-.02.19-.19.43-.66l5.38-10.62C90.1 91.93 93.24 90 96 90h9.5a2.5 2.5 0 0 0 2.5-2.5v-82a2.5 2.5 0 0 0-2.5-2.5H5.5z">
+       </path>
+       <path
+         d="M101 111H56c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5h45c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5zm-54 0H29c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5h18c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z">
+       </path>
+       <path
+         d="M56 24.33c-11.97 0-21.67 9.7-21.67 21.67S44.03 67.67 56 67.67c11.97 0 21.67-9.7 21.67-21.67S67.97 24.33 56 24.33zm-2.13 28.8c-1.94 1.03-3.54.07-3.54-2.13V41c0-2.2 1.59-3.16 3.54-2.13l9.93 5.26c1.94 1.03 1.94 2.71 0 3.74l-9.93 5.26z"
+         fill="#b9c2c6"></path>
+     </symbol>
+   </svg>  
+ 
+  </body>
+</html>

mean4thai/src/main.ts

+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.log(err));

mean4thai/src/polyfills.ts

+/**
+ * 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 Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * 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.ts';
+ *
+ * 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/dist/zone';  // Included with Angular CLI.

mean4thai/src/styles.scss

+/* You can add global styles to this file, and also import other style files */
+@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
+@import '~@angular/material/theming';
+
+$custom-typography: mat-typography-config(
+    $font-family: 'Exo'
+);
+
+@include mat-core($custom-typography);
+
+body {
+  background-color: #f4f3f3;
+  margin: 0;
+  app-root * {
+    font-family: 'Exo', sans-serif;
+  }
+}

mean4thai/src/test.ts

+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// 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().map(context);

mean4thai/src/typings.d.ts

+import { User } from '@app/shared/interfaces';
+
+declare module '*.json' {
+  const value: any;
+  export default value;
+}
+
+declare global {
+  interface Window {
+    user: User | null;
+  }
+}

mean4thai/tsconfig.app.json

+{
+  "extends": "./tsconfig.json",
+  "files": [
+    "src/polyfills.ts",
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ],
+  "angularCompilerOptions": {
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true
+  }
+}

mean4thai/tsconfig.json

+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@app/*": [
+        "src/app/*"
+      ]
+    },
+    "target": "ES2015",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "strict": true,
+    "sourceMap": true,
+    "declaration": false,
+    "importHelpers": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "suppressImplicitAnyIndexErrors": true
+  }
+}

mean4thai/tsconfig.spec.json

+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "module": "commonjs",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

mean4thai/tslint.json

+{
+  "rulesDirectory": [
+    "node_modules/codelyzer"
+  ],
+  "rules": {
+    "arrow-return-shorthand": true,
+    "callable-types": true,
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "deprecation": {
+      "severity": "warn"
+    },
+    "eofline": true,
+    "forin": true,
+    "import-blacklist": [
+      true,
+      "rxjs/Rx"
+    ],
+    "import-spacing": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "interface-over-type-literal": true,
+    "label-position": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      {
+        "order": [
+          "static-field",
+          "instance-field",
+          "static-method",
+          "instance-method"
+        ]
+      }
+    ],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-super": true,
+    "no-empty": false,
+    "no-empty-interface": true,
+    "no-eval": true,
+    "no-inferrable-types": [
+      true,
+      "ignore-params"
+    ],
+    "no-misused-new": true,
+    "no-non-null-assertion": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-string-throw": true,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unnecessary-initializer": true,
+    "no-unused-expression": true,
+    "no-var-keyword": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "prefer-const": true,
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      true,
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "unified-signatures": true,
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+    "directive-selector": [
+      true,
+      "attribute",
+      "app",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "app",
+      "kebab-case"
+    ],
+    "no-output-on-prefix": true,
+    "no-inputs-metadata-property": true,
+    "no-outputs-metadata-property": true,
+    "no-host-metadata-property": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "use-lifecycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true
+  }
+}