@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=Roboto_old:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=K2D:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Prata&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Varela+Round&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(--primary-font);
  overflow-x: hidden;
}

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;
}

.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%;
  }
}
@media (min-width: 576px) {
  .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%;
  }
}
@media (min-width: 768px) {
  .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%;
  }
}
@media (min-width: 992px) {
  .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%;
  }
}
@media (min-width: 1200px) {
  .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%;
  }
}
@media (min-width: 1400px) {
  .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 {
  --primary-color: #263b96;
  --primary-font: "Quicksand", sans-serif;
  --color-fff: #ffffff;
  --color-f1: #f1f1f1;
  --color-fc: #fcfcfc;
  --color-ccc: #cccccc;
  --color-white-1: #f5f5f5;
  --color-white-2: #eae4e8;
  --color-d8: #d8d8d8;
  --color-e9: #e9e9e9;
  --color-e8: #e8e8e8;
  --color-ca: #cacaca;
  --color-ffe: #ffe3bb;
  --color-9e: #9e9e9e;
  --color-8b: #8b8b8b;
  --color-777: #777777;
  --color-666: #666666;
  --color-5c: #5c5c5c;
  --color-26: #262626;
  --color-32: #323232;
  --color-000: #000000;
  --color-red: #ff0000;
  --color-orange-strong: #ff4f0f;
  --color-orange: #ff8225;
  --color-success: #399918;
  --color-warning: #f87b1b;
  --color-link-1: #2962ff;
  --color-link-2: #009dde;
  --color-btn-hover: #45c9e3;
  --color-pink: #e49ba6;
  --bg-color-search: var(--primary-color);
  --bg-color-search-hover: var(--color-orange);
  --color-search: var(--color-fff);
  --bg-color-input: var(--primary-color);
  --color-input: var(--color-fff);
  --bg-cart: var(--color-fff);
  --color-cart: var(--color-26);
  --border-bottom-cart: var(--color-e8);
  --color-icon: var(--primary-color);
  --color-cart-btn: var(--color-red);
  --bg-login: var(--color-white-1);
  --bg-login-form: var(--color-fff);
  --color-title-1: var(--color-000);
  --color-title-2: var(--color-ca);
  --color-bg-login: var(--color-e9);
  --color-text-login: var(--color-5c);
  --bg-nav: var(--primary-color);
  --bg-color-admin-nav: var(--color-pink);
  --color-admin-nav: var(--color-e9);
  --bg-color-admin-body: var(--color-f1);
  --bg-content-admin: var(--color-white-2);
  --color-text-menu: #00809d;
  --color-text-menu-hover: #eb5b00;
  --color-text-menu-active: #399918;
  --color-text-button: #fff;
  --background-logo: #002736;
  --color-icon-nav: #009fbd;
  --background-nav: #2786c4;
  --background-color-white: #fff;
  --background-carousel: #f8f8f8;
  --background-nav-hover: #ccc;
  --background-sign-in: #ff8225;
  --background-sign-in-hover: hsl(26, 100%, 47%);
  --background-sub-nav: rgba(4, 13, 14, 0.2);
  --background-banner-mini: #028391;
  --footer-bg-color: #0077b6;
  --footer-color-title: #f8f8f8;
  --footer-color: #cecece;
  --color-title-card-prod: #0abab5;
  --heading-prod-title: #0abab5;
  --bg-color-left-nav: #239ba7;
  --font-nav: "Open-sans";
  --bg-pagination: #ffffff;
  --border-pagination: #1b3c53;
  --color-text-pagination: #1b3c53;
  --bg-pagination-hover: #f39c4f;
  --bg-pagination-active: #e67514;
  --color-text-pagination-active: #ffffff;
  --blue: #0071ff;
  --light-blue: #b6dbf6;
  --dark-blue: #005dd1;
  --grey: #f2f2f2;
  --bg-admin: #fcecdd;
  --admin-btn-color: hsl(191, 31%, 26%);
  --admin-btn-color-hover: #ff4f0f;
  --color-text-heading-1: #134b70;
  --color-text-heading-2: #003c43;
  --color-price: #ff8225;
  --color-text-desc-1: #778082;
  --color-text-desc-2: #666666;
  --color-text-desc-3: #414141;
  --color-text-desc-4: #1f1f1f;
  --background-home-1: #eff4f0ff;
  --color-background-white-2: #f2f2f2;
  --background-primary: hsl(191, 31%, 26%);
  --background-lg-hover-primary: hsl(191, 31%, 50%);
  --color-text-nav-primary-light: #f9f3ef;
  --color-text-nav-hover-light: #e67514;
  --background-color-palette-1: #d4f0fc;
  --color-text-primary: #1f4852;
  --color-text-desc: #78738fff;
  --color-text-title: #02577a;
  --color-text-light-title: hsl(198, 97%, 44%);
  --color-text-heading: hsl(225, 0%, 85%);
  --color-text-sub-heading: hsl(0, 0%, 80%);
  --color-text-1-title: #02577a;
  --color-text-link: #0080e9;
  --color-text-link-hover: #001b31;
  --background-btn-primary-light: hsl(191, 31%, 75%);
  --background-btn-primary: hsl(191, 31%, 26%);
  --background-btn-hover-primary-light: hsl(191, 31%, 50%);
  --white-color-btn-primary: hsl(0, 0%, 90%);
  --card-btn-ad-bg: #00809d;
  --card-btn-ad-bg-hover: #f97a00;
  --card-btn-ad-bg-active: #f97a00;
  --btn-ad-bg-color-strong: #fa7115;
  --btn-ad-bg-color: var(--color-fc);
  --btn-ad-color-hover: var(--color-fc);
}

@keyframes dropDown {
  0% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
@keyframes pulsate {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0;
  }
}
@keyframes ripple {
  5%, 100% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
}
@keyframes dropUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100px);
  }
}
@keyframes cartToLeft {
  0% {
    transform: translateX(385px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes cartToLeftMobile {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes cartToRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(385px);
  }
}
@keyframes cartToRightMobile {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes toLeft-toRight {
  0% {
    transform: translateX(0px);
  }
  25% {
    transform: translateX(-6px);
  }
  50% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(6px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes toTop-toBottom {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-6px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(6px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-20px);
  }
}
@keyframes fadeOutRight {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(20px);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  to {
    opacity: 0;
  }
}
.top-bar {
  position: sticky;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  transition: all 0.3s;
  top: 0;
  z-index: 10000;
}
.top-bar__control {
  background-color: var(--bg-nav);
}

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

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

.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top-nav__logo {
  display: flex;
  align-items: center;
  height: 70px;
  width: 210px;
}
@media (max-width: 767.98px) {
  .top-nav__logo {
    height: 70px;
    width: 70px;
    padding-left: 8px;
  }
}
.top-nav__logo__img {
  height: 70px;
  width: 70px;
}
.top-nav__logo__heading {
  color: var(--color-fff);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
}
.top-nav__search {
  position: relative;
  width: 50%;
  background-color: #fff;
  border-radius: 4px;
}
@media (max-width: 1199.98px) {
  .top-nav__search {
    width: 35%;
  }
}
.top-nav__search-input {
  padding: 9px 50px 10px 15px;
  width: 100%;
  background: var(--color-search);
  border: 1px solid var(--color-ececec);
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  display: inline-block;
  border-radius: 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  -webkit-transition: all 150ms linear;
  transition: all 150ms linear;
}
.top-nav__search-btn {
  position: absolute;
  padding: 0;
  top: 0px;
  bottom: 0;
  right: 0px;
  border-radius: 4px;
  margin: 3px;
  border: 0;
  box-shadow: none;
  width: 70px;
  background: var(--bg-color-search);
  transition: opacity 150ms linear;
  cursor: pointer;
}
.top-nav__search-btn:hover {
  background-color: var(--bg-color-search-hover);
}
.top-nav__search-btn svg {
  width: 18px;
  height: 100%;
  display: block;
  margin: auto;
  fill: var(--color-search);
}
.top-nav__row-action {
  display: flex;
  align-items: center;
}
.top-nav__location {
  display: flex;
  align-items: center;
  color: var(--color-fff);
  font-size: 1.3rem;
}
.top-nav__address {
  overflow: hidden;
  position: relative;
  display: block;
  font-size: 13px;
  padding: 8px 4px;
  color: var(--shop-color-text);
  white-space: nowrap;
  transition: all 0.3s ease-in-out;
  text-align: center;
}
.top-nav__address-box-icon {
  position: relative;
  width: 32px;
  height: 40px;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
}
.top-nav__address-box-icon svg {
  fill: var(--color-search);
  width: 22px;
  height: 40px;
}
.top-nav__pulse {
  background-color: var(--color-search);
  border-radius: 50%;
  height: 6px;
  width: 8px;
  position: absolute;
  left: 0px;
  right: 0;
  bottom: 8px;
  opacity: 1;
  margin: 0 auto;
  transform: rotateX(55deg);
  animation-name: pulse;
}
.top-nav__pulse::after {
  content: "";
  border-radius: 50%;
  height: 25px;
  width: 25px;
  position: absolute;
  margin: -8px 0 0 -12px;
  animation: pulsate 1s ease-out;
  animation-iteration-count: infinite;
  opacity: 0;
  animation-delay: 1.1s;
  box-shadow: 0 0 1px 2px var(--color-input);
}
.top-nav__line-row {
  display: block;
  width: 1px;
  height: 40px;
  background-color: var(--color-8b);
  margin: 0 6px;
  opacity: 0.5;
  flex-shrink: 0;
}
.top-nav__box-icon {
  position: relative;
  width: 32px;
  height: 40px;
  text-align: center;
}
.top-nav__box-icon svg {
  fill: var(--color-input);
  width: 22px;
  height: 40px;
}
.top-nav__act {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 0;
}
.top-nav__act-row {
  padding-top: 4px;
  display: flex;
  align-items: center;
}
.top-nav__line {
  display: block;
  width: 2px;
  height: 12px;
  background-color: var(--color-8b);
  margin: 0 4px;
}
.top-nav__act-link {
  display: block;
  color: var(--color-fff);
  font-size: 1.3rem;
  padding: 4px 0;
  cursor: pointer;
  transition: 0.3s;
}
.top-nav__act-link:hover {
  color: var(--color-orange);
}
.top-nav__act-list {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  font-size: 1.3rem;
  color: var(--color-fff);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}
.top-nav__act-item {
  position: relative;
  cursor: pointer;
}
.top-nav__act-icon {
  position: relative;
  width: 32px;
  height: 40px;
  text-align: center;
}
.top-nav__act-icon svg {
  fill: var(--color-fff);
}
.top-nav__act-quantities {
  display: inline-block;
  vertical-align: top;
  background: var(--color-red);
  color: var(--color-fff);
  font-size: 11px;
  text-align: center;
  position: absolute;
  left: 10px;
  top: -9px;
  padding: 0px 3px;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
}
.top-nav__box-text {
  display: inline-block;
  padding-top: 4px;
  cursor: pointer;
}
@media (max-width: 991.98px) {
  .top-nav__box-text {
    display: none;
  }
}

.nav-header {
  background-color: var(--color-fff);
}

.nav__list {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 20px;
}
.nav__items, .nav__link {
  position: relative;
  display: block;
  padding: 12px;
  font-size: 1.4rem;
  font-weight: 500;
  text-wrap: nowrap;
  font-family: var(--primary-font);
  color: var(--color-26);
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  transition: 0.3s;
}
.nav__items:hover, .nav__link:hover {
  color: var(--color-orange);
}
@media (max-width: 991.98px) {
  .nav__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.subnav {
  position: absolute;
  width: 100%;
  top: 50px;
  left: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
  background-color: var(--color-f1);
  padding: 40px 20px;
  transition: opacity 0.5, height 0.5s;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}
.subnav::before {
  content: "";
  width: 24px;
  height: 14px;
  background-color: var(--color-f1);
  display: block;
  position: absolute;
  top: -12px;
  left: 34%;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
@media (max-width: 1199.98px) {
  .subnav::before {
    left: 26%;
  }
}
.subnav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.subnav__item {
  flex: 0 0 calc((100% - 120px) / 7);
}
.subnav__link {
  display: block;
}
.subnav__thumb {
  position: relative;
  padding-top: 84%;
  background-color: #ccc;
  overflow: hidden;
}
.subnav img {
  position: absolute;
  inset: 0;
  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.2rem;
  line-height: 1.5;
  font-weight: 500;
  text-align: center;
  color: var(--color-666);
  transition: 0.2s;
  padding-top: 14px;
}
.subnav__title:hover {
  color: var(--color-orange);
}

.active-nav {
  color: var(--color-orange);
}

.show-menu {
  height: 100vh;
}

.actDropdown {
  opacity: 1;
  pointer-events: initial;
  height: initial;
  position: static;
}

.rotateIcon {
  transform: rotate(180deg);
}

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

.top-nav-mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}
.top-nav-mobile__control {
  background-color: var(--bg-nav);
}
.top-nav-mobile__menu {
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-nav-mobile__line {
  width: 100%;
  height: 1px;
  background-color: var(--color-8b);
  opacity: 0.5;
}
.top-nav-mobile__toggle-menu {
  width: 40px;
  display: flex;
}
.top-nav-mobile__hamburger-menu {
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: block;
  position: relative;
}
.top-nav-mobile__hamburger-menu-bar {
  position: relative;
  display: block;
  top: 22px;
  height: 2px;
  width: 25px;
  background-color: var(--color-fff);
  margin: auto;
  transition: all 0ms 100ms, width 150ms linear;
  transform: translateY(-2px);
  pointer-events: none;
}
.top-nav-mobile__hamburger-menu-bar::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 7px;
  width: 18px;
  height: 2px;
  pointer-events: none;
  background-color: var(--color-fff);
  transition: bottom 300ms 100ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1), width 150ms linear, background 150ms linear;
}
.top-nav-mobile__hamburger-menu-bar::after {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 15px;
  height: 2px;
  pointer-events: none;
  background-color: var(--color-fff);
  transition: top 300ms 100ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1), width 150ms linear, background 150ms linear;
}
.top-nav-mobile__close-menu {
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: none;
  position: relative;
}
.top-nav-mobile__close-menu-bar {
  position: absolute;
  top: 20px;
  left: 6px;
  height: 2px;
  width: 25px;
  border-radius: 2px;
  background-color: var(--color-fff);
  margin: auto;
  pointer-events: none;
  transition: all 0ms 100ms, width 150ms linear;
  transform: rotate(45deg);
}
.top-nav-mobile__close-menu-bar::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 25px;
  height: 2px;
  border-radius: 2px;
  pointer-events: none;
  transform: rotate(-90deg);
  background-color: var(--color-fff);
  transition: bottom 300ms 100ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1), width 150ms, linear background 150ms linear;
}
.top-nav-mobile__logo {
  display: flex;
  align-items: center;
  height: 60px;
  width: 180px;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}
.top-nav-mobile__logo__img {
  height: 60px;
  width: 60px;
}
.top-nav-mobile__logo__heading {
  color: var(--color-fff);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.5;
  text-wrap: nowrap;
  text-transform: uppercase;
}
.top-nav-mobile__row-action {
  display: flex;
  align-items: center;
  gap: 8px;
}
.top-nav-mobile__location {
  display: flex;
  align-items: center;
  color: var(--color-fff);
  font-size: 1.3rem;
}
.top-nav-mobile__address {
  overflow: hidden;
  position: relative;
  display: block;
  font-size: 13px;
  color: var(--shop-color-text);
  white-space: nowrap;
  transition: all 0.3s ease-in-out;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}
.top-nav-mobile__address-box-icon {
  position: relative;
  width: 32px;
  height: 46px;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
}
.top-nav-mobile__address-box-icon svg {
  fill: var(--color-search);
  width: 22px;
  height: 40px;
}
.top-nav-mobile__pulse {
  background-color: var(--color-search);
  border-radius: 50%;
  height: 6px;
  width: 8px;
  position: absolute;
  left: 0px;
  right: 0;
  bottom: 10px;
  opacity: 1;
  margin: 0 auto;
  transform: rotateX(55deg);
  animation-name: pulse;
}
.top-nav-mobile__pulse::after {
  content: "";
  border-radius: 50%;
  height: 25px;
  width: 25px;
  position: absolute;
  margin: -8px 0 0 -12px;
  animation: pulsate 1s ease-out;
  animation-iteration-count: infinite;
  opacity: 0;
  animation-delay: 1.1s;
  box-shadow: 0 0 1px 2px var(--color-input);
}
.top-nav-mobile__sigin {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}
.top-nav-mobile__box-icon {
  position: relative;
  width: 32px;
  height: 40px;
  text-align: center;
}
.top-nav-mobile__box-icon svg {
  fill: var(--color-input);
  width: 22px;
  height: 40px;
}
.top-nav-mobile__header-search {
  padding: 5px 6px;
}
.top-nav-mobile__search {
  position: relative;
  width: 100%;
  background-color: var(--bg-color-search);
  border-radius: 4px;
}
.top-nav-mobile__search-input {
  width: 100%;
  padding: 7px 40px 7px 15px;
  margin: 0;
  border-radius: 20px;
  border: 1px solid #eaeaea;
  background: #fff;
  color: #252a2b;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
}
.top-nav-mobile__search-btn {
  position: absolute;
  top: -3px;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 36px;
  padding: 0;
  border: 0;
  margin: 3px;
  border-radius: 4px;
  box-shadow: none;
  background: transparent;
  transition: opacity 150ms linear;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}
.top-nav-mobile__search-btn svg {
  width: 18px;
  height: 100%;
  display: block;
  margin: auto;
  fill: var(--color-8b);
}

.nav-mobile__header {
  border-top: 2px solid var(--color-d8);
  background-color: var(--color-fc);
  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: 120px;
}
.nav-mobile__list > li {
  padding: 12px 0;
  color: var(--color-777);
  border-bottom: 1px dashed var(--color-ccc);
}
.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 {
  position: relative;
  padding-top: 90%;
  background-color: var(--color-ccc);
  overflow: hidden;
}
@media (max-width: 575.98px) {
  .subnav-mobile__thumb {
    height: 112px;
  }
}
.subnav-mobile img {
  position: absolute;
  inset: 0;
  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: var(--color-666);
  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: var(--color-666);
}
@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.7rem;
  font-weight: 700;
  line-height: 4.3rem;
  text-align: justify;
  color: #f6f6f6;
}
.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(--color-e9);
  line-height: 1.5;
  font-size: 1.4rem;
  text-align: justify;
  font-weight: 500;
}
.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-suc-err__container {
  position: fixed;
  top: 40px;
  right: 40px;
  width: 240px;
  z-index: 9999;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  animation: fadeIn 0.3s forwards, fadeOut 0.3s forwards ease-out 4s;
}
.toast-suc-err__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 20px;
}
.toast-suc-err__header i {
  font-size: 2.2rem;
  color: var(--color-fff);
}
.toast-suc-err__header h4 {
  color: var(--color-fff);
  font-size: 1.4rem;
  font-weight: 500;
}
.toast-suc-err__msg {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 8px;
  background-color: var(--color-e9);
}

