*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  --color-primary: #006a4e;
  --color-primary-m: #006a4ecc;
  --color-secondary: #009143;
  --color-tertiary: #d9b381;
  --color-quaternary: #5c4033;
  --color-quinary: #fdc62f;
  --color-gray-xdark: #464545;
  --color-gray-dark: #6f6f6f;
  --color-gray: #9e9e9e;
  --color-gray-light: #9e9e9e;
  --color-gray-xlight: #dbe0e2;
  --color-green-xdark: #1E1F21;
  --color-green-dark: #0C8900;
  --color-green: #2BC20E;
  --color-green-light: #39FF13;
  --color-green-xlight: #9CFF00;
  --color-red-xdark: #aa0a0c;
  --color-red-dark: #b3a38;
  --color-red: #d82023;
  --color-red-light: #ff595c;
  --color-red-xlight: #f4b5b6;
  --color-darkblue:#01012b;
  --color-darkblue-light:#2f2f3a;
  --color-white-opa:#ffffff41;
  --gradient:linear-gradient(160deg, var(--color-primary) , var(--color-secondary), var(--color-tertiary));
  --gradient2:linear-gradient(180deg, var(--color-primary) , var(--color-secondary), var(--background-color));
  --gradient3:linear-gradient(180deg, var(--background-color) , var(--color-secondary), var(--color-primary));
  --background-color: #f2f2f2;
  --background-color-opa: #f2f2f241;
  --text-base: #000000;
  --text-muted: #6f6f6f;
  --text-muted-light: #dbe0e2;
  --text-light: #9e9e9e;
  --text-light-2: #d3d3d3;
  --color-light: #f0edea;
  --color-1: #d1f7ff;
  --color-2: #01c8ee;
  --color-3: #e41376;
  --color-4: #005678;
  --color-5: #01012b;
  --young-1: #f5e6cc;
  --young-2: #ffb48f;
  --young-3: #17e9e0;
  --young-4: #fccd04;
  --young-5: #a64ac9;
  --standard-width: 36rem;
  --standard-border-radius: 1.5rem;
  --standard-shadow: 5px 5px 5px var(--text-muted-light);
  --standard-border: 1px solid var(--text-muted-light);
  --font-base: "Comfortaa", cursive;
  --font-big: "Orbitron", sans-serif;
}

html[data-theme=dark] {
  --color-primary: rgb(36, 38, 43);
  --color-primary-m: rgba(36, 38, 43, 0.65);
  --color-secondary: rgb(124, 185, 8);
  --color-secondary-m: rgba(123, 185, 8, 0.5);
  --color-tertiary: rgb(38, 52, 65);
  --color-tertiary-m: hsla(183, 34%, 38%, 0.65);
  --color-quaternary: hsl(220, 10%, 28%);
  --color-quaternary-m: hsla(220, 10%, 28%, 0.65);
  --color-quinary: white;
  --color-quinary-m: rgba(255, 255, 255, 0.5);
  --background-color: #000000;
  --text-base: white;
  --background-color-opa: #00000041;
}

html.light {
  --color-primary: #006a4e;
  --color-primary-m: #01251c;
  --color-secondary: #009143;
  --color-tertiary: #d9b381;
  --color-quaternary: #5c4033;
  --color-quinary: #fdc62f;
  --background-color: #f2f2f2;
  --background-color-opa: #f2f2f241;
}

html.dark {
  --background-color: #2d2d2d;
  --text-base: white;
  --text-muted-light: #9f8189;
  --background-color-opa: #2d2d2d41;
}

html.milktea {
  --background-color: #f9eae5;
  --text-base: #966e69;
  --text-muted: #9c9393;
  --color-primary: #ffe2ca;
  --color-secondary: #fed1b5;
  --color-tertiary: #ffbda6;
  --color-quaternary: #bc6c64;
  --color-quinary: #683c3c;
  --background-color-opa: #f9eae541;
}

html.unicorn_glow {
  --background-color: #ffffff;
  --text-base: #b58ebc;
  --text-muted: #9c9393;
  --color-primary: #ecf8f7;
  --color-secondary: #d1edea;
  --color-tertiary: #f2d7e8;
  --color-quaternary: #fae7eb;
  --color-quinary: #d8bbd3;
  --background-color-opa: #ffffff41;
}

html.earthy_vibes {
  --background-color: #ffffff;
  --text-base: #5e5946;
  --text-muted: #9c9393;
  --color-primary: #e7e5d9;
  --color-secondary: #f0ded0;
  --color-tertiary: #d9bfb1;
  --color-quaternary: #c3c1ab;
  --color-quinary: #ae887b;
  --background-color-opa: #ffffff41;
}

html.sunset_boulevard {
  --background-color: #ffffff;
  --text-base: #966e69;
  --text-muted: #9c9393;
  --color-primary: #f9eae5;
  --color-secondary: #ffe2ca;
  --color-tertiary: #ffbda6;
  --color-quaternary: #bc6c64;
  --color-quinary: #fed1b5;
  --background-color-opa: #ffffff41;
}

html.hipster_fresh {
  --background-color: #ffffff;
  --text-base: #e7926c;
  --text-muted: #9c9393;
  --color-primary: #f9e5d7;
  --color-secondary: #c7d7ca;
  --color-tertiary: #eec1a4;
  --color-quaternary: #e5b36a;
  --color-quinary: #79a6a3;
  --background-color-opa: #ffffff41;
}

