@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@0,400..700;1,400..700&display=swap");
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

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

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: var(--font-IBM-Sans-Condensed);
  scroll-behavior: smooth;
  color: var(--text-color);
  background-color: var(--body-bg-color);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  padding: 0;
  border: none;
  outline: none;
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
}

body.is-mobile a:focus,
body.is-mobile button:focus,
body.is-mobile span:focus,
body.is-mobile li:focus,
body.is-mobile i:focus {
  outline: none;
  box-shadow: none;
}

.row > *, .container-fluid, .container-content, .container {
  padding-left: calc(var(--grid-gutter-x) * 0.5);
  padding-right: calc(var(--grid-gutter-x) * 0.5);
}

.container-fluid, .container-content, .container {
  --grid-gutter-x: 30px;
  --grid-gutter-y: 0;
  width: 100%;
  margin: 0 auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--grid-gutter-y) * -1);
  margin-left: calc(var(--grid-gutter-x) * -0.5);
  margin-right: calc(var(--grid-gutter-x) * -0.5);
}
.row > * {
  margin-top: var(--grid-gutter-y);
}

.col {
  flex: 1 0;
}

.container {
  max-width: 100%;
}

.container-content {
  max-width: 100%;
}

.row-cols-1 > * {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-2 > * {
  flex: 0 0 auto;
  width: 50%;
}

.row-cols-3 > * {
  flex: 0 0 auto;
  width: 33.3333333333%;
}

.row-cols-4 > * {
  flex: 0 0 auto;
  width: 25%;
}

.row-cols-5 > * {
  flex: 0 0 auto;
  width: 20%;
}

.row-cols-6 > * {
  flex: 0 0 auto;
  width: 16.6666666667%;
}

.col-1 {
  flex: 0 0 auto;
  width: 8.3333333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.6666666667%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.3333333333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.6666666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.3333333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.6666666667%;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.3333333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.6666666667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.offset-0 {
  margin-left: 0;
}

.offset-1 {
  margin-left: 8.3333333333%;
}

.offset-2 {
  margin-left: 16.6666666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.3333333333%;
}

.offset-5 {
  margin-left: 41.6666666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.3333333333%;
}

.offset-8 {
  margin-left: 66.6666666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.3333333333%;
}

.offset-11 {
  margin-left: 91.6666666667%;
}

.offset-12 {
  margin-left: 100%;
}

.g-0,
.gx-0 {
  --grid-gutter-x: 0px;
}

.g-0,
.gy-0 {
  --grid-gutter-y: 0px;
}

.g-1,
.gx-1 {
  --grid-gutter-x: 7.5px;
}

.g-1,
.gy-1 {
  --grid-gutter-y: 7.5px;
}

.g-2,
.gx-2 {
  --grid-gutter-x: 15px;
}

.g-2,
.gy-2 {
  --grid-gutter-y: 15px;
}

.g-3,
.gx-3 {
  --grid-gutter-x: 30px;
}

.g-3,
.gy-3 {
  --grid-gutter-y: 30px;
}

.g-4,
.gx-4 {
  --grid-gutter-x: 45px;
}

.g-4,
.gy-4 {
  --grid-gutter-y: 45px;
}

.g-5,
.gx-5 {
  --grid-gutter-x: 90px;
}

.g-5,
.gy-5 {
  --grid-gutter-y: 90px;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
  .container-content {
    max-width: 540px;
  }
  .row-cols-sm-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-sm-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-sm-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-sm-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-sm-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.3333333333%;
  }
  .offset-sm-2 {
    margin-left: 16.6666666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.3333333333%;
  }
  .offset-sm-5 {
    margin-left: 41.6666666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.3333333333%;
  }
  .offset-sm-8 {
    margin-left: 66.6666666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.3333333333%;
  }
  .offset-sm-11 {
    margin-left: 91.6666666667%;
  }
  .offset-sm-12 {
    margin-left: 100%;
  }
  .g-sm-0,
  .gx-sm-0 {
    --grid-gutter-x: 0px;
  }
  .g-sm-0,
  .gy-sm-0 {
    --grid-gutter-y: 0px;
  }
  .g-sm-1,
  .gx-sm-1 {
    --grid-gutter-x: 7.5px;
  }
  .g-sm-1,
  .gy-sm-1 {
    --grid-gutter-y: 7.5px;
  }
  .g-sm-2,
  .gx-sm-2 {
    --grid-gutter-x: 15px;
  }
  .g-sm-2,
  .gy-sm-2 {
    --grid-gutter-y: 15px;
  }
  .g-sm-3,
  .gx-sm-3 {
    --grid-gutter-x: 30px;
  }
  .g-sm-3,
  .gy-sm-3 {
    --grid-gutter-y: 30px;
  }
  .g-sm-4,
  .gx-sm-4 {
    --grid-gutter-x: 45px;
  }
  .g-sm-4,
  .gy-sm-4 {
    --grid-gutter-y: 45px;
  }
  .g-sm-5,
  .gx-sm-5 {
    --grid-gutter-x: 90px;
  }
  .g-sm-5,
  .gy-sm-5 {
    --grid-gutter-y: 90px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
  .container-content {
    max-width: 720px;
  }
  .row-cols-md-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-md-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-md-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-md-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-md-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.3333333333%;
  }
  .offset-md-2 {
    margin-left: 16.6666666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.3333333333%;
  }
  .offset-md-5 {
    margin-left: 41.6666666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.3333333333%;
  }
  .offset-md-8 {
    margin-left: 66.6666666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.3333333333%;
  }
  .offset-md-11 {
    margin-left: 91.6666666667%;
  }
  .offset-md-12 {
    margin-left: 100%;
  }
  .g-md-0,
  .gx-md-0 {
    --grid-gutter-x: 0px;
  }
  .g-md-0,
  .gy-md-0 {
    --grid-gutter-y: 0px;
  }
  .g-md-1,
  .gx-md-1 {
    --grid-gutter-x: 7.5px;
  }
  .g-md-1,
  .gy-md-1 {
    --grid-gutter-y: 7.5px;
  }
  .g-md-2,
  .gx-md-2 {
    --grid-gutter-x: 15px;
  }
  .g-md-2,
  .gy-md-2 {
    --grid-gutter-y: 15px;
  }
  .g-md-3,
  .gx-md-3 {
    --grid-gutter-x: 30px;
  }
  .g-md-3,
  .gy-md-3 {
    --grid-gutter-y: 30px;
  }
  .g-md-4,
  .gx-md-4 {
    --grid-gutter-x: 45px;
  }
  .g-md-4,
  .gy-md-4 {
    --grid-gutter-y: 45px;
  }
  .g-md-5,
  .gx-md-5 {
    --grid-gutter-x: 90px;
  }
  .g-md-5,
  .gy-md-5 {
    --grid-gutter-y: 90px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
  .container-content {
    max-width: 960px;
  }
  .row-cols-lg-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-lg-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-lg-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-lg-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-lg-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-lg-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.3333333333%;
  }
  .offset-lg-2 {
    margin-left: 16.6666666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.3333333333%;
  }
  .offset-lg-5 {
    margin-left: 41.6666666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.3333333333%;
  }
  .offset-lg-8 {
    margin-left: 66.6666666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.3333333333%;
  }
  .offset-lg-11 {
    margin-left: 91.6666666667%;
  }
  .offset-lg-12 {
    margin-left: 100%;
  }
  .g-lg-0,
  .gx-lg-0 {
    --grid-gutter-x: 0px;
  }
  .g-lg-0,
  .gy-lg-0 {
    --grid-gutter-y: 0px;
  }
  .g-lg-1,
  .gx-lg-1 {
    --grid-gutter-x: 7.5px;
  }
  .g-lg-1,
  .gy-lg-1 {
    --grid-gutter-y: 7.5px;
  }
  .g-lg-2,
  .gx-lg-2 {
    --grid-gutter-x: 15px;
  }
  .g-lg-2,
  .gy-lg-2 {
    --grid-gutter-y: 15px;
  }
  .g-lg-3,
  .gx-lg-3 {
    --grid-gutter-x: 30px;
  }
  .g-lg-3,
  .gy-lg-3 {
    --grid-gutter-y: 30px;
  }
  .g-lg-4,
  .gx-lg-4 {
    --grid-gutter-x: 45px;
  }
  .g-lg-4,
  .gy-lg-4 {
    --grid-gutter-y: 45px;
  }
  .g-lg-5,
  .gx-lg-5 {
    --grid-gutter-x: 90px;
  }
  .g-lg-5,
  .gy-lg-5 {
    --grid-gutter-y: 90px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
  .container-content {
    max-width: 1140px;
  }
  .row-cols-xl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xl-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-xl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xl-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 8.3333333333%;
  }
  .offset-xl-2 {
    margin-left: 16.6666666667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.3333333333%;
  }
  .offset-xl-5 {
    margin-left: 41.6666666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.3333333333%;
  }
  .offset-xl-8 {
    margin-left: 66.6666666667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.3333333333%;
  }
  .offset-xl-11 {
    margin-left: 91.6666666667%;
  }
  .offset-xl-12 {
    margin-left: 100%;
  }
  .g-xl-0,
  .gx-xl-0 {
    --grid-gutter-x: 0px;
  }
  .g-xl-0,
  .gy-xl-0 {
    --grid-gutter-y: 0px;
  }
  .g-xl-1,
  .gx-xl-1 {
    --grid-gutter-x: 7.5px;
  }
  .g-xl-1,
  .gy-xl-1 {
    --grid-gutter-y: 7.5px;
  }
  .g-xl-2,
  .gx-xl-2 {
    --grid-gutter-x: 15px;
  }
  .g-xl-2,
  .gy-xl-2 {
    --grid-gutter-y: 15px;
  }
  .g-xl-3,
  .gx-xl-3 {
    --grid-gutter-x: 30px;
  }
  .g-xl-3,
  .gy-xl-3 {
    --grid-gutter-y: 30px;
  }
  .g-xl-4,
  .gx-xl-4 {
    --grid-gutter-x: 45px;
  }
  .g-xl-4,
  .gy-xl-4 {
    --grid-gutter-y: 45px;
  }
  .g-xl-5,
  .gx-xl-5 {
    --grid-gutter-x: 90px;
  }
  .g-xl-5,
  .gy-xl-5 {
    --grid-gutter-y: 90px;
  }
}
@media (min-width: 1400px) {
  .container {
    max-width: 1370px;
  }
  .row-cols-xxl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xxl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xxl-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-xxl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xxl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xxl-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xxl-0 {
    margin-left: 0;
  }
  .offset-xxl-1 {
    margin-left: 8.3333333333%;
  }
  .offset-xxl-2 {
    margin-left: 16.6666666667%;
  }
  .offset-xxl-3 {
    margin-left: 25%;
  }
  .offset-xxl-4 {
    margin-left: 33.3333333333%;
  }
  .offset-xxl-5 {
    margin-left: 41.6666666667%;
  }
  .offset-xxl-6 {
    margin-left: 50%;
  }
  .offset-xxl-7 {
    margin-left: 58.3333333333%;
  }
  .offset-xxl-8 {
    margin-left: 66.6666666667%;
  }
  .offset-xxl-9 {
    margin-left: 75%;
  }
  .offset-xxl-10 {
    margin-left: 83.3333333333%;
  }
  .offset-xxl-11 {
    margin-left: 91.6666666667%;
  }
  .offset-xxl-12 {
    margin-left: 100%;
  }
  .g-xxl-0,
  .gx-xxl-0 {
    --grid-gutter-x: 0px;
  }
  .g-xxl-0,
  .gy-xxl-0 {
    --grid-gutter-y: 0px;
  }
  .g-xxl-1,
  .gx-xxl-1 {
    --grid-gutter-x: 7.5px;
  }
  .g-xxl-1,
  .gy-xxl-1 {
    --grid-gutter-y: 7.5px;
  }
  .g-xxl-2,
  .gx-xxl-2 {
    --grid-gutter-x: 15px;
  }
  .g-xxl-2,
  .gy-xxl-2 {
    --grid-gutter-y: 15px;
  }
  .g-xxl-3,
  .gx-xxl-3 {
    --grid-gutter-x: 30px;
  }
  .g-xxl-3,
  .gy-xxl-3 {
    --grid-gutter-y: 30px;
  }
  .g-xxl-4,
  .gx-xxl-4 {
    --grid-gutter-x: 45px;
  }
  .g-xxl-4,
  .gy-xxl-4 {
    --grid-gutter-y: 45px;
  }
  .g-xxl-5,
  .gx-xxl-5 {
    --grid-gutter-x: 90px;
  }
  .g-xxl-5,
  .gy-xxl-5 {
    --grid-gutter-y: 90px;
  }
}
html {
  --font-IBM-Sans-Condensed: "IBM Plex Sans Condensed";
  --font-IBM-Sans: "IBM Plex Sans SemiCondensed";
  --font-IBM-Sans-SemiCondensed: "IBM Plex Sans";
  --font-nav: "Open-sans";
  --main-color: #3d5300;
  --bg-main-color: #dae3ea;
  --main-color-white: #fcfcfc;
  --color-white-ddd: #dddddd;
  --color-gray-666: #666666;
  --color-gray-777: #777777;
  --color-gray-333: #333333;
  --color-yellow: #f6c915;
  --color-btn-carousel: #869791;
  --color-text-logo-primary: hsl(143, 71%, 42%);
  --background-logo-primary: hsl(144, 49%, 14%);
  --bg-nav: #fdfdfd;
  --bg-nav-admin: #1f4852;
  --color-text-nav: #0a400c;
  --color-text-nav-admin: #fdfdfd;
  --bg-pagination: var(--main-color-white);
  --border-pagination: var(--main-color);
  --color-text-pagination: var(--main-color);
  --color-text-pagination-hover: var(--main-color-white);
  --bg-pagination-hover: var(--main-color);
  --bg-pagination-active: var(--main-color);
  --color-text-pagination-active: var(--main-color-white);
  --footer-bg-color: #3d5300;
  --footer-color-title: #ffcc33;
  --footer-color: #fcfcfc;
  --heading-prod-title: #e67514;
  --background-primary: hsl(191, 31%, 26%);
  --background-lg-hover-primary: hsl(191, 31%, 50%);
  --color-text-nav-hover-light: #e67514;
  --color-text-desc: #78738fff;
  --color-text-title: #02577a;
  --color-text-heading: hsl(225, 0%, 85%);
  --color-text-sub-heading: hsl(0, 0%, 80%);
  --color-text-1-title: hsl(191, 31%, 26%);
  --color-text-link: #0080e9;
  --color-text-link-hover: #001b31;
  --bg-btn-nav: var(--main-color-white);
  --color-nav: var(--main-color);
  --bg-btn-nav-hover: var(--main-color);
  --color-nav-hover: var(--main-color-white);
  --page-ad-bg-color: var(--main-color-white);
  --btn-ad-color: var(--main-color);
  --btn-ad-bg-color: var(--main-color-white);
  --btn-ad-bg-color-strong: #fa7115;
  --btn-ad-bg-color-danger: #db0c0c;
  --btn-ad-color-hover: var(--main-color-white);
  --btn-ad-bg-color-hover: var(--main-color);
  --blue: #0071ff;
  --light-blue: #b6dbf6;
  --dark-blue: #005dd1;
  --grey: #f2f2f2;
  --bg-admin: #faf8f1;
  --admin-btn-color: hsl(191, 31%, 26%);
  --admin-btn-color-hover: #ff4f0f;
}

.banner-main {
  max-width: 100%;
  padding-top: 37%;
  position: relative;
}
@media (max-width: 991.98px) {
  .banner-main {
    padding-top: 56%;
  }
}

.slide-show {
  overflow: hidden;
  position: absolute;
  inset: 0;
}
.slide-show__track {
  height: 100%;
  display: flex;
  flex-direction: row;
}
.slide-show__thumb {
  display: block;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  overflow: hidden;
}
.slide-show__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.bottom-bar {
  position: absolute;
  bottom: 20px;
  right: 30px;
}
@media (max-width: 575.98px) {
  .bottom-bar {
    bottom: 8px;
    right: 12px;
  }
}
.bottom-bar__left {
  width: 320px;
  height: 36px;
  background-color: #ef7722;
  clip-path: polygon(100% 0%, 93% 52%, 100% 100%, 0% 100%, 0 51%, 0% 0%);
}
@media (max-width: 575.98px) {
  .bottom-bar__left {
    width: 190px;
    height: 20px;
  }
}
.bottom-bar__left::before {
  position: absolute;
  content: "";
  display: block;
  width: 3px;
  height: 36px;
  background-color: #fff;
}
.bottom-bar__title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 12px 16px;
  color: #e4e3e8;
  font-size: 1.6rem;
  font-weight: 600;
  width: 280px;
  height: 28px;
  transition: transform 300ms ease, opacity 300ms ease;
  opacity: 1;
  transform: translateY(0);
  will-change: opacity, transform;
}
@media (max-width: 575.98px) {
  .bottom-bar__title {
    font-size: 1.2rem;
    font-weight: 500;
    padding: 3px 13px;
    width: 180px;
    height: 20px;
  }
}
.bottom-bar__title--out {
  opacity: 0;
  transform: translateY(-10px);
}
.bottom-bar__title--in {
  opacity: 1;
  transform: translateY(0);
}