.toast-header-success {
  background-color: var(--color-success);
}

.toast-header-warning {
  background-color: var(--color-orange);
}

.toast-header-danger {
  background-color: var(--color-red);
}

.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: 30px;
}
.pagination__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.pagination__link {
  display: flex;
  padding: 10px 14px;
  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;
}
.pagination__link:hover {
  background-color: var(--bg-pagination-hover);
  color: var(--color-text-pagination);
  border: none;
}
.pagination__active {
  background-color: var(--bg-pagination-active);
  color: var(--color-text-pagination-active);
  border: none;
}

.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(--bg-nav);
  border-radius: 6px;
  cursor: pointer;
  color: var(--bg-nav);
  background: #fff;
  transition: all 0.3s;
}
.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(--bg-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;
  padding: 6px 10px;
  border: 2px solid var(--primary-color);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--primary-color);
  background-color: var(--color-e9);
  border-radius: 4px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
  cursor: pointer;
  font-size: 1.4rem;
  background-color: #fff;
}
.cm-wrapper > i:hover {
  background-color: var(--primary-color);
  color: var(--color-fff);
}
.cm-wrapper .icon-upload-img {
  margin-left: 0;
  display: inline-block;
  padding: 6px 10px;
  border: 2px solid var(--primary-color);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--primary-color);
  background-color: var(--color-e9);
  border-radius: 4px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
  cursor: pointer;
  font-size: 3rem;
  background-color: #fff;
}
.cm-wrapper .icon-upload-img:hover {
  background-color: var(--primary-color);
  color: var(--color-fff);
}
.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;
  padding: 6px 10px;
  border: 2px solid var(--primary-color);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--primary-color);
  background-color: var(--color-e9);
  border-radius: 4px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
  cursor: pointer;
  font-size: 1.4rem;
  background-color: #fff;
}
.cm-wrapper ul li i:hover {
  background-color: var(--primary-color);
  color: var(--color-fff);
}
.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;
  padding: 6px 10px;
  border: 2px solid var(--primary-color);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--primary-color);
  background-color: var(--color-e9);
  border-radius: 4px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
  cursor: pointer;
  font-size: 1.4rem;
  background-color: #fff;
}
.cm-wrapper ul p i:hover {
  background-color: var(--primary-color);
  color: var(--color-fff);
}
.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);
}
.cm-wrapper > .image-thumb i:hover {
  color: #eb5b00;
}

.project__card {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 60px 30px;
}
.project__card-item {
  width: calc(50% - 30px);
  background-color: #fffdf6;
  border-radius: 12px;
  transition: all 0.3s;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  cursor: pointer;
}
@media (max-width: 767.98px) {
  .project__card-item {
    width: 100%;
  }
}
.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;
}
.project__card-item-home {
  background-color: #fffdf6;
  margin: 5px;
  border-radius: 12px;
  transition: all 0.3s;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  cursor: pointer;
}
@media (max-width: 767.98px) {
  .project__card-item-home {
    width: 100%;
  }
}
.project__card-item-home:hover {
  transform: translateY(-2px);
}
.project__space {
  position: relative;
  width: 100%;
  padding-top: 68%;
  overflow: hidden;
}
.project__space 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;
  transition: all 0.6s;
}
.project__space img:hover {
  transform: scale(1.13);
}
.project__card-content {
  padding: 18px;
}
.project__interaction {
  margin-bottom: 12px;
}
.project__interaction-list {
  display: flex;
  align-items: center;
  gap: 18px;
}
.project__interaction-item {
  font-size: 1.4rem;
  color: #2a629a;
  cursor: pointer;
}
.project__interaction-item:hover {
  color: #113253;
}
.project__interaction-item i {
  border: 1px solid #2a629a;
  padding: 4px;
  border-radius: 3px;
  margin-right: 8px;
}
.project__card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 44px;
  font-family: var(--primary-font);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1.4;
  color: #028391;
  margin-bottom: 8px;
}
.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;
  font-size: 1.2rem;
  line-height: 1.4;
  height: 50px;
  margin-bottom: 12px;
}
.project__act {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
.project__btn-link {
  display: inline-block;
  display: inline-block;
  color: var(--color-d8);
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 14px;
  background-color: var(--primary-color);
  border-radius: 4px;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  transition: background-color 0.3s ease;
  cursor: pointer;
  border-radius: 6px;
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: 20px;
}
.project__btn-link:hover {
  background-color: var(--color-link-2);
}
.project__btn-link:active {
  background-color: var(--color-link-2);
}

.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;
}
.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;
}
.contact__form-btn:hover {
  background-color: hsl(254, 63%, 44%);
  transform: translateY(-2px);
}

.product__card {
  width: 100%;
  border-radius: 4px;
  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: 100%;
    -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 {
  aspect-ratio: 1/1;
  border-bottom: 2px solid #ecfae5;
  color: #fffdf6;
  overflow: hidden;
}
.product__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s;
}
.product__desc {
  padding: 8px 12px;
}
@media (max-width: 575.98px) {
  .product__desc {
    padding: 4px 2px;
  }
}
.product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 42px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--primary-font);
  font-size: 1.6rem;
  font-weight: 500;
  padding: 0 6px;
  text-align: justify;
  color: var(--primary-color);
  text-align: center;
}
@media (max-width: 575.98px) {
  .product__title {
    font-size: 1.3rem;
    height: 38px;
    line-height: 1.2;
  }
}
.product__price {
  padding: 4px;
  text-align: center;
}
.product__cost {
  font-size: 1.6rem;
  font-family: var(--primary-font);
  font-weight: 600;
  color: #fe7743;
}
@media (max-width: 575.98px) {
  .product__cost {
    font-size: 1.3rem;
  }
}
.product__unit {
  font-size: 1.6rem;
  margin-left: 6px;
  font-family: var(--primary-font);
  font-weight: 500;
  color: #fe7743;
}
@media (max-width: 575.98px) {
  .product__unit {
    font-size: 1.3rem;
  }
}
.product__act {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.product__btn-call {
  display: block;
  width: 100%;
  padding: 8px;
  font-size: 1.4rem;
  border-radius: 4px;
  background-color: var(--color-red-2);
  letter-spacing: 2px;
  color: #fff;
  font-weight: 500;
  font-family: var(--primary-font);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  line-height: 1.4rem;
}
.product__btn-call > p {
  font-size: 1.2rem;
}
@media (max-width: 991.98px) {
  .product__btn-call {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}

.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;
  }
}
.cart-view {
  position: absolute;
  top: 110px;
  right: 0;
  width: 385px;
  height: 100vh;
  opacity: 0;
  padding: 0 8px;
  background-color: var(--bg-cart);
  -webkit-transform-origin: right;
  transform-origin: right;
  visibility: hidden;
}
@media (max-width: 991.98px) {
  .cart-view {
    top: 120px;
  }
}
@media (max-width: 575.98px) {
  .cart-view {
    width: 100vw;
    top: 120px;
  }
}