html.sweet_summer {
  --background-color: #ffffff;
  --text-base: #3c5556;
  --text-muted: #9c9393;
  --color-primary: #f6efe7;
  --color-secondary: #e9f1ef;
  --color-tertiary: #f5d4c3;
  --color-quaternary: #e09789;
  --color-quinary: #c8dbd7;
  --background-color-opa: #ffffff41;
}

html.orchid_bloom {
  --background-color: #ffffff;
  --text-base: #645068;
  --text-muted: #9c9393;
  --color-primary: #ffdede;
  --color-secondary: #ffccb6;
  --color-tertiary: #fac9de;
  --color-quaternary: #e8bae3;
  --color-quinary: #f48a71;
  --background-color-opa: #ffffff41;
}

html.sand_storm {
  --background-color: #ffffff;
  --text-base: #877978;
  --text-muted: #9c9393;
  --color-primary: #f6efe9;
  --color-secondary: #dbcfd3;
  --color-tertiary: #ddbaa7;
  --color-quaternary: #c2b8bd;
  --color-quinary: #c38a77;
  --background-color-opa: #ffffff41;
}

html.peach_blossom {
  --background-color: #ffffff;
  --text-base: #c8a18f;
  --text-muted: #9c9393;
  --color-primary: #ffeada;
  --color-secondary: #fdeac3;
  --color-tertiary: #f4cbba;
  --color-quaternary: #ffd5a4;
  --color-quinary: #ffb5a4;
  --background-color-opa: #ffffff41;
}

html.mint_dream {
  --background-color: #ffffff;
  --text-base: #9c9393;
  --text-muted: #9c9393;
  --color-primary: #eef9fa;
  --color-secondary: #defdef;
  --color-tertiary: #fadecf;
  --color-quaternary: #c8f1e8;
  --color-quinary: #ffe8bd;
  --background-color-opa: #ffffff41;
}

html.beach_day {
  --background-color: #ffffff;
  --text-base: #5b96a9;
  --text-muted: #9c9393;
  --color-primary: #f8f3e8;
  --color-secondary: #f8dbb8;
  --color-tertiary: #cde8e6;
  --color-quaternary: #e6f8f6;
  --color-quinary: #f6c7b3;
  --background-color-opa: #ffffff41;
}

html.spring_kiss {
  --background-color: #ffffff;
  --text-base: #c4b7bb;
  --text-muted: #9c9393;
  --color-primary: #fff5ed;
  --color-secondary: #f0f4bf;
  --color-tertiary: #fae0d8;
  --color-quaternary: #f1deee;
  --color-quinary: #dfe1be;
  --background-color-opa: #ffffff41;
}

html.soft_linen {
  --background-color: #ffffff;
  --text-base: #c4aea3;
  --text-muted: #9c9393;
  --color-primary: #f8f8f8;
  --color-secondary: #fbf3f0;
  --color-tertiary: #f2e6da;
  --color-quaternary: #e8e4e1;
  --color-quinary: #d5cfbf;
  --background-color-opa: #ffffff41;
}

html.summer_sage {
  --background-color: #ffffff;
  --text-base: #7c826b;
  --text-muted: #9c9393;
  --color-primary: #f1f0e2;
  --color-secondary: #dee1c6;
  --color-tertiary: #ede6c4;
  --color-quaternary: #c2cbb2;
  --color-quinary: #ebd1ae;
  --background-color-opa: #ffffff41;
}

html.golden_raisin {
  --background-color: #ffffff;
  --text-base: #491f40;
  --text-muted: #9c9393;
  --color-primary: #dbccc6;
  --color-secondary: #e0c188;
  --color-tertiary: #dba79c;
  --color-quaternary: #d6866b;
  --color-quinary: #ce8936;
  --background-color-opa: #ffffff41;
}

html.dreamland {
  --background-color: #ffffff;
  --text-base: #8897aa;
  --text-muted: #9c9393;
  --color-primary: #f4ede5;
  --color-secondary: #edecf2;
  --color-tertiary: #d8e2eb;
  --color-quaternary: #d1e2ee;
  --color-quinary: #c8c7d7;
  --background-color-opa: #ffffff41;
}

html.ruby_chic {
  --background-color: #ffffff;
  --text-base: #003744;
  --text-muted: #9c9393;
  --color-primary: #ffeee3;
  --color-secondary: #ffc6bf;
  --color-tertiary: #fe8982;
  --color-quaternary: #b72552;
  --color-quinary: #7f1330;
  --background-color-opa: #ffffff41;
}

html.plum_passion {
  --background-color: #ffffff;
  --text-base: #4c3949;
  --text-muted: #9c9393;
  --color-primary: #eae0df;
  --color-secondary: #f2dedf;
  --color-tertiary: #c8a19c;
  --color-quaternary: #b2abb3;
  --color-quinary: #754b61;
  --background-color-opa: #ffffff41;
}

html.mid_century_mod {
  --background-color: #ffffff;
  --text-base: #2d525b;
  --text-muted: #9c9393;
  --color-primary: #f5edcc;
  --color-secondary: #f9e2da;
  --color-tertiary: #f9905b;
  --color-quaternary: #8b9f9f;
  --color-quinary: #d8bc48;
  --background-color-opa: #ffffff41;
}

