{"id":111,"date":"2026-08-25T10:46:40","date_gmt":"2026-08-25T10:46:40","guid":{"rendered":"https:\/\/twame.vn\/?page_id=111"},"modified":"2026-08-27T08:46:32","modified_gmt":"2026-08-27T08:46:32","slug":"about-twame","status":"publish","type":"page","link":"https:\/\/twame.vn\/?page_id=111","title":{"rendered":"ABOUT TWAME"},"content":{"rendered":"\n<!-- =========================================================\n     TWAME \u2014 ABOUT US\n     FULL FLUID RESPONSIVE\n     \n     \u2699\ufe0f\u2699\ufe0f\u2699\ufe0f EDIT HERE\n     Ch\u1ec9 c\u1ea7n ch\u1ec9nh khu v\u1ef1c n\u00e0y khi mu\u1ed1n thay:\n     - \u1ea2nh Gallery\n     - T\u00ean t\u1eebng project\n     - Link CTA\n     \n     KH\u00d4NG C\u1ea6N S\u1eecA PH\u1ea6N HTML \/ CSS \/ JS B\u00caN D\u01af\u1edaI.\n========================================================= -->\n\n<div id=\"twame-about\">\n\n<script>\n\/* =========================================================\n   \u2699\ufe0f EDIT HERE \u2014 CH\u1ec8NH N\u1ed8I DUNG T\u1ea0I \u0110\u00c2Y\n========================================================= *\/\n\nconst TWAME_CONFIG = {\n\n  \/* =========================\n     CTA\n  ========================= *\/\n\n  ctaLink:\n    \"https:\/\/twame.vn\/?page_id=115\",\n\n\n  \/* =========================\n     GALLERY \u2014 9 \u1ea2NH\n     \n     \ud83d\udc49 M\u1ed7i \u1ea3nh ch\u1ec9 c\u1ea7n thay URL trong d\u1ea5u \"\"\n     \n     01 - 04: \u0111\u00e3 \u0111i\u1ec1n \u1ea3nh c\u1ee7a m\n     05 - 09: \u0111ang \u0111\u1ec3 tr\u1ed1ng\n  ========================= *\/\n\n  gallery: [\n\n    {\n      image:\n        \"https:\/\/twame.vn\/wp-content\/uploads\/2026\/08\/1787673951112_1998148603798083260_989185986316452028_aed57bfb1a5fe76cfae5212911021510-scaled.jpg\",\n      title:\n        \"PROJECT 001\"\n    },\n\n    {\n      image:\n        \"https:\/\/twame.vn\/wp-content\/uploads\/2026\/08\/1787673951044_1998148603798083260_989185986316452028_ced5e7c012b675e6b1cbb5c1079a6a8e.jpg\",\n      title:\n        \"PROJECT 002\"\n    },\n\n    {\n      image:\n        \"https:\/\/twame.vn\/wp-content\/uploads\/2026\/08\/1787673951027_1998148603798083260_989185986316452028_acd326e7d135ef6805c88795768717f4-scaled.jpg\",\n      title:\n        \"PROJECT 003\"\n    },\n\n    {\n      image:\n        \"https:\/\/twame.vn\/wp-content\/uploads\/2026\/08\/1787664183331_1998148603798083260_989185986316452028_b22a9c6838d2f9fadd01611518ddb4b0.jpg\",\n      title:\n        \"PROJECT 004\"\n    },\n\n    {\n      image:\n        \"https:\/\/twame.vn\/wp-content\/uploads\/2026\/08\/1787673951166_1998148603798083260_989185986316452028_8d5ed1aada6ce02b8891a05a1b2c50bf-scaled.jpg\",\n      title:\n        \"PROJECT 005\"\n    },\n\n    {\n      image:\n        \"https:\/\/twame.vn\/wp-content\/uploads\/2026\/08\/1787673951294_1998148603798083260_989185986316452028_78daef6cb97231928dae1839bf00add8.jpg\",\n      title:\n        \"PROJECT 006\"\n    },\n\n    {\n      image:\n        \"https:\/\/twame.vn\/wp-content\/uploads\/2026\/08\/1787673951255_1998148603798083260_989185986316452028_66c5b79c8294abe8ffaf5f38615bc719-1-scaled.jpg\",\n      title:\n        \"PROJECT 007\"\n    },\n\n    {\n      image:\n        \"https:\/\/twame.vn\/wp-content\/uploads\/2026\/08\/1787674250300_1998148603798083260_989185986316452028_171e20ee0969609f15e24b398ad289f6.jpg\",\n      title:\n        \"EPROJECT 008\"\n    },\n\n    {\n      image:\n        \"https:\/\/twame.vn\/wp-content\/uploads\/2026\/08\/1787674250300_1998148603798083260_989185986316452028_171e20ee0969609f15e24b398ad289f6.jpg\",\n      title:\n        \"PROJECT 009\"\n    }\n\n  ]\n\n};\n<\/script>\n\n\n\n<!-- =========================================================\n     HERO\n========================================================= -->\n\n<section class=\"tw-hero\" id=\"tw-about\">\n\n  <div class=\"tw-hero-grid\"><\/div>\n\n  <div class=\"tw-hero-glow\"><\/div>\n\n\n  <div class=\"tw-hero-content\">\n\n    <div class=\"tw-eyebrow\">\n\n      <span><\/span>\n\n      T WAME AGENCY\n\n    <\/div>\n\n\n    <h1>\n\n      IDEAS\n\n      <br>\n\n      <span>INTO<\/span>\n\n      <br>\n\n      EXPERIENCES.\n\n    <\/h1>\n\n\n    <p>\n\n      Ch\u00fang t\u00f4i bi\u1ebfn nh\u1eefng \u00fd t\u01b0\u1edfng th\u01b0\u01a1ng hi\u1ec7u\n      th\u00e0nh nh\u1eefng tr\u1ea3i nghi\u1ec7m \u0111\u00e1ng nh\u1edb.\n\n    <\/p>\n\n  <\/div>\n\n\n\n  <!-- =====================================================\n       SLIME\n  ====================================================== -->\n\n  <div class=\"tw-slime-wrapper\">\n\n    <div class=\"tw-slime\">\n\n      <div class=\"tw-eye tw-eye-left\">\n        <div class=\"tw-pupil\"><\/div>\n      <\/div>\n\n      <div class=\"tw-eye tw-eye-right\">\n        <div class=\"tw-pupil\"><\/div>\n      <\/div>\n\n      <div class=\"tw-mouth\"><\/div>\n\n      <div class=\"tw-shine\"><\/div>\n\n    <\/div>\n\n    <div class=\"tw-slime-shadow\"><\/div>\n\n  <\/div>\n\n\n\n  <div class=\"tw-scroll\">\n\n    <span>\n      SCROLL TO EXPLORE\n    <\/span>\n\n    <div class=\"tw-scroll-line\"><\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<!-- =========================================================\n     ABOUT\n========================================================= -->\n\n<section class=\"tw-section tw-about-section\">\n\n  <div class=\"tw-section-label\">\n    01 \u2014 WHO WE ARE\n  <\/div>\n\n\n  <div class=\"tw-about-grid\">\n\n\n    <div class=\"tw-about-title\">\n\n      <h2>\n\n        WE CREATE\n\n        <br>\n\n        <span>EXPERIENCES.<\/span>\n\n      <\/h2>\n\n      <div class=\"tw-cyan-line\"><\/div>\n\n    <\/div>\n\n\n\n    <div class=\"tw-about-text\">\n\n      <div class=\"tw-big-copy\">\n\n        T WAME Agency l\u00e0 \u0111\u01a1n v\u1ecb cung c\u1ea5p\n        gi\u1ea3i ph\u00e1p <strong>Marketing &amp; Activation<\/strong>,\n        \u0111\u1ed3ng h\u00e0nh c\u00f9ng th\u01b0\u01a1ng hi\u1ec7u t\u1eeb \u00fd t\u01b0\u1edfng,\n        thi\u1ebft k\u1ebf, s\u1ea3n xu\u1ea5t \u0111\u1ebfn tri\u1ec3n khai th\u1ef1c t\u1ebf.\n\n      <\/div>\n\n\n      <p>\n\n        Ch\u00fang t\u00f4i t\u1eadp trung v\u00e0o vi\u1ec7c t\u1ea1o ra\n        nh\u1eefng ho\u1ea1t \u0111\u1ed9ng truy\u1ec1n th\u00f4ng \u1ea5n t\u01b0\u1ee3ng,\n        th\u1ef1c t\u1ebf v\u00e0 hi\u1ec7u qu\u1ea3 \u2014 gi\u00fap th\u01b0\u01a1ng hi\u1ec7u\n        k\u1ebft n\u1ed1i v\u1edbi kh\u00e1ch h\u00e0ng th\u00f4ng qua nh\u1eefng\n        tr\u1ea3i nghi\u1ec7m \u0111\u00e1ng nh\u1edb.\n\n      <\/p>\n\n\n      <p>\n\n        T\u1eeb m\u1ed9t \u00fd t\u01b0\u1edfng ban \u0111\u1ea7u \u0111\u1ebfn m\u1ed9t chi\u1ebfn d\u1ecbch\n        ho\u00e0n ch\u1ec9nh, ch\u00fang t\u00f4i lu\u00f4n \u0111\u1eb7t s\u1ef1 s\u00e1ng t\u1ea1o,\n        t\u00ednh kh\u1ea3 thi v\u00e0 ch\u1ea5t l\u01b0\u1ee3ng tri\u1ec3n khai\n        l\u00e0m tr\u1ecdng t\u00e2m.\n\n      <\/p>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<!-- =========================================================\n     SERVICES\n========================================================= -->\n\n<section class=\"tw-services-section\" id=\"tw-services\">\n\n  <div class=\"tw-section-inner\">\n\n    <div class=\"tw-section-label\">\n      02 \u2014 WHAT WE DO\n    <\/div>\n\n\n    <div class=\"tw-heading-row\">\n\n      <h2>\n\n        OUR\n\n        <br>\n\n        SERVICES<span>.<\/span>\n\n      <\/h2>\n\n\n      <div class=\"tw-heading-note\">\n\n        CREATIVE\n        <br>\n\n        PRODUCTION\n        <br>\n\n        EXPERIENCE\n\n      <\/div>\n\n    <\/div>\n\n\n\n    <div class=\"tw-services-grid\">\n\n\n      <!-- SERVICE 01 -->\n\n      <a href=\"#\" class=\"tw-service-card\">\n\n        <div class=\"tw-service-top\">\n\n          <span>01<\/span>\n\n          <span class=\"tw-service-arrow\">\n            \u2197\n          <\/span>\n\n        <\/div>\n\n\n        <div class=\"tw-service-content\">\n\n          <h3>\n\n            EVENT\n            <br>\n            &amp; ACTIVATION\n\n          <\/h3>\n\n\n          <p>\n\n            \u00dd t\u01b0\u1edfng, planning v\u00e0 tri\u1ec3n khai\n            s\u1ef1 ki\u1ec7n, activation v\u00e0 brand experience.\n\n          <\/p>\n\n        <\/div>\n\n\n        <div class=\"tw-service-bg-number\">\n          01\n        <\/div>\n\n      <\/a>\n\n\n\n      <!-- SERVICE 02 -->\n\n      <a href=\"#\" class=\"tw-service-card\">\n\n        <div class=\"tw-service-top\">\n\n          <span>02<\/span>\n\n          <span class=\"tw-service-arrow\">\n            \u2197\n          <\/span>\n\n        <\/div>\n\n\n        <div class=\"tw-service-content\">\n\n          <h3>\n\n            TV &amp; EVENT\n            <br>\n            EQUIPMENT\n\n          <\/h3>\n\n\n          <p>\n\n            Cung c\u1ea5p thi\u1ebft b\u1ecb ph\u1ee5c v\u1ee5 s\u1ef1 ki\u1ec7n,\n            truy\u1ec1n h\u00ecnh v\u00e0 production.\n\n          <\/p>\n\n        <\/div>\n\n\n        <div class=\"tw-service-bg-number\">\n          02\n        <\/div>\n\n      <\/a>\n\n\n\n      <!-- SERVICE 03 -->\n\n      <a href=\"#\" class=\"tw-service-card\">\n\n        <div class=\"tw-service-top\">\n\n          <span>03<\/span>\n\n          <span class=\"tw-service-arrow\">\n            \u2197\n          <\/span>\n\n        <\/div>\n\n\n        <div class=\"tw-service-content\">\n\n          <h3>\n\n            PG \/ PB\n            <br>\n            &amp; ACTIVATION\n\n          <\/h3>\n\n\n          <p>\n\n            Cung c\u1ea5p \u0111\u1ed9i ng\u0169 nh\u00e2n s\u1ef1 activation\n            chuy\u00ean nghi\u1ec7p v\u00e0 ph\u00f9 h\u1ee3p t\u1eebng chi\u1ebfn d\u1ecbch.\n\n          <\/p>\n\n        <\/div>\n\n\n        <div class=\"tw-service-bg-number\">\n          03\n        <\/div>\n\n      <\/a>\n\n\n\n      <!-- SERVICE 04 -->\n\n      <a href=\"#\" class=\"tw-service-card\">\n\n        <div class=\"tw-service-top\">\n\n          <span>04<\/span>\n\n          <span class=\"tw-service-arrow\">\n            \u2197\n          <\/span>\n\n        <\/div>\n\n\n        <div class=\"tw-service-content\">\n\n          <h3>\n\n            DESIGN\n            <br>\n            &amp; BRANDING\n\n          <\/h3>\n\n\n          <p>\n\n            Thi\u1ebft k\u1ebf nh\u1eadn di\u1ec7n, POSM v\u00e0 c\u00e1c \u1ea5n ph\u1ea9m\n            truy\u1ec1n th\u00f4ng th\u01b0\u01a1ng hi\u1ec7u.\n\n          <\/p>\n\n        <\/div>\n\n\n        <div class=\"tw-service-bg-number\">\n          04\n        <\/div>\n\n      <\/a>\n\n\n\n      <!-- SERVICE 05 -->\n\n      <a href=\"#\" class=\"tw-service-card\">\n\n        <div class=\"tw-service-top\">\n\n          <span>05<\/span>\n\n          <span class=\"tw-service-arrow\">\n            \u2197\n          <\/span>\n\n        <\/div>\n\n\n        <div class=\"tw-service-content\">\n\n          <h3>\n\n            POSM\n            <br>\n            PRODUCTION\n\n          <\/h3>\n\n\n          <p>\n\n            S\u1ea3n xu\u1ea5t POSM theo y\u00eau c\u1ea7u,\n            \u0111\u1ea3m b\u1ea3o ch\u1ea5t l\u01b0\u1ee3ng v\u00e0 ti\u1ebfn \u0111\u1ed9.\n\n          <\/p>\n\n        <\/div>\n\n\n        <div class=\"tw-service-bg-number\">\n          05\n        <\/div>\n\n      <\/a>\n\n\n\n      <!-- SERVICE 06 -->\n\n      <a href=\"#\" class=\"tw-service-card\">\n\n        <div class=\"tw-service-top\">\n\n          <span>06<\/span>\n\n          <span class=\"tw-service-arrow\">\n            \u2197\n          <\/span>\n\n        <\/div>\n\n\n        <div class=\"tw-service-content\">\n\n          <h3>\n\n            PRINTING\n            <br>\n            &amp; MINI POSM\n\n          <\/h3>\n\n\n          <p>\n\n            In \u1ea5n v\u00e0 s\u1ea3n xu\u1ea5t c\u00e1c h\u1ea1ng m\u1ee5c POSM\n            ph\u1ee5c v\u1ee5 chi\u1ebfn d\u1ecbch.\n\n          <\/p>\n\n        <\/div>\n\n\n        <div class=\"tw-service-bg-number\">\n          06\n        <\/div>\n\n      <\/a>\n\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<!-- =========================================================\n     WHY US\n========================================================= -->\n\n<section class=\"tw-section tw-why-section\" id=\"tw-why\">\n\n  <div class=\"tw-section-label\">\n    03 \u2014 WHY T WAME\n  <\/div>\n\n\n  <div class=\"tw-heading-row\">\n\n    <h2>\n\n      WHY\n\n      <br>\n\n      CHOOSE US<span>?<\/span>\n\n    <\/h2>\n\n\n    <div class=\"tw-heading-note\">\n\n      IDEAS\n      <br>\n\n      THAT\n      <br>\n\n      WORK.\n\n    <\/div>\n\n  <\/div>\n\n\n\n  <div class=\"tw-why-grid\">\n\n\n    <div class=\"tw-why-card tw-active\">\n\n      <span>01<\/span>\n\n      <div>\n\n        <h3>\n          CREATIVE\n        <\/h3>\n\n        <p>\n          \u00dd t\u01b0\u1edfng s\u00e1ng t\u1ea1o nh\u01b0ng lu\u00f4n\n          g\u1eafn v\u1edbi m\u1ee5c ti\u00eau th\u1ef1c t\u1ebf.\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n\n    <div class=\"tw-why-card\">\n\n      <span>02<\/span>\n\n      <div>\n\n        <h3>\n          PROFESSIONAL\n        <\/h3>\n\n        <p>\n          Quy tr\u00ecnh tri\u1ec3n khai r\u00f5 r\u00e0ng,\n          \u0111\u1ed9i ng\u0169 ch\u1ee7 \u0111\u1ed9ng v\u00e0 chuy\u00ean nghi\u1ec7p.\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n\n    <div class=\"tw-why-card\">\n\n      <span>03<\/span>\n\n      <div>\n\n        <h3>\n          FLEXIBLE\n        <\/h3>\n\n        <p>\n          Linh ho\u1ea1t theo ng\u00e2n s\u00e1ch,\n          y\u00eau c\u1ea7u v\u00e0 quy m\u00f4 d\u1ef1 \u00e1n.\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n\n    <div class=\"tw-why-card\">\n\n      <span>04<\/span>\n\n      <div>\n\n        <h3>\n          EXECUTION\n        <\/h3>\n\n        <p>\n          Kh\u00f4ng ch\u1ec9 \u0111\u01b0a ra \u00fd t\u01b0\u1edfng \u2014\n          ch\u00fang t\u00f4i bi\u1ebfn \u00fd t\u01b0\u1edfng th\u00e0nh hi\u1ec7n th\u1ef1c.\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n  <\/div>\n\n<\/section>\n\n\n\n<!-- =========================================================\n     GALLERY\n========================================================= -->\n\n<section class=\"tw-gallery-section\" id=\"tw-gallery\">\n\n  <div class=\"tw-section-inner\">\n\n\n    <div class=\"tw-section-label\">\n\n      04 \u2014 SELECTED WORKS\n\n    <\/div>\n\n\n\n    <div class=\"tw-gallery-heading\">\n\n      <div>\n\n        <h2>\n\n          OUR\n\n          <br>\n\n          <span>WORKS.<\/span>\n\n        <\/h2>\n\n      <\/div>\n\n\n      <p>\n\n        A selection of moments,\n        <br>\n\n        experiences &amp; executions.\n\n      <\/p>\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         GALLERY GRID\n         \n         JS s\u1ebd t\u1ef1 l\u1ea5y \u1ea3nh t\u1eeb TWAME_CONFIG \u1edf tr\u00ean.\n    ====================================================== -->\n\n    <div class=\"tw-gallery-grid\" id=\"tw-gallery-grid\"><\/div>\n\n\n  <\/div>\n\n<\/section>\n\n\n\n<!-- =========================================================\n     LIGHTBOX\n========================================================= -->\n\n<div class=\"tw-lightbox\" id=\"tw-lightbox\">\n\n  <button class=\"tw-lightbox-close\" type=\"button\" aria-label=\"Close\">\n    \u00d7\n  <\/button>\n\n\n  <img decoding=\"async\" id=\"tw-lightbox-image\" src=\"\" alt=\"\">\n\n\n  <div class=\"tw-lightbox-counter\" id=\"tw-lightbox-counter\">\n    01 \/ 09\n  <\/div>\n\n<\/div>\n\n\n\n<!-- =========================================================\n     CTA\n========================================================= -->\n\n<section class=\"tw-contact\" id=\"tw-contact\">\n\n  <div class=\"tw-contact-glow\"><\/div>\n\n\n  <div class=\"tw-contact-content\">\n\n    <div class=\"tw-section-label\">\n\n      05 \u2014 LET&#8217;S WORK TOGETHER\n\n    <\/div>\n\n\n    <h2>\n\n      HAVE AN\n\n      <br>\n\n      <span>IDEA?<\/span>\n\n    <\/h2>\n\n\n    <p>\n\n      Let&#8217;s turn your idea into\n      something people remember.\n\n    <\/p>\n\n\n    <a id=\"tw-cta-button\" class=\"tw-contact-button\" href=\"#\">\n\n      START A PROJECT\n\n      <span>\n        \u2197\n      <\/span>\n\n    <\/a>\n\n  <\/div>\n\n<\/section>\n\n\n\n<!-- =========================================================\n     FOOTER\n     \n     N\u1ebfu website c\u1ee7a m \u0111\u00e3 c\u00f3 Footer global th\u00ec c\u00f3 th\u1ec3\n     x\u00f3a section n\u00e0y.\n========================================================= -->\n\n<footer class=\"tw-footer\">\n\n  <div>\n    \u00a9 T WAME AGENCY\n  <\/div>\n\n  <div>\n    IDEAS \u2192 EXPERIENCES\n  <\/div>\n\n  <div>\n    VIETNAM\n  <\/div>\n\n<\/footer>\n\n\n\n<!-- =========================================================\n     CSS\n========================================================= -->\n\n<style>\n\n\/* =========================================================\n   ROOT\n========================================================= *\/\n\n#twame-about {\n\n  --tw-black:#050505;\n\n  --tw-dark:#080808;\n\n  --tw-white:#f4f4f2;\n\n  --tw-gray:#777;\n\n  --tw-muted:#4e4e4e;\n\n  --tw-cyan:#00f0ff;\n\n\n  width:100%;\n\n  max-width:100%;\n\n  margin:0;\n\n  padding:0;\n\n  background:\n    var(--tw-black);\n\n  color:\n    var(--tw-white);\n\n\n  font-family:\n    Arial,\n    Helvetica,\n    sans-serif;\n\n\n  overflow:hidden;\n\n  position:relative;\n\n\n  \/*\n   * Fluid root size\n   *\/\n  font-size:\n    clamp(14px, .9vw, 18px);\n\n}\n\n\n#twame-about *,\n#twame-about *::before,\n#twame-about *::after {\n\n  box-sizing:border-box;\n\n}\n\n\n#twame-about a {\n\n  color:inherit;\n\n  text-decoration:none;\n\n}\n\n\n#twame-about img {\n\n  display:block;\n\n  max-width:100%;\n\n}\n\n\n\n\/* =========================================================\n   HERO\n========================================================= *\/\n\n.tw-hero {\n\n  position:relative;\n\n  width:100%;\n\n  min-height:\n    100svh;\n\n  height:\n    max(680px, 100svh);\n\n\n  display:flex;\n\n  align-items:center;\n\n  justify-content:center;\n\n\n  padding:\n\n    clamp(100px, 10vw, 180px)\n\n    clamp(20px, 5vw, 100px)\n\n    clamp(80px, 8vw, 130px);\n\n\n  overflow:hidden;\n\n}\n\n\n\n\/* GRID *\/\n\n.tw-hero-grid {\n\n  position:absolute;\n\n  inset:0;\n\n\n  opacity:.18;\n\n\n  background-image:\n\n    linear-gradient(\n      rgba(255,255,255,.035) 1px,\n      transparent 1px\n    ),\n\n    linear-gradient(\n      90deg,\n      rgba(255,255,255,.035) 1px,\n      transparent 1px\n    );\n\n\n  background-size:\n    clamp(45px, 4vw, 80px)\n    clamp(45px, 4vw, 80px);\n\n\n  mask-image:\n    linear-gradient(\n      to bottom,\n      black 0%,\n      transparent 90%\n    );\n\n}\n\n\n\n\/* GLOW *\/\n\n.tw-hero-glow {\n\n  position:absolute;\n\n\n  width:\n    clamp(350px, 55vw, 900px);\n\n  height:\n    clamp(350px, 55vw, 900px);\n\n\n  left:50%;\n\n  top:50%;\n\n\n  transform:\n    translate(-50%,-50%);\n\n\n  background:\n\n    radial-gradient(\n      circle,\n      rgba(0,240,255,.12),\n      rgba(0,240,255,.035) 35%,\n      transparent 70%\n    );\n\n\n  filter:\n    blur(\n      clamp(10px, 2vw, 30px)\n    );\n\n}\n\n\n\n\/* HERO CONTENT *\/\n\n.tw-hero-content {\n\n  position:relative;\n\n  z-index:5;\n\n  text-align:center;\n\n  width:100%;\n\n  max-width:\n    1200px;\n\n}\n\n\n.tw-eyebrow {\n\n  display:flex;\n\n  justify-content:center;\n\n  align-items:center;\n\n  gap:\n    clamp(7px, .6vw, 12px);\n\n\n  color:\n    var(--tw-cyan);\n\n\n  font-size:\n    clamp(8px, .55vw, 12px);\n\n\n  letter-spacing:\n    clamp(2px, .3vw, 5px);\n\n\n  font-weight:700;\n\n\n  margin-bottom:\n    clamp(22px, 3vw, 45px);\n\n}\n\n\n.tw-eyebrow span {\n\n  width:\n    clamp(4px, .35vw, 7px);\n\n  height:\n    clamp(4px, .35vw, 7px);\n\n\n  border-radius:50%;\n\n\n  background:\n    var(--tw-cyan);\n\n\n  box-shadow:\n    0 0 15px\n    var(--tw-cyan);\n\n}\n\n\n\n\/* HERO TITLE *\/\n\n.tw-hero h1 {\n\n  margin:0;\n\n\n  font-size:\n    clamp(\n      58px,\n      10.2vw,\n      180px\n    );\n\n\n  line-height:\n    .78;\n\n\n  letter-spacing:\n    -.075em;\n\n\n  font-weight:\n    900;\n\n\n  text-wrap:\n    balance;\n\n}\n\n\n.tw-hero h1 span {\n\n  color:\n    transparent;\n\n\n  -webkit-text-stroke:\n    clamp(\n      .7px,\n      .08vw,\n      1.5px\n    )\n    rgba(255,255,255,.55);\n\n}\n\n\n.tw-hero-content p {\n\n  max-width:\n    clamp(280px, 32vw, 520px);\n\n\n  margin:\n    clamp(30px, 4vw, 60px)\n    auto 0;\n\n\n  color:\n    #858585;\n\n\n  font-size:\n    clamp(11px, .75vw, 15px);\n\n\n  line-height:\n    1.8;\n\n}\n\n\n\n\/* =========================================================\n   SLIME\n========================================================= *\/\n\n.tw-slime-wrapper {\n\n  position:absolute;\n\n  z-index:4;\n\n\n  width:\n    clamp(160px, 16vw, 290px);\n\n  height:\n    clamp(160px, 16vw, 290px);\n\n\n  left:50%;\n\n  top:52%;\n\n\n  transform:\n    translate(-50%,-50%);\n\n\n  pointer-events:none;\n\n\n  animation:\n    twFloat 5s ease-in-out infinite;\n\n}\n\n\n.tw-slime {\n\n  position:absolute;\n\n\n  width:\n    82%;\n\n  height:\n    68%;\n\n\n  left:\n    9%;\n\n  bottom:\n    12%;\n\n\n  border-radius:\n    48% 52% 40% 42%\n    \/\n    65% 60% 40% 38%;\n\n\n  background:\n\n    linear-gradient(\n      145deg,\n      #fff 0%,\n      #e7ffff 45%,\n      #8eeff5 100%\n    );\n\n\n  box-shadow:\n\n    0 0 30px\n    rgba(0,240,255,.15),\n\n    inset -15px -20px 30px\n    rgba(0,120,130,.12),\n\n    inset 18px 15px 20px\n    rgba(255,255,255,.9);\n\n\n  transition:\n    transform .12s ease-out;\n\n}\n\n\n.tw-eye {\n\n  position:absolute;\n\n\n  width:\n    19%;\n\n  height:\n    30%;\n\n\n  top:\n    35%;\n\n\n  background:\n    #030303;\n\n\n  border-radius:\n    50%;\n\n\n  overflow:hidden;\n\n}\n\n\n.tw-eye-left {\n\n  left:\n    23%;\n\n}\n\n\n.tw-eye-right {\n\n  right:\n    23%;\n\n}\n\n\n.tw-pupil {\n\n  position:absolute;\n\n\n  width:\n    44%;\n\n  aspect-ratio:1;\n\n\n  left:50%;\n\n  top:50%;\n\n\n  transform:\n    translate(-50%,-50%);\n\n\n  border-radius:50%;\n\n\n  background:white;\n\n\n  transition:\n    transform .06s linear;\n\n}\n\n\n.tw-pupil::after {\n\n  content:\"\";\n\n\n  position:absolute;\n\n\n  width:\n    34%;\n\n  aspect-ratio:1;\n\n\n  left:\n    20%;\n\n  top:\n    15%;\n\n\n  border-radius:50%;\n\n\n  background:\n    var(--tw-cyan);\n\n}\n\n\n.tw-mouth {\n\n  position:absolute;\n\n\n  width:\n    11%;\n\n  height:\n    7%;\n\n\n  left:50%;\n\n  top:\n    68%;\n\n\n  transform:\n    translateX(-50%);\n\n\n  border-bottom:\n    2px solid #050505;\n\n\n  border-radius:\n    0 0 50% 50%;\n\n}\n\n\n.tw-shine {\n\n  position:absolute;\n\n\n  width:\n    19%;\n\n  height:\n    14%;\n\n\n  left:\n    18%;\n\n  top:\n    18%;\n\n\n  background:\n    rgba(255,255,255,.8);\n\n\n  border-radius:50%;\n\n\n  transform:\n    rotate(-25deg);\n\n}\n\n\n.tw-slime-shadow {\n\n  position:absolute;\n\n\n  width:\n    60%;\n\n  height:\n    8%;\n\n\n  left:\n    20%;\n\n  bottom:\n    3%;\n\n\n  border-radius:50%;\n\n\n  background:\n    rgba(0,240,255,.12);\n\n\n  filter:\n    blur(10px);\n\n\n  animation:\n    twShadow 5s ease-in-out infinite;\n\n}\n\n\n@keyframes twFloat {\n\n  0%,100% {\n\n    transform:\n      translate(-50%,-50%)\n      translateY(0)\n      rotate(-2deg);\n\n  }\n\n\n  50% {\n\n    transform:\n      translate(-50%,-50%)\n      translateY(\n        clamp(-18px,-1.5vw,-8px)\n      )\n      rotate(2deg);\n\n  }\n\n}\n\n\n@keyframes twShadow {\n\n  0%,100% {\n\n    transform:\n      scaleX(1);\n\n  }\n\n\n  50% {\n\n    transform:\n      scaleX(.75);\n\n  }\n\n}\n\n\n\n\/* =========================================================\n   SCROLL\n========================================================= *\/\n\n.tw-scroll {\n\n  position:absolute;\n\n\n  bottom:\n    clamp(20px, 3vw, 45px);\n\n\n  left:50%;\n\n\n  transform:\n    translateX(-50%);\n\n\n  display:flex;\n\n  flex-direction:column;\n\n  align-items:center;\n\n\n  gap:\n    clamp(8px, .8vw, 15px);\n\n\n  color:\n    #555;\n\n\n  font-size:\n    clamp(7px, .5vw, 10px);\n\n\n  letter-spacing:\n    clamp(1.5px, .18vw, 3px);\n\n}\n\n\n.tw-scroll-line {\n\n  width:1px;\n\n\n  height:\n    clamp(30px, 3vw, 55px);\n\n\n  background:\n\n    linear-gradient(\n      to bottom,\n      var(--tw-cyan),\n      transparent\n    );\n\n}\n\n\n\n\/* =========================================================\n   GENERAL SECTION\n========================================================= *\/\n\n.tw-section {\n\n  width:100%;\n\n\n  padding:\n\n    clamp(90px, 9vw, 180px)\n\n    clamp(20px, 7vw, 140px);\n\n\n  border-top:\n    1px solid rgba(255,255,255,.07);\n\n}\n\n\n.tw-section-inner {\n\n  width:100%;\n\n  max-width:\n    1800px;\n\n  margin:\n    0 auto;\n\n}\n\n\n.tw-section-label {\n\n  color:\n    var(--tw-cyan);\n\n\n  font-size:\n    clamp(8px, .55vw, 11px);\n\n\n  font-weight:700;\n\n\n  letter-spacing:\n    clamp(2px, .25vw, 4px);\n\n\n  margin-bottom:\n    clamp(35px, 4vw, 70px);\n\n}\n\n\n\n\/* =========================================================\n   ABOUT\n========================================================= *\/\n\n.tw-about-grid {\n\n  width:100%;\n\n\n  display:grid;\n\n\n  grid-template-columns:\n    minmax(0,1fr)\n    minmax(0,1fr);\n\n\n  gap:\n    clamp(45px, 9vw, 180px);\n\n\n  align-items:start;\n\n}\n\n\n.tw-about-title h2 {\n\n  margin:0;\n\n\n  font-size:\n    clamp(\n      50px,\n      7vw,\n      125px\n    );\n\n\n  line-height:\n    .84;\n\n\n  letter-spacing:\n    -.075em;\n\n\n  font-weight:\n    900;\n\n}\n\n\n.tw-about-title h2 span {\n\n  color:\n    transparent;\n\n\n  -webkit-text-stroke:\n    1px\n    rgba(255,255,255,.45);\n\n}\n\n\n.tw-cyan-line {\n\n  width:\n    clamp(35px, 4vw, 70px);\n\n\n  height:\n    2px;\n\n\n  margin-top:\n    clamp(25px, 3vw, 50px);\n\n\n  background:\n    var(--tw-cyan);\n\n\n  box-shadow:\n    0 0 15px\n    rgba(0,240,255,.5);\n\n}\n\n\n.tw-about-text {\n\n  width:100%;\n\n  max-width:\n    650px;\n\n}\n\n\n.tw-big-copy {\n\n  color:\n    #d4d4d4;\n\n\n  font-size:\n    clamp(15px, 1.05vw, 21px);\n\n\n  line-height:\n    1.75;\n\n\n  margin-bottom:\n    clamp(25px, 2.5vw, 45px);\n\n}\n\n\n.tw-big-copy strong {\n\n  color:\n    white;\n\n}\n\n\n.tw-about-text p {\n\n  color:\n    #777;\n\n\n  font-size:\n    clamp(11px, .72vw, 15px);\n\n\n  line-height:\n    1.9;\n\n\n  margin:\n    0 0 20px;\n\n}\n\n\n\n\/* =========================================================\n   SERVICES\n========================================================= *\/\n\n.tw-services-section {\n\n  width:\n    calc(100% - clamp(20px, 4vw, 80px));\n\n\n  margin:\n    clamp(20px, 3vw, 50px) auto;\n\n\n  padding:\n\n    clamp(80px, 8vw, 160px)\n\n    clamp(20px, 7vw, 140px);\n\n\n  background:\n    #090909;\n\n\n  border:\n    1px solid rgba(255,255,255,.06);\n\n}\n\n\n.tw-heading-row {\n\n  display:flex;\n\n\n  align-items:flex-end;\n\n\n  justify-content:space-between;\n\n\n  gap:\n    30px;\n\n\n  margin-bottom:\n    clamp(45px, 5vw, 90px);\n\n}\n\n\n.tw-heading-row h2 {\n\n  margin:0;\n\n\n  font-size:\n    clamp(\n      50px,\n      7vw,\n      125px\n    );\n\n\n  line-height:\n    .82;\n\n\n  letter-spacing:\n    -.075em;\n\n\n  font-weight:\n    900;\n\n}\n\n\n.tw-heading-row h2 span {\n\n  color:\n    var(--tw-cyan);\n\n}\n\n\n.tw-heading-note {\n\n  text-align:right;\n\n\n  color:\n    #555;\n\n\n  font-size:\n    clamp(8px, .55vw, 11px);\n\n\n  line-height:\n    1.7;\n\n\n  letter-spacing:\n    2px;\n\n}\n\n\n\n\/* SERVICES GRID *\/\n\n.tw-services-grid {\n\n  display:grid;\n\n\n  grid-template-columns:\n    repeat(3,minmax(0,1fr));\n\n\n  border-top:\n    1px solid rgba(255,255,255,.1);\n\n\n  border-left:\n    1px solid rgba(255,255,255,.1);\n\n}\n\n\n.tw-service-card {\n\n  position:relative;\n\n\n  min-height:\n    clamp(240px, 20vw, 360px);\n\n\n  padding:\n    clamp(22px, 2.2vw, 40px);\n\n\n  display:flex;\n\n\n  flex-direction:column;\n\n\n  justify-content:space-between;\n\n\n  overflow:hidden;\n\n\n  border-right:\n    1px solid rgba(255,255,255,.1);\n\n\n  border-bottom:\n    1px solid rgba(255,255,255,.1);\n\n\n  transition:\n    transform .4s ease,\n    background .4s ease;\n\n}\n\n\n.tw-service-card::before {\n\n  content:\"\";\n\n\n  position:absolute;\n\n\n  left:0;\n\n  top:0;\n\n\n  width:0;\n\n\n  height:2px;\n\n\n  background:\n    var(--tw-cyan);\n\n\n  transition:\n    width .4s ease;\n\n}\n\n\n.tw-service-card:hover {\n\n  background:\n    rgba(0,240,255,.035);\n\n\n  transform:\n    translateY(-5px);\n\n}\n\n\n.tw-service-card:hover::before {\n\n  width:100%;\n\n}\n\n\n.tw-service-top {\n\n  display:flex;\n\n\n  justify-content:space-between;\n\n\n  color:\n    var(--tw-cyan);\n\n\n  font-size:\n    clamp(8px, .55vw, 11px);\n\n\n  font-weight:700;\n\n\n  letter-spacing:\n    2px;\n\n}\n\n\n.tw-service-arrow {\n\n  font-size:\n    clamp(16px, 1.2vw, 24px);\n\n\n  opacity:0;\n\n\n  transform:\n    translate(-5px,5px);\n\n\n  transition:.3s ease;\n\n}\n\n\n.tw-service-card:hover\n.tw-service-arrow {\n\n  opacity:1;\n\n\n  transform:\n    translate(0,0);\n\n}\n\n\n.tw-service-content h3 {\n\n  font-size:\n    clamp(17px, 1.35vw, 27px);\n\n\n  line-height:\n    1;\n\n\n  letter-spacing:\n    -.03em;\n\n\n  margin:\n    0 0 18px;\n\n}\n\n\n.tw-service-content p {\n\n  max-width:\n    340px;\n\n\n  color:\n    #707070;\n\n\n  font-size:\n    clamp(10px, .65vw, 14px);\n\n\n  line-height:\n    1.8;\n\n\n  margin:0;\n\n}\n\n\n.tw-service-bg-number {\n\n  position:absolute;\n\n\n  right:\n    clamp(-20px,-1vw,-5px);\n\n\n  bottom:\n    clamp(-45px,-3vw,-15px);\n\n\n  font-size:\n    clamp(80px, 8vw, 150px);\n\n\n  line-height:1;\n\n\n  font-weight:900;\n\n\n  color:\n    rgba(255,255,255,.025);\n\n\n  transition:\n    transform .4s ease;\n\n}\n\n\n.tw-service-card:hover\n.tw-service-bg-number {\n\n  transform:\n    translate(-15px,-15px);\n\n}\n\n\n\n\/* =========================================================\n   WHY\n========================================================= *\/\n\n.tw-why-grid {\n\n  display:grid;\n\n\n  grid-template-columns:\n    repeat(4,minmax(0,1fr));\n\n\n  border-top:\n    1px solid rgba(255,255,255,.1);\n\n\n  border-left:\n    1px solid rgba(255,255,255,.1);\n\n}\n\n\n.tw-why-card {\n\n  min-height:\n    clamp(210px, 19vw, 330px);\n\n\n  padding:\n    clamp(22px, 2.2vw, 40px);\n\n\n  border-right:\n    1px solid rgba(255,255,255,.1);\n\n\n  border-bottom:\n    1px solid rgba(255,255,255,.1);\n\n\n  transition:\n    background .3s ease;\n\n}\n\n\n.tw-why-card:hover,\n.tw-why-card.tw-active {\n\n  background:\n    rgba(0,240,255,.035);\n\n}\n\n\n.tw-why-card > span {\n\n  color:\n    var(--tw-cyan);\n\n\n  font-size:\n    clamp(8px, .55vw, 11px);\n\n\n  letter-spacing:\n    2px;\n\n}\n\n\n.tw-why-card h3 {\n\n  margin:\n    clamp(30px, 3vw, 55px) 0 15px;\n\n\n  font-size:\n    clamp(16px, 1.25vw, 25px);\n\n}\n\n\n.tw-why-card p {\n\n  color:\n    #707070;\n\n\n  font-size:\n    clamp(10px, .65vw, 14px);\n\n\n  line-height:\n    1.8;\n\n\n  max-width:\n    280px;\n\n}\n\n\n\n\/* =========================================================\n   GALLERY\n========================================================= *\/\n\n.tw-gallery-section {\n\n  width:100%;\n\n\n  padding:\n\n    clamp(90px, 9vw, 180px)\n\n    clamp(20px, 7vw, 140px);\n\n\n  background:\n    #080808;\n\n\n  border-top:\n    1px solid rgba(255,255,255,.07);\n\n\n  border-bottom:\n    1px solid rgba(255,255,255,.07);\n\n}\n\n\n.tw-gallery-heading {\n\n  display:flex;\n\n\n  align-items:flex-end;\n\n\n  justify-content:space-between;\n\n\n  gap:30px;\n\n\n  margin-bottom:\n    clamp(40px, 5vw, 85px);\n\n}\n\n\n.tw-gallery-heading h2 {\n\n  margin:0;\n\n\n  font-size:\n    clamp(\n      55px,\n      8vw,\n      140px\n    );\n\n\n  line-height:\n    .8;\n\n\n  letter-spacing:\n    -.08em;\n\n\n  font-weight:\n    900;\n\n}\n\n\n.tw-gallery-heading h2 span {\n\n  color:\n    transparent;\n\n\n  -webkit-text-stroke:\n    1px\n    rgba(255,255,255,.45);\n\n}\n\n\n.tw-gallery-heading p {\n\n  color:\n    #555;\n\n\n  font-size:\n    clamp(9px, .65vw, 13px);\n\n\n  line-height:\n    1.8;\n\n\n  text-align:right;\n\n}\n\n\n\n\/* =========================================================\n   GALLERY GRID \u2014 3x3\n========================================================= *\/\n\n.tw-gallery-grid {\n\n  width:100%;\n\n\n  display:grid;\n\n\n  grid-template-columns:\n    repeat(3,minmax(0,1fr));\n\n\n  gap:\n    clamp(6px, .7vw, 14px);\n\n}\n\n\n.tw-gallery-item {\n\n  position:relative;\n\n\n  overflow:hidden;\n\n\n  aspect-ratio:\n    1 \/ 1;\n\n\n  cursor:pointer;\n\n\n  display:flex;\n\n\n  align-items:center;\n\n\n  justify-content:center;\n\n\n  background:\n    #111;\n\n\n  border:\n    1px solid rgba(255,255,255,.04);\n\n\n  text-decoration:none;\n\n}\n\n\n.tw-gallery-item img {\n\n  width:100%;\n\n  height:100%;\n\n\n  \/*\n   * IMPORTANT:\n   * contain = KH\u00d4NG CROP \u1ea2NH\n   *\/\n\n  object-fit:\n    contain;\n\n\n  object-position:\n    center;\n\n\n  background:\n    #111;\n\n\n  transition:\n    transform .8s cubic-bezier(.2,.7,.2,1),\n    filter .5s ease;\n\n\n  filter:\n    grayscale(20%)\n    brightness(.82);\n\n}\n\n\n.tw-gallery-item:hover img {\n\n  transform:\n    scale(1.035);\n\n\n  filter:\n    grayscale(0%)\n    brightness(.95);\n\n}\n\n\n\n\/* EMPTY IMAGE *\/\n\n.tw-gallery-item.tw-empty {\n\n  cursor:default;\n\n\n  background:\n\n    radial-gradient(\n      circle at center,\n      rgba(0,240,255,.04),\n      transparent 65%\n    );\n\n}\n\n\n.tw-gallery-item.tw-empty::after {\n\n  content:\n    \"IMAGE COMING SOON\";\n\n\n  position:absolute;\n\n\n  left:50%;\n\n  top:50%;\n\n\n  transform:\n    translate(-50%,-50%);\n\n\n  color:\n    #3f3f3f;\n\n\n  font-size:\n    clamp(7px, .5vw, 10px);\n\n\n  letter-spacing:\n    2px;\n\n\n  white-space:\n    nowrap;\n\n}\n\n\n\n\/* GALLERY OVERLAY *\/\n\n.tw-gallery-overlay {\n\n  position:absolute;\n\n\n  inset:0;\n\n\n  padding:\n    clamp(14px, 1.5vw, 28px);\n\n\n  display:flex;\n\n\n  flex-direction:column;\n\n\n  justify-content:space-between;\n\n\n  background:\n\n    linear-gradient(\n      to bottom,\n      rgba(0,0,0,.25),\n      transparent 35%,\n      rgba(0,0,0,.75)\n    );\n\n\n  opacity:\n    .65;\n\n\n  transition:\n    opacity .4s ease;\n\n}\n\n\n.tw-gallery-item:hover\n.tw-gallery-overlay {\n\n  opacity:\n    1;\n\n}\n\n\n.tw-gallery-overlay span {\n\n  color:\n    var(--tw-cyan);\n\n\n  font-size:\n    clamp(7px, .5vw, 10px);\n\n\n  letter-spacing:\n    2px;\n\n}\n\n\n.tw-gallery-overlay strong {\n\n  font-size:\n    clamp(8px, .65vw, 13px);\n\n\n  letter-spacing:\n    1px;\n\n}\n\n\n.tw-gallery-overlay i {\n\n  position:absolute;\n\n\n  right:\n    clamp(12px, 1.5vw, 28px);\n\n\n  bottom:\n    clamp(12px, 1.5vw, 28px);\n\n\n  width:\n    clamp(28px, 2.4vw, 45px);\n\n\n  height:\n    clamp(28px, 2.4vw, 45px);\n\n\n  display:flex;\n\n\n  align-items:center;\n\n\n  justify-content:center;\n\n\n  border:\n    1px solid rgba(255,255,255,.35);\n\n\n  border-radius:50%;\n\n\n  font-size:\n    clamp(12px, 1vw, 19px);\n\n\n  font-style:normal;\n\n\n  transition:\n    background .3s ease,\n    color .3s ease,\n    border-color .3s ease;\n\n}\n\n\n.tw-gallery-item:hover\n.tw-gallery-overlay i {\n\n  background:\n    var(--tw-cyan);\n\n\n  color:\n    #000;\n\n\n  border-color:\n    var(--tw-cyan);\n\n}\n\n\n\n\/* =========================================================\n   LIGHTBOX\n========================================================= *\/\n\n.tw-lightbox {\n\n  position:fixed;\n\n\n  inset:0;\n\n\n  z-index:\n    999999;\n\n\n  background:\n    rgba(0,0,0,.95);\n\n\n  display:flex;\n\n\n  align-items:center;\n\n\n  justify-content:center;\n\n\n  padding:\n    clamp(20px, 5vw, 80px);\n\n\n  opacity:0;\n\n\n  visibility:hidden;\n\n\n  pointer-events:none;\n\n\n  transition:\n    opacity .35s ease,\n    visibility .35s ease;\n\n}\n\n\n.tw-lightbox.tw-open {\n\n  opacity:1;\n\n\n  visibility:visible;\n\n\n  pointer-events:auto;\n\n}\n\n\n.tw-lightbox img {\n\n  max-width:\n    94vw;\n\n\n  max-height:\n    88vh;\n\n\n  width:auto;\n\n\n  height:auto;\n\n\n  \/*\n   * Lightbox c\u0169ng kh\u00f4ng crop.\n   *\/\n\n  object-fit:\n    contain;\n\n}\n\n\n.tw-lightbox-close {\n\n  position:absolute;\n\n\n  right:\n    clamp(18px, 3vw, 50px);\n\n\n  top:\n    clamp(18px, 2.5vw, 40px);\n\n\n  width:\n    clamp(38px, 3vw, 55px);\n\n\n  height:\n    clamp(38px, 3vw, 55px);\n\n\n  border:\n    1px solid rgba(255,255,255,.2);\n\n\n  background:\n    transparent;\n\n\n  color:\n    white;\n\n\n  font-size:\n    clamp(25px, 2vw, 38px);\n\n\n  line-height:1;\n\n\n  cursor:pointer;\n\n}\n\n\n.tw-lightbox-counter {\n\n  position:absolute;\n\n\n  left:\n    clamp(18px, 3vw, 50px);\n\n\n  bottom:\n    clamp(18px, 2.5vw, 40px);\n\n\n  color:\n    var(--tw-cyan);\n\n\n  font-size:\n    clamp(8px, .55vw, 11px);\n\n\n  letter-spacing:\n    2px;\n\n}\n\n\n\n\/* =========================================================\n   CTA\n========================================================= *\/\n\n.tw-contact {\n\n  position:relative;\n\n\n  width:100%;\n\n\n  min-height:\n    clamp(520px, 65vh, 850px);\n\n\n  display:flex;\n\n\n  align-items:center;\n\n\n  justify-content:center;\n\n\n  text-align:center;\n\n\n  overflow:hidden;\n\n}\n\n\n.tw-contact-glow {\n\n  position:absolute;\n\n\n  width:\n    clamp(350px, 55vw, 900px);\n\n\n  height:\n    clamp(350px, 55vw, 900px);\n\n\n  left:50%;\n\n  top:50%;\n\n\n  transform:\n    translate(-50%,-50%);\n\n\n  background:\n\n    radial-gradient(\n      circle,\n      rgba(0,240,255,.1),\n      transparent 68%\n    );\n\n}\n\n\n.tw-contact-content {\n\n  position:relative;\n\n  z-index:2;\n\n\n  width:\n    min(100%, 1000px);\n\n\n  padding:\n    30px;\n\n}\n\n\n.tw-contact-content\n.tw-section-label {\n\n  margin-bottom:\n    clamp(25px, 3vw, 45px);\n\n}\n\n\n.tw-contact h2 {\n\n  margin:\n    0 0 clamp(25px, 3vw, 45px);\n\n\n  font-size:\n    clamp(\n      62px,\n      9vw,\n      155px\n    );\n\n\n  line-height:\n    .78;\n\n\n  letter-spacing:\n    -.08em;\n\n\n  font-weight:\n    900;\n\n}\n\n\n.tw-contact h2 span {\n\n  color:\n    transparent;\n\n\n  -webkit-text-stroke:\n    1px\n    rgba(255,255,255,.5);\n\n}\n\n\n.tw-contact p {\n\n  color:\n    #666;\n\n\n  font-size:\n    clamp(10px, .7vw, 14px);\n\n\n  line-height:\n    1.8;\n\n\n  margin:\n    0 0 clamp(25px, 3vw, 45px);\n\n}\n\n\n.tw-contact-button {\n\n  display:inline-flex;\n\n\n  align-items:center;\n\n\n  justify-content:center;\n\n\n  gap:\n    clamp(18px, 2vw, 30px);\n\n\n  padding:\n    clamp(14px, 1.1vw, 20px)\n    clamp(20px, 1.8vw, 32px);\n\n\n  border:\n    1px solid rgba(255,255,255,.2);\n\n\n  font-size:\n    clamp(8px, .55vw, 11px);\n\n\n  letter-spacing:\n    2px;\n\n\n  font-weight:700;\n\n\n  transition:\n    all .3s ease;\n\n}\n\n\n.tw-contact-button span {\n\n  color:\n    var(--tw-cyan);\n\n\n  font-size:\n    clamp(16px, 1.2vw, 24px);\n\n}\n\n\n.tw-contact-button:hover {\n\n  background:\n    var(--tw-cyan);\n\n\n  color:\n    #000;\n\n\n  border-color:\n    var(--tw-cyan);\n\n\n  transform:\n    translateY(-4px);\n\n}\n\n\n.tw-contact-button:hover span {\n\n  color:\n    #000;\n\n}\n\n\n\n\/* =========================================================\n   FOOTER\n========================================================= *\/\n\n.tw-footer {\n\n  width:100%;\n\n\n  min-height:\n    clamp(70px, 7vw, 110px);\n\n\n  padding:\n    20px\n    clamp(20px, 5vw, 100px);\n\n\n  display:flex;\n\n\n  justify-content:space-between;\n\n\n  align-items:center;\n\n\n  gap:20px;\n\n\n  color:\n    #4b4b4b;\n\n\n  font-size:\n    clamp(7px, .5vw, 10px);\n\n\n  letter-spacing:\n    2px;\n\n\n  border-top:\n    1px solid rgba(255,255,255,.07);\n\n}\n\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media(max-width:1000px){\n\n  .tw-services-grid {\n\n    grid-template-columns:\n      repeat(2,minmax(0,1fr));\n\n  }\n\n\n  .tw-why-grid {\n\n    grid-template-columns:\n      repeat(2,minmax(0,1fr));\n\n  }\n\n}\n\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media(max-width:700px){\n\n  .tw-hero {\n\n    min-height:\n      760px;\n\n    height:\n      100svh;\n\n  }\n\n\n  .tw-hero h1 {\n\n    font-size:\n      clamp(\n        55px,\n        17vw,\n        90px\n      );\n\n  }\n\n\n  .tw-hero-content p {\n\n    max-width:\n      280px;\n\n  }\n\n\n  .tw-slime-wrapper {\n\n    width:\n      clamp(150px, 42vw, 220px);\n\n\n    height:\n      clamp(150px, 42vw, 220px);\n\n  }\n\n\n  .tw-about-grid {\n\n    grid-template-columns:\n      1fr;\n\n\n    gap:\n      clamp(45px, 10vw, 80px);\n\n  }\n\n\n  .tw-about-title h2 {\n\n    font-size:\n      clamp(\n        48px,\n        14vw,\n        82px\n      );\n\n  }\n\n\n  .tw-services-section {\n\n    width:\n      calc(100% - 20px);\n\n  }\n\n\n  .tw-heading-row {\n\n    display:block;\n\n  }\n\n\n  .tw-heading-note {\n\n    text-align:left;\n\n\n    margin-top:\n      25px;\n\n  }\n\n\n  .tw-services-grid {\n\n    grid-template-columns:\n      1fr;\n\n  }\n\n\n  .tw-why-grid {\n\n    grid-template-columns:\n      1fr;\n\n  }\n\n\n  .tw-why-card {\n\n    min-height:\n      210px;\n\n  }\n\n\n  .tw-gallery-heading {\n\n    display:block;\n\n  }\n\n\n  .tw-gallery-heading p {\n\n    text-align:left;\n\n\n    margin-top:\n      25px;\n\n  }\n\n\n  .tw-gallery-grid {\n\n    grid-template-columns:\n      repeat(2,minmax(0,1fr));\n\n  }\n\n\n  .tw-gallery-item {\n\n    aspect-ratio:\n      1 \/ 1;\n\n  }\n\n\n  .tw-contact {\n\n    min-height:\n      550px;\n\n  }\n\n\n  .tw-footer {\n\n    flex-direction:\n      column;\n\n\n    justify-content:\n      center;\n\n\n    padding:\n      30px 20px;\n\n  }\n\n}\n\n\n\n\/* =========================================================\n   SMALL PHONE\n========================================================= *\/\n\n@media(max-width:420px){\n\n  .tw-gallery-grid {\n\n    grid-template-columns:\n      1fr;\n\n  }\n\n\n  .tw-gallery-item {\n\n    aspect-ratio:\n      4 \/ 3;\n\n  }\n\n}\n\n<\/style>\n\n\n\n<!-- =========================================================\n     JAVASCRIPT\n========================================================= -->\n\n<script>\n\n(function(){\n\n  \"use strict\";\n\n\n  \/* =======================================================\n     ROOT\n  ======================================================= *\/\n\n  const root =\n    document.getElementById(\n      \"twame-about\"\n    );\n\n\n  if(!root) return;\n\n\n\n  \/* =======================================================\n     CTA\n  ======================================================= *\/\n\n  const cta =\n    root.querySelector(\n      \"#tw-cta-button\"\n    );\n\n\n  if(\n    cta &&\n    typeof TWAME_CONFIG !== \"undefined\"\n  ){\n\n    cta.href =\n      TWAME_CONFIG.ctaLink;\n\n  }\n\n\n\n  \/* =======================================================\n     BUILD GALLERY\n     \n     L\u1ea5y d\u1eef li\u1ec7u t\u1eeb TWAME_CONFIG\n     v\u00e0 t\u1ef1 t\u1ea1o 9 \u00f4.\n  ======================================================= *\/\n\n  const galleryGrid =\n    root.querySelector(\n      \"#tw-gallery-grid\"\n    );\n\n\n  const galleryData =\n    TWAME_CONFIG.gallery;\n\n\n  galleryData.forEach(\n    function(item,index){\n\n      const number =\n        String(index + 1)\n          .padStart(2,\"0\");\n\n\n      const card =\n        document.createElement(\"a\");\n\n\n      card.className =\n        \"tw-gallery-item\";\n\n\n      card.setAttribute(\n        \"data-gallery\",\n        number\n      );\n\n\n      \/*\n       * N\u1ebfu ch\u01b0a c\u00f3 \u1ea3nh\n       *\/\n\n      if(!item.image){\n\n        card.classList.add(\n          \"tw-empty\"\n        );\n\n      }\n\n\n      \/*\n       * C\u00f3 \u1ea3nh\n       *\/\n\n      if(item.image){\n\n        card.href =\n          item.image;\n\n\n        card.innerHTML = `\n\n          <img decoding=\"async\"\n            src=\"${item.image}\"\n            alt=\"TWAME Project ${number}\"\n            loading=\"lazy\"\n          >\n\n          <div class=\"tw-gallery-overlay\">\n\n            <span>\n              ${number}\n            <\/span>\n\n            <strong>\n              ${item.title}\n            <\/strong>\n\n            <i>\n              \u2197\n            <\/i>\n\n          <\/div>\n\n        `;\n\n      }\n\n\n      \/*\n       * Ch\u01b0a c\u00f3 \u1ea3nh\n       *\/\n\n      else {\n\n        card.innerHTML = `\n\n          <div class=\"tw-gallery-overlay\">\n\n            <span>\n              ${number}\n            <\/span>\n\n            <strong>\n              ${item.title}\n            <\/strong>\n\n          <\/div>\n\n        `;\n\n        card.removeAttribute(\n          \"href\"\n        );\n\n      }\n\n\n      galleryGrid.appendChild(\n        card\n      );\n\n    }\n  );\n\n\n\n  \/* =======================================================\n     SLIME \u2014 EYES FOLLOW MOUSE\n  ======================================================= *\/\n\n  const slime =\n    root.querySelector(\n      \".tw-slime\"\n    );\n\n\n  const pupils =\n    root.querySelectorAll(\n      \".tw-pupil\"\n    );\n\n\n  \/*\n   * D\u00f9ng pointermove thay v\u00ec mousemove\n   * \u0111\u1ec3 ho\u1ea1t \u0111\u1ed9ng t\u1ed1t h\u01a1n tr\u00ean nhi\u1ec1u thi\u1ebft b\u1ecb.\n   *\/\n\n  window.addEventListener(\n    \"pointermove\",\n    function(e){\n\n      if(!slime) return;\n\n\n      const rect =\n        slime.getBoundingClientRect();\n\n\n      const centerX =\n        rect.left +\n        rect.width \/ 2;\n\n\n      const centerY =\n        rect.top +\n        rect.height \/ 2;\n\n\n      const dx =\n        e.clientX -\n        centerX;\n\n\n      const dy =\n        e.clientY -\n        centerY;\n\n\n      const angle =\n        Math.atan2(\n          dy,\n          dx\n        );\n\n\n      const distance =\n        Math.min(\n          8,\n          Math.hypot(dx,dy) \/ 45\n        );\n\n\n      const x =\n        Math.cos(angle) *\n        distance;\n\n\n      const y =\n        Math.sin(angle) *\n        distance;\n\n\n      pupils.forEach(\n        function(pupil){\n\n          pupil.style.transform =\n            `translate(\n              calc(-50% + ${x}px),\n              calc(-50% + ${y}px)\n            )`;\n\n        }\n      );\n\n\n      \/*\n       * Slime h\u01a1i nghi\u00eang theo chu\u1ed9t\n       *\/\n\n      const rotateX =\n        (\n          e.clientY \/\n          window.innerHeight -\n          .5\n        ) * 5;\n\n\n      const rotateY =\n        (\n          e.clientX \/\n          window.innerWidth -\n          .5\n        ) * 7;\n\n\n      slime.style.transform =\n        `translate(\n          ${rotateY}px,\n          ${rotateX}px\n        )`;\n\n    },\n    {\n      passive:true\n    }\n  );\n\n\n\n  \/* =======================================================\n     GALLERY LIGHTBOX\n  ======================================================= *\/\n\n  const lightbox =\n    root.querySelector(\n      \"#tw-lightbox\"\n    );\n\n\n  const lightboxImage =\n    root.querySelector(\n      \"#tw-lightbox-image\"\n    );\n\n\n  const lightboxCounter =\n    root.querySelector(\n      \"#tw-lightbox-counter\"\n    );\n\n\n  const closeButton =\n    root.querySelector(\n      \".tw-lightbox-close\"\n    );\n\n\n  const galleryItems =\n    root.querySelectorAll(\n      \".tw-gallery-item:not(.tw-empty)\"\n    );\n\n\n  galleryItems.forEach(\n    function(item){\n\n      item.addEventListener(\n        \"click\",\n        function(e){\n\n          e.preventDefault();\n\n\n          const image =\n            item.getAttribute(\n              \"href\"\n            );\n\n\n          const number =\n            item.getAttribute(\n              \"data-gallery\"\n            );\n\n\n          lightboxImage.src =\n            image;\n\n\n          lightboxImage.alt =\n            \"TWAME Project \" +\n            number;\n\n\n          lightboxCounter.textContent =\n            number +\n            \" \/ \" +\n            String(\n              galleryItems.length\n            ).padStart(2,\"0\");\n\n\n          lightbox.classList.add(\n            \"tw-open\"\n          );\n\n\n          document.body.style.overflow =\n            \"hidden\";\n\n        }\n      );\n\n    }\n  );\n\n\n\n  \/* CLOSE *\/\n\n  function closeLightbox(){\n\n    lightbox.classList.remove(\n      \"tw-open\"\n    );\n\n\n    lightboxImage.src =\n      \"\";\n\n\n    document.body.style.overflow =\n      \"\";\n\n  }\n\n\n  closeButton.addEventListener(\n    \"click\",\n    closeLightbox\n  );\n\n\n  lightbox.addEventListener(\n    \"click\",\n    function(e){\n\n      if(\n        e.target ===\n        lightbox\n      ){\n\n        closeLightbox();\n\n      }\n\n    }\n  );\n\n\n  document.addEventListener(\n    \"keydown\",\n    function(e){\n\n      if(\n        e.key ===\n        \"Escape\"\n      ){\n\n        closeLightbox();\n\n      }\n\n    }\n  );\n\n\n\n  \/* =======================================================\n     WHY CARDS\n  ======================================================= *\/\n\n  const whyCards =\n    root.querySelectorAll(\n      \".tw-why-card\"\n    );\n\n\n  whyCards.forEach(\n    function(card){\n\n      card.addEventListener(\n        \"mouseenter\",\n        function(){\n\n          whyCards.forEach(\n            function(other){\n\n              other.classList.remove(\n                \"tw-active\"\n              );\n\n            }\n          );\n\n\n          card.classList.add(\n            \"tw-active\"\n          );\n\n        }\n      );\n\n    }\n  );\n\n\n\n  \/* =======================================================\n     SCROLL REVEAL\n  ======================================================= *\/\n\n  const revealElements =\n    root.querySelectorAll(\n      \".tw-about-section, \\\n       .tw-services-section, \\\n       .tw-why-section, \\\n       .tw-gallery-section, \\\n       .tw-service-card, \\\n       .tw-why-card, \\\n       .tw-gallery-item, \\\n       .tw-contact\"\n    );\n\n\n  \/*\n   * N\u1ebfu browser kh\u00f4ng h\u1ed7 tr\u1ee3 IntersectionObserver\n   * th\u00ec kh\u00f4ng \u1ea9n content.\n   *\/\n\n  if(\n    \"IntersectionObserver\"\n    in window\n  ){\n\n    revealElements.forEach(\n      function(element){\n\n        element.style.opacity =\n          \"0\";\n\n\n        element.style.transform =\n          \"translateY(35px)\";\n\n\n        element.style.transition =\n          \"opacity .8s ease, transform .8s ease\";\n\n      }\n    );\n\n\n    const observer =\n      new IntersectionObserver(\n        function(entries){\n\n          entries.forEach(\n            function(entry){\n\n              if(\n                entry.isIntersecting\n              ){\n\n                entry.target.style.opacity =\n                  \"1\";\n\n\n                entry.target.style.transform =\n                  \"translateY(0)\";\n\n\n                observer.unobserve(\n                  entry.target\n                );\n\n              }\n\n            }\n          );\n\n        },\n        {\n          threshold:\n            .1\n        }\n      );\n\n\n    revealElements.forEach(\n      function(element){\n\n        observer.observe(\n          element\n        );\n\n      }\n    );\n\n  }\n\n\n\n})();\n\n<\/script>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>T WAME AGENCY IDEAS INTO EXPERIENCES. Ch\u00fang t\u00f4i bi\u1ebfn nh\u1eefng \u00fd t\u01b0\u1edfng th\u01b0\u01a1ng hi\u1ec7u th\u00e0nh nh\u1eefng tr\u1ea3i nghi\u1ec7m \u0111\u00e1ng nh\u1edb. SCROLL TO EXPLORE 01 \u2014 WHO WE ARE WE CREATE EXPERIENCES. T WAME Agency l\u00e0 \u0111\u01a1n v\u1ecb cung c\u1ea5p gi\u1ea3i ph\u00e1p Marketing &amp; Activation, \u0111\u1ed3ng h\u00e0nh c\u00f9ng th\u01b0\u01a1ng hi\u1ec7u t\u1eeb \u00fd t\u01b0\u1edfng, thi\u1ebft k\u1ebf, s\u1ea3n [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-111","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/twame.vn\/index.php?rest_route=\/wp\/v2\/pages\/111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/twame.vn\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/twame.vn\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/twame.vn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/twame.vn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=111"}],"version-history":[{"count":8,"href":"https:\/\/twame.vn\/index.php?rest_route=\/wp\/v2\/pages\/111\/revisions"}],"predecessor-version":[{"id":438,"href":"https:\/\/twame.vn\/index.php?rest_route=\/wp\/v2\/pages\/111\/revisions\/438"}],"wp:attachment":[{"href":"https:\/\/twame.vn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}