.cart-overlay {
  position: fixed;
  inset: 110px 385px 0 0;
  background-color: rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.cart__list {
  width: 100%;
  height: 60px;
  background-color: var(--bg-cart);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--border-bottom-cart);
}
.cart__item {
  font-family: var(--primary-font);
  padding: 16px;
  font-size: 1.8rem;
  color: var(--color-cart);
  font-weight: 500;
  cursor: pointer;
}
.cart__icon-shopping {
  margin-right: 10px;
  font-size: 2.4rem;
  color: var(--color-icon);
}
.cart__icon-close {
  font-size: 1.6rem;
  color: var(--color-icon);
}
.cart__icon-close:hover {
  color: var(--color-orange);
}
.cart__empty-svg {
  padding: 10px 0 5px;
  text-align: center;
}
.cart__empty-svg svg {
  stroke: var(--color-icon);
  width: 50px;
  height: 50px;
  margin: auto;
  overflow: hidden;
  vertical-align: middle;
}
.cart__empty-text {
  display: block;
  font-size: 1.3rem;
  color: var(--color-cart);
  text-align: center;
}
.cart__body {
  height: calc(100vh - 280px);
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-bottom: 2px solid var(--border-bottom-cart);
  overflow-y: auto;
  scroll-behavior: smooth;
}
@media (max-width: 991.98px) {
  .cart__body {
    height: calc(100vh - 310px);
  }
}
.cart__product {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 16px;
}
.cart__thumb {
  width: 90px;
  height: 80px;
  background-color: var(--background-carousel);
  box-shadow: 0px 3px 3px rgba(80, 79, 79, 0.2);
}
.cart__img {
  display: block;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.cart__info {
  width: 67%;
}
.cart__product-title {
  font-size: 1.4rem;
  width: auto;
  font-family: "Roboto", sans-serif;
  color: var(--color-text-menu);
  font-weight: 500;
  line-height: 2.4rem;
}
@media (max-width: 767.98px) {
  .cart__product-title {
    font-size: 1.2rem;
  }
}
.cart__type, .cart__price, .cart__volume-quantities {
  font-family: "K2D", sans-serif;
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--color-text-desc-2);
  line-height: 2.4rem;
  font-weight: 400;
}
.cart__volume {
  padding-top: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.cart__volume-items {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-color: var(--background-nav);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
}
.cart__volume-items i {
  font-size: 1.6rem;
  color: var(--color-text-menu);
  padding: 4px;
}
.cart__volume-items:hover {
  transform: translateY(-2px);
  box-shadow: 0px 1px 1px rgba(136, 135, 135, 0.1);
}
.cart__volume-items:hover i {
  color: var(--background-sign-in-hover);
}
.cart__total-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
}
.cart__text-price {
  font-size: 1.4rem;
  color: var(--color-cart);
  font-weight: 500;
  text-transform: uppercase;
}
.cart__total-price-cost {
  font-family: var(--primary-font);
  font-size: 1.5rem;
  color: var(--color-cart-btn);
}
.cart__unit {
  font-family: var(--primary-font);
  font-size: 1.5rem;
  color: var(--color-cart-btn);
}
.cart__footer {
  margin-bottom: 50px;
}
@media (max-width: 767.98px) {
  .cart__footer {
    width: 100%;
  }
}
.cart__link {
  display: block;
  width: 90%;
  margin: 0 auto;
  font-size: 12px;
  color: var(--bg-cart);
  background-color: var(--color-cart-btn);
  border-color: var(--color-cart-btn);
  text-transform: uppercase;
  border-radius: 20px;
  text-align: center;
  padding: 12px 24px;
  cursor: pointer;
  font-weight: 600;
}

.active-cart {
  opacity: 1;
  visibility: visible;
  animation: cartToLeft 0.8s ease;
  transition: 0.8s;
}
@media (max-width: 575.98px) {
  .active-cart {
    animation: cartToLeftMobile 0.8s ease;
  }
}

.remove-active-cart {
  opacity: 0;
  visibility: hidden;
  animation: cartToRight 0.8s ease;
  transition: 0.8s;
}
@media (max-width: 575.98px) {
  .remove-active-cart {
    animation: cartToRightMobile 0.8s ease;
  }
}

.cart-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 30px;
  font-size: 1.8rem;
}
.cart-price__link-btn {
  display: inline-block;
  color: var(--color-d8);
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 12px 30px;
  background-color: var(--primary-color);
  border-radius: 4px;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  transition: background-color 0.3s ease;
  cursor: pointer;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  text-align: center;
}
.cart-price__link-btn:hover {
  background-color: var(--color-link-2);
}
.cart-price__link-btn:active {
  background-color: var(--color-link-2);
}

.splide a {
  display: block;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  text-decoration: none;
}
.splide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* global link tap highlight reset */
a,
a * {
  -webkit-tap-highlight-color: transparent;
}

.carousel {
  position: relative;
}

.carousel-viewport {
  margin: 50px;
  overflow: hidden;
  scroll-behavior: smooth;
  transition: all 0.8s;
}
@media (max-width: 767.98px) {
  .carousel-viewport {
    margin: 30px;
  }
}

.carousel__track {
  flex-wrap: nowrap;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(221, 221, 221, 0.3);
  font-size: 3rem;
  padding: 16px 10px;
  cursor: pointer;
  z-index: 10;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition: all 0.3s;
}
@media (max-width: 767.98px) {
  .carousel-btn {
    padding: 12px 8px;
    font-size: 1.6rem;
  }
}
.carousel-btn:hover {
  background-color: var(--bg-nav);
}
.carousel-btn:hover i {
  color: #fff;
}
.carousel-btn i {
  color: var(--bg-nav);
}
.carousel-btn__next {
  right: 0;
  border-radius: 50%;
}
.carousel-btn__prev {
  left: 0;
  border-radius: 50%;
}

.progress-bar {
  width: 50%;
  margin: 0 auto;
  bottom: 60px;
  height: 6px;
  background: #ddd;
  border-radius: 3px;
}

.progress {
  height: 100%;
  width: 0%;
  background: #2196f3;
  border-radius: 3px;
  transition: width 0.2s;
}

/* 2.1 Overlay xám full màn hình */
.preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(128, 128, 128, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
}

/* 2.2 Container chứa ảnh + nút Close */
.preview-container {
  position: relative;
  background: transparent;
  overflow: hidden;
}

/* 2.3 Ảnh preview */
.preview-img {
  display: block;
  object-fit: contain;
}

/* 2.4 Nút Close */
.close-btn {
  display: inline-block;
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 10px 12px;
  border-radius: 50%;
  border: none;
  background: rgba(105, 105, 105, 0.7);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
  transition: 0.3s;
}
.close-btn:hover {
  color: #f97a00;
  background-color: #e9e3df;
}

/* —— Media Queries —— */
/* 2.5 PC: màn ≥ 1025px — ảnh 70% cả chiều ngang và dọc */
@media (min-width: 1025px) {
  .preview-container {
    width: 85vw;
    height: 85vh;
  }
  .preview-img {
    width: 100%;
    height: 100%;
    background-color: #e9e3df;
  }
}
/* 2.6 Tablet/Mobile — Landscape: giống PC */
@media (max-width: 1024px) and (orientation: landscape) {
  .preview-container {
    width: 70vw;
    height: 100vh;
    margin: 0 15vh;
  }
  .preview-img {
    width: 100%;
    height: 100%;
    background-color: #e9e3df;
  }
}
/* 2.7 Tablet/Mobile — Portrait: chiều ngang 100%, chừa 15% overlay 2 bên */
@media (max-width: 1024px) and (orientation: portrait) {
  .preview-container {
    width: 100%;
    max-width: 100vw;
    margin: 15vh 0;
  }
  .preview-img {
    width: 100%;
    height: auto;
    background-color: #e9e3df;
  }
}
.comment-blog__title {
  font-size: 1.8rem;
  font-family: "Noto Sans";
  color: var(--bg-color-left-nav);
  font-weight: 600;
  padding: 18px 22px;
}
.comment-blog__handle-form {
  margin-bottom: 38px;
  padding: 16px;
  border: 2px dashed #ccc;
  border-radius: 8px;
}
.comment-blog__form {
  margin-bottom: 30px;
}
.comment-blog__form:focus-within .comment-blog__form-label {
  color: var(--bg-color-left-nav);
}
.comment-blog__form:focus-within .comment-blog__form-input {
  border-color: var(--bg-color-left-nav);
}
.comment-blog__form-label {
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--bg-color-left-nav);
  padding-bottom: 12px;
}
.comment-blog__form-input {
  width: 100%;
  font-size: 1.4rem;
  border-bottom: 2px solid #afa8c4;
  padding: 8px 0 14px;
  color: #321f70;
  caret-color: var(--bg-color-left-nav);
}
.comment-blog__form-input::placeholder {
  color: #9b93b3;
}
.comment-blog__form-text-area {
  width: 100%;
  min-height: 50px;
  margin-top: 15px;
  border: none;
  border-bottom: 2px solid #afa8c4;
  font-size: 1.6rem;
  font-family: "Fz Poppins";
  resize: none;
  outline: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.comment-blog__form-text-area::-webkit-scrollbar {
  display: none;
}
.comment-blog__submit-btn {
  display: block;
  color: var(--color-text-button);
  font-size: 1.4rem;
  font-weight: 600;
  padding: 13px 38px;
  background-color: var(--card-btn-ad-bg);
  border: 2px solid var(--card-btn-ad-bg);
  border-radius: 5px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  margin: 30px auto 0;
  text-align: center;
}
.comment-blog__comments {
  overflow: hidden;
  transition: height 1.2s ease;
  margin-bottom: 30px;
}
.comment-blog__comment-user {
  padding: 12px;
  border-radius: 8px;
  background-color: #faf7f3;
  margin-bottom: 24px;
}
.comment-blog__user {
  font-size: 1.6rem;
  font-family: "Noto Sans";
  color: var(--bg-color-left-nav);
  font-weight: 600;
  margin-bottom: 12px;
}
.comment-blog__content > p {
  color: #1c352d;
  font-family: "Noto Sans";
  font-size: 1.4rem;
  margin-bottom: 8px;
  text-align: justify;
}
.comment-blog__time {
  display: block;
  font-size: 1.2rem;
  font-family: "Noto Sans";
  color: #58a0c8;
  margin-bottom: 8px;
  text-align: end;
}
.comment-blog__view-all {
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-size: 3rem;
  padding: 6px 24px;
  color: var(--bg-color-left-nav);
  cursor: pointer;
  transition: 0.3s;
}
.comment-blog__view-all:hover {
  color: #ff8225;
}

.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(--primary-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-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(--primary-color);
}
.blog__category-link-active {
  color: var(--primary-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%;
    font-size: 1.4rem;
    line-height: 2.8;
  }
}
.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;
}

.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 iframe {
  aspect-ratio: 16/9;
}
.card__thumb {
  width: auto;
  aspect-ratio: 16/9;
  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: 4px;
  align-items: center;
}
.card__date {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
@media (max-width: 575.98px) {
  .card__date {
    width: 40px;
    height: 40px;
  }
}
.card__day {
  width: 100%;
  height: 100%;
  text-align: center;
  background: #f4f4f4;
  display: block;
  font-size: 1.6rem;
  line-height: 1.8;
  font-weight: bold;
  color: var(--primary-color);
}
@media (max-width: 575.98px) {
  .card__day {
    font-size: 1.4;
    line-height: 1.6;
  }
}
.card__month {
  width: 100%;
  height: 100%;
  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.07) inset;
  color: #ffffff;
  font-size: 1.4rem;
  line-height: 2;
  text-align: center;
  padding: 0 0 2px;
  display: block;
  background-color: var(--primary-color);
}
@media (max-width: 575.98px) {
  .card__month {
    font-size: 1.1rem;
    line-height: 1.2;
  }
}
.card__month::first-letter {
  text-transform: capitalize;
}
.card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 1.6rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--primary-color);
  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;
  }
}
@media (max-width: 575.98px) {
  .card__title {
    font-size: 1.3rem;
    height: 40px;
  }
}
.card__title:hover {
  color: var(--color-orange);
}
.card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 8px;
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--color-666);
  text-align: justify;
}
@media (max-width: 575.98px) {
  .card__desc {
    font-size: 1.2rem;
    height: 58px;
  }
}

.custom-pagination-numbers {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  gap: 8px;
}

.custom-page-number {
  cursor: pointer;
  width: 30px;
  height: 30px;
  border: 2px solid var(--primary-color);
  color: var(--main-color);
  border-radius: 4px;
  background: #f9f9f9;
  transition: all 0.3s ease;
  line-height: 1.5;
}
@media (max-width: 575.98px) {
  .custom-page-number {
    width: 30px;
    height: 30px;
    line-height: 1.6;
  }
}

.custom-page-number:hover {
  background: #eee;
}

.custom-page-number.active {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

#project-splide .splide__pagination {
  display: none; /* Ẩn dot tròn mặc định */
}

.js-blog-splide .splide__pagination {
  display: none; /* Ẩn dot tròn mặc định */
}