html.emerald_sands {
  --background-color: #ffffff;
  --text-base: #507882;
  --text-muted: #9c9393;
  --color-primary: #f5fbfb;
  --color-secondary: #f0e9df;
  --color-tertiary: #d9e2de;
  --color-quaternary: #e1eff0;
  --color-quinary: #edd7c8;
  --background-color-opa: #ffffff41;
}

html.the_matrix {
  --background-color: #000000;
  --text-base: #1afe49;
  --text-muted: #9c9393;
  --color-primary: #ffffff;
  --color-secondary: #8386f5;
  --color-tertiary: #3d43b4;
  --color-quaternary: #041348;
  --color-quinary: #083e12;
  --text-muted-light: #3d43b4;
  --background-color-opa: #00000041;
}

html.mars {
  --background-color: #000000;
  --text-base: #f887ff;
  --text-muted: #9c9393;
  --color-primary: #ffffff;
  --color-secondary: #de004e;
  --color-tertiary: #860029;
  --color-quaternary: #321450;
  --color-quinary: #29132e;
  --text-muted-light: #860029;
  --background-color-opa: #00000041;
}

html.solar_city {
  --background-color: #000000;
  --text-base: #ffe96d;
  --text-muted: #9c9393;
  --color-primary: #ffffff;
  --color-secondary: #e96d5e;
  --color-tertiary: #ff9760;
  --color-quaternary: #6a7e6a;
  --color-quinary: #393f5f;
  --text-muted-light: #ff9760;
  --background-color-opa: #00000041;
  --background-color-opa: #00000041;
}

html.neptune {
  --background-color: #120458;
  --text-base: #fe75fe;
  --text-muted: #9c9393;
  --color-primary: #ffffff;
  --color-secondary: #ff00a0;
  --color-tertiary: #7a04eb;
  --color-quaternary: #ff124f;
  --color-quinary: #120458;
  --text-muted-light: #7a04eb;
  --background-color-opa: #00000041;
}

html.artificial_intelligence {
  --background-color: #000000;
  --text-base: #73fffe;
  --text-muted: #9c9393;
  --color-primary: #fbf665;
  --color-secondary: #6287f8;
  --color-tertiary: #383e65;
  --color-quaternary: #fbf665;
  --color-quinary: #ff6e27;
  --text-muted-light: #383e65;
  --background-color-opa: #00000041;
}

html.icon_world {
  --background-color: #01012b;
  --text-base: #defe47;
  --text-muted: #9c9393;
  --color-primary: #ffffff;
  --color-secondary: #fe00fe;
  --color-tertiary: #0016ee;
  --color-quaternary: #00b3fe;
  --color-quinary: #7700a6;
  --text-muted-light: #7700a6;
  --background-color-opa: #00000041;
}

html.uranus {
  --background-color: #092047;
  --text-base: #b7c1de;
  --text-muted: #9c9393;
  --color-primary: #ffffff;
  --color-secondary: #63345e;
  --color-tertiary: #0b468c;
  --color-quaternary: #ac61b9;
  --color-quinary: #092047;
  --text-muted-light: #0b468c;
  --background-color-opa: #00000041;
}

html.shinning_shell {
  --background-color: #000000;
  --text-base: #c4ffff;
  --text-muted: #9c9393;
  --color-primary: #ffffff;
  --color-secondary: #08deea;
  --color-tertiary: #fd8090;
  --color-quaternary: #af43be;
  --color-quinary: #1261d1;
  --text-muted-light: #fd8090;
  --background-color-opa: #00000041;
}

html.ufo {
  --background-color: #222035;
  --text-base: #a0ffe3;
  --text-muted: #9c9393;
  --color-primary: #ffffff;
  --color-secondary: #65dc98;
  --color-tertiary: #8d8980;
  --color-quaternary: #575267;
  --color-quinary: #222035;
  --text-muted-light: #8d8980;
  --background-color-opa: #00000041;
}

html.cyberpunk {
  --background-color: #01012b;
  --text-base: #05d9e8;
  --text-muted: #9c9393;
  --color-primary: #ffffff;
  --color-secondary: #005678;
  --color-tertiary: #ff2a6a;
  --color-quaternary: #d1f7ff;
  --color-quinary: #01012b;
  --text-muted-light: #ff2a6a;
  --background-color-opa: #00000041;
}

html.abandoned {
  --background-color: #000000;
  --text-base: #89e3f6;
  --text-muted: #9c9393;
  --color-primary: #ffffff;
  --color-secondary: #8f704b;
  --color-tertiary: #daae6d;
  --color-quaternary: #4d9e9b;
  --color-quinary: #44786a;
  --text-muted-light: #daae6d;
  --background-color-opa: #00000041;
}

html.saturn {
  --background-color: #351409;
  --text-base: #fff69f;
  --text-muted: #9c9393;
  --color-primary: #ffffff;
  --color-secondary: #fdd870;
  --color-tertiary: #d0902f;
  --color-quaternary: #a15501;
  --color-quinary: #351409;
  --text-muted-light: #d0902f;
  --background-color-opa: #00000041;
}