.top-bar {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  position: sticky;
  background: var(--bg-nav); /* fallback for old browsers */
  z-index: 1000;
  transition: transform 0.3s ease;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.nav__shop {
  display: block;
}
@media (max-width: 991.98px) {
  .nav__shop {
    display: none;
  }
}
.nav__desktop {
  display: flex;
  align-items: center;
}
.nav__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__list {
  display: flex;
  align-items: center;
  gap: 80px;
  margin-left: 114px;
}
@media (max-width: 1399.98px) {
  .nav__list {
    gap: 35px;
    margin-left: 80px;
  }
}
@media (max-width: 1199.98px) {
  .nav__list {
    gap: 30px;
  }
}
.nav__items {
  position: relative;
  display: block;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 1px;
  font-family: var(--font-IBM-Sans-Condensed);
  color: var(--color-text-nav);
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
@media (max-width: 991.98px) {
  .nav__items {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.nav__items::after {
  position: absolute;
  left: 0;
  bottom: -5px;
  content: "";
  display: block;
  width: 0%;
  height: 2px;
  border-radius: 2px;
  background-color: var(--color-text-nav-hover-light);
  transition: width 0.5s;
}
@media (max-width: 991.98px) {
  .nav__items::after {
    display: none;
  }
}
.nav__items:hover {
  color: var(--color-text-nav-hover-light);
}
.nav__items:hover::after {
  width: 100%;
}

.hidden-nav {
  transform: translateY(-100%);
}

.active-nav {
  color: var(--color-text-nav-hover-light);
}

.show-menu {
  opacity: 1;
  pointer-events: initial;
}

.header-logo {
  height: 80px;
  width: 80px;
}
.header-logo__img {
  height: 80px;
  width: 80px;
}

.subnav {
  position: absolute;
  top: 85px;
  left: 0;
  right: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
  background-color: #f1f1f1;
  padding: 40px 20px;
  transition: opacity 0.5, height 0.5s;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.subnav__list {
  display: flex;
  gap: 20px;
}
.subnav__item {
  flex: 0 0 calc((100% - 60px) / 4);
}
.subnav__link {
  display: block;
}
.subnav__thumb {
  height: 180px;
  background-color: #ccc;
  overflow: hidden;
}
.subnav img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: 0.3s;
}
.subnav img:hover {
  transform: scale(1.1);
}
.subnav__title {
  display: block;
  text-transform: uppercase;
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 500;
  text-align: center;
  color: #666666;
  transition: 0.2s;
  padding-top: 14px;
}
.subnav__title:hover {
  color: var(--main-color);
}

.top-act__signIn {
  color: var(--color-nav);
  font-size: 1.6rem;
  padding: 12px 32px;
  font-weight: 500;
  background-color: var(--bg-btn-nav);
  border-radius: 4px;
  border: 2px solid var(--color-nav);
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  cursor: pointer;
  display: block;
}
.top-act__signIn:hover {
  background-color: var(--bg-btn-nav-hover);
  border: 2px solid var(--bg-btn-nav-hover);
  color: var(--color-nav-hover);
}

.nav__mobile {
  display: none;
}
@media (max-width: 991.98px) {
  .nav__mobile {
    display: block;
  }
}

.nav-mobile__data {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}
.nav-mobile__toggle {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-mobile__burger, .nav-mobile__close {
  font-size: 3.2rem;
  padding: 8px;
  color: #484848;
  cursor: pointer;
  transition: opacity 0.1s, transform 0.4s;
}
.nav-mobile__burger {
  display: block;
}
.nav-mobile__close {
  display: none;
}
.nav-mobile__logo {
  height: 60px;
  width: 60px;
}
.nav-mobile__logo a {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}
.nav-mobile__logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.nav-mobile__act a {
  display: block;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}
.nav-mobile__act a i {
  font-size: 3.2rem;
  padding: 6px;
  color: #f6c915;
}
.nav-mobile__header {
  border-top: 2px solid #d8d8d8;
  background-color: #fcfcfc;
  scroll-behavior: smooth;
  height: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow: hidden;
  transition: 0.8s ease;
}
.nav-mobile__list {
  padding: 20px 0;
  padding-bottom: 100px;
}
.nav-mobile__list > li {
  padding: 12px 0;
  color: #777777;
  border-bottom: 1px dashed #cccccc;
}
.nav-mobile__items {
  display: block;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}
.nav-mobile__items i {
  font-size: 2rem;
  padding-right: 12px;
}
.nav-mobile__sub-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-mobile__icon {
  padding: 8px;
  padding-right: 8px;
}

.subnav-mobile {
  height: 0;
  overflow: hidden;
  transition: 0.8s ease;
}
.subnav-mobile__flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 10px;
}
.subnav-mobile__link {
  display: block;
}
@media (max-width: 991.98px) {
  .subnav-mobile__link {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.subnav-mobile__item {
  flex: 0 0 calc((100% - 20px) / 2);
}
.subnav-mobile__thumb {
  height: 180px;
  background-color: #ccc;
  overflow: hidden;
}
@media (max-width: 575.98px) {
  .subnav-mobile__thumb {
    height: 112px;
  }
}
.subnav-mobile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.subnav-mobile__title {
  display: block;
  text-transform: uppercase;
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 500;
  text-align: center;
  color: #666666;
  padding-top: 14px;
}
.subnav-mobile__category-item {
  padding: 8px 0 8px 8px;
}
.subnav-mobile__category-link {
  display: block;
  text-transform: uppercase;
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 500;
  color: #666666;
}
@media (max-width: 991.98px) {
  .subnav-mobile__category-link {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.subnav-mobile__category-link i {
  padding-right: 12px;
}

#icon-plus {
  display: block;
}

#icon-minus {
  display: none;
}

.footer {
  background-color: var(--footer-bg-color);
}
.footer__row {
  padding: 50px 0;
}
@media (max-width: 575.98px) {
  .footer__column {
    padding: 0 15px;
  }
}
.footer__title {
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 4.3rem;
  text-align: justify;
  color: var(--footer-color-title);
}
.footer__sub-title li {
  padding: 8px 0;
}
.footer__sub-title li a {
  transition: all 0.3s;
}
.footer__sub-title li a:hover {
  color: #fe7743;
}
.footer__text {
  color: var(--footer-color);
  line-height: 1.4rem;
  line-height: 2.6rem;
  text-align: justify;
}
.footer__text-icon {
  display: flex;
  align-items: center;
  column-gap: 8px;
}
.footer__text-icon i {
  color: #ffcc33;
}
.footer__row-icon {
  display: flex;
  align-items: center;
  column-gap: 16px;
  padding-left: 10px;
}
.footer__row-icon i {
  font-size: 2.2rem;
  color: #ffffff;
  transition: all 0.3s;
}
@media (max-width: 991.98px) {
  .footer__row-icon i {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.footer__row-icon i:hover {
  color: #fe7743;
  transform: translateY(-2px);
}
.footer__copy-right {
  text-align: center;
  color: #fff;
  font-size: 12px;
  padding-bottom: 20px;
}

.mini-header__show {
  max-width: 100%;
}
.mini-header__img {
  width: 100%;
  height: 430px;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 575.98px) {
  .mini-header__img {
    height: 270px;
  }
}

.toast-leave {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #f39c12;
  color: #fff;
  padding: 16px;
  border-radius: 5px;
  display: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}
.toast-leave.show {
  display: flex;
  gap: 8px;
  align-items: center;
}
.toast-leave p {
  margin: 0;
  flex: 1;
}
.toast-leave button {
  background: #fff;
  color: #333;
  border: none;
  padding: 6px 12px;
  border-radius: 3px;
  cursor: pointer;
}

#toast-container {
  position: fixed;
  top: 50%;
  right: 50%;
  transform: translateX(50%);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 9999;
}

.toast-mss {
  min-width: 250px;
  padding: 12px 18px;
  border-radius: 4px;
  color: #fff;
  font-family: sans-serif;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  animation: fadeIn 0.3s forwards, fadeOut 0.3s forwards ease-out 2.7s;
}

.toast-success {
  background-color: #28a745;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}
.toast-del-form {
  display: none;
  background-color: #ffa726;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  position: fixed;
  top: 20px;
  right: 20px;
  font-size: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  flex-direction: column;
  gap: 8px;
}
.toast-del-form__btn {
  background-color: #fff;
  color: #ffa726;
  border: none;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.pagination {
  padding-top: 80px;
}
.pagination__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.pagination__link {
  display: flex;
  padding: 8px 12px;
  border-radius: 6px;
  border: 2px solid var(--border-pagination);
  color: var(--color-text-pagination);
  background-color: var(--bg-pagination);
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
@media (max-width: 991.98px) {
  .pagination__link {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.pagination__link:hover {
  background-color: var(--bg-pagination-hover);
  color: var(--color-text-pagination-hover);
  border: 2px solid var(--color-text-pagination);
}
.pagination__active {
  background-color: var(--bg-pagination-active);
  color: var(--color-text-pagination-active);
  border: 2px solid var(--color-text-pagination);
}

.control-manager {
  margin: 20px 0;
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 2px solid #ccc;
}
.control-manager__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--color-text-nav);
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-text-nav);
  background: #fff;
  transition: all 0.3s;
}
@media (max-width: 991.98px) {
  .control-manager__btn {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.control-manager__btn:hover {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  color: #fff;
  background-color: var(--color-text-nav);
}

.content-manager {
  width: 100%;
}

.cm-wrapper {
  margin: 20px;
  display: flex;
  align-items: center;
}
.cm-wrapper input {
  width: 90%;
  font-size: 1.5rem;
  border-bottom: 2px solid #afa8c4;
  font-family: "Fz Poppins";
  padding: 8px 0 14px;
  color: #321f70;
  caret-color: #7b55f4;
}
.cm-wrapper input::placeholder {
  color: #9b93b3;
}
.cm-wrapper > i {
  margin-left: 18px;
  display: inline-block;
  color: var(--btn-ad-color);
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 6px 10px;
  background-color: var(--btn-ad-bg-color);
  border: 2px solid var(--btn-ad-color);
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  font-size: 1.4rem;
  background-color: #fff;
}
.cm-wrapper > i:hover {
  background-color: var(--btn-ad-bg-color-hover);
  color: var(--btn-ad-color-hover);
}
.cm-wrapper > i:active {
  background-color: var(--btn-ad-bg-color-strong);
}
.cm-wrapper .icon-upload-img {
  margin-left: 0;
  display: inline-block;
  color: var(--btn-ad-color);
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 6px 10px;
  background-color: var(--btn-ad-bg-color);
  border: 2px solid var(--btn-ad-color);
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  font-size: 3rem;
  background-color: #fff;
}
.cm-wrapper .icon-upload-img:hover {
  background-color: var(--btn-ad-bg-color-hover);
  color: var(--btn-ad-color-hover);
}
.cm-wrapper .icon-upload-img:active {
  background-color: var(--btn-ad-bg-color-strong);
}
.cm-wrapper textarea {
  width: 80%;
  min-height: 50px;
  margin-top: 15px;
  border: none;
  border-bottom: 2px solid #afa8c4;
  font-size: 1.5rem;
  font-family: "Fz Poppins";
  resize: none;
  outline: none;
  color: #321f70;
  caret-color: #7b55f4;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cm-wrapper textarea::-webkit-scrollbar {
  display: none;
}
.cm-wrapper ul {
  width: 90%;
  padding-left: 13px;
}
.cm-wrapper ul li {
  width: 100%;
  list-style-type: lower-alpha;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 12px;
}
.cm-wrapper ul li i {
  margin-left: 18px;
  display: inline-block;
  color: var(--btn-ad-color);
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 6px 10px;
  background-color: var(--btn-ad-bg-color);
  border: 2px solid var(--btn-ad-color);
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  font-size: 1.4rem;
  background-color: #fff;
}
.cm-wrapper ul li i:hover {
  background-color: var(--btn-ad-bg-color-hover);
  color: var(--btn-ad-color-hover);
}
.cm-wrapper ul li i:active {
  background-color: var(--btn-ad-bg-color-strong);
}
.cm-wrapper ul p {
  width: 90%;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 12px;
}
.cm-wrapper ul p i {
  margin-left: 18px;
  display: inline-block;
  color: var(--btn-ad-color);
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 6px 10px;
  background-color: var(--btn-ad-bg-color);
  border: 2px solid var(--btn-ad-color);
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  font-size: 1.4rem;
  background-color: #fff;
}
.cm-wrapper ul p i:hover {
  background-color: var(--btn-ad-bg-color-hover);
  color: var(--btn-ad-color-hover);
}
.cm-wrapper ul p i:active {
  background-color: var(--btn-ad-bg-color-strong);
}
.cm-wrapper > .image-thumb {
  position: relative;
  display: none;
}
.cm-wrapper > .image-thumb img {
  margin-left: 30px;
  width: 280px;
  height: 200px;
  border-radius: 8px;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 767.98px) {
  .cm-wrapper > .image-thumb img {
    width: 156px;
    height: 120px;
  }
}
.cm-wrapper > .image-thumb i {
  display: block;
  position: absolute;
  top: 5px;
  right: 5px;
  border-radius: 50%;
  padding: 8px 10px;
  cursor: pointer;
  transition: 0.3s;
  font-size: 1.8rem;
  background-color: #fff;
  color: var(--bg-nav);
}
@media (max-width: 991.98px) {
  .cm-wrapper > .image-thumb i {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.cm-wrapper > .image-thumb i:hover {
  color: #eb5b00;
}

.project__card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
}

.contact__form {
  background-color: #fff;
  border-radius: 8px;
  margin: 30px 0;
  box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.2);
}
.contact__information {
  position: relative;
  padding: 30px;
  border-radius: 8px;
  background-color: #3a208c;
  overflow: hidden;
  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.2);
}
.contact__info-title {
  font-size: 2.2rem;
  font-weight: 500;
  color: #fff;
  line-height: 5rem;
}
.contact__info-desc {
  font-size: 1.4rem;
  color: #cdbdff;
  line-height: 2.2rem;
  margin-bottom: 20px;
}
.contact__infor-list {
  margin-bottom: 24px;
}
.contact__info-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
}
.contact__info-item i {
  font-size: 1.6rem;
  color: #d88d90;
}
.contact__info-support {
  padding-left: 15px;
  font-size: 16px;
  color: #cdbdff;
  line-height: 3rem;
}
.contact__footer {
  margin-top: 130px;
}
.contact__footer-list {
  display: flex;
  align-items: center;
  gap: 13px;
}
.contact__footer-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: transparent;
  text-decoration: none;
  transition: background-color 0.3s;
}
@media (max-width: 991.98px) {
  .contact__footer-item a {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.contact__footer-item a:hover {
  background-color: #d88d90;
}
.contact__footer-item a:hover i {
  color: #cdbdff;
}
.contact__footer-item a i {
  color: #d88d90;
}
.contact__footer-circle {
  position: absolute;
  bottom: 65px;
  right: 65px;
  z-index: 1;
  width: 114px;
  height: 114px;
  background-color: #7b55f4;
  border-radius: 50%;
}
.contact__footer-fan-shaped {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(50%, 50%);
  width: 365px;
  height: 365px;
  background-color: #d88d90;
  border-radius: 50%;
}
.contact__block-form {
  width: 100%;
  padding: 28px 32px;
}
.contact__form-row {
  display: flex;
  gap: 32px;
  margin-bottom: 30px;
}
@media (max-width: 575.98px) {
  .contact__form-row {
    flex-direction: column;
  }
}
.contact__form-group, .contact__form-label {
  display: block;
}
.contact__form-group {
  flex-grow: 1;
}
.contact__form-group:focus-within .contact__form-label {
  color: #7b55f4;
}
.contact__form-group:focus-within .contact__form-input {
  border-color: #7b55f4;
}
.contact__form-label {
  font-weight: 600;
  font-size: 1.2rem;
  color: #1e104d;
}
.contact__form-input {
  width: 100%;
  font-size: 1.4rem;
  border-bottom: 2px solid #afa8c4;
  padding: 8px 0 14px;
  color: #321f70;
}
.contact__form-input::placeholder {
  color: #9b93b3;
}
.contact__form-error {
  display: none;
}
.contact__form-row-radio {
  margin-top: 20px;
}
.contact__label__larger {
  font-size: 1.4rem;
  color: #1e104d;
  font-weight: 500;
}
.contact__form-radio {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}
@media (max-width: 575.98px) {
  .contact__form-radio {
    flex-direction: column;
  }
}
.contact__form-label-radio {
  display: flex;
  align-items: center;
  position: relative;
  line-height: 20px;
  font-size: 1.4rem;
}
.contact__form-label-radio::before, .contact__form-label-radio::after {
  content: "";
  display: inline-block;
}
.contact__form-label-radio::before {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  border-radius: 50%;
  border: 2px solid #3a208c;
}
.contact__form-group [type=radio]:checked + .contact__form-label-radio::after {
  width: 7px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  position: absolute;
  top: 7px;
  left: 4px;
}
.contact__form-group [type=radio]:checked + .contact__form-label-radio::before {
  background-color: #3a208c;
}
.contact__form-row-message {
  margin-top: 30px;
}
.contact__form-text-area {
  width: 100%;
  margin-top: 15px;
  border: none;
  border-bottom: 2px solid #afa8c4;
  font-size: 1.4rem;
  font-family: "poppins";
  resize: none;
  outline: none;
}
.contact__form-row-submit {
  padding-top: 65px;
  display: flex;
  justify-content: flex-end;
}
.contact__form-btn {
  width: 160px;
  height: 50px;
  background-color: #3a208c;
  border-radius: 8px;
  font-size: 1.6rem;
  font-weight: 500;
  color: #cdbdff;
  cursor: pointer;
  box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.3s;
}
@media (max-width: 991.98px) {
  .contact__form-btn {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.contact__form-btn:hover {
  background-color: hsl(254, 63%, 44%);
  transform: translateY(-2px);
}

.product__card {
  width: 382.5px;
  border-radius: 16px;
  background-color: #fcfcfc;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  cursor: pointer;
  transition: all 0.4s;
}
@media (max-width: 991.98px) {
  .product__card {
    width: calc(50% - 30px);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
@media (max-width: 767.98px) {
  .product__card {
    width: 100%;
  }
}
.product__card:hover {
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
  background-color: #fbfbfb;
  transform: translateY(-2px);
}
.product__card:hover .product__card-img {
  transform: scale(1.1);
}
.product__card-thumb {
  width: 100%;
  height: 270px;
  border-bottom: 2px solid #ecfae5;
  color: #fffdf6;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}
.product__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s;
}
.product__desc {
  padding: 8px 12px;
}
.product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "Fz-Poppins";
  height: 60px;
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 3rem;
  padding: 0 6px;
  text-align: justify;
  color: var(--color-text-primary);
  margin-bottom: 16px;
}
.product__property {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin-bottom: 12px;
}
.product__key {
  font-size: 1.5rem;
  font-weight: 600;
  font-family: "Open Sans";
  color: #ff7f3e;
}
.product__value-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-left: 12px;
}
.product__select-value input {
  display: none;
}
.product__select-label {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 1.3rem;
  background-color: #fff;
  color: #113f67;
  font-weight: 500;
  font-family: "Open Sans";
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.product__price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin-bottom: 16px;
}
.product__cost {
  font-size: 2.2rem;
  font-family: "Fz Poppins";
  font-weight: 600;
  color: #fe7743;
}
.product__unit {
  font-size: 1.8rem;
  margin-left: 6px;
  font-family: "Fz Poppins";
  font-weight: 500;
  color: #fe7743;
}
.product__star i {
  font-size: 1.2rem;
  color: #ffd63a;
}
.product__act {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.product__btn {
  display: block;
  padding: 12px 26px;
  color: #fff;
  font-size: 1.6rem;
  border-radius: 8px;
  font-family: "Noto Serif KR", serif;
  background-color: #113f67;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 28px;
}
@media (max-width: 991.98px) {
  .product__btn {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.product__btn:hover {
  background-color: #ff7f3e;
  color: #fff6e9;
}

.button-contact-vr {
  position: fixed;
  right: 0;
  bottom: 5%;
}

#zalo-vr {
  position: relative;
  margin-top: -5px;
}

.phone-vr {
  position: relative;
  visibility: visible;
  background-color: transparent;
  width: 90px;
  height: 90px;
  cursor: pointer;
  z-index: 11;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transition: visibility 0.5s;
  left: 0;
  bottom: 0;
  display: block;
}

.phone-vr-circle-fill {
  width: 65px;
  height: 65px;
  top: 12px;
  left: 12px;
  position: absolute;
  box-shadow: 0 0 0 0 #c31d1d;
  background-color: rgba(230, 8, 8, 0.7);
  border-radius: 50%;
  border: 2px solid transparent;
  -webkit-animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
  animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
  transition: all 0.5s;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-animation: zoom 1.3s infinite;
  animation: zoom 1.3s infinite;
}

.phone-vr-img-circle {
  background-color: #e60808;
  width: 40px;
  height: 40px;
  line-height: 40px;
  top: 25px;
  left: 25px;
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
  animation: phone-vr-circle-fill 1s infinite ease-in-out;
}
.phone-vr-img-circle a {
  display: block;
  line-height: 37px;
}
.phone-vr-img-circle img {
  max-height: 25px;
  max-width: 27px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

#zalo-vr .phone-vr-circle-fill {
  box-shadow: 0 0 0 0 #2196f3;
  background-color: rgba(73, 172, 253, 0.7);
}

#zalo-vr .phone-vr-img-circle {
  background-color: #47acff;
}

.phone-vr > .phone-vr-circle-fill {
  box-shadow: 0 0 0 0 #f6c915;
  background-color: #fce278;
  opacity: 0.7;
}

.phone-vr > .phone-vr-img-circle {
  background-color: #f6c915;
}

@keyframes phone-vr-circle-fill {
  0% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
  }
  10% {
    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
  }
  20% {
    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
  }
  30% {
    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
  }
  40% {
    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
  }
  50% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
  }
  100% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
  }
}
@keyframes zoom {
  0% {
    transform: scale(0.9);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 15px transparent;
  }
  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 transparent;
  }
}
.card__item {
  flex: 0 0 calc((100% - 60px) / 3);
}
@media (max-width: 991.98px) {
  .card__item {
    flex: 0 0 calc((100% - 30px) / 2);
  }
}
@media (max-width: 575.98px) {
  .card__item {
    flex: 0 0 100%;
  }
}
.card__video {
  width: 100%;
  height: 280px;
}
.card__video iframe {
  width: 100%;
  height: 100%;
}
.card__thumb {
  width: auto;
  height: 280px;
  margin: auto;
  background-color: #dae3ea;
  overflow: hidden;
}
.card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-user-drag: none;
  user-select: none;
  cursor: pointer;
  transition: all 0.3s;
  cursor: pointer;
}
@media (max-width: 991.98px) {
  .card__thumb img {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.card__thumb img:hover {
  transform: scale(1.1);
}
.card__content {
  margin-top: 16px;
}
.card__head {
  display: flex;
  gap: 8px;
  align-items: center;
}
.card__date {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.card__day {
  width: 100%;
  height: 100%;
  text-align: center;
  background: #f4f4f4;
  display: block;
  font-size: 16px;
  line-height: 1.8;
  font-weight: bold;
  color: #f3cc29;
}
.card__month {
  width: 100%;
  height: 100%;
  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.07) inset;
  color: #fff;
  font-size: 0.9em;
  line-height: 1.8;
  text-align: center;
  padding: 0 0 2px;
  display: block;
  background-color: #f3cc29;
}
.card__month::first-letter {
  text-transform: capitalize;
}
.card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: 600;
  color: #333333;
  height: 48px;
  width: calc(100% - 68px);
  overflow: hidden;
  margin-top: 5px;
  transition: 0.2s;
  cursor: pointer;
}
@media (max-width: 991.98px) {
  .card__title {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.card__title:hover {
  color: #f3cc29;
}
.card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 16px;
  font-size: 1.5rem;
  line-height: 2rem;
  color: var(--color-gray-666);
  text-align: justify;
}

.project__row {
  display: flex;
  flex-direction: row;
  gap: 20px;
}
.project__nav-heading {
  height: 38px;
  position: relative;
  font-size: 1.8rem;
  line-height: 2;
  padding-left: 12px;
  text-transform: uppercase;
  color: #ffffff;
  background-color: var(--main-color);
  font-weight: 600;
  clip-path: polygon(100% 0%, 90% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
}
@media (max-width: 575.98px) {
  .project__nav-heading {
    width: 60%;
  }
}
.project__nav-heading::before {
  position: absolute;
  left: 0;
  display: block;
  content: "";
  width: 5px;
  height: 38px;
  background-color: var(--color-yellow);
}
.project__nav-list {
  background-color: #fff;
}
.project__nav-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  border-bottom: 1px solid #d3d3d3;
  padding-left: 6px;
}
.project__nav-thumb {
  width: 60px;
  height: 42px;
}
.project__nav-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.project__nav-link {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  height: 42px;
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 400;
  text-align: justify;
  color: var(--color-gray-333);
  transition: 0.2s;
}
@media (max-width: 991.98px) {
  .project__nav-link {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
@media (max-width: 767.98px) {
  .project__nav-link {
    padding-right: 6px;
  }
}
.project__nav-link:hover {
  color: var(--main-color);
  text-decoration: underline;
}

.blog__row {
  display: flex;
  flex-direction: row;
  gap: 20px;
}
.blog__category {
  margin-bottom: 20px;
  box-shadow: rgba(183, 183, 183, 0.2) 0px 2px 8px 0px;
}
.blog__category-heading {
  font-size: 1.8rem;
  line-height: 2.4;
  padding-left: 12px;
  color: var(--main-color);
  font-weight: 600;
  border-bottom: 2px solid #e1e1e1;
}
.blog__category-list {
  padding: 8px;
}
.blog__category-link {
  display: block;
  padding: 8px 4px;
  color: var(--color-gray-777);
  line-height: 1.6;
  border-bottom: 2px dashed #f1f1f1;
  font-weight: 500;
  transition: 0.2s;
}
@media (max-width: 991.98px) {
  .blog__category-link {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.blog__category-link:hover {
  color: var(--main-color);
}
.blog__category-link-active {
  color: var(--main-color);
}
.blog__nav-heading {
  height: 38px;
  position: relative;
  font-size: 1.8rem;
  line-height: 2;
  padding-left: 12px;
  text-transform: uppercase;
  color: #ffffff;
  background-color: #f6c915;
  font-weight: 600;
  clip-path: polygon(100% 0%, 90% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
}
@media (max-width: 575.98px) {
  .blog__nav-heading {
    width: 60%;
  }
}
.blog__nav-heading::before {
  position: absolute;
  left: 0;
  display: block;
  content: "";
  width: 5px;
  height: 38px;
  background-color: #ff0202;
}
.blog__nav-list {
  background-color: #fff;
}
.blog__nav-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  border-bottom: 1px solid #d3d3d3;
  padding-left: 6px;
}
.blog__nav-thumb {
  width: 100px;
  height: 84px;
}
.blog__nav-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.blog__nav-link {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 70%;
  height: 42px;
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 400;
  text-align: justify;
  color: #082e21;
  transition: 0.2s;
  font-weight: 500;
}
@media (max-width: 991.98px) {
  .blog__nav-link {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.blog__nav-link:hover {
  color: #f6c915;
  text-decoration: underline;
}

.contact {
  padding: 50px 0;
  margin: 0;
}
@media (max-width: 575.98px) {
  .contact {
    padding: 30px 0;
  }
}
.contact__heading {
  color: var(--main-color);
  font-weight: bold;
  font-size: 2.8rem;
  line-height: 1.5;
  text-transform: uppercase;
  padding-bottom: 13px;
  text-align: center;
}
@media (max-width: 575.98px) {
  .contact__heading {
    font-size: 2.3rem;
  }
}
.contact__sub-heading {
  color: var(--color-gray-777);
  font-size: 1.6rem;
  line-height: 1;
  font-style: italic;
  padding-bottom: 13px;
  text-align: center;
}
.contact__border-bottom {
  display: block;
  width: 45px;
  height: 3px;
  background-color: var(--main-color);
  margin: 0 auto 20px;
  text-align: center;
}

.map {
  padding-top: 50px;
  padding-bottom: 100px;
  background-color: #eaeff3;
}

.google-map {
  text-decoration: none;
  overflow: hidden;
  max-width: 1800px;
  max-width: 100%;
  height: 500px;
  border-radius: 12px;
}

.map-title {
  font-size: 3.7rem;
  font-weight: 500;
  line-height: 4.3rem;
  text-align: justify;
  color: var(--color-text-1-title);
  text-align: center;
  padding: 50px 0;
}

.main-home {
  background-color: var(--background-color-main);
}

.home__bg-gray {
  background-color: #eaeff3;
}

.me {
  padding: 50px 0;
  margin: 0;
  text-align: center;
}
@media (max-width: 575.98px) {
  .me {
    padding: 30px 0;
  }
}
.me__heading {
  color: var(--main-color);
  font-weight: bold;
  font-size: 2.8rem;
  line-height: 1.5;
  text-transform: uppercase;
  padding-bottom: 13px;
}
@media (max-width: 575.98px) {
  .me__heading {
    font-size: 2.3rem;
  }
}
.me__sub-heading {
  color: var(--color-gray-777);
  font-size: 1.6rem;
  line-height: 1;
  font-style: italic;
  padding-bottom: 13px;
}
.me__border-bottom {
  display: block;
  width: 45px;
  height: 3px;
  background-color: var(--main-color);
  margin: 0 auto 20px;
}
.me__text {
  color: var(--color-gray-777);
  font-size: 1.6rem;
  line-height: 1.4;
  padding-bottom: 20px;
}
.me__btn {
  background: var(--main-color);
  color: var(--main-color-white);
  line-height: 22px;
  display: inline-block;
  padding: 10px 20px;
  text-transform: uppercase;
}
@media (max-width: 991.98px) {
  .me__btn {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}

.plan {
  padding: 50px 0;
  margin: 0;
  border-color: #dae3ea;
  text-align: center;
}
@media (max-width: 575.98px) {
  .plan {
    padding: 30px 0;
  }
}
.plan__heading {
  color: var(--main-color);
  font-weight: bold;
  font-size: 2.8rem;
  line-height: 1.5;
  text-transform: uppercase;
  padding-bottom: 13px;
}
@media (max-width: 575.98px) {
  .plan__heading {
    font-size: 2.3rem;
  }
}
.plan__sub-heading {
  color: var(--color-gray-777);
  font-size: 1.6rem;
  line-height: 1;
  font-style: italic;
  padding-bottom: 13px;
}
.plan__border-bottom {
  display: block;
  width: 45px;
  height: 3px;
  background-color: var(--main-color);
  margin: 0 auto 20px;
}
.plan__card {
  display: block;
  height: 100%;
  background-color: var(--main-color-white);
  padding: 30px;
  border-radius: 4px;
  transition: 0.3s;
}
@media (max-width: 991.98px) {
  .plan__card {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.plan__card:hover {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.plan__card-heading {
  font-size: 2rem;
  line-height: 2.6rem;
  margin-bottom: 10px;
  color: #2e353e;
  text-align: center;
}
.plan__image {
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  margin-left: auto;
  margin-right: auto;
}
.plan__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.plan__desc {
  color: var(--color-gray-777);
  font-size: 1.6rem;
  line-height: 1.4;
  padding-bottom: 20px;
}

.home-project {
  padding: 50px 0;
  margin: 0;
  text-align: center;
}
@media (max-width: 575.98px) {
  .home-project {
    padding: 30px 0;
  }
}
.home-project__heading {
  color: var(--main-color);
  font-weight: bold;
  font-size: 2.8rem;
  line-height: 1.5;
  text-transform: uppercase;
  padding-bottom: 13px;
}
@media (max-width: 575.98px) {
  .home-project__heading {
    font-size: 2.3rem;
  }
}
.home-project__sub-heading {
  color: var(--color-gray-777);
  font-size: 1.6rem;
  line-height: 1;
  font-style: italic;
  padding-bottom: 13px;
}
.home-project__border-bottom {
  display: block;
  width: 45px;
  height: 3px;
  background-color: var(--main-color);
  margin: 0 auto 20px;
}
.home-project__mt30 {
  margin-top: 30px;
}
.home-project__title-img {
  padding-top: 20px;
  padding-bottom: 30px;
  text-transform: uppercase;
  color: #666666;
  font-size: 2rem;
  font-weight: 600;
  line-height: 2.4rem;
}
@media (max-width: 767.98px) {
  .home-project__title-img {
    font-size: 1.6rem;
  }
}
.home-project__desc {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.home-project__thumb {
  flex: 0 0 calc((100% - 40px) / 3);
  height: auto;
}
@media (max-width: 767.98px) {
  .home-project__thumb {
    flex: 0 0 100%;
    margin-bottom: 10px;
  }
}
.home-project__img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
  object-position: center;
}

.home-branch {
  padding: 50px 0;
  margin-bottom: 30px;
  text-align: center;
}
@media (max-width: 575.98px) {
  .home-branch {
    padding: 30px 0;
  }
}
.home-branch__heading {
  color: var(--main-color);
  font-weight: bold;
  font-size: 2.8rem;
  line-height: 1.5;
  text-transform: uppercase;
  padding-bottom: 13px;
}
@media (max-width: 575.98px) {
  .home-branch__heading {
    font-size: 2.3rem;
  }
}
.home-branch__sub-heading {
  color: var(--color-gray-777);
  font-size: 1.6rem;
  line-height: 1;
  font-style: italic;
  padding-bottom: 13px;
}
.home-branch__border-bottom {
  display: block;
  width: 45px;
  height: 3px;
  background-color: var(--main-color);
  margin: 0 auto 20px;
}
.home-branch__desc {
  padding-top: 20px;
}
.home-branch__row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 30px;
  flex-wrap: nowrap;
}
@media (max-width: 575.98px) {
  .home-branch__row {
    flex-wrap: wrap;
  }
}
.home-branch__thumb {
  width: 200px;
  height: 100px;
}
.home-branch__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.home-blog {
  padding: 50px 0;
  margin: 0;
  text-align: center;
}
@media (max-width: 575.98px) {
  .home-blog {
    padding: 30px 0;
  }
}
.home-blog__heading {
  color: var(--main-color);
  font-weight: bold;
  font-size: 2.8rem;
  line-height: 1.5;
  text-transform: uppercase;
  padding-bottom: 13px;
}
@media (max-width: 575.98px) {
  .home-blog__heading {
    font-size: 2.3rem;
  }
}
.home-blog__sub-heading {
  color: var(--color-gray-777);
  font-size: 1.6rem;
  line-height: 1;
  font-style: italic;
  padding-bottom: 13px;
}
.home-blog__border-bottom {
  display: block;
  width: 45px;
  height: 3px;
  background-color: var(--main-color);
  margin: 0 auto 20px;
}

.home-project {
  padding: 50px 0;
  margin: 0;
  text-align: center;
}
@media (max-width: 575.98px) {
  .home-project {
    padding: 30px 0;
  }
}
.home-project__heading {
  color: var(--main-color);
  font-weight: bold;
  font-size: 2.8rem;
  line-height: 1.5;
  text-transform: uppercase;
  padding-bottom: 13px;
}
@media (max-width: 575.98px) {
  .home-project__heading {
    font-size: 2.3rem;
  }
}
.home-project__sub-heading {
  color: var(--color-gray-777);
  font-size: 1.6rem;
  line-height: 1;
  font-style: italic;
  padding-bottom: 13px;
}
.home-project__border-bottom {
  display: block;
  width: 45px;
  height: 3px;
  background-color: var(--main-color);
  margin: 0 auto 20px;
}

.carousel {
  padding: 50px 0;
}
.carousel__card, .carousel__viewport, .carousel__track {
  touch-action: pan-y;
  -webkit-user-drag: none;
}
.carousel__viewport {
  position: relative;
  overflow: hidden;
  scroll-behavior: smooth;
  transition: all 0.8s;
}
.carousel__track {
  display: flex;
  gap: 30px;
}
@media (max-width: 575.98px) {
  .carousel__desc {
    padding: 0 15px;
  }
}
.carousel__heading {
  color: var(--main-color);
  font-weight: bold;
  font-size: 2.8rem;
  line-height: 1.5;
  text-transform: uppercase;
  padding-bottom: 13px;
}
@media (max-width: 575.98px) {
  .carousel__heading {
    font-size: 2.3rem;
  }
}
.carousel__row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.carousel__title {
  position: relative;
  width: 160px;
  height: 38px;
  background-color: var(--main-color);
  font-size: 1.8rem;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 3.6rem;
  text-align: left;
  padding-left: 20px;
  color: var(--main-color-white);
  clip-path: polygon(100% 0%, 86% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
}
.carousel__title::before {
  position: absolute;
  left: 0;
  display: block;
  content: "";
  width: 5px;
  height: 38px;
  background-color: var(--color-yellow);
}
.carousel__btn-row {
  display: flex;
  gap: 12px;
}
.carousel__btn {
  font-size: 1.4rem;
  padding: 3px 10px;
  border-radius: 4px;
  background-color: var(--color-btn-carousel);
  color: var(--main-color-white);
  transition: 0.3s;
}
.carousel__btn:hover {
  background-color: var(--main-color);
  cursor: pointer;
}

.progress-bar {
  width: 40%;
  height: 2px;
  margin-top: 20px;
  margin-right: auto;
  margin-left: auto;
  background: var(--color-white-ddd);
}

.progress {
  height: 100%;
  width: 0%;
  background: var(--main-color);
  border-radius: 3px;
  transition: width 0.2s;
}

.page__title {
  background: #eaeff3;
  padding: 25px 0;
}
@media (max-width: 575.98px) {
  .page__title {
    padding: 16px 0;
  }
}

.page__heading {
  font-size: 3rem;
  margin: 10px 0;
  text-transform: uppercase;
  font-weight: 300;
  color: var(--main-color);
  line-height: 46px;
}
@media (max-width: 575.98px) {
  .page__heading {
    font-size: 2rem;
    text-align: center;
  }
}

.breadcrumb {
  line-height: 1.6;
  margin-bottom: 8px;
  margin-top: 8px;
}
@media (max-width: 575.98px) {
  .breadcrumb {
    font-size: 1.4rem;
  }
}
.breadcrumb li {
  padding: 12px 0;
  display: inline;
}
.breadcrumb a {
  font-weight: 500;
  color: #333333;
  transition: 0.2s;
  cursor: pointer;
}
.breadcrumb a:hover {
  color: #f6c915;
}
.breadcrumb span {
  font-weight: 500;
  color: #777777;
}
.breadcrumb span::before {
  content: "/";
  margin-right: 8px;
}

.about {
  margin-bottom: 30px;
}
.about__row {
  padding: 50px 0;
}
@media (max-width: 575.98px) {
  .about__row {
    padding: 30px 0;
  }
}
.about__bg-dark {
  background-color: #eaeff3;
}
.about__row-reverse {
  flex-direction: row-reverse;
}
@media (max-width: 767.98px) {
  .about__row-reverse {
    flex-direction: column;
  }
}
@media (max-width: 575.98px) {
  .about__row-reverse {
    flex-direction: column;
  }
}
.about__title {
  color: var(--main-color);
  font-weight: bold;
  font-size: 2.8rem;
  line-height: 1.5;
  text-transform: uppercase;
  padding-bottom: 13px;
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}
@media (max-width: 575.98px) {
  .about__title {
    font-size: 1.8rem;
  }
}
.about__title::after {
  display: block;
  position: absolute;
  content: "";
  width: 60px;
  height: 3px;
  background-color: #ffcc33;
  right: 50%;
  bottom: -10px;
  transform: translateX(50%);
}
.about__sub-title {
  color: var(--color-gray-777);
  font-size: 1.6rem;
  line-height: 1.4;
  padding-bottom: 20px;
  text-align: justify;
}
.about__link {
  display: inline-block;
  margin-top: 30px;
  font-weight: 400;
  color: var(--color-text-desc);
  line-height: 2.2rem;
  text-align: justify;
  color: var(--color-text-link);
  border-bottom: 1px solid var(--color-text-link);
}
.about__link:hover {
  color: var(--color-text-link-hover);
  border-bottom: 1px solid var(--color-text-link-hover);
}
.about__thumb {
  position: relative;
  max-width: 100%;
  padding-top: 70%;
}
.about__img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  box-shadow: 5px 5px 12px rgba(48, 48, 48, 0.2);
  border-radius: 12px;
}

.main-product {
  margin-bottom: 30px;
  position: relative;
}

.product__nav {
  position: sticky;
  top: 0;
  height: 100vh;
  border: 2px solid #082e21;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.product__nav::-webkit-scrollbar {
  display: none;
}
.product__category-nav {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: #082e21;
  padding: 12px 18px;
}
.product__category-icon i {
  font-size: 2.1rem;
  color: #fff;
  padding: 4px;
  cursor: pointer;
}
.product__category-icon-close {
  display: none;
}
.product__category-heading {
  font-size: 2.1rem;
  font-weight: 600;
  font-family: "Noto Sans";
  color: #fff;
  line-height: 3.8rem;
}
.product__category-list {
  background-color: #fff;
}
.product__category-list > li:last-child {
  border: none;
}
.product__category-item {
  display: flex;
  align-items: center;
  padding: 0 22px;
  gap: 16px;
  border-bottom: 2px solid #eee;
  transition: 0.3s;
}
.product__category-item:hover {
  background-color: #d3d3d3;
}
.product__category-item > i {
  font-size: 1.4rem;
  color: #082e21;
}
.product__category-item-active {
  background-color: #d3d3d3;
}
.product__category-link {
  display: block;
  width: 100%;
  padding: 18px 0;
  font-size: 1.4rem;
  line-height: 2.1;
  font-weight: 600;
  color: #082e21;
  text-align: justify;
}
.product__nav-heading {
  font-size: 1.8rem;
  font-family: "Noto Sans";
  color: #fff;
  background-color: #082e21;
  font-weight: 600;
  padding: 18px 22px;
}
.product__nav-list {
  background-color: #fff;
  padding-bottom: 100px;
}
.product__nav-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 2px solid #d3d3d3;
  padding-left: 6px;
}
.product__nav-thumb {
  width: 60px;
  height: 42px;
  border-radius: 8px;
}
.product__nav-img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
  object-position: center;
}
.product__nav-link {
  display: block;
  width: 70%;
  font-family: "Open Sans";
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 400;
  text-align: justify;
  color: #082e21;
  padding: 8px 6px;
}
.product__nav-link:hover {
  color: #082e21;
  text-decoration: underline;
}

.products__padding {
  padding: 28px 0;
}
.products__title {
  font-size: 3.7rem;
  font-weight: 500;
  line-height: 4.3rem;
  text-align: justify;
  color: var(--color-text-1-title);
  font-size: 2.8rem;
  margin-bottom: 50px;
  text-align: center;
}
.products__row {
  display: flex;
  flex-wrap: wrap;
  gap: 50px 30px;
}

.container {
  position: relative;
}

.product-show__card-thumb {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 40px;
  overflow: hidden;
}
.product-show__card-view {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s;
  z-index: 10;
  display: none;
}
.product-show__card-view-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.product-show__icon-view {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 10px;
  font-size: 3rem;
  color: #333;
  cursor: pointer;
}
.product-show__icon-view:hover {
  color: #ff7f3e;
}
.product-show__icon-thumb {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  padding: 12px;
  color: rgba(66, 66, 66, 0.2);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 80px;
  background-color: hsla(0, 0%, 97%, 0.2);
  transition: all 0.3s;
}
.product-show__icon-thumb:hover {
  box-shadow: 0 2px 6px rgba(145, 145, 145, 0.1);
  background-color: hsl(0, 0%, 93%);
  color: hsl(20, 100%, 72%);
}
.product-show__icon-thumb-left {
  z-index: 10;
  border-radius: 0px 8px 8px 0px;
  left: 0;
}
.product-show__icon-thumb-right {
  border-radius: 8px 0px 0px 8px;
  right: 0;
}
.product-show__card-img {
  width: 100%;
  object-fit: cover;
  object-position: center;
  cursor: pointer;
}
.product-show__carousel {
  position: relative;
  padding-top: 30px;
}
.product-show__list-thumb {
  width: 83%;
  height: 106px;
  overflow-x: hidden;
  margin: 0 auto;
  scroll-behavior: smooth;
}
.product-show__list-img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  object-position: center;
  margin-left: 40px;
  border-radius: 25px;
  opacity: 0.6;
  cursor: pointer;
}
.product-show__list-img:first-child {
  margin-left: 0;
}
.product-show__list-img:hover {
  opacity: 1;
}
.product-show__icon {
  display: block;
  position: absolute;
  top: 57%;
  transform: translateY(-50%);
  font-size: 2.3rem;
  padding: 12px;
  color: #ff7f3e;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 60px;
  background-color: hsl(0, 0%, 97%);
  transition: all 0.3s;
}
.product-show__icon:hover {
  box-shadow: 0 2px 6px rgba(145, 145, 145, 0.1);
  background-color: hsl(0, 0%, 93%);
  color: hsl(20, 100%, 72%);
}
.product-show__icon-left {
  border-radius: 30px 8px 8px 30px;
  left: 0;
}
.product-show__icon-right {
  border-radius: 8px 30px 30px 8px;
  right: 0;
}
.product-show__content {
  padding-top: 20px;
}
.product-show__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 68px;
  font-size: 3.7rem;
  font-weight: 500;
  line-height: 4.3rem;
  text-align: justify;
  color: var(--color-text-1-title);
  line-height: 3.4rem;
}
.product-show__sub-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.6rem;
  line-height: 2.2rem;
  color: #333;
  text-align: justify;
}
.product-show__block-cost {
  display: flex;
  gap: 12px;
  padding-top: 25px;
}
.product-show__cost {
  font-size: 2.2rem;
  font-weight: 500;
  color: #ff7f3e;
}
.product-show__price {
  font-size: 2.2rem;
  font-weight: 500;
  color: #1679ab;
  font-family: "Noto Serif KR", serif;
}
.product-show__type-voltage {
  padding-top: 25px;
}
.product-show__specifications {
  font-size: 1.8rem;
  font-weight: 500;
  color: #333;
}
.product-show__specifications-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 25px;
}
.product-show__label {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 6px;
  background-color: #dddddd;
  border: 1px solid #ff7f3e;
  font-weight: 400;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.product-show__specifications-item input {
  display: none;
}
.product-show__type-watt {
  padding-top: 25px;
}
.product-show__act {
  padding-top: 50px;
}
.product-show__link {
  display: block;
  padding: 8px 70px;
  color: #525252;
  font-size: 2.2rem;
  border-radius: 24px;
  font-family: "Noto Serif KR", serif;
  border: 2px solid #ff7f3e;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  box-shadow: 0 3px 14px rgba(126, 126, 126, 0.2);
}
.product-show__link:hover {
  background-color: #ff7f3e;
  border-color: #ff7f3e;
  color: #fff6e9;
}

.showOn {
  display: block;
  z-index: 100;
}

.active {
  opacity: 1;
}

.fade {
  animation-name: fade;
  animation-duration: 1s;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
.activeSpecifications {
  background-color: #ff7f3e;
  border-color: #ff7f3e;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.information {
  padding: 100px 0;
}
.information__title {
  font-size: 2.8rem;
  font-weight: 500;
  line-height: 3.4rem;
  color: #333;
}
.information__title-table {
  padding-top: 30px;
}
.information__desc {
  width: 100%;
  height: 100%;
  padding: 15px;
  font-size: 1.6rem;
  line-height: 2.2rem;
  color: #333;
  text-align: justify;
  border: 1px solid #ccc;
}
.information__sub-title {
  padding-top: 30px;
  font-size: 1.6rem;
  line-height: 2.2rem;
  color: #333;
  text-align: justify;
}
.information__row {
  margin-top: 30px;
  border: 1px solid #ccc;
}

.login {
  background: radial-gradient(circle, #202047 0, #020917 100%);
}
@media (max-width: 767.98px) {
  .login {
    height: auto;
  }
}
.login__row {
  padding-top: 50px;
}
.login__logo {
  display: flex;
  align-items: center;
  height: 80px;
  width: 80px;
}
.login__logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.login-form {
  border: 2px solid #8b8b8b;
  padding: 30px;
  margin-top: 100px;
  border-radius: 26px;
}
.login-form__title {
  font-size: 3.7rem;
  font-weight: 500;
  line-height: 4.3rem;
  text-align: justify;
  color: var(--color-text-heading);
  text-align: center;
  padding: 50px 0;
}
@media (max-width: 1199.98px) {
  .login-form {
    margin-top: 0;
    margin-bottom: 100px;
  }
}

.login__form-group, .login__form-label {
  display: block;
}
.login__form-group {
  margin-bottom: 50px;
  flex-grow: 1;
}
.login__form-group:focus-within .login__form-label {
  color: #fff;
}
.login__form-group:focus-within .login__form-input {
  border-color: #fff;
}
.login__form-label {
  font-weight: 600;
  font-size: 1.6rem;
  color: #aaaaaa;
}
.login__form-input {
  width: 100%;
  font-size: 1.6rem;
  border-bottom: 2px solid #afa8c4;
  padding: 8px 0 10px;
  color: hsl(0, 0%, 66%);
}
.login__form-input::placeholder {
  color: #9b93b3;
}
.login__submit {
  display: block;
  margin: 0 auto;
  width: 160px;
  height: 50px;
  background-color: #3a208c;
  border-radius: 16px;
  font-size: 1.6rem;
  font-weight: 500;
  color: #d6d6d6;
  cursor: pointer;
  box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.3s;
}
.login__submit:hover {
  background-color: hsl(254, 63%, 44%);
  transform: translateY(-2px);
}

.main-project {
  margin-bottom: 80px;
}

.project__article {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.project__date {
  font-size: 12px;
  font-style: italic;
  color: #777;
}
.project__date::first-letter {
  text-transform: capitalize;
}
.project__author {
  font-size: 12px;
  font-style: italic;
  color: #777;
}
.project__content {
  padding-top: 50px;
}
@media (max-width: 575.98px) {
  .project__content {
    padding-top: 30;
  }
}

.blog__card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
}
.blog__item {
  flex: 0 0 calc((100% - 30px) / 2);
}
@media (max-width: 991.98px) {
  .blog__item {
    flex: 0 0 calc((100% - 30px) / 2);
  }
}
@media (max-width: 767.98px) {
  .blog__item {
    flex: 0 0 100%;
  }
}
.blog__thumb {
  width: auto;
  height: 280px;
  margin: auto;
  background-color: #dae3ea;
  overflow: hidden;
}
.blog__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: all 0.3s;
  cursor: pointer;
}
.blog__thumb img:hover {
  transform: scale(1.1);
}
.blog__content {
  margin-top: 16px;
}
.blog__head {
  display: flex;
  gap: 8px;
  align-items: center;
}
.blog__date {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.blog__day {
  width: 100%;
  height: 100%;
  text-align: center;
  background: #f4f4f4;
  display: block;
  font-size: 16px;
  line-height: 1.8;
  font-weight: bold;
  color: #f3cc29;
}
.blog__month {
  width: 100%;
  height: 100%;
  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.07) inset;
  color: #fff;
  font-size: 0.9em;
  line-height: 1.8;
  text-align: center;
  padding: 0 0 2px;
  display: block;
  background-color: #f3cc29;
}
.blog__month::first-letter {
  text-transform: capitalize;
}
.blog__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: 600;
  color: #333333;
  height: 48px;
  width: calc(100% - 68px);
  overflow: hidden;
  margin-top: 5px;
  transition: 0.2s;
  cursor: pointer;
}
.blog__title:hover {
  color: #f3cc29;
}
.blog__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 16px;
  font-size: 1.5rem;
  line-height: 2rem;
  color: var(--color-gray-666);
  text-align: justify;
}

.card__service-item {
  flex: 0 0 calc((100% - 30px) / 2);
}
@media (max-width: 991.98px) {
  .card__service-item {
    flex: 0 0 calc((100% - 30px) / 2);
  }
}
@media (max-width: 575.98px) {
  .card__service-item {
    flex: 0 0 100%;
  }
}

.service__content {
  padding: 30px 0;
}
.service__heading {
  color: var(--main-color);
  font-weight: bold;
  font-size: 2.8rem;
  line-height: 1.5;
  text-transform: uppercase;
  padding-bottom: 13px;
  text-align: center;
}
@media (max-width: 575.98px) {
  .service__heading {
    font-size: 2rem;
  }
}
.service__title {
  color: var(--main-color);
  font-weight: bold;
  font-size: 2.8rem;
  line-height: 1.5;
  text-transform: uppercase;
  padding-bottom: 13px;
  font-size: 1.8rem;
  text-transform: none;
  line-height: 1.6;
}
.service__sub-title {
  color: var(--color-gray-333);
  font-weight: 500;
  line-height: 1.6;
}
.service__thumb {
  width: 80%;
  height: auto;
  margin: 0 auto;
  padding: 18px 0;
}
.service__image {
  width: 100%;
  height: 100%;
}
.service__desc-img {
  color: var(--color-gray-777);
  font-size: 1.6rem;
  line-height: 1.4;
  padding-bottom: 20px;
  display: block;
  font-style: italic;
  text-align: center;
  padding-bottom: 12px;
}
.service__pagh {
  color: var(--color-gray-777);
  font-size: 1.6rem;
  line-height: 1.4;
  padding-bottom: 20px;
  color: #333;
  padding-bottom: 12px;
}
.service__list {
  padding-left: 30px;
  list-style: disc;
}
.service__item {
  color: var(--color-gray-777);
  font-size: 1.6rem;
  line-height: 1.4;
  padding-bottom: 20px;
  color: #333;
  padding-bottom: 12px;
}

.main-admin-home {
  background-color: var(--bg-admin);
  min-height: 100vh;
  padding-top: 50px;
}
@media (max-width: 991.98px) {
  .main-admin-home {
    position: relative;
  }
}

.body-admin-home {
  padding-bottom: 60px;
  position: relative;
}
@media (max-width: 991.98px) {
  .body-admin-home {
    position: static;
  }
}

.admin-home {
  padding-left: 336px;
}
@media (max-width: 991.98px) {
  .admin-home {
    padding-left: 0;
    padding-top: 150px;
  }
}
.admin-home__heading {
  font-size: 3.7rem;
  font-weight: 500;
  line-height: 4.3rem;
  text-align: justify;
  color: var(--color-text-heading);
  color: var(--color-text-1-title);
  margin-bottom: 50px;
  text-align: center;
}

.main-admin-logo {
  min-height: 100vh;
  background-color: var(--bg-admin);
}
@media (max-width: 991.98px) {
  .main-admin-logo {
    position: relative;
  }
}

.body-admin-logo {
  padding: 58px 0;
  position: relative;
}
@media (max-width: 991.98px) {
  .body-admin-logo {
    padding: 0;
    position: static;
  }
}

.admin-logo {
  padding-left: 336px;
}
@media (max-width: 991.98px) {
  .admin-logo {
    padding-left: 0;
    padding-top: 150px;
  }
}
.admin-logo__header {
  font-size: 3.7rem;
  font-weight: 500;
  line-height: 4.3rem;
  text-align: justify;
  color: var(--color-text-heading);
  color: var(--color-text-1-title);
  margin-bottom: 50px;
  text-align: center;
}
.admin-logo__heading {
  font-size: 3.7rem;
  font-weight: 500;
  line-height: 4.3rem;
  text-align: justify;
  color: var(--color-text-1-title);
}
.admin-logo__desktop, .admin-logo__mobile {
  padding: 30px 0;
  display: flex;
  align-items: center;
  gap: 100px;
}
.admin-logo__mobile-form-head, .admin-logo__desktop-form-head {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 4.3rem;
  text-align: justify;
  color: var(--color-text-1-title);
  font-size: 18px;
}
.admin-logo__desktop-form, .admin-logo__mobile-form {
  max-width: 400px;
  width: 100%;
  background: #fff;
  padding: 30px;
  border-radius: 30px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.admin-logo__area {
  position: relative;
  width: 100%;
  height: 240px;
  background: var(--grey);
  margin-bottom: 30px;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.admin-logo__area .icon {
  font-size: 100px;
}
.admin-logo__area h3 {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 6px;
}
.admin-logo__area p {
  display: flex;
  align-items: center;
  color: #999;
}
.admin-logo__area p span {
  font-weight: 600;
}
.admin-logo__area img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  z-index: 100;
}
.admin-logo__area::before {
  content: attr(data-img);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-weight: 500;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 200;
}
.admin-logo__area.active:hover::before {
  opacity: 1;
}
.admin-logo__action-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
.admin-logo__add-img {
  width: 52px;
  height: 52px;
  background-color: #fff2e0;
  border-radius: 50%;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}
@media (max-width: 991.98px) {
  .admin-logo__add-img {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.admin-logo__add-img:hover {
  background-color: #ffe3bb;
  color: #ff4f0f;
}
.admin-logo__add-img i {
  font-size: 28px;
  padding: 8px;
  pointer-events: auto;
  cursor: pointer;
}
.admin-logo__btn {
  color: var(--btn-ad-color);
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 8px 60px;
  background-color: var(--btn-ad-bg-color);
  border: 2px solid var(--btn-ad-color);
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  pointer-events: none;
  opacity: 0.6;
}
.admin-logo__btn:hover {
  background-color: var(--btn-ad-bg-color-hover);
  color: var(--btn-ad-color-hover);
}
.admin-logo__btn:active {
  background-color: var(--btn-ad-bg-color-strong);
}

.main-admin-product {
  background-color: var(--bg-admin);
  min-height: 100vh;
  padding-bottom: 60px;
}
@media (max-width: 991.98px) {
  .main-admin-product {
    position: relative;
  }
}

.body-admin-product {
  padding: 58px 0;
  position: relative;
}
@media (max-width: 991.98px) {
  .body-admin-product {
    padding: 0;
    position: static;
  }
}

.admin-product {
  padding-left: 336px;
}
@media (max-width: 991.98px) {
  .admin-product {
    padding-left: 0;
    padding-top: 150px;
  }
}
.admin-product__heading {
  font-size: 3.7rem;
  font-weight: 500;
  line-height: 4.3rem;
  text-align: justify;
  color: var(--color-text-heading);
  color: var(--color-text-1-title);
  margin-bottom: 50px;
  text-align: center;
}
.admin-product__container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 70px 30px;
}
.admin-product__card {
  width: 270px;
  border-radius: 16px;
  transition: all 0.4s;
  overflow: hidden;
  background-color: #fff;
  cursor: pointer;
}
@media (max-width: 991.98px) {
  .admin-product__card {
    width: calc(50% - 30px);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
@media (max-width: 767.98px) {
  .admin-product__card {
    width: 100%;
  }
}
.admin-product__card:hover {
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  background-color: #fcfcfc;
  transform: translateY(-2px);
}
.admin-product__card__card:hover .admin-product__card__card-img {
  transform: scale(1.1);
}
.admin-product__card-thumb {
  width: 100%;
  height: 186px;
  border-bottom: 2px solid #f0f0f0;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}
.admin-product__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s;
}
.admin-product__desc {
  padding: 8px 12px;
}
.admin-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "Fz-Poppins";
  height: 60px;
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 3rem;
  padding: 0 6px;
  text-align: justify;
  color: var(--color-text-primary);
}
.admin-product__sub-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "Open Sans";
  height: 46px;
  font-size: 1.4rem;
  line-height: 2.3rem;
  color: #777;
  text-align: justify;
}
.admin-product__price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
}
.admin-product__cost {
  font-size: 1.8rem;
  font-family: "Fz Poppins";
  font-weight: 600;
  color: #fe7743;
}
.admin-product__unit {
  font-size: 1.4rem;
  margin-left: 6px;
  font-family: "Fz Poppins";
  font-weight: 500;
  color: #fe7743;
}
.admin-product__star i {
  font-size: 1.2rem;
  color: #ffd63a;
}
.admin-product__act {
  padding: 10px 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-product__btn {
  color: var(--color-text-title);
  text-align: center;
  font-size: 2rem;
  border-radius: 8px;
  border: 2px solid #dddddd;
  cursor: pointer;
  transition: all 0.3s ease;
}
.admin-product__btn:hover {
  background-color: #ff7f3e;
  border-color: #ff7f3e;
  color: #fff6e9;
}
.admin-product__btn i {
  padding: 10px 12px;
}

.main-admin-add-product {
  background-color: var(--bg-admin);
  padding-bottom: 50px;
}
@media (max-width: 991.98px) {
  .main-admin-add-product {
    position: relative;
  }
}

.body-admin-add-product {
  padding: 58px 0;
  position: relative;
}
@media (max-width: 991.98px) {
  .body-admin-add-product {
    padding: 0;
    position: static;
  }
}

.admin-add-product {
  padding-left: 336px;
}
@media (max-width: 991.98px) {
  .admin-add-product {
    padding-left: 0;
    padding-top: 150px;
  }
}
.admin-add-product__header {
  font-size: 3.7rem;
  font-weight: 500;
  line-height: 4.3rem;
  text-align: justify;
  color: var(--color-text-heading);
  color: var(--color-text-1-title);
  margin-bottom: 50px;
  text-align: center;
}
.admin-add-product__contents {
  margin-bottom: 38px;
  padding: 16px;
  border: 2px dashed #ccc;
  border-radius: 8px;
}
.admin-add-product__form-mgs {
  padding: 12px;
  font-size: 1.2rem;
  color: green;
}
.admin-add-product__form-mgs-active {
  color: red;
}
.admin-add-product__form-group {
  margin-bottom: 30px;
}
.admin-add-product__form-group {
  margin-bottom: 30px;
}
.admin-add-product__form-group, .admin-add-product__form-label {
  display: block;
}
.admin-add-product__form-group:focus-within .admin-add-product__form-label {
  color: #7b55f4;
}
.admin-add-product__form-group:focus-within .admin-add-product__form-input {
  border-color: #7b55f4;
}
.admin-add-product__form-label {
  font-weight: 600;
  font-size: 1.3rem;
  color: #1e104d;
  padding-bottom: 12px;
}
.admin-add-product__title {
  display: block;
  font-size: 1.8rem;
  color: var(--color-text-1-title);
  margin-bottom: 16px;
}
.admin-add-product__form-input {
  width: 100%;
  font-size: 1.5rem;
  border-bottom: 2px solid #afa8c4;
  padding: 8px 0 14px;
  color: #321f70;
  caret-color: #7b55f4;
}
.admin-add-product__form-input::placeholder {
  color: #9b93b3;
}
.admin-add-product__form-text-area {
  width: 100%;
  min-height: 50px;
  margin-top: 15px;
  border: none;
  border-bottom: 2px solid #afa8c4;
  font-size: 1.4rem;
  font-family: "Fz Poppins";
  resize: none;
  outline: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.admin-add-product__form-text-area::-webkit-scrollbar {
  display: none;
}
.admin-add-product__add-input {
  margin-bottom: 16px;
}
.admin-add-product__add-input label {
  display: block;
  margin-bottom: 16px;
}
.admin-add-product__add-input input {
  width: 240px;
  font-size: 1.5rem;
  border: 1px solid #afa8c4;
  border-radius: 4px;
  padding: 4px 0 4px 8px;
  color: #321f70;
  caret-color: #7b55f4;
}
.admin-add-product__add-input input::placeholder {
  color: #9b93b3;
}
.admin-add-product__add-input__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
}
.admin-add-product__property-list {
  padding-left: 20px;
  margin-bottom: 24px;
}
.admin-add-product__property-list p {
  margin-bottom: 16px;
}
.admin-add-product__property-list p span {
  font-weight: 600;
  font-size: 1.6rem;
}
.admin-add-product__property-list p input {
  width: 240px;
  font-size: 1.5rem;
  border: 1px solid #afa8c4;
  border-radius: 4px;
  padding: 4px 0 4px 8px;
  color: #321f70;
  caret-color: #7b55f4;
}
.admin-add-product__property-list p input::placeholder {
  color: #9b93b3;
}
.admin-add-product__property-list i {
  margin-left: 18px;
  display: inline-block;
  color: var(--btn-ad-color);
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 6px 10px;
  background-color: var(--btn-ad-bg-color);
  border: 2px solid var(--btn-ad-color);
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  font-size: 1.4rem;
  background-color: #fff;
}
.admin-add-product__property-list i:hover {
  background-color: var(--btn-ad-bg-color-hover);
  color: var(--btn-ad-color-hover);
}
.admin-add-product__property-list i:active {
  background-color: var(--btn-ad-bg-color-strong);
}
.admin-add-product__property-item {
  margin-left: 30px;
  list-style-type: circle;
  padding: 6px 0;
}
.admin-add-product__property-item i {
  display: inline-block;
  color: var(--btn-ad-color);
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 6px 10px;
  background-color: var(--btn-ad-bg-color);
  border: 2px solid var(--btn-ad-color);
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  font-size: 1.4rem;
  background-color: #fff;
}
.admin-add-product__property-item i:hover {
  background-color: var(--btn-ad-bg-color-hover);
  color: var(--btn-ad-color-hover);
}
.admin-add-product__property-item i:active {
  background-color: var(--btn-ad-bg-color-strong);
}
.admin-add-product__form-price {
  width: 240px;
  font-size: 1.5rem;
  border: 1px solid #afa8c4;
  border-radius: 4px;
  padding: 8px 10px;
  color: #321f70;
  caret-color: #7b55f4;
}
.admin-add-product__form-price::placeholder {
  color: #9b93b3;
}
.admin-add-product__btn-submit {
  display: inline-block;
  color: var(--btn-ad-color);
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 6px 10px;
  background-color: var(--btn-ad-bg-color);
  border: 2px solid var(--btn-ad-color);
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  font-size: 1.4rem;
  background-color: #fff;
}
.admin-add-product__btn-submit:hover {
  background-color: var(--btn-ad-bg-color-hover);
  color: var(--btn-ad-color-hover);
}
.admin-add-product__btn-submit:active {
  background-color: var(--btn-ad-bg-color-strong);
}
.admin-add-product__btn-add {
  display: inline-block;
  color: var(--btn-ad-color);
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 6px 10px;
  background-color: var(--btn-ad-bg-color);
  border: 2px solid var(--btn-ad-color);
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  margin-bottom: 30px;
  text-transform: none;
}
.admin-add-product__btn-add:hover {
  background-color: var(--btn-ad-bg-color-hover);
  color: var(--btn-ad-color-hover);
}
.admin-add-product__btn-add:active {
  background-color: var(--btn-ad-bg-color-strong);
}
.admin-add-product__submit {
  display: inline-block;
  margin-top: 30px;
  color: var(--btn-ad-color);
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 11px 28px;
  background-color: var(--btn-ad-bg-color);
  border: 2px solid var(--btn-ad-color);
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  background-color: #fff;
}
.admin-add-product__submit:hover {
  background-color: var(--btn-ad-bg-color-hover);
  color: var(--btn-ad-color-hover);
}
.admin-add-product__submit:active {
  background-color: var(--btn-ad-bg-color-strong);
}
.admin-add-product__form-row {
  display: flex;
  flex-direction: row;
  gap: 30px;
  flex-wrap: wrap;
  padding-bottom: 30px;
}
.admin-add-product__create-card {
  display: none;
  flex-direction: row;
  gap: 30px;
  flex-wrap: wrap;
}
.admin-add-product__card {
  width: 200px;
  height: 270px;
  border-radius: 12px;
  background-color: var(--grey);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.admin-add-product__card i {
  display: block;
  padding: 12px;
  color: var(--admin-btn-color);
  font-size: 2rem;
  cursor: pointer;
  transition: 0.3s;
  text-align: right;
}
@media (max-width: 991.98px) {
  .admin-add-product__card i {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.admin-add-product__card i:hover {
  color: var(--admin-btn-color-hover);
}
.admin-add-product__card-plus {
  width: 200px;
  height: 270px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.admin-add-product__card-img {
  width: 190px;
  margin: 0 auto;
  background-color: var(--grey);
}
.admin-add-product__card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.admin-add-product__card-content {
  padding: 12px 20px;
  margin-bottom: 30px;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.admin-add-product__card-content .icon {
  font-size: 100px;
  cursor: pointer;
  color: var(--admin-btn-color);
  transition: 0.3s;
}
@media (max-width: 991.98px) {
  .admin-add-product__card-content .icon {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.admin-add-product__card-content .icon:hover {
  color: var(--admin-btn-color-hover);
}
.admin-add-product__card-content h3 {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 6px;
}
.admin-add-product__card-content p {
  display: flex;
  align-items: center;
  color: #999;
}
.admin-add-product__select {
  margin-bottom: 50px;
}
.admin-add-product__select label {
  display: block;
  margin-bottom: 16px;
  color: var(--color-text-nav);
  font-size: 1.4rem;
  font-weight: 600;
}
.admin-add-product__select select {
  padding: 4px 12px;
  border: 2px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  background-color: #fff;
  color: var(--color-text-nav);
  font-size: 1.4rem;
}

.admin-header-menu {
  background-color: var(--bg-nav-admin);
}

.admin-header-menu {
  width: 288px;
  height: 100vh;
  position: fixed;
  top: 0;
}
@media (max-width: 991.98px) {
  .admin-header-menu {
    width: 100%;
    inset: 0;
  }
}
.admin-header-menu__nav {
  height: 100%;
}
.admin-header-menu__nav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3b9797;
  height: 100px;
}
@media (max-width: 991.98px) {
  .admin-header-menu__nav-row {
    justify-content: space-between;
    padding: 0 20px;
    height: 80px;
  }
}
.admin-header-menu__logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-header-menu__logo-img {
  height: 60px;
  width: 60px;
}
.admin-header-menu__toggle-menu {
  display: none;
}
@media (max-width: 991.98px) {
  .admin-header-menu__toggle-menu {
    display: block;
  }
}
.admin-header-menu__toggle-menu i {
  font-size: 3rem;
  color: #333333;
  padding: 12px;
  cursor: pointer;
  transition: 0.3s;
}
@media (max-width: 991.98px) {
  .admin-header-menu__toggle-menu i {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.admin-header-menu__toggle-menu i:hover {
  color: #e67514;
}
.admin-header-menu__toggle-menu i:last-child {
  display: none;
}
.admin-header-menu__list {
  display: block;
  padding-top: 8px;
  overflow-y: auto;
  scroll-behavior: smooth;
  height: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 100px;
}
.admin-header-menu__list::-webkit-scrollbar {
  display: none;
}
.admin-header-menu__block {
  padding-bottom: 8px;
}
.admin-header-menu__title {
  padding: 6px 12px;
  border-bottom: 2px solid hsl(181, 40%, 33%);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 1px;
  font-family: var(--font-IBM-Sans-Condensed);
  color: var(--color-text-nav-admin);
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  color: #70cddb;
  font-size: 1.8rem;
  cursor: default;
}
.admin-header-menu li {
  padding: 12px 12px;
}
.admin-header-menu__items {
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 1px;
  font-family: var(--font-IBM-Sans-Condensed);
  color: var(--color-text-nav-admin);
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
@media (max-width: 991.98px) {
  .admin-header-menu__items {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.admin-header-menu__items:hover {
  color: var(--color-text-nav-hover-light);
}

.active-nav {
  color: var(--color-text-nav-hover-light);
}

.admin-top-act {
  padding-left: 12px;
  margin-bottom: 20px;
}
.admin-top-act__sign-in {
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 1px;
  font-family: var(--font-IBM-Sans-Condensed);
  color: var(--color-text-nav-admin);
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  color: #e67514;
  font-size: 1.8rem;
  cursor: pointer;
}
@media (max-width: 991.98px) {
  .admin-top-act__sign-in {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.admin-top-act__sign-in:hover {
  color: hsl(28, 84%, 60%);
}

.main-admin-banner-image {
  background-color: var(--bg-admin);
}
@media (max-width: 991.98px) {
  .main-admin-banner-image {
    position: relative;
  }
}

.body-admin-banner-image {
  padding: 58px 0;
  position: relative;
}
@media (max-width: 991.98px) {
  .body-admin-banner-image {
    padding: 0;
    position: static;
  }
}

.admin-banner-image {
  padding-left: 336px;
  padding-bottom: 30px;
}
@media (max-width: 991.98px) {
  .admin-banner-image {
    padding-left: 0;
    padding-top: 150px;
  }
}
.admin-banner-image__heading {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 4.3rem;
  text-align: justify;
  color: var(--color-text-1-title);
  padding: 16px 6px;
}
.admin-banner-image__form {
  border: 2px dashed #ccc;
  border-radius: 12px;
  padding: 18px;
}
.admin-banner-image__form-row {
  display: flex;
  flex-direction: row;
  gap: 30px;
  flex-wrap: wrap;
  padding-bottom: 30px;
}
.admin-banner-image__create-card {
  display: none;
  flex-direction: row;
  gap: 30px;
  flex-wrap: wrap;
}
.admin-banner-image__card {
  width: 200px;
  height: 270px;
  border-radius: 12px;
  background-color: var(--grey);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.admin-banner-image__card i {
  display: block;
  padding: 12px;
  color: var(--admin-btn-color);
  font-size: 2rem;
  cursor: pointer;
  transition: 0.3s;
  text-align: right;
}
@media (max-width: 991.98px) {
  .admin-banner-image__card i {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.admin-banner-image__card i:hover {
  color: var(--admin-btn-color-hover);
}
.admin-banner-image__card-plus {
  width: 200px;
  height: 270px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.admin-banner-image__card-img {
  width: 190px;
  margin: 0 auto;
  background-color: var(--grey);
}
.admin-banner-image__card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.admin-banner-image__card-content {
  padding: 12px 20px;
  margin-bottom: 30px;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.admin-banner-image__card-content .icon {
  font-size: 100px;
  cursor: pointer;
  color: var(--admin-btn-color);
  transition: 0.3s;
}
@media (max-width: 991.98px) {
  .admin-banner-image__card-content .icon {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.admin-banner-image__card-content .icon:hover {
  color: var(--admin-btn-color-hover);
}
.admin-banner-image__card-content h3 {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 6px;
}
.admin-banner-image__card-content p {
  display: flex;
  align-items: center;
  color: #999;
}
.admin-banner-image__btn {
  color: var(--btn-ad-color);
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 8px 40px;
  background-color: var(--btn-ad-bg-color);
  border: 2px solid var(--btn-ad-color);
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  pointer-events: none;
  opacity: 0.6;
}
.admin-banner-image__btn:hover {
  background-color: var(--btn-ad-bg-color-hover);
  color: var(--btn-ad-color-hover);
}
.admin-banner-image__btn:active {
  background-color: var(--btn-ad-bg-color-strong);
}

.main-admin-content-banner {
  background-color: var(--bg-admin);
  min-height: 100vh;
}
@media (max-width: 991.98px) {
  .main-admin-content-banner {
    position: relative;
  }
}

.body-admin-content-banner {
  padding: 58px 0;
  position: relative;
}
@media (max-width: 991.98px) {
  .body-admin-content-banner {
    padding: 0;
    position: static;
  }
}

.admin-content-banner {
  padding-left: 336px;
}
@media (max-width: 991.98px) {
  .admin-content-banner {
    padding-left: 0;
    padding-top: 150px;
  }
}
.admin-content-banner__content {
  padding: 12px;
  border: 2px dashed #ccc;
  border-radius: 8px;
  margin-bottom: 30px;
}
.admin-content-banner__create {
  padding-bottom: 30px;
}
.admin-content-banner__header {
  font-size: 3.7rem;
  font-weight: 500;
  line-height: 4.3rem;
  text-align: justify;
  color: var(--color-text-heading);
  color: var(--color-text-1-title);
  margin-bottom: 50px;
  text-align: center;
}
.admin-content-banner__form-group {
  margin-bottom: 30px;
}
.admin-content-banner__form-group, .admin-content-banner__form-label {
  display: block;
}
.admin-content-banner__form-group:focus-within .admin-content-banner__form-label {
  color: #7b55f4;
}
.admin-content-banner__form-group:focus-within .admin-content-banner__form-input {
  border-color: #7b55f4;
}
.admin-content-banner__form-label {
  font-weight: 600;
  font-size: 1.3rem;
  color: #1e104d;
}
.admin-content-banner__form-input {
  width: 100%;
  font-size: 1.5rem;
  border-bottom: 2px solid #afa8c4;
  padding: 8px 0 14px;
  color: #321f70;
  caret-color: #7b55f4;
}
.admin-content-banner__form-input::placeholder {
  color: #9b93b3;
}
.admin-content-banner__act {
  display: flex;
  align-items: center;
  gap: 30px;
}
.admin-content-banner__btn {
  color: var(--btn-ad-color);
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 6px 30px;
  background-color: var(--btn-ad-bg-color);
  border: 2px solid var(--btn-ad-color);
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  display: inline-block;
}
.admin-content-banner__btn:hover {
  background-color: var(--btn-ad-bg-color-hover);
  color: var(--btn-ad-color-hover);
}
.admin-content-banner__btn:active {
  background-color: var(--btn-ad-bg-color-strong);
}
.admin-content-banner__btn-strong {
  color: var(--btn-ad-bg-color-strong);
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 6px 30px;
  background-color: var(--btn-ad-bg-color);
  border: 2px solid var(--btn-ad-bg-color-strong);
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  display: inline-block;
}
.admin-content-banner__btn-strong:hover {
  background-color: var(--btn-ad-bg-color-strong);
  color: var(--btn-ad-color-hover);
}
.admin-content-banner__btn-strong:active {
  background-color: var(--btn-ad-bg-color-strong);
}
.admin-content-banner__btn-del {
  color: var(--btn-ad-bg-color-danger);
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 6px 30px;
  background-color: var(--btn-ad-bg-color);
  border: 2px solid var(--btn-ad-bg-color-danger);
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  display: inline-block;
}
.admin-content-banner__btn-del:hover {
  background-color: var(--btn-ad-bg-color-danger);
  color: var(--btn-ad-color-hover);
}
.admin-content-banner__btn-del:active {
  background-color: var(--btn-ad-bg-color-strong);
}

.main-admin-content-home {
  background-color: var(--bg-admin);
  min-height: 100vh;
}
@media (max-width: 991.98px) {
  .main-admin-content-home {
    position: relative;
  }
}

.body-admin-content-home {
  position: relative;
}
@media (max-width: 991.98px) {
  .body-admin-content-home {
    padding-bottom: 60px;
    position: static;
  }
}

.admin-content-home {
  padding-left: 336px;
  padding-top: 100px;
  padding-bottom: 100px;
}
@media (max-width: 991.98px) {
  .admin-content-home {
    padding-left: 0;
    padding-top: 150px;
  }
}
.admin-content-home__header {
  font-size: 3.7rem;
  font-weight: 500;
  line-height: 4.3rem;
  text-align: justify;
  color: var(--color-text-heading);
  color: var(--color-text-1-title);
  margin-bottom: 50px;
  text-align: center;
}
.admin-content-home__contents {
  margin-bottom: 38px;
  padding: 16px;
  border: 2px dashed #ccc;
  border-radius: 8px;
}
.admin-content-home__area-img {
  position: relative;
  width: 100%;
  height: 360px;
  background: var(--grey);
  margin-bottom: 30px;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.admin-content-home__area-img i {
  font-size: 120px;
  color: #ded3c4;
}
.admin-content-home__area-img h3 {
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: 500;
  margin-top: 6px;
  margin-bottom: 8px;
}
.admin-content-home__area-img p {
  display: flex;
  align-items: center;
  color: #999;
}
.admin-content-home__area-img p span {
  font-weight: 600;
}
.admin-content-home__area-img img {
  position: absolute;
  background-color: #fff;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  z-index: 100;
}
.admin-content-home__btn-img {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}
.admin-content-home__btn-img img {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.admin-content-home__form-group {
  margin-bottom: 30px;
}
.admin-content-home__form-group, .admin-content-home__form-label {
  display: block;
}
.admin-content-home__form-group:focus-within .admin-content-home__form-label {
  color: #7b55f4;
}
.admin-content-home__form-group:focus-within .admin-content-home__form-input {
  border-color: #7b55f4;
}
.admin-content-home__form-label {
  font-weight: 600;
  font-size: 1.3rem;
  color: #1e104d;
}
.admin-content-home__form-input {
  width: 100%;
  font-size: 1.5rem;
  border-bottom: 2px solid #afa8c4;
  padding: 8px 0 14px;
  color: #321f70;
  caret-color: #7b55f4;
}
.admin-content-home__form-input::placeholder {
  color: #9b93b3;
}
.admin-content-home__form-text-area {
  width: 100%;
  min-height: 50px;
  margin-top: 15px;
  border: none;
  border-bottom: 2px solid #afa8c4;
  font-size: 1.5rem;
  font-family: "Fz-poppins";
  resize: none;
  outline: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.admin-content-home__form-text-area::-webkit-scrollbar {
  display: none;
}
.admin-content-home__form-buttons p {
  font-size: 1.6rem;
  font-family: "Noto Sans", sans-serif;
}
.admin-content-home__form-buttons a:first-child {
  margin-right: 16px;
}
.admin-content-home__form-btn {
  color: var(--btn-ad-color);
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 8px 22px;
  background-color: var(--btn-ad-bg-color);
  border: 2px solid var(--btn-ad-color);
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  display: inline-block;
  margin-top: 30px;
}
.admin-content-home__form-btn:hover {
  background-color: var(--btn-ad-bg-color-hover);
  color: var(--btn-ad-color-hover);
}
.admin-content-home__form-btn:active {
  background-color: var(--btn-ad-bg-color-strong);
}
.admin-content-home__form-btn-del {
  color: var(--btn-ad-bg-color-danger);
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 7px 22px;
  background-color: var(--btn-ad-bg-color);
  border: 2px solid var(--btn-ad-bg-color-danger);
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  display: inline-block;
  margin-top: 30px;
}
.admin-content-home__form-btn-del:hover {
  background-color: var(--btn-ad-bg-color-danger);
  color: var(--btn-ad-color-hover);
}
.admin-content-home__form-btn-del:active {
  background-color: var(--btn-ad-bg-color-strong);
}
.admin-content-home__submit {
  display: inline-block;
  margin-top: 30px;
  color: var(--btn-ad-color);
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 8px 28px;
  background-color: var(--btn-ad-bg-color);
  border: 2px solid var(--btn-ad-color);
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
}
.admin-content-home__submit:hover {
  background-color: var(--btn-ad-bg-color-hover);
  color: var(--btn-ad-color-hover);
}
.admin-content-home__submit:active {
  background-color: var(--btn-ad-bg-color-strong);
}

.main-admin-project {
  background-color: var(--bg-admin);
  min-height: 100vh;
}
@media (max-width: 991.98px) {
  .main-admin-project {
    position: relative;
  }
}

.body-admin-project {
  padding-bottom: 60px;
  position: relative;
}
@media (max-width: 991.98px) {
  .body-admin-project {
    position: static;
  }
}

.admin-project {
  padding-left: 336px;
  padding-top: 80px;
}
@media (max-width: 991.98px) {
  .admin-project {
    padding-left: 0;
    padding-top: 150px;
  }
}
.admin-project__heading {
  font-size: 3.7rem;
  font-weight: 500;
  line-height: 4.3rem;
  text-align: justify;
  color: var(--color-text-heading);
  color: var(--color-text-1-title);
  margin-bottom: 50px;
  text-align: center;
}
.admin-project__message {
  font-size: 1.7rem;
  margin-bottom: 50px;
}
.admin-project__btn {
  color: var(--btn-ad-color);
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 8px 30px;
  background-color: var(--btn-ad-bg-color);
  border: 2px solid var(--btn-ad-color);
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 24px;
}
.admin-project__btn:hover {
  background-color: var(--btn-ad-bg-color-hover);
  color: var(--btn-ad-color-hover);
}
.admin-project__btn:active {
  background-color: var(--btn-ad-bg-color-strong);
}
.admin-project__card {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 100px 30px;
}
.admin-project__card-item {
  width: calc(50% - 30px);
  background-color: #fff;
  border-radius: 12px;
  transition: all 0.3s;
}
@media (max-width: 991.98px) {
  .admin-project__card-item {
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.admin-project__card-item:hover {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.admin-project__card-content {
  padding: 18px;
}
.admin-project__space {
  position: relative;
  width: 100%;
  padding-top: 68%;
}
.admin-project img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px 12px 0 0;
  border-bottom: 2px solid #cfcfcf;
  object-fit: cover;
  object-position: center;
}
.admin-project__interaction {
  margin-bottom: 12px;
}
.admin-project__interaction-list {
  display: flex;
  align-items: center;
  gap: 18px;
}
.admin-project__interaction-item {
  font-size: 1.4rem;
  color: #2a629a;
  cursor: pointer;
}
@media (max-width: 991.98px) {
  .admin-project__interaction-item {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.admin-project__interaction-item:hover {
  color: #113253;
}
.admin-project__interaction-item i {
  border: 1px solid #2a629a;
  padding: 4px;
  border-radius: 3px;
  margin-right: 8px;
}
.admin-project__card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 58px;
  font-family: var(--font-IBM-Sans-Condensed);
  font-size: 2.4rem;
  line-height: 2.8rem;
  color: #028391;
  margin-bottom: 16px;
}
.admin-project__card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "Open sans";
  text-align: justify;
  text-indent: 1.6rem;
  font-size: 1.4rem;
  line-height: 2.4rem;
  height: 76px;
  margin-bottom: 28px;
}
.admin-project__act {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
.admin-project__btn-card {
  color: var(--btn-ad-color);
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 4px 10px;
  background-color: var(--btn-ad-bg-color);
  border: 2px solid var(--btn-ad-color);
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  margin-bottom: 20px;
}
.admin-project__btn-card:hover {
  background-color: var(--btn-ad-bg-color-hover);
  color: var(--btn-ad-color-hover);
}
.admin-project__btn-card:active {
  background-color: var(--btn-ad-bg-color-strong);
}
.admin-project__btn-card-strong {
  color: var(--btn-ad-bg-color-strong);
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 4px 10px;
  background-color: var(--btn-ad-bg-color);
  border: 2px solid var(--btn-ad-bg-color-strong);
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  margin-bottom: 20px;
}
.admin-project__btn-card-strong:hover {
  background-color: var(--btn-ad-bg-color-strong);
  color: var(--btn-ad-color-hover);
}
.admin-project__btn-card-strong:active {
  background-color: var(--btn-ad-bg-color-strong);
}
.admin-project__btn-card-danger {
  color: var(--btn-ad-bg-color-danger);
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 4px 10px;
  background-color: var(--btn-ad-bg-color);
  border: 2px solid var(--btn-ad-bg-color-danger);
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  margin-bottom: 20px;
}
.admin-project__btn-card-danger:hover {
  background-color: var(--btn-ad-bg-color-danger);
  color: var(--btn-ad-color-hover);
}
.admin-project__btn-card-danger:active {
  background-color: var(--btn-ad-bg-color-strong);
}

.main-admin-add-project {
  background-color: var(--bg-admin);
  min-height: 100vh;
}
@media (max-width: 991.98px) {
  .main-admin-add-project {
    position: relative;
  }
}

.body-admin-add-project {
  padding-bottom: 60px;
  position: relative;
}
@media (max-width: 991.98px) {
  .body-admin-add-project {
    position: static;
  }
}

.admin-add-project {
  padding-left: 336px;
  padding-top: 50px;
}
@media (max-width: 991.98px) {
  .admin-add-project {
    padding-left: 0;
    padding-top: 150px;
  }
}
.admin-add-project__heading {
  font-size: 3.7rem;
  font-weight: 500;
  line-height: 4.3rem;
  text-align: justify;
  color: var(--color-text-heading);
  color: var(--color-text-1-title);
  margin-bottom: 50px;
  text-align: center;
}
.admin-add-project__select {
  margin-bottom: 50px;
}
.admin-add-project__select label {
  display: block;
  margin-bottom: 16px;
  color: #262626;
  font-size: 1.4rem;
}
.admin-add-project__select select {
  padding: 4px 12px;
  border: 2px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  background-color: #fff;
  color: #262626;
  font-size: 1.4rem;
}
.admin-add-project__btn {
  color: var(--btn-ad-color);
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 10px 32px;
  background-color: var(--btn-ad-bg-color);
  border: 2px solid var(--btn-ad-color);
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  font-size: 1.6rem;
}
.admin-add-project__btn:hover {
  background-color: var(--btn-ad-bg-color-hover);
  color: var(--btn-ad-color-hover);
}
.admin-add-project__btn:active {
  background-color: var(--btn-ad-bg-color-strong);
}

/* Container chung cho tooltip */
.image-alt-tooltip {
  position: absolute;
  z-index: 1000;
  background: #fff;
  border: 1px solid #ccc;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  display: none; /* ẩn mặc định */
}

/* Input và button trong tooltip */
.image-alt-tooltip input {
  width: 180px;
  margin-right: 4px;
  padding: 4px 6px;
  font-size: 14px;
}

.image-alt-tooltip button {
  padding: 4px 8px;
  background-color: var(--bg-nav);
  color: #fff;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}

#tooltipRemoveBtn {
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

.main-admin-view-project {
  background-color: var(--bg-admin);
  min-height: 100vh;
}
@media (max-width: 991.98px) {
  .main-admin-view-project {
    position: relative;
  }
}

.body-admin-view-project {
  padding-bottom: 90px;
  position: relative;
}
@media (max-width: 991.98px) {
  .body-admin-view-project {
    position: static;
  }
}

.admin-view-project {
  padding-left: 336px;
  padding-top: 80px;
}
@media (max-width: 991.98px) {
  .admin-view-project {
    padding-left: 0;
    padding-top: 150px;
  }
}
.admin-view-project__content h1 {
  margin-bottom: 20px;
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  color: var(--color-text-nav);
  text-transform: uppercase;
}
@media (max-width: 767.98px) {
  .admin-view-project__content h1 {
    font-size: 1.8rem;
  }
}
.admin-view-project__content h2 {
  margin-bottom: 20px;
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  color: var(--color-text-nav);
  text-transform: uppercase;
  font-size: 2rem;
  margin-bottom: 36px;
}
@media (max-width: 767.98px) {
  .admin-view-project__content h2 {
    font-size: 1.7rem;
  }
}
.admin-view-project__content h3,
.admin-view-project__content h4,
.admin-view-project__content h5,
.admin-view-project__content h6 {
  margin-bottom: 20px;
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  color: var(--color-text-nav);
  text-transform: uppercase;
  font-size: 1.8rem;
  line-height: 1.5;
  margin-bottom: 18px;
  text-align: left;
  text-transform: none;
}
@media (max-width: 767.98px) {
  .admin-view-project__content h3,
  .admin-view-project__content h4,
  .admin-view-project__content h5,
  .admin-view-project__content h6 {
    font-size: 1.6rem;
  }
}

.admin-view-project__content .ql-align-center {
  text-align: center;
}
.admin-view-project__content .ql-align-right {
  text-align: right;
}
.admin-view-project__content .ql-align-justify {
  text-align: justify;
}

.admin-view-project__content p {
  font-weight: 400;
  color: #313131;
  font-size: 1.6rem;
  line-height: 2.4rem;
  text-align: justify;
  margin-bottom: 8px;
}
@media (max-width: 575.98px) {
  .admin-view-project__content p {
    font-size: 1.4rem;
  }
}
.admin-view-project__content p img {
  display: block;
  margin: 20px auto;
  border-radius: 12px;
  width: 80%;
  height: 80%;
}
.admin-view-project__content ul {
  padding-left: 30px;
  margin-bottom: 20px;
}
.admin-view-project__content ul li {
  padding: 6px 0;
  font-weight: 400;
  color: #313131;
  font-size: 1.5rem;
  line-height: 1.5;
  text-align: justify;
  list-style: outside;
}
.admin-view-project__content ol {
  padding-left: 30px;
  margin-bottom: 30px;
}
.admin-view-project__content ol li {
  padding: 6px 0;
  font-weight: 400;
  color: #313131;
  font-size: 1.5rem;
  line-height: 1.5;
  text-align: justify;
  list-style: decimal;
}
.admin-view-project__content a {
  color: #239ba7;
  text-decoration: underline;
}
.admin-view-project__content strong {
  font-weight: bold;
}
.admin-view-project__content u {
  text-decoration: underline;
}
.admin-view-project__content em {
  font-style: italic;
}
.admin-view-project__content iframe {
  width: 100%;
  height: 500px;
  margin-bottom: 20px;
  border-radius: 22px;
}
@media (max-width: 767.98px) {
  .admin-view-project__content iframe {
    height: 280px;
  }
}

.main-admin-product-detail {
  background-color: var(--bg-admin);
  min-height: 100vh;
}
@media (max-width: 991.98px) {
  .main-admin-product-detail {
    position: relative;
  }
}

.body-admin-product-detail {
  padding-bottom: 60px;
  position: relative;
}
@media (max-width: 991.98px) {
  .body-admin-product-detail {
    position: static;
  }
}

body {
  position: relative;
}

.image-preview {
  background-color: rgba(51, 51, 51, 0.3);
  position: absolute;
  inset: 0;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
}
.image-preview i {
  display: inline-block;
  padding: 10px 12px;
  color: #113f67;
  background-color: #fff;
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 1.9rem;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
}
@media (max-width: 991.98px) {
  .image-preview i {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.image-preview i:hover {
  color: #ff7f3e;
  background-color: #fff;
}
.image-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
  margin: auto;
}
@media (max-width: 991.98px) {
  .image-preview img {
    object-fit: contain;
  }
}

.admin-product-detail {
  padding-left: 336px;
  padding-top: 100px;
}
@media (max-width: 991.98px) {
  .admin-product-detail {
    padding-left: 0;
    padding-top: 150px;
  }
}
.admin-product-detail__icon-view {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 10px;
  font-size: 3rem;
  color: #333;
  cursor: pointer;
}
@media (max-width: 991.98px) {
  .admin-product-detail__icon-view {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.admin-product-detail__icon-view:hover {
  color: #ff7f3e;
}
.admin-product-detail__show {
  display: flex;
  flex-direction: row;
  gap: 30px;
  margin-bottom: 50px;
}
@media (max-width: 991.98px) {
  .admin-product-detail__show {
    flex-wrap: wrap;
    margin-bottom: 0;
  }
}
.admin-product-detail__card {
  width: 460px;
  height: 330px;
  border-radius: 18px;
  transition: 0.3s;
}
@media (max-width: 991.98px) {
  .admin-product-detail__card {
    width: 100%;
    height: 400px;
    margin-bottom: 30px;
  }
}
@media (max-width: 767.98px) {
  .admin-product-detail__card {
    width: 100%;
    height: 250px;
    margin-bottom: 80px;
  }
}
@media (max-width: 991.98px) {
  .admin-product-detail__card {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.admin-product-detail__card:hover {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}
.admin-product-detail__card-thumb {
  position: relative;
  overflow: hidden;
}
.admin-product-detail__prod-track {
  display: flex;
  flex-direction: row;
}
.admin-product-detail__card-img {
  width: 460px;
  height: 330px;
  flex-shrink: 0;
}
@media (max-width: 991.98px) {
  .admin-product-detail__card-img {
    width: 100%;
    height: 400px;
  }
}
@media (max-width: 767.98px) {
  .admin-product-detail__card-img {
    width: 100%;
    height: 250px;
  }
}
.admin-product-detail__card-img img {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  object-fit: cover;
  object-position: center;
  z-index: 100;
  cursor: pointer;
}
.admin-product-detail__icon-thumb {
  width: 32px;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.4rem;
  padding: 8px;
  color: rgba(235, 91, 0, 0.5);
  cursor: pointer;
  background-color: rgba(186, 186, 186, 0.2);
  transition: all 0.3s;
}
@media (max-width: 991.98px) {
  .admin-product-detail__icon-thumb {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.admin-product-detail__icon-thumb:hover {
  background-color: #ffffff;
  color: #ffa070;
}
.admin-product-detail__icon-thumb-left {
  z-index: 10;
  border-radius: 0px 8px 8px 0px;
  left: 0;
}
.admin-product-detail__icon-thumb-right {
  z-index: 10;
  border-radius: 8px 0px 0px 8px;
  right: 0;
}
.admin-product-detail__carousel {
  width: 100%;
  position: relative;
  margin-top: 30px;
}
@media (max-width: 767.98px) {
  .admin-product-detail__carousel {
    width: 340px;
  }
}
.admin-product-detail__list-thumb {
  width: 75%;
  height: 66px;
  overflow: hidden;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin-left: 42px;
}
.admin-product-detail__list-img {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  opacity: 0.7;
}
.admin-product-detail__list-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 9px;
  cursor: pointer;
}
@media (max-width: 991.98px) {
  .admin-product-detail__list-img img {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.admin-product-detail__list-img img:hover {
  opacity: 1;
}
.admin-product-detail__icon {
  position: absolute;
  top: 57%;
  transform: translateY(-50%);
  font-size: 2.7rem;
  padding: 12px;
  color: #ff7f3e;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  background-color: hsl(0, 0%, 97%);
  transition: all 0.3s;
}
@media (max-width: 991.98px) {
  .admin-product-detail__icon {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.admin-product-detail__icon:hover {
  box-shadow: 0 2px 6px rgba(145, 145, 145, 0.1);
  background-color: hsl(0, 0%, 93%);
  color: hsl(20, 100%, 72%);
}
.admin-product-detail__icon-left {
  border-radius: 50%;
  left: 0;
}
.admin-product-detail__icon-right {
  border-radius: 50%;
  right: 0;
}
.admin-product-detail__title {
  font-family: "Open Sans";
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 3.6rem;
  padding: 0 20px;
  color: var(--heading-prod-title);
  margin-bottom: 18px;
  text-align: justify;
}
.admin-product-detail__sub-title {
  font-size: 1.6rem;
  line-height: 2.2rem;
  color: #333;
  text-align: justify;
  font-family: "Open Sans";
  padding-bottom: 25px;
}
.admin-product-detail__block-cost {
  display: flex;
  gap: 12px;
  padding-bottom: 20px;
}
.admin-product-detail__cost {
  font-size: 2.2rem;
  line-height: 3.5rem;
  font-weight: 600;
  color: #ff7f3e;
}
.admin-product-detail__price {
  font-size: 2.8rem;
  font-weight: 600;
  color: #113f67;
  font-family: "Noto Serif KR", serif;
}
.admin-product-detail__type-voltage {
  padding-bottom: 18px;
}
.admin-product-detail__specifications {
  font-size: 1.8rem;
  font-weight: 600;
  font-family: "Open Sans";
  color: #ff7f3e;
  padding-bottom: 16px;
}
.admin-product-detail__specifications-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.admin-product-detail__label {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 1.6rem;
  background-color: #fff;
  border: 1px solid #ff7f3e;
  color: #113f67;
  font-weight: 500;
  font-family: "Open Sans";
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.admin-product-detail__specifications-item input {
  display: none;
}
.admin-product-detail__act {
  padding-top: 20px;
}
.admin-product-detail__link {
  display: block;
  width: 100%;
  padding: 16px;
  border-color: #113f67;
  background-color: #113f67;
  color: #fff;
  font-size: 2.2rem;
  border-radius: 8px;
  font-family: "Noto Serif KR", serif;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  box-shadow: 0 3px 14px rgba(126, 126, 126, 0.2);
}
@media (max-width: 991.98px) {
  .admin-product-detail__link {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.admin-product-detail__link:hover {
  background-color: #ff7f3e;
  color: #fff;
}

.admin-prod-detail__desc {
  padding: 80px 0;
}
.admin-prod-detail__desc-heading {
  font-family: "Open Sans";
  font-weight: 600;
  font-size: 2.6rem;
  color: #113f67;
  margin-bottom: 26px;
}
.admin-prod-detail__desc-title {
  font-family: "Open Sans";
  font-weight: 600;
  font-size: 2rem;
  color: #ff7f3e;
  margin-bottom: 18px;
}
.admin-prod-detail__desc-sub-title {
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 1.6rem;
  color: #202020;
  margin-bottom: 18px;
}
.admin-prod-detail__desc-list {
  margin-left: 30px;
  margin-bottom: 18px;
}
.admin-prod-detail__desc-item {
  font-family: "Open Sans";
  list-style: decimal;
  font-weight: 400;
  font-size: 1.6rem;
  color: #202020;
  padding: 12px 0;
}
.admin-prod-detail__desc-thumb {
  width: 80%;
  margin: 0 auto;
  margin-bottom: 26px;
}
.admin-prod-detail__desc-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;
  object-position: center;
}

.active-img-dot {
  opacity: 1;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.main-admin-profile {
  background-color: var(--bg-admin);
  min-height: 100vh;
}
@media (max-width: 991.98px) {
  .main-admin-profile {
    position: relative;
  }
}

.body-admin-profile {
  padding-bottom: 90px;
  position: relative;
}
@media (max-width: 991.98px) {
  .body-admin-profile {
    position: static;
  }
}

.admin-profile {
  padding-left: 336px;
  padding-top: 80px;
}
@media (max-width: 991.98px) {
  .admin-profile {
    padding-left: 0;
    padding-top: 150px;
  }
}
.admin-profile__heading {
  font-size: 3.7rem;
  font-weight: 500;
  line-height: 4.3rem;
  text-align: justify;
  color: var(--color-text-heading);
  color: var(--color-text-1-title);
  margin-bottom: 50px;
  text-align: center;
}

/*# sourceMappingURL=main.css.map */