/* Dot mặc định */
.splide__pagination__page {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50%;
  border: none;
  margin: 0 4px;
  background: linear-gradient(45deg, #fada61 0%, #ff9188 50%, #ff5acd 100%) !important;
  transition: all 0.25s ease;
}

/* Dot active */
.splide__pagination__page.is-active {
  width: 16px;
  height: 16px;
  opacity: 1;
  background: linear-gradient(45deg, #8ec5fc 0%, #8dd3ff 25%, #a1d8ff 50%, #c1d2ff 75%, #e0c3ff 100%) !important;
  transform: rotate(-20deg);
}

.splide-home-image {
  width: 98%;
  margin: 0 auto;
}
@media (max-width: 767.98px) {
  .splide-home-image {
    width: 100%;
  }
}

/* Arrow chung */
.splide__arrow {
  width: 44px !important;
  height: 44px !important;
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Icon màu trắng */
.splide__arrow svg {
  fill: #ffffff !important;
  width: 36px !important;
  height: 36px !important;
}
@media (max-width: 575.98px) {
  .splide__arrow svg {
    width: 24px !important;
    height: 24px !important;
  }
}

/* Vị trí */
.splide__arrow--prev {
  left: 4px !important;
}

.splide__arrow--next {
  right: 4px !important;
}

.home {
  padding-bottom: 50px;
}
@media (max-width: 991.98px) {
  .home {
    padding-bottom: 70px;
  }
}
@media (max-width: 767.98px) {
  .home {
    padding-bottom: 50px;
  }
}

.home-product {
  padding-top: 30px;
}

.top-bar__content {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  background-color: var(--primary-color);
  border-radius: 4px;
  padding: 8px 12px;
}
.top-bar__heading {
  color: var(--color-white-1);
  line-height: 1.5;
  font-size: 1.8;
  font-weight: 600;
}
.top-bar__link {
  display: inline-block;
  color: var(--color-white-1);
  line-height: 1.5;
  transition: all 0.3s;
}
.top-bar__link:hover {
  color: var(--color-orange-strong);
}
.top-bar__link i {
  padding-left: 4px;
  font-size: 1.2rem;
}

.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(--primary-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: 1.8rem;
    line-height: 1.4;
    padding-bottom: 8px;
  }
}
.home-project__sub-heading {
  color: var(--color-777);
  font-size: 1.6rem;
  line-height: 1;
  font-style: italic;
  padding-bottom: 13px;
}
@media (max-width: 575.98px) {
  .home-project__sub-heading {
    font-size: 1.3rem;
  }
}
.home-project__border-bottom {
  display: block;
  width: 45px;
  height: 3px;
  background-color: var(--primary-color);
  margin: 0 auto 20px;
}

.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(--primary-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: 1.8rem;
    line-height: 1.4;
    padding-bottom: 8px;
  }
}
.home-blog__sub-heading {
  color: var(--color-777);
  font-size: 1.6rem;
  line-height: 1;
  font-style: italic;
  padding-bottom: 13px;
}
@media (max-width: 575.98px) {
  .home-blog__sub-heading {
    font-size: 1.3rem;
  }
}
.home-blog__border-bottom {
  display: block;
  width: 45px;
  height: 3px;
  background-color: var(--primary-color);
  margin: 0 auto 20px;
}

.contact {
  padding: 50px 0;
  margin: 0;
}
@media (max-width: 575.98px) {
  .contact {
    padding: 30px 0;
  }
}
.contact__heading {
  color: var(--primary-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-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(--primary-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-product {
  padding-bottom: 50px;
  position: relative;
}

.products__padding {
  padding: 28px 0;
}

.breadcrumb {
  line-height: 1.6;
  margin-bottom: 8px;
  margin-top: 8px;
  font-size: 1.3rem;
}
@media (max-width: 575.98px) {
  .breadcrumb {
    font-size: 1.2rem;
  }
}
.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;
  text-transform: lowercase;
}
.breadcrumb span::before {
  content: "/";
  margin-right: 8px;
}

.main-product-detail {
  background-color: #f5f5f5;
  padding-bottom: 30px;
}

.preview {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  /* Đưa nút ra mép ngoài cùng để không đè vào căn giữa của main */
}
.preview__overlay {
  position: absolute;
  inset: 0; /* phủ toàn màn hình */
  background: rgba(0, 0, 0, 0.8);
  z-index: -100;
}
.preview__content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 70vh;
  z-index: 2;
  box-sizing: border-box;
}
.preview__close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2.4rem;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 999;
}
.preview__prev, .preview__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.4rem;
  color: #fff;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
}
.preview__prev {
  left: 20px;
}
.preview__next {
  right: 20px;
}
.preview__main {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.preview__main img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Đảm bảo không dính khoảng trắng inline */
  vertical-align: middle;
}
.preview__thumbs {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  overflow: hidden;
}
.preview__thumbsimg {
  display: block;
  width: 80px;
  cursor: pointer;
  object-fit: cover;
}

.preview.hidden {
  display: none;
}

.product-detail__icon-view {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 3rem;
  color: #333;
  cursor: pointer;
}
@media (max-width: 991.98px) {
  .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;
  }
}
.product-detail__icon-view:hover {
  color: #ff7f3e;
}
.product-detail__show {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.product-detail__card {
  width: 100%;
  height: 100%;
  transition: 0.3s;
}
@media (max-width: 991.98px) {
  .product-detail__card {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.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;
}
.product-detail__card-thumb {
  position: relative;
  overflow: hidden;
}
.product-detail__prod-track {
  display: flex;
  flex-direction: row;
}
.product-detail__card-img {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}
.product-detail__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 100;
  cursor: pointer;
}
.product-detail__icon-thumb {
  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;
  transition: all 0.3s;
}
@media (max-width: 991.98px) {
  .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;
  }
}
.product-detail__icon-thumb:hover {
  background-color: #ffffff;
  color: #ffa070;
}
.product-detail__icon-thumb-left {
  z-index: 10;
  left: 0;
}
.product-detail__icon-thumb-right {
  z-index: 10;
  right: 0;
}
.product-detail__carousel {
  width: 100%;
  margin-top: 12px;
}
.product-detail__list-thumb {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
.product-detail__list-img {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  opacity: 0.9;
}
@media (max-width: 575.98px) {
  .product-detail__list-img {
    width: 60px;
    height: 60px;
  }
}
.product-detail__list-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  cursor: pointer;
  transition: 0.2s;
}
@media (max-width: 991.98px) {
  .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;
  }
}
.product-detail__list-img img:hover {
  opacity: 1;
  border: 1px solid #007bff;
}
.product-detail__content {
  background-color: #ffffff;
  padding: 20px;
}
@media (max-width: 575.98px) {
  .product-detail__content {
    padding: 6px;
  }
}
.product-detail__title {
  font-family: var(--primary-font);
  font-size: 2.3rem;
  font-weight: 600;
  line-height: 1.5;
  color: #333333;
  margin-bottom: 12px;
  text-align: justify;
}
@media (max-width: 575.98px) {
  .product-detail__title {
    font-size: 1.8rem;
  }
}
.product-detail__info {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #252a2b;
  font-size: 1.4rem;
  line-height: 1.45;
  margin-bottom: 16px;
}
@media (max-width: 767.98px) {
  .product-detail__info {
    flex-direction: column;
    align-items: start;
  }
}
.product-detail__separate {
  width: 2px;
  height: 16px;
  background-color: #cbcbcb;
}
@media (max-width: 767.98px) {
  .product-detail__separate {
    display: none;
  }
}
.product-detail__id-sub {
  color: #263b96;
  font-weight: 600;
}
.product-detail__sub-title {
  font-size: 1.4rem;
  line-height: 1.5rem;
  color: #333;
  text-align: justify;
  padding-bottom: 16px;
}
.product-detail__message {
  font-size: 1.4rem;
  line-height: 1.5rem;
  color: #263b96;
  text-align: justify;
  padding-bottom: 16px;
}
.product-detail__block-cost {
  display: flex;
  gap: 8px;
}
.product-detail__cost {
  font-size: 2.2rem;
  line-height: 1.6;
  font-weight: 600;
  color: #ff7f3e;
}
@media (max-width: 575.98px) {
  .product-detail__cost {
    font-size: 1.8rem;
    font-weight: 800;
  }
}
.product-detail__price {
  font-size: 2.2rem;
  line-height: 1.6;
  font-weight: 600;
  color: #ff7f3e;
  font-family: var(--primary-font);
}
@media (max-width: 575.98px) {
  .product-detail__price {
    font-size: 1.8rem;
    font-weight: 800;
  }
}
.product-detail__type-voltage {
  padding-bottom: 18px;
}
.product-detail__specifications {
  font-size: 1.8rem;
  font-weight: 600;
  font-family: "Open Sans";
  color: #ff7f3e;
  padding-bottom: 16px;
}
.product-detail__specifications-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.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);
}
.product-detail__specifications-item input {
  display: none;
}
.product-detail__act {
  display: flex;
  gap: 20px;
  padding-top: 20px;
}
@media (max-width: 767.98px) {
  .product-detail__act {
    flex-direction: column;
  }
}
.product-detail__link {
  display: block;
  width: 100%;
  padding: 16px;
  color: #e70505;
  font-size: 1.6rem;
  border-radius: 4px;
  border: 1px solid #e70505;
  font-family: "Open Sans";
  font-weight: 600;
  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) {
  .product-detail__link {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
  }
}
.product-detail__link:hover {
  background-color: #e70505;
  color: #ffffff;
}
.product-detail__share {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
}
.product-detail__share a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.product-detail__share-text {
  font-size: 16px;
  color: #333333;
}
.product-detail__facebook {
  background-color: #0883ff;
}
.product-detail__facebook-messenger {
  background-color: #0f6bff;
}
.product-detail__pinterest {
  background-color: #cf292c;
}
.product-detail__twitter {
  background-color: #4dc6fa;
}
.product-detail__linkedin {
  background-color: #1467c7;
}
.product-detail__policy {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 767.98px) {
  .product-detail__policy {
    flex-direction: column;
    align-items: start;
  }
}
.product-detail__left-policy, .product-detail__right-policy {
  padding: 12px 0;
}
.product-detail__policy-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  font-family: "Open Sans";
  margin-bottom: 8px;
}
.product-detail__policy-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}
.product-detail__policy-row img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  object-position: center;
}
.product-detail__policy-text {
  font-size: 1.4rem;
  line-height: 1.4;
  font-weight: 400;
  color: #252a2b;
  font-family: "Open Sans";
}
.product-detail__desc {
  padding: 12px 8px;
  background-color: #ffffff;
  width: 100%;
}
.product-detail__desc-heading {
  position: relative;
  font-size: 16px;
  margin-bottom: 10px;
  padding: 12px 0;
  font-weight: 600;
  color: var(--primary-color);
  text-transform: uppercase;
  border-bottom: 2px solid #b3b3b3;
}
.product-detail__desc-heading::before {
  content: "";
  position: absolute;
  bottom: -2px;
  width: 120px;
  height: 2px;
  background-color: var(--primary-color);
}

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

.login-overlay {
  background-color: var(--bg-login);
}

.login {
  min-height: 65vh;
  margin: 0 auto;
  padding: 55px 30px 80px;
}
@media (max-width: 575.98px) {
  .login {
    padding: 30px 0;
  }
}

.login-form {
  max-width: 620px;
  margin: 35px auto 50px;
  background: var(--bg-login-form);
  padding: 25px 30px 30px;
}
.login-form__title {
  margin-bottom: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-form__title h4 {
  padding: 0px 30px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  margin: 0;
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}
.login-form__title h4 a {
  cursor: pointer;
}
.login-form__title h4 + h4 {
  border-left: 2px solid var(--color-777);
}
.login-form__log-in {
  color: var(--color-title-1);
}
.login-form__register {
  color: var(--color-title-2);
  transition: 0.2s;
}
.login-form__register:hover {
  color: var(--color-title-1);
}
.login-form__err {
  font-size: 1.2rem;
  line-height: 1.3;
  margin-bottom: 16px;
  color: var(--color-warning);
}
.login-form__input {
  width: 100%;
  height: 55px;
  padding: 5px 20px;
  margin-bottom: 25px;
  color: var(--color-text-login);
  font-size: 1.4rem;
  font-weight: 500;
  border: 1px solid transparent;
  background-color: var(--color-bg-login);
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  font-style: italic;
}
.login-form__input:focus {
  background-color: var(--color-fff);
  border: 1px solid var(--color-bg-login);
}
.login-form__sitebox-recapcha {
  margin-bottom: 25px;
  padding: 6px 0 0;
  text-align: left;
  color: var(--color-9e);
  font-size: 13px;
  clear: both;
}
.login-form__sitebox-recapcha a {
  color: var(--color-link-1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}
.login-form__action {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 575.98px) {
  .login-form__action {
    justify-content: center;
  }
}
.login-form__submit {
  position: relative;
  display: inline-block;
  padding: 12px 28px;
  border-radius: 4px;
  background-color: var(--primary-color);
  color: var(--color-fff);
  text-transform: uppercase;
  font-size: 1.4rem;
  letter-spacing: 1px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  overflow: hidden;
  z-index: 0;
  transition: color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}
@media (max-width: 575.98px) {
  .login-form__submit {
    margin-bottom: 15px;
  }
}
.login-form__submit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-link-2);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.35s ease-in-out;
  z-index: 0;
}
.login-form__submit__text,
.login-form__submit > .login-form__text {
  position: relative;
  z-index: 1;
  transition: color 0.2s ease;
  pointer-events: none;
}
.login-form__submit:hover::before {
  transform: scaleX(1);
}
.login-form__submit:hover .login-form__text, .login-form__submit:hover > .login-form__text {
  color: var(--color-fff);
}
.login-form__req-pas {
  padding-left: 30px;
  margin-right: auto;
}
@media (max-width: 575.98px) {
  .login-form__req-pas {
    padding-left: 0;
  }
}
.login-form__req-pas p {
  font-size: 1.4rem;
  line-height: 1.5;
}
.login-form__req-pas p a {
  color: var(--color-link-2);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}

.cart-header__title {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 3.7rem;
  color: var(--color-text-menu);
  font-family: "Open Sans", sans-serif;
  text-align: center;
  margin-bottom: 30px;
}

.main-cart {
  padding: 80px 0;
}
@media (max-width: 991.98px) {
  .main-cart {
    padding: 50px 0;
  }
}
@media (max-width: 767.98px) {
  .main-cart {
    padding: 30px 0;
  }
}

.order-content {
  padding: 30px 16px;
  border: 2px solid #eee;
  border-radius: 18px;
}

.order__product {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 20px 0;
  border-bottom: 2px solid #dee8ce;
}
@media (max-width: 767.98px) {
  .order__product {
    flex-direction: column;
  }
}
.order__thumb {
  width: 200px;
  height: 148px;
  background-color: var(--background-carousel);
  box-shadow: 0px 3px 3px rgba(80, 79, 79, 0.2);
}
@media (max-width: 767.98px) {
  .order__thumb {
    width: 240px;
    height: 168px;
  }
}
.order__img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
  object-position: center;
}
.order__product-title {
  font-size: 1.6rem;
  width: auto;
  font-family: "Roboto", sans-serif;
  color: var(--color-text-menu);
  font-weight: 500;
  line-height: 2.4rem;
}
.order__type, .order__price, .order__volume-quantities {
  font-family: "K2D", sans-serif;
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--color-text-desc-2);
  line-height: 2.4rem;
  font-weight: 400;
}
.order__trash {
  margin-left: 30px;
}
@media (max-width: 575.98px) {
  .order__trash {
    margin-left: 0;
  }
}
@media (max-width: 575.98px) {
  .order__cost {
    padding-left: 49px;
  }
}
.order__btn {
  width: 20%;
  padding: 15px;
}
@media (max-width: 991.98px) {
  .order__btn {
    font-size: 1.4rem;
    padding: 0;
    width: 15%;
  }
}
@media (max-width: 575.98px) {
  .order__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 15px;
  }
}
.order__volume {
  display: flex;
  align-items: center;
  justify-content: center;
}
.order__volume-items {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 40px;
  background-color: var(--background-nav);
  cursor: pointer;
  transition: all 0.3s;
}
.order__volume-items i {
  font-size: 1.6rem;
  padding: 10px 6px;
  color: var(--color-text-menu);
}
.order__volume-items:hover {
  box-shadow: 0px 1px 1px rgba(136, 135, 135, 0.1);
}
.order__volume-items:hover i {
  color: var(--background-sign-in-hover);
}
.order__volume-quantities {
  width: 60px;
  height: 40px;
  text-align: center;
  padding: 8px 0;
  font-size: 1.8rem;
  font-weight: 600;
  border: 1px solid var(--background-nav);
}
@media (max-width: 991.98px) {
  .order__volume-quantities {
    width: 30px;
  }
}
.order__total-price {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  color: var(--color-text-menu);
  font-weight: 500;
  background-color: #f2edd1;
  border-radius: 4px;
  padding: 12px 8px;
  margin-top: 20px;
}
.order__text-price {
  width: 38%;
}