html.jupyter {
  --background-color: #2f404d;
  --text-base: #85ebd9;
  --text-muted: #9c9393;
  --color-primary: #ffffff;
  --color-secondary: #3d898d;
  --color-tertiary: #b0acb0;
  --color-quaternary: #e2dddf;
  --color-quinary: #2f404d;
  --text-muted-light: #b0acb0;
  --background-color-opa: #00000041;
}

html.venus {
  --background-color: #003062;
  --text-base: #c6fbff;
  --text-muted: #9c9393;
  --color-primary: #ffccdc;
  --color-secondary: #ff184c;
  --color-tertiary: #ff577d;
  --color-quaternary: #0a9cf5;
  --color-quinary: #003062;
  --text-muted-light: #ff577d;
  --background-color-opa: #00000041;
}

:root {
  font-size: 62.5%;
}

html,
body {
  background-color: var(--background-color);
  color: var(--text-base);
  line-height: 1.9;
  font-family: var(--font-base);
}

ul,
li {
  list-style-type: none;
  padding: 0;
}

a {
  text-decoration: none;
  color: var(--text-base);
}

.row_hidden {
  display: none !important;
}

.scale_0 {
  scale: 0;
}

.checkbox-1 input {
  display: none;
  visibility: hidden;
}

.checkbox-1 label {
  position: relative;
  padding-left: 2em;
  padding-right: 1em;
  line-height: 2;
  cursor: pointer;
  display: inline-flex;
}

.checkbox-1 label:before {
  box-sizing: border-box;
  content: " ";
  position: absolute;
  top: 0.3em;
  left: 0;
  display: block;
  width: 1.4em;
  height: 1.4em;
  border: 2px solid #9098A9;
  border-radius: 6px;
  z-index: 0;
}

.checkbox-1 input:checked + label {
  padding-left: 1em;
  color: var(--color-quaternary);
  z-index: 1;
}

.checkbox-1 input:checked + label:before {
  top: 0;
  width: 100%;
  height: 2em;
  z-index: -1;
  border: 2px solid var(--color-secondary);
  background: var(--color-tertiary);
  border-radius: 6px;
}

.checkbox-1 label,
.checkbox-1 label::before {
  transition: 0.25s all ease;
}

.checkbox-wrapper-31:hover .check {
  stroke-dashoffset: 0;
}

.checkbox-wrapper-31 {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
}

.checkbox-wrapper-31 .background {
  fill: #ccc;
  transition: ease all 0.6s;
}

.checkbox-wrapper-31 .stroke {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 2px;
  stroke-dashoffset: 100;
  stroke-dasharray: 100;
  transition: ease all 0.6s;
}

.checkbox-wrapper-31 .check {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
  stroke-dashoffset: 22;
  stroke-dasharray: 22;
  transition: ease all 0.6s;
}

.checkbox-wrapper-31 input[type=checkbox] {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  margin: 0;
  opacity: 0;
  -appearance: none;
}

.checkbox-wrapper-31 input[type=checkbox]:hover {
  cursor: pointer;
}

.checkbox-wrapper-31 input[type=checkbox]:checked + svg .background {
  fill: var(--color-primary);
}

.checkbox-wrapper-31 input[type=checkbox]:checked + svg .stroke {
  stroke-dashoffset: 0;
}

.checkbox-wrapper-31 input[type=checkbox]:checked + svg .check {
  stroke-dashoffset: 0;
}

@keyframes ripple {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
@keyframes stamping {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.5;
    transform-origin: 50% 50%;
    transform: rotate(-2deg) scale(5);
    transition: all 0.3s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  100% {
    opacity: 1;
    transform: rotate(-15deg) scale(1);
  }
}
.loader {
  opacity: 0;
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 100;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  border-radius: 1rem;
  height: 15rem;
  width: 15rem;
}
.loader.pos {
  top: -5% !important;
  left: 95% !important;
  height: 5rem;
  width: 5rem;
}
.loader.htmx-request {
  opacity: 1;
  display: block;
}

.voucherGlow {
  border: none;
  outline: none;
  position: relative;
  z-index: 0;
}

.voucherGlow:before {
  content: "";
  background: linear-gradient(45deg, var(--color-primary), var(--color-secondary), var(--color-tertiary), var(--color-quinary), var(--color-tertiary), var(--color-secondary), var(--color-primary));
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}

.voucherGlow:before {
  opacity: 1;
}

.voucherGlow:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--background-color);
  left: 0;
  top: 0;
  border-radius: 10px;
}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}
.checkInGlow {
  border: none;
  outline: none;
  position: relative;
  z-index: 0;
}

.checkInGlow:before {
  content: "";
  background: linear-gradient(45deg, var(--color-primary), var(--color-secondary), var(--color-tertiary), var(--color-quinary), var(--color-tertiary), var(--color-secondary), var(--color-primary));
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 10s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}

.checkInGlow:before {
  opacity: 1;
}

.checkInGlow:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: var(--gradient);
  left: 0;
  top: 0;
  border-radius: 10px;
}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}
@font-face {
  font-family: prada;
  src: url(../font/engry.otf);
}
.macro-section {
  padding: calc(0.5rem + 1vw) calc(1rem + 1vw) 0 calc(1rem + 1vw);
  position: fixed;
  top: calc(4.5rem + 0.2vw);
  left: calc(1rem + 0.2vw);
  z-index: 10 !important;
  max-height: 80vh;
  overflow-y: scroll;
  scrollbar-color: var(--color-white-opa) var(--color-white-opa);
  scrollbar-width: thin;
  border-radius: 2.5rem;
}
@media screen and (max-width: 600px) {
  .macro-section {
    left: calc(0.5rem + 0.2vw);
  }
}
.macro-section.up {
  border-top: 2px solid var(--color-primary-m);
}
.macro-section.down {
  border-bottom: 2px solid var(--color-primary-m);
}

.macro-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: calc(1.2rem + 0.3vw);
  gap: 1.5rem;
}

.category {
  padding: 1rem;
  border: var(--standard-border);
  border-radius: 2.5rem;
  box-shadow: var(--standard-shadow);
  cursor: pointer;
  border-radius: 1.5rem;
  background-color: var(--background-color);
  z-index: 10 !important;
  margin-bottom: 1rem;
}
@media screen and (max-width: 600px) {
  .category {
    padding: 0.5rem;
  }
}
.category img {
  filter: brightness(0) saturate(100%) invert(44%) sepia(0%) saturate(0%) hue-rotate(165deg) brightness(96%) contrast(86%);
}
.category.active {
  border: 2px solid var(--color-primary);
}
.category.active img {
  transform: scale(1.3);
}

.owl-stage-outer {
  position: relative;
}

.owl-prev {
  position: absolute;
  top: -2rem;
  left: -2rem;
}
.owl-prev span {
  font-size: 5rem;
  color: var(--color-gray-light);
}

.owl-next {
  position: absolute;
  top: -2rem;
  right: -2rem;
}
.owl-next span {
  font-size: 5rem;
  color: var(--color-gray-light);
}

.macro__up {
  font-size: large;
  color: var(--color-primary);
  position: fixed;
  top: calc(4rem + 0.2vw);
  left: calc(4rem + 0.2vw);
}
.macro__down {
  font-size: large;
  color: var(--color-primary);
  position: fixed;
  top: 85vh;
  left: calc(4rem + 0.2vw);
}

.footer__section {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0;
  z-index: 10 !important;
  width: 100%;
}

.footer__container {
  background-image: var(--gradient);
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 40rem;
  padding: calc(1.3rem + 0.2vw) calc(2rem + 0.2vw);
  margin: calc(0.2rem + 0.2vw) calc(2rem + 0.2vw);
  border-radius: 3rem;
}
.footer__container--item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.footer__container--item.active {
  background-color: var(--color-secondary);
  border-radius: 50%;
}
.footer__container--item img {
  height: 4rem;
  width: 4rem;
  padding: 1rem;
  filter: invert(100%) sepia(0%) saturate(7454%) hue-rotate(89deg) brightness(123%) contrast(99%);
}
.footer__container--item img.home {
  filter: none;
}
.footer__container--item:hover {
  border-radius: 50%;
  background-color: var(--color-secondary);
}
.footer__container--cart_qty {
  position: absolute;
  background-color: var(--color-quaternary);
  color: white;
  border-radius: 50%;
  padding: 0.5rem;
  top: 0;
  left: calc(2.5rem + 0.2vw);
  font-size: calc(1.2rem + 0.3vw);
  height: 2.5rem;
  width: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.footer__container--cart_qty > div {
  margin-top: 0.25rem;
}

.index-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 0 calc(1.5rem + 1vw);
  margin-bottom: 12rem;
  margin-top: 1rem;
}
@media screen and (min-width: 800px) {
  .index-section {
    margin-left: calc(8rem + 0.2vw);
  }
}

.index-container {
  font-size: calc(1.5rem + 0.3vw);
  z-index: 0;
  margin-bottom: calc(10rem + 0.2vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
}
@media screen and (min-width: 800px) {
  .index-container {
    display: grid;
    grid-template-columns: [container-start] repeat(2, [col-start] minmax(min-content, 1fr) [col-end]) [container-end];
    grid-auto-rows: min-content;
    gap: 1.5rem;
    padding: calc(1.2rem + 0.2vw);
    width: 100%;
  }
}
@media screen and (min-width: 1300px) {
  .index-container {
    width: 100%;
    display: grid;
    grid-template-columns: [container-start] repeat(3, [col-start] minmax(min-content, 1fr) [col-end]) [container-end];
    grid-auto-rows: min-content;
    gap: 1.5rem;
    padding: calc(1.2rem + 0.2vw);
  }
}

.index {
  position: relative;
}
.index__logo {
  height: calc(2rem + 0.2vw);
  margin-top: calc(1rem + 0.2vw);
}

#btnAdd {
  position: fixed;
  bottom: calc(8rem + 0.2vw);
  z-index: 1;
  font-size: fint-size(font-size-small);
  margin: auto;
}
#btnAdd img {
  height: 3rem;
  width: 3rem;
}