.cart-infor__title {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 3.7rem;
  color: var(--color-text-menu);
  font-family: "Open Sans", sans-serif;
  text-align: center;
  margin-bottom: 30px;
}

.cart-infor__form {
  padding: 30px 16px;
  border: 2px solid #eee;
  border-radius: 18px;
}
.cart-infor__form-group {
  padding: 12px 8px;
}
.cart-infor__form-group > label {
  font-size: 1.4rem;
  color: #1e104d;
  font-weight: 600;
}
.cart-infor__form-group > input {
  width: 100%;
  font-size: 1.4rem;
  border-bottom: 2px solid #afa8c4;
  padding: 8px 0 14px;
  color: #321f70;
}
.cart-infor__form-group > input::placeholder {
  color: #9b93b3;
}
.cart-infor__form-group > textarea {
  width: 100%;
  margin-top: 15px;
  color: #321f70;
  border: none;
  border-bottom: 2px solid #afa8c4;
  font-size: 1.4rem;
  resize: none;
  outline: none;
}
.cart-infor__form-group > textarea::placeholder {
  color: #9b93b3;
}
.cart-infor__btn {
  display: inline-block;
  color: var(--color-d8);
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 12px 30px;
  background-color: var(--primary-color);
  border-radius: 4px;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  transition: background-color 0.3s ease;
  cursor: pointer;
  display: block;
  width: 330px;
  height: 45px;
  margin: 0 auto;
  text-align: center;
  margin-top: 30px;
}
.cart-infor__btn:hover {
  background-color: var(--color-link-2);
}
.cart-infor__btn:active {
  background-color: var(--color-link-2);
}
@media (max-width: 767.98px) {
  .cart-infor__btn {
    width: 100%;
  }
}

@media (max-width: 991.98px) {
  .main-project {
    padding-top: 30px;
  }
}

#nav-left {
  transition: 0.6s;
  position: sticky;
  top: 0;
}

.project__category-head {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: var(--bg-color-left-nav);
  padding: 12px 18px;
}
.project__title {
  font-family: "Roboto_old", sans-serif;
  font-size: 3.2rem;
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 5rem;
  text-align: center;
  color: var(--color-text-menu);
  padding-top: 30px;
}
@media (max-width: 991.98px) {
  .project__title {
    font-size: 2.6rem;
  }
}
@media (max-width: 767.98px) {
  .project__title {
    font-size: 2rem;
  }
}
.project__nav {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  border: 2px solid var(--bg-color-left-nav);
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.project__nav::-webkit-scrollbar {
  display: none;
}
.project__category-icon i {
  font-size: 2.1rem;
  color: #fff;
  padding: 4px;
  cursor: pointer;
}
.project__category-icon-close {
  display: none;
}
.project__category-heading {
  font-size: 2rem;
  font-weight: 600;
  font-family: "Noto Sans";
  color: #fff;
  line-height: 3.8rem;
}
.project__category-list {
  background-color: #fff;
}
.project__category-list > li:last-child {
  border: none;
}
.project__category-item {
  display: flex;
  align-items: center;
  padding: 0 22px;
  gap: 16px;
  border-bottom: 2px solid #eee;
  transition: 0.3s;
}
.project__category-item:hover {
  background-color: #d3d3d3;
}
.project__category-item > i {
  font-size: 1.4rem;
  color: var(--bg-color-left-nav);
}
.project__category-link {
  display: block;
  width: 100%;
  padding: 18px 0;
  font-size: 1.4rem;
  line-height: 2.1;
  font-weight: 600;
  color: var(--bg-color-left-nav);
  text-align: justify;
}
.project__nav-heading {
  font-size: 1.8rem;
  font-family: "Noto Sans";
  color: #fff;
  background-color: var(--bg-color-left-nav);
  font-weight: 600;
  padding: 18px 22px;
}
.project__nav-list {
  background-color: #fff;
  padding-bottom: 100px;
}
.project__nav-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 2px solid #d3d3d3;
  padding-left: 6px;
}
.project__nav-thumb {
  width: 60px;
  height: 42px;
  border-radius: 8px;
}
.project__nav-img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
  object-position: center;
}
.project__nav-link {
  display: block;
  width: 70%;
  font-family: "Open Sans";
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 400;
  text-align: justify;
  color: var(--bg-color-left-nav);
  padding: 8px 6px;
}
.project__nav-link:hover {
  color: var(--bg-color-left-nav);
  text-decoration: underline;
}
.project__content {
  width: 100%;
}
.project__padding {
  padding: 50px 0;
}

.main-message {
  padding: 50px 0;
  min-height: 60vh;
}

.message__header-title {
  font-size: 2rem;
  line-height: 1.5;
  letter-spacing: 1px;
  color: var(--color-26);
  font-family: var(--primary-font);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 24px;
}
.message__header-sub-title {
  font-size: 1.4rem;
  line-height: 1.4;
  font-family: var(--primary-font);
  color: var(--color-666);
  margin-bottom: 14px;
}
.message__header-sub-title__strong {
  font-weight: 500;
  color: var(--color-26);
}
.message__header-link {
  color: var(--color-link-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}
.message__header-link:hover {
  text-decoration: underline;
}

.register-form__field {
  margin-bottom: 25px;
}
.register-form h4 {
  padding: 0px 30px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  margin: 0;
  line-height: 1.2;
}
.register-form h4 a {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}
.register-form__register {
  color: var(--color-title-1);
}
.register-form__log-in {
  color: var(--color-ca);
}
.register-form__log-in:hover {
  color: var(--color-title-1);
  transition: all 0.3s ease;
}
.register-form__label {
  display: block;
  margin-bottom: 8px;
  font-size: 1.4rem;
  color: var(--color-5c);
}
.register-form__input {
  display: none;
}
.register-form__message {
  font-size: 1.4rem;
  color: var(--color-warning);
  line-height: 1.4;
  margin-bottom: 25px;
}
.register-form__input + label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1.4;
  padding-left: 28px;
  margin: 0 20px 0 0;
}
.register-form__input + label::before, .register-form__input + label::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.register-form__input + label::before {
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  background: #323232;
  -moz-box-shadow: inset 0 0 0 18px #efefef;
  -webkit-box-shadow: inset 0 0 0 18px #efefef;
  box-shadow: inset 0 0 0 18px #efefef;
}
.register-form__input + label::after {
  top: 49%;
  left: 9px;
  width: 54px;
  height: 54px;
  opacity: 0;
  background: rgba(255, 255, 255, 0.3);
  -moz-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  -webkit-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
}
.register-form__input:checked + label::before {
  -moz-box-shadow: inset 0 0 0 4px #efefef;
  -webkit-box-shadow: inset 0 0 0 4px #efefef;
  box-shadow: inset 0 0 0 4px #efefef;
}
.register-form__input:checked + label::after {
  -moz-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  -moz-animation: ripple 1s none;
  -webkit-animation: ripple 1s none;
  animation: ripple 1s none;
}

.main-project {
  padding-bottom: 50px;
}

.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.6rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--primary-color);
  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: 8px;
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--color-666);
  text-align: justify;
}

.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__heading {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 20px;
  color: var(--main-color);
  text-align: center;
  text-transform: uppercase;
}
.project__content {
  padding-top: 50px;
}
@media (max-width: 575.98px) {
  .project__content {
    padding-top: 30;
  }
}

.user {
  margin-bottom: 30px;
}
@media (max-width: 575.98px) {
  .user {
    position: relative;
    padding-top: 20px;
    background-color: var(--color-e9);
  }
}
.user__arrow-left {
  display: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}
.user__arrow-left span {
  display: inline-block;
  line-height: 1.9;
  font-weight: 500;
}
.user__arrow-left i {
  font-size: 2rem;
  padding: 4px;
  line-height: 1.6;
  margin-right: 8px;
}
@media (max-width: 575.98px) {
  .user__arrow-left {
    display: block;
    position: absolute;
    top: 2px;
    left: 6px;
    color: var(--color-pink);
  }
}
.user__row {
  display: flex;
  min-height: 65vh;
}
.user__nav {
  width: 30%;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
@media (max-width: 575.98px) {
  .user__nav {
    display: none;
  }
}
.user__body {
  padding: 18px 24px;
  background-color: var(--color-e9);
  width: 70%;
}
@media (max-width: 575.98px) {
  .user__body {
    width: 100%;
  }
}
.user__body h2 {
  font-size: 2rem;
  line-height: 1.5;
  color: var(--color-5c);
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: 25px;
}
.user__info-user {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 30px;
}
.user__thumb {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}
.user__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.user__name {
  font-size: 2.2rem;
  color: var(--color-26);
  font-weight: 600;
  line-height: 1.5;
}
.user__mail {
  font-size: 1.4rem;
  color: var(--color-5c);
}
.user__block-form {
  position: relative;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
}
.user__block-form label {
  font-size: 1.3rem;
  color: var(--color-26);
  font-weight: 500;
  line-height: 1.4;
  margin-left: 4px;
  margin-bottom: 8px;
}
.user__block-form input,
.user__block-form textarea {
  border: 2px solid var(--color-ca);
  padding: 8px 40px 8px 8px;
  border-radius: 4px;
  color: var(--color-666);
  caret-color: var(--color-link-2);
  font-size: 1.4rem;
}
.user__block-form textarea {
  resize: none;
}
.user__block-form i {
  position: absolute;
  right: 5px;
  top: 70%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: var(--color-link-2);
  cursor: pointer;
}
.user__warning-form {
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--color-warning);
}
.user__btn {
  margin-top: 20px;
  margin-bottom: 50px;
  display: inline-block;
  color: var(--color-d8);
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 12px 22px;
  background-color: var(--primary-color);
  border-radius: 4px;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  transition: background-color 0.3s ease;
  cursor: pointer;
  opacity: 0.6;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}
.user__btn:hover {
  background-color: var(--color-link-2);
}
.user__btn:active {
  background-color: var(--color-link-2);
}

.forgot-password__step {
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--color-666);
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 20px;
}
.forgot-password__text {
  margin-bottom: 12px;
  line-height: 1.4;
  font-size: 1.3rem;
  color: var(--color-5c);
}
.forgot-password__tooltip {
  font-size: 1.3rem;
  margin-bottom: 20px;
  color: var(--color-warning);
  line-height: 1.4;
}

.user-nav {
  min-height: 100vh;
  background-color: var(--color-pink);
}

.user__nav-list {
  padding: 18px 24px;
  background-color: #e49ba6;
  height: 100%;
}
.user__nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 30px 14px 0px;
  color: var(--color-e9);
}
.user__nav-item i {
  font-size: 1.6rem;
  color: var(--color-link-2);
}
.user__nav-item a {
  font-size: 1.4rem;
  font-weight: 500;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}
.user__nav-item a:hover {
  color: var(--color-fff);
}
.user__nav-item input {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}
.user__nav-item input:hover {
  color: var(--color-red);
}

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

.body-admin-comment {
  position: relative;
  min-height: 100vh;
  padding: 30px 0;
  background-color: var(--bg-content-admin);
}
@media (max-width: 991.98px) {
  .body-admin-comment {
    background-color: var(--bg-color-admin-body);
    position: static;
  }
}