.item_nav {
  position: sticky;
  top: 0;
  z-index: 10 !important;
  width: 100%;
}
.item_nav__container {
  padding: calc(0.5rem + 0.2vw) calc(1.5rem + 0.2vw) 0 calc(1.5rem + 0.2vw);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.item_nav__container--back {
  font-size: calc(1.5rem + 0.3vw);
  cursor: pointer;
}
.item_nav__container--nav {
  font-size: calc(1.5rem + 0.3vw);
}

.item_view {
  padding: 1.5rem;
  border: var(--standard-border);
  border-radius: 2.5rem;
  box-shadow: var(--standard-shadow);
  cursor: pointer;
  margin: 0 auto calc(1.5rem + 1vw) auto;
  padding: 0 calc(1.5rem + 1vw) calc(1.5rem + 1vw) calc(1.5rem + 1vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 40rem;
  background-color: var(--background-color);
  cursor: auto;
}
@media screen and (max-width: 400px) {
  .item_view {
    margin: 0 calc(1.5rem + 1vw) auto calc(1.5rem + 1vw);
  }
}
.item_view__background {
  height: 100vh;
  margin: 0;
  padding-top: calc(1.5rem + 0.2vw);
}
.item_view__image {
  height: 30rem;
  width: 30rem;
  margin: 1rem;
  border-radius: 2.5rem;
  border: 1px solid var(--text-muted-light);
  object-fit: contain;
}
.item_view__details {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.item_view__details--code {
  font-size: calc(1.5rem + 0.3vw);
  font-weight: 700;
  font-family: "Times New Roman", serif;
  letter-spacing: 0.2rem;
}
.item_view__details--image {
  height: 3rem;
  width: 3rem;
}
.item_view__details--imageContainer {
  position: relative;
}
.item_view__details--imageContainer:hover .item_view__details--tooltip {
  visibility: visible;
  opacity: 1;
}
.item_view__details--tooltip {
  visibility: hidden;
  width: max-content;
  background-color: var(--color-primary);
  color: #fff;
  text-align: center;
  padding: calc(0.2rem + 0.2vw);
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}
.item_view__details--tooltip:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--color-primary) transparent transparent transparent;
}
.item_view__details--time {
  font-size: calc(1.2rem + 0.3vw);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: calc(0.5rem + 0.1vw);
}
.item_view__details--time img {
  height: calc(1rem + 0.5vw);
  width: calc(1rem + 0.5vw);
}
.item_view__name {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: calc(0.5rem + 0.1vw);
}
.item_view__name--name {
  font-size: calc(1.5rem + 0.3vw);
  font-weight: 700;
}
.item_view__name--chn_name {
  font-size: calc(1.5rem + 0.3vw);
}
.item_view__description {
  color: var(--text-muted);
  font-size: calc(1.2rem + 0.3vw);
  width: 100%;
}
.item_view__description--text {
  text-align: left;
}
.item_view__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.item_view__cart {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.item_view__cart--price {
  font-size: calc(1.2rem + 0.3vw);
}
.item_view__cart--add {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: calc(1.5rem + 0.1vw);
  background-color: var(--color-secondary);
  box-shadow: var(--standard-shadow);
  border-radius: 1.5rem;
}
.item_view__cart--plus {
  background-color: var(--color-primary);
  height: calc(3.6rem + 0.2vw);
  width: calc(3.6rem + 0.2vw);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  cursor: pointer;
}
.item_view__cart--plus img {
  height: calc(3.5rem + 0.2vw);
  width: calc(3.5rem + 0.2vw);
  padding: calc(1.2rem + 0.2vw);
  filter: brightness(0) invert(1);
}
.item_view__cart--minus {
  background-color: var(--color-primary);
  height: calc(3.6rem + 0.2vw);
  width: calc(3.6rem + 0.2vw);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  cursor: pointer;
}
.item_view__cart--minus img {
  height: calc(3.5rem + 0.2vw);
  width: calc(3.5rem + 0.2vw);
  padding: calc(1.2rem + 0.2vw);
  filter: brightness(0) invert(1);
}
.item_view__cart--value {
  font-size: calc(1.5rem + 0.3vw);
}
.item_view__submit {
  padding: 1.5rem;
  border: var(--standard-border);
  border-radius: 2.5rem;
  box-shadow: var(--standard-shadow);
  cursor: pointer;
  width: 100%;
  background-color: var(--color-primary);
  color: white;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: calc(1.5rem + 0.1vw);
  border-radius: 1.5rem;
}
.item_view__submit:hover {
  background-color: var(--color-quaternary);
}
.item_view__submit--text {
  font-size: calc(1.2rem + 0.3vw);
}
.item_view__submit img {
  filter: invert(100%) sepia(0%) saturate(7454%) hue-rotate(89deg) brightness(123%) contrast(99%);
  height: 3rem;
  width: 3rem;
}
.item_view__back {
  padding: 1.5rem;
  border: var(--standard-border);
  border-radius: 2.5rem;
  box-shadow: var(--standard-shadow);
  cursor: pointer;
  width: 100%;
  margin-top: 1.5rem;
  text-align: center;
  font-size: calc(1.2rem + 0.3vw);
  color: var(--color-gray-dark);
  border-radius: 1.5rem;
}
.item_view__back:hover {
  background-color: var(--color-gray-light);
}
.item_view__options {
  width: 100%;
}
.item_view__options--container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: flex-start;
  gap: 1.5rem;
}
.item_view__option {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: flex-start;
  gap: 0.5rem;
}
.item_view__option--name {
  padding: 0.5rem;
  border: var(--standard-border);
  border-radius: 2.5rem;
  box-shadow: var(--standard-shadow);
  cursor: pointer;
  text-align: center;
  font-size: calc(1.2rem + 0.3vw);
  border-radius: 1.5rem;
  min-width: 40%;
  border-bottom-right-radius: 0;
}
.item_view__option--name.active {
  background-color: var(--color-tertiary);
  font-size: calc(1.2rem + 0.3vw);
}
.item_view__option--values {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  padding: calc(0.5rem + 0.1vw);
  gap: 0.5rem;
  padding: 0.5rem;
  border: var(--standard-border);
  border-radius: 2.5rem;
  box-shadow: var(--standard-shadow);
  cursor: pointer;
}
.item_view__option--value {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: 40rem;
}
.item_view__option--value_input {
  height: 2rem;
  width: 2rem;
  accent-color: var(--color-primary);
}
.item_view__option--value_label {
  font-size: calc(1.2rem + 0.3vw);
}
.item_view__option--value_label.bold {
  font-weight: 700;
}
.item_view__add_ons {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.item_view__add_ons--title {
  padding: 0.5rem;
  border: var(--standard-border);
  border-radius: 2.5rem;
  box-shadow: var(--standard-shadow);
  cursor: pointer;
  text-align: center;
  font-size: calc(1.2rem + 0.3vw);
  border-radius: 1.5rem;
  min-width: 40%;
  border-bottom-right-radius: 0;
}
.item_view__add_ons--container {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: flex-start;
  gap: 1rem;
  padding: calc(0.5rem + 0.1vw);
}
.item_view__add_on {
  font-size: calc(1.2rem + 0.3vw);
}
.item_view__remark {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: flex-end;
  width: 100%;
  padding: calc(0.5rem + 0.1vw);
}
.item_view__remark--container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: 0.5rem;
  border: var(--standard-border);
  border-radius: 2.5rem;
  box-shadow: var(--standard-shadow);
  cursor: pointer;
  text-align: center;
  font-size: calc(1.2rem + 0.3vw);
  border-radius: 1.5rem;
  min-width: 40%;
  border-bottom-left-radius: 0;
  background-color: var(--color-tertiary);
}
.item_view__remark--title {
  font-size: calc(1.2rem + 0.3vw);
  width: 100%;
}
.item_view__remark--textarea {
  border-radius: 1.5rem;
  border: 1px solid var(--color-secondary);
}

.item {
  padding: 0.5rem;
  border: var(--standard-border);
  border-radius: 2.5rem;
  box-shadow: var(--standard-shadow);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: calc(1.2rem + 0.2vw) calc(2.5rem + 0.2vw);
  position: relative;
  cursor: pointer;
  width: calc(36rem + 0.2vw);
  z-index: 0;
}
@media screen and (max-width: 600px) {
  .item {
    width: calc(30rem + 0.2vw);
    margin-left: calc(7rem + 0.2vw);
    padding: calc(0.8rem + 0.2vw) calc(1.2rem + 0.2vw);
  }
}
.item__code {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  gap: 1rem;
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  z-index: 5;
  font-weight: 700;
  background-color: var(--color-tertiary);
  text-transform: uppercase;
  font-size: calc(1.5rem + 0.3vw);
}
.item__code--value {
  padding-left: 0.5rem;
}
.item__code--image {
  width: 2rem;
  height: 2rem;
}
.item__image {
  position: absolute;
  top: 1.8rem;
  left: 2.5rem;
  height: 8rem;
  width: 8rem;
  z-index: 3;
  object-fit: contain;
  border-radius: 1.5rem;
}
@media screen and (max-width: 600px) {
  .item__image {
    top: 1.5rem;
    left: 1rem;
  }
}
.item__details {
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: flex-end;
  margin: 0 0 0 auto;
  width: 100%;
}
.item__details--description {
  font-size: calc(1.2rem + 0.3vw);
  color: var(--color-gray);
}
.item__details--name {
  width: 70%;
  text-align: end;
  text-transform: uppercase;
  font-weight: 700;
}
.item__details--chn_name {
  font-size: calc(1.5rem + 0.3vw);
}
.item__details--price {
  font-size: calc(1.2rem + 0.3vw);
}

#scanner {
  padding: calc(1.2rem + 0.2vw);
  border: var(--standard-border);
  border-radius: 2.5rem;
  box-shadow: var(--standard-shadow);
  cursor: pointer;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(4, [col-start] 1fr [col-end]);
  grid-template-rows: repeat(6, [row-start] min-content [row-end]);
  cursor: auto;
  font-size: calc(1.2rem + 0.3vw);
  margin: auto;
  margin-top: 1.5rem;
}
@media screen and (min-width: 800px) {
  #scanner {
    width: calc(80rem + 0.2vw);
  }
}
#scanner__title {
  grid-column: col-start 1/col-end 4;
  grid-row: row-start 1/row-end 1;
  align-self: center;
  justify-self: center;
  font-size: calc(1.5rem + 0.3vw);
}
#scanner__buttons {
  grid-column: col-start 1/col-end 4;
  grid-row: row-start 4/row-end 4;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 1rem;
}
#scanner__buttons--start {
  padding: calc(0.8rem + 0.2vw);
  border: var(--standard-border);
  border-radius: 2.5rem;
  box-shadow: var(--standard-shadow);
  cursor: pointer;
  width: calc(30rem + 0.2vw);
  background-color: var(--color-primary);
}
#scanner__buttons--start:hover {
  color: white;
  background-color: var(--color-quaternary);
}
#scanner__buttons--stop {
  padding: calc(0.8rem + 0.2vw);
  border: var(--standard-border);
  border-radius: 2.5rem;
  box-shadow: var(--standard-shadow);
  cursor: pointer;
  width: calc(30rem + 0.2vw);
}
#scanner__cameras {
  grid-column: col-start 1/col-end 3;
  grid-row: row-start 3/row-end 3;
  align-self: center;
  justify-self: center;
  padding: calc(1rem + 0.2vw);
  border: var(--color-gray) 1px solid;
  border-radius: 1.5rem;
  width: 100%;
  background-color: var(--color-tertiary);
}
#scanner__cameras:hover {
  border: var(--color-primary) 1px solid;
}
#scanner__flash {
  grid-column: col-start 4/col-end 4;
  grid-row: row-start 3/row-end 3;
  align-self: center;
  justify-self: center;
  padding: calc(0.8rem + 0.2vw);
  border: var(--standard-border);
  border-radius: 2.5rem;
  box-shadow: var(--standard-shadow);
  cursor: pointer;
  width: 100%;
}
#scanner__container {
  width: 100%;
  grid-column: col-start 1/col-end 4;
  grid-row: row-start 2/row-end 2;
  align-self: center;
  justify-self: center;
}
#scanner__video {
  width: 100%;
}
#scanner__qr {
  grid-column: col-start 1/col-end 4;
  grid-row: row-start 5/row-end 5;
  align-self: center;
  justify-self: center;
  text-align: center;
}
#scanner__file {
  grid-column: col-start 1/col-end 4;
  grid-row: row-start 6/row-end 6;
  align-self: start;
  justify-self: flex-start;
  border: 1px solid var(--color-gray);
  width: 100%;
  padding: calc(1.2rem + 0.2vw);
  border-radius: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: var(--color-secondary) url("/static/image/background/pink_2.webp") no-repeat fixed center;
  background-size: cover;
}
@media screen and (min-width: 800px) {
  .main {
    background: var(--color-secondary) url("/static/image/background/pink_1.jpg") no-repeat fixed center;
    background-size: cover;
  }
}
.main__logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 40%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  gap: 1.5rem;
}
.main__logos--logo {
  height: 15rem;
  width: 15rem;
}
.main__logos--word {
  -webkit-filter: invert(30%); /* Safari/Chrome */
  filter: invert(30%);
}
.main__container {
  padding: calc(1.2rem + 0.2vw) calc(2.5rem + 0.2vw) calc(2.5rem + 0.2vw) calc(2.5rem + 0.2vw);
  width: calc(36rem + 0.2vw);
  border-radius: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(1.5rem + 0.3vw);
  gap: 2rem;
  position: fixed;
  bottom: 8rem;
}
.main__container--button {
  padding: 1.2rem;
  border: var(--standard-border);
  border-radius: 2.5rem;
  box-shadow: var(--standard-shadow);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  background-color: white;
  gap: 1.5rem;
}
.main__container--image {
  height: 4.5rem;
  width: 4.5rem;
}
.main__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 5rem;
  position: fixed;
  bottom: 3rem;
}
.main__footer--text {
  font-size: calc(1rem + 0.3vw);
}