.admin-comment {
  margin-left: 288px;
  padding: 0 20px;
}
@media (max-width: 991.98px) {
  .admin-comment {
    margin-left: 0;
    padding: 90px 0 0 0;
  }
}
.admin-comment__heading {
  font-size: 1.8rem;
  color: var(--color-26);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.admin-comment__content {
  min-height: 100vh;
}
.admin-comment__list {
  border: 2px solid #d6dac8;
  border-radius: 4px;
  background-color: #fff5f2;
}
.admin-comment__list li:nth-child(even) {
  background-color: #eeeeee;
}
.admin-comment__list li:last-child {
  border-bottom: none;
}
.admin-comment__item {
  display: flex;
  align-items: center;
  border-bottom: 2px solid #d6dac8;
}
@media (max-width: 767.98px) {
  .admin-comment__item {
    flex-direction: column;
  }
}
.admin-comment__author {
  display: flex;
  align-items: center;
  width: 20%;
}
@media (max-width: 767.98px) {
  .admin-comment__author {
    width: 100%;
    padding: 12px;
  }
}
.admin-comment__user {
  padding: 4px 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
}
.admin-comment__user i {
  color: #bb6653;
  font-size: 1.6rem;
}
.admin-comment__name {
  font-size: 1.4rem;
  color: #154d71;
  text-wrap: nowrap;
}
.admin-comment__desc {
  padding: 4px 12px;
  width: 73%;
}
@media (max-width: 767.98px) {
  .admin-comment__desc {
    width: 100%;
  }
}
.admin-comment__cmt {
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: #3e3f29;
}
.admin-comment__date {
  font-size: 1.2rem;
  color: #bb6653;
}
.admin-comment__remove-btn {
  padding: 12px;
  font-size: 2rem;
  color: #f08b51;
  cursor: pointer;
  transition: 0.3s;
}
.admin-comment__remove-btn:hover {
  color: #ff7a30;
  transform: translateY(-2px);
}

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

.body-admin-order {
  position: relative;
  min-height: 100vh;
  padding: 30px 0;
  background-color: var(--bg-content-admin);
}
@media (max-width: 991.98px) {
  .body-admin-order {
    background-color: var(--bg-color-admin-body);
    position: static;
  }
}

.admin-order {
  margin-left: 288px;
  padding: 0 20px;
}
@media (max-width: 991.98px) {
  .admin-order {
    margin-left: 0;
    padding: 90px 0 0 0;
  }
}
.admin-order__heading {
  font-size: 1.8rem;
  color: var(--color-26);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.admin-order__content {
  min-height: 100vh;
}
.admin-order__list-item {
  display: block;
  padding: 12px;
  border: 2px solid #e2e2e2;
  border-radius: 12px;
  background-color: #fff5f2;
}
@media (max-width: 575.98px) {
  .admin-order__list-item {
    padding: 8px;
    border-radius: 6px;
  }
}
.admin-order__list-item + .admin-order__list-item {
  margin-top: 30px;
}
.admin-order__list-item-info {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 6px 0;
}
@media (max-width: 575.98px) {
  .admin-order__list-item-info {
    gap: 10px;
    padding: 6px 0;
  }
}
.admin-order__list-item-id {
  width: calc(100% - 190px);
  font-size: 1.4rem;
  width: 190px;
  padding: 8px;
  color: #bb6653;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  background-color: var(--background-carousel);
}
@media (max-width: 575.98px) {
  .admin-order__list-item-id {
    font-size: 1.1rem;
    width: 116px;
  }
}
.admin-order__list-item-name {
  width: calc(100% - 190px);
  padding: 8px 4px;
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: var(--color-text-menu);
  border-bottom: 1px solid #e2e2e2;
}
@media (max-width: 575.98px) {
  .admin-order__list-item-name {
    font-size: 1.3rem;
    width: calc(100% - 116px);
  }
}
.admin-order__list-item-desc {
  width: calc(100% - 190px);
  padding: 8px 4px;
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: var(--color-text-menu);
  border-bottom: 1px solid #e2e2e2;
}
@media (max-width: 575.98px) {
  .admin-order__list-item-desc {
    font-size: 1.3rem;
    width: calc(100% - 116px);
  }
}
.admin-order__list-item-num {
  width: calc(100% - 190px);
  padding: 8px 4px;
  font-family: "K2D", sans-serif;
  font-size: 2.2rem;
  line-height: 2.4rem;
  font-weight: 600;
  color: var(--color-price);
  text-align: center;
  font-size: 1.4rem;
  color: var(--color-text-menu);
  border-bottom: 1px solid #e2e2e2;
  text-align: left;
}
@media (max-width: 575.98px) {
  .admin-order__list-item-num {
    font-size: 1.3rem;
    width: calc(100% - 116px);
  }
}

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

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

.admin-order-detail {
  padding-left: 336px;
}
@media (max-width: 991.98px) {
  .admin-order-detail {
    padding-left: 0;
    padding-top: 150px;
  }
}
.admin-order-detail__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-order-detail__list-item {
  display: block;
  padding: 12px;
}
@media (max-width: 575.98px) {
  .admin-order-detail__list-item {
    padding: 8px;
    border-radius: 6px;
  }
}
.admin-order-detail__list-item + .admin-order-detail__list-item {
  margin-top: 30px;
}
.admin-order-detail__list-item-info {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 6px 0;
}
@media (max-width: 575.98px) {
  .admin-order-detail__list-item-info {
    gap: 10px;
    padding: 6px 0;
  }
}
.admin-order-detail__list-item-id {
  width: calc(100% - 190px);
  font-size: 1.4rem;
  width: 190px;
  padding: 8px;
  color: #bb6653;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  background-color: var(--background-carousel);
}
@media (max-width: 575.98px) {
  .admin-order-detail__list-item-id {
    font-size: 1.1rem;
    width: 116px;
  }
}
.admin-order-detail__list-item-name {
  width: calc(100% - 190px);
  padding: 8px 4px;
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: var(--color-text-menu);
  border-bottom: 1px solid #e2e2e2;
}
@media (max-width: 575.98px) {
  .admin-order-detail__list-item-name {
    font-size: 1.3rem;
    width: calc(100% - 116px);
  }
}
.admin-order-detail__list-item-desc {
  width: calc(100% - 190px);
  padding: 8px 4px;
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: var(--color-text-menu);
  border-bottom: 1px solid #e2e2e2;
}
@media (max-width: 575.98px) {
  .admin-order-detail__list-item-desc {
    font-size: 1.3rem;
    width: calc(100% - 116px);
  }
}
.admin-order-detail__list-item-num {
  width: calc(100% - 190px);
  padding: 8px 4px;
  font-family: "K2D", sans-serif;
  font-size: 2.2rem;
  line-height: 2.4rem;
  font-weight: 600;
  color: var(--color-price);
  text-align: center;
  font-size: 1.4rem;
  color: var(--color-text-menu);
  border-bottom: 1px solid #e2e2e2;
  text-align: left;
}
@media (max-width: 575.98px) {
  .admin-order-detail__list-item-num {
    font-size: 1.3rem;
    width: calc(100% - 116px);
  }
}
.admin-order-detail__product {
  margin-top: 50px;
  display: flex;
  align-items: center;
  gap: 30px;
}
@media (max-width: 575.98px) {
  .admin-order-detail__product {
    flex-direction: column;
  }
}
.admin-order-detail__thumb {
  width: 240px;
  height: 200px;
}
.admin-order-detail__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
}
.admin-order-detail__product-title {
  font-family: "Fz-Poppins";
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 3rem;
  color: var(--color-title-card-prod);
  margin-bottom: 10px;
}
.admin-order-detail__price {
  font-size: 1.8rem;
  font-family: "Fz Poppins";
  font-weight: 500;
  color: var(--color-title-card-prod);
  margin-bottom: 12px;
}
.admin-order-detail__price-cost {
  font-size: 1.8rem;
  font-family: "K2D", sans-serif;
  font-weight: 500;
  color: #fe7743;
}
.admin-order-detail__volume-quantities {
  font-size: 1.8rem;
  font-family: "Fz Poppins";
  font-weight: 500;
  color: var(--color-title-card-prod);
}
.admin-order-detail__row-cost {
  display: flex;
  align-items: center;
  margin-top: 40px;
  background-color: #e2e2e2;
  border-radius: 4px;
}
.admin-order-detail__desc-cost {
  color: #bb6653;
  font-size: 2rem;
  padding: 8px 12px;
  width: 30%;
}
@media (max-width: 767.98px) {
  .admin-order-detail__desc-cost {
    width: auto;
  }
}
.admin-order-detail__cost {
  color: #fe7743;
  font-size: 2.2rem;
  font-family: "K2D", sans-serif;
}

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

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

.admin-home {
  margin-left: 288px;
  padding: 0 20px;
}
@media (max-width: 991.98px) {
  .admin-home {
    margin-left: 0;
    padding: 90px 0 0 0;
  }
}
.admin-home__heading {
  font-size: 1.8rem;
  color: var(--color-26);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
}

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

.body-admin-logo {
  position: relative;
  min-height: 100vh;
  padding: 30px 0;
  background-color: var(--bg-content-admin);
}
@media (max-width: 991.98px) {
  .body-admin-logo {
    background-color: var(--bg-color-admin-body);
    position: static;
  }
}

.admin-msg {
  position: fixed;
  top: 40px;
  right: 40px;
  width: 240px;
  z-index: 9999;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  animation: fadeIn 0.3s forwards, fadeOut 0.3s forwards ease-out 4s;
}
.admin-msg__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 20px;
  background-color: var(--color-success);
}
.admin-msg__head i {
  font-size: 2.2rem;
  color: var(--color-fff);
}
.admin-msg__head h4 {
  color: var(--color-fff);
  font-size: 1.4rem;
  font-weight: 500;
}
.admin-msg__msg {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 8px;
}

.admin-logo {
  margin-left: 288px;
  padding: 0 20px;
}
@media (max-width: 991.98px) {
  .admin-logo {
    margin-left: 0;
    padding: 90px 0 0 0;
  }
}
.admin-logo__heading {
  font-size: 1.8rem;
  color: var(--color-26);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 30px;
}
.admin-logo__rows {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
.admin-logo__desktop, .admin-logo__mobile {
  width: calc(50% - 30px);
}
@media (max-width: 575.98px) {
  .admin-logo__desktop, .admin-logo__mobile {
    width: 100%;
  }
}
.admin-logo__mobile-form-head, .admin-logo__desktop-form-head {
  font-size: 1.4rem;
  color: var(--color-777);
  text-align: center;
  margin-bottom: 12px;
}
.admin-logo__desktop-form, .admin-logo__mobile-form {
  max-width: 400px;
  width: 100%;
  background: var(--color-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: 200px;
  background: var(--color-ffe);
  margin-bottom: 14px;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.admin-logo__area .icon {
  font-size: 60px;
}
.admin-logo__area h3 {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 6px;
}
.admin-logo__area p {
  display: flex;
  align-items: center;
  color: var(--color-8b);
  font-size: 1.2rem;
}
.admin-logo__area p span {
  padding-left: 8px;
  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: var(--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__alt {
  margin-bottom: 20px;
  position: relative;
}
.admin-logo__alt label {
  display: block;
  font-size: 1.4rem;
  color: var(--color-777);
}
.admin-logo__alt input {
  border-bottom: 2px dashed var(--color-e8);
  padding: 8px 0;
  padding-right: 35px;
  width: 100%;
  font-size: 1.4rem;
  color: var(--color-777);
  caret-color: var(--color-primary);
}
.admin-logo__alt i {
  position: absolute;
  top: 30%;
  right: 5px;
  color: var(--color-link-1);
  font-size: 2rem;
  cursor: pointer;
}
.admin-logo__action-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
.admin-logo__add-img {
  width: 52px;
  height: 52px;
  background-color: var(--color-ca);
  color: var(--color-link-1);
  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;
}
.admin-logo__add-img:hover {
  background-color: var(--color-ffe);
  color: var(--color-orange);
}
.admin-logo__add-img i {
  font-size: 28px;
  padding: 8px;
  pointer-events: auto;
  cursor: pointer;
}
.admin-logo__btn {
  padding: 8px 26px;
  border: 2px solid var(--primary-color);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--primary-color);
  background-color: var(--color-e9);
  border-radius: 4px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
  opacity: 0.6;
}
.admin-logo__btn:hover {
  background-color: var(--primary-color);
  color: var(--color-fff);
}

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

.body-admin-product {
  position: relative;
  min-height: 100vh;
  padding: 30px 0;
  background-color: var(--bg-content-admin);
}
@media (max-width: 991.98px) {
  .body-admin-product {
    background-color: var(--bg-color-admin-body);
    position: static;
  }
}

.admin-product {
  margin-left: 288px;
  padding: 0 20px;
}
@media (max-width: 991.98px) {
  .admin-product {
    margin-left: 0;
    padding: 90px 0 0 0;
  }
}
.admin-product__heading {
  font-size: 1.8rem;
  color: var(--color-26);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 30px;
}
.admin-product__container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  min-height: 100vh;
  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);
  }
}
@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;
  height: 42px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--primary-font);
  font-size: 1.6rem;
  font-weight: 500;
  padding: 0 6px;
  text-align: justify;
  color: var(--primary-color);
}
.admin-product__sub-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--primary-font);
  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 {
  display: inline-block;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 10px 12px;
  border: 2px solid var(--primary-color);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--primary-color);
  background-color: var(--color-e9);
  border-radius: 4px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
  cursor: pointer;
  margin-bottom: 24px;
}
.admin-product__btn:hover {
  background-color: var(--primary-color);
  color: var(--color-fff);
}
.admin-product__display {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
}

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

.body-admin-add-product {
  position: relative;
  min-height: 100vh;
  padding: 30px 0;
  background-color: var(--bg-content-admin);
}
@media (max-width: 991.98px) {
  .body-admin-add-product {
    background-color: var(--bg-color-admin-body);
    position: static;
  }
}