.take_away {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: var(--gradient);
  height: 100vh;
}
.take_away__container {
  width: calc(36rem + 0.2vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: calc(2.5rem + 0.2vw);
  border: var(--standard-border);
  border-radius: 2.5rem;
  box-shadow: var(--standard-shadow);
  cursor: pointer;
  background-color: var(--background-color);
}
.take_away__button {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: [col-start-1] 1fr [col-end-1 col-start-2] 4fr [col-end-2 grid-end];
  grid-template-rows: repeat(2, [row-start] min-content [row-end]);
  padding: calc(0.8rem + 0.2vw);
  border: var(--standard-border);
  border-radius: 2.5rem;
  box-shadow: var(--standard-shadow);
  cursor: pointer;
  width: 100%;
  font-size: calc(1.2rem + 0.3vw);
  background-color: var(--background-color);
}
.take_away__button:hover {
  background-color: var(--color-primary);
}
.take_away__image {
  grid-column: col-start-1/col-end-1;
  grid-row: row-start 1/row-end 2;
  align-self: center;
  justify-self: center;
  margin-right: 1rem;
}
.take_away__name {
  grid-column: col-start-2/col-end-2;
  grid-row: row-start 1/row-end 1;
  align-self: center;
  justify-self: flex-start;
}
.take_away__distance {
  grid-column: col-start-2/col-end-2;
  grid-row: row-start 2/row-end 2;
  align-self: center;
  justify-self: flex-start;
}
.take_away__title {
  font-size: calc(1.5rem + 0.3vw);
  border-bottom: 2px solid var(--color-gray-xlight);
  width: 100%;
  text-align: center;
}

#cart_logo {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--color-primary);
  opacity: 0;
  scale: 0;
}

@keyframes moveDown {
  0% {
    transform: translate(0, 0);
    opacity: 0.5;
    scale: 1;
  }
  50% {
    transform: translate(30rem, 100rem);
    opacity: 0;
    scale: 0.3;
  }
  100% {
    transform: translate(40rem, 80rem);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .animation-moveDown {
    animation-duration: 1s;
    animation-name: moveDown;
    animation-fill-mode: forwards;
  }
}/*# sourceMappingURL=style-general.css.map */