.admin-add-product {
  margin-left: 288px;
  padding: 0 20px;
}
@media (max-width: 991.98px) {
  .admin-add-product {
    margin-left: 0;
    padding: 90px 0 0 0;
  }
}
.admin-add-product__heading {
  font-size: 1.8rem;
  color: var(--color-26);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 30px;
}
.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: 20px;
}
.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: var(--primary-color);
}
.admin-add-product__form-group:focus-within .admin-add-product__form-input {
  border-color: var(--color-5c);
}
.admin-add-product__form-group:focus-within .admin-add-product__form-text-area {
  border-color: var(--color-5c);
}
.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 dashed var(--color-9e);
  padding: 4px 0 10px;
  color: #321f70;
  caret-color: var(--primary-color);
}
.admin-add-product__form-input::placeholder {
  color: #9b93b3;
}
.admin-add-product__rows {
  display: flex;
  gap: 30px;
}
.admin-add-product__rows > .admin-add-product__form-group {
  flex: 0 0 calc((100% - 60px) / 3);
}
.admin-add-product__form-text-area {
  width: 100%;
  min-height: 50px;
  border-bottom: 2px dashed var(--color-9e);
  font-size: 1.4rem;
  line-height: 1.3;
  font-family: var(--primary-font);
  resize: 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;
  padding: 6px 10px;
  border: 2px solid var(--primary-color);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--primary-color);
  background-color: var(--color-e9);
  border-radius: 4px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
  cursor: pointer;
  font-size: 1.4rem;
  background-color: #fff;
}
.admin-add-product__property-list i:hover {
  background-color: var(--primary-color);
  color: var(--color-fff);
}
.admin-add-product__property-item {
  margin-left: 30px;
  list-style-type: circle;
  padding: 6px 0;
}
.admin-add-product__property-item i {
  display: inline-block;
  padding: 6px 10px;
  border: 2px solid var(--primary-color);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--primary-color);
  background-color: var(--color-e9);
  border-radius: 4px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
  cursor: pointer;
  font-size: 1.4rem;
  background-color: #fff;
}
.admin-add-product__property-item i:hover {
  background-color: var(--primary-color);
  color: var(--color-fff);
}
.admin-add-product__form-price {
  width: 100%;
  font-size: 1.5rem;
  border-bottom: 2px dashed var(--color-9e);
  padding: 8px 10px;
  color: var(--color-5c);
  caret-color: var(--primary-color);
}
.admin-add-product__form-price::placeholder {
  color: var(--color-ca);
}
.admin-add-product__rows-prices {
  display: flex;
  gap: 30px;
}
.admin-add-product__rows-prices > .admin-add-product__form-group {
  flex: 0 0 calc((100% - 30px) / 2);
}
.admin-add-product__btn-submit {
  display: inline-block;
  padding: 6px 10px;
  border: 2px solid var(--primary-color);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--primary-color);
  background-color: var(--color-e9);
  border-radius: 4px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
  cursor: pointer;
}
.admin-add-product__btn-submit:hover {
  background-color: var(--primary-color);
  color: var(--color-fff);
}
.admin-add-product__btn-add {
  display: inline-block;
  padding: 6px 10px;
  border: 2px solid var(--primary-color);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--primary-color);
  background-color: var(--color-e9);
  border-radius: 4px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
  cursor: pointer;
  margin-bottom: 30px;
  background-color: var(--color-fff);
}
.admin-add-product__btn-add:hover {
  background-color: var(--primary-color);
  color: var(--color-fff);
}
.admin-add-product__submit {
  display: inline-block;
  padding: 8px 28px;
  border: 2px solid var(--primary-color);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--primary-color);
  background-color: var(--color-e9);
  border-radius: 4px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
  cursor: pointer;
  background-color: var(--color-fff);
  margin-bottom: 30px;
}
.admin-add-product__submit:hover {
  background-color: var(--primary-color);
  color: var(--color-fff);
}
.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: 20px;
  flex-wrap: wrap;
}
.admin-add-product__card {
  position: relative;
  width: 200px;
  height: 260px;
  border-radius: 6px;
  overflow: hidden;
  background-color: var(--color-f1);
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.admin-add-product__card i {
  display: block;
  font-size: 1.8rem;
  position: absolute;
  top: 8px;
  right: 8px;
  color: var(--primary-color);
  cursor: pointer;
  transition: 0.3s;
  text-align: right;
}
.admin-add-product__card i:hover {
  color: var(--color-orange);
}
.admin-add-product__card-plus {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  border-radius: 6px;
  background-color: var(--color-fff);
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.admin-add-product__card-img {
  width: 200px;
  margin: 0 auto;
}
.admin-add-product__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.admin-add-product__card-content {
  padding: 12px 20px;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.admin-add-product__card-content .icon {
  font-size: 6rem;
  cursor: pointer;
  color: var(--admin-btn-color);
  transition: 0.3s;
}
.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: 1.4rem;
  font-weight: 500;
  margin-bottom: 6px;
}
.admin-add-product__card-content p {
  display: flex;
  align-items: center;
  color: var(--color-9e);
  font-size: 1.2rem;
}
.admin-add-product__form-alt {
  padding: 6px;
}
.admin-add-product__form-alt > label {
  display: block;
  font-size: 1.2rem;
  color: var(--color-26);
}
.admin-add-product__form-alt > input {
  font-size: 1.2rem;
  color: var(--color-32);
  padding: 3px 0;
  caret-color: var(--primary-color);
}
.admin-add-product__select {
  margin-bottom: 20px;
}
.admin-add-product__select select {
  padding: 4px 12px;
  border: 2px solid var(--color-ca);
  border-radius: 6px;
  cursor: pointer;
  background-color: var(--color-fff);
  color: var(--color-5c);
  font-size: 1.4rem;
}
.admin-add-product__line {
  width: 100%;
  height: 2px;
  background-color: var(--color-ca);
  margin: 30px 0;
  opacity: 0.5;
}
.admin-add-product__option {
  margin-bottom: 30px;
}
.admin-add-product__title-option {
  font-size: 1.4rem;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.4;
  letter-spacing: 0.5px;
  color: var(--primary-color);
  margin-bottom: 20px;
}
.admin-add-product__btn-option-add {
  padding: 6px 12px;
  border: 2px solid var(--primary-color);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--primary-color);
  background-color: var(--color-e9);
  border-radius: 4px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 30px;
}
.admin-add-product__btn-option-add:hover {
  background-color: var(--primary-color);
  color: var(--color-fff);
}
.admin-add-product__btn-option-edit {
  padding: 6px 12px;
  border: 2px solid var(--color-orange);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--color-orange);
  background-color: var(--color-e9);
  border-radius: 4px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 30px;
}
.admin-add-product__btn-option-edit:hover {
  background-color: var(--color-orange);
  color: var(--color-fff);
}
.admin-add-product__btn-option-del {
  padding: 6px 12px;
  border: 2px solid var(--color-red);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--color-red);
  background-color: var(--color-e9);
  border-radius: 4px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 30px;
}
.admin-add-product__btn-option-del:hover {
  background-color: var(--color-red);
  color: var(--color-fff);
}
.admin-add-product__form-option-value {
  margin-bottom: 20px;
}
.admin-add-product__form-option-value > label {
  font-size: 1.4rem;
  color: var(--color-32);
  display: block;
  line-height: 1.4rem;
  margin-bottom: 12px;
}
.admin-add-product__form-option-value > input {
  border: 2px solid var(--color-d8);
  width: 240px;
  padding: 8px 4px;
  caret-color: var(--primary-color);
  font-size: 1.3rem;
  margin-right: 20px;
  border-radius: 4px;
}
.admin-add-product__form-option-value button {
  padding: 4px 12px;
}
.admin-add-product__container-option-value {
  margin-bottom: 20px;
}
.admin-add-product__rows-option-value {
  margin-bottom: 20px;
}
.admin-add-product__rows-option-value > label {
  font-size: 1.4rem;
  color: var(--color-32);
  display: block;
  line-height: 1.4rem;
  margin-bottom: 12px;
}
.admin-add-product__rows-option-value > label::first-letter {
  text-transform: uppercase;
}
.admin-add-product__rows-option-value > input {
  border: 2px solid var(--color-d8);
  width: 240px;
  padding: 8px 4px;
  caret-color: var(--primary-color);
  font-size: 1.3rem;
  margin-right: 20px;
  border-radius: 4px;
}
.admin-add-product__container-variants {
  margin-bottom: 20px;
}
.admin-add-product__container-variants h3 {
  color: var(--primary-color);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 20px;
}
.admin-add-product__container-variants-item label {
  font-size: 1.4rem;
  color: var(--color-32);
  display: block;
  line-height: 1.4rem;
  margin-bottom: 12px;
  font-weight: 600;
}
.admin-add-product__container-variants-rows {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.admin-add-product__container-variants-rows > input {
  flex: 0 0 calc((100% - 60px) / 4);
  border: 2px solid var(--color-d8);
  padding: 8px 4px;
  caret-color: var(--primary-color);
  font-size: 1.3rem;
  border-radius: 4px;
}
@media (max-width: 767.98px) {
  .admin-add-product__container-variants-rows > input {
    flex: 0 0 calc((100% - 20px) / 2);
  }
}

.admin-edit-product {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}
.admin-edit-product__images-block {
  position: relative;
  margin-bottom: 30px;
}
.admin-edit-product__image {
  width: 300px;
  height: 300px;
  border-radius: 12px;
  object-fit: cover;
  object-position: center;
}
.admin-edit-product__btn {
  position: absolute;
  left: 10px;
  top: 10px;
}
.admin-edit-product__btn i {
  font-size: 20px;
  color: #3a208c;
  padding: 5px;
  cursor: pointer;
  transition: color 0.3s;
}
.admin-edit-product__btn i:hover {
  color: #70034c;
}

.admin-header-menu {
  width: 288px;
  height: 100vh;
  position: fixed;
  top: 0;
  background-color: var(--bg-color-admin-nav);
}
@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: space-between;
  border-bottom: 2px solid var(--color-d8);
}
.admin-header-menu__logo {
  padding: 19px 14px;
  width: 100%;
}
.admin-header-menu__logo a {
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}
.admin-header-menu__logo a h1 {
  color: #fff;
  font-size: 1.8;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.4;
  text-transform: uppercase;
}
.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: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 14px;
  }
}
.admin-header-menu__toggle-menu i {
  display: inline-block;
  font-size: 3rem;
  color: #fff;
  cursor: pointer;
}
.admin-header-menu__toggle-menu i:last-child {
  display: none;
}
.admin-header-menu__list {
  display: block;
  overflow-y: auto;
  scroll-behavior: smooth;
  height: calc(100% - 100px);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.admin-header-menu__list::-webkit-scrollbar {
  display: none;
}
.admin-header-menu li {
  border-bottom: 1px dashed var(--color-9e);
}
.admin-header-menu__items {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  -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 span {
  color: var(--color-fff);
}
.admin-header-menu__items i {
  color: var(--color-link-2);
  font-size: 1.6rem;
  width: 20px;
}
.admin-header-menu__items span {
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--color-admin-nav);
  cursor: pointer;
  transition: color 0.15s;
}

.active-admin-nav {
  color: var(--color-fff);
}

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

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

.admin-banner {
  margin-left: 288px;
  padding: 0 20px;
}
@media (max-width: 991.98px) {
  .admin-banner {
    margin-left: 0;
    padding: 90px 0 0 0;
  }
}
.admin-banner__heading {
  font-size: 1.8rem;
  color: var(--color-26);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.admin-banner__content {
  margin-top: 20px;
}
.admin-banner__content > span {
  display: inline-block;
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--color-666);
  text-transform: uppercase;
  margin-bottom: 15px;
}
.admin-banner__cards {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
}
.admin-banner__card {
  width: calc(50% - 30px);
}
@media (max-width: 575.98px) {
  .admin-banner__card {
    width: 100%;
  }
}
.admin-banner__card-thumb {
  position: relative;
  width: 100%;
  padding-top: 40%;
}
.admin-banner__card-thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.admin-banner__edit {
  position: absolute;
  top: 10px;
  right: 50px;
  z-index: 100;
}
.admin-banner__edit i {
  color: var(--color-orange-strong);
  font-size: 2rem;
  cursor: pointer;
}
.admin-banner__delete {
  position: absolute;
  top: 10px;
  right: 15px;
  z-index: 100;
}
.admin-banner__delete i {
  color: var(--color-red);
  font-size: 2rem;
  cursor: pointer;
}
.admin-banner__card-content {
  background-color: var(--color-d8);
  padding: 12px 4px;
}
.admin-banner__card-title {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--color-26);
  letter-spacing: 1px;
  margin-bottom: 8px;
  line-height: 1.4;
  text-transform: uppercase;
}
.admin-banner__card-title > span {
  color: var(--color-666);
  font-size: 1.4rem;
  padding-right: 12px;
  letter-spacing: 0;
  text-transform: none;
}
.admin-banner__card-alt {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-26);
  margin-bottom: 8px;
  line-height: 1.4;
}
.admin-banner__card-alt > span {
  color: var(--color-666);
  font-size: 1.4rem;
  padding-right: 12px;
}
.admin-banner__card-link {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-link-2);
  margin-bottom: 8px;
  line-height: 1.4;
}
.admin-banner__card-link > span {
  color: var(--color-666);
  font-size: 1.4rem;
  padding-right: 12px;
}
.admin-banner__err {
  font-size: 1.4rem;
  color: var(--color-666);
  line-height: 1.4;
}
.admin-banner__link {
  padding: 8px 24px;
  border: 2px solid var(--primary-color);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--primary-color);
  background-color: var(--color-e9);
  border-radius: 4px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
  cursor: pointer;
  display: inline-block;
}
.admin-banner__link:hover {
  background-color: var(--primary-color);
  color: var(--color-fff);
}
.admin-banner__line {
  width: 100%;
  height: 2px;
  background-color: var(--color-777);
  margin: 30px 0px;
  opacity: 0.6;
}

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

.body-admin-form-banner {
  position: relative;
  min-height: 100vh;
  padding: 30px 0;
  background-color: var(--bg-content-admin);
}
@media (max-width: 991.98px) {
  .body-admin-form-banner {
    background-color: var(--bg-color-admin-body);
    position: static;
  }
}

.admin-form-banner {
  margin-left: 288px;
  padding: 0 20px;
}
@media (max-width: 991.98px) {
  .admin-form-banner {
    margin-left: 0;
    padding: 90px 0 0 0;
  }
}
.admin-form-banner__heading {
  font-size: 1.8rem;
  color: var(--color-26);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.admin-form-banner__desktop, .admin-form-banner__mobile {
  padding: 30px 0;
}
.admin-form-banner__mobile-form-head, .admin-form-banner__desktop-form-head {
  font-size: 1.4rem;
  color: var(--color-777);
  text-align: center;
  margin-bottom: 12px;
}
.admin-form-banner__desktop-form, .admin-form-banner__mobile-form {
  width: 100%;
  background: var(--color-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-form-banner__area {
  position: relative;
  width: 100%;
  height: 300px;
  background: var(--color-ffe);
  margin-bottom: 14px;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.admin-form-banner__area .icon {
  font-size: 60px;
}
.admin-form-banner__area h3 {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 6px;
}
.admin-form-banner__area p {
  display: flex;
  align-items: center;
  color: var(--color-8b);
  font-size: 1.2rem;
}
.admin-form-banner__area p span {
  padding-left: 8px;
  font-weight: 600;
}
.admin-form-banner__area img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  z-index: 100;
}
.admin-form-banner__area::before {
  content: attr(data-img);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: var(--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-form-banner__area.active:hover::before {
  opacity: 1;
}
.admin-form-banner__alt {
  margin-bottom: 20px;
  position: relative;
}
.admin-form-banner__alt label {
  display: block;
  font-size: 1.4rem;
  color: var(--color-777);
}
.admin-form-banner__alt input {
  border-bottom: 2px dashed var(--color-e8);
  padding: 8px 0;
  padding-right: 35px;
  width: 100%;
  font-size: 1.4rem;
  color: var(--color-777);
  caret-color: var(--color-primary);
}
.admin-form-banner__alt i {
  position: absolute;
  top: 30%;
  right: 5px;
  color: var(--color-link-1);
  font-size: 2rem;
  cursor: pointer;
}
.admin-form-banner__action-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
.admin-form-banner__add-img {
  width: 52px;
  height: 52px;
  background-color: var(--color-ca);
  color: var(--color-link-1);
  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;
}
.admin-form-banner__add-img:hover {
  background-color: var(--color-ffe);
  color: var(--color-orange);
}
.admin-form-banner__add-img i {
  font-size: 28px;
  padding: 8px;
  pointer-events: auto;
  cursor: pointer;
}
.admin-form-banner__btn {
  padding: 11px 80px;
  border: 2px solid var(--primary-color);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--primary-color);
  background-color: var(--color-e9);
  border-radius: 4px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
  cursor: pointer;
  pointer-events: none;
  opacity: 0.6;
}
.admin-form-banner__btn:hover {
  background-color: var(--primary-color);
  color: var(--color-fff);
}

.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;
}

.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;
}
.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: 500px;
  }
}
@media (max-width: 767.98px) {
  .admin-product-detail__card {
    width: 100%;
    height: 280px;
    margin-bottom: 80px;
  }
}
.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 {
  width: inherit;
  position: relative;
  overflow: hidden;
}
.admin-product-detail__prod-track {
  width: inherit;
  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;
}
.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;
}
.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;
}
.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.2rem;
  font-weight: 600;
  line-height: 3rem;
  padding: 0 20px;
  color: var(--heading-prod-title);
  margin-bottom: 18px;
  text-align: justify;
}
.admin-product-detail__sub-title {
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: #333;
  text-align: justify;
  font-family: "Open Sans";
  padding-bottom: 25px;
}
.admin-product-detail__block-cost {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 20px;
}
.admin-product-detail__cost {
  font-size: 1.8rem;
  line-height: 3rem;
  font-weight: 600;
  color: #ff7f3e;
}
.admin-product-detail__price {
  font-size: 2rem;
  font-weight: 600;
  color: #113f67;
  line-height: 3rem;
  padding-bottom: 4px;
  font-family: "Noto Serif KR", serif;
}
.admin-product-detail__type-voltage {
  padding-bottom: 18px;
}
.admin-product-detail__specifications {
  font-size: 1.5rem;
  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.2rem;
  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 {
  display: flex;
  align-items: center;
  padding-top: 20px;
}
.admin-product-detail__link {
  display: block;
  width: 70%;
  padding: 16px;
  border-color: #113f67;
  background-color: #113f67;
  color: #fff;
  font-size: 1.8rem;
  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);
}
.admin-product-detail__link:hover {
  background-color: #ff7f3e;
  color: #fff;
}

.admin-prod-detail__desc {
  padding: 80px 0;
}
.admin-prod-detail__desc-heading {
  font-size: 1.8rem;
  font-family: "Noto Sans";
  color: #fff;
  background-color: var(--bg-color-left-nav);
  font-weight: 600;
  padding: 18px 22px;
  margin-bottom: 30px;
}
.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.4rem;
  line-height: 2.2rem;
  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.4rem;
  line-height: 2.1rem;
  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-project {
  background-color: var(--bg-color-admin-body);
}
@media (max-width: 991.98px) {
  .main-admin-project {
    position: relative;
  }
}

.body-admin-project {
  position: relative;
  min-height: 100vh;
  padding: 30px 0;
  background-color: var(--bg-content-admin);
}
@media (max-width: 991.98px) {
  .body-admin-project {
    background-color: var(--bg-color-admin-body);
    position: static;
  }
}

.admin-project {
  margin-left: 288px;
  padding: 0 20px;
}
@media (max-width: 991.98px) {
  .admin-project {
    margin-left: 0;
    padding: 90px 0 0 0;
  }
}
.admin-project__heading {
  font-size: 1.8rem;
  color: var(--color-26);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.admin-project__message {
  font-size: 1.7rem;
  margin-bottom: 50px;
}
.admin-project__btn {
  padding: 8px 30px;
  border: 2px solid var(--primary-color);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--primary-color);
  background-color: var(--color-e9);
  border-radius: 4px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 24px;
}
.admin-project__btn:hover {
  background-color: var(--primary-color);
  color: var(--color-fff);
}
.admin-project__card {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
}
.admin-project__card-item {
  width: calc(33.3333333333% - 40px);
  background-color: #fff;
  border-radius: 4px;
  transition: all 0.3s;
}
@media (max-width: 991.98px) {
  .admin-project__card-item {
    width: calc(50% - 20px);
    -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: 6px;
}
.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: 4px 4px 0 0;
  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__card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 44px;
  font-family: var(--primary-font);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1.4;
  color: #028391;
  margin-bottom: 8px;
}
.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;
  font-size: 1.2rem;
  line-height: 1.4;
  height: 50px;
  margin-bottom: 12px;
}
.admin-project__act {
  display: flex;
  gap: 20px;
}
.admin-project__btn-card {
  padding: 6px 8px;
  border: 2px solid var(--primary-color);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--primary-color);
  background-color: var(--color-e9);
  border-radius: 4px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
  cursor: pointer;
}
.admin-project__btn-card:hover {
  background-color: var(--primary-color);
  color: var(--color-fff);
}
.admin-project__btn-card-strong {
  display: inline-block;
  color: var(--btn-ad-bg-color-strong);
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 6px 8px;
  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;
  border: none;
  line-height: 1;
}
.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 {
  padding: 6px 8px;
  border: 2px solid var(--color-red);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--color-red);
  background-color: var(--color-e9);
  border-radius: 4px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
  cursor: pointer;
  border: none;
  line-height: 1;
}
.admin-project__btn-card-danger:hover {
  background-color: var(--color-red);
  color: var(--color-fff);
}

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

.body-admin-add-project {
  position: relative;
  min-height: 100vh;
  padding: 30px 0;
  background-color: var(--bg-content-admin);
}
@media (max-width: 991.98px) {
  .body-admin-add-project {
    background-color: var(--bg-color-admin-body);
    position: static;
  }
}

.admin-add-project {
  margin-left: 288px;
  padding: 0 20px;
}
@media (max-width: 991.98px) {
  .admin-add-project {
    margin-left: 0;
    padding: 90px 0 0 0;
  }
}
.admin-add-project__heading {
  font-size: 1.8rem;
  color: var(--color-26);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.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 {
  padding: 10px 32px;
  border: 2px solid var(--primary-color);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--primary-color);
  background-color: var(--color-e9);
  border-radius: 4px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
  cursor: pointer;
  font-size: 1.6rem;
}
.admin-add-project__btn:hover {
  background-color: var(--primary-color);
  color: var(--color-fff);
}

.admin-content-home {
  margin-left: 288px;
  padding: 0 20px;
}
@media (max-width: 991.98px) {
  .admin-content-home {
    margin-left: 0;
    padding: 90px 0 0 0;
  }
}
.admin-content-home__heading {
  font-size: 1.8rem;
  color: var(--color-26);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.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 {
  padding: 8px 22px;
  border: 2px solid var(--primary-color);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--primary-color);
  background-color: var(--color-e9);
  border-radius: 4px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
  cursor: pointer;
  display: inline-block;
  margin-top: 30px;
}
.admin-content-home__form-btn:hover {
  background-color: var(--primary-color);
  color: var(--color-fff);
}
.admin-content-home__form-btn-del {
  padding: 7px 22px;
  border: 2px solid var(--color-red);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--color-red);
  background-color: var(--color-e9);
  border-radius: 4px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
  cursor: pointer;
  display: inline-block;
  margin-top: 30px;
}
.admin-content-home__form-btn-del:hover {
  background-color: var(--color-red);
  color: var(--color-fff);
}
.admin-content-home__submit {
  display: inline-block;
  margin-top: 30px;
  padding: 8px 28px;
  border: 2px solid var(--primary-color);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--primary-color);
  background-color: var(--color-e9);
  border-radius: 4px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
  cursor: pointer;
}
.admin-content-home__submit:hover {
  background-color: var(--primary-color);
  color: var(--color-fff);
}

/* 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: 38px;
  font-family: "Fz Poppins";
  font-size: 2.8rem;
  font-weight: 500;
  line-height: 3.6rem;
  text-align: justify;
  color: var(--heading-prod-title);
}
@media (max-width: 767.98px) {
  .admin-view-project__content h1 {
    font-size: 1.8rem;
  }
}
.admin-view-project__content h2 {
  margin-bottom: 38px;
  font-family: "Fz Poppins";
  font-size: 2.8rem;
  font-weight: 500;
  line-height: 3.6rem;
  text-align: justify;
  color: var(--heading-prod-title);
  font-size: 1.8rem;
  margin-bottom: 22px;
}
@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: 38px;
  font-family: "Fz Poppins";
  font-size: 2.8rem;
  font-weight: 500;
  line-height: 3.6rem;
  text-align: justify;
  color: var(--heading-prod-title);
  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 p {
  font-family: "Open Sans";
  font-weight: 400;
  color: #313131;
  font-size: 1.4rem;
  line-height: 2.4rem;
  text-align: justify;
  text-indent: 28px;
  margin-bottom: 30px;
}
@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 .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 ul {
  padding-left: 30px;
  margin-bottom: 20px;
}
.admin-view-project__content ul li {
  font-family: "Open Sans";
  padding: 6px 0;
  font-weight: 400;
  color: #313131;
  font-size: 1.4rem;
  line-height: 2.4rem;
  text-align: justify;
  list-style: outside;
}
.admin-view-project__content ol {
  padding-left: 30px;
  margin-bottom: 30px;
}
.admin-view-project__content ol li {
  font-family: "Open Sans";
  padding: 6px 0;
  font-weight: 400;
  color: #313131;
  font-size: 1.4rem;
  line-height: 2.4rem;
  text-align: justify;
  list-style: lower-alpha;
}
.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-profile {
  background-color: var(--bg-color-admin-body);
}
@media (max-width: 991.98px) {
  .main-admin-profile {
    position: relative;
  }
}

.body-admin-profile {
  position: relative;
  min-height: 100vh;
  padding: 30px 0;
  background-color: var(--bg-content-admin);
}
@media (max-width: 991.98px) {
  .body-admin-profile {
    background-color: var(--bg-color-admin-body);
    position: static;
  }
}

.admin-profile {
  margin-left: 288px;
  padding: 0 20px;
}
@media (max-width: 991.98px) {
  .admin-profile {
    margin-left: 0;
    padding: 90px 0 0 0;
  }
}
.admin-profile__heading {
  font-size: 1.8rem;
  color: var(--color-26);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 30px;
}

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

.body-admin-video {
  position: relative;
  min-height: 100vh;
  padding: 30px 0;
  background-color: var(--bg-content-admin);
}
@media (max-width: 991.98px) {
  .body-admin-video {
    background-color: var(--bg-color-admin-body);
    position: static;
  }
}

.admin-video {
  margin-left: 288px;
  padding: 0 20px;
}
@media (max-width: 991.98px) {
  .admin-video {
    margin-left: 0;
    padding: 90px 0 0 0;
  }
}
.admin-video__heading {
  font-size: 1.8rem;
  color: var(--color-26);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.admin-video__non-desc {
  margin-bottom: 30px;
}
.admin-video__cards {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 30px;
}
.admin-video__card {
  width: calc(50% - 30px);
  flex: 0 0 auto;
  background-color: var(--color-d8);
  border-radius: 6px;
}
@media (max-width: 575.98px) {
  .admin-video__card {
    width: 100%;
  }
}
.admin-video__thumb {
  position: relative;
  padding-top: 56%;
  overflow: hidden;
}
.admin-video__thumb iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.admin-video__icon {
  font-size: 2rem;
  margin-bottom: 12px;
}
.admin-video__icon a {
  color: var(--color-orange-strong);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}
.admin-video__icon span {
  color: var(--color-red);
  margin-left: 12px;
  cursor: pointer;
}
.admin-video__body {
  padding: 8px 4px;
}
.admin-video__title {
  font-size: 1.4rem;
  line-height: 1.4;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-5c);
  margin-bottom: 12px;
  text-align: justify;
}
.admin-video__desc {
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--color-666);
  margin-bottom: 10px;
  text-align: justify;
}
.admin-video__form-group {
  width: 100%;
  margin-bottom: 20px;
}
.admin-video__form-label {
  display: block;
  font-size: 1.4rem;
  color: var(--color-666);
  line-height: 1.4;
}
.admin-video__form-input {
  width: 100%;
  border: 2px solid var(--color-ca);
  resize: none;
  border-radius: 4px;
  caret-color: var(--color-primary);
  padding: 8px 6px;
  font-size: 1.4rem;
  color: var(--color-5c);
}
.admin-video__btn {
  display: inline-block;
  padding: 8px 16px;
  border: 2px solid var(--primary-color);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--primary-color);
  background-color: var(--color-e9);
  border-radius: 4px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}
.admin-video__btn:hover {
  background-color: var(--primary-color);
  color: var(--color-fff);
